diff --git a/frontend/src/app.d.ts b/frontend/src/app.d.ts
index 54aac2e..da75ba6 100644
--- a/frontend/src/app.d.ts
+++ b/frontend/src/app.d.ts
@@ -8,6 +8,7 @@ declare global {
 		// interface Platform {}
 
 		interface Route {
+			id: number;
 			name: string;
 			duration: number;
 			image: string;
diff --git a/frontend/src/lib/components/Header.svelte b/frontend/src/lib/components/Header.svelte
index 4453ab8..5c6e226 100644
--- a/frontend/src/lib/components/Header.svelte
+++ b/frontend/src/lib/components/Header.svelte
@@ -9,6 +9,8 @@
 
 <style>
     div {
+        color: white;
+        padding: 5px;
         width: 100%;
         display: flex;
         justify-content: space-evenly;
diff --git a/frontend/src/lib/components/Route.svelte b/frontend/src/lib/components/Route.svelte
new file mode 100644
index 0000000..1008c65
--- /dev/null
+++ b/frontend/src/lib/components/Route.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	export let route: App.Route;
+</script>
+
+<a href="/routes/{route.id}"
+	><img src="/images/test-1.jpg" alt="route" />
+	<p>{route.name}</p>
+	{route.duration}
+</a>
+
+<style>
+	a {
+		display: block;
+		box-shadow: 0 0 50px #ccc;
+		border-radius: 30px;
+		padding: 10px;
+		height: 200px;
+        max-width: 150px;
+	}
+	a img {
+		width: 100%;
+		object-fit: cover;
+	}
+</style>
diff --git a/frontend/src/routes/paths/[slug]/+page.server.ts b/frontend/src/routes/paths/[slug]/+page.server.ts
index 1e4227c..e98f730 100644
--- a/frontend/src/routes/paths/[slug]/+page.server.ts
+++ b/frontend/src/routes/paths/[slug]/+page.server.ts
@@ -6,9 +6,9 @@ export async function load({ params }) {
     return {
         title: params.slug,
         routes: [
-            {title: 'Percorso Pianello 1', image: '/images/test-1.jpg', duration: 123123123},
-            {title: 'Percorso Pianello 1', image: '/images/test-1.jpg', duration: 123123123},
-            {title: 'Percorso Pianello 1', image: '/images/test-1.jpg', duration: 123123123}
+            {id: 1, name: 'Percorso Pianello 1', image: '/images/test-1.jpg', duration: 123123123},
+            {id: 2, name: 'Percorso Pianello 2', image: '/images/test-1.jpg', duration: 123123123},
+            {id: 3, name: 'Percorso Pianello 3', image: '/images/test-1.jpg', duration: 123123123}
         ]
     }
 }
diff --git a/frontend/src/routes/paths/[slug]/+page.svelte b/frontend/src/routes/paths/[slug]/+page.svelte
index b7f0042..0e5d095 100644
--- a/frontend/src/routes/paths/[slug]/+page.svelte
+++ b/frontend/src/routes/paths/[slug]/+page.svelte
@@ -1,6 +1,20 @@
 <script lang="ts">
+	import Route from '$lib/components/Route.svelte';
 	import Header from '$lib/components/Header.svelte';
 	export let data;
 </script>
 
-<Header title={data.title}></Header>
\ No newline at end of file
+<Header title={data.title}></Header>
+
+<div>
+{#each data.routes as route}
+	<Route {route}></Route>
+{/each}
+</div>
+
+<style>
+	div {
+		display: flex;
+		flex-wrap: wrap;
+	}
+</style>
\ No newline at end of file