diff --git a/package-lock.json b/package-lock.json
index 44cde1123..b0128443d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,10 +1,11 @@
 {
-  "name": "web-sprint-challenge-intro-to-react",
+  "name": "fsweb-s6-challenge-intro-to-react",
   "version": "0.1.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
+      "name": "fsweb-s6-challenge-intro-to-react",
       "version": "0.1.1",
       "dependencies": {
         "@testing-library/jest-dom": "^5.16.2",
@@ -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/src/App.js b/src/App.js
index 04dc89af4..155b5a3df 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,7 @@
-import React from 'react';
+import React, { useState , useEffect} from 'react';
+import axios from 'axios';
+import Section from './Section';
+import Arama from './Arama';
 
 const App = () => {
   // Try to think through what state you'll need for this app before starting. Then build out
@@ -7,10 +10,48 @@ const App = () => {
   // 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.
+  const [data, setData] = useState([]);
+  const [arama, setArama] = useState("");
+  const [icerik, setİcerik] = useState("");
+
+  useEffect(() => {
+    axios.get('https://swapi.dev/api/people/')
+    .then((response) => {
+      setData(response.data);
+    })
+    .catch(function (error) {
+      console.log(error);
+    })
+  },[]);
+  function handleClick(name) {
+    setİcerik(name=== icerik ? null : name);
+  }
 
   return (
     <div className="App">
-      <h1 className="Header">Karakterler</h1>
+      <h1 className="Header">Star Wars Karakter Listesi</h1>
+      {<Arama setArama={setArama} arama={arama}/>}
+      {data 
+      .filter((person) => {
+        if(arama === "") {
+          return person;
+        }
+        else if (
+          person.name.toLowerCase().includes(arama.toLocaleLowerCase())
+        ){
+        return person;
+      }
+    })
+      .map((person) => {
+        return (
+          <Section
+          key={person.name}
+          data={person}
+          handleClick={handleClick}
+          icerik={icerik}
+          setİcerik={setİcerik}/>
+        );
+      })}
     </div>
   );
 }