diff --git a/css/global.css b/css/global.css
index 2521b66..bc5eda0 100644
--- a/css/global.css
+++ b/css/global.css
@@ -72,3 +72,17 @@ footer p {
   justify-content: center;
   margin-bottom: 0px;
 }
+
+/* Modal */
+.modal-content {
+  color: white;
+}
+
+#exampleModal {
+  color: white;
+  background-color: rgba(255, 255, 255, 0.1)
+}
+
+#modal-footer {
+  background-color: #272727;
+}
\ No newline at end of file
diff --git a/img/procurement.png b/img/procurement.png
new file mode 100644
index 0000000..f7cac9b
Binary files /dev/null and b/img/procurement.png differ
diff --git a/img/shuttle.png b/img/shuttle.png
new file mode 100644
index 0000000..92dab5d
Binary files /dev/null and b/img/shuttle.png differ
diff --git a/img/transportation.png b/img/transportation.png
new file mode 100644
index 0000000..7c197ce
Binary files /dev/null and b/img/transportation.png differ
diff --git a/scripts/api.js b/scripts/api.js
index 82263a1..b328163 100644
--- a/scripts/api.js
+++ b/scripts/api.js
@@ -121,5 +121,16 @@ export default {
 
       return REQUEST(url, "GET", headers);
     },
+
+    accept: async (contratId, token) => {
+      const url = `${spacetradersApiUrl}my/contracts/${contratId}/accept`;
+      const headers = {
+        'Content-Type': 'application/json',
+        Accept: "application/json",
+        Authorization: `Bearer ${token}`,
+      };
+
+      return REQUEST(url, "POST", headers);
+    }
   },
 };
diff --git a/scripts/auth.js b/scripts/auth.js
index 5fd96b6..f633cf8 100644
--- a/scripts/auth.js
+++ b/scripts/auth.js
@@ -63,7 +63,8 @@ export default {
       } else {
         showError("Symbol ou faction invalide");
       }
-    } catch {
+    } catch (error) {
+      console.log(error)
       showError("Erreur lors de l'inscription");
     }
   },
diff --git a/scripts/main.js b/scripts/main.js
index 2fa94d0..20f7307 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -67,21 +67,56 @@ async function contract() {
   $('main').empty()
 
   contracts.forEach(contrat => {
-    console.log(contrat);
-    const card =
-      `                            
+    let img
+    let status
+    let card
+    console.log(contrat)
+    if (contrat.type = "PROCUREMENT") {
+      img = "/img/procurement.png"
+    }
+    else if (contrat.type = "TRANSPORT") {
+      img = "/img/transportation.png"
+    }
+    else {
+      img = "/img/shuttle.png"
+    }
+    if (contrat.accepted) {
+      status = "accepté"
+      card =
+        `                            
         <div class="card" style="width: 20rem;">
-              <img src="/img/contrat.jpg" class="card-img-top" alt="">
-              <div class="card-body">
-                  <h5 style="color:white" class="card-title">${contrat.factionSymbol}</h5>
-                  <p style="color:white" class="card-text">${contrat.accepted}</p>
-                  <button id="btn-infos" contratID="${contrat.id}" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Infos</button>
-                  <button id="btn-accepter" class="btn-modify btn btn-primary" data-toggle="modal" data-target="#Modify" >Accepter</button>                       
-              </div>
-          </div>
+          <img src="${img}" class="card-img-top" alt="">
+            <div class="card-body">
+              <h5 style="color:white" class="card-title">${contrat.factionSymbol}</h5>
+              <p style="color:white" class="card-text">${contrat.deadlineToAccept}</p>
+              <p style="color:white" id="status" class="card-text">Status : ${status}</p>
+              <button id="btn-infos" contratID="${contrat.id}" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Infos</button>                      
+            </div>
+        </div>
       `
+    }
+    else {
+      status = "en attente"
+      card =
+        `                            
+        <div class="card" style="width: 20rem;">
+          <img src="${img}" class="card-img-top" alt="">
+            <div class="card-body">
+              <h5 style="color:white" class="card-title">${contrat.factionSymbol}</h5>
+              <p style="color:white" class="card-text">${contrat.deadlineToAccept}</p>
+              <p style="color:white" id="status" class="card-text">Status : ${status}</p>
+              <button id="btn-infos" contratID="${contrat.id}" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Infos</button>
+              <button id="btn-accept" contratID="${contrat.id}" class="btn-modify btn btn-primary" data-toggle="modal" data-target="#Modify" >Accepter</button>                       
+            </div>
+        </div>
+      `
+    }
+
+
 
     $('main').append(card)
+
+
     $('#btn-infos').on('click', async function () {
       const token = localStorage.getItem("token");
       const contrat = await SpaceTraders.Contract.get($(this).attr('contratID'), token);
@@ -90,20 +125,30 @@ async function contract() {
         <div class="modal-dialog">
           <div class="modal-content">
             <div class="modal-header">
-              <h1 class="modal-title fs-5" id="exampleModalLabel">${contrat.id}</h1>
+              <h1 class="modal-title fs-5" id="title-modal">${contrat.id}</h1>
               <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
-          <div class="modal-body">
-            ...
-          </div>
-          <div class="modal-footer">
-            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-            <button type="button" class="btn btn-primary">Save changes</button>
+            <div class="modal-body">
+              Type : ${contrat.type} <br>
+              Faction : ${contrat.factionSymbol} <br>
+              DeadLine : ${contrat.deadlineToAccept}
+            </div>
+            <div class="modal-footer" id="modal-footer">
+              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            </div>
           </div>
         </div>
-      </div>
-    </div>`
+      </div>`
       $('main').append(modal)
     })
+
+    $('#btn-accept').on('click', async function () {
+      console.log("test")
+      const token = localStorage.getItem("token");
+      await SpaceTraders.Contract.accept($(this).attr('contratID'), token);
+      $("#status").html("Status : accepté");
+      this.remove();
+    })
+
   })
 }