diff --git a/CD220Labs/react-apps/src/App.js b/CD220Labs/react-apps/src/App.js
index c107a2439..a7140daee 100644
--- a/CD220Labs/react-apps/src/App.js
+++ b/CD220Labs/react-apps/src/App.js
@@ -1,9 +1,44 @@
-function App() {
-  return (
-    <div>
-      Hello World!
+import React from 'react';
+import axios from 'axios';
+
+class App extends React.Component {
+  state = { APIlist:[] }
+
+  componentDidMount() {
+    let url = "https://api.publicapis.org/entries?category=Animals";
+    axios({
+      method: 'get',
+      url: url,
+      responseType: 'json'
+    }).then(resp => {
+        let listOfEntries = resp.data.entries;
+        let listOfEntriesAsArray = Object.entries(listOfEntries);
+        let entryDetails = listOfEntriesAsArray.map((entryDetail)=>{
+          return <li style={{color: "green"}}>{entryDetail[1]["API"]}
+          ------- {entryDetail[1]["Link"]} </li>
+        })
+        this.setState({APIlist:<ul>{entryDetails}</ul>})
+      })
+    .catch(err => {
+        console.log(err.toString())
+    });
+  }
+
+  render() {
+    const colorStyle = { color:this.props.color,fontSize:this.props.size+"px"}
+    return (
+      <div style={colorStyle}>
+        <h2>APIs List</h2>
+        <br/>
+
+        <div>
+            {
+            this.state.APIlist
+            }
+        </div>
     </div>
-  );
+    );
+  }
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/CD220Labs/react-apps/src/index.js b/CD220Labs/react-apps/src/index.js
index 7173ce536..14c824c34 100644
--- a/CD220Labs/react-apps/src/index.js
+++ b/CD220Labs/react-apps/src/index.js
@@ -4,7 +4,7 @@ import App from './App';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <App color="green" size="20"/>
   </React.StrictMode>,
   document.getElementById('root')
 );
\ No newline at end of file