diff --git a/src/app.js b/src/app.js
index 029f67d..21e2df8 100644
--- a/src/app.js
+++ b/src/app.js
@@ -4592,16 +4592,6 @@ function renderTiming() {
             <button id="resetSession" class="btn btn-danger">${t("timing.reset")}</button>
           </div>
         </div>
-        <div class="timing-compact-card">
-          <span class="timing-compact-label">${t("overlay.title")}</span>
-          <div class="actions">
-            <button id="openOverlay" class="btn" type="button">${t("timing.open_overlay")}</button>
-            <button id="openSpeakerOverlay" class="btn" type="button">${t("timing.open_speaker_overlay")}</button>
-            <button id="openResultsOverlay" class="btn" type="button">${t("timing.open_results_overlay")}</button>
-            <button id="openTvOverlay" class="btn" type="button">${t("timing.open_tv_overlay")}</button>
-            <button id="openTeamOverlay" class="btn" type="button">${t("timing.open_team_overlay")}</button>
-          </div>
-        </div>
       </div>
       <div class="panel-body timing-session-summary">
         ${
@@ -4872,11 +4862,6 @@ function renderTiming() {
     renderView();
   });
 
-  document.getElementById("openOverlay")?.addEventListener("click", openOverlayWindow);
-  document.getElementById("openSpeakerOverlay")?.addEventListener("click", () => openOverlayWindow("speaker"));
-  document.getElementById("openResultsOverlay")?.addEventListener("click", () => openOverlayWindow("results"));
-  document.getElementById("openTvOverlay")?.addEventListener("click", () => openOverlayWindow("tv"));
-  document.getElementById("openTeamOverlay")?.addEventListener("click", () => openOverlayWindow("team"));
   document.querySelectorAll("[data-speaker-setting]").forEach((node) => {
     node.addEventListener("change", (event) => {
       const input = event.currentTarget;
@@ -5402,6 +5387,24 @@ function renderOverlay() {
   const denseOverlay = overlayViewMode === "leaderboard" || overlayViewMode === "tv";
 
   dom.view.innerHTML = `
+    ${
+      overlayMode
+        ? ""
+        : `
+          <section class="panel">
+            <div class="panel-header"><h3>${t("overlay.title")}</h3></div>
+            <div class="panel-body">
+              <div class="actions">
+                <button id="overlayLaunchLeaderboard" class="btn" type="button">${t("timing.open_overlay")}</button>
+                <button id="overlayLaunchSpeaker" class="btn" type="button">${t("timing.open_speaker_overlay")}</button>
+                <button id="overlayLaunchResults" class="btn" type="button">${t("timing.open_results_overlay")}</button>
+                <button id="overlayLaunchTv" class="btn" type="button">${t("timing.open_tv_overlay")}</button>
+                <button id="overlayLaunchTeam" class="btn" type="button">${t("timing.open_team_overlay")}</button>
+              </div>
+            </div>
+          </section>
+        `
+    }
     <section class="overlay-shell ${overlayViewMode === "tv" ? "overlay-shell-tv" : ""} ${denseOverlay ? "overlay-shell-dense" : ""}">
       ${
         active
@@ -5556,6 +5559,11 @@ function renderOverlay() {
     }
     await document.exitFullscreen?.().catch(() => {});
   });
+  document.getElementById("overlayLaunchLeaderboard")?.addEventListener("click", () => openOverlayWindow("leaderboard"));
+  document.getElementById("overlayLaunchSpeaker")?.addEventListener("click", () => openOverlayWindow("speaker"));
+  document.getElementById("overlayLaunchResults")?.addEventListener("click", () => openOverlayWindow("results"));
+  document.getElementById("overlayLaunchTv")?.addEventListener("click", () => openOverlayWindow("tv"));
+  document.getElementById("overlayLaunchTeam")?.addEventListener("click", () => openOverlayWindow("team"));
 }
 
 function buildOverlayPanels(active, recent) {