diff --git a/document_page/static/src/js/document_page_kanban_controller.esm.js b/document_page/static/src/js/document_page_kanban_controller.esm.js
index 0b7884cb3a3..7ad18ada056 100644
--- a/document_page/static/src/js/document_page_kanban_controller.esm.js
+++ b/document_page/static/src/js/document_page_kanban_controller.esm.js
@@ -1,4 +1,3 @@
-/** @odoo-module **/
 import {KanbanController} from "@web/views/kanban/kanban_controller";
 
 export class DocumentPageKanbanController extends KanbanController {
@@ -6,6 +5,7 @@ export class DocumentPageKanbanController extends KanbanController {
      * @param {Object} record
      */
     async openRecord(record) {
+        // eslint-disable-next-line no-undef
         const element = document.querySelector(
             `.o_kanban_record[data-id="${record.id}"] .o_document_page_kanban_boxes a`
         );
diff --git a/document_page/static/src/js/document_page_kanban_view.esm.js b/document_page/static/src/js/document_page_kanban_view.esm.js
index 957bef03c7a..5c1452a1b71 100644
--- a/document_page/static/src/js/document_page_kanban_view.esm.js
+++ b/document_page/static/src/js/document_page_kanban_view.esm.js
@@ -1,4 +1,3 @@
-/** @odoo-module **/
 import {registry} from "@web/core/registry";
 import {kanbanView} from "@web/views/kanban/kanban_view";
 import {DocumentPageKanbanController} from "./document_page_kanban_controller.esm";
diff --git a/document_page/views/document_page_category.xml b/document_page/views/document_page_category.xml
index 3bbac5c093a..1efef1299ac 100644
--- a/document_page/views/document_page_category.xml
+++ b/document_page/views/document_page_category.xml
@@ -77,7 +77,7 @@
         <field
             name="context"
         >{'default_type': 'content', 'search_default_no_parent_id':1, }</field>
-        <field name="view_mode">kanban,tree,form</field>
+        <field name="view_mode">kanban,list,form</field>
         <field name="search_view_id" ref="view_browse_top_document_filter" />
     </record>
     <record id="action_browse_all_content" model="ir.actions.act_window">
@@ -87,14 +87,18 @@
         <field
             name="context"
         >{'default_type': 'content', 'search_default_parent_id': [active_id] }</field>
-        <field name="view_mode">kanban,tree,form</field>
+        <field name="view_mode">kanban,list,form</field>
         <field name="search_view_id" ref="view_wiki_filter" />
     </record>
     <record id="view_browse_content_kanban" model="ir.ui.view">
         <field name="name">document.page.browse.kanban</field>
         <field name="model">document.page</field>
         <field name="arch" type="xml">
-            <kanban js_class="document_page_kanban_view">
+            <kanban
+                js_class="document_page_kanban_view"
+                highlight_color="color"
+                openRecord="openRecord"
+            >
                 <field name="id" />
                 <field name="name" />
                 <field name="display_name" />
@@ -106,97 +110,71 @@
                 <field name="type" />
                 <field name="color" />
                 <templates>
-                    <t t-name="kanban-box">
-                        <div
-                            t-att-class="'oe_kanban_global_area'  + ' oe_kanban_color_'+ (kanban_getcolor(record.color.raw_value)) + ' oe_kanban_global_click' "
-                        >
-                            <div class="o_kanban_image">
-                                <div class="o_kanban_image_wrapper">
-                                    <t t-if="record.type.raw_value == 'category'">
-                                        <img
-                                            class="o_kanban_image"
-                                            t-if="record.image.raw_value"
-                                            t-att-src="kanban_image('document.page', 'image', record.id.raw_value)"
-                                            t-att-alt="record.display_name"
-                                        />
-                                        <span
-                                            style="font-size: 64px; color: lightslategray"
-                                        >
-                                            <i
-                                                t-if="!record.image.raw_value"
-                                                class="o_kanban_image fa fa-folder-open"
-                                            />
-                                        </span>
-                                    </t>
-                                    <t t-if="record.type.raw_value == 'content'">
-                                        <span style="font-size: 64px; color: lightgray">
-                                            <i class="o_kanban_image fa fa-file" />
-                                        </span>
-                                    </t>
-                                </div>
-                            </div>
-                            <div class="o_kanban_details">
-                                <div class="o_kanban_details_wrapper">
-                                    <div class="o_kanban_record_top">
-                                        <div
-                                            class="o_kanban_record_title o_text_overflow"
-                                        >
-                                            <strong>
-                                                <field name="name" />
-                                            </strong>
-                                            <br />
-                                            <small t-if="record.parent_id.raw_value">
-                                                <img
-                                                    t-att-src="kanban_image('document.page', 'image', record.parent_id.raw_value)"
-                                                    t-att-alt="record.parent_id.display_name"
-                                                    style="margin-right:5px; width:24px; height:24px;"
-                                                />
-                                                <field name="parent_id" />
-                                            </small>
-                                        </div>
-                                    </div>
+                    <t t-name="card" class="flex-row">
+                        <aside style="margin-right: 8px;">
+                            <t
+                                t-if="record.type.raw_value === 'category' || record.type.raw_value === 'content'"
+                            >
+                                <field
+                                    name="image"
+                                    widget="image"
+                                    t-att-alt="record.display_name.raw_value"
+                                    t-if="record.image.raw_value"
+                                />
+                                <i
+                                    t-if="!record.image.raw_value"
+                                    t-attf-class="o_field_image fa #{record.type.raw_value === 'category' ? 'fa-folder-open' : 'fa-file'}"
+                                    t-attf-style="font-size: 64px; color: #{record.type.raw_value === 'category' ? 'lightslategray' : 'lightgray'};"
+                                />
+                            </t>
+                        </aside>
+                        <main>
+                            <div>
+                                <field name="name" class="fw-bolder" />
+                                <small
+                                    t-if="record.parent_id.raw_value"
+                                    class="d-flex align-items-center"
+                                >
+                                    <field
+                                        name="parent_id"
+                                        widget="image"
+                                        options="{'preview_image': 'image'}"
+                                        t-att-alt="record.parent_id.display_name"
+                                        style="margin-right:5px; width:24px; height:24px;"
+                                    />
 
-                                    <div class="o_kanban_record_body">
-                                        <div class="o_kanban_tags_section">
-                                        </div>
-                                    </div>
-                                    <div
-                                        class="o_kanban_record_bottom"
-                                        t-if="record.type.raw_value == 'content'"
-                                    >
-                                        <div class="oe_kanban_bottom_left">
-                                            <field name="write_date" widget="date" />
-                                        </div>
-                                        <div class="oe_kanban_bottom_right">
-                                            <img
-                                                t-att-src="kanban_image('res.users', 'image_small', record.content_uid.raw_value)"
-                                                t-att-title="record.content_uid.value"
-                                                t-att-alt="record.content_uid.value"
-                                                width="24"
-                                                height="24"
-                                                class="oe_kanban_avatar"
-                                            />
-                                        </div>
-                                    </div>
-                                </div>
+                                    <field name="parent_id" />
+                                </small>
                             </div>
-
                             <div
-                                t-if="record.type.raw_value == 'category'"
-                                class="o_document_page_kanban_boxes"
+                                class="d-flex justify-content-between align-items-center"
+                                t-if="record.type.raw_value == 'content'"
                             >
-                                <a
-                                    class="o_document_page_kanban_box"
-                                    name="%(action_browse_all_content)d"
-                                    type="action"
-                                >
-                                </a>
+                                <field name="write_date" widget="date" />
+                                <field
+                                    name="content_uid"
+                                    widget="image"
+                                    options="{'preview_image': 'image_small'}"
+                                    t-att-alt="record.content_uid.value"
+                                    style="margin-right:5px; width:24px; height:24px;"
+                                />
                             </div>
+                        </main>
+
+                        <div
+                            t-if="record.type.raw_value == 'category'"
+                            class="o_document_page_kanban_boxes"
+                        >
+                            <a
+                                class="o_document_page_kanban_box"
+                                name="%(action_browse_all_content)d"
+                                type="action"
+                            />
                         </div>
                     </t>
 
-                    <t t-name="kanban-menu">
-                        <ul class="oe_kanban_colorpicker" data-field="color" />
+                    <t t-name="menu">
+                        <field name="color" widget="kanban_color_picker" />
                     </t>
                 </templates>
             </kanban>
@@ -287,5 +265,4 @@
         action="action_browse_top_content"
         sequence="5"
     />
-
 </odoo>