diff --git a/src/layout/header/categories.tsx b/src/layout/header/categories.tsx
index b8f62fc..ed290e4 100644
--- a/src/layout/header/categories.tsx
+++ b/src/layout/header/categories.tsx
@@ -5,11 +5,12 @@ import CustomLink from "@/common/link";
 import { Box, useColorModeValue } from "@chakra-ui/react";
 import { RaceBy } from "@uiball/loaders";
 import Tap from "@/animations/tap";
+import { useRouter } from "next/router";
 
 const Categories = () => {
   const { data, error } = useSWR(getCategorySvgs);
   const color = useColorModeValue("rgb(0,0,0, .1)", "rgb(255,255,255, .1)");
-
+  const router = useRouter();
   if (error) return <div>failed to load</div>;
   if (!data)
     return <RaceBy size={52} lineWeight={3} speed={1.4} color="#4343E5" />;
@@ -23,6 +24,14 @@ const Categories = () => {
             p={4}
             borderRadius="4px"
             borderWidth="1px"
+            __css={
+              router.asPath === `/category/${category}`
+                ? {
+                    backgroundColor: '#4343e5',
+                    color: '#fff'
+                  }
+                : {}
+            }
             _hover={{
               border:`1px solid ${color}`,
               transform: "scale(0.98)",