diff --git a/app/books/bbd/page.tsx b/app/books/bbd/page.tsx
index fc33cba9..33a43c80 100644
--- a/app/books/bbd/page.tsx
+++ b/app/books/bbd/page.tsx
@@ -46,14 +46,14 @@ export default async function BbdPage() {
                     <li key={seg.slug}>
                       <Link
                         href={`/books/bbd/${seg.slug}`}
-                        className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                       >
                         <div>
                           <p className="font-medium text-foreground">
                             {seg.title}
                           </p>
                         </div>
-                        <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                        <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                           {seg.paragraphs.length} paragraphs
                         </span>
                       </Link>
@@ -77,7 +77,7 @@ export default async function BbdPage() {
                   <li key={ch.number}>
                     <Link
                       href={`/books/bbd/${ch.number}`}
-                      className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                      className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                     >
                       <div>
                         <span className="text-sm text-primary font-medium">
diff --git a/app/books/bg/[chapter]/[verse]/page.tsx b/app/books/bg/[chapter]/[verse]/page.tsx
index b78ce575..d1b70e41 100644
--- a/app/books/bg/[chapter]/[verse]/page.tsx
+++ b/app/books/bg/[chapter]/[verse]/page.tsx
@@ -43,15 +43,17 @@ export default async function VersePage({
   );
   if (!verse) notFound();
 
-  // Build mobile nav groups — single flat list of chapters
+  // Build mobile nav groups — verses for the current chapter
   const mobileNavGroups: MobileNavGroup[] = [
     {
-      title: "Chapters",
-      items: bgMeta.chapters.map((ch) => ({
-        slug: `${ch.number}`,
-        label: `${ch.number}. ${ch.title}`,
-        href: `/books/bg/${ch.number}/1`,
-        type: "chapter",
+      title: "Verses",
+      items: verseIndex.map((v) => ({
+        slug: String(v.verse),
+        label: v.verseEnd
+          ? `Verse ${chapter}.${v.verse}–${v.verseEnd}`
+          : `Verse ${chapter}.${v.verse}`,
+        href: `/books/bg/${chapter}/${v.verse}`,
+        type: "verse",
       })),
     },
   ];
@@ -85,7 +87,7 @@ export default async function VersePage({
           basePath={`/books/bg/${chapter}`}
           showBengali={false}
           mobileNavGroups={mobileNavGroups}
-          mobileNavBookTitle="Bhagavad-gītā As It Is"
+          mobileNavBookTitle={`Chapter ${chapter}: ${title}`}
         />
       </div>
     </div>
diff --git a/app/books/bg/page.tsx b/app/books/bg/page.tsx
index 03262441..3936fbd0 100644
--- a/app/books/bg/page.tsx
+++ b/app/books/bg/page.tsx
@@ -45,7 +45,7 @@ export default async function BgPage() {
                 <li key={ch.number}>
                   <Link
                     href={`/books/bg/${ch.number}`}
-                    className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                    className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                   >
                     <div>
                       <span className="text-sm text-primary font-medium">
@@ -53,7 +53,7 @@ export default async function BgPage() {
                       </span>
                       <p className="font-medium text-foreground">{ch.title}</p>
                     </div>
-                    <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                    <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                       <ExtractedVerseCount count={ch.totalVerses} />
                     </span>
                   </Link>
diff --git a/app/books/cc/[lila]/[chapter]/[verse]/page.tsx b/app/books/cc/[lila]/[chapter]/[verse]/page.tsx
index 8b9d91e1..d661eaf4 100644
--- a/app/books/cc/[lila]/[chapter]/[verse]/page.tsx
+++ b/app/books/cc/[lila]/[chapter]/[verse]/page.tsx
@@ -55,15 +55,14 @@ export default async function CcVersePage({
   if (verseIndex.length > 0) {
     mobileNavGroups.push({
       title: "Verses",
-      items: verseIndex.map((v) => {
-        const label = v.verseEnd ? `${v.reference}` : v.reference;
-        return {
-          slug: String(v.verse),
-          label,
-          href: `/books/cc/${lila}/${chapter}/${v.verse}`,
-          type: "verse",
-        };
-      }),
+      items: verseIndex.map((v) => ({
+        slug: String(v.verse),
+        label: v.verseEnd
+          ? `Verse ${chapter}.${v.verse}–${v.verseEnd}`
+          : `Verse ${chapter}.${v.verse}`,
+        href: `/books/cc/${lila}/${chapter}/${v.verse}`,
+        type: "verse",
+      })),
     });
   }
 
@@ -96,7 +95,7 @@ export default async function CcVersePage({
           showBengali={true}
           basePath={`/books/cc/${lila}/${chapter}`}
           mobileNavGroups={mobileNavGroups}
-          mobileNavBookTitle={`${lilaInfo.name} — Chapter ${chapter}`}
+          mobileNavBookTitle={`Chapter ${chapter}: ${chapterInfo.title}`}
         />
       </div>
     </div>
diff --git a/app/books/cc/[lila]/page.tsx b/app/books/cc/[lila]/page.tsx
index de4e2690..c733b90b 100644
--- a/app/books/cc/[lila]/page.tsx
+++ b/app/books/cc/[lila]/page.tsx
@@ -62,7 +62,7 @@ export default async function LilaPage({
                 <li key={ch.number}>
                   <Link
                     href={`/books/cc/${lila}/${ch.number}`}
-                    className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                    className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                   >
                     <div>
                       <span className="text-sm text-primary font-medium">
@@ -70,7 +70,7 @@ export default async function LilaPage({
                       </span>
                       <p className="font-medium text-foreground">{ch.title}</p>
                     </div>
-                    <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                    <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                       <ExtractedVerseCount count={ch.totalVerses} />
                     </span>
                   </Link>
diff --git a/app/books/cc/page.tsx b/app/books/cc/page.tsx
index 979feb9d..a2ca019a 100644
--- a/app/books/cc/page.tsx
+++ b/app/books/cc/page.tsx
@@ -58,7 +58,7 @@ export default async function CcPage() {
                   <li key={lila.key}>
                     <Link
                       href={`/books/cc/${lila.key}`}
-                      className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                      className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                     >
                       <div>
                         <Badge variant="secondary" className="mb-1">
@@ -68,7 +68,7 @@ export default async function CcPage() {
                           {lila.totalChapters} chapters
                         </p>
                       </div>
-                      <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                      <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                         <ExtractedVerseCount
                           count={totalVerses}
                           label="extracted verses"
diff --git a/app/books/ds/page.tsx b/app/books/ds/page.tsx
index db2bd73f..8718d514 100644
--- a/app/books/ds/page.tsx
+++ b/app/books/ds/page.tsx
@@ -49,14 +49,14 @@ export default async function DsPage() {
                     <li key={seg.slug}>
                       <Link
                         href={`/books/ds/${seg.slug}`}
-                        className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                       >
                         <div>
                           <p className="font-medium text-foreground">
                             {seg.title}
                           </p>
                         </div>
-                        <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                        <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                           {seg.paragraphs.length} paragraphs
                         </span>
                       </Link>
@@ -81,7 +81,7 @@ export default async function DsPage() {
                     <li key={sub.slug}>
                       <Link
                         href={`/books/ds/${sub.slug}`}
-                        className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                       >
                         <p className="font-medium text-foreground">
                           {sub.title}
diff --git a/app/books/ej/page.tsx b/app/books/ej/page.tsx
index 90fd1e0b..5580afe4 100644
--- a/app/books/ej/page.tsx
+++ b/app/books/ej/page.tsx
@@ -49,14 +49,14 @@ export default async function EjPage() {
                     <li key={seg.slug}>
                       <Link
                         href={`/books/ej/${seg.slug}`}
-                        className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                       >
                         <div>
                           <p className="font-medium text-foreground">
                             {seg.title}
                           </p>
                         </div>
-                        <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                        <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                           {seg.paragraphs.length} paragraphs
                         </span>
                       </Link>
@@ -80,7 +80,7 @@ export default async function EjPage() {
                   <li key={ch.number}>
                     <Link
                       href={`/books/ej/${ch.number}`}
-                      className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                      className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                     >
                       <div>
                         <span className="text-sm text-primary font-medium">
diff --git a/app/books/ek/page.tsx b/app/books/ek/page.tsx
index ce0a16eb..3c091901 100644
--- a/app/books/ek/page.tsx
+++ b/app/books/ek/page.tsx
@@ -46,14 +46,14 @@ export default async function EkPage() {
                     <li key={seg.slug}>
                       <Link
                         href={`/books/ek/${seg.slug}`}
-                        className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                       >
                         <div>
                           <p className="font-medium text-foreground">
                             {seg.title}
                           </p>
                         </div>
-                        <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                        <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                           {seg.paragraphs.length} paragraphs
                         </span>
                       </Link>
@@ -77,7 +77,7 @@ export default async function EkPage() {
                   <li key={ch.number}>
                     <Link
                       href={`/books/ek/${ch.number}`}
-                      className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                      className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                     >
                       <div>
                         <span className="text-sm text-primary font-medium">
diff --git a/app/books/hkh/page.tsx b/app/books/hkh/page.tsx
index f0a0a3b9..c5ddcefa 100644
--- a/app/books/hkh/page.tsx
+++ b/app/books/hkh/page.tsx
@@ -46,14 +46,14 @@ export default async function HkhPage() {
                     <li key={seg.slug}>
                       <Link
                         href={`/books/hkh/${seg.slug}`}
-                        className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                       >
                         <div>
                           <p className="font-medium text-foreground">
                             {seg.title}
                           </p>
                         </div>
-                        <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                        <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                           {seg.paragraphs.length} paragraphs
                         </span>
                       </Link>
@@ -77,7 +77,7 @@ export default async function HkhPage() {
                   <li key={ch.number}>
                     <Link
                       href={`/books/hkh/${ch.number}`}
-                      className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                      className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                     >
                       <div>
                         <span className="text-sm text-primary font-medium">
diff --git a/app/books/iso/page.tsx b/app/books/iso/page.tsx
index f5709b8e..8402af8e 100644
--- a/app/books/iso/page.tsx
+++ b/app/books/iso/page.tsx
@@ -54,14 +54,14 @@ export default async function IsoPage() {
                     <li>
                       <Link
                         href="/books/iso/intro-front-pages"
-                        className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                       >
                         <div>
                           <p className="font-medium text-foreground">
                             {frontPages.title}
                           </p>
                         </div>
-                        <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                        <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                           {frontPages.paragraphs.length} paragraphs
                         </span>
                       </Link>
@@ -71,14 +71,14 @@ export default async function IsoPage() {
                     <li>
                       <Link
                         href="/books/iso/intro-introduction"
-                        className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                       >
                         <div>
                           <p className="font-medium text-foreground">
                             {introduction.title}
                           </p>
                         </div>
-                        <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                        <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                           {introduction.paragraphs.length} paragraphs
                         </span>
                       </Link>
@@ -103,7 +103,7 @@ export default async function IsoPage() {
                   <li>
                     <Link
                       href="/books/iso/invocation"
-                      className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                      className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                     >
                       <div>
                         <span className="text-sm text-primary font-medium">
@@ -122,7 +122,7 @@ export default async function IsoPage() {
                   <li key={m.number}>
                     <Link
                       href={`/books/iso/${m.number}`}
-                      className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                      className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                     >
                       <div>
                         <span className="text-sm text-primary font-medium">
@@ -150,14 +150,14 @@ export default async function IsoPage() {
                   <li>
                     <Link
                       href="/books/iso/intro-about-the-author"
-                      className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                      className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                     >
                       <div>
                         <p className="font-medium text-foreground">
                           {aboutAuthor.title}
                         </p>
                       </div>
-                      <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                      <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                         {aboutAuthor.paragraphs.length} paragraphs
                       </span>
                     </Link>
diff --git a/app/books/kb/[volume]/page.tsx b/app/books/kb/[volume]/page.tsx
index eb5592e7..68d46d00 100644
--- a/app/books/kb/[volume]/page.tsx
+++ b/app/books/kb/[volume]/page.tsx
@@ -51,14 +51,14 @@ export default async function KbVolumePage({
                     <li key={seg.slug}>
                       <Link
                         href={`/books/kb/${vol}/${seg.slug}`}
-                        className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                       >
                         <div>
                           <p className="font-medium text-foreground">
                             {seg.title}
                           </p>
                         </div>
-                        <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                        <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                           {seg.paragraphs.length} paragraphs
                         </span>
                       </Link>
@@ -82,7 +82,7 @@ export default async function KbVolumePage({
                   <li key={ch.slug}>
                     <Link
                       href={`/books/kb/${vol}/${ch.slug}`}
-                      className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                      className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                     >
                       <div>
                         <span className="text-sm text-primary font-medium">
@@ -92,7 +92,7 @@ export default async function KbVolumePage({
                           {ch.title}
                         </p>
                       </div>
-                      <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                      <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                         {ch.paragraphs.length} paragraphs
                       </span>
                     </Link>
diff --git a/app/books/kb/page.tsx b/app/books/kb/page.tsx
index 123ad0e6..274c95d0 100644
--- a/app/books/kb/page.tsx
+++ b/app/books/kb/page.tsx
@@ -42,7 +42,7 @@ export default async function KbPage() {
                 <li key={vol.number}>
                   <Link
                     href={`/books/kb/${vol.number}`}
-                    className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                    className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                   >
                     <div>
                       <Badge variant="secondary" className="mb-1">
diff --git a/app/books/mg/page.tsx b/app/books/mg/page.tsx
index 5efefb4e..6e7b0760 100644
--- a/app/books/mg/page.tsx
+++ b/app/books/mg/page.tsx
@@ -46,14 +46,14 @@ export default async function MgPage() {
                     <li key={seg.slug}>
                       <Link
                         href={`/books/mg/${seg.slug}`}
-                        className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                       >
                         <div>
                           <p className="font-medium text-foreground">
                             {seg.title}
                           </p>
                         </div>
-                        <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                        <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                           {seg.paragraphs.length} paragraphs
                         </span>
                       </Link>
@@ -77,7 +77,7 @@ export default async function MgPage() {
                   <li key={ch.number}>
                     <Link
                       href={`/books/mg/${ch.number}`}
-                      className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                      className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                     >
                       <div>
                         <span className="text-sm text-primary font-medium">
diff --git a/app/books/nod/page.tsx b/app/books/nod/page.tsx
index 1f3c9663..14ac7e83 100644
--- a/app/books/nod/page.tsx
+++ b/app/books/nod/page.tsx
@@ -56,14 +56,14 @@ export default async function NodPage() {
                     <li key={seg.slug}>
                       <Link
                         href={`/books/nod/${seg.slug}`}
-                        className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                       >
                         <div>
                           <p className="font-medium text-foreground">
                             {seg.title}
                           </p>
                         </div>
-                        <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                        <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                           {seg.paragraphs.length} paragraphs
                         </span>
                       </Link>
@@ -93,7 +93,7 @@ export default async function NodPage() {
                       <li key={ch.number}>
                         <Link
                           href={`/books/nod/${ch.number}`}
-                          className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                          className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                         >
                           <div>
                             <span className="text-sm text-primary font-medium">
@@ -124,7 +124,7 @@ export default async function NodPage() {
                 <li>
                   <Link
                     href="/books/nod/concluding-words"
-                    className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                    className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                   >
                     <div>
                       <p className="font-medium text-foreground">
diff --git a/app/books/noi/page.tsx b/app/books/noi/page.tsx
index b70eec83..743eb503 100644
--- a/app/books/noi/page.tsx
+++ b/app/books/noi/page.tsx
@@ -51,14 +51,14 @@ export default async function NoiPage() {
                     <li>
                       <Link
                         href="/books/noi/intro-front-pages"
-                        className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                       >
                         <div>
                           <p className="font-medium text-foreground">
                             {frontPages.title}
                           </p>
                         </div>
-                        <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                        <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                           {frontPages.paragraphs.length} paragraphs
                         </span>
                       </Link>
@@ -68,14 +68,14 @@ export default async function NoiPage() {
                     <li>
                       <Link
                         href="/books/noi/intro-preface"
-                        className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                       >
                         <div>
                           <p className="font-medium text-foreground">
                             {preface.title}
                           </p>
                         </div>
-                        <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                        <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                           {preface.paragraphs.length} paragraphs
                         </span>
                       </Link>
@@ -99,7 +99,7 @@ export default async function NoiPage() {
                   <li key={t.number}>
                     <Link
                       href={`/books/noi/${t.number}`}
-                      className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                      className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                     >
                       <div>
                         <span className="text-sm text-primary font-medium">
@@ -127,14 +127,14 @@ export default async function NoiPage() {
                   <li>
                     <Link
                       href="/books/noi/intro-appendixes"
-                      className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                      className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                     >
                       <div>
                         <p className="font-medium text-foreground">
                           {appendixes.title}
                         </p>
                       </div>
-                      <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                      <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                         {appendixes.paragraphs.length} paragraphs
                       </span>
                     </Link>
diff --git a/app/books/ochkm/page.tsx b/app/books/ochkm/page.tsx
index 31114e81..bd4b351f 100644
--- a/app/books/ochkm/page.tsx
+++ b/app/books/ochkm/page.tsx
@@ -46,14 +46,14 @@ export default async function OchkmPage() {
                     <li key={seg.slug}>
                       <Link
                         href={`/books/ochkm/${seg.slug}`}
-                        className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                       >
                         <div>
                           <p className="font-medium text-foreground">
                             {seg.title}
                           </p>
                         </div>
-                        <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                        <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                           {seg.paragraphs.length} paragraphs
                         </span>
                       </Link>
@@ -77,7 +77,7 @@ export default async function OchkmPage() {
                   <li key={ch.number}>
                     <Link
                       href={`/books/ochkm/${ch.number}`}
-                      className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                      className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                     >
                       <div>
                         <span className="text-sm text-primary font-medium">
diff --git a/app/books/owk/page.tsx b/app/books/owk/page.tsx
index 67f6618d..dddef7bf 100644
--- a/app/books/owk/page.tsx
+++ b/app/books/owk/page.tsx
@@ -46,14 +46,14 @@ export default async function OwkPage() {
                     <li key={seg.slug}>
                       <Link
                         href={`/books/owk/${seg.slug}`}
-                        className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                       >
                         <div>
                           <p className="font-medium text-foreground">
                             {seg.title}
                           </p>
                         </div>
-                        <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                        <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                           {seg.paragraphs.length} paragraphs
                         </span>
                       </Link>
@@ -77,7 +77,7 @@ export default async function OwkPage() {
                   <li key={ch.number}>
                     <Link
                       href={`/books/owk/${ch.number}`}
-                      className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                      className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                     >
                       <div>
                         <span className="text-sm text-primary font-medium">
diff --git a/app/books/poy/page.tsx b/app/books/poy/page.tsx
index f724fa3a..8edcfa4b 100644
--- a/app/books/poy/page.tsx
+++ b/app/books/poy/page.tsx
@@ -46,14 +46,14 @@ export default async function PoyPage() {
                     <li key={seg.slug}>
                       <Link
                         href={`/books/poy/${seg.slug}`}
-                        className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                       >
                         <div>
                           <p className="font-medium text-foreground">
                             {seg.title}
                           </p>
                         </div>
-                        <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                        <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                           {seg.paragraphs.length} paragraphs
                         </span>
                       </Link>
@@ -77,7 +77,7 @@ export default async function PoyPage() {
                   <li key={ch.number}>
                     <Link
                       href={`/books/poy/${ch.number}`}
-                      className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                      className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                     >
                       <div>
                         <span className="text-sm text-primary font-medium">
diff --git a/app/books/pqpa/page.tsx b/app/books/pqpa/page.tsx
index fc068676..79b05ea5 100644
--- a/app/books/pqpa/page.tsx
+++ b/app/books/pqpa/page.tsx
@@ -50,14 +50,14 @@ export default async function PqpaPage() {
                     <li key={seg.slug}>
                       <Link
                         href={`/books/pqpa/${seg.slug}`}
-                        className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                       >
                         <div>
                           <p className="font-medium text-foreground">
                             {seg.title}
                           </p>
                         </div>
-                        <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                        <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                           {seg.paragraphs.length} paragraphs
                         </span>
                       </Link>
@@ -81,7 +81,7 @@ export default async function PqpaPage() {
                   <li key={ch.number}>
                     <Link
                       href={`/books/pqpa/${ch.number}`}
-                      className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                      className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                     >
                       <div>
                         <span className="text-sm text-primary font-medium">
@@ -110,7 +110,7 @@ export default async function PqpaPage() {
                 <li>
                   <Link
                     href="/books/pqpa/concluding-words"
-                    className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                    className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                   >
                     <div>
                       <p className="font-medium text-foreground">
@@ -137,14 +137,14 @@ export default async function PqpaPage() {
                     <li key={seg.slug}>
                       <Link
                         href={`/books/pqpa/${seg.slug}`}
-                        className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                       >
                         <div>
                           <p className="font-medium text-foreground">
                             {seg.title}
                           </p>
                         </div>
-                        <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                        <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                           {seg.paragraphs.length} paragraphs
                         </span>
                       </Link>
diff --git a/app/books/rv/page.tsx b/app/books/rv/page.tsx
index 385ed42c..62f9e06e 100644
--- a/app/books/rv/page.tsx
+++ b/app/books/rv/page.tsx
@@ -46,14 +46,14 @@ export default async function RvPage() {
                     <li key={seg.slug}>
                       <Link
                         href={`/books/rv/${seg.slug}`}
-                        className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                       >
                         <div>
                           <p className="font-medium text-foreground">
                             {seg.title}
                           </p>
                         </div>
-                        <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                        <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                           {seg.paragraphs.length} paragraphs
                         </span>
                       </Link>
@@ -77,7 +77,7 @@ export default async function RvPage() {
                   <li key={ch.number}>
                     <Link
                       href={`/books/rv/${ch.number}`}
-                      className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                      className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                     >
                       <div>
                         <span className="text-sm text-primary font-medium">
diff --git a/app/books/sb/[canto]/[chapter]/[verse]/page.tsx b/app/books/sb/[canto]/[chapter]/[verse]/page.tsx
index 5629d6e8..2f78e51e 100644
--- a/app/books/sb/[canto]/[chapter]/[verse]/page.tsx
+++ b/app/books/sb/[canto]/[chapter]/[verse]/page.tsx
@@ -55,8 +55,8 @@ export default async function SbVersePage({
       items: verseIndex.map((v) => ({
         slug: String(v.verse),
         label: v.verseEnd
-          ? `Texts ${v.verse}–${v.verseEnd}`
-          : `Text ${v.verse}`,
+          ? `Verse ${canto}.${chapter}.${v.verse}–${v.verseEnd}`
+          : `Verse ${canto}.${chapter}.${v.verse}`,
         href: `/books/sb/${canto}/${chapter}/${v.verse}`,
         type: "verse",
       })),
@@ -92,7 +92,7 @@ export default async function SbVersePage({
           showBengali={false}
           basePath={`/books/sb/${canto}/${chapter}`}
           mobileNavGroups={mobileNavGroups}
-          mobileNavBookTitle={`SB ${canto}.${chapter}`}
+          mobileNavBookTitle={`Chapter ${chapter}: ${chapterInfo.title}`}
         />
       </div>
     </div>
diff --git a/app/books/sb/[canto]/page.tsx b/app/books/sb/[canto]/page.tsx
index a9afd8a1..9d77c4d0 100644
--- a/app/books/sb/[canto]/page.tsx
+++ b/app/books/sb/[canto]/page.tsx
@@ -62,7 +62,7 @@ export default async function CantoPage({
                 <li key={ch.number}>
                   <Link
                     href={`/books/sb/${cantoNum}/${ch.number}`}
-                    className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                    className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                   >
                     <div>
                       <span className="text-sm text-primary font-medium">
@@ -70,7 +70,7 @@ export default async function CantoPage({
                       </span>
                       <p className="font-medium text-foreground">{ch.title}</p>
                     </div>
-                    <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                    <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                       <ExtractedVerseCount count={ch.totalVerses} />
                     </span>
                   </Link>
diff --git a/app/books/sb/page.tsx b/app/books/sb/page.tsx
index fabc0c1a..23a3993c 100644
--- a/app/books/sb/page.tsx
+++ b/app/books/sb/page.tsx
@@ -58,7 +58,7 @@ export default async function SbPage() {
                   <li key={canto.number}>
                     <Link
                       href={`/books/sb/${canto.number}`}
-                      className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                      className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                     >
                       <div>
                         <Badge variant="secondary" className="mb-1">
@@ -68,7 +68,7 @@ export default async function SbPage() {
                           {canto.title}
                         </p>
                       </div>
-                      <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                      <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                         {canto.totalChapters} chapters ·{" "}
                         <ExtractedVerseCount
                           count={totalVerses}
diff --git a/app/books/sb1962/[chapter]/[verse]/page.tsx b/app/books/sb1962/[chapter]/[verse]/page.tsx
index db782a3b..25f09cda 100644
--- a/app/books/sb1962/[chapter]/[verse]/page.tsx
+++ b/app/books/sb1962/[chapter]/[verse]/page.tsx
@@ -50,17 +50,14 @@ export default async function VersePage({
   const mobileNavGroups: MobileNavGroup[] = [
     {
       title: "Verses",
-      items: verseIndex.map((v) => {
-        const label = v.verseEnd
-          ? `Verses ${v.verse}–${v.verseEnd}`
-          : `Verse ${v.verse}`;
-        return {
-          slug: String(v.verse),
-          label,
-          href: `/books/sb1962/${chapter}/${v.verse}`,
-          type: "verse",
-        };
-      }),
+      items: verseIndex.map((v) => ({
+        slug: String(v.verse),
+        label: v.verseEnd
+          ? `Verse ${chapter}.${v.verse}–${v.verseEnd}`
+          : `Verse ${chapter}.${v.verse}`,
+        href: `/books/sb1962/${chapter}/${v.verse}`,
+        type: "verse",
+      })),
     },
   ];
 
@@ -93,7 +90,7 @@ export default async function VersePage({
           basePath={`/books/sb1962/${chapter}`}
           showBengali={false}
           mobileNavGroups={mobileNavGroups}
-          mobileNavBookTitle={`Śrīmad-Bhāgavatam (1962) — Ch. ${chapter}`}
+          mobileNavBookTitle={`Chapter ${chapter}: ${chapterInfo.title}`}
         />
       </div>
     </div>
diff --git a/app/books/sb1962/page.tsx b/app/books/sb1962/page.tsx
index 763426cb..aab21a44 100644
--- a/app/books/sb1962/page.tsx
+++ b/app/books/sb1962/page.tsx
@@ -46,7 +46,7 @@ export default async function Sb1962Page() {
                 <li key={ch.number}>
                   <Link
                     href={`/books/sb1962/${ch.number}`}
-                    className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                    className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                   >
                     <div>
                       <span className="text-sm text-primary font-medium">
@@ -54,7 +54,7 @@ export default async function Sb1962Page() {
                       </span>
                       <p className="font-medium text-foreground">{ch.title}</p>
                     </div>
-                    <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                    <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                       <ExtractedVerseCount count={ch.totalVerses} />
                     </span>
                   </Link>
diff --git a/app/books/ssr/page.tsx b/app/books/ssr/page.tsx
index b4c24ce9..26cc799e 100644
--- a/app/books/ssr/page.tsx
+++ b/app/books/ssr/page.tsx
@@ -50,14 +50,14 @@ export default async function SsrPage() {
                     <li key={seg.slug}>
                       <Link
                         href={`/books/ssr/${seg.slug}`}
-                        className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                       >
                         <div>
                           <p className="font-medium text-foreground">
                             {seg.title}
                           </p>
                         </div>
-                        <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                        <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                           {seg.paragraphs.length} paragraphs
                         </span>
                       </Link>
@@ -82,7 +82,7 @@ export default async function SsrPage() {
                     <li key={sub.slug}>
                       <Link
                         href={`/books/ssr/${sub.slug}`}
-                        className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                       >
                         <p className="font-medium text-foreground">
                           {sub.title}
@@ -109,14 +109,14 @@ export default async function SsrPage() {
                     <li key={seg.slug}>
                       <Link
                         href={`/books/ssr/${seg.slug}`}
-                        className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                       >
                         <div>
                           <p className="font-medium text-foreground">
                             {seg.title}
                           </p>
                         </div>
-                        <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                        <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                           {seg.paragraphs.length} paragraphs
                         </span>
                       </Link>
diff --git a/app/books/tlc/page.tsx b/app/books/tlc/page.tsx
index 992579d8..0f9b45f7 100644
--- a/app/books/tlc/page.tsx
+++ b/app/books/tlc/page.tsx
@@ -54,14 +54,14 @@ export default async function TlcPage() {
                     <li key={seg.slug}>
                       <Link
                         href={`/books/tlc/${seg.slug}`}
-                        className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                       >
                         <div>
                           <p className="font-medium text-foreground">
                             {seg.title}
                           </p>
                         </div>
-                        <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                        <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                           {seg.paragraphs.length} paragraphs
                         </span>
                       </Link>
@@ -91,7 +91,7 @@ export default async function TlcPage() {
                       <li key={ch.number}>
                         <Link
                           href={`/books/tlc/${ch.number}`}
-                          className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                          className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                         >
                           <div>
                             <span className="text-sm text-primary font-medium">
diff --git a/app/books/ttp/page.tsx b/app/books/ttp/page.tsx
index d840c3d0..71c7a3a8 100644
--- a/app/books/ttp/page.tsx
+++ b/app/books/ttp/page.tsx
@@ -43,7 +43,7 @@ export default async function TtpPage() {
                   <li key={ch.number}>
                     <Link
                       href={`/books/ttp/${ch.number}`}
-                      className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                      className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                     >
                       <div>
                         <span className="text-sm text-primary font-medium">
diff --git a/app/essays/page.tsx b/app/essays/page.tsx
index 409a8e9f..ecaf9436 100644
--- a/app/essays/page.tsx
+++ b/app/essays/page.tsx
@@ -38,7 +38,7 @@ export default async function EssaysPage() {
                 <li key={essay.slug}>
                   <Link
                     href={`/essays/${essay.slug}`}
-                    className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                    className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                   >
                     <div>
                       <p className="font-medium text-foreground">