diff --git a/script.js b/script.js
index 84de7fd..941faf5 100644
--- a/script.js
+++ b/script.js
@@ -127,8 +127,18 @@ async function displayLeaderboard() {
             const data = doc.data();
             const uname = data.username || 'Unknown';
             const isMe = uname === uniqueUsername(user);
-            // Keep all rows in proper rank order, just highlight your row
-            html += `<tr${isMe ? ' class="me"' : ''}><td>${rank}</td><td>${uname}</td><td>${data.score}</td></tr>`;
+
+            // Determine styling class
+            let rankClass = "";
+            if (!isMe) {
+                if (rank === 1) rankClass = "rank-1";
+                else if (rank === 2) rankClass = "rank-2";
+                else if (rank === 3) rankClass = "rank-3";
+            } else {
+                rankClass = "me"; // Prioritize user's highlight if same row
+            }
+
+            html += `<tr class="${rankClass}"><td>${rank}</td><td>${uname}</td><td>${data.score}</td></tr>`;
             rank++;
         });
 
diff --git a/style.css b/style.css
index 18d043d..c6356de 100644
--- a/style.css
+++ b/style.css
@@ -265,6 +265,26 @@ main {
   font-weight: 600;
 }
 
+
+.rank-1 {
+  background: #ffd700 !important;
+  color: #000 !important;
+  font-weight: 700;
+}
+
+.rank-2 {
+  background: #c0c0c0 !important; 
+  color: #000 !important;
+  font-weight: 600;
+}
+
+.rank-3 {
+  background: #cd7f32 !important;
+  color: #fff !important;
+  font-weight: 600;
+}
+
+
 #guest-message {
   margin-top: 13px;
   color: var(--accent2);