From 7c3cf656b58a3d2628ff77aba878761873e0c800 Mon Sep 17 00:00:00 2001
From: gosangam <sangam4742@gmail.com>
Date: Sun, 14 Jun 2026 02:59:42 +0530
Subject: [PATCH] feat: add search in page for books, magazines and other docs

---
 app/(app)/books/bbd/[chapter]/page.tsx        | 18 ++++++++-----
 app/(app)/books/bg/[chapter]/[verse]/page.tsx | 10 ++++---
 app/(app)/books/bk/[chapter]/page.tsx         | 18 ++++++++-----
 app/(app)/books/bs/[chapter]/[verse]/page.tsx | 10 ++++---
 app/(app)/books/bs/[chapter]/page.tsx         | 12 ++++++---
 app/(app)/books/cbhc/[chapter]/page.tsx       | 18 ++++++++-----
 .../cc/[lila]/[chapter]/[verse]/page.tsx      | 10 ++++---
 app/(app)/books/chapter-viewer.tsx            |  4 ++-
 app/(app)/books/ds/[chapter]/page.tsx         | 18 ++++++++-----
 app/(app)/books/ej/[chapter]/page.tsx         | 18 ++++++++-----
 app/(app)/books/ek/[chapter]/page.tsx         | 18 ++++++++-----
 app/(app)/books/gg/[chapter]/page.tsx         | 18 ++++++++-----
 app/(app)/books/hkh/[chapter]/page.tsx        | 18 ++++++++-----
 app/(app)/books/iso/[mantra]/page.tsx         | 26 +++++++++++--------
 app/(app)/books/kb/[volume]/[slug]/page.tsx   | 18 ++++++++-----
 app/(app)/books/lcl/[chapter]/page.tsx        | 18 ++++++++-----
 app/(app)/books/lob/[chapter]/page.tsx        | 18 ++++++++-----
 app/(app)/books/mg/[chapter]/page.tsx         | 18 ++++++++-----
 app/(app)/books/mm/[chapter]/[verse]/page.tsx | 10 ++++---
 app/(app)/books/mm/[chapter]/page.tsx         | 12 ++++++---
 app/(app)/books/mog/[chapter]/page.tsx        | 18 ++++++++-----
 .../books/nbs/[chapter]/[verse]/page.tsx      | 10 ++++---
 app/(app)/books/nbs/[chapter]/page.tsx        | 12 ++++++---
 app/(app)/books/nod/[chapter]/page.tsx        | 18 ++++++++-----
 app/(app)/books/noi/[text]/page.tsx           | 26 +++++++++++--------
 app/(app)/books/ochkm/[chapter]/page.tsx      | 18 ++++++++-----
 app/(app)/books/owk/[chapter]/page.tsx        | 18 ++++++++-----
 app/(app)/books/pk/[chapter]/page.tsx         | 18 ++++++++-----
 app/(app)/books/poy/[chapter]/page.tsx        | 18 ++++++++-----
 app/(app)/books/pqpa/[chapter]/page.tsx       | 18 ++++++++-----
 app/(app)/books/rv/[chapter]/page.tsx         | 18 ++++++++-----
 .../sb/[canto]/[chapter]/[verse]/page.tsx     | 10 ++++---
 .../books/sb1962/[chapter]/[verse]/page.tsx   | 10 ++++---
 app/(app)/books/ssr/[chapter]/page.tsx        | 18 ++++++++-----
 app/(app)/books/sva/[chapter]/page.tsx        | 18 ++++++++-----
 app/(app)/books/tlc/[chapter]/page.tsx        | 18 ++++++++-----
 app/(app)/books/tlk/[chapter]/page.tsx        | 18 ++++++++-----
 app/(app)/books/tqk/[chapter]/page.tsx        | 18 ++++++++-----
 app/(app)/books/ttp/[chapter]/page.tsx        | 18 ++++++++-----
 app/(app)/books/va/[chapter]/page.tsx         | 12 ++++++---
 app/(app)/magazines/[slug]/[issue]/page.tsx   | 12 ++++++---
 .../other-documents/[slug]/[chapter]/page.tsx | 14 ++++++----
 42 files changed, 417 insertions(+), 251 deletions(-)

diff --git a/app/(app)/books/bbd/[chapter]/page.tsx b/app/(app)/books/bbd/[chapter]/page.tsx
index 0013b31b..6aff09c3 100644
--- a/app/(app)/books/bbd/[chapter]/page.tsx
+++ b/app/(app)/books/bbd/[chapter]/page.tsx
@@ -18,6 +18,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -77,12 +78,15 @@ export default async function BbdChapterPage({
         >
           &larr; Beyond Birth and Death
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +104,7 @@ export default async function BbdChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/books/bg/[chapter]/[verse]/page.tsx b/app/(app)/books/bg/[chapter]/[verse]/page.tsx
index 2c1b1ac6..b702cd83 100644
--- a/app/(app)/books/bg/[chapter]/[verse]/page.tsx
+++ b/app/(app)/books/bg/[chapter]/[verse]/page.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import Link from "next/link";
 import { PageHeader } from "@/components/layout/page-header";
+import { FindInPage } from "@/components/layout/find-in-page";
 import { notFound } from "next/navigation";
 import { getBookMeta, getSingleVerse, getChapterVerseIndex } from "@/lib/api";
 import { ChapterViewer } from "@/app/(app)/books/chapter-viewer";
@@ -101,9 +102,12 @@ export default async function VersePage({
         >
           &larr; Bhagavad-gītā
         </Link>
-        <h1 className="mt-2 text-2xl font-bold text-foreground">
-          Chapter {chapter}: {title}
-        </h1>
+        <div className="mt-2 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            Chapter {chapter}: {title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
diff --git a/app/(app)/books/bk/[chapter]/page.tsx b/app/(app)/books/bk/[chapter]/page.tsx
index 3534b78b..53b7762f 100644
--- a/app/(app)/books/bk/[chapter]/page.tsx
+++ b/app/(app)/books/bk/[chapter]/page.tsx
@@ -16,6 +16,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 export const dynamic = "force-dynamic";
 
@@ -69,12 +70,15 @@ export default async function BkChapterPage({
         >
           &larr; Bhagavāner Kathā
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -92,7 +96,7 @@ export default async function BkChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/books/bs/[chapter]/[verse]/page.tsx b/app/(app)/books/bs/[chapter]/[verse]/page.tsx
index 69d16830..0ed53e90 100644
--- a/app/(app)/books/bs/[chapter]/[verse]/page.tsx
+++ b/app/(app)/books/bs/[chapter]/[verse]/page.tsx
@@ -3,6 +3,7 @@ import fs from "fs";
 import path from "path";
 import Link from "next/link";
 import { PageHeader } from "@/components/layout/page-header";
+import { FindInPage } from "@/components/layout/find-in-page";
 import { notFound } from "next/navigation";
 import {
   getBookMeta,
@@ -187,9 +188,12 @@ export default async function VersePage({
         >
           &larr; Śrī Brahma-saṁhitā
         </Link>
-        <h1 className="mt-2 text-2xl font-bold text-foreground">
-          Chapter {chapter}: {title}
-        </h1>
+        <div className="mt-2 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            Chapter {chapter}: {title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
diff --git a/app/(app)/books/bs/[chapter]/page.tsx b/app/(app)/books/bs/[chapter]/page.tsx
index 0c95d31e..3b2c2aeb 100644
--- a/app/(app)/books/bs/[chapter]/page.tsx
+++ b/app/(app)/books/bs/[chapter]/page.tsx
@@ -8,6 +8,7 @@ import { buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
 import { Card, CardContent } from "@/components/ui/card";
 import { PageHeader } from "@/components/layout/page-header";
+import { FindInPage } from "@/components/layout/find-in-page";
 import Link from "next/link";
 import fs from "fs";
 import path from "path";
@@ -59,13 +60,16 @@ export default async function BsChapterPage({
           >
             &larr; Śrī Brahma-saṁhitā
           </Link>
-          <h1 className="mt-3 text-2xl font-bold text-foreground">
-            {segment.title}
-          </h1>
+          <div className="mt-3 flex items-start justify-between gap-3">
+            <h1 className="text-2xl font-bold text-foreground">
+              {segment.title}
+            </h1>
+            <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+          </div>
         </PageHeader>
 
         <main className="max-w-5xl mx-auto px-6 py-8">
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {segment.paragraphs.map((paragraph: string, i: number) => (
diff --git a/app/(app)/books/cbhc/[chapter]/page.tsx b/app/(app)/books/cbhc/[chapter]/page.tsx
index 7f7c5f01..466a3e4e 100644
--- a/app/(app)/books/cbhc/[chapter]/page.tsx
+++ b/app/(app)/books/cbhc/[chapter]/page.tsx
@@ -16,6 +16,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 export const dynamic = "force-dynamic";
 
@@ -69,12 +70,15 @@ export default async function CbhcChapterPage({
         >
           &larr; Śrī Caitanya-bhāgavata Commentary
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -92,7 +96,7 @@ export default async function CbhcChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/books/cc/[lila]/[chapter]/[verse]/page.tsx b/app/(app)/books/cc/[lila]/[chapter]/[verse]/page.tsx
index 4e333dfe..b6999bf0 100644
--- a/app/(app)/books/cc/[lila]/[chapter]/[verse]/page.tsx
+++ b/app/(app)/books/cc/[lila]/[chapter]/[verse]/page.tsx
@@ -3,6 +3,7 @@ export const dynamic = "force-dynamic";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { PageHeader } from "@/components/layout/page-header";
+import { FindInPage } from "@/components/layout/find-in-page";
 import { notFound } from "next/navigation";
 import { getBookMeta, getSingleVerse, getChapterVerseIndex } from "@/lib/api";
 import { ChapterViewer } from "@/app/(app)/books/chapter-viewer";
@@ -111,9 +112,12 @@ export default async function CcVersePage({
         >
           &larr; {lilaInfo.name}
         </Link>
-        <h1 className="mt-2 text-2xl font-bold text-foreground">
-          Chapter {chapter}: {chapterInfo.title}
-        </h1>
+        <div className="mt-2 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            Chapter {chapter}: {chapterInfo.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
diff --git a/app/(app)/books/chapter-viewer.tsx b/app/(app)/books/chapter-viewer.tsx
index 3fd26d06..5e4855d0 100644
--- a/app/(app)/books/chapter-viewer.tsx
+++ b/app/(app)/books/chapter-viewer.tsx
@@ -440,7 +440,8 @@ export function ChapterViewer({
           mobileNavBookTitle={mobileNavBookTitle}
         />
 
-        {/* Verse content */}
+        {/* Verse content — id targeted by each page header's FindInPage. */}
+        <div id="book-content">
         {loading && !currentVerse ? (
           <div className="flex items-center justify-center py-24 text-muted-foreground gap-2">
             <Loader2 className="size-5 animate-spin" />
@@ -453,6 +454,7 @@ export function ChapterViewer({
             Verse not found.
           </div>
         )}
+        </div>
 
         {/* Bottom navigation */}
         <VerseNav
diff --git a/app/(app)/books/ds/[chapter]/page.tsx b/app/(app)/books/ds/[chapter]/page.tsx
index 9952598a..5904783c 100644
--- a/app/(app)/books/ds/[chapter]/page.tsx
+++ b/app/(app)/books/ds/[chapter]/page.tsx
@@ -18,6 +18,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -83,12 +84,15 @@ export default async function DsChapterPage({
         >
           &larr; Dialectic Spiritualism
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {parentChapterNum != null && (
-            <span className="text-primary">Chapter {parentChapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {parentChapterNum != null && (
+              <span className="text-primary">Chapter {parentChapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -106,7 +110,7 @@ export default async function DsChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/books/ej/[chapter]/page.tsx b/app/(app)/books/ej/[chapter]/page.tsx
index 26eac554..ed455a9c 100644
--- a/app/(app)/books/ej/[chapter]/page.tsx
+++ b/app/(app)/books/ej/[chapter]/page.tsx
@@ -18,6 +18,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -77,12 +78,15 @@ export default async function EjChapterPage({
         >
           &larr; Easy Journey to Other Planets
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +104,7 @@ export default async function EjChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/books/ek/[chapter]/page.tsx b/app/(app)/books/ek/[chapter]/page.tsx
index 691da546..bfd626c6 100644
--- a/app/(app)/books/ek/[chapter]/page.tsx
+++ b/app/(app)/books/ek/[chapter]/page.tsx
@@ -18,6 +18,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -77,12 +78,15 @@ export default async function EkChapterPage({
         >
           &larr; Elevation to Kṛṣṇa Consciousness
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +104,7 @@ export default async function EkChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/books/gg/[chapter]/page.tsx b/app/(app)/books/gg/[chapter]/page.tsx
index b93a4e41..3bfb7279 100644
--- a/app/(app)/books/gg/[chapter]/page.tsx
+++ b/app/(app)/books/gg/[chapter]/page.tsx
@@ -16,6 +16,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 export const dynamic = "force-dynamic";
 
@@ -73,12 +74,15 @@ export default async function GgChapterPage({
         >
           &larr; Gītār Gān
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -96,7 +100,7 @@ export default async function GgChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/books/hkh/[chapter]/page.tsx b/app/(app)/books/hkh/[chapter]/page.tsx
index 0a69e541..307878b5 100644
--- a/app/(app)/books/hkh/[chapter]/page.tsx
+++ b/app/(app)/books/hkh/[chapter]/page.tsx
@@ -18,6 +18,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -77,12 +78,15 @@ export default async function HkhChapterPage({
         >
           &larr; The Kṛṣṇa Consciousness Handbook
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +104,7 @@ export default async function HkhChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/books/iso/[mantra]/page.tsx b/app/(app)/books/iso/[mantra]/page.tsx
index 5a7c0b9f..5e07eea0 100644
--- a/app/(app)/books/iso/[mantra]/page.tsx
+++ b/app/(app)/books/iso/[mantra]/page.tsx
@@ -17,6 +17,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Type guards
@@ -109,15 +110,18 @@ export default async function IsoMantraPage({
         >
           &larr; Śrī Īśopaniṣad
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {verse && (
-            <>
-              <span className="text-primary">{verse.reference}: </span>
-              {verse.bookTitle}
-            </>
-          )}
-          {intro && intro.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {verse && (
+              <>
+                <span className="text-primary">{verse.reference}: </span>
+                {verse.bookTitle}
+              </>
+            )}
+            {intro && intro.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -157,7 +161,7 @@ export default async function IsoMantraPage({
 
 function VerseContent({ verse }: { verse: IsoVerse }) {
   return (
-    <Card>
+    <Card id="book-content">
       <CardContent className="py-8 px-6 sm:px-8 space-y-8">
         {/* Devanagari */}
         <section>
@@ -233,7 +237,7 @@ function VerseContent({ verse }: { verse: IsoVerse }) {
 
 function IntroContent({ intro }: { intro: IsoIntroSegment }) {
   return (
-    <Card>
+    <Card id="book-content">
       <CardContent className="py-8 px-6 sm:px-8">
         <div className="space-y-4">
           {intro.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/books/kb/[volume]/[slug]/page.tsx b/app/(app)/books/kb/[volume]/[slug]/page.tsx
index 006c9626..65a0a988 100644
--- a/app/(app)/books/kb/[volume]/[slug]/page.tsx
+++ b/app/(app)/books/kb/[volume]/[slug]/page.tsx
@@ -12,6 +12,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 export async function generateMetadata({
   params,
@@ -72,12 +73,15 @@ export default async function KbChapterPage({
         >
           &larr; Volume {vol}
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterLabel && (
-            <span className="text-primary">{chapterLabel}: </span>
-          )}
-          {chapter.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterLabel && (
+              <span className="text-primary">{chapterLabel}: </span>
+            )}
+            {chapter.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +104,7 @@ export default async function KbChapterPage({
           />
 
           {/* Chapter content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {chapter.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/books/lcl/[chapter]/page.tsx b/app/(app)/books/lcl/[chapter]/page.tsx
index d52f20b6..a1c139b8 100644
--- a/app/(app)/books/lcl/[chapter]/page.tsx
+++ b/app/(app)/books/lcl/[chapter]/page.tsx
@@ -18,6 +18,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -77,12 +78,15 @@ export default async function LclChapterPage({
         >
           &larr; Life Comes from Life
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +104,7 @@ export default async function LclChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/books/lob/[chapter]/page.tsx b/app/(app)/books/lob/[chapter]/page.tsx
index e08bf7c7..85924989 100644
--- a/app/(app)/books/lob/[chapter]/page.tsx
+++ b/app/(app)/books/lob/[chapter]/page.tsx
@@ -18,6 +18,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 export async function generateMetadata({
   params,
@@ -73,12 +74,15 @@ export default async function LobChapterPage({
         >
           &larr; Light of the Bh&#257;gavata
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Text {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Text {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -96,7 +100,7 @@ export default async function LobChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) =>
diff --git a/app/(app)/books/mg/[chapter]/page.tsx b/app/(app)/books/mg/[chapter]/page.tsx
index 4614b1f4..1348da21 100644
--- a/app/(app)/books/mg/[chapter]/page.tsx
+++ b/app/(app)/books/mg/[chapter]/page.tsx
@@ -18,6 +18,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 export async function generateMetadata({
   params,
@@ -73,12 +74,15 @@ export default async function MgChapterPage({
         >
           &larr; Kṛṣṇa Consciousness: The Matchless Gift
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -96,7 +100,7 @@ export default async function MgChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/books/mm/[chapter]/[verse]/page.tsx b/app/(app)/books/mm/[chapter]/[verse]/page.tsx
index be246ec0..32b3eccc 100644
--- a/app/(app)/books/mm/[chapter]/[verse]/page.tsx
+++ b/app/(app)/books/mm/[chapter]/[verse]/page.tsx
@@ -2,6 +2,7 @@ import fs from "fs";
 import path from "path";
 import Link from "next/link";
 import { PageHeader } from "@/components/layout/page-header";
+import { FindInPage } from "@/components/layout/find-in-page";
 import { notFound } from "next/navigation";
 import {
   getBookMeta,
@@ -187,9 +188,12 @@ export default async function VersePage({
         >
           &larr; Mukunda-mālā-stotra
         </Link>
-        <h1 className="mt-2 text-2xl font-bold text-foreground">
-          Chapter {chapter}: {title}
-        </h1>
+        <div className="mt-2 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            Chapter {chapter}: {title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
diff --git a/app/(app)/books/mm/[chapter]/page.tsx b/app/(app)/books/mm/[chapter]/page.tsx
index 93862168..a8883640 100644
--- a/app/(app)/books/mm/[chapter]/page.tsx
+++ b/app/(app)/books/mm/[chapter]/page.tsx
@@ -8,6 +8,7 @@ import { buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
 import { Card, CardContent } from "@/components/ui/card";
 import { PageHeader } from "@/components/layout/page-header";
+import { FindInPage } from "@/components/layout/find-in-page";
 import Link from "next/link";
 import fs from "fs";
 import path from "path";
@@ -59,13 +60,16 @@ export default async function MmChapterPage({
           >
             &larr; Mukunda-mālā-stotra
           </Link>
-          <h1 className="mt-3 text-2xl font-bold text-foreground">
-            {segment.title}
-          </h1>
+          <div className="mt-3 flex items-start justify-between gap-3">
+            <h1 className="text-2xl font-bold text-foreground">
+              {segment.title}
+            </h1>
+            <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+          </div>
         </PageHeader>
 
         <main className="max-w-5xl mx-auto px-6 py-8">
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {segment.paragraphs.map((paragraph: string, i: number) => (
diff --git a/app/(app)/books/mog/[chapter]/page.tsx b/app/(app)/books/mog/[chapter]/page.tsx
index 336f9434..5c0a834f 100644
--- a/app/(app)/books/mog/[chapter]/page.tsx
+++ b/app/(app)/books/mog/[chapter]/page.tsx
@@ -18,6 +18,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -77,12 +78,15 @@ export default async function MogChapterPage({
         >
           &larr; Message of Godhead
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +104,7 @@ export default async function MogChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/books/nbs/[chapter]/[verse]/page.tsx b/app/(app)/books/nbs/[chapter]/[verse]/page.tsx
index 61c46105..3d136e38 100644
--- a/app/(app)/books/nbs/[chapter]/[verse]/page.tsx
+++ b/app/(app)/books/nbs/[chapter]/[verse]/page.tsx
@@ -5,6 +5,7 @@ import fs from "fs";
 import path from "path";
 import Link from "next/link";
 import { PageHeader } from "@/components/layout/page-header";
+import { FindInPage } from "@/components/layout/find-in-page";
 import { notFound } from "next/navigation";
 import {
   getBookMeta,
@@ -192,9 +193,12 @@ export default async function VersePage({
         >
           &larr; Nārada-bhakti-sūtra
         </Link>
-        <h1 className="mt-2 text-2xl font-bold text-foreground">
-          Chapter {chapter}: {title}
-        </h1>
+        <div className="mt-2 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            Chapter {chapter}: {title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
diff --git a/app/(app)/books/nbs/[chapter]/page.tsx b/app/(app)/books/nbs/[chapter]/page.tsx
index eafac9ea..db0e3978 100644
--- a/app/(app)/books/nbs/[chapter]/page.tsx
+++ b/app/(app)/books/nbs/[chapter]/page.tsx
@@ -8,6 +8,7 @@ import { buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
 import { Card, CardContent } from "@/components/ui/card";
 import { PageHeader } from "@/components/layout/page-header";
+import { FindInPage } from "@/components/layout/find-in-page";
 import Link from "next/link";
 import fs from "fs";
 import path from "path";
@@ -62,13 +63,16 @@ export default async function NbsChapterPage({
           >
             &larr; Nārada-bhakti-sūtra
           </Link>
-          <h1 className="mt-3 text-2xl font-bold text-foreground">
-            {segment.title}
-          </h1>
+          <div className="mt-3 flex items-start justify-between gap-3">
+            <h1 className="text-2xl font-bold text-foreground">
+              {segment.title}
+            </h1>
+            <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+          </div>
         </PageHeader>
 
         <main className="max-w-5xl mx-auto px-6 py-8">
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {segment.paragraphs.map((paragraph: string, i: number) => (
diff --git a/app/(app)/books/nod/[chapter]/page.tsx b/app/(app)/books/nod/[chapter]/page.tsx
index c878e923..a45447f9 100644
--- a/app/(app)/books/nod/[chapter]/page.tsx
+++ b/app/(app)/books/nod/[chapter]/page.tsx
@@ -18,6 +18,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -77,12 +78,15 @@ export default async function NodChapterPage({
         >
           &larr; The Nectar of Devotion
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +104,7 @@ export default async function NodChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/books/noi/[text]/page.tsx b/app/(app)/books/noi/[text]/page.tsx
index b1cc157f..c3650224 100644
--- a/app/(app)/books/noi/[text]/page.tsx
+++ b/app/(app)/books/noi/[text]/page.tsx
@@ -17,6 +17,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Type guards
@@ -100,15 +101,18 @@ export default async function NoiTextPage({
         >
           &larr; The Nectar of Instruction
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {verse && (
-            <>
-              <span className="text-primary">Text {verse.text}: </span>
-              {verse.title}
-            </>
-          )}
-          {intro && intro.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {verse && (
+              <>
+                <span className="text-primary">Text {verse.text}: </span>
+                {verse.title}
+              </>
+            )}
+            {intro && intro.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -148,7 +152,7 @@ export default async function NoiTextPage({
 
 function VerseContent({ verse }: { verse: NoiVerse }) {
   return (
-    <Card>
+    <Card id="book-content">
       <CardContent className="py-8 px-6 sm:px-8 space-y-8">
         {/* Devanagari */}
         <section>
@@ -224,7 +228,7 @@ function VerseContent({ verse }: { verse: NoiVerse }) {
 
 function IntroContent({ intro }: { intro: NoiIntroSegment }) {
   return (
-    <Card>
+    <Card id="book-content">
       <CardContent className="py-8 px-6 sm:px-8">
         <div className="space-y-4">
           {intro.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/books/ochkm/[chapter]/page.tsx b/app/(app)/books/ochkm/[chapter]/page.tsx
index 08cb78a0..9492ce10 100644
--- a/app/(app)/books/ochkm/[chapter]/page.tsx
+++ b/app/(app)/books/ochkm/[chapter]/page.tsx
@@ -18,6 +18,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -77,12 +78,15 @@ export default async function OchkmChapterPage({
         >
           &larr; On Chanting the Hare Kṛṣṇa Mantra
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +104,7 @@ export default async function OchkmChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/books/owk/[chapter]/page.tsx b/app/(app)/books/owk/[chapter]/page.tsx
index 1d555043..0e5db06f 100644
--- a/app/(app)/books/owk/[chapter]/page.tsx
+++ b/app/(app)/books/owk/[chapter]/page.tsx
@@ -18,6 +18,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -77,12 +78,15 @@ export default async function OwkChapterPage({
         >
           &larr; On the Way to Kṛṣṇa
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +104,7 @@ export default async function OwkChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/books/pk/[chapter]/page.tsx b/app/(app)/books/pk/[chapter]/page.tsx
index 0a3ed54b..af328db3 100644
--- a/app/(app)/books/pk/[chapter]/page.tsx
+++ b/app/(app)/books/pk/[chapter]/page.tsx
@@ -18,6 +18,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -72,12 +73,15 @@ export default async function PkChapterPage({
         >
           &larr; Prayers of King Kulaśekhara
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Verse {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Verse {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -95,7 +99,7 @@ export default async function PkChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/books/poy/[chapter]/page.tsx b/app/(app)/books/poy/[chapter]/page.tsx
index 4849bd5e..6fce201f 100644
--- a/app/(app)/books/poy/[chapter]/page.tsx
+++ b/app/(app)/books/poy/[chapter]/page.tsx
@@ -18,6 +18,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -77,12 +78,15 @@ export default async function PoyChapterPage({
         >
           &larr; The Perfection of Yoga
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +104,7 @@ export default async function PoyChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/books/pqpa/[chapter]/page.tsx b/app/(app)/books/pqpa/[chapter]/page.tsx
index 28f4edcb..2ffbdc6a 100644
--- a/app/(app)/books/pqpa/[chapter]/page.tsx
+++ b/app/(app)/books/pqpa/[chapter]/page.tsx
@@ -18,6 +18,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -77,12 +78,15 @@ export default async function PqpaChapterPage({
         >
           &larr; Perfect Questions Perfect Answers
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +104,7 @@ export default async function PqpaChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/books/rv/[chapter]/page.tsx b/app/(app)/books/rv/[chapter]/page.tsx
index 6d4c6567..c2367e84 100644
--- a/app/(app)/books/rv/[chapter]/page.tsx
+++ b/app/(app)/books/rv/[chapter]/page.tsx
@@ -18,6 +18,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -77,12 +78,15 @@ export default async function RvChapterPage({
         >
           &larr; Rāja-vidyā: The King of Knowledge
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +104,7 @@ export default async function RvChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/books/sb/[canto]/[chapter]/[verse]/page.tsx b/app/(app)/books/sb/[canto]/[chapter]/[verse]/page.tsx
index f027cc25..d7c3411a 100644
--- a/app/(app)/books/sb/[canto]/[chapter]/[verse]/page.tsx
+++ b/app/(app)/books/sb/[canto]/[chapter]/[verse]/page.tsx
@@ -3,6 +3,7 @@ export const dynamic = "force-dynamic";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { PageHeader } from "@/components/layout/page-header";
+import { FindInPage } from "@/components/layout/find-in-page";
 import { notFound } from "next/navigation";
 import { getBookMeta, getSingleVerse, getChapterVerseIndex } from "@/lib/api";
 import { ChapterViewer } from "@/app/(app)/books/chapter-viewer";
@@ -107,9 +108,12 @@ export default async function SbVersePage({
         >
           &larr; Canto {cantoInfo.number}: {cantoInfo.title}
         </Link>
-        <h1 className="mt-2 text-2xl font-bold text-foreground">
-          Chapter {chapter}: {chapterInfo.title}
-        </h1>
+        <div className="mt-2 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            Chapter {chapter}: {chapterInfo.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
diff --git a/app/(app)/books/sb1962/[chapter]/[verse]/page.tsx b/app/(app)/books/sb1962/[chapter]/[verse]/page.tsx
index ab5f8399..aaea5cda 100644
--- a/app/(app)/books/sb1962/[chapter]/[verse]/page.tsx
+++ b/app/(app)/books/sb1962/[chapter]/[verse]/page.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import Link from "next/link";
 import { PageHeader } from "@/components/layout/page-header";
+import { FindInPage } from "@/components/layout/find-in-page";
 import { notFound } from "next/navigation";
 import { getBookMeta, getSingleVerse, getChapterVerseIndex } from "@/lib/api";
 import { ChapterViewer } from "@/app/(app)/books/chapter-viewer";
@@ -104,9 +105,12 @@ export default async function VersePage({
         >
           &larr; Śrīmad-Bhāgavatam (1962)
         </Link>
-        <h1 className="mt-2 text-2xl font-bold text-foreground">
-          Chapter {chapter}: {title}
-        </h1>
+        <div className="mt-2 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            Chapter {chapter}: {title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
diff --git a/app/(app)/books/ssr/[chapter]/page.tsx b/app/(app)/books/ssr/[chapter]/page.tsx
index 15f353a8..1e7a22ba 100644
--- a/app/(app)/books/ssr/[chapter]/page.tsx
+++ b/app/(app)/books/ssr/[chapter]/page.tsx
@@ -18,6 +18,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -83,12 +84,15 @@ export default async function SsrChapterPage({
         >
           &larr; The Science of Self-Realization
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {parentChapterNum != null && (
-            <span className="text-primary">Chapter {parentChapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {parentChapterNum != null && (
+              <span className="text-primary">Chapter {parentChapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -106,7 +110,7 @@ export default async function SsrChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/books/sva/[chapter]/page.tsx b/app/(app)/books/sva/[chapter]/page.tsx
index a40d9657..ea85f0ae 100644
--- a/app/(app)/books/sva/[chapter]/page.tsx
+++ b/app/(app)/books/sva/[chapter]/page.tsx
@@ -19,6 +19,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -84,12 +85,15 @@ export default async function SvaChapterPage({
         >
           &larr; Songs of the Vaiṣṇava Ācāryas
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {parentChapterNum != null && (
-            <span className="text-primary">Part {parentChapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {parentChapterNum != null && (
+              <span className="text-primary">Part {parentChapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -107,7 +111,7 @@ export default async function SvaChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/books/tlc/[chapter]/page.tsx b/app/(app)/books/tlc/[chapter]/page.tsx
index cbd45d6d..f116b810 100644
--- a/app/(app)/books/tlc/[chapter]/page.tsx
+++ b/app/(app)/books/tlc/[chapter]/page.tsx
@@ -18,6 +18,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -77,12 +78,15 @@ export default async function TlcChapterPage({
         >
           &larr; Teachings of Lord Caitanya
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +104,7 @@ export default async function TlcChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/books/tlk/[chapter]/page.tsx b/app/(app)/books/tlk/[chapter]/page.tsx
index dbc62140..7877cade 100644
--- a/app/(app)/books/tlk/[chapter]/page.tsx
+++ b/app/(app)/books/tlk/[chapter]/page.tsx
@@ -18,6 +18,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -77,12 +78,15 @@ export default async function TlkChapterPage({
         >
           &larr; Teachings of Lord Kapila
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +104,7 @@ export default async function TlkChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/books/tqk/[chapter]/page.tsx b/app/(app)/books/tqk/[chapter]/page.tsx
index 8e6d8e32..1571a636 100644
--- a/app/(app)/books/tqk/[chapter]/page.tsx
+++ b/app/(app)/books/tqk/[chapter]/page.tsx
@@ -18,6 +18,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -77,12 +78,15 @@ export default async function TqkChapterPage({
         >
           &larr; Teachings of Queen Kuntī
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +104,7 @@ export default async function TqkChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/books/ttp/[chapter]/page.tsx b/app/(app)/books/ttp/[chapter]/page.tsx
index 82b76c26..948b9b62 100644
--- a/app/(app)/books/ttp/[chapter]/page.tsx
+++ b/app/(app)/books/ttp/[chapter]/page.tsx
@@ -18,6 +18,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -77,12 +78,15 @@ export default async function TtpChapterPage({
         >
           &larr; Transcendental Teachings of Prahlāda Mahārāja
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +104,7 @@ export default async function TtpChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/books/va/[chapter]/page.tsx b/app/(app)/books/va/[chapter]/page.tsx
index bb198271..1dbf483f 100644
--- a/app/(app)/books/va/[chapter]/page.tsx
+++ b/app/(app)/books/va/[chapter]/page.tsx
@@ -17,6 +17,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -69,9 +70,12 @@ export default async function VaChapterPage({
         >
           &larr; Vaiśiṣṭyāṣṭakam
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -85,7 +89,7 @@ export default async function VaChapterPage({
             currentSlug={slug}
           />
 
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/magazines/[slug]/[issue]/page.tsx b/app/(app)/magazines/[slug]/[issue]/page.tsx
index effa2f42..3ed8b011 100644
--- a/app/(app)/magazines/[slug]/[issue]/page.tsx
+++ b/app/(app)/magazines/[slug]/[issue]/page.tsx
@@ -17,6 +17,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 export async function generateMetadata({
   params,
@@ -78,9 +79,12 @@ export default async function MagazineIssuePage({
         >
           &larr; {meta.title}
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -101,7 +105,7 @@ export default async function MagazineIssuePage({
             showMobileNav
           />
 
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (
diff --git a/app/(app)/other-documents/[slug]/[chapter]/page.tsx b/app/(app)/other-documents/[slug]/[chapter]/page.tsx
index 949b1458..f30ae90f 100644
--- a/app/(app)/other-documents/[slug]/[chapter]/page.tsx
+++ b/app/(app)/other-documents/[slug]/[chapter]/page.tsx
@@ -17,6 +17,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -85,10 +86,13 @@ export default async function OtherDocumentChapterPage({
         >
           &larr; {meta.title}
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          <span className="text-primary">Chapter {content.chapter}: </span>
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            <span className="text-primary">Chapter {content.chapter}: </span>
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -112,7 +116,7 @@ export default async function OtherDocumentChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (