diff --git a/data/products.json b/data/products.json
index 2492312..6840c60 100644
--- a/data/products.json
+++ b/data/products.json
@@ -8,6 +8,26 @@
       "date": "12-03-2013",
       "price": 10,
       "comprimes": "30 comprimes",
+      "utilisation": "6 ans et plus",
+      "mode d'emploi": "1 par jour",
+      "indications":[
+        { 
+        "name": "reninforce immune system"
+        },
+        { 
+        "name": "anti oxydant"
+        },
+        { 
+        "name": "fatigue passagere"
+        }
+
+      ],
+      "composantes": [
+        {
+          "composanteActive": "Zinc",
+          "concentration": "200mg"
+        }
+      ],
     "image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80"
     },
     {
@@ -18,6 +38,26 @@
       "date": "12-03-2013",
       "price": 20,
       "comprimes": "30 comprimes",
+      "utilisation": "6 ans et plus",
+      "mode d'emploi": "1 par jour",
+      "indications":[
+        { 
+        "name": "reninforce immune system"
+        },
+        { 
+        "name": "anti oxydant"
+        },
+        { 
+        "name": "fatigue passagere"
+        }
+
+      ],
+      "composantes": [
+        {
+          "composanteActive": "Zinc",
+          "concentration": "200mg"
+        }
+      ],
     "image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80"
     },
     {
@@ -28,6 +68,26 @@
       "date": "12-03-2013",
       "price": 30,
       "comprimes": "30 comprimes",
+      "utilisation": "6 ans et plus",
+      "mode d'emploi": "1 par jour",
+      "indications":[
+        { 
+        "name": "reninforce immune system"
+        },
+        { 
+        "name": "anti oxydant"
+        },
+        { 
+        "name": "fatigue passagere"
+        }
+
+      ],
+      "composantes": [
+        {
+          "composanteActive": "Zinc",
+          "concentration": "200mg"
+        }
+      ],
     "image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80"
     },
     {
@@ -38,6 +98,26 @@
       "date": "12-03-2013",
       "price": 40,
       "comprimes": "30 comprimes",
+      "utilisation": "6 ans et plus",
+      "mode d'emploi": "1 par jour",
+      "indications":[
+        { 
+        "name": "reninforce immune system"
+        },
+        { 
+        "name": "anti oxydant"
+        },
+        { 
+        "name": "fatigue passagere"
+        }
+
+      ],
+      "composantes": [
+        {
+          "composanteActive": "Zinc",
+          "concentration": "200mg"
+        }
+      ],
     "image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80"
     },
     {
@@ -48,6 +128,26 @@
       "date": "12-03-2013",
       "price": 50,
       "comprimes": "30 comprimes",
+      "utilisation": "6 ans et plus",
+      "mode d'emploi": "1 par jour",
+      "indications":[
+        { 
+        "name": "reninforce immune system"
+        },
+        { 
+        "name": "anti oxydant"
+        },
+        { 
+        "name": "fatigue passagere"
+        }
+
+      ],
+      "composantes": [
+        {
+          "composanteActive": "Zinc",
+          "concentration": "200mg"
+        }
+      ],
     "image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80"
     },
     {
@@ -58,6 +158,26 @@
       "date": "12-03-2013",
       "price": 60,
       "comprimes": "30 comprimes",
+      "utilisation": "6 ans et plus",
+      "mode d'emploi": "1 par jour",
+      "indications":[
+        { 
+        "name": "reninforce immune system"
+        },
+        { 
+        "name": "anti oxydant"
+        },
+        { 
+        "name": "fatigue passagere"
+        }
+
+      ],
+      "composantes": [
+        {
+          "composanteActive": "Zinc",
+          "concentration": "200mg"
+        }
+      ],
     "image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80"
     },
     {
@@ -68,6 +188,26 @@
       "date": "12-03-2013",
       "price": 70,
       "comprimes": "30 comprimes",
+      "utilisation": "6 ans et plus",
+      "mode d'emploi": "1 par jour",
+      "indications":[
+        { 
+        "name": "reninforce immune system"
+        },
+        { 
+        "name": "anti oxydant"
+        },
+        { 
+        "name": "fatigue passagere"
+        }
+
+      ],
+      "composantes": [
+        {
+          "composanteActive": "Zinc",
+          "concentration": "200mg"
+        }
+      ],
     "image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80"
     },
     {
@@ -78,6 +218,26 @@
       "date": "12-03-2013",
       "price": 80,
       "comprimes": "30 comprimes",
+      "utilisation": "6 ans et plus",
+      "mode d'emploi": "1 par jour",
+      "indications":[
+        { 
+        "name": "reninforce immune system"
+        },
+        { 
+        "name": "anti oxydant"
+        },
+        { 
+        "name": "fatigue passagere"
+        }
+
+      ],
+      "composantes": [
+        {
+          "composanteActive": "Zinc",
+          "concentration": "200mg"
+        }
+      ],
     "image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80"
     },
     {
@@ -88,6 +248,26 @@
       "date": "12-03-2013",
       "price": 90,
       "comprimes": "30 comprimes",
+      "utilisation": "6 ans et plus",
+      "mode d'emploi": "1 par jour",
+      "indications":[
+        { 
+        "name": "reninforce immune system"
+        },
+        { 
+        "name": "anti oxydant"
+        },
+        { 
+        "name": "fatigue passagere"
+        }
+
+      ],
+      "composantes": [
+        {
+          "composanteActive": "Zinc",
+          "concentration": "200mg"
+        }
+      ],
     "image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80"
     },
     {
@@ -98,6 +278,26 @@
       "date": "12-03-2013",
       "price": 100,
       "comprimes": "30 comprimes",
+      "utilisation": "6 ans et plus",
+      "mode d'emploi": "1 par jour",
+      "indications":[
+        { 
+        "name": "reninforce immune system"
+        },
+        { 
+        "name": "anti oxydant"
+        },
+        { 
+        "name": "fatigue passagere"
+        }
+
+      ],
+      "composantes": [
+        {
+          "composanteActive": "Zinc",
+          "concentration": "200mg"
+        }
+      ],
     "image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80"
     }
   ],
diff --git a/next.config.js b/next.config.js
index 47a26cf..7f87d3f 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,5 +1,13 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     reactStrictMode: true,
+        images: {
+          remotePatterns: [
+            {
+              protocol: 'https',
+              hostname: 'images.unsplash.com',
+            },
+          ],
+        },
 };
 module.exports = nextConfig;
diff --git a/pages/products/[id].js b/pages/products/[id].js
index 7e59927..85ab5b6 100644
--- a/pages/products/[id].js
+++ b/pages/products/[id].js
@@ -1,7 +1,20 @@
 import { useEffect, useState } from "react";
+import { Button, Grid, Center} from "@mantine/core";
+import { BadgeCard } from "@/src/components/productsComponents/mainProd";
 import Link from "next/link";
+import { TableScrollArea } from "@/src/components/productsComponents/inPordTable";
+import { TableScrollAr } from "@/src/components/productsComponents/inTable";
+import Image from "next/image";
 
 const Product = ({ id, data, similarProds }) => {
+  const styles={
+    button: {
+padding: "8px",backgroundColor: "transparent", textDecoration: "none",color: "white", border: "none"
+    },
+    buttonWrapper: {
+      margin: "5px"
+    }
+  }
   const [quantity, setQuantity] = useState(1);
   const [cart, setCart] = useState([]);
 
@@ -46,45 +59,59 @@ const Product = ({ id, data, similarProds }) => {
     }
   };
 
+  const {composantes, indications,image}=data
   return (
     <div>
-      Product: {JSON.stringify(data)}
-      <br />
-      quantity: {quantity}
-      <br />
-      price: {data.price * quantity}
-      <br />
-      <Link href={"/cart"}>
-        <button onClick={handle_add_to_cart}>Order Now</button>
-      </Link>
-      <br />
-      {"   "}
-      <button onClick={() => handleQuantity("+")}>+</button>
-      {"   "}
-      <button onClick={() => handleQuantity("-")}>-</button>
-      <br />
-      {/*// TODO notification that it is added to cart*/}
-      <button onClick={handle_add_to_cart}>Add to Cart</button>{" "}
+      <Grid>
+            <Grid.Col sm={12} md={4} >
+              <Center>
+              <Image src={image} height={250} width={250} alt="just iamge1l" />
+</Center>
+            </Grid.Col>
+            <Grid.Col sm={6} md={4} >
+              <TableScrollArea data={composantes} />
+              mode d'emploi
+              utilisation
+            </Grid.Col>
+            <Grid.Col sm={6} md={3} >
+              <TableScrollAr data={indications} />
+            </Grid.Col>
+      </Grid>
+      <div>
+        quantity: {quantity}
+        <br />
+        price: {data.price * quantity}
+        <br />
+        <Button style={styles.buttonWrapper}>
+          <button style={styles.button} onClick={() => handleQuantity("+")}>+</button>
+        </Button>
 
-      <h4>similar products</h4>
-      {/*limiting similar Prods to 3 products*/}
+        <Button style={styles.buttonWrapper}>
+          <button style={styles.button} onClick={() => handleQuantity("-")}>-</button>
+        </Button>
+        <br />
+        {/*// TODO notification that it is added to cart*/}
+        <Button style={styles.buttonWrapper}>
+          <button style={styles.button} onClick={handle_add_to_cart}>Add to Cart</button>{" "}
+        </Button>
+        <Button>
+              <Link href={"/cart"}>
+          <button style={styles.button} onClick={handle_add_to_cart}>Order Now</button>{" "}
+              </Link>
+        </Button>
+      </div>
+      <h3>similar products</h3>
       <div>
+      <Grid >
         {similarProds &&
           similarProds.map((product) => {
-            // condition not to render the product in itself as a similar product
-            if (product.id != id) {
-              return (
-                <div key={product.id}>
-                  <p>{JSON.stringify(product)}</p>
-                  <p>
-                    <Link href={`/products/${product.id}`}>
-                      <button>Details</button>{" "}
-                    </Link>
-                  </p>
-                </div>
-              );
-            }
+            return (
+            <Grid.Col span={4} key={product.id}>
+              <BadgeCard {...product} />
+            </Grid.Col>
+            );
           })}
+    </Grid>
       </div>
     </div>
   );
diff --git a/pages/products/index.js b/pages/products/index.js
index 4898eef..3385d1b 100644
--- a/pages/products/index.js
+++ b/pages/products/index.js
@@ -19,6 +19,7 @@ const Events = ({ productsList }) => {
     },
     title: {
       display: "inline",
+      marginLeft: "30px",
       fontWeight: "bold",
       fontSize: "18px"
     },
@@ -52,7 +53,7 @@ const Events = ({ productsList }) => {
         <option style={styles.option}>Sport</option>
       </select>
     </div>
-      <Grid >
+      <Grid style={{padding: "30px" }}>
         {products &&
           products.map((product) => {
             return (
diff --git a/src/components/carousel.js b/src/components/carousel.js
index 3217234..39dc845 100644
--- a/src/components/carousel.js
+++ b/src/components/carousel.js
@@ -55,7 +55,7 @@ const data = [
   {
     image:
       'https://images.unsplash.com/photo-1508193638397-1c4234db14d8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80',
-    title: 'Best forests to visit in North America',
+    title: 'Best health and beauty products',
   },
   {
     image:
@@ -96,10 +96,9 @@ export function CardsCarousel() {
   return (
     <Carousel
       slideSize="50%"
-      breakpoints={[{ maxWidth: 'sm', slideSize: '100%', slideGap: rem(2) }]}
+      breakpoints={[{ maxWidth: 'lg', slideSize: '100%', slideGap: rem(2) }]}
       slideGap="xl"
       align="start"
-      slidesToScroll={mobile ? 1 : 2}
     >
       {slides}
     </Carousel>
diff --git a/src/components/productsComponents/inPordTable.js b/src/components/productsComponents/inPordTable.js
new file mode 100644
index 0000000..067e49f
--- /dev/null
+++ b/src/components/productsComponents/inPordTable.js
@@ -0,0 +1,54 @@
+import { useState } from 'react';
+import { createStyles, Table, ScrollArea, rem } from '@mantine/core';
+
+const useStyles = createStyles((theme) => ({
+  header: {
+    position: 'sticky',
+    top: 0,
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
+    transition: 'box-shadow 150ms ease',
+
+    '&::after': {
+      content: '""',
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      bottom: 0,
+      borderBottom: `${rem(1)} solid ${
+        theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[2]
+      }`,
+    },
+  },
+
+  scrolled: {
+    boxShadow: theme.shadows.sm,
+  },
+}));
+
+
+
+export function TableScrollArea({ data }) {
+  const { classes, cx } = useStyles();
+  const [scrolled, setScrolled] = useState(false);
+
+  const rows = data.map((row) => (
+    <tr key={row.name}>
+      <td>{row.composanteActive}</td>
+      <td>{row.concentration}</td>
+    </tr>
+  ));
+
+  return (
+    <ScrollArea onScrollPositionChange={({ y }) => setScrolled(y !== 0)}>
+      <Table >
+        <thead className={cx(classes.header, { [classes.scrolled]: scrolled })}>
+          <tr>
+            <th>Composante Active</th>
+            <th>Concentration par comprimes</th>
+          </tr>
+        </thead>
+        <tbody>{rows}</tbody>
+      </Table>
+    </ScrollArea>
+  );
+}
\ No newline at end of file
diff --git a/src/components/productsComponents/inTable.js b/src/components/productsComponents/inTable.js
new file mode 100644
index 0000000..0555380
--- /dev/null
+++ b/src/components/productsComponents/inTable.js
@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import { createStyles, Table, ScrollArea, rem } from '@mantine/core';
+
+const useStyles = createStyles((theme) => ({
+  header: {
+    position: 'sticky',
+    top: 0,
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
+    transition: 'box-shadow 150ms ease',
+
+    '&::after': {
+      content: '""',
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      bottom: 0,
+      borderBottom: `${rem(1)} solid ${
+        theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[2]
+      }`,
+    },
+  },
+
+  scrolled: {
+    boxShadow: theme.shadows.sm,
+  },
+}));
+
+
+
+export function TableScrollAr({ data }) {
+  const { classes, cx } = useStyles();
+  const [scrolled, setScrolled] = useState(false);
+
+  const rows = data.map((row) => (
+    <tr key={row.name}>
+      <td>{row.name}</td>
+    </tr>
+  ));
+
+  return (
+    <ScrollArea onScrollPositionChange={({ y }) => setScrolled(y !== 0)}>
+      <Table >
+        <thead className={cx(classes.header, { [classes.scrolled]: scrolled })}>
+          <tr>
+            <th>Indication</th>
+          </tr>
+        </thead>
+        <tbody>{rows}</tbody>
+      </Table>
+    </ScrollArea>
+  );
+}
\ No newline at end of file