From 01ffba86955d681d71efef67e585fb516729e502 Mon Sep 17 00:00:00 2001
From: vlst <vlst@odoo.com>
Date: Wed, 12 Jul 2023 08:47:39 +0000
Subject: [PATCH] [REF] pos*: refactor pos screens

pos*: point_of_sale,pos_hr,pos_loyalty,pos_restaurant,
pos_sale,

In this commit we refactor some parts of the pos ui with the interest
of providing a simpler and cleaner codebase.

One pattern that is heavily used in the pos ui is that in which
views are changed based on the screen size at the component level.
This means that it becomes very difficult to understand what parts
of a specific template will be seen in mobile or in desktop views.
In most cases, the pos adapts for mobile screens by using the same
main components, but in different configurations. For example, a
component that was visible in desktop mode, might become accesible
through a menu in mobile mode.

In order to improve the situation, the proposed solution is to
separate the logical parts of the ui into `owl templates` and
to inject this templates wherever the need arises.
Thus, instead of constantly using `t-if="ui.isSmall"` in all places
where there is a difference between the mobile and desktop views,
we have a main conditional branch at the root level of the component
representing a certain screen and then build 2 separate views, one for
mobile and one for desktop, each calling the needed templates.

In this commit we implement this pattern for the `payment_screen`.
This will allow us to observe this pattern over a period of time,
before implementing it on the other screens.

In this commit we also:
- add small fixes and improvements relating to
  the previous commit, in which the pos was
  refactored to bootstrap;
- replace the `<br>` tags in the numpad component
  with the bootstrap grid system;
- adapt the `cash_move_popup` to rely more on `t-model`
  and less on `t-on-change`

Part-of: odoo/odoo#129544
Co-authored-by:  vlst <vlst@odoo.com>
Co-authored-by:  Xavier Luyckx (xlu) <xlu@odoo.com>
---
 .../errors/popups/error_traceback_popup.xml   |  33 +--
 .../navbar/cash_move_popup/cash_move_popup.js |  12 +-
 .../cash_move_popup/cash_move_popup.scss      |   0
 .../cash_move_popup/cash_move_popup.xml       |  24 +-
 .../navbar/closing_popup/closing_popup.xml    |  35 +--
 .../static/src/app/navbar/navbar.xml          |  10 +-
 .../src/app/popup/popup_controller.scss       |  23 --
 .../static/src/app/popup/popup_controller.xml |   3 +-
 .../point_of_sale/static/src/app/pos_app.scss |  30 +--
 .../point_of_sale/static/src/app/pos_app.xml  |  26 +--
 .../partner_editor/partner_editor.xml         |  83 +++----
 .../partner_list/partner_line/partner_line.js |   2 +-
 .../partner_line/partner_line.scss            |   9 +-
 .../partner_line/partner_line.xml             |  22 +-
 .../screens/partner_list/partner_list.scss    |   5 +-
 .../app/screens/partner_list/partner_list.xml | 139 ++++++-----
 .../numpad/numpad_button/numpad_button.xml    |   6 +-
 .../payment_lines/payment_lines.xml           |   6 +-
 .../payment_screen/payment_screen.scss        |  47 ----
 .../screens/payment_screen/payment_screen.xml | 220 +++++++++---------
 .../payment_status/payment_status.xml         |  72 +++---
 .../product_screen/action_pad/action_pad.xml  |   4 +-
 .../control_buttons/control_buttons.scss      |   8 +-
 .../customer_button/customer_button.xml       |   3 +-
 .../pricelist_button/pricelist_button.xml     |   4 +-
 .../screens/product_screen/numpad/numpad.scss |  37 +--
 .../screens/product_screen/numpad/numpad.xml  |  36 +--
 .../screens/product_screen/order/order.scss   |   8 -
 .../screens/product_screen/order/order.xml    |   2 +-
 .../order_summary/order_summary.xml           |   6 +-
 .../product_screen/orderline/orderline.scss   |  15 +-
 .../product_screen/orderline/orderline.xml    |  14 +-
 .../product_screen/product/product.scss       |  20 +-
 .../product_screen/product/product.xml        |   8 +-
 .../product_list/product_list.scss            |   3 -
 .../screens/product_screen/product_screen.xml |  12 +-
 .../screens/receipt_screen/receipt_screen.xml |   2 +-
 .../receipt_screen/reprint_receipt_screen.xml |   4 +-
 .../app/screens/scale_screen/scale_screen.xml |   2 +-
 .../static/src/app/screens/screens.scss       |  39 ----
 .../order_details/order_details.xml           |   8 +-
 .../order_details/orderline_details.xml       |  12 +-
 .../ticket_screen/search_bar/search_bar.scss  |  34 +++
 .../ticket_screen/search_bar/search_bar.xml   |  68 +++---
 .../screens/ticket_screen/ticket_screen.scss  | 178 ++------------
 .../screens/ticket_screen/ticket_screen.xml   |  10 +-
 .../product_configurator_popup.xml            |  18 +-
 .../edit_list_input/edit_list_input.xml       |  11 +-
 .../select_lot_popup/select_lot_popup.xml     |   6 +-
 .../src/app/utils/alert_popup/alert_popup.xml |  14 +-
 .../src/app/utils/contextual_utils_service.js |  21 +-
 .../date_picker_popup/date_picker_popup.xml   |   6 +-
 .../static/src/app/utils/hooks.js             |  17 +-
 .../app/utils/input_popups/number_popup.xml   |  78 ++++---
 .../utils/input_popups/selection_popup.xml    |   2 +-
 .../utils/input_popups/text_input_popup.xml   |   6 +-
 .../app/utils/input_popups/textarea_popup.xml |   6 +-
 .../money_details_popup.scss                  |   3 -
 .../money_details_popup.xml                   |   8 +-
 .../src/css/popups/cash_opening_popup.css     |   3 -
 .../src/css/popups/closing_pos_popup.scss     |  11 +-
 .../static/src/css/popups/common.css          |  22 --
 .../src/css/popups/money_details_popup.css    |  17 --
 .../static/src/css/popups/popups.scss         |  30 ---
 .../tests/tours/helpers/ChromeTourMethods.js  |   2 +-
 .../src/app/login_screen/login_screen.xml     |   6 +-
 .../static/src/app/select_cashier_mixin.js    |   1 +
 addons/pos_hr/static/src/css/pos.scss         |   4 +-
 .../reward_button/reward_button.xml           |   2 +-
 .../order_summary/order_summary.xml           |  39 ++--
 .../src/app/bill_screen/bill_screen.xml       |   4 +-
 .../static/src/app/floor_screen/edit_bar.xml  |   2 +-
 .../src/app/floor_screen/editable_table.js    |   4 +-
 .../src/app/floor_screen/editable_table.xml   |   5 +-
 .../src/app/floor_screen/floor_screen.scss    |   5 +
 .../src/app/floor_screen/floor_screen.xml     |   6 +-
 .../static/src/app/floor_screen/table.js      |   5 +-
 .../static/src/app/floor_screen/table.xml     |  22 +-
 .../src/app/product_screen/order/order.xml    |   2 +-
 .../split_bill_screen/split_bill_screen.xml   |   2 +-
 .../split_orderline/split_orderline.xml       |   4 +-
 .../static/src/app/tip_screen/tip_screen.xml  |   2 +-
 .../payment_screen/payment_screen.xml         |  18 +-
 .../product_screen/orderline/orderline.xml    |   4 +-
 .../product_screen/product_screen.xml         |   4 +-
 .../static/src/overrides/models/pos_store.js  |   2 +-
 .../sale_order_management_screen.xml          |   2 +-
 addons/pos_sale/static/src/css/pos_sale.css   |   6 -
 .../product_screen/orderline/orderline.xml    |  12 +-
 .../order_receipt/order_receipt.xml           |   6 +-
 90 files changed, 698 insertions(+), 1096 deletions(-)
 delete mode 100644 addons/point_of_sale/static/src/app/navbar/cash_move_popup/cash_move_popup.scss
 delete mode 100644 addons/point_of_sale/static/src/app/screens/product_screen/order/order.scss
 delete mode 100644 addons/point_of_sale/static/src/app/screens/screens.scss
 delete mode 100644 addons/point_of_sale/static/src/app/utils/money_details_popup/money_details_popup.scss
 delete mode 100644 addons/point_of_sale/static/src/css/popups/cash_opening_popup.css
 delete mode 100644 addons/point_of_sale/static/src/css/popups/common.css
 delete mode 100644 addons/point_of_sale/static/src/css/popups/money_details_popup.css
 delete mode 100644 addons/pos_sale/static/src/css/pos_sale.css

diff --git a/addons/point_of_sale/static/src/app/errors/popups/error_traceback_popup.xml b/addons/point_of_sale/static/src/app/errors/popups/error_traceback_popup.xml
index 26c5d3ed0a5..4617b420a2d 100644
--- a/addons/point_of_sale/static/src/app/errors/popups/error_traceback_popup.xml
+++ b/addons/point_of_sale/static/src/app/errors/popups/error_traceback_popup.xml
@@ -11,23 +11,24 @@
                 <main class="modal-body body traceback">
                     <t t-esc="props.body" />
                 </main>
-                <footer class="footer modal-footer">
-                    <div t-if="!props.exitButtonIsShown" class="button cancel btn btn-lg btn-primary" t-on-click="confirm">
-                        <t t-esc="props.confirmText" />
-                    </div>
-                    <div t-if="props.exitButtonIsShown" class="button cancel btn btn-lg btn-secondary" t-on-click="() => this.pos.closePos()">
-                        <t t-esc="props.exitButtonText" />
-                    </div>
-                    <a t-att-download="tracebackFilename" t-att-href="tracebackUrl">
-                        <div class="button icon download">
-                            <i class="fa fa-download" role="img"
-                               aria-label="Download error traceback"
-                               title="Download error traceback"></i>
+                <footer class="footer modal-footer justify-content-between">
+                    <div class="d-flex gap-1">
+                        <a t-att-download="tracebackFilename" t-att-href="tracebackUrl">
+                            <div class="button icon download btn btn-lg btn-secondary">
+                                <i class="fa fa-download" role="img" aria-label="Download error traceback" title="Download error traceback"></i>
+                            </div>
+                        </a>
+                        <div class="button icon email btn btn-lg btn-secondary" t-on-click="emailTraceback">
+                            <i class="fa fa-paper-plane" role="img" aria-label="Send by email" title="Send by email"></i>
+                        </div>
+                    </div>
+                    <div class="d-flex gap-1">
+                        <div t-if="!props.exitButtonIsShown" class="button cancel btn btn-lg btn-primary" t-on-click="confirm">
+                            <t t-esc="props.confirmText" />
+                        </div>
+                        <div t-if="props.exitButtonIsShown" class="button cancel btn btn-lg btn-secondary" t-on-click="() => this.pos.closePos()">
+                            <t t-esc="props.exitButtonText" />
                         </div>
-                    </a>
-                    <div class="button icon email btn btn-lg btn-secondary" t-on-click="emailTraceback">
-                        <i class="fa fa-paper-plane" role="img" aria-label="Send by email"
-                           title="Send by email"></i>
                     </div>
                 </footer>
             </div>
diff --git a/addons/point_of_sale/static/src/app/navbar/cash_move_popup/cash_move_popup.js b/addons/point_of_sale/static/src/app/navbar/cash_move_popup/cash_move_popup.js
index 69883680ec6..29faf4ecfdc 100644
--- a/addons/point_of_sale/static/src/app/navbar/cash_move_popup/cash_move_popup.js
+++ b/addons/point_of_sale/static/src/app/navbar/cash_move_popup/cash_move_popup.js
@@ -31,7 +31,7 @@ export class CashMovePopup extends AbstractAwaitablePopup {
             parsedAmount: 0,
         });
         this.amountInput = useAutofocus({ refName: "amountInput" });
-        useValidateCashInput('amountInput');
+        useValidateCashInput("amountInput");
     }
     async confirm() {
         let amount;
@@ -117,13 +117,7 @@ export class CashMovePopup extends AbstractAwaitablePopup {
         this.state.errorMessage = "";
         this.amountInput.el.focus();
     }
-    handleInputChange() {
-        if (this.amountInput.el.classList.contains('invalid-cash-input')) {
-            this.amountInput.el.parentElement.classList.add('invalid-cash-input');
-            this.amountInput.el.style.border = 'none';
-            return;
-        }
-        this.amountInput.el.parentElement.classList.remove('invalid-cash-input');
-        this.state.parsedAmount = parseFloat(this.state.amount);
+    format(value) {
+        return this.env.utils.isValidFloat(value) ? this.env.utils.formatCurrency(parseFloat(value)) : "!!!";
     }
 }
diff --git a/addons/point_of_sale/static/src/app/navbar/cash_move_popup/cash_move_popup.scss b/addons/point_of_sale/static/src/app/navbar/cash_move_popup/cash_move_popup.scss
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/addons/point_of_sale/static/src/app/navbar/cash_move_popup/cash_move_popup.xml b/addons/point_of_sale/static/src/app/navbar/cash_move_popup/cash_move_popup.xml
index d6342ebadf6..bc5708d5ac6 100644
--- a/addons/point_of_sale/static/src/app/navbar/cash_move_popup/cash_move_popup.xml
+++ b/addons/point_of_sale/static/src/app/navbar/cash_move_popup/cash_move_popup.xml
@@ -7,33 +7,21 @@
                 <div class="cash-move d-flex flex-column">
                     <div class="input-amount d-flex mb-2 gap-2">
                         <div class="input-group">
-                            <button t-on-click="() => this.onClickButton('in')" class="input-type btn btn-secondary flex-fill py-2 fw-bolder" t-att-class="{ highlight btn-success: state.type === 'in' }">
+                            <button t-on-click="() => this.onClickButton('in')" class="input-type btn btn-secondary flex-fill py-2 fw-bolder" t-att-class="{ 'highlight btn-success': state.type === 'in' }">
                                 Cash In
                             </button>
                             <button t-on-click="() => this.onClickButton('out')" class="input-type btn btn-secondary flex-fill py-2 fw-bolder" t-att-class="{ 'red-highlight btn-danger': state.type === 'out' }">
                                 Cash Out
                             </button>
                         </div>
-                        <div class="input-container popup-input" t-on-input="handleInputChange" >
+                        <div class="input-container popup-input align-items-center form-control d-flex">
                             <span class="currency" t-esc="pos.currency.symbol" t-if="pos.currency.position=='before'"/>
-                            <input class="input-field" type="text" name="amount" t-model="state.amount" t-ref="amountInput" t-on-keypress="_onAmountKeypress"/>
+                            <input class="input-field border-0 px-2" type="text" name="amount" t-model="state.amount" t-ref="amountInput" t-on-keypress="_onAmountKeypress"/>
                             <span class="currency" t-esc="pos.currency.symbol" t-if="pos.currency.position=='after'"/>
                         </div>
-                        <div class="input-field input-group">
-                            <t t-if="pos.currency.symbol.length > 1">
-                                <span class="left-currency input-group-text" t-esc="pos.currency.symbol" t-if="pos.currency.position=='before'"/>
-                            </t>
-                            <input type="text" class="form-control" name="amount" t-model="state.amount" t-ref="amountInput" t-on-keypress="_onAmountKeypress"/>
-                            <t t-if="pos.currency.symbol.length > 1">
-                                <span class="left-currency input-group-text" t-esc="pos.currency.symbol" t-if="pos.currency.position=='after'"/>
-                            </t>
-                            <t t-else="">
-                                <span class="currency input-group-text" t-esc="pos.currency.symbol" />
-                            </t>
-                        </div>
                     </div>
                     <div class="form-floating">
-                        <textarea class="form-control" placeholder="Leave a reason here" name="reason" id="reason" t-model="state.reason" style="height:100px;"></textarea>
+                        <textarea class="form-control" placeholder="Leave a reason here" name="reason" id="reason" t-model="state.reason" style="height:100px;" />
                         <label for="reason">Reason</label>
                     </div>
                     <span t-if="state.errorMessage" class="error-message alert alert-danger mt-2">
@@ -42,8 +30,8 @@
                 </div>
             </main>
             <footer class="footer cash-move modal-footer">
-                <div class="button confirm disable highlight dynamic-size btn-btn-lg btn-primary" t-on-click="confirm">
-                    Confirm <span t-esc="env.utils.formatCurrency(state.parsedAmount)"/>
+                <div class="button confirm disable highlight dynamic-size btn btn-lg btn-primary" t-on-click="confirm">
+                    Confirm <span t-esc="format(state.amount)"/>
                 </div>
                 <div class="button cancel btn btn-lg btn-secondary" t-on-click="cancel">
                     Discard
diff --git a/addons/point_of_sale/static/src/app/navbar/closing_popup/closing_popup.xml b/addons/point_of_sale/static/src/app/navbar/closing_popup/closing_popup.xml
index 58bcfa40731..763e8404316 100644
--- a/addons/point_of_sale/static/src/app/navbar/closing_popup/closing_popup.xml
+++ b/addons/point_of_sale/static/src/app/navbar/closing_popup/closing_popup.xml
@@ -17,8 +17,8 @@
                             <tr class="text-dark">
                                 <th>Payment Method</th>
                                 <th>Expected</th>
-                                <th style="width: 20%">Counted</th>
-                                <th style="width: 20%">Difference</th>
+                                <th style="width:20%">Counted</th>
+                                <th>Difference</th>
                             </tr>
                         </thead>
                         <t t-if="cashControl">
@@ -26,19 +26,20 @@
                                 <tr>
                                     <td t-esc="defaultCashDetails.name"/>
                                     <td t-esc="env.utils.formatCurrency(defaultCashDetails.amount)"/>
-                                    <td class="d-flex" t-on-input="(event) => this.handleInputChange(defaultCashDetails.id, event)">
-                                        <input class="pos-input form-control" t-ref="closingCashInput" t-on-focus="ev=>ev.target.select()"/>
+                                    <td class="input-group" t-on-input="(event) => this.handleInputChange(defaultCashDetails.id, event)">
+                                        <input class="pos-input form-control text-end" t-ref="closingCashInput" t-on-focus="ev=>ev.target.select()"/>
                                         <div class="button icon ClosePosPopup btn btn-secondary" t-on-click="openDetailsPopup">
                                             <i class="fa fa-money fa-2x" role="img" title="Open the money details popup"/>
                                         </div>
                                     </td>
-                                    <td t-esc="env.utils.formatCurrency(state.payments[defaultCashDetails.id].difference)" t-att-class="{'warning text-danger fw-bolder': state.payments[defaultCashDetails.id].difference}"/>
+                                    <td t-esc="env.utils.formatCurrency(state.payments[defaultCashDetails.id].difference)" 
+                                        t-att-class="{'warning text-danger fw-bolder': state.payments[defaultCashDetails.id].difference}"/>
                                 </tr>
                             </tbody>
-                            <tbody class="cash-overview d-flex flex-column mb-2 border-start small text-muted">
+                            <tbody class="cash-overview border-start small text-muted">
                                 <tr>
                                     <td>Opening</td>
-                                    <td t-esc="env.utils.formatCurrency(defaultCashDetails.opening)"/>
+                                    <td class="align-top" t-esc="env.utils.formatCurrency(defaultCashDetails.opening)"/>
                                 </tr>
                                 <tr t-foreach="defaultCashDetails.moves" t-as="move" t-key="move_index">
                                     <td>
@@ -47,7 +48,7 @@
                                             <t t-esc="move.name"/>
                                         </div>
                                     </td>
-                                    <td t-esc="env.utils.formatCurrency(Math.abs(move.amount))"/>
+                                    <td class="align-top" t-esc="env.utils.formatCurrency(Math.abs(move.amount))"/>
                                 </tr>
                                 <tr t-if="defaultCashDetails.payment_amount">
                                     <td>
@@ -56,7 +57,7 @@
                                             Payments in <t t-esc="defaultCashDetails.name"/>
                                         </div>
                                     </td>
-                                    <td t-esc="env.utils.formatCurrency(Math.abs(defaultCashDetails.payment_amount))"/>
+                                    <td class="align-top" t-esc="env.utils.formatCurrency(Math.abs(defaultCashDetails.payment_amount))"/>
                                 </tr>
                             </tbody>
                         </t>
@@ -73,22 +74,26 @@
                         </tbody>
                     </table>
                 </div>
-                <div class="notes-container d-flex flex-column gap-3 border-top mt-3 pt-3">
-                    <div class="opening-notes-container d-flex flex-column align-items-start" t-if="openingNotes" >
+                <div class="notes-container d-flex flex-column flex-sm-row gap-3 border-top mt-3 pt-3">
+                    <div class="opening-notes-container d-flex flex-column flex-grow-1 align-items-start" t-if="openingNotes" >
                         <label class="form-label" for="openingNotes">Opening note</label>
                         <textarea class="opening-notes form-control" id="openingNotes">
                             <t t-esc="openingNotes"/>
                         </textarea>
                     </div>
-                    <div class="closing-notes-container d-flex flex-column align-items-start">
+                    <div class="closing-notes-container d-flex flex-column flex-grow-1 align-items-start">
                         <label class="form-label" for="closingNotes">Closing note</label>
                         <textarea class="closing-notes form-control" id="closingNotes" placeholder="Add a closing note..." t-model="state.notes"/>
                     </div>
                 </div>
             </main>
             <footer class="footer modal-footer justify-content-between">
-                <!-- Download Sale Details -->
                 <div class="modal-footer-left d-flex gap-2">
+                    <button class="button highlight btn btn-lg btn-primary" t-on-click="confirm">Close Session</button>
+                    <button class="button btn btn-lg btn-secondary" t-att-class="{'disabled': !canCancel()}" t-on-click="cancel">Discard</button>
+                </div>
+                <!-- Download Sale Details -->
+                <div class="modal-footer-right d-flex gap-2">
                     <button class="button icon btn btn-lg btn-secondary"
                         t-on-click="downloadSalesReport"
                         title="Download a report with all the sales of the current PoS Session">
@@ -100,10 +105,6 @@
                         <SaleDetailsButton/>
                     </button>
                 </div>
-                <div class="modal-footer-right d-flex gap-2">
-                    <button class="button btn btn-lg btn-secondary" t-att-class="{'disabled': !canCancel()}" t-on-click="cancel">Discard</button>
-                    <button class="button highlight btn btn-lg btn-primary" t-on-click="confirm">Close Session</button>
-                </div>
             </footer>
         </div>
     </t>
diff --git a/addons/point_of_sale/static/src/app/navbar/navbar.xml b/addons/point_of_sale/static/src/app/navbar/navbar.xml
index 32872d66ac4..fcd41be5818 100644
--- a/addons/point_of_sale/static/src/app/navbar/navbar.xml
+++ b/addons/point_of_sale/static/src/app/navbar/navbar.xml
@@ -4,8 +4,8 @@
     <t t-name="point_of_sale.Navbar" owl="1">
         <div class="pos-topheader d-flex w-100 p-0 m-0 bg-white border-bottom">
             <div t-if="pos.tempScreen" class="block-top-header" />
-            <div t-if="!ui.isSmall" class="pos-branding d-flex justify-content-start flex-grow-1 h-100 p-0 my0 text-start">
-                <img class="pos-logo h-75 ms-2 me-auto align-self-center" t-on-click="() => debug.toggleWidget()" src="/web/static/img/logo.png" alt="Logo" />
+            <div t-if="!ui.isSmall" class="pos-branding d-flex justify-content-start flex-grow-1 h-100 p-0 my-0 text-start">
+                <img class="pos-logo h-75 ms-3 me-auto align-self-center" t-on-click="() => debug.toggleWidget()" src="/web/static/img/logo.png" alt="Logo" />
             </div>
             <div class="pos-rightheader d-flex flex-grow-1 h-100">
                 <BackButton t-if="showBackButton()"/>
@@ -51,8 +51,10 @@
                                         Switch Product View
                                     </a>
                                 </li>
-                                <li t-if="this.env.debug" t-on-click="() => debug.toggleWidget()" class="menu-item navbar-button">
-                                    <span>Debug Window</span>
+                                <li t-if="this.env.debug" class="menu-item navbar-button" t-on-click="() => debug.toggleWidget()">
+                                    <a class="dropdown-item py-2">
+                                        Debug Window
+                                    </a>
                                 </li>
                             </ul>
                         </li>
diff --git a/addons/point_of_sale/static/src/app/popup/popup_controller.scss b/addons/point_of_sale/static/src/app/popup/popup_controller.scss
index f4ccd7a959b..28ed6d5d3d4 100644
--- a/addons/point_of_sale/static/src/app/popup/popup_controller.scss
+++ b/addons/point_of_sale/static/src/app/popup/popup_controller.scss
@@ -1,19 +1,3 @@
-/* --- Styling of OpenERP Elements --- */
-/* .ui-dialog, .modal-dialog {
-    background: white;
-    padding: 10px;
-    border-radius: 3px;
-    font-family: sans-serif;
-    box-shadow: 0px 10px 40px rgba(0,0,0,0.4);
-    position: absolute;
-    top: 30px;
-    height: 400px;
-    overflow: scroll;
-} */
-
-.ui-dialog .ui-icon-closethick{
-    float: right;
-}
 div.modal.in {
     position: absolute;
     background: white;
@@ -27,10 +11,3 @@ div.modal.in {
     top: 50%;
     left: 50%;
 }
-
-/* @media screen and (max-width: 768px) {
-    .ui-dialog, .modal-dialog {
-        padding: 0;
-        overflow: auto;
-    }
-} */
diff --git a/addons/point_of_sale/static/src/app/popup/popup_controller.xml b/addons/point_of_sale/static/src/app/popup/popup_controller.xml
index 0d78359a609..821e1d04642 100644
--- a/addons/point_of_sale/static/src/app/popup/popup_controller.xml
+++ b/addons/point_of_sale/static/src/app/popup/popup_controller.xml
@@ -4,7 +4,8 @@
     <t t-name="point_of_sale.PopupContainer" owl="1">
         <div t-if="Object.keys(props.popups).length > 0" class="popups">
             <t t-foreach="props.popups" t-as="popup" t-key="popup">
-                <div t-if="popup_last || popup_value.props.keepBehind" role="dialog" class="modal-dialog position-absolute start-0 top-0 d-flex align-items-center justify-content-center h-100 w-100 mw-100 m-0 p-0 pe-auto bg-dark bg-opacity-50">
+                <div t-if="popup_last || popup_value.props.keepBehind" role="dialog" 
+                    class="modal-dialog position-absolute start-0 top-0 d-flex align-items-center justify-content-center h-100 w-100 mw-100 m-0 p-0 pe-auto bg-dark bg-opacity-50">
                     <t t-component="popup_value.component" t-props="popup_value.props" isActive="popup_last" />
                 </div>
             </t>
diff --git a/addons/point_of_sale/static/src/app/pos_app.scss b/addons/point_of_sale/static/src/app/pos_app.scss
index b15323b9d3a..a548b35baf6 100644
--- a/addons/point_of_sale/static/src/app/pos_app.scss
+++ b/addons/point_of_sale/static/src/app/pos_app.scss
@@ -22,7 +22,6 @@
        -moz-user-select: none;
             user-select: none;
     text-shadow: none;
-    overflow: hidden;
 }
 
 
@@ -32,15 +31,19 @@
     text-decoration: none;
     color: $gray-700;
 }
-
 .pos ul, .pos ol {
     padding: 0;
     margin: 0;
 }
+
 .pos li {
     list-style-type: none;
 }
 
+.modal-footer {
+    justify-content: start;
+}
+
 /* --- Generic Restyling and Resets --- */
 
 html {
@@ -71,27 +74,8 @@ td {
     clear: both;
 }
 
-
-.pos input::-webkit-outer-spin-button,
-.pos input::-webkit-inner-spin-button {
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }
-
-.pos .oe_hidden{
-    display: none !important;
-}
-
-.pos ul, .pos li  {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-}
-
-
-/*  ********* POS CONTENT ********* */
-
-.pos-content {
-    height: calc(100% - #{$navbar-height});
-}
-
diff --git a/addons/point_of_sale/static/src/app/pos_app.xml b/addons/point_of_sale/static/src/app/pos_app.xml
index b7e1b3ff3b7..afd9df63b0b 100644
--- a/addons/point_of_sale/static/src/app/pos_app.xml
+++ b/addons/point_of_sale/static/src/app/pos_app.xml
@@ -2,25 +2,17 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.Chrome" owl="1">
-        <div class="pos">
+        <div class="pos vh-100 d-flex flex-column">
             <div class="pos-receipt-print"></div>
             <Navbar />
-            <div class="pos-content position-relative w-100 bg-200">
-                <div class="window position-relative h-100 w-100 border-0 overflow-hidden">
-                    <div class="subwindow w-100 h-100">
-                        <div class="subwindow-container">
-                            <div class="subwindow-container-fix screens">
-                                <!-- FIXME POSREF: better error handling in main screens (currently, a crash in owl lifecycle of a main screen blows up the application and the error can't be displayed) -->
-                                <t isShown="!pos.tempScreen" t-component="pos.mainScreen.component"
-                                    t-props="pos.mainScreen.props"/>
-                                <ErrorHandler onError.bind="onTempScreenError">
-                                    <t t-if="pos.tempScreen" t-component="pos.tempScreen.component"
-                                    t-props="pos.tempScreen.props" t-key="pos.tempScreen.name" />
-                                </ErrorHandler>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+            <div class="pos-content w-100 h-100 bg-200 overflow-auto">
+                <!-- FIXME POSREF: better error handling in main screens (currently, a crash in owl lifecycle of a main screen blows up the application and the error can't be displayed) -->
+                <t isShown="!pos.tempScreen" t-component="pos.mainScreen.component"
+                    t-props="pos.mainScreen.props"/>
+                <ErrorHandler onError.bind="onTempScreenError">
+                    <t t-if="pos.tempScreen" t-component="pos.tempScreen.component"
+                    t-props="pos.tempScreen.props" t-key="pos.tempScreen.name" />
+                </ErrorHandler>
             </div>
         </div>
         <MainComponentsContainer/>
diff --git a/addons/point_of_sale/static/src/app/screens/partner_list/partner_editor/partner_editor.xml b/addons/point_of_sale/static/src/app/screens/partner_list/partner_editor/partner_editor.xml
index c25b2a14df9..b9e4b11ddf9 100644
--- a/addons/point_of_sale/static/src/app/screens/partner_list/partner_editor/partner_editor.xml
+++ b/addons/point_of_sale/static/src/app/screens/partner_list/partner_editor/partner_editor.xml
@@ -1,34 +1,29 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
     <t t-name="point_of_sale.PartnerDetailsEdit" owl="1">
-        <section class="partner-details edit d-flex flex-column w-100 m-3">
-            <div class="partner-details-header d-flex pe-2 gap-2">
-                <div class="partner-picture position-relative rounded text-center overflow-hidden">
-                    <t t-if="partnerImageUrl">
-                        <img class="rounded" t-att-src="partnerImageUrl" alt="Partner" style="width: 64px; height: 64px; object-fit: cover;" />
-                    </t>
-                    <t t-else="">
-                        <i class="fa fa-camera" role="img" aria-label="Picture" title="Picture"></i>
-                    </t>
-                    <input type="file" class="image-uploader" t-on-change="uploadImage" />
+        <section class="partner-details edit d-flex flex-column m-3">
+            <div class="container">
+                <div class="partner-details-header d-flex pe-2 gap-2">
+                    <div class="partner-picture position-relative rounded text-center overflow-hidden">
+                        <t t-if="partnerImageUrl">
+                            <img class="rounded" t-att-src="partnerImageUrl" alt="Partner" style="width: 64px; height: 64px; object-fit: cover;" />
+                        </t>
+                        <t t-else="">
+                            <i class="fa fa-camera" role="img" aria-label="Picture" title="Picture"></i>
+                        </t>
+                        <input type="file" class="image-uploader" t-on-change="uploadImage" />
+                    </div>
+                    <input class="detail partner-name form-control form-control-lg" name="name" t-att-value="props.partner.name or ''" placeholder="Name" t-on-change="captureChange" />
                 </div>
-                <input class="detail partner-name form-control form-control-lg" name="name" t-att-value="props.partner.name or ''" placeholder="Name" t-on-change="captureChange" />
-            </div>
-            <div class="partner-details-box clearfix d-flex flex-column flex-sm-row gap-2 mt-4">
-                <div class="partner-details-left d-flex flex-column gap-3 w-100">
-                    <div class="partner-detail">
-                        <label class="form-label label" for="street">Street</label>
-                        <input class="detail form-control" id="street" name="street" t-model="changes.street" placeholder="Street" t-att-class="{'border-danger': missingFields.includes('street')}"/>
-                    </div>
-                    <div class="partner-detail">
-                        <label class="form-label label" for="city">City</label>
-                        <input class="detail form-control" id="city" name="city" t-model="changes.city" placeholder="City" t-att-class="{'border-danger': missingFields.includes('city')}" />
-                    </div>
-                    <div class="partner-detail">
-                        <label class="form-label label" for="postcode">Postcode</label>
-                        <input class="detail form-control" id="postcode" name="zip" t-model="changes.zip" placeholder="ZIP" t-att-class="{'border-danger': missingFields.includes('zip')}" />
-                    </div>
-                    <div class="partner-detail">
+                <div class="partner-details-box row row-cols-1 row-cols-sm-2 gy-3 mt-3">
+                    <t t-foreach="['Street', 'City', 'Zip', 'Email', 'Phone', 'Mobile', 'Barcode' ]" t-as="item" t-key="item">
+                        <div class="partner-detail col">
+                            <label class="form-label label" t-attf-for="{{item}}" t-esc="item"/>
+                            <input class="detail form-control" t-attf-id="{{item}}" t-attf-name="{{item}}" t-model="changes[item.toLowerCase()]" t-attf-placeholder="{{item}}" t-att-class="{'border-danger': missingFields.includes(item.toLowerCase())}" />
+                        </div>
+                    </t>
+
+                    <div class="partner-detail col">
                         <label class="form-label label" for="state">State</label>
                         <select class="detail form-select" id="state" name="state_id" t-model="changes.state_id" t-att-class="{'border-danger': missingFields.includes('state_id')}">
                             <option value="">None</option>
@@ -39,7 +34,7 @@
                             </t>
                         </select>
                     </div>
-                    <div class="partner-detail">
+                    <div class="partner-detail col">
                         <label class="form-label label" for="country">Country</label>
                         <select class="detail form-select" id="country" name="country_id" t-model="changes.country_id" t-att-class="{'border-danger': missingFields.includes('country_id')}">
                             <option value="">None</option>
@@ -50,9 +45,7 @@
                             </t>
                         </select>
                     </div>
-                </div>
-                <div class="partner-details-right d-flex flex-column gap-3 w-100">
-                    <div class="partner-detail">
+                    <div class="partner-detail col">
                         <label class="form-label label" for="language">Language</label>
                         <select class="detail form-select" id="language" name="lang" t-model="changes.lang" t-att-class="{'border-danger': missingFields.includes('lang')}">
                             <t t-foreach="pos.langs" t-as="lang" t-key="lang.id">
@@ -62,29 +55,7 @@
                             </t>
                         </select>
                     </div>
-                    <div class="partner-detail">
-                        <label class="form-label label" for="email">Email</label>
-                        <input class="detail form-control" id="email" name="email" type="email" t-model="changes.email" t-att-class="{'border-danger': missingFields.includes('email')}" />
-                    </div>
-                    <div class="partner-detail">
-                        <label class="form-label label" for="phone">Phone</label>
-                        <input class="detail form-control" id="phone" name="phone" type="tel" t-model="changes.phone" t-att-class="{'border-danger': missingFields.includes('phone')}" />
-                    </div>
-                    <div class="partner-detail">
-                        <label class="form-label label" for="mobile">Mobile</label>
-                        <input class="detail form-control" id="mobile" name="mobile" type="tel"
-                               t-model="changes.mobile"
-                               t-att-class="{'border-danger': missingFields.includes('tel')}" />
-                    </div>
-                    <div class="partner-detail">
-                        <label class="form-label label" for="barcode">Barcode</label>
-                        <input class="detail barcode form-control" id="barcode" name="barcode" t-model="changes.barcode" t-att-class="{'border-danger': missingFields.includes('barcode')}" />
-                    </div>
-                    <div class="partner-detail">
-                        <label class="form-label label" for="vat">Tax ID</label>
-                        <input class="detail vat form-control" id="vat" name="vat" t-model="changes.vat" t-att-class="{'border-danger': missingFields.includes('vat')}" />
-                    </div>
-                    <div t-if="pos.pricelists.length gt 1" class="partner-detail">
+                    <div t-if="pos.pricelists.length gt 1" class="partner-detail col">
                         <label class="form-label label" for="pricelist">Pricelist</label>
                         <select class="detail form-select" id="pricelist" name="property_product_pricelist" t-model="changes.property_product_pricelist" t-att-class="{'border-danger': missingFields.includes('property_product_pricelist')}">
                             <t t-foreach="pos.pricelists" t-as="pricelist" t-key="pricelist.id">
@@ -94,6 +65,10 @@
                             </t>
                         </select>
                     </div>
+                    <div class="partner-detail col">                                                           
+                        <label class="form-label label" for="vat">Tax ID</label>                           
+                        <input class="detail vat form-control" id="vat" name="vat" t-model="changes.vat" t-att-class="{'border-danger': missingFields.includes('vat')}" />
+                    </div>      
                 </div>
             </div>
         </section>
diff --git a/addons/point_of_sale/static/src/app/screens/partner_list/partner_line/partner_line.js b/addons/point_of_sale/static/src/app/screens/partner_list/partner_line/partner_line.js
index 711d15625d8..da63beca06f 100644
--- a/addons/point_of_sale/static/src/app/screens/partner_list/partner_line/partner_line.js
+++ b/addons/point_of_sale/static/src/app/screens/partner_list/partner_line/partner_line.js
@@ -6,7 +6,7 @@ export class PartnerLine extends Component {
     static template = "point_of_sale.PartnerLine";
 
     get highlight() {
-        return this._isPartnerSelected ? "highlight text-bg-primary" : "";
+        return this._isPartnerSelected ? "highlight active" : "";
     }
     get _isPartnerSelected() {
         return this.props.partner === this.props.selectedPartner;
diff --git a/addons/point_of_sale/static/src/app/screens/partner_list/partner_line/partner_line.scss b/addons/point_of_sale/static/src/app/screens/partner_list/partner_line/partner_line.scss
index 56541204168..9f1b8cb0475 100644
--- a/addons/point_of_sale/static/src/app/screens/partner_list/partner_line/partner_line.scss
+++ b/addons/point_of_sale/static/src/app/screens/partner_list/partner_line/partner_line.scss
@@ -1,3 +1,7 @@
+.partner-line.active {
+    background-color: $o-component-active-bg;
+}
+
 @include media-breakpoint-down(lg) {
 
     .partner-line {
@@ -21,11 +25,6 @@
     .partner-line .pos-right-align{
         text-align: left ;
     }
-    .partner-line-email {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-    }
     .edit-partner-button-cell {
         order: 4;
     }
diff --git a/addons/point_of_sale/static/src/app/screens/partner_list/partner_line/partner_line.xml b/addons/point_of_sale/static/src/app/screens/partner_list/partner_line/partner_line.xml
index e7f5bf2f466..a7639de0d9a 100644
--- a/addons/point_of_sale/static/src/app/screens/partner_list/partner_line/partner_line.xml
+++ b/addons/point_of_sale/static/src/app/screens/partner_list/partner_line/partner_line.xml
@@ -5,15 +5,15 @@
         <tr t-attf-class="partner-line gap-2 gap-lg-0 align-top {{highlight}}" t-att-data-id="props.partner.id"
             t-on-click="() => this.props.onClickPartner(props.partner)">
             <td>
-                <div>
+                <b>
                     <t t-esc="props.partner.name or ''" />
-                </div>
+                </b>
                 <div class="company-field text-bg-muted">
                     <t t-esc="props.partner.parent_name or ''" />
                 </div>
                 <button t-if="_isPartnerSelected" class="unselect-tag d-lg-inline-block d-none btn btn-light mt-2">
                     <i class="fa fa-times me-1"></i>
-                    <span> unselect </span>
+                    <span> Unselect </span>
                 </button>
             </td>
             <td>
@@ -21,23 +21,23 @@
                     <t t-esc="props.partner.address" />
                 </div>
             </td>
-            <td class="partner-line-email" >
-                <div t-if="props.partner.phone">
+            <td class="partner-line-email ">
+                <div class="mb-2" t-if="props.partner.phone">
                     <i class="fa fa-fw fa-phone me-2"/><t t-esc="props.partner.phone"/>
                 </div>
-                <div t-if="props.partner.mobile">
-                    <i class="fa fa-fw fa-mobile fa-lg me-2"/><t t-esc="props.partner.mobile"/>
+                <div class="mb-2" t-if="props.partner.mobile">
+                    <i class="fa fa-fw fa-mobile me-2"/><t t-esc="props.partner.mobile"/>
                 </div>
-                <div t-if="props.partner.email" class="email-field">
+                <div t-if="props.partner.email" class="email-field mb-2">
                     <i class="fa fa-fw fa-paper-plane-o me-2"/><t t-esc="props.partner.email" />
                 </div>
             </td>
             <td class="partner-line-balance" t-if="props.isBalanceDisplayed"></td>
             <td class="edit-partner-button-cell">
-                <button class="edit-partner-button btn btn-light" t-on-click.stop="() => props.onClickEdit(props.partner)">DETAILS</button>
-                <button t-if="_isPartnerSelected" class="unselect-tag-mobile d-inline-block d-lg-none btn btn-outline-light ms-2">
+                <button class="edit-partner-button btn btn-light border" t-on-click.stop="() => props.onClickEdit(props.partner)">DETAILS</button>
+                <button t-if="_isPartnerSelected" class="unselect-tag-mobile d-inline-block d-lg-none btn btn-light border ms-2">
                     <i class="fa fa-times"></i>
-                    <span> unselect </span>
+                    <span> UNSELECT </span>
                 </button>
             </td>
             <td class="partner-line-last-column-placeholder oe_invisible"></td>
diff --git a/addons/point_of_sale/static/src/app/screens/partner_list/partner_list.scss b/addons/point_of_sale/static/src/app/screens/partner_list/partner_list.scss
index 38084b0c722..aeeb1377a27 100644
--- a/addons/point_of_sale/static/src/app/screens/partner_list/partner_list.scss
+++ b/addons/point_of_sale/static/src/app/screens/partner_list/partner_list.scss
@@ -7,11 +7,10 @@
         &.partner-line {
             &:hover {
                 cursor: pointer;
-                background: rgba($primary, 0.2);
+                background: $o-gray-200;
             }
             &:active {
-                background-color: $primary;
-                color: white;
+                background-color: $o-component-active-bg;
             }
         }
     }
diff --git a/addons/point_of_sale/static/src/app/screens/partner_list/partner_list.xml b/addons/point_of_sale/static/src/app/screens/partner_list/partner_list.xml
index 9af8cdf4bf9..083c6cbc314 100644
--- a/addons/point_of_sale/static/src/app/screens/partner_list/partner_list.xml
+++ b/addons/point_of_sale/static/src/app/screens/partner_list/partner_list.xml
@@ -2,87 +2,78 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.PartnerListScreen" owl="1">
-        <div class="partnerlist-screen screen">
-            <div class="screen-content">
-                <div class="top-content d-flex align-items-center p-2 border-bottom text-center">
-                    <div class="button highlight btn btn-lg btn-primary" t-if="state.detailIsShown" t-on-click="() => this.partnerEditor.save()">
-                        <i t-if="ui.isSmall" class="fa fa-floppy-o"/>
-                        <t t-else="">
-                            <span> Save</span>
-                        </t>
+        <div class="partnerlist-screen screen h-100 d-flex flex-column bg-100">
+            <div class="top-content d-flex align-items-center p-2 border-bottom text-center">
+                <div class="button highlight btn btn-lg btn-primary" t-if="state.detailIsShown" t-on-click="() => this.partnerEditor.save()">
+                    <i t-if="ui.isSmall" class="fa fa-floppy-o"/>
+                    <t t-else="">
+                        <span> Save</span>
+                    </t>
+                </div>
+                <button t-if="!state.detailIsShown" class="button new-customer highlight btn btn-lg btn-primary" role="img" aria-label="Add a customer"
+                        t-on-click="createPartner"
+                        title="Add a customer">
+                    <i t-if="ui.isSmall" class="fa fa-plus"/>
+                    <t t-else=""> Create</t>
+                </button>
+                <div class="button back btn btn-lg btn-secondary mx-2" t-on-click="back">
+                    <i t-if="ui.isSmall" class="fa fa-angle-double-left"/>
+                    <t t-else=""> Discard</t>
+                </div>
+                <div class="top-right-buttons d-flex gap-2 w-100 justify-content-end">
+                    <div t-if="state.detailIsShown and state.editModeProps.partner.id" class="button more-info">
+                        <a t-on-click="goToOrders" class="btn btn-lg btn-outline-secondary" target="_blank"> Orders </a>
                     </div>
-                    <button t-if="!state.detailIsShown" class="button new-customer highlight btn btn-lg btn-primary" role="img" aria-label="Add a customer"
-                            t-on-click="createPartner"
-                            title="Add a customer">
-                        <i t-if="ui.isSmall" class="fa fa-plus"/>
-                        <t t-else=""> Create</t>
-                    </button>
-                    <div class="button back btn btn-lg btn-secondary mx-2" t-on-click="back">
-                        <i t-if="ui.isSmall" class="fa fa-angle-double-left"/>
-                        <t t-else=""> Discard</t>
+                    <div t-if="state.detailIsShown &amp;&amp; state.editModeProps.partner.id" class="button more-info">
+                        <a t-att-href="partnerLink" class="btn btn-lg btn-outline-secondary" target="_blank"> More info</a>
                     </div>
-                    <div class="top-right-buttons d-flex gap-2 w-100 justify-content-end">
-                        <div t-if="state.detailIsShown and state.editModeProps.partner.id" class="button more-info">
-                            <a t-on-click="goToOrders" class="btn btn-lg btn-outline-secondary" target="_blank"> Orders </a>
-                        </div>
-                        <div t-if="state.detailIsShown &amp;&amp; state.editModeProps.partner.id" class="button more-info">
-                            <a t-att-href="partnerLink" class="btn btn-lg btn-outline-secondary" target="_blank"> More info</a>
-                        </div>
-                        <div class="search-bar-container sb-partner d-flex align-items-center flex-grow-1 h-100" t-if="!state.detailIsShown">
-                            <div class="input-group h-100">
-                                <div class="pos-search-bar form-control d-flex align-items-center bg-view">
-                                    <i class="oi oi-search me-2" t-on-click="_onPressEnterKey"/>
-                                    <input class="flex-grow-1 w-auto h-100 border-0 p-2 me-4" type="text" autofocus="autofocus" t-ref="search-word-input-partner" placeholder="Search Customers..." size="1" t-on-keyup="updatePartnerList" />
-                                    <i class="fa fa-times position-absolute end-0 me-2 pe-1 cursor-pointer" t-on-click="_clearSearch"/>
-                                </div>
+                    <div class="search-bar-container sb-partner d-flex align-items-center w-100 w-md-70 w-lg-50 h-100 h-100" t-if="!state.detailIsShown">
+                        <div class="input-group h-100">
+                            <div class="pos-search-bar form-control d-flex align-items-center bg-view">
+                                <i class="oi oi-search me-2" t-on-click="_onPressEnterKey"/>
+                                <input class="flex-grow-1 w-auto h-100 border-0 p-2 me-4" type="text" autofocus="autofocus" t-ref="search-word-input-partner" placeholder="Search Customers..." size="1" t-on-keyup="updatePartnerList" />
+                                <i class="fa fa-times position-absolute end-0 me-2 pe-1 cursor-pointer" t-on-click="_clearSearch"/>
                             </div>
                         </div>
                     </div>
                 </div>
-                <section class="full-content position-absolute start-0 end-0 bottom-0 overflow-auto">
-                    <div class="partner-window">
-                        <section class="subwindow collapsed h-0">
-                            <div class="subwindow-container collapsed position-relative d-table-cell h-0">
-                                <div t-if="state.detailIsShown" class="partner-details-contents subwindow-container-fix">
-                                    <PartnerDetailsEdit t-props="state.editModeProps" saveChanges.bind="saveChanges" imperativeHandle="partnerEditor" />
-                                </div>
-                            </div>
-                        </section>
-                        <section class="subwindow list">
-                            <div class="subwindow-container position-relative d-table-cell h-100 vw-100">
-                                <div t-if="!state.detailIsShown" class="subwindow-container-fix scrollable-y">
-                                    <table class="partner-list table table-striped w-100">
-                                        <thead>
-                                            <tr>
-                                                <th class="py-2">Name</th>
-                                                <th class="py-2">Address</th>
-                                                <th class="partner-line-email py-2">Contact</th>
-                                                <th class="pos-right-align py-2" t-if="isBalanceDisplayed">Balance</th>
-                                                <th class="partner-line-details py-2"></th>
-                                                <th class="partner-line-last-column-placeholder oe_invisible py-2"></th>
-                                            </tr>
-                                        </thead>
-                                        <tbody class="partner-list-contents">
-                                            <t t-foreach="partners" t-as="partner"
-                                               t-key="partner.id">
-                                                <PartnerLine partner="partner"
-                                                            selectedPartner="state.selectedPartner"
-                                                            detailIsShown="state.detailIsShown"
-                                                            isBalanceDisplayed="isBalanceDisplayed"
-                                                            onClickEdit.bind="editPartner"
-                                                            onClickPartner.bind="clickPartner"/>
-                                            </t>
-                                        </tbody>
-                                    </table>
-                                    <div t-if="state.query" class="search-more-button d-flex justify-content-center mt-2">
-                                        <button class="btn btn-lg btn-primary" t-on-click="_onPressEnterKey">Search more</button>
-                                    </div>
-                                </div>
-                            </div>
-                        </section>
-                    </div>
-                </section>
             </div>
+            <section class="overflow-auto">
+                <t t-if="state.detailIsShown">
+                    <PartnerDetailsEdit 
+                        t-props="state.editModeProps" 
+                        saveChanges.bind="saveChanges" 
+                        imperativeHandle="partnerEditor" />
+                </t>
+                <t t-else="">
+                    <table class="partner-list table table-striped w-100">
+                        <thead>
+                            <tr>
+                                <th class="py-2">Name</th>
+                                <th class="py-2">Address</th>
+                                <th class="partner-line-email py-2">Contact</th>
+                                <th class="pos-right-align py-2" t-if="isBalanceDisplayed">Balance</th>
+                                <th class="partner-line-details py-2"></th>
+                                <th class="partner-line-last-column-placeholder oe_invisible py-2"></th>
+                            </tr>
+                        </thead>
+                        <tbody class="partner-list-contents">
+                            <t t-foreach="partners" t-as="partner"
+                                t-key="partner.id">
+                                <PartnerLine partner="partner"
+                                            selectedPartner="state.selectedPartner"
+                                            detailIsShown="state.detailIsShown"
+                                            isBalanceDisplayed="isBalanceDisplayed"
+                                            onClickEdit.bind="editPartner"
+                                            onClickPartner.bind="clickPartner"/>
+                            </t>
+                        </tbody>
+                    </table>
+                    <div t-if="state.query" class="search-more-button d-flex justify-content-center my-2">
+                        <button class="btn btn-lg btn-primary" t-on-click="_onPressEnterKey">Search more</button>
+                    </div>
+                </t>
+            </section>
         </div>
     </t>
 
diff --git a/addons/point_of_sale/static/src/app/screens/payment_screen/numpad/numpad_button/numpad_button.xml b/addons/point_of_sale/static/src/app/screens/payment_screen/numpad/numpad_button/numpad_button.xml
index 726dfb7ca65..1b055e4cb8f 100644
--- a/addons/point_of_sale/static/src/app/screens/payment_screen/numpad/numpad_button/numpad_button.xml
+++ b/addons/point_of_sale/static/src/app/screens/payment_screen/numpad/numpad_button/numpad_button.xml
@@ -2,14 +2,14 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.PSNumpadInputButton" owl="1">
-        <button t-attf-class="{{ _class }} btn btn-secondary w-100 rounded-0 py-3"
+        <button t-attf-class="{{ _class }} btn btn-light w-100 rounded-0 py-3"
                 t-on-click="() => this.numberBuffer.sendKey(props.value)">
             <t t-slot="default">
                 <t t-if="props.text">
-                    <t t-esc="props.text" />
+                    <h1 t-esc="props.text" />
                 </t>
                 <t t-else="">
-                    <t t-esc="props.value" />
+                    <h1 t-esc="props.value" />
                 </t>
             </t>
         </button>
diff --git a/addons/point_of_sale/static/src/app/screens/payment_screen/payment_lines/payment_lines.xml b/addons/point_of_sale/static/src/app/screens/payment_screen/payment_lines/payment_lines.xml
index 8c3a85d8d68..96a0f10e50e 100644
--- a/addons/point_of_sale/static/src/app/screens/payment_screen/payment_lines/payment_lines.xml
+++ b/addons/point_of_sale/static/src/app/screens/payment_screen/payment_lines/payment_lines.xml
@@ -3,7 +3,7 @@
 
     <t t-name="point_of_sale.PaymentScreenPaymentLines" owl="1">
             <div class="paymentlines d-flex flex-column">
-                <p class="title-category py-1 px-3 m-0 text-bg-300 fw-bolder">Summary</p>
+                <h4 class="title-category pt-3 pb-2 px-3 m-0 bg-view border-bottom border-2">Summary</h4>
                 <t t-foreach="props.paymentLines" t-as="line" t-key="line.cid">
                     <t t-if="line.selected">
                         <div class="paymentline selected d-flex align-items-center bg-200"
@@ -34,7 +34,7 @@
                                     <div class="electronic_status">
                                         Payment request pending
                                     </div>
-                                    <div class="button send_payment_request highlight" title="Send Payment Request" t-on-click="() => this.props.sendPaymentRequest(line)">
+                                    <div class="button send_payment_request highlight text-bg-primary" title="Send Payment Request" t-on-click="() => this.props.sendPaymentRequest(line)">
                                         Send
                                     </div>
                                 </t>
@@ -42,7 +42,7 @@
                                     <div class="electronic_status">
                                         Transaction cancelled
                                     </div>
-                                    <div class="button send_payment_request highlight" title="Send Payment Request" t-on-click="() => this.props.sendPaymentRequest(line)">
+                                    <div class="button send_payment_request highlight text-bg-primary" title="Send Payment Request" t-on-click="() => this.props.sendPaymentRequest(line)">
                                         Retry
                                     </div>
                                 </t>
diff --git a/addons/point_of_sale/static/src/app/screens/payment_screen/payment_screen.scss b/addons/point_of_sale/static/src/app/screens/payment_screen/payment_screen.scss
index 82241f09f37..9747612fd0c 100644
--- a/addons/point_of_sale/static/src/app/screens/payment_screen/payment_screen.scss
+++ b/addons/point_of_sale/static/src/app/screens/payment_screen/payment_screen.scss
@@ -1,52 +1,5 @@
-.payment-screen .center-content {
-    grid-template-rows: auto 1fr;
-    width: 30rem;
-}
-
-@include media-breakpoint-down(lg)  {
-    .payment-screen {
-
-        .main-content {
-            grid-template-columns: 300px 1fr;
-            grid-template-rows: 1fr auto;
-        }
-        .center-content {
-            border-bottom: none;
-        }
-    }
-
-    .payment-status-container > div:first-child {
-        margin-top: map-get($spacers, 2);
-    }
-}
-
-@include media-breakpoint-down(md) {
-    .payment-screen .main-content {
-        grid-template-columns: 1fr;
-        grid-template-rows: 1fr 1fr;
-    }
-    .payment-screen .center-content {
-        grid-template-rows: 1fr;
-    }
-    .payment-screen .left-content,
-    .payment-screen .right-content {
-        justify-content: flex-start;
-        overflow: initial;
-    }
-    .screen .right-content {
-        grid-column: span 1;
-    }
-    
-    .pos .paymentlines-container {
-        position: sticky;
-        top: 0;
-    }
-}
-
 .payment-method-icon {
     max-width: 50px;
     max-height: 50px;
     vertical-align: middle;
 }
-
-
diff --git a/addons/point_of_sale/static/src/app/screens/payment_screen/payment_screen.xml b/addons/point_of_sale/static/src/app/screens/payment_screen/payment_screen.xml
index 37a059cd0a8..3aca942a7af 100644
--- a/addons/point_of_sale/static/src/app/screens/payment_screen/payment_screen.xml
+++ b/addons/point_of_sale/static/src/app/screens/payment_screen/payment_screen.xml
@@ -2,123 +2,121 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.PaymentScreen" owl="1">
-        <div class="payment-screen screen" t-att-class="{ oe_hidden: !props.isShown }">
-            <div class="screen-content d-flex flex-column h-100">
-                <t t-if="!ui.isSmall">
-                    <div class="top-content d-flex align-items-center p-2 border-bottom text-center">
-                        <div class="button back btn btn-lg btn-secondary" t-on-click="() => pos.showScreen('ProductScreen')">
-                            <i class="fa fa-angle-double-left me-2"></i>
-                            <span class="back_text">Back</span>
-                        </div>
-                        <div class="top-content-center flex-grow-1">
-                            <h2 class="mb-0">Payment</h2>
+        <t t-if="ui.isSmall">
+            <div class="payment-screen screen d-flex flex-column h-100 bg-100" t-att-class="{ oe_hidden: !props.isShown }">
+                <PaymentScreenStatus order="currentOrder" />
+                <t t-call="point_of_sale.PaymentScreenMethods" />
+                <t t-call="point_of_sale.PaymentScreenButtons" />
+                <t t-call="point_of_sale.PaymentScreenValidate" />
+            </div>
+        </t>
+        <t t-else="">
+            <div class="payment-screen screen d-flex flex-column h-100 bg-100" t-att-class="{ oe_hidden: !props.isShown }">
+                <t t-call="point_of_sale.PaymentScreenTop" />
+                <div class="main-content d-flex overflow-auto h-100">
+                    <div class="left-content d-flex flex-column w-25 bg-400">
+                        <t t-call="point_of_sale.PaymentScreenMethods" />
+                        <t t-call="point_of_sale.PaymentScreenValidate" />
+                    </div>
+                    <div class="center-content d-flex flex-column w-50 p-1 border-start border-end bg-300" >
+                        <PaymentScreenStatus order="currentOrder" />
+                        <div class="payment-numpad flex-grow-1 d-flex flex-wrap">
+                            <PaymentScreenNumpad />
                         </div>
                     </div>
-                </t>
-                <div class="main-content d-flex flex-grow-1 flex-wrap overflow-y-auto">
-                    <div class="left-content d-flex flex-column justify-content-between w-100 mh-100 border-0">
-                        <t t-if="ui.isSmall">
-                            <section class="paymentlines-container px-4 pt-0">
-                                <PaymentScreenStatus order="currentOrder" />
-                            </section>
-                        </t>
-                        <div class="paymentmethods-container overflow-auto">
-                            <div class="paymentmethods d-flex flex-column">
-                                <p class="title-category py-1 px-3 m-0 text-bg-300 fw-bolder">Payment method</p>
-                                <t t-foreach="payment_methods_from_config" t-as="paymentMethod"
-                                   t-key="paymentMethod.id">
-                                    <div class="button paymentmethod btn btn-light rounded-0 fw-bolder"
-                                        t-on-click="() => this.addNewPaymentLine(paymentMethod)">
-                                        <div class="payment-method-display d-flex align-items-center flex-grow-1 py-3">
-                                            <div><img class="payment-method-icon" t-att-src="paymentMethodImage(paymentMethod.id)"/></div>
-                                            <span class="payment-name"><t t-esc="paymentMethod.name" /></span>
-                                        </div>
-                                    </div>
-                                </t>
-                            </div>
-                            <PaymentScreenPaymentLines
-                                paymentLines="paymentLines"
-                                deleteLine.bind="deletePaymentLine"
-                                sendForceDone.bind="sendForceDone"
-                                sendPaymentReverse.bind="sendPaymentReverse"
-                                sendPaymentCancel.bind="sendPaymentCancel"
-                                sendPaymentRequest.bind="sendPaymentRequest"
-                                selectLine.bind="selectPaymentLine"
-                                updateSelectedPaymentline.bind="updateSelectedPaymentline"/>
-                        </div>
-                        <div t-if="!ui.isSmall" class="button next validation btn btn-primary btn-lg py-5 rounded-0 d-flex flex-column align-items-center justify-content-center fw-bolder" t-attf-class="{{currentOrder.is_paid() and currentOrder._isValidEmptyOrder() ? 'highlight' : 'disabled'}}"
-                            t-on-click="() => this.validateOrder()">
-                            <div class="pay-circle d-flex align-items-center justify-content-center mb-2">
-                                <i class="oi oi-chevron-right" role="img" aria-label="Pay" title="Pay" />
-                            </div>
-                            <span class="next_text">Validate</span>
-                        </div>
-                    </div>
-                    <div class="center-content d-grid px-3 pb-3 pb-md-0 pb-lg-3 bg-300" t-if="!ui.isSmall">
-                        <section class="paymentlines-container bg-view rounded my-3 p-3">
-                            <PaymentScreenStatus order="currentOrder" />
-                        </section>
-
-                        <div class="payment-buttons-container d-flex flex-wrap">
-                            <section class="payment-numpad flex-grow-1">
-                                <PaymentScreenNumpad />
-                            </section>
-                        </div>
-                    </div>
-                    <div class="right-content">
-                        <div class="payment-buttons d-flex flex-column flex-md-row flex-lg-column flex-lg-column flex-grow-1 flex-wrap gap-3 gap-lg-0 p-3 p-lg-0 bg-300 ">
-                            <div class="partner-button d-grid flex-grow-1 flex-basis-25 border">
-                                <div class="button btn btn-light py-3 text-start rounded-0" t-att-class="{ 'highlight text-bg-primary': currentOrder.get_partner() }" t-on-click="() => this.selectPartner(false, [])">
-                                    <i class="fa fa-user me-2" role="img" title="Customer" />
-                                    <t t-set="partner" t-value="currentOrder.get_partner()" />
-                                    <span>
-                                        <t t-if="partner">
-                                            <t t-esc="partner.name" />
-                                        </t>
-                                        <t t-if="!partner">
-                                            Customer
-                                        </t>
-                                    </span>
-                                </div>
-                            </div>
-                            <div class="payment-controls d-grid flex-grow-1 flex-basis-25 border">
-                                <button class="button js_invoice btn btn-light py-3 text-start rounded-0"
-                                    t-att-class="{ 'highlight text-bg-primary': currentOrder.is_to_invoice() }"
-                                    t-on-click="toggleIsToInvoice">
-                                    <i class="fa fa-file-text-o me-2" /> Invoice
-                                </button>
-                                <button t-if="pos.config.iface_tipproduct and pos.config.tip_product_id" class="button js_tip btn btn-light py-3 text-start rounded-0"
-                                    t-att-class="{ 'highlight text-bg-primary': currentOrder.get_tip() }"
-                                    t-on-click="addTip">
-                                    <i class="fa fa-heart me-2" /> Tip <t t-if="currentOrder.get_tip() != 0">(<t t-esc="env.utils.formatCurrency(currentOrder.get_tip())"/>)</t>
-                                </button>
-                                <button t-if="pos.config.iface_cashdrawer" class="button js_cashdrawer btn btn-light py-3 text-start rounded-0"
-                                    t-on-click="openCashbox">
-                                    <i class="fa fa-archive me-2" /> Open Cashbox
-                                </button>
-                                <div t-if="pos.config.ship_later" class="button btn btn-light py-3 text-start rounded-0"
-                                        t-att-class="{ 'highlight text-bg-primary': currentOrder.getShippingDate() }"
-                                        t-on-click="toggleShippingDatePicker">
-                                    <i class="fa fa-clock-o me-2" /> Ship Later
-                                    <span t-if="currentOrder.getShippingDate()">
-                                        (<t t-esc="currentOrder.getShippingDate()"/>)
-                                    </span>
-                                </div>
-                            </div>
-                        </div>
+                    <div class="right-content w-25 bg-400">
+                        <t t-call="point_of_sale.PaymentScreenButtons" />
                     </div>
                 </div>
-                <t t-if="ui.isSmall">
-                    <div class="switchpane d-flex">
-                        <button class="btn-switchpane validation-button btn btn-primary flex-fill py-5 rounded-0 fw-bolder"
-                            t-att-class="{ secondary: !(currentOrder.is_paid() and currentOrder._isValidEmptyOrder()) }"
-                            t-on-click="() => this.validateOrder()">
-                            <span>Validate</span>
-                        </button>
-                    </div>
-                </t>
+            </div>
+        </t>
+    </t>
+
+
+    <t t-name="point_of_sale.PaymentScreenTop" owl="1">
+        <div class="top-content d-flex align-items-center p-2 border-bottom text-center">
+            <div class="button back btn btn-lg btn-secondary" t-on-click="() => pos.showScreen('ProductScreen')">
+                <i class="fa fa-angle-double-left me-2" />
+                <span class="back_text">Back</span>
+            </div>
+            <div class="top-content-center flex-grow-1">
+                <h2 class="mb-0">Payment</h2>
             </div>
         </div>
     </t>
 
+    <t t-name="point_of_sale.PaymentScreenValidate" owl="1">
+        <t t-if="ui.isSmall">
+            <div class="switchpane d-flex">
+                <button class="btn-switchpane validation-button btn btn-primary flex-fill py-5 rounded-0 fw-bolder"
+                    t-att-class="{ secondary: !(currentOrder.is_paid() and currentOrder._isValidEmptyOrder()) }"
+                    t-on-click="() => this.validateOrder()">
+                    <span>Validate</span>
+                </button>
+            </div>
+        </t>
+        <t t-else="">
+            <div class="button next validation btn btn-primary btn-lg py-5 rounded-0 d-flex flex-column align-items-center justify-content-center fw-bolder" t-attf-class="{{currentOrder.is_paid() and currentOrder._isValidEmptyOrder() ? 'highlight' : 'disabled'}}"
+                t-on-click="() => this.validateOrder()">
+                <div class="pay-circle d-flex align-items-center justify-content-center mb-2">
+                    <i class="oi oi-chevron-right" role="img" aria-label="Pay" title="Pay" />
+                </div>
+                <span class="next_text">Validate</span>
+            </div>
+        </t>
+    </t>
+
+
+    <t t-name="point_of_sale.PaymentScreenButtons" owl="1">
+        <div class="payment-buttons d-flex flex-column flex-wrap">
+            <button class="button partner-button btn btn-light py-3 text-start rounded-0 border-bottom" 
+                t-att-class="{ 'highlight text-bg-primary': currentOrder.get_partner() }" 
+                t-on-click="() => this.selectPartner(false, [])">
+                <i class="fa fa-user me-2" role="img" title="Customer" />
+                <span class="partner-name" t-esc="currentOrder.get_partner()?.name or 'Customer'" /> 
+            </button>
+            <button class="button js_invoice btn btn-light py-3 text-start rounded-0 border-bottom" t-att-class="{ 'highlight text-bg-primary': currentOrder.is_to_invoice() }" 
+                t-on-click="toggleIsToInvoice">
+                <i class="fa fa-file-text-o me-2" />Invoice 
+            </button>
+            <button t-if="pos.config.iface_tipproduct and pos.config.tip_product_id" class="button js_tip btn btn-light py-3 text-start rounded-0 border-bottom" t-att-class="{ 'highlight text-bg-primary': currentOrder.get_tip() }" 
+                t-on-click="addTip">
+                <i class="fa fa-heart me-2" />Tip 
+                <t t-if="currentOrder.get_tip() != 0">
+                    (<t t-esc="env.utils.formatCurrency(currentOrder.get_tip())" />)
+                </t>
+            </button>
+            <button t-if="pos.config.iface_cashdrawer" class="button js_cashdrawer btn btn-light py-3 text-start rounded-0 border-bottom" 
+                t-on-click="openCashbox">
+                <i class="fa fa-archive me-2" />Open Cashbox 
+            </button>
+            <button t-if="pos.config.ship_later" class="button btn btn-light py-3 text-start rounded-0 border-bottom" t-att-class="{ 'highlight text-bg-primary': currentOrder.getShippingDate() }" 
+                t-on-click="toggleShippingDatePicker">
+                <i class="fa fa-clock-o me-2" />Ship Later 
+                <span t-if="currentOrder.getShippingDate()">
+                    (<t t-esc="currentOrder.getShippingDate()" />)
+                </span>
+            </button>
+        </div>
+    </t>
+
+
+    <t t-name="point_of_sale.PaymentScreenMethods" owl="1">
+        <div class="paymentmethods-container overflow-y-auto flex-grow-1">
+            <div class="paymentmethods d-flex flex-column">
+                <h4 class="title-category pt-3 pb-2 px-3 m-0 bg-view border-bottom border-2">Payment method</h4>
+                <t t-foreach="payment_methods_from_config" t-as="paymentMethod" t-key="paymentMethod.id">
+                    <div class="button paymentmethod btn btn-light rounded-0 border-bottom" t-on-click="() => this.addNewPaymentLine(paymentMethod)">
+                        <div class="payment-method-display d-flex align-items-center flex-grow-1">
+                            <div>
+                                <img class="payment-method-icon" t-att-src="paymentMethodImage(paymentMethod.id)" />
+                            </div>
+                            <span class="payment-name" t-esc="paymentMethod.name" />
+                        </div>
+                    </div>
+                </t>
+            </div>
+            <PaymentScreenPaymentLines paymentLines="paymentLines" deleteLine.bind="deletePaymentLine" sendForceDone.bind="sendForceDone" sendPaymentReverse.bind="sendPaymentReverse" sendPaymentCancel.bind="sendPaymentCancel" sendPaymentRequest.bind="sendPaymentRequest" selectLine.bind="selectPaymentLine" updateSelectedPaymentline.bind="updateSelectedPaymentline" />
+        </div>
+    </t>
 </templates>
diff --git a/addons/point_of_sale/static/src/app/screens/payment_screen/payment_status/payment_status.xml b/addons/point_of_sale/static/src/app/screens/payment_screen/payment_status/payment_status.xml
index a1b81716ade..ddb55a89c88 100644
--- a/addons/point_of_sale/static/src/app/screens/payment_screen/payment_status/payment_status.xml
+++ b/addons/point_of_sale/static/src/app/screens/payment_screen/payment_status/payment_status.xml
@@ -1,43 +1,43 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
 
-<t t-name="point_of_sale.PaymentScreenStatus" owl="1">
-    <div t-if="props.order.get_paymentlines().length === 0" class="paymentlines-empty">
-        <div class="total text-center py-2 text-success">
-            <t t-esc="totalDueText" />
-        </div>
-        <div class="message text-center">
+    <t t-name="point_of_sale.PaymentScreenStatus" owl="1">
+        <section class="paymentlines-container bg-view p-3 mb-1 border-bottom">
+            <div t-if="props.order.get_paymentlines().length === 0" class="paymentlines-empty">
+                <div class="total text-center py-2 text-success">
+                    <t t-esc="totalDueText" />
+                </div>
+                <div class="message text-center">
             Please select a payment method.
-        </div>
-    </div>
+                </div>
+            </div>
 
-    <div t-else="">
-        <div class="payment-status-container d-flex flex-column-reverse flex-lg-row justify-content-between fs-2">
-            <div>
-                <div class="payment-status-remaining">
-                    <span class="label pe-2">Remaining</span>
-                    <span class="amount"
-                          t-att-class="{ 'highlight text-primary fw-bolder': props.order.get_due() > 0 }">
-                        <t t-esc="remainingText" />
-                    </span>
+            <t t-else="">
+                <div class="payment-status-container d-flex flex-column-reverse flex-lg-row justify-content-between fs-2">
+                    <div>
+                        <div class="payment-status-remaining">
+                            <span class="label pe-2">Remaining</span>
+                            <span class="amount" t-att-class="{ 'highlight text-primary fw-bolder': props.order.get_due() > 0 }">
+                                <t t-esc="remainingText" />
+                            </span>
+                        </div>
+                        <div class="payment-status-total-due py-2 fs-3 text-muted">
+                            <span class="label pe-2">Total Due</span>
+                            <span>
+                                <t t-esc="totalDueText" />
+                            </span>
+                        </div>
+                    </div>
+                    <div>
+                        <div class="payment-status-change">
+                            <span class="label pe-2">Change</span>
+                            <span class="amount" t-att-class="{ 'highlight text-primary fw-bolder': props.order.get_change() > 0 }">
+                                <t t-esc="changeText" />
+                            </span>
+                        </div>
+                    </div>
                 </div>
-                <div class="payment-status-total-due py-2 fs-3 text-muted">
-                    <span class="label pe-2">Total Due</span>
-                    <span>
-                        <t t-esc="totalDueText" />
-                    </span>
-                </div>
-            </div>
-            <div>
-                <div class="payment-status-change">
-                    <span class="label pe-2">Change</span>
-                    <span class="amount"
-                          t-att-class="{ 'highlight text-primary fw-bolder': props.order.get_change() > 0 }">
-                        <t t-esc="changeText" />
-                    </span>
-                </div>
-            </div>
-        </div>
-    </div>
-</t>
+            </t>
+        </section>
+    </t>
 </templates>
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/action_pad/action_pad.xml b/addons/point_of_sale/static/src/app/screens/product_screen/action_pad/action_pad.xml
index 9e247006261..65f15ddc97a 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/action_pad/action_pad.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/action_pad/action_pad.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.ActionpadWidget" owl="1">
-        <div class="actionpad d-flex flex-column flex-grow-1 w-50 p-0 border-end">
+        <div class="actionpad d-flex flex-column flex-grow-1 mw-50 p-0 border-end">
             <button class="button mobile-more-button btn btn-secondary flex-fill border-bottom" t-if="ui.isSmall and props.onClickMore" t-on-click="props.onClickMore">
                 <span>More...</span>
             </button>
@@ -12,7 +12,7 @@
                     <span class="d-flex justify-content-center align-items-center rounded-circle me-2 text-bg-dark" t-if="!ui.isSmall">
                         <i class="fa fa-user" role="img" aria-label="Customer" title="Customer" />
                     </span>
-                    <div t-if="props.partner" class="text-truncate fw-bolder">
+                    <div t-if="props.partner" class="text-truncate fw-bolder text-action">
                         <t t-esc="props.partner.name" />
                     </div>
                     <div t-else="fw-bolder">
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/control_buttons.scss b/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/control_buttons.scss
index d311015a2fc..660d59dca3a 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/control_buttons.scss
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/control_buttons.scss
@@ -5,15 +5,9 @@
 
 .control-button {
     flex: 1 1 29%;
-    padding: $o-horizontal-padding * 0.75;
+    padding: $o-horizontal-padding * 0.5;
 }
 
-/* .control-button.highlight,
-.button.highlight {
-    background: $primary !important;
-    border-color: $primary !important;
-    color: white !important;
-} */
 .control-button.altlight,
 .button.altlight {
     background: #7F82AC !important;
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/customer_button/customer_button.xml b/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/customer_button/customer_button.xml
index e4d72ce4ffb..17a7bf0174a 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/customer_button/customer_button.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/customer_button/customer_button.xml
@@ -1,7 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
     <t t-name="point_of_sale.CustomerButton" owl="1">
-        <div class="control-button customer-button btn btn-light rounded-0 fw-bolder" t-on-click="() => this.pos.selectPartner()">
+        <div class="control-button customer-button btn rounded-0 fw-bolder" t-attf-class="{{this.partner ? 'btn-primary' : 'btn-light'}}"
+         t-on-click="() => this.pos.selectPartner()">
             <i class="fa fa-user me-1" role="img" aria-label="Customer" title="Customer" />
             <t t-esc="this.partner.name" t-if="this.partner" />
             <t t-else="">
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/pricelist_button/pricelist_button.xml b/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/pricelist_button/pricelist_button.xml
index d8cfc57973e..1d67a7c5b1a 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/pricelist_button/pricelist_button.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/pricelist_button/pricelist_button.xml
@@ -2,8 +2,8 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.SetPricelistButton" owl="1">
-        <div class="control-button o_pricelist_button" t-on-click="() => this.click()">
-            <i class="fa fa-th-list" role="img" aria-label="Price list" title="Price list" />
+        <div class="control-button o_pricelist_button btn btn-light rounded-0 fw-bolder" t-on-click="() => this.click()">
+            <i class="fa fa-th-list me-2" role="img" aria-label="Price list" title="Price list" />
             <t t-esc="currentPricelistName" />
         </div>
     </t>
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/numpad/numpad.scss b/addons/point_of_sale/static/src/app/screens/product_screen/numpad/numpad.scss
index 6b2b641d4b4..7ef974eda69 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/numpad/numpad.scss
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/numpad/numpad.scss
@@ -1,43 +1,10 @@
-/*  ********* The Numpad ********* */
-
-.pos .numpad {
+.numpad {
     grid-template-columns: repeat(4, 1fr);
     min-width: 216px;
     gap: 1px;
 }
 
-/* .pos .numpad button {
-    float: left
-    height: 54px;
-    vertical-align: middle;
-    color: $gray-700;
-    border-radius: 0;
-    border: none;
-    border-right: 1px solid;
-    border-bottom: 1px solid;
-    border-color: $gray-300;
-    transition: all 150ms linear;
-    padding: unset;
-    width: 100%;
-    font-weight: bold;
-} */
-
-
-.pos .mode-button {
-    font-size: 14px;
-}
-
-.pos .mode-button.selected-mode {
-    color: white;
-    background: $o-brand-odoo;
-    border-color: transparent;
-}
-.pos .mode-button.selected-mode:hover {
-    background: $primary;
-    color: white;
-    border-color: transparent;
-}
-.pos .numpad .disabled-mode, .pos .numpad .disabled-mode:hover {
+.numpad .disabled-mode, .pos .numpad .disabled-mode:hover {
     background: $gray-200;
     color: $gray-500;
     cursor: not-allowed;
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/numpad/numpad.xml b/addons/point_of_sale/static/src/app/screens/product_screen/numpad/numpad.xml
index e725d802c6b..cb11c443594 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/numpad/numpad.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/numpad/numpad.xml
@@ -3,34 +3,34 @@
 
     <t t-name="point_of_sale.NumpadWidget" owl="1">
         <div class="numpad d-grid text-center flex-grow-1 w-50 bg-300">
-            <button class="input-button number-char btn btn-light w-100 rounded-0 py-3" t-on-click="() => this.sendInput('1')">1</button>
-            <button class="input-button number-char btn btn-light w-100 rounded-0 py-3" t-on-click="() => this.sendInput('2')">2</button>
-            <button class="input-button number-char btn btn-light w-100 rounded-0 py-3" t-on-click="() => this.sendInput('3')">3</button>
-            <button class="mode-button btn btn-light w-100 rounded-0 py-3" t-att-class="{'selected-mode': props.activeMode === 'quantity'}"
+            <button class="input-button number-char btn btn-light w-100 rounded-0 py-3 fw-bolder" t-on-click="() => this.sendInput('1')">1</button>
+            <button class="input-button number-char btn btn-light w-100 rounded-0 py-3 fw-bolder" t-on-click="() => this.sendInput('2')">2</button>
+            <button class="input-button number-char btn btn-light w-100 rounded-0 py-3 fw-bolder" t-on-click="() => this.sendInput('3')">3</button>
+            <button class="mode-button btn btn-light w-100 rounded-0 py-3 fw-bolder" t-att-class="{'selected-mode active': props.activeMode === 'quantity'}"
                     t-on-click="() => this.changeMode('quantity')">Qty</button>
-            <button class="input-button number-char btn btn-light w-100 rounded-0 py-3" t-on-click="() => this.sendInput('4')">4</button>
-            <button class="input-button number-char btn btn-light w-100 rounded-0 py-3" t-on-click="() => this.sendInput('5')">5</button>
-            <button class="input-button number-char btn btn-light w-100 rounded-0 py-3" t-on-click="() => this.sendInput('6')">6</button>
-            <button class="mode-button btn btn-light w-100 rounded-0 py-3 text-nowrap" t-att-class="{
-                        'selected-mode': props.activeMode === 'discount',
+            <button class="input-button number-char btn btn-light w-100 rounded-0 py-3 fw-bolder" t-on-click="() => this.sendInput('4')">4</button>
+            <button class="input-button number-char btn btn-light w-100 rounded-0 py-3 fw-bolder" t-on-click="() => this.sendInput('5')">5</button>
+            <button class="input-button number-char btn btn-light w-100 rounded-0 py-3 fw-bolder" t-on-click="() => this.sendInput('6')">6</button>
+            <button class="mode-button btn btn-light w-100 rounded-0 py-3 fw-bolder text-nowrap" t-att-class="{
+                        'selected-mode active': props.activeMode === 'discount',
                         'disabled-mode': !hasManualDiscount
                     }"
                     t-att-disabled="!hasManualDiscount"
                     t-on-click="() => this.changeMode('discount')">% Disc</button>
-            <button class="input-button number-char btn btn-light w-100 rounded-0 py-3" t-on-click="() => this.sendInput('7')">7</button>
-            <button class="input-button number-char btn btn-light w-100 rounded-0 py-3" t-on-click="() => this.sendInput('8')">8</button>
-            <button class="input-button number-char btn btn-light w-100 rounded-0 py-3" t-on-click="() => this.sendInput('9')">9</button>
-            <button class="mode-button btn btn-light w-100 rounded-0 py-3" t-att-class="{
-                    'selected-mode': props.activeMode === 'price',
+            <button class="input-button number-char btn btn-light w-100 rounded-0 py-3 fw-bolder" t-on-click="() => this.sendInput('7')">7</button>
+            <button class="input-button number-char btn btn-light w-100 rounded-0 py-3 fw-bolder" t-on-click="() => this.sendInput('8')">8</button>
+            <button class="input-button number-char btn btn-light w-100 rounded-0 py-3 fw-bolder" t-on-click="() => this.sendInput('9')">9</button>
+            <button class="mode-button btn btn-light w-100 rounded-0 py-3 fw-bolder" t-att-class="{
+                    'selected-mode active': props.activeMode === 'price',
                     'disabled-mode': !hasPriceControlRights
                 }" t-att-disabled="!hasPriceControlRights"
                     t-on-click="() => this.changeMode('price')">Price</button>
-            <button class="input-button numpad-minus btn btn-light w-100 rounded-0 py-3" t-att-class="{ 'disabled-mode': props.disableSign }" t-on-click="() => this.sendInput('-')">+/-</button>
-            <button class="input-button number-char btn btn-light w-100 rounded-0 py-3" t-on-click="() => this.sendInput('0')">0</button>
-            <button class="input-button number-char btn btn-light w-100 rounded-0 py-3" t-on-click="() => this.sendInput(decimalSeparator)">
+            <button class="input-button numpad-minus btn btn-light w-100 rounded-0 py-3 fw-bolder" t-att-class="{ 'disabled-mode': props.disableSign }" t-on-click="() => this.sendInput('-')">+/-</button>
+            <button class="input-button number-char btn btn-light w-100 rounded-0 py-3 fw-bolder" t-on-click="() => this.sendInput('0')">0</button>
+            <button class="input-button number-char btn btn-light w-100 rounded-0 py-3 fw-bolder" t-on-click="() => this.sendInput(decimalSeparator)">
                 <t t-esc="decimalSeparator" />
             </button>
-            <button class="input-button numpad-backspace btn btn-light w-100 rounded-0 py-3" t-on-click="() => this.sendInput('Backspace')">
+            <button class="input-button numpad-backspace btn btn-light w-100 rounded-0 py-3 fw-bolder" t-on-click="() => this.sendInput('Backspace')">
                 <img style="pointer-events: none;" src="/point_of_sale/static/src/img/backspace.png"
                      width="24" height="21" alt="Backspace" />
             </button>
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/order/order.scss b/addons/point_of_sale/static/src/app/screens/product_screen/order/order.scss
deleted file mode 100644
index 746e5681302..00000000000
--- a/addons/point_of_sale/static/src/app/screens/product_screen/order/order.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-/*  ********* The OrderWidget  ********* */
-
-
-.pos .scrollable-y{
-    overflow: hidden !important;
-    overflow-y: auto !important;
-    -webkit-overflow-scrolling: touch !important;
-}
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/order/order.xml b/addons/point_of_sale/static/src/app/screens/product_screen/order/order.xml
index 6a24f39d90c..f735d2662d1 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/order/order.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/order/order.xml
@@ -5,7 +5,7 @@
         <div class="order-container w-100 h-100 overflow-y-auto bg-view" t-ref="scrollable">
             <div class="order d-flex flex-column h-100 text-start">
                 <t t-if="orderlinesArray.length === 0" >
-                    <div class="order-empty d-flex flex-column align-items-center justify-content-center h-100 text-muted">
+                    <div class="order-empty d-flex flex-column align-items-center justify-content-center h-100 bg-100 text-muted">
                         <i class="fa fa-4x fa-shopping-cart" role="img" aria-label="Shopping cart"
                            title="Shopping cart"/>
                         <h3 class="mt-2">This order is empty</h3>
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/order_summary/order_summary.xml b/addons/point_of_sale/static/src/app/screens/product_screen/order_summary/order_summary.xml
index 4fe39f376a1..0ee3f0e860f 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/order_summary/order_summary.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/order_summary/order_summary.xml
@@ -2,16 +2,16 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.OrderSummary" owl="1">
-        <div class="summary clearfix sticky-top w-100 py-2 px-3 border-top text-end fw-bolder">
+        <div class="summary clearfix sticky-top w-100 py-2 px-3 bg-200 bg-opacity-50 text-end fw-bolder">
             <t t-set="_total" t-value="getTotal()" />
             <t t-set="_tax" t-value="getTax()" />
             <div class="line">
-                <div class="entry total fs-2">
+                <div class="entry total fs-2 lh-sm">
                     Total:
                     <span class="value">
                         <t t-esc="_total" />
                     </span>
-                    <div t-if="_tax.hasTax" class="subentry fs-5 text-muted">
+                    <div t-if="_tax.hasTax" class="subentry fs-6 text-muted">
                         Taxes:
                         <span class="value">
                             <t t-esc="_tax.displayAmount" />
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/orderline/orderline.scss b/addons/point_of_sale/static/src/app/screens/product_screen/orderline/orderline.scss
index 90ce239fb3a..754e2c4cddf 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/orderline/orderline.scss
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/orderline/orderline.scss
@@ -1,17 +1,10 @@
-/*  ********* The OrderLineWidget  ********* */
-
 .orderline {
-    box-sizing: border-box;
-    transition: background 250ms ease-in-out;
-
-    &:active {
-        background: rgba(140,143,183,0.05);
-        transition: background 50ms ease-in-out;
+    
+    &:hover {
+        background-color: $o-gray-200;
     }
 
     &.selected {
-        background: rgba($primary, 0.2);
-        transition: background 250ms ease-in-out;
-        cursor: default;
+        background-color: $o-component-active-bg;
     }
 }
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/orderline/orderline.xml b/addons/point_of_sale/static/src/app/screens/product_screen/orderline/orderline.xml
index 2a576bb721d..f5f498dc519 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/orderline/orderline.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/orderline/orderline.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.Orderline" owl="1">
-        <li t-on-click="selectLine" class="orderline w-100 m-0 py-2 px-3 cursor-pointer" t-att-class="addedClasses">
+        <li t-on-click="selectLine" class="orderline w-100 m-0 py-2 px-3 lh-sm cursor-pointer transition-base" t-att-class="addedClasses">
             <span class="product-name d-inline-block flex-grow-1 fw-bolder text-truncate">
                 <t t-esc="props.line.get_full_product_name()"/>
                 <t t-if="props.line.get_product().tracking!=='none' &amp;&amp; (pos.picking_type.use_create_lots || pos.picking_type.use_existing_lots)">
@@ -24,12 +24,12 @@
                     </t>
                 </t>
             </span>
-            <span class="price fw-bold float-end">
+            <span class="price fw-bolder float-end">
                 <t t-esc="env.utils.formatCurrency(props.line.get_display_price())"/>
             </span>
-            <ul class="info-list ms-2">
+            <ul class="info-list text-dark">
                 <t t-if="props.line.get_quantity_str() !== '1' || props.line.selected ">
-                    <li class="info">
+                    <li class="info ms-2">
                         <em class="fst-normal fw-bolder">
                             <t t-esc="props.line.get_quantity_str()" />
                         </em>
@@ -50,7 +50,7 @@
                     </li>
                 </t>
                 <t t-if="props.line.get_discount_str() !== '0'">
-                    <li class="info">
+                    <li class="info ms-2">
                         With a
                         <em>
                             <t t-esc="props.line.get_discount_str()" />%
@@ -59,8 +59,8 @@
                     </li>
                 </t>
                 <t t-if="customerNote">
-                    <li class="info orderline-note m-2 text-break">
-                        <i class="fa fa-sticky-note me-1 text-muted" role="img" aria-label="Customer Note" title="Customer Note"/>
+                    <li class="info orderline-note p-2 my-1 rounded text-bg-warning text-warning bg-opacity-25 text-break">
+                        <i class="fa fa-sticky-note me-1" role="img" aria-label="Customer Note" title="Customer Note"/>
                         <t t-esc="customerNote" />
                     </li>
                 </t>
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/product/product.scss b/addons/point_of_sale/static/src/app/screens/product_screen/product/product.scss
index 86d867d75a9..19c5280dbb5 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/product/product.scss
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/product/product.scss
@@ -1,12 +1,10 @@
-.product-img img {
-    height: 100px;
-    object-fit: contain;
+.product:hover {
+    border: 1px solid $o-gray-100;
 }
 
-@media screen and (max-width: 768px) {
-    .product:active {
-        box-shadow: 0 0 0 3px $primary;
-    }
+.product-img img {
+    height: 100px;
+    object-fit: cover;
 }
 
 .product-name {
@@ -17,6 +15,12 @@
     -webkit-line-clamp: 2;
 
     &.no-image {
-        -webkit-line-clamp: 9;
+        -webkit-line-clamp: 7;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .product:active {
+        box-shadow: 0 0 0 2px $primary;
     }
 }
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/product/product.xml b/addons/point_of_sale/static/src/app/screens/product_screen/product/product.xml
index 195d1351319..8949b5b6acd 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/product/product.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/product/product.xml
@@ -2,18 +2,18 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.ProductItem" owl="1">
-        <article t-attf-class="product {{this.pos.productListViewMode}} position-relative btn btn-light d-flex flex-column align-items-stretch p-0 m-0 text-start cursor-pointer overflow-hidden" tabindex="0" t-on-keypress="spaceClickProduct"
+        <article t-attf-class="product position-relative btn btn-light d-flex flex-column align-items-stretch p-0 m-0 text-start cursor-pointer overflow-hidden transition-base" tabindex="0" t-on-keypress="spaceClickProduct"
                  t-on-click="() => this.pos.addProductToCurrentOrder(props.product)"
                  t-att-data-product-id="props.product.id"
                  t-attf-aria-labelledby="article_product_{{props.product.id}}">
                 <div class="product-img">
                     <img t-if="props.product.image_128" class="w-100" t-att-src="imageUrl" t-att-alt="props.product.display_name" />
                 </div>
-                <div class="product-content d-flex flex-column justify-content-between h-100 py-1">
-                    <div t-attf-class="mx-2 overflow-hidden lh-sm #{props.product.image_128 ? 'product-name' : 'product-name no-image' }" t-attf-id="article_product_{{props.product.id}}">
+                <div class="product-content d-flex flex-column justify-content-between h-100 mx-2 py-1">
+                    <div t-attf-class="overflow-hidden lh-sm fw-bolder #{props.product.image_128 ? 'product-name' : 'product-name no-image' }" t-attf-id="article_product_{{props.product.id}}">
                         <t t-esc="props.product.display_name" />
                     </div>
-                    <span class="price-tag text-primary py-1 px-2 fw-bolder">
+                    <span class="price-tag text-primary py-1 fw-bolder">
                         <t t-esc="price" />
                     </span>
                 </div>
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.scss b/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.scss
index 1fb90d97f24..567691f4f6b 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.scss
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.scss
@@ -1,6 +1,3 @@
-
-/*  ********* The product list  ********* */
-
 .product-list {
     grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
 }
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/product_screen.xml b/addons/point_of_sale/static/src/app/screens/product_screen/product_screen.xml
index 3ade9e5a327..bd332a1d25b 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/product_screen.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/product_screen.xml
@@ -2,12 +2,12 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.ProductScreen" owl="1">
-        <div class="product-screen screen" t-att-class="{ oe_hidden: !props.isShown }">
+        <div class="product-screen screen h-100 bg-100" t-att-class="{ oe_hidden: !props.isShown }">
             <div class="screen-full-width d-flex w-100 h-100">
-                <div class="leftpane pane-border d-flex flex-column flex-grow-1 w-100 h-100 border-end border-3 bg-200" t-if="!ui.isSmall || pos.mobile_pane === 'left'">
+                <div class="leftpane pane-border d-flex flex-column flex-grow-1 w-100 h-100 border-end bg-200" t-if="!ui.isSmall || pos.mobile_pane === 'left'">
                     <OrderWidget/>
                     <div class="pads border-top">
-                        <div class="control-buttons d-flex flex-wrap border-bottom overflow-hidden">
+                        <div class="control-buttons d-flex flex-wrap border-bottom overflow-hidden bg-300">
                             <t t-if="!ui.isSmall">
                                 <t t-foreach="controlButtons" t-as="cb" t-key="cb.name">
                                     <t t-component="cb.component" t-key="cb.name"/>
@@ -33,13 +33,13 @@
                             <span><t t-esc="selectedOrderlineQuantity"/> <t t-esc="selectedOrderlineDisplayName"/> <t t-esc="selectedOrderlineTotal"/></span>
                         </div>
                         <div class="switchpane d-flex">
-                            <button class="btn-switchpane pay-button btn btn-primary flex-fill rounded-0 fw-bolder" t-att-class="{'primary': primaryPayButton(), 'secondary': !primaryPayButton()}" t-on-click="() => currentOrder.pay()">
+                            <button class="btn-switchpane pay-button btn btn-primary w-50 rounded-0 fw-bolder" t-att-class="{'primary': primaryPayButton(), 'secondary': !primaryPayButton()}" t-on-click="() => currentOrder.pay()">
                                 <span class="fs-1 d-block">Pay</span>
                                 <span><t t-esc="total" /></span>
                             </button>
-                            <button class="btn-switchpane btn btn-secondary flex-fill rounded-0 fw-bolder" t-att-class="{'primary': primaryReviewButton(), 'secondary': !primaryReviewButton()}" t-on-click="switchPane">
+                            <button class="btn-switchpane btn btn-secondary w-50 rounded-0 fw-bolder" t-att-class="{'primary': primaryReviewButton(), 'secondary': !primaryReviewButton()}" t-on-click="switchPane">
                                 <span class="fs-1 d-block">Review</span>
-                                <span><t t-esc="items_number"/> items</span>
+                                <span><t t-esc="items"/> items</span>
                             </button>
                         </div>
                     </t>
diff --git a/addons/point_of_sale/static/src/app/screens/receipt_screen/receipt_screen.xml b/addons/point_of_sale/static/src/app/screens/receipt_screen/receipt_screen.xml
index f1093a7256b..097768de9ec 100644
--- a/addons/point_of_sale/static/src/app/screens/receipt_screen/receipt_screen.xml
+++ b/addons/point_of_sale/static/src/app/screens/receipt_screen/receipt_screen.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.ReceiptScreen" owl="1">
-        <div class="receipt-screen screen">
+        <div class="receipt-screen screen h-100 bg-100">
             <div class="screen-content d-flex flex-column justify-content-between h-100">
                 <div class="top-content d-flex align-items-center py-3 border-bottom text-center" t-if="!ui.isSmall">
                     <div class="top-content-center flex-grow-1">
diff --git a/addons/point_of_sale/static/src/app/screens/receipt_screen/reprint_receipt_screen.xml b/addons/point_of_sale/static/src/app/screens/receipt_screen/reprint_receipt_screen.xml
index c5d4d7844eb..39400e27e55 100644
--- a/addons/point_of_sale/static/src/app/screens/receipt_screen/reprint_receipt_screen.xml
+++ b/addons/point_of_sale/static/src/app/screens/receipt_screen/reprint_receipt_screen.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.ReprintReceiptScreen" owl="1">
-        <div class="receipt-screen screen">
+        <div class="receipt-screen screen h-100 bg-100">
             <div class="screen-content d-flex flex-column h-100">
                 <div class="top-content d-flex align-items-center p-2 border-bottom text-center">
                     <button class="button back btn btn-lg btn-secondary" t-on-click="confirm">
@@ -11,7 +11,7 @@
                         <span>Back</span>
                     </button>
                 </div>
-                <div class="centered-content d-grid mx-autp mt-3 border-0 overflow-hidden">
+                <div class="centered-content d-grid mx-auto mt-3 border-0 overflow-hidden">
                     <button class="button print btn btn-lg btn-primary" t-on-click="tryReprint">
                         <i class="fa fa-print ms-2"></i> Print Receipt
                     </button>
diff --git a/addons/point_of_sale/static/src/app/screens/scale_screen/scale_screen.xml b/addons/point_of_sale/static/src/app/screens/scale_screen/scale_screen.xml
index 2550259cb05..56858f5437b 100644
--- a/addons/point_of_sale/static/src/app/screens/scale_screen/scale_screen.xml
+++ b/addons/point_of_sale/static/src/app/screens/scale_screen/scale_screen.xml
@@ -13,7 +13,7 @@
                         <t t-esc="productName" />
                     </h1>
                 </div>
-                <div class="centered-content w-100 mx-auto mt-3 border-left border-right text-center overflow-x-hidden overflow-y-auto">
+                <div class="centered-content w-100 mx-auto mt-3 border-start border-end text-center overflow-x-hidden overflow-y-auto">
                     <div class="weight js-weight m-2 p-4 rounded bg-view text-center fs-1">
                         <t t-esc="productWeightString" />
                     </div>
diff --git a/addons/point_of_sale/static/src/app/screens/screens.scss b/addons/point_of_sale/static/src/app/screens/screens.scss
deleted file mode 100644
index 7199f1db976..00000000000
--- a/addons/point_of_sale/static/src/app/screens/screens.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-/*  ********* The Screens  ********* */
-
-.pos .screen {
-    height: calc(100vh - #{$navbar-height});
-    background: $gray-100;
-}
-
-/* a) Generic Screen Layout Constructs */
-
-.full-content{
-    top: 65px;
-}
-
-.left-content{
-    overflow-x: hidden;
-    overflow-y: auto;
-    border-right: solid 1px $gray-300;
-    flex-grow: 1;
-    min-width: 200px;
-}
-
-.center-content{
-    flex-grow: 2;
-    display: flex;
-    flex-direction: column;
-}
-.right-content {
-    flex-grow: 1;
-    min-width: 200px;
-    overflow-x: hidden;
-    overflow-y: auto;
-    border-left: solid 1px $gray-300;
-}
-
-@media screen and (min-width: 768px) {
-    .left-content {
-        max-width: 34%
-    }
-}
diff --git a/addons/point_of_sale/static/src/app/screens/ticket_screen/order_details/order_details.xml b/addons/point_of_sale/static/src/app/screens/ticket_screen/order_details/order_details.xml
index b8797389324..70fd2abf62a 100644
--- a/addons/point_of_sale/static/src/app/screens/ticket_screen/order_details/order_details.xml
+++ b/addons/point_of_sale/static/src/app/screens/ticket_screen/order_details/order_details.xml
@@ -23,7 +23,7 @@
                         <div class="header-note text-bg-view py-2 px-3 border-bottom" t-att-class="{ 'highlight text-danger': props.highlightHeaderNote }">
                             Select the product(s) to refund and set the quantity
                         </div>
-                        <ul class="orderlines">
+                        <ul class="orderlines flex-grow-1 overflow-auto">
                             <t t-foreach="orderlines" t-as="orderline" t-key="orderline.id">
                                 <OrderlineDetails
                                     onClickOrderline.bind="this.props.onClickOrderline"
@@ -33,14 +33,14 @@
                             </t>
                         </ul>
                         <!-- Not using OrderSummary because we don't need it's overrides in this view. -->
-                        <div class="summary clearfix sticky-top w-100 py-2 px-3 border-top text-end fw-bolder">
+                        <div class="summary clearfix sticky-top w-100 py-2 px-3 bg-200 bg-opacity-50 text-end fw-bolder">
                             <div class="line">
-                                <div class="entry total fs-2">
+                                <div class="entry total fs-2 lh-sm">
                                     Total:
                                     <span class="value">
                                         <t t-esc="total" />
                                     </span>
-                                    <div t-if="tax" class="subentry fs-5 text-muted">
+                                    <div t-if="tax" class="subentry fs-6 text-muted">
                                         Taxes:
                                         <span class="value">
                                             <t t-esc="tax" />
diff --git a/addons/point_of_sale/static/src/app/screens/ticket_screen/order_details/orderline_details.xml b/addons/point_of_sale/static/src/app/screens/ticket_screen/order_details/orderline_details.xml
index 4225d26db5c..d794b73b56b 100644
--- a/addons/point_of_sale/static/src/app/screens/ticket_screen/order_details/orderline_details.xml
+++ b/addons/point_of_sale/static/src/app/screens/ticket_screen/order_details/orderline_details.xml
@@ -2,23 +2,23 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.OrderlineDetails" owl="1">
-        <li class="orderline w-100 m-0 py-2 px-3 cursor-pointer" t-on-click="() => this.props.onClickOrderline(props.line)" t-att-class="{ selected: props.isSelected }">
+        <li class="orderline w-100 m-0 py-2 px-3 lh-sm cursor-pointer" t-on-click="() => this.props.onClickOrderline(props.line)" t-att-class="{ selected: props.isSelected }">
             <span class="product-name d-inline-block flex-grow-1 fw-bolder text-truncate">
                 <t t-esc="productName" />
             </span>
-            <span class="price fw-bold float-end">
+            <span class="price fw-bolder float-end">
                 <t t-esc="totalPrice" />
             </span>
-            <ul class="info-list ms-2">
-                <li class="info">
+            <ul class="info-list">
+                <li class="info ms-2">
                     <strong>
                         <t t-esc="quantity" />
                     </strong>
                     <span><t t-esc="pricePerUnit" /></span>
                 </li>
                 <t t-if="customerNote">
-                    <li class="info orderline-note me-2 text-break">
-                        <i class="fa fa-sticky-note me-1 text-muted" role="img" aria-label="Customer Note" title="Customer Note"/>
+                    <li class="info orderline-note p-2 my-1 rounded text-bg-warning text-warning bg-opacity-25 text-break">
+                        <i class="fa fa-sticky-note me-1" role="img" aria-label="Customer Note" title="Customer Note"/>
                         <t t-esc="customerNote" />
                     </li>
                 </t>
diff --git a/addons/point_of_sale/static/src/app/screens/ticket_screen/search_bar/search_bar.scss b/addons/point_of_sale/static/src/app/screens/ticket_screen/search_bar/search_bar.scss
index e69de29bb2d..79ae001e2f1 100644
--- a/addons/point_of_sale/static/src/app/screens/ticket_screen/search_bar/search_bar.scss
+++ b/addons/point_of_sale/static/src/app/screens/ticket_screen/search_bar/search_bar.scss
@@ -0,0 +1,34 @@
+.search-icon {
+    z-index: 4;
+}
+
+.fields {
+    position: absolute;
+    top: calc(100% + 5px);
+    right: 2px;
+    left: 2px;
+    box-shadow: 1px 1px 3px grey;
+    overflow: auto;
+    
+    li:hover, .highlight {    
+        background: #DDD;
+    }
+}
+
+.options {
+    display: block;
+    position: absolute;
+    top: calc(100% + 5px);
+    right: 0;
+    z-index: 1;
+
+    .indented {
+        text-indent: 1em;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .search input {
+        padding-left: 10px;
+    }
+}
diff --git a/addons/point_of_sale/static/src/app/screens/ticket_screen/search_bar/search_bar.xml b/addons/point_of_sale/static/src/app/screens/ticket_screen/search_bar/search_bar.xml
index dcc6d5a12c7..1f53d74daa5 100644
--- a/addons/point_of_sale/static/src/app/screens/ticket_screen/search_bar/search_bar.xml
+++ b/addons/point_of_sale/static/src/app/screens/ticket_screen/search_bar/search_bar.xml
@@ -4,42 +4,42 @@
     <t t-name="point_of_sale.SearchBar" owl="1">
         <div class="pos-search-bar d-flex align-items-center flex-grow-1 h-100 ms-3 rounded">
             <div class="search position-relative h-100 d-flex flex-grow-1">
-                <span class="search-icon" t-if="!ui.isSmall"><i class="oi oi-search"></i></span>
-                <input class="radius-left" t-ref="autofocus" t-att-class="{ 'radius-right': !props.config.filter.show }"
+                <div class="input-group">
+                    <input class="form-control bg-view border-light ps-5" t-ref="autofocus"
                     t-model="state.searchInput" t-on-keydown="onSearchInputKeydown" t-on-keyup="onSearchInputKeyup" type="text" t-att-placeholder="props.placeholder" />
-                <div t-if="state.showSearchFields and state.searchInput" class="fields">
-                    <ul>
-                        <t t-foreach="searchFieldsList" t-as="fieldName" t-key="fieldName">
-                            <li t-att-class="{ highlight: fieldName == searchFieldsList[state.selectedSearchFieldId] }"
-                                t-on-click="() => this._onClickSearchField(fieldName)">
-                                <span class="field">
-                                    <t t-esc="props.config.searchFields.get(fieldName)"></t>
-                                </span>
-                                <span>: </span>
-                                <span class="term">
-                                    <t t-esc="state.searchInput"></t>
-                                </span>
-                            </li>
-                        </t>
-                    </ul>
+                    <div t-if="state.showSearchFields and state.searchInput" class="fields">
+                        <ul class="py-1 bg-view small">
+                            <t t-foreach="searchFieldsList" t-as="fieldName" t-key="fieldName">
+                                <li class="ps-5 py-1 text-start"
+                                    t-att-class="{ highlight: fieldName == searchFieldsList[state.selectedSearchFieldId] }"
+                                    t-on-click="() => this._onClickSearchField(fieldName)">
+                                    <span class="field">
+                                        <t t-esc="props.config.searchFields.get(fieldName)"></t>
+                                    </span>
+                                    <span>: </span>
+                                    <span class="term text-primary fw-bolder">
+                                        <t t-esc="state.searchInput"></t>
+                                    </span>
+                                </li>
+                            </t>
+                        </ul>
+                    </div>
+                    <div t-if="props.config.filter.show" class="filter radius-right btn btn-secondary py-2 dropdown-toggle h-100"
+                    t-on-click.stop="() => { state.showFilterOptions = !state.showFilterOptions }">
+                        <span>
+                            <t t-esc="props.config.filter.options.get(state.selectedFilter).text" />
+                        </span>
+                        <ul t-if="state.showFilterOptions" class="options dropdown-menu dropdown-menu-end py-1">
+                            <t t-foreach="filterOptionsList" t-as="key" t-key="key">
+                                <t t-set="_option" t-value="props.config.filter.options.get(key)" />
+                                <li class="dropdown-item" t-on-click="() => this._onSelectFilter(key)" t-att-class="{ 'indented': _option.indented }">
+                                    <t t-esc="_option.text"></t>
+                                </li>
+                            </t>
+                        </ul>
+                    </div>
                 </div>
-            </div>
-            <div t-if="props.config.filter.show" class="filter radius-right h-100"
-                t-on-click.stop="() => { state.showFilterOptions = !state.showFilterOptions }">
-                <span class="down-icon">
-                    <i class="oi oi-chevron-down" aria-hidden="true"></i>
-                </span>
-                <span>
-                    <t t-esc="props.config.filter.options.get(state.selectedFilter).text" />
-                </span>
-                <ul t-if="state.showFilterOptions" class="options">
-                    <t t-foreach="filterOptionsList" t-as="key" t-key="key">
-                        <t t-set="_option" t-value="props.config.filter.options.get(key)" />
-                        <li t-on-click="() => this._onSelectFilter(key)" t-att-class="{ indented: _option.indented }">
-                            <t t-esc="_option.text"></t>
-                        </li>
-                    </t>
-                </ul>
+                <span class="search-icon position-absolute start-0 top-50 translate-middle ms-4 z-3" t-if="!ui.isSmall"><i class="oi oi-search"></i></span>
             </div>
         </div>
     </t>
diff --git a/addons/point_of_sale/static/src/app/screens/ticket_screen/ticket_screen.scss b/addons/point_of_sale/static/src/app/screens/ticket_screen/ticket_screen.scss
index bcfa34de942..9d4345b8bc1 100644
--- a/addons/point_of_sale/static/src/app/screens/ticket_screen/ticket_screen.scss
+++ b/addons/point_of_sale/static/src/app/screens/ticket_screen/ticket_screen.scss
@@ -2,6 +2,27 @@
     max-width: 500px;
 }
 
+.orders .col {
+    flex: 1;
+
+    &.very-narrow {
+        flex: 0.2;
+    }
+
+    &.narrow {
+        flex: 0.5;
+    }
+
+    &.wide {
+        flex: 1.5;
+    }
+}
+
+.order-row:hover {
+    color: white;
+    background-color:  $primary !important;
+}
+
 @media screen and (max-width: 640px) {
     .screen-full-width {
         flex-direction: column;
@@ -28,27 +49,6 @@
     }
 }
 
-.orders .col {
-    flex: 1;
-
-    &.very-narrow {
-        flex: 0.2;
-    }
-
-    &.narrow {
-        flex: 0.5;
-    }
-
-    &.wide {
-        flex: 1.5;
-    }
-}
-
-.order-row:hover {
-    color: white;
-    background-color:  $primary !important;
-}
-
 @media screen and (min-width: 768px) {
     .order-row {
         display: flex;
@@ -93,139 +93,3 @@
         margin-right: 5px;
     }
 }
-
-/* Search bar ticket screen */
-
-
-.ticket-screen .pos-search-bar .search input {
-    width: 0;
-    color: #63717f;
-    padding-left: 40px;
-    border: solid 1px rgb(209, 209, 209);
-    flex: 1;
-}
-
-.ticket-screen .pos-search-bar .radius-right {
-    border-top-right-radius: 5px;
-    border-bottom-right-radius: 5px;
-}
-
-.ticket-screen .pos-search-bar .radius-left {
-    border-top-left-radius: 5px;
-    border-bottom-left-radius: 5px;
-}
-
-.ticket-screen .pos-search-bar .fa {
-    font-size: medium;
-}
-
-.ticket-screen .pos-search-bar .search input:focus {
-    outline: none;
-}
-
-.ticket-screen .pos-search-bar .search .search-icon {
-    position: absolute;
-    left: 15px;
-    top: 10px;
-    z-index: 1;
-    color: #4f5b66;
-}
-
-.ticket-screen .pos-search-bar .search .fields {
-    position: absolute;
-    top: calc(100% + 5px);
-    right: 2px;
-    left: 2px;
-    box-shadow: 1px 1px 3px grey;
-    overflow: auto;
-}
-.ticket-screen .pos-search-bar .search ul {
-    background: white;
-    font-size: small;
-    display: inline-block;
-    min-width: 100%;
-}
-
-.ticket-screen .pos-search-bar .search li {
-    margin: 0.2em 0;
-    padding-top: 0.2em;
-    padding-bottom: 0.2em;
-    padding-left: 35px;
-    text-align: left;
-}
-
-.ticket-screen .pos-search-bar .search li .term {
-    color: $primary;
-}
-
-.ticket-screen .pos-search-bar .search li:hover {
-    background: #DDD;
-}
-
-.ticket-screen .pos-search-bar .search li .field {
-    font-style: italic;
-}
-
-.ticket-screen .pos-search-bar .search li .term {
-    font-weight: bold;
-}
-
-.ticket-screen .pos-search-bar .search li.highlight {
-    background: #DDD;
-}
-
-.ticket-screen .pos-search-bar .filter .down-icon {
-    position: absolute;
-    right: 13px;
-}
-
-.ticket-screen .pos-search-bar .filter {
-    background: white;
-    padding-top: 1px;
-    padding-bottom: 1px;
-    padding-left: 15px;
-    padding-right: 40px;
-    border: solid 1px rgb(209, 209, 209);
-    border-left: none;
-    position: relative;
-    display: flex;
-    align-items: center;
-}
-
-.ticket-screen .pos-search-bar .filter:hover {
-    color: #868686;
-}
-
-.ticket-screen .pos-search-bar .filter .options {
-    display: block;
-    position: absolute;
-    top: calc(100% + 5px);
-    right: 0;
-    z-index: 1;
-    box-shadow: 1px 1px 5px grey;
-    padding: 0.5em 0;
-    background: white;
-    color: $gray-700;
-}
-
-.ticket-screen .pos-search-bar .filter ul.options li {
-    padding: 0.2em 1.2em;
-    border-top: none;
-    display: flex;
-    justify-content: start;
-    align-items: center;
-}
-
-.ticket-screen .filter ul.options li.indented {
-    text-indent: 1em;
-}
-
-.ticket-screen .pos-search-bar .filter ul.options li:hover {
-    background-color: #DDD;
-}
-
-@media screen and (max-width: 768px) {
-    .ticket-screen .pos-search-bar .search input {
-        padding-left: 10px;
-    }
-}
diff --git a/addons/point_of_sale/static/src/app/screens/ticket_screen/ticket_screen.xml b/addons/point_of_sale/static/src/app/screens/ticket_screen/ticket_screen.xml
index a098be12ed4..e5e9786cb2c 100644
--- a/addons/point_of_sale/static/src/app/screens/ticket_screen/ticket_screen.xml
+++ b/addons/point_of_sale/static/src/app/screens/ticket_screen/ticket_screen.xml
@@ -2,10 +2,10 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.TicketScreen" owl="1">
-        <div class="ticket-screen screen" t-att-class="{ oe_hidden: !props.isShown }">
+        <div class="ticket-screen screen h-100 bg-100" t-att-class="{ oe_hidden: !props.isShown }">
             <div class="screen-full-width d-flex w-100 h-100">
                 <div class="rightpane pane-border d-flex flex-column flex-grow-1 w-100 h-50 h-md-100 bg-300 overflow-y-auto">
-                    <div class="controls d-flex align-items-center justify-content-between p-3">
+                    <div class="controls d-flex align-items-center justify-content-between mt-1 mt-md-0 p-2 bg-400">
                         <t t-if="!ui.isSmall || !state.showSearchBar">
                             <div class="buttons d-flex gap-2">
                                 <button class="discard btn btn-lg btn-light" t-on-click="() => this.pos.closeScreen()">
@@ -69,7 +69,7 @@
                                 <div class="col very-narrow p-2" name="delete"></div>
                             </div>
                             <t t-foreach="_filteredOrderList" t-as="order" t-key="order.cid">
-                                <div class="order-row" t-att-class="{ 'highlight text-bg-primary': isHighlighted(order) }" t-on-click="() => this.onClickOrder(order)">
+                                <div class="order-row" t-att-class="{ 'highlight': isHighlighted(order) }" t-on-click="() => this.onClickOrder(order)">
                                     <div class="col wide p-2 ">
                                         <div><t t-esc="getDate(order)"></t></div>
                                         <div t-if="ui.isSmall"><t t-esc="getTotal(order)"></t></div>
@@ -104,7 +104,7 @@
                         <t t-else="">
                             <div class="empty-order-list m-5 text-center text-muted">
                                 <i role="img" aria-label="Shopping cart" title="Shopping cart" class="fa fa-4x fa-shopping-cart"></i>
-                                <h3 class="mt-2">No orders found</h1>
+                                <h3 class="mt-2">No orders found</h3>
                             </div>
                         </t>
                     </div>
@@ -119,7 +119,7 @@
                         selectedOrderlineId="_selectedOrderlineId"
                         highlightHeaderNote="_state.ui.highlightHeaderNote" />
                     <div class="pads border-top">
-                        <div class="control-buttons d-flex flex-wrap border-bottom overflow-hidden">
+                        <div class="control-buttons d-flex flex-wrap border-bottom overflow-hidden bg-300">
                             <InvoiceButton
                                 onInvoiceOrder.bind="onInvoiceOrder"
                                 order="_selectedSyncedOrder" />
diff --git a/addons/point_of_sale/static/src/app/store/product_configurator_popup/product_configurator_popup.xml b/addons/point_of_sale/static/src/app/store/product_configurator_popup/product_configurator_popup.xml
index 6fd9d4fea93..571d48daac5 100644
--- a/addons/point_of_sale/static/src/app/store/product_configurator_popup/product_configurator_popup.xml
+++ b/addons/point_of_sale/static/src/app/store/product_configurator_popup/product_configurator_popup.xml
@@ -78,12 +78,12 @@
                 </main>
     
                 <footer class="footer footer-flex modal-footer">
-                    <div class="button cancel btn btn-lg btn-secondary" t-on-click="cancel">
-                        Cancel
-                    </div>
                     <div class="button highlight confirm btn btn-lg btn-primary" t-on-click="confirm">
                         Add
                     </div>
+                    <div class="button cancel btn btn-lg btn-secondary" t-on-click="cancel">
+                        Cancel
+                    </div>
                 </footer>
             </div>
         </t>
@@ -106,6 +106,12 @@
                 </main>
     
                 <footer class="footer footer-flex mobile modal-footer">
+                    <div class="button highlight confirm btn btn-lg btn-primary" t-on-click="confirm">
+                        Add
+                    </div>
+                    <div class="button cancel btn btn-lg btn-secondary" t-on-click="cancel">
+                        Cancel
+                    </div>
                     <div class="quantity-selector d-flex align-items-center justify-content-center w-100 py-2 fw-bolder">
                         <button class="btn btn-lg btn-secondary" t-on-click="removeOneQuantity">
                             <i class="fa fa-minus" aria-hidden="true"></i>
@@ -115,12 +121,6 @@
                             <i class="fa fa-plus" aria-hidden="true"></i>
                         </button>
                     </div>
-                    <div class="button highlight confirm btn btn-lg btn-primary" t-on-click="confirm">
-                        Add
-                    </div>
-                    <div class="button cancel btn btn-lg btn-secondary" t-on-click="cancel">
-                        Cancel
-                    </div>
                 </footer>
             </div>
         </t>
diff --git a/addons/point_of_sale/static/src/app/store/select_lot_popup/edit_list_input/edit_list_input.xml b/addons/point_of_sale/static/src/app/store/select_lot_popup/edit_list_input/edit_list_input.xml
index 56e3ff93a49..77ae67b7de2 100644
--- a/addons/point_of_sale/static/src/app/store/select_lot_popup/edit_list_input/edit_list_input.xml
+++ b/addons/point_of_sale/static/src/app/store/select_lot_popup/edit_list_input/edit_list_input.xml
@@ -2,10 +2,13 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.EditListInput" owl="1">
-        <input type="text" t-att-value="props.item.text" t-on-input="onInput" class="popup-input list-line-input form-control form-control-lg w-75 mx-auto"
-                placeholder="Serial/Lot Number" t-on-keyup="onKeyup" />
-        <i t-if="props.deletable" class="oe_link_icon fa fa-trash-o" role="img" aria-label="Remove" title="Remove"
-            t-on-click="props.removeItem"></i>
+        <div class="input-group mb-3">
+            <input type="text" t-att-value="props.item.text" t-on-input="onInput" class="popup-input list-line-input form-control form-control-lg w-75 mx-auto"
+                    placeholder="Serial/Lot Number" t-on-keyup="onKeyup" />
+            <button t-if="props.deletable" class="btn btn-danger btn-lg" t-on-click="props.removeItem">
+                <i class="oe_link_icon fa fa-trash-o" role="img" aria-label="Remove" title="Remove" />
+            </button>
+        </div>
     </t>
 
 </templates>
diff --git a/addons/point_of_sale/static/src/app/store/select_lot_popup/select_lot_popup.xml b/addons/point_of_sale/static/src/app/store/select_lot_popup/select_lot_popup.xml
index 77ffeafb776..760d2805c25 100644
--- a/addons/point_of_sale/static/src/app/store/select_lot_popup/select_lot_popup.xml
+++ b/addons/point_of_sale/static/src/app/store/select_lot_popup/select_lot_popup.xml
@@ -16,12 +16,12 @@
                 </t>
             </main>
             <footer class="footer footer-flex modal-footer">
-                <div class="button cancel btn btn-lg btn-secondary" t-on-click="cancel">
-                    Cancel
-                </div>
                 <div class="button confirm highlight btn btn-lg btn-primary" t-on-click="confirm">
                     Ok
                 </div>
+                <div class="button cancel btn btn-lg btn-secondary" t-on-click="cancel">
+                    Cancel
+                </div>
             </footer>
         </div>
     </t>
diff --git a/addons/point_of_sale/static/src/app/utils/alert_popup/alert_popup.xml b/addons/point_of_sale/static/src/app/utils/alert_popup/alert_popup.xml
index aa5bb2ec2b4..1e508623586 100644
--- a/addons/point_of_sale/static/src/app/utils/alert_popup/alert_popup.xml
+++ b/addons/point_of_sale/static/src/app/utils/alert_popup/alert_popup.xml
@@ -2,14 +2,16 @@
 <templates id="template" xml:space="preserve">
     <t t-name="point_of_sale.AlertPopup" owl="1">
         <div class="popup">
-            <p class="title">
-                <t t-esc="props.title" />
-            </p>
-            <p class="body">
+            <div class="modal-header">
+                <h4 class="title modal-title">
+                    <t t-esc="props.title" />
+                </h4>
+            </div>
+            <p class="modal-body">
                 <t t-esc="props.body" />
             </p>
-            <div class="footer">
-                <div class="button cancel" t-on-click="confirm">
+            <div class="footer modal-footer">
+                <div class="button cancel btn btn-lg btn-primary" t-on-click="confirm">
                     <t t-esc="props.confirmText" />
                 </div>
             </div>
diff --git a/addons/point_of_sale/static/src/app/utils/contextual_utils_service.js b/addons/point_of_sale/static/src/app/utils/contextual_utils_service.js
index 118f5c1ba04..768ec511066 100644
--- a/addons/point_of_sale/static/src/app/utils/contextual_utils_service.js
+++ b/addons/point_of_sale/static/src/app/utils/contextual_utils_service.js
@@ -2,6 +2,7 @@
 
 import { formatMonetary, formatFloat } from "@web/views/fields/formatters";
 import { roundDecimals } from "@web/core/utils/numbers";
+import { escapeRegExp } from '@web/core/utils/strings';
 import { registry } from "@web/core/registry";
 
 /**
@@ -9,10 +10,21 @@ import { registry } from "@web/core/registry";
  * functions that are parameterized by the data in `pos` service.
  */
 export const contextualUtilsService = {
-    dependencies: ["pos"],
-    start(env, { pos }) {
+    dependencies: ["pos", "localization"],
+    start(env, { pos, localization }) {
         const currency = pos.currency;
         const productUoMDecimals = pos.dp["Product Unit of Measure"];
+        const decimalPoint = localization.decimalPoint;
+        const thousandsSep = localization.thousandsSep;
+        // Replace the thousands separator and decimal point with regex-escaped versions
+        const escapedDecimalPoint = escapeRegExp(decimalPoint);
+        let floatRegex;
+        if (thousandsSep) {
+            const escapedThousandsSep = escapeRegExp(thousandsSep);
+            floatRegex = new RegExp(`^-?(?:\\d+(${escapedThousandsSep}\\d+)*)?(?:${escapedDecimalPoint}\\d*)?$`);
+        } else {
+            floatRegex = new RegExp(`^-?(?:\\d+)?(?:${escapedDecimalPoint}\\d*)?$`);
+        }
 
         const formatProductQty = (qty) => {
             return formatFloat(qty, { digits: [true, productUoMDecimals] });
@@ -29,10 +41,15 @@ export const contextualUtilsService = {
             return roundDecimals(value, currency.decimal_places);
         };
 
+        const isValidFloat = (inputValue) => {
+            return ![decimalPoint, "-"].includes(inputValue) && floatRegex.test(inputValue);
+        };
+
         env.utils = {
             formatCurrency,
             roundCurrency,
             formatProductQty,
+            isValidFloat,
         };
     },
 };
diff --git a/addons/point_of_sale/static/src/app/utils/date_picker_popup/date_picker_popup.xml b/addons/point_of_sale/static/src/app/utils/date_picker_popup/date_picker_popup.xml
index 235a7aa7aa2..cf85105a3f5 100644
--- a/addons/point_of_sale/static/src/app/utils/date_picker_popup/date_picker_popup.xml
+++ b/addons/point_of_sale/static/src/app/utils/date_picker_popup/date_picker_popup.xml
@@ -12,12 +12,12 @@
                     <input class="form-control form-control-lg w-75 mx-auto" type="date" t-model="state.shippingDate" t-ref="input" t-att-min="_today()"/>
                 </main>
                 <div class="footer footer-flex modal-footer">
-                    <div class="button cancel btn btn-lg btn-secondary" t-on-click="cancel">
-                        <t t-esc="props.cancelText" />
-                    </div>
                     <div class="button confirm highlight btn btn-lg btn-primary" t-on-click="confirm">
                         <t t-esc="props.confirmText" />
                     </div>
+                    <div class="button cancel btn btn-lg btn-secondary" t-on-click="cancel">
+                        <t t-esc="props.cancelText" />
+                    </div>
                 </div>
             </div>
     </t>
diff --git a/addons/point_of_sale/static/src/app/utils/hooks.js b/addons/point_of_sale/static/src/app/utils/hooks.js
index 12028b4c67f..8cf09c79cdd 100644
--- a/addons/point_of_sale/static/src/app/utils/hooks.js
+++ b/addons/point_of_sale/static/src/app/utils/hooks.js
@@ -5,7 +5,6 @@ import { ErrorTracebackPopup } from "@point_of_sale/app/errors/popups/error_trac
 import { ErrorPopup } from "@point_of_sale/app/errors/popups/error_popup";
 import { useEnv, onMounted, onPatched, onWillUnmount, useComponent, useRef } from "@odoo/owl";
 import { useService } from "@web/core/utils/hooks";
-import { escapeRegExp } from '@web/core/utils/strings';
 
 /**
  * Introduce error handlers in the component.
@@ -100,24 +99,12 @@ export function useValidateCashInput(inputRef, startingValue) {
     const cashInput = useRef(inputRef);
     const localization = useService("localization");
     const decimalPoint = localization.decimalPoint;
-    const thousandsSep = localization.thousandsSep;
-    // Replace the thousands separator and decimal point with regex-escaped versions
-    const escapedDecimalPoint = escapeRegExp(decimalPoint);
-    let floatRegex;
-    if (thousandsSep) {
-        const escapedThousandsSep = escapeRegExp(thousandsSep);
-        floatRegex = new RegExp(`^-?(?:\\d+(${escapedThousandsSep}\\d+)*)?(?:${escapedDecimalPoint}\\d*)?$`);
-    } else {
-        floatRegex = new RegExp(`^-?(?:\\d+)?(?:${escapedDecimalPoint}\\d*)?$`);
-    }
-    function isValidFloat(inputValue) {
-        return ![decimalPoint, '-'].includes(inputValue) && floatRegex.test(inputValue);
-    }
+    const env = useEnv();
     function handleCashInputChange(event) {
         let inputValue = (event.target.value || "").trim();
 
         // Check if the current input value is a valid float
-        if (!isValidFloat(inputValue)) {
+        if (!env.utils.isValidFloat(inputValue)) {
             event.target.classList.add('invalid-cash-input');
         } else {
             event.target.classList.remove('invalid-cash-input');
diff --git a/addons/point_of_sale/static/src/app/utils/input_popups/number_popup.xml b/addons/point_of_sale/static/src/app/utils/input_popups/number_popup.xml
index 5b63d8cc3c2..74945c82c1a 100644
--- a/addons/point_of_sale/static/src/app/utils/input_popups/number_popup.xml
+++ b/addons/point_of_sale/static/src/app/utils/input_popups/number_popup.xml
@@ -14,44 +14,48 @@
                 </div>
             </div>
             <div class="popup-numpad px-5 my-3">
-                <!-- FIXME POSREF do we really need to hardcode all of these? -->
-                <button class="input-button number-char btn btn-secondary p-0 rounded-circle m-1" t-on-mousedown.prevent="() => this.sendInput('1')">1</button>
-                <button class="input-button number-char btn btn-secondary p-0 rounded-circle m-1" t-on-mousedown.prevent="() => this.sendInput('2')">2</button>
-                <button class="input-button number-char btn btn-secondary p-0 rounded-circle m-1" t-on-mousedown.prevent="() => this.sendInput('3')">3</button>
-                <t t-if="props.cheap">
-                    <button class="mode-button add btn btn-secondary p-0 rounded-circle m-1" t-on-mousedown.prevent="() => this.sendInput('+1')">+1</button>
-                </t>
-                <t t-if="!props.cheap">
-                    <button class="mode-button add btn btn-secondary p-0 rounded-circle m-1" t-on-mousedown.prevent="() => this.sendInput('+10')">+10</button>
-                </t>
-                <br />
-                <button class="input-button number-char btn btn-secondary p-0 rounded-circle m-1" t-on-mousedown.prevent="() => this.sendInput('4')">4</button>
-                <button class="input-button number-char btn btn-secondary p-0 rounded-circle m-1" t-on-mousedown.prevent="() => this.sendInput('5')">5</button>
-                <button class="input-button number-char btn btn-secondary p-0 rounded-circle m-1" t-on-mousedown.prevent="() => this.sendInput('6')">6</button>
-                <t t-if="props.cheap">
-                    <button class="mode-button add btn btn-secondary p-0 rounded-circle m-1" t-on-mousedown.prevent="() => this.sendInput('+2')">+2</button>
-                </t>
-                <t t-if="!props.cheap">
-                    <button class="mode-button add btn btn-secondary p-0 rounded-circle m-1" t-on-mousedown.prevent="() => this.sendInput('+20')">+20</button>
-                </t>
-                <br />
-                <button class="input-button number-char btn btn-secondary p-0 rounded-circle m-1" t-on-mousedown.prevent="() => this.sendInput('7')">7</button>
-                <button class="input-button number-char btn btn-secondary p-0 rounded-circle m-1" t-on-mousedown.prevent="() => this.sendInput('8')">8</button>
-                <button class="input-button number-char btn btn-secondary p-0 rounded-circle m-1" t-on-mousedown.prevent="() => this.sendInput('9')">9</button>
-                <button t-if="!props.isPassword" class="input-button number-char btn btn-secondary p-0 rounded-circle m-1" t-on-mousedown.prevent="() => this.sendInput('-')">-</button>
-                <br />
-                <button class="input-button numpad-char btn btn-secondary p-0 rounded-circle m-1" t-on-mousedown.prevent="() => this.sendInput('Delete')">C</button>
-                <button class="input-button number-char btn btn-secondary p-0 rounded-circle m-1" t-on-mousedown.prevent="() => this.sendInput('0')">0</button>
-                <button class="input-button number-char dot btn btn-secondary p-0 rounded-circle m-1" t-on-mousedown.prevent="() => this.sendInput(decimalSeparator)">
-                    <t t-esc="decimalSeparator" /></button>
-                <button class="input-button numpad-backspace btn btn-secondary p-0 rounded-circle m-1" t-on-mousedown.prevent="() => this.sendInput('Backspace')">
-                    <img style="pointer-events: none;"
-                            src="/point_of_sale/static/src/img/backspace.png" width="24"
-                            height="21" alt="Backspace" />
-                </button>
-                <br />
+                <!-- FIXME POSREF do we really need to hardcode all of these? -->                                             
+                <div class="row">
+                    <button class="col-3 input-button number-char btn btn-secondary p-0 rounded-circle m-1 fw-bolder" t-on-mousedown.prevent="() => this.sendInput('1')">1</button>
+                    <button class="col-3 input-button number-char btn btn-secondary p-0 rounded-circle m-1 fw-bolder" t-on-mousedown.prevent="() => this.sendInput('2')">2</button>
+                    <button class="col-3 input-button number-char btn btn-secondary p-0 rounded-circle m-1 fw-bolder" t-on-mousedown.prevent="() => this.sendInput('3')">3</button>
+                    <t t-if="!props.isPassword and props.cheap">
+                        <button class="mode-button add btn btn-secondary p-0 rounded-circle m-1 fw-bolder" t-on-mousedown.prevent="() => this.sendInput('+1')">+1</button>
+                    </t>
+                    <t t-if="!props.isPassword and !props.cheap">
+                        <button class="mode-button add btn btn-secondary p-0 rounded-circle m-1 fw-bolder" t-on-mousedown.prevent="() => this.sendInput('+10')">+10</button>
+                    </t>
+                </div>
+                <div class="row">
+                    <button class="col-3 input-button number-char btn btn-secondary p-0 rounded-circle m-1 fw-bolder" t-on-mousedown.prevent="() => this.sendInput('4')">4</button>
+                    <button class="col-3 input-button number-char btn btn-secondary p-0 rounded-circle m-1 fw-bolder" t-on-mousedown.prevent="() => this.sendInput('5')">5</button>
+                    <button class="col-3 input-button number-char btn btn-secondary p-0 rounded-circle m-1 fw-bolder" t-on-mousedown.prevent="() => this.sendInput('6')">6</button>
+                    <t t-if="!props.isPassword and props.cheap">
+                        <button class="mode-button add btn btn-secondary p-0 rounded-circle m-1 fw-bolder" t-on-mousedown.prevent="() => this.sendInput('+2')">+2</button>
+                    </t>
+                    <t t-if="!props.isPassword and !props.cheap">
+                        <button class="mode-button add btn btn-secondary p-0 rounded-circle m-1 fw-bolder" t-on-mousedown.prevent="() => this.sendInput('+20')">+20</button>
+                    </t>
+                </div>
+                <div class="row">
+                    <button class="col-3 input-button number-char btn btn-secondary p-0 rounded-circle m-1 fw-bolder" t-on-mousedown.prevent="() => this.sendInput('7')">7</button>
+                    <button class="col-3 input-button number-char btn btn-secondary p-0 rounded-circle m-1 fw-bolder" t-on-mousedown.prevent="() => this.sendInput('8')">8</button>
+                    <button class="col-3 input-button number-char btn btn-secondary p-0 rounded-circle m-1 fw-bolder" t-on-mousedown.prevent="() => this.sendInput('9')">9</button>
+                    <button t-if="!props.isPassword" class="col-3 input-button number-char btn btn-secondary p-0 rounded-circle m-1 fw-bolder" t-on-mousedown.prevent="() => this.sendInput('-')">-</button>
+                </div>
+                <div class="row">
+                    <button class="col-3 input-button numpad-char btn btn-secondary p-0 rounded-circle m-1 fw-bolder" t-on-mousedown.prevent="() => this.sendInput('Delete')">C</button>
+                    <button class="col-3 input-button number-char btn btn-secondary p-0 rounded-circle m-1 fw-bolder" t-on-mousedown.prevent="() => this.sendInput('0')">0</button>
+                    <button t-if="!props.isPassword" class="col-3 input-button number-char dot btn btn-secondary p-0 rounded-circle m-1 fw-bolder" t-on-mousedown.prevent="() => this.sendInput(decimalSeparator)">
+                        <t t-esc="decimalSeparator" /></button>
+                    <button class="col-3 input-button numpad-backspace btn btn-secondary p-0 rounded-circle m-1 fw-bolder" t-on-mousedown.prevent="() => this.sendInput('Backspace')">
+                        <img style="pointer-events: none;"
+                                src="/point_of_sale/static/src/img/backspace.png" width="24"
+                                height="21" alt="Backspace" />
+                    </button>
+                </div>
             </div>
-            <footer class="footer centered modal-footer">
+            <footer class="footer centered modal-footer justify-content-center">
                 <button class="button confirm highlight btn btn-lg btn-primary" t-on-mousedown.prevent="confirm">
                         <span><t t-esc="props.confirmText" /></span>
                         <span t-if="props.getInputBufferReminder(state.buffer)" class="input-buffer-reminder small">
diff --git a/addons/point_of_sale/static/src/app/utils/input_popups/selection_popup.xml b/addons/point_of_sale/static/src/app/utils/input_popups/selection_popup.xml
index 5d01c34501d..be978c0d911 100644
--- a/addons/point_of_sale/static/src/app/utils/input_popups/selection_popup.xml
+++ b/addons/point_of_sale/static/src/app/utils/input_popups/selection_popup.xml
@@ -8,7 +8,7 @@
             </div>
             <div class="selection btn-group-vertical justify-content-start w-100 p-3 overflow-y-auto">
                 <t t-foreach="props.list" t-as="item" t-key="item.id">
-                    <button type="button" class="selection-item d-flex align-items-center justify-content-between btn btn-lg btn-outline-secondary w-100 p-3 text-start" t-att-class="{ 'selected text-bg-primary': item.isSelected }"
+                    <button type="button" class="selection-item d-flex align-items-center justify-content-between btn btn-lg btn-outline-secondary w-100 p-3 text-start" t-att-class="{ 'selected active': item.isSelected }"
                             t-on-click="() => this.selectItem(item.id)">
                         <div class="d-flex flex-column">
                             <span t-esc="item.label" />
diff --git a/addons/point_of_sale/static/src/app/utils/input_popups/text_input_popup.xml b/addons/point_of_sale/static/src/app/utils/input_popups/text_input_popup.xml
index 87cf427d63e..4a0b7d3f784 100644
--- a/addons/point_of_sale/static/src/app/utils/input_popups/text_input_popup.xml
+++ b/addons/point_of_sale/static/src/app/utils/input_popups/text_input_popup.xml
@@ -10,12 +10,12 @@
                     <input class="form-control form-control-lg w-75 mx-auto" type="text" t-model="state.inputValue" t-ref="input" t-att-placeholder="props.placeholder"/>
                 </div>
                 <div class="footer footer-flex modal-footer">
-                    <div class="button cancel btn btn-lg btn-secondary" t-on-click="cancel">
-                        <t t-esc="props.cancelText" />
-                    </div>
                     <div class="button confirm highlight btn btn-lg btn-primary" t-on-click="confirm">
                         <t t-esc="props.confirmText" />
                     </div>
+                    <div class="button cancel btn btn-lg btn-secondary" t-on-click="cancel">
+                        <t t-esc="props.cancelText" />
+                    </div>
                 </div>
             </div>
     </t>
diff --git a/addons/point_of_sale/static/src/app/utils/input_popups/textarea_popup.xml b/addons/point_of_sale/static/src/app/utils/input_popups/textarea_popup.xml
index 572656cf313..092ede20836 100644
--- a/addons/point_of_sale/static/src/app/utils/input_popups/textarea_popup.xml
+++ b/addons/point_of_sale/static/src/app/utils/input_popups/textarea_popup.xml
@@ -13,12 +13,12 @@
             </div>
 
             <footer class="footer footer-flex modal-footer">
-                <div class="button cancel btn btn-lg btn-secondary" t-on-click="cancel">
-                    <t t-esc="props.cancelText" />
-                </div>
                 <div class="button confirm highlight btn btn-lg btn-primary" t-on-click="confirm">
                     <t t-esc="props.confirmText" />
                 </div>
+                <div class="button cancel btn btn-lg btn-secondary" t-on-click="cancel">
+                    <t t-esc="props.cancelText" />
+                </div>
             </footer>
         </div>
     </t>
diff --git a/addons/point_of_sale/static/src/app/utils/money_details_popup/money_details_popup.scss b/addons/point_of_sale/static/src/app/utils/money_details_popup/money_details_popup.scss
deleted file mode 100644
index d82b1f27567..00000000000
--- a/addons/point_of_sale/static/src/app/utils/money_details_popup/money_details_popup.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.money-details-value label {
-    width: 50px;
-}
diff --git a/addons/point_of_sale/static/src/app/utils/money_details_popup/money_details_popup.xml b/addons/point_of_sale/static/src/app/utils/money_details_popup/money_details_popup.xml
index f4feabd9747..5dabfcd90b3 100644
--- a/addons/point_of_sale/static/src/app/utils/money_details_popup/money_details_popup.xml
+++ b/addons/point_of_sale/static/src/app/utils/money_details_popup/money_details_popup.xml
@@ -6,11 +6,11 @@
                 <h4 class="modal-title">Coins/Bills</h4>
             </div>
             <main class="modal-body">
-                <div class="money-details-info d-flex justify-content-between mb-2 oveflow-auto">
+                <div class="money-details-info d-flex justify-content-end mb-2 oveflow-auto">
                     <div t-foreach="[firstHalfMoneyDetails, lastHalfMoneyDetails]" t-as="moneyDetailsList" t-key="moneyDetailsList_index">
                         <t t-foreach="moneyDetailsList" t-as="moneyValue" t-key="moneyValue">
-                            <div class="money-details-value d-flex align-items-center w-100 my-1" t-on-input="updateMoneyDetailsAmount">
-                                <input class="pos-input form-control w-75" t-att-id="moneyValue" type="number" t-model.number="state.moneyDetails[moneyValue]" t-on-focus="ev=>ev.target.select()"/>
+                            <div class="money-details-value d-flex align-items-center w-100 my-1 mx-auto" t-on-input="updateMoneyDetailsAmount">
+                                <input class="pos-input form-control w-50 text-end" t-att-id="moneyValue" type="number" t-model.number="state.moneyDetails[moneyValue]" t-on-focus="ev=>ev.target.select()"/>
                                 <label class="oe_link_icon w-25 text-end" t-att-for="moneyValue">
                                     <t t-if="currency.position === 'before'"><t t-esc="currency.symbol"/>&nbsp;</t>
                                     <t t-esc="moneyValue"/>
@@ -26,8 +26,8 @@
                 </h4>
             </main>
             <footer class="footer footer-flex modal-footer">
-                <div class="button btn btn-lg btn-secondary" t-on-click="cancel">Discard</div>
                 <div class="button highlight btn btn-lg btn-primary" t-on-click="confirm">Confirm</div>
+                <div class="button btn btn-lg btn-secondary" t-on-click="cancel">Discard</div>
             </footer>
         </div>
     </t>
diff --git a/addons/point_of_sale/static/src/css/popups/cash_opening_popup.css b/addons/point_of_sale/static/src/css/popups/cash_opening_popup.css
deleted file mode 100644
index a1adfc18801..00000000000
--- a/addons/point_of_sale/static/src/css/popups/cash_opening_popup.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.pos .opening-cash-control .body{
-    margin: 24px;
-}
diff --git a/addons/point_of_sale/static/src/css/popups/closing_pos_popup.scss b/addons/point_of_sale/static/src/css/popups/closing_pos_popup.scss
index 50b2214ec30..4fdadb821a4 100644
--- a/addons/point_of_sale/static/src/css/popups/closing_pos_popup.scss
+++ b/addons/point_of_sale/static/src/css/popups/closing_pos_popup.scss
@@ -2,15 +2,10 @@
     max-width: 800px !important;
     max-height: 800px;
 
-    th:nth-child(1), 
-    td:nth-child(1) {
-        padding-right: 5px;
-    }
-
     th:nth-child(2),
     td:nth-child(2) {
         text-align: right;
-        padding-right: map-get($spacers, 1);
+        padding-right: map-get($spacers, 3);
         white-space: nowrap;
     }
 
@@ -30,10 +25,6 @@
     padding-left: map-get($spacers, 2);
 }
 
-.payment-methods-overview table tr {
-    height: map-get($spacers, 4);
-}
-
 @media screen and (max-width: 768px) {
     .pos .close-pos-popup {
         overflow-y: auto;
diff --git a/addons/point_of_sale/static/src/css/popups/common.css b/addons/point_of_sale/static/src/css/popups/common.css
deleted file mode 100644
index 6bad5524859..00000000000
--- a/addons/point_of_sale/static/src/css/popups/common.css
+++ /dev/null
@@ -1,22 +0,0 @@
-/* Input style used in cash control popups */
-/* .pos .popup .pos-input {
-    text-align: right;
-    font-size: 18px;
-    color: #555555;
-    background: none;
-    min-height: 0;
-    border-radius: unset;
-    box-shadow: none;
-    padding: 0;
-    cursor: pointer;
-    width: 50px;
-    margin-right: 15px;
-    border-bottom: solid 2px;
-}
-
-.pos .popup .pos-input:focus {
-    box-shadow: none ;
-    border-color: blue;
-    font-weight: bold;
-}
- */
diff --git a/addons/point_of_sale/static/src/css/popups/money_details_popup.css b/addons/point_of_sale/static/src/css/popups/money_details_popup.css
deleted file mode 100644
index afc96d8e6e7..00000000000
--- a/addons/point_of_sale/static/src/css/popups/money_details_popup.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.pos .money-details.invisible {
-    display: none;
-}
-
-.pos .money-details .body {
-    max-height: 350px;
-}
-
-.pos .money-details .money-details-title {
-    text-align: left;
-    margin-bottom: 15px;
-    font-weight: bold;
-}
-
-.pos .money-details .footer .button {
-    margin-right: unset;
-}
diff --git a/addons/point_of_sale/static/src/css/popups/popups.scss b/addons/point_of_sale/static/src/css/popups/popups.scss
index ee5593e07b7..bc882e18ba7 100644
--- a/addons/point_of_sale/static/src/css/popups/popups.scss
+++ b/addons/point_of_sale/static/src/css/popups/popups.scss
@@ -9,11 +9,6 @@
     margin-top: 50px;
     text-align: center;
 }
-.pos .dialog p{
-    font-size: 25px;
-    margin-top: 10px;
-    color: #5a5a5a;
-}
 
 .pos .modal-dialog .popup{
     margin: auto;
@@ -23,8 +18,6 @@
     background-color: #fff;
     box-shadow: 0px 10px 20px rgba(0,0,0,0.4);
     z-index:1200;
-    font-family: 'Lato';
-    font-family: Lato;
     border-radius: 4px;
 }
 
@@ -72,18 +65,6 @@
 .pos .popup.offline {
     max-width: 600px;
 }
-.pos .popup.popup-error,
-.pos .popup.popup-error .button {
-    background-color: #F3BBBB;
-    color: rgb(168, 89, 89);
-}
-.pos .popup.popup-error {
-    box-shadow: 0px 10px 20px rgba(92,51,51,0.4);
-}
-.pos .popup.popup-error .title {
-    color: white;
-    background: rgba(255, 76, 76, 0.5);
-}
 
 .popup-numpad {
     direction: ltr/*rtl:ignore*/; /* rtlcss forced to keep ltr */
@@ -92,14 +73,3 @@
 .pos .popup-textinput main {
     margin-bottom: 20px;
 }
-
-.pos .popup-password .mode-button.add,
-.pos .popup-password .input-button.dot {
-    display: none;
-}
-.pos .popup-password .popup-numpad {
-    width: 190px;
-}
-.pos .popup-password .popup-input {
-    width: 70%;
-}
diff --git a/addons/point_of_sale/static/tests/tours/helpers/ChromeTourMethods.js b/addons/point_of_sale/static/tests/tours/helpers/ChromeTourMethods.js
index 7f7a770d68d..c0bf6b1ac01 100644
--- a/addons/point_of_sale/static/tests/tours/helpers/ChromeTourMethods.js
+++ b/addons/point_of_sale/static/tests/tours/helpers/ChromeTourMethods.js
@@ -17,7 +17,7 @@ class Do {
                 trigger: ".pos-topheader .ticket-button",
             },
             {
-                trigger: ".subwindow .ticket-screen",
+                trigger: ".screen.ticket-screen",
                 run: () => {},
             },
         ];
diff --git a/addons/pos_hr/static/src/app/login_screen/login_screen.xml b/addons/pos_hr/static/src/app/login_screen/login_screen.xml
index 197a014a9bc..a043d2746b0 100644
--- a/addons/pos_hr/static/src/app/login_screen/login_screen.xml
+++ b/addons/pos_hr/static/src/app/login_screen/login_screen.xml
@@ -6,13 +6,13 @@
                 <div class="login-title fs-2 mb-3 mb-md-0">Log in to
                     <span class="text-primary"><t t-esc="shopName" /></span>
                 </div>
-                <div class="login-body d-flex d-flex flex-column flex-md-row align-items-center justify-content-around flex-grow-1">
-                    <span class="login-element border p-3 px-4 rounded w-50">
+                <div class="login-body d-flex d-flex flex-column flex-sm-row align-items-center justify-content-around px-3 py-4">
+                    <span class="login-element border p-3 rounded">
                         <img class="login-barcode-img w-50"
                              src="/point_of_sale/static/img/barcode.png" />
                         <div class="login-barcode-text mt-2">Scan your badge</div>
                     </span>
-                    <span class="login-or fs-2 text-muted">or</span>
+                    <span class="login-or m-2 fs-2 text-muted">or</span>
                     <span class="login-element">
                         <button class="login-button select-cashier btn btn-lg btn-secondary py-5 px-3"
                                 t-on-click="selectCashier">Select Cashier</button>
diff --git a/addons/pos_hr/static/src/app/select_cashier_mixin.js b/addons/pos_hr/static/src/app/select_cashier_mixin.js
index a99c846b069..af391375d7f 100644
--- a/addons/pos_hr/static/src/app/select_cashier_mixin.js
+++ b/addons/pos_hr/static/src/app/select_cashier_mixin.js
@@ -48,6 +48,7 @@ export function useCashierSelector(
         if (employee.pin !== Sha1.hash(inputPin)) {
             await popup.add(ErrorPopup, {
                 title: _t("Incorrect Password"),
+                body: _t("Please try again."),
             });
             return false;
         }
diff --git a/addons/pos_hr/static/src/css/pos.scss b/addons/pos_hr/static/src/css/pos.scss
index 6203b8e9585..2de48f700af 100644
--- a/addons/pos_hr/static/src/css/pos.scss
+++ b/addons/pos_hr/static/src/css/pos.scss
@@ -16,8 +16,8 @@
 }
 
 .screen-login{
-    max-width: 550px;
-    height:300px;
+    max-width: 500px;
+    height: fit-content;
 }
 
 @media screen and (max-width: 576px) {
diff --git a/addons/pos_loyalty/static/src/app/control_buttons/reward_button/reward_button.xml b/addons/pos_loyalty/static/src/app/control_buttons/reward_button/reward_button.xml
index b4dd5a8e9a0..5b00667456c 100644
--- a/addons/pos_loyalty/static/src/app/control_buttons/reward_button/reward_button.xml
+++ b/addons/pos_loyalty/static/src/app/control_buttons/reward_button/reward_button.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
      <t t-name="pos_loyalty.RewardButton" owl="1">
-        <button class="control-button btn btn-light rounded-0 fw-bolder" t-attf-class="{{hasClaimableRewards() ? 'highlight text-bg-primary' : 'disabled'}}" t-on-click="() => this.click()">
+        <button class="control-button btn btn-light rounded-0 fw-bolder" t-attf-class="{{hasClaimableRewards() ? 'highlight text-action' : 'disabled'}}" t-on-click="() => this.click()">
             <i class="fa fa-star me-1"></i>
             <span> </span>
             <span>Reward</span>
diff --git a/addons/pos_loyalty/static/src/overrides/components/order_summary/order_summary.xml b/addons/pos_loyalty/static/src/overrides/components/order_summary/order_summary.xml
index 6a59f8f7cba..b75fc2658f8 100644
--- a/addons/pos_loyalty/static/src/overrides/components/order_summary/order_summary.xml
+++ b/addons/pos_loyalty/static/src/overrides/components/order_summary/order_summary.xml
@@ -2,32 +2,35 @@
 <templates id="template" xml:space="preserve">
     <t t-name="pos_loyalty.OrderSummary" t-inherit="point_of_sale.OrderSummary" t-inherit-mode="extension" owl="1">
         <xpath expr="//div[hasclass('summary')]" position="after">
-            <div class="summary clearfix sticky-top w-100 p-2 border-top text-end fw-bolder">
                 <t t-set="_loyaltyStats" t-value="getLoyaltyPoints()"/>
                 <t t-foreach="_loyaltyStats" t-as="_loyaltyStat" t-key="_loyaltyStat.couponId">
                     <t t-if="_loyaltyStat.points.won || _loyaltyStat.points.spent">
-                        <div class='d-flex flex-column w-50 p-2 bg-success bg-opacity-25 text-success text-start'>
-                            <div class="loyalty-points-title">
-                                <t t-esc="_loyaltyStat.points.name"/>
-                            </div>
-                            <t t-if='_loyaltyStat.points.won'>
-                                <div class="loyalty-points-won">
-                                    <span class='value'>+<t t-esc='_loyaltyStat.points.won'/></span>
+                        <div class="summary clearfix sticky-top w-100 border-top text-end fw-bolder">
+                            <div class='d-flex flex-column px-3 py-2 bg-200 text-start'>
+                                <div class="loyalty-points-title text-center mb-1">
+                                    <t t-esc="_loyaltyStat.points.name"/>
                                 </div>
-                            </t>
-                            <t t-if='_loyaltyStat.points.spent'>
-                                <div class="loyalty-points-spent bg-danger bg-opacity-25 text-danger">
-                                    <span class='value'>-<t t-esc='_loyaltyStat.points.spent'/></span>
+                                <div class="d-flex justify-content-around gap-2 mt-1">
+                                    <div 
+                                        t-if='_loyaltyStat.points.won' 
+                                        class="loyalty-points-won d-flex flex-column align-items-center justify-content-center flex-grow-1 rounded bg-300 px-3 py-2" >
+                                        <span class="text-muted">Points Won</span>
+                                        <span class='value text-success '>+<t t-esc='_loyaltyStat.points.won'/></span>
+                                    </div>
+                                    <div 
+                                        t-if='_loyaltyStat.points.spent' 
+                                        class="loyalty-points-won d-flex flex-column align-items-center justify-content-center flex-grow-1 rounded bg-300 px-3 py-2" >
+                                        <span class="text-muted">Points Spent</span>
+                                        <span class='value text-danger'>-<t t-esc='_loyaltyStat.points.spent'/></span>
+                                    </div>
+                                    <div class="loyalty-points-total d-flex flex-column align-items-center justify-content-center flex-grow-1 rounded bg-300 px-3 py-2">
+                                        <span class="text-muted">New Total</span>
+                                        <span class='value text-primary'><t t-esc='_loyaltyStat.points.total'/></span>
+                                    </div>
                                 </div>
-                            </t>
-                            <div class="loyalty-points-total border-top  pt-1 mt-1 border-2 border-success">
-                                <span class='value'><t t-esc='_loyaltyStat.points.total'/></span>
                             </div>
                         </div>
                     </t>
-                    <t t-else="">
-                        <div class="d-none">Test</div>
-                    </t>
                 </t>
             </div>
         </xpath>
diff --git a/addons/pos_restaurant/static/src/app/bill_screen/bill_screen.xml b/addons/pos_restaurant/static/src/app/bill_screen/bill_screen.xml
index 7c82b5c185d..0fefd6a954c 100644
--- a/addons/pos_restaurant/static/src/app/bill_screen/bill_screen.xml
+++ b/addons/pos_restaurant/static/src/app/bill_screen/bill_screen.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_restaurant.BillScreen" owl="1">
-        <div class="receipt-screen screen">
+        <div class="receipt-screen screen h-100 bg-100">
             <div class="screen-content d-flex flex-column h-100">
                 <div class="top-content d-flex align-items-center p-2 border-bottom text-center">
                     <div class="top-content-center flex-grow-1">
@@ -13,7 +13,7 @@
                         <i class="fa fa-angle-double-right ms-2"></i>
                     </button>
                 </div>
-                <div class="centered-content mx-auto mt-3 border-left border-right text-center overflow-x-hidden overflow-y-auto">
+                <div class="centered-content mx-auto mt-3 border-start border-end text-center overflow-x-hidden overflow-y-auto">
                     <div class="button print btn btn-lg btn-primary" t-on-click="printReceipt">
                         <i class="fa fa-print" t-ref="order-print-receipt-button"></i>
                         <span> </span>
diff --git a/addons/pos_restaurant/static/src/app/floor_screen/edit_bar.xml b/addons/pos_restaurant/static/src/app/floor_screen/edit_bar.xml
index e244ee68946..4ac214ad427 100644
--- a/addons/pos_restaurant/static/src/app/floor_screen/edit_bar.xml
+++ b/addons/pos_restaurant/static/src/app/floor_screen/edit_bar.xml
@@ -47,7 +47,7 @@
             </div>
             <span class="edit-button btn btn-secondary btn-lg ms-3" t-on-click.stop="props.toggleEditMode">
                 <div class="close-edit-button">
-                    <i class="oi oi-close icon-button" role="img" aria-label="Close" title="Close"></i>
+                    Done
                 </div>
             </span>
         </div>
diff --git a/addons/pos_restaurant/static/src/app/floor_screen/editable_table.js b/addons/pos_restaurant/static/src/app/floor_screen/editable_table.js
index 3e42cc55fd3..42d9639a758 100644
--- a/addons/pos_restaurant/static/src/app/floor_screen/editable_table.js
+++ b/addons/pos_restaurant/static/src/app/floor_screen/editable_table.js
@@ -147,7 +147,7 @@ export class EditableTable extends Component {
                 width: `${widthTable}px`,
                 height: `${widthTable}px`,
                 background: table.color || "rgb(53, 211, 116)",
-                // "line-height": `${widthTable}px`,
+                "line-height": `${widthTable}px`,
                 "border-radius": table.shape === "round" ? "1000px" : "3px",
                 "font-size": widthTable >= 150 ? "32px" : "16px",
                 opacity: "0.7",
@@ -160,7 +160,7 @@ export class EditableTable extends Component {
             width: `${table.width}px`,
             height: `${table.height}px`,
             background: table.color || "rgb(53, 211, 116)",
-            // "line-height": `${table.height}px`,
+            "line-height": `${table.height}px`,
             "border-radius": table.shape === "round" ? "1000px" : "3px",
             "font-size": table.height >= 150 && table.width >= 150 ? "32px" : "16px",
         });
diff --git a/addons/pos_restaurant/static/src/app/floor_screen/editable_table.xml b/addons/pos_restaurant/static/src/app/floor_screen/editable_table.xml
index 2cf927af8f1..e2f63c020ac 100644
--- a/addons/pos_restaurant/static/src/app/floor_screen/editable_table.xml
+++ b/addons/pos_restaurant/static/src/app/floor_screen/editable_table.xml
@@ -2,8 +2,9 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_restaurant.EditableTable" owl="1">
-        <div class="table selected d-flex flex-column align-items-center justify-content-between position-relative" t-ref="root">
-            <span class="label drag-handle fw-bolder fs-2">
+        <div class="table selected position-absolute d-flex flex-column align-items-center justify-content-between overflow-hidden" 
+            t-ref="root">
+            <span class="label drag-handle d-flex align-items-center flex-grow-1 d fw-bolder fs-2">
                 <t t-esc="props.table.name" />
             </span>
             <t t-if="pos.floorPlanStyle != 'kanban'" t-foreach="handles" t-as="handle" t-key="handle">
diff --git a/addons/pos_restaurant/static/src/app/floor_screen/floor_screen.scss b/addons/pos_restaurant/static/src/app/floor_screen/floor_screen.scss
index 2669932ca63..ea11648bbdd 100644
--- a/addons/pos_restaurant/static/src/app/floor_screen/floor_screen.scss
+++ b/addons/pos_restaurant/static/src/app/floor_screen/floor_screen.scss
@@ -54,4 +54,9 @@
             color: white;
         }
     }
+
+    .order-count {
+        height: $o-horizontal-padding * 1.5;
+        width: $o-horizontal-padding * 1.5;
+    }
 }
diff --git a/addons/pos_restaurant/static/src/app/floor_screen/floor_screen.xml b/addons/pos_restaurant/static/src/app/floor_screen/floor_screen.xml
index 6da0073e9ed..9671f4a989c 100644
--- a/addons/pos_restaurant/static/src/app/floor_screen/floor_screen.xml
+++ b/addons/pos_restaurant/static/src/app/floor_screen/floor_screen.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_restaurant.FloorScreen" owl="1">
-        <div class="floor-screen screen position-relative d-flex flex-column flex-nowrap m-0 text-start overflow-hidden">
+        <div class="floor-screen screen h-100 position-relative d-flex flex-column flex-nowrap m-0 bg-100 text-start overflow-hidden">
             <EditBar t-if="pos.isEditMode" selectedTables="selectedTables" nbrFloors="nbrFloors" 
                         floorMapScrollTop="state.floorMapScrollTop" isColorPicker="state.isColorPicker" toggleColorPicker.bind="toggleColorPicker"
                         createTable.bind="createTable" duplicateTableOrFloor.bind="duplicateTableOrFloor" renameTable.bind="renameTable"
@@ -12,11 +12,11 @@
             />
             <div class="floor-selector d-flex text-center bg-100 fs-3">
                 <t t-foreach="pos.floors" t-as="floor" t-key="floor.id">
-                    <button class="button button-floor btn flex-grow-1 py-3 rounded-0" t-attf-class="{{ floor.id === state.selectedFloorId ? 'btn-primary' : 'btn-light' }}" t-on-click="() => this.selectFloor(floor)">
+                    <button class="button button-floor btn p-3 rounded-0" t-attf-class="{{ floor.id === state.selectedFloorId ? 'btn-primary' : 'btn-light' }}" t-on-click="() => this.selectFloor(floor)">
                         <t t-esc="floor.name" />
                     </button>
                 </t>
-                <button class="button button-add btn btn-secondary p-3 rounded-0" t-ref="add-floor-ref" t-on-click="addFloor">
+                <button class="button button-add btn btn-secondary p-3 ms-auto rounded-0" t-ref="add-floor-ref" t-on-click="addFloor">
                     <i class="fa fa-plus icon-button me-2" role="img" aria-label="Add" title="Add"></i>
                     Add Floor
                 </button>
diff --git a/addons/pos_restaurant/static/src/app/floor_screen/table.js b/addons/pos_restaurant/static/src/app/floor_screen/table.js
index 1236691ecb7..4f2a032c02a 100644
--- a/addons/pos_restaurant/static/src/app/floor_screen/table.js
+++ b/addons/pos_restaurant/static/src/app/floor_screen/table.js
@@ -149,8 +149,9 @@ export class Table extends Component {
         const notifications = this._getNotifications();
         const countClass = {
             "order-count": true,
-            "notify-printing mt-1 px-2 rounded-pill text-bg-danger": notifications.printing,
-            "notify-skipped mt-1 px-2 rounded-pill text-bg-info": notifications.skipped,
+            "notify-printing text-bg-danger": notifications.printing,
+            "notify-skipped text-bg-info": notifications.skipped,
+            "text-bg-dark": !notifications.printing && !notifications.skipped,
         };
         return countClass;
     }
diff --git a/addons/pos_restaurant/static/src/app/floor_screen/table.xml b/addons/pos_restaurant/static/src/app/floor_screen/table.xml
index facd47425c4..45baa616642 100644
--- a/addons/pos_restaurant/static/src/app/floor_screen/table.xml
+++ b/addons/pos_restaurant/static/src/app/floor_screen/table.xml
@@ -1,16 +1,20 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates id="template" xml:space="preserve">
     <t t-name="pos_restaurant.Table" owl="1">
-        <div class="table position-absolute d-flex flex-column align-items-center justify-content-between rounded cursor-pointer" t-on-click.stop="(ev) => props.onClick(props.table, ev)" t-att-style="style">
-            <div class="infos">
-                <span class="label fw-bolder fs-4 z-index-1">
-                    <t t-esc="props.table.name" />
-                </span>
-                <span t-att-class="orderCountClass" t-attf-class="{{ orderCount === 0 ? 'opacity-0' : ''}}" t-att-style="badgeStyle">
-                    <t t-esc="orderCount" />
-                </span>
+        <div class="table position-absolute d-flex flex-column align-items-center justify-content-between cursor-pointer overflow-hidden" 
+            t-on-click.stop="(ev) => props.onClick(props.table, ev)" 
+            t-att-style="style">
+            <div class="infos d-flex align-items-center flex-grow-1">
+                <span class="label fw-bolder fs-4 z-index-1"
+                    t-esc="props.table.name" />
+                <span 
+                    t-att-class="orderCountClass" 
+                    class="badge d-flex align-items-center justify-content-center position-absolute top-0 start-100 translate-middle rounded-pill" 
+                    t-attf-class="{{ orderCount === 0 ? 'd-none' : ''}}" 
+                    t-att-style="badgeStyle"
+                    t-esc="orderCount"/>
             </div>
-            <span class="table-seats mb-1 px-2 rounded text-bg-dark bg-opacity-25 fs-4 z-index-1">
+            <span class="table-seats position-absolute bottom-0 start-50 translate-middle-x mb-1 px-2 py-1 rounded text-bg-dark bg-opacity-25 fs-4 z-index-1">
                 <div class="cover" t-att-style="`width: ${Math.ceil(fill * 100)}%`" />
                 <t t-esc="customerCountDisplay" />
             </span>
diff --git a/addons/pos_restaurant/static/src/app/product_screen/order/order.xml b/addons/pos_restaurant/static/src/app/product_screen/order/order.xml
index 51886bd73c5..845eef93bef 100644
--- a/addons/pos_restaurant/static/src/app/product_screen/order/order.xml
+++ b/addons/pos_restaurant/static/src/app/product_screen/order/order.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
     <t t-name="pos_restaurant.OrderWidget" t-inherit="point_of_sale.OrderWidget" t-inherit-mode="extension" owl="1">
         <xpath expr="//div[hasclass('order-empty')]" position="after">
-            <button t-if="showReleaseBtn" class="btn btn-primary" style="border:none; font-size: 20px;" t-on-click="releaseTable">Release table</button>
+            <button t-if="showReleaseBtn" class="btn btn-primary py-2 rounded-0" style="border:none; font-size: 20px;" t-on-click="releaseTable">Release table</button>
         </xpath>
     </t>
 </templates>
diff --git a/addons/pos_restaurant/static/src/app/split_bill_screen/split_bill_screen.xml b/addons/pos_restaurant/static/src/app/split_bill_screen/split_bill_screen.xml
index 16e73b28c18..b03bec821da 100644
--- a/addons/pos_restaurant/static/src/app/split_bill_screen/split_bill_screen.xml
+++ b/addons/pos_restaurant/static/src/app/split_bill_screen/split_bill_screen.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_restaurant.SplitBillScreen" owl="1">
-        <div class="splitbill-screen screen">
+        <div class="splitbill-screen screen h-100 bg-100">
             <div class="contents d-flex flex-column flex-nowrap h-100 my-0 mx-auto">
                 <div class="top-content d-flex align-items-center p-2 border-bottom text-center">
                     <button class="button back btn btn-lg btn-outline-primary" t-on-click="back">
diff --git a/addons/pos_restaurant/static/src/app/split_bill_screen/split_orderline/split_orderline.xml b/addons/pos_restaurant/static/src/app/split_bill_screen/split_orderline/split_orderline.xml
index 43e1e446174..571ead03090 100644
--- a/addons/pos_restaurant/static/src/app/split_bill_screen/split_orderline/split_orderline.xml
+++ b/addons/pos_restaurant/static/src/app/split_bill_screen/split_orderline/split_orderline.xml
@@ -2,11 +2,11 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_restaurant.SplitOrderline" owl="1">
-        <li class="orderline w-100 m-0 py-2 px-3 cursor-pointer" t-att-class="{ 'selected text-bg-primary' : isSelected, partially: props.split.quantity !== props.line.get_quantity() }" t-on-click="() => this.click()">
+        <li class="orderline w-100 m-0 py-2 px-3 lh-sm cursor-pointer" t-att-class="{ 'selected text-bg-primary' : isSelected, partially: props.split.quantity !== props.line.get_quantity() }" t-on-click="() => this.click()">
             <span class="product-name d-inline-block flex-grow-1 fw-bolder text-truncate">
                 <t t-esc="props.line.get_product().display_name" />
             </span>
-            <span class="price fw-bold float-end">
+            <span class="price fw-bolder float-end">
                 <t t-esc="env.utils.formatCurrency(props.line.get_display_price())" />
             </span>
             <ul class="info-list ms-2">
diff --git a/addons/pos_restaurant/static/src/app/tip_screen/tip_screen.xml b/addons/pos_restaurant/static/src/app/tip_screen/tip_screen.xml
index 61efd5d6ba7..bf67673f382 100644
--- a/addons/pos_restaurant/static/src/app/tip_screen/tip_screen.xml
+++ b/addons/pos_restaurant/static/src/app/tip_screen/tip_screen.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_restaurant.TipScreen" owl="1">
-        <div class="tip-screen screen">
+        <div class="tip-screen screen h-100 bg-100">
             <div class="pos-receipt-container text-center" t-ref="pos-receipt-container"/>
             <div class="screen-content d-flex flex-column h-100">
                 <div class="top-content d-flex align-items-center p-2 border-bottom text-center">
diff --git a/addons/pos_restaurant/static/src/overrides/components/payment_screen/payment_screen.xml b/addons/pos_restaurant/static/src/overrides/components/payment_screen/payment_screen.xml
index 430a7e35cb1..de569c86432 100644
--- a/addons/pos_restaurant/static/src/overrides/components/payment_screen/payment_screen.xml
+++ b/addons/pos_restaurant/static/src/overrides/components/payment_screen/payment_screen.xml
@@ -1,18 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
 
-    <t t-name="pos_restaurant.PaymentScreen" t-inherit="point_of_sale.PaymentScreen" t-inherit-mode="extension" owl="1">
+    <t t-name="pos_restaurant.PaymentScreenValidate" t-inherit="point_of_sale.PaymentScreenValidate" t-inherit-mode="extension" owl="1">
         <xpath expr="//div[hasclass('button') and hasclass('next')]" position="attributes">
             <attribute name="t-att-hidden">pos.config.set_tip_after_payment and !currentOrder.is_paid()</attribute>
         </xpath>
 
-        <xpath expr="//div[hasclass('button') and hasclass('back')]/span[hasclass('back_text')]" position="replace">
-            <t t-if="pos.config.set_tip_after_payment and currentOrder.is_paid()">
-                <span class="back_text">Keep Open</span>
-            </t>
-            <t t-else="">$0</t>
-        </xpath>
-
         <xpath expr="//div[hasclass('button') and hasclass('next')]/span[hasclass('next_text')]" position="replace">
             <t t-if="pos.config.set_tip_after_payment and currentOrder.is_paid()">
                 <span class="back_text">Close Tab</span>
@@ -20,5 +13,14 @@
             <t t-else="">$0</t>
         </xpath>
     </t>
+    <t t-name="pos_restaurant.PaymentScreenTop" t-inherit="point_of_sale.PaymentScreenTop" t-inherit-mode="extension" owl="1">
+        <xpath expr="//div[hasclass('button') and hasclass('back')]/span[hasclass('back_text')]" position="replace">
+            <t t-if="pos.config.set_tip_after_payment and currentOrder.is_paid()">
+                <span class="back_text">Keep Open</span>
+            </t>
+            <t t-else="">$0</t>
+        </xpath>
+    </t>
+
 
 </templates>
diff --git a/addons/pos_restaurant/static/src/overrides/components/product_screen/orderline/orderline.xml b/addons/pos_restaurant/static/src/overrides/components/product_screen/orderline/orderline.xml
index f315352d168..1cde282b47f 100644
--- a/addons/pos_restaurant/static/src/overrides/components/product_screen/orderline/orderline.xml
+++ b/addons/pos_restaurant/static/src/overrides/components/product_screen/orderline/orderline.xml
@@ -4,8 +4,8 @@
     <t t-name="pos_restaurant.Orderline" t-inherit="point_of_sale.Orderline" t-inherit-mode="extension" owl="1">
         <xpath expr="//ul[hasclass('info-list')]" position="inside">
             <t t-if="props.line.getNote()">
-                <li class="info orderline-note me-2 text-break">
-                    <i class="fa fa-tag me-1 text-muted" role="img" aria-label="Note" title="Note"/>
+                <li class="info orderline-note p-2 my-1 rounded text-bg-info text-info bg-opacity-25 text-break">
+                    <i class="fa fa-tag me-1" role="img" aria-label="Note" title="Note"/>
                     <t t-esc="props.line.getNote()" />
                 </li>
             </t>
diff --git a/addons/pos_restaurant/static/src/overrides/components/product_screen/product_screen.xml b/addons/pos_restaurant/static/src/overrides/components/product_screen/product_screen.xml
index e441782430d..b349774a7d4 100644
--- a/addons/pos_restaurant/static/src/overrides/components/product_screen/product_screen.xml
+++ b/addons/pos_restaurant/static/src/overrides/components/product_screen/product_screen.xml
@@ -5,7 +5,7 @@
         <xpath expr="//button[hasclass('pay-button')]" position="replace">
             <button
                 t-if="this.swapButton"
-                class="btn-switchpane btn btn-primary flex-fill rounded-0 fw-bolder py-5"
+                class="btn-switchpane btn btn-primary flex-fill rounded-0 fw-bolder py-3"
                 t-on-click="submitOrder"
                 t-att-class="{'primary': primaryPayButton(), 'secondary': !primaryPayButton()}">
                 <!-- Replace the payment button by the order button -->
@@ -14,7 +14,7 @@
             </button>
             <t t-else="">
                 <button 
-                    class="btn-switchpane btn btn-primary flex-fill rounded-0 fw-bolder py-5" 
+                    class="btn-switchpane btn btn-primary flex-fill rounded-0 fw-bolder py-3" 
                     t-att-class="{'primary': primaryPayButton(), 'secondary': !primaryPayButton()}"
                     t-on-click="() => currentOrder.pay()">
                     <span class="fs-1 d-block">Pay</span>
diff --git a/addons/pos_restaurant/static/src/overrides/models/pos_store.js b/addons/pos_restaurant/static/src/overrides/models/pos_store.js
index 52accd5c757..cb056b475a5 100644
--- a/addons/pos_restaurant/static/src/overrides/models/pos_store.js
+++ b/addons/pos_restaurant/static/src/overrides/models/pos_store.js
@@ -44,7 +44,7 @@ patch(PosStore.prototype, "pos_restaurant.PosStore", {
     setIdleTimer() {
         clearTimeout(this.idleTimer);
         if (this.shouldResetIdleTimer()) {
-            this.idleTimer = setTimeout(() => this.actionAfterIdle(), 1000000);
+            this.idleTimer = setTimeout(() => this.actionAfterIdle(), 60000);
         }
     },
     async actionAfterIdle() {
diff --git a/addons/pos_sale/static/src/app/order_management_screen/sale_order_management_screen/sale_order_management_screen.xml b/addons/pos_sale/static/src/app/order_management_screen/sale_order_management_screen/sale_order_management_screen.xml
index 98e1a937870..5c4ab458153 100644
--- a/addons/pos_sale/static/src/app/order_management_screen/sale_order_management_screen/sale_order_management_screen.xml
+++ b/addons/pos_sale/static/src/app/order_management_screen/sale_order_management_screen/sale_order_management_screen.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_sale.SaleOrderManagementScreen" owl="1">
-        <div class="order-management-screen screen overflow-auto" t-att-class="{ oe_hidden: !props.isShown }" t-ref="root">
+        <div class="order-management-screen screen h-100 bg-100 overflow-auto" t-att-class="{ oe_hidden: !props.isShown }" t-ref="root">
                 <div class="rightpane">
                     <div class="flex-container flex-container d-flex flex-column h-100">
                         <SaleOrderManagementControlPanel
diff --git a/addons/pos_sale/static/src/css/pos_sale.css b/addons/pos_sale/static/src/css/pos_sale.css
deleted file mode 100644
index 00c73605efe..00000000000
--- a/addons/pos_sale/static/src/css/pos_sale.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.sale-order-info td {
-    padding-right: 12px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
diff --git a/addons/pos_sale/static/src/overrides/components/product_screen/orderline/orderline.xml b/addons/pos_sale/static/src/overrides/components/product_screen/orderline/orderline.xml
index bb12622face..0c436413909 100644
--- a/addons/pos_sale/static/src/overrides/components/product_screen/orderline/orderline.xml
+++ b/addons/pos_sale/static/src/overrides/components/product_screen/orderline/orderline.xml
@@ -4,19 +4,19 @@
     <t t-name="pos_sale.Orderline" t-inherit="point_of_sale.Orderline" t-inherit-mode="extension" owl="1">
         <xpath expr="//ul[hasclass('info-list')]" position="inside">
             <t t-if="props.line.get_sale_order()">
-                <li class="info orderline-sale-order">
+                <li class="info orderline-sale-order ms-2">
                     <i class="fa fa-basket" role="img" aria-label="SO" title="SO"/>
                     <t t-esc="props.line.get_sale_order().name" />
                 </li>
-                <table t-if="props.line.get_sale_order().details" class="sale-order-info">
+                <table t-if="props.line.get_sale_order().details" class="sale-order-info ms-2">
                     <t t-foreach='props.line.get_sale_order().details' t-as='line' t-key='line_index'>
                         <tr>
-                            <td><t t-esc="line['product_uom_qty']"/>x</td>
-                            <td style="max-width: 275px;">
+                            <td class="text-truncate"><t t-esc="line['product_uom_qty']"/>x</td>
+                            <td class="text-truncate" style="max-width: 275px;">
                                 <t t-esc="line['product_name']" />
                             </td>
-                            <td>:</td>
-                            <td><t t-esc="env.utils.formatCurrency(line['total'])" /> (tax incl.)</td>
+                            <td class="text-truncate">:</td>
+                            <td class="text-truncate"><t t-esc="env.utils.formatCurrency(line['total'])" /> (tax incl.)</td>
                         </tr>
                     </t>
                 </table>
diff --git a/addons/pos_sale/static/src/overrides/components/receipt_screen/order_receipt/order_receipt.xml b/addons/pos_sale/static/src/overrides/components/receipt_screen/order_receipt/order_receipt.xml
index 176896815a8..7e36ad345c3 100644
--- a/addons/pos_sale/static/src/overrides/components/receipt_screen/order_receipt/order_receipt.xml
+++ b/addons/pos_sale/static/src/overrides/components/receipt_screen/order_receipt/order_receipt.xml
@@ -5,10 +5,10 @@
         <xpath expr="//t[@t-foreach]" position="inside">
             <div class="pos-receipt-left-padding" t-if="line.so_reference">From <t t-esc="line.so_reference"/></div>
             <div class="pos-receipt-left-padding" t-if="line.down_payment_details">
-                <table class="sale-order-info">
+                <table class="sale-order-info ms-2 text-truncate">
                     <tr t-foreach='line.down_payment_details' t-as='line' t-key='line_index'>
-                        <td><t t-esc="line['product_uom_qty']" />x</td>
-                        <td style="max-width: 200px;">
+                        <td class="text-truncate"><t t-esc="line['product_uom_qty']" />x</td>
+                        <td class="text-truncate" style="max-width: 200px;">
                             <t t-esc="line['product_name']" />
                         </td>
                     </tr>