diff --git a/panier.js b/panier.js
new file mode 100644
index 0000000000000000000000000000000000000000..d5dcd290d7c545c457837288c6819491d7937fa2
--- /dev/null
+++ b/panier.js
@@ -0,0 +1,132 @@
+// Ajoute un formulaire pour ajouter des recettes aux favoris
+function ajoutFormulaire(conteneur, parent, recette){
+    let formRec = document.createElement('form');
+    let field = document.createElement('fieldset');
+    var cancel = document.createElement('button');
+    
+
+    // définition du formulaire
+    formRec.method = 'POST';
+    formRec.name = 'formRecette';
+
+    // Définition du bouton annuler
+    cancel.textContent = "Retirer des favoris";
+    cancel.name = 'retire';
+    cancel.type = 'button'; // Empêche le rechargement de le page
+
+    cancel.addEventListener('click', () => {
+
+        let input = {
+            panier : 'retirer',
+            recette_id : recette.id
+        };
+        console.log(input);
+
+        const xhr = new XMLHttpRequest();
+        xhr.open("POST", "/Service.php", true);
+        xhr.setRequestHeader("Content-Type", "application/json ; charset=UTF-8");
+
+        // Vérification des résultats
+        xhr.onreadystatechange = function(){
+            if (xhr.readyState === 4 && xhr.status === 200){
+                //let resultat = JSON.parse(xhr.response);
+                conteneur.innerHTML = "";      
+            }
+        } 
+        xhr.send(JSON.stringify(input));
+    });
+
+    // Mise en page
+    parent.append(formRec);
+    formRec.appendChild(field);
+    field.append(cancel);
+    parent.append();
+}
+
+
+// Affiche les recettes
+function afficheRecettes(recette){
+    // Récupère l'élément qui va afficher les recettes
+    let div = document.getElementById("panierClient");
+
+    // parcours de toutes les recettes contenu dans l'objet
+    for (var i = 0; i<recette.length; i++){
+        // Création des éléments titre / paragraphe / liste
+        let conteneur = document.createElement('span'); // Contient les éléments html d'une recette
+        let image = document.createElement('img'); // image
+        let titre = document.createElement('h2'); // titre de niveau 2
+        let paragraph = document.createElement('p'); // paragraphe contenant la liste et description
+        var liste = document.createElement('ul'); // liste
+
+        liste.innerHTML += "Ingrédients :";
+
+        // Récupération du contenu    
+        titre.textContent = recette[i].titre;
+        paragraph.textContent = recette[i].preparation;
+        let ingredients = recette[i].ingredients.split("|");
+        for (var j = 0; j<ingredients.length; j++){
+            liste.innerHTML += "<li>"+ingredients[j]+"</li>";
+        }
+
+        const search = recette[i].titre;
+        // Génère l'objet de requête à envoyer au serveur (traiter par Service.php) : le nom de la recette
+        const input = {
+            images : search
+        };
+        // Envoie de la requête
+        var xhr = new XMLHttpRequest();
+        xhr.open('POST', "/Service.php", true);
+        xhr.onload = () => {
+            if (xhr.response != null){
+                image.src = xhr.responseText;
+            } 
+        };
+
+        xhr.send(JSON.stringify(input)); 
+
+        // Ajout à la div de recettes
+        div.append(conteneur);
+        conteneur.append(titre);
+        conteneur.append(image);
+        conteneur.append(paragraph);
+        paragraph.append(liste);
+        ajoutFormulaire(conteneur, paragraph, recette[i]);
+    }
+}
+
+/**
+ * Affiche les options de catégories
+ */
+ function getPanier(){
+    // Récupère la position à laquelle on veut afficher des informations
+    var zone = document.getElementById("panierClient");
+    if (zone != null) zone.innerHTML = '';
+    
+    // Création d'un objet contenant la requêtes
+    var input = {
+        panier: 'get'
+    };
+
+    // Demande au serveur php (donc à la db) les noms de
+    const xhr = new XMLHttpRequest();
+    xhr.open("POST", "/Service.php", true);
+    xhr.setRequestHeader("Content-Type", "application/json ; charset=UTF-8");
+
+    // Vérification des résultats
+    xhr.onreadystatechange = function(){
+        if (xhr.readyState === 4 && xhr.status === 200){
+            // Si le retour n'est pas vide, on affiche les titres
+            if (this.response != null){
+                var resultat = JSON.parse(xhr.response);
+                afficheRecettes(resultat);
+                console.log(resultat);
+            }
+        }
+    } 
+    xhr.send(JSON.stringify(input));
+}
+
+
+
+
+window.onload = getPanier();
\ No newline at end of file
diff --git a/recettes.css b/recettes.css
new file mode 100644
index 0000000000000000000000000000000000000000..89819d23baec9dfe17679c69f840219ef03fc457
--- /dev/null
+++ b/recettes.css
@@ -0,0 +1,53 @@
+body{
+background-color: #c483a6;
+color: white;
+}
+
+h2{
+color: #fec4ae;
+font-weight: bold;
+text-align: center;
+}
+
+img{
+display:block;
+margin-left:auto;
+margin-right:auto;
+border: 2px solid #a9d5e3;
+}
+
+ul{
+text-align: center;
+}
+
+span{
+border: 2px solid #a9d5e3;
+}
+
+input{
+background-color:white;
+font-size:20px;
+border-radius:12px;
+border: 2px solid black;
+transition-duration:0.4s;
+width:150px;
+}
+
+#requete{
+width:400px;
+}
+
+input:hover{
+background-color:black;
+color:white;
+}
+
+input + input{
+margin-left:10px;
+}
+
+#panier{
+position: fixed;
+margin-right:2em;
+right:0;
+}