diff --git a/src/app/create/page.tsx b/src/app/create/page.tsx
index e1a4536b..144af1ed 100644
--- a/src/app/create/page.tsx
+++ b/src/app/create/page.tsx
@@ -57,15 +57,10 @@ 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">
-        <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>
+        <p className="text-muted text-sm">
+          Connect your wallet to create a storyline.
+        </p>
+        <ConnectWallet />
       </div>
     );
   }
@@ -91,29 +86,22 @@ export default function CreateStorylinePage() {
 
     return (
       <div className="flex min-h-[calc(100vh-2.75rem)] flex-col items-center justify-center gap-6 px-6">
-        <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>
-            )}
+        <h1 className="text-accent text-2xl font-bold">Storyline created!</h1>
+        <div className="flex gap-3">
+          {newStorylineId != null && (
             <Link
-              href="/"
-              className="border-border text-muted hover:text-foreground rounded border px-4 py-2 text-sm transition-colors"
+              href={`/story/${newStorylineId}`}
+              className="border-accent text-accent hover:bg-accent hover:text-background rounded border px-4 py-2 text-sm transition-colors"
             >
-              Go home
+              View your story
             </Link>
-          </div>
+          )}
+          <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>
     );
@@ -122,16 +110,10 @@ export default function CreateStorylinePage() {
   const busy = state !== "idle" && state !== "error";
 
   return (
-    <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>
+    <div className="mx-auto max-w-2xl px-6 py-12">
+      <h1 className="text-accent text-2xl font-bold tracking-tight">
+        Create Storyline
+      </h1>
 
       <form
         onSubmit={(e) => {
@@ -151,25 +133,25 @@ export default function CreateStorylinePage() {
               metadata: { genre, language },
             });
         }}
-        className="space-y-6"
+        className="mt-8 space-y-6"
       >
-        {/* Title — large, prominent */}
+        {/* Title */}
         <div>
-          <label className="mb-2 block text-sm text-foreground">Title</label>
+          <label className="text-foreground mb-2 block text-sm">Title</label>
           <input
             type="text"
             value={title}
             onChange={(e) => setTitle(e.target.value)}
             disabled={busy}
-            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"
+            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"
           />
         </div>
 
         {/* Genre + Language */}
         <div className="grid grid-cols-2 gap-4">
           <div>
-            <label className="mb-2 block text-sm text-foreground">Genre</label>
+            <label className="text-foreground mb-2 block text-sm">Genre</label>
             <DropdownSelect
               value={genre}
               onChange={setGenre}
@@ -179,9 +161,7 @@ export default function CreateStorylinePage() {
             />
           </div>
           <div>
-            <label className="mb-2 block text-sm text-foreground">
-              Language
-            </label>
+            <label className="text-foreground mb-2 block text-sm">Language</label>
             <DropdownSelect
               value={language}
               onChange={setLanguage}
@@ -191,18 +171,18 @@ export default function CreateStorylinePage() {
           </div>
         </div>
 
-        {/* Content — manuscript style */}
+        {/* Content */}
         <div>
-          <label className="mb-2 block text-sm text-foreground">
+          <label className="text-foreground mb-2 block text-sm">
             Opening Chapter
           </label>
           <textarea
             value={content}
             onChange={(e) => setContent(e.target.value)}
             disabled={busy}
-            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"
+            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"
           />
           <div className="mt-1 flex justify-between text-xs">
             <span
@@ -210,27 +190,25 @@ export default function CreateStorylinePage() {
                 content.length > 0 && !valid ? "text-error" : "text-muted"
               }
             >
-              {charCount.toLocaleString()} / {MIN_CONTENT_LENGTH.toLocaleString()}
-              &ndash;
+              {charCount.toLocaleString()} / {MIN_CONTENT_LENGTH.toLocaleString()}–
               {MAX_CONTENT_LENGTH.toLocaleString()} chars
             </span>
           </div>
         </div>
 
         {/* Deadline info */}
-        <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 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>
 
         {/* Status */}
         {state === "error" && (
-          <div className="rounded border border-error/30 px-3 py-2 text-xs text-error">
+          <div className="border-error/30 text-error rounded border px-3 py-2 text-xs">
             {error}
           </div>
         )}
         {busy && (
-          <div className="glow-border rounded border border-border px-3 py-2 text-xs text-muted">
+          <div className="border-border text-muted rounded border px-3 py-2 text-xs">
             {STATE_LABELS[state]}
           </div>
         )}
@@ -239,7 +217,7 @@ export default function CreateStorylinePage() {
         <button
           type="submit"
           disabled={!canSubmit || busy}
-          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"
+          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"
         >
           {busy ? STATE_LABELS[state] : "Publish Storyline"}
         </button>
diff --git a/src/app/dashboard/reader/page.tsx b/src/app/dashboard/reader/page.tsx
index f6414721..30f80326 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="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
+    <div className="mx-auto max-w-2xl px-6 py-12">
+      <h1 className="text-accent text-2xl font-bold tracking-tight">
+        Reader Dashboard
       </h1>
-      <p className="mt-2 text-sm text-muted">
+      <p className="text-muted mt-2 text-sm">
         <WriterIdentityClient address={address!} />
       </p>
 
@@ -169,7 +169,7 @@ export default function ReaderDashboard() {
 
 function DonationRow({ donation, decimals }: { donation: Donation; decimals: number }) {
   return (
-    <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="border-border flex items-center justify-between rounded border px-3 py-2 text-xs">
       <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 b29de15f..1cbdf2ec 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="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
+    <div className="mx-auto max-w-2xl px-6 py-12">
+      <h1 className="text-accent text-2xl font-bold tracking-tight">
+        Writer Dashboard
       </h1>
-      <p className="mt-2 text-sm text-muted">
+      <p className="text-muted mt-2 text-sm">
         <WriterIdentityClient address={address!} />
         {" — "}
         {storylines.length}{" "}
@@ -94,7 +94,7 @@ export default function WriterDashboard() {
 
 function StorylineDetail({ storyline, writerAddress }: { storyline: Storyline; writerAddress: Address }) {
   return (
-    <div className="glow-border rounded-lg border border-border px-4 py-4">
+    <div className="border-border rounded 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 3e755040..bf7a84b0 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,31 +3,22 @@
 :root {
   --bg: #0a0a0a;
   --bg-surface: #111111;
-  --bg-surface-2: #161616;
   --text: #e0e0e0;
   --text-muted: #737373;
   --accent: #00ff88;
   --accent-dim: #00cc6a;
-  --accent-glow: rgba(0, 255, 136, 0.08);
-  --border: #1e1e1e;
-  --border-subtle: #181818;
+  --border: #2a2a2a;
   --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);
 }
@@ -55,120 +46,3 @@ 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 1afa27f7..0d069239 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-12 min-h-screen">{children}</div>
+          <div className="pt-11 min-h-screen">{children}</div>
           <Footer />
         </Providers>
       </body>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index bee93f83..9e38be24 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -56,36 +56,18 @@ export default async function Home({
     }
   }
 
-  // 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;
+  const extraParams = writer !== "all" ? { writer } : undefined;
 
   return (
-    <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">
+    <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">
           PlotLink
         </h1>
-        <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 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>
-        <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 */}
@@ -98,48 +80,20 @@ export default async function Home({
         <SortDropdown active={tab} writer={writer} basePath="/" />
       </div>
 
-      {/* 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]}
-          />
+      {/* 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]} />
         ))}
       </div>
 
       {/* Pagination */}
       {(page > 1 || storylines.length === PAGE_SIZE) && (
-        <div className="mt-10 flex items-center justify-center gap-4">
+        <div className="mt-8 flex items-center justify-center gap-4">
           {page > 1 && (
             <Link
               href={buildPageHref(tab, writer, page - 1)}
-              className="border-border text-muted hover:text-foreground hover:border-accent-dim rounded border px-4 py-2 text-xs transition-colors"
+              className="border-border text-muted hover:text-foreground rounded border px-4 py-2 text-xs transition-colors"
             >
               &larr; Previous
             </Link>
@@ -148,7 +102,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 hover:border-accent-dim rounded border px-4 py-2 text-xs transition-colors"
+              className="border-border text-muted hover:text-foreground rounded border px-4 py-2 text-xs transition-colors"
             >
               Next &rarr;
             </Link>
@@ -157,8 +111,8 @@ export default async function Home({
       )}
 
       {storylines.length === 0 && (
-        <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">
+        <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">
             <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 fd20f7d0..6e4dfca7 100644
--- a/src/app/story/[storylineId]/page.tsx
+++ b/src/app/story/[storylineId]/page.tsx
@@ -22,24 +22,6 @@ 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,
 }: {
@@ -148,14 +130,12 @@ export default async function StoryPage({ params }: { params: Params }) {
     : null;
 
   return (
-    <div className="animate-in mx-auto max-w-5xl px-4 py-10 sm:px-6">
+    <div className="mx-auto max-w-5xl px-6 py-10">
       <ViewTracker storylineId={id} />
-
-      {/* Cover header with generative background */}
-      <StoryHeader storyline={sl} priceInfo={priceInfo} />
+      <StoryHeader storyline={storyline} priceInfo={priceInfo} />
 
       <div className="mt-8 grid grid-cols-1 gap-10 lg:grid-cols-[1fr_320px]">
-        {/* Story content — immersive reading area */}
+        {/* Story content — genesis + table of contents */}
         <main>
           {genesis ? (
             <>
@@ -167,7 +147,10 @@ export default async function StoryPage({ params }: { params: Params }) {
           )}
 
           {chapters.length > 0 && (
-            <TableOfContents storylineId={id} chapters={chapters} />
+            <TableOfContents
+              storylineId={id}
+              chapters={chapters}
+            />
           )}
         </main>
 
@@ -202,69 +185,41 @@ function StoryHeader({
   priceInfo: TokenPriceInfo | null;
 }) {
   const reserveLabel = RESERVE_LABEL;
-  const coverGradient = generateCoverGradient(storyline.storyline_id);
 
   return (
-    <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>
+    <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}
           </span>
-          <span>
-            {storyline.plot_count}{" "}
-            {storyline.plot_count === 1 ? "plot" : "plots"}
+        )}
+        {storyline.language && storyline.language !== "English" && (
+          <span className="border-border rounded border px-1.5 py-0.5 text-[10px]">
+            {storyline.language}
           </span>
-          <ViewCount
-            storylineId={storyline.storyline_id}
-            initialCount={storyline.view_count}
-          />
-          {storyline.writer_type === 1 && <AgentBadge />}
-          <RatingSummary storylineId={storyline.storyline_id} />
-        </div>
+        )}
+        {storyline.writer_type === 1 && <AgentBadge />}
+        <RatingSummary storylineId={storyline.storyline_id} />
       </div>
 
-      {/* Price info bar */}
       {priceInfo && (
-        <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 className="border-border bg-surface mt-4 grid grid-cols-2 gap-2 rounded border px-3 py-2 text-xs">
           <div>
-            <span className="block text-[10px] uppercase tracking-wider text-muted">
+            <span className="text-muted block text-[10px] uppercase tracking-wider">
               Token Price
             </span>
             <span className="text-foreground">
@@ -272,7 +227,7 @@ function StoryHeader({
             </span>
           </div>
           <div>
-            <span className="block text-[10px] uppercase tracking-wider text-muted">
+            <span className="text-muted block text-[10px] uppercase tracking-wider">
               Supply Minted
             </span>
             <span className="text-foreground">
@@ -281,20 +236,15 @@ function StoryHeader({
           </div>
         </div>
       )}
-
-      {/* Deadline / completion */}
       {storyline.sunset ? (
-        <div className="border-t border-border-subtle bg-surface px-6 py-2 text-xs sm:px-8">
+        <div className="border-border bg-surface mt-4 rounded border px-3 py-2 text-xs">
           <span className="text-muted">Story complete</span>
-          <span className="ml-2 text-foreground">
-            {storyline.plot_count}{" "}
-            {storyline.plot_count === 1 ? "plot" : "plots"} total
+          <span className="text-foreground ml-2">
+            {storyline.plot_count} {storyline.plot_count === 1 ? "plot" : "plots"} total
           </span>
         </div>
       ) : storyline.last_plot_time ? (
-        <div className="border-t border-border-subtle px-6 sm:px-8">
-          <DeadlineCountdown lastPlotTime={storyline.last_plot_time} />
-        </div>
+        <DeadlineCountdown lastPlotTime={storyline.last_plot_time} />
       ) : null}
     </header>
   );
@@ -304,8 +254,8 @@ function GenesisSection({ plot }: { plot: Plot }) {
   return (
     <section>
       <ViewTracker storylineId={plot.storyline_id} plotIndex={0} />
-      <div className="mb-4 flex items-baseline gap-3 text-xs text-muted">
-        <span className="font-medium text-accent-dim">Genesis</span>
+      <div className="text-muted mb-3 flex items-baseline gap-3 text-xs">
+        <span className="text-accent-dim font-medium">Genesis</span>
         {plot.block_timestamp && (
           <time dateTime={plot.block_timestamp}>
             {new Date(plot.block_timestamp).toLocaleDateString("en-US", {
@@ -317,9 +267,11 @@ function GenesisSection({ plot }: { plot: Plot }) {
         )}
       </div>
       {plot.content ? (
-        <div className="reading-area whitespace-pre-wrap">{plot.content}</div>
+        <div className="text-foreground whitespace-pre-wrap text-sm leading-relaxed">
+          {plot.content}
+        </div>
       ) : (
-        <p className="text-sm italic text-muted">
+        <p className="text-muted text-sm italic">
           Content unavailable (CID: {plot.content_cid})
         </p>
       )}
@@ -335,11 +287,11 @@ function TableOfContents({
   chapters: Plot[];
 }) {
   return (
-    <section className="mt-12">
-      <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-foreground">
+    <section className="mt-10">
+      <h2 className="text-foreground mb-4 text-sm font-semibold uppercase tracking-wider">
         Chapters
       </h2>
-      <div className="divide-y divide-border-subtle">
+      <div className="divide-border divide-y">
         {chapters.map((ch) => {
           const chapterTitle = ch.title || `Chapter ${ch.plot_index}`;
           const preview = ch.content ? ch.content.slice(0, 100) : "";
@@ -354,20 +306,22 @@ function TableOfContents({
             <Link
               key={ch.id}
               href={`/story/${storylineId}/${ch.plot_index}`}
-              className="book-spine group flex items-start justify-between gap-4 py-3.5 pl-4 transition-colors hover:bg-surface/50"
+              className="hover:bg-surface/50 flex items-start justify-between gap-4 py-3 transition-colors"
             >
               <div className="min-w-0 flex-1">
-                <div className="text-sm font-medium text-foreground group-hover:text-accent transition-colors">
+                <div className="text-foreground text-sm font-medium">
                   {chapterTitle}
                 </div>
                 {preview && (
-                  <p className="mt-0.5 truncate text-xs text-muted">
+                  <p className="text-muted mt-0.5 truncate text-xs">
                     {preview}
-                    {ch.content && ch.content.length > 100 ? "..." : ""}
+                    {ch.content && ch.content.length > 100 ? "…" : ""}
                   </p>
                 )}
               </div>
-              <div className="shrink-0 text-xs text-muted">{dateStr}</div>
+              <div className="text-muted shrink-0 text-xs">
+                {dateStr}
+              </div>
             </Link>
           );
         })}
@@ -379,7 +333,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-sm text-muted">{message}</p>
+      <p className="text-muted text-sm">{message}</p>
     </div>
   );
 }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index e99f26e2..41725850 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -2,27 +2,21 @@ import Link from "next/link";
 
 export function Footer() {
   return (
-    <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">
+    <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">
         <div className="flex flex-wrap items-center justify-between gap-4">
           <div className="flex items-center gap-4 text-muted">
-            <Link
-              href="/"
-              className="transition-colors hover:text-foreground"
-            >
+            <Link href="/" className="hover:text-foreground transition-colors">
               stories
             </Link>
-            <Link
-              href="/create"
-              className="transition-colors hover:text-foreground"
-            >
+            <Link href="/create" className="hover:text-foreground transition-colors">
               create
             </Link>
             <a
               href="https://github.com/realproject7/plotlink"
               target="_blank"
               rel="noopener noreferrer"
-              className="transition-colors hover:text-foreground"
+              className="hover:text-foreground transition-colors"
             >
               github
             </a>
@@ -31,9 +25,8 @@ export function Footer() {
             built on <span className="text-accent-dim">Base</span>
           </span>
         </div>
-        <div className="text-xs text-neutral-500">
-          <span className="text-accent-dim">$</span> PlotLink &copy;{" "}
-          {new Date().getFullYear()}
+        <div className="text-neutral-400 text-xs">
+          <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 27189bcc..52674a05 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -17,38 +17,32 @@ 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-md">
-      <div className="mx-auto flex h-12 max-w-6xl 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-sm">
+      <div className="mx-auto flex h-11 max-w-5xl items-center justify-between px-4">
         {/* Logo */}
         <Link
           href="/"
-          className="group flex items-center gap-1.5 transition-opacity hover:opacity-80"
+          className="text-accent text-sm font-bold tracking-tight transition-opacity hover:opacity-80"
         >
-          <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>
+          <span className="text-muted mr-1 font-normal">$</span>
+          PlotLink
         </Link>
 
         {/* Desktop nav links */}
-        <div className="hidden items-center gap-0.5 md:flex">
+        <div className="hidden items-center gap-1 md:flex">
           {NAV_LINKS.map(({ href, label }) => {
             const active = pathname === href || pathname.startsWith(href + "/");
             return (
               <Link
                 key={href}
                 href={href}
-                className={`rounded px-3 py-1.5 text-xs transition-colors ${
+                className={`rounded px-2.5 py-1 text-xs transition-colors ${
                   active
-                    ? "bg-accent-glow text-accent"
+                    ? "bg-[var(--accent)]/10 text-accent"
                     : "text-muted hover:text-foreground"
                 }`}
               >
-                {active && (
-                  <span className="mr-0.5 text-accent-dim">&gt;</span>
-                )}
+                {active && <span className="text-accent-dim mr-0.5">&gt;</span>}
                 {label}
               </Link>
             );
@@ -76,22 +70,19 @@ 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-2 text-xs transition-colors ${
+                  className={`rounded px-2.5 py-1.5 text-xs transition-colors ${
                     active
-                      ? "bg-accent-glow text-accent"
+                      ? "bg-[var(--accent)]/10 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 6f985d53..92ffcd93 100644
--- a/src/components/StoryCard.tsx
+++ b/src/components/StoryCard.tsx
@@ -6,37 +6,14 @@ 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", {
@@ -45,98 +22,61 @@ export function StoryCard({
       })
     : null;
 
-  const coverStyle = generateCoverStyle(storyline.storyline_id);
-  const displayGenre = genre || storyline.genre;
-
   return (
     <Link
       href={`/story/${storyline.storyline_id}`}
-      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",
-      }}
+      className="border-border hover:border-accent-dim hover:bg-surface/50 flex flex-col rounded border px-4 py-3 transition-colors"
     >
-      {/* 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>
+      {/* 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>
         {storyline.sunset && (
-          <span className="rounded bg-black/40 px-1.5 py-0.5 text-[10px] text-accent-dim backdrop-blur-sm">
+          <span className="text-muted bg-surface shrink-0 rounded px-1.5 py-0.5 text-[10px]">
             complete
           </span>
         )}
       </div>
 
-      {/* 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}
-            />
+      {/* 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}
           </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>
         )}
-
-        {/* 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"}
+        {storyline.language && storyline.language !== "English" && (
+          <span className="border-border rounded border px-1.5 py-0.5 text-[10px]">
+            {storyline.language}
           </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>
 
-        {/* Rating */}
+      {/* Stats row: price, TVL */}
+      {storyline.token_address && (
         <div className="mt-2">
-          <RatingSummary storylineId={storyline.storyline_id} />
+          <StoryCardStats tokenAddress={storyline.token_address} />
         </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>
   );