diff --git a/public/index.html b/public/index.html
index ac1043b..8d5e745 100644
--- a/public/index.html
+++ b/public/index.html
@@ -16,8 +16,8 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap"
-      rel="stylesheet"
-    />
+      rel="stylesheet" />
+    <link rel="stylesheet" href="../src/index.css">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -42,5 +42,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script src="../src/index.js"></script>
   </body>
 </html>
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..88b1b11 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 { title, price, description, category, image, rating } = props;
   return (
-      <article className="product">
-      <img src="" alt="" />
+    <article className="product">
+      <img src={image} alt={title} className="img" />
       <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 className="product__category">Category: {category}</p>
+        <p className="product__price">Price: $ {price}</p>
+        <p className="product__rating">Rating: {rating}/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..696ca83 100644
--- a/src/components/Products.js
+++ b/src/components/Products.js
@@ -1 +1,25 @@
 /* eslint-disable react/prop-types */
+import React from 'react';
+import Product from './Product';
+
+const Products = ({ products }) => {
+  return (
+    <div className="products">
+      {products.map(({ id, title, price, description, category, image, rating }) => {
+        return (
+          <Product
+            key={id}
+            title={title}
+            price={price}
+            description={description}
+            category={category}
+            image={image}
+            rating={rating.rate}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export default Products;
diff --git a/src/index.css b/src/index.css
index ee9f4f7..ef4526f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -56,6 +56,12 @@ img {
   background-color: #2c2c2c;
   display: flex;
   flex-direction: column;
+  margin: 10px 10px;
+  padding: 10px;
+  justify-content: center;
+  align-items: center;
+  width: 480px;
+  height: auto;
 }
 .product__img {
 }
@@ -76,6 +82,9 @@ img {
   color: white;
   font-family: 'Roboto', sans-serif;
 }
+.product__category{
+  color: rgb(234, 213, 175);
+}
 .product__price {
   color: orange;
 }