diff --git a/frontend/src/components/layout/navbar.tsx b/frontend/src/components/layout/navbar.tsx
index 83ae306..9354717 100644
--- a/frontend/src/components/layout/navbar.tsx
+++ b/frontend/src/components/layout/navbar.tsx
@@ -5,6 +5,7 @@ import { useAuth } from "@/context/auth-context";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import ThemeToggle from "@/components/ui/theme-toggle";
+import { Button } from "@/components/ui/button";
 
 export default function Navbar() {
   const { user, isAuthenticated, logout } = useAuth();
@@ -16,60 +17,53 @@ export default function Navbar() {
     return null;
   }
 
+  const navLinkClass = (path: string) =>
+    `text-sm transition-colors ${
+      pathname === path || pathname?.startsWith(path)
+        ? "text-primary font-medium"
+        : "text-muted-foreground hover:text-primary"
+    }`;
+
   return (
-    <header className="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800">
-      <div className="container mx-auto px-4">
-        <div className="flex h-16 items-center justify-between">
-          <div className="flex items-center">
-            <Link
-              href="/"
-              className="text-xl font-bold text-blue-600 dark:text-blue-400"
-            >
-              EventSpace
-            </Link>
+    <header className="border-b bg-white dark:bg-gray-900 py-3">
+      <div className="container mx-auto flex items-center justify-between px-4">
+        <div className="flex items-center gap-8">
+          <Link
+            href="/"
+            className="text-xl font-semibold text-primary hover:text-primary/80 transition-colors"
+          >
+            EventSpace
+          </Link>
 
-            {isAuthenticated && (
-              <nav className="ml-10 hidden md:flex space-x-8">
-                <Link
-                  href="/dashboard"
-                  className={`text-sm font-medium ${pathname === "/dashboard" ? "text-blue-600 dark:text-blue-400" : "text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white"}`}
-                >
-                  Dashboard
-                </Link>
-                <Link
-                  href="/events"
-                  className={`text-sm font-medium ${pathname?.startsWith("/events") ? "text-blue-600 dark:text-blue-400" : "text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white"}`}
-                >
-                  Events
-                </Link>
-              </nav>
-            )}
-          </div>
-
-          <div className="flex items-center space-x-4">
-            <ThemeToggle />
-
-            {isAuthenticated ? (
-              <div className="flex items-center space-x-4">
-                <span className="text-sm text-slate-600 dark:text-slate-300">
-                  {user?.first_name}
-                </span>
-                <button
-                  onClick={logout}
-                  className="text-sm font-medium text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white"
-                >
-                  Sign out
-                </button>
-              </div>
-            ) : (
-              <Link
-                href="/login"
-                className="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
-              >
-                Sign in
+          {isAuthenticated && (
+            <nav className="hidden md:flex items-center gap-6">
+              <Link href="/dashboard" className={navLinkClass("/dashboard")}>
+                Dashboard
               </Link>
-            )}
-          </div>
+              <Link href="/events" className={navLinkClass("/events")}>
+                Events
+              </Link>
+            </nav>
+          )}
+        </div>
+
+        <div className="flex items-center gap-4">
+          <ThemeToggle />
+
+          {isAuthenticated ? (
+            <div className="flex items-center gap-3">
+              <span className="text-sm text-muted-foreground">
+                {user?.first_name}
+              </span>
+              <Button variant="ghost" className="px-2" onClick={logout}>
+                Sign out
+              </Button>
+            </div>
+          ) : (
+            <Button asChild size="sm">
+              <Link href="/login">Sign in</Link>
+            </Button>
+          )}
         </div>
       </div>
     </header>