From 26f685e9445df317716928b130006a617b688790 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Tue, 17 Mar 2026 17:25:06 +0000
Subject: [PATCH] =?UTF-8?q?[#277]=20Experimental=20UI=20overhaul=20?=
 =?UTF-8?q?=E2=80=94=20cyberpunk=20library=20design?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Book-cover style story cards with generative gradient backgrounds
derived from storyline IDs. Shelf-inspired home page layout with
featured story section. Immersive reading experience on story detail
pages with cover headers. Manuscript-style create page. Refined
navbar and footer. Applied visual language across dashboards.

New CSS: ambient glow effects, spine accents, reading-area typography,
generative pattern overlays, manuscript line backgrounds.

All changes purely visual — no logic modifications.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/create/page.tsx              | 100 ++++++++++-------
 src/app/dashboard/reader/page.tsx    |  10 +-
 src/app/dashboard/writer/page.tsx    |  10 +-
 src/app/globals.css                  | 128 +++++++++++++++++++++-
 src/app/layout.tsx                   |   2 +-
 src/app/page.tsx                     |  78 ++++++++++---
 src/app/story/[storylineId]/page.tsx | 158 +++++++++++++++++----------
 src/components/Footer.tsx            |  21 ++--
 src/components/NavBar.tsx            |  35 +++---
 src/components/StoryCard.tsx         | 136 ++++++++++++++++-------
 10 files changed, 497 insertions(+), 181 deletions(-)

diff --git a/src/app/create/page.tsx b/src/app/create/page.tsx
index 144af1ed..e1a4536b 100644
--- a/src/app/create/page.tsx
+++ b/src/app/create/page.tsx
@@ -57,10 +57,15 @@ export default function CreateStorylinePage() {
   if (!isConnected) {
     return (
       <div className="flex min-h-[calc(100vh-2.75rem)] flex-col items-center justify-center gap-4 px-6">
-        <p className="text-muted text-sm">
-          Connect your wallet to create a storyline.
-        </p>
-        <ConnectWallet />
+        <div className="glow-border rounded-lg border border-border px-8 py-10 text-center">
+          <p className="text-lg font-bold text-foreground">Begin your story</p>
+          <p className="mt-2 text-sm text-muted">
+            Connect your wallet to create a storyline.
+          </p>
+          <div className="mt-4">
+            <ConnectWallet />
+          </div>
+        </div>
       </div>
     );
   }
@@ -86,22 +91,29 @@ export default function CreateStorylinePage() {
 
     return (
       <div className="flex min-h-[calc(100vh-2.75rem)] flex-col items-center justify-center gap-6 px-6">
-        <h1 className="text-accent text-2xl font-bold">Storyline created!</h1>
-        <div className="flex gap-3">
-          {newStorylineId != null && (
+        <div className="glow-border rounded-lg border border-border px-8 py-10 text-center">
+          <h1 className="text-2xl font-bold text-accent">
+            Storyline created!
+          </h1>
+          <p className="mt-2 text-sm text-muted">
+            Your story is now live on-chain.
+          </p>
+          <div className="mt-6 flex justify-center gap-3">
+            {newStorylineId != null && (
+              <Link
+                href={`/story/${newStorylineId}`}
+                className="border-accent text-accent hover:bg-accent hover:text-background rounded border px-4 py-2 text-sm transition-colors"
+              >
+                View your story
+              </Link>
+            )}
             <Link
-              href={`/story/${newStorylineId}`}
-              className="border-accent text-accent hover:bg-accent hover:text-background rounded border px-4 py-2 text-sm transition-colors"
+              href="/"
+              className="border-border text-muted hover:text-foreground rounded border px-4 py-2 text-sm transition-colors"
             >
-              View your story
+              Go home
             </Link>
-          )}
-          <Link
-            href="/"
-            className="border-border text-muted hover:text-foreground rounded border px-4 py-2 text-sm transition-colors"
-          >
-            Go home
-          </Link>
+          </div>
         </div>
       </div>
     );
@@ -110,10 +122,16 @@ export default function CreateStorylinePage() {
   const busy = state !== "idle" && state !== "error";
 
   return (
-    <div className="mx-auto max-w-2xl px-6 py-12">
-      <h1 className="text-accent text-2xl font-bold tracking-tight">
-        Create Storyline
-      </h1>
+    <div className="animate-in mx-auto max-w-2xl px-6 py-12">
+      {/* Manuscript header */}
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold tracking-tight text-foreground">
+          <span className="text-accent">New</span> Storyline
+        </h1>
+        <p className="mt-1 text-xs text-muted">
+          Open a fresh manuscript. Your words become tokens.
+        </p>
+      </div>
 
       <form
         onSubmit={(e) => {
@@ -133,25 +151,25 @@ export default function CreateStorylinePage() {
               metadata: { genre, language },
             });
         }}
-        className="mt-8 space-y-6"
+        className="space-y-6"
       >
-        {/* Title */}
+        {/* Title — large, prominent */}
         <div>
-          <label className="text-foreground mb-2 block text-sm">Title</label>
+          <label className="mb-2 block text-sm text-foreground">Title</label>
           <input
             type="text"
             value={title}
             onChange={(e) => setTitle(e.target.value)}
             disabled={busy}
-            placeholder="Enter storyline title"
-            className="border-border bg-surface text-foreground placeholder:text-muted w-full rounded border px-3 py-2 text-sm focus:border-accent focus:outline-none disabled:opacity-50"
+            placeholder="The title of your story..."
+            className="w-full rounded border border-border bg-surface px-4 py-3 text-lg font-bold text-foreground placeholder:font-normal placeholder:text-muted/50 focus:border-accent-dim focus:outline-none disabled:opacity-50"
           />
         </div>
 
         {/* Genre + Language */}
         <div className="grid grid-cols-2 gap-4">
           <div>
-            <label className="text-foreground mb-2 block text-sm">Genre</label>
+            <label className="mb-2 block text-sm text-foreground">Genre</label>
             <DropdownSelect
               value={genre}
               onChange={setGenre}
@@ -161,7 +179,9 @@ export default function CreateStorylinePage() {
             />
           </div>
           <div>
-            <label className="text-foreground mb-2 block text-sm">Language</label>
+            <label className="mb-2 block text-sm text-foreground">
+              Language
+            </label>
             <DropdownSelect
               value={language}
               onChange={setLanguage}
@@ -171,18 +191,18 @@ export default function CreateStorylinePage() {
           </div>
         </div>
 
-        {/* Content */}
+        {/* Content — manuscript style */}
         <div>
-          <label className="text-foreground mb-2 block text-sm">
+          <label className="mb-2 block text-sm text-foreground">
             Opening Chapter
           </label>
           <textarea
             value={content}
             onChange={(e) => setContent(e.target.value)}
             disabled={busy}
-            rows={12}
-            placeholder="Write the genesis plot (500–10,000 characters)"
-            className="border-border bg-surface text-foreground placeholder:text-muted w-full resize-y rounded border px-3 py-2 text-sm leading-relaxed focus:border-accent focus:outline-none disabled:opacity-50"
+            rows={16}
+            placeholder="Begin your genesis plot..."
+            className="manuscript-lines w-full resize-y rounded border border-border bg-surface px-4 py-3 text-sm leading-[1.85] text-foreground placeholder:text-muted/50 focus:border-accent-dim focus:outline-none disabled:opacity-50"
           />
           <div className="mt-1 flex justify-between text-xs">
             <span
@@ -190,25 +210,27 @@ export default function CreateStorylinePage() {
                 content.length > 0 && !valid ? "text-error" : "text-muted"
               }
             >
-              {charCount.toLocaleString()} / {MIN_CONTENT_LENGTH.toLocaleString()}–
+              {charCount.toLocaleString()} / {MIN_CONTENT_LENGTH.toLocaleString()}
+              &ndash;
               {MAX_CONTENT_LENGTH.toLocaleString()} chars
             </span>
           </div>
         </div>
 
         {/* Deadline info */}
-        <p className="text-muted text-xs">
-          All storylines have a 7-day deadline — the story sunsets if no new plot is added within 7 days.
+        <p className="text-xs text-muted">
+          All storylines have a 7-day deadline — the story sunsets if no new
+          plot is added within 7 days.
         </p>
 
         {/* Status */}
         {state === "error" && (
-          <div className="border-error/30 text-error rounded border px-3 py-2 text-xs">
+          <div className="rounded border border-error/30 px-3 py-2 text-xs text-error">
             {error}
           </div>
         )}
         {busy && (
-          <div className="border-border text-muted rounded border px-3 py-2 text-xs">
+          <div className="glow-border rounded border border-border px-3 py-2 text-xs text-muted">
             {STATE_LABELS[state]}
           </div>
         )}
@@ -217,7 +239,7 @@ export default function CreateStorylinePage() {
         <button
           type="submit"
           disabled={!canSubmit || busy}
-          className="border-accent text-accent hover:bg-accent hover:text-background w-full rounded border py-2.5 text-sm font-medium transition-colors disabled:opacity-50"
+          className="w-full rounded border border-accent py-3 text-sm font-medium text-accent transition-colors hover:bg-accent hover:text-background disabled:opacity-50"
         >
           {busy ? STATE_LABELS[state] : "Publish Storyline"}
         </button>
diff --git a/src/app/dashboard/reader/page.tsx b/src/app/dashboard/reader/page.tsx
index 30f80326..f6414721 100644
--- a/src/app/dashboard/reader/page.tsx
+++ b/src/app/dashboard/reader/page.tsx
@@ -97,11 +97,11 @@ export default function ReaderDashboard() {
   const hasPrev = page > 0;
 
   return (
-    <div className="mx-auto max-w-2xl px-6 py-12">
-      <h1 className="text-accent text-2xl font-bold tracking-tight">
-        Reader Dashboard
+    <div className="animate-in mx-auto max-w-3xl px-4 py-12 sm:px-6">
+      <h1 className="text-2xl font-bold tracking-tight text-foreground">
+        <span className="text-accent">Reader</span> Dashboard
       </h1>
-      <p className="text-muted mt-2 text-sm">
+      <p className="mt-2 text-sm text-muted">
         <WriterIdentityClient address={address!} />
       </p>
 
@@ -169,7 +169,7 @@ export default function ReaderDashboard() {
 
 function DonationRow({ donation, decimals }: { donation: Donation; decimals: number }) {
   return (
-    <div className="border-border flex items-center justify-between rounded border px-3 py-2 text-xs">
+    <div className="flex items-center justify-between rounded-lg border border-border px-3 py-2.5 text-xs transition-colors hover:border-border-subtle">
       <div className="text-muted flex gap-3">
         <span>
           Story #{donation.storyline_id}
diff --git a/src/app/dashboard/writer/page.tsx b/src/app/dashboard/writer/page.tsx
index 1cbdf2ec..b29de15f 100644
--- a/src/app/dashboard/writer/page.tsx
+++ b/src/app/dashboard/writer/page.tsx
@@ -59,11 +59,11 @@ export default function WriterDashboard() {
   }
 
   return (
-    <div className="mx-auto max-w-2xl px-6 py-12">
-      <h1 className="text-accent text-2xl font-bold tracking-tight">
-        Writer Dashboard
+    <div className="animate-in mx-auto max-w-3xl px-4 py-12 sm:px-6">
+      <h1 className="text-2xl font-bold tracking-tight text-foreground">
+        <span className="text-accent">Writer</span> Dashboard
       </h1>
-      <p className="text-muted mt-2 text-sm">
+      <p className="mt-2 text-sm text-muted">
         <WriterIdentityClient address={address!} />
         {" — "}
         {storylines.length}{" "}
@@ -94,7 +94,7 @@ export default function WriterDashboard() {
 
 function StorylineDetail({ storyline, writerAddress }: { storyline: Storyline; writerAddress: Address }) {
   return (
-    <div className="border-border rounded border px-4 py-4">
+    <div className="glow-border rounded-lg border border-border px-4 py-4">
       <div className="flex items-start justify-between gap-3">
         <Link
           href={`/story/${storyline.storyline_id}`}
diff --git a/src/app/globals.css b/src/app/globals.css
index bf7a84b0..3e755040 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,22 +3,31 @@
 :root {
   --bg: #0a0a0a;
   --bg-surface: #111111;
+  --bg-surface-2: #161616;
   --text: #e0e0e0;
   --text-muted: #737373;
   --accent: #00ff88;
   --accent-dim: #00cc6a;
-  --border: #2a2a2a;
+  --accent-glow: rgba(0, 255, 136, 0.08);
+  --border: #1e1e1e;
+  --border-subtle: #181818;
   --error: #ff4444;
+  --glow-sm: 0 0 20px rgba(0, 255, 136, 0.06);
+  --glow-md: 0 0 40px rgba(0, 255, 136, 0.08);
+  --glow-lg: 0 0 80px rgba(0, 255, 136, 0.1);
 }
 
 @theme inline {
   --color-background: var(--bg);
   --color-foreground: var(--text);
   --color-surface: var(--bg-surface);
+  --color-surface-2: var(--bg-surface-2);
   --color-muted: var(--text-muted);
   --color-accent: var(--accent);
   --color-accent-dim: var(--accent-dim);
+  --color-accent-glow: var(--accent-glow);
   --color-border: var(--border);
+  --color-border-subtle: var(--border-subtle);
   --color-error: var(--error);
   --font-mono: var(--font-geist-mono);
 }
@@ -46,3 +55,120 @@ select {
   padding-right: 2.5rem;
 }
 
+/* ─── Shelf section ─── */
+.shelf-row {
+  display: flex;
+  gap: 1rem;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  padding-bottom: 0.5rem;
+}
+.shelf-row::-webkit-scrollbar {
+  display: none;
+}
+.shelf-row > * {
+  scroll-snap-align: start;
+  flex-shrink: 0;
+}
+
+/* ─── Book cover card ─── */
+.book-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  border-radius: 4px;
+  overflow: hidden;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.book-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--glow-md);
+}
+.book-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  opacity: 0.5;
+  z-index: 0;
+  transition: opacity 0.2s ease;
+}
+.book-card:hover::before {
+  opacity: 0.65;
+}
+.book-card > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* ─── Spine edge effect ─── */
+.book-spine {
+  position: relative;
+}
+.book-spine::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: linear-gradient(
+    180deg,
+    var(--accent) 0%,
+    var(--accent-dim) 50%,
+    transparent 100%
+  );
+  opacity: 0.4;
+  border-radius: 4px 0 0 4px;
+}
+
+/* ─── Ambient glow for featured items ─── */
+.glow-border {
+  box-shadow: var(--glow-sm);
+  border-color: rgba(0, 255, 136, 0.15);
+}
+.glow-border:hover {
+  box-shadow: var(--glow-md);
+  border-color: rgba(0, 255, 136, 0.25);
+}
+
+/* ─── Reading area ─── */
+.reading-area {
+  font-size: 0.9375rem;
+  line-height: 1.85;
+  letter-spacing: 0.01em;
+  color: var(--text);
+}
+.reading-area::first-line {
+  font-variant: small-caps;
+  letter-spacing: 0.05em;
+}
+
+/* ─── Generative pattern overlay ─── */
+.gen-pattern {
+  background-image:
+    radial-gradient(circle at 20% 80%, var(--accent-glow) 0%, transparent 50%),
+    radial-gradient(circle at 80% 20%, rgba(0, 200, 106, 0.04) 0%, transparent 50%);
+}
+
+/* ─── Page transition ─── */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-in {
+  animation: fadeIn 0.3s ease-out;
+}
+
+/* ─── Manuscript lines (create page) ─── */
+.manuscript-lines {
+  background-image: repeating-linear-gradient(
+    transparent,
+    transparent 1.85rem,
+    rgba(42, 42, 42, 0.3) 1.85rem,
+    rgba(42, 42, 42, 0.3) calc(1.85rem + 1px)
+  );
+  background-position: 0 0.25rem;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 0d069239..1afa27f7 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -27,7 +27,7 @@ export default function RootLayout({
         <Providers>
           <FarcasterMiniApp />
           <NavBar />
-          <div className="pt-11 min-h-screen">{children}</div>
+          <div className="pt-12 min-h-screen">{children}</div>
           <Footer />
         </Providers>
       </body>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9e38be24..bee93f83 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -56,18 +56,36 @@ export default async function Home({
     }
   }
 
-  const extraParams = writer !== "all" ? { writer } : undefined;
+  // Split first storyline as featured (only on first page, "new" or "trending" tab)
+  const showFeatured = page === 1 && (tab === "new" || tab === "trending") && storylines.length > 0;
+  const featured = showFeatured ? storylines[0] : null;
+  const rest = showFeatured ? storylines.slice(1) : storylines;
 
   return (
-    <div className="mx-auto max-w-5xl px-6 py-10">
-      {/* Compact hero */}
-      <header className="mb-8">
-        <h1 className="text-accent text-xl font-bold tracking-tight">
+    <div className="animate-in mx-auto max-w-6xl px-4 py-10 sm:px-6">
+      {/* Hero */}
+      <header className="mb-10 gen-pattern rounded-lg px-6 py-8">
+        <h1 className="text-accent text-2xl font-bold tracking-tight sm:text-3xl">
           PlotLink
         </h1>
-        <p className="text-muted mt-1 text-sm">
-          Your story is a token. Every plot you publish drives the market — and every trade pays you. Write more, earn more.
+        <p className="text-muted mt-2 max-w-lg text-sm leading-relaxed">
+          Your story is a token. Every plot you publish drives the market — and
+          every trade pays you. Write more, earn more.
         </p>
+        <div className="mt-4 flex gap-3">
+          <Link
+            href="/create"
+            className="border-accent text-accent hover:bg-accent hover:text-background rounded border px-4 py-1.5 text-xs font-medium transition-colors"
+          >
+            start writing
+          </Link>
+          <Link
+            href="/discover"
+            className="border-border text-muted hover:text-foreground rounded border px-4 py-1.5 text-xs transition-colors"
+          >
+            discover stories
+          </Link>
+        </div>
       </header>
 
       {/* Filter bar */}
@@ -80,20 +98,48 @@ export default async function Home({
         <SortDropdown active={tab} writer={writer} basePath="/" />
       </div>
 
-      {/* Story grid */}
-      <div className="mt-6 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
-        {storylines.map((s) => (
-          <StoryCard key={s.id} storyline={s} preview={previews[s.storyline_id]} />
+      {/* Featured + grid shelf */}
+      {featured && (
+        <section className="mt-8">
+          <div className="grid grid-cols-1 gap-4 lg:grid-cols-[1fr_1fr_1fr]">
+            {/* Featured card — spans the left side */}
+            <div className="lg:row-span-2">
+              <StoryCard
+                storyline={featured}
+                preview={previews[featured.storyline_id]}
+                featured
+              />
+            </div>
+            {/* Next stories fill the remaining grid */}
+            {rest.slice(0, 4).map((s) => (
+              <StoryCard
+                key={s.id}
+                storyline={s}
+                preview={previews[s.storyline_id]}
+              />
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* Main story grid — book-cover layout */}
+      <div className="mt-8 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
+        {(featured ? rest.slice(4) : rest).map((s) => (
+          <StoryCard
+            key={s.id}
+            storyline={s}
+            preview={previews[s.storyline_id]}
+          />
         ))}
       </div>
 
       {/* Pagination */}
       {(page > 1 || storylines.length === PAGE_SIZE) && (
-        <div className="mt-8 flex items-center justify-center gap-4">
+        <div className="mt-10 flex items-center justify-center gap-4">
           {page > 1 && (
             <Link
               href={buildPageHref(tab, writer, page - 1)}
-              className="border-border text-muted hover:text-foreground rounded border px-4 py-2 text-xs transition-colors"
+              className="border-border text-muted hover:text-foreground hover:border-accent-dim rounded border px-4 py-2 text-xs transition-colors"
             >
               &larr; Previous
             </Link>
@@ -102,7 +148,7 @@ export default async function Home({
           {storylines.length === PAGE_SIZE && (
             <Link
               href={buildPageHref(tab, writer, page + 1)}
-              className="border-border text-muted hover:text-foreground rounded border px-4 py-2 text-xs transition-colors"
+              className="border-border text-muted hover:text-foreground hover:border-accent-dim rounded border px-4 py-2 text-xs transition-colors"
             >
               Next &rarr;
             </Link>
@@ -111,8 +157,8 @@ export default async function Home({
       )}
 
       {storylines.length === 0 && (
-        <section className="flex flex-col items-center gap-4 py-16 text-center">
-          <div className="border-border text-muted rounded border px-4 py-3 text-xs">
+        <section className="flex flex-col items-center gap-4 py-20 text-center">
+          <div className="glow-border rounded border border-border px-5 py-4 text-xs text-muted">
             <span className="text-accent-dim">$</span> no storylines found
           </div>
           <p className="text-muted text-sm">
diff --git a/src/app/story/[storylineId]/page.tsx b/src/app/story/[storylineId]/page.tsx
index 6e4dfca7..fd20f7d0 100644
--- a/src/app/story/[storylineId]/page.tsx
+++ b/src/app/story/[storylineId]/page.tsx
@@ -22,6 +22,24 @@ type Params = Promise<{ storylineId: string }>;
 
 const appUrl = process.env.NEXT_PUBLIC_APP_URL ?? "http://localhost:3000";
 
+/**
+ * Generate a cover gradient from storyline ID (same logic as StoryCard).
+ */
+function generateCoverGradient(id: number): string {
+  const h1 = (id * 137) % 360;
+  const h2 = (id * 251 + 97) % 360;
+  const h3 = (id * 83 + 199) % 360;
+  const angle = (id * 53) % 180;
+  const x = (id * 31) % 80 + 10;
+  const y = (id * 67) % 80 + 10;
+
+  return `
+    radial-gradient(ellipse at ${x}% ${y}%, hsla(${h1}, 60%, 20%, 0.7) 0%, transparent 60%),
+    radial-gradient(ellipse at ${100 - x}% ${100 - y}%, hsla(${h2}, 50%, 15%, 0.5) 0%, transparent 50%),
+    linear-gradient(${angle}deg, hsla(${h3}, 40%, 8%, 1) 0%, hsla(${h1}, 30%, 5%, 1) 100%)
+  `;
+}
+
 export async function generateMetadata({
   params,
 }: {
@@ -130,12 +148,14 @@ export default async function StoryPage({ params }: { params: Params }) {
     : null;
 
   return (
-    <div className="mx-auto max-w-5xl px-6 py-10">
+    <div className="animate-in mx-auto max-w-5xl px-4 py-10 sm:px-6">
       <ViewTracker storylineId={id} />
-      <StoryHeader storyline={storyline} priceInfo={priceInfo} />
+
+      {/* Cover header with generative background */}
+      <StoryHeader storyline={sl} priceInfo={priceInfo} />
 
       <div className="mt-8 grid grid-cols-1 gap-10 lg:grid-cols-[1fr_320px]">
-        {/* Story content — genesis + table of contents */}
+        {/* Story content — immersive reading area */}
         <main>
           {genesis ? (
             <>
@@ -147,10 +167,7 @@ export default async function StoryPage({ params }: { params: Params }) {
           )}
 
           {chapters.length > 0 && (
-            <TableOfContents
-              storylineId={id}
-              chapters={chapters}
-            />
+            <TableOfContents storylineId={id} chapters={chapters} />
           )}
         </main>
 
@@ -185,41 +202,69 @@ function StoryHeader({
   priceInfo: TokenPriceInfo | null;
 }) {
   const reserveLabel = RESERVE_LABEL;
+  const coverGradient = generateCoverGradient(storyline.storyline_id);
 
   return (
-    <header className="border-border border-b pb-6">
-      <h1 className="text-accent text-2xl font-bold tracking-tight">
-        {storyline.title}
-      </h1>
-      <div className="text-muted mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs">
-        <span>
-          by{" "}
-          <Suspense fallback={<span className="text-foreground">{truncateAddress(storyline.writer_address)}</span>}>
-            <WriterIdentity address={storyline.writer_address} />
-          </Suspense>
-        </span>
-        <span>
-          {storyline.plot_count} {storyline.plot_count === 1 ? "plot" : "plots"}
-        </span>
-        <ViewCount storylineId={storyline.storyline_id} initialCount={storyline.view_count} />
-        {storyline.genre && (
-          <span className="border-border rounded border px-1.5 py-0.5 text-[10px]">
-            {storyline.genre}
+    <header className="relative overflow-hidden rounded-lg border border-border-subtle">
+      {/* Generative cover background */}
+      <div
+        className="px-6 pb-6 pt-10 sm:px-8 sm:pt-14"
+        style={{ background: coverGradient }}
+      >
+        {/* Genre + status badges */}
+        <div className="mb-4 flex flex-wrap gap-2">
+          {storyline.genre && (
+            <span className="rounded bg-black/40 px-2 py-0.5 text-[10px] text-muted backdrop-blur-sm">
+              {storyline.genre}
+            </span>
+          )}
+          {storyline.language && storyline.language !== "English" && (
+            <span className="rounded bg-black/40 px-2 py-0.5 text-[10px] text-muted backdrop-blur-sm">
+              {storyline.language}
+            </span>
+          )}
+          {storyline.sunset && (
+            <span className="rounded bg-black/40 px-2 py-0.5 text-[10px] text-accent-dim backdrop-blur-sm">
+              complete
+            </span>
+          )}
+        </div>
+
+        <h1 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
+          {storyline.title}
+        </h1>
+
+        <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted">
+          <span>
+            by{" "}
+            <Suspense
+              fallback={
+                <span className="text-foreground">
+                  {truncateAddress(storyline.writer_address)}
+                </span>
+              }
+            >
+              <WriterIdentity address={storyline.writer_address} />
+            </Suspense>
           </span>
-        )}
-        {storyline.language && storyline.language !== "English" && (
-          <span className="border-border rounded border px-1.5 py-0.5 text-[10px]">
-            {storyline.language}
+          <span>
+            {storyline.plot_count}{" "}
+            {storyline.plot_count === 1 ? "plot" : "plots"}
           </span>
-        )}
-        {storyline.writer_type === 1 && <AgentBadge />}
-        <RatingSummary storylineId={storyline.storyline_id} />
+          <ViewCount
+            storylineId={storyline.storyline_id}
+            initialCount={storyline.view_count}
+          />
+          {storyline.writer_type === 1 && <AgentBadge />}
+          <RatingSummary storylineId={storyline.storyline_id} />
+        </div>
       </div>
 
+      {/* Price info bar */}
       {priceInfo && (
-        <div className="border-border bg-surface mt-4 grid grid-cols-2 gap-2 rounded border px-3 py-2 text-xs">
+        <div className="grid grid-cols-2 gap-2 border-t border-border-subtle bg-surface px-6 py-3 text-xs sm:px-8">
           <div>
-            <span className="text-muted block text-[10px] uppercase tracking-wider">
+            <span className="block text-[10px] uppercase tracking-wider text-muted">
               Token Price
             </span>
             <span className="text-foreground">
@@ -227,7 +272,7 @@ function StoryHeader({
             </span>
           </div>
           <div>
-            <span className="text-muted block text-[10px] uppercase tracking-wider">
+            <span className="block text-[10px] uppercase tracking-wider text-muted">
               Supply Minted
             </span>
             <span className="text-foreground">
@@ -236,15 +281,20 @@ function StoryHeader({
           </div>
         </div>
       )}
+
+      {/* Deadline / completion */}
       {storyline.sunset ? (
-        <div className="border-border bg-surface mt-4 rounded border px-3 py-2 text-xs">
+        <div className="border-t border-border-subtle bg-surface px-6 py-2 text-xs sm:px-8">
           <span className="text-muted">Story complete</span>
-          <span className="text-foreground ml-2">
-            {storyline.plot_count} {storyline.plot_count === 1 ? "plot" : "plots"} total
+          <span className="ml-2 text-foreground">
+            {storyline.plot_count}{" "}
+            {storyline.plot_count === 1 ? "plot" : "plots"} total
           </span>
         </div>
       ) : storyline.last_plot_time ? (
-        <DeadlineCountdown lastPlotTime={storyline.last_plot_time} />
+        <div className="border-t border-border-subtle px-6 sm:px-8">
+          <DeadlineCountdown lastPlotTime={storyline.last_plot_time} />
+        </div>
       ) : null}
     </header>
   );
@@ -254,8 +304,8 @@ function GenesisSection({ plot }: { plot: Plot }) {
   return (
     <section>
       <ViewTracker storylineId={plot.storyline_id} plotIndex={0} />
-      <div className="text-muted mb-3 flex items-baseline gap-3 text-xs">
-        <span className="text-accent-dim font-medium">Genesis</span>
+      <div className="mb-4 flex items-baseline gap-3 text-xs text-muted">
+        <span className="font-medium text-accent-dim">Genesis</span>
         {plot.block_timestamp && (
           <time dateTime={plot.block_timestamp}>
             {new Date(plot.block_timestamp).toLocaleDateString("en-US", {
@@ -267,11 +317,9 @@ function GenesisSection({ plot }: { plot: Plot }) {
         )}
       </div>
       {plot.content ? (
-        <div className="text-foreground whitespace-pre-wrap text-sm leading-relaxed">
-          {plot.content}
-        </div>
+        <div className="reading-area whitespace-pre-wrap">{plot.content}</div>
       ) : (
-        <p className="text-muted text-sm italic">
+        <p className="text-sm italic text-muted">
           Content unavailable (CID: {plot.content_cid})
         </p>
       )}
@@ -287,11 +335,11 @@ function TableOfContents({
   chapters: Plot[];
 }) {
   return (
-    <section className="mt-10">
-      <h2 className="text-foreground mb-4 text-sm font-semibold uppercase tracking-wider">
+    <section className="mt-12">
+      <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-foreground">
         Chapters
       </h2>
-      <div className="divide-border divide-y">
+      <div className="divide-y divide-border-subtle">
         {chapters.map((ch) => {
           const chapterTitle = ch.title || `Chapter ${ch.plot_index}`;
           const preview = ch.content ? ch.content.slice(0, 100) : "";
@@ -306,22 +354,20 @@ function TableOfContents({
             <Link
               key={ch.id}
               href={`/story/${storylineId}/${ch.plot_index}`}
-              className="hover:bg-surface/50 flex items-start justify-between gap-4 py-3 transition-colors"
+              className="book-spine group flex items-start justify-between gap-4 py-3.5 pl-4 transition-colors hover:bg-surface/50"
             >
               <div className="min-w-0 flex-1">
-                <div className="text-foreground text-sm font-medium">
+                <div className="text-sm font-medium text-foreground group-hover:text-accent transition-colors">
                   {chapterTitle}
                 </div>
                 {preview && (
-                  <p className="text-muted mt-0.5 truncate text-xs">
+                  <p className="mt-0.5 truncate text-xs text-muted">
                     {preview}
-                    {ch.content && ch.content.length > 100 ? "…" : ""}
+                    {ch.content && ch.content.length > 100 ? "..." : ""}
                   </p>
                 )}
               </div>
-              <div className="text-muted shrink-0 text-xs">
-                {dateStr}
-              </div>
+              <div className="shrink-0 text-xs text-muted">{dateStr}</div>
             </Link>
           );
         })}
@@ -333,7 +379,7 @@ function TableOfContents({
 function NotFound({ message }: { message: string }) {
   return (
     <div className="flex min-h-[calc(100vh-2.75rem)] flex-col items-center justify-center px-6">
-      <p className="text-muted text-sm">{message}</p>
+      <p className="text-sm text-muted">{message}</p>
     </div>
   );
 }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 41725850..e99f26e2 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -2,21 +2,27 @@ import Link from "next/link";
 
 export function Footer() {
   return (
-    <footer className="border-t border-[var(--border)] bg-[var(--bg)] px-4 py-6 mt-16">
-      <div className="mx-auto max-w-5xl flex flex-col gap-4 text-xs">
+    <footer className="mt-16 border-t border-[var(--border)] bg-[var(--bg)] px-4 py-8">
+      <div className="mx-auto flex max-w-6xl flex-col gap-4 text-xs">
         <div className="flex flex-wrap items-center justify-between gap-4">
           <div className="flex items-center gap-4 text-muted">
-            <Link href="/" className="hover:text-foreground transition-colors">
+            <Link
+              href="/"
+              className="transition-colors hover:text-foreground"
+            >
               stories
             </Link>
-            <Link href="/create" className="hover:text-foreground transition-colors">
+            <Link
+              href="/create"
+              className="transition-colors hover:text-foreground"
+            >
               create
             </Link>
             <a
               href="https://github.com/realproject7/plotlink"
               target="_blank"
               rel="noopener noreferrer"
-              className="hover:text-foreground transition-colors"
+              className="transition-colors hover:text-foreground"
             >
               github
             </a>
@@ -25,8 +31,9 @@ export function Footer() {
             built on <span className="text-accent-dim">Base</span>
           </span>
         </div>
-        <div className="text-neutral-400 text-xs">
-          <span className="text-accent-dim">$</span> PlotLink &copy; {new Date().getFullYear()}
+        <div className="text-xs text-neutral-500">
+          <span className="text-accent-dim">$</span> PlotLink &copy;{" "}
+          {new Date().getFullYear()}
         </div>
       </div>
     </footer>
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 52674a05..27189bcc 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -17,32 +17,38 @@ export function NavBar() {
   const [mobileOpen, setMobileOpen] = useState(false);
 
   return (
-    <nav className="fixed top-0 right-0 left-0 z-50 border-b border-[var(--border)] bg-[var(--bg)]/95 backdrop-blur-sm">
-      <div className="mx-auto flex h-11 max-w-5xl items-center justify-between px-4">
+    <nav className="fixed top-0 right-0 left-0 z-50 border-b border-[var(--border)] bg-[var(--bg)]/95 backdrop-blur-md">
+      <div className="mx-auto flex h-12 max-w-6xl items-center justify-between px-4">
         {/* Logo */}
         <Link
           href="/"
-          className="text-accent text-sm font-bold tracking-tight transition-opacity hover:opacity-80"
+          className="group flex items-center gap-1.5 transition-opacity hover:opacity-80"
         >
-          <span className="text-muted mr-1 font-normal">$</span>
-          PlotLink
+          <span className="text-accent text-sm font-bold tracking-tight">
+            PlotLink
+          </span>
+          <span className="hidden text-[10px] text-muted sm:inline">
+            on-chain stories
+          </span>
         </Link>
 
         {/* Desktop nav links */}
-        <div className="hidden items-center gap-1 md:flex">
+        <div className="hidden items-center gap-0.5 md:flex">
           {NAV_LINKS.map(({ href, label }) => {
             const active = pathname === href || pathname.startsWith(href + "/");
             return (
               <Link
                 key={href}
                 href={href}
-                className={`rounded px-2.5 py-1 text-xs transition-colors ${
+                className={`rounded px-3 py-1.5 text-xs transition-colors ${
                   active
-                    ? "bg-[var(--accent)]/10 text-accent"
+                    ? "bg-accent-glow text-accent"
                     : "text-muted hover:text-foreground"
                 }`}
               >
-                {active && <span className="text-accent-dim mr-0.5">&gt;</span>}
+                {active && (
+                  <span className="mr-0.5 text-accent-dim">&gt;</span>
+                )}
                 {label}
               </Link>
             );
@@ -70,19 +76,22 @@ export function NavBar() {
         <div className="border-t border-[var(--border)] bg-[var(--bg)] px-4 pb-3 pt-2 md:hidden">
           <div className="flex flex-col gap-1">
             {NAV_LINKS.map(({ href, label }) => {
-              const active = pathname === href || pathname.startsWith(href + "/");
+              const active =
+                pathname === href || pathname.startsWith(href + "/");
               return (
                 <Link
                   key={href}
                   href={href}
                   onClick={() => setMobileOpen(false)}
-                  className={`rounded px-2.5 py-1.5 text-xs transition-colors ${
+                  className={`rounded px-2.5 py-2 text-xs transition-colors ${
                     active
-                      ? "bg-[var(--accent)]/10 text-accent"
+                      ? "bg-accent-glow text-accent"
                       : "text-muted hover:text-foreground"
                   }`}
                 >
-                  {active && <span className="text-accent-dim mr-0.5">&gt;</span>}
+                  {active && (
+                    <span className="text-accent-dim mr-0.5">&gt;</span>
+                  )}
                   {label}
                 </Link>
               );
diff --git a/src/components/StoryCard.tsx b/src/components/StoryCard.tsx
index 92ffcd93..6f985d53 100644
--- a/src/components/StoryCard.tsx
+++ b/src/components/StoryCard.tsx
@@ -6,14 +6,37 @@ import { RatingSummary } from "./RatingSummary";
 import { StoryCardStats } from "./StoryCardStats";
 import { ViewCount } from "./ViewCount";
 
+/**
+ * Generate a unique gradient background from a storyline_id.
+ * Uses simple hashing to produce deterministic, visually distinct covers.
+ */
+function generateCoverStyle(id: number): React.CSSProperties {
+  const h1 = ((id * 137) % 360);
+  const h2 = ((id * 251 + 97) % 360);
+  const h3 = ((id * 83 + 199) % 360);
+  const angle = ((id * 53) % 180);
+  const x = ((id * 31) % 80) + 10;
+  const y = ((id * 67) % 80) + 10;
+
+  return {
+    background: `
+      radial-gradient(ellipse at ${x}% ${y}%, hsla(${h1}, 60%, 20%, 0.7) 0%, transparent 60%),
+      radial-gradient(ellipse at ${100 - x}% ${100 - y}%, hsla(${h2}, 50%, 15%, 0.5) 0%, transparent 50%),
+      linear-gradient(${angle}deg, hsla(${h3}, 40%, 8%, 1) 0%, hsla(${h1}, 30%, 5%, 1) 100%)
+    `,
+  };
+}
+
 export function StoryCard({
   storyline,
   genre,
   preview,
+  featured = false,
 }: {
   storyline: Storyline;
   genre?: string;
   preview?: string;
+  featured?: boolean;
 }) {
   const dateStr = storyline.block_timestamp
     ? new Date(storyline.block_timestamp).toLocaleDateString("en-US", {
@@ -22,61 +45,98 @@ export function StoryCard({
       })
     : null;
 
+  const coverStyle = generateCoverStyle(storyline.storyline_id);
+  const displayGenre = genre || storyline.genre;
+
   return (
     <Link
       href={`/story/${storyline.storyline_id}`}
-      className="border-border hover:border-accent-dim hover:bg-surface/50 flex flex-col rounded border px-4 py-3 transition-colors"
+      className={`book-card book-spine group border border-border-subtle ${
+        featured ? "glow-border" : ""
+      }`}
+      style={{
+        ...coverStyle,
+        aspectRatio: featured ? "3 / 4" : "3 / 4",
+        minHeight: featured ? "320px" : "260px",
+      }}
     >
-      {/* Title + completion badge */}
-      <div className="flex items-start justify-between gap-2">
-        <h3 className="text-foreground text-sm font-medium leading-snug">
-          {storyline.title}
-        </h3>
+      {/* Top accent — genre tag + completion badge */}
+      <div className="flex items-start justify-between p-3 pb-0">
+        <div className="flex flex-wrap gap-1.5">
+          {displayGenre && (
+            <span className="rounded bg-black/40 px-1.5 py-0.5 text-[10px] text-muted backdrop-blur-sm">
+              {displayGenre}
+            </span>
+          )}
+          {storyline.language && storyline.language !== "English" && (
+            <span className="rounded bg-black/40 px-1.5 py-0.5 text-[10px] text-muted backdrop-blur-sm">
+              {storyline.language}
+            </span>
+          )}
+        </div>
         {storyline.sunset && (
-          <span className="text-muted bg-surface shrink-0 rounded px-1.5 py-0.5 text-[10px]">
+          <span className="rounded bg-black/40 px-1.5 py-0.5 text-[10px] text-accent-dim backdrop-blur-sm">
             complete
           </span>
         )}
       </div>
 
-      {/* Author + meta */}
-      <div className="text-muted mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
-        <span className="inline-flex items-center gap-0.5">By: <WriterIdentityClient address={storyline.writer_address} linkProfile={false} /></span>
-        <span>
-          {storyline.plot_count} {storyline.plot_count === 1 ? "plot" : "plots"}
-        </span>
-        <ViewCount storylineId={storyline.storyline_id} initialCount={storyline.view_count} />
-        {dateStr && <span>{dateStr}</span>}
-        {(genre || storyline.genre) && (
-          <span className="border-border rounded border px-1.5 py-0.5 text-[10px]">
-            {genre || storyline.genre}
+      {/* Spacer to push content down */}
+      <div className="flex-1" />
+
+      {/* Content area — gradient overlay for readability */}
+      <div className="bg-gradient-to-t from-black/80 via-black/50 to-transparent px-4 pb-4 pt-10">
+        {/* Title — typography hero */}
+        <h3
+          className={`font-bold leading-tight tracking-tight text-foreground ${
+            featured ? "text-xl" : "text-base"
+          }`}
+        >
+          {storyline.title}
+        </h3>
+
+        {/* Author */}
+        <div className="mt-1.5 flex items-center gap-1.5 text-xs text-muted">
+          <span className="inline-flex items-center gap-0.5">
+            <WriterIdentityClient
+              address={storyline.writer_address}
+              linkProfile={false}
+            />
           </span>
+          {storyline.writer_type === 1 && <AgentBadge />}
+        </div>
+
+        {/* Preview text — styled like an opening line */}
+        {preview && (
+          <p className="mt-2 line-clamp-2 text-[11px] italic leading-relaxed text-muted/80">
+            &ldquo;{preview}&rdquo;
+          </p>
         )}
-        {storyline.language && storyline.language !== "English" && (
-          <span className="border-border rounded border px-1.5 py-0.5 text-[10px]">
-            {storyline.language}
+
+        {/* Meta row */}
+        <div className="mt-3 flex flex-wrap items-center gap-x-3 gap-y-1 text-[10px] text-muted">
+          <span>
+            {storyline.plot_count}{" "}
+            {storyline.plot_count === 1 ? "plot" : "plots"}
           </span>
+          <ViewCount
+            storylineId={storyline.storyline_id}
+            initialCount={storyline.view_count}
+          />
+          {dateStr && <span>{dateStr}</span>}
+        </div>
+
+        {/* On-chain stats — subtle integration */}
+        {storyline.token_address && (
+          <div className="mt-2 rounded bg-black/30 px-2 py-1 backdrop-blur-sm">
+            <StoryCardStats tokenAddress={storyline.token_address} />
+          </div>
         )}
-        {storyline.writer_type === 1 && <AgentBadge />}
-      </div>
 
-      {/* Stats row: price, TVL */}
-      {storyline.token_address && (
+        {/* Rating */}
         <div className="mt-2">
-          <StoryCardStats tokenAddress={storyline.token_address} />
+          <RatingSummary storylineId={storyline.storyline_id} />
         </div>
-      )}
-
-      {/* Genesis preview */}
-      {preview && (
-        <p className="text-muted mt-2 line-clamp-2 text-[11px] leading-relaxed">
-          {preview}
-        </p>
-      )}
-
-      {/* Rating */}
-      <div className="mt-auto pt-2">
-        <RatingSummary storylineId={storyline.storyline_id} />
       </div>
     </Link>
   );