diff --git a/frontend/src/lib/components/Tabs.svelte b/frontend/src/lib/components/Tabs.svelte
index d1135c3..7e5204d 100644
--- a/frontend/src/lib/components/Tabs.svelte
+++ b/frontend/src/lib/components/Tabs.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
-	import InfoTab from "./InfoTab.svelte";
+	import InfoTab from './tabs/InfoTab.svelte';
+	import DescTab from './tabs/DescTab.svelte';
+	import MapTab from './tabs/MapTab.svelte';
 
+	let component = InfoTab;
 	const activeClicked = (evt) => {
 		const clickedTab = evt.target.closest('button');
 
@@ -9,17 +12,31 @@
 		}
 
 		clickedTab.classList.add('active');
+
+		switch (clickedTab.getAttribute('id')) {
+			case 'info':
+				component = InfoTab;
+				break;
+			case 'desc':
+				component = DescTab;
+				break;
+			case 'map':
+				component = MapTab;
+				break;
+		}
 	};
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div id="tabs" on:click={activeClicked}>
-	<button class="active">Info</button>
-	<button>Descrizione</button>
-	<button>Mappa</button>
+	<button id="info" class="active">Info</button>
+	<button id="desc">Descrizione</button>
+	<button id="map">Mappa</button>
+</div>
+<div class="tab">
+	<svelte:component this={component} />
 </div>
-<InfoTab></InfoTab>
 
 <style>
 	#tabs {
@@ -52,6 +69,6 @@
 	.active {
 		color: black !important;
 		font-weight: bold !important;
-        border-bottom: 1px solid black !important;
+		border-bottom: 1px solid black !important;
 	}
 </style>
diff --git a/frontend/src/lib/components/tabs/DescTab.svelte b/frontend/src/lib/components/tabs/DescTab.svelte
new file mode 100644
index 0000000..0091224
--- /dev/null
+++ b/frontend/src/lib/components/tabs/DescTab.svelte
@@ -0,0 +1,14 @@
+<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
+	minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+	Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+	pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+	mollit anim id est laborum."
+</div>
+
+<style>
+	div {
+		padding: 10px;
+	}
+</style>
\ No newline at end of file
diff --git a/frontend/src/lib/components/InfoTab.svelte b/frontend/src/lib/components/tabs/InfoTab.svelte
similarity index 100%
rename from frontend/src/lib/components/InfoTab.svelte
rename to frontend/src/lib/components/tabs/InfoTab.svelte
diff --git a/frontend/src/lib/components/tabs/MapTab.svelte b/frontend/src/lib/components/tabs/MapTab.svelte
new file mode 100644
index 0000000..5fbd89a
--- /dev/null
+++ b/frontend/src/lib/components/tabs/MapTab.svelte
@@ -0,0 +1,8 @@
+<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
+	minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+	Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+	pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+	mollit anim id est laborum."
+</div>
\ No newline at end of file