Answer

src/App.css

@@ -14,7 +14,7 @@
 }
 
 .App-header {
-  background-color: #282c34;
+  background-color: pink;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
@@ -36,3 +36,20 @@
     transform: rotate(360deg);
   }
 }
+
+.App {
+  .Logos {background-color: #4CAF50;} /* Green */
+.Logos:hover {background-color: #46a049;}
+
+  .Products {background-color: #2196F3;} /* Blue */
+.Products:hover {background: #0b7dda;}
+
+ .Stores {background-color: #ff9800;} /* Orange */
+.Stores:hover {background: #e68a00;}
+
+  .NewArrival {background-color: #f44336;} /* Red */ 
+.NewArrival:hover {background: #da190b;}
+
+  .Home {background-color: #e7e7e7; color: black;} /* Gray */ 
+.Home:hover {background: #ddd;}
+}

src/App.js

@@ -8,6 +8,8 @@ import {
 
 import Products from './Products'
 import Logos from './Logos'
+import Stores from './Stores'
+import NewArrival from './NewArrival'
 
 // This site has 3 pages, all of which are rendered
 // dynamically in the browser (not server rendered).
@@ -24,13 +26,20 @@ export default function BasicExample() {
       <div>
         <ul>
           <li>
-            <Link to="/">Home</Link>
+            <Link to="/"><button class="btn Home">Home</button></Link>
           </li>
           <li>
-            <Link to="/products">Products</Link>
+            <Link to="/products"><button class="btn Products">products</button></Link>
           </li>
           <li>
-            <Link to="/logos">Logos</Link>
+            <Link to="/logos"><button class="btn Logos">Logos</button></Link>
+          </li>
+          <li>
+            <Link to="/Stores"><button class="btn Stores">Stores</button></Link>
+          </li>
+          <li>
+
+            <Link to="/NewArrival"><button class="btn New Arrival"> New Arrival</button></Link>
           </li>
         </ul>
 
@@ -53,6 +62,12 @@ export default function BasicExample() {
           <Route path="/logos">
             <Logos />
           </Route>
+          <Route path="/Stores">
+            <Stores />
+          </Route>
+          <Route path="/NewArrival">
+            <NewArrival />
+          </Route>
         </Switch>
       </div>
     </Router>

src/Logos.js

@@ -1,8 +1,38 @@
 import React from 'react'
 
 
-export default () => {
-    return (
-        <div>Logos Place holder</div>
-    )
-}
+class Logos extends React.Component {
+    constructor () {
+        super()
+        this.state = {
+            response: []
+        }
+    }
+
+    componentDidMount() {
+        this.callApi()
+        .then((response) => { 
+            this.setState({ response: response.length + ' items found' }) 
+        } )
+        .catch(err => console.log(err));
+    }
+
+    callApi = async () => {
+        const response = await fetch('http://localhost:3001/logos');
+        const body = await response.json();
+        if (response.status !== 200) throw Error(body.message);
+
+        return body;
+    };
+
+    render ()  {
+        return (
+            <div>
+                <div>Logos Place holder</div>
+                <div>{this.state.response}</div>
+            </div>
+        )
+    }
+}
+
+export default Logos

src/NewArrival.js

@@ -0,0 +1,38 @@
+import React from 'react'
+
+
+class NewArrival extends React.Component {
+    constructor () {
+        super()
+        this.state = {
+            response: []
+        }
+    }
+
+    componentDidMount() {
+        this.callApi()
+        .then((response) => { 
+            this.setState({ response: response.length + ' items found' }) 
+        } )
+        .catch(err => console.log(err));
+    }
+
+    callApi = async () => {
+        const response = await fetch('http://localhost:3001/NewArrival');
+        const body = await response.json();
+        if (response.status !== 200) throw Error(body.message);
+
+        return body;
+    };
+
+    render ()  {
+        return (
+            <div>
+                <div>New arrival Place holder</div>
+                <div>{this.state.response}</div>
+            </div>
+        )
+    }
+}
+
+export default NewArrival

src/Products.js

@@ -4,13 +4,15 @@ class Products extends React.Component {
     constructor () {
         super()
         this.state = {
-            results: []
+            response: []
         }
     }
 
     componentDidMount() {
         this.callApi()
-        .then(res => this.setState({ response: res.express }))
+        .then((response) => { 
+            this.setState({ response: response.length + ' items found' }) 
+        } )
         .catch(err => console.log(err));
     }
 

src/Stores.js

@@ -0,0 +1,37 @@
+import React from 'react'
+
+class Stores extends React.Component {
+    constructor () {
+        super()
+        this.state = {
+            response: []
+        }
+    }
+
+    componentDidMount() {
+        this.callApi()
+        .then((response) => { 
+            this.setState({ response: response.length + ' items found' }) 
+        } )
+        .catch(err => console.log(err));
+    }
+
+    callApi = async () => {
+        const response = await fetch('http://localhost:3001/Stores');
+        const body = await response.json();
+        if (response.status !== 200) throw Error(body.message);
+
+        return body;
+    };
+
+    render ()  {
+        return (
+            <div>
+                <div>Stores Place holder</div>
+                <div>{this.state.response}</div>
+            </div>
+        )
+    }
+}
+
+export default Stores

src/index.css

@@ -11,3 +11,4 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+