diff --git a/src/js/AJAX/rdv-patient.js b/src/js/AJAX/rdv-patient.js
index 8e1a529..3d82ce7 100644
--- a/src/js/AJAX/rdv-patient.js
+++ b/src/js/AJAX/rdv-patient.js
@@ -1,27 +1,68 @@
 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", 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
-                content.innerHTML = "";
-                content.innerHTML += '<div class="h-100"> <div class="row"> <div class="col-3 border-end border-dark border-3 h-100 mt-2 text-center d-flex flex-column justify-content-center"> <div class="d-flex flex-column"> <div id="next-rdv" class="border-bottom pb-3 border-dark border-3 align-self-center">';
-
-                DisplayNextRDVPatient(data);
-                content.innerHTML += "</div> <div id='past-rdv' class=\'mt-3 align-self-center d-flex flex-column gap-2\'>";
+                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(data);
-                    content.innerHTML += "</div> </div> </div> <div id='zoom' class=\"col border-end border-dark border-3 h-100 mt-2 text-center d-flex flex-column justify-content-center\">";
-                    DisplayRDV(nextRDV);
-                    content.innerHTML += "</div> <div class=\"col h-100\"></div>";
+                    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);
         });
     }
     catch (e) {
@@ -30,16 +71,14 @@ function ButtonShowRdvPatient() {
     }
 }
 
-function DisplayNextRDVPatient(rdv){
-    let content = document.getElementById("next-rdv");
-    content.innerHTML = "";
-    content.innerHTML += "<h5 class=\"text-center\">Vos rendez-vous à venir</h5>";
+function DisplayNextRDVPatient(next_rdv, rdv){
+    next_rdv.innerHTML = "<h5 class=\"text-center\">Vos rendez-vous à venir</h5>";
     if(rdv.length === 0){
-        content.innerHTML += "<p class=\"text-center\">Vous n'avez pas de rendez-vous à venir</p>";
+        next_rdv.innerHTML += "<p class=\"text-center\">Vous n'avez pas de rendez-vous à venir</p>";
     }
     else{
         for(let i = 0; i < rdv.length; i++) {
-            content.innerHTML += "<div class='card rounded-4 mx-2'> " +
+            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> " +
@@ -50,6 +89,7 @@ function DisplayNextRDVPatient(rdv){
                 "</div> <div class=\"card-footer\"> <p>Preparer la consulation</p> </div> </div>";
         }
     }
+    next_rdv.innerHTML += "</div>"
 }
 
 
@@ -65,16 +105,14 @@ function attachEventListener(i, rdv) {
 }
 
 
-function DisplayPastRDVPatient(rdv) {
-    let content = document.getElementById("past-rdv");
-    content.innerHTML = "";
-    content.innerHTML += "<h5 class=\"text-center\">Vos rendez-vous passés</h5>";
+function DisplayPastRDVPatient(past_rdv, rdv) {
+    past_rdv.innerHTML = "<h5 class=\"text-center\">Vos rendez-vous passés</h5>";
     if(rdv.length === 0){
-        content.innerHTML += "<p class=\"text-center\">Vous n'avez pas de rendez-vous passé</p>";
+        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++) {
-            content.innerHTML += "<div class='card rounded-4 mx-2'> " +
+            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> " +
@@ -112,15 +150,12 @@ function attachEventListenerAnnuler(rdv){
 
 }
 
-
-function DisplayRDV(rdv){
-    let content = document.getElementById("zoom");
-    content.innerHTML = ""
+function DisplayRDV(the_rdv, rdv){
     if(rdv.length === 0){
-        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>Vous n'avez pas de rendez-vous à venir</p> </div> </div> </div>"
+        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>"
     }
     else{
-        content.innerHTML += "<div class=\"card rounded-4 mx-2\">" +
+        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>" +
@@ -130,8 +165,8 @@ function DisplayRDV(rdv){
             "<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'> Déplacer le rendez-vous </h6>" +
-            "<h6 id='cancel_button'> Annuler le rendez-vous" +
+            "<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\">" +
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