diff --git a/src/main.js b/src/main.js
index ffb7d9e..5ff943c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -183,27 +183,68 @@ document.addEventListener('DOMContentLoaded', () => {
 })
 /******************** End Articles display management ***********************/
 
+// Gestion affichage de l'image dans edit-profil-info.html
 
+document.addEventListener('DOMContentLoaded', function () {
+	const profileImageInput = document.getElementById('profileImage')
+	if (profileImageInput) {
+		profileImageInput.addEventListener('change', function (event) {
+			const file = event.target.files[0]
+			if (file) {
+				const reader = new FileReader()
+				reader.onload = function (e) {
+					const preview = document.getElementById('previewImage')
+					if (preview) {
+						preview.src = e.target.result
+					}
+				}
+				reader.readAsDataURL(file)
+			}
+		})
+	}
+})
 
-// Gestion affichage de l'image dans edit-profil-info.html
-document.getElementById("profileImage").addEventListener("change", function(event) {
-  const file = event.target.files[0];
-  if (file) {
-      const reader = new FileReader();
-      reader.onload = function(e) {
-          document.getElementById("previewImage").src = e.target.result;
-      };
-      reader.readAsDataURL(file);
-  }
-});
-
-document.getElementById("profileImage").addEventListener("change", function(event) {
-    const file = event.target.files[0];
-    if (file) {
-        const reader = new FileReader();
-        reader.onload = function(e) {
-            document.getElementById("previewImage").src = e.target.result;
-        };
-        reader.readAsDataURL(file);
-    }
-});
+//Form Wave animation
+document.addEventListener('DOMContentLoaded', () => {
+	const formControls = document.querySelectorAll('.form-control')
+
+	formControls.forEach((control) => {
+		const label = control.querySelector('label')
+		const input = control.querySelector('input, textarea')
+
+		if (label && input) {
+			const originalText = label.innerText // Stocke le texte original
+			console.log('Focused')
+			// Transformer le label en une série de <span>
+			label.innerHTML = originalText
+				.split('')
+				.map(
+					(letter, index) =>
+						`<span style="--delay:${index * 60}ms">${letter}</span>`
+				)
+				.join('')
+
+			const spans = label.querySelectorAll('span')
+
+			input.addEventListener('focus', () => {
+				spans.forEach((span, index) => {
+					span.style.transitionDelay = `${index * 60}ms`
+					span.style.transform = 'translateY(-100%)'
+					span.style.fontSize = '14px'
+					span.style.color = '#155dfc'
+				})
+			})
+
+			input.addEventListener('blur', () => {
+				if (input.value === '') {
+					spans.forEach((span, index) => {
+						span.style.transitionDelay = `${index * 60}ms`
+						span.style.transform = 'translateY(0)'
+						span.style.fontSize = '16px'
+						span.style.color = '#9f9fa9'
+					})
+				}
+			})
+		}
+	})
+})
diff --git a/src/pages/contact.html b/src/pages/contact.html
index 28bc87b..2cec81d 100644
--- a/src/pages/contact.html
+++ b/src/pages/contact.html
@@ -259,51 +259,79 @@ <h2 class="text-5xl font-bold text-balance">
           </div>
         </div>
         <!-- Contact Form -->
-        <div class="py-6">
-          <form class="bg-white dark:bg-transparent p-8 w-full">
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-              <div>
-                <label
-                  class="block text-zinc-700 dark:text-zinc-300 text-sm font-medium"
-                  >Nom</label
-                >
-                <input
-                  type="text"
-                  class="w-full bg-transparent border-b border-zinc-300 dark:border-zinc-600 text-zinc-900 dark:text-white focus:outline-none focus:border-blue-600 dark:focus:border-blue-400 py-2"
-                />
-              </div>
-              <div>
-                <label
-                  class="block text-zinc-700 dark:text-zinc-300 text-sm font-medium"
-                  >Email</label
-                >
-                <input
-                  type="email"
-                  class="w-full bg-transparent border-b border-zinc-300 dark:border-zinc-600 text-zinc-900 dark:text-white focus:outline-none focus:border-blue-600 dark:focus:border-blue-400 py-2"
-                />
-              </div>
-              <div>
-                <label
-                  class="block text-zinc-700 dark:text-zinc-300 text-sm font-medium"
-                  >Telephone (optional)</label
-                >
-                <input
-                  type="text"
-                  class="w-full bg-transparent border-b border-zinc-300 dark:border-zinc-600 text-zinc-900 dark:text-white focus:outline-none focus:border-blue-600 dark:focus:border-blue-400 py-2"
-                />
-              </div>
-            </div>
+				<div class="py-6">
+					<form class="bg-white dark:bg-transparent p-8 w-full">
+						<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+							<div class="form-control relative">
+								<label
+									class="absolute left-0 top-1/2 transform -translate-y-1/2 text-zinc-400 transition-all duration-200 pointer-events-none"
+									>Nom</label
+								>
+								<input
+									type="text"
+									class="w-full bg-transparent border-b border-zinc-300 dark:border-zinc-600 text-zinc-900 dark:text-white focus:outline-none focus:border-blue-600 dark:focus:border-blue-400 py-2 pt-3" />
+							</div>
+							<div class="form-control relative">
+								<label
+									class="absolute left-0 top-1/2 transform -translate-y-1/2 text-zinc-400 transition-all duration-200 pointer-events-none"
+									>Email</label
+								>
+								<input
+									type="email"
+									class="w-full bg-transparent border-b border-zinc-300 dark:border-zinc-600 text-zinc-900 dark:text-white focus:outline-none focus:border-blue-600 dark:focus:border-blue-400 py-2 pt-3" />
+							</div>
+							<div class="form-control relative">
+								<label
+									class="absolute left-0 top-1/2 transform -translate-y-1/2 text-zinc-400 transition-all duration-200 pointer-events-none"
+									>Telephone (optional)</label
+								>
+								<input
+									type="text"
+									pattern="^\+?[0-9]{1,4}?[-.\s]?[0-9]{1,15}$"
+									class="w-full bg-transparent border-b border-zinc-300 dark:border-zinc-600 text-zinc-900 dark:text-white focus:outline-none focus:border-blue-600 dark:focus:border-blue-400 py-2 pt-3" />
+							</div>
+						</div>
 
-            <div class="mt-6">
-              <label
-                class="block text-zinc-700 dark:text-zinc-300 text-sm font-medium"
-                >Message</label
-              >
-              <textarea
-                class="w-full bg-transparent border-b border-zinc-300 dark:border-zinc-600 text-zinc-900 dark:text-white focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 py-2 h-24"
-              ></textarea>
-            </div>
+						<div class="mt-6 form-control relative">
+							<label
+								class="absolute left-0 top-5 transform -translate-y-1/2 text-zinc-400 transition-all duration-200 pointer-events-none"
+								>Message</label
+							>
+							<textarea
+								class="w-full bg-transparent border-b border-zinc-300 dark:border-zinc-600 text-zinc-900 dark:text-white focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 py-2 h-28"></textarea>
+						</div>
 
+						<div class="mt-6">
+							<button
+								type="submit"
+								class="flex items-center gap-3 bg-blue-600 dark:bg-blue-600 text-white px-6 py-3 rounded-full w-full md:w-auto hover:bg-blue-500 dark:hover:bg-blue-500 transition duration-300 cursor-pointer">
+								<span>Laissez-nous un message</span>
+								<ion-icon name="arrow-forward-outline"></ion-icon>
+							</button>
+						</div>
+					</form>
+				</div>
+			</section>
+			<!-- Contact infos -->
+			<section
+				class="py-18 dark:bg-transparent overflow-hidden px-8 md:px-6 relative">
+				<img
+					src="/src/assets/bg_contact_infos.svg"
+					class="absolute z-0 mix-blend-difference h-full w-full object-cover inset-0"
+					alt="" />
+				<div
+					class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 items-start">
+					<!-- Texte principal -->
+					<div class="md:col-span-1">
+						<h3
+							class="text-zinc-600 dark:text-zinc-400 text-sm font-medium mb-3 uppercase">
+							Nos contacts
+						</h3>
+						<h2
+							class="text-3xl md:text-4xl font-bold text-zinc-900 dark:text-zinc-100 mt-2 text-balance">
+							Nous sommes toujours heureux de vous aider
+						</h2>
+					</div>
             <div class="mt-6">
               <button
                 type="submit"
diff --git a/src/style.css b/src/style.css
index 9daacf1..9ed247f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,40 +1,48 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 
-@import "tailwindcss";
+@import 'tailwindcss';
 
 @custom-variant dark (&:where(.dark, .dark *));
 
 body {
-  font-family: "Poppins", serif;
+	font-family: 'Poppins', serif;
 }
 
 .skewbox {
-  background-image: radial-gradient(#4242e365 1px, transparent 1px),
-    radial-gradient(#1760c734 1px, transparent 1px);
-  background-size: 21px 21px;
-  background-position: 0 0, 10.5px 10.5px;
-  background-color: rgba(71, 212, 255, 0);
+	background-image: radial-gradient(#4242e365 1px, transparent 1px),
+		radial-gradient(#1760c734 1px, transparent 1px);
+	background-size: 21px 21px;
+	background-position: 0 0, 10.5px 10.5px;
+	background-color: rgba(71, 212, 255, 0);
 }
 
 #hero-title {
-  font-family: "Inter", serif;
+	font-family: 'Inter', serif;
 }
 
 .aboutbox {
-  background-image: repeating-linear-gradient(
-    45deg,
-    rgba(19, 22, 231, 0.242) 0,
-    rgba(19, 22, 231, 0.258) 0.5px,
-    transparent 0,
-    transparent 50%
-  );
-  background-size: 15px 15px;
-  background-color: rgba(71, 212, 255, 0);
+	background-image: repeating-linear-gradient(
+		45deg,
+		rgba(19, 22, 231, 0.242) 0,
+		rgba(19, 22, 231, 0.258) 0.5px,
+		transparent 0,
+		transparent 50%
+	);
+	background-size: 15px 15px;
+	background-color: rgba(71, 212, 255, 0);
 }
 
-.aboutusfirst{
-  background-image: linear-gradient(#3229e728 0.5px, transparent 0.5px), linear-gradient(to right, #5c29e728 0.5px, transparent 0.5px);
-  background-size: 27px 27px;
-  background-color: rgba(245, 120, 155, 0);
-}
\ No newline at end of file
+.aboutusfirst {
+	background-image: linear-gradient(#3229e728 0.5px, transparent 0.5px),
+		linear-gradient(to right, #5c29e728 0.5px, transparent 0.5px);
+	background-size: 27px 27px;
+	background-color: rgba(245, 120, 155, 0);
+}
+
+/* Form wave animation */
+.form-control label span {
+	display: inline-block;
+	transition: all 0.3s ease-in-out;
+	transition-delay: var(--delay);
+}