diff --git a/src/collections/posts/lastmod.json b/src/collections/posts/lastmod.json
index d1dfdf4a..510bff78 100644
--- a/src/collections/posts/lastmod.json
+++ b/src/collections/posts/lastmod.json
@@ -22,5 +22,6 @@
 	"src/routes/posts/(2025)/dropping-requests-in-sveltekit/+page.md": "2025-11-05T14:06:22.000Z",
 	"src/routes/posts/(2025)/environment-variables-in-sveltekit/+page.md": "2025-11-05T14:06:22.000Z",
 	"src/routes/posts/(2025)/it-aint-easy-to-move-a-side-project-off-big-tech/+page.md": "2025-11-07T20:24:14.000Z",
-	"src/routes/posts/(2025)/managing-environment-variables-with-vercel/+page.md": "2025-11-12T20:58:01.000Z"
+	"src/routes/posts/(2025)/managing-environment-variables-with-vercel/+page.md": "2025-11-12T20:58:01.000Z",
+	"src/routes/posts/(2026)/the-privacy-friendly-video-doorbell-that-failed-in-cold-weather/+page.md": "2026-01-11T14:13:07.000Z"
 }
diff --git a/src/routes/notes/+page@.svelte b/src/routes/notes/+page@.svelte
index ff4ed9ad..cff14c34 100644
--- a/src/routes/notes/+page@.svelte
+++ b/src/routes/notes/+page@.svelte
@@ -1,16 +1,24 @@
 <script lang="ts">
-	import { Ul } from '@maiertech/sveltekit-helpers';
+	import { H1, LinkPreview } from '@maiertech/sveltekit-helpers';
 	import type { PageProps } from './$types';
 
 	let { data }: PageProps = $props();
+
+	const links = $derived.by(() =>
+		data.notes.map((note) => ({
+			href: note.path,
+			title: note.title,
+			description: note.description
+		}))
+	);
 </script>
 
-<h1 class="mb-[clamp(1rem,2vw,1.5rem)] text-4xl font-bold">{data.seo.title}</h1>
+<H1 class="mb-8">{data.seo.title}</H1>
 
-<Ul>
-	{#each data.notes as note (note.path)}
-		<li>
-			<a href={note.path}>{note.title}</a>
-		</li>
-	{/each}
-</Ul>
+<div class="@container">
+	<div class="grid grid-cols-1 gap-5 @lg:grid-cols-2 @4xl:grid-cols-3">
+		{#each links as link (link.href)}
+			<LinkPreview value={link} />
+		{/each}
+	</div>
+</div>
diff --git a/src/routes/posts/+page@.svelte b/src/routes/posts/+page@.svelte
index 187b418a..87f64c63 100644
--- a/src/routes/posts/+page@.svelte
+++ b/src/routes/posts/+page@.svelte
@@ -1,16 +1,24 @@
 <script lang="ts">
-	import { Ul } from '@maiertech/sveltekit-helpers';
+	import { H1, LinkPreview } from '@maiertech/sveltekit-helpers';
 	import type { PageProps } from './$types';
 
 	let { data }: PageProps = $props();
+
+	const links = $derived.by(() =>
+		data.posts.map((post) => ({
+			href: post.path,
+			title: post.title,
+			description: post.description
+		}))
+	);
 </script>
 
-<h1 class="mb-[clamp(1rem,2vw,1.5rem)] text-4xl font-bold">{data.seo.title}</h1>
+<H1 class="mb-8">{data.seo.title}</H1>
 
-<Ul>
-	{#each data.posts as post (post.path)}
-		<li>
-			<a href={post.path}>{post.title}</a>
-		</li>
-	{/each}
-</Ul>
+<div class="@container">
+	<div class="grid grid-cols-1 gap-5 @lg:grid-cols-2 @4xl:grid-cols-3">
+		{#each links as link (link.href)}
+			<LinkPreview value={link} />
+		{/each}
+	</div>
+</div>