diff --git a/src/App.js b/src/App.js
index 4513d4b..aab8129 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,209 +1,67 @@
 import React from "react";
 import "./App.css";
+import Header from './components/Header.js';
+import Footer from './components/Footer.js';
+import ImageSlider from './components/ImageSlider.js';
+import SubHeader from './components/SubHeader.js';
+import TopNav from './components/TopNav.js';
+import ProductDetail from './components/ProductDetail.js';
 
 function App(props) {
+
+  // const productDisplay = props.state.product
+  //   .filter(
+  //     (product) => props.currentCategory === ''
+  //   )
+
+
+const productProps  = props.state.products
+  .filter(
+    (product) => product.category === props.currentCategory? true: false
+  )
+  .map(
+    (product, idx) => <ProductDetail product={product} key = {idx} />
+  )
+
+
+  // const handleCategoryChange = productProps.filter((catgeory) => {
+  //   if(productProps.category === )
+  //
+  // });
+
+
+  console.log(productProps)
     return (
       <div className="App">
         	<div className="wrap">
-	
-			<div className="header">
-	
-			<div className="top-header">
-				<div className="top-header-left">
-					<ul>
-						<li className="active"><a href="#">Home</a></li>
-						<li><a href="#">Specials</a></li>
-						<li><a href="#">Delivery</a></li>
-						<li><a href="#">Contact</a></li>
-					</ul>
-				</div>
-				<div className="top-header-right">
-					<ul>
-						<li><a href="#">CURRENCY:</a></li>
-						<li>
-							<select>
-								<option>Dollar</option>
-								<option>Euro</option>
-								<option>Pound</option>
-							</select>
-						</li>
-					</ul>
-				</div>
-				<div className="clear"> </div>
-			</div>
-			<div className="clear"> </div>
-			<div className="sub-header">
-				<div className="logo">
-					<a href="index.html"><img src="images/logo.png" title="logo" /></a>
-				</div>
-				<div className="sub-header-right">
-					<ul>
-						<li><a href="#">log in</a></li>
-						<li><a href="#">Your account</a></li>
-						<li><a href="#">CART: (EMPTY) <img src="images/cart.png" title="cart" /></a></li>
-					</ul>
-					<input type="text" /><input type="submit"  value="search" />
-				</div>
-				<div className="clear"> </div>
-			</div>
-			<div className="clear"> </div>
-			<div className="top-nav">
-				<ul>
-					<li><a href="carlights.html">car lights</a></li>
-					<li><a href="carwheels.html">Car wheels</a></li>
-					<li><a href="carbumpers.html">car bumpers</a></li>
-					<li><a href="caradsystem.html">car audiosystem</a></li>
-					<li><a href="truckbumpers.html">Truck bumpers</a></li>
-					<li><a href="contact.html">Feedback</a></li>
-					<div className="clear"> </div>
-				</ul>
-			</div>
-		
-			</div>
-			
-		
-					<div className="image-slider">
-				
-					    <ul className="rslides" id="slider1">
-					      <li><img src="images/slider1.jpg" alt="" /></li>
-					      <li><img src="images/slider3.jpg" alt="" /></li>
-					      <li><img src="images/slider1.jpg" alt="" /></li>
-					    </ul>
-					
-					</div>
-				
-				<div className="content">
-					<div className="products-box">
-					<div className="products">
-						<h5><span>FEATURED</span> PRODUCTS</h5>
-						<div className="section group">
-							<div className="grid_1_of_5 images_1_of_5">
-								 <img src="images/g3.png" />
-								 <h3>Lorem Ipsum is simply </h3>
-								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-								 <h4>$512.00</h4>
-							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-						   </div>
-							<div className="grid_1_of_5 images_1_of_5">
-								 <img src="images/g1.jpg" />
-								 <h3>Lorem Ipsum is simply </h3>
-								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-								<h4>$300.00</h4>
-							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-						    </div>
-							<div className="grid_1_of_5 images_1_of_5">
-								<img src="images/g2.jpg" />
-								 <h3>Lorem Ipsum is simply </h3>
-								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-								 <h4>$120.00</h4>
-							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-							</div>
-							<div className="grid_1_of_5 images_1_of_5">
-								 <img src="images/g3.png" />
-								 <h3>Lorem Ipsum is simply </h3>
-								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-								 <h4>$500.00</h4>
-							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-							</div>
-							<div className="grid_1_of_5 images_1_of_5">
-								 <img src="images/g4.jpg" />
-								 <h3>Lorem Ipsum is simply</h3>
-								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-								 <h4>$120.00</h4>
-							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-							</div>
-						</div>
-					</div>
-					<div className="products products-secondbox">
-						<h5><span>Our</span> Specials</h5>
-						<div className="section group">
-							<div className="grid_1_of_5 images_1_of_5">
-								 <img src="images/g1.jpg" />
-								 <h3>Lorem Ipsum is simply </h3>
-								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-								 <h4><span>$600.00</span>$512.00</h4>
-							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-						   </div>
-							<div className="grid_1_of_5 images_1_of_5">
-								 <img src="images/g6.jpg" />
-								 <h3>Lorem Ipsum is simply </h3>
-								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-								 <h4><span>$400.00</span>$352.00</h4>
-							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-						    </div>
-							<div className="grid_1_of_5 images_1_of_5">
-								<img src="images/g7.png" />
-								 <h3>Lorem Ipsum is simply </h3>
-								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-								  <h4><span>$300.00</span>$202.00</h4>
-							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-							</div>
-							<div className="grid_1_of_5 images_1_of_5">
-								 <img src="images/g8.png" />
-								 <h3>Lorem Ipsum is simply </h3>
-								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-								 <h4><span>$400.00</span>$322.00</h4>
-							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-							</div>
-							<div className="grid_1_of_5 images_1_of_5">
-								 <img src="images/g1.jpg" />
-								 <h3>Lorem Ipsum is simply</h3>
-								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-								 <h4><span>$700.00</span>$602.00</h4>
-							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div className="clear"> </div>
-			<div className="footer">
-				<div className="section group">
-				<div className="col_1_of_4 span_1_of_4">
-					<h3>INFORMATION</h3>
-					<ul>
-						<li><a href="#">About us</a></li>
-						<li><a href="#">Sitemap</a></li>
-						<li><a href="#">Contact</a></li>
-						<li><a href="#">Terms and conditions</a></li>
-						<li><a href="#">Legal Notice</a></li>
-					</ul>
-				</div>
-				<div className="col_1_of_4 span_1_of_4">
-					<h3>OUR OFFERS</h3>
-					<ul>
-						<li><a href="#">New products</a></li>
-						<li><a href="#">top sellers</a></li>
-						<li><a href="#">Specials</a></li>
-						<li><a href="#">Products</a></li>
-						<li><a href="#">Comments</a></li>
-					</ul>
-				</div>
-				<div className="col_1_of_4 span_1_of_4">
-					<h3>YOUR ACCOUNT</h3>
-					<ul>
-						<li><a href="#">Your Account</a></li>
-						<li><a href="#">Personal info</a></li>
-						<li><a href="#">Prices</a></li>
-						<li><a href="#">Address</a></li>
-						<li><a href="#">Locations</a></li>
-					</ul>
-				</div>
-				<div className="col_1_of_4 span_1_of_4 footer-lastgrid">
-					<h3>Get in touch</h3>
-					<ul>
-						<li><a href="#"><img src="images/facebook.png" title="facebook" /></a></li>
-						<li><a href="#"><img src="images/twitter.png" title="Twiiter" /></a></li>
-						<li><a href="#"><img src="images/rss.png" title="Rss" /></a></li>
-						<li><a href="#"><img src="images/gpluse.png" title="Google+" /></a></li>
-					</ul>
-					<p>Design by <a href="#">W3layouts</a></p>
-				</div>
-			</div>
-			</div>
-		</div>
-	
-      </div>
+
+  			<div className="header">
+          <Header />
+
+  			<div className="clear"> </div>
+  			   <SubHeader />
+  			<div className="clear"> </div>
+  			   <TopNav changeCategory = {props.changeCategory} />
+
+  			</div>
+          <ImageSlider />
+
+
+
+  				<div className="content">
+  					<div className="products-box">
+  					<div className="products">
+  						<h5><span>FEATURED</span> PRODUCTS</h5>
+  						<div className="section group">
+              {productProps}
+  						</div>
+  					</div>
+  				</div>
+  			</div>
+  			<div className="clear"> </div>
+        <Footer />
+  			</div>
+  		</div>
     );
 }
 
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 0000000..ff6f224
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,52 @@
+import React from 'react';
+
+function Footer(){
+  return (
+    <div className="footer">
+      <div className="section group">
+      <div className="col_1_of_4 span_1_of_4">
+        <h3>INFORMATION</h3>
+        <ul>
+          <li><a href="#">About us</a></li>
+          <li><a href="#">Sitemap</a></li>
+          <li><a href="#">Contact</a></li>
+          <li><a href="#">Terms and conditions</a></li>
+          <li><a href="#">Legal Notice</a></li>
+        </ul>
+      </div>
+      <div className="col_1_of_4 span_1_of_4">
+        <h3>OUR OFFERS</h3>
+        <ul>
+          <li><a href="#">New products</a></li>
+          <li><a href="#">top sellers</a></li>
+          <li><a href="#">Specials</a></li>
+          <li><a href="#">Products</a></li>
+          <li><a href="#">Comments</a></li>
+        </ul>
+      </div>
+      <div className="col_1_of_4 span_1_of_4">
+        <h3>YOUR ACCOUNT</h3>
+        <ul>
+          <li><a href="#">Your Account</a></li>
+          <li><a href="#">Personal info</a></li>
+          <li><a href="#">Prices</a></li>
+          <li><a href="#">Address</a></li>
+          <li><a href="#">Locations</a></li>
+        </ul>
+      </div>
+      <div className="col_1_of_4 span_1_of_4 footer-lastgrid">
+        <h3>Get in touch</h3>
+        <ul>
+          <li><a href="#"><img src="images/facebook.png" title="facebook" /></a></li>
+          <li><a href="#"><img src="images/twitter.png" title="Twiiter" /></a></li>
+          <li><a href="#"><img src="images/rss.png" title="Rss" /></a></li>
+          <li><a href="#"><img src="images/gpluse.png" title="Google+" /></a></li>
+        </ul>
+        <p>Design by <a href="#">W3layouts</a></p>
+      </div>
+    </div>
+    </div>
+  )
+}
+
+export default Footer;
diff --git a/src/components/Header.js b/src/components/Header.js
index f882be0..0222ec6 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,7 +1,31 @@
 import React from "react";
 
 function Header() {
-  return (<div />);
+  return (
+    <div className="top-header">
+      <div className="top-header-left">
+        <ul>
+          <li className="active"><a href="#">Home</a></li>
+          <li><a href="#">Specials</a></li>
+          <li><a href="#">Delivery</a></li>
+          <li><a href="#">Contact</a></li>
+        </ul>
+      </div>
+      <div className="top-header-right">
+        <ul>
+          <li><a href="#">CURRENCY:</a></li>
+          <li>
+            <select>
+              <option>Dollar</option>
+              <option>Euro</option>
+              <option>Pound</option>
+            </select>
+          </li>
+        </ul>
+      </div>
+      <div className="clear"> </div>
+    </div>
+  );
 }
 
 export default Header;
diff --git a/src/components/ImageSlider.js b/src/components/ImageSlider.js
new file mode 100644
index 0000000..290df65
--- /dev/null
+++ b/src/components/ImageSlider.js
@@ -0,0 +1,16 @@
+import React from 'react';
+
+function ImageSlider() {
+  return (
+    <div className="image-slider">
+
+        <ul className="rslides" id="slider1">
+          <li><img src="images/slider1.jpg" alt="" /></li>
+          <li><img src="images/slider3.jpg" alt="" /></li>
+          <li><img src="images/slider1.jpg" alt="" /></li>
+        </ul>
+
+    </div>
+  )
+}
+export default ImageSlider;
diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js
new file mode 100644
index 0000000..59a6827
--- /dev/null
+++ b/src/components/ProductDetail.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function ProductDetail(props) {
+  const {id, name, description, price, imgUrl, category, rating, reviews} = props.product;
+
+    return(
+      <div className="grid_1_of_5 images_1_of_5">
+         <img src={imgUrl} />
+         <h3>{name}</h3>
+         <p>{description}</p>
+         <h4>{price}</h4>
+           <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
+      </div>
+    );
+}
+
+ProductDetail.propTypes = {
+  product: PropTypes.object.isRequired
+}
+
+export default ProductDetail;
diff --git a/src/components/SubHeader.js b/src/components/SubHeader.js
new file mode 100644
index 0000000..b3a6076
--- /dev/null
+++ b/src/components/SubHeader.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+function SubHeader() {
+  return (
+    <div className="sub-header">
+      <div className="logo">
+        <a href="index.html"><img src="images/logo.png" title="logo" /></a>
+      </div>
+      <div className="sub-header-right">
+        <ul>
+          <li><a href="#">log in</a></li>
+          <li><a href="#">Your account</a></li>
+          <li><a href="#">CART: (EMPTY) <img src="images/cart.png" title="cart" /></a></li>
+        </ul>
+        <input type="text" /><input type="submit"  value="search" />
+      </div>
+      <div className="clear"> </div>
+    </div>
+  )
+}
+
+export default SubHeader;
diff --git a/src/components/TopNav.js b/src/components/TopNav.js
new file mode 100644
index 0000000..9ae04ae
--- /dev/null
+++ b/src/components/TopNav.js
@@ -0,0 +1,18 @@
+import React from 'react';
+
+function TopNav(props) {
+  return (
+    <div className="top-nav">
+      <ul>
+        <li><a href="#" onClick={(e)=> {e.preventDefault(); props.changeCategory("headlights")}}>car lights</a></li>
+        <li><a href="#" onClick={(e)=> {e.preventDefault(); props.changeCategory("tires")}}>Car wheels</a></li>
+        <li><a href="#" onClick={(e)=> {e.preventDefault(); props.changeCategory("bumpers")}}>car bumpers</a></li>
+        <li><a href="#" onClick={(e)=> {e.preventDefault(); props.changeCategory("audio")}}>car audiosystem</a></li>
+        <li><a href="#" onClick={(e)=> {e.preventDefault(); props.changeCategory("bumpers")}}>Truck bumpers</a></li>
+        <li><a href="contact.html">Feedback</a></li>
+        <div className="clear"> </div>
+      </ul>
+    </div>
+  )
+}
+export default TopNav;
diff --git a/src/index.js b/src/index.js
index 34d8803..81e95aa 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,11 +4,21 @@ import App from "./App";
 import "./index.css";
 import state from "./state";
 
+let currentCategory = 'tires';
+
+const changeCategory = (category) => {
+  currentCategory = category;
+  render();
+}
+
 function render() {
   ReactDOM.render(
-    <App state={state} />,
+    <App
+      state={state}
+      currentCategory = {currentCategory}
+      changeCategory = {changeCategory}
+  />,
     document.getElementById("root")
   );
 }
 render();
-