diff --git a/apps/web/app/blog/[slug]/page.tsx b/apps/web/app/blog/[slug]/page.tsx
index 15c481ca..e68ac5c6 100644
--- a/apps/web/app/blog/[slug]/page.tsx
+++ b/apps/web/app/blog/[slug]/page.tsx
@@ -20,7 +20,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
         page.data.className,
       )}
     >
-      <div className="mb-4">
+      <div className="mb-4 text-sm md:text-base">
         {page.data.date.toLocaleDateString("en-US", {
           year: "numeric",
           month: "long",
diff --git a/apps/web/app/blog/og/page.tsx b/apps/web/app/blog/og/page.tsx
index 06d04b27..e0f32687 100644
--- a/apps/web/app/blog/og/page.tsx
+++ b/apps/web/app/blog/og/page.tsx
@@ -1,7 +1,11 @@
+import Image from "next/image"
 import { CodeHikeLogo } from "../../../ui/nav"
 
-const title = "Fine-grained Markdown"
-const description = "Flexible content, richer presentation"
+const title = "The Curse of Markdown"
+const description = "And the content website wasteland"
+const date = "November 21, 2024"
+
+import pomber from "../[slug]/pomber.jpg"
 
 export default function Page() {
   return (
@@ -10,16 +14,32 @@ export default function Page() {
         className="flex justify-between flex-col p-16"
         style={{ width: 1200, height: 628 }}
       >
-        <div className="flex-1 flex items-start">
+        <div className="flex-1 flex items-start justify-between ">
           <span className="flex items-center text-4xl font-bold text-accent-foreground/90">
             <CodeHikeLogo className="h-12 w-12" /> Code Hike's blog
           </span>
-          <div></div>
+          <span className="text-xl font-bold text-accent-foreground/90 ml-auto">
+            {date}
+          </span>
         </div>
         <h1 className="text-6xl text-pretty m-0 pr-24">{title}</h1>
         <h2 className="text-accent-foreground/90 text-pretty text-4xl m-0 flex-1  pr-24">
           <div className="pt-10">{description}</div>
         </h2>
+        <div className="flex items-center gap-4 ml-auto">
+          <Image
+            src={pomber}
+            alt="pomber"
+            width={56}
+            height={56}
+            priority={true}
+            className="rounded-full m-0"
+          />
+          <div>
+            <div className="font-semibold text-xl">Rodrigo Pombo</div>
+            <div className="text-primary/60 text-lg">@pomber</div>
+          </div>
+        </div>
       </div>
     </div>
   )
diff --git a/apps/web/content/blog/the-curse-of-markdown.steps.tsx b/apps/web/content/blog/the-curse-of-markdown.steps.tsx
index 313c3e0b..e6b5fa03 100644
--- a/apps/web/content/blog/the-curse-of-markdown.steps.tsx
+++ b/apps/web/content/blog/the-curse-of-markdown.steps.tsx
@@ -1,5 +1,5 @@
 const lean = {
-  richAxis: "text-yellow-500",
+  richAxis: "opacity-90",
   costAxis: "opacity-0",
   richScreenshot: "",
   leanScreenshot: "opacity-100",
@@ -18,13 +18,13 @@ const lean = {
       rich: 65,
       cost: 33.6,
       pop: circle(65, 40.1, 60, 2.5),
-      className: "bg-teal-600 !opacity-0",
+      className: "bg-purple-500 !opacity-0",
     },
     {
       rich: 75,
       cost: 47.6,
       pop: circle(75, 56.3, 60, 2.5),
-      className: "bg-teal-600 !opacity-0",
+      className: "bg-purple-500 !opacity-0",
     },
   ],
 }
@@ -57,7 +57,8 @@ const richness = {
 const effort = {
   leanScreenshot: "opacity-0",
   richScreenshot: "opacity-0",
-  costAxis: "text-yellow-500",
+  richAxis: "opacity-30",
+  costAxis: "opacity-90",
   points: [
     { rich: 10, cost: 10 },
     { rich: 20, cost: 20 },
@@ -72,7 +73,6 @@ const effort = {
 }
 
 const markdown = {
-  costAxis: "",
   points: [
     { rich: 10, cost: 10, pop: line(10, 9.9, 10.3, 24) },
     { rich: 20, cost: 10.8, pop: line(20, 10.3, 11.6, 24) },
@@ -87,12 +87,12 @@ const markdown = {
 }
 
 const wall = {
+  costAxis: "opacity-30",
   wall: "opacity-50 top-0 bottom-0 bg-pink-500/10 border-x-2 border-pink-500/80",
 }
 
 const distribution = {
   extra: "opacity-100",
-  costAxis: "",
   points: [
     { rich: 10, pop: line(10, 9.9, 10.3, 16) },
     { rich: 20, pop: line(20, 10.3, 11.6, 24) },
@@ -173,9 +173,9 @@ const why = {
     { rich: 30, className: "bg-sky-500" },
     { rich: 40, className: "bg-blue-500" },
     { rich: 50, className: "bg-indigo-500" },
-    { rich: 60, className: "bg-violet-500" },
-    { rich: 70, className: "bg-purple-500" },
-    { rich: 80, className: "bg-fuchsia-500" },
+    { rich: 60 },
+    { rich: 70 },
+    { rich: 80 },
     { rich: 90, className: "bg-pink-500" },
   ],
 }
@@ -211,23 +211,6 @@ function merge(rawSteps: any) {
   })
 }
 
-function extra(
-  rich: number,
-  cost: number,
-  n: number,
-  noise: number,
-  angle: number = 0,
-) {
-  return Array.from({ length: n * 2 }, (_, i) => {
-    const dx = (Math.random() * 2 - 1) * noise
-    const dy = (Math.random() * 2 - 1) * 0
-    return {
-      rich: rich + dx,
-      cost: cost + Math.sin(angle) * dx + Math.cos(angle) * dy,
-    }
-  })
-}
-
 function line(richc: number, costl: number, costr: number, n: number, rd = 5) {
   return Array.from({ length: n * 2 }, (_, i) => {
     const costc = (costr + costl) / 2
diff --git a/apps/web/content/blog/the-curse-of-markdown.tsx b/apps/web/content/blog/the-curse-of-markdown.tsx
index 8984342c..cb505b53 100644
--- a/apps/web/content/blog/the-curse-of-markdown.tsx
+++ b/apps/web/content/blog/the-curse-of-markdown.tsx
@@ -106,31 +106,33 @@ function Screenshots({ lean, rich }: { lean?: string; rich?: string }) {
 function Axis({ cost, rich }: { cost?: string; rich?: string }) {
   return (
     <>
-      <div
-        className="absolute bottom-2 left-2 right-3 h-0.5 bg-zinc-700"
-        style={{ translate: "0 50%" }}
-      />
-      <div
-        className="border-zinc-700 absolute right-2 bottom-2"
-        style={{
-          width: 0,
-          height: 0,
-          borderTop: "5px solid transparent",
-          borderBottom: "5px solid transparent",
-          borderLeftWidth: "6px",
-          translate: "0 50%",
-        }}
-      />
-      <div className="absolute bottom-3 right-2 text-xs text-zinc-500">
-        Richness
+      <div className={cn("transition-all", rich)}>
+        <div
+          className="absolute bottom-2 left-2 right-3 h-0.5 bg-zinc-100"
+          style={{ translate: "0 50%" }}
+        />
+        <div
+          className="border-zinc-100 absolute right-2 bottom-2"
+          style={{
+            width: 0,
+            height: 0,
+            borderTop: "5px solid transparent",
+            borderBottom: "5px solid transparent",
+            borderLeftWidth: "6px",
+            translate: "0 50%",
+          }}
+        />
+        <div className="absolute bottom-3 right-2 text-sm text-zinc-100">
+          Richness
+        </div>
       </div>
       <div className={cn("transition-all", cost)}>
         <div
-          className="absolute top-3 left-2 bottom-2 w-0.5 bg-zinc-700"
+          className="absolute top-3 left-2 bottom-2 w-0.5 bg-zinc-100"
           style={{ translate: "-50% 0" }}
         />
         <div
-          className="border-zinc-700 absolute top-2 left-2"
+          className="border-zinc-100 absolute top-2 left-2"
           style={{
             width: 0,
             height: 0,
@@ -141,7 +143,7 @@ function Axis({ cost, rich }: { cost?: string; rich?: string }) {
             translate: "-50% 0",
           }}
         />
-        <div className="absolute top-1 left-5 text-xs text-zinc-500">Cost</div>
+        <div className="absolute top-1 left-5 text-sm text-zinc-100">Cost</div>
       </div>
     </>
   )
@@ -216,42 +218,85 @@ export function Layout(props: unknown) {
   const { steps } = parseProps(props, Block.extend({ steps: z.array(Block) }))
   return (
     <>
-      <div className="md:hidden">TODO: small screen</div>
-      <SelectionProvider
-        className="hidden md:flex gap-6 relative mb-[max(calc(100vh-788px),64px)]"
-        rootMargin={{ top: 256 + 48, height: 384 - 48 * 2 }}
-      >
-        <div className="flex-1">
+      <div className="md:hidden">
+        <SmallLayout steps={steps} />
+      </div>
+      <div className="hidden md:block">
+        <ScrollyLayout steps={steps} />
+      </div>
+    </>
+  )
+}
+
+function SmallLayout({
+  steps,
+}: {
+  steps: {
+    children?: React.ReactNode
+  }[]
+}) {
+  return (
+    <div className="flex flex-col gap-6">
+      {steps.map((step, i) => (
+        <div key={i}>
           <div
-            className="top-64 sticky h-96 flex-1 rounded bg-[url(/dark-grid.svg)] dark:bg-[#e6edff05] bg-black flex items-center justify-center"
+            className="h-96 w-[324px] max-w-full relative mx-auto bg-[url(/dark-grid.svg)] dark:bg-[#e6edff05] bg-black rounded"
             style={{
               backgroundPosition: "center",
               backgroundSize: "26px",
             }}
           >
-            <Selection
-              from={steps.map((step, i) => (
-                <Chart data={data[i]} />
-              ))}
-            />
+            <Chart data={data[i]} />
           </div>
+          {step.children}
         </div>
-        <div className="flex-1 min-w-0 flex flex-col">
-          {steps.map((step, i) => (
-            <Selectable
-              key={i}
-              index={i}
-              className="h-96 data-[selected=true]:opacity-100 opacity-20 transition-opacity snap-start scroll-mt-64 [&>:first-child]:mt-0 flex items-center"
-              selectOn={["scroll"]}
-            >
-              <div className="[&>:first-child]:mt-0 [&>:last-child]:mb-0">
-                {step.children}
-              </div>
-            </Selectable>
-          ))}
+      ))}
+    </div>
+  )
+}
+
+function ScrollyLayout({
+  steps,
+}: {
+  steps: {
+    children?: React.ReactNode
+  }[]
+}) {
+  return (
+    <SelectionProvider
+      className="hidden md:flex gap-6 relative mb-[max(calc(100vh-788px),64px)]"
+      rootMargin={{ top: 256 + 48 * 3, height: 48 }}
+    >
+      <div className="flex-1">
+        <div
+          className="top-64 sticky h-96 flex-1 rounded bg-[url(/dark-grid.svg)] dark:bg-[#e6edff05] bg-black flex items-center justify-center"
+          style={{
+            backgroundPosition: "center",
+            backgroundSize: "26px",
+          }}
+        >
+          <Selection
+            from={steps.map((step, i) => (
+              <Chart data={data[i]} />
+            ))}
+          />
         </div>
-      </SelectionProvider>
-    </>
+      </div>
+      <div className="flex-1 min-w-0 flex flex-col">
+        {steps.map((step, i) => (
+          <Selectable
+            key={i}
+            index={i}
+            className="h-96 data-[selected=true]:opacity-100 opacity-20 transition-opacity scroll-mt-64 [&>:first-child]:mt-0 flex items-center " // snap-start
+            selectOn={["scroll"]}
+          >
+            <div className="[&>:first-child]:mt-0 [&>:last-child]:mb-0 prose-h3:scroll-m-64">
+              {step.children}
+            </div>
+          </Selectable>
+        ))}
+      </div>
+    </SelectionProvider>
   )
 }
 
diff --git a/apps/web/public/blog/the-curse-of-markdown.png b/apps/web/public/blog/the-curse-of-markdown.png
new file mode 100644
index 00000000..73a56185
Binary files /dev/null and b/apps/web/public/blog/the-curse-of-markdown.png differ