diff --git a/frontend/src/lib/components/Route.svelte b/frontend/src/lib/components/Route.svelte
index 229932c..171bc20 100644
--- a/frontend/src/lib/components/Route.svelte
+++ b/frontend/src/lib/components/Route.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
+	import {PUBLIC_BACKEND_URL} from '$env/static/public'
+
 	export let route: App.Route;
 </script>
 
 <a href="/routes/{route.id}">
-	<div id="image" style="background-image: url(/images/test-1.jpg" />
+	<div id="image" style:background-image="url({route.cover})" />
 	<div id='path-holder'>
-		<div style='font-size: 20px;'>Percorso</div>
 		<p class='path-name'>{route.title_it}</p>
 	</div>
 	<div id='duration-holder'>
@@ -21,7 +22,7 @@
 		display: block;
 		box-shadow: 0 0 50px #ccc;
 		border-radius: 5px;
-		width: calc((100% - 50px) / 2);
+		width: calc((100% - 50px));
 		font-size: 18px;
 	}
 
@@ -59,10 +60,14 @@
 		padding-top: 2px;
 		padding-bottom: 2px;
 		font-weight: bold;
-		font-size: 22px;
+		font-size: 1em;
+		line-height: 1em;
+		text-overflow: ellipsis;
+		overflow: hidden;
 	}
 
 	.path-name {
 		view-transition-name: title;
+		max-height: 2em;
 	}
 </style>