diff --git a/web/src/markup.css b/web/src/markup.css
index f29e794d1..95dcfa38d 100644
--- a/web/src/markup.css
+++ b/web/src/markup.css
@@ -134,6 +134,14 @@
 		@apply inline-block max-w-full;
 	}
 
+	.markup img {
+		@apply cursor-zoom-in;
+	}
+
+	.markup a img {
+		@apply cursor-auto;
+	}
+
 	.markup table {
 		@apply block w-max max-w-full border-collapse overflow-x-auto;
 	}
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 2171dfc3e..33e0924ba 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -9,6 +9,8 @@
 	import { createNotifications, NOTIFICATIONS_KEY } from "$lib/notifications.svelte";
 	import Footer from "$lib/components/shell/Footer.svelte";
 	import Topbar from "$lib/components/shell/Topbar.svelte";
+	import Lightbox from "$lib/components/ui/Lightbox.svelte";
+	import { lightbox, zoomMarkupImages } from "$lib/lightbox.svelte";
 	import { onMount, setContext, untrack } from "svelte";
 	import "../app.css";
 
@@ -27,6 +29,8 @@
 	// closing the window on commit gives the next navigation its own
 	afterNavigate(endNavigation);
 
+	onMount(zoomMarkupImages);
+
 	onMount(() => {
 		if (page.url.pathname === "/oauth/callback") return;
 		if (!resumed) {
@@ -119,3 +123,10 @@
 		<Footer variant={isMarketingShell ? "full" : "minimal"} />
 	{/if}
 </div>
+
+<Lightbox
+	open={lightbox.open}
+	images={lightbox.images}
+	bind:index={lightbox.index}
+	onClose={() => lightbox.close()}
+/>