diff --git a/src/components/hooks/useGetActiveOrder.tsx b/src/components/hooks/useGetActiveOrder.tsx
new file mode 100644
index 000000000..818ca9e9a
--- /dev/null
+++ b/src/components/hooks/useGetActiveOrder.tsx
@@ -0,0 +1,20 @@
+import { ActiveOrderQuery } from '@framework/schema'
+import { cartFragment } from '@framework/utils/fragments/cart-fragment'
+import { gql } from 'graphql-request'
+import gglFetcher from 'src/utils/gglFetcher'
+import useSWR from 'swr'
+const query = gql`
+  query activeOrder {
+    activeOrder {
+			...Cart
+    }
+  }
+	${ cartFragment }
+`
+
+const useGetActiveOrder = () => {
+  const { data, ...rest } = useSWR<ActiveOrderQuery>([query], gglFetcher)
+  return { order: data?.activeOrder, ...rest }
+}
+
+export default useGetActiveOrder
diff --git a/src/components/hooks/useGetProductListByCollection.tsx b/src/components/hooks/useGetProductListByCollection.tsx
new file mode 100644
index 000000000..49ec4c81b
--- /dev/null
+++ b/src/components/hooks/useGetProductListByCollection.tsx
@@ -0,0 +1,47 @@
+// import { gql } from 'graphql-request'
+import { useMemo, useState } from 'react'
+// import useActiveCustomer from './useActiveCustomer'
+import { CommonError } from 'src/domains/interfaces/CommonError'
+import rawFetcher from 'src/utils/rawFetcher'
+import {
+  CollectionList,
+  CollectionListOptions,
+  GetCollectionsQuery,
+  GetCollectionsQueryVariables,
+  LoginMutation,
+} from '@framework/schema'
+import { gql } from 'graphql-request'
+
+import { getCollectionsQuery } from '@framework/utils/queries/get-collections-query'
+import useSWR from 'swr'
+import gglFetcher from 'src/utils/gglFetcher'
+
+const query = gql`
+  query getCollections($option: CollectionListOptions) {
+    collections(options:$option) {
+      items {
+        id
+        name
+        description
+        slug
+        productVariants {
+          totalItems
+        }
+        parent {
+          id
+        }
+        children {
+          id
+        }
+      }
+    }
+  }
+`
+
+const useGetProductListByCollection = (options: any) => {
+
+  const { data, ...rest } = useSWR<GetCollectionsQuery>([query, options], gglFetcher)
+  return { collections: data?.collections, ...rest }
+}
+
+export default useGetProductListByCollection
diff --git a/src/components/modules/home/HomeBanner/HomeBanner.tsx b/src/components/modules/home/HomeBanner/HomeBanner.tsx
index ebb9af6bf..e5e678893 100644
--- a/src/components/modules/home/HomeBanner/HomeBanner.tsx
+++ b/src/components/modules/home/HomeBanner/HomeBanner.tsx
@@ -1,5 +1,7 @@
-import React from 'react'
+import { CollectionListOptions, GetCollectionsQuery } from '@framework/schema'
+import React, { useEffect, useMemo, useState } from 'react'
 import { Banner, StaticImage } from 'src/components/common'
+import useGetProductListByCollection from 'src/components/hooks/useGetProductListByCollection'
 import { ROUTE } from 'src/utils/constanst.utils'
 import BannerImgRight from './assets/banner_full.png'
 import HomeBannerImg from './assets/home_banner.png'
@@ -11,6 +13,10 @@ interface Props {
 }
 
 const HomeBanner = ({ }: Props) => {
+    // const variables = useMemo(() => {
+    //     return {option: {filter: {name: {eq: "Computers" }}}}
+    // }, [])
+	// const {collections} = useGetProductListByCollection(variables)
     return (
         <div className={s.homeBanner}>
             <section className={s.left}>
diff --git a/src/utils/enum.ts b/src/utils/enum.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/utils/types.utils.ts b/src/utils/types.utils.ts
index e2ce516d4..fe1a4df07 100644
--- a/src/utils/types.utils.ts
+++ b/src/utils/types.utils.ts
@@ -1,3 +1,5 @@
+import { SortOrder } from "@framework/schema";
+
 export interface ProductProps {
     category?: string
     name: string