diff --git a/index.html b/index.html
index 668d64b..d800af1 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,10 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/svg+xml" href="/react.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Rspack + React + TS</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet" />
+  <title>Rspack + ReScript</title>
 </head>
 
 <body>
diff --git a/src/App.res b/src/App.res
index 8322f49..1931f79 100644
--- a/src/App.res
+++ b/src/App.res
@@ -8,53 +8,6 @@ Emotion.Css.injectGlobal(`
   width: 100%;
   min-height: 100vh;
 }
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em ${Theme.Theme.Colors.brand["primary"]}aa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-/* Hero section gradients */
-.hero-gradient {
-  background: linear-gradient(135deg, ${Theme.Theme.Colors.brand["primary"]} 0%, ${Theme.Theme.Colors.brand["secondary"]} 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-  .hero-gradient {
-    font-size: 2.5rem;
-  }
-
-  .logo {
-    height: 4em;
-    padding: 1em;
-  }
-}
 `)
 
 module App = {
@@ -63,17 +16,19 @@ module App = {
     <AuthContext.Provider>
       <AuthContext.UserProvider>
         <RescriptRelayReact.Context.Provider environment={RelayEnv.environment}>
-          <div>
+          <div className={css({"display": "flex", "flexDirection": "column", "minHeight": "100vh"})}>
             <NavBar.NavBar />
-            <main>
+            <main className={css({"flex": "1"})}>
               <Router />
             </main>
             <footer
               className={css({
-                "padding": "2rem",
+                "padding": "2rem 1rem",
                 "textAlign": "center",
+                "maxWidth": "680px",
+                "margin": "0 auto",
+                "width": "100%",
                 "borderTop": `1px solid ${Theme.Theme.Colors.border["default"]}`,
-                "marginTop": "2rem",
               })}>
               <Typography.Typography.Caption>
                 {React.string("Built with Rspack + ReScript + React + Bun")}
diff --git a/src/components/Avatar/Avatar.res b/src/components/Avatar/Avatar.res
new file mode 100644
index 0000000..31d6686
--- /dev/null
+++ b/src/components/Avatar/Avatar.res
@@ -0,0 +1,61 @@
+open Emotion.Css
+open Emotion.Utils
+
+module Avatar = {
+  type size = [#sm | #md | #lg]
+
+  @react.component
+  let make = (~name: string, ~src: option<string>=?, ~size: size=#md, ~className: string="", ()) => {
+    let dimension = switch size {
+    | #sm => "2rem"
+    | #md => "2.5rem"
+    | #lg => "3.5rem"
+    }
+
+    let fontSize = switch size {
+    | #sm => "0.75rem"
+    | #md => "0.875rem"
+    | #lg => "1.125rem"
+    }
+
+    let baseStyles = css({
+      "width": dimension,
+      "height": dimension,
+      "borderRadius": "50%",
+      "display": "inline-flex",
+      "alignItems": "center",
+      "justifyContent": "center",
+      "flexShrink": "0",
+      "overflow": "hidden",
+      "backgroundColor": Color.bgElevated,
+      "border": `1px solid ${Color.border}`,
+      "color": Color.textSecondary,
+      "fontSize": fontSize,
+      "fontWeight": "500",
+      "letterSpacing": "0.05em",
+      "textTransform": "uppercase",
+    })
+
+    let imgStyles = css({
+      "width": "100%",
+      "height": "100%",
+      "objectFit": "cover",
+    })
+
+    let initials =
+      name
+      ->String.split(" ")
+      ->Array.filterMap(part => part->String.charAt(0)->Some)
+      ->Array.slice(~start=0, ~end=2)
+      ->Array.join("")
+
+    let avatarClassName = cx([baseStyles, className])
+
+    <div className={avatarClassName}>
+      {switch src {
+      | Some(url) => <img className={imgStyles} src={url} alt={name} />
+      | None => React.string(initials)
+      }}
+    </div>
+  }
+}
diff --git a/src/components/Badge/Badge.res b/src/components/Badge/Badge.res
new file mode 100644
index 0000000..50d3332
--- /dev/null
+++ b/src/components/Badge/Badge.res
@@ -0,0 +1,54 @@
+open Emotion.Css
+open Emotion.Utils
+
+module Badge = {
+  type variant = [#default | #primary | #success | #warning | #error]
+
+  @react.component
+  let make = (~variant: variant=#default, ~className: string="", ~children, ()) => {
+    let baseStyles = css({
+      "display": "inline-flex",
+      "alignItems": "center",
+      "fontFamily": Theme.Theme.Typography.fontFamily["sans"],
+      "fontSize": "0.6875rem",
+      "fontWeight": "500",
+      "letterSpacing": "0.05em",
+      "textTransform": "uppercase",
+      "padding": "0.25rem 0.625rem",
+      "borderRadius": "2px",
+      "lineHeight": "1.25",
+    })
+
+    let variantStyles = switch variant {
+    | #default => css({
+        "backgroundColor": Color.bgElevated,
+        "color": Color.textSecondary,
+        "border": `1px solid ${Color.border}`,
+      })
+    | #primary => css({
+        "backgroundColor": `${Color.primary}1a`,
+        "color": Color.primary,
+        "border": `1px solid ${Color.primary}33`,
+      })
+    | #success => css({
+        "backgroundColor": "rgba(34, 197, 94, 0.1)",
+        "color": Color.success,
+        "border": "1px solid rgba(34, 197, 94, 0.2)",
+      })
+    | #warning => css({
+        "backgroundColor": "rgba(245, 158, 11, 0.1)",
+        "color": Color.warning,
+        "border": "1px solid rgba(245, 158, 11, 0.2)",
+      })
+    | #error => css({
+        "backgroundColor": "rgba(239, 68, 68, 0.1)",
+        "color": Color.error,
+        "border": "1px solid rgba(239, 68, 68, 0.2)",
+      })
+    }
+
+    let badgeClassName = cx([baseStyles, variantStyles, className])
+
+    <span className={badgeClassName}> {children} </span>
+  }
+}
diff --git a/src/components/Blockquote/Blockquote.res b/src/components/Blockquote/Blockquote.res
new file mode 100644
index 0000000..b9b582a
--- /dev/null
+++ b/src/components/Blockquote/Blockquote.res
@@ -0,0 +1,41 @@
+open Emotion.Css
+open Emotion.Utils
+
+module Blockquote = {
+  @react.component
+  let make = (~cite: option<string>=?, ~className: string="", ~children, ()) => {
+    let quoteStyles = css({
+      "fontFamily": Theme.Theme.Typography.fontFamily["serif"],
+      "fontSize": "1.375rem",
+      "fontWeight": "400",
+      "fontStyle": "italic",
+      "lineHeight": "1.6",
+      "color": Color.textPrimary,
+      "borderLeft": `3px solid ${Color.primary}`,
+      "paddingLeft": "1.5rem",
+      "margin": "2rem 0",
+    })
+
+    let citeStyles = css({
+      "display": "block",
+      "marginTop": "0.75rem",
+      "fontFamily": Theme.Theme.Typography.fontFamily["sans"],
+      "fontSize": "0.8125rem",
+      "fontStyle": "normal",
+      "fontWeight": "400",
+      "letterSpacing": "0.05em",
+      "color": Color.textSecondary,
+    })
+
+    let quoteClassName = cx([quoteStyles, className])
+
+    <blockquote className={quoteClassName}>
+      {children}
+      {switch cite {
+      | Some(attribution) =>
+        <cite className={citeStyles}> {React.string({`\u2014 `} ++ attribution)} </cite>
+      | None => React.null
+      }}
+    </blockquote>
+  }
+}
diff --git a/src/components/Card/Card.res b/src/components/Card/Card.res
index ea23fbe..d282ae9 100644
--- a/src/components/Card/Card.res
+++ b/src/components/Card/Card.res
@@ -15,7 +15,7 @@ module Card = {
     "flexDirection": "column",
     "minWidth": "0",
     "wordWrap": "break-word",
-    "borderRadius": Border.getRadius("lg"),
+    "borderRadius": Border.getRadius("sm"),
     "transition": Animate.getDuration("fast") ++ " ease-out"
   })
 
diff --git a/src/components/Divider/Divider.res b/src/components/Divider/Divider.res
new file mode 100644
index 0000000..759dc9b
--- /dev/null
+++ b/src/components/Divider/Divider.res
@@ -0,0 +1,44 @@
+open Emotion.Css
+open Emotion.Utils
+
+module Divider = {
+  @react.component
+  let make = (~label: option<string>=?, ~className: string="", ()) => {
+    let baseStyles = css({
+      "display": "flex",
+      "alignItems": "center",
+      "gap": "1rem",
+      "margin": "2rem 0",
+    })
+
+    let lineStyles = css({
+      "flex": "1",
+      "height": "1px",
+      "backgroundColor": Color.border,
+    })
+
+    let labelStyles = css({
+      "fontFamily": Theme.Theme.Typography.fontFamily["sans"],
+      "fontSize": "0.6875rem",
+      "fontWeight": "500",
+      "letterSpacing": "0.15em",
+      "textTransform": "uppercase",
+      "color": Color.textSecondary,
+    })
+
+    let dividerClassName = cx([baseStyles, className])
+
+    switch label {
+    | Some(text) =>
+      <div className={dividerClassName}>
+        <div className={lineStyles} />
+        <span className={labelStyles}> {React.string(text)} </span>
+        <div className={lineStyles} />
+      </div>
+    | None =>
+      <div className={dividerClassName}>
+        <div className={lineStyles} />
+      </div>
+    }
+  }
+}
diff --git a/src/components/NavBar/NavBar.res b/src/components/NavBar/NavBar.res
index 743803d..e445551 100644
--- a/src/components/NavBar/NavBar.res
+++ b/src/components/NavBar/NavBar.res
@@ -15,8 +15,7 @@ module NavBar = {
       "display": "flex",
       "alignItems": "center",
       "justifyContent": "space-between",
-      "padding": "1rem 2rem",
-      "borderBottom": `1px solid ${Color.border}`,
+      "padding": "1.5rem 2rem",
       "backgroundColor": Color.bgPrimary,
       "position": "sticky",
       "top": "0",
@@ -24,8 +23,10 @@ module NavBar = {
     })
 
     let brandStyles = css({
-      "fontSize": "1.25rem",
-      "fontWeight": "700",
+      "fontFamily": Theme.Theme.Typography.fontFamily["serif"],
+      "fontSize": "1.5rem",
+      "fontWeight": "400",
+      "letterSpacing": "-0.02em",
       "color": Color.textPrimary,
       "cursor": "pointer",
       "textDecoration": "none",
@@ -33,20 +34,20 @@ module NavBar = {
 
     let linksStyles = css({
       "display": "flex",
-      "gap": "1.5rem",
+      "gap": "2rem",
       "alignItems": "center",
     })
 
     let linkStyles = (~active) =>
       css({
-        "color": active ? Color.primary : Color.textSecondary,
+        "color": active ? Color.textPrimary : Color.textSecondary,
         "textDecoration": "none",
         "fontWeight": active ? "600" : "400",
-        "fontSize": "0.9375rem",
+        "fontSize": "0.75rem",
+        "letterSpacing": "0.08em",
+        "textTransform": "uppercase",
         "cursor": "pointer",
         "transition": "color 200ms ease-out",
-        "borderBottom": active ? `2px solid ${Color.primary}` : "2px solid transparent",
-        "paddingBottom": "0.25rem",
       })
 
     let handleNav = (path, evt: ReactEvent.Mouse.t) => {
@@ -56,7 +57,7 @@ module NavBar = {
 
     <nav className={navStyles}>
       <a className={brandStyles} href="/" onClick={evt => handleNav("/", evt)}>
-        {React.string("Rspack + ReScript")}
+        {React.string("The Journal")}
       </a>
       <div className={linksStyles}>
         <a
diff --git a/src/components/Typography/Typography.res b/src/components/Typography/Typography.res
index 4aa7b27..ed552f7 100644
--- a/src/components/Typography/Typography.res
+++ b/src/components/Typography/Typography.res
@@ -11,8 +11,8 @@ module Typography = {
   // Base typography styles
   let baseStyles = css({
     "margin": "0",
-    "fontFamily": "Inter, Avenir, Helvetica, Arial, sans-serif",
-    "lineHeight": "1.5",
+    "fontFamily": Theme.Theme.Typography.fontFamily["sans"],
+    "lineHeight": "1.75",
     "color": Theme.Theme.Colors.text["primary"]
   })
 
@@ -20,33 +20,35 @@ module Typography = {
   let getVariantStyles = (variant: variant) => {
     switch variant {
     | #display => css({
+        "fontFamily": Theme.Theme.Typography.fontFamily["serif"],
         "fontSize": "3rem",
-        "fontWeight": "700",
-        "lineHeight": "1.1",
-        "letterSpacing": "-0.025em"
+        "fontWeight": "400",
+        "lineHeight": "1.15",
+        "letterSpacing": "-0.02em"
       })
     | #heading => css({
+        "fontFamily": Theme.Theme.Typography.fontFamily["serif"],
         "fontSize": "1.5rem",
-        "fontWeight": "600",
-        "lineHeight": "1.25",
-        "letterSpacing": "-0.025em"
+        "fontWeight": "400",
+        "lineHeight": "1.2",
+        "letterSpacing": "-0.02em"
       })
     | #body => css({
-        "fontSize": "1rem",
+        "fontSize": "1.0625rem",
         "fontWeight": "400",
-        "lineHeight": "1.5"
+        "lineHeight": "1.75"
       })
     | #caption => css({
-        "fontSize": "0.875rem",
+        "fontSize": "0.8125rem",
         "fontWeight": "400",
-        "lineHeight": "1.25",
+        "lineHeight": "1.5",
         "color": Theme.Theme.Colors.text["secondary"]
       })
     | #overline => css({
-        "fontSize": "0.75rem",
+        "fontSize": "0.6875rem",
         "fontWeight": "500",
         "lineHeight": "1.25",
-        "letterSpacing": "0.1em",
+        "letterSpacing": "0.15em",
         "textTransform": "uppercase",
         "color": Theme.Theme.Colors.text["secondary"]
       })
diff --git a/src/pages/ComponentsPage.res b/src/pages/ComponentsPage.res
index 4812866..6983370 100644
--- a/src/pages/ComponentsPage.res
+++ b/src/pages/ComponentsPage.res
@@ -5,6 +5,10 @@ module Components = {
   module Input = Input.Input
   module Card = Card.Card
   module Typography = Typography.Typography
+  module Divider = Divider.Divider
+  module Avatar = Avatar.Avatar
+  module Badge = Badge.Badge
+  module Blockquote = Blockquote.Blockquote
 }
 
 @react.component
@@ -116,5 +120,50 @@ let make = () => {
         </Components.Card.Body>
       </Components.Card>
     </div>
+    <Components.Divider label="Editorial Components" />
+    <div className={demoGridStyles}>
+      <Components.Card variant=#outlined>
+        <Components.Card.Header>
+          <Components.Typography.Heading level=#h3>
+            {React.string("Avatar")}
+          </Components.Typography.Heading>
+        </Components.Card.Header>
+        <Components.Card.Body>
+          <div className={css({"display": "flex", "gap": "1rem", "alignItems": "center"})}>
+            <Components.Avatar name="Alice Chen" size=#sm />
+            <Components.Avatar name="Bob Martinez" size=#md />
+            <Components.Avatar name="Carol Davis" size=#lg />
+          </div>
+        </Components.Card.Body>
+      </Components.Card>
+      <Components.Card variant=#outlined>
+        <Components.Card.Header>
+          <Components.Typography.Heading level=#h3>
+            {React.string("Badge")}
+          </Components.Typography.Heading>
+        </Components.Card.Header>
+        <Components.Card.Body>
+          <div className={css({"display": "flex", "flexWrap": "wrap", "gap": "0.5rem"})}>
+            <Components.Badge> {React.string("Default")} </Components.Badge>
+            <Components.Badge variant=#primary> {React.string("ReScript")} </Components.Badge>
+            <Components.Badge variant=#success> {React.string("Published")} </Components.Badge>
+            <Components.Badge variant=#warning> {React.string("Draft")} </Components.Badge>
+            <Components.Badge variant=#error> {React.string("Archived")} </Components.Badge>
+          </div>
+        </Components.Card.Body>
+      </Components.Card>
+      <Components.Card variant=#outlined>
+        <Components.Card.Header>
+          <Components.Typography.Heading level=#h3>
+            {React.string("Blockquote")}
+          </Components.Typography.Heading>
+        </Components.Card.Header>
+        <Components.Card.Body>
+          <Components.Blockquote cite="Rich Hickey">
+            {React.string("Simplicity is a prerequisite for reliability.")}
+          </Components.Blockquote>
+        </Components.Card.Body>
+      </Components.Card>
+    </div>
   </section>
 }
diff --git a/src/pages/HomePage.res b/src/pages/HomePage.res
index 49e13cb..1089eb7 100644
--- a/src/pages/HomePage.res
+++ b/src/pages/HomePage.res
@@ -1,4 +1,5 @@
 open Emotion.Css
+open Emotion.Utils
 
 module Components = {
   module Button = Button.Button
@@ -6,69 +7,34 @@ module Components = {
   module Card = Card.Card
 }
 
-module Logo = {
-  @module("../assets/react.svg") @react.component
-  external make: (~role: string=?, ~className: string=?, ~alt: string=?, unit) => React.element =
-    "default"
-}
-
 module HeroSection = {
   @react.component
   let make = () => {
-    let (count, setCount) = React.useState(() => 0)
-
     let heroStyles = css({
-      "minHeight": "80vh",
-      "display": "flex",
-      "flexDirection": "column",
-      "alignItems": "center",
-      "justifyContent": "center",
+      "maxWidth": "680px",
+      "margin": "0 auto",
+      "padding": "6rem 1rem 4rem",
       "textAlign": "center",
-      "padding": "2rem 1rem",
-      "background": `linear-gradient(180deg, ${Theme.Theme.Colors.brand["primary"]}0a 0%, transparent 100%)`,
     })
 
-    let logoContainerStyles = css({
-      "display": "flex",
-      "gap": "2rem",
-      "marginBottom": "2rem",
-      "alignItems": "center",
+    let dividerStyles = css({
+      "width": "3rem",
+      "height": "1px",
+      "backgroundColor": Color.border,
+      "margin": "2rem auto",
     })
 
     <section className={heroStyles}>
-      <div className={logoContainerStyles}>
-        <a href="https://reactjs.org" target="_blank">
-          <Logo className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <Components.Typography.Display size=#"4xl" className="hero-gradient">
-        {React.string("Modern React Development")}
+      <Components.Typography.Overline>
+        {React.string("A ReScript Template")}
+      </Components.Typography.Overline>
+      <Components.Typography.Display size=#"4xl" className={css({"marginTop": "1rem"})}>
+        {React.string("Build modern web applications with type safety")}
       </Components.Typography.Display>
-      <Components.Typography.Heading
-        level=#h2
-        size=#xl
-        className={css({
-          "color": Theme.Theme.Colors.text["secondary"],
-          "marginTop": "1rem",
-          "maxWidth": "600px",
-        })}>
-        {React.string("Built with Rspack, ReScript, React, and Bun for lightning-fast development")}
-      </Components.Typography.Heading>
-      <div
-        className={css({
-          "display": "flex",
-          "gap": "1rem",
-          "marginTop": "2rem",
-          "flexWrap": "wrap",
-          "justifyContent": "center",
-        })}>
-        <Components.Button variant=#primary size=#lg onClick={_evt => setCount(prev => prev + 1)}>
-          {React.string("Interactive Demo (" ++ Int.toString(count) ++ ")")}
-        </Components.Button>
-        <Components.Button variant=#outline size=#lg>
-          {React.string("View Components")}
-        </Components.Button>
-      </div>
+      <div className={dividerStyles} />
+      <Components.Typography.Body className={css({"color": Color.textSecondary, "fontStyle": "italic"})}>
+        {React.string("Rspack, ReScript, React 19, Relay, and Emotion CSS-in-JS working together.")}
+      </Components.Typography.Body>
     </section>
   }
 }
@@ -77,43 +43,39 @@ module FeaturesSection = {
   @react.component
   let make = () => {
     let sectionStyles = css({
-      "padding": "4rem 1rem",
-      "maxWidth": "1200px",
+      "padding": "2rem 1rem 4rem",
+      "maxWidth": "680px",
       "margin": "0 auto",
     })
 
-    let gridStyles = css({
-      "display": "grid",
-      "gridTemplateColumns": "repeat(auto-fit, minmax(300px, 1fr))",
-      "gap": "2rem",
-      "marginTop": "3rem",
+    let itemStyles = css({
+      "borderTop": `1px solid ${Color.border}`,
+      "padding": "1.5rem 0",
     })
 
     let features = [
-      ("Lightning Fast", "Built with Rspack for ultra-fast bundling and hot reload"),
-      ("Type Safety", "ReScript provides bulletproof type safety and excellent ergonomics"),
-      ("Design System", "Comprehensive component library with consistent styling"),
-      ("Modern Stack", "Latest React, Emotion CSS-in-JS, and Bun package manager"),
+      ("Rspack", "Rust-based bundler for fast builds and hot module replacement."),
+      ("ReScript", "Type-safe language compiling to clean, readable JavaScript."),
+      ("Relay", "Declarative data fetching with GraphQL colocated queries."),
+      ("Emotion", "CSS-in-JS with a comprehensive design token system."),
     ]
 
     <section className={sectionStyles}>
-      <Components.Typography.Display size=#"3xl" align=#center>
-        {React.string("Why This Template?")}
-      </Components.Typography.Display>
-      <div className={gridStyles}>
-        {features
-        ->Belt.Array.map(((title, description)) => {
-          <Components.Card key={title} variant=#elevated>
-            <Components.Typography.Heading level=#h3 size=#lg>
-              {React.string(title)}
-            </Components.Typography.Heading>
-            <Components.Typography.Body>
-              {React.string(description)}
-            </Components.Typography.Body>
-          </Components.Card>
-        })
-        ->React.array}
-      </div>
+      <Components.Typography.Overline className={css({"marginBottom": "1rem"})}>
+        {React.string("The Stack")}
+      </Components.Typography.Overline>
+      {features
+      ->Array.map(((title, description)) => {
+        <div key={title} className={itemStyles}>
+          <Components.Typography.Heading level=#h3 size=#xl>
+            {React.string(title)}
+          </Components.Typography.Heading>
+          <Components.Typography.Body className={css({"color": Color.textSecondary, "margin": "0"})}>
+            {React.string(description)}
+          </Components.Typography.Body>
+        </div>
+      })
+      ->React.array}
     </section>
   }
 }
diff --git a/src/pages/LoginPage.res b/src/pages/LoginPage.res
index e4b4c4e..3f0c5e6 100644
--- a/src/pages/LoginPage.res
+++ b/src/pages/LoginPage.res
@@ -16,10 +16,8 @@ let make = () => {
   })
 
   let cardStyles = css({
-    "backgroundColor": Color.bgElevated,
-    "border": `1px solid ${Color.border}`,
-    "borderRadius": "0.5rem",
-    "padding": "2rem",
+    "borderTop": `2px solid ${Color.primary}`,
+    "padding": "2rem 0",
     "marginTop": "2rem",
   })
 
diff --git a/src/pages/PostsPage.res b/src/pages/PostsPage.res
index 4843fa0..b9e3dab 100644
--- a/src/pages/PostsPage.res
+++ b/src/pages/PostsPage.res
@@ -15,29 +15,42 @@ module PostsQuery = %relay(`
   }
 `)
 
-module PostCard = {
+module PostItem = {
   module Typography = Typography.Typography
-  module Card = Card.Card
 
   @react.component
   let make = (~title, ~body, ~authorName, ~createdAt) => {
-    <Card variant=#outlined className={css({"marginBottom": "1rem"})}>
-      <Card.Header>
-        <Typography.Heading level=#h3 size=#lg> {React.string(title)} </Typography.Heading>
-      </Card.Header>
-      <Card.Body>
-        <Typography.Body> {React.string(body)} </Typography.Body>
-        <div
-          className={css({
-            "display": "flex",
-            "justifyContent": "space-between",
-            "marginTop": "1rem",
-          })}>
-          <Typography.Caption> {React.string(authorName)} </Typography.Caption>
-          <Typography.Caption> {React.string(createdAt)} </Typography.Caption>
-        </div>
-      </Card.Body>
-    </Card>
+    let itemStyles = css({
+      "borderBottom": `1px solid ${Color.border}`,
+      "paddingBottom": "2rem",
+      "marginBottom": "2rem",
+    })
+
+    let metaStyles = css({
+      "display": "flex",
+      "gap": "0.5rem",
+      "alignItems": "center",
+      "marginBottom": "0.75rem",
+    })
+
+    let dotStyles = css({
+      "color": Color.textSecondary,
+      "fontSize": "0.75rem",
+    })
+
+    <article className={itemStyles}>
+      <div className={metaStyles}>
+        <Typography.Overline> {React.string(authorName)} </Typography.Overline>
+        <span className={dotStyles}> {React.string({`\u00B7`})} </span>
+        <Typography.Overline> {React.string(createdAt)} </Typography.Overline>
+      </div>
+      <Typography.Heading level=#h2 size=#"2xl">
+        {React.string(title)}
+      </Typography.Heading>
+      <Typography.Body className={css({"color": Color.textSecondary, "margin": "0"})}>
+        {React.string(body)}
+      </Typography.Body>
+    </article>
   }
 }
 
@@ -51,7 +64,7 @@ module PostsList = {
     <div>
       {data.posts
       ->Array.map(post => {
-        <PostCard
+        <PostItem
           key={post.id}
           title={post.title}
           body={post.body}
@@ -66,34 +79,33 @@ module PostsList = {
 
 module ServerUnavailable = {
   module Typography = Typography.Typography
-  module Card = Card.Card
 
   @react.component
   let make = () => {
-    <Card variant=#outlined>
-      <Card.Body>
-        <Typography.Heading level=#h3>
-          {React.string("GraphQL Server Not Running")}
-        </Typography.Heading>
-        <Typography.Body className={css({"color": Color.textSecondary})}>
-          {React.string(
-            "The Posts page requires the mock GraphQL server. Start it locally with:",
-          )}
-        </Typography.Body>
-        <code
-          className={css({
-            "display": "block",
-            "padding": "0.75rem 1rem",
-            "marginTop": "0.75rem",
-            "backgroundColor": Color.bgElevated,
-            "borderRadius": "0.375rem",
-            "fontSize": "0.875rem",
-            "color": Color.primary,
-          })}>
-          {React.string("bun run dev:server")}
-        </code>
-      </Card.Body>
-    </Card>
+    let containerStyles = css({
+      "borderTop": `2px solid ${Color.primary}`,
+      "padding": "2rem 0",
+    })
+
+    <div className={containerStyles}>
+      <Typography.Heading level=#h3>
+        {React.string("GraphQL Server Not Running")}
+      </Typography.Heading>
+      <Typography.Body className={css({"color": Color.textSecondary})}>
+        {React.string("Start the mock server to see posts:")}
+      </Typography.Body>
+      <code
+        className={css({
+          "display": "block",
+          "padding": "0.75rem 1rem",
+          "marginTop": "0.75rem",
+          "backgroundColor": Color.bgElevated,
+          "fontSize": "0.875rem",
+          "color": Color.primary,
+        })}>
+        {React.string("bun run dev:server")}
+      </code>
+    </div>
   }
 }
 
@@ -103,19 +115,17 @@ module Typography = Typography.Typography
 let make = () => {
   let containerStyles = css({
     "padding": "4rem 1rem",
-    "maxWidth": "800px",
+    "maxWidth": "680px",
     "margin": "0 auto",
   })
 
   <div className={containerStyles}>
-    <Typography.Display size=#"3xl"> {React.string("Posts")} </Typography.Display>
-    <Typography.Body
-      className={css({"marginTop": "0.5rem", "marginBottom": "2rem", "color": Color.textSecondary})}>
-      {React.string("Data fetched from the mock GraphQL server via Relay.")}
-    </Typography.Body>
+    <Typography.Overline className={css({"marginBottom": "2rem"})}>
+      {React.string("Recent Writing")}
+    </Typography.Overline>
     <RescriptReactErrorBoundary fallback={_ => <ServerUnavailable />}>
       <React.Suspense
-        fallback={<Typography.Body> {React.string("Loading posts...")} </Typography.Body>}>
+        fallback={<Typography.Body className={css({"color": Color.textSecondary})}> {React.string("Loading...")} </Typography.Body>}>
         <PostsList />
       </React.Suspense>
     </RescriptReactErrorBoundary>
diff --git a/src/styles/GlobalStyles.res b/src/styles/GlobalStyles.res
index 215cad8..752c382 100644
--- a/src/styles/GlobalStyles.res
+++ b/src/styles/GlobalStyles.res
@@ -18,9 +18,9 @@ let injectGlobalStyles = () => {
 
     body {
       font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-      font-size: 1rem;
+      font-size: 1.0625rem;
       font-weight: 400;
-      line-height: 1.5;
+      line-height: 1.75;
       color: #ece4d8;
       background-color: #1a1816;
       min-height: 100vh;
@@ -30,18 +30,20 @@ let injectGlobalStyles = () => {
 
     /* Typography Elements */
     h1, h2, h3, h4, h5, h6 {
+      font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
       color: #ece4d8;
-      font-weight: 600;
-      line-height: 1.25;
+      font-weight: 400;
+      line-height: 1.2;
+      letter-spacing: -0.02em;
       margin-bottom: 1rem;
     }
 
-    h1 { font-size: 2.25rem; font-weight: 700; }
-    h2 { font-size: 1.875rem; }
+    h1 { font-size: 2.5rem; }
+    h2 { font-size: 2rem; }
     h3 { font-size: 1.5rem; }
     h4 { font-size: 1.25rem; }
     h5 { font-size: 1.125rem; }
-    h6 { font-size: 1rem; font-weight: 500; }
+    h6 { font-size: 1rem; }
 
     p {
       margin-bottom: 1rem;
@@ -59,6 +61,7 @@ let injectGlobalStyles = () => {
     a:hover {
       color: #dfc088;
       text-decoration: underline;
+      text-underline-offset: 3px;
     }
 
     a:focus {
diff --git a/src/styles/Theme.res b/src/styles/Theme.res
index 72d73c0..bcbe404 100644
--- a/src/styles/Theme.res
+++ b/src/styles/Theme.res
@@ -85,6 +85,7 @@ module Theme = {
   module Typography = {
     let fontFamily = {
       "sans": "Inter, Avenir, Helvetica, Arial, sans-serif",
+      "serif": "'Playfair Display', Georgia, 'Times New Roman', serif",
       "mono": "'Fira Code', 'Monaco', 'Cascadia Code', monospace",
     }
 
