diff --git a/templates/reader.templ b/templates/reader.templ
index 8828f00..d83e006 100644
--- a/templates/reader.templ
+++ b/templates/reader.templ
@@ -10,6 +10,7 @@ templ Reader(user User, metadata ReaderMetadata, progress ReadingProgress, bookm
 			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 			<title>{ metadata.Title } - Bookhoard Reader</title>
 			<link rel="manifest" href="/static/manifest.json"/>
+			<link href="/static/reader-fonts.css" rel="stylesheet"/>
 			<script src="/static/htmx.min.js"></script>
 			<link href="/static/style.css" rel="stylesheet"/>
 		</head>
@@ -56,7 +57,7 @@ templ ReaderChrome(user User, metadata ReaderMetadata, progress ReadingProgress)
 		<!-- Top bar -->
 		<div class="fixed top-0 left-0 right-0 bg-opacity-95 backdrop-blur border-b z-40" style="background-color: var(--bg-primary);">
 			<div class="flex items-center justify-between px-4 py-3">
-				<a href="/media-items/{ metadata.media_item_id }" class="text-lg hover:underline">
+				<a href="/media-items/{ metadata.MediaItemID }" class="text-lg hover:underline">
 					← Back
 				</a>
 				<h1 class="text-lg font-semibold">{ metadata.Title }</h1>
@@ -79,6 +80,17 @@ templ ReaderChrome(user User, metadata ReaderMetadata, progress ReadingProgress)
 					<button data-action="toggle-toc" title="Table of Contents">📖</button>
 					<button data-action="add-bookmark" title="Bookmark">🏷️</button>
 					<button data-action="add-note" title="Note">📝</button>
+					<!-- Panel editor - shown for comics/manga -->
+					<button
+						x-data="panelEditor"
+						x-show="isComicOrManga"
+						@click="openPanelEditor(readerShell.currentPage)"
+						data-action="edit-panels"
+						title="Edit Panels"
+						class="p-2 rounded-lg hover:bg-gray-700"
+					>
+						🎨
+					</button>
 				</div>
 			</div>
 		</div>
diff --git a/web/src/reader/ebook/font-loader.ts b/web/src/reader/ebook/font-loader.ts
new file mode 100644
index 0000000..40f4256
--- /dev/null
+++ b/web/src/reader/ebook/font-loader.ts
@@ -0,0 +1,73 @@
+// Font loading with performance optimization
+
+const READING_FONTS = [
+  {
+    id: "literata",
+    name: "Literata",
+    stack: "Literata, serif",
+    description: "Designed for Google Play Books",
+  },
+  {
+    id: "crimson",
+    name: "Crimson Text",
+    stack: "Crimson Text, serif",
+    description: "Optimized for screen reading",
+  },
+  {
+    id: "source-serif",
+    name: "Source Serif 4",
+    stack: "Source Serif 4, serif",
+    description: "Professional Adobe quality",
+  },
+  {
+    id: "eb-garamond",
+    name: "EB Garamond",
+    stack: "EB Garamond, serif",
+    description: "Classic elegance",
+  },
+  {
+    id: "libertinus",
+    name: "Libertinus Serif",
+    stack: "Libertinus Serif, serif",
+    description: "Excellent for technical content",
+  },
+  {
+    id: "noto-serif",
+    name: "Noto Serif",
+    stack: "Noto Serif, serif",
+    description: "Maximum language support",
+  },
+  {
+    id: "charis-sil",
+    name: "Charis SIL",
+    stack: "Charis SIL, serif",
+    description: "Multilingual specialist",
+  },
+  {
+    id: "ibm-plex",
+    name: "IBM Plex Serif",
+    stack: "IBM Plex Serif, serif",
+    description: "Modern & versatile",
+  },
+];
+
+// Preload critical fonts (default font + user's last choice)
+async function preloadFonts(userPreferredFont: string): Promise<void> {
+  const fontsToPreload = new Set(["literata", userPreferredFont]);
+
+  for (const fontId of fontsToPreload) {
+    const font = READING_FONTS.find((f) => f.id === fontId);
+    if (font) {
+      document.fonts.load(`16px "${font.stack}"`);
+    }
+  }
+}
+
+// Get font stack for CSS
+function getFontStack(fontId: string): string {
+  const font = READING_FONTS.find((f) => f.id === fontId);
+  return font?.stack || "Literata, serif";
+}
+
+// All fonts bundled - no network requests needed
+export { READING_FONTS, preloadFonts, getFontStack };