diff --git a/html/templates/ship/ship_modal.html b/html/templates/ship/ship_modal.html
index 447f60c..858c6db 100644
--- a/html/templates/ship/ship_modal.html
+++ b/html/templates/ship/ship_modal.html
@@ -1,18 +1,8 @@
 <!-- Copyright © 2023 Entreprise SkamKraft -->
 <div class="my-modal">
-  <p class="modal-title">Ship</p>
-  <p class="Ship-id"></p>
-  <p class="Ship-registration"></p>
-  <p class="Ship-nav"></p>
-  <p class="Ship-crew"></p>
-  <p class="Ship-frame"></p>
-  <p class="Ship-reactor"></p>
-  <p class="Ship-engine"></p>
-  <p class="Ship-cooldown"></p>
-  <p class="Ship-modules"></p>
-  <p class="Ship-mounts"></p>
-  <p class="Ship-cargo"></p>
-  <p class="Ship-fuel"></p>
+  <div class="infos">
+
+  </div>
   <div>
       <button class="btn btn-val btn-close">Close</button>
   </div>
diff --git a/js/controllers/ships.js b/js/controllers/ships.js
index 954653c..7ec8f02 100644
--- a/js/controllers/ships.js
+++ b/js/controllers/ships.js
@@ -10,45 +10,131 @@ export default (temp_engine) => {
     modal.load("templates/ship/ship_modal.html");
 
     Ship.list((ships) => {
+      console.log(ships)
       ships.forEach(ship => {
         $(".ships").append(
           `
             <div>
               <h5>${ship.symbol}</h5>
                 <p>fuel capacity: ${ship.fuel.capacity}</p>
-              <button id="FT" data-symbol="${ship.symbol}">FICHE Technique<button>
+              <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("#FT", "click", (e) => {
-            const id_ship = $(e.target).attr("data-symbol");
-            if(ship.symbol=id_ship)
-            {
-            $(".Ship-id").text("ID : " + ship.symbol);
-            $(".Ship-registration").text("Registration : " + ship.registration);
-            $(".Ship-nav").text("Nav : " + ship.nav);
-            $(".Ship-crew").text("Crew : " + ship.crew);
-            $(".Ship-frame").text("Frame : " + ship.frame );
-            $(".Ship-reactor").text("Reactor : " + ship.reactor );
-            $(".Ship-engine").text("Engine : " + ship.engine);
-            $(".Ship-cooldown").text("Cooldown : " + ship.cooldown);
-            $(".Ship-modules").text("Modules : " + ship.modules );
-            $(".Ship-mounts").text("Mounts : " + ship.mounts );
-            $(".Ship-cargo").text("Cargo : " + ship.cargo);
-            $(".Ship-fuel").text("Fuel : " + ship.fuel);
-            }
-            modal.show();
-          });
-      });
-      
+      });
+      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();
+      });
     });
 
     temp_engine.add_event(".btn-close", "click", () => {
       modal.close();
     });
-    
-
-    
   });
 
   temp_engine.render("templates/ship/ship.html");