diff --git a/frontend/src/lib/components/Route.svelte b/frontend/src/lib/components/Route.svelte
index 9cbf680..b2b23c0 100644
--- a/frontend/src/lib/components/Route.svelte
+++ b/frontend/src/lib/components/Route.svelte
@@ -22,13 +22,12 @@
 		box-shadow: 0 0 50px #ccc;
 		border-radius: 30px;
 		width: calc((100% - 50px) / 2);
-		height: calc(100vh/3 - 10vh );
 		font-size: 18px;
 	}
 
 	#image {
 		width: 100%;
-		height: 150px;
+		height: 140px;
 		object-position: center;
 		background-position: center;
 		object-fit: cover;
diff --git a/frontend/src/lib/components/Tabs.svelte b/frontend/src/lib/components/Tabs.svelte
index a6efa3e..b4b7098 100644
--- a/frontend/src/lib/components/Tabs.svelte
+++ b/frontend/src/lib/components/Tabs.svelte
@@ -2,10 +2,18 @@
 	import InfoTab from './tabs/InfoTab.svelte';
 	import DescTab from './tabs/DescTab.svelte';
 	import MapTab from './tabs/MapTab.svelte';
-	import { createEventDispatcher } from 'svelte';
+	import { createEventDispatcher, onMount } from 'svelte';
+
 	const dispatch = createEventDispatcher();
 
+	let ref;
 	let component = InfoTab;
+	onMount(() => {
+		const gbcr = ref.getBoundingClientRect();
+		console.log(gbcr);
+		ref.style.height = `${gbcr.height}px`;
+	});
+
 	const activeClicked = (evt) => {
 		const clickedTab = evt.target.closest('button');
 
@@ -24,6 +32,7 @@
 				break;
 			case 'map':
 				component = MapTab;
+				requestAnimationFrame()
 				break;
 		}
 
@@ -39,7 +48,7 @@
 		<button id="desc">Descrizione</button>
 		<button id="map">Mappa</button>
 	</div>
-	<div class="tab">
+	<div class="tab" bind:this={ref}>
 		<svelte:component this={component} />
 	</div>
 </div>
@@ -47,7 +56,6 @@
 <style>
 	#container {
 		background-color: white;
-		height: calc(20vh);
 	}
 	#tabs {
 		display: flex;
diff --git a/frontend/src/lib/components/tabs/DescTab.svelte b/frontend/src/lib/components/tabs/DescTab.svelte
index 0091224..0d305b7 100644
--- a/frontend/src/lib/components/tabs/DescTab.svelte
+++ b/frontend/src/lib/components/tabs/DescTab.svelte
@@ -1,3 +1,7 @@
+<script>
+	import { fade } from 'svelte/transition';
+</script>
+
 <div>
 	The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur
 	adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
@@ -11,4 +15,4 @@
 	div {
 		padding: 10px;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/lib/components/tabs/InfoTab.svelte b/frontend/src/lib/components/tabs/InfoTab.svelte
index 94a59a4..a59d3b1 100644
--- a/frontend/src/lib/components/tabs/InfoTab.svelte
+++ b/frontend/src/lib/components/tabs/InfoTab.svelte
@@ -1,6 +1,3 @@
-<script>
-</script>
-
 <div id="grid">
 	<div>
 		<p>Distanza</p>
diff --git a/frontend/src/lib/components/tabs/MapTab.svelte b/frontend/src/lib/components/tabs/MapTab.svelte
index aedc00d..f6af7b7 100644
--- a/frontend/src/lib/components/tabs/MapTab.svelte
+++ b/frontend/src/lib/components/tabs/MapTab.svelte
@@ -87,7 +87,7 @@
 <style>
 	@import 'leaflet/dist/leaflet.css';
 	#map {
-		height: calc(45vh + 60px);
+		height: 100%;
 		z-index: 0;
 	}
 </style>
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index b30e385..6f9e524 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -41,6 +41,9 @@
 <style>
 	main {
 		height: calc(100% - 10vh - 10px);
+		overflow-y: scroll;
+		width: 100%;
+		display: grid;
 	}
 
 	div {
diff --git a/frontend/src/routes/paths/[slug]/+page.svelte b/frontend/src/routes/paths/[slug]/+page.svelte
index 6e89041..cf87e1b 100644
--- a/frontend/src/routes/paths/[slug]/+page.svelte
+++ b/frontend/src/routes/paths/[slug]/+page.svelte
@@ -20,7 +20,6 @@
 		gap: 15px;
 		padding-top: 10px;
 		margin-top: 70px;
-		height: calc(100% - 70px - 10vh);
 		overflow-y: scroll;
 	}
 </style>
diff --git a/frontend/src/routes/routes/[slug]/+page.svelte b/frontend/src/routes/routes/[slug]/+page.svelte
index 95cfa4a..5edae6b 100644
--- a/frontend/src/routes/routes/[slug]/+page.svelte
+++ b/frontend/src/routes/routes/[slug]/+page.svelte
@@ -8,9 +8,9 @@
 
     const mapClick = (evt) => {
         if(evt.detail.component === MapTab)
-            divider.style.transform = "translateY(calc(0vh + 70px))";
+            requestAnimationFrame(() => divider.style.transform = "translateY(-10vh)");
         else
-            divider.style.transform = "translateY(30vh)";
+            requestAnimationFrame(() => divider.style.transform = "translateY(calc(0vh - 70px))");
     }
 </script>
 
@@ -32,13 +32,13 @@
         background: white;
         margin-top: 0px;
         margin-top: 0;
-        transform: translateY(30vh);
         transition: transform 400ms;
+        align-self: end;
     }
 
     img {
         width: 100%;
-        height: calc(100% - 10vh);
+        height: calc(100% - 10vh - 10px);
         position: absolute;
         z-index: -1;
     }