diff --git a/package.json b/package.json
index aeabb2af..f10ee641 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
 		"@fontsource/roboto": "^5.2.10",
 		"@fontsource/spectral": "^5.2.8",
 		"@lucide/svelte": "^1.7.0",
-		"@maiertech/sveltekit-helpers": "^0.48.3",
+		"@maiertech/sveltekit-helpers": "^0.49.0",
 		"@playwright/test": "^1.58.2",
 		"@stackblitz/sdk": "^1.11.0",
 		"@sveltejs/adapter-node": "^5.5.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c5ed791d..14095561 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,8 +30,8 @@ importers:
         specifier: ^1.7.0
         version: 1.7.0(svelte@5.55.0)
       '@maiertech/sveltekit-helpers':
-        specifier: ^0.48.3
-        version: 0.48.3(@lucide/svelte@1.7.0(svelte@5.55.0))(@sveltejs/kit@2.55.0(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.55.0)(vite@7.3.1(@types/node@25.5.0)(jiti@2.6.1)(lightningcss@1.32.0)(yaml@2.8.3)))(svelte@5.55.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.5.0)(jiti@2.6.1)(lightningcss@1.32.0)(yaml@2.8.3)))(svelte@5.55.0)(tailwindcss@4.2.2)(zod@4.3.6)
+        specifier: ^0.49.0
+        version: 0.49.0(@lucide/svelte@1.7.0(svelte@5.55.0))(@sveltejs/kit@2.55.0(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.55.0)(vite@7.3.1(@types/node@25.5.0)(jiti@2.6.1)(lightningcss@1.32.0)(yaml@2.8.3)))(svelte@5.55.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.5.0)(jiti@2.6.1)(lightningcss@1.32.0)(yaml@2.8.3)))(svelte@5.55.0)(tailwindcss@4.2.2)(zod@4.3.6)
       '@playwright/test':
         specifier: ^1.58.2
         version: 1.58.2
@@ -706,8 +706,8 @@ packages:
     peerDependencies:
       svelte: ^5
 
-  '@maiertech/sveltekit-helpers@0.48.3':
-    resolution: {integrity: sha512-HnswJ80ixu+0LqXf8EWz33a265OxvJ8Df/O7LVjGdMar97Z5v7Ni+PI5cPqc8p0v0nsop2nXx5SjRO5mxsncVg==, tarball: https://npm.pkg.github.com/download/@maiertech/sveltekit-helpers/0.48.3/a319c84624382080ee9fe3d3757b3d16bab0e500}
+  '@maiertech/sveltekit-helpers@0.49.0':
+    resolution: {integrity: sha512-QCELgYvntS6cUykrePcqpzkJx/2BzR0Jl8SxTiO2C55z74BBoTuQglBSYLOh7Ygu1uc8uVuXTkC4+bfp2IUl3Q==, tarball: https://npm.pkg.github.com/download/@maiertech/sveltekit-helpers/0.49.0/c6dbe1dfc1a5ef2411129583420fc441ba2c2cf2}
     peerDependencies:
       '@lucide/svelte': ^1.7.0
       '@sveltejs/kit': ^2.55.0
@@ -2614,7 +2614,7 @@ snapshots:
     dependencies:
       svelte: 5.55.0
 
-  '@maiertech/sveltekit-helpers@0.48.3(@lucide/svelte@1.7.0(svelte@5.55.0))(@sveltejs/kit@2.55.0(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.55.0)(vite@7.3.1(@types/node@25.5.0)(jiti@2.6.1)(lightningcss@1.32.0)(yaml@2.8.3)))(svelte@5.55.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.5.0)(jiti@2.6.1)(lightningcss@1.32.0)(yaml@2.8.3)))(svelte@5.55.0)(tailwindcss@4.2.2)(zod@4.3.6)':
+  '@maiertech/sveltekit-helpers@0.49.0(@lucide/svelte@1.7.0(svelte@5.55.0))(@sveltejs/kit@2.55.0(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.55.0)(vite@7.3.1(@types/node@25.5.0)(jiti@2.6.1)(lightningcss@1.32.0)(yaml@2.8.3)))(svelte@5.55.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.5.0)(jiti@2.6.1)(lightningcss@1.32.0)(yaml@2.8.3)))(svelte@5.55.0)(tailwindcss@4.2.2)(zod@4.3.6)':
     dependencies:
       '@lucide/svelte': 1.7.0(svelte@5.55.0)
       '@sveltejs/kit': 2.55.0(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.55.0)(vite@7.3.1(@types/node@25.5.0)(jiti@2.6.1)(lightningcss@1.32.0)(yaml@2.8.3)))(svelte@5.55.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.5.0)(jiti@2.6.1)(lightningcss@1.32.0)(yaml@2.8.3))
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 03f857ef..89a014f5 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -12,7 +12,7 @@
 <div class="flex flex-wrap gap-6">
 	<div
 		// Not-sidebar (outer): videos & posts.
-		class="@container grow-999 min-inline-3/5"
+		class="@container grow-999 basis-0 min-inline-3/5"
 	>
 		<div class="mb-8 flex flex-wrap gap-6">
 			<h2 class="sr-only">Videos</h2>
diff --git a/src/routes/notes/+layout.server.ts b/src/routes/notes/+layout.server.ts
index 63d694cb..764c7250 100644
--- a/src/routes/notes/+layout.server.ts
+++ b/src/routes/notes/+layout.server.ts
@@ -1,5 +1,6 @@
 import { ORIGIN } from '$env/static/private';
 import { sorted as notes } from '$lib/server/collections/notes.js';
+import { latest as latestVideos } from '$lib/server/collections/videos.js';
 import { error } from '@sveltejs/kit';
 import type { LayoutServerLoad } from './$types';
 
@@ -12,9 +13,12 @@ export const load: LayoutServerLoad = async ({ url }) => {
 		error(404, 'Note not found.');
 	}
 
+	const recommendedVideos = latestVideos.slice(0, 3);
+
 	return {
 		origin: ORIGIN,
 		note,
+		recommendedVideos,
 		seo: {
 			title: note.title,
 			description: note.description,
diff --git a/src/routes/notes/+layout.svelte b/src/routes/notes/+layout.svelte
index 327fb7cf..0793cea5 100644
--- a/src/routes/notes/+layout.svelte
+++ b/src/routes/notes/+layout.svelte
@@ -1,12 +1,31 @@
 <script lang="ts">
-	import { Note, SeoCanonicalUrl } from '@maiertech/sveltekit-helpers';
+	import { NoteHeader, SeoCanonicalUrl, VideoPreview } from '@maiertech/sveltekit-helpers';
 	import type { LayoutProps } from './$types';
+	import { Clock } from '@lucide/svelte';
 
 	let { data, children }: LayoutProps = $props();
 </script>
 
 <SeoCanonicalUrl origin={data.origin} />
 
-<Note value={data.note}>
-	{@render children()}
-</Note>
+<div class="flex flex-wrap gap-10">
+	<div
+		// `basis-0` to prevent `basis-auto`, which resolves to intrinsic width of longest para.
+		class="grow-999 basis-0 min-inline-3/5"
+	>
+		<NoteHeader value={data.note} class="mb-8" />
+		{@render children()}
+
+		<p aria-hidden="true" class="mt-8 text-center text-ink-muted">✦</p>
+	</div>
+
+	<aside class="flex grow basis-2xs flex-col gap-3">
+		<h2 class="flex items-center gap-1 text-ink-muted">
+			<Clock class="size-5" />
+			<span class="text-lg font-semibold">My latest videos</span>
+		</h2>
+		{#each data.recommendedVideos as video (video.id)}
+			<VideoPreview value={video} class="mb-4" showDescription={false} />
+		{/each}
+	</aside>
+</div>