diff --git a/README.md b/README.md
index 8d9329e3d..76f4bf023 100644
--- a/README.md
+++ b/README.md
@@ -61,6 +61,18 @@ export default config;
 
 The package ships Base Nova tokens, fonts, preflight, animations, and compiled theme CSS. Consumer Tailwind/Sass config is neither required nor read.
 
+## Container width
+
+The navbar, docs content, footer, OpenAPI layout, and large dialogs share a `90rem` maximum width by default. Set one theme option to use a narrower or wider constant:
+
+```ts
+themes: [
+  ["@aeei/docusaurus-theme", { containerMaxWidth: "80rem" }],
+],
+```
+
+Positive `px`/`rem` strings are accepted. Numbers are interpreted as pixels.
+
 ## Search
 
 Search is disabled by default.
@@ -172,7 +184,7 @@ Requirements:
 Consumers then install a pinned release:
 
 ```bash
-npm install @aeei/docusaurus-theme@0.1.10
+npm install @aeei/docusaurus-theme@0.1.11
 ```
 
 This repository does not publish automatically from an unapproved working tree.
diff --git a/UPSTREAM.md b/UPSTREAM.md
index 5a2051d51..add3864cf 100644
--- a/UPSTREAM.md
+++ b/UPSTREAM.md
@@ -37,4 +37,4 @@ This repository is a maintained fork of [`PaloAltoNetworks/docusaurus-openapi-do
 
 - Last integrated upstream release: `v5.1.3`
 - Upstream baseline commit: `d5af4f22e951712e084df8b7c513a1708e56d372`
-- Current AEEI theme release: `0.1.10`
+- Current AEEI theme release: `0.1.11`
diff --git a/demo/customMdGenerators.ts b/demo/customMdGenerators.ts
index 004988eb3..74fc30d9e 100644
--- a/demo/customMdGenerators.ts
+++ b/demo/customMdGenerators.ts
@@ -48,7 +48,7 @@ export function myCustomApiMdGenerator({
     `import RequestSchema from "@theme/RequestSchema";\n`,
     `import StatusCodes from "@theme/StatusCodes";\n`,
     `import OperationTabs from "@theme/OperationTabs";\n`,
-    `import TabItem from "@theme/TabItem";\n`,
+    `import TabItem from "@theme/ApiTabItem";\n`,
     `import Heading from "@theme/Heading";\n`,
     `import Translate from "@docusaurus/Translate";\n\n`,
     createHeading(title),
diff --git a/demo/docs/intro.mdx b/demo/docs/intro.mdx
index 6dee428cf..96793eaf9 100644
--- a/demo/docs/intro.mdx
+++ b/demo/docs/intro.mdx
@@ -239,6 +239,8 @@ The `docusaurus-plugin-openapi-docs` plugin can be configured with the following
 
 > You may optionally configure a `sidebarOptions`. In doing so, an individual `sidebar.js` slice with the configured options will be generated within the respective `outputDir`.
 
+### versions
+
 `versions` can be configured with the following options:
 
 | Name        | Type     | Default | Description |
diff --git a/demo/docusaurus.config.ts b/demo/docusaurus.config.ts
index 15baf699a..f920991cf 100644
--- a/demo/docusaurus.config.ts
+++ b/demo/docusaurus.config.ts
@@ -63,6 +63,7 @@ const config: Config = {
       respectPrefersColorScheme: true,
     },
     navbar: {
+      title: "OpenAPI Docs",
       logo: {
         alt: "OpenAPI Docs",
         src: "img/docusaurus-openapi-docs-logo.svg",
@@ -96,15 +97,13 @@ const config: Config = {
         { type: "custom-PalettePicker", position: "right" },
         {
           href: "https://medium.com/palo-alto-networks-developer-blog",
+          label: "Blog",
           position: "right",
-          className: "header-medium-link",
-          "aria-label": "Palo Alto Networks Developer Blog",
         },
         {
           href: "https://github.com/PaloAltoNetworks/docusaurus-openapi-docs",
+          label: "GitHub",
           position: "right",
-          className: "header-github-link",
-          "aria-label": "GitHub repository",
         },
       ],
     },
@@ -262,11 +261,6 @@ const config: Config = {
         logoClass: "rust",
       },
     ],
-    algolia: {
-      apiKey: "441074cace987cbf4640c039ebed303c",
-      appId: "J0EABTYI1A",
-      indexName: "docusaurus-openapi",
-    },
     announcementBar: {
       id: "announcementBar_2",
       content: "v5.0.0 is now available! Requires Docusaurus 3.10.0+",
@@ -387,7 +381,6 @@ const config: Config = {
         } satisfies Plugin.PluginOptions,
       },
     ],
-    // FOUC prevention: restore saved palette before React hydrates
     function paletteScript() {
       return {
         name: "palette-fouc-script",
@@ -404,12 +397,12 @@ const config: Config = {
       };
     },
   ],
-  themes: ["docusaurus-theme-openapi-docs"],
-  stylesheets: [
-    {
-      href: "https://use.fontawesome.com/releases/v5.11.0/css/all.css",
-      type: "text/css",
-    },
+  themes: [
+    "docusaurus-theme-openapi-docs",
+    [
+      "@aeei/docusaurus-theme",
+      { search: "local", copyPage: true, containerMaxWidth: "90rem" },
+    ],
   ],
 };
 
diff --git a/demo/package.json b/demo/package.json
index f96b58fc9..913b87c26 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -16,7 +16,7 @@
     "clean-api-docs": "docusaurus clean-api-docs",
     "gen-api-docs:version": "docusaurus gen-api-docs:version",
     "clean-api-docs:version": "docusaurus clean-api-docs:version",
-    "gen-all": "docusaurus gen-api-docs all --all-versions",
+    "gen-all": "docusaurus clean-api-docs all --all-versions && docusaurus gen-api-docs all --all-versions",
     "clean-all": "docusaurus clean-api-docs all --all-versions",
     "re-gen": "yarn clean-all-versions && yarn gen-all-versions"
   },
@@ -25,9 +25,11 @@
     "@docusaurus/faster": "3.10.2",
     "@docusaurus/plugin-google-gtag": "3.10.2",
     "@docusaurus/preset-classic": "3.10.2",
+    "@aeei/docusaurus-theme": "*",
     "clsx": "^2.1.1",
     "docusaurus-plugin-openapi-docs": "*",
     "docusaurus-theme-openapi-docs": "*",
+    "lucide-react": "^0.468.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
diff --git a/demo/src/components/PalettePicker/index.tsx b/demo/src/components/PalettePicker/index.tsx
index ee31f2361..f21262e66 100644
--- a/demo/src/components/PalettePicker/index.tsx
+++ b/demo/src/components/PalettePicker/index.tsx
@@ -1,16 +1,17 @@
-/* ============================================================================
- * PalettePicker — runtime color palette switcher for the navbar.
- *
- * Desktop: pill button in the top bar that opens a dropdown.
- * Mobile:  section rendered inside the hamburger drawer (mobile={true}).
- *
- * Dynamically injects /themes/<id>.css into <head> and persists
- * the choice in localStorage under 'openapi-demo-palette'.
- * ========================================================================== */
+import React, { useEffect, useState } from "react";
 
-import React, { useEffect, useRef, useState } from "react";
+import { ChevronDown } from "lucide-react";
 
-import styles from "./styles.module.css";
+import { Button } from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/dropdown-menu";
 
 const THEMES = [
   { id: "evergreen", label: "Evergreen", color: "#2e8555" },
@@ -27,6 +28,10 @@ type ThemeId = (typeof THEMES)[number]["id"];
 const STORAGE_KEY = "openapi-demo-palette";
 const DEFAULT_PALETTE: ThemeId = "evergreen";
 
+function isThemeId(value: string | null): value is ThemeId {
+  return THEMES.some((theme) => theme.id === value);
+}
+
 function applyPalette(id: ThemeId): void {
   let link = document.getElementById(
     "openapi-palette-link"
@@ -41,204 +46,71 @@ function applyPalette(id: ThemeId): void {
   localStorage.setItem(STORAGE_KEY, id);
 }
 
-function MobileSection({
-  active,
-  onSelect,
-  current,
-}: {
-  active: ThemeId;
-  onSelect: (id: ThemeId) => void;
-  current: (typeof THEMES)[number];
-}) {
-  const [expanded, setExpanded] = useState(false);
-
+function PaletteSwatch({ color }: { color: string }) {
   return (
-    <div className={styles.mobileRoot}>
-      <button
-        className={styles.mobileToggle}
-        onClick={() => setExpanded((e) => !e)}
-        aria-expanded={expanded}
-      >
-        <span className={styles.mobileToggleLeft}>
-          <span
-            className={styles.mobileSwatch}
-            style={{ background: current.color }}
-          />
-          <span>Color Palette</span>
-        </span>
-        <svg
-          className={`${styles.mobileChevron} ${expanded ? styles.mobileChevronOpen : ""}`}
-          width="10"
-          height="10"
-          viewBox="0 0 10 10"
-          fill="none"
-          aria-hidden="true"
-        >
-          <path
-            d="M2 3.5L5 6.5L8 3.5"
-            stroke="currentColor"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
-      </button>
-
-      {expanded && (
-        <div className={styles.mobileGrid}>
-          {THEMES.map((theme) => (
-            <button
-              key={theme.id}
-              className={`${styles.mobileTile} ${theme.id === active ? styles.mobileTileActive : ""}`}
-              onClick={() => onSelect(theme.id)}
-              aria-pressed={theme.id === active}
-            >
-              <span
-                className={styles.mobileSwatch}
-                style={{ background: theme.color }}
-              />
-              <span>{theme.label}</span>
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
+    <span
+      aria-hidden="true"
+      className="size-2.5 shrink-0 rounded-full border border-border"
+      style={{ backgroundColor: color }}
+    />
   );
 }
 
 export default function PalettePicker({
-  mobile,
+  mobile = false,
 }: {
   mobile?: boolean;
-}): JSX.Element | null {
-  const [open, setOpen] = useState(false);
+}): React.JSX.Element {
   const [active, setActive] = useState<ThemeId>(DEFAULT_PALETTE);
-  const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    const saved =
-      (localStorage.getItem(STORAGE_KEY) as ThemeId) ?? DEFAULT_PALETTE;
-    setActive(saved);
+    const saved = localStorage.getItem(STORAGE_KEY);
+    const palette = isThemeId(saved) ? saved : DEFAULT_PALETTE;
+    setActive(palette);
     if (!document.getElementById("openapi-palette-link")) {
-      applyPalette(saved);
+      applyPalette(palette);
     }
   }, []);
 
-  // Close dropdown on outside pointer-down (desktop only)
-  useEffect(() => {
-    if (mobile) return;
-    function onPointerDown(e: PointerEvent) {
-      if (
-        containerRef.current &&
-        !containerRef.current.contains(e.target as Node)
-      ) {
-        setOpen(false);
-      }
-    }
-    document.addEventListener("pointerdown", onPointerDown);
-    return () => document.removeEventListener("pointerdown", onPointerDown);
-  }, [mobile]);
+  const current = THEMES.find((theme) => theme.id === active) ?? THEMES[0];
+  const label = mobile ? "Color palette" : current.label;
 
-  useEffect(() => {
-    if (mobile) return;
-    function onKeyDown(e: KeyboardEvent) {
-      if (e.key === "Escape") setOpen(false);
-    }
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [mobile]);
-
-  function select(id: ThemeId) {
-    setActive(id);
-    applyPalette(id);
-    setOpen(false);
-  }
-
-  const current = THEMES.find((t) => t.id === active) ?? THEMES[0];
-
-  /* ---- Mobile drawer ---------------------------------------------------- */
-  if (mobile) {
-    return (
-      <MobileSection active={active} onSelect={select} current={current} />
-    );
-  }
-
-  /* ---- Desktop dropdown ------------------------------------------------- */
   return (
-    <div ref={containerRef} className={styles.root}>
-      <button
-        className={styles.trigger}
-        onClick={() => setOpen((o) => !o)}
-        aria-haspopup="listbox"
-        aria-expanded={open}
-        aria-label={`Color palette: ${current.label}`}
-      >
-        <span
-          className={styles.swatch}
-          style={{ background: current.color }}
-          aria-hidden="true"
-        />
-        <span className={styles.triggerLabel}>{current.label}</span>
-        <svg
-          className={`${styles.chevron} ${open ? styles.chevronOpen : ""}`}
-          width="10"
-          height="10"
-          viewBox="0 0 10 10"
-          fill="none"
-          aria-hidden="true"
-        >
-          <path
-            d="M2 3.5L5 6.5L8 3.5"
-            stroke="currentColor"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            strokeLinejoin="round"
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            type="button"
+            variant={mobile ? "ghost" : "outline"}
+            size={mobile ? "default" : "sm"}
+            aria-label={`Color palette: ${current.label}`}
           />
-        </svg>
-      </button>
-
-      {open && (
-        <div
-          className={styles.dropdown}
-          role="listbox"
-          aria-label="Select color palette"
-        >
-          {THEMES.map((theme) => (
-            <button
-              key={theme.id}
-              role="option"
-              aria-selected={theme.id === active}
-              className={`${styles.option} ${theme.id === active ? styles.optionActive : ""}`}
-              onClick={() => select(theme.id)}
-            >
-              <span
-                className={styles.swatch}
-                style={{ background: theme.color }}
-                aria-hidden="true"
-              />
-              {theme.label}
-              {theme.id === active && (
-                <svg
-                  className={styles.check}
-                  width="12"
-                  height="12"
-                  viewBox="0 0 12 12"
-                  fill="none"
-                  aria-hidden="true"
-                >
-                  <path
-                    d="M2 6L5 9L10 3"
-                    stroke="currentColor"
-                    strokeWidth="1.5"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-              )}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
+        }
+      >
+        <PaletteSwatch color={current.color} />
+        <span>{label}</span>
+        <ChevronDown data-icon="inline-end" aria-hidden="true" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align={mobile ? "start" : "end"}>
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>Color palette</DropdownMenuLabel>
+          <DropdownMenuRadioGroup
+            value={active}
+            onValueChange={(value) => {
+              if (!isThemeId(value)) return;
+              setActive(value);
+              applyPalette(value);
+            }}
+          >
+            {THEMES.map((theme) => (
+              <DropdownMenuRadioItem key={theme.id} value={theme.id}>
+                <PaletteSwatch color={theme.color} />
+                {theme.label}
+              </DropdownMenuRadioItem>
+            ))}
+          </DropdownMenuRadioGroup>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 }
diff --git a/demo/src/components/PalettePicker/styles.module.css b/demo/src/components/PalettePicker/styles.module.css
deleted file mode 100644
index 3d14dfcf8..000000000
--- a/demo/src/components/PalettePicker/styles.module.css
+++ /dev/null
@@ -1,203 +0,0 @@
-/* ============================================================
- * Desktop — pill trigger + dropdown
- * ============================================================ */
-
-.root {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.trigger {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 10px 4px 8px;
-  border: 1px solid var(--ifm-color-emphasis-300);
-  border-radius: 6px;
-  background: transparent;
-  color: var(--ifm-color-content);
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 500;
-  font-family: inherit;
-  height: 32px;
-  line-height: 1;
-  transition:
-    background 150ms,
-    border-color 150ms;
-  white-space: nowrap;
-}
-
-.trigger:hover {
-  background: var(--ifm-color-emphasis-100);
-  border-color: var(--ifm-color-emphasis-400);
-}
-
-.swatch {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  flex-shrink: 0;
-  display: inline-block;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
-}
-
-.triggerLabel {
-  /* inherits from .trigger */
-}
-
-.chevron {
-  margin-left: 2px;
-  flex-shrink: 0;
-  color: var(--ifm-color-emphasis-600);
-  transition: transform 150ms ease;
-}
-
-.chevronOpen {
-  transform: rotate(180deg);
-}
-
-.dropdown {
-  position: absolute;
-  top: calc(100% + 8px);
-  right: 0;
-  z-index: 500;
-  min-width: 160px;
-  background: var(--ifm-background-color);
-  border: 1px solid var(--ifm-color-emphasis-200);
-  border-radius: 8px;
-  box-shadow:
-    0 4px 16px rgba(0, 0, 0, 0.12),
-    0 1px 4px rgba(0, 0, 0, 0.08);
-  padding: 4px;
-  display: flex;
-  flex-direction: column;
-}
-
-.option {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 7px 10px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--ifm-color-content);
-  cursor: pointer;
-  font-size: 13px;
-  font-family: inherit;
-  font-weight: 400;
-  text-align: left;
-  width: 100%;
-  transition: background 100ms;
-}
-
-.option:hover {
-  background: var(--ifm-color-emphasis-100);
-}
-
-.optionActive {
-  font-weight: 600;
-}
-
-.check {
-  margin-left: auto;
-  flex-shrink: 0;
-  color: var(--ifm-color-primary);
-}
-
-/* Hide pill button in mobile top bar — accessible via the drawer instead */
-@media (max-width: 996px) {
-  .root {
-    display: none;
-  }
-}
-
-/* ============================================================
- * Mobile drawer — flat grid of labeled swatches
- * ============================================================ */
-
-.mobileRoot {
-  border-top: 1px solid var(--ifm-color-emphasis-200);
-  margin-top: 4px;
-}
-
-.mobileToggle {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 12px 16px;
-  border: none;
-  background: transparent;
-  color: var(--ifm-color-content);
-  cursor: pointer;
-  font-size: 14px;
-  font-family: inherit;
-  font-weight: 500;
-  text-align: left;
-}
-
-.mobileToggle:hover {
-  background: var(--ifm-color-emphasis-100);
-}
-
-.mobileToggleLeft {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.mobileChevron {
-  color: var(--ifm-color-emphasis-600);
-  transition: transform 200ms ease;
-  flex-shrink: 0;
-  transform: rotate(-90deg);
-}
-
-.mobileChevronOpen {
-  transform: rotate(0deg);
-}
-
-.mobileGrid {
-  padding: 4px 12px 12px;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 6px;
-}
-
-.mobileTile {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 10px;
-  border: 1px solid var(--ifm-color-emphasis-200);
-  border-radius: 8px;
-  background: transparent;
-  color: var(--ifm-color-content);
-  cursor: pointer;
-  font-size: 13px;
-  font-family: inherit;
-  font-weight: 400;
-  text-align: left;
-  transition: background 100ms;
-}
-
-.mobileTile:hover {
-  background: var(--ifm-color-emphasis-100);
-}
-
-.mobileTileActive {
-  border-color: var(--ifm-color-primary);
-  font-weight: 600;
-  background: var(--ifm-color-emphasis-100);
-}
-
-.mobileSwatch {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  flex-shrink: 0;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
-}
diff --git a/demo/src/css/custom.css b/demo/src/css/custom.css
index 144c6d677..4c12ae980 100644
--- a/demo/src/css/custom.css
+++ b/demo/src/css/custom.css
@@ -1,246 +1,155 @@
 /**
  * Structural CSS for the docusaurus-openapi-docs demo site.
  *
- * This file contains layout, component behavior, animations, and utilities.
- * It is intentionally free of hard-coded colors and fonts — those live in
- * a theme file loaded alongside this one via docusaurus.config.ts:
- *
- *   customCss: ["./src/css/custom.css", "./src/css/themes/panw.css"]
- *
- * To try a different palette, swap the theme file. The following CSS
- * variables must be defined by the active theme:
- *
- *   --theme-primary-rgb          RGB triplet of primary color (for animations)
- *   --theme-border-radius-sm/md  Border radius tokens
- *   --site-primary-hue-saturation  Hue+saturation for the announcement bar
- *
- * Structure inspired by @gleanwork/docusaurus-theme-glean.
+ * This file contains demo-only OpenAPI method labels, code-tab behavior, and
+ * layout utilities. The reusable theme consumes the semantic shadcn token
+ * contract defined in tokens.css.
  */
 
-/* ============================================================
- * Typography
- * ============================================================ */
-
-.markdown h1,
-article h1,
-.main-wrapper h1 {
-  letter-spacing: 0.025em;
-  font-weight: var(--ifm-heading-font-weight);
-  line-height: 1.2;
-  margin-bottom: 1.5rem;
-  color: var(--ifm-heading-color);
-}
-
-.markdown h2,
-article h2,
-.markdown h3,
-article h3 {
-  font-weight: var(--ifm-font-weight-semibold);
-}
-
-.markdown strong,
-article strong,
-.markdown b,
-article b {
-  font-weight: var(--ifm-font-weight-semibold);
-}
-
-.font-mono {
-  font-family: var(--font-mono);
-  font-variant-ligatures: none;
-}
-
-.table-of-contents {
-  font-size: 0.95rem;
-}
-
-html {
-  scroll-padding-top: 50px;
-}
-
-/* ============================================================
- * Links
- * ============================================================ */
-
-a:any-link:hover {
-  text-decoration: none;
-}
-
-article p a,
-article ul a,
-article li a,
-.markdown p a,
-.theme-doc-markdown p a {
-  text-decoration: underline 1px var(--ifm-color-primary);
-  transition: color 0.2s ease;
-}
-
-article p a:hover,
-article ul a:hover,
-article li a:hover,
-.markdown p a:hover,
-.theme-doc-markdown p a:hover {
-  text-decoration: underline 2px var(--ifm-color-primary);
-}
-
-/* ============================================================
- * Sidebar structure
- * ============================================================ */
-
-/* Slightly off-white sidebar in light mode */
-.theme-doc-sidebar-container {
-  background-color: #f6f6f6;
-}
-
-[data-theme="dark"] .theme-doc-sidebar-container {
-  background-color: unset;
-}
-
-/* Tighter nested indentation */
-.menu__list .menu__list {
-  padding-left: 10px;
-}
-
-/* No underlines on menu links */
-.menu__link {
-  text-decoration: none;
-  color: var(--ifm-color-emphasis-700);
-}
-
-/* Top-level category labels: uppercase, small caps, bold */
-.theme-doc-sidebar-item-category-level-1
-  > .menu__list-item-collapsible
-  > .menu__link,
-.theme-doc-sidebar-item-category-level-1
-  > .menu__list-item-collapsible
-  > .menu__link.menu__link--active {
-  text-transform: uppercase;
-  font-weight: 700;
-  letter-spacing: 0.5px;
-  line-height: 16px;
-  font-size: 12px;
-  color: var(--ifm-color-emphasis-900);
-}
-
-/* Hover: text darkens, no background fill */
-.menu__link:hover {
-  background-color: transparent;
-  color: var(--ifm-color-emphasis-800);
-  text-decoration: none;
-}
-
-/* Active item: primary-colored text, no background */
-.menu__link--active:not(
-  .theme-doc-sidebar-item-category-level-1
-    > .menu__list-item-collapsible
-    > .menu__link
-) {
-  color: var(--ifm-color-primary);
-  background-color: transparent;
-  font-weight: 500;
-}
-
-.menu__link--active:not(
-    .theme-doc-sidebar-item-category-level-1
-      > .menu__list-item-collapsible
-      > .menu__link
-  ):hover {
-  color: var(--ifm-color-primary);
-  background-color: transparent;
-}
-
-[data-theme="dark"]
-  .menu__link--active:not(
-    .theme-doc-sidebar-item-category-level-1
-      > .menu__list-item-collapsible
-      > .menu__link
-  ) {
-  color: var(--ifm-color-primary-light);
-}
-
-.menu__list-item-collapsible:hover,
-.menu__list-item-collapsible:active,
-.menu__list-item-collapsible:focus-within,
-.menu__list-item-collapsible.menu__list-item-collapsible--active {
-  background: transparent;
-}
-
-/* Custom caret */
-.menu__link--sublist-caret:after,
-.menu__caret::before {
-  --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8px" height="8px" viewBox="0 0 24 24"><path fill="rgba(0,0,0,0.5)" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
-  content: " ";
-  background-size: contain;
-}
-
 /* ============================================================
  * Sidebar Method labels — Default (pill style)
  *
  * Shape and content labels only. Colors are in the theme file.
  * ============================================================ */
 
-.api-method > .menu__link,
-.schema > .menu__link {
+.api-method
+  > :is([data-sidebar="menu-sub-button"], [data-sidebar="menu-button"]),
+.schema > :is([data-sidebar="menu-sub-button"], [data-sidebar="menu-button"]) {
   align-items: center;
   justify-content: start;
 }
 
-.api-method > .menu__link::before,
-.schema > .menu__link::before {
-  font-size: 0.55rem;
-  font-weight: 700;
-  padding: 0.125rem 0.25rem;
-  border-radius: 0.375rem;
-  line-height: 1.25;
-  width: 2.25rem;
-  height: auto;
-  border: none;
-  text-transform: uppercase;
-  margin-right: var(--ifm-spacing-horizontal);
+.api-method
+  > :is([data-sidebar="menu-sub-button"], [data-sidebar="menu-button"])::before,
+.schema
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
   display: inline-flex;
+  width: fit-content;
+  min-width: calc(var(--spacing) * 9);
+  height: calc(var(--spacing) * 5);
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
+  padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 2);
+  border: var(--border-width) solid transparent;
+  border-radius: calc(var(--spacing) * 8);
+  font-size: var(--theme-text-xs);
+  font-weight: 500;
+  line-height: var(--theme-leading-xs);
   text-align: center;
+  text-transform: uppercase;
+  white-space: nowrap;
 }
 
 /* Content labels */
-.get > .menu__link::before {
+.get
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
   content: "get";
 }
-.post > .menu__link::before {
+.post
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
   content: "post";
 }
-.delete > .menu__link::before {
+.delete
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
   content: "del";
 }
-.put > .menu__link::before {
+.put
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
   content: "put";
 }
-.patch > .menu__link::before {
+.patch
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
   content: "patch";
 }
 
+.get
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
+  background: color-mix(in oklab, var(--primary) 15%, transparent);
+  color: var(--primary);
+}
+.post
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+.put
+  > :is([data-sidebar="menu-sub-button"], [data-sidebar="menu-button"])::before,
+.patch
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
+  background: var(--secondary);
+  color: var(--secondary-foreground);
+}
+.delete
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
+  background: color-mix(in oklab, var(--destructive) 15%, transparent);
+  color: var(--destructive);
+}
+
 /* HEAD / EVENT / SCHEMA — neutral colors, no theme needed */
-.head > .menu__link::before {
+.head
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
   content: "head";
   background-color: var(--ifm-color-emphasis-200);
   color: var(--ifm-color-emphasis-700);
 }
-.event > .menu__link::before {
+.event
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
   content: "event";
   background-color: var(--ifm-color-emphasis-200);
   color: var(--ifm-color-emphasis-700);
 }
-.schema > .menu__link::before {
+.schema
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
   content: "schema";
   background-color: var(--ifm-color-emphasis-200);
   color: var(--ifm-color-emphasis-700);
 }
 
 /* Deprecated */
-.menu__list-item--deprecated > .menu__link,
-.menu__list-item--deprecated > .menu__link:hover {
+.menu__list-item--deprecated
+  > :is([data-sidebar="menu-sub-button"], [data-sidebar="menu-button"]),
+.menu__list-item--deprecated
+  > :is([data-sidebar="menu-sub-button"], [data-sidebar="menu-button"]):hover {
   text-decoration: line-through;
 }
 
@@ -248,21 +157,28 @@ article li a:hover,
  * Sidebar Method labels — High Contrast variant (unchanged)
  * ============================================================ */
 
-.api-method-contrast > .menu__link,
-.schema-contrast > .menu__link {
+.api-method-contrast
+  > :is([data-sidebar="menu-sub-button"], [data-sidebar="menu-button"]),
+.schema-contrast
+  > :is([data-sidebar="menu-sub-button"], [data-sidebar="menu-button"]) {
   align-items: center;
   justify-content: start;
 }
 
-.api-method-contrast > .menu__link::before,
-.schema-contrast > .menu__link::before {
+.api-method-contrast
+  > :is([data-sidebar="menu-sub-button"], [data-sidebar="menu-button"])::before,
+.schema-contrast
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
   width: 55px;
   height: 20px;
   font-size: 12px;
   line-height: 20px;
   text-transform: uppercase;
   font-weight: 600;
-  border-radius: 0.25rem;
+  border-radius: var(--radius);
   border: 1px solid;
   border-inline-start-width: 5px;
   margin-right: var(--ifm-spacing-horizontal);
@@ -270,49 +186,81 @@ article li a:hover,
   flex-shrink: 0;
 }
 
-.get-contrast > .menu__link::before {
+.get-contrast
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
   content: "get";
   background-color: var(--ifm-color-info-contrast-background);
   color: var(--ifm-color-info-contrast-foreground);
   border-color: var(--ifm-color-info-dark);
 }
-.post-contrast > .menu__link::before {
+.post-contrast
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
   content: "post";
   background-color: var(--ifm-color-success-contrast-background);
   color: var(--ifm-color-success-contrast-foreground);
   border-color: var(--ifm-color-success-dark);
 }
-.delete-contrast > .menu__link::before {
+.delete-contrast
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
   content: "del";
   background-color: var(--ifm-color-danger-contrast-background);
   color: var(--ifm-color-danger-contrast-foreground);
   border-color: var(--ifm-color-danger-dark);
 }
-.put-contrast > .menu__link::before {
+.put-contrast
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
   content: "put";
   background-color: var(--ifm-color-warning-contrast-background);
   color: var(--ifm-color-warning-contrast-foreground);
   border-color: var(--ifm-color-warning-dark);
 }
-.patch-contrast > .menu__link::before {
+.patch-contrast
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
   content: "patch";
   background-color: var(--ifm-color-success-contrast-background);
   color: var(--ifm-color-success-contrast-foreground);
   border-color: var(--ifm-color-success-dark);
 }
-.head-contrast > .menu__link::before {
+.head-contrast
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
   content: "head";
   background-color: var(--ifm-color-secondary-contrast-background);
   color: var(--ifm-color-secondary-contrast-foreground);
   border-color: var(--ifm-color-secondary-dark);
 }
-.event-contrast > .menu__link::before {
+.event-contrast
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
   content: "event";
   background-color: var(--ifm-color-secondary-contrast-background);
   color: var(--ifm-color-secondary-contrast-foreground);
   border-color: var(--ifm-color-secondary-dark);
 }
-.schema-contrast > .menu__link::before {
+.schema-contrast
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
   content: "schema";
   background-color: var(--ifm-color-secondary-contrast-background);
   color: var(--ifm-color-secondary-contrast-foreground);
@@ -323,18 +271,23 @@ article li a:hover,
  * Sidebar Method labels — Simple variant (unchanged)
  * ============================================================ */
 
-.api-method-simple > .menu__link {
+.api-method-simple
+  > :is([data-sidebar="menu-sub-button"], [data-sidebar="menu-button"]) {
   align-items: center;
   justify-content: start;
 }
-.api-method-simple > .menu__link::before {
+.api-method-simple
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
   width: 55px;
   height: 20px;
   font-size: 12px;
   line-height: 20px;
   text-transform: uppercase;
   font-weight: 600;
-  border-radius: 0.25rem;
+  border-radius: var(--radius);
   align-content: start;
   margin-right: var(--ifm-spacing-horizontal);
   text-align: right;
@@ -342,136 +295,71 @@ article li a:hover,
   border-color: transparent;
 }
 
-.get-simple > .menu__link::before {
+.get-simple
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
   content: "get";
   color: var(--ifm-color-info);
 }
-.post-simple > .menu__link::before {
+.post-simple
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
   content: "post";
   color: var(--ifm-color-success);
 }
-.delete-simple > .menu__link::before {
+.delete-simple
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
   content: "del";
   color: var(--ifm-color-danger);
 }
-.put-simple > .menu__link::before {
+.put-simple
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
   content: "put";
   color: var(--ifm-color-warning);
 }
-.patch-simple > .menu__link::before {
+.patch-simple
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
   content: "patch";
   color: var(--ifm-color-warning);
 }
-.head-simple > .menu__link::before {
+.head-simple
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
   content: "head";
   color: var(--ifm-color-secondary-contrast-foreground);
 }
-.event-simple > .menu__link::before {
+.event-simple
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
   content: "event";
   color: var(--ifm-color-secondary-contrast-foreground);
 }
-.schema-simple > .menu__link::before {
+.schema-simple
+  > :is(
+    [data-sidebar="menu-sub-button"],
+    [data-sidebar="menu-button"]
+  )::before {
   content: "schema";
   color: var(--ifm-color-secondary-contrast-foreground);
 }
 
-/* ============================================================
- * Admonitions
- * ============================================================ */
-
-.alert {
-  border: none;
-  border-radius: var(--theme-border-radius-md, 8px);
-}
-
-/* ============================================================
- * Navbar header icons
- * ============================================================ */
-
-.header-github-link:hover {
-  opacity: 0.6;
-}
-
-.header-github-link:before {
-  content: "";
-  width: 24px;
-  height: 24px;
-  display: flex;
-  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
-    no-repeat;
-}
-
-html[data-theme="dark"] .header-github-link:before {
-  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
-    no-repeat;
-}
-
-.header-medium-link:hover {
-  opacity: 0.6;
-}
-
-.header-medium-link:before {
-  content: "\f23a";
-  font-family: "Font Awesome 5 Brands";
-  font-size: x-large;
-}
-
-/* ============================================================
- * Announcement bar
- * ============================================================ */
-
-div[class^="announcementBar_"] {
-  --site-announcement-bar-stripe-color1: hsl(
-    var(--site-primary-hue-saturation) 85%
-  );
-  --site-announcement-bar-stripe-color2: hsl(
-    var(--site-primary-hue-saturation) 95%
-  );
-  background: repeating-linear-gradient(
-    35deg,
-    var(--site-announcement-bar-stripe-color1),
-    var(--site-announcement-bar-stripe-color1) 20px,
-    var(--site-announcement-bar-stripe-color2) 10px,
-    var(--site-announcement-bar-stripe-color2) 40px
-  );
-  font-weight: bold;
-}
-
-/* ============================================================
- * Schema parameter highlight animation
- *
- * Color driven by --theme-primary-rgb (defined in the theme file).
- * ============================================================ */
-
-[id]:target {
-  animation: highlight-flash 2s ease-out;
-  background-color: rgba(var(--theme-primary-rgb, 0, 76, 157), 0.08);
-  border-radius: 4px;
-  padding: 2px 4px;
-  margin: -2px -4px;
-}
-
-@keyframes highlight-flash {
-  0% {
-    background-color: rgba(var(--theme-primary-rgb, 0, 76, 157), 0.25);
-    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 0, 76, 157), 0.25);
-  }
-  50% {
-    background-color: rgba(var(--theme-primary-rgb, 0, 76, 157), 0.15);
-    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb, 0, 76, 157), 0.15);
-  }
-  100% {
-    background-color: rgba(var(--theme-primary-rgb, 0, 76, 157), 0.08);
-    box-shadow: none;
-  }
-}
-
-.openapi-markdown__details [id]:target,
-.openapi-schema__list-item [id]:target {
-  animation: highlight-flash 2s ease-out;
-  background-color: rgba(var(--theme-primary-rgb, 0, 76, 157), 0.08) !important;
-}
-
 /* ============================================================
  * Code tab scrollbar
  * ============================================================ */
@@ -494,38 +382,18 @@ div[class^="announcementBar_"] {
 
 .tabs-container [role="tabpanel"] pre::-webkit-scrollbar-track {
   background: var(--ifm-color-emphasis-200);
-  border-radius: var(--theme-border-radius-sm, 4px);
+  border-radius: var(--radius);
 }
 
 .tabs-container [role="tabpanel"] pre::-webkit-scrollbar-thumb {
   background: var(--ifm-color-emphasis-400);
-  border-radius: var(--theme-border-radius-sm, 4px);
+  border-radius: var(--radius);
 }
 
 .tabs-container [role="tabpanel"] pre::-webkit-scrollbar-thumb:hover {
   background: var(--ifm-color-emphasis-500);
 }
 
-/* ============================================================
- * OpenAPI code tab language icons
- * ============================================================ */
-
-.openapi-tabs__code-item--python {
-  color: var(--ifm-color-success);
-}
-.openapi-tabs__code-item--python::after {
-  content: "";
-  width: var(--code-tab-logo-width);
-  height: var(--code-tab-logo-height);
-  background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/python/python-plain.svg")
-    no-repeat;
-  margin-block: auto;
-}
-.openapi-tabs__code-item--python.active {
-  box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-python);
-  border-color: var(--openapi-code-tab-border-color-python);
-}
-
 /* ============================================================
  * Grid utilities
  * ============================================================ */
diff --git a/demo/templates/api.mustache b/demo/templates/api.mustache
index fa9da0483..1182d1c39 100644
--- a/demo/templates/api.mustache
+++ b/demo/templates/api.mustache
@@ -39,16 +39,8 @@ mask_credentials: false
 {{/frontMatter.mask_credentials_disabled}}
 ---
 
-This is a Custom Api Page Generated by docusaurus-openapi-docs using `api.mustache` template
-
-<hr />
-<br />
-<br />
+:::info[Custom API template]
+Generated with the `api.mustache` template.
+:::
 
 {{{markdown}}}
-
-<br />
-<br />
-<hr />
-
-This is a Custom Api Page Generated by docusaurus-openapi-docs using `api.mustache` template
\ No newline at end of file
diff --git a/packages/docusaurus-plugin-openapi-docs/src/markdown/createAuthentication.test.ts b/packages/docusaurus-plugin-openapi-docs/src/markdown/createAuthentication.test.ts
new file mode 100644
index 000000000..dbe47d138
--- /dev/null
+++ b/packages/docusaurus-plugin-openapi-docs/src/markdown/createAuthentication.test.ts
@@ -0,0 +1,24 @@
+import { createAuthentication } from "./createAuthentication";
+
+describe("createAuthentication", () => {
+  it("renders authentication data through the shared responsive table components", () => {
+    const markdown = createAuthentication({
+      petstore_auth: {
+        type: "oauth2",
+        flows: {
+          implicit: {
+            authorizationUrl: "https://example.com/oauth/authorize",
+            scopes: { "read:pets": "read pets" },
+          },
+        },
+      },
+    } as never);
+
+    expect(markdown).toContain("<OpenApiTable>");
+    expect(markdown).toContain("<OpenApiTableBody>");
+    expect(markdown).toContain("<OpenApiTableRow>");
+    expect(markdown).toContain("<OpenApiTableHead>");
+    expect(markdown).toContain("<OpenApiTableCell>");
+    expect(markdown).not.toContain("<table>");
+  });
+});
diff --git a/packages/docusaurus-plugin-openapi-docs/src/markdown/createAuthentication.ts b/packages/docusaurus-plugin-openapi-docs/src/markdown/createAuthentication.ts
index fe075200c..6af93408c 100644
--- a/packages/docusaurus-plugin-openapi-docs/src/markdown/createAuthentication.ts
+++ b/packages/docusaurus-plugin-openapi-docs/src/markdown/createAuthentication.ts
@@ -6,9 +6,20 @@
  * ========================================================================== */
 
 import { createDescription } from "./createDescription";
-import { create, guard } from "./utils";
+import { create as createNode, guard } from "./utils";
 import { OAuthFlowObject, SecuritySchemeObject } from "../openapi/types";
 
+const AUTH_TABLE_COMPONENTS: Record<string, string> = {
+  table: "OpenApiTable",
+  tbody: "OpenApiTableBody",
+  tr: "OpenApiTableRow",
+  th: "OpenApiTableHead",
+  td: "OpenApiTableCell",
+};
+
+const create: typeof createNode = (tag, props, options) =>
+  createNode(AUTH_TABLE_COMPONENTS[tag] ?? tag, props, options);
+
 export function createAuthentication(securitySchemes: SecuritySchemeObject) {
   if (!securitySchemes || !Object.keys(securitySchemes).length) return "";
 
diff --git a/packages/docusaurus-plugin-openapi-docs/src/markdown/index.ts b/packages/docusaurus-plugin-openapi-docs/src/markdown/index.ts
index e2412629f..8c0efffc1 100644
--- a/packages/docusaurus-plugin-openapi-docs/src/markdown/index.ts
+++ b/packages/docusaurus-plugin-openapi-docs/src/markdown/index.ts
@@ -71,7 +71,7 @@ export function createApiPageMD({
     `import RequestSchema from "@theme/RequestSchema";\n`,
     `import StatusCodes from "@theme/StatusCodes";\n`,
     `import OperationTabs from "@theme/OperationTabs";\n`,
-    `import TabItem from "@theme/TabItem";\n`,
+    `import TabItem from "@theme/ApiTabItem";\n`,
     `import Heading from "@theme/Heading";\n`,
     `import Translate from "@docusaurus/Translate";\n\n`,
     createHeading(title),
@@ -111,8 +111,9 @@ export function createInfoPageMD({
     `import ApiLogo from "@theme/ApiLogo";\n`,
     `import Heading from "@theme/Heading";\n`,
     `import SchemaTabs from "@theme/SchemaTabs";\n`,
-    `import TabItem from "@theme/TabItem";\n`,
-    `import Export from "@theme/ApiExplorer/Export";\n\n`,
+    `import TabItem from "@theme/ApiTabItem";\n`,
+    `import Export from "@theme/ApiExplorer/Export";\n`,
+    `import OpenApiTable, { OpenApiTableBody, OpenApiTableCell, OpenApiTableHead, OpenApiTableRow } from "@theme/OpenApiTable";\n\n`,
 
     createVersionBadge(version),
     createDownload(downloadUrl),
diff --git a/packages/docusaurus-theme-openapi-docs/package.json b/packages/docusaurus-theme-openapi-docs/package.json
index 8334297ce..6f48d252b 100644
--- a/packages/docusaurus-theme-openapi-docs/package.json
+++ b/packages/docusaurus-theme-openapi-docs/package.json
@@ -36,13 +36,13 @@
     "@types/lodash": "^4.17.20",
     "@types/pako": "^2.0.3",
     "@types/postman-collection": "^3.5.11",
-    "@types/react-modal": "^3.16.3",
     "concurrently": "^10.0.3",
     "docusaurus-plugin-openapi-docs": "^5.1.3",
     "docusaurus-plugin-sass": "^0.2.6",
     "eslint-plugin-prettier": "^5.5.1"
   },
   "dependencies": {
+    "@aeei/docusaurus-theme": "^0.1.11",
     "@hookform/error-message": "^2.0.1",
     "@reduxjs/toolkit": "^2.8.2",
     "allof-merge": "^0.6.6",
@@ -52,6 +52,7 @@
     "crypto-js": "^4.2.0",
     "file-saver": "^2.0.5",
     "lodash": "^4.17.21",
+    "lucide-react": "^0.468.0",
     "pako": "^3.0.1",
     "path-browserify": "^1.0.1",
     "postman-code-generators": "^2.0.0",
@@ -62,7 +63,6 @@
     "react-live": "^4.1.8",
     "react-magic-dropzone": "^1.0.1",
     "react-markdown": "^10.1.0",
-    "react-modal": "^3.16.3",
     "react-redux": "^9.2.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "4.0.1",
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Accept/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Accept/index.tsx
index bc8ce2d2d..a16b359a4 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Accept/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Accept/index.tsx
@@ -28,7 +28,7 @@ function Accept() {
         label="Accept"
         value={value}
         options={options}
-        onChange={(e: any) => dispatch(setAccept(e.target.value))}
+        onValueChange={(value) => dispatch(setAccept(value))}
       />
     </FormItem>
   );
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/Container/_Container.scss b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/Container/_Container.scss
index 8e17c2565..8702916d5 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/Container/_Container.scss
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/Container/_Container.scss
@@ -1,7 +1,4 @@
 .openapi-explorer__code-block-container {
   height: 100%;
-  background: var(--prism-background-color);
-  color: var(--prism-color);
-  margin-bottom: unset;
-  box-shadow: var(--ifm-global-shadow-lw);
+  margin-bottom: 0;
 }
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/Content/String.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/Content/String.tsx
index fff575b7c..04ce18ec6 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/Content/String.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/Content/String.tsx
@@ -63,7 +63,9 @@ export default function CodeBlockString({
       )}
     >
       {title && (
-        <div className="openapi-explorer__code-block-title">{title}</div>
+        <div className="theme-code-block__title openapi-explorer__code-block-title">
+          {title}
+        </div>
       )}
       <div className="openapi-explorer__code-block-content">
         <Highlight
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/Content/_Content.scss b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/Content/_Content.scss
index acc774e11..e8ab4d3f4 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/Content/_Content.scss
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/Content/_Content.scss
@@ -1,91 +1,37 @@
 .openapi-explorer__code-block-content {
-  height: 100%;
   position: relative;
-  /* rtl:ignore */
-  direction: ltr;
+  height: 100%;
   border-radius: inherit;
-}
-
-.openapi-explorer__code-block-title {
-  border-bottom: 1px solid var(--ifm-color-emphasis-300);
-  font-size: var(--ifm-code-font-size);
-  font-weight: 500;
-  padding: 0.75rem var(--ifm-pre-padding);
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
+  direction: ltr;
 }
 
 .openapi-explorer__code-block {
   height: 100%;
-  border-radius: var(--ifm-global-radius);
-  --ifm-pre-background: var(--prism-background-color);
   margin: 0;
-  padding: 0;
-}
-
-.openapi-explorer__code-block-title
-  + .openapi-explorer__code-block-content
-  .openapi-explorer__code-block {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.openapi-explorer__code-block-standalone {
-  padding: 0;
 }
 
 .openapi-explorer__code-block-lines {
-  font: inherit;
-  /* rtl:ignore */
-  float: left;
   min-width: 100%;
-  padding: var(--ifm-pre-padding);
-}
-
-.openapi-explorer__code-block-lines-numbering {
-  // This causes max-height to unset
-  // display: table;
-  padding: var(--ifm-pre-padding) 0;
-}
-
-@media print {
-  .openapi-explorer__code-block-lines {
-    white-space: pre-wrap;
-  }
+  font: inherit;
 }
 
 .openapi-explorer__code-block-btn-group {
   display: flex;
-  column-gap: 0.2rem;
   position: absolute;
-  right: calc(var(--ifm-pre-padding) / 2);
-  top: calc(var(--ifm-pre-padding) / 2);
+  z-index: 10;
+  top: calc(var(--spacing) * 2);
+  right: calc(var(--spacing) * 2);
+  gap: var(--spacing);
 }
 
-.openapi-explorer__code-block-btn-group button {
-  display: flex;
-  align-items: center;
-  background: var(--prism-background-color);
-  color: var(--prism-color);
-  border: 1px solid var(--ifm-color-emphasis-300);
-  border-radius: var(--ifm-global-radius);
-  padding: 0.4rem;
-  line-height: 0;
-  transition: opacity 200ms ease-in-out;
-  opacity: 0;
-}
-
-.openapi-explorer__code-block-btn-group button:focus-visible,
-.openapi-explorer__code-block-btn-group button:hover {
-  opacity: 1 !important;
-}
-
-.theme-code-block:hover .openapi-explorer__code-block-btn-group button {
-  opacity: 0.4;
+@media (max-width: 996px) {
+  .openapi-explorer__expand-btn {
+    display: none;
+  }
 }
 
-@media screen and (max-width: 996px) {
-  .openapi-explorer__expand-btn {
-    display: none !important;
+@media print {
+  .openapi-explorer__code-block-lines {
+    white-space: pre-wrap;
   }
 }
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/CopyButton/_CopyButton.scss b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/CopyButton/_CopyButton.scss
index e245fe1b1..cd62a7a4e 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/CopyButton/_CopyButton.scss
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/CopyButton/_CopyButton.scss
@@ -27,7 +27,7 @@
   left: 50%;
   transform: translate(-50%, -50%) scale(0.33);
   opacity: 0;
-  color: #00d600;
+  color: var(--primary);
 }
 
 .openapi-explorer__code-block-copy-btn--copied {
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/CopyButton/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/CopyButton/index.tsx
index 87e5517a8..9e4e5de06 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/CopyButton/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/CopyButton/index.tsx
@@ -9,6 +9,9 @@ import React, { useCallback, useState, useRef, useEffect } from "react";
 
 import { translate } from "@docusaurus/Translate";
 import clsx from "clsx";
+import { Check, Copy } from "lucide-react";
+
+import { Button } from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/button";
 
 interface CopyButtonProps {
   code: string;
@@ -35,18 +38,25 @@ export default function CopyButton({
   const [isCopied, setIsCopied] = useState(false);
   const copyTimeout = useRef<number | undefined>(undefined);
   const handleCopyCode = useCallback(async () => {
-    await copyToClipboard(code);
     setIsCopied(true);
-    copyTimeout.current = window.setTimeout(() => {
+    try {
+      await copyToClipboard(code);
+      copyTimeout.current = window.setTimeout(() => {
+        setIsCopied(false);
+      }, 1000);
+    } catch (error) {
       setIsCopied(false);
-    }, 1000);
+      throw error;
+    }
   }, [code]);
 
   useEffect(() => () => window.clearTimeout(copyTimeout.current), []);
 
   return (
-    <button
+    <Button
       type="button"
+      variant="outline"
+      size="icon-sm"
       aria-label={
         isCopied
           ? translate({
@@ -66,7 +76,6 @@ export default function CopyButton({
         description: "The copy button label on code blocks",
       })}
       className={clsx(
-        "clean-btn",
         className,
         "openapi-explorer__code-block-copy-btn",
         isCopied && "openapi-explorer__code-block-copy-btn--copied"
@@ -77,19 +86,9 @@ export default function CopyButton({
         className="openapi-explorer__code-block-copy-btn-icons"
         aria-hidden="true"
       >
-        <svg
-          className="openapi-explorer__code-block-copy-btn-icon"
-          viewBox="0 0 24 24"
-        >
-          <path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" />
-        </svg>
-        <svg
-          className="openapi-explorer__code-block-copy-btn-icon--success"
-          viewBox="0 0 24 24"
-        >
-          <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
-        </svg>
+        <Copy className="openapi-explorer__code-block-copy-btn-icon" />
+        <Check className="openapi-explorer__code-block-copy-btn-icon--success" />
       </span>
-    </button>
+    </Button>
   );
 }
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/ExitButton/_ExitButton.scss b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/ExitButton/_ExitButton.scss
deleted file mode 100644
index 4aaf9602f..000000000
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/ExitButton/_ExitButton.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.openapi-explorer__code-block-exit-btn-icons {
-  position: relative;
-  width: 1.125rem;
-  height: 1.125rem;
-}
-
-.openapi-explorer__code-block-exit-btn-icon {
-  position: absolute;
-  top: 0;
-  left: 0;
-  fill: currentColor;
-  opacity: inherit;
-  width: inherit;
-  height: inherit;
-  transition: all 0.15s ease;
-}
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/ExitButton/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/ExitButton/index.tsx
deleted file mode 100644
index 8c4a69fa8..000000000
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/ExitButton/index.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-/* ============================================================================
- * Copyright (c) Palo Alto Networks
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * ========================================================================== */
-
-import React from "react";
-
-import { translate } from "@docusaurus/Translate";
-import clsx from "clsx";
-
-export interface Props {
-  readonly className: string;
-  readonly handler: () => void;
-}
-
-export default function ExitButton({
-  className,
-  handler,
-}: Props): React.JSX.Element {
-  return (
-    <button
-      type="button"
-      aria-label={translate({
-        id: "theme.CodeBlock.exitButtonAriaLabel",
-        message: "Exit expanded view",
-        description: "The ARIA label for exit expanded view button",
-      })}
-      title={translate({
-        id: "theme.CodeBlock.copy",
-        message: "Copy",
-        description: "The exit button label on code blocks",
-      })}
-      className={clsx(
-        "clean-btn",
-        "openapi-explorer__code-block-exit-btn",
-        className
-      )}
-      onClick={handler}
-    >
-      <span
-        className="openapi-explorer__code-block-exit-btn-icons"
-        aria-hidden="true"
-      >
-        <svg
-          className="openapi-explorer__code-block-exit-btn-icon"
-          viewBox="0 0 384 512"
-        >
-          <path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" />
-        </svg>
-      </span>
-    </button>
-  );
-}
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/ExpandButton/_ExpandButton.scss b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/ExpandButton/_ExpandButton.scss
index dcf382795..42a630b11 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/ExpandButton/_ExpandButton.scss
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/ExpandButton/_ExpandButton.scss
@@ -1,62 +1,20 @@
-.openapi-explorer__expand-modal-content {
-  padding: none;
-  border: thin solid var(--ifm-toc-border-color);
-  border-radius: var(--ifm-global-radius);
-  max-width: 95%;
-  width: 65vw;
-  height: 65vh;
-  overflow: auto;
-}
-
-.openapi-explorer__expand-modal-overlay {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: fixed;
-  inset: 0px;
-  background-color: rgba(0, 0, 0, 0.9);
-  z-index: 201;
-}
-
-.theme-code-block:hover .openapi-explorer__code-block-expand-btn--copied {
-  opacity: 1 !important;
-}
-
-.openapi-explorer__code-block-expand-btn-icons {
-  position: relative;
-  width: 1.125rem;
-  height: 1.125rem;
-}
-
-.openapi-explorer__code-block-expand-btn-icon,
-.openapi-explorer__code-block-expand-btn-icon--success {
-  position: absolute;
-  top: 0;
-  left: 0;
-  fill: currentColor;
-  opacity: inherit;
-  width: inherit;
-  height: inherit;
-  transition: all 0.15s ease;
+.openapi-explorer__code-dialog {
+  width: min(
+    calc(100vw - calc(var(--spacing) * 8)),
+    var(--theme-shell-max-width)
+  );
+  max-width: var(--theme-shell-max-width);
+  max-height: calc(100svh - calc(var(--spacing) * 8));
+  overflow: hidden;
 }
 
-.openapi-explorer__code-block-expand-btn-icon--success {
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) scale(0.33);
-  opacity: 0;
-  color: #00d600;
+.openapi-explorer__code-dialog .openapi-explorer__code-block-container,
+.openapi-explorer__code-dialog .openapi-explorer__code-block-content,
+.openapi-explorer__code-dialog .openapi-explorer__code-block {
+  min-width: 0;
+  max-height: calc(100svh - calc(var(--spacing) * 28));
 }
 
-.openapi-explorer__code-block-expand-btn--copied
-  .openapi-explorer__code-block-expand-btn-icon {
-  transform: scale(0.33);
-  opacity: 0;
-}
-
-.openapi-explorer__code-block-expand-btn--copied
-  .openapi-explorer__code-block-expand-btn-icon--success {
-  transform: translate(-50%, -50%) scale(1);
-  opacity: 1;
-  transition-delay: 0.075s;
+.openapi-explorer__code-dialog .openapi-explorer__code-block {
+  overflow: auto;
 }
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/ExpandButton/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/ExpandButton/index.tsx
index 7177931ac..72a740062 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/ExpandButton/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/ExpandButton/index.tsx
@@ -5,17 +5,24 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 
 import { usePrismTheme } from "@docusaurus/theme-common";
 import { translate } from "@docusaurus/Translate";
 import Container from "@theme/ApiExplorer/ApiCodeBlock/Container";
 import CopyButton from "@theme/ApiExplorer/ApiCodeBlock/CopyButton";
-import ExitButton from "@theme/ApiExplorer/ApiCodeBlock/ExitButton";
 import Line from "@theme/ApiExplorer/ApiCodeBlock/Line";
 import clsx from "clsx";
+import { Maximize2 } from "lucide-react";
+
+import { Button } from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/dialog";
 import { Highlight, Language } from "prism-react-renderer";
-import Modal from "react-modal";
 
 export interface Props {
   readonly code: string;
@@ -39,14 +46,12 @@ export default function ExpandButton({
   const [isModalOpen, setIsModalOpen] = useState(false);
   const prismTheme = usePrismTheme();
 
-  useEffect(() => {
-    Modal.setAppElement("body");
-  }, []);
-
   return (
     <>
-      <button
+      <Button
         type="button"
+        variant="ghost"
+        size="icon-sm"
         aria-label={
           isModalOpen
             ? translate({
@@ -65,102 +70,79 @@ export default function ExpandButton({
           message: "Expand",
           description: "The expand button label on code blocks",
         })}
-        className={clsx(
-          "clean-btn",
-          className,
-          "openapi-explorer__code-block-expand-btn",
-          isModalOpen && "openapi-explorer__code-block-expand-btn--copied"
-        )}
+        className={clsx(className, "openapi-explorer__code-block-expand-btn")}
         onClick={() => setIsModalOpen(true)}
       >
-        <span
-          className="openapi-explorer__code-block-expand-btn-icons"
-          aria-hidden="true"
-        >
-          <svg
-            className="openapi-explorer__code-block-expand-btn-icon"
-            viewBox="0 0 448 512"
-          >
-            <path d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z" />
-          </svg>
-          <svg
-            className="openapi-explorer__code-block-expand-btn-icon--success"
-            viewBox="0 0 24 24"
+        <Maximize2 aria-hidden="true" />
+      </Button>
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="openapi-explorer__code-dialog">
+          <DialogHeader>
+            <DialogTitle>
+              {title ??
+                translate({
+                  id: "theme.openapi.codeBlock.dialogTitle",
+                  message: "Code snippet",
+                })}
+            </DialogTitle>
+          </DialogHeader>
+          <Container
+            as="div"
+            className={clsx(
+              "openapi-explorer__code-block-container",
+              language &&
+                !blockClassName.includes(`language-${language}`) &&
+                `language-${language}`
+            )}
           >
-            <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
-          </svg>
-        </span>
-      </button>
-      <Modal
-        className="openapi-explorer__expand-modal-content"
-        overlayClassName="openapi-explorer__expand-modal-overlay"
-        isOpen={isModalOpen}
-        onRequestClose={() => setIsModalOpen(false)}
-        contentLabel="Code Snippet"
-      >
-        <Container
-          as="div"
-          className={clsx(
-            "openapi-explorer__code-block-container",
-            language &&
-              !blockClassName.includes(`language-${language}`) &&
-              `language-${language}`
-          )}
-        >
-          {title && (
-            <div className="openapi-explorer__code-block-title">{title}</div>
-          )}
-          <div className="openapi-explorer__code-block-content">
-            <Highlight
-              // {...defaultProps}
-              theme={prismTheme}
-              code={code}
-              language={language ?? "text"}
-            >
-              {({ className, tokens, getLineProps, getTokenProps }) => (
-                <pre
-                  /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
-                  tabIndex={0}
-                  className={clsx(
-                    className,
-                    "openapi-explorer__code-block",
-                    "thin-scrollbar"
-                  )}
-                >
-                  <code
+            <div className="openapi-explorer__code-block-content">
+              <Highlight
+                // {...defaultProps}
+                theme={prismTheme}
+                code={code}
+                language={language ?? "text"}
+              >
+                {({ className, tokens, getLineProps, getTokenProps }) => (
+                  <pre
+                    /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
+                    tabIndex={0}
                     className={clsx(
-                      "openapi-explorer__code-block-lines",
-                      showLineNumbers &&
-                        "openapi-explorer__code-block-lines-numbers"
+                      className,
+                      "openapi-explorer__code-block",
+                      "thin-scrollbar"
                     )}
                   >
-                    {tokens.map((line, i) => (
-                      <Line
-                        key={i}
-                        line={line}
-                        getLineProps={getLineProps}
-                        getTokenProps={getTokenProps}
-                        classNames={lineClassNames[i]}
-                        showLineNumbers={showLineNumbers}
-                      />
-                    ))}
-                  </code>
-                </pre>
-              )}
-            </Highlight>
-            <div className="openapi-explorer__code-block-btn-group">
-              <CopyButton
-                className="openapi-explorer__code-block-code-btn"
-                code={code}
-              />
-              <ExitButton
-                className="openapi-explorer__code-block-code-btn"
-                handler={() => setIsModalOpen(false)}
-              />
+                    <code
+                      className={clsx(
+                        "openapi-explorer__code-block-lines",
+                        showLineNumbers &&
+                          "openapi-explorer__code-block-lines-numbers"
+                      )}
+                    >
+                      {tokens.map((line, i) => (
+                        <Line
+                          key={i}
+                          line={line}
+                          getLineProps={getLineProps}
+                          getTokenProps={getTokenProps}
+                          classNames={lineClassNames[i]}
+                          showLineNumbers={showLineNumbers}
+                        />
+                      ))}
+                    </code>
+                  </pre>
+                )}
+              </Highlight>
+              <div className="openapi-explorer__code-block-btn-group">
+                <CopyButton
+                  className="openapi-explorer__code-block-code-btn"
+                  code={code}
+                />
+              </div>
             </div>
-          </div>
-        </Container>
-      </Modal>
+          </Container>
+        </DialogContent>
+      </Dialog>
     </>
   );
 }
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/Line/_Line.scss b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/Line/_Line.scss
index bac504c09..95252eda4 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/Line/_Line.scss
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/Line/_Line.scss
@@ -1,34 +1,26 @@
-/* Intentionally has zero specificity, so that to be able to override
-the background in custom CSS file due bug https://github.com/facebook/docusaurus/issues/3678 */
-:where(:root) {
-  --docusaurus-highlighted-code-line-bg: rgb(72 77 91);
-}
-
-:where([data-theme="dark"]) {
-  --docusaurus-highlighted-code-line-bg: rgb(100 100 100);
-}
-
 .openapi-explorer__code-block-code-line {
-  display: table-row;
+  display: grid;
+  grid-template-columns: calc(var(--spacing) * 16) minmax(0, 1fr);
   counter-increment: line-count;
 }
 
 .openapi-explorer__code-block-code-line-number {
-  display: table-cell;
-  text-align: right;
-  width: 1%;
+  display: block;
   position: sticky;
   left: 0;
-  padding: 0 var(--ifm-pre-padding);
-  background: var(--ifm-pre-background);
+  width: auto;
+  padding: 0 calc(var(--spacing) * 6) 0 0;
   overflow-wrap: normal;
+  background: var(--code);
+  color: var(--code-number);
+  text-align: right;
 }
 
 .openapi-explorer__code-block-code-line-number::before {
   content: counter(line-count);
-  opacity: 0.4;
 }
 
-.openapi-explorer__code-block-code-line-number {
-  padding-right: var(--ifm-pre-padding);
+.openapi-explorer__code-block-code-line-content {
+  display: block;
+  min-width: 0;
 }
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/WordWrapButton/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/WordWrapButton/index.tsx
index e98ec285a..37d88a8e9 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/WordWrapButton/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/WordWrapButton/index.tsx
@@ -8,7 +8,10 @@
 import React from "react";
 
 import { translate } from "@docusaurus/Translate";
-import clsx from "clsx";
+import { WrapText } from "lucide-react";
+
+import { Button } from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/button";
+import { cn } from "@aeei/docusaurus-theme/lib-theme/theme/utils/cn";
 
 export interface Props {
   readonly className?: string;
@@ -28,27 +31,17 @@ export default function WordWrapButton({
       "The title attribute for toggle word wrapping button of code block lines",
   });
   return (
-    <button
+    <Button
       type="button"
+      variant="ghost"
+      size="icon-sm"
       onClick={onClick}
-      className={clsx(
-        "clean-btn",
-        className,
-        isEnabled && "openapi-explorer__code-block-word-wrap-btn--enabled"
-      )}
+      className={cn(className, isEnabled && "bg-accent text-accent-foreground")}
       aria-label={title}
+      aria-pressed={isEnabled}
       title={title}
     >
-      <svg
-        className="openapi-explorer__code-block-word-wrap-btn-icon"
-        viewBox="0 0 24 24"
-        aria-hidden="true"
-      >
-        <path
-          fill="currentColor"
-          d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"
-        />
-      </svg>
-    </button>
+      <WrapText aria-hidden="true" />
+    </Button>
   );
 }
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Authorization/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Authorization/index.tsx
index c73446b4e..caa0bf85e 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Authorization/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Authorization/index.tsx
@@ -41,9 +41,7 @@ function Authorization() {
             })}
             options={optionKeys}
             value={selected}
-            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-              dispatch(setSelectedAuth(e.target.value));
-            }}
+            onValueChange={(value) => dispatch(setSelectedAuth(value))}
           />
         </FormItem>
       )}
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Body/FormBodyItem/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Body/FormBodyItem/index.tsx
index 4cdfbb395..2935940e7 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Body/FormBodyItem/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Body/FormBodyItem/index.tsx
@@ -108,8 +108,7 @@ export default function FormBodyItem({
               label="Content-Type"
               options={encodingOptions}
               value={selectedEncoding}
-              onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-                const ct = e.target.value;
+              onValueChange={(ct) => {
                 setSelectedEncoding(ct);
                 dispatch(setFieldEncoding({ field: id, contentType: ct }));
               }}
@@ -163,8 +162,7 @@ export default function FormBodyItem({
         required={required}
         value={value}
         options={["---", ...schemaObject.enum]}
-        onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-          const val = e.target.value;
+        onValueChange={(val) => {
           setValue(val);
           if (val === "---") {
             dispatch(clearFormBodyKey(id));
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Body/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Body/index.tsx
index c4e88fb48..7fd7b67a8 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Body/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Body/index.tsx
@@ -15,7 +15,7 @@ import LiveApp from "@theme/ApiExplorer/LiveEditor";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
 import Markdown from "@theme/Markdown";
 import SchemaTabs from "@theme/SchemaTabs";
-import TabItem from "@theme/TabItem";
+import TabItem from "@theme/ApiTabItem";
 import { sampleFromSchema } from "docusaurus-plugin-openapi-docs/lib/openapi/createSchemaExample";
 import type { RequestBodyObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
 import format from "xml-formatter";
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs/_CodeTabs.scss b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs/_CodeTabs.scss
index 905e94af8..48efa9eaa 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs/_CodeTabs.scss
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs/_CodeTabs.scss
@@ -7,7 +7,7 @@
 
 [data-theme="dark"] {
   --bash-background-color: lightgrey;
-  --bash-border-radius: 20px;
+  --bash-border-radius: var(--radius);
 }
 
 .openapi-tabs__code-container {
@@ -16,18 +16,13 @@
   &:not(.openapi-tabs__code-container-inner) {
     padding: 1rem;
     background-color: var(--ifm-pre-background);
-    border-radius: var(--ifm-global-radius);
-    border: 1px solid var(--openapi-explorer-border-color);
-    box-shadow:
-      0 2px 3px hsla(222, 8%, 43%, 0.1),
-      0 8px 16px -10px hsla(222, 8%, 43%, 0.2);
+    border-radius: var(--radius);
+    border: 1px solid var(--border);
+    box-shadow: none;
     transition: 300ms;
 
     &:hover {
-      box-shadow:
-        0 0 0 2px rgba(38, 53, 61, 0.15),
-        0 2px 3px hsla(222, 8%, 43%, 0.15),
-        0 16px 16px -10px hsla(222, 8%, 43%, 0.2);
+      box-shadow: none;
     }
   }
 
@@ -43,7 +38,7 @@
     transition: 300ms;
 
     &:not(.active):hover {
-      border: 1px solid var(--openapi-code-tab-border-color);
+      border: 1px solid var(--border);
     }
 
     &:hover {
@@ -72,7 +67,7 @@
 
 .openapi-explorer__code-block code {
   max-height: 200px;
-  font-size: var(--openapi-explorer-font-size-code);
+  font-size: 0.75rem;
   padding-top: var(--ifm-pre-padding);
 }
 
@@ -113,95 +108,44 @@ body[class="ReactModal__Body--open"] {
 .openapi-tabs__code-item--python {
   color: var(--ifm-color-success);
 
-  &::after {
-    content: "";
-    width: var(--code-tab-logo-width);
-    height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/python/python-original.svg")
-      no-repeat;
-    margin-block: auto;
-  }
-
   &.active {
-    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-python);
-    border-color: var(--openapi-code-tab-border-color-python);
+    box-shadow: none;
+    border-color: var(--border);
   }
 }
 
 .openapi-tabs__code-item--go {
   color: var(--ifm-color-info);
 
-  &::after {
-    content: "";
-    width: var(--code-tab-logo-width);
-    height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/go/go-original-wordmark.svg")
-      no-repeat;
-    margin-block: auto;
-  }
-
   &.active {
-    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-go);
-    border-color: var(--openapi-code-tab-border-color-go);
+    box-shadow: none;
+    border-color: var(--border);
   }
 }
 
 .openapi-tabs__code-item--dart {
   color: var(--ifm-color-info);
 
-  &::after {
-    content: "";
-    width: var(--code-tab-logo-width);
-    height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/dart/dart-original.svg")
-      no-repeat;
-    margin-block: auto;
-  }
-
   &.active {
-    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-dart);
-    border-color: var(--openapi-code-tab-border-color-dart);
+    box-shadow: none;
+    border-color: var(--border);
   }
 }
 
 .openapi-tabs__code-item--javascript {
   color: var(--ifm-color-warning);
 
-  &::after {
-    content: "";
-    width: var(--code-tab-logo-width);
-    height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg")
-      no-repeat;
-    margin-block: auto;
-  }
-
   &.active {
-    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-js);
-    border-color: var(--openapi-code-tab-border-color-js);
+    box-shadow: none;
+    border-color: var(--border);
   }
 }
 
 .openapi-tabs__code-item--curl {
   color: var(--ifm-color-danger);
 
-  &::after {
-    content: "";
-    width: var(--code-tab-logo-width);
-    height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/bash/bash-plain.svg")
-      no-repeat;
-    margin-block: auto;
-    background-color: var(--bash-background-color);
-    border-radius: var(--bash-border-radius);
-  }
-
   &.active {
-    box-shadow: 0 0 0 3px
-      var(
-        --openapi-code-tab-shadow-color-curl,
-        var(--openapi-code-tab-shadow-color-bash)
-      );
+    box-shadow: none;
     border-color: var(--ifm-color-danger);
   }
 }
@@ -209,234 +153,117 @@ body[class="ReactModal__Body--open"] {
 .openapi-tabs__code-item--ruby {
   color: var(--ifm-color-danger);
 
-  &::after {
-    content: "";
-    width: var(--code-tab-logo-width);
-    height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/ruby/ruby-plain.svg")
-      no-repeat;
-    margin-block: auto;
-  }
-
   &.active {
-    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-ruby);
-    border-color: var(--openapi-code-tab-border-color-ruby);
+    box-shadow: none;
+    border-color: var(--border);
   }
 }
 
 .openapi-tabs__code-item--csharp {
   color: var(--ifm-color-gray-500);
 
-  &::after {
-    content: "";
-    width: var(--code-tab-logo-width);
-    height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/csharp/csharp-original.svg")
-      no-repeat;
-    margin-block: auto;
-  }
-
   &.active {
-    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-csharp);
-    border-color: var(--openapi-code-tab-border-color-csharp);
+    box-shadow: none;
+    border-color: var(--border);
   }
 }
 
 .openapi-tabs__code-item--r {
   color: var(--ifm-color-gray-500);
 
-  &::after {
-    content: "";
-    width: var(--code-tab-logo-width);
-    height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/r/r-original.svg")
-      no-repeat;
-    margin-block: auto;
-  }
-
   &.active {
-    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-r);
-    border-color: var(--openapi-code-tab-border-color-r);
+    box-shadow: none;
+    border-color: var(--border);
   }
 }
 
 .openapi-tabs__code-item--swift {
   color: var(--ifm-color-danger);
 
-  &::after {
-    content: "";
-    width: var(--code-tab-logo-width);
-    height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/swift/swift-original.svg")
-      no-repeat;
-    margin-block: auto;
-  }
-
   &.active {
-    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-swift);
-    border-color: var(--openapi-code-tab-border-color-swift);
+    box-shadow: none;
+    border-color: var(--border);
   }
 }
 
 .openapi-tabs__code-item--c {
   color: var(--ifm-color-info);
 
-  &::after {
-    content: "";
-    width: var(--code-tab-logo-width);
-    height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/c/c-original.svg")
-      no-repeat;
-    margin-block: auto;
-  }
-
   &.active {
-    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-c);
-    border-color: var(--openapi-code-tab-border-color-c);
+    box-shadow: none;
+    border-color: var(--border);
   }
 }
 
 .openapi-tabs__code-item--objective-c {
   color: var(--ifm-color-info);
 
-  &::after {
-    content: "";
-    width: var(--code-tab-logo-width);
-    height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/objectivec/objectivec-plain.svg")
-      no-repeat;
-    margin-block: auto;
-  }
-
   &.active {
-    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-objective-c);
-    border-color: var(--openapi-code-tab-border-color-objective-c);
+    box-shadow: none;
+    border-color: var(--border);
   }
 }
 
 .openapi-tabs__code-item--ocaml {
   color: var(--ifm-color-warning);
 
-  &::after {
-    content: "";
-    width: var(--code-tab-logo-width);
-    height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/ocaml/ocaml-original.svg")
-      no-repeat;
-    margin-block: auto;
-  }
-
   &.active {
-    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-objective-ocaml);
-    border-color: var(--openapi-code-tab-border-color-objective-ocaml);
+    box-shadow: none;
+    border-color: var(--border);
   }
 }
 
 .openapi-tabs__code-item--nodejs {
   color: var(--ifm-color-success);
 
-  &::after {
-    content: "";
-    width: var(--code-tab-logo-width);
-    height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original.svg")
-      no-repeat;
-    margin-block: auto;
-  }
-
   &.active {
-    box-shadow: 0 0 0 3px var(--opeanpi-code-tab-shadow-color-nodejs);
-    border-color: var(--openapi-code-tab-border-color-nodejs);
+    box-shadow: none;
+    border-color: var(--border);
   }
 }
 
 .openapi-tabs__code-item--php {
   color: var(--ifm-color-gray-500);
 
-  &::after {
-    content: "";
-    width: var(--code-tab-logo-width);
-    height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/php/php-original.svg")
-      no-repeat;
-    margin-block: auto;
-  }
-
   &.active {
-    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-php);
-    border-color: var(--openapi-code-tab-border-color-php);
+    box-shadow: none;
+    border-color: var(--border);
   }
 }
 
 .openapi-tabs__code-item--kotlin {
   color: var(--ifm-color-gray-500);
 
-  &::after {
-    content: "";
-    width: var(--code-tab-logo-width);
-    height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/kotlin/kotlin-original.svg")
-      no-repeat;
-    margin-block: auto;
-  }
-
   &.active {
-    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-kotlin);
-    border-color: var(--openapi-code-tab-border-color-kotlin);
+    box-shadow: none;
+    border-color: var(--border);
   }
 }
 
 .openapi-tabs__code-item--rust {
   color: var(--ifm-color-gray-500);
 
-  &::after {
-    content: "";
-    width: var(--code-tab-logo-width);
-    height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/rust/rust-original.svg")
-      no-repeat;
-    margin-block: auto;
-  }
-
   &.active {
-    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-rust);
-    border-color: var(--openapi-code-tab-border-color-rust);
+    box-shadow: none;
+    border-color: var(--border);
   }
 }
 
 .openapi-tabs__code-item--java {
   color: var(--ifm-color-warning);
 
-  &::after {
-    content: "";
-    width: var(--code-tab-logo-width);
-    height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/java/java-original.svg")
-      no-repeat;
-    margin-block: auto;
-  }
-
   &.active {
-    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-java);
-    border-color: var(--openapi-code-tab-border-color-java);
+    box-shadow: none;
+    border-color: var(--border);
   }
 }
 
 .openapi-tabs__code-item--powershell {
   color: var(--ifm-color-info);
 
-  &::after {
-    content: "";
-    width: var(--code-tab-logo-width);
-    height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/windows8/windows8-original.svg")
-      no-repeat;
-    margin-block: auto;
-  }
-
   &.active {
-    box-shadow: 0 0 0 3px var(--opeanpi-code-tab-shadow-color-powershell);
-    border-color: var(--openapi-code-tab-border-color-powershell);
+    box-shadow: none;
+    border-color: var(--border);
   }
 }
 
@@ -447,21 +274,9 @@ body[class="ReactModal__Body--open"] {
   justify-content: center;
   position: relative;
 
-  &::after {
-    content: "";
-    display: inline-block;
-    width: 32px; /* Explicitly setting width to 32 pixels */
-    height: 32px; /* Explicitly setting height to 32 pixels */
-    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyIDIyTDggMTZMMTIgMTBNMjAgMjJMMjQgMTZMIDIwIDEwIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=");
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center; /* Center the SVG */
-    margin-top: 0.5rem;
-  }
-
   &.active {
-    box-shadow: 0 0 0 3px var(--opeanpi-code-tab-shadow-color-http);
-    border-color: var(--openapi-code-tab-border-color-http);
+    box-shadow: none;
+    border-color: var(--border);
   }
 }
 
@@ -472,21 +287,9 @@ body[class="ReactModal__Body--open"] {
   justify-content: center;
   position: relative;
 
-  &::after {
-    content: "";
-    display: inline-block;
-    width: 32px; /* Explicitly setting width to 32 pixels */
-    height: 32px; /* Explicitly setting height to 32 pixels */
-    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyIDIyTDggMTZMMTIgMTBNMjAgMjJMMjQgMTZMIDIwIDEwIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=");
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center; /* Center the SVG */
-    margin-top: 0.5rem;
-  }
-
   &.active {
-    box-shadow: 0 0 0 3px var(--opeanpi-code-tab-shadow-color-shell);
-    border-color: var(--openapi-code-tab-border-color-shell);
+    box-shadow: none;
+    border-color: var(--border);
   }
 }
 
@@ -501,5 +304,11 @@ body[class="ReactModal__Body--open"] {
 }
 
 .openapi-modal--open {
-  background-color: rgba(0, 0, 0, 0.7) !important;
+  background-color: var(--popover) !important;
+}
+
+.openapi-tabs__code-icon {
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
 }
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs/index.tsx
index 1ce08df77..0e08e77bf 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs/index.tsx
@@ -9,7 +9,13 @@ import React, { cloneElement, ReactElement, useEffect, useRef } from "react";
 
 import useIsBrowser from "@docusaurus/useIsBrowser";
 import clsx from "clsx";
+import { Code2, Terminal } from "lucide-react";
 
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+} from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/tabs";
 import { useScrollPositionBlocker } from "@theme/utils/scrollUtils";
 import {
   sanitizeTabsChildren,
@@ -45,147 +51,114 @@ function TabList({
   selectValue,
   tabValues,
 }: CodeTabsProps & ReturnType<typeof useTabsContextValue>) {
-  const tabRefs = useRef<(HTMLLIElement | null)[]>([]);
-  const tabsScrollContainerRef = useRef<any>(null);
+  const tabRefs = useRef(new Map<string, HTMLButtonElement>());
+  const tabsScrollContainerRef = useRef<HTMLDivElement>(null);
   const { blockElementScrollPositionUntilNextRender } =
     useScrollPositionBlocker();
 
   useEffect(() => {
-    const activeTab = tabRefs.current.find(
-      (tab) => tab?.getAttribute("aria-selected") === "true"
-    );
-
-    if (activeTab && tabsScrollContainerRef.current) {
-      const container = tabsScrollContainerRef.current;
-      const containerRect = container.getBoundingClientRect();
-      const activeTabRect = activeTab.getBoundingClientRect();
-
-      // Calculate the distance to scroll to align active tab to the left
-      const glowOffset = 3;
-      const scrollOffset =
-        activeTabRect.left -
-        containerRect.left +
-        container.scrollLeft -
-        glowOffset;
-
-      // Check if the active tab is not already at the left position
-
-      if (Math.abs(scrollOffset - container.scrollLeft) > 4) {
-        // Adjust the scroll of the container
-        container.scrollLeft = scrollOffset;
-      }
+    const activeTab = tabRefs.current.get(selectedValue);
+    const container = tabsScrollContainerRef.current;
+    if (!activeTab || !container) return;
+
+    const containerRect = container.getBoundingClientRect();
+    const activeTabRect = activeTab.getBoundingClientRect();
+    const glowOffset = 3;
+    const scrollOffset =
+      activeTabRect.left -
+      containerRect.left +
+      container.scrollLeft -
+      glowOffset;
+
+    if (Math.abs(scrollOffset - container.scrollLeft) > 4) {
+      container.scrollLeft = scrollOffset;
     }
-  }, []);
-
-  const handleTabChange = (
-    event:
-      | React.FocusEvent<HTMLLIElement>
-      | React.MouseEvent<HTMLLIElement>
-      | React.KeyboardEvent<HTMLLIElement>
-  ) => {
-    const newTab = event.currentTarget;
-    const newTabIndex = tabRefs.current.indexOf(newTab);
-    const newTabValue = tabValues[newTabIndex]!.value;
-
-    if (newTabValue !== selectedValue) {
-      blockElementScrollPositionUntilNextRender(newTab);
-      selectValue(newTabValue);
-    }
-
-    if (action) {
-      let newLanguage: Language;
-      if (currentLanguage && includeVariant) {
-        newLanguage = languageSet.filter(
-          (lang: Language) => lang.language === currentLanguage.language
-        )[0];
-        newLanguage.variant = newTabValue;
-        action.setSelectedVariant(newTabValue.toLowerCase());
-      } else if (currentLanguage && includeSample) {
-        newLanguage = languageSet.filter(
-          (lang: Language) => lang.language === currentLanguage.language
-        )[0];
-        newLanguage.sample = newTabValue;
-        action.setSelectedSample(newTabValue);
-      } else {
-        newLanguage = languageSet.filter(
-          (lang: Language) => lang.language === newTabValue
-        )[0];
-        action.setSelectedVariant(newLanguage.variants[0].toLowerCase());
-        action.setSelectedSample(newLanguage.sample);
-      }
-      action.setLanguage(newLanguage);
+  }, [selectedValue]);
+
+  const handleValueChange = (newTabValue: string) => {
+    const newTab = tabRefs.current.get(newTabValue);
+    if (newTab) blockElementScrollPositionUntilNextRender(newTab);
+
+    if (newTabValue !== selectedValue) selectValue(newTabValue);
+
+    if (!action) return;
+
+    let newLanguage: Language;
+    if (currentLanguage && includeVariant) {
+      newLanguage = languageSet.filter(
+        (lang: Language) => lang.language === currentLanguage.language
+      )[0];
+      newLanguage.variant = newTabValue;
+      action.setSelectedVariant(newTabValue.toLowerCase());
+    } else if (currentLanguage && includeSample) {
+      newLanguage = languageSet.filter(
+        (lang: Language) => lang.language === currentLanguage.language
+      )[0];
+      newLanguage.sample = newTabValue;
+      action.setSelectedSample(newTabValue);
+    } else {
+      newLanguage = languageSet.filter(
+        (lang: Language) => lang.language === newTabValue
+      )[0];
+      action.setSelectedVariant(newLanguage.variants[0].toLowerCase());
+      action.setSelectedSample(newLanguage.sample);
     }
-  };
-
-  const handleKeydown = (event: React.KeyboardEvent<HTMLLIElement>) => {
-    let focusElement: HTMLLIElement | null = null;
-
-    switch (event.key) {
-      case "Enter": {
-        handleTabChange(event);
-        break;
-      }
-      case "ArrowRight": {
-        const nextTab = tabRefs.current.indexOf(event.currentTarget) + 1;
-        focusElement = tabRefs.current[nextTab] ?? tabRefs.current[0]!;
-        break;
-      }
-      case "ArrowLeft": {
-        const prevTab = tabRefs.current.indexOf(event.currentTarget) - 1;
-        focusElement =
-          tabRefs.current[prevTab] ??
-          tabRefs.current[tabRefs.current.length - 1]!;
-        break;
-      }
-      default:
-        break;
-    }
-
-    focusElement?.focus();
+    action.setLanguage(newLanguage);
   };
 
   return (
-    <ul
-      role="tablist"
-      aria-orientation="horizontal"
+    <Tabs
+      value={selectedValue}
+      onValueChange={handleValueChange}
       className={clsx(
-        "tabs",
-        "openapi-tabs__code-list-container",
-        {
-          "tabs--block": block,
-        },
+        "tabs-container openapi-tabs__code-container gap-0",
         className
       )}
-      ref={tabsScrollContainerRef}
     >
-      {tabValues.map(({ value, label, attributes }) => (
-        <li
-          // TODO extract TabListItem
-          role="tab"
-          tabIndex={selectedValue === value ? 0 : -1}
-          aria-selected={selectedValue === value}
-          key={value}
-          ref={(tabControl) => {
-            if (tabControl) {
-              tabRefs.current.push(tabControl);
-            }
-          }}
-          onKeyDown={handleKeydown}
-          onClick={handleTabChange}
-          {...attributes}
+      <div
+        ref={tabsScrollContainerRef}
+        data-slot="tabs-scroller"
+        className="max-w-full overflow-x-auto border-b border-border [scrollbar-width:none]"
+      >
+        <TabsList
+          variant="line"
           className={clsx(
-            "tabs__item",
-            "openapi-tabs__code-item",
-            attributes?.className as string,
-            {
-              active: selectedValue === value,
-            }
+            "openapi-tabs__code-list-container h-auto! min-w-max justify-start",
+            block && "tabs--block w-full min-w-full"
           )}
         >
-          <span>{label ?? value}</span>
-        </li>
-      ))}
-    </ul>
+          {tabValues.map(({ value, label, attributes }) => {
+            const itemClassName = attributes?.className as string | undefined;
+            const Icon = itemClassName?.includes("--shell") ? Terminal : Code2;
+
+            return (
+              <TabsTrigger
+                key={value}
+                {...attributes}
+                ref={(tabControl) => {
+                  if (tabControl) tabRefs.current.set(value, tabControl);
+                  else tabRefs.current.delete(value);
+                }}
+                value={value}
+                className={clsx(
+                  "openapi-tabs__code-item",
+                  itemClassName,
+                  selectedValue === value && "active"
+                )}
+              >
+                {itemClassName && (
+                  <Icon
+                    aria-hidden="true"
+                    className="openapi-tabs__code-icon"
+                  />
+                )}
+                <span>{label ?? value}</span>
+              </TabsTrigger>
+            );
+          })}
+        </TabsList>
+      </div>
+    </Tabs>
   );
 }
 
@@ -202,10 +175,7 @@ function TabContent({
     const selectedTabItem = childTabs.find(
       (tabItem) => tabItem.props.value === selectedValue
     );
-    if (!selectedTabItem) {
-      // fail-safe or fail-fast? not sure what's best here
-      return null;
-    }
+    if (!selectedTabItem) return null;
     return cloneElement(selectedTabItem, { className: "margin-top--md" });
   }
   return (
@@ -215,19 +185,11 @@ function TabContent({
 
 function TabsComponent(props: CodeTabsProps & Props): React.JSX.Element {
   const tabs = useTabsContextValue(props);
-  const { className } = props;
 
   return (
     <TabsProvider value={tabs}>
-      <div
-        className={clsx(
-          "tabs-container openapi-tabs__code-container",
-          className
-        )}
-      >
-        <TabList {...props} {...tabs} />
-        <TabContent {...props} {...tabs} />
-      </div>
+      <TabList {...props} {...tabs} />
+      <TabContent {...props} {...tabs} />
     </TabsProvider>
   );
 }
@@ -237,12 +199,7 @@ export default function CodeTabs(
 ): React.JSX.Element {
   const isBrowser = useIsBrowser();
   return (
-    <TabsComponent
-      // Remount tabs after hydration
-      // Temporary fix for https://github.com/facebook/docusaurus/issues/5653
-      key={String(isBrowser)}
-      {...props}
-    >
+    <TabsComponent key={String(isBrowser)} {...props}>
       {sanitizeTabsChildren(props.children)}
     </TabsComponent>
   );
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ContentType/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ContentType/index.tsx
index 4584d0427..4d168ca41 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ContentType/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ContentType/index.tsx
@@ -29,8 +29,8 @@ function ContentType() {
         label="Content-Type"
         value={value}
         options={options}
-        onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-          dispatch(setContentType(e.target.value));
+        onValueChange={(value) => {
+          dispatch(setContentType(value));
           dispatch(clearEncodingSelection());
         }}
       />
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Export/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Export/index.tsx
index 7dda37cdd..3042aca2a 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Export/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Export/index.tsx
@@ -1,49 +1,45 @@
-/* ============================================================================
- * Copyright (c) Palo Alto Networks
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * ========================================================================== */
-
 import React from "react";
 
 import { translate } from "@docusaurus/Translate";
 import fileSaver from "file-saver";
+import { ChevronDown, Download } from "lucide-react";
+
+import { Button } from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/dropdown-menu";
 
-const saveFile = (url: string) => {
-  let fileName;
-  if (url.endsWith("json") || url.endsWith("yaml") || url.endsWith("yml")) {
-    fileName = url.substring(url.lastIndexOf("/") + 1);
-  }
-  fileSaver.saveAs(url, fileName ? fileName : "openapi.txt");
-};
+function saveFile(url: string) {
+  const fileName = /\.(json|ya?ml)$/u.test(url)
+    ? url.substring(url.lastIndexOf("/") + 1)
+    : "openapi.txt";
+  fileSaver.saveAs(url, fileName);
+}
 
-function Export({ url, proxy }: any) {
+function Export({ url }: { url: string; proxy?: string }) {
   return (
-    <div
-      style={{ float: "right" }}
-      className="dropdown dropdown--hoverable dropdown--right"
-    >
-      <button className="export-button button button--sm button--secondary">
-        {translate({ id: "theme.openapi.export.button", message: "Export" })}
-      </button>
-      <ul className="export-dropdown dropdown__menu">
-        <li>
-          <a
-            onClick={(e) => {
-              e.preventDefault();
-              saveFile(`${url}`);
-            }}
-            className="dropdown__link"
-            href={`${url}`}
-          >
+    <div className="openapi-export">
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={<Button type="button" variant="outline" size="sm" />}
+        >
+          <Download aria-hidden="true" />
+          {translate({ id: "theme.openapi.export.button", message: "Export" })}
+          <ChevronDown data-icon="inline-end" aria-hidden="true" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem onClick={() => saveFile(url)}>
+            <Download aria-hidden="true" />
             {translate({
               id: "theme.openapi.export.openapiSpec",
               message: "OpenAPI Spec",
             })}
-          </a>
-        </li>
-      </ul>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
     </div>
   );
 }
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FloatingButton/_FloatingButton.scss b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FloatingButton/_FloatingButton.scss
index 73c9627ce..996fd4d76 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FloatingButton/_FloatingButton.scss
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FloatingButton/_FloatingButton.scss
@@ -5,7 +5,7 @@
     position: relative;
     background: var(--ifm-color-emphasis-900);
     border: none;
-    border-radius: var(--ifm-global-radius);
+    border-radius: var(--radius);
     color: var(--ifm-color-emphasis-100);
     cursor: pointer;
     padding: 0.4rem 0.5rem;
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FloatingButton/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FloatingButton/index.tsx
index 3ec874149..af676357d 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FloatingButton/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FloatingButton/index.tsx
@@ -7,6 +7,8 @@
 
 import React from "react";
 
+import { Button } from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/button";
+
 export interface Props {
   label?: string;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
@@ -15,11 +17,11 @@ export interface Props {
 
 function FloatingButton({ label, onClick, children }: Props) {
   return (
-    <div tabIndex={0} className="openapi-explorer__floating-btn">
+    <div className="openapi-explorer__floating-btn">
       {label && (
-        <button tabIndex={0} onClick={onClick}>
+        <Button type="button" variant="ghost" size="sm" onClick={onClick}>
           {label}
-        </button>
+        </Button>
       )}
       {children}
     </div>
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormFileUpload/_FormFileUpload.scss b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormFileUpload/_FormFileUpload.scss
index 9499e842a..e77915f53 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormFileUpload/_FormFileUpload.scss
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormFileUpload/_FormFileUpload.scss
@@ -3,21 +3,18 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  border: 2px dashed var(--openapi-monaco-border-color);
-  background-color: var(--openapi-input-background);
+  border: 2px dashed var(--border);
+  background-color: var(--background);
 
   width: 100%;
-  border-radius: 4px;
+  border-radius: var(--radius);
   padding: var(--ifm-pre-padding);
   font-size: var(--ifm-code-font-size);
 
   &:hover {
     border: 2px dashed var(--ifm-color-primary);
     background:
-      linear-gradient(
-        var(--openapi-dropzone-hover-shim),
-        var(--openapi-dropzone-hover-shim)
-      ),
+      linear-gradient(var(--accent), var(--accent)),
       linear-gradient(var(--ifm-color-primary), var(--ifm-color-primary));
 
     .openapi-explorer__dropzone-content {
@@ -31,19 +28,16 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  border: 2px dashed var(--openapi-monaco-border-color);
-  background-color: var(--openapi-input-background);
+  border: 2px dashed var(--border);
+  background-color: var(--background);
   width: 100%;
-  border-radius: 4px;
+  border-radius: var(--radius);
   padding: var(--ifm-pre-padding);
   font-size: var(--ifm-code-font-size);
   border: 2px dashed var(--ifm-color-primary);
 
   background:
-    linear-gradient(
-      var(--openapi-dropzone-hover-shim),
-      var(--openapi-dropzone-hover-shim)
-    ),
+    linear-gradient(var(--accent), var(--accent)),
     linear-gradient(var(--ifm-color-primary), var(--ifm-color-primary));
 
   .openapi-explorer__dropzone-content {
@@ -70,5 +64,5 @@
   justify-content: center;
   flex-wrap: wrap;
   margin: var(--ifm-pre-padding) 0;
-  color: var(--openapi-dropzone-color);
+  color: var(--primary);
 }
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormFileUpload/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormFileUpload/index.tsx
index 4f07acb7f..4ea8d0792 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormFileUpload/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormFileUpload/index.tsx
@@ -9,6 +9,7 @@ import React, { useState } from "react";
 
 import { translate } from "@docusaurus/Translate";
 import FloatingButton from "@theme/ApiExplorer/FloatingButton";
+import { File } from "lucide-react";
 import MagicDropzone from "react-magic-dropzone";
 
 type PreviewFile = { preview: string } & File;
@@ -41,19 +42,7 @@ function RenderPreview({ file }: RenderPreviewProps) {
             minWidth: 0,
           }}
         >
-          <svg viewBox="0 0 100 120" style={{ width: "50px", height: "60px" }}>
-            <path
-              fillRule="evenodd"
-              fill="#b3beca"
-              d="M100.000,39.790 L100.000,105.000 C100.000,113.284 93.284,120.000 85.000,120.000 L15.000,120.000 C6.716,120.000 -0.000,113.284 -0.000,105.000 L-0.000,15.000 C-0.000,6.716 6.716,-0.000 15.000,-0.000 L60.210,-0.000 L100.000,39.790 Z"
-            />
-            <path
-              fillRule="evenodd"
-              fill="#90a1b1"
-              transform="translate(60, 0)"
-              d="M0.210,-0.000 L40.000,39.790 L40.000,40.000 L15.000,40.000 C6.716,40.000 0.000,33.284 0.000,25.000 L0.000,-0.000 L0.210,-0.000 Z"
-            />
-          </svg>
+          <File aria-hidden="true" size={50} strokeWidth={1.5} />
           <div className="openapi-explorer__file-name">{file.name}</div>
         </div>
       );
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormItem/_FormItem.scss b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormItem/_FormItem.scss
index 09a2db44c..ad4461c6f 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormItem/_FormItem.scss
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormItem/_FormItem.scss
@@ -1,13 +1,13 @@
 .openapi-explorer__form-item {
-  padding: var(--openapi-explorer-padding-input);
-  font-size: var(--openapi-explorer-font-size-input);
+  padding: 0.5rem;
+  font-size: 0.75rem;
 
   &:first-child {
     margin-top: 0;
   }
 
   .required {
-    color: var(--openapi-required);
+    color: var(--destructive);
   }
 }
 
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormLabel/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormLabel/index.tsx
index 60eae4099..6d2b22d16 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormLabel/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormLabel/index.tsx
@@ -8,6 +8,8 @@
 import React from "react";
 
 import { translate } from "@docusaurus/Translate";
+import { SchemaStatusBadge } from "@theme/components/schema-status-badge";
+import { ValueBadge } from "@theme/components/value-badge";
 
 export interface Props {
   htmlFor?: string;
@@ -26,14 +28,14 @@ function FormLabel({ htmlFor, label, type, required }: Props) {
       ) : (
         <span className="openapi-explorer__form-item-label">{label}</span>
       )}
-      {type && <span style={{ opacity: 0.6 }}> — {type}</span>}
+      {type && <ValueBadge>{type}</ValueBadge>}
       {required && (
-        <span className="openapi-schema__required">
+        <SchemaStatusBadge status="required">
           {translate({
             id: "theme.openapi.schemaItem.required",
             message: "required",
           })}
-        </span>
+        </SchemaStatusBadge>
       )}
     </>
   );
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormMultiSelect/_FormMultiSelect.scss b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormMultiSelect/_FormMultiSelect.scss
index da855e0e9..b0cfebe96 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormMultiSelect/_FormMultiSelect.scss
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormMultiSelect/_FormMultiSelect.scss
@@ -2,18 +2,18 @@
   width: 100%;
   margin-top: calc(var(--ifm-pre-padding) / 2);
   padding: 1rem;
-  border-radius: 4px;
+  border-radius: var(--radius);
   border: 1px solid transparent;
-  background-color: var(--openapi-input-background);
+  background-color: var(--background);
   outline: none;
-  font-size: var(--openapi-explorer-font-size-input);
+  font-size: 0.75rem;
   color: var(--ifm-pre-color);
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
 
   &:focus {
-    border: 1px solid var(--openapi-input-border);
+    border: 1px solid var(--input);
   }
 
   &.error {
@@ -21,7 +21,7 @@
   }
 
   option {
-    border-radius: 0.25rem;
+    border-radius: var(--radius);
     color: var(--ifm-menu-color);
     margin: 0.25rem 0;
     padding: var(--ifm-menu-link-padding-vertical)
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormSelect/_FormSelect.scss b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormSelect/_FormSelect.scss
deleted file mode 100644
index 86872613d..000000000
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormSelect/_FormSelect.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-html[data-theme="dark"] .openapi-explorer__select-input {
-  margin-top: calc(var(--ifm-pre-padding) / 2);
-  background-color: var(--openapi-input-background);
-  border: none;
-  outline: none;
-  width: 100%;
-  color: var(--ifm-pre-color);
-
-  border-radius: 4px;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-
-  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" fill="white"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg>');
-  background-repeat: no-repeat;
-  background-position: right var(--ifm-pre-padding) top 50%;
-  background-size: auto auto;
-}
-
-.openapi-explorer__select-input {
-  width: 100%;
-  margin-top: calc(var(--ifm-pre-padding) / 2);
-  padding: var(--openapi-explorer-padding-input);
-  border: none;
-  outline: none;
-  border-radius: 4px;
-  background-color: var(--openapi-input-background);
-  font-size: var(--openapi-explorer-font-size-input);
-  font-family: var(--ifm-font-family-monospace);
-  color: var(--ifm-pre-color);
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-
-  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg>');
-  background-repeat: no-repeat;
-  background-position: right var(--ifm-pre-padding) top 50%;
-  background-size: auto auto;
-
-  &:focus {
-    box-shadow: inset 0px 0px 0px 2px var(--openapi-input-border);
-  }
-}
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormSelect/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormSelect/index.tsx
index 5e14afff0..865a5ee6e 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormSelect/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormSelect/index.tsx
@@ -1,18 +1,18 @@
-/* ============================================================================
- * Copyright (c) Palo Alto Networks
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * ========================================================================== */
-
 import React, { useId } from "react";
 
 import FormLabel from "@theme/ApiExplorer/FormLabel";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/select";
 
 export interface Props {
   value?: string;
   options?: string[];
-  onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+  onValueChange?: (value: string) => void;
   label?: string;
   type?: string;
   required?: boolean;
@@ -23,7 +23,7 @@ export interface Props {
 function FormSelect({
   value,
   options,
-  onChange,
+  onValueChange,
   label,
   type,
   required,
@@ -32,31 +32,36 @@ function FormSelect({
 }: Props) {
   const id = useId();
 
-  if (!Array.isArray(options) || options.length === 0) {
-    return null;
-  }
+  if (!Array.isArray(options) || options.length === 0) return null;
 
   return (
     <>
       {label && (
         <FormLabel htmlFor={id} label={label} type={type} required={required} />
       )}
-      <select
-        id={label ? id : undefined}
-        className="openapi-explorer__select-input"
+      <Select
         value={value}
-        onChange={onChange}
-        aria-labelledby={!label ? ariaLabelledBy : undefined}
-        aria-label={!label && !ariaLabelledBy ? ariaLabel : undefined}
+        onValueChange={(nextValue) => {
+          if (nextValue !== null) onValueChange?.(nextValue);
+        }}
+        required={required}
       >
-        {options.map((option) => {
-          return (
-            <option key={option} value={option}>
+        <SelectTrigger
+          id={label ? id : undefined}
+          className="w-full"
+          aria-labelledby={!label ? ariaLabelledBy : undefined}
+          aria-label={!label && !ariaLabelledBy ? ariaLabel : undefined}
+        >
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map((option) => (
+            <SelectItem key={option} value={option}>
               {option}
-            </option>
-          );
-        })}
-      </select>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
     </>
   );
 }
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormTextInput/_FormTextInput.scss b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormTextInput/_FormTextInput.scss
index 8c02e92a9..fde50883e 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormTextInput/_FormTextInput.scss
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormTextInput/_FormTextInput.scss
@@ -1,34 +1,22 @@
 .openapi-explorer__form-item-input {
-  margin-top: calc(var(--ifm-pre-padding) / 2);
-  background-color: var(--openapi-input-background);
-  border: 1px solid transparent;
-  outline: none;
-  width: 100%;
-  color: var(--ifm-pre-color);
-  padding: var(--openapi-explorer-padding-input);
-  border-radius: 4px;
-
-  &:hover {
-    border: 1px solid var(--ifm-toc-border-color);
-  }
-
-  &:focus {
-    border: 1px solid var(--ifm-color-primary);
-    box-shadow: none;
-  }
+  margin-top: 0.5rem;
 
   &.error {
-    border: 1px solid var(--openapi-required);
+    border-color: var(--destructive);
   }
 }
 
 .openapi-explorer__input-error {
-  font-size: var(--openapi-explorer-font-size-input);
-  color: var(--openapi-required);
-  padding-top: var(--openapi-explorer-padding-input);
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding-top: 0.5rem;
+  color: var(--destructive);
+  font-size: 0.75rem;
 
-  &::before {
-    display: inline;
-    content: "⚠ ";
+  > svg {
+    width: 0.875rem;
+    height: 0.875rem;
+    flex: 0 0 auto;
   }
 }
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormTextInput/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormTextInput/index.tsx
index 570c4e1d6..100e915ed 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormTextInput/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FormTextInput/index.tsx
@@ -11,7 +11,9 @@ import React, { useId } from "react";
 import { translate } from "@docusaurus/Translate";
 import { ErrorMessage } from "@hookform/error-message";
 import FormLabel from "@theme/ApiExplorer/FormLabel";
+import { Input } from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/input";
 import clsx from "clsx";
+import { CircleAlert } from "lucide-react";
 import { useFormContext } from "react-hook-form";
 
 export interface Props {
@@ -54,7 +56,7 @@ function FormTextInput({
         <FormLabel htmlFor={id} label={label} type={type} required={required} />
       )}
       {paramName ? (
-        <input
+        <Input
           {...register(paramName, {
             required: isRequired
               ? translate({
@@ -75,7 +77,7 @@ function FormTextInput({
           autoComplete="off"
         />
       ) : (
-        <input
+        <Input
           id={label ? id : undefined}
           className="openapi-explorer__form-item-input"
           type={password ? "password" : "text"}
@@ -91,7 +93,10 @@ function FormTextInput({
           errors={errors}
           name={paramName}
           render={({ message }) => (
-            <div className="openapi-explorer__input-error">{message}</div>
+            <div className="openapi-explorer__input-error">
+              <CircleAlert aria-hidden="true" />
+              <span>{message}</span>
+            </div>
           )}
         />
       )}
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/LiveEditor/_LiveEditor.scss b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/LiveEditor/_LiveEditor.scss
index 9dd7393c0..eb724e66e 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/LiveEditor/_LiveEditor.scss
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/LiveEditor/_LiveEditor.scss
@@ -1,8 +1,8 @@
 .openapi-explorer__playground-container {
   margin-top: 1rem;
   margin-bottom: var(--ifm-leading);
-  border-radius: var(--ifm-global-radius);
-  box-shadow: var(--ifm-global-shadow-lw);
+  border-radius: var(--radius);
+  box-shadow: none;
   overflow: auto;
   max-height: 500px;
 }
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/MethodEndpoint/_MethodEndpoint.scss b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/MethodEndpoint/_MethodEndpoint.scss
index 9d22e85f0..d91286152 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/MethodEndpoint/_MethodEndpoint.scss
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/MethodEndpoint/_MethodEndpoint.scss
@@ -1,22 +1,19 @@
+.theme-openapi-method-flow {
+  display: grid;
+  gap: var(--typeset-flow);
+  margin-block: var(--typeset-flow);
+}
+
 .openapi__method-endpoint {
   display: flex;
+  min-width: 0;
   align-items: center;
-  max-width: 100%;
-  width: fit-content;
-  padding: 0.65rem;
-  border: 1px solid var(--ifm-toc-border-color);
+  gap: calc(var(--spacing) * 2);
 }
 
 .openapi__method-endpoint-path {
-  margin-bottom: 0;
-  margin-left: 0.5rem;
-  font-size: 12px;
-  font-weight: normal;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  white-space: normal;
   font-family: var(--ifm-font-family-monospace);
 }
-
-.openapi__divider {
-  width: 100%;
-  margin: 1.5rem 0;
-  border-bottom: 1px solid var(--ifm-toc-border-color);
-}
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/MethodEndpoint/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/MethodEndpoint/index.tsx
index 752d65a61..2ba4e6dec 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/MethodEndpoint/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/MethodEndpoint/index.tsx
@@ -5,32 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React from "react";
+import React, { type ReactNode } from "react";
 
 import BrowserOnly from "@docusaurus/BrowserOnly";
 import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
 import { useTypedSelector } from "@theme/ApiItem/hooks";
-
-function colorForMethod(method: string) {
-  switch (method.toLowerCase()) {
-    case "get":
-      return "primary";
-    case "post":
-      return "success";
-    case "delete":
-      return "danger";
-    case "put":
-      return "info";
-    case "patch":
-      return "warning";
-    case "head":
-      return "secondary";
-    case "event":
-      return "secondary";
-    default:
-      return undefined;
-  }
-}
+import { MethodBadge } from "@theme/components/method-badge";
+import {
+  Card,
+  CardContent,
+} from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/card";
+import { Separator } from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/separator";
 
 export interface Props {
   method: string;
@@ -38,24 +23,52 @@ export interface Props {
   context?: "endpoint" | "callback";
 }
 
+function SoftWrapUrl({ value }: { value: string }) {
+  return value.split("/").map((part, index) => (
+    <React.Fragment key={`${index}-${part}`}>
+      {index > 0 && (
+        <>
+          /
+          <wbr />
+        </>
+      )}
+      {part}
+    </React.Fragment>
+  ));
+}
+
+function EndpointSurface({
+  method,
+  children,
+}: {
+  method: string;
+  children?: ReactNode;
+}) {
+  return (
+    <div className="theme-openapi-method-flow">
+      <Card size="sm">
+        <CardContent>
+          <div className="openapi__method-endpoint">
+            <MethodBadge method={method} />
+            {method !== "event" && (
+              <code className="openapi__method-endpoint-path">{children}</code>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+      <Separator />
+    </div>
+  );
+}
+
 function MethodEndpoint({ method, path, context }: Props) {
   // During SSR, render without Redux store access to avoid "Cannot read properties
   // of null (reading 'store')" errors caused by useSelector running outside a Provider.
   if (!ExecutionEnvironment.canUseDOM) {
     return (
-      <>
-        <pre className="openapi__method-endpoint">
-          <span className={"badge badge--" + colorForMethod(method)}>
-            {method === "event" ? "Webhook" : method.toUpperCase()}
-          </span>{" "}
-          {method !== "event" && (
-            <h2 className="openapi__method-endpoint-path">
-              {`${path.replace(/{([a-z0-9-_]+)}/gi, ":$1")}`}
-            </h2>
-          )}
-        </pre>
-        <div className="openapi__divider" />
-      </>
+      <EndpointSurface method={method}>
+        <SoftWrapUrl value={path.replace(/{([a-z0-9-_]+)}/gi, ":$1")} />
+      </EndpointSurface>
     );
   }
 
@@ -82,30 +95,21 @@ function MethodEndpoint({ method, path, context }: Props) {
       <BrowserOnly>
         {() => {
           if (serverUrlWithVariables.length) {
-            return serverUrlWithVariables;
+            return <SoftWrapUrl value={serverUrlWithVariables} />;
           } else if (serverValue && serverValue.url) {
-            return serverValue.url;
+            return <SoftWrapUrl value={serverValue.url} />;
           }
+          return null;
         }}
       </BrowserOnly>
     );
   };
 
   return (
-    <>
-      <pre className="openapi__method-endpoint">
-        <span className={"badge badge--" + colorForMethod(method)}>
-          {method === "event" ? "Webhook" : method.toUpperCase()}
-        </span>{" "}
-        {method !== "event" && (
-          <h2 className="openapi__method-endpoint-path">
-            {renderServerUrl()}
-            {`${path.replace(/{([a-z0-9-_]+)}/gi, ":$1")}`}
-          </h2>
-        )}
-      </pre>
-      <div className="openapi__divider" />
-    </>
+    <EndpointSurface method={method}>
+      {renderServerUrl()}
+      <SoftWrapUrl value={path.replace(/{([a-z0-9-_]+)}/gi, ":$1")} />
+    </EndpointSurface>
   );
 }
 
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamArrayFormItem.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamArrayFormItem.tsx
index 4346eff9d..f490b9c52 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamArrayFormItem.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamArrayFormItem.tsx
@@ -8,6 +8,7 @@
 import React, { useEffect, useState } from "react";
 
 import { translate } from "@docusaurus/Translate";
+import { X } from "lucide-react";
 import { ErrorMessage } from "@hookform/error-message";
 import { nanoid } from "@reduxjs/toolkit";
 import FormLabel from "@theme/ApiExplorer/FormLabel";
@@ -36,8 +37,7 @@ function ArrayItem({
       <FormSelect
         ariaLabel={param.description || param.name}
         options={["---", "true", "false"]}
-        onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-          const val = e.target.value;
+        onValueChange={(val) => {
           onChange(val === "---" ? undefined : val);
         }}
       />
@@ -153,22 +153,12 @@ export default function ParamArrayFormItem({
                   initialValue={item.value}
                 />
                 <button
+                  type="button"
                   className="openapi-explorer__delete-btn"
                   onClick={handleDeleteItem(item)}
                   aria-label="Delete"
                 >
-                  <svg
-                    focusable="false"
-                    preserveAspectRatio="xMidYMid meet"
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="currentColor"
-                    width="16"
-                    height="16"
-                    viewBox="0 0 32 32"
-                    aria-hidden="true"
-                  >
-                    <path d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"></path>
-                  </svg>
+                  <X aria-hidden="true" size={16} />
                 </button>
               </div>
             ))}
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamBooleanFormItem.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamBooleanFormItem.tsx
index 898109cd5..c50420df8 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamBooleanFormItem.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamBooleanFormItem.tsx
@@ -72,8 +72,7 @@ export default function ParamBooleanFormItem({
             required={required}
             value={value ?? "---"}
             options={["---", "true", "false"]}
-            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-              const val = e.target.value;
+            onValueChange={(val) => {
               dispatch(
                 setParam({
                   ...param,
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamSelectFormItem.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamSelectFormItem.tsx
index 5164b0acf..b949de4b0 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamSelectFormItem.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamSelectFormItem.tsx
@@ -70,8 +70,7 @@ export default function ParamSelectFormItem({
             required={required}
             value={value ?? "---"}
             options={["---", ...(options as string[])]}
-            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-              const val = e.target.value;
+            onValueChange={(val) => {
               dispatch(
                 setParam({
                   ...param,
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/_ParamOptions.scss b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/_ParamOptions.scss
index 4d72ae4a8..bc8e52818 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/_ParamOptions.scss
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/_ParamOptions.scss
@@ -16,7 +16,7 @@
   margin-bottom: 0.5rem;
   padding: 0;
   cursor: pointer;
-  font-size: var(--openapi-explorer-font-size-input);
+  font-size: 0.75rem;
   user-select: none;
   white-space: nowrap;
   border: 0px solid transparent;
@@ -61,14 +61,14 @@
   padding: 0 12px;
 
   margin-top: calc(var(--ifm-pre-padding) / 2);
-  background-color: var(--openapi-input-background);
+  background-color: var(--background);
   border: none;
   color: var(--ifm-pre-color);
-  border-radius: 4px;
+  border-radius: var(--radius);
   margin-left: 4px;
 
   &:active {
-    box-shadow: inset 0px 0px 0px 2px var(--openapi-input-border);
+    box-shadow: none;
   }
 }
 
@@ -86,21 +86,19 @@
   user-select: none;
   white-space: nowrap;
   background-color: transparent;
-  color: var(--openapi-input-border);
-  border: 1px solid var(--openapi-input-border);
-  border-radius: var(--ifm-pre-border-radius);
+  color: var(--input);
+  border: 1px solid var(--input);
+  border-radius: var(--radius);
   margin-top: calc(var(--ifm-pre-padding) / 2);
   text-transform: uppercase;
 
   &:hover {
-    color: var(--openapi-inverse-color);
-    background-color: var(--openapi-input-border);
+    color: var(--primary-foreground);
+    background-color: var(--input);
   }
 
   &:active {
-    box-shadow:
-      inset 0 0 0 1px var(--openapi-input-border),
-      inset 0 0 0 2px var(--openapi-inverse-color);
+    box-shadow: none;
   }
 }
 
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/index.tsx
index 2851ab4a6..c60f7bfea 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/index.tsx
@@ -8,6 +8,7 @@
 import React, { useState, useId } from "react";
 
 import { translate } from "@docusaurus/Translate";
+import { Plus } from "lucide-react";
 import FormItem from "@theme/ApiExplorer/FormItem";
 import ParamArrayFormItem from "@theme/ApiExplorer/ParamOptions/ParamFormItems/ParamArrayFormItem";
 import ParamBooleanFormItem from "@theme/ApiExplorer/ParamOptions/ParamFormItems/ParamBooleanFormItem";
@@ -184,24 +185,7 @@ function ParamOptions() {
                     : "openapi-explorer__plus-btn"
                 }
               >
-                <div>
-                  <svg
-                    style={{
-                      fill: "currentColor",
-                      width: "10px",
-                      height: "10px",
-                    }}
-                    height="16"
-                    viewBox="0 0 16 16"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 7h6a1 1 0 0 1 0 2H9v6a1 1 0 0 1-2 0V9H1a1 1 0 1 1 0-2h6V1a1 1 0 1 1 2 0z"
-                      fillRule="evenodd"
-                    ></path>
-                  </svg>
-                </div>
+                <Plus aria-hidden="true" size={12} strokeWidth={2} />
               </span>
             </span>
             {showOptional
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Request/_Request.scss b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Request/_Request.scss
deleted file mode 100644
index 214997034..000000000
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Request/_Request.scss
+++ /dev/null
@@ -1,140 +0,0 @@
-.openapi-explorer__request-form {
-  background-color: var(--ifm-pre-background);
-  border-radius: var(--openapi-card-border-radius);
-  border: 1px solid var(--openapi-explorer-border-color);
-  box-shadow:
-    0 2px 3px hsla(222, 8%, 43%, 0.1),
-    0 8px 16px -10px hsla(222, 8%, 43%, 0.2);
-  color: var(--ifm-pre-color);
-  line-height: var(--ifm-pre-line-height);
-  margin-bottom: var(--ifm-spacing-vertical);
-  margin-top: 0;
-  overflow: auto;
-  transition: 300ms;
-
-  /* hack for view calculation when monaco is hidden */
-  position: relative;
-
-  &:empty {
-    display: none;
-  }
-
-  &:hover {
-    box-shadow:
-      0 0 0 2px rgba(38, 53, 61, 0.15),
-      0 2px 3px hsla(222, 8%, 43%, 0.15),
-      0 16px 16px -10px hsla(222, 8%, 43%, 0.2);
-  }
-
-  .required {
-    font-size: var(--ifm-code-font-size);
-    color: var(--openapi-required);
-
-    &.request-body {
-      padding-left: 0.25rem;
-    }
-  }
-}
-
-.openapi-explorer__request-header-container {
-  display: flex;
-  justify-content: space-between;
-  border-bottom: 1px solid var(--openapi-explorer-border-color);
-  margin: 0;
-  padding: 0.75rem var(--ifm-pre-padding);
-  text-transform: uppercase;
-  font-size: 12px;
-  font-weight: bold;
-}
-
-.openapi-explorer__expand-details-btn {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  padding: 0;
-  cursor: pointer;
-  border: 0px solid transparent;
-  background-color: transparent;
-  text-transform: inherit;
-  font-weight: inherit;
-  font-size: inherit;
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.openapi-explorer__details-outer-container {
-  padding: 1rem;
-}
-
-.openapi-explorer__details-container[open] {
-  .openapi-explorer__details-summary::before {
-    transform: rotate(180deg);
-    margin-top: 0.25rem;
-  }
-}
-
-.openapi-explorer__details-summary {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.35rem 0;
-  font-size: 14px;
-  list-style: none;
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  &::-webkit-details-marker {
-    display: none;
-  }
-
-  &::before {
-    margin-right: 0.25rem;
-    margin-bottom: 0.25rem;
-    margin-top: 0.25rem;
-    background-image: var(--openapi-explorer-caret-bg);
-    border: none !important;
-    transform: rotate(90deg);
-    content: "";
-    height: 1rem;
-    width: 1rem;
-  }
-}
-
-.openapi-explorer__request-btn {
-  border: none;
-  border-radius: var(--ifm-global-radius);
-  padding: 0.5rem 1rem;
-  margin-top: 1rem;
-  background-color: var(--ifm-color-primary-light);
-  text-transform: uppercase;
-  font-weight: bold;
-  font-size: 12px;
-  color: white;
-  cursor: pointer;
-  transition: 300ms;
-
-  &:hover {
-    background-color: var(--ifm-color-primary-lightest);
-  }
-
-  &:active {
-    background-color: var(--ifm-color-primary-light);
-  }
-}
-
-.openapi-security__summary-container {
-  background: var(--ifm-pre-background);
-  border-radius: var(--ifm-pre-border-radius);
-}
-
-// Prevent auto zoom on mobile iOS devices when focusing on input elmenents
-@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-device-width: 1024px) {
-  .prism-code,
-  select,
-  input {
-    font-size: 1rem;
-  }
-}
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Request/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Request/index.tsx
index 892009f86..d7eaff734 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Request/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Request/index.tsx
@@ -27,6 +27,22 @@ import {
 } from "@theme/ApiExplorer/Response/slice";
 import Server from "@theme/ApiExplorer/Server";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
+import { SchemaStatusBadge } from "@theme/components/schema-status-badge";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/accordion";
+import { Button } from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/button";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/card";
 import type { ParameterObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
 import type { ApiItem } from "docusaurus-plugin-openapi-docs/src/types";
 import type { ThemeConfig } from "docusaurus-theme-openapi-docs/src/types";
@@ -61,11 +77,13 @@ function Request({ item }: { item: ApiItem }) {
   const auth = useTypedSelector((state: any) => state.auth);
   const dispatch = useTypedDispatch();
 
-  const [expandAccept, setExpandAccept] = useState(true);
-  const [expandAuth, setExpandAuth] = useState(true);
-  const [expandBody, setExpandBody] = useState(true);
-  const [expandParams, setExpandParams] = useState(true);
-  const [expandServer, setExpandServer] = useState(true);
+  const [expandedSections, setExpandedSections] = useState<string[]>([
+    "server",
+    "auth",
+    "params",
+    "body",
+    "accept",
+  ]);
 
   const serverLabelId = useId();
 
@@ -224,24 +242,19 @@ function Request({ item }: { item: ApiItem }) {
     return null;
   }
 
-  const expandAllDetails = () => {
-    setExpandAccept(true);
-    setExpandAuth(true);
-    setExpandBody(true);
-    setExpandParams(true);
-    setExpandServer(true);
-  };
-
-  const collapseAllDetails = () => {
-    setExpandAccept(false);
-    setExpandAuth(false);
-    setExpandBody(false);
-    setExpandParams(false);
-    setExpandServer(false);
-  };
-
-  const allDetailsExpanded =
-    expandParams && expandBody && expandServer && expandAuth && expandAccept;
+  const visibleSections = [
+    showServerOptions && item.method !== "event" ? "server" : undefined,
+    showAuth ? "auth" : undefined,
+    showParams ? "params" : undefined,
+    showRequestBody ? "body" : undefined,
+    showAcceptOptions ? "accept" : undefined,
+  ].filter((section): section is string => section !== undefined);
+  const accordionValue = Object.keys(methods.formState.errors).length
+    ? Array.from(new Set([...expandedSections, "params"]))
+    : expandedSections;
+  const allDetailsExpanded = visibleSections.every((section) =>
+    accordionValue.includes(section)
+  );
 
   return (
     <FormProvider {...methods}>
@@ -249,166 +262,131 @@ function Request({ item }: { item: ApiItem }) {
         className="openapi-explorer__request-form"
         onSubmit={methods.handleSubmit(onSubmit)}
       >
-        <div className="openapi-explorer__request-header-container">
-          <span className="openapi-explorer__request-title">
-            {translate({
-              id: "theme.openapi.request.title",
-              message: "Request",
-            })}
-          </span>
-          {allDetailsExpanded ? (
-            <button
-              type="button"
-              className="openapi-explorer__expand-details-btn"
-              onClick={collapseAllDetails}
-            >
-              {translate({
-                id: "theme.openapi.request.collapseAll",
-                message: "Collapse all",
-              })}
-            </button>
-          ) : (
-            <button
-              type="button"
-              className="openapi-explorer__expand-details-btn"
-              onClick={expandAllDetails}
-            >
+        <Card size="sm">
+          <CardHeader>
+            <CardTitle>
               {translate({
-                id: "theme.openapi.request.expandAll",
-                message: "Expand all",
+                id: "theme.openapi.request.title",
+                message: "Request",
               })}
-            </button>
-          )}
-        </div>
-        <div className="openapi-explorer__details-outer-container">
-          {showServerOptions && item.method !== "event" && (
-            <details
-              open={expandServer}
-              className="openapi-explorer__details-container"
-            >
-              <summary
-                id={serverLabelId}
-                className="openapi-explorer__details-summary"
-                onClick={(e) => {
-                  e.preventDefault();
-                  setExpandServer(!expandServer);
-                }}
-              >
-                {translate({
-                  id: "theme.openapi.request.baseUrl.title",
-                  message: "Base URL",
-                })}
-              </summary>
-              <Server labelId={serverLabelId} />
-            </details>
-          )}
-          {showAuth && (
-            <details
-              open={expandAuth}
-              className="openapi-explorer__details-container"
-            >
-              <summary
-                className="openapi-explorer__details-summary"
-                onClick={(e) => {
-                  e.preventDefault();
-                  setExpandAuth(!expandAuth);
-                }}
-              >
-                {translate({
-                  id: "theme.openapi.request.auth.title",
-                  message: "Auth",
-                })}
-              </summary>
-              <Authorization />
-            </details>
-          )}
-          {showParams && (
-            <details
-              open={
-                expandParams || Object.keys(methods.formState.errors).length
-              }
-              className="openapi-explorer__details-container"
-            >
-              <summary
-                className="openapi-explorer__details-summary"
-                onClick={(e) => {
-                  e.preventDefault();
-                  setExpandParams(!expandParams);
-                }}
+            </CardTitle>
+            <CardAction>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() =>
+                  setExpandedSections(allDetailsExpanded ? [] : visibleSections)
+                }
               >
-                {translate({
-                  id: "theme.openapi.request.parameters.title",
-                  message: "Parameters",
-                })}
-              </summary>
-              <ParamOptions />
-            </details>
-          )}
-          {showRequestBody && (
-            <details
-              open={expandBody}
-              className="openapi-explorer__details-container"
+                {allDetailsExpanded
+                  ? translate({
+                      id: "theme.openapi.request.collapseAll",
+                      message: "Collapse all",
+                    })
+                  : translate({
+                      id: "theme.openapi.request.expandAll",
+                      message: "Expand all",
+                    })}
+              </Button>
+            </CardAction>
+          </CardHeader>
+          <CardContent>
+            <Accordion
+              value={accordionValue}
+              onValueChange={setExpandedSections}
             >
-              <summary
-                className="openapi-explorer__details-summary"
-                onClick={(e) => {
-                  e.preventDefault();
-                  setExpandBody(!expandBody);
-                }}
-              >
-                {translate({
-                  id: "theme.openapi.request.body.title",
-                  message: "Body",
-                })}
-                {requestBodyRequired && (
-                  <span className="openapi-schema__required">
-                    &nbsp;
+              {showServerOptions && item.method !== "event" && (
+                <AccordionItem value="server">
+                  <AccordionTrigger id={serverLabelId}>
                     {translate({
-                      id: "theme.openapi.request.requiredLabel",
-                      message: "required",
+                      id: "theme.openapi.request.baseUrl.title",
+                      message: "Base URL",
                     })}
-                  </span>
-                )}
-              </summary>
-              <>
-                <ContentType />
-                <Body
-                  jsonRequestBodyExample={item.jsonRequestBodyExample}
-                  requestBodyMetadata={item.requestBody}
-                  required={requestBodyRequired}
-                />
-              </>
-            </details>
-          )}
-          {showAcceptOptions && (
-            <details
-              open={expandAccept}
-              className="openapi-explorer__details-container"
-            >
-              <summary
-                className="openapi-explorer__details-summary"
-                onClick={(e) => {
-                  e.preventDefault();
-                  setExpandAccept(!expandAccept);
-                }}
-              >
+                  </AccordionTrigger>
+                  <AccordionContent>
+                    <Server labelId={serverLabelId} />
+                  </AccordionContent>
+                </AccordionItem>
+              )}
+              {showAuth && (
+                <AccordionItem value="auth">
+                  <AccordionTrigger>
+                    {translate({
+                      id: "theme.openapi.request.auth.title",
+                      message: "Auth",
+                    })}
+                  </AccordionTrigger>
+                  <AccordionContent>
+                    <Authorization />
+                  </AccordionContent>
+                </AccordionItem>
+              )}
+              {showParams && (
+                <AccordionItem value="params">
+                  <AccordionTrigger>
+                    {translate({
+                      id: "theme.openapi.request.parameters.title",
+                      message: "Parameters",
+                    })}
+                  </AccordionTrigger>
+                  <AccordionContent>
+                    <ParamOptions />
+                  </AccordionContent>
+                </AccordionItem>
+              )}
+              {showRequestBody && (
+                <AccordionItem value="body">
+                  <AccordionTrigger>
+                    {translate({
+                      id: "theme.openapi.request.body.title",
+                      message: "Body",
+                    })}
+                    {requestBodyRequired && (
+                      <SchemaStatusBadge status="required">
+                        {translate({
+                          id: "theme.openapi.request.requiredLabel",
+                          message: "required",
+                        })}
+                      </SchemaStatusBadge>
+                    )}
+                  </AccordionTrigger>
+                  <AccordionContent>
+                    <ContentType />
+                    <Body
+                      jsonRequestBodyExample={item.jsonRequestBodyExample}
+                      requestBodyMetadata={item.requestBody}
+                      required={requestBodyRequired}
+                    />
+                  </AccordionContent>
+                </AccordionItem>
+              )}
+              {showAcceptOptions && (
+                <AccordionItem value="accept">
+                  <AccordionTrigger>
+                    {translate({
+                      id: "theme.openapi.request.accept.title",
+                      message: "Accept",
+                    })}
+                  </AccordionTrigger>
+                  <AccordionContent>
+                    <Accept />
+                  </AccordionContent>
+                </AccordionItem>
+              )}
+            </Accordion>
+          </CardContent>
+          {showRequestButton && item.method !== "event" && (
+            <CardFooter>
+              <Button type="submit" size="sm">
                 {translate({
-                  id: "theme.openapi.request.accept.title",
-                  message: "Accept",
+                  id: "theme.openapi.request.sendButton",
+                  message: "Send API Request",
                 })}
-              </summary>
-              <Accept />
-            </details>
-          )}
-          {showRequestButton && item.method !== "event" && (
-            <button className="openapi-explorer__request-btn" type="submit">
-              {translate({
-                id: "theme.openapi.request.sendButton",
-                message: "Send API Request",
-              })}
-            </button>
+              </Button>
+            </CardFooter>
           )}
-        </div>
+        </Card>
       </form>
     </FormProvider>
   );
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Response/_Response.scss b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Response/_Response.scss
index 6a03470c0..df0362bb1 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Response/_Response.scss
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Response/_Response.scss
@@ -1,132 +1,29 @@
-.openapi-explorer__response-container {
-  background-color: var(--ifm-pre-background);
-  border-radius: var(--openapi-card-border-radius);
-  border: 1px solid var(--openapi-explorer-border-color);
-  box-shadow:
-    0 2px 3px hsla(222, 8%, 43%, 0.1),
-    0 8px 16px -10px hsla(222, 8%, 43%, 0.2);
-  color: var(--ifm-pre-color);
-  line-height: var(--ifm-pre-line-height);
-  margin-bottom: var(--ifm-spacing-vertical);
-  margin-top: 0;
-  overflow: auto;
-  transition: 300ms;
-
-  &:hover {
-    box-shadow:
-      0 0 0 2px rgba(38, 53, 61, 0.15),
-      0 2px 3px hsla(222, 8%, 43%, 0.15),
-      0 16px 16px -10px hsla(222, 8%, 43%, 0.2);
-  }
-
-  .openapi-explorer__code-block code {
-    padding-top: 0;
-  }
-}
-
-.openapi-explorer__response-title-container {
-  display: flex;
-  justify-content: space-between;
-  border-bottom: 1px solid var(--openapi-explorer-border-color);
-  margin: 0;
-  padding: 0.75rem var(--ifm-pre-padding);
-  text-transform: uppercase;
-  font-size: 12px;
-  font-weight: bold;
-}
-
 .openapi-explorer__response-placeholder-message {
-  font-size: 12px;
-  padding: 1.25rem;
-  margin-bottom: 0;
+  margin: 0;
+  color: var(--muted-foreground);
+  font-size: var(--theme-text-xs);
+  line-height: var(--theme-leading-xs);
   text-align: center;
 }
 
-.openapi-explorer__response-clear-btn {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  padding: 0;
-  cursor: pointer;
-  border: 0px solid transparent;
-  background-color: transparent;
-  text-transform: inherit;
-  font-weight: inherit;
-  font-size: inherit;
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.openapi-explorer__loading-container {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-
 .openapi-response__dot::before {
-  margin-right: 0.2rem;
-  margin-bottom: 0.15rem;
-  content: "⬤";
-  color: var(--ifm-color-primary);
-  font-size: 8px;
+  display: inline-block;
+  width: calc(var(--spacing) * 2);
+  height: calc(var(--spacing) * 2);
+  margin-right: var(--spacing);
+  border-radius: 50%;
+  background: var(--primary);
+  content: "";
 }
 
 .openapi-response__dot--danger::before {
-  color: var(--ifm-color-danger);
+  background: var(--destructive);
 }
 
 .openapi-response__dot--success::before {
-  color: var(--ifm-color-success);
+  background: var(--success);
 }
 
 .openapi-response__dot--info::before {
-  color: var(--ifm-color-info);
-}
-
-.openapi-response__status-code {
-  margin-left: -1rem;
-}
-
-.openapi-response__status-headers {
-  margin-left: -1rem;
-}
-
-/* loading spinner */
-.openapi-response__lds-ring {
-  display: inline-block;
-  position: relative;
-  width: 80px;
-  height: 80px;
-}
-.openapi-response__lds-ring div {
-  box-sizing: border-box;
-  display: block;
-  position: absolute;
-  width: 64px;
-  height: 64px;
-  margin: 8px;
-  border: 5px solid #dfc;
-  border-radius: 50%;
-  animation: openapi-response__lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1)
-    infinite;
-  border-color: var(--ifm-color-primary) transparent transparent transparent;
-}
-.openapi-response__lds-ring div:nth-child(1) {
-  animation-delay: -0.45s;
-}
-.openapi-response__lds-ring div:nth-child(2) {
-  animation-delay: -0.3s;
-}
-.openapi-response__lds-ring div:nth-child(3) {
-  animation-delay: -0.15s;
-}
-@keyframes openapi-response__lds-ring {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
+  background: var(--info);
 }
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Response/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Response/index.tsx
index 1f654b338..e8de3152d 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Response/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Response/index.tsx
@@ -8,13 +8,21 @@
 import React from "react";
 
 import { useDoc } from "@docusaurus/plugin-content-docs/client";
-import { usePrismTheme } from "@docusaurus/theme-common";
 import Translate, { translate } from "@docusaurus/Translate";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import ApiCodeBlock from "@theme/ApiExplorer/ApiCodeBlock";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
+import { Button } from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/button";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/card";
+import { Spinner } from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/spinner";
 import SchemaTabs from "@theme/SchemaTabs";
-import TabItem from "@theme/TabItem";
+import TabItem from "@theme/ApiTabItem";
 import clsx from "clsx";
 import type { ApiItem } from "docusaurus-plugin-openapi-docs/src/types";
 import type { ThemeConfig } from "docusaurus-theme-openapi-docs/src/types";
@@ -98,7 +106,6 @@ function Response({ item }: { item: ApiItem }) {
   const themeConfig = siteConfig.themeConfig as ThemeConfig;
   const hideSendButton = metadata.frontMatter.hide_send_button;
   const proxy = metadata.frontMatter.proxy ?? themeConfig.api?.proxy;
-  const prismTheme = usePrismTheme();
   const code = useTypedSelector((state: any) => state.response.code);
   const headers = useTypedSelector((state: any) => state.response.headers);
   const response = useTypedSelector((state: any) => state.response.value);
@@ -130,39 +137,34 @@ function Response({ item }: { item: ApiItem }) {
   }
 
   return (
-    <div className="openapi-explorer__response-container">
-      <div className="openapi-explorer__response-title-container">
-        <span className="openapi-explorer__response-title">
+    <Card size="sm">
+      <CardHeader>
+        <CardTitle>
           {translate({
             id: "theme.openapi.response.title",
             message: "Response",
           })}
-        </span>
-        <button
-          type="button"
-          className="openapi-explorer__response-clear-btn"
-          onClick={() => {
-            dispatch(clearResponse());
-            dispatch(clearCode());
-            dispatch(clearHeaders());
-          }}
-        >
-          {translate({ id: "theme.openapi.response.clear", message: "Clear" })}
-        </button>
-      </div>
-      <div
-        style={{
-          backgroundColor:
-            code && prettyResponse !== "Fetching..."
-              ? prismTheme.plain.backgroundColor
-              : "transparent",
-          paddingLeft: "1rem",
-          paddingTop: "1rem",
-          ...((prettyResponse === "Fetching..." || !code) && {
-            paddingBottom: "1rem",
-          }),
-        }}
-      >
+        </CardTitle>
+        <CardAction>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            disabled={!response && !code}
+            onClick={() => {
+              dispatch(clearResponse());
+              dispatch(clearCode());
+              dispatch(clearHeaders());
+            }}
+          >
+            {translate({
+              id: "theme.openapi.response.clear",
+              message: "Clear",
+            })}
+          </Button>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
         {code && prettyResponse !== "Fetching..." ? (
           <SchemaTabs lazy>
             {/* @ts-ignore */}
@@ -219,14 +221,7 @@ function Response({ item }: { item: ApiItem }) {
             </TabItem>
           </SchemaTabs>
         ) : prettyResponse === "Fetching..." ? (
-          <div className="openapi-explorer__loading-container">
-            <div className="openapi-response__lds-ring">
-              <div></div>
-              <div></div>
-              <div></div>
-              <div></div>
-            </div>
-          </div>
+          <Spinner />
         ) : (
           <p className="openapi-explorer__response-placeholder-message">
             <Translate
@@ -245,8 +240,8 @@ function Response({ item }: { item: ApiItem }) {
             </Translate>
           </p>
         )}
-      </div>
-    </div>
+      </CardContent>
+    </Card>
   );
 }
 
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/SecuritySchemes/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/SecuritySchemes/index.tsx
index fb026047c..393e07aed 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/SecuritySchemes/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/SecuritySchemes/index.tsx
@@ -89,7 +89,7 @@ function SecuritySchemes(props: any) {
                   style={{
                     display: "flex",
                     flexDirection: "column",
-                    background: "var(--openapi-card-background-color)",
+                    background: "var(--card)",
                   }}
                 >
                   <span>
@@ -136,7 +136,7 @@ function SecuritySchemes(props: any) {
                   style={{
                     display: "flex",
                     flexDirection: "column",
-                    background: "var(--openapi-card-background-color)",
+                    background: "var(--card)",
                   }}
                 >
                   <span>
@@ -181,7 +181,7 @@ function SecuritySchemes(props: any) {
                 style={{
                   display: "flex",
                   flexDirection: "column",
-                  background: "var(--openapi-card-background-color)",
+                  background: "var(--card)",
                 }}
               >
                 <span>
@@ -224,7 +224,7 @@ function SecuritySchemes(props: any) {
                 style={{
                   display: "flex",
                   flexDirection: "column",
-                  background: "var(--openapi-card-background-color)",
+                  background: "var(--card)",
                 }}
               >
                 <span>
@@ -272,7 +272,7 @@ function SecuritySchemes(props: any) {
                 style={{
                   display: "flex",
                   flexDirection: "column",
-                  background: "var(--openapi-card-background-color)",
+                  background: "var(--card)",
                 }}
               >
                 <span>
@@ -333,7 +333,7 @@ function SecuritySchemes(props: any) {
                 style={{
                   display: "flex",
                   flexDirection: "column",
-                  background: "var(--openapi-card-background-color)",
+                  background: "var(--card)",
                 }}
               >
                 <span>
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Server/_Server.scss b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Server/_Server.scss
index c6bbb7d70..111ddf75e 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Server/_Server.scss
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Server/_Server.scss
@@ -1,6 +1,6 @@
 .openapi-explorer__server-container {
-  background: var(--openapi-card-background-color);
-  border-radius: var(--openapi-card-border-radius);
+  background: var(--card);
+  border-radius: var(--radius);
   color: var(--ifm-pre-color);
   line-height: var(--ifm-pre-line-height);
   margin-bottom: var(--ifm-spacing-vertical);
@@ -16,7 +16,7 @@
 }
 
 .openapi-explorer__server-url {
-  font-size: var(--openapi-explorer-font-size-input);
+  font-size: 0.75rem;
   font-family: var(--ifm-font-family-monospace);
 }
 
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Server/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Server/index.tsx
index 26067e864..4aec93813 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Server/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Server/index.tsx
@@ -90,11 +90,11 @@ function Server({ labelId }: ServerProps) {
           <FormSelect
             ariaLabelledBy={labelId}
             options={options.map((s: any) => s.url)}
-            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
+            onValueChange={(value) => {
               dispatch(
                 setServer(
                   JSON.stringify(
-                    options.filter((s: any) => s.url === e.target.value)[0]
+                    options.find((server: any) => server.url === value)
                   )
                 )
               );
@@ -113,10 +113,10 @@ function Server({ labelId }: ServerProps) {
                   <FormSelect
                     label={key}
                     options={value.variables[key].enum}
-                    onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
+                    onValueChange={(nextValue) => {
                       dispatch(
                         setServerVariable(
-                          JSON.stringify({ key, value: e.target.value })
+                          JSON.stringify({ key, value: nextValue })
                         )
                       );
                     }}
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiItem/Layout/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiItem/Layout/index.tsx
index 91d479265..4b8872020 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiItem/Layout/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiItem/Layout/index.tsx
@@ -1,14 +1,6 @@
-/* ============================================================================
- * Copyright (c) Palo Alto Networks
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * ========================================================================== */
-
 import React, { type JSX } from "react";
 
 import { useDoc } from "@docusaurus/plugin-content-docs/client";
-import { useWindowSize } from "@docusaurus/theme-common";
 import ContentVisibility from "@theme/ContentVisibility";
 import DocBreadcrumbs from "@theme/DocBreadcrumbs";
 import DocItemContent from "@theme/DocItem/Content";
@@ -21,65 +13,56 @@ import DocVersionBadge from "@theme/DocVersionBadge";
 import DocVersionBanner from "@theme/DocVersionBanner";
 import clsx from "clsx";
 
-import styles from "./styles.module.css";
-
-/**
- * Decide if the toc should be rendered, on mobile or desktop viewports
- */
 function useDocTOC() {
   const { frontMatter, toc } = useDoc();
-  const windowSize = useWindowSize();
-
-  const hidden = frontMatter.hide_table_of_contents;
-  const canRender = !hidden && toc.length > 0;
-
-  const mobile = canRender ? <DocItemTOCMobile /> : undefined;
-
-  const desktop =
-    canRender && (windowSize === "desktop" || windowSize === "ssr") ? (
-      <DocItemTOCDesktop />
-    ) : undefined;
-
+  const canRender = !frontMatter.hide_table_of_contents && toc.length > 0;
   return {
-    hidden,
-    mobile,
-    desktop,
+    mobile: canRender ? <DocItemTOCMobile /> : undefined,
+    desktop: canRender ? <DocItemTOCDesktop /> : undefined,
   };
 }
 
-export default function DocItemLayout({ children }: Props): JSX.Element {
+export default function ApiItemLayout({ children }: Props): JSX.Element {
   const docTOC = useDocTOC();
-  const { metadata } = useDoc();
-  const { frontMatter } = useDoc();
-  const api = frontMatter.api;
-  const schema = frontMatter.schema;
+  const { metadata, frontMatter } = useDoc();
+  const isWide = Boolean(frontMatter.api || frontMatter.schema);
+
   return (
-    <div className="row">
-      <div className={clsx("col", !docTOC.hidden && styles.docItemCol)}>
-        <ContentVisibility metadata={metadata} />
-        <DocVersionBanner />
-        <div className={styles.docItemContainer}>
-          <article>
-            <DocBreadcrumbs />
-            <DocVersionBadge />
-            {docTOC.mobile}
-            <DocItemContent>{children}</DocItemContent>
-            <div className="row">
-              <div
-                className={clsx("col", api || schema ? "col--7" : "col--12")}
-              >
+    <>
+      <div className="flex min-w-0 flex-1 flex-col">
+        <div className="h-(--top-spacing) shrink-0" />
+        <div
+          className={clsx(
+            "mx-auto flex w-full min-w-0 flex-1 flex-col gap-6 px-4 py-6 text-foreground md:px-0 dark:text-foreground",
+            isWide ? "max-w-none" : "max-w-160"
+          )}
+        >
+          <ContentVisibility metadata={metadata} />
+          <div
+            className={clsx(
+              "theme-doc-page__content",
+              isWide && "theme-doc-page__content--wide"
+            )}
+          >
+            <DocVersionBanner />
+            <div className="theme-doc-page__stack">
+              <article className="theme-doc-page__article">
+                <div className="theme-doc-page__breadcrumbs">
+                  <DocBreadcrumbs />
+                </div>
+                <DocVersionBadge />
+                {docTOC.mobile}
+                <DocItemContent>{children}</DocItemContent>
                 <DocItemFooter />
-              </div>
-            </div>
-          </article>
-          <div className="row">
-            <div className={clsx("col", api || schema ? "col--7" : "col--12")}>
+              </article>
               <DocItemPaginator />
             </div>
           </div>
         </div>
       </div>
-      {docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
-    </div>
+      {docTOC.desktop && (
+        <div className="theme-doc-page__toc">{docTOC.desktop}</div>
+      )}
+    </>
   );
 }
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiItem/Layout/styles.module.css b/packages/docusaurus-theme-openapi-docs/src/theme/ApiItem/Layout/styles.module.css
deleted file mode 100644
index 8ea72ae2f..000000000
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiItem/Layout/styles.module.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/* ============================================================================
- * Copyright (c) Palo Alto Networks
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * ========================================================================== */
-
-.docItemContainer header + *,
-.docItemContainer article > *:first-child {
-  margin-top: 0;
-}
-
-@media (min-width: 997px) {
-  .docItemCol {
-    max-width: 75% !important;
-  }
-}
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiItem/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiItem/index.tsx
index 9025566b8..36860ede0 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiItem/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiItem/index.tsx
@@ -239,10 +239,8 @@ export default function ApiItem(props: Props): JSX.Element {
       <HtmlClassNameProvider className={docHtmlClassName}>
         <DocItemMetadata />
         <DocItemLayout>
-          <div className="row">
-            <div className="col col--12 markdown">
-              <MDXComponent />
-            </div>
+          <div className="theme-api-info-page min-w-0">
+            <MDXComponent />
           </div>
         </DocItemLayout>
       </HtmlClassNameProvider>
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/TabItem/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiTabItem/index.tsx
similarity index 100%
rename from packages/docusaurus-theme-openapi-docs/src/theme/TabItem/index.tsx
rename to packages/docusaurus-theme-openapi-docs/src/theme/ApiTabItem/index.tsx
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/TabItem/styles.module.css b/packages/docusaurus-theme-openapi-docs/src/theme/ApiTabItem/styles.module.css
similarity index 100%
rename from packages/docusaurus-theme-openapi-docs/src/theme/TabItem/styles.module.css
rename to packages/docusaurus-theme-openapi-docs/src/theme/ApiTabItem/styles.module.css
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiTabs/_ApiTabs.scss b/packages/docusaurus-theme-openapi-docs/src/theme/ApiTabs/_ApiTabs.scss
index aeffc4fa1..c1ace4d43 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiTabs/_ApiTabs.scss
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiTabs/_ApiTabs.scss
@@ -19,7 +19,7 @@
   margin-top: 0 !important;
   margin-right: 0.5rem;
   padding: 0.35rem 0.85rem;
-  border-radius: var(--ifm-global-radius);
+  border-radius: var(--radius);
   font-weight: var(--ifm-font-weight-bold);
   font-size: 12px;
   transition: 300ms;
@@ -27,17 +27,17 @@
 
   &.success.active {
     background-color: var(--ifm-color-success);
-    color: var(--ifm-color-white);
+    color: var(--primary-foreground);
   }
 
   &.danger.active {
     background-color: var(--ifm-color-danger);
-    color: var(--ifm-color-white);
+    color: var(--primary-foreground);
   }
 
   &.info.active {
     background-color: var(--ifm-color-info);
-    color: var(--ifm-color-white);
+    color: var(--primary-foreground);
   }
 
   &.active,
@@ -105,27 +105,9 @@
   max-width: 600px;
 }
 
-/* Tab Arrows */
+/* Response tabs use Nova icon buttons with Lucide arrows. */
 .openapi-tabs__arrow {
-  content: "";
-  height: 1.25rem;
-  width: 1.25rem;
-  border: none;
-  min-width: 1.25rem;
-  background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
-  filter: var(--ifm-menu-link-sublist-icon-filter);
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  &.left {
-    transform: rotate(270deg);
-  }
-
-  &.right {
-    transform: rotate(90deg);
-  }
+  flex: 0 0 auto;
 }
 
 @media screen and (max-width: 500px) {
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiTabs/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiTabs/index.tsx
index ff82d82f1..88ec85614 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiTabs/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiTabs/index.tsx
@@ -1,28 +1,13 @@
-/* ============================================================================
- * Copyright (c) Palo Alto Networks
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * ========================================================================== */
+import React, { cloneElement, type ReactElement } from "react";
 
-import React, {
-  cloneElement,
-  useRef,
-  useState,
-  useEffect,
-  ReactElement,
-} from "react";
-
-import { translate } from "@docusaurus/Translate";
 import useIsBrowser from "@docusaurus/useIsBrowser";
 import Heading from "@theme/Heading";
-import clsx from "clsx";
 
-import { useScrollPositionBlocker } from "@theme/utils/scrollUtils";
+import { OpenApiTabList } from "@theme/components/openapi-tab-list";
 import {
   sanitizeTabsChildren,
   type TabItemProps,
-  TabProps,
+  type TabProps,
   TabsProvider,
   useTabsContextValue,
 } from "@theme/utils/tabsUtils";
@@ -32,94 +17,15 @@ export interface TabListProps extends TabProps {
   id: string;
 }
 
-function TabList({
-  className,
-  block,
+function ResponseTabList({
+  label,
+  id,
   selectedValue,
   selectValue,
   tabValues,
-  label = translate({
-    id: "theme.openapi.tabs.responses.label",
-    message: "Responses",
-  }),
-  id = "responses",
+  className,
+  block,
 }: TabListProps & ReturnType<typeof useTabsContextValue>) {
-  const tabRefs: (HTMLLIElement | null)[] = [];
-  const { blockElementScrollPositionUntilNextRender } =
-    useScrollPositionBlocker();
-
-  const handleTabChange = (
-    event:
-      | React.FocusEvent<HTMLLIElement>
-      | React.MouseEvent<HTMLLIElement>
-      | React.KeyboardEvent<HTMLLIElement>
-  ) => {
-    const newTab = event.currentTarget;
-    const newTabIndex = tabRefs.indexOf(newTab);
-    const newTabValue = tabValues[newTabIndex].value;
-
-    if (newTabValue !== selectedValue) {
-      blockElementScrollPositionUntilNextRender(newTab);
-      selectValue(newTabValue);
-    }
-  };
-
-  const handleKeydown = (event: React.KeyboardEvent<HTMLLIElement>) => {
-    let focusElement: HTMLLIElement | null = null;
-
-    switch (event.key) {
-      case "Enter": {
-        handleTabChange(event);
-        break;
-      }
-      case "ArrowRight": {
-        const nextTab = tabRefs.indexOf(event.currentTarget) + 1;
-        focusElement = tabRefs[nextTab] ?? tabRefs[0]!;
-        break;
-      }
-      case "ArrowLeft": {
-        const prevTab = tabRefs.indexOf(event.currentTarget) - 1;
-        focusElement = tabRefs[prevTab] ?? tabRefs[tabRefs.length - 1]!;
-        break;
-      }
-      default:
-        break;
-    }
-
-    focusElement?.focus();
-  };
-
-  const tabItemListContainerRef = useRef<HTMLUListElement>(null);
-  const [showTabArrows, setShowTabArrows] = useState<boolean>(false);
-
-  useEffect(() => {
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (let entry of entries) {
-        requestAnimationFrame(() => {
-          if (entry.target.clientWidth < entry.target.scrollWidth) {
-            setShowTabArrows(true);
-          } else {
-            setShowTabArrows(false);
-          }
-        });
-      }
-    });
-
-    resizeObserver.observe(tabItemListContainerRef.current!);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, []);
-
-  const handleRightClick = () => {
-    tabItemListContainerRef.current!.scrollLeft += 90;
-  };
-
-  const handleLeftClick = () => {
-    tabItemListContainerRef.current!.scrollLeft -= 90;
-  };
-
   return (
     <div className="openapi-tabs__response-header-section">
       <Heading
@@ -129,64 +35,21 @@ function TabList({
       >
         {label}
       </Heading>
-      <div className="openapi-tabs__response-container">
-        {showTabArrows && (
-          <button
-            className="openapi-tabs__arrow left"
-            onClick={handleLeftClick}
-          />
-        )}
-        <ul
-          ref={tabItemListContainerRef}
-          role="tablist"
-          aria-orientation="horizontal"
-          className={clsx(
-            "openapi-tabs__response-list-container",
-            "tabs",
-            {
-              "tabs--block": block,
-            },
-            className
-          )}
-        >
-          {tabValues.map(({ value, label, attributes }) => (
-            <li
-              // TODO extract TabListItem
-              role="tab"
-              tabIndex={selectedValue === value ? 0 : -1}
-              aria-selected={selectedValue === value}
-              key={value}
-              ref={(tabControl) => {
-                tabRefs.push(tabControl);
-              }}
-              onKeyDown={handleKeydown}
-              onClick={handleTabChange}
-              {...attributes}
-              className={clsx(
-                "tabs__item",
-                "openapi-tabs__response-code-item",
-                attributes?.className as string,
-                parseInt(value) >= 400
-                  ? "danger"
-                  : parseInt(value) >= 200 && parseInt(value) < 300
-                    ? "success"
-                    : "info",
-                {
-                  active: selectedValue === value,
-                }
-              )}
-            >
-              {label ?? value}
-            </li>
-          ))}
-        </ul>
-        {showTabArrows && (
-          <button
-            className="openapi-tabs__arrow right"
-            onClick={handleRightClick}
-          />
-        )}
-      </div>
+      <OpenApiTabList
+        values={tabValues}
+        value={selectedValue}
+        onValueChange={selectValue}
+        variant="default"
+        className={className}
+        block={block}
+        triggerClassName={(value) =>
+          Number(value) >= 400
+            ? "text-destructive"
+            : Number(value) >= 200 && Number(value) < 300
+              ? "text-success"
+              : "text-info"
+        }
+      />
     </div>
   );
 }
@@ -195,43 +58,37 @@ function TabContent({
   lazy,
   children,
   selectedValue,
-}: TabProps &
-  ReturnType<typeof useTabsContextValue>): React.JSX.Element | null {
+}: TabProps & ReturnType<typeof useTabsContextValue>) {
   const childTabs = (Array.isArray(children) ? children : [children]).filter(
     Boolean
   ) as ReactElement<TabItemProps>[];
-  if (lazy) {
-    const selectedTabItem = childTabs.find(
-      (tabItem) => tabItem.props.value === selectedValue
-    );
-    if (!selectedTabItem) {
-      // fail-safe or fail-fast? not sure what's best here
-      return null;
-    }
-    return cloneElement(selectedTabItem, { className: "margin-top--md" });
-  }
-  return <div className="margin-top--md">{childTabs}</div>;
+
+  if (!lazy) return <div className="margin-top--md">{childTabs}</div>;
+
+  const selectedTab = childTabs.find(
+    (tab) => tab.props.value === selectedValue
+  );
+  return selectedTab
+    ? cloneElement(selectedTab, { className: "margin-top--md" })
+    : null;
 }
+
 function TabsComponent(props: TabListProps): React.JSX.Element {
   const tabs = useTabsContextValue(props);
   return (
     <TabsProvider value={tabs}>
       <div className="openapi-tabs__container">
-        <TabList {...props} {...tabs} />
+        <ResponseTabList {...props} {...tabs} />
         <TabContent {...props} {...tabs} />
       </div>
     </TabsProvider>
   );
 }
+
 export default function ApiTabs(props: TabListProps): React.JSX.Element {
   const isBrowser = useIsBrowser();
   return (
-    <TabsComponent
-      // Remount tabs after hydration
-      // Temporary fix for https://github.com/facebook/docusaurus/issues/5653
-      key={String(isBrowser)}
-      {...props}
-    >
+    <TabsComponent key={String(isBrowser)} {...props}>
       {sanitizeTabsChildren(props.children)}
     </TabsComponent>
   );
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/DiscriminatorTabs/_DiscriminatorTabs.scss b/packages/docusaurus-theme-openapi-docs/src/theme/DiscriminatorTabs/_DiscriminatorTabs.scss
index 158853f81..190e469ec 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/DiscriminatorTabs/_DiscriminatorTabs.scss
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/DiscriminatorTabs/_DiscriminatorTabs.scss
@@ -75,7 +75,7 @@
   position: relative;
   margin: 0 !important;
   padding: 5px 0 5px 0 !important;
-  border-left: thin solid var(--openapi-tree-line-color) !important;
+  border-left: thin solid var(--border) !important;
 }
 
 .openapi-discriminator__name {
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/DiscriminatorTabs/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/DiscriminatorTabs/index.tsx
index 99da7a7f6..5cda2b646 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/DiscriminatorTabs/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/DiscriminatorTabs/index.tsx
@@ -1,224 +1,58 @@
-/* ============================================================================
- * Copyright (c) Palo Alto Networks
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * ========================================================================== */
-
-import React, {
-  cloneElement,
-  useRef,
-  useEffect,
-  useState,
-  ReactElement,
-} from "react";
+import React, { cloneElement, type ReactElement } from "react";
 
 import useIsBrowser from "@docusaurus/useIsBrowser";
-import clsx from "clsx";
 import flatten from "lodash/flatten";
 
-import { useScrollPositionBlocker } from "@theme/utils/scrollUtils";
+import { OpenApiTabList } from "@theme/components/openapi-tab-list";
 import {
   sanitizeTabsChildren,
   type TabItemProps,
-  TabProps,
+  type TabProps,
   TabsProvider,
   useTabsContextValue,
 } from "@theme/utils/tabsUtils";
 
-function TabList({
-  className,
-  block,
+function TabContent({
+  lazy,
+  children,
   selectedValue,
-  selectValue,
-  tabValues,
 }: TabProps & ReturnType<typeof useTabsContextValue>) {
-  const tabRefs: (HTMLLIElement | null)[] = [];
-  const { blockElementScrollPositionUntilNextRender } =
-    useScrollPositionBlocker();
-
-  const handleTabChange = (
-    event:
-      | React.FocusEvent<HTMLLIElement>
-      | React.MouseEvent<HTMLLIElement>
-      | React.KeyboardEvent<HTMLLIElement>
-  ) => {
-    const newTab = event.currentTarget;
-    const newTabIndex = tabRefs.indexOf(newTab);
-    const newTabValue = tabValues[newTabIndex]!.value;
-
-    if (newTabValue !== selectedValue) {
-      blockElementScrollPositionUntilNextRender(newTab);
-      selectValue(newTabValue);
-    }
-  };
-
-  const handleKeydown = (event: React.KeyboardEvent<HTMLLIElement>) => {
-    let focusElement = null;
-
-    switch (event.key) {
-      case "Enter": {
-        handleTabChange(event);
-        break;
-      }
-      case "ArrowRight": {
-        const nextTab = tabRefs.indexOf(event.currentTarget) + 1;
-        focusElement = tabRefs[nextTab] ?? tabRefs[0]!;
-        break;
-      }
-      case "ArrowLeft": {
-        const prevTab = tabRefs.indexOf(event.currentTarget) - 1;
-        focusElement = tabRefs[prevTab] ?? tabRefs[tabRefs.length - 1]!;
-        break;
-      }
-      default:
-        break;
-    }
-
-    focusElement?.focus();
-  };
-
-  const tabItemListContainerRef = useRef<HTMLUListElement>(null);
-  const [showTabArrows, setShowTabArrows] = useState<boolean>(false);
-
-  useEffect(() => {
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (let entry of entries) {
-        requestAnimationFrame(() => {
-          if (entry.target.clientWidth < entry.target.scrollWidth) {
-            setShowTabArrows(true);
-          } else {
-            setShowTabArrows(false);
-          }
-        });
-      }
-    });
-
-    resizeObserver.observe(tabItemListContainerRef.current!);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, []);
-
-  const handleRightClick = () => {
-    tabItemListContainerRef.current!.scrollLeft += 90;
-  };
+  const childTabs = flatten(
+    (Array.isArray(children) ? children : [children]).filter(Boolean)
+  ) as ReactElement<TabItemProps>[];
 
-  const handleLeftClick = () => {
-    tabItemListContainerRef.current!.scrollLeft -= 90;
-  };
+  if (!lazy) return <div className="margin-top--md">{childTabs}</div>;
 
-  return (
-    <div className="openapi-tabs__discriminator-top-section">
-      <div className="openapi-tabs__discriminator-container">
-        {showTabArrows && (
-          <button
-            className="openapi-tabs__arrow left"
-            onClick={handleLeftClick}
-          />
-        )}
-        <ul
-          ref={tabItemListContainerRef}
-          role="tablist"
-          aria-orientation="horizontal"
-          className={clsx(
-            "openapi-tabs__discriminator-list-container",
-            "tabs",
-            {
-              "tabs--block": block,
-            },
-            className
-          )}
-        >
-          {tabValues.map(({ value, label, attributes }) => (
-            <li
-              // TODO extract TabListItem
-              role="tab"
-              tabIndex={selectedValue === value ? 0 : -1}
-              aria-selected={selectedValue === value}
-              key={value}
-              ref={(tabControl) => {
-                tabRefs.push(tabControl);
-              }}
-              onKeyDown={handleKeydown}
-              onClick={handleTabChange}
-              {...attributes}
-              className={clsx(
-                "tabs__item",
-                "openapi-tabs__discriminator-item",
-                attributes?.className as string,
-                {
-                  active: selectedValue === value,
-                }
-              )}
-            >
-              <span className="openapi-tabs__discriminator-tab-label">
-                {label ?? value}
-              </span>
-            </li>
-          ))}
-        </ul>
-        {showTabArrows && (
-          <button
-            className="openapi-tabs__arrow right"
-            onClick={handleRightClick}
-          />
-        )}
-      </div>
-    </div>
+  const selectedTab = childTabs.find(
+    (tab) => tab.props.value === selectedValue
   );
+  return selectedTab
+    ? cloneElement(selectedTab, { className: "margin-top--md" })
+    : null;
 }
 
-function TabContent({
-  lazy,
-  children,
-  selectedValue,
-}: TabProps &
-  ReturnType<typeof useTabsContextValue>): React.JSX.Element | null {
-  const childTabs = (Array.isArray(children) ? children : [children]).filter(
-    Boolean
-  ) as ReactElement<TabItemProps>[];
-  const flattenedChildTabs = flatten(childTabs);
-  if (lazy) {
-    const selectedTabItem = flattenedChildTabs.find(
-      (tabItem) => tabItem.props.value === selectedValue
-    );
-    if (!selectedTabItem) {
-      // fail-safe or fail-fast? not sure what's best here
-      return null;
-    }
-    return cloneElement(selectedTabItem, { className: "margin-top--md" });
-  }
-  return <div className="margin-top--md">{childTabs}</div>;
-}
 function TabsComponent(props: TabProps): React.JSX.Element {
   const tabs = useTabsContextValue(props);
   return (
     <TabsProvider value={tabs}>
-      <div className="openapi-tabs__container">
-        <TabList {...props} {...tabs} />
+      <div className="tabs-container">
+        <OpenApiTabList
+          values={tabs.tabValues}
+          value={tabs.selectedValue}
+          onValueChange={tabs.selectValue}
+          className={props.className}
+          block={props.block}
+        />
         <TabContent {...props} {...tabs} />
       </div>
     </TabsProvider>
   );
 }
-export default function DiscriminatorTabs(props: TabProps): React.JSX.Element {
-  const isBrowser = useIsBrowser();
-
-  if (
-    !props.children ||
-    (Array.isArray(props.children) && props.children.length === 0)
-  )
-    return <React.Fragment />;
 
+export default function DiscriminatorTabs(props: TabProps) {
+  const isBrowser = useIsBrowser();
   return (
-    <TabsComponent
-      // Remount tabs after hydration
-      // Temporary fix for https://github.com/facebook/docusaurus/issues/5653
-      key={String(isBrowser)}
-      {...props}
-    >
+    <TabsComponent key={String(isBrowser)} {...props}>
       {sanitizeTabsChildren(props.children)}
     </TabsComponent>
   );
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/Example/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/Example/index.tsx
index 63ced4c06..5b8da7301 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/Example/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/Example/index.tsx
@@ -10,7 +10,8 @@ import React from "react";
 import { translate } from "@docusaurus/Translate";
 import { ExampleObject } from "@theme/ParamsItem";
 import SchemaTabs from "@theme/SchemaTabs";
-import TabItem from "@theme/TabItem";
+import TabItem from "@theme/ApiTabItem";
+import { ValueBadge } from "@theme/components/value-badge";
 
 const EXAMPLE_CLASS_NAME = "openapi-example";
 const EXAMPLES_CLASS_NAME = "openapi-examples";
@@ -62,7 +63,7 @@ const renderExample = (example: ExampleType) => {
         })}{" "}
       </strong>
       <span>
-        <code>{formatExample(example)}</code>
+        <ValueBadge>{formatExample(example)}</ValueBadge>
       </span>
     </div>
   );
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/Markdown/Details/_Details.scss b/packages/docusaurus-theme-openapi-docs/src/theme/Markdown/Details/_Details.scss
index 96e992073..1492c3c98 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/Markdown/Details/_Details.scss
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/Markdown/Details/_Details.scss
@@ -21,38 +21,37 @@
 }
 /* End of Top-Level Details Styling */
 
-/* Top-Level Details Caret Styling */
-.openapi-left-panel__container > .openapi-markdown__details > summary::before,
-.openapi-markdown__details.mime > summary::before {
-  top: 0.1rem;
-}
-
-.openapi-markdown__details.response > summary::before {
-  top: 0.25rem; /* TODO: figure out why this is necessary */
-}
-/* End of Top-Level Details Caret Styling */
-
 .openapi-markdown__details {
   margin: unset !important;
-  background-color: transparent;
+  background-color: transparent !important;
   color: var(--ifm-font-color-base);
   padding: unset;
   border: unset !important;
-  box-shadow: unset !important;
+  box-shadow: none;
   --docusaurus-details-decoration-color: var(--ifm-font-color-base) !important;
 }
 
-.openapi-markdown__details > summary::before {
-  content: "";
-  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>')
-    50% / 1.2rem 1.2rem;
-  filter: var(--ifm-menu-link-sublist-icon-filter);
-  height: 0.75rem;
-  transform: rotate(90deg) !important;
-  width: 0.75rem;
-  transition: transform var(--ifm-transition-fast) linear !important;
-  border: none !important;
-  transform-origin: unset !important;
+.theme-details-summary {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  list-style: none;
+}
+
+.theme-details-summary::before {
+  display: none !important;
+}
+
+.theme-details-chevron {
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
+  color: var(--muted-foreground);
+  transition: transform 150ms ease;
+}
+
+.theme-details[open] > .theme-details-summary .theme-details-chevron {
+  transform: rotate(90deg);
 }
 
 .openapi-markdown__details ul {
@@ -65,10 +64,6 @@
   padding-top: 5px;
 }
 
-.theme-api-markdown details[data-collapsed="false"] > summary::before {
-  transform: rotate(180deg) !important;
-}
-
 .openapi-markdown__details > div > div {
   padding-top: unset !important;
   border-top: unset !important;
@@ -94,8 +89,8 @@ details summary::-webkit-details-marker {
   color: var(--ifm-font-color-base);
   padding: unset;
   border: thin solid var(--ifm-toc-border-color);
-  border-radius: var(--ifm-pre-border-radius);
-  box-shadow: unset !important;
+  border-radius: var(--radius);
+  box-shadow: none;
   --docusaurus-details-decoration-color: var(--ifm-font-color-base) !important;
 }
 
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/Markdown/index.js b/packages/docusaurus-theme-openapi-docs/src/theme/Markdown/index.js
index 8af1f3e7b..061ef147d 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/Markdown/index.js
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/Markdown/index.js
@@ -9,6 +9,15 @@ import React from "react";
 
 import Admonition from "@theme/Admonition";
 import CodeBlock from "@theme/CodeBlock";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/table";
+import { Badge } from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/badge";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
@@ -147,6 +156,12 @@ function Markdown({ children }) {
       remarkPlugins={[remarkGfm, remarkAdmonition]}
       components={{
         pre: (props) => <div {...props} />,
+        table: ({ node, ...props }) => <Table {...props} />,
+        thead: ({ node, ...props }) => <TableHeader {...props} />,
+        tbody: ({ node, ...props }) => <TableBody {...props} />,
+        tr: ({ node, ...props }) => <TableRow {...props} />,
+        th: ({ node, ...props }) => <TableHead {...props} />,
+        td: ({ node, ...props }) => <TableCell {...props} />,
         code({ node, inline, className, children, ...props }) {
           const match = /language-(\w+)/.exec(className || "");
           return match ? (
@@ -154,9 +169,12 @@ function Markdown({ children }) {
               {children}
             </CodeBlock>
           ) : (
-            <code className={className} {...props}>
+            <Badge
+              variant="outline"
+              render={<code className={className} {...props} />}
+            >
               {children}
-            </code>
+            </Badge>
           );
         },
         admonition: ({ node, ...props }) => {
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/MimeTabs/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/MimeTabs/index.tsx
index 0feb2bb84..d130c1364 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/MimeTabs/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/MimeTabs/index.tsx
@@ -1,213 +1,60 @@
-/* ============================================================================
- * Copyright (c) Palo Alto Networks
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * ========================================================================== */
-
-import React, {
-  cloneElement,
-  useEffect,
-  useState,
-  useRef,
-  ReactElement,
-} from "react";
+import React, { cloneElement, type ReactElement } from "react";
 
 import useIsBrowser from "@docusaurus/useIsBrowser";
 import { setAccept } from "@theme/ApiExplorer/Accept/slice";
 import { setContentType } from "@theme/ApiExplorer/ContentType/slice";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
-import { RootState } from "@theme/ApiItem/store";
-import clsx from "clsx";
+import type { RootState } from "@theme/ApiItem/store";
 
-import { useScrollPositionBlocker } from "@theme/utils/scrollUtils";
+import { OpenApiTabList } from "@theme/components/openapi-tab-list";
 import {
   sanitizeTabsChildren,
   type TabItemProps,
-  TabProps,
+  type TabProps,
   TabsProvider,
   useTabsContextValue,
 } from "@theme/utils/tabsUtils";
 
 export interface Props {
-  schemaType: any;
+  schemaType: string;
 }
 
-function TabList({
-  className,
-  block,
-  selectedValue: selectedValueProp,
+function MimeTabList({
+  schemaType,
+  selectedValue,
   selectValue,
   tabValues,
-  schemaType,
-}: Props &
-  TabProps &
-  ReturnType<typeof useTabsContextValue>): React.JSX.Element {
-  const tabRefs: (HTMLLIElement | null)[] = [];
-  const { blockElementScrollPositionUntilNextRender } =
-    useScrollPositionBlocker();
-
-  // custom
+  className,
+  block,
+}: Props & TabProps & ReturnType<typeof useTabsContextValue>) {
   const dispatch = useTypedDispatch();
-  const isRequestSchema = schemaType?.toLowerCase() === "request";
-
-  const [selectedValue, setSelectedValue] = useState(selectedValueProp);
-  const contentTypeVal = useTypedSelector(
+  const isRequest = schemaType?.toLowerCase() === "request";
+  const contentType = useTypedSelector(
     (state: RootState) => state.contentType.value
   );
-  const acceptTypeVal = useTypedSelector(
-    (state: RootState) => state.accept.value
-  );
-
-  useEffect(() => {
-    if (tabRefs.length > 1) {
-      if (isRequestSchema) {
-        setSelectedValue(contentTypeVal);
-      } else {
-        setSelectedValue(acceptTypeVal);
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [contentTypeVal, acceptTypeVal]);
-
-  const handleTabChange = (
-    event:
-      | React.FocusEvent<HTMLLIElement>
-      | React.MouseEvent<HTMLLIElement>
-      | React.KeyboardEvent<HTMLLIElement>
-  ) => {
-    event.preventDefault();
-    const newTab = event.currentTarget;
-    const newTabIndex = tabRefs.indexOf(newTab);
-    const newTabValue = tabValues[newTabIndex].value;
-    // custom
-    if (newTabValue !== selectedValue) {
-      if (isRequestSchema) {
-        dispatch(setContentType(newTabValue));
-      } else {
-        dispatch(setAccept(newTabValue));
-      }
-      blockElementScrollPositionUntilNextRender(newTab);
-      selectValue(newTabValue);
-    }
-  };
-
-  const handleKeydown = (event: React.KeyboardEvent<HTMLLIElement>) => {
-    let focusElement: HTMLLIElement | null = null;
+  const accept = useTypedSelector((state: RootState) => state.accept.value);
+  const value =
+    tabValues.length > 1 ? (isRequest ? contentType : accept) : selectedValue;
 
-    switch (event.key) {
-      case "Enter": {
-        handleTabChange(event);
-        break;
-      }
-      case "ArrowRight": {
-        const nextTab = tabRefs.indexOf(event.currentTarget) + 1;
-        focusElement = tabRefs[nextTab] ?? tabRefs[0]!;
-        break;
-      }
-      case "ArrowLeft": {
-        const prevTab = tabRefs.indexOf(event.currentTarget) - 1;
-        focusElement = tabRefs[prevTab] ?? tabRefs[tabRefs.length - 1]!;
-        break;
-      }
-      default:
-        break;
-    }
+  if (tabValues.length < 2) return null;
 
-    focusElement?.focus();
-  };
-
-  const tabItemListContainerRef = useRef<HTMLUListElement>(null);
-  const [showTabArrows, setShowTabArrows] = useState<boolean>(false);
-
-  useEffect(() => {
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (let entry of entries) {
-        requestAnimationFrame(() => {
-          if (entry.target.clientWidth < entry.target.scrollWidth) {
-            setShowTabArrows(true);
-          } else {
-            setShowTabArrows(false);
-          }
-        });
-      }
-    });
-
-    resizeObserver.observe(tabItemListContainerRef.current!);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, []);
-
-  const handleRightClick = () => {
-    tabItemListContainerRef.current!.scrollLeft += 90;
-  };
-
-  const handleLeftClick = () => {
-    tabItemListContainerRef.current!.scrollLeft -= 90;
+  const onValueChange = (nextValue: string) => {
+    dispatch(isRequest ? setContentType(nextValue) : setAccept(nextValue));
+    selectValue(nextValue);
   };
 
   return (
-    <div className="tabs__container">
-      <div className="openapi-tabs__mime-container">
-        {showTabArrows && (
-          <button
-            className={clsx("openapi-tabs__arrow", "left")}
-            onClick={handleLeftClick}
-          />
-        )}
-        <ul
-          ref={tabItemListContainerRef}
-          role="tablist"
-          aria-orientation="horizontal"
-          className={clsx(
-            "openapi-tabs__mime-list-container",
-            "tabs",
-            {
-              "tabs--block": block,
-            },
-            className
-          )}
-        >
-          {tabValues.map(({ value, label, attributes }) => {
-            return (
-              <li
-                role="tab"
-                tabIndex={selectedValue === value ? 0 : -1}
-                aria-selected={selectedValue === value}
-                key={value}
-                ref={(tabControl) => {
-                  tabRefs.push(tabControl);
-                }}
-                onKeyDown={handleKeydown}
-                onFocus={handleTabChange}
-                onClick={(e) => handleTabChange(e)}
-                {...attributes}
-                className={clsx(
-                  "tabs__item",
-                  "openapi-tabs__mime-item",
-                  attributes?.className as string,
-                  {
-                    active: selectedValue === value,
-                  }
-                )}
-              >
-                {label ?? value}
-              </li>
-            );
-          })}
-        </ul>
-        {showTabArrows && (
-          <button
-            className={clsx("openapi-tabs__arrow", "right")}
-            onClick={handleRightClick}
-          />
-        )}
-      </div>
-    </div>
+    <OpenApiTabList
+      values={tabValues}
+      value={value}
+      onValueChange={onValueChange}
+      variant="line"
+      className={className}
+      block={block}
+    />
   );
 }
+
 function TabContent({
   lazy,
   children,
@@ -216,38 +63,33 @@ function TabContent({
   const childTabs = (Array.isArray(children) ? children : [children]).filter(
     Boolean
   ) as ReactElement<TabItemProps>[];
-  if (lazy) {
-    const selectedTabItem = childTabs.find(
-      (tabItem) => tabItem.props.value === selectedValue
-    );
-    if (!selectedTabItem) {
-      // fail-safe or fail-fast? not sure what's best here
-      return null;
-    }
-    return cloneElement(selectedTabItem, { className: "margin-top--md" });
-  }
-  return <div className="margin-top--md">{childTabs}</div>;
+
+  if (!lazy) return <div className="margin-top--md">{childTabs}</div>;
+
+  const selectedTab = childTabs.find(
+    (tab) => tab.props.value === selectedValue
+  );
+  return selectedTab
+    ? cloneElement(selectedTab, { className: "margin-top--md" })
+    : null;
 }
+
 function TabsComponent(props: Props & TabProps): React.JSX.Element {
   const tabs = useTabsContextValue(props);
   return (
     <TabsProvider value={tabs}>
       <div className="tabs-container">
-        <TabList {...props} {...tabs} />
+        <MimeTabList {...props} {...tabs} />
         <TabContent {...props} {...tabs} />
       </div>
     </TabsProvider>
   );
 }
+
 export default function MimeTabs(props: Props & TabProps) {
   const isBrowser = useIsBrowser();
   return (
-    <TabsComponent
-      // Remount tabs after hydration
-      // Temporary fix for https://github.com/facebook/docusaurus/issues/5653
-      key={String(isBrowser)}
-      {...props}
-    >
+    <TabsComponent key={String(isBrowser)} {...props}>
       {sanitizeTabsChildren(props.children)}
     </TabsComponent>
   );
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/OpenApiTable/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/OpenApiTable/index.tsx
new file mode 100644
index 000000000..8a48a5754
--- /dev/null
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/OpenApiTable/index.tsx
@@ -0,0 +1,7 @@
+export {
+  Table as default,
+  TableBody as OpenApiTableBody,
+  TableCell as OpenApiTableCell,
+  TableHead as OpenApiTableHead,
+  TableRow as OpenApiTableRow,
+} from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/table";
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/OperationTabs/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/OperationTabs/index.tsx
index 731e4f1c1..88ddd23dd 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/OperationTabs/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/OperationTabs/index.tsx
@@ -1,215 +1,58 @@
-/* ============================================================================
- * Copyright (c) Palo Alto Networks
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * ========================================================================== */
-
-import React, {
-  cloneElement,
-  useEffect,
-  useState,
-  useRef,
-  ReactElement,
-} from "react";
+import React, { cloneElement, type ReactElement } from "react";
 
 import useIsBrowser from "@docusaurus/useIsBrowser";
-import clsx from "clsx";
 
-import { useScrollPositionBlocker } from "@theme/utils/scrollUtils";
+import { OpenApiTabList } from "@theme/components/openapi-tab-list";
 import {
   sanitizeTabsChildren,
   type TabItemProps,
-  TabProps,
+  type TabProps,
   TabsProvider,
   useTabsContextValue,
 } from "@theme/utils/tabsUtils";
 
-function TabList({
-  className,
-  block,
-  selectedValue,
-  selectValue,
-  tabValues,
-}: TabProps & ReturnType<typeof useTabsContextValue>) {
-  const tabRefs: (HTMLLIElement | null)[] = [];
-  const { blockElementScrollPositionUntilNextRender } =
-    useScrollPositionBlocker();
-
-  const handleTabChange = (
-    event:
-      | React.FocusEvent<HTMLLIElement>
-      | React.MouseEvent<HTMLLIElement>
-      | React.KeyboardEvent<HTMLLIElement>
-  ) => {
-    const newTab = event.currentTarget;
-    const newTabIndex = tabRefs.indexOf(newTab);
-    const newTabValue = tabValues[newTabIndex].value;
-
-    if (newTabValue !== selectedValue) {
-      blockElementScrollPositionUntilNextRender(newTab);
-      selectValue(newTabValue);
-    }
-  };
-
-  const handleKeydown = (event: React.KeyboardEvent<HTMLLIElement>) => {
-    let focusElement: HTMLLIElement | null = null;
-
-    switch (event.key) {
-      case "Enter": {
-        handleTabChange(event);
-        break;
-      }
-      case "ArrowRight": {
-        const nextTab = tabRefs.indexOf(event.currentTarget) + 1;
-        focusElement = tabRefs[nextTab] ?? tabRefs[0]!;
-        break;
-      }
-      case "ArrowLeft": {
-        const prevTab = tabRefs.indexOf(event.currentTarget) - 1;
-        focusElement = tabRefs[prevTab] ?? tabRefs[tabRefs.length - 1]!;
-        break;
-      }
-      default:
-        break;
-    }
-
-    focusElement?.focus();
-  };
-
-  const tabItemListContainerRef = useRef<HTMLUListElement>(null);
-  const [showTabArrows, setShowTabArrows] = useState<boolean>(false);
-
-  useEffect(() => {
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (let entry of entries) {
-        requestAnimationFrame(() => {
-          if (entry.target.clientWidth < entry.target.scrollWidth) {
-            setShowTabArrows(true);
-          } else {
-            setShowTabArrows(false);
-          }
-        });
-      }
-    });
-
-    resizeObserver.observe(tabItemListContainerRef.current!);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, []);
-
-  const handleRightClick = () => {
-    tabItemListContainerRef.current!.scrollLeft += 90;
-  };
-
-  const handleLeftClick = () => {
-    tabItemListContainerRef.current!.scrollLeft -= 90;
-  };
-
-  return (
-    <div className="tabs__container">
-      <div className="openapi-tabs__operation-container">
-        {showTabArrows && (
-          <button
-            className={clsx("openapi-tabs__arrow", "left")}
-            onClick={handleLeftClick}
-          />
-        )}
-        <ul
-          ref={tabItemListContainerRef}
-          role="tablist"
-          aria-orientation="horizontal"
-          className={clsx(
-            "openapi-tabs__operation-list-container",
-            "tabs",
-            {
-              "tabs--block": block,
-            },
-            className
-          )}
-        >
-          {tabValues.map(({ value, label, attributes }) => {
-            return (
-              <li
-                // TODO extract TabListItem
-                role="tab"
-                tabIndex={selectedValue === value ? 0 : -1}
-                aria-selected={selectedValue === value}
-                key={value}
-                ref={(tabControl) => {
-                  tabRefs.push(tabControl);
-                }}
-                onKeyDown={handleKeydown}
-                onFocus={handleTabChange}
-                onClick={(e) => handleTabChange(e)}
-                {...attributes}
-                className={clsx(
-                  "tabs__item",
-                  "openapi-tabs__operation-item",
-                  attributes?.className as string,
-                  {
-                    active: selectedValue === value,
-                  }
-                )}
-              >
-                {label ?? value}
-              </li>
-            );
-          })}
-        </ul>
-        {showTabArrows && (
-          <button
-            className={clsx("openapi-tabs__arrow", "right")}
-            onClick={handleRightClick}
-          />
-        )}
-      </div>
-    </div>
-  );
-}
 function TabContent({
   lazy,
   children,
   selectedValue,
-}: TabProps &
-  ReturnType<typeof useTabsContextValue>): React.JSX.Element | null {
+}: TabProps & ReturnType<typeof useTabsContextValue>) {
   const childTabs = (Array.isArray(children) ? children : [children]).filter(
     Boolean
   ) as ReactElement<TabItemProps>[];
-  if (lazy) {
-    const selectedTabItem = childTabs.find(
-      (tabItem) => tabItem.props.value === selectedValue
-    );
-    if (!selectedTabItem) {
-      // fail-safe or fail-fast? not sure what's best here
-      return null;
-    }
-    return cloneElement(selectedTabItem, { className: "margin-top--md" });
-  }
-  return <div className="margin-top--md">{childTabs}</div>;
+
+  if (!lazy) return <div className="margin-top--md">{childTabs}</div>;
+
+  const selectedTab = childTabs.find(
+    (tab) => tab.props.value === selectedValue
+  );
+  return selectedTab
+    ? cloneElement(selectedTab, { className: "margin-top--md" })
+    : null;
 }
+
 function TabsComponent(props: TabProps): React.JSX.Element {
   const tabs = useTabsContextValue(props);
+
   return (
     <TabsProvider value={tabs}>
       <div className="tabs-container">
-        <TabList {...props} {...tabs} />
+        <OpenApiTabList
+          values={tabs.tabValues}
+          value={tabs.selectedValue}
+          onValueChange={tabs.selectValue}
+          className={props.className}
+          block={props.block}
+        />
         <TabContent {...props} {...tabs} />
       </div>
     </TabsProvider>
   );
 }
-export default function OperationTabs(props: TabProps): React.JSX.Element {
+
+export default function OperationTabs(props: TabProps) {
   const isBrowser = useIsBrowser();
   return (
-    <TabsComponent
-      // Remount tabs after hydration
-      // Temporary fix for https://github.com/facebook/docusaurus/issues/5653
-      key={String(isBrowser)}
-      {...props}
-    >
+    <TabsComponent key={String(isBrowser)} {...props}>
       {sanitizeTabsChildren(props.children)}
     </TabsComponent>
   );
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ParamsDetails/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ParamsDetails/index.tsx
index ddfe20762..cb6dd8007 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ParamsDetails/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ParamsDetails/index.tsx
@@ -9,7 +9,7 @@ import React from "react";
 
 import BrowserOnly from "@docusaurus/BrowserOnly";
 import { translate } from "@docusaurus/Translate";
-import Details from "@theme/Details";
+import Details from "@aeei/docusaurus-theme/lib-theme/theme/Details";
 import ParamsItem from "@theme/ParamsItem";
 import SkeletonLoader from "@theme/SkeletonLoader";
 
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ParamsItem/_ParamsItem.scss b/packages/docusaurus-theme-openapi-docs/src/theme/ParamsItem/_ParamsItem.scss
index c5c67eb8b..f6fbfd475 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ParamsItem/_ParamsItem.scss
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ParamsItem/_ParamsItem.scss
@@ -2,7 +2,7 @@
   margin: 0 0 0 1rem !important;
   position: relative;
   padding-left: 1rem;
-  border-left: thin solid var(--openapi-tree-line-color) !important;
+  border-left: thin solid var(--border) !important;
   margin-top: unset !important;
 
   // Horizonal line styling for param attributes
@@ -15,7 +15,7 @@
     height: 0.5rem;
     /* vertical position of line */
     vertical-align: top;
-    border-bottom: thin solid var(--openapi-tree-line-color);
+    border-bottom: thin solid var(--border);
     content: "";
     display: inline-block;
   }
@@ -37,7 +37,7 @@
   align-items: center;
   font-size: 10.5px;
   font-weight: bold;
-  color: var(--openapi-required);
+  color: var(--destructive);
   margin-left: 1%;
   background-color: transparent;
   text-transform: uppercase;
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ParamsItem/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ParamsItem/index.tsx
index e24753738..60a01396a 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ParamsItem/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ParamsItem/index.tsx
@@ -10,6 +10,8 @@ import React from "react";
 import { translate } from "@docusaurus/Translate";
 import { Example } from "@theme/Example";
 import Markdown from "@theme/Markdown";
+import { SchemaStatusBadge } from "@theme/components/schema-status-badge";
+import { ValueBadge } from "@theme/components/value-badge";
 /* eslint-disable import/no-extraneous-dependencies*/
 import clsx from "clsx";
 
@@ -60,7 +62,7 @@ ${enumDescriptions
   return "";
 };
 
-function ParamsItem({ param, ...rest }: Props) {
+function ParamsItem({ param }: Props) {
   const { description, name, required, deprecated, enumDescriptions } = param;
 
   let schema = param.schema;
@@ -90,21 +92,21 @@ function ParamsItem({ param, ...rest }: Props) {
   ));
 
   const renderSchemaRequired = guard(required, () => (
-    <span className="openapi-schema__required">
+    <SchemaStatusBadge status="required">
       {translate({
         id: "theme.openapi.schemaItem.required",
         message: "required",
       })}
-    </span>
+    </SchemaStatusBadge>
   ));
 
   const renderDeprecated = guard(deprecated, () => (
-    <span className="openapi-schema__deprecated">
+    <SchemaStatusBadge status="deprecated">
       {translate({
         id: "theme.openapi.schemaItem.deprecated",
         message: "deprecated",
       })}
-    </span>
+    </SchemaStatusBadge>
   ));
 
   const constValue = schema?.const;
@@ -162,7 +164,7 @@ function ParamsItem({ param, ...rest }: Props) {
               })}{" "}
             </strong>
             <span>
-              <code>{defaultValue}</code>
+              <ValueBadge>{defaultValue}</ValueBadge>
             </span>
           </div>
         );
@@ -176,7 +178,7 @@ function ParamsItem({ param, ...rest }: Props) {
             })}{" "}
           </strong>
           <span>
-            <code>{JSON.stringify(defaultValue)}</code>
+            <ValueBadge>{JSON.stringify(defaultValue)}</ValueBadge>
           </span>
         </div>
       );
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/RequestSchema/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/RequestSchema/index.tsx
index f045101a6..fb149626d 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/RequestSchema/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/RequestSchema/index.tsx
@@ -9,7 +9,8 @@ import React from "react";
 
 import BrowserOnly from "@docusaurus/BrowserOnly";
 import { translate } from "@docusaurus/Translate";
-import Details from "@theme/Details";
+import Details from "@aeei/docusaurus-theme/lib-theme/theme/Details";
+import { SchemaStatusBadge } from "@theme/components/schema-status-badge";
 import Markdown from "@theme/Markdown";
 import MimeTabs from "@theme/MimeTabs"; // Assume these components exist
 import {
@@ -21,7 +22,7 @@ import SchemaNode from "@theme/Schema";
 import SchemaExpansionControl from "@theme/SchemaExpansion";
 import SchemaTabs from "@theme/SchemaTabs";
 import SkeletonLoader from "@theme/SkeletonLoader";
-import TabItem from "@theme/TabItem";
+import TabItem from "@theme/ApiTabItem";
 import type { MediaTypeObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
 
 interface Props {
@@ -76,6 +77,7 @@ const RequestSchemaComponent: React.FC<Props> = ({ title, body, style }) => {
                       data-collapsed={false}
                       open={true}
                       style={style}
+                      summaryAction={<SchemaExpansionControl />}
                       summary={
                         <summary className="openapi-markdown__details-summary--with-control">
                           <h3 className="openapi-markdown__details-summary-header-body">
@@ -84,15 +86,14 @@ const RequestSchemaComponent: React.FC<Props> = ({ title, body, style }) => {
                               message: title,
                             })}
                             {body.required === true && (
-                              <span className="openapi-schema__required">
+                              <SchemaStatusBadge status="required">
                                 {translate({
                                   id: "theme.openapi.schemaItem.required",
                                   message: "required",
                                 })}
-                              </span>
+                              </SchemaStatusBadge>
                             )}
                           </h3>
-                          <SchemaExpansionControl />
                         </summary>
                       }
                     >
@@ -162,6 +163,7 @@ const RequestSchemaComponent: React.FC<Props> = ({ title, body, style }) => {
               data-collapsed={false}
               open={true}
               style={style}
+              summaryAction={<SchemaExpansionControl />}
               summary={
                 <summary className="openapi-markdown__details-summary--with-control">
                   <h3 className="openapi-markdown__details-summary-header-body">
@@ -173,15 +175,14 @@ const RequestSchemaComponent: React.FC<Props> = ({ title, body, style }) => {
                       <span style={{ opacity: "0.6" }}> array</span>
                     )}
                     {body.required && (
-                      <strong className="openapi-schema__required">
+                      <SchemaStatusBadge status="required">
                         {translate({
                           id: "theme.openapi.schemaItem.required",
                           message: "required",
                         })}
-                      </strong>
+                      </SchemaStatusBadge>
                     )}
                   </h3>
-                  <SchemaExpansionControl />
                 </summary>
               }
             >
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ResponseExamples/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ResponseExamples/index.tsx
index 482738899..dc8e86656 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ResponseExamples/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ResponseExamples/index.tsx
@@ -10,7 +10,7 @@ import React from "react";
 import { translate } from "@docusaurus/Translate";
 import CodeSamples from "@theme/CodeSamples";
 import Markdown from "@theme/Markdown";
-import TabItem from "@theme/TabItem";
+import TabItem from "@theme/ApiTabItem";
 import { sampleResponseFromSchema } from "docusaurus-plugin-openapi-docs/lib/openapi/createResponseExample";
 import format from "xml-formatter";
 
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ResponseSchema/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ResponseSchema/index.tsx
index 809e1e602..4bfba6d67 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ResponseSchema/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/ResponseSchema/index.tsx
@@ -9,7 +9,8 @@ import React from "react";
 
 import BrowserOnly from "@docusaurus/BrowserOnly";
 import { translate } from "@docusaurus/Translate";
-import Details from "@theme/Details";
+import Details from "@aeei/docusaurus-theme/lib-theme/theme/Details";
+import { SchemaStatusBadge } from "@theme/components/schema-status-badge";
 import Markdown from "@theme/Markdown";
 import MimeTabs from "@theme/MimeTabs"; // Assume these components exist
 import {
@@ -21,7 +22,7 @@ import SchemaNode from "@theme/Schema";
 import SchemaExpansionControl from "@theme/SchemaExpansion";
 import SchemaTabs from "@theme/SchemaTabs";
 import SkeletonLoader from "@theme/SkeletonLoader";
-import TabItem from "@theme/TabItem";
+import TabItem from "@theme/ApiTabItem";
 import type { MediaTypeObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
 
 interface Props {
@@ -90,20 +91,20 @@ const ResponseSchemaComponent: React.FC<Props> = ({
                     data-collapsed={false}
                     open={true}
                     style={style}
+                    summaryAction={<SchemaExpansionControl />}
                     summary={
                       <summary className="openapi-markdown__details-summary--with-control">
                         <strong className="openapi-markdown__details-summary-response">
                           {title}
                           {body.required === true && (
-                            <span className="openapi-schema__required">
+                            <SchemaStatusBadge status="required">
                               {translate({
                                 id: "theme.openapi.schemaItem.required",
                                 message: "required",
                               })}
-                            </span>
+                            </SchemaStatusBadge>
                           )}
                         </strong>
-                        <SchemaExpansionControl />
                       </summary>
                     }
                   >
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/Schema/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/Schema/index.tsx
index 40bcf3d15..448438d12 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/Schema/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/Schema/index.tsx
@@ -11,8 +11,9 @@ import { translate } from "@docusaurus/Translate";
 import { setSchemaSelection } from "@theme/ApiExplorer/SchemaSelection/slice";
 import { useTypedDispatch } from "@theme/ApiItem/hooks";
 import { ClosingArrayBracket, OpeningArrayBracket } from "@theme/ArrayBrackets";
-import Details from "@theme/Details";
-import DiscriminatorTabs from "@theme/DiscriminatorTabs";
+import Details from "@aeei/docusaurus-theme/lib-theme/theme/Details";
+import { Badge } from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/badge";
+import { SchemaStatusBadge } from "@theme/components/schema-status-badge";
 import Markdown from "@theme/Markdown";
 import {
   findPropertyDeep,
@@ -29,7 +30,7 @@ import {
 } from "@theme/SchemaExpansion";
 import SchemaItem from "@theme/SchemaItem";
 import SchemaTabs from "@theme/SchemaTabs";
-import TabItem from "@theme/TabItem";
+import TabItem from "@theme/ApiTabItem";
 import clsx from "clsx";
 import isEmpty from "lodash/isEmpty";
 
@@ -86,28 +87,28 @@ const Summary: React.FC<SummaryProps> = ({
           <span className="openapi-schema__divider" />
         )}
         {nullable && (
-          <span className="openapi-schema__nullable">
+          <SchemaStatusBadge status="nullable">
             {translate({
               id: "theme.openapi.schemaItem.nullable",
               message: "nullable",
             })}
-          </span>
+          </SchemaStatusBadge>
         )}
         {isRequired && (
-          <span className="openapi-schema__required">
+          <SchemaStatusBadge status="required">
             {translate({
               id: "theme.openapi.schemaItem.required",
               message: "required",
             })}
-          </span>
+          </SchemaStatusBadge>
         )}
         {deprecated && (
-          <span className="openapi-schema__deprecated">
+          <SchemaStatusBadge status="deprecated">
             {translate({
               id: "theme.openapi.schemaItem.deprecated",
               message: "deprecated",
             })}
-          </span>
+          </SchemaStatusBadge>
         )}
       </span>
     </summary>
@@ -172,9 +173,12 @@ const AnyOneOf: React.FC<SchemaProps> = ({
 
   return (
     <>
-      <span className="badge badge--info" style={{ marginBottom: "1rem" }}>
+      <Badge
+        variant="outline"
+        className="mb-4 border-info/30 bg-info/10 text-info"
+      >
         {type}
-      </span>
+      </Badge>
       <SchemaTabs
         groupId={`schema-${uniqueId}`}
         lazy
@@ -236,7 +240,6 @@ const AnyOneOf: React.FC<SchemaProps> = ({
               {/* Handle empty object as a primitive type */}
               {anyOneSchema.type === "object" &&
                 !anyOneSchema.properties &&
-                !anyOneSchema.additionalProperties &&
                 !anyOneSchema.allOf &&
                 !anyOneSchema.oneOf &&
                 !anyOneSchema.anyOf && (
@@ -268,17 +271,6 @@ const AnyOneOf: React.FC<SchemaProps> = ({
                     schemaPath={childSchemaPath}
                   />
                 )}
-              {/* Render a map variant's `additionalProperties` */}
-              {(anyOneSchema.type === "object" || !anyOneSchema.type) &&
-                anyOneSchema.additionalProperties &&
-                !anyOneSchema.oneOf &&
-                !anyOneSchema.anyOf &&
-                !anyOneSchema.allOf && (
-                  <AdditionalProperties
-                    schema={anyOneSchema}
-                    schemaType={schemaType}
-                  />
-                )}
               {anyOneSchema.allOf && (
                 <SchemaNode
                   schema={anyOneSchema}
@@ -387,6 +379,11 @@ const PropertyDiscriminator: React.FC<SchemaEdgeProps> = ({
     return null;
   }
 
+  const discriminatorMappings = Object.entries(discriminator.mapping ?? {}) as [
+    string,
+    any,
+  ][];
+
   return (
     <>
       <div className="openapi-discriminator__item openapi-schema__list-item">
@@ -400,12 +397,12 @@ const PropertyDiscriminator: React.FC<SchemaEdgeProps> = ({
             )}
             {required && <span className="openapi-schema__divider"></span>}
             {required && (
-              <span className="openapi-schema__required">
+              <SchemaStatusBadge status="required">
                 {translate({
                   id: "theme.openapi.schemaItem.required",
                   message: "required",
                 })}
-              </span>
+              </SchemaStatusBadge>
             )}
           </span>
           <div style={{ marginLeft: "1rem" }}>
@@ -416,28 +413,25 @@ const PropertyDiscriminator: React.FC<SchemaEdgeProps> = ({
               <MarkdownWrapper text={getQualifierMessage(discriminator)} />
             )}
           </div>
-          <DiscriminatorTabs className="openapi-tabs__discriminator">
-            {Object.keys(discriminator.mapping).map((key, index) => (
-              // @ts-ignore
-              <TabItem
-                key={index}
-                label={key}
-                value={`${index}-item-discriminator`}
-              >
-                {discriminator.mapping[key]?.description && (
-                  <div style={{ marginLeft: "1rem" }}>
-                    <MarkdownWrapper
-                      text={discriminator.mapping[key].description}
-                    />
-                  </div>
-                )}
-                <SchemaNode
-                  schema={discriminator.mapping[key]}
-                  schemaType={schemaType}
-                />
-              </TabItem>
-            ))}
-          </DiscriminatorTabs>
+          {discriminatorMappings.length > 0 && (
+            <SchemaTabs className="openapi-tabs__discriminator">
+              {discriminatorMappings.map(([key, mappedSchema], index) => (
+                // @ts-ignore
+                <TabItem
+                  key={index}
+                  label={key}
+                  value={`${index}-item-discriminator`}
+                >
+                  {mappedSchema?.description && (
+                    <div style={{ marginLeft: "1rem" }}>
+                      <MarkdownWrapper text={mappedSchema.description} />
+                    </div>
+                  )}
+                  <SchemaNode schema={mappedSchema} schemaType={schemaType} />
+                </TabItem>
+              ))}
+            </SchemaTabs>
+          )}
         </div>
       </div>
       {schema.properties &&
@@ -1120,11 +1114,7 @@ const SchemaNode: React.FC<SchemaProps> = ({
     workingSchema = mergeAllOf(schema) as SchemaObject;
   }
   if (!workingSchema.discriminator && resolvedDiscriminator) {
-    // Clone: getDiscriminator returns a nested branch's discriminator by
-    // reference, and DiscriminatorNode mutates `.mapping` when inferring
-    // variants. Without cloning, a branch that declares its own discriminator
-    // gets a mapping pointing back to itself and recurses forever.
-    workingSchema.discriminator = { ...resolvedDiscriminator };
+    workingSchema.discriminator = resolvedDiscriminator;
   }
 
   if (workingSchema.discriminator) {
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/Schema/normalize.test.ts b/packages/docusaurus-theme-openapi-docs/src/theme/Schema/normalize.test.ts
index b35bb4ed4..779f26d8a 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/Schema/normalize.test.ts
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/Schema/normalize.test.ts
@@ -72,6 +72,15 @@ describe("mergeAllOf", () => {
     expect(result.properties.id).toBeDefined();
     expect(result.oneOf).toHaveLength(2);
   });
+
+  it("replaces dereferenced object cycles with the supported circular marker", () => {
+    const recursive: any = { title: "Node", type: "object" };
+    recursive.properties = { child: recursive };
+
+    const result = mergeAllOf({ allOf: [recursive, { description: "node" }] });
+
+    expect(result.properties.child).toBe("circular(Node)");
+  });
 });
 
 describe("foldSiblingsIntoBranches", () => {
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/Schema/normalize.ts b/packages/docusaurus-theme-openapi-docs/src/theme/Schema/normalize.ts
index 6c791bec5..27d523063 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/Schema/normalize.ts
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/Schema/normalize.ts
@@ -22,34 +22,48 @@ export function isCircularMarker(value: unknown): value is string {
  * mergeAllOf calls, causing deleted properties to reappear inside tab
  * content. Matches prod's per-call behavior.
  */
-function stripConflictingAdditionalProps(node: any): any {
-  if (Array.isArray(node)) return node.map(stripConflictingAdditionalProps);
+function stripConflictingAdditionalProps(
+  node: any,
+  ancestors = new WeakSet<object>()
+): any {
   if (!node || typeof node !== "object") return node;
+  if (ancestors.has(node)) return `circular(${node.title ?? ""})`;
+
+  ancestors.add(node);
+  try {
+    if (Array.isArray(node)) {
+      return node.map((value) =>
+        stripConflictingAdditionalProps(value, ancestors)
+      );
+    }
 
-  let working: any = node;
-  if (Array.isArray(node.allOf) && node.allOf.length > 1) {
-    const hasStrictMember = node.allOf.some(
-      (m: any) => m && m.additionalProperties === false
-    );
-    if (hasStrictMember) {
-      working = {
-        ...node,
-        allOf: node.allOf.map((m: any) => {
-          if (m && m.additionalProperties === false) {
-            const { additionalProperties: _drop, ...rest } = m;
-            return rest;
-          }
-          return m;
-        }),
-      };
+    let working: any = node;
+    if (Array.isArray(node.allOf) && node.allOf.length > 1) {
+      const hasStrictMember = node.allOf.some(
+        (member: any) => member && member.additionalProperties === false
+      );
+      if (hasStrictMember) {
+        working = {
+          ...node,
+          allOf: node.allOf.map((member: any) => {
+            if (member && member.additionalProperties === false) {
+              const { additionalProperties: _drop, ...rest } = member;
+              return rest;
+            }
+            return member;
+          }),
+        };
+      }
     }
-  }
 
-  const result: any = {};
-  for (const [k, v] of Object.entries(working)) {
-    result[k] = stripConflictingAdditionalProps(v);
+    const result: any = {};
+    for (const [key, value] of Object.entries(working)) {
+      result[key] = stripConflictingAdditionalProps(value, ancestors);
+    }
+    return result;
+  } finally {
+    ancestors.delete(node);
   }
-  return result;
 }
 
 export function mergeAllOf(schema: any): any {
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/SchemaExpansion/_SchemaExpansion.scss b/packages/docusaurus-theme-openapi-docs/src/theme/SchemaExpansion/_SchemaExpansion.scss
index baa7c643a..164ab1645 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/SchemaExpansion/_SchemaExpansion.scss
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/SchemaExpansion/_SchemaExpansion.scss
@@ -16,7 +16,7 @@
   appearance: none;
   background: transparent;
   border: none;
-  border-radius: var(--ifm-global-radius);
+  border-radius: var(--radius);
   padding: 0;
   width: 22px;
   height: 22px;
@@ -60,8 +60,8 @@
   padding: 3px;
   background-color: var(--ifm-background-surface-color);
   border: 1px solid var(--ifm-color-emphasis-300);
-  border-radius: var(--ifm-global-radius);
-  box-shadow: var(--ifm-global-shadow-md);
+  border-radius: var(--radius);
+  box-shadow: none;
   white-space: nowrap;
 }
 
@@ -69,7 +69,7 @@
   appearance: none;
   background: transparent;
   border: none;
-  border-radius: calc(var(--ifm-global-radius) - 2px);
+  border-radius: var(--radius);
   padding: 2px 8px;
   font-size: 0.8rem;
   line-height: 1.4;
@@ -90,7 +90,7 @@
 
 .openapi-schema-expansion__option--active {
   background-color: var(--ifm-color-primary);
-  color: var(--ifm-color-white);
+  color: var(--primary-foreground);
 
   &:hover {
     background-color: var(--ifm-color-primary-dark);
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/SchemaExpansion/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/SchemaExpansion/index.tsx
index d008bb07a..8f008d98a 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/SchemaExpansion/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/SchemaExpansion/index.tsx
@@ -1,22 +1,16 @@
-/* ============================================================================
- * Copyright (c) Palo Alto Networks
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * ========================================================================== */
-
-import React, {
-  useCallback,
-  useEffect,
-  useId,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { useMemo } from "react";
 
 import { translate } from "@docusaurus/Translate";
-import clsx from "clsx";
+import { ListTree } from "lucide-react";
+
+import { Button } from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/dropdown-menu";
 
 import { useSchemaExpansion } from "./context";
 
@@ -31,206 +25,68 @@ export {
 
 const ALL_VALUE = Number.POSITIVE_INFINITY;
 
-const ExpandIcon: React.FC = () => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    width="14"
-    height="14"
-    viewBox="0 0 16 16"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.6"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  >
-    <polyline points="4 6 8 2 12 6" />
-    <polyline points="4 10 8 14 12 10" />
-  </svg>
-);
-
-const SchemaExpansionControl: React.FC = () => {
+export default function SchemaExpansionControl(): React.JSX.Element | null {
   const { config, level, setLevel } = useSchemaExpansion();
-  const [open, setOpen] = useState(false);
-  const [coords, setCoords] = useState<{ top: number; right: number } | null>(
-    null
+  const options = useMemo(
+    () => [
+      ...Array.from({ length: config.max + 1 }, (_, index) => index),
+      ALL_VALUE,
+    ],
+    [config.max]
   );
-  const buttonRef = useRef<HTMLButtonElement | null>(null);
-  const popoverRef = useRef<HTMLDivElement | null>(null);
-  const optionRefs = useRef<Array<HTMLButtonElement | null>>([]);
-  const popoverId = useId();
-
-  const options = useMemo(() => {
-    const numbers = Array.from({ length: config.max + 1 }, (_, i) => i);
-    return [...numbers, ALL_VALUE];
-  }, [config.max]);
-
-  const activeIndex = useMemo(() => {
-    const idx = options.indexOf(level);
-    return idx >= 0 ? idx : 0;
-  }, [options, level]);
-
-  const updatePosition = useCallback(() => {
-    if (!buttonRef.current || typeof window === "undefined") return;
-    const rect = buttonRef.current.getBoundingClientRect();
-    setCoords({
-      top: rect.bottom + 4,
-      right: window.innerWidth - rect.right,
-    });
-  }, []);
-
-  useLayoutEffect(() => {
-    if (!open) return;
-    updatePosition();
-    const handleScroll = () => setOpen(false);
-    window.addEventListener("scroll", handleScroll, true);
-    window.addEventListener("resize", updatePosition);
-    return () => {
-      window.removeEventListener("scroll", handleScroll, true);
-      window.removeEventListener("resize", updatePosition);
-    };
-  }, [open, updatePosition]);
-
-  useEffect(() => {
-    if (!open) return;
-    optionRefs.current[activeIndex]?.focus();
-  }, [open, activeIndex]);
-
-  useEffect(() => {
-    if (!open) return;
-    const handlePointer = (event: MouseEvent) => {
-      const target = event.target as Node;
-      if (buttonRef.current?.contains(target)) return;
-      if (popoverRef.current?.contains(target)) return;
-      setOpen(false);
-    };
-    const handleKey = (event: KeyboardEvent) => {
-      if (event.key === "Escape") {
-        event.stopPropagation();
-        setOpen(false);
-        buttonRef.current?.focus();
-      }
-    };
-    document.addEventListener("mousedown", handlePointer);
-    document.addEventListener("keydown", handleKey);
-    return () => {
-      document.removeEventListener("mousedown", handlePointer);
-      document.removeEventListener("keydown", handleKey);
-    };
-  }, [open]);
-
-  const choose = useCallback(
-    (next: number) => {
-      setLevel(next);
-      setOpen(false);
-      buttonRef.current?.focus();
-    },
-    [setLevel]
-  );
-
-  const onMenuKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (event.key !== "ArrowRight" && event.key !== "ArrowLeft") return;
-    event.preventDefault();
-    const current = optionRefs.current.findIndex(
-      (el) => el === document.activeElement
-    );
-    if (current < 0) return;
-    const next =
-      event.key === "ArrowRight"
-        ? (current + 1) % options.length
-        : (current - 1 + options.length) % options.length;
-    optionRefs.current[next]?.focus();
-  };
 
   if (!config.enabled) return null;
 
   const buttonLabel = translate({
     id: "theme.openapi.schema.expansion.button",
     message: "Schema expansion depth",
-    description: "Aria/title tooltip for the schema expansion icon button",
-  });
-  const menuLabel = translate({
-    id: "theme.openapi.schema.expansion.menu",
-    message: "Schema expansion depth options",
-    description: "Accessible label for the expansion options menu",
+    description: "Accessible label for the schema expansion menu.",
   });
   const allLabel = translate({
     id: "theme.openapi.schema.expansion.all",
     message: "All",
-    description: "Label for the expand-all option",
+    description: "Label for the expand-all option.",
   });
 
   return (
-    <span className="openapi-schema-expansion">
-      <button
-        ref={buttonRef}
-        type="button"
-        className="openapi-schema-expansion__trigger"
-        aria-haspopup="menu"
-        aria-expanded={open}
-        aria-controls={open ? popoverId : undefined}
-        aria-label={buttonLabel}
-        title={buttonLabel}
-        onClick={(event) => {
-          event.preventDefault();
-          event.stopPropagation();
-          setOpen((prev) => !prev);
-        }}
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            aria-label={buttonLabel}
+            title={buttonLabel}
+            onClick={(event) => event.stopPropagation()}
+          />
+        }
+      >
+        <ListTree aria-hidden="true" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        onClick={(event) => event.stopPropagation()}
       >
-        <ExpandIcon />
-      </button>
-      {open && coords && (
-        <div
-          ref={popoverRef}
-          id={popoverId}
-          role="menu"
-          aria-label={menuLabel}
-          className="openapi-schema-expansion__popover"
-          style={{ top: coords.top, right: coords.right }}
-          onKeyDown={onMenuKeyDown}
-          onClick={(event) => {
-            event.preventDefault();
-            event.stopPropagation();
-          }}
+        <DropdownMenuRadioGroup
+          value={level === ALL_VALUE ? "all" : String(level)}
+          onValueChange={(value) =>
+            setLevel(value === "all" ? ALL_VALUE : Number(value))
+          }
         >
-          {options.map((value, index) => {
+          {options.map((value) => {
             const isAll = value === ALL_VALUE;
-            const label = isAll ? allLabel : String(value);
-            const optionAriaLabel = isAll
-              ? allLabel
-              : translate(
-                  {
-                    id: "theme.openapi.schema.expansion.depthOption",
-                    message: "Expand to depth {depth}",
-                    description: "Accessible label for a depth option",
-                  },
-                  { depth: value }
-                );
-            const isActive = level === value;
             return (
-              <button
+              <DropdownMenuRadioItem
                 key={isAll ? "all" : value}
-                ref={(el) => {
-                  optionRefs.current[index] = el;
-                }}
-                type="button"
-                role="menuitemradio"
-                aria-checked={isActive}
-                aria-label={optionAriaLabel}
-                tabIndex={index === activeIndex ? 0 : -1}
-                className={clsx("openapi-schema-expansion__option", {
-                  "openapi-schema-expansion__option--active": isActive,
-                })}
-                onClick={() => choose(value)}
+                value={isAll ? "all" : String(value)}
               >
-                {label}
-              </button>
+                {isAll ? allLabel : value}
+              </DropdownMenuRadioItem>
             );
           })}
-        </div>
-      )}
-    </span>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
-};
-
-export default SchemaExpansionControl;
+}
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/SchemaItem/_SchemaItem.scss b/packages/docusaurus-theme-openapi-docs/src/theme/SchemaItem/_SchemaItem.scss
index e5bd389ea..a255a7001 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/SchemaItem/_SchemaItem.scss
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/SchemaItem/_SchemaItem.scss
@@ -11,7 +11,7 @@
   position: relative;
   margin: 0 !important;
   padding: 5px 0 5px 1rem;
-  border-left: thin solid var(--openapi-tree-line-color) !important;
+  border-left: thin solid var(--border) !important;
 
   // Horizontal line styling for schema properties
   &::before {
@@ -23,7 +23,7 @@
     height: 0.5rem;
     /* vertical position of line */
     vertical-align: top;
-    border-bottom: thin solid var(--openapi-tree-line-color);
+    border-bottom: thin solid var(--border);
     content: "";
     display: inline-block;
   }
@@ -40,7 +40,7 @@
   font-size: 10.5px;
   font-weight: bold;
   text-transform: uppercase;
-  color: var(--openapi-required);
+  color: var(--destructive);
   margin-left: 1%;
   background-color: transparent;
 }
@@ -51,7 +51,7 @@
   font-size: 10.5px;
   font-weight: bold;
   text-transform: uppercase;
-  color: var(--openapi-deprecated);
+  color: var(--muted-foreground);
   margin-left: 1%;
   background-color: transparent;
 }
@@ -62,7 +62,7 @@
   font-size: 10.5px;
   font-weight: bold;
   text-transform: uppercase;
-  color: var(--openapi-nullable);
+  color: var(--muted-foreground);
   margin-left: 1%;
   background-color: transparent;
 }
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/SchemaItem/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/SchemaItem/index.tsx
index 490f22cd9..637681502 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/SchemaItem/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/SchemaItem/index.tsx
@@ -10,6 +10,8 @@ import React, { ReactNode } from "react";
 import { translate } from "@docusaurus/Translate";
 import { Example } from "@theme/Example";
 import Markdown from "@theme/Markdown";
+import { SchemaStatusBadge } from "@theme/components/schema-status-badge";
+import { ValueBadge } from "@theme/components/value-badge";
 import clsx from "clsx";
 
 import { getQualifierMessage } from "../../markdown/schema";
@@ -95,31 +97,31 @@ export default function SchemaItem(props: Props) {
   const renderRequired = guard(
     Array.isArray(required) ? required.includes(name) : required,
     () => (
-      <span className="openapi-schema__required">
+      <SchemaStatusBadge status="required">
         {translate({
           id: "theme.openapi.schemaItem.required",
           message: "required",
         })}
-      </span>
+      </SchemaStatusBadge>
     )
   );
 
   const renderDeprecated = guard(deprecated, () => (
-    <span className="openapi-schema__deprecated">
+    <SchemaStatusBadge status="deprecated">
       {translate({
         id: "theme.openapi.schemaItem.deprecated",
         message: "deprecated",
       })}
-    </span>
+    </SchemaStatusBadge>
   ));
 
   const renderNullable = guard(nullable, () => (
-    <span className="openapi-schema__nullable">
+    <SchemaStatusBadge status="nullable">
       {translate({
         id: "theme.openapi.schemaItem.nullable",
         message: "nullable",
       })}
-    </span>
+    </SchemaStatusBadge>
   ));
 
   const renderEnumDescriptions = guard(
@@ -161,7 +163,7 @@ export default function SchemaItem(props: Props) {
               })}{" "}
             </strong>
             <span>
-              <code>{defaultValue}</code>
+              <ValueBadge>{defaultValue}</ValueBadge>
             </span>
           </div>
         );
@@ -175,7 +177,7 @@ export default function SchemaItem(props: Props) {
             })}{" "}
           </strong>
           <span>
-            <code>{JSON.stringify(defaultValue)}</code>
+            <ValueBadge>{JSON.stringify(defaultValue)}</ValueBadge>
           </span>
         </div>
       );
@@ -195,7 +197,7 @@ export default function SchemaItem(props: Props) {
               })}{" "}
             </strong>
             <span>
-              <code>{constValue}</code>
+              <ValueBadge>{constValue}</ValueBadge>
             </span>
           </div>
         );
@@ -209,7 +211,7 @@ export default function SchemaItem(props: Props) {
             })}{" "}
           </strong>
           <span>
-            <code>{JSON.stringify(constValue)}</code>
+            <ValueBadge>{JSON.stringify(constValue)}</ValueBadge>
           </span>
         </div>
       );
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/SchemaTabs/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/SchemaTabs/index.tsx
index 838c785de..7728db880 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/SchemaTabs/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/SchemaTabs/index.tsx
@@ -1,259 +1,91 @@
-/* ============================================================================
- * Copyright (c) Palo Alto Networks
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * ========================================================================== */
-
-import React, {
-  cloneElement,
-  useRef,
-  useEffect,
-  useState,
-  ReactElement,
-  LegacyRef,
-} from "react";
+import React, { cloneElement, type ReactElement } from "react";
 
+import BrowserOnly from "@docusaurus/BrowserOnly";
 import useIsBrowser from "@docusaurus/useIsBrowser";
-import clsx from "clsx";
 import flatten from "lodash/flatten";
 
-import { useScrollPositionBlocker } from "@theme/utils/scrollUtils";
+import { OpenApiTabList } from "@theme/components/openapi-tab-list";
 import {
   sanitizeTabsChildren,
   type TabItemProps,
-  TabProps,
+  type TabProps,
   TabsProvider,
   useTabsContextValue,
 } from "@theme/utils/tabsUtils";
 
 export interface SchemaTabsProps extends TabProps {
-  /**
-   * Optional callback fired when the selected tab changes.
-   * Receives the index of the newly selected tab.
-   */
   onChange?: (index: number) => void;
 }
 
-function TabList({
-  className,
-  block,
-  selectedValue,
-  selectValue,
-  tabValues,
-  onChange,
-}: SchemaTabsProps & ReturnType<typeof useTabsContextValue>) {
-  const tabRefs: (HTMLLIElement | null)[] = [];
-  const { blockElementScrollPositionUntilNextRender } =
-    useScrollPositionBlocker();
-
-  const handleTabChange = (
-    event:
-      | React.FocusEvent<HTMLLIElement>
-      | React.MouseEvent<HTMLLIElement>
-      | React.KeyboardEvent<HTMLLIElement>
-  ) => {
-    const newTab = event.currentTarget;
-    const newTabIndex = tabRefs.indexOf(newTab);
-    const newTabValue = tabValues[newTabIndex].value;
-
-    if (newTabValue !== selectedValue) {
-      blockElementScrollPositionUntilNextRender(newTab);
-      selectValue(newTabValue);
-      // Notify parent component of the tab change
-      onChange?.(newTabIndex);
-    }
-  };
-
-  const handleKeydown = (event: React.KeyboardEvent<HTMLLIElement>) => {
-    let focusElement: HTMLLIElement | null = null;
-
-    switch (event.key) {
-      case "Enter": {
-        handleTabChange(event);
-        break;
-      }
-      case "ArrowRight": {
-        const nextTab = tabRefs.indexOf(event.currentTarget) + 1;
-        focusElement = tabRefs[nextTab] ?? tabRefs[0]!;
-        break;
-      }
-      case "ArrowLeft": {
-        const prevTab = tabRefs.indexOf(event.currentTarget) - 1;
-        focusElement = tabRefs[prevTab] ?? tabRefs[tabRefs.length - 1]!;
-        break;
-      }
-      default:
-        break;
-    }
-
-    focusElement?.focus();
-  };
-
-  const tabItemListContainerRef = useRef<HTMLUListElement>(null);
-  const [showTabArrows, setShowTabArrows] = useState<boolean>(false);
-
-  useEffect(() => {
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (let entry of entries) {
-        requestAnimationFrame(() => {
-          if (entry.target.clientWidth < entry.target.scrollWidth) {
-            setShowTabArrows(true);
-          } else {
-            setShowTabArrows(false);
-          }
-        });
-      }
-    });
-
-    resizeObserver.observe(tabItemListContainerRef.current!);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, []);
-
-  const handleRightClick = (e: any) => {
-    e.preventDefault();
-    if (tabItemListContainerRef.current) {
-      tabItemListContainerRef.current.scrollLeft += 90;
-    }
-  };
-
-  const handleLeftClick = (e: any) => {
-    e.preventDefault();
-    if (tabItemListContainerRef.current) {
-      tabItemListContainerRef.current.scrollLeft -= 90;
-    }
-  };
-
-  return (
-    <div
-      className="openapi-tabs__schema-tabs-container"
-      style={{ marginBottom: "1rem" }}
-    >
-      {showTabArrows && (
-        <button
-          className="openapi-tabs__arrow left"
-          onClick={handleLeftClick}
-        />
-      )}
-      <ul
-        ref={tabItemListContainerRef as LegacyRef<HTMLUListElement>}
-        role="tablist"
-        aria-orientation="horizontal"
-        className={clsx(
-          "openapi-tabs__schema-list-container",
-          "tabs",
-          {
-            "tabs--block": block,
-          },
-          className
-        )}
-      >
-        {tabValues.map(({ value, label, attributes }) => (
-          <li
-            // TODO extract TabListItem
-            role="tab"
-            tabIndex={selectedValue === value ? 0 : -1}
-            aria-selected={selectedValue === value}
-            key={value}
-            ref={(tabControl) => {
-              tabRefs.push(tabControl);
-            }}
-            onKeyDown={handleKeydown}
-            onClick={handleTabChange}
-            {...attributes}
-            className={clsx(
-              "tabs__item",
-              "openapi-tabs__schema-item",
-              attributes?.className as string,
-              {
-                active: selectedValue === value,
-              }
-            )}
-          >
-            <span className="openapi-tabs__schema-label">{label ?? value}</span>
-          </li>
-        ))}
-      </ul>
-      {showTabArrows && (
-        <button
-          className="openapi-tabs__arrow right"
-          onClick={handleRightClick}
-        />
-      )}
-    </div>
-  );
-}
 function TabContent({
   lazy,
   children,
   selectedValue,
 }: SchemaTabsProps & ReturnType<typeof useTabsContextValue>) {
-  const childTabs = (Array.isArray(children) ? children : [children]).filter(
-    Boolean
+  const childTabs = flatten(
+    (Array.isArray(children) ? children : [children]).filter(Boolean)
   ) as ReactElement<TabItemProps>[];
-  const flattenedChildTabs = flatten(childTabs);
-  if (lazy) {
-    const selectedTabItem = flattenedChildTabs.find(
-      (tabItem) => tabItem.props.value === selectedValue
-    );
-    if (!selectedTabItem) {
-      // fail-safe or fail-fast? not sure what's best here
-      return null;
-    }
-    return cloneElement(selectedTabItem, { className: "margin-top--md" });
-  }
-  return <div className="margin-top--md">{childTabs}</div>;
+
+  if (!lazy) return <div className="margin-top--md">{childTabs}</div>;
+
+  const selectedTab = childTabs.find(
+    (tab) => tab.props.value === selectedValue
+  );
+  return selectedTab
+    ? cloneElement(selectedTab, { className: "margin-top--md" })
+    : null;
 }
+
 function TabsComponent(props: SchemaTabsProps): React.JSX.Element {
   const tabs = useTabsContextValue(props);
   return (
     <TabsProvider value={tabs}>
       <div className="openapi-tabs__schema-container">
-        <TabList {...props} {...tabs} />
+        <BrowserOnly>
+          {() => (
+            <OpenApiTabList
+              values={tabs.tabValues}
+              value={tabs.selectedValue}
+              onValueChange={(value) => {
+                tabs.selectValue(value);
+                props.onChange?.(
+                  tabs.tabValues.findIndex((tab) => tab.value === value)
+                );
+              }}
+              className={props.className}
+              block={props.block}
+            />
+          )}
+        </BrowserOnly>
         <TabContent {...props} {...tabs} />
       </div>
     </TabsProvider>
   );
 }
+
 export default function SchemaTabs(
   props: SchemaTabsProps
 ): React.JSX.Element | null {
   const isBrowser = useIsBrowser();
+  const children = flatten(
+    (Array.isArray(props.children) ? props.children : [props.children]).filter(
+      Boolean
+    )
+  );
+  if (children.length === 0) return null;
 
-  const children = Array.isArray(props.children)
-    ? props.children.filter(Boolean)
-    : props.children
-      ? [props.children]
-      : [];
-
-  if (children.length === 0) {
-    return null;
-  }
-
-  let sanitizedChildren;
+  let sanitizedChildren: ReactElement<TabItemProps>[];
   try {
-    sanitizedChildren = sanitizeTabsChildren(children);
+    sanitizedChildren = sanitizeTabsChildren(
+      children
+    ) as ReactElement<TabItemProps>[];
   } catch {
     return null;
   }
-
-  if (
-    !sanitizedChildren ||
-    (Array.isArray(sanitizedChildren) && sanitizedChildren.length === 0)
-  ) {
-    return null;
-  }
+  if (sanitizedChildren.length === 0) return null;
 
   return (
-    <TabsComponent
-      // Remount tabs after hydration
-      // Temporary fix for https://github.com/facebook/docusaurus/issues/5653
-      key={String(isBrowser)}
-      {...props}
-    >
+    <TabsComponent key={String(isBrowser)} {...props}>
       {sanitizedChildren}
     </TabsComponent>
   );
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/StatusCodes/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/StatusCodes/index.tsx
index 952d6faa6..63f4d6036 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/StatusCodes/index.tsx
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/StatusCodes/index.tsx
@@ -9,11 +9,11 @@ import React from "react";
 
 import { translate } from "@docusaurus/Translate";
 import ApiTabs from "@theme/ApiTabs";
-import Details from "@theme/Details";
+import Details from "@aeei/docusaurus-theme/lib-theme/theme/Details";
 import Markdown from "@theme/Markdown";
 import ResponseHeaders from "@theme/ResponseHeaders";
 import ResponseSchema from "@theme/ResponseSchema";
-import TabItem from "@theme/TabItem";
+import TabItem from "@theme/ApiTabItem";
 import type { ApiItem } from "docusaurus-plugin-openapi-docs/src/types";
 
 interface Props {
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/base-nova-integration-contract.test.ts b/packages/docusaurus-theme-openapi-docs/src/theme/base-nova-integration-contract.test.ts
new file mode 100644
index 000000000..2e71a303c
--- /dev/null
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/base-nova-integration-contract.test.ts
@@ -0,0 +1,113 @@
+import fs from "fs";
+import path from "path";
+
+const repositoryRoot = path.resolve(__dirname, "../../../..");
+const demoConfig = fs.readFileSync(
+  path.join(repositoryRoot, "demo/docusaurus.config.ts"),
+  "utf8"
+);
+const demoPackage = JSON.parse(
+  fs.readFileSync(path.join(repositoryRoot, "demo/package.json"), "utf8")
+);
+
+function productionSource(directory: string): string {
+  return fs
+    .readdirSync(directory, { withFileTypes: true })
+    .flatMap((entry) => {
+      const entryPath = path.join(directory, entry.name);
+      if (entry.isDirectory()) return [productionSource(entryPath)];
+      if (/\.[jt]sx?$/.test(entry.name) && !entry.name.includes(".test.")) {
+        return [fs.readFileSync(entryPath, "utf8")];
+      }
+      return [];
+    })
+    .join("\n");
+}
+
+describe("Base Nova OpenAPI demo integration", () => {
+  it("renders OpenAPI routes inside the shared AEEI docs theme", () => {
+    expect(demoConfig).toMatch(
+      /themes:\s*\[\s*"docusaurus-theme-openapi-docs",\s*\[\s*"@aeei\/docusaurus-theme"/
+    );
+    expect(demoPackage.dependencies["@aeei/docusaurus-theme"]).toBeDefined();
+  });
+
+  it("keeps schema actions beside, never inside, disclosure triggers", () => {
+    const details = fs.readFileSync(
+      path.join(
+        repositoryRoot,
+        "packages/docusaurus-theme/src/theme/Details/index.tsx"
+      ),
+      "utf8"
+    );
+    const requestSchema = fs.readFileSync(
+      path.join(__dirname, "RequestSchema/index.tsx"),
+      "utf8"
+    );
+    const responseSchema = fs.readFileSync(
+      path.join(__dirname, "ResponseSchema/index.tsx"),
+      "utf8"
+    );
+
+    expect(details).toContain("summaryAction");
+    expect(details).toContain('typeof summary.type !== "string"');
+    expect(requestSchema).toContain(
+      "summaryAction={<SchemaExpansionControl />}"
+    );
+    expect(responseSchema).toContain(
+      "summaryAction={<SchemaExpansionControl />}"
+    );
+  });
+
+  it("uses shared Base Nova controls for export, forms, statuses, and code actions", () => {
+    const exportSource = fs.readFileSync(
+      path.join(__dirname, "ApiExplorer/Export/index.tsx"),
+      "utf8"
+    );
+    const formSelect = fs.readFileSync(
+      path.join(__dirname, "ApiExplorer/FormSelect/index.tsx"),
+      "utf8"
+    );
+    const wordWrap = fs.readFileSync(
+      path.join(__dirname, "ApiExplorer/ApiCodeBlock/WordWrapButton/index.tsx"),
+      "utf8"
+    );
+    const statusBadge = fs.readFileSync(
+      path.join(__dirname, "components/schema-status-badge.tsx"),
+      "utf8"
+    );
+    const schemaTabs = fs.readFileSync(
+      path.join(__dirname, "SchemaTabs/index.tsx"),
+      "utf8"
+    );
+
+    expect(exportSource).toContain("DropdownMenuTrigger");
+    expect(exportSource).toContain('variant="outline"');
+    expect(formSelect).toContain("components/ui/select");
+    expect(formSelect).not.toContain("<select");
+    expect(wordWrap).toContain("aria-pressed={isEnabled}");
+    expect(statusBadge).toContain('from "@aeei/docusaurus-theme');
+    expect(schemaTabs).toContain("<OpenApiTabList");
+    expect(schemaTabs).toContain("<BrowserOnly>");
+    expect(schemaTabs).not.toContain('role="tablist"');
+  });
+
+  it("namespaces OpenAPI tab panels away from the shared MDX TabItem", () => {
+    const openApiTheme = productionSource(__dirname);
+    const markdownGenerator = fs.readFileSync(
+      path.join(
+        repositoryRoot,
+        "packages/docusaurus-plugin-openapi-docs/src/markdown/index.ts"
+      ),
+      "utf8"
+    );
+
+    expect(openApiTheme).not.toContain('from "@theme/TabItem"');
+    expect(markdownGenerator).not.toContain(
+      'import TabItem from "@theme/TabItem"'
+    );
+    expect(fs.existsSync(path.join(__dirname, "ApiTabItem/index.tsx"))).toBe(
+      true
+    );
+  });
+});
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/components/method-badge.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/components/method-badge.tsx
new file mode 100644
index 000000000..3b4a3e8c4
--- /dev/null
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/components/method-badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react";
+
+import { Badge } from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/badge";
+
+type BadgeVariant = React.ComponentProps<typeof Badge>["variant"];
+
+const variantByMethod: Record<string, BadgeVariant> = {
+  post: "default",
+  delete: "destructive",
+  put: "secondary",
+  patch: "secondary",
+  get: "outline",
+  head: "outline",
+  event: "outline",
+};
+
+type MethodBadgeProps = React.ComponentProps<typeof Badge> & {
+  method: string;
+};
+
+export function MethodBadge({ method, children, ...props }: MethodBadgeProps) {
+  const normalizedMethod = method.toLowerCase();
+
+  return (
+    <Badge
+      variant={variantByMethod[normalizedMethod] ?? "outline"}
+      data-method={normalizedMethod}
+      {...props}
+    >
+      {children ??
+        (normalizedMethod === "event"
+          ? "Webhook"
+          : normalizedMethod.toUpperCase())}
+    </Badge>
+  );
+}
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/components/openapi-tab-list.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/components/openapi-tab-list.tsx
new file mode 100644
index 000000000..3dd6b28dd
--- /dev/null
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/components/openapi-tab-list.tsx
@@ -0,0 +1,92 @@
+import * as React from "react";
+
+import type { TabValue } from "@theme/utils/tabsUtils";
+
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+} from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/tabs";
+import { cn } from "@aeei/docusaurus-theme/lib-theme/theme/utils/cn";
+import { useScrollPositionBlocker } from "@theme/utils/scrollUtils";
+
+export function OpenApiTabList({
+  values,
+  value,
+  onValueChange,
+  className,
+  triggerClassName,
+  variant = "line",
+  block = false,
+}: {
+  values: readonly TabValue[];
+  value: string;
+  onValueChange: (value: string) => void;
+  className?: string;
+  triggerClassName?: string | ((value: string) => string | undefined);
+  variant?: "default" | "line";
+  block?: boolean;
+}) {
+  const triggerRefs = React.useRef(new Map<string, HTMLButtonElement>());
+  const { blockElementScrollPositionUntilNextRender } =
+    useScrollPositionBlocker();
+
+  const handleValueChange = (nextValue: string) => {
+    const trigger = triggerRefs.current.get(nextValue);
+    if (trigger) blockElementScrollPositionUntilNextRender(trigger);
+    onValueChange(nextValue);
+  };
+
+  return (
+    <Tabs
+      value={value}
+      onValueChange={handleValueChange}
+      className="min-w-0 gap-0"
+    >
+      <div
+        data-slot="tabs-scroller"
+        className={cn(
+          "max-w-full overflow-x-auto [scrollbar-width:none]",
+          variant === "line" && "border-b border-border",
+          block && "w-full"
+        )}
+      >
+        <TabsList
+          variant={variant}
+          className={cn(
+            "max-w-none min-w-max justify-start",
+            variant === "line" && "gap-5 rounded-none",
+            block && "w-full min-w-full",
+            className
+          )}
+        >
+          {values.map(({ value: tabValue, label, attributes }) => {
+            const { className: attributeClassName, ...tabAttributes } =
+              attributes ?? {};
+            return (
+              <TabsTrigger
+                key={tabValue}
+                {...(tabAttributes as React.ComponentPropsWithoutRef<"button">)}
+                ref={(node) => {
+                  if (node) triggerRefs.current.set(tabValue, node);
+                  else triggerRefs.current.delete(tabValue);
+                }}
+                value={tabValue}
+                className={cn(
+                  "flex-none",
+                  block && "flex-1",
+                  typeof triggerClassName === "function"
+                    ? triggerClassName(tabValue)
+                    : triggerClassName,
+                  attributeClassName as string
+                )}
+              >
+                {label ?? tabValue}
+              </TabsTrigger>
+            );
+          })}
+        </TabsList>
+      </div>
+    </Tabs>
+  );
+}
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/components/schema-status-badge.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/components/schema-status-badge.tsx
new file mode 100644
index 000000000..d2dfb9614
--- /dev/null
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/components/schema-status-badge.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+
+import { Badge } from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/badge";
+
+type SchemaStatus = "required" | "deprecated" | "nullable";
+
+const variantByStatus: Record<
+  SchemaStatus,
+  React.ComponentProps<typeof Badge>["variant"]
+> = {
+  required: "destructive",
+  deprecated: "secondary",
+  nullable: "outline",
+};
+
+export function SchemaStatusBadge({
+  status,
+  children,
+}: {
+  status: SchemaStatus;
+  children?: React.ReactNode;
+}) {
+  return <Badge variant={variantByStatus[status]}>{children ?? status}</Badge>;
+}
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/components/tab-scroll-button.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/components/tab-scroll-button.tsx
new file mode 100644
index 000000000..b5687799d
--- /dev/null
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/components/tab-scroll-button.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+import { Button } from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/button";
+
+export function TabScrollButton({
+  direction,
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "children"> & {
+  direction: "left" | "right";
+}) {
+  const Icon = direction === "left" ? ChevronLeft : ChevronRight;
+
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon-sm"
+      className="openapi-tabs__arrow"
+      aria-label={`Scroll tabs ${direction}`}
+      {...props}
+    >
+      <Icon aria-hidden="true" />
+    </Button>
+  );
+}
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/components/value-badge.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/components/value-badge.tsx
new file mode 100644
index 000000000..4b87e7ef0
--- /dev/null
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/components/value-badge.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+
+import { Badge } from "@aeei/docusaurus-theme/lib-theme/theme/components/ui/badge";
+
+export function ValueBadge({ children }: { children: React.ReactNode }) {
+  return (
+    <Badge variant="outline" render={<code />}>
+      {children}
+    </Badge>
+  );
+}
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/styles.scss b/packages/docusaurus-theme-openapi-docs/src/theme/styles.scss
index 103ca7c4e..44cc0b05b 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/styles.scss
+++ b/packages/docusaurus-theme-openapi-docs/src/theme/styles.scss
@@ -11,12 +11,10 @@
 @use "./ApiExplorer/FormItem/FormItem";
 @use "./ApiExplorer/FormLabel/FormLabel";
 @use "./ApiExplorer/FormMultiSelect/FormMultiSelect";
-@use "./ApiExplorer/FormSelect/FormSelect";
 @use "./ApiExplorer/FormTextInput/FormTextInput";
 @use "./ApiExplorer/LiveEditor/LiveEditor";
 @use "./ApiExplorer/MethodEndpoint/MethodEndpoint";
 @use "./ApiExplorer/ParamOptions/ParamOptions";
-@use "./ApiExplorer/Request/Request";
 @use "./ApiExplorer/Response/Response";
 @use "./ApiExplorer/Server/Server";
 
@@ -24,7 +22,6 @@
 @use "./ApiExplorer/ApiCodeBlock/Container/Container";
 @use "./ApiExplorer/ApiCodeBlock/Content/Content";
 @use "./ApiExplorer/ApiCodeBlock/CopyButton/CopyButton";
-@use "./ApiExplorer/ApiCodeBlock/ExitButton/ExitButton";
 @use "./ApiExplorer/ApiCodeBlock/ExpandButton/ExpandButton";
 @use "./ApiExplorer/ApiCodeBlock/Line/Line";
 @use "./ApiExplorer/ApiCodeBlock/WordWrapButton/WordWrapButton";
@@ -46,146 +43,86 @@
 /* Example Styling */
 @use "./Example/Example";
 
-:root {
-  --openapi-required: var(--ifm-color-danger);
-  --openapi-deprecated: var(--ifm-color-warning);
-  --openapi-nullable: var(--ifm-color-info);
-  --openapi-code-blue: var(--ifm-color-info);
-  --openapi-code-red: var(--ifm-color-danger);
-  --openapi-code-orange: var(--ifm-color-warning);
-  --openapi-code-green: var(--ifm-color-success);
-  --openapi-card-background-color: var(--ifm-color-gray-100);
-  --openapi-card-border-radius: var(--ifm-pre-border-radius);
-  --openapi-input-border: var(--ifm-color-primary);
-  --openapi-input-background: var(--openapi-card-background-color);
-  --openapi-tree-line-color: var(--ifm-toc-border-color);
-  --openapi-code-tab-border-color: var(--ifm-toc-border-color);
-  --openapi-code-tab-border-color-python: #ffdb50;
-  --openapi-code-tab-border-color-bash: var(--ifm-color-danger);
-  --openapi-code-tab-border-color-go: var(--ifm-color-info);
-  --openapi-code-tab-border-color-js: var(--ifm-color-warning);
-  --openapi-code-tab-border-color-ruby: var(--ifm-color-danger);
-  --openapi-code-tab-border-color-csharp: #9b4f96;
-  --openapi-code-tab-border-color-nodejs: var(--ifm-color-success);
-  --openapi-code-tab-border-color-php: #6181b6;
-  --openapi-code-tab-border-color-java: #0374bd;
-  --openapi-code-tab-border-color-powershell: #00adef;
-  --openapi-code-tab-shadow-color-python: rgba(255, 219, 80, 0.25);
-  --openapi-code-tab-shadow-color-curl: var(
-    --openapi-code-tab-shadow-color-bash
-  );
-  --openapi-code-tab-shadow-color-bash: rgba(250, 56, 62, 0.25);
-  --openapi-code-tab-shadow-color-go: rgba(84, 199, 236, 0.25);
-  --openapi-code-tab-shadow-color-js: rgba(255, 186, 0, 0.25);
-  --openapi-code-tab-shadow-color-ruby: rgba(250, 56, 62, 0.25);
-  --openapi-code-tab-shadow-color-csharp: rgba(155, 79, 150, 0.25);
-  --opeanpi-code-tab-shadow-color-nodejs: rgba(0, 164, 0, 0.25);
-  --openapi-code-tab-shadow-color-php: rgba(97, 129, 182, 0.25);
-  --openapi-code-tab-shadow-color-java: rgba(3, 116, 189, 0.25);
-  --opeanpi-code-tab-shadow-color-powershell: rgba(3, 116, 189, 0.25);
-  --openapi-explorer-font-size-input: 12px;
-  --openapi-explorer-font-size-code: 12px;
-  --openapi-explorer-padding-input: 0.5rem;
-  --openapi-explorer-border-color: var(--ifm-toc-border-color);
-  --openapi-explorer-caret-bg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
-  --openapi-skeleton-background: var(--ifm-color-emphasis-100);
-}
-
-[data-theme="dark"] {
-  --openapi-card-background-color: var(--ifm-color-gray-900) !important;
-  --openapi-explorer-caret-bg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24" fill="white"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>') !important;
-}
-
 .docs-wrapper {
   height: 100%;
 }
 
-// @media (min-width: 997px) {
-//   .docItemCol {
-//     max-width: 75% !important;
-//   }
-
-//   /* Prevent hydration FOUC, as the mobile TOC needs to be server-rendered */
-//   .tocMobile {
-//     display: none;
-//   }
-// }
-
-/* Begin OpenAPI theme styles */
-// [data-theme="dark"] {
-//   --openapi-card-background-color: var(--ifm-color-gray-900) !important;
-// }
-
-// .theme-api-markdown div[class^="collapsibleContent"] {
-//   margin-top: 0 !important;
-//   padding-left: 2px;
-// }
-
-/* Demo panel details */
-
-// .theme-api-markdown .openapi-explorer__details > div > div > pre {
-//   border-top-left-radius: 0;
-//   border-top-right-radius: 0;
-// }
-
-/* Code block */
-
-// .theme-api-markdown code {
-//   max-width: 600px;
-//   max-height: 500px;
-//   overflow: auto;
-// }
-
-/* Version button */
-
 .version-button div {
   display: block;
 }
 
 .version-button div > button > span::after {
+  display: inline-block;
+  position: relative;
+  top: 1px;
+  margin-left: 0.3em;
   border-color: currentcolor transparent;
   border-style: solid;
   border-width: 0.4em 0.4em 0;
   content: "";
-  margin-left: 0.3em;
-  position: relative;
-  transform: translateY(-50%);
-  display: inline-block;
   font-size: 0.8rem;
-  top: 1px;
+  transform: translateY(-50%);
 }
 
 .openapi__logo {
-  width: 250px;
+  width: min(100%, calc(var(--spacing) * 64));
+  height: auto;
+}
+
+.openapi-export {
+  float: inline-end;
+}
+
+.theme-api-markdown,
+.theme-api-markdown > .col,
+.openapi-tabs__code-container {
+  min-width: 0;
+}
+
+.theme-api-markdown {
+  display: grid;
+  width: 100%;
+  margin: 0;
 }
 
-.openapi__heading {
-  font-size: 2rem;
-  margin-bottom: 0.5rem !important;
+.theme-api-markdown > .col {
+  width: auto;
+  max-width: none;
+  padding: 0;
 }
 
 .openapi-left-panel__container {
-  border-right: thin solid var(--ifm-toc-border-color);
+  padding-bottom: calc(var(--spacing) * 8) !important;
 }
 
-@media (min-width: 997px) {
+.openapi-right-panel__container {
+  padding-top: calc(var(--spacing) * 6) !important;
+  border-top: var(--border-width) solid var(--border);
+}
+
+@media (min-width: 1280px) {
+  .theme-api-markdown {
+    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
+  }
+
+  .openapi-left-panel__container {
+    padding-right: calc(var(--spacing) * 6) !important;
+    border-right: var(--border-width) solid var(--border);
+  }
+
   .openapi-right-panel__container {
     position: sticky;
-    top: calc(var(--ifm-navbar-height) + 1rem);
-    max-height: calc(100vh - var(--ifm-navbar-height) - 2rem);
+    top: calc(var(--ifm-navbar-height) + var(--spacing) * 4);
+    align-self: start;
+    max-height: calc(100vh - var(--ifm-navbar-height) - var(--spacing) * 8);
+    padding: 0 0 0 calc(var(--spacing) * 6) !important;
     overflow-y: auto;
-    align-self: flex-start;
-  }
-}
-
-@media (max-width: 997px) {
-  .schema {
-    margin-bottom: 1rem;
+    border-top: 0;
   }
 }
 
 .openapi-tabs__heading {
-  margin-bottom: 1rem;
+  margin-bottom: calc(var(--spacing) * 4);
 }
 
 /* Loading Skeleton */
@@ -210,8 +147,8 @@
 
 /* Loading Skeleton */
 .openapi-skeleton {
-  border-radius: var(--ifm-pre-border-radius);
-  background-color: var(--openapi-skeleton-background);
+  border-radius: var(--radius);
+  background-color: var(--muted);
   max-width: 100%;
   margin: 1rem auto;
 }
diff --git a/packages/docusaurus-theme/README.md b/packages/docusaurus-theme/README.md
index a16a3f44b..3f5d7b292 100644
--- a/packages/docusaurus-theme/README.md
+++ b/packages/docusaurus-theme/README.md
@@ -43,11 +43,22 @@ themes: [
     {
       search: false, // false | "local" | "algolia"
       copyPage: false,
+      containerMaxWidth: "90rem", // positive px/rem value; numbers are px
     },
   ],
 ];
 ```
 
+### Container width
+
+The docs shell, navbar, announcement, footer, OpenAPI layout, and large dialogs share one maximum width. The default is `90rem`. Override it without consumer Tailwind or Sass config:
+
+```ts
+themes: [["@aeei/docusaurus-theme", { containerMaxWidth: "80rem" }]];
+```
+
+Numbers are interpreted as pixels (`containerMaxWidth: 1280`). Strings accept positive `px` or `rem` constants.
+
 ### Local search
 
 ```ts
diff --git a/packages/docusaurus-theme/package.json b/packages/docusaurus-theme/package.json
index 5fdc0f5ab..e6e50ab4d 100644
--- a/packages/docusaurus-theme/package.json
+++ b/packages/docusaurus-theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@aeei/docusaurus-theme",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "A shadcn Base Nova theme for Docusaurus docs.",
   "license": "MIT",
   "keywords": [
diff --git a/packages/docusaurus-theme/src/container-width.test.ts b/packages/docusaurus-theme/src/container-width.test.ts
new file mode 100644
index 000000000..8683dad84
--- /dev/null
+++ b/packages/docusaurus-theme/src/container-width.test.ts
@@ -0,0 +1,43 @@
+import type { LoadContext } from "@docusaurus/types";
+
+import docusaurusTheme, {
+  DEFAULT_CONTAINER_MAX_WIDTH,
+  resolveContainerMaxWidth,
+} from "./index";
+
+describe("container max width", () => {
+  it("uses the shared 90rem default", () => {
+    expect(DEFAULT_CONTAINER_MAX_WIDTH).toBe("90rem");
+    expect(resolveContainerMaxWidth()).toBe("90rem");
+  });
+
+  it.each([
+    [1280, "1280px"],
+    ["80rem", "80rem"],
+    ["1440px", "1440px"],
+  ])("normalizes %p to %s", (input, expected) => {
+    expect(
+      resolveContainerMaxWidth({ containerMaxWidth: input as never })
+    ).toBe(expected);
+  });
+
+  it.each([0, -1, "100%", "calc(100vw - 2rem)", "wide", null])(
+    "rejects unsafe or non-constant value %p",
+    (containerMaxWidth) => {
+      expect(() =>
+        resolveContainerMaxWidth({ containerMaxWidth } as never)
+      ).toThrow(/containerMaxWidth/);
+    }
+  );
+
+  it("injects the configured width before the compiled shell consumes it", () => {
+    const plugin = docusaurusTheme({} as LoadContext, {
+      containerMaxWidth: "80rem",
+    });
+    const tags = plugin.injectHtmlTags?.({ content: undefined as never });
+
+    expect(JSON.stringify(tags)).toContain(
+      ":root{--theme-shell-max-width-config:80rem}"
+    );
+  });
+});
diff --git a/packages/docusaurus-theme/src/index.ts b/packages/docusaurus-theme/src/index.ts
index b80245938..9753f686f 100644
--- a/packages/docusaurus-theme/src/index.ts
+++ b/packages/docusaurus-theme/src/index.ts
@@ -13,9 +13,35 @@ import type { LoadContext, Plugin } from "@docusaurus/types";
 import { writeSearchIndex } from "./search/build-index";
 import type { DocusaurusThemeOptions, SearchProvider } from "./search/types";
 
-export type { DocusaurusThemeOptions, SearchProvider } from "./search/types";
+export type {
+  ContainerMaxWidth,
+  DocusaurusThemeOptions,
+  SearchProvider,
+} from "./search/types";
 
 const PLUGIN_NAME = "@aeei/docusaurus-theme";
+export const DEFAULT_CONTAINER_MAX_WIDTH = "90rem";
+
+export function resolveContainerMaxWidth(
+  options: DocusaurusThemeOptions = {}
+): string {
+  const value =
+    options.containerMaxWidth === undefined
+      ? DEFAULT_CONTAINER_MAX_WIDTH
+      : options.containerMaxWidth;
+  if (typeof value === "number") {
+    if (Number.isFinite(value) && value > 0) return `${value}px`;
+  } else if (typeof value === "string") {
+    const normalized = value.trim();
+    if (/^(?:\d+(?:\.\d+)?|\.\d+)(?:px|rem)$/u.test(normalized)) {
+      const amount = Number.parseFloat(normalized);
+      if (amount > 0) return normalized;
+    }
+  }
+  throw new Error(
+    `[${PLUGIN_NAME}] "containerMaxWidth" must be a positive number of pixels or a positive px/rem CSS length. Received: ${JSON.stringify(value)}`
+  );
+}
 
 export function copyThemeLegalNotices(
   outDir: string,
@@ -73,6 +99,7 @@ export default function docusaurusTheme(
 ): Plugin<{ provider: SearchProvider; copyPage: boolean }> {
   const provider = resolveSearchProvider(options);
   const copyPage = options.copyPage ?? false;
+  const containerMaxWidth = resolveContainerMaxWidth(options);
   if (typeof copyPage !== "boolean") {
     throw new Error(
       `[${PLUGIN_NAME}] "copyPage" must be true or false. Received: ${JSON.stringify(options.copyPage)}`
@@ -105,6 +132,17 @@ export default function docusaurusTheme(
       await writeSearchIndex({ outDir, baseUrl, routesPaths, noIndexRoutes });
     },
 
+    injectHtmlTags() {
+      return {
+        headTags: [
+          {
+            tagName: "style",
+            innerHTML: `:root{--theme-shell-max-width-config:${containerMaxWidth}}`,
+          },
+        ],
+      };
+    },
+
     getClientModules() {
       return [
         require.resolve(path.join(__dirname, "theme", "shadcn.scss")),
diff --git a/packages/docusaurus-theme/src/package-contract.test.ts b/packages/docusaurus-theme/src/package-contract.test.ts
index 3b7034c07..3862b6f74 100644
--- a/packages/docusaurus-theme/src/package-contract.test.ts
+++ b/packages/docusaurus-theme/src/package-contract.test.ts
@@ -20,7 +20,7 @@ it("uses the public docs-only package identity and metadata", () => {
   const packageJson = JSON.parse(fs.readFileSync(packagePath, "utf8"));
 
   expect(packageJson.name).toBe("@aeei/docusaurus-theme");
-  expect(packageJson.version).toBe("0.1.10");
+  expect(packageJson.version).toBe("0.1.11");
   expect(packageJson.description).toBe(
     "A shadcn Base Nova theme for Docusaurus docs."
   );
diff --git a/packages/docusaurus-theme/src/plugin-content-docs.d.ts b/packages/docusaurus-theme/src/plugin-content-docs.d.ts
index d4cd80815..d21315069 100644
--- a/packages/docusaurus-theme/src/plugin-content-docs.d.ts
+++ b/packages/docusaurus-theme/src/plugin-content-docs.d.ts
@@ -1,4 +1,5 @@
 import type { TOCItem } from "@docusaurus/mdx-loader";
+import type { PropSidebarItemCategory } from "@docusaurus/plugin-content-docs";
 
 declare module "@docusaurus/plugin-content-docs/client" {
   type NavbarDoc = {
@@ -15,6 +16,7 @@ declare module "@docusaurus/plugin-content-docs/client" {
     docId: string,
     pluginId?: string
   ): NavbarDoc | null;
+  export function useCurrentSidebarCategory(): PropSidebarItemCategory;
   export function useDoc(): {
     toc: readonly TOCItem[];
     frontMatter: {
diff --git a/packages/docusaurus-theme/src/search/build-index.test.ts b/packages/docusaurus-theme/src/search/build-index.test.ts
index 00d7d4f7f..411bf9d3f 100644
--- a/packages/docusaurus-theme/src/search/build-index.test.ts
+++ b/packages/docusaurus-theme/src/search/build-index.test.ts
@@ -69,8 +69,33 @@ describe("local search index", () => {
     expect(JSON.stringify(first)).not.toContain("secret code");
   });
 
+  it("indexes deeply nested rendered schemas without cloning the DOM", async () => {
+    const depth = 1200;
+    await fs.writeFile(
+      path.join(outDir, "deep.html"),
+      `<div class="theme-doc-markdown"><h1>Deep schema</h1>${"<div>".repeat(depth)}leaf value${"</div>".repeat(depth)}</div>`
+    );
+
+    const index = await buildSearchIndex({
+      outDir,
+      baseUrl: "/docs/",
+      routesPaths: ["/docs/deep"],
+    });
+
+    expect(index.records).toEqual([
+      {
+        id: "/docs/deep",
+        url: "/docs/deep",
+        title: "Deep schema",
+        text: "leaf value",
+      },
+    ]);
+  });
+
   it("indexes routes emitted as directory index files", async () => {
-    await fs.mkdir(path.join(outDir, "guides", "trailing"), { recursive: true });
+    await fs.mkdir(path.join(outDir, "guides", "trailing"), {
+      recursive: true,
+    });
     await fs.writeFile(
       path.join(outDir, "guides", "trailing", "index.html"),
       page("Trailing")
diff --git a/packages/docusaurus-theme/src/search/build-index.ts b/packages/docusaurus-theme/src/search/build-index.ts
index 794bbe90f..e91209e5e 100644
--- a/packages/docusaurus-theme/src/search/build-index.ts
+++ b/packages/docusaurus-theme/src/search/build-index.ts
@@ -91,9 +91,8 @@ export async function buildSearchIndex({
     if (!html) continue;
 
     const root = parse(html);
-    const sourceArticle = root.querySelector(".theme-doc-markdown");
-    if (!sourceArticle) continue;
-    const article = sourceArticle.clone() as HTMLElement;
+    const article = root.querySelector(".theme-doc-markdown");
+    if (!article) continue;
     removeExcludedContent(article);
 
     const title = clean(
@@ -103,22 +102,13 @@ export async function buildSearchIndex({
     );
     if (!title) continue;
 
-    const body = article.clone() as HTMLElement;
-    for (const heading of body.querySelectorAll(HEADING_SELECTOR))
-      heading.remove();
-    records.push({
-      id: route,
-      url: route,
-      title,
-      text: clean(body.textContent),
-    });
-
+    const sections: SearchRecord[] = [];
     for (const heading of article.querySelectorAll(SECTION_HEADING_SELECTOR)) {
       const section = clean(heading.textContent);
       const id = heading.getAttribute("id");
       if (!id || !section) continue;
       const url = `${route}#${id}`;
-      records.push({
+      sections.push({
         id: url,
         url,
         title,
@@ -126,6 +116,16 @@ export async function buildSearchIndex({
         text: sectionText(heading),
       });
     }
+
+    for (const heading of article.querySelectorAll(HEADING_SELECTOR))
+      heading.remove();
+    records.push({
+      id: route,
+      url: route,
+      title,
+      text: clean(article.textContent),
+    });
+    records.push(...sections);
   }
 
   records.sort((left, right) => left.id.localeCompare(right.id, "en"));
diff --git a/packages/docusaurus-theme/src/search/types.ts b/packages/docusaurus-theme/src/search/types.ts
index b53d7576a..91d5f11a6 100644
--- a/packages/docusaurus-theme/src/search/types.ts
+++ b/packages/docusaurus-theme/src/search/types.ts
@@ -1,8 +1,11 @@
 export type SearchProvider = false | "local" | "algolia";
 
+export type ContainerMaxWidth = number | `${number}px` | `${number}rem`;
+
 export type DocusaurusThemeOptions = {
   search?: SearchProvider;
   copyPage?: boolean;
+  containerMaxWidth?: ContainerMaxWidth;
 };
 
 export type SearchRecord = {
diff --git a/packages/docusaurus-theme/src/theme/AnnouncementBar/index.tsx b/packages/docusaurus-theme/src/theme/AnnouncementBar/index.tsx
new file mode 100644
index 000000000..5c990955c
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/AnnouncementBar/index.tsx
@@ -0,0 +1,45 @@
+import React, { type ReactNode } from "react";
+
+import { translate } from "@docusaurus/Translate";
+import { useThemeConfig } from "@docusaurus/theme-common";
+import { useAnnouncementBar } from "@docusaurus/theme-common/internal";
+import AnnouncementBarContent from "@theme/AnnouncementBar/Content";
+import { Megaphone, X } from "lucide-react";
+
+import { Alert, AlertAction, AlertTitle } from "@theme/components/ui/alert";
+import { Button } from "@theme/components/ui/button";
+
+export default function AnnouncementBar(): ReactNode {
+  const { announcementBar } = useThemeConfig();
+  const { isActive, close } = useAnnouncementBar();
+
+  if (!isActive || !announcementBar) return null;
+
+  return (
+    <div className="theme-announcement-shell" role="banner">
+      <Alert>
+        <Megaphone aria-hidden="true" />
+        <AlertTitle>
+          <AnnouncementBarContent />
+        </AlertTitle>
+        {announcementBar.isCloseable && (
+          <AlertAction>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              aria-label={translate({
+                id: "theme.AnnouncementBar.closeButtonAriaLabel",
+                message: "Close",
+                description: "The ARIA label for announcement close button",
+              })}
+              onClick={close}
+            >
+              <X aria-hidden="true" />
+            </Button>
+          </AlertAction>
+        )}
+      </Alert>
+    </div>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/Details/index.tsx b/packages/docusaurus-theme/src/theme/Details/index.tsx
index 5996d1281..de6975489 100644
--- a/packages/docusaurus-theme/src/theme/Details/index.tsx
+++ b/packages/docusaurus-theme/src/theme/Details/index.tsx
@@ -16,7 +16,9 @@ import {
   AccordionTrigger,
 } from "@theme/components/ui/accordion";
 
-type Props = DetailsProps;
+type Props = DetailsProps & {
+  summaryAction?: ReactNode;
+};
 type SummaryProps = ComponentProps<typeof AccordionTrigger> & {
   children?: ReactNode;
 };
@@ -25,7 +27,7 @@ function getSummary(summary: Props["summary"]): {
   content: ReactNode;
   props: Omit<SummaryProps, "children">;
 } {
-  if (!isValidElement(summary)) {
+  if (!isValidElement(summary) || typeof summary.type !== "string") {
     return { content: summary ?? "Details", props: {} };
   }
 
@@ -44,6 +46,7 @@ export default function Details({
   className: _className,
   id,
   open,
+  summaryAction,
   ...props
 }: Props): ReactNode {
   useBrokenLinks().collectAnchor(id);
@@ -58,7 +61,20 @@ export default function Details({
       defaultValue={open ? [value] : []}
     >
       <AccordionItem value={value}>
-        <AccordionTrigger {...summaryProps}>{summaryContent}</AccordionTrigger>
+        {summaryAction ? (
+          <div className="flex items-start">
+            <AccordionTrigger {...summaryProps}>
+              {summaryContent}
+            </AccordionTrigger>
+            <div className="flex shrink-0 items-center py-2">
+              {summaryAction}
+            </div>
+          </div>
+        ) : (
+          <AccordionTrigger {...summaryProps}>
+            {summaryContent}
+          </AccordionTrigger>
+        )}
         <AccordionContent>{children}</AccordionContent>
       </AccordionItem>
     </Accordion>
diff --git a/packages/docusaurus-theme/src/theme/DocCategoryGeneratedIndexPage/index.tsx b/packages/docusaurus-theme/src/theme/DocCategoryGeneratedIndexPage/index.tsx
new file mode 100644
index 000000000..ee267156f
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/DocCategoryGeneratedIndexPage/index.tsx
@@ -0,0 +1,59 @@
+import React, { type ReactNode } from "react";
+
+import { useCurrentSidebarCategory } from "@docusaurus/plugin-content-docs/client";
+import { PageMetadata } from "@docusaurus/theme-common";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import type { Props } from "@theme/DocCategoryGeneratedIndexPage";
+import DocBreadcrumbs from "@theme/DocBreadcrumbs";
+import DocCardList from "@theme/DocCardList";
+import DocPaginator from "@theme/DocPaginator";
+import DocVersionBadge from "@theme/DocVersionBadge";
+import DocVersionBanner from "@theme/DocVersionBanner";
+import Heading from "@theme/Heading";
+
+function Metadata({ categoryGeneratedIndex }: Props): ReactNode {
+  return (
+    <PageMetadata
+      title={categoryGeneratedIndex.title}
+      description={categoryGeneratedIndex.description}
+      keywords={categoryGeneratedIndex.keywords}
+      image={useBaseUrl(categoryGeneratedIndex.image)}
+    />
+  );
+}
+
+function Content({ categoryGeneratedIndex }: Props): ReactNode {
+  const category = useCurrentSidebarCategory();
+
+  return (
+    <div className="theme-generated-index-page theme-doc-markdown">
+      <DocVersionBanner />
+      <DocBreadcrumbs />
+      <DocVersionBadge />
+      <header>
+        <Heading as="h1">{categoryGeneratedIndex.title}</Heading>
+        {categoryGeneratedIndex.description && (
+          <p>{categoryGeneratedIndex.description}</p>
+        )}
+      </header>
+      <article className="theme-generated-index-list">
+        <DocCardList items={category.items} />
+      </article>
+      <footer className="theme-generated-index-footer">
+        <DocPaginator
+          previous={categoryGeneratedIndex.navigation.previous}
+          next={categoryGeneratedIndex.navigation.next}
+        />
+      </footer>
+    </div>
+  );
+}
+
+export default function DocCategoryGeneratedIndexPage(props: Props): ReactNode {
+  return (
+    <>
+      <Metadata {...props} />
+      <Content {...props} />
+    </>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/DocRoot/Layout/index.tsx b/packages/docusaurus-theme/src/theme/DocRoot/Layout/index.tsx
index 6cffca8a8..68e0a0b66 100644
--- a/packages/docusaurus-theme/src/theme/DocRoot/Layout/index.tsx
+++ b/packages/docusaurus-theme/src/theme/DocRoot/Layout/index.tsx
@@ -36,7 +36,7 @@ export default function DocRootLayout({ children }: Props): ReactNode {
         <main className="flex min-h-0 min-w-0 flex-1 flex-col">
           <div className="container-wrapper flex flex-1 flex-col px-2">
             <SidebarProvider
-              className="min-h-min flex-1 items-start px-0 [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--column-top-spacing:calc(var(--spacing)*6)] 3xl:fixed:container 3xl:fixed:px-3"
+              className="theme-doc-shell-grid min-h-min flex-1 items-start px-0 [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--column-top-spacing:calc(var(--spacing)*6)] 3xl:fixed:container 3xl:fixed:px-3"
               open={!hiddenSidebarContainer}
               onOpenChange={setSidebarOpen}
               style={
diff --git a/packages/docusaurus-theme/src/theme/DocSidebarItem/Category/index.tsx b/packages/docusaurus-theme/src/theme/DocSidebarItem/Category/index.tsx
index 9c471e5f9..c86e2e286 100644
--- a/packages/docusaurus-theme/src/theme/DocSidebarItem/Category/index.tsx
+++ b/packages/docusaurus-theme/src/theme/DocSidebarItem/Category/index.tsx
@@ -291,6 +291,7 @@ function Category({
         </>
       ) : level > 1 ? (
         <CollapsibleTrigger
+          nativeButton={false}
           render={<SidebarMenuSubButton isActive={isActive} />}
         >
           <span>{label}</span>
diff --git a/packages/docusaurus-theme/src/theme/DocSidebarItem/Link/index.tsx b/packages/docusaurus-theme/src/theme/DocSidebarItem/Link/index.tsx
index 41209108d..eacd0dbaa 100644
--- a/packages/docusaurus-theme/src/theme/DocSidebarItem/Link/index.tsx
+++ b/packages/docusaurus-theme/src/theme/DocSidebarItem/Link/index.tsx
@@ -24,7 +24,7 @@ export default function DocSidebarItemLink({
   level,
   ...props
 }: Props): ReactNode {
-  const { href, label, autoAddBaseUrl } = item;
+  const { href, label, autoAddBaseUrl, className } = item;
   const isActive = isActiveSidebarItem(item, activePath);
   const isInternalLink = isInternalUrl(href);
   const link = (
@@ -47,7 +47,7 @@ export default function DocSidebarItemLink({
 
   if (level > 1) {
     return (
-      <SidebarMenuSubItem>
+      <SidebarMenuSubItem className={className}>
         <SidebarMenuSubButton render={link} isActive={isActive}>
           {content}
         </SidebarMenuSubButton>
@@ -56,7 +56,7 @@ export default function DocSidebarItemLink({
   }
 
   return (
-    <SidebarMenuItem>
+    <SidebarMenuItem className={className}>
       <SidebarMenuButton render={link} isActive={isActive} tooltip={label}>
         {content}
       </SidebarMenuButton>
diff --git a/packages/docusaurus-theme/src/theme/base.scss b/packages/docusaurus-theme/src/theme/base.scss
index a9b2cfec4..e34438868 100644
--- a/packages/docusaurus-theme/src/theme/base.scss
+++ b/packages/docusaurus-theme/src/theme/base.scss
@@ -63,7 +63,9 @@
   --ifm-global-radius: var(--radius);
   --ifm-navbar-height: calc(var(--spacing) * 14);
   --layout-gutter: calc(var(--spacing) * 4);
-  --theme-shell-max-width: 90rem;
+  --theme-shell-max-width: var(--theme-shell-max-width-config, 90rem);
+  --theme-content-max-width: 40rem;
+  --theme-toc-width: 18rem;
   --doc-sidebar-width: calc(var(--spacing) * 64);
   --ifm-font-family-base:
     Geist, "Pretendard Variable", "Geist Fallback", sans-serif;
@@ -182,6 +184,13 @@ body {
 }
 
 /* Header */
+.theme-announcement-shell {
+  width: 100%;
+  max-width: var(--theme-shell-max-width);
+  margin-inline: auto;
+  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 6) 0;
+}
+
 .navbar {
   isolation: isolate;
   z-index: 40;
@@ -231,7 +240,18 @@ body {
 }
 
 .navbar__logo {
+  display: inline-flex;
   height: calc(var(--spacing) * 7);
+  flex: none;
+  align-items: center;
+}
+
+.navbar__logo img {
+  display: block;
+  width: auto;
+  max-width: 100%;
+  height: 100%;
+  object-fit: contain;
 }
 
 .navbar__item,
@@ -298,6 +318,21 @@ body {
   overflow: hidden;
 }
 
+.theme-generated-index-page {
+  width: min(100%, var(--theme-content-max-width));
+  min-width: 0;
+  flex: none;
+  padding-block-start: calc(var(--spacing) * 6);
+}
+
+.theme-generated-index-list {
+  margin-block-start: 0;
+}
+
+.theme-generated-index-footer {
+  margin-block-start: calc(var(--spacing) * 6);
+}
+
 /* Sidebar shell */
 a[class*="skipToContent"] {
   left: calc(var(--spacing) * 4);
@@ -337,7 +372,7 @@ a[class*="skipToContent"]:focus {
   height: 100%;
 }
 
-.container-wrapper:has(.theme-doc-sidebar-desktop[data-collapsed="true"]) {
+.theme-doc-shell-grid:has(.theme-doc-sidebar-desktop[data-collapsed="true"]) {
   grid-template-columns: 5rem minmax(0, 1fr);
 }
 
@@ -367,11 +402,15 @@ a[class*="skipToContent"]:focus {
 
 .theme-doc-page__content {
   width: 100%;
-  max-width: 40rem;
+  max-width: var(--theme-content-max-width);
   min-width: 0;
   padding-block: 0;
 }
 
+.theme-doc-page__content--wide {
+  max-width: none;
+}
+
 .theme-doc-page__stack {
   display: flex;
   min-width: 0;
@@ -400,10 +439,10 @@ a[class*="skipToContent"]:focus {
   top: var(--ifm-navbar-height);
   z-index: 30;
   display: none;
-  width: 18rem;
+  width: var(--theme-toc-width);
   height: calc(100svh - var(--ifm-navbar-height));
   min-height: 0;
-  flex: 0 0 18rem;
+  flex: 0 0 var(--theme-toc-width);
   align-self: flex-start;
   margin-left: auto;
   flex-direction: column;
@@ -568,6 +607,10 @@ a[class*="skipToContent"]:focus {
   margin-block-start: var(--typeset-flow);
 }
 
+.theme-doc-markdown .theme-admonition-flow a {
+  overflow-wrap: anywhere;
+}
+
 .theme-doc-markdown
   :not(
     :where(
@@ -1911,9 +1954,20 @@ span.theme-media-viewer {
   .theme-doc-page__toc {
     display: flex;
   }
+
+  .theme-generated-index-page {
+    margin-inline-start: max(
+      0px,
+      calc((100% - var(--theme-toc-width) - var(--theme-content-max-width)) / 2)
+    );
+  }
 }
 
 @media (max-width: 639px) {
+  .theme-generated-index-page {
+    padding-inline: var(--layout-gutter);
+  }
+
   .theme-copy-page-actions {
     display: flex;
     float: none;
diff --git a/packages/docusaurus-theme/src/theme/base.test.ts b/packages/docusaurus-theme/src/theme/base.test.ts
index b34222856..328deb922 100644
--- a/packages/docusaurus-theme/src/theme/base.test.ts
+++ b/packages/docusaurus-theme/src/theme/base.test.ts
@@ -21,6 +21,15 @@ it("leaves component focus visuals to official primitives", () => {
   );
 });
 
+it("bounds configured navbar logos by the shared header height", () => {
+  expect(stylesheet).toMatch(
+    /\.navbar__logo \{[\s\S]*display: inline-flex;[\s\S]*height: calc\(var\(--spacing\) \* 7\);[\s\S]*flex: none;/
+  );
+  expect(stylesheet).toMatch(
+    /\.navbar__logo img \{[\s\S]*width: auto;[\s\S]*height: 100%;[\s\S]*object-fit: contain;/
+  );
+});
+
 it("keeps article prose size stable across responsive widths", () => {
   expect(stylesheet).toContain("--theme-prose-body-size: 0.9375rem;");
   expect(stylesheet).toContain("--theme-prose-leading: 1.75;");
@@ -58,6 +67,28 @@ it("keeps article prose size stable across responsive widths", () => {
   );
 });
 
+it("gives generated category pages the shared prose heading and full content width", () => {
+  const generatedIndex = fs.readFileSync(
+    path.join(__dirname, "DocCategoryGeneratedIndexPage/index.tsx"),
+    "utf8"
+  );
+  const sidebarLink = fs.readFileSync(
+    path.join(__dirname, "DocSidebarItem/Link/index.tsx"),
+    "utf8"
+  );
+
+  expect(generatedIndex).toContain(
+    'className="theme-generated-index-page theme-doc-markdown"'
+  );
+  expect(generatedIndex).not.toContain("max-width");
+  expect(stylesheet).toMatch(
+    /\.theme-generated-index-page \{[\s\S]*width: min\(100%, var\(--theme-content-max-width\)\);[\s\S]*padding-block-start: calc\(var\(--spacing\) \* 6\);/
+  );
+  expect(stylesheet).toContain(".theme-generated-index-list");
+  expect(stylesheet).toContain("var(--theme-toc-width)");
+  expect(sidebarLink).toContain("className={className}");
+});
+
 it("keeps single-class arbitrary selectors quoted during Docusaurus SSG", () => {
   const breadcrumbs = fs.readFileSync(
     path.join(__dirname, "DocBreadcrumbs/index.tsx"),
@@ -79,6 +110,9 @@ it("gives official alerts an external prose-flow wrapper", () => {
   expect(stylesheet).toMatch(
     /\.theme-admonition-flow \{[\s\S]*margin-block-start: var\(--typeset-flow\);/
   );
+  expect(stylesheet).toMatch(
+    /\.theme-doc-markdown \.theme-admonition-flow a \{[\s\S]*overflow-wrap: anywhere;/
+  );
   expect(stylesheet).not.toMatch(
     /\[data-slot=["']alert["']\][^{]*\{[^}]*margin/i
   );
@@ -154,6 +188,8 @@ it("uses Geist with a bundled Pretendard fallback and live shell geometry tokens
   expect(stylesheet).toContain(".theme-doc-root-layout");
   expect(stylesheet).toContain(".theme-doc-page__content");
   expect(stylesheet).toContain(".theme-doc-page__toc");
-  expect(stylesheet).toContain("max-width: 40rem;");
-  expect(stylesheet).toContain("width: 18rem;");
+  expect(stylesheet).toContain("--theme-content-max-width: 40rem;");
+  expect(stylesheet).toContain("max-width: var(--theme-content-max-width);");
+  expect(stylesheet).toContain("--theme-toc-width: 18rem;");
+  expect(stylesheet).toContain("width: var(--theme-toc-width);");
 });
diff --git a/packages/docusaurus-theme/src/theme/components/ui/select.tsx b/packages/docusaurus-theme/src/theme/components/ui/select.tsx
new file mode 100644
index 000000000..d0c3b545b
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/ui/select.tsx
@@ -0,0 +1,202 @@
+"use client"
+
+import * as React from "react"
+import { Select as SelectPrimitive } from "@base-ui/react/select"
+
+import { cn } from "../../utils/cn"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+const Select = SelectPrimitive.Root
+
+function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+  return (
+    <SelectPrimitive.Value
+      data-slot="select-value"
+      className={cn("flex flex-1 text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: SelectPrimitive.Trigger.Props & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon
+        render={
+          <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+        }
+      />
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  alignItemWithTrigger = true,
+  ...props
+}: SelectPrimitive.Popup.Props &
+  Pick<
+    SelectPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
+  >) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        alignItemWithTrigger={alignItemWithTrigger}
+        className="isolate z-50"
+      >
+        <SelectPrimitive.Popup
+          data-slot="select-content"
+          data-align-trigger={alignItemWithTrigger}
+          className={cn(
+            "cn-menu-target cn-menu-translucent relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        >
+          <SelectScrollUpButton />
+          <SelectPrimitive.List>{children}</SelectPrimitive.List>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: SelectPrimitive.GroupLabel.Props) {
+  return (
+    <SelectPrimitive.GroupLabel
+      data-slot="select-label"
+      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.Item.Props) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
+        {children}
+      </SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none" />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: SelectPrimitive.Separator.Props) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
+  return (
+    <SelectPrimitive.ScrollUpArrow
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon />
+    </SelectPrimitive.ScrollUpArrow>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
+  return (
+    <SelectPrimitive.ScrollDownArrow
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon />
+    </SelectPrimitive.ScrollDownArrow>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/packages/docusaurus-theme/src/theme/navbar-shell-contract.test.ts b/packages/docusaurus-theme/src/theme/navbar-shell-contract.test.ts
index ccccf1d3d..3f7fbff16 100644
--- a/packages/docusaurus-theme/src/theme/navbar-shell-contract.test.ts
+++ b/packages/docusaurus-theme/src/theme/navbar-shell-contract.test.ts
@@ -66,7 +66,9 @@ describe("live shadcn navbar shell contract", () => {
   it("caps and centers the shared desktop shell at 90rem", () => {
     const css = read("base.scss");
 
-    expect(css).toContain("--theme-shell-max-width: 90rem;");
+    expect(css).toContain(
+      "--theme-shell-max-width: var(--theme-shell-max-width-config, 90rem);"
+    );
     expect(css).toMatch(
       /\.navbar__inner \{[\s\S]*max-width: calc\([\s\S]*var\(--theme-shell-max-width\)[\s\S]*var\(--spacing\) \* 12/
     );
diff --git a/packages/docusaurus-theme/src/theme/registry-source-contract.test.ts b/packages/docusaurus-theme/src/theme/registry-source-contract.test.ts
index a6e529185..ef382e6fd 100644
--- a/packages/docusaurus-theme/src/theme/registry-source-contract.test.ts
+++ b/packages/docusaurus-theme/src/theme/registry-source-contract.test.ts
@@ -32,6 +32,8 @@ const registrySourceHashes: Record<string, string> = {
     "8195846bf9299ab91a82bcfb32d83e9a1bc821f3cdc3cd4b796ee6dedf059abb",
   "separator.tsx":
     "62fb2029c4b61a65c22944a0c17c9d5b17e0ad5f41b4866f5418014d1e79d9cb",
+  "select.tsx":
+    "77cacdab67c2cd53b9f4412e964085cdc1ac9aaf6a0171854bbb0d53970bf169",
   "sheet.tsx":
     "389bb6dcd64ec21f9cc0cc5c0721d309dc42c9c3040b6cc5af53a5ffa6f8c113",
   "sidebar.tsx":
diff --git a/packages/docusaurus-theme/src/theme/sidebar-contract.test.ts b/packages/docusaurus-theme/src/theme/sidebar-contract.test.ts
index 0887257cb..4dfe6f350 100644
--- a/packages/docusaurus-theme/src/theme/sidebar-contract.test.ts
+++ b/packages/docusaurus-theme/src/theme/sidebar-contract.test.ts
@@ -51,7 +51,7 @@ describe("official Base Nova Sidebar contract", () => {
     );
     expect(layout).toContain("<SidebarProvider");
     expect(layout).toContain(
-      'className="min-h-min flex-1 items-start px-0 [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--column-top-spacing:calc(var(--spacing)*6)] 3xl:fixed:container 3xl:fixed:px-3"'
+      'className="theme-doc-shell-grid min-h-min flex-1 items-start px-0 [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--column-top-spacing:calc(var(--spacing)*6)] 3xl:fixed:container 3xl:fixed:px-3"'
     );
     expect(layout).toContain('"--sidebar-width": "18rem"');
     expect(layout).toContain('"--sidebar-width-icon": "5rem"');
@@ -127,6 +127,7 @@ describe("official Base Nova Sidebar contract", () => {
 
   it("keeps the desktop LNB sticky within the main/footer boundary", () => {
     const css = read("base.scss");
+    const rootLayout = read("DocRoot/Layout/index.tsx");
     const rootSidebar = read("DocRoot/Layout/Sidebar/index.tsx");
 
     expect(css).toMatch(
@@ -139,8 +140,9 @@ describe("official Base Nova Sidebar contract", () => {
       /\.theme-doc-sidebar-container \{[\s\S]*position: static !important;[\s\S]*height: 100% !important;/
     );
     expect(rootSidebar).toContain('data-collapsed={state === "collapsed"}');
-    expect(css).toContain(
-      '.container-wrapper:has(.theme-doc-sidebar-desktop[data-collapsed="true"])'
+    expect(rootLayout).toContain("theme-doc-shell-grid");
+    expect(css).toMatch(
+      /\.theme-doc-shell-grid:has\([\s\S]*\.theme-doc-sidebar-desktop\[data-collapsed="true"\][\s\S]*\) \{[\s\S]*grid-template-columns: 5rem minmax\(0, 1fr\);/
     );
   });
 
diff --git a/playwright.config.ts b/playwright.config.ts
index 3227014bf..46da8d1ca 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -5,6 +5,7 @@ const baseURL = externalBaseUrl ?? "http://127.0.0.1:3010/docusaurus-theme/";
 
 export default defineConfig({
   testDir: "./tests",
+  testIgnore: "openapi-theme.spec.ts",
   fullyParallel: false,
   retries: 0,
   workers: 1,
diff --git a/playwright.openapi.config.ts b/playwright.openapi.config.ts
new file mode 100644
index 000000000..26da7e5f6
--- /dev/null
+++ b/playwright.openapi.config.ts
@@ -0,0 +1,26 @@
+import { defineConfig } from "playwright/test";
+
+const baseURL = process.env.OPENAPI_BASE_URL ?? "http://127.0.0.1:3100/";
+
+export default defineConfig({
+  testDir: "./tests",
+  testMatch: "openapi-theme.spec.ts",
+  fullyParallel: false,
+  retries: 0,
+  workers: 1,
+  reporter: "line",
+  use: {
+    baseURL,
+    browserName: "chromium",
+    trace: "retain-on-failure",
+    screenshot: "only-on-failure",
+  },
+  webServer: process.env.OPENAPI_BASE_URL
+    ? undefined
+    : {
+        command: "yarn workspace demo start --host 127.0.0.1 --port 3100",
+        url: baseURL,
+        reuseExistingServer: true,
+        timeout: 180_000,
+      },
+});
diff --git a/tests/openapi-theme.spec.ts b/tests/openapi-theme.spec.ts
new file mode 100644
index 000000000..7af37f0e0
--- /dev/null
+++ b/tests/openapi-theme.spec.ts
@@ -0,0 +1,260 @@
+import { expect, test, type Page } from "playwright/test";
+
+function collectBrowserErrors(page: Page) {
+  const errors: string[] = [];
+  page.on("pageerror", (error) => errors.push(error.message));
+  page.on("console", (message) => {
+    if (message.type() === "error") errors.push(message.text());
+  });
+  return errors;
+}
+
+async function expectNoHorizontalOverflow(page: Page) {
+  await expect
+    .poll(() =>
+      page.evaluate(
+        () => document.documentElement.scrollWidth - window.innerWidth
+      )
+    )
+    .toBeLessThanOrEqual(1);
+}
+
+test("docs and generated categories share one stable content guide", async ({
+  page,
+}) => {
+  for (const [route, contentSelector] of [
+    ["/", ".theme-doc-page__content"],
+    ["/sidebars", ".theme-doc-page__content"],
+    ["/category/customization", ".theme-generated-index-page"],
+  ] as const) {
+    await page.setViewportSize({ width: 1440, height: 1000 });
+    await page.goto(route);
+    const content = await page.locator(contentSelector).boundingBox();
+    const breadcrumbs = await page
+      .locator('[aria-label="Breadcrumbs"]')
+      .boundingBox();
+    expect(content?.x).toBe(400);
+    expect(content?.width).toBe(640);
+    expect(breadcrumbs?.x).toBe(400);
+    expect(breadcrumbs?.y).toBe(136);
+    await expectNoHorizontalOverflow(page);
+
+    await page.setViewportSize({ width: 375, height: 812 });
+    await page.goto(route);
+    const mobileBreadcrumbs = await page
+      .locator('[aria-label="Breadcrumbs"]')
+      .boundingBox();
+    expect(mobileBreadcrumbs?.x).toBe(24);
+    expect(mobileBreadcrumbs?.y).toBe(148);
+    await expectNoHorizontalOverflow(page);
+  }
+
+  await page.setViewportSize({ width: 1440, height: 1000 });
+  await page.goto("/category/customization");
+  const list = await page.locator(".theme-generated-index-list").boundingBox();
+  const footer = await page
+    .locator(".theme-generated-index-footer")
+    .boundingBox();
+  expect((footer?.y ?? 0) - ((list?.y ?? 0) + (list?.height ?? 0))).toBe(24);
+});
+
+test("main docs shell navigation, rail, and mobile TOC expose real state", async ({
+  page,
+}) => {
+  const errors = collectBrowserErrors(page);
+  await page.setViewportSize({ width: 1440, height: 1000 });
+  await page.goto("/");
+
+  const demos = page.getByRole("button", { name: "Demos" });
+  await expect(demos).toHaveAttribute("aria-expanded", "false");
+  await demos.click();
+  await expect(demos).toHaveAttribute("aria-expanded", "true");
+  await expect(page.getByRole("link", { name: "API Zoo" })).toBeVisible();
+  await page.keyboard.press("Escape");
+  await expect(demos).toHaveAttribute("aria-expanded", "false");
+
+  const sidebar = page.locator(".theme-doc-sidebar-desktop");
+  expect((await sidebar.boundingBox())?.width).toBe(288);
+  await page.getByRole("button", { name: "Collapse sidebar" }).click();
+  expect((await sidebar.boundingBox())?.width).toBe(80);
+  await page.getByRole("button", { name: "Expand sidebar" }).click();
+  expect((await sidebar.boundingBox())?.width).toBe(288);
+
+  await page.setViewportSize({ width: 375, height: 812 });
+  await page.goto("/");
+  const mobileToc = page.getByRole("button", { name: "On this page" });
+  await expect(mobileToc).toHaveAttribute("aria-expanded", "false");
+  await mobileToc.click();
+  await expect(mobileToc).toHaveAttribute("aria-expanded", "true");
+  await expectNoHorizontalOverflow(page);
+  expect(errors).toEqual([]);
+});
+
+test("OpenAPI info, category, operation, and schema routes use the shared shell", async ({
+  page,
+}) => {
+  const errors = collectBrowserErrors(page);
+
+  for (const [route, heading] of [
+    ["/petstore/swagger-petstore-yaml", "Swagger Petstore YAML"],
+    ["/category/petstore-api", "Petstore API"],
+    ["/petstore/add-pet", "Add a new pet to the store"],
+    ["/petstore/schemas/pet", "Pet"],
+  ] as const) {
+    await page.goto(route);
+    await expect(
+      page.getByRole("heading", { name: heading }).first()
+    ).toBeVisible();
+    await expectNoHorizontalOverflow(page);
+
+    const logo = page.locator(".navbar__logo img");
+    await expect(logo).toBeVisible();
+    const logoBox = await logo.boundingBox();
+    expect(logoBox?.height).toBe(28);
+    expect(logoBox?.width).toBeLessThanOrEqual(160);
+  }
+
+  await page.goto("/petstore/swagger-petstore-yaml");
+  await page.getByRole("button", { name: "Export" }).click();
+  await expect(
+    page.getByRole("menuitem", { name: "OpenAPI Spec" })
+  ).toBeVisible();
+  await page.keyboard.press("Escape");
+
+  await page.setViewportSize({ width: 1920, height: 1000 });
+  await page.goto("/petstore/add-pet");
+  const shellBox = await page.locator(".container-wrapper").boundingBox();
+  expect(shellBox?.width).toBe(1440);
+  expect(shellBox?.x).toBe(240);
+  await expect(page.locator("html")).toHaveCSS(
+    "--theme-shell-max-width-config",
+    "90rem"
+  );
+
+  expect(errors).toEqual([]);
+});
+
+test("OpenAPI tabs, disclosures, selects, palette, copy, and dialog expose real state changes", async ({
+  page,
+  context,
+}) => {
+  const errors = collectBrowserErrors(page);
+  await context.grantPermissions(["clipboard-read", "clipboard-write"]);
+  await page.goto("/petstore/add-pet");
+
+  const requestCard = page
+    .locator('[data-slot="card"]')
+    .filter({ has: page.getByText("Request", { exact: true }) });
+  await expect(requestCard).toBeVisible();
+
+  await requestCard.getByRole("button", { name: "Collapse all" }).click();
+  await expect(
+    requestCard.locator('[data-slot="accordion-trigger"][aria-expanded="true"]')
+  ).toHaveCount(0);
+  await requestCard.getByRole("button", { name: "Expand all" }).click();
+  await expect(
+    requestCard.locator('[data-slot="accordion-trigger"][aria-expanded="true"]')
+  ).not.toHaveCount(0);
+
+  const securityScheme = requestCard
+    .locator('[data-slot="select-trigger"]')
+    .first();
+  await securityScheme.click();
+  await page.getByRole("option", { name: "api_key", exact: true }).click();
+  await expect(securityScheme).toContainText("api_key");
+
+  const responseTabs = page
+    .locator(".openapi-tabs__response-header-section")
+    .getByRole("tab");
+  await responseTabs.filter({ hasText: "405" }).click();
+  await expect(responseTabs.filter({ hasText: "405" })).toHaveAttribute(
+    "aria-selected",
+    "true"
+  );
+
+  const codePanel = page.locator(".openapi-right-panel__container");
+  const curlTab = codePanel.getByRole("tab", { name: "curl", exact: true });
+  await curlTab.click();
+  await expect(curlTab).toHaveAttribute("aria-selected", "true");
+  const wordWrap = codePanel.getByRole("button", { name: "Toggle word wrap" });
+  await wordWrap.click();
+  await expect(wordWrap).toHaveAttribute("aria-pressed", "true");
+
+  await page.getByRole("button", { name: /Color palette:/ }).click();
+  await page.getByRole("menuitemradio", { name: "Violet" }).click();
+  await expect(
+    page.getByRole("menuitemradio", { name: "Violet" })
+  ).toHaveAttribute("aria-checked", "true");
+  await page.keyboard.press("Escape");
+  await expect(
+    page.getByRole("button", { name: "Color palette: Violet" })
+  ).toBeVisible();
+
+  const copy = codePanel
+    .locator(".openapi-explorer__code-block-copy-btn")
+    .first();
+  await copy.click();
+  await expect(copy).toHaveAttribute("aria-label", "Copied");
+
+  const expand = codePanel
+    .locator(".openapi-explorer__code-block-expand-btn")
+    .first();
+  await expand.click();
+  const dialog = page.getByRole("dialog", { name: "Code snippet" });
+  await expect(dialog).toBeVisible();
+  await expect(dialog.locator("pre")).toBeVisible();
+  await page.keyboard.press("Escape");
+  await expect(dialog).toBeHidden();
+  await expect(expand).toBeFocused();
+
+  await page.route("**/v2/pet", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      headers: { "access-control-allow-origin": "*" },
+      body: JSON.stringify({ id: 1, name: "Rex", photoUrls: [] }),
+    });
+  });
+  await requestCard.getByPlaceholder("Some cookie").fill("session=ok");
+  await requestCard.getByRole("button", { name: "Send API Request" }).click();
+  const responseCard = page
+    .locator('[data-slot="card"]')
+    .filter({ has: page.getByText("Response", { exact: true }) });
+  await expect(responseCard.getByText("200", { exact: true })).toBeVisible();
+  await responseCard.getByRole("button", { name: "Clear" }).click();
+  await expect(
+    responseCard.getByText(/Click the Send API Request button/)
+  ).toBeVisible();
+
+  expect(errors).toEqual([]);
+});
+
+test("mobile keeps every OpenAPI surface reachable without clipping", async ({
+  page,
+}) => {
+  const errors = collectBrowserErrors(page);
+  await page.setViewportSize({ width: 375, height: 812 });
+  await page.goto("/petstore/swagger-petstore-yaml");
+  await expect(page.locator('[data-slot="table-container"]')).toHaveCount(7);
+  await expectNoHorizontalOverflow(page);
+
+  await page.goto("/petstore/add-pet");
+  await expectNoHorizontalOverflow(page);
+  await page.getByRole("button", { name: "Toggle navigation bar" }).click();
+  await expect(page.getByRole("dialog", { name: "Navigation" })).toBeVisible();
+  await page.getByRole("button", { name: "Back to main menu" }).click();
+  await expect(
+    page.getByRole("button", { name: /Color palette:/ })
+  ).toBeVisible();
+  await page.keyboard.press("Escape");
+
+  await expect(
+    page.getByRole("heading", { name: "Add a new pet to the store" })
+  ).toBeVisible();
+  await expect(page.getByText("Request", { exact: true }).last()).toBeVisible();
+  await expect(
+    page.getByText("Response", { exact: true }).last()
+  ).toBeVisible();
+  await expectNoHorizontalOverflow(page);
+  expect(errors).toEqual([]);
+});
diff --git a/yarn.lock b/yarn.lock
index d566c8969..2250ecf39 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5641,13 +5641,6 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb"
   integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
 
-"@types/react-modal@^3.16.3":
-  version "3.16.3"
-  resolved "https://registry.yarnpkg.com/@types/react-modal/-/react-modal-3.16.3.tgz#250f32c07f1de28e2bcf9c3e84b56adaa6897013"
-  integrity sha512-xXuGavyEGaFQDgBv4UVm8/ZsG+qxeQ7f77yNrW3n+1J6XAstUy5rYHeIHPh1KzsGc6IkCIdu6lQ2xWzu1jBTLg==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-router-config@*", "@types/react-router-config@^5.0.7":
   version "5.0.11"
   resolved "https://registry.yarnpkg.com/@types/react-router-config/-/react-router-config-5.0.11.tgz#2761a23acc7905a66a94419ee40294a65aaa483a"
@@ -10073,11 +10066,6 @@ executable@^4.1.1:
   dependencies:
     pify "^2.2.0"
 
-exenv@^1.2.0:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
-  integrity sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==
-
 exif-parser@^0.1.12:
   version "0.1.12"
   resolved "https://registry.yarnpkg.com/exif-parser/-/exif-parser-0.1.12.tgz#58a9d2d72c02c1f6f02a0ef4a9166272b7760922"
@@ -16772,11 +16760,6 @@ react-json-view-lite@^2.3.0:
   resolved "https://registry.yarnpkg.com/react-json-view-lite/-/react-json-view-lite-2.5.0.tgz#c7ff011c7cc80e9900abc7aa4916c6a5c6d6c1c6"
   integrity sha512-tk7o7QG9oYyELWHL8xiMQ8x4WzjCzbWNyig3uexmkLb54r8jO0yH3WCWx8UZS0c49eSA4QUmG5caiRJ8fAn58g==
 
-react-lifecycles-compat@^3.0.0:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
-  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
-
 react-live@^4.1.8:
   version "4.1.8"
   resolved "https://registry.yarnpkg.com/react-live/-/react-live-4.1.8.tgz#287fb6c5127c2d89a6fe39380278d95cc8e661b6"
@@ -16822,16 +16805,6 @@ react-markdown@^10.1.0:
     unist-util-visit "^5.0.0"
     vfile "^6.0.0"
 
-react-modal@^3.16.3:
-  version "3.16.3"
-  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.16.3.tgz#c412d41915782e3c261253435d01468e2439b11b"
-  integrity sha512-yCYRJB5YkeQDQlTt17WGAgFJ7jr2QYcWa1SHqZ3PluDmnKJ/7+tVU+E6uKyZ0nODaeEj+xCpK4LcSnKXLMC0Nw==
-  dependencies:
-    exenv "^1.2.0"
-    prop-types "^15.7.2"
-    react-lifecycles-compat "^3.0.0"
-    warning "^4.0.3"
-
 react-redux@^9.2.0:
   version "9.2.0"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-9.2.0.tgz#96c3ab23fb9a3af2cb4654be4b51c989e32366f5"
@@ -19569,13 +19542,6 @@ walker@^1.0.7:
   dependencies:
     makeerror "1.0.12"
 
-warning@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
-  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
-  dependencies:
-    loose-envify "^1.0.0"
-
 watchpack@^2.4.4:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.5.1.tgz#dd38b601f669e0cbf567cb802e75cead82cde102"