diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js
index 885919a..4c0212c 100644
--- a/src/components/ProductDetail.js
+++ b/src/components/ProductDetail.js
@@ -1,12 +1,12 @@
 import React from "react";
+import Reviews from "./Reviews.js";
 
 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" />);
   }
-
   return (
     <div className="col-sm-4 col-lg-4 col-md-4">
       <div className="thumbnail">
@@ -14,14 +14,18 @@ function ProductDetail(props) {
         <div className="caption">
           <h4><a href="#">{name}</a>
           </h4>
-          <p>{description} 
+          <p>{description}
           </p>
         </div>
-        <div className="ratings">
-          <p className="pull-right">15 reviews</p>
-          <p>
-            {stars}
+        <div className="ratings" >
+        <p>
+          {stars}
+        </p>
+          <p >
+          <Reviews products={reviews}/>
+
           </p>
+
         </div>
       </div>
     </div>
diff --git a/src/components/Reviews.js b/src/components/Reviews.js
new file mode 100644
index 0000000..bc0b87a
--- /dev/null
+++ b/src/components/Reviews.js
@@ -0,0 +1,55 @@
+import React from "react";
+
+class Reviews extends React.Component {
+  constructor (props) {
+    super();
+    this.state ={
+      visible:false,
+    };
+  }
+  render(){
+  function fillStars(value){
+    var arr=[];
+    for (let i=0; i<value; i++){
+      arr.push(<span className="glyphicon glyphicon-star"></span>)
+    }
+    return arr;
+  };
+    const reviewState = this.props.products;
+    let reviewDiv= "";
+    let reviewTag;
+  if( reviewState.length > 1) {
+    reviewTag= "Reviews";
+  }
+  else {
+    reviewTag="Review"
+  }
+  if (this.state.visible){
+    reviewDiv=  reviewState.map(function(type, index) {
+      return(
+      <div>
+
+
+        <p key={index}>{type.description}</p> <p>{fillStars(type.rating)} </p>
+
+      </div>
+);
+    })
+  }
+  else{
+    reviewDiv="";
+  }
+  return(
+    <div>
+    <a onClick={(e)=>{
+      this.setState({
+        visible:!this.state.visible
+      });
+    }}>{reviewTag}</a>
+{reviewDiv}
+
+    </div>
+  );
+}
+}
+export default Reviews;
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"