diff --git a/apps/web/app/[section]/[...slug]/page.tsx b/apps/web/app/[section]/[...slug]/page.tsx
index d05cb98..bff6c35 100644
--- a/apps/web/app/[section]/[...slug]/page.tsx
+++ b/apps/web/app/[section]/[...slug]/page.tsx
@@ -15,19 +15,16 @@ import {
   Folder,
   FileText,
   Clock,
-  User,
-  Tag,
   History,
   FileDown,
   ArrowLeft,
-  BookOpen,
   Sparkles,
-  ShieldCheck,
   CheckCircle2,
   XCircle,
   Target,
   Trophy,
   Zap,
+  Tag,
 } from "lucide-react";
 
 export const dynamic = "force-dynamic";
@@ -63,7 +60,7 @@ function CustomFieldBadges({
   if (customEntries.length === 0) return null;
 
   return (
-    <div className="flex flex-wrap items-center gap-2 mt-4 pt-4 border-t border-[var(--border-color)]">
+    <div className="flex flex-wrap items-center gap-2 mt-4 pt-3.5 border-t border-[var(--border-color)]">
       {customEntries.map(([key, value]) => {
         const label = key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, " ");
         let colorClass = "bg-[var(--bg-elevated)] border-[var(--border-color)] text-[var(--text-secondary)]";
@@ -71,36 +68,36 @@ function CustomFieldBadges({
         let IconComponent = Tag;
 
         if (typeof value === "number") {
-          colorClass = "bg-[var(--brand)]/10 border-[var(--brand)]/30 text-[var(--brand)] dark:text-[var(--accent)]";
+          colorClass = "bg-[var(--bg-elevated)] border-[var(--border-color)] text-[var(--text-primary)] font-semibold";
           IconComponent = Target;
           displayValue = `${value} pts`;
         } else if (typeof value === "boolean") {
           colorClass = value
-            ? "bg-emerald-500/10 border-emerald-500/30 text-emerald-600 dark:text-emerald-400"
-            : "bg-rose-500/10 border-rose-500/30 text-rose-600 dark:text-rose-400";
+            ? "bg-emerald-500/10 border-emerald-500/30 text-emerald-600 dark:text-emerald-400 font-semibold"
+            : "bg-rose-500/10 border-rose-500/30 text-rose-600 dark:text-rose-400 font-semibold";
           IconComponent = value ? CheckCircle2 : XCircle;
           displayValue = value ? "Solved" : "Pending";
         } else if (Array.isArray(value)) {
-          colorClass = "bg-[var(--brand)]/10 border-[var(--brand)]/30 text-[var(--brand)] dark:text-[var(--accent)]";
+          colorClass = "bg-[var(--bg-elevated)] border-[var(--border-color)] text-[var(--text-secondary)]";
           IconComponent = Folder;
           displayValue = value.join(", ");
         } else {
           const v = String(value).toLowerCase();
           if (/^(easy|simple|beginner)/i.test(v)) {
-            colorClass = "bg-emerald-500/10 border-emerald-500/30 text-emerald-600 dark:text-emerald-400";
+            colorClass = "bg-emerald-500/10 border-emerald-500/30 text-emerald-600 dark:text-emerald-400 font-semibold";
             displayValue = "Easy";
           } else if (/^(medium|intermediate)/i.test(v)) {
-            colorClass = "bg-amber-500/10 border-amber-500/30 text-amber-600 dark:text-amber-400";
+            colorClass = "bg-amber-500/10 border-amber-500/30 text-amber-600 dark:text-amber-400 font-semibold";
             displayValue = "Medium";
           } else if (/^(hard|expert|advanced)/i.test(v)) {
-            colorClass = "bg-rose-500/10 border-rose-500/30 text-rose-600 dark:text-rose-400";
+            colorClass = "bg-rose-500/10 border-rose-500/30 text-rose-600 dark:text-rose-400 font-semibold";
             displayValue = "Hard";
           } else if (/^(pwn|web|crypto|misc|forensic|reverse|binary)/i.test(v)) {
-            colorClass = "bg-indigo-500/10 border-indigo-500/30 text-indigo-600 dark:text-indigo-300";
+            colorClass = "bg-[var(--bg-elevated)] border-[var(--border-color)] text-[var(--text-primary)] font-bold";
             IconComponent = Zap;
             displayValue = v.toUpperCase();
           } else if (/ctf|def.?con|event/i.test(v)) {
-            colorClass = "bg-[var(--brand)]/10 border-[var(--brand)]/30 text-[var(--brand)] dark:text-[var(--accent)]";
+            colorClass = "bg-[var(--bg-elevated)] border-[var(--border-color)] text-[var(--text-primary)]";
             IconComponent = Trophy;
             displayValue = String(value);
           } else {
@@ -111,11 +108,11 @@ function CustomFieldBadges({
         return (
           <span
             key={key}
-            className={`inline-flex items-center gap-1.5 px-3 py-1 border rounded-lg text-xs font-mono transition-colors ${colorClass}`}
+            className={`inline-flex items-center gap-1.5 px-2.5 py-1 border rounded-md text-xs font-mono transition-colors ${colorClass}`}
           >
             <IconComponent className="w-3.5 h-3.5 opacity-80" />
             <span className="text-[var(--text-muted)] font-sans">{label}:</span>
-            <span className="font-semibold">{displayValue}</span>
+            <span>{displayValue}</span>
           </span>
         );
       })}
@@ -187,33 +184,33 @@ function FolderIndexPage({
       </nav>
 
       {/* Header Card */}
-      <div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-2xl p-6 sm:p-7 shadow-sm">
+      <div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl p-6 shadow-xs">
         <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-4">
           <div className="flex items-center gap-3.5">
-            <div className="w-12 h-12 rounded-2xl bg-[var(--bg-elevated)] border border-[var(--border-color)] flex items-center justify-center text-[var(--brand)] dark:text-[var(--accent)] shadow-inner">
-              <Folder className="w-6 h-6" />
+            <div className="w-10 h-10 rounded-lg bg-[var(--bg-elevated)] border border-[var(--border-color)] flex items-center justify-center text-[var(--text-primary)]">
+              <Folder className="w-5 h-5" />
             </div>
             <div>
-              <h1 className="text-2xl sm:text-3xl font-extrabold text-[var(--text-primary)] tracking-tight">
+              <h1 className="text-2xl font-bold text-[var(--text-primary)] tracking-tight">
                 {folderName}
               </h1>
-              <p className="text-xs text-[var(--text-muted)] mt-1 font-mono">
-                Directory: <code className="text-[var(--brand)] dark:text-[var(--accent)] font-semibold">{section}/{slug}</code>
+              <p className="text-xs text-[var(--text-muted)] mt-0.5 font-mono">
+                Directory: <code>{section}/{slug}</code>
               </p>
             </div>
           </div>
 
           <div className="flex items-center gap-2">
-            <span className="text-xs font-mono text-[var(--text-muted)] bg-[var(--bg-elevated)] border border-[var(--border-color)] px-3 py-1.5 rounded-lg">
+            <span className="text-xs font-mono text-[var(--text-muted)] bg-[var(--bg-elevated)] border border-[var(--border-color)] px-2.5 py-1 rounded">
               {immediateDocs.length + folders.length} item{folders.length + immediateDocs.length !== 1 ? "s" : ""}
             </span>
             <Link
               href={`/${section}/${slug}/export`}
-              className="inline-flex items-center gap-1.5 text-xs bg-[var(--brand)] hover:bg-[var(--brand-hover)] text-white px-3.5 py-1.5 rounded-lg font-semibold transition-all shadow-md shadow-[var(--brand)]/20"
+              className="inline-flex items-center gap-1.5 text-xs bg-[var(--brand)] hover:opacity-90 text-[var(--brand-fg)] px-3 py-1.5 rounded font-semibold transition-all shadow-xs"
               title={`Export all ${folderName} documents as a single PDF report`}
             >
               <FileDown className="w-3.5 h-3.5" />
-              <span>Export PDF Report</span>
+              <span>Export PDF</span>
             </Link>
           </div>
         </div>
@@ -222,8 +219,8 @@ function FolderIndexPage({
       {/* Subfolders Grid */}
       {folders.length > 0 && (
         <div>
-          <h2 className="text-xs font-bold text-[var(--text-muted)] uppercase mb-3.5 tracking-wider font-mono flex items-center gap-2">
-            <Folder className="w-3.5 h-3.5 text-[var(--brand)] dark:text-[var(--accent)]" />
+          <h2 className="text-xs font-bold text-[var(--text-muted)] uppercase mb-3 tracking-wider font-mono flex items-center gap-2">
+            <Folder className="w-3.5 h-3.5 text-[var(--text-muted)]" />
             <span>Subfolders ({folders.length})</span>
           </h2>
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
@@ -231,16 +228,14 @@ function FolderIndexPage({
               <Link
                 key={folder}
                 href={`/${section}/${slug}/${folder}`.replace(/\/+/g, "/")}
-                className="group flex items-center gap-3.5 p-4 bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-2xl transition-all shadow-xs hover:shadow-md hover:-translate-y-0.5"
+                className="group flex items-center gap-3 p-3.5 bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--text-muted)] rounded-lg transition-colors shadow-xs"
               >
-                <div className="p-2 rounded-xl bg-[var(--bg-elevated)] text-[var(--brand)] dark:text-[var(--accent)]">
-                  <Folder className="w-5 h-5" />
-                </div>
+                <Folder className="w-4 h-4 text-[var(--text-muted)]" />
                 <div className="flex-1 min-w-0">
-                  <div className="text-sm font-bold text-[var(--text-primary)] group-hover:text-[var(--brand)] dark:group-hover:text-[var(--accent)] transition-colors truncate">
+                  <div className="text-xs font-semibold text-[var(--text-primary)] group-hover:underline truncate">
                     {folder.split(/[-_]/).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ")}
                   </div>
-                  <div className="text-xs text-[var(--text-muted)] font-mono mt-0.5">
+                  <div className="text-[11px] text-[var(--text-muted)] font-mono mt-0.5">
                     {info.docCount} document{info.docCount !== 1 ? "s" : ""}
                   </div>
                 </div>
@@ -253,31 +248,29 @@ function FolderIndexPage({
       {/* Documents List */}
       {immediateDocs.length > 0 && (
         <div>
-          <h2 className="text-xs font-bold text-[var(--text-muted)] uppercase mb-3.5 tracking-wider font-mono flex items-center gap-2">
-            <FileText className="w-3.5 h-3.5 text-[var(--brand)] dark:text-[var(--accent)]" />
+          <h2 className="text-xs font-bold text-[var(--text-muted)] uppercase mb-3 tracking-wider font-mono flex items-center gap-2">
+            <FileText className="w-3.5 h-3.5 text-[var(--text-muted)]" />
             <span>Documents ({immediateDocs.length})</span>
           </h2>
-          <div className="space-y-2.5">
+          <div className="space-y-2">
             {immediateDocs.map((doc) => (
               <Link
                 key={doc.slug}
                 href={`/${doc.slug}`}
-                className="group flex items-center justify-between gap-4 p-4 sm:p-5 bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-2xl transition-all shadow-xs hover:shadow-md hover:-translate-y-0.5"
+                className="group flex items-center justify-between gap-4 p-4 bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--text-muted)] rounded-lg transition-colors shadow-xs"
               >
-                <div className="flex items-center gap-3.5 min-w-0">
-                  <div className="p-2 rounded-xl bg-[var(--bg-elevated)] text-[var(--text-dim)] group-hover:text-[var(--brand)] dark:group-hover:text-[var(--accent)] transition-colors">
-                    <FileText className="w-4 h-4" />
-                  </div>
+                <div className="flex items-center gap-3 min-w-0">
+                  <FileText className="w-4 h-4 text-[var(--text-muted)] shrink-0" />
                   <div className="min-w-0">
-                    <div className="text-sm font-bold text-[var(--text-primary)] group-hover:text-[var(--brand)] dark:group-hover:text-[var(--accent)] transition-colors truncate">
+                    <div className="text-xs sm:text-sm font-semibold text-[var(--text-primary)] group-hover:underline truncate">
                       {doc.title}
                     </div>
                     {doc.tags.length > 0 && (
-                      <div className="flex flex-wrap gap-1.5 mt-2">
+                      <div className="flex flex-wrap gap-1 mt-1.5">
                         {doc.tags.slice(0, 4).map((t) => (
                           <span
                             key={t}
-                            className="text-[10px] px-2 py-0.5 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded-md text-[var(--text-muted)] font-mono"
+                            className="text-[10px] px-1.5 py-0.2 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded text-[var(--text-muted)] font-mono"
                           >
                             #{t}
                           </span>
@@ -303,8 +296,8 @@ function FolderIndexPage({
       )}
 
       {folders.length === 0 && immediateDocs.length === 0 && (
-        <div className="text-center py-16 border border-[var(--border-color)] rounded-2xl bg-[var(--bg-surface)]">
-          <p className="text-sm text-[var(--text-muted)]">No documents found in this directory.</p>
+        <div className="text-center py-12 border border-[var(--border-color)] rounded-lg bg-[var(--bg-surface)]">
+          <p className="text-sm text-[var(--text-muted)]">No documents in this directory.</p>
         </div>
       )}
     </div>
@@ -316,7 +309,7 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
   const searchParamsObj = await searchParams;
   const { edit, path: queryPath, sort } = searchParamsObj;
 
-  // Handle direct export views: /[section]/export, /[section]/[...folder]/export, or /export/pdf
+  // Handle direct export views
   if (section === "export" || (slug && slug[slug.length - 1] === "export")) {
     const isTrailingExport = slug && slug[slug.length - 1] === "export";
     const targetSlug = isTrailingExport ? slug.slice(0, -1) : slug;
@@ -363,7 +356,7 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
           <ArrowLeft className="w-3.5 h-3.5" />
           <span>Back to document</span>
         </Link>
-        <h1 className="text-2xl sm:text-3xl font-extrabold text-[var(--text-primary)] tracking-tight">
+        <h1 className="text-2xl font-bold text-[var(--text-primary)] tracking-tight">
           Edit: {doc.title}
         </h1>
         <DocForm
@@ -399,7 +392,7 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
       {/* Main Content Column */}
       <article className="flex-1 min-w-0">
         {/* Breadcrumbs Navigation */}
-        <nav className="flex items-center gap-2 text-xs text-[var(--text-dim)] mb-4 flex-wrap">
+        <nav className="flex items-center gap-2 text-xs text-[var(--text-dim)] mb-4 flex-wrap font-mono">
           <Link href="/" className="hover:text-[var(--text-primary)] transition-colors">
             MCPedia
           </Link>
@@ -414,7 +407,7 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
                 <span>/</span>
                 <Link
                   href={`/${crumbPath}`}
-                  className={isLast ? "text-[var(--text-primary)] font-semibold" : "hover:text-[var(--text-primary)] transition-colors"}
+                  className={isLast ? "text-[var(--text-primary)] font-semibold font-sans" : "hover:text-[var(--text-primary)] transition-colors font-sans"}
                 >
                   {label}
                 </Link>
@@ -424,17 +417,17 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
         </nav>
 
         {/* Hero Metadata Card */}
-        <div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-2xl p-6 sm:p-7 mb-8 shadow-sm">
-          <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-5 mb-5">
+        <div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl p-6 sm:p-7 mb-8 shadow-xs">
+          <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-4 mb-4">
             <div className="flex-1 min-w-0">
-              <div className="flex items-center gap-2 mb-2.5 flex-wrap">
-                <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-mono font-bold bg-[var(--brand)]/15 text-[var(--brand)] dark:text-[var(--accent)] border border-[var(--brand)]/30 uppercase">
+              <div className="flex items-center gap-2 mb-2 flex-wrap text-xs">
+                <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-mono font-bold bg-[var(--bg-elevated)] border border-[var(--border-color)] text-[var(--text-primary)] uppercase">
                   <span>{sectionInfo.icon}</span>
                   <span>{sectionInfo.label}</span>
                 </span>
                 <span className="text-xs text-[var(--text-dim)]">·</span>
-                <span className="text-xs text-[var(--text-muted)] font-medium">
-                  {doc.type.charAt(0).toUpperCase() + doc.type.slice(1)}
+                <span className="text-xs text-[var(--text-muted)] font-mono">
+                  {doc.type}
                 </span>
                 <span className="text-xs text-[var(--text-dim)]">·</span>
                 <span className="text-xs text-[var(--text-muted)] font-mono flex items-center gap-1">
@@ -443,31 +436,30 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
                 </span>
               </div>
 
-              <h1 className="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] tracking-tight leading-tight">
+              <h1 className="text-2xl sm:text-3xl font-extrabold text-[var(--text-primary)] tracking-tight leading-tight">
                 {doc.title}
               </h1>
             </div>
 
-            {/* Quick Actions Deck */}
+            {/* Quick Actions */}
             <DocActions slug={doc.slug} body={doc.body} canEdit={canEdit} />
           </div>
 
-          {/* Author, Date, and Tags */}
-          <div className="flex flex-wrap items-center gap-3 text-xs text-[var(--text-muted)] pt-4 border-t border-[var(--border-color)]">
+          {/* Author, Date, Tags */}
+          <div className="flex flex-wrap items-center gap-3 text-xs text-[var(--text-muted)] pt-3.5 border-t border-[var(--border-color)]">
             {doc.author && (
               <div className="flex items-center gap-1.5">
-                <div className="w-4 h-4 rounded-full bg-[var(--brand)] text-white flex items-center justify-center text-[10px] font-bold">
+                <div className="w-4 h-4 rounded bg-[var(--brand)] text-[var(--brand-fg)] flex items-center justify-center text-[10px] font-bold font-mono">
                   {doc.author.charAt(0).toUpperCase()}
                 </div>
                 <span className="text-[var(--text-secondary)] font-medium">{doc.author}</span>
                 <span className="text-[var(--text-dim)]">·</span>
               </div>
             )}
-            <span className="flex items-center gap-1">
-              <Clock className="w-3 h-3 text-[var(--text-dim)]" />
+            <span className="flex items-center gap-1 font-mono text-[11px]">
               <span>
                 Updated {new Date(doc.updatedAt).toLocaleDateString(undefined, {
-                  month: "long",
+                  month: "short",
                   day: "numeric",
                   year: "numeric",
                 })}
@@ -481,7 +473,7 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
                   {doc.tags.map((t) => (
                     <span
                       key={t}
-                      className="px-2 py-0.5 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded-md text-[var(--text-muted)] text-[11px] font-mono"
+                      className="px-1.5 py-0.2 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded text-[var(--text-muted)] text-[10px] font-mono"
                     >
                       #{t}
                     </span>
@@ -495,8 +487,8 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
           <CustomFieldBadges doc={{ ...doc }} standardKeys={STANDARD_KEYS} />
         </div>
 
-        {/* Mobile TOC (rendered inline on smaller screens) */}
-        <div className="xl:hidden mb-6 p-5 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-2xl shadow-xs">
+        {/* Mobile TOC */}
+        <div className="xl:hidden mb-6 p-4 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl shadow-xs">
           <TOC source={doc.body} />
         </div>
 
@@ -507,24 +499,24 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
 
         {/* Related Documents Grid */}
         {related.length > 0 && (
-          <aside className="mt-14 pt-8 border-t border-[var(--border-color)]">
-            <div className="flex items-center gap-2 mb-4">
-              <Sparkles className="w-4 h-4 text-[var(--brand)] dark:text-[var(--accent)]" />
+          <aside className="mt-12 pt-8 border-t border-[var(--border-color)]">
+            <div className="flex items-center gap-2 mb-3.5">
+              <Sparkles className="w-4 h-4 text-[var(--text-muted)]" />
               <h2 className="text-xs font-bold text-[var(--text-muted)] uppercase tracking-wider font-mono">
-                Related Knowledge & Writeups
+                Related Knowledge
               </h2>
             </div>
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3.5">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
               {related.map((r) => {
                 const rInfo = getSectionInfo(r.section);
                 return (
                   <Link
                     key={r.slug}
                     href={`/${r.slug}`}
-                    className="group block bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-2xl p-5 transition-all shadow-xs hover:shadow-md hover:-translate-y-0.5"
+                    className="group block bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--text-muted)] rounded-lg p-4 transition-colors shadow-xs"
                   >
-                    <div className="flex items-center justify-between gap-2 mb-2">
-                      <span className="text-xs text-[var(--brand)] dark:text-[var(--accent)] font-mono uppercase font-semibold">
+                    <div className="flex items-center justify-between gap-2 mb-1.5">
+                      <span className="text-[10px] text-[var(--text-muted)] font-mono uppercase font-semibold">
                         {rInfo.icon} {r.section}
                       </span>
                       <time className="text-[11px] text-[var(--text-dim)] font-mono">
@@ -534,7 +526,7 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
                         })}
                       </time>
                     </div>
-                    <h3 className="text-sm font-bold text-[var(--text-primary)] group-hover:text-[var(--brand)] dark:group-hover:text-[var(--accent)] transition-colors line-clamp-1 mb-1">
+                    <h3 className="text-xs sm:text-sm font-semibold text-[var(--text-primary)] group-hover:underline line-clamp-1">
                       {r.title}
                     </h3>
                   </Link>
@@ -544,12 +536,12 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
           </aside>
         )}
 
-        {/* Revision History Timeline */}
+        {/* Revision History */}
         {revisions.length > 0 && (
           <aside className="mt-10 pt-8 border-t border-[var(--border-color)]">
-            <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center justify-between mb-3.5">
               <div className="flex items-center gap-2">
-                <History className="w-4 h-4 text-[var(--brand)] dark:text-[var(--accent)]" />
+                <History className="w-4 h-4 text-[var(--text-muted)]" />
                 <h2 className="text-xs font-bold text-[var(--text-muted)] uppercase tracking-wider font-mono">
                   Revision History ({revisions.length})
                 </h2>
@@ -559,16 +551,16 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
               {revisions.map((rev) => (
                 <div
                   key={rev.id}
-                  className="flex items-center justify-between gap-3 p-3.5 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl text-xs shadow-xs"
+                  className="flex items-center justify-between gap-3 p-3 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-lg text-xs shadow-xs"
                 >
-                  <div className="flex items-center gap-2.5 min-w-0">
-                    <span className="font-mono text-[var(--brand)] dark:text-[var(--accent)] bg-[var(--brand)]/10 px-2 py-0.5 rounded-md border border-[var(--brand)]/30 font-bold">
+                  <div className="flex items-center gap-2 min-w-0 font-mono">
+                    <span className="text-[var(--text-primary)] bg-[var(--bg-elevated)] px-1.5 py-0.5 rounded border border-[var(--border-color)] font-bold text-[10px]">
                       v{rev.revisionNo}
                     </span>
-                    <span className="text-[var(--text-primary)] font-medium truncate">
+                    <span className="text-[var(--text-secondary)] font-sans truncate text-xs">
                       {rev.reason || "Updated document in PostgreSQL"}
                     </span>
-                    <span className="text-[var(--text-dim)] hidden sm:inline font-mono">
+                    <span className="text-[var(--text-dim)] hidden sm:inline text-[11px]">
                       · {new Date(rev.createdAt).toLocaleString()}
                     </span>
                   </div>
@@ -577,7 +569,7 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
                       <input type="hidden" name="id" value={rev.id} />
                       <button
                         type="submit"
-                        className="text-xs text-[var(--text-secondary)] hover:text-[var(--text-primary)] bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] px-3 py-1 rounded-lg border border-[var(--border-color)] hover:border-[var(--brand)] transition-colors font-semibold shadow-xs cursor-pointer"
+                        className="text-xs text-[var(--text-primary)] hover:text-black dark:hover:text-white bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] px-2.5 py-1 rounded border border-[var(--border-color)] transition-colors font-medium cursor-pointer"
                       >
                         Restore
                       </button>
diff --git a/apps/web/app/[section]/page.tsx b/apps/web/app/[section]/page.tsx
index 499b71b..dd8583b 100644
--- a/apps/web/app/[section]/page.tsx
+++ b/apps/web/app/[section]/page.tsx
@@ -4,13 +4,9 @@ import { getSectionMeta } from "@mcpedia/config";
 import {
   Folder,
   FileText,
-  ChevronRight,
   FileDown,
   Plus,
-  Compass,
-  ArrowLeft,
   Clock,
-  Tag,
 } from "lucide-react";
 
 export const dynamic = "force-dynamic";
@@ -92,28 +88,28 @@ function renderTree(nodes: TreeNode[], pathname: string) {
           <li key={node.slug}>
             <Link
               href={`/${node.slug}`}
-              className={`flex items-center justify-between gap-2 text-xs py-2 px-3 rounded-xl transition-all ${
+              className={`flex items-center justify-between gap-2 text-xs py-1.5 px-2.5 rounded-md transition-colors ${
                 isActive
-                  ? "text-[var(--brand)] dark:text-[var(--accent)] bg-[var(--brand)]/15 font-semibold border border-[var(--brand)]/30 shadow-xs"
+                  ? "text-[var(--text-primary)] bg-[var(--bg-elevated)] font-semibold border border-[var(--border-color)] shadow-xs"
                   : hasActiveChild
                     ? "text-[var(--text-primary)] bg-[var(--bg-elevated)]"
                     : "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-elevated)]"
               }`}
             >
-              <span className="flex items-center gap-2.5 truncate">
+              <span className="flex items-center gap-2 truncate">
                 <span className="text-[var(--text-dim)]">
-                  {isFolder ? <Folder className="w-4 h-4 text-[var(--brand)] dark:text-[var(--accent)]" /> : <FileText className="w-4 h-4" />}
+                  {isFolder ? <Folder className="w-3.5 h-3.5" /> : <FileText className="w-3.5 h-3.5" />}
                 </span>
                 <span className="truncate font-medium">{node.doc?.title || node.name}</span>
               </span>
               {isFolder && (
-                <span className="text-[10px] text-[var(--text-dim)] bg-[var(--bg-surface)] border border-[var(--border-color)] px-2 py-0.5 rounded-md font-mono">
+                <span className="text-[10px] text-[var(--text-dim)] bg-[var(--bg-surface)] border border-[var(--border-color)] px-1.5 py-0.2 rounded font-mono">
                   {node.docCount} docs
                 </span>
               )}
             </Link>
             {node.children.length > 0 && (
-              <div className="ml-4 border-l border-[var(--border-color)] pl-3 mt-1 space-y-1">
+              <div className="ml-3.5 border-l border-[var(--border-color)] pl-2.5 mt-0.5 space-y-0.5">
                 {renderTree(node.children, pathname)}
               </div>
             )}
@@ -137,44 +133,42 @@ export default async function SectionIndexPage({
   const tree = buildFolderTree(allDocs, section);
 
   return (
-    <div className="space-y-10">
+    <div className="space-y-8">
       {/* Breadcrumb Navigation */}
-      <nav className="flex items-center gap-2 text-xs text-[var(--text-dim)]">
-        <Link href="/" className="hover:text-[var(--text-primary)] transition-colors flex items-center gap-1">
-          <span>MCPedia</span>
+      <nav className="flex items-center gap-2 text-xs text-[var(--text-dim)] font-mono">
+        <Link href="/" className="hover:text-[var(--text-primary)] transition-colors">
+          MCPedia
         </Link>
         <span>/</span>
-        <span className="text-[var(--text-muted)] font-semibold">{sectionInfo.label}</span>
+        <span className="text-[var(--text-muted)] font-semibold font-sans">{sectionInfo.label}</span>
       </nav>
 
       {/* Hero Card */}
-      <div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-2xl p-6 sm:p-7 shadow-sm">
-        <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-5 mb-4">
-          <div className="flex items-center gap-4">
-            <div className="w-14 h-14 rounded-2xl bg-[var(--bg-elevated)] border border-[var(--border-color)] flex items-center justify-center text-3xl shadow-inner">
+      <div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl p-6 shadow-xs">
+        <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-4 mb-3">
+          <div className="flex items-center gap-3.5">
+            <div className="w-12 h-12 rounded-xl bg-[var(--bg-elevated)] border border-[var(--border-color)] flex items-center justify-center text-2xl">
               {sectionInfo.icon}
             </div>
             <div>
-              <div className="flex items-center gap-2">
-                <h1 className="text-2xl sm:text-3xl font-extrabold text-[var(--text-primary)] tracking-tight">
-                  {sectionInfo.label}
-                </h1>
-              </div>
-              <p className="text-xs text-[var(--text-muted)] font-mono uppercase tracking-wider mt-1">
-                Section Domain: <span className="text-[var(--brand)] dark:text-[var(--accent)] font-semibold">{section}</span>
+              <h1 className="text-2xl sm:text-3xl font-extrabold text-[var(--text-primary)] tracking-tight">
+                {sectionInfo.label}
+              </h1>
+              <p className="text-xs text-[var(--text-muted)] font-mono uppercase tracking-wider mt-0.5">
+                Section: <code>{section}</code>
               </p>
             </div>
           </div>
 
           <div className="flex items-center gap-2 flex-wrap sm:flex-nowrap">
-            <span className="text-xs font-mono text-[var(--brand)] dark:text-[var(--accent)] bg-[var(--brand)]/10 border border-[var(--brand)]/25 px-3 py-1.5 rounded-lg font-semibold">
+            <span className="text-xs font-mono text-[var(--text-muted)] bg-[var(--bg-elevated)] border border-[var(--border-color)] px-2.5 py-1 rounded">
               {sectionDocs.length} document{sectionDocs.length !== 1 ? "s" : ""}
             </span>
 
             {sectionDocs.length > 0 && (
               <Link
                 href={`/${section}/export`}
-                className="inline-flex items-center gap-1.5 text-xs bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] px-3 py-1.5 rounded-lg font-semibold transition-all shadow-xs"
+                className="inline-flex items-center gap-1.5 text-xs bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] text-[var(--text-primary)] px-3 py-1 rounded-md font-semibold transition-all shadow-xs"
                 title={`Export all ${sectionInfo.label} documents to publication-grade PDF`}
               >
                 <FileDown className="w-3.5 h-3.5" />
@@ -184,7 +178,7 @@ export default async function SectionIndexPage({
 
             <Link
               href="/create"
-              className="inline-flex items-center gap-1.5 text-xs bg-[var(--brand)] hover:bg-[var(--brand-hover)] text-white px-3.5 py-1.5 rounded-lg font-semibold transition-all shadow-md shadow-[var(--brand)]/20"
+              className="inline-flex items-center gap-1.5 text-xs bg-[var(--brand)] hover:opacity-90 text-[var(--brand-fg)] px-3 py-1 rounded-md font-semibold transition-all shadow-xs"
             >
               <Plus className="w-3.5 h-3.5" />
               <span>Create Doc</span>
@@ -192,18 +186,18 @@ export default async function SectionIndexPage({
           </div>
         </div>
 
-        <p className="text-xs sm:text-sm text-[var(--text-muted)] leading-relaxed max-w-2xl mt-3">
+        <p className="text-xs sm:text-sm text-[var(--text-muted)] leading-relaxed max-w-2xl mt-2">
           {sectionInfo.desc}
         </p>
       </div>
 
       {/* Hierarchical Folder Directory */}
       {tree.length > 0 && (
-        <section className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-2xl p-6 shadow-sm">
-          <div className="flex items-center gap-2 mb-4 pb-2 border-b border-[var(--border-color)]">
-            <Folder className="w-4 h-4 text-[var(--brand)] dark:text-[var(--accent)]" />
+        <section className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl p-5 shadow-xs">
+          <div className="flex items-center gap-2 mb-3 pb-2 border-b border-[var(--border-color)]">
+            <Folder className="w-3.5 h-3.5 text-[var(--text-muted)]" />
             <h2 className="text-xs font-bold text-[var(--text-muted)] uppercase tracking-wider font-mono">
-              Folder & Chapter Directory
+              Folder & Chapter Structure
             </h2>
           </div>
           {renderTree(tree, section)}
@@ -213,14 +207,14 @@ export default async function SectionIndexPage({
       {/* Document List */}
       {sectionDocs.length > 0 ? (
         <section>
-          <div className="flex items-center gap-2 mb-4">
-            <FileText className="w-4 h-4 text-[var(--brand)] dark:text-[var(--accent)]" />
+          <div className="flex items-center gap-2 mb-3.5">
+            <FileText className="w-3.5 h-3.5 text-[var(--text-muted)]" />
             <h2 className="text-xs font-bold text-[var(--text-muted)] uppercase tracking-wider font-mono">
-              All Knowledge in {sectionInfo.label}
+              All Documents in {sectionInfo.label}
             </h2>
           </div>
 
-          <div className="space-y-2.5">
+          <div className="space-y-2">
             {[...sectionDocs]
               .sort(
                 (a, b) =>
@@ -230,22 +224,20 @@ export default async function SectionIndexPage({
                 <Link
                   key={d.slug}
                   href={`/${d.slug}`}
-                  className="group flex items-center justify-between gap-4 p-4 sm:p-5 bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-2xl transition-all shadow-xs hover:shadow-md hover:-translate-y-0.5"
+                  className="group flex items-center justify-between gap-4 p-4 bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--text-muted)] rounded-xl transition-all shadow-xs"
                 >
-                  <div className="flex items-center gap-3.5 min-w-0">
-                    <div className="p-2 rounded-xl bg-[var(--bg-elevated)] text-[var(--text-dim)] group-hover:text-[var(--brand)] dark:group-hover:text-[var(--accent)] transition-colors shrink-0">
-                      <FileText className="w-4 h-4" />
-                    </div>
+                  <div className="flex items-center gap-3 min-w-0">
+                    <FileText className="w-4 h-4 text-[var(--text-muted)] shrink-0" />
                     <div className="min-w-0">
-                      <h3 className="text-sm font-bold text-[var(--text-primary)] group-hover:text-[var(--brand)] dark:group-hover:text-[var(--accent)] transition-colors truncate">
+                      <h3 className="text-xs sm:text-sm font-semibold text-[var(--text-primary)] group-hover:underline truncate">
                         {d.title}
                       </h3>
                       {d.tags.length > 0 && (
-                        <div className="flex flex-wrap gap-1.5 mt-2">
+                        <div className="flex flex-wrap gap-1 mt-1.5">
                           {d.tags.slice(0, 4).map((t) => (
                             <span
                               key={t}
-                              className="text-[10px] px-2 py-0.5 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded-md text-[var(--text-muted)] font-mono"
+                              className="text-[10px] px-1.5 py-0.2 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded text-[var(--text-muted)] font-mono"
                             >
                               #{t}
                             </span>
@@ -270,7 +262,7 @@ export default async function SectionIndexPage({
           </div>
         </section>
       ) : (
-        <div className="text-center py-16 border border-[var(--border-color)] rounded-2xl bg-[var(--bg-surface)]">
+        <div className="text-center py-12 border border-[var(--border-color)] rounded-xl bg-[var(--bg-surface)]">
           <p className="text-sm text-[var(--text-muted)]">No documents in this section yet.</p>
         </div>
       )}
diff --git a/apps/web/app/components/CommandMenu.tsx b/apps/web/app/components/CommandMenu.tsx
index 9829fe3..c19caa1 100644
--- a/apps/web/app/components/CommandMenu.tsx
+++ b/apps/web/app/components/CommandMenu.tsx
@@ -5,18 +5,12 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import {
   Search,
-  FileText,
   Plus,
-  Compass,
-  Sparkles,
   ArrowRight,
   BookOpen,
   Flag,
-  Layers,
-  SunMoon,
-  Command,
+  Sparkles,
   X,
-  Flame,
 } from "lucide-react";
 
 interface Hit {
@@ -49,7 +43,7 @@ export default function CommandMenu() {
     {
       id: "create-doc",
       title: "Create New Document",
-      subtitle: "Write technical doc, writeup, or research note",
+      subtitle: "Write technical doc, writeup, or note",
       icon: Plus,
       href: "/create",
     },
@@ -69,14 +63,14 @@ export default function CommandMenu() {
     },
     {
       id: "browse-writeups",
-      title: "CTF & Challenge Writeups",
+      title: "CTF & Writeups Directory",
       subtitle: "Pwn, Reverse, Web, Crypto writeups and solutions",
       icon: Flag,
       href: "/writeups",
     },
     {
       id: "browse-research",
-      title: "Deep-Dive Research",
+      title: "Research & Benchmarks",
       subtitle: "Architecture notes, benchmarks, experiments",
       icon: Sparkles,
       href: "/research",
@@ -160,11 +154,11 @@ export default function CommandMenu() {
       <button
         onClick={() => setOpen(true)}
         type="button"
-        className="hidden md:flex items-center gap-2.5 px-3 py-1.5 bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-lg transition-all shadow-xs cursor-pointer group"
+        className="hidden md:flex items-center gap-2.5 px-3 py-1.5 bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] hover:border-[var(--text-muted)] text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md transition-all shadow-xs cursor-pointer group"
       >
-        <Search className="w-3.5 h-3.5 text-[var(--text-dim)] group-hover:text-[var(--brand)] dark:group-hover:text-[var(--accent)] transition-colors" />
-        <span className="font-sans">Search knowledge...</span>
-        <kbd className="ml-2 font-mono bg-[var(--bg-surface)] px-1.5 py-0.5 rounded border border-[var(--border-color)] text-[10px] text-[var(--text-dim)] shadow-xs">
+        <Search className="w-3.5 h-3.5 text-[var(--text-dim)] group-hover:text-[var(--text-primary)] transition-colors" />
+        <span className="font-sans">Search...</span>
+        <kbd className="ml-2 font-mono bg-[var(--bg-surface)] px-1.5 py-0.2 rounded border border-[var(--border-color)] text-[10px] text-[var(--text-muted)]">
           ⌘K
         </kbd>
       </button>
@@ -175,31 +169,31 @@ export default function CommandMenu() {
     <div className="fixed inset-0 z-50 flex items-start justify-center pt-16 sm:pt-24 px-4">
       {/* Backdrop */}
       <div
-        className="fixed inset-0 bg-slate-950/60 dark:bg-black/80 backdrop-blur-md transition-opacity"
+        className="fixed inset-0 bg-black/60 backdrop-blur-xs transition-opacity"
         onClick={() => setOpen(false)}
       />
 
-      {/* Omnisearch Modal */}
-      <div className="relative w-full max-w-2xl bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-2xl shadow-2xl overflow-hidden animate-fade-in ring-1 ring-white/10">
+      {/* Modal */}
+      <div className="relative w-full max-w-2xl bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl shadow-2xl overflow-hidden animate-fade-in">
         {/* Search input bar */}
-        <div className="flex items-center gap-3 px-4 sm:px-5 py-4 border-b border-[var(--border-color)] bg-[var(--bg-elevated)]/70">
-          <Search className="w-5 h-5 text-[var(--brand)] dark:text-[var(--accent)] shrink-0" />
+        <div className="flex items-center gap-3 px-4 sm:px-5 py-3.5 border-b border-[var(--border-color)] bg-[var(--bg-elevated)]">
+          <Search className="w-4 h-4 text-[var(--text-muted)] shrink-0" />
           <input
             ref={inputRef}
             type="text"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
             onKeyDown={handleKeyNavigation}
-            placeholder="Search documents, writeups, concepts, or commands..."
-            className="w-full bg-transparent text-[var(--text-primary)] placeholder-[var(--text-dim)] text-sm sm:text-base focus:outline-none"
+            placeholder="Search documents, writeups, concepts, or tools..."
+            className="w-full bg-transparent text-[var(--text-primary)] placeholder-[var(--text-dim)] text-sm focus:outline-none"
           />
           {loading && (
-            <div className="w-4 h-4 border-2 border-[var(--brand)] border-t-transparent rounded-full animate-spin shrink-0" />
+            <div className="w-4 h-4 border-2 border-[var(--text-muted)] border-t-transparent rounded-full animate-spin shrink-0" />
           )}
           <button
             onClick={() => setOpen(false)}
             type="button"
-            className="text-[11px] font-mono text-[var(--text-dim)] hover:text-[var(--text-primary)] bg-[var(--bg-surface)] px-2 py-0.5 rounded border border-[var(--border-color)]"
+            className="text-[10px] font-mono text-[var(--text-dim)] hover:text-[var(--text-primary)] bg-[var(--bg-surface)] px-1.5 py-0.5 rounded border border-[var(--border-color)]"
           >
             ESC
           </button>
@@ -208,9 +202,9 @@ export default function CommandMenu() {
         {/* Results / Quick Actions List */}
         <div className="max-h-[22rem] overflow-y-auto p-2">
           {query.trim() === "" ? (
-            <div className="p-2 space-y-1">
-              <div className="px-3 py-1.5 text-[10px] font-mono uppercase tracking-wider text-[var(--text-dim)]">
-                Quick Shortcuts & Actions
+            <div className="p-1 space-y-0.5">
+              <div className="px-2.5 py-1 text-[10px] font-mono uppercase tracking-wider text-[var(--text-muted)]">
+                Quick Shortcuts
               </div>
               {quickActions.map((action, idx) => {
                 const Icon = action.icon;
@@ -220,18 +214,18 @@ export default function CommandMenu() {
                     key={action.id}
                     onClick={() => action.href && handleNavigate(action.href)}
                     onMouseEnter={() => setSelectedIndex(idx)}
-                    className={`flex items-center justify-between gap-3 px-3 py-2.5 rounded-xl cursor-pointer transition-all ${
+                    className={`flex items-center justify-between gap-3 px-3 py-2 rounded-lg cursor-pointer transition-colors ${
                       isSelected
-                        ? "bg-[var(--brand)]/15 border border-[var(--brand)]/40 text-[var(--text-primary)] shadow-xs"
-                        : "hover:bg-[var(--bg-elevated)] text-[var(--text-secondary)] border border-transparent"
+                        ? "bg-[var(--bg-elevated)] text-[var(--text-primary)]"
+                        : "hover:bg-[var(--bg-elevated)] text-[var(--text-secondary)]"
                     }`}
                   >
-                    <div className="flex items-center gap-3">
-                      <div className={`p-2 rounded-lg ${isSelected ? "bg-[var(--brand)] text-white" : "bg-[var(--bg-elevated)] text-[var(--text-muted)]"}`}>
-                        <Icon className="w-4 h-4" />
+                    <div className="flex items-center gap-2.5">
+                      <div className={`p-1.5 rounded ${isSelected ? "bg-[var(--brand)] text-[var(--brand-fg)]" : "bg-[var(--bg-elevated)] text-[var(--text-muted)]"}`}>
+                        <Icon className="w-3.5 h-3.5" />
                       </div>
                       <div>
-                        <div className="text-xs sm:text-sm font-semibold text-[var(--text-primary)]">
+                        <div className="text-xs font-semibold text-[var(--text-primary)]">
                           {action.title}
                         </div>
                         <div className="text-[11px] text-[var(--text-muted)]">
@@ -239,17 +233,14 @@ export default function CommandMenu() {
                         </div>
                       </div>
                     </div>
-                    <ArrowRight className={`w-3.5 h-3.5 text-[var(--text-dim)] ${isSelected ? "text-[var(--brand)] translate-x-0.5" : ""} transition-all`} />
+                    <ArrowRight className={`w-3.5 h-3.5 text-[var(--text-dim)] ${isSelected ? "text-[var(--text-primary)]" : ""}`} />
                   </div>
                 );
               })}
             </div>
           ) : results.length === 0 && !loading ? (
-            <div className="px-4 py-12 text-center text-xs text-[var(--text-muted)] space-y-2">
+            <div className="px-4 py-10 text-center text-xs text-[var(--text-muted)] space-y-1">
               <p>No knowledge base items matched &quot;{query}&quot;</p>
-              <p className="text-[11px] text-[var(--text-dim)]">
-                Try searching with partial words or check semantic search
-              </p>
             </div>
           ) : (
             <ul className="space-y-1 p-1">
@@ -260,24 +251,24 @@ export default function CommandMenu() {
                     key={hit.slug}
                     onClick={() => handleNavigate(`/${hit.slug}`)}
                     onMouseEnter={() => setSelectedIndex(index)}
-                    className={`flex items-start justify-between gap-3 px-3 py-2.5 rounded-xl cursor-pointer transition-all ${
+                    className={`flex items-start justify-between gap-3 px-3 py-2.5 rounded-lg cursor-pointer transition-colors ${
                       isSelected
-                        ? "bg-[var(--brand)]/15 border border-[var(--brand)]/40 text-[var(--text-primary)] shadow-xs"
+                        ? "bg-[var(--bg-elevated)] text-[var(--text-primary)] border border-[var(--border-color)]"
                         : "hover:bg-[var(--bg-elevated)] text-[var(--text-secondary)] border border-transparent"
                     }`}
                   >
                     <div className="min-w-0 flex-1">
                       <div className="flex items-center gap-2 mb-0.5">
-                        <span className="text-[10px] font-mono px-2 py-0.5 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded text-[var(--brand)] dark:text-[var(--accent)] uppercase font-semibold">
+                        <span className="text-[10px] font-mono px-1.5 py-0.2 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded text-[var(--text-muted)] uppercase font-semibold">
                           {hit.section}
                         </span>
-                        <span className={`text-xs sm:text-sm font-semibold ${isSelected ? "text-[var(--brand)] dark:text-[var(--accent)]" : "text-[var(--text-primary)]"} truncate`}>
+                        <span className={`text-xs sm:text-sm font-semibold ${isSelected ? "text-[var(--text-primary)]" : "text-[var(--text-primary)]"} truncate`}>
                           {hit.title}
                         </span>
                       </div>
                       {hit.snippet && (
                         <p
-                          className="text-xs text-[var(--text-muted)] line-clamp-1 mt-1 [&>mark]:bg-[var(--brand)]/30 [&>mark]:text-[var(--text-primary)] [&>mark]:rounded [&>mark]:px-0.5"
+                          className="text-xs text-[var(--text-muted)] line-clamp-1 mt-1 [&>mark]:bg-[var(--bg-elevated-hover)] [&>mark]:text-[var(--text-primary)] [&>mark]:font-semibold"
                           dangerouslySetInnerHTML={{ __html: hit.snippet }}
                         />
                       )}
@@ -293,15 +284,15 @@ export default function CommandMenu() {
         </div>
 
         {/* Footer */}
-        <div className="flex items-center justify-between px-4 py-2.5 border-t border-[var(--border-color)] bg-[var(--bg-elevated)]/60 text-[11px] text-[var(--text-dim)]">
+        <div className="flex items-center justify-between px-4 py-2 border-t border-[var(--border-color)] bg-[var(--bg-elevated)] text-[10px] text-[var(--text-muted)] font-mono">
           <div className="flex items-center gap-2">
-            <span>Navigate: <kbd className="bg-[var(--bg-surface)] px-1 py-0.5 rounded border border-[var(--border-color)]">↑↓</kbd></span>
-            <span>Select: <kbd className="bg-[var(--bg-surface)] px-1 py-0.5 rounded border border-[var(--border-color)]">↵</kbd></span>
+            <span>[ ↑↓ NAVIGATE ]</span>
+            <span>[ ↵ SELECT ]</span>
           </div>
           <Link
             href={`/search?q=${encodeURIComponent(query)}`}
             onClick={() => setOpen(false)}
-            className="text-[var(--brand)] dark:text-[var(--accent)] hover:underline font-medium flex items-center gap-1"
+            className="hover:text-[var(--text-primary)] font-medium flex items-center gap-1"
           >
             <span>Full Search Console</span>
             <ArrowRight className="w-3 h-3" />
diff --git a/apps/web/app/components/DocActions.tsx b/apps/web/app/components/DocActions.tsx
index a397392..f2c9097 100644
--- a/apps/web/app/components/DocActions.tsx
+++ b/apps/web/app/components/DocActions.tsx
@@ -8,7 +8,6 @@ import {
   Share2,
   FileDown,
   Edit3,
-  ExternalLink,
 } from "lucide-react";
 
 interface DocActionsProps {
@@ -39,13 +38,13 @@ export default function DocActions({ slug, body, canEdit }: DocActionsProps) {
       <button
         onClick={handleCopyMarkdown}
         type="button"
-        title="Copy raw markdown content to clipboard"
-        className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated)] border border-[var(--border-color)] hover:border-[var(--brand)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-lg transition-all shadow-xs cursor-pointer"
+        title="Copy raw markdown content"
+        className="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated)] border border-[var(--border-color)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md transition-colors shadow-xs cursor-pointer"
       >
         {copiedMd ? (
           <>
             <Check className="w-3.5 h-3.5 text-emerald-500" />
-            <span className="text-emerald-500 font-medium">Copied MD</span>
+            <span className="text-emerald-500 font-medium">Copied</span>
           </>
         ) : (
           <>
@@ -60,12 +59,12 @@ export default function DocActions({ slug, body, canEdit }: DocActionsProps) {
         onClick={handleCopyLink}
         type="button"
         title="Copy link to document"
-        className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated)] border border-[var(--border-color)] hover:border-[var(--brand)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-lg transition-all shadow-xs cursor-pointer"
+        className="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated)] border border-[var(--border-color)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md transition-colors shadow-xs cursor-pointer"
       >
         {copiedLink ? (
           <>
             <Check className="w-3.5 h-3.5 text-emerald-500" />
-            <span className="text-emerald-500 font-medium">Copied Link</span>
+            <span className="text-emerald-500 font-medium">Copied</span>
           </>
         ) : (
           <>
@@ -78,17 +77,17 @@ export default function DocActions({ slug, body, canEdit }: DocActionsProps) {
       {/* Export PDF */}
       <Link
         href={`/${slug}/export`}
-        title="Export document or parent folder to publication-grade PDF"
-        className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated)] border border-[var(--border-color)] hover:border-[var(--brand)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-lg transition-all shadow-xs"
+        title="Export document to publication-grade PDF"
+        className="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated)] border border-[var(--border-color)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md transition-colors shadow-xs"
       >
         <FileDown className="w-3.5 h-3.5" />
-        <span>Export PDF</span>
+        <span>PDF</span>
       </Link>
 
       {/* Edit Link */}
       <Link
         href={canEdit ? `/${slug}?edit=1` : `/login?redirect=/${slug}`}
-        className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs bg-[var(--brand)]/10 hover:bg-[var(--brand)]/20 border border-[var(--brand)]/30 hover:border-[var(--brand)]/60 text-[var(--brand)] dark:text-[var(--accent)] rounded-lg transition-all font-medium shadow-xs"
+        className="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] text-[var(--text-primary)] rounded-md transition-colors font-medium shadow-xs"
       >
         <Edit3 className="w-3.5 h-3.5" />
         <span>Edit</span>
diff --git a/apps/web/app/components/DocForm.tsx b/apps/web/app/components/DocForm.tsx
index fb6b43c..dabb7d2 100644
--- a/apps/web/app/components/DocForm.tsx
+++ b/apps/web/app/components/DocForm.tsx
@@ -10,18 +10,10 @@ import {
   Heading3,
   Code,
   Link as LinkIcon,
-  Table as TableIcon,
-  Info,
-  Lightbulb,
-  AlertTriangle,
   Plus,
   Trash2,
-  Check,
   Eye,
   Edit3,
-  FileCode,
-  Tag,
-  Folder,
   Sliders,
 } from "lucide-react";
 
@@ -127,7 +119,7 @@ export default function DocForm({
   const availableFolders = existingFolders?.[section] ?? [];
 
   const baseInputCls =
-    "w-full px-3.5 py-2.5 bg-[var(--bg-surface)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-xl text-sm text-[var(--text-primary)] placeholder-[var(--text-dim)] focus:outline-none focus:border-[var(--brand)] focus:ring-2 focus:ring-[var(--brand)]/20 transition-all";
+    "w-full px-3.5 py-2 bg-[var(--bg-surface)] border border-[var(--border-color)] hover:border-[var(--text-muted)] rounded-lg text-sm text-[var(--text-primary)] placeholder-[var(--text-dim)] focus:outline-none focus:border-[var(--text-primary)] transition-colors";
 
   function addCustomField(key = "", value = "") {
     setCustomFields([...customFields, { key, value }]);
@@ -229,7 +221,7 @@ export default function DocForm({
   return (
     <form onSubmit={handleSubmit} className="space-y-6 max-w-4xl">
       {error && (
-        <div className="p-4 rounded-xl border border-rose-500/30 bg-rose-500/10 text-rose-500 dark:text-rose-400 text-xs sm:text-sm font-medium animate-fade-in">
+        <div className="p-3.5 rounded-lg border border-rose-500/30 bg-rose-500/10 text-rose-500 dark:text-rose-400 text-xs font-medium animate-fade-in">
           {error}
         </div>
       )}
@@ -244,7 +236,7 @@ export default function DocForm({
           value={title}
           onChange={(e) => setTitle(e.target.value)}
           placeholder="e.g. Exploiting Stack Alignment Issues in x86_64"
-          className={`${baseInputCls} text-base sm:text-lg font-semibold`}
+          className={`${baseInputCls} text-base font-semibold`}
           required
         />
       </div>
@@ -339,7 +331,7 @@ export default function DocForm({
               type="text"
               value={slug ?? ""}
               readOnly
-              className="w-full px-3.5 py-2.5 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded-xl text-sm text-[var(--text-muted)] font-mono"
+              className="w-full px-3.5 py-2 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded-lg text-sm text-[var(--text-muted)] font-mono"
             />
           ) : (
             <input
@@ -352,7 +344,7 @@ export default function DocForm({
             />
           )}
           <p className="text-[11px] text-[var(--text-dim)] mt-1.5 font-mono">
-            Full Slug: <span className="text-[var(--brand)] dark:text-[var(--accent)] font-semibold">{effectiveSlug || section}</span>
+            Full Slug: <span className="text-[var(--text-primary)] font-semibold">{effectiveSlug || section}</span>
           </p>
         </div>
       </div>
@@ -386,26 +378,26 @@ export default function DocForm({
       </div>
 
       {/* Custom Metadata Fields */}
-      <div className="p-4 sm:p-5 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-2xl space-y-4 shadow-sm">
+      <div className="p-4 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl space-y-3.5 shadow-xs">
         <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
           <div>
             <h3 className="text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] font-mono flex items-center gap-1.5">
-              <Sliders className="w-3.5 h-3.5 text-[var(--brand)] dark:text-[var(--accent)]" />
-              <span>Dynamic Technical Metadata</span>
+              <Sliders className="w-3.5 h-3.5 text-[var(--text-muted)]" />
+              <span>Technical Metadata</span>
             </h3>
             <p className="text-[11px] text-[var(--text-dim)] mt-0.5">
               Custom fields (points, difficulty, event, solved) will render as styled badges in the document hero.
             </p>
           </div>
 
-          <div className="flex items-center gap-1.5 flex-wrap">
+          <div className="flex items-center gap-1 flex-wrap">
             <span className="text-[10px] font-mono text-[var(--text-dim)] uppercase">Presets:</span>
             {PRESET_FIELDS.map((preset) => (
               <button
                 key={preset.key}
                 type="button"
                 onClick={() => addCustomField(preset.key, preset.value)}
-                className="px-2 py-0.5 text-[11px] bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md transition-colors font-mono cursor-pointer"
+                className="px-2 py-0.5 text-[10px] bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded transition-colors font-mono cursor-pointer"
               >
                 +{preset.key}
               </button>
@@ -432,7 +424,7 @@ export default function DocForm({
             <button
               type="button"
               onClick={() => removeCustomField(i)}
-              className="p-2 text-rose-500 hover:text-rose-600 rounded-lg hover:bg-[var(--bg-elevated)] transition-colors cursor-pointer"
+              className="p-2 text-rose-500 hover:text-rose-600 rounded hover:bg-[var(--bg-elevated)] transition-colors cursor-pointer"
               title="Remove field"
             >
               <Trash2 className="w-4 h-4" />
@@ -443,7 +435,7 @@ export default function DocForm({
         <button
           type="button"
           onClick={() => addCustomField()}
-          className="inline-flex items-center gap-1.5 text-xs text-[var(--brand)] dark:text-[var(--accent)] hover:underline px-3 py-1.5 rounded-lg border border-[var(--brand)]/30 hover:border-[var(--brand)]/60 bg-[var(--brand)]/5 transition-colors font-medium cursor-pointer"
+          className="inline-flex items-center gap-1.5 text-xs text-[var(--text-primary)] hover:underline px-3 py-1 rounded-md border border-[var(--border-color)] bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] transition-colors font-medium cursor-pointer"
         >
           <Plus className="w-3.5 h-3.5" />
           <span>Add Custom Field</span>
@@ -451,17 +443,17 @@ export default function DocForm({
       </div>
 
       {/* Markdown Body Editor */}
-      <div className="border border-[var(--border-color)] rounded-2xl overflow-hidden bg-[var(--bg-surface)] shadow-sm">
+      <div className="border border-[var(--border-color)] rounded-xl overflow-hidden bg-[var(--bg-surface)] shadow-xs">
         {/* Editor Toolbar */}
-        <div className="flex items-center justify-between px-3 py-2 bg-[var(--bg-elevated)]/60 border-b border-[var(--border-color)] flex-wrap gap-2">
+        <div className="flex items-center justify-between px-3 py-2 bg-[var(--bg-elevated)] border-b border-[var(--border-color)] flex-wrap gap-2">
           {/* Tabs */}
           <div className="flex items-center gap-1">
             <button
               type="button"
               onClick={() => setActiveTab("write")}
-              className={`flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg font-semibold transition-all cursor-pointer ${
+              className={`flex items-center gap-1.5 px-3 py-1 text-xs rounded font-semibold transition-all cursor-pointer ${
                 activeTab === "write"
-                  ? "bg-[var(--brand)] text-white shadow-xs"
+                  ? "bg-[var(--brand)] text-[var(--brand-fg)] shadow-xs"
                   : "text-[var(--text-muted)] hover:text-[var(--text-primary)]"
               }`}
             >
@@ -471,14 +463,14 @@ export default function DocForm({
             <button
               type="button"
               onClick={() => setActiveTab("preview")}
-              className={`flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg font-semibold transition-all cursor-pointer ${
+              className={`flex items-center gap-1.5 px-3 py-1 text-xs rounded font-semibold transition-all cursor-pointer ${
                 activeTab === "preview"
-                  ? "bg-[var(--brand)] text-white shadow-xs"
+                  ? "bg-[var(--brand)] text-[var(--brand-fg)] shadow-xs"
                   : "text-[var(--text-muted)] hover:text-[var(--text-primary)]"
               }`}
             >
               <Eye className="w-3.5 h-3.5" />
-              <span>Live Preview</span>
+              <span>Preview</span>
             </button>
           </div>
 
@@ -488,23 +480,23 @@ export default function DocForm({
               <button
                 type="button"
                 onClick={() => insertMarkdown("**", "**")}
-                className="p-1.5 hover:bg-[var(--bg-surface)] rounded-md hover:text-[var(--text-primary)]"
-                title="Bold (**text**)"
+                className="p-1 hover:bg-[var(--bg-surface)] rounded hover:text-[var(--text-primary)]"
+                title="Bold"
               >
                 <Bold className="w-3.5 h-3.5" />
               </button>
               <button
                 type="button"
                 onClick={() => insertMarkdown("*", "*")}
-                className="p-1.5 hover:bg-[var(--bg-surface)] rounded-md hover:text-[var(--text-primary)]"
-                title="Italic (*text*)"
+                className="p-1 hover:bg-[var(--bg-surface)] rounded hover:text-[var(--text-primary)]"
+                title="Italic"
               >
                 <Italic className="w-3.5 h-3.5" />
               </button>
               <button
                 type="button"
                 onClick={() => insertMarkdown("## ")}
-                className="p-1.5 hover:bg-[var(--bg-surface)] rounded-md hover:text-[var(--text-primary)]"
+                className="p-1 hover:bg-[var(--bg-surface)] rounded hover:text-[var(--text-primary)]"
                 title="Heading 2"
               >
                 <Heading2 className="w-3.5 h-3.5" />
@@ -512,7 +504,7 @@ export default function DocForm({
               <button
                 type="button"
                 onClick={() => insertMarkdown("### ")}
-                className="p-1.5 hover:bg-[var(--bg-surface)] rounded-md hover:text-[var(--text-primary)]"
+                className="p-1 hover:bg-[var(--bg-surface)] rounded hover:text-[var(--text-primary)]"
                 title="Heading 3"
               >
                 <Heading3 className="w-3.5 h-3.5" />
@@ -520,7 +512,7 @@ export default function DocForm({
               <button
                 type="button"
                 onClick={() => insertMarkdown("```\n", "\n```")}
-                className="p-1.5 hover:bg-[var(--bg-surface)] rounded-md hover:text-[var(--text-primary)]"
+                className="p-1 hover:bg-[var(--bg-surface)] rounded hover:text-[var(--text-primary)]"
                 title="Code Block"
               >
                 <Code className="w-3.5 h-3.5" />
@@ -528,27 +520,11 @@ export default function DocForm({
               <button
                 type="button"
                 onClick={() => insertMarkdown("[", "](https://)")}
-                className="p-1.5 hover:bg-[var(--bg-surface)] rounded-md hover:text-[var(--text-primary)]"
+                className="p-1 hover:bg-[var(--bg-surface)] rounded hover:text-[var(--text-primary)]"
                 title="Link"
               >
                 <LinkIcon className="w-3.5 h-3.5" />
               </button>
-              <button
-                type="button"
-                onClick={() => insertMarkdown("> [!NOTE]\n> ")}
-                className="p-1.5 hover:bg-[var(--bg-surface)] rounded-md hover:text-[var(--text-primary)] text-indigo-500"
-                title="Note Callout"
-              >
-                <Info className="w-3.5 h-3.5" />
-              </button>
-              <button
-                type="button"
-                onClick={() => insertMarkdown("> [!TIP]\n> ")}
-                className="p-1.5 hover:bg-[var(--bg-surface)] rounded-md hover:text-[var(--text-primary)] text-emerald-500"
-                title="Tip Callout"
-              >
-                <Lightbulb className="w-3.5 h-3.5" />
-              </button>
             </div>
           )}
         </div>
@@ -559,7 +535,7 @@ export default function DocForm({
             ref={textareaRef}
             value={body}
             onChange={(e) => setBody(e.target.value)}
-            className="w-full h-96 p-4 sm:p-5 bg-transparent text-[var(--text-primary)] placeholder-[var(--text-dim)] font-mono text-sm focus:outline-none resize-y leading-relaxed"
+            className="w-full h-96 p-4 bg-transparent text-[var(--text-primary)] placeholder-[var(--text-dim)] font-mono text-sm focus:outline-none resize-y leading-relaxed"
             placeholder="# Write your technical documentation or writeup here in Markdown..."
             required
           />
@@ -568,7 +544,7 @@ export default function DocForm({
             {body.trim() ? (
               <Markdown source={body} />
             ) : (
-              <p className="text-xs text-[var(--text-dim)] italic">No content to preview yet.</p>
+              <p className="text-xs text-[var(--text-dim)] italic font-mono">No content to preview yet.</p>
             )}
           </div>
         )}
@@ -579,18 +555,18 @@ export default function DocForm({
         <button
           type="submit"
           disabled={loading}
-          className="px-6 py-2.5 bg-[var(--brand)] hover:bg-[var(--brand-hover)] text-white rounded-xl font-semibold text-sm transition-all shadow-md shadow-[var(--brand)]/20 hover:shadow-[var(--brand)]/35 disabled:opacity-50 flex items-center gap-2 cursor-pointer"
+          className="px-6 py-2.5 bg-[var(--brand)] hover:opacity-90 text-[var(--brand-fg)] rounded-lg font-semibold text-xs transition-all shadow-xs disabled:opacity-50 flex items-center gap-2 cursor-pointer font-mono uppercase tracking-wider"
         >
           {loading && (
-            <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+            <div className="w-3.5 h-3.5 border-2 border-current border-t-transparent rounded-full animate-spin" />
           )}
-          <span>{loading ? "Persisting Document..." : mode === "create" ? "Publish to PostgreSQL" : "Save Changes"}</span>
+          <span>{loading ? "PERSISTING..." : mode === "create" ? "PUBLISH_DOCUMENT" : "SAVE_CHANGES"}</span>
         </button>
 
         <button
           type="button"
           onClick={() => router.back()}
-          className="px-4 py-2.5 border border-[var(--border-color)] hover:border-[var(--brand)] text-[var(--text-muted)] hover:text-[var(--text-primary)] bg-[var(--bg-surface)] rounded-xl text-sm transition-colors shadow-xs cursor-pointer"
+          className="px-4 py-2.5 border border-[var(--border-color)] hover:border-[var(--text-muted)] text-[var(--text-muted)] hover:text-[var(--text-primary)] bg-[var(--bg-surface)] rounded-lg text-xs transition-colors shadow-xs cursor-pointer font-mono"
         >
           Cancel
         </button>
diff --git a/apps/web/app/components/Header.tsx b/apps/web/app/components/Header.tsx
index 4ae94ee..aaba017 100644
--- a/apps/web/app/components/Header.tsx
+++ b/apps/web/app/components/Header.tsx
@@ -7,16 +7,11 @@ import { DEFAULT_SECTIONS, type SectionConfig } from "@mcpedia/config/sections";
 import ThemeToggle from "@/components/ThemeToggle";
 import CommandMenu from "@/components/CommandMenu";
 import {
-  Sparkles,
   Plus,
   Search,
   Menu,
   X,
   Lock,
-  Layers,
-  FileText,
-  Activity,
-  Terminal,
 } from "lucide-react";
 
 export default function Header() {
@@ -37,45 +32,39 @@ export default function Header() {
 
   return (
     <header className="sticky top-0 z-40 border-b border-[var(--border-color)] glass-nav transition-all">
-      <div className="mx-auto max-w-7xl px-4 sm:px-6 h-15 flex items-center justify-between gap-3 sm:gap-4">
-        {/* Left: Brand Identity */}
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 h-14 flex items-center justify-between gap-3 sm:gap-4">
+        {/* Brand */}
         <div className="flex items-center gap-3">
           <Link href="/" className="flex items-center gap-2.5 group">
-            <div className="relative flex items-center justify-center w-8 h-8 rounded-xl bg-gradient-to-br from-indigo-500 via-indigo-600 to-violet-700 text-white shadow-lg shadow-indigo-500/25 group-hover:scale-105 group-hover:shadow-indigo-500/40 transition-all">
-              <span className="font-mono font-bold text-sm tracking-tighter">M</span>
-              <span className="absolute -bottom-0.5 -right-0.5 w-2 h-2 rounded-full bg-emerald-400 ring-2 ring-[var(--bg-app)] animate-pulse" />
+            <div className="flex items-center justify-center w-7 h-7 rounded-md bg-[var(--brand)] text-[var(--brand-fg)] font-mono font-bold text-xs shadow-xs group-hover:opacity-90 transition-opacity">
+              M
             </div>
-            <div className="flex flex-col">
-              <span className="font-bold text-[var(--text-primary)] text-base tracking-tight leading-none group-hover:text-[var(--brand)] dark:group-hover:text-[var(--accent)] transition-colors">
+            <div className="flex items-center gap-2">
+              <span className="font-bold text-[var(--text-primary)] text-sm tracking-tight leading-none">
                 MCPedia
               </span>
-              <span className="text-[10px] font-mono text-[var(--text-dim)] uppercase tracking-wider leading-tight mt-0.5 hidden sm:block">
-                AI Knowledge Hub
+              <span className="text-[10px] font-mono px-1.5 py-0.2 rounded bg-[var(--bg-elevated)] border border-[var(--border-color)] text-[var(--text-muted)] hidden sm:inline-block">
+                CORE::DB
               </span>
             </div>
           </Link>
-
-          <div className="hidden xl:flex items-center gap-1.5 ml-2 px-2 py-0.5 rounded-full bg-[var(--bg-elevated)] border border-[var(--border-color)] text-[10px] font-mono text-[var(--text-dim)]">
-            <Activity className="w-3 h-3 text-emerald-500" />
-            <span>MCP :4021</span>
-          </div>
         </div>
 
-        {/* Center: Desktop Dynamic Sections Nav */}
-        <nav className="hidden md:flex items-center gap-1 bg-[var(--bg-elevated)]/60 p-1 rounded-xl border border-[var(--border-color)]">
+        {/* Center: Desktop Sections Nav */}
+        <nav className="hidden md:flex items-center gap-1">
           {sections.map((s) => {
             const isActive = pathname === `/${s.id}` || pathname.startsWith(`/${s.id}/`);
             return (
               <Link
                 key={s.id}
                 href={`/${s.id}`}
-                className={`px-3 py-1 rounded-lg text-xs font-medium transition-all flex items-center gap-1.5 ${
+                className={`px-3 py-1 rounded-md text-xs font-medium transition-colors flex items-center gap-1.5 ${
                   isActive
-                    ? "text-[var(--text-primary)] bg-[var(--bg-surface)] shadow-xs font-semibold border border-[var(--border-color)]"
-                    : "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-surface)]/50"
+                    ? "text-[var(--text-primary)] bg-[var(--bg-elevated)] border border-[var(--border-color)] font-semibold"
+                    : "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-elevated)]"
                 }`}
               >
-                <span className="text-xs">{s.icon}</span>
+                <span>{s.icon}</span>
                 <span>{s.label}</span>
               </Link>
             );
@@ -88,7 +77,7 @@ export default function Header() {
 
           <Link
             href="/search"
-            className="md:hidden p-2 text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-lg bg-[var(--bg-surface)] border border-[var(--border-color)] transition-colors"
+            className="md:hidden p-1.5 text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md bg-[var(--bg-surface)] border border-[var(--border-color)] transition-colors"
             title="Search knowledge base"
           >
             <Search className="w-4 h-4" />
@@ -96,7 +85,7 @@ export default function Header() {
 
           <Link
             href="/create"
-            className="hidden sm:inline-flex items-center gap-1.5 px-3 py-1.5 bg-[var(--brand)] hover:bg-[var(--brand-hover)] text-white text-xs font-medium rounded-lg shadow-md shadow-[var(--brand)]/20 hover:shadow-[var(--brand)]/35 transition-all cursor-pointer"
+            className="hidden sm:inline-flex items-center gap-1.5 px-3 py-1.5 bg-[var(--brand)] hover:opacity-90 text-[var(--brand-fg)] text-xs font-semibold rounded-md shadow-xs transition-all cursor-pointer"
           >
             <Plus className="w-3.5 h-3.5" />
             <span>New Doc</span>
@@ -104,7 +93,7 @@ export default function Header() {
 
           <Link
             href="/login"
-            className={`p-1.5 sm:px-2.5 sm:py-1.5 text-xs rounded-lg transition-colors flex items-center gap-1.5 ${
+            className={`p-1.5 sm:px-2.5 sm:py-1.5 text-xs rounded-md transition-colors flex items-center gap-1.5 ${
               pathname === "/login"
                 ? "text-[var(--text-primary)] bg-[var(--bg-elevated)] font-semibold border border-[var(--border-color)]"
                 : "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-elevated)]"
@@ -119,10 +108,10 @@ export default function Header() {
             <ThemeToggle />
           </div>
 
-          {/* Mobile menu hamburger toggle */}
+          {/* Mobile menu toggle */}
           <button
             onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-            className="md:hidden p-2 text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-lg hover:bg-[var(--bg-elevated)] transition-colors"
+            className="md:hidden p-1.5 text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md hover:bg-[var(--bg-elevated)] transition-colors"
             aria-label="Toggle navigation"
           >
             {mobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
@@ -132,9 +121,9 @@ export default function Header() {
 
       {/* Mobile Drawer */}
       {mobileMenuOpen && (
-        <div className="md:hidden border-t border-[var(--border-color)] bg-[var(--bg-surface)] px-4 py-4 space-y-2 animate-fade-in shadow-xl">
-          <div className="text-[11px] font-mono uppercase tracking-wider text-[var(--text-dim)] px-2 mb-1">
-            Sections
+        <div className="md:hidden border-t border-[var(--border-color)] bg-[var(--bg-surface)] px-4 py-4 space-y-2 animate-fade-in shadow-lg">
+          <div className="text-[10px] font-mono uppercase tracking-wider text-[var(--text-muted)] px-1 mb-1">
+            Knowledge Sections
           </div>
           <div className="grid grid-cols-2 gap-1.5">
             {sections.map((s) => {
@@ -144,10 +133,10 @@ export default function Header() {
                   key={s.id}
                   href={`/${s.id}`}
                   onClick={() => setMobileMenuOpen(false)}
-                  className={`flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-medium transition-colors ${
+                  className={`flex items-center gap-2 px-3 py-2 rounded-md text-xs font-medium transition-colors ${
                     isActive
-                      ? "bg-[var(--brand)]/15 text-[var(--brand)] dark:text-[var(--accent)] border border-[var(--brand)]/30 font-semibold"
-                      : "text-[var(--text-secondary)] hover:bg-[var(--bg-elevated)] hover:text-[var(--text-primary)] border border-transparent"
+                      ? "bg-[var(--bg-elevated)] text-[var(--text-primary)] border border-[var(--border-color)] font-semibold"
+                      : "text-[var(--text-secondary)] hover:bg-[var(--bg-elevated)] hover:text-[var(--text-primary)]"
                   }`}
                 >
                   <span>{s.icon}</span>
@@ -161,7 +150,7 @@ export default function Header() {
             <Link
               href="/search"
               onClick={() => setMobileMenuOpen(false)}
-              className="flex-1 flex items-center justify-center gap-1.5 py-2 text-xs bg-[var(--bg-elevated)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] rounded-lg font-medium border border-[var(--border-color)]"
+              className="flex-1 flex items-center justify-center gap-1.5 py-2 text-xs bg-[var(--bg-elevated)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] rounded-md font-medium border border-[var(--border-color)]"
             >
               <Search className="w-3.5 h-3.5" />
               <span>Search</span>
@@ -169,7 +158,7 @@ export default function Header() {
             <Link
               href="/create"
               onClick={() => setMobileMenuOpen(false)}
-              className="flex-1 flex items-center justify-center gap-1.5 py-2 text-xs bg-[var(--brand)] text-white rounded-lg font-medium shadow-sm"
+              className="flex-1 flex items-center justify-center gap-1.5 py-2 text-xs bg-[var(--brand)] text-[var(--brand-fg)] rounded-md font-semibold shadow-xs"
             >
               <Plus className="w-3.5 h-3.5" />
               <span>Create Doc</span>
diff --git a/apps/web/app/components/InteractiveTopology.tsx b/apps/web/app/components/InteractiveTopology.tsx
index fee8fb5..6f6ce1f 100644
--- a/apps/web/app/components/InteractiveTopology.tsx
+++ b/apps/web/app/components/InteractiveTopology.tsx
@@ -9,12 +9,9 @@ import {
   Sparkles,
   Search,
   Globe,
-  Terminal,
   Server,
   ArrowRight,
   CheckCircle2,
-  FileCode2,
-  ShieldCheck,
 } from "lucide-react";
 
 interface NodeDetail {
@@ -33,7 +30,7 @@ const NODES: NodeDetail[] = [
   {
     id: "ai-agents",
     title: "AI Coding Agents",
-    badge: "MCP Consumer",
+    badge: "MCP::CLIENT",
     type: "client",
     icon: Sparkles,
     desc: "Claude Desktop, Cursor, Antigravity, and Zed connect via Model Context Protocol to read and write technical knowledge directly.",
@@ -52,10 +49,10 @@ const NODES: NodeDetail[] = [
   {
     id: "web-ui",
     title: "Human Web Interface",
-    badge: "Next.js 16 + React 19",
+    badge: "UI::NEXTJS",
     type: "client",
     icon: Globe,
-    desc: "Fast, accessible, and responsive developer web interface with dark/light themes, keyboard shortcuts, and instant search.",
+    desc: "Fast, accessible developer web interface with dark/light themes, keyboard shortcuts, and instant search.",
     metrics: [
       { label: "Framework", value: "Next.js 16.3" },
       { label: "Styling", value: "Tailwind CSS v4" },
@@ -71,10 +68,10 @@ const NODES: NodeDetail[] = [
   {
     id: "mcp-server",
     title: "MCP Server Gateway",
-    badge: "Streamable HTTP :4021",
+    badge: "PORT::4021",
     type: "protocol",
     icon: Server,
-    desc: "High-throughput streamable Model Context Protocol server exposing tool endpoints and resource URIs.",
+    desc: "Streamable Model Context Protocol server exposing tool endpoints and resource URIs.",
     metrics: [
       { label: "Port", value: ":4021" },
       { label: "Protocol", value: "MCP 2024-11-05" },
@@ -90,7 +87,7 @@ const NODES: NodeDetail[] = [
   {
     id: "core-engine",
     title: "@mcpedia/core",
-    badge: "Single Source of Truth",
+    badge: "CORE::PACKAGE",
     type: "core",
     icon: Layers,
     desc: "Unified business logic layer shared across Web, MCP Server, REST API, and Background Workers.",
@@ -109,10 +106,10 @@ const NODES: NodeDetail[] = [
   {
     id: "search-engine",
     title: "Multi-Modal Search Engine",
-    badge: "RRF Algorithm",
+    badge: "SEARCH::RRF",
     type: "core",
     icon: Search,
-    desc: "Reciprocal Rank Fusion uniting Postgres Full-Text Search tsvectors with OpenAI/OpenRouter vector embeddings.",
+    desc: "Reciprocal Rank Fusion uniting Postgres Full-Text Search tsvectors with vector embeddings.",
     metrics: [
       { label: "FTS Algorithm", value: "tsvector + GIN" },
       { label: "Vector Search", value: "Cosine Similarity" },
@@ -128,7 +125,7 @@ const NODES: NodeDetail[] = [
   {
     id: "postgres-db",
     title: "PostgreSQL 16 + pgvector",
-    badge: "Primary Storage",
+    badge: "DB::POSTGRES",
     type: "storage",
     icon: Database,
     desc: "ACID-compliant relational database storing document bodies, revision trees, vector embeddings, and full-text indexes.",
@@ -153,38 +150,38 @@ export default function InteractiveTopology() {
   const ActiveIcon = activeNode.icon;
 
   return (
-    <div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-2xl overflow-hidden shadow-sm">
+    <div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl overflow-hidden shadow-xs">
       {/* Header Bar */}
-      <div className="p-5 sm:p-6 border-b border-[var(--border-color)] bg-[var(--bg-elevated)]/50 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+      <div className="p-4 sm:p-5 border-b border-[var(--border-color)] bg-[var(--bg-elevated)] flex flex-col sm:flex-row sm:items-center justify-between gap-3">
         <div>
-          <div className="flex items-center gap-2 mb-1.5">
-            <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
-            <span className="text-[11px] font-mono uppercase tracking-wider text-[var(--text-muted)]">
-              Interactive System Topology
+          <div className="flex items-center gap-2 mb-1">
+            <span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
+            <span className="text-[10px] font-mono uppercase tracking-wider text-[var(--text-muted)]">
+              Architecture Schematic
             </span>
           </div>
-          <h3 className="text-xl font-bold text-[var(--text-primary)] tracking-tight">
-            How MCPedia Unifies Humans & AI Agents
+          <h3 className="text-base sm:text-lg font-bold text-[var(--text-primary)] tracking-tight">
+            System Topology: Single Core Architecture
           </h3>
         </div>
 
         <div className="flex items-center gap-2">
-          <span className="text-xs font-mono text-[var(--text-muted)] bg-[var(--bg-surface)] border border-[var(--border-color)] px-2.5 py-1 rounded-md">
-            Click any node below to inspect
+          <span className="text-[11px] font-mono text-[var(--text-muted)] bg-[var(--bg-surface)] border border-[var(--border-color)] px-2 py-1 rounded">
+            Click nodes to inspect
           </span>
         </div>
       </div>
 
-      {/* Grid Layout: Visual Interactive Map & Inspector */}
+      {/* Grid Layout */}
       <div className="grid grid-cols-1 lg:grid-cols-12">
         {/* Visual Map Column (Left) */}
-        <div className="lg:col-span-7 p-6 border-b lg:border-b-0 lg:border-r border-[var(--border-color)] bg-[var(--bg-app)]/50 flex flex-col justify-between space-y-6">
+        <div className="lg:col-span-7 p-5 border-b lg:border-b-0 lg:border-r border-[var(--border-color)] bg-[var(--bg-app)] flex flex-col justify-between space-y-5">
           {/* Layer 1: Clients */}
           <div>
-            <span className="text-[10px] font-mono uppercase tracking-widest text-[var(--text-dim)] mb-2 block">
+            <span className="text-[10px] font-mono uppercase tracking-widest text-[var(--text-muted)] mb-2 block">
               1. Ingestion & Access Layer
             </span>
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
               {NODES.filter((n) => n.type === "client").map((node) => {
                 const Icon = node.icon;
                 const isSelected = activeNodeId === node.id;
@@ -193,21 +190,21 @@ export default function InteractiveTopology() {
                     key={node.id}
                     onClick={() => setActiveNodeId(node.id)}
                     type="button"
-                    className={`p-3.5 rounded-xl border text-left transition-all cursor-pointer ${
+                    className={`p-3 rounded-lg border text-left transition-all cursor-pointer ${
                       isSelected
-                        ? "bg-[var(--brand)]/15 border-[var(--brand)] shadow-md shadow-[var(--brand)]/10 ring-1 ring-[var(--brand)]"
-                        : "bg-[var(--bg-surface)] border-[var(--border-color)] hover:border-[var(--brand)]/50 hover:bg-[var(--bg-elevated)]"
+                        ? "bg-[var(--bg-surface)] border-[var(--text-primary)] shadow-xs ring-1 ring-[var(--text-primary)]"
+                        : "bg-[var(--bg-surface)] border-[var(--border-color)] hover:border-[var(--text-muted)]"
                     }`}
                   >
                     <div className="flex items-center justify-between mb-2">
-                      <div className={`p-2 rounded-lg ${isSelected ? "bg-[var(--brand)] text-white" : "bg-[var(--bg-elevated)] text-[var(--text-secondary)]"}`}>
-                        <Icon className="w-4 h-4" />
+                      <div className={`p-1.5 rounded ${isSelected ? "bg-[var(--brand)] text-[var(--brand-fg)]" : "bg-[var(--bg-elevated)] text-[var(--text-muted)]"}`}>
+                        <Icon className="w-3.5 h-3.5" />
                       </div>
-                      <span className="text-[10px] font-mono px-2 py-0.5 rounded bg-[var(--bg-elevated)] text-[var(--text-muted)] border border-[var(--border-color)]">
+                      <span className="text-[10px] font-mono px-1.5 py-0.2 rounded bg-[var(--bg-elevated)] text-[var(--text-muted)] border border-[var(--border-color)]">
                         {node.badge}
                       </span>
                     </div>
-                    <div className="font-semibold text-sm text-[var(--text-primary)]">{node.title}</div>
+                    <div className="font-semibold text-xs text-[var(--text-primary)]">{node.title}</div>
                   </button>
                 );
               })}
@@ -216,17 +213,17 @@ export default function InteractiveTopology() {
 
           {/* Flow Connector Arrow */}
           <div className="flex justify-center text-[var(--text-dim)]">
-            <span className="text-xs font-mono px-3 py-0.5 rounded-full bg-[var(--bg-surface)] border border-[var(--border-color)]">
-              ↓ Secure Protocol & Gateway
+            <span className="text-[10px] font-mono px-2.5 py-0.5 rounded bg-[var(--bg-surface)] border border-[var(--border-color)]">
+              ↓ Protocol Gateway
             </span>
           </div>
 
           {/* Layer 2: Protocol & Core Services */}
           <div>
-            <span className="text-[10px] font-mono uppercase tracking-widest text-[var(--text-dim)] mb-2 block">
-              2. Gateway & Intelligence Core
+            <span className="text-[10px] font-mono uppercase tracking-widest text-[var(--text-muted)] mb-2 block">
+              2. Core Engine & Protocol Layer
             </span>
-            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-2.5">
               {NODES.filter((n) => n.type === "protocol" || n.type === "core").map((node) => {
                 const Icon = node.icon;
                 const isSelected = activeNodeId === node.id;
@@ -235,18 +232,18 @@ export default function InteractiveTopology() {
                     key={node.id}
                     onClick={() => setActiveNodeId(node.id)}
                     type="button"
-                    className={`p-3.5 rounded-xl border text-left transition-all cursor-pointer ${
+                    className={`p-3 rounded-lg border text-left transition-all cursor-pointer ${
                       isSelected
-                        ? "bg-[var(--brand)]/15 border-[var(--brand)] shadow-md shadow-[var(--brand)]/10 ring-1 ring-[var(--brand)]"
-                        : "bg-[var(--bg-surface)] border-[var(--border-color)] hover:border-[var(--brand)]/50 hover:bg-[var(--bg-elevated)]"
+                        ? "bg-[var(--bg-surface)] border-[var(--text-primary)] shadow-xs ring-1 ring-[var(--text-primary)]"
+                        : "bg-[var(--bg-surface)] border-[var(--border-color)] hover:border-[var(--text-muted)]"
                     }`}
                   >
                     <div className="flex items-center justify-between mb-2">
-                      <div className={`p-2 rounded-lg ${isSelected ? "bg-[var(--brand)] text-white" : "bg-[var(--bg-elevated)] text-[var(--text-secondary)]"}`}>
-                        <Icon className="w-4 h-4" />
+                      <div className={`p-1.5 rounded ${isSelected ? "bg-[var(--brand)] text-[var(--brand-fg)]" : "bg-[var(--bg-elevated)] text-[var(--text-muted)]"}`}>
+                        <Icon className="w-3.5 h-3.5" />
                       </div>
                     </div>
-                    <div className="font-semibold text-xs text-[var(--text-primary)] leading-tight mb-1 truncate">
+                    <div className="font-semibold text-xs text-[var(--text-primary)] leading-tight mb-0.5 truncate">
                       {node.title}
                     </div>
                     <div className="text-[10px] text-[var(--text-muted)] font-mono truncate">
@@ -260,15 +257,15 @@ export default function InteractiveTopology() {
 
           {/* Flow Connector Arrow */}
           <div className="flex justify-center text-[var(--text-dim)]">
-            <span className="text-xs font-mono px-3 py-0.5 rounded-full bg-[var(--bg-surface)] border border-[var(--border-color)]">
-              ↓ Persistent Layer (ACID + Vectors)
+            <span className="text-[10px] font-mono px-2.5 py-0.5 rounded bg-[var(--bg-surface)] border border-[var(--border-color)]">
+              ↓ Persistent Storage Layer
             </span>
           </div>
 
-          {/* Layer 3: Database & Vector Storage */}
+          {/* Layer 3: Storage */}
           <div>
-            <span className="text-[10px] font-mono uppercase tracking-widest text-[var(--text-dim)] mb-2 block">
-              3. Source of Truth Storage
+            <span className="text-[10px] font-mono uppercase tracking-widest text-[var(--text-muted)] mb-2 block">
+              3. Database (Source of Truth)
             </span>
             {NODES.filter((n) => n.type === "storage").map((node) => {
               const Icon = node.icon;
@@ -278,23 +275,23 @@ export default function InteractiveTopology() {
                   key={node.id}
                   onClick={() => setActiveNodeId(node.id)}
                   type="button"
-                  className={`w-full p-3.5 rounded-xl border text-left transition-all cursor-pointer ${
+                  className={`w-full p-3 rounded-lg border text-left transition-all cursor-pointer ${
                     isSelected
-                      ? "bg-[var(--brand)]/15 border-[var(--brand)] shadow-md shadow-[var(--brand)]/10 ring-1 ring-[var(--brand)]"
-                      : "bg-[var(--bg-surface)] border-[var(--border-color)] hover:border-[var(--brand)]/50 hover:bg-[var(--bg-elevated)]"
+                      ? "bg-[var(--bg-surface)] border-[var(--text-primary)] shadow-xs ring-1 ring-[var(--text-primary)]"
+                      : "bg-[var(--bg-surface)] border-[var(--border-color)] hover:border-[var(--text-muted)]"
                   }`}
                 >
                   <div className="flex items-center justify-between">
                     <div className="flex items-center gap-3">
-                      <div className={`p-2 rounded-lg ${isSelected ? "bg-[var(--brand)] text-white" : "bg-[var(--bg-elevated)] text-[var(--text-secondary)]"}`}>
+                      <div className={`p-1.5 rounded ${isSelected ? "bg-[var(--brand)] text-[var(--brand-fg)]" : "bg-[var(--bg-elevated)] text-[var(--text-muted)]"}`}>
                         <Icon className="w-4 h-4" />
                       </div>
                       <div>
-                        <div className="font-semibold text-sm text-[var(--text-primary)]">{node.title}</div>
-                        <div className="text-xs text-[var(--text-muted)]">Source of truth for all content & embeddings</div>
+                        <div className="font-semibold text-xs text-[var(--text-primary)]">{node.title}</div>
+                        <div className="text-[11px] text-[var(--text-muted)]">Source of truth for all content & embeddings</div>
                       </div>
                     </div>
-                    <span className="text-[10px] font-mono px-2 py-0.5 rounded bg-[var(--bg-elevated)] text-[var(--text-muted)] border border-[var(--border-color)]">
+                    <span className="text-[10px] font-mono px-1.5 py-0.2 rounded bg-[var(--bg-elevated)] text-[var(--text-muted)] border border-[var(--border-color)]">
                       {node.badge}
                     </span>
                   </div>
@@ -305,40 +302,40 @@ export default function InteractiveTopology() {
         </div>
 
         {/* Node Inspector Details Column (Right) */}
-        <div className="lg:col-span-5 p-6 bg-[var(--bg-surface)] flex flex-col justify-between space-y-6 animate-fade-in">
+        <div className="lg:col-span-5 p-5 bg-[var(--bg-surface)] flex flex-col justify-between space-y-5 animate-fade-in">
           <div>
             {/* Inspector Header */}
-            <div className="flex items-start justify-between gap-4 mb-4">
-              <div className="flex items-center gap-3">
-                <div className="w-11 h-11 rounded-xl bg-[var(--brand)]/15 border border-[var(--brand)]/30 text-[var(--brand)] dark:text-[var(--accent)] flex items-center justify-center">
-                  <ActiveIcon className="w-5 h-5" />
+            <div className="flex items-start justify-between gap-3 mb-3">
+              <div className="flex items-center gap-2.5">
+                <div className="w-9 h-9 rounded-lg bg-[var(--bg-elevated)] border border-[var(--border-color)] text-[var(--text-primary)] flex items-center justify-center">
+                  <ActiveIcon className="w-4 h-4" />
                 </div>
                 <div>
-                  <h4 className="text-lg font-bold text-[var(--text-primary)]">{activeNode.title}</h4>
-                  <span className="text-xs font-mono text-[var(--brand)] dark:text-[var(--accent)]">
+                  <h4 className="text-sm font-bold text-[var(--text-primary)]">{activeNode.title}</h4>
+                  <span className="text-[10px] font-mono text-[var(--text-muted)]">
                     {activeNode.badge}
                   </span>
                 </div>
               </div>
             </div>
 
-            <p className="text-xs sm:text-sm text-[var(--text-muted)] leading-relaxed mb-6">
+            <p className="text-xs text-[var(--text-secondary)] leading-relaxed mb-5">
               {activeNode.desc}
             </p>
 
             {/* Telemetry Metrics */}
-            <div className="mb-6">
-              <span className="text-[11px] font-semibold uppercase tracking-wider text-[var(--text-dim)] font-mono mb-2.5 block">
-                Telemetry & Architecture
+            <div className="mb-5">
+              <span className="text-[10px] font-semibold uppercase tracking-wider text-[var(--text-muted)] font-mono mb-2 block">
+                Specifications
               </span>
-              <div className="space-y-2">
+              <div className="space-y-1.5">
                 {activeNode.metrics.map((m) => (
                   <div
                     key={m.label}
-                    className="flex items-center justify-between p-2.5 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded-lg text-xs"
+                    className="flex items-center justify-between p-2 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded text-xs"
                   >
-                    <span className="text-[var(--text-muted)]">{m.label}</span>
-                    <span className="font-mono font-medium text-[var(--text-primary)]">{m.value}</span>
+                    <span className="text-[var(--text-muted)] text-[11px]">{m.label}</span>
+                    <span className="font-mono font-medium text-[var(--text-primary)] text-[11px]">{m.value}</span>
                   </div>
                 ))}
               </div>
@@ -346,13 +343,13 @@ export default function InteractiveTopology() {
 
             {/* Key Capabilities */}
             <div>
-              <span className="text-[11px] font-semibold uppercase tracking-wider text-[var(--text-dim)] font-mono mb-2.5 block">
-                Key Capabilities
+              <span className="text-[10px] font-semibold uppercase tracking-wider text-[var(--text-muted)] font-mono mb-2 block">
+                Capabilities
               </span>
-              <ul className="space-y-2">
+              <ul className="space-y-1.5">
                 {activeNode.features.map((feat, idx) => (
                   <li key={idx} className="flex items-start gap-2 text-xs text-[var(--text-secondary)]">
-                    <CheckCircle2 className="w-3.5 h-3.5 text-emerald-500 shrink-0 mt-0.5" />
+                    <span className="text-emerald-500 shrink-0 font-mono text-[11px]">✓</span>
                     <span>{feat}</span>
                   </li>
                 ))}
@@ -362,12 +359,12 @@ export default function InteractiveTopology() {
 
           {/* Link to Documentation */}
           {activeNode.docLink && (
-            <div className="pt-4 border-t border-[var(--border-color)]">
+            <div className="pt-3 border-t border-[var(--border-color)]">
               <Link
                 href={activeNode.docLink}
-                className="inline-flex items-center justify-center gap-2 w-full py-2.5 bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] text-xs font-semibold text-[var(--text-primary)] rounded-xl transition-all shadow-xs group"
+                className="inline-flex items-center justify-center gap-1.5 w-full py-2 bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] text-xs font-semibold text-[var(--text-primary)] rounded-lg transition-colors group"
               >
-                <span>Read technical writeup in {activeNode.title}</span>
+                <span>Read documentation</span>
                 <ArrowRight className="w-3.5 h-3.5 group-hover:translate-x-0.5 transition-transform" />
               </Link>
             </div>
diff --git a/apps/web/app/components/McpConfigSnippet.tsx b/apps/web/app/components/McpConfigSnippet.tsx
index a591b4f..9c97cd0 100644
--- a/apps/web/app/components/McpConfigSnippet.tsx
+++ b/apps/web/app/components/McpConfigSnippet.tsx
@@ -6,11 +6,8 @@ import {
   Sparkles,
   Terminal,
   Server,
-  Code2,
   Copy,
   Check,
-  CheckCircle2,
-  Cpu,
   Laptop,
 } from "lucide-react";
 
@@ -54,10 +51,10 @@ const CONFIGS = [
   },
   {
     id: "http",
-    label: "Streamable HTTP Endpoint",
+    label: "Streamable HTTP (SSE)",
     icon: Server,
     lang: "json",
-    filename: "Streamable HTTP (SSE) Client Config",
+    filename: "Streamable HTTP Client Config",
     content: `{
   "mcpServers": {
     "mcpedia-remote": {
@@ -74,11 +71,11 @@ const CONFIGS = [
     label: "CLI & Scripts",
     icon: Terminal,
     lang: "bash",
-    filename: "Terminal / MCP Client Subprocess",
-    content: `# Ask questions over semantic knowledge
+    filename: "Terminal Subprocess / REPL",
+    content: `# Semantic question answering via MCP client
 bun run apps/mcp-client/src/ask.ts "How does ret2win stack alignment work in x86_64?"
 
-# Run interactive REPL with native tool calls
+# Interactive REPL with tool discovery
 bun run apps/mcp-client/src/index.ts`,
   },
 ];
@@ -100,9 +97,9 @@ ${current.content}
   }
 
   return (
-    <div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-2xl overflow-hidden shadow-sm">
+    <div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl overflow-hidden shadow-xs">
       {/* Header bar with tabs */}
-      <div className="flex items-center justify-between px-4 sm:px-6 py-3 bg-[var(--bg-elevated)]/60 border-b border-[var(--border-color)] flex-wrap gap-2">
+      <div className="flex items-center justify-between px-4 py-2.5 bg-[var(--bg-elevated)] border-b border-[var(--border-color)] flex-wrap gap-2">
         <div className="flex items-center gap-1.5 flex-wrap">
           {CONFIGS.map((c) => {
             const Icon = c.icon;
@@ -112,9 +109,9 @@ ${current.content}
                 key={c.id}
                 onClick={() => setActiveTab(c.id)}
                 type="button"
-                className={`flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-xl font-semibold transition-all cursor-pointer ${
+                className={`flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md font-medium transition-all cursor-pointer ${
                   isSelected
-                    ? "bg-[var(--brand)] text-white shadow-md shadow-[var(--brand)]/20"
+                    ? "bg-[var(--brand)] text-[var(--brand-fg)] font-semibold shadow-xs"
                     : "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-surface)]"
                 }`}
               >
@@ -128,12 +125,12 @@ ${current.content}
         <button
           onClick={handleCopyAll}
           type="button"
-          className="flex items-center gap-1.5 px-3 py-1 text-xs bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] rounded-lg transition-all shadow-xs cursor-pointer font-medium"
+          className="flex items-center gap-1.5 px-2.5 py-1 text-xs bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] text-[var(--text-primary)] rounded-md transition-colors shadow-xs cursor-pointer font-medium"
         >
           {copied ? (
             <>
               <Check className="w-3.5 h-3.5 text-emerald-500" />
-              <span className="text-emerald-500">Copied Config</span>
+              <span className="text-emerald-500">Copied</span>
             </>
           ) : (
             <>
@@ -144,15 +141,15 @@ ${current.content}
         </button>
       </div>
 
-      {/* Code preview via Markdown syntax highlighter */}
+      {/* Code preview */}
       <div className="p-4 sm:p-5 [&>.prose>.group]:my-0 [&>.prose]:max-w-none">
         <Markdown source={markdownSnippet} />
       </div>
 
       {/* Footer Info */}
-      <div className="px-4 sm:px-6 py-3 bg-[var(--bg-elevated)]/40 border-t border-[var(--border-color)] text-xs text-[var(--text-dim)] flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+      <div className="px-4 py-2.5 bg-[var(--bg-elevated)] border-t border-[var(--border-color)] text-xs text-[var(--text-dim)] flex flex-col sm:flex-row sm:items-center justify-between gap-2">
         <div className="flex items-center gap-2">
-          <span className="font-mono uppercase text-[10px] text-[var(--text-muted)] font-semibold">
+          <span className="font-mono uppercase text-[10px] text-[var(--text-muted)]">
             Target File:
           </span>
           <span className="font-mono text-[var(--text-secondary)] text-[11px]">
@@ -160,10 +157,9 @@ ${current.content}
           </span>
         </div>
 
-        <div className="flex items-center gap-3 text-[11px]">
-          <span className="flex items-center gap-1 text-emerald-600 dark:text-emerald-400 font-medium">
-            <CheckCircle2 className="w-3.5 h-3.5" />
-            <span>13 MCP Tools Ready</span>
+        <div className="flex items-center gap-3 text-[11px] font-mono">
+          <span className="flex items-center gap-1 text-[var(--text-muted)]">
+            <span>[ 13_TOOLS_ACTIVE ]</span>
           </span>
         </div>
       </div>
diff --git a/apps/web/app/components/PdfExportView.tsx b/apps/web/app/components/PdfExportView.tsx
index f111783..e271804 100644
--- a/apps/web/app/components/PdfExportView.tsx
+++ b/apps/web/app/components/PdfExportView.tsx
@@ -20,8 +20,6 @@ import {
   Copy,
   Check,
   ArrowLeft,
-  Filter,
-  ListOrdered,
   BookOpen,
 } from "lucide-react";
 
@@ -124,20 +122,20 @@ export default function PdfExportView({
   return (
     <div className="pb-16 print:pb-0">
       {/* Export Control Toolbar (Screen Only — Hidden in Print) */}
-      <aside className="no-print export-toolbar sticky top-16 z-30 mb-8 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-2xl p-5 shadow-md">
+      <aside className="no-print export-toolbar sticky top-16 z-30 mb-8 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl p-4 sm:p-5 shadow-xs">
         <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
           {/* Left info & Back button */}
-          <div className="flex items-center gap-3.5">
+          <div className="flex items-center gap-3">
             <Link
               href={backHref}
-              className="inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-semibold bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-xl text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-all shadow-xs"
+              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] rounded-md text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors shadow-xs"
             >
               <ArrowLeft className="w-3.5 h-3.5" />
               <span>Back</span>
             </Link>
             <div>
               <div className="flex items-center gap-2">
-                <span className="text-xs font-mono text-[var(--brand)] dark:text-[var(--accent)] font-bold uppercase">
+                <span className="text-xs font-mono text-[var(--text-primary)] font-bold uppercase">
                   {sectionMeta.label}
                 </span>
                 <span className="text-xs text-[var(--text-dim)]">·</span>
@@ -158,7 +156,7 @@ export default function PdfExportView({
             <button
               onClick={handleCopyMarkdown}
               type="button"
-              className="inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-semibold bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] rounded-xl transition-all shadow-xs cursor-pointer"
+              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] rounded-md transition-colors shadow-xs cursor-pointer"
               title="Copy compiled markdown document"
             >
               {copiedMd ? (
@@ -169,7 +167,7 @@ export default function PdfExportView({
               ) : (
                 <>
                   <Copy className="w-3.5 h-3.5" />
-                  <span>Copy Markdown</span>
+                  <span>Copy MD</span>
                 </>
               )}
             </button>
@@ -178,7 +176,7 @@ export default function PdfExportView({
             <button
               onClick={handleDownloadMarkdown}
               type="button"
-              className="inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-semibold bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] rounded-xl transition-all shadow-xs cursor-pointer"
+              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] rounded-md transition-colors shadow-xs cursor-pointer"
               title="Download compiled .md file"
             >
               <FileDown className="w-3.5 h-3.5" />
@@ -189,24 +187,24 @@ export default function PdfExportView({
             <button
               onClick={handlePrint}
               type="button"
-              className="inline-flex items-center gap-2 px-4 py-2 text-xs font-bold bg-slate-900 hover:bg-slate-800 dark:bg-white dark:hover:bg-slate-100 text-white dark:text-slate-900 rounded-xl shadow-md transition-all cursor-pointer hover:shadow-lg"
+              className="inline-flex items-center gap-2 px-3.5 py-1.5 text-xs font-bold bg-[var(--brand)] hover:opacity-90 text-[var(--brand-fg)] rounded-md shadow-xs transition-all cursor-pointer"
               title="Open browser print dialog to save as PDF"
             >
               <Printer className="w-4 h-4" />
-              <span>Print / Save as PDF</span>
+              <span>Print / Save PDF</span>
             </button>
           </div>
         </div>
 
         {/* Options & Filters Bar */}
-        <div className="mt-4 pt-3.5 border-t border-[var(--border-color)] flex flex-col sm:flex-row sm:items-center justify-between gap-3 text-xs">
+        <div className="mt-3.5 pt-3 border-t border-[var(--border-color)] flex flex-col sm:flex-row sm:items-center justify-between gap-3 text-xs">
           {/* Sort Order Selector */}
           <div className="flex items-center gap-2">
-            <span className="text-[var(--text-muted)] font-medium font-mono text-[11px] uppercase">Sort by:</span>
+            <span className="text-[var(--text-muted)] font-mono text-[10px] uppercase">Sort:</span>
             <select
               value={sortBy}
               onChange={(e) => setSortBy(e.target.value as ExportSortOption)}
-              className="bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded-lg px-3 py-1 text-xs text-[var(--text-primary)] focus:outline-none focus:border-[var(--brand)]"
+              className="bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded px-2.5 py-1 text-xs text-[var(--text-primary)] focus:outline-none"
             >
               <option value="category_points">Category & Points (Standard)</option>
               <option value="points_desc">Points (Highest First)</option>
@@ -225,7 +223,7 @@ export default function PdfExportView({
                   type="checkbox"
                   checked={showTOC}
                   onChange={(e) => setShowTOC(e.target.checked)}
-                  className="rounded border-[var(--border-color)] text-indigo-600"
+                  className="rounded border-[var(--border-color)]"
                 />
                 <span>Table of Contents</span>
               </label>
@@ -236,7 +234,7 @@ export default function PdfExportView({
                 type="checkbox"
                 checked={pageBreaks}
                 onChange={(e) => setPageBreaks(e.target.checked)}
-                className="rounded border-[var(--border-color)] text-indigo-600"
+                className="rounded border-[var(--border-color)]"
               />
               <span>Page Break per Challenge</span>
             </label>
@@ -246,13 +244,13 @@ export default function PdfExportView({
         {/* Category filter pills */}
         {allCategories.length > 1 && (
           <div className="mt-3 pt-3 border-t border-[var(--border-color)] flex items-center gap-1.5 flex-wrap text-xs">
-            <span className="text-[var(--text-muted)] font-mono text-[11px] uppercase mr-1">Filter:</span>
+            <span className="text-[var(--text-muted)] font-mono text-[10px] uppercase mr-1">Filter:</span>
             <button
               onClick={() => setSelectedCategory("all")}
               type="button"
-              className={`px-3 py-1 rounded-lg text-xs font-mono transition-all cursor-pointer ${
+              className={`px-2.5 py-0.5 rounded text-xs font-mono transition-all cursor-pointer ${
                 selectedCategory === "all"
-                  ? "bg-slate-900 dark:bg-white text-white dark:text-slate-900 font-bold"
+                  ? "bg-[var(--brand)] text-[var(--brand-fg)] font-bold"
                   : "bg-[var(--bg-elevated)] text-[var(--text-muted)] hover:text-[var(--text-primary)] border border-[var(--border-color)]"
               }`}
             >
@@ -267,9 +265,9 @@ export default function PdfExportView({
                   key={cat}
                   onClick={() => setSelectedCategory(cat)}
                   type="button"
-                  className={`px-3 py-1 rounded-lg text-xs font-mono transition-all cursor-pointer ${
+                  className={`px-2.5 py-0.5 rounded text-xs font-mono transition-all cursor-pointer ${
                     selectedCategory.toLowerCase() === cat.toLowerCase()
-                      ? "bg-slate-900 dark:bg-white text-white dark:text-slate-900 font-bold"
+                      ? "bg-[var(--brand)] text-[var(--brand-fg)] font-bold"
                       : "bg-[var(--bg-elevated)] text-[var(--text-muted)] hover:text-[var(--text-primary)] border border-[var(--border-color)]"
                   }`}
                 >
@@ -282,7 +280,7 @@ export default function PdfExportView({
       </aside>
 
       {/* Writeup Document Flow */}
-      <main className="print-container bg-white text-slate-900 max-w-4xl mx-auto px-4 sm:px-8 py-6 print:p-0 print:max-w-none rounded-2xl border border-[var(--border-color)] print:border-none shadow-sm print:shadow-none">
+      <main className="print-container bg-white text-slate-900 max-w-4xl mx-auto px-4 sm:px-8 py-6 print:p-0 print:max-w-none rounded-xl border border-[var(--border-color)] print:border-none shadow-xs print:shadow-none">
         {/* Document Header */}
         <header className="mb-8 pb-4 border-b border-slate-300">
           <h1 className="text-3xl sm:text-4xl font-extrabold text-slate-950 tracking-tight mb-2">
@@ -300,8 +298,8 @@ export default function PdfExportView({
         {/* Table of Contents */}
         {showTOC && filteredAndSortedDocs.length > 1 && (
           <section className="toc-section mb-10 pb-6 border-b border-slate-200">
-            <h2 className="text-sm font-bold uppercase font-mono text-slate-700 mb-3 tracking-wider flex items-center gap-1.5">
-              <BookOpen className="w-4 h-4" />
+            <h2 className="text-xs font-bold uppercase font-mono text-slate-700 mb-3 tracking-wider flex items-center gap-1.5">
+              <BookOpen className="w-3.5 h-3.5" />
               <span>Table of Contents</span>
             </h2>
             <ol className="list-decimal list-inside space-y-1.5 text-xs text-slate-800">
@@ -327,7 +325,7 @@ export default function PdfExportView({
           </section>
         )}
 
-        {/* Challenges / Writeups Flow */}
+        {/* Challenges Flow */}
         <div className="challenges-flow space-y-10 print:space-y-0">
           {filteredAndSortedDocs.map((doc, idx) => {
             const chNum = idx + 1;
diff --git a/apps/web/app/components/Sidebar.tsx b/apps/web/app/components/Sidebar.tsx
index c15c35a..cae0a85 100644
--- a/apps/web/app/components/Sidebar.tsx
+++ b/apps/web/app/components/Sidebar.tsx
@@ -12,7 +12,6 @@ import {
   Search,
   X,
   Plus,
-  Compass,
 } from "lucide-react";
 
 interface Doc {
@@ -114,11 +113,11 @@ function TreeNodeItem({
   return (
     <li className={`select-none ${depth > 0 ? "ml-3.5 pl-2 border-l border-[var(--border-color)]" : ""}`}>
       <div
-        className={`group flex items-center justify-between gap-1 text-xs py-1.5 px-2 rounded-lg transition-all ${
+        className={`group flex items-center justify-between gap-1 text-xs py-1.5 px-2 rounded-md transition-all ${
           isActive
-            ? "text-[var(--brand)] dark:text-[var(--accent)] bg-[var(--brand)]/15 font-semibold border border-[var(--brand)]/30 shadow-xs"
+            ? "text-[var(--text-primary)] bg-[var(--bg-elevated)] font-semibold border border-[var(--border-color)] shadow-xs"
             : isParentOfActive
-              ? "text-[var(--text-primary)] bg-[var(--bg-elevated)]"
+              ? "text-[var(--text-primary)] bg-[var(--bg-elevated)]/60"
               : "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-elevated)]"
         }`}
       >
@@ -127,12 +126,12 @@ function TreeNodeItem({
           className="flex items-center gap-2 min-w-0 flex-1 py-0.5"
           title={node.title || node.name}
         >
-          <span className="shrink-0 text-[var(--text-dim)] group-hover:text-[var(--brand)] dark:group-hover:text-[var(--accent)] transition-colors">
+          <span className="shrink-0 text-[var(--text-dim)] group-hover:text-[var(--text-primary)] transition-colors">
             {isFolder ? (
               isCollapsed ? (
                 <Folder className="w-3.5 h-3.5" />
               ) : (
-                <FolderOpen className="w-3.5 h-3.5 text-[var(--brand)] dark:text-[var(--accent)]" />
+                <FolderOpen className="w-3.5 h-3.5 text-[var(--text-primary)]" />
               )
             ) : (
               <FileText className="w-3.5 h-3.5" />
@@ -153,7 +152,7 @@ function TreeNodeItem({
                 e.stopPropagation();
                 toggleCollapse(node.slug);
               }}
-              className="p-1 text-[var(--text-dim)] hover:text-[var(--text-primary)] rounded hover:bg-[var(--bg-elevated-hover)] transition-transform"
+              className="p-1 text-[var(--text-dim)] hover:text-[var(--text-primary)] rounded hover:bg-[var(--bg-elevated-hover)] transition-transform cursor-pointer"
               aria-label={isCollapsed ? "Expand folder" : "Collapse folder"}
             >
               <ChevronRight
@@ -233,14 +232,14 @@ export default function Sidebar() {
             type="text"
             value={filterText}
             onChange={(e) => setFilterText(e.target.value)}
-            placeholder="Filter knowledge tree..."
-            className="w-full pl-8 pr-7 py-1.5 bg-[var(--bg-surface)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-lg text-xs text-[var(--text-primary)] placeholder-[var(--text-dim)] focus:outline-none focus:border-[var(--brand)] focus:ring-1 focus:ring-[var(--brand)] transition-all"
+            placeholder="Filter index..."
+            className="w-full pl-8 pr-7 py-1.5 bg-[var(--bg-surface)] border border-[var(--border-color)] hover:border-[var(--text-muted)] rounded-md text-xs text-[var(--text-primary)] placeholder-[var(--text-dim)] focus:outline-none focus:border-[var(--text-primary)] transition-all"
           />
           <Search className="w-3.5 h-3.5 text-[var(--text-dim)] absolute left-2.5 top-2.5 pointer-events-none" />
           {filterText && (
             <button
               onClick={() => setFilterText("")}
-              className="absolute right-2 top-2 p-0.5 text-[var(--text-dim)] hover:text-[var(--text-primary)] rounded hover:bg-[var(--bg-elevated)]"
+              className="absolute right-2 top-2 p-0.5 text-[var(--text-dim)] hover:text-[var(--text-primary)] rounded"
               aria-label="Clear filter"
             >
               <X className="w-3.5 h-3.5" />
@@ -250,7 +249,7 @@ export default function Sidebar() {
       </div>
 
       {/* Summary count */}
-      <div className="flex items-center justify-between px-1 mb-2 text-[10px] text-[var(--text-dim)] font-mono uppercase tracking-wider">
+      <div className="flex items-center justify-between px-1 mb-2 text-[10px] text-[var(--text-muted)] font-mono uppercase tracking-wider">
         <span>Knowledge Index</span>
         <span>{filteredDocs.length} items</span>
       </div>
@@ -268,9 +267,9 @@ export default function Sidebar() {
             <div key={id} className="border-b border-[var(--border-color)] pb-3 last:border-0">
               <Link
                 href={`/${id}`}
-                className={`flex items-center justify-between gap-1.5 px-2 py-1.5 mb-1 rounded-lg text-xs font-semibold uppercase tracking-wider transition-colors ${
+                className={`flex items-center justify-between gap-1.5 px-2 py-1 mb-1 rounded-md text-xs font-semibold uppercase tracking-wider transition-colors ${
                   isSectionActive
-                    ? "text-[var(--brand)] dark:text-[var(--accent)] bg-[var(--brand)]/10"
+                    ? "text-[var(--text-primary)] bg-[var(--bg-elevated)]"
                     : "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-elevated)]"
                 }`}
               >
@@ -278,7 +277,7 @@ export default function Sidebar() {
                   <span className="text-xs">{icon}</span>
                   <span>{label}</span>
                 </div>
-                <span className="text-[10px] text-[var(--text-dim)] font-normal font-mono bg-[var(--bg-surface)] px-1.5 py-0.5 rounded border border-[var(--border-color)]">
+                <span className="text-[10px] text-[var(--text-muted)] font-normal font-mono bg-[var(--bg-surface)] px-1.5 py-0.2 rounded border border-[var(--border-color)]">
                   {sectionDocs.length}
                 </span>
               </Link>
@@ -300,7 +299,7 @@ export default function Sidebar() {
         })}
 
         {filteredDocs.length === 0 && (
-          <div className="text-center py-8 text-xs text-[var(--text-dim)]">
+          <div className="text-center py-8 text-xs text-[var(--text-dim)] font-mono">
             No matching documents
           </div>
         )}
@@ -310,10 +309,10 @@ export default function Sidebar() {
       <div className="pt-3 border-t border-[var(--border-color)] mt-auto">
         <Link
           href="/create"
-          className="flex items-center justify-center gap-2 w-full py-2 text-xs bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] rounded-lg transition-all font-medium shadow-xs group"
+          className="flex items-center justify-center gap-2 w-full py-2 text-xs bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] hover:border-[var(--text-muted)] text-[var(--text-primary)] rounded-md transition-all font-medium shadow-xs"
         >
-          <Plus className="w-3.5 h-3.5 text-[var(--brand)] dark:text-[var(--accent)] group-hover:scale-110 transition-transform" />
-          <span>Create New Document</span>
+          <Plus className="w-3.5 h-3.5 text-[var(--text-muted)]" />
+          <span>Create Document</span>
         </Link>
       </div>
     </nav>
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index ccfe6ae..f230e58 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -1,34 +1,42 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
 
-/* Light mode defaults (:root) */
+/*
+  MCPedia Design Philosophy: Archival Precision & Technical Monolith
+  - Strict monochromatic foundation (Graphite, Zinc, Charcoal)
+  - Zero decorative AI gradients or blurred blobs
+  - Typographic hierarchy: Strong contrast, razor-sharp hairline borders, monospace telemetry
+  - Functional signal indicators (Status Green, Alert Amber, Critical Coral)
+*/
+
+/* Light mode defaults (:root) - Technical Paper / Archival Slate */
 :root {
   color-scheme: light;
-  --bg-app: #f8fafc;
+  --bg-app: #f9fafb;
   --bg-surface: #ffffff;
-  --bg-surface-hover: #f1f5f9;
-  --bg-elevated: #f1f5f9;
-  --bg-elevated-hover: #e2e8f0;
-  --border-color: #e2e8f0;
-  --border-subtle: #edf2f7;
-  --border-card: #e2e8f0;
+  --bg-surface-hover: #f3f4f6;
+  --bg-elevated: #f3f4f6;
+  --bg-elevated-hover: #e5e7eb;
+  --border-color: #e5e7eb;
+  --border-subtle: #f3f4f6;
+  --border-card: #e5e7eb;
 
-  --text-primary: #0f172a;
-  --text-secondary: #334155;
-  --text-muted: #64748b;
-  --text-dim: #94a3b8;
+  --text-primary: #111827;
+  --text-secondary: #374151;
+  --text-muted: #6b7280;
+  --text-dim: #9ca3af;
 
-  --brand: #4f46e5;
-  --brand-hover: #4338ca;
-  --brand-glow: rgba(79, 70, 229, 0.15);
-  --accent: #4f46e5;
-  --accent-hover: #4338ca;
-  --cyan-accent: #0284c7;
+  /* Accent: Precision Technical Ink */
+  --brand: #18181b;
+  --brand-hover: #27272a;
+  --brand-fg: #ffffff;
+  --accent: #2563eb;
+  --accent-hover: #1d4ed8;
 
-  --nav-bg: rgba(255, 255, 255, 0.85);
+  --nav-bg: rgba(255, 255, 255, 0.92);
 
-  /* Code & Syntax variables (Light Mode) */
-  --code-bg: #f8fafc;
+  /* Code & Syntax (Light Mode) */
+  --code-bg: #f3f4f6;
   --code-block-bg: #f8fafc;
   --code-header-bg: #f1f5f9;
   --border-code: #e2e8f0;
@@ -39,15 +47,15 @@
   --code-inline-text: #0f172a;
   --code-inline-border: #e2e8f0;
 
-  --table-zebra: rgba(241, 245, 249, 0.6);
-  --scrollbar-thumb: #cbd5e1;
-  --scrollbar-thumb-hover: #94a3b8;
-  --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
+  --table-zebra: rgba(243, 244, 246, 0.5);
+  --scrollbar-thumb: #d1d5db;
+  --scrollbar-thumb-hover: #9ca3af;
+  --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
 
-  /* Syntax Highlighting (Light Mode) */
+  /* Syntax Highlighting */
   --hl-keyword: #cf222e;
   --hl-string: #0a3069;
-  --hl-title: #8250df;
+  --hl-title: #6f42c1;
   --hl-attr: #953800;
   --hl-number: #0550ae;
   --hl-comment: #6e7781;
@@ -55,55 +63,52 @@
   --hl-operator: #57606a;
   --hl-variable: #953800;
   --hl-meta: #6e7781;
-
-  /* Grid overlay */
-  --grid-pattern: rgba(15, 23, 42, 0.03);
 }
 
-/* Dark mode overrides (html.dark) */
+/* Dark mode overrides (html.dark) - Deep Basalt / Precision Carbon */
 html.dark {
   color-scheme: dark;
-  --bg-app: #08090d;
-  --bg-surface: #0e1117;
-  --bg-surface-hover: #141822;
-  --bg-elevated: #151a26;
-  --bg-elevated-hover: #1e2436;
-  --border-color: #1e2536;
-  --border-subtle: rgba(255, 255, 255, 0.06);
-  --border-card: #1e2536;
+  --bg-app: #090a0c;
+  --bg-surface: #101216;
+  --bg-surface-hover: #16181f;
+  --bg-elevated: #161920;
+  --bg-elevated-hover: #1e222b;
+  --border-color: #222630;
+  --border-subtle: #181b22;
+  --border-card: #222630;
 
-  --text-primary: #f8fafc;
-  --text-secondary: #cbd5e1;
-  --text-muted: #8492a6;
-  --text-dim: #505c70;
+  --text-primary: #f3f4f6;
+  --text-secondary: #d1d5db;
+  --text-muted: #9ca3af;
+  --text-dim: #6b7280;
 
-  --brand: #6366f1;
-  --brand-hover: #818cf8;
-  --brand-glow: rgba(99, 102, 241, 0.22);
-  --accent: #818cf8;
-  --accent-hover: #a5b4fc;
-  --cyan-accent: #38bdf8;
+  /* Accent: Monolithic Snow Ink */
+  --brand: #f3f4f6;
+  --brand-hover: #ffffff;
+  --brand-fg: #090a0c;
+  --accent: #60a5fa;
+  --accent-hover: #93c5fd;
 
-  --nav-bg: rgba(8, 9, 13, 0.85);
+  --nav-bg: rgba(9, 10, 12, 0.90);
 
-  /* Code & Syntax variables (Dark Mode) */
-  --code-bg: #0b0e14;
-  --code-block-bg: #0a0d14;
-  --code-header-bg: #111520;
-  --border-code: #202738;
-  --code-button-bg: #151a26;
-  --code-button-hover-bg: #202738;
-  --pre-text: #e2e8f0;
-  --code-inline-bg: #131722;
-  --code-inline-text: #e2e8f0;
-  --code-inline-border: #202738;
+  /* Code & Syntax (Dark Mode) */
+  --code-bg: #0c0e12;
+  --code-block-bg: #0c0e12;
+  --code-header-bg: #14171d;
+  --border-code: #222630;
+  --code-button-bg: #181b22;
+  --code-button-hover-bg: #222630;
+  --pre-text: #e5e7eb;
+  --code-inline-bg: #161920;
+  --code-inline-text: #e5e7eb;
+  --code-inline-border: #222630;
 
-  --table-zebra: rgba(255, 255, 255, 0.02);
-  --scrollbar-thumb: #1e2536;
-  --scrollbar-thumb-hover: #313c54;
+  --table-zebra: rgba(255, 255, 255, 0.015);
+  --scrollbar-thumb: #222630;
+  --scrollbar-thumb-hover: #374151;
   --shadow-card: none;
 
-  /* Syntax Highlighting (Dark Mode) */
+  /* Syntax Highlighting */
   --hl-keyword: #ff7b72;
   --hl-string: #a5d6ff;
   --hl-title: #d2a8ff;
@@ -114,13 +119,10 @@ html.dark {
   --hl-operator: #8b949e;
   --hl-variable: #ffa657;
   --hl-meta: #8b949e;
-
-  /* Grid overlay */
-  --grid-pattern: rgba(255, 255, 255, 0.025);
 }
 
 @theme inline {
-  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
 
   --color-background: var(--bg-app);
@@ -151,25 +153,17 @@ body {
   background-color: var(--bg-app);
   color: var(--text-secondary);
   font-family: var(--font-sans);
-  font-feature-settings: "cv01", "ss03", "zero";
+  font-feature-settings: "cv01", "ss03", "zero", "calt";
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  transition: background-color 0.25s ease, color 0.25s ease;
-  position: relative;
+  transition: background-color 0.15s ease, color 0.15s ease;
   min-height: 100vh;
 }
 
-/* Background subtle tech grid */
-.tech-grid-bg {
-  background-size: 32px 32px;
-  background-image: linear-gradient(to right, var(--grid-pattern) 1px, transparent 1px),
-                    linear-gradient(to bottom, var(--grid-pattern) 1px, transparent 1px);
-}
-
-/* Custom scrollbar */
+/* Custom hairline scrollbar */
 ::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: 5px;
+  height: 5px;
 }
 
 ::-webkit-scrollbar-track {
@@ -178,72 +172,54 @@ body {
 
 ::-webkit-scrollbar-thumb {
   background: var(--scrollbar-thumb);
-  border-radius: 9999px;
+  border-radius: 2px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
   background: var(--scrollbar-thumb-hover);
 }
 
-/* Glassmorphism helpers */
-.glass-panel {
-  background: var(--bg-surface);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid var(--border-color);
-}
-
+/* Glass navigation */
 .glass-nav {
   background: var(--nav-bg);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
 }
 
-.glow-card {
-  position: relative;
-  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.glow-card:hover {
-  transform: translateY(-2px);
-  border-color: var(--brand);
-  box-shadow: 0 8px 30px -10px var(--brand-glow);
-}
-
-/* Callout Alert Styles */
+/* Tactical Architectural Callouts */
 .callout {
-  border-left-width: 4px;
-  border-radius: 0 0.5rem 0.5rem 0;
-  padding: 1rem 1.25rem;
+  border-left-width: 3px;
+  border-radius: 0 0.375rem 0.375rem 0;
+  padding: 0.875rem 1.125rem;
   margin: 1.5rem 0;
 }
 
 .callout-note {
-  border-left-color: #6366f1;
-  background-color: rgba(99, 102, 241, 0.08);
+  border-left-color: var(--text-muted);
+  background-color: var(--bg-elevated);
 }
 
 .callout-tip {
   border-left-color: #10b981;
-  background-color: rgba(16, 185, 129, 0.08);
+  background-color: rgba(16, 185, 129, 0.06);
 }
 
 .callout-important {
-  border-left-color: #8b5cf6;
-  background-color: rgba(139, 92, 246, 0.08);
+  border-left-color: #3b82f6;
+  background-color: rgba(59, 130, 246, 0.06);
 }
 
 .callout-warning {
   border-left-color: #f59e0b;
-  background-color: rgba(245, 158, 11, 0.08);
+  background-color: rgba(245, 158, 11, 0.06);
 }
 
 .callout-caution {
   border-left-color: #ef4444;
-  background-color: rgba(239, 68, 68, 0.08);
+  background-color: rgba(239, 68, 68, 0.06);
 }
 
-/* Prose markdown typography for both Light and Dark modes */
+/* Prose Typography */
 .prose {
   color: var(--text-secondary) !important;
   max-width: 100% !important;
@@ -256,15 +232,16 @@ body {
 }
 
 .prose a {
-  color: var(--accent) !important;
-  text-decoration: none;
+  color: var(--text-primary) !important;
+  text-decoration: underline;
+  text-decoration-color: var(--border-color);
+  text-underline-offset: 3px;
   font-weight: 500;
-  transition: color 0.15s ease;
+  transition: all 0.15s ease;
 }
 
 .prose a:hover {
-  color: var(--accent-hover) !important;
-  text-decoration: underline;
+  text-decoration-color: var(--text-primary);
 }
 
 .prose table {
@@ -273,7 +250,7 @@ body {
   border-spacing: 0;
   margin: 2rem 0;
   font-size: 0.875rem;
-  border-radius: 0.75rem;
+  border-radius: 0.5rem;
   overflow: hidden;
   border: 1px solid var(--border-color);
   background: var(--bg-surface);
@@ -281,7 +258,7 @@ body {
 
 .prose th,
 .prose td {
-  padding: 0.875rem 1.125rem;
+  padding: 0.75rem 1rem;
   text-align: left;
   border-bottom: 1px solid var(--border-color);
 }
@@ -290,9 +267,9 @@ body {
   background: var(--bg-elevated);
   color: var(--text-primary);
   font-weight: 600;
-  font-size: 0.8125rem;
+  font-size: 0.75rem;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.08em;
   font-family: var(--font-mono);
 }
 
@@ -316,8 +293,8 @@ body {
   background: var(--code-block-bg) !important;
   color: var(--pre-text) !important;
   border: 1px solid var(--border-code);
-  border-radius: 0.75rem;
-  padding: 1.25rem;
+  border-radius: 0.5rem;
+  padding: 1rem 1.25rem;
   overflow-x: auto;
   position: relative;
   font-family: var(--font-mono);
@@ -333,8 +310,8 @@ body {
   background: var(--code-inline-bg);
   color: var(--code-inline-text);
   border: 1px solid var(--code-inline-border);
-  padding: 0.15rem 0.4rem;
-  border-radius: 0.375rem;
+  padding: 0.15rem 0.35rem;
+  border-radius: 0.25rem;
   font-weight: 500;
 }
 
@@ -344,11 +321,11 @@ body {
 }
 
 .prose blockquote {
-  border-left: 3px solid var(--brand);
-  background: rgba(99, 102, 241, 0.08);
-  border-radius: 0 0.5rem 0.5rem 0;
-  margin: 1.75em 0;
-  padding: 0.875em 1.25em;
+  border-left: 2px solid var(--text-muted);
+  background: var(--bg-elevated);
+  border-radius: 0 0.375rem 0.375rem 0;
+  margin: 1.5em 0;
+  padding: 0.75em 1.25em;
   font-style: normal;
   color: var(--text-secondary);
 }
@@ -358,7 +335,7 @@ body {
   margin: 2.5rem 0;
 }
 
-/* Syntax Highlighting Tokens (Highlight.js) */
+/* Syntax Highlighting */
 .hljs {
   color: var(--pre-text);
   background: transparent;
@@ -446,32 +423,14 @@ body {
   font-weight: bold;
 }
 
-/* Keyframes & Animation utilities */
+/* Transitions */
 @keyframes fadeIn {
-  from { opacity: 0; transform: translateY(6px); }
+  from { opacity: 0; transform: translateY(4px); }
   to { opacity: 1; transform: translateY(0); }
 }
 
-@keyframes slideDown {
-  from { opacity: 0; transform: translateY(-8px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes pulseGlow {
-  0%, 100% { opacity: 0.6; }
-  50% { opacity: 1; filter: drop-shadow(0 0 8px var(--brand)); }
-}
-
 .animate-fade-in {
-  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-
-.animate-slide-down {
-  animation: slideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-
-.animate-pulse-glow {
-  animation: pulseGlow 2.5s ease-in-out infinite;
+  animation: fadeIn 0.18s ease-out forwards;
 }
 
 /* Print & PDF Export Stylesheet */
@@ -488,7 +447,7 @@ body {
 
   html, body {
     background-color: #ffffff !important;
-    color: #0f172a !important;
+    color: #09090b !important;
     font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
     font-size: 10pt !important;
     line-height: 1.5 !important;
@@ -547,18 +506,18 @@ body {
   .code-block-container {
     break-inside: avoid !important;
     page-break-inside: avoid !important;
-    border: 1px solid #cbd5e1 !important;
-    background-color: #f8fafc !important;
+    border: 1px solid #d4d4d8 !important;
+    background-color: #f4f4f5 !important;
     border-radius: 4px !important;
     margin: 8pt 0 !important;
     overflow: hidden !important;
   }
 
   .code-block-header {
-    border-bottom: 1px solid #cbd5e1 !important;
-    background-color: #f1f5f9 !important;
+    border-bottom: 1px solid #d4d4d8 !important;
+    background-color: #e4e4e7 !important;
     padding: 3pt 8pt !important;
-    color: #334155 !important;
+    color: #27272a !important;
   }
 
   .code-block-wrapper pre {
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 8c111b0..31f262f 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -3,12 +3,12 @@ import "./globals.css";
 import Header from "@/components/Header";
 import Sidebar from "@/components/Sidebar";
 import Link from "next/link";
-import { Database, Activity, Sparkles, Terminal } from "lucide-react";
+import { Database } from "lucide-react";
 
 export const metadata: Metadata = {
-  title: "MCPedia — Knowledge Base for Humans and AI Agents",
+  title: "MCPedia — Archival Knowledge Base for Humans & AI Agents",
   description:
-    "A content-first knowledge base. Humans read the Web UI; AI agents use the MCP server. Both share one Core.",
+    "A content-first knowledge base. Humans read the Web UI; AI agents use the Model Context Protocol (MCP). Both share one Core.",
 };
 
 export default function RootLayout({
@@ -37,20 +37,16 @@ export default function RootLayout({
           }}
         />
       </head>
-      <body className="min-h-screen bg-[var(--bg-app)] text-[var(--text-secondary)] font-sans antialiased selection:bg-[var(--brand)]/30 selection:text-white flex flex-col transition-colors duration-150 tech-grid-bg relative overflow-x-hidden">
-        {/* Top ambient radial glow effect */}
-        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[48rem] h-64 bg-indigo-500/10 dark:bg-indigo-600/15 blur-[120px] pointer-events-none rounded-full" />
-        <div className="absolute top-48 left-1/4 w-80 h-80 bg-cyan-500/5 dark:bg-cyan-500/10 blur-[100px] pointer-events-none rounded-full" />
-
+      <body className="min-h-screen bg-[var(--bg-app)] text-[var(--text-secondary)] font-sans antialiased selection:bg-[var(--text-primary)] selection:text-[var(--bg-app)] flex flex-col transition-colors duration-150">
         <div hidden>
           <div id="a11y-live-region" aria-live="polite" aria-atomic="true" />
         </div>
 
         <Header />
 
-        <div className="mx-auto max-w-7xl w-full flex-1 flex flex-col relative z-10">
+        <div className="mx-auto max-w-7xl w-full flex-1 flex flex-col">
           <div className="flex flex-1">
-            <aside className="hidden lg:block w-72 shrink-0 border-r border-[var(--border-color)] sticky top-15 h-[calc(100vh-3.75rem)] overflow-y-auto bg-[var(--bg-app)]/80 backdrop-blur-md">
+            <aside className="hidden lg:block w-72 shrink-0 border-r border-[var(--border-color)] sticky top-14 h-[calc(100vh-3.5rem)] overflow-y-auto bg-[var(--bg-app)]">
               <Sidebar />
             </aside>
             <main className="flex-1 min-w-0">
@@ -61,26 +57,28 @@ export default function RootLayout({
           </div>
         </div>
 
-        {/* Global Telemetry & Status Footer */}
-        <footer className="no-print border-t border-[var(--border-color)] bg-[var(--bg-surface)]/60 backdrop-blur-md py-4 text-xs text-[var(--text-dim)] relative z-10">
+        {/* Global Precision Status Footer */}
+        <footer className="no-print border-t border-[var(--border-color)] bg-[var(--bg-surface)] py-4 text-xs text-[var(--text-muted)]">
           <div className="mx-auto max-w-7xl px-4 sm:px-8 flex flex-col sm:flex-row items-center justify-between gap-3 font-mono">
             <div className="flex items-center gap-2">
-              <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
-              <span>MCPedia Intelligence Engine</span>
-              <span>·</span>
-              <span className="text-[var(--text-muted)]">PostgreSQL 16 Core</span>
+              <span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
+              <span className="text-[var(--text-primary)] font-semibold">MCPedia</span>
+              <span className="text-[var(--border-color)]">/</span>
+              <span>PostgreSQL 16 Core</span>
+              <span className="text-[var(--border-color)]">/</span>
+              <span>pgvector</span>
             </div>
 
             <div className="flex items-center gap-4 text-[11px] text-[var(--text-muted)]">
-              <Link href="/search" className="hover:text-[var(--brand)] dark:hover:text-[var(--accent)] transition-colors">
+              <Link href="/search" className="hover:text-[var(--text-primary)] transition-colors">
                 RRF Hybrid Search
               </Link>
               <span>·</span>
-              <Link href="/export/pdf" className="hover:text-[var(--brand)] dark:hover:text-[var(--accent)] transition-colors">
+              <Link href="/export/pdf" className="hover:text-[var(--text-primary)] transition-colors">
                 Publication PDF
               </Link>
               <span>·</span>
-              <span className="text-[var(--text-dim)]">Native MCP :4021</span>
+              <span>HTTP :4021</span>
             </div>
           </div>
         </footer>
diff --git a/apps/web/app/login/page.tsx b/apps/web/app/login/page.tsx
index f5bcf7c..fc60e84 100644
--- a/apps/web/app/login/page.tsx
+++ b/apps/web/app/login/page.tsx
@@ -3,7 +3,7 @@
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
-import { Lock, Key, Eye, EyeOff, ArrowLeft, ShieldCheck } from "lucide-react";
+import { Lock, Key, Eye, EyeOff, ArrowLeft } from "lucide-react";
 
 export default function LoginPage() {
   const router = useRouter();
@@ -39,22 +39,19 @@ export default function LoginPage() {
 
   return (
     <div className="flex min-h-[65vh] items-center justify-center px-4">
-      <div className="w-full max-w-md bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-3xl p-6 sm:p-8 shadow-2xl relative overflow-hidden">
-        {/* Top decorative glow */}
-        <div className="absolute -top-12 left-1/2 -translate-x-1/2 w-48 h-24 bg-indigo-500/20 blur-2xl pointer-events-none rounded-full" />
-
-        <div className="text-center mb-8">
-          <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-indigo-500 to-violet-700 text-white font-bold text-xl flex items-center justify-center mx-auto mb-3 shadow-lg shadow-indigo-500/25">
-            <Lock className="w-6 h-6" />
+      <div className="w-full max-w-md bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl p-6 sm:p-8 shadow-xs relative">
+        <div className="text-center mb-7">
+          <div className="w-10 h-10 rounded-lg bg-[var(--brand)] text-[var(--brand-fg)] font-bold text-sm flex items-center justify-center mx-auto mb-3 shadow-xs font-mono">
+            <Lock className="w-4 h-4" />
           </div>
-          <h1 className="text-2xl font-extrabold text-[var(--text-primary)] tracking-tight">Admin Vault Authentication</h1>
-          <p className="text-xs text-[var(--text-muted)] mt-1.5">
-            Enter your admin password to manage documents and trigger schema mutations.
+          <h1 className="text-xl font-bold text-[var(--text-primary)] tracking-tight">Admin Authentication</h1>
+          <p className="text-xs text-[var(--text-muted)] mt-1">
+            Enter administrative password to authorize document mutations.
           </p>
         </div>
 
         {error && (
-          <div className="p-3.5 mb-6 rounded-xl border border-rose-500/30 bg-rose-500/10 text-rose-500 dark:text-rose-400 text-xs font-medium animate-fade-in">
+          <div className="p-3 mb-5 rounded-lg border border-rose-500/30 bg-rose-500/10 text-rose-500 dark:text-rose-400 text-xs font-medium animate-fade-in">
             {error}
           </div>
         )}
@@ -62,26 +59,26 @@ export default function LoginPage() {
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
             <label className="block text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] mb-1.5 font-mono">
-              Admin Password
+              Password
             </label>
             <div className="relative">
               <input
                 type={showPassword ? "text" : "password"}
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
-                placeholder="Enter password..."
-                className="w-full pl-10 pr-10 py-3 bg-[var(--bg-elevated)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-xl text-sm text-[var(--text-primary)] placeholder-[var(--text-dim)] focus:outline-none focus:border-[var(--brand)] focus:ring-2 focus:ring-[var(--brand)]/20 transition-all"
+                placeholder="Enter admin password..."
+                className="w-full pl-9 pr-10 py-2.5 bg-[var(--bg-elevated)] border border-[var(--border-color)] hover:border-[var(--text-muted)] rounded-lg text-sm text-[var(--text-primary)] placeholder-[var(--text-dim)] focus:outline-none focus:border-[var(--text-primary)] transition-colors font-mono"
                 required
                 autoFocus
               />
-              <Key className="w-4 h-4 text-[var(--text-dim)] absolute left-3.5 top-3.5 pointer-events-none" />
+              <Key className="w-3.5 h-3.5 text-[var(--text-dim)] absolute left-3 top-3.5 pointer-events-none" />
               <button
                 type="button"
                 onClick={() => setShowPassword(!showPassword)}
-                className="absolute right-3.5 top-3 text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)] p-1 cursor-pointer"
+                className="absolute right-3 top-2.5 text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)] p-1 cursor-pointer"
                 aria-label={showPassword ? "Hide password" : "Show password"}
               >
-                {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                {showPassword ? <EyeOff className="w-3.5 h-3.5" /> : <Eye className="w-3.5 h-3.5" />}
               </button>
             </div>
           </div>
@@ -89,24 +86,24 @@ export default function LoginPage() {
           <button
             type="submit"
             disabled={loading}
-            className="w-full py-3 bg-[var(--brand)] hover:bg-[var(--brand-hover)] text-white rounded-xl transition-all font-semibold text-sm shadow-md shadow-[var(--brand)]/20 hover:shadow-[var(--brand)]/35 disabled:opacity-50 flex items-center justify-center gap-2 cursor-pointer"
+            className="w-full py-2.5 bg-[var(--brand)] hover:opacity-90 text-[var(--brand-fg)] rounded-lg transition-all font-semibold text-xs shadow-xs disabled:opacity-50 flex items-center justify-center gap-2 cursor-pointer uppercase tracking-wider font-mono"
           >
             {loading && (
-              <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+              <div className="w-3.5 h-3.5 border-2 border-current border-t-transparent rounded-full animate-spin" />
             )}
-            <span>{loading ? "Authenticating Session..." : "Authorize Access"}</span>
+            <span>{loading ? "AUTHENTICATING..." : "AUTHORIZE_ACCESS"}</span>
           </button>
         </form>
 
-        <div className="mt-8 pt-6 border-t border-[var(--border-color)] flex items-center justify-between text-xs text-[var(--text-muted)]">
+        <div className="mt-7 pt-5 border-t border-[var(--border-color)] flex items-center justify-between text-xs text-[var(--text-muted)]">
           <Link
             href="/"
             className="hover:text-[var(--text-primary)] transition-colors flex items-center gap-1"
           >
             <ArrowLeft className="w-3.5 h-3.5" />
-            <span>Return to Knowledge Base</span>
+            <span>Return to Home</span>
           </Link>
-          <span className="text-[11px] text-[var(--text-dim)] font-mono">Secure HTTP Cookie</span>
+          <span className="text-[10px] text-[var(--text-dim)] font-mono">HTTP Cookie</span>
         </div>
       </div>
     </div>
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index b678d77..81c415f 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -4,19 +4,15 @@ import { getSectionMeta, type SectionConfig } from "@mcpedia/config";
 import McpConfigSnippet from "@/components/McpConfigSnippet";
 import InteractiveTopology from "@/components/InteractiveTopology";
 import {
-  Sparkles,
   Search,
   Plus,
   BookOpen,
   ArrowRight,
   Database,
-  Cpu,
   Layers,
-  Activity,
   Folder,
   FileText,
   Clock,
-  CheckCircle2,
   Terminal,
 } from "lucide-react";
 
@@ -102,11 +98,11 @@ function renderTree(nodes: TreeNode[]) {
             className="flex items-center gap-2 text-xs py-1 px-2 rounded-md text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-elevated)] transition-colors group"
             title={node.title}
           >
-            <span className="shrink-0 text-[var(--text-dim)] group-hover:text-[var(--brand)] transition-colors">
+            <span className="shrink-0 text-[var(--text-dim)] group-hover:text-[var(--text-primary)] transition-colors">
               {node.isLeaf && node.children.length === 0 ? (
-                <FileText className="w-3 h-3" />
+                <FileText className="w-3.5 h-3.5" />
               ) : (
-                <Folder className="w-3 h-3" />
+                <Folder className="w-3.5 h-3.5" />
               )}
             </span>
             <span className="truncate">{node.title || node.name}</span>
@@ -133,7 +129,7 @@ function SectionTree({ section, docs }: { section: string; docs: { slug: string;
       {tree.length > 0 ? (
         renderTree(tree)
       ) : (
-        <p className="text-xs text-[var(--text-dim)] pl-2">No documents yet</p>
+        <p className="text-xs text-[var(--text-dim)] pl-2">No documents</p>
       )}
     </div>
   );
@@ -156,30 +152,28 @@ export default async function HomePage() {
     <div className="space-y-16">
       {/* Hero Section */}
       <section className="relative pt-2 pb-4">
-        {/* Floating status pill */}
-        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[var(--brand)]/10 border border-[var(--brand)]/25 text-[var(--brand)] dark:text-[var(--accent)] text-xs font-semibold mb-6 shadow-xs animate-fade-in">
-          <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
-          <span>Model Context Protocol · PostgreSQL Source of Truth</span>
+        {/* Status indicator stamp */}
+        <div className="inline-flex items-center gap-2 px-2.5 py-1 rounded-md bg-[var(--bg-elevated)] border border-[var(--border-color)] text-[var(--text-secondary)] text-xs font-mono mb-6">
+          <span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
+          <span>PostgreSQL 16 Core · Model Context Protocol</span>
         </div>
 
-        {/* Primary Title */}
-        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-[var(--text-primary)] tracking-tight mb-5 leading-[1.12]">
+        {/* Primary Title with strong monolithic weight */}
+        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-[var(--text-primary)] tracking-tight mb-5 leading-[1.1]">
           Knowledge Base for <br />
-          <span className="bg-gradient-to-r from-indigo-500 via-indigo-600 to-cyan-500 dark:to-cyan-400 bg-clip-text text-transparent">
-            Humans and AI Agents
-          </span>
+          Humans and AI Agents.
         </h1>
 
         {/* Subtitle */}
         <p className="text-base sm:text-lg text-[var(--text-muted)] max-w-2xl leading-relaxed mb-8">
-          A high-performance technical knowledge repository. Browse structured notes and CTF writeups in your browser, or equip AI coding assistants directly via native MCP tools.
+          A high-performance technical knowledge repository. Humans read the web interface; AI assistants connect directly via native MCP tools. Both share one unified database source of truth.
         </p>
 
         {/* Quick Action Buttons */}
         <div className="flex flex-wrap items-center gap-3 mb-10">
           <Link
             href="/docs"
-            className="inline-flex items-center gap-2 px-5 py-2.5 bg-[var(--brand)] hover:bg-[var(--brand-hover)] text-white rounded-xl font-semibold text-sm transition-all shadow-md shadow-[var(--brand)]/25 hover:shadow-[var(--brand)]/40 hover:-translate-y-0.5 cursor-pointer"
+            className="inline-flex items-center gap-2 px-5 py-2.5 bg-[var(--brand)] hover:opacity-90 text-[var(--brand-fg)] rounded-lg font-semibold text-sm transition-all shadow-xs cursor-pointer"
           >
             <BookOpen className="w-4 h-4" />
             <span>Browse Documentation</span>
@@ -188,15 +182,15 @@ export default async function HomePage() {
 
           <Link
             href="/search"
-            className="inline-flex items-center gap-2 px-5 py-2.5 bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated)] border border-[var(--border-color)] hover:border-[var(--brand)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] rounded-xl font-semibold text-sm transition-all shadow-xs hover:-translate-y-0.5"
+            className="inline-flex items-center gap-2 px-5 py-2.5 bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated)] border border-[var(--border-color)] hover:border-[var(--text-muted)] text-[var(--text-primary)] rounded-lg font-semibold text-sm transition-colors shadow-xs"
           >
-            <Search className="w-4 h-4 text-[var(--brand)] dark:text-[var(--accent)]" />
-            <span>Hybrid Search Console</span>
+            <Search className="w-4 h-4 text-[var(--text-muted)]" />
+            <span>Hybrid Search</span>
           </Link>
 
           <Link
             href="/create"
-            className="inline-flex items-center gap-1.5 px-4 py-2.5 bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated)] border border-[var(--border-color)] hover:border-[var(--brand)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-xl text-sm transition-all shadow-xs"
+            className="inline-flex items-center gap-1.5 px-4 py-2.5 bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated)] border border-[var(--border-color)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-lg text-sm transition-colors shadow-xs"
           >
             <Plus className="w-4 h-4" />
             <span>Create Document</span>
@@ -204,44 +198,44 @@ export default async function HomePage() {
         </div>
 
         {/* Live Telemetry Metric Strip */}
-        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 p-4 sm:p-5 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-2xl shadow-sm">
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 p-4 sm:p-5 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl shadow-xs">
           <div className="flex items-center gap-3">
-            <div className="p-2.5 rounded-xl bg-indigo-500/10 text-indigo-600 dark:text-indigo-400">
-              <Database className="w-5 h-5" />
+            <div className="p-2 rounded-lg bg-[var(--bg-elevated)] text-[var(--text-primary)] border border-[var(--border-color)]">
+              <Database className="w-4 h-4" />
             </div>
             <div>
-              <div className="text-xl font-bold text-[var(--text-primary)]">{all.length}</div>
-              <div className="text-[11px] text-[var(--text-muted)] font-mono">Documents in DB</div>
+              <div className="text-xl font-bold text-[var(--text-primary)] font-mono">{all.length}</div>
+              <div className="text-[11px] text-[var(--text-muted)] font-mono">DB Documents</div>
             </div>
           </div>
 
           <div className="flex items-center gap-3">
-            <div className="p-2.5 rounded-xl bg-cyan-500/10 text-cyan-600 dark:text-cyan-400">
-              <Layers className="w-5 h-5" />
+            <div className="p-2 rounded-lg bg-[var(--bg-elevated)] text-[var(--text-primary)] border border-[var(--border-color)]">
+              <Layers className="w-4 h-4" />
             </div>
             <div>
-              <div className="text-xl font-bold text-[var(--text-primary)]">{sections.length}</div>
+              <div className="text-xl font-bold text-[var(--text-primary)] font-mono">{sections.length}</div>
               <div className="text-[11px] text-[var(--text-muted)] font-mono">Active Sections</div>
             </div>
           </div>
 
           <div className="flex items-center gap-3">
-            <div className="p-2.5 rounded-xl bg-violet-500/10 text-violet-600 dark:text-violet-400">
-              <Search className="w-5 h-5" />
+            <div className="p-2 rounded-lg bg-[var(--bg-elevated)] text-[var(--text-primary)] border border-[var(--border-color)]">
+              <Search className="w-4 h-4" />
             </div>
             <div>
-              <div className="text-xl font-bold text-[var(--brand)] dark:text-[var(--accent)]">RRF Hybrid</div>
+              <div className="text-xl font-bold text-[var(--text-primary)] font-mono">RRF</div>
               <div className="text-[11px] text-[var(--text-muted)] font-mono">FTS + Cosine Vectors</div>
             </div>
           </div>
 
           <div className="flex items-center gap-3">
-            <div className="p-2.5 rounded-xl bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
-              <Terminal className="w-5 h-5" />
+            <div className="p-2 rounded-lg bg-[var(--bg-elevated)] text-[var(--text-primary)] border border-[var(--border-color)]">
+              <Terminal className="w-4 h-4" />
             </div>
             <div>
-              <div className="text-xl font-bold text-emerald-600 dark:text-emerald-400">13 Tools</div>
-              <div className="text-[11px] text-[var(--text-muted)] font-mono">Streamable HTTP :4021</div>
+              <div className="text-xl font-bold text-[var(--text-primary)] font-mono">13 Tools</div>
+              <div className="text-[11px] text-[var(--text-muted)] font-mono">HTTP :4021 MCP</div>
             </div>
           </div>
         </div>
@@ -254,11 +248,11 @@ export default async function HomePage() {
 
       {/* Browse Knowledge by Section */}
       <section>
-        <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center justify-between mb-5">
           <div className="flex items-center gap-2">
-            <Layers className="w-4 h-4 text-[var(--brand)] dark:text-[var(--accent)]" />
+            <Layers className="w-4 h-4 text-[var(--text-muted)]" />
             <h2 className="text-xs font-bold text-[var(--text-muted)] uppercase tracking-wider font-mono">
-              Browse Knowledge by Section
+              Knowledge Sections
             </h2>
           </div>
         </div>
@@ -269,19 +263,19 @@ export default async function HomePage() {
             return (
               <div
                 key={s.id}
-                className="group flex flex-col justify-between bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-2xl p-5 transition-all shadow-xs hover:shadow-md hover:-translate-y-0.5"
+                className="group flex flex-col justify-between bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--text-muted)] rounded-xl p-5 transition-all shadow-xs"
               >
                 <div>
                   <div className="flex items-center justify-between gap-2 mb-3">
                     <span className="text-2xl">{s.icon}</span>
                     <Link
                       href={`/${s.id}`}
-                      className="text-xs font-mono text-[var(--brand)] dark:text-[var(--accent)] hover:underline font-semibold"
+                      className="text-xs font-mono text-[var(--text-muted)] hover:text-[var(--text-primary)] font-semibold"
                     >
                       {sectionDocs.length} docs →
                     </Link>
                   </div>
-                  <h3 className="font-bold text-base text-[var(--text-primary)] group-hover:text-[var(--brand)] dark:group-hover:text-[var(--accent)] transition-colors mb-1.5">
+                  <h3 className="font-bold text-sm text-[var(--text-primary)] mb-1">
                     {s.label}
                   </h3>
                   <p className="text-xs text-[var(--text-muted)] mb-4 line-clamp-2 leading-relaxed">
@@ -305,33 +299,33 @@ export default async function HomePage() {
       {/* Recently Updated Knowledge */}
       {recent.length > 0 && (
         <section>
-          <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center justify-between mb-5">
             <div className="flex items-center gap-2">
-              <Clock className="w-4 h-4 text-[var(--brand)] dark:text-[var(--accent)]" />
+              <Clock className="w-4 h-4 text-[var(--text-muted)]" />
               <h2 className="text-xs font-bold text-[var(--text-muted)] uppercase tracking-wider font-mono">
-                Recently Updated Knowledge
+                Recently Updated
               </h2>
             </div>
             <Link
               href="/docs"
-              className="text-xs text-[var(--brand)] dark:text-[var(--accent)] hover:underline font-semibold flex items-center gap-1"
+              className="text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)] font-semibold flex items-center gap-1 font-mono"
             >
               <span>View all ({all.length})</span>
-              <ArrowRight className="w-3.5 h-3.5" />
+              <ArrowRight className="w-3 h-3" />
             </Link>
           </div>
 
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3.5">
             {recent.map((d) => {
               const sInfo = getSectionMeta(d.section);
               return (
                 <Link
                   key={d.slug}
                   href={`/${d.slug}`}
-                  className="group block bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-2xl p-5 transition-all shadow-xs hover:shadow-md hover:-translate-y-0.5"
+                  className="group block bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--text-muted)] rounded-xl p-4.5 transition-all shadow-xs"
                 >
-                  <div className="flex items-center justify-between gap-2 mb-2.5">
-                    <span className="text-[11px] font-mono font-semibold text-[var(--brand)] dark:text-[var(--accent)] uppercase flex items-center gap-1">
+                  <div className="flex items-center justify-between gap-2 mb-2">
+                    <span className="text-[11px] font-mono font-semibold text-[var(--text-muted)] uppercase flex items-center gap-1">
                       <span>{sInfo?.icon}</span>
                       <span>{d.section}</span>
                     </span>
@@ -342,15 +336,15 @@ export default async function HomePage() {
                       })}
                     </time>
                   </div>
-                  <h3 className="font-bold text-sm text-[var(--text-primary)] group-hover:text-[var(--brand)] dark:group-hover:text-[var(--accent)] transition-colors line-clamp-1 mb-2">
+                  <h3 className="font-semibold text-sm text-[var(--text-primary)] group-hover:underline line-clamp-1 mb-2">
                     {d.title}
                   </h3>
                   {d.tags.length > 0 && (
-                    <div className="flex flex-wrap gap-1 mt-3">
+                    <div className="flex flex-wrap gap-1 mt-2.5">
                       {d.tags.slice(0, 3).map((t) => (
                         <span
                           key={t}
-                          className="text-[10px] px-2 py-0.5 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded-md text-[var(--text-muted)] font-mono"
+                          className="text-[10px] px-1.5 py-0.2 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded text-[var(--text-muted)] font-mono"
                         >
                           #{t}
                         </span>
@@ -367,11 +361,10 @@ export default async function HomePage() {
       {/* Connect AI Assistant Showcase */}
       <section className="border-t border-[var(--border-color)] pt-12 pb-6">
         <div className="mb-6">
-          <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-[var(--bg-elevated)] border border-[var(--border-color)] text-[var(--text-muted)] text-xs font-mono mb-3">
-            <Sparkles className="w-3.5 h-3.5 text-indigo-500" />
-            <span>Connect Coding Assistants</span>
+          <div className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded bg-[var(--bg-elevated)] border border-[var(--border-color)] text-[var(--text-muted)] text-xs font-mono mb-2">
+            <span>[ MCP_INTEGRATION ]</span>
           </div>
-          <h2 className="text-2xl sm:text-3xl font-extrabold text-[var(--text-primary)] tracking-tight mb-2">
+          <h2 className="text-2xl font-bold text-[var(--text-primary)] tracking-tight mb-1.5">
             Model Context Protocol Configuration
           </h2>
           <p className="text-xs sm:text-sm text-[var(--text-muted)] max-w-xl leading-relaxed">
diff --git a/apps/web/app/search/page.tsx b/apps/web/app/search/page.tsx
index 8b2b614..e9eb2f6 100644
--- a/apps/web/app/search/page.tsx
+++ b/apps/web/app/search/page.tsx
@@ -6,16 +6,7 @@ import { useSearchParams } from "next/navigation";
 import { DEFAULT_SECTIONS, type SectionConfig } from "@mcpedia/config/sections";
 import {
   Search,
-  Sparkles,
-  Zap,
-  Cpu,
-  Layers,
-  FileText,
-  Clock,
-  ArrowRight,
-  Filter,
   X,
-  Compass,
 } from "lucide-react";
 
 interface DocHit {
@@ -100,21 +91,16 @@ function SearchContent() {
     <div className="max-w-4xl space-y-8">
       {/* Header */}
       <div>
-        <div className="flex items-center gap-2 mb-2">
-          <span className="p-2 rounded-xl bg-[var(--brand)]/15 text-[var(--brand)] dark:text-[var(--accent)]">
-            <Search className="w-5 h-5" />
-          </span>
-          <h1 className="text-3xl font-extrabold text-[var(--text-primary)] tracking-tight">
-            Multi-Modal Search Console
-          </h1>
-        </div>
-        <p className="text-xs sm:text-sm text-[var(--text-muted)]">
-          Search across documentation, CTF writeups, and research notes using PostgreSQL Full-Text Search, Cosine Embeddings, or Reciprocal Rank Fusion.
+        <h1 className="text-3xl font-extrabold text-[var(--text-primary)] tracking-tight mb-2">
+          Multi-Modal Search Console
+        </h1>
+        <p className="text-xs sm:text-sm text-[var(--text-muted)] leading-relaxed">
+          Query across knowledge documents and CTF writeups using PostgreSQL Full-Text Search (tsvector), Cosine Vector Embeddings, or Reciprocal Rank Fusion (RRF).
         </p>
       </div>
 
       {/* Search Box & Controls */}
-      <div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-2xl p-5 sm:p-6 shadow-sm space-y-5">
+      <div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl p-4 sm:p-5 shadow-xs space-y-4">
         {/* Search Input Bar */}
         <div className="relative">
           <input
@@ -122,17 +108,17 @@ function SearchContent() {
             value={query}
             onChange={handleChange}
             placeholder="Search by keywords, challenge names, tools, concepts..."
-            className="w-full pl-12 pr-10 py-3.5 bg-[var(--bg-elevated)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-xl text-[var(--text-primary)] placeholder-[var(--text-dim)] focus:outline-none focus:border-[var(--brand)] focus:ring-2 focus:ring-[var(--brand)]/20 text-base transition-all"
+            className="w-full pl-10 pr-9 py-3 bg-[var(--bg-elevated)] border border-[var(--border-color)] hover:border-[var(--text-muted)] rounded-lg text-[var(--text-primary)] placeholder-[var(--text-dim)] focus:outline-none focus:border-[var(--text-primary)] text-sm transition-all"
             autoFocus
           />
-          <Search className="w-5 h-5 text-[var(--brand)] dark:text-[var(--accent)] absolute left-4 top-4 pointer-events-none" />
+          <Search className="w-4 h-4 text-[var(--text-muted)] absolute left-3.5 top-3.5 pointer-events-none" />
           {query && (
             <button
               onClick={() => {
                 setQuery("");
                 setResults([]);
               }}
-              className="absolute right-3.5 top-3.5 p-1 text-[var(--text-dim)] hover:text-[var(--text-primary)] rounded-lg hover:bg-[var(--bg-surface)]"
+              className="absolute right-3 top-3 p-0.5 text-[var(--text-dim)] hover:text-[var(--text-primary)] rounded"
               aria-label="Clear query"
             >
               <X className="w-4 h-4" />
@@ -141,23 +127,23 @@ function SearchContent() {
         </div>
 
         {/* Algorithm & Filter Controls */}
-        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pt-3 border-t border-[var(--border-color)] text-xs">
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pt-2.5 border-t border-[var(--border-color)] text-xs">
           {/* Mode Selector */}
           <div className="flex items-center gap-1.5 flex-wrap">
-            <span className="text-[var(--text-dim)] font-mono uppercase font-semibold mr-1">Algorithm:</span>
+            <span className="text-[var(--text-dim)] font-mono uppercase text-[10px] mr-1">Algorithm:</span>
             {[
-              { id: "hybrid", label: "⚡ Hybrid (RRF)", desc: "Reciprocal Rank Fusion (FTS + Vector)" },
-              { id: "keyword", label: "🔍 Keyword (FTS)", desc: "PostgreSQL GIN tsvector" },
-              { id: "semantic", label: "🧠 Semantic Vector", desc: "Cosine Similarity over Embeddings" },
+              { id: "hybrid", label: "Hybrid (RRF)", desc: "Reciprocal Rank Fusion (FTS + Vector)" },
+              { id: "keyword", label: "Keyword (FTS)", desc: "PostgreSQL GIN tsvector" },
+              { id: "semantic", label: "Semantic Vector", desc: "Cosine Similarity Embeddings" },
             ].map((m) => (
               <button
                 key={m.id}
                 type="button"
                 onClick={() => handleModeChange(m.id as SearchMode)}
                 title={m.desc}
-                className={`px-3 py-1.5 rounded-lg border font-semibold transition-all cursor-pointer ${
+                className={`px-3 py-1 rounded-md border text-xs font-medium transition-all cursor-pointer ${
                   mode === m.id
-                    ? "bg-[var(--brand)] border-[var(--brand)] text-white shadow-sm shadow-[var(--brand)]/25"
+                    ? "bg-[var(--brand)] border-[var(--brand)] text-[var(--brand-fg)] font-semibold shadow-xs"
                     : "bg-[var(--bg-elevated)] border-[var(--border-color)] text-[var(--text-muted)] hover:text-[var(--text-primary)]"
                 }`}
               >
@@ -171,9 +157,9 @@ function SearchContent() {
             <button
               type="button"
               onClick={() => setSelectedSection("all")}
-              className={`px-2.5 py-1 rounded-lg text-xs font-medium transition-colors ${
+              className={`px-2.5 py-1 rounded-md text-xs font-medium transition-colors ${
                 selectedSection === "all"
-                  ? "bg-[var(--bg-elevated-hover)] text-[var(--text-primary)] font-bold"
+                  ? "bg-[var(--bg-elevated-hover)] text-[var(--text-primary)] font-semibold"
                   : "text-[var(--text-dim)] hover:text-[var(--text-muted)]"
               }`}
             >
@@ -184,9 +170,9 @@ function SearchContent() {
                 key={s.id}
                 type="button"
                 onClick={() => setSelectedSection(s.id)}
-                className={`px-2.5 py-1 rounded-lg text-xs font-medium transition-colors ${
+                className={`px-2.5 py-1 rounded-md text-xs font-medium transition-colors ${
                   selectedSection === s.id
-                    ? "bg-[var(--bg-elevated-hover)] text-[var(--text-primary)] font-bold"
+                    ? "bg-[var(--bg-elevated-hover)] text-[var(--text-primary)] font-semibold"
                     : "text-[var(--text-dim)] hover:text-[var(--text-muted)]"
                 }`}
               >
@@ -199,19 +185,16 @@ function SearchContent() {
 
       {/* Loading Spinner */}
       {loading && (
-        <div className="flex items-center justify-center gap-3 py-12 text-[var(--text-muted)] text-sm animate-fade-in">
-          <div className="w-5 h-5 border-2 border-[var(--brand)] border-t-transparent rounded-full animate-spin" />
-          <span>Searching knowledge vector space...</span>
+        <div className="flex items-center justify-center gap-3 py-10 text-[var(--text-muted)] text-xs font-mono">
+          <div className="w-4 h-4 border-2 border-[var(--text-muted)] border-t-transparent rounded-full animate-spin" />
+          <span>SEARCHING_VECTOR_SPACE...</span>
         </div>
       )}
 
       {/* Empty State */}
       {!loading && query && filteredResults.length === 0 && (
-        <div className="text-center py-16 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-2xl shadow-sm space-y-3 animate-fade-in">
-          <div className="p-3 w-12 h-12 rounded-2xl bg-[var(--bg-elevated)] text-[var(--text-dim)] mx-auto flex items-center justify-center">
-            <Search className="w-6 h-6" />
-          </div>
-          <h3 className="text-base font-bold text-[var(--text-primary)]">No matching documents found</h3>
+        <div className="text-center py-12 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl shadow-xs space-y-2 animate-fade-in">
+          <h3 className="text-sm font-bold text-[var(--text-primary)]">No matching documents found</h3>
           <p className="text-xs text-[var(--text-muted)] max-w-sm mx-auto">
             Try switching algorithm mode to <strong>Hybrid</strong> or <strong>Semantic</strong>, or search with different keywords.
           </p>
@@ -220,8 +203,8 @@ function SearchContent() {
 
       {/* Initial Suggestions */}
       {!loading && !query && (
-        <div className="p-6 sm:p-8 text-center bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-2xl space-y-4 shadow-sm">
-          <p className="text-xs font-mono uppercase tracking-wider text-[var(--text-dim)]">Popular search queries:</p>
+        <div className="p-6 text-center bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl space-y-3 shadow-xs">
+          <p className="text-[10px] font-mono uppercase tracking-wider text-[var(--text-muted)]">Popular Queries:</p>
           <div className="flex justify-center flex-wrap gap-2 text-xs">
             {[
               "stack alignment",
@@ -238,7 +221,7 @@ function SearchContent() {
                   setQuery(term);
                   handleSearch(term, mode);
                 }}
-                className="px-3.5 py-1.5 bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-xl text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-all font-mono cursor-pointer"
+                className="px-3 py-1 bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] hover:border-[var(--text-muted)] rounded-md text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-all font-mono text-xs cursor-pointer"
               >
                 {term}
               </button>
@@ -249,40 +232,40 @@ function SearchContent() {
 
       {/* Results List */}
       {!loading && filteredResults.length > 0 && (
-        <div className="space-y-4 animate-fade-in">
+        <div className="space-y-3 animate-fade-in">
           <div className="flex items-center justify-between text-xs text-[var(--text-dim)] font-mono">
             <span>Found {filteredResults.length} result{filteredResults.length !== 1 ? "s" : ""}</span>
             <span>Ranked by {mode} score</span>
           </div>
 
-          <div className="space-y-3">
+          <div className="space-y-2.5">
             {filteredResults.map((r) => (
               <Link
                 key={r.slug}
                 href={`/${r.slug}`}
-                className="group block bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-2xl p-5 transition-all shadow-xs hover:shadow-md hover:-translate-y-0.5"
+                className="group block bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--text-muted)] rounded-xl p-4.5 transition-all shadow-xs"
               >
-                <div className="flex items-center justify-between gap-3 mb-2.5">
+                <div className="flex items-center justify-between gap-3 mb-2">
                   <div className="flex items-center gap-2">
-                    <span className="text-[10px] font-mono px-2 py-0.5 rounded-md bg-[var(--brand)]/10 border border-[var(--brand)]/30 text-[var(--brand)] dark:text-[var(--accent)] uppercase font-bold">
+                    <span className="text-[10px] font-mono px-1.5 py-0.2 rounded bg-[var(--bg-elevated)] border border-[var(--border-color)] text-[var(--text-muted)] uppercase font-semibold">
                       {r.section}
                     </span>
                     <span className="text-xs text-[var(--text-dim)] font-mono truncate">
                       /{r.slug}
                     </span>
                   </div>
-                  <span className="text-xs font-mono text-[var(--text-muted)] bg-[var(--bg-elevated)] border border-[var(--border-color)] px-2.5 py-0.5 rounded-md font-semibold">
-                    Score: {r.score.toFixed(3)}
+                  <span className="text-xs font-mono text-[var(--text-dim)] bg-[var(--bg-elevated)] px-2 py-0.5 rounded">
+                    {r.score.toFixed(3)}
                   </span>
                 </div>
 
-                <h2 className="text-base font-bold text-[var(--text-primary)] group-hover:text-[var(--brand)] dark:group-hover:text-[var(--accent)] transition-colors mb-2">
+                <h2 className="text-sm font-semibold text-[var(--text-primary)] group-hover:underline mb-1.5">
                   {r.title}
                 </h2>
 
                 {r.snippet && (
                   <p
-                    className="text-xs text-[var(--text-muted)] leading-relaxed line-clamp-2 [&>mark]:bg-[var(--brand)]/30 [&>mark]:text-[var(--text-primary)] [&>mark]:px-1 [&>mark]:rounded [&>mark]:font-semibold"
+                    className="text-xs text-[var(--text-muted)] leading-relaxed line-clamp-2 [&>mark]:bg-[var(--bg-elevated-hover)] [&>mark]:text-[var(--text-primary)] [&>mark]:font-semibold"
                     dangerouslySetInnerHTML={{ __html: r.snippet }}
                   />
                 )}