diff --git a/framework/vendure/utils/queries/active-customer-query.ts b/framework/vendure/utils/queries/active-customer-query.ts
index 65b280743..014ea130e 100644
--- a/framework/vendure/utils/queries/active-customer-query.ts
+++ b/framework/vendure/utils/queries/active-customer-query.ts
@@ -5,6 +5,13 @@ export const activeCustomerQuery = /* GraphQL */ `
       firstName
       lastName
       emailAddress
+      favorites{
+        items{
+          product{
+            id
+          }
+        }
+      }
     }
   }
 `
diff --git a/next-env.d.ts b/next-env.d.ts
index 9bc3dd46b..c6643fda1 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,6 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/src/components/common/ItemWishList/ItemWishList.tsx b/src/components/common/ItemWishList/ItemWishList.tsx
index 74d0b3b04..f8be07cd4 100644
--- a/src/components/common/ItemWishList/ItemWishList.tsx
+++ b/src/components/common/ItemWishList/ItemWishList.tsx
@@ -4,16 +4,22 @@ import React, { memo } from 'react'
 import s from './ItemWishList.module.scss'
 
 interface Props {
+    id:string,
     isActive?: boolean,
-    onChange?: () => void
+    onChange?: () => string
 }
 
-const ItemWishList = memo(({isActive=false, onChange}:Props) => {
+const ItemWishList = memo(({id,isActive=false, onChange}:Props) => {
+    // function toggleFavorite(id:string):string|undefined{
+    //     // alert(id);
+    //     return id;
+    // }
     return(
         <div className={classNames({
             [s.heartToggle]: true, 
             [s.isToggleOn]: isActive
         })}
+        // onClick={toggleFavorite(id)}
         onChange={onChange}
         >
             <IconHeart />
diff --git a/src/components/common/ProductCard/ProductCard.tsx b/src/components/common/ProductCard/ProductCard.tsx
index 4761aac92..50df7695f 100644
--- a/src/components/common/ProductCard/ProductCard.tsx
+++ b/src/components/common/ProductCard/ProductCard.tsx
@@ -17,6 +17,7 @@ export interface ProductCardProps extends ProductCard {
 }
 
 const ProductCardComponent = ({
+  id,
   collection,
   name,
   slug,
@@ -34,6 +35,7 @@ const ProductCardComponent = ({
     </div>
 
   }
+ 
   return (
     <div className={s.productCardWarpper}>
       <div className={s.cardTop}>
@@ -63,7 +65,7 @@ const ProductCardComponent = ({
         <div className={s.cardMidBot}>
           <div className={s.productPrice}>{price} {currencyCode}</div>
           <div className={s.wishList}>
-            <ItemWishList />
+            <ItemWishList id={id}/>
           </div>
         </div>
       </div>
diff --git a/src/components/common/ProductList/ProductList.tsx b/src/components/common/ProductList/ProductList.tsx
index c901b4d46..5c3d9058a 100644
--- a/src/components/common/ProductList/ProductList.tsx
+++ b/src/components/common/ProductList/ProductList.tsx
@@ -33,6 +33,8 @@ const ProductList = ({ data, total = data.length, defaultCurrentPage, onPageChan
             <div className={s.list}>
                 {
                     data.map((product, index) => {
+                        console.log(product);
+                        
                         return <ProductCard {...product} key={index} />
                     })
                 }