diff --git a/dms/__manifest__.py b/dms/__manifest__.py
index 777785397..43ccdf4dc 100644
--- a/dms/__manifest__.py
+++ b/dms/__manifest__.py
@@ -56,6 +56,8 @@
             "dms/static/src/js/components/preview/*.xml",
             "dms/static/src/js/views/*.xml",
             # SCSS
+            "dms/static/src/scss/dms_ext_palette.scss",
+            "dms/static/src/scss/file_kanban.scss",
             "dms/static/src/scss/file_preview_pane.scss",
         ],
         "web.assets_frontend": [
diff --git a/dms/static/src/js/views/file_kanban_controller.esm.js b/dms/static/src/js/views/file_kanban_controller.esm.js
deleted file mode 100644
index ae3d05ee2..000000000
--- a/dms/static/src/js/views/file_kanban_controller.esm.js
+++ /dev/null
@@ -1,12 +0,0 @@
-// /** ********************************************************************************
-//     Copyright 2020 Creu Blanca
-//     Copyright 2017-2019 MuK IT GmbH
-//     License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl).
-//  **********************************************************************************/
-
-import {KanbanController} from "@web/views/kanban/kanban_controller";
-export class FileKanbanController extends KanbanController {
-    setup() {
-        super.setup();
-    }
-}
diff --git a/dms/static/src/js/views/file_kanban_controller.xml b/dms/static/src/js/views/file_kanban_controller.xml
deleted file mode 100644
index da14578ff..000000000
--- a/dms/static/src/js/views/file_kanban_controller.xml
+++ /dev/null
@@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" ?>
-<templates>
-    <t
-        t-name="dms.FileKanbanView.Buttons"
-        t-inherit="web.KanbanView.Buttons"
-        t-inherit-mode="primary"
-    >
-        <div role="toolbar" position="inside">
-            <input
-                type="file"
-                multiple="true"
-                t-ref="uploadFileInput"
-                class="o_input_file o_hidden"
-                t-on-change.stop="onFileInputChange"
-            />
-            <button
-                type="button"
-                t-attf-class="btn btn-primary o_file_kanban_upload"
-                t-on-click.stop.prevent="() => this.uploadFileInputRef.el.click()"
-            >
-                Upload
-            </button>
-        </div>
-    </t>
-</templates>
diff --git a/dms/static/src/js/views/file_kanban_name_widget.esm.js b/dms/static/src/js/views/file_kanban_name_widget.esm.js
new file mode 100644
index 000000000..555626ec7
--- /dev/null
+++ b/dms/static/src/js/views/file_kanban_name_widget.esm.js
@@ -0,0 +1,100 @@
+// /** ********************************************************************************
+//     Copyright 2026 ledoent — Don Kendall
+//     License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl).
+//
+//     Inline quick-rename for DMS file kanban cards (F3). Double-click the
+//     name → editable input → Enter commits, Esc cancels, blur commits-or-
+//     cancels based on whether the draft changed. macOS Finder / GNOME Files
+//     convention.
+//
+//     Implemented as a *view widget* rather than inline kanban-arch markup:
+//     Odoo 19 forbids every owl event/ref directive (t-on-*, t-ref) inside an
+//     ir.ui.view arch because the arch is DB-editable. Widget templates are
+//     static assets, so the event wiring is allowed here.
+//  **********************************************************************************/
+import {registry} from "@web/core/registry";
+import {standardWidgetProps} from "@web/views/widgets/standard_widget_props";
+import {useService} from "@web/core/utils/hooks";
+import {Component, useEffect, useRef, useState} from "@odoo/owl";
+
+export class DmsFileNameWidget extends Component {
+    static template = "dms.FileNameWidget";
+    static props = {...standardWidgetProps};
+
+    setup() {
+        this.renameState = useState({active: false});
+        this.input = useRef("input");
+        this.notification = useService("notification");
+        // Focus + select the input the moment it mounts so the user types
+        // over the existing name immediately.
+        useEffect(
+            (el) => {
+                if (el) {
+                    el.focus();
+                    el.select?.();
+                }
+            },
+            () => [this.input.el]
+        );
+    }
+
+    get name() {
+        return this.props.record.data.name || "";
+    }
+
+    startRename(ev) {
+        // Swallow the dblclick so it doesn't bubble to the card's global
+        // click handler (which would open the side-pane preview on top).
+        ev?.stopPropagation?.();
+        ev?.preventDefault?.();
+        this.renameState.active = true;
+    }
+
+    cancelRename() {
+        this.renameState.active = false;
+    }
+
+    async commitRename() {
+        const next = (this.input.el?.value ?? "").trim();
+        const current = this.name;
+        if (!next || next === current) {
+            this.cancelRename();
+            return;
+        }
+        try {
+            await this.props.record.update({name: next});
+            await this.props.record.save({noReload: true, savePoint: false});
+            // The preview pane reads via its own ORM call keyed on recordId;
+            // a rename leaves recordId unchanged, so nudge it to re-fetch if
+            // this record is the one on screen.
+            this.env.dmsKanbanPreview?.notifyChanged?.(this.props.record.resId);
+        } catch (e) {
+            this.notification.add(e.message || "Rename failed", {type: "danger"});
+        }
+        this.cancelRename();
+    }
+
+    onKeydown(ev) {
+        if (ev.key === "Enter") {
+            ev.preventDefault();
+            this.commitRename();
+        } else if (ev.key === "Escape") {
+            ev.preventDefault();
+            this.cancelRename();
+        }
+        // Don't let the renderer-level Escape (which closes the preview pane)
+        // also fire from inside the rename input.
+        ev.stopPropagation();
+    }
+
+    stopEvent(ev) {
+        ev.stopPropagation();
+    }
+}
+
+export const dmsFileNameWidget = {
+    component: DmsFileNameWidget,
+    extractProps: () => ({}),
+};
+
+registry.category("view_widgets").add("dms_file_name", dmsFileNameWidget);
diff --git a/dms/static/src/js/views/file_kanban_name_widget.xml b/dms/static/src/js/views/file_kanban_name_widget.xml
new file mode 100644
index 000000000..73e3cf8af
--- /dev/null
+++ b/dms/static/src/js/views/file_kanban_name_widget.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="dms.FileNameWidget">
+        <t t-if="renameState.active">
+            <input
+                type="text"
+                class="o_kanban_dms_card__name o_kanban_dms_card__name_input form-control form-control-sm"
+                t-ref="input"
+                t-att-value="name"
+                t-on-keydown="this.onKeydown"
+                t-on-blur="() => this.commitRename()"
+                t-on-click.stop="this.stopEvent"
+                t-on-dblclick.stop="this.stopEvent"
+            />
+        </t>
+        <t t-else="">
+            <div
+                class="o_kanban_dms_card__name fw-bold text-truncate"
+                t-att-title="name"
+                t-out="name"
+                t-on-dblclick="this.startRename"
+            />
+        </t>
+    </t>
+</templates>
diff --git a/dms/static/src/js/views/file_kanban_record.esm.js b/dms/static/src/js/views/file_kanban_record.esm.js
index 002ec429e..63280880b 100644
--- a/dms/static/src/js/views/file_kanban_record.esm.js
+++ b/dms/static/src/js/views/file_kanban_record.esm.js
@@ -1,57 +1,46 @@
 // /** ********************************************************************************
 //     Copyright 2024 Subteno - Timothée Vannier (https://www.subteno.com).
+//     Copyright 2026 ledoent — Don Kendall
 //     License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl).
 //  **********************************************************************************/
 import {KanbanRecord} from "@web/views/kanban/kanban_record";
-import {useFileViewer} from "@web/core/file_viewer/file_viewer_hook";
-import {useService} from "@web/core/utils/hooks";
-
-const videoReadableTypes = ["x-matroska", "mp4", "webm"];
-const audioReadableTypes = ["mp3", "ogg", "wav", "aac", "mpa", "flac", "m4a"];
 
 export class FileKanbanRecord extends KanbanRecord {
-    setup() {
-        super.setup();
-        this.store = useService("mail.store");
-        this.fileViewer = useFileViewer();
-    }
-
-    isVideo(mimetype) {
-        return videoReadableTypes.includes(mimetype);
-    }
-
-    isAudio(mimetype) {
-        return audioReadableTypes.includes(mimetype);
-    }
-
     /**
      * @override
      *
-     * Override to open the preview upon clicking the image, if compatible.
+     * Every kanban click — including the file icon — routes through the
+     * renderer's side-pane preview state. Previously the icon had its own
+     * branch that opened Odoo's built-in modal `fileViewer`; that detour
+     * was inconsistent with the rest of the card (which already selected
+     * for the side-pane) and meant the registered handler chain in
+     * `dms.preview_handlers` never saw the click.
+     *
+     * Inline rename (double-click the name) is owned by the dms_file_name
+     * view widget; it stops propagation on its own clicks so they never
+     * reach this handler.
      */
-    onGlobalClick(ev) {
-        const self = this;
-
-        if (ev.target.closest(".o_kanban_dms_file_preview")) {
-            const file_type = self.props.record.data.name.split(".")[1];
-            let mimetype = "";
-
-            if (self.isVideo(file_type)) {
-                mimetype = `video/${file_type}`;
-            } else if (self.isAudio(file_type)) {
-                mimetype = "audio/mpeg";
-            } else {
-                mimetype = self.props.record.data.mimetype;
-            }
+    /**
+     * @override
+     * Mark the card active while it's the one shown in the side-pane
+     * preview, mirroring the list view's selected-row accent. Reads the
+     * reactive selectedId during render so the class updates when the
+     * selection moves to another card.
+     */
+    getRecordClasses() {
+        let classes = super.getRecordClasses();
+        const selectedId = this.env.dmsKanbanPreview?.selectedId?.();
+        if (selectedId && selectedId === this.props.record.resId) {
+            classes += " o_dms_preview_selected_card";
+        }
+        return classes;
+    }
 
-            const attachment = this.store["ir.attachment"].insert({
-                id: self.props.record.data.id,
-                filename: self.props.record.data.name,
-                name: self.props.record.data.name,
-                mimetype: mimetype,
-                model_name: self.props.record.resModel,
-            });
-            this.fileViewer.open(attachment);
+    onGlobalClick(ev) {
+        if (this.env.dmsKanbanPreview && this.props.record.resId) {
+            this.env.dmsKanbanPreview.select(this.props.record.resId);
+            ev.preventDefault?.();
+            ev.stopPropagation?.();
             return;
         }
         return super.onGlobalClick(ev);
diff --git a/dms/static/src/js/views/file_kanban_renderer.esm.js b/dms/static/src/js/views/file_kanban_renderer.esm.js
index 157f74fe3..3c6798b80 100644
--- a/dms/static/src/js/views/file_kanban_renderer.esm.js
+++ b/dms/static/src/js/views/file_kanban_renderer.esm.js
@@ -1,17 +1,86 @@
 // /** ********************************************************************************
 //     Copyright 2020 Creu Blanca
+//     Copyright 2026 ledoent — Don Kendall
 //     License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl).
 //  **********************************************************************************/
+import {useExternalListener, useSubEnv} from "@odoo/owl";
 import {FileKanbanRecord} from "./file_kanban_record.esm";
+import {FilePreviewPane} from "../components/preview/file_preview_pane.esm";
 import {KanbanRenderer} from "@web/views/kanban/kanban_renderer";
+import {useDmsPreviewState, useStoredState} from "../utils/use_stored_state.esm";
+
+// Density tiers: "comfortable" (default), "compact", "list".
+export const DMS_KANBAN_DEFAULT_DENSITY = "comfortable";
+const DMS_KANBAN_DENSITY_KEY = "dms_kanban_density";
+const DMS_KANBAN_PREVIEW_KEY = "dms_kanban_preview_pane";
+const DMS_KANBAN_DENSITY_OPTIONS = [
+    {value: "comfortable", label: "Comfortable", icon: "fa-th-large"},
+    {value: "compact", label: "Compact", icon: "fa-th"},
+    {value: "list", label: "List", icon: "fa-bars"},
+];
+const DMS_DENSITY_VALUES = new Set(DMS_KANBAN_DENSITY_OPTIONS.map((o) => o.value));
 
 export class FileKanbanRenderer extends KanbanRenderer {
+    static template = "dms.KanbanRenderer";
+    static components = {
+        ...KanbanRenderer.components,
+        KanbanRecord: FileKanbanRecord,
+        FilePreviewPane,
+    };
+
     setup() {
         super.setup();
+        // Density: persisted string with tampered-value defence.
+        this._density = useStoredState(
+            DMS_KANBAN_DENSITY_KEY,
+            DMS_KANBAN_DEFAULT_DENSITY,
+            {
+                deserializer: (v) =>
+                    DMS_DENSITY_VALUES.has(v) ? v : DMS_KANBAN_DEFAULT_DENSITY,
+            }
+        );
+        // Side-pane: shared with the list renderer via useDmsPreviewState.
+        this.previewState = useDmsPreviewState(DMS_KANBAN_PREVIEW_KEY);
+        // Expose select callback to descendant FileKanbanRecord instances via
+        // env so card clicks route into the renderer's preview state without
+        // the records needing a direct reference up the tree.
+        useSubEnv({
+            dmsKanbanPreview: {
+                select: (resId) => this.previewState.select(resId),
+                isOpen: () => this.previewState.open,
+                // The currently-previewed record id (reactive read) so a card
+                // can mark itself active — mirrors the list's selected-row rail.
+                selectedId: () =>
+                    this.previewState.open ? this.previewState.recordId : null,
+                // A card renamed its record in place — re-fetch the pane if
+                // that record is the one being previewed.
+                notifyChanged: (resId) => this.previewState.notifyChanged(resId),
+            },
+        });
+        useExternalListener(window, "keydown", (ev) => {
+            if (ev.key === "Escape" && this.previewState.open) {
+                this.closePreview();
+            }
+        });
+    }
+
+    get density() {
+        return this._density.value;
+    }
+
+    get densityOptions() {
+        return DMS_KANBAN_DENSITY_OPTIONS;
     }
-}
 
-FileKanbanRenderer.components = {
-    ...KanbanRenderer.components,
-    KanbanRecord: FileKanbanRecord,
-};
+    setDensity(value) {
+        this._density.value = value;
+    }
+
+    togglePreview() {
+        this.previewState.toggle();
+    }
+
+    closePreview() {
+        this.previewState.close();
+    }
+}
diff --git a/dms/static/src/js/views/file_kanban_renderer.xml b/dms/static/src/js/views/file_kanban_renderer.xml
index 8ba228c1f..6268081fc 100644
--- a/dms/static/src/js/views/file_kanban_renderer.xml
+++ b/dms/static/src/js/views/file_kanban_renderer.xml
@@ -1,19 +1,94 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <!--
     Copyright 2024 Subteno - Timothée Vannier (https://www.subteno.com).
+    Copyright 2026 ledoent — Don Kendall
     License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl).
 -->
 <templates xml:space="preserve">
     <t
-        t-name="dms.KanbanRenderer"
+        t-name="dms.KanbanRendererBase"
         t-inherit="web.KanbanRenderer"
         t-inherit-mode="primary"
     >
         <xpath expr="//div[hasclass('o_kanban_renderer')]" position="before">
-            <div t-if="dragState.showDragZone" class="o_dropzone">
-                <i class="fa fa-cloud-upload fa-10x" />
+            <div t-if="dragState.showDragZone" class="o_dropzone o_dms_dropzone">
+                <div class="o_dms_dropzone__icon">
+                    <i class="fa fa-cloud-upload" />
+                </div>
+                <div class="o_dms_dropzone__title">Drop files to upload</div>
+                <div class="o_dms_dropzone__hint">
+                    Release to add to the current directory
+                </div>
             </div>
         </xpath>
+        <xpath expr="//div[hasclass('o_kanban_renderer')]" position="attributes">
+            <attribute name="t-att-data-density">density</attribute>
+        </xpath>
+    </t>
+
+    <t t-name="dms.KanbanRenderer">
+        <div
+            class="o_dms_kanban_split"
+            t-att-data-preview-open="previewState.open ? 'true' : 'false'"
+        >
+            <div class="o_dms_kanban_split__main">
+                <div
+                    class="o_dms_view_toolbar"
+                    role="toolbar"
+                    aria-label="View options"
+                >
+                    <div
+                        class="o_kanban_dms_density_toggle btn-group btn-group-sm"
+                        role="group"
+                        aria-label="Card density"
+                    >
+                        <button
+                            type="button"
+                            t-foreach="densityOptions"
+                            t-as="opt"
+                            t-key="opt.value"
+                            t-att-class="{
+                                'btn': true,
+                                'btn-secondary': density === opt.value,
+                                'btn-outline-secondary': density !== opt.value,
+                            }"
+                            t-att-title="opt.label"
+                            t-att-aria-pressed="density === opt.value ? 'true' : 'false'"
+                            t-on-click="() => this.setDensity(opt.value)"
+                        >
+                            <i t-attf-class="fa #{opt.icon}" />
+                        </button>
+                    </div>
+                    <span class="o_dms_view_toolbar__spacer" />
+                    <button
+                        type="button"
+                        class="o_dms_view_toolbar__toggle btn btn-sm d-flex align-items-center gap-1"
+                        t-att-class="{
+                            'o_dms_view_toolbar__toggle--on': previewState.open,
+                            'o_dms_view_toolbar__toggle--off': !previewState.open,
+                        }"
+                        t-att-title="previewState.open ? 'Hide preview pane (Esc)' : 'Show side-by-side preview'"
+                        t-att-aria-pressed="previewState.open ? 'true' : 'false'"
+                        t-on-click="() => this.togglePreview()"
+                    >
+                        <i
+                            t-attf-class="fa #{previewState.open ? 'fa-times' : 'fa-columns'}"
+                        />
+                        <span class="d-none d-md-inline">
+                            <t t-if="previewState.open">Hide preview</t>
+                            <t t-else="">Preview pane</t>
+                        </span>
+                    </button>
+                </div>
+                <t t-call="dms.KanbanRendererBase" />
+            </div>
+            <FilePreviewPane
+                t-if="previewState.open"
+                recordId="previewState.recordId"
+                reloadToken="previewState.reloadToken"
+                onClose="() => this.closePreview()"
+            />
+        </div>
     </t>
 
     <t t-name="dms.KanbanButtons">
@@ -26,7 +101,7 @@
                 <button
                     type="button"
                     class="d-inline d-md-none btn btn-primary mx-1"
-                    t-on-click.prevent="uploadDocument"
+                    t-on-click.prevent="this.uploadDocument"
                 >
                     Scan
                 </button>
@@ -37,12 +112,12 @@
                     t-ref="fileInput"
                     multiple="1"
                     accept="*"
-                    t-on-change="onChangeFileInput"
+                    t-on-change="this.onChangeFileInput"
                 />
                 <button
                     type="button"
                     class="d-none d-md-inline btn btn-primary mx-1"
-                    t-on-click.prevent="uploadDocument"
+                    t-on-click.prevent="this.uploadDocument"
                 >
                     Upload
                 </button>
diff --git a/dms/static/src/js/views/file_kanban_view.esm.js b/dms/static/src/js/views/file_kanban_view.esm.js
index 0fb1f52b0..fdc681559 100644
--- a/dms/static/src/js/views/file_kanban_view.esm.js
+++ b/dms/static/src/js/views/file_kanban_view.esm.js
@@ -17,7 +17,6 @@ import {registry} from "@web/core/registry";
 
 patch(FileKanbanRenderer.prototype, createFileDropZoneExtension());
 patch(KanbanController.prototype, createFileUploadExtension());
-FileKanbanRenderer.template = "dms.KanbanRenderer";
 
 export const FileKanbanView = {
     ...kanbanView,
diff --git a/dms/static/src/scss/dms_ext_palette.scss b/dms/static/src/scss/dms_ext_palette.scss
new file mode 100644
index 000000000..63d5081f4
--- /dev/null
+++ b/dms/static/src/scss/dms_ext_palette.scss
@@ -0,0 +1,158 @@
+// Copyright 2026 ledoent — Don Kendall
+// License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl).
+//
+// Per-extension accent palette — single source of truth.
+//
+// Sets `--dms-accent` (CSS custom property) on any card whose `data-ext`
+// attribute matches a known extension family. The variable cascades to
+// descendant elements (spine, ext pill, mime icon) so each surface that
+// adopts the data-ext attribute pattern automatically inherits the right
+// colour without duplicating the map.
+//
+// This file is loaded in BOTH `web.assets_backend` (kanban / list / form)
+// and `web.assets_frontend` (portal) — see __manifest__.py.
+//
+// To support a new card surface, just give it `data-ext` and include its
+// selector in the per-rule selector list below. The default accent for
+// unknown extensions is set on the card class itself in its own SCSS
+// (e.g. `.o_kanban_dms_card { --dms-accent: var(--bs-secondary-color); }`).
+
+// Documents — crimson
+.o_kanban_dms_card[data-ext="pdf"],
+.o_dms_portal_card--file[data-ext="pdf"] {
+    --dms-accent: #d6336c;
+}
+
+// Word-family — blue
+.o_kanban_dms_card[data-ext="doc"],
+.o_kanban_dms_card[data-ext="docx"],
+.o_kanban_dms_card[data-ext="odt"],
+.o_kanban_dms_card[data-ext="rtf"],
+.o_dms_portal_card--file[data-ext="doc"],
+.o_dms_portal_card--file[data-ext="docx"],
+.o_dms_portal_card--file[data-ext="odt"],
+.o_dms_portal_card--file[data-ext="rtf"] {
+    --dms-accent: #1971c2;
+}
+
+// Spreadsheets — green
+.o_kanban_dms_card[data-ext="xls"],
+.o_kanban_dms_card[data-ext="xlsx"],
+.o_kanban_dms_card[data-ext="ods"],
+.o_kanban_dms_card[data-ext="csv"],
+.o_dms_portal_card--file[data-ext="xls"],
+.o_dms_portal_card--file[data-ext="xlsx"],
+.o_dms_portal_card--file[data-ext="ods"],
+.o_dms_portal_card--file[data-ext="csv"] {
+    --dms-accent: #2f9e44;
+}
+
+// Presentations — orange
+.o_kanban_dms_card[data-ext="ppt"],
+.o_kanban_dms_card[data-ext="pptx"],
+.o_kanban_dms_card[data-ext="odp"],
+.o_dms_portal_card--file[data-ext="ppt"],
+.o_dms_portal_card--file[data-ext="pptx"],
+.o_dms_portal_card--file[data-ext="odp"] {
+    --dms-accent: #e8590c;
+}
+
+// Plain text / markdown — slate
+.o_kanban_dms_card[data-ext="txt"],
+.o_kanban_dms_card[data-ext="md"],
+.o_kanban_dms_card[data-ext="rst"],
+.o_dms_portal_card--file[data-ext="txt"],
+.o_dms_portal_card--file[data-ext="md"],
+.o_dms_portal_card--file[data-ext="rst"] {
+    --dms-accent: #495057;
+}
+
+// Code (compiled / scripted) — teal
+.o_kanban_dms_card[data-ext="py"],
+.o_kanban_dms_card[data-ext="js"],
+.o_kanban_dms_card[data-ext="ts"],
+.o_kanban_dms_card[data-ext="java"],
+.o_kanban_dms_card[data-ext="c"],
+.o_kanban_dms_card[data-ext="cc"],
+.o_kanban_dms_card[data-ext="cpp"],
+.o_kanban_dms_card[data-ext="cs"],
+.o_kanban_dms_card[data-ext="h"],
+.o_kanban_dms_card[data-ext="hpp"],
+.o_kanban_dms_card[data-ext="go"],
+.o_kanban_dms_card[data-ext="rs"],
+.o_kanban_dms_card[data-ext="rb"],
+.o_kanban_dms_card[data-ext="php"],
+.o_kanban_dms_card[data-ext="sh"],
+.o_kanban_dms_card[data-ext="bash"],
+.o_kanban_dms_card[data-ext="aj"],
+.o_kanban_dms_card[data-ext="groovy"],
+.o_kanban_dms_card[data-ext="coffee"],
+.o_kanban_dms_card[data-ext="cbl"],
+.o_kanban_dms_card[data-ext="f"],
+.o_kanban_dms_card[data-ext="f90"] {
+    --dms-accent: #1098ad;
+}
+
+// Web markup / styles — purple
+.o_kanban_dms_card[data-ext="html"],
+.o_kanban_dms_card[data-ext="htm"],
+.o_kanban_dms_card[data-ext="xml"],
+.o_kanban_dms_card[data-ext="css"],
+.o_kanban_dms_card[data-ext="scss"],
+.o_kanban_dms_card[data-ext="sass"],
+.o_kanban_dms_card[data-ext="less"],
+.o_kanban_dms_card[data-ext="json"],
+.o_kanban_dms_card[data-ext="yaml"],
+.o_kanban_dms_card[data-ext="yml"],
+.o_kanban_dms_card[data-ext="toml"] {
+    --dms-accent: #7048e8;
+}
+
+// Archives — violet
+.o_kanban_dms_card[data-ext="zip"],
+.o_kanban_dms_card[data-ext="tar"],
+.o_kanban_dms_card[data-ext="gz"],
+.o_kanban_dms_card[data-ext="rar"],
+.o_dms_portal_card--file[data-ext="zip"],
+.o_dms_portal_card--file[data-ext="tar"],
+.o_dms_portal_card--file[data-ext="gz"],
+.o_dms_portal_card--file[data-ext="rar"] {
+    --dms-accent: #5f3dc4;
+}
+
+// Images — same crimson as PDFs (image previews are visually strong on
+// their own; the accent just adds family identity).
+.o_kanban_dms_card[data-ext="jpg"],
+.o_kanban_dms_card[data-ext="jpeg"],
+.o_kanban_dms_card[data-ext="png"],
+.o_kanban_dms_card[data-ext="gif"],
+.o_kanban_dms_card[data-ext="svg"],
+.o_kanban_dms_card[data-ext="webp"],
+.o_dms_portal_card--file[data-ext="jpg"],
+.o_dms_portal_card--file[data-ext="jpeg"],
+.o_dms_portal_card--file[data-ext="png"],
+.o_dms_portal_card--file[data-ext="gif"],
+.o_dms_portal_card--file[data-ext="svg"],
+.o_dms_portal_card--file[data-ext="webp"] {
+    --dms-accent: #d6336c;
+}
+
+// Media (audio + video) — magenta
+.o_kanban_dms_card[data-ext="mp4"],
+.o_kanban_dms_card[data-ext="mov"],
+.o_kanban_dms_card[data-ext="mkv"],
+.o_kanban_dms_card[data-ext="webm"],
+.o_kanban_dms_card[data-ext="mp3"],
+.o_kanban_dms_card[data-ext="wav"],
+.o_kanban_dms_card[data-ext="flac"],
+.o_kanban_dms_card[data-ext="ogg"],
+.o_dms_portal_card--file[data-ext="mp4"],
+.o_dms_portal_card--file[data-ext="mov"],
+.o_dms_portal_card--file[data-ext="mkv"],
+.o_dms_portal_card--file[data-ext="webm"],
+.o_dms_portal_card--file[data-ext="mp3"],
+.o_dms_portal_card--file[data-ext="wav"],
+.o_dms_portal_card--file[data-ext="flac"],
+.o_dms_portal_card--file[data-ext="ogg"] {
+    --dms-accent: #ae3ec9;
+}
diff --git a/dms/static/src/scss/file_kanban.scss b/dms/static/src/scss/file_kanban.scss
new file mode 100644
index 000000000..f23a1ba3a
--- /dev/null
+++ b/dms/static/src/scss/file_kanban.scss
@@ -0,0 +1,438 @@
+// Copyright 2026 ledoent — Don Kendall
+// License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl).
+
+// Denser, mime-aware file kanban card.
+//
+// Density tiers are applied via [data-density] on the kanban view root.
+// Default = "comfortable"; "compact" and "list" are toggled via the bar in
+// the top-right of the kanban area. Selection persists in localStorage.
+
+.mk_file_kanban_view {
+    position: relative;
+
+    // ---- Card chrome (applies to every density) ----
+    .o_kanban_dms_card {
+        // Default accent for unknown extensions / no mimetype info.
+        --dms-accent: var(--bs-secondary-color, #6c757d);
+
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        border-left: 3px solid var(--dms-accent);
+        transition:
+            transform 140ms ease,
+            box-shadow 140ms ease,
+            border-left-width 140ms ease;
+    }
+
+    // Subtle hover lift — cards feel tactile, the accent thickens to draw
+    // the eye to the hovered card without disturbing density.
+    .o_kanban_record:hover .o_kanban_dms_card {
+        transform: translateY(-1px);
+        box-shadow:
+            0 2px 4px rgba(0, 0, 0, 0.04),
+            0 4px 12px rgba(0, 0, 0, 0.06);
+        border-left-width: 4px;
+    }
+
+    // Selected: this card is the one open in the side-pane preview. Primary
+    // rail + tint, distinct from the per-extension accent, mirroring the
+    // list view's o_dms_preview_selected_row so the card↔pane mapping stays
+    // legible across densities.
+    .o_kanban_record.o_dms_preview_selected_card .o_kanban_dms_card {
+        --dms-accent: var(--bs-primary, #714b67);
+        border-left-width: 4px;
+        background-color: rgba(113, 75, 103, 0.06);
+        box-shadow: inset 0 0 0 1px rgba(113, 75, 103, 0.18);
+    }
+
+    // Empty many2many tags widget renders a wrapper div with no content;
+    // hide it so cards without tags don't carry empty vertical space.
+    .o_kanban_dms_card__body .o_field_many2many_tags:empty,
+    .o_kanban_dms_card__body .o_field_many2many_tags:has(.o_input_dropdown:only-child) {
+        display: none;
+    }
+
+    // The actual card chrome (thumb / body / meta sub-styles below).
+    .o_kanban_dms_card {
+        &__thumb {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: var(--bs-tertiary-bg, #f4f5f7);
+            border-radius: 4px;
+            overflow: hidden;
+
+            img {
+                max-width: 100%;
+                max-height: 100%;
+                object-fit: cover;
+            }
+        }
+
+        &__lock {
+            position: absolute;
+            top: 4px;
+            right: 4px;
+            padding: 2px 5px;
+            background-color: rgba(255, 255, 255, 0.92);
+            border-radius: 3px;
+            font-size: 0.75rem;
+            color: var(--bs-warning-text-emphasis, #997404);
+        }
+
+        // Extension pill — bottom-right of the thumb. Tinted using the
+        // per-extension accent so the pill reinforces the spine without a
+        // second source of truth for colour. Hidden in compact/list densities.
+        &__ext_pill {
+            position: absolute;
+            bottom: 3px;
+            right: 3px;
+            padding: 0 5px;
+            font-family: var(
+                --bs-font-monospace,
+                ui-monospace,
+                "SFMono-Regular",
+                Menlo,
+                monospace
+            );
+            font-size: 0.62rem;
+            font-weight: 600;
+            line-height: 1.5;
+            letter-spacing: 0.04em;
+            text-transform: uppercase;
+            color: #fff;
+            background-color: var(--dms-accent, var(--bs-secondary, #6c757d));
+            border-radius: 3px;
+            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
+            pointer-events: none;
+        }
+
+        &__body {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+            min-width: 0; // allow text-truncate on the name
+        }
+
+        &__name {
+            display: block;
+            // min-width:0 lets the name shrink (and thus ellipsis-truncate)
+            // when it is a flex child in the compact/list row layouts; a no-op
+            // in the comfortable column layout.
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        // Inline rename input (F3). Sits in the same flow slot as the name
+        // span so the card geometry doesn't shift on dblclick. Bootstrap's
+        // form-control-sm sets the height; we strip the rounded chrome to
+        // keep it visually close to the read-mode label.
+        &__name_input {
+            display: block;
+            width: 100%;
+            font-weight: 600;
+            font-size: inherit;
+            padding: 2px 6px;
+            border: 1px solid var(--bs-primary, #714b67);
+            border-radius: 3px;
+            background: var(--bs-body-bg, #fff);
+
+            &:focus {
+                outline: none;
+                box-shadow: 0 0 0 2px rgba(113, 75, 103, 0.2);
+            }
+        }
+
+        // Directory path subtitle — sits directly under the filename so
+        // duplicate filenames across directories are disambiguated at a
+        // glance. Hidden in compact/list densities.
+        &__subtitle {
+            display: block;
+            font-size: 0.72rem;
+            line-height: 1.2;
+            margin-top: -2px;
+        }
+
+        &__meta {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            margin-top: auto;
+            padding-top: 4px;
+            border-top: 1px solid
+                var(--bs-border-color-translucent, rgba(0, 0, 0, 0.075));
+            font-size: 0.75rem;
+            color: var(--bs-secondary-color, #6c757d);
+        }
+
+        &__avatar {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            object-fit: cover;
+        }
+
+        // The inline-rename name is rendered by the dms_file_name view widget,
+        // which Odoo wraps in a <div class="o_widget">. That wrapper would
+        // become the flex child of the card body and, lacking min-width:0,
+        // refuse to shrink — so a long filename overflows into the meta
+        // column in compact/list densities. display:contents removes the
+        // wrapper box so the name/input itself is the flex child, restoring
+        // the truncation behaviour the &__name rules already define.
+        .o_widget_dms_file_name {
+            display: contents;
+        }
+    }
+
+    // Density-aware suppression: the subtitle + ext pill belong to the
+    // comfortable density's "scannable card" composition. Compact + list
+    // densities prioritise row count, so we hide them there.
+    .o_kanban_renderer[data-density="compact"],
+    .o_kanban_renderer[data-density="list"] {
+        .o_kanban_dms_card__subtitle,
+        .o_kanban_dms_card__ext_pill {
+            display: none;
+        }
+    }
+
+    // ---- Comfortable (default): vertical card, denser than Odoo's stock ----
+    // Odoo's `.o_kanban_record` has its own min-height which would let the
+    // thumb stretch to fill (flex-column distributes free space). Override
+    // both the record min-height and pin the thumb to its natural size so
+    // the card sits as tall as the content requires, no more.
+    .o_kanban_renderer[data-density="comfortable"],
+    .o_kanban_renderer:not([data-density]) {
+        .o_kanban_record {
+            min-height: 0;
+        }
+
+        .o_kanban_dms_card {
+            padding: 8px 12px;
+            min-height: 0;
+            gap: 7px;
+
+            // Thumb sized to its content (mime icon or image_128).
+            // Loses the placeholder grey rectangle that dominated the
+            // previous layout and made small icons look stranded.
+            &__thumb {
+                aspect-ratio: auto;
+                flex: 0 0 auto;
+                min-height: 0;
+                padding: 4px 0;
+                background-color: transparent;
+                align-self: flex-start;
+            }
+
+            &__thumb img {
+                width: 48px;
+                height: 48px;
+            }
+
+            // For image files, icon_url returns /web/image/.../image_128 —
+            // those benefit from a wider thumbnail. The dms.mixins.thumbnail
+            // cropping is 128×128 so we can show it square at a larger size.
+            &__thumb img[src*="image_128"] {
+                width: 76px;
+                height: 76px;
+                border-radius: 4px;
+            }
+        }
+    }
+
+    // ---- Compact: row-style with icon + name on a single line ----
+    // Replaces the comfortable card's stacked thumb+body+meta with a
+    // horizontal row inside each card, halving vertical footprint.
+    .o_kanban_renderer[data-density="compact"] {
+        .o_kanban_record {
+            min-height: unset;
+        }
+
+        .o_kanban_dms_card {
+            flex-direction: row;
+            align-items: center;
+            padding: 4px 8px;
+            gap: 10px;
+            min-height: 0;
+
+            &__thumb {
+                flex: 0 0 32px;
+                width: 32px;
+                height: 32px;
+                aspect-ratio: 1;
+                min-height: 0;
+                padding: 0;
+                background-color: transparent;
+            }
+
+            &__thumb img {
+                width: 24px;
+                height: 24px;
+            }
+
+            &__lock {
+                top: 0;
+                right: 0;
+                font-size: 0.65rem;
+            }
+
+            &__body {
+                flex: 1 1 auto;
+                flex-direction: row;
+                align-items: center;
+                gap: 10px;
+            }
+
+            &__name {
+                flex: 1 1 auto;
+                font-size: 0.85rem;
+            }
+
+            &__meta {
+                margin-top: 0;
+                padding-top: 0;
+                border-top: none;
+                flex: 0 0 auto;
+                font-size: 0.7rem;
+            }
+        }
+    }
+
+    // ---- List: horizontal row, icon + meta inline ----
+    .o_kanban_renderer[data-density="list"] {
+        // The renderer IS the flex container — no nested descendant needed.
+        // nowrap is essential: the renderer is a fixed-height flex item (it
+        // fills the space below the toolbar and owns the vertical scroll), so a
+        // column flex-container that still inherited core's `flex-wrap: wrap`
+        // would spill rows sideways into extra columns instead of stacking +
+        // scrolling. Stack in one column and let overflow-y handle the rest.
+        display: flex;
+        flex-direction: column;
+        // !important to beat core's `.flex-wrap` Bootstrap utility class on the
+        // renderer (which is itself !important) — without it the column still
+        // wraps rows sideways into extra columns.
+        flex-wrap: nowrap !important;
+        gap: 2px;
+
+        .o_kanban_record {
+            width: 100% !important;
+            max-width: 100% !important;
+            min-height: unset;
+            margin: 0;
+            // Keep each row's natural height; without this the column's
+            // default flex-shrink squeezes 44 rows into the fixed height
+            // (≈12px each) instead of overflowing into the scroll.
+            flex: 0 0 auto;
+        }
+
+        .o_kanban_dms_card {
+            flex-direction: row;
+            align-items: center;
+            padding: 6px 10px;
+            gap: 12px;
+
+            &__thumb {
+                flex: 0 0 32px;
+                width: 32px;
+                height: 32px;
+                aspect-ratio: 1;
+                min-height: 32px;
+            }
+
+            &__thumb img {
+                width: 24px;
+                height: 24px;
+            }
+
+            &__body {
+                flex: 1 1 auto;
+                flex-direction: row;
+                align-items: center;
+                gap: 12px;
+            }
+
+            &__meta {
+                margin-top: 0;
+                padding-top: 0;
+                border-top: none;
+                flex: 0 0 auto;
+            }
+        }
+    }
+
+    // ---- Animated dropzone (drag-over overlay) ----
+    //
+    // Replaces the default static cloud icon with a marching-dashed-border
+    // overlay + pulsing icon + title + hint. Triggered by the renderer's
+    // existing `dragState.showDragZone` state — no JS change.
+    .o_dms_dropzone {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 1rem;
+        background:
+            linear-gradient(rgba(113, 75, 103, 0.06), rgba(113, 75, 103, 0.1)),
+            repeating-linear-gradient(
+                45deg,
+                transparent,
+                transparent 8px,
+                rgba(113, 75, 103, 0.06) 8px,
+                rgba(113, 75, 103, 0.06) 16px
+            );
+        border-radius: 8px;
+        outline: 3px dashed var(--bs-primary, #714b67);
+        outline-offset: -8px;
+        animation: o_dms_dropzone_march 1s linear infinite;
+        z-index: 10;
+
+        &__icon {
+            width: 96px;
+            height: 96px;
+            border-radius: 50%;
+            background: rgba(113, 75, 103, 0.12);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            animation: o_dms_dropzone_pulse 1.5s ease-in-out infinite;
+
+            i.fa {
+                font-size: 3rem;
+                color: var(--bs-primary, #714b67);
+            }
+        }
+
+        &__title {
+            font-size: 1.2rem;
+            font-weight: 600;
+            color: var(--bs-primary, #714b67);
+        }
+
+        &__hint {
+            font-size: 0.85rem;
+            color: var(--bs-secondary-color, #6c757d);
+        }
+    }
+}
+
+@keyframes o_dms_dropzone_march {
+    from {
+        outline-offset: -8px;
+    }
+    to {
+        outline-offset: -16px;
+    }
+}
+
+@keyframes o_dms_dropzone_pulse {
+    0%,
+    100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.08);
+    }
+}
diff --git a/dms/views/dms_file.xml b/dms/views/dms_file.xml
index ed44ad578..30180f77a 100644
--- a/dms/views/dms_file.xml
+++ b/dms/views/dms_file.xml
@@ -93,15 +93,16 @@
                 js_class="file_kanban"
                 class="mk_file_kanban_view o_kanban_small_column o_kanban_mobile"
                 banner_route="/onboarding/document_onboarding_file"
-                highlight_color="color"
             >
                 <field name="id" />
                 <field name="tag_ids" />
                 <field name="name" />
+                <field name="path_names" />
                 <field name="color" />
                 <field name="active" />
                 <field name="mimetype" />
                 <field name="icon_url" />
+                <field name="human_size" />
                 <field name="create_uid" />
                 <field name="write_date" />
                 <field name="locked_by" />
@@ -211,53 +212,72 @@
                             </div>
                         </div>
                     </t>
-                    <t t-name="card" class="flex-row">
-                        <main>
-                            <div
-                                t-attf-class="oe_kanban_global_click oe_kanban_content row g-0"
-                            >
-                                <div class="col-3">
-                                    <a
-                                        class="h-100 d-block o_kanban_dms_file_preview"
-                                        t-att-data-id="record.id.raw_value"
-                                        t-att-id="record.id.raw_value"
-                                        t-att-name="record.name.raw_value"
-                                    >
-                                        <img
-                                            t-att-src="record.icon_url.raw_value"
-                                            style="height:70px;"
-                                            alt="Icon"
-                                        />
-                                    </a>
-                                </div>
-                                <div class="col-9">
-                                    <field name="name" class="fw-bold" />
-                                    <field
-                                        name="tag_ids"
-                                        widget="many2many_tags"
-                                        options="{'color_field': 'color'}"
+                    <t t-name="card">
+                        <t
+                            t-set="dms_ext"
+                            t-value="record.name.raw_value and record.name.raw_value.includes('.') ? record.name.raw_value.split('.').pop().toLowerCase() : ''"
+                        />
+                        <t
+                            t-set="dms_subtitle"
+                            t-value="record.path_names.raw_value ? record.path_names.raw_value.split('/').slice(0, -1).join('/') : ''"
+                        />
+                        <main
+                            class="o_kanban_dms_card oe_kanban_global_click"
+                            t-att-data-ext="dms_ext"
+                        >
+                            <div class="o_kanban_dms_card__thumb">
+                                <a
+                                    class="d-block o_kanban_dms_file_preview"
+                                    t-att-data-id="record.id.raw_value"
+                                    t-att-id="record.id.raw_value"
+                                    t-att-name="record.name.raw_value"
+                                >
+                                    <img
+                                        t-att-src="record.icon_url.raw_value"
+                                        t-att-alt="record.name.raw_value"
                                     />
-                                    <field name="write_date" widget="date" />
-                                </div>
-                                <footer class="mt-auto pt-0 ms-1">
-                                    <div class="d-flex ms-auto oe_kanban_bottom_right">
-                                        <span
-                                            t-if="record.is_locked.raw_value"
-                                            class="o_dms_file_kanban_lock"
-                                        >
-                                            <i
-                                                t-attf-class="fa #{(record.is_locked.raw_value and !record.is_lock_editor.raw_value) ? 'fa-lock' : ''} #{((record.is_locked.raw_value and record.is_lock_editor.raw_value)) ? 'fa-unlock-alt' : ''}"
-                                                t-att-title="record.locked_by.value"
-                                            />
-                                        </span>
-                                        <img
-                                            t-attf-src="/web/image/res.users/#{record.create_uid.raw_value}/avatar_128"
-                                            t-att-alt="record.create_uid.value"
-                                            class="oe_kanban_avatar"
-                                            style="max-width:20px;"
-                                        />
-                                    </div>
-                                </footer>
+                                </a>
+                                <span
+                                    t-if="dms_ext"
+                                    class="o_kanban_dms_card__ext_pill"
+                                    t-esc="dms_ext"
+                                />
+                                <span
+                                    t-if="record.is_locked.raw_value"
+                                    class="o_kanban_dms_card__lock o_dms_file_kanban_lock"
+                                >
+                                    <i
+                                        t-attf-class="fa #{(record.is_locked.raw_value and !record.is_lock_editor.raw_value) ? 'fa-lock' : ''} #{((record.is_locked.raw_value and record.is_lock_editor.raw_value)) ? 'fa-unlock-alt' : ''}"
+                                        t-att-title="record.locked_by.value"
+                                    />
+                                </span>
+                            </div>
+                            <div class="o_kanban_dms_card__body">
+                                <!-- Display name with double-click → inline
+                                     rename, via the dms_file_name view widget
+                                     (arch may not bind owl event/ref
+                                     directives in 19.0). -->
+                                <widget name="dms_file_name" />
+                                <div
+                                    t-if="dms_subtitle"
+                                    class="o_kanban_dms_card__subtitle text-muted small text-truncate"
+                                    t-att-title="dms_subtitle"
+                                    t-esc="dms_subtitle"
+                                />
+                                <field
+                                    name="tag_ids"
+                                    widget="many2many_tags"
+                                    options="{'color_field': 'color'}"
+                                />
+                            </div>
+                            <div class="o_kanban_dms_card__meta oe_kanban_bottom_right">
+                                <field name="human_size" />
+                                <field name="write_date" />
+                                <img
+                                    class="o_kanban_dms_card__avatar oe_kanban_avatar ms-auto"
+                                    t-attf-src="/web/image/res.users/#{record.create_uid.raw_value}/avatar_128"
+                                    t-att-alt="record.create_uid.value"
+                                />
                             </div>
                         </main>
                     </t>