diff --git a/README.md b/README.md
index 672f01b..04d071e 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 
 # Basic React Hooks lunch and learn
-## From BERERK [Denver, Colorado's Javascript Pros BERZERK](http://www.BERZERK.io)
+## From BERZERK [Denver, Colorado's Javascript Pros BERZERK](http://www.BERZERK.io)
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
diff --git a/src/App.js b/src/App.js
index 226db53..636d302 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,27 +1,29 @@
-import React, {useState, useEffect} from 'react';
+import React from 'react';
 import useSetTitle from './hooks/setTitle'
+import useCountState from './hooks/countState'
+import useCatApi from './hooks/catApi'
 import logo from './logo.svg';
 import './App.css';
 
 function App() {
-  // Declare a new state variable, which we'll call "count"
-  //
-  //    state  set[State] in camelCase you choose the name
-  //       |      |                   intial value
-  //      \/     \/                  \/
-  const [thing, setThing] = useState(13);
 
-  const title = useSetTitle(thing)
+  const [count, setCount] = useCountState(0);
+
+  const title = useSetTitle(count)
+
+  const {data, loading} = useCatApi(count)
 
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
+        <img src={data ? data[0].url : logo} className="App-logo" alt="logo" />
+
+        <h1>{loading ? 'Loading Cats' : 'This is ameowzing!'}</h1>
         <p>
           Edit <code>src/App.js</code> and save to reload.
         </p>
-        <p>You clicked {thing} times</p>
-        <button onClick={() => setThing(thing + 10)}>
+        <p>You clicked {count} times</p>
+        <button onClick={() => setCount(count + 1)}>
           Click me
         </button>
       </header>
diff --git a/src/hooks/catApi.js b/src/hooks/catApi.js
new file mode 100644
index 0000000..0e5ad03
--- /dev/null
+++ b/src/hooks/catApi.js
@@ -0,0 +1,25 @@
+import {useEffect, useState} from 'react';
+
+// This is using the cat api
+function useCatApi(count) {
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState(null)
+  useEffect(()=>{
+    async function getCats() {
+      setLoading(true)
+      const response = await fetch(
+        'https://api.thecatapi.com/v1/images/search'
+      )
+      const data = await response.json()
+      console.log(data);
+      setData(data)
+      setLoading(false);
+    }
+    getCats()
+//     !IMPORTANT - deps if no defined it will run on every render, if empty it runs on init only, other wise it watches value
+//     \/
+  },[count])
+  return {loading, data};
+}
+
+export default useCatApi
\ No newline at end of file
diff --git a/src/hooks/countState.js b/src/hooks/countState.js
new file mode 100644
index 0000000..79e7095
--- /dev/null
+++ b/src/hooks/countState.js
@@ -0,0 +1,7 @@
+import {useState} from 'react'
+
+function useCountState(initial) {
+  return useState(initial);
+}
+
+export default useCountState;
\ No newline at end of file