diff --git a/src/components/common/MenuFilter/MenuFilter.module.scss b/src/components/common/MenuFilter/MenuFilter.module.scss
index b08f370d8..ecea2e119 100644
--- a/src/components/common/MenuFilter/MenuFilter.module.scss
+++ b/src/components/common/MenuFilter/MenuFilter.module.scss
@@ -1,6 +1,6 @@
 @import "../../../styles/utilities";
 .menuFilterWrapper{
-    @apply spacing-horizontal ;
+  
     @screen md {
         @apply hidden;
     }
@@ -14,30 +14,27 @@
         @apply flex flex-wrap justify-start relative;
         margin-bottom: 3rem;
         box-sizing: border-box;
+        &::after{
+            @apply absolute;
+            top: 110%;
+            content: "";
+            width: 100%;
+            border-bottom: 1px solid var(--border-line);
+        } 
+
         li{
             margin: 1rem 0;
             padding:0;
-            a{
+            div{
              padding: 0.8rem 1.6rem;
              margin-right: 0.8rem;
              background-color: var(--gray);
              border-radius: 0.8rem;
-             &:hover {
-                color:white;
-                background-color: var(--primary);
-             }
              &.active {
                 color:white;
                 background-color: var(--primary);
              }
             }
         }
-        &::after{
-            @apply absolute;
-            bottom: -20%;
-            content: "";
-            width: 100%;
-            border-bottom: 1px solid var(--border-line);
-        } 
     }
 }
diff --git a/src/components/common/MenuFilter/MenuFilter.tsx b/src/components/common/MenuFilter/MenuFilter.tsx
index edb44594f..454942734 100644
--- a/src/components/common/MenuFilter/MenuFilter.tsx
+++ b/src/components/common/MenuFilter/MenuFilter.tsx
@@ -1,30 +1,43 @@
 import classNames from 'classnames'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react';
 
 import s from './MenuFilter.module.scss'
-
-
 interface Props {
     children?: any,
-    heading:string,
-    categories:{name:string,link:string}[]
+    heading?:string,
+    categories:{name:string,link:string}[],
+    type:string,
+    onChangeValue?: (value: Object) => void
 }
 
-const MenuFilter = ({heading,categories}:Props)=> {
-    const router = useRouter()
+const MenuFilter = ({heading,categories,type,onChangeValue}:Props)=> {
+    const [active, setActive] = useState<string>('');
 
+    function handleClick(link:string){
+        setActive(link);
+
+        if(active === link){
+            setActive('');
+        }
+    }
+
+    useEffect(()=>{
+      
+        let href = active?.split("=");
+        const linkValue = href[1];
+
+        onChangeValue && onChangeValue({[type]:linkValue});
+    },[active]) 
+  
     return (
         <section className={s.menuFilterWrapper}>
             <h2 className={s.menuFilterHeading}>{heading}</h2>
             <ul className={s.menuFilterList}>
                 {
                     categories.map(item => <li key={item.name}>
-                        <Link href={item.link}>
-                            <a className={classNames({ [s.active]: router.asPath === item.link})}>
-                                {item.name}
-                            </a>
-                        </Link>
+                        <div onClick={()=> handleClick(item.link)} className={classNames({ [s.active]: item.link === active? true: false })}>
+                            {item.name}
+                        </div>
                     </li>)
                 }
             </ul>
diff --git a/src/utils/language.utils.ts b/src/utils/language.utils.ts
index e75e52515..8b3d8f8d5 100644
--- a/src/utils/language.utils.ts
+++ b/src/utils/language.utils.ts
@@ -2,12 +2,9 @@ export const LANGUAGE = {
     BUTTON_LABEL: {
         BUY_NOW: 'Buy now',
         SHOP_NOW: 'Shop now',
-<<<<<<< HEAD
-        CONFIRM:'Confirm'
-=======
+        CONFIRM:'Confirm',
         ADD_TO_CARD: 'Add to Cart',
         PREORDER: 'Pre-Order Now',
->>>>>>> a9f9f06eb9dee2a1ddefe907ff804237a78c5210
     },
     PLACE_HOLDER: {
         SEARCH: 'Search',