diff --git a/assets/spaceships/spaceship.png b/assets/spaceships/spaceship.png
index acc67df..304c958 100644
Binary files a/assets/spaceships/spaceship.png and b/assets/spaceships/spaceship.png differ
diff --git a/css/ship.css b/css/ship.css
index a257d18..4015026 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,6 +32,7 @@ button:hover{
     background-color:aqua ;
     transition: 1s;
 }
+
 .ships>*{
     flex: 100px;
 }
@@ -43,4 +42,46 @@ button:hover{
 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 98c2dec..1a406af 100644
--- a/html/templates/ship/ship.html
+++ b/html/templates/ship/ship.html
@@ -4,14 +4,16 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="css/ship.css">
+    <script src="/js/test/jsShip.js"></script>
+
+
     <title>Ship</title>
   </head>
   <body class="test">
     <div class="block-ships">
-      <div class="ships">
-    
-      </div>
+      <a class="prev" onclick="plusSlides(-1)">❮</a>
+      <a class="next" onclick="plusSlides(1)">❯</a>
     </div>
-   
+
   </body>
 </html>
\ No newline at end of file
diff --git a/js/controllers/ships.js b/js/controllers/ships.js
index 0358ca8..b6a0d3b 100644
--- a/js/controllers/ships.js
+++ b/js/controllers/ships.js
@@ -1,7 +1,7 @@
 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);
@@ -12,17 +12,22 @@ 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>
           `
           )
@@ -146,7 +151,6 @@ export default (temp_engine) => {
       modal.close();
     });
   });
-
+  
   temp_engine.render("templates/ship/ship.html");
-
 };
diff --git a/js/test/jsShip.js b/js/test/jsShip.js
new file mode 100644
index 0000000..22578d9
--- /dev/null
+++ b/js/test/jsShip.js
@@ -0,0 +1,21 @@
+let slideIndex = 1;
+showSlides(slideIndex);
+
+function plusSlides(n) {
+  showSlides(slideIndex += n);
+}
+
+function currentSlide(n) {
+  showSlides(slideIndex = n);
+}
+
+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";  
+}
\ No newline at end of file
