diff --git a/src/plugins/sib-emoji-picker.js b/src/plugins/sib-emoji-picker.js
new file mode 100644
index 0000000000000000000000000000000000000000..60993685536b18d81fbe0c4a7360819d8e9f29a2
--- /dev/null
+++ b/src/plugins/sib-emoji-picker.js
@@ -0,0 +1,71 @@
+import 'https://cdn.skypack.dev/emoji-picker-element';
+
+/**
+ * Custom emoji picker.
+ * Replaces the default drawer with a custom component.
+ */
+converse.plugins.add('sib-emoji-picker', {
+  dependencies: [
+    'converse-emoji',
+  ],
+  initialize() {
+    const { html } = converse.env;
+    const _converse = this._converse;
+    const { api, __ } = _converse;
+
+    /**
+     * Force rendering of the emoji picker inside the dropdown.
+     * Note: Without this mixin, the IndexedDB can't be loaded for some reason.
+     */
+    const EmojiDropdownMixin = {
+      render() {
+        return html`
+          <div class='dropup'>
+            <button class='toggle-emojis'
+                    title='${__('Insert emojis')}'
+                    data-toggle='dropdown'
+                    aria-haspopup='true'
+                    aria-expanded='false'>
+              <converse-icon
+                class='fa fa-smile '
+                path-prefix='${api.settings.get('assets_path')}'
+                size='1em'></converse-icon>
+            </button>
+            <div class='dropdown-menu'>
+              <converse-emoji-picker
+                .chatview='${this.chatview}'
+                .model='${this.model}'
+              ></converse-emoji-picker>
+            </div>
+          </div>`;
+      },
+    };
+
+    // Apply mixin
+    const EmojiDropdown = api.elements.registry['converse-emoji-dropdown'];
+    Object.assign(EmojiDropdown.prototype, EmojiDropdownMixin);
+
+    /**
+     * Update the emoji picker rendered content.
+     * with the new element.
+     */
+    const EmojiPickerMixin = {
+      firstUpdated() {
+      },
+      registerEvents() {
+      },
+      render() {
+        return html`
+          <emoji-picker
+            .chatview='${this.chatview}'
+            .model='${this.model}'
+            @emoji-click='${ev => this.insertIntoTextArea(ev.detail.emoji.unicode)}'
+          ></emoji-picker>`;
+      },
+    };
+
+    // Apply mixin
+    const EmojiPicker = api.elements.registry['converse-emoji-picker'];
+    Object.assign(EmojiPicker.prototype, EmojiPickerMixin);
+  },
+});
diff --git a/src/solid-xmpp-chat.js b/src/solid-xmpp-chat.js
index 8887e7ab131e173794aba07d10221da35c634299..1827efe93ef451765d512d10ffc02ae29a47a887 100644
--- a/src/solid-xmpp-chat.js
+++ b/src/solid-xmpp-chat.js
@@ -2,13 +2,14 @@ import { Sib, store, StoreMixin } from 'https://cdn.skypack.dev/@startinblox/cor
 import { Deferred } from './utils.js';
 import ComponentPath from './path.js';
 
-import './conversejs/converse.min.js';
+import './conversejs/converse.js';
 import './conversejs/emojis.js';
 
 import './plugins/converse-rai.js';
 import './plugins/sib-chat-navigation.js';
 import './plugins/sib-custom-hats.js';
 import './plugins/sib-disconnected.js';
+import './plugins/sib-emoji-picker.js';
 import './plugins/sib-history-improved.js';
 import './plugins/sib-mention-mobile.js';
 import './plugins/sib-remove-notifications.js';
@@ -227,6 +228,7 @@ export const SolidXMPPChat = {
           'sib-connected',
           'sib-custom-hats',
           'sib-disconnected',
+          'sib-emoji-picker',
           'sib-history-improved',
           'sib-mention-mobile',
           'sib-remove-notifications',