From 9ef3a2f0f143967b549f25bf228b44ff32696171 Mon Sep 17 00:00:00 2001
From: Necati Ozmen <necatiozmn@gmail.com>
Date: Wed, 24 Dec 2025 12:39:23 +0300
Subject: [PATCH 1/7] docs: refactor layout of sidebar

---
 website/src/components/navbar/index.tsx       | 145 +++++++-
 .../src/components/navbar/styles.module.css   | 334 ++++++++++++++++++
 website/src/css/custom.css                    |   6 +-
 website/src/css/layout.css                    |   5 +
 .../src/theme/DocRoot/Layout/Main/index.tsx   | 108 ------
 .../DocRoot/Layout/Main/styles.module.css     | 325 +----------------
 .../theme/DocSidebar/Desktop/Content/index.js |  93 +----
 .../Desktop/Content/styles.module.css         | 176 +--------
 website/src/theme/Navbar/index.js             |   9 +-
 website/src/theme/TOC/index.js                |  11 +-
 10 files changed, 515 insertions(+), 697 deletions(-)

diff --git a/website/src/components/navbar/index.tsx b/website/src/components/navbar/index.tsx
index fc2a35a33..22acc5207 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,10 @@ 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 React, { useState } from "react";
+import clsx from "clsx";
+import React, { useCallback, useEffect, 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 +69,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 Docs", 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 +140,122 @@ 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/");
+
+  // Open search modal (Docusaurus search)
+  const openSearch = useCallback(() => {
+    // Trigger Docusaurus search - press Cmd+K or Ctrl+K
+    const event = new KeyboardEvent("keydown", {
+      key: "k",
+      code: "KeyK",
+      metaKey: true,
+      ctrlKey: false,
+      bubbles: true,
+    });
+    document.dispatchEvent(event);
+  }, []);
+
+  // Check if on VoltOps/Observability docs
+  const isVoltOpsDoc = location.pathname.includes("/observability-docs/");
+
+  // 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={isVoltOpsDoc ? "/observability-docs/" : "/docs/"}
+              className={styles.docsLogoLink}
+            >
+              <SantaIcon className={styles.docsLogoIcon} />
+              <span className={styles.docsLogoText}>{isVoltOpsDoc ? "voltops" : "voltagent"}</span>
+              <span className={styles.docsFrameworkText}>
+                {isVoltOpsDoc ? "Observability" : "Framework"}
+              </span>
+              <span className={styles.docsDocsText}>Docs</span>
+            </Link>
+          </div>
+          <div className={styles.docsCenterSection}>
+            {!isVoltOpsDoc && <div className={styles.docsVersionBadge}>v1.0.x</div>}
+            <div className={styles.docsSearchWrapper}>
+              <button
+                type="button"
+                className={styles.docsSearchButton}
+                onClick={openSearch}
+                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..c13b1a693 100644
--- a/website/src/components/navbar/styles.module.css
+++ b/website/src/components/navbar/styles.module.css
@@ -310,3 +310,337 @@
     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;
+}
+
+[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: 48px;
+  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;
+  margin-left: 0.25rem;
+  white-space: nowrap;
+}
+
+.docsDocsText {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: #10b981;
+  white-space: nowrap;
+}
+
+/* Center section - Search + Version (left-aligned) */
+.docsCenterSection {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex: 1;
+  justify-content: flex-start;
+  margin-left: 1.5rem;
+}
+
+.docsSearchWrapper {
+  min-width: 240px;
+  max-width: 280px;
+  width: 100%;
+}
+
+.docsSearchButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.4rem 1rem;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  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;
+  padding: 0.25rem 0.5rem;
+  background-color: rgba(16, 185, 129, 0.1);
+  border: 1px solid rgba(16, 185, 129, 0.3);
+  border-radius: 4px;
+  font-size: 0.65rem;
+  font-weight: 600;
+  color: #10b981;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+[data-theme='light'] .docsVersionBadge {
+  background-color: rgba(16, 185, 129, 0.1);
+  border-color: rgba(16, 185, 129, 0.3);
+}
+
+/* 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: 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;
+}
+
+.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;
+  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;
+  display: inline-flex;
+  align-items: center;
+}
+
+[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: rgba(203, 213, 225, 0.72);
+  padding: 0.7rem 0rem;
+  letter-spacing: 0.005em;
+  transition: color 0.15s ease;
+  white-space: nowrap;
+}
+
+.docsTab:hover {
+  color: rgba(16, 185, 129, 0.85);
+  text-decoration: none;
+}
+
+.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::after {
+  background: #10b981;
+}
+
+[data-theme='light'] .docsTab {
+  color: rgba(15, 23, 42, 0.6);
+}
+
+[data-theme='light'] .docsTab:hover {
+  color: #0f766e;
+}
+
+[data-theme='light'] .docsTabActive {
+  color: #059669;
+}
+
+@media (max-width: 1024px) {
+  .docsNavbar {
+    display: none;
+  }
+}
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index e233852fc..e34fa2bd8 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -5334,9 +5334,9 @@ 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-bottom: 1rem;
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/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..cf572ad46 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;
 }
 
 .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,177 +24,10 @@
   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;
@@ -262,108 +35,16 @@
 }
 
 @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;
-  }
-}
-
 .docItemContainer_node_modules-\@docusaurus-theme-classic-lib-theme-DocItem-Layout-styles-module article > *:first-child {
   margin-top: 6px !important;
 }
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">

From 5b8a0fb2509b662fbee31d3079b0a71eaf0808cb Mon Sep 17 00:00:00 2001
From: Necati Ozmen <necatiozmn@gmail.com>
Date: Wed, 24 Dec 2025 12:43:18 +0300
Subject: [PATCH 2/7] style: adjust navbar margin and remove accessibility
 ignore comments

---
 website/src/components/navbar/styles.module.css               | 1 +
 website/src/components/ops/Observability.tsx                  | 1 -
 website/src/components/supervisor-agent/index.tsx             | 3 ---
 website/src/components/supervisor-agent/mobile-code-block.tsx | 2 --
 4 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/website/src/components/navbar/styles.module.css b/website/src/components/navbar/styles.module.css
index c13b1a693..8643943dc 100644
--- a/website/src/components/navbar/styles.module.css
+++ b/website/src/components/navbar/styles.module.css
@@ -333,6 +333,7 @@
   justify-content: space-between;
   padding: 0.625rem 1.5rem 0;
   min-height: 52px;
+  margin-bottom: 5px;
 }
 
 [data-theme='light'] .docsNavbarTop {
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",

From 595c03a3e4733f7030503b9b1aba327c33af2d3d Mon Sep 17 00:00:00 2001
From: Necati Ozmen <necatiozmn@gmail.com>
Date: Wed, 24 Dec 2025 13:21:55 +0300
Subject: [PATCH 3/7] style: update navbar documentation tab label and adjust
 styles for improved layout

---
 website/src/components/navbar/index.tsx       | 17 ++-----
 .../src/components/navbar/styles.module.css   | 49 ++++++++++---------
 2 files changed, 31 insertions(+), 35 deletions(-)

diff --git a/website/src/components/navbar/index.tsx b/website/src/components/navbar/index.tsx
index 22acc5207..edb0cea5b 100644
--- a/website/src/components/navbar/index.tsx
+++ b/website/src/components/navbar/index.tsx
@@ -75,7 +75,7 @@ import styles from "./styles.module.css";
 
 // Docs page tab configuration
 const docTabs = [
-  { label: "VoltAgent Docs", href: "/docs/", match: "/docs/" },
+  { label: "VoltAgent", href: "/docs/", match: "/docs/" },
   { label: "Observability", href: "/observability-docs/", match: "/observability-docs/" },
   {
     label: "Actions & Triggers",
@@ -163,9 +163,6 @@ export default function Navbar() {
     document.dispatchEvent(event);
   }, []);
 
-  // Check if on VoltOps/Observability docs
-  const isVoltOpsDoc = location.pathname.includes("/observability-docs/");
-
   // Render docs navbar for documentation pages
   if (isDocsPage) {
     return (
@@ -173,20 +170,14 @@ export default function Navbar() {
         {/* Top Row: Logo + Search + Version + Actions */}
         <div className={styles.docsNavbarTop}>
           <div className={styles.docsLeftSection}>
-            <Link
-              to={isVoltOpsDoc ? "/observability-docs/" : "/docs/"}
-              className={styles.docsLogoLink}
-            >
+            <Link to="/docs/" className={styles.docsLogoLink}>
               <SantaIcon className={styles.docsLogoIcon} />
-              <span className={styles.docsLogoText}>{isVoltOpsDoc ? "voltops" : "voltagent"}</span>
-              <span className={styles.docsFrameworkText}>
-                {isVoltOpsDoc ? "Observability" : "Framework"}
-              </span>
+              <span className={styles.docsLogoText}>voltagent</span>
               <span className={styles.docsDocsText}>Docs</span>
             </Link>
           </div>
           <div className={styles.docsCenterSection}>
-            {!isVoltOpsDoc && <div className={styles.docsVersionBadge}>v1.0.x</div>}
+            <div className={styles.docsVersionBadge}>v1.0.x</div>
             <div className={styles.docsSearchWrapper}>
               <button
                 type="button"
diff --git a/website/src/components/navbar/styles.module.css b/website/src/components/navbar/styles.module.css
index 8643943dc..844e76cd8 100644
--- a/website/src/components/navbar/styles.module.css
+++ b/website/src/components/navbar/styles.module.css
@@ -384,14 +384,13 @@
 .docsFrameworkText {
   font-size: 0.85rem;
   color: #9ca3af;
-  margin-left: 0.25rem;
   white-space: nowrap;
 }
 
 .docsDocsText {
   font-size: 0.85rem;
   font-weight: 600;
-  color: #10b981;
+  color: #9ca3af;
   white-space: nowrap;
 }
 
@@ -399,10 +398,10 @@
 .docsCenterSection {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 0.625rem;
   flex: 1;
   justify-content: flex-start;
-  margin-left: 1.5rem;
+  margin-left: 1.25rem;
 }
 
 .docsSearchWrapper {
@@ -416,10 +415,11 @@
   align-items: center;
   gap: 0.5rem;
   width: 100%;
-  padding: 0.4rem 1rem;
-  border-radius: 8px;
+  height: 32px;
+  padding: 0 0.75rem;
+  border-radius: 6px;
   background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(148, 163, 184, 0.18);
+  border: 1px solid rgba(75, 85, 99, 0.4);
   color: #94a3b8;
   font-size: 0.8rem;
   font-weight: 500;
@@ -474,20 +474,23 @@
 .docsVersionBadge {
   display: inline-flex;
   align-items: center;
-  padding: 0.25rem 0.5rem;
-  background-color: rgba(16, 185, 129, 0.1);
-  border: 1px solid rgba(16, 185, 129, 0.3);
-  border-radius: 4px;
-  font-size: 0.65rem;
+  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: #10b981;
+  color: rgba(52, 211, 153, 0.92);
   white-space: nowrap;
   flex-shrink: 0;
 }
 
 [data-theme='light'] .docsVersionBadge {
-  background-color: rgba(16, 185, 129, 0.1);
-  border-color: rgba(16, 185, 129, 0.3);
+  background: rgba(16, 185, 129, 0.12);
+  border-color: rgba(5, 150, 105, 0.45);
+  color: #047857;
 }
 
 /* Right section - Actions */
@@ -502,11 +505,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 34px;
-  height: 34px;
-  border-radius: 8px;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
   background: transparent;
-  border: 1px solid rgba(148, 163, 184, 0.18);
+  border: 1px solid rgba(75, 85, 99, 0.4);
   transition: background 0.2s ease, border-color 0.2s ease;
   text-decoration: none;
 }
@@ -527,15 +530,17 @@
 
 .docsCtaButton {
   width: auto;
-  padding: 0 0.85rem;
+  height: 32px;
+  padding: 0 0.75rem;
   gap: 0.35rem;
-  font-size: 0.78rem;
+  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 {
@@ -596,7 +601,7 @@
   text-decoration: none;
   font-size: 0.88rem;
   font-weight: 500;
-  color: rgba(203, 213, 225, 0.72);
+  color: #b2b2b2;
   padding: 0.7rem 0rem;
   letter-spacing: 0.005em;
   transition: color 0.15s ease;

From 9c8cd2ce97f569d891943d2d848e0e460c19b2ef Mon Sep 17 00:00:00 2001
From: Necati Ozmen <necatiozmn@gmail.com>
Date: Wed, 24 Dec 2025 15:14:51 +0300
Subject: [PATCH 4/7] style: update navbar search functionality and adjust
 styles for improved layout

---
 website/src/components/navbar/index.tsx       | 30 ++++++-------
 .../src/components/navbar/styles.module.css   | 45 +++++++++++++++++--
 website/src/css/custom.css                    |  4 +-
 website/src/data/tweets.json                  | 12 +----
 4 files changed, 59 insertions(+), 32 deletions(-)

diff --git a/website/src/components/navbar/index.tsx b/website/src/components/navbar/index.tsx
index edb0cea5b..72cbd4ddc 100644
--- a/website/src/components/navbar/index.tsx
+++ b/website/src/components/navbar/index.tsx
@@ -32,8 +32,9 @@ 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, { useCallback, useEffect, useState } from "react";
+import React, { useState } from "react";
 import { DiscordLogo } from "../../../static/img/logos/discord";
 import { GitHubLogo } from "../../../static/img/logos/github";
 
@@ -150,19 +151,6 @@ export default function Navbar() {
     location.pathname.includes("/actions-triggers-docs") ||
     location.pathname.startsWith("/recipes-and-guides/");
 
-  // Open search modal (Docusaurus search)
-  const openSearch = useCallback(() => {
-    // Trigger Docusaurus search - press Cmd+K or Ctrl+K
-    const event = new KeyboardEvent("keydown", {
-      key: "k",
-      code: "KeyK",
-      metaKey: true,
-      ctrlKey: false,
-      bubbles: true,
-    });
-    document.dispatchEvent(event);
-  }, []);
-
   // Render docs navbar for documentation pages
   if (isDocsPage) {
     return (
@@ -179,10 +167,22 @@ export default function Navbar() {
           <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={openSearch}
+                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} />
diff --git a/website/src/components/navbar/styles.module.css b/website/src/components/navbar/styles.module.css
index 844e76cd8..a829b885f 100644
--- a/website/src/components/navbar/styles.module.css
+++ b/website/src/components/navbar/styles.module.css
@@ -344,7 +344,7 @@
   display: flex;
   align-items: center;
   padding: 0 1.5rem;
-  min-height: 48px;
+  min-height: 42px;
   overflow-x: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
@@ -408,6 +408,19 @@
   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 {
@@ -602,17 +615,21 @@
   font-size: 0.88rem;
   font-weight: 500;
   color: #b2b2b2;
-  padding: 0.7rem 0rem;
+  padding: 0.5rem 0rem;
   letter-spacing: 0.005em;
   transition: color 0.15s ease;
   white-space: nowrap;
 }
 
 .docsTab:hover {
-  color: rgba(16, 185, 129, 0.85);
+  color: #b2b2b2;
   text-decoration: none;
 }
 
+.docsTab:hover::after {
+  background: rgba(75, 85, 99, 0.5);
+}
+
 .docsTab::after {
   content: "";
   position: absolute;
@@ -629,6 +646,14 @@
   color: #f2f2f2;
 }
 
+.docsTabActive:hover {
+  color: #f2f2f2;
+}
+
+.docsTabActive:hover::after {
+  background: #10b981;
+}
+
 .docsTabActive::after {
   background: #10b981;
 }
@@ -638,13 +663,25 @@
 }
 
 [data-theme='light'] .docsTab:hover {
-  color: #0f766e;
+  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/css/custom.css b/website/src/css/custom.css
index e34fa2bd8..8b1878e33 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;
   }
 }
 
@@ -5499,7 +5499,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;
 }
 
diff --git a/website/src/data/tweets.json b/website/src/data/tweets.json
index b9ba13e48..56dd59c58 100644
--- a/website/src/data/tweets.json
+++ b/website/src/data/tweets.json
@@ -210,17 +210,7 @@
           "expanded_url": "https://voltagent.dev/docs/agents/memory/overview/"
         }
       ],
-      "user_mentions": [
-        {
-          "indices": [
-            0,
-            9
-          ],
-          "id_str": "19107253",
-          "name": "Tom Siwik",
-          "screen_name": "tomsiwik"
-        }
-      ],
+      "user_mentions": [],
       "symbols": [],
       "media": []
     },

From bc32cb17a2d2a3dd0497b2cbe82fde0ac47a33ca Mon Sep 17 00:00:00 2001
From: Necati Ozmen <necatiozmn@gmail.com>
Date: Wed, 24 Dec 2025 15:50:51 +0300
Subject: [PATCH 5/7] style: enhance navbar and sidebar styles for improved
 readability and consistency

---
 website/src/css/custom.css                    | 50 +++++++++++++++++++
 website/src/data/tweets.json                  | 12 ++++-
 .../DocRoot/Layout/Main/styles.module.css     |  6 +--
 3 files changed, 64 insertions(+), 4 deletions(-)

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 8b1878e33..08ca0235a 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -4737,6 +4737,8 @@ code .token.coord {
   color: #ffffff !important;
 }
 
+
+
 [data-theme="dark"] .menu__list-item-collapsible .menu__link::before {
   color: rgb(16, 185, 129) !important;
 }
@@ -5339,6 +5341,7 @@ nav.table-of-contents .table-of-contents__link--active,
   overflow: visible;
   padding-left: 0;
   padding-right: 0;
+  padding-top: 1.5rem;
   padding-bottom: 1rem;
   width: 100%;
   max-width: 300px;
@@ -5413,6 +5416,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;
@@ -5571,6 +5597,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/data/tweets.json b/website/src/data/tweets.json
index 56dd59c58..b9ba13e48 100644
--- a/website/src/data/tweets.json
+++ b/website/src/data/tweets.json
@@ -210,7 +210,17 @@
           "expanded_url": "https://voltagent.dev/docs/agents/memory/overview/"
         }
       ],
-      "user_mentions": [],
+      "user_mentions": [
+        {
+          "indices": [
+            0,
+            9
+          ],
+          "id_str": "19107253",
+          "name": "Tom Siwik",
+          "screen_name": "tomsiwik"
+        }
+      ],
       "symbols": [],
       "media": []
     },
diff --git a/website/src/theme/DocRoot/Layout/Main/styles.module.css b/website/src/theme/DocRoot/Layout/Main/styles.module.css
index cf572ad46..f17d68d31 100644
--- a/website/src/theme/DocRoot/Layout/Main/styles.module.css
+++ b/website/src/theme/DocRoot/Layout/Main/styles.module.css
@@ -11,7 +11,7 @@
 .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 {
@@ -30,7 +30,7 @@
 @media (max-width: 1160px) {
   .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;
   }
 }
 
@@ -41,7 +41,7 @@
   }
 
   .docItemWrapper {
-    padding: 0 1.25rem 1.5rem;
+    padding: 1.25rem 1.25rem 1.5rem;
   }
 }
 

From 5bcd3391714a07f56cf37d46b7c1dbcc7dfe4e2d Mon Sep 17 00:00:00 2001
From: Necati Ozmen <necatiozmn@gmail.com>
Date: Wed, 24 Dec 2025 16:08:27 +0300
Subject: [PATCH 6/7] style: remove unnecessary blank lines in custom CSS for
 cleaner code

---
 website/src/css/custom.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 08ca0235a..30faa1135 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -4737,8 +4737,6 @@ code .token.coord {
   color: #ffffff !important;
 }
 
-
-
 [data-theme="dark"] .menu__list-item-collapsible .menu__link::before {
   color: rgb(16, 185, 129) !important;
 }

From 78e1f0f26fb3d76c2e782baa49a6b2b82c74e1f7 Mon Sep 17 00:00:00 2001
From: Necati Ozmen <necatiozmn@gmail.com>
Date: Wed, 24 Dec 2025 16:16:58 +0300
Subject: [PATCH 7/7] style: remove unused Ops component from Home page for
 cleaner code

---
 website/src/pages/index.tsx | 3 ---
 1 file changed, 3 deletions(-)

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>