diff --git a/.gitignore b/.gitignore
index 927d17b..215a7c2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,4 +15,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
+#webstorm
+.idea/
diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js
index 885919a..6a178f9 100644
--- a/src/components/ProductDetail.js
+++ b/src/components/ProductDetail.js
@@ -1,30 +1,59 @@
 import React from "react";
+import Reviews from "./Reviews";
 
-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 React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: 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>
+  buttonClick = () => {
+    this.setState(prevState => ({
+      visible: !prevState.visible
+    }));
+    console.log(this.state.visible);
+  };
+
+  render() {
+
+    const {name, description, rating, imgUrl} = this.props.product;
+    const stars = [];
+    for (let i = 0; i < rating; i++) {
+      stars.push(<span className="glyphicon glyphicon-star"/>);
+    }
+    const reviewIt = this.props.product.reviews.map((r) => {
+      if (this.state.visible) {
+        return <Reviews review={r} />
+      }
+      return <span></span>;
+    });
+    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">
+            <div className="pull-right">
+              <ol onClick={this.buttonClick}>
+                {this.props.product.reviews.length} reviewz {reviewIt}
+              </ol>
+            </div>
+            <p>
+              {stars}
+            </p>
+          </div>
         </div>
       </div>
-    </div>
-  );
+    );
+  }
 }
+// :)
 export default ProductDetail;
diff --git a/src/components/Reviews.js b/src/components/Reviews.js
new file mode 100644
index 0000000..2b56a99
--- /dev/null
+++ b/src/components/Reviews.js
@@ -0,0 +1,15 @@
+import React from "react";
+import {Component} from "react";
+
+class Reviews extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+
+    return (<li>{this.props.review.description}</li>)
+  }
+}
+
+export default Reviews;
\ No newline at end of file