diff --git a/src/client/graphics/GameRenderer.ts b/src/client/graphics/GameRenderer.ts
index b9f3d55c2..9b5b7eff2 100644
--- a/src/client/graphics/GameRenderer.ts
+++ b/src/client/graphics/GameRenderer.ts
@@ -22,7 +22,6 @@ import { NameLayer } from "./layers/NameLayer";
 import { OptionsMenu } from "./layers/OptionsMenu";
 import { PlayerInfoOverlay } from "./layers/PlayerInfoOverlay";
 import { PlayerPanel } from "./layers/PlayerPanel";
-import { PlayerTeamLabel } from "./layers/PlayerTeamLabel";
 import { ReplayPanel } from "./layers/ReplayPanel";
 import { SpawnTimer } from "./layers/SpawnTimer";
 import { StructureLayer } from "./layers/StructureLayer";
@@ -174,14 +173,6 @@ export function createRenderer(
   }
   multiTabModal.game = game;
 
-  const playerTeamLabel = document.querySelector(
-    "player-team-label",
-  ) as PlayerTeamLabel;
-  if (!(playerTeamLabel instanceof PlayerTeamLabel)) {
-    console.error("player team label not found");
-  }
-  playerTeamLabel.game = game;
-
   const headsUpMessage = document.querySelector(
     "heads-up-message",
   ) as HeadsUpMessage;
@@ -246,7 +237,6 @@ export function createRenderer(
     teamStats,
     topBar,
     playerPanel,
-    playerTeamLabel,
     headsUpMessage,
     unitInfoModal,
     multiTabModal,
diff --git a/src/client/graphics/layers/ControlPanel.ts b/src/client/graphics/layers/ControlPanel.ts
index c01ae4bc9..512df847c 100644
--- a/src/client/graphics/layers/ControlPanel.ts
+++ b/src/client/graphics/layers/ControlPanel.ts
@@ -204,7 +204,7 @@ export class ControlPanel extends LitElement implements Layer {
       </style>
       <div
         class="${this._isVisible
-          ? "w-full text-sm lg:text-m lg:w-72 bg-gray-800/70 p-2 pr-3 lg:p-4 shadow-lg lg:rounded-lg backdrop-blur"
+          ? "w-full text-sm lg:text-m lg:w-72 bg-slate-800/40 backdrop-blur-sm shadow-xs p-2 pr-3 lg:p-4 shadow-lg lg:rounded-lg"
           : "hidden"}"
         @contextmenu=${(e) => e.preventDefault()}
       >
diff --git a/src/client/graphics/layers/GameLeftSidebar.ts b/src/client/graphics/layers/GameLeftSidebar.ts
index 0cce032a1..2f4bb2f6f 100644
--- a/src/client/graphics/layers/GameLeftSidebar.ts
+++ b/src/client/graphics/layers/GameLeftSidebar.ts
@@ -1,4 +1,5 @@
-import { LitElement, html } from "lit";
+import { Colord } from "colord";
+import { html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { GameMode } from "../../../core/game/Game";
 import { GameView } from "../../../core/game/GameView";
@@ -15,6 +16,10 @@ export class GameLeftSidebar extends LitElement implements Layer {
   @state()
   private isTeamLeaderboardShow = false;
   private isVisible = false;
+  private isPlayerTeamLabelVisible = false;
+  private playerTeam: string | null = null;
+
+  private playerColor: Colord = new Colord("#FFFFFF");
   public game: GameView;
 
   createRenderRoot() {
@@ -23,9 +28,32 @@ export class GameLeftSidebar extends LitElement implements Layer {
 
   init() {
     this.isVisible = true;
+    if (this.isTeamGame) {
+      this.isPlayerTeamLabelVisible = true;
+    }
     this.requestUpdate();
   }
 
+  tick() {
+    if (!this.isPlayerTeamLabelVisible) return;
+
+    if (!this.playerTeam && this.game.myPlayer()?.team()) {
+      this.playerTeam = this.game.myPlayer()!.team();
+      if (this.playerTeam) {
+        this.playerColor = this.game
+          .config()
+          .theme()
+          .teamColor(this.playerTeam);
+        this.requestUpdate();
+      }
+    }
+
+    if (!this.game.inSpawnPhase()) {
+      this.isPlayerTeamLabelVisible = false;
+      this.requestUpdate();
+    }
+  }
+
   private toggleLeaderboard(): void {
     this.isLeaderboardShow = !this.isLeaderboardShow;
   }
@@ -41,10 +69,23 @@ export class GameLeftSidebar extends LitElement implements Layer {
   render() {
     return html`
       <aside
-        class=${`fixed top-[70px] left-0 z-[1000] flex flex-col max-h-[calc(100vh-80px)] overflow-y-auto p-2 bg-slate-800/40 backdrop-blur-sm shadow-xs rounded-tr-lg rounded-br-lg transition-transform duration-300 ease-out transform ${
+        class=${`fixed top-[50px] lg:top-[10px] left-0 z-[1000] flex flex-col max-h-[calc(100vh-80px)] overflow-y-auto p-2 bg-slate-800/40 backdrop-blur-sm shadow-xs rounded-tr-lg rounded-br-lg transition-transform duration-300 ease-out transform ${
           this.isVisible ? "translate-x-0" : "-translate-x-full"
         }`}
       >
+        ${this.isPlayerTeamLabelVisible
+          ? html`
+              <div
+                class="flex items-center w-full h-8 lg:h-10 text-white py-1 lg:p-2"
+                @contextmenu=${(e: Event) => e.preventDefault()}
+              >
+                Your team:
+                <span style="color: ${this.playerColor.toRgbString()}">
+                  ${this.playerTeam} &#10687;
+                </span>
+              </div>
+            `
+          : null}
         <div class="flex items-center gap-2 space-x-2 text-white mb-2">
           <div class="w-6 h-6 cursor-pointer" @click=${this.toggleLeaderboard}>
             ${this.isLeaderboardShow
@@ -64,12 +105,10 @@ export class GameLeftSidebar extends LitElement implements Layer {
               `
             : null}
         </div>
-        <div>
-          <leader-board
-            class="block mb-2"
-            .visible=${this.isLeaderboardShow}
-          ></leader-board>
+        <div class="block lg:flex flex-wrap gap-2">
+          <leader-board .visible=${this.isLeaderboardShow}></leader-board>
           <team-stats
+            class=${`flex-1 ${this.isTeamLeaderboardShow ? "sm:mt-4 lg:mt-12" : ""}`}
             .visible=${this.isTeamLeaderboardShow && this.isTeamGame}
           ></team-stats>
         </div>
diff --git a/src/client/graphics/layers/Leaderboard.ts b/src/client/graphics/layers/Leaderboard.ts
index ae8f4f8e1..a1492d79f 100644
--- a/src/client/graphics/layers/Leaderboard.ts
+++ b/src/client/graphics/layers/Leaderboard.ts
@@ -181,7 +181,7 @@ export class Leaderboard extends LitElement implements Layer {
         @contextmenu=${(e: Event) => e.preventDefault()}
       >
         <button
-          class="mb-2 px-2 py-1 md:px-3 md:py-1.5 text-xs md:text-sm lg:text-base border border-white/20 hover:bg-white/10"
+          class="mb-2 px-2 py-1 md:px-2.5 md:py-1.5 text-xs md:text-sm lg:text-base border border-white/20 hover:bg-white/10"
           @click=${() => {
             this.showTopFive = !this.showTopFive;
             this.updateLeaderboard();
diff --git a/src/client/graphics/layers/PlayerInfoOverlay.ts b/src/client/graphics/layers/PlayerInfoOverlay.ts
index 261fd3f0f..ec907f951 100644
--- a/src/client/graphics/layers/PlayerInfoOverlay.ts
+++ b/src/client/graphics/layers/PlayerInfoOverlay.ts
@@ -343,7 +343,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
         @contextmenu=${(e) => e.preventDefault()}
       >
         <div
-          class="bg-opacity-60 bg-gray-900 rounded-lg shadow-lg backdrop-blur-sm transition-all duration-300  text-white text-lg md:text-base ${containerClasses}"
+          class="bg-slate-800/40 backdrop-blur-sm shadow-xs rounded-lg shadow-lg backdrop-blur-sm transition-all duration-300  text-white text-lg md:text-base ${containerClasses}"
         >
           ${this.player !== null ? this.renderPlayerInfo(this.player) : ""}
           ${this.unit !== null ? this.renderUnitInfo(this.unit) : ""}
diff --git a/src/client/graphics/layers/PlayerTeamLabel.ts b/src/client/graphics/layers/PlayerTeamLabel.ts
deleted file mode 100644
index 444fd8c7d..000000000
--- a/src/client/graphics/layers/PlayerTeamLabel.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Colord } from "colord";
-import { LitElement, html } from "lit";
-import { customElement, state } from "lit/decorators.js";
-import { GameMode } from "../../../core/game/Game";
-import { GameView } from "../../../core/game/GameView";
-import { Layer } from "./Layer";
-
-@customElement("player-team-label")
-export class PlayerTeamLabel extends LitElement implements Layer {
-  public game: GameView;
-
-  @state()
-  private isTeamsGameMode: boolean = false;
-
-  private isVisible = false;
-
-  private playerTeam: string | null = null;
-
-  private playerColor: Colord = new Colord("#FFFFFF");
-
-  createRenderRoot() {
-    return this;
-  }
-
-  init() {
-    this.isTeamsGameMode =
-      this.game.config().gameConfig().gameMode === GameMode.Team;
-
-    if (this.isTeamsGameMode) {
-      this.isVisible = true;
-      this.requestUpdate();
-    }
-  }
-
-  tick() {
-    if (
-      this.isTeamsGameMode &&
-      !this.playerTeam &&
-      this.game.myPlayer()?.team()
-    ) {
-      this.playerTeam = this.game.myPlayer()!.team();
-      if (this.playerTeam) {
-        this.playerColor = this.game
-          .config()
-          .theme()
-          .teamColor(this.playerTeam);
-        this.requestUpdate();
-      }
-    }
-
-    if (!this.game.inSpawnPhase() && this.isVisible) {
-      this.isVisible = false;
-      this.requestUpdate();
-    }
-  }
-
-  render() {
-    if (!this.isVisible) {
-      return html``;
-    }
-
-    return html`
-      <div
-        class="flex items-center w-full justify-evenly h-8 lg:h-10 top-0 lg:top-4 left-0 lg:left-4 bg-opacity-60 bg-gray-900 rounded-es-sm lg:rounded-lg backdrop-blur-md text-white py-1 lg:p-2"
-        @contextmenu=${(e) => e.preventDefault()}
-      >
-        Your team:
-        <span style="color: ${this.playerColor?.toRgbString()}"
-          >${this.playerTeam} &#10687;</span
-        >
-      </div>
-    `;
-  }
-}
diff --git a/src/client/graphics/layers/TopBar.ts b/src/client/graphics/layers/TopBar.ts
index 991fda739..c6d58536a 100644
--- a/src/client/graphics/layers/TopBar.ts
+++ b/src/client/graphics/layers/TopBar.ts
@@ -54,7 +54,7 @@ export class TopBar extends LitElement implements Layer {
 
     return html`
       <div
-        class="fixed top-0 z-50 bg-gray-800/70 text-white text-sm p-1 rounded-ee-sm lg:rounded grid grid-cols-1 sm:grid-cols-2 w-1/2 sm:w-2/3 md:w-1/2 lg:hidden backdrop-blur"
+        class="fixed top-0 z-50 bg-slate-800/40 backdrop-blur-sm shadow-xs text-white text-sm p-1 rounded-ee-sm lg:rounded grid grid-cols-1 sm:grid-cols-2 w-1/2 sm:w-2/3 md:w-1/2 lg:hidden"
       >
         <!-- Pop section (takes 2 columns on desktop) -->
         <div
diff --git a/src/client/index.html b/src/client/index.html
index 5c2c5546d..f8f63617d 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -266,9 +266,6 @@
     >
       <heads-up-message></heads-up-message>
     </div>
-    <div class="fixed left-[10px] top-[10px] z-50 w-36 lg:w-48 items-center">
-      <player-team-label></player-team-label>
-    </div>
 
     <div
       class="bottom-0 w-full flex-col-reverse sm:flex-row z-50"