diff --git a/pages/index.tsx b/pages/index.tsx
index 06d12a024..5d1140b77 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -2,7 +2,33 @@
 import { Layout } from 'src/components/common';
 import { MenuNavigation,MenuFilter} from 'src/components/common';
 import { HomeBanner, HomeCategories, HomeCTA, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
-
+import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
+const CATEGORY = [
+  {
+      name: 'All',
+      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`,
+  },
+  {
+      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`,
+  },
+]
 export default function Home() {
   return (
     <>
@@ -11,8 +37,8 @@ export default function Home() {
       <HomeVideo />
       <HomeCTA />
       <HomeSubscribe /> */}
-      <MenuFilter heading="Categories"/> 
-      <MenuNavigation heading="Categories"/>
+      <MenuFilter categories={CATEGORY} heading="Categories"/> 
+      <MenuNavigation categories={CATEGORY} heading="Categories"/>
     </>
   )
 }
diff --git a/src/components/common/MenuFilter/MenuFilter.module.scss b/src/components/common/MenuFilter/MenuFilter.module.scss
index afb66799b..b08f370d8 100644
--- a/src/components/common/MenuFilter/MenuFilter.module.scss
+++ b/src/components/common/MenuFilter/MenuFilter.module.scss
@@ -20,9 +20,6 @@
             a{
              padding: 0.8rem 1.6rem;
              margin-right: 0.8rem;
-             font-size: var(--font-size);
-             line-height: var(--line-height);
-             color:var(--text-base);
              background-color: var(--gray);
              border-radius: 0.8rem;
              &:hover {
@@ -40,7 +37,7 @@
             bottom: -20%;
             content: "";
             width: 100%;
-            border-bottom: 1px solid #EBEBEB;
+            border-bottom: 1px solid var(--border-line);
         } 
     }
 }
diff --git a/src/components/common/MenuFilter/MenuFilter.tsx b/src/components/common/MenuFilter/MenuFilter.tsx
index f6a2c9d4c..e43c6384a 100644
--- a/src/components/common/MenuFilter/MenuFilter.tsx
+++ b/src/components/common/MenuFilter/MenuFilter.tsx
@@ -1,41 +1,17 @@
 import classNames from 'classnames'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
+
 import s from './MenuFilter.module.scss'
-const CATEGORY = [
-    {
-        name: 'All',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`,
-    },
-    {
-        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`,
-    },
-]
+
 
 interface Props {
     children?: any,
     heading:string,
+    categories:{name:string,link:string}[]
 }
 
-const MenuFilter = ({heading}:Props)=> {
+const MenuFilter = ({heading,categories}:Props)=> {
     const router = useRouter()
 
     return (
@@ -43,7 +19,7 @@ const MenuFilter = ({heading}:Props)=> {
             <h2 className={classNames(s.menuFilterHeading)}>{heading}</h2>
             <ul className={s.menuFilterList}>
                 {
-                    CATEGORY.map(item => <li key={item.name}>
+                    categories.map(item => <li key={item.name}>
                         <Link href={item.link}>
                             <a className={classNames({ [s.active]: router.asPath === item.link})}>
                                 {item.name}
diff --git a/src/components/common/MenuNavigation/MenuNavigation.module.scss b/src/components/common/MenuNavigation/MenuNavigation.module.scss
index 0b3dcae8b..64d6ef756 100644
--- a/src/components/common/MenuNavigation/MenuNavigation.module.scss
+++ b/src/components/common/MenuNavigation/MenuNavigation.module.scss
@@ -13,8 +13,6 @@
             li{
                 margin: 0.8rem 0;
                 a{
-                 font-size: var(--font-size);
-                 line-height: var(--line-height);
                  color:var(--text-base);
                  &:hover {
                     @apply text-primary;
diff --git a/src/components/common/MenuNavigation/MenuNavigation.tsx b/src/components/common/MenuNavigation/MenuNavigation.tsx
index f0b9bcfc9..ca665f0ec 100644
--- a/src/components/common/MenuNavigation/MenuNavigation.tsx
+++ b/src/components/common/MenuNavigation/MenuNavigation.tsx
@@ -1,49 +1,23 @@
 import classNames from 'classnames'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
 import s from './MenuNavigation.module.scss'
-const CATEGORY = [
-    {
-        name: 'All',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`,
-    },
-    {
-        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`,
-    },
-]
 
 interface Props {
     children?: any,
     heading:string,
+    categories:{name:string,link:string}[]
 }
 
-const MenuNavigation = ({heading}:Props)=> {
+const MenuNavigation = ({heading,categories}:Props)=> {
     const router = useRouter()
 
     return (
         <section className={classNames(s.menuNavigationWrapper)}>
-            <h2 className={classNames(s.menuNavigationHeading)}>{heading}({CATEGORY.length})</h2>
+            <h2 className={classNames(s.menuNavigationHeading)}>{heading}({categories.length})</h2>
             <ul className={s.menuNavigationList}>
                 {
-                    CATEGORY.map(item => <li key={item.name}
+                    categories.map(item => <li key={item.name}
                        >
                         <Link href={item.link}>
                             <a className={classNames({ [s.active]: router.asPath === item.link})}>