diff --git a/ruty/styles/styletodo.css b/ruty/styles/styletodo.css
index 5bab4e8..89fa8e2 100644
--- a/ruty/styles/styletodo.css
+++ b/ruty/styles/styletodo.css
@@ -139,4 +139,18 @@ li.nav2:hover {
     .checkbox-wrapper input[type="checkbox"]:checked + .terms-label .checkbox-tick {
     stroke-dashoffset: 0;
   }
-  
\ No newline at end of file
+  
+/* Styles CSS pour le menu contextuel */
+.task-menu {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 150px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    padding: 12px;
+    z-index: 1;
+}
+.task-menu-item {
+    padding: 8px 12px;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/ruty/todo.php b/ruty/todo.php
index 12e8993..3dea36b 100644
--- a/ruty/todo.php
+++ b/ruty/todo.php
@@ -1,31 +1,5 @@
 <html>
     <head>
-    <?php
-        // Connexion à la base de données
-        $conn = mysqli_connect("localhost", "user1", "admin123", "ruty");
-
-        // Vérifier la connexion
-        if ($conn->connect_error) {
-            die("Erreur de connexion à la base de données : " . $conn->connect_error);
-        }
-
-        // Sélectionner les tâches depuis la base de données
-        $sql = "SELECT id, task_name, completed FROM tasks";
-        $result = $conn->query($sql);
-
-        if ($result->num_rows > 0) {
-            while($row = $result->fetch_assoc()) {
-                $taskId = $row["id"];
-                $taskName = $row["task_name"];
-                $completed = $row["completed"] ? "checked" : "";
-
-                echo "<li><input type='checkbox' $completed onchange='updateTask($taskId, this.checked)'> $taskName</li>";
-            }
-        } else {
-            echo "Aucune tâche trouvée.";
-        }
-        $conn->close();
-        ?>
         <title>Ruty - ToDo List</title>
         <link rel="stylesheet" href="styles/styletodo.css">
         <link rel="icon" href="img/logo.png">        
@@ -46,25 +20,75 @@
 
 <!-- Liste de tâches -->
 <h2>Tâches en cours</h2>
-<!-- <script>
-    for(i = 0; i < <?php echo $row ?>; i++){
-        container.innerHTML(
-            <div class="checkbox-wrapper">
-                <input id="terms-checkbox-37" name="checkbox" type="checkbox">
-                <label class="terms-label" for="terms-checkbox-37">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" class="checkbox-svg">
-                        <mask fill="white" id="path-1-inside-1_476_5-37">
-                            <rect height="200" width="200"></rect>
-                        </mask>
-                        <rect mask="url(#path-1-inside-1_476_5-37)" stroke-width="40" class="checkbox-box" height="200" width="200"></rect>
-                        <path stroke-width="15" d="M52 111.018L76.9867 136L149 64" class="checkbox-tick"></path>
-                    </svg>
-                <span class="label-text">Checkbox</span>
-                </label>
-            </div>
-        );
+<ul id="todo-list">
+    <?php
+     // Connexion à la base de données
+    $conn = mysqli_connect("localhost", "user1", "admin123", "ruty");
+
+    // Vérifier la connexion
+    if ($conn->connect_error) {
+        die("Erreur de connexion à la base de données : " . $conn->connect_error);
     }
-</script>-->
+
+    // Sélectionner les tâches depuis la base de données
+    $sql = "SELECT id, task_name, completed FROM tasks";
+    $result = $conn->query($sql);
+
+    if ($result->num_rows > 0) {
+        while($row = $result->fetch_assoc()) {
+            $taskId = $row["id"];
+            $taskName = $row["task_name"];
+            $completed = $row["completed"] ? "checked" : "";
+
+            echo "<li><input type='checkbox' $completed onchange='updateTask($taskId, this.checked)'> $taskName</li>";
+        }
+    } else {
+        echo "Aucune tâche trouvée.";
+    }
+    $conn->close();
+    ?>
+</ul>
+
+<!-- Menu contextuel pour la tâche -->
+<div id="task-menu" class="task-menu">
+    <div id="task-name"></div>
+    <div id="task-status"></div>
+    <div id="task-description"></div>
+    <div id="task-tags"></div>
+    <button id="edit-task">Modifier</button>
+    <button id="delete-task">Supprimer</button>
+    <button id="close-menu">Fermer</button>
+</div>
+
+<script>
+    document.addEventListener("DOMContentLoaded", function() {
+        const todoList = document.getElementById("todo-list");
+        const taskMenu = document.getElementById("task-menu");
+
+        // Afficher le menu contextuel lorsqu'une tâche est cliquée
+        todoList.addEventListener("click", function(event) {
+            const targetTask = event.target.closest(".task");
+            if (targetTask) {
+                const taskId = targetTask.getAttribute("data-task-id");
+                const taskName = targetTask.textContent;
+                const taskMenuItems = taskMenu.querySelectorAll(".task-menu-item");
+                document.getElementById("task-name").textContent = "Nom de la tâche: " + taskName;
+                document.getElementById("task-status").textContent = "État de la tâche: Complétée/Incomplète";
+                document.getElementById("task-description").textContent = "Description de la tâche: Description de la tâche ici.";
+                document.getElementById("task-tags").textContent = "Tags associés à la tâche: Tag1, Tag2";
+                taskMenuItems.forEach(item => item.style.display = "block"); // Afficher les éléments du menu
+                taskMenu.style.display = "block"; // Afficher le menu
+            }
+        });
+
+        // Fermer le menu contextuel lorsque le bouton "Fermer" est cliqué
+        document.getElementById("close-menu").addEventListener("click", function() {
+            taskMenu.style.display = "none";
+        });
+    });
+</script>
+
+</script>
     <!-- Script pour mettre à jour l'état d'une tâche -->
     <script>
         function updateTask(taskId, completed) {
