diff --git a/package-lock.json b/package-lock.json
index 44cde1123..e4b0cf3a7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,12 +5,13 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "web-sprint-challenge-intro-to-react",
       "version": "0.1.1",
       "dependencies": {
         "@testing-library/jest-dom": "^5.16.2",
         "@testing-library/react": "^12.1.3",
         "@testing-library/user-event": "^13.5.0",
-        "axios": "^0.26.0",
+        "axios": "^0.26.1",
         "msw": "^0.38.2",
         "mutationobserver-shim": "^0.3.7",
         "react": "^17.0.2",
@@ -4098,9 +4099,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "0.26.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.0.tgz",
-      "integrity": "sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==",
+      "version": "0.26.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
+      "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
       "dependencies": {
         "follow-redirects": "^1.14.8"
       }
@@ -17897,9 +17898,9 @@
       "integrity": "sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw=="
     },
     "axios": {
-      "version": "0.26.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.0.tgz",
-      "integrity": "sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==",
+      "version": "0.26.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
+      "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
       "requires": {
         "follow-redirects": "^1.14.8"
       }
@@ -18807,7 +18808,9 @@
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
           "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-          "requires": {}
+          "requires": {
+            "ajv": "^8.0.0"
+          }
         },
         "ajv-keywords": {
           "version": "5.1.0",
@@ -22104,7 +22107,9 @@
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
           "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-          "requires": {}
+          "requires": {
+            "ajv": "^8.0.0"
+          }
         },
         "ajv-keywords": {
           "version": "5.1.0",
@@ -24679,6 +24684,7 @@
         "is-glob": "^4.0.3",
         "normalize-path": "^3.0.0",
         "object-hash": "^2.2.0",
+        "postcss": "^8.4.6",
         "postcss-js": "^4.0.0",
         "postcss-load-config": "^3.1.0",
         "postcss-nested": "5.0.6",
@@ -25207,7 +25213,9 @@
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
           "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-          "requires": {}
+          "requires": {
+            "ajv": "^8.0.0"
+          }
         },
         "ajv-keywords": {
           "version": "5.1.0",
@@ -25287,7 +25295,9 @@
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
           "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-          "requires": {}
+          "requires": {
+            "ajv": "^8.0.0"
+          }
         },
         "ajv-keywords": {
           "version": "5.1.0",
diff --git a/package.json b/package.json
index 46ae0ec6b..78b99af89 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
-    "axios": "^0.26.0",
+    "axios": "^0.26.1",
     "msw": "^0.38.2",
     "mutationobserver-shim": "^0.3.7",
     "react": "^17.0.2",
diff --git a/src/App.js b/src/App.js
index 52e90c02c..c11476bcf 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,21 @@
 import React from 'react';
-
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+import Character from './components/Character'
 const App = () => {
+
+  const [characters,setCharacters] = useState([])
+  useEffect(() => {
+axios.get(`https://swapi.dev/api/people/`)
+.then(res=> {
+  console.log(res.data)
+setCharacters(res.data)
+})
+.catch(err => console.log(err))
+  }, [])
+ 
+
+
   // Try to think through what state you'll need for this app before starting. Then build out
   // the state properties here.
 
@@ -9,8 +24,13 @@ const App = () => {
   // sync up with, if any.
 
   return (
+   
     <div className="App">
+    
       <h1 className="Header">Characters</h1>
+      {characters.map(char => {
+        return <Character name={char.name} />
+      })}
     </div>
   );
 }
diff --git a/src/components/Character.js b/src/components/Character.js
index 4083249c0..f0feb689a 100644
--- a/src/components/Character.js
+++ b/src/components/Character.js
@@ -1 +1,13 @@
 // Write your Character component here
+import React from 'react'
+
+function Character(props) {
+  return (  
+<div>
+  <h2>{props.name}</h2>
+  <button> Click to know more </button>
+</div>
+  )
+}
+
+export default Character
\ No newline at end of file
diff --git a/src/components/Details.js b/src/components/Details.js
new file mode 100644
index 000000000..33a7f7fbf
--- /dev/null
+++ b/src/components/Details.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Details() {
+  return (
+    <div>Details</div>
+  )
+}
+
+export default Details
\ No newline at end of file