diff --git a/css/style.css b/css/style.css
index cc62509..6893874 100644
--- a/css/style.css
+++ b/css/style.css
@@ -84,12 +84,17 @@ h1{
     display: flex;
     flex-flow: wrap column ;
     justify-content: center;
+    padding-bottom: 50px;
+    padding-top: 100px;
 }
 .presentation{
-    margin: 100px;
+    margin: auto;
     font-size: 20px;
     color: #F5ED17;
-    width: 1050px;
+    max-width: 900px;
+    line-height: 25pt;
+    margin-bottom: 100px;
+    
 
 }
 h2{
@@ -99,23 +104,49 @@ h2{
 
 .etendre{
     color: #F5ED17;
+    font-size: 30px;
 }
 
 .card{
+    
+    padding-top: 25px;
+    padding-bottom: 25px;
 
 }
 
 .details{
     display:none;
+    
 }
 
 .active{
-    display: block;
+    
+    max-width: 900px;
+    background-color: #2A4158;
+    display: flex;
+    flex-flow: row wrap;
+    padding: 50px;
+    border-radius: 25px;
+    justify-content: space-evenly;
+    margin: auto;
+    margin-top: 25px;
 }
+
 .data{
-
+    display: flex;
+    flex-flow: column wrap;
+    justify-content: space-evenly;
+    margin-right: 50px;
+    padding: 25px; 
+    
+}
+.starships, .species, .films, .residents{
+    all: unset;
+    cursor: pointer;
+    font-size: 18px;
+    padding-top: 22px;
+    padding-bottom: 22px;
 }
-
 h3{
     font-size: 18px;
 
@@ -130,6 +161,8 @@ p{
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
+    margin-top: 50px;
+    margin-bottom: 100px;
 }
 
 .allButtons{
diff --git a/index.html b/index.html
index 1253439..f8bc62b 100644
--- a/index.html
+++ b/index.html
@@ -21,11 +21,14 @@
     <div class="banner"></div>
     <h1>Star Wars Chewbacca</h1>
     <div class="presentation">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore<br>
-        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip<br>
-        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu<br>
-        fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia<br>
-        deserunt mollit anim id est laborum.<br>
+        La République Galactique est en pleine ébullition. La taxation des routes 
+        commerciales reliant les systèmes éloignés provoque la discorde.  
+        Pour régler la question, la cupide Fédération du Commerce et ses redoutables
+         vaisseaux de guerre imposent un blocus à la petite planète Naboo.  
+        Face à ce dangereux engrenage, alors que le Congrès de la République
+        s’enlise dans des débats sans fin, le Chancelier Suprême charge en secret
+        deux Chevaliers Jedi, gardiens de la paix et de la justice dans la galaxie,
+        de résoudre le conflit…<br>
     </div>
 
     <footer></footer>    
diff --git a/scripts/people.js b/scripts/people.js
index a17ea43..a019a4d 100644
--- a/scripts/people.js
+++ b/scripts/people.js
@@ -126,7 +126,7 @@ async function getFilms(liste,div) {
         const film = await films.json();
         //console.log(film);
 
-        document.getElementById(div).innerHTML += `<h2>${film.title}</h2>`;
+        document.getElementById(div).innerHTML += `<p>${film.title}</p>`;
     }
 
 
diff --git a/scripts/planetes.js b/scripts/planetes.js
index 0aa0bef..2431388 100644
--- a/scripts/planetes.js
+++ b/scripts/planetes.js
@@ -35,7 +35,7 @@ async function getPlanets() {
               <p>${ROTATION_PERIOD}</p>
             </div>
             <div class="data">
-              <h3>ORBITAL :</h3>
+              <h3>Orbital :</h3>
               <p>${ORBITAL_PERIOD}</p>
               </div>
             <div class="data">