diff --git a/assets/css/page/planning.css b/assets/css/page/planning.css
index 3a0bf58..47e16cb 100644
--- a/assets/css/page/planning.css
+++ b/assets/css/page/planning.css
@@ -122,6 +122,9 @@ main {
 
 @media (max-width: 700px) {
 
+	.planning-container {
+		font-size: 2vh;
+	}
 	.column {
 		width: 50%;
 	}
@@ -179,4 +182,8 @@ main {
 	.column div.day:after {
 		content: none;
 	}
+
+	.column div.hour:after {
+		content: "h";
+	}
 }
\ No newline at end of file
diff --git a/assets/css/page/stats.css b/assets/css/page/stats.css
index bd84ecb..a712734 100644
--- a/assets/css/page/stats.css
+++ b/assets/css/page/stats.css
@@ -25,8 +25,6 @@ table.out {
 
 span.box-point {
 	padding: 0;
-	margin: 0;
-	margin-top: 10px;
 	display: block;
 	width: 80%;
 	height: 70px;
@@ -34,8 +32,7 @@ span.box-point {
 	border-radius: 20px;
 	color: white;
 	border: 3px solid white;
-	margin-left: auto;
-	margin-right: auto;
+	margin: 10px auto 0;
 }
 
 table.in {
@@ -56,7 +53,12 @@ table.in .right {
     background-color: white;
     color: black;
     padding: 20px;
-    margin: 30px;
-    margin-top: 0;
-    font-size: 1.5rem;
+	margin: 0 3.5vw 3.5vw;
+	font-size: 1.5rem;
+}
+
+@media (max-width: 700px) {
+	table.out {
+		padding: 0;
+	}
 }
\ No newline at end of file
diff --git a/assets/css/page/vacances.css b/assets/css/page/vacances.css
index 38f073c..8c96746 100644
--- a/assets/css/page/vacances.css
+++ b/assets/css/page/vacances.css
@@ -8,8 +8,7 @@ section {
 	background-color: rgba(255,255,255,0.5);
 	aspect-ratio: 425/600;
 	width: 43vw;
-	margin: 1vw;
-	margin-top: 60px;
+	margin: 60px auto 1vw;
 }
 
 img {
diff --git a/planning.php b/planning.php
index 7cf9ac7..5dbfbef 100755
--- a/planning.php
+++ b/planning.php
@@ -98,7 +98,7 @@ if(isset($_GET['planning']) AND !empty(['planning']))
                     $req1->execute(array($planning));
                     while($r1 = $req1->fetch()) {
                         ?>
-                            <div class="class" style="background-color: <?= $r1['color'] ?>; height: <?= $r1['length'] ?>vh;">
+                            <div class="class" data-description="<?=$r1['description']?>" style="background-color: <?= $r1['color'] ?>; height: <?= $r1['length'] ?>vh;">
                                 <?= $r1['title'] ?>
                             </div>
                         <?php
@@ -210,6 +210,25 @@ if(isset($_GET['planning']) AND !empty(['planning']))
 
         </div>
 
+        <!-- needed for showing custom alert -->
+        <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
+        <script>
+
+            const pln_cases = document.getElementsByClassName("class");
+            for (let i = 0; i < pln_cases.length; i++) {
+                let current = pln_cases[i];
+
+                current.addEventListener("click", (e) => {
+                    Swal.fire({
+                        title: '<strong id="modal-title">' + current.innerHTML.trim() + '</strong>',
+                        html: current.dataset.description
+                    })
+                })
+            }
+
+        </script>
+
     <?php } else { ?>
 
         <section>