diff --git a/src/Pages/home/Home.tsx b/src/Pages/home/Home.tsx
index 34de71a..456994c 100644
--- a/src/Pages/home/Home.tsx
+++ b/src/Pages/home/Home.tsx
@@ -1,7 +1,12 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { AiFillStar, AiOutlineStar } from 'react-icons/ai'
+import { CartContext } from '../../context/CartContextProvider'
+import Card from '../../components/cart/Card';
 
 const Home = () => {
+
+  const productContext = useContext(CartContext);
+
   return (
     <>
       <section>
@@ -9,46 +14,9 @@ const Home = () => {
       </section>
       <img className="index-first-bg" src="/hero-gradient.svg" alt="" />
       <main className="main-index">
-        <div className="card">
-          <img
-            src="https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg"
-            alt=""
-          />
-          <main>
-            <p>Test Title ...</p>
-            <div className="card-details">
-              <div>
-                <AiOutlineStar style={{ color: 'orange' }} />
-                <AiOutlineStar style={{ color: 'orange' }} />
-                <AiOutlineStar style={{ color: 'orange' }} />
-                <AiOutlineStar style={{ color: 'orange' }} />
-                <AiOutlineStar style={{ color: 'orange' }} />
-              </div>
-              <p>231$</p>
-            </div>
-            <button>Add to Basket</button>
-          </main>
-        </div>
-        <div className="card">
-          <img
-            src="https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg"
-            alt=""
-          />
-          <main>
-            <p>Test Title ...</p>
-            <div className="card-details">
-              <div>
-                <AiFillStar style={{ color: 'orange' }} />
-                <AiFillStar style={{ color: 'orange' }} />
-                <AiFillStar style={{ color: 'orange' }} />
-                <AiFillStar style={{ color: 'orange' }} />
-                <AiFillStar style={{ color: 'orange' }} />
-              </div>
-              <p>231$</p>
-            </div>
-            <button>Add to Basket</button>
-          </main>
-        </div>
+        {
+          productContext.shop.map(products => <Card key={products.id} {...products} />)
+        }
       </main>
     </>
   )
diff --git a/src/components/cart/Card.tsx b/src/components/cart/Card.tsx
new file mode 100644
index 0000000..ffa00a4
--- /dev/null
+++ b/src/components/cart/Card.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+
+import { AiFillStar, AiOutlineStar } from 'react-icons/ai'
+import { Produts } from '../../types/products.types'
+
+const Card = ({ id, title, image, price, rating: { rate } }: Produts) => {
+  return (
+    <div className="card">
+      <img src={image} alt="products" />
+      <main>
+        <p>{title.slice(0, 10)}</p>
+        <div className="card-details">
+          <div>
+            {Array(Math.ceil(rate))
+              .fill(0)
+              .map(() => (
+                <AiFillStar style={{ color: 'orange' }} />
+              ))}
+            {Array(5 - Math.ceil(rate))
+              .fill(0)
+              .map(() => (
+                <AiOutlineStar style={{ color: 'orange' }} />
+              ))}
+          </div>
+          <p>{price}$</p>
+        </div>
+        <button>Add to Basket</button>
+      </main>
+    </div>
+  )
+}
+
+export default Card