diff --git a/src/API/requests.php b/src/API/requests.php
index 4516642..52079a8 100644
--- a/src/API/requests.php
+++ b/src/API/requests.php
@@ -150,6 +150,10 @@ $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
 
diff --git a/src/API/test/database.php b/src/API/test/database.php
index 8d4384e..75fd92e 100644
--- a/src/API/test/database.php
+++ b/src/API/test/database.php
@@ -32,16 +32,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 as med_spe, 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
@@ -56,15 +51,11 @@ function dbRequestRdvPatient($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 getPastRdvByPatient($pdo, $id){
-    $statement = $pdo->prepare("SELECT rdv_date, rdv_time, concat(m_name, ' ', m_surname) as medecin, medecin.m_specialty as med_spe, medecin.m_id as med_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
@@ -151,4 +142,11 @@ function DeleteEmptyRdv($pdo, $id)
         Response::HTTP200(["Success" => "RDV deleted"]);
     }
     Response::HTTP403(["Forbidden" => "This RDV is not empty"]);
+}
+
+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/js/AJAX/home.js b/src/js/AJAX/home.js
index 2ce4fb1..b3a9fad 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() {
@@ -137,6 +139,8 @@ function displayHome(text) {
             </footer>`;
     attachSearchEventListener();
     attachLoginUserDisplayEventListener();
+    ButtonShowRdvPraticient();
+    ButtonShowRdvPatient();
     if(text !== ""){
         displayAlert(text);
     }
diff --git a/src/js/AJAX/rdv-patient.js b/src/js/AJAX/rdv-patient.js
index 3d82ce7..e01e3e4 100644
--- a/src/js/AJAX/rdv-patient.js
+++ b/src/js/AJAX/rdv-patient.js
@@ -5,65 +5,7 @@ import {attachReturnHomeEventListener, attachProfileEventListener, horizontalDro
 
 function ButtonShowRdvPatient() {
     try {
-        document.getElementById("user-calendar").addEventListener("click", function () {
-            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");
-
-                    displaySearchTopBar();
-                    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);
-        });
+        document.getElementById("user-calendar").addEventListener("click", DisplayRDVPatientPage);
     }
     catch (e) {
         //Do nothing
@@ -71,10 +13,74 @@ function ButtonShowRdvPatient() {
     }
 }
 
+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.length === 0){
-        next_rdv.innerHTML += "<p class=\"text-center\">Vous n'avez pas de rendez-vous à venir</p>";
+    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++) {
@@ -93,9 +99,8 @@ function DisplayNextRDVPatient(next_rdv, rdv){
 }
 
 
-function attachEventListener(i, rdv) {
-    document.getElementById("retake-rdv-" + i + "-" + rdv[i].med_id).addEventListener("click", function () {
-        let id = rdv[i].med_id;
+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) {
@@ -121,38 +126,58 @@ function DisplayPastRDVPatient(past_rdv, rdv) {
                 "<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].med_id + "'>Reprendre rendez-vous</button> " +
+                "<button id='retake-rdv-" + i + "-" + rdv[i].m_id + "'>Reprendre rendez-vous</button> " +
                 "</div> </div>";
-            attachEventListener(i, rdv);
         }
-
-    }
+        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[i].med_id;
+        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");
-        ajaxRequest('GET', "src/API/requests.php/api/rdv-date?date=" + date + "&id=" + id, function (data) {
-            displayCalendar(data);
-        });
+        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.rdv_id;
-        ajaxRequest('POST', "src/API/requests.php/api/cancel-rdv", function (data) {
-        });
+        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 pointer\"> <div class=\"card-header bg-danger\"> <div class=\"d-flex flex-row justify-content-between text-white\"> <p>Vous n'avez pas de rendez-vous à venir</p> </div> </div> </div>"
+        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\">" +
diff --git a/src/js/AJAX/rdv-praticien.js b/src/js/AJAX/rdv-praticien.js
index 3ac7a73..bfff1fc 100644
--- a/src/js/AJAX/rdv-praticien.js
+++ b/src/js/AJAX/rdv-praticien.js
@@ -22,7 +22,14 @@ function DisplayRDVPraticient(rdv){
     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">';
     if(count === 0){
-        content.append('<h1>Vous n\'avez pas de rendez-vous</h1>');
+        content.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 rendez-vous de planifié </h5>' +
+            '</div>' + '</div>';
     }
     else {
         for (let i = 0; i < count; i++) {