diff --git a/modules/rbooks/components/folk-book-reader.ts b/modules/rbooks/components/folk-book-reader.ts
index 8cf5ed0..fcc3810 100644
--- a/modules/rbooks/components/folk-book-reader.ts
+++ b/modules/rbooks/components/folk-book-reader.ts
@@ -519,6 +519,7 @@ export class FolkBookReader extends HTMLElement {
 				overflow: hidden;
 				border-radius: 4px;
 				box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+				flex-shrink: 0;
 			}
 
 			.nav-btn {
diff --git a/modules/rpubs/components/folk-pubs-flipbook.ts b/modules/rpubs/components/folk-pubs-flipbook.ts
index 87f347a..94ff906 100644
--- a/modules/rpubs/components/folk-pubs-flipbook.ts
+++ b/modules/rpubs/components/folk-pubs-flipbook.ts
@@ -211,9 +211,24 @@ export class FolkPubsFlipbook extends HTMLElement {
 		this._flipBook.loadFromHTML(pages);
 		this._flipBook.on("flip", (e: any) => {
 			this._currentPage = e.data;
-			const cur = this.shadowRoot?.querySelector(".cur");
-			if (cur) cur.textContent = String(this._currentPage + 1);
+			this.updatePageInfo();
 		});
+		// Initial page info update for spread display
+		this.updatePageInfo();
+	}
+
+	private updatePageInfo() {
+		const cur = this.shadowRoot?.querySelector(".page-info");
+		if (!cur) return;
+		const p = this._currentPage;
+		const n = this._numPages;
+		// First page (cover) and last page shown solo; middle pages as spreads
+		if (p === 0 || p >= n - 1) {
+			cur.textContent = `Page ${p + 1} of ${n}`;
+		} else {
+			const right = Math.min(p + 1, n);
+			cur.textContent = `Pages ${p}–${right} of ${n}`;
+		}
 	}
 
 	private loadStPageFlip(): Promise<void> {
@@ -339,6 +354,7 @@ export class FolkPubsFlipbook extends HTMLElement {
 				overflow: hidden; border-radius: 3px;
 				box-shadow: 0 4px 20px rgba(0,0,0,0.35);
 				background: #fff;
+				flex-shrink: 0;
 			}
 			/* Fallback scroll view when StPageFlip fails to load */
 			.fallback-pages {