diff --git a/marketing-site/components/reader/ReaderNav.jsx b/marketing-site/components/reader/ReaderNav.jsx
new file mode 100644
index 0000000..12b26ae
--- /dev/null
+++ b/marketing-site/components/reader/ReaderNav.jsx
@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import Link from "next/link";
+
+export default function ReaderNav({ chapterName }) {
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 12);
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  return (
+    <nav className={`nav reader-nav${scrolled ? " scrolled" : ""}`}>
+      <div className="nav-in">
+        <Link className="logo" href="/">
+          AIBook<b>.</b>
+          <span className="dot">fun</span>
+        </Link>
+
+        <div className="nav-links reader-links">
+          <Link href="/read">Library</Link>
+          {chapterName ? (
+            <span className="nav-current" aria-current="page">
+              {chapterName}
+            </span>
+          ) : (
+            <span className="nav-current" aria-current="page">
+              Library
+            </span>
+          )}
+        </div>
+
+        <Link href="/#get" className="btn btn-primary nav-cta">
+          Get the preview
+        </Link>
+      </div>
+    </nav>
+  );
+}