diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 0aefff6..e80eeab 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -3,7 +3,7 @@
 	// import Splash from '$lib/components/Splash.svelte';
 
 	export let data;
-	let categories = data.categories;
+	let categories: App.Category[] = data.categories;
 </script>
 
 
@@ -14,7 +14,7 @@
 	<div id="welcome-message">Benvenuti a <span class="bold">Pianello Val Tidone</span></div>
 	<div id="route-cards">
 		{#each categories as category}
-			<Path color="#de0e1b" name="{category.name_it}" id="{category.id}" />
+			<Path color={category.color} name="{category.name_it}" id={String(category.id)} />
 		{/each}
 	</div>
 </main>