diff --git a/src/pages/DrawCanvas.jsx b/src/pages/DrawCanvas.jsx
index f7b54b4..86d7274 100644
--- a/src/pages/DrawCanvas.jsx
+++ b/src/pages/DrawCanvas.jsx
@@ -13,7 +13,9 @@ const INK_SIZES = [
 // strokes: array of saved stroke objects
 // onStrokesChange: (newStrokes) => void
 // onDone: optional () => void — shows "Done" button when provided
-export default function DrawCanvas({ strokes, onStrokesChange, onDone }) {
+// headerContent: optional JSX rendered above the notebook area.
+// The canvas extends over it so you can draw directly on the content.
+export default function DrawCanvas({ strokes, onStrokesChange, onDone, headerContent }) {
   const { drawTool, setDrawTool, drawColor, setDrawColor, drawSize, setDrawSize } = useApp();
 
   const canvasRef = useRef(null);
@@ -200,17 +202,30 @@ export default function DrawCanvas({ strokes, onStrokesChange, onDone }) {
         )}
       </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 }} />
+      {/* Draw surface: optional scripture header + ruled notebook, one canvas over both */}
+      <div className="relative">
+        {/* Scripture content — canvas sits on top so you can draw directly on the text */}
+        {headerContent && (
+          <div
+            className="border-b border-slate-200 bg-slate-50 p-4 font-serif text-sm leading-relaxed text-slate-800"
+            style={{ pointerEvents: 'none', userSelect: 'none' }}
+          >
+            {headerContent}
+          </div>
+        )}
+        {/* Ruled notebook area */}
+        <div
+          style={{
+            minHeight: 640,
+            background: 'white',
+            backgroundImage: 'repeating-linear-gradient(transparent 0px, transparent 31px, #dde3ec 31px, #dde3ec 32px)',
+          }}
+        />
+        {/* Red margin line — only in pure-notebook mode */}
+        {!headerContent && (
+          <div className="absolute bottom-0 left-10 top-0 w-px bg-rose-200" style={{ zIndex: 1 }} />
+        )}
+        {/* Single canvas spanning the entire area (scripture + notebook) */}
         <canvas
           ref={canvasRef}
           className="absolute inset-0 h-full w-full"
diff --git a/src/pages/ReaderPage.jsx b/src/pages/ReaderPage.jsx
index 7e52fef..d35aeec 100644
--- a/src/pages/ReaderPage.jsx
+++ b/src/pages/ReaderPage.jsx
@@ -300,8 +300,8 @@ export default function ReaderPage() {
           </div>
         </div>
 
-        {/* Verses */}
-        <div className="rounded-3xl border border-slate-200 bg-white p-6 shadow-panel">
+        {/* Verses — hidden when draw mode is active */}
+        <div className={`rounded-3xl border border-slate-200 bg-white p-6 shadow-panel${readerDrawMode ? ' hidden' : ''}`}>
           <h2 className="mb-1 text-xl font-semibold text-slate-900">
             {readerBook?.name} {readerChapter} <span className="text-sm font-normal text-slate-500">(BSB)</span>
           </h2>
@@ -433,13 +433,27 @@ export default function ReaderPage() {
           })()}
         </div>
 
-        {/* Ink notebook — shown when Draw mode is active */}
+        {/* Draw mode — scripture text visible with canvas overlay + ruled notebook below */}
         {readerDrawMode && (
-          <div className="mt-4">
+          <div>
             <DrawCanvas
               strokes={readerPageInkStrokes}
               onStrokesChange={(s) => updateReaderPageInk(readerBookAbbrev, readerChapter, s)}
               onDone={() => setReaderDrawMode(false)}
+              headerContent={
+                <>
+                  <div className="mb-2 flex items-center gap-2">
+                    <span className="font-semibold text-slate-700">{readerBook?.name} {readerChapter}</span>
+                    <span className="text-xs text-slate-400">BSB · draw on me</span>
+                  </div>
+                  {!readerLoading && readerVerses.map((v) => (
+                    <p key={v.number} className="mb-1">
+                      <span className="font-semibold text-slate-900">{v.number}.</span>{' '}
+                      {v.text}
+                    </p>
+                  ))}
+                </>
+              }
             />
           </div>
         )}
diff --git a/src/pages/StudyPage.jsx b/src/pages/StudyPage.jsx
index 27083fc..3b65308 100644
--- a/src/pages/StudyPage.jsx
+++ b/src/pages/StudyPage.jsx
@@ -244,31 +244,27 @@ 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}{' '}
+                <DrawCanvas
+                  strokes={selectedChunk.inkStrokes ?? []}
+                  onStrokesChange={(s) => updateChunk(selectedChunk.id, { inkStrokes: s })}
+                  onDone={() => setStudyLayout('stacked')}
+                  headerContent={
+                    <>
+                      <div className="mb-2 flex items-center justify-between gap-2">
+                        <span className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">Scripture · draw on me</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>
+                      {selectedChunkVerses.map((verse) => (
+                        <p key={`${verse.chapter}-${verse.number}`} className="mb-1">
+                          <span className="font-semibold text-slate-900">{verse.chapter}:{verse.number}.</span>{' '}
+                          {verse.text}
+                        </p>
                       ))}
-                    </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 */}