diff --git a/index.html b/index.html
index 7c587b0f2..153e80acd 100644
--- a/index.html
+++ b/index.html
@@ -120,12 +120,12 @@
   </head>
 
   <body
-    class="h-full select-none font-sans min-h-screen bg-cover bg-center bg-fixed transition-opacity duration-300 ease-in-out flex flex-row overflow-hidden"
+    class="h-full select-none font-sans min-h-screen bg-neutral-800 transition-opacity duration-300 ease-in-out flex flex-row overflow-hidden"
   >
     <div id="hex-grid" class="fixed inset-0 -z-50 pointer-events-none">
       <div
         id="background-layer"
-        class="absolute inset-0 bg-cover bg-center opacity-60 [filter:brightness(0.5)_saturate(1.4)] dark:[filter:sepia(0.2)_saturate(1.2)_hue-rotate(180deg)_brightness(0.4)]"
+        class="absolute inset-0 bg-cover bg-center opacity-30 [filter:brightness(1.0)] dark:[filter:sepia(0.2)_saturate(1.2)_hue-rotate(180deg)_brightness(0.9)]"
         style="
           background-image: url(&quot;/resources/images/background.webp&quot;);
         "
@@ -134,14 +134,14 @@
         class="absolute inset-0 bg-center bg-no-repeat bg-contain hidden lg:block"
         style="
           background-image: url(&quot;/resources/images/OpenFront.webp&quot;);
-          opacity: 0.25;
+          opacity: 0.5;
         "
       ></div>
       <div
         class="absolute inset-0 bg-center bg-no-repeat bg-contain lg:hidden"
         style="
           background-image: url(&quot;/resources/images/OF.webp&quot;);
-          opacity: 0.25;
+          opacity: 0.5;
         "
       ></div>
     </div>
diff --git a/src/client/FlagInput.ts b/src/client/FlagInput.ts
index edb04610c..0622937cf 100644
--- a/src/client/FlagInput.ts
+++ b/src/client/FlagInput.ts
@@ -94,7 +94,7 @@ export class FlagInput extends LitElement {
         ></span>
         ${showSelect
           ? html`<span
-              class="text-[10px] font-black text-white uppercase leading-none break-words w-full text-center px-1"
+              class="text-[10px] font-medium tracking-wider text-white uppercase leading-none break-words w-full text-center px-1"
             >
               ${translateText("flag_input.title")}
             </span>`
diff --git a/src/client/GameModeSelector.ts b/src/client/GameModeSelector.ts
index d4f3c08a2..0f1ba4680 100644
--- a/src/client/GameModeSelector.ts
+++ b/src/client/GameModeSelector.ts
@@ -23,7 +23,7 @@ import {
   translateText,
 } from "./Utils";
 
-const CARD_BG = "bg-[color-mix(in_oklab,var(--frenchBlue)_70%,black)]";
+const CARD_BG = "bg-sky-950";
 
 @customElement("game-mode-selector")
 export class GameModeSelector extends LitElement {
@@ -133,17 +133,17 @@ export class GameModeSelector extends LitElement {
           ${this.renderSmallActionCard(
             translateText("main.create"),
             this.openHostLobby,
-            "bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)]",
+            "bg-slate-700 hover:bg-slate-600 active:bg-slate-800",
           )}
           ${this.renderSmallActionCard(
             translateText("mode_selector.ranked_title"),
             this.openRankedMenu,
-            "bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)]",
+            "bg-slate-700 hover:bg-slate-600 active:bg-slate-800",
           )}
           ${this.renderSmallActionCard(
             translateText("main.join"),
             this.openJoinLobby,
-            "bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)]",
+            "bg-slate-700 hover:bg-slate-600 active:bg-slate-800",
           )}
         </div>
         <!-- Game cards grid -->
@@ -204,17 +204,17 @@ export class GameModeSelector extends LitElement {
           ${this.renderSmallActionCard(
             translateText("main.create"),
             this.openHostLobby,
-            "bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)]",
+            "bg-slate-700 hover:bg-slate-600 active:bg-slate-800",
           )}
           ${this.renderSmallActionCard(
             translateText("mode_selector.ranked_title"),
             this.openRankedMenu,
-            "bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)]",
+            "bg-slate-700 hover:bg-slate-600 active:bg-slate-800",
           )}
           ${this.renderSmallActionCard(
             translateText("main.join"),
             this.openJoinLobby,
-            "bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)]",
+            "bg-slate-700 hover:bg-slate-600 active:bg-slate-800",
           )}
         </div>
       </div>
@@ -255,7 +255,7 @@ export class GameModeSelector extends LitElement {
     return html`
       <button
         @click=${onClick}
-        class="flex items-center justify-center w-full h-full rounded-xl ${bgClass} border-0 transition-transform hover:scale-[1.02] active:scale-[0.98] text-sm lg:text-base font-bold text-white uppercase tracking-wider text-center"
+        class="flex items-center justify-center w-full h-full rounded-lg ${bgClass} transition-colors text-sm lg:text-base font-medium text-white uppercase tracking-wider text-center"
       >
         ${title}
       </button>
@@ -306,8 +306,7 @@ export class GameModeSelector extends LitElement {
     return html`
       <button
         @click=${() => this.validateAndJoin(lobby)}
-        class="group relative w-full h-44 sm:h-full text-white uppercase rounded-2xl transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98]"
-        style="background-color: color-mix(in oklab, var(--frenchBlue) 75%, black)"
+        class="group relative w-full h-44 sm:h-full text-white uppercase rounded-2xl transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98] bg-sky-950"
       >
         <!-- Image clipped separately so overflow-hidden doesn't block absolute children -->
         <div
@@ -329,11 +328,11 @@ export class GameModeSelector extends LitElement {
           class="absolute inset-x-2 top-2 flex items-start justify-between gap-2"
         >
           ${modifierLabels.length > 0
-            ? html`<div class="flex flex-col items-start gap-1">
+            ? html`<div class="flex flex-col items-start gap-1 mt-[2px]">
                 ${modifierLabels.map(
                   (label) =>
                     html`<span
-                      class="px-2 py-0.5 rounded text-xs font-bold uppercase tracking-widest bg-teal-600 text-white shadow-[0_0_6px_rgba(13,148,136,0.35)]"
+                      class="px-2 py-1 rounded text-xs font-bold uppercase tracking-widest bg-sky-600 text-white shadow-[0_0_6px_rgba(14,165,233,0.35)]"
                       >${label}</span
                     >`,
                 )}
@@ -343,7 +342,7 @@ export class GameModeSelector extends LitElement {
             <span
               class="text-xs font-bold tracking-widest ${timeDisplayUppercase
                 ? "uppercase"
-                : "normal-case"} bg-sky-600 px-2.5 py-1 rounded"
+                : "normal-case"} bg-sky-600 text-white px-2 py-1 rounded"
               >${timeDisplay}</span
             >
           </div>
diff --git a/src/client/GutterAds.ts b/src/client/GutterAds.ts
index fcb14e2ba..2b6adfe89 100644
--- a/src/client/GutterAds.ts
+++ b/src/client/GutterAds.ts
@@ -120,8 +120,8 @@ export class GutterAds extends LitElement {
     return html`
       <!-- Left Gutter Ad -->
       <div
-        class="hidden xl:flex fixed transform -translate-y-1/2 w-[160px] min-h-[600px] z-40 pointer-events-auto items-center justify-center"
-        style="left: calc(50% - 10.5cm - 208px); top: calc(50% + 10px);"
+        class="hidden xl:flex fixed transform -translate-y-1/2 w-[160px] min-h-[600px] z-40 pointer-events-auto items-center justify-center xl:[--half-content:10.5cm] 2xl:[--half-content:12.5cm]"
+        style="left: calc(50% - var(--half-content) - 208px); top: calc(50% + 10px);"
       >
         <div
           id="${this.leftContainerId}"
@@ -131,8 +131,8 @@ export class GutterAds extends LitElement {
 
       <!-- Right Gutter Ad -->
       <div
-        class="hidden xl:flex fixed transform -translate-y-1/2 w-[160px] min-h-[600px] z-40 pointer-events-auto items-center justify-center"
-        style="left: calc(50% + 10.5cm + 48px); top: calc(50% + 10px);"
+        class="hidden xl:flex fixed transform -translate-y-1/2 w-[160px] min-h-[600px] z-40 pointer-events-auto items-center justify-center xl:[--half-content:10.5cm] 2xl:[--half-content:12.5cm]"
+        style="left: calc(50% + var(--half-content) + 48px); top: calc(50% + 10px);"
       >
         <div
           id="${this.rightContainerId}"
diff --git a/src/client/HostLobbyModal.ts b/src/client/HostLobbyModal.ts
index f55e869f9..7c24ae97c 100644
--- a/src/client/HostLobbyModal.ts
+++ b/src/client/HostLobbyModal.ts
@@ -328,7 +328,7 @@ export class HostLobbyModal extends BaseModal {
         <!-- Player List / footer -->
         <div class="p-6 pt-4 border-t border-white/10 bg-black/20 shrink-0">
           <button
-            class="w-full py-4 text-sm font-bold text-white uppercase tracking-widest bg-blue-600 hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed rounded-xl transition-all shadow-lg shadow-blue-900/20 hover:shadow-blue-900/40 hover:-translate-y-0.5 active:translate-y-0 disabled:transform-none"
+            class="w-full py-4 text-sm font-bold text-white uppercase tracking-widest bg-sky-600 hover:bg-sky-500 disabled:opacity-50 disabled:cursor-not-allowed rounded-xl transition-all shadow-lg shadow-sky-900/20 hover:shadow-sky-900/40 hover:-translate-y-0.5 active:translate-y-0 disabled:transform-none"
             @click=${this.startGame}
             ?disabled=${this.clients.length < 2}
           >
diff --git a/src/client/JoinLobbyModal.ts b/src/client/JoinLobbyModal.ts
index b6771e5f0..a05d768c9 100644
--- a/src/client/JoinLobbyModal.ts
+++ b/src/client/JoinLobbyModal.ts
@@ -148,7 +148,7 @@ export class JoinLobbyModal extends BaseModal {
                 class="p-6 lg:p-6 border-t border-white/10 bg-black/20 shrink-0"
               >
                 <button
-                  class="w-full py-4 text-sm font-bold text-white uppercase tracking-widest bg-blue-600 hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed rounded-xl transition-all shadow-lg shadow-blue-900/20 hover:shadow-blue-900/40 hover:-translate-y-0.5 active:translate-y-0 disabled:transform-none"
+                  class="w-full py-4 text-sm font-bold text-white uppercase tracking-widest bg-sky-600 hover:bg-sky-500 disabled:opacity-50 disabled:cursor-not-allowed rounded-xl transition-all shadow-lg shadow-sky-900/20 hover:shadow-sky-900/40 hover:-translate-y-0.5 active:translate-y-0 disabled:transform-none"
                   disabled
                 >
                   ${translateText("private_lobby.joined_waiting")}
diff --git a/src/client/LangSelector.ts b/src/client/LangSelector.ts
index 15efa8e16..73b922b85 100644
--- a/src/client/LangSelector.ts
+++ b/src/client/LangSelector.ts
@@ -354,7 +354,8 @@ export class LangSelector extends LitElement {
       >
         <img
           id="lang-flag"
-          class="object-contain pointer-events-none"
+          class="object-contain pointer-events-none transition-all"
+          style="filter: grayscale(1) sepia(1) saturate(3) hue-rotate(190deg) brightness(0.85)"
           style="width: 28px; height: 28px;"
           src="/flags/${currentLang.svg}.svg"
           alt="flag"
diff --git a/src/client/SinglePlayerModal.ts b/src/client/SinglePlayerModal.ts
index ce4d2ec3d..3df1f1a31 100644
--- a/src/client/SinglePlayerModal.ts
+++ b/src/client/SinglePlayerModal.ts
@@ -344,7 +344,7 @@ export class SinglePlayerModal extends BaseModal {
             : null}
           <button
             @click=${this.startGame}
-            class="w-full py-4 text-sm font-bold text-white uppercase tracking-widest bg-blue-600 hover:bg-blue-500 rounded-xl transition-all shadow-lg shadow-blue-900/20 hover:shadow-blue-900/40 hover:-translate-y-0.5 active:translate-y-0"
+            class="w-full py-4 text-sm font-bold text-white uppercase tracking-widest bg-sky-600 hover:bg-sky-500 rounded-xl transition-all shadow-lg shadow-sky-900/20 hover:shadow-sky-900/40 hover:-translate-y-0.5 active:translate-y-0"
           >
             ${translateText("single_modal.start")}
           </button>
diff --git a/src/client/UsernameInput.ts b/src/client/UsernameInput.ts
index eb2d7385d..04670a5c7 100644
--- a/src/client/UsernameInput.ts
+++ b/src/client/UsernameInput.ts
@@ -78,7 +78,7 @@ export class UsernameInput extends LitElement {
           @input=${this.handleClanTagChange}
           placeholder="${translateText("username.tag")}"
           maxlength="5"
-          class="w-[6rem] text-xl font-bold text-center uppercase shrink-0 bg-transparent text-white placeholder-white/70 focus:placeholder-transparent border-0 border-b border-white/40 focus:outline-none focus:border-white/60"
+          class="w-[6rem] text-xl font-medium tracking-wider text-center uppercase shrink-0 bg-transparent text-white placeholder-white/70 focus:placeholder-transparent border-0 border-b border-white/40 focus:outline-none focus:border-white/60"
         />
         <input
           type="text"
@@ -86,7 +86,7 @@ export class UsernameInput extends LitElement {
           @input=${this.handleUsernameChange}
           placeholder="${translateText("username.enter_username")}"
           maxlength="${MAX_USERNAME_LENGTH}"
-          class="flex-1 min-w-0 border-0 text-2xl font-bold text-left text-white placeholder-white/70 focus:outline-none focus:ring-0 overflow-x-auto whitespace-nowrap text-ellipsis pr-2 bg-transparent"
+          class="flex-1 min-w-0 border-0 text-2xl font-medium tracking-wider text-left text-white placeholder-white/70 focus:outline-none focus:ring-0 overflow-x-auto whitespace-nowrap text-ellipsis pr-2 bg-transparent"
         />
       </div>
       ${this.validationError
diff --git a/src/client/components/DesktopNavBar.ts b/src/client/components/DesktopNavBar.ts
index 64f65e406..93bb3b8b2 100644
--- a/src/client/components/DesktopNavBar.ts
+++ b/src/client/components/DesktopNavBar.ts
@@ -102,7 +102,7 @@ export class DesktopNavBar extends LitElement {
         <button
           class="nav-menu-item ${currentPage === "page-play"
             ? "active"
-            : ""} text-white/70 hover:text-blue-500 font-bold tracking-widest uppercase cursor-pointer transition-colors [&.active]:text-blue-500"
+            : ""} text-white/70 hover:text-blue-500 font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-blue-500"
           data-page="page-play"
           data-i18n="main.play"
         ></button>
@@ -111,7 +111,7 @@ export class DesktopNavBar extends LitElement {
           <button
             class="nav-menu-item ${currentPage === "page-news"
               ? "active"
-              : ""} text-white/70 hover:text-blue-500 font-bold tracking-widest uppercase cursor-pointer transition-colors [&.active]:text-blue-500"
+              : ""} text-white/70 hover:text-blue-500 font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-blue-500"
             data-page="page-news"
             data-i18n="main.news"
             @click=${this._notifications.onNewsClick}
@@ -131,7 +131,7 @@ export class DesktopNavBar extends LitElement {
           <button
             class="nav-menu-item ${currentPage === "page-item-store"
               ? "active"
-              : ""} text-white/70 hover:text-blue-500 font-bold tracking-widest uppercase cursor-pointer transition-colors [&.active]:text-blue-500"
+              : ""} text-white/70 hover:text-blue-500 font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-blue-500"
             data-page="page-item-store"
             data-i18n="main.store"
             @click=${this._notifications.onStoreClick}
@@ -148,18 +148,18 @@ export class DesktopNavBar extends LitElement {
             : ""}
         </div>
         <button
-          class="nav-menu-item text-white/70 hover:text-blue-500 font-bold tracking-widest uppercase cursor-pointer transition-colors [&.active]:text-blue-500"
+          class="nav-menu-item text-white/70 hover:text-blue-500 font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-blue-500"
           data-page="page-settings"
           data-i18n="main.settings"
         ></button>
         <button
-          class="nav-menu-item text-white/70 hover:text-blue-500 font-bold tracking-widest uppercase cursor-pointer transition-colors [&.active]:text-blue-500"
+          class="nav-menu-item text-white/70 hover:text-blue-500 font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-blue-500"
           data-page="page-leaderboard"
           data-i18n="main.leaderboard"
         ></button>
         <div class="relative">
           <button
-            class="nav-menu-item text-white/70 hover:text-blue-500 font-bold tracking-widest uppercase cursor-pointer transition-colors [&.active]:text-blue-500"
+            class="nav-menu-item text-white/70 hover:text-blue-500 font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-blue-500"
             data-page="page-help"
             data-i18n="main.help"
             @click=${this._notifications.onHelpClick}
diff --git a/src/client/components/MainLayout.ts b/src/client/components/MainLayout.ts
index ccb3fc25b..f60bc8de6 100644
--- a/src/client/components/MainLayout.ts
+++ b/src/client/components/MainLayout.ts
@@ -22,7 +22,7 @@ export class MainLayout extends LitElement {
         class="relative [.in-game_&]:hidden flex flex-col flex-1 overflow-hidden w-full px-0 lg:px-[clamp(1.5rem,3vw,3rem)] pt-0 lg:pt-[clamp(0.75rem,1.5vw,1.5rem)] pb-0 lg:pb-[clamp(0.75rem,1.5vw,1.5rem)]"
       >
         <div
-          class="w-full lg:max-w-[20cm] mx-auto flex flex-col flex-1 gap-0 lg:gap-[clamp(1.5rem,3vw,3rem)] overflow-y-auto overflow-x-hidden sm:px-4 lg:px-0"
+          class="w-full lg:max-w-[20cm] 2xl:max-w-[24cm] mx-auto flex flex-col flex-1 gap-0 lg:gap-[clamp(1.5rem,3vw,3rem)] overflow-y-auto overflow-x-hidden sm:px-4 lg:px-0"
         >
           ${this._initialChildren}
         </div>
diff --git a/src/client/components/baseComponents/Button.ts b/src/client/components/baseComponents/Button.ts
index 3d2ccfdcd..a32a0a00d 100644
--- a/src/client/components/baseComponents/Button.ts
+++ b/src/client/components/baseComponents/Button.ts
@@ -14,7 +14,7 @@ export class OButton extends LitElement {
   @property({ type: Boolean }) fill = false;
   @property({ type: Boolean }) submit = false;
   private static readonly BASE_CLASS =
-    "bg-blue-600 hover:bg-blue-700 text-white font-bold uppercase tracking-wider px-4 py-3 rounded-xl transition-all duration-300 transform hover:-translate-y-px outline-none border border-transparent text-center text-base lg:text-lg whitespace-normal break-words leading-tight overflow-hidden relative";
+    "bg-sky-600 hover:bg-sky-700 text-white font-bold uppercase tracking-wider px-4 py-3 rounded-xl transition-all duration-300 transform hover:-translate-y-px outline-none border border-transparent text-center text-base lg:text-lg whitespace-normal break-words leading-tight overflow-hidden relative";
 
   createRenderRoot() {
     return this;
