diff --git a/addons/hr_attendance/static/src/components/attendance_menu/attendance_menu.scss b/addons/hr_attendance/static/src/components/attendance_menu/attendance_menu.scss
index fe4b8c5445c..1b2f5fddd7e 100644
--- a/addons/hr_attendance/static/src/components/attendance_menu/attendance_menu.scss
+++ b/addons/hr_attendance/static/src/components/attendance_menu/attendance_menu.scss
@@ -1,32 +1,3 @@
 .att_container {
-  display: flex;
-  justify-content: normal;
-  align-items: flex-end;
-  min-width: 150px;
-  padding-left: 13px;
-}
-
-.o_hour_att {
-  margin-right: 10px;
-}
-
-.hour_label {
-  display: flex;
-  flex-direction: column;
-  .span{
-    line-height: 1;
-  }
-}
-
-.o_att_menu_container{
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  flex-wrap: wrap;
-  align-content: center;
-}
-
-.o_hr_attendance_systray_check_in_btn{
-  width: 150px;
-  height: 40px;
+    font-variant-numeric: tabular-nums;
 }
diff --git a/addons/hr_attendance/static/src/components/attendance_menu/attendance_menu.xml b/addons/hr_attendance/static/src/components/attendance_menu/attendance_menu.xml
index 86d1b54a46a..28f210449a8 100644
--- a/addons/hr_attendance/static/src/components/attendance_menu/attendance_menu.xml
+++ b/addons/hr_attendance/static/src/components/attendance_menu/attendance_menu.xml
@@ -3,58 +3,45 @@
 
 <t t-name="hr_attendance.attendance_menu" owl="1">
     <t t-if="this.state.isDisplayed">
-        <Dropdown position="'bottom-end'" beforeOpen.bind="searchReadEmployee" menuClass="`p-0 ${ ui.isSmall ? 'start-0 w-100 mh-100 bottom-0 d-flex flex-column' : ''}`">
-        <div class="d-flex flex-column flex-grow-1">
+        <Dropdown position="'bottom-end'" beforeOpen.bind="searchReadEmployee" menuClass="`p-2 pb-3`">
             <t t-set-slot="toggler">
-            <i t-attf-class="fa fa-circle text-{{ this.state.checkedIn ? 'success' : 'warning' }}" role="img" aria-label="Attendance"></i>
-        </t>
-        <t  t-set-slot="default">
-            <div class="o_att_menu_container m-1">
-                <button t-on-click="() => this.onClickSignInOut()" t-attf-class="o_hr_attendance_systray_check_in_btn btn btn-{{ this.state.checkedIn ? 'warning' : 'success' }} align-self-center">
-                    <span class="align-middle text-white" t-if="!this.state.checkedIn">Check IN</span>
-                    <i t-attf-class="fa fa-sign-{{ this.state.checkedIn ? 'out' : 'in' }} align-middle"/>
-                    <span class="align-middle" t-if="this.state.checkedIn">Check OUT</span>
-                </button>
-                <t t-if="this.state.checkedIn">
-                <div class="att_container">
-                    <div class="o_hour_att">
-                        <h2 t-esc="this.lastAttendanceWorkedHours"/>
-                    </div>
-                    <div class="hour_label">
-                        <span>Since</span>
-                        <span><t t-esc="this.lastCheckIn"/></span>
-                    </div>
-                </div>
-                    <t t-if="!this.isFirstAttendance">
-                        <div class="att_container">
-                          <div class="o_hour_att">
-                              <h2 t-esc="this.hoursPreviouslyToday"/>
-                          </div>
-                          <div class="hour_label">
-                            <span>Previously</span>
-                            <span>Today</span>
-                          </div>
+                <i class="fa fa-circle" t-attf-class="text-{{ this.state.checkedIn ? 'success' : 'danger' }}" role="img" aria-label="Attendance"/>
+            </t>
+            <t t-set-slot="default">
+                <div class="o_att_menu_container d-flex flex-column gap-4">
+                    <div class="d-flex flex-column gap-3">
+                        <div t-if="this.state.checkedIn" class="d-flex flex-wrap gap-3">
+                            <div t-if="!this.isFirstAttendance" class="att_container flex-grow-1 flex-shrink-0">
+                                <small class="d-block text-muted">Before <t t-esc="this.lastCheckIn"/></small>
+                                <div t-esc="this.hoursPreviouslyToday" class="fs-3 text-info text-end"/>
+                            </div>
+                            <div class="att_container flex-grow-1 flex-shrink-0">
+                                <small class="d-block text-muted">Since <t t-esc="this.lastCheckIn"/></small>
+                                <div t-esc="this.lastAttendanceWorkedHours" t-attf-class="fs-3 text-info {{ !this.isFirstAttendance ? 'text-end' : '' }}"/>
+                            </div>
+                        </div>
+                        <div t-if="!this.isFirstAttendance"
+                            class="att_container d-flex flex-column"
+                            t-att-class="this.state.checkedIn ? 'p-3 bg-100 rounded' : ''">
+                            <div class="d-flex" t-att-class="this.state.checkedIn ? 'align-items-center justify-content-between' : 'flex-column'">
+                                <small class="text-muted">Total today</small>
+                                <h2 t-esc="this.hoursToday" class="mb-0 fs-2"/>
+                            </div>
+                            <button t-on-click="() => this.onClickSignInOut()" class="flex-basis-100 mt-3" t-attf-class="btn btn-{{ this.state.checkedIn ? 'warning' : 'success' }}">
+                                <span t-if="!this.state.checkedIn">Check in</span>
+                                <span t-else="">Check out</span>
+                                <i t-attf-class="fa fa-sign-{{ this.state.checkedIn ? 'out' : 'in' }} ms-1"/>
+                            </button>
                         </div>
-                    </t>
-                </t>
-                <t t-if="!this.isFirstAttendance">
-                    <t t-if="this.state.checkedIn">
-                        <div class="att_container" style="border-top: 2px solid #dee2e6;"/>
-                    </t>
-                    <div class="att_container">
-                      <div class="o_hour_att">
-                          <h2 t-esc="this.hoursToday"/>
-                      </div>
-                      <div class="hour_label">
-                        <span>Hours</span>
-                        <span>Today</span>
-                      </div>
                     </div>
-                </t>
-            </div>
-        </t>
-        </div>
-    </Dropdown>
+                    <button t-if="this.isFirstAttendance" t-on-click="() => this.onClickSignInOut()" t-attf-class="btn btn-{{ this.state.checkedIn ? 'warning' : 'success' }}">
+                        <span t-if="!this.state.checkedIn">Check in</span>
+                        <span t-else="">Check out</span>
+                        <i t-attf-class="fa fa-sign-{{ this.state.checkedIn ? 'out' : 'in' }} ms-1"/>
+                    </button>
+                </div>
+            </t>
+        </Dropdown>
     </t>
 </t>