diff --git a/css/global.css b/css/global.css
new file mode 100644
index 0000000..3e479ab
--- /dev/null
+++ b/css/global.css
@@ -0,0 +1,83 @@
+/* Copyright © 2023 Entreprise SkamCraft */
+
+
+
+body,
+html {
+  height: 100%;
+}
+
+
+
+.btn-infos {
+  margin: 2px;
+  /* color: black; */
+  background-color: transparent;
+  border: 5px solid #0018e8;
+  border-radius: 10px;
+}
+
+.btn-infos:hover {
+  border-color: #0018e8;
+  background-color: #0018e8;
+  ;
+}
+
+.btn-accept {
+  margin: 2px;
+  /* color: black; */
+  background-color: transparent;
+  border: 5px solid #0018e8;
+  border-radius: 10px;
+}
+
+.btn-accept:hover {
+  border-color: rgb(33, 196, 0);
+  background-color: rgb(33, 196, 0);
+}
+
+.card {
+  margin-bottom: 30px;
+}
+
+.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 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  margin-left: 200px;
+  margin-top: -160px;
+  width: 100%;
+}
+
+.card-body button {
+  margin-top: 50px;
+  margin-right: 29px;
+  margin-left: -11px;
+  width: 240px;
+}
+
+.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/css/ship.css b/css/ship.css
new file mode 100644
index 0000000..b842d69
--- /dev/null
+++ b/css/ship.css
@@ -0,0 +1,42 @@
+* {
+    box-sizing: border-box;
+}
+@font-face {
+    font-family: M42;
+    src: url("/assets/fonts/m42.TTF");
+}
+.block-ships{
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    font-size:large;
+}
+.ships{
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    text-align: center;
+}
+button{
+    color: white;
+    font-family: 'M42';
+    background-color: black;
+    font-size:x-small;
+    box-shadow: 3px 2px white;
+    border: 4px solid white;
+    border-radius: 10px;
+    padding: 10px;
+    padding-left: 15px;
+    padding-right: 15px;
+}
+button:hover{
+    background-color:aqua ;
+    transition: 1s;
+}
+.ships>*{
+    flex: 100px;
+}
+.my-modal{
+    font-size:small;
+}
diff --git a/html/templates/auth/login.html b/html/templates/auth/login.html
index 81974a4..04c3c7e 100644
--- a/html/templates/auth/login.html
+++ b/html/templates/auth/login.html
@@ -3,9 +3,10 @@
 <div class="container smooth"> 
     <p class="con-title">Login</p>
     <input type="text" placeholder="Agent token" id="in-token" class="in-big">
+    <input type="checkbox" id="box-remember">Remember me ?</input>
     <div class="grp-btn">
-        <button class="btn btn-val" id="val">Validate</button>
-        <button class="btn btn-cancel" id="cancel">Cancel</button>
+        <button class="btn btn-val" id="btn-login">Validate</button>
+        <button class="btn btn-cancel" id="btn-cancel">Cancel</button>
     </div>
     <div class="errors"></div>
 </div>
\ No newline at end of file
diff --git a/html/templates/auth/reg.html b/html/templates/auth/reg.html
index 4d68dcd..6cdb9be 100644
--- a/html/templates/auth/reg.html
+++ b/html/templates/auth/reg.html
@@ -2,11 +2,15 @@
 
 <div class="container smooth"> 
     <p class="con-title">New Agent</p>
-    <input type="text" placeholder="Name" id="in-name" class="in-big">
-    <input type="text" placeholder="Faction" id="in-faction" class="in-big">
+    <input type="text" placeholder="Name" id="input-name" class="in-big">
+    <select id="input-faction" class="in-big">
+        <option value="" disabled selected>Factions</option>
+        <optgroup id="group-faction" label="---------"></optgroup>
+      </select>
+      <input type="checkbox" id="box-remember">Remember me ?</input>
     <div class="grp-btn">
-        <button class="btn btn-val" id="val">Validate</button>
-        <button class="btn btn-cancel" id="cancel">Cancel</button>
+        <button class="btn btn-val" id="btn-register">Validate</button>
+        <button class="btn btn-cancel" id="btn-cancel">Cancel</button>
     </div>
     <div class="errors"></div>
 </div>
\ No newline at end of file
diff --git a/html/templates/contracts/contracts.html b/html/templates/contracts/contracts.html
new file mode 100644
index 0000000..de05fa8
--- /dev/null
+++ b/html/templates/contracts/contracts.html
@@ -0,0 +1,4 @@
+<link rel="stylesheet" href="css/global.css">
+<div class="contract-screen">
+    <div class="contracts"></div>
+</div>
\ No newline at end of file
diff --git a/html/templates/contracts/contracts_modal.html b/html/templates/contracts/contracts_modal.html
new file mode 100644
index 0000000..e09dddd
--- /dev/null
+++ b/html/templates/contracts/contracts_modal.html
@@ -0,0 +1,16 @@
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+
+<div class="my-modal">
+    <p class="modal-title">Contract</p>
+    <p class="contract-id"></p>
+    <p class="contract-faction"></p>
+    <p class="contract-type"></p>
+    <p class="contract-expiration"></p>
+    <p class="contract-payment-accepted"></p>
+    <p class="contract-payment-fulfill"></p>
+    <p class="contract-tradeSymbol"></p>
+    <p class="contract-destinationSymbol"></p>
+    <div>
+        <button class="btn btn-val btn-close">Close</button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/html/templates/ship/ship.html b/html/templates/ship/ship.html
new file mode 100644
index 0000000..15fda81
--- /dev/null
+++ b/html/templates/ship/ship.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ship</title>
+  </head>
+  <body>
+    <div class="block-ships">
+      <div class="ships">
+    
+      </div>
+    </div>
+   
+  </body>
+</html>
\ No newline at end of file
diff --git a/html/templates/ship/ship_modal.html b/html/templates/ship/ship_modal.html
new file mode 100644
index 0000000..a5a542c
--- /dev/null
+++ b/html/templates/ship/ship_modal.html
@@ -0,0 +1,9 @@
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+<div class="my-modal">
+    <div class="infos">
+  
+    </div>
+    <div>
+        <button class="btn btn-val btn-close">Close</button>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/js/controllers/contracts.js b/js/controllers/contracts.js
new file mode 100644
index 0000000..941379e
--- /dev/null
+++ b/js/controllers/contracts.js
@@ -0,0 +1,133 @@
+// Copyright © 2023 Entreprise SkamKraft
+"use strict";
+
+import { SpaceTraders } from "../skama_code/api/config.js";
+
+import menu_mod from "./menu_mod.js";
+import { My } from "../skama_code/api/agent.js";
+import { Contract } from "../skama_code/api/contract.js";
+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) => {
+
+      //Evenements
+      temp_engine.add_event(".btn-accept", "click", (e) => {
+        contracts.forEach((contract) => {
+          if ($(e.target).attr("data-id") == contract.id) {
+            contract.accept(() => {
+              $(e.target).parent().children(".status-onhold").html("Status : accepté");
+              $(e.target).parent().children(".status-onhold").attr("class", 'status-accepted');
+              $(e.target).html("Contract accepted")
+              // $(e.target).remove();
+
+            });
+          }
+        });
+      });
+
+      temp_engine.add_event(".btn-infos", "click", (e) => {
+        contracts.forEach((contract) => {
+
+          const id_contract = $(e.target).attr("data-id");
+
+          $(".contract-id").text("ID : " + contract.id);
+          $(".contract-faction").text("Faction : " + contract.faction);
+          $(".contract-type").text("Type : " + contract.type);
+          $(".contract-expiration").text("Expiration : " + contract.expiration);
+          $(".contract-payment-accepted").text("Payment : " + contract.paymentAccepted + " $");
+          $(".contract-payment-fulfill").text("Payment fulfill : " + contract.paymentFulfill + " $");
+          $(".contract-tradeSymbol").text("Trade Symbol : " + contract.tradeSymbol);
+          $(".contract-destinationSymbol").text("Destination : " + contract.destination);
+
+          modal.show();
+
+        });
+
+      });
+
+      contracts.forEach(contract => {
+        let img
+        let status
+        let card
+
+
+
+        if (contract.type = "PROCUREMENT") {
+          img = "/assets/contracts/procurement.png"
+        }
+        else if (contract.type = "TRANSPORT") {
+          img = "/assets/contracts/transportation.png"
+        }
+        else {
+          img = "/assets/contracts/shuttle.png"
+        }
+
+        if (contract.accepted) {
+          status = "accepted"
+          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">${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" 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 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>
+                        <p></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);
+        $('.contracts').append(card);
+
+
+      });
+
+    })
+
+    temp_engine.add_event(".btn-close", "click", () => {
+      modal.close();
+    });
+
+    menu_mod(temp_engine);
+  });
+
+  temp_engine.render("templates/contracts/contracts.html")
+}
\ No newline at end of file
diff --git a/js/controllers/login.js b/js/controllers/login.js
index 3b4cc9e..a981ba0 100644
--- a/js/controllers/login.js
+++ b/js/controllers/login.js
@@ -1,51 +1,39 @@
-import { Modal } from "../skama_code/ui/modal.js";
 import { Auth } from "../skama_code/auth/auth.js";
 import { My } from "../skama_code/api/agent.js";
 import home from "./home.js";
 import menu_mod from "./menu_mod.js";
+import { AgentBuilder } from "../skama_code/api/agent.js";
 
 export default function login(temp_engine) {
-    let auth = new Auth(true);
-    let modal = new Modal("login-modal", temp_engine);
+    const auth = new Auth();
 
-    modal.add_class("ext-modal");
     temp_engine.after_render((temp_engine) => {
-        modal.load("templates/auth/login_modal.html")
         menu_mod(temp_engine);
-        temp_engine.add_event("#ok", "click", () => {
-            home(temp_engine);
-        });
-    
-        temp_engine.add_event("#forget_login", "click", () => {
-            My.agent = null;
-            auth.unload_token();
-            modal.close();
-            render_login();
-        });
     
-        temp_engine.add_event("#val", "click", () => {
-            let token = $("#in-token").val();
-            auth.login(token);
+        temp_engine.add_event("#btn-login", "click", () => {
+            const is_checked = $("#box-remember").is(":checked");
+            const token = $("#in-token").val();
+            auth.store = is_checked;
+            auth.login(token)
         });
     
-        temp_engine.add_event("#cancel", "click", () => {
-            $("#in-token").val("");
+        temp_engine.add_event("#btn-cancel", "click", () => {
+            $("#input-token").val("");
+            $("#box-remember").prop("checked", false);
         });
     });
 
-    temp_engine.render(`templates/auth/login.html`);
-
     auth.done((agent) => {
-        modal.show();
         My.agent = agent;
-    }).fail((errs) => {
+        home(temp_engine);
+    })
+
+    auth.fail((errors) => {
         $(".errors").html("");
-        errs.forEach(err => {
-            $(".errors").append(`
-                <p>${err}</p>
-            `);
+        errors.forEach(error => {
+            $(".errors").append(`<p>${error}</p>`);
         });
-    });
+    })
 
-    auth.relog();
+    temp_engine.render(`templates/auth/login.html`);
 }
\ No newline at end of file
diff --git a/js/controllers/menu_mod.js b/js/controllers/menu_mod.js
index 4310621..42a979a 100644
--- a/js/controllers/menu_mod.js
+++ b/js/controllers/menu_mod.js
@@ -17,12 +17,26 @@ function init_menu(temp_engine) {
     temp_engine.add_event(".nav-brand", "click", () => {
         home(temp_engine);
     });
+    temp_engine.add_event("#logout-link", "click", () => {
+        My.agent = null;
+        localStorage.removeItem("token");
+        home(temp_engine);
+    });
 }
 
 function loged_links() {
     $(".nav-links").prepend(`
+        <li class="nav-link smooth" id="systems-link">Systems</li>
         <li class="nav-link smooth" id="contracts-link">Contracts</li>
         <li class="nav-link smooth" id="ships-link">Ships</li>
+        <li class="nav-link smooth" id="logout-link">logout</li>
+    `);
+}
+
+function unloged_links() {
+    $(".nav-links").prepend(`
+        <li class="nav-link smooth" id="login-link">Log in</li>
+        <li class="nav-link smooth" id="reg-link">New Agent</li>
     `);
 }
 
@@ -38,8 +52,10 @@ function show_stats() {
 
 export default function menu_mod(temp_engine) {
     init_menu(temp_engine);
-    if(My.agent) {
+    if (My.agent) {
         show_stats();
         loged_links();
+    } else {
+        unloged_links();
     }
 }
\ No newline at end of file
diff --git a/js/controllers/reg.js b/js/controllers/reg.js
index ade8c69..b284dfa 100644
--- a/js/controllers/reg.js
+++ b/js/controllers/reg.js
@@ -1,61 +1,47 @@
-import { Modal } from "../skama_code/ui/modal.js";
 import { Auth } from "../skama_code/auth/auth.js";
 import { My } from "../skama_code/api/agent.js";
+import { Faction } from "../skama_code/api/faction.js"
 import home from "./home.js";
 import menu_mod from "./menu_mod.js";
 
 export default function reg(temp_engine) {
-    let active = false;
-    let auth = new Auth(true);
-    let modal = new Modal("reg-modal", temp_engine);
+    let auth = new Auth();
 
-    modal.add_class("ext-modal");
     temp_engine.after_render((temp_engine) => {
         menu_mod(temp_engine);
-        modal.load("templates/auth/reg_modal.html");
-        temp_engine.add_event("#ok", "click", () => {
-            home(temp_engine);
-        });
-    
-        temp_engine.add_event("#forget_reg", "click", () => {
-            My.agent = null;
-            auth.unload_token();
-            modal.close();
-            render_reg();
+
+        Faction.list_all((factions) => {
+            factions.forEach(faction => {
+                const option = `<option>${faction.symbol}</option>`;
+                $("#group-faction").append(option);
+            });
         });
-    
-        temp_engine.add_event("#val", "click", () => {
-            if (!active) {
-                active = true;
-                let name = $("#in-name").val();
-                let faction = $("#in-faction").val();
-                auth.register({
-                    name: name,
-                    faction: faction
-                });
-            }
+
+        temp_engine.add_event("#btn-register", "click", () => {
+            const is_checked = $("#box-remember").is(":checked");
+            const symbol = $("#input-name").val();
+            const faction = $("#input-faction").val();
+            auth.store = is_checked;
+            auth.register({name: symbol, faction: faction});
         });
-    
-        temp_engine.add_event("#cancel", "click", () => {
-            $("#in-name").val("");
-            $("#in-faction").val("");
+
+        temp_engine.add_event("#btn-cancel", "click", () => {
+            $("#input-name").val("");
+            $("#box-remember").prop("checked", false);
         });
     });
 
-    temp_engine.render(`templates/auth/reg.html`);
-
     auth.done((agent) => {
-        $(".show-token").text(agent.token);
-        modal.show();
         My.agent = agent;
-        active = false;
-    }).fail((errs) => {
+        home(temp_engine);
+    });
+
+    auth.fail((errors) => {
         $(".errors").html("");
-        errs.forEach(err => {
-            $(".errors").append(`
-                <p>${err}</p>
-            `);
+        errors.forEach(error => {
+            $(".errors").append(`<p>${error}</p>`);
         });
-        active = false;
-    });
+    })
+
+    temp_engine.render(`templates/auth/reg.html`);
 }
\ No newline at end of file
diff --git a/js/controllers/ships.js b/js/controllers/ships.js
new file mode 100644
index 0000000..0358ca8
--- /dev/null
+++ b/js/controllers/ships.js
@@ -0,0 +1,152 @@
+import menu_mod from "./menu_mod.js";
+import { Modal } from "../skama_code/ui/modal.js";
+import { Ship } from "../skama_code/api/ship.js";
+import system from "./system.js";
+
+export default (temp_engine) => {
+  let modal = new Modal("ship-modal", temp_engine);
+
+  temp_engine.after_render((temp_engine) => {
+    menu_mod(temp_engine);
+    modal.load("templates/ship/ship_modal.html");
+
+    Ship.list((ships) => {
+      ships.forEach(ship => {
+        $(".ships").append(
+          `
+            <div class="ships-list" data-id="${ship.symbol}">
+              <h5>${ship.symbol}</h5>
+                <p>fuel capacity: ${ship.fuel.capacity}</p>
+              <button class="reg" data-symbol="${ship.symbol}">Name</button>
+              <button class="nav" data-symbol="${ship.symbol}">Navigation</button>
+              <button class="crew" data-symbol="${ship.symbol}">Crew</button>
+              <button class="frame" data-symbol="${ship.symbol}">Frame</button>
+              <button class="react" data-symbol="${ship.symbol}">Reactor</button>
+              <button class="fuel" data-symbol="${ship.symbol}">Fuel</button>
+            </div>
+          `
+          )
+      });
+      temp_engine.add_event(".reg", "click", (e) => {
+        const id_ship = $(e.target).attr("data-symbol");
+        ships.forEach(ship =>{
+          if(ship.symbol==id_ship)
+          {
+            $(".infos").html("");
+            $(".infos").append(`<p>Name : ${ship.registration.name}</p>`);
+            $(".infos").append(`<p>Faction : ${ship.registration.factionSymbol}</p>`);
+            $(".infos").append(`<p>Role : ${ship.registration.role}</p>`);
+          }
+        })
+        modal.show();
+      });
+      temp_engine.add_event(".nav", "click", (e) => {
+        const id_ship = $(e.target).attr("data-symbol");
+        ships.forEach(ship =>{
+          if(ship.symbol==id_ship)
+          {
+            $(".infos").html("");
+            $(".infos").append(`<p>Current system : ${ship.nav.systemSymbol}</p>`);
+            $(".infos").append(`<p>Current waypoint : ${ship.nav.waypointSymbol}</p>`);
+            $(".infos").append(`<p>Current status : ${ship.nav.status}</p>`);
+            $(".infos").append(`<p>Flight mode : ${ship.nav.flightMode}</p>`);
+          }
+        })
+        modal.show();
+      });
+      temp_engine.add_event(".crew", "click", (e) => {
+        const id_ship = $(e.target).attr("data-symbol");
+        ships.forEach(ship =>{
+          if(ship.symbol==id_ship)
+          {
+            $(".infos").html("");
+            $(".infos").append(`<p>Current member : ${ship.crew.current}</p>`);
+            $(".infos").append(`<p>Capacity : ${ship.crew.capacity}</p>`);
+            $(".infos").append(`<p>required member : ${ship.crew.required}</p>`);
+            $(".infos").append(`<p>Moral : ${ship.crew.morale}</p>`);
+          }
+        })
+        modal.show();
+      });
+      temp_engine.add_event(".frame", "click", (e) => {
+        const id_ship = $(e.target).attr("data-symbol");
+        ships.forEach(ship =>{
+          if(ship.symbol==id_ship)
+          {
+            $(".infos").html("");
+            $(".infos").append(`<p>Name : ${ship.frame.name}</p>`);
+            $(".infos").append(`<p>Description : ${ship.frame.description}</p>`);
+            $(".infos").append(`<p>Fuel capacity : ${ship.frame.fuelCapacity}</p>`);
+            $(".infos").append(`<p>Condition : ${ship.frame.condition}</p>`);
+            $(".infos").append(`<p>Power : ${ship.frame.requirements.power}</p>`);
+            $(".infos").append(`<p>Crew : ${ship.frame.requirements.crew}</p>`);
+
+          }
+        })
+        modal.show();
+      });
+      temp_engine.add_event(".react", "click", (e) => {
+        const id_ship = $(e.target).attr("data-symbol");
+        ships.forEach(ship =>{
+          if(ship.symbol==id_ship)
+          {
+            $(".infos").html("");
+            $(".infos").append(`<p>Name : ${ship.reactor.name}</p>`);
+            $(".infos").append(`<p>Description : ${ship.reactor.description}</p>`);
+            $(".infos").append(`<p>Condition : ${ship.reactor.condition}</p>`);
+            $(".infos").append(`<p>Power : ${ship.reactor.powerOutput}</p>`);
+            $(".infos").append(`<p>Crew : ${ship.reactor.requirements.crew}</p>`);
+          }
+        })
+        modal.show();
+      });
+      temp_engine.add_event(".engine", "click", (e) => {
+        const id_ship = $(e.target).attr("data-symbol");
+        ships.forEach(ship =>{
+          if(ship.symbol==id_ship)
+          {
+            $(".infos").html("");
+            $(".infos").append(`<p>Name : ${ship.engine.name}</p>`);
+            $(".infos").append(`<p>Description : ${ship.engine.description}</p>`);
+            $(".infos").append(`<p>Condition : ${ship.engine.condition}</p>`);
+            $(".infos").append(`<p>Speed : ${ship.engine.speed}</p>`);
+            $(".infos").append(`<p>Crew : ${ship.engine.requirements.crew}</p>`);
+            $(".infos").append(`<p>Power : ${ship.engine.requirements.power}</p>`);
+          }
+        })
+        modal.show();
+      });
+      temp_engine.add_event(".fuel", "click", (e) => {
+        const id_ship = $(e.target).attr("data-symbol");
+        ships.forEach(ship =>{
+          if(ship.symbol==id_ship)
+          {
+            $(".infos").html("");
+            $(".infos").append(`<p>current fuel : ${ship.fuel.current}</p>`);
+            $(".infos").append(`<p>Description : ${ship.fuel.capacity}</p>`);
+            $(".infos").append(`<p>Condition : ${ship.fuel.consumed.amount}</p>`);
+            $(".infos").append(`<p>Speed : ${ship.fuel.consumed.timestamp}</p>`);
+          }
+        })
+        modal.show();
+      });
+      $(".ships-list").on("click", (e) => {
+        const id_ship = $(e.target).attr("data-id");
+        ships.forEach(ship =>{
+          if(ship.symbol==id_ship)
+          {
+            console.log("ok")
+          }
+        })
+
+      });
+    });
+
+    temp_engine.add_event(".btn-close", "click", () => {
+      modal.close();
+    });
+  });
+
+  temp_engine.render("templates/ship/ship.html");
+
+};