diff --git a/website/src/lib/components/docs/DocsImage.svelte b/website/src/lib/components/docs/DocsImage.svelte
index 3ac2ab45..0aa31f96 100644
--- a/website/src/lib/components/docs/DocsImage.svelte
+++ b/website/src/lib/components/docs/DocsImage.svelte
@@ -1,11 +1,25 @@
 <script lang="ts">
-	export let src;
+	export let img: 'getting-started/interface' | 'tools/routing' | 'tools/split';
 	export let alt: string;
 </script>
 
 <div class="flex flex-col items-center py-6 w-full">
 	<div class="rounded-md overflow-hidden overflow-clip shadow-xl mx-auto">
-		<enhanced:img {src} {alt} class="w-full max-w-3xl" />
+		{#if img === 'getting-started/interface'}
+			<enhanced:img
+				src="/src/lib/assets/img/docs/getting-started/interface.png"
+				{alt}
+				class="w-full max-w-3xl"
+			/>
+		{:else if img === 'tools/routing'}
+			<enhanced:img
+				src="/src/lib/assets/img/docs/tools/routing.png"
+				{alt}
+				class="w-full max-w-3xl"
+			/>
+		{:else if img === 'tools/split'}
+			<enhanced:img src="/src/lib/assets/img/docs/tools/split.png" {alt} class="w-full max-w-3xl" />
+		{/if}
 	</div>
 	<p class="text-center text-sm text-muted-foreground mt-2">{alt}</p>
 </div>
diff --git a/website/src/lib/docs/en/getting-started.mdx b/website/src/lib/docs/en/getting-started.mdx
index 0b305773..f15fda0a 100644
--- a/website/src/lib/docs/en/getting-started.mdx
+++ b/website/src/lib/docs/en/getting-started.mdx
@@ -3,7 +3,6 @@ title: Getting started
 ---
 
 <script lang="ts">
-    import interfaceScreenshot from '$lib/assets/img/docs/getting-started/interface.png?enhanced';
     import DocsImage from '$lib/components/docs/DocsImage.svelte';
 </script>
 
@@ -12,7 +11,7 @@ title: Getting started
 Welcome to the official guide for **gpx.studio**!
 This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
 
-<DocsImage src={interfaceScreenshot} alt="The gpx.studio interface." />
+<DocsImage img="getting-started/interface" alt="The gpx.studio interface." />
 
 As shown in the screenshot above, the interface is divided into four main sections organized around the map. 
 Before we dive into the details of each section, let's have a quick overview of the interface.
diff --git a/website/src/lib/docs/en/map-controls.mdx b/website/src/lib/docs/en/map-controls.mdx
index 4e359d0e..6c6cf9d4 100644
--- a/website/src/lib/docs/en/map-controls.mdx
+++ b/website/src/lib/docs/en/map-controls.mdx
@@ -10,6 +10,9 @@ title: Map controls
 
 # { title }
 
+The map controls are located on the right side of the interface.
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
+
 ### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
 
 The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
diff --git a/website/src/lib/docs/en/toolbar/routing.mdx b/website/src/lib/docs/en/toolbar/routing.mdx
index 113b84b1..92563ce3 100644
--- a/website/src/lib/docs/en/toolbar/routing.mdx
+++ b/website/src/lib/docs/en/toolbar/routing.mdx
@@ -6,7 +6,6 @@ title: Route planning and editing
     import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
     import DocsNote from '$lib/components/docs/DocsNote.svelte';
     import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
-    import routingScreenshot from '$lib/assets/img/docs/tools/routing.png?enhanced';
     import DocsImage from '$lib/components/docs/DocsImage.svelte';
 </script>
 
@@ -62,7 +61,7 @@ This allows the route to be edited at different levels of detail.
 
 Finally, you can delete anchor points by clicking on them and selecting <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Delete</button> from the context menu.
 
-<DocsImage src={routingScreenshot} alt="Anchor points allow you to easily edit a route." />
+<DocsImage img="tools/routing" alt="Anchor points allow you to easily edit a route." />
 
 ## Additional tools
 
diff --git a/website/src/lib/docs/en/toolbar/scissors.mdx b/website/src/lib/docs/en/toolbar/scissors.mdx
index 73f6bd32..28e8f9b0 100644
--- a/website/src/lib/docs/en/toolbar/scissors.mdx
+++ b/website/src/lib/docs/en/toolbar/scissors.mdx
@@ -5,7 +5,6 @@ title: Crop and split
 <script>
     import { ScissorsIcon } from 'lucide-svelte';
     import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
-    import splitScreenshot from '$lib/assets/img/docs/tools/split.png?enhanced';
     import DocsImage from '$lib/components/docs/DocsImage.svelte';
 </script>
 
@@ -30,4 +29,4 @@ Scissors will appear at the cursor position, showing that you can split the trac
 
 You can choose to split the trace into two GPX files, or to keep the split parts in the same file as [tracks or segments](../gpx).
 
-<DocsImage src={splitScreenshot} alt="Hovering over the selected trace turns your cursor into scissors." />
+<DocsImage img="tools/split" alt="Hovering over the selected trace turns your cursor into scissors." />
diff --git a/website/src/lib/utils.ts b/website/src/lib/utils.ts
index 3f534743..386cc55a 100644
--- a/website/src/lib/utils.ts
+++ b/website/src/lib/utils.ts
@@ -26,7 +26,7 @@ type FlyAndScaleParams = {
 
 export const flyAndScale = (
     node: Element,
-    params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
+    params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 50 }
 ): TransitionConfig => {
     const style = getComputedStyle(node);
     const transform = style.transform === "none" ? "" : style.transform;
diff --git a/website/src/routes/[[language]]/+page.svelte b/website/src/routes/[[language]]/+page.svelte
index 7f8ff37d..c356c244 100644
--- a/website/src/routes/[[language]]/+page.svelte
+++ b/website/src/routes/[[language]]/+page.svelte
@@ -22,13 +22,6 @@
 	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/home/routing.png?enhanced';
-	import mapboxOutdoorsMap from '$lib/assets/img/home/mapbox-outdoors.png?enhanced';
-	import mapboxSatelliteMap from '$lib/assets/img/home/mapbox-satellite.png?enhanced';
-	import ignMap from '$lib/assets/img/home/ign.png?enhanced';
-	import cyclosmMap from '$lib/assets/img/home/cyclosm.png?enhanced';
-	import waymarkedMap from '$lib/assets/img/home/waymarked.png?enhanced';
-	import mapScreenshot from '$lib/assets/img/home/map.png?enhanced';
 
 	export let data: {
 		fundingModule: any;
@@ -78,7 +71,7 @@
 		</div>
 		<div class="relative overflow-hidden">
 			<enhanced:img
-				src={routingScreenshot}
+				src="/src/lib/assets/img/home/routing.png"
 				alt="Screenshot of the gpx.studio map in 3D."
 				class="w-full min-w-[1200px] ml-[20%] -translate-x-[20%]"
 			/>
@@ -137,30 +130,34 @@
 				class="relative h-60 xs:h-80 aspect-square rounded-2xl shadow-xl overflow-hidden overflow-clip"
 			>
 				<enhanced:img
-					src={mapboxOutdoorsMap}
+					src="/src/lib/assets/img/home/mapbox-outdoors.png"
 					alt="Mapbox Outdoors map screenshot."
 					class="absolute"
 					style="clip-path: inset(0 50% 50% 0);"
 				/>
 				<enhanced:img
-					src={mapboxSatelliteMap}
+					src="/src/lib/assets/img/home/mapbox-satellite.png"
 					alt="Mapbox Satellite map screenshot."
 					class="absolute"
 					style="clip-path: inset(0 0 50% 50%);"
 				/>
 				<enhanced:img
-					src={ignMap}
+					src="/src/lib/assets/img/home/ign.png"
 					alt="IGN map screenshot."
 					class="absolute"
 					style="clip-path: inset(50% 50% 0 0);"
 				/>
 				<enhanced:img
-					src={cyclosmMap}
+					src="/src/lib/assets/img/home/cyclosm.png"
 					alt="CyclOSM map screenshot."
 					class="absolute"
 					style="clip-path: inset(50% 0 0 50%);"
 				/>
-				<enhanced:img src={waymarkedMap} alt="Waymarked Trails map screenshot." class="absolute" />
+				<enhanced:img
+					src="/src/lib/assets/img/home/waymarked.png"
+					alt="Waymarked Trails map screenshot."
+					class="absolute"
+				/>
 			</div>
 		</div>
 	</div>
@@ -216,7 +213,7 @@
 	<div class="px-12 w-full">
 		<div class="w-full max-w-7xl mx-auto rounded-2xl shadow-xl overflow-hidden overflow-clip">
 			<enhanced:img
-				src={mapScreenshot}
+				src="/src/lib/assets/img/home/map.png"
 				alt="Screenshot of the gpx.studio map in 3D."
 				class="min-w-[800px] ml-[15%] -translate-x-[15%]"
 			/>