diff --git a/addons/calendar/static/src/views/attendee_calendar/attendee_calendar_controller.xml b/addons/calendar/static/src/views/attendee_calendar/attendee_calendar_controller.xml
index e4c6d8caf7f..4bdeffb6100 100644
--- a/addons/calendar/static/src/views/attendee_calendar/attendee_calendar_controller.xml
+++ b/addons/calendar/static/src/views/attendee_calendar/attendee_calendar_controller.xml
@@ -4,17 +4,17 @@
         <DatePicker position="after">
             <div id="calendar_sync_wrapper" t-if="isSystemUser">
                 <div id="calendar_sync_title" class="o_calendar_sync text-center">
-                    <span class="text-primary fs-6">Synchronize with:</span>
+                    <span>Synchronize with:</span>
                 </div>
-                <div id="calendar_sync" class="container inline btn-group justify-content-evenly align-items-center">
+                <div id="calendar_sync" class="container btn-group justify-content-center align-items-center gap-2">
                     <div id="google_calendar_sync" class="o_calendar_sync" t-if="isSystemUser">
-                        <button type="button" id="google_sync_activate" class="btn btn-muted" t-on-click="() => this.configureCalendarProviderSync('google')">
-                            <b><i class='fa fa-plug'/> Google</b>
+                        <button type="button" id="google_sync_activate" class="btn btn-light" t-on-click="() => this.configureCalendarProviderSync('google')">
+                            <b><i class='fa fa-plug fa-fw'/> Google</b>
                         </button>
                     </div>
                     <div id="microsoft_calendar_sync" class="o_calendar_sync" t-if="isSystemUser">
-                        <button type="button" id="microsoft_sync_activate" class="btn btn-muted" t-on-click="() => this.configureCalendarProviderSync('microsoft')">
-                            <b><i class='fa fa-plug'/> Outlook</b>
+                        <button type="button" id="microsoft_sync_activate" class="btn btn-light" t-on-click="() => this.configureCalendarProviderSync('microsoft')">
+                            <b><i class='fa fa-plug fa-fw'/> Outlook</b>
                         </button>
                     </div>
                 </div>
diff --git a/addons/google_calendar/static/src/scss/google_calendar.scss b/addons/google_calendar/static/src/scss/google_calendar.scss
index 53a844f70ea..e27a979fffd 100644
--- a/addons/google_calendar/static/src/scss/google_calendar.scss
+++ b/addons/google_calendar/static/src/scss/google_calendar.scss
@@ -1,17 +1,10 @@
-.o_calendar_sidebar {
-    .o_google_sync_button_configured {
-        color: white;
-        height: 2em;
+.o_calendar_sidebar .o_google_sync_button_configured {
 
-        &:hover {
-            #google_check {
-                display: none;
-            }
-        }
-        &:not(:hover) {
-            #google_stop {
-                display: none;
-            }
-        }
+    &:hover #google_check {
+        display: none;
+    }
+
+    &:not(:hover) #google_stop {
+        display: none;
     }
 }
diff --git a/addons/google_calendar/static/src/views/google_calendar/google_calendar_controller.xml b/addons/google_calendar/static/src/views/google_calendar/google_calendar_controller.xml
index d3bb0b13e28..9bd810a9cdb 100644
--- a/addons/google_calendar/static/src/views/google_calendar/google_calendar_controller.xml
+++ b/addons/google_calendar/static/src/views/google_calendar/google_calendar_controller.xml
@@ -6,16 +6,16 @@
         </xpath>
         <xpath expr="//div[@id='google_calendar_sync']" position="replace">
             <div id="google_calendar_sync" class="o_calendar_sync">
-                <button t-if="!model.googleIsSync" type="button" id="google_sync_pending" class="o_google_sync_button o_google_sync_pending btn btn-secondary btn" t-on-click="onGoogleSyncCalendar">
+                <button t-if="!model.googleIsSync" type="button" id="google_sync_pending" class="o_google_sync_button o_google_sync_pending btn btn-secondary text-nowrap" t-on-click="onGoogleSyncCalendar">
                     <b><i class='fa fa-refresh'/> Google</b>
                 </button>
                 <!-- class change on hover -->
-                <button t-else="" type="button" id="google_sync_configured" class="me-1 o_google_sync_button o_google_sync_button_configured btn text-bg-primary" t-on-click="onStopGoogleSynchronization"
-                    t-on-mouseenter="(ev) => {ev.target.classList.remove('text-bg-primary');ev.target.classList.add('text-bg-danger');}"
-                    t-on-mouseleave="(ev) => {ev.target.classList.remove('text-bg-danger');ev.target.classList.add('text-bg-primary');}">
+                <button t-else="" type="button" id="google_sync_configured" class="me-1 o_google_sync_button o_google_sync_button_configured btn btn-outline-primary" t-on-click="onStopGoogleSynchronization"
+                    t-on-mouseenter="(ev) => {ev.target.classList.remove('btn-outline-primary');ev.target.classList.add('btn-danger');}"
+                    t-on-mouseleave="(ev) => {ev.target.classList.remove('btn-danger');ev.target.classList.add('btn-outline-primary');}">
                     <b>
-                        <i id="google_check" class='fa fa-check'/>
-                        <i id="google_stop" class='fa fa-times'/>
+                        <i id="google_check" class='fa fa-check fa-fw'/>
+                        <i id="google_stop" class='fa fa-times fa-fw'/>
                         <span class="mx-1">Google</span>
                     </b>
                 </button>
diff --git a/addons/microsoft_calendar/static/src/scss/microsoft_calendar.scss b/addons/microsoft_calendar/static/src/scss/microsoft_calendar.scss
index c5080d791f4..3bce64cf081 100644
--- a/addons/microsoft_calendar/static/src/scss/microsoft_calendar.scss
+++ b/addons/microsoft_calendar/static/src/scss/microsoft_calendar.scss
@@ -1,20 +1,10 @@
-.o_calendar_sidebar {
-    .bg-primary {
-        background-color: $o-enterprise-action-color;
-    }
-    .o_microsoft_sync_button_configured {
-        color: white;
-        height: 2em;
+.o_calendar_sidebar .o_microsoft_sync_button_configured {
 
-        &:hover {
-            #microsoft_check {
-                display: none;
-            }
-        }
-        &:not(:hover) {
-            #microsoft_stop {
-                display: none;
-            }
-        }
+    &:hover #microsoft_check {
+        display: none;
+    }
+
+    &:not(:hover) #microsoft_stop {
+        display: none;
     }
 }
diff --git a/addons/microsoft_calendar/static/src/views/microsoft_calendar/microsoft_calendar_controller.xml b/addons/microsoft_calendar/static/src/views/microsoft_calendar/microsoft_calendar_controller.xml
index 87917413dde..ed6bc900727 100644
--- a/addons/microsoft_calendar/static/src/views/microsoft_calendar/microsoft_calendar_controller.xml
+++ b/addons/microsoft_calendar/static/src/views/microsoft_calendar/microsoft_calendar_controller.xml
@@ -6,16 +6,16 @@
         </xpath>
         <xpath expr="//div[@id='microsoft_calendar_sync']" position="replace">
             <div id="microsoft_calendar_sync" class="o_calendar_sync">
-                <button t-if="!model.microsoftIsSync" type="button" id="microsoft_sync_pending" class="o_microsoft_sync_button o_microsoft_sync_pending btn btn-secondary btn" t-on-click="onMicrosoftSyncCalendar">
+                <button t-if="!model.microsoftIsSync" type="button" id="microsoft_sync_pending" class="o_microsoft_sync_button o_microsoft_sync_pending btn btn-secondary text-nowrap" t-on-click="onMicrosoftSyncCalendar">
                     <b><i class='fa fa-refresh'/> Outlook</b>
                 </button>
                 <!-- class change on hover -->
-                <button t-else="" type="button" id="microsoft_sync_configured" class="me-1 o_microsoft_sync_button o_microsoft_sync_button_configured btn text-bg-primary" t-on-click="onStopMicrosoftSynchronization"
-                    t-on-mouseenter="(ev) => {ev.target.classList.remove('text-bg-primary');ev.target.classList.add('text-bg-danger');}"
-                    t-on-mouseleave="(ev) => {ev.target.classList.remove('text-bg-danger');ev.target.classList.add('text-bg-primary');}">
+                <button t-else="" type="button" id="microsoft_sync_configured" class="me-1 o_microsoft_sync_button o_microsoft_sync_button_configured btn btn-outline-primary" t-on-click="onStopMicrosoftSynchronization"
+                    t-on-mouseenter="(ev) => {ev.target.classList.remove('btn-outline-primary');ev.target.classList.add('text-bg-danger');}"
+                    t-on-mouseleave="(ev) => {ev.target.classList.remove('text-bg-danger');ev.target.classList.add('btn-outline-primary');}">
                     <b>
-                        <i id="microsoft_check" class='fa fa-check'/>
-                        <i id="microsoft_stop" class='fa fa-times'/>
+                        <i id="microsoft_check" class='fa fa-check fa-fw'/>
+                        <i id="microsoft_stop" class='fa fa-times fa-fw'/>
                         <span class="mx-1">Outlook</span>
                     </b>
                 </button>
diff --git a/addons/web/static/src/views/calendar/calendar_controller.scss b/addons/web/static/src/views/calendar/calendar_controller.scss
index 6264b7540d2..63fed29e6dd 100644
--- a/addons/web/static/src/views/calendar/calendar_controller.scss
+++ b/addons/web/static/src/views/calendar/calendar_controller.scss
@@ -34,7 +34,7 @@ $o-cw-filter-avatar-size: 20px;
         }
         // sync buttons are only displayed on calendar.event views
         .o_calendar_sync {
-            padding-top: 0.5em;
+            padding-bottom: 0.5em;
         }
     }