feat: add search in page for books, magazines and other docs

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({
         >
           ← 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) => (

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({
         >
           ← 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">

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({
         >
           ← 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) => (

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({
         >
           ← Ś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">

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({
           >
             ← Ś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) => (

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({
         >
           ← Ś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) => (

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({
         >
           ← {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">

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

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({
         >
           ← 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) => (

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({
         >
           ← 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) => (

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({
         >
           ← 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) => (

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({
         >
           ← 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) => (

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({
         >
           ← 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) => (

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({
         >
           ← Ś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) => (

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({
         >
           ← 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) => (

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({
         >
           ← 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) => (

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({
         >
           ← Light of the Bhā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) =>

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({
         >
           ← 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) => (

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({
         >
           ← 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">

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({
           >
             ← 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) => (

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({
         >
           ← 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) => (

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({
         >
           ← 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">

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({
           >
             ← 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) => (

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({
         >
           ← 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) => (

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({
         >
           ← 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) => (

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({
         >
           ← 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) => (

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({
         >
           ← 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) => (

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({
         >
           ← 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) => (

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({
         >
           ← 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) => (

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({
         >
           ← 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) => (

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({
         >
           ← 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) => (

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({
         >
           ← 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">

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({
         >
           ← Ś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">

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({
         >
           ← 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) => (

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({
         >
           ← 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) => (

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({
         >
           ← 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) => (

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({
         >
           ← 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) => (

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({
         >
           ← 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) => (

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({
         >
           ← 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) => (

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({
         >
           ← 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) => (

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({
         >
           ← {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) => (

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({
         >
           ← {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) => (