diff --git a/addons/point_of_sale/static/src/app/store/combo_configurator_popup/combo_configurator_popup.scss b/addons/point_of_sale/static/src/app/store/combo_configurator_popup/combo_configurator_popup.scss
index cdbb8980b0c..788b1181d13 100644
--- a/addons/point_of_sale/static/src/app/store/combo_configurator_popup/combo_configurator_popup.scss
+++ b/addons/point_of_sale/static/src/app/store/combo_configurator_popup/combo_configurator_popup.scss
@@ -4,28 +4,6 @@
             appearance:none;
 }
 
-.combo-configurator-popup input:checked +label{
-    -webkit-filter: none;
-        -moz-filter: none;
-            filter: none;
-    border: 2px solid #000;
-    border-radius: 5%;
-
-}
-
-.combo-configurator-popup label{
-    cursor:pointer;
-    -webkit-transition: all 100ms ease-in;
-       -moz-transition: all 100ms ease-in;
-            transition: all 100ms ease-in;
-    -webkit-filter: opacity(.7);
-       -moz-filter: opacity(.7);
-            filter: opacity(.7);
-}
-.combo-configurator-popup label:hover{
-    -webkit-filter: opacity(1);
-       -moz-filter: opacity(1);
-            filter: opacity(1);
-    border: 1px solid #000;
-    border-radius: 5%;
+.combo-configurator-popup input:checked + label {
+    box-shadow: 0 0 0 ($border-width * 2) $primary;
 }
diff --git a/addons/point_of_sale/static/src/app/store/combo_configurator_popup/combo_configurator_popup.xml b/addons/point_of_sale/static/src/app/store/combo_configurator_popup/combo_configurator_popup.xml
index ecf2bd62f5e..e1abe074b8b 100644
--- a/addons/point_of_sale/static/src/app/store/combo_configurator_popup/combo_configurator_popup.xml
+++ b/addons/point_of_sale/static/src/app/store/combo_configurator_popup/combo_configurator_popup.xml
@@ -5,12 +5,11 @@
             <header class="modal-header h2" t-esc="props.product.display_name"/>
             <main class="body">
                 <div t-foreach="props.product.combo_ids" t-as="combo_id" t-key="combo_id"
-                    class="d-flex flex-column m-3">
+                    class="d-flex flex-column m-3 mb-4">
                     <t t-set="combo" t-value="pos.db.combo_by_id[combo_id]"/>
                     <h3 class="me-auto mb-3" t-esc="combo.name"/>
-                    <div class="d-flex">
-                        <div t-foreach="combo.combo_line_ids" t-as="combo_line_id" t-key="combo_line_id"
-                            class="m-2">
+                    <div class="product-list d-grid gap-1">
+                        <div t-foreach="combo.combo_line_ids" t-as="combo_line_id" t-key="combo_line_id">
                             <t t-set="combo_line" t-value="pos.db.combo_line_by_id[combo_line_id]"/>
                             <t t-set="product" t-value="pos.db.product_by_id[combo_line.product_id[0]]"/>
                             <input 
@@ -20,8 +19,9 @@
                                 t-attf-value="{{combo_line_id}}" 
                                 t-model="state.combo[combo_id]"
                                 />
-                            <label t-attf-for="combo-{{combo_id}}-combo_line-{{combo_line_id}}" class="combo-line">
+                            <label t-attf-for="combo-{{combo_id}}-combo_line-{{combo_line_id}}" class="combo-line h-100 w-100 rounded cursor-pointer transition-base">
                                 <ProductCard
+                                    class="'flex-column h-100 border'"
                                     name="product.display_name"
                                     productId="product.id"
                                     price="formattedComboPrice(combo_line)"