diff --git a/histoire.config.js b/histoire.config.js
index a4288f9..f29a781 100644
--- a/histoire.config.js
+++ b/histoire.config.js
@@ -2,5 +2,5 @@ import { defineConfig } from 'histoire';
 import { HstSvelte } from '@histoire/plugin-svelte';
 
 export default defineConfig({
-	plugins: [HstSvelte()]
+	plugins: [HstSvelte()],
 });
diff --git a/src/lib/components/Campaigns.story.svelte b/src/lib/components/Campaigns.story.svelte
new file mode 100644
index 0000000..44bd31c
--- /dev/null
+++ b/src/lib/components/Campaigns.story.svelte
@@ -0,0 +1,13 @@
+<Beer />
+
+<Hst.Story>
+	<Campaigns {campaigns} />
+</Hst.Story>
+
+<script>
+	export let Hst;
+	import Beer from './Beer.svelte';
+	import Campaigns from './Campaigns.svelte';
+
+	const campaigns = [{ name: 'Earth 613' }];
+</script>
diff --git a/src/lib/components/Campaigns.svelte b/src/lib/components/Campaigns.svelte
new file mode 100644
index 0000000..bb94bd3
--- /dev/null
+++ b/src/lib/components/Campaigns.svelte
@@ -0,0 +1,40 @@
+<article>
+	<header>
+		<h5>Campaigns</h5>
+		<button on:click={newCampaign}>new campaign</button>
+	</header>
+
+	{#each campaigns as campaign (campaign.name)}
+		<div class="row">
+			<i class="light-green-text">south_america</i>
+			<div class="max">
+				<h6>{campaign.name}</h6>
+				<p>chapter 2, second battle.</p>
+			</div>
+			<button on:click={deleteCampaign(campaign)} class="none"
+				>Delete</button
+			>
+		</div>
+	{/each}
+</article>
+
+<script>
+	export let campaigns = [];
+
+	async function deleteCampaign({ name, id }) {
+		if (!window.confirm(`delete campaign ${name}?`)) return;
+	}
+
+	const newCampaign = () => {
+		console.log('TODO');
+	};
+</script>
+
+<style>
+	header {
+		display: flex;
+	}
+	h5 {
+		flex: 1;
+	}
+</style>