diff --git a/package.json b/package.json
index 38a96cb..260c902 100644
--- a/package.json
+++ b/package.json
@@ -1,4 +1,3 @@
-
 {
   "name": "advanced-homework-1",
   "version": "0.1.0",
@@ -13,6 +12,7 @@
   "dependencies": {
     "foreman": "^2.0.0",
     "json-server": "^0.9.6",
+    "lodash": "^4.17.5",
     "react": "^15.5.4",
     "react-dom": "^15.5.4"
   },
@@ -25,4 +25,4 @@
     "test": "npm run lint && react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
\ No newline at end of file
+}
diff --git a/src/App.js b/src/App.js
index 4139cab..b4689cb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,23 +1,20 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import Header from "./components/Header.js";
+import ProductDetail from "./components/ProductDetail.js";
+import Footer from "./components/Footer.js";
+import Carousel from "./components/Carousel.js";
 
-function App() {
+function App(props) {
+    console.log(props.products);
     return (
       <div className="App">
      
     <nav className="navbar navbar-inverse navbar-fixed-top" role="navigation">
         <div className="container">
           
-            <div className="navbar-header">
-                <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-                    <span className="sr-only">Toggle navigation</span>
-                    <span className="icon-bar"></span>
-                    <span className="icon-bar"></span>
-                    <span className="icon-bar"></span>
-                </button>
-                <a className="navbar-brand" href="#">Start Bootstrap</a>
-            </div>
+           <Header />
           
             <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                 <ul className="nav navbar-nav">
@@ -53,148 +50,18 @@ function App() {
 
             <div className="col-md-9">
 
-                <div className="row carousel-holder">
-
-                    <div className="col-md-12">
-                        <div id="carousel-example-generic" className="carousel slide" data-ride="carousel">
-                            <ol className="carousel-indicators">
-                                <li data-target="#carousel-example-generic" data-slide-to="0" className="active"></li>
-                                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
-                                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
-                            </ol>
-                            <div className="carousel-inner">
-                                <div className="item active">
-                                    <img className="slide-image" src="http://placehold.it/800x300" alt=""/>
-                                </div>
-                                <div className="item">
-                                    <img className="slide-image" src="http://placehold.it/800x300" alt=""/>
-                                </div>
-                                <div className="item">
-                                    <img className="slide-image" src="http://placehold.it/800x300" alt=""/>
-                                </div>
-                            </div>
-                            <a className="left carousel-control" href="#carousel-example-generic" data-slide="prev">
-                                <span className="glyphicon glyphicon-chevron-left"></span>
-                            </a>
-                            <a className="right carousel-control" href="#carousel-example-generic" data-slide="next">
-                                <span className="glyphicon glyphicon-chevron-right"></span>
-                            </a>
-                        </div>
-                    </div>
-
-                </div>
+                <Carousel />
 
                 <div className="row">
+{
+    props.products.map((p, index) =>
+        <ProductDetail
+            product={p}
+            key={index}
+        />
+    )
+}
 
-                    <div className="col-sm-4 col-lg-4 col-md-4">
-                        <div className="thumbnail">
-                            <img src="http://placehold.it/320x150" alt=""/>
-                            <div className="caption">
-                                <h4 className="pull-right">$24.99</h4>
-                                <h4><a href="#">First Product</a>
-                                </h4>
-                                <p>See more snippets like this online store item at <a target="_blank" href="http://www.bootsnipp.com">Bootsnipp - http://bootsnipp.com</a>.</p>
-                            </div>
-                            <div className="ratings">
-                                <p className="pull-right">15 reviews</p>
-                                <p>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className="col-sm-4 col-lg-4 col-md-4">
-                        <div className="thumbnail">
-                            <img src="http://placehold.it/320x150" alt=""/>
-                            <div className="caption">
-                                <h4 className="pull-right">$64.99</h4>
-                                <h4><a href="#">Second Product</a>
-                                </h4>
-                                <p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-                            </div>
-                            <div className="ratings">
-                                <p className="pull-right">12 reviews</p>
-                                <p>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star-empty"></span>
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className="col-sm-4 col-lg-4 col-md-4">
-                        <div className="thumbnail">
-                            <img src="http://placehold.it/320x150" alt=""/>
-                            <div className="caption">
-                                <h4 className="pull-right">$74.99</h4>
-                                <h4><a href="#">Third Product</a>
-                                </h4>
-                                <p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-                            </div>
-                            <div className="ratings">
-                                <p className="pull-right">31 reviews</p>
-                                <p>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star-empty"></span>
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className="col-sm-4 col-lg-4 col-md-4">
-                        <div className="thumbnail">
-                            <img src="http://placehold.it/320x150" alt=""/>
-                            <div className="caption">
-                                <h4 className="pull-right">$84.99</h4>
-                                <h4><a href="#">Fourth Product</a>
-                                </h4>
-                                <p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-                            </div>
-                            <div className="ratings">
-                                <p className="pull-right">6 reviews</p>
-                                <p>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star-empty"></span>
-                                    <span className="glyphicon glyphicon-star-empty"></span>
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className="col-sm-4 col-lg-4 col-md-4">
-                        <div className="thumbnail">
-                            <img src="http://placehold.it/320x150" alt=""/>
-                            <div className="caption">
-                                <h4 className="pull-right">$94.99</h4>
-                                <h4><a href="#">Fifth Product</a>
-                                </h4>
-                                <p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-                            </div>
-                            <div className="ratings">
-                                <p className="pull-right">18 reviews</p>
-                                <p>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star-empty"></span>
-                                </p>
-                            </div>
-                        </div>
-                    </div>
 
                     <div className="col-sm-4 col-lg-4 col-md-4">
                         <h4><a href="#">Like this template?</a>
@@ -211,20 +78,7 @@ function App() {
 
     </div>
    
-    <div className="container">
-
-        <hr/>
-
-      
-        <footer>
-            <div className="row">
-                <div className="col-lg-12">
-                    <p>Copyright &copy; Your Website 2014</p>
-                </div>
-            </div>
-        </footer>
-
-    </div>
+    <Footer />
       </div>
     );
 }
diff --git a/src/components/Carousel.js b/src/components/Carousel.js
new file mode 100644
index 0000000..85d8ca6
--- /dev/null
+++ b/src/components/Carousel.js
@@ -0,0 +1,38 @@
+import React from "react";
+
+function Carousel(props){
+    return(
+        <div className="row carousel-holder">
+        
+                            <div className="col-md-12">
+                                <div id="carousel-example-generic" className="carousel slide" data-ride="carousel">
+                                    <ol className="carousel-indicators">
+                                        <li data-target="#carousel-example-generic" data-slide-to="0" className="active"></li>
+                                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
+                                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
+                                    </ol>
+                                    <div className="carousel-inner">
+                                        <div className="item active">
+                                            <img className="slide-image" src="http://placehold.it/800x300" alt=""/>
+                                        </div>
+                                        <div className="item">
+                                            <img className="slide-image" src="http://placehold.it/800x300" alt=""/>
+                                        </div>
+                                        <div className="item">
+                                            <img className="slide-image" src="http://placehold.it/800x300" alt=""/>
+                                        </div>
+                                    </div>
+                                    <a className="left carousel-control" href="#carousel-example-generic" data-slide="prev">
+                                        <span className="glyphicon glyphicon-chevron-left"></span>
+                                    </a>
+                                    <a className="right carousel-control" href="#carousel-example-generic" data-slide="next">
+                                        <span className="glyphicon glyphicon-chevron-right"></span>
+                                    </a>
+                                </div>
+                            </div>
+        
+                        </div>
+    )
+}
+
+export default Carousel;
\ No newline at end of file
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 0000000..14d4f4e
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,22 @@
+import React from "react";
+
+function Footer(props){
+    return (
+        <div className="container">
+        
+                <hr/>
+        
+              
+                <footer>
+                    <div className="row">
+                        <div className="col-lg-12">
+                            <p>Copyright &copy; Your Website 2014</p>
+                        </div>
+                    </div>
+                </footer>
+        
+            </div>
+    )
+}
+
+export default Footer;
\ No newline at end of file
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 0000000..a715b48
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,17 @@
+import React from "react";
+
+function Header(props) {
+    return (
+        <div className="navbar-header">
+        <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+            <span className="sr-only">Toggle navigation</span>
+            <span className="icon-bar"></span>
+            <span className="icon-bar"></span>
+            <span className="icon-bar"></span>
+        </button>
+        <a className="navbar-brand" href="#">Start Bootstrap</a>
+    </div>
+    )
+};
+
+export default Header;
\ No newline at end of file
diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js
new file mode 100644
index 0000000..2e01c5d
--- /dev/null
+++ b/src/components/ProductDetail.js
@@ -0,0 +1,34 @@
+import React from "react";
+import { times } from "lodash";
+
+function ProductDetail(props){ 
+
+let ratings = [];
+
+for (let i = 0; i < props.product.rating-1; i++){
+    ratings.push(<span className="glyphicon glyphicon-star"></span>)    
+}
+
+console.log(props.product);
+    return (
+        <div className="col-sm-4 col-lg-4 col-md-4">
+        <div className="thumbnail">
+            <img src="http://placehold.it/320x150" alt=""/>
+            <div className="caption">
+                <h4 className="pull-right">{props.product.price}</h4>
+                <h4><a href="#">{props.product.name}</a>
+                </h4>
+                <p>{props.product.description}</p>
+            </div>
+            <div className="ratings">
+                <p className="pull-right">{props.product.reviews}</p>
+                <p>
+                    <span className="glyphicon glyphicon-star">{ratings}</span>
+                </p>
+            </div>
+        </div>
+    </div>
+    )
+}
+
+export default ProductDetail;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index e58303d..6dddfc4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,7 +4,7 @@ import App from './App';
 import './index.css';
 import state from './state';
 
-ReactDOM.render(
-  <App />,
+ReactDOM.render( 
+  <App products={state.products}/>,
   document.getElementById('root')
 );
diff --git a/yarn.lock b/yarn.lock
index b9e4fc3..e38cf1d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3584,6 +3584,10 @@ lodash@4, "lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.11.2, lodash@^4.14.0, loda
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
+lodash@^4.17.5:
+  version "4.17.5"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
+
 longest@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"