diff --git a/package-lock.json b/package-lock.json
index 4d5340b..81f569a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3582,6 +3582,8 @@
     },
     "@testing-library/jest-dom": {
       "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-4.2.4.tgz",
+      "integrity": "sha512-j31Bn0rQo12fhCWOUWy9fl7wtqkp7In/YP2p5ZFyRuiiB9Qs3g+hS4gAmDWONbAHcRmVooNJ5eOHQDCOmUFXHg==",
       "requires": {
         "@babel/runtime": "^7.5.1",
         "chalk": "^2.4.1",
@@ -3606,6 +3608,8 @@
     },
     "@testing-library/react": {
       "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-9.5.0.tgz",
+      "integrity": "sha512-di1b+D0p+rfeboHO5W7gTVeZDIK5+maEgstrZbWZSSvxDyfDRkkyBE1AJR5Psd6doNldluXlCWqXriUfqu/9Qg==",
       "requires": {
         "@babel/runtime": "^7.8.4",
         "@testing-library/dom": "^6.15.0",
@@ -3613,7 +3617,9 @@
       }
     },
     "@testing-library/user-event": {
-      "version": "7.2.1"
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-7.2.1.tgz",
+      "integrity": "sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA=="
     },
     "@types/babel__core": {
       "version": "7.1.9",
@@ -12632,6 +12638,8 @@
     },
     "react": {
       "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz",
+      "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -12838,6 +12846,8 @@
     },
     "react-dom": {
       "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
+      "integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -12903,6 +12913,8 @@
     },
     "react-scripts": {
       "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.3.tgz",
+      "integrity": "sha512-oSnoWmii/iKdeQiwaO6map1lUaZLmG0xIUyb/HwCVFLT7gNbj8JZ9RmpvMCZ4fB98ZUMRfNmp/ft8uy/xD1RLA==",
       "requires": {
         "@babel/core": "7.9.0",
         "@svgr/webpack": "4.3.3",
diff --git a/src/App.js b/src/App.js
index efafdbd..b49a8ec 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,8 +1,3 @@
-/**
-
-  Code in this file is taken directly from https://reactrouter.com/web/example/basic
- */
-
 import React from "react";
 import {
   BrowserRouter as Router,
@@ -10,7 +5,8 @@ import {
   Route,
   Link
 } from "react-router-dom";
-
+import Products from './Products'
+import Logos from './Logos'
 // This site has 3 pages, all of which are rendered
 // dynamically in the browser (not server rendered).
 //
@@ -19,7 +15,6 @@ import {
 // through the site. This preserves the browser history,
 // making sure things like the back button and bookmarks
 // work properly.
-
 export default function BasicExample() {
   return (
     <Router>
@@ -29,15 +24,13 @@ export default function BasicExample() {
             <Link to="/">Home</Link>
           </li>
           <li>
-            <Link to="/about">About</Link>
+            <Link to="/products">Products</Link>
           </li>
           <li>
-            <Link to="/dashboard">Dashboard</Link>
+            <Link to="/logos">Logos</Link>
           </li>
         </ul>
-
         <hr />
-
         {/*
           A <Switch> looks through all its children <Route>
           elements and renders the first one whose path
@@ -49,41 +42,23 @@ export default function BasicExample() {
           <Route exact path="/">
             <Home />
           </Route>
-          <Route path="/about">
-            <About />
+          <Route path="/products">
+            <Products />
           </Route>
-          <Route path="/dashboard">
-            <Dashboard />
+          <Route path="/logos">
+            <Logos />
           </Route>
         </Switch>
       </div>
     </Router>
   );
 }
-
 // You can think of these components as "pages"
 // in your app.
-
 function Home() {
   return (
     <div>
       <h2>Home</h2>
     </div>
   );
-}
-
-function About() {
-  return (
-    <div>
-      <h2>About</h2>
-    </div>
-  );
-}
-
-function Dashboard() {
-  return (
-    <div>
-      <h2>Dashboard</h2>
-    </div>
-  );
 }
\ No newline at end of file
diff --git a/src/Logos.js b/src/Logos.js
new file mode 100644
index 0000000..958527f
--- /dev/null
+++ b/src/Logos.js
@@ -0,0 +1,34 @@
+import React from "react";
+class Logo extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      response: [],
+    };
+  }
+  componentDidMount() {
+    this.callApi()
+      .then((response) => {
+        this.setState({ response });
+      })
+      .catch((err) => console.log(err));
+  }
+  callApi = async () => {
+    const response = await fetch("http://localhost:3001/logo");
+    const body = await response.json();
+    if (response.status !== 200) throw Error(body.message);
+    return body;
+  };
+  render() {
+    let logo = this.state.response
+    return (
+      <div>
+          {logo.map((logo) =>
+            <p key={logo._id}>{logo.title}</p>
+          )}
+      </div>
+    );
+    //test comment
+  }
+}
+export default Logo;
\ No newline at end of file
diff --git a/src/Products.js b/src/Products.js
new file mode 100644
index 0000000..711162a
--- /dev/null
+++ b/src/Products.js
@@ -0,0 +1,33 @@
+import React from "react";
+class Products extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      response: [],
+    };
+  }
+  componentDidMount() {
+    this.callApi()
+      .then((response) => {
+        this.setState({ response });
+      })
+      .catch((err) => console.log(err));
+  }
+  callApi = async () => {
+    const response = await fetch("http://localhost:3001/products");
+    const body = await response.json();
+    if (response.status !== 200) throw Error(body.message);
+    return body;
+  };
+  render() {
+    let products = this.state.response
+    return (
+      <div>
+          {products.map((product) =>
+            <p key={product._id}>{product.title}</p>
+          )}
+      </div>
+    );
+  }
+}
+export default Products;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index f5185c1..013f4a6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -15,3 +15,6 @@ ReactDOM.render(
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
 serviceWorker.unregister();
+
+//comment
+