diff --git a/apps/web/e2e/pwa.spec.ts b/apps/web/e2e/pwa.spec.ts
index dd03a27..797b2d6 100644
--- a/apps/web/e2e/pwa.spec.ts
+++ b/apps/web/e2e/pwa.spec.ts
@@ -33,6 +33,24 @@ test('installs the app shell and requests persistent storage', async ({ page })
 	expect(await page.evaluate(() => Reflect.get(globalThis, '__inkfinitePersistRequested'))).toBe(
 		true
 	);
+
+	await page.getByRole('button', { name: 'About Inkfinite' }).click();
+	const displayedVersion = (await page.getByText(/^Version v/).textContent())?.replace(
+		'Version ',
+		''
+	);
+	const cachedVersions = await page.evaluate(async () =>
+		(await caches.keys())
+			.filter((name) => name.startsWith('inkfinite-'))
+			.flatMap((name) => {
+				try {
+					return [JSON.parse(name.slice('inkfinite-'.length)).display as string];
+				} catch {
+					return [];
+				}
+			})
+	);
+	expect(cachedVersions).toContain(displayedVersion);
 });
 
 test('creates, reopens, and exports a board while offline', async ({ editor, page, context }) => {
diff --git a/apps/web/src/lib/docs/DocsShell.svelte b/apps/web/src/lib/docs/DocsShell.svelte
index 56d36d6..417444b 100644
--- a/apps/web/src/lib/docs/DocsShell.svelte
+++ b/apps/web/src/lib/docs/DocsShell.svelte
@@ -6,6 +6,7 @@
 	import DocsPageNavigation from './DocsPageNavigation.svelte';
 	import DocsSeo from './DocsSeo.svelte';
 	import DocsSidebar from './DocsSidebar.svelte';
+	import SiteFooter from './SiteFooter.svelte';
 	import SiteHeader from './SiteHeader.svelte';
 	import DocsToc from './DocsToc.svelte';
 	import { getAdjacentDocs } from './content';
@@ -52,6 +53,8 @@
 			<DocsToc headings={doc.toc} />
 		</aside>
 	</div>
+
+	<SiteFooter />
 </div>
 
 <style>
diff --git a/apps/web/src/lib/docs/SiteFooter.svelte b/apps/web/src/lib/docs/SiteFooter.svelte
new file mode 100644
index 0000000..159b93f
--- /dev/null
+++ b/apps/web/src/lib/docs/SiteFooter.svelte
@@ -0,0 +1,175 @@
+<script lang="ts">
+	import favicon from '$editor/assets/favicon.svg';
+	import { buildCommitUrl, buildVersion } from '$lib/version';
+
+	const year = new Date().getFullYear();
+</script>
+
+<footer class="site-footer" data-pagefind-ignore>
+	<div class="footer-inner">
+		<div class="footer-intro">
+			<div class="footer-brand">
+				<img src={favicon} alt="" />
+				<span>Inkfinite</span>
+			</div>
+			<p>An open-source canvas for drawing, diagramming, and working with coding agents.</p>
+		</div>
+
+		<!-- eslint-disable svelte/no-navigation-without-resolve -->
+		<nav class="footer-links" aria-label="Footer navigation">
+			<section>
+				<h2>Stormlight Labs</h2>
+				<a href="https://stormlightlabs.org">Website</a>
+				<a href="https://github.com/stormlightlabs">GitHub</a>
+			</section>
+			<section>
+				<h2>Follow</h2>
+				<a href="https://bsky.app/profile/stormlightlabs.org">Bluesky</a>
+				<a href="https://x.com/_desertthunder">X / Twitter</a>
+			</section>
+			<section>
+				<h2>Contact</h2>
+				<a href="mailto:info@stormlightlabs.org">info@stormlightlabs.org</a>
+			</section>
+		</nav>
+		<!-- eslint-enable svelte/no-navigation-without-resolve -->
+	</div>
+
+	<div class="footer-meta">
+		<p>© {year} Stormlight Labs · Built with ⚡ in Austin, TX</p>
+		<p>
+			Inkfinite
+			<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+			<a href={buildCommitUrl} target="_blank" rel="noreferrer">
+				{buildVersion.display}
+			</a>
+		</p>
+	</div>
+</footer>
+
+<style>
+	.site-footer {
+		padding: clamp(3rem, 7vw, 5rem) 2rem 1.5rem;
+		border-top: 1px solid var(--docs-border);
+		background: var(--docs-code-surface);
+		color: var(--docs-text-muted);
+	}
+
+	.footer-inner,
+	.footer-meta {
+		max-width: 1376px;
+		margin: 0 auto;
+	}
+
+	.footer-inner {
+		display: grid;
+		grid-template-columns: minmax(15rem, 1.4fr) minmax(26rem, 2fr);
+		gap: clamp(3rem, 8vw, 8rem);
+		padding-bottom: clamp(2.5rem, 6vw, 4rem);
+	}
+
+	.footer-intro {
+		max-width: 28rem;
+	}
+
+	.footer-brand {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		color: var(--docs-text);
+		font-family: var(--docs-font-display);
+		font-size: 1.2rem;
+		font-weight: 650;
+		letter-spacing: -0.02em;
+	}
+
+	.footer-brand img {
+		width: 2.25rem;
+		height: 2.25rem;
+	}
+
+	.footer-intro p {
+		max-width: 38ch;
+		margin: 1.25rem 0 0;
+		font-size: 0.95rem;
+		line-height: 1.65;
+	}
+
+	.footer-links {
+		display: grid;
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+		gap: 2rem;
+	}
+
+	.footer-links section {
+		display: flex;
+		align-items: flex-start;
+		flex-direction: column;
+		gap: 0.7rem;
+	}
+
+	.footer-links h2 {
+		margin: 0 0 0.35rem;
+		color: var(--docs-text);
+		font-family: var(--docs-font-heading);
+		font-size: 0.88rem;
+		font-weight: 650;
+		letter-spacing: 0.01em;
+	}
+
+	.footer-links a {
+		color: var(--docs-text-muted);
+		font-size: 0.88rem;
+		text-decoration: none;
+	}
+
+	.footer-links a:hover {
+		color: var(--docs-accent-text);
+		text-decoration: underline;
+		text-underline-offset: 0.2em;
+	}
+
+	.footer-meta {
+		display: flex;
+		justify-content: space-between;
+		gap: 1rem;
+		padding-top: 1.5rem;
+		border-top: 1px solid color-mix(in srgb, var(--docs-border) 60%, transparent);
+		font: 500 var(--docs-type-xs) / 1.4 var(--docs-font-mono);
+	}
+
+	.footer-meta p {
+		margin: 0;
+	}
+
+	.footer-meta a {
+		font-variant-numeric: tabular-nums;
+	}
+
+	@media (max-width: 820px) {
+		.site-footer {
+			padding-inline: 1.25rem;
+		}
+
+		.footer-inner {
+			grid-template-columns: 1fr;
+			gap: 2.5rem;
+		}
+	}
+
+	@media (max-width: 560px) {
+		.footer-links {
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+			row-gap: 2.5rem;
+		}
+
+		.footer-links section:last-child {
+			grid-column: 1 / -1;
+		}
+
+		.footer-meta {
+			align-items: flex-start;
+			flex-direction: column;
+		}
+	}
+</style>
diff --git a/apps/web/src/lib/version.ts b/apps/web/src/lib/version.ts
new file mode 100644
index 0000000..b31c2c3
--- /dev/null
+++ b/apps/web/src/lib/version.ts
@@ -0,0 +1,39 @@
+import { version as VERSION } from '$app/environment';
+
+const REPOSITORY_URL = 'https://github.com/stormlightlabs/inkfinite';
+
+/** Git-derived version details embedded in each web build. */
+export type BuildVersion = { display: string; commit: string; version: string };
+
+const fallbackVersion: BuildVersion = { display: 'v0.0.0', commit: 'unknown', version: 'v0.0.0' };
+
+function isBuildVersion(value: unknown): value is BuildVersion {
+	if (!value || typeof value !== 'object') return false;
+
+	const candidate = value as Record<string, unknown>;
+	return (
+		typeof candidate.display === 'string' &&
+		typeof candidate.commit === 'string' &&
+		typeof candidate.version === 'string'
+	);
+}
+
+function parseBuildVersion(value: string): BuildVersion {
+	try {
+		const parsed: unknown = JSON.parse(value);
+		if (isBuildVersion(parsed)) return parsed;
+	} catch {
+		// Development and fallback builds can expose an ordinary SvelteKit version string.
+	}
+
+	return fallbackVersion;
+}
+
+/** Version details for the current web build. */
+export const buildVersion = parseBuildVersion(VERSION);
+
+/** Source page for the commit used by the current web build. */
+export const buildCommitUrl =
+	buildVersion.commit === 'unknown'
+		? REPOSITORY_URL
+		: `${REPOSITORY_URL}/commit/${buildVersion.commit}`;
diff --git a/apps/web/src/routes/+page.svelte b/apps/web/src/routes/+page.svelte
index 05b486c..06d149b 100644
--- a/apps/web/src/routes/+page.svelte
+++ b/apps/web/src/routes/+page.svelte
@@ -4,6 +4,7 @@
 	import Seo from '$lib/Seo.svelte';
 	import { site } from '$lib/site';
 	import '$lib/docs/docs.css';
+	import SiteFooter from '$lib/docs/SiteFooter.svelte';
 	import SiteHeader from '$lib/docs/SiteHeader.svelte';
 	import { Icon } from '$ui';
 
@@ -287,6 +288,7 @@
 			</section>
 		</div>
 	</main>
+	<SiteFooter />
 </div>
 
 <style>
diff --git a/apps/web/src/routes/app/+page.svelte b/apps/web/src/routes/app/+page.svelte
index b5f1591..334de46 100644
--- a/apps/web/src/routes/app/+page.svelte
+++ b/apps/web/src/routes/app/+page.svelte
@@ -3,6 +3,7 @@
 	import { createDexiePlatformAdapter } from '$lib/persistence/dexie';
 	import Seo from '$lib/Seo.svelte';
 	import { site } from '$lib/site';
+	import { buildVersion } from '$lib/version';
 
 	const platform = createDexiePlatformAdapter();
 </script>
@@ -10,7 +11,7 @@
 <Seo title="Inkfinite editor" description={site.description} pathname="/app/" index={false} />
 
 <main class="web-editor">
-	<Editor {platform} />
+	<Editor {platform} version={buildVersion.display} />
 </main>
 
 <style>
diff --git a/apps/web/svelte.config.js b/apps/web/svelte.config.js
index 8ba1b21..d2d9c47 100644
--- a/apps/web/svelte.config.js
+++ b/apps/web/svelte.config.js
@@ -1,8 +1,36 @@
 import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import { execFileSync } from 'node:child_process';
 import { mdsvex } from 'mdsvex';
 import { extractTableOfContents } from './src/lib/docs/content/table-of-contents.js';
 
+const DEFAULT_VERSION = '0.0.0';
+const buildVersion = getBuildVersion();
+
+function getBuildVersion() {
+	const tag = gitOutput(['describe', '--tags', '--abbrev=0', '--match', 'v[0-9]*']);
+	const version = tag ?? `v${DEFAULT_VERSION}`;
+	const count =
+		gitOutput(
+			tag ? ['rev-list', '--count', `${tag}..HEAD`] : ['rev-list', '--count', 'HEAD']
+		) ?? '0';
+	const commit = gitOutput(['rev-parse', 'HEAD']) ?? 'unknown';
+	const shortCommit = gitOutput(['rev-parse', '--short', 'HEAD']) ?? 'unknown';
+	const display = count === '0' ? version : `${version}-${count}+g${shortCommit}`;
+	return { display, commit, version };
+}
+
+function gitOutput(args) {
+	try {
+		return execFileSync('git', args, {
+			encoding: 'utf8',
+			stdio: ['ignore', 'pipe', 'ignore']
+		}).trim();
+	} catch {
+		return null;
+	}
+}
+
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	extensions: ['.svelte', '.svx', '.md'],
@@ -13,6 +41,7 @@ const config = {
 	kit: {
 		adapter: adapter(),
 		prerender: { entries: ['*'] },
+		version: { name: JSON.stringify(buildVersion) },
 		alias: {
 			$editor: '../../packages/ui/src/lib/editor',
 			$ui: '../../packages/ui/src/lib/index.ts',
diff --git a/packages/ui/src/lib/editor/Editor.svelte b/packages/ui/src/lib/editor/Editor.svelte
index dfa246d..e8255c1 100644
--- a/packages/ui/src/lib/editor/Editor.svelte
+++ b/packages/ui/src/lib/editor/Editor.svelte
@@ -2,8 +2,9 @@
 	import Canvas from './canvas/Canvas.svelte';
 	import type { EditorPlatformAdapter } from './platform';
 
-	/** Services supplied by the web or desktop application root. */
-	let { platform }: { platform: EditorPlatformAdapter } = $props();
+	/** Services and build metadata supplied by the web or desktop application root. */
+	let { platform, version = 'v0.0.0' }: { platform: EditorPlatformAdapter; version?: string } =
+		$props();
 </script>
 
-<Canvas {platform} />
+<Canvas {platform} {version} />
diff --git a/packages/ui/src/lib/editor/canvas/Canvas.svelte b/packages/ui/src/lib/editor/canvas/Canvas.svelte
index c2ca173..d0bb15c 100644
--- a/packages/ui/src/lib/editor/canvas/Canvas.svelte
+++ b/packages/ui/src/lib/editor/canvas/Canvas.svelte
@@ -35,7 +35,10 @@
 	import NavigationControls from './NavigationControls.svelte';
 	import { handleCanvasDrop } from './drop-handler';
 
-	let { platform: platformAdapter }: { platform: EditorPlatformAdapter } = $props();
+	let {
+		platform: platformAdapter,
+		version = 'v0.0.0'
+	}: { platform: EditorPlatformAdapter; version?: string } = $props();
 
 	let canvasEl = $state<HTMLCanvasElement | null>(null);
 	let replaceImageInput = $state<HTMLInputElement | null>(null);
@@ -931,6 +934,7 @@
 		viewport={c.viewport()}
 		platform={platformKind}
 		draft={c.desktop.isDraft}
+		{version}
 		onOpenBrowser={c.fileBrowser.handleOpen}
 		onShortcutsClick={() => (shortcutsOpen = true)}
 		onHistoryClick={c.history.handleClick} />
diff --git a/packages/ui/src/lib/editor/components/StatusBar.svelte b/packages/ui/src/lib/editor/components/StatusBar.svelte
index 84403d3..f1db62c 100644
--- a/packages/ui/src/lib/editor/components/StatusBar.svelte
+++ b/packages/ui/src/lib/editor/components/StatusBar.svelte
@@ -17,6 +17,7 @@
 		viewport?: Viewport;
 		platform?: EditorPlatform;
 		draft?: boolean;
+		version?: string;
 		onOpenBrowser?: () => void;
 		onShortcutsClick?: () => void;
 		onHistoryClick?: () => void;
@@ -30,6 +31,7 @@
 		viewport = { width: 1, height: 1 },
 		platform = 'web',
 		draft = false,
+		version = 'v0.0.0',
 		onOpenBrowser,
 		onShortcutsClick,
 		onHistoryClick
@@ -337,6 +339,7 @@
 			Inkfinite is an open canvas for sketching, diagramming, and working with coding agents.
 			The web and desktop apps share the same editor and document model.
 		</p>
+		<p class="about__version">Version {version}</p>
 		<div class="about__section">
 			<h2>Quick Tips</h2>
 			<ul>
@@ -552,6 +555,13 @@
 		margin-top: 0;
 	}
 
+	.about__version {
+		color: var(--ink-text-muted);
+		font-family: var(--ink-font-mono);
+		font-size: var(--ink-type-sm);
+		font-variant-numeric: tabular-nums;
+	}
+
 	.about__section {
 		margin-top: var(--ink-space-5);
 	}
diff --git a/packages/ui/src/lib/editor/components/__tests__/StatusBar.svelte.test.ts b/packages/ui/src/lib/editor/components/__tests__/StatusBar.svelte.test.ts
index ab988a8..2b99e0e 100644
--- a/packages/ui/src/lib/editor/components/__tests__/StatusBar.svelte.test.ts
+++ b/packages/ui/src/lib/editor/components/__tests__/StatusBar.svelte.test.ts
@@ -114,6 +114,7 @@ describe('StatusBar', () => {
 				pendingWrites: 0
 			}),
 			snap: createSnapStore(),
+			version: 'v1.2.3-4+gabc1234',
 			onOpenBrowser,
 			onHistoryClick
 		});
@@ -126,6 +127,7 @@ describe('StatusBar', () => {
 		expect(onHistoryClick).toHaveBeenCalledOnce();
 		const dialog = screen.getByRole('dialog', { name: 'About Inkfinite' });
 		await expect.element(dialog).toBeInTheDocument();
+		await expect.element(screen.getByText('Version v1.2.3-4+gabc1234')).toBeInTheDocument();
 		expect(window.getComputedStyle(dialog.element()).borderRadius).toBe('16px');
 	});
 });