diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js
index 885919a..eb0b754 100644
--- a/src/components/ProductDetail.js
+++ b/src/components/ProductDetail.js
@@ -1,4 +1,5 @@
 import React from "react";
+import Reviews from './Reviews';
 
 function ProductDetail(props) {
   const {name,description,rating,imgUrl} = props.product;
@@ -18,7 +19,7 @@ function ProductDetail(props) {
           </p>
         </div>
         <div className="ratings">
-          <p className="pull-right">15 reviews</p>
+          <p className="pull-right">15 reviews <Reviews reviews={props.product.reviews} /></p>
           <p>
             {stars}
           </p>
diff --git a/src/components/Reviews.js b/src/components/Reviews.js
new file mode 100644
index 0000000..db6b7ea
--- /dev/null
+++ b/src/components/Reviews.js
@@ -0,0 +1,36 @@
+import React from "react";
+
+class Reviews extends React.Component {
+    constructor() {
+        super();
+        this.state = {visible:true};
+    }
+    render(props) {
+        var reviewDiv = "";
+        if(this.state.visible) {
+            reviewDiv = this.props.reviews.map((review) => {
+                return <div>
+                       {review.description}
+                    </div>
+            })
+        }
+
+
+        return <div>
+                <button onClick={()=>{
+                    this.setState({
+                        visible:!this.state.visible
+                    });
+                    }
+                }>Review</button>
+                {reviewDiv}
+            </div>
+    }
+
+        
+        
+
+
+};
+
+export default Reviews;
\ No newline at end of file