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>
diff --git a/addons/maintenance/static/src/scss/maintenance_team_dashboard.scss b/addons/maintenance/static/src/scss/maintenance_team_dashboard.scss
index f6ced06b76d..09774c65a37 100644
--- a/addons/maintenance/static/src/scss/maintenance_team_dashboard.scss
+++ b/addons/maintenance/static/src/scss/maintenance_team_dashboard.scss
@@ -1,5 +1,3 @@
-.o_kanban_renderer.o_kanban_ungrouped.o_kanban_dashboard.o_maintenance_team_kanban {
-    .o_kanban_record {
-        width: 420px;
-    }
+.o_kanban_renderer.o_maintenance_team_kanban {
+    --KanbanRecord-width: 420px;
 }
diff --git a/addons/utm/static/src/scss/utm_views.scss b/addons/utm/static/src/scss/utm_views.scss
index b19fe422b14..34f47b5ac18 100644
--- a/addons/utm/static/src/scss/utm_views.scss
+++ b/addons/utm/static/src/scss/utm_views.scss
@@ -1,27 +1,14 @@
-.o_utm_kanban {
-    .o_kanban_group {
-        padding: 0 ($grid-gutter-width * .25) $grid-gutter-width;
-
-        &:not(.o_column_folded) {
-            width: 380px;
-		}
-	}
+.o_kanban_renderer.o_utm_kanban {
+    --KanbanRecord-width: #{380px - 2 * ($grid-gutter-width * .25)};
+    --KanbanGroup-padding-h: #{$grid-gutter-width * .25};
+    --KanbanGroup-padding-bottom: #{$grid-gutter-width};
 
     #o_utm_actions {
-        margin: 0 ($o-kanban-dashboard-hpadding * -.5);
+        margin: 0 calc(var(--KanbanRecord-padding-h) * -1);
 
         > a {
-            border-color: rgba($border-color, .5);
-            padding: ($o-kanban-dashboard-hpadding * .25) ($o-kanban-dashboard-hpadding * .5);
+            padding: var(--KanbanRecord-gap-inner-v) var(--KanbanRecord-padding-h);
             white-space: nowrap;
         }
-
-        > :first-child {
-            border-left: 0;
-        }
-
-        > :last-child {
-            border-right: 0;
-        }
     }
 }
diff --git a/addons/utm/views/utm_campaign_views.xml b/addons/utm/views/utm_campaign_views.xml
index 58e143de47e..e56d7434b33 100644
--- a/addons/utm/views/utm_campaign_views.xml
+++ b/addons/utm/views/utm_campaign_views.xml
@@ -107,7 +107,7 @@
                                 </div>
                                 <div class="o_kanban_record_body">
                                     <field name="tag_ids" widget="many2many_tags" options="{'color_field': 'color'}"/>
-                                    <ul id="o_utm_actions" class="list-group list-group-horizontal"/>
+                                    <ul id="o_utm_actions" class="list-group list-group-horizontal my-0"/>
                                 </div>
                                 <div class="o_kanban_record_bottom h5 mt-2 mb-0">
                                     <div id="utm_statistics" class="d-flex flex-grow-1 text-600 mt-1"/>
diff --git a/addons/web/static/src/legacy/scss/kanban_dashboard.scss b/addons/web/static/src/legacy/scss/kanban_dashboard.scss
index db7a6665a0d..8e01d2afb9a 100644
--- a/addons/web/static/src/legacy/scss/kanban_dashboard.scss
+++ b/addons/web/static/src/legacy/scss/kanban_dashboard.scss
@@ -19,6 +19,7 @@
         // ------- Generic layout adaptations -------
         .container {
             width: 100%;
+            max-width: none;
         }
 
         // ------- Dropdown toggle & menu -------
diff --git a/addons/web/static/src/legacy/scss/kanban_examples_dialog.scss b/addons/web/static/src/legacy/scss/kanban_examples_dialog.scss
index a5a37166975..8074b31a003 100644
--- a/addons/web/static/src/legacy/scss/kanban_examples_dialog.scss
+++ b/addons/web/static/src/legacy/scss/kanban_examples_dialog.scss
@@ -45,19 +45,15 @@
 
 // container ghost card in background
 .o_kanban_example_background_container {
-    display: flex;
-    padding: 0px;
-    opacity: 0.4;
 
     // content
     .o_kanban_example_background {
-        flex: 1 1 100%;
+        flex-basis: 100%;
 
         .o_kanban_examples {
             .o_kanban_examples_group {
                 .o_kanban_examples_ghost {
-                    width: 224px;
-                    margin-bottom: 10px;
+                    width: $o-kanban-small-record-width;
                 }
             }
         }
@@ -67,31 +63,16 @@
 
 // kanban ghost card
 .o_kanban_examples {
-    display: flex;
-    padding: 0 6px;
-
     .o_kanban_examples_group {
-        flex: 1 1 100%;
-        margin: 10px;
+        flex-basis: 100%;
 
         .o_kanban_examples_ghost {
-            padding: 5px;
-            margin-top: -1px;
-            border: thin solid map-get($grays, '300');
-            background-color: white;
-            .o_ghost_content {
-                height: 12px;
-                background: map-get($grays, '300');
-                &.o_ghost_tag {
-                    display: inline-block;
-                    width: 40%;
-                    margin-top: 10px;
-                }
+            &.o_collapse {
+                margin-top: -1px;
             }
             .o_ghost_avatar {
                 height: 20px;
                 width: 20px;
-                margin-top: 6px;
             }
         }
     }
diff --git a/addons/web/static/src/legacy/scss/kanban_view.scss b/addons/web/static/src/legacy/scss/kanban_view.scss
index 8777a3d2bb4..4dc3a0af798 100644
--- a/addons/web/static/src/legacy/scss/kanban_view.scss
+++ b/addons/web/static/src/legacy/scss/kanban_view.scss
@@ -465,7 +465,6 @@
             }
 
             .o_kanban_quick_add i {
-                @include o-kanban-icon;
                 margin-left: $o-kanban-inside-hgutter*2;
             }
 
@@ -481,10 +480,6 @@
                 @include media-breakpoint-down(md) {
                     visibility: visible;
                 }
-
-                i {
-                    @include o-kanban-icon;
-                }
             }
         }
 
@@ -521,7 +516,7 @@
                 }
 
                 .o_column_unfold {
-                    @include o-kanban-icon(1);
+                    display: block;
                 }
             }
 
diff --git a/addons/web/static/src/legacy/scss/primary_variables.scss b/addons/web/static/src/legacy/scss/primary_variables.scss
index ec8b3d010f8..89cc734decb 100644
--- a/addons/web/static/src/legacy/scss/primary_variables.scss
+++ b/addons/web/static/src/legacy/scss/primary_variables.scss
@@ -145,28 +145,6 @@ $o-datepicker-week-color: #8f8f8f !default;
 
 $o-card-body-bg-opacity: 0.9 !default;
 
-// Kanban
-
-$o-kanban-default-record-width: 300px !default;
-$o-kanban-small-record-width: 240px !default;
-
-$o-kanban-header-title-height: 50px !default;
-
-$o-kanban-image-width: 64px !default;
-$o-kanban-image-fill-width: 95px !default;
-$o-kanban-inside-vgutter: 8px !default;
-$o-kanban-inside-hgutter: 8px !default;
-$o-kanban-color-border-width: 2px !default;
-$o-kanban-inner-hmargin: 5px !default;
-$o-kanban-progressbar-height: 20px !default;
-
-$o-kanban-mobile-tabs-height: 40px !default;
-$o-kanban-mobile-empty-height: $o-kanban-image-width !default;
-// ------- Kanban dashboard variables -------
-
-// Used to manage spacing in complex dropdown menu
-$o-kanban-dashboard-dropdown-complex-gap: 5px !default;
-
 // Border-radius
 
 $o-border-radius: .25rem !default;
diff --git a/addons/web/static/src/legacy/scss/secondary_variables.scss b/addons/web/static/src/legacy/scss/secondary_variables.scss
index d6f4964e377..fe6743f80e6 100644
--- a/addons/web/static/src/legacy/scss/secondary_variables.scss
+++ b/addons/web/static/src/legacy/scss/secondary_variables.scss
@@ -33,17 +33,3 @@ $o-datepicker-week-bg-color: lighten($o-datepicker-week-color, 30%) !default;
 // is the minimal width of the default form view design for md/lg sizes
 $o-form-sheet-min-width: 990px !default;
 $o-form-separator-color: invert($o-view-background-color, 10%) !default;
-
-// Kanban
-
-$o-kanban-record-margin: $o-horizontal-padding / 2 !default;
-$o-kanban-group-padding: $o-horizontal-padding !default; // Cannot be higher than this
-
-$o-kanban-inside-hgutter-mobile: $o-horizontal-padding !default;
-
-// ------- Kanban dashboard variables -------
-
-// Since rows and containers are used inside cards, we're
-// forced to set the padding relative to the grid system.
-$o-kanban-dashboard-hpadding: $o-horizontal-padding !default;
-$o-kanban-dashboard-vpadding: $o-horizontal-padding / 2 !default;
diff --git a/addons/web/static/src/legacy/scss/utils.scss b/addons/web/static/src/legacy/scss/utils.scss
index 8979ad3c4fe..01a8ecfdc59 100644
--- a/addons/web/static/src/legacy/scss/utils.scss
+++ b/addons/web/static/src/legacy/scss/utils.scss
@@ -237,14 +237,6 @@
 }
 
 // ------- Kanban grouped mixins -------
-@mixin o-kanban-icon($base-opacity: 0.5) {
-    display: block;
-    text-align: center;
-    color: $o-main-text-color;
-    font-size: $font-size-sm;
-    cursor: pointer;
-    @include o-hover-opacity($base-opacity);
-}
 @mixin o-kanban-tag-color {
     @for $size from 1 through length($o-colors) {
         // Note: the first color is supposed to be invisible if there is a color
@@ -285,8 +277,6 @@
     transform-origin: left bottom 0;
     transform: rotate(90deg);
     overflow: visible;
-    white-space: nowrap;
-    font-size: 15px;
 }
 
 // ------- Kanban records mixins -------
@@ -299,7 +289,7 @@
 }
 @mixin o-kanban-dropdown($padding-base: $o-kanban-inside-vgutter) {
     margin: -1px -1px 1px;
-    padding: $padding-base/2 $padding-base;
+    padding: if(type-of($padding-base) == 'string', calc(#{$padding-base}/2) $padding-base, $padding-base/2 $padding-base);
     border: 1px solid transparent;
     border-bottom: none;
     vertical-align: top;
diff --git a/addons/web/static/src/legacy/xml/kanban.xml b/addons/web/static/src/legacy/xml/kanban.xml
index 7f3e33641fc..4c37a06b5f0 100644
--- a/addons/web/static/src/legacy/xml/kanban.xml
+++ b/addons/web/static/src/legacy/xml/kanban.xml
@@ -13,10 +13,10 @@
         role="feed" t-attf-aria-labelledby="kanban_header_#{widget.id or widget.db_id}">
         <div class="o_kanban_header">
             <div class="o_kanban_header_title">
-                <span t-attf-id="#kanban_header_#{widget.id or widget.db_id}" class="o_column_title"><t t-esc="widget.title"/></span>
-                <span class="o_column_unfold"><i class="fa fa-arrows-h" role="img" aria-label="Unfold" title="Unfold"/></span>
+                <span t-attf-id="#kanban_header_#{widget.id or widget.db_id}" class="o_column_title" t-attf-class="{{ !widget.isMobile and widget.folded ? 'fs-4 overflow-visible' : '' }}"><t t-esc="widget.title"/></span>
+                <button class="o_column_unfold btn btn-link p-0 border-0 small text-center text-700 cursor-pointer"><i class="fa fa-arrows-h" role="img" aria-label="Unfold" title="Unfold"/></button>
                 <span class="o_kanban_config dropdown">
-                    <a class="dropdown-toggle o-no-caret" data-bs-toggle="dropdown" href="#"><i class="fa fa-gear" role="img" aria-label="Settings" title="Settings"/></a>
+                    <a class="dropdown-toggle o-no-caret" data-bs-toggle="dropdown" href="#"><i class="fa fa-gear d-block text-center text-700 small opacity-50 opacity-100-hover cursor-pointer" role="img" aria-label="Settings" title="Settings"/></a>
                     <div class="dropdown-menu cursor-default" role="menu">
                         <a t-if="!widget.isMobile" role="menuitem" class="dropdown-item o_kanban_toggle_fold" href="#">Fold</a>
                         <t t-if="widget.grouped_by_m2o">
@@ -29,7 +29,7 @@
                         </t>
                     </div>
                 </span>
-                <span t-if="widget.quick_create" class="o_kanban_quick_add"><i class="fa fa-plus" role="img" aria-label="Quick add" title="Quick add"/></span>
+                <a t-if="widget.quick_create" class="o_kanban_quick_add"><i class="fa fa-plus d-block small text-center text-700 opacity-50 opacity-100-hover cursor-pointer" role="img" aria-label="Quick add" title="Quick add"/></a>
             </div>
         </div>
         <div t-if="widget.loadMoreCount > 0" class="o_kanban_load_more">
@@ -57,7 +57,7 @@
                 </div>
                 <span t-if="!widget.isMobile" class="o_discard_msg text-muted float-end">Esc to discard</span>
                 <t t-if="widget.examples &amp;&amp; !widget.isMobile">
-                    <button type="button" class="btn btn-link o_kanban_examples">See examples</button>
+                    <button type="button" class="btn btn-link o_kanban_examples p-0">See examples</button>
                 </t>
             </div>
             <div class="o_kanban_muted_record"/>
@@ -157,9 +157,9 @@
                     <div t-if="example.description" class="o_kanban_examples_description">
                         <t t-out="example.description"/>
                     </div>
-                    <div class="o_kanban_examples">
+                    <div class="o_kanban_examples d-flex p-2">
                         <t t-foreach="example.columns" t-as="column">
-                            <div class="o_kanban_examples_group">
+                            <div class="o_kanban_examples_group flex-grow-1 m-3">
                                 <h6><b><t t-esc="column"/></b></h6>
                                 <t t-foreach="_.random(1,4)">
                                     <t t-call="KanbanView.ExamplesDialog.RecordGhost"/>
@@ -173,23 +173,23 @@
     </div>
 </div>
 <t t-name="KanbanView.ExamplesDialog.RecordGhost">
-    <div class="o_kanban_examples_ghost">
-        <div class="o_ghost_content"/>
-        <div class="o_ghost_content o_ghost_tag"/>
+    <div class="o_kanban_examples_ghost o_collapse p-2 border bg-white">
+        <div class="o_ghost_content pb-3 bg-300"/>
+        <div class="o_ghost_content o_ghost_tag d-inline-block w-50 mt-3 pb-3 bg-300"/>
             <t t-if="example.bullets and _.random(0, 5) > 3">
                 <t t-out="_.sample(example.bullets)"/>
             </t>
-        <img class="float-end o_ghost_avatar" src="/base/static/img/avatar.png" alt="Avatar"/>
+        <img class="float-end o_ghost_avatar mt-2" src="/base/static/img/avatar.png" alt="Avatar"/>
     </div>
 </t>
 
 <!-- Kanban Example Background -->
 <t t-name="KanbanView.ExamplesBackground">
-    <div class="o_kanban_example_background_container">
-        <div class="o_kanban_example_background">
-            <div class="o_kanban_examples">
+    <div class="o_kanban_example_background_container d-flex opacity-50">
+        <div class="o_kanban_example_background flex-grow-1">
+            <div class="o_kanban_examples d-flex p-2">
                 <t t-foreach="ghostColumns" t-as="column">
-                    <div class="o_kanban_examples_group">
+                    <div class="o_kanban_examples_group flex-grow-1 m-3">
                         <h6><b><t t-esc="column"/></b></h6>
                         <t t-foreach="_.random(2,6)">
                             <t t-call="KanbanView.ExamplesBackground.RecordGhost"/>
@@ -201,10 +201,10 @@
     </div>
 </t>
 <t t-name="KanbanView.ExamplesBackground.RecordGhost">
-    <div class="o_kanban_examples_ghost">
-        <div class="o_ghost_content"/>
-        <div class="o_ghost_content o_ghost_tag"/>
-        <img class="float-end o_ghost_avatar" src="/base/static/img/avatar.png" alt="Avatar"/>
+    <div class="o_kanban_examples_ghost mb-3 p-2 border bg-white">
+        <div class="o_ghost_content pb-3 bg-300"/>
+        <div class="o_ghost_content o_ghost_tag d-inline-block w-50 mt-3 pb-3 bg-300"/>
+        <img class="float-end o_ghost_avatar mt-2" src="/base/static/img/avatar.png" alt="Avatar"/>
     </div>
 </t>
 
diff --git a/addons/web/static/src/views/kanban/kanban.variables.scss b/addons/web/static/src/views/kanban/kanban.variables.scss
new file mode 100644
index 00000000000..71d7f0eb0bd
--- /dev/null
+++ b/addons/web/static/src/views/kanban/kanban.variables.scss
@@ -0,0 +1,25 @@
+$o-kanban-default-record-width: 300px !default;
+$o-kanban-small-record-width: 240px !default;
+$o-kanban-header-title-height: 50px !default;
+$o-kanban-image-width: 64px !default;
+$o-kanban-image-fill-width: 95px !default;
+$o-kanban-inside-vgutter: 8px !default;
+$o-kanban-inside-hgutter: 8px !default;
+$o-kanban-color-border-width: 2px !default;
+$o-kanban-inner-hmargin: 5px !default;
+$o-kanban-progressbar-height: 20px !default;
+$o-kanban-mobile-tabs-height: 40px !default;
+$o-kanban-mobile-empty-height: $o-kanban-image-width !default;
+$o-kanban-record-margin: $o-horizontal-padding / 2 !default;
+$o-kanban-group-padding: $o-horizontal-padding !default; // Cannot be higher than this
+$o-kanban-inside-hgutter-mobile: $o-horizontal-padding !default;
+
+// ------- Kanban dashboard variables -------
+
+// Used to manage spacing in complex dropdown menu
+$o-kanban-dashboard-dropdown-complex-gap: 5px !default;
+
+// Since rows and containers are used inside cards, we're
+// forced to set the padding relative to the grid system.
+$o-kanban-dashboard-hpadding: $o-horizontal-padding !default;
+$o-kanban-dashboard-vpadding: $o-horizontal-padding / 2 !default;
diff --git a/addons/web/static/src/views/kanban/kanban_animated_number.xml b/addons/web/static/src/views/kanban/kanban_animated_number.xml
index bb975d0074c..dd914dbe6e4 100644
--- a/addons/web/static/src/views/kanban/kanban_animated_number.xml
+++ b/addons/web/static/src/views/kanban/kanban_animated_number.xml
@@ -2,10 +2,10 @@
 <templates xml:space="preserve">
 
     <t t-name="web.KanbanAnimatedNumber" owl="1">
-        <div class="o_kanban_counter_side" t-att-class="state.value !== props.value and props.animationClass" t-att-title="props.title">
-            <span t-if="props.currency and props.currency.position === 'before'" t-esc="props.currency.symbol" />
+        <div class="o_kanban_counter_side ms-2 text-900 text-nowrap" t-att-class="state.value !== props.value and props.animationClass" t-att-title="props.title">
+            <span t-if="props.currency and props.currency.position === 'before'" t-esc="props.currency.symbol" class="ms-1"/>
             <b t-esc="format(state.value)" />
-            <span t-if="props.currency and props.currency.position === 'after'" t-esc="props.currency.symbol" />
+            <span t-if="props.currency and props.currency.position === 'after'" t-esc="props.currency.symbol" class="ms-1"/>
         </div>
     </t>
 
diff --git a/addons/web/static/src/views/kanban/kanban_column_examples_dialog.xml b/addons/web/static/src/views/kanban/kanban_column_examples_dialog.xml
index 0b7aea8b3af..ff5f70c62d7 100644
--- a/addons/web/static/src/views/kanban/kanban_column_examples_dialog.xml
+++ b/addons/web/static/src/views/kanban/kanban_column_examples_dialog.xml
@@ -3,13 +3,13 @@
 
     <t t-name="web.KanbanExamplesNotebookTemplate" owl="1">
         <div t-if="props.description" class="o_kanban_examples_description" t-out="props.description"/>
-        <div class="o_kanban_examples">
+        <div class="o_kanban_examples d-flex p-2">
             <t t-foreach="columns" t-as="column" t-key="column.title">
-                <div class="o_kanban_examples_group">
+                <div class="o_kanban_examples_group flex-grow-1 m-3">
                     <h6><b t-esc="column.title"/></h6>
-                    <div t-foreach="column.records" t-as="record" t-key="record.id" class="o_kanban_examples_ghost">
-                        <div class="o_ghost_content"/>
-                        <div class="o_ghost_content o_ghost_tag"/>
+                    <div t-foreach="column.records" t-as="record" t-key="record.id" class="o_kanban_examples_ghost p-2 border bg-white" t-att-class="{ 'o_collapse': record_index > 0 }">
+                        <div class="o_ghost_content pb-3 bg-300"/>
+                        <div class="o_ghost_content o_ghost_tag d-inline-block w-50 mt-3 pb-3 bg-300"/>
                         <span class="ms-2" t-if="record.bullet" t-out="record.bullet"/>
                     </div>
                 </div>
diff --git a/addons/web/static/src/views/kanban/kanban_column_progressbar.scss b/addons/web/static/src/views/kanban/kanban_column_progressbar.scss
index 8ccf768669b..ccfef788aed 100644
--- a/addons/web/static/src/views/kanban/kanban_column_progressbar.scss
+++ b/addons/web/static/src/views/kanban/kanban_column_progressbar.scss
@@ -10,26 +10,13 @@
             border-color: $mix-full;
         }
 
-        .progress-bar.bg-#{$class} {
-            border: 1px solid white;
-        }
-
         .oe_kanban_card_#{$class} {
             order: 1;
-            margin-bottom: $o-kanban-inside-vgutter*0.5;
-
-            ~ .oe_kanban_card_#{$class} {
-                margin-top: -$o-kanban-inside-vgutter*0.5 - 1px;
-            }
-
-            ~ .o_kanban_load_more {
-                margin-top: -$o-kanban-inside-vgutter*0.5;
-            }
         }
 
         .o_kanban_load_more {
             order: 2;
-            padding: $o-kanban-inside-vgutter*0.5 0 $o-kanban-inside-vgutter;
+            padding: var(--KanbanRecord-padding-v) 0;
         }
 
         .o_kanban_record:not(.oe_kanban_card_#{$class}) {
@@ -40,47 +27,14 @@
     }
 }
 
-// If columns has the progressbar, adapt the layout
-.o_kanban_view .o_kanban_group.o_kanban_has_progressbar {
-    > .o_kanban_header .o_kanban_header_title {
-        height: $o-kanban-header-title-height*0.6;
-        margin-top: 5px;
-    }
-
-    &.o_kanban_no_records {
-        .o_kanban_counter {
-            opacity: 0.3;
-        }
-    }
-}
-
 .o_kanban_counter {
-    position: relative;
-    display: flex;
-    align-items: center;
     transition: opacity 0.3s ease 0s;
-    margin-bottom: $o-kanban-record-margin*2;
 
     > .o_kanban_counter_progress {
-        width: 76%;
         height: $font-size-sm;
-        margin-bottom: 0;
-        background-color: map-get($grays, '300');
-        box-shadow: none;
-
-        .progress-bar {
-            margin-bottom: 0;
-            box-shadow: none;
-            cursor: pointer;
-        }
     }
 
     > .o_kanban_counter_side {
-        width: 21%;
-        margin-left: 3%;
-        color: $headings-color;
-        text-align: right;
-        white-space: nowrap;
         transform-origin: right center;
 
         &.o_kanban_grow {
@@ -90,53 +44,25 @@
         &.o_kanban_grow_huge {
             animation: grow_huge 1s ease 0s 1 normal none running;
         }
-
-        // Target currency icon
-        > span {
-            margin-left: 2px;
-        }
     }
 }
-.o_column_folded .o_kanban_counter {
-    display: none;
-}
 
 .o_kanban_view .o_kanban_group {
     @include o-kanban-css-filter(success, map-get($theme-colors, 'success'));
     @include o-kanban-css-filter(warning, map-get($theme-colors, 'warning'));
     @include o-kanban-css-filter(danger, map-get($theme-colors, 'danger'));
     @include o-kanban-css-filter(muted, map-get($theme-colors, 'dark'));
-
-    &.o_kanban_group_show {
-        display: flex;
-        flex-flow: column nowrap;
-
-        > * {
-            flex: 0 0 auto;
-        }
-    }
+    @include o-kanban-css-filter(info, map-get($theme-colors, 'info'));
 }
 
 @keyframes grow {
-    0% {
-        transform: scale3d(1, 1, 1);
-    }
     30% {
         transform: scale3d(1.1, 1.1, 1.1);
     }
-    100% {
-        transform: scale3d(1, 1, 1);
-    }
 }
 
 @keyframes grow_huge {
-    0% {
-        transform: scale3d(1, 1, 1);
-    }
     30% {
         transform: scale3d(1.3, 1.3, 1.3);
     }
-    100% {
-        transform: scale3d(1, 1, 1);
-    }
 }
diff --git a/addons/web/static/src/views/kanban/kanban_column_quick_create.xml b/addons/web/static/src/views/kanban/kanban_column_quick_create.xml
index 936066f9008..3c366ab14cb 100644
--- a/addons/web/static/src/views/kanban/kanban_column_quick_create.xml
+++ b/addons/web/static/src/views/kanban/kanban_column_quick_create.xml
@@ -3,16 +3,16 @@
 
     <t t-name="web.KanbanColumnQuickCreate" owl="1">
         <div class="o_column_quick_create" t-ref="root">
-            <div t-if="props.folded" class="o_quick_create_folded" t-on-click="unfold">
+            <div t-if="props.folded" class="o_quick_create_folded m-3 text-nowrap fw-bold opacity-75 opacity-100-hover" t-on-click="unfold">
                 <button class="o_kanban_add_column btn btn-outline-secondary w-100">
                     <i class="fa fa-plus me-2" role="img" aria-label="Add column" title="Add column"/><t t-out="props.groupByFieldString"/>
                 </button>
             </div>
-            <div t-else="" class="o_quick_create_unfolded">
-                <div class="o_kanban_header">
+            <div t-else="" class="o_quick_create_unfolded pt-3 px-2 pb-2">
+                <div class="o_kanban_header top-0 pb-3">
                     <div class="input-group">
                         <input type="text"
-                            class="form-control o_input"
+                            class="form-control o_input bg-transparent fs-4"
                             t-attf-placeholder="{{ props.groupByFieldString }}..."
                             t-ref="autofocus"
                             t-model.trim="state.columnTitle"
@@ -25,14 +25,14 @@
                             </button>
                         </span>
                     </div>
-                    <span t-if="!env.isSmall and state.hasInputFocused" class="o_discard_msg text-muted float-end">
+                    <small t-if="!env.isSmall and state.hasInputFocused" class="o_discard_msg text-muted float-end">
                         Esc to discard
-                    </span>
+                    </small>
                     <t t-if="props.exampleData and !env.isSmall">
-                        <button type="button" class="btn btn-link o_kanban_examples" t-on-click="showExamples">See examples</button>
+                        <button type="button" class="btn btn-link o_kanban_examples p-0" t-on-click="showExamples">See examples</button>
                     </t>
                 </div>
-                <div t-foreach="[,,,]" t-as="i" t-key="i_index" class="o_kanban_muted_record" />
+                <div t-foreach="[,,,]" t-as="i" t-key="i_index" class="o_kanban_muted_record mt-3 py-5 bg-300" />
             </div>
         </div>
     </t>
diff --git a/addons/web/static/src/views/kanban/kanban_controller.scss b/addons/web/static/src/views/kanban/kanban_controller.scss
index e20d627e845..941a0e5d046 100644
--- a/addons/web/static/src/views/kanban/kanban_controller.scss
+++ b/addons/web/static/src/views/kanban/kanban_controller.scss
@@ -1,7 +1,25 @@
 // ------- Kanban View Layout -------
 .o_kanban_renderer {
-    display: flex;
-    align-content: stretch;
+    // ----------------------------------------------------------------------------
+    // Default KanbanView values
+
+    --KanbanGroup-padding-h: #{$o-kanban-group-padding};
+    --KanbanGroup-padding-bottom: #{$o-kanban-group-padding};
+
+    --KanbanRecord-width: #{$o-kanban-default-record-width};
+    --KanbanRecord-margin-v: #{$o-kanban-record-margin};
+    --KanbanRecord-margin-h: #{$o-kanban-record-margin};
+    --KanbanRecord-padding-v: #{$o-kanban-inside-vgutter};
+    --KanbanRecord-padding-h: #{$o-kanban-inside-hgutter};
+    --KanbanRecord-gap-v: #{$o-kanban-inner-hmargin};
+
+    --KanbanRecord--small-width: #{$o-kanban-small-record-width};
+
+    --KanbanRecord__image-width: #{$o-kanban-image-width};
+    --KanbanRecord__image--fill-width: #{$o-kanban-image-fill-width};
+
+    --KanbanRecord__dropdown-gap: #{$border-width};
+    // ----------------------------------------------------------------------------
 
     .dropdown,
     .o_kanban_manage_button_section {
@@ -9,49 +27,27 @@
     }
 
     @include media-breakpoint-down(md) {
+        --KanbanRecord-padding-h: #{$o-kanban-inside-hgutter * 2};
         padding: 0px !important;
     }
 
     .o_kanban_record > div,
     .o_kanban_quick_create {
-        padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter;
+        padding: var(--KanbanRecord-padding-v) var(--KanbanRecord-padding-h);
         border: 1px solid $border-color;
         background-color: $o-view-background-color;
-
-        @include media-breakpoint-down(md) {
-            padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter-mobile;
-        }
-        &:focus,
-        &:focus-within {
-            z-index: 1; // show the shadow on top of the previous & next cards in grouped mode
-            outline: none;
-        }
     }
 
     .o_kanban_quick_create {
-        box-shadow: $box-shadow;
-        margin: 0 $o-kanban-record-margin ($o-kanban-record-margin * 2);
+        margin-bottom: calc(var(--KanbanRecord-margin-h) * 2);
 
-        .o_form_view {
-            padding: 0;
-            .o_group.o_inner_group {
-                margin: 0;
-            }
-        }
-
-        .o_kanban_cancel {
-            color: map-get($grays, "600"); // to make color uniform in community and enterprise
-        }
-
-        &.o_disabled {
-            pointer-events: none;
-            opacity: 0.7;
+        .o_form_view .o_group.o_inner_group {
+            margin: 0;
         }
     }
 
     .o_kanban_record {
         position: relative;
-        display: inline-block; // Force the creation of a block formatting context to clear float items
         min-width: 150px;
         margin: 0 0 -1px;
 
@@ -60,25 +56,23 @@
             height: 100%;
         }
 
+        &:focus,
+        &:focus-within {
+            z-index: 1; // show the shadow on top of the previous & next cards in grouped mode
+        }
+
         // ------- Kanban Record, v11 Layout -------
         // Records colours
         > div::after {
             content: "";
-            @include o-position-absolute(0, auto, 0, 0);
+            @include o-position-absolute($border-width * 2, auto, $border-width * 2, $border-width);
             width: $o-kanban-color-border-width;
         }
 
-        .o_kanban_record_details {
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            width: 100%;
-        }
-
         // Inner Sections
         .o_kanban_record_top,
         .o_kanban_record_body {
-            margin-bottom: $o-kanban-inner-hmargin;
+            margin-bottom: var(--KanbanRecord-gap-v);
         }
 
         .o_kanban_record_top,
@@ -114,7 +108,7 @@
 
         .o_kanban_record_subtitle {
             display: block;
-            margin-top: $o-kanban-inner-hmargin * 0.5;
+            margin-top: calc(var(--KanbanRecord-gap-v) * 0.5);
 
             i.fa[role="img"] {
                 margin-right: 2px;
@@ -172,15 +166,15 @@
 
             .o_kanban_image_fill_left {
                 position: relative;
-                margin-right: $o-kanban-inside-hgutter * 2;
+                margin-right: var(--KanbanRecord-padding-h);
                 @include media-breakpoint-up(sm) {
                     margin: {
-                        top: $o-kanban-inside-vgutter * -1;
-                        bottom: $o-kanban-inside-vgutter * -1;
-                        left: $o-kanban-inside-hgutter * -1;
+                        top: calc(var(--KanbanRecord-padding-v) * -1);
+                        bottom: calc(var(--KanbanRecord-padding-v) * -1);
+                        left: calc(var(--KanbanRecord-padding-h) * -1);
                     }
                 }
-                flex: 1 0 $o-kanban-image-fill-width;
+                flex: 1 0 var(--KanbanRecord__image--fill-width);
                 min-height: 95px;
                 background: {
                     size: cover;
@@ -198,9 +192,9 @@
             // Eg. In partners list we use to fill user picture only, keeping the
             // default design for company logos.
             .o_kanban_image {
-                margin-right: $o-kanban-inside-hgutter * 2;
-                flex: 0 0 $o-kanban-image-width;
-                min-height: $o-kanban-image-width;
+                margin-right: var(--KanbanRecord-padding-h);
+                flex: 0 0 var(--KanbanRecord__image-width);
+                min-height: var(--KanbanRecord__image-width);
                 align-self: center;
                 background: {
                     size: cover;
@@ -208,19 +202,9 @@
                     position: center;
                 }
 
-                // On medium screen size, align 'o_kanban_image' to 'o_kanban_image_fill_left' elements.
-                @include media-breakpoint-up(md) {
-                    $fill-notfill-gap: ($o-kanban-image-fill-width - $o-kanban-inside-hgutter * 2) -
-                        $o-kanban-image-width;
-                    margin: {
-                        left: $fill-notfill-gap * 0.5;
-                        right: $fill-notfill-gap * 2;
-                    }
-                }
-
                 @include media-breakpoint-down(md) {
-                    flex-basis: $o-kanban-image-fill-width;
-                    min-height: $o-kanban-image-fill-width;
+                    flex-basis: var(--KanbanRecord__image--fill-width);
+                    min-height: var(--KanbanRecord__image--fill-width);
                 }
 
                 // Reset immedialy after div padding
@@ -247,7 +231,6 @@
     }
 
     .o_dragged {
-        @extend .shadow;
         transform: rotate(-3deg);
         transition: transform 0.6s, box-shadow 0.3s;
 
@@ -266,21 +249,25 @@
         // -------  v11 Layout + generic layouts (~v10) -------
         // Kanban Record - Dropdown
         .o_dropdown_kanban {
-            @include o-position-absolute($o-kanban-inside-vgutter, $o-kanban-inside-hgutter);
+            @include o-position-absolute(
+                calc(var(--KanbanRecord-padding-v) + var(--KanbanRecord__dropdown-gap)),
+                calc(var(--KanbanRecord-padding-h) + var(--KanbanRecord__dropdown-gap))
+            );
             visibility: hidden;
-            margin: (-$o-kanban-inside-vgutter) (-$o-kanban-inside-hgutter) 0 0;
+            margin: calc(var(--KanbanRecord-padding-v) * -1)
+                calc(var(--KanbanRecord-padding-h) * -1) 0 0;
             @include media-breakpoint-down(md) {
                 visibility: visible;
             }
 
             .dropdown-toggle {
-                @include o-kanban-dropdown;
+                @include o-kanban-dropdown(var(--KanbanRecord-padding-h));
             }
             &.show .dropdown-toggle {
                 @include o-kanban-dropdown-open;
             }
             .dropdown-menu {
-                margin-top: -2px;
+                margin-top: -1px;
                 min-width: 11rem;
             }
         }
@@ -299,7 +286,7 @@
         .o_field_many2many_tags,
         .o_kanban_tags {
             display: block;
-            margin-bottom: $o-kanban-inner-hmargin;
+            margin-bottom: var(--KanbanRecord-gap-v);
             line-height: 1.2;
             word-break: break-all;
 
@@ -354,16 +341,12 @@
             > button,
             > a {
                 @include o-position-absolute(
-                    $right: $o-kanban-record-margin,
-                    $bottom: $o-kanban-record-margin
+                    $right: var(--KanbanRecord-padding-h),
+                    $bottom: var(--KanbanRecord-padding-v)
                 );
-                @include media-breakpoint-down(md) {
-                    right: $o-kanban-inside-hgutter-mobile;
-                }
             }
         }
 
-        // Kanban Record - Utility classes
         &.oe_kanban_global_click,
         &.oe_kanban_global_click_edit,
         .oe_kanban_global_click,
@@ -373,6 +356,10 @@
             &:focus-within {
                 outline: thin solid mix(map-get($theme-colors, "primary"), map-get($grays, "400"));
                 outline-offset: -1px;
+
+                &:after {
+                    transform: translateX($border-width);
+                }
             }
         }
 
@@ -406,13 +393,10 @@
 
         .o_kanban_image {
             float: left;
-            width: $o-kanban-image-width;
+            width: var(--KanbanRecord__image-width);
 
             + div {
-                padding-left: $o-kanban-image-width + $o-kanban-inside-hgutter;
-                @include media-breakpoint-down(md) {
-                    padding-left: $o-kanban-image-width + $o-kanban-inside-hgutter-mobile;
-                }
+                padding-left: calc(var(--KanbanRecord__image-width) + var(--KanbanRecord-padding-h));
             }
         }
 
@@ -424,7 +408,7 @@
             min-width: 0;
 
             ul {
-                margin-bottom: $o-kanban-inner-hmargin * 0.5;
+                margin-bottom: calc(var(--KanbanRecord-gap-v) * 0.5);
                 padding-left: 0;
                 list-style: none;
                 font-size: $font-size-sm;
@@ -461,8 +445,6 @@
     // Kanban Grouped Layout
     &.o_kanban_grouped {
         min-height: 100%;
-        padding: 0;
-        background-color: $gray-100;
 
         @include media-breakpoint-down(md) {
             min-height: initial;
@@ -471,43 +453,21 @@
             scroll-snap-type: x mandatory;
         }
 
-        .o_kanban_record,
-        .o_kanban_quick_create {
+        .o_kanban_record {
             width: 100%;
-            margin-left: 0;
-            margin-right: 0;
         }
 
         &.o_kanban_small_column .o_kanban_group:not(.o_column_folded) {
-            flex-basis: $o-kanban-small-record-width + 2 * $o-kanban-group-padding;
+            flex-basis: calc(var(--KanbanRecord--small-width) + (2 * var(--KanbanGroup-padding-h)));
         }
     }
 
     // Kanban Grouped Layout - Column default
     .o_kanban_group {
-        flex: 0 0 $o-kanban-default-record-width + 2 * $o-kanban-group-padding;
-        padding: 0 $o-kanban-group-padding $o-kanban-group-padding $o-kanban-group-padding;
-        background-color: inherit;
+        flex-basis: calc(var(--KanbanRecord-width) + (2 * var(--KanbanGroup-padding-h)));
+        padding: 0 var(--KanbanGroup-padding-h) var(--KanbanGroup-padding-bottom);
 
         .o_kanban_header > .o_kanban_header_title {
-            @include o-kanban-header-title;
-
-            .o_column_title {
-                flex: 1 1 auto;
-                @include o-text-overflow;
-                font-size: 16px;
-                font-weight: 500;
-            }
-
-            .o_column_unfold {
-                display: none;
-            }
-
-            .o_kanban_quick_add i {
-                @include o-kanban-icon;
-                margin-left: $o-kanban-inside-hgutter * 2;
-            }
-
             &:hover .o_kanban_config,
             .o_kanban_config.show {
                 visibility: visible;
@@ -522,9 +482,6 @@
                 > .dropdown-menu {
                     cursor: default;
                 }
-                i {
-                    @include o-kanban-icon;
-                }
             }
         }
     }
@@ -545,22 +502,11 @@
             }
 
             .o_kanban_header_title {
-                position: relative;
                 opacity: 0.5;
 
                 .o_column_title {
                     @include o-kanban-v-title;
                 }
-                .o_column_unfold {
-                    @include o-kanban-icon(1);
-                }
-            }
-
-            > .o_kanban_record,
-            .o_kanban_quick_add,
-            .o_kanban_config,
-            .o_kanban_load_more {
-                display: none !important;
             }
 
             &:hover,
@@ -574,96 +520,40 @@
 
     // Kanban Grouped Layout - "Create new column" column
     .o_column_quick_create {
-        flex: 0 0 $o-kanban-small-record-width + 2 * $o-kanban-group-padding;
-
-        .o_quick_create_folded {
-            cursor: pointer;
-            padding: 12px 16px;
-            white-space: nowrap;
-            font-weight: $font-weight-bold;
-            @include o-hover-opacity(0.7);
-            @include o-hover-text-color($text-muted, $body-color);
-        }
-
-        .o_quick_create_unfolded {
-            margin: $border-width ($o-kanban-inside-hgutter * 0.5) 0;
-            padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter;
-
-            @include media-breakpoint-down(md) {
-                margin: 0;
-            }
-
-            .o_kanban_header {
-                height: 50px;
-
-                .o_kanban_examples {
-                    cursor: pointer;
-                }
-
-                input,
-                input:focus,
-                input:hover {
-                    font-size: 16px;
-                    background: transparent;
-                }
-            }
-
-            .o_kanban_muted_record {
-                background: map-get($grays, "300");
-                height: 70px;
-                margin: 10px 0px;
-            }
-        }
+        flex: 0 0 calc(var(--KanbanRecord--small-width) + (2 * var(--KanbanGroup-padding-h)));
     }
 
     @include media-breakpoint-down(md) {
         .o_kanban_group,
         .o_column_quick_create {
-            flex: 1 0 90%; // don't take full width to give a hint of next/previous column
+            flex-basis: 90%; // don't take full width to give a hint of next/previous column
             scroll-snap-align: center;
             overflow-y: scroll;
 
             .o_kanban_header {
                 position: sticky; // keep it visible
-                top: 0;
-                z-index: 10; // same as the sticky ControlPanel
+                z-index: $zindex-sticky;
                 background-color: inherit;
             }
-
-            .o_kanban_header_title {
-                margin-top: 0 !important; // avoid sticky glitch when scrolling
-            }
         }
     }
 
     // Kanban UN-grouped Layout
     &.o_kanban_ungrouped {
         min-height: 100%;
-        align-content: flex-start;
-        flex-flow: row wrap;
-        justify-content: flex-start;
-
-        padding: $o-kanban-record-margin ($o-horizontal-padding - $o-kanban-record-margin);
+        padding: var(--KanbanRecord-margin-v) var(--KanbanRecord-margin-h);
 
         .o_kanban_record {
-            display: flex;
-            flex: 1 1 auto;
-            width: $o-kanban-default-record-width;
-            margin: ($o-kanban-record-margin * 0.5) $o-kanban-record-margin;
+            width: var(--KanbanRecord-width);
+            margin: calc(var(--KanbanRecord-margin-v) * 0.5) var(--KanbanRecord-margin-h);
 
             @include media-breakpoint-down(md) {
                 margin: 0 0 -1px 0;
-                flex: 1 0 100%;
+                flex-basis: 100%;
             }
 
             &.o_kanban_ghost {
-                height: 0;
-                border: none;
-                min-height: 0 !important; // to prevent view writers to override this height
-                visibility: hidden;
-                margin-top: 0;
-                margin-bottom: 0;
-                padding: 0;
+                max-height: 0 !important; // to prevent view writers to override this height
             }
         }
     }
@@ -686,17 +576,6 @@
 
 // ----------------- Set Cover Dialog -----------------
 .modal .o_kanban_cover_container .o_kanban_cover_image {
-    border: 1px solid $border-color;
     height: 120px;
     width: 120px;
-    cursor: pointer;
-
-    &.o_selected {
-        border-color: $o-brand-primary;
-    }
-
-    > img {
-        @include o-position-absolute(0, 0, 0, 0);
-        max-height: 100%;
-    }
 }
diff --git a/addons/web/static/src/views/kanban/kanban_cover_image_dialog.xml b/addons/web/static/src/views/kanban/kanban_cover_image_dialog.xml
index f0f72c52228..eb8dcda47f3 100644
--- a/addons/web/static/src/views/kanban/kanban_cover_image_dialog.xml
+++ b/addons/web/static/src/views/kanban/kanban_cover_image_dialog.xml
@@ -5,11 +5,11 @@
         <Dialog title="'Set a Cover Image'" size="'lg'">
             <div t-if="attachments.length" class="o_kanban_cover_container bg-100">
                 <t t-foreach="attachments" t-as="attachment" t-key="attachment.id">
-                    <div class="o_kanban_cover_image position-relative d-inline-block m-2 bg-white" t-att-class="{
-                        o_selected: state.selectedAttachmentId === attachment.id,
+                    <div class="o_kanban_cover_image position-relative d-inline-block m-2 border bg-white o_cursor_pointer" t-att-class="{
+                        'o_selected border-primary': state.selectedAttachmentId === attachment.id,
                     }">
                         <img t-attf-src="/web/image/{{attachment.id}}?unique=1"
-                            class="m-auto mw-100"
+                            class="position-absolute start-0 end-0 top-0 bottom-0 mw-100 mh-100 m-auto"
                             alt="Attachment"
                             t-on-click="() => this.selectAttachment(attachment, false)"
                             t-on-dblclick="() => this.selectAttachment(attachment, true)"
diff --git a/addons/web/static/src/views/kanban/kanban_dashboard.scss b/addons/web/static/src/views/kanban/kanban_dashboard.scss
index 08f44be96f7..9a2d158e077 100644
--- a/addons/web/static/src/views/kanban/kanban_dashboard.scss
+++ b/addons/web/static/src/views/kanban/kanban_dashboard.scss
@@ -1,15 +1,18 @@
 .o_kanban_dashboard:not(.o_legacy_kanban_view) {
-    &:not(.o_kanban_grouped) {
-        // correctly display the no_content_helper in dashboards
-        flex-flow: row wrap;
-    }
+    // ----------------------------------------------------------------------------
+    // Customize kanbanView default values
+
+    --KanbanRecord-padding-v: #{$o-kanban-dashboard-vpadding};
+    --KanbanRecord-padding-h: #{$o-kanban-dashboard-hpadding};
+
+    --KanbanRecord__dropdown-gap: 0px;
+    // ----------------------------------------------------------------------------
 
     .o_kanban_record > div {
         position: relative;
         display: flex;
         flex-flow: column nowrap;
         justify-content: space-between;
-        padding: $o-kanban-dashboard-vpadding $o-kanban-dashboard-hpadding;
 
         @include media-breakpoint-down(md) {
             margin-bottom: 10px;
@@ -18,6 +21,7 @@
         // ------- Generic layout adaptations -------
         .container {
             width: 100%;
+            max-width: none;
         }
 
         // ------- Dropdown toggle & menu -------
@@ -128,7 +132,7 @@
 
         // Provide enough room for the dropdown-toggle
         .o_primary {
-            padding-right: $o-kanban-dashboard-hpadding*2;
+            padding-right: calc(var(--KanbanRecord-padding-h) * 2);
         }
 
         // Uniform titles
@@ -163,7 +167,7 @@
             display: flex;
             flex-flow: column nowrap;
             justify-content: space-between;
-            margin-top: $o-kanban-dashboard-vpadding * 2;
+            margin-top: calc(var(--KanbanRecord-padding-v) * 2);
             padding-right: 0;
             padding-left: 0;
 
@@ -184,14 +188,14 @@
             }
 
             .o_kanban_primary_bottom {
-                margin-top: $o-kanban-dashboard-vpadding;
-                margin-bottom: -$o-kanban-dashboard-vpadding;
+                margin-top: var(--KanbanRecord-padding-v);
+                margin-bottom: calc(var(--KanbanRecord-padding-v) * -1);
 
                 &.bottom_block {
                     border-top: 1px solid map-get($grays, '300');
                     background-color: map-get($grays, '200');
-                    padding-top: $o-kanban-dashboard-vpadding;
-                    padding-bottom: $o-kanban-dashboard-vpadding;
+                    padding-top: var(--KanbanRecord-padding-v);
+                    padding-bottom: var(--KanbanRecord-padding-v);
                 }
             }
         }
@@ -202,7 +206,10 @@
     }
 
     .o_favorite {
-        @include o-position-absolute(3px, $left: 0);
+        @include o-position-absolute(
+            $top: var(--KanbanRecord-padding-v),
+            $left: calc(var(--KanbanRecord-padding-h) - #{$o-horizontal-padding})
+        );
         padding: $o-kanban-record-margin;
     }
 
diff --git a/addons/web/static/src/views/kanban/kanban_examples_dialog.scss b/addons/web/static/src/views/kanban/kanban_examples_dialog.scss
index 2c56a485ce2..9e50f0de314 100644
--- a/addons/web/static/src/views/kanban/kanban_examples_dialog.scss
+++ b/addons/web/static/src/views/kanban/kanban_examples_dialog.scss
@@ -46,54 +46,25 @@
 
 // container ghost card in background
 .o_kanban_example_background_container {
-    display: flex;
-    padding: 0px;
-    opacity: 0.4;
 
     // content
     .o_kanban_example_background {
-        flex: 1 1 100%;
+        flex-basis: 100%;
 
-        .o_kanban_examples {
-            .o_kanban_examples_group {
-                .o_kanban_examples_ghost {
-                    width: 224px;
-                    margin-bottom: 10px;
-                }
-            }
+        .o_kanban_examples .o_kanban_examples_group .o_kanban_examples_ghost {
+            width: var(--KanbanRecord--small-width);
         }
     }
 }
 
-
 // kanban ghost card
-.o_kanban_examples {
-    display: flex;
-    padding: 0 6px;
+.o_kanban_examples .o_kanban_examples_group .o_kanban_examples_ghost {
+    &.o_collapse {
+        margin-top: -1px;
+    }
 
-    .o_kanban_examples_group {
-        flex: 1 1 100%;
-        margin: 10px;
-
-        .o_kanban_examples_ghost {
-            padding: 5px;
-            margin-top: -1px;
-            border: thin solid map-get($grays, '300');
-            background-color: white;
-            .o_ghost_content {
-                height: 12px;
-                background: map-get($grays, '300');
-                &.o_ghost_tag {
-                    display: inline-block;
-                    width: 40%;
-                    margin-top: 10px;
-                }
-            }
-            .o_ghost_avatar {
-                height: 20px;
-                width: 20px;
-                margin-top: 6px;
-            }
-        }
+    .o_ghost_avatar {
+        height: 20px;
+        width: 20px;
     }
 }
diff --git a/addons/web/static/src/views/kanban/kanban_record.js b/addons/web/static/src/views/kanban/kanban_record.js
index 182af1951ac..1359ddf48ca 100644
--- a/addons/web/static/src/views/kanban/kanban_record.js
+++ b/addons/web/static/src/views/kanban/kanban_record.js
@@ -221,7 +221,7 @@ export class KanbanRecord extends Component {
 
     getRecordClasses() {
         const { archInfo, canResequence, forceGlobalClick, group, record } = this.props;
-        const classes = ["o_kanban_record"];
+        const classes = ["o_kanban_record d-flex"];
         if (canResequence) {
             classes.push("o_record_draggable");
         }
@@ -239,6 +239,9 @@ export class KanbanRecord extends Component {
         if (record.model.useSampleModel) {
             classes.push("o_sample_data_disabled");
         }
+        if (!this.props.list.isGrouped) {
+            classes.push("flex-grow-1 flex-md-shrink-1 flex-shrink-0");
+        }
         return classes.join(" ");
     }
 
diff --git a/addons/web/static/src/views/kanban/kanban_record_quick_create.xml b/addons/web/static/src/views/kanban/kanban_record_quick_create.xml
index be6c15b8825..82641530d9b 100644
--- a/addons/web/static/src/views/kanban/kanban_record_quick_create.xml
+++ b/addons/web/static/src/views/kanban/kanban_record_quick_create.xml
@@ -3,11 +3,11 @@
 
     <t t-name="web.KanbanRecordQuickCreate" owl="1">
         <div
-            class="o_kanban_quick_create"
-            t-att-class="{ o_disabled: state.disabled }"
+            class="o_kanban_quick_create shadow"
+            t-att-class="{ o_disabled: state.disabled, 'w-100 mx-0': props.listIsGrouped }"
             t-ref="root"
         >
-            <FormRenderer class="'o_form_view o_xxs_form_view'" record="props.record" archInfo="props.archInfo" />
+            <FormRenderer class="'o_form_view o_xxs_form_view p-0'" record="props.record" archInfo="props.archInfo" />
             <div class="d-flex">
                 <button class="btn btn-primary o_kanban_add me-1 text_truncate" t-on-click="() => this.validate('add')">
                     Add
@@ -15,7 +15,7 @@
                 <button class="btn btn-primary o_kanban_edit me-1 text_truncate" t-on-click="() => this.validate('edit')">
                     Edit
                 </button>
-                <button class="btn btn-secondary o_kanban_cancel ms-auto" t-on-click="() => this.cancel(true)">
+                <button class="btn btn-secondary o_kanban_cancel ms-auto text-600" t-on-click="() => this.cancel(true)">
                     <i class="fa fa-trash" />
                 </button>
             </div>
diff --git a/addons/web/static/src/views/kanban/kanban_renderer.js b/addons/web/static/src/views/kanban/kanban_renderer.js
index 24611b5c2f6..b589999e4a0 100644
--- a/addons/web/static/src/views/kanban/kanban_renderer.js
+++ b/addons/web/static/src/views/kanban/kanban_renderer.js
@@ -61,11 +61,11 @@ export class KanbanRenderer extends Component {
                     if (group) {
                         dataGroupId = group.dataset.id;
                     }
-                    element.classList.add("o_dragged");
+                    element.classList.add("o_dragged", "shadow");
                 },
                 onGroupEnter: (group) => group.classList.add("o_kanban_hover"),
                 onGroupLeave: (group) => group.classList.remove("o_kanban_hover"),
-                onStop: (_group, element) => element.classList.remove("o_dragged"),
+                onStop: (_group, element) => element.classList.remove("o_dragged", "shadow"),
                 onDrop: async ({ element, previous, parent }) => {
                     element.classList.remove("o_record_draggable");
                     const refId = previous ? previous.dataset.id : null;
@@ -89,9 +89,9 @@ export class KanbanRenderer extends Component {
                 // Hooks
                 onStart: (_group, element) => {
                     dataGroupId = element.dataset.id;
-                    element.classList.add("o_dragged");
+                    element.classList.add("o_dragged", "shadow");
                 },
-                onStop: (_group, element) => element.classList.remove("o_dragged"),
+                onStop: (_group, element) => element.classList.remove("o_dragged", "shadow"),
                 onDrop: async ({ element, previous }) => {
                     element.classList.remove("o_group_draggable");
                     const refId = previous ? previous.dataset.id : null;
@@ -262,6 +262,9 @@ export class KanbanRenderer extends Component {
         if (!this.env.isSmall && group.isFolded) {
             classes.push("o_column_folded");
         }
+        if (this.canResequenceGroups && group.value && !group.isFolded && !group.hasActiveProgressValue) {
+            classes.push("bg-100");
+        }
         if (group.progressBars.length) {
             classes.push("o_kanban_has_progressbar");
             if (!group.isFolded && group.hasActiveProgressValue) {
diff --git a/addons/web/static/src/views/kanban/kanban_renderer.xml b/addons/web/static/src/views/kanban/kanban_renderer.xml
index c176f6e907f..8dce78bde96 100644
--- a/addons/web/static/src/views/kanban/kanban_renderer.xml
+++ b/addons/web/static/src/views/kanban/kanban_renderer.xml
@@ -2,25 +2,25 @@
 <templates xml:space="preserve">
 
     <t t-name="web.KanbanRenderer" owl="1">
-        <div class="o_kanban_renderer o_renderer"
-            t-attf-class="o_kanban_{{ props.list.isGrouped ? '' : 'un' }}grouped {{ props.archInfo.className or '' }}"
+        <div class="o_kanban_renderer o_renderer d-flex"
+            t-attf-class="{{ props.list.isGrouped ? 'o_kanban_grouped align-content-stretch' : 'o_kanban_ungrouped align-content-start flex-wrap justify-content-start' }} {{ props.archInfo.className or '' }}"
             t-ref="root"
         >
             <t t-foreach="getGroupsOrRecords()" t-as="groupOrRecord" t-key="groupOrRecord.key">
                 <t t-if="groupOrRecord.group">
                     <t t-set="group" t-value="groupOrRecord.group" />
-                    <div class="o_kanban_group"
+                    <div class="o_kanban_group flex-shrink-0 flex-grow-1 flex-md-grow-0"
                         t-att-class="getGroupClasses(group)"
                         t-att-data-id="(canResequenceRecords or canResequenceGroups) and group.id"
                         t-on-click="(ev) => this.onGroupClick(group, ev)"
                     >
-                        <div class="o_kanban_header">
-                            <div class="o_kanban_header_title" t-att="tooltipAttributes(group)">
-                                <span class="o_column_title" t-esc="getGroupName(group)"/>
+                        <div class="o_kanban_header top-0" t-attf-class="{{ !env.isSmall and group.isFolded ? 'pt-3' : 'py-3' }}">
+                            <div class="o_kanban_header_title position-relative d-flex align-items-center lh-lg text-900" t-att="tooltipAttributes(group)">
+                                <span class="o_column_title flex-grow-1 d-inline-block mw-100 text-truncate fs-4 fw-bold align-top" t-att-class="{ 'overflow-visible': !env.isSmall and group.isFolded }" t-esc="getGroupName(group)"/>
                                 <t t-if="env.isSmall or !group.isFolded">
-                                    <Dropdown class="'o_kanban_config'" togglerClass="'btn p-0'">
+                                    <Dropdown class="'o_kanban_config'" togglerClass="'btn p-0 border-0'">
                                         <t t-set-slot="toggler">
-                                            <i class="fa fa-gear" role="img" aria-label="Settings" title="Settings" />
+                                            <i class="fa fa-gear fa-stack d-block text-center text-700 small opacity-50 opacity-100-hover cursor-pointer" role="img" aria-label="Settings" title="Settings" />
                                         </t>
                                         <DropdownItem t-if="!env.isSmall" class="{
                                                 'o_kanban_toggle_fold': true,
@@ -47,21 +47,21 @@
                                             </DropdownItem>
                                         </t>
                                     </Dropdown>
-                                    <span t-if="props.list.canQuickCreate()" class="o_kanban_quick_add" t-on-click="() => this.quickCreate(group)">
-                                        <i class="fa fa-plus" role="img" aria-label="Quick add" title="Quick add" />
-                                    </span>
+                                    <button t-if="props.list.canQuickCreate()" class="o_kanban_quick_add btn p-0 border-0 fs-6 shadow-none" t-on-click="() => this.quickCreate(group)">
+                                        <i class="fa fa-plus fa-stack d-block small text-end text-700 opacity-50 opacity-100-hover cursor-pointer" role="img" aria-label="Quick add" title="Quick add" />
+                                    </button>
                                 </t>
-                                <span t-else="" class="o_column_unfold">
+                                <button t-else="" class="o_column_unfold btn btn-link d-block mt-0 mt-md-2 p-0 border-0 small text-center text-700 cursor-pointer">
                                     <i class="fa fa-arrows-h" role="img" aria-label="Unfold" title="Unfold" />
-                                </span>
+                                </button>
                             </div>
-                            <div t-if="(env.isSmall or !group.isFolded) and group.progressBars.length" class="o_kanban_counter">
-                                <div class="o_kanban_counter_progress progress">
+                            <div t-if="(env.isSmall or !group.isFolded) and group.progressBars.length" class="o_kanban_counter position-relative d-flex align-items-center justify-content-between" t-att-class="{ 'opacity-25': !group.count }">
+                                <div class="o_kanban_counter_progress progress w-75 bg-300">
                                     <t t-foreach="group.progressBars" t-as="progressBar" t-key="progressBar.value">
                                         <div t-if="progressBar.count"
                                             role="progressbar"
-                                            class="progress-bar o_bar_has_records"
-                                            t-att-class="{ 'progress-bar-animated progress-bar-striped': group.progressValue.active === progressBar.value }"
+                                            class="progress-bar o_bar_has_records cursor-pointer"
+                                            t-att-class="{ 'progress-bar-animated progress-bar-striped': group.progressValue.active === progressBar.value, 'border border-white': !group.isFolded and group.hasActiveProgressValue }"
                                             t-attf-class="bg-{{ progressBar.color }}"
                                             t-attf-style="width: {{ progressBar.count / (group.count or 1) * 100 }}%;"
                                             aria-valuemin="0"
@@ -91,6 +91,7 @@
                                         archInfo="props.list.quickCreateInfo"
                                         onCancel="force => group.list.cancelQuickCreate(force)"
                                         onValidate="mode => this.validateQuickCreate(mode, group)"
+                                        listIsGrouped="props.list.isGrouped"
                                     />
                                 </t>
                                 <t t-else="">
@@ -144,16 +145,17 @@
                     />
                 </t>
                 <!-- Kanban Example Background -->
-                <div t-if="props.list.groups.length === 0" class="o_kanban_example_background_container">
-                    <div class="o_kanban_example_background">
-                        <div class="o_kanban_examples">
-                            <div t-foreach="ghostColumns" t-as="column" t-key="column" class="o_kanban_examples_group">
+                <div t-if="props.list.groups.length === 0" class="o_kanban_example_background_container d-flex opacity-50">
+                    <div class="o_kanban_example_background flex-grow-1">
+                        <div class="o_kanban_examples d-flex p-2">
+                            <div t-foreach="ghostColumns" t-as="column" t-key="column" class="o_kanban_examples_group flex-grow-1 m-3">
                                 <h6><b t-esc="column.name"/></h6>
-                                <div t-foreach="column.cards" t-as="card" t-key="card_index" class="o_kanban_examples_ghost">
-                                    <div class="o_ghost_content"/>
-                                    <div class="o_ghost_content o_ghost_tag"/>
-                                    <!-- FIXME WOWL example avatar is white on white (also in legacy) -->
-                                    <img class="float-end o_ghost_avatar" src="/base/static/img/avatar.png" alt="Avatar"/>
+                                <div t-foreach="column.cards" t-as="card" t-key="card_index" class="o_kanban_examples_ghost d-flex flex-wrap justify-content-between mb-3 p-2 border bg-white">
+                                    <div class="o_ghost_content w-100 pb-3 bg-300"/>
+                                    <div class="o_ghost_content o_ghost_tag d-inline-block w-50 mt-3 pb-3 bg-300"/>
+                                    <span class="mt-2 rounded-circle bg-300">
+                                        <img class="o_ghost_avatar" src="/base/static/img/avatar.png" alt="Avatar"/>
+                                    </span>
                                 </div>
                             </div>
                         </div>
@@ -162,7 +164,7 @@
             </t>
             <t t-else="">
                 <!-- kanban ghost cards are used to properly space last elements. -->
-                <div t-foreach="[,,,,,,]" t-as="i" t-key="i_index" class="o_kanban_record o_kanban_ghost" />
+                <div t-foreach="[,,,,,,]" t-as="i" t-key="i_index" class="o_kanban_record o_kanban_ghost flex-grow-1 flex-md-shrink-1 flex-shrink-0 my-0" />
             </t>
             <t t-if="showNoContentHelper">
                 <t t-if="props.noContentHelp" t-call="web.ActionHelper">