diff --git a/components/main-nav.tsx b/components/main-nav.tsx
index 493885fc..76b9f72d 100644
--- a/components/main-nav.tsx
+++ b/components/main-nav.tsx
@@ -1,5 +1,7 @@
-import * as React from "react"
+"use client"
+
 import Link from "next/link"
+import { usePathname } from "next/navigation"
 
 import { NavItem } from "@/types/nav"
 import { siteConfig } from "@/config/site"
@@ -11,6 +13,7 @@ interface MainNavProps {
 }
 
 export function MainNav({ items }: MainNavProps) {
+  const pathname = usePathname()
   return (
     <div className="flex gap-6 md:gap-10">
       <Link href="/" className="hidden items-center space-x-2 md:flex">
@@ -29,8 +32,10 @@ export function MainNav({ items }: MainNavProps) {
                   href={item.href}
                   className={cn(
                     "flex items-center text-lg font-semibold text-muted-foreground sm:text-sm",
-                    item.disabled && "cursor-not-allowed opacity-80"
+                    item.disabled && "cursor-not-allowed opacity-80",
+                    !item.disabled && pathname == item.href && "text-primary"
                   )}
+                  {...(!item.disabled && { pathname: item.href })}
                 >
                   {item.title}
                 </Link>