diff --git a/src/App.js b/src/App.js
index c6e5940..dbaa936 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,6 @@
+/* eslint-disable prettier/prettier */
 import React from 'react';
+import './index.css';
 
 import Products from './components/Products';
 
@@ -87,7 +89,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..579f2f4 100644
--- a/src/components/Product.js
+++ b/src/components/Product.js
@@ -1,15 +1,17 @@
+/* eslint-disable prettier/prettier */
 /* eslint-disable react/prop-types */
 import React from 'react';
-
-const Product = () => {
+import '../index.css';
+const Product = (props) => {
+  const { title, price, description, image, rating } = props.product;
   return (
-      <article className="product">
-      <img src="" alt="" />
+    <article className="product">
+      <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 className="product__price">Price: ${price}</p>
+        <p className="product__rating">Rating:{rating.rate}/5</p>
+        <p className="product__desc">{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..2eeb8e7 100644
--- a/src/components/Products.js
+++ b/src/components/Products.js
@@ -1 +1,17 @@
+/* eslint-disable prettier/prettier */
 /* eslint-disable react/prop-types */
+import React from 'react';
+import '../index.css';
+import Product from './Product';
+
+const Products = (props) => {
+  return (
+    <div className="products">
+      {props.products.map((product, index) => (
+        <Product key={index} product={product} />
+      ))}
+    </div>
+  );
+};
+
+export default Products;
diff --git a/src/index.js b/src/index.js
index a77cd22..a4dc421 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,9 +1,11 @@
+/* eslint-disable prettier/prettier */
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 
 import './index.css';
 
+// @ts-ignore
 const root = ReactDOM.createRoot(document.getElementById('root'));
 
 root.render(<App />);