diff --git a/src/client/index.html b/src/client/index.html
index 12fd82892..09f876274 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -1,216 +1,287 @@
 <!doctype html>
 <html lang="en" class="h-full">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>OpenFront (ALPHA)</title>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>OpenFront (ALPHA)</title>
+    <!-- Critical CSS to prevent FOUC -->
+    <style>
+      .preload * {
+        -webkit-transition: none !important;
+        -moz-transition: none !important;
+        -ms-transition: none !important;
+        -o-transition: none !important;
+        transition: none !important;
+      }
 
-  <!-- Critical CSS to prevent FOUC -->
-  <style>
-    .preload * {
-      -webkit-transition: none !important;
-      -moz-transition: none !important;
-      -ms-transition: none !important;
-      -o-transition: none !important;
-      transition: none !important;
-    }
+      html {
+        visibility: visible;
+        opacity: 1;
+      }
 
-    html {
-      visibility: visible;
-      opacity: 1;
-    }
+      html.preload {
+        visibility: hidden;
+        opacity: 0;
+      }
 
-    html.preload {
-      visibility: hidden;
-      opacity: 0;
-    }
+      body::before {
+        content: "";
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        backdrop-filter: blur(4px);
+        -webkit-backdrop-filter: blur(4px);
+        z-index: -1;
+      }
 
-    body::before {
-      content: "";
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      backdrop-filter: blur(4px);
-      -webkit-backdrop-filter: blur(4px);
-      z-index: -1;
-    }
+      /* Critical styles to prevent layout shift */
+      .container {
+        opacity: 1;
+        transition: opacity 0.3s ease-in-out;
+      }
 
-    /* Critical styles to prevent layout shift */
-    .container {
-      opacity: 1;
-      transition: opacity 0.3s ease-in-out;
-    }
+      .logo-glow {
+        fill: url(#logo-gradient);
+        filter: drop-shadow(1px 1px 0px rgb(255, 255, 255))
+          drop-shadow(-1px -1px 0px rgb(255, 255, 255))
+          drop-shadow(1px -1px 0px rgb(255, 255, 255))
+          drop-shadow(-1px 1px 0px rgb(255, 255, 255))
+          drop-shadow(3px 3px 0px rgb(255, 255, 255));
+      }
 
-    .logo-glow {
-      fill: url(#logo-gradient);
-      filter: drop-shadow(1px 1px 0px rgb(255, 255, 255)) drop-shadow(-1px -1px 0px rgb(255, 255, 255)) drop-shadow(1px -1px 0px rgb(255, 255, 255)) drop-shadow(-1px 1px 0px rgb(255, 255, 255)) drop-shadow(3px 3px 0px rgb(255, 255, 255));
-    }
+      .logo-version {
+        color: #2563eb;
+        filter: drop-shadow(1px 1px 0px rgb(255, 255, 255))
+          drop-shadow(-1px -1px 0px rgb(255, 255, 255))
+          drop-shadow(1px -1px 0px rgb(255, 255, 255))
+          drop-shadow(-1px 1px 0px rgb(255, 255, 255));
+      }
+    </style>
 
-    .logo-version {
-      color: #2563eb;
-      filter: drop-shadow(1px 1px 0px rgb(255, 255, 255)) drop-shadow(-1px -1px 0px rgb(255, 255, 255)) drop-shadow(1px -1px 0px rgb(255, 255, 255)) drop-shadow(-1px 1px 0px rgb(255, 255, 255));
-    }
-  </style>
+    <!-- Immediate execution to prevent FOUC -->
+    <script>
+      document.documentElement.className = "preload";
+    </script>
 
-  <!-- Immediate execution to prevent FOUC -->
-  <script>
-    document.documentElement.className = "preload";
-  </script>
+    <!-- Analytics -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=AW-16702609763"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+      gtag("config", "AW-16702609763");
+    </script>
+    <script
+      async
+      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7035513310742290"
+      crossorigin="anonymous"
+    ></script>
+  </head>
 
-  <!-- Analytics -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id=AW-16702609763"></script>
-  <script>
-    window.dataLayer = window.dataLayer || [];
-    function gtag() {
-      dataLayer.push(arguments);
-    }
-    gtag("js", new Date());
-    gtag("config", "AW-16702609763");
-  </script>
-  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7035513310742290"
-    crossorigin="anonymous"></script>
-</head>
-
-<body
-  class="h-full select-none font-sans min-h-screen bg-opacity-0 bg-cover bg-center bg-fixed transition-opacity duration-300 ease-in-out flex flex-col">
-  <!-- Logo section remains the same -->
-  <div class="flex justify-center items-center flex-col w-full bg-gray-900/80 backdrop-blur-md pt-8 pb-2 px-8">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1364 259" width="100%" height="100%" fill="currentColor"
-      class="max-w-[450px] h-full logo-glow">
-      <defs>
-        <linearGradient id="logo-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-          <stop offset="0%" style="stop-color: #2563eb" />
-          <stop offset="100%" style="stop-color: #3b82f6" />
-        </linearGradient>
-      </defs>
-      <g>
-        <path
-          d="M0,174V51h15.24v-17.14h16.81v-16.98h16.96V0h1266v17.23h17.13v16.81h16.98v16.96h14.88v123h-15.13v17.08h-17.08v17.08h-16.9v17.04H324.9v16.86h-16.9v16.95h-102v-17.12h-17.07v-17.05H48.73v-17.05h-16.89v-16.89H14.94v-16.89H0ZM1297.95,17.35H65.9v16.7h-17.08v17.08h-14.5v123.08h14.85v16.9h17.08v17.08h139.9v17.08h17.08v16.36h67.9v-16.72h17.08v-17.07h989.88v-17.07h17.08v-16.9h14.44V50.8h-14.75v-17.08h-16.9v-16.37Z" />
-        <path
-          d="M189.1,154.78v17.07h-16.9v16.75h-51.07v-16.42h-16.9v-17.07h-16.97v-84.88h16.63v-17.07h16.9v-16.84h51.07v16.5h17.07v17.07h16.7v84.89h-16.54ZM137.87,53.1v17.15h-16.6v84.86h16.97v16.61h16.89v-16.97h16.6v-84.86h-16.97v-16.79h-16.89Z" />
-        <path
-          d="M273.91,104.06v-16.73h50.92v16.45h16.85v68.05h-16.44v17.06h-50.96v16.88h16.4v16.96h-67.28v-16.61h16.33v-101.86h-16.38v-16.98h33.4v16.63c6.12,0,11.72,0,17.31,0,0,22.56,0,45.13,0,67.75h33.59v-67.61h-33.73Z" />
-        <path
-          d="M631.12,188.64v-16.36h16.53V53.2h-16.25v-16.86h118.33v33.29h-16.65v-16.36h-50.72v50.44h33.36v-16.35h16.99v50.25h-16.6v-16.33h-33.73v50.65h16.37v16.72h-67.63Z" />
-        <path d="M596.78,103.8v84.94h-33.54v-84.39h-34.03v84.25h-33.85v-101.29h84.5v16.49h16.93Z" />
-        <path d="M1107.12,188.71v-84.34h-34.03v84.37h-33.7v-101.41h84.42v16.41h16.86v84.96h-33.54Z" />
-        <path
-          d="M988.1,171.78v16.87h-67.88v-16.38h-16.87v-68.06h16.38v-16.87h68.06v16.38h16.87v68.06h-16.55ZM970.78,104.35h-33.39v67.38h33.39v-67.38Z" />
-        <path
-          d="M460.77,155.38v16.49h-16.58v16.83h-68.05v-16.5h-16.83v-68.05h16.49v-16.83h68.05v16.49h16.83v34.06h-67.31v33.82h33.47v-16.31h33.92ZM393.39,104.18v16.56h33.3v-16.56h-33.3Z" />
-        <path
-          d="M1209.13,172h-16.9v-67.9h-16.96v-16.9h16.68v-17.08h16.9v-16.82h16.9v33.58h50.98v16.91h-50.4v67.96h16.48v-16.43h50.95v16.54h-16.55v16.76h-68.08v-16.6Z" />
-        <path
-          d="M834.91,120.94v16.96h-16.65v33.88h16.41v16.96h-67.29v-16.63h16.34v-67.87h-16.4v-16.97h50.42v33.81h17.3l-.14-.14Z" />
-        <path
-          d="M835.05,121.08v-33.75h33.76v16.43h16.85v33.96h-33.43v-16.79c-6.13,0-11.73,0-17.32,0,0,0,.14.14.14.14Z" />
-      </g>
-    </svg>
-    <div class="flex justify-center text-sm font-bold mt-[-5px] logo-version">
-      v0.15.0
-    </div>
-  </div>
-
-  <!-- Main container with responsive padding -->
-  <div class="flex justify-center items-center flex-grow">
-    <div class="container px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8">
-      <div class="relative flex gap-1 items-center max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto p-2 pb-4">
-        <flag-input></flag-input>
-        <username-input class="w-full"></username-input>
-      </div>
-
-      <div class="max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto p-2">
-        <public-lobby class="w-full"></public-lobby>
-      </div>
-
-      <div class="pt-4 flex gap-4 sm:gap-6 lg:gap-8 max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto">
-        <button id="host-lobby-button"
-          class="bg-blue-100 hover:bg-blue-200 text-blue-900 p-3 sm:p-4 lg:p-5 font-medium text-sm sm:text-base lg:text-lg rounded-md w-full border-none cursor-pointer transition-colors duration-300">
-          Create Lobby
-        </button>
-        <button id="join-private-lobby-button"
-          class="bg-blue-100 hover:bg-blue-200 text-blue-900 p-3 sm:p-4 lg:p-5 font-medium text-sm sm:text-base lg:text-lg rounded-md w-full border-none cursor-pointer transition-colors duration-300">
-          Join Lobby
-        </button>
-      </div>
-
-      <div class="max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto mt-4 sm:mt-6 lg:mt-8">
-        <button id="single-player"
-          class="w-full bg-blue-600 hover:bg-blue-700 text-white p-3 sm:p-4 lg:p-5 font-bold text-lg sm:text-xl lg:text-2xl rounded-lg border-none cursor-pointer transition-colors duration-300">
-          Single Player
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <!-- Game components -->
-  <div id="customMenu" class="mt-4 sm:mt-6 lg:mt-8">
-    <ul></ul>
-  </div>
-  <div id="app"></div>
-  <div id="radialMenu" class="radial-menu"></div>
-
-  <!-- Game modals and overlays -->
-  <single-player-modal></single-player-modal>
-  <host-lobby-modal></host-lobby-modal>
-  <join-private-lobby-modal></join-private-lobby-modal>
-  <emoji-table></emoji-table>
-  <leader-board></leader-board>
-  <build-menu></build-menu>
-  <win-modal></win-modal>
-  <top-bar></top-bar>
-  <player-panel></player-panel>
-
-  <div class="fixed right-0 top-0 z-50 flex flex-col w-32 sm:w-32 lg:w-48">
-    <options-menu></options-menu>
-    <player-info-overlay></player-info-overlay>
-  </div>
-
-  <div class="bottom-0 w-full flex-col-reverse sm:flex-row z-50" style="position: fixed; pointer-events: none">
-    <div class="w-full sm:w-2/3 sm:fixed sm:right-0 sm:bottom-0 sm:flex justify-end" style="pointer-events: auto">
-      <events-display></events-display>
-    </div>
-    <div class="w-full sm:w-1/3 md:max-w-72" style="pointer-events: auto">
-      <control-panel></control-panel>
-    </div>
-  </div>
-
-  <!-- Footer section -->
-  <div class="w-full bg-gray-900/80 backdrop-blur-md py-4">
+  <body
+    class="h-full select-none font-sans min-h-screen bg-opacity-0 bg-cover bg-center bg-fixed transition-opacity duration-300 ease-in-out flex flex-col"
+  >
+    <!-- Logo section remains the same -->
     <div
-      class="max-w-7xl mx-auto px-4 flex justify-between items-center text-white sm:flex-row flex-col sm:gap-0 gap-4">
-      <div class="flex sm:flex-row flex-col sm:gap-8 gap-2">
-        <a href="https://youtu.be/jvHEvbko3uw?si=znspkP84P76B1w5I"
-          class="text-white/70 hover:text-white transition-colors duration-300" target="_blank">How to Play</a>
-        <a href="https://discord.gg/k22YrnAzGp" class="text-white/70 hover:text-white transition-colors duration-300"
-          target="_blank">Discord</a>
-        <a href="https://openfront.fandom.com/wiki/Openfront_Wiki"
-          class="text-white/70 hover:text-white transition-colors duration-300" target="_blank">Wiki</a>
-      </div>
-      <div class="text-white/70">
-        © 2025
-        <a href="https://github.com/openfrontio/OpenFrontIO" class="hover:text-white transition-colors duration-300"
-          target="_blank">OpenFront.io</a>.
+      class="flex justify-center items-center flex-col w-full bg-gray-900/80 backdrop-blur-md pt-8 pb-2 px-8"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1364 259"
+        width="100%"
+        height="100%"
+        fill="currentColor"
+        class="max-w-[450px] h-full logo-glow"
+      >
+        <defs>
+          <linearGradient id="logo-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" style="stop-color: #2563eb" />
+            <stop offset="100%" style="stop-color: #3b82f6" />
+          </linearGradient>
+        </defs>
+        <g>
+          <path
+            d="M0,174V51h15.24v-17.14h16.81v-16.98h16.96V0h1266v17.23h17.13v16.81h16.98v16.96h14.88v123h-15.13v17.08h-17.08v17.08h-16.9v17.04H324.9v16.86h-16.9v16.95h-102v-17.12h-17.07v-17.05H48.73v-17.05h-16.89v-16.89H14.94v-16.89H0ZM1297.95,17.35H65.9v16.7h-17.08v17.08h-14.5v123.08h14.85v16.9h17.08v17.08h139.9v17.08h17.08v16.36h67.9v-16.72h17.08v-17.07h989.88v-17.07h17.08v-16.9h14.44V50.8h-14.75v-17.08h-16.9v-16.37Z"
+          />
+          <path
+            d="M189.1,154.78v17.07h-16.9v16.75h-51.07v-16.42h-16.9v-17.07h-16.97v-84.88h16.63v-17.07h16.9v-16.84h51.07v16.5h17.07v17.07h16.7v84.89h-16.54ZM137.87,53.1v17.15h-16.6v84.86h16.97v16.61h16.89v-16.97h16.6v-84.86h-16.97v-16.79h-16.89Z"
+          />
+          <path
+            d="M273.91,104.06v-16.73h50.92v16.45h16.85v68.05h-16.44v17.06h-50.96v16.88h16.4v16.96h-67.28v-16.61h16.33v-101.86h-16.38v-16.98h33.4v16.63c6.12,0,11.72,0,17.31,0,0,22.56,0,45.13,0,67.75h33.59v-67.61h-33.73Z"
+          />
+          <path
+            d="M631.12,188.64v-16.36h16.53V53.2h-16.25v-16.86h118.33v33.29h-16.65v-16.36h-50.72v50.44h33.36v-16.35h16.99v50.25h-16.6v-16.33h-33.73v50.65h16.37v16.72h-67.63Z"
+          />
+          <path
+            d="M596.78,103.8v84.94h-33.54v-84.39h-34.03v84.25h-33.85v-101.29h84.5v16.49h16.93Z"
+          />
+          <path
+            d="M1107.12,188.71v-84.34h-34.03v84.37h-33.7v-101.41h84.42v16.41h16.86v84.96h-33.54Z"
+          />
+          <path
+            d="M988.1,171.78v16.87h-67.88v-16.38h-16.87v-68.06h16.38v-16.87h68.06v16.38h16.87v68.06h-16.55ZM970.78,104.35h-33.39v67.38h33.39v-67.38Z"
+          />
+          <path
+            d="M460.77,155.38v16.49h-16.58v16.83h-68.05v-16.5h-16.83v-68.05h16.49v-16.83h68.05v16.49h16.83v34.06h-67.31v33.82h33.47v-16.31h33.92ZM393.39,104.18v16.56h33.3v-16.56h-33.3Z"
+          />
+          <path
+            d="M1209.13,172h-16.9v-67.9h-16.96v-16.9h16.68v-17.08h16.9v-16.82h16.9v33.58h50.98v16.91h-50.4v67.96h16.48v-16.43h50.95v16.54h-16.55v16.76h-68.08v-16.6Z"
+          />
+          <path
+            d="M834.91,120.94v16.96h-16.65v33.88h16.41v16.96h-67.29v-16.63h16.34v-67.87h-16.4v-16.97h50.42v33.81h17.3l-.14-.14Z"
+          />
+          <path
+            d="M835.05,121.08v-33.75h33.76v16.43h16.85v33.96h-33.43v-16.79c-6.13,0-11.73,0-17.32,0,0,0,.14.14.14.14Z"
+          />
+        </g>
+      </svg>
+      <div class="flex justify-center text-sm font-bold mt-[-5px] logo-version">
+        v0.15.0
       </div>
     </div>
-  </div>
 
-  <!-- Scripts -->
-  <script>
-    // Remove preload class after everything is loaded
-    window.addEventListener("load", function () {
-      requestAnimationFrame(() => {
-        document.documentElement.classList.remove("preload");
+    <!-- Main container with responsive padding -->
+    <div class="flex justify-center items-center flex-grow">
+      <div class="container px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8">
+        <div
+          class="relative flex gap-1 items-center max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto p-2 pb-4"
+        >
+          <flag-input></flag-input>
+          <username-input class="w-full"></username-input>
+        </div>
+
+        <div class="max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto p-2">
+          <public-lobby class="w-full"></public-lobby>
+        </div>
+
+        <div
+          class="pt-4 flex gap-4 sm:gap-6 lg:gap-8 max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto"
+        >
+          <button
+            id="host-lobby-button"
+            class="bg-blue-100 hover:bg-blue-200 text-blue-900 p-3 sm:p-4 lg:p-5 font-medium text-sm sm:text-base lg:text-lg rounded-md w-full border-none cursor-pointer transition-colors duration-300"
+          >
+            Create Lobby
+          </button>
+          <button
+            id="join-private-lobby-button"
+            class="bg-blue-100 hover:bg-blue-200 text-blue-900 p-3 sm:p-4 lg:p-5 font-medium text-sm sm:text-base lg:text-lg rounded-md w-full border-none cursor-pointer transition-colors duration-300"
+          >
+            Join Lobby
+          </button>
+        </div>
+
+        <div
+          class="max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto mt-4 sm:mt-6 lg:mt-8"
+        >
+          <button
+            id="single-player"
+            class="w-full bg-blue-600 hover:bg-blue-700 text-white p-3 sm:p-4 lg:p-5 font-bold text-lg sm:text-xl lg:text-2xl rounded-lg border-none cursor-pointer transition-colors duration-300"
+          >
+            Single Player
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Game components -->
+    <div id="customMenu" class="mt-4 sm:mt-6 lg:mt-8">
+      <ul></ul>
+    </div>
+    <div id="app"></div>
+    <div id="radialMenu" class="radial-menu"></div>
+
+    <!-- Game modals and overlays -->
+    <single-player-modal></single-player-modal>
+    <host-lobby-modal></host-lobby-modal>
+    <join-private-lobby-modal></join-private-lobby-modal>
+    <emoji-table></emoji-table>
+    <leader-board></leader-board>
+    <build-menu></build-menu>
+    <win-modal></win-modal>
+    <top-bar></top-bar>
+    <player-panel></player-panel>
+
+    <div class="fixed right-0 top-0 z-50 flex flex-col w-32 sm:w-32 lg:w-48">
+      <options-menu></options-menu>
+      <player-info-overlay></player-info-overlay>
+    </div>
+
+    <div
+      class="bottom-0 w-full flex-col-reverse sm:flex-row z-50"
+      style="position: fixed; pointer-events: none"
+    >
+      <div
+        class="w-full sm:w-2/3 sm:fixed sm:right-0 sm:bottom-0 sm:flex justify-end"
+        style="pointer-events: auto"
+      >
+        <events-display></events-display>
+      </div>
+      <div class="w-full sm:w-1/3 md:max-w-72" style="pointer-events: auto">
+        <control-panel></control-panel>
+      </div>
+    </div>
+
+    <!-- Footer section -->
+    <div class="w-full bg-gray-900/80 backdrop-blur-md py-4">
+      <div
+        class="max-w-7xl mx-auto px-4 flex justify-between items-center text-white sm:flex-row flex-col sm:gap-0 gap-4"
+      >
+        <div class="flex sm:flex-row flex-col sm:gap-8 gap-2">
+          <a
+            href="https://youtu.be/jvHEvbko3uw?si=znspkP84P76B1w5I"
+            class="text-white/70 hover:text-white transition-colors duration-300"
+            target="_blank"
+            >How to Play</a
+          >
+          <a
+            href="https://discord.gg/k22YrnAzGp"
+            class="text-white/70 hover:text-white transition-colors duration-300"
+            target="_blank"
+            >Discord</a
+          >
+          <a
+            href="https://openfront.fandom.com/wiki/Openfront_Wiki"
+            class="text-white/70 hover:text-white transition-colors duration-300"
+            target="_blank"
+            >Wiki</a
+          >
+        </div>
+        <div class="text-white/70">
+          © 2025
+          <a
+            href="https://github.com/openfrontio/OpenFrontIO"
+            class="hover:text-white transition-colors duration-300"
+            target="_blank"
+            >OpenFront.io</a
+          >.
+        </div>
+      </div>
+    </div>
+
+    <!-- Scripts -->
+    <script>
+      // Remove preload class after everything is loaded
+      window.addEventListener("load", function () {
+        requestAnimationFrame(() => {
+          document.documentElement.classList.remove("preload");
+        });
       });
-    });
-  </script>
+    </script>
 
-  <!-- Analytics -->
-  <script defer src="https://static.cloudflareinsights.com/beacon.min.js"
-    data-cf-beacon='{"token": "03d93e6fefb349c28ee69b408fa25a13"}'></script>
-</body>
-
-</html>
\ No newline at end of file
+    <!-- Analytics -->
+    <script
+      defer
+      src="https://static.cloudflareinsights.com/beacon.min.js"
+      data-cf-beacon='{"token": "03d93e6fefb349c28ee69b408fa25a13"}'
+    ></script>
+  </body>
+</html>
