diff --git a/src/app.scss b/src/app.scss
index da88763..8676ba5 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -75,4 +75,8 @@ body {
 .bg-blur {
     background-color: rgba(0, 0, 0, 0.5);
     backdrop-filter: blur(10px);
+}
+
+body {
+    overflow-x: hidden;
 }
\ No newline at end of file
diff --git a/src/lib/components/BlurredButton.svelte b/src/lib/components/BlurredButton.svelte
index a506286..c41e2a5 100644
--- a/src/lib/components/BlurredButton.svelte
+++ b/src/lib/components/BlurredButton.svelte
@@ -10,8 +10,8 @@
 		background-color: transparent;
 		color: white;
 		box-shadow:
-			inset 0px 0px 2px 2px var(--btn-color),
-			0px 0px 2px 2px var(--btn-color);
+			inset 0px 0px 4px 2px var(--btn-color),
+			0px 0px 4px 2px var(--btn-color);
 		border: 1px solid var(--btn-color);
 		transition: all 0.3s ease;
 	}
diff --git a/src/lib/components/BlurredIconButton.svelte b/src/lib/components/BlurredIconButton.svelte
index 13dcbe7..08961d4 100644
--- a/src/lib/components/BlurredIconButton.svelte
+++ b/src/lib/components/BlurredIconButton.svelte
@@ -14,11 +14,11 @@
 
 <style>
 	.btn-blur {
-		background-color: transparent;
+		background-color: black;
 		color: white;
 		box-shadow:
-			inset 0px 0px 2px 2px var(--btn-color),
-			0px 0px 2px 2px var(--btn-color);
+			inset 0px 0px 4px 2px var(--btn-color),
+			0px 0px 4px 2px var(--btn-color);
 		border: 1px solid var(--btn-color);
 		transition: all 0.3s ease;
 	}
diff --git a/src/lib/components/DataProject.svelte b/src/lib/components/DataProject.svelte
index 6f21cb7..054035f 100644
--- a/src/lib/components/DataProject.svelte
+++ b/src/lib/components/DataProject.svelte
@@ -136,12 +136,12 @@
 		<div class="row">
 			<div class="col-md-3 offset-md-3 col-sm-12">
 				<div>
-					<h5 class="text-uppercase">{project.titolo}</h5>
+					<h5 class="text-uppercase mb-1">{project.titolo}</h5>
 					{#if project.studenti && project.studenti.length > 1}
-						<p class="fs-5 mb-2">Progetto collettivo</p>
+						<p style="margin-bottom: 10px;" class="fs-5">Progetto collettivo</p>
 					{:else if project.studenti}
 						{#each project.studenti as student}
-							<p class="fs-5 mb-2">{student.nome} {student.cognome}</p>
+							<p style="margin-bottom: 10px;" class="fs-5">{student.nome} {student.cognome}</p>
 						{/each}
 					{/if}
 				</div>
@@ -149,7 +149,7 @@
 			</div>
 			<div class="col-md-6 col-sm-12">
 				<div class="d-flex flex-column align-items-start h-100">
-					<p class="fs-5">
+					<p class="fs-6">
 						{project.descrizione}
 					</p>
 					<BlurredButton
diff --git a/src/lib/components/ImageGallery.svelte b/src/lib/components/ImageGallery.svelte
index 7d6d406..e8f016f 100644
--- a/src/lib/components/ImageGallery.svelte
+++ b/src/lib/components/ImageGallery.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { urlFor } from '$lib/sanityClient.js';
 	import { browser } from '$app/environment';
-
+	import BlurredIconButton from './BlurredIconButton.svelte';
 	let isMobile = $state(false);
 
 	$effect(() => {
@@ -100,23 +100,22 @@
 				</div>
 			{/each}
 		</div>
-
-		<button
-			class="btn-slide btn me-2 ms-2 d-flex align-items-center justify-content-center position-absolute top-50 start-0 translate-middle-y gallery-button"
-			style="--hover-color: #{color};"
-			onclick={prevImage}
+		<BlurredIconButton
+			icon="bi bi-arrow-left"
+			{color}
+			onClick={prevImage}
 			disabled={currentIndex === 0}
-		>
-			<i class="bi bi-arrow-left"></i>
-		</button>
-		<button
-			class="btn ms-2 me-2 d-flex align-items-center justify-content-center position-absolute top-50 end-0 translate-middle-y gallery-button"
-			style="--hover-color: #{color};"
-			onclick={nextImage}
+			--btn-color={'#' + color}
+			classes="position-absolute top-50 start-0 translate-middle-y ms-2"
+		/>
+		<BlurredIconButton
+			icon="bi bi-arrow-right"
+			{color}
+			onClick={nextImage}
 			disabled={currentIndex === images.length - 1}
-		>
-			<i class="bi bi-arrow-right"></i>
-		</button>
+			--btn-color={'#' + color}
+			classes="position-absolute top-50 end-0 translate-middle-y me-2"
+		/>
 	{/if}
 </div>
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index bc2fe02..6a7ccc9 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,7 +3,10 @@
 	import Header from '$lib/components/Header.svelte';
 </script>
 
-<div class="container-fluid">
+<div
+	style="min-height: 100vh;"
+	class="container-fluid p-0 p-sm-0 d-flex flex-column justify-content-between"
+>
 	<Header />
 	<slot />
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 6029c5f..bd7a14c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -28,37 +28,18 @@
 	});
 </script>
 
-<div class="container-fluid mt-2" bind:this={firstContainer}>
+<div class="container-fluid mt-2 flex-grow-1" bind:this={firstContainer}>
 	<div class="row justify-content-between">
 		<div class="col-md-7 col-sm-12 home-main">
 			<PortableText value={home.descrizione} />
 		</div>
 		<div class="col-md-4 col-sm-12 mt-2 sidebar">
 			<PortableText value={home.info} />
-			<!--<div class="mb-4">
-				<h6 class="fw-normal">SUPERVISIONE</h6>
-				<p class="mb-0 fw-semibold">Giorgio Uboldi</p>
-				<p class="mb-0 fw-semibold">Marco Luitprandi</p>
-			</div>
-			<div class="mb-4">
-				<h6 class="fw-normal">LAUREA MAGISTRALE</h6>
-				<a href="https://design.unirsm.sm/magistrale/presentazione/" class="fw-semibold fs-5">
-					Interaction & Experience Design
-				</a>
-			</div>
-			<div class="mb-4">
-				<h6 class="fw-normal">UNIVERSITÀ</h6>
-				<a href="https://www.unirsm.sm/" class="fw-semibold fs-5"> Repubblica di San Marino </a>
-			</div>
-			<div class="text-light">
-				<p class="mb-0 fs-6">Design by Alessandra Valentini</p>
-				<p class="mb-0 mt-0 fs-6">Development by Daniele Ciminieri (Calibro)</p>
-			</div>-->
 		</div>
 	</div>
 </div>
 
-<div class="container-fluid mt-4">
+<div class="container-fluid mt-4" id="course-list">
 	{#each corsi as corso, index}
 		<div
 			class="row py-2"
@@ -68,11 +49,15 @@
 			<div class="col-12">
 				<h1 class="d-flex align-items-center gap-3">
 					<a href="{base}/corsi/{corso.slug.current}" class="text-decoration-none text-white">
-						<span class="fw-normal text-uppercase">{corso.titolo}</span>
+						<span
+							class="course-title fs-big fw-normal text-uppercase"
+							style="transition: all 0.3s ease-in-out; --color: {'#' + corso.colore}"
+							>{corso.titolo}</span
+						>
 					</a>
 					<span
 						class="fw-semibold badge rounded-pill text-white fs-6 mt-2"
-						style="box-shadow: inset 0 0 2px 2px {'#' + corso.colore}, 0 0 2px 2px {'#' +
+						style="box-shadow: inset 0 0 4px 2px {'#' + corso.colore}, 0 0 2px 2px {'#' +
 							corso.colore}; 
 						border: 1px solid {'#' + corso.colore}; background-color: {'#' + corso.colore}">{corso.anno}</span
 					>
@@ -111,4 +96,16 @@
 		font-size: 1rem;
 		color: #666666;
 	}
+	.fs-big {
+		font-size: 4rem;
+	}
+	.course-title:hover {
+		filter: blur(2px);
+		color: var(--color);
+	}
+	@media (max-width: 768px) {
+		.fs-big {
+			font-size: 2rem;
+		}
+	}
 </style>
diff --git a/src/routes/corsi/[slug]/+page.svelte b/src/routes/corsi/[slug]/+page.svelte
index 12bcd8e..7ed5821 100644
--- a/src/routes/corsi/[slug]/+page.svelte
+++ b/src/routes/corsi/[slug]/+page.svelte
@@ -3,51 +3,56 @@
 	const { data } = $props();
 </script>
 
-{#if data.corso}
-	<div class="container-fluid mt-1 sticky-top bg-blur">
-		<div class="row">
-			<div class="col-md-12 border-2 border-bottom border-white py-1">
-				<h1 class="d-flex align-items-center gap-3">
-					<span class="fw-normal text-uppercase">{data.corso.titolo}</span>
-					<span
-						class="badge fw-semibold rounded-pill text-white fs-6 mt-0"
-						style="box-shadow: inset 0 0 2px 2px {'#' + data.corso.colore}, 0 0 2px 2px {'#' +
-							data.corso.colore}; 
+<div class="flex-grow-1 d-flex flex-column justify-content-between">
+	{#if data.corso}
+		<div class="container-fluid mt-1 sticky-top bg-blur">
+			<div class="row">
+				<div class="col-md-12 border-2 border-bottom border-white py-1">
+					<h1 class="d-flex align-items-center gap-3">
+						<span class="fw-normal text-uppercase">{data.corso.titolo}</span>
+						<span
+							class="badge fw-semibold rounded-pill text-white fs-6 mt-0"
+							style="box-shadow: inset 0 0 2px 2px {'#' + data.corso.colore}, 0 0 2px 2px {'#' +
+								data.corso.colore}; 
 						border: 1px solid {'#' + data.corso.colore}; background-color: {'#' + data.corso.colore}"
-						>{data.corso.anno}</span
-					>
-				</h1>
-			</div>
-		</div>
-	</div>
-	<div class="container-fluid mt-4">
-		<div class="row">
-			<div class="col-md-7 col-sm-12">
-				<p class="fs-4 fw-semibold">{data.corso.descrizione}</p>
+							>{data.corso.anno}</span
+						>
+					</h1>
+				</div>
 			</div>
 		</div>
-	</div>
-	{#if data.corso.gruppi && data.corso.gruppi.length > 0}
-		<div class="container-fluid mt-4">
+		<div class="container-fluid mt-4 flex-grow-1">
 			<div class="row">
-				<div class="col-12">
-					{#each data.corso.gruppi as gruppo, index}
-						<div
-							class="border-white px-3 py-1 group-item"
-							class:border-top={index !== 0}
-							class:border-bottom={index !== data.corso.gruppi.length - 1}
-							style="--corso-color: #{data.corso.colore};"
-						>
-							<a href="{base}/gruppi/{gruppo.slug.current}" class="text-decoration-none text-white">
-								<p class="fw-normal text-uppercase fw-big my-0">{gruppo.nome}</p>
-							</a>
-						</div>
-					{/each}
+				<div class="col-md-7 col-sm-12">
+					<p class="fs-4 fw-semibold">{data.corso.descrizione}</p>
 				</div>
 			</div>
 		</div>
+		{#if data.corso.gruppi && data.corso.gruppi.length > 0}
+			<div class="container-fluid mt-4">
+				<div class="row">
+					<div class="col-12">
+						{#each data.corso.gruppi as gruppo, index}
+							<div
+								class="border-white px-3 py-1 group-item"
+								class:border-top={index !== 0}
+								class:border-bottom={index !== data.corso.gruppi.length - 1}
+								style="--corso-color: #{data.corso.colore};"
+							>
+								<a
+									href="{base}/gruppi/{gruppo.slug.current}"
+									class="text-decoration-none text-white"
+								>
+									<p class="fw-normal text-uppercase fw-big my-0">{gruppo.nome}</p>
+								</a>
+							</div>
+						{/each}
+					</div>
+				</div>
+			</div>
+		{/if}
 	{/if}
-{/if}
+</div>
 
 <style>
 	.group-item a p {
@@ -60,4 +65,9 @@
 	.fw-big {
 		font-size: 4rem;
 	}
+	@media (max-width: 768px) {
+		.fw-big {
+			font-size: 2rem;
+		}
+	}
 </style>
diff --git a/src/routes/gruppi/[slug]/+page.svelte b/src/routes/gruppi/[slug]/+page.svelte
index c10fa00..bd01142 100644
--- a/src/routes/gruppi/[slug]/+page.svelte
+++ b/src/routes/gruppi/[slug]/+page.svelte
@@ -59,8 +59,8 @@
 					</a>
 					<span
 						class="fw-semibold badge rounded-pill text-white fs-6 mt-0"
-						style="box-shadow: inset 0 0 2px 2px {'#' +
-							data.gruppo.corso.colore}, 0 0 2px 2px {'#' + data.gruppo.corso.colore}; 
+						style="box-shadow: inset 0 0 4px 2px {'#' +
+							data.gruppo.corso.colore}, 0 0 4px 2px {'#' + data.gruppo.corso.colore}; 
 						border: 1px solid {'#' + data.gruppo.corso.colore}; background-color: {'#' +
 							data.gruppo.corso.colore}">{data.gruppo.corso.anno}</span
 					>
@@ -86,7 +86,7 @@
 				<h6 class="text-uppercase">STUDENTI</h6>
 				<ul class="list-unstyled">
 					{#each data.gruppo.studenti as studente}
-						<li class="fs-5 text-uppercase">{studente.nome} {studente.cognome}</li>
+						<li style="font-size: 1.12rem;">{studente.nome} {studente.cognome}</li>
 					{/each}
 				</ul>
 			</div>
@@ -149,4 +149,9 @@
 	/*:global(.btn-blur) {
 		--btn-color: #{data.gruppo.corso.colore};
 	}*/
+	@media (max-width: 768px) {
+		.fs-big {
+			font-size: 3rem;
+		}
+	}
 </style>