diff --git a/src/lib/catalog/pages.ts b/src/lib/catalog/pages.ts
new file mode 100644
index 00000000..0fbe7061
--- /dev/null
+++ b/src/lib/catalog/pages.ts
@@ -0,0 +1,23 @@
+import type { VolumeData, Page } from '$lib/types';
+
+/**
+ * Get the current working version of pages.
+ * Returns edited version if it exists, otherwise original.
+ */
+export function getCurrentPages(volumeData: VolumeData): Page[] {
+  return volumeData.edited_pages ?? volumeData.pages;
+}
+
+/**
+ * Check if volume has edits
+ */
+export function hasEdits(volumeData: VolumeData): boolean {
+  return volumeData.edited_pages !== undefined;
+}
+
+/**
+ * Get original pages (for reference in editor)
+ */
+export function getOriginalPages(volumeData: VolumeData): Page[] {
+  return volumeData.pages;
+}
diff --git a/src/lib/components/Editor/EditCanvas.svelte b/src/lib/components/Editor/EditCanvas.svelte
new file mode 100644
index 00000000..5c0c335d
--- /dev/null
+++ b/src/lib/components/Editor/EditCanvas.svelte
@@ -0,0 +1,127 @@
+<script lang="ts">
+  import type { Page, Block } from '$lib/types';
+  import EditableBox from './EditableBox.svelte';
+  import { onMount } from 'svelte';
+
+  type ZoomMode = 'fit-screen' | 'fit-width' | 'original';
+
+  interface Props {
+    pageData: Page;
+    pageImage: string;
+    workingBlocks: Block[];
+    selectedIndex: number | null;
+    zoomMode: ZoomMode;
+    updateBlock: (index: number, block: Block) => void;
+    deleteBlock: (index: number) => void;
+    cloneBlock: (index: number) => number;
+  }
+
+  let {
+    pageData,
+    pageImage,
+    workingBlocks = $bindable(),
+    selectedIndex = $bindable(),
+    zoomMode,
+    updateBlock,
+    deleteBlock,
+    cloneBlock
+  }: Props = $props();
+
+  let containerRef: HTMLDivElement;
+  let scale = $state(1);
+
+  function handleSelect(index: number) {
+    selectedIndex = index;
+  }
+
+  function handleDeselect() {
+    selectedIndex = null;
+  }
+
+  function calculateZoom() {
+    if (!containerRef) return;
+
+    const container = containerRef;
+    const padding = 64; // 8 * 2 (p-8 on each side)
+    const containerWidth = container.clientWidth - padding;
+    const containerHeight = container.clientHeight - padding;
+    const pageWidth = pageData.img_width;
+    const pageHeight = pageData.img_height;
+
+    let newScale = 1;
+
+    switch (zoomMode) {
+      case 'fit-screen': {
+        const scaleX = containerWidth / pageWidth;
+        const scaleY = containerHeight / pageHeight;
+        newScale = Math.min(scaleX, scaleY);
+        break;
+      }
+      case 'fit-width': {
+        newScale = containerWidth / pageWidth;
+        break;
+      }
+      case 'original': {
+        newScale = 1;
+        break;
+      }
+    }
+
+    scale = newScale;
+  }
+
+  onMount(() => {
+    calculateZoom();
+    window.addEventListener('resize', calculateZoom);
+    return () => {
+      window.removeEventListener('resize', calculateZoom);
+    };
+  });
+
+  $effect(() => {
+    // Recalculate when zoom mode changes
+    zoomMode;
+    calculateZoom();
+  });
+</script>
+
+<div
+  bind:this={containerRef}
+  class="fixed top-16 right-0 bottom-0 left-0 flex items-center justify-center overflow-auto bg-gray-900 p-8"
+>
+  <div
+    class="relative"
+    style:width="{pageData.img_width}px"
+    style:height="{pageData.img_height}px"
+    style:transform="scale({scale})"
+    style:transform-origin="center center"
+  >
+    <!-- Page Image -->
+    <img
+      src={pageImage}
+      alt="Manga page"
+      class="pointer-events-none absolute top-0 left-0 h-full w-full object-contain select-none"
+      draggable="false"
+    />
+
+    <!-- Editable Text Boxes -->
+    {#each workingBlocks as block, index (index)}
+      <EditableBox
+        {block}
+        {index}
+        isSelected={selectedIndex === index}
+        imgWidth={pageData.img_width}
+        imgHeight={pageData.img_height}
+        onSelect={() => handleSelect(index)}
+        onUpdate={(updatedBlock) => updateBlock(index, updatedBlock)}
+        onDelete={() => deleteBlock(index)}
+        onClone={() => cloneBlock(index)}
+        bind:selectedIndex
+      />
+    {/each}
+
+    <!-- Click outside to deselect -->
+    <button class="absolute inset-0 -z-10" onclick={handleDeselect} aria-label="Deselect box"
+    ></button>
+  </div>
+</div>
diff --git a/src/lib/components/Editor/EditToolbar.svelte b/src/lib/components/Editor/EditToolbar.svelte
new file mode 100644
index 00000000..568a55f3
--- /dev/null
+++ b/src/lib/components/Editor/EditToolbar.svelte
@@ -0,0 +1,121 @@
+<script lang="ts">
+  import { Button, Toolbar, ToolbarGroup, Select } from 'flowbite-svelte';
+  import {
+    CaretLeftSolid,
+    CaretRightSolid,
+    FloppyDiskSolid,
+    DownloadSolid,
+    XSolid,
+    UndoOutline,
+    CirclePlusSolid
+  } from 'flowbite-svelte-icons';
+
+  type ZoomMode = 'fit-screen' | 'fit-width' | 'original';
+
+  interface Props {
+    pageIndex: number;
+    totalPages: number;
+    hasUnsavedChanges: boolean;
+    hasEdits: boolean;
+    zoomMode: ZoomMode;
+    onPrev: () => void;
+    onNext: () => void;
+    onSave: () => void;
+    onExport: () => void;
+    onExit: () => void;
+    onRevert: () => void;
+    onAddBox: () => void;
+    onZoomChange: (mode: ZoomMode) => void;
+  }
+
+  let {
+    pageIndex,
+    totalPages,
+    hasUnsavedChanges,
+    hasEdits,
+    zoomMode = $bindable(),
+    onPrev,
+    onNext,
+    onSave,
+    onExport,
+    onExit,
+    onRevert,
+    onAddBox,
+    onZoomChange
+  }: Props = $props();
+
+  const zoomOptions = [
+    { value: 'fit-screen', name: 'Fit to Screen' },
+    { value: 'fit-width', name: 'Fit to Width' },
+    { value: 'original', name: 'Original Size' }
+  ];
+
+  function handleZoomChange(event: Event) {
+    const target = event.target as HTMLSelectElement;
+    onZoomChange(target.value as ZoomMode);
+  }
+</script>
+
+<Toolbar
+  color="dark"
+  class="fixed top-0 right-0 left-0 z-50 flex items-center justify-between px-4 py-2"
+>
+  <ToolbarGroup class="flex items-center gap-2">
+    <Button size="sm" color="alternative" onclick={onExit}>
+      <XSolid class="mr-2 h-4 w-4" />
+      Exit
+    </Button>
+
+    <div class="mx-4 font-medium text-white">
+      Page {pageIndex + 1} / {totalPages}
+    </div>
+
+    <Button size="sm" color="alternative" disabled={pageIndex <= 0} onclick={onPrev}>
+      <CaretLeftSolid class="mr-2 h-4 w-4" />
+      Previous
+    </Button>
+
+    <Button size="sm" color="alternative" disabled={pageIndex >= totalPages - 1} onclick={onNext}>
+      Next
+      <CaretRightSolid class="ml-2 h-4 w-4" />
+    </Button>
+
+    <div class="ml-4">
+      <Select
+        size="sm"
+        class="w-40"
+        value={zoomMode}
+        onchange={handleZoomChange}
+        items={zoomOptions}
+      />
+    </div>
+  </ToolbarGroup>
+
+  <ToolbarGroup class="flex items-center gap-2">
+    {#if hasUnsavedChanges}
+      <span class="mr-2 text-sm text-yellow-400">Unsaved changes</span>
+    {/if}
+
+    <Button size="sm" color="green" onclick={onSave} disabled={!hasUnsavedChanges}>
+      <FloppyDiskSolid class="mr-2 h-4 w-4" />
+      Save
+    </Button>
+
+    <Button size="sm" color="purple" onclick={onAddBox}>
+      <CirclePlusSolid class="mr-2 h-4 w-4" />
+      Add Textbox
+    </Button>
+
+    {#if hasEdits}
+      <Button size="sm" color="red" onclick={onRevert}>
+        <UndoOutline class="mr-2 h-4 w-4" />
+        Revert to Original
+      </Button>
+    {/if}
+
+    <Button size="sm" color="blue" onclick={onExport}>
+      <DownloadSolid class="mr-2 h-4 w-4" />
+      Export .mokuro
+    </Button>
+  </ToolbarGroup>
+</Toolbar>
diff --git a/src/lib/components/Editor/EditableBox.svelte b/src/lib/components/Editor/EditableBox.svelte
new file mode 100644
index 00000000..a4a349c2
--- /dev/null
+++ b/src/lib/components/Editor/EditableBox.svelte
@@ -0,0 +1,448 @@
+<script lang="ts">
+  import type { Block } from '$lib/types';
+  import {
+    TrashBinSolid,
+    FileCopySolid,
+    ExpandOutline,
+    ArrowUpRightDownLeftOutline
+  } from 'flowbite-svelte-icons';
+  import { clamp } from '$lib/util';
+
+  interface Props {
+    block: Block;
+    index: number;
+    isSelected: boolean;
+    imgWidth: number;
+    imgHeight: number;
+    selectedIndex: number | null;
+    onSelect: () => void;
+    onUpdate: (block: Block) => void;
+    onDelete: () => void;
+    onClone: () => number;
+  }
+
+  let {
+    block,
+    index,
+    isSelected,
+    imgWidth,
+    imgHeight,
+    selectedIndex = $bindable(),
+    onSelect,
+    onUpdate,
+    onDelete,
+    onClone
+  }: Props = $props();
+
+  let isDraggingMove = $state(false);
+  let isDraggingResize = $state(false);
+  let dragStartX = $state(0);
+  let dragStartY = $state(0);
+  let isEditingText = $state(false);
+  let textContent = $state('');
+  let resizeFrameCount = $state(0);
+
+  // Derived values
+  let [xmin, ymin, xmax, ymax] = $derived(block.box);
+  let width = $derived(xmax - xmin);
+  let height = $derived(ymax - ymin);
+
+  // Initialize text content when block changes
+  $effect(() => {
+    textContent = block.lines.join('\n');
+  });
+
+  function handleSelect(e: MouseEvent) {
+    e.stopPropagation();
+    if (!isSelected) {
+      onSelect();
+    }
+  }
+
+  function handleMoveStart(e: MouseEvent) {
+    e.stopPropagation();
+    e.preventDefault();
+    isDraggingMove = true;
+    dragStartX = e.clientX;
+    dragStartY = e.clientY;
+
+    document.addEventListener('mousemove', handleMove);
+    document.addEventListener('mouseup', handleMoveEnd);
+  }
+
+  function handleMove(e: MouseEvent) {
+    if (!isDraggingMove) return;
+
+    const deltaX = e.clientX - dragStartX;
+    const deltaY = e.clientY - dragStartY;
+
+    // Calculate new position
+    const newXmin = clamp(xmin + deltaX, 0, imgWidth - width);
+    const newYmin = clamp(ymin + deltaY, 0, imgHeight - height);
+
+    onUpdate({
+      ...block,
+      box: [newXmin, newYmin, newXmin + width, newYmin + height]
+    });
+
+    dragStartX = e.clientX;
+    dragStartY = e.clientY;
+  }
+
+  function handleMoveEnd() {
+    isDraggingMove = false;
+    document.removeEventListener('mousemove', handleMove);
+    document.removeEventListener('mouseup', handleMoveEnd);
+  }
+
+  function handleResizeStart(e: MouseEvent) {
+    e.stopPropagation();
+    e.preventDefault();
+    isDraggingResize = true;
+    dragStartX = e.clientX;
+    dragStartY = e.clientY;
+
+    document.addEventListener('mousemove', handleResize);
+    document.addEventListener('mouseup', handleResizeEnd);
+  }
+
+  function handleResize(e: MouseEvent) {
+    if (!isDraggingResize) return;
+
+    const deltaX = e.clientX - dragStartX;
+    const deltaY = e.clientY - dragStartY;
+
+    // Calculate new bottom-right corner (top-left stays anchored)
+    const newXmax = clamp(xmax + deltaX, xmin + 20, imgWidth);
+    const newYmax = clamp(ymax + deltaY, ymin + 20, imgHeight);
+
+    onUpdate({
+      ...block,
+      box: [xmin, ymin, newXmax, newYmax]
+    });
+
+    dragStartX = e.clientX;
+    dragStartY = e.clientY;
+
+    // Auto-size font every 10 frames during resize (throttle for performance)
+    resizeFrameCount++;
+    if (resizeFrameCount % 10 === 0) {
+      requestAnimationFrame(() => autoSizeFontDuringResize());
+    }
+  }
+
+  async function autoSizeFontDuringResize() {
+    // Get the text container element
+    const container = document.querySelector(
+      `[data-block-index="${index}"] .text-container`
+    ) as HTMLElement;
+    if (!container) return;
+
+    const maxSize = 100;
+    const minSize = 6;
+
+    // Helper to check if content overflows
+    const isOverflowing = () => {
+      return (
+        container.scrollHeight > container.clientHeight ||
+        container.scrollWidth > container.clientWidth
+      );
+    };
+
+    let testSize = block.font_size;
+
+    // Quick check: if overflowing, decrease; if not, try to increase
+    if (isOverflowing()) {
+      // Decrease until fits
+      while (testSize > minSize && isOverflowing()) {
+        testSize--;
+        onUpdate({
+          ...block,
+          font_size: testSize
+        });
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+      }
+    } else {
+      // Try to increase
+      while (testSize < maxSize) {
+        testSize++;
+        onUpdate({
+          ...block,
+          font_size: testSize
+        });
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+        if (isOverflowing()) {
+          // Went too far, go back one
+          testSize--;
+          onUpdate({
+            ...block,
+            font_size: testSize
+          });
+          break;
+        }
+      }
+    }
+  }
+
+  function handleResizeEnd() {
+    isDraggingResize = false;
+    resizeFrameCount = 0;
+    document.removeEventListener('mousemove', handleResize);
+    document.removeEventListener('mouseup', handleResizeEnd);
+
+    // Do a final auto-size when resize is complete
+    requestAnimationFrame(() => autoSizeFontDuringResize());
+  }
+
+  function handleClone(e: MouseEvent) {
+    e.stopPropagation();
+    e.preventDefault();
+
+    // Create the clone and get new index
+    const newIndex = onClone();
+
+    // Select the new box
+    selectedIndex = newIndex;
+
+    // Immediately start move mode on the cloned box
+    isDraggingMove = true;
+    dragStartX = e.clientX;
+    dragStartY = e.clientY;
+
+    document.addEventListener('mousemove', handleMove);
+    document.addEventListener('mouseup', handleMoveEnd);
+  }
+
+  function handleDelete(e: MouseEvent) {
+    e.stopPropagation();
+    onDelete();
+  }
+
+  function handleTextClick(e: MouseEvent) {
+    if (isSelected) {
+      e.stopPropagation();
+      isEditingText = true;
+    }
+  }
+
+  function handleTextBlur() {
+    isEditingText = false;
+    // Update lines from text content
+    const newLines = textContent.split('\n').filter((line) => line.trim() !== '');
+    onUpdate({
+      ...block,
+      lines: newLines.length > 0 ? newLines : ['']
+    });
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      isEditingText = false;
+      textContent = block.lines.join('\n'); // Revert changes
+    } else if (e.key === 'Delete' && !isEditingText && isSelected) {
+      onDelete();
+    }
+  }
+
+  async function autoSizeFontSize(e: MouseEvent) {
+    e.stopPropagation();
+
+    // Get the text container element
+    const container = (e.currentTarget as HTMLElement).parentElement?.querySelector(
+      '.w-full.h-full'
+    ) as HTMLElement;
+    if (!container) return;
+
+    const maxSize = 100;
+    const minSize = 6;
+
+    // Helper to check if content overflows
+    const isOverflowing = () => {
+      return (
+        container.scrollHeight > container.clientHeight ||
+        container.scrollWidth > container.clientWidth
+      );
+    };
+
+    // Helper to wait for next frame
+    const nextFrame = () => new Promise((resolve) => requestAnimationFrame(resolve));
+
+    let testSize = block.font_size;
+
+    // Phase 1: Increase size until overflow
+    while (testSize < maxSize) {
+      testSize++;
+      onUpdate({
+        ...block,
+        font_size: testSize
+      });
+      await nextFrame();
+
+      if (isOverflowing()) {
+        // Found overflow! Now reduce until it fits
+        // Phase 2: Decrease size until it fits
+        while (testSize > minSize && isOverflowing()) {
+          testSize--;
+          onUpdate({
+            ...block,
+            font_size: testSize
+          });
+          await nextFrame();
+        }
+        return; // Done!
+      }
+    }
+  }
+</script>
+
+<svelte:window onkeydown={handleKeyDown} />
+
+<div
+  class="absolute border-2"
+  class:border-dashed={!isSelected}
+  class:border-solid={isSelected}
+  class:border-gray-400={!isSelected}
+  class:border-blue-500={isSelected}
+  class:opacity-60={!isSelected}
+  class:opacity-100={isSelected}
+  class:z-10={!isSelected}
+  class:z-50={isSelected}
+  class:cursor-move={isDraggingMove}
+  class:cursor-nwse-resize={isDraggingResize}
+  style:left="{xmin}px"
+  style:top="{ymin}px"
+  style:width="{width}px"
+  style:height="{height}px"
+  style:writing-mode={block.vertical ? 'vertical-rl' : 'horizontal-tb'}
+  onclick={handleSelect}
+  role="button"
+  tabindex="0"
+  data-block-index={index}
+>
+  <!-- Text Content -->
+  {#if isEditingText}
+    <textarea
+      bind:value={textContent}
+      onblur={handleTextBlur}
+      class="h-full w-full resize-none border-none bg-white p-1 text-black outline-none"
+      style:writing-mode={block.vertical ? 'vertical-rl' : 'horizontal-tb'}
+      style:font-size="{block.font_size}px"
+      style:line-height="1.1em"
+      style:font-family="'Noto Sans JP', sans-serif"
+      autofocus
+    ></textarea>
+  {:else}
+    <div
+      class="text-container h-full w-full cursor-text overflow-hidden p-1 text-black"
+      class:bg-white={isSelected}
+      class:bg-opacity-80={isSelected}
+      onclick={handleTextClick}
+      role="button"
+      tabindex="-1"
+      style:font-size="{block.font_size}px"
+      style:line-height="1.1em"
+      style:font-family="'Noto Sans JP', sans-serif"
+    >
+      {#each block.lines as line}
+        <p class="m-0 leading-tight">{line}</p>
+      {/each}
+    </div>
+  {/if}
+
+  {#if isSelected}
+    <!-- Move Handle (Top-Left) -->
+    <button
+      class="handle handle-move"
+      onmousedown={handleMoveStart}
+      title="Move"
+      aria-label="Move box"
+    >
+      <ExpandOutline class="h-4 w-4 rotate-45" />
+    </button>
+
+    <!-- Delete Handle (Top-Right) -->
+    <button
+      class="handle handle-delete"
+      onclick={handleDelete}
+      title="Delete"
+      aria-label="Delete box"
+    >
+      <TrashBinSolid class="h-3 w-3" />
+    </button>
+
+    <!-- Clone Handle (Bottom-Left) -->
+    <button
+      class="handle handle-clone"
+      onmousedown={handleClone}
+      title="Clone (drag to place)"
+      aria-label="Clone box"
+    >
+      <FileCopySolid class="h-3 w-3" />
+    </button>
+
+    <!-- Resize Handle (Bottom-Right) -->
+    <button
+      class="handle handle-resize"
+      onmousedown={handleResizeStart}
+      title="Resize (auto-sizes font)"
+      aria-label="Resize box"
+    >
+      <ArrowUpRightDownLeftOutline class="h-4 w-4 rotate-90" />
+    </button>
+  {/if}
+</div>
+
+<style>
+  .handle {
+    position: absolute;
+    width: 28px;
+    height: 28px;
+    background: white;
+    border: 2px solid #3b82f6;
+    border-radius: 6px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    transition: all 0.2s;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+
+  .handle:hover {
+    transform: scale(1.1);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  }
+
+  .handle-move {
+    top: -14px;
+    left: -14px;
+    cursor: move;
+    color: #3b82f6;
+  }
+
+  .handle-delete {
+    top: -14px;
+    right: -14px;
+    cursor: pointer;
+    background: #ef4444;
+    color: white;
+    border-color: #dc2626;
+  }
+
+  .handle-clone {
+    bottom: -14px;
+    left: -14px;
+    cursor: copy;
+    background: #10b981;
+    color: white;
+    border-color: #059669;
+  }
+
+  .handle-resize {
+    bottom: -14px;
+    right: -14px;
+    cursor: nwse-resize;
+    color: #3b82f6;
+  }
+</style>
diff --git a/src/lib/components/Reader/QuickActions.svelte b/src/lib/components/Reader/QuickActions.svelte
index 1db31971..c52ccca3 100644
--- a/src/lib/components/Reader/QuickActions.svelte
+++ b/src/lib/components/Reader/QuickActions.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
+  import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
   import { toggleFullScreen, zoomFitToScreen } from '$lib/panzoom';
+  import { Modal, Button } from 'flowbite-svelte';
   import { settings } from '$lib/settings';
   import {
     ArrowLeftOutline,
@@ -7,7 +10,8 @@
     CompressOutline,
     ImageOutline,
     ZoomOutOutline,
-    PlusOutline
+    PlusOutline,
+    EditOutline
   } from 'flowbite-svelte-icons';
   import { imageToWebp, showCropper, updateLastCard } from '$lib/anki-connect';
   import { promptConfirmation } from '$lib/util';
@@ -17,11 +21,14 @@
     right: (_e: any, ingoreTimeOut?: boolean) => void;
     src1: File | undefined;
     src2: File | undefined;
+    currentPage: number;
+    showSecondPage: boolean;
   }
 
-  let { left, right, src1, src2 }: Props = $props();
+  let { left, right, src1, src2, currentPage, showSecondPage }: Props = $props();
 
   let open = $state(false);
+  let showPageSelector = $state(false);
 
   function handleZoom() {
     zoomFitToScreen();
@@ -38,6 +45,25 @@
     open = false;
   }
 
+  function handleEditPage() {
+    open = false;
+
+    if (showSecondPage) {
+      // Show modal to select which page to edit
+      showPageSelector = true;
+    } else {
+      // Navigate directly to edit the current page
+      navigateToEditPage(currentPage - 1); // Convert to 0-based index
+    }
+  }
+
+  function navigateToEditPage(pageIndex: number) {
+    const manga = $page.params.manga;
+    const volume = $page.params.volume;
+    goto(`/${manga}/${volume}/edit/${pageIndex}`);
+    showPageSelector = false;
+  }
+
   async function onUpdateCard(src: File | undefined) {
     if ($settings.ankiConnectSettings.enabled && src) {
       if ($settings.ankiConnectSettings.cropImage) {
@@ -118,6 +144,13 @@
         >
           <ArrowLeftOutline size="xl" />
         </button>
+        <button
+          onclick={handleEditPage}
+          class="flex h-12 w-12 items-center justify-center rounded-full bg-gray-700 text-gray-300 shadow-lg hover:bg-gray-600 focus:outline-none dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+          aria-label="Edit page"
+        >
+          <EditOutline size="xl" />
+        </button>
       </div>
     {/if}
 
@@ -132,3 +165,22 @@
     </button>
   </div>
 {/if}
+
+<Modal bind:open={showPageSelector} size="xs" autoclose={false}>
+  <div class="text-center">
+    <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
+      Which page do you want to edit?
+    </h3>
+    <div class="flex justify-center gap-4">
+      <Button color="blue" onclick={() => navigateToEditPage(currentPage - 1)}>
+        Left Page ({currentPage})
+      </Button>
+      <Button color="blue" onclick={() => navigateToEditPage(currentPage)}>
+        Right Page ({currentPage + 1})
+      </Button>
+    </div>
+    <div class="mt-4">
+      <Button color="alternative" onclick={() => (showPageSelector = false)}>Cancel</Button>
+    </div>
+  </div>
+</Modal>
diff --git a/src/lib/components/Reader/Reader.svelte b/src/lib/components/Reader/Reader.svelte
index b772cbe7..98eaaddd 100644
--- a/src/lib/components/Reader/Reader.svelte
+++ b/src/lib/components/Reader/Reader.svelte
@@ -3,6 +3,7 @@
   import type { TransitionConfig } from 'svelte/transition';
 
   import { currentSeries, currentVolume, currentVolumeData } from '$lib/catalog';
+  import { getCurrentPages } from '$lib/catalog/pages';
   import {
     Panzoom,
     panzoomStore,
@@ -378,7 +379,7 @@
     }
   });
 
-  let pages = $derived(volumeData?.pages || []);
+  let pages = $derived(volumeData ? getCurrentPages(volumeData) : []);
   let page = $derived($progress?.[volume?.volume_uuid || 0] || 1);
   let index = $derived(page - 1);
 
@@ -772,6 +773,8 @@
     src2={!useSinglePage && volumeData.files
       ? Object.values(volumeData.files)[index + 1]
       : undefined}
+    currentPage={page}
+    showSecondPage={showSecondPage()}
   />
   <SettingsButton />
   <Cropper />
diff --git a/src/lib/components/VolumeItem.svelte b/src/lib/components/VolumeItem.svelte
index c64fd4e2..b36ec888 100644
--- a/src/lib/components/VolumeItem.svelte
+++ b/src/lib/components/VolumeItem.svelte
@@ -12,7 +12,8 @@
     FileLinesOutline,
     DotsVerticalOutline,
     CloudArrowUpOutline,
-    ImageOutline
+    ImageOutline,
+    PenSolid
   } from 'flowbite-svelte-icons';
   import { goto } from '$app/navigation';
   import { db } from '$lib/catalog/db';
@@ -22,6 +23,7 @@
   import { backupQueue } from '$lib/util/backup-queue';
   import type { CloudVolumeWithProvider } from '$lib/util/sync/unified-cloud-manager';
   import { getCharCount } from '$lib/util/count-chars';
+  import { hasEdits } from '$lib/catalog/pages';
   import PlaceholderThumbnail from './PlaceholderThumbnail.svelte';
 
   interface Props {
@@ -71,8 +73,10 @@
   let timeReadMinutes = $derived(volumeData?.timeReadInMinutes || 0);
   let charsRead = $derived(volumeData?.chars || 0);
   let totalChars = $state<number | undefined>(undefined);
+  let volumeHasEdits = $state(false);
 
   // Calculate Japanese character count from pages data (matches reading tracker)
+  // Also check if volume has edits
   $effect(() => {
     db.volumes_data.get(volume.volume_uuid).then((data) => {
       if (data?.pages) {
@@ -81,6 +85,9 @@
           totalChars = charCount;
         }
       }
+      if (data) {
+        volumeHasEdits = hasEdits(data);
+      }
     });
   });
 
@@ -288,6 +295,11 @@
           <div>
             <div class="mb-1 flex items-center gap-2">
               <p class="font-semibold" class:text-white={!isComplete}>{volName}</p>
+              {#if volumeHasEdits}
+                <Badge color="yellow" class="!px-1.5 !py-0.5">
+                  <PenSolid class="h-3 w-3" />
+                </Badge>
+              {/if}
               {#if isImageOnly}
                 <Badge color="blue" class="text-xs">
                   <ImageOutline class="me-1 inline h-3 w-3" />
@@ -389,6 +401,11 @@
               <CheckCircleSolid class="h-5 w-5 flex-shrink-0 text-green-400" />
             {/if}
           </div>
+          {#if volumeHasEdits}
+            <Badge color="yellow" class="flex-shrink-0 !px-1.5 !py-0.5">
+              <PenSolid class="h-3 w-3" />
+            </Badge>
+          {/if}
           {#if isImageOnly}
             <Badge color="blue" class="w-fit text-xs">
               <ImageOutline class="me-1 inline h-3 w-3" />
diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts
index e85fafce..c7d43e59 100644
--- a/src/lib/types/index.ts
+++ b/src/lib/types/index.ts
@@ -42,5 +42,6 @@ export interface VolumeMetadata {
 export interface VolumeData {
   volume_uuid: string;
   pages: Page[];
+  edited_pages?: Page[];
   files?: Record<string, File>;
 }
diff --git a/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte b/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte
new file mode 100644
index 00000000..aa61792c
--- /dev/null
+++ b/src/routes/[manga]/[volume]/edit/[pageIndex]/+page.svelte
@@ -0,0 +1,372 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { goto } from '$app/navigation';
+  import { db } from '$lib/catalog/db';
+  import { getCurrentPages, hasEdits } from '$lib/catalog/pages';
+  import type { VolumeData, Page, Block } from '$lib/types';
+  import { onMount } from 'svelte';
+  import { Button, Modal, Spinner, Toast } from 'flowbite-svelte';
+  import { CheckCircleSolid, CloseCircleSolid } from 'flowbite-svelte-icons';
+  import EditToolbar from '$lib/components/Editor/EditToolbar.svelte';
+  import EditCanvas from '$lib/components/Editor/EditCanvas.svelte';
+  import { promptConfirmation } from '$lib/util';
+
+  type ZoomMode = 'fit-screen' | 'fit-width' | 'original';
+
+  let volumeUuid = $derived($page.params.volume || '');
+  let pageIndexParam = $derived($page.params.pageIndex || '0');
+  let pageIndex = $derived(parseInt(pageIndexParam, 10));
+
+  let volumeData = $state<VolumeData | undefined>(undefined);
+  let workingBlocks = $state<Block[]>([]);
+  let selectedIndex = $state<number | null>(null);
+  let hasUnsavedChanges = $state(false);
+  let isLoading = $state(true);
+  let showUnsavedWarning = $state(false);
+  let pendingNavigation: (() => void) | null = null;
+  let zoomMode = $state<ZoomMode>('fit-screen');
+  let showSaveSuccess = $state(false);
+  let showSaveError = $state(false);
+  let saveErrorMessage = $state('');
+  let showRevertSuccess = $state(false);
+  let isMounted = $state(false);
+
+  let pageData = $derived(volumeData ? getCurrentPages(volumeData)[pageIndex] : undefined);
+  let totalPages = $derived(volumeData ? getCurrentPages(volumeData).length : 0);
+  let volumeHasEdits = $derived(volumeData ? hasEdits(volumeData) : false);
+  let pageImage = $derived(
+    volumeData?.files && Object.values(volumeData.files)[pageIndex]
+      ? URL.createObjectURL(Object.values(volumeData.files)[pageIndex])
+      : ''
+  );
+
+  onMount(async () => {
+    await loadVolumeData();
+    isMounted = true;
+  });
+
+  // Reload working blocks when page index changes
+  $effect(() => {
+    if (volumeData && pageIndex >= 0) {
+      const currentPages = getCurrentPages(volumeData);
+      if (currentPages[pageIndex]) {
+        workingBlocks = JSON.parse(JSON.stringify(currentPages[pageIndex].blocks || []));
+        selectedIndex = null;
+        hasUnsavedChanges = false;
+      }
+    }
+  });
+
+  async function loadVolumeData() {
+    isLoading = true;
+    try {
+      const data = await db.volumes_data.get(volumeUuid);
+      if (data) {
+        volumeData = data;
+        // Initialize working blocks with current page's blocks (edited or original)
+        const currentPages = getCurrentPages(data);
+        workingBlocks = JSON.parse(JSON.stringify(currentPages[pageIndex]?.blocks || []));
+      }
+    } catch (error) {
+      console.error('Failed to load volume data:', error);
+    } finally {
+      isLoading = false;
+    }
+  }
+
+  function updateBlock(index: number, updatedBlock: Block) {
+    workingBlocks[index] = updatedBlock;
+    hasUnsavedChanges = true;
+    workingBlocks = [...workingBlocks]; // Trigger reactivity
+  }
+
+  function deleteBlock(index: number) {
+    workingBlocks.splice(index, 1);
+    hasUnsavedChanges = true;
+    selectedIndex = null;
+    workingBlocks = [...workingBlocks]; // Trigger reactivity
+  }
+
+  function cloneBlock(index: number): number {
+    const clonedBlock = JSON.parse(JSON.stringify(workingBlocks[index]));
+    // Offset the cloned box slightly
+    const offset = 20;
+    clonedBlock.box = [
+      clonedBlock.box[0] + offset,
+      clonedBlock.box[1] + offset,
+      clonedBlock.box[2] + offset,
+      clonedBlock.box[3] + offset
+    ];
+    workingBlocks.push(clonedBlock);
+    hasUnsavedChanges = true;
+    workingBlocks = [...workingBlocks]; // Trigger reactivity
+    return workingBlocks.length - 1; // Return new index
+  }
+
+  async function saveEdits() {
+    if (!volumeData) return;
+
+    try {
+      // Get current pages (edited or original)
+      const currentPages = getCurrentPages(volumeData);
+
+      // Create a copy and update the current page's blocks
+      // Use JSON parse/stringify to avoid cloning issues with IndexedDB objects and Svelte proxies
+      const updatedPages = JSON.parse(JSON.stringify(currentPages));
+      updatedPages[pageIndex].blocks = JSON.parse(JSON.stringify(workingBlocks));
+
+      // Save to edited_pages field
+      await db.volumes_data.update(volumeUuid, {
+        edited_pages: updatedPages
+      });
+
+      // Update local volumeData
+      volumeData.edited_pages = updatedPages;
+      hasUnsavedChanges = false;
+
+      // Show success toast
+      showSaveSuccess = true;
+      setTimeout(() => {
+        showSaveSuccess = false;
+      }, 3000);
+
+      console.log('Edits saved successfully');
+    } catch (error) {
+      console.error('Failed to save edits:', error);
+
+      // Show error toast
+      saveErrorMessage = error instanceof Error ? error.message : 'Unknown error';
+      showSaveError = true;
+      setTimeout(() => {
+        showSaveError = false;
+      }, 5000);
+    }
+  }
+
+  function navigatePage(newPageIndex: number) {
+    if (newPageIndex < 0 || newPageIndex >= totalPages) return;
+
+    if (hasUnsavedChanges) {
+      showUnsavedWarning = true;
+      pendingNavigation = () => {
+        goto(`/${$page.params.manga}/${volumeUuid}/edit/${newPageIndex}`);
+      };
+    } else {
+      goto(`/${$page.params.manga}/${volumeUuid}/edit/${newPageIndex}`);
+    }
+  }
+
+  function exitToReader() {
+    if (hasUnsavedChanges) {
+      showUnsavedWarning = true;
+      pendingNavigation = () => {
+        goto(`/${$page.params.manga}/${volumeUuid}?page=${pageIndex + 1}`);
+      };
+    } else {
+      goto(`/${$page.params.manga}/${volumeUuid}?page=${pageIndex + 1}`);
+    }
+  }
+
+  async function saveAndNavigate() {
+    await saveEdits();
+    showUnsavedWarning = false;
+    if (pendingNavigation) {
+      pendingNavigation();
+      pendingNavigation = null;
+    }
+  }
+
+  function discardAndNavigate() {
+    hasUnsavedChanges = false;
+    showUnsavedWarning = false;
+    if (pendingNavigation) {
+      pendingNavigation();
+      pendingNavigation = null;
+    }
+  }
+
+  function cancelNavigation() {
+    showUnsavedWarning = false;
+    pendingNavigation = null;
+  }
+
+  function addTextbox() {
+    if (!pageData) return;
+
+    // Create a new empty textbox in the center of the page
+    const centerX = pageData.img_width / 2;
+    const centerY = pageData.img_height / 2;
+    const defaultWidth = 200;
+    const defaultHeight = 100;
+
+    const newBlock: Block = {
+      box: [
+        centerX - defaultWidth / 2,
+        centerY - defaultHeight / 2,
+        centerX + defaultWidth / 2,
+        centerY + defaultHeight / 2
+      ],
+      vertical: false,
+      font_size: 20,
+      lines: ['']
+    };
+
+    workingBlocks.push(newBlock);
+    workingBlocks = [...workingBlocks]; // Trigger reactivity
+    hasUnsavedChanges = true;
+
+    // Auto-select the new box
+    selectedIndex = workingBlocks.length - 1;
+  }
+
+  async function revertToOriginal() {
+    if (!volumeData) return;
+
+    promptConfirmation('Revert all edits to original? This cannot be undone.', async () => {
+      try {
+        // Remove edited_pages field from database
+        await db.volumes_data.update(volumeUuid, {
+          edited_pages: undefined
+        });
+
+        // Reload the page to show original data
+        await loadVolumeData();
+
+        // Show success toast
+        showRevertSuccess = true;
+        setTimeout(() => {
+          showRevertSuccess = false;
+        }, 3000);
+      } catch (error) {
+        console.error('Failed to revert edits:', error);
+        saveErrorMessage = error instanceof Error ? error.message : 'Unknown error';
+        showSaveError = true;
+        setTimeout(() => {
+          showSaveError = false;
+        }, 5000);
+      }
+    });
+  }
+
+  async function exportMokuro() {
+    if (!volumeData) return;
+
+    try {
+      const metadata = await db.volumes.get(volumeUuid);
+      if (!metadata) return;
+
+      const currentPages = getCurrentPages(volumeData);
+
+      const mokuroData = {
+        version: metadata.mokuro_version,
+        title: metadata.series_title,
+        title_uuid: metadata.series_uuid,
+        volume: metadata.volume_title,
+        volume_uuid: metadata.volume_uuid,
+        pages: currentPages,
+        chars: currentPages.reduce(
+          (total, page) =>
+            total +
+            page.blocks.reduce((pageTotal, block) => pageTotal + block.lines.join('').length, 0),
+          0
+        )
+      };
+
+      const blob = new Blob([JSON.stringify(mokuroData, null, 2)], {
+        type: 'application/json'
+      });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `${metadata.volume_title}_edited.mokuro`;
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error('Failed to export .mokuro file:', error);
+    }
+  }
+</script>
+
+<svelte:head>
+  <title>Edit Page {pageIndex + 1}</title>
+</svelte:head>
+
+{#if isLoading}
+  <div class="flex h-screen w-screen items-center justify-center">
+    <Spinner size="12" />
+  </div>
+{:else if volumeData && pageData}
+  <EditToolbar
+    {pageIndex}
+    {totalPages}
+    {hasUnsavedChanges}
+    hasEdits={volumeHasEdits}
+    bind:zoomMode
+    onPrev={() => navigatePage(pageIndex - 1)}
+    onNext={() => navigatePage(pageIndex + 1)}
+    onSave={saveEdits}
+    onExport={exportMokuro}
+    onExit={exitToReader}
+    onRevert={revertToOriginal}
+    onAddBox={addTextbox}
+    onZoomChange={(mode) => (zoomMode = mode)}
+  />
+
+  <EditCanvas
+    {pageData}
+    {pageImage}
+    {zoomMode}
+    bind:workingBlocks
+    bind:selectedIndex
+    {updateBlock}
+    {deleteBlock}
+    {cloneBlock}
+  />
+
+  <Modal bind:open={showUnsavedWarning} size="xs" autoclose={false}>
+    <div class="text-center">
+      <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
+        You have unsaved changes. Save before leaving?
+      </h3>
+      <div class="flex justify-center gap-4">
+        <Button color="green" onclick={saveAndNavigate}>Save & Continue</Button>
+        <Button color="red" onclick={discardAndNavigate}>Discard</Button>
+        <Button color="alternative" onclick={cancelNavigation}>Cancel</Button>
+      </div>
+    </div>
+  </Modal>
+
+  <!-- Success Toast -->
+  {#if isMounted && showSaveSuccess}
+    <Toast color="green" position="top-right" class="fixed top-20 right-4 z-50">
+      {#snippet icon()}
+        <CheckCircleSolid class="h-5 w-5" />
+      {/snippet}
+      Edits saved successfully
+    </Toast>
+  {/if}
+
+  <!-- Error Toast -->
+  {#if isMounted && showSaveError}
+    <Toast color="red" position="top-right" class="fixed top-20 right-4 z-50">
+      {#snippet icon()}
+        <CloseCircleSolid class="h-5 w-5" />
+      {/snippet}
+      Failed to save: {saveErrorMessage}
+    </Toast>
+  {/if}
+
+  <!-- Revert Success Toast -->
+  {#if isMounted && showRevertSuccess}
+    <Toast color="green" position="top-right" class="fixed top-20 right-4 z-50">
+      {#snippet icon()}
+        <CheckCircleSolid class="h-5 w-5" />
+      {/snippet}
+      Reverted to original
+    </Toast>
+  {/if}
+{:else}
+  <div class="flex h-screen w-screen items-center justify-center">
+    <p class="text-xl">Failed to load page data</p>
+  </div>
+{/if}