diff --git a/advanced-react-address-book b/advanced-react-address-book
deleted file mode 160000
index 3edcdb1..0000000
--- a/advanced-react-address-book
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit 3edcdb1fc5800dd364201c5030c13f2fcf7287f7
diff --git a/src/App.js b/src/App.js
index 4139cab..286dccb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,8 +1,14 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import ProductDetail from './components/ProductDetail.js';
+
+function App(props) {
+    var productdisplay=[];
+    for (var i = 0; i < props.products.length; i++) {
+        productdisplay.push(<ProductDetail product={props.products[i]}></ProductDetail>);
+       }
 
-function App() {
     return (
       <div className="App">
      
@@ -86,122 +92,7 @@ function App() {
 
                 <div className="row">
 
-                    <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>
-                        </h4>
-                        <p>If you like this template, then check out <a target="_blank" href="http://maxoffsky.com/code-blog/laravel-shop-tutorial-1-building-a-review-system/">this tutorial</a> on how to build a working review system for your online store!</p>
-                        <a className="btn btn-primary" target="_blank" href="http://maxoffsky.com/code-blog/laravel-shop-tutorial-1-building-a-review-system/">View Tutorial</a>
-                    </div>
+               {productdisplay}
 
                 </div>
 
diff --git a/src/App.test.js b/src/App.test.js
index b84af98..7c83683 100644
--- a/src/App.test.js
+++ b/src/App.test.js
@@ -6,3 +6,4 @@ it('renders without crashing', () => {
   const div = document.createElement('div');
   ReactDOM.render(<App />, div);
 });
+
diff --git a/src/components/Carousel.js b/src/components/Carousel.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js
new file mode 100644
index 0000000..a0db31e
--- /dev/null
+++ b/src/components/ProductDetail.js
@@ -0,0 +1,36 @@
+import React from "react"
+
+function rating(input) {
+    var n = parseInt(input)
+    var rating = [];
+    for (var i = 0; i < n; i++) {
+     rating.push(<span className="glyphicon glyphicon-star"></span>);
+    }
+    return rating;
+}                    
+
+function ProductDetail(props) {
+    return (<div className="col-sm-4 col-lg-4 col-md-4">
+    <div className="thumbnail">
+        <img src={props.product.imgUrl} alt=""/>
+        <div className="caption">
+            <h4 className="pull-right">{props.product.price}</h4>
+            <h4><a href="#">{props.product.name}</a>
+            </h4>
+            <p>{props.product.description} <a target="_blank" href="http://www.bootsnipp.com">Bootsnipp - http://bootsnipp.com</a>.</p>
+        </div>
+        <div className="ratings">
+            <p className="pull-right">{props.product.reviews}</p>
+            <p>
+
+            {props.product.rating};
+
+            </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..75a9c11 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,6 +5,6 @@ import './index.css';
 import state from './state';
 
 ReactDOM.render(
-  <App />,
+  <App state={state} products={state.products}/>,
   document.getElementById('root')
 );