diff --git a/frontend/src/pages/MonthlyLadder.css b/frontend/src/pages/MonthlyLadder.css
index f8f76da..dbf2f4d 100644
--- a/frontend/src/pages/MonthlyLadder.css
+++ b/frontend/src/pages/MonthlyLadder.css
@@ -1,12 +1,12 @@
 .ladder-page {
   min-height: 100vh;
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+  background: var(--bg-primary);
   position: relative;
   overflow-x: hidden;
   padding-bottom: 80px;
 }
 
-/* Новогодние снежинки */
+/* Новогодние снежинки - тонкие, не навязчивые */
 .new-year-decorations {
   position: fixed;
   top: 0;
@@ -15,56 +15,57 @@
   height: 100%;
   pointer-events: none;
   z-index: 1;
+  opacity: 0.3;
 }
 
 .snowflake {
   position: absolute;
-  color: rgba(255, 255, 255, 0.8);
-  font-size: 20px;
+  color: var(--text-secondary);
+  font-size: 16px;
   animation: fall linear infinite;
-  animation-duration: 10s;
+  animation-duration: 15s;
 }
 
 .snowflake:nth-child(1) {
   left: 10%;
   animation-delay: 0s;
-  animation-duration: 8s;
+  animation-duration: 12s;
 }
 
 .snowflake:nth-child(2) {
   left: 30%;
   animation-delay: 2s;
-  animation-duration: 12s;
+  animation-duration: 18s;
 }
 
 .snowflake:nth-child(3) {
   left: 50%;
   animation-delay: 4s;
-  animation-duration: 10s;
+  animation-duration: 14s;
 }
 
 .snowflake:nth-child(4) {
   left: 70%;
   animation-delay: 1s;
-  animation-duration: 9s;
+  animation-duration: 16s;
 }
 
 .snowflake:nth-child(5) {
   left: 85%;
   animation-delay: 3s;
-  animation-duration: 11s;
+  animation-duration: 17s;
 }
 
 .snowflake:nth-child(6) {
   left: 20%;
   animation-delay: 5s;
-  animation-duration: 13s;
+  animation-duration: 20s;
 }
 
 @keyframes fall {
   0% {
     transform: translateY(-100vh) rotate(0deg);
-    opacity: 1;
+    opacity: 0.3;
   }
   100% {
     transform: translateY(100vh) rotate(360deg);
@@ -75,31 +76,27 @@
 .ladder-header {
   position: sticky;
   top: 0;
-  background: rgba(26, 26, 46, 0.95);
-  backdrop-filter: blur(10px);
+  background: var(--bg-secondary);
   padding: 16px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  border-bottom: 1px solid var(--divider-color);
   z-index: 10;
 }
 
 .ladder-header h1 {
   font-size: 20px;
   font-weight: 700;
-  background: linear-gradient(135deg, #FFD700, #FFA500, #FF6347);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  color: var(--text-primary);
 }
 
 .back-btn {
   width: 44px;
   height: 44px;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.1);
-  color: #fff;
+  background: transparent;
+  color: var(--text-primary);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -107,34 +104,21 @@
   cursor: pointer;
 }
 
-/* Карточка отсчета */
+/* Карточка отсчета - в стиле Nakama с новогодними акцентами */
 .countdown-card {
   margin: 16px;
-  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.15));
-  border: 2px solid rgba(255, 215, 0, 0.3);
-  backdrop-filter: blur(10px);
+  background: var(--bg-secondary);
+  border-radius: 16px;
+  padding: 20px;
+  box-shadow: 0 2px 8px var(--shadow-md);
   position: relative;
   overflow: hidden;
-}
-
-.countdown-card::before {
-  content: '';
-  position: absolute;
-  top: -50%;
-  left: -50%;
-  width: 200%;
-  height: 200%;
-  background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
-  animation: shimmer 3s ease-in-out infinite;
-}
-
-@keyframes shimmer {
-  0%, 100% {
-    transform: rotate(0deg);
-  }
-  50% {
-    transform: rotate(180deg);
-  }
+  border: 2px solid transparent;
+  background-image: 
+    linear-gradient(var(--bg-secondary), var(--bg-secondary)),
+    linear-gradient(135deg, #FFD700, #FFA500);
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
 }
 
 .countdown-title {
@@ -149,8 +133,7 @@
 .countdown-title h2 {
   font-size: 20px;
   font-weight: 700;
-  color: #FFD700;
-  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
+  color: var(--text-primary);
 }
 
 .gift-icon {
@@ -163,7 +146,7 @@
     transform: translateY(0);
   }
   50% {
-    transform: translateY(-10px);
+    transform: translateY(-5px);
   }
 }
 
@@ -188,14 +171,13 @@
   font-size: 32px;
   font-weight: 700;
   color: #FFD700;
-  text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
   min-width: 60px;
   text-align: center;
 }
 
 .countdown-label {
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--text-secondary);
   text-transform: uppercase;
 }
 
@@ -208,7 +190,7 @@
 
 .countdown-slogan {
   text-align: center;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--text-secondary);
   font-size: 14px;
   font-style: italic;
   margin-top: 16px;
@@ -216,12 +198,13 @@
   z-index: 1;
 }
 
-/* Топ пользователей */
+/* Топ пользователей - в стиле Nakama */
 .ladder-top {
   margin: 16px;
-  background: rgba(255, 255, 255, 0.05);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: var(--bg-secondary);
+  border-radius: 16px;
+  padding: 16px;
+  box-shadow: 0 2px 8px var(--shadow-md);
 }
 
 .ladder-top-header {
@@ -234,10 +217,7 @@
 .ladder-top-header h2 {
   font-size: 20px;
   font-weight: 700;
-  background: linear-gradient(135deg, #FFD700, #FFA500);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  color: var(--text-primary);
 }
 
 .info-btn {
@@ -245,18 +225,22 @@
   align-items: center;
   gap: 6px;
   padding: 8px 12px;
-  background: rgba(255, 215, 0, 0.2);
-  border: 1px solid rgba(255, 215, 0, 0.3);
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
   border-radius: 20px;
-  color: #FFD700;
+  color: var(--text-primary);
   font-size: 13px;
   cursor: pointer;
-  transition: all 0.3s;
+  transition: all 0.2s;
 }
 
 .info-btn:active {
   transform: scale(0.95);
-  background: rgba(255, 215, 0, 0.3);
+  background: var(--divider-color);
+}
+
+.info-btn svg {
+  color: #FFD700;
 }
 
 .top-users-list {
@@ -270,16 +254,14 @@
   align-items: center;
   gap: 12px;
   padding: 12px;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--bg-primary);
   border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  transition: all 0.3s;
+  transition: all 0.2s;
 }
 
 .top-user-item.current-user {
-  background: rgba(255, 215, 0, 0.15);
-  border-color: rgba(255, 215, 0, 0.4);
-  box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
+  background: rgba(255, 215, 0, 0.1);
+  border: 1px solid rgba(255, 215, 0, 0.3);
 }
 
 .user-rank {
@@ -292,7 +274,7 @@
 }
 
 .rank-icon {
-  filter: drop-shadow(0 0 8px currentColor);
+  filter: drop-shadow(0 0 4px currentColor);
 }
 
 .rank-icon.gold {
@@ -310,7 +292,7 @@
 .rank-number {
   font-size: 20px;
   font-weight: 700;
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--text-primary);
 }
 
 .user-avatar {
@@ -318,13 +300,12 @@
   height: 50px;
   border-radius: 50%;
   object-fit: cover;
-  border: 2px solid rgba(255, 215, 0, 0.3);
+  border: 2px solid var(--border-color);
   flex-shrink: 0;
 }
 
 .top-user-item.current-user .user-avatar {
   border-color: #FFD700;
-  box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
 }
 
 .user-info {
@@ -335,7 +316,7 @@
 .user-name {
   font-size: 16px;
   font-weight: 600;
-  color: #fff;
+  color: var(--text-primary);
   display: flex;
   align-items: center;
   gap: 6px;
@@ -366,14 +347,16 @@
 /* Карточка текущего пользователя */
 .current-user-card {
   margin: 16px;
-  background: rgba(255, 215, 0, 0.1);
-  border: 1px solid rgba(255, 215, 0, 0.3);
+  background: var(--bg-secondary);
+  border-radius: 16px;
+  padding: 16px;
+  box-shadow: 0 2px 8px var(--shadow-md);
 }
 
 .current-user-card h3 {
   font-size: 18px;
   font-weight: 600;
-  color: #FFD700;
+  color: var(--text-primary);
   margin-bottom: 12px;
 }
 
@@ -382,7 +365,7 @@
   align-items: center;
   gap: 12px;
   padding: 12px;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--bg-primary);
   border-radius: 12px;
 }
 
@@ -393,7 +376,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.8);
+  background: rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -406,8 +389,9 @@
   max-width: 500px;
   max-height: 80vh;
   overflow-y: auto;
-  background: linear-gradient(135deg, #1a1a2e, #16213e);
-  border: 2px solid rgba(255, 215, 0, 0.3);
+  background: var(--bg-secondary);
+  border-radius: 16px;
+  box-shadow: 0 4px 20px var(--shadow-lg);
   position: relative;
 }
 
@@ -416,26 +400,25 @@
   justify-content: space-between;
   align-items: center;
   padding: 16px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  border-bottom: 1px solid var(--divider-color);
   position: sticky;
   top: 0;
-  background: rgba(26, 26, 46, 0.95);
-  backdrop-filter: blur(10px);
+  background: var(--bg-secondary);
   z-index: 10;
 }
 
 .info-modal-header h2 {
   font-size: 20px;
   font-weight: 700;
-  color: #FFD700;
+  color: var(--text-primary);
 }
 
 .close-btn {
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.1);
-  color: #fff;
+  background: var(--bg-primary);
+  color: var(--text-primary);
   border: none;
   font-size: 24px;
   display: flex;
@@ -452,7 +435,7 @@
 .info-section {
   margin-bottom: 20px;
   padding-bottom: 20px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  border-bottom: 1px solid var(--divider-color);
 }
 
 .info-section:last-child {
@@ -464,28 +447,28 @@
 .info-section h3 {
   font-size: 16px;
   font-weight: 600;
-  color: #FFD700;
+  color: var(--text-primary);
   margin-bottom: 8px;
 }
 
 .info-section p {
   font-size: 14px;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--text-primary);
   line-height: 1.6;
   margin-bottom: 4px;
 }
 
 .info-limit {
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-secondary);
   font-size: 13px;
   font-style: italic;
 }
 
 .info-section.anti-fraud {
-  background: rgba(255, 69, 0, 0.1);
+  background: var(--bg-primary);
   padding: 12px;
   border-radius: 8px;
-  border: 1px solid rgba(255, 69, 0, 0.3);
+  border: 1px solid var(--border-color);
 }
 
 .info-section.anti-fraud h3 {
@@ -502,7 +485,7 @@
 .spinner {
   width: 40px;
   height: 40px;
-  border: 4px solid rgba(255, 215, 0, 0.2);
+  border: 3px solid var(--divider-color);
   border-top-color: #FFD700;
   border-radius: 50%;
   animation: spin 1s linear infinite;
@@ -514,8 +497,26 @@
   }
 }
 
-/* Темная тема - дополнительные стили */
-[data-theme="dark"] .ladder-page {
-  background: linear-gradient(135deg, #000000 0%, #1a1a2e 50%, #16213e 100%);
+/* Темная тема */
+[data-theme="dark"] .countdown-card {
+  background-image: 
+    linear-gradient(var(--bg-secondary), var(--bg-secondary)),
+    linear-gradient(135deg, #FFD700, #FFA500);
 }
 
+[data-theme="dark"] .snowflake {
+  color: var(--text-secondary);
+  opacity: 0.2;
+}
+
+[data-theme="dark"] .countdown-value {
+  color: #FFD700;
+}
+
+[data-theme="dark"] .countdown-separator {
+  color: #FFD700;
+}
+
+[data-theme="dark"] .user-tickets {
+  color: #FFD700;
+}
diff --git a/frontend/src/pages/MonthlyLadder.jsx b/frontend/src/pages/MonthlyLadder.jsx
index 3167683..7bed196 100644
--- a/frontend/src/pages/MonthlyLadder.jsx
+++ b/frontend/src/pages/MonthlyLadder.jsx
@@ -106,7 +106,7 @@ export default function MonthlyLadder({ user }) {
       </div>
 
       {/* Отсчет до нового года */}
-      <div className="countdown-card card">
+      <div className="countdown-card">
         <div className="countdown-title">
           <Gift size={24} className="gift-icon" />
           <h2>До Нового Года</h2>
@@ -136,7 +136,7 @@ export default function MonthlyLadder({ user }) {
       </div>
 
       {/* Топ 5 пользователей */}
-      <div className="ladder-top card">
+      <div className="ladder-top">
         <div className="ladder-top-header">
           <h2>Топ 5</h2>
           <button 
@@ -190,7 +190,7 @@ export default function MonthlyLadder({ user }) {
 
       {/* Текущий пользователь (если не в топе) */}
       {currentUser && currentUserRank > 5 && (
-        <div className="current-user-card card">
+        <div className="current-user-card">
           <h3>Ваша позиция</h3>
           <div className="current-user-item">
             <div className="user-rank">