diff --git a/src/App.js b/src/App.js
index 5e69e9fdd..597592bc9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,18 +1,45 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import './App.css';
+import axios from 'axios';
+import Character from './components/Character'
+
+
 
 const App = () => {
   // Try to think through what state you'll need for this app before starting. Then build out
   // the state properties here.
-
+  const [Characters, setCharacters] = useState([])
+  //const [currentCharacterId, setCurrentCharacterId] =useState(null)
+ // const [CharactersId, setCharactersId] = useState(null)
   // Fetch characters from the API in an effect hook. Remember, anytime you have a 
   // side effect in a component, you want to think about which state and/or props it should
   // sync up with, if any.
 
+
+  useEffect(()=> {
+    axios.get('https://swapi.dev/api/people/?format=api')
+    .then(res=> {
+     setCharacters(res.data)
+      
+    }).catch(err=>{
+      console.log(err)
+    })
+  },[])
+  
+
+  
+
   return (
     <div className="App">
       <h1 className="Header">Characters</h1>
-    </div>
+      {
+        Characters.map(character =>{
+          return <button onClick={<Character key={character.name}/>} >{character.name}</button>
+        })
+        }
+        
+      
+   </div>
   );
 }
 
diff --git a/src/components/Character.js b/src/components/Character.js
index 4083249c0..32dbb37e8 100644
--- a/src/components/Character.js
+++ b/src/components/Character.js
@@ -1 +1,32 @@
 // Write your Character component here
+import React, {useState, useEffect } from 'react'
+import axios from 'axios'
+
+export default function Character(props) {
+    const {characterId} = props
+    const [details, setDetails] = useState(null)
+
+    useEffect(()=> {
+        axios.get('https://swapi.dev/api/people/?format=api')
+        .then(res=> {
+         setDetails(res.data)
+          
+        }).catch(err=>{
+          console.log(err)
+        })
+      },[characterId])
+
+      const newDetails = details.map(det =>{
+          return det
+      })
+
+      return (
+          <div className='container'>
+              <li>Birth Year {newDetails.birth_year}</li>
+              <li>Films {newDetails.films}</li>
+              <li>gender {newDetails.gender}</li>
+              <li>Starships {newDetails.starships}</li>
+          </div>
+      )
+
+}
\ No newline at end of file