diff --git a/src/Context.js b/src/Context.js
index cf157cc..7a9ed89 100644
--- a/src/Context.js
+++ b/src/Context.js
@@ -7,7 +7,7 @@ const UserContext = createContext([
     suffix: 1,
     email: "bobbobberson@example.com"
   },
-  (obj) => obj
+  (obj) => obj //the reason putting this is to make typed with typescript easier
 ]);
 
 const LevelFive = () => {
@@ -49,13 +49,15 @@ const LevelTwo = () => (
 );
 
 const ContextComponent = () => {
-  const userState = useState({
-    firstName: "James",
-    lastName: "Jameson",
-    suffix: 1,
-    email: "jamesjameson@example.com"
-  });
+  // const userState = useState({
+  //   firstName: "James",
+  //   lastName: "Jameson",
+  //   suffix: 1,
+  //   email: "jamesjameson@example.com"
+  // });
 
+  const userState = useContext(UserContext);
+  //take with hook
   return (
     <UserContext.Provider value={userState}>
       <h1>first level</h1>
diff --git a/src/Effect.js b/src/Effect.js
index 652ce55..2998e85 100644
--- a/src/Effect.js
+++ b/src/Effect.js
@@ -5,9 +5,19 @@ const EffectComponent = () => {
 
   useEffect(() => {
     const timer = setTimeout(() => setTime(new Date()), 1000);
-    return () => clearTimeout(timer);
+    return () => clearTimeout(timer); //same idea with component didunmount
   });
 
+  async function getPets() {
+    const obj = await fetch("https://pets-v2.dev-apis.com/pets");
+    const json = await obj.json();
+    console.log(json);
+  }
+
+  useEffect(() => {
+    getPets();
+  }, []);
+
   return <h1>useEffect Example: {time.toLocaleTimeString()}</h1>;
 };
 
diff --git a/src/State.js b/src/State.js
index a9f479e..26319f6 100644
--- a/src/State.js
+++ b/src/State.js
@@ -6,7 +6,11 @@ const StateComponent = () => {
   return (
     <h1
       onClick={() => setIsGreen(!isGreen)}
-      style={{ color: isGreen ? "limegreen" : "crimson" }}
+      style={{
+        color: isGreen ? "limegreen" : "crimson",
+        cursor: "pointer",
+        userSelect: "none"
+      }}
     >
       useState Example
     </h1>