diff --git a/frontend/js/navbar.js b/frontend/js/navbar.js
index 06313180..f4cf27c8 100644
--- a/frontend/js/navbar.js
+++ b/frontend/js/navbar.js
@@ -21,8 +21,8 @@ document.addEventListener("DOMContentLoaded", () => {
       <ul class="nav-links">
         <li><a href="/" class="${currentPath === "/" || currentPath.includes("index.html") ? "active" : ""}">home</a></li>
         <li><a href="/leaderboard" class="${currentPath.includes("leaderboard") ? "active" : ""}">leaderboard</a></li>
-        <li><a href="/registration" class="${currentPath.includes("registration") ? "active" : ""}">register</a></li>
         <li><a href="/about" class="${currentPath.includes("about") ? "active" : ""}">about</a></li>
+        <li><a href="/registration" class="${currentPath.includes("registration") ? "active" : ""}">register</a></li>
         <li><a href="https://github.com/codepvg/" target="_blank" class="github-link">github</a></li>
       </ul>
     </div>
diff --git a/frontend/leaderboard.html b/frontend/leaderboard.html
index 66e855fc..7e25b092 100644
--- a/frontend/leaderboard.html
+++ b/frontend/leaderboard.html
@@ -390,7 +390,15 @@ <h1 class="page-title">Leaderboard</h1>
           row.innerHTML = `
                     <div class="rank">${rank}</div>
                     <div class="name-cell">${tag}${user.name}</div>
-                    <div class="username"><a href="https://leetcode.com/u/${user.id}" target="_blank" class="user-link">${user.id}</a></div>
+                    <div class="username"><a href="https://leetcode.com/u/${user.id}" target="_blank" rel="noopener noreferrer" class="user-link">${user.id}
+                        <svg class="external-icon" width="12" height="12" viewBox="0 0 24 24">
+                        <path d="M14 3H21V10M21 3L10 14M21 14V21H3V3H10"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"/>
+                        </svg></a></div>
                     <div class="easy">${user.data.easySolved}</div>
                     <div class="medium">${user.data.mediumSolved}</div>
                     <div class="hard">${user.data.hardSolved}</div>
@@ -444,7 +452,15 @@ <h1 class="page-title">Leaderboard</h1>
 
                     
                     <div class="mobile-name">${tag}${user.name}</div>
-                    <div class="mobile-username"><a href="https://leetcode.com/u/${user.id}" target="_blank" class="user-link">${user.id}</a></div>
+                    <div class="mobile-username"><a href="https://leetcode.com/u/${user.id}" target="_blank" rel="noopener noreferrer" class="user-link">${user.id}
+                        <svg class="external-icon" width="12" height="12" viewBox="0 0 24 24">
+                        <path d="M14 3H21V10M21 3L10 14M21 14V21H3V3H10"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"/>
+                    </svg></a></div>
                     <div class="mobile-stats">
                         <div class="mobile-stat">
                             <div class="mobile-stat-number easy">${user.data.easySolved}</div>
diff --git a/frontend/styles/main.css b/frontend/styles/main.css
index 1e21ba8c..d4e1c67a 100644
--- a/frontend/styles/main.css
+++ b/frontend/styles/main.css
@@ -294,6 +294,7 @@ body::after {
   gap: 10px;
   text-decoration: none;
   padding: 0.75rem 0;
+  margin-right: 40px;
 }
 
 .navbar .nav-brand:hover .nav-title {
@@ -333,7 +334,7 @@ body::after {
   text-decoration: none;
   font-size: 0.82rem;
   font-weight: 500;
-  padding: 0.75rem 1.2rem;
+  padding: 0.75rem 1.5rem;
   display: block;
   transition: all 0.15s ease;
   letter-spacing: 0.5px;
@@ -347,6 +348,7 @@ body::after {
 .navbar .nav-links a:hover {
   color: var(--green);
   background: var(--green-muted);
+  text-shadow: 0 0 8px rgba(0, 255, 65, 0.4);
 }
 
 .navbar .nav-links a.active {
@@ -922,11 +924,20 @@ body::after {
 }
 
 .user-link::after {
-  content: " ↗";
-  font-size: 0.75rem;
-  color: var(--text-muted);
-  font-family: sans-serif;
-  transition: color 0.2s ease;
+  content: "";
+  display: none;
+  width: 12px;
+  height: 12px;
+  margin-left: 4px;
+  vertical-align: middle;
+
+  background-color: var(--text-muted);
+
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3H21V10M21 3L10 14M21 14V21H3V3H10' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
+    center/contain no-repeat;
+
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3H21V10M21 3L10 14M21 14V21H3V3H10' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
+    center/contain no-repeat;
 }
 
 .user-link:hover {
@@ -938,23 +949,39 @@ body::after {
   color: var(--cyan);
 }
 
-.easy {
-  color: #00ff41;
+.external-icon {
+  width: 12px;
+  height: 12px;
+  margin-left: 4px;
+  vertical-align: middle;
+  opacity: 0.7;
 }
 
-.medium {
-  color: #ffb000;
+.user-link:hover .external-icon {
+  opacity: 1;
 }
 
+.easy {
+  color: #1cbaba;
+}
+.medium {
+  color: #ffb700;
+}
 .hard {
-  color: #ff3333;
+  color: #f63737;
 }
 
 .score {
-  color: var(--amber);
+  color: #ffffff;
   font-weight: 700;
   font-size: 1rem;
-  text-shadow: 0 0 8px rgba(255, 176, 0, 0.4);
+  text-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
+}
+
+.score-header {
+  color: #ffffff;
+  font-weight: 700;
+  text-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
 }
 
 /* ── Mobile Cards ── */
@@ -2093,8 +2120,8 @@ body::-webkit-scrollbar-thumb {
   width: 14px;
   height: 14px;
   border-radius: 50%;
-  border: 1px solid var(--text-dim);
-  color: var(--text-dim);
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  color: rgba(255, 255, 255, 0.4);
   font-size: 0.65rem;
   font-weight: bold;
   line-height: 1;
@@ -2162,6 +2189,9 @@ body::-webkit-scrollbar-thumb {
   align-items: center;
   justify-content: center;
   gap: 6px;
+  color: #ffffff;
+  font-weight: 700;
+  text-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
 }
 
 .score-tooltip {
@@ -2200,7 +2230,7 @@ body::-webkit-scrollbar-thumb {
 
 .score-caret {
   font-size: 0.75rem;
-  color: var(--text-dim);
+  color: rgba(255, 255, 255, 0.4);
   display: inline-block;
   transition:
     transform 0.25s ease,