diff --git a/web_tree_many2one_clickable/__manifest__.py b/web_tree_many2one_clickable/__manifest__.py
index 32fa1fb7b..b5847d3cc 100644
--- a/web_tree_many2one_clickable/__manifest__.py
+++ b/web_tree_many2one_clickable/__manifest__.py
@@ -7,12 +7,13 @@
 {
     "name": "Clickable many2one fields for tree views",
     "summary": "Open the linked resource when clicking on their name",
-    "version": "15.0.1.0.0",
+    "version": "16.0.1.0.0",
     "category": "Hidden",
     "website": "https://github.com/OCA/web",
     "author": "Therp BV, "
     "Tecnativa, "
     "Camptocamp, "
+    "Onestein, "
     "Odoo Community Association (OCA)",
     "license": "AGPL-3",
     "installable": True,
@@ -20,10 +21,12 @@
     "data": [],
     "assets": {
         "web.assets_backend": [
-            "web_tree_many2one_clickable/static/src/js/*.js",
-        ],
-        "web.assets_common": [
-            "web_tree_many2one_clickable/static/src/css/web_tree_many2one_clickable.scss",
-        ],
+            "web_tree_many2one_clickable/static/src/components/"
+            "many2one_button/many2one_button.esm.js",
+            "web_tree_many2one_clickable/static/src/components/"
+            "many2one_button/many2one_button.scss",
+            "web_tree_many2one_clickable/static/src/components/"
+            "many2one_button/many2one_button.xml",
+        ]
     },
 }
diff --git a/web_tree_many2one_clickable/readme/CONTRIBUTORS.rst b/web_tree_many2one_clickable/readme/CONTRIBUTORS.rst
index 474d91079..448d7c0c3 100644
--- a/web_tree_many2one_clickable/readme/CONTRIBUTORS.rst
+++ b/web_tree_many2one_clickable/readme/CONTRIBUTORS.rst
@@ -5,3 +5,4 @@
 * Artem Kostyuk <a.kostyuk@mobilunity.com>
 * Anand Kansagra <kansagraanand@hotmail.com>
 * Alexandre Díaz <alexandre.diaz@tecnativa.com>
+* Dennis Sluijk <d.sluijk@onestein.nl>
diff --git a/web_tree_many2one_clickable/static/src/components/many2one_button/many2one_button.esm.js b/web_tree_many2one_clickable/static/src/components/many2one_button/many2one_button.esm.js
new file mode 100644
index 000000000..df8c2ce92
--- /dev/null
+++ b/web_tree_many2one_clickable/static/src/components/many2one_button/many2one_button.esm.js
@@ -0,0 +1,33 @@
+/** @odoo-module */
+/* Copyright 2013 Therp BV (<http://therp.nl>).
+ * Copyright 2015 Pedro M. Baeza <pedro.baeza@serviciosbaeza.com>
+ * Copyright 2016 Antonio Espinosa <antonio.espinosa@tecnativa.com>
+ * Copyright 2017 Sodexis <dev@sodexis.com>
+ * Copyright 2018 Camptocamp SA
+ * Copyright 2019 Alexandre Díaz <alexandre.diaz@tecnativa.com>
+ * License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). */
+
+import {ListRenderer} from "@web/views/list/list_renderer";
+import {Component} from "@odoo/owl";
+import {useService} from "@web/core/utils/hooks";
+
+export class TreeMany2oneClickableButton extends Component {
+    setup() {
+        this.actionService = useService("action");
+    }
+
+    async onClick(ev) {
+        ev.stopPropagation();
+        return this.actionService.doAction({
+            type: "ir.actions.act_window",
+            res_model: this.props.field.relation,
+            res_id: this.props.value[0],
+            views: [[false, "form"]],
+            target: "target",
+            additionalContext: this.props.context || {},
+        });
+    }
+}
+TreeMany2oneClickableButton.template = "web_tree_many2one_clickable.Button";
+
+Object.assign(ListRenderer.components, {TreeMany2oneClickableButton});
diff --git a/web_tree_many2one_clickable/static/src/components/many2one_button/many2one_button.scss b/web_tree_many2one_clickable/static/src/components/many2one_button/many2one_button.scss
new file mode 100644
index 000000000..b6811b039
--- /dev/null
+++ b/web_tree_many2one_clickable/static/src/components/many2one_button/many2one_button.scss
@@ -0,0 +1,10 @@
+td.o_list_many2one {
+    button.web_tree_many2one_clickable {
+        margin-left: 0.5em;
+        visibility: hidden;
+    }
+
+    &:hover button.web_tree_many2one_clickable {
+        visibility: visible;
+    }
+}
diff --git a/web_tree_many2one_clickable/static/src/components/many2one_button/many2one_button.xml b/web_tree_many2one_clickable/static/src/components/many2one_button/many2one_button.xml
new file mode 100644
index 000000000..89f688a18
--- /dev/null
+++ b/web_tree_many2one_clickable/static/src/components/many2one_button/many2one_button.xml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates>
+    <t t-name="web_tree_many2one_clickable.Button" owl="1">
+        <button
+            class="btn btn-sm btn-secondary fa fa-arrow-right web_tree_many2one_clickable"
+            t-on-click="onClick"
+        >
+        </button>
+    </t>
+
+    <t t-inherit="web.ListRenderer.RecordRow" t-inherit-mode="extension">
+        <xpath expr="//Field" position="after">
+            <TreeMany2oneClickableButton
+                record="record"
+                field="record.fields[column.name]"
+                value="record.data[column.name]"
+                t-if="record.fields[column.name].type == 'many2one' and record.data[column.name] and canUseFormatter(column, record) and !props.archInfo.fieldNodes[column.name].options.no_open"
+            />
+        </xpath>
+    </t>
+</templates>
diff --git a/web_tree_many2one_clickable/static/src/css/web_tree_many2one_clickable.scss b/web_tree_many2one_clickable/static/src/css/web_tree_many2one_clickable.scss
deleted file mode 100644
index 67d2e41a1..000000000
--- a/web_tree_many2one_clickable/static/src/css/web_tree_many2one_clickable.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-td.o_many2one_cell {
-    a {
-        margin-left: 0.5em;
-        visibility: hidden;
-    }
-
-    &:hover a {
-        visibility: visible;
-    }
-}
diff --git a/web_tree_many2one_clickable/static/src/js/web_tree_many2one_clickable.js b/web_tree_many2one_clickable/static/src/js/web_tree_many2one_clickable.js
deleted file mode 100644
index 931d4896c..000000000
--- a/web_tree_many2one_clickable/static/src/js/web_tree_many2one_clickable.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/* Copyright 2013 Therp BV (<http://therp.nl>).
- * Copyright 2015 Pedro M. Baeza <pedro.baeza@serviciosbaeza.com>
- * Copyright 2016 Antonio Espinosa <antonio.espinosa@tecnativa.com>
- * Copyright 2017 Sodexis <dev@sodexis.com>
- * Copyright 2018 Camptocamp SA
- * Copyright 2019 Alexandre Díaz <alexandre.diaz@tecnativa.com>
- * License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). */
-
-odoo.define("web_tree_many2one_clickable.many2one_clickable", function (require) {
-    "use strict";
-
-    var ListRenderer = require("web.ListRenderer");
-    var ListFieldMany2One = require("web.relational_fields").ListFieldMany2One;
-
-    ListRenderer.include({
-        _renderBodyCell: function (record, node, colIndex, options) {
-            if (
-                !node.attrs.widget &&
-                node.attrs.name &&
-                this.state.fields[node.attrs.name] &&
-                this.state.fields[node.attrs.name].type === "many2one"
-            ) {
-                // No explicit widget provided on a many2one field,
-                // force `many2one` widget
-                node.attrs.widget = "many2one";
-            }
-            return this._super(record, node, colIndex, options);
-        },
-    });
-
-    ListFieldMany2One.include({
-        _renderReadonly: function () {
-            this._super.apply(this, arguments);
-            var self = this;
-
-            if (!this.noOpen && this.value) {
-                // Replace '<a>' element
-                this.$el.removeClass("o_form_uri");
-                this.$el = $("<span/>", {
-                    html: this.$el.html(),
-                    class: this.$el.attr("class") + " o_field_text",
-                    name: this.$el.attr("name"),
-                });
-
-                // Append button
-                var $a = $("<a/>", {
-                    href: "#",
-                    class: "o_form_uri btn btn-sm btn-secondary fa fa-angle-double-right",
-                }).on("click", function (ev) {
-                    ev.preventDefault();
-                    ev.stopPropagation();
-
-                    self.do_action({
-                        type: "ir.actions.act_window",
-                        res_model: self.field.relation,
-                        res_id: self.value.res_id,
-                        views: [[false, "form"]],
-                        target: "target",
-                        context: self.record.getContext({
-                            additionalContext: self.attrs.context || {},
-                        }),
-                    });
-                });
-                this.$el.append($a);
-            }
-        },
-    });
-});