feat(web): overhaul frontend with cyber-intelligence design and interactive topology

apps/web/app/[section]/[...slug]/page.tsx

@@ -11,6 +11,24 @@ import PdfExportView from "@/components/PdfExportView";
 import { classifyPath, extractFoldersForSection } from "@mcpedia/core";
 import { getSectionMeta } from "@mcpedia/config";
 import type { DocumentMeta } from "@mcpedia/core";
+import {
+  Folder,
+  FileText,
+  Clock,
+  User,
+  Tag,
+  History,
+  FileDown,
+  ArrowLeft,
+  BookOpen,
+  Sparkles,
+  ShieldCheck,
+  CheckCircle2,
+  XCircle,
+  Target,
+  Trophy,
+  Zap,
+} from "lucide-react";
 
 export const dynamic = "force-dynamic";
 
@@ -45,48 +63,45 @@ function CustomFieldBadges({
   if (customEntries.length === 0) return null;
 
   return (
-    <div className="flex flex-wrap items-center gap-2 mt-4 pt-3.5 border-t border-[var(--border-color)]">
+    <div className="flex flex-wrap items-center gap-2 mt-4 pt-4 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)]";
-        let icon = "🏷️";
         let displayValue: string;
+        let IconComponent = Tag;
 
         if (typeof value === "number") {
           colorClass = "bg-[var(--brand)]/10 border-[var(--brand)]/30 text-[var(--brand)] dark:text-[var(--accent)]";
-          icon = "🎯";
+          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";
-          icon = value ? "✓" : "✕";
+          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)]";
-          icon = "🗂️";
+          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";
-            icon = "🟢";
             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";
-            icon = "🟡";
             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";
-            icon = "🔴";
             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";
-            icon = "⚡";
+            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)]";
-            icon = "🏆";
+            IconComponent = Trophy;
             displayValue = String(value);
           } else {
             displayValue = String(value);
@@ -96,11 +111,11 @@ function CustomFieldBadges({
         return (
           <span
             key={key}
-            className={`inline-flex items-center gap-1.5 px-2.5 py-1 border rounded-md text-xs font-mono transition-colors ${colorClass}`}
+            className={`inline-flex items-center gap-1.5 px-3 py-1 border rounded-lg text-xs font-mono transition-colors ${colorClass}`}
           >
-            <span className="text-[10px] opacity-70">{icon}</span>
+            <IconComponent className="w-3.5 h-3.5 opacity-80" />
             <span className="text-[var(--text-muted)] font-sans">{label}:</span>
-            <span className="font-medium">{displayValue}</span>
+            <span className="font-semibold">{displayValue}</span>
           </span>
         );
       })}
@@ -146,9 +161,9 @@ function FolderIndexPage({
   const folderName = slug.split("/").pop()!.split(/[-_]/).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
 
   return (
-    <div>
-      {/* Breadcrumb */}
-      <nav className="flex items-center gap-2 text-xs text-[var(--text-dim)] mb-6 flex-wrap">
+    <div className="space-y-8">
+      {/* Breadcrumb Navigation */}
+      <nav className="flex items-center gap-2 text-xs text-[var(--text-dim)] flex-wrap">
         <Link href="/" className="hover:text-[var(--text-primary)] transition-colors">
           MCPedia
         </Link>
@@ -171,58 +186,61 @@ function FolderIndexPage({
         })}
       </nav>
 
-      {/* Header card */}
-      <div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl p-6 mb-8 shadow-sm">
-        <div className="flex items-center justify-between gap-4">
-          <div className="flex items-center gap-3">
-            <div className="w-10 h-10 rounded-lg bg-[var(--bg-elevated)] border border-[var(--border-color)] flex items-center justify-center text-xl">
-              📁
+      {/* Header 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-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>
             <div>
-              <h1 className="text-2xl sm:text-3xl font-bold text-[var(--text-primary)] tracking-tight">
+              <h1 className="text-2xl sm:text-3xl font-extrabold text-[var(--text-primary)] tracking-tight">
                 {folderName}
               </h1>
-              <p className="text-xs text-[var(--text-muted)] mt-0.5">
-                Directory path: <code className="text-[var(--brand)] dark:text-[var(--accent)] font-mono">{section}/{slug}</code>
+              <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>
             </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-2.5 py-1 rounded-md">
+            <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">
               {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 py-1.5 rounded-lg font-medium transition-all shadow-xs"
+              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"
               title={`Export all ${folderName} documents as a single PDF report`}
             >
-              <span>📄</span>
+              <FileDown className="w-3.5 h-3.5" />
               <span>Export PDF Report</span>
             </Link>
           </div>
         </div>
       </div>
 
-      {/* Subfolders */}
+      {/* Subfolders Grid */}
       {folders.length > 0 && (
-        <div className="mb-8">
-          <h2 className="text-xs font-semibold text-[var(--text-muted)] uppercase mb-3 tracking-wider flex items-center gap-2">
-            <span>Subfolders</span>
-            <span className="text-[10px] text-[var(--text-dim)]">({folders.length})</span>
+        <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)]" />
+            <span>Subfolders ({folders.length})</span>
           </h2>
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
             {folders.map(([folder, info]) => (
               <Link
                 key={folder}
                 href={`/${section}/${slug}/${folder}`.replace(/\/+/g, "/")}
-                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(--brand)] rounded-lg transition-all shadow-sm"
+                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"
               >
-                <span className="text-2xl group-hover:scale-110 transition-transform">📁</span>
+                <div className="p-2 rounded-xl bg-[var(--bg-elevated)] text-[var(--brand)] dark:text-[var(--accent)]">
+                  <Folder className="w-5 h-5" />
+                </div>
                 <div className="flex-1 min-w-0">
-                  <div className="text-sm font-semibold text-[var(--text-primary)] group-hover:text-[var(--brand)] dark:group-hover:text-[var(--accent)] transition-colors truncate">
+                  <div className="text-sm font-bold text-[var(--text-primary)] group-hover:text-[var(--brand)] dark:group-hover:text-[var(--accent)] transition-colors truncate">
                     {folder.split(/[-_]/).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ")}
                   </div>
-                  <div className="text-xs text-[var(--text-muted)] mt-0.5 font-mono">
+                  <div className="text-xs text-[var(--text-muted)] font-mono mt-0.5">
                     {info.docCount} document{info.docCount !== 1 ? "s" : ""}
                   </div>
                 </div>
@@ -232,32 +250,34 @@ function FolderIndexPage({
         </div>
       )}
 
-      {/* Documents */}
+      {/* Documents List */}
       {immediateDocs.length > 0 && (
         <div>
-          <h2 className="text-xs font-semibold text-[var(--text-muted)] uppercase mb-3 tracking-wider flex items-center gap-2">
-            <span>Documents</span>
-            <span className="text-[10px] text-[var(--text-dim)]">({immediateDocs.length})</span>
+          <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)]" />
+            <span>Documents ({immediateDocs.length})</span>
           </h2>
-          <div className="space-y-2">
+          <div className="space-y-2.5">
             {immediateDocs.map((doc) => (
               <Link
                 key={doc.slug}
                 href={`/${doc.slug}`}
-                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(--brand)] rounded-lg transition-all shadow-sm"
+                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"
               >
-                <div className="flex items-center gap-3 min-w-0">
-                  <span className="text-xl opacity-70 group-hover:opacity-100">📄</span>
+                <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="min-w-0">
-                    <div className="text-sm font-semibold text-[var(--text-primary)] group-hover:text-[var(--brand)] dark:group-hover:text-[var(--accent)] transition-colors truncate">
+                    <div className="text-sm font-bold text-[var(--text-primary)] group-hover:text-[var(--brand)] dark:group-hover:text-[var(--accent)] transition-colors truncate">
                       {doc.title}
                     </div>
                     {doc.tags.length > 0 && (
-                      <div className="flex flex-wrap gap-1.5 mt-1.5">
+                      <div className="flex flex-wrap gap-1.5 mt-2">
                         {doc.tags.slice(0, 4).map((t) => (
                           <span
                             key={t}
-                            className="text-[11px] px-1.5 py-0.25 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded text-[var(--text-muted)]"
+                            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"
                           >
                             #{t}
                           </span>
@@ -266,11 +286,15 @@ function FolderIndexPage({
                     )}
                   </div>
                 </div>
-                <time className="text-xs text-[var(--text-dim)] shrink-0 font-mono">
-                  {new Date(doc.updatedAt).toLocaleDateString(undefined, {
-                    month: "short",
-                    day: "numeric",
-                  })}
+
+                <time className="text-xs text-[var(--text-dim)] shrink-0 font-mono flex items-center gap-1">
+                  <Clock className="w-3 h-3" />
+                  <span>
+                    {new Date(doc.updatedAt).toLocaleDateString(undefined, {
+                      month: "short",
+                      day: "numeric",
+                    })}
+                  </span>
                 </time>
               </Link>
             ))}
@@ -279,7 +303,7 @@ function FolderIndexPage({
       )}
 
       {folders.length === 0 && immediateDocs.length === 0 && (
-        <div className="text-center py-12 border border-[var(--border-color)] rounded-xl bg-[var(--bg-surface)]">
+        <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>
       )}
@@ -331,14 +355,15 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
   if (edit === "1" && canEdit) {
     const existingFolders = extractFoldersForSection(docSlugs, doc.section);
     return (
-      <div>
+      <div className="space-y-6">
         <Link
           href={`/${doc.slug}`}
-          className="inline-flex items-center gap-1 text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)] mb-4 transition-colors"
+          className="inline-flex items-center gap-1.5 text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors"
         >
-          <span>← Back to document</span>
+          <ArrowLeft className="w-3.5 h-3.5" />
+          <span>Back to document</span>
         </Link>
-        <h1 className="text-2xl font-bold text-[var(--text-primary)] mb-6">
+        <h1 className="text-2xl sm:text-3xl font-extrabold text-[var(--text-primary)] tracking-tight">
           Edit: {doc.title}
         </h1>
         <DocForm
@@ -373,7 +398,7 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
     <div className="flex items-start gap-8">
       {/* Main Content Column */}
       <article className="flex-1 min-w-0">
-        {/* Breadcrumb */}
+        {/* Breadcrumbs Navigation */}
         <nav className="flex items-center gap-2 text-xs text-[var(--text-dim)] mb-4 flex-wrap">
           <Link href="/" className="hover:text-[var(--text-primary)] transition-colors">
             MCPedia
@@ -399,50 +424,56 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
         </nav>
 
         {/* Hero Metadata Card */}
-        <div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl p-6 mb-8 shadow-sm">
-          <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-4 mb-4">
+        <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="flex-1 min-w-0">
-              <div className="flex items-center gap-2 mb-2 flex-wrap">
-                <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-mono font-medium bg-[var(--brand)]/15 text-[var(--brand)] dark:text-[var(--accent)] border border-[var(--brand)]/30">
+              <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">
                   <span>{sectionInfo.icon}</span>
-                  <span className="uppercase">{sectionInfo.label}</span>
+                  <span>{sectionInfo.label}</span>
                 </span>
                 <span className="text-xs text-[var(--text-dim)]">·</span>
-                <span className="text-xs text-[var(--text-muted)]">
+                <span className="text-xs text-[var(--text-muted)] font-medium">
                   {doc.type.charAt(0).toUpperCase() + doc.type.slice(1)}
                 </span>
                 <span className="text-xs text-[var(--text-dim)]">·</span>
-                <span className="text-xs text-[var(--text-muted)] font-mono">
-                  {readingTime}
+                <span className="text-xs text-[var(--text-muted)] font-mono flex items-center gap-1">
+                  <Clock className="w-3 h-3" />
+                  <span>{readingTime}</span>
                 </span>
               </div>
-              <h1 className="text-2xl sm:text-3xl font-bold text-[var(--text-primary)] tracking-tight leading-tight">
+
+              <h1 className="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] tracking-tight leading-tight">
                 {doc.title}
               </h1>
             </div>
 
-            {/* Quick Actions */}
+            {/* Quick Actions Deck */}
             <DocActions slug={doc.slug} body={doc.body} canEdit={canEdit} />
           </div>
 
-          {/* Author + Date + Tags */}
-          <div className="flex flex-wrap items-center gap-3 text-xs text-[var(--text-muted)] pt-3 border-t border-[var(--border-color)]">
+          {/* 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)]">
             {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">
                   {doc.author.charAt(0).toUpperCase()}
                 </div>
-                <span className="text-[var(--text-secondary)]">{doc.author}</span>
+                <span className="text-[var(--text-secondary)] font-medium">{doc.author}</span>
                 <span className="text-[var(--text-dim)]">·</span>
               </div>
             )}
-            <span>
-              Updated {new Date(doc.updatedAt).toLocaleDateString(undefined, {
-                month: "long",
-                day: "numeric",
-                year: "numeric",
-              })}
+            <span className="flex items-center gap-1">
+              <Clock className="w-3 h-3 text-[var(--text-dim)]" />
+              <span>
+                Updated {new Date(doc.updatedAt).toLocaleDateString(undefined, {
+                  month: "long",
+                  day: "numeric",
+                  year: "numeric",
+                })}
+              </span>
             </span>
+
             {doc.tags.length > 0 && (
               <>
                 <span className="text-[var(--text-dim)]">·</span>
@@ -450,7 +481,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 text-[var(--text-muted)] text-[11px]"
+                      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"
                     >
                       #{t}
                     </span>
@@ -465,32 +496,35 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
         </div>
 
         {/* Mobile TOC (rendered inline on smaller screens) */}
-        <div className="xl:hidden mb-6 p-4 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-lg shadow-sm">
+        <div className="xl:hidden mb-6 p-5 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-2xl shadow-xs">
           <TOC source={doc.body} />
         </div>
 
-        {/* Markdown content */}
+        {/* Markdown Content */}
         <div className="mb-14">
           <Markdown source={doc.body} />
         </div>
 
-        {/* Related Documents */}
+        {/* Related Documents Grid */}
         {related.length > 0 && (
-          <aside className="mt-12 pt-8 border-t border-[var(--border-color)]">
-            <h2 className="text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider mb-4 flex items-center gap-2">
-              <span>Related Knowledge</span>
-            </h2>
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          <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)]" />
+              <h2 className="text-xs font-bold text-[var(--text-muted)] uppercase tracking-wider font-mono">
+                Related Knowledge & Writeups
+              </h2>
+            </div>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3.5">
               {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-lg p-4 transition-all shadow-sm"
+                    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"
                   >
                     <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">
+                      <span className="text-xs text-[var(--brand)] dark:text-[var(--accent)] font-mono uppercase font-semibold">
                         {rInfo.icon} {r.section}
                       </span>
                       <time className="text-[11px] text-[var(--text-dim)] font-mono">
@@ -500,7 +534,7 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
                         })}
                       </time>
                     </div>
-                    <h3 className="text-sm font-semibold 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-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">
                       {r.title}
                     </h3>
                   </Link>
@@ -510,28 +544,31 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
           </aside>
         )}
 
-        {/* Revision History */}
+        {/* Revision History Timeline */}
         {revisions.length > 0 && (
           <aside className="mt-10 pt-8 border-t border-[var(--border-color)]">
             <div className="flex items-center justify-between mb-4">
-              <h2 className="text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider">
-                Revision History ({revisions.length})
-              </h2>
+              <div className="flex items-center gap-2">
+                <History className="w-4 h-4 text-[var(--brand)] dark:text-[var(--accent)]" />
+                <h2 className="text-xs font-bold text-[var(--text-muted)] uppercase tracking-wider font-mono">
+                  Revision History ({revisions.length})
+                </h2>
+              </div>
             </div>
             <div className="space-y-2">
               {revisions.map((rev) => (
                 <div
                   key={rev.id}
-                  className="flex items-center justify-between gap-3 p-3 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-lg text-xs shadow-sm"
+                  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"
                 >
-                  <div className="flex items-center gap-2 min-w-0">
-                    <span className="font-mono text-[var(--brand)] dark:text-[var(--accent)] bg-[var(--brand)]/10 px-1.5 py-0.5 rounded border border-[var(--brand)]/30 font-semibold">
+                  <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">
                       v{rev.revisionNo}
                     </span>
-                    <span className="text-[var(--text-primary)] truncate">
-                      {rev.reason || "Updated document"}
+                    <span className="text-[var(--text-primary)] font-medium truncate">
+                      {rev.reason || "Updated document in PostgreSQL"}
                     </span>
-                    <span className="text-[var(--text-dim)] hidden sm:inline">
+                    <span className="text-[var(--text-dim)] hidden sm:inline font-mono">
                       · {new Date(rev.createdAt).toLocaleString()}
                     </span>
                   </div>
@@ -540,7 +577,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-2.5 py-1 rounded border border-[var(--border-color)] hover:border-[var(--brand)] transition-colors font-medium shadow-sm"
+                        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"
                       >
                         Restore
                       </button>