diff --git a/src/client/GameModeSelector.ts b/src/client/GameModeSelector.ts
index 526adf036..6992e342e 100644
--- a/src/client/GameModeSelector.ts
+++ b/src/client/GameModeSelector.ts
@@ -89,14 +89,23 @@ export class GameModeSelector extends LitElement {
     const special = this.lobbies?.games?.["special"]?.[0];
 
     return html`
-      <div
-        class="grid grid-cols-1 lg:grid-cols-2 gap-4 w-[70%] lg:w-full mx-auto pb-4 lg:pb-0"
-      >
-        ${ffa ? this.renderLobbyCard(ffa, this.getLobbyTitle(ffa)) : nothing}
-        ${teams
-          ? this.renderLobbyCard(teams, this.getLobbyTitle(teams))
-          : nothing}
-        ${special ? this.renderSpecialLobbyCard(special) : nothing}
+      <div class="flex flex-col gap-4 w-[84%] lg:w-full mx-auto pb-4 lg:pb-0">
+        <div class="order-first lg:order-none h-14 lg:hidden">
+          ${this.renderSoloButton()}
+        </div>
+        <div
+          class="grid grid-cols-1 lg:grid-cols-[3fr_2fr] lg:grid-rows-2 gap-4 lg:h-[28rem]"
+        >
+          ${ffa
+            ? html`<div class="lg:row-span-2">
+                ${this.renderLobbyCard(ffa, this.getLobbyTitle(ffa))}
+              </div>`
+            : nothing}
+          ${teams
+            ? this.renderLobbyCard(teams, this.getLobbyTitle(teams))
+            : nothing}
+          ${special ? this.renderSpecialLobbyCard(special) : nothing}
+        </div>
         ${this.renderQuickActionsSection()}
       </div>
     `;
@@ -116,20 +125,27 @@ export class GameModeSelector extends LitElement {
     return this.renderLobbyCard(lobby, titleContent);
   }
 
+  private renderSoloButton() {
+    const title = translateText("main.solo");
+    return html`
+      <button
+        @click=${this.openSinglePlayerModal}
+        class="flex items-center justify-center w-full h-full rounded-xl bg-blue-600 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"
+      >
+        ${title}
+      </button>
+    `;
+  }
+
   private renderQuickActionsSection() {
     return html`
-      <div class="contents lg:flex lg:flex-col lg:gap-2 lg:h-56">
-        <div class="max-lg:order-first grid grid-cols-2 gap-2 h-20 lg:flex-1">
-          ${this.renderSmallActionCard(
-            translateText("main.solo"),
-            this.openSinglePlayerModal,
-          )}
+      <div class="flex flex-col gap-2">
+        <div class="h-14 hidden lg:block">${this.renderSoloButton()}</div>
+        <div class="grid grid-cols-3 gap-2 h-14">
           ${this.renderSmallActionCard(
             translateText("mode_selector.ranked_title"),
             this.openRankedMenu,
           )}
-        </div>
-        <div class="grid grid-cols-2 gap-2 h-20 lg:flex-1">
           ${this.renderSmallActionCard(
             translateText("main.create"),
             this.openHostLobby,
@@ -213,7 +229,7 @@ export class GameModeSelector extends LitElement {
     return html`
       <button
         @click=${() => this.validateAndJoin(lobby)}
-        class="group flex flex-col w-full h-40 lg:h-56 text-white uppercase rounded-2xl overflow-hidden transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98] ${CARD_BG}"
+        class="group flex flex-col w-full h-44 lg:h-full text-white uppercase rounded-2xl overflow-hidden transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98] ${CARD_BG}"
       >
         <div class="relative flex-1 overflow-hidden ${CARD_BG}">
           ${mapImageSrc
diff --git a/src/client/components/MainLayout.ts b/src/client/components/MainLayout.ts
index 1c32e6dcf..bbe389bfe 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"
+          class="w-full lg: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"
         >
           ${this._initialChildren}
         </div>
diff --git a/src/client/components/PlayPage.ts b/src/client/components/PlayPage.ts
index aec22ccf2..52cd7b211 100644
--- a/src/client/components/PlayPage.ts
+++ b/src/client/components/PlayPage.ts
@@ -11,7 +11,7 @@ export class PlayPage extends LitElement {
     return html`
       <div
         id="page-play"
-        class="flex flex-col gap-2 w-full lg:max-w-6xl mx-auto px-0 lg:px-4 lg:my-auto min-h-0"
+        class="flex flex-col gap-2 w-full px-0 lg:px-4 lg:my-auto min-h-0"
       >
         <token-login class="absolute"></token-login>