diff --git a/src/routes/events/[event_id]/(launcher)/cfg_components/launcher_cfg_app_modes.svelte b/src/routes/events/[event_id]/(launcher)/cfg_components/launcher_cfg_app_modes.svelte
index 4e6a449d..e3ba7493 100644
--- a/src/routes/events/[event_id]/(launcher)/cfg_components/launcher_cfg_app_modes.svelte
+++ b/src/routes/events/[event_id]/(launcher)/cfg_components/launcher_cfg_app_modes.svelte
@@ -106,7 +106,9 @@
                     class:preset-filled-primary={$events_loc.launcher
                         .app_mode === 'default'}
                     class:preset-tonal-surface={$events_loc.launcher.app_mode !==
-                        'default'}>Web</button
+                        'default'}
+                    title="Default standard web browser (Chromium, Firefox, Safari based) launcher, for remote presenters and testing before being onsite">
+                        Web</button
                 >
                 <button
                     type="button"
@@ -115,7 +117,8 @@
                     class:preset-filled-primary={$events_loc.launcher
                         .app_mode === 'native'}
                     class:preset-tonal-surface={$events_loc.launcher.app_mode !==
-                        'native'}>App</button
+                        'native'}
+                    title="Native Electron based app launcher, for onsite presenters in session rooms">App</button
                 >
                 <button
                     type="button"
@@ -124,7 +127,8 @@
                     class:preset-filled-primary={$events_loc.launcher
                         .app_mode === 'onsite'}
                     class:preset-tonal-surface={$events_loc.launcher.app_mode !==
-                        'onsite'}>Onsite</button
+                        'onsite'}
+                    title="Customized onsite OS and web browser (Chromium or Firefox based) launcher, for onsite presenters in for practice and onsite backup">Onsite</button
                 >
             </div>
         </div>
diff --git a/src/routes/events/[event_id]/(launcher)/launcher_background_sync.svelte b/src/routes/events/[event_id]/(launcher)/launcher_background_sync.svelte
index 9ffa21da..7da711dc 100644
--- a/src/routes/events/[event_id]/(launcher)/launcher_background_sync.svelte
+++ b/src/routes/events/[event_id]/(launcher)/launcher_background_sync.svelte
@@ -418,49 +418,52 @@
     }
 </script>
 
-<!-- Monitor Overlay (Hidden by default, triggered by config modal or secret gesture) -->
+<!-- Monitor Overlay: only shown in Native/App mode.
+     Positioned bottom-left at bottom-20 to clear the debug π button (bottom-8 left-2)
+     and the sys bar (bottom-12 right-2). Panel grows upward from the status chip. -->
+{#if $events_loc.launcher.app_mode === 'native' || $ae_loc.is_native}
 <div
-    class="fixed bottom-4 right-4 z-[9999] flex flex-col items-end gap-2 pointer-events-none"
+    class="fixed bottom-20 left-4 z-[9999] flex flex-col items-start gap-2 pointer-events-none"
 >
     {#if show_monitor}
         <div
-            class="bg-black/90 text-white p-3 rounded-lg border border-primary-500 shadow-2xl text-[10px] font-mono min-w-48 pointer-events-auto"
+            class="bg-surface-50/95 dark:bg-surface-900/95 text-surface-800 dark:text-surface-100 p-3 rounded-lg border border-surface-200 dark:border-primary-700 shadow-2xl text-[10px] font-mono min-w-52 pointer-events-auto backdrop-blur-sm"
         >
             <div
-                class="flex justify-between border-b border-primary-500 pb-1 mb-2"
+                class="flex justify-between border-b border-surface-200 dark:border-primary-700 pb-1 mb-2"
             >
-                <span class="font-bold text-primary-400"
+                <span class="font-bold text-primary-600 dark:text-primary-400"
                     >NATIVE SYNC MONITOR</span
                 >
                 <button
                     type="button"
                     onclick={() => (show_monitor = false)}
-                    class="text-error-500 hover:text-error-400">×</button
+                    class="text-error-500 hover:text-error-400 ml-2">×</button
                 >
             </div>
 
             <div class="grid grid-cols-2 gap-x-4 gap-y-1 mb-2">
-                <span class="opacity-70 text-primary-300">Room Status:</span>
+                <span class="opacity-60 text-primary-700 dark:text-primary-300">Room Status:</span>
                 <span class="text-right"
                     >{sync_stats.cached} / {sync_stats.total} Files</span
                 >
 
-                <span class="opacity-70 text-primary-300">Prefix Len:</span>
+                <span class="opacity-60 text-primary-700 dark:text-primary-300">Prefix Len:</span>
                 <span class="text-right"
                     >{$ae_loc.native_device?.hash_prefix_length || 2} chars</span
                 >
 
-                <span class="opacity-70 text-primary-300">Heartbeat:</span>
+                <span class="opacity-60 text-primary-700 dark:text-primary-300">Heartbeat:</span>
                 <span
                     class="text-right {last_heartbeat
-                        ? 'text-success-500'
-                        : 'text-error-500'}"
+                        ? 'text-success-600 dark:text-success-400'
+                        : 'text-error-600 dark:text-error-400'}"
                 >
                     {last_heartbeat || 'Pending...'}
                 </span>
             </div>
 
-            <div class="border-t border-white/10 pt-2 flex flex-col gap-1">
+            <div class="border-t border-surface-200 dark:border-surface-700 pt-2 flex flex-col gap-1">
                 <div class="flex justify-between items-center">
                     <span class:text-primary-500={timer__event}
                         >Event Loop:</span
@@ -501,35 +504,32 @@
         </div>
     {/if}
 
-    {#if currently_syncing}
-        <button
-            type="button"
-            onclick={() => (show_monitor = !show_monitor)}
-            class="bg-black/80 text-white p-2 rounded-lg text-[10px] border border-primary-500 animate-pulse shadow-2xl pointer-events-auto transition-transform active:scale-95"
-        >
-            <div class="flex items-center gap-2 text-left">
-                <span class="fas fa-sync fa-spin text-primary-500 text-sm"
-                ></span>
-                <div class="flex flex-col">
-                    <span class="font-bold">Syncing Room Files...</span>
-                    <span class="opacity-70 truncate max-w-48"
-                        >{currently_syncing}</span
-                    >
-                    <span class="text-[8px] mt-1 text-primary-300"
-                        >Monitor Ready (Click to View)</span
-                    >
-                </div>
-            </div>
-        </button>
-    {:else}
-        <!-- Secret button area to toggle monitor when not syncing -->
-        <button
-            type="button"
-            onclick={() => (show_monitor = !show_monitor)}
-            class="w-8 h-8 opacity-0 hover:opacity-20 bg-primary-500 rounded-full pointer-events-auto flex items-center justify-center transition-opacity"
-            title="Toggle Sync Monitor"
-        >
-            <span class="fas fa-microchip text-white text-[10px]"></span>
-        </button>
-    {/if}
+    <!-- Compact always-visible status chip.
+         Syncing: animated primary border + pulse. Idle: subtle muted chip.
+         Replaces the old invisible secret button so staff can always see the monitor. -->
+    <button
+        type="button"
+        onclick={() => (show_monitor = !show_monitor)}
+        class="
+            flex items-center gap-1.5
+            px-2 py-1.5 rounded-lg
+            text-[10px] font-mono
+            pointer-events-auto
+            transition-all
+            {currently_syncing
+                ? 'bg-primary-500/15 dark:bg-primary-500/25 border border-primary-500 text-primary-700 dark:text-primary-300 shadow-md animate-pulse'
+                : 'bg-surface-100/90 dark:bg-surface-800/80 border border-surface-300 dark:border-surface-600 text-surface-600 dark:text-surface-300 opacity-60 hover:opacity-100 shadow-sm'}
+        "
+        title="Native Sync Monitor · {sync_stats.cached}/{sync_stats.total} files · click to {show_monitor ? 'close' : 'open'}"
+    >
+        <span class="fas {currently_syncing ? 'fa-sync fa-spin text-primary-500' : 'fa-microchip opacity-50'} text-[9px]"></span>
+        {#if currently_syncing}
+            <span class="truncate max-w-40 text-left">{currently_syncing}</span>
+        {:else}
+            <span>Native Sync</span>
+            <span class="opacity-50 ml-0.5">{sync_stats.cached}/{sync_stats.total}</span>
+        {/if}
+        <span class="fas {show_monitor ? 'fa-chevron-down' : 'fa-chevron-up'} text-[7px] opacity-40 ml-0.5"></span>
+    </button>
 </div>
+{/if}