diff --git a/addons/web/static/src/views/kanban/kanban_controller.scss b/addons/web/static/src/views/kanban/kanban_controller.scss
index 941a0e5d046..089da233c8c 100644
--- a/addons/web/static/src/views/kanban/kanban_controller.scss
+++ b/addons/web/static/src/views/kanban/kanban_controller.scss
@@ -484,6 +484,10 @@
                 }
             }
         }
+        &.o_kanban_hover {
+            background-color: #00a09d0d;
+            box-shadow: -1px 0px 0px 0px #00a09d inset, 1px 0px 0px 0px #00a09d inset;
+        }
     }
 
     .o_group_draggable .o_column_title {
diff --git a/addons/web/static/src/views/kanban/kanban_renderer.js b/addons/web/static/src/views/kanban/kanban_renderer.js
index f24774eec32..e6c13fb9147 100644
--- a/addons/web/static/src/views/kanban/kanban_renderer.js
+++ b/addons/web/static/src/views/kanban/kanban_renderer.js
@@ -65,9 +65,13 @@ export class KanbanRenderer extends Component {
                 },
                 onGroupEnter: (group) => group.classList.add("o_kanban_hover"),
                 onGroupLeave: (group) => group.classList.remove("o_kanban_hover"),
-                onStop: (_group, element) => element.classList.remove("o_dragged", "shadow"),
+                onStop: (group, element) => {
+                    group && group.classList && group.classList.remove("o_kanban_hover");
+                    element.classList.remove("o_dragged", "shadow");
+                },
                 onDrop: async ({ element, previous, parent }) => {
                     element.classList.remove("o_record_draggable");
+                    parent && parent.classList && parent.classList.remove("o_kanban_hover");
                     const refId = previous ? previous.dataset.id : null;
                     const targetGroupId = parent && parent.dataset.id;
                     await this.props.list.moveRecord(
diff --git a/addons/web/static/tests/views/kanban_view_tests.js b/addons/web/static/tests/views/kanban_view_tests.js
index ad389ed013d..0ffcb597e52 100644
--- a/addons/web/static/tests/views/kanban_view_tests.js
+++ b/addons/web/static/tests/views/kanban_view_tests.js
@@ -3,6 +3,7 @@
 import { makeFakeDialogService } from "@web/../tests/helpers/mock_services";
 import {
     click,
+    drag,
     dragAndDrop,
     editInput,
     getFixture,
@@ -4041,6 +4042,34 @@ QUnit.module("Views", (hooks) => {
         assert.verifySteps(["resequence"]);
     });
 
+    QUnit.test("drag and drop highlight on hover", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban on_create="quick_create">
+                <field name="product_id"/>
+                <templates><t t-name="kanban-box">
+                <div class="oe_kanban_global_click"><field name="foo"/>
+                </div>
+                </t></templates>
+                </kanban>`,
+            groupBy: ["product_id"],
+        });
+        assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 2);
+        assert.containsN(target, ".o_kanban_group:nth-child(2) .o_kanban_record", 2);
+
+        // first record of first column moved to the bottom of second column
+        const drop = drag(
+            ".o_kanban_group:first-child .o_kanban_record",
+            ".o_kanban_group:nth-child(2)"
+        );
+        assert.hasClass(target.querySelector(".o_kanban_group:nth-child(2)"), "o_kanban_hover");
+        await drop();
+        assert.containsNone(target, ".o_kanban_group:nth-child(2).o_kanban_hover");
+    });
+
     QUnit.test("drag and drop a record, grouped by selection", async (assert) => {
         assert.expect(7);