diff --git a/src/headless/plugins/vcard/index.js b/src/headless/plugins/vcard/index.js
index 99316a1d1..d14f853d4 100644
--- a/src/headless/plugins/vcard/index.js
+++ b/src/headless/plugins/vcard/index.js
@@ -65,9 +65,6 @@ converse.plugins.add('converse-vcard', {
     },
 
     initialize () {
-        /* The initialize function gets called as soon as the plugin is
-         * loaded by converse.js's plugin machinery.
-         */
         api.promises.add('VCardsInitialized');
 
         _converse.VCard = VCard;
diff --git a/src/plugins/chatview/utils.js b/src/plugins/chatview/utils.js
index 5d35aa94c..0f9bd1b67 100644
--- a/src/plugins/chatview/utils.js
+++ b/src/plugins/chatview/utils.js
@@ -1,7 +1,6 @@
 import { __ } from 'i18n';
-import { _converse } from "@converse/headless/core";
+import { _converse, api } from "@converse/headless/core";
 import { html } from 'lit';
-import { api } from "@converse/headless/core";
 
 export function clearHistory (jid) {
     if (_converse.router.history.getFragment() === `converse/chat?jid=${jid}`) {
diff --git a/src/plugins/muc-views/heading.js b/src/plugins/muc-views/heading.js
index 5d4760c4e..5276a6d3c 100644
--- a/src/plugins/muc-views/heading.js
+++ b/src/plugins/muc-views/heading.js
@@ -1,55 +1,48 @@
-import { ElementView } from '@converse/skeletor/src/element.js';
 import MUCInviteModal from './modals/muc-invite.js';
 import NicknameModal from './modals/nickname.js';
 import RoomDetailsModal from './modals/muc-details.js';
-import debounce from 'lodash-es/debounce';
 import tpl_muc_head from './templates/muc-head.js';
+import { CustomElement } from 'shared/components/element.js';
 import { Model } from '@converse/skeletor/src/model.js';
 import { __ } from 'i18n';
-import { _converse, api, converse } from "@converse/headless/core";
+import { _converse, api, converse } from "@converse/headless/core.js";
 import { destroyMUC, showModeratorToolsModal } from './utils.js';
-import {
-    getHeadingDropdownItem,
-    getHeadingStandaloneButton,
-} from 'plugins/chatview/utils.js';
-import { render } from 'lit';
 
 import './styles/muc-head.scss';
 
 
-export default class MUCHeading extends ElementView {
+export default class MUCHeading extends CustomElement {
 
-    async connectedCallback () {
-        super.connectedCallback();
+    async initialize () {
         this.model = _converse.chatboxes.get(this.getAttribute('jid'));
-        this.debouncedRender = debounce(this.render, 100);
-        this.listenTo(this.model, 'change', this.debouncedRender);
+        this.listenTo(this.model, 'change', () => this.requestUpdate());
+        this.listenTo(this.model, 'vcard:add', () => this.requestUpdate());
+        this.listenTo(this.model, 'vcard:change', () => this.requestUpdate());
 
-        const user_settings = await _converse.api.user.settings.getModel();
-        this.listenTo(user_settings, 'change:mucs_with_hidden_subject', this.debouncedRender);
+        this.user_settings = await _converse.api.user.settings.getModel();
+        this.listenTo(this.user_settings, 'change:mucs_with_hidden_subject', () => this.requestUpdate());
 
         await this.model.initialized;
-        this.listenTo(this.model.features, 'change:open', this.debouncedRender);
+        this.listenTo(this.model.features, 'change:open', () => this.requestUpdate());
         this.model.occupants.forEach(o => this.onOccupantAdded(o));
         this.listenTo(this.model.occupants, 'add', this.onOccupantAdded);
         this.listenTo(this.model.occupants, 'change:affiliation', this.onOccupantAffiliationChanged);
-        this.render();
+        this.requestUpdate();
     }
 
-    async render () {
-        const tpl = await this.generateHeadingTemplate();
-        render(tpl, this);
+    render () {
+        return (this.model && this.user_settings) ? tpl_muc_head(this) : '';
     }
 
     onOccupantAdded (occupant) {
         if (occupant.get('jid') === _converse.bare_jid) {
-            this.debouncedRender();
+            this.requestUpdate();
         }
     }
 
     onOccupantAffiliationChanged (occupant) {
         if (occupant.get('jid') === _converse.bare_jid) {
-            this.debouncedRender();
+            this.requestUpdate();
         }
     }
 
@@ -188,28 +181,9 @@ export default class MUCHeading extends ElementView {
         if (chatview) {
             return _converse.api.hook('getHeadingButtons', chatview, buttons);
         } else {
-            return buttons; // Happens during tests
+            return Promise.resolve(buttons); // Happens during tests
         }
     }
-
-    /**
-     * Returns the groupchat heading TemplateResult to be rendered.
-     */
-    async generateHeadingTemplate () {
-        const subject_hidden = await this.model.isSubjectHidden();
-        const heading_btns = await this.getHeadingButtons(subject_hidden);
-        const standalone_btns = heading_btns.filter(b => b.standalone);
-        const dropdown_btns = heading_btns.filter(b => !b.standalone);
-        return tpl_muc_head(
-            Object.assign(this.model.toJSON(), {
-                _converse,
-                subject_hidden,
-                'dropdown_btns': dropdown_btns.map(b => getHeadingDropdownItem(b)),
-                'standalone_btns': standalone_btns.map(b => getHeadingStandaloneButton(b)),
-                'title': this.model.getDisplayName()
-            })
-        );
-    }
 }
 
 api.elements.define('converse-muc-heading', MUCHeading);
diff --git a/src/plugins/muc-views/templates/muc-head.js b/src/plugins/muc-views/templates/muc-head.js
index 5a6a40342..f0ac80b5e 100644
--- a/src/plugins/muc-views/templates/muc-head.js
+++ b/src/plugins/muc-views/templates/muc-head.js
@@ -1,28 +1,43 @@
 import 'shared/components/dropdown.js';
 import 'shared/components/rich-text.js';
 import { __ } from 'i18n';
-import { _converse, api } from "@converse/headless/core";
+import { _converse, api } from "@converse/headless/core.js";
+import { getHeadingDropdownItem, getHeadingStandaloneButton } from 'plugins/chatview/utils.js';
 import { html } from "lit";
 import { until } from 'lit/directives/until.js';
 
-const tpl_standalone_btns = (o) => o.standalone_btns.reverse().map(b => until(b, ''));
 
-export default (o) => {
+export default (el) => {
+    const o = el.model.toJSON();
+    const subject_hidden = el.user_settings?.get('mucs_with_hidden_subject', [])?.includes(el.model.get('jid'));
     const i18n_hide_topic = __('Hide the groupchat topic');
     const i18n_bookmarked = __('This groupchat is bookmarked');
     const subject = o.subject ? o.subject.text : '';
-    const show_subject = (subject && !o.subject_hidden);
+    const show_subject = (subject && !subject_hidden);
+    const muc_vcard = el.model.vcard?.get('image');
     return html`
         <div class="chatbox-title ${ show_subject ? '' :  "chatbox-title--no-desc"}">
+
+            ${  muc_vcard && muc_vcard !== _converse.DEFAULT_IMAGE ? html`
+                <converse-avatar class="avatar align-self-center"
+                    .data=${el.model.vcard?.attributes}
+                    nonce=${el.model.vcard?.get('vcard_updated')}
+                    height="40" width="40"></converse-avatar>` : ''
+            }
+
             <div class="chatbox-title--row">
                 ${ (!_converse.api.settings.get("singleton")) ?  html`<converse-controlbox-navback jid="${o.jid}"></converse-controlbox-navback>` : '' }
-                <div class="chatbox-title__text" title="${ (api.settings.get('locked_muc_domain') !== 'hidden') ? o.jid : '' }">${ o.title }
+                <div class="chatbox-title__text" title="${ (api.settings.get('locked_muc_domain') !== 'hidden') ? o.jid : '' }">${ el.model.getDisplayName() }
                     ${ (o.bookmarked) ? html`<i class="fa fa-bookmark chatbox-title__text--bookmarked" title="${i18n_bookmarked}"></i>` : '' }
                 </div>
             </div>
             <div class="chatbox-title__buttons row no-gutters">
-                ${ o.standalone_btns.length ? tpl_standalone_btns(o) : '' }
-                ${ o.dropdown_btns.length ? html`<converse-dropdown class="dropleft" color="var(--chatroom-head-color)" .items=${o.dropdown_btns}></converse-dropdown>` : '' }
+                ${ until(el.getHeadingButtons(subject_hidden).then((buttons) => {
+                    const dropdown_btns = buttons.filter(b => !b.standalone).map(b => getHeadingDropdownItem(b));
+                    return html`
+                        ${ buttons.filter(b => b.standalone).reverse().map(b => until(getHeadingStandaloneButton(b), '')) }
+                        ${ dropdown_btns.length ? html`<converse-dropdown class="dropleft" color="var(--chatroom-head-color)" .items=${dropdown_btns}></converse-dropdown>` : '' }`
+                }), '') }
             </div>
         </div>
         ${ show_subject ? html`<p class="chat-head__desc" title="${i18n_hide_topic}">