diff --git a/addons/sale/static/src/js/product_catalog/kanban_record.xml b/addons/sale/static/src/js/product_catalog/kanban_record.xml
index a54b48ddd63..5d521d03505 100644
--- a/addons/sale/static/src/js/product_catalog/kanban_record.xml
+++ b/addons/sale/static/src/js/product_catalog/kanban_record.xml
@@ -8,7 +8,7 @@
              t-on-click="onGlobalClick"
              t-ref="root">
             <div class="d-flex flex-column h-100"
-                 t-att-class="{'text-bg-primary': productCatalogData.quantity || productCatalogData.readOnly}">
+                 t-att-class="{'o_sale_product_added': productCatalogData.quantity}">
                 <t t-call="{{ templates[this.constructor.KANBAN_BOX_ATTRIBUTE] }}"
                    t-call-context="this.renderingContext"/>
                 <ProductCatalogSOL productId="props.record.resId" t-props="productCatalogData"/>
diff --git a/addons/sale/static/src/js/product_catalog/sale_order_line/sale_order_line.scss b/addons/sale/static/src/js/product_catalog/sale_order_line/sale_order_line.scss
index dd371b4b6d9..1e23517befd 100644
--- a/addons/sale/static/src/js/product_catalog/sale_order_line/sale_order_line.scss
+++ b/addons/sale/static/src/js/product_catalog/sale_order_line/sale_order_line.scss
@@ -9,3 +9,8 @@ div.o_sale_product_catalog_quantity {
         }
     }
 }
+
+.o_sale_product_kanban_view .o_kanban_renderer .o_kanban_record .o_sale_product_added {
+    background-color: $o-component-active-bg;
+    border-color: $o-component-active-border;
+}
diff --git a/addons/sale/static/src/js/product_catalog/sale_order_line/sale_order_line.xml b/addons/sale/static/src/js/product_catalog/sale_order_line/sale_order_line.xml
index cf4e2d7b3b3..b492414acad 100644
--- a/addons/sale/static/src/js/product_catalog/sale_order_line/sale_order_line.xml
+++ b/addons/sale/static/src/js/product_catalog/sale_order_line/sale_order_line.xml
@@ -9,18 +9,18 @@
         <span t-if="props.readOnly" class="my-2 pt-3 border-top">
             You can't edit this product in the catalog.
         </span>
-        <div t-else="" class="my-2 pt-3 border-top d-flex justify-content-end">
+        <div t-else="" class="d-flex justify-content-end">
             <div t-if="isInSaleOrder()"
                     class="input-group o_sale_product_catalog_quantity o_sale_product_catalog_cancel_global_click w-50">
-                <button class="btn btn-outline-secondary"
+                <button class="btn btn-light border"
                         t-on-click="this.env.decreaseQuantity">
                     <i class="fa fa-minus center"/>
                 </button>
-                <input class="o_input form-control border-0 text-center text-bg-light"
+                <input class="o_input form-control border text-center text-bg-light"
                         type="number"
                         t-att-value="props.quantity"
                         t-on-change="this.env.setQuantity"/>
-                <button class="btn btn-outline-secondary"
+                <button class="btn btn-light border"
                         t-on-click="this.env.increaseQuantity">
                     <i class="fa fa-plus"/>
                 </button>
@@ -28,13 +28,13 @@
             <div class="ms-auto o_sale_product_catalog_cancel_global_click">
                 <button t-if="!isInSaleOrder()"
                         t-on-click="this.env.addProduct"
-                        class="btn btn-primary rounded">
+                        class="btn btn-primary">
                     <i class="fa fa-shopping-cart"/>
                     Add
                 </button>
                 <button t-else=""
                         t-on-click="this.env.removeProduct"
-                        class="btn btn-light rounded">
+                        class="btn btn-light border">
                     <i class="fa fa-trash"/>
                     Remove
                 </button>