diff --git a/addons/hr/static/src/scss/hr.scss b/addons/hr/static/src/scss/hr.scss
index cb523c3fb7c..8a6e99f89ad 100644
--- a/addons/hr/static/src/scss/hr.scss
+++ b/addons/hr/static/src/scss/hr.scss
@@ -1,66 +1,6 @@
-.o_web_client .o_hr_employee_kanban {
-
-    .o_follow_btn.o_following {
-        .o_unfollow {
-            display: none;
-        }
-
-        &:hover {
-            .o_following {
-                display: none;
-            }
-            .o_unfollow {
-                display: inline;
-            }
-        }
-    }
-
-    .o_employee_summary_icons > span {
-        white-space: nowrap;
-    }
-
-    .oe_kanban_content.fixed-bottom {
-        z-index: 100;
-    }
-
-    .hr_activity_container {
-        margin-bottom: 2px;
-        margin-right: -3px;
-    }
-
-    .o_hr_employee_kanban_bottom {
-        //Prevent bottom row from preventing to click on buttons
-        pointer-events: none;
-        .oe_kanban_bottom_right {
-            pointer-events: auto;
-        }
-    }
-
-}
-
 .o_kanban_dashboard.o_hr_department_kanban {
-    &.o_kanban_ungrouped {
-        .o_kanban_record {
-            width: 450px;
-            .o_kanban_primary_bottom.bottom_block {
-                background-color: unset !important;
-            }
-        }
-    }
-    .o_kanban_group {
-        &:not(.o_column_folded) {
-            width: 350px + 2*$o-kanban-group-padding;
-
-            @include media-breakpoint-down(md) {
-                width: 100%;
-            }
-        }
-    }
-}
-
-.hr_presence {
-    font-size: 0.75em;
-    vertical-align: middle;
+    --KanbanRecord-width: 450px;
+    --KanbanRecord-width-small: 350px;
 }
 
 .o_employee_form {
diff --git a/addons/hr/views/hr_department_views.xml b/addons/hr/views/hr_department_views.xml
index 907ac938544..7efcbc405e8 100644
--- a/addons/hr/views/hr_department_views.xml
+++ b/addons/hr/views/hr_department_views.xml
@@ -65,7 +65,7 @@
             <field name="name">hr.department.kanban</field>
             <field name="model">hr.department</field>
             <field name="arch" type="xml">
-                <kanban class="oe_background_grey o_kanban_dashboard o_hr_department_kanban" sample="1">
+                <kanban class="oe_background_grey o_kanban_dashboard o_hr_department_kanban o_kanban_small_column" sample="1">
                     <field name="name"/>
                     <field name="company_id"/>
                     <field name="manager_id"/>
diff --git a/addons/hr/views/hr_employee_public_views.xml b/addons/hr/views/hr_employee_public_views.xml
index 640e1d692f3..0d4459bdc3c 100644
--- a/addons/hr/views/hr_employee_public_views.xml
+++ b/addons/hr/views/hr_employee_public_views.xml
@@ -128,7 +128,7 @@
                     <templates>
                         <t t-name="kanban-box">
                         <div class="oe_kanban_global_click o_kanban_record_has_image_fill o_hr_kanban_record">
-                            <field name="image_1024" class="o_kanban_image_fill_left" preview_image="image_128"
+                            <field name="image_1024" class="o_kanban_image_fill_left d-block" preview_image="image_128"
                                 widget="background_image" options="{'zoom': true, 'zoom_delay': 1000}"/>
 
                             <div class="oe_kanban_details">
@@ -175,7 +175,7 @@
                                     <li t-if="record.work_email.raw_value"><field name="work_email" /></li>
                                     <li t-if="record.work_phone.raw_value" class="o_force_ltr"><field name="work_phone" /></li>
                                 </ul>
-                                <div class="oe_kanban_content position-absolute fixed-bottom me-2">
+                                <div class="oe_kanban_content position-absolute start-0 bottom-0 end-0 me-2">
                                     <div class="o_kanban_record_bottom">
                                         <div class="oe_kanban_bottom_left"/>
                                         <div class="oe_kanban_bottom_right">
diff --git a/addons/hr/views/hr_employee_views.xml b/addons/hr/views/hr_employee_views.xml
index fca3f40be0c..5aa89fa0735 100644
--- a/addons/hr/views/hr_employee_views.xml
+++ b/addons/hr/views/hr_employee_views.xml
@@ -65,12 +65,12 @@
                                 <field name="name" placeholder="Employee's Name" required="True" style="font-size: min(4vw, 2.6rem);" />
                                 <field name="last_activity_time" invisible="1"/>
                                 <field name="last_activity" invisible="1"/>
-                                <div id="hr_presence_status" attrs="{'invisible': ['|', ('last_activity', '=', False), ('user_id', '=', False)]}">
-                                    <div role="img" class="fa fa-fw fa-circle text-success o_button_icon hr_presence" attrs="{'invisible': [('hr_presence_state', '!=', 'present')]}" aria-label="Available" title="Available"/>
-                                    <div role="img" class="fa fa-2xs fa-fw fa-circle text-warning o_button_icon hr_presence" attrs="{'invisible': [('hr_presence_state', '!=', 'to_define')]}" aria-label="Away" title="Away"/>
-                                    <div role="img" class="fa fa-2xs fa-fw fa-circle text-danger o_button_icon hr_presence" attrs="{'invisible': [('hr_presence_state', '!=', 'absent')]}" aria-label="Not available" title="Not available"/>
+                                <div id="hr_presence_status" attrs="{'invisible': ['|', ('last_activity', '=', False), ('user_id', '=', False)]}" class="ms-1">
+                                    <small role="img" class="fa fa-fw fa-circle text-success o_button_icon hr_presence align-middle fs-6" attrs="{'invisible': [('hr_presence_state', '!=', 'present')]}" aria-label="Available" title="Available"/>
+                                    <small role="img" class="fa fa-fw fa-circle text-warning o_button_icon hr_presence align-middle fs-6" attrs="{'invisible': [('hr_presence_state', '!=', 'to_define')]}" aria-label="Away" title="Away"/>
+                                    <small role="img" class="fa fa-fw fa-circle text-danger o_button_icon hr_presence align-middle fs-6" attrs="{'invisible': [('hr_presence_state', '!=', 'absent')]}" aria-label="Not available" title="Not available"/>
                                 </div>
-                                <a title="Chat" icon="fa-comments" t-on-click.prevent="() => openChat(props.record.resId)" href="#" class="ml8" invisible="not context.get('chat_icon')" attrs="{'invisible': [('user_id','=', False)]}" role="button"><i class="fa fa-comments"/></a>
+                                <a title="Chat" icon="fa-comments" t-on-click.prevent="() => openChat(props.record.resId)" href="#" class="ml8 o_employee_chat_btn" invisible="not context.get('chat_icon')" attrs="{'invisible': [('user_id','=', False)]}" role="button"><i class="fa fa-comments align-middle fs-6"/></a>
                             </h1>
                             <h2>
                                 <field name="job_title" placeholder="Job Position" />
@@ -269,7 +269,7 @@
                    <templates>
                        <t t-name="kanban-box">
                        <div class="oe_kanban_global_click o_kanban_record_has_image_fill o_hr_kanban_record">
-                            <field name="image_1024" class="o_kanban_image_fill_left" preview_image="image_128"
+                            <field name="image_1024" class="o_kanban_image_fill_left d-block" preview_image="image_128"
                                 widget="background_image" options="{'zoom': true, 'zoom_delay': 1000}"/>
 
                             <div class="oe_kanban_details">
@@ -324,12 +324,12 @@
                                    <li t-if="record.work_phone.raw_value" class="o_force_ltr"><field name="work_phone" /></li>
                                </ul>
                            </div>
-                           <div class="oe_kanban_content position-absolute fixed-bottom me-2 o_hr_employee_kanban_bottom">
+                           <div class="oe_kanban_content o_hr_employee_kanban_bottom position-absolute bottom-0 start-0 end-0 me-2 pe-none">
                                <div class="o_kanban_record_bottom">
                                    <div class="oe_kanban_bottom_left"/>
-                                   <div class="oe_kanban_bottom_right float-end">
+                                   <div class="oe_kanban_bottom_right float-end pe-auto">
                                         <a title="Chat" icon="fa-comments" href="#" t-on-click.prevent="() => props.record.openChat(props.record.resId)" class="ml8" attrs="{'invisible': [('user_id','=', False)]}" role="button"><i class="fa fa-comments"/></a>
-                                        <div class="hr_activity_container">
+                                        <div class="hr_activity_container mb-1 me-n1">
                                             <field name="activity_ids" widget="kanban_activity"/>
                                         </div>
                                    </div>