diff --git a/addons/hr_attendance/static/src/img/barcode.png b/addons/hr_attendance/static/src/img/barcode.png
new file mode 100644
index 00000000000..2e9d2f4bc04
Binary files /dev/null and b/addons/hr_attendance/static/src/img/barcode.png differ
diff --git a/addons/hr_attendance/static/src/js/greeting_message.js b/addons/hr_attendance/static/src/js/greeting_message.js
index 8399ae0b14a..a97564ae563 100644
--- a/addons/hr_attendance/static/src/js/greeting_message.js
+++ b/addons/hr_attendance/static/src/js/greeting_message.js
@@ -106,7 +106,7 @@ var GreetingMessage = AbstractAction.extend({
         if(this.previous_attendance_change_date){
             var last_check_in_date = this.previous_attendance_change_date.clone();
             if(now - last_check_in_date > 1000*60*60*12){
-                this.$('.o_hr_attendance_warning_message').append(_t("Warning! Last check in was over 12 hours ago.<br/>If this isn't right, please contact Human Resources."));
+                this.$('.o_hr_attendance_warning_message').show().append(_t("<b>Warning! Last check in was over 12 hours ago.</b><br/>If this isn't right, please contact Human Resource staff"));
                 clearTimeout(this.return_to_main_menu);
                 this.activeBarcode = false;
             } else if(now - last_check_in_date > 1000*60*60*8){
diff --git a/addons/hr_attendance/static/src/js/kiosk_confirm.js b/addons/hr_attendance/static/src/js/kiosk_confirm.js
index fc976c20b2a..4db5eb90b0a 100644
--- a/addons/hr_attendance/static/src/js/kiosk_confirm.js
+++ b/addons/hr_attendance/static/src/js/kiosk_confirm.js
@@ -76,9 +76,9 @@ var KioskConfirm = AbstractAction.extend({
     },
 
     start_clock: function () {
-        this.clock_start = setInterval(function() {this.$(".o_hr_attendance_clock").text(new Date().toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit'}));}, 500);
+        this.clock_start = setInterval(function() {this.$(".o_hr_attendance_clock").text(new Date().toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit', second:'2-digit'}));}, 500);
         // First clock refresh before interval to avoid delay
-        this.$(".o_hr_attendance_clock").text(new Date().toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit'}));
+        this.$(".o_hr_attendance_clock").show().text(new Date().toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit', second:'2-digit'}));
     },
 
     destroy: function () {
diff --git a/addons/hr_attendance/static/src/js/kiosk_mode.js b/addons/hr_attendance/static/src/js/kiosk_mode.js
index 59bd0c3f71e..9b7f5b7f7cd 100644
--- a/addons/hr_attendance/static/src/js/kiosk_mode.js
+++ b/addons/hr_attendance/static/src/js/kiosk_mode.js
@@ -48,9 +48,9 @@ var KioskMode = AbstractAction.extend({
     },
 
     start_clock: function() {
-        this.clock_start = setInterval(function() {this.$(".o_hr_attendance_clock").text(new Date().toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit'}));}, 500);
+        this.clock_start = setInterval(function() {this.$(".o_hr_attendance_clock").text(new Date().toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit', second:'2-digit'}));}, 500);
         // First clock refresh before interval to avoid delay
-        this.$(".o_hr_attendance_clock").text(new Date().toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit'}));
+        this.$(".o_hr_attendance_clock").show().text(new Date().toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit', second:'2-digit'}));
     },
 
     destroy: function () {
diff --git a/addons/hr_attendance/static/src/scss/hr_attendance.scss b/addons/hr_attendance/static/src/scss/hr_attendance.scss
index d54b105ca1c..ff61632b45a 100644
--- a/addons/hr_attendance/static/src/scss/hr_attendance.scss
+++ b/addons/hr_attendance/static/src/scss/hr_attendance.scss
@@ -1,12 +1,3 @@
-.o_hr_attendance_sign_in_out_icon {
-    font-size: 15em;
-    cursor: pointer;
-    margin: 20px 0px 20px 0px;
-    padding: 0px 15px 0px 15px;
-    border-radius: 10%;
-    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-}
-
 
 .o_kanban_view #oe_hr_attendance_status {
     font-size: 1.2em;
@@ -23,68 +14,168 @@
     }
 }
 
-.o_hr_attendance_back_button {
-    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-    font-size: 3em;
-    border-radius: 50%;
-    height: 1.7em;
-    width: 1.7em;
-    position: absolute;
-    left: auto;
-    right: 0px;
-    top: 0px;
-    bottom: auto;
+.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;
 
     @media (min-width: $screen-sm-min) {
-        transform: translate(50%, -50%);
+        @include o-position-absolute(20px, 20px);
+        width: auto;
+        padding: 3px 10px 3px 10px;
+        border-radius: 3px;
+        font-size: 1.5em;
     }
 }
 
-.o_hr_attendance_validation {
-    color: green;
-}
-
-.o_hr_attendance_btn-round-corners {
-    border-radius: 10%;
-}
-
-.o_hr_attendance_pin_pad_border {
-    margin: 10px 0px 10px 0px;
-}
-
-.o_hr_attendance_PINbox {
-    background: white;
-    border: 1px solid #d5d5d5;
-    text-align: center;
-    margin: 5px 0px 5px 0px;
-}
-
 .o_hr_attendance_kiosk_mode_container {
     @include o-flex-display;
     @include o-flex-flow(column, nowrap);
-    @include o-justify-content(center);
+    @include o-justify-content(flex-start);
     @include o-align-items(center);
+    @include o-position-absolute(0, 0, 0, 0);
 
     @media (min-width: $screen-sm-min) {
-        @include o-position-absolute(0, 0, 0, 0);
+        @include o-justify-content(center);
     }
 }
 
-.o_hr_attendance_warning_message {
-    color: $brand-warning;
-}
-.o_hr_attendance_random_message {
-    font-style: italic;
-}
 .o_hr_attendance_kiosk_mode {
     width: 100%;
     text-align: center;
     position: relative;
-    background-color: #fff;
-    padding: 2em;
+    background-color: fade-out(white, 0.1);
 
-    h1 {
-        margin: 0 0 2rem 0;
+    @media (max-width: $screen-xs-max) {
+        overflow: hidden;
+        padding: 0 2em 2em;
+        @include o-flex(1,0,auto);
+    }
+
+    @media (min-width: $screen-sm-min) {
+        padding: 2em 4em;
+        width: auto;
+        max-width: 550px;
+        width: 100%;
+        border-radius: 0.2em;
+        font-size: 1.2em;
+        @include o-animation(fadeInDownSmall, .3s);
+    }
+
+    .o_hr_attendance_kiosk_welcome_row {
+        @media (min-width: $screen-sm-min){
+            @include o-flex-display();
+            @include o-align-items(center);
+        }
+        @media (max-width: $screen-sm-max){
+            > div {
+                margin-bottom: 20px;
+            }
+        }
+
+        img {
+            max-width: 80px;
+        }
+    }
+
+    .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-default:hover {
+            color: $o-brand-optional;
+        }
+    }
+
+    .o_hr_attendance_back_button {
+        .visible-xs{
+            background: $gray-lighter;
+            margin: 0 -2em;
+            .fa {
+                @include o-position-absolute(0.75em);
+                margin-left: -1.5em
+            }
+        }
+
+        .hidden-xs.btn-default {
+            @include o-transform(translate(-50%, -50%));
+            @include o-position-absolute(0, $left:0);
+            @include square(2em);
+            border-radius: 50%;
+            padding-left: 14px;
+            line-height: 1.5em;
+            text-align: left;
+            color: $text-color;
+            font-size: 1.6em;
+            z-index: 1;
+            box-shadow: inset 0 0 0 1px fade-out(black, 0.8);
+        }
+    }
+
+    .btn-default{
+        box-shadow: inset 0 0 0 1px fade-out(black, 0.9);
+        color: $headings-color;
+    }
+
+    .o_hr_attendance_user_badge {
+         @include o-skew-gradient(#77717e, #c9a8a9);
+
+        img {
+            background: white;
+            border: 1px solid #d7d7d7;
+            @include square(50px);
+        }
+
+        @media (max-width: $screen-xs-max) {
+            margin: 1em -2em 0;
+            background: transparent;
+        }
+
+        @media (min-width: $screen-sm-min) {
+            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);
+            @include o-transform(translateY(3px));
+
+            img {
+                @include square(80px);
+                @include o-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 $padding-large-horizontal;
+            background: fade-out(white, 0.6);
+        }
+    }
+
+    .o_hr_attendance_random_message {
+        font-style: italic;
     }
 
     .message_demo_barcodes {
@@ -92,9 +183,9 @@
         margin: 0;
     }
 
-    img {
+    img.o_hr_attendance_kiosk_company_image {
         overflow:hidden; // prevent margins colapsing with h1
-        margin-top: 3rem;
+        margin: 1rem 0 4rem;
         width: 200px;
     }
 
@@ -107,92 +198,10 @@
         font-size: 1.2em;
         margin-bottom: 2rem;
         width: 100%;
-    }
+        font-weight: 400;
 
-    > button:last-child {
-        margin-bottom: 0;
-    }
-
-    @media (min-width: $screen-sm-min) {
-        flex: 0 0 auto;
-        width: 550px;
-        border-radius: 10px;
-        background-color: rgba(255,255,255,0.8);
-        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-        font-size: 1.2em;
-        padding: 3em;
-    }
-}
-
-.o_hr_attendance_clock {
-    font-size: 1.5em;
-    text-align: center;
-    position: absolute;
-    top: 20px;
-    right: 20px;
-
-    @media (min-width: $screen-sm-min) {
-        flex: 0 0 auto;
-        border-radius: 3px;
-        background-color: rgba(255,255,255,0.5);
-        padding: 3px 10px 3px 10px;
-    }
-}
-
-.o_hr_attendance_message_container {
-    @include o-flex-display;
-    @include o-flex-flow(column, nowrap);
-    @include o-justify-content(center);
-    @include o-align-items(center);
-
-    @media (min-width: $screen-sm-min) {
-        @include o-position-absolute(0, 0, 0, 0);
-    }
-}
-
-.o_hr_attendance_message {
-    width: 100%;
-    text-align: center;
-    background-color: #fff;
-    padding: 2em;
-
-    h1 {
-        margin: 0 0 2rem 0;
-    }
-
-    .message_demo_barcodes {
-        font-size: 0.9em;
-        margin: 0;
-    }
-
-    img {
-        overflow:hidden; // prevent margins colapsing with h1
-        margin-top: 3rem;
-        width: 200px;
-    }
-
-    p {
-        text-align: left;
-        margin: 3rem 0;
-    }
-
-    > button {
-        font-size: 1.2em;
-        margin-bottom: 2rem;
-        width: 100%;
-    }
-
-    > button:last-child {
-        margin-bottom: 0;
-    }
-
-    @media (min-width: $screen-sm-min) {
-        flex: 0 0 auto;
-        width: 550px;
-        border-radius: 10px;
-        background-color: rgba(255,255,255,0.8);
-        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-        font-size: 1.2em;
-        padding: 3em;
+        &:last-child {
+            margin-bottom: 0;
+        }
     }
 }
diff --git a/addons/hr_attendance/static/src/xml/attendance.xml b/addons/hr_attendance/static/src/xml/attendance.xml
index 74c9f91a001..5c334bcfa4c 100644
--- a/addons/hr_attendance/static/src/xml/attendance.xml
+++ b/addons/hr_attendance/static/src/xml/attendance.xml
@@ -7,32 +7,45 @@
 
     <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">
-                <h1>Welcome to <t t-esc="widget.company_name"/></h1>
-                <img t-attf-src="{{widget.company_image_url}}" alt="Company Logo"/>
-                <h2>Scan your badge</h2>
-                <h4>or</h4>
-                <button class="o_hr_attendance_button_employees btn btn-primary btn-lg">Select Employee</button>
+                <h1><small>Welcome to</small> <t t-esc="widget.company_name"/></h1>
+                <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">
+                        <img class="img img-responsive center-block" src="/hr_attendance/static/src/img/barcode.png"/>
+                        <h5 class="mt8 mb0 text-muted">Scan your badge</h5>
+                    </div>
+                    <div class="col-sm-2">
+                        <h3 class="mt0 mb8"><i>or</i></h3>
+                    </div>
+                    <div class="col-sm-5">
+                        <button class="o_hr_attendance_button_employees btn btn-primary mb16">
+                            <div class="mb16 mt16">Select Employee</div>
+                        </button>
+                    </div>
+                </div>
             </div>
-            <div class="o_hr_attendance_clock"></div>
         </div>
     </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-if="widget.employee">
-                    <h1>Welcome <t t-esc="widget.employee.name"/></h1>
-                    <t t-if="widget.employee.attendance_state=='checked_out'">
-                        <h2>Click to check in</h2>
-                        <i class="fa fa-sign-in btn-primary o_hr_attendance_sign_in_out_icon"/>
-                    </t>
-                    <t t-if="widget.employee.attendance_state=='checked_in'">
-                        <h2>Click to check out</h2>
-                        <i class="fa fa-sign-out btn-primary o_hr_attendance_sign_in_out_icon"/>
-                    </t>
+                    <div class="o_hr_attendance_user_badge o_home_menu_background">
+                        <img class="img img-circle" t-attf-src="/web/image?model=hr.employee&amp;field=image_medium&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>
+                    <h3 class="mt8 mb24"><t t-if="!checked_in">Welcome!</t><t t-else="">Want to check out?</t></h3>
+                    <a t-attf-class="fa fa-7x o_hr_attendance_sign_in_out_icon {{checked_in? 'fa-sign-out btn-warning' : 'fa-sign-in btn-default'}}"/>
+                    <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.employee">
+                <t t-else="">
                     Error : Could not find employee linked to user.
                 </t>
             </div>
@@ -41,86 +54,86 @@
 
     <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-set="checked_in" t-value="widget.employee_state=='checked_in'"/>
+                <div class="o_hr_attendance_back_button">
+                    <span class="btn btn-default btn-lg visible-xs"><i class="fa fa-chevron-left mr8"/> Go back</span>
+                    <span class="btn btn-default hidden-xs"><i class="fa fa-chevron-left"/></span>
+                </div>
                 <t t-if="widget.employee_id">
-                    <h1>Welcome <t t-esc="widget.employee_name"/></h1>
+                    <div class="o_hr_attendance_user_badge o_home_menu_background">
+                        <img class="img img-circle" t-attf-src="/web/image?model=hr.employee&amp;field=image_medium&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>
+                    <h3 class="mt8 mb24"><t t-if="!checked_in">Welcome!</t><t t-else="">Want to check out?</t></h3>
                     <t t-if="!widget.use_pin">
-                        <t t-if="widget.employee_state=='checked_in'">
-                            <h2>Check out</h2>
-                            <a class="fa btn-primary o_hr_attendance_sign_in_out_icon fa-sign-out"/>
-                        </t>
-                        <t t-if="widget.employee_state=='checked_out'">
-                            <h2>Check in</h2>
-                            <a class="fa btn-primary o_hr_attendance_sign_in_out_icon fa-sign-in"/>
-                        </t>
+                        <a t-attf-class="fa fa-7x o_hr_attendance_sign_in_out_icon {{checked_in? 'fa-sign-out btn-warning' : 'fa-sign-in btn-default'}}"/>
+                        <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 t-if="widget.employee_state=='checked_in'">
-                            <h2>Please enter your PIN to check out</h2>
-                        </t>
-                        <t t-if="widget.employee_state=='checked_out'">
-                            <h2>Please enter your PIN to check in</h2>
-                        </t>
+                    <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>
                         <div class="row">
-                            <div class="col-sm-8 col-sm-offset-2">
+                            <div class="col-sm-8 col-sm-offset-2 o_hr_attendance_pin_pad">
                                 <div class="row" >
-                                    <div class="col-xs-4 col-xs-offset-4"><input class="o_hr_attendance_PINbox" type="password" disabled="true"/></div>
+                                    <div class="col-xs-12 mb8 mt8"><input class="o_hr_attendance_PINbox text-center" type="password" disabled="true"/></div>
                                 </div>
-                                <div class="row o_hr_attendance_pin_pad">
-                                    <t t-foreach="['1', '2', '3', '4', '5', '6', '7', '8', '9', 'C', '0', 'ok']" t-as="btn_name">
-                                        <div class="col-xs-4 o_hr_attendance_pin_pad_border">
-                                            <a t-attf-class="btn btn-primary btn-block btn-lg o_hr_attendance_btn-round-corners {{ 'o_hr_attendance_pin_pad_button_' + btn_name }}"><t t-esc="btn_name"/></a>
+                                <div class="row">
+                                    <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-xs-4 mb4">
+                                            <a t-attf-class="btn {{btn_name[1]? btn_name[1] : 'btn-default'}} btn-block btn-lg {{ 'o_hr_attendance_pin_pad_button_' + btn_name[0] }}"><t t-esc="btn_name[0]"/></a>
                                         </div>
                                     </t>
                                 </div>
                             </div>
                         </div>
-                        <br/>
                     </t>
                 </t>
-                <t t-if="!widget.employee_id">
-                    Error: could not find corresponding employee.<br/>Please return to the main menu.
-                </t>
-                <div class="oe_attendance_sign_in_out">
+                <div t-else="" class="alert alert-danger">
+                    <b>Error: could not find corresponding employee.</b><br/>Please return to the main menu.
                 </div>
-                <div class="o_hr_attendance_back_button btn btn-danger fa fa-times"/>
+                <div class="oe_attendance_sign_in_out"/>
             </div>
-            <div class="o_hr_attendance_clock"></div>
         </div>
     </t>
 
     <t t-name="HrAttendanceGreetingMessage">
-        <div class="o_hr_attendance_message_container o_home_menu_background">
-            <div class="o_hr_attendance_message">
+        <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-if="widget.attendance">
+                    <div class="o_hr_attendance_user_badge o_home_menu_background">
+                        <img class="img img-circle" t-attf-src="/web/image?model=hr.employee&amp;field=image_medium&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="o_hr_attendance_validation">
-                            Checked out at <t t-esc="widget.attendance.check_out_time"/>
-                        </h1>
-                        <h2 class="o_hr_attendance_message_message">
-                            Goodbye <t t-esc="widget.employee_name"/>
-                            <br/>
-                        </h2>
-                        <h3 class="o_hr_attendance_random_message"></h3>
-                        <h2 class="o_hr_attendance_warning_message"></h2>
-
+                        <h1 class="mb0">Goodbye <t t-esc="widget.employee_name"/>!</h1>
+                        <h2 class="o_hr_attendance_message_message mt4 mb24"/>
+                        <div class="alert alert-info h2 mt0">
+                            Checked out at <b><t t-esc="widget.attendance.check_out_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"/>
                     </t>
-                    <t t-if="!widget.attendance.check_out">
-                        <h1 class="o_hr_attendance_validation">
-                            Checked in at <t t-esc="widget.attendance.check_in_time"/>
-                        </h1>
-                        <h2 class="o_hr_attendance_message_message">
-                            Welcome <t t-esc="widget.employee_name"/>
-                            <br/>
-                        </h2>
-                        <h3 class="o_hr_attendance_random_message"></h3>
-                        <h2 class="o_hr_attendance_warning_message"></h2>
+                    <t t-else="">
+                        <h1 class="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">
+                            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"/>
                     </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>
                 </t>
-                <t t-if="!widget.attendance">
-                    Invalid request, please return to the main menu.<br/>
+                <t t-else="">
+                    <div class="alert alert-warning">Invalid request, please return to the main menu.</div>
+                    <button class="o_hr_attendance_button_dismiss btn btn-default btn-lg">Go back</button>
                 </t>
-                <button class="o_hr_attendance_button_dismiss btn btn-primary btn-sm">ok</button>
             </div>
         </div>
     </t>