diff --git a/src/components/menu.module.scss b/src/components/menu.module.scss
index b4726cc..f951734 100644
--- a/src/components/menu.module.scss
+++ b/src/components/menu.module.scss
@@ -5,5 +5,5 @@
 }
 
 .menu_item {
-  @apply w-full cursor-pointer rounded-md bg-gray-100 px-6 py-2 text-center hover:bg-gray-200;
+  @apply w-full cursor-pointer rounded-md px-6 py-2 text-center hover:bg-gray-200;
 }
diff --git a/src/components/menu.tsx b/src/components/menu.tsx
index 3bc9350..7a5b86c 100644
--- a/src/components/menu.tsx
+++ b/src/components/menu.tsx
@@ -1,6 +1,6 @@
-import { cn } from "@/utils/class-merge";
 import { FunctionComponent } from "preact";
 import { useLocation } from "preact-iso";
+import { tv } from "tailwind-variants";
 import classes from "./menu.module.scss";
 
 interface MenuItemProps {
@@ -11,8 +11,20 @@ interface MenuItemProps {
 const MenuItem: FunctionComponent<MenuItemProps> = ({ title, link }: MenuItemProps) => {
   const location = useLocation();
   const active = location.path === link;
+  const menuItemClasses = tv({
+    base: classes.menu_item,
+    variants: {
+      activity: {
+        active: "bg-gray-200",
+        inactive: "bg-gray-100",
+      },
+    },
+    defaultVariants: {
+      activity: "inactive",
+    },
+  });
   return (
-    <div class={cn(classes.menu_item, { "bg-gray-200": active })} onClick={() => location.route(link)}>
+    <div class={menuItemClasses({ activity: active ? "active" : "inactive" })} onClick={() => location.route(link)}>
       {title}
     </div>
   );