diff --git a/css/ship.css b/css/ship.css
index b842d69..c5e5834 100644
--- a/css/ship.css
+++ b/css/ship.css
@@ -7,16 +7,14 @@
 }
 .block-ships{
     display:flex;
-    justify-content: center;
-    align-items: center;
+    flex-direction: column;
     color: white;
     font-size:large;
-}
-.ships{
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
     text-align: center;
+    padding-top: 80px;
+    max-width: 1000px;
+    position: relative;
+    margin: auto;
 }
 button{
     color: white;
@@ -34,9 +32,54 @@ button:hover{
     background-color:aqua ;
     transition: 1s;
 }
-.ships>*{
-    flex: 100px;
-}
+
+
 .my-modal{
     font-size:small;
 }
+body{
+    background-image: url("/assets/spaceships/hangar.png");
+    background-size: cover;
+}
+
+.ships-list {
+    display: none;
+}
+
+/* Next & previous buttons */
+.prev, .next {
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  width: auto;
+  margin-top: -22px;
+  padding: 16px;
+  color: white;
+  font-weight: bold;
+  font-size: 18px;
+  transition: 0.6s ease;
+  border-radius: 0 3px 3px 0;
+  user-select: none;
+}
+
+/* Position the "next button" to the right */
+.next {
+  right: 0;
+  border-radius: 3px 0 0 3px;
+}
+
+/* On hover, add a black background color with a little bit see-through */
+.prev:hover, .next:hover {
+  background-color: rgba(0,0,0,0.8);
+}
+
+/* Fading animation */
+.fade {
+  animation-name: fade;
+  animation-duration: 1.5s;
+}
+
+@keyframes fade {
+  from {opacity: .4}
+  to {opacity: 1}
+}
\ No newline at end of file
diff --git a/html/templates/ship/ship.html b/html/templates/ship/ship.html
index 15fda81..2fd8bde 100644
--- a/html/templates/ship/ship.html
+++ b/html/templates/ship/ship.html
@@ -3,14 +3,15 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="css/ship.css">
+
+
     <title>Ship</title>
   </head>
-  <body>
+  <body class="test">
     <div class="block-ships">
-      <div class="ships">
-    
-      </div>
+      <a class="prev">❮</a>
+      <a class="next">❯</a> 
     </div>
-   
   </body>
 </html>
\ No newline at end of file
diff --git a/js/controllers/ships.js b/js/controllers/ships.js
index 0358ca8..95b600d 100644
--- a/js/controllers/ships.js
+++ b/js/controllers/ships.js
@@ -1,10 +1,11 @@
 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);
+  let slideIndex = 1;
 
   temp_engine.after_render((temp_engine) => {
     menu_mod(temp_engine);
@@ -12,21 +13,28 @@ export default (temp_engine) => {
 
     Ship.list((ships) => {
       ships.forEach(ship => {
-        $(".ships").append(
+        $(".block-ships").append(
           `
-            <div class="ships-list" data-id="${ship.symbol}">
+            <div class="ships-list fade" data-id="${ship.symbol}">
               <h5>${ship.symbol}</h5>
-                <p>fuel capacity: ${ship.fuel.capacity}</p>
+              <img 
+                id="imgShip" 
+                src="/assets/spaceships/spaceship.png" 
+                alt="" />
+                <div class="buttonShip">
               <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>
             </div>
           `
           )
       });
+      showSlides(1)
+
       temp_engine.add_event(".reg", "click", (e) => {
         const id_ship = $(e.target).attr("data-symbol");
         ships.forEach(ship =>{
@@ -135,7 +143,6 @@ export default (temp_engine) => {
         ships.forEach(ship =>{
           if(ship.symbol==id_ship)
           {
-            console.log("ok")
           }
         })
 
@@ -145,8 +152,30 @@ export default (temp_engine) => {
     temp_engine.add_event(".btn-close", "click", () => {
       modal.close();
     });
-  });
+      function plusSlides(n) {
+        showSlides(slideIndex += n);
+      }
 
+      temp_engine.add_event(".prev", "click", () => {
+        plusSlides(-1);      
+      });
+      temp_engine.add_event(".next", "click", () => {
+        plusSlides(1);     
+      });
+      
+      function showSlides(n) {
+        let i;
+        let slides = document.getElementsByClassName("ships-list");
+        if (n > slides.length) {slideIndex = 1}    
+        if (n < 1) {slideIndex = slides.length}
+        for (i = 0; i < slides.length; i++) {
+          slides[i].style.display = "none";  
+        }
+        slides[slideIndex-1].style.display = "block";  
+      }
+
+  });
+  
   temp_engine.render("templates/ship/ship.html");
 
 };
