diff --git a/src/App.js b/src/App.js
index 37845757234ccb68531c10cf7a2ffc589c47e342..22d06b7f7e2e44341a944dbcafb609b643874495 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,22 +1,44 @@
+import React, { useEffect, useState } from "react";
+import ReactDOM from "react-dom";
+
 import logo from './logo.svg';
 import './App.css';
 
 function App() {
+  const [users, setUsers] = useState();
+
+  // Function to collect data
+  const getApiData = async () => {
+    const response = await fetch(
+      "/api/users"
+    ).then((response) => response.json());
+
+    setUsers(response);
+  };
+
+  useEffect(() => {
+    getApiData();
+  }, []);
+
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
         <a
           className="App-link"
-          href="https://reactjs.org"
+          href="/"
           target="_blank"
           rel="noopener noreferrer"
         >
-          Learn React
+          <img src={logo} className="App-logo" alt="logo" />
         </a>
+        <p>
+          {users &&
+          users.map((user) => (
+            <div className="item-container">
+              Id:{user.id} <div className="title">Title:{user.title}</div>
+            </div>
+          ))}
+        </p>
       </header>
     </div>
   );