diff --git a/components/src/ChartList/ChartList.stories.svelte b/components/src/ChartList/ChartList.stories.svelte
index c85ca2aa..78d0c4fc 100644
--- a/components/src/ChartList/ChartList.stories.svelte
+++ b/components/src/ChartList/ChartList.stories.svelte
@@ -1,7 +1,7 @@
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import { within, expect } from 'storybook/test';
-	import { asset } from '$app/paths';
+	import { resolve } from '$app/paths';
 
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
@@ -31,20 +31,18 @@
 			expect(titleEl).toHaveTextContent('Grafiken für p110: Wie sieht der Wald von morgen aus?');
 		});
 
-		await step('All chart list items render as links', async () => {
+		await step('All chart list items render as links using project-relative URLs', async () => {
 			testCharts.forEach((c) => {
 				const el = canvas.getByText(c.title);
-				expect(el).toBeTruthy();
-				expect(el.getAttribute('href')).toBe(
-					`https://static.datenhub.net/apps/p110_wald-klimawandel/main/${c.slug}`
-				);
+				expect(el).toBeInstanceOf(HTMLAnchorElement);
+				expect(el.getAttribute('href')).toBe(resolve('/' + c.slug));
 			});
 		});
 
 		await step('Embed URLs render', async () => {
 			testCharts.forEach((c) => {
 				const el = canvas.getByDisplayValue(
-					`https://static.datenhub.net/apps/p110_wald-klimawandel/main/${c.slug}`
+					`https://static.datenhub.net/apps/p110_wald-klimawandel/main/${c.slug}.html`
 				);
 				expect(el).toBeTruthy();
 			});
@@ -69,14 +67,14 @@
 		await step('All chart list items render as links using project-relative URLs', async () => {
 			testCharts.forEach((c) => {
 				const el = canvas.getByText(c.title);
-				expect(el).toBeTruthy();
-				expect(el.getAttribute('href')).toBe(asset(c.slug));
+				expect(el).toBeInstanceOf(HTMLAnchorElement);
+				expect(el.getAttribute('href')).toBe(resolve('/' + c.slug));
 			});
 		});
 
 		await step('Embed paths render using project-relative URLs', async () => {
 			testCharts.forEach((c) => {
-				const el = canvas.getByDisplayValue(asset(c.slug));
+				const el = canvas.getByDisplayValue(resolve('/' + c.slug));
 				expect(el).toBeTruthy();
 			});
 		});
diff --git a/components/src/ChartList/ChartList.svelte b/components/src/ChartList/ChartList.svelte
index fd188c40..fdd7254a 100644
--- a/components/src/ChartList/ChartList.svelte
+++ b/components/src/ChartList/ChartList.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { dev } from '$app/environment';
-	import { asset } from '$app/paths';
+	import { resolve } from '$app/paths';
+	import type { RouteId } from '$app/types';
 
 	type ProjectPrefix = 'p' | 't';
 	type ProjectIdentifier = `${ProjectPrefix}${number}: ${string}`;
@@ -30,14 +31,14 @@
 				</thead>
 				<tbody>
 					{#each charts as chart}
-						{@const url = baseUrl ? `${baseUrl}/${chart.slug}` : asset(chart.slug)}
-						{@const urlPostfixed = `${url}${dev ? '' : '.html'}`}
+						{@const route = `/${chart.slug}/` as RouteId}
+						{@const fullUrl = baseUrl ? `${baseUrl}/${chart.slug}.html` : resolve(route)}
 						<tr>
 							<td>
-								<a href={urlPostfixed}>{chart.title}</a>
+								<a href={dev ? resolve(route) : fullUrl}>{chart.title}</a>
 							</td>
 							<td>
-								<input type="text" value={urlPostfixed} />
+								<input type="text" value={fullUrl} />
 							</td>
 						</tr>
 					{/each}