diff --git a/Vue/connexion.php b/Vue/connexion.php
index 5e2239c..10a5753 100644
--- a/Vue/connexion.php
+++ b/Vue/connexion.php
@@ -2,17 +2,31 @@
 <html lang="fr">
 <head>
     <meta charset="UTF-8">
-    <title>GSB Application - Accueil</title>
-    <link rel="stylesheet" href="../Styles\style.css">
+    <title>GSB Application - Connexion</title>
+    <link rel="stylesheet" href="../Styles/style.css">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
     <link href="https://fonts.googleapis.com/css2?family=Barlow&family=Cormorant+Garamond:ital@1&display=swap" rel="stylesheet">
-    <link rel="icon" href="../Images\logodetoure.gif" type="image/png">
+    <link rel="icon" href="../Images/logodetoure.gif" type="image/png">
     <style>
         body {
             font-family: 'Barlow', sans-serif;
         }
     </style>
+    <script>
+        // Fonction de validation du formulaire
+        function validateForm() {
+            const username = document.getElementById('username').value;
+            const password = document.getElementById('password').value;
+            const role = document.querySelector('input[name="role"]:checked');
+
+            if (username == "" || password == "" || !role) {
+                alert("Tous les champs doivent être remplis, y compris le choix du rôle.");
+                return false;
+            }
+            return true;
+        }
+    </script>
 </head>
 <body>
 
@@ -26,6 +40,37 @@
 </header>
 
 <main class="main-content">
+    <h2>Connexion à l'application</h2>
+    
+    <form action="authentification.php" method="POST" onsubmit="return validateForm()">
+        <div class="mb-3">
+            <label for="username" class="form-label">Nom d'utilisateur</label>
+            <input type="text" class="form-control" id="username" name="username" required>
+        </div>
+
+        <div class="mb-3">
+            <label for="password" class="form-label">Mot de passe</label>
+            <input type="password" class="form-control" id="password" name="password" required>
+        </div>
+
+        <div class="mb-3">
+            <label class="form-label">Choisissez votre rôle</label>
+            <div class="form-check">
+                <input class="form-check-input" type="radio" name="role" id="praticien" value="praticien">
+                <label class="form-check-label" for="praticien">
+                    Praticien
+                </label>
+            </div>
+            <div class="form-check">
+                <input class="form-check-input" type="radio" name="role" id="visiteur" value="visiteur">
+                <label class="form-check-label" for="visiteur">
+                    Visiteur
+                </label>
+            </div>
+        </div>
+
+        <button type="submit" class="btn btn-primary">Se connecter</button>
+    </form>
 </main>
 
 <footer class="main-footer">
