diff --git a/marketing-site/components/Nav.jsx b/marketing-site/components/Nav.jsx
index 00e1d0b..92e4540 100644
--- a/marketing-site/components/Nav.jsx
+++ b/marketing-site/components/Nav.jsx
@@ -1,12 +1,29 @@
 import { useEffect, useRef, useState } from "react";
+import Link from "next/link";
 
 const LINKS = [
   { href: "#recipe", label: "A recipe" },
   { href: "#contents", label: "Contents" },
   { href: "#letter", label: "Why" },
   { href: "#faq", label: "FAQ" },
+  { href: "/read", label: "Sample chapter" },
 ];
 
+function NavItem({ href, label, onClick }) {
+  if (href.startsWith("/")) {
+    return (
+      <Link href={href} onClick={onClick}>
+        {label}
+      </Link>
+    );
+  }
+  return (
+    <a href={href} onClick={onClick}>
+      {label}
+    </a>
+  );
+}
+
 export default function Nav() {
   const [scrolled, setScrolled] = useState(false);
   const [open, setOpen] = useState(false);
@@ -39,16 +56,14 @@ export default function Nav() {
   return (
     <nav ref={navRef} className={`nav${scrolled ? " scrolled" : ""}${open ? " open" : ""}`}>
       <div className="nav-in">
-        <a className="logo" href="#top" onClick={close}>
+        <Link className="logo" href="/" onClick={close}>
           AIBook<b>.</b>
           <span className="dot">fun</span>
-        </a>
+        </Link>
 
         <div className="nav-links">
           {LINKS.map((l) => (
-            <a key={l.href} href={l.href}>
-              {l.label}
-            </a>
+            <NavItem key={l.href} href={l.href} label={l.label} />
           ))}
         </div>
 
@@ -70,9 +85,7 @@ export default function Nav() {
 
       <div className="nav-menu" id="mobile-menu">
         {LINKS.map((l) => (
-          <a key={l.href} href={l.href} onClick={close}>
-            {l.label}
-          </a>
+          <NavItem key={l.href} href={l.href} label={l.label} onClick={close} />
         ))}
         <a href="#get" className="btn btn-primary" onClick={close}>
           Get the preview