diff --git a/src/components/layout/TopBar.tsx b/src/components/layout/TopBar.tsx
index a522d7b..319c386 100644
--- a/src/components/layout/TopBar.tsx
+++ b/src/components/layout/TopBar.tsx
@@ -2,6 +2,7 @@
 
 import { useAuth } from "@/contexts/AuthContext";
 import { Menu, LogOut, User } from "lucide-react";
+import Link from "next/link";
 
 interface TopBarProps {
   onMenuClick: () => void;
@@ -26,11 +27,11 @@ export function TopBar({ onMenuClick }: TopBarProps) {
       </div>
 
       <div className="flex items-center gap-3">
-        <div className="hidden sm:flex items-center gap-2 text-sm text-gray-600">
+        <Link href="/profile" className="hidden sm:flex items-center gap-2 text-sm text-gray-600 hover:text-blue-600 transition-colors rounded-lg px-2 py-1 hover:bg-blue-50">
           <User className="h-4 w-4 text-gray-400" />
           <span>{user?.name || user?.email || "User"}</span>
           <span className="text-xs text-gray-400 bg-gray-100 px-2 py-0.5 rounded-full">{user?.role}</span>
-        </div>
+        </Link>
         <button
           onClick={logout}
           className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm text-gray-600 hover:bg-red-50 hover:text-red-600 transition-colors"