diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 93d15e8..d4ba00e 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -51,25 +51,30 @@
 		</div>
 	</div>
 </div>
-<div id="comparison" class="hero bg-base-200 min-h-screen">
-	<div class="hero-content text-center">
-		<div class="min-w-screen">
-			<h1 class="text-5xl font-bold">Comparison 📸</h1>
-			<p class="py-6">On the left side, there is "a real screenshot" with an external tool.</p>
-			<p class="py-6">And on the right side, there is "a snap" screenshot via Snap.nvim.</p>
-			<figure class="diff aspect-16/9">
-				<div class="diff-item-1" role="img">
-					<div class="bg-accent grid place-content-center">
-						<img class="object-scale-down" src="/screenshots/screenshot_luadocs.png" alt="Screenshot of Luadocs" />
-					</div>
+<div id="comparison" class="bg-base-200 min-h-screen flex flex-col justify-center">
+	<div class="text-center mb-10">
+		<h1 class="text-5xl font-bold">Comparison 📸</h1>
+		<p class="pt-6">On the left side, there is "a real screenshot" with an external tool.</p>
+		<p class="pt-6">And on the right side, there is "a snap" screenshot via Snap.nvim.</p>
+	</div>
+	<div class="text-center">
+		<figure class="diff aspect-4/3">
+			<div class="diff-item-1" role="img">
+				<div class="bg-accent grid place-content-center object-contain">
+					<img
+						src="/screenshots/screenshot_jsdoc_todo_comment.png"
+						alt="Screenshot of Luadocs"
+					/>
 				</div>
-				<div class="diff-item-2" role="img">
-					<div class="bg-accent grid place-content-center">
-						<img class="object-scale-down" src="/screenshots/snap_luadocs.png" alt="Snap of Luadocs" />
-					</div>
+			</div>
+			<div class="diff-item-2" role="img">
+				<div class="bg-accent grid place-content-center object-contain">
+					<img src="/screenshots/snap_jsdoc_todo_comment.png" alt="Snap of Luadocs" />
 				</div>
-				<div class="diff-resizer"></div>
-			</figure>
+			</div>
+			<div class="diff-resizer"></div>
+		</figure>
+		<div class="text-center">
 			<p>
 				<a href="#get-involved" on:click={handleAnchorClick}
 					><button class="btn btn-secondary mt-5">Get involved</button></a
diff --git a/web/static/screenshots/screenshot_jsdoc_todo_comment.png b/web/static/screenshots/screenshot_jsdoc_todo_comment.png
new file mode 100644
index 0000000..d5fa327
Binary files /dev/null and b/web/static/screenshots/screenshot_jsdoc_todo_comment.png differ
diff --git a/web/static/screenshots/screenshot_luadocs.png b/web/static/screenshots/screenshot_luadocs.png
deleted file mode 100644
index 20d5285..0000000
Binary files a/web/static/screenshots/screenshot_luadocs.png and /dev/null differ
diff --git a/web/static/screenshots/snap_jsdoc_todo_comment.png b/web/static/screenshots/snap_jsdoc_todo_comment.png
new file mode 100644
index 0000000..5e7601c
Binary files /dev/null and b/web/static/screenshots/snap_jsdoc_todo_comment.png differ
diff --git a/web/static/screenshots/snap_luadocs.png b/web/static/screenshots/snap_luadocs.png
deleted file mode 100644
index f68861d..0000000
Binary files a/web/static/screenshots/snap_luadocs.png and /dev/null differ