diff --git a/frontend/components/leaderboard/LeaderboardClient.tsx b/frontend/components/leaderboard/LeaderboardClient.tsx
index 2d196b1e..970644a9 100644
--- a/frontend/components/leaderboard/LeaderboardClient.tsx
+++ b/frontend/components/leaderboard/LeaderboardClient.tsx
@@ -25,7 +25,10 @@ export default function LeaderboardClient({
   return (
     <div className="relative min-h-screen w-full">
       <div className="fixed inset-0 z-0">
-        <DynamicGridBackground className="w-full h-full bg-gray-50 transition-colors duration-300 dark:bg-transparent" />
+        <DynamicGridBackground
+          showStaticGrid
+          className="w-full h-full bg-gray-50 transition-colors duration-300 dark:bg-transparent"
+        />
       </div>
 
       <div className="relative z-10 w-full max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center pt-20 pb-10">
diff --git a/frontend/components/leaderboard/LeaderboardPodium.tsx b/frontend/components/leaderboard/LeaderboardPodium.tsx
index 8db2879d..febd3937 100644
--- a/frontend/components/leaderboard/LeaderboardPodium.tsx
+++ b/frontend/components/leaderboard/LeaderboardPodium.tsx
@@ -16,7 +16,6 @@ const rankConfig = {
       text: 'text-yellow-600 dark:text-yellow-400',
       badge: 'bg-yellow-400 dark:bg-yellow-500',
       ring: 'border-yellow-400 dark:border-yellow-500',
-      barTop: 'bg-yellow-400 dark:bg-yellow-500',
     },
   },
   2: {
@@ -28,7 +27,6 @@ const rankConfig = {
       text: 'text-slate-600 dark:text-slate-400',
       badge: 'bg-slate-400 dark:bg-slate-500',
       ring: 'border-slate-300 dark:border-slate-500',
-      barTop: 'bg-slate-300 dark:bg-slate-500',
     },
   },
   3: {
@@ -40,7 +38,6 @@ const rankConfig = {
       text: 'text-orange-600 dark:text-orange-400',
       badge: 'bg-orange-400 dark:bg-orange-500',
       ring: 'border-orange-300 dark:border-orange-500',
-      barTop: 'bg-orange-300 dark:bg-orange-500',
     },
   },
 } as const;
@@ -55,40 +52,11 @@ export function LeaderboardPodium({ topThree }: { topThree: User[] }) {
   return (
     <div className="flex items-end justify-center gap-4 md:gap-8 h-[350px] w-full max-w-3xl mx-auto">
       {podiumOrder.map(user => {
-        const rank = user.rank;
+        const rank = user.rank as 1 | 2 | 3;
         const isFirst = rank === 1;
 
-        const height = rank === 1 ? '100%' : rank === 2 ? '40%' : '35%';
-        const delay = rank === 1 ? 0.4 : rank === 2 ? 0.2 : 0.6;
-
-        const rankStyles = {
-          1: {
-            border: 'border-yellow-400 dark:border-yellow-500',
-            bg: 'bg-yellow-400/20 dark:bg-yellow-500/10',
-            text: 'text-yellow-600 dark:text-yellow-400',
-            badge: 'bg-yellow-400 dark:bg-yellow-500',
-            ring: 'border-yellow-400 dark:border-yellow-500',
-            barTop: 'bg-yellow-400 dark:bg-yellow-500',
-          },
-          2: {
-            border: 'border-slate-300 dark:border-slate-500',
-            bg: 'bg-slate-300/20 dark:bg-slate-500/10',
-            text: 'text-slate-600 dark:text-slate-400',
-            badge: 'bg-slate-400 dark:bg-slate-500',
-            ring: 'border-slate-300 dark:border-slate-500',
-            barTop: 'bg-slate-300 dark:bg-slate-500',
-          },
-          3: {
-            border: 'border-orange-300 dark:border-orange-500',
-            bg: 'bg-orange-300/20 dark:bg-orange-500/10',
-            text: 'text-orange-600 dark:text-orange-400',
-            badge: 'bg-orange-400 dark:bg-orange-500',
-            ring: 'border-orange-300 dark:border-orange-500',
-            barTop: 'bg-orange-300 dark:bg-orange-500',
-          },
-        };
-
-        const style = rankStyles[rank as 1 | 2 | 3] || rankStyles[2];
+        const config = rankConfig[rank] || rankConfig[2];
+        const { height, delay, style } = config;
 
         return (
           <div
@@ -141,7 +109,7 @@ export function LeaderboardPodium({ topThree }: { topThree: User[] }) {
 
               <div
                 className={cn(
-                  'font-mono text-[10px] md:text-xs font-bold mt-0.5',
+                  'font-mono font-bold mt-0.5 text-base md:text-lg',
                   style.text
                 )}
               >
@@ -164,14 +132,7 @@ export function LeaderboardPodium({ topThree }: { topThree: User[] }) {
                 style.bg,
                 style.border
               )}
-            >
-              <div
-                className={cn(
-                  'w-full h-1 md:h-1.5 absolute top-0 left-0 opacity-80',
-                  style.barTop
-                )}
-              />
-            </motion.div>
+            ></motion.div>
           </div>
         );
       })}
diff --git a/frontend/components/leaderboard/LeaderboardTable.tsx b/frontend/components/leaderboard/LeaderboardTable.tsx
index 234e391d..6a450992 100644
--- a/frontend/components/leaderboard/LeaderboardTable.tsx
+++ b/frontend/components/leaderboard/LeaderboardTable.tsx
@@ -34,25 +34,23 @@ export function LeaderboardTable({
     <div className="w-full max-w-4xl flex flex-col gap-4">
       <div className="bg-white dark:bg-white/5 backdrop-blur-md rounded-2xl border border-slate-200 dark:border-white/10 overflow-hidden shadow-lg dark:shadow-2xl">
         <div className="overflow-x-auto w-full">
-          {/* ✅ ВИПРАВЛЕННЯ 1: border-separate + border-spacing-0 замість border-collapse */}
-          <table className="w-full min-w-[350px] text-left border-separate border-spacing-0">
+          <table className="w-full text-left border-separate border-spacing-0">
             <caption className="sr-only">{t('tableCaption')}</caption>
 
             <thead className="bg-slate-50/80 dark:bg-white/5">
               <tr>
-                <th className="px-3 sm:px-6 py-4 sm:py-5 text-center text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest w-[15%] border-b border-slate-200 dark:border-white/10">
+                <th className="px-2 sm:px-6 py-3 sm:py-5 text-center text-[10px] sm:text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest w-12 sm:w-[15%] border-b border-slate-200 dark:border-white/10">
                   {t('rank')}
                 </th>
-                <th className="px-3 sm:px-6 py-4 sm:py-5 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest w-[60%] border-b border-slate-200 dark:border-white/10">
+                <th className="px-2 sm:px-6 py-3 sm:py-5 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest w-auto border-b border-slate-200 dark:border-white/10">
                   {t('user')}
                 </th>
-                <th className="px-3 sm:px-6 py-4 sm:py-5 text-right text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest w-[25%] border-b border-slate-200 dark:border-white/10">
+                <th className="px-2 sm:px-6 py-3 sm:py-5 text-right text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest w-[25%] sm:w-[20%] border-b border-slate-200 dark:border-white/10">
                   {t('score')}
                 </th>
               </tr>
             </thead>
 
-            {/* ✅ ВИПРАВЛЕННЯ 2: Прибрали divide-y, бо він конфліктує з border-separate */}
             <tbody>
               {topUsers.map(user => {
                 const isMe =
@@ -81,7 +79,7 @@ export function LeaderboardTable({
 
           <div className="bg-white dark:bg-white/5 backdrop-blur-md rounded-2xl border-2 border-[var(--accent-primary)] overflow-hidden shadow-[0_0_20px_var(--accent-primary)]">
             <div className="overflow-x-auto w-full">
-              <table className="w-full min-w-[350px] text-left border-separate border-spacing-0">
+              <table className="w-full text-left border-separate border-spacing-0">
                 <tbody>
                   <TableRow user={matchedUser} isCurrentUser={true} t={t} />
                 </tbody>
@@ -103,20 +101,23 @@ function TableRow({
   isCurrentUser: boolean;
   t: ReturnType<typeof useTranslations>;
 }) {
-  // ✅ ВИПРАВЛЕННЯ 3: Спільний клас для ліній між рядками
   const cellClass =
-    'px-3 sm:px-6 py-4 border-b border-slate-100 dark:border-white/5';
+    'px-2 sm:px-6 py-3 sm:py-4 border-b border-slate-100 dark:border-white/5';
+
+  const leftBorderClass = isCurrentUser
+    ? 'border-l-[1px] sm:border-l-[1px] border-l-[var(--accent-primary)]'
+    : 'border-l-[1px] sm:border-l-[1px] border-l-transparent';
 
   return (
     <tr
       className={cn(
         'group transition-all duration-300',
         isCurrentUser
-          ? 'bg-[color-mix(in_srgb,var(--accent-primary),transparent_90%)] border-l-[4px] sm:border-l-[6px] border-l-[var(--accent-primary)] shadow-inner'
-          : 'hover:bg-slate-50 dark:hover:bg-white/5 border-l-[4px] sm:border-l-[6px] border-l-transparent'
+          ? 'bg-[color-mix(in_srgb,var(--accent-primary),transparent_90%)] shadow-inner'
+          : 'hover:bg-slate-50/60 dark:hover:bg-white/[0.04]'
       )}
     >
-      <td className={cellClass}>
+      <td className={cn(cellClass, leftBorderClass)}>
         <div className="flex justify-center items-center">
           <RankBadge rank={user.rank} />
         </div>
@@ -139,18 +140,18 @@ function TableRow({
           <div className="flex flex-col min-w-0">
             <span
               className={cn(
-                'font-medium text-sm transition-colors flex items-center gap-2 truncate',
+                'font-medium text-sm transition-colors flex items-center gap-1 sm:gap-2 truncate',
                 isCurrentUser
                   ? 'text-[var(--accent-primary)] font-black text-sm sm:text-base'
-                  : 'text-slate-700 dark:text-slate-200 group-hover:text-[var(--accent-primary)]'
+                  : 'text-slate-700 dark:text-slate-200 group-hover:text-[var(--accent-primary)] dark:group-hover:text-[var(--accent-primary)]'
               )}
             >
-              <span className="truncate max-w-[120px] sm:max-w-none">
+              <span className="truncate max-w-[100px] sm:max-w-none">
                 {user.username}
               </span>
 
               {isCurrentUser && (
-                <div className="relative flex-shrink-0 flex items-center justify-center w-6 h-6 sm:w-8 sm:h-8 ml-1">
+                <div className="relative flex-shrink-0 flex items-center justify-center w-5 h-5 sm:w-8 sm:h-8 ml-1">
                   <motion.div
                     animate={{ scale: [1, 1.2, 1] }}
                     transition={{
@@ -168,10 +169,6 @@ function TableRow({
                       <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
                     </svg>
                   </motion.div>
-
-                  <span className="relative z-10 text-[6px] sm:text-[8px] font-black text-white uppercase tracking-tighter -mt-0.5">
-                    {t('you') || 'YOU'}
-                  </span>
                 </div>
               )}
             </span>
@@ -191,8 +188,8 @@ function TableRow({
           className={cn(
             'font-mono font-bold inline-block transition-all',
             isCurrentUser
-              ? 'text-[var(--accent-primary)] scale-110 drop-shadow-sm text-base sm:text-lg'
-              : 'text-slate-700 dark:text-slate-300 group-hover:scale-105'
+              ? 'text-[var(--accent-primary)] scale-110 drop-shadow-sm text-sm sm:text-lg'
+              : 'text-slate-700 dark:text-slate-300 group-hover:scale-105 text-sm sm:text-base'
           )}
         >
           {user.points.toLocaleString()}
@@ -205,32 +202,32 @@ function TableRow({
 function RankBadge({ rank }: { rank: number }) {
   if (rank === 1) {
     return (
-      <div className="relative w-10 h-6 sm:w-14 sm:h-8 flex items-center justify-center gap-1 sm:gap-1.5 rounded-lg bg-yellow-100 dark:bg-yellow-500/20 border border-yellow-500/50 shadow-[0_0_10px_rgba(234,179,8,0.3)]">
+      <div className="relative w-8 h-6 sm:w-14 sm:h-8 flex items-center justify-center gap-0.5 sm:gap-1.5 rounded-md sm:rounded-lg bg-yellow-100 dark:bg-yellow-500/20 border border-yellow-500/50 shadow-[0_0_10px_rgba(234,179,8,0.3)]">
         <span className="font-black text-xs sm:text-base text-yellow-700 dark:text-yellow-400">
           1
         </span>
-        <Trophy className="w-3 h-3 sm:w-4 sm:h-4 text-yellow-600 dark:text-yellow-400" />
+        <Trophy className="w-2.5 h-2.5 sm:w-4 sm:h-4 text-yellow-600 dark:text-yellow-400" />
         <div className="absolute -top-1 -right-1 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-yellow-400 rounded-full animate-pulse" />
       </div>
     );
   }
   if (rank === 2) {
     return (
-      <div className="w-10 h-6 sm:w-14 sm:h-8 flex items-center justify-center gap-1 sm:gap-1.5 rounded-lg bg-slate-100 dark:bg-slate-400/10 border border-slate-300 dark:border-slate-400/30">
+      <div className="w-8 h-6 sm:w-14 sm:h-8 flex items-center justify-center gap-0.5 sm:gap-1.5 rounded-md sm:rounded-lg bg-slate-100 dark:bg-slate-400/10 border border-slate-300 dark:border-slate-400/30">
         <span className="font-black text-xs sm:text-base text-slate-600 dark:text-slate-300">
           2
         </span>
-        <Medal className="w-3 h-3 sm:w-4 sm:h-4 text-slate-500 dark:text-slate-300" />
+        <Medal className="w-2.5 h-2.5 sm:w-4 sm:h-4 text-slate-500 dark:text-slate-300" />
       </div>
     );
   }
   if (rank === 3) {
     return (
-      <div className="w-10 h-6 sm:w-14 sm:h-8 flex items-center justify-center gap-1 sm:gap-1.5 rounded-lg bg-orange-50 dark:bg-orange-500/10 border border-orange-300 dark:border-orange-500/30">
+      <div className="w-8 h-6 sm:w-14 sm:h-8 flex items-center justify-center gap-0.5 sm:gap-1.5 rounded-md sm:rounded-lg bg-orange-50 dark:bg-orange-500/10 border border-orange-300 dark:border-orange-500/30">
         <span className="font-black text-xs sm:text-base text-orange-700 dark:text-orange-400">
           3
         </span>
-        <Medal className="w-3 h-3 sm:w-4 sm:h-4 text-orange-600 dark:text-orange-400" />
+        <Medal className="w-2.5 h-2.5 sm:w-4 sm:h-4 text-orange-600 dark:text-orange-400" />
       </div>
     );
   }