diff --git a/src/App.js b/src/App.js
index c6e5940..a6d8bc1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -87,7 +87,7 @@ const App = () => {
   return (
     <div>
       <h1 className="title">BD Store</h1>
-      <Products  />
+      <Products products={products} />
     </div>
   );
 };
diff --git a/src/components/Product.js b/src/components/Product.js
index b497da4..c3b460d 100644
--- a/src/components/Product.js
+++ b/src/components/Product.js
@@ -1,15 +1,17 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 
-const Product = () => {
+const Product = (props) => {
+  const {product} = props;
+  const {title, image, price, rating, description} = product;
   return (
       <article className="product">
-      <img src="" alt="" />
+      <img src={image} alt="" />
       <div className="product__details">
-        <h4 className="product__title">product title</h4>
-        <p>Price: $ product price</p>
-        <p>Rating: product rating rate/5</p>
-        <p className="product__desc">Description: product.description</p>
+        <h4 className="product__title">{title}</h4>
+        <p>Price: $ {price}</p>
+        <p>Rating: {rating.rate}/5</p>
+        <p className="product__desc">Description: {description}</p>
         <button className="product__btn btn">Add to cart</button>
       </div>
     </article>
diff --git a/src/components/Products.js b/src/components/Products.js
index 3da8fdd..657f8f3 100644
--- a/src/components/Products.js
+++ b/src/components/Products.js
@@ -1 +1,19 @@
 /* eslint-disable react/prop-types */
+import Product from "./Product";
+
+
+function Products (props){
+    const {product} = props;
+    return (
+        <div className="products">
+            {
+                product.map((item)=>{
+                    <Product key={item.id} product={item} />
+                })
+            }
+        </div>
+        )
+}
+
+export default Products;
+