diff --git a/frontend/src/routes/routes/[slug]/+page.svelte b/frontend/src/routes/routes/[slug]/+page.svelte
index 7ce9bcc..99dd448 100644
--- a/frontend/src/routes/routes/[slug]/+page.svelte
+++ b/frontend/src/routes/routes/[slug]/+page.svelte
@@ -1,61 +1,63 @@
 <script lang="ts">
-    import Header from '$lib/components/Header.svelte';
-    import Tabs from '$lib/components/Tabs.svelte';
-    import MapTab from '$lib/components/tabs/MapTab.svelte';
-    
-    export let data;
-    let divider;
+	import Header from '$lib/components/Header.svelte';
+	import Tabs from '$lib/components/Tabs.svelte';
+	import { onMount } from 'svelte';
 
-    const mapClick = (evt) => {
-    }
+	export let data: App.Route;
+
+	let divider;
+
+	onMount(async () => {
+		console.log(data);
+	});
+
+	const mapClick = (evt) => {};
 </script>
 
-
 <Header></Header>
-<img src='/images/splash-background.webp' alt='splash'>
+<img src="/images/splash-background.webp" alt="splash" />
 
-<div bind:this={divider} id='divider'>
-    <div id='banner'>
-        <p>Percorso <b>{data.name}</b></p>
-        <p id='duration'>Durata {Math.floor(Number(data.duration) / 60)}'</p>
-    </div>
-    <Tabs on:map-click={mapClick}></Tabs>
+<div bind:this={divider} id="divider">
+	<div id="banner">
+		<p>Percorso <b>{data.name_it}</b></p>
+		<p id="duration">Dislivello {data.elevation_gain}</p>
+	</div>
+	<Tabs on:map-click={mapClick} route={data}></Tabs>
 </div>
 
-
 <style>
-    #divider {
-        background: white;
-        margin-top: 0px;
-        margin-top: 0;
-        transition: transform 400ms;
-        align-self: end;
-    }
+	#divider {
+		background: white;
+		margin-top: 0px;
+		margin-top: 0;
+		transition: transform 400ms;
+		align-self: end;
+	}
 
-    img {
-        width: 100%;
-        height: calc(100% - 10vh - 10px);
-        position: absolute;
-        z-index: -1;
-    }
+	img {
+		width: 100%;
+		height: calc(100% - 10vh - 10px);
+		position: absolute;
+		z-index: -1;
+	}
 
-    #banner {
-        display: flex;
-        padding: 5px;
-        background-color: #de0e1b;
-        color: white;
-        font-size: 1.3em;
-        justify-content: space-evenly;
-        align-items: center;
-        padding: 20px;
-    }
-    #banner p {
-        margin: 0;
-        padding: 0;
-    }
+	#banner {
+		display: flex;
+		padding: 5px;
+		background-color: #de0e1b;
+		color: white;
+		font-size: 1.3em;
+		justify-content: space-evenly;
+		align-items: center;
+		padding: 20px;
+	}
+	#banner p {
+		margin: 0;
+		padding: 0;
+	}
 
-    #banner #duration {
-        font-size: 14px;
-        text-align: rightìì;
-    }
+	#banner #duration {
+		font-size: 14px;
+		text-align: rightìì;
+	}
 </style>
diff --git a/frontend/src/routes/routes/[slug]/+page.ts b/frontend/src/routes/routes/[slug]/+page.ts
new file mode 100644
index 0000000..1821bbc
--- /dev/null
+++ b/frontend/src/routes/routes/[slug]/+page.ts
@@ -0,0 +1,7 @@
+import { getRoute } from '$lib/repo.js';
+import { error } from '@sveltejs/kit';
+
+/** @type {import('./$types').PageLoad} */
+export async function load({ params }) {
+    return await getRoute(params.slug);
+}
\ No newline at end of file