diff --git a/public/login.html b/public/login.html
index 3702630..2107a36 100644
--- a/public/login.html
+++ b/public/login.html
@@ -2,25 +2,100 @@
 <html lang="fr">
 <head>
   <meta charset="UTF-8">
-  <title>Connexion WhatsApp</title>
+  <title>Connexion WhatsApp & Envoi Interactif</title>
+  <style>
+    body { font-family: Arial, sans-serif; max-width: 600px; margin: auto; padding: 20px; }
+    h1, h2 { text-align: center; }
+    #qrcode { text-align: center; margin-bottom: 20px; }
+    form { display: flex; flex-direction: column; gap: 10px; }
+    label { display: flex; flex-direction: column; font-weight: bold; }
+    input { padding: 8px; font-size: 1rem; }
+    button { padding: 10px; font-size: 1rem; cursor: pointer; }
+    #result { margin-top: 15px; font-weight: bold; }
+    hr { margin: 30px 0; }
+  </style>
 </head>
 <body>
   <h1>Scanne le QR Code WhatsApp</h1>
   <div id="qrcode">Chargement...</div>
 
+  <hr>
+
+  <h2>Envoyer du message interactif avec image</h2>
+  <form id="interactiveForm">
+    <label>
+      Téléphone (sans +, ex: 33612345678):
+      <input type="text" name="phone" required placeholder="33612345678">
+    </label>
+    <label>
+      Caption:
+      <input type="text" name="caption" placeholder="Description par défaut">
+    </label>
+    <label>
+      Title:
+      <input type="text" name="title" placeholder="Titre par défaut">
+    </label>
+    <label>
+      Subtitle:
+      <input type="text" name="subtitle" placeholder="Sous-titre">
+    </label>
+    <label>
+      Footer:
+      <input type="text" name="footer" placeholder="Pied de page">
+    </label>
+    <label>
+      URL Proposition:
+      <input type="url" name="propositionUrl" placeholder="https://exemple.com/prop.pdf" required>
+    </label>
+    <label>
+      URL Spec Machine:
+      <input type="url" name="specUrl" placeholder="https://exemple.com/spec.pdf" required>
+    </label>
+    <button type="submit">Envoyer le message</button>
+  </form>
+  <div id="result"></div>
+
   <script>
+    // Vérification du QR code et statut de connexion
     async function checkQR() {
-      const res = await fetch('/api/qrcode');
-      const data = await res.json();
-      if (data.connected) {
-        document.getElementById('qrcode').innerHTML = '✅ Connecté à WhatsApp !';
-      } else if (data.qr) {
-        document.getElementById('qrcode').innerHTML = `<img src="${data.qr}" />`;
+      try {
+        const res = await fetch('/api/qrcode');
+        const data = await res.json();
+        const qrContainer = document.getElementById('qrcode');
+        if (data.connected) {
+          qrContainer.innerHTML = '✅ Connecté à WhatsApp !';
+        } else if (data.qr) {
+          qrContainer.innerHTML = `<img src="${data.qr}" alt="QR Code WhatsApp" width="200" height="200"/>`;
+        }
+      } catch (err) {
+        console.error('Erreur checkQR:', err);
       }
       setTimeout(checkQR, 3000);
     }
-
     checkQR();
+
+    // Envoi du formulaire interactif
+    document.getElementById('interactiveForm').addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const formData = new FormData(e.target);
+      const body = {};
+      formData.forEach((value, key) => body[key] = value);
+
+      const res = await fetch('/sendInteractiveImage', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body)
+      });
+      const data = await res.json();
+      const resultDiv = document.getElementById('result');
+      if (data.success) {
+        resultDiv.textContent = '✅ Message envoyé avec succès';
+        resultDiv.style.color = 'green';
+      } else {
+        resultDiv.textContent = '❌ Erreur : ' + (data.error || 'Inconnue');
+        resultDiv.style.color = 'red';
+      }
+    });
   </script>
 </body>
 </html>
