diff --git a/frontend/src/app.d.ts b/frontend/src/app.d.ts
index f59b884..54aac2e 100644
--- a/frontend/src/app.d.ts
+++ b/frontend/src/app.d.ts
@@ -6,7 +6,15 @@ declare global {
 		// interface Locals {}
 		// interface PageData {}
 		// interface Platform {}
+
+		interface Route {
+			name: string;
+			duration: number;
+			image: string;
+		}
 	}
 }
 
-export {};
+export {
+	Route
+};
diff --git a/frontend/src/routes/components/BottomAppBar.svelte b/frontend/src/lib/components/BottomAppBar.svelte
similarity index 100%
rename from frontend/src/routes/components/BottomAppBar.svelte
rename to frontend/src/lib/components/BottomAppBar.svelte
diff --git a/frontend/src/lib/components/Header.svelte b/frontend/src/lib/components/Header.svelte
new file mode 100644
index 0000000..aee47e6
--- /dev/null
+++ b/frontend/src/lib/components/Header.svelte
@@ -0,0 +1,3 @@
+<div>
+    <img src='/images/white-back-arrow.png' alt=''>
+</div>
\ No newline at end of file
diff --git a/frontend/src/routes/components/Path.svelte b/frontend/src/lib/components/Path.svelte
similarity index 94%
rename from frontend/src/routes/components/Path.svelte
rename to frontend/src/lib/components/Path.svelte
index 625d90e..5cf2c9c 100644
--- a/frontend/src/routes/components/Path.svelte
+++ b/frontend/src/lib/components/Path.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	export let type: string;
 	export let color: string;
-	export const path = '/path'
+	export const path = `/paths/${type}`;
 </script>
 
-<a href='{path}' class="route-card" >
+<a href={path} class="route-card">
 	<div class="route-card-left" style="background-color: {color}">
 		<img src="/images/app-bar-logo.png" alt="logo" />
 	</div>
diff --git a/frontend/src/routes/components/Splash.svelte b/frontend/src/lib/components/Splash.svelte
similarity index 100%
rename from frontend/src/routes/components/Splash.svelte
rename to frontend/src/lib/components/Splash.svelte
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 8c0e0c8..053544f 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,5 +1,5 @@
 <script>
-	import BottomAppBar from './components/BottomAppBar.svelte';
+	import BottomAppBar from '$lib/components/BottomAppBar.svelte';
 </script>
 <slot></slot>
 <footer>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index fe5da99..3c4b36c 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,7 +1,7 @@
 <script>
-	import BottomAppBar from './components/BottomAppBar.svelte';
-	import Path from './components/Path.svelte';
-	import Splash from './components/Splash.svelte';
+	import BottomAppBar from '$lib/components/BottomAppBar.svelte';
+	import Path from '$lib/components/Path.svelte';
+	import Splash from '$lib/components/Splash.svelte';
 </script>
 
 <Splash></Splash>
diff --git a/frontend/src/routes/path/+page.svelte b/frontend/src/routes/path/+page.svelte
deleted file mode 100644
index 3dd577e..0000000
--- a/frontend/src/routes/path/+page.svelte
+++ /dev/null
@@ -1 +0,0 @@
-Simple Path
\ No newline at end of file
diff --git a/frontend/src/routes/paths/+page.svelte b/frontend/src/routes/paths/+page.svelte
deleted file mode 100644
index 122cf9e..0000000
--- a/frontend/src/routes/paths/+page.svelte
+++ /dev/null
@@ -1 +0,0 @@
-Route Page
\ No newline at end of file
diff --git a/frontend/src/routes/paths/[slug]/+layout.svelte b/frontend/src/routes/paths/[slug]/+layout.svelte
new file mode 100644
index 0000000..79b5e8e
--- /dev/null
+++ b/frontend/src/routes/paths/[slug]/+layout.svelte
@@ -0,0 +1,6 @@
+<script>
+    import Header from "$lib/components/Header.svelte";
+</script>
+
+<Header></Header>
+<slot></slot>
\ No newline at end of file
diff --git a/frontend/src/routes/paths/[slug]/+page.server.ts b/frontend/src/routes/paths/[slug]/+page.server.ts
new file mode 100644
index 0000000..1e4227c
--- /dev/null
+++ b/frontend/src/routes/paths/[slug]/+page.server.ts
@@ -0,0 +1,14 @@
+import { error } from "@sveltejs/kit";
+
+export const prerender = false;
+
+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}
+        ]
+    }
+}
diff --git a/frontend/src/routes/paths/[slug]/+page.svelte b/frontend/src/routes/paths/[slug]/+page.svelte
new file mode 100644
index 0000000..2f8112e
--- /dev/null
+++ b/frontend/src/routes/paths/[slug]/+page.svelte
@@ -0,0 +1,3 @@
+<script lang="ts">
+	export let data;
+</script>
\ No newline at end of file