diff --git a/src/App.jsx b/src/App.jsx
index 3513279..ffe54bb 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,7 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import mammoth from 'mammoth';
+import { getStroke } from 'perfect-freehand';
+import { pathFromStroke } from './utils/inkRender.js';
 
 import { AppContext, useApp } from './context/AppContext.js';
 import AdminPage from './pages/AdminPage.jsx';
@@ -425,6 +427,28 @@ export function formatRelativeDate(ts) {
 
 const escHtml = (s) => String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 
+function inkStrokesToSvgHtml(strokes) {
+  if (!strokes?.length) return '';
+  const W = 700, H = 500;
+  const lines = [];
+  for (let y = 32; y < H; y += 32)
+    lines.push(`<line x1="0" y1="${y}" x2="${W}" y2="${y}" stroke="#dde3ec" stroke-width="1"/>`);
+  lines.push(`<line x1="40" y1="0" x2="40" y2="${H}" stroke="#fca5a5" stroke-width="1"/>`);
+  const paths = strokes.map((s) => {
+    const pts = s.points.map(([x, y, p]) => [x * W, y * H, p]);
+    const outline = getStroke(pts, {
+      size: s.size * H,
+      thinning: s.tool === 'highlighter' ? 0 : 0.5,
+      smoothing: 0.5,
+      streamline: 0.4,
+    });
+    const d = pathFromStroke(outline);
+    if (!d) return '';
+    return `<path d="${d}" fill="${escHtml(s.color)}" opacity="${s.tool === 'highlighter' ? '0.35' : '1'}"/>`;
+  }).filter(Boolean).join('');
+  return `<div class="ink-notes"><strong>INK NOTES:</strong><div style="margin-top:8px;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;background:#fff;"><svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}" style="display:block;max-width:100%;height:auto;">${lines.join('')}${paths}</svg></div></div>`;
+}
+
 export function buildExportHtml(project) {
   const style = `
     body { font-family: Georgia, serif; color: #0f172a; margin: 0; padding: 32px; }
@@ -435,7 +459,7 @@ export function buildExportHtml(project) {
     .chunk { margin-bottom: 2rem; padding: 1.25rem 1.5rem; border: 1px solid #cbd5e1; border-radius: 0.75rem; background: #ffffff; }
     .verse { margin: 0 0 0.75rem; line-height: 1.7; }
     .scripture-ref { font-weight: 700; margin-bottom: 0.75rem; }
-    .oia, .cross-refs, .greek { margin-top: 1rem; }
+    .oia, .cross-refs, .greek, .ink-notes { margin-top: 1rem; }
     .oia-section { margin-bottom: 0.75rem; }
     .greek table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
     .greek th, .greek td { border: 1px solid #d1d5db; padding: 0.65rem; text-align: left; }
@@ -506,6 +530,8 @@ export function buildExportHtml(project) {
         })
         .join('');
 
+      const inkHtml = inkStrokesToSvgHtml(chunk.inkStrokes);
+
       return `
         <section class="chunk">
           <div class="scripture-ref">${escHtml(scripture)}</div>
@@ -520,6 +546,7 @@ export function buildExportHtml(project) {
             ${greekRows ? greekTable : '<p><em>No Greek word notes.</em></p>'}
             ${extendedDefinitions}
           </div>
+          ${inkHtml}
         </section>
       `;
     }).join('');
@@ -1168,6 +1195,10 @@ const App = () => {
   const [audioNarrator, setAudioNarrator] = useState('souer');
   const [audioState, setAudioState] = useState({ status: 'idle', chapter: 0, total: 0 });
   const [readerAudioState, setReaderAudioState] = useState({ status: 'idle', chapter: 0 });
+  const [readerInkByPage, setReaderInkByPage] = useState(() => {
+    try { return JSON.parse(localStorage.getItem('readerInkByPage') ?? '{}'); }
+    catch { return {}; }
+  });
   const audioRef = useRef(null);
   const audioModeRef = useRef('book'); // 'book' | 'reader' — which player owns audioRef
   const audioBookRef = useRef(audioBook);
@@ -1520,6 +1551,15 @@ const App = () => {
     });
   };
 
+  const updateReaderPageInk = useCallback((bookAbbrev, chapter, strokes) => {
+    const key = `${bookAbbrev}_${chapter}`;
+    setReaderInkByPage((prev) => {
+      const next = { ...prev, [key]: strokes };
+      try { localStorage.setItem('readerInkByPage', JSON.stringify(next)); } catch {}
+      return next;
+    });
+  }, []);
+
   const cycleBookmarkColor = (verseKey) => {
     setReaderBookmarks((prev) => {
       const cur = prev[verseKey];
@@ -3705,6 +3745,8 @@ const deleteProject = (id) => {
     readerSearchActive, setReaderSearchActive,
     readerSearchScope, setReaderSearchScope,
     readerAudioState,
+    readerInkByPage,
+    updateReaderPageInk,
     bibleIndexStatus,
     loadReaderChapter,
     _bibleIndexCacheRef,
diff --git a/src/pages/DrawCanvas.jsx b/src/pages/DrawCanvas.jsx
index 308277f..f7b54b4 100644
--- a/src/pages/DrawCanvas.jsx
+++ b/src/pages/DrawCanvas.jsx
@@ -9,58 +9,24 @@ const INK_SIZES = [
   { label: 'L', value: 0.025 },
 ];
 
-// Read-only ink overlay shown in Stacked / Split mode.
-export function InkLayer({ strokes }) {
-  const canvasRef = useRef(null);
-  const strokesRef = useRef(strokes);
-  strokesRef.current = strokes;
-
-  const render = useCallback(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    renderInkToCanvas(canvas, strokesRef.current);
-  }, []);
-
-  useEffect(() => { render(); }, [strokes, render]);
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const obs = new ResizeObserver(render);
-    obs.observe(canvas);
-    return () => obs.disconnect();
-  }, [render]);
-
-  if (!strokes.length) return null;
-  return (
-    <canvas
-      ref={canvasRef}
-      className="pointer-events-none absolute inset-0 h-full w-full"
-      style={{ zIndex: 5 }}
-    />
-  );
-}
-
-// Interactive draw canvas overlay for Draw mode.
-export default function DrawCanvas() {
-  const {
-    selectedChunk,
-    updateChunk,
-    drawTool, setDrawTool,
-    drawColor, setDrawColor,
-    drawSize, setDrawSize,
-    setStudyLayout,
-  } = useApp();
+// Standalone notebook-style draw canvas.
+// strokes: array of saved stroke objects
+// onStrokesChange: (newStrokes) => void
+// onDone: optional () => void — shows "Done" button when provided
+export default function DrawCanvas({ strokes, onStrokesChange, onDone }) {
+  const { drawTool, setDrawTool, drawColor, setDrawColor, drawSize, setDrawSize } = useApp();
 
   const canvasRef = useRef(null);
   const activeStrokeRef = useRef([]);
 
-  // Refs prevent stale closures in ResizeObserver callback
-  const strokesRef = useRef([]);
+  // Refs prevent stale closures in stable callbacks
+  const strokesRef = useRef(strokes);
+  const onStrokesChangeRef = useRef(onStrokesChange);
   const drawToolRef = useRef(drawTool);
   const drawColorRef = useRef(drawColor);
   const drawSizeRef = useRef(drawSize);
-  strokesRef.current = selectedChunk?.inkStrokes ?? [];
+  strokesRef.current = strokes;
+  onStrokesChangeRef.current = onStrokesChange;
   drawToolRef.current = drawTool;
   drawColorRef.current = drawColor;
   drawSizeRef.current = drawSize;
@@ -78,7 +44,7 @@ export default function DrawCanvas() {
     );
   }, []);
 
-  useEffect(() => { render(); }, [selectedChunk?.inkStrokes, drawTool, drawColor, drawSize, render]);
+  useEffect(() => { render(); }, [strokes, drawTool, drawColor, drawSize, render]);
 
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -113,68 +79,47 @@ export default function DrawCanvas() {
     e.preventDefault();
     const pt = getPoint(e);
     activeStrokeRef.current = [...activeStrokeRef.current, pt];
-
     if (drawToolRef.current === 'eraser') {
       const [ex, ey] = pt;
       const r = drawSizeRef.current * 3;
-      const remaining = strokesRef.current.filter((s) =>
-        !s.points.some(([sx, sy]) => Math.hypot(sx - ex, sy - ey) < r),
+      const remaining = strokesRef.current.filter(
+        (s) => !s.points.some(([sx, sy]) => Math.hypot(sx - ex, sy - ey) < r),
       );
-      if (remaining.length !== strokesRef.current.length) {
-        updateChunk(selectedChunk.id, { inkStrokes: remaining });
-      }
+      if (remaining.length !== strokesRef.current.length)
+        onStrokesChangeRef.current(remaining);
     }
     render();
-  }, [getPoint, render, updateChunk, selectedChunk]);
+  }, [getPoint, render]);
 
   const onPointerUp = useCallback((e) => {
     if (e.pointerType === 'touch') return;
     const pts = activeStrokeRef.current;
     if (drawToolRef.current !== 'eraser' && pts.length > 1) {
-      updateChunk(selectedChunk.id, {
-        inkStrokes: [
-          ...strokesRef.current,
-          {
-            id: crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random()}`,
-            tool: drawToolRef.current,
-            color: drawColorRef.current,
-            size: drawSizeRef.current,
-            points: pts,
-          },
-        ],
-      });
+      onStrokesChangeRef.current([
+        ...strokesRef.current,
+        {
+          id: crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random()}`,
+          tool: drawToolRef.current,
+          color: drawColorRef.current,
+          size: drawSizeRef.current,
+          points: pts,
+        },
+      ]);
     }
     activeStrokeRef.current = [];
     render();
-  }, [render, updateChunk, selectedChunk]);
+  }, [render]);
 
-  const strokes = selectedChunk?.inkStrokes ?? [];
-
-  const undo = () => {
-    if (strokes.length > 0)
-      updateChunk(selectedChunk.id, { inkStrokes: strokes.slice(0, -1) });
-  };
-
-  const clear = () => {
-    if (strokes.length > 0 && window.confirm('Clear all annotations on this chunk?'))
-      updateChunk(selectedChunk.id, { inkStrokes: [] });
-  };
+  const undo = () => strokes.length > 0 && onStrokesChange(strokes.slice(0, -1));
+  const clear = () =>
+    strokes.length > 0 &&
+    window.confirm('Clear all ink notes?') &&
+    onStrokesChange([]);
 
   return (
-    <>
-      <canvas
-        ref={canvasRef}
-        className="absolute inset-0 z-10 h-full w-full cursor-crosshair"
-        style={{ touchAction: 'pan-y pinch-zoom' }}
-        onPointerDown={onPointerDown}
-        onPointerMove={onPointerMove}
-        onPointerUp={onPointerUp}
-        onPointerCancel={onPointerUp}
-      />
-
-      {/* Floating toolbar */}
-      <div className="absolute bottom-4 left-1/2 z-20 flex -translate-x-1/2 items-center gap-1 rounded-2xl border border-slate-200 bg-white/95 px-3 py-2 shadow-xl backdrop-blur-sm">
-        {/* Tool buttons */}
+    <div className="overflow-hidden rounded-3xl border border-slate-200 shadow-sm">
+      {/* Toolbar */}
+      <div className="flex flex-wrap items-center gap-1 border-b border-slate-200 bg-white px-3 py-2">
         {[
           { id: 'pen', label: '✒', title: 'Pen' },
           { id: 'highlighter', label: '▐', title: 'Highlighter' },
@@ -185,10 +130,8 @@ export default function DrawCanvas() {
             type="button"
             title={t.title}
             onClick={() => setDrawTool(t.id)}
-            className={`flex h-8 w-8 items-center justify-center rounded-xl text-sm font-bold transition ${
-              drawTool === t.id
-                ? 'bg-slate-900 text-white'
-                : 'text-slate-600 hover:bg-slate-100'
+            className={`flex h-8 w-8 items-center justify-center rounded-lg text-sm font-bold transition ${
+              drawTool === t.id ? 'bg-slate-900 text-white' : 'text-slate-600 hover:bg-slate-100'
             }`}
           >
             {t.label}
@@ -197,7 +140,6 @@ export default function DrawCanvas() {
 
         <div className="mx-1 h-5 w-px bg-slate-200" />
 
-        {/* Color swatches */}
         {INK_COLORS.map((c) => (
           <button
             key={c}
@@ -205,25 +147,20 @@ export default function DrawCanvas() {
             onClick={() => { setDrawColor(c); if (drawTool === 'eraser') setDrawTool('pen'); }}
             style={{ background: c }}
             className={`h-5 w-5 rounded-full border-2 transition ${
-              drawColor === c && drawTool !== 'eraser'
-                ? 'scale-125 border-slate-900'
-                : 'border-white shadow-sm'
+              drawColor === c && drawTool !== 'eraser' ? 'scale-125 border-slate-900' : 'border-white shadow-sm'
             }`}
           />
         ))}
 
         <div className="mx-1 h-5 w-px bg-slate-200" />
 
-        {/* Size buttons */}
         {INK_SIZES.map((s) => (
           <button
             key={s.label}
             type="button"
             onClick={() => setDrawSize(s.value)}
-            className={`flex h-8 w-8 items-center justify-center rounded-xl text-xs font-bold transition ${
-              drawSize === s.value
-                ? 'bg-slate-900 text-white'
-                : 'text-slate-600 hover:bg-slate-100'
+            className={`flex h-8 w-8 items-center justify-center rounded-lg text-xs font-bold transition ${
+              drawSize === s.value ? 'bg-slate-900 text-white' : 'text-slate-600 hover:bg-slate-100'
             }`}
           >
             {s.label}
@@ -236,7 +173,7 @@ export default function DrawCanvas() {
           type="button"
           onClick={undo}
           disabled={strokes.length === 0}
-          className="rounded-xl px-2.5 py-1 text-xs font-semibold text-slate-600 hover:bg-slate-100 disabled:opacity-40"
+          className="rounded-lg px-2.5 py-1 text-xs font-semibold text-slate-600 hover:bg-slate-100 disabled:opacity-40"
         >
           Undo
         </button>
@@ -244,21 +181,50 @@ export default function DrawCanvas() {
           type="button"
           onClick={clear}
           disabled={strokes.length === 0}
-          className="rounded-xl px-2.5 py-1 text-xs font-semibold text-rose-600 hover:bg-rose-50 disabled:opacity-40"
+          className="rounded-lg px-2.5 py-1 text-xs font-semibold text-rose-600 hover:bg-rose-50 disabled:opacity-40"
         >
           Clear
         </button>
 
-        <div className="mx-1 h-5 w-px bg-slate-200" />
-
-        <button
-          type="button"
-          onClick={() => setStudyLayout('stacked')}
-          className="rounded-xl bg-slate-900 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-slate-800"
-        >
-          Done ✓
-        </button>
+        {onDone && (
+          <>
+            <div className="mx-1 h-5 w-px bg-slate-200" />
+            <button
+              type="button"
+              onClick={onDone}
+              className="rounded-lg bg-slate-900 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-slate-800"
+            >
+              Done ✓
+            </button>
+          </>
+        )}
       </div>
-    </>
+
+      {/* Notebook canvas */}
+      <div
+        className="relative"
+        style={{
+          minHeight: 640,
+          background: 'white',
+          backgroundImage: 'repeating-linear-gradient(transparent 0px, transparent 31px, #dde3ec 31px, #dde3ec 32px)',
+        }}
+      >
+        {/* Red margin line */}
+        <div className="absolute bottom-0 left-10 top-0 w-px bg-rose-200" style={{ zIndex: 1 }} />
+        <canvas
+          ref={canvasRef}
+          className="absolute inset-0 h-full w-full"
+          style={{
+            zIndex: 2,
+            cursor: drawTool === 'eraser' ? 'cell' : 'crosshair',
+            touchAction: 'pan-y pinch-zoom',
+          }}
+          onPointerDown={onPointerDown}
+          onPointerMove={onPointerMove}
+          onPointerUp={onPointerUp}
+          onPointerCancel={onPointerUp}
+        />
+      </div>
+    </div>
   );
 }
diff --git a/src/pages/ReaderPage.jsx b/src/pages/ReaderPage.jsx
index 5d3c3ae..7e52fef 100644
--- a/src/pages/ReaderPage.jsx
+++ b/src/pages/ReaderPage.jsx
@@ -1,5 +1,7 @@
+import { useState, useEffect } from 'react';
 import { useApp } from '../context/AppContext.js';
 import { bookOptions, BookmarkIcon, CopyIcon } from '../App.jsx';
+import DrawCanvas from './DrawCanvas.jsx';
 
 export default function ReaderPage() {
   const {
@@ -41,9 +43,15 @@ export default function ReaderPage() {
     copyVerse,
     formatCrossRef,
     setReaderCrossRefs,
+    readerInkByPage,
+    updateReaderPageInk,
   } = useApp();
 
   const readerBook = bookOptions.find((b) => b.abbrev === readerBookAbbrev);
+  const [readerDrawMode, setReaderDrawMode] = useState(false);
+  const readerPageInkStrokes = readerInkByPage?.[`${readerBookAbbrev}_${readerChapter}`] ?? [];
+
+  useEffect(() => { setReaderDrawMode(false); }, [readerBookAbbrev, readerChapter]);
   const bookmarkEntries = Object.entries(readerBookmarks).map(([key, color]) => {
     const [bAbbrev, chapterStr, verseStr] = key.split('-');
     const bookIndex = bookOptions.findIndex((b) => b.abbrev === bAbbrev);
@@ -201,6 +209,14 @@ export default function ReaderPage() {
               🔍 Search
             </button>
           )}
+          <div className="mx-2 h-4 w-px bg-slate-200" />
+          <button
+            type="button"
+            onClick={() => setReaderDrawMode((v) => !v)}
+            className={`rounded-lg px-3 py-1 text-xs font-semibold transition ${readerDrawMode ? 'bg-slate-900 text-white' : 'border border-slate-300 text-slate-600 hover:bg-slate-50'}`}
+          >
+            ✏ Draw
+          </button>
         </div>
 
         {/* Whole-Bible search results */}
@@ -416,6 +432,17 @@ export default function ReaderPage() {
             );
           })()}
         </div>
+
+        {/* Ink notebook — shown when Draw mode is active */}
+        {readerDrawMode && (
+          <div className="mt-4">
+            <DrawCanvas
+              strokes={readerPageInkStrokes}
+              onStrokesChange={(s) => updateReaderPageInk(readerBookAbbrev, readerChapter, s)}
+              onDone={() => setReaderDrawMode(false)}
+            />
+          </div>
+        )}
       </main>
     </div>
   );
diff --git a/src/pages/StudyPage.jsx b/src/pages/StudyPage.jsx
index a19cc23..27083fc 100644
--- a/src/pages/StudyPage.jsx
+++ b/src/pages/StudyPage.jsx
@@ -2,7 +2,7 @@ import { createPortal } from 'react-dom';
 import DOMPurify from 'dompurify';
 import { useApp } from '../context/AppContext.js';
 import { STUDY_TABS, COMMENTARY_OPTIONS, NT_BOOK_NUMBER, formatChunkReference, CrossRefChip } from '../App.jsx';
-import DrawCanvas, { InkLayer } from './DrawCanvas.jsx';
+import DrawCanvas from './DrawCanvas.jsx';
 
 export default function StudyPage() {
   const {
@@ -243,9 +243,36 @@ export default function StudyPage() {
 
             {selectedChunk ? (
               <div className="mt-6 space-y-6">
+              {studyLayout === 'annotate' ? (
+                <div className="space-y-4">
+                  {/* Compact scripture strip */}
+                  <div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3">
+                    <div className="mb-1.5 flex items-center justify-between gap-2">
+                      <span className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">Scripture · read-only</span>
+                      <span className="rounded-full bg-slate-200 px-2.5 py-0.5 text-xs font-semibold text-slate-600">
+                        {formatChunkReference(project, selectedChunkChapterIndex, selectedChunk, '–')}
+                      </span>
+                    </div>
+                    <p className="font-serif text-sm leading-relaxed text-slate-700">
+                      {selectedChunkVerses.map((verse) => (
+                        <span key={`${verse.chapter}-${verse.number}`}>
+                          <span className="font-semibold text-slate-900">{verse.chapter}:{verse.number} </span>
+                          {verse.text}{' '}
+                        </span>
+                      ))}
+                    </p>
+                  </div>
+                  {/* Notebook canvas */}
+                  <DrawCanvas
+                    strokes={selectedChunk.inkStrokes ?? []}
+                    onStrokesChange={(s) => updateChunk(selectedChunk.id, { inkStrokes: s })}
+                    onDone={() => setStudyLayout('stacked')}
+                  />
+                </div>
+              ) : (
               <div className={`space-y-6 ${studyLayout === 'split' ? 'lg:flex lg:items-start lg:gap-6 lg:space-y-0' : ''}`}>
                 {/* Scripture */}
-                <div className={`relative overflow-hidden rounded-3xl border border-slate-200 bg-slate-50 p-5 ${mobileStudyTab !== 'scripture' && studyLayout !== 'annotate' ? 'max-sm:hidden' : ''} ${studyLayout === 'split' ? 'lg:sticky lg:top-6 lg:flex-1 lg:basis-0 lg:min-w-0 lg:self-start' : ''}`}>
+                <div className={`rounded-3xl border border-slate-200 bg-slate-50 p-5 ${mobileStudyTab !== 'scripture' ? 'max-sm:hidden' : ''} ${studyLayout === 'split' ? 'lg:sticky lg:top-6 lg:flex-1 lg:basis-0 lg:min-w-0 lg:self-start' : ''}`}>
                   <div className="mb-4 flex items-center justify-between gap-3">
                     <div>
                       <p className="text-sm font-semibold text-slate-700">Scripture</p>
@@ -264,9 +291,6 @@ export default function StudyPage() {
                       ))}
                   </div>
 
-                  <InkLayer strokes={selectedChunk?.inkStrokes ?? []} />
-                  {studyLayout === 'annotate' && <DrawCanvas />}
-
                   {/* Interlinear */}
                   <div className="mt-4 border-t border-slate-200 pt-4">
                     <button
@@ -880,6 +904,7 @@ export default function StudyPage() {
 
                 </div>
                 </div>
+              )}
 
                 {/* Prev / Next — sticky */}
                 <div className="sticky bottom-0 z-10 -mx-4 sm:-mx-6 mt-6 flex items-center justify-between gap-3 border-t border-slate-200 bg-white/95 px-4 py-3 backdrop-blur-sm sm:px-6">
diff --git a/src/utils/inkRender.js b/src/utils/inkRender.js
index fe245a4..10d95f9 100644
--- a/src/utils/inkRender.js
+++ b/src/utils/inkRender.js
@@ -1,6 +1,6 @@
 import { getStroke } from 'perfect-freehand';
 
-function pathFromStroke(points) {
+export function pathFromStroke(points) {
   if (!points.length) return '';
   const d = [`M ${points[0][0].toFixed(2)} ${points[0][1].toFixed(2)}`];
   for (let i = 1; i < points.length - 1; i++) {