diff --git a/src/client/graphics/GameRenderer.ts b/src/client/graphics/GameRenderer.ts
index 901ff166e..6fef871c0 100644
--- a/src/client/graphics/GameRenderer.ts
+++ b/src/client/graphics/GameRenderer.ts
@@ -13,6 +13,7 @@ import { ControlPanel } from "./layers/ControlPanel";
 import { EmojiTable } from "./layers/EmojiTable";
 import { EventsDisplay } from "./layers/EventsDisplay";
 import { FxLayer } from "./layers/FxLayer";
+import { HeadsUpMessage } from "./layers/HeadsUpMessage";
 import { Layer } from "./layers/Layer";
 import { Leaderboard } from "./layers/Leaderboard";
 import { MultiTabModal } from "./layers/MultiTabModal";
@@ -172,6 +173,14 @@ export function createRenderer(
   }
   playerTeamLabel.game = game;
 
+  const headsUpMessage = document.querySelector(
+    "heads-up-message",
+  ) as HeadsUpMessage;
+  if (!(headsUpMessage instanceof HeadsUpMessage)) {
+    console.error("heads-up message not found");
+  }
+  headsUpMessage.game = game;
+
   const unitInfoModal = document.querySelector(
     "unit-info-modal",
   ) as UnitInfoModal;
@@ -220,6 +229,7 @@ export function createRenderer(
     topBar,
     playerPanel,
     playerTeamLabel,
+    headsUpMessage,
     unitInfoModal,
     multiTabModal,
   ];
diff --git a/src/client/graphics/layers/HeadsUpMessage.ts b/src/client/graphics/layers/HeadsUpMessage.ts
new file mode 100644
index 000000000..8dd68d59a
--- /dev/null
+++ b/src/client/graphics/layers/HeadsUpMessage.ts
@@ -0,0 +1,46 @@
+import { LitElement, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { GameView } from "../../../core/game/GameView";
+import { Layer } from "./Layer";
+
+@customElement("heads-up-message")
+export class HeadsUpMessage extends LitElement implements Layer {
+  public game: GameView;
+
+  @state()
+  private isVisible = false;
+
+  createRenderRoot() {
+    return this;
+  }
+
+  init() {
+    this.isVisible = true;
+    this.requestUpdate();
+  }
+
+  tick() {
+    if (!this.game.inSpawnPhase()) {
+      this.isVisible = false;
+      this.requestUpdate();
+    }
+  }
+
+  render() {
+    if (!this.isVisible) {
+      return html``;
+    }
+
+    return html`
+      <div
+        class="flex items-center 
+                    w-full justify-evenly h-8 lg:h-10 top-0 lg:top-4 left-0 lg:left-4 
+                    bg-opacity-60 bg-gray-900 rounded-md lg:rounded-lg 
+                    backdrop-blur-md text-white text-md lg:text-xl p-1 lg:p-2"
+        @contextmenu=${(e) => e.preventDefault()}
+      >
+        Choose a starting location
+      </div>
+    `;
+  }
+}
diff --git a/src/client/index.html b/src/client/index.html
index 3e15ba515..dc635b838 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -299,6 +299,11 @@
       <options-menu></options-menu>
       <player-info-overlay></player-info-overlay>
     </div>
+    <div
+      class="fixed bottom-[30px] sm:bottom-auto sm:top-[20px] z-50 mx-auto max-w-max inset-x-0 items-center"
+    >
+      <heads-up-message></heads-up-message>
+    </div>
     <div class="fixed left-[10px] top-[10px] z-50 w-36 lg:w-48 items-center">
       <player-team-label></player-team-label>
     </div>