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>