diff --git a/static/css/main.css b/static/css/main.css
index c258fed..419395a 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -248,7 +248,7 @@ button[type="submit"]:hover {
     border-left: 3px solid black;
 }
 
-.activity-uid, .prank-uid, .prank-date, .treasure-uid, .treasure-date, #activite-place {
+.activity-uid, .prank-uid, .prank-date, .treasure-uid, .treasure-date, #activite-place, .prank-status {
     color: #00000078;
     margin-top: 5px;
     font-size: 12px;
@@ -262,7 +262,7 @@ button[type="submit"]:hover {
     margin-left: 10px;
 }
 
-#error-message {
+#error-message, #error-message-demande {
     color: red;
 }
 
diff --git a/static/index.html b/static/index.html
index 9a18493..69e8865 100644
--- a/static/index.html
+++ b/static/index.html
@@ -137,7 +137,12 @@
                             <input type="number" class="form-control" placeholder="Quantité" id="demande-amount">
                         </div>
                         <div class="form-group">
-                            <input type="text" class="form-control" placeholder="Supplément" id="demande-supp">
+                            <select class="form-control" id="demande-supp">
+                                <option value="nature">Nature</option>
+                                <option value="sucre">Sucre</option>
+                                <option value="nutella">Nutella</option>
+                                <option value="confiture">Confiture</option>
+                            </select>
                         </div>
                         <div class="form-group">
                             <input type="textarea" class="form-control" placeholder="Notes" id="demande-notes">
@@ -145,6 +150,9 @@
                         <div class="form-group">
                             <button type="submit" class="btn btn-primary" id="demande-button">Envoyer</button>
                         </div>
+                        <div class="form-group">
+                            <p id="error-message-demande"></p>
+                        </div>
                     </div>
                     <div class="spacer colum-section"></div>
                     <div class="column-section">
@@ -154,6 +162,7 @@
                 <hr/>
                 <div class="column-section">
                     <h1>Vos demandes en cours</h1>
+                    <div class="column-section" id="demande-list"></div>
                 </div>
             </div> <!-- end demande page -->
         </div>
diff --git a/static/js/main.js b/static/js/main.js
index c8a5b34..7486e0b 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -525,8 +525,8 @@ $('#demande-button').click(function () {
             type: "crêpe",
             amount: $('#demande-amount').val(),
             where: $('#demande-where').val(),
-            supplement: $('#demande-supplement').val(),
-            note: $('#demande-note').val()
+            supplement: $('#demande-supp').val(),
+            note: $('#demande-note').val(),
         }),
         contentType: "application/json; charset=utf-8",
         dataType: "json",
@@ -534,13 +534,61 @@ $('#demande-button').click(function () {
         success: function(data) {
             if(data.success) {
                 $('#demande-form input').val("");
+                updateDemandes();
             } else {
-                alert(data.why);
+                $('#error-message-demande').empty();
+                t = new TypeIt('#error-message-demande', {
+                    speed: 100,
+                    lifeLike: true
+                })
+                .type(data.why)
+                .go();
+                if(data.why.startsWith('Token expired') || data.why.startsWith('Not authen'))
+                    show_page("#login-page");
             }
         }
     });
 });
 
+function updateDemandes() {
+    $.ajax({
+        type: "POST",
+        url: base_url + "get",
+        data: JSON.stringify({
+            uid: localStorage.getItem('user'),
+            token: localStorage.getItem('token'),
+            type: "prank"
+
+        }),
+        contentType: "application/json; charset=utf-8",
+        dataType: "json",
+
+        success: function (data) { 
+            if(data.success) {
+                $('#demande-list').html('');
+                let pd = data.prankData;
+                for(const pd_uid in pd) {
+                    $('#demande-list').append(`
+                    <span id="${pd[pd_uid].prankUid}" class="prank">
+                        <h2 class="prank-title">Demande de crêpe</h2>
+                        <div class="prank-amount">Quantité: ${pd[pd_uid].amount}</div>
+                        <div class="prank-supplement">Garniture: ${pd[pd_uid].supplement}</div>
+                        <div class="prank-where">Livraison: ${pd[pd_uid].where}</div>
+                        <div class="prank-note">Notes: ${pd[pd_uid].note}</div>
+                            <div class="prank-status">Statue: ${pd[pd_uid].state}</div>
+                        </span>
+                    </span>
+                    `)
+                }
+            }
+            else {
+                console.alert(data.why);
+            }
+        }
+
+    });
+}
+
 function updateNextActivity() {
     $.ajax({
         type: "POST",
@@ -604,6 +652,7 @@ $(window).on("load", function() {
     }
 
     updateNextActivity();
+    updateDemandes();
 
     /* load timer */
     window.setInterval(function() {