diff --git a/README.md b/README.md
index 258a878..22a3559 100644
--- a/README.md
+++ b/README.md
@@ -9,4 +9,4 @@ Fork, clone, run yarn install, yarn start, pull request
  * It will show the number of reviews followed by "review" or "reviews" depending on if there is one or more reviews
  * It will create a list of the reviews description which will inititally be hidden
  * When the word "review" is clicked show the reviews
- * When clicked again, hide the reviews
\ No newline at end of file
+ * When clicked again, hide the reviews
diff --git a/src/components/Carousel.js b/src/components/Carousel.js
index a10b02b..3c2b341 100644
--- a/src/components/Carousel.js
+++ b/src/components/Carousel.js
@@ -33,4 +33,3 @@ import React, { Component } from 'react';
     )
 }
 export default Carousel;
-
diff --git a/src/components/Description.js b/src/components/Description.js
new file mode 100644
index 0000000..53a3da4
--- /dev/null
+++ b/src/components/Description.js
@@ -0,0 +1,9 @@
+import React from "react";
+
+function Description(props) {
+  return (
+    <li> {props.description} </li>
+  );
+}
+
+export default Description;
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index 0fc4200..5b932b7 100644
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -28,4 +28,4 @@ import React, { Component } from 'react';
         </div>
     </nav>)
 }
-export default NavBar;
\ No newline at end of file
+export default NavBar;
diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js
index 885919a..ab3b4e0 100644
--- a/src/components/ProductDetail.js
+++ b/src/components/ProductDetail.js
@@ -1,12 +1,17 @@
 import React from "react";
+import Reviews from "./Reviews";
 
 function ProductDetail(props) {
-  const {name,description,rating,imgUrl} = props.product;
+  const {name,description,rating,imgUrl,reviews} = props.product;
   const stars = [];
   for (let i = 0; i < rating; i++) {
     stars.push(<span className="glyphicon glyphicon-star" />);
   }
 
+  function toggle() {
+    this.setState({isShown: !this.state.isShown});
+  }
+
   return (
     <div className="col-sm-4 col-lg-4 col-md-4">
       <div className="thumbnail">
@@ -14,7 +19,7 @@ function ProductDetail(props) {
         <div className="caption">
           <h4><a href="#">{name}</a>
           </h4>
-          <p>{description} 
+          <p>{description}
           </p>
         </div>
         <div className="ratings">
@@ -23,6 +28,7 @@ function ProductDetail(props) {
             {stars}
           </p>
         </div>
+        <Reviews reviews={reviews} toggle={toggle} />
       </div>
     </div>
   );
diff --git a/src/components/Reviews.js b/src/components/Reviews.js
new file mode 100644
index 0000000..cca6dcc
--- /dev/null
+++ b/src/components/Reviews.js
@@ -0,0 +1,35 @@
+import React, {Component} from "react";
+import Description from "./Description";
+
+class Reviews extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      isShown: false
+    };
+  }
+  render() {
+    const numOfReviews = this.props.reviews.length;
+    let reviewText = "";
+    if (numOfReviews > 1) {
+      reviewText = "reviews";
+    } else {
+      reviewText = "review";
+    }
+    const listOfDescriptions = this.props.reviews.map(review => {
+      return <Description description={review.description} />;
+    });
+
+    const list = this.state.isShown ? listOfDescriptions : "";
+    return (
+      <div>
+        <button onClick={() => {
+          this.setState({isShown: !this.state.isShown});
+        }}>{numOfReviews} {reviewText}</button>
+        <ol>{list}</ol>
+      </div>
+    );
+  }
+}
+
+export default Reviews;