diff --git a/CLAUDE.md b/CLAUDE.md
index 7515baa..952498d 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -6,35 +6,35 @@ Svelte 5 + TypeScript + Vite. Public repository.
 
 ## Where things are
 
-| Need                                           | Look in                                           |
-| ---------------------------------------------- | ------------------------------------------------- |
-| Why something is built the way it is           | `docs/decisions/README.md` (index, then one file) |
-| What to work on                                | the issue the maintainer names, only that issue   |
-| Continue an unfinished PR                      | `docs/handoff/<file>.md` on the PR branch         |
-| Tabs and hash routing                          | `src/lib/tabs.ts`, `src/App.svelte`               |
-| Play/real clocks, `onPlayTime` for trackers    | `src/lib/clock.ts`, `clock.svelte.ts` (dec. 008)  |
-| Game logic (pure TS, unit-tested)              | `src/lib/`                                        |
-| Saved user state, migrations, export/import    | `src/lib/state.ts`, `src/lib/store.svelte.ts`     |
-| UI components (thin)                           | `src/components/`                                 |
-| Base UI kit (panel, meter, button...), preview | `src/components/ui/`, `#/kit` in dev (dec. 009)   |
-| Resync values, editable bars (dec. 010, 018)   | `ui/EditableValue`, `EditableBar`, `BusinessBars` |
-| Game data with sources                         | `src/data/` (decision 004)                        |
-| Owned properties and upgrades                  | `data/properties.ts`, `lib/properties.ts` (011)   |
-| Business production (stock, supplies, value)   | `data/production.ts`, `lib/production.ts` (012)   |
-| Nightclub warehouse goods                      | `data/nightclub.ts`, `lib/nightclub.ts` (015)     |
-| Business card order (drag, keys)               | `lib/order.ts`, `ui/Panel` `move` (decision 014)  |
-| Safes and nightclub popularity                 | `data/safes.ts`, `lib/safes.ts` (decision 016)    |
-| Acid Lab, production boost                     | `data/production.ts`, `lib/production.ts` (017)   |
-| Money Fronts safe and heat                     | `data/fronts.ts`, `lib/fronts.ts` (018)           |
-| Value bonus for owning a front                 | `ownedBonus` in `data/production.ts` (019)        |
-| Shut-down businesses (owned, not running)      | `isRunning` in `lib/properties.ts` (020)          |
-| Bunker staff on manufacturing/both/research    | `staffSplit` in `data/production.ts` (025)        |
-| Real-time timers: Lucky Wheel, Mansion boost   | `data/timers.ts`, `lib/timers.ts` (022)           |
-| Overview tab, next events, notifications       | `lib/events.ts`, `lib/overview.ts` (dec. 023)     |
-| Theme tokens                                   | `src/app.css` (decision 009)                      |
-| Link previews (Open Graph), preview image      | `index.html`, `scripts/og-image.html`             |
-| CI, templates                                  | `.github/`                                        |
-| Skills: `handoff`, `finish-pr`; agent: `scout` | `.claude/`                                        |
+| Need                                           | Look in                                            |
+| ---------------------------------------------- | -------------------------------------------------- |
+| Why something is built the way it is           | `docs/decisions/README.md` (index, then one file)  |
+| What to work on                                | the issue the maintainer names, only that issue    |
+| Continue an unfinished PR                      | `docs/handoff/<file>.md` on the PR branch          |
+| Tabs and hash routing                          | `src/lib/tabs.ts`, `src/App.svelte`                |
+| Play/real clocks, `onPlayTime` for trackers    | `src/lib/clock.ts`, `clock.svelte.ts` (dec. 008)   |
+| Game logic (pure TS, unit-tested)              | `src/lib/`                                         |
+| Saved user state, migrations, export/import    | `src/lib/state.ts`, `src/lib/store.svelte.ts`      |
+| UI components (thin)                           | `src/components/`                                  |
+| Base UI kit (panel, meter, button...), preview | `src/components/ui/`, `#/kit` in dev (dec. 009)    |
+| Resync values, editable bars (dec. 010, 018)   | `ui/EditableValue`, `EditableBar`, `BusinessBars`  |
+| Game data with sources                         | `src/data/` (decision 004)                         |
+| Owned properties and upgrades                  | `data/properties.ts`, `lib/properties.ts` (011)    |
+| Business production (stock, supplies, value)   | `data/production.ts`, `lib/production.ts` (012)    |
+| Nightclub warehouse goods                      | `data/nightclub.ts`, `lib/nightclub.ts` (015)      |
+| Card order (drag, keys) on every card tab      | `lib/order.ts`, `ui/CardGrid` (decisions 014, 026) |
+| Safes and nightclub popularity                 | `data/safes.ts`, `lib/safes.ts` (decision 016)     |
+| Acid Lab, production boost                     | `data/production.ts`, `lib/production.ts` (017)    |
+| Money Fronts safe and heat                     | `data/fronts.ts`, `lib/fronts.ts` (018)            |
+| Value bonus for owning a front                 | `ownedBonus` in `data/production.ts` (019)         |
+| Shut-down businesses (owned, not running)      | `isRunning` in `lib/properties.ts` (020)           |
+| Bunker staff on manufacturing/both/research    | `staffSplit` in `data/production.ts` (025)         |
+| Real-time timers: Lucky Wheel, Mansion boost   | `data/timers.ts`, `lib/timers.ts` (022)            |
+| Overview tab, next events, notifications       | `lib/events.ts`, `lib/overview.ts` (dec. 023)      |
+| Theme tokens                                   | `src/app.css` (decision 009)                       |
+| Link previews (Open Graph), preview image      | `index.html`, `scripts/og-image.html`              |
+| CI, templates                                  | `.github/`                                         |
+| Skills: `handoff`, `finish-pr`; agent: `scout` | `.claude/`                                         |
 
 ## Commands
 
diff --git a/docs/decisions/014-card-order.md b/docs/decisions/014-card-order.md
index f23d878..c3ec610 100644
--- a/docs/decisions/014-card-order.md
+++ b/docs/decisions/014-card-order.md
@@ -1,6 +1,7 @@
 # 014: Business cards in the user's order
 
-2026-10-14, issue #30. Builds on decisions 006 and 009.
+2026-10-14, issue #30. Builds on decisions 006 and 009. Extended to other tabs, with easier
+grabbing and swapping, by decision 026.
 
 ## Decision
 
diff --git a/docs/decisions/026-movable-cards-everywhere.md b/docs/decisions/026-movable-cards-everywhere.md
new file mode 100644
index 0000000..751a646
--- /dev/null
+++ b/docs/decisions/026-movable-cards-everywhere.md
@@ -0,0 +1,27 @@
+# 026: Movable cards on every card tab, easier to swap
+
+2026-10-15, issue #51. Builds on decision 014.
+
+## Decision
+
+- **Shared grid.** The drag and keyboard moving of decision 014 lives in `ui/CardGrid`, which
+  renders each card through a snippet and hands it the title bar handlers (`Panel`'s `move`).
+  Businesses, Safes (Money Fronts and the property safes) and Timers use it. Settings stays
+  fixed (its panels are not cards to compare), and the Overview is lists, not cards.
+- **Title bar only.** A card is picked up by its title bar, with mouse, pen and touch alike;
+  the rest of the card keeps its text selectable and its controls undisturbed (issue #51
+  review: grabbing anywhere got in the way of both). It lifts only after 4 px of travel, so a
+  click on the title bar stays a click.
+- **Swap by where the card is.** A swap is decided by the middle of the dragged card, not the
+  pointer: held by its title bar, a card hangs far below the pointer, so the pointer often sat
+  on a border while the card already covered its target. The middle must be 10% in from each
+  side of the other card (was 20%), which still leaves a band where neither swap applies, so
+  the cards do not flick back and forth.
+- **Saved state** (version 13): `safeOrder` and `timerOrder`, lists of card ids like
+  `businessOrder`. Safe cards use property ids (the car wash for Money Fronts), timer cards
+  `lucky-wheel` and `mansion`, the same ids the Overview links scroll to.
+
+## Why
+
+Issue #51: only business cards moved, and they were hard to swap.
+One grid component keeps the three tabs behaving alike; it came from three real cases.
diff --git a/docs/decisions/README.md b/docs/decisions/README.md
index 1790e7e..1735618 100644
--- a/docs/decisions/README.md
+++ b/docs/decisions/README.md
@@ -36,3 +36,4 @@ free number, add one line below. **Replacing one:** write a new decision, then m
 - [023](023-overview.md) Overview tab: trackers give a shared `NextEvent`, due first then soonest, supplies on their way counted in the forecast, links that scroll to the card, quick actions with undo on every ready item, popularity in view; alerts as pop-ups and/or notifications, set time ahead
 - [024](024-several-tabs.md) Several tabs: a tab takes the state another tab saves (`storage` event); only the tab that last started counting counts play time (`BroadcastChannel`)
 - [025](025-bunker-staff.md) Bunker staff on Manufacturing, Both or Research: a stock share (Both 0.5, Research 0) on the sourced rates, supplies used as fast on every option (est.), research progress not tracked
+- [026](026-movable-cards-everywhere.md) Movable cards on Businesses, Safes and Timers (`ui/CardGrid`): picked up by the title bar; swap by the dragged card's middle, 10% in; orders saved per tab
diff --git a/src/App.svelte b/src/App.svelte
index edad11d..a26b409 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -112,6 +112,8 @@
           onchange={setProperties}
           stored={store.state.safes}
           onresync={(id, safe) => (store.state.safes = { ...store.state.safes, [id]: safe })}
+          order={store.state.safeOrder}
+          onorder={(order) => (store.state.safeOrder = order)}
         />
       {:else if active === 'timers'}
         <Timers
@@ -120,6 +122,8 @@
           timers={store.state.timers}
           now={clocks.now}
           onchange={(timers) => (store.state.timers = timers)}
+          order={store.state.timerOrder}
+          onorder={(order) => (store.state.timerOrder = order)}
         />
       {:else if active === 'settings'}
         <Settings />
diff --git a/src/components/Businesses.svelte b/src/components/Businesses.svelte
index 2e6edc1..d405208 100644
--- a/src/components/Businesses.svelte
+++ b/src/components/Businesses.svelte
@@ -1,16 +1,11 @@
 <script lang="ts">
   // The owned businesses, each with a gear to change what is owned and upgraded (decision 011),
   // and its stock and supplies if LSOS has production data for it (issue #6). Cards move by
-  // dragging their title bar or with its arrow keys (issue #30). The nightclub shows its
+  // dragging or with the arrow keys on their title bar (issue #30, decision 026). The nightclub shows its
   // warehouse goods (issue #7).
-  import { tick } from 'svelte'
-  import type { HTMLAttributes } from 'svelte/elements'
-  import { flip } from 'svelte/animate'
-  import { cubicOut } from 'svelte/easing'
   import { NIGHTCLUB_ID, type Goods } from '../data/nightclub'
   import type { Production } from '../data/production'
   import type { Property } from '../data/properties'
-  import { applyOrder, cardAt, moveId, saveOrder, swapAt, type CardBox } from '../lib/order'
   import {
     emptyBars,
     matchingRate,
@@ -35,6 +30,7 @@
   import NightclubWarehouse from './NightclubWarehouse.svelte'
   import PropertySettings from './PropertySettings.svelte'
   import Button from './ui/Button.svelte'
+  import CardGrid from './ui/CardGrid.svelte'
   import Panel from './ui/Panel.svelte'
   import SettingsButton from './ui/SettingsButton.svelte'
 
@@ -82,132 +78,6 @@
   const ownedList = $derived(
     ownedProperties(catalog, owned).filter((property) => property.card !== false),
   )
-  const sorted = $derived(
-    applyOrder(
-      ownedList.map((property) => property.id),
-      order,
-    ),
-  )
-  // While a card is dragged: the order as it would drop now, the dragged card swapped with the
-  // one under the pointer (only those two move). Saved on release.
-  let preview = $state<string[] | null>(null)
-  let moving = $state<string | null>(null)
-  // The dragged card follows the pointer: where on the card it was grabbed, and how far it is
-  // from its slot in the grid. Its slot stays outlined.
-  let grab = { x: 0, y: 0 }
-  let lift = $state({ x: 0, y: 0 })
-  // After release the card glides into its slot before it counts as put down.
-  let settling = $state<string | null>(null)
-  let announcement = $state('')
-  const shown = $derived(
-    (preview ?? sorted).flatMap((id) => ownedList.filter((property) => property.id === id)),
-  )
-
-  function save(ids: string[]) {
-    if (ids.join() !== sorted.join()) onorder(saveOrder(ids, order))
-  }
-
-  const slotOf = (id: string) => document.querySelector<HTMLElement>(`[data-card="${id}"]`)
-
-  /** Puts the lifted card under the pointer, measured from its slot. */
-  function follow(id: string, x: number, y: number) {
-    const slot = slotOf(id)?.getBoundingClientRect()
-    if (slot) lift = { x: x - grab.x - slot.left, y: y - grab.y - slot.top }
-  }
-
-  function stopMoving() {
-    moving = null
-    preview = null
-    lift = { x: 0, y: 0 }
-  }
-
-  // A swap needs the pointer this far inside the other card (share of its size per side).
-  const SWAP_INSET = 0.2
-
-  /** The card slots where they end up, in viewport pixels: offsets skip the slide transforms. */
-  function slots(): CardBox[] {
-    const cards = [...document.querySelectorAll<HTMLElement>('[data-card]')]
-    const parent = cards[0]?.offsetParent
-    if (!parent) return []
-    const origin = parent.getBoundingClientRect()
-    return cards.map((card) => ({
-      id: card.dataset.card!,
-      left: origin.left + parent.clientLeft + card.offsetLeft,
-      top: origin.top + parent.clientTop + card.offsetTop,
-      width: card.offsetWidth,
-      height: card.offsetHeight,
-    }))
-  }
-
-  // The rest of a drag is followed on the window, where the pointer goes when it leaves the
-  // handle.
-  async function drag(event: PointerEvent) {
-    if (moving === null || !preview) return
-    const { clientX: x, clientY: y } = event
-    const target = cardAt(slots(), x, y, SWAP_INSET)
-    if (target !== null && target !== moving) {
-      preview = swapAt(sorted, moving, preview.indexOf(target))
-      await tick()
-    }
-    if (moving !== null) follow(moving, x, y)
-  }
-
-  function drop() {
-    if (moving === null || !preview) return
-    const id = moving
-    save(preview)
-    stopMoving()
-    // Glide from where it was let go into its slot (a style transition, not game time).
-    settling = id
-    setTimeout(() => {
-      if (settling === id) settling = null
-    }, SETTLE_MS)
-  }
-
-  const SETTLE_MS = 200
-
-  /** Slides cards to their new places; the lifted card follows the pointer instead. */
-  function slide(node: HTMLElement, rects: { from: DOMRect; to: DOMRect }) {
-    if (node.dataset.card === moving) return { duration: 0 }
-    return flip(node, rects, { duration: 250, easing: cubicOut })
-  }
-
-  /** Handlers for the title bar of one card. */
-  function handle(id: string): HTMLAttributes<HTMLDivElement> {
-    return {
-      onpointerdown: (event) => {
-        if (event.button !== 0) return
-        event.preventDefault()
-        const slot = slotOf(id)?.getBoundingClientRect()
-        if (!slot) return
-        grab = { x: event.clientX - slot.left, y: event.clientY - slot.top }
-        moving = id
-        preview = [...sorted]
-        lift = { x: 0, y: 0 }
-      },
-      onkeydown: async (event) => {
-        const from = sorted.indexOf(id)
-        const to =
-          event.key === 'ArrowLeft' || event.key === 'ArrowUp'
-            ? from - 1
-            : event.key === 'ArrowRight' || event.key === 'ArrowDown'
-              ? from + 1
-              : event.key === 'Home'
-                ? 0
-                : event.key === 'End'
-                  ? sorted.length - 1
-                  : null
-        if (to === null) return
-        event.preventDefault()
-        const next = moveId(sorted, id, to)
-        save(next)
-        announcement = `${ownedList.find((p) => p.id === id)?.label} moved to place ${next.indexOf(id) + 1} of ${next.length}.`
-        // Moving the card in the page can take the focus away from its handle.
-        await tick()
-        document.querySelector<HTMLElement>(`[data-card="${id}"] [data-move-handle]`)?.focus()
-      },
-    }
-  }
   let open = $state<string | null>(null)
   // Cards start collapsed: bars, value and next countdown only (issue #6).
   let editing = $state<string | null>(null)
@@ -226,9 +96,7 @@
   }
 </script>
 
-<svelte:window onpointermove={drag} onpointerup={drop} onpointercancel={stopMoving} />
-
-{#if shown.length === 0}
+{#if ownedList.length === 0}
   <p class="empty">
     {#if catalog.length === 0}
       No businesses are tracked yet.
@@ -238,133 +106,86 @@
     {/if}
   </p>
 {:else}
-  <div class="grid">
-    {#each shown as property (property.id)}
+  <CardGrid
+    items={ownedList}
+    id={(property) => property.id}
+    label={(property) => property.label}
+    {order}
+    {onorder}
+  >
+    {#snippet card(property, move, moving)}
       {@const production = productions.find((p) => p.propertyId === property.id)}
       {@const warehouse = property.id === NIGHTCLUB_ID && goods.length > 0}
-      <div class="card" class:slot={moving === property.id} data-card={property.id} animate:slide>
-        <div
-          class="lift"
-          class:lifted={moving === property.id}
-          class:settling={settling === property.id}
-          class:shut={isShutDown(owned, property.id)}
-          style:translate={moving === property.id ? `${lift.x}px ${lift.y}px` : undefined}
-        >
-          <Panel
-            title={property.label}
-            move={handle(property.id)}
-            moving={moving === property.id}
-            focus={property.id}
-          >
-            {#if open === property.id}
-              <PropertySettings {property} {owned} {onchange} />
-            {:else}
-              <p class="hint">{summary(property)}</p>
-            {/if}
-            {#if production}
-              <BusinessProduction
-                {production}
-                rate={matchingRate(production, owned, property)}
-                running={rateFor(production, owned, property)}
-                shutDown={isShutDown(owned, property.id)}
-                bars={businesses[property.id] ?? emptyBars()}
-                {now}
-                editing={editing === property.id}
-                onresync={(bars) => onresync(property.id, bars)}
-                bonus={valueBonus(production, owned, property)}
-                farEstimated={farValueEstimated(production, owned)}
-                boost={boosts[property.id]}
-                onboost={(boost) => onboost(property.id, boost)}
-                {mansionBoost}
-              />
+      <div class="shell" class:shut={isShutDown(owned, property.id)}>
+        <Panel title={property.label} {move} {moving} focus={property.id}>
+          {#if open === property.id}
+            <PropertySettings {property} {owned} {onchange} />
+          {:else}
+            <p class="hint">{summary(property)}</p>
+          {/if}
+          {#if production}
+            <BusinessProduction
+              {production}
+              rate={matchingRate(production, owned, property)}
+              running={rateFor(production, owned, property)}
+              shutDown={isShutDown(owned, property.id)}
+              bars={businesses[property.id] ?? emptyBars()}
+              {now}
+              editing={editing === property.id}
+              onresync={(bars) => onresync(property.id, bars)}
+              bonus={valueBonus(production, owned, property)}
+              farEstimated={farValueEstimated(production, owned)}
+              boost={boosts[property.id]}
+              onboost={(boost) => onboost(property.id, boost)}
+              {mansionBoost}
+            />
+          {/if}
+          {#if warehouse}
+            <NightclubWarehouse
+              {goods}
+              nightclub={property}
+              {owned}
+              {onchange}
+              stock={nightclubStock}
+              editing={editing === property.id}
+              onresync={onnightclub}
+            />
+          {/if}
+          {#snippet footer()}
+            {#if production || warehouse}
+              <Button
+                aria-expanded={editing === property.id}
+                onclick={() => (editing = editing === property.id ? null : property.id)}
+                >{editing === property.id ? 'Done' : 'Edit'}</Button
+              >
             {/if}
-            {#if warehouse}
-              <NightclubWarehouse
-                {goods}
-                nightclub={property}
-                {owned}
-                {onchange}
-                stock={nightclubStock}
-                editing={editing === property.id}
-                onresync={onnightclub}
-              />
-            {/if}
-            {#snippet footer()}
-              {#if production || warehouse}
-                <Button
-                  aria-expanded={editing === property.id}
-                  onclick={() => (editing = editing === property.id ? null : property.id)}
-                  >{editing === property.id ? 'Done' : 'Edit'}</Button
-                >
-              {/if}
-              <SettingsButton
-                label={property.label}
-                open={open === property.id}
-                onclick={() => (open = open === property.id ? null : property.id)}
-              />
-            {/snippet}
-          </Panel>
-        </div>
+            <SettingsButton
+              label={property.label}
+              open={open === property.id}
+              onclick={() => (open = open === property.id ? null : property.id)}
+            />
+          {/snippet}
+        </Panel>
       </div>
-    {/each}
-  </div>
-  <p class="announcement" aria-live="polite">{announcement}</p>
+    {/snippet}
+  </CardGrid>
 {/if}
 
 <style>
-  .grid {
-    display: grid;
-    gap: var(--space-5);
-    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
-  }
-
   /* Lets the panel fill its grid cell. */
-  .card,
-  .lift {
+  .shell {
     display: grid;
   }
 
-  /* Where the lifted card goes back to. */
-  .slot {
-    border-radius: var(--radius);
-    outline: 1px dashed var(--track-edge);
-    outline-offset: -1px;
-  }
-
   /* A shut-down business is dimmed like a disabled control: same colours, darker (issue #38). */
-  .lift.shut {
+  .shell.shut {
     filter: brightness(0.65);
   }
 
-  .lift.lifted {
-    box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.5);
-    pointer-events: none;
-    position: relative;
-    scale: 1.02;
-    z-index: 1;
-  }
-
-  .lift.settling {
-    position: relative;
-    transition:
-      translate 0.2s ease-out,
-      scale 0.2s ease-out;
-    z-index: 1;
-  }
-
   p {
     margin: 0;
   }
 
-  .announcement {
-    clip-path: inset(50%);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-
   .empty {
     color: var(--muted);
   }
diff --git a/src/components/Safes.svelte b/src/components/Safes.svelte
index 7459613..1b55f6a 100644
--- a/src/components/Safes.svelte
+++ b/src/components/Safes.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   // The safes of owned properties (issue #8) and the Money Fronts safe (issue #11), each with a
-  // gear to change what is owned and upgraded (decision 011). Logic: lib/safes.ts, lib/fronts.ts.
+  // gear to change what is owned and upgraded (decision 011). Cards move like the business cards
+  // (decision 026). Logic: lib/safes.ts, lib/fronts.ts.
   import { CAR_WASH, FRONTS } from '../data/fronts'
   import type { Property } from '../data/properties'
   import type { Safe } from '../data/safes'
@@ -12,6 +13,7 @@
   import MoneyFrontsCard from './MoneyFrontsCard.svelte'
   import SafeCard from './SafeCard.svelte'
   import Button from './ui/Button.svelte'
+  import CardGrid from './ui/CardGrid.svelte'
   import Panel from './ui/Panel.svelte'
   import SettingsButton from './ui/SettingsButton.svelte'
 
@@ -23,9 +25,21 @@
     /** Saved safes by property id. */
     stored: SafesById
     onresync: (propertyId: string, state: SafeState) => void
+    /** Saved card order: property ids, the car wash for Money Fronts (issue #51). */
+    order?: readonly string[]
+    onorder?: (order: string[]) => void
   }
 
-  let { safes, catalog, owned, onchange, stored, onresync }: Props = $props()
+  let {
+    safes,
+    catalog,
+    owned,
+    onchange,
+    stored,
+    onresync,
+    order = [],
+    onorder = () => {},
+  }: Props = $props()
 
   const shown = $derived(
     safes.flatMap((safe) => {
@@ -37,6 +51,11 @@
   const frontProperties = $derived(
     FRONTS.flatMap((front) => catalog.filter((p) => p.id === front.propertyId)),
   )
+  // Money Fronts first until moved, then the property safes.
+  const cards = $derived([
+    ...(fronts ? [{ id: CAR_WASH, label: 'Money Fronts' }] : []),
+    ...shown.map(({ property }) => ({ id: property.id, label: property.label })),
+  ])
   let open = $state<string | null>(null)
   let editing = $state<string | null>(null)
 </script>
@@ -48,73 +67,70 @@
       .join(', ')}. Mark what you own in <a href={hashForTab('settings')}>Settings</a>.
   </p>
 {:else}
-  <div class="grid">
-    {#if fronts}
-      <Panel title="Money Fronts" focus={CAR_WASH}>
-        {#if open === CAR_WASH}
-          {#each frontProperties as property (property.id)}
-            <PropertySettings {property} {owned} {onchange} />
-          {/each}
-        {/if}
-        <MoneyFrontsCard
-          {catalog}
-          {owned}
-          {onchange}
-          safeState={stored[CAR_WASH] ?? emptyFronts()}
-          editing={editing === CAR_WASH}
-          onresync={(state) => onresync(CAR_WASH, state)}
-        />
-        {#snippet footer()}
-          <Button
-            aria-expanded={editing === CAR_WASH}
-            onclick={() => (editing = editing === CAR_WASH ? null : CAR_WASH)}
-            >{editing === CAR_WASH ? 'Done' : 'Edit'}</Button
-          >
-          <SettingsButton
-            label="Money Fronts"
-            open={open === CAR_WASH}
-            onclick={() => (open = open === CAR_WASH ? null : CAR_WASH)}
+  <CardGrid items={cards} id={(card) => card.id} label={(card) => card.label} {order} {onorder}>
+    {#snippet card({ id }, move, moving)}
+      {@const entry = shown.find(({ property }) => property.id === id)}
+      {#if id === CAR_WASH}
+        <Panel title="Money Fronts" focus={CAR_WASH} {move} {moving}>
+          {#if open === CAR_WASH}
+            {#each frontProperties as property (property.id)}
+              <PropertySettings {property} {owned} {onchange} />
+            {/each}
+          {/if}
+          <MoneyFrontsCard
+            {catalog}
+            {owned}
+            {onchange}
+            safeState={stored[CAR_WASH] ?? emptyFronts()}
+            editing={editing === CAR_WASH}
+            onresync={(state) => onresync(CAR_WASH, state)}
           />
-        {/snippet}
-      </Panel>
-    {/if}
-    {#each shown as { safe, property } (property.id)}
-      <Panel title={property.label} focus={property.id}>
-        {#if open === property.id}
-          <PropertySettings {property} {owned} {onchange} />
-        {/if}
-        <SafeCard
-          {safe}
-          {property}
-          {owned}
-          safeState={stored[property.id] ?? emptySafe(safe)}
-          editing={editing === property.id}
-          onresync={(state) => onresync(property.id, state)}
-        />
-        {#snippet footer()}
-          <Button
-            aria-expanded={editing === property.id}
-            onclick={() => (editing = editing === property.id ? null : property.id)}
-            >{editing === property.id ? 'Done' : 'Edit'}</Button
-          >
-          <SettingsButton
-            label={property.label}
-            open={open === property.id}
-            onclick={() => (open = open === property.id ? null : property.id)}
+          {#snippet footer()}
+            <Button
+              aria-expanded={editing === CAR_WASH}
+              onclick={() => (editing = editing === CAR_WASH ? null : CAR_WASH)}
+              >{editing === CAR_WASH ? 'Done' : 'Edit'}</Button
+            >
+            <SettingsButton
+              label="Money Fronts"
+              open={open === CAR_WASH}
+              onclick={() => (open = open === CAR_WASH ? null : CAR_WASH)}
+            />
+          {/snippet}
+        </Panel>
+      {:else if entry}
+        {@const { safe, property } = entry}
+        <Panel title={property.label} focus={property.id} {move} {moving}>
+          {#if open === property.id}
+            <PropertySettings {property} {owned} {onchange} />
+          {/if}
+          <SafeCard
+            {safe}
+            {property}
+            {owned}
+            safeState={stored[property.id] ?? emptySafe(safe)}
+            editing={editing === property.id}
+            onresync={(state) => onresync(property.id, state)}
           />
-        {/snippet}
-      </Panel>
-    {/each}
-  </div>
+          {#snippet footer()}
+            <Button
+              aria-expanded={editing === property.id}
+              onclick={() => (editing = editing === property.id ? null : property.id)}
+              >{editing === property.id ? 'Done' : 'Edit'}</Button
+            >
+            <SettingsButton
+              label={property.label}
+              open={open === property.id}
+              onclick={() => (open = open === property.id ? null : property.id)}
+            />
+          {/snippet}
+        </Panel>
+      {/if}
+    {/snippet}
+  </CardGrid>
 {/if}
 
 <style>
-  .grid {
-    display: grid;
-    gap: var(--space-5);
-    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
-  }
-
   .empty {
     color: var(--muted);
     margin: 0;
diff --git a/src/components/Timers.svelte b/src/components/Timers.svelte
index 83ee06d..25eb025 100644
--- a/src/components/Timers.svelte
+++ b/src/components/Timers.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   // Real-time timers (issues #13, #14): the Lucky Wheel cooldown and the Mansion production
   // boost. They run on the wall clock, also while LSOS is closed (decision 003); each countdown
-  // can be corrected by hand (decision 010). Logic: lib/timers.ts.
+  // can be corrected by hand (decision 010). Cards move like the business cards (decision 026).
+  // Logic: lib/timers.ts.
   import type { Property } from '../data/properties'
   import { LUCKY_WHEEL, MANSION_BOOST } from '../data/timers'
   import { isOwned, type OwnedProperties } from '../lib/properties'
@@ -15,6 +16,7 @@
     type Timers,
   } from '../lib/timers'
   import Button from './ui/Button.svelte'
+  import CardGrid from './ui/CardGrid.svelte'
   import Countdown from './ui/Countdown.svelte'
   import EditableValue from './ui/EditableValue.svelte'
   import Fact from './ui/Fact.svelte'
@@ -28,9 +30,17 @@
     /** Wall-clock time. */
     now: number
     onchange: (timers: Timers) => void
+    /** Saved card order: card ids (issue #51). */
+    order?: readonly string[]
+    onorder?: (order: string[]) => void
   }
 
-  let { catalog, owned, timers, now, onchange }: Props = $props()
+  let { catalog, owned, timers, now, onchange, order = [], onorder = () => {} }: Props = $props()
+
+  const CARDS = [
+    { id: 'lucky-wheel', label: 'Lucky Wheel' },
+    { id: 'mansion', label: 'Mansion boost' },
+  ]
 
   // What each timer's last button press replaced, so a press by mistake can be taken back.
   let undoSpin = $state<{ before: number | undefined } | null>(null)
@@ -80,92 +90,102 @@
   >
 {/snippet}
 
-<div class="grid">
-  <Panel title="Lucky Wheel" focus="lucky-wheel" footer={undoSpin ? wheelUndo : undefined}>
-    {#if now < spinAt}
-      <EditableValue
-        label="Next spin in"
-        value={spinAt - now}
-        unit="duration"
-        min={0}
-        max={LUCKY_WHEEL.cooldownMs}
-        onresync={(ms) =>
-          onchange({
-            ...timers,
-            luckyWheelSpunAt: startForRemaining(ms, LUCKY_WHEEL.cooldownMs, now),
-          })}
-      />
-    {:else}
-      <Fact label="Spin ready">
-        <Button onclick={spin}>Spun</Button>
-      </Fact>
-    {/if}
-    <p class="hint">One spin per 24 real hours, also while LSOS is closed.</p>
-  </Panel>
-
-  <Panel title="Mansion boost" focus="mansion" footer={undoBoost ? mansionUndo : undefined}>
-    {#if !mansionOwned}
-      <p class="hint">
-        The production boost from the Mansion's AI assistant. Mark a Mansion as owned in
-        <a href={hashForTab('settings')}>Settings</a> to track it.
-      </p>
-    {:else}
-      {#if boostOn}
-        <Fact label="Boosting">{label(last!.propertyId)}</Fact>
-        <EditableValue
-          label="Ends in"
-          value={endsAt - now}
-          unit="duration"
-          min={0}
-          max={MANSION_BOOST.durationMs}
-          onresync={(ms) =>
-            onchange({
-              ...timers,
-              mansionBoost: {
-                ...last!,
-                startedAt: startForRemaining(ms, MANSION_BOOST.durationMs, now),
-              },
-            })}
-        />
-      {/if}
-      {#if now < nextBoostAt && nextBoostAt !== endsAt}
-        <Countdown label="Next boost in" remainingMs={nextBoostAt - now} />
-      {:else if now >= nextBoostAt}
-        {#if choices.length > 0}
-          <Fact label="Business" labelFor="mansion-target" wide>
-            <Select
-              id="mansion-target"
-              value={target}
-              options={choices}
-              onchange={(id) => (chosen = id)}
-            />
-          </Fact>
-          <Fact label="Boost ready">
-            <Button disabled={!target} onclick={() => activate(target!)}>Activated</Button>
+<CardGrid items={CARDS} id={(card) => card.id} label={(card) => card.label} {order} {onorder}>
+  {#snippet card({ id }, move, moving)}
+    {#if id === 'lucky-wheel'}
+      <Panel
+        title="Lucky Wheel"
+        focus="lucky-wheel"
+        footer={undoSpin ? wheelUndo : undefined}
+        {move}
+        {moving}
+      >
+        {#if now < spinAt}
+          <EditableValue
+            label="Next spin in"
+            value={spinAt - now}
+            unit="duration"
+            min={0}
+            max={LUCKY_WHEEL.cooldownMs}
+            onresync={(ms) =>
+              onchange({
+                ...timers,
+                luckyWheelSpunAt: startForRemaining(ms, LUCKY_WHEEL.cooldownMs, now),
+              })}
+          />
+        {:else}
+          <Fact label="Spin ready">
+            <Button onclick={spin}>Spun</Button>
           </Fact>
+        {/if}
+        <p class="hint">One spin per 24 real hours, also while LSOS is closed.</p>
+      </Panel>
+    {:else}
+      <Panel
+        title="Mansion boost"
+        focus="mansion"
+        footer={undoBoost ? mansionUndo : undefined}
+        {move}
+        {moving}
+      >
+        {#if !mansionOwned}
+          <p class="hint">
+            The production boost from the Mansion's AI assistant. Mark a Mansion as owned in
+            <a href={hashForTab('settings')}>Settings</a> to track it.
+          </p>
         {:else}
+          {#if boostOn}
+            <Fact label="Boosting">{label(last!.propertyId)}</Fact>
+            <EditableValue
+              label="Ends in"
+              value={endsAt - now}
+              unit="duration"
+              min={0}
+              max={MANSION_BOOST.durationMs}
+              onresync={(ms) =>
+                onchange({
+                  ...timers,
+                  mansionBoost: {
+                    ...last!,
+                    startedAt: startForRemaining(ms, MANSION_BOOST.durationMs, now),
+                  },
+                })}
+            />
+          {/if}
+          {#if now < nextBoostAt && nextBoostAt !== endsAt}
+            <Countdown label="Next boost in" remainingMs={nextBoostAt - now} />
+          {:else if now >= nextBoostAt}
+            {#if choices.length > 0}
+              <Fact label="Business" labelFor="mansion-target" wide>
+                <Select
+                  id="mansion-target"
+                  value={target}
+                  options={choices}
+                  onchange={(id) => (chosen = id)}
+                />
+              </Fact>
+              <Fact label="Boost ready">
+                <Button disabled={!target} onclick={() => activate(target!)}>Activated</Button>
+              </Fact>
+            {:else}
+              <p class="hint">
+                Boost ready, but no business you own and run can take it{last
+                  ? ` (${label(last.propertyId)} was boosted last time)`
+                  : ''}.
+              </p>
+            {/if}
+          {/if}
           <p class="hint">
-            Boost ready, but no business you own and run can take it{last
-              ? ` (${label(last.propertyId)} was boosted last time)`
-              : ''}.
+            Production ×{MANSION_BOOST.speed} at one Bunker, Acid Lab or MC business for 24 real hours.
+            The next boost is ready 24 real hours after the last one, for a different business.
           </p>
         {/if}
-      {/if}
-      <p class="hint">
-        Production ×{MANSION_BOOST.speed} at one Bunker, Acid Lab or MC business for 24 real hours. The
-        next boost is ready 24 real hours after the last one, for a different business.
-      </p>
+      </Panel>
     {/if}
-  </Panel>
-</div>
+  {/snippet}
+</CardGrid>
 
 <style>
-  .grid {
-    display: grid;
-    gap: var(--space-5);
-    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
-  }
-
   .hint {
     color: var(--muted);
     font-size: var(--text-sm);
diff --git a/src/components/ui/CardGrid.svelte b/src/components/ui/CardGrid.svelte
new file mode 100644
index 0000000..f164ab1
--- /dev/null
+++ b/src/components/ui/CardGrid.svelte
@@ -0,0 +1,243 @@
+<script lang="ts" generics="T">
+  // A grid of cards the user can put in their own order (decisions 014, 026): drag a card by its
+  // title bar, or press the arrow keys there. The cards are snippets; each gets the handlers for
+  // its title bar (`Panel`'s `move`) and whether it is being moved. The parent saves the order.
+  import { tick, type Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { flip } from 'svelte/animate'
+  import { cubicOut } from 'svelte/easing'
+  import { applyOrder, cardAt, moveId, saveOrder, swapAt, type CardBox } from '../../lib/order'
+
+  interface Props {
+    items: readonly T[]
+    /** Id of an item: what the saved order lists. */
+    id: (item: T) => string
+    /** Name of an item, for the announcement after a keyboard move. */
+    label: (item: T) => string
+    /** Saved order: item ids. Items it does not list come after, in their own order. */
+    order?: readonly string[]
+    onorder?: (order: string[]) => void
+    card: Snippet<[T, HTMLAttributes<HTMLDivElement>, boolean]>
+  }
+
+  let { items, id, label, order = [], onorder = () => {}, card }: Props = $props()
+
+  const sorted = $derived(applyOrder(items.map(id), order))
+  // While a card is dragged: the order as it would drop now, the dragged card swapped with the
+  // one it is over (only those two move). Saved on release.
+  let preview = $state<string[] | null>(null)
+  let moving = $state<string | null>(null)
+  // A press on a title bar that has not moved far enough yet to lift it, so a click stays a click.
+  let pressed: { id: string; x: number; y: number } | null = null
+  // The dragged card follows the pointer: where on the card it was grabbed, and how far it is
+  // from its slot in the grid. Its slot stays outlined.
+  let grab = { x: 0, y: 0 }
+  let lift = $state({ x: 0, y: 0 })
+  // After release the card glides into its slot before it counts as put down.
+  let settling = $state<string | null>(null)
+  let announcement = $state('')
+  let grid = $state<HTMLElement>()
+  const shown = $derived(
+    (preview ?? sorted).flatMap((key) => items.filter((item) => id(item) === key)),
+  )
+
+  // Pointer travel (px) that turns a press into a drag.
+  const DRAG_START = 4
+  // A swap needs the middle of the dragged card this far inside the other card (share of its
+  // size per side), so a card resting on a border does not flick back and forth.
+  const SWAP_INSET = 0.1
+  const SETTLE_MS = 200
+
+  function save(ids: string[]) {
+    if (ids.join() !== sorted.join()) onorder(saveOrder(ids, order))
+  }
+
+  const slotOf = (key: string) =>
+    [...(grid?.querySelectorAll<HTMLElement>('[data-card]') ?? [])].find(
+      (slot) => slot.dataset.card === key,
+    )
+
+  /** Puts the lifted card under the pointer, measured from its slot. */
+  function follow(key: string, x: number, y: number) {
+    const slot = slotOf(key)?.getBoundingClientRect()
+    if (slot) lift = { x: x - grab.x - slot.left, y: y - grab.y - slot.top }
+  }
+
+  function stopMoving() {
+    pressed = null
+    moving = null
+    preview = null
+    lift = { x: 0, y: 0 }
+  }
+
+  /** The card slots where they end up, in viewport pixels: offsets skip the slide transforms. */
+  function slots(): CardBox[] {
+    const cards = [...(grid?.querySelectorAll<HTMLElement>('[data-card]') ?? [])]
+    const parent = cards[0]?.offsetParent
+    if (!parent) return []
+    const origin = parent.getBoundingClientRect()
+    return cards.map((slot) => ({
+      id: slot.dataset.card!,
+      left: origin.left + parent.clientLeft + slot.offsetLeft,
+      top: origin.top + parent.clientTop + slot.offsetTop,
+      width: slot.offsetWidth,
+      height: slot.offsetHeight,
+    }))
+  }
+
+  function start(key: string, x: number, y: number) {
+    const slot = slotOf(key)?.getBoundingClientRect()
+    if (!slot) return
+    grab = { x: x - slot.left, y: y - slot.top }
+    moving = key
+    preview = [...sorted]
+    follow(key, x, y)
+  }
+
+  // The rest of a drag is followed on the window, where the pointer goes when it leaves the
+  // title bar.
+  async function drag(event: PointerEvent) {
+    const { clientX: x, clientY: y } = event
+    if (moving === null && pressed) {
+      if (Math.hypot(x - pressed.x, y - pressed.y) < DRAG_START) return
+      start(pressed.id, pressed.x, pressed.y)
+      pressed = null
+    }
+    if (moving === null || !preview) return
+    // Where the dragged card is, not just the pointer: it may hang far below where it was held.
+    const boxes = slots()
+    const own = boxes.find((box) => box.id === moving)
+    const middle = own
+      ? { x: x - grab.x + own.width / 2, y: y - grab.y + own.height / 2 }
+      : { x, y }
+    const target = cardAt(boxes, middle.x, middle.y, SWAP_INSET)
+    if (target !== null && target !== moving) {
+      preview = swapAt(sorted, moving, preview.indexOf(target))
+      await tick()
+    }
+    if (moving !== null) follow(moving, x, y)
+  }
+
+  function drop() {
+    pressed = null
+    if (moving === null || !preview) return
+    const key = moving
+    save(preview)
+    stopMoving()
+    // Glide from where it was let go into its slot (a style transition, not game time).
+    settling = key
+    setTimeout(() => {
+      if (settling === key) settling = null
+    }, SETTLE_MS)
+  }
+
+  /** Slides cards to their new places; the lifted card follows the pointer instead. */
+  function slide(node: HTMLElement, rects: { from: DOMRect; to: DOMRect }) {
+    if (node.dataset.card === moving) return { duration: 0 }
+    return flip(node, rects, { duration: 250, easing: cubicOut })
+  }
+
+  /**
+   * Handlers for the title bar of one card, the only place to pick it up, so text and controls
+   * on the card work as usual. `touch-action: none` there makes a touch drag instead of scroll.
+   */
+  function handle(key: string): HTMLAttributes<HTMLDivElement> {
+    return {
+      onpointerdown: (event) => {
+        if (event.button !== 0 || moving !== null) return
+        // No text selection or focus change while dragging.
+        event.preventDefault()
+        pressed = { id: key, x: event.clientX, y: event.clientY }
+      },
+      onkeydown: async (event) => {
+        const from = sorted.indexOf(key)
+        const to =
+          event.key === 'ArrowLeft' || event.key === 'ArrowUp'
+            ? from - 1
+            : event.key === 'ArrowRight' || event.key === 'ArrowDown'
+              ? from + 1
+              : event.key === 'Home'
+                ? 0
+                : event.key === 'End'
+                  ? sorted.length - 1
+                  : null
+        if (to === null) return
+        event.preventDefault()
+        const next = moveId(sorted, key, to)
+        save(next)
+        const item = items.find((other) => id(other) === key)
+        announcement = `${item ? label(item) : key} moved to place ${next.indexOf(key) + 1} of ${next.length}.`
+        // Moving the card in the page can take the focus away from its handle.
+        await tick()
+        slotOf(key)?.querySelector<HTMLElement>('[data-move-handle]')?.focus()
+      },
+    }
+  }
+</script>
+
+<svelte:window onpointermove={drag} onpointerup={drop} onpointercancel={stopMoving} />
+
+<div class="grid" bind:this={grid}>
+  {#each shown as item (id(item))}
+    {@const key = id(item)}
+    <div class="card" class:slot={moving === key} data-card={key} animate:slide>
+      <div
+        class="lift"
+        class:lifted={moving === key}
+        class:settling={settling === key}
+        style:translate={moving === key ? `${lift.x}px ${lift.y}px` : undefined}
+      >
+        {@render card(item, handle(key), moving === key)}
+      </div>
+    </div>
+  {/each}
+</div>
+<p class="announcement" aria-live="polite">{announcement}</p>
+
+<style>
+  .grid {
+    display: grid;
+    gap: var(--space-5);
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
+  }
+
+  /* Lets the card fill its grid cell. */
+  .card,
+  .lift {
+    display: grid;
+  }
+
+  /* Where the lifted card goes back to. */
+  .slot {
+    border-radius: var(--radius);
+    outline: 1px dashed var(--track-edge);
+    outline-offset: -1px;
+  }
+
+  .lift.lifted {
+    box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.5);
+    cursor: grabbing;
+    pointer-events: none;
+    position: relative;
+    scale: 1.02;
+    z-index: 1;
+  }
+
+  .lift.settling {
+    position: relative;
+    transition:
+      translate 0.2s ease-out,
+      scale 0.2s ease-out;
+    z-index: 1;
+  }
+
+  .announcement {
+    clip-path: inset(50%);
+    height: 1px;
+    margin: 0;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+</style>
diff --git a/src/components/ui/Panel.svelte b/src/components/ui/Panel.svelte
index feadb39..0f1aba3 100644
--- a/src/components/ui/Panel.svelte
+++ b/src/components/ui/Panel.svelte
@@ -9,7 +9,7 @@
     footer?: Snippet
     /**
      * Makes the title bar a handle to move the panel: these handlers go on it, it takes focus,
-     * and the parent does the moving (issue #30).
+     * and the parent does the moving (`CardGrid`, decision 026).
      */
     move?: HTMLAttributes<HTMLDivElement>
     /** Highlights the panel while it is being moved. */
diff --git a/src/data/production.ts b/src/data/production.ts
index ee7b0cc..640d5bc 100644
--- a/src/data/production.ts
+++ b/src/data/production.ts
@@ -110,7 +110,7 @@ const SUPPLIES_WITH_EQUIPMENT =
   'Supply use as with both upgrades: only the equipment upgrade makes supplies last longer ' +
   '(gta.wiki, The Open Road, Upgrades).'
 const SUPPLIES_WITHOUT_EQUIPMENT =
-  'Supplies last half as long as with equipment, as in the Bunker (10 instead of 20 units ' +
+  'Supplies last half as long as with equipment as in the Bunker (10 instead of 20 units ' +
   'per full supply bar).'
 const STAFF_ONLY =
   'Speed and value as with equipment only, as in the Bunker, where either upgrade alone ' +
diff --git a/src/lib/state.test.ts b/src/lib/state.test.ts
index b9feb7a..3fb0fa7 100644
--- a/src/lib/state.test.ts
+++ b/src/lib/state.test.ts
@@ -11,6 +11,8 @@ import {
 
 // Version 12 defaults: alerts off, 10 minutes ahead, also while focused.
 const ALERTS = { browser: false, popup: false, leadMs: 600_000, unfocusedOnly: false }
+// Version 13 defaults: safe and timer cards in their default order.
+const ORDERS = { safeOrder: [], timerOrder: [] }
 
 describe('parseState', () => {
   it('round-trips the default state', () => {
@@ -28,11 +30,13 @@ describe('parseState', () => {
     expect(result).toEqual({
       ok: true,
       state: {
-        version: 12,
+        version: 13,
         clock: { trackOnOpen: false },
         properties: {},
         businesses: {},
         businessOrder: [],
+        safeOrder: [],
+        timerOrder: [],
         nightclub: {},
         safes: {},
         boosts: {},
@@ -48,11 +52,13 @@ describe('parseState', () => {
     expect(result).toEqual({
       ok: true,
       state: {
-        version: 12,
+        version: 13,
         clock: { trackOnOpen: true },
         properties: {},
         businesses: {},
         businessOrder: [],
+        safeOrder: [],
+        timerOrder: [],
         nightclub: {},
         safes: {},
         boosts: {},
@@ -71,11 +77,13 @@ describe('parseState', () => {
     expect(result).toEqual({
       ok: true,
       state: {
-        version: 12,
+        version: 13,
         clock: { trackOnOpen: false },
         properties,
         businesses: {},
         businessOrder: [],
+        safeOrder: [],
+        timerOrder: [],
         nightclub: {},
         safes: {},
         boosts: {},
@@ -95,11 +103,13 @@ describe('parseState', () => {
     expect(result).toEqual({
       ok: true,
       state: {
-        version: 12,
+        version: 13,
         clock: { trackOnOpen: true },
         properties,
         businesses,
         businessOrder: [],
+        safeOrder: [],
+        timerOrder: [],
         nightclub: {},
         safes: {},
         boosts: {},
@@ -123,7 +133,8 @@ describe('parseState', () => {
       ok: true,
       state: {
         ...sample,
-        version: 12,
+        version: 13,
+        ...ORDERS,
         nightclub: {},
         safes: {},
         boosts: {},
@@ -147,7 +158,8 @@ describe('parseState', () => {
       ok: true,
       state: {
         ...sample,
-        version: 12,
+        version: 13,
+        ...ORDERS,
         safes: {},
         boosts: {},
         timers: {},
@@ -169,7 +181,7 @@ describe('parseState', () => {
     }
     expect(parseState(JSON.stringify(sample))).toEqual({
       ok: true,
-      state: { ...sample, version: 12, boosts: {}, timers: {}, alerts: ALERTS },
+      state: { ...sample, version: 13, ...ORDERS, boosts: {}, timers: {}, alerts: ALERTS },
       fromVersion: 7,
     })
   })
@@ -187,7 +199,7 @@ describe('parseState', () => {
     }
     expect(parseState(JSON.stringify(sample))).toEqual({
       ok: true,
-      state: { ...sample, version: 12, timers: {}, alerts: ALERTS },
+      state: { ...sample, version: 13, ...ORDERS, timers: {}, alerts: ALERTS },
       fromVersion: 8,
     })
   })
@@ -205,7 +217,7 @@ describe('parseState', () => {
     }
     expect(parseState(JSON.stringify(sample))).toEqual({
       ok: true,
-      state: { ...sample, version: 12, timers: {}, alerts: ALERTS },
+      state: { ...sample, version: 13, ...ORDERS, timers: {}, alerts: ALERTS },
       fromVersion: 9,
     })
   })
@@ -223,7 +235,7 @@ describe('parseState', () => {
     }
     expect(parseState(JSON.stringify(sample))).toEqual({
       ok: true,
-      state: { ...sample, version: 12, timers: {}, alerts: ALERTS },
+      state: { ...sample, version: 13, ...ORDERS, timers: {}, alerts: ALERTS },
       fromVersion: 10,
     })
   })
@@ -242,11 +254,37 @@ describe('parseState', () => {
     }
     expect(parseState(JSON.stringify(sample))).toEqual({
       ok: true,
-      state: { ...sample, version: 12, alerts: ALERTS },
+      state: { ...sample, version: 13, ...ORDERS, alerts: ALERTS },
       fromVersion: 11,
     })
   })
 
+  it('migrates a version 12 sample, with safe and timer cards in their default order', () => {
+    const sample = {
+      version: 12,
+      clock: { trackOnOpen: false },
+      properties: { agency: { owned: true, upgrades: {} } },
+      businesses: {},
+      businessOrder: ['bunker'],
+      nightclub: {},
+      safes: { agency: { money: 10_000, sinceMs: 0 } },
+      boosts: {},
+      timers: { luckyWheelSpunAt: 5_000 },
+      alerts: ALERTS,
+    }
+    expect(parseState(JSON.stringify(sample))).toEqual({
+      ok: true,
+      state: { ...sample, version: 13, ...ORDERS },
+      fromVersion: 12,
+    })
+  })
+
+  it('keeps the safe and timer card order', () => {
+    const order = { safeOrder: ['car-wash', 'agency'], timerOrder: ['mansion', 'lucky-wheel'] }
+    const text = JSON.stringify({ ...defaultState(), ...order })
+    expect(parseState(text)).toMatchObject({ ok: true, state: order })
+  })
+
   it('keeps the alert settings', () => {
     const alerts = { browser: true, popup: true, leadMs: 0, unfocusedOnly: true }
     const text = JSON.stringify({ ...defaultState(), alerts })
diff --git a/src/lib/state.ts b/src/lib/state.ts
index 339f190..795b0d8 100644
--- a/src/lib/state.ts
+++ b/src/lib/state.ts
@@ -13,7 +13,7 @@ import { parseSafes, type SafesById } from './safes'
 import { parseTimers, type Timers } from './timers'
 
 /** Bump when the stored shape changes, and add a migration from the previous version. */
-export const CURRENT_VERSION = 12
+export const CURRENT_VERSION = 13
 
 /** All user state. Trackers add their own sections here as they are built. */
 export interface AppState {
@@ -26,6 +26,10 @@ export interface AppState {
   businesses: BusinessBarsById
   /** Property ids in the order the user dragged the business cards into (issue #30). */
   businessOrder: string[]
+  /** Card ids in the order the user dragged the safe cards into (issue #51). */
+  safeOrder: string[]
+  /** Card ids in the order the user dragged the timer cards into (issue #51). */
+  timerOrder: string[]
   /** Nightclub warehouse crates by goods id, as of the last play time counted (issue #7). */
   nightclub: GoodsStock
   /** Money in each safe and nightclub popularity, as of the last play time counted (issue #8). */
@@ -60,6 +64,8 @@ export function defaultState(): AppState {
     properties: {},
     businesses: {},
     businessOrder: [],
+    safeOrder: [],
+    timerOrder: [],
     nightclub: {},
     safes: {},
     boosts: {},
@@ -99,6 +105,8 @@ export const MIGRATIONS: Readonly<Record<number, Migration>> = {
   10: (data) => ({ ...data, timers: {} }),
   // Version 12 adds the alert settings (issue #15); alerts are off until opted in.
   11: (data) => ({ ...data, alerts: defaultAlerts() }),
+  // Version 13 adds the order of the safe and timer cards (issue #51); default order until moved.
+  12: (data) => ({ ...data, safeOrder: [], timerOrder: [] }),
 }
 
 export type ParseResult =
@@ -175,6 +183,10 @@ function toState(data: StoredData): AppState | string {
   if (typeof businesses === 'string') return businesses
   const businessOrder = parseOrder(data.businessOrder)
   if (typeof businessOrder === 'string') return businessOrder
+  const safeOrder = parseOrder(data.safeOrder)
+  if (typeof safeOrder === 'string') return safeOrder
+  const timerOrder = parseOrder(data.timerOrder)
+  if (typeof timerOrder === 'string') return timerOrder
   const nightclub = parseGoodsStock(data.nightclub)
   if (typeof nightclub === 'string') return nightclub
   const safes = parseSafes(data.safes)
@@ -191,6 +203,8 @@ function toState(data: StoredData): AppState | string {
     properties,
     businesses,
     businessOrder,
+    safeOrder,
+    timerOrder,
     nightclub,
     safes,
     boosts,