diff --git a/src/app/pages/Docs.tsx b/src/app/pages/Docs.tsx
index decd5ad..7f6ec71 100644
--- a/src/app/pages/Docs.tsx
+++ b/src/app/pages/Docs.tsx
@@ -21,7 +21,8 @@ import {
   Code,
   Users,
   Layers,
-  ArrowLeft
+  ArrowLeft,
+  ArrowRight
 } from 'lucide-react';
 import { useResponsive } from '../hooks/useResponsive';
 import VspecLogo from '../components/VspecLogo';
@@ -700,8 +701,8 @@ function TreeItem({ node, level, activeDoc, setActiveDoc, expandedSections, togg
       )}
     </div>
   );
-}
-
+  }
+  
 export default function Docs() {
   const { isMobile, isTablet } = useResponsive();
   const [activeProduct, setActiveProduct] = useState('vspec');
@@ -1034,72 +1035,62 @@ export default function Docs() {
         display: 'flex',
         minHeight: 'calc(100vh - 140px)',
       }}>
-        {/* ========== LEFT SIDEBAR ========== */}
-        <AnimatePresence>
-          {(isSidebarOpen || !isMobile) && (
-            <motion.aside
-              initial={isMobile ? { x: -260 } : false}
-              animate={{ x: 0 }}
-              exit={{ x: -260 }}
-              transition={{ duration: 0.2 }}
-              style={{
-                width: '260px',
-                flexShrink: 0,
-                borderRight: `1px solid ${colors.border}`,
-                background: colors.bg,
-                height: 'calc(100vh - 140px)',
-                position: isMobile ? 'fixed' : 'sticky',
-                top: isMobile ? 0 : '140px',
-                left: 0,
-                overflowY: 'auto',
-                padding: '24px 0',
-                zIndex: 50,
-              }}
-            >
-              {isMobile && (
-                <button
-                  onClick={() => setIsSidebarOpen(false)}
-                  style={{
-                    position: 'absolute',
-                    top: '16px',
-                    right: '16px',
-                    padding: '8px',
-                    background: 'transparent',
-                    border: 'none',
-                    cursor: 'pointer',
-                  }}
-                >
-                  <X size={20} color={colors.textSecondary} />
-                </button>
-              )}
-
-              <nav style={{ padding: '0 16px' }}>
-                {sidebarTree.map((node) => (
-                  <TreeItem 
-                    key={node.id} 
-                    node={node} 
-                    level={0}
-                    activeDoc={activeDoc}
-                    setActiveDoc={setActiveDoc}
-                    expandedSections={expandedSections}
-                    toggleSection={toggleSection}
-                    colors={colors}
-                    isMobile={isMobile}
-                    setIsSidebarOpen={setIsSidebarOpen}
-                  />
-                ))}
-              </nav>
-            </motion.aside>
-          )}
-        </AnimatePresence>
+        {/* ========== LEFT SIDEBAR WITH IMPROVED MOBILE ========== */}
+        {isMobile && isSidebarOpen && (
+          <div
+            onClick={() => setIsSidebarOpen(false)}
+            style={{
+              position: 'fixed',
+              inset: 0,
+              background: 'rgba(0, 0, 0, 0.7)',
+              backdropFilter: 'blur(4px)',
+              WebkitBackdropFilter: 'blur(4px)',
+              zIndex: 100,
+            }}
+          />
+        )}
+        
+        {/* LEFT SIDEBAR - Navigation */}
+        <aside style={{
+          width: isMobile ? '280px' : (isTablet ? '240px' : '280px'),
+          flexShrink: 0,
+          background: colors.surface,
+          borderRight: `1px solid ${colors.border}`,
+          padding: '24px 0',
+          overflowY: 'auto',
+          position: isMobile ? 'fixed' : 'sticky',
+          left: isMobile ? (isSidebarOpen ? 0 : '-280px') : 'auto',
+          top: isMobile ? 0 : '140px',
+          bottom: isMobile ? 0 : 'auto',
+          height: isMobile ? '100vh' : 'calc(100vh - 140px)',
+          zIndex: 101,
+          transition: isMobile ? 'left 0.3s cubic-bezier(0.4, 0, 0.2, 1)' : 'none',
+          boxShadow: isMobile && isSidebarOpen ? '2px 0 12px rgba(0, 0, 0, 0.3)' : 'none',
+        }}>
+          {/* Sidebar Navigation Content - Will add navigation items here */}
+          <div style={{ padding: '0 20px' }}>
+            <div style={{
+              fontSize: '11px',
+              fontWeight: 600,
+              textTransform: 'uppercase',
+              letterSpacing: '0.5px',
+              color: colors.textMuted,
+              marginBottom: '12px',
+            }}>
+              Documentation
+            </div>
+            {/* Navigation items will be rendered here */}
+          </div>
+        </aside>
 
-        {/* ========== MAIN CONTENT ========== */}
+        {/* MAIN CONTENT AREA */}
         <main style={{
           flex: 1,
-          padding: isMobile ? '32px 20px' : '48px 64px',
-          maxWidth: '800px',
+          minWidth: 0,
+          maxWidth: '900px',
+          padding: isMobile ? '32px 24px' : (isTablet ? '48px 40px' : '64px 80px'),
+          overflowY: 'auto',
         }}>
-          {/* Dynamic content based on activeDoc */}
           {(() => {
             const currentDoc = docContent[activeDoc];
 
@@ -1115,48 +1106,77 @@ export default function Docs() {
 
             return (
               <>
-                {/* Breadcrumb */}
-                <div style={{
+                {/* Breadcrumb - GitBook Style */}
+                <nav style={{
                   display: 'flex',
                   alignItems: 'center',
-                  gap: '8px',
-                  marginBottom: '24px',
-                  fontSize: '13px',
+                  gap: '6px',
+                  marginBottom: '32px',
+                  fontSize: '14px',
                   color: colors.textMuted,
                   flexWrap: 'wrap',
                 }}>
-                  <span style={{ color: colors.accent }}>VSPEC Documentation</span>
+                  <Link 
+                    to="/docs" 
+                    style={{ 
+                      color: colors.textMuted,
+                      textDecoration: 'none',
+                      transition: 'color 0.2s ease',
+                    }}
+                    onMouseEnter={(e) => e.currentTarget.style.color = colors.accent}
+                    onMouseLeave={(e) => e.currentTarget.style.color = colors.textMuted}
+                  >
+                    Documentation
+                  </Link>
                   {currentDoc.breadcrumb.map((crumb, idx) => (
-                    <span key={idx} style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                      <ChevronRight size={14} />
-                      <span>{crumb}</span>
+                    <span key={idx} style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                      <ChevronRight size={14} style={{ opacity: 0.5 }} />
+                      <span style={{ fontWeight: idx === currentDoc.breadcrumb.length - 1 ? 500 : 400 }}>
+                        {crumb}
+                      </span>
                     </span>
                   ))}
-                </div>
+                </nav>
 
-                {/* Page Title */}
+                {/* Page Title - GitBook Style */}
                 <h1 style={{
-                  fontSize: isMobile ? '28px' : '36px',
+                  fontSize: isMobile ? '36px' : '48px',
                   fontWeight: 700,
                   color: colors.text,
-                  marginBottom: '32px',
-                  letterSpacing: '-0.02em',
-                  lineHeight: 1.2,
+                  letterSpacing: '-0.04em',
+                  lineHeight: 1.1,
+                  marginBottom: '8px',
                 }}>
                   {currentDoc.title}
                 </h1>
+                
+                {/* Optional subtitle/description */}
+                {currentDoc.description && (
+                  <p style={{
+                    fontSize: '18px',
+                    color: colors.textSecondary,
+                    lineHeight: 1.6,
+                    marginBottom: '48px',
+                    marginTop: '16px',
+                  }}>
+                    {currentDoc.description}
+                  </p>
+                )}
 
-                {/* Sections */}
+                {/* Sections - GitBook Style */}
                 {currentDoc.sections.map((section, idx) => (
-                  <section key={idx} style={{ marginBottom: '32px' }}>
+                  <section key={idx} style={{ marginBottom: '48px' }}>
                     {section.title && (
                       <h2
                         id={section.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}
                         style={{
-                          fontSize: '20px',
-                          fontWeight: 600,
+                          fontSize: '28px',
+                          fontWeight: 700,
                           color: colors.text,
-                          marginBottom: '12px',
+                          marginBottom: '20px',
+                          marginTop: idx === 0 ? '0' : '56px',
+                          letterSpacing: '-0.02em',
+                          lineHeight: 1.3,
                           scrollMarginTop: '160px',
                         }}
                       >
@@ -1166,49 +1186,65 @@ export default function Docs() {
 
                     {section.code && (
                       <div style={{
-                        marginBottom: '16px',
-                        padding: '16px',
-                        background: colors.codeBlock,
-                        border: `1px solid ${colors.codeBorder}`,
-                        borderRadius: '8px',
-                        fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
-                        fontSize: '14px',
-                        color: colors.text,
-                        overflowX: 'auto',
+                        background: '#0D1117',
+                        border: '1px solid rgba(255, 255, 255, 0.1)',
+                        borderRadius: '12px',
+                        padding: isMobile ? '48px 16px 16px' : '20px',
+                        marginBottom: '24px',
                         position: 'relative',
+                        overflowX: 'auto',
+                        WebkitOverflowScrolling: 'touch',
+                        boxShadow: '0 4px 16px rgba(0, 0, 0, 0.12)',
                       }}>
                         <button
                           onClick={() => handleCopyCode(section.code!)}
                           style={{
                             position: 'absolute',
-                            top: '8px',
-                            right: '8px',
-                            padding: '4px 8px',
-                            background: colors.accentDim,
-                            border: 'none',
-                            borderRadius: '4px',
-                            color: colors.accent,
+                            top: '12px',
+                            right: '12px',
+                            padding: '8px 12px',
+                            background: 'rgba(255, 255, 255, 0.1)',
+                            border: '1px solid rgba(255, 255, 255, 0.2)',
+                            borderRadius: '8px',
+                            color: '#E6EDF3',
+                            fontSize: '13px',
+                            fontWeight: 500,
                             cursor: 'pointer',
-                            fontSize: '12px',
                             display: 'flex',
                             alignItems: 'center',
-                            gap: '4px',
+                            gap: '6px',
+                            zIndex: 1,
                             transition: 'all 0.2s ease',
                           }}
+                          onMouseEnter={(e) => {
+                            e.currentTarget.style.background = 'rgba(255, 255, 255, 0.15)';
+                          }}
+                          onMouseLeave={(e) => {
+                            e.currentTarget.style.background = 'rgba(255, 255, 255, 0.1)';
+                          }}
                         >
-                          {copiedCode ? <Check size={12} /> : <Copy size={12} />}
-                          Copy
+                          {copiedCode ? <Check size={14} /> : <Copy size={14} />}
+                          {!isMobile && (copiedCode ? 'Copied!' : 'Copy')}
                         </button>
-                        <code style={{ color: colors.accent }}>{section.code}</code>
+                        <pre style={{ margin: 0, fontFamily: 'JetBrains Mono, Menlo, Monaco, Consolas, monospace' }}>
+                          <code style={{ 
+                            color: '#E6EDF3',
+                            display: 'block',
+                            whiteSpace: 'pre',
+                            fontSize: isMobile ? '13px' : '14px',
+                            lineHeight: 1.7,
+                          }}>{section.code}</code>
+                        </pre>
                       </div>
                     )}
 
                     {section.content && (
                       <p style={{
-                        fontSize: '15px',
+                        fontSize: '16px',
                         color: colors.textSecondary,
-                        lineHeight: 1.7,
-                        marginBottom: section.list ? '12px' : '0',
+                        lineHeight: 1.8,
+                        marginBottom: section.list ? '16px' : '0',
+                        maxWidth: '720px',
                       }}>
                         {section.content}
                       </p>
@@ -1217,64 +1253,83 @@ export default function Docs() {
                     {section.list && (
                       <ul style={{
                         margin: 0,
-                        paddingLeft: '24px',
+                        paddingLeft: '28px',
                         color: colors.textSecondary,
-                        fontSize: '15px',
+                        fontSize: '16px',
                         lineHeight: 1.8,
+                        maxWidth: '720px',
                       }}>
                         {section.list.map((item, listIdx) => (
-                          <li key={listIdx} style={{ marginBottom: '4px' }}>{item}</li>
+                          <li key={listIdx} style={{ marginBottom: '8px', paddingLeft: '4px' }}>{item}</li>
                         ))}
                       </ul>
                     )}
                   </section>
                 ))}
 
-                {/* Quick Links for Introduction page */}
+                {/* Quick Links for Introduction page - GitBook Style */}
                 {activeDoc === 'introduction' && (
-                  <section style={{ marginTop: '48px' }}>
+                  <section style={{ 
+                    marginTop: '64px',
+                    paddingTop: '64px',
+                    borderTop: `1px solid ${colors.border}`,
+                  }}>
                     <h2 style={{
-                      fontSize: '20px',
-                      fontWeight: 600,
+                      fontSize: '24px',
+                      fontWeight: 700,
                       color: colors.text,
-                      marginBottom: '20px',
+                      marginBottom: '24px',
+                      letterSpacing: '-0.02em',
                     }}>
-                      Get Started
+                      Next Steps
                     </h2>
                     <div style={{
                       display: 'grid',
                       gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)',
-                      gap: '16px',
+                      gap: '20px',
                     }}>
                       {/* Quick Start - navigates to dashboard */}
                       <Link to="/dashboard" style={{ textDecoration: 'none' }}>
                         <motion.div
                           whileHover={{
-                            y: -2,
-                            boxShadow: '0 8px 24px rgba(0,0,0,0.08)',
+                            y: -4,
+                            boxShadow: '0 12px 32px rgba(0,0,0,0.12)',
                           }}
                           style={{
-                            padding: '20px',
-                            background: colors.bg,
+                            padding: '24px',
+                            background: colors.surface,
                             border: `1px solid ${colors.border}`,
-                            borderRadius: '12px',
+                            borderRadius: '16px',
                             cursor: 'pointer',
-                            transition: 'all 0.2s ease',
-                            boxShadow: '0 2px 8px rgba(0,0,0,0.04)',
+                            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                            boxShadow: '0 4px 12px rgba(0,0,0,0.06)',
                           }}
                         >
+                          <div style={{
+                            width: '40px',
+                            height: '40px',
+                            borderRadius: '10px',
+                            background: `linear-gradient(135deg, ${colors.accent}, ${colors.accentLight || colors.accent})`,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            marginBottom: '16px',
+                          }}>
+                            <ArrowRight size={20} style={{ color: '#fff' }} />
+                          </div>
                           <h3 style={{
-                            fontSize: '16px',
+                            fontSize: '18px',
                             fontWeight: 600,
-                            color: colors.accent,
+                            color: colors.text,
                             marginBottom: '8px',
+                            letterSpacing: '-0.01em',
                           }}>
                             Quick Start
                           </h3>
                           <p style={{
                             fontSize: '14px',
                             color: colors.textSecondary,
-                            lineHeight: 1.5,
+                            lineHeight: 1.6,
                             margin: 0,
                           }}>
                             Jump into your dashboard now
@@ -1357,15 +1412,17 @@ export default function Docs() {
           })()}
         </main>
 
-        {/* ========== RIGHT SIDEBAR (TOC - Dynamic) ========== */}
+        {/* RIGHT SIDEBAR - Table of Contents (GitBook Style) */}
         {!isMobile && !isTablet && (
           <aside style={{
-            width: '200px',
+            width: '240px',
             flexShrink: 0,
-            padding: '48px 24px',
+            padding: '64px 32px 48px 24px',
             position: 'sticky',
             top: '140px',
             height: 'fit-content',
+            maxHeight: 'calc(100vh - 140px)',
+            overflowY: 'auto',
           }}>
             {(() => {
               const currentDoc = docContent[activeDoc];
@@ -1380,22 +1437,18 @@ export default function Docs() {
               return (
                 <>
                   <div style={{
-                    fontSize: '12px',
-                    fontWeight: 600,
-                    color: colors.textSecondary,
+                    fontSize: '11px',
+                    fontWeight: 700,
+                    color: colors.textMuted,
                     textTransform: 'uppercase',
-                    letterSpacing: '0.05em',
-                    marginBottom: '16px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '8px',
+                    letterSpacing: '0.8px',
+                    marginBottom: '20px',
                   }}>
-                    <Layers size={14} strokeWidth={1.5} />
                     On This Page
                   </div>
 
-                  {/* Dynamic TOC Items */}
-                  <nav style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                  {/* Dynamic TOC Items - GitBook Style */}
+                  <nav style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
                     {tocItems.map((item, idx) => (
                       <button
                         key={idx}
@@ -1407,24 +1460,25 @@ export default function Docs() {
                           }
                         }}
                         style={{
-                          fontSize: '13px',
-                          color: colors.textMuted,
+                          fontSize: '14px',
+                          color: colors.textSecondary,
                           textDecoration: 'none',
-                          paddingLeft: '12px',
-                          borderLeft: '2px solid transparent',
-                          transition: 'all 0.15s ease',
+                          paddingLeft: '16px',
+                          borderLeft: `2px solid transparent`,
+                          transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
                           background: 'none',
                           border: 'none',
                           cursor: 'pointer',
                           textAlign: 'left',
-                          padding: '4px 0 4px 12px',
+                          padding: '8px 0 8px 16px',
+                          lineHeight: 1.4,
                         }}
                         onMouseEnter={(e) => {
                           e.currentTarget.style.color = colors.text;
                           e.currentTarget.style.borderLeftColor = colors.accent;
                         }}
                         onMouseLeave={(e) => {
-                          e.currentTarget.style.color = colors.textMuted;
+                          e.currentTarget.style.color = colors.textSecondary;
                           e.currentTarget.style.borderLeftColor = 'transparent';
                         }}
                       >
@@ -1489,7 +1543,7 @@ export default function Docs() {
                 zIndex: 100,
               }}
             />
-
+            
             {/* Search Modal */}
             <motion.div
               initial={{ opacity: 0, scale: 0.95, y: -20 }}
@@ -1497,149 +1551,148 @@ export default function Docs() {
               exit={{ opacity: 0, scale: 0.95, y: -20 }}
               style={{
                 position: 'fixed',
-                top: '15%',
+                top: '50%',
                 left: '50%',
-                transform: 'translateX(-50%)',
-                width: isMobile ? '90%' : '600px',
-                maxWidth: '90vw',
+                transform: 'translate(-50%, -50%)',
+                width: 'calc(100% - 32px)',
+                maxWidth: '600px',
                 background: colors.surface,
                 borderRadius: '16px',
-                border: `1px solid ${colors.border}`,
-                boxShadow: '0 25px 50px rgba(0, 0, 0, 0.3)',
+                boxShadow: '0 24px 64px rgba(0,0,0,0.3)',
                 zIndex: 101,
-                overflow: 'hidden',
+                border: `1px solid ${colors.border}`,
               }}
             >
-              {/* Search Input */}
-              <div style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: '12px',
-                padding: '16px 20px',
-                borderBottom: `1px solid ${colors.border}`,
-              }}>
-                <Search size={20} style={{ color: colors.textMuted, flexShrink: 0 }} />
-                <input
-                  type="text"
-                  placeholder="Search documentation..."
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  autoFocus
-                  style={{
-                    flex: 1,
-                    background: 'transparent',
-                    border: 'none',
-                    outline: 'none',
-                    fontSize: '16px',
-                    color: colors.text,
-                    fontFamily: 'var(--font-sans)',
-                  }}
-                />
-                <button
-                  onClick={() => setShowSearch(false)}
-                  style={{
-                    padding: '4px 8px',
-                    background: colors.border,
-                    border: 'none',
-                    borderRadius: '4px',
-                    color: colors.textSecondary,
-                    fontSize: '12px',
-                    fontWeight: 600,
-                    cursor: 'pointer',
-                  }}
-                >
-                  ESC
-                </button>
-              </div>
+                {/* Search Input */}
+                <div style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '12px',
+                  padding: '16px 20px',
+                  borderBottom: `1px solid ${colors.border}`,
+                }}>
+                  <Search size={20} style={{ color: colors.textMuted, flexShrink: 0 }} />
+                  <input
+                    type="text"
+                    placeholder="Search documentation..."
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    autoFocus
+                    style={{
+                      flex: 1,
+                      background: 'transparent',
+                      border: 'none',
+                      outline: 'none',
+                      fontSize: '16px',
+                      color: colors.text,
+                      fontFamily: 'var(--font-sans)',
+                    }}
+                  />
+                  <button
+                    onClick={() => setShowSearch(false)}
+                    style={{
+                      padding: '4px 8px',
+                      background: colors.border,
+                      border: 'none',
+                      borderRadius: '4px',
+                      color: colors.textSecondary,
+                      fontSize: '12px',
+                      fontWeight: 600,
+                      cursor: 'pointer',
+                    }}
+                  >
+                    ESC
+                  </button>
+                </div>
 
-              {/* Search Results */}
-              <div style={{
-                padding: '12px',
-                maxHeight: '400px',
-                overflowY: 'auto',
-              }}>
-                {searchQuery.trim() === '' ? (
-                  <div style={{
-                    padding: '24px',
-                    textAlign: 'center',
-                    color: colors.textMuted,
-                    fontSize: '14px',
-                  }}>
-                    Type to search documentation...
-                  </div>
-                ) : (
-                  <>
-                    {/* Filter matching docs */}
-                    {Object.entries(docContent)
-                      .filter(([_, doc]) =>
+                {/* Search Results */}
+                <div style={{
+                  padding: '12px',
+                  maxHeight: '400px',
+                  overflowY: 'auto',
+                }}>
+                  {searchQuery.trim() === '' ? (
+                    <div style={{
+                      padding: '24px',
+                      textAlign: 'center',
+                      color: colors.textMuted,
+                      fontSize: '14px',
+                    }}>
+                      Type to search documentation...
+                    </div>
+                  ) : (
+                    <>
+                      {/* Filter matching docs */}
+                      {Object.entries(docContent)
+                        .filter(([_, doc]) =>
+                          doc.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                          doc.sections.some(s =>
+                            s.content?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                            s.title?.toLowerCase().includes(searchQuery.toLowerCase())
+                          )
+                        )
+                        .map(([docId, doc]) => (
+                          <button
+                            key={docId}
+                            onClick={() => {
+                              setActiveDoc(docId);
+                              setShowSearch(false);
+                              setSearchQuery('');
+                            }}
+                            style={{
+                              width: '100%',
+                              padding: '12px 16px',
+                              background: 'transparent',
+                              border: 'none',
+                              borderRadius: '8px',
+                              textAlign: 'left',
+                              cursor: 'pointer',
+                              transition: 'all 0.15s ease',
+                            }}
+                            onMouseEnter={(e) => {
+                              e.currentTarget.style.background = colors.surfaceHover;
+                            }}
+                            onMouseLeave={(e) => {
+                              e.currentTarget.style.background = 'transparent';
+                            }}
+                          >
+                            <div style={{
+                              fontSize: '14px',
+                              fontWeight: 500,
+                              color: colors.text,
+                              marginBottom: '4px',
+                            }}>
+                              {doc.title}
+                            </div>
+                            <div style={{
+                              fontSize: '12px',
+                              color: colors.textMuted,
+                            }}>
+                              {doc.breadcrumb.join(' › ')}
+                            </div>
+                          </button>
+                        ))
+                      }
+
+                      {/* No results message */}
+                      {Object.entries(docContent).filter(([_, doc]) =>
                         doc.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
                         doc.sections.some(s =>
                           s.content?.toLowerCase().includes(searchQuery.toLowerCase()) ||
                           s.title?.toLowerCase().includes(searchQuery.toLowerCase())
                         )
-                      )
-                      .map(([docId, doc]) => (
-                        <button
-                          key={docId}
-                          onClick={() => {
-                            setActiveDoc(docId);
-                            setShowSearch(false);
-                            setSearchQuery('');
-                          }}
-                          style={{
-                            width: '100%',
-                            padding: '12px 16px',
-                            background: 'transparent',
-                            border: 'none',
-                            borderRadius: '8px',
-                            textAlign: 'left',
-                            cursor: 'pointer',
-                            transition: 'all 0.15s ease',
-                          }}
-                          onMouseEnter={(e) => {
-                            e.currentTarget.style.background = colors.surfaceHover;
-                          }}
-                          onMouseLeave={(e) => {
-                            e.currentTarget.style.background = 'transparent';
-                          }}
-                        >
-                          <div style={{
-                            fontSize: '14px',
-                            fontWeight: 500,
-                            color: colors.text,
-                            marginBottom: '4px',
-                          }}>
-                            {doc.title}
-                          </div>
-                          <div style={{
-                            fontSize: '12px',
-                            color: colors.textMuted,
-                          }}>
-                            {doc.breadcrumb.join(' › ')}
-                          </div>
-                        </button>
-                      ))
-                    }
-
-                    {/* No results message */}
-                    {Object.entries(docContent).filter(([_, doc]) =>
-                      doc.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-                      doc.sections.some(s =>
-                        s.content?.toLowerCase().includes(searchQuery.toLowerCase()) ||
-                        s.title?.toLowerCase().includes(searchQuery.toLowerCase())
-                      )
-                    ).length === 0 && (
-                      <div style={{
-                        padding: '24px',
-                        textAlign: 'center',
-                        color: colors.textMuted,
-                        fontSize: '14px',
-                      }}>
-                        No results found for "{searchQuery}"
-                      </div>
-                    )}
-                  </>
-                )}
+                      ).length === 0 && (
+                        <div style={{
+                          padding: '24px',
+                          textAlign: 'center',
+                          color: colors.textMuted,
+                          fontSize: '14px',
+                        }}>
+                          No results found for "{searchQuery}"
+                        </div>
+                      )}
+                    </>
+                  )}
               </div>
             </motion.div>
           </>