diff --git a/crackcode/client/package-lock.json b/crackcode/client/package-lock.json
index 1386af12..69b6f52f 100644
--- a/crackcode/client/package-lock.json
+++ b/crackcode/client/package-lock.json
@@ -74,6 +74,7 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -1776,6 +1777,7 @@
       "integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -1796,8 +1798,7 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
       "license": "MIT",
-      "optional": true,
-      "peer": true
+      "optional": true
     },
     "node_modules/@vitejs/plugin-react": {
       "version": "5.1.2",
@@ -2007,6 +2008,7 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2218,6 +2220,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -2671,7 +2674,6 @@
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz",
       "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==",
       "license": "(MPL-2.0 OR Apache-2.0)",
-      "peer": true,
       "optionalDependencies": {
         "@types/trusted-types": "^2.0.7"
       }
@@ -2859,6 +2861,7 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3937,6 +3940,7 @@
       "integrity": "sha512-/9AVW7xNbsBv6GfWho4TTNjEo9fe6Zhf9O7s0Fhhr3u+awPwAJMKwAMXnkk5vBxflqLW9hTHX/0cs+P3gW+cQw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "abab": "^2.0.6",
         "cssstyle": "^3.0.0",
@@ -4399,7 +4403,6 @@
       "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz",
       "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "marked": "bin/marked.js"
       },
@@ -4802,6 +4805,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -4945,6 +4949,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -4957,6 +4962,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -5671,6 +5677,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz",
       "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -7039,6 +7046,7 @@
       "integrity": "sha512-0wZ1IRqGGhMP76gLqz8EyfBXKk0J2qo2+H3fi4mcUP/KtTocoX08nmIAHl1Z2kJIZbZee8KOpBCSNPRgauucjw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/crackcode/client/src/components/leaderboard/leaderboardTable.jsx b/crackcode/client/src/components/leaderboard/leaderboardTable.jsx
index b5e2228f..ffd0d213 100644
--- a/crackcode/client/src/components/leaderboard/leaderboardTable.jsx
+++ b/crackcode/client/src/components/leaderboard/leaderboardTable.jsx
@@ -1,68 +1,164 @@
 import React from "react";
 import { UserRoundSearch, Flame } from "lucide-react";
 
-// ── Renders either an <img> or emoji depending on the avatar value ──
 const Avatar = ({ avatar, name }) => {
   const isImagePath =
     typeof avatar === "string" &&
     (avatar.startsWith("/") ||
       avatar.startsWith("http") ||
       avatar.match(/\.(png|jpg|jpeg|gif|webp|svg)$/i));
+
   if (isImagePath) {
     return (
       <img
         src={avatar}
         alt={name}
-        style={{ width: 32, height: 32, borderRadius: "50%", objectFit: "cover",
-          border: "2px solid #334155", flexShrink: 0 }}
-        onError={(e) => { e.target.replaceWith(Object.assign(document.createElement("span"), { textContent: "🕵️" })); }}
+        style={{
+          width: 32, height: 32, borderRadius: "50%", objectFit: "cover",
+          border: "2px solid var(--border)", flexShrink: 0,
+        }}
+        onError={(e) => { e.target.style.display = "none"; }}
       />
     );
   }
+
   const isEmoji = typeof avatar === "string" && /\p{Emoji}/u.test(avatar);
-  return <span className="text-xl">{isEmoji ? avatar : <UserRoundSearch className="w-6 h-6" />}</span>;
+  return (
+    <span style={{ fontSize: "1.3rem" }}>
+      {isEmoji ? avatar : <UserRoundSearch style={{ width: 24, height: 24 }} />}
+    </span>
+  );
 };
 
+const RANK_MEDAL = { 1: "🥇", 2: "🥈", 3: "🥉" };
+
 const LeaderboardTable = ({ data = [] }) => {
   return (
-    <div className="table-container" style={{ width: "100%" }}>
+    <div
+      style={{
+        width: "100%",
+        borderRadius: "1rem",
+        border: "1px solid var(--border)",
+        background: "var(--surface)",
+        overflow: "hidden",
+        marginTop: "2rem",
+      }}
+    >
       <table style={{ width: "100%", tableLayout: "fixed", borderSpacing: 0, borderCollapse: "collapse" }}>
+
+        {/* Header */}
         <thead>
-          <tr>
-            <th style={{ width: "6%",  padding: "18px 20px", textAlign: "left" }}>Rank</th>
-            <th style={{ width: "20%", padding: "18px 20px", textAlign: "left" }}>Detective</th>
-            <th style={{ width: "14%", padding: "18px 20px", textAlign: "left" }}>Title</th>
-            <th style={{ width: "18%", padding: "18px 20px", textAlign: "left" }}>Specialization</th>
-            <th style={{ width: "16%", padding: "18px 20px", textAlign: "left" }}>Investigation Points</th>
-            <th style={{ width: "13%", padding: "18px 20px", textAlign: "left" }}>Cases Solved</th>
-            <th style={{ width: "13%", padding: "18px 20px", textAlign: "left" }}>Streak</th>
+          <tr style={{ borderBottom: "1px solid var(--border)" }}>
+            {[
+              { label: "Rank",                 width: "7%"  },
+              { label: "Detective",            width: "22%" },
+              { label: "Title",                width: "13%" },
+              { label: "Specialization",       width: "16%" },
+              { label: "Investigation Points", width: "17%" },
+              { label: "Cases Solved",         width: "13%" },
+              { label: "Streak",               width: "12%" },
+            ].map(({ label, width }) => (
+              <th
+                key={label}
+                style={{
+                  width,
+                  padding: "14px 20px",
+                  textAlign: "left",
+                  fontSize: "0.7rem",
+                  fontWeight: 700,
+                  letterSpacing: "0.08em",
+                  textTransform: "uppercase",
+                  color: "var(--muted)",
+                }}
+              >
+                {label}
+              </th>
+            ))}
           </tr>
         </thead>
+
+        {/* Body */}
         <tbody>
-          {data.map((user) => (
-            <tr key={user.rank} style={{ borderTop: "1px solid rgba(255,255,255,0.06)" }}>
-              <td style={{ padding: "20px 20px" }}>#{user.rank}</td>
-              <td style={{ padding: "20px 20px" }}>
-                <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
-                  <Avatar avatar={user.avatar} name={user.name} />
-                  <span>{user.name}</span>
-                </div>
-              </td>
-              <td style={{ padding: "20px 20px" }}>{user.title}</td>
-              <td style={{ padding: "20px 20px" }}>{user.specialization}</td>
-              <td style={{ padding: "20px 20px" }} className="green">{user.points.toLocaleString()}</td>
-              <td style={{ padding: "20px 20px" }}>{user.cases}</td>
-              <td style={{ padding: "20px 20px" }} className="orange">
-                <div className="flex items-center gap-1">
-                  {user.streak} <Flame className="w-4 h-4" /> 
-                </div>
-              </td>
-            </tr>
-          ))}
+          {data.map((user, i) => {
+            const isTop3 = user.rank <= 3;
+            return (
+              <tr
+                key={user.rank}
+                style={{
+                  borderTop: i === 0 ? "none" : "1px solid var(--border)",
+                  background: isTop3 ? "rgba(var(--brand-rgb, 202,138,4), 0.04)" : "transparent",
+                  transition: "background 0.15s",
+                }}
+                onMouseEnter={(e) => (e.currentTarget.style.background = "rgba(128,128,128,0.07)")}
+                onMouseLeave={(e) => (e.currentTarget.style.background = isTop3 ? "rgba(202,138,4,0.04)" : "transparent")}
+              >
+                {/* Rank */}
+                <td style={{ padding: "18px 20px", fontWeight: 700, color: "var(--text)" }}>
+                  <span style={{ display: "flex", alignItems: "center", gap: 6 }}>
+                    #{user.rank}
+                    {RANK_MEDAL[user.rank] && (
+                      <span style={{ fontSize: "1rem" }}>{RANK_MEDAL[user.rank]}</span>
+                    )}
+                  </span>
+                </td>
+
+                {/* Detective */}
+                <td style={{ padding: "18px 20px" }}>
+                  <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+                    <Avatar avatar={user.avatar} name={user.name} />
+                    <span style={{ fontWeight: 600, color: "var(--text)" }}>{user.name}</span>
+                  </div>
+                </td>
+
+                {/* Title badge */}
+                <td style={{ padding: "18px 20px" }}>
+                  <span
+                    style={{
+                      display: "inline-block",
+                      padding: "3px 10px",
+                      borderRadius: 999,
+                      fontSize: "0.72rem",
+                      fontWeight: 700,
+                      letterSpacing: "0.05em",
+                      textTransform: "uppercase",
+                      border: "1px solid var(--border)",
+                      color: "var(--brand)",
+                      background: "rgba(202,138,4,0.08)",
+                    }}
+                  >
+                    {user.title}
+                  </span>
+                </td>
+
+                {/* Specialization */}
+                <td style={{ padding: "18px 20px", color: "var(--muted)" }}>
+                  {user.specialization}
+                </td>
+
+                {/* Investigation Points */}
+                <td style={{ padding: "18px 20px", fontWeight: 700, color: "var(--brand)" }}>
+                  {user.points.toLocaleString()}
+                </td>
+
+                {/* Cases Solved */}
+                <td style={{ padding: "18px 20px", color: "var(--muted)" }}>
+                  {user.cases}
+                </td>
+
+                {/* Streak */}
+                <td style={{ padding: "18px 20px" }}>
+                  <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
+                    <Flame style={{ width: 16, height: 16, color: "#ea580c" }} />
+                    <span style={{ fontWeight: 600, color: "#ea580c" }}>{user.streak}</span>
+                  </div>
+                </td>
+              </tr>
+            );
+          })}
         </tbody>
       </table>
     </div>
   );
 };
 
-export default LeaderboardTable;
+export default LeaderboardTable;
\ No newline at end of file
diff --git a/crackcode/client/src/pages/leaderboard/leaderboardPage.jsx b/crackcode/client/src/pages/leaderboard/leaderboardPage.jsx
index 4160924f..a80b9db8 100644
--- a/crackcode/client/src/pages/leaderboard/leaderboardPage.jsx
+++ b/crackcode/client/src/pages/leaderboard/leaderboardPage.jsx
@@ -77,10 +77,10 @@ const LeaderboardPage = () => {
     <div className="min-h-screen flex flex-col" style={{ background: 'var(--bg)', color: 'var(--text)' }}>
       <Header variant="empty" showBackBtn={false}/>
 
-      <main className="flex-1 px-6 sm:px-10 py-10 mt-20">
+      <main className="flex-1 px-6 sm:px-10 py-8 mt-15">
 
          {/* Title + Filter buttons */}
-        <div className="flex items-center justify-between max-w-5xl mx-auto mt-20 mb-12">
+        <div className="flex items-center justify-between max-w-5xl mx-auto mt-12 mb-10">
           <div className="text-center flex-1">
             <div className="flex flex-col gap-5">
               <h1 
diff --git a/crackcode/server/package-lock.json b/crackcode/server/package-lock.json
index 543f0706..4d93a877 100644
--- a/crackcode/server/package-lock.json
+++ b/crackcode/server/package-lock.json
@@ -62,6 +62,7 @@
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -974,6 +975,7 @@
       "resolved": "https://registry.npmjs.org/@redis/client/-/client-5.11.0.tgz",
       "integrity": "sha512-GHoprlNQD51Xq2Ztd94HHV94MdFZQ3CVrpA04Fz8MVoHM0B7SlbmPEVIjwTbcv58z8QyjnrOuikS0rWF03k5dQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cluster-key-slot": "1.1.2"
       },
@@ -1140,6 +1142,7 @@
       "integrity": "sha512-jp2P3tQMSxWugkCUKLRPVUpGaL5MVFwF8RDuSRztfwgN1wmqJeMSbKlnEtQqU8UrhTmzEmZdu2I6v2dpp7XIxw==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~7.18.0"
       }
@@ -1533,6 +1536,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -2326,6 +2330,7 @@
       "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
       "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "accepts": "^2.0.0",
         "body-parser": "^2.2.1",