diff --git a/images/chromium-headful/client/src/app.vue b/images/chromium-headful/client/src/app.vue
index ebf73ca8..20f3c8e8 100644
--- a/images/chromium-headful/client/src/app.vue
+++ b/images/chromium-headful/client/src/app.vue
@@ -32,7 +32,8 @@
         </div>
       </main>
       <neko-side v-if="!videoOnly && side" />
-      <neko-connect v-if="!connected" />
+      <neko-connect v-if="!connected && !wasConnected" />
+      <neko-disconnected v-if="!connected && wasConnected" />
       <neko-about v-if="about" />
       <notifications
         v-if="!videoOnly"
@@ -175,6 +176,7 @@
   import { Vue, Component, Ref, Watch } from 'vue-property-decorator'
 
   import Connect from '~/components/connect.vue'
+  import Disconnected from '~/components/disconnected.vue'
   import Video from '~/components/video.vue'
   import Menu from '~/components/menu.vue'
   import Side from '~/components/side.vue'
@@ -189,6 +191,7 @@
     name: 'neko',
     components: {
       'neko-connect': Connect,
+      'neko-disconnected': Disconnected,
       'neko-video': Video,
       // 'neko-menu': Menu,
       //'neko-side': Side,
@@ -204,6 +207,7 @@
     @Ref('video') video!: Video
 
     shakeKbd = false
+    wasConnected = false
 
     get volume() {
       const numberParam = parseFloat(new URL(location.href).searchParams.get('volume') || '1.0')
@@ -272,6 +276,7 @@
     @Watch('connected', { immediate: true })
     onConnected(value: boolean) {
       if (value) {
+        this.wasConnected = true
         this.applyQueryResolution()
         try {
           if (window.parent !== window) {
@@ -364,6 +369,11 @@
       }
     }
 
-
+    @Watch('connected', { immediate: true })
+    onConnectedChange(connected: boolean) {
+      if (connected) {
+        this.wasConnected = true
+      }
+    }
   }
 </script>
diff --git a/images/chromium-headful/client/src/components/connect.vue b/images/chromium-headful/client/src/components/connect.vue
index 911ed79d..43d81af1 100644
--- a/images/chromium-headful/client/src/components/connect.vue
+++ b/images/chromium-headful/client/src/components/connect.vue
@@ -1,15 +1,6 @@
 <template>
   <div class="connect">
     <div class="window">
-      <form class="message" v-if="!connecting" @submit.stop.prevent="connect">
-        <span v-if="!autoPassword">{{ $t('connect.login_title') }}</span>
-        <span v-else>{{ $t('connect.invitation_title') }}</span>
-        <input type="text" :placeholder="$t('connect.displayname')" v-model="displayname" />
-        <input type="password" :placeholder="$t('connect.password')" v-model="password" v-if="!autoPassword" />
-        <button type="submit" @click.stop.prevent="login">
-          {{ $t('connect.connect') }}
-        </button>
-      </form>
       <div class="loader" v-if="connecting">
         <img src="../assets/images/logo.svg" alt="loading" aria-hidden="true" class="kernel-logo" />
       </div>
@@ -54,46 +45,6 @@
         }
       }
 
-      .message {
-        display: flex;
-        flex-direction: column;
-
-        span {
-          display: block;
-          text-align: center;
-          text-transform: uppercase;
-          line-height: 30px;
-        }
-
-        input {
-          border: none;
-          padding: 6px 8px;
-          line-height: 20px;
-          border-radius: 5px;
-          margin: 5px 0;
-          background: $background-tertiary;
-          color: $text-normal;
-
-          &::selection {
-            background: $text-link;
-          }
-        }
-
-        button {
-          cursor: pointer;
-          border-radius: 5px;
-          padding: 4px;
-          background: $style-primary;
-          color: $text-normal;
-          text-align: center;
-          text-transform: uppercase;
-          font-weight: bold;
-          line-height: 30px;
-          margin: 5px 0;
-          border: none;
-        }
-      }
-
       .loader {
         width: 90px;
         height: 90px;
diff --git a/images/chromium-headful/client/src/components/disconnected.vue b/images/chromium-headful/client/src/components/disconnected.vue
new file mode 100644
index 00000000..db45cc78
--- /dev/null
+++ b/images/chromium-headful/client/src/components/disconnected.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="disconnected-overlay">
+    <div class="message-container">
+      <span class="message">{{ $t('disconnected.message') }}</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .disconnected-overlay {
+    width: 100vw;
+    height: 100vh;
+    background: #000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .message-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 20px;
+
+      .message {
+        font-size: 18px;
+        color: $text-muted;
+        text-align: center;
+      }
+    }
+  }
+</style>
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator'
+
+  @Component({ name: 'neko-disconnected' })
+  export default class extends Vue {}
+</script>
diff --git a/images/chromium-headful/client/src/locale/en-us.ts b/images/chromium-headful/client/src/locale/en-us.ts
index edc7f2bb..3c976c73 100644
--- a/images/chromium-headful/client/src/locale/en-us.ts
+++ b/images/chromium-headful/client/src/locale/en-us.ts
@@ -125,3 +125,7 @@ export const files = {
   uploads: 'Uploads',
   upload_here: 'Click or drag files here to upload',
 }
+
+export const disconnected = {
+  message: 'Browser has been shut down and is no longer available',
+}
diff --git a/images/chromium-headful/client/src/neko/base.ts b/images/chromium-headful/client/src/neko/base.ts
index 12828595..501a8fd8 100644
--- a/images/chromium-headful/client/src/neko/base.ts
+++ b/images/chromium-headful/client/src/neko/base.ts
@@ -69,8 +69,11 @@ export abstract class BaseClient extends EventEmitter<BaseEvents> {
       )
       this.emit('debug', `connecting to ${this._ws.url}`)
       this._ws.onmessage = this.onMessage.bind(this)
-      this._ws.onerror = () => this.onError.bind(this)
-      this._ws.onclose = () => this.onDisconnected.bind(this, new Error('websocket closed'))
+      this._ws.onerror = this.onError.bind(this)
+      this._ws.onclose = (event) => {
+        this.emit('debug', `websocket closed: code=${event.code}, reason=${event.reason}`)
+        this.onDisconnected(new Error('websocket closed'))
+      }
       this._timeout = window.setTimeout(this.onTimeout.bind(this), 15000)
     } catch (err: any) {
       this.onDisconnected(err)
diff --git a/images/chromium-headful/client/src/neko/index.ts b/images/chromium-headful/client/src/neko/index.ts
index b0fb9397..92df801d 100644
--- a/images/chromium-headful/client/src/neko/index.ts
+++ b/images/chromium-headful/client/src/neko/index.ts
@@ -75,13 +75,14 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
   // Internal Events
   /////////////////////////////
   protected [EVENT.RECONNECTING]() {
-    this.$vue.$notify({
-      group: 'neko',
-      type: 'warning',
-      title: this.$vue.$t('connection.reconnecting') as string,
-      duration: 5000,
-      speed: 1000,
-    })
+    // KERNEL: Differentiate between temporary network issues and permanent disconnection
+    // If WebSocket is still open, this is likely a temporary ICE disconnection (network glitch)
+    // Allow WebRTC to attempt recovery automatically
+    // If WebSocket is closed, the browser process is likely gone - show disconnected overlay
+    if (!this.socketOpen) {
+      this.cleanup()
+    }
+    // else: WebSocket still open, let WebRTC recover naturally
   }
 
   protected [EVENT.CONNECTING]() {