diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js
index 885919a..f17397a 100644
--- a/src/components/ProductDetail.js
+++ b/src/components/ProductDetail.js
@@ -1,7 +1,8 @@
 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" />);
@@ -14,14 +15,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..90b7a0d
--- /dev/null
+++ b/src/components/Reviews.js
@@ -0,0 +1,62 @@
+import React from "react";
+
+class Reviews extends React.Component {
+  constructor (props) {
+    super();
+    this.state ={
+      visible:false,
+    };
+
+  }
+render(){
+  function fillStars(value){
+    var arr=[];
+    for (var i=0; i<value; i++){
+      arr.push(<span className="glyphicon glyphicon-star"></span>)
+    }
+    return arr;
+  };
+  let 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>
+
+<hr />
+        <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;