diff --git a/addons/web/static/src/views/calendar/calendar_controller.scss b/addons/web/static/src/views/calendar/calendar_controller.scss
index af66402b284..53674ad6e43 100644
--- a/addons/web/static/src/views/calendar/calendar_controller.scss
+++ b/addons/web/static/src/views/calendar/calendar_controller.scss
@@ -15,7 +15,7 @@ $o-cw-filter-avatar-size: 20px;
 .o_calendar_container {
     grid-template-columns: auto minmax(auto, 210px);
 
-    @include media-breakpoint-up(xl){
+    @include media-breakpoint-up(md){
         grid-template: auto 1fr / 1fr auto;
         grid-template-areas:
             "head head"
diff --git a/addons/web/static/src/views/calendar/calendar_controller.xml b/addons/web/static/src/views/calendar/calendar_controller.xml
index 593ffe6b309..7b49e581842 100644
--- a/addons/web/static/src/views/calendar/calendar_controller.xml
+++ b/addons/web/static/src/views/calendar/calendar_controller.xml
@@ -16,8 +16,8 @@
                 <t t-set-slot="control-panel-navigation-additional">
                     <t t-component="searchBarToggler.component" t-props="searchBarToggler.props"/>
                 </t>
-                <div class="o_calendar_container d-flex d-lg-grid flex-column h-100 bg-view">
-                    <div class="o_calendar_header d-flex align-items-center gap-1 p-2 border-bottom">
+                <div class="o_calendar_container d-flex d-md-grid flex-column h-100 bg-view">
+                    <div class="o_calendar_header d-flex align-items-center gap-1 px-3 py-2 border-bottom">
                         <div t-if="!env.isSmall" class="o_calendar_navigation_buttons btn-group">
                             <button
                                 class="o_calendar_button_prev btn btn-secondary d-none d-md-block"
@@ -54,7 +54,7 @@
                                 <t t-esc="dayHeader" />
                             </t>
                         </h5>
-                        <button class="btn btn-light d-none d-lg-block oi oi-panel-right ms-auto collapsed" t-on-click="toggleSideBar"/>
+                        <button class="btn btn-light d-none d-md-block order-4 oi oi-panel-right ms-lg-auto collapsed lh-base" t-on-click="toggleSideBar"/>
                     </div>
                     <MobileFilterPanel t-if="env.isSmall" t-props="mobileFilterPanelProps" />
                     <t t-if="showCalendar" t-component="props.Renderer" t-props="rendererProps" />