diff --git a/src/assets/avatar-dark.svg b/src/assets/avatar-dark.svg
new file mode 100644
index 0000000..aace7fc
--- /dev/null
+++ b/src/assets/avatar-dark.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="256px" height="256px" viewBox="0 0 9.81 9.81" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xodm="http://www.corel.com/coreldraw/odm/2003" fill="#d4d4d8">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <defs> <style type="text/css">  .fil0 {fill:none} .fil2 {fill:#3f3f46;fill-rule:nonzero} .fil1 {fill:#3f3f46;fill-rule:nonzero}  </style> </defs> <g id="Layer_x0020_1"> <rect class="fil0" height="9.81" width="9.81"/> <path class="fil1" d="M4.91 4.92c-0.27,0 -0.51,-0.11 -0.68,-0.28l0 0c-0.18,-0.18 -0.29,-0.42 -0.29,-0.68 0,-0.27 0.11,-0.51 0.29,-0.68l0 0c0.17,-0.18 0.41,-0.29 0.68,-0.29 0.26,0 0.5,0.11 0.68,0.29l0 0c0.17,0.17 0.28,0.41 0.28,0.68 0,0.26 -0.11,0.5 -0.28,0.68l0 0c-0.18,0.17 -0.42,0.28 -0.68,0.28zm-0.46 -0.51c0.12,0.12 0.28,0.19 0.46,0.19 0.17,0 0.34,-0.07 0.45,-0.19 0.12,-0.11 0.19,-0.27 0.19,-0.45 0,-0.18 -0.07,-0.34 -0.19,-0.46 -0.11,-0.12 -0.28,-0.19 -0.45,-0.19 -0.18,0 -0.34,0.07 -0.46,0.19 -0.12,0.12 -0.19,0.28 -0.19,0.46 0,0.18 0.07,0.34 0.19,0.45z"/> <path class="fil2" d="M4.91 6.82l-1.61 0c-0.09,0 -0.16,-0.07 -0.16,-0.16l0 -0.55c0,-0.44 0.47,-0.71 1.08,-0.82 0.22,-0.04 0.45,-0.06 0.69,-0.06 0.23,0 0.46,0.02 0.68,0.06 0.61,0.11 1.08,0.38 1.08,0.82l0 0.55c0,0.09 -0.07,0.16 -0.15,0.16l-1.61 0zm-1.45 -0.32l2.9 0 0 -0.39c0,-0.25 -0.36,-0.43 -0.82,-0.51 -0.2,-0.04 -0.42,-0.05 -0.63,-0.05 -0.22,0 -0.44,0.01 -0.63,0.05 -0.46,0.08 -0.82,0.26 -0.82,0.51l0 0.39z"/> </g> </g>
+
</svg>
\ No newline at end of file
diff --git a/src/assets/avatar-light.svg b/src/assets/avatar-light.svg
new file mode 100644
index 0000000..347edd6
--- /dev/null
+++ b/src/assets/avatar-light.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="256px" height="256px" viewBox="0 0 9.81 9.81" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xodm="http://www.corel.com/coreldraw/odm/2003" fill="#d4d4d8">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <defs> <style type="text/css">  .fil0 {fill:none} .fil2 {fill:#d4d4d8;fill-rule:nonzero} .fil1 {fill:#d4d4d8;fill-rule:nonzero}  </style> </defs> <g id="Layer_x0020_1"> <rect class="fil0" height="9.81" width="9.81"/> <path class="fil1" d="M4.91 4.92c-0.27,0 -0.51,-0.11 -0.68,-0.28l0 0c-0.18,-0.18 -0.29,-0.42 -0.29,-0.68 0,-0.27 0.11,-0.51 0.29,-0.68l0 0c0.17,-0.18 0.41,-0.29 0.68,-0.29 0.26,0 0.5,0.11 0.68,0.29l0 0c0.17,0.17 0.28,0.41 0.28,0.68 0,0.26 -0.11,0.5 -0.28,0.68l0 0c-0.18,0.17 -0.42,0.28 -0.68,0.28zm-0.46 -0.51c0.12,0.12 0.28,0.19 0.46,0.19 0.17,0 0.34,-0.07 0.45,-0.19 0.12,-0.11 0.19,-0.27 0.19,-0.45 0,-0.18 -0.07,-0.34 -0.19,-0.46 -0.11,-0.12 -0.28,-0.19 -0.45,-0.19 -0.18,0 -0.34,0.07 -0.46,0.19 -0.12,0.12 -0.19,0.28 -0.19,0.46 0,0.18 0.07,0.34 0.19,0.45z"/> <path class="fil2" d="M4.91 6.82l-1.61 0c-0.09,0 -0.16,-0.07 -0.16,-0.16l0 -0.55c0,-0.44 0.47,-0.71 1.08,-0.82 0.22,-0.04 0.45,-0.06 0.69,-0.06 0.23,0 0.46,0.02 0.68,0.06 0.61,0.11 1.08,0.38 1.08,0.82l0 0.55c0,0.09 -0.07,0.16 -0.15,0.16l-1.61 0zm-1.45 -0.32l2.9 0 0 -0.39c0,-0.25 -0.36,-0.43 -0.82,-0.51 -0.2,-0.04 -0.42,-0.05 -0.63,-0.05 -0.22,0 -0.44,0.01 -0.63,0.05 -0.46,0.08 -0.82,0.26 -0.82,0.51l0 0.39z"/> </g> </g>
+
</svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index ffb7d9e..a183bca 100644
--- a/src/main.js
+++ b/src/main.js
@@ -207,3 +207,22 @@ document.getElementById("profileImage").addEventListener("change", function(even
         reader.readAsDataURL(file);
     }
 });
+
+// Pour l'adaptation de l'avatar dans edit-profil-info.html au darck mode
+function updateImage() {
+        const img = document.getElementById("previewImage");
+        if (document.documentElement.classList.contains("dark")) {
+			// Image pour le mode sombre
+            img.src = "../assets/avatar-dark.svg"; 
+        } else {
+			 // Image pour le mode clair
+            img.src = "../assets/avatar-light.svg";
+        }
+    }
+
+    // Vérifier et mettre à jour au chargement de la page
+    updateImage();
+
+    // Détecter le changement de mode sombre
+    const observer = new MutationObserver(updateImage);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
\ No newline at end of file
diff --git a/src/pages/edit-profil-info.html b/src/pages/edit-profil-info.html
index 15b1d3f..3ecbc66 100644
--- a/src/pages/edit-profil-info.html
+++ b/src/pages/edit-profil-info.html
@@ -215,9 +215,9 @@
           <div
             class="flex flex-col md:flex-row md:items-center mt-4 mb-4 gap-9"
           >
-            <img
+              <img
               id="previewImage"
-              class="w-36 h-36 rounded-full object-cover border border-gray-300 bg-zinc-100 dark:bg-zinc-800 mt-4"
+              class="w-36 h-36 rounded-full object-cover border border-zinc-300 bg-zinc-100 dark:bg-zinc-800 mt-4"
               src=""
               alt=""
             />
@@ -264,7 +264,7 @@
               >
               <div class="flex">
                 <span
-                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600"
+                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-zinc-100 border-e-0 rounded-s-md dark:bg-zinc-800 dark:border-white/5 dark:text-gray-400"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -284,7 +284,7 @@
                 <input
                   type="text"
                   id=""
-                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:border-white/5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                   placeholder="julesmukadi"
                 />
               </div>
@@ -296,7 +296,7 @@
               >
               <div class="flex">
                 <span
-                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600"
+                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-zinc-100 border-e-0 rounded-s-md dark:bg-zinc-800 dark:border-white/5"
                 >
                   <svg
                     class="w-4 h-4 text-gray-500 dark:text-gray-400"
@@ -313,7 +313,7 @@
                 <input
                   type="text"
                   id=""
-                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:border-white/5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                   placeholder="Jules MUKADI"
                 />
               </div>
@@ -325,14 +325,14 @@
               >
               <div class="flex">
                 <span
-                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600"
+                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-zinc-100 border-e-0 rounded-s-md dark:bg-zinc-800 dark:border-white/5 dark:text-gray-400"
                 >
                   <ion-icon name="file-tray-stacked-outline"></ion-icon>
                 </span>
                 <input
                   type="text"
                   id=""
-                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:border-white/5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                   placeholder="Front-end Developer"
                 />
               </div>
@@ -344,14 +344,14 @@
               >
               <div class="flex">
                 <span
-                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600"
+                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-zinc-100 border-e-0 rounded-s-md dark:text-gray-400 dark:bg-zinc-800 dark:border-white/5"
                 >
                   <ion-icon name="mail-outline" class="size-4"></ion-icon>
                 </span>
                 <input
                   type="email"
                   id=""
-                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:border-white/5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                   placeholder="infinitytech@exemple.com"
                 />
               </div>
@@ -371,14 +371,14 @@ <h1 class="mb-3">Social profiles</h1>
               >
               <div class="flex">
                 <span
-                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600"
+                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-zinc-100 border-e-0 rounded-s-md dark:text-gray-400 dark:bg-zinc-800 dark:border-white/5"
                 >
                   <ion-icon name="logo-linkedin" class="size-4"></ion-icon>
                 </span>
                 <input
                   type="text"
                   id=""
-                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-zinc-100 p-2.5 dark:border-white/5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                   placeholder="https://www.linkedin.com/in/username/"
                 />
               </div>
@@ -390,14 +390,14 @@ <h1 class="mb-3">Social profiles</h1>
               >
               <div class="flex">
                 <span
-                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600"
+                  class="inline-flex items-center px-3 text-sm text-gray-900 border-zinc-100 bg-gray-200 border rounded-e-0 border-e-0 rounded-s-md dark:text-gray-400 dark:bg-zinc-800 dark:border-white/5"
                 >
                   <ion-icon name="logo-github" class="size-4"></ion-icon>
                 </span>
                 <input
                   type="text"
                   id=""
-                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-zinc-100 p-2.5 dark:border-white/5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                   placeholder="https://github.com/username/"
                 />
               </div>
@@ -409,7 +409,7 @@ <h1 class="mb-3">Social profiles</h1>
               >
               <div class="flex">
                 <span
-                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600"
+                  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-zinc-100 border-e-0 rounded-s-md dark:text-gray-400 dark:bg-zinc-800 dark:border-white/5"
                 >
                   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
   <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
@@ -419,14 +419,14 @@ <h1 class="mb-3">Social profiles</h1>
                 <input
                   type="text"
                   id=""
-                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-zinc-100 p-2.5 dark:border-white/5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                   placeholder="https://infinitytech.com"
                 />
               </div>
             </div>
             <button
               type="button"
-              class="text-white flex justify-center items-center gap-2 mt-12 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
+              class="text-white flex justify-center items-center gap-2 mt-12 bg-blue-700 hover:bg-blue-800 focus:ring-0 focus:ring-zinc-100 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
             >
               Update
               <svg
diff --git a/src/pages/profil-info.html b/src/pages/profil-info.html
index d6fb111..cdca22c 100644
--- a/src/pages/profil-info.html
+++ b/src/pages/profil-info.html
@@ -243,7 +243,7 @@ <h1 class="text-2xl text-black dark:text-white font-bold p-0">
               <div class="flex items-center gap-2">
                 <!-- Bouton Edit -->
                 <a
-                  href="#"
+                  href="edit-profil-info.html"
                   class="bg-blue-700 hover:bg-blue-500 duration-300 text-white px-4 py-2 rounded-full flex items-center gap-2 text-sm font-medium"
                 >
                   <ion-icon name="pencil-outline" class="text-base"></ion-icon>