diff --git a/src/components/common/MenuFilter/MenuFilter.module.scss b/src/components/common/MenuFilter/MenuFilter.module.scss
index ecea2e119..b08f370d8 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,27 +14,30 @@
         @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;
-            div{
+            a{
              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 454942734..edb44594f 100644
--- a/src/components/common/MenuFilter/MenuFilter.tsx
+++ b/src/components/common/MenuFilter/MenuFilter.tsx
@@ -1,43 +1,30 @@
 import classNames from 'classnames'
-import { useEffect, useState } from 'react';
+import Link from 'next/link'
+import { useRouter } from 'next/router'
 
 import s from './MenuFilter.module.scss'
+
+
 interface Props {
     children?: any,
-    heading?:string,
-    categories:{name:string,link:string}[],
-    type:string,
-    onChangeValue?: (value: Object) => void
+    heading:string,
+    categories:{name:string,link:string}[]
 }
 
-const MenuFilter = ({heading,categories,type,onChangeValue}:Props)=> {
-    const [active, setActive] = useState<string>('');
+const MenuFilter = ({heading,categories}:Props)=> {
+    const router = useRouter()
 
-    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}>
-                        <div onClick={()=> handleClick(item.link)} className={classNames({ [s.active]: item.link === active? true: false })}>
-                            {item.name}
-                        </div>
+                        <Link href={item.link}>
+                            <a className={classNames({ [s.active]: router.asPath === item.link})}>
+                                {item.name}
+                            </a>
+                        </Link>
                     </li>)
                 }
             </ul>