diff --git a/addons/point_of_sale/static/src/css/pos.css b/addons/point_of_sale/static/src/css/pos.css
index 4e55078233b..a91fcba2666 100644
--- a/addons/point_of_sale/static/src/css/pos.css
+++ b/addons/point_of_sale/static/src/css/pos.css
@@ -698,9 +698,10 @@ td {
     flex-grow: 1;
 }
 .pos .actionpad .button {
+    --btn-height-size: 54px;
     position: relative;
     display: block;
-    height: 54px;
+    height: var(--btn-height-size);
     width: 100%;
     font-weight: bold;
     vertical-align: middle;
@@ -732,12 +733,17 @@ td {
     border-bottom-left-radius: 4px;
 }
 .pos .actionpad .button.pay {
-    height: 162px;
+    height: calc(var(--btn-height-size) * 3);
+}
+@media screen and (max-width: 768px) {
+    .pos .actionpad .button.pay {
+        height: calc(var(--btn-height-size) * 2);
+    }
 }
 .pos .actionpad .button.pay .pay-circle {
     display: block;
     font-size: 32px;
-    line-height: 54px;
+    line-height: var(--btn-height-size);
     padding-top: 6px;
     background: rgb(86, 86, 86);
     color: white;
diff --git a/addons/point_of_sale/static/src/js/Misc/MobileOrderWidget.js b/addons/point_of_sale/static/src/js/Misc/MobileOrderWidget.js
index 024a77b3882..1e4b62f6ad9 100644
--- a/addons/point_of_sale/static/src/js/Misc/MobileOrderWidget.js
+++ b/addons/point_of_sale/static/src/js/Misc/MobileOrderWidget.js
@@ -7,7 +7,6 @@ odoo.define('point_of_sale.MobileOrderWidget', function(require) {
     class MobileOrderWidget extends PosComponent {
         constructor() {
             super(...arguments);
-            this.pane = this.props.pane;
             this.update();
         }
         get order() {
diff --git a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductScreen.js b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductScreen.js
index d8f6de0f94d..fe7acb6eb74 100644
--- a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductScreen.js
+++ b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductScreen.js
@@ -39,8 +39,10 @@ odoo.define('point_of_sale.ProductScreen', function(require) {
             // We don't do this in the `mounted` lifecycle method because it is called before
             // the callbacks in `onMounted` hook.
             onMounted(() => NumberBuffer.reset());
-            this.state = useState({ numpadMode: 'quantity' });
-            this.mobile_pane = this.props.mobile_pane || 'right';
+            this.state = useState({
+                numpadMode: 'quantity',
+                mobile_pane: this.props.mobile_pane || 'right',
+            });
         }
         mounted() {
             if(this.env.pos.config.cash_control && this.env.pos.pos_session.state == 'opening_control') {
@@ -360,14 +362,7 @@ odoo.define('point_of_sale.ProductScreen', function(require) {
             this.showScreen('PaymentScreen');
         }
         switchPane() {
-            if (this.mobile_pane === "left") {
-                this.mobile_pane = "right";
-                this.render();
-            }
-            else {
-                this.mobile_pane = "left";
-                this.render();
-            }
+            this.state.mobile_pane = this.state.mobile_pane === "left" ? "right" : "left";
         }
     }
     ProductScreen.template = 'ProductScreen';
diff --git a/addons/point_of_sale/static/src/xml/Misc/MobileOrderWidget.xml b/addons/point_of_sale/static/src/xml/Misc/MobileOrderWidget.xml
index 883631a2a8a..eb8e770c182 100644
--- a/addons/point_of_sale/static/src/xml/Misc/MobileOrderWidget.xml
+++ b/addons/point_of_sale/static/src/xml/Misc/MobileOrderWidget.xml
@@ -3,19 +3,14 @@
 
     <t t-name="MobileOrderWidget" owl="1">
         <div class="switchpane">
-            <t t-if="pane === 'right'">
-                <button class="btn-switchpane" t-on-click="trigger('click-pay')">
-                    <h1>Pay</h1>
-                    <span><t t-esc="total" /></span>
-                </button>
-                <button class="btn-switchpane secondary" t-on-click="trigger('switchpane')">
-                    <h1>Review</h1>
-                    <span><t t-esc="items_number"/> items</span>
-                </button>
-            </t>
-            <t t-if="pane === 'left'">
-              <button class="btn-switchpane" t-on-click="trigger('switchpane')"><h1>Back</h1></button>
-            </t>
+            <button class="btn-switchpane" t-on-click="trigger('click-pay')">
+                <h1>Pay</h1>
+                <span><t t-esc="total" /></span>
+            </button>
+            <button class="btn-switchpane secondary" t-on-click="trigger('switchpane')">
+                <h1>Review</h1>
+                <span><t t-esc="items_number"/> items</span>
+            </button>
         </div>
     </t>
 
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ActionpadWidget.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ActionpadWidget.xml
index b7395d97971..76676a1c8fe 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ActionpadWidget.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ActionpadWidget.xml
@@ -19,6 +19,10 @@
                 </div>
                 <t t-esc="props.actionName" />
             </button>
+            <button t-if="env.isMobile" class="button back-button" t-on-click="trigger('switchpane')">
+                <i class="fa fa-angle-double-left"/>
+                Back
+            </button>
         </div>
     </t>
 
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductScreen.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductScreen.xml
index 6a08c9cf08c..80c36e20695 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductScreen.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductScreen.xml
@@ -4,7 +4,7 @@
     <t t-name="ProductScreen" owl="1">
         <div class="product-screen screen" t-att-class="{ oe_hidden: !props.isShown }">
             <div class="screen-full-width">
-                <div class="leftpane pane-border" t-if="!env.isMobile || mobile_pane === 'left'">
+                <div class="leftpane pane-border" t-if="!env.isMobile || state.mobile_pane === 'left'">
                     <OrderWidget/>
                     <div class="pads">
                         <div class="control-buttons">
@@ -14,19 +14,14 @@
                         </div>
                         <div class="subpads">
                             <t t-set="_actionName">Payment</t>
-                            <ActionpadWidget client="client" actionName="_actionName" />
+                            <ActionpadWidget client="client" actionName="_actionName" t-on-switchpane="switchPane" />
                             <NumpadWidget activeMode="state.numpadMode" />
                         </div>
                     </div>
-                    <t t-if="env.isMobile">
-                        <MobileOrderWidget pane="mobile_pane" t-on-switchpane="switchPane"/>
-                    </t>
                 </div>
-                <div class="rightpane" t-if="!env.isMobile || mobile_pane === 'right'">
+                <div class="rightpane" t-if="!env.isMobile || state.mobile_pane === 'right'">
                     <ProductsWidget mobileSearchBarIsShown="props.mobileSearchBarIsShown"/>
-                    <t t-if="env.isMobile">
-                        <MobileOrderWidget pane="mobile_pane" t-on-switchpane="switchPane"/>
-                    </t>
+                    <MobileOrderWidget t-if="env.isMobile" pane="state.mobile_pane" t-on-switchpane="switchPane"/>
                 </div>
             </div>
         </div>