diff --git a/website/src/components/navbar/index.tsx b/website/src/components/navbar/index.tsx
index fc2a35a33..72cbd4ddc 100644
--- a/website/src/components/navbar/index.tsx
+++ b/website/src/components/navbar/index.tsx
@@ -3,6 +3,7 @@ import { useLocation } from "@docusaurus/router";
 import {
   AcademicCapIcon,
   ArrowPathIcon,
+  ArrowRightIcon,
   BookOpenIcon,
   BriefcaseIcon,
   BuildingLibraryIcon,
@@ -15,7 +16,9 @@ import {
   ComputerDesktopIcon,
   CurrencyDollarIcon,
   DocumentTextIcon,
+  HomeIcon,
   InformationCircleIcon,
+  MagnifyingGlassIcon,
   MegaphoneIcon,
   PencilSquareIcon,
   PuzzlePieceIcon,
@@ -29,7 +32,11 @@ import {
 } from "@heroicons/react/24/outline";
 import { BoltIcon, ChevronDownIcon, StarIcon } from "@heroicons/react/24/solid";
 import { useMediaQuery } from "@site/src/hooks/use-media-query";
+import SearchBar from "@theme/SearchBar";
+import clsx from "clsx";
 import React, { useState } from "react";
+import { DiscordLogo } from "../../../static/img/logos/discord";
+import { GitHubLogo } from "../../../static/img/logos/github";
 
 // Santa Claus Icon Component
 const SantaIcon = ({ className }: { className?: string }) => (
@@ -63,12 +70,29 @@ const SantaIcon = ({ className }: { className?: string }) => (
     />
   </svg>
 );
-import { DiscordLogo } from "../../../static/img/logos/discord";
-import { GitHubLogo } from "../../../static/img/logos/github";
 import { useGitHubStars } from "../../contexts/GitHubStarsContext";
 import useCasesData from "../usecases/usecases.json";
 import styles from "./styles.module.css";
 
+// Docs page tab configuration
+const docTabs = [
+  { label: "VoltAgent", href: "/docs/", match: "/docs/" },
+  { label: "Observability", href: "/observability-docs/", match: "/observability-docs/" },
+  {
+    label: "Actions & Triggers",
+    href: "/actions-triggers-docs/",
+    match: "/actions-triggers-docs/",
+  },
+  { label: "Evaluation", href: "/evaluation-docs/", match: "/evaluation-docs/" },
+  {
+    label: "Prompt Engineering",
+    href: "/prompt-engineering-docs/",
+    match: "/prompt-engineering-docs/",
+  },
+  { label: "Deployment", href: "/deployment-docs/", match: "/deployment-docs/" },
+  { label: "Recipes & Guides", href: "/recipes-and-guides/", match: "/recipes-and-guides/" },
+];
+
 export default function Navbar() {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isProductsOpen, setIsProductsOpen] = useState(false);
@@ -117,6 +141,112 @@ export default function Navbar() {
     }
   };
 
+  // Check if current page is a docs page
+  const isDocsPage =
+    location.pathname.includes("/docs") ||
+    location.pathname.includes("/observability-docs") ||
+    location.pathname.includes("/evaluation-docs") ||
+    location.pathname.includes("/prompt-engineering-docs") ||
+    location.pathname.includes("/deployment-docs") ||
+    location.pathname.includes("/actions-triggers-docs") ||
+    location.pathname.startsWith("/recipes-and-guides/");
+
+  // Render docs navbar for documentation pages
+  if (isDocsPage) {
+    return (
+      <nav className={styles.docsNavbar}>
+        {/* Top Row: Logo + Search + Version + Actions */}
+        <div className={styles.docsNavbarTop}>
+          <div className={styles.docsLeftSection}>
+            <Link to="/docs/" className={styles.docsLogoLink}>
+              <SantaIcon className={styles.docsLogoIcon} />
+              <span className={styles.docsLogoText}>voltagent</span>
+              <span className={styles.docsDocsText}>Docs</span>
+            </Link>
+          </div>
+          <div className={styles.docsCenterSection}>
+            <div className={styles.docsVersionBadge}>v1.0.x</div>
+            <div className={styles.docsSearchWrapper}>
+              {/* Hidden SearchBar - triggers on button click */}
+              <div className={styles.docsSearchHidden}>
+                <SearchBar />
+              </div>
+              <button
+                type="button"
+                className={styles.docsSearchButton}
+                onClick={() => {
+                  // Click the hidden DocSearch button
+                  const searchButton = document.querySelector(
+                    ".DocSearch-Button",
+                  ) as HTMLButtonElement;
+                  if (searchButton) {
+                    searchButton.click();
+                  }
+                }}
+                aria-label="Search"
+              >
+                <MagnifyingGlassIcon className={styles.docsSearchIcon} />
+                <span className={styles.docsSearchText}>Search</span>
+                <span className={styles.docsSearchShortcut}>⌘K</span>
+              </button>
+            </div>
+          </div>
+          <div className={styles.docsRightSection}>
+            <Link
+              to="https://console.voltagent.dev/"
+              className={clsx(styles.docsSocialButton, styles.docsCtaButton)}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Try VoltOps"
+            >
+              <span>Try VoltOps</span>
+              <ArrowRightIcon className={styles.docsCtaIcon} />
+            </Link>
+            <Link to="/" className={styles.docsSocialButton} aria-label="Home">
+              <HomeIcon className={styles.docsSocialIconHome} />
+            </Link>
+            <Link
+              to="https://s.voltagent.dev/discord"
+              className={styles.docsSocialButton}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Discord"
+            >
+              <DiscordLogo className={styles.docsSocialIconDiscord} />
+            </Link>
+            <Link
+              to="https://github.com/voltagent/voltagent"
+              className={styles.docsSocialButton}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="GitHub"
+            >
+              <GitHubLogo className={styles.docsSocialIconGitHub} />
+            </Link>
+          </div>
+        </div>
+        {/* Bottom Row: Tabs */}
+        <div className={styles.docsNavbarBottom}>
+          <div className={styles.docsTabList} role="tablist" aria-label="Documentation sections">
+            {docTabs.map((tab) => (
+              <Link
+                key={tab.href}
+                to={tab.href}
+                className={clsx(
+                  styles.docsTab,
+                  location.pathname.startsWith(tab.match) && styles.docsTabActive,
+                )}
+              >
+                {tab.label}
+              </Link>
+            ))}
+          </div>
+        </div>
+      </nav>
+    );
+  }
+
+  // Default navbar for non-docs pages
   return (
     <nav className={styles.navbar}>
       <div className={styles.navbarInner}>
diff --git a/website/src/components/navbar/styles.module.css b/website/src/components/navbar/styles.module.css
index 7a341499b..a829b885f 100644
--- a/website/src/components/navbar/styles.module.css
+++ b/website/src/components/navbar/styles.module.css
@@ -310,3 +310,380 @@
     padding: 0 20px;
   }
 }
+
+/* ===== Docs Navbar Styles ===== */
+.docsNavbar {
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  background-color: #0a0a0a;
+  width: 100%;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
+  backdrop-filter: blur(12px);
+}
+
+[data-theme='light'] .docsNavbar {
+  background-color: #fdfdfd;
+  border-bottom-color: #e5e7eb;
+}
+
+.docsNavbarTop {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.625rem 1.5rem 0;
+  min-height: 52px;
+  margin-bottom: 5px;
+}
+
+[data-theme='light'] .docsNavbarTop {
+  border-bottom-color: rgba(0, 0, 0, 0.06);
+}
+
+.docsNavbarBottom {
+  display: flex;
+  align-items: center;
+  padding: 0 1.5rem;
+  min-height: 42px;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.docsNavbarBottom::-webkit-scrollbar {
+  display: none;
+}
+
+/* Left section - Logo */
+.docsLeftSection {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.docsLogoLink {
+  display: flex;
+  align-items: baseline;
+  gap: 0.375rem;
+  text-decoration: none;
+}
+
+.docsLogoIcon {
+  width: 1.1rem;
+  height: 1.1rem;
+  flex-shrink: 0;
+  align-self: center;
+}
+
+.docsLogoText {
+  font-size: 1.35rem;
+  font-weight: 700;
+  color: #00d992;
+}
+
+.docsFrameworkText {
+  font-size: 0.85rem;
+  color: #9ca3af;
+  white-space: nowrap;
+}
+
+.docsDocsText {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: #9ca3af;
+  white-space: nowrap;
+}
+
+/* Center section - Search + Version (left-aligned) */
+.docsCenterSection {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  flex: 1;
+  justify-content: flex-start;
+  margin-left: 1.25rem;
+}
+
+.docsSearchWrapper {
+  min-width: 240px;
+  max-width: 280px;
+  width: 100%;
+  position: relative;
+}
+
+.docsSearchHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.docsSearchButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  height: 32px;
+  padding: 0 0.75rem;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(75, 85, 99, 0.4);
+  color: #94a3b8;
+  font-size: 0.8rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-decoration: none;
+}
+
+.docsSearchButton:hover {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+[data-theme='light'] .docsSearchButton {
+  background: #f8fafc;
+  border-color: #e2e8f0;
+  color: #64748b;
+}
+
+[data-theme='light'] .docsSearchButton:hover {
+  background: rgba(0, 0, 0, 0.02);
+  border-color: rgba(0, 0, 0, 0.15);
+}
+
+.docsSearchIcon {
+  width: 14px;
+  height: 14px;
+  color: #9ca3af;
+}
+
+.docsSearchText {
+  flex: 1;
+  text-align: left;
+}
+
+.docsSearchShortcut {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  padding: 0.1875rem 0.375rem;
+  border-radius: 4px;
+  background: rgba(16, 185, 129, 0.1);
+  border: 1px solid rgba(16, 185, 129, 0.3);
+  color: #10b981;
+}
+
+[data-theme='light'] .docsSearchShortcut {
+  background: rgba(16, 185, 129, 0.1);
+  border-color: rgba(16, 185, 129, 0.3);
+  color: #10b981;
+}
+
+.docsVersionBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  padding: 0 0.625rem;
+  background: transparent;
+  border: 1px solid rgba(75, 85, 99, 0.4);
+  border-radius: 6px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: rgba(52, 211, 153, 0.92);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+[data-theme='light'] .docsVersionBadge {
+  background: rgba(16, 185, 129, 0.12);
+  border-color: rgba(5, 150, 105, 0.45);
+  color: #047857;
+}
+
+/* Right section - Actions */
+.docsRightSection {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.docsSocialButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  background: transparent;
+  border: 1px solid rgba(75, 85, 99, 0.4);
+  transition: background 0.2s ease, border-color 0.2s ease;
+  text-decoration: none;
+}
+
+.docsSocialButton:hover {
+  background: rgba(148, 163, 184, 0.12);
+  border-color: rgba(148, 163, 184, 0.3);
+}
+
+[data-theme='light'] .docsSocialButton {
+  border-color: #e5e7eb;
+}
+
+[data-theme='light'] .docsSocialButton:hover {
+  background: rgba(0, 0, 0, 0.04);
+  border-color: #d1d5db;
+}
+
+.docsCtaButton {
+  width: auto;
+  height: 32px;
+  padding: 0 0.75rem;
+  gap: 0.35rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: rgba(52, 211, 153, 0.92);
+  line-height: 1;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 6px;
+}
+
+[data-theme='light'] .docsCtaButton {
+  color: #047857;
+  background: rgba(16, 185, 129, 0.12);
+  border-color: rgba(5, 150, 105, 0.45);
+}
+
+[data-theme='light'] .docsCtaButton:hover {
+  background: rgba(16, 185, 129, 0.16);
+  border-color: rgba(5, 150, 105, 0.6);
+  color: #065f46;
+}
+
+.docsCtaIcon {
+  width: 16px;
+  height: 16px;
+}
+
+.docsSocialIconHome {
+  width: 18px;
+  height: 18px;
+  color: rgba(226, 232, 240, 0.92);
+}
+
+[data-theme='light'] .docsSocialIconHome {
+  color: #0f172a;
+}
+
+.docsSocialIconDiscord {
+  width: 18px;
+  height: 18px;
+  color: #5865f2;
+}
+
+.docsSocialIconGitHub {
+  width: 18px;
+  height: 18px;
+  color: rgba(226, 232, 240, 0.9);
+}
+
+[data-theme='light'] .docsSocialIconGitHub {
+  color: #0f172a;
+}
+
+.docsTabList {
+  display: inline-flex;
+  align-items: flex-end;
+  gap: 1.2rem;
+  padding: 0;
+}
+
+.docsTab {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  font-size: 0.88rem;
+  font-weight: 500;
+  color: #b2b2b2;
+  padding: 0.5rem 0rem;
+  letter-spacing: 0.005em;
+  transition: color 0.15s ease;
+  white-space: nowrap;
+}
+
+.docsTab:hover {
+  color: #b2b2b2;
+  text-decoration: none;
+}
+
+.docsTab:hover::after {
+  background: rgba(75, 85, 99, 0.5);
+}
+
+.docsTab::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 2px;
+  border-radius: 2px;
+  background: transparent;
+  transition: background 0.15s ease;
+}
+
+.docsTabActive {
+  color: #f2f2f2;
+}
+
+.docsTabActive:hover {
+  color: #f2f2f2;
+}
+
+.docsTabActive:hover::after {
+  background: #10b981;
+}
+
+.docsTabActive::after {
+  background: #10b981;
+}
+
+[data-theme='light'] .docsTab {
+  color: rgba(15, 23, 42, 0.6);
+}
+
+[data-theme='light'] .docsTab:hover {
+  color: rgba(15, 23, 42, 0.6);
+}
+
+[data-theme='light'] .docsTab:hover::after {
+  background: rgba(75, 85, 99, 0.3);
+}
+
+[data-theme='light'] .docsTabActive {
+  color: #059669;
+}
+
+[data-theme='light'] .docsTabActive:hover {
+  color: #059669;
+}
+
+[data-theme='light'] .docsTabActive:hover::after {
+  background: #10b981;
+}
+
+@media (max-width: 1024px) {
+  .docsNavbar {
+    display: none;
+  }
+}
diff --git a/website/src/components/ops/Observability.tsx b/website/src/components/ops/Observability.tsx
index 243e469cb..9facc55af 100644
--- a/website/src/components/ops/Observability.tsx
+++ b/website/src/components/ops/Observability.tsx
@@ -683,7 +683,6 @@ const TabItem = ({
   onClick: () => void;
 }) => {
   return (
-    // biome-ignore lint/a11y/useKeyWithClickEvents: ignore
     <div
       className={`flex flex-col items-center px-3 pt-2 cursor-pointer transition-all duration-300 ease-in-out  min-w-[80px] ${
         isActive ? "  " : "border-transparent text-gray-300 hover:text-gray-200 "
diff --git a/website/src/components/supervisor-agent/index.tsx b/website/src/components/supervisor-agent/index.tsx
index 6caed56cb..687ad6c7b 100644
--- a/website/src/components/supervisor-agent/index.tsx
+++ b/website/src/components/supervisor-agent/index.tsx
@@ -273,7 +273,6 @@ export function SupervisorAgent() {
               <div className="flex w-[45%] flex-col gap-6">
                 {/* Feature 1 - Centralized Coordination */}
                 <div className="relative h-full">
-                  {/* biome-ignore lint/a11y/useKeyWithClickEvents: ignore */}
                   <div
                     className={`h-[130px] p-5 rounded-lg ${
                       highlightedSection === "centralized"
@@ -301,7 +300,6 @@ export function SupervisorAgent() {
 
                 {/* Feature 2 - Specialized Agent Roles */}
                 <div className="relative h-full">
-                  {/* biome-ignore lint/a11y/useKeyWithClickEvents: ignore */}
                   <div
                     className={`h-[130px] p-5 rounded-lg ${
                       highlightedSection === "specialized"
@@ -362,7 +360,6 @@ export function SupervisorAgent() {
 
                 {/* Feature 4 - Dynamic Agent Selection */}
                 <div className="relative h-full">
-                  {/* biome-ignore lint/a11y/useKeyWithClickEvents: ignore */}
                   <div
                     className={`h-[130px] p-5 rounded-lg ${
                       highlightedSection === "dynamic"
diff --git a/website/src/components/supervisor-agent/mobile-code-block.tsx b/website/src/components/supervisor-agent/mobile-code-block.tsx
index 7162b9e09..cb3dee92a 100644
--- a/website/src/components/supervisor-agent/mobile-code-block.tsx
+++ b/website/src/components/supervisor-agent/mobile-code-block.tsx
@@ -186,7 +186,6 @@ export const MobileCodeBlock = ({ isVisible }: MobileCodeBlockProps) => {
               </span>
 
               {/* Shared Memory System */}
-              {/* biome-ignore lint/a11y/useKeyWithClickEvents: ignore */}
               <span
                 className={`block ${getHighlightClasses("memory")} break-words whitespace-pre-wrap`}
                 onClick={(e) => handleFeatureClick("memory", e)}
@@ -226,7 +225,6 @@ export const MobileCodeBlock = ({ isVisible }: MobileCodeBlockProps) => {
               </span>
 
               {/* Dynamic Agent Selection */}
-              {/* biome-ignore lint/a11y/useKeyWithClickEvents: ignore */}
               <span
                 className={`block ${getHighlightClasses(
                   "dynamic",
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index e233852fc..30faa1135 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -945,7 +945,7 @@ footer .hoverLink:hover {
 
 @media (min-width: 1024px) {
   :root .DocSearch-Modal {
-    margin-top: 40px !important;
+    margin-top: 85px !important;
   }
 }
 
@@ -5334,11 +5334,12 @@ nav.table-of-contents .table-of-contents__link--active,
 /* Table of Contents additional styles */
 .tableOfContents {
   position: sticky;
-  top: calc(var(--ifm-navbar-height) + 1rem);
-  max-height: calc(100vh - var(--ifm-navbar-height) - 2rem);
-  overflow-y: auto;
+  top: 100px;
+  max-height: none;
+  overflow: visible;
   padding-left: 0;
   padding-right: 0;
+  padding-top: 1.5rem;
   padding-bottom: 1rem;
   width: 100%;
   max-width: 300px;
@@ -5413,6 +5414,29 @@ nav.table-of-contents .table-of-contents__link--active,
   font-weight: 500 !important;
 }
 
+/* Level 1 link items (Evals, Triggers, Actions, etc.) - same style as category headers */
+.theme-doc-sidebar-item-link-level-1 > .menu__link {
+  font-size: 0.75rem !important;
+  font-weight: 700 !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.05em !important;
+  color: #ffffff !important;
+}
+
+[data-theme="dark"] .theme-doc-sidebar-item-link-level-1 > .menu__link {
+  color: #ffffff !important;
+}
+
+.theme-doc-sidebar-item-link-level-1 > .menu__link--active {
+  color: #ffffff !important;
+  border-left: 2px solid rgb(16, 185, 129) !important;
+}
+
+[data-theme="dark"] .theme-doc-sidebar-item-link-level-1 > .menu__link--active {
+  color: #ffffff !important;
+  border-left: 2px solid rgb(16, 185, 129) !important;
+}
+
 /* Custom Search Bar Styling */
 .navbar__search-input {
   background-color: rgba(255, 255, 255, 0.06) !important;
@@ -5499,7 +5523,7 @@ nav.table-of-contents .table-of-contents__link--active,
 
 .DocSearch-Modal {
   box-shadow: none !important;
-  margin-top: 40px !important;
+  margin-top: 85px !important;
   padding: 0 5px;
 }
 
@@ -5571,6 +5595,30 @@ nav.table-of-contents .table-of-contents__link--active,
   display: inline-flex !important;
 }
 
+.menu__caret svg {
+  width: 12px !important;
+  height: 12px !important;
+}
+
+/* Caret ::before pseudo-element - consistent icon size */
+.menu__caret::before {
+  background-size: 2rem 2rem !important;
+  width: 2rem !important;
+  height: 2rem !important;
+}
+
+/* Nested menu caret - same size as parent */
+.menu__list .menu__list .menu__caret svg {
+  width: 12px !important;
+  height: 12px !important;
+}
+
+.menu__list .menu__list .menu__caret::before {
+  background-size: 1.5rem 1.5rem !important;
+  width: 1.5rem !important;
+  height: 1.5rem !important;
+}
+
 .menu__list-item-collapsible .menu__caret {
   transform: rotate(-90deg);
 }
diff --git a/website/src/css/layout.css b/website/src/css/layout.css
index 1b05ed890..1274f0862 100644
--- a/website/src/css/layout.css
+++ b/website/src/css/layout.css
@@ -204,6 +204,11 @@ div[class^="announcementBar_"] button {
     /*  border-right: none !important; */
     margin-top: 0 !important;
     margin-left: 0;
+    position: sticky;
+    top: 100px;
+    height: calc(100vh - 100px);
+    align-self: flex-start;
+    overflow: hidden;
   }
 
   /* Target docSidebarContainer by attribute selector */
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 506ce5368..1b1369cba 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -8,12 +8,10 @@ import { FeatureShowcase } from "../components/feature-showcase";
 import { FeaturedBlog } from "../components/featured-blog";
 import { Hero } from "../components/hero";
 import { Integrations } from "../components/integrations";
-import LivePreview from "../components/live-preview";
 import Ops from "../components/ops";
 import { Rag } from "../components/rag";
 import { SupervisorAgent } from "../components/supervisor-agent";
 import { Testimonials } from "../components/testimonials";
-import { TwoBlocks } from "../components/two-blocks";
 import { DotPattern } from "../components/ui/dot-pattern";
 import { Workflows } from "../components/workflows";
 export default function Home(): JSX.Element {
@@ -75,7 +73,6 @@ export default function Home(): JSX.Element {
             <Workflows />
             <Rag />
             <Integrations />
-            <Ops />
             <FeaturedBlog />
             <CommunitySection />
           </div>
diff --git a/website/src/theme/DocRoot/Layout/Main/index.tsx b/website/src/theme/DocRoot/Layout/Main/index.tsx
index 7d687ad14..0dcad0efc 100644
--- a/website/src/theme/DocRoot/Layout/Main/index.tsx
+++ b/website/src/theme/DocRoot/Layout/Main/index.tsx
@@ -1,14 +1,10 @@
-import Link from "@docusaurus/Link";
 import { useActiveDocContext } from "@docusaurus/plugin-content-docs/client";
 import { useLocation } from "@docusaurus/router";
 import { useDocsSidebar } from "@docusaurus/theme-common/internal";
-import { DiscordLogo } from "@site/static/img/logos/discord";
-import { GitHubLogo } from "@site/static/img/logos/github";
 import type { Props } from "@theme/DocRoot/Layout/Main";
 import clsx from "clsx";
 import React, { useMemo } from "react";
 
-import { ArrowRightIcon, HomeIcon } from "@heroicons/react/24/outline";
 import styles from "./styles.module.css";
 
 export default function DocRootLayoutMain({
@@ -22,8 +18,6 @@ export default function DocRootLayoutMain({
   const activeDocId = activeDoc?.id;
   const activeDocPath = activeDoc?.path ?? location.pathname;
 
-  // No nav content in header anymore per spec; only icons.
-
   const sectionLabel = useMemo(() => {
     if (!sidebar?.items || (!activeDocId && !activeDocPath)) {
       return null;
@@ -70,108 +64,6 @@ export default function DocRootLayoutMain({
         (hiddenSidebarContainer || !sidebar) && styles.docMainContainerEnhanced,
       )}
     >
-      <div className={styles.docHeader}>
-        <div className={styles.leftGroup}>
-          <div className={styles.tabList} role="tablist" aria-label="Documentation sections">
-            <Link
-              to="/docs/"
-              className={clsx(
-                styles.tab,
-                location.pathname.startsWith("/docs/") && styles.tabActive,
-              )}
-            >
-              VoltAgent Docs
-            </Link>
-            <Link
-              to="/observability-docs/"
-              className={clsx(
-                styles.tab,
-                location.pathname.startsWith("/observability-docs/") && styles.tabActive,
-              )}
-            >
-              Observability
-            </Link>
-            <Link
-              to="/actions-triggers-docs/"
-              className={clsx(
-                styles.tab,
-                location.pathname.startsWith("/actions-triggers-docs/") && styles.tabActive,
-              )}
-            >
-              Actions & Triggers
-            </Link>
-            <Link
-              to="/evaluation-docs/"
-              className={clsx(
-                styles.tab,
-                location.pathname.startsWith("/evaluation-docs/") && styles.tabActive,
-              )}
-            >
-              Evaluation
-            </Link>
-            <Link
-              to="/prompt-engineering-docs/"
-              className={clsx(
-                styles.tab,
-                location.pathname.startsWith("/prompt-engineering-docs/") && styles.tabActive,
-              )}
-            >
-              Prompt Engineering
-            </Link>
-            <Link
-              to="/deployment-docs/"
-              className={clsx(
-                styles.tab,
-                location.pathname.startsWith("/deployment-docs/") && styles.tabActive,
-              )}
-            >
-              Deployment
-            </Link>
-            <Link
-              to="/recipes-and-guides/"
-              className={clsx(
-                styles.tab,
-                location.pathname.startsWith("/recipes-and-guides/") && styles.tabActive,
-              )}
-            >
-              Recipes & Guides
-            </Link>
-          </div>
-        </div>
-        <div className={styles.actionGroup}>
-          <Link
-            to="https://console.voltagent.dev/"
-            className={clsx(styles.socialButton, styles.ctaButton)}
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label="Try VoltOps"
-          >
-            <span>Try VoltOps</span>
-            <ArrowRightIcon className={styles.ctaIcon} />
-          </Link>
-          <Link to="/" className={styles.socialButton} aria-label="Home">
-            <HomeIcon className={styles.socialIconHome} />
-          </Link>
-          <Link
-            to="https://s.voltagent.dev/discord"
-            className={styles.socialButton}
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label="Discord"
-          >
-            <DiscordLogo className={styles.socialIconDiscord} />
-          </Link>
-          <Link
-            to="https://github.com/voltagent/voltagent"
-            className={styles.socialButton}
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label="GitHub"
-          >
-            <GitHubLogo className={styles.socialIconGitHub} />
-          </Link>
-        </div>
-      </div>
       <div
         className={clsx(
           styles.docItemWrapper,
diff --git a/website/src/theme/DocRoot/Layout/Main/styles.module.css b/website/src/theme/DocRoot/Layout/Main/styles.module.css
index 18ca0cc6e..f17d68d31 100644
--- a/website/src/theme/DocRoot/Layout/Main/styles.module.css
+++ b/website/src/theme/DocRoot/Layout/Main/styles.module.css
@@ -11,72 +11,12 @@
 .docItemWrapper {
   position: relative;
   width: 100%;
-
-  padding: 0 var(--docs-content-horizontal-padding, 3.6rem) 2rem;
+  padding: 1.5rem var(--docs-content-horizontal-padding, 3.6rem) 2rem;
 }
 
 .docItemWrapperEnhanced {
 }
 
-.docHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1.5rem;
-  width: 100%;
-  margin: 0 auto;
-  padding: 0 var(--docs-content-horizontal-padding, 3.6rem);
-  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
-  position: sticky;
-  top: 0;
-  background-color: #0a0a0a;
-  z-index: 100;
-  flex-wrap: nowrap;
-}
-
-[data-theme='light'] .docHeader {
-  border-bottom-color: #e5e7eb;
-  background-color: #fdfdfd;
-}
-
-[data-theme='light'] .tab {
-  color: rgba(15, 23, 42, 0.6);
-}
-
-[data-theme='light'] .tab:hover {
-  color: #0f766e;
-}
-
-[data-theme='light'] .tabActive {
-  color: #059669;
-}
-
-.leftGroup {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.navLink {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #9ca3af;
-  text-decoration: none;
-  transition: color 0.2s;
-}
-
-.navLink:hover {
-  color: #fff;
-}
-
-[data-theme='light'] .navLink {
-  color: #6b7280;
-}
-
-[data-theme='light'] .navLink:hover {
-  color: #111827;
-}
-
 /* eyebrow section shown inside content */
 .eyebrowSection {
   font-size: 0.7rem;
@@ -84,283 +24,24 @@
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: #10b981 !important;
-  margin-top: 50px;
-}
-
-.brandLink {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.85rem;
-  text-decoration: none;
-  min-width: 0;
-}
-
-.brandMark {
-  width: 38px;
-  height: 38px;
-  border-radius: 14px;
-  background: radial-gradient(circle at 28% 22%, rgba(94, 234, 212, 0.45), rgba(12, 74, 110, 0.12));
-  border: 1px solid rgba(94, 234, 212, 0.28);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: inset 0 0 12px rgba(56, 189, 248, 0.2);
-}
-
-.brandIcon {
-  width: 20px;
-  height: 20px;
-  color: #5eead4;
-}
-
-.brandTextGroup {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  min-width: 0;
-}
-
-.brandTitle {
-  font-size: 0.95rem;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: rgba(226, 232, 240, 0.95);
-}
-
-.brandSubtitle {
-  font-size: 0.72rem;
-  font-weight: 500;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: rgba(148, 191, 174, 0.82);
-}
-
-.tabList {
-  display: inline-flex;
-  align-items: flex-end;
-  gap: 1.6rem;
-  padding: 0;
-}
-
-.tab {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-  font-size: 0.88rem;
-  font-weight: 600;
-  color: rgba(203, 213, 225, 0.72);
-  padding: 0.9rem 0.3rem 0.7rem;
-  letter-spacing: 0.005em;
-  transition: color 0.15s ease;
-}
-
-.tab:hover {
-  color: rgba(16, 185, 129, 0.85);
-}
-
-.tab::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 2px;
-  border-radius: 2px;
-  background: transparent;
-  transition: background 0.15s ease;
-}
-
-.tabActive {
-  color: #f2f2f2;
-}
-
-.tabActive::after {
-  background: #10b981;
-}
-
-/* Right-side minimal icon buttons */
-.actionGroup {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.socialButton {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 34px;
-  height: 34px;
-  border-radius: 8px;
-  background: transparent;
-  border: 1px solid rgba(148, 163, 184, 0.18);
-  transition: background 0.2s ease, border-color 0.2s ease;
-  text-decoration: none;
-}
-
-.socialButton:hover {
-  background: rgba(148, 163, 184, 0.12);
-  border-color: rgba(148, 163, 184, 0.3);
-}
-
-.ctaButton {
-  width: auto;
-  padding: 0 0.85rem;
-  gap: 0.35rem;
-  font-size: 0.78rem;
-  font-weight: 600;
-  color: rgba(52, 211, 153, 0.92);
-  line-height: 1;
-  white-space: nowrap;
-}
-
-
-
-.ctaIcon {
-  width: 16px;
-  height: 16px;
-}
-
-.socialIconHome {
-  width: 18px;
-  height: 18px;
-  color: rgba(226, 232, 240, 0.92);
-}
-
-.socialIconDiscord {
-  width: 18px;
-  height: 18px;
-  color: #5865f2;
-}
-
-.socialIconGitHub {
-  width: 18px;
-  height: 18px;
-  color: rgba(226, 232, 240, 0.9);
-}
-
-@media (max-width: 1024px) {
-  .docHeader {
-    display: none;
-  }
+  margin-top: 30px;
 }
 
 @media (max-width: 1160px) {
-  .docHeader {
-    padding: 0 var(--docs-content-horizontal-padding-mobile, 1.5rem);
-    max-width: 100%;
-    min-height: 64px;
-  }
-
   .docItemWrapper {
     max-width: 100%;
-    padding: 0 var(--docs-content-horizontal-padding-mobile, 1.5rem) 2rem;
+    padding: 1.5rem var(--docs-content-horizontal-padding-mobile, 1.5rem) 2rem;
   }
 }
 
 @media (max-width: 768px) {
-  .docHeader {
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 0.5rem 1.25rem 0;
-    max-width: 100%;
-  }
-
-  .leftGroup { display: none; }
-
-  .tabList {
+  /* Hide eyebrow section on mobile */
+  .eyebrowSection {
     display: none;
   }
 
-  /* Hide desktop header icons on mobile */
-  .actionGroup { display: none; }
-
-  /* Hide eyebrow section on mobile */
-  .eyebrowSection { display: none; }
-
   .docItemWrapper {
-    padding: 0 1.25rem 1.5rem;
-  }
-}
-
-@media (max-width: 576px) {
-  .actionGroup {
-    width: 100%;
-    justify-content: flex-start;
-  }
-}
-
-[data-theme='light'] .docHeader {
-  border-bottom-color: #e5e7eb;
-}
-
-[data-theme='light'] .sectionLabel {
-  color: rgba(2, 44, 34, 0.58);
-}
-
-[data-theme='light'] .brandMark {
-  background: radial-gradient(circle at 28% 22%, rgba(16, 185, 129, 0.42), rgba(209, 250, 229, 0.6));
-  border-color: rgba(16, 185, 129, 0.35);
-  box-shadow: inset 0 0 12px rgba(16, 185, 129, 0.2);
-}
-
-[data-theme='light'] .brandTitle {
-  color: rgba(15, 23, 42, 0.85);
-}
-
-[data-theme='light'] .brandSubtitle {
-  color: rgba(2, 44, 34, 0.62);
-}
-
-[data-theme='light'] .centerLinks {
-  background-color: rgba(87, 96, 106, 0.08);
-}
-
-[data-theme='light'] .centerLink {
-  color: #57606a;
-}
-
-[data-theme='light'] .centerLink:hover {
-  background-color: rgba(16, 185, 129, 0.1);
-  color: #059669;
-}
-
-[data-theme='light'] .centerLinkActive {
-  background-color: rgba(16, 185, 129, 0.15);
-  color: #059669;
-}
-
-[data-theme='light'] .socialButton {
-  background: transparent;
-}
-
-[data-theme='light'] .ctaButton {
-  color: #047857;
-  background: rgba(16, 185, 129, 0.12);
-  border-color: rgba(5, 150, 105, 0.45);
-}
-
-[data-theme='light'] .ctaButton:hover {
-  background: rgba(16, 185, 129, 0.16);
-  border-color: rgba(5, 150, 105, 0.6);
-  color: #065f46;
-}
-
-[data-theme='light'] .socialIconHome {
-  color: #0f172a;
-}
-
-[data-theme='light'] .socialIconGitHub {
-  color: #0f172a;
-}
-
-/* Hide the docs tab header on tablet & mobile (<1024px) */
-@media (max-width: 1024px) {
-  .docHeader {
-    display: none !important;
+    padding: 1.25rem 1.25rem 1.5rem;
   }
 }
 
diff --git a/website/src/theme/DocSidebar/Desktop/Content/index.js b/website/src/theme/DocSidebar/Desktop/Content/index.js
index cd76b25b7..e827252de 100644
--- a/website/src/theme/DocSidebar/Desktop/Content/index.js
+++ b/website/src/theme/DocSidebar/Desktop/Content/index.js
@@ -1,39 +1,11 @@
-import Link from "@docusaurus/Link";
 import { translate } from "@docusaurus/Translate";
-import { useLocation } from "@docusaurus/router";
 import { ThemeClassNames } from "@docusaurus/theme-common";
 import { useAnnouncementBar, useScrollPosition } from "@docusaurus/theme-common/internal";
-import { BoltIcon } from "@heroicons/react/24/solid";
 import DocSidebarItems from "@theme/DocSidebarItems";
-import SearchBar from "@theme/SearchBar";
 import clsx from "clsx";
 import React, { useState } from "react";
 import styles from "./styles.module.css";
 
-// Santa Claus Icon Component
-const SantaIcon = ({ className }) => (
-  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-    <circle cx="12" cy="13" r="8" fill="#FDBF6F" />
-    <path d="M4 11C4 11 5 4 12 4C19 4 20 11 20 11L12 9L4 11Z" fill="#CC0000" />
-    <ellipse cx="12" cy="11" rx="9" ry="2" fill="white" />
-    <circle cx="19" cy="5" r="2.5" fill="white" />
-    <path d="M12 4C12 4 16 3 19 5" stroke="#CC0000" strokeWidth="3" strokeLinecap="round" />
-    <circle cx="9" cy="12" r="1" fill="#333" />
-    <circle cx="15" cy="12" r="1" fill="#333" />
-    <circle cx="7" cy="14" r="1.2" fill="#FF9999" opacity="0.6" />
-    <circle cx="17" cy="14" r="1.2" fill="#FF9999" opacity="0.6" />
-    <circle cx="12" cy="14" r="1.2" fill="#E88" />
-    <path
-      d="M4 15C4 15 4 22 12 22C20 22 20 15 20 15C20 15 18 16 12 16C6 16 4 15 4 15Z"
-      fill="white"
-    />
-    <path
-      d="M7 15.5C7 15.5 9 16.5 12 16.5C15 16.5 17 15.5 17 15.5C17 15.5 15 17 12 17C9 17 7 15.5 7 15.5Z"
-      fill="white"
-    />
-  </svg>
-);
-
 function useShowAnnouncementBar() {
   const { isActive } = useAnnouncementBar();
   const [showAnnouncementBar, setShowAnnouncementBar] = useState(isActive);
@@ -50,55 +22,24 @@ function useShowAnnouncementBar() {
 
 export default function DocSidebarDesktopContent({ path, sidebar, className }) {
   const showAnnouncementBar = useShowAnnouncementBar();
-  const location = useLocation();
-  const isVoltOpsDoc = location.pathname.includes("/observability-docs/");
 
   return (
-    <div className={styles.contentWrapper}>
-      {/* Desktop header - hidden on mobile */}
-      <div className={styles.sidebarHeader}>
-        <div className={styles.logoRow}>
-          <Link
-            to={isVoltOpsDoc ? "/observability-docs/" : "/docs/"}
-            className={styles.sidebarLogo}
-          >
-            <div className={styles.logoContainer}>
-              <div className={styles.logoIcon}>
-                <SantaIcon className={styles.boltIcon} />
-              </div>
-              <span className={styles.logoText}>{isVoltOpsDoc ? "voltops" : "voltagent"}</span>
-              <span className={styles.frameworkText}>
-                {isVoltOpsDoc ? "Observability" : "Framework"}
-              </span>
-              <span className={styles.docsText}>Docs</span>
-            </div>
-          </Link>
-        </div>
-        <div className={styles.searchRow}>
-          <div className={styles.searchContainer}>
-            <SearchBar />
-          </div>
-          {!isVoltOpsDoc && <div className={styles.versionBadge}>v1.0.x</div>}
-        </div>
-      </div>
-
-      <nav
-        aria-label={translate({
-          id: "theme.docs.sidebar.navAriaLabel",
-          message: "Docs sidebar",
-          description: "The ARIA label for the sidebar navigation",
-        })}
-        className={clsx(
-          "menu thin-scrollbar",
-          styles.menu,
-          showAnnouncementBar && styles.menuWithAnnouncementBar,
-          className,
-        )}
-      >
-        <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, "menu__list")}>
-          <DocSidebarItems items={sidebar} activePath={path} level={1} />
-        </ul>
-      </nav>
-    </div>
+    <nav
+      aria-label={translate({
+        id: "theme.docs.sidebar.navAriaLabel",
+        message: "Docs sidebar",
+        description: "The ARIA label for the sidebar navigation",
+      })}
+      className={clsx(
+        "menu thin-scrollbar",
+        styles.menu,
+        showAnnouncementBar && styles.menuWithAnnouncementBar,
+        className,
+      )}
+    >
+      <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, "menu__list")}>
+        <DocSidebarItems items={sidebar} activePath={path} level={1} />
+      </ul>
+    </nav>
   );
 }
diff --git a/website/src/theme/DocSidebar/Desktop/Content/styles.module.css b/website/src/theme/DocSidebar/Desktop/Content/styles.module.css
index 253d71913..30998e85b 100644
--- a/website/src/theme/DocSidebar/Desktop/Content/styles.module.css
+++ b/website/src/theme/DocSidebar/Desktop/Content/styles.module.css
@@ -1,175 +1,13 @@
-.contentWrapper {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.sidebarHeader {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: 0.875rem 1rem;
-  flex-shrink: 0;
-}
-
-.logoRow {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  min-height: 24px;
-}
-
-.sidebarLogo {
-  text-decoration: none;
-  display: block;
-  flex: 1;
-  min-width: 0;
-}
-
-.logoContainer {
-  display: flex;
-  align-items: baseline;
-  gap: 0.375rem;
-  flex-wrap: nowrap;
-}
-
-.logoIcon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.boltIcon {
-  width: 0.75rem;
-  height: 0.75rem;
-  color: #00d992;
-}
-
-.logoText {
-  font-size: 1.2rem;
-  font-weight: 700;
-  color: #00d992;
-}
-
-.frameworkText {
-  font-size: 0.75rem;
-  color: #9ca3af;
-  margin-left: 0.25rem;
-  white-space: nowrap;
-}
-
-.docsText {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: #10b981;
-  white-space: nowrap;
-}
-
-.versionBadge {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.1875rem 0.375rem;
-  background-color: rgba(16, 185, 129, 0.1);
-  border: 1px solid rgba(16, 185, 129, 0.3);
-  border-radius: 4px;
-  font-size: 0.6875rem;
-  font-weight: 600;
-  color: #10b981;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-[data-theme='dark'] .versionBadge {
-  background-color: rgba(16, 185, 129, 0.15);
-  border-color: rgba(16, 185, 129, 0.4);
-}
-
-.searchRow {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.searchContainer {
-  position: relative;
-  flex: 1;
-}
-
-.searchContainer :global(.DocSearch-Button) {
-  width: 100% !important;
-  height: 32px !important;
-  padding: 0 0.625rem !important;
-  border-radius: 6px !important;
-  background-color: #fafafa !important;
-  border: 1px solid rgba(0, 0, 0, 0.1) !important;
-  font-size: 0.8125rem !important;
-  box-shadow: none !important;
-}
-
-.searchContainer :global(.DocSearch-Button):hover {
-  background-color: rgba(0, 0, 0, 0.02) !important;
-  border-color: rgba(0, 0, 0, 0.1) !important;
-  box-shadow: none !important;
-}
-
-.searchContainer :global(.DocSearch-Button-Placeholder) {
-  color: #9ca3af !important;
-  font-size: 0.8125rem !important;
-}
-
-.searchContainer :global(.DocSearch-Search-Icon) {
-  color: #9ca3af !important;
-  width: 14px !important;
-  height: 14px !important;
-}
-
-[data-theme='dark'] .searchContainer :global(.DocSearch-Button) {
-  background-color: #aaaaaa0d !important;
-  border-color: rgba(255, 255, 255, 0.1) !important;
-  box-shadow: none !important;
-}
-
-[data-theme='dark'] .searchContainer :global(.DocSearch-Button):hover {
-  background-color: rgba(255, 255, 255, 0.08) !important;
-  border-color: rgba(255, 255, 255, 0.1) !important;
-  box-shadow: none !important;
-}
-
-.searchContainer :global(.DocSearch-Button-Keys) {
-  background-color: rgba(16, 185, 129, 0.1) !important;
-  border: 1px solid rgba(16, 185, 129, 0.3) !important;
-  border-radius: 4px !important;
-  padding: 0.1875rem 0.375rem !important;
-  display: inline-flex !important;
-  align-items: center !important;
-}
-
-.searchContainer :global(.DocSearch-Button-Key) {
-  color: #10b981 !important;
-  font-size: 0.6875rem !important;
-  font-weight: 600 !important;
-}
-
-[data-theme='dark'] .searchContainer :global(.DocSearch-Button-Keys) {
-  background-color: rgba(16, 185, 129, 0.15) !important;
-  border-color: rgba(16, 185, 129, 0.4) !important;
-}
-
-[data-theme='dark'] .searchContainer :global(.DocSearch-Button-Key) {
-  color: #10b981 !important;
-}
-
 @media (min-width: 997px) {
-  .menu {
+   .menu {
     flex-grow: 1;
     padding: 0 1rem 1rem 1rem;
     overflow-y: auto;
+    height: 100%;
   }
   @supports (scrollbar-gutter: stable) {
     .menu {
-      padding: 0 1rem 1rem 1rem;
+            padding: 0 1rem 1rem 1rem;
       scrollbar-gutter: stable;
     }
   }
@@ -179,9 +17,7 @@
   }
 }
 
-/* Hide sidebar header on mobile */
-@media (max-width: 996px) {
-  .sidebarHeader {
-    display: none !important;
-  }
+/* Add top padding to sidebar menu list */
+:global(.theme-doc-sidebar-menu.menu__list) {
+  padding-top: 0.5rem;
 }
diff --git a/website/src/theme/Navbar/index.js b/website/src/theme/Navbar/index.js
index 8bc20a11f..f2f325993 100644
--- a/website/src/theme/Navbar/index.js
+++ b/website/src/theme/Navbar/index.js
@@ -18,12 +18,11 @@ export default function Navbar() {
 
   const isMobile = windowSize === "mobile";
 
-  if (isDocsPage) {
-    if (isMobile) {
-      return <DocNavbar />;
-    }
-    return null;
+  // Mobile docs pages: show DocNavbar
+  if (isDocsPage && isMobile) {
+    return <DocNavbar />;
   }
 
+  // All other cases (including desktop docs): show CustomNavbar
   return <CustomNavbar />;
 }
diff --git a/website/src/theme/TOC/index.js b/website/src/theme/TOC/index.js
index 07d34d523..5f364301d 100644
--- a/website/src/theme/TOC/index.js
+++ b/website/src/theme/TOC/index.js
@@ -49,16 +49,7 @@ export default function TOC({ toc, ...props }) {
   }));
 
   return (
-    <div
-      className={clsx(
-        "toc-wrapper",
-        "overflow-y-auto",
-        "overflow-x-hidden",
-        "max-h-[calc(100vh-var(--ifm-navbar-height)-2rem)]",
-        "sticky",
-        "top-20",
-      )}
-    >
+    <div className={clsx("toc-wrapper", "overflow-x-hidden", "sticky", "top-[100px]")}>
       <div className="flex items-center  gap-2">
         <ListBulletIcon className="w-4 h-4 text-[#94bfaebf]" />
         <h3 className="text-sm text-left font-semibold text-gray-900 dark:text-gray-100 m-0">