diff --git a/themes/heo/components/CategoryBar.js b/themes/heo/components/CategoryBar.js
index ee0a7a0c..eccd9685 100644
--- a/themes/heo/components/CategoryBar.js
+++ b/themes/heo/components/CategoryBar.js
@@ -28,6 +28,7 @@ export default function CategoryBar(props) {
       setScrollRight(!scrollRight)
     }
   }
+
   return <div id='category-bar' className={`flex flex-nowrap justify-between items-center h-12 mb-4 space-x-2 w-full lg:bg-white dark:lg:bg-[#1e1e1e]  
   ${border ? 'lg:border lg:hover:border dark:lg:border-gray-800 hover:border-indigo-600 dark:hover:border-yellow-600 ' : ''}  py-2 lg:px-2 rounded-xl transition-colors duration-200`}>
 
@@ -54,7 +55,8 @@ export default function CategoryBar(props) {
  */
 const MenuItem = ({ href, name }) => {
   const router = useRouter()
-  const selected = router.pathname === href
+  const { category } = router.query
+  const selected = category === name
   return <div className={`whitespace-nowrap mr-2 duration-200 transition-all font-bold px-2 py-0.5 rounded-md text-gray-900 dark:text-white hover:text-white hover:bg-indigo-600 dark:hover:bg-yellow-600 ${selected ? 'text-white bg-indigo-600 dark:bg-yellow-600' : ''}`}>
         <Link href={href}>{name}</Link>
     </div>