diff --git a/WEB/assets/img/LoginLogo.png b/WEB/assets/img/LoginLogo.png
deleted file mode 100644
index 416cd59a..00000000
Binary files a/WEB/assets/img/LoginLogo.png and /dev/null differ
diff --git a/WEB/assets/img/conexion-icon.jpg b/WEB/assets/img/conexion-icon.jpg
deleted file mode 100644
index 3af1d498..00000000
Binary files a/WEB/assets/img/conexion-icon.jpg and /dev/null differ
diff --git a/WEB/src/CSS/Home.css b/WEB/src/CSS/Home.css
index 4f5d9063..c212e610 100644
--- a/WEB/src/CSS/Home.css
+++ b/WEB/src/CSS/Home.css
@@ -234,8 +234,11 @@ body {
 /* Main CSS */
 .main{
   background-image: url(../../assets/img/BackgroundMain.jpg);
+  scroll-behavior: smooth;
   height: 100vh;
-  background-position: center;
+  background-position: center center;
+  background-color: #464646;
+  background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
 }
@@ -252,14 +255,14 @@ body {
 }
 
 .sign{
-  margin-bottom: 130px;
+  margin-bottom: 50px;
 }
 
 
 .sign h1 {
   font-weight: 600;
   margin: auto !important;
-  display: flex;
+  display: flex;  
   justify-content: center;
   align-items: center;
   width: 40%;
@@ -278,21 +281,15 @@ body {
 }
 
 
-/*Main Button CSS*/
 
 
-.main .duel{
-  color: #56fcfc;
-}
-.log{
-  color: #fff;
-}
+/*Main Button CSS*/
 
 .main .duel{
   margin-top: 60px;
 }
 
-.main a {
+.main .align-items-center a {
     letter-spacing: 0.2rem;
     padding: 25px 30px;
     color: #ff86ff;
@@ -312,21 +309,17 @@ body {
     overflow: hidden;
 }
 
+.main .align-items-center .duel{
+  color: #56fcfc;
+}
+
+
 .align-items-center{
   display: table;
   margin: auto;
 }
 
-.main .duel:hover{
-  background: #56fcfc;
-  color: #000000;
-  box-shadow: 0 0 5px #56fcfc, 
-              0 0 25px #56fcfc, 
-              0 0 50px #56fcfc, 
-              0 0 100px #56fcfc;
-}
-
-.main a:hover {
+.main .align-items-center .enigme:hover {
   background: #ff86ff;
   color: #000000;
   box-shadow: 0 0 5px #ff86ff,
@@ -334,9 +327,19 @@ body {
               0 0 50px #ff86ff,
               0 0 100px #ff86ff;
    -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
+}
 
+.main .align-items-center .duel:hover{
+  background: #56fcfc;
+  color: #000000 !important;
+  box-shadow: 0 0 5px #56fcfc, 
+              0 0 25px #56fcfc, 
+              0 0 50px #56fcfc, 
+              0 0 100px #56fcfc;
+  -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
 }
 
+
 .main a span{
   position: absolute;
   display: block;
@@ -396,4 +399,55 @@ a span:nth-child(4){
   background: linear-gradient(360deg,transparent,#ff86ff);
   animation: animate4 1s linear infinite;
   animation-delay: 0.75s;
-}
\ No newline at end of file
+}
+
+
+/* LogIn Button Css */
+
+.main .align-items-center #login{
+  display: flex;
+  justify-content: center;
+}
+
+.main .align-items-center .log{
+  color: #ffffff;
+  margin-bottom: 60px;
+  width: 140px;
+  font-weight: 500;
+  font-size: 20px;
+}
+
+.main .align-items-center .log:hover{
+  background: #6090d1;
+  color: #000000 !important;
+  transition-delay: 450ms;
+  box-shadow: 0 0 5px #6090d1, 
+              0 0 25px #6090d1, 
+              0 0 50px #6090d1, 
+              0 0 100px #6090d1;
+  -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
+}
+
+.main .align-items-center .log:before,
+.main .align-items-center .log:after{
+  content:'';
+  position:absolute;
+  top:0;
+  right:0;
+  height:2px;
+  background: #6090d1;
+  width:0;
+    box-shadow:  0 0 5px #6090d1,  0 0 5px #6090d1 inset;
+  transition:400ms ease all;
+}
+.main .align-items-center .log:after{
+  right:inherit;
+  top:inherit;
+  left:0;
+  bottom:0;
+}
+.main .align-items-center .log:hover:before,
+.main .align-items-center .log:hover:after{
+  width:100%;
+  transition:800ms ease all;
+}
diff --git a/WEB/src/CSS/LogSign.css b/WEB/src/CSS/LogSign.css
index 9b2b7f9d..4515984c 100644
--- a/WEB/src/CSS/LogSign.css
+++ b/WEB/src/CSS/LogSign.css
@@ -38,8 +38,11 @@ body {
 
 .main{
     background-image: url(../../assets/img/BackgroundLogIn.png);
+    scroll-behavior: smooth;
     height: 100vh;
-    background-position: center;
+    background-position: center center;
+    background-color: #464646;
+    background-attachment: fixed;
     background-repeat: no-repeat;
     background-size: cover;
 }
@@ -226,6 +229,4 @@ body {
 .top h2{
   margin-left: 25%;
   margin-top: 2% ;
-}
-
-/* Home Button */
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/WEB/src/CSS/Presentation.css b/WEB/src/CSS/Presentation.css
index b1cb6e54..ab6b6a1e 100644
--- a/WEB/src/CSS/Presentation.css
+++ b/WEB/src/CSS/Presentation.css
@@ -2,12 +2,14 @@
 html{
     scroll-behavior: smooth;
     background-image: url(../../assets/img/BackgroundPresentation.jpg);
+    scroll-behavior: smooth;
     height: 100vh;
-    background-position: center;
+    background-position: center center;
+    background-color: #464646;
+    background-attachment: fixed;
     background-repeat: no-repeat;
     background-size: cover;
 }
-  
 
 body{
     font-family: "Orbitron", sans-serif;
diff --git a/WEB/src/CSS/enigme.css b/WEB/src/CSS/enigme.css
index 36dec3fb..14ced2c1 100644
--- a/WEB/src/CSS/enigme.css
+++ b/WEB/src/CSS/enigme.css
@@ -44,7 +44,9 @@ input:focus, textarea:focus, select:focus {
 html{
   scroll-behavior: smooth;
   height: 100vh;
-  background-position: center;
+  background-position: center center;
+  background-color: #464646;
+  background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
 }
diff --git a/WEB/src/pages/Enigme/CesarDecrypt.html b/WEB/src/pages/Enigme/CesarDecrypt.html
index 5d08542f..6c4b9c8b 100644
--- a/WEB/src/pages/Enigme/CesarDecrypt.html
+++ b/WEB/src/pages/Enigme/CesarDecrypt.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fr">
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Palindrome</title>
+  <title>Code César</title>
   <link rel="stylesheet" href="../../CSS/Enigme.css"/>
   <link rel="stylesheet" href="../../CSS/Home.css">
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
diff --git a/WEB/src/pages/Enigme/CesarEncrypt.html b/WEB/src/pages/Enigme/CesarEncrypt.html
index 241fa0db..48d043fe 100644
--- a/WEB/src/pages/Enigme/CesarEncrypt.html
+++ b/WEB/src/pages/Enigme/CesarEncrypt.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fr">
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Palindrome</title>
+  <title>Code César</title>
   <link rel="stylesheet" href="../../CSS/Enigme.css"/>
   <link rel="stylesheet" href="../../CSS/Home.css">
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
@@ -32,13 +32,15 @@
     <h2>Consigne</h2><br>
 	    <p class="enonce">
             Écrire une fonction Encrypt qui prend en argument un message et une clé et qui retourne le message crypté avec le code César.(les espace ne seront pas encodé.)
-	    </p><br>
+	    </p><br><br>
     <h2>Rappel</h2><br>
-    <p class="rappel">Le code César (ou chiffre de César ) est un chiffrement par substitution, où chaque lettre est remplacée par une autre lettre se situant un peu plus loin dans l'alphabet. Par exemple A avec une clé 2 devient C.
-    </p><br>
+    <p class="rappel">Le code César (ou chiffre de César ) est un chiffrement par substitution, 
+        <br>où chaque lettre est remplacée par une autre lettre se situant un peu plus loin dans l'alphabet . 
+        <br>Par exemple A avec une clé 2 devient C.
+    </p><br><br>
     <h2>Exemple</h2><br>
     <p>Entrée :&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;Sortie :</p>
-    <p>[fbehu,3]&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp; cyber</p><br>
+    <p>[fbehu,3]&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;cyber</p><br><br>
     <h2>Aide</h2><br>
     <p>
         La fonction ord(char) de python permet de retourner l’Unicode (standard d’encodage de caractères) d'un caractère. Par exemple, ord('a') retourné '97' et ord('b’) retourne 98.
diff --git a/WEB/src/pages/Enigme/Chouette.html b/WEB/src/pages/Enigme/Chouette.html
index 99764671..65079b92 100644
--- a/WEB/src/pages/Enigme/Chouette.html
+++ b/WEB/src/pages/Enigme/Chouette.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fr">
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Palindrome</title>
+  <title>Cul de Chouette</title>
   <link rel="stylesheet" href="../../CSS/Enigme.css"/>
   <link rel="stylesheet" href="../../CSS/Home.css">
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
diff --git a/WEB/src/pages/Enigme/ChuckNorris.html b/WEB/src/pages/Enigme/ChuckNorris.html
index 77d3b467..eab9fa06 100644
--- a/WEB/src/pages/Enigme/ChuckNorris.html
+++ b/WEB/src/pages/Enigme/ChuckNorris.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fr">
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Palindrome</title>
+  <title>Chuck Norris</title>
   <link rel="stylesheet" href="../../CSS/Enigme.css"/>
   <link rel="stylesheet" href="../../CSS/Home.css">
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
diff --git a/WEB/src/pages/Enigme/palindrome.html b/WEB/src/pages/Enigme/palindrome.html
index b26c5f84..5a8661b7 100644
--- a/WEB/src/pages/Enigme/palindrome.html
+++ b/WEB/src/pages/Enigme/palindrome.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fr">
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
diff --git a/WEB/src/pages/Home.html b/WEB/src/pages/Home.html
index ad57b420..1d3e3881 100644
--- a/WEB/src/pages/Home.html
+++ b/WEB/src/pages/Home.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fr">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -17,10 +17,12 @@
                 <span>ed</span>
             </h1>
         </div>
-        <button>
-            <img href="./LogSign/Login.html" src="../../assets/img/conexion-icon.jpg"/>
-        </button>
         <div class="align-items-center">
+            <div id="login">
+                <a href="./LogSign/Login.html" class="log">
+                    LOgin
+                  </a>
+            </div>
             <div>
                 <a class="enigme" href="./Presentation.html">
                     <span></span>
@@ -36,7 +38,7 @@
                     <span></span>
                     <span></span>
                     <span></span>
-                    Duel
+                    Multi
                 </a>
             </div>
         </div>     
diff --git a/WEB/src/pages/LogSign/Login.html b/WEB/src/pages/LogSign/Login.html
index 410dd34c..6a4015f8 100644
--- a/WEB/src/pages/LogSign/Login.html
+++ b/WEB/src/pages/LogSign/Login.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fr">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
diff --git a/WEB/src/pages/LogSign/SignUp.html b/WEB/src/pages/LogSign/SignUp.html
index 1db2ea93..93d1cadb 100644
--- a/WEB/src/pages/LogSign/SignUp.html
+++ b/WEB/src/pages/LogSign/SignUp.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fr">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
diff --git a/WEB/src/pages/Presentation.html b/WEB/src/pages/Presentation.html
index 0c03b2da..70721354 100644
--- a/WEB/src/pages/Presentation.html
+++ b/WEB/src/pages/Presentation.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fr">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <title>Presentation</title>
 </head>
-<body>
+<body onload="script();">
     <div class="presentation_titre" id="home">
         <div class="titre_pre">
             <div class="retour">
@@ -27,9 +27,14 @@
         </div>   
         <div class="Presentation">
             <div class="Histoire">
-                <img src="../../assets/img/Renard.png">
-                <div class="Consigne">
-                    <p>Bonjour utilisateur ! Je suis Foxy, une IA créer par Howard Aiken, un chercheur en informatique. J'ai besoin de ton aide ... </p>
+                <img src="../../assets/img/Renard.png" alt="Foxy">
+                <div class="Consigne" id="message">
+                    <p>Bonjour utilisateur ! Je suis Foxy, une IA créer par Howard Aiken, un eminent chercheur, 
+                        malhereusement celui-ci est mort. J'ai besoin de votre aide pour protéger mon code source d'une organisation
+                        malveillante qui veut le voler. Pour cela, je vais vous demander de résoudre des énigmes. Mais tout d'abord,
+                        vous devez passer un test de qualification. Si vous réussissez, vous pourrez accéder aux énigmes. 
+                        Bonne chance utilisateur !
+                    </p>
                 </div>
             </div>
             <br>