diff --git a/resources/lang/en.json b/resources/lang/en.json
index c18d7be1a..d3c3d4e62 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -224,6 +224,8 @@
     "total_gold": "Total",
     "all_gold": "All gold",
     "trade": "Trade",
+    "train_trade": "Train",
+    "naval_trade": "Tradeship",
     "conquest_gold": "Conquered player gold",
     "stolen_gold": "Stolen with warships",
     "num_of_conquests": "Number of conquered players",
diff --git a/src/client/GameInfoModal.ts b/src/client/GameInfoModal.ts
index a1f50e4b7..917665a93 100644
--- a/src/client/GameInfoModal.ts
+++ b/src/client/GameInfoModal.ts
@@ -49,7 +49,9 @@ export class GameInfoModal extends LitElement {
         title="${translateText("game_info_modal.title")}"
         translationKey="main.game_info"
       >
-        <div class="flex flex-col items-center px-25 text-center mb-4">
+        <div
+          class="h-full flex flex-col items-center px-25 text-center mb-4 scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent"
+        >
           <div class="w-75 sm:w-125">
             ${this.isLoadingGame
               ? this.renderLoadingAnimation()
@@ -108,7 +110,7 @@ export class GameInfoModal extends LitElement {
     const isUnusualThumbnailSize = hasUnusualThumbnailSize(info.config.gameMap);
     return html`
       <div
-        class="h-37.5 flex relative justify-between rounded-xl bg-blue-600 items-center"
+        class="h-37.5 flex relative justify-between rounded-xl bg-black/20 items-center"
       >
         ${this.mapImage
           ? html`<img
@@ -140,7 +142,7 @@ export class GameInfoModal extends LitElement {
     const bestScore =
       this.rankedPlayers.length > 0 ? this.score(this.rankedPlayers[0]) : 0;
     return html`
-      <ul class="">
+      <ul>
         <ranking-header
           .rankType=${this.rankType}
           @sort=${this.sort}
diff --git a/src/client/components/baseComponents/Modal.ts b/src/client/components/baseComponents/Modal.ts
index 3094faf99..4e521ecd9 100644
--- a/src/client/components/baseComponents/Modal.ts
+++ b/src/client/components/baseComponents/Modal.ts
@@ -63,7 +63,7 @@ export class OModal extends LitElement {
   render() {
     const backdropClass = this.inline
       ? "relative z-10 w-full h-full flex items-stretch bg-transparent"
-      : "fixed inset-0 z-[9999] bg-black/70 flex items-center justify-center overflow-hidden";
+      : "fixed inset-0 z-[9999] bg-black/60 flex items-center justify-center overflow-hidden";
 
     const wrapperClass = this.inline
       ? "relative flex flex-col w-full h-full m-0 max-w-full max-h-none shadow-none"
@@ -95,7 +95,7 @@ export class OModal extends LitElement {
                     </div>`}
                 ${!this.hideHeader && this.title
                   ? html`<div
-                      class="px-[1.4rem] py-[1rem] pt-0 text-2xl font-bold text-white"
+                      class="px-[1.4rem] py-[1rem] text-2xl font-bold text-white"
                     >
                       ${this.title}
                     </div>`
diff --git a/src/client/components/baseComponents/ranking/PlayerRow.ts b/src/client/components/baseComponents/ranking/PlayerRow.ts
index 9989962a9..773188c8b 100644
--- a/src/client/components/baseComponents/ranking/PlayerRow.ts
+++ b/src/client/components/baseComponents/ranking/PlayerRow.ts
@@ -27,15 +27,13 @@ export class PlayerRow extends LitElement {
     const visibleBorder = player.winner || this.currentPlayer;
     return html`
       <li
-        class="${player.winner
-          ? "bg-linear-to-r via-none from-sky-400 to-blue-700"
-          : "bg-slate-700"} border-2
+        class="${player.winner ? "bg-black/20" : "bg-black/20"} border-b-1
           ${player.winner
-          ? "border-yellow-500"
+          ? "border-yellow-500 border-1 box-content"
           : visibleBorder
-            ? "border-yellow-50"
-            : "border-yellow-50/0"}
-          relative pt-1 pb-1 pr-2 pl-2 sm:pl-5 sm:pr-5 mb-1.25 rounded-lg flex justify-between items-center hover:bg-slate-500 transition duration-150 ease-in-out"
+            ? "border-white/5"
+            : "border-transparent"}
+           relative pt-1 pb-1 pr-2 pl-2 sm:pl-5 sm:pr-5 flex justify-between items-center hover:bg-white/[0.07] transition-colors duration-150 ease-in-out"
       >
         <div
           class="font-bold text-right w-7.5 text-lg text-white absolute -left-10"
@@ -93,7 +91,7 @@ export class PlayerRow extends LitElement {
       </div>
       <div>
         <div
-          class="font-bold rounded-[50%] size-7.5 leading-[1.6rem] border border-gray-200 text-center bg-white text-black"
+          class="font-bold rounded-[50%] size-7.5 leading-[1.6rem] border border-white/10 text-center bg-white/5 text-white/80"
         >
           ${Number(this.score).toFixed(0)}
         </div>
@@ -106,10 +104,10 @@ export class PlayerRow extends LitElement {
     const width = Math.min(Math.max((this.score / bestScore) * 100, 0), 100);
     return html`
       <div class="w-full pr-2.5 m-auto">
-        <div class="h-1.75 bg-neutral-800 w-full">
+        <div class="h-1.75 bg-white/10 w-full">
           <!-- bar background -->
           <div
-            class="h-1.75 bg-white w-(--width)"
+            class="h-1.75 bg-blue-500/50 w-(--width)"
             style="--width: ${width}%;"
           ></div>
         </div>
@@ -121,8 +119,8 @@ export class PlayerRow extends LitElement {
     return html`
       <div
         class="${highlight
-          ? "font-bold text-[18px]"
-          : "leading-[24px]"} min-w-7.5 sm:min-w-15 inline-block text-center"
+          ? "font-bold text-[18px] text-white/80"
+          : "leading-[24px] text-white/40"} min-w-7.5 sm:min-w-15 inline-block text-center"
       >
         ${renderNumber(value)}
       </div>
@@ -157,13 +155,13 @@ export class PlayerRow extends LitElement {
     return html`
       <div class="flex justify-between text-sm align-baseline">
         ${this.renderMultiScoreType(
-          Number(navalTrade),
-          this.rankType === RankType.NavalTrade,
+          Number(ownTrainTrade + otherTrainTrade),
+          this.rankType === RankType.TrainTrade,
         )}
         /
         ${this.renderMultiScoreType(
-          Number(ownTrainTrade + otherTrainTrade),
-          this.rankType === RankType.TrainTrade,
+          Number(navalTrade),
+          this.rankType === RankType.NavalTrade,
         )}
       </div>
     `;
@@ -189,7 +187,7 @@ export class PlayerRow extends LitElement {
 
       <div class="flex gap-2">
         <div
-          class="font-bold rounded-md w-15 shrink-0 text-sm sm:w-25 leading-[1.9rem] text-center"
+          class="font-bold rounded-md w-15 text-white/80 text-sm sm:w-25 leading-[1.9rem] text-center"
         >
           ${renderNumber(this.score)}
         </div>
@@ -200,18 +198,20 @@ export class PlayerRow extends LitElement {
 
   private renderTradeScore() {
     return html`
-      <div class="flex gap-3 items-center">
-        ${this.renderPlayerIcon()}
-        <div class="text-left w-31.25 sm:w-50">${this.renderPlayerName()}</div>
-      </div>
-
-      <div class="flex gap-2 w-50 justify-between items-center">
-        <div
-          class="font-bold rounded-md w-15 shrink-0 text-sm sm:w-25 leading-[1.9rem] text-center"
-        >
-          ${this.renderAllTrades()}
+      <div class="flex flex-col sm:flex-row gap-1 text-left w-full">
+        <div class="flex gap-3 items-center">
+          ${this.renderPlayerIcon()}
+          <div class="text-left w-31.25 sm:w-50">
+            ${this.renderPlayerName()}
+          </div>
+        </div>
+
+        <div class="flex gap-2 justify-between items-center w-full">
+          <div class="rounded-md text-sm leading-[1.9rem] text-center w-full">
+            ${this.renderAllTrades()}
+          </div>
+          <img src="/images/GoldCoinIcon.svg" class="w-5 size-3.5 sm:size-5" />
         </div>
-        <img src="/images/GoldCoinIcon.svg" class="w-5 size-3.5 sm:size-5" />
       </div>
     `;
   }
@@ -221,7 +221,7 @@ export class PlayerRow extends LitElement {
       <div class="flex gap-1 items-center w-50 shrink-0">
         ${this.player.tag ? this.renderTag(this.player.tag) : ""}
         <div
-          class="text-xs sm:text-sm font-bold text-ellipsis w-37.5 shrink-0 overflow-hidden whitespace-nowrap"
+          class="text-xs sm:text-sm font-bold tracking-wide text-white/80 text-ellipsis w-37.5 shrink-0 overflow-hidden whitespace-nowrap"
         >
           ${this.player.username}
         </div>
@@ -232,7 +232,7 @@ export class PlayerRow extends LitElement {
   private renderTag(tag: string) {
     return html`
       <div
-        class="bg-white text-black rounded-lg sm:rounded-xl border border-gray-200 text-xs leading-3 sm:leading-4.5 text-blue-900 h-3.75 px-1 sm:h-5 sm:px-2 font-bold"
+        class="px-2.5 py-1 rounded bg-blue-500/10 border border-blue-500/20 text-blue-300 font-bold text-xs tracking-wide group-hover:bg-blue-500/20 transition-colors"
       >
         ${tag}
       </div>
diff --git a/src/client/components/baseComponents/ranking/RankingControls.ts b/src/client/components/baseComponents/ranking/RankingControls.ts
index 25321d8aa..e32933efe 100644
--- a/src/client/components/baseComponents/ranking/RankingControls.ts
+++ b/src/client/components/baseComponents/ranking/RankingControls.ts
@@ -57,9 +57,9 @@ export class RankingControls extends LitElement {
   private renderButton(type: RankType, active: boolean, label: string) {
     return html`
       <button
-        class="rounded-lg bg-blue-600 text-white text-lg p-3 hover:bg-blue-400 ${active
-          ? "active outline-2 outline-white font-bold"
-          : ""}"
+        class="px-6 py-2 text-xs font-bold transition-all duration-200 rounded-lg uppercase tracking-widest hover:text-white hover:bg-white/5 border ${active
+          ? "bg-blue-500/20 text-blue-400 border-blue-500/30 shadow-[0_0_15px_rgba(59,130,246,0.2)]"
+          : "text-white/40 border-transparent"}"
         @click=${() => this.onSort(type)}
       >
         ${translateText(label)}
@@ -113,8 +113,8 @@ export class RankingControls extends LitElement {
     return html`
       <button
         @click=${() => this.onSort(type)}
-        class="rounded-md bg-blue-50 text-black text-sm p-2 hover:bg-blue-200 ${active
-          ? "outline-2 outline-white font-bold"
+        class="text-[10px] font-bold uppercase tracking-wider bg-white/5 border border-white/10 hover:bg-white/20 px-3 py-1 rounded text-white/60 hover:text-white transition-colors ${active
+          ? "outline-1 outline-white/80 font-bold"
           : ""}"
       >
         ${translateText(label)}
diff --git a/src/client/components/baseComponents/ranking/RankingHeader.ts b/src/client/components/baseComponents/ranking/RankingHeader.ts
index 6869b9526..dae3db3c1 100644
--- a/src/client/components/baseComponents/ranking/RankingHeader.ts
+++ b/src/client/components/baseComponents/ranking/RankingHeader.ts
@@ -14,7 +14,7 @@ export class RankingHeader extends LitElement {
   render() {
     return html`
       <li
-        class="text-lg bg-gray-800 font-bold relative pt-2 pb-2 pr-5 pl-5 mb-1.25 rounded-md flex justify-between items-center"
+        class="text-lg border-white/5 bg-white/[0.02] text-white/60 text-xs uppercase tracking-wider relative pt-2 pb-2 pr-5 pl-5 flex justify-between items-center"
       >
         ${this.renderHeaderContent()}
       </li>
@@ -60,9 +60,15 @@ export class RankingHeader extends LitElement {
       case RankType.TrainTrade:
         return html`
           <div class="flex justify-between sm:px-17.5 w-full">
-            ${this.renderMultipleChoiceHeaderButton("🚂", RankType.TrainTrade)}
+            ${this.renderMultipleChoiceHeaderButton(
+              translateText("game_info_modal.train_trade"),
+              RankType.TrainTrade,
+            )}
             /
-            ${this.renderMultipleChoiceHeaderButton("🚢", RankType.NavalTrade)}
+            ${this.renderMultipleChoiceHeaderButton(
+              translateText("game_info_modal.naval_trade"),
+              RankType.NavalTrade,
+            )}
           </div>
         `;
       case RankType.ConqueredGold:
@@ -85,7 +91,7 @@ export class RankingHeader extends LitElement {
         @click=${() => this.onSort(type)}
         class="${this.rankType === type
           ? "border-b-2 border-b-white"
-          : nothing} h-[28px]"
+          : nothing}"
       >
         ${label}
       </button>