diff --git a/src/app/ui/navLinks.tsx b/src/app/ui/navLinks.tsx
index 8c78d90..33be4c0 100644
--- a/src/app/ui/navLinks.tsx
+++ b/src/app/ui/navLinks.tsx
@@ -3,6 +3,7 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { ComponentProps } from "react";
 import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
 
 
 function NavLink(props: ComponentProps<"div"> & { href: string }) {
@@ -22,12 +23,12 @@ export default function Navlinks(props: ComponentProps<"div">) {
       <div className="text-secondary-foreground" >
         {
           links.map(e => (<NavLink key={e.link} href={e.link}
-            className={clsx("text-xl font-black my-2 w-full pl-2 antialiased",
+            className={twMerge(clsx("text-xl drop-shadow  font-black my-2 w-full pl-2 antialiased text-secondary-foreground bg-secondary",
               {
-                "text-primary-foreground bg-primary": pathname === e.link
+                "text-primary-foreground bg-primary": pathname.includes(e.link)
               }
-            )}
-          >{e.label}</NavLink >))
+            ))}
+          ><p className="drop-shadow-sm">{e.label}</p></NavLink >))
         }
       </ div>
     </div>