diff --git a/apps/trading/components/navbar/index.tsx b/apps/trading/components/navbar/index.tsx
index 3d97af265..d14bf65c7 100644
--- a/apps/trading/components/navbar/index.tsx
+++ b/apps/trading/components/navbar/index.tsx
@@ -1,5 +1,5 @@
 import styles from './navbar.module.scss';
-import Link from 'next/link';
+import { useRouter } from 'next/router';
 
 export const Navbar = () => {
   return (
@@ -8,10 +8,31 @@ export const Navbar = () => {
         { name: 'Portfolio', path: '/portfolio' },
         { name: 'Markets', path: '/markets' },
       ].map((route) => (
-        <Link href={route.path} key={route.path}>
-          {route.name}
-        </Link>
+        <NavLink key={route.path} {...route} />
       ))}
     </nav>
   );
 };
+
+interface NavLinkProps {
+  name: string;
+  path: string;
+}
+
+const NavLink = ({ name, path }: NavLinkProps) => {
+  const router = useRouter();
+  const color = router.asPath === path ? 'blue' : 'inherit';
+
+  return (
+    <a
+      href={path}
+      onClick={(e) => {
+        e.preventDefault();
+        router.push(path);
+      }}
+      style={{ color }}
+    >
+      {name}
+    </a>
+  );
+};