diff --git a/public/css/standard.css b/public/css/standard.css
index 31ba448..24f208a 100644
--- a/public/css/standard.css
+++ b/public/css/standard.css
@@ -52,7 +52,6 @@
 	--light-element-border-alpha: rgba(230, 230, 230, 0.6);
 	--light-element-border: rgba(230, 230, 230, 0.7);
 	--light-element-border-hover: rgba(230, 230, 230, 0.8);
-	--light-element-modal-background-color: rgba(230, 230, 230,1);/*Obligé de la rajouter sinon les fenetres modales avaient un fond transparent avec le thème light*/
 	--light-border-alpha: rgba(230, 230, 230, 0.6);
 	--light-border: rgba(230, 230, 230, 0.7);
 	--light-border-hover: rgba(230, 230, 230, 0.8);
@@ -284,7 +283,6 @@
 	--caption-background-hover: var(--light-caption-background-hover);
 	--element-background-alpha: var(--light-element-background-alpha);
 	--element-background: var(--light-element-background);
-	--element-modal-background: var(--light-element-modal-background-color);
 	--element-background-hover: var(--light-element-background-hover);
 	--element-border-alpha: var(--light-element-border-alpha);
 	--element-border: var(--light-element-border);
@@ -336,7 +334,6 @@
 	--caption-background-hover: var(--dark-caption-background-hover);
 	--element-background-alpha: var(--dark-element-background-alpha);
 	--element-background: var(--dark-element-background);
-	--element-modal-background: var(--element-background);
 	--element-background-hover: var(--dark-element-background-hover);
 	--element-border-alpha: var(--dark-element-border-alpha);
 	--element-border: var(--dark-element-border);
diff --git a/public/css/style.css b/public/css/style.css
index 1a50939..062187f 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -2261,7 +2261,8 @@ body:not(.singular) .post-header .post-meta>* {
 	height: 100vh;
 	top: 0;
 	left: 0;
-	background-color: rgba(0, 0, 0, .8);
+	background-color: var(--dark-page-color-alpha);
+	cursor: pointer;
 
 	display: none;
 	justify-content: center;
@@ -2273,8 +2274,9 @@ body:not(.singular) .post-header .post-meta>* {
 	min-height: 66%;
 	min-width: 66%;
 	border-radius: 15px;
-	background-color: var(--element-modal-background);
-	box-shadow: 0 0 60px black;
+	background-color: var(--page-color);
+	box-shadow: 0px 5px 20px -2px var(--input-shadow-alpha);
+	cursor: default;
 }
 
 .el-modal > .el-add {
diff --git a/public/img/icons/calandar-icon-100x100.png b/public/img/icons/calandar-icon-dsc.png
similarity index 100%
rename from public/img/icons/calandar-icon-100x100.png
rename to public/img/icons/calandar-icon-dsc.png
diff --git a/public/img/icons/calandar-icon-lsc.png b/public/img/icons/calandar-icon-lsc.png
new file mode 100644
index 0000000..183f372
Binary files /dev/null and b/public/img/icons/calandar-icon-lsc.png differ
diff --git a/public/img/icons/transport-icon-100x100.png b/public/img/icons/transport-icon-dsc.png
similarity index 100%
rename from public/img/icons/transport-icon-100x100.png
rename to public/img/icons/transport-icon-dsc.png
diff --git a/public/img/icons/transport-icon-lsc.png b/public/img/icons/transport-icon-lsc.png
new file mode 100644
index 0000000..3b65a15
Binary files /dev/null and b/public/img/icons/transport-icon-lsc.png differ
diff --git a/public/img/icons/weather-icon-100x100.png b/public/img/icons/weather-icon-dsc.png
similarity index 100%
rename from public/img/icons/weather-icon-100x100.png
rename to public/img/icons/weather-icon-dsc.png
diff --git a/public/img/icons/weather-icon-lsc.png b/public/img/icons/weather-icon-lsc.png
new file mode 100644
index 0000000..0e88628
Binary files /dev/null and b/public/img/icons/weather-icon-lsc.png differ
diff --git a/public/js/app.js b/public/js/app.js
index e4c693a..a84bc54 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -384,22 +384,22 @@ child.push( async function () {
 		}
 	}
 
-} );
-
-let elModalCloses = document.querySelectorAll(".el-modal-close");
-
-elModalCloses.forEach((elModalClose) => {
-	elModalClose.addEventListener('click', () => {
-		document.querySelectorAll('.el-modal-bg').forEach((elModal) => {
-			elModal.style.display = 'none';
-			document.getElementById('site-header').style.display = 'flex';
+	/*TODO: quit when clicking the little 'x' or outside the modal window */
+	let elModalCloses = document.querySelectorAll(".el-modal-close");
+
+	elModalCloses.forEach((elModalClose) => {
+		elModalClose.addEventListener('click', () => {
+			document.querySelectorAll('.el-modal-bg').forEach((elModal) => {
+				elModal.style.display = 'none';
+				document.getElementById('site-header').style.display = 'flex';
+			});
 		});
 	});
-});
 
-document.getElementById("el-utility-edt").onclick = () => {
-	document.getElementById("el-modal-edt").style.display = "flex";
-	document.getElementById('site-header').style.display = 'none';
-};
+	document.getElementById("el-utility-edt").onclick = () => {
+		document.getElementById("el-modal-edt").style.display = "flex";
+		document.getElementById('site-header').style.display = 'none';
+	};
+} );
 
 child.run();
diff --git a/views/home.ejs b/views/home.ejs
index 463473e..e6eccdd 100644
--- a/views/home.ejs
+++ b/views/home.ejs
@@ -1,6 +1,6 @@
 <%- include('includes/head') %>
 
-<body class="home color-scheme-auto singular header-adaptative header-auto-hide color-scheme-dark">
+<body class="home color-scheme-auto singular header-adaptative header-auto-hide color-scheme-light">
     <%- include('includes/header') %>
 
     <main id="site-content">
@@ -10,21 +10,21 @@
 					<ul class="element el-utilities">
 						<li class="element el-utility">
 							<a id="el-utility-edt" href="javascript:void(0);">
-								<img class="el-utility-content" src="img/icons/calandar-icon-100x100.png" alt="calandar" width="30" height="30">
+								<img class="el-utility-content" src="img/icons/calandar-icon-dsc.png" alt="calandar" width="30" height="30">
 								<h2 class="el-utility-content">EDT</h2>
 							</a>
 						</li>
 
 						<li class="element el-utility">
 							<a href="javascript:void(0);">
-								<img class="el-utility-content" src="img/icons/weather-icon-100x100.png" alt="cloud with sun in background" width="30" height="30"/>
+								<img class="el-utility-content" src="img/icons/weather-icon-dsc.png" alt="cloud with sun in background" width="30" height="30"/>
 								<h2 class="el-utility-content">METEO</h2>
 							</a>
 						</li>
 
 						<li class="element el-utility">
 							<a href="javascript:void(0);">
-								<img class="el-utility-content" src="img/icons/transport-icon-100x100.png" alt="face view of a tram" width="30" height="30">
+								<img class="el-utility-content" src="img/icons/transport-icon-dsc.png" alt="face view of a tram" width="30" height="30">
 								<h2 class="el-utility-content">TRAJET</h2>
 							</a>
 						</li>
@@ -66,7 +66,7 @@
 		
 		<div class="el-modal-bg" id="el-modal-edt">
 			<div class ="el-modal element">
-				<span class="el-modal-close">&times;</span>
+				<a href="javascript:void(0);" class="el-modal-close">&times;</a>
 				<div class="el-add">
 					<div id="edt-container">
 						<div id="edt-form">