diff --git a/backend/src/services/api/tenantsProductsCart.ts b/backend/src/services/api/tenantsProductsCart.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f356b3a996f89ce4bf38c937aa3c53915d9e22db
--- /dev/null
+++ b/backend/src/services/api/tenantsProductsCart.ts
@@ -0,0 +1,100 @@
+/* eslint-disable no-unused-vars */
+import Axios from "axios";
+import { useEffect, useState } from "react";
+
+interface cartItem {
+    id: number;
+    quantity: number;
+}
+
+interface Product {
+    id : number,
+    image: string,
+    name: string,
+    description: string,
+    price: number
+    id_tenant: number
+}
+
+interface Tenant {
+    id : number,
+    image: string,
+    name: string
+}
+  
+
+export default function tenantsProductsCart() {
+    const [tenantData, setTenantData] = useState<Tenant[]>([]);
+
+    const getTenantData = async () => {
+        const tenantResponse = await Axios.get(`http://localhost:8000/tenants`);
+
+        const tenantData = tenantResponse.data.data;
+
+        const result = tenantData.map((tenant: Tenant) => {
+            return {
+                id: tenant.id,
+                image: tenant.image,
+                name: tenant.name
+            };
+        });
+
+        setTenantData(result);
+
+    };
+
+    useEffect(() => {
+        getTenantData();
+    }, []);
+
+    console.log(tenantData);
+
+    const [productData, setProductData] = useState<Product[]>([]);
+
+    const getProductData = async () => {
+        const productResponse = await Axios.get("http://localhost:8000/products");
+
+        const productData = productResponse.data.data;
+
+        const result = productData.map((product: Product) => {
+            return {
+                id: product.id,
+                image: product.image,
+                name: product.name,
+                description: product.description,
+                price: product.price,
+                id_tenant: product.id_tenant
+            };
+        });
+
+        setProductData(result);
+
+    };
+
+    useEffect(() => {
+        getProductData();
+    }, []);
+
+    console.log(productData);
+
+    const getTenantId = (cartItem: cartItem): number => {
+        const item = productData.find((i) => i.id === cartItem.id);
+        const tenant = tenantData.find((t) => t.id === item?.id_tenant);
+        console.log(tenant);
+        return tenant?.id || 0;
+    };
+    
+    const getTenantImage = (cartItem: cartItem): string => {
+        const item = productData.find((i) => i.id === cartItem.id);
+        const tenant = tenantData.find((t) => t.id === item?.id_tenant);
+        console.log(tenant);
+        return tenant?.image || "";
+    };
+    
+    const getTenantName = (cartItem: cartItem): string => {
+        const item = productData.find((i) => i.id === cartItem.id);
+        const tenant = tenantData.find((t) => t.id === item?.id_tenant);
+        console.log(item);
+        return tenant?.name || "";
+    };
+}
\ No newline at end of file
diff --git a/frontend/src/components/ProductCard.tsx b/frontend/src/components/ProductCard.tsx
index 683a181b1e31847eb6726296d43c409163155218..2ae3fb7ae2d9bfbd1b06f7316b6ccb5ba8f4f768 100644
--- a/frontend/src/components/ProductCard.tsx
+++ b/frontend/src/components/ProductCard.tsx
@@ -1,12 +1,8 @@
 import { useEffect, useState } from 'react'
 import { useShoppingCart } from '../contexts/ShoppingCartContext';
 import { useLocalStorage } from '../hooks/useLocalStorage';
-import Axios from 'axios';
-
-type cartItem = {
-    id: number;
-    quantity: number;
-}
+import ShoppingCart from '../pages/ShoppingCart';
+import Axios from "axios";
 
 type ProductCardProps = {
     id: number;
@@ -18,111 +14,64 @@ type ProductCardProps = {
 }
 
 interface Product {
-    id : number,
-    image: string,
-    name: string,
-    description: string,
-    price: number
-    id_tenant: number
-}
-
-interface Tenant {
-    id : number,
-    image: string,
-    name: string
+    id: number;
+    id_tenant: number;
 }
 
 export default function ProductCard({ data }: { data: ProductCardProps[] }) {
     const { getItemQuantity, increaseItemQuantity, removeItem, cartItems } = useShoppingCart();
-    const [tenantData, setTenantData] = useLocalStorage<Tenant[]>(`tenant`, []);
-
-    const getTenantData = async () => {
-        const tenantResponse = await Axios.get(`http://localhost:8000/tenants`);
-
-        const tenantData = tenantResponse.data.data;
-
-        const result = tenantData.map((tenant: Tenant) => {
-            return {
-                id: tenant.id,
-                image: tenant.image,
-                name: tenant.name
-            }
-        });
 
-        setTenantData(result);
-
-    };
-
-    useEffect(() => {
-        getTenantData();
-    }, []);
-
-    console.log(tenantData);
-
-    const [productData, setProductData] = useLocalStorage<Product[]>(`product`, []);
-
-    const getProductData = async () => {
-        const productResponse = await Axios.get("http://localhost:8000/products");
+    const productlist = data.map(({ id, image, name, description, price, id_tenant }) => {
+        const [isAdded, setIsAdded] = useLocalStorage<boolean>(`product-${id}`, false);
 
-        const productData = productResponse.data.data;
+        // find cartItem id_tenant
 
-        const result = productData.map((product: Product) => {
-            return {
-                id: product.id,
-                image: product.image,
-                name: product.name,
-                description: product.description,
-                price: product.price,
-                id_tenant: product.id_tenant
-            }
-        });
+        const [productData, setProductData] = useState<Product[]>([]);
 
-        setProductData(result);
+        const getProductData = async () => {
+            const productResponse = await Axios.get("http://localhost:8000/products");
 
-    };
+            const productData = productResponse.data.data;
 
-    useEffect(() => {
-        getProductData();
-    }, []);
+            const result = productData.map((product: Product) => {
+                return {
+                    id: product.id,
+                    id_tenant: product.id_tenant
+                }
+            });
 
-    console.log(productData);
+            setProductData(result);
 
-    const getTenantId = (cartItem: cartItem) => {
-        const item = productData.find((i) => i.id === cartItem.id);
-        const tenant = tenantData.find((t) => t.id === item?.id_tenant);
-        console.log(tenant);
-        return tenant?.id || 0;
-    }
+        };
 
-    const [productStates, setProductStates] = useLocalStorage<{ [key: number]: { isAdded: boolean, quantity: number } }>(`product`, {});
-    const getQuantityAndIsAdded = (id: number) => {
-        const quantity = getItemQuantity(id);
-        const isAdded = productStates[id] ? productStates[id].isAdded : quantity > 0;
-        return { quantity, isAdded };
-    };
+        useEffect(() => {
+            getProductData();
+        }, []);
 
-    const handleClick = (id: number, id_tenant: number) => {
-        const { quantity } = getQuantityAndIsAdded(id);
+        console.log(productData);
 
+        useEffect(() => {
+            const quantity = getItemQuantity(id);
+            setIsAdded(quantity > 0);
+        }, [getItemQuantity, id, setIsAdded]);
 
-        if (cartItems.length > 0 && getTenantId(cartItems[0]) !== id_tenant) {
-            alert("You can only order from one tenant at a time!");
-        } else {
-            if (quantity > 0) {
+        const handleClick = () => {
+            if (cartItems.length > 0) {
+                const cartItem = cartItems[0];
+                const cartTenantId = cartItem && productData.find((product: Product) => product.id === cartItem.id)?.id_tenant;
+                if (cartTenantId !== id_tenant) {
+                    alert("You can't add items from different tenants to the cart!");
+                    return;
+                }
+            }
+            if (isAdded) {
                 removeItem(id);
             } else {
                 increaseItemQuantity(id);
             }
+            setIsAdded(!isAdded);
+        };
 
-            setProductStates(prevState => ({
-                ...prevState,
-                [id]: { ...prevState[id], isAdded: !prevState[id]?.isAdded, quantity: getItemQuantity(id) }
-            }));
-        }
-    };
-
-    const productlist = data.map(({ id, image, name, description, price, id_tenant }) => {
-        const { isAdded } = getQuantityAndIsAdded(id);
         const priceidr = price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
 
         return (
@@ -142,7 +91,7 @@ export default function ProductCard({ data }: { data: ProductCardProps[] }) {
                             <button
                                 type="button"
                                 className={`${isAdded ? 'text-mealshub-red hover:text-white border-2 border-mealshub-red hover:bg-mealshub-red' : 'text-white bg-mealshub-red hover:text-mealshub-red border-2 border-mealshub-red hover:bg-white'} font-bold text-lg rounded-full text-sm px-5 py-2.5 text-center`}
-                                onClick={() => handleClick(id, id_tenant)}
+                                onClick={handleClick}
                             >
                                 {isAdded ? "Added" : "Add to Cart"}
                             </button>