diff --git a/addons/hr_recruitment/__manifest__.py b/addons/hr_recruitment/__manifest__.py
index 77e5192064d..136c6596858 100644
--- a/addons/hr_recruitment/__manifest__.py
+++ b/addons/hr_recruitment/__manifest__.py
@@ -41,8 +41,9 @@
     'application': True,
     'assets': {
         'web.assets_backend': [
-            'hr_recruitment/static/src/scss/*.scss',
-            'hr_recruitment/static/src/js/recruitment.js',
+            'hr_recruitment/static/src/**/*.js',
+            'hr_recruitment/static/src/**/*.scss',
+            'hr_recruitment/static/src/**/*.xml',
             'hr_recruitment/static/src/js/tours/hr_recruitment.js',
         ],
     },
diff --git a/addons/hr_recruitment/static/src/applicant_char/applicant_char.js b/addons/hr_recruitment/static/src/applicant_char/applicant_char.js
new file mode 100644
index 00000000000..caae452cc8b
--- /dev/null
+++ b/addons/hr_recruitment/static/src/applicant_char/applicant_char.js
@@ -0,0 +1,30 @@
+/** @odoo-module */
+
+import { CharField } from "@web/views/fields/char/char_field";
+import { registry } from "@web/core/registry";
+
+import { useService } from "@web/core/utils/hooks";
+
+export class ApplicantCharField extends CharField {
+    setup() {
+        super.setup();
+
+        this.action = useService("action");
+    }
+
+    onClick() {
+        const record = this.props.record.data;
+        if (record.res_id !== undefined && record.res_model == 'hr.applicant') {
+            this.action.doAction({
+                type: 'ir.actions.act_window',
+                res_model: 'hr.applicant',
+                res_id: record.res_id,
+                views: [[false, "form"]],
+                view_mode: "form",
+                target: "current",
+            });
+        }
+    }
+}
+ApplicantCharField.template = "hr_recruitment.ApplicantCharField";
+registry.category("fields").add("applicant_char", ApplicantCharField);
diff --git a/addons/hr_recruitment/static/src/applicant_char/applicant_char.scss b/addons/hr_recruitment/static/src/applicant_char/applicant_char.scss
new file mode 100644
index 00000000000..0743591cdeb
--- /dev/null
+++ b/addons/hr_recruitment/static/src/applicant_char/applicant_char.scss
@@ -0,0 +1,7 @@
+.o_field_applicant_char {
+    color: $link-color;
+
+    &:hover {
+        color: $link-hover-color;
+    }
+}
diff --git a/addons/hr_recruitment/static/src/applicant_char/applicant_char.xml b/addons/hr_recruitment/static/src/applicant_char/applicant_char.xml
new file mode 100644
index 00000000000..e33f5b9a742
--- /dev/null
+++ b/addons/hr_recruitment/static/src/applicant_char/applicant_char.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="hr_recruitment.ApplicantCharField" t-inherit="web.CharField" t-inherit-mode="primary" owl="1">
+        <xpath expr="//span[@t-esc='formattedValue']" position="attributes">
+            <attribute name="t-on-click.prevent.stop">onClick</attribute>
+        </xpath>
+    </t>
+</templates>
diff --git a/addons/hr_recruitment/static/src/js/recruitment.js b/addons/hr_recruitment/static/src/js/recruitment.js
deleted file mode 100644
index fbfbc79e057..00000000000
--- a/addons/hr_recruitment/static/src/js/recruitment.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/** @odoo-module **/
-import fieldRegistry from 'web.field_registry';
-import { FieldChar, StateSelectionWidget } from 'web.basic_fields';
-
-const RecruitmentStateSelectionWidget = StateSelectionWidget.extend({
-    init() {
-        this._super(...arguments);
-        this.mode = 'edit';
-    },
-});
-
-const ApplicantChar = FieldChar.extend({
-    events: _.extend({}, FieldChar.prototype.events, {
-        'click': '_onClick',
-    }),
-
-    _onClick(ev) {
-        if (this.recordData['res_id'] !== undefined && this.recordData['res_model'] === 'hr.applicant') {
-            ev.stopPropagation();
-
-            this.do_action({
-                type: 'ir.actions.act_window',
-                res_model: 'hr.applicant',
-                res_id: this.recordData['res_id'],
-                views: [[false, "form"]],
-                view_mode: "form",
-                target: "current",
-            });
-        }
-    },
-
-    _renderReadonly() {
-        this._super(...arguments);
-        this.$el.addClass('o_hr_applicant_widget');
-    }
-});
-
-fieldRegistry
-    .add('recruitment_state_selection', RecruitmentStateSelectionWidget)
-    .add('applicant_char', ApplicantChar);
-
diff --git a/addons/hr_recruitment/static/src/scss/hr_applicant.scss b/addons/hr_recruitment/static/src/scss/hr_applicant.scss
index a41f67d9e6b..d3374aa932e 100644
--- a/addons/hr_recruitment/static/src/scss/hr_applicant.scss
+++ b/addons/hr_recruitment/static/src/scss/hr_applicant.scss
@@ -13,11 +13,3 @@
         }
     }
 }
-
-.o_hr_applicant_widget {
-    color: $link-color;
-
-    &:hover {
-        color: $link-hover-color;
-    }
-}