diff --git a/website/src/lib/assets/img/routing.png b/website/src/lib/assets/img/routing.png
new file mode 100644
index 00000000..a18b3c4c
Binary files /dev/null and b/website/src/lib/assets/img/routing.png differ
diff --git a/website/src/routes/[...language]/about/+page.svelte b/website/src/routes/[...language]/about/+page.svelte
index 1e0fef93..80c1e292 100644
--- a/website/src/routes/[...language]/about/+page.svelte
+++ b/website/src/routes/[...language]/about/+page.svelte
@@ -15,6 +15,7 @@
 	import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
 	import { currentTool, Tool } from '$lib/stores';
 	import { onDestroy, onMount } from 'svelte';
+	import routingScreenshot from '$lib/assets/img/routing.png?enhanced';
 	import mapboxOutdoorsMap from '$lib/assets/img/mapbox-outdoors.png?enhanced';
 	import mapboxSatelliteMap from '$lib/assets/img/mapbox-satellite.png?enhanced';
 	import ignMap from '$lib/assets/img/ign.png?enhanced';
@@ -75,6 +76,16 @@
 			</div>
 		</div>
 	</div>
+	<div class="relative">
+		<enhanced:img
+			src={routingScreenshot}
+			alt="Screenshot of the gpx.studio map in 3D."
+			class="w-full"
+		/>
+		<div
+			class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-background via-transparent to-background"
+		/>
+	</div>
 	<div class="px-24 w-full flex flex-col items-center">
 		<div class="flex flex-col md:flex-row gap-x-12 gap-y-6 items-center justify-between max-w-5xl">
 			<div class="text-center [&>*>p]:text-muted-foreground">