diff --git a/planetes.html b/planetes.html
index efb0f90..8a219d7 100644
--- a/planetes.html
+++ b/planetes.html
@@ -18,6 +18,7 @@
                 <li><a href="planetes.html">Planètes</a></li>
               </ul>
         </nav>
+        <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." class="SearchBar">
     </header>
     <h1>Planètes</h1>
     <section class="container" id="container"> <!-- class Css-->
diff --git a/scripts/planetes.js b/scripts/planetes.js
index 0061b81..0143954 100644
--- a/scripts/planetes.js
+++ b/scripts/planetes.js
@@ -45,34 +45,38 @@ async function getPlanets() {
             <h3>ORBITAL :</h3>
             <p>${ORBITAL_PERIOD}</p>
             </div>
-          <div>
+          <div class="data">
             <h3>Diameter :</h3>
             <p>${DIAMETER}</p>
             </div>
-          <div>
+          <div class="data">
             <h3>Climate :</h3>
             <p>${CLIMATE}</p>
             </div>
-          <div>
+          <div class="data" >
             <h3>Gravity : </h3>
             <p>${GRAVITY}</p>
             </div>
-          <div>
+          <div class="data" >
             <h3>Terrain :</h3>
             <p>${TERRAIN}</p>
             </div>
-          <div>
+          <div class="data">
             <h3>Surface water : </h3>
             <p>${SURFACE_WATER}</p>
             </div>
-          <div>
+          <div class="data">
             <h3>Population :</h3
             <p>${POPULATION}</p>
             </div>
-          <button class="films" value="${PLANET.results[i].films}">Films</button>
-          <div id="detailsFilms${i}"></div>
-          <button class="residents" value="${PLANET.results[i].residents}">Résidents</button>
-          <div id="detailsResidents${i}"></div>
+          <div class="data">
+            <button class="films" value="${PLANET.results[i].films}">Films</button>
+            <div id="detailsFilms${i}"></div>
+          </div>
+          <div class="data">
+            <button class="residents" value="${PLANET.results[i].residents}">Résidents</button>
+            <div id="detailsResidents${i}"></div>
+          </div>  
           </section>
         
           `;