diff --git a/addons/product_matrix/static/src/scss/product_matrix.scss b/addons/product_matrix/static/src/scss/product_matrix.scss
index 4d27ed224f9..d22f3a32a9c 100644
--- a/addons/product_matrix/static/src/scss/product_matrix.scss
+++ b/addons/product_matrix/static/src/scss/product_matrix.scss
@@ -1,59 +1,28 @@
-.o_web_client .o_matrix_input_table {
-    table {
-        margin-bottom: 0;
-        table-layout: fixed;
-        min-width: 100%;
-        width: auto;
-        max-width: none;
+.o_matrix_input_table {
+    .o_matrix_ps {
+        padding-left: $modal-inner-padding;
     }
-    th, td {
-        border: 0 !important;
-        vertical-align: middle;
-        width: 5em;
+    .o_matrix_pe {
+        padding-right: $modal-inner-padding;
     }
-    .o_matrix_title_header {
-        width: 10em;
-    }
-    thead {
-        color: $o-main-text-color;
-        background-color: $o-brand-lightsecondary;
-        th {
-            text-align: center;
-            white-space: pre-line;
+    //removing input field=number arrows as their size might
+    //change depending on browser default styling and shift input's position
+    .o_matrix_input {
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+        &[type=number] {
+            -moz-appearance: textfield;
         }
     }
-    tbody {
-        background-color: $o-view-background-color;
-        text-align: right;
-        tr {
-            border-top: 1px solid $o-form-lightsecondary;
-            border-bottom: 1px solid $o-form-lightsecondary;
-        }
-        .o_matrix_input {
-            text-align: right;
-            border: none;
-        }
-    }
-    .o_matrix_text_muted{
-        color: lighten($o-main-text-color, 15%);
-        font-style: italic;
-    }
-
-    // ensure white background completely surrounds nocontent bubble
-    .o_matrix_nocontent_container {
-        overflow: auto;
-
-        .oe_view_nocontent_img_link {
-            padding:10px;
-        }
-    }
-}
-
-.o_product_variant_matrix {
-    .form-control {
-        &:focus {
-            box-shadow: none;
-            border: 1px solid $gray-400;
+    .o_matrix_input_td {
+        border: none;
+        &:focus-within {
+            --table-accent-bg: none;
+            background-color: $o-view-background-color;
+            border-bottom: $o-black 1px solid;
         }
     }
 }
diff --git a/addons/product_matrix/static/src/xml/product_matrix.xml b/addons/product_matrix/static/src/xml/product_matrix.xml
index 8e82b7dce4a..3d006412a13 100644
--- a/addons/product_matrix/static/src/xml/product_matrix.xml
+++ b/addons/product_matrix/static/src/xml/product_matrix.xml
@@ -1,33 +1,44 @@
 <template>
     <div t-name="product_matrix.matrix" t-ref="productMatrix" owl="1">
-        <table class="o_matrix_input_table o_product_variant_matrix table table-sm table-striped table-bordered cursor-default">
-            <thead>
-                <tr>
+        <table class="o_matrix_input_table table table-sm table-striped table-hover table-bordered cursor-default mb-0 h-100">
+            <thead class="border-0">
+                <tr class="border-0 h-100">
                     <t t-foreach="header" t-as="column_header" t-key="column_header_index">
-                        <th t-attf-class="o_matrix_title_header {{column_header_first?'text-start':'text-center'}}">
-                            <span t-esc="column_header.name"/>
-                            <t t-call="product_matrix.extra_price">
-                                <t t-set="cell" t-value="column_header"/>
-                            </t>
+                        <th class="border-0"
+                            t-attf-class="{{column_header_first?'o_matrix_ps':''}} {{column_header_last?'o_matrix_pe':''}}">
+                            <div class="d-flex flex-column justify-content-start h-100"
+                                 t-attf-class="{{column_header_first?'align-items-start':'align-items-end'}}">
+                                <span t-esc="column_header.name"/>
+                                <t t-call="product_matrix.extra_price">
+                                    <t t-set="cell" t-value="column_header"/>
+                                </t>
+                            </div>
                         </th>
                     </t>
                 </tr>
             </thead>
             <tbody>
-                <tr t-foreach="rows" t-as="row" t-key="row_index">
+                <tr t-foreach="rows" t-as="row" t-key="row_index" class="border-1 border-end-0 border-start-0">
                     <t t-foreach="row" t-as="cell" t-key="cell_index">
-                        <th t-if="cell.name" class="text-start">
-                            <strong t-esc="cell.name"/>
-                            <t t-call="product_matrix.extra_price"/>
+                        <th t-if="cell.name"
+                            class="border-0"
+                            t-attf-class="{{cell_first?'o_matrix_ps o_matrix_pe':''}} {{cell_last?'o_matrix_pe':''}}">
+                            <div class="d-flex align-items-center justify-content-between">
+                                <strong t-esc="cell.name" class="pe-2"/>
+                                <t t-call="product_matrix.extra_price"/>
+                            </div>
                         </th>
-                        <td t-else="">
+                        <td t-else="" 
+                            class="o_matrix_input_td text-end"
+                            t-attf-class="{{cell_last?'o_matrix_pe':''}}">
                             <div t-if="cell.is_possible_combination" class="input-group">
-                                <input type="number"
-                                       class="o_matrix_input"
-                                       t-att="{'ptav_ids': cell.ptav_ids,'value': cell.qty}"/>
+                                <input  type="number"
+                                        class="o_input o_field_number o_matrix_input border-0 text-end"
+                                        t-att="{'ptav_ids': cell.ptav_ids,'value': cell.qty}"
+                                        onClick="this.select();"/>
                             </div>
                             <span t-else=""
-                                  class="o_matrix_cell o_matrix_text_muted o_matrix_nocontent_container">
+                                  class="text-muted overflow-auto">
                                 Not available
                             </span>
                         </td>
diff --git a/addons/product_matrix/static/src/xml/product_matrix_dialog.xml b/addons/product_matrix/static/src/xml/product_matrix_dialog.xml
index 03c7eeceaf6..e8c7c5ec9bd 100644
--- a/addons/product_matrix/static/src/xml/product_matrix_dialog.xml
+++ b/addons/product_matrix/static/src/xml/product_matrix_dialog.xml
@@ -1,6 +1,6 @@
 <templates>
     <t t-name="product_matrix.dialog" owl="1">
-        <Dialog size="size" title="title">
+        <Dialog size="size" title="title" withBodyPadding="false">
             <t t-call="product_matrix.matrix">
                 <t t-set="header" t-value="props.header"/>
                 <t t-set="rows" t-value="props.rows"/>
diff --git a/addons/purchase_product_matrix/static/tests/tours/purchase_product_matrix_tour.js b/addons/purchase_product_matrix/static/tests/tours/purchase_product_matrix_tour.js
index 5a40f06cee1..c232e44e136 100644
--- a/addons/purchase_product_matrix/static/tests/tours/purchase_product_matrix_tour.js
+++ b/addons/purchase_product_matrix/static/tests/tours/purchase_product_matrix_tour.js
@@ -25,7 +25,7 @@ tour.register('purchase_matrix_tour', {
 }, {
     trigger: 'ul.ui-autocomplete a:contains("Matrix")',
 }, {
-    trigger: '.o_product_variant_matrix',
+    trigger: '.o_matrix_input_table',
     run: function () {
         // fill the whole matrix with 1's
         $('.o_matrix_input').val(1);
@@ -44,7 +44,7 @@ tour.register('purchase_matrix_tour', {
 }, {
     trigger: '[name=product_template_id] button.fa-pencil', // edit the matrix
 }, {
-    trigger: '.o_product_variant_matrix',
+    trigger: '.o_matrix_input_table',
     run: function () {
         // update some of the matrix values.
         $('.o_matrix_input').slice(8, 16).val(4);
diff --git a/addons/test_sale_product_configurators/static/tests/tours/product_matrix_tour.js b/addons/test_sale_product_configurators/static/tests/tours/product_matrix_tour.js
index 6eaed842405..4b8d2bc952c 100644
--- a/addons/test_sale_product_configurators/static/tests/tours/product_matrix_tour.js
+++ b/addons/test_sale_product_configurators/static/tests/tours/product_matrix_tour.js
@@ -39,7 +39,7 @@ tour.register('sale_matrix_tour', {
 }, {
     trigger: 'ul.ui-autocomplete a:contains("Matrix")',
 }, {
-    trigger: '.o_product_variant_matrix',
+    trigger: '.o_matrix_input_table',
     run: function () {
         // fill the whole matrix with 1's
         $('.o_matrix_input').val(1);
@@ -56,7 +56,7 @@ tour.register('sale_matrix_tour', {
 }, {
     trigger: '[name=product_template_id] button.fa-pencil',  // edit the matrix
 }, {
-    trigger: '.o_product_variant_matrix',
+    trigger: '.o_matrix_input_table',
     run: function () {
         // whitespace normalization: removes newlines around text from markup
         // content, then collapse & convert internal whitespace to regular
@@ -85,7 +85,7 @@ tour.register('sale_matrix_tour', {
 }, {
     trigger: '[name=product_template_id] button.fa-pencil',  // edit the matrix
 }, {
-    trigger: '.o_product_variant_matrix',
+    trigger: '.o_matrix_input_table',
     run: function () {
         // reset all qties to 1
         $('.o_matrix_input').val(1);
@@ -106,7 +106,7 @@ tour.register('sale_matrix_tour', {
 }, {
     trigger: '[name=product_template_id] button.fa-pencil',  // edit the matrix
 }, {
-    trigger: '.o_product_variant_matrix',
+    trigger: '.o_matrix_input_table',
     run: function () {
         // update some of the matrix values.
         $('.o_matrix_input').slice(8, 16).val(4);