diff --git a/src/client/graphics/layers/TopBar.ts b/src/client/graphics/layers/TopBar.ts
index c513d7b68..fdf8f32b5 100644
--- a/src/client/graphics/layers/TopBar.ts
+++ b/src/client/graphics/layers/TopBar.ts
@@ -26,16 +26,19 @@ export class TopBar extends LitElement implements Layer {
     if (!this.isVisible) {
       return html``;
     }
+
     const myPlayer = this.game?.myPlayer();
     if (!myPlayer?.isAlive() || this.game?.inSpawnPhase()) {
       return html``;
     }
+
     const popRate = this.game.config().populationIncreaseRate(myPlayer) * 10;
     const maxPop = this.game.config().maxPopulation(myPlayer);
     const goldPerSecond = this.game.config().goldAdditionRate(myPlayer) * 10;
+
     return html`
       <div
-        class="fixed top-0 z-50 bg-black/90 text-white text-sm p-1 rounded grid grid-cols-1 sm:grid-cols-2 w-1/2 sm:w-2/3 md:w-1/2 lg:hidden"
+        class="fixed top-0 z-50 bg-gray-800/70 text-white text-sm p-1 rounded grid grid-cols-1 sm:grid-cols-2 w-1/2 sm:w-2/3 md:w-1/2 lg:hidden backdrop-blur"
       >
         <!-- Pop section (takes 2 columns on desktop) -->
         <div
@@ -48,7 +51,6 @@ export class TopBar extends LitElement implements Layer {
           >
           <span>(+${renderTroops(popRate)})</span>
         </div>
-
         <!-- Gold section (takes 1 column on desktop) -->
         <div
           class="flex items-center space-x-2 overflow-x-auto whitespace-nowrap"