diff --git a/addons/knowledge/static/src/js/knowledge_renderers.js b/addons/knowledge/static/src/js/knowledge_renderers.js
index ea7d987ca38..3c55806ff84 100644
--- a/addons/knowledge/static/src/js/knowledge_renderers.js
+++ b/addons/knowledge/static/src/js/knowledge_renderers.js
@@ -6,11 +6,16 @@ import FormRenderer from 'web.FormRenderer';
 import KnowledgeTreePanelMixin from '@knowledge/js/tools/tree_panel_mixin';
 import { qweb as QWeb } from 'web.core';
 
+import { ChatterContainer } from '@mail/components/chatter_container/chatter_container';
+import { ComponentWrapper } from 'web.OwlCompatibility';
+
+class ChatterContainerWrapperComponent extends ComponentWrapper {}
 
 const KnowledgeArticleFormRenderer = FormRenderer.extend(KnowledgeTreePanelMixin, {
     className: 'o_knowledge_form_view',
     events: _.extend({}, FormRenderer.prototype.events, {
-        'click .btn-chatter': '_onBtnChatterClick',
+        'click .btn-chatter.active': '_onCloseChatter',
+        'click .btn-chatter:not(.active)': '_onOpenChatter',
         'click .btn-create': '_onBtnCreateClick',
         'click .btn-duplicate': '_onBtnDuplicateClick',
         'click .btn-move': '_onBtnMoveClick',
@@ -28,6 +33,30 @@ const KnowledgeArticleFormRenderer = FormRenderer.extend(KnowledgeTreePanelMixin
     init: function (parent, state, params) {
         this._super(...arguments);
         this.breadcrumbs = params.breadcrumbs;
+        /**
+         * Manually set values for the chatter props as it is custom handled
+         * and not loaded with the view (oe_chatter is not used in Knowledge,
+         * the chatter is only rendered when the user clicks on the button).
+         */
+        this.chatterFields = {
+            // `knowledge.article` has `mail.activity.mixin`
+            hasActivities: true,
+            hasFollowers: true,
+            hasMessageIds: true,
+        };
+    },
+    /**
+     * @private
+     */
+    _closeChatter: function () {
+        const chatter = this.el.querySelector('.o_knowledge_chatter_container');
+        while (chatter.firstChild) {
+            chatter.removeChild(chatter.firstChild);
+        }
+        if (this._chatterContainerComponent) {
+            this._chatterContainerComponent.destroy();
+            this._chatterContainerComponent = undefined;
+        }
     },
     /**
      * @param {Event} event
@@ -93,6 +122,17 @@ const KnowledgeArticleFormRenderer = FormRenderer.extend(KnowledgeTreePanelMixin
             category: $section.data('section')
         });
     },
+    /**
+     * Update the btn-chatter appearance and hide the chatter section in the
+     * view. Closes the chatter.
+     *
+     * @private
+     */
+    _onCloseChatter: function () {
+        this.el.querySelector('.o_knowledge_chatter').classList.add('d-none');
+        this.el.querySelector('.btn-chatter').classList.remove('active');
+        this._closeChatter();
+    },
     /**
      * Opens the selected record.
      * @param {Event} event
@@ -107,6 +147,21 @@ const KnowledgeArticleFormRenderer = FormRenderer.extend(KnowledgeTreePanelMixin
             }
         });
     },
+    /**
+     * Update tbe btn-chatter appearance and show the chatter section in the
+     * view. Open the chatter.
+     *
+     * @private
+     * @param {OdooEvent} ev
+     */
+    _onOpenChatter: async function (ev) {
+        ev.stopPropagation();
+        if (this.state.res_id) {
+            this.el.querySelector('.o_knowledge_chatter').classList.remove('d-none');
+            this.el.querySelector('.btn-chatter').classList.add('active');
+            await this._renderChatter();
+        }
+    },
     /**
      * By default, Bootstrap closes automatically the dropdown menu when the user
      * clicks inside it. To avoid that behavior, we will add a new event listener
@@ -132,6 +187,27 @@ const KnowledgeArticleFormRenderer = FormRenderer.extend(KnowledgeTreePanelMixin
         });
         this.$('.breadcrumb').prepend(items);
     },
+    /**
+     * Render and mount the chatter of the current record.
+     *
+     * @private
+     * @returns {Promise}
+     */
+    _renderChatter: async function () {
+        if (!this.state.res_id) {
+            return;
+        }
+        this._closeChatter();
+        const props = this._makeChatterContainerProps();
+        this._chatterContainerComponent = new ChatterContainerWrapperComponent(
+            this,
+            ChatterContainer,
+            props
+        );
+        const target = this.el.querySelector('.o_knowledge_chatter_container');
+        await this._chatterContainerComponent.mount(target);
+    },
+
     /**
      * Attaches an emoji picker widget to every emoji dropdown of the container.
      * Note: The widget will be attached to the view when the user clicks on
diff --git a/addons/knowledge/static/src/scss/knowledge_views.scss b/addons/knowledge/static/src/scss/knowledge_views.scss
index f22883ad6cd..d8967a21bd2 100644
--- a/addons/knowledge/static/src/scss/knowledge_views.scss
+++ b/addons/knowledge/static/src/scss/knowledge_views.scss
@@ -129,14 +129,6 @@
         li.nav-item {
             display: none;
         }
-        .o_FormRenderer_chatterContainer {
-            max-width: unset;
-            &.o-aside {
-                width: auto;
-                padding: 1rem;
-                border: none;
-            }
-        }
     }
 
     .dropdown-menu.o_article_emoji_dropdown_panel {
diff --git a/addons/knowledge/views/knowledge_article_views.xml b/addons/knowledge/views/knowledge_article_views.xml
index 8b9d2d5aaee..4fdec0ea544 100644
--- a/addons/knowledge/views/knowledge_article_views.xml
+++ b/addons/knowledge/views/knowledge_article_views.xml
@@ -79,7 +79,8 @@
                                                attrs="{'invisible': [('id', '=', False)]}">
                                                 <i class="fa fa-share-alt"/> Share
                                             </a>
-                                            <a type="button" role="button" class="btn btn-secondary btn-chatter mr-1" data-hotkey="d">
+                                            <a type="button" role="button" class="btn btn-secondary btn-chatter mr-1" data-hotkey="d"
+                                                attrs="{'invisible': [('id', '=', False)]}">
                                                 <i class="rounded-circle text-center fa fa-comments" title="Open chatter"/>
                                             </a>
                                             <div class="o_knowledge_share_panel dropdown-menu" role="menu">
@@ -203,13 +204,7 @@
                                         </div>
                                         <!-- Chatter -->
                                         <div class="o_knowledge_chatter col-12 col-lg-4 position-relative d-none d-print-none p-0">
-                                            <div class="o_scroll_view_lg">
-                                                <div class="oe_chatter">
-                                                    <field name="message_follower_ids" groups="base.group_user"/>
-                                                    <field name="activity_ids"/>
-                                                    <field name="message_ids"/>
-                                                </div>
-                                            </div>
+                                            <div class="o_scroll_view_lg o_knowledge_chatter_container"/>
                                         </div>
                                     </div>
                                 </div>