diff --git a/css/style.css b/css/style.css
index 8296227..180a442 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,47 +1,54 @@
 body{
-    background-color:#2A4158;
+    
+    background-color: #031010;
+    color: #fff;
+    text-align: center;
     }
 
-.header{
+header{
     width: 100%;
+    height: 200px;
     text-align: center;
-    margin: 50px;;
+    background-color:#2A4158;
 }
 
-ul{
-    display:flex;
-    justify-content: center;
+.navAccueil{
+
 }
 
-li{
-    color:#fff;
-    padding: 10px;
+.navSearch{
 
-    border-radius: 10% 10% 0% 0%;
-    margin :25px;
-    list-style: none;
-    font-size:18px;
 }
 
-.active{
-    background-color: #000;
+h1{
+    font-size: 48px;
+    
 }
 
-.body{
-    width:100%;
+h2{
+
 }
 
-img{
-    width:100%;
-    height:auto;
+.card{
+
 }
 
-a{
-    color:#fff;
-    font-size:18px;
+.data{
+
 }
 
+h3{
 
-a:hover{
-    text-decoration: none;
+}
+
+p{
+
+}
+
+.boutons{
+    
+
+}
+footer{
+    background-color: #2A4158;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index ed30c45..cb74fd0 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,16 @@
     <title>Accueil - Star Wars Choubaka</title>
 </head>
 <body>
+    <header>
+        <nav class="navAccueil">
+            <ul>
+                <li><a href="index.html">Accueil</a></li>
+                <li><a href="films.html">Films</a></li>
+                <li><a href="people.html">Personnages</a></li>
+                <li><a href="planetes.html">Planètes</a></li>
+              </ul>
+        </nav>
+    </header>
     
 </body>
 </html>
\ No newline at end of file
diff --git a/planetes.html b/planetes.html
index f0d749d..efb0f90 100644
--- a/planetes.html
+++ b/planetes.html
@@ -9,21 +9,29 @@
     <script src="./scripts/planetes.js" defer></script>
 </head>
 <body>
+    <header>
+        <nav class="navSearch">
+            <ul>
+                <li><a href="index.html">Accueil</a></li>
+                <li><a href="films.html">Films</a></li>
+                <li><a href="people.html">Personnages</a></li>
+                <li><a href="planetes.html">Planètes</a></li>
+              </ul>
+        </nav>
+    </header>
     <h1>Planètes</h1>
-    <section class="container" id="container">
+    <section class="container" id="container"> <!-- class Css-->
         
                       
 
     </section>
 
-    <div class="boutons">
+    <div class="boutons"> <!-- class Css-->
        <button class="allButtons" name="moins" value="-1"> < </button>
-       <div id="buttons"></div>
-            <!-- <button name="un" value=1> 1 </button>
-            <button name="deux" value=2> 2 </button> -->
-           <button class="allButtons" name="plus" value="+1"> > </button>
+       <div id="buttons"></div>         
+       <button class="allButtons" name="plus" value="+1"> > </button>
 
     </div>  
-        
+    <footer></footer>    
 </body>
 </html>
\ No newline at end of file
diff --git a/scripts/planetes.js b/scripts/planetes.js
index b068d54..0061b81 100644
--- a/scripts/planetes.js
+++ b/scripts/planetes.js
@@ -35,9 +35,9 @@ async function getPlanets() {
     //       movies += `<p>${film.title}</p>`;
     //   }
       document.getElementById('container').innerHTML += `
-          <p>
+          <section class="card"> 
           <h2>${PLANET_NAME}</h2>
-          <div> 
+          <div class="data"> 
             <h3>Rotation :</h3> 
             <p>${ROTATION_PERIOD}</p>
           </div>
@@ -73,8 +73,8 @@ async function getPlanets() {
           <div id="detailsFilms${i}"></div>
           <button class="residents" value="${PLANET.results[i].residents}">Résidents</button>
           <div id="detailsResidents${i}"></div>
-          </p>
-          <hr>
+          </section>
+        
           `;
       }
       const BUTTONS_FILMS = document.querySelectorAll('.films');
