diff --git a/account_reconciliation_widget/__manifest__.py b/account_reconciliation_widget/__manifest__.py
index b2384249..311978b9 100644
--- a/account_reconciliation_widget/__manifest__.py
+++ b/account_reconciliation_widget/__manifest__.py
@@ -19,7 +19,7 @@
     "assets": {
         "web.assets_backend": [
             "account_reconciliation_widget/static/src/scss/account_reconciliation.scss",
-            "account_reconciliation_widget/static/src/js/reconciliation**/*",
+            "account_reconciliation_widget/static/src/js/reconciliation/**/*",
         ],
         "web.qunit_suite_tests": [
             "account_reconciliation_widget/static/tests/**/*",
diff --git a/account_reconciliation_widget/static/src/js/reconciliation/reconciliation_rainbowman_component.js b/account_reconciliation_widget/static/src/js/reconciliation/reconciliation_rainbowman_component.js
new file mode 100644
index 00000000..9057ca3f
--- /dev/null
+++ b/account_reconciliation_widget/static/src/js/reconciliation/reconciliation_rainbowman_component.js
@@ -0,0 +1,6 @@
+/** @odoo-module */
+
+const {Component} = owl;
+
+class ReconciliationRainbowManComponent extends Component {}
+ReconciliationRainbowManComponent.template = "reconciliation.done";
diff --git a/account_reconciliation_widget/static/src/js/reconciliation/reconciliation_renderer.js b/account_reconciliation_widget/static/src/js/reconciliation/reconciliation_renderer.js
index 8133818d..a00c1ca1 100644
--- a/account_reconciliation_widget/static/src/js/reconciliation/reconciliation_renderer.js
+++ b/account_reconciliation_widget/static/src/js/reconciliation/reconciliation_renderer.js
@@ -11,6 +11,11 @@ odoo.define("account.ReconciliationRenderer", function (require) {
     var qweb = core.qweb;
     var _t = core._t;
 
+    const {sprintf} = require("@web/core/utils/strings");
+    const {
+        ReconciliationRainbowManComponent,
+    } = require("@account_reconciliation_widget/js/reconciliation/reconciliation_rainbowman_component");
+
     /**
      * Rendering of the bank statement action contains progress bar, title and
      * auto reconciliation button
@@ -59,33 +64,38 @@ odoo.define("account.ReconciliationRenderer", function (require) {
             if (this.model.display_context !== "validate") {
                 return;
             }
-            var dt = Date.now() - this.time;
-            var $done = $(
-                qweb.render("reconciliation.done", {
-                    duration: moment(dt).utc().format(time.getLangTimeFormat()),
-                    number: state.valuenow,
-                    timePerTransaction: Math.round(dt / 1000 / state.valuemax),
-                    context: state.context,
-                })
-            );
-            $done.find("*").addClass("o_reward_subcontent");
-            $done
-                .find(".button_close_statement")
-                .click(this._onCloseBankStatement.bind(this));
-            $done
-                .find(".button_back_to_statement")
-                .click(this._onGoToBankStatement.bind(this));
-            // Display rainbowman after full reconciliation
-            if (session.show_effect) {
-                this.trigger_up("show_effect", {
-                    type: "rainbow_man",
-                    fadeout: "no",
-                    message: $done,
-                });
-                this.$el.css("min-height", "450px");
-            } else {
-                $done.appendTo(this.$el);
-            }
+
+            const dt = Date.now() - this.time;
+            const duration = moment(dt).utc().format(time.getLangTimeFormat());
+            const number = state.valuenow;
+            const timePerTransaction = Math.round(dt / 1000 / state.valuemax);
+
+            this.trigger_up("show_effect", {
+                type: "rainbow_man",
+                fadeout: "no",
+                props: {
+                    Component: ReconciliationRainbowManComponent,
+                    props: {
+                        duration: duration,
+                        number: number,
+                        timePerTransaction: timePerTransaction,
+                        context: state.context,
+                        bank_statement_id: state.bank_statement_id,
+                        onButtonBackToStatementClicked: (journalId) =>
+                            this._onGoToBankStatement(journalId),
+                        onButtonCloseStatementClicked: () =>
+                            this._onCloseBankStatement(),
+                    },
+                },
+                message: sprintf(
+                    _t(
+                        `Congrats, you're all done! You reconciled %s transactions in %s. That's on average %s seconds per transaction.`
+                    ),
+                    number,
+                    duration,
+                    timePerTransaction
+                ),
+            });
         },
         /**
          * Update the statement rendering
@@ -191,12 +201,7 @@ odoo.define("account.ReconciliationRenderer", function (require) {
          * @private
          * @param {MouseEvent} event
          */
-        _onGoToBankStatement: function (e) {
-            var journalId = $(e.target).attr("data_journal_id");
-            if (journalId) {
-                journalId = parseInt(journalId);
-            }
-            $(".o_reward").remove();
+        _onGoToBankStatement: function (journalId) {
             this.do_action({
                 name: "Bank Statements",
                 res_model: "account.bank.statement",
diff --git a/account_reconciliation_widget/static/src/xml/account_reconciliation.xml b/account_reconciliation_widget/static/src/xml/account_reconciliation.xml
index 96a7c82e..821444ff 100644
--- a/account_reconciliation_widget/static/src/xml/account_reconciliation.xml
+++ b/account_reconciliation_widget/static/src/xml/account_reconciliation.xml
@@ -89,30 +89,33 @@
     </t>
 </t>
 
-<div t-name="reconciliation.done" class="done_message">
+<div t-name="reconciliation.done" class="done_message" owl="1">
     <h2>Congrats, you're all done!</h2>
-    <p>You reconciled <strong><t t-esc="number" /></strong> transactions in <strong><t
-                    t-esc="duration"
+    <p>You reconciled <strong><t
+                    t-esc="props.number"
+                /></strong> transactions in <strong><t
+                    t-esc="props.duration"
                 /></strong>.
-        <t t-if="number > 1">
+        <t t-if="props.number > 1">
             <br />That's on average <t
-                    t-esc="timePerTransaction"
+                    t-esc="props.timePerTransaction"
                 /> seconds per transaction.
         </t>
     </p>
-    <t t-if="context &amp;&amp; context.active_model">
+    <t t-if="props.context &amp;&amp; props.context.active_model">
         <p
-                t-if="context['active_model'] === 'account.journal' || context['active_model'] === 'account.bank.statement' || context['active_model'] === 'account.bank.statement.import'"
+                t-if="props.context['active_model'] === 'account.journal' || props.context['active_model'] === 'account.bank.statement' || props.context['active_model'] === 'account.bank.statement.import'"
                 class="actions_buttons"
             >
-            <t t-if="context.journal_id">
+            <t t-if="props.context.journal_id">
                 <button
+                        t-on-click="props.onButtonBackToStatementClicked(props.context.journal_id)"
                         class="button_back_to_statement btn btn-secondary"
-                        t-att-data_journal_id='context.journal_id'
                     >Go to bank statement(s)</button>
             </t>
-            <t t-if="context['active_model'] === 'account.bank.statement'">
+            <t t-if="props.bank_statement_id">
                 <button
+                        t-on-click="props.onButtonCloseStatementClicked"
                         class="button_close_statement btn btn-primary"
                         style="display: inline-block;"
                     >Close statement</button>