diff --git a/images/.nfs0000000000f53c8600000084 b/images/.nfs0000000000f53c8600000084
deleted file mode 100644
index 87a6e54..0000000
Binary files a/images/.nfs0000000000f53c8600000084 and /dev/null differ
diff --git a/pages/accueil.html b/pages/accueil.html
index 4e2c80f..d150454 100644
--- a/pages/accueil.html
+++ b/pages/accueil.html
@@ -7,6 +7,7 @@
     <link id="favicon" rel="icon" href="../images/iconeSombre.ico"> <!-- Par défaut sombre -->
     <link rel="stylesheet" href="../styles/style.css">
     <script defer src="../script/theme-toggle.js"></script>
+    <script src="../script/auth-check.js"></script>
 </head>
 <body>
     <div class="container">
@@ -17,13 +18,16 @@
                 <a href="quiz.html"><img src="../images/quizz.svg" alt="quizz" width="51px" height="82px" onmousedown="return false"></a>
             </div>
             <div class="logo">
-                <img src="../images/WIKIFANTASY.png" alt="Logo" width="227px" height="106px" onmousedown="return false">
+                <a href="accueil.html"><img src="../images/WIKIFANTASY.png" alt="Logo" width="227px" height="106px" onmousedown="return false"></a>
             </div>
             <div class="user">
-                <img src="../images/user_dark.png" alt="user" width="70px" height="70px" onmousedown="return false">
+                <a href="profil.html"><img src="../images/user_dark.png" alt="user" width="70px" height="70px" onmousedown="return false"></a>
             </div>
         </div>
     </div>
     <h1>Wiki Fantasy</h1>
+    <footer>
+        <p>This is the footer.</p>
+    </footer>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/pages/login.html b/pages/login.html
index 66cc6c8..4413f7b 100644
--- a/pages/login.html
+++ b/pages/login.html
@@ -7,13 +7,14 @@
     <title>Wiki Fantasy : Connexion</title>
     <link id="favicon" rel="icon" href="../images/iconeSombre.ico"> <!-- Par défaut sombre -->
     <link href="https://fonts.googleapis.com/css2?family=Lemon&display=swap" rel="stylesheet">
+    <script defer src="../script/theme-toggle.js"></script>
 </head>
 <body>
     <div class="container">
         <div class="header">
             <div class="nav"> 
                 <img src="../images/coeur.svg" alt="coeur" width="67px" height="67px" onmousedown="return false">
-                <img src="../images/dark.svg" alt="dark" width="72px" height="37px" onmousedown="return false">
+                <img id="theme-icon" src="../images/light.svg" alt="toggle theme" width="72px" height="37px" onmousedown="return false" onclick="toggleTheme()">
                 <img src="../images/quizz.svg" alt="quizz" width="51px" height="82px" onmousedown="return false">
             </div>
             <div class="logo">
diff --git a/script/auth-check.js b/script/auth-check.js
new file mode 100644
index 0000000..02d72d9
--- /dev/null
+++ b/script/auth-check.js
@@ -0,0 +1,39 @@
+// auth-check.js
+
+// Vérifier si l'utilisateur est connecté
+function isUserLoggedIn() {
+    // Vérifiez si 'isLoggedIn' est défini dans le localStorage ou par un cookie
+    return localStorage.getItem('isLoggedIn') === 'true';
+}
+
+// Redirection des liens en fonction de l'état de connexion
+function setupLinks() {
+    const favoriteLink = document.querySelector('a[href="favorite.html"]');
+    const quizLink = document.querySelector('a[href="quiz.html"]');
+    const userIcon = document.querySelector('.user img');
+
+    if (!isUserLoggedIn()) {
+        // Si l'utilisateur n'est pas connecté, rediriger vers la page de connexion
+        if (favoriteLink) favoriteLink.href = "login.html";
+        if (quizLink) quizLink.href = "login.html";
+        if (userIcon) {
+            userIcon.style.cursor = "pointer"; // Changer le curseur pour indiquer la cliquabilité
+            userIcon.addEventListener('click', () => {
+                window.location.href = "login.html";
+            });
+        }
+    } else {
+        // Si l'utilisateur est connecté, définir les liens vers les pages dédiées
+        if (favoriteLink) favoriteLink.href = "favorite.html";
+        if (quizLink) quizLink.href = "quiz.html";
+        if (userIcon) {
+            userIcon.style.cursor = "pointer"; // Changer le curseur pour indiquer la cliquabilité
+            userIcon.addEventListener('click', () => {
+                window.location.href = "user-profile.html";
+            });
+        }
+    }
+}
+
+// Initialiser les liens lors du chargement de la page
+document.addEventListener('DOMContentLoaded', setupLinks);
diff --git a/src/citation.txt b/src/citation.txt
new file mode 100644
index 0000000..949c816
--- /dev/null
+++ b/src/citation.txt
@@ -0,0 +1,3 @@
+"Il ne suffit pas de se mettre une plume dans le cul pour ressembler à un coq."|Fight Club|Tyler Durden|1999|173000|../images/tyler.jpg
+"Je suis ton père"|Star Wars|Darth Vader||1000000|../images/darth_vader.jpg
+"C’est trop calme... j’aime pas trop beaucoup ça..."|Asterix et Obelix: Mission Cléopâtre|Numérobis||250000|../images/numerobis.jpg
diff --git a/styles/style.css b/styles/style.css
index 5f4b213..5054021 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -1,3 +1,5 @@
+/* header.css */
+
 /* Styles généraux */
 * {
   margin: 0;
@@ -5,9 +7,10 @@
   box-sizing: border-box;
 }
 
-body{
-	background-color: #120b1d ;
-    font-family: "Lemon", serif;
+body {
+  background-color: #120b1d;
+  font-family: "Lemon", serif;
+  margin-top: 200px;
 }
 
 /* Header */
@@ -65,7 +68,6 @@ body.dark-mode .nav img:hover {
   filter: invert(59%) sepia(96%) saturate(6733%) hue-rotate(275deg) brightness(112%) contrast(122%);
 }
 
-
 /* Mode clair */
 body.light-mode {
   background-color: #ffffff;
@@ -82,4 +84,4 @@ body.light-mode .header img {
 
 body.light-mode .nav img:hover {
   filter: invert(22%) sepia(6%) saturate(2269%) hue-rotate(193deg) brightness(98%) contrast(106%);
-}
\ No newline at end of file
+}
diff --git a/styles/styleAccueil.css b/styles/styleAccueil.css
new file mode 100644
index 0000000..5080b5a
--- /dev/null
+++ b/styles/styleAccueil.css
@@ -0,0 +1,61 @@
+/* accueil.css */
+
+/* Importer les styles du bandeau */
+@import url('header.css');
+
+/* Styles spécifiques à la page d'accueil */
+.quote-of-the-day, .suggestions {
+  margin: 20px auto;
+  padding: 20px;
+  background-color: #2b2b45;
+  border-radius: 10px;
+  width: 80%;
+}
+
+h2 {
+  text-align: center;
+  color: #fff;
+}
+
+.quote-card, .suggestion-card {
+  display: flex;
+  align-items: center;
+  margin: 10px 0;
+  background: #3b3b5f;
+  border-radius: 10px;
+  padding: 15px;
+}
+
+.quote-card img, .suggestion-card img {
+  border-radius: 10px;
+  width: 100px;
+  height: auto;
+  margin-right: 15px;
+}
+
+.quote-content, .suggestion-content {
+  flex-grow: 1;
+}
+
+.quote-likes {
+  display: flex;
+  align-items: center;
+  color: #fff;
+  margin-left: 10px;
+}
+
+.quote-likes img {
+  width: 20px;
+  height: auto;
+  margin-left: 5px;
+}
+
+.suggestion-list {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+
+.suggestion-card {
+  width: 45%;
+}
diff --git a/styles/styleLogin.css b/styles/styleLogin.css
index 5194393..482405b 100644
--- a/styles/styleLogin.css
+++ b/styles/styleLogin.css
@@ -1,6 +1,7 @@
 @import url(./style.css);
 
-h1{
+/* ====== DARK MODE ====== */
+body.dark-mode h1{
 	color : white;
 	font-family: "Lemon", serif;
 	text-align: center;
@@ -8,7 +9,7 @@ h1{
 	margin-top: 10%;
 }
 
-p{
+body.dark-mode p{
 	margin-top: 6%;
 	margin-bottom: 2%;
 	color : white;
@@ -16,49 +17,112 @@ p{
 	font-family: "Lemon", serif;
 }
 
-.login{
+body.dark-mode .login{
 	background-color: black;
 	width: 30%;
 	margin-left: 35%;
 	margin-top: 3%;
 	border-radius: 25px;
+	border: 2px solid transparent;
 	padding: 2%;
 }
 
-.connexion{
-	width:90%;
-	height: 40px;
-	padding-left: 3%;
-	margin-left: 1%;
-	margin-top: -1%;
-	border-radius: 25px;
-	border: none;
-	font-size: 15px;
-}
-
-
-.createAccount{
+body.dark-mode .createAccount{
 	margin-top: 5%;
 	margin-bottom: 5%;
 	font-size: 13px;
 	text-align: center;
 	padding-top: 1%;
 	color: white;
+	border: 1px solid transparent;
 	font-family: "Lemon", serif;
 }
 
+body.dark-mode .buttonSudmite{
+	background: linear-gradient(90deg, #6100ff 0%, #1b0048 100%);
+	font-family: "Lemon", serif;
+	border: none;
+	color: white;
+	padding: 2%;
+	border-radius: 25px;
+	width: 75%;
+	font-size: 20px;
+}
 
-.buttonSudmiteDiv{
+/* ====== LIGHT MODE ====== */
+body.light-mode h1{
+	color : black;
+	font-family: "Lemon", serif;
 	text-align: center;
+	font-size: 32px;
+	margin-top: 10%;
 }
 
-.buttonSudmite{
-	background: linear-gradient(90deg, #6100ff 0%, #1b0048 100%);
+body.light-mode p{
+	margin-top: 6%;
+	margin-bottom: 2%;
+	color : black;
+	font-size: 20px;
+	font-family: "Lemon", serif;
+}
+
+body.light-mode .login{
+	background-color: white;
+	width: 30%;
+	margin-left: 35%;
+	margin-top: 3%;
+	border-radius: 25px;
+	border: 2px solid black;
+	padding: 2%;
+}
+
+body.light-mode .createAccount{
+	margin-top: 5%;
+	margin-bottom: 5%;
+	font-size: 13px;
+	text-align: center;
+	padding-top: 1%;
+	color: black;
+	font-family: "Lemon", serif;
+}
+
+body.light-mode .buttonSudmite{
+	background: linear-gradient(180deg, rgba(187,211,249,1) 0%, rgba(199,246,196,1) 100%); 
 	font-family: "Lemon", serif;
 	border: none;
-	color: white;
+	color: black;
 	padding: 2%;
 	border-radius: 25px;
 	width: 75%;
 	font-size: 20px;
-}
\ No newline at end of file
+}
+
+body.light-mode .connexion{
+	width:90%;
+	height: 40px;
+	padding-left: 3%;
+	margin-left: 1%;
+	margin-top: -1%;
+	border-radius: 25px;
+	border: 1px solid black;
+	background-color: #fff1f1;
+	font-size: 15px;
+}
+
+
+/* ====== OTHER ====== */
+.buttonSudmiteDiv{
+	text-align: center;
+}
+
+
+.connexion{
+	width:90%;
+	height: 40px;
+	padding-left: 3%;
+	margin-left: 1%;
+	margin-top: -1%;
+	border-radius: 25px;
+	border: none;
+	font-size: 15px;
+}
diff --git a/styles/styleProfil.css b/styles/styleProfil.css
index 2e5e60c..60219f4 100644
--- a/styles/styleProfil.css
+++ b/styles/styleProfil.css
@@ -1,7 +1,7 @@
 @import url(./style.css);
 
-
-h1{
+/* ====== DARK MODE ====== */
+body.dark-mode h1{
 	color : white;
 	font-family: "Lemon", serif;
 	text-align: center;
@@ -9,7 +9,7 @@ h1{
 	margin-top: 10%;
 }
 
-p{
+body.dark-mode p{
 	margin-top: 6%;
 	margin-bottom: 2%;
 	color : white;
@@ -18,7 +18,7 @@ p{
 }
 
 
-.buttonSudmite{
+body.dark-mode .buttonSudmite{
 	background: linear-gradient(90deg, #6100ff 0%, #1b0048 100%);
 	font-family: "Lemon", serif;
 	border: none;
@@ -29,12 +29,9 @@ p{
 	font-size: 20px;
 }
 
-.buttonSudmiteDiv{
-	text-align: center;
-}
 
 
-.createQuote{
+body.dark-mode .createQuote{
 	margin-top: 5%;
 	margin-bottom: 5%;
 	font-size: 15px;
@@ -44,7 +41,7 @@ p{
 	font-family: "Lemon", serif;
 }
 
-.login{
+body.dark-mode .login{
 	background-color: black;
 	width: 30%;
 	margin-left: 35%;
@@ -52,6 +49,63 @@ p{
 	border-radius: 25px;
 	padding-top: 1px;
 	padding-bottom: 1%;
+	border: 2px solid transparent;
+}
+
+/* ====== LIGHT MODE ====== */
+body.light-mode h1{
+	color : black;
+	font-family: "Lemon", serif;
+	text-align: center;
+	font-size: 35px;
+	margin-top: 10%;
+}
+body.light-mode p{
+	margin-top: 6%;
+	margin-bottom: 2%;
+	color : black;
+	font-size: 20px;
+	font-family: "Lemon", serif;
+}
+
+
+body.light-mode .buttonSudmite{
+	background: linear-gradient(180deg, rgba(187,211,249,1) 0%, rgba(199,246,196,1) 100%); 
+	font-family: "Lemon", serif;
+	border: none;
+	color: black;
+	padding: 5%;
+	border-radius: 25px;
+	width: 75%;
+	font-size: 20px;
+}
+
+
+
+body.light-mode .createQuote{
+	margin-top: 5%;
+	margin-bottom: 5%;
+	font-size: 15px;
+	text-align: center;
+	padding-top: 1%;
+	color: black;
+	font-family: "Lemon", serif;
+}
+
+body.light-mode .login{
+	background-color: white;
+	width: 30%;
+	margin-left: 35%;
+	margin-top: 9%;
+	border-radius: 25px;
+	padding-top: 1px;
+	padding-bottom: 1%;
+	border: 2px solid black;
+}
+
+/* ====== OTHER ====== */
+.buttonSudmiteDiv{
+	text-align: center;
 }
 
 .imageProfil{
