diff --git a/app/Livewire/RealtimeConnection.php b/app/Livewire/RealtimeConnection.php
new file mode 100644
index 000000000..59fb12ca4
--- /dev/null
+++ b/app/Livewire/RealtimeConnection.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+class RealtimeConnection extends Component
+{
+    public $checkConnection = false;
+    public $showNotification = false;
+    public function render()
+    {
+        return view('livewire.realtime-connection');
+    }
+    public function disable()
+    {
+        auth()->user()->update(['is_notification_realtime_enabled' => false]);
+        $this->showNotification = false;
+    }
+    public function mount() {
+        $isRoot = auth()->user()->id === 0;
+        $showNotification = data_get(auth()->user(), 'is_notification_realtime_enabled');
+        $this->checkConnection = $isRoot && $showNotification;
+    }
+}
diff --git a/database/migrations/2023_12_11_103611_add_realtime_connection_problem.php b/database/migrations/2023_12_11_103611_add_realtime_connection_problem.php
new file mode 100644
index 000000000..285e2f457
--- /dev/null
+++ b/database/migrations/2023_12_11_103611_add_realtime_connection_problem.php
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->boolean('is_notification_realtime_enabled')->default(true);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->dropColumn('is_notification_realtime_enabled');
+        });
+    }
+};
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 1e7141dec..ee2101449 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -8,34 +8,10 @@
         </div>
     @endpersist
     <livewire:sponsorship />
+    @auth
+        <livewire:realtime-connection />
+    @endauth
     <main class="pb-10 main max-w-screen-2xl">
         {{ $slot }}
     </main>
-    <script data-navigate-once>
-        @auth
-        if ("{{ auth()->user()->id }}" == 0) {
-            let checkPusherInterval = null;
-            let checkNumber = 0;
-            let errorMessage =
-                "Coolify could not connect to the new realtime service introduced in beta.154.<br>Please check the related <a href='https://coolify.io/docs/cloudflare-tunnels' target='_blank'>documentation</a> or get help on <a href='https://coollabs.io/discord' target='_blank'>Discord</a>.";
-            checkPusherInterval = setInterval(() => {
-                if (window.Echo) {
-                    if (window.Echo.connector.pusher.connection.state !== 'connected') {
-                        checkNumber++;
-                        if (checkNumber > 2) {
-                            clearInterval(checkPusherInterval);
-                            window.Livewire.dispatch('error', errorMessage);
-                        }
-                    } else {
-                        console.log('Coolify is now connected to the new realtime service introduced in beta.154.');
-                        clearInterval(checkPusherInterval);
-                    }
-                } else {
-                    clearInterval(checkPusherInterval);
-                    window.Livewire.dispatch('error', errorMessage);
-                }
-            }, 2000);
-        }
-        @endauth
-    </script>
 @endsection
diff --git a/resources/views/livewire/realtime-connection.blade.php b/resources/views/livewire/realtime-connection.blade.php
new file mode 100644
index 000000000..46e3a1dfc
--- /dev/null
+++ b/resources/views/livewire/realtime-connection.blade.php
@@ -0,0 +1,36 @@
+<div x-data="{ showNotification: @entangle('showNotification') }">
+    @if ($checkConnection)
+        @script
+            <script>
+                let checkPusherInterval = null;
+                let checkNumber = 0;
+                checkPusherInterval = setInterval(() => {
+                    if (window.Echo) {
+                        if (window.Echo.connector.pusher.connection.state !== 'connected') {
+                            checkNumber++;
+                            if (checkNumber > 5) {
+                                $wire.showNotification = true;
+                                clearInterval(checkPusherInterval);
+                            }
+                        } else {
+                            console.log('Coolify is now connected to the new realtime service introduced in beta.154.');
+                            clearInterval(checkPusherInterval);
+                            $wire.showNotification = true;
+                        }
+                    } else {
+                        $wire.showNotification = true;
+                        clearInterval(checkPusherInterval);
+                    }
+                }, 2000);
+            </script>
+        @endscript
+        <div class="toast z-[9999]" x-cloak x-show="showNotification">
+            <div class="flex flex-col text-white border border-red-500 border-dashed rounded alert bg-coolgray-200">
+                <span><span class="font-bold text-left text-red-500">WARNING: </span>Coolify could not connect to the new realtime service introduced in beta.154. <br>This will cause unusual problems on the UI if not fixed!<br><br>Please check the
+                    related <a href='https://coolify.io/docs/cloudflare-tunnels' target='_blank'>documentation</a> or get
+                    help on <a href='https://coollabs.io/discord' target='_blank'>Discord</a>.</span>
+                <x-forms.button class="bg-coolgray-400" wire:click='disable'>Acknowledge the problem and disable this popup</x-forms.button>
+            </div>
+        </div>
+    @endif
+</div>