diff --git a/package-lock.json b/package-lock.json
index 79208da2a..1ca867df7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "web-sprint-challenge-intro-to-react",
       "version": "0.1.1",
       "dependencies": {
         "@testing-library/jest-dom": "^5.12.0",
diff --git a/src/App.css b/src/App.css
index fab70641c..4b6af1f54 100644
--- a/src/App.css
+++ b/src/App.css
@@ -6,3 +6,4 @@
   text-shadow: 1px 1px 5px #fff;
 }
 /* write your parent styles in here for your App.js */
+
diff --git a/src/App.js b/src/App.js
index 5e69e9fdd..ac7d571a5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,17 +1,54 @@
-import React from 'react';
-import './App.css';
+import React, {useState, useEffect} from 'react';
+import './App.css'
 
+import axios from 'axios'
+import Character from './components/Character'
+
+
+// console.log('data', data)
+// data.map(item =>{
+//   console.log('hello', item)
+// })
 const App = () => {
+  const [character, setCharacter] = useState([])
+  
+  const info= character.map(info => {
+    return ( info)
+  })
+// console.log('hello', info)
+
+useEffect(() => {
+  axios.get(`https://swapi.dev/api/people`)
+  .then (res =>{
+    setCharacter(res.data)
+    
+  })
+  .catch (err => console.error(err))
+}, [])
+
+
+character.map(item => {
+  console.log ('waiting', item)
+})
+
   // Try to think through what state you'll need for this app before starting. Then build out
   // the state properties here.
 
   // 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.
-
+// console.log(character)
+// 
   return (
     <div className="App">
       <h1 className="Header">Characters</h1>
+     <h2> {
+      character.map(character =>{
+      return (
+        <Character key = {`App-characterMap-character${character.created}`} character= {character} info={info} />
+      )
+    })
+      }</h2>
     </div>
   );
 }
diff --git a/src/components/Character.js b/src/components/Character.js
index 4083249c0..8e628832e 100644
--- a/src/components/Character.js
+++ b/src/components/Character.js
@@ -1 +1,37 @@
 // Write your Character component here
+import React, {useState, useEffect} from 'react'
+import styled from 'styled-components'
+import axios from 'axios'
+
+const StyledCharacter= styled.div`
+border: 1px solid lemonchiffon;
+border-radius: 20%;
+margin: 5%
+`
+const StyledButton= styled.button`
+background-color:coral;
+color:white;
+
+`
+const CharacterItem = (props) => {
+    const[button, setButton]= useState(true)
+    
+    const {character} = props
+    
+
+   const buttonClick = () => {
+    setButton(!button)
+   }
+
+   
+    return(
+       <StyledCharacter >
+        <h2>{character.name}</h2>
+        <StyledButton >Want To Learn More?</StyledButton>
+          {/* <p>{`hailing from ${character.homeworld}, ${character.name} is a  human with ${character.hair_color} hair, and ${character.eye_color} eyes.`}</p> */}
+      </StyledCharacter>
+    )
+}
+
+
+export default CharacterItem
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 5ea3014fb..80cbb661b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,5 +3,5 @@ body {
   padding: 0;
   font-family: sans-serif;
   background-image: url('./images/sw-bg.jpg');
-  background-size: cover;
+  background-size:cover;
 }