diff --git a/frontend/leaderboard.html b/frontend/leaderboard.html
index 09fd96b6..66e855fc 100644
--- a/frontend/leaderboard.html
+++ b/frontend/leaderboard.html
@@ -378,7 +378,13 @@ <h1 class="page-title">Leaderboard</h1>
           const rank = user.originalRank || index + 1;
           const tag = getRankTag(rank);
           const leetcodeUrl = `https://leetcode.com/u/${user.id}`;
+          const easyPoints = 1;
+          const mediumPoints = 3;
+          const hardPoints = 5;
 
+          const easyScore = user.data.easySolved * easyPoints;
+          const mediumScore = user.data.mediumSolved * mediumPoints;
+          const hardScore = user.data.hardSolved * hardPoints;
           const row = document.createElement("div");
           row.className = "leaderboard-row";
           row.innerHTML = `
@@ -388,7 +394,25 @@ <h1 class="page-title">Leaderboard</h1>
                     <div class="easy">${user.data.easySolved}</div>
                     <div class="medium">${user.data.mediumSolved}</div>
                     <div class="hard">${user.data.hardSolved}</div>
-                    <div class="score">${user.score}</div>
+                    <div class="mobile-score tooltip-score">
+                            <span>${user.score}</span>
+                             <span class="score-caret"></span>
+                        <div class="score-tooltip">
+                            <div>
+                                Easy: ${user.data.easySolved} × ${easyPoints} = ${easyScore}
+                            </div>
+                            <div>
+                                Medium: ${user.data.mediumSolved} × ${mediumPoints} = ${mediumScore}
+                            </div>
+                            <div>
+                                Hard: ${user.data.hardSolved} × ${hardPoints} = ${hardScore}
+                            </div>
+                            <hr>
+                            <div>
+                                <strong>Total: ${user.score}</strong>
+                            </div>
+                        </div>
+                    </div>
                 `;
           body.appendChild(row);
 
@@ -397,8 +421,28 @@ <h1 class="page-title">Leaderboard</h1>
           card.innerHTML = `
                     <div class="mobile-card-header">
                         <div class="mobile-rank">#${rank}</div>
-                        <div class="mobile-score">${user.score}</div>
+                        <div class="mobile-score tooltip-score">
+                           <span> ${user.score}</span>
+                               <span class="score-caret"></span>
+                            <div class="score-tooltip">
+                                <div>
+                                    Easy: ${user.data.easySolved} × ${easyPoints} = ${easyScore}
+                                </div>
+                                <div>
+                                    Medium: ${user.data.mediumSolved} × ${mediumPoints} = ${mediumScore}
+                                </div>
+                                <div>
+                                    Hard: ${user.data.hardSolved} × ${hardPoints} = ${hardScore}
+                                </div>
+                                <hr>
+                                <div>
+                                    <strong>Total: ${user.score}</strong>
+                                </div>
+                            </div>
+                        </div>
                     </div>
+
+                    
                     <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-stats">
diff --git a/frontend/styles/main.css b/frontend/styles/main.css
index ea0122ec..1e21ba8c 100644
--- a/frontend/styles/main.css
+++ b/frontend/styles/main.css
@@ -83,6 +83,7 @@ body::after {
   100% {
     opacity: 1;
   }
+
   50% {
     opacity: 0;
   }
@@ -92,6 +93,7 @@ body::after {
   from {
     width: 0;
   }
+
   to {
     width: 100%;
   }
@@ -102,6 +104,7 @@ body::after {
     opacity: 0;
     transform: translateY(8px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -112,9 +115,11 @@ body::after {
   0% {
     background-position: 0% 50%;
   }
+
   50% {
     background-position: 100% 50%;
   }
+
   100% {
     background-position: 0% 50%;
   }
@@ -124,15 +129,19 @@ body::after {
   0% {
     opacity: 0.97;
   }
+
   5% {
     opacity: 1;
   }
+
   10% {
     opacity: 0.98;
   }
+
   15% {
     opacity: 1;
   }
+
   100% {
     opacity: 1;
   }
@@ -145,6 +154,7 @@ body::after {
       0 0 10px rgba(0, 255, 65, 0.5),
       0 0 20px rgba(0, 255, 65, 0.2);
   }
+
   50% {
     text-shadow:
       0 0 20px rgba(0, 255, 65, 0.8),
@@ -157,6 +167,7 @@ body::after {
     transform: translateY(-100%);
     opacity: 1;
   }
+
   100% {
     transform: translateY(100vh);
     opacity: 0;
@@ -174,27 +185,35 @@ body::after {
 .text-center {
   text-align: center;
 }
+
 .flex {
   display: flex;
 }
+
 .flex-col {
   flex-direction: column;
 }
+
 .items-center {
   align-items: center;
 }
+
 .justify-center {
   justify-content: center;
 }
+
 .justify-between {
   justify-content: space-between;
 }
+
 .gap-1 {
   gap: 1rem;
 }
+
 .gap-2 {
   gap: 2rem;
 }
+
 .hidden {
   display: none;
 }
@@ -235,9 +254,11 @@ body::after {
 .terminal-dot.red {
   background: #ff5f57;
 }
+
 .terminal-dot.yellow {
   background: #febc2e;
 }
+
 .terminal-dot.green {
   background: #28c840;
 }
@@ -719,10 +740,12 @@ body::after {
 .exec-log-line.wait {
   color: var(--amber);
 }
+
 .exec-log-line.success {
   color: var(--green);
   text-shadow: 0 0 8px rgba(0, 255, 65, 0.4);
 }
+
 .exec-log-line.error {
   color: var(--red);
   text-shadow: 0 0 8px rgba(255, 51, 51, 0.4);
@@ -890,7 +913,8 @@ body::after {
   color: var(--cyan);
   transition: all 0.2s ease;
   display: inline-block;
-  max-width: calc(100% - 15px); /* Ensures it never touches the right column */
+  max-width: calc(100% - 15px);
+  /* Ensures it never touches the right column */
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -917,9 +941,11 @@ body::after {
 .easy {
   color: #00ff41;
 }
+
 .medium {
   color: #ffb000;
 }
+
 .hard {
   color: #ff3333;
 }
@@ -1183,15 +1209,19 @@ body::after {
 .section-title.green {
   color: #00ff41;
 }
+
 .section-title.blue {
   color: #00e5ff;
 }
+
 .section-title.red {
   color: #ff3333;
 }
+
 .section-title.orange {
   color: #ffb000;
 }
+
 .section-title.purple {
   color: #bf7fff;
 }
@@ -1563,6 +1593,21 @@ body::after {
   }
 }
 
+@media (max-width: 768px) {
+  .score-tooltip {
+    left: auto;
+    right: 0;
+    /* left: 50%; */
+    transform: translateX(0%);
+    white-space: normal;
+    /* width: max-content; */
+    max-width: 85vw;
+
+    /* font-size: 0.72rem; */
+    /* padding: 8px 10px; */
+  }
+}
+
 /* ── Scrollbar ── */
 html,
 body {
@@ -1902,6 +1947,7 @@ body::-webkit-scrollbar-thumb {
     opacity: 0;
     transform: translateY(5px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -1916,30 +1962,35 @@ body::-webkit-scrollbar-thumb {
       -2px 0 #00e5ff;
     transform: translate(2px, 2px) skewX(6deg);
   }
+
   20% {
     text-shadow:
       -2px 0 #ff003c,
       2px 0 #00e5ff;
     transform: translate(-2px, -1px) skewX(-6deg);
   }
+
   40% {
     text-shadow:
       2px 0 #ff003c,
       -2px 0 #00e5ff;
     transform: translate(1px, 2px) skewX(2deg);
   }
+
   60% {
     text-shadow:
       -2px 0 #ff003c,
       2px 0 #00e5ff;
     transform: translate(-1px, 1px) skewX(-2deg);
   }
+
   80% {
     text-shadow:
       2px 0 #ff003c,
       -2px 0 #00e5ff;
     transform: translate(2px, -2px) skewX(4deg);
   }
+
   100% {
     text-shadow: none;
     transform: translate(0, 0) skewX(0deg);
@@ -1973,7 +2024,8 @@ body::-webkit-scrollbar-thumb {
 ::-webkit-scrollbar-thumb {
   background: var(--green-muted);
   border: 1px solid var(--green);
-  border-radius: 0; /* Keep it blocky! */
+  border-radius: 0;
+  /* Keep it blocky! */
 }
 
 ::-webkit-scrollbar-thumb:hover {
@@ -2003,20 +2055,24 @@ body::-webkit-scrollbar-thumb {
   90% {
     transform: translate3d(-1px, 0, 0);
   }
+
   20%,
   80% {
     transform: translate3d(2px, 0, 0);
   }
+
   30%,
   50%,
   70% {
     transform: translate3d(-4px, 0, 0);
   }
+
   40%,
   60% {
     transform: translate3d(4px, 0, 0);
   }
 }
+
 /* ── Tooltip ── */
 .score-header {
   display: flex;
@@ -2097,6 +2153,69 @@ body::-webkit-scrollbar-thumb {
   text-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
 }
 
+.tooltip-score {
+  position: relative;
+  cursor: pointer;
+  display: inline-flex;
+  /* key fix */
+  width: fit-content;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.score-tooltip {
+  position: absolute;
+  top: calc(100% + 12px);
+  right: 0;
+  background: rgba(10, 10, 10, 0.97);
+  color: var(--text);
+  padding: 10px 14px;
+  border-radius: 4px;
+  width: max-content;
+  max-width: min(260px, 82vw);
+  font-size: 0.8rem;
+  line-height: 1.6;
+  border: 1px solid rgba(0, 255, 255, 0.2);
+  box-shadow: 0 0 15px rgba(0, 255, 255, 0.15);
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.2s ease;
+  z-index: 9999;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  pointer-events: none;
+}
+
+.tooltip-score:hover .score-tooltip {
+  opacity: 1;
+  visibility: visible;
+}
+
+.score-tooltip hr {
+  border: none;
+  border-top: 1px solid rgba(255, 255, 255, 0.15);
+  margin: 6px 0;
+}
+
+.score-caret {
+  font-size: 0.75rem;
+  color: var(--text-dim);
+  display: inline-block;
+  transition:
+    transform 0.25s ease,
+    color 0.25s ease;
+}
+
+.score-caret::after {
+  content: ">";
+}
+
+.tooltip-score:hover .score-caret {
+  transform: rotate(90deg);
+  color: var(--cyan);
+}
+
 /* ── Search Bar ── */
 .search-container {
   display: flex;