diff --git a/CLAUDE.md b/CLAUDE.md
index bb465f3..45fb74b 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -21,6 +21,7 @@ Svelte 5 + TypeScript + Vite. Public repository.
 | 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)   |
+| Business card order (drag, keys)               | `lib/order.ts`, `ui/Panel` `move` (decision 014)  |
 | Theme tokens                                   | `src/app.css` (decision 009)                      |
 | CI, templates                                  | `.github/`                                        |
 | Skills: `handoff`, `finish-pr`; agent: `scout` | `.claude/`                                        |
diff --git a/docs/decisions/010-resync.md b/docs/decisions/010-resync.md
index 4da5249..8192fa4 100644
--- a/docs/decisions/010-resync.md
+++ b/docs/decisions/010-resync.md
@@ -29,10 +29,21 @@
   delivery that arrives while nobody looks still counts. The wait is 10 minutes for every
   business and runs on real time for now; which clock the game uses is not confirmed. A raid
   also cancels a delivery on its way.
+- **Segmented bars, drag to resync** (issue #32): stock and supplies bars are split into five
+  segments like in game (`BAR_SEGMENTS` in `src/data/business-events.ts`), in the resync
+  controls only; collapsed cards keep a plain bar to stay clean. Each segment is its own box
+  with an edge (`--track-edge`, 3.4:1 on the panel), so empty segments are easy to see.
+  In `BusinessBars` each bar is also a slider (`Meter` with `onset`): drag its handle with mouse,
+  pen or touch, or use the keys (arrows step 1% to the next whole percent, Page Up/Down jump to
+  the next segment edge, Home/End to 0/100%). A drag rounds to whole percent and snaps to a
+  segment edge from up to 1.5% away (`dragValue`/`keyValue` in `src/lib/ui.ts`), so 19% and 21%
+  are reached by key or typing. It commits once, on release, and shows the level under the
+  pointer as the value while dragging. Typing stays for exact values.
 - What each event does, and the delivery, are game data in `src/data/business-events.ts`
   (decision 004).
 - **Undo takes back the last edit or preset** of that value; in `BusinessBars` one Undo covers
-  the last change to either bar, events included. It subtracts what the edit changed
+  the last change to either bar, events included. Dragging and key steps on one bar in a row
+  are one change (`recordEdit`), so Undo takes back the whole adjustment, not the last 1%. It subtracts what the edit changed
   rather than restoring the old number, so progress counted since is kept: a cooldown mistyped
   as 1:30 instead of 2:00 and undone ten minutes later shows 1:50. The undo lives in the
   component for the session and is not saved.
diff --git a/docs/decisions/011-owned-properties.md b/docs/decisions/011-owned-properties.md
index 6395eba..be44f3f 100644
--- a/docs/decisions/011-owned-properties.md
+++ b/docs/decisions/011-owned-properties.md
@@ -15,8 +15,10 @@
   no upgrades. Unchecking "owned" keeps the upgrades, so owning it again restores them. Entries
   for ids the catalog does not list are kept; a saved value that no longer fits its upgrade
   reads as the default. Logic: `src/lib/properties.ts`.
-- **UI:** Settings has a Properties panel with every catalog entry (owned checkbox; upgrades
-  appear once owned). The Businesses tab shows only owned properties, each panel with a gear
+- **UI:** Settings has a Properties panel with every catalog entry: the name as the row label and
+  a toggle button next to it, "Owned" (accent, filled) or "Not owned" (muted, outlined), with
+  `aria-pressed` and the name as its accessible label, so the state reads at a glance (issue
+  #31; it replaced an "Own <name>" checkbox). Upgrades appear once owned. The Businesses tab shows only owned properties, each panel with a gear
   button that opens the same settings in place; closed, it summarises the bought upgrades.
   Both components take the catalog as a prop, so `#/kit` previews them with sample entries.
 
diff --git a/docs/decisions/014-card-order.md b/docs/decisions/014-card-order.md
new file mode 100644
index 0000000..f23d878
--- /dev/null
+++ b/docs/decisions/014-card-order.md
@@ -0,0 +1,31 @@
+# 014: Business cards in the user's order
+
+2026-10-14, issue #30. Builds on decisions 006 and 009.
+
+## Decision
+
+- **The title bar is the handle.** `Panel` takes an optional `move` prop: its title bar (with the
+  dot grips of the in-game cards) becomes a focusable handle with a grab cursor. The Businesses
+  tab passes it for every card; other panels stay fixed.
+- **Pointer drag** (mouse, pen and touch alike, through pointer events), like moving apps on a
+  phone: pressing the handle lifts the card, which then sticks to the pointer while its slot
+  stays outlined. Over another card, the two swap: that card slides into the empty slot and
+  nothing else moves (`swapAt`; issue #30 review: shifting every card in between made them race
+  along the rows like one long list). A swap needs the pointer in the middle of the other
+  card (20% in from each side, `cardAt`), measured where cards end up rather than mid-slide, so
+  a pointer resting on a border does not flick the cards back and forth. Releasing saves the
+  order and the card glides into its slot; a cancelled pointer leaves the order as it was. The handle has `touch-action: none`, so
+  a touch that starts on a title bar drags instead of scrolling.
+- **Keyboard:** with the handle focused, arrow keys move the card one place back or forward
+  (reading order, since the grid wraps), Home/End to the first or last place. A polite live
+  region says where it went, and focus stays on the handle.
+- **Saved state** (version 5): `businessOrder`, a list of property ids. Shown cards follow it;
+  owned businesses it does not list (e.g. bought later) come after in catalog order. Ids of
+  businesses not owned now are kept at the end, so owning one again does not lose it.
+  Logic: `src/lib/order.ts`.
+
+## Why
+
+Not everyone cares about every business equally, and the in-game card titles already look like
+drag handles. Pointer events cover touch without a second code path, unlike HTML drag and drop.
+Saving ids rather than positions keeps the order stable when businesses are bought or sold.
diff --git a/docs/decisions/README.md b/docs/decisions/README.md
index 0cdd9bb..64b2b0c 100644
--- a/docs/decisions/README.md
+++ b/docs/decisions/README.md
@@ -20,7 +20,8 @@ free number, add one line below. **Replacing one:** write a new decision, then m
 - [007](007-state-store.md) State store: unreadable data blocks saving like a newer version; import overrides
 - [008](008-clock-details.md) Clock details: session play time, opens paused (setting), throttled ticks counted, long gaps asked about
 - [009](009-terminal-design.md) Terminal look: tokens in `app.css`, self-hosted Oswald (OFL), browser-style tabs, base components in `src/components/ui/`
-- [010](010-resync.md) Resync: `EditableValue` for every tracked value, `BusinessBars` with Sold/Raided/Full and supply deliveries, undo keeps progress since
+- [010](010-resync.md) Resync: `EditableValue` for every tracked value, `BusinessBars` with Sold/Raided/Full and supply deliveries, undo keeps progress since, five-segment bars you can drag
 - [011](011-owned-properties.md) Owned properties and upgrades: catalog in `src/data/properties.ts`, toggle/choice upgrades, Settings panel and Businesses gear
 - [012](012-business-production.md) Business production: rate per exact upgrade combination in `src/data/production.ts`, continuous on play time, unknown rates do not run
 - [013](013-marked-estimates.md) Missing game values may be estimated by a stated rule from sourced ones, marked "(est.)" wherever shown
+- [014](014-card-order.md) Business cards: drag a title bar to lift a card and swap it with another, or move it with arrow keys; order saved as property ids
diff --git a/src/App.svelte b/src/App.svelte
index 00ad08b..42c244d 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -53,6 +53,8 @@
           now={clocks.now}
           onresync={(id, bars) =>
             (store.state.businesses = { ...store.state.businesses, [id]: bars })}
+          order={store.state.businessOrder}
+          onorder={(order) => (store.state.businessOrder = order)}
         />
       {:else if active === 'settings'}
         <Settings />
diff --git a/src/app.css b/src/app.css
index c5bc64d..6c85e95 100644
--- a/src/app.css
+++ b/src/app.css
@@ -25,6 +25,8 @@
   --supplies: #3f6db8;
   --supplies-text: #8fb2ee;
   --track: #2b343e;
+  /* Edge of an empty bar segment: 3.4:1 on --panel, so the segments read before they fill. */
+  --track-edge: #6b7a88;
   --warn: #f0b450;
   --danger: #ef7a6e;
   --focus: #ffd75e;
diff --git a/src/components/Businesses.svelte b/src/components/Businesses.svelte
index 237db7c..4a8b0b5 100644
--- a/src/components/Businesses.svelte
+++ b/src/components/Businesses.svelte
@@ -1,8 +1,14 @@
 <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).
+  // 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).
+  import { tick } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { flip } from 'svelte/animate'
+  import { cubicOut } from 'svelte/easing'
   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, rateFor, type BusinessBarsById } from '../lib/production'
   import { ownedProperties, upgradeValue, type OwnedProperties } from '../lib/properties'
   import type { Bars } from '../lib/resync'
@@ -22,6 +28,9 @@
     /** Wall-clock time, for supply deliveries. */
     now?: number
     onresync?: (propertyId: string, bars: Bars) => void
+    /** Saved card order: property ids (issue #30). */
+    order?: readonly string[]
+    onorder?: (order: string[]) => void
   }
 
   let {
@@ -32,8 +41,136 @@
     businesses = {},
     now = 0,
     onresync = () => {},
+    order = [],
+    onorder = () => {},
   }: Props = $props()
-  const shown = $derived(ownedProperties(catalog, owned))
+  const ownedList = $derived(ownedProperties(catalog, owned))
+  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)
@@ -51,6 +188,8 @@
   }
 </script>
 
+<svelte:window onpointermove={drag} onpointerup={drop} onpointercancel={stopMoving} />
+
 {#if shown.length === 0}
   <p class="empty">
     {#if catalog.length === 0}
@@ -64,47 +203,57 @@
   <div class="grid">
     {#each shown as property (property.id)}
       {@const production = productions.find((p) => p.propertyId === property.id)}
-      <Panel title={property.label}>
-        {#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)}
-            bars={businesses[property.id] ?? emptyBars()}
-            {now}
-            editing={editing === property.id}
-            onresync={(bars) => onresync(property.id, bars)}
-          />
-        {/if}
-        {#snippet footer()}
-          {#if production}
-            <Button
-              aria-expanded={editing === property.id}
-              onclick={() => (editing = editing === property.id ? null : property.id)}
-              >{editing === property.id ? 'Done' : 'Edit'}</Button
-            >
-          {/if}
-          <Button
-            aria-label="Settings for {property.label}"
-            aria-expanded={open === property.id}
-            onclick={() => (open = open === property.id ? null : property.id)}
-          >
-            <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
-              <path
-                fill="currentColor"
-                d="M19.14 12.94a7.07 7.07 0 0 0 0-1.88l2.03-1.58a.5.5 0 0 0 .12-.64l-1.92-3.32a.5.5 0 0 0-.6-.22l-2.39.96a7 7 0 0 0-1.62-.94l-.36-2.54a.5.5 0 0 0-.5-.42h-3.84a.5.5 0 0 0-.5.42l-.36 2.54a7 7 0 0 0-1.62.94l-2.39-.96a.5.5 0 0 0-.6.22L2.71 8.84a.5.5 0 0 0 .12.64l2.03 1.58a7.07 7.07 0 0 0 0 1.88l-2.03 1.58a.5.5 0 0 0-.12.64l1.92 3.32a.5.5 0 0 0 .6.22l2.39-.96a7 7 0 0 0 1.62.94l.36 2.54a.5.5 0 0 0 .5.42h3.84a.5.5 0 0 0 .5-.42l.36-2.54a7 7 0 0 0 1.62-.94l2.39.96a.5.5 0 0 0 .6-.22l1.92-3.32a.5.5 0 0 0-.12-.64zM12 15.5A3.5 3.5 0 1 1 12 8.5a3.5 3.5 0 0 1 0 7z"
+      <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}
+          style:translate={moving === property.id ? `${lift.x}px ${lift.y}px` : undefined}
+        >
+          <Panel title={property.label} move={handle(property.id)} moving={moving === 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)}
+                bars={businesses[property.id] ?? emptyBars()}
+                {now}
+                editing={editing === property.id}
+                onresync={(bars) => onresync(property.id, bars)}
               />
-            </svg>
-          </Button>
-        {/snippet}
-      </Panel>
+            {/if}
+            {#snippet footer()}
+              {#if production}
+                <Button
+                  aria-expanded={editing === property.id}
+                  onclick={() => (editing = editing === property.id ? null : property.id)}
+                  >{editing === property.id ? 'Done' : 'Edit'}</Button
+                >
+              {/if}
+              <Button
+                aria-label="Settings for {property.label}"
+                aria-expanded={open === property.id}
+                onclick={() => (open = open === property.id ? null : property.id)}
+              >
+                <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+                  <path
+                    fill="currentColor"
+                    d="M19.14 12.94a7.07 7.07 0 0 0 0-1.88l2.03-1.58a.5.5 0 0 0 .12-.64l-1.92-3.32a.5.5 0 0 0-.6-.22l-2.39.96a7 7 0 0 0-1.62-.94l-.36-2.54a.5.5 0 0 0-.5-.42h-3.84a.5.5 0 0 0-.5.42l-.36 2.54a7 7 0 0 0-1.62.94l-2.39-.96a.5.5 0 0 0-.6.22L2.71 8.84a.5.5 0 0 0 .12.64l2.03 1.58a7.07 7.07 0 0 0 0 1.88l-2.03 1.58a.5.5 0 0 0-.12.64l1.92 3.32a.5.5 0 0 0 .6.22l2.39-.96a7 7 0 0 0 1.62.94l.36 2.54a.5.5 0 0 0 .5.42h3.84a.5.5 0 0 0 .5-.42l.36-2.54a7 7 0 0 0 1.62-.94l2.39.96a.5.5 0 0 0 .6-.22l1.92-3.32a.5.5 0 0 0-.12-.64zM12 15.5A3.5 3.5 0 1 1 12 8.5a3.5 3.5 0 0 1 0 7z"
+                  />
+                </svg>
+              </Button>
+            {/snippet}
+          </Panel>
+        </div>
+      </div>
     {/each}
   </div>
+  <p class="announcement" aria-live="polite">{announcement}</p>
 {/if}
 
 <style>
@@ -114,10 +263,48 @@
     grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
   }
 
+  /* Lets the panel 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);
+    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/PropertySettings.svelte b/src/components/PropertySettings.svelte
index 249015a..564df54 100644
--- a/src/components/PropertySettings.svelte
+++ b/src/components/PropertySettings.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   // Owned yes/no and the upgrades of one property (decision 011).
   import type { Property } from '../data/properties'
+  import Button from './ui/Button.svelte'
   import {
     isOwned,
     setOwned,
@@ -17,19 +18,23 @@
 
   let { property, owned, onchange }: Props = $props()
   const id = $props.id()
+  const isPropertyOwned = $derived(isOwned(owned, property.id))
 </script>
 
 <div class="property">
-  <label class="owned">
-    <input
-      type="checkbox"
-      checked={isOwned(owned, property.id)}
-      onchange={(event) => onchange(setOwned(owned, property.id, event.currentTarget.checked))}
-    />
-    <span>Own {property.label}</span>
-  </label>
+  <div class="owned">
+    <span id="{id}-name" class="name">{property.label}</span>
+    <Button
+      variant={isPropertyOwned ? 'primary' : 'ghost'}
+      aria-labelledby="{id}-name"
+      aria-pressed={isPropertyOwned}
+      onclick={() => onchange(setOwned(owned, property.id, !isPropertyOwned))}
+    >
+      {isPropertyOwned ? 'Owned' : 'Not owned'}
+    </Button>
+  </div>
 
-  {#if isOwned(owned, property.id) && property.upgrades.length > 0}
+  {#if isPropertyOwned && property.upgrades.length > 0}
     <div class="upgrades">
       {#each property.upgrades as upgrade (upgrade.id)}
         {#if upgrade.kind === 'toggle'}
@@ -77,6 +82,14 @@
   }
 
   .owned {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    justify-content: space-between;
+  }
+
+  .name {
     font-family: var(--font-display);
     letter-spacing: var(--tracking);
     text-transform: uppercase;
diff --git a/src/components/ui/BusinessBars.svelte b/src/components/ui/BusinessBars.svelte
index 16a5535..cbbf3f6 100644
--- a/src/components/ui/BusinessBars.svelte
+++ b/src/components/ui/BusinessBars.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
-  import { BUSINESS_EVENTS, SUPPLY_PURCHASE } from '../../data/business-events'
+  import { BAR_SEGMENTS, BUSINESS_EVENTS, SUPPLY_PURCHASE } from '../../data/business-events'
   import {
     applyEvent,
     buySupplies,
     formatValue,
+    recordEdit,
     settleBars,
     undoBars,
     type Bars,
+    type BarsEdit,
   } from '../../lib/resync'
   import Button from './Button.svelte'
   import Countdown from './Countdown.svelte'
@@ -35,16 +37,22 @@
   )
 
   // One undo for the whole business: the last edit, Full or event, whichever bars it changed.
-  let last = $state<{ before: Bars; after: Bars; label: string } | null>(null)
+  // Dragging and nudging one bar with the keys in a row count as one edit.
+  let last = $state<BarsEdit | null>(null)
+  // The level under the pointer while a bar is dragged, shown as its value.
+  let dragging = $state<{ stock: number | null; supplies: number | null }>({
+    stock: null,
+    supplies: null,
+  })
 
-  function set(after: Bars, label: string) {
+  function set(after: Bars, label: string, group?: string) {
     if (
       after.stock === bars.stock &&
       after.supplies === bars.supplies &&
       after.suppliesDueAt === bars.suppliesDueAt
     )
       return
-    last = { before: { ...bars }, after, label }
+    last = recordEdit(last, bars, after, label, group)
     onresync(after)
   }
 
@@ -62,19 +70,28 @@
 <div class="bars">
   <EditableValue
     label="Stock"
-    value={bars.stock}
+    value={dragging.stock ?? bars.stock}
     unit="percent"
     min={0}
     max={100}
     undoable={false}
     onresync={(stock) => set({ ...bars, stock }, `stock was ${formatValue(bars.stock, 'percent')}`)}
   >
-    <Meter label="Stock" value={bars.stock} max={100} bare />
+    <Meter
+      label="Stock"
+      value={bars.stock}
+      max={100}
+      segments={BAR_SEGMENTS.count}
+      bare
+      onpreview={(value) => (dragging.stock = value)}
+      onset={(stock) =>
+        set({ ...bars, stock }, `stock was ${formatValue(bars.stock, 'percent')}`, 'stock')}
+    />
   </EditableValue>
   {#if bars.supplies !== undefined}
     <EditableValue
       label="Supplies"
-      value={bars.supplies}
+      value={dragging.supplies ?? bars.supplies}
       unit="percent"
       min={0}
       max={100}
@@ -82,7 +99,21 @@
       onresync={(supplies) =>
         set({ ...bars, supplies }, `supplies was ${formatValue(bars.supplies ?? 0, 'percent')}`)}
     >
-      <Meter label="Supplies" value={bars.supplies} max={100} kind="supplies" bare />
+      <Meter
+        label="Supplies"
+        value={bars.supplies}
+        max={100}
+        kind="supplies"
+        segments={BAR_SEGMENTS.count}
+        bare
+        onpreview={(value) => (dragging.supplies = value)}
+        onset={(supplies) =>
+          set(
+            { ...bars, supplies },
+            `supplies was ${formatValue(bars.supplies ?? 0, 'percent')}`,
+            'supplies',
+          )}
+      />
       {#if dueAt !== undefined}
         <Countdown label="Supplies arrive in" remainingMs={dueAt - now} />
       {/if}
diff --git a/src/components/ui/Button.svelte b/src/components/ui/Button.svelte
index 7a80876..0327268 100644
--- a/src/components/ui/Button.svelte
+++ b/src/components/ui/Button.svelte
@@ -3,7 +3,11 @@
   import type { HTMLButtonAttributes } from 'svelte/elements'
 
   interface Props extends HTMLButtonAttributes {
-    /** primary: filled green, for the main action. ghost: outlined, for everything else. */
+    /**
+     * primary: filled green, for the main action. ghost: outlined, for everything else.
+     * A toggle button passes `aria-pressed`: not pressed reads muted, so pair it with `primary`
+     * when pressed and `ghost` when not.
+     */
     variant?: 'primary' | 'ghost'
     children: Snippet
   }
@@ -44,6 +48,10 @@
     background: var(--accent-hover);
   }
 
+  button[aria-pressed='false'] {
+    color: var(--muted);
+  }
+
   button:disabled {
     cursor: not-allowed;
     opacity: 0.5;
diff --git a/src/components/ui/Kit.svelte b/src/components/ui/Kit.svelte
index 59dc891..3733a2d 100644
--- a/src/components/ui/Kit.svelte
+++ b/src/components/ui/Kit.svelte
@@ -61,6 +61,7 @@
       checked: '2026-10-14',
     },
   ]
+  let businessOrder = $state<string[]>([])
   let businesses = $state<BusinessBarsById>({ 'sample-a': { stock: 20, supplies: 60 } })
 
   // A real-time cooldown, as a tracker would keep it: the moment it is ready.
@@ -77,10 +78,13 @@
     <Meter label="Stock" value={amount} max={100} />
     <Meter label="Supplies" value={15} max={100} kind="supplies" valueText="15 / 100" />
     <Meter label="Empty" value={0} max={100} kind="supplies" />
+    <Meter label="Five segments" value={amount} max={100} segments={5} />
     {#snippet footer()}
       <Button variant="primary">Primary</Button>
       <Button>Ghost</Button>
       <Button disabled>Disabled</Button>
+      <Button variant="primary" aria-pressed="true">Owned</Button>
+      <Button aria-pressed="false">Not owned</Button>
     {/snippet}
   </Panel>
 
@@ -141,6 +145,8 @@
   {businesses}
   {now}
   onresync={(id, value) => (businesses = { ...businesses, [id]: value })}
+  order={businessOrder}
+  onorder={(value) => (businessOrder = value)}
 />
 
 <style>
diff --git a/src/components/ui/Meter.svelte b/src/components/ui/Meter.svelte
index 7d543f5..a60ce5a 100644
--- a/src/components/ui/Meter.svelte
+++ b/src/components/ui/Meter.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { meterFraction } from '../../lib/ui'
+  import { dragValue, keyValue, meterFraction } from '../../lib/ui'
 
   interface Props {
     label: string
@@ -11,12 +11,76 @@
     valueText?: string
     /** Only the bar, for when the label and value are shown next to it (e.g. by EditableValue). */
     bare?: boolean
+    /** Equal segments the bar is split into, like the in-game business bars. */
+    segments?: number
+    /**
+     * Makes the bar a slider: drag its handle or use the keys, and this gets the new value
+     * (rounded to 1% of max, segment edges snap; decision 010). Called once per drag, on release.
+     */
+    onset?: (value: number) => void
+    /** While dragging, the value under the pointer; null once the drag ends. */
+    onpreview?: (value: number | null) => void
   }
 
-  let { label, value, max, kind = 'stock', valueText, bare = false }: Props = $props()
+  let {
+    label,
+    value,
+    max,
+    kind = 'stock',
+    valueText,
+    bare = false,
+    segments,
+    onset,
+    onpreview,
+  }: Props = $props()
 
-  const fraction = $derived(meterFraction(value, max))
-  const text = $derived(valueText ?? `${Math.round(fraction * 100)}%`)
+  let track = $state<HTMLDivElement>()
+  let dragging = $state<number | null>(null)
+
+  const shown = $derived(dragging ?? value)
+  const fraction = $derived(meterFraction(shown, max))
+  // While dragging, the percentage under the pointer replaces any custom text.
+  const text = $derived(
+    dragging === null && valueText !== undefined ? valueText : `${Math.round(fraction * 100)}%`,
+  )
+  const scale = $derived({ max, segments })
+
+  function at(event: PointerEvent): number {
+    const rect = track!.getBoundingClientRect()
+    return dragValue((event.clientX - rect.left) / rect.width, scale)
+  }
+
+  function preview(next: number | null) {
+    dragging = next
+    onpreview?.(next)
+  }
+
+  function start(event: PointerEvent) {
+    if (!onset || event.button !== 0) return
+    const slider = event.currentTarget as HTMLElement
+    slider.setPointerCapture(event.pointerId)
+    slider.focus()
+    event.preventDefault()
+    preview(at(event))
+  }
+
+  function move(event: PointerEvent) {
+    if (dragging !== null) preview(at(event))
+  }
+
+  function end() {
+    if (dragging === null) return
+    const next = dragging
+    preview(null)
+    if (next !== value) onset?.(next)
+  }
+
+  function key(event: KeyboardEvent) {
+    const next = keyValue(shown, event.key, scale)
+    if (next === null) return
+    event.preventDefault()
+    if (next !== value) onset?.(next)
+  }
 </script>
 
 <div class="meter {kind}">
@@ -26,19 +90,61 @@
       <span class="value">{text}</span>
     </div>
   {/if}
-  <div
-    class="track"
-    role="meter"
-    aria-label={label}
-    aria-valuemin={0}
-    aria-valuemax={max}
-    aria-valuenow={value}
-    aria-valuetext={text}
-  >
-    <div class="fill" style:width="{fraction * 100}%"></div>
-  </div>
+  {#if onset}
+    <div
+      class="slider"
+      role="slider"
+      tabindex="0"
+      aria-label={label}
+      aria-valuemin={0}
+      aria-valuemax={max}
+      aria-valuenow={Math.round(shown)}
+      aria-valuetext={text}
+      onpointerdown={start}
+      onpointermove={move}
+      onpointerup={end}
+      onpointercancel={() => preview(null)}
+      onlostpointercapture={end}
+      onkeydown={key}
+    >
+      {@render bar()}
+      <div class="handle" style:left="{fraction * 100}%"></div>
+    </div>
+  {:else}
+    <div
+      role="meter"
+      aria-label={label}
+      aria-valuemin={0}
+      aria-valuemax={max}
+      aria-valuenow={value}
+      aria-valuetext={text}
+    >
+      {@render bar()}
+    </div>
+  {/if}
 </div>
 
+{#snippet bar()}
+  {#if segments && segments > 1}
+    <!-- Separate boxes like the in-game HUD, each filled by its share of the value. -->
+    <div class="segments" bind:this={track}>
+      {#each { length: segments }, i (i)}
+        <div class="track segment">
+          <div
+            class="fill"
+            class:dragging={dragging !== null}
+            style:width="{meterFraction(fraction * segments - i, 1) * 100}%"
+          ></div>
+        </div>
+      {/each}
+    </div>
+  {:else}
+    <div class="track" bind:this={track}>
+      <div class="fill" class:dragging={dragging !== null} style:width="{fraction * 100}%"></div>
+    </div>
+  {/if}
+{/snippet}
+
 <style>
   .meter {
     display: flex;
@@ -77,6 +183,7 @@
     border-radius: var(--radius);
     height: var(--bar-height);
     overflow: hidden;
+    position: relative;
   }
 
   .fill {
@@ -84,6 +191,10 @@
     transition: width 0.3s;
   }
 
+  .fill.dragging {
+    transition: none;
+  }
+
   .stock .fill {
     background: var(--accent);
   }
@@ -91,4 +202,37 @@
   .supplies .fill {
     background: var(--supplies);
   }
+
+  .segments {
+    display: flex;
+    gap: 4px;
+  }
+
+  /* Taller than a plain bar, with an edge so empty segments stand out from the panel. */
+  .segment {
+    box-shadow: inset 0 0 0 1px var(--track-edge);
+    flex: 1;
+    height: calc(var(--bar-height) + 0.25rem);
+  }
+
+  /* Taller than the bar to give fingers and the pointer room; vertical scrolling still works. */
+  .slider {
+    border-radius: var(--radius);
+    cursor: ew-resize;
+    padding: var(--space-2) 0;
+    position: relative;
+    touch-action: pan-y;
+  }
+
+  .handle {
+    background: var(--fg);
+    border: 1px solid var(--bg);
+    border-radius: var(--radius);
+    height: 1.25rem;
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 0.5rem;
+  }
 </style>
diff --git a/src/components/ui/Panel.svelte b/src/components/ui/Panel.svelte
index 4f3e61a..9d16fab 100644
--- a/src/components/ui/Panel.svelte
+++ b/src/components/ui/Panel.svelte
@@ -1,20 +1,42 @@
 <script lang="ts">
   import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
 
   interface Props {
     title: string
     children: Snippet
     /** Optional strip under the body, like the action row on the in-game business cards. */
     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).
+     */
+    move?: HTMLAttributes<HTMLDivElement>
+    /** Highlights the panel while it is being moved. */
+    moving?: boolean
   }
 
-  let { title, children, footer }: Props = $props()
+  let { title, children, footer, move, moving = false }: Props = $props()
+  const id = $props.id()
 </script>
 
-<section class="panel" aria-label={title}>
+<section class="panel" class:moving aria-label={title}>
   <h3>
-    <span class="grip" aria-hidden="true"></span>{title}<span class="grip" aria-hidden="true"
-    ></span>
+    {#if move}
+      <div
+        class="title handle"
+        role="button"
+        tabindex="0"
+        aria-describedby="{id}-move"
+        data-move-handle
+        {...move}
+      >
+        {@render heading()}
+      </div>
+      <span id="{id}-move" hidden>Drag, or press the arrow keys, to move this card.</span>
+    {:else}
+      <div class="title">{@render heading()}</div>
+    {/if}
   </h3>
   <div class="body">{@render children()}</div>
   {#if footer}
@@ -22,6 +44,10 @@
   {/if}
 </section>
 
+{#snippet heading()}
+  <span class="grip" aria-hidden="true"></span>{title}<span class="grip" aria-hidden="true"></span>
+{/snippet}
+
 <style>
   .panel {
     background: var(--panel);
@@ -33,18 +59,40 @@
   }
 
   h3 {
-    align-items: center;
     background: var(--panel-raised);
     border-bottom: 1px solid var(--line);
-    display: flex;
     font-size: var(--text-md);
+    margin: 0;
+  }
+
+  .title {
+    align-items: center;
+    display: flex;
     gap: var(--space-3);
     justify-content: center;
-    margin: 0;
     padding: var(--space-2) var(--space-3);
     text-align: center;
   }
 
+  .handle {
+    cursor: grab;
+    touch-action: none;
+    user-select: none;
+  }
+
+  .handle:hover .grip {
+    opacity: 1;
+  }
+
+  .moving {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 1px var(--accent);
+  }
+
+  .moving .handle {
+    cursor: grabbing;
+  }
+
   /* The two-column dot grip either side of the in-game card titles. */
   .grip {
     background-image: radial-gradient(var(--muted) 1px, transparent 1.5px);
diff --git a/src/data/business-events.ts b/src/data/business-events.ts
index 3026599..ca7932d 100644
--- a/src/data/business-events.ts
+++ b/src/data/business-events.ts
@@ -44,3 +44,13 @@ export const SUPPLY_PURCHASE = {
     'Community wiki (gta.wiki, Business Supplies) also says about ten minutes for MC businesses.',
   checked: '2026-10-14',
 }
+
+/** The stock and supplies bars are split into equal segments, as on the in-game HUD. */
+export const BAR_SEGMENTS = {
+  count: 5,
+  source:
+    'gta.wiki, Business Supplies: both bars "are broken up into five segments" (MC businesses). ' +
+    'Bunker: segments seen in play (issue #32); gta.wiki, Supplies: most resupply missions fill ' +
+    '"1/5th, or 20 units".',
+  checked: '2026-10-14',
+}
diff --git a/src/lib/order.test.ts b/src/lib/order.test.ts
new file mode 100644
index 0000000..4044082
--- /dev/null
+++ b/src/lib/order.test.ts
@@ -0,0 +1,82 @@
+import { describe, expect, it } from 'vitest'
+import { applyOrder, cardAt, moveId, parseOrder, saveOrder, swapAt } from './order'
+
+describe('applyOrder', () => {
+  it('puts saved ids first in saved order, the rest after in their own order', () => {
+    expect(applyOrder(['a', 'b', 'c', 'd'], ['c', 'a'])).toEqual(['c', 'a', 'b', 'd'])
+  })
+
+  it('ignores saved ids that are not shown', () => {
+    expect(applyOrder(['a', 'b'], ['x', 'b'])).toEqual(['b', 'a'])
+  })
+
+  it('keeps the given order without a saved one', () => {
+    expect(applyOrder(['a', 'b'], [])).toEqual(['a', 'b'])
+  })
+})
+
+describe('moveId', () => {
+  it('moves an id forward or back', () => {
+    expect(moveId(['a', 'b', 'c', 'd'], 'a', 2)).toEqual(['b', 'c', 'a', 'd'])
+    expect(moveId(['a', 'b', 'c', 'd'], 'd', 0)).toEqual(['d', 'a', 'b', 'c'])
+  })
+
+  it('clamps the index to the list', () => {
+    expect(moveId(['a', 'b', 'c'], 'b', -1)).toEqual(['b', 'a', 'c'])
+    expect(moveId(['a', 'b', 'c'], 'b', 9)).toEqual(['a', 'c', 'b'])
+  })
+
+  it('leaves the list alone for an unknown id', () => {
+    expect(moveId(['a', 'b'], 'x', 0)).toEqual(['a', 'b'])
+  })
+})
+
+describe('swapAt', () => {
+  it('swaps the id with the one at the index, leaving the rest in place', () => {
+    expect(swapAt(['a', 'b', 'c', 'd', 'e'], 'a', 3)).toEqual(['d', 'b', 'c', 'a', 'e'])
+    expect(swapAt(['a', 'b', 'c'], 'c', 0)).toEqual(['c', 'b', 'a'])
+  })
+
+  it('leaves the list alone at its own index, out of range or for an unknown id', () => {
+    expect(swapAt(['a', 'b'], 'a', 0)).toEqual(['a', 'b'])
+    expect(swapAt(['a', 'b'], 'a', 2)).toEqual(['a', 'b'])
+    expect(swapAt(['a', 'b'], 'x', 0)).toEqual(['a', 'b'])
+  })
+})
+
+describe('cardAt', () => {
+  const boxes = [
+    { id: 'a', left: 0, top: 0, width: 100, height: 200 },
+    { id: 'b', left: 120, top: 0, width: 100, height: 200 },
+  ]
+
+  it('finds the card whose middle the point is in', () => {
+    expect(cardAt(boxes, 50, 100, 0.2)).toBe('a')
+    expect(cardAt(boxes, 140, 40, 0.2)).toBe('b')
+  })
+
+  it('finds nothing near an edge or between cards', () => {
+    expect(cardAt(boxes, 90, 100, 0.2)).toBeNull()
+    expect(cardAt(boxes, 130, 100, 0.2)).toBeNull()
+    expect(cardAt(boxes, 50, 30, 0.2)).toBeNull()
+    expect(cardAt(boxes, 110, 100, 0.2)).toBeNull()
+  })
+})
+
+describe('saveOrder', () => {
+  it('keeps saved ids that are not shown now after the shown ones', () => {
+    expect(saveOrder(['b', 'a'], ['a', 'x', 'b', 'y'])).toEqual(['b', 'a', 'x', 'y'])
+  })
+})
+
+describe('parseOrder', () => {
+  it('reads a list of ids, dropping repeats', () => {
+    expect(parseOrder(['a', 'b', 'a'])).toEqual(['a', 'b'])
+  })
+
+  it('rejects anything else', () => {
+    expect(parseOrder(undefined)).toBe('The saved card order is not a list of names.')
+    expect(parseOrder(['a', 1])).toBe('The saved card order is not a list of names.')
+    expect(parseOrder({})).toBe('The saved card order is not a list of names.')
+  })
+})
diff --git a/src/lib/order.ts b/src/lib/order.ts
new file mode 100644
index 0000000..d45b374
--- /dev/null
+++ b/src/lib/order.ts
@@ -0,0 +1,78 @@
+// The order the user put cards in by dragging them (issue #30).
+
+/**
+ * `ids` sorted by the saved `order`: ids it lists come first in that order, the rest follow in
+ * their own order (e.g. a business bought after the cards were last moved).
+ */
+export function applyOrder(ids: readonly string[], order: readonly string[]): string[] {
+  const rank = new Map(order.map((id, index) => [id, index]))
+  const listed = ids.filter((id) => rank.has(id)).sort((a, b) => rank.get(a)! - rank.get(b)!)
+  return [...listed, ...ids.filter((id) => !rank.has(id))]
+}
+
+/** `ids` with `id` moved to `index` (clamped to the list). Unchanged if `id` is not in it. */
+export function moveId(ids: readonly string[], id: string, index: number): string[] {
+  const from = ids.indexOf(id)
+  if (from < 0) return [...ids]
+  const rest = ids.filter((other) => other !== id)
+  const to = Math.min(rest.length, Math.max(0, index))
+  return [...rest.slice(0, to), id, ...rest.slice(to)]
+}
+
+/**
+ * `ids` with `id` put at `index` and the id there put where `id` was, so no other card moves
+ * (dragging a card onto another). Unchanged if `id` is not in it or `index` is out of range.
+ */
+export function swapAt(ids: readonly string[], id: string, index: number): string[] {
+  const next = [...ids]
+  const from = next.indexOf(id)
+  if (from < 0 || index < 0 || index >= next.length) return next
+  ;[next[from], next[index]] = [next[index]!, id]
+  return next
+}
+
+export interface CardBox {
+  id: string
+  left: number
+  top: number
+  width: number
+  height: number
+}
+
+/**
+ * The card whose middle the point is in: each box shrunk by `inset` (a share of its width and
+ * height) on every side. Near an edge nothing counts, so a dragged card does not flick back
+ * and forth between two places while the pointer rests on their border.
+ */
+export function cardAt(
+  boxes: readonly CardBox[],
+  x: number,
+  y: number,
+  inset: number,
+): string | null {
+  const box = boxes.find(
+    (b) =>
+      x >= b.left + b.width * inset &&
+      x <= b.left + b.width * (1 - inset) &&
+      y >= b.top + b.height * inset &&
+      y <= b.top + b.height * (1 - inset),
+  )
+  return box?.id ?? null
+}
+
+/**
+ * The order to save after the shown cards were rearranged to `shown`: the shown ids, then the
+ * saved ids not shown now (e.g. a business sold for now), so owning it again restores its place
+ * near the end rather than forgetting it.
+ */
+export function saveOrder(shown: readonly string[], saved: readonly string[]): string[] {
+  const visible = new Set(shown)
+  return [...shown, ...saved.filter((id) => !visible.has(id))]
+}
+
+/** Reads a saved order: a list of ids. Returns an error message if it is not one. */
+export function parseOrder(data: unknown): string[] | string {
+  if (!Array.isArray(data) || !data.every((id) => typeof id === 'string'))
+    return 'The saved card order is not a list of names.'
+  return [...new Set(data)]
+}
diff --git a/src/lib/resync.test.ts b/src/lib/resync.test.ts
index f7759f3..a5f20dd 100644
--- a/src/lib/resync.test.ts
+++ b/src/lib/resync.test.ts
@@ -5,6 +5,7 @@ import {
   clampValue,
   formatValue,
   parseValue,
+  recordEdit,
   settleBars,
   undoBars,
   undoValue,
@@ -150,3 +151,35 @@ describe('buying supplies', () => {
     expect(undoBars({ before: pending, after: raided }, raided)).toEqual(pending)
   })
 })
+
+describe('recordEdit', () => {
+  it('extends the last edit for a change in the same group', () => {
+    const first = recordEdit(null, { stock: 40 }, { stock: 45 }, 'stock was 40%', 'stock')
+    const second = recordEdit(first, { stock: 45 }, { stock: 46 }, 'stock was 45%', 'stock')
+    expect(second).toEqual({
+      before: { stock: 40 },
+      after: { stock: 46 },
+      label: 'stock was 40%',
+      group: 'stock',
+    })
+    expect(undoBars(second, { stock: 50 })).toEqual({ stock: 44 })
+  })
+
+  it('starts a new edit for another group or an ungrouped change', () => {
+    const drag = recordEdit(
+      null,
+      { stock: 40, supplies: 10 },
+      { stock: 45, supplies: 10 },
+      'a',
+      'stock',
+    )
+    const other = recordEdit(drag, drag.after, { stock: 45, supplies: 20 }, 'b', 'supplies')
+    expect(other.before).toEqual({ stock: 45, supplies: 10 })
+    const typed = recordEdit(other, other.after, { stock: 0, supplies: 20 }, 'c')
+    expect(typed.before).toEqual({ stock: 45, supplies: 20 })
+    expect(recordEdit(typed, typed.after, { stock: 1, supplies: 20 }, 'd').before).toEqual({
+      stock: 0,
+      supplies: 20,
+    })
+  })
+})
diff --git a/src/lib/resync.ts b/src/lib/resync.ts
index 69baa64..a367fb4 100644
--- a/src/lib/resync.ts
+++ b/src/lib/resync.ts
@@ -145,3 +145,27 @@ export function undoBars(edit: { before: Bars; after: Bars }, current: Bars): Ba
   }
   return next
 }
+
+/** The last change to a business's bars, for its one Undo (decision 010). */
+export interface BarsEdit {
+  before: Bars
+  after: Bars
+  label: string
+  /** Changes with the same group in a row form one edit, e.g. dragging and nudging one bar. */
+  group?: string
+}
+
+/**
+ * Records a change from `before` to `after`. A change in the same `group` as the last edit
+ * extends it, so Undo takes back the whole run; any other change starts a new edit.
+ */
+export function recordEdit(
+  last: BarsEdit | null,
+  before: Bars,
+  after: Bars,
+  label: string,
+  group?: string,
+): BarsEdit {
+  if (group !== undefined && last?.group === group) return { ...last, after }
+  return { before: { ...before }, after, label, group }
+}
diff --git a/src/lib/state.test.ts b/src/lib/state.test.ts
index 1e7c225..7d43ea0 100644
--- a/src/lib/state.test.ts
+++ b/src/lib/state.test.ts
@@ -25,10 +25,11 @@ describe('parseState', () => {
     expect(result).toEqual({
       ok: true,
       state: {
-        version: 4,
+        version: 5,
         clock: { trackOnOpen: false },
         properties: {},
         businesses: {},
+        businessOrder: [],
       },
       fromVersion: 1,
     })
@@ -38,7 +39,13 @@ describe('parseState', () => {
     const result = parseState('{"version":2,"clock":{"trackOnOpen":true}}')
     expect(result).toEqual({
       ok: true,
-      state: { version: 4, clock: { trackOnOpen: true }, properties: {}, businesses: {} },
+      state: {
+        version: 5,
+        clock: { trackOnOpen: true },
+        properties: {},
+        businesses: {},
+        businessOrder: [],
+      },
       fromVersion: 2,
     })
   })
@@ -50,14 +57,39 @@ describe('parseState', () => {
     )
     expect(result).toEqual({
       ok: true,
-      state: { version: 4, clock: { trackOnOpen: false }, properties, businesses: {} },
+      state: {
+        version: 5,
+        clock: { trackOnOpen: false },
+        properties,
+        businesses: {},
+        businessOrder: [],
+      },
       fromVersion: 3,
     })
   })
 
+  it('migrates a version 4 sample, keeping the catalog order of the cards', () => {
+    const properties = { bunker: { owned: true, upgrades: {} } }
+    const businesses = { bunker: { stock: 30, supplies: 80 } }
+    const result = parseState(
+      JSON.stringify({ version: 4, clock: { trackOnOpen: true }, properties, businesses }),
+    )
+    expect(result).toEqual({
+      ok: true,
+      state: {
+        version: 5,
+        clock: { trackOnOpen: true },
+        properties,
+        businesses,
+        businessOrder: [],
+      },
+      fromVersion: 4,
+    })
+  })
+
   it('keeps the saved clock setting', () => {
     const text =
-      '{"version":4,"clock":{"trackOnOpen":true,"playMs":5},"properties":{},"businesses":{}}'
+      '{"version":5,"clock":{"trackOnOpen":true,"playMs":5},"properties":{},"businesses":{},"businessOrder":[]}'
     expect(parseState(text)).toMatchObject({ ok: true, state: { clock: { trackOnOpen: true } } })
   })
 
@@ -73,32 +105,43 @@ describe('parseState', () => {
     expect(parseState(text)).toMatchObject({ ok: true, state: { businesses } })
   })
 
+  it('keeps the saved card order', () => {
+    const businessOrder = ['bunker', 'mc-weed']
+    const text = JSON.stringify({ ...defaultState(), businessOrder })
+    expect(parseState(text)).toMatchObject({ ok: true, state: { businessOrder } })
+  })
+
   it.each([
     [
       'a missing clock',
-      '{"version":4,"properties":{},"businesses":{}}',
+      '{"version":5,"properties":{},"businesses":{},"businessOrder":[]}',
       'clock section is missing',
     ],
     [
       'a bad tracking setting',
-      '{"version":4,"clock":{"trackOnOpen":"yes"},"properties":{},"businesses":{}}',
+      '{"version":5,"clock":{"trackOnOpen":"yes"},"properties":{},"businesses":{},"businessOrder":[]}',
       'tracking setting',
     ],
     [
       'missing properties',
-      '{"version":4,"clock":{"trackOnOpen":false},"businesses":{}}',
+      '{"version":5,"clock":{"trackOnOpen":false},"businesses":{},"businessOrder":[]}',
       'properties section',
     ],
     [
       'missing businesses',
-      '{"version":4,"clock":{"trackOnOpen":false},"properties":{}}',
+      '{"version":5,"clock":{"trackOnOpen":false},"properties":{},"businessOrder":[]}',
       'businesses section',
     ],
     [
       'stock over 100%',
-      '{"version":4,"clock":{"trackOnOpen":false},"properties":{},"businesses":{"bunker":{"stock":120}}}',
+      '{"version":5,"clock":{"trackOnOpen":false},"properties":{},"businesses":{"bunker":{"stock":120}},"businessOrder":[]}',
       'business "bunker"',
     ],
+    [
+      'a card order that is not a list',
+      '{"version":5,"clock":{"trackOnOpen":false},"properties":{},"businesses":{},"businessOrder":"bunker"}',
+      'card order',
+    ],
   ])('rejects %s', (_, text, message) => {
     const result = parseState(text)
     expect(result).toMatchObject({ ok: false, reason: 'invalid' })
diff --git a/src/lib/state.ts b/src/lib/state.ts
index 4337b15..3c8f8d8 100644
--- a/src/lib/state.ts
+++ b/src/lib/state.ts
@@ -1,10 +1,11 @@
 // The persisted root state, its versions and migrations (decision 006).
 import { defaultClockSettings, type ClockSettings } from './clock'
+import { parseOrder } from './order'
 import { parseBusinessBars, type BusinessBarsById } from './production'
 import { parseOwnedProperties, type OwnedProperties } from './properties'
 
 /** Bump when the stored shape changes, and add a migration from the previous version. */
-export const CURRENT_VERSION = 4
+export const CURRENT_VERSION = 5
 
 /** All user state. Trackers add their own sections here as they are built. */
 export interface AppState {
@@ -15,6 +16,8 @@ export interface AppState {
   properties: OwnedProperties
   /** Stock and supplies of each business, as of the last play time counted (issue #6). */
   businesses: BusinessBarsById
+  /** Property ids in the order the user dragged the business cards into (issue #30). */
+  businessOrder: string[]
 }
 
 export function defaultState(): AppState {
@@ -23,6 +26,7 @@ export function defaultState(): AppState {
     clock: defaultClockSettings(),
     properties: {},
     businesses: {},
+    businessOrder: [],
   }
 }
 
@@ -39,6 +43,8 @@ export const MIGRATIONS: Readonly<Record<number, Migration>> = {
   2: (data) => ({ ...data, properties: {} }),
   // Version 4 adds business stock and supplies (issue #6); nothing is tracked yet.
   3: (data) => ({ ...data, businesses: {} }),
+  // Version 5 adds the order of the business cards (issue #30); catalog order until moved.
+  4: (data) => ({ ...data, businessOrder: [] }),
 }
 
 export type ParseResult =
@@ -113,7 +119,9 @@ function toState(data: StoredData): AppState | string {
   if (typeof properties === 'string') return properties
   const businesses = parseBusinessBars(data.businesses)
   if (typeof businesses === 'string') return businesses
-  return { version: CURRENT_VERSION, clock, properties, businesses }
+  const businessOrder = parseOrder(data.businessOrder)
+  if (typeof businessOrder === 'string') return businessOrder
+  return { version: CURRENT_VERSION, clock, properties, businesses, businessOrder }
 }
 
 function toClock(data: unknown): ClockSettings | string {
diff --git a/src/lib/ui.test.ts b/src/lib/ui.test.ts
index b13fc07..2dbedbd 100644
--- a/src/lib/ui.test.ts
+++ b/src/lib/ui.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { meterFraction, parseNumberField } from './ui'
+import { dragValue, keyValue, meterFraction, parseNumberField } from './ui'
 
 describe('meterFraction', () => {
   it('divides value by max', () => {
@@ -42,3 +42,62 @@ describe('parseNumberField', () => {
     expect(parseNumberField('9.7', { integer: true, max: 9 })).toBe(9)
   })
 })
+
+describe('dragValue', () => {
+  const bar = { max: 100, segments: 5 }
+
+  it('rounds to whole percent', () => {
+    expect(dragValue(0.374, { max: 100 })).toBe(37)
+    expect(dragValue(0.376, { max: 100 })).toBe(38)
+  })
+
+  it('snaps to a segment edge from up to 1.5% away', () => {
+    expect(dragValue(0.186, bar)).toBe(20)
+    expect(dragValue(0.214, bar)).toBe(20)
+    expect(dragValue(0.986, bar)).toBe(100)
+    expect(dragValue(0.012, bar)).toBe(0)
+  })
+
+  it('does not snap further away or without segments', () => {
+    expect(dragValue(0.183, bar)).toBe(18)
+    expect(dragValue(0.217, bar)).toBe(22)
+    expect(dragValue(0.19, { max: 100 })).toBe(19)
+  })
+
+  it('clamps a pointer outside the track', () => {
+    expect(dragValue(-0.3, bar)).toBe(0)
+    expect(dragValue(1.4, bar)).toBe(100)
+  })
+})
+
+describe('keyValue', () => {
+  const bar = { max: 100, segments: 5 }
+
+  it('steps by 1% to the next whole percent', () => {
+    expect(keyValue(37, 'ArrowRight', bar)).toBe(38)
+    expect(keyValue(37, 'ArrowUp', bar)).toBe(38)
+    expect(keyValue(37.4, 'ArrowRight', bar)).toBe(38)
+    expect(keyValue(37.4, 'ArrowLeft', bar)).toBe(37)
+    expect(keyValue(37, 'ArrowDown', bar)).toBe(36)
+  })
+
+  it('jumps to the next segment edge with Page Up/Down', () => {
+    expect(keyValue(37, 'PageUp', bar)).toBe(40)
+    expect(keyValue(40, 'PageUp', bar)).toBe(60)
+    expect(keyValue(37, 'PageDown', bar)).toBe(20)
+    expect(keyValue(40, 'PageDown', bar)).toBe(20)
+    expect(keyValue(37, 'PageUp', { max: 100 })).toBe(40)
+    expect(keyValue(37, 'PageDown', { max: 100 })).toBe(30)
+  })
+
+  it('goes to the ends with Home/End and stays in range', () => {
+    expect(keyValue(37, 'Home', bar)).toBe(0)
+    expect(keyValue(37, 'End', bar)).toBe(100)
+    expect(keyValue(100, 'ArrowRight', bar)).toBe(100)
+    expect(keyValue(0, 'PageDown', bar)).toBe(0)
+  })
+
+  it('ignores other keys', () => {
+    expect(keyValue(37, 'Enter', bar)).toBeNull()
+  })
+})
diff --git a/src/lib/ui.ts b/src/lib/ui.ts
index 7470a8c..a8ac63b 100644
--- a/src/lib/ui.ts
+++ b/src/lib/ui.ts
@@ -25,3 +25,67 @@ export function parseNumberField(text: string, bounds: NumberBounds = {}): numbe
   if (bounds.max !== undefined) value = Math.min(bounds.max, value)
   return value
 }
+
+export interface SliderScale {
+  max: number
+  /** Equal segments the bar is split into, e.g. 5 like the in-game business bars. */
+  segments?: number
+}
+
+/** Drag snaps to a segment edge from this close, in hundredths of `max`. */
+export const SNAP_TO_EDGE = 1.5
+
+/**
+ * Value under a drag on a slider: `fraction` is how far along the track the pointer is (any
+ * number; clamped to 0..1). Rounds to whole hundredths of `max` (1% of a business bar) and
+ * snaps to a segment edge when within `SNAP_TO_EDGE` of it, so the edges are easy to hit.
+ */
+export function dragValue(fraction: number, scale: SliderScale): number {
+  const { max, segments } = scale
+  const raw = meterFraction(fraction, 1) * max
+  const unit = max / 100
+  if (segments && segments > 0) {
+    const width = max / segments
+    const edge = Math.round(raw / width) * width
+    if (Math.abs(raw - edge) <= SNAP_TO_EDGE * unit) return edge
+  }
+  return Math.round(raw / unit) * unit
+}
+
+/**
+ * Value after a slider key: arrows step by a hundredth of `max` to the next whole step, Page
+ * Up/Down jump to the next segment edge (a tenth of `max` without segments), Home/End go to
+ * 0/max. Null for any other key.
+ */
+export function keyValue(value: number, key: string, scale: SliderScale): number | null {
+  const { max, segments } = scale
+  const jump = segments && segments > 0 ? max / segments : max / 10
+  const next = (step: number, up: boolean) =>
+    up ? (Math.floor(value / step + 1e-9) + 1) * step : (Math.ceil(value / step - 1e-9) - 1) * step
+  let result: number
+  switch (key) {
+    case 'ArrowRight':
+    case 'ArrowUp':
+      result = next(max / 100, true)
+      break
+    case 'ArrowLeft':
+    case 'ArrowDown':
+      result = next(max / 100, false)
+      break
+    case 'PageUp':
+      result = next(jump, true)
+      break
+    case 'PageDown':
+      result = next(jump, false)
+      break
+    case 'Home':
+      result = 0
+      break
+    case 'End':
+      result = max
+      break
+    default:
+      return null
+  }
+  return Math.min(max, Math.max(0, result))
+}