diff --git a/src/App.js b/src/App.js
index 8dfa97f..ec38ec6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,39 +1,48 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
-import NavBar from './components/NavBar';
-import Footer from './components/Footer';
-import ProductDetail from './components/ProductDetail';
-import Carousel from './components/Carousel';
-function App (props) {
+import React from "react";
+import "./App.css";
+import NavBar from "./components/NavBar";
+import Footer from "./components/Footer";
+import ProductDetail from "./components/ProductDetail";
+import Carousel from "./components/Carousel";
+import PropTypes from "prop-types";
 
-    var products = props.state.products.map(function(prod){
-        return <ProductDetail product={prod} />;
-    });
+function App(props) {
+
+  const products = props.state.products.map(function (prod) {
     return (
-          <div className="App">
-            <NavBar />
-            <div className="container">
-              <div className="row">
-                  <div className="col-md-3">
-                      <p className="lead">Shop Name</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>
-                      </div>
-                  </div>
-                  <div className="col-md-9">
-                      <Carousel />
-                      <div className="row">
-                        {products}
-                      </div>
-                  </div>
-              </div>
+      <ProductDetail
+        key={prod.id}
+        product={prod} />
+    );
+  });
+  return (
+    <div className="App">
+      <NavBar />
+      <div className="container">
+        <div className="row">
+          <div className="col-md-3">
+            <p className="lead">Shop Name</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>
             </div>
-            <Footer />
           </div>
-    );
+          <div className="col-md-9">
+            <Carousel />
+            <div className="row">
+              {products}
+            </div>
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
 }
 
+App.propTypes = {
+  state: PropTypes.object.isRequired
+};
+
 export default App;
diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js
index 885919a..62761b1 100644
--- a/src/components/ProductDetail.js
+++ b/src/components/ProductDetail.js
@@ -1,30 +1,59 @@
-import React from "react";
+import React, {Component} from "react";
+import Reviews from "./Reviews";
+import PropTypes from "prop-types";
 
-function ProductDetail(props) {
-  const {name,description,rating,imgUrl} = props.product;
-  const stars = [];
-  for (let i = 0; i < rating; i++) {
-    stars.push(<span className="glyphicon glyphicon-star" />);
+class ProductDetail extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showReviews: false
+    };
   }
 
-  return (
-    <div className="col-sm-4 col-lg-4 col-md-4">
-      <div className="thumbnail">
-        <img style={{width: "320px",height: "150px"}} src={imgUrl} alt="" />
-        <div className="caption">
-          <h4><a href="#">{name}</a>
-          </h4>
-          <p>{description} 
-          </p>
-        </div>
-        <div className="ratings">
-          <p className="pull-right">15 reviews</p>
-          <p>
-            {stars}
-          </p>
+  displayStars() {
+    const stars = [];
+    for (let i = 0; i < this.props.product.rating; i++) {
+      stars.push(<span className="glyphicon glyphicon-star" />);
+    }
+    return stars;
+  }
+
+  toggleReviews() {
+    this.setState({
+      showReviews: !this.state.showReviews
+    });
+  }
+
+  render() {
+    return (
+      <div className="col-sm-4 col-lg-4 col-md-4">
+        <div className="thumbnail">
+          <img style={{width: "320px",height: "150px"}} src={this.props.product.imgUrl} alt="" />
+          <div className="caption">
+            <h4><a href="#">{this.props.product.name}</a>
+            </h4>
+            <p>{this.props.product.description}
+            </p>
+          </div>
+          <div className="ratings">
+            <Reviews
+              showReviews={this.state.showReviews}
+              toggleReviews={() => {
+                this.toggleReviews();
+              }}
+              product={this.props.product} />
+            <p>
+              {this.displayStars()}
+            </p>
+          </div>
         </div>
       </div>
-    </div>
-  );
+    );
+  }
 }
+
+ProductDetail.propTypes = {
+  product: PropTypes.object.isRequired,
+};
+
 export default ProductDetail;
diff --git a/src/components/Reviews.js b/src/components/Reviews.js
new file mode 100644
index 0000000..f660f53
--- /dev/null
+++ b/src/components/Reviews.js
@@ -0,0 +1,45 @@
+import React, {Component} from "react";
+import PropTypes from "prop-types";
+
+class Reviews extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      reviews: this.props.product.reviews,
+      reviewText: "Reviews",
+      reviewDetails: this.props.product.reviewDetails
+    };
+  }
+
+  showReviewDetails() {
+    return this.state.reviewDetails.map((each, index) => {
+      return (
+        <p key={index}>
+          {each.description}
+        </p>
+      );
+    });
+  }
+
+  render() {
+    if (this.state.reviews <= 1) {
+      this.setState({
+        reviewText: "Review"
+      });
+    }
+    return (
+      <div onClick={this.props.toggleReviews}>
+        {this.state.reviews} {this.state.reviewText}
+        {this.props.showReviews && this.showReviewDetails()}
+      </div>
+    );
+  }
+}
+
+Reviews.propTypes = {
+  showReviews: PropTypes.bool.isRequired,
+  toggleReviews: PropTypes.func.isRequired,
+  product: PropTypes.object.isRequired
+};
+
+export default Reviews;
diff --git a/src/state.js b/src/state.js
index badf378..b8c0ab9 100644
--- a/src/state.js
+++ b/src/state.js
@@ -9,7 +9,7 @@ export default {
     "imgUrl": "http://dummyimage.com/136x167.bmp/cc0000/ffffff",
     "price": "$95.11",
     "category": "food",
-    "reviews": [{
+    "reviewDetails": [{
       "description": "architect revolutionary deliverables",
       "rating": 2
     }, {
@@ -49,7 +49,7 @@ export default {
     "imgUrl": "http://dummyimage.com/125x134.jpg/cc0000/ffffff",
     "price": "$37.09",
     "category": "food",
-    "reviews": [{
+    "reviewDetails": [{
       "description": "architect revolutionary deliverables",
       "rating": 2
     }, {
@@ -75,7 +75,7 @@ export default {
     "imgUrl": "http://dummyimage.com/149x190.jpg/dddddd/000000",
     "price": "$51.83",
     "category": "food",
-     "reviews": [{
+     "reviewDetails": [{
       "description": "architect revolutionary deliverables",
       "rating": 2
     }, {
@@ -95,7 +95,7 @@ export default {
     "imgUrl": "http://dummyimage.com/162x153.jpg/cc0000/ffffff",
     "price": "$86.93",
     "category": "electronics",
-     "reviews": [{
+     "reviewDetails": [{
       "description": "architect revolutionary deliverables",
       "rating": 2
     }, {
@@ -115,7 +115,7 @@ export default {
     "imgUrl": "http://dummyimage.com/120x245.jpg/cc0000/ffffff",
     "price": "$70.10",
     "category": "electronics",
-     "reviews": [{
+     "reviewDetails": [{
       "description": "architect revolutionary deliverables",
       "rating": 2
     }, {
@@ -135,7 +135,7 @@ export default {
     "imgUrl": "http://dummyimage.com/211x227.bmp/5fa2dd/ffffff",
     "price": "$39.25",
     "category": "electronics",
-     "reviews": [{
+     "reviewDetails": [{
       "description": "architect revolutionary deliverables",
       "rating": 2
     }, {
@@ -155,7 +155,7 @@ export default {
     "imgUrl": "http://dummyimage.com/212x144.jpg/ff4444/ffffff",
     "price": "$99.91",
     "category": "sporting",
-     "reviews": [{
+     "reviewDetails": [{
       "description": "architect revolutionary deliverables",
       "rating": 2
     }, {
@@ -175,7 +175,7 @@ export default {
     "imgUrl": "http://dummyimage.com/204x175.jpg/5fa2dd/ffffff",
     "price": "$67.17",
     "category": "sporting",
-     "reviews": [{
+     "reviewDetails": [{
       "description": "architect revolutionary deliverables",
       "rating": 2
     }, {
@@ -195,7 +195,7 @@ export default {
     "imgUrl": "http://dummyimage.com/212x108.bmp/cc0000/ffffff",
     "price": "$96.84",
     "category": "sporting",
-     "reviews": [{
+     "reviewDetails": [{
       "description": "architect revolutionary deliverables",
       "rating": 2
     }, {
@@ -215,10 +215,10 @@ export default {
     "imgUrl": "http://dummyimage.com/189x109.png/cc0000/ffffff",
     "price": "$74.37",
     "category": "sporting",
-     "reviews": [{
+     "reviewDetails": [{
       "description": "architect revolutionary deliverables",
       "rating": 2
     }
   ]
   }]
-}
\ No newline at end of file
+};
diff --git a/yarn.lock b/yarn.lock
index 5390255..88ac4d7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2570,11 +2570,11 @@ got@^5.0.0:
     unzip-response "^1.0.2"
     url-parse-lax "^1.0.0"
 
-graceful-fs@4.1.10:
+graceful-fs@4.1.10, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
   version "4.1.10"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.10.tgz#f2d720c22092f743228775c75e3612632501f131"
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
+graceful-fs@^4.1.11:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
 
@@ -4557,14 +4557,10 @@ q-io@1.13.2:
     qs "^1.2.1"
     url2 "^0.0.0"
 
-q@1.4.1:
+q@1.4.1, q@^1.0.1, q@^1.1.2:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
 
-q@^1.0.1, q@^1.1.2:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/q/-/q-1.5.0.tgz#dd01bac9d06d30e6f219aecb8253ee9ebdc308f1"
-
 qs@6.4.0, qs@~6.4.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"