diff --git a/framework/vendure/schema.d.ts b/framework/vendure/schema.d.ts
index 175ba825f..ae4a5d64b 100644
--- a/framework/vendure/schema.d.ts
+++ b/framework/vendure/schema.d.ts
@@ -3247,9 +3247,9 @@ export type ActiveCustomerQuery = { __typename?: 'Query' } & {
   activeCustomer?: Maybe<
     { __typename?: 'Customer' } & Pick<
       Customer,
-      FavoriteList,
-      'id' | 'firstName' | 'lastName' | 'emailAddress' | 'favorites'
-    >,
+      Favorite,
+      'id' | 'firstName' | 'lastName' | 'emailAddress' | 'addresses' | 'phoneNumber'|  'orders'
+    >
   >
 }
 
diff --git a/framework/vendure/utils/queries/active-customer-query.ts b/framework/vendure/utils/queries/active-customer-query.ts
index 014ea130e..3c0664102 100644
--- a/framework/vendure/utils/queries/active-customer-query.ts
+++ b/framework/vendure/utils/queries/active-customer-query.ts
@@ -1,17 +1,24 @@
 export const activeCustomerQuery = /* GraphQL */ `
-  query activeCustomer {
-    activeCustomer {
-      id
-      firstName
-      lastName
-      emailAddress
-      favorites{
-        items{
-          product{
-            id
-          }
+query activeCustomer {
+  activeCustomer {
+    id
+    firstName
+    lastName
+    emailAddress
+    favorites{
+      items{
+        product{
+          id
         }
       }
     }
+    phoneNumber
+    addresses{
+      streetLine1
+      city
+      province
+      postalCode
+    } 
   }
+}
 `
diff --git a/framework/vendure/utils/queries/get-user-order-query.ts b/framework/vendure/utils/queries/get-user-order-query.ts
new file mode 100644
index 000000000..adf75365c
--- /dev/null
+++ b/framework/vendure/utils/queries/get-user-order-query.ts
@@ -0,0 +1,19 @@
+export const getUserOrderQuery = /* GraphQL */ `
+    query activeCustomer {
+        activeCustomer {
+            orders{
+                items{
+                    lines{
+                        productVariant{
+                            name
+                        }
+                    quantity
+                    }
+                total
+                state
+                code
+                }
+            }
+        }
+  }
+`
diff --git a/src/components/hooks/account/index.ts b/src/components/hooks/account/index.ts
index 73fbcc66b..d58cc6b3d 100644
--- a/src/components/hooks/account/index.ts
+++ b/src/components/hooks/account/index.ts
@@ -1 +1,4 @@
-export { default as useGetFavoriteProduct } from './useGetFavoriteProduct'
\ No newline at end of file
+export { default as useGetFavoriteProduct } from './useGetFavoriteProduct'
+export { default as useGetUserOrder } from './useGetUserOrder';
+export { default as useEditUserInfo } from './useEditUserInfo'
+export { default as useEditCustomerAddress } from './useEditCustomerAddress'
diff --git a/src/components/hooks/account/useGetFavoriteProduct.tsx b/src/components/hooks/account/useGetFavoriteProduct.tsx
index 157bc91a3..3aeab0f57 100644
--- a/src/components/hooks/account/useGetFavoriteProduct.tsx
+++ b/src/components/hooks/account/useGetFavoriteProduct.tsx
@@ -4,9 +4,8 @@ import { getFavoriteProductQuery } from '@framework/utils/queries/get-favorite-p
 import gglFetcher from 'src/utils/gglFetcher'
 import useSWR from 'swr'
 
-const useGetFavoriteProduct = (options:QueryFavorite) => {
+const useGetFavoriteProduct = (options?:QueryFavorite) => {
   const { data, ...rest } = useSWR<ActiveCustomerQuery>([getFavoriteProductQuery, options], gglFetcher)
-  // console.log( data?.activeCustomer?.favorites?.items);
   return {
       itemWishlist: data?.activeCustomer?.favorites?.items?.map((item:Favorite) => normalizeFavoriteProductResult(item)), 
       totalItems: data?.activeCustomer?.favorites?.totalItems,
diff --git a/src/components/hooks/account/useGetUserOrder.tsx b/src/components/hooks/account/useGetUserOrder.tsx
new file mode 100644
index 000000000..26e945abf
--- /dev/null
+++ b/src/components/hooks/account/useGetUserOrder.tsx
@@ -0,0 +1,20 @@
+import { ActiveCustomerQuery, Order } from '@framework/schema'
+import { getUserOrderQuery } from '@framework/utils/queries/get-user-order-query'
+import gglFetcher from 'src/utils/gglFetcher'
+import useSWR from 'swr'
+
+const useGetUserOrder = () => {
+  const { data, ...rest } = useSWR<ActiveCustomerQuery>([getUserOrderQuery], gglFetcher)
+  
+  const addingItem = data?.activeCustomer?.orders.items.filter((val:Order) =>val.state == 'AddingItems');
+  const arrangingPayment = data?.activeCustomer?.orders.items.filter((val:Order) =>val.state == 'ArrangingPayment');
+  const cancelled = data?.activeCustomer?.orders.items.filter((val:Order) =>val.state == "Cancelled");
+  return { 
+    addingItem: addingItem,
+    arrangingPayment: arrangingPayment,
+    cancelled: cancelled,
+    ...rest 
+  }
+}
+
+export default useGetUserOrder
diff --git a/src/components/hooks/auth/useActiveCustomer.tsx b/src/components/hooks/auth/useActiveCustomer.tsx
index 6f841c523..30649895a 100644
--- a/src/components/hooks/auth/useActiveCustomer.tsx
+++ b/src/components/hooks/auth/useActiveCustomer.tsx
@@ -5,7 +5,6 @@ import useSWR from 'swr'
 
 const useActiveCustomer = () => {
   const { data, ...rest } = useSWR<ActiveCustomerQuery>([activeCustomerQuery], gglFetcher)
-
   return {
       customer: data?.activeCustomer,
       userInfo:{
@@ -15,7 +14,6 @@ const useActiveCustomer = () => {
         phoneNumber: data?.activeCustomer?.phoneNumber,
         address: data?.activeCustomer?.addresses?.[0]
       },
-      itemWishlist:data?.activeCustomer?.favorites?.items,
       wishlistId: data?.activeCustomer?.favorites?.items.map((val:Favorite)=>val.product.id),
       ...rest 
   }
diff --git a/src/components/hooks/index.ts b/src/components/hooks/index.ts
index d01d505ea..2d4c2da24 100644
--- a/src/components/hooks/index.ts
+++ b/src/components/hooks/index.ts
@@ -1,4 +1,2 @@
 export { default as useModalCommon } from './useModalCommon'
-export { default as useEditUserInfo } from './account/useEditUserInfo'
-export { default as useEditCustomerAddress } from './account/useEditCustomerAddress'
 
diff --git a/src/components/hooks/product/useToggleProductWishlist.tsx b/src/components/hooks/product/useToggleProductWishlist.tsx
index 452707f46..eda975272 100644
--- a/src/components/hooks/product/useToggleProductWishlist.tsx
+++ b/src/components/hooks/product/useToggleProductWishlist.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import useActiveCustomer from '../auth/useActiveCustomer'
+import useGetFavoriteProduct from '../account/useGetFavoriteProduct'
 import { FavoriteList } from '@framework/schema'
 import fetcher from 'src/utils/fetcher'
 import { CommonError } from 'src/domains/interfaces/CommonError'
@@ -12,7 +12,7 @@ interface Props {
 const useToggleProductWishlist = () => {
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<Error | null>(null)
-  const { mutate } = useActiveCustomer()
+  const { mutate } = useGetFavoriteProduct();
 
   const onToggleProductWishlist = (
     { productId }:Props ,
@@ -29,7 +29,7 @@ const useToggleProductWishlist = () => {
       .then((data) => {
         mutate()
         fCallBack(true)
-        return data
+        return data 
       })
       .catch((error) => {
         setError(error)
diff --git a/src/components/modules/account/AccountPage/AccountPage.tsx b/src/components/modules/account/AccountPage/AccountPage.tsx
index fa6abe52e..08ed858ea 100644
--- a/src/components/modules/account/AccountPage/AccountPage.tsx
+++ b/src/components/modules/account/AccountPage/AccountPage.tsx
@@ -1,13 +1,11 @@
 import { QueryFavorite } from "@framework/schema"
-import commerce from '@lib/api/commerce'
-import { GetStaticPropsContext } from 'next'
 import { useRouter } from "next/router"
 import React, { useEffect, useState } from "react"
 import { HeadingCommon, TabPane } from "src/components/common"
-import { useGetFavoriteProduct } from 'src/components/hooks/account'
+import { useGetFavoriteProduct, useGetUserOrder } from 'src/components/hooks/account'
+import { useActiveCustomer } from 'src/components/hooks/auth'
 import { ACCOUNT_TAB, DEFAULT_PAGE_SIZE, QUERY_KEY } from "src/utils/constanst.utils"
 import { getPageFromQuery } from 'src/utils/funtion.utils'
-import { PromiseWithKey } from 'src/utils/types.utils'
 import AccountNavigation from '../AccountNavigation/AccountNavigation'
 import s from './AccountPage.module.scss'
 import AccountInfomation from "./components/AccountInfomation/AccountInfomation"
@@ -28,6 +26,8 @@ const waiting = [
     }
 ]
 
+
+
 const delivering = [
     {
         id: "NO 123456",
@@ -81,7 +81,9 @@ const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => {
     const router = useRouter()
 
     const {userInfo} = useActiveCustomer();
- 
+    
+    const {addingItem,arrangingPayment,cancelled} = useGetUserOrder();
+
 
     const [activeTab, setActiveTab] = useState(defaultActiveContent==="info" ? 0 : defaultActiveContent==="orders" ? 1 : 2)
     const [modalVisible, setModalVisible] = useState(false);
@@ -125,7 +127,7 @@ const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => {
                         <AccountInfomation account={userInfo} onClick={showModal}  />
                     </TabPane>
                     <TabPane tabName="Your Orders"> 
-                        <OrderInfomation waiting={waiting} delivering={delivering} delivered={delivered} />
+                        <OrderInfomation addingItem={addingItem} arrangingPayment={arrangingPayment} cancelled={cancelled} />
                     </TabPane>
                     <TabPane tabName="Favourite"> 
                         <FavouriteProducts products={itemWishlist} totalItems={totalItems} />
diff --git a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx
index 462b46069..1fea67bdc 100644
--- a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx
+++ b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx
@@ -8,7 +8,7 @@ import {
   } from 'src/components/common'
 import * as Yup from 'yup'
 import { Form, Formik } from 'formik'
-import { useEditCustomerAddress, useEditUserInfo } from "src/components/hooks";
+import { useEditCustomerAddress, useEditUserInfo } from "src/components/hooks/account";
 import { LANGUAGE } from 'src/utils/language.utils'
 import { useMessage } from 'src/components/contexts'
 interface EditInfoModalProps {
diff --git a/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx
index 211cebe3b..9e825696e 100644
--- a/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx
+++ b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx
@@ -4,50 +4,50 @@ import s from './OrderInformation.module.scss'
 import { TabCommon } from '../../../../../common'
 import TabPane from 'src/components/common/TabCommon/components/TabPane/TabPane'
 import DeliveryItem from '../../../DeliveryItem/DeliveryItem'
+import { Order } from "@framework/schema"
 
 
 interface OrderInformationProps {
-    waiting: {id: string, products: string[], totalPrice: number}[],
-    delivering: {id: string, products: string[], totalPrice: number}[],
-    delivered: {id: string, products: string[], totalPrice: number}[],
+    addingItem?: Order[],
+    arrangingPayment?: Order[],
+    cancelled?: Order[],
 }
 
-const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationProps) => {
-
+const OrderInformation = ({ addingItem, arrangingPayment, cancelled} : OrderInformationProps) => {
     return (
         <section className={s.orderInformation}>
             <div className={s.title}>Order Information</div>
 
             <div className={s.tabs}>
                 <TabCommon>
-                    <TabPane tabName={"Wait for Comfirmation"} >
+                    <TabPane tabName={"Adding Item"} >
                         <div className={s.blank}></div>
                         {
-                            waiting.map((order, i) => {
+                            addingItem?.map((order, i) => {
                                 return (
-                                    <DeliveryItem key={order.id} id={order.id} status="waiting" products={order.products} totalPrice={order.totalPrice} />
+                                    <DeliveryItem key={order.code} id={order.code} status="waiting" products={order.lines} totalPrice={order.total} />
                                 )
                             }) 
                         }
                     </TabPane>
 
-                    <TabPane tabName={"Delivering"}>
+                    <TabPane tabName={"Arranging Payment"}>
                         <div className={s.blank}></div>
                         {
-                            delivering.map((order, i) => {
+                            arrangingPayment?.map((order, i) => {
                                 return (
-                                    <DeliveryItem key={order.id} id={order.id} status="delivering" products={order.products} totalPrice={order.totalPrice} />
+                                    <DeliveryItem key={order.id} id={order.id} status="delivering" products={order.lines} totalPrice={order.total} />
                                 )
                             }) 
                         }
                     </TabPane>
 
-                    <TabPane tabName={"Delivered"}>
+                    <TabPane tabName={"Cancelled"}>
                         <div className={s.blank}></div>
                         {
-                            delivered.map((order, i) => {
+                            cancelled?.map((order, i) => {
                                 return (
-                                    <DeliveryItem key={order.id} id={order.id} status="delivered" products={order.products} totalPrice={order.totalPrice} />
+                                    <DeliveryItem key={order.id} id={order.id} status="delivered" products={order.lines} totalPrice={order.total} />
                                 )
                             }) 
                         }
diff --git a/src/components/modules/account/DeliveryItem/DeliveryItem.tsx b/src/components/modules/account/DeliveryItem/DeliveryItem.tsx
index b42a0f91e..71432264a 100644
--- a/src/components/modules/account/DeliveryItem/DeliveryItem.tsx
+++ b/src/components/modules/account/DeliveryItem/DeliveryItem.tsx
@@ -5,12 +5,13 @@ import IdAndStatus from './components/IdAndStatus/IdAndStatus'
 import Products from './components/Products/Products'
 import TotalPrice from './components/TotalPrice/TotalPrice'
 import ReOrder from './components/ReOrder/ReOrder'
+import { OrderLine } from "@framework/schema"
 
 
 interface DeliveryItemProps {
     id: string;
     status: "waiting" | "delivering" | "delivered";
-    products: string[];
+    products?: OrderLine[];
     totalPrice: number;
 }
 
diff --git a/src/components/modules/account/DeliveryItem/components/Products/Products.tsx b/src/components/modules/account/DeliveryItem/components/Products/Products.tsx
index fdbba2c73..0e054a171 100644
--- a/src/components/modules/account/DeliveryItem/components/Products/Products.tsx
+++ b/src/components/modules/account/DeliveryItem/components/Products/Products.tsx
@@ -1,19 +1,19 @@
+import { OrderLine } from "@framework/schema";
 import React from "react"
 import s from './Products.module.scss'
 
 interface ProductsProps {
-    products: string[];
+    products?: OrderLine[];
 }
 
 const Products = ({ products } : ProductsProps) => {
-
-    function toString(products:string[]): string {
+    function toString(products?:OrderLine[]): string {
         let strProducts = "";
-        products.map((prod, i) => {
+        products?.map((prod, i) => {
             if (i === 0) {
-                strProducts += prod;
+                strProducts += prod.productVariant?.name;
             } else {
-                strProducts += `, ${prod}`
+                strProducts += `, ${prod.productVariant?.name}`
             }
         });
         return strProducts;