diff --git a/src/components/Changelog.tsx b/src/components/Changelog.tsx
index c66f9bf..73e1e36 100644
--- a/src/components/Changelog.tsx
+++ b/src/components/Changelog.tsx
@@ -10,6 +10,7 @@ const tagStyles: Record<string, string> = {
   improvement: 'border-blue-500/30 bg-blue-500/[0.08] text-blue-400',
   fix: 'border-amber-500/30 bg-amber-500/[0.08] text-amber-400',
   beta: 'border-purple-500/30 bg-purple-500/[0.08] text-purple-400',
+  pivot: 'border-rose-500/40 bg-rose-500/[0.10] text-rose-300',
 };
 
 const sectionDotColor: Record<string, string> = {
@@ -18,7 +19,18 @@ const sectionDotColor: Record<string, string> = {
   fix: 'bg-amber-400',
 };
 
-function EntryCard({ entry, index }: { entry: ChangelogEntry; index: number }) {
+/**
+ * One changelog release, laid out as a vertical timeline row — Mintlify-style:
+ * a sticky version label on the left rail, a node on the connecting line, and
+ * the release content to the right.
+ */
+function TimelineEntry({
+  entry,
+  index,
+}: {
+  entry: ChangelogEntry;
+  index: number;
+}) {
   const [expandedSections, setExpandedSections] = useState<
     Record<number, boolean>
   >({});
@@ -27,112 +39,127 @@ function EntryCard({ entry, index }: { entry: ChangelogEntry; index: number }) {
     setExpandedSections(prev => ({ ...prev, [i]: !prev[i] }));
   };
 
+  const isPivot = entry.tag === 'pivot';
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.45, delay: index * 0.07 }}
-      className="rounded-2xl border border-white/[0.10] bg-white/[0.04] backdrop-blur-sm overflow-hidden"
+      className="flex flex-col gap-3 sm:flex-row sm:gap-9"
     >
-      {/* Card header */}
-      <div className="px-8 pt-8 pb-6 border-b border-white/[0.06]">
-        <div className="flex flex-wrap items-center gap-3 mb-3">
-          <span className="font-mono text-sm text-neutral-500 tracking-wide">
-            {entry.version}
-          </span>
-          <span className="text-neutral-700 text-xs">·</span>
-          <span className="font-mono text-sm text-neutral-500 tracking-wide">
-            {entry.date}
-          </span>
-          {entry.tag && (
-            <span
-              className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-widest ${tagStyles[entry.tag]}`}
-            >
-              {entry.tag}
-            </span>
-          )}
+      {/* Left rail — version, date, tag (sticky on desktop) */}
+      <div className="sm:sticky sm:top-28 sm:w-32 sm:shrink-0 sm:self-start sm:pt-0.5 sm:text-right">
+        <div className="font-mono text-lg font-semibold tracking-tight text-white">
+          {entry.version}
         </div>
-        <h2 className="text-2xl font-bold text-white tracking-tight leading-snug">
-          {entry.title}
-        </h2>
+        <div className="mt-1 font-mono text-xs tracking-wide text-neutral-500">
+          {entry.date}
+        </div>
+        {entry.tag && (
+          <span
+            className={`mt-2.5 inline-flex items-center rounded-full border px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-widest ${tagStyles[entry.tag]}`}
+          >
+            {entry.tag}
+          </span>
+        )}
       </div>
 
-      {/* Sections */}
-      <div className="px-8 py-6 space-y-7">
-        {entry.sections.map((section, si) => {
-          const isCollapsible = section.collapsible;
-          const isExpanded = expandedSections[si] ?? false;
+      {/* Connecting line + node + release content */}
+      <div
+        className={`relative flex-1 border-l pb-14 pl-6 sm:pl-9 ${
+          isPivot ? 'border-rose-500/25' : 'border-white/[0.10]'
+        }`}
+      >
+        <span
+          className={`absolute -left-[5px] top-2 h-2.5 w-2.5 rounded-full ${
+            isPivot
+              ? 'bg-rose-400 shadow-[0_0_0_4px_rgba(244,63,94,0.12)]'
+              : 'bg-neutral-500'
+          }`}
+          aria-hidden
+        />
+
+        <h2 className="text-xl font-bold leading-snug tracking-tight text-white sm:text-2xl">
+          {entry.title}
+        </h2>
 
-          return (
-            <div key={si}>
-              {isCollapsible ? (
-                /* Collapsible section */
-                <div>
-                  <button
-                    onClick={() => toggle(si)}
-                    className="flex items-center gap-1.5 text-xs font-medium text-neutral-500 hover:text-neutral-300 transition-colors mb-0 group"
-                  >
-                    <ChevronRight
-                      className={`w-3.5 h-3.5 transition-transform duration-200 ${isExpanded ? 'rotate-90' : ''}`}
-                    />
-                    <span>
-                      {isExpanded
-                        ? section.label
-                        : `${section.label} / Housekeeping...`}
-                    </span>
-                  </button>
+        <div className="mt-6 space-y-7">
+          {entry.sections.map((section, si) => {
+            const isCollapsible = section.collapsible;
+            const isExpanded = expandedSections[si] ?? false;
 
-                  {isExpanded && (
-                    <motion.div
-                      initial={{ opacity: 0, height: 0 }}
-                      animate={{ opacity: 1, height: 'auto' }}
-                      exit={{ opacity: 0, height: 0 }}
-                      transition={{ duration: 0.2 }}
-                      className="mt-4 pl-5 border-l border-white/[0.06] space-y-4"
+            return (
+              <div key={si}>
+                {isCollapsible ? (
+                  /* Collapsible section */
+                  <div>
+                    <button
+                      onClick={() => toggle(si)}
+                      className="group mb-0 flex items-center gap-1.5 text-xs font-medium text-neutral-500 transition-colors hover:text-neutral-300"
                     >
+                      <ChevronRight
+                        className={`h-3.5 w-3.5 transition-transform duration-200 ${isExpanded ? 'rotate-90' : ''}`}
+                      />
+                      <span>
+                        {isExpanded
+                          ? section.label
+                          : `${section.label} / Housekeeping...`}
+                      </span>
+                    </button>
+
+                    {isExpanded && (
+                      <motion.div
+                        initial={{ opacity: 0, height: 0 }}
+                        animate={{ opacity: 1, height: 'auto' }}
+                        exit={{ opacity: 0, height: 0 }}
+                        transition={{ duration: 0.2 }}
+                        className="mt-4 space-y-4 border-l border-white/[0.06] pl-5"
+                      >
+                        {section.items.map((item, ii) => (
+                          <p
+                            key={ii}
+                            className="text-sm leading-relaxed text-neutral-400"
+                          >
+                            <span className="font-semibold text-neutral-200">
+                              {item.label}:
+                            </span>{' '}
+                            {item.description}
+                          </p>
+                        ))}
+                      </motion.div>
+                    )}
+                  </div>
+                ) : (
+                  /* Normal section */
+                  <div>
+                    <div className="mb-4 flex items-center gap-2">
+                      <span
+                        className={`h-1.5 w-1.5 shrink-0 rounded-full ${sectionDotColor[section.type] ?? 'bg-neutral-500'}`}
+                      />
+                      <p className="text-xs font-bold uppercase tracking-widest text-neutral-500">
+                        {section.label}
+                      </p>
+                    </div>
+                    <ul className="space-y-3.5">
                       {section.items.map((item, ii) => (
-                        <p
-                          key={ii}
-                          className="text-sm text-neutral-400 leading-relaxed"
-                        >
-                          <span className="font-semibold text-neutral-200">
-                            {item.label}:
-                          </span>{' '}
-                          {item.description}
-                        </p>
+                        <li key={ii} className="flex items-start gap-3 text-sm">
+                          <span className="mt-[7px] h-1 w-1 shrink-0 rounded-full bg-neutral-600" />
+                          <p className="leading-relaxed text-neutral-400">
+                            <span className="font-semibold text-neutral-200">
+                              {item.label}:
+                            </span>{' '}
+                            {item.description}
+                          </p>
+                        </li>
                       ))}
-                    </motion.div>
-                  )}
-                </div>
-              ) : (
-                /* Normal section */
-                <div>
-                  <div className="flex items-center gap-2 mb-4">
-                    <span
-                      className={`h-1.5 w-1.5 rounded-full shrink-0 ${sectionDotColor[section.type] ?? 'bg-neutral-500'}`}
-                    />
-                    <p className="text-xs font-bold uppercase tracking-widest text-neutral-500">
-                      {section.label}
-                    </p>
+                    </ul>
                   </div>
-                  <ul className="space-y-3.5">
-                    {section.items.map((item, ii) => (
-                      <li key={ii} className="flex items-start gap-3 text-sm">
-                        <span className="mt-[7px] h-1 w-1 shrink-0 rounded-full bg-neutral-600" />
-                        <p className="text-neutral-400 leading-relaxed">
-                          <span className="font-semibold text-neutral-200">
-                            {item.label}:
-                          </span>{' '}
-                          {item.description}
-                        </p>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              )}
-            </div>
-          );
-        })}
+                )}
+              </div>
+            );
+          })}
+        </div>
       </div>
     </motion.div>
   );
@@ -222,7 +249,7 @@ const Changelog: React.FC = () => {
           initial={{ opacity: 0, y: 12 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.4, delay: 0.1 }}
-          className="flex gap-1 mb-10 p-1 rounded-xl bg-white/[0.04] border border-white/[0.08] w-fit"
+          className="flex gap-1 mb-12 p-1 rounded-xl bg-white/[0.04] border border-white/[0.08] w-fit"
         >
           {(['web', 'cli'] as Tab[]).map(t => (
             <button
@@ -239,15 +266,15 @@ const Changelog: React.FC = () => {
           ))}
         </motion.div>
 
-        {/* Entries */}
-        <div className="space-y-4">
+        {/* Entries — vertical timeline */}
+        <div className="relative">
           {entries.map((entry, i) => (
-            <EntryCard key={entry.version} entry={entry} index={i} />
+            <TimelineEntry key={entry.version} entry={entry} index={i} />
           ))}
         </div>
 
         {/* Footer */}
-        <div className="mt-16 pt-8 border-t border-white/[0.06] text-center">
+        <div className="mt-8 pt-8 border-t border-white/[0.06] text-center">
           <p className="text-sm text-neutral-400">
             Questions or feedback?{' '}
             <a
diff --git a/src/components/TestimonialsSection.tsx b/src/components/TestimonialsSection.tsx
index 23b8eb9..27c33a5 100644
--- a/src/components/TestimonialsSection.tsx
+++ b/src/components/TestimonialsSection.tsx
@@ -216,11 +216,11 @@ function TestimonialMarqueeColumn({
   return (
     <div className={`${heightClass} overflow-hidden`}>
       <div
-        className="pointer-events-none absolute inset-x-0 top-0 z-[2] h-14 bg-gradient-to-b from-[#f3f3f2] via-[#f3f3f2]/90 to-transparent sm:h-16"
+        className="pointer-events-none absolute inset-x-0 top-0 z-[2] h-14 bg-gradient-to-b from-[#161618] via-[#161618]/90 to-transparent sm:h-16"
         aria-hidden
       />
       <div
-        className="pointer-events-none absolute inset-x-0 bottom-0 z-[2] h-14 bg-gradient-to-t from-[#f3f3f2] via-[#f3f3f2]/90 to-transparent sm:h-16"
+        className="pointer-events-none absolute inset-x-0 bottom-0 z-[2] h-14 bg-gradient-to-t from-[#161618] via-[#161618]/90 to-transparent sm:h-16"
         aria-hidden
       />
 
@@ -249,31 +249,26 @@ const TestimonialsSection: React.FC = () => {
   return (
     <section
       id="testimonials"
-      className="relative w-full overflow-hidden bg-[#f3f3f2] py-24 lg:py-28 text-neutral-900 antialiased font-space"
+      className="relative w-full overflow-hidden bg-[#161618] py-24 lg:py-28 text-neutral-200 antialiased font-space"
       aria-labelledby="testimonials-heading"
     >
       {/* Minimal editorial backdrop — fine grid + a soft neutral vignette */}
       <div aria-hidden className="pointer-events-none absolute inset-0 z-[1]">
-        <div className="absolute inset-0 bg-[linear-gradient(rgba(24,24,27,0.028)_1px,transparent_1px),linear-gradient(90deg,rgba(24,24,27,0.028)_1px,transparent_1px)] bg-[length:44px_44px]" />
-        <div className="absolute inset-0 bg-[radial-gradient(ellipse_72%_52%_at_50%_-18%,rgba(24,24,27,0.04),transparent_58%)]" />
-        <div className="absolute inset-0 bg-[radial-gradient(ellipse_85%_55%_at_50%_108%,rgba(24,24,27,0.035),transparent_52%)]" />
+        <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.04)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.04)_1px,transparent_1px)] bg-[length:44px_44px]" />
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_72%_52%_at_50%_-18%,rgba(255,255,255,0.035),transparent_58%)]" />
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_85%_55%_at_50%_108%,rgba(255,255,255,0.03),transparent_52%)]" />
       </div>
 
+      {/* Soft edge fades — blend the section into the black sections above and
+          below. z-[5] keeps them under the content (z-10) so only the
+          background edge softens, never the heading or cards. */}
       <div
         aria-hidden
-        className="pointer-events-none absolute inset-x-0 top-0 z-20 h-32 bg-gradient-to-b from-black to-transparent sm:h-36 lg:h-44"
+        className="pointer-events-none absolute inset-x-0 top-0 z-[5] h-24 bg-gradient-to-b from-black to-transparent sm:h-28"
       />
       <div
         aria-hidden
-        className="pointer-events-none absolute inset-x-0 bottom-0 z-20 h-36 bg-gradient-to-t from-black to-transparent sm:h-40 lg:h-48"
-      />
-      <div
-        aria-hidden
-        className="pointer-events-none absolute inset-y-0 left-0 z-20 w-14 bg-gradient-to-r from-black to-transparent sm:w-20 lg:w-32"
-      />
-      <div
-        aria-hidden
-        className="pointer-events-none absolute inset-y-0 right-0 z-20 w-14 bg-gradient-to-l from-black to-transparent sm:w-20 lg:w-32"
+        className="pointer-events-none absolute inset-x-0 bottom-0 z-[5] h-24 bg-gradient-to-t from-black to-transparent sm:h-28"
       />
 
       <div className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
@@ -286,11 +281,11 @@ const TestimonialsSection: React.FC = () => {
         >
           <h2
             id="testimonials-heading"
-            className="text-4xl font-semibold tracking-tight text-neutral-950 sm:text-5xl lg:text-[3.25rem] leading-[1.12]"
+            className="text-4xl font-semibold tracking-tight text-white sm:text-5xl lg:text-[3.25rem] leading-[1.12]"
           >
             Builders love Refactron.
           </h2>
-          <p className="mt-4 text-base text-neutral-600 sm:text-lg leading-relaxed">
+          <p className="mt-4 text-base text-neutral-400 sm:text-lg leading-relaxed">
             And they can&apos;t stop talking about safer refactors and boring,
             reviewable diffs.
           </p>
diff --git a/src/data/changelog.ts b/src/data/changelog.ts
index eacb0fa..ee121ff 100644
--- a/src/data/changelog.ts
+++ b/src/data/changelog.ts
@@ -14,11 +14,173 @@ export interface ChangelogEntry {
   version: string;
   date: string;
   title: string;
-  tag?: 'new' | 'improvement' | 'fix' | 'beta';
+  tag?: 'new' | 'improvement' | 'fix' | 'beta' | 'pivot';
   sections: ChangelogSection[];
 }
 
 const changelog: ChangelogEntry[] = [
+  {
+    version: '0.2.2',
+    date: 'May 18, 2026',
+    title: 'Boxed Output, Rollback & a Faster Docs Engine',
+    tag: 'new',
+    sections: [
+      {
+        type: 'feat',
+        label: 'Major Features',
+        items: [
+          {
+            label: 'rollback',
+            description:
+              'Undo an applied refactor or documentation run — a journalled, drift-safe LIFO undo with --all, --force, and --dry-run.',
+          },
+          {
+            label: 'Boxed output',
+            description:
+              'analyze and run --dry-run render bordered tables — one box per file, plus transform and summary blocks.',
+          },
+          {
+            label: 'run --apply live progress',
+            description:
+              'Gate-by-gate status, with a per-file verify/apply fallback when a batch fails.',
+          },
+          {
+            label: 'Reports on disk',
+            description:
+              'analyze and run --dry-run write the full report to .refactron/reports/ so long output survives terminal scrollback.',
+          },
+          {
+            label: 'Richer document',
+            description:
+              'document now also writes inline comments, a per-run modernization report, and runs a post-apply syntax re-check.',
+          },
+        ],
+      },
+      {
+        type: 'improvement',
+        label: 'Improvements',
+        items: [
+          {
+            label: 'Faster document',
+            description:
+              'Docstring requests are batched with bounded concurrency and token-aware pacing — call count scales with source size, not symbol count.',
+          },
+        ],
+      },
+      {
+        type: 'fix',
+        label: 'Bug Fixes',
+        collapsible: true,
+        items: [
+          {
+            label: 'Large-file docs',
+            description:
+              'document no longer drops every docstring on big files — batches are capped by response size and truncated replies are salvaged.',
+          },
+          {
+            label: 'Transform safety',
+            description:
+              'deprecated_api_requests_to_httpx refuses files using non-drop-in requests API instead of emitting runtime-broken code.',
+          },
+          {
+            label: 'analyze accuracy',
+            description:
+              'Old-string-format findings anchor on the operator; manual_typecheck_to_hints no longer flags already-annotated parameters.',
+          },
+          {
+            label: 'Cross-platform',
+            description:
+              'Report and CHANGELOG paths are normalized to forward slashes on Windows.',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    version: '0.2.1',
+    date: 'May 16, 2026',
+    title: 'Large-File Fix & Transform Coverage',
+    tag: 'fix',
+    sections: [
+      {
+        type: 'fix',
+        label: 'Bug Fixes',
+        items: [
+          {
+            label: 'Large files',
+            description:
+              'analyze no longer crashes on files over ~32 KB — parsing uses tree-sitter streaming input, and a single unparseable file is skipped instead of aborting the run.',
+          },
+          {
+            label: 'var_to_const_let',
+            description:
+              'Reference resolution is now scope-correct, so same-named vars in different functions no longer drop the whole file.',
+          },
+        ],
+      },
+      {
+        type: 'improvement',
+        label: 'Improvements',
+        items: [
+          {
+            label: 'format_to_fstring',
+            description:
+              'Converts the full printf grammar — %d, %.2f, %x, %o, %e, %g, and width/precision specifiers, not just plain %s.',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    version: '0.2.0',
+    date: 'May 15, 2026',
+    title: 'Refactron v2.0 — The Deterministic Rebuild',
+    tag: 'pivot',
+    sections: [
+      {
+        type: 'feat',
+        label: 'A Ground-Up Rebuild',
+        items: [
+          {
+            label: 'Deterministic engine',
+            description:
+              'Refactron 2.0 is rebuilt as a 100% deterministic AST engine — no LLM touches your code. It supersedes the original Python-implemented 1.x line.',
+          },
+          {
+            label: 'Versioning reset',
+            description:
+              'The rebuild restarts versioning at 0.2.0. Entries from 1.0.15 and below belong to the legacy Python tool.',
+          },
+        ],
+      },
+      {
+        type: 'feat',
+        label: 'Major Features',
+        items: [
+          {
+            label: '10 AST transforms',
+            description:
+              'Five Python (via LibCST) and five TypeScript (via ts-morph), each with cross-file precondition checks.',
+          },
+          {
+            label: '3-gate verification',
+            description:
+              'Syntax, imports, and your full test suite must pass on a shadow tree before any byte is written — atomic batch write, or nothing.',
+          },
+          {
+            label: 'Documentation engine',
+            description:
+              'The only LLM-touching step, running solely on already-verified diffs. Five providers: Ollama, Groq, OpenAI, Anthropic, and the managed backend.',
+          },
+          {
+            label: 'Configuration & auth',
+            description:
+              '.refactronrc.json via cosmiconfig with schema validation, plus OAuth device-flow login and REFACTRON_TOKEN support.',
+          },
+        ],
+      },
+    ],
+  },
   {
     version: '1.0.15',
     date: 'February 8, 2026',
diff --git a/src/data/webChangelog.ts b/src/data/webChangelog.ts
index a2d148f..4a27445 100644
--- a/src/data/webChangelog.ts
+++ b/src/data/webChangelog.ts
@@ -1,6 +1,110 @@
 import { ChangelogEntry } from './changelog';
 
 const webChangelog: ChangelogEntry[] = [
+  {
+    version: 'web-1.4.0',
+    date: 'May 2026',
+    title: 'Marketing Redesign & Research',
+    tag: 'new',
+    sections: [
+      {
+        type: 'feat',
+        label: 'New Features',
+        items: [
+          {
+            label: 'Research Section',
+            description:
+              'A new research section presenting the Refactron comparison study, with an academic-paper-style page layout.',
+          },
+          {
+            label: 'Hero Research Pill',
+            description:
+              'An inline announcement pill in the hero links straight to the latest comparison paper.',
+          },
+        ],
+      },
+      {
+        type: 'improvement',
+        label: 'Improvements',
+        items: [
+          {
+            label: 'Marketing Redesign',
+            description:
+              'The marketing pages were refreshed, with LLM/AI-SEO work — an llms.txt index and structured content so AI crawlers can read the site.',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    version: 'web-1.3.0',
+    date: 'April 2026',
+    title: 'Blog Launch',
+    tag: 'new',
+    sections: [
+      {
+        type: 'feat',
+        label: 'New Features',
+        items: [
+          {
+            label: 'Blog',
+            description:
+              'A full blog at /blog — a post system with build-time pre-rendering and automated sitemap generation.',
+          },
+          {
+            label: 'Launch Posts',
+            description:
+              'First posts published: a local-first architecture deep-dive and the Refactron npm package announcement.',
+          },
+        ],
+      },
+      {
+        type: 'fix',
+        label: 'Bug Fixes',
+        items: [
+          {
+            label: 'Routing & Sitemap',
+            description:
+              'Legacy /case-studies URLs now redirect, and sitemap route coverage was corrected (a phantom /pricing route removed).',
+          },
+          {
+            label: 'Cookie Handling',
+            description:
+              'Fixed cookie-consent handling alongside the blog rollout.',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    version: 'web-1.2.0',
+    date: 'March 2026',
+    title: 'Status Page, Changelog Tabs & Book a Demo',
+    tag: 'new',
+    sections: [
+      {
+        type: 'feat',
+        label: 'New Features',
+        items: [
+          {
+            label: 'Status Page',
+            description:
+              'A public status page for service health, with a status badge in the site footer.',
+          },
+          {
+            label: 'Changelog Tabs',
+            description:
+              'The /changelog page split into Web App and CLI Package tabs so each release stream has its own timeline.',
+          },
+          {
+            label: 'Book a Demo',
+            description:
+              'A "Book a Demo" call-to-action for teams evaluating Refactron.',
+          },
+        ],
+      },
+    ],
+  },
   {
     version: 'web-1.1.0',
     date: 'March 2026',