diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss
index 822bf8129..7401fda74 100644
--- a/sass/_chatbox.scss
+++ b/sass/_chatbox.scss
@@ -597,7 +597,7 @@
             .chat-body {
                 height: inherit;
                 overflow: hidden;
-                background-color: var(--chat-head-color);
+                background-color: var(--chat-background-color);
             }
             .chat-title {
                 font-size: var(--font-size-huge);
diff --git a/sass/_variables.scss b/sass/_variables.scss
index 780422465..82a411d67 100644
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@@ -38,6 +38,8 @@ $mobile_portrait_length: 480px !default;
     --message-avatar-width: 36px;
     --message-avatar-height: 36px;
 
+    --chat-background-color: white;
+
     --chat-textarea-color: #666;
     --chat-textarea-background-color: white;
     --chat-textarea-height: 60px;
diff --git a/src/plugins/chatboxviews/templates/chats.js b/src/plugins/chatboxviews/templates/chats.js
index 6dfe72b9a..06117950c 100644
--- a/src/plugins/chatboxviews/templates/chats.js
+++ b/src/plugins/chatboxviews/templates/chats.js
@@ -5,7 +5,8 @@ import { _converse, api } from '@converse/headless/core';
 export default () => {
     const { chatboxes, CONTROLBOX_TYPE, CHATROOMS_TYPE, HEADLINES_TYPE } = _converse;
     const view_mode = api.settings.get('view_mode');
-
+    const connection = _converse?.connection;
+    const logged_out = !connection?.connected || !connection?.authenticated || connection?.disconnecting;
     return html`
         ${view_mode === 'overlayed' ? html`<converse-minimized-chats></converse-minimized-chats>` : ''}
         ${repeat(chatboxes, m => m.get('jid'), m => {
@@ -14,7 +15,7 @@ export default () => {
                     ${view_mode === 'overlayed' ? html`<converse-controlbox-toggle class="${!m.get('closed') ? 'hidden' : ''}"></converse-controlbox-toggle>` : ''}
                     <converse-controlbox
                         id="controlbox"
-                        class="chatbox ${m.get('closed') ? 'hidden' : ''}"
+                        class="chatbox ${m.get('closed') ? 'hidden' : ''} ${logged_out ? 'logged-out': ''}"
                         style="${m.get('width') ? `width: ${m.get('width')}` : ''}"></converse-controlbox>
                 `;
             } else if (m.get('type') === CHATROOMS_TYPE) {
diff --git a/src/plugins/chatboxviews/view.js b/src/plugins/chatboxviews/view.js
index 051444400..7173943cc 100644
--- a/src/plugins/chatboxviews/view.js
+++ b/src/plugins/chatboxviews/view.js
@@ -16,6 +16,12 @@ class ConverseChats extends ElementView {
         this.listenTo(this.model, 'change:minimized', this.render);
         this.listenTo(this.model, 'destroy', this.render);
 
+        // Use listenTo instead of api.listen.to so that event handlers
+        // automatically get deregistered when the component is dismounted
+        this.listenTo(_converse, 'connected', this.render);
+        this.listenTo(_converse, 'reconnected', this.render);
+        this.listenTo(_converse, 'disconnected', this.render);
+
         const bg = document.getElementById('conversejs-bg');
         if (bg && !bg.innerHTML.trim()) {
             render(tpl_background_logo(), bg);
diff --git a/src/plugins/controlbox/view.js b/src/plugins/controlbox/view.js
index ce71173f5..fc970daed 100644
--- a/src/plugins/controlbox/view.js
+++ b/src/plugins/controlbox/view.js
@@ -58,13 +58,6 @@ class ControlBoxView extends ElementView {
         if (this.model.get('connected') && this.model.get('closed') === undefined) {
             this.model.set('closed', !api.settings.get('show_controlbox_by_default'));
         }
-
-        const connection = _converse?.connection;
-        if (!connection?.connected || !connection?.authenticated || connection?.disconnecting) {
-            this.classList.add('logged-out');
-        } else {
-            this.classList.remove('logged-out');
-        }
     }
 
     close (ev) {