diff --git a/conversejs/custom/plugins/tasks/index.js b/conversejs/custom/plugins/tasks/index.js
index 9f3602e0..8a99b3b8 100644
--- a/conversejs/custom/plugins/tasks/index.js
+++ b/conversejs/custom/plugins/tasks/index.js
@@ -2,6 +2,8 @@ import { _converse, converse } from '../../../src/headless/core.js'
 import { ChatRoomTaskLists } from './task-lists.js'
 import { ChatRoomTaskList } from './task-list.js'
 import { getHeadingButtons } from './utils.js'
+import './muc-task-lists-view.js' // FIXME: here or in another file?
+import './modals/muc-task-lists.js' // FIXME: here or in another file?
 
 converse.plugins.add('livechat-converse-tasks', {
   dependencies: ['converse-muc', 'converse-disco'], // TODO: add converse-pubsub
@@ -10,6 +12,7 @@ converse.plugins.add('livechat-converse-tasks', {
     _converse.ChatRoomTaskLists = ChatRoomTaskLists
     _converse.ChatRoomTaskList = ChatRoomTaskList
 
+    // adding the "Tasks" button in the MUC heading buttons:
     _converse.api.listen.on('getHeadingButtons', getHeadingButtons)
   }
 })
diff --git a/conversejs/custom/plugins/tasks/modals/muc-task-lists.js b/conversejs/custom/plugins/tasks/modals/muc-task-lists.js
new file mode 100644
index 00000000..b11d266e
--- /dev/null
+++ b/conversejs/custom/plugins/tasks/modals/muc-task-lists.js
@@ -0,0 +1,17 @@
+import BaseModal from '../../../../src/plugins/modal/modal.js'
+import { api } from '../../../../src/headless/core.js'
+import { html } from 'lit'
+import { __ } from 'i18n'
+
+export default class mucTaskListsModal extends BaseModal {
+  renderModal () {
+    const muc = this.model
+    return html`<livechat-converse-muc-task-lists jid="${muc.get('jid')}"></livechat-converse-muc-task-lists>`
+  }
+
+  getModalTitle () {
+    return __('Tasks')
+  }
+}
+
+api.elements.define('livechat-converse-muc-task-lists-modal', mucTaskListsModal)
diff --git a/conversejs/custom/plugins/tasks/muc-task-lists-view.js b/conversejs/custom/plugins/tasks/muc-task-lists-view.js
new file mode 100644
index 00000000..271d3ae5
--- /dev/null
+++ b/conversejs/custom/plugins/tasks/muc-task-lists-view.js
@@ -0,0 +1,20 @@
+import { CustomElement } from 'shared/components/element.js'
+import { _converse, api } from '@converse/headless/core'
+
+export default class MUCTaskListsView extends CustomElement {
+  static get properties () {
+    return {
+      jid: { type: String, attribute: true }
+    }
+  }
+
+  async initialize () {
+    this.model = _converse.chatboxes.get(this.getAttribute('jid'))
+  }
+
+  render () {
+    return ''
+  }
+}
+
+api.elements.define('livechat-converse-muc-task-lists', MUCTaskListsView)
diff --git a/conversejs/custom/plugins/tasks/utils.js b/conversejs/custom/plugins/tasks/utils.js
index cb4abe00..2ea7c465 100644
--- a/conversejs/custom/plugins/tasks/utils.js
+++ b/conversejs/custom/plugins/tasks/utils.js
@@ -1,4 +1,4 @@
-import { _converse } from '../../../src/headless/core.js'
+import { _converse, api } from '../../../src/headless/core.js'
 import { __ } from 'i18n'
 
 export function getHeadingButtons (view, buttons) {
@@ -20,8 +20,8 @@ export function getHeadingButtons (view, buttons) {
     handler: async (ev) => {
       ev.preventDefault()
       ev.stopPropagation()
-
-      // TODO.
+      // opening the muc task lists view:
+      api.modal.show('livechat-converse-muc-task-lists-modal', { model: muc })
     },
     a_class: '',
     icon_class: 'fa-list', // FIXME