diff --git a/src/client/index.html b/src/client/index.html
index 672d4b307..054cfab15 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -77,11 +77,13 @@
   </head>
 
   <body
-    class="h-full overflow-hidden select-none font-sans min-h-screen bg-opacity-0 bg-cover bg-center bg-fixed transition-opacity duration-300 ease-in-out"
+    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"
   >
     <!-- Main container with responsive padding -->
     <!-- Logo section remains the same -->
-    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8">
+    <div
+      class="container mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8 flex-grow"
+    >
       <img
         src="../../resources/images/OpenFrontLogo.svg"
         alt="OpenFront.io"
@@ -130,36 +132,6 @@
           Single Player
         </button>
       </div>
-
-      <!-- Links section -->
-      <div class="flex justify-center mt-4">
-        <a
-          href="https://discord.gg/k22YrnAzGp"
-          id="discord-link"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="flex items-center justify-center px-6 py-2 bg-blue-200 hover:bg-blue-200 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out mx-2"
-        >
-          <img
-            src="../../resources/images/DiscordIcon.svg"
-            alt="Discord"
-            class="w-12 h-12"
-          />
-        </a>
-        <a
-          href="https://youtu.be/jvHEvbko3uw?si=znspkP84P76B1w5I"
-          id="yt-link"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="flex items-center justify-center px-2 py-0 bg-blue-200 hover:bg-blue-200 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out mx-2"
-        >
-          <img
-            src="../../resources/images/QuestionMarkIcon.svg"
-            alt="Question Mark"
-            class="mt-4 w-20 h-20"
-          />
-        </a>
-      </div>
     </div>
 
     <!-- Game components -->
@@ -200,6 +172,37 @@
       </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
+          >
+        </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
