diff --git a/addons/hr_attendance/static/src/scss/hr_attendance.scss b/addons/hr_attendance/static/src/scss/hr_attendance.scss
index 6a8804c4ea3..495bea84a5c 100644
--- a/addons/hr_attendance/static/src/scss/hr_attendance.scss
+++ b/addons/hr_attendance/static/src/scss/hr_attendance.scss
@@ -1,229 +1,34 @@
 
-.o_kanban_view #oe_hr_attendance_status {
-    margin-right: .3em;
-}
-
-#oe_hr_attendance_status {
-    color: $o-brand-secondary;
-    &.oe_hr_attendance_status_green {
-        color: theme-color('success');
+.o_hr_attendance_kiosk_mode, .o_hr_attendance_clock {
+    @include media-breakpoint-down(sm) {
+        width: 100%;
     }
-    &.oe_hr_attendance_status_orange {
-        color: theme-color('warning');
-    }
-}
-
-.o_hr_attendance_kiosk_backdrop {
-    @include o-position-absolute(0,0,0,0);
-    background-color: fade-out(black, 0.7);
 }
 
 .o_hr_attendance_clock {
-    display: none;
     position: relative;
-    width: 100%;
-    padding: 0.5em;
-    background-color: fade-out(black, 0.7);
-    font: normal 1.2em $font-family-monospace;
-    color: white;
+    display: none;
 
     @include media-breakpoint-up(md) {
-        @include o-position-absolute(20px, 20px);
-        width: auto;
-        padding: 3px 10px 3px 10px;
-        border-radius: 3px;
-        font-size: 1.5em;
-    }
-}
-
-.o_hr_attendance_kiosk_mode_container {
-    display: flex;
-    flex-flow: column nowrap;
-    justify-content: flex-start;
-    align-items: center;
-    @include o-position-absolute(0, 0, 0, 0);
-
-    @include media-breakpoint-up(md) {
-        justify-content: center;
+        @include o-position-absolute(0, 0); // Fine-tuned by margin classes
     }
 }
 
 .o_hr_attendance_kiosk_mode {
-    width: 100%;
-    text-align: center;
-    position: relative;
-    background-color: fade-out(white, 0.1);
-    &.o_barcode_main {
-        font-family: 'Lato', sans-serif;
-        width: 100%;
-        text-align: center;
-        background-color: #fff;
-        padding: 3em;
-        img {
-            width: 115px;
-            height: 60px;
-        }
-        .o_hr_attendance_kiosk_welcome_row img {
-            max-width: inherit;
-        }
-        @include media-breakpoint-down(sm) {
-            h2 {
-                margin-left: -10px;
-                margin-right: -10px;
-            }
-        }
-    }
-
-    @include media-breakpoint-down(sm) {
-        overflow: hidden;
-        padding: 0 2em 2em;
-        flex: 1 0 auto;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-    }
-
     @include media-breakpoint-up(md) {
-        padding: 2em 4em;
-        width: auto;
-        max-width: 550px;
-        width: 100%;
-        border-radius: 0.2em;
-        font-size: 1.2em;
-        animation: fadeInDownSmall .3s;
-    }
+        min-width: map-get($grid-breakpoints, 'md') * .6;
 
-    .o_hr_attendance_kiosk_welcome_row {
-        @include media-breakpoint-up(md) {
-            display: flex;
-            align-items: center;
-        }
-
-        img {
-            max-width: 80px;
+        .o_hr_attendance_user_badge {
+            @include o-position-absolute(auto, $border-width * -1, 100%, $border-width * -1); // Compensate card's border
         }
     }
 
-    .o_hr_attendance_sign_in_out_icon {
-        cursor: pointer;
-        margin: 0.1em 0 0.1em;
-        padding: 0.15em 0.3em;
-        border-radius: .1em;
-        box-shadow: inset 0 -3px 0 fade-out(black, 0.7);
-
-        &.btn-secondary:hover {
-            color: $o-brand-primary;
-        }
+    .o_hr_attendance_back_button_md {
+        aspect-ratio: 1;
+        transform: translate(-50%, -50%); // Once migrate to BS5, can be replaced by 'translate-middle' class.
     }
 
-    .o_hr_attendance_back_button {
-        .visible-xs{
-            background: gray('200');
-            margin: 0 -2em;
-            .fa {
-                @include o-position-absolute(0.75em);
-                margin-left: -1.5em
-            }
-        }
-
-        .d-none.d-md-inline-block.btn-secondary {
-            transform: translate(-50%, -50%);
-            @include o-position-absolute(0, $left:0);
-            width: 2em;
-            height: 2em;
-            border-radius: 50%;
-            padding-left: 14px;
-            line-height: 1.5em;
-            text-align: left;
-            color: $body-color;
-            font-size: 1.6em;
-            z-index: 1;
-            box-shadow: inset 0 0 0 1px fade-out(black, 0.8);
-        }
-    }
-
-    .btn-secondary{
-        box-shadow: inset 0 0 0 1px fade-out(black, 0.9);
-        color: $headings-color;
-    }
-
-    .o_hr_attendance_user_badge {
-        background: linear-gradient(to right bottom, #77717e, #c9a8a9);
-
-        img {
-            width: 50px;
-            height: 50px;
-            background: white;
-            border: 1px solid #d7d7d7;
-        }
-
-        @include media-breakpoint-down(sm) {
-            margin: 1em -2em 0;
-            background: transparent;
-        }
-
-        @include media-breakpoint-up(md) {
-            margin: 0;
-            height: 90px;
-            border-radius: .2em .2em 0 0;
-            border-top: 1px solid fade-out(white, 0.8);
-            @include o-position-absolute(auto, 0, 100%, 0);
-            transform: translateY(3px);
-
-            img {
-                width: 80px;
-                height: 80px;
-                transform: translateX(-50%)translateY(35%);
-                @include o-position-absolute($bottom: 0);
-            }
-        }
-
-        + h1 {
-            margin-top: .4em;
-        }
-    }
-
-    .o_hr_attendance_pin_pad [class*="col-"] {
-        padding: 4px;
-
-        .o_hr_attendance_PINbox {
-            font-size: 2em;
-            border: none;
-            padding: 0 $input-btn-padding-x-lg;
-            background: fade-out(white, 0.6);
-        }
-    }
-
-    .o_hr_attendance_random_message {
-        font-style: italic;
-    }
-
-    .message_demo_barcodes {
-        font-size: 0.9em;
-        margin: 0;
-    }
-
-    img.o_hr_attendance_kiosk_company_image {
-        overflow:hidden; // prevent margins colapsing with h1
-        margin: 1rem 0 2rem;
-        width: 200px;
-        height: auto;
-    }
-
-    p {
-        text-align: left;
-        margin: 3rem 0;
-    }
-
-    > button {
-        font-size: 1.2em;
-        margin-bottom: 2rem;
-        width: 100%;
-        font-weight: 400;
-
-        &:last-child {
-            margin-bottom: 0;
-        }
+    .o_hr_attendance_PINbox_button {
+        aspect-ratio: 1.8;
     }
 }
diff --git a/addons/hr_attendance/static/src/xml/attendance.xml b/addons/hr_attendance/static/src/xml/attendance.xml
index 00b6356bd13..45dee404d85 100644
--- a/addons/hr_attendance/static/src/xml/attendance.xml
+++ b/addons/hr_attendance/static/src/xml/attendance.xml
@@ -1,152 +1,201 @@
 <?xml version="1.0" encoding="utf-8"?>
 <template xml:space="preserve">
     <t t-name="PresenceIndicator">
-        <div id="oe_hr_attendance_status" class="fa fa-circle" role="img" aria-label="Available" title="Available">
+        <div id="oe_hr_attendance_status" class="fa fa-circle me-1 text-400 " role="img" aria-label="Available" title="Available">
         </div>
     </t>
 
+    <t t-name="HrAttendanceCardLayout">
+        <div class="o_hr_attendance_kiosk_mode_container o_home_menu_background d-flex flex-column align-items-center justify-content-center h-100 text-center">
+            <span class="o_hr_attendance_kiosk_backdrop position-absolute top-0 start-0 end-0 bottom-0 bg-black-25"/>
+            <div class="o_hr_attendance_clock bg-black-50 p-3 py-md-2 m-0 mt-md-5 mr-md-5 h2 text-white text-monospace"/>
+            <div t-attf-class="o_hr_attendance_kiosk_mode flex-grow-1 flex-md-grow-0 card pb-3 px-0 px-lg-5 {{kioskModeClasses ? kioskModeClasses : '' }}">
+                <div class="card-body d-flex flex-column p-0 p-md-4">
+                    <t t-out="bodyContent"></t>
+                </div>
+            </div>
+        </div>
+    </t>
+
+    <t t-name="HrAttendanceUserBadge">
+        <div class="o_hr_attendance_user_badge o_home_menu_background d-flex align-items-end justify-content-center flex-grow-1 pt-5 pt-md-4 bg-odoo">
+            <img class="img rounded-circle mb-n5" t-attf-src="/web/image?model=hr.employee.public&amp;field=avatar_128&amp;id=#{userId}" t-att-title="userName" height="80" t-att-alt="userName"/>
+        </div>
+    </t>
+
+    <t t-name="HrAttendanceCheckInOutButtons">
+        <button t-attf-class="o_hr_attendance_sign_in_out_icon btn btn-{{ checked_in ? 'warning' : 'secondary border' }} px-5 py-3 mt-4 mb-2">
+            <i t-attf-class="fa fa-4x fa-sign-{{ checked_in ? 'out' : 'in' }}"/>
+        </button>
+
+        <h4 class="text-muted mb-0">Click to <b t-if="checked_in">check out</b><b t-if="!checked_in">check in</b></h4>
+    </t>
+
     <t t-name="HrAttendanceKioskMode">
-        <div class="o_hr_attendance_kiosk_mode_container o_home_menu_background">
-            <span class="o_hr_attendance_kiosk_backdrop"/>
-            <div class="o_hr_attendance_clock text-center"/>
-            <div class="o_hr_attendance_kiosk_mode o_barcode_main">
-                <h2><small>Welcome to</small> <t t-esc="widget.company_name"/></h2>
-                <img t-attf-src="{{widget.company_image_url}}" alt="Company Logo" class="o_hr_attendance_kiosk_company_image"/>
-                <div class="row o_hr_attendance_kiosk_welcome_row">
-                    <div class="col-sm-5 mt16">
+        <t t-call="HrAttendanceCardLayout">
+            <t t-set="kioskModeClasses">o_barcode_main pt-5</t>
+            <t t-set="bodyContent">
+                <h2 class="mb-2"><small>Welcome to</small> <t t-esc="widget.company_name"/></h2>
+                <img t-attf-src="{{widget.company_image_url}}" alt="Company Logo" class="o_hr_attendance_kiosk_company_image align-self-center img img-fluid mb-3" width="200"/>
+                <div class="o_hr_attendance_kiosk_welcome_row row align-items-stretch pb-5">
+                    <div class="col-md-5 position-relative mt-5 mb-5 mb-md-0">
                         <img class="img img-fluid d-block mx-auto" src="/barcodes/static/img/barcode.png"/>
-                        <h5 class="mt8 mb0 text-muted">Scan your badge</h5>
+                        <h6 class="position-absolute top-100 start-0 end-0 mt-2 text-muted">Scan your badge</h6>
                     </div>
-                    <div class="col-sm-2 mt32">
+                    <div class="col-md-2 align-self-center mt-5">
                         <h4 class="mt0 mb8"><i>or</i></h4>
                     </div>
-                    <div class="col-sm-5 mt16">
-                        <button class="o_hr_attendance_button_employees btn btn-primary mb16">
-                            <div class="mb16 mt16">Identify Manually</div>
+                    <div class="col-md-5 mt-5">
+                        <button class="o_hr_attendance_button_employees btn btn-primary py-5 py-md-2 h-100">
+                            Identify Manually
                         </button>
                     </div>
                 </div>
-            </div>
-        </div>
+            </t>
+        </t>
     </t>
 
     <t t-name="HrAttendanceMyMainMenu">
-        <div class="o_hr_attendance_kiosk_mode_container o_home_menu_background">
-            <span class="o_hr_attendance_kiosk_backdrop"/>
-            <div class="o_hr_attendance_clock text-center"/>
-            <div class="o_hr_attendance_kiosk_mode">
-                <t t-set="checked_in" t-value="widget.employee.attendance_state=='checked_in'"/>
+        <t t-call="HrAttendanceCardLayout">
+            <t t-set="bodyContent">
                 <t t-if="widget.employee">
-                    <div class="o_hr_attendance_user_badge o_home_menu_background">
-                        <img class="img rounded-circle" t-attf-src="/web/image?model=hr.employee.public&amp;field=avatar_128&amp;id=#{widget.employee.id}" t-att-title="widget.employee.name" t-att-alt="widget.employee.name"/>
+                    <t t-set="checked_in" t-value="widget.employee.attendance_state=='checked_in'"/>
+
+                    <t t-call="HrAttendanceUserBadge">
+                        <t t-set="userId" t-value="widget.employee.id"/>
+                        <t t-set="userName" t-value="widget.employee.name"/>
+                    </t>
+
+                    <div class="flex-grow-1">
+                        <h1 class="mt-5" t-esc="widget.employee.name"/>
+                        <h3><t t-if="!checked_in">Welcome!</t><t t-else="">Want to check out?</t></h3>
+                        <h4 class="mt0 mb0 text-muted" t-if="checked_in">Today's work hours: <span t-esc="widget.hours_today"/></h4>
                     </div>
-                    <h1 class="mb8"><t t-esc="widget.employee.name"/></h1>
-                    <h3 class="mt8 mb24"><t t-if="!checked_in">Welcome!</t><t t-else="">Want to check out?</t></h3>
-                    <h4 class="mt0 mb0 text-muted" t-if="checked_in">Today's work hours: <span t-esc="widget.hours_today"/></h4>
-                    <a class="fa fa-7x o_hr_attendance_sign_in_out_icon fa-sign-out btn-warning" t-if="checked_in" aria-label="Sign out" title="Sign out"/>
-                    <a class="fa fa-7x o_hr_attendance_sign_in_out_icon fa-sign-in btn-secondary" t-if="!checked_in" aria-label="Sign in" title="Sign in"/>
-                    <h3 class="mt0 mb0 text-muted">Click to <b t-if="checked_in">check out</b><b t-if="!checked_in">check in</b></h3>
+
+                    <t t-call="HrAttendanceCheckInOutButtons"/>
                 </t>
-                <t t-else="">
-                    Warning : Your user should be linked to an employee to use attendance. Please contact your administrator.
-                </t>
-            </div>
-        </div>
+                <div class="alert alert-warning" t-else="">
+                    <b>Warning</b> : Your user should be linked to an employee to use attendance.<br/> Please contact your administrator.
+                </div>
+            </t>
+        </t>
     </t>
 
     <t t-name="HrAttendanceKioskConfirm">
-        <div class="o_hr_attendance_kiosk_mode_container o_home_menu_background">
-            <span class="o_hr_attendance_kiosk_backdrop"/>
-            <div class="o_hr_attendance_clock text-center"/>
-            <div class="o_hr_attendance_kiosk_mode">
+        <t t-call="HrAttendanceCardLayout">
+            <t t-set="bodyContent">
                 <t t-set="checked_in" t-value="widget.employee_state=='checked_in'"/>
-                <div class="o_hr_attendance_back_button">
-                    <span class="btn btn-secondary btn-lg d-block d-md-none"><i class="fa fa-chevron-left mr8"/> Go back</span>
-                    <span class="btn btn-secondary d-none d-md-inline-block"><i class="fa fa-chevron-left" role="img" aria-label="Go back" title="Go back"/></span>
-                </div>
-                <t t-if="widget.employee_id">
-                    <div class="o_hr_attendance_user_badge o_home_menu_background">
-                        <img class="img rounded-circle" t-attf-src="/web/image?model=hr.employee.public&amp;field=avatar_128&amp;id=#{widget.employee_id}" t-att-title="widget.employee_name" t-att-alt="widget.employee_name"/>
-                    </div>
-                    <h1 class="mb8"><t t-esc="widget.employee_name"/></h1>
+
+                <button class="o_hr_attendance_back_button btn btn-block btn-secondary btn-lg d-block d-md-none py-5">
+                    <i class="fa fa-chevron-left me-2"/> Go back
+                </button>
+
+                <t t-if="widget.employee_id" t-call="HrAttendanceUserBadge">
+                    <t t-set="userId" t-value="widget.employee_id"/>
+                    <t t-set="userName" t-value="widget.employee_name"/>
+                </t>
+
+                <button class="o_hr_attendance_back_button o_hr_attendance_back_button_md btn btn-secondary d-none d-md-inline-flex align-items-center position-absolute top-0 start-0 rounded-circle">
+                    <i class="fa fa-2x fa-fw fa-chevron-left me-1" role="img" aria-label="Go back" title="Go back"/>
+                </button>
+
+                <div t-if="widget.employee_id" class="flex-grow-1">
+                    <h1 class="mt-5 mb8"><t t-esc="widget.employee_name"/></h1>
                     <h3 class="mt8 mb24"><t t-if="!checked_in">Welcome!</t><t t-else="">Want to check out?</t></h3>
                     <h4 class="mt0 mb0 text-muted" t-if="checked_in">Today's work hours: <span t-esc="widget.employee_hours_today"/></h4>
-                    <t t-if="!widget.use_pin">
-                        <a class="fa fa-7x o_hr_attendance_sign_in_out_icon fa-sign-out btn-warning" t-if="checked_in" aria-label="Sign out" title="Sign out"/>
-                        <a class="fa fa-7x o_hr_attendance_sign_in_out_icon fa-sign-in btn-secondary" t-if="!checked_in" aria-label="Sign in" title="Sign in"/>
-                        <h3 class="mt0 mb0 text-muted">Click to <b t-if="checked_in">check out</b><b t-else="">check in</b></h3>
-                    </t>
+
+                    <t t-if="!widget.use_pin" t-call="HrAttendanceCheckInOutButtons"/>
+
                     <t t-else="">
-                        <h3 class="mt0 mb0 text-muted">Please enter your PIN to <b t-if="checked_in">check out</b><b t-else="">check in</b></h3>
+                        <h3 class="mt-4 mb0 text-muted">Please enter your PIN to <b t-if="checked_in">check out</b><b t-else="">check in</b></h3>
                         <div class="row">
                             <div class="col-md-8 offset-md-2 o_hr_attendance_pin_pad">
-                                <div class="row" >
-                                    <div class="col-12 mb8 mt8"><input class="o_hr_attendance_PINbox text-center" type="password" disabled="true"/></div>
+                                <div class="row no-gutters" >
+                                    <div class="col-12 mb8 mt8">
+                                        <input class="o_hr_attendance_PINbox border-0 bg-white fs-1 text-center" type="password" disabled="true"/>
+                                    </div>
                                 </div>
-                                <div class="row">
+                                <div class="row no-gutters">
                                     <t t-foreach="['1', '2', '3', '4', '5', '6', '7', '8', '9', ['C', 'btn-warning'], '0', ['ok', 'btn-primary']]" t-as="btn_name">
-                                        <div class="col-4 mb4">
-                                            <a t-attf-class="btn {{btn_name[1]? btn_name[1] : 'btn-secondary'}} btn-block btn-lg {{ 'o_hr_attendance_pin_pad_button_' + btn_name[0] }}"><t t-esc="btn_name[0]"/></a>
+                                        <div class="col-4 p-1">
+                                            <a href="#" t-attf-class="o_hr_attendance_PINbox_button btn {{btn_name[1]? btn_name[1] : 'btn-secondary border'}} btn-block btn-lg {{ 'o_hr_attendance_pin_pad_button_' + btn_name[0] }} d-flex align-items-center justify-content-center">
+                                                <t t-esc="btn_name[0]"/>
+                                            </a>
                                         </div>
                                     </t>
                                 </div>
                             </div>
                         </div>
                     </t>
-                </t>
-                <div t-else="" class="alert alert-danger" role="alert">
-                    <b>Error: could not find corresponding employee.</b><br/>Please return to the main menu.
+                </div>
+                <div t-else="" class="alert alert-danger mx-3" role="alert">
+                    <h4 class="alert-heading">Error: could not find corresponding employee.</h4>
+                    <p>Please return to the main menu.</p>
                 </div>
                 <a role="button" class="oe_attendance_sign_in_out" aria-label="Sign out" title="Sign out"/>
-            </div>
-        </div>
+            </t>
+        </t>
     </t>
 
     <t t-name="HrAttendanceGreetingMessage">
-        <div class="o_hr_attendance_kiosk_mode_container o_home_menu_background">
-            <span class="o_hr_attendance_kiosk_backdrop"/>
-            <div class="o_hr_attendance_clock text-center"/>
-            <div class="o_hr_attendance_kiosk_mode">
+        <t t-call="HrAttendanceCardLayout">
+            <t t-set="bodyContent">
+                <t t-set="checked_in" t-value="widget.employee_state=='checked_in'"/>
+
                 <t t-if="widget.attendance">
-                    <div class="o_hr_attendance_user_badge o_home_menu_background">
-                        <img class="img rounded-circle" t-attf-src="/web/image?model=hr.employee.public&amp;field=avatar_128&amp;id=#{widget.attendance.employee_id[0]}" t-att-title="widget.employee_name" t-att-alt="widget.employee_name"/>
-                    </div>
-                    <t t-if="widget.attendance.check_out">
-                        <h1 class="mb0">Goodbye <t t-esc="widget.employee_name"/>!</h1>
+                    <t t-call="HrAttendanceUserBadge">
+                        <t t-set="userId" t-value="widget.attendance.employee_id[0]"/>
+                        <t t-set="userName" t-value="widget.employee_name"/>
+                    </t>
+
+                    <div t-if="widget.attendance.check_out" class="flex-grow-1">
+                        <h1 class="mt-5">Goodbye <t t-esc="widget.employee_name"/>!</h1>
                         <h2 class="o_hr_attendance_message_message mt4 mb24"/>
-                        <div class="alert alert-info h2 mt0" role="status">
+                        <div class="alert alert-info fs-2 mx-3" role="status">
                             Checked out at <b><t t-esc="widget.attendance.check_out_time"/></b>
                             <br/><b><t t-esc="widget.hours_today"/></b>
                         </div>
-                        <div t-att-class="'alert ' + (widget.today_overtime_float &gt;= 0 ? 'alert-success' : 'alert-danger') + ' h3 mt0'" role="status">
+                        <div t-att-class="'alert ' + (widget.today_overtime_float &gt;= 0 ? 'alert-success' : 'alert-danger') + ' h3 mx-3'" role="status">
                             Extra hours today:
                             <span t-esc="widget.today_overtime"/>
                         </div>
                         <t t-if="widget.total_overtime_float &gt; 0">
                             Total extra hours: <span t-esc="widget.total_overtime"/>
                         </t>
-                        <h3 class="o_hr_attendance_random_message mb24"/>
+                        <h3 class="o_hr_attendance_random_message font-italic mb24"/>
                         <div class="o_hr_attendance_warning_message mt24 alert alert-warning" style="display:none" role="alert"/>
-                    </t>
-                    <t t-else="">
-                        <h1 class="mb0">Welcome <t t-esc="widget.employee_name"/>!</h1>
+                    </div>
+                    <div t-else="" class="flex-grow-1">
+                        <h1 class="mt-5 mb0">Welcome <t t-esc="widget.employee_name"/>!</h1>
                         <h2 class="o_hr_attendance_message_message mt4 mb24"/>
-                        <div class="alert alert-info h2 mt0" role="status">
+                        <div class="alert alert-info fs-2 mx-3" role="status">
                             Checked in at <b><t t-esc="widget.attendance.check_in_time"/></b>
                         </div>
                         <h3 class="o_hr_attendance_random_message mb24"/>
                         <div class="o_hr_attendance_warning_message mt24 alert alert-warning" style="display:none" role="alert"/>
-                    </t>
-                    <button class="o_hr_attendance_button_dismiss btn btn-primary btn-lg">
-                        <span class="text-capitalize" t-if="widget.attendance.check_out">Goodbye</span>
-                        <span class="text-capitalize" t-else="">OK</span>
-                    </button>
+                    </div>
+                    <div class="flex-grow-1">
+                        <button class="o_hr_attendance_button_dismiss align-self-center btn btn-primary btn-lg px-5 py-3">
+                            <span class="fs-2" t-if="widget.attendance.check_out">Goodbye</span>
+                            <span class="fs-2" t-else="">OK</span>
+                        </button>
+                    </div>
                 </t>
                 <t t-else="">
-                    <div class="alert alert-warning" role="alert">Invalid request, please return to the main menu.</div>
-                    <button class="o_hr_attendance_button_dismiss btn btn-secondary btn-lg">Go back</button>
+                    <div class="flex-grow-1">
+                        <div class="alert alert-warning mt-5 mx-3" role="alert">
+                            <h4 class="alert-heading">Invalid request</h4>
+                            <p>Please return to the main menu.</p>
+                        </div>
+                    </div>
+                    <div class="flex-grow-1">
+                        <button class="o_hr_attendance_button_dismiss btn btn-primary btn-lg fs-2 px-5 py-3">
+                            <i class="fa fa-chevron-left me-2"/>
+                            <span class="fs-2">Go back</span>
+                        </button>
+                    </div>
                 </t>
-            </div>
-        </div>
+            </t>
+        </t>
     </t>
 </template>
diff --git a/addons/hr_attendance/views/hr_employee_view.xml b/addons/hr_attendance/views/hr_employee_view.xml
index f24f2f1843d..1e4b977ec67 100644
--- a/addons/hr_attendance/views/hr_employee_view.xml
+++ b/addons/hr_attendance/views/hr_employee_view.xml
@@ -67,8 +67,8 @@
                     class="oe_stat_button"
                     invisible="context.get('from_my_profile', False)"
                     type="action" attrs="{'invisible': ['|', ('attendance_state', '=', False), '&amp;', ('hr_presence_state', '=', 'present'), ('attendance_state', '=', 'checked_out')]}">
-                    <div role="img" id="oe_hr_attendance_status" class="fa fa-fw fa-circle o_button_icon oe_hr_attendance_status_green" attrs="{'invisible': [('attendance_state', '=', 'checked_out')]}" aria-label="Available" title="Available"/>
-                    <div role="img" id="oe_hr_attendance_status" class="fa fa-fw fa-circle o_button_icon oe_hr_attendance_status_red" attrs="{'invisible': [('attendance_state', '=', 'checked_in')]}" aria-label="Not available" title="Not available"/>
+                    <div role="img" id="oe_hr_attendance_status" class="fa fa-fw fa-circle o_button_icon me-1 text-success" attrs="{'invisible': [('attendance_state', '=', 'checked_out')]}" aria-label="Available" title="Available"/>
+                    <div role="img" id="oe_hr_attendance_status" class="fa fa-fw fa-circle o_button_icon me-1 text-danger" attrs="{'invisible': [('attendance_state', '=', 'checked_in')]}" aria-label="Not available" title="Not available"/>
                     <div class="o_stat_info" attrs="{'invisible': ['|', ('last_check_in', '=', False), ('last_check_out', '!=', False)]}">
                         <span class="o_stat_text">Attended Since</span>
                         <span class="o_stat_value"><field name="last_check_in" widget="relative_time"/></span>
@@ -144,10 +144,10 @@
                         <div class="oe_kanban_details">
                             <div id="textbox">
                                 <div class="float-right" t-if="record.attendance_state.raw_value == 'checked_in'">
-                                    <span id="oe_hr_attendance_status" class="fa fa-circle oe_hr_attendance_status_green" role="img" aria-label="Available" title="Available"></span>
+                                    <span id="oe_hr_attendance_status" class="fa fa-circle text-success me-1" role="img" aria-label="Available" title="Available"></span>
                                 </div>
                                 <div class="float-right" t-if="record.attendance_state.raw_value == 'checked_out'">
-                                    <span id="oe_hr_attendance_status" class="fa fa-circle oe_hr_attendance_status_orange"
+                                    <span id="oe_hr_attendance_status" class="fa fa-circle text-warning me-1"
                                           role="img" aria-label="Not available" title="Not available">
                                     </span>
                                 </div>