diff --git a/frontend/components/App.js b/frontend/components/App.js
index 3ec074a12..7b0df4d17 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import { useState, useEffect } from 'react'
 import axios from 'axios'
 import Character from './Character'
 
@@ -6,12 +7,45 @@ const urlPlanets = 'http://localhost:9009/api/planets'
 const urlPeople = 'http://localhost:9009/api/people'
 
 function App() {
-  // ❗ Create state to hold the data from the API
-  // ❗ Create effects to fetch the data and put it in state
+
+  const [characters, setCharacters] = useState([]);
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const fetchData = () => {
+    let requestPlanets = axios.get(urlPlanets);
+    let requestPeople = axios.get(urlPeople);
+    let Datas = [];
+    Promise.all([requestPlanets, requestPeople])
+      .then(responses => {
+        const [responsePlanets, responsePeople] = responses;
+        responsePeople.data.forEach((data1) => {
+          responsePlanets.data.forEach((data2) => {
+            if (data1.homeworld === data2.id)
+            {
+              let newData = data1;
+              newData.homeworld = data2;
+              Datas.push(newData);
+            }
+          })
+        })
+        setCharacters(Datas);
+      })
+      .catch(error => {
+          console.log('Error: ', error);
+      });
+  }
   return (
     <div>
       <h2>Star Wars Characters</h2>
-      <p>See the README of the project for instructions on completing this challenge</p>
+      {/* <p>See the README of the project for instructions on completing this challenge</p> */}
+      {
+        characters.map(
+          (character, index) => <Character key={index} character={character}/>
+        )
+      }
       {/* ❗ Map over the data in state, rendering a Character at each iteration */}
     </div>
   )
diff --git a/frontend/components/Character.js b/frontend/components/Character.js
index bba3747d8..24176dd59 100644
--- a/frontend/components/Character.js
+++ b/frontend/components/Character.js
@@ -1,11 +1,40 @@
 import React from 'react'
+import { useState } from 'react'
+
+function Character(props) { 
+  const {character} = props;
+  const [planetToggle, setPlanetToggle] = useState(false);
+
+  const toggle= () => {
+    setPlanetToggle(!planetToggle);
+  }
 
-function Character() { // ❗ Add the props
-  // ❗ Create a state to hold whether the homeworld is rendering or not
-  // ❗ Create a "toggle" click handler to show or remove the homeworld
   return (
-    <div>
-      {/* Use the same markup with the same attributes as in the mock */}
+    <div className="character-card" onClick={(e) => toggle()}>
+      <h3 className="character-name">{character.name}</h3>
+      <p>Birth_year: {character.birth_year}</p>
+      <p>Eye_color: {character.eye_color}</p>
+      <p>Gender: {character.gender}</p>
+      <p>Hair_color: {character.hair_color}</p>
+      <p>Height: {character.height}</p>
+      <p>Mass: {character.mass}</p>
+      <p>Skin_color: {character.skin_color}</p>
+      {
+        planetToggle? 
+        <div className="character-planet">
+          <h3>{character.homeworld.name}</h3>
+          <p>Climate: {character.homeworld.climate}</p>
+          <p>Diameter: {character.homeworld.diameter}</p>
+          <p>Gravity: {character.homeworld.gravity}</p>
+          <p>Orbital_period: {character.homeworld.orbital_period}</p>
+          <p>Population: {character.homeworld.population}</p>
+          <p>Rotation_period: {character.homeworld.rotation_period}</p>
+          <p>Surface_water: {character.homeworld.surface_water}</p>
+          <p>Terrain: {character.homeworld.terrain}</p>
+        </div> 
+        : 
+        <></>
+      }
     </div>
   )
 }