diff --git a/sf_warehouse/__manifest__.py b/sf_warehouse/__manifest__.py
index fb0a512f..841b72c6 100644
--- a/sf_warehouse/__manifest__.py
+++ b/sf_warehouse/__manifest__.py
@@ -23,7 +23,11 @@
         'web.assets_qweb': [
         ],
         'web.assets_backend':[
-            'sf_warehouse/static/src/kanban_color_change.scss'
+            # 'sf_warehouse/static/src/js/vanilla-masker.min.js',
+            'sf_warehouse/static/src/css/kanban_color_change.scss',
+            'sf_warehouse/static/src/js/custom_kanban_controller.js',
+            'sf_warehouse/static/src/xml/custom_kanban_controller.xml',
+
         ]
 
 
diff --git a/sf_warehouse/static/src/css/kanban_color_change.scss b/sf_warehouse/static/src/css/kanban_color_change.scss
new file mode 100644
index 00000000..ddb39767
--- /dev/null
+++ b/sf_warehouse/static/src/css/kanban_color_change.scss
@@ -0,0 +1,25 @@
+.oe_kanban_card.kanban_color_1 {
+    background-color: #73b9a2 !important;
+}
+
+.oe_kanban_card.kanban_color_2 {
+    background-color: #ac6767 !important;
+}
+
+.oe_kanban_card.kanban_color_3 {
+    background-color: #77787b !important;
+}
+
+.color-guide {
+    border: 1px solid #ccc;
+    background-color: #f9f9f9;
+    padding: 10px;
+}
+
+.color-guide-item {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    margin-right: 10px;
+    border-radius: 50%;
+}
diff --git a/sf_warehouse/static/src/js/custom_kanban_controller.js b/sf_warehouse/static/src/js/custom_kanban_controller.js
new file mode 100644
index 00000000..7b9d01fb
--- /dev/null
+++ b/sf_warehouse/static/src/js/custom_kanban_controller.js
@@ -0,0 +1,21 @@
+/** @odoo-module */
+
+import { KanbanController } from "@web/views/kanban/kanban_controller";
+import { kanbanView } from "@web/views/kanban/kanban_view";
+import { registry } from "@web/core/registry";
+
+// the controller usually contains the Layout and the renderer.
+class CustomKanbanController extends KanbanController {
+    // Your logic here, override or insert new methods...
+    // if you override setup(), don't forget to call super.setup()
+}
+
+CustomKanbanController.template = "sf_warehouse.CustomKanbanView";
+
+export const customKanbanView = {
+    ...kanbanView, // contains the default Renderer/Controller/Model
+    Controller: CustomKanbanController,
+};
+
+// Register it to the views registry
+registry.category("views").add("custom_kanban", customKanbanView);
\ No newline at end of file
diff --git a/sf_warehouse/static/src/kanban_color_change.scss b/sf_warehouse/static/src/kanban_color_change.scss
deleted file mode 100644
index eca158e1..00000000
--- a/sf_warehouse/static/src/kanban_color_change.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.oe_kanban_card.kanban_color_1 {
-    background-color: red !important;
-}
-
-.oe_kanban_card.kanban_color_2 {
-    background-color: blue !important;
-}
-
-.oe_kanban_card.kanban_color_3 {
-    background-color: green !important;
-}
diff --git a/sf_warehouse/static/src/xml/custom_kanban_controller.xml b/sf_warehouse/static/src/xml/custom_kanban_controller.xml
new file mode 100644
index 00000000..d5b426b8
--- /dev/null
+++ b/sf_warehouse/static/src/xml/custom_kanban_controller.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates>
+    <t t-name="sf_warehouse.CustomKanbanView" t-inherit="web.KanbanView" owl="1">
+<!--         <xpath expr="//Layout" position="before"> -->
+<!--             <div> -->
+<!--                 Hello world ! -->
+<!--             </div> -->
+<!--         </xpath>         -->
+        <xpath expr="//t[@t-component='props.Renderer']" position="before">
+            <div>
+                Hello world !
+            </div>
+        </xpath>
+
+    </t>
+</templates>
\ No newline at end of file
diff --git a/sf_warehouse/views/view.xml b/sf_warehouse/views/view.xml
index f5a41d43..ba03d4ad 100644
--- a/sf_warehouse/views/view.xml
+++ b/sf_warehouse/views/view.xml
@@ -74,7 +74,7 @@
         <field name="name">example.kanban</field>
         <field name="model">stock.location</field>
         <field name="arch" type="xml">
-            <kanban class="o_kanban_mobile">
+            <kanban class="o_kanban_mobile" js_class="custom_kanban">
                 <templates>
                 <t t-name="kanban-box">
                     <div t-attf-class="oe_kanban_card oe_kanban_global_click