diff --git a/My-Website.css b/My-Website.css
index c771588..5cb47d3 100644
--- a/My-Website.css
+++ b/My-Website.css
@@ -12,19 +12,17 @@
 :root {
 
   --couleur: #6d47ff;
-
-}
-
-.root {
-
-  color: var(--couleur);
+  --bg: rgb(230, 230, 230);
+  --default: rgba(189, 189, 189, 0.217);
+  --default2: black;
 
 }
 
 body {
 
-  background-color: rgb(255,255,255);
+  background-color: var(--bg);
   min-height: 100vh;
+  color: var(--default2);
 
 }
 
@@ -103,12 +101,22 @@ img, .custom-menu {
 
 /*-----Marges des pages----*/
 
-.section1, .section2, .section3 {
+.section1, .section3 {
 
-  margin: 0px 10px 15px 80px;
+  margin: 0px 10px 30px 90px;
+  position: relative;
+  top: 15px;
   
 }
 
+.section2 {
+
+  margin: 0px 10px 60px 90px;
+  position: relative;
+  top: 15px;
+
+}
+
 /*-----Titres tests-----*/
 
 .titre {
@@ -125,17 +133,20 @@ img, .custom-menu {
 /*-----Barre de navigation-----*/
 
 .nav {
-  top: 8px;
-  left: 8px;
+
+  top: 15px;
+  left: 15px;
   position: fixed;
   transform: translateY(0);
-  height: calc(100vh - 15px);
+  height: calc(100vh - 27.5px);
   width: 65px;
-  background-color: white;
+  background-color: var(--default);
   transition: background-color 0s, width 1.1s;
   overflow-x: hidden;
   border-radius: 15px;
   z-index: 2000;
+  backdrop-filter: blur(10px);
+
 }
 
 
@@ -150,7 +161,7 @@ img, .custom-menu {
 .ligne {
 
   width: 100%;
-  background-color: black;
+  background-color: var(--default2);
   position: absolute;
   left: 50%;
   top: 60px;
@@ -181,7 +192,7 @@ img, .custom-menu {
   transform: translate(-50%, -50%);
   width: 35px;
   height: 2px;
-  background-color: black;
+  background-color: var(--default2);
   transition: 0.7s;
 
 }
@@ -195,8 +206,8 @@ img, .custom-menu {
   transform: translate(-50%, -50%);
   width: 35px;
   height: 2px;
-  background-color: black;
-  box-shadow: 0 -9px 0 black;
+  background-color: var(--default2);
+  box-shadow: 0 -9px 0 var(--default2);
   transition: 0.7s;
 
 }
@@ -300,7 +311,14 @@ img, .custom-menu {
   border-radius: 7px;
   font-size: 1.1em;
   padding: 15px;
+  top: 65px;
+  position: fixed;
   border: 1px var(--couleur) solid;
+  background-color: var(--default);
+  color: var(--default2);
+  backdrop-filter: blur(10px);
+  z-index: 2000;
+
 
 }
 
@@ -308,29 +326,14 @@ img, .custom-menu {
 
 .category {
 
-  background-color: white;
+  background-color: var(--default);
   padding: 15px 15px 15px 22.5px;
   width: 750px;
   margin-top: 18px;
+  position: relative;
+  top: 35px;
   border-radius: 13px;
   border: 1px var(--couleur) solid;
-  animation: slide linear;
-  animation-timeline: view();
-  animation-range-start: cover 0%;
-  animation-range-end: cover 70%;
-
-}
-
-@keyframes slide {
-  
-  0% {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-  20% {
-    transform: translateY(0);
-    opacity: 1;
-  }
 
 }
 
@@ -353,7 +356,7 @@ img, .custom-menu {
 .lienRecherche {
 
   font-size: 1.1em;
-  color: black;
+  color: var(--default2);
   width: max-content;
   padding: 5px 5px 5px 4px;
   text-decoration: none;
@@ -433,48 +436,6 @@ img, .custom-menu {
 -------Page parametres-------
 ---------------------------*/
 
-/*-----Dark mode-----*/
-
-body.active {
-
-  background: rgb(36,34,49);
-  background: linear-gradient(90deg, rgba(36,34,49,1) 0%, rgba(30,29,42,1) 100%);
-  color: white;
-
-}
-
-body.active .nav, body.active .ligne, body.active .btn::before, body.active .recherche, body.active .category, body.active .btnParametres, body.active .shortcut {
-
-  background-color: #29283763;
-  backdrop-filter: blur(10px);
-  color: white;
-
-}
-
-body.active .btn::before, body.active .btn::after, body.active .ligne {
-
-  background-color: white;
-
-}
-
-body.active .btn::after {
-
-  box-shadow: 0 -9px 0 white;
-
-}
-
-body.active .lienRecherche {
-
-  color: white;
-
-}
-
-body.active ::placeholder, body.active ::-moz-placeholder {
-
-  color: rgb(185, 185, 185);
-
-}
-
 /*-----Bouton paramètre-----*/
 
 .btnParametres {
@@ -485,7 +446,7 @@ body.active ::placeholder, body.active ::-moz-placeholder {
   top: 10px;
   margin-bottom: 25px;
   cursor: pointer;
-  background-color: white;
+  background-color: var(--default);
   border-radius: 5px;
   border: 1px var(--couleur) solid;
 
@@ -600,7 +561,7 @@ body.active ::placeholder, body.active ::-moz-placeholder {
 
 .shortcut {
 
-  background-color: white;
+  background-color: var(--default);
   display: flex;
   justify-content: center;
   flex-direction: column;
@@ -691,7 +652,7 @@ body.active ::placeholder, body.active ::-moz-placeholder {
 ::-webkit-scrollbar {
 
   width: 0.5vw;
-  background-color: #292837;
+  background-color: var(--bg);
 
 }
 
@@ -815,13 +776,7 @@ body.active ::placeholder, body.active ::-moz-placeholder {
 
 /*-----Vu pour mobile-----*/
 
-@media screen and (max-width: 425px) {
-
-  body {
-
-    background-color: white;
-
-  }
+@media screen and (max-width: 435px) {
 
   .section1, .section2, .section3 {
 
@@ -834,9 +789,10 @@ body.active ::placeholder, body.active ::-moz-placeholder {
     top: unset;
     bottom: 0;
     height: 65px;
-    width: calc(100vw - 15px);
+    width: 100%;
     backdrop-filter: blur(0px);
     display: flex;
+    left: 0;
     justify-content: center;
     gap: 20%;
     background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255, 0, 0, 0) 100%);
@@ -913,19 +869,26 @@ body.active ::placeholder, body.active ::-moz-placeholder {
 
   .recherche {
   
-    width: 100%;
+    position: relative;
     transition: 0.9s;
-    background-color: rgb(230, 230, 230);
+    width: 100%;
+    top: 0;
     
   }
 
   .category {
   
     width: 100%;
-    background-color: rgb(230, 230, 230);
+    top: 0px;
   
   }
 
+  .category:last-child {
+
+    margin-bottom: 80px;
+
+  }
+
   .titreRecherche {
   
     font-size: 1.2em;
@@ -947,16 +910,9 @@ body.active ::placeholder, body.active ::-moz-placeholder {
   
   }
 
-  body.active .lienRecherche {
-  
-    background-color: unset;
-  
-  }
-
-  body.active .nav {
+  body.black .nav {
 
     background: linear-gradient(0deg, rgba(36,34,49,1) 0%, rgba(36,34,49,0.1) 100%);
-    backdrop-filter: blur(0px);
   
   }
 
diff --git a/My-Website.js b/My-Website.js
index caf3f84..168ed46 100644
--- a/My-Website.js
+++ b/My-Website.js
@@ -3,7 +3,6 @@
 if (window.location.protocol != "https:") {
   window.location.protocol="https:";
 }
-
 //------Element html------\\
 
 const btn1 = document.getElementById('btn1');
@@ -365,26 +364,32 @@ window.addEventListener('load', function() {
 
 //-----Dark mode-----\\
 
-let modeSombreActive = false;
-
-function toggleModeSombre() {
-  body.classList.toggle("active");
-  modeSombreActive = !modeSombreActive;
-  localStorage.setItem("modeSombre", modeSombreActive);
-};
-
 //-----Bouton dark mode-----\\
 
-btnDark.onclick = function ajouterClassBody() {
-  toggleModeSombre();
-};
-
-//-----Sauvegarde dark mode-----\\
+let isDarkMode = localStorage.getItem('isDarkMode') === 'true';
+
+function updateDarkMode() {
+  if (isDarkMode) {
+    const newBg = `#242231`;
+    const newColor = `#38374863`;
+    const newColor2 = `white`;
+    document.documentElement.style.setProperty('--bg', newBg);
+    document.documentElement.style.setProperty('--default', newColor);
+    document.documentElement.style.setProperty('--default2', newColor2);
+    body.classList.add("black")
+  } else {
+    document.documentElement.style.removeProperty('--bg');
+    document.documentElement.style.removeProperty('--default');
+    document.documentElement.style.removeProperty('--default2');
+    body.classList.remove("black")
+  }
+}
+updateDarkMode();
 
-const modeSombreStocke = localStorage.getItem("modeSombre");
-if (modeSombreStocke === "true") {
-  body.classList.add("active");
-  modeSombreActive = true;
+btnDark.onclick = function() {
+  isDarkMode = !isDarkMode;
+  localStorage.setItem('isDarkMode', isDarkMode);
+  updateDarkMode();
 };
 
 //-----Passer en mode plein ecran-----\\
@@ -585,4 +590,4 @@ annuler.onclick = function() {
     popup.style.opacity = 0;
     section3.style.overflow = "auto";
     isPopupVisible = false;
-};
+};
\ No newline at end of file
diff --git a/index.html b/index.html
index 6899a40..e280c8a 100644
--- a/index.html
+++ b/index.html
@@ -59,7 +59,7 @@
 
     <div id="section1" class="section1">
       <p class="titre">Accueil</p>
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>  
     </div>
 
     <!--------------------------
@@ -105,7 +105,7 @@
         <div class="shortcut">
           <img class="imgShortcut" src="ubuntu.png" alt="Ubuntu">
           <p class="titreShortcut">Ubuntu</p>
-          <p class="paraShortcut">Sauvegarder-le exécutez "My-Website-Shortcut-Ubuntu.sh".</p>
+          <p class="paraShortcut">Sauvegarder-le et exécutez "My-Website-Shortcut-Ubuntu.sh".</p>
           <a class="lienShortcut" href="My-Website-Shortcut-Ubuntu.zip">Télécharger pour ubuntu</a>
         </div>
         <div class="shortcut">