diff --git a/assets/contracts/contractscreen.png b/assets/contracts/contractscreen.png
new file mode 100644
index 0000000..183cec4
Binary files /dev/null and b/assets/contracts/contractscreen.png differ
diff --git a/assets/contracts/procurement.png b/assets/contracts/procurement.png
index f7cac9b..c6be4fc 100644
Binary files a/assets/contracts/procurement.png and b/assets/contracts/procurement.png differ
diff --git a/assets/contracts/shuttle.png b/assets/contracts/shuttle.png
index 92dab5d..609d433 100644
Binary files a/assets/contracts/shuttle.png and b/assets/contracts/shuttle.png differ
diff --git a/assets/contracts/transportation.png b/assets/contracts/transportation.png
index 7c197ce..82bc984 100644
Binary files a/assets/contracts/transportation.png and b/assets/contracts/transportation.png differ
diff --git a/assets/img/background.png b/assets/img/background.png
index 8765004..1be0712 100644
Binary files a/assets/img/background.png and b/assets/img/background.png differ
diff --git a/css/global.css b/css/global.css
index ec35e3e..fb0ee7a 100644
--- a/css/global.css
+++ b/css/global.css
@@ -8,40 +8,67 @@ html {
 }
 
 
-button {
+.btn-infos {
   margin: 2px;
   /* color: black; */
-  background-color: white;
-  border: 2px solid white;
+  background-color: royalblue;
+  border: 2px solid royalblue;
   border-radius: 10px;
 }
 
-button:hover {
-  border-color: #eab308;
-  background-color: #eab308;
-  transition: all 1s;
+.btn-infos:hover {
+  border-color: rgb(45, 73, 156);
+  background-color: rgb(45, 73, 156);
 }
 
-main {
-  /* display: flex;
-  justify-content: space-between; */
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  padding-left: 30px;
+.btn-accept {
+  margin: 2px;
+  /* color: black; */
+  background-color: royalblue;
+  border: 2px solid royalblue;
+  border-radius: 10px;
 }
 
-/* Modal */
-
-.status-onhold{
-  color: orange;
+.btn-accept:hover {
+  border-color: rgb(45, 73, 156);
+  background-color: rgb(45, 73, 156);
 }
 
-.status-accepted{
-  color: greenyellow;
+.contract-screen {
+  display: flex;
+  justify-content: center;
+  background-image: url("/assets/contracts/contractscreen.png");
+  background-repeat: no-repeat;
+  background-position: center;
+  height: 100vh;
+
 }
 
+.card-body {
+  margin-left: 200px;
+  margin-top: -160px;
+  width: 400px;
+}
 
+.card-body button {
+  margin-top: 15px;
+  margin-left: -10px;
+  width: 250px;
+}
 
+.contracts {
+  margin-left: 240px;
+  margin-top: 250px;
+  height: 100vh;
+  width: 100vh;
+}
 
+/* Modal */
 
+.status-onhold {
+  color: orange;
+}
 
+.status-accepted {
+  color: greenyellow;
+}
\ No newline at end of file
diff --git a/html/templates/contracts/contracts.html b/html/templates/contracts/contracts.html
index 2e33570..de05fa8 100644
--- a/html/templates/contracts/contracts.html
+++ b/html/templates/contracts/contracts.html
@@ -1,2 +1,4 @@
 <link rel="stylesheet" href="css/global.css">
-<div class="contracts"></div>
\ No newline at end of file
+<div class="contract-screen">
+    <div class="contracts"></div>
+</div>
\ No newline at end of file
diff --git a/js/controllers/contracts.js b/js/controllers/contracts.js
index 01cec1e..13eeac3 100644
--- a/js/controllers/contracts.js
+++ b/js/controllers/contracts.js
@@ -11,9 +11,11 @@ import { Modal } from "../skama_code/ui/modal.js";
 
 export default (temp_engine) => {
 
+
   let modal = new Modal("contract-modal", temp_engine);
 
   temp_engine.after_render((temp_engine) => {
+
     modal.load("templates/contracts/contracts_modal.html");
 
     Contract.list(10, 1, (contracts) => {
@@ -57,6 +59,8 @@ export default (temp_engine) => {
         let status
         let card
 
+
+
         if (contract.type = "PROCUREMENT") {
           img = "/assets/contracts/procurement.png"
         }
@@ -71,37 +75,45 @@ export default (temp_engine) => {
           status = "accepted"
           card =
             `                            
-                    <div class="card spacer" style="width: 20rem;">
+                    <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">${contract.faction}</h5>
-                          <p style="color:white" class="card-text">${contract.deadline}</p>
-                          <p class="card-text status-accepted">Status : ${status}</p>
-                          <button data-id="${contract.id}" class="btn-infos" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Infos</button>                      
-                        </div>
+                      <div class="card-body">
+                        <h5 style="color:white" class="card-title">${contract.faction}</h5>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p class="card-text status-accepted">Status : ${status}</p>
+                        <button data-id="${contract.id}" type="button" class="btn btn-primary btn-infos" data-bs-toggle="modal" data-bs-target="#exampleModal">Infos</button>                      
+                      </div>
                     </div>
-                  `
+            `
         }
 
         else {
           status = "on hold"
           card =
             `                            
-                    <div class="card spacer" style="width: 20rem;">
+                    <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">${contract.faction}</h5>
-                          <p style="color:white" class="card-text">${contract.deadline}</p>
-                          <p class="card-text status-onhold">Status : ${status}</p>
-                          <p style="color:white" class="card-text revenu">Revenu : ${contract.paymentAccepted} $</p>
-                          <button type="button" class="btn btn-primary btn-infos" data-bs-toggle="modal" data-bs-target="#exampleModal">Infos</button>
-                          <button data-id="${contract.id}" class="btn-modify btn btn-primary btn-accept" data-toggle="modal" data-target="#Modify" >Accepter</button>                       
-                        </div>
+                      <div class="card-body">
+                        <h5 style="color:white" class="card-title">${contract.faction}</h5>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p class="card-text status-onhold">Status : ${status}</p>
+                        <p style="color:white" class="card-text revenu">Revenu : ${contract.paymentAccepted} $</p>
+                        <button type="button" class="btn btn-primary btn-infos" data-bs-toggle="modal" data-bs-target="#exampleModal">Infos</button>
+                        <button data-id="${contract.id}" class="btn-modify btn btn-primary btn-accept" data-toggle="modal" data-target="#Modify" >Accepter</button>                       
+                      </div>
                     </div>
                   `
         }
 
         $('.contracts').append(card);
+        console.log(contract)
 
       });