diff --git a/src/API/requests.php b/src/API/requests.php
index 42e4ae4..144d77a 100644
--- a/src/API/requests.php
+++ b/src/API/requests.php
@@ -16,10 +16,6 @@ $pdo = dbConnect();
 
 $router = new Router();
 
-$router->GET('/api/requests', ["test"], function($test){
-    echo json_encode($test);
-});
-
 $router->GET('/api/search-type', ["type"], function($type){
     global $pdo;
     searchDoctor($pdo, $type);
@@ -58,9 +54,6 @@ $router->PUT('/api/rdv', ["rdv_id", "patient_id"], function($rdv_id, $patient_id
     global $pdo;
     takeRDV($pdo, $rdv_id, $patient_id);
 });
-$router->POST('/api/requests', ["test"], function($test){
-    echo json_encode($test);
-});
 
 $router->POST('/api/login/patient', ["mail", "password"], function($mail, $password){
     global $pdo;
@@ -117,13 +110,10 @@ $router->PUT('/api/change/mail', ["id", "currentMail", "newMail"], function($id,
     Patient::updateMail($pdo, $id, $currentMail, $newMail);
 });
 
-$router->PUT('/api/requests', ["test"], function($test){
-    echo json_encode($test);
-});
 
-$router->DELETE('/api/requests', ["test"], function($test){
-    echo json_encode($test);
-});
+//Yanis Part
+
+
 
 $router->GET('/api/rdv-praticient', ["id"], function($id){
     global $pdo;
@@ -135,20 +125,19 @@ $router->GET('/api/rdv-praticient/getAllLieux', [], function(){
     getAllLieux($pdo);
 });
 
-$router->GET('/api/rdv-patient', ["id"], function($id){
+$router->GET('/api/next-rdv-patient', ["id"], function($id){
     global $pdo;
     dbRequestRdvPatient($pdo, $id);
+});
+
+$router->GET('/api/past-rdv-patient', ["id"], function($id){
+    global $pdo;
     getPastRdvByPatient($pdo, $id);
 });
 
-$router->DELETE('/api/delete-empty', ["id"], function($id){
+$router->DELETE('/api/cancel-empty-rdv', ["id"], function($id){
     global $pdo;
-    DeleteEmptyRdv($pdo, $id);
-});
-
-$router->DELETE('/api/cancel-rdv', ["id"], function($id){
-    global $pdo;
-    CancelRDV($pdo, $id);
+    CancelEmptyRDV($pdo, $id);
 });
 
 $router->POST('/api/create-rdv', ["medID", "date", "time", "lieu"], function($medID, $date, $time, $lieu){
@@ -156,4 +145,11 @@ $router->POST('/api/create-rdv', ["medID", "date", "time", "lieu"], function($me
     CreateRDV($pdo, $medID, $date, $time, $lieu);
 });
 
+$router->PUT('/api/cancel-rdv-patient', ["id"], function($id){
+    global $pdo;
+    CancelRDVFromPatient($pdo, $id);
+});
+
+//End of Yanis Part
+
 $router->run();
diff --git a/src/API/test/database.php b/src/API/test/database.php
index 6c0b3e8..74f9dfd 100644
--- a/src/API/test/database.php
+++ b/src/API/test/database.php
@@ -1,22 +1,6 @@
 <?php
 require_once('src/response.php');
 
-/*function dbConnect()
-{
-    try
-    {
-        $db = new PDO('pgsql:host='.DB_SERVER.';port='.DB_PORT.';dbname='.DB_NAME, DB_USER, DB_PASSWORD);
-        $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
-    }
-    catch (PDOException $exception)
-    {
-        error_log('Connection error: '.$exception->getMessage());
-        return false;
-    }
-    return $db;
-}*/
-
-
 function dbRequestRdvPraticien($pdo, $id){
     $statement = $pdo->prepare("SELECT rdv_date, rdv_time, concat(p_name,' ', p_surname) as patient, p_mail, p_phone
     FROM rendez_vous
@@ -32,16 +16,11 @@ function dbRequestRdvPraticien($pdo, $id){
     $statement->execute();
     $result = $statement->fetchAll(PDO::FETCH_ASSOC);
 
-    if (!empty($result)) {
-        Response::HTTP200($result);
-    } else {
-        Response::HTTP404(["error" => "No data found"]);
-    }
-
+    Response::HTTP200($result);
 }
 
 function dbRequestRdvPatient($pdo, $id){
-    $statement = $pdo->prepare("SELECT rdv_date, rdv_time, concat(m_name, ' ', m_surname) as medecin, medecin.m_specialty, medecin.m_id, concat(p_name, ' ', p_surname) as patient, l_adress as adresse, concat(l_postal, ' ', l_city) as ville
+    $statement = $pdo->prepare("SELECT rendez_vous.rdv_id, rdv_date, rdv_time, concat(m_name, ' ', m_surname) as medecin, medecin.m_specialty as med_spe, medecin.m_id, concat(p_name, ' ', p_surname) as patient, l_adress as adresse, concat(l_postal, ' ', l_city) as ville
     FROM rendez_vous
     INNER JOIN patient ON rendez_vous.p_id = patient.p_id
     INNER JOIN propose ON rendez_vous.rdv_id = propose.rdv_id
@@ -49,21 +28,18 @@ function dbRequestRdvPatient($pdo, $id){
     INNER JOIN lieu on lieu.l_id = rendez_vous.l_id
     
     WHERE NOW() <= (rdv_date + rdv_time) AND patient.p_id = :id
-    ORDER BY rdv_date ASC, rdv_time ASC");
+    ORDER BY rdv_date ASC, rdv_time ASC
+    LIMIT 5");
 
     $statement->bindParam(':id', $id);
     $statement->execute();
     $result = $statement->fetchAll(PDO::FETCH_ASSOC);
 
-    if (!empty($result)) {
-        Response::HTTP200($result);
-    } else {
-        Response::HTTP404(["error" => "No data found"]);
-    }
+    Response::HTTP200($result);
 }
 
 function getPastRdvByPatient($pdo, $id){
-    $statement = $pdo->prepare("SELECT rdv_date, rdv_time, concat(m_name, ' ', m_surname) as medecin, medecin.m_specialty, medecin.m_id, concat(p_name, ' ', p_surname) as patient, l_adress as adresse, concat(l_postal, ' ', l_city) as ville
+    $statement = $pdo->prepare("SELECT rdv_date, rdv_time, concat(m_name, ' ', m_surname) as medecin, medecin.m_specialty as med_spe, medecin.m_id, concat(p_name, ' ', p_surname) as patient, l_adress as adresse, concat(l_postal, ' ', l_city) as ville
     FROM rendez_vous
     INNER JOIN patient ON rendez_vous.p_id = patient.p_id
     INNER JOIN propose ON rendez_vous.rdv_id = propose.rdv_id
@@ -137,17 +113,19 @@ function CreateRDV($pdo, $medID, $date, $time, $lieu){
     }
 }
 
-function DeleteEmptyRdv($pdo, $id)
-{
-    $statement = $pdo->prepare("SELECT p_id FROM rendez_vous WHERE rdv_id = :id");
+function CancelEmptyRDV($pdo, $id){
+    $statement = $pdo->prepare("DELETE FROM propose WHERE rdv_id = :id");
     $statement->bindParam(':id', $id);
     $statement->execute();
-    $result = $statement->fetch(PDO::FETCH_ASSOC);
-    if ($result['p_id'] == null) {
-        $statement = $pdo->prepare("DELETE FROM rendez_vous WHERE rdv_id = :id");
-        $statement->bindParam(':id', $id);
-        $statement->execute();
-        Response::HTTP200(["Success" => "RDV deleted"]);
-    }
-    Response::HTTP403(["Forbidden" => "This RDV is not empty"]);
+    $statement = $pdo->prepare("DELETE FROM rendez_vous WHERE rdv_id = :id");
+    $statement->bindParam(':id', $id);
+    $statement->execute();
+    Response::HTTP200(["Success" => "RDV deleted"]);
+}
+
+function CancelRDVFromPatient($pdo, $id){
+    $statement = $pdo->prepare("UPDATE public.rendez_vous SET p_id = null WHERE rdv_id = :id");
+    $statement->bindParam(':id', $id);
+    $statement->execute();
+    Response::HTTP200(["Success" => "RDV deleted"]);
 }
\ No newline at end of file
diff --git a/src/API/test/request.php b/src/API/test/request.php
deleted file mode 100644
index 11aedc2..0000000
--- a/src/API/test/request.php
+++ /dev/null
@@ -1,26 +0,0 @@
-<?php
-require_once "database.php";
-$PDO = dbConnect();
-$request = substr($_SERVER['PATH_INFO'], 1);
-$request = explode('/', $request);
-$requestRessource = array_shift($request);
-$method = $_SERVER["REQUEST_METHOD"];
-
-parse_str(file_get_contents('php://input'), $_PUT);
-
-if($method === "GET" && isset($_GET)){ // Want tweets of a specific user
-    $rdvOfPraticien = dbRequestRdvPraticien($PDO, $_GET["login"]);
-    echo json_encode($rdvOfPraticien);
-}
-
-if($method === "POST" && isset($_POST)){
-    $success = CreateRDV($PDO, $_POST["login"], $_POST["date"], $_POST["time"], $_POST["lieu"]);
-    echo json_encode($success);
-}
-
-if($method === "DELETE" && isset($_GET)){
-    $id = array_shift($request);
-    $success = DeleteEmptyRdv($PDO, $_GET["rdv"]);
-    echo json_encode($success);
-}
-
diff --git a/src/js/AJAX/home.js b/src/js/AJAX/home.js
index 80293a5..c9b020d 100644
--- a/src/js/AJAX/home.js
+++ b/src/js/AJAX/home.js
@@ -2,6 +2,8 @@ import {TokenDecode} from "./lib.js";
 import {attachSearchEventListener, removeSearchTopBar} from "./search.js";
 import {displayAlert} from "./alert.js";
 import {attachLoginPraticienDisplayEventListener, attachLoginUserDisplayEventListener, attachDisconnectEventListener} from "./login.js";
+import {ButtonShowRdvPraticient} from "./rdv-praticien.js";
+import {ButtonShowRdvPatient} from "./rdv-patient.js";
 console.log("home.js loaded");
 
 function displayHomeTopBar() {
@@ -57,11 +59,11 @@ function displayHomeTopBar() {
             topbar.innerHTML = `
                 <div id="topInfo">
                             <a id="home">
-                                <p id="DoctISEN" class="top-0 position-fixed">
+                                <p id="DoctISEN" class="top-0">
                                     Doct'ISEN
                                 </p>
                             </a>
-                            <div class="d-flex position-fixed end-0 flex-row align-items-center gap-3 mt-2 top-0">
+                            <div class="d-flex position-absolute end-0 flex-row align-items-center gap-3 mt-2 top-0">
                                 <img src="https://www.gravatar.com/avatar/${mailMD5}?s=64" alt="avatar" id="avatar" style="width: 14.3%; height: auto; border-radius: 50%">
                                 <div class="dropdown">
                                     <a class="text-white dropdown-toggle" id="user-name-dropdown" data-bs-toggle="dropdown">${user.name} ${user.surname}</a>
@@ -137,6 +139,8 @@ function displayHome(text) {
             </footer>`;
     attachSearchEventListener();
     attachLoginUserDisplayEventListener();
+    ButtonShowRdvPraticient();
+    ButtonShowRdvPatient();
     if(text !== ""){
         displayAlert(text);
     }
diff --git a/src/js/AJAX/index.js b/src/js/AJAX/index.js
index 7df81af..091a053 100644
--- a/src/js/AJAX/index.js
+++ b/src/js/AJAX/index.js
@@ -3,6 +3,7 @@ import {attachLoginUserDisplayEventListener, attachLoginPraticienDisplayEventLis
 //import {TokenDecode} from "./lib.js";
 import {displayHome, displayHomeTopBar, attachReturnHomeEventListener} from "./home.js";
 import {ButtonShowRdvPraticient} from "./rdv-praticien.js";
+import {ButtonShowRdvPatient} from "./rdv-patient.js";
 
 console.log("index.js loaded");
 
@@ -20,6 +21,10 @@ document.addEventListener("DOMContentLoaded", function() {
     ButtonShowRdvPraticient();
 });
 
+document.addEventListener("DOMContentLoaded", function() {
+    ButtonShowRdvPatient();
+});
+
 //End Call
 
 ButtonShowRdvPraticient();
diff --git a/src/js/AJAX/rdv-patient.js b/src/js/AJAX/rdv-patient.js
new file mode 100644
index 0000000..e0c42b0
--- /dev/null
+++ b/src/js/AJAX/rdv-patient.js
@@ -0,0 +1,229 @@
+import {TokenDecode} from "./lib.js";
+import {displayCalendar} from "./take-rdv.js";
+import {displaySearchTopBar, attachSearchEventListener} from "./search.js";
+import {attachReturnHomeEventListener, attachProfileEventListener, horizontalDropdown} from "./home.js";
+
+function ButtonShowRdvPatient() {
+    try {
+        document.getElementById("user-calendar").addEventListener("click", DisplayRDVPatientPage);
+    }
+    catch (e) {
+        //Do nothing
+        //console.error(e);
+    }
+}
+
+function DisplayRDVPatientPage(){
+    let content = document.getElementById("content");
+    content.innerHTML = "";
+    let h100 = document.createElement("div");
+    h100.classList.add("h-100");
+    let row = document.createElement("div");
+    row.classList.add("row");
+    let column = document.createElement("div");
+    column.classList.add("col-3", "border-end", "border-dark", "border-3", "h-100", "mt-2", "text-center", "d-flex", "flex-column", "justify-content-center");
+    let column2 =document.createElement("div");
+    column2.classList.add("d-flex", "flex-column");
+    let next_rdv = document.createElement("div");
+    next_rdv.classList.add("border-bottom", "pb-3", "border-dark", "border-3", "align-self-center");
+
+
+
+    let nextRDV;
+    let past_rdv = document.createElement("div");
+    let the_rdv = document.createElement("div");
+    let searchbar = document.createElement("div")
+    let user = TokenDecode(sessionStorage.getItem("token"));
+    ajaxRequest('GET', "src/API/requests.php/api/next-rdv-patient?id=" + user.id, function (data) {
+        nextRDV = data
+        DisplayNextRDVPatient(next_rdv, data);
+
+        past_rdv.classList.add("mt-3", "align-self-center", "d-flex", "flex-column", "gap-2");
+        ajaxRequest('GET', "src/API/requests.php/api/past-rdv-patient?id=" + user.id, function (data) {
+            DisplayPastRDVPatient(past_rdv, data);
+
+            the_rdv.classList.add("col", "border-end", "border-dark", "border-3", "h-100", "mt-2", "text-center", "d-flex", "flex-column", "justify-content-center");
+
+            DisplayRDV(the_rdv, nextRDV);
+
+            searchbar.classList.add("col", "h-100");
+            searchbar.innerHTML = `
+                                <form class="input-group p-5" onsubmit="performSearch(event)" method="post">
+                                <input type="text" aria-label="First name" class="form-control" id="nom" name="nom" placeholder="Nom, spécialité">
+                                <input type="text" aria-label="Last name" class="form-control" id="postal" name="postal" placeholder="Où ?">
+                                <button class="btn btn-danger" type="submit" id="recherche">Rechercher</button>
+                                </form>`;
+
+            attachSearchEventListener();
+            attachReturnHomeEventListener();
+            attachProfileEventListener();
+            horizontalDropdown();
+        });
+    });
+
+    column2.append(next_rdv)
+    column2.append(past_rdv)
+    column.append(column2)
+    row.append(column)
+    row.append(the_rdv)
+    row.append(searchbar)
+    h100.appendChild(row);
+    content.appendChild(h100);
+}
+
+function DisplayNextRDVPatient(next_rdv, rdv){
+    next_rdv.innerHTML = "<h5 class=\"text-center\">Vos rendez-vous à venir</h5>";
+    if(rdv === null || rdv.length === 0){
+        next_rdv.innerHTML += "<div class='card rounded-4 mx-2'> " +
+            "<div class='card-header bg-danger'>" +
+            "<div class='d-flex flex-row justify-content-between text-white'>" +
+            "<p>  </p>" +
+            "</div> </div> <div class='card-body'>" +
+            "<h5 class='card-title'>Vous n'avez pas de rendez-vous à venir</h5>" +
+            "</div> </div>";
+    }
+    else{
+        for(let i = 0; i < rdv.length; i++) {
+            next_rdv.innerHTML += "<div class='card rounded-4 mx-2'> " +
+                "<div class='card-header bg-danger'> " +
+                "<div class='d-flex flex-row justify-content-between text-white'> " +
+                "<p>" + rdv[i].rdv_date + "</p> " +
+                "<p>" + rdv[i].rdv_time + "</p>" +
+                "</div> </div> <div class='card-body'> " +
+                "<h5 class='card-title'>" + rdv[i].medecin + "</h5>" +
+                "<h6 class='card-subtitle mb-2 text-body-secondary'>" + rdv[i].med_spe + "</h6>" +
+                "</div> <div class=\"card-footer\"> <p>Preparer la consulation</p> </div> </div>";
+        }
+    }
+    next_rdv.innerHTML += "</div>"
+}
+
+
+function attachEventListener(i, id) {
+    document.getElementById("retake-rdv-" + i + "-" + id).addEventListener("click", function () {
+        let today = new Date();
+        let date = today.getFullYear() + "-" + (today.getMonth() + 1).toString().padStart(2, "0") + "-" + today.getDate().toString().padStart(2, "0");
+        ajaxRequest('GET', "src/API/requests.php/api/rdv-date?date=" + date + "&id=" + id, function (data) {
+            displayCalendar(data);
+        });
+    });
+}
+
+
+function DisplayPastRDVPatient(past_rdv, rdv) {
+    past_rdv.innerHTML = "<h5 class=\"text-center\">Vos rendez-vous passés</h5>";
+    if(rdv.length === 0){
+        past_rdv.innerHTML += "<p class=\"text-center\">Vous n'avez pas de rendez-vous passé</p>";
+    }
+    else{
+        for(let i = 0; i < rdv.length; i++) {
+            past_rdv.innerHTML += "<div class='card rounded-4 mx-2'> " +
+                "<div class='card-header bg-danger'> " +
+                "<div class='d-flex flex-row justify-content-between text-white'> " +
+                "<p>" + rdv[i].rdv_date + "</p> " +
+                "<p>" + rdv[i].rdv_time + "</p>" +
+                "</div> </div> <div class='card-body'> " +
+                "<h5 class='card-title'>" + rdv[i].medecin + "</h5>" +
+                "<h6 class='card-subtitle mb-2 text-body-secondary'>" + rdv[i].med_spe + "</h6>" +
+                "</div> <div class=\"card-footer\"> " +
+                "<button id='retake-rdv-" + i + "-" + rdv[i].m_id + "'>Reprendre rendez-vous</button> " +
+                "</div> </div>";
+        }
+        for(let i = 0; i < rdv.length; i++) {
+            document.getElementById("retake-rdv-" + i + "-" + rdv[i].m_id).addEventListener("click", function () {
+                attachEventListener(i, rdv[i].m_id);
+            });
+        }
+    }
+}
+
+
+function attachEventListenerDeplacer(rdv){
+    document.getElementById("deplacer_button").addEventListener("click", function () {
+        let id = rdv[0].m_id;
+        let rdv_id = rdv[0].rdv_id;
+        let data = "id=" + rdv_id
+        let today = new Date();
+        let date = today.getFullYear() + "-" + (today.getMonth() + 1).toString().padStart(2, "0") + "-" + today.getDate().toString().padStart(2, "0");
+        console.log(data);
+        ajaxRequest('PUT', "src/API/requests.php/api/cancel-rdv-patient", function () {
+            console.log("Rendez-vous annulé");
+            ajaxRequest('GET', "src/API/requests.php/api/rdv-date?date=" + date + "&id=" + id, function (data) {
+                displayCalendar(data);
+            });
+        }, data);
+
+    });
+}
+
+function attachEventListenerAnnuler(rdv){
+    document.getElementById("cancel_button").addEventListener("click", function () {
+        let id = rdv[0].rdv_id;
+        let data = "id=" + id
+        console.log(data);
+        ajaxRequest('PUT', "src/API/requests.php/api/cancel-rdv-patient", function (id) {
+            console.log("Rendez-vous annulé");
+            DisplayRDVPatientPage();
+        },data);
+    });
+
+}
+
+function DisplayRDV(the_rdv, rdv){
+    if(rdv.length === 0){
+        the_rdv.innerHTML = "<div class='card rounded-4 mx-2'> " +
+            "<div class='card-header bg-danger'>" +
+            "<div class='d-flex flex-row justify-content-between text-white'>" +
+            "<p>  </p>" +
+            "</div> </div> <div class='card-body'>" +
+            "<h5 class='card-title'>Vous n'avez pas de rendez-vous à venir</h5>" +
+            "</div> </div>";
+    }
+    else{
+        the_rdv.innerHTML += "<div class=\"card rounded-4 mx-2\">" +
+            "<div class=\"card-header bg-danger\">" +
+            "<div class=\"d-flex flex-row justify-content-between text-white\">" +
+            "<p>" + rdv[0].rdv_date + "</p>" +
+            "<p>" + rdv[0].rdv_time + "</p>" +
+            "</div>" +
+            "</div>" +
+            "<div class=\"card-body\">" +
+            "<h5 class='card-title'>" + rdv[0].medecin + "</h5>" +
+            "<h6 class='card-subtitle mb-2 text-body-secondary'>" + rdv[0].med_spe + "</h6>" +
+            "<h6 id='deplacer_button' class=\"link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover\"> Déplacer le rendez-vous </h6>" +
+            "<h6 id='cancel_button' class=\"link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover\"> Annuler le rendez-vous" +
+            "</div>" +
+            "</div>" +
+            "<div class=\"card rounded-4 mx-2 mt-3\">" +
+            "<div class=\"card-body\">" +
+            "<h5 class=\"card-title\">Préparer la consulation</h5>" +
+            "<h6 class=\"card-subtitle mb-2 text-body-secondary\">Pour gagner du temps et améliorer votre prise en charge.</h6>" +
+            "<form action=\"src/php/db/scripts/uploadFile.php\" method=\"post\" enctype=\"multipart/form-data\">" +
+            "<label for=\"file\">Sélectionner un fichier :</label>" +
+            "<input type=\"hidden\" name=\"rdv_id\" value=" + rdv[0].rdv_id + ">" +
+            "<input type=\"file\" class=\"form-control\" name=\"file\" id=\"file\" accept=\".pdf, .jpeg, .jpg, .png\" disabled>" +
+            "<br><br>" +
+            "<input type=\"submit\" class=\"btn border-black border-1 disabled\" name=\"submit\" value=\"Envoyer le fichier\">" +
+            "<h6 class=\"card-subtitle text-danger\">Maintenance en cours.</h6>" +
+            "</form>" +
+            "</div>" +
+            "</div>" +
+            "<div class=\"card rounded-4 mx-2 mt-3\">" +
+            "<div class=\"card-body\">" +
+            "<h5 class=\"card-title\">Patient</h5>" +
+            "<h6 class='card-subtitle mb-2 text-body-secondary'>" + rdv[0].patient + "</h6>" +
+            "</div>" +
+            "</div>" +
+            "<div class=\"card rounded-4 mx-2 mt-3\">" +
+            "<div class=\"card-body\">" +
+            "<h5 class=\"card-title\">Lieu de la consulation</h5>" +
+            "<h6 class='card-subtitle mb-2 text-body-secondary'>" + rdv[0].adresse + "<br>" +
+            rdv[0].ville + "</br></h6>" +
+            "</div>" +
+            "</div>"
+        attachEventListenerDeplacer(rdv);
+        attachEventListenerAnnuler(rdv);
+    }
+}
+
+export {ButtonShowRdvPatient};
\ No newline at end of file
diff --git a/src/js/AJAX/rdv-praticien.js b/src/js/AJAX/rdv-praticien.js
index 3ac7a73..4a59dd5 100644
--- a/src/js/AJAX/rdv-praticien.js
+++ b/src/js/AJAX/rdv-praticien.js
@@ -1,4 +1,5 @@
 import {TokenDecode} from "./lib.js";
+import {attachReturnHomeEventListener} from "./home.js";
 
 function ButtonShowRdvPraticient() {
     try {
@@ -6,6 +7,7 @@ function ButtonShowRdvPraticient() {
             let user = TokenDecode(sessionStorage.getItem("token"));
             ajaxRequest('GET', "src/API/requests.php/api/rdv-praticient?id=" + user.id, function (data) {
                 DisplayRDVPraticient(data);
+                attachReturnHomeEventListener();
                 console.log(data);
             });
         });
@@ -16,20 +18,62 @@ function ButtonShowRdvPraticient() {
     }
 }
 
+function attachCancelEventListener(rdv_id, i) {
+    const idBtn = "cancel_button" + i;
+    console.log(idBtn);
+    console.log(i);
+    let Btn = document.getElementById(idBtn);
+    if(Btn !== null){
+        console.log("je suis là");
+        console.log(Btn);
+        Btn.addEventListener("click", function (event) {
+            console.log("hello");
+            let data = 'rdv_id=' + rdv_id;
+            console.log(data);
+            /*
+            ajaxRequest('DELETE', "src/API/requests.php/api/cancel-rdv", function (data) {
+                console.log(data);
+                ButtonShowRdvPraticient();
+                attachReturnHomeEventListener();
+                ajaxRequest('GET', "src/API/requests.php/api/rdv-praticient?id=" + user.id, function (data) {
+                    DisplayRDVPraticient(data);
+                    console.log(data);
+                });
+            }, data);*/
+        });
+    }
+    else{
+        console.log("je suis pas là")
+    }
+}
+
+
 function DisplayRDVPraticient(rdv){
     let count = rdv.length;
     let content = document.getElementById("content");
     content.innerHTML = "";
-    content.innerHTML = '<div class="h-100"> <div class="d-flex flex-row flex-wrap my-5 mx-5 gap-5 justify-content-center text-center">';
+    let h100 = document.createElement("div");
+    h100.classList.add("h-100");
+    let container = document.createElement("div");
+    container.classList.add("d-flex", "flex-row", "flex-wrap", "my-5", "mx-5", "gap-5", "justify-content-center", "text-center");
     if(count === 0){
-        content.append('<h1>Vous n\'avez pas de rendez-vous</h1>');
+        container.innerHTML += '<div class="card rounded-4 mx-2 pointer">' +
+            '<div class="card-header bg-danger">' +
+            '<div class="d-flex flex-row justify-content-between text-white">' +
+            '<p>  </p>' +
+            '</div>' + '</div>' +
+            '<div class="card-body">' +
+            '<h5 class="card-title"> Vous n\'avez pas de créneaux de planifié </h5>' +
+            '</div>' + '</div>';
     }
     else {
         for (let i = 0; i < count; i++) {
             console.log(rdv[i]);
+
+            let card = document.createElement("div");
+            card.classList.add("card", "rounded-4", "mx-2", "pointer");
             if (rdv[i].p_mail !== null) {
-                content.innerHTML += '<div class="card rounded-4 mx-2 pointer">' +
-                    '<div class="card-header bg-danger">' +
+                card.innerHTML += '<div class="card-header bg-danger">' +
                     '<div class="d-flex flex-row justify-content-between text-white">' +
                     '<p>' + rdv[i].rdv_date + '</p>' +
                     '<p>' + rdv[i].rdv_time + '</p>' +
@@ -41,18 +85,27 @@ function DisplayRDVPraticient(rdv){
                     '<a href="tel:0' + rdv[i].p_phone + '" class="card-subtitle mb-2 text-body-secondary">' + '0' + rdv[i].p_phone + '</a>' +
                     '</div>' + '</div>';
             } else {
-                content.innerHTML += '<div class="card rounded-4 mx-2 pointer">' +
-                    '<div class="card-header bg-danger">' +
+                card.innerHTML += '<div class="card-header bg-danger">' +
                     '<div class="d-flex flex-row justify-content-between text-white">' +
                     '<p>' + rdv[i].rdv_date + '</p>' +
                     '<p>' + rdv[i].rdv_time + '</p>' +
                     '</div>' + '</div>' +
                     '<div class="card-body">' +
                     '<h5 class="card-title">Vous n\'avez pas de' + '<br>' + 'patient pour ce créneau</h5>' +
+                    '<input type="button" id="cancel_button' + i + '"' +
+                    /*'class="btn btn-link link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover"*/'value="Annuler le créneau"></input>' +
                     '</div>' + '</div>';
             }
+            container.appendChild(card);
         }
+
     }
+    h100.appendChild(container);
+    content.appendChild(h100);
+    for (let i = 0; i < count; i++) {
+        attachCancelEventListener(rdv[i].rdv_id, i);
+    }
+
     content.innerHTML += '<div id="addRDV" class="d-flex flex-row flex-wrap my-5 mx-5 gap-5 justify-content-center text-center" >';
     ShowAddRDV();
 }
@@ -100,11 +153,13 @@ function DisplayAddRDV(lieux) {
         ajaxRequest('POST', "src/API/requests.php/api/create-rdv", function (data) {
             console.log(data);
             ButtonShowRdvPraticient();
+            attachReturnHomeEventListener();
+            ajaxRequest('GET', "src/API/requests.php/api/rdv-praticient?id=" + user.id, function (data) {
+                DisplayRDVPraticient(data);
+                console.log(data);
+            });
         }, data);
-        ajaxRequest('GET', "src/API/requests.php/api/rdv-praticient?id=" + user.id, function (data) {
-            DisplayRDVPraticient(data);
-            console.log(data);
-        });
+
     });
 }
 
diff --git a/src/js/AJAX/search.js b/src/js/AJAX/search.js
index 1c0820f..ea55392 100644
--- a/src/js/AJAX/search.js
+++ b/src/js/AJAX/search.js
@@ -119,4 +119,4 @@ function attachSearchEventListener() {
     }
 }
 
-export {removeSearchTopBar, attachSearchEventListener};
\ No newline at end of file
+export {removeSearchTopBar, attachSearchEventListener, displaySearchTopBar};
\ No newline at end of file
diff --git a/src/js/AJAX/take-rdv.js b/src/js/AJAX/take-rdv.js
index 092db49..0caee0b 100644
--- a/src/js/AJAX/take-rdv.js
+++ b/src/js/AJAX/take-rdv.js
@@ -156,4 +156,4 @@ function attachPrendreRDVEventListener() {
     });
 }
 
-export {attachRDVEventListener};
\ No newline at end of file
+export {attachRDVEventListener, displayCalendar};
\ No newline at end of file