diff --git a/astro.config.mjs b/astro.config.mjs
index 97fb8b9..98ca6ba 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,3 +1,4 @@
+import fs from 'node:fs/promises'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import mdx from '@astrojs/mdx'
@@ -5,6 +6,67 @@ import tailwindcss from '@tailwindcss/vite'
 import { defineConfig } from 'astro/config'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const thoughtsCanvasLayoutPath = path.resolve(__dirname, 'src/data/thoughts-canvas-layout.json')
+
+function thoughtsCanvasLayoutDevPlugin() {
+  return {
+    name: 'thoughts-canvas-layout-dev',
+    configureServer(server) {
+      server.middlewares.use('/__thoughts-canvas-layout', async (req, res, next) => {
+        if (req.method !== 'POST')
+          return next()
+
+        try {
+          let body = ''
+          for await (const chunk of req)
+            body += chunk
+
+          const payload = JSON.parse(body)
+          if (payload?.version !== 1 || typeof payload.cards !== 'object' || payload.cards === null)
+            throw new Error('Invalid thoughts layout payload')
+
+          const cards = {}
+          for (const [slug, card] of Object.entries(payload.cards)) {
+            if (
+              typeof slug !== 'string'
+              || typeof card !== 'object'
+              || card === null
+              || !Number.isFinite(card.x)
+              || !Number.isFinite(card.y)
+              || !Number.isFinite(card.rotateDeg)
+            ) {
+              throw new Error(`Invalid card layout for ${slug}`)
+            }
+            cards[slug] = {
+              x: Math.round(card.x * 100) / 100,
+              y: Math.round(card.y * 100) / 100,
+              rotateDeg: Math.round(card.rotateDeg * 100) / 100,
+            }
+          }
+
+          const sortedCards = Object.fromEntries(Object.entries(cards).sort(([a], [b]) => a.localeCompare(b)))
+          await fs.writeFile(
+            thoughtsCanvasLayoutPath,
+            `${JSON.stringify({ version: 1, cards: sortedCards }, null, 2)}\n`,
+            'utf8',
+          )
+
+          const layoutModules = server.moduleGraph.getModulesByFile(thoughtsCanvasLayoutPath)
+          layoutModules?.forEach(mod => server.moduleGraph.invalidateModule(mod))
+
+          res.statusCode = 200
+          res.setHeader('Content-Type', 'application/json')
+          res.end(JSON.stringify({ ok: true, layout: { version: 1, cards: sortedCards } }))
+        }
+        catch (err) {
+          res.statusCode = 400
+          res.setHeader('Content-Type', 'application/json')
+          res.end(JSON.stringify({ ok: false, error: err instanceof Error ? err.message : 'Unknown error' }))
+        }
+      })
+    },
+  }
+}
 
 // https://astro.build/config
 export default defineConfig({
@@ -37,7 +99,12 @@ export default defineConfig({
   ],
 
   vite: {
-    plugins: [tailwindcss()],
+    plugins: [tailwindcss(), thoughtsCanvasLayoutDevPlugin()],
+    server: {
+      watch: {
+        ignored: [thoughtsCanvasLayoutPath],
+      },
+    },
     resolve: {
       alias: {
         '@': path.resolve(__dirname, 'src'),
diff --git a/src/components/icons/RotateCcw.astro b/src/components/icons/RotateCcw.astro
new file mode 100644
index 0000000..2bd7136
--- /dev/null
+++ b/src/components/icons/RotateCcw.astro
@@ -0,0 +1,25 @@
+---
+interface Props {
+  class?: string
+  size?: number
+}
+
+const { class: className = '', size = 14 } = Astro.props
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class:list={['lucide lucide-rotate-ccw', className]}
+  aria-hidden="true"
+>
+  <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path>
+  <path d="M3 3v5h5"></path>
+</svg>
diff --git a/src/components/icons/RotateCw.astro b/src/components/icons/RotateCw.astro
new file mode 100644
index 0000000..6f9fa26
--- /dev/null
+++ b/src/components/icons/RotateCw.astro
@@ -0,0 +1,25 @@
+---
+interface Props {
+  class?: string
+  size?: number
+}
+
+const { class: className = '', size = 14 } = Astro.props
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class:list={['lucide lucide-rotate-cw', className]}
+  aria-hidden="true"
+>
+  <path d="M21 12a9 9 0 1 1-9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path>
+  <path d="M21 3v5h-5"></path>
+</svg>
diff --git a/src/components/thoughts/ThoughtsCanvasBottomToolbar.astro b/src/components/thoughts/ThoughtsCanvasBottomToolbar.astro
index f631207..561d35c 100644
--- a/src/components/thoughts/ThoughtsCanvasBottomToolbar.astro
+++ b/src/components/thoughts/ThoughtsCanvasBottomToolbar.astro
@@ -1,9 +1,23 @@
 ---
+import RotateCcw from '@/components/icons/RotateCcw.astro'
+import RotateCw from '@/components/icons/RotateCw.astro'
+
+interface Props {
+  isDev?: boolean
+}
+
+const { isDev = false } = Astro.props
 ---
 
 <div
   id="thoughts-canvas-bottom-toolbar"
-  class="motion-reduce:hidden pointer-events-none fixed inset-x-0 bottom-[max(1.75rem,calc(env(safe-area-inset-bottom)+0.75rem))] z-40 hidden justify-center px-4 max-md:flex md:motion-safe:flex"
+  data-editable={isDev ? 'true' : 'false'}
+  class:list={[
+    'motion-reduce:hidden pointer-events-none fixed inset-x-0 z-40 hidden justify-center px-4 max-md:flex md:motion-safe:flex',
+    isDev
+      ? 'bottom-[max(4.75rem,calc(env(safe-area-inset-bottom)+4rem))]'
+      : 'bottom-[max(1.75rem,calc(env(safe-area-inset-bottom)+0.75rem))]',
+  ]}
   aria-label="Thoughts canvas controls"
 >
   <div
@@ -34,6 +48,59 @@
 
     <div class="mx-0.5 hidden h-5 w-px bg-gray-200/90 sm:block" aria-hidden="true"></div>
 
+    {
+      isDev && (
+        <>
+          <div
+            class="flex items-center gap-0.5 rounded-sm border border-gray-200/80 bg-white/80 px-1 py-0.5"
+            aria-label="Canvas edit"
+          >
+            <button
+              type="button"
+              id="thoughts-canvas-edit"
+              class="cursor-pointer rounded-sm px-2 py-1 text-[11px] text-gray-700 transition-colors hover:bg-gray-100 sm:text-xs"
+              aria-pressed="false"
+            >
+              Edit
+            </button>
+            <button
+              type="button"
+              id="thoughts-canvas-rotate-left"
+              class="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm text-sm leading-none text-gray-700 transition-colors hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-35"
+              aria-label="Rotate left"
+              disabled
+            >
+              <RotateCcw />
+            </button>
+            <button
+              type="button"
+              id="thoughts-canvas-rotate-right"
+              class="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm text-sm leading-none text-gray-700 transition-colors hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-35"
+              aria-label="Rotate right"
+              disabled
+            >
+              <RotateCw />
+            </button>
+            <button
+              type="button"
+              id="thoughts-canvas-save"
+              class="cursor-pointer rounded-sm px-2 py-1 text-[11px] text-gray-700 transition-colors hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-35 sm:text-xs"
+              disabled
+            >
+              Save
+            </button>
+            <span
+              id="thoughts-canvas-edit-status"
+              class="min-w-[3.75rem] select-none px-1 text-gray-500"
+              aria-live="polite"
+            ></span>
+          </div>
+
+          <div class="mx-0.5 hidden h-5 w-px bg-gray-200/90 sm:block" aria-hidden="true"></div>
+        </>
+      )
+    }
+
     <div
       id="thoughts-canvas-zoom-cluster"
       class="flex items-center gap-0.5 rounded-sm border border-gray-200/80 bg-white/80 px-1 py-0.5 tabular-nums"
@@ -77,16 +144,6 @@ function qs<T extends HTMLElement>(sel: string) {
   return document.querySelector<T>(sel)
 }
 
-function chromeOpts(): ThoughtsCanvasChromeOptions {
-  return {
-    zoomOutBtn: qs<HTMLButtonElement>('#thoughts-canvas-zoom-out'),
-    zoomInBtn: qs<HTMLButtonElement>('#thoughts-canvas-zoom-in'),
-    zoomLevelEl: qs<HTMLElement>('#thoughts-canvas-zoom-level'),
-    resetBtn: qs<HTMLButtonElement>('#thoughts-canvas-reset'),
-    initialScale: window.innerWidth < 1024 ? 0.75 : 1,
-  }
-}
-
 const root = qs<HTMLElement>('#thoughts-root')
 const toolbar = qs<HTMLElement>('#thoughts-canvas-bottom-toolbar')
 const cardBtn = qs<HTMLButtonElement>('#thoughts-mode-card')
@@ -99,11 +156,27 @@ const zoomInEl = qs<HTMLButtonElement>('#thoughts-canvas-zoom-in')
 const zoomLevelEl = qs<HTMLElement>('#thoughts-canvas-zoom-level')
 const resetBtn = qs<HTMLButtonElement>('#thoughts-canvas-reset')
 
+function chromeOpts(): ThoughtsCanvasChromeOptions {
+  return {
+    zoomOutBtn: qs<HTMLButtonElement>('#thoughts-canvas-zoom-out'),
+    zoomInBtn: qs<HTMLButtonElement>('#thoughts-canvas-zoom-in'),
+    zoomLevelEl: qs<HTMLElement>('#thoughts-canvas-zoom-level'),
+    resetBtn: qs<HTMLButtonElement>('#thoughts-canvas-reset'),
+    editBtn: qs<HTMLButtonElement>('#thoughts-canvas-edit'),
+    rotateLeftBtn: qs<HTMLButtonElement>('#thoughts-canvas-rotate-left'),
+    rotateRightBtn: qs<HTMLButtonElement>('#thoughts-canvas-rotate-right'),
+    saveBtn: qs<HTMLButtonElement>('#thoughts-canvas-save'),
+    editStatusEl: qs<HTMLElement>('#thoughts-canvas-edit-status'),
+    enableEditing: toolbar?.dataset.editable === 'true',
+    initialScale: window.innerWidth < 1024 ? 0.75 : 1,
+  }
+}
+
 if (root && toolbar && cardBtn && canvasBtn && viewport && world && zoomCluster && zoomOutEl && zoomInEl && zoomLevelEl && resetBtn) {
   let activeCanvas: ReturnType<typeof initThoughtsCanvas> | null = null
 
-  const mqDesktopCanvas = window.matchMedia('(min-width: 768px) and (prefers-reduced-motion: no-preference)')
-  let currentMode: 'canvas' | 'card' = mqDesktopCanvas.matches ? 'canvas' : 'card'
+  const mqCanvasAllowed = window.matchMedia('(prefers-reduced-motion: no-preference)')
+  let currentMode: 'canvas' | 'card' = mqCanvasAllowed.matches ? 'canvas' : 'card'
 
   function setModeUi(mode: 'card' | 'canvas') {
     const onCanvas = mode === 'canvas'
@@ -129,8 +202,8 @@ if (root && toolbar && cardBtn && canvasBtn && viewport && world && zoomCluster
     }
   }
 
-  function setViewMode(mode: 'card' | 'canvas') {
-    if (mode === currentMode)
+  function setViewMode(mode: 'card' | 'canvas', force = false) {
+    if (!force && mode === currentMode)
       return
     currentMode = mode
 
@@ -151,14 +224,10 @@ if (root && toolbar && cardBtn && canvasBtn && viewport && world && zoomCluster
   cardBtn!.addEventListener('click', () => setViewMode('card'))
   canvasBtn!.addEventListener('click', () => setViewMode('canvas'))
 
-  mqDesktopCanvas.addEventListener('change', (e) => {
+  mqCanvasAllowed.addEventListener('change', (e) => {
     setViewMode(e.matches ? 'canvas' : 'card')
   })
 
-  if (currentMode === 'canvas') {
-    if (!activeCanvas)
-      activeCanvas = initThoughtsCanvas(viewport!, world!, chromeOpts())
-  }
-  setModeUi(currentMode)
+  setViewMode(currentMode, true)
 }
 </script>
diff --git a/src/components/thoughts/thoughts-canvas-controller.ts b/src/components/thoughts/thoughts-canvas-controller.ts
index 252ede2..14056b0 100644
--- a/src/components/thoughts/thoughts-canvas-controller.ts
+++ b/src/components/thoughts/thoughts-canvas-controller.ts
@@ -18,6 +18,12 @@ export interface ThoughtsCanvasChromeOptions {
   zoomInBtn?: HTMLButtonElement | null
   zoomLevelEl?: HTMLElement | null
   resetBtn?: HTMLButtonElement | null
+  editBtn?: HTMLButtonElement | null
+  rotateLeftBtn?: HTMLButtonElement | null
+  rotateRightBtn?: HTMLButtonElement | null
+  saveBtn?: HTMLButtonElement | null
+  editStatusEl?: HTMLElement | null
+  enableEditing?: boolean
   initialScale?: number
 }
 
@@ -35,16 +41,40 @@ function parseCssPx(raw: string): number {
   return Number.isFinite(n) ? n : 0
 }
 
-function readCardDragOffsets(card: HTMLElement): { x: number, y: number } {
-  return {
-    x: parseCssPx(card.style.getPropertyValue('--drag-x')),
-    y: parseCssPx(card.style.getPropertyValue('--drag-y')),
-  }
+function readCardX(card: HTMLElement): number {
+  const raw = card.style.getPropertyValue('--edit-x')
+  if (raw)
+    return parseCssPx(raw)
+  const dataX = Number.parseFloat(card.dataset.x ?? '')
+  if (Number.isFinite(dataX))
+    return dataX
+  return parseCssPx(getComputedStyle(card).left)
+}
+
+function readCardY(card: HTMLElement): number {
+  const raw = card.style.getPropertyValue('--edit-y')
+  if (raw)
+    return parseCssPx(raw)
+  const dataY = Number.parseFloat(card.dataset.y ?? '')
+  if (Number.isFinite(dataY))
+    return dataY
+  return parseCssPx(getComputedStyle(card).top)
 }
 
-function setCardDragOffsets(card: HTMLElement, x: number, y: number) {
-  card.style.setProperty('--drag-x', `${x}px`)
-  card.style.setProperty('--drag-y', `${y}px`)
+function readCardRotate(card: HTMLElement): number {
+  return Number.parseFloat(card.dataset.rotate ?? '') || 0
+}
+
+function setCardPosition(card: HTMLElement, x: number, y: number) {
+  card.dataset.x = String(x)
+  card.dataset.y = String(y)
+  card.style.setProperty('--edit-x', `${x}px`)
+  card.style.setProperty('--edit-y', `${y}px`)
+}
+
+function setCardRotate(card: HTMLElement, rotateDeg: number) {
+  card.dataset.rotate = String(rotateDeg)
+  card.style.setProperty('--rotate-deg', `${rotateDeg}deg`)
 }
 
 export function initThoughtsCanvas(
@@ -68,15 +98,30 @@ export function initThoughtsCanvas(
   let hoverMx = 0
   let hoverMy = 0
   let hasHover = false
+  let editMode = false
+  let selectedCard: HTMLElement | null = null
+  let saveState: 'idle' | 'dirty' | 'saving' | 'saved' | 'error' = 'idle'
+  let isDestroyed = false
 
   let cardDrag: {
     card: HTMLElement
     pointerId: number
-    accX: number
-    accY: number
+    x: number
+    y: number
     lastX: number
     lastY: number
   } | null = null
+  let cardRotateDrag: {
+    card: HTMLElement
+    handle: HTMLElement
+    pointerId: number
+    startPointerAngle: number
+    startRotate: number
+  } | null = null
+
+  function canEditLayout() {
+    return Boolean(chrome?.enableEditing && window.matchMedia('(min-width: 768px)').matches)
+  }
 
   function flushTransform() {
     world.style.transform = `translate3d(${tx}px, ${ty}px, 0) scale(${scale})`
@@ -86,6 +131,10 @@ export function initThoughtsCanvas(
 
   function onResize() {
     cachedViewportRect = undefined
+    if (!canEditLayout() && editMode)
+      setEditMode(false)
+    else
+      syncChrome()
   }
 
   function viewportRect() {
@@ -139,6 +188,28 @@ export function initThoughtsCanvas(
       c.zoomInBtn.disabled = scale >= THOUGHTS_CANVAS_SCALE_MAX - 0.002
     if (c.resetBtn)
       c.resetBtn.disabled = isDefaultView()
+    if (c.editBtn) {
+      c.editBtn.disabled = !canEditLayout()
+      c.editBtn.setAttribute('aria-pressed', editMode ? 'true' : 'false')
+      c.editBtn.classList.toggle('bg-gray-900', editMode)
+      c.editBtn.classList.toggle('text-white', editMode)
+    }
+    const editActionLocked = !canEditLayout() || !editMode || !selectedCard
+    if (c.rotateLeftBtn)
+      c.rotateLeftBtn.disabled = editActionLocked
+    if (c.rotateRightBtn)
+      c.rotateRightBtn.disabled = editActionLocked
+    if (c.saveBtn)
+      c.saveBtn.disabled = !canEditLayout() || !editMode || saveState === 'saving' || saveState === 'idle' || saveState === 'saved'
+    if (c.editStatusEl) {
+      c.editStatusEl.textContent = {
+        idle: '',
+        dirty: 'Unsaved',
+        saving: 'Saving',
+        saved: 'Saved',
+        error: 'Save failed',
+      }[saveState]
+    }
   }
 
   function flushNow() {
@@ -238,25 +309,169 @@ export function initThoughtsCanvas(
     flushNow()
   }
 
+  function selectCard(card: HTMLElement | null) {
+    if (selectedCard === card)
+      return
+    selectedCard?.removeAttribute('data-selected')
+    selectedCard = card
+    selectedCard?.setAttribute('data-selected', 'true')
+    syncChrome()
+  }
+
+  function setEditMode(next: boolean) {
+    if (next && !canEditLayout())
+      return
+    editMode = next
+    viewport.closest<HTMLElement>('#thoughts-root')?.setAttribute('data-edit-mode', editMode ? 'true' : 'false')
+    if (editMode) {
+      selectCard(selectedCard ?? world.querySelector<HTMLElement>('.thought-canvas-card[data-slug]'))
+    }
+    else {
+      selectCard(null)
+    }
+    syncChrome()
+  }
+
+  function readLayoutPayload() {
+    const cards: Record<string, { x: number, y: number, rotateDeg: number }> = {}
+    for (const card of world.querySelectorAll<HTMLElement>('.thought-canvas-card[data-slug]')) {
+      const slug = card.dataset.slug
+      if (!slug)
+        continue
+      cards[slug] = {
+        x: readCardX(card),
+        y: readCardY(card),
+        rotateDeg: readCardRotate(card),
+      }
+    }
+    return { version: 1, cards }
+  }
+
+  async function saveLayout() {
+    if (!canEditLayout())
+      return
+    saveState = 'saving'
+    syncChrome()
+    try {
+      const res = await fetch('/__thoughts-canvas-layout', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(readLayoutPayload()),
+      })
+      if (isDestroyed)
+        return
+      if (!res.ok)
+        throw new Error(`Save failed: ${res.status}`)
+      const saved = await res.json()
+      if (isDestroyed)
+        return
+      if (saved?.layout?.cards) {
+        for (const card of world.querySelectorAll<HTMLElement>('.thought-canvas-card[data-slug]')) {
+          const slug = card.dataset.slug
+          const row = slug ? saved.layout.cards[slug] : undefined
+          if (!row)
+            continue
+          setCardPosition(card, row.x, row.y)
+          setCardRotate(card, row.rotateDeg)
+        }
+      }
+      saveState = 'saved'
+    }
+    catch {
+      if (isDestroyed)
+        return
+      saveState = 'error'
+    }
+    if (isDestroyed)
+      return
+    syncChrome()
+  }
+
+  function markDirty() {
+    if (!canEditLayout())
+      return
+    saveState = 'dirty'
+    syncChrome()
+  }
+
+  function rotateSelected(delta: number) {
+    if (!editMode || !selectedCard)
+      return
+    setCardRotate(selectedCard, roundedRotate(readCardRotate(selectedCard) + delta))
+    markDirty()
+  }
+
+  function clampRotate(rotateDeg: number): number {
+    return Math.max(-18, Math.min(18, rotateDeg))
+  }
+
+  function roundedRotate(rotateDeg: number): number {
+    return Math.round(clampRotate(rotateDeg) * 100) / 100
+  }
+
+  function cardPointerAngle(card: HTMLElement, e: PointerEvent): number {
+    const rect = card.getBoundingClientRect()
+    const cx = rect.left + rect.width / 2
+    const cy = rect.top + rect.height / 2
+    return Math.atan2(e.clientY - cy, e.clientX - cx) * 180 / Math.PI
+  }
+
+  function onEditClick() {
+    setEditMode(!editMode)
+  }
+
+  function onRotateLeftClick() {
+    rotateSelected(-1)
+  }
+
+  function onRotateRightClick() {
+    rotateSelected(1)
+  }
+
+  function onSaveClick() {
+    void saveLayout()
+  }
+
   function onWorldPointerDown(e: PointerEvent) {
+    if (!editMode)
+      return
     if (e.button !== 0)
       return
+    const rotateHandle = (e.target as HTMLElement).closest<HTMLElement>('.thought-canvas-rotate-handle')
+    if (rotateHandle) {
+      const card = rotateHandle.closest('.thought-canvas-card')
+      if (!card || !world.contains(card))
+        return
+      e.preventDefault()
+      e.stopPropagation()
+      const el = card as HTMLElement
+      selectCard(el)
+      cardRotateDrag = {
+        card: el,
+        handle: rotateHandle,
+        pointerId: e.pointerId,
+        startPointerAngle: cardPointerAngle(el, e),
+        startRotate: readCardRotate(el),
+      }
+      rotateHandle.setPointerCapture(e.pointerId)
+      rotateHandle.classList.add('cursor-grabbing')
+      document.body.classList.add('select-none')
+      rotateHandle.addEventListener('pointermove', onCardRotatePointerMove)
+      rotateHandle.addEventListener('pointerup', onCardRotatePointerEnd)
+      rotateHandle.addEventListener('pointercancel', onCardRotatePointerEnd)
+      return
+    }
     const card = (e.target as HTMLElement).closest('.thought-canvas-card')
     if (!card || !world.contains(card))
       return
-    const onInteractive = (e.target as HTMLElement).closest(
-      'a, button, input, textarea, select, img, [contenteditable="true"], [data-lightbox="true"]',
-    )
-    if (onInteractive)
-      return
     e.stopPropagation()
     const el = card as HTMLElement
-    const { x: accX, y: accY } = readCardDragOffsets(el)
+    selectCard(el)
     cardDrag = {
       card: el,
       pointerId: e.pointerId,
-      accX,
-      accY,
+      x: readCardX(el),
+      y: readCardY(el),
       lastX: e.clientX,
       lastY: e.clientY,
     }
@@ -273,11 +488,11 @@ export function initThoughtsCanvas(
       return
     const dx = (e.clientX - cardDrag.lastX) / scale
     const dy = (e.clientY - cardDrag.lastY) / scale
-    cardDrag.accX += dx
-    cardDrag.accY += dy
+    cardDrag.x += dx
+    cardDrag.y += dy
     cardDrag.lastX = e.clientX
     cardDrag.lastY = e.clientY
-    setCardDragOffsets(cardDrag.card, cardDrag.accX, cardDrag.accY)
+    setCardPosition(cardDrag.card, cardDrag.x, cardDrag.y)
   }
 
   function onCardPointerEnd(e: PointerEvent) {
@@ -293,6 +508,30 @@ export function initThoughtsCanvas(
     c.classList.remove('z-[50]', 'shadow-lg', 'cursor-grabbing')
     if (!dragging)
       document.body.classList.remove('select-none')
+    markDirty()
+  }
+
+  function onCardRotatePointerMove(e: PointerEvent) {
+    if (!cardRotateDrag || e.pointerId !== cardRotateDrag.pointerId)
+      return
+    const next = cardRotateDrag.startRotate + cardPointerAngle(cardRotateDrag.card, e) - cardRotateDrag.startPointerAngle
+    setCardRotate(cardRotateDrag.card, roundedRotate(next))
+  }
+
+  function onCardRotatePointerEnd(e: PointerEvent) {
+    if (!cardRotateDrag || e.pointerId !== cardRotateDrag.pointerId)
+      return
+    const handle = cardRotateDrag.handle
+    handle.removeEventListener('pointermove', onCardRotatePointerMove)
+    handle.removeEventListener('pointerup', onCardRotatePointerEnd)
+    handle.removeEventListener('pointercancel', onCardRotatePointerEnd)
+    if (handle.hasPointerCapture(e.pointerId))
+      handle.releasePointerCapture(e.pointerId)
+    handle.classList.remove('cursor-grabbing')
+    cardRotateDrag = null
+    if (!dragging && !cardDrag)
+      document.body.classList.remove('select-none')
+    markDirty()
   }
 
   function onDown(e: PointerEvent) {
@@ -300,6 +539,9 @@ export function initThoughtsCanvas(
       return
 
     const target = e.target as HTMLElement
+    if (editMode && target.closest('.thought-canvas-card'))
+      return
+
     const onInteractive = target.closest(
       'a, button, input, textarea, select, img, [contenteditable="true"], [data-lightbox="true"]',
     )
@@ -371,6 +613,10 @@ export function initThoughtsCanvas(
   chrome?.zoomOutBtn?.addEventListener('click', onZoomOutClick)
   chrome?.zoomInBtn?.addEventListener('click', onZoomInClick)
   chrome?.resetBtn?.addEventListener('click', onResetClick)
+  chrome?.editBtn?.addEventListener('click', onEditClick)
+  chrome?.rotateLeftBtn?.addEventListener('click', onRotateLeftClick)
+  chrome?.rotateRightBtn?.addEventListener('click', onRotateRightClick)
+  chrome?.saveBtn?.addEventListener('click', onSaveClick)
 
   recenterContentInViewport()
   {
@@ -383,6 +629,7 @@ export function initThoughtsCanvas(
 
   const cleanup: Cleanup = {
     destroy() {
+      isDestroyed = true
       if (rafId) {
         cancelAnimationFrame(rafId)
         rafId = 0
@@ -398,7 +645,19 @@ export function initThoughtsCanvas(
         c.classList.remove('z-[50]', 'shadow-lg', 'cursor-grabbing')
         cardDrag = null
       }
+      if (cardRotateDrag) {
+        const handle = cardRotateDrag.handle
+        const pid = cardRotateDrag.pointerId
+        handle.removeEventListener('pointermove', onCardRotatePointerMove)
+        handle.removeEventListener('pointerup', onCardRotatePointerEnd)
+        handle.removeEventListener('pointercancel', onCardRotatePointerEnd)
+        if (handle.hasPointerCapture(pid))
+          handle.releasePointerCapture(pid)
+        handle.classList.remove('cursor-grabbing')
+        cardRotateDrag = null
+      }
       dragging = false
+      setEditMode(false)
       viewport.classList.remove('cursor-grabbing')
       document.body.classList.remove('select-none')
       viewport.removeEventListener('wheel', onWheel)
@@ -411,6 +670,10 @@ export function initThoughtsCanvas(
       chrome?.zoomOutBtn?.removeEventListener('click', onZoomOutClick)
       chrome?.zoomInBtn?.removeEventListener('click', onZoomInClick)
       chrome?.resetBtn?.removeEventListener('click', onResetClick)
+      chrome?.editBtn?.removeEventListener('click', onEditClick)
+      chrome?.rotateLeftBtn?.removeEventListener('click', onRotateLeftClick)
+      chrome?.rotateRightBtn?.removeEventListener('click', onRotateRightClick)
+      chrome?.saveBtn?.removeEventListener('click', onSaveClick)
       viewport.style.touchAction = ''
       delete (viewport as HTMLElement & { [viewportKey]?: Cleanup })[viewportKey]
       world.style.transform = ''
diff --git a/src/data/thoughts-canvas-layout.json b/src/data/thoughts-canvas-layout.json
new file mode 100644
index 0000000..d5a48a1
--- /dev/null
+++ b/src/data/thoughts-canvas-layout.json
@@ -0,0 +1,20 @@
+{
+  "version": 1,
+  "cards": {
+    "20260417-publish-more-thoughts": {
+      "x": 571.86,
+      "y": -471.41,
+      "rotateDeg": 2.6
+    },
+    "20260511-agents-stuff": {
+      "x": 582.5,
+      "y": -9.81,
+      "rotateDeg": 2.65
+    },
+    "20260518-agentic-yolo": {
+      "x": 228.41,
+      "y": 285.16,
+      "rotateDeg": -2
+    }
+  }
+}
diff --git a/src/pages/thoughts.astro b/src/pages/thoughts.astro
index 5039acd..af0a7cf 100644
--- a/src/pages/thoughts.astro
+++ b/src/pages/thoughts.astro
@@ -1,8 +1,10 @@
 ---
 // src/pages/thoughts/index.astro
+import RotateCw from '@/components/icons/RotateCw.astro'
 import LightBox from '@/components/LightBox.astro'
 import Thought from '@/components/Thought.astro'
 import ThoughtsCanvasBottomToolbar from '@/components/thoughts/ThoughtsCanvasBottomToolbar.astro'
+import thoughtsCanvasLayout from '@/data/thoughts-canvas-layout.json'
 import Layout from '@/layouts/Layout.astro'
 import { getSortedThoughts } from '@/utils/thoughts'
 import {
@@ -21,7 +23,9 @@ const thoughtsMapped = thoughts.map(t => ({
   dateMs: t.data.date.getTime(),
 }))
 
-const deskRows = layoutStickyNotes(thoughtsMapped, { focusOrder: 'new-first' })
+const savedLayout = thoughtsCanvasLayout.cards
+
+const deskRows = layoutStickyNotes(thoughtsMapped, { focusOrder: 'new-first', overrides: savedLayout })
 const deskBySlug = new Map(deskRows.map(r => [r.slug, r]))
 const deskBounds = worldBounds(deskRows)
 
@@ -88,9 +92,9 @@ const boardCardShell = [
       backface-visibility: hidden;
     }
     .thought-canvas-card {
-      left: var(--x-mob);
-      top: var(--y-mob);
-      transform: translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0) rotate(var(--rotate-deg, 0deg));
+      left: var(--edit-x, var(--x-mob));
+      top: var(--edit-y, var(--y-mob));
+      transform: rotate(var(--rotate-deg, 0deg));
     }
     @media (min-width: 768px) {
       #thoughts-canvas-world {
@@ -98,17 +102,31 @@ const boardCardShell = [
         height: var(--world-h-desk);
       }
       .thought-canvas-card {
-        left: var(--x-desk);
-        top: var(--y-desk);
+        left: var(--edit-x, var(--x-desk));
+        top: var(--edit-y, var(--y-desk));
       }
     }
+    #thoughts-root[data-edit-mode='true'] .thought-canvas-card {
+      cursor: grab;
+    }
+    #thoughts-root[data-edit-mode='true'] .thought-canvas-card[data-selected='true'] {
+      z-index: 60;
+      outline: 2px solid rgba(17, 24, 39, 0.72);
+      outline-offset: 3px;
+    }
+    .thought-canvas-rotate-handle {
+      display: none;
+    }
+    #thoughts-root[data-edit-mode='true'] .thought-canvas-card[data-selected='true'] .thought-canvas-rotate-handle {
+      display: flex;
+    }
   </style>
 
   <div class="bg-[#f5f5f5] text-gray-900">
     <div id="thoughts-root" class="relative min-h-dvh">
       <section
         id="thoughts-canvas-view"
-        class="motion-reduce:hidden fixed inset-0 z-0 hidden bg-[#f5f5f5] md:motion-safe:block"
+        class="motion-reduce:hidden fixed inset-0 z-0 hidden bg-[#f5f5f5] motion-safe:block"
         aria-label="Thoughts canvas"
       >
         <div
@@ -133,21 +151,30 @@ const boardCardShell = [
                 return (
                   <article
                     id={`thought-canvas-${thought.id}`}
-                    class={`thought-stick-rot thought-canvas-card absolute z-[1] ${boardCardShell} origin-top-left`}
+                    class={`thought-stick-rot thought-canvas-card absolute z-[1] ${boardCardShell} origin-center`}
+                    data-slug={thought.id}
+                    data-x={deskRow.x}
+                    data-y={deskRow.y}
+                    data-rotate={deskRow.rotateDeg}
                     style={{
                       '--x-desk': `${deskRow.x}px`,
                       '--y-desk': `${deskRow.y}px`,
                       '--x-mob': `${mobRow.x}px`,
                       '--y-mob': `${mobRow.y}px`,
                       '--rotate-deg': `${deskRow.rotateDeg}deg`,
-                      '--drag-x': '0px',
-                      '--drag-y': '0px',
                       'width': `${THOUGHT_STICKY_NOTE_W}px`,
                       'maxHeight': `${THOUGHT_STICKY_NOTE_MAX_H}px`,
                       'overflowY': 'auto',
                     }}
                     tabindex={deskRow.tabIndex}
                   >
+                    <button
+                      type="button"
+                      class="thought-canvas-rotate-handle absolute right-2 top-2 z-[70] size-8 cursor-grab items-center justify-center rounded-sm border border-gray-300 bg-white text-gray-800 shadow-sm transition-colors hover:bg-gray-50"
+                      aria-label="Rotate card"
+                    >
+                      <RotateCw class="size-4" />
+                    </button>
                     <Thought thought={thought} />
                   </article>
                 )
@@ -217,7 +244,7 @@ const boardCardShell = [
         }
       </section>
 
-      <ThoughtsCanvasBottomToolbar />
+      <ThoughtsCanvasBottomToolbar isDev={import.meta.env.DEV} />
     </div>
   </div>
 
diff --git a/src/utils/thoughts-canvas-layout.test.ts b/src/utils/thoughts-canvas-layout.test.ts
index d0962e5..f1e9f2b 100644
--- a/src/utils/thoughts-canvas-layout.test.ts
+++ b/src/utils/thoughts-canvas-layout.test.ts
@@ -38,4 +38,29 @@ describe('layoutStickyNotes', () => {
     expect(newest?.x).toBeDefined()
     expect(Math.abs((newest?.x ?? 0) - centerX)).toBeLessThanOrEqual(80)
   })
+
+  it('uses saved position and rotation overrides by slug', () => {
+    const [row] = layoutStickyNotes(
+      [
+        {
+          id: 'saved',
+          slug: 'saved-card',
+          dateMs: Date.parse('2026-01-01T00:00:00Z'),
+        },
+      ],
+      {
+        overrides: {
+          'saved-card': {
+            x: 123,
+            y: 456,
+            rotateDeg: -3.5,
+          },
+        },
+      },
+    )
+
+    expect(row?.x).toBe(123)
+    expect(row?.y).toBe(456)
+    expect(row?.rotateDeg).toBe(-3.5)
+  })
 })
diff --git a/src/utils/thoughts-canvas-layout.ts b/src/utils/thoughts-canvas-layout.ts
index 30a6057..4c6ecc0 100644
--- a/src/utils/thoughts-canvas-layout.ts
+++ b/src/utils/thoughts-canvas-layout.ts
@@ -16,11 +16,23 @@ export interface ThoughtLayoutRow {
   tabIndex: number
 }
 
+export interface ThoughtLayoutOverride {
+  x?: number
+  y?: number
+  rotateDeg?: number
+}
+
+export interface ThoughtLayoutOverridesFile {
+  version: 1
+  cards: Record<string, ThoughtLayoutOverride | undefined>
+}
+
 export interface LayoutOptions {
   /** Tab order: new to old (design 3.1) */
   focusOrder?: 'new-first' | 'old-first'
   /** Optional container width for responsive layout */
   containerWidth?: number
+  overrides?: Record<string, ThoughtLayoutOverride | undefined>
 }
 
 /** Matches top bar / list `px-4` (1rem, 16px when root font size is 16px) */
@@ -37,6 +49,10 @@ const RECENT_CENTER_SPREAD = 160
 /** ±7° from slug — enough personality without looking too tilted. */
 const ROTATE_RANGE_DEG = 14
 
+function finiteOr(value: unknown, fallback: number): number {
+  return typeof value === 'number' && Number.isFinite(value) ? value : fallback
+}
+
 /**
  * Same width as `max-w-6xl` + `px-4` content area: 72rem - 2x1rem (1120px when root is 16px).
  * Card horizontal random range is limited within this width.
@@ -98,13 +114,14 @@ export function layoutStickyNotes(
       const jitter = (v - 0.5) * Math.min(56, slotSpan * 0.08)
       const yPx = PAD_Y + bandIndex * BAND_H + verticalBase + jitter
       const rot = (unitFloat(t.slug, 'rot') - 0.5) * ROTATE_RANGE_DEG
+      const override = options.overrides?.[t.slug]
       rows.push({
         slug: t.slug,
         bandIndex,
         bandKey,
-        x,
-        y: yPx,
-        rotateDeg: rot,
+        x: finiteOr(override?.x, x),
+        y: finiteOr(override?.y, yPx),
+        rotateDeg: finiteOr(override?.rotateDeg, rot),
         tabIndex: 0,
       })
     }
diff --git a/tsconfig.json b/tsconfig.json
index 8d2034f..fde90a4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,6 +6,7 @@
       "@/*": ["src/*"],
       "@scripts/*": ["scripts/*"]
     },
+    "resolveJsonModule": true,
     "strictNullChecks": true
   }
 }