diff --git a/addons/point_of_sale/static/src/css/pos.css b/addons/point_of_sale/static/src/css/pos.css
index facca7d38c6..a3623f8689e 100644
--- a/addons/point_of_sale/static/src/css/pos.css
+++ b/addons/point_of_sale/static/src/css/pos.css
@@ -850,6 +850,7 @@ td {
 /*  ********* The right pane contains the screens and headers ********* */
 
 .pos .rightpane {
+    width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -875,7 +876,8 @@ td {
     background: #d3d3d3;
     text-align: center;
     display: flex;
-    flex-flow: row wrap;
+    overflow-x: auto;
+    overflow-y: hidden;
 }
 
 .pos .green-border-bottom {
@@ -889,11 +891,17 @@ td {
 /*  ********* The product list  ********* */
 
 .pos .product-list {
-    padding: 10px;
-    text-align: left;
-    -webkit-transform: translate3d(0,0,0);
+    padding: 10px 5px;
     display: flex;
     flex-wrap: wrap;
+    gap: 2px;
+}
+@media screen and (max-width: 768px) {
+    .pos .product-list {
+        padding: 0px;
+        gap: 0px;
+        justify-content: space-between;
+    }
 }
 
 .pos .product-list-scroller{
@@ -948,7 +956,6 @@ td {
 @media screen and (max-width: 768px) {
     .pos .breadcrumb-button.breadcrumb-home {
         width: auto;
-        font-size: 13px;
         margin-left: 3px;
     }
 }
@@ -1050,7 +1057,6 @@ td {
     padding: 0px;
     background: #cecece;
     display: flex;
-    flex-flow: row wrap;
     flex: 1;
 }
 
@@ -1132,11 +1138,7 @@ td {
 
 .pos .product {
     position:relative;
-    vertical-align: top;
-    display: inline-block;
     line-height: 100px;
-    font-size: 11px;
-    margin: 8px !important;
     width: 122px;
     height:115px;
     background:#fff;
@@ -1162,9 +1164,6 @@ td {
 }
 
 @media screen and (max-width: 768px) {
-    .pos .product-list {
-        padding: 0px;
-    }
     .pos .product {
         width: 32%;
         height: auto;
diff --git a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidgetControlPanel.js b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidgetControlPanel.js
index 9ebfa77f60a..1d65174405a 100644
--- a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidgetControlPanel.js
+++ b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidgetControlPanel.js
@@ -26,6 +26,9 @@ odoo.define('point_of_sale.ProductsWidgetControlPanel', function(require) {
             this.searchWordInput.el.value = '';
             this.trigger('clear-search');
         }
+        get displayCategImages() {
+            return this.env.pos.config.iface_display_categ_images && !this.env.isMobile;
+        }
         updateSearch(event) {
             this.trigger('update-search', event.target.value);
             if (event.key === 'Enter') {
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/HomeCategoryBreadcrumb.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/HomeCategoryBreadcrumb.xml
index 2bfa426e4b6..1f5f6281a01 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/HomeCategoryBreadcrumb.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/HomeCategoryBreadcrumb.xml
@@ -3,19 +3,9 @@
 
     <t t-name="HomeCategoryBreadcrumb" owl="1">
         <span class="breadcrumb">
-            <span t-if="!env.isMobile" class="breadcrumb-button breadcrumb-home"
-                  t-on-click="trigger('switch-category', 0)">
+            <span class="breadcrumb-button breadcrumb-home" t-on-click="trigger('switch-category', 0)">
                 <i class="fa fa-home" role="img" aria-label="Home" title="Home"></i>
             </span>
-            <span t-if="env.isMobile" class="breadcrumb-button breadcrumb-home"
-                  t-on-click="trigger('categ-popup', props.subcategories)">
-                <t t-if="env.pos.get('selectedCategoryId') === 0">
-                    All
-                </t>
-                <t t-else="">
-                    <t t-esc="props.currentCat.name"/>
-                </t>
-            </span>
         </span>
     </t>
 
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml
index a763bbf680d..e8eb9a4990c 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml
@@ -5,26 +5,24 @@
         <div class="products-widget-control">
             <t t-if="!props.hasNoCategories">
                 <div class="rightpane-header" t-att-class="{
-                    'green-border-bottom': !env.pos.config.iface_display_categ_images,
-                    'grey-border-bottom': env.pos.config.iface_display_categ_images,
+                    'green-border-bottom': !displayCategImages,
+                    'grey-border-bottom': displayCategImages,
                 }">
                     <!-- Breadcrumbs -->
                     <div class="breadcrumbs">
                         <HomeCategoryBreadcrumb subcategories="props.subcategories" currentCat="props.breadcrumbs[props.breadcrumbs.length - 1]"/>
-                        <t t-if="!env.isMobile">
-                            <t t-foreach="props.breadcrumbs" t-as="category" t-key="category.id">
-                                <CategoryBreadcrumb category="category" />
-                            </t>
+                        <t t-foreach="props.breadcrumbs" t-as="category" t-key="category.id">
+                            <CategoryBreadcrumb category="category" />
                         </t>
                     </div>
                     <!-- Subcategories -->
-                    <t t-if="props.subcategories.length > 0 and !env.pos.config.iface_display_categ_images and !env.isMobile">
+                    <div t-if="props.subcategories.length > 0 and !displayCategImages"  class="category-list simple">
                         <t t-foreach="props.subcategories" t-as="category" t-key="category.id">
                             <CategorySimpleButton category="category" />
                         </t>
-                    </t>
+                    </div>
                 </div>
-                <t t-if="props.subcategories.length > 0 and env.pos.config.iface_display_categ_images and !env.isMobile">
+                <t t-if="props.subcategories.length > 0 and displayCategImages">
                     <div class="categories">
                         <div class="category-list-scroller">
                             <div class="category-list">