diff --git a/frontend/leaderboard.html b/frontend/leaderboard.html
index 2f1912b..92df847 100644
--- a/frontend/leaderboard.html
+++ b/frontend/leaderboard.html
@@ -94,13 +94,14 @@ <h1 class="page-title">Leaderboard</h1>
             data.forEach((user, index) => {
                 const rank = index + 1;
                 const icon = getRankIcon(rank);
+                const leetcodeUrl = `https://leetcode.com/u/${user.id}`;
 
                 const row = document.createElement('div');
                 row.className = 'leaderboard-row';
                 row.innerHTML = `
                     <div class="rank">${icon} ${rank}</div>
                     <div>${user.name}</div>
-                    <div class="username">${user.id}</div>
+                    <div class="username"><a href="https://leetcode.com/u/${user.id}" target="_blank" class="user-link">${user.id}</a></div>
                     <div class="easy">${user.data.easySolved}</div>
                     <div class="medium">${user.data.mediumSolved}</div>
                     <div class="hard">${user.data.hardSolved}</div>
diff --git a/frontend/styles/main.css b/frontend/styles/main.css
index e00dc73..4426b13 100644
--- a/frontend/styles/main.css
+++ b/frontend/styles/main.css
@@ -331,6 +331,19 @@ body {
   font-size: 0.9rem;
 }
 
+.user-link {
+    text-decoration: none;
+    color: inherit;
+    border-bottom: 1px dashed rgba(0, 188, 212, 0.4);
+    transition: all 0.2s ease;
+}
+
+.user-link:hover {
+    border-bottom: 1px solid currentColor;
+    background-color: rgba(0, 188, 212, 0.1);
+    border-radius: 4px;
+}
+
 .easy { color: #4ade80; }
 .medium { color: #f59e0b; }
 .hard { color: #ef4444; }