diff --git a/src/App.js b/src/App.js
index 5935ef8..244e14a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,21 +1,21 @@
-import Header from './components/header/header'
-import Hero from './components/hero/hero'
-import MainSection from './components/main-section/main-section'
-import FeaturedCollection from './components/featured-collection/featured-collection'
-import Footer from './components/footer/footer'
+import { Switch, Route } from 'react-router-dom'
 
-import './App.scss';
+import HomePage from './components/home-page'
+import NotFound from './components/not-found'
+import Shop from './components/pages/shop/shop'
+
+import './App.scss'
 
 function App() {
   return (
     <div className="App">
-      <Header />
-      <Hero />
-      <MainSection />
-      <FeaturedCollection />
-      <Footer />
+      <Switch>
+        <Route exact path='/' component={HomePage} />
+        <Route path='/shop' component={Shop} />
+        <Route path='*' component={NotFound} />
+      </Switch>
     </div>
-  );
+  )
 }
 
 export default App;
diff --git a/src/components/home-page.jsx b/src/components/home-page.jsx
new file mode 100644
index 0000000..f4e067a
--- /dev/null
+++ b/src/components/home-page.jsx
@@ -0,0 +1,18 @@
+import Layout from './shared/layout';
+import Hero from './hero/hero';
+import MainSection from './main-section/main-section';
+import FeaturedCollection from './featured-collection/featured-collection';
+
+const HomePage = () => {
+  return (
+    <>
+      <Layout>
+        <Hero />
+        <MainSection />
+        <FeaturedCollection />
+      </Layout>
+    </>
+  );
+}
+
+export default HomePage;
\ No newline at end of file
diff --git a/src/components/not-found.jsx b/src/components/not-found.jsx
new file mode 100644
index 0000000..4f3cd7d
--- /dev/null
+++ b/src/components/not-found.jsx
@@ -0,0 +1,16 @@
+import Layout from './shared/layout';
+
+const NotFound = () => {
+  const style = {
+    fontWeight: 'bold',
+    textAlign: 'center',
+  }
+
+  return (
+    <Layout>
+      <p style={style}>Unfortunately we can't find that page</p>
+    </Layout>
+  );
+}
+
+export default NotFound;
\ No newline at end of file
diff --git a/src/components/pages/shop/shop.jsx b/src/components/pages/shop/shop.jsx
new file mode 100644
index 0000000..ef61f25
--- /dev/null
+++ b/src/components/pages/shop/shop.jsx
@@ -0,0 +1,29 @@
+import { useContext } from 'react'
+import Layout from '../../shared/layout';
+import FeaturedProduct from '../../shared/featured-product';
+import { ProductsContext } from '../../../context/products-context';
+
+import './shop.styles.scss';
+
+const Shop = () => {
+  const { products } = useContext(ProductsContext);
+  
+  const allProducts = products.map(product => (
+    <FeaturedProduct { ...product } key={product.id} />
+  ));
+
+  return (
+    <Layout>
+      <div className='product-list-container'>
+        <h2 className='product-list-title'>Shop</h2>
+        <div className='product-list'>
+          {
+            allProducts
+          }
+        </div>
+      </div>
+    </Layout>
+  );
+}
+
+export default Shop;
\ No newline at end of file
diff --git a/src/components/pages/shop/shop.styles.scss b/src/components/pages/shop/shop.styles.scss
new file mode 100644
index 0000000..a9ffca5
--- /dev/null
+++ b/src/components/pages/shop/shop.styles.scss
@@ -0,0 +1,29 @@
+.product-list-container {
+  margin: 3rem 0;
+  .product-list-title {
+    margin-top: 5rem;
+    text-align: center;
+  }
+
+  .product-list {
+    div {
+      margin: 1rem;
+      cursor: pointer;
+    }
+  }
+}
+
+@media(min-width: 800px) {
+  .product-list-container {
+    .product-list {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      align-items: center;
+      margin: 0 5rem;
+      div {
+        flex: 0 0 190px;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/shared/layout.jsx b/src/components/shared/layout.jsx
new file mode 100644
index 0000000..aebf6b5
--- /dev/null
+++ b/src/components/shared/layout.jsx
@@ -0,0 +1,18 @@
+import Header from '../header/header';
+import Footer from '../footer/footer';
+
+const Layout = ({ children }) => {
+  return (
+    <>
+      <Header />
+        <main>
+          {
+            children
+          }
+        </main>
+      <Footer />
+    </>
+  );
+}
+
+export default Layout;
\ No newline at end of file