diff --git a/src/App.js b/src/App.js
index 4139cab..40c2408 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,24 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
-
-function App() {
+import Header from './component/Header'; 
+import ProductDetail from './component/ProductDetail'; 
+import Carousel from './component/Carousel';
+import Footer from './component/Footer';
+
+function App(props) {
+    var productDivs = [];
+    productDivs = props.products.map((p)=> {
+        return <ProductDetail product={p} />;
+    });   
+console.log("LoggingProductDivs", productDivs);
     return (
       <div className="App">
      
     <nav className="navbar navbar-inverse navbar-fixed-top" role="navigation">
         <div className="container">
-          
+        <Header/> 
+        {/*           
             <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>
@@ -18,7 +28,8 @@ function App() {
                 </button>
                 <a className="navbar-brand" href="#">Start Bootstrap</a>
             </div>
-          
+            </div>
+           */}
             <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                 <ul className="nav navbar-nav">
                     <li>
@@ -43,16 +54,17 @@ function App() {
         <div className="row">
 
             <div className="col-md-3">
-                <p className="lead">Shop Name</p>
+                <p className="lead">SpacePandaArtShop</p>
                 <div className="list-group">
                     <a href="#" className="list-group-item">Category 1</a>
-                    <a href="#" className="list-group-item">Category 2</a>
-                    <a href="#" className="list-group-item">Category 3</a>
+                    <a href="#" className="list-group-item">Music</a>
+                    <a href="#" className="list-group-item">Art For Sale</a>
                 </div>
             </div>
 
             <div className="col-md-9">
-
+                <Carousel />
+{/* 
                 <div className="row carousel-holder">
 
                     <div className="col-md-12">
@@ -83,9 +95,12 @@ function App() {
                     </div>
 
                 </div>
-
+  */}
                 <div className="row">
+                {productDivs}
+                {/* <ProductDetail product={props.products[4]}/> */}
 
+{/* 
                     <div className="col-sm-4 col-lg-4 col-md-4">
                         <div className="thumbnail">
                             <img src="http://placehold.it/320x150" alt=""/>
@@ -107,8 +122,9 @@ function App() {
                             </div>
                         </div>
                     </div>
+ */}
 
-                    <div className="col-sm-4 col-lg-4 col-md-4">
+                    {/* <div className="col-sm-4 col-lg-4 col-md-4">
                         <div className="thumbnail">
                             <img src="http://placehold.it/320x150" alt=""/>
                             <div className="caption">
@@ -194,13 +210,13 @@ function App() {
                                 </p>
                             </div>
                         </div>
-                    </div>
+                    </div> */}
 
                     <div className="col-sm-4 col-lg-4 col-md-4">
-                        <h4><a href="#">Like this template?</a>
+                        <h4><a href="#">Like this?</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>
+                        <p>If you like this, then check out <a target="_blank" href="http://maxoffsky.com/code-blog/laravel-shop-tutorial-1-building-a-review-system/">this link</a> on how to build 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</a>
                     </div>
 
                 </div>
@@ -215,11 +231,11 @@ function App() {
 
         <hr/>
 
-      
+        <Footer />      
         <footer>
             <div className="row">
                 <div className="col-lg-12">
-                    <p>Copyright &copy; Your Website 2014</p>
+                    <p>Copyright &copy; 2018</p>
                 </div>
             </div>
         </footer>
diff --git a/src/component/Carousel.js b/src/component/Carousel.js
new file mode 100644
index 0000000..33fed89
--- /dev/null
+++ b/src/component/Carousel.js
@@ -0,0 +1,36 @@
+import React from 'react'; 
+function Carousel(){
+    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/component/Footer.js b/src/component/Footer.js
new file mode 100644
index 0000000..d089234
--- /dev/null
+++ b/src/component/Footer.js
@@ -0,0 +1,13 @@
+import React from 'react'; 
+function Footer(){
+    return (        
+    <footer>
+        <div className="row">
+            <div className="col-lg-12">
+                <p>Copyright &copy; SpacePandaShop 2018</p>
+            </div>
+        </div>
+    </footer>
+    )
+}
+export default Footer;
\ No newline at end of file
diff --git a/src/component/Header.js b/src/component/Header.js
new file mode 100644
index 0000000..5e09e6f
--- /dev/null
+++ b/src/component/Header.js
@@ -0,0 +1,14 @@
+import React from 'react'; 
+function Header(){
+    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="#">SpacePandaShop</a>
+</div>
+    )
+}
+export default Header;
\ No newline at end of file
diff --git a/src/component/ProductDetail.js b/src/component/ProductDetail.js
new file mode 100644
index 0000000..27fd0bd
--- /dev/null
+++ b/src/component/ProductDetail.js
@@ -0,0 +1,44 @@
+import React from 'react'; 
+function ProductDetail(props){
+    let starRating = props.product.rating; 
+    let totalStars = [];
+    let emptyStarsNum = 5 - starRating;
+    let emptyStars = [];
+    for(var i=0; i< starRating; i++){ 
+        totalStars.push(<span className="glyphicon glyphicon-star"></span>)
+    }
+    for(var j=0; j< emptyStarsNum; j++){
+        emptyStars.push(<span className="glyphicon glyphicon-star-empty"></span>)
+    }
+
+    return ( 
+        // {props.product.name}
+                    <div className="col-sm-4 col-lg-4 col-md-4">
+                    <div className="thumbnail">
+                        {/* <img src="http://placehold.it/320x150" alt=""/> */}
+                        <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} </p>
+                            {/* <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> {starRating} Star Rating</p>
+                            <p className="pull-right">{props.product.reviews} Reviews</p>
+                            <p>
+                                 {totalStars} {emptyStars}
+                                {/* <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>
+        )      
+    }
+export default ProductDetail;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index e58303d..75daae2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,6 +5,6 @@ import './index.css';
 import state from './state';
 
 ReactDOM.render(
-  <App />,
+  <App products= {state.products}/>,
   document.getElementById('root')
 );