diff --git a/src/client/index.html b/src/client/index.html
index 698c73c49..f25248258 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -4,7 +4,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>OpenFront (ALPHA)</title>
-
     <link rel="manifest" href="../../resources/manifest.json" />
 
     <!-- Critical CSS to prevent FOUC -->
@@ -46,44 +45,6 @@
         filter: blur(4px) brightness(0.7);
       }
 
-      /* Critical styles to prevent layout shift */
-      .container {
-        display: flex;
-        padding: 1rem;
-        max-width: 540px !important;
-        flex-direction: column;
-        gap: 1rem;
-        opacity: 1;
-        transition: opacity 0.3s ease-in-out;
-      }
-
-      .container__row {
-        display: flex;
-        gap: 1rem;
-        align-items: center;
-      }
-
-      .container__row--equal > * {
-        flex: 1 1 100%;
-      }
-
-      .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));
-      }
-
       .left-gutter-ad {
         position: fixed;
         left: 0;
@@ -129,6 +90,7 @@
         .left-gutter-ad {
           display: none;
         }
+
         .right-gutter-ad {
           display: none;
         }
@@ -147,9 +109,11 @@
     ></script>
     <script>
       window.dataLayer = window.dataLayer || [];
+
       function gtag() {
         dataLayer.push(arguments);
       }
+
       gtag("js", new Date());
       gtag("config", "AW-16702609763");
     </script>
@@ -159,71 +123,71 @@
       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.21.0
+    <header class="l-header">
+      <div class="l-header__content">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 1364 259"
+          width="100%"
+          height="100%"
+          fill="currentColor"
+          class="l-header__logo"
+        >
+          <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="l-header__highlightText">v0.21.0</div>
       </div>
-    </div>
-
+    </header>
     <div class="bg-image"></div>
-
     <!-- Left gutter ad placement - full height, no empty space -->
     <div class="left-gutter-ad ad">
       <google-ad
@@ -232,7 +196,6 @@
         fullWidthResponsive="false"
       ></google-ad>
     </div>
-
     <div class="right-gutter-ad ad">
       <google-ad
         adSlot="1814331462"
@@ -241,10 +204,8 @@
       ></google-ad>
     </div>
 
-    <dark-mode-button></dark-mode-button>
-
     <!-- Main container with responsive padding -->
-    <div class="flex justify-center items-center flex-grow">
+    <main class="flex justify-center items-center flex-grow">
       <div class="container">
         <div class="container__row">
           <flag-input class="w-[20%] md:w-[15%]"></flag-input>
@@ -311,7 +272,7 @@
           </select>
         </div>
       </div>
-    </div>
+    </main>
 
     <!-- Game components -->
     <div id="customMenu" class="mt-4 sm:mt-6 lg:mt-8">
@@ -319,20 +280,6 @@
     </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>
-    <game-starting-modal></game-starting-modal>
-    <top-bar></top-bar>
-    <player-panel></player-panel>
-    <help-modal></help-modal>
-
     <div
       class="flex flex-column gap-2 fixed right-[10px] top-[10px] z-50 flex flex-col w-32 sm:w-32 lg:w-48"
     >
@@ -356,38 +303,51 @@
     </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">
+    <footer class="l-footer">
+      <div class="l-footer__content">
+        <div class="l-footer__col">
           <a
             href="https://youtu.be/jvHEvbko3uw?si=znspkP84P76B1w5I"
             data-i18n="main.how_to_play"
-            class="text-white/70 hover:text-white transition-colors duration-300"
+            class="t-link"
             target="_blank"
-            >How to Play</a
           >
+            How to Play
+          </a>
           <a
             href="https://openfront.miraheze.org/wiki/Main_Page"
             data-i18n="main.wiki"
-            class="text-white/70 hover:text-white transition-colors duration-300"
+            class="t-link"
             target="_blank"
-            >Wiki</a
           >
+            Wiki
+          </a>
         </div>
-        <div class="text-white/70">
+        <div class="l-footer__col t-text-white">
           © 2025
           <a
             href="https://github.com/openfrontio/OpenFrontIO"
-            class="hover:text-white transition-colors duration-300"
+            class="t-link"
             target="_blank"
-            >OpenFront.io</a
-          >.
+          >
+            OpenFront.io
+          </a>
         </div>
       </div>
-    </div>
-
+    </footer>
+    <!-- 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>
+    <game-starting-modal></game-starting-modal>
+    <top-bar></top-bar>
+    <player-panel></player-panel>
+    <help-modal></help-modal>
+    <dark-mode-button></dark-mode-button>
     <!-- Scripts -->
     <script>
       // Remove preload class after everything is loaded
@@ -402,6 +362,7 @@
         const locale = new Intl.Locale(navigator.language);
         const defaultLang = locale.language;
         const userLang = localStorage.getItem("lang") || defaultLang;
+
         async function loadLanguage(lang) {
           try {
             const response = await fetch(`/lang/${lang}.json`);
@@ -413,6 +374,7 @@
             return {};
           }
         }
+
         function applyTranslation(translations) {
           const components = [
             "single-player-modal",
@@ -465,6 +427,7 @@
             }
           });
         }
+
         async function changeLanguage(lang) {
           // console.log(`Changing language to: ${lang}`);
           localStorage.setItem("lang", lang);
@@ -472,6 +435,7 @@
           window.translations = translations;
           applyTranslation(translations);
         }
+
         const defaultTranslations = await loadLanguage("en");
         window.defaultTranslations = defaultTranslations;
         const translations = await loadLanguage(userLang);
diff --git a/src/client/styles.css b/src/client/styles.css
index e7a0fa702..bcad93ab8 100644
--- a/src/client/styles.css
+++ b/src/client/styles.css
@@ -1,7 +1,13 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
+@import url("./styles/core/variables.css");
+@import url("./styles/core/typography.css");
+@import url("./styles/layout/header.css");
+@import url("./styles/layout/footer.css");
+@import url("./styles/layout/container.css");
+@import url("./styles/components/button.css");
+@import url("./styles/components/modal.css");
 * {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -474,117 +480,3 @@ label.option-card:hover {
   color: #fff;
   border: 1px solid rgba(255, 255, 255, 0.2);
 }
-
-/*Base styles*/
-.c-button {
-  background: #2563eb;
-  color: #fff;
-  cursor: pointer;
-  outline: none;
-  display: inline-block;
-  font-size: 16px;
-  border: 1px solid transparent;
-  text-align: center;
-  padding: 0.8rem 1rem;
-  border-radius: 8px;
-
-  @media (min-width: 1024px) {
-    font-size: 18px;
-  }
-}
-
-.c-button:hover,
-.c-button:active,
-.c-button:focus {
-  background: #1d4ed8;
-}
-
-.c-button:disabled {
-  background: linear-gradient(to right, rgb(74, 74, 74), rgb(61, 61, 61));
-  opacity: 0.7;
-  cursor: not-allowed;
-}
-
-.c-button--secondary {
-  background: #dbeafe;
-  color: #202020;
-}
-
-.c-button--secondary:hover,
-.c-button--secondary:active,
-.c-button--secondary:focus {
-  background: #bfdbfe;
-}
-
-.c-button--block {
-  display: block;
-  width: 100%;
-}
-
-.c-button--blockDesktop {
-  display: block;
-  width: 100%;
-
-  @media (min-width: 1024px) {
-    width: auto;
-    margin: 0 auto;
-  }
-}
-
-.c-modal {
-  position: fixed;
-  padding: 1rem;
-  z-index: 1000;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  top: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  overflow-y: auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.c-modal__wrapper {
-  background: #23232382;
-  border-radius: 8px;
-  min-width: 340px;
-  max-width: 860px;
-}
-
-.c-modal__header {
-  position: relative;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-  font-size: 18px;
-  background: #000000a1;
-  text-align: center;
-  color: #fff;
-  padding: 1rem 2.4rem 1rem 1.4rem;
-}
-
-.c-modal__close {
-  cursor: pointer;
-  position: absolute;
-  right: 1rem;
-  top: 1rem;
-}
-
-.c-modal__content {
-  position: relative;
-  color: #fff;
-  padding: 1.4rem;
-  max-height: 60dvh;
-  overflow-y: scroll;
-  backdrop-filter: blur(8px);
-}
-
-/*This will be removed in future*/
-o-modal o-button {
-  @media (min-width: 1024px) {
-    margin: 0 auto;
-    display: block;
-    text-align: center;
-  }
-}
diff --git a/src/client/styles/components/button.css b/src/client/styles/components/button.css
new file mode 100644
index 000000000..3080f606f
--- /dev/null
+++ b/src/client/styles/components/button.css
@@ -0,0 +1,57 @@
+.c-button {
+  background: var(--primaryColor);
+  color: #fff;
+  cursor: pointer;
+  outline: none;
+  display: inline-block;
+  font-size: 16px;
+  border: 1px solid transparent;
+  text-align: center;
+  padding: 0.8rem 1rem;
+  border-radius: 8px;
+  transition: var(--transition);
+
+  @media (min-width: 1024px) {
+    font-size: 18px;
+  }
+}
+
+.c-button:hover,
+.c-button:active,
+.c-button:focus {
+  background: var(--primaryColorHover);
+  transition: var(--transition);
+}
+
+.c-button:disabled {
+  background: var(--primaryColorDisabled);
+  opacity: 0.7;
+  cursor: not-allowed;
+  transition: var(--transition);
+}
+
+.c-button--secondary {
+  background: var(--secondaryColor);
+  color: var(--fontColor);
+}
+
+.c-button--secondary:hover,
+.c-button--secondary:active,
+.c-button--secondary:focus {
+  background: var(--secondaryColorHover);
+}
+
+.c-button--block {
+  display: block;
+  width: 100%;
+}
+
+.c-button--blockDesktop {
+  display: block;
+  width: 100%;
+
+  @media (min-width: 1024px) {
+    width: auto;
+    margin: 0 auto;
+  }
+}
diff --git a/src/client/styles/components/modal.css b/src/client/styles/components/modal.css
new file mode 100644
index 000000000..090d22d25
--- /dev/null
+++ b/src/client/styles/components/modal.css
@@ -0,0 +1,57 @@
+.c-modal {
+  position: fixed;
+  padding: 1rem;
+  z-index: 1000;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  top: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  overflow-y: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.c-modal__wrapper {
+  background: #23232382;
+  border-radius: 8px;
+  min-width: 340px;
+  max-width: 860px;
+}
+
+.c-modal__header {
+  position: relative;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  font-size: 18px;
+  background: #000000a1;
+  text-align: center;
+  color: #fff;
+  padding: 1rem 2.4rem 1rem 1.4rem;
+}
+
+.c-modal__close {
+  cursor: pointer;
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+}
+
+.c-modal__content {
+  position: relative;
+  color: #fff;
+  padding: 1.4rem;
+  max-height: 60dvh;
+  overflow-y: scroll;
+  backdrop-filter: blur(8px);
+}
+
+/*This will be removed in future*/
+o-modal o-button {
+  @media (min-width: 1024px) {
+    margin: 0 auto;
+    display: block;
+    text-align: center;
+  }
+}
diff --git a/src/client/styles/core/typography.css b/src/client/styles/core/typography.css
new file mode 100644
index 000000000..30f42713b
--- /dev/null
+++ b/src/client/styles/core/typography.css
@@ -0,0 +1,13 @@
+.t-link {
+  color: #ffffffb3;
+  transition: var(--transition);
+
+  &:hover {
+    color: #fff;
+    transition: var(--transition);
+  }
+}
+
+.t-text-white {
+  color: #ffffffb3;
+}
diff --git a/src/client/styles/core/variables.css b/src/client/styles/core/variables.css
new file mode 100644
index 000000000..533b39cb8
--- /dev/null
+++ b/src/client/styles/core/variables.css
@@ -0,0 +1,19 @@
+:root {
+  --theme: "light";
+  --breakPoint-tablet: 800px;
+  --breakPoint-Desktop: 1024px;
+  --blur-md: 4px;
+  --boxBackgroundColor: #111827cc;
+  --fontColor: #202020;
+  --fontColorLight: #fff;
+  --primaryColor: #2563eb;
+  --primaryColorHover: #1d4ed8;
+  --primaryColorDisabled: linear-gradient(
+    to right,
+    rgb(74, 74, 74),
+    rgb(61, 61, 61)
+  );
+  --secondaryColor: #dbeafe;
+  --secondaryColorHover: #bfdbfe;
+  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
diff --git a/src/client/styles/layout/container.css b/src/client/styles/layout/container.css
new file mode 100644
index 000000000..951245368
--- /dev/null
+++ b/src/client/styles/layout/container.css
@@ -0,0 +1,19 @@
+.container {
+  display: flex;
+  padding: 1rem;
+  max-width: 540px !important;
+  flex-direction: column;
+  gap: 1rem;
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.container__row {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.container__row--equal > * {
+  flex: 1 1 100%;
+}
diff --git a/src/client/styles/layout/footer.css b/src/client/styles/layout/footer.css
new file mode 100644
index 000000000..7064d2281
--- /dev/null
+++ b/src/client/styles/layout/footer.css
@@ -0,0 +1,24 @@
+.l-footer {
+  background: var(--boxBackgroundColor);
+  backdrop-filter: blur(var(--blur-md));
+  display: flex;
+  justify-content: center;
+  padding: 12px;
+
+  @media (min-width: 800px) {
+    padding: 12px 24px;
+  }
+}
+
+.l-footer__content {
+  max-width: 860px;
+  flex-wrap: wrap;
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+}
+
+.l-footer__col {
+  display: flex;
+  gap: 10px;
+}
diff --git a/src/client/styles/layout/header.css b/src/client/styles/layout/header.css
new file mode 100644
index 000000000..df850ff8d
--- /dev/null
+++ b/src/client/styles/layout/header.css
@@ -0,0 +1,39 @@
+.l-header {
+  background: var(--boxBackgroundColor);
+  backdrop-filter: blur(var(--blur-md));
+  display: flex;
+  justify-content: center;
+  padding: 24px 24px 12px;
+
+  @media (min-width: 800px) {
+    padding: 24px 24px;
+  }
+}
+
+.l-header__content {
+  display: flex;
+  flex: 1;
+  max-width: 600px;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.l-header__logo {
+  max-width: 450px;
+  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));
+}
+
+.l-header__highlightText {
+  color: #2563eb;
+  font-weight: 700;
+  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));
+}
