diff --git a/src/App.js b/src/App.js
index 3017066..dbb854a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,19 +1,36 @@
-import React from "react";
-import Greet from "./Greet";
-const App = () => {
+import React, { useState, createContext } from "react";
+import "./App.css";
+
+const info = {
+  name: "John",
+  age: 20,
+  gender: "male"
+};
+
+const ThemeContext = createContext(info);
+
+const Person = () => {
+  const info = React.useContext(ThemeContext);
+  console.log(info);
   return (
     <div>
-      <Greet name="Sam" age="20" gender="male">
-        <p>This is a para</p>
-      </Greet>
-      <Greet name="Luna" age="15" gender="female">
-        <button>Click me</button>
-      </Greet>
-      <Greet name="John" age="18" gender="male" />
-      <Greet name="Amy" age="20" gender="female" />
-      <Greet name="xyz" age="25" gender="male" />
+      <p>
+        {info.name}, {info.age}, {info.gender}
+      </p>
     </div>
   );
 };
 
+const Family = () => {
+  return <Person />;
+};
+
+const App = () => {
+  return (
+    <ThemeContext.Provider value={info}>
+      <Family />
+    </ThemeContext.Provider>
+  );
+};
+
 export default App;
diff --git a/src/Greet.js b/src/Greet.js
deleted file mode 100644
index bf19bd8..0000000
--- a/src/Greet.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import "./App.css";
-
-const Greet = (props) => {
-  const { name, age, gender } = props;
-  console.log(props);
-  return (
-    <>
-      <h1 className="container">Hello {name}</h1>
-      <p>My age is {age}</p>
-      <p>My gender is {gender}</p>
-      {props.children}
-    </>
-  );
-};
-export default Greet;