diff --git a/characters.html b/characters.html
index e277f14..828d8e9 100644
--- a/characters.html
+++ b/characters.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -8,6 +9,7 @@
     <script src="scripts/personnages.js" defer type="module"></script>
     <title>Characters</title>
 </head>
+
 <body>
     <section class="titre"><a href="index.html">STAR WARS</a></section>
     <section class="sec-menu">
@@ -16,14 +18,15 @@
                 <li id="films"><a href="films.html">Films</a></li>
                 <li id="planets"><a href="planets.html">Planets</a></li>
                 <li id="characters"><a href="characters.html">Characters</a></li>
-                
+
             </ul>
         </nav>
-        
+
     </section>
-    <div class="image-charactere" ></div>
-    <section id="resultats"></section>
-   
-   
+    <div class="image-charactere"></div>
+    <section id="resultats" class="accordeon"></section>
+
+
 </body>
+
 </html>
\ No newline at end of file
diff --git a/films.html b/films.html
index d6130e0..5e6f27d 100644
--- a/films.html
+++ b/films.html
@@ -1,81 +1,89 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="styles/style.css">
-    <script src="/scripts/films.js" defer type="module"></script>
-    <title>Films</title>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="styles/style.css">
+  <script src="/scripts/films.js" defer type="module"></script>
+  <title>Films</title>
 </head>
+
 <body>
-    <section class="titre"><a href="index.html">STAR WARS</a></section>
-    <section class="sec-menu">
-        <nav class="nav-menu">
-            <ul class="ul-menu">
-                <li id="films"><a href="films.html">Films</a></li>
-                <li id="planets"><a href="planets.html">Planets</a></li>
-                <li id="characters"><a href="characters.html">Characters</a></li>
-            </ul>
-        </nav>
-    </section>
-    <div class='accordeon'>
-        <div class='accordeon_item'>
-            <div id="1" class='accordeon_item_header'>
-                <h2 class ="titres"></h2>
-                <p>(Cliquez ici pour étendre)</p>
-            </div>
-            <div class="accordeon_item_body">
-                <div class="accordeon_item_body_content">
-            </div>
-            </div>
-        </div>
-        <div class='accordeon_item'>         
-          <div id="2"class='accordeon_item_header'>
-            <h2 class ="titres"></h2><p>(Cliquez ici pour étendre)</p>
-          </div>    
-              <div class="accordeon_item_body"> 
-                  <div class="accordeon_item_body_content">
-                  </div>
-          </div>
-        </div>   
-        <div class='accordeon_item'>
-          <div id="3" class='accordeon_item_header'>
-            <h4>Return of the Jedi</h4><p>(Cliquez ici pour étendre)</p>
-          </div>  
-          <div class="accordeon_item_body">  
-              <div class="accordeon_item_body_content">
-              </div>
-            </div>
-        </div>  
-        <div class='accordeon_item'>
-          <div id="4"class='accordeon_item_header'>
-            <h4>The Phantom Menace</h4><p>(Cliquez ici pour étendre)</p>
-          </div>  
-          <div class="accordeon_item_body">
-              <div class="accordeon_item_body_content">
-              </div>
-            </div>  
-        </div>
-        <div id="5" class='accordeon_item'>
-            <div class='accordeon_item_header'>
-              <h4>Attack of the Clones</h4><p>(Cliquez ici pour étendre)</p>
-            </div>  
-            <div class="accordeon_item_body">
-                <div class="accordeon_item_body_content">
-                </div>
-              </div>  
-          </div>
-          <div class='accordeon_item'>
-            <div id="6" class='accordeon_item_header'>
-              <h4>Revenge of the Sith</h4><p>(Cliquez ici pour étendre)</p>
-            </div>  
-            <div class="accordeon_item_body">
-                <div class="accordeon_item_body_content">
-                </div>
-              </div>  
-          </div>
+  <section class="titre"><a href="index.html">STAR WARS</a></section>
+  <section class="sec-menu">
+    <nav class="nav-menu">
+      <ul class="ul-menu">
+        <li id="films"><a href="films.html">Films</a></li>
+        <li id="planets"><a href="planets.html">Planets</a></li>
+        <li id="characters"><a href="characters.html">Characters</a></li>
+      </ul>
+    </nav>
+  </section>
+  <div class='accordeon'>
+    <div class='accordeon_item'>
+      <div id="1" class='accordeon_item_header'>
+        <h2 class="titres"></h2>
+        <p>(Cliquez ici pour étendre)</p>
       </div>
-    <div class = "image-films"></div>
+      <div class="accordeon_item_body">
+        <div class="accordeon_item_body_content">
+        </div>
+      </div>
+    </div>
+    <div class='accordeon_item'>
+      <div id="2" class='accordeon_item_header'>
+        <h2 class="titres"></h2>
+        <p>(Cliquez ici pour étendre)</p>
+      </div>
+      <div class="accordeon_item_body">
+        <div class="accordeon_item_body_content">
+        </div>
+      </div>
+    </div>
+    <div class='accordeon_item'>
+      <div id="3" class='accordeon_item_header'>
+        <h4>Return of the Jedi</h4>
+        <p>(Cliquez ici pour étendre)</p>
+      </div>
+      <div class="accordeon_item_body">
+        <div class="accordeon_item_body_content">
+        </div>
+      </div>
+    </div>
+    <div class='accordeon_item'>
+      <div id="4" class='accordeon_item_header'>
+        <h4>The Phantom Menace</h4>
+        <p>(Cliquez ici pour étendre)</p>
+      </div>
+      <div class="accordeon_item_body">
+        <div class="accordeon_item_body_content">
+        </div>
+      </div>
+    </div>
+    <div id="5" class='accordeon_item'>
+      <div class='accordeon_item_header'>
+        <h4>Attack of the Clones</h4>
+        <p>(Cliquez ici pour étendre)</p>
+      </div>
+      <div class="accordeon_item_body">
+        <div class="accordeon_item_body_content">
+        </div>
+      </div>
+    </div>
+    <div class='accordeon_item'>
+      <div id="6" class='accordeon_item_header'>
+        <h4>Revenge of the Sith</h4>
+        <p>(Cliquez ici pour étendre)</p>
+      </div>
+      <div class="accordeon_item_body">
+        <div class="accordeon_item_body_content">
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="image-films"></div>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/planets.html b/planets.html
index 8d1a3af..d0761dc 100644
--- a/planets.html
+++ b/planets.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -8,7 +9,8 @@
     <script src="scripts/planets.js" type="module" defer></script>
     <title>Planets</title>
 </head>
-<body>
+
+<body id="planets">
     <section class="titre"><a href="index.html">STAR WARS</a></section>
     <section class="sec-menu">
         <nav class="nav-menu">
@@ -20,10 +22,11 @@
         </nav>
     </section>
 
-    <section id="resultats">
-        
+    <section id="resultats" class="accordeon">
+
     </section>
 
-    
+
 </body>
+
 </html>
\ No newline at end of file
diff --git a/scripts/personnages.js b/scripts/personnages.js
index 85caf9c..4414f55 100644
--- a/scripts/personnages.js
+++ b/scripts/personnages.js
@@ -67,19 +67,19 @@ for (let i = 0; i < PERPAGE; i++) {
 
 
   PERSONNAGES.innerHTML += 
-  `<section class="resultat">
- <h1 class="titreAccordeon">${urlname}</h1>
- <div class="accordeon">
-     <div class="1">
-     <div id=annéeNaissance>Année de Naissance : ${urlbirth_year} </div>
-     <div id=couleurYeux> Couleur des Yeux : ${urleye_colo}</div>
-     <div id=genre>Genre : ${urlgender}</div>
-     <div id=couleurCheveux> Couleur des Cheveux : ${urlhair_color} </div>
-     <div id= poids> Poids du personnage : ${urlmass}  kg</div>
-     <div id= couleurPeau> Couleur de Peau : ${urlskin_color} </div>
-     <div class="2"> Planète de Naissance : ${urlhomeworld}</div>
-     <div class="3"> Film où je suis présent : ${urlfilms}</div>
- </div>
+  `<section class="resultat accordeon_item">
+    <h1 class="accordeon_item_header">${urlname}</h1>
+    <div class="accordeon_item_body">
+        <div class="1">
+        <div id=annéeNaissance>Année de Naissance : ${urlbirth_year} </div>
+        <div id=couleurYeux> Couleur des Yeux : ${urleye_colo}</div>
+        <div id=genre>Genre : ${urlgender}</div>
+        <div id=couleurCheveux> Couleur des Cheveux : ${urlhair_color} </div>
+        <div id= poids> Poids du personnage : ${urlmass}  kg</div>
+        <div id= couleurPeau> Couleur de Peau : ${urlskin_color} </div>
+        <div class="2"> Planète de Naissance : ${urlhomeworld}</div>
+        <div class="3"> Film où je suis présent : ${urlfilms}</div>
+    </div>
 </section>`;
 
 
diff --git a/scripts/planets.js b/scripts/planets.js
index c2d23bc..4b6b113 100644
--- a/scripts/planets.js
+++ b/scripts/planets.js
@@ -33,9 +33,9 @@ function remplissage(results) {
 
 
         planetes.innerHTML +=
-            `<section class="resultat">
-            <h1 class="titreAccordeon">${nom}</h1>
-            <div class="accordeon">
+            `<section class="resultat accordeon_item">
+            <h1 class="accordeon_item_header">${nom}</h1>
+            <div class="accordeon_item_body">
                 <div class="1">
                     <p>${terrain}</p>
                     <p>${climate}</p>
@@ -47,6 +47,13 @@ function remplissage(results) {
         </section>`;
     }
 
+    const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
+    for (item of accordeonItemHeader) {
+        item.addEventListener("click", (event) => {
+            item.classList.toggle("active");
+        });
+    }
+
     //Pagination
     createPagination(previousUrl, nextUrl, planetes, remplissage);
 }
diff --git a/scripts/util.js b/scripts/util.js
index 446b1ee..aef73e6 100644
--- a/scripts/util.js
+++ b/scripts/util.js
@@ -52,7 +52,7 @@ export const createPagination = (prevUrl, nextUrl, elementParent, remplissage) =
     if (prevUrl == null) firstPage = true;
     if (nextUrl == null) lastPage = true;
     let previousButton = `<button id="prevButton">Page précédente</button>`;
-    let currentButton = `${currentPage}`;
+    let currentButton = `<span style="color:#ccc;">${currentPage}</span>`;
     let nextButton = `<button id="nextButton">Page suivante</button>`;
 
     elementParent.innerHTML += previousButton;
diff --git a/styles/style.css b/styles/style.css
index 0e25c4e..f21d97a 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -1,3 +1,8 @@
+:root{
+    --jaune: #ffe81f;
+    --blanc: #ccc;
+}
+
 @font-face {
     font-family: 'star-wars';
     src: url("../assets/fonts/Starjedi.ttf");
@@ -7,9 +12,25 @@
     margin: 0;
     padding: 0;
     font-family: 'star-wars', serif;
-    color : #000;
+    /* color: var(--blanc); */
+    color: #000;
+    font-size: 16px;
 }
 
+button{
+    color: #000;
+    padding: 0.2em;
+    margin: 0.2em;
+    border-color: var(--jaune);
+    border-radius: 3%;
+}
+
+body{
+    background-image: url("../assets/imgs/starry_sky.jpg");
+    font-size: 1em;
+}
+
+
 .titre a{
     margin-top : 20px;
     background-color: transparent;
@@ -17,61 +38,74 @@
     content: url("../assets/imgs/titre.png");
     font-size: xx-large;
     text-decoration: underline;
-    text-decoration-color: #ffe81f;
+    text-decoration-color: var(--jaune);
+}
+
+.sec-menu{
+    margin: 1em;
+    height: 100%;
 }
 
 .ul-menu{
+    display: flex;
     list-style-type: none;
     font-size: large;
-    color : #FFF;
-    text-decoration: underline;
-    text-decoration-color: #ffe81f;
+    color : var(--blanc);
 }
 
 .ul-menu li{
     display: inline;
-    color : #FFF;
-    float: left;
+    color : var(--blanc);
     margin: 1em;
     font-size: large;
-    text-decoration: underline;
-    text-decoration-color: #ffe81f;
 }
 
 .ul-menu li a{
     display: block;
-    color : #FFF;
+    color : var(--blanc);
     padding: 5px;
     text-align: center;
     font-size: large;
-    text-decoration: underline;
-    text-decoration-color: #ffe81f;
+    text-decoration: none;
+    border-bottom: 2px solid var(--jaune);
 }
 
-body{
-    background-image: url("../assets/imgs/starry_sky.jpg");
+.ul-menu li a:hover{
+    border: 2px solid var(--jaune);
+    /* border-radius: 10%; */
 }
 
-div.image-films {
+/* div.image-films {
     background-color: transparent;
     margin-top: -170px;
     margin-left: auto;
     width: 30%;
     content: url("../assets/imgs/mando.png");
 
+} */
+div.image-films {
+    background-color: transparent;
+    width: 30%;
+    content: url("../assets/imgs/mando.png");
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    z-index: -1;
 }
 
 div.image-charactere {
     background-color: transparent;
-    margin-top: -170px;
-    margin-left: auto;
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    z-index: -1;
     width: 30%;
     content: url("../assets/imgs/grogu.png");
 }
 
 
 #reponses-films {
-    color : #FFF;
+    color : var(--blanc);
     float: left; 
     margin-top : 200px;
     margin-left:-350px;
@@ -79,12 +113,10 @@ div.image-charactere {
 
 .accordeon {
     color : #000;
-    float: left; 
-    margin-top : 100px;
-    margin-left: -350px;
+    margin: 1em;
 }
 .accordeon_item{
-    background-color:#ffff;
+    background-color:var(--blanc);
     margin:2rem 0;
     border-radius: 1rem;
     box-shadow: 1px 1px 30px rgb(196, 196, 196) ;
@@ -115,3 +147,11 @@ div.image-charactere {
   .accordeon_item_header.active + .accordeon_item_body{
   max-height: 200px;
   }
+
+
+#planets{
+    background-image: url("../assets/imgs/backgroung_dead_trooper.jpg");
+    background-size: cover;
+    background-position: top;
+    background-attachment: fixed;
+}