diff --git a/src/app.html b/src/app.html
index b6a3073..b6816cc 100644
--- a/src/app.html
+++ b/src/app.html
@@ -6,7 +6,10 @@
     <meta name="text-scale" content="scale" />
     %sveltekit.head%
   </head>
-  <body data-sveltekit-preload-data="hover">
+  <body
+    data-sveltekit-preload-data="hover"
+    class="bg-surface-900 text-gray-100 antialiased"
+  >
     <div style="display: contents">%sveltekit.body%</div>
   </body>
 </html>
diff --git a/src/lib/components/BountyCard.svelte b/src/lib/components/BountyCard.svelte
new file mode 100644
index 0000000..2b8399d
--- /dev/null
+++ b/src/lib/components/BountyCard.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { formatSats } from '$lib/format';
+  import type { Bounty, BountyStatus } from '$lib/types/bounty';
+
+  interface Props {
+    bounty: Bounty;
+  }
+
+  let { bounty }: Props = $props();
+
+  const statusBadge: Record<BountyStatus, { label: string; classes: string }> =
+    {
+      open: {
+        label: 'Open',
+        classes: 'border-green-800 bg-green-900/50 text-green-400'
+      },
+      'in-progress': {
+        label: 'In Progress',
+        classes: 'border-bitcoin-800 bg-bitcoin-900/50 text-bitcoin-400'
+      },
+      'in-dispute': {
+        label: 'In Dispute',
+        classes: 'border-red-800 bg-red-900/50 text-red-400'
+      },
+      claimed: {
+        label: 'Claimed',
+        classes: 'border-surface-500 bg-surface-600 text-gray-400'
+      },
+      cancelled: {
+        label: 'Cancelled',
+        classes: 'border-surface-500 bg-surface-600 text-gray-500'
+      }
+    };
+</script>
+
+<article
+  class="rounded-xl border border-surface-600 bg-surface-800 p-5 transition-colors hover:border-bitcoin-500/60"
+>
+  <div class="flex items-center justify-between gap-2">
+    <span
+      class="rounded-full border px-2 py-0.5 text-xs font-medium {statusBadge[
+        bounty.status
+      ].classes}"
+    >
+      {statusBadge[bounty.status].label}
+    </span>
+    <span class="text-lg font-bold text-bitcoin-400">
+      {formatSats(bounty.amountSats)}
+    </span>
+  </div>
+  <h2 class="mt-3 text-base font-semibold text-gray-100">{bounty.title}</h2>
+  {#if bounty.tags.length > 0}
+    <ul class="mt-3 flex flex-wrap gap-1.5">
+      {#each bounty.tags as tag (tag)}
+        <li
+          class="rounded-md border border-surface-600 bg-surface-700 px-2 py-0.5 text-xs text-gray-400"
+        >
+          #{tag}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</article>
diff --git a/src/lib/format.ts b/src/lib/format.ts
new file mode 100644
index 0000000..1640e60
--- /dev/null
+++ b/src/lib/format.ts
@@ -0,0 +1,3 @@
+export function formatSats(sats: number): string {
+  return `${sats.toLocaleString('en-US')} sats`;
+}
diff --git a/src/lib/types/bounty.ts b/src/lib/types/bounty.ts
new file mode 100644
index 0000000..dbacfa5
--- /dev/null
+++ b/src/lib/types/bounty.ts
@@ -0,0 +1,9 @@
+export type BountyStatus =
+  'open' | 'in-progress' | 'in-dispute' | 'claimed' | 'cancelled';
+
+export interface Bounty {
+  title: string;
+  amountSats: number;
+  status: BountyStatus;
+  tags: string[];
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f5639d1..3f51e88 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,41 @@
-<h1>Welcome to SvelteKit</h1>
-<p>
-  Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the
-  documentation
-</p>
+<script lang="ts">
+  import BountyCard from '$lib/components/BountyCard.svelte';
+  import type { Bounty } from '$lib/types/bounty';
+
+  const bounties: Bounty[] = [
+    {
+      title: 'Add NIP-57 zap receipts to the bounty feed',
+      amountSats: 250000,
+      status: 'open',
+      tags: ['typescript', 'nostr']
+    },
+    {
+      title: 'Escrow state machine for Arkade multiparty flows',
+      amountSats: 1200000,
+      status: 'open',
+      tags: ['bitcoin', 'escrow']
+    },
+    {
+      title: 'Dark-mode landing page skeleton',
+      amountSats: 50000,
+      status: 'claimed',
+      tags: []
+    }
+  ];
+</script>
+
+<svelte:head>
+  <title>SatCode — Bounties</title>
+</svelte:head>
+
+<main class="mx-auto max-w-6xl px-4 py-8">
+  <h1 class="text-2xl font-bold text-gray-100">Bounties</h1>
+  <p class="mt-1 text-sm text-gray-400">
+    Software bounties organized on Nostr, paid in Bitcoin.
+  </p>
+  <div class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+    {#each bounties as bounty (bounty.title)}
+      <BountyCard {bounty} />
+    {/each}
+  </div>
+</main>
diff --git a/src/routes/layout.css b/src/routes/layout.css
index cd67023..4d2f313 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -1,3 +1,24 @@
 @import 'tailwindcss';
 @plugin '@tailwindcss/forms';
 @plugin '@tailwindcss/typography';
+
+@theme {
+  --color-bitcoin-50: #fff7ed;
+  --color-bitcoin-100: #ffedd5;
+  --color-bitcoin-200: #fed7aa;
+  --color-bitcoin-300: #fdba74;
+  --color-bitcoin-400: #fb923c;
+  --color-bitcoin-500: #f7931a; /* canonical Bitcoin orange */
+  --color-bitcoin-600: #ea7c0a;
+  --color-bitcoin-700: #c2620a;
+  --color-bitcoin-800: #9a4e0f;
+  --color-bitcoin-900: #7c3f10;
+  --color-bitcoin-950: #431f06;
+  --color-surface-300: #444444;
+  --color-surface-400: #333333;
+  --color-surface-500: #2a2a2a;
+  --color-surface-600: #222222;
+  --color-surface-700: #1a1a1a;
+  --color-surface-800: #111111;
+  --color-surface-900: #0a0a0a;
+}
