diff --git a/addons/data_recycle/__manifest__.py b/addons/data_recycle/__manifest__.py
index 7b3cfa6420d..d1acdf7f32e 100644
--- a/addons/data_recycle/__manifest__.py
+++ b/addons/data_recycle/__manifest__.py
@@ -21,10 +21,10 @@
     'application': True,
     'assets': {
         'web.assets_backend': [
-            'data_recycle/static/src/js/**/*',
+            'data_recycle/static/src/views/*.js',
         ],
         'web.assets_qweb': [
-            'data_recycle/static/src/xml/**/*',
+            'data_recycle/static/src/views/*.xml',
         ],
     },
     'license': 'LGPL-3',
diff --git a/addons/data_recycle/static/src/js/data_recycle_common.js b/addons/data_recycle/static/src/js/data_recycle_common.js
deleted file mode 100644
index 1df6288d0e6..00000000000
--- a/addons/data_recycle/static/src/js/data_recycle_common.js
+++ /dev/null
@@ -1,50 +0,0 @@
-odoo.define('data_recycle.CommonListController', function (require) {
-"use strict";
-
-    var ListController = require('web.ListController');
-
-    var DataCommonListController = ListController.extend({
-        /**
-         * Open the form view of the original record, and not the data_merge.record view
-         * @override
-         */
-        _onOpenRecord: function(event) {
-            var record = this.model.get(event.data.id, {raw: true});
-
-            this.do_action({
-                type: 'ir.actions.act_window',
-                views: [[false, 'form']],
-                res_model: record.data.res_model_name,
-                res_id: record.data.res_id,
-                context: {
-                    create: false,
-                    edit: false
-                }
-            });
-        },
-
-        /**
-         * Render the "Merge" & "Unselect" buttons when records are selected
-         * @override
-         */
-        _updateControlPanel: function() {
-            this._super.apply(this, arguments);
-
-            if(this.selectedRecords.length > 0) {
-                $('.o_list_buttons').removeClass('d-none');
-            } else {
-                $('.o_list_buttons').addClass('d-none');
-            }
-        },
-
-        /**
-         * Unselect all the records
-         * @param {*} ev
-         */
-        _onUnselectClick: function(ev) {
-            this.renderer._onToggleSelection(ev);
-        },
-    });
-
-    return DataCommonListController;
-});
diff --git a/addons/data_recycle/static/src/js/data_recycle_list_view.js b/addons/data_recycle/static/src/js/data_recycle_list_view.js
deleted file mode 100644
index 580f9a89b10..00000000000
--- a/addons/data_recycle/static/src/js/data_recycle_list_view.js
+++ /dev/null
@@ -1,51 +0,0 @@
-odoo.define('data_recycle.ListView', function (require) {
-"use strict";
-
-    var ListView = require('web.ListView');
-    var session = require('web.session');
-    var viewRegistry = require('web.view_registry');
-    var DataCommonListController = require('data_recycle.CommonListController');
-
-    var DataCleaningListController = DataCommonListController.extend({
-        buttons_template: 'DataRecycle.buttons',
-        /**
-         * @override
-         */
-        renderButtons: function ($node) {
-            this._super.apply(this, arguments);
-            this.$buttons.on('click', '.o_data_recycle_validate_button', this._onValidateClick.bind(this));
-            this.$buttons.on('click', '.o_data_recycle_unselect_button', this._onUnselectClick.bind(this));
-        },
-
-        /**
-         * Validate all the records selected
-         * @param {*} ev
-         */
-        _onValidateClick: async function(ev) {
-            const self = this;
-            const state = this.model.get(this.handle);
-            let record_ids;
-            if (this.isDomainSelected) {
-                record_ids = await this._domainToResIds(state.getDomain(), session.active_ids_limit);
-            } else {
-                record_ids = this.getSelectedIds();
-            }
-
-            this._rpc({
-                model: 'data_recycle.record',
-                method: 'action_validate',
-                args: [record_ids],
-            }).then(function(data) {
-                self.trigger_up('reload');
-            });
-        },
-    });
-
-    var DataCleaningListView = ListView.extend({
-        config: _.extend({}, ListView.prototype.config, {
-            Controller: DataCleaningListController,
-        }),
-    });
-
-    viewRegistry.add('data_recycle_list', DataCleaningListView);
-});
diff --git a/addons/data_recycle/static/src/views/data_cleaning_common_list.js b/addons/data_recycle/static/src/views/data_cleaning_common_list.js
new file mode 100644
index 00000000000..df306bbe39d
--- /dev/null
+++ b/addons/data_recycle/static/src/views/data_cleaning_common_list.js
@@ -0,0 +1,38 @@
+/** @odoo-module **/
+
+import { ListController } from "@web/views/list/list_controller";
+import { useService } from "@web/core/utils/hooks";
+
+
+export class DataCleaningCommonListController extends ListController {
+
+    setup() {
+        super.setup();
+        this.orm = useService("orm");
+        this.actionService = useService("action");
+    }
+
+    /**
+     * Open the form view of the original record, and not the data_merge.record view
+     * @override
+     */
+    openRecord(record) {
+        this.actionService.doAction({
+            type: 'ir.actions.act_window',
+            views: [[false, 'form']],
+            res_model: record.data.res_model_name,
+            res_id: record.data.res_id,
+            context: {
+                create: false,
+                edit: false
+            }
+        });
+    }
+
+    /**
+     * Unselect all the records
+     */
+    onUnselectClick() {
+        this.discardSelection();
+    }
+};
diff --git a/addons/data_recycle/static/src/views/data_recycle_list_view.js b/addons/data_recycle/static/src/views/data_recycle_list_view.js
new file mode 100644
index 00000000000..0f487f6166d
--- /dev/null
+++ b/addons/data_recycle/static/src/views/data_recycle_list_view.js
@@ -0,0 +1,32 @@
+/** @odoo-module **/
+
+import { DataCleaningCommonListController } from "@data_recycle/views/data_cleaning_common_list";
+import { registry } from '@web/core/registry';
+import { listView } from '@web/views/list/list_view';
+import { session } from "@web/session";
+
+export class DataRecycleListController extends DataCleaningCommonListController {
+    /**
+     * Validate all the records selected
+     */
+    async onValidateClick() {
+        let record_ids;
+        if (this.isDomainSelected) {
+            const domain = this.props.domain;
+            record_ids = await this._domainToResIds(domain, session.active_ids_limit);
+        } else {
+            record_ids = await this.getSelectedResIds();
+        }
+
+        await this.orm.call('data_recycle.record', 'action_validate', [record_ids]);
+        await this.model.load();
+        this.model.notify();
+    }
+};
+
+registry.category('views').add('data_recycle_list', {
+    ...listView,
+    Controller: DataRecycleListController,
+    buttonTemplate: 'DataRecycle.buttons',
+});
+
diff --git a/addons/data_recycle/static/src/views/data_recycle_list_view.xml b/addons/data_recycle/static/src/views/data_recycle_list_view.xml
new file mode 100644
index 00000000000..86a1054c87e
--- /dev/null
+++ b/addons/data_recycle/static/src/views/data_recycle_list_view.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates>
+    <t t-name="DataRecycle.buttons" t-inherit="web.ListView.Buttons" t-inherit-mode="primary" owl="1">
+        <xpath expr="//t[@t-if='props.showButtons']">
+            <t t-if="nbSelected">
+                <button type="button" class="btn btn-primary o_data_recycle_validate_button" t-on-click="onValidateClick">
+                    Validate
+                </button>
+                <button type="button" class="btn btn-secondary o_data_recycle_unselect_button" t-on-click="onUnselectClick">
+                    Unselect
+                </button>
+            </t>
+        </xpath>
+    </t>
+</templates>
diff --git a/addons/data_recycle/static/src/xml/data_recycle.xml b/addons/data_recycle/static/src/xml/data_recycle.xml
deleted file mode 100644
index 608b011e1d2..00000000000
--- a/addons/data_recycle/static/src/xml/data_recycle.xml
+++ /dev/null
@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<templates>
-    <t t-name="DataRecycle.buttons">
-        <div class="o_list_buttons d-none" role="toolbar" aria-label="Main actions">
-            <button type="button" class="btn btn-primary o_data_recycle_validate_button">
-                Validate
-            </button>
-            <button type="button" class="btn btn-secondary o_data_recycle_unselect_button">
-                Unselect
-            </button>
-        </div>
-    </t>
-</templates>
diff --git a/addons/data_recycle/views/data_recycle_record_views.xml b/addons/data_recycle/views/data_recycle_record_views.xml
index 99639086927..56ffeef8e15 100644
--- a/addons/data_recycle/views/data_recycle_record_views.xml
+++ b/addons/data_recycle/views/data_recycle_record_views.xml
@@ -5,7 +5,7 @@
             <field name="name">Field Recycle Record List</field>
             <field name="model">data_recycle.record</field>
             <field name="arch" type="xml">
-                <tree js_class="data_recycle_list" sample="1">
+                <tree js_class="data_recycle_list" sample="1" create="0" export_xlsx="0">
                     <field name="active" invisible="1" />
                     <field name="res_model_name" invisible="1" />
                     <field name="res_id" />