diff --git a/src/client/InputHandler.ts b/src/client/InputHandler.ts
index 302f7e49c..da42f3a77 100644
--- a/src/client/InputHandler.ts
+++ b/src/client/InputHandler.ts
@@ -110,12 +110,17 @@ export class InputHandler {
   initialize() {
     this.canvas.addEventListener("pointerdown", (e) => this.onPointerDown(e));
     window.addEventListener("pointerup", (e) => this.onPointerUp(e));
-    this.canvas.addEventListener("wheel", (e) => this.onScroll(e), {
-      passive: false,
-    });
-    this.canvas.addEventListener("wheel", (e) => this.onShiftScroll(e), {
-      passive: false,
-    });
+    this.canvas.addEventListener(
+      "wheel",
+      (e) => {
+        this.onScroll(e);
+        this.onShiftScroll(e);
+        e.preventDefault();
+      },
+      {
+        passive: false,
+      },
+    );
     window.addEventListener("pointermove", this.onPointerMove.bind(this));
     this.canvas.addEventListener("contextmenu", (e: MouseEvent) => {
       this.onContextMenu(e);
@@ -195,6 +200,8 @@ export class InputHandler {
           "Digit1",
           "Digit2",
           "KeyC",
+          "ControlLeft",
+          "ControlRight",
         ].includes(e.code)
       ) {
         this.activeKeys.add(e.code);
@@ -245,6 +252,8 @@ export class InputHandler {
           "Digit1",
           "Digit2",
           "KeyC",
+          "ControlLeft",
+          "ControlRight",
         ].includes(e.code)
       ) {
         this.activeKeys.delete(e.code);
@@ -305,7 +314,11 @@ export class InputHandler {
 
   private onScroll(event: WheelEvent) {
     if (!event.shiftKey) {
-      this.eventBus.emit(new ZoomEvent(event.x, event.y, event.deltaY));
+      const realCtrl =
+        this.activeKeys.has("ControlLeft") ||
+        this.activeKeys.has("ControlRight");
+      const ratio = event.ctrlKey && !realCtrl ? 10 : 1; // Compensate pinch-zoom low sensitivity
+      this.eventBus.emit(new ZoomEvent(event.x, event.y, event.deltaY * ratio));
     }
   }
 
diff --git a/src/client/Main.ts b/src/client/Main.ts
index 0314bc8f7..31144f366 100644
--- a/src/client/Main.ts
+++ b/src/client/Main.ts
@@ -7,6 +7,7 @@ import { UsernameInput } from "./UsernameInput";
 import { SinglePlayerModal } from "./SinglePlayerModal";
 import { HostLobbyModal as HostPrivateLobbyModal } from "./HostLobbyModal";
 import { JoinPrivateLobbyModal } from "./JoinPrivateLobbyModal";
+import { GameStartingModal } from "./gameStartingModal";
 import { generateID } from "../core/Util";
 import { generateCryptoRandomUUID } from "./Utils";
 import { consolex } from "../core/Consolex";
@@ -163,6 +164,14 @@ class Client {
       () => {
         this.joinModal.close();
         this.publicLobby.stop();
+
+        // show when the game loads
+        const startingModal = document.querySelector(
+          "game-starting-modal",
+        ) as GameStartingModal;
+        startingModal instanceof GameStartingModal;
+        startingModal.show();
+
         if (gameType != GameType.Singleplayer) {
           window.history.pushState({}, "", `/join/${lobby.gameID}`);
           sessionStorage.setItem("inLobby", "true");
diff --git a/src/client/gameStartingModal.ts b/src/client/gameStartingModal.ts
new file mode 100644
index 000000000..4b7dae464
--- /dev/null
+++ b/src/client/gameStartingModal.ts
@@ -0,0 +1,106 @@
+import { LitElement, html, css } from "lit";
+import { customElement, state } from "lit/decorators.js";
+
+@customElement("game-starting-modal")
+export class GameStartingModal extends LitElement {
+  @state()
+  isVisible = false;
+
+  static styles = css`
+    .modal {
+      display: none;
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-color: rgba(30, 30, 30, 0.7);
+      padding: 25px;
+      border-radius: 10px;
+      z-index: 9999;
+      box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(5px);
+      color: white;
+      width: 300px;
+      text-align: center;
+      transition:
+        opacity 0.3s ease-in-out,
+        visibility 0.3s ease-in-out;
+    }
+
+    .modal.visible {
+      display: block;
+      animation: fadeIn 0.3s ease-out;
+    }
+
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: translate(-50%, -48%);
+      }
+      to {
+        opacity: 1;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    .modal h2 {
+      margin-bottom: 15px;
+      font-size: 22px;
+      color: white;
+    }
+
+    .modal p {
+      margin-bottom: 20px;
+      background-color: rgba(0, 0, 0, 0.3);
+      padding: 10px;
+      border-radius: 5px;
+    }
+
+    .button-container {
+      display: flex;
+      justify-content: center;
+      gap: 10px;
+    }
+
+    .modal button {
+      padding: 12px;
+      font-size: 16px;
+      cursor: pointer;
+      background: rgba(255, 100, 100, 0.7);
+      color: white;
+      border: none;
+      border-radius: 5px;
+      transition:
+        background-color 0.2s ease,
+        transform 0.1s ease;
+    }
+
+    .modal button:hover {
+      background: rgba(255, 100, 100, 0.9);
+      transform: translateY(-1px);
+    }
+
+    .modal button:active {
+      transform: translateY(1px);
+    }
+  `;
+
+  render() {
+    return html`
+      <div class="modal ${this.isVisible ? "visible" : ""}">
+        <h2>Game is Starting...</h2>
+        <p>Preparing for the lobby to start. Please wait.</p>
+      </div>
+    `;
+  }
+
+  show() {
+    this.isVisible = true;
+    this.requestUpdate();
+  }
+
+  hide() {
+    this.isVisible = false;
+    this.requestUpdate();
+  }
+}
diff --git a/src/client/graphics/GameRenderer.ts b/src/client/graphics/GameRenderer.ts
index e9263f095..fd4090314 100644
--- a/src/client/graphics/GameRenderer.ts
+++ b/src/client/graphics/GameRenderer.ts
@@ -25,6 +25,7 @@ import { SpawnTimer } from "./layers/SpawnTimer";
 import { OptionsMenu } from "./layers/OptionsMenu";
 import { TopBar } from "./layers/TopBar";
 import { PlayerPanel } from "./layers/PlayerPanel";
+import { GameStartingModal } from "../gameStartingModal";
 
 export function createRenderer(
   canvas: HTMLCanvasElement,
@@ -36,6 +37,13 @@ export function createRenderer(
 
   const uiState = { attackRatio: 20 };
 
+  //hide when the game renders
+  const startingModal = document.querySelector(
+    "game-starting-modal",
+  ) as GameStartingModal;
+  startingModal instanceof GameStartingModal;
+  startingModal.hide();
+
   // TODO maybe append this to dcoument instead of querying for them?
   const emojiTable = document.querySelector("emoji-table") as EmojiTable;
   if (!emojiTable || !(emojiTable instanceof EmojiTable)) {
diff --git a/src/client/index.html b/src/client/index.html
index a10a5d38c..c6b138978 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -247,6 +247,7 @@
     <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>