diff --git a/neode-ui/src/views/dashboard/ConnectionBanner.vue b/neode-ui/src/views/dashboard/ConnectionBanner.vue
index 222d654c..22fade02 100644
--- a/neode-ui/src/views/dashboard/ConnectionBanner.vue
+++ b/neode-ui/src/views/dashboard/ConnectionBanner.vue
@@ -1,25 +1,37 @@
 <template>
-  <!-- Offline Banner -->
-  <div v-if="isOffline && !store.isReconnecting && store.isAuthenticated" class="path-option-card mx-6 mt-6 px-6 py-3 border-l-4 border-yellow-500">
-    <div class="flex items-center gap-2 text-yellow-200">
-      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-      </svg>
-      <span class="font-medium">
-        {{ isRestarting ? 'Server is restarting...' : isShuttingDown ? 'Server is shutting down...' : 'Connection lost' }}
-      </span>
-    </div>
-  </div>
+  <Teleport to="body">
+    <!-- Offline Banner -->
+    <Transition name="conn-banner">
+      <div
+        v-if="isOffline && !store.isReconnecting && store.isAuthenticated"
+        class="conn-banner-overlay"
+      >
+        <div class="path-option-card px-6 py-3 border-l-4 border-yellow-500 inline-flex items-center gap-2 text-yellow-200 shadow-2xl">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+          </svg>
+          <span class="font-medium">
+            {{ isRestarting ? 'Server is restarting...' : isShuttingDown ? 'Server is shutting down...' : 'Connection lost' }}
+          </span>
+        </div>
+      </div>
+    </Transition>
 
-  <!-- Reconnecting Banner -->
-  <div v-if="store.isReconnecting && store.isAuthenticated" class="path-option-card mx-6 mt-6 px-6 py-3 border-l-4 border-blue-500">
-    <div class="flex items-center gap-2 text-blue-200">
-      <svg class="w-5 h-5 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-      </svg>
-      <span class="font-medium">Reconnecting...</span>
-    </div>
-  </div>
+    <!-- Reconnecting Banner -->
+    <Transition name="conn-banner">
+      <div
+        v-if="store.isReconnecting && store.isAuthenticated"
+        class="conn-banner-overlay"
+      >
+        <div class="path-option-card px-6 py-3 border-l-4 border-blue-500 inline-flex items-center gap-2 text-blue-200 shadow-2xl">
+          <svg class="w-5 h-5 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+          </svg>
+          <span class="font-medium">Reconnecting...</span>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
 </template>
 
 <script setup lang="ts">
@@ -32,3 +44,34 @@ const isOffline = computed(() => store.isOffline)
 const isRestarting = computed(() => store.isRestarting)
 const isShuttingDown = computed(() => store.isShuttingDown)
 </script>
+
+<style scoped>
+/* Float the connection banners over the UI instead of occupying layout space
+ * (which previously pushed the whole dashboard down when reconnecting).
+ * Pinned top-center, clear of the status bar via the safe-area inset that the
+ * Android companion app injects (--safe-area-top), falling back to env(). */
+.conn-banner-overlay {
+  position: fixed;
+  top: calc(1rem + var(--safe-area-top, env(safe-area-inset-top, 0px)));
+  left: 50%;
+  z-index: 60;
+  transform: translateX(-50%);
+  max-width: calc(100% - 2rem);
+  pointer-events: none; /* purely informational — never intercept taps */
+}
+
+.conn-banner-enter-active,
+.conn-banner-leave-active {
+  transition: opacity 0.25s ease, transform 0.25s ease;
+}
+.conn-banner-enter-from,
+.conn-banner-leave-to {
+  opacity: 0;
+  transform: translateX(-50%) translateY(-8px);
+}
+.conn-banner-enter-to,
+.conn-banner-leave-from {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+</style>