diff --git a/framework/vendure/utils/queries/get-collections-query.ts b/framework/vendure/utils/queries/get-collections-query.ts
index ed0919652..79e00a292 100644
--- a/framework/vendure/utils/queries/get-collections-query.ts
+++ b/framework/vendure/utils/queries/get-collections-query.ts
@@ -19,3 +19,13 @@ export const getCollectionsQuery = /* GraphQL */ `
     }
   }
 `
+export const getCollectionsNameQuery = /* GraphQL */ `
+  query getCollections {
+    collections{
+      items{
+          name
+          link:slug
+      }
+    }
+  }
+`
\ No newline at end of file
diff --git a/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx b/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx
index eb7d0a18a..2cd72e5f2 100644
--- a/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx
+++ b/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx
@@ -3,6 +3,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { memo } from 'react'
 import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown'
+import { useGetAllCollection } from 'src/components/hooks/collection'
 import { ProductFeature, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
 import HeaderNoti from './HeaderNoti/HeaderNoti'
 import s from './HeaderSubMenu.module.scss'
@@ -30,39 +31,18 @@ const MENU = [
     },
 ]
 
-// note: hard code, remove later
-const CATEGORY = [
-    {
-        name: 'Veggie',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
-    },
-    {
-        name: 'Seafood',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
-    },
-    {
-        name: 'Frozen',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
-    },
-    {
-        name: 'Coffee Bean',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`,
-    },
-    {
-        name: 'Sauce',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`,
-    },
-]
+
 
 const HeaderSubMenu = memo(() => {
     const router = useRouter()
+    const {collections} = useGetAllCollection();
 
     return (
         <section className={s.headerSubMenu}>
             <ul className={s.menu}>
                 {/* todo: handle active item */}
                 <li>
-                    <MenuDropdown options={CATEGORY} align="left">Categories</MenuDropdown>
+                    <MenuDropdown options={collections?.items ?? []} align="left">Categories</MenuDropdown>
                 </li>
                 {
                     MENU.map(item => <li key={item.name}
diff --git a/src/components/hooks/collection/index.ts b/src/components/hooks/collection/index.ts
new file mode 100644
index 000000000..e47e70f4d
--- /dev/null
+++ b/src/components/hooks/collection/index.ts
@@ -0,0 +1 @@
+export {default as useGetAllCollection} from "./useGetAllCollection"
\ No newline at end of file
diff --git a/src/components/hooks/collection/useGetAllCollection.tsx b/src/components/hooks/collection/useGetAllCollection.tsx
new file mode 100644
index 000000000..8e7232b2d
--- /dev/null
+++ b/src/components/hooks/collection/useGetAllCollection.tsx
@@ -0,0 +1,12 @@
+import { GetCollectionsQuery } from '@framework/schema';
+import { getCollectionsNameQuery } from '@framework/utils/queries/get-collections-query';
+import gglFetcher from 'src/utils/gglFetcher';
+import useSWR from 'swr';
+
+
+const useGetAllCollection =  () => {
+    const { data, ...rest } =  useSWR<GetCollectionsQuery>([getCollectionsNameQuery], gglFetcher)
+    return { collections: data?.collections, ...rest }
+}
+
+export default useGetAllCollection;
\ No newline at end of file