diff --git a/src/App.js b/src/App.js
index 4513d4b..ac2d272 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,20 @@
 import React from "react";
 import "./App.css";
+import ProductDetail from './components/ProductDetail';
+import Header from './components/Header';
+import Footer from './components/Footer';
+import ImageSlider from './components/ImageSlider';
+import SubHeader from './components/SubHeader';
+import TopNav from './components/TopNav';
 
 function App(props) {
     return (
       <div className="App">
         	<div className="wrap">
-	
+
 			<div className="header">
-	
-			<div className="top-header">
+
+			{/* <div className="top-header">
 				<div className="top-header-left">
 					<ul>
 						<li className="active"><a href="#">Home</a></li>
@@ -30,9 +36,10 @@ function App(props) {
 					</ul>
 				</div>
 				<div className="clear"> </div>
-			</div>
+			</div> */}
+      <Header />
 			<div className="clear"> </div>
-			<div className="sub-header">
+			{/* <div className="sub-header">
 				<div className="logo">
 					<a href="index.html"><img src="images/logo.png" title="logo" /></a>
 				</div>
@@ -45,9 +52,10 @@ function App(props) {
 					<input type="text" /><input type="submit"  value="search" />
 				</div>
 				<div className="clear"> </div>
-			</div>
+			</div> */}
+      <SubHeader />
 			<div className="clear"> </div>
-			<div className="top-nav">
+			{/* <div className="top-nav">
 				<ul>
 					<li><a href="carlights.html">car lights</a></li>
 					<li><a href="carwheels.html">Car wheels</a></li>
@@ -57,27 +65,30 @@ function App(props) {
 					<li><a href="contact.html">Feedback</a></li>
 					<div className="clear"> </div>
 				</ul>
+			</div> */}
+      <TopNav />
+
 			</div>
-		
-			</div>
-			
-		
-					<div className="image-slider">
-				
+
+
+					{/* <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> */}
+      <ImageSlider />
+
 				<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">
+      <ProductDetail />
+							{/* <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>
@@ -151,13 +162,14 @@ function App(props) {
 								 <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>
 			<div className="clear"> </div>
-			<div className="footer">
+    <Footer />
+			{/* <div className="footer">
 				<div className="section group">
 				<div className="col_1_of_4 span_1_of_4">
 					<h3>INFORMATION</h3>
@@ -200,9 +212,9 @@ function App(props) {
 					<p>Design by <a href="#">W3layouts</a></p>
 				</div>
 			</div>
-			</div>
+			</div> */}
 		</div>
-	
+
       </div>
     );
 }
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 0000000..3128152
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,54 @@
+import React from "react";
+
+function Footer() {
+  return (
+  <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>
+);
+}
+
+export default Footer;
diff --git a/src/components/Header.js b/src/components/Header.js
index f882be0..f168436 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,7 +1,33 @@
 import React from "react";
 
 function Header() {
-  return (<div />);
+  return (
+  <div>
+    <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>
+);
 }
 
 export default Header;
diff --git a/src/components/ImageSlider.js b/src/components/ImageSlider.js
new file mode 100644
index 0000000..98aff75
--- /dev/null
+++ b/src/components/ImageSlider.js
@@ -0,0 +1,19 @@
+import React from "react";
+
+function ImageSlider() {
+  return (
+  <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>
+);
+}
+
+export default ImageSlider;
diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js
new file mode 100644
index 0000000..165382c
--- /dev/null
+++ b/src/components/ProductDetail.js
@@ -0,0 +1,85 @@
+import React from "react";
+
+function ProductDetail() {
+  return (
+  <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>$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 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>
+);
+}
+
+export default ProductDetail;
diff --git a/src/components/SubHeader.js b/src/components/SubHeader.js
new file mode 100644
index 0000000..670ab54
--- /dev/null
+++ b/src/components/SubHeader.js
@@ -0,0 +1,24 @@
+import React from "react";
+
+function SubHeader() {
+  return (
+  <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>
+);
+}
+
+export default SubHeader;
diff --git a/src/components/TopNav.js b/src/components/TopNav.js
new file mode 100644
index 0000000..a2a64dd
--- /dev/null
+++ b/src/components/TopNav.js
@@ -0,0 +1,21 @@
+import React from "react";
+
+function TopNav() {
+  return (
+  <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>
+);
+}
+
+export default TopNav;
diff --git a/src/index.js b/src/index.js
index 34d8803..52cb9c1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,6 +4,13 @@ import App from "./App";
 import "./index.css";
 import state from "./state";
 
+const currentCategory = "tires";
+
+function changeCategory(category){
+  currentCategory = category;
+}
+changeCategory();
+
 function render() {
   ReactDOM.render(
     <App state={state} />,
@@ -11,4 +18,3 @@ function render() {
   );
 }
 render();
-