diff --git a/addons/web/static/src/core/datetime/datetime_picker.scss b/addons/web/static/src/core/datetime/datetime_picker.scss
index 2930312881e..b380df726ab 100644
--- a/addons/web/static/src/core/datetime/datetime_picker.scss
+++ b/addons/web/static/src/core/datetime/datetime_picker.scss
@@ -6,7 +6,6 @@
     --DateTimePicker__Day-template-rows: 6;
 
     // Header
-
     .o_datetime_picker_header .o_header_part {
         text-transform: none;
     }
diff --git a/addons/web/static/src/core/datetime/datetime_picker.xml b/addons/web/static/src/core/datetime/datetime_picker.xml
index 8f9496d7b03..0ea77720c05 100644
--- a/addons/web/static/src/core/datetime/datetime_picker.xml
+++ b/addons/web/static/src/core/datetime/datetime_picker.xml
@@ -136,33 +136,35 @@
 
     <t t-name="web.DateTimePicker">
         <div
-            class="o_datetime_picker d-flex flex-column gap-1 user-select-none"
+            class="o_datetime_picker d-flex flex-column gap-2 p-2 p-lg-3 user-select-none"
             t-attf-style="--DateTimePicker__Day-template-columns: {{ props.showWeekNumbers ?? !props.range ? 8 : 7 }}"
         >
-            <nav class="o_datetime_picker_header d-flex align-items-center justify-content-between">
+            <nav class="o_datetime_picker_header btn-group">
+                <button class="o_previous btn btn-light flex-grow-0"
+                        t-att-class="isLastPrecisionLevel ? 'order-1 btn-sm px-1' : ''" t-on-click="previous">
+                    <i class="oi oi-chevron-left" t-att-title="activePrecisionLevel.prevTitle" />
+                </button>
                 <button
-                    class="o_zoom_out o_datetime_button btn btn-light btn-sm px-1 text-truncate"
-                    t-att-class="isLastPrecisionLevel ? 'pe-none' : ''"
+                    class="o_zoom_out o_datetime_button btn btn-light d-flex align-items-center px-0 text-truncate"
+                    t-att-class="isLastPrecisionLevel ? 'pe-none text-start' : 'justify-content-around'"
                     t-att-title="!isLastPrecisionLevel and activePrecisionLevel.mainTitle"
                     t-on-click="zoomOut"
                 >
                     <t t-foreach="titles" t-as="title" t-key="title">
                         <strong
-                            t-attf-class="o_header_part fs-6 {{
-                                props.range ? 'flex-basis-50' : 'flex-basis-100'
+                            t-attf-class="o_header_part fs-5 {{
+                                props.range ? 'flex-basis-50' : 'flex-basis-100',
+                                isLastPrecisionLevel ? 'fs-6' : 'fs-5'
                             }}"
                             t-esc="title"
                         />
                     </t>
                 </button>
-                <div class="btn-group btn-group-sm">
-                    <button class="o_previous btn btn-light btn-sm flex-grow-0 px-1" t-on-click="previous">
-                        <i class="oi oi-chevron-left" t-att-title="activePrecisionLevel.prevTitle" />
-                    </button>
-                    <button class="o_next btn btn-light flex-grow-0 px-1" t-on-click="next">
-                        <i class="oi oi-chevron-right" t-att-title="activePrecisionLevel.nextTitle" />
-                    </button>
-                </div>
+                <button class="o_next btn btn-light flex-grow-0"
+                        t-att-class="isLastPrecisionLevel ? 'order-2 btn-sm px-1' : ''"
+                        t-on-click="next">
+                    <i class="oi oi-chevron-right" t-att-title="activePrecisionLevel.nextTitle" />
+                </button>
             </nav>
             <t t-if="state.precision === 'days'">
                 <t t-call="web.DateTimePicker.Days" />