diff --git a/addons/calendar/__manifest__.py b/addons/calendar/__manifest__.py
index 7dc25886644..d2d6c298eae 100644
--- a/addons/calendar/__manifest__.py
+++ b/addons/calendar/__manifest__.py
@@ -47,7 +47,7 @@ If you need to manage your meetings, you should install the CRM module.
             'calendar/static/src/js/base_calendar.js',
             'calendar/static/src/js/services/calendar_notification_service.js',
             'calendar/static/src/views/**/*',
-            'calendar/static/src/components/*/*.xml',
+            'calendar/static/src/components/**/*',
         ],
         'web.qunit_suite_tests': [
             'calendar/static/tests/**/*',
diff --git a/addons/calendar/static/src/views/calendar_provider_config_form_renderer.js b/addons/calendar/static/src/components/calendar_provider_config/calendar_connect_provider.js
similarity index 82%
rename from addons/calendar/static/src/views/calendar_provider_config_form_renderer.js
rename to addons/calendar/static/src/components/calendar_provider_config/calendar_connect_provider.js
index 97e25a03231..ac237693eea 100644
--- a/addons/calendar/static/src/views/calendar_provider_config_form_renderer.js
+++ b/addons/calendar/static/src/components/calendar_provider_config/calendar_connect_provider.js
@@ -1,9 +1,11 @@
 /** @odoo-module **/
 
-import { FormRenderer } from "@web/views/form/form_renderer";
+import { registry } from '@web/core/registry';
 import { session } from "@web/session";
+import { standardWidgetProps } from "@web/views/widgets/standard_widget_props";
 import { useService } from "@web/core/utils/hooks";
 
+const { Component } = owl;
 const providerData = {
     'google': {
         'restart_sync_method': 'restart_google_synchronization',
@@ -16,7 +18,7 @@ const providerData = {
 }
 
 
-export class CalendarProviderConfigFormRenderer extends FormRenderer {
+export class CalendarConnectProvider extends Component {
     setup() {
         super.setup();
         this.orm = useService('orm');
@@ -69,3 +71,9 @@ export class CalendarProviderConfigFormRenderer extends FormRenderer {
         return Promise.resolve();
     }
 }
+CalendarConnectProvider.props = {
+    ...standardWidgetProps,
+};
+CalendarConnectProvider.template = 'calendar.CalendarConnectProvider';
+
+registry.category("view_widgets").add("calendar_connect_provider", CalendarConnectProvider);
diff --git a/addons/calendar/static/src/components/calendar_provider_config/calendar_connect_provider.xml b/addons/calendar/static/src/components/calendar_provider_config/calendar_connect_provider.xml
new file mode 100644
index 00000000000..310e9c5409e
--- /dev/null
+++ b/addons/calendar/static/src/components/calendar_provider_config/calendar_connect_provider.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+    <t t-name="calendar.CalendarConnectProvider" owl="1">
+        <a role="button" title="Connect" class="o_calendar_activate_external_cal btn btn-primary"
+            t-on-click="onConnect">Connect</a>
+    </t>
+</templates>
diff --git a/addons/calendar/static/src/views/calendar_provider_config_form_view.js b/addons/calendar/static/src/views/calendar_provider_config_form_view.js
deleted file mode 100644
index bca8bfbf241..00000000000
--- a/addons/calendar/static/src/views/calendar_provider_config_form_view.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/** @odoo-module **/
-
-import { registry } from "@web/core/registry";
-import { formView } from "@web/views/form/form_view";
-import { CalendarProviderConfigFormRenderer } from "./calendar_provider_config_form_renderer";
-
-
-export const CalendarProviderConfigFormView = {
-    ...formView,
-    Renderer: CalendarProviderConfigFormRenderer,
-};
-
-registry.category("views").add("calendar_provider_config_form", CalendarProviderConfigFormView);
diff --git a/addons/calendar/wizard/calendar_provider_config.xml b/addons/calendar/wizard/calendar_provider_config.xml
index 62a9fdf7ea1..e6296b33303 100644
--- a/addons/calendar/wizard/calendar_provider_config.xml
+++ b/addons/calendar/wizard/calendar_provider_config.xml
@@ -4,7 +4,7 @@
         <field name="name">calendar.provider.config.view.form</field>
         <field name="model">calendar.provider.config</field>
         <field name="arch" type="xml">
-            <form js_class="calendar_provider_config_form">
+            <form>
                 <field name="external_calendar_provider" widget="radio" options="{'horizontal': true}"/>
                 <div attrs="{'invisible': [('external_calendar_provider', '!=', 'google')]}">
                     <img alt="Google Calendar icon" src="/calendar/static/src/img/google_calendar_40.png" style="height: 40px; margin-right: 5px"/>
@@ -31,7 +31,7 @@
                     </group>
                 </div>
                 <footer>
-                    <a role="button" title="Connect" class="o_calendar_activate_external_cal btn btn-primary" t-on-click="onConnect">Connect</a>
+                    <widget name="calendar_connect_provider"/>
                     <button string="Cancel" class="btn btn-secondary" special="cancel"/>
                 </footer>
             </form>