diff --git a/web/src/app.d.ts b/web/src/app.d.ts
index da08e6d..351161f 100644
--- a/web/src/app.d.ts
+++ b/web/src/app.d.ts
@@ -1,5 +1,8 @@
 // See https://svelte.dev/docs/kit/types#app.d.ts
 // for information about these interfaces
+declare const __WEB_VERSION__: string;
+declare const __CLI_VERSION__: string;
+
 declare global {
 	namespace App {
 		// interface Error {}
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 0bf5152..e23a938 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
 	import './layout.css';
 	let { children } = $props();
+
+	const webVersion: string = __WEB_VERSION__;
+	const cliVersion: string = __CLI_VERSION__;
 </script>
 
 <svelte:head>
@@ -19,4 +22,45 @@
 	/>
 </svelte:head>
 
+<header>
+	<span class="wordmark">malachite</span>
+	<div class="version-strip">
+	<span>web v{webVersion}</span>
+	<span class="sep">–</span>
+	<span>cli v{cliVersion}</span>
+	</div>
+</header>
+
 {@render children()}
+
+<style>
+	header {
+		position: sticky;
+		top: 0;
+		z-index: 10;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.6rem 1.5rem;
+		background: var(--bg);
+		border-bottom: 1px solid var(--border);
+	}
+	.wordmark {
+		font-size: 0.85rem;
+		font-weight: 600;
+		font-family: 'JetBrains Mono', monospace;
+		color: var(--accent);
+		letter-spacing: -0.02em;
+	}
+	.version-strip {
+		font-size: 0.7rem;
+		font-family: 'JetBrains Mono', monospace;
+		color: var(--muted);
+		letter-spacing: 0.03em;
+		user-select: none;
+	}
+	.sep {
+		margin: 0 0.4rem;
+		color: var(--muted);
+	}
+</style>
diff --git a/web/vite.config.ts b/web/vite.config.ts
index d96235f..4f2e8a2 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -1,12 +1,19 @@
 import tailwindcss from '@tailwindcss/vite';
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+
+const webPkg = JSON.parse(readFileSync(resolve('package.json'), 'utf-8'));
+const cliPkg = JSON.parse(readFileSync(resolve('../package.json'), 'utf-8'));
 
 export default defineConfig({
 	plugins: [tailwindcss(), sveltekit()],
 	// Ensure Buffer / global are polyfilled for @atproto/api in the browser
 	define: {
-		global: 'globalThis'
+		global: 'globalThis',
+		__WEB_VERSION__: JSON.stringify(webPkg.version),
+		__CLI_VERSION__: JSON.stringify(cliPkg.version)
 	},
 	optimizeDeps: {
 		include: ['@atproto/api', '@atproto/common-web']