diff --git a/conversejs/custom/plugins/notes/components/muc-note-app-view.js b/conversejs/custom/plugins/notes/components/muc-note-app-view.js
index 6b7368f0..92ac6295 100644
--- a/conversejs/custom/plugins/notes/components/muc-note-app-view.js
+++ b/conversejs/custom/plugins/notes/components/muc-note-app-view.js
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { api } from '@converse/headless'
-import { MUCApp } from '../../../shared/components/muc-app.js'
+import { MUCApp } from '../../../shared/components/muc-app/index.js'
 import { tplMUCNoteApp } from '../templates/muc-note-app.js'
 
 /**
diff --git a/conversejs/custom/plugins/notes/templates/muc-note-app.js b/conversejs/custom/plugins/notes/templates/muc-note-app.js
index ad471ca9..24c8766d 100644
--- a/conversejs/custom/plugins/notes/templates/muc-note-app.js
+++ b/conversejs/custom/plugins/notes/templates/muc-note-app.js
@@ -3,6 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { converseLocalizedHelpUrl } from '../../../shared/lib/help'
+import { tplMUCApp } from '../../../shared/components/muc-app/templates/muc-app.js'
 import { html } from 'lit'
 import { __ } from 'i18n'
 
@@ -28,19 +29,11 @@ export function tplMUCNoteApp (el, mucModel) {
     page: 'documentation/user/streamers/notes'
   })
 
-  return html`
-    <div class="livechat-converse-muc-app-header">
-      <h5>${i18nNotes}</h5>
-      <a href="${helpUrl}" target="_blank"><converse-icon
-          class="fa fa-circle-question"
-          size="1em"
-          title="${i18nHelp}"
-      ></converse-icon></a>
-      <button class="livechat-converse-muc-app-close" @click=${el.toggleApp} title="${__('Close')}">
-          <converse-icon class="fa fa-times" size="1em"></converse-icon>
-      </button>
-    </div>
-    <div class="livechat-converse-muc-app-body">
-      <livechat-converse-muc-notes .model=${mucModel.notes}></livechat-converse-muc-notes>
-    </div>`
+  return tplMUCApp(
+    el,
+    i18nNotes,
+    helpUrl,
+    i18nHelp,
+    html`<livechat-converse-muc-notes .model=${mucModel.notes}></livechat-converse-muc-notes>`
+  )
 }
diff --git a/conversejs/custom/plugins/tasks/components/muc-task-app-view.js b/conversejs/custom/plugins/tasks/components/muc-task-app-view.js
index ebadd97b..c7ad938a 100644
--- a/conversejs/custom/plugins/tasks/components/muc-task-app-view.js
+++ b/conversejs/custom/plugins/tasks/components/muc-task-app-view.js
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { api } from '@converse/headless'
-import { MUCApp } from '../../../shared/components/muc-app.js'
+import { MUCApp } from '../../../shared/components/muc-app/index.js'
 import { tplMUCTaskApp } from '../templates/muc-task-app.js'
 
 /**
diff --git a/conversejs/custom/plugins/tasks/templates/muc-task-app.js b/conversejs/custom/plugins/tasks/templates/muc-task-app.js
index 33255a8d..aeaf68e9 100644
--- a/conversejs/custom/plugins/tasks/templates/muc-task-app.js
+++ b/conversejs/custom/plugins/tasks/templates/muc-task-app.js
@@ -3,6 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { converseLocalizedHelpUrl } from '../../../shared/lib/help'
+import { tplMUCApp } from '../../../shared/components/muc-app/templates/muc-app.js'
 import { html } from 'lit'
 import { __ } from 'i18n'
 
@@ -28,19 +29,11 @@ export function tplMUCTaskApp (el, mucModel) {
     page: 'documentation/user/streamers/tasks'
   })
 
-  return html`
-    <div class="livechat-converse-muc-app-header">
-      <h5>${i18nTasks}</h5>
-      <a href="${helpUrl}" target="_blank"><converse-icon
-          class="fa fa-circle-question"
-          size="1em"
-          title="${i18nHelp}"
-      ></converse-icon></a>
-      <button class="livechat-converse-muc-app-close" @click=${el.toggleApp} title="${__('Close')}">
-          <converse-icon class="fa fa-times" size="1em"></converse-icon>
-      </button>
-    </div>
-    <div class="livechat-converse-muc-app-body">
-      <livechat-converse-muc-task-lists .model=${mucModel.tasklists}></livechat-converse-muc-task-lists>
-    </div>`
+  return tplMUCApp(
+    el,
+    i18nTasks,
+    helpUrl,
+    i18nHelp,
+    html`<livechat-converse-muc-task-lists .model=${mucModel.tasklists}></livechat-converse-muc-task-lists>`
+  )
 }
diff --git a/conversejs/custom/shared/components/muc-app.js b/conversejs/custom/shared/components/muc-app/index.js
similarity index 100%
rename from conversejs/custom/shared/components/muc-app.js
rename to conversejs/custom/shared/components/muc-app/index.js
diff --git a/conversejs/custom/shared/components/styles/muc-app.scss b/conversejs/custom/shared/components/muc-app/styles/muc-app.scss
similarity index 100%
rename from conversejs/custom/shared/components/styles/muc-app.scss
rename to conversejs/custom/shared/components/muc-app/styles/muc-app.scss
diff --git a/conversejs/custom/shared/components/muc-app/templates/muc-app.js b/conversejs/custom/shared/components/muc-app/templates/muc-app.js
new file mode 100644
index 00000000..9db12559
--- /dev/null
+++ b/conversejs/custom/shared/components/muc-app/templates/muc-app.js
@@ -0,0 +1,24 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { html } from 'lit'
+import { __ } from 'i18n'
+
+export function tplMUCApp (el, i18nTitle, helpUrl, i18nHelp, content) {
+  return html`
+    <div class="livechat-converse-muc-app-header">
+      <h5>${i18nTitle}</h5>
+      <a href="${helpUrl}" target="_blank"><converse-icon
+          class="fa fa-circle-question"
+          size="1em"
+          title="${i18nHelp}"
+      ></converse-icon></a>
+      <button class="livechat-converse-muc-app-close" @click=${el.toggleApp} title="${__('Close')}">
+          <converse-icon class="fa fa-times" size="1em"></converse-icon>
+      </button>
+    </div>
+    <div class="livechat-converse-muc-app-body">
+      ${content}
+    </div>`
+}