diff --git a/framework/vendure/schema.d.ts b/framework/vendure/schema.d.ts
index 705e340c2..d3ca320f0 100644
--- a/framework/vendure/schema.d.ts
+++ b/framework/vendure/schema.d.ts
@@ -3203,6 +3203,16 @@ export type ActiveCustomerQuery = { __typename?: 'Query' } & {
     >,
   >
 }
+
+export type QueryFavorite = {
+  options: FavoriteListOptions
+}
+
+export type FavoriteListOptions = {
+  skip?: Maybe<Scalars['Int']>
+  take?: Maybe<Scalars['Int']>
+}
+
 export type FavoriteList = PaginatedList & {
   items: [Favorite!]!
   totalItems: Int!
@@ -3216,6 +3226,12 @@ type Favorite = Node &  {
   customer: Customer!
 }
 
+
+
+type FavouriteOption =  Customer & {
+  favorites(options: FavoriteListOptions): FavoriteList!
+}
+
 export type GetAllProductPathsQueryVariables = Exact<{
   first?: Maybe<Scalars['Int']>
 }>
diff --git a/framework/vendure/utils/queries/active-customer-query.ts b/framework/vendure/utils/queries/active-customer-query.ts
index 7384dde78..014ea130e 100644
--- a/framework/vendure/utils/queries/active-customer-query.ts
+++ b/framework/vendure/utils/queries/active-customer-query.ts
@@ -1,5 +1,3 @@
-import { searchResultFragment } from '../fragments/search-result-fragment'
-
 export const activeCustomerQuery = /* GraphQL */ `
   query activeCustomer {
     activeCustomer {
@@ -11,15 +9,6 @@ export const activeCustomerQuery = /* GraphQL */ `
         items{
           product{
             id
-            name
-            slug
-            assets{
-              source
-              preview
-            }
-            variants{
-              price
-            }
           }
         }
       }
diff --git a/framework/vendure/utils/queries/get-favorite-product-query.ts b/framework/vendure/utils/queries/get-favorite-product-query.ts
new file mode 100644
index 000000000..aff1a2bf5
--- /dev/null
+++ b/framework/vendure/utils/queries/get-favorite-product-query.ts
@@ -0,0 +1,27 @@
+export const getFavoriteProductQuery = /* GraphQL */ `
+query activeCustomer($options: FavoriteListOptions) {
+  activeCustomer {
+    id
+    firstName
+    lastName
+    emailAddress
+    favorites(options: $options){
+      items{
+        product{
+          id
+          name
+          slug
+          assets{
+            source
+            preview
+          }
+          variants{
+            price
+          }
+        }
+      }
+      totalItems
+    }
+  }
+}
+`
diff --git a/src/components/common/ProductList/ProductList.tsx b/src/components/common/ProductList/ProductList.tsx
index de9cb94d5..111173fa9 100644
--- a/src/components/common/ProductList/ProductList.tsx
+++ b/src/components/common/ProductList/ProductList.tsx
@@ -14,10 +14,10 @@ interface ProductListProps {
     onPageChange?: (page: number) => void
 }
 
-const ProductList = ({ data, total = data.length, defaultCurrentPage, onPageChange }: ProductListProps) => {
+const ProductList = ({ data, total = data?.length, defaultCurrentPage, onPageChange }: ProductListProps) => {
     const router = useRouter()
     const {wishlistId } = useActiveCustomer();
-
+   
     const handlePageChange = (page: number) => {
         onPageChange && onPageChange(page)
     }
@@ -34,20 +34,20 @@ const ProductList = ({ data, total = data.length, defaultCurrentPage, onPageChan
         <div className={s.wrapper}>
             <div className={s.list}>
                 {
-                    data.map((product, index) => {
+                    data?.map((product, index) => {
                         let activeWishlist = wishlistId?.findIndex((val:string) => val == product.id) !== -1;
                         return <ProductCard activeWishlist={activeWishlist} {...product} key={index} />
                     })
                 }
                 {
-                    data.length === 0 && <div className={s.empty}>
+                    data?.length === 0 && <div className={s.empty}>
                         <EmptyCommon />
                         <ButtonCommon onClick={handleShowAllProduct}>Show all products</ButtonCommon>
                     </div>
                 }
             </div>
-            <div className={classNames(s.pagination, { [s.hide]: data.length === 0 })}>
-                <PaginationCommon defaultCurrent={defaultCurrentPage} total={total} pageSize={DEFAULT_PAGE_SIZE} onChange={handlePageChange} />
+            <div className={classNames(s.pagination, { [s.hide]: data?.length === 0 })}>
+                <PaginationCommon defaultCurrent={defaultCurrentPage} total={total ?? 0} pageSize={DEFAULT_PAGE_SIZE} onChange={handlePageChange} />
             </div>
         </div>
     )
diff --git a/src/components/hooks/account/index.ts b/src/components/hooks/account/index.ts
new file mode 100644
index 000000000..73fbcc66b
--- /dev/null
+++ b/src/components/hooks/account/index.ts
@@ -0,0 +1 @@
+export { default as useGetFavoriteProduct } from './useGetFavoriteProduct'
\ No newline at end of file
diff --git a/src/components/hooks/account/useGetFavoriteProduct.tsx b/src/components/hooks/account/useGetFavoriteProduct.tsx
new file mode 100644
index 000000000..4cc94ed5e
--- /dev/null
+++ b/src/components/hooks/account/useGetFavoriteProduct.tsx
@@ -0,0 +1,25 @@
+import { ActiveCustomerQuery,QueryFavorite,Favorite } from '@framework/schema'
+import { getFavoriteProductQuery } from '@framework/utils/queries/get-favorite-product-query'
+import gglFetcher from 'src/utils/gglFetcher'
+import useSWR from 'swr'
+
+const useGetFavoriteProduct = (options:QueryFavorite) => {
+  const { data, ...rest } = useSWR<ActiveCustomerQuery>([getFavoriteProductQuery, options], gglFetcher)
+  console.log(options);
+  return {
+      itemWishlist:
+        data?.activeCustomer?.favorites?.items?.map((val:Favorite)=>({
+          id: val.product?.id,
+          name:val.product?.name,
+          slug:val.product?.slug,
+          price:val.product?.variants?.[0].price,
+          imageSrc: val.product?.assets?.[0].preview,
+          currencyCode: val.product?.variants?.[0].currencyCode
+        })
+      ),
+      totalItems: data?.activeCustomer?.favorites?.totalItems,
+      ...rest 
+  }
+}
+
+export default useGetFavoriteProduct
diff --git a/src/components/hooks/auth/useActiveCustomer.tsx b/src/components/hooks/auth/useActiveCustomer.tsx
index a3d8ce34a..6f841c523 100644
--- a/src/components/hooks/auth/useActiveCustomer.tsx
+++ b/src/components/hooks/auth/useActiveCustomer.tsx
@@ -5,7 +5,7 @@ import useSWR from 'swr'
 
 const useActiveCustomer = () => {
   const { data, ...rest } = useSWR<ActiveCustomerQuery>([activeCustomerQuery], gglFetcher)
-  console.log(data);
+
   return {
       customer: data?.activeCustomer,
       userInfo:{
diff --git a/src/components/modules/account/AccountPage/AccountPage.module.scss b/src/components/modules/account/AccountPage/AccountPage.module.scss
index 89beebd86..240c369a8 100644
--- a/src/components/modules/account/AccountPage/AccountPage.module.scss
+++ b/src/components/modules/account/AccountPage/AccountPage.module.scss
@@ -4,7 +4,17 @@
     @apply bg-background-gray;
     padding: 3.2rem 2rem;
     min-height: 70rem;
-
+    @screen xl {
+        section{
+            div{
+                div{
+                    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
+                }
+            }
+        }
+    
+    }
+  
     @screen md {
         padding-left: 2.8rem;
         padding-right: 2.8rem;
@@ -28,4 +38,5 @@
             margin-bottom: 3.8rem;
         }
     }
+
 }
\ No newline at end of file
diff --git a/src/components/modules/account/AccountPage/AccountPage.tsx b/src/components/modules/account/AccountPage/AccountPage.tsx
index 5a83135cb..d1fe6625e 100644
--- a/src/components/modules/account/AccountPage/AccountPage.tsx
+++ b/src/components/modules/account/AccountPage/AccountPage.tsx
@@ -8,11 +8,13 @@ import AccountInfomation from "./components/AccountInfomation/AccountInfomation"
 import FavouriteProducts from "./components/FavouriteProducts/FavouriteProducts"
 import OrderInfomation from './components/OrderInformation/OrderInformation'
 import EditInfoModal from './components/EditInfoModal/EditInfoModal'
-
 import { PRODUCT_CART_DATA_TEST } from 'src/utils/demo-data';
-import { ACCOUNT_TAB, QUERY_KEY } from "src/utils/constanst.utils"
+import { ACCOUNT_TAB, QUERY_KEY,DEFAULT_PAGE_SIZE } from "src/utils/constanst.utils"
 import { useRouter } from "next/router"
 import { useActiveCustomer } from 'src/components/hooks/auth'
+import { useGetFavoriteProduct } from 'src/components/hooks/account'
+import { QueryFavorite } from "@framework/schema"
+import {  getPageFromQuery} from 'src/utils/funtion.utils'
 
 const waiting = [
     {
@@ -79,13 +81,30 @@ const getTabIndex = (tab?: string): number => {
     }
 }
 
+
+const DEFAULT_FAVORITE_ARGS = {
+    options:{
+        skip:1, take:DEFAULT_PAGE_SIZE
+    }
+}
+
 const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => {
     const router = useRouter()
     const [activeTab, setActiveTab] = useState(defaultActiveContent==="info" ? 0 : defaultActiveContent==="orders" ? 1 : 2)
     const [modalVisible, setModalVisible] = useState(false);
-    // const { itemWishlist } = useActiveCustomer();
-    // console.log(itemWishlist)
+    const [optionQueryFavorite, setoptionQueryFavorite] = useState<QueryFavorite>(DEFAULT_FAVORITE_ARGS)
+    const { itemWishlist,totalItems }= useGetFavoriteProduct(optionQueryFavorite);
+    console.log(itemWishlist,totalItems)        
 
+    // skip
+    useEffect(() => {
+        const query = { ...DEFAULT_FAVORITE_ARGS } as QueryFavorite;
+        const page = getPageFromQuery(router.query[QUERY_KEY.PAGE] as string);
+        query.options.skip = page * DEFAULT_PAGE_SIZE;
+        setoptionQueryFavorite(query);
+    },[router.query])
+
+       
     useEffect(() => {
         const query = router.query[QUERY_KEY.TAB] as string
         const index = getTabIndex(query)
@@ -115,7 +134,7 @@ const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => {
                         <OrderInfomation waiting={waiting} delivering={delivering} delivered={delivered} />
                     </TabPane>
                     <TabPane tabName="Favourite"> 
-                        <FavouriteProducts products={PRODUCT_CART_DATA_TEST}  />
+                        <FavouriteProducts products={itemWishlist} totalItems={totalItems} />
                     </TabPane>
                 </AccountNavigation>
             </section>
diff --git a/src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.tsx b/src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.tsx
index f88605242..f82266c81 100644
--- a/src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.tsx
+++ b/src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.tsx
@@ -1,18 +1,34 @@
-import React from "react"
-import s from './FavouriteProducts.module.scss'
-import {ProductList} from '../../../../../common'
+import { useRouter } from 'next/router'
+import React, { useState } from "react"
+import { QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
+import { ProductList } from '../../../../../common'
 import { ProductCardProps } from '../../../../../common/ProductCard/ProductCard'
-
-
+import s from './FavouriteProducts.module.scss'
 interface FavouriteProductsProps {
-    products: ProductCardProps[];
+    products: ProductCardProps[],
+    totalItems:number
 }
 
-const FavouriteProducts = ({ products } : FavouriteProductsProps) => {
+const FavouriteProducts = ({ products,totalItems } : FavouriteProductsProps) => {
+    const router = useRouter()
+    const [currentPage, setCurrentPage] = useState(0);
+    
+    function onPageChange(page:number){
+        setCurrentPage(page)
+        router.push({
+            pathname: ROUTE.ACCOUNT,
+            query: {
+              ...router.query,
+              [QUERY_KEY.PAGE]: page
+            }
+        },
+        undefined, { shallow: true }
+        )
+    }
 
     return (
         <section className={s.favouriteProducts}>
-            <ProductList data={products} />
+            <ProductList data={products} total={totalItems} onPageChange={onPageChange}/>
         </section>
     )
 }