diff --git a/src/app/story/[storylineId]/page.tsx b/src/app/story/[storylineId]/page.tsx
index c197937f..ddf81aec 100644
--- a/src/app/story/[storylineId]/page.tsx
+++ b/src/app/story/[storylineId]/page.tsx
@@ -263,128 +263,127 @@ function StoryHeader({
     : null;
 
   return (
-    <>
-      {/* Zone 1: Hero — Cover + Identity */}
-      <header className="border-border border-b pb-6">
-        <div className="flex flex-col sm:flex-row items-center sm:items-start gap-4">
-          {/* Moleskine book cover */}
-          <div className="shrink-0 w-[130px] sm:w-[160px]">
+    <header className="pb-6">
+      <div className="flex flex-row items-start gap-4">
+        {/* Moleskine book cover — left-aligned on all sizes */}
+        <div className="shrink-0 w-[100px] sm:w-[160px]">
+          <div
+            className="relative flex flex-col overflow-hidden border border-[var(--border)]"
+            style={{
+              aspectRatio: "2/3",
+              borderRadius: "5px 12px 12px 5px",
+              backgroundColor: "#F5EFE6",
+              boxShadow: "2px 4px 8px rgba(44, 24, 16, 0.08)",
+            }}
+          >
             <div
-              className="relative flex flex-col overflow-hidden border border-[var(--border)]"
-              style={{
-                aspectRatio: "2/3",
-                borderRadius: "5px 12px 12px 5px",
-                backgroundColor: "#F5EFE6",
-                boxShadow: "2px 4px 8px rgba(44, 24, 16, 0.08)",
-              }}
-            >
-              <div
-                className="pointer-events-none absolute inset-y-[-1px] right-[16px] z-20 w-[5px] rounded-[2px]"
-                style={{ background: "rgba(139, 69, 19, 0.15)" }}
-              />
-              <div className="relative z-10 px-2.5 pt-2.5">
-                <span className="rounded-sm bg-[var(--accent)]/10 px-1.5 py-0.5 text-[8px] font-semibold uppercase tracking-widest text-[var(--accent)]">
-                  {storyline.genre || "Uncategorized"}
-                </span>
-              </div>
-              <div className="relative z-10 flex flex-1 items-center justify-center px-3 text-center">
-                <span className="font-heading text-sm sm:text-base font-bold leading-tight text-[var(--accent)]">
-                  {storyline.title}
-                </span>
-              </div>
-              <div className="relative z-10 px-2.5 pb-2.5">
-                <span className="text-[8px] text-[var(--text-muted)]">
-                  {storyline.plot_count} {storyline.plot_count === 1 ? "plot" : "plots"}
-                </span>
-              </div>
+              className="pointer-events-none absolute inset-y-[-1px] right-[16px] z-20 w-[5px] rounded-[2px]"
+              style={{ background: "rgba(139, 69, 19, 0.15)" }}
+            />
+            <div className="relative z-10 px-2.5 pt-2.5">
+              <span className="rounded-sm bg-[var(--accent)]/10 px-1.5 py-0.5 text-[8px] font-semibold uppercase tracking-widest text-[var(--accent)]">
+                {storyline.genre || "Uncategorized"}
+              </span>
+            </div>
+            <div className="relative z-10 flex flex-1 items-center justify-center px-3 text-center">
+              <span className="font-heading text-sm sm:text-base font-bold leading-tight text-[var(--accent)]">
+                {storyline.title}
+              </span>
+            </div>
+            <div className="relative z-10 px-2.5 pb-2.5">
+              <span className="text-[8px] text-[var(--text-muted)]">
+                {storyline.plot_count} {storyline.plot_count === 1 ? "plot" : "plots"}
+              </span>
             </div>
           </div>
+        </div>
 
-          {/* Info panel */}
-          <div className="min-w-0 w-full sm:flex-1">
-            <h1 className="font-body text-2xl font-bold tracking-tight text-accent">
-              {storyline.title}
-            </h1>
-            <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted">
-              <RatingSummary storylineId={storyline.storyline_id} separator />
-              <ViewCount storylineId={storyline.storyline_id} initialCount={storyline.view_count} />
+        {/* Right column: info only */}
+        <div className="min-w-0 flex-1">
+          <h1 className="font-body text-xl sm:text-2xl font-bold tracking-tight text-accent">
+            {storyline.title}
+          </h1>
+          <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted">
+            <RatingSummary storylineId={storyline.storyline_id} separator />
+            <ViewCount storylineId={storyline.storyline_id} initialCount={storyline.view_count} />
+          </div>
+          <div className="mt-2 space-y-1 text-xs">
+            <div className="flex items-center gap-1.5">
+              <span className="text-muted w-12 shrink-0">Writer</span>
+              <Suspense fallback={<span className="text-foreground font-medium">{truncateAddress(storyline.writer_address)}</span>}>
+                <WriterIdentity address={storyline.writer_address} />
+              </Suspense>
+              {storyline.writer_type === 1 && <AgentBadge />}
             </div>
-            <div className="mt-3 space-y-1.5 text-xs">
-              <div className="flex items-center gap-1.5">
-                <span className="text-muted w-14 shrink-0">Writer</span>
-                <Suspense fallback={<span className="text-foreground font-medium">{truncateAddress(storyline.writer_address)}</span>}>
-                  <WriterIdentity address={storyline.writer_address} />
-                </Suspense>
-                {storyline.writer_type === 1 && <AgentBadge />}
-              </div>
-              <div className="flex items-center gap-1.5">
-                <span className="text-muted w-14 shrink-0">Genre</span>
-                <span className="text-foreground font-medium">
-                  {storyline.genre || "Uncategorized"}
-                  {storyline.language && storyline.language !== "English" && (
-                    <span className="text-muted ml-1.5">· {storyline.language}</span>
-                  )}
-                </span>
-              </div>
+            <div className="flex items-center gap-1.5">
+              <span className="text-muted w-12 shrink-0">Genre</span>
+              <span className="text-foreground font-medium">
+                {storyline.genre || "Uncategorized"}
+                {storyline.language && storyline.language !== "English" && (
+                  <span className="text-muted ml-1.5">· {storyline.language}</span>
+                )}
+              </span>
             </div>
           </div>
         </div>
-      </header>
+      </div>
 
-      {/* Zone 2: Stats Card + Action */}
+      {/* Stats grid — below cover+info on mobile, aligned with right column on desktop */}
       {priceInfo && (
-        <div className="border-border rounded border px-3 py-3 mt-4">
-          <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
-            {/* Row 1 */}
-            <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
-              <MarketCapBox
-                tokenAddress={storyline.token_address}
-                totalSupply={parseFloat(priceInfo.totalSupply)}
-                pricePerToken={parseFloat(priceInfo.pricePerToken)}
-              />
-            </div>
-            <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
-              <div className="text-foreground text-sm font-bold">{formatSupply(priceInfo.totalSupply)}</div>
-              <div className="text-muted text-[9px]">Supply Minted</div>
-            </div>
-            <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
-              {storyline.sunset ? (
-                <>
-                  <div className="text-foreground text-sm font-bold">{storyline.plot_count}</div>
-                  <div className="text-muted text-[9px]">Complete</div>
-                </>
-              ) : storyline.has_deadline && storyline.last_plot_time ? (
-                <>
-                  <div className="text-foreground text-sm font-bold leading-tight">
-                    <DeadlineCountdown lastPlotTime={storyline.last_plot_time} hideLabel valueClassName="text-foreground text-sm font-bold" />
-                  </div>
-                  <div className="text-muted text-[9px]">Deadline</div>
-                </>
-              ) : (
-                <>
-                  <div className="text-foreground text-sm font-bold">—</div>
-                  <div className="text-muted text-[9px]">Deadline</div>
-                </>
-              )}
-            </div>
-            {/* Row 2 */}
-            <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
-              <div className="text-foreground text-sm font-bold">{formatPrice(priceInfo.pricePerToken)} {RESERVE_LABEL}</div>
-              <div className="text-muted text-[9px]">Token Price</div>
-            </div>
-            <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
-              <div className="text-foreground text-sm font-bold">{storyline.plot_count}</div>
-              <div className="text-muted text-[9px]">{storyline.plot_count === 1 ? "Plot" : "Plots"}</div>
-            </div>
-            <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
-              <div className="text-foreground text-sm font-bold">{createdDate ?? "—"}</div>
-              <div className="text-muted text-[9px]">Created</div>
-            </div>
+        <div className="sm:pl-[176px]">
+          <div className="mt-3 grid grid-cols-2 sm:grid-cols-3 gap-1.5">
+              <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
+                <MarketCapBox
+                  tokenAddress={storyline.token_address}
+                  totalSupply={parseFloat(priceInfo.totalSupply)}
+                  pricePerToken={parseFloat(priceInfo.pricePerToken)}
+                />
+              </div>
+              <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
+                <div className="text-foreground text-sm font-bold">{formatSupply(priceInfo.totalSupply)}</div>
+                <div className="text-muted text-[9px]">Supply Minted</div>
+              </div>
+              <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
+                {storyline.sunset ? (
+                  <>
+                    <div className="text-foreground text-sm font-bold">{storyline.plot_count}</div>
+                    <div className="text-muted text-[9px]">Complete</div>
+                  </>
+                ) : storyline.has_deadline && storyline.last_plot_time ? (
+                  <>
+                    <div className="text-foreground text-sm font-bold leading-tight">
+                      <DeadlineCountdown lastPlotTime={storyline.last_plot_time} hideLabel valueClassName="text-foreground text-sm font-bold" />
+                    </div>
+                    <div className="text-muted text-[9px]">Deadline</div>
+                  </>
+                ) : (
+                  <>
+                    <div className="text-foreground text-sm font-bold">—</div>
+                    <div className="text-muted text-[9px]">Deadline</div>
+                  </>
+                )}
+              </div>
+              <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
+                <div className="text-foreground text-sm font-bold">{formatPrice(priceInfo.pricePerToken)} {RESERVE_LABEL}</div>
+                <div className="text-muted text-[9px]">Token Price</div>
+              </div>
+              <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
+                <div className="text-foreground text-sm font-bold">{storyline.plot_count}</div>
+                <div className="text-muted text-[9px]">{storyline.plot_count === 1 ? "Plot" : "Plots"}</div>
+              </div>
+              <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
+                <div className="text-foreground text-sm font-bold">{createdDate ?? "—"}</div>
+                <div className="text-muted text-[9px]">Created</div>
+              </div>
           </div>
         </div>
       )}
-      <AddPlotButton storylineId={storyline.storyline_id} writerAddress={storyline.writer_address} lastPlotTime={storyline.last_plot_time} sunset={storyline.sunset} hasDeadline={storyline.has_deadline} />
-    </>
+
+      {/* CTA — below stats, aligned with right column on desktop */}
+      <div className="sm:pl-[176px]">
+        <AddPlotButton storylineId={storyline.storyline_id} writerAddress={storyline.writer_address} lastPlotTime={storyline.last_plot_time} sunset={storyline.sunset} hasDeadline={storyline.has_deadline} />
+      </div>
+    </header>
   );
 }
 
diff --git a/src/components/AddPlotButton.tsx b/src/components/AddPlotButton.tsx
index 516bbb42..3465ab00 100644
--- a/src/components/AddPlotButton.tsx
+++ b/src/components/AddPlotButton.tsx
@@ -32,7 +32,7 @@ export function AddPlotButton({
   if (expired) {
     return (
       <div
-        className="border-border text-muted mt-3 block w-full rounded border py-2 text-center text-xs font-medium opacity-50"
+        className="border-border text-muted mt-3 inline-block rounded border px-6 py-2 text-center text-xs font-medium opacity-50"
         title={sunset ? "This story has sunset" : "The 7-day deadline has expired"}
       >
         {sunset ? "Story complete" : "Deadline expired"}
@@ -43,7 +43,7 @@ export function AddPlotButton({
   return (
     <Link
       href={`/create?tab=chain&storyline=${storylineId}`}
-      className="border-accent text-accent hover:bg-accent/10 mt-3 block w-full rounded border py-2 text-center text-xs font-medium transition-colors"
+      className="border-accent text-accent hover:bg-accent/10 mt-3 inline-block rounded border px-6 py-2 text-center text-xs font-medium transition-colors"
     >
       + Add a new Plot
     </Link>