diff --git a/form-handler.js b/form-handler.js
new file mode 100644
index 0000000..3b2e7bb
--- /dev/null
+++ b/form-handler.js
@@ -0,0 +1,29 @@
+document.getElementById("contact-form").addEventListener("submit", function (e) {
+    e.preventDefault();
+
+    // Get form values
+    const name = document.getElementById("name").value;
+    const email = document.getElementById("email").value;
+    const message = document.getElementById("message").value;
+
+    // Prepare parameters for EmailJS
+    const params = {
+        from_name: name,
+        from_email: email,
+        message: message,
+    };
+
+    // Send email using EmailJS
+    emailjs.send("service_auuixzl", "template_9w001tg", params)
+        .then(response => {
+            document.getElementById("response-message").textContent =
+                "Your message has been sent successfully!";
+            document.getElementById("response-message").classList.remove("hidden");
+            document.getElementById("contact-form").reset();
+        })
+        .catch(error => {
+            document.getElementById("response-message").textContent =
+                "There was an error sending your message. Please try again.";
+            document.getElementById("response-message").classList.remove("hidden");
+        });
+});
\ No newline at end of file
diff --git a/form.html b/form.html
index bbebc68..deb1f9f 100644
--- a/form.html
+++ b/form.html
@@ -3,112 +3,62 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Contact Us</title>
-    <!-- Tailwind CSS via CDN -->
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link type="text/css" rel="stylesheet" href="style.css">
     <script src="effect.js" defer></script>
+    <title>Contact Form</title>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- EmailJS SDK -->
+    <script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
+    <script>
+        (function() {
+            emailjs.init("YOUR_EMAILJS_PUBLIC_KEY"); // Replace with your EmailJS public key
+        })();
+    </script>
+    <link rel="stylesheet" href="style.css">
 </head>
 <body class="bg-gray-50 text-gray-800">
-
     <!-- Navigation -->
     <nav class="navbar bg-gray-200 shadow-lg">
         <ul class="navbar-list flex justify-around items-center py-4">
             <li><a href="index.html" class="text-gray-700 hover:text-blue-500">Accueil</a></li>
             <li><a href="cursus.html" class="text-gray-700 hover:text-blue-500">Cursus</a></li>
             <li><a href="planning.html" class="text-gray-700 hover:text-blue-500">Planning</a></li>
-            <li class="dropdown relative">
-                <a href="#" class="text-gray-700 hover:text-blue-500">Gallerie</a>
-                <ul class="dropdown-content absolute left-0 mt-2 bg-white shadow-lg p-4 hidden">
-                    <li><a href="images.html" class="hover:text-blue-500">Images</a></li>
-                    <li><a href="videos.html" class="hover:text-blue-500">Vidéos</a></li>
-                </ul>
-            </li>
-            <li><a href="form.html" class="text-gray-700 hover:text-blue-500">Formulaire</a></li>
+            <li><a href="gallery.html" class="text-gray-700 hover:text-blue-500">Gallery</a></li>
+            <li><a href="form.html" class="text-gray-700 hover:text-blue-500">Contact</a></li>
             <label class="switch">
-                <input type="checkbox" id="theme-switch">
-                <span class="slider"></span>
+              <input type="checkbox" id="theme-switch">
+              <span class="slider"></span>
             </label>
         </ul>
+        
     </nav>
 
     <!-- Contact Form -->
-    <form action="process_form.php" method="POST" id="contact-form">
-    <div class="container px-4 mx-auto mt-10">
+    <form id="contact-form" class="container mx-auto mt-10 px-4">
         <div class="max-w-md mx-auto px-8 py-6 bg-gray-800 rounded-lg shadow-lg">
-          <h2 class="text-2xl font-semibold text-white mb-4">Contact Us</h2>
-          <form>
+            <h2 class="text-2xl font-semibold text-white mb-4">Contact Us</h2>
             <div class="mb-4">
-              <label class="block text-white mb-1" for="name">Your Name</label>
-              <input
-                class="w-full px-4 py-2 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-300 transition duration-300"
-                placeholder="Enter your name"
-                type="text"
-                name="name"
-                id="name"
-              />
+                <label class="block text-white mb-1" for="name">Your Name</label>
+                <input class="w-full px-4 py-2 bg-gray-700 rounded-lg focus:ring-2 focus:ring-yellow-300 transition"
+                       type="text" name="name" id="name" required>
             </div>
             <div class="mb-4">
-              <label class="block text-white mb-1" for="email">Your Email</label>
-              <input
-                class="w-full px-4 py-2 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-300 transition duration-300"
-                placeholder="Enter your email"
-                type="email"
-                name="email"
-                id="email"
-              />
+                <label class="block text-white mb-1" for="email">Your Email</label>
+                <input class="w-full px-4 py-2 bg-gray-700 rounded-lg focus:ring-2 focus:ring-yellow-300 transition"
+                       type="email" name="email" id="email" required>
             </div>
             <div class="mb-4">
-              <label class="block text-white mb-1" for="message">Your Message</label>
-              <textarea
-                class="w-full px-4 py-2 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-300 transition duration-300"
-                rows="4"
-                placeholder="Enter your message"
-                name="message"
-                id="message"
-              ></textarea>
+                <label class="block text-white mb-1" for="message">Your Message</label>
+                <textarea class="w-full px-4 py-2 bg-gray-700 rounded-lg focus:ring-2 focus:ring-yellow-300 transition"
+                          name="message" id="message" rows="4" required></textarea>
             </div>
-            <button
-              class="w-full bg-yellow-300 text-gray-800 py-2 px-4 rounded-lg hover:bg-yellow-400 transition duration-300"
-              type="submit"
-            >
-              Send Message
-            </button>
-          </form>
+            <button class="w-full bg-yellow-300 text-gray-800 py-2 rounded-lg hover:bg-yellow-400 transition"
+                    type="submit">Send Message</button>
         </div>
-      </div>
-
-    <!-- JavaScript to Handle Form Submission -->
-    <script>
-        document.getElementById('contact-form').addEventListener('submit', function (e) {
-            e.preventDefault();
-
-            const name = document.getElementById('name').value;
-            const email = document.getElementById('email').value;
-            const message = document.getElementById('message').value;
-
-            // Display confirmation message
-            const responseMessage = document.getElementById('form-response');
-            responseMessage.textContent = `Thank you, ${name}! Your message has been sent successfully.`;
-            responseMessage.classList.remove('hidden');
-
-            // Clear the form
-            e.target.reset();
-
-            // Example: Send data via fetch to a backend API (optional)
-            /*
-            fetch('your-backend-endpoint', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({ name, email, message })
-            });
-            */
-        });
-    </script>
+    </form>
+    <p id="response-message" class="hidden text-center mt-4 text-white"></p>
 
+    <!-- External JS -->
+    <script src="form-handler.js"></script>
 </body>
-</html>
-
-
+</html>
\ No newline at end of file
diff --git a/process_form.php b/process_form.php
deleted file mode 100644
index 3730159..0000000
--- a/process_form.php
+++ /dev/null
@@ -1,33 +0,0 @@
-<?php
-if ($_SERVER["REQUEST_METHOD"] == "POST") {
-    $name = htmlspecialchars($_POST['name']);
-    $email = filter_var($_POST['email'], FILTER_VALIDATE_EMAIL);
-    $message = htmlspecialchars($_POST['message']);
-
-    if ($name && $email && $message) {
-        // Recipient email
-        $to = "corentin.caillot03@gmail.com";
-
-        // Email subject
-        $subject = "New Contact Form Submission";
-
-        // Email content
-        $body = "You have received a new message from your website's contact form:\n\n";
-        $body .= "Name: $name\n";
-        $body .= "Email: $email\n";
-        $body .= "Message:\n$message\n";
-
-        // Email headers
-        $headers = "From: $email";
-
-        // Send the email
-        if (mail($to, $subject, $body, $headers)) {
-            echo "Your message has been sent successfully!";
-        } else {
-            echo "There was an issue sending your message. Please try again later.";
-        }
-    } else {
-        echo "Invalid input. Please make sure all fields are filled out correctly.";
-    }
-}
-?>
