diff --git a/frontend/src/lib/components/Route.svelte b/frontend/src/lib/components/Route.svelte
index b2b23c0..e7ddd16 100644
--- a/frontend/src/lib/components/Route.svelte
+++ b/frontend/src/lib/components/Route.svelte
@@ -6,11 +6,11 @@
 	<div id="image" style="background-image: url(/images/test-1.jpg" />
 	<div id='path-holder'>
 		<div style='font-size: 20px;'>Percorso</div>
-		<p>{route.name}</p>
+		<p>{route.title_it}</p>
 	</div>
 	<div id='duration-holder'>
-		<div style='font-size: 15px;'>Durata</div>
-		<p id="duration">{Math.floor(Number(route.duration) / 60)}'</p>
+		<div style='font-size: 15px;'>Dislivello</div>
+		<p id="duration">{route.elevation_gain}</p>
 	</div>
 </a>
 
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index d4174bf..079a159 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -2,15 +2,22 @@
 	import BottomAppBar from '$lib/components/BottomAppBar.svelte';
 	import Path from '$lib/components/Path.svelte';
 	import Splash from '$lib/components/Splash.svelte';
+	import { onMount } from 'svelte';
+	import {getRouteCategories} from '$lib/repo';
+	
+	let categories = [];
+	onMount(async () => {
+		categories = await getRouteCategories();
+	})
 </script>
 
 <Splash />
 <main>
 	<div id="welcome-message">Benvenuti a <span class="bold">Pianello Val Tidone</span></div>
 	<div id="route-cards">
-		<Path color="#de0e1b" type="naturalistici" />
-		<Path color="#f6ae04" type="storici" />
-		<Path color="#213c8b" type="tradizionalistici" />
+		{#each categories as category}
+			<Path color="#de0e1b" name="{category.name_it}" id="{category.id}" />
+		{/each}
 	</div>
 </main>