From c087603d0b2fb6f81cdfd3afc1b94f7acb6bd2bd Mon Sep 17 00:00:00 2001
From: "Xavier Luyckx (xlu)" <xlu@odoo.com>
Date: Tue, 27 Jun 2023 12:15:27 +0000
Subject: [PATCH] [REF] pos*: introduce bootstrap

pos*: point_of_sale,pos_discount,pos_hr,pos_loyalty,
pos_restaurant,pos_sale,pos_sale_product_configurator,pos_six

Prior to this commit, the point_of_sale module relied on custom CSS.

To enhance user experience, increase flexibility, and simplify maintenance,
most of the custom css was replaced in this PR with Bootstrap utility classes.

Task: 3354582
Authored-by:  Xavier Luyckx (xlu) <xlu@odoo.com>
Part-of: odoo/odoo#129544
Co-authored-by:  vlst <vlst@odoo.com>,  Pedram (pebr)
---
 addons/point_of_sale/__manifest__.py          |   32 +-
 .../error_popup/barcode_error_popup.xml       |   17 +-
 .../static/src/app/debug/debug_widget.scss    |   83 +-
 .../static/src/app/debug/debug_widget.xml     |  164 +-
 .../order_import_popup/order_import_popup.xml |   16 +-
 .../src/app/errors/popups/error_popup.xml     |   16 +-
 .../errors/popups/error_traceback_popup.xml   |   18 +-
 .../app/errors/popups/offline_error_popup.xml |   14 +-
 .../app/navbar/back_button/back_button.xml    |    4 +-
 .../cash_move_popup/cash_move_popup.scss      |   94 -
 .../cash_move_popup/cash_move_popup.xml       |   45 +-
 .../app/navbar/cashier_name/cashier_name.xml  |    4 +-
 .../app/navbar/closing_popup/closing_popup.js |    2 +-
 .../navbar/closing_popup/closing_popup.xml    |   82 +-
 .../customer_facing_display_button.xml        |   13 +-
 .../static/src/app/navbar/navbar.scss         |   31 +
 .../static/src/app/navbar/navbar.xml          |   47 +-
 .../app/navbar/proxy_status/proxy_status.xml  |   10 +-
 .../sale_details_button.xml                   |    4 +-
 .../sync_notification/sync_notification.xml   |   10 +-
 .../src/app/notification/notification.scss    |   29 -
 .../src/app/notification/notification.xml     |    4 +-
 .../src/app/popup/popup_controller.scss       |   36 +
 .../static/src/app/popup/popup_controller.xml |    2 +-
 .../point_of_sale/static/src/app/pos_app.scss |   97 +
 .../point_of_sale/static/src/app/pos_app.xml  |    8 +-
 .../partner_editor/partner_editor.scss        |   23 +
 .../partner_editor/partner_editor.xml         |   82 +-
 .../partner_list/partner_line/partner_line.js |    2 +-
 .../partner_line/partner_line.scss            |   35 +
 .../partner_line/partner_line.xml             |   22 +-
 .../screens/partner_list/partner_list.scss    |   33 +
 .../app/screens/partner_list/partner_list.xml |   62 +-
 .../screens/payment_screen/numpad/numpad.scss |   15 +
 .../screens/payment_screen/numpad/numpad.xml  |    2 +-
 .../numpad/numpad_button/numpad_button.xml    |    2 +-
 .../payment_lines/payment_lines.scss          |   29 +
 .../payment_lines/payment_lines.xml           |   26 +-
 .../payment_screen/payment_screen.scss        |   52 +
 .../screens/payment_screen/payment_screen.xml |   83 +-
 .../payment_status/payment_status.scss        |   10 +
 .../payment_status/payment_status.xml         |   18 +-
 .../product_screen/action_pad/action_pad.scss |    9 +
 .../product_screen/action_pad/action_pad.xml  |   32 +-
 .../category_button/category_button.xml       |    6 +-
 .../control_buttons/control_buttons.scss      |   22 +
 .../control_buttons/control_buttons_popup.xml |    8 +-
 .../customer_button/customer_button.xml       |    4 +-
 .../customer_note_button.xml                  |    6 +-
 .../fiscal_position_button.xml                |    4 +-
 .../product_info_button.xml                   |    6 +-
 .../refund_button/refund_button.xml           |    6 +-
 .../screens/product_screen/numpad/numpad.scss |   44 +
 .../screens/product_screen/numpad/numpad.xml  |   34 +-
 .../screens/product_screen/order/order.scss   |    8 +
 .../screens/product_screen/order/order.xml    |   12 +-
 .../order_summary/order_summary.xml           |    8 +-
 .../product_screen/orderline/orderline.js     |    4 +-
 .../product_screen/orderline/orderline.scss   |   17 +
 .../product_screen/orderline/orderline.xml    |   21 +-
 .../product_screen/product/product.scss       |   22 +
 .../product_screen/product/product.xml        |   10 +-
 .../product_info_popup/product_info_popup.js  |    3 +-
 .../product_info_popup.scss                   |    7 +
 .../product_info_popup/product_info_popup.xml |  157 +-
 .../control_panel/control_panel.scss          |   43 +
 .../control_panel/control_panel.xml           |   64 +-
 .../product_list/product_list.scss            |   12 +
 .../product_list/product_list.xml             |   14 +-
 .../screens/product_screen/product_screen.xml |   27 +-
 .../receipt_screen/receipt/receipt.xml        |    2 +-
 .../receipt_screen/receipt_screen.scss        |   48 +
 .../screens/receipt_screen/receipt_screen.xml |   69 +-
 .../receipt_screen/reprint_receipt_screen.xml |   20 +-
 .../screens/scale_screen/scale_screen.scss    |    5 +
 .../app/screens/scale_screen/scale_screen.xml |   36 +-
 .../static/src/app/screens/screens.scss       |   39 +
 .../invoice_button/invoice_button.xml         |    6 +-
 .../order_details/order_details.xml           |   26 +-
 .../order_details/orderline_details.xml       |   18 +-
 .../reprint_receipt_button.xml                |    6 +-
 .../ticket_screen/search_bar/search_bar.scss  |    0
 .../ticket_screen/search_bar/search_bar.xml   |    8 +-
 .../screens/ticket_screen/ticket_screen.scss  |  231 +
 .../screens/ticket_screen/ticket_screen.xml   |   70 +-
 .../cash_opening_popup/cash_opening_popup.xml |   33 +-
 .../static/src/app/store/pos_store.js         |    2 -
 .../product_configurator_popup.xml            |  102 +-
 .../edit_list_input/edit_list_input.xml       |   10 +-
 .../select_lot_popup/select_lot_popup.xml     |   30 +-
 .../app/utils/confirm_popup/confirm_popup.xml |   16 +-
 .../date_picker_popup/date_picker_popup.xml   |   22 +-
 .../app/utils/input_popups/number_popup.scss  |    5 +
 .../app/utils/input_popups/number_popup.xml   |   76 +-
 .../utils/input_popups/selection_popup.scss   |    3 +
 .../utils/input_popups/selection_popup.xml    |   23 +-
 .../utils/input_popups/text_input_popup.xml   |   23 +-
 .../app/utils/input_popups/textarea_popup.xml |   23 +-
 .../money_details_popup.scss                  |    3 +
 .../money_details_popup.xml                   |   30 +-
 .../src/css/popups/cash_opening_popup.css     |   34 -
 .../src/css/popups/closing_pos_popup.css      |  218 -
 .../src/css/popups/closing_pos_popup.scss     |   41 +
 .../static/src/css/popups/common.css          |   35 +-
 .../src/css/popups/money_details_popup.css    |   23 -
 .../static/src/css/popups/popups.scss         |  105 +
 .../src/css/popups/product_info_popup.css     |  186 -
 .../static/src/css/popups/text_area_popup.css |   16 -
 addons/point_of_sale/static/src/scss/pos.scss | 3894 +----------------
 .../static/src/scss/pos_variables_extra.scss  |   33 +-
 .../discount_button/discount_button.xml       |    4 +-
 .../src/app/login_screen/login_screen.xml     |   20 +-
 addons/pos_hr/static/src/css/pos.css          |  116 -
 addons/pos_hr/static/src/css/pos.scss         |   27 +
 .../overrides/components/navbar/navbar.xml    |    8 +-
 .../e_wallet_button/e_wallet_button.xml       |    4 +-
 .../promo_code_button/promo_code_button.xml   |    6 +-
 .../reset_programs_button.xml                 |    6 +-
 .../reward_button/reward_button.xml           |    6 +-
 .../pos_loyalty/static/src/css/Loyalty.scss   |   28 -
 .../order_summary/order_summary.xml           |   12 +-
 .../data/pos_restaurant_demo.xml              |   16 +-
 .../src/app/bill_screen/bill_screen.xml       |   21 +-
 .../orderline_note_button.xml                 |    6 +-
 .../print_bill_button/print_bill_button.xml   |    4 +-
 .../split_bill_button/split_bill_button.xml   |    4 +-
 .../table_guests_button.xml                   |    4 +-
 .../transfer_order_button.xml                 |    6 +-
 .../static/src/app/floor_screen/edit_bar.xml  |  130 +-
 .../src/app/floor_screen/editable_table.js    |    4 +-
 .../src/app/floor_screen/editable_table.xml   |    4 +-
 .../src/app/floor_screen/floor_screen.js      |    2 -
 .../src/app/floor_screen/floor_screen.scss    |  244 +-
 .../src/app/floor_screen/floor_screen.xml     |   23 +-
 .../static/src/app/floor_screen/table.js      |    4 +-
 .../static/src/app/floor_screen/table.xml     |    8 +-
 .../split_bill_screen/split_bill_screen.xml   |   34 +-
 .../split_orderline/split_orderline.xml       |   12 +-
 .../static/src/app/tip_screen/tip_screen.xml  |   57 +-
 .../overrides/components/navbar/navbar.xml    |    4 +-
 .../actionpad_widget/actionpad_widget.xml     |    6 +-
 .../product_screen/orderline/orderline.xml    |    4 +-
 .../product_screen/product_screen.xml         |   16 +-
 .../order_receipt/order_receipt.xml           |   12 +-
 .../ticket_screen/ticket_screen.xml           |    6 +-
 .../static/src/overrides/models/pos_store.js  |    2 +-
 .../static/src/scss/restaurant.scss           |  308 +-
 .../SplitBillScreen/SplitBillScreen.scss      |    8 +
 .../tours/helpers/BillScreenTourMethods.js    |    2 +-
 .../tours/helpers/FloorScreenTourMethods.js   |    2 +-
 .../sale_order_list/sale_order_list.xml       |   16 +-
 .../sale_order_management_control_panel.xml   |   46 +-
 .../sale_order_management_screen.xml          |    4 +-
 .../sale_order_row/sale_order_row.xml         |   18 +-
 .../set_sale_order_button.xml                 |    4 +-
 addons/pos_sale/static/src/css/pos_sale.css   |   88 -
 .../product_info_button.xml                   |    4 +-
 .../product_info_popup/product_info_popup.xml |   22 +-
 .../src/app/balance_button/balance_button.xml |    6 +-
 159 files changed, 2372 insertions(+), 6584 deletions(-)
 create mode 100644 addons/point_of_sale/static/src/app/navbar/navbar.scss
 delete mode 100644 addons/point_of_sale/static/src/app/notification/notification.scss
 create mode 100644 addons/point_of_sale/static/src/app/popup/popup_controller.scss
 create mode 100644 addons/point_of_sale/static/src/app/pos_app.scss
 create mode 100644 addons/point_of_sale/static/src/app/screens/partner_list/partner_editor/partner_editor.scss
 create mode 100644 addons/point_of_sale/static/src/app/screens/partner_list/partner_line/partner_line.scss
 create mode 100644 addons/point_of_sale/static/src/app/screens/partner_list/partner_list.scss
 create mode 100644 addons/point_of_sale/static/src/app/screens/payment_screen/numpad/numpad.scss
 create mode 100644 addons/point_of_sale/static/src/app/screens/payment_screen/payment_lines/payment_lines.scss
 create mode 100644 addons/point_of_sale/static/src/app/screens/payment_screen/payment_screen.scss
 create mode 100644 addons/point_of_sale/static/src/app/screens/payment_screen/payment_status/payment_status.scss
 create mode 100644 addons/point_of_sale/static/src/app/screens/product_screen/action_pad/action_pad.scss
 create mode 100644 addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/control_buttons.scss
 create mode 100644 addons/point_of_sale/static/src/app/screens/product_screen/numpad/numpad.scss
 create mode 100644 addons/point_of_sale/static/src/app/screens/product_screen/order/order.scss
 create mode 100644 addons/point_of_sale/static/src/app/screens/product_screen/orderline/orderline.scss
 create mode 100644 addons/point_of_sale/static/src/app/screens/product_screen/product/product.scss
 create mode 100644 addons/point_of_sale/static/src/app/screens/product_screen/product_info_popup/product_info_popup.scss
 create mode 100644 addons/point_of_sale/static/src/app/screens/product_screen/product_list/control_panel/control_panel.scss
 create mode 100644 addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.scss
 create mode 100644 addons/point_of_sale/static/src/app/screens/receipt_screen/receipt_screen.scss
 create mode 100644 addons/point_of_sale/static/src/app/screens/scale_screen/scale_screen.scss
 create mode 100644 addons/point_of_sale/static/src/app/screens/screens.scss
 create mode 100644 addons/point_of_sale/static/src/app/screens/ticket_screen/search_bar/search_bar.scss
 create mode 100644 addons/point_of_sale/static/src/app/screens/ticket_screen/ticket_screen.scss
 create mode 100644 addons/point_of_sale/static/src/app/utils/input_popups/number_popup.scss
 create mode 100644 addons/point_of_sale/static/src/app/utils/input_popups/selection_popup.scss
 create mode 100644 addons/point_of_sale/static/src/app/utils/money_details_popup/money_details_popup.scss
 delete mode 100644 addons/point_of_sale/static/src/css/popups/closing_pos_popup.css
 create mode 100644 addons/point_of_sale/static/src/css/popups/closing_pos_popup.scss
 create mode 100644 addons/point_of_sale/static/src/css/popups/popups.scss
 delete mode 100644 addons/point_of_sale/static/src/css/popups/product_info_popup.css
 delete mode 100644 addons/point_of_sale/static/src/css/popups/text_area_popup.css
 delete mode 100644 addons/pos_hr/static/src/css/pos.css
 create mode 100644 addons/pos_hr/static/src/css/pos.scss
 create mode 100644 addons/pos_restaurant/static/src/xml/Screens/SplitBillScreen/SplitBillScreen.scss

diff --git a/addons/point_of_sale/__manifest__.py b/addons/point_of_sale/__manifest__.py
index c275471a0c9..c4069d3f632 100644
--- a/addons/point_of_sale/__manifest__.py
+++ b/addons/point_of_sale/__manifest__.py
@@ -77,16 +77,32 @@
 
         # Main PoS assets, they are loaded in the PoS UI and in the PoS unit tests
         'point_of_sale._assets_pos': [
-            # scss variables and utilities
-            'point_of_sale/static/src/scss/pos_variables_extra.scss',
+            # 'preparation_display' bootstrap customization layer
+            'web/static/src/scss/functions.scss',
+            # 'point_of_sale/static/src/scss/primary_variables.scss', TO DO - CREATE
+
+            # 'webclient' bootstrap customization layer
             ('include', 'web._assets_helpers'),
-            'web/static/src/scss/bootstrap_overridden.scss',
+            ('include', 'web._assets_backend_helpers'),
+
             'web/static/src/scss/pre_variables.scss',
             'web/static/lib/bootstrap/scss/_variables.scss',
-            'web/static/fonts/fonts.scss',
+
+            # Import Bootstrap
+            ('include', 'web._assets_bootstrap_backend'),
+
+            # Icons
             'web/static/src/libs/fontawesome/css/font-awesome.css',
             'web/static/lib/odoo_ui_icons/*',
+            'web/static/src/webclient/icons.scss',
+
+            # scss variables and utilities
+            'point_of_sale/static/src/scss/pos_variables_extra.scss',
+            'web/static/src/scss/bootstrap_overridden.scss',
+            'web/static/fonts/fonts.scss',
             'web/static/src/legacy/scss/fontawesome_overridden.scss',
+
+
             # JS framework
             'web/static/src/boot.js',
             'web/static/src/session.js',
@@ -228,14 +244,6 @@
             'web/static/tests/main.js',
             'web/static/tests/setup.js',
 
-            # These 2 lines below are taken from web.assets_frontend
-            # They're required for the web.frontend_legacy to work properly
-            # It is expected to add other lines coming from the web.assets_frontend
-            # if we need to add more and more legacy stuff that would require other scss or js.
-            ('include', 'web._assets_helpers'),
-            'web/static/src/scss/pre_variables.scss',
-            'web/static/lib/bootstrap/scss/_variables.scss',
-
             ('include', 'web.frontend_legacy'),
             ("include", "web.assets_backend_legacy_lazy"),
             ## END copy of web.tests_assets
diff --git a/addons/point_of_sale/static/src/app/barcode/error_popup/barcode_error_popup.xml b/addons/point_of_sale/static/src/app/barcode/error_popup/barcode_error_popup.xml
index c701a475f02..254fe96acf1 100644
--- a/addons/point_of_sale/static/src/app/barcode/error_popup/barcode_error_popup.xml
+++ b/addons/point_of_sale/static/src/app/barcode/error_popup/barcode_error_popup.xml
@@ -3,20 +3,15 @@
 
     <t t-name="point_of_sale.ErrorBarcodePopup" owl="1">
         <div class="popup popup-barcode">
-            <header class="title drag-handle">
-                <span>Unknown Barcode</span>
-                <br />
-                <span class="barcode">
-                    <t t-esc="props.code" />
-                </span>
+            <header class="title drag-handle modal-header">
+                <h5 class="modal-title">Unknown Barcode: <span class="fst-italic" t-esc="props.code"/>
+                </h5>
             </header>
-            <main class="body">
+            <main class="modal-body">
                 <t t-esc="translatedMessage" />
             </main>
-            <footer class="footer">
-                <div class="button cancel" t-on-click="confirm">
-                    Ok
-                </div>
+            <footer class="footer modal-footer">
+                <button type="button" class="btn btn-primary" t-on-click="confirm">Ok</button>
             </footer>
         </div>
     </t>
diff --git a/addons/point_of_sale/static/src/app/debug/debug_widget.scss b/addons/point_of_sale/static/src/app/debug/debug_widget.scss
index 0fb0537852d..24c7e66a5d6 100644
--- a/addons/point_of_sale/static/src/app/debug/debug_widget.scss
+++ b/addons/point_of_sale/static/src/app/debug/debug_widget.scss
@@ -4,87 +4,6 @@
     right: 10px;
     top: 106px;
     width: 200px;
-    font-size: 10px;
-
-    background: rgba(0, 0, 0, 0.82);
-    color: white;
-    padding-bottom: 10px;
     cursor: move;
     -webkit-transform: translate3d(0, 0, 0);
-}
-
-.debug-widget .toggle {
-    position: absolute;
-    font-size: 16px;
-    cursor: pointer;
-    top: 0px;
-    right: 0px;
-    padding: 10px;
-    padding-right: 15px;
-}
-
-.debug-widget .content {
-    overflow: hidden;
-}
-
-.debug-widget header {
-    position: relative;
-}
-
-.debug-widget h1 {
-    background: black;
-    padding-top: 10px;
-    padding-left: 10px;
-    margin-top: 0;
-    margin-bottom: 0;
-}
-
-.debug-widget .category {
-    background: black;
-    padding-left: 10px;
-    margin: 0px;
-    font-weight: bold;
-    padding-top: 3px;
-    padding-bottom: 3px;
-}
-
-.debug-widget .button {
-    padding: 5px;
-    padding-left: 15px;
-    display: block;
-    cursor: pointer;
-}
-
-.debug-widget .button:active {
-    background: rgba(96, 21, 177, 0.45);
-}
-
-.debug-widget input {
-    margin-left: 10px;
-    margin-top: 7px;
-    padding: 4px;
-    width: 180px;
-    border: none;
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    border-radius: 3px;
-}
-
-.debug-widget .status {
-    padding: 5px;
-    padding-left: 15px;
-    display: block;
-    cursor: default;
-}
-
-.debug-widget .status.on {
-    background-color: #6cd11d;
-}
-
-.debug-widget .event {
-    padding: 5px;
-    padding-left: 15px;
-    display: block;
-    cursor: default;
-    background-color: #1E1E1E;
-}
+};
diff --git a/addons/point_of_sale/static/src/app/debug/debug_widget.xml b/addons/point_of_sale/static/src/app/debug/debug_widget.xml
index b029d5398d2..f8df9c3561c 100644
--- a/addons/point_of_sale/static/src/app/debug/debug_widget.xml
+++ b/addons/point_of_sale/static/src/app/debug/debug_widget.xml
@@ -3,88 +3,100 @@
 
     <t t-name="point_of_sale.DebugWidget" owl="1">
         <Transition visible="props.state.showWidget" name="'o-fade'" leaveDuration="200" t-slot-scope="transition">
-            <div class="debug-widget" t-att-class="transition.className" t-ref="root" t-att-style="style">
+            <div class="debug-widget bg-100 p-2 shadow-lg" t-att-class="transition.className" t-ref="root" t-att-style="style">
                 <header class="drag-handle">
-                    <h1>Debug Window</h1>
+                    <h2>Debug Window</h2>
                 </header>
-                <div class="toggle" t-on-click="() => debug.toggleWidget()" title="Dismiss"
-                    role="img" aria-label="Dismiss"><i class="fa fa-times" /></div>
-                <div class="content">
-                    <p class="category">Electronic Scale</p>
-                    <ul>
-                        <li>
-                            <input t-model="state.weightInput" type="text" class="weight"></input>
-                        </li>
-                        <li class="button set_weight" t-on-click="setWeight">Set Weight</li>
-                        <li class="button reset_weight" t-on-click="resetWeight">Reset</li>
-                    </ul>
+                <div class="toggle position-absolute top-0 end-0 p-2" t-on-click="() => debug.toggleWidget()" title="Dismiss"
+                    role="img" aria-label="Dismiss"><i class="fa fa-fw fa-times" /></div>
+                <div class="content overflow-hidden">
 
-                    <p class="category">Barcode Scanner</p>
-                    <ul>
-                        <li>
-                            <input t-model="state.barcodeInput" type="text" class="ean" t-att-disabled="!barcodeReader" t-attf-placeholder="{{ !barcodeReader ? 'No nomenclature' : '' }}"/>
-                        </li>
-                        <li class="button barcode" t-on-click="barcodeScan">Scan</li>
-                        <li class="button custom_ean" t-on-click="barcodeScanEAN">Scan EAN-13</li>
-                    </ul>
+                    <div class="debug-electronic-scale">
+                        <h5 class="category">Electronic Scale</h5>
+                        <input t-model="state.weightInput" type="text" class="weight form-control"></input>
+                        <ul class="d-flex flex-column align-items-start mb-3">
+                            <li class="set_weight btn btn-link" t-on-click="setWeight">Set Weight</li>
+                            <li class="reset_weight btn btn-link" t-on-click="resetWeight">Reset</li>
+                        </ul>
+                    </div>
 
-                    <p class="category">Orders</p>
-
-                    <ul>
-                        <li class="button" t-on-click="deleteOrders">
-                            Delete Paid Orders
-                        </li>
-                        <li class="button" t-on-click="deleteUnpaidOrders">
-                            Delete Unpaid Orders
-                        </li>
-                        <li t-if="!state.isPaidOrdersReady" class="button"
-                            t-on-click="preparePaidOrders">
-                            Export Paid Orders
-                        </li>
-                        <a t-else="" t-att-download="paidOrdersFilename" t-att-href="paidOrdersURL"
-                        t-on-click="() => { state.isPaidOrdersReady = !state.isPaidOrdersReady }">
-                            <li class="button">
-                                Download Paid Orders
+                    <div class="debug-barcode-scanner">
+                        <h5 class="category">Barcode Scanner</h5>
+                        <ul class="d-flex flex-column align-items-start mb-3">
+                            <li>
+                                <input t-model="state.barcodeInput" type="text" class="ean form-control" t-att-disabled="!barcodeReader" t-attf-placeholder="{{ !barcodeReader ? 'No nomenclature' : '' }}"/>
                             </li>
-                        </a>
-                        <li t-if="!state.isUnpaidOrdersReady" class="button"
-                            t-on-click="prepareUnpaidOrders">
-                            Export Unpaid Orders
-                        </li>
-                        <a t-else="" t-att-download="unpaidOrdersFilename"
-                        t-att-href="unpaidOrdersURL"
-                        t-on-click="() => { state.isUnpaidOrdersReady = !state.isUnpaidOrdersReady }">
-                            <li class="button">
-                                Download Unpaid Orders
-                            </li>
-                        </a>
-                        <li class="button import_orders" style="position:relative">
-                            Import Orders
-                            <input t-on-change="importOrders" type="file"
-                                style="opacity:0;position:absolute;top:0;left:0;right:0;bottom:0;margin:0;cursor:pointer" />
-                        </li>
-                    </ul>
+                            <li class="button btn btn-link barcode" t-on-click="barcodeScan">Scan</li>
+                            <li class="button btn btn-link custom_ean" t-on-click="barcodeScanEAN">Scan EAN-13</li>
+                        </ul>
+                    </div>
 
-                    <p class="category">Hardware Status</p>
-                    <ul>
-                        <li class="status weighing">Weighing</li>
-                        <li class="button display_refresh" t-on-click="refreshDisplay">
-                            Refresh Display
-                        </li>
-                    </ul>
-                    <p class="category">Hardware Events</p>
-                    <ul>
-                        <li class="event" t-ref="open_cashbox">Open Cashbox</li>
-                        <li class="event" t-ref="print_receipt">Print Receipt</li>
-                        <li class="event" t-ref="scale_read">Read Weighing Scale</li>
-                    </ul>
-                    <p class="category">Others</p>
-                    <ul>
-                        <li class="event">
-                            <span>Buffer: </span>
-                            <t t-esc="bufferRepr" />
-                        </li>
-                    </ul>
+                    <div class="debug-orders">
+                        <h5 class="category">Orders</h5>
+                        <ul class="mb-3">
+                            <li class="button btn btn-link" t-on-click="deleteOrders">
+                                Delete Paid Orders
+                            </li>
+                            <li class="button btn btn-link" t-on-click="deleteUnpaidOrders">
+                                Delete Unpaid Orders
+                            </li>
+                            <li t-if="!state.isPaidOrdersReady" class="button btn btn-link"
+                                t-on-click="preparePaidOrders">
+                                Export Paid Orders
+                            </li>
+                            <a t-else="" t-att-download="paidOrdersFilename" t-att-href="paidOrdersURL"
+                            t-on-click="() => { state.isPaidOrdersReady = !state.isPaidOrdersReady }">
+                                <li class="button btn btn-link">
+                                    Download Paid Orders
+                                </li>
+                            </a>
+                            <li t-if="!state.isUnpaidOrdersReady" class="button btn btn-link"
+                                t-on-click="prepareUnpaidOrders">
+                                Export Unpaid Orders
+                            </li>
+                            <a t-else="" t-att-download="unpaidOrdersFilename"
+                            t-att-href="unpaidOrdersURL"
+                            t-on-click="() => { state.isUnpaidOrdersReady = !state.isUnpaidOrdersReady }">
+                                <li class="button btn btn-link">
+                                    Download Unpaid Orders
+                                </li>
+                            </a>
+                            <li class="button btn btn-link import_orders" style="position:relative">
+                                Import Orders
+                                <input t-on-change="importOrders" type="file"
+                                    style="opacity:0;position:absolute;top:0;left:0;right:0;bottom:0;margin:0;cursor:pointer" />
+                            </li>
+                        </ul>
+                    </div>
+
+                    <div class="debug-hardware-status d-flex flex-column">
+                        <h5 class="category">Hardware Status</h5>
+                        <ul class="mb-3">
+                            <li class="status weighing">Weighing</li>
+                            <li class="button btn btn-link display_refresh" t-on-click="refreshDisplay">
+                                Refresh Display
+                            </li>
+                        </ul>
+                    </div>
+
+                    <div class="debug-hardware-events">
+                        <h5 class="category">Hardware Events</h5>
+                        <ul class="mb-3">
+                            <li class="event" t-ref="open_cashbox">Open Cashbox</li>
+                            <li class="event" t-ref="print_receipt">Print Receipt</li>
+                            <li class="event" t-ref="scale_read">Read Weighing Scale</li>
+                        </ul>
+                    </div>
+
+                    <div class="debug-others">
+                        <h5 class="category">Others</h5>
+                        <ul class="mb-3">
+                            <li class="event">
+                                <span>Buffer: </span>
+                                <t t-esc="bufferRepr" />
+                            </li>
+                        </ul>
+                    </div>
                 </div>
             </div>
         </Transition>
diff --git a/addons/point_of_sale/static/src/app/debug/order_import_popup/order_import_popup.xml b/addons/point_of_sale/static/src/app/debug/order_import_popup/order_import_popup.xml
index 3520605b67c..6a01fbfdda3 100644
--- a/addons/point_of_sale/static/src/app/debug/order_import_popup/order_import_popup.xml
+++ b/addons/point_of_sale/static/src/app/debug/order_import_popup/order_import_popup.xml
@@ -3,10 +3,12 @@
 
     <t t-name="point_of_sale.OrderImportPopup" owl="1">
         <div class="popup popup-import">
-            <header class="title drag-handle">
-                <span>Finished Importing Orders</span>
-            </header>
-            <ul class="body">
+            <div class="modal-header">
+                <h4 class="modal-title title drag-handle">
+                    Finished Importing Orders
+                </h4>
+            </div>
+            <main class="body modal-body">
                 <li>Successfully imported <b><t t-esc="props.report.paid or 0" /></b> paid orders</li>
                 <li>Successfully imported <b><t t-esc="props.report.unpaid or 0" /></b> unpaid orders</li>
                 <t t-if="unpaidSkipped">
@@ -23,9 +25,9 @@
                         </ul>
                     </li>
                 </t>
-            </ul>
-            <footer class="footer">
-                <div class="button cancel" t-on-click="confirm">
+            </main>
+            <footer class="footer modal-footer">
+                <div class="button cancel btn btn-lg btn-primary" t-on-click="confirm">
                     <t t-esc="props.confirmText" />
                 </div>
             </footer>
diff --git a/addons/point_of_sale/static/src/app/errors/popups/error_popup.xml b/addons/point_of_sale/static/src/app/errors/popups/error_popup.xml
index 8f313336c9b..6049f7eee87 100644
--- a/addons/point_of_sale/static/src/app/errors/popups/error_popup.xml
+++ b/addons/point_of_sale/static/src/app/errors/popups/error_popup.xml
@@ -3,14 +3,16 @@
 
     <t t-name="point_of_sale.ErrorPopup" owl="1">
             <div class="popup popup-error">
-                <p class="title">
-                    <t t-esc="props.title" />
-                </p>
-                <p class="body">
+                <div class="modal-header">
+                    <h4 class="modal-title title">
+                        <t t-esc="props.title" />
+                    </h4>
+                </div>
+                <main class="modal-body">
                     <t t-esc="props.body" />
-                </p>
-                <div class="footer">
-                    <div class="button cancel" t-on-click="confirm">
+                </main>
+                <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/errors/popups/error_traceback_popup.xml b/addons/point_of_sale/static/src/app/errors/popups/error_traceback_popup.xml
index 411ffcebb20..26c5d3ed0a5 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
@@ -3,17 +3,19 @@
 
     <t t-name="point_of_sale.ErrorTracebackPopup" owl="1">
             <div class="popup popup-error">
-                <header class="title">
-                    <t t-esc="props.title" />
-                </header>
-                <main class="body traceback">
+                <div class="modal-header">
+                    <h4 class="modal-title title">
+                        <t t-esc="props.title" />
+                    </h4>
+                </div>
+                <main class="modal-body body traceback">
                     <t t-esc="props.body" />
                 </main>
-                <footer class="footer">
-                    <div t-if="!props.exitButtonIsShown" class="button cancel" t-on-click="confirm">
+                <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" t-on-click="() => this.pos.closePos()">
+                    <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">
@@ -23,7 +25,7 @@
                                title="Download error traceback"></i>
                         </div>
                     </a>
-                    <div class="button icon email" t-on-click="emailTraceback">
+                    <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>
diff --git a/addons/point_of_sale/static/src/app/errors/popups/offline_error_popup.xml b/addons/point_of_sale/static/src/app/errors/popups/offline_error_popup.xml
index 951f63036e7..27e18207a07 100644
--- a/addons/point_of_sale/static/src/app/errors/popups/offline_error_popup.xml
+++ b/addons/point_of_sale/static/src/app/errors/popups/offline_error_popup.xml
@@ -3,14 +3,16 @@
 
     <t t-name="point_of_sale.OfflineErrorPopup" owl="1">
         <div class="popup offline">
-            <header class="title">
-                <t t-esc="props.title" />
-            </header>
-            <main class="body">
+            <div class="modal-header">
+                <h4 class="modal-title title">
+                    <t t-esc="props.title" />
+                </h4>
+            </div>
+            <main class="modal-body">
                 <t t-esc=" props.body" />
             </main>
-            <footer class="footer footer-flex">
-                <div class="button dont-show-again highlight" t-on-click="confirm">
+            <footer class="footer footer-flex modal-footer">
+                <div class="button dont-show-again highlight btn btn-lg btn-primary w-auto" t-on-click="confirm">
                     <t t-esc="props.confirmText" />
                 </div>
             </footer>
diff --git a/addons/point_of_sale/static/src/app/navbar/back_button/back_button.xml b/addons/point_of_sale/static/src/app/navbar/back_button/back_button.xml
index a595e9cd235..c8c4457f218 100644
--- a/addons/point_of_sale/static/src/app/navbar/back_button/back_button.xml
+++ b/addons/point_of_sale/static/src/app/navbar/back_button/back_button.xml
@@ -3,10 +3,10 @@
 
     <t t-name="point_of_sale.BackButton" owl="1">
         <span
-            class="order-button floor-button"
+            class="order-button floor-button d-flex align-items-center gap-2 px-4 fw-bolder cursor-pointer"
             t-on-click="backToFloorScreen"
         >
-            <i class="fa fa-angle-left" role="img" aria-label="Go Back" title="Go Back" />
+            <i class="fa fa-2x fa-angle-left" role="img" aria-label="Go Back" title="Go Back" />
             <span t-if="!ui.isSmall">BACK</span>
         </span>
     </t>
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
index 4a2e5354767..e69de29bb2d 100644
--- 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
@@ -1,94 +0,0 @@
-.cash-move-popup {
-    top: 20% !important;
-
-    .input-amount {
-        display: flex;
-        flex-flow: row;
-
-        .input-container {
-            padding: 0px;
-            padding-left: 5px;
-            padding-right: 5px;
-            display: flex;
-            align-items: center;
-        }
-    }
-
-    .input-type {
-        height: 40px;
-        line-height: 40px;
-        text-align: center;
-        border-radius: 2px;
-        padding: 0 12px;
-        margin-right: 10px;
-        font-size: 14px;
-        font-weight: bold;
-        cursor: pointer;
-        border: solid 1px rgba(60,60,60,0.1);
-        background: rgba(0,0,0,0.05);
-        white-space: nowrap;
-
-        &.highlight {
-            background: $primary !important;
-            border: solid 1px #64AF8A !important;
-            color: white !important;
-        }
-
-        &.red-highlight {
-            background: #bd2222 !important;
-            border: solid 1px #bd2222 !important;
-            color: white !important;
-        }
-
-        input {
-            width: 100%;
-            min-height: auto;
-            text-align: right;
-            padding-right: 30px;
-        }
-    }
-
-    textarea {
-        resize: none;
-        margin-top: 10px;
-        margin-bottom: 10px;
-    }
-
-    .error-message {
-        color: rgb(197, 52, 0);
-        text-align: left;
-        padding-left: 5px;
-    }
-
-    // FIXME POSREF increased selector specificity to override default style. Should just be "footer"
-    footer.cash-move.cash-move {
-        display: block;
-        width: calc(100% - 36px);
-        padding: 10px 18px 10px 18px;
-
-        .button.confirm {
-            float: left;
-        }
-
-        .button.cancel {
-            margin-right: 0;
-        }
-    }
-
-    .input-container .input-field,
-    .input-container .input-field:focus {
-        position: relative;
-        flex-grow: 1;
-        border: none;
-        outline: none;
-        box-shadow: none;
-        background-color: transparent;
-        padding: 0px;
-        padding-left: 5px;
-        }
-}
-
-.cash-move {
-    display: flex;
-    flex-flow: column;
-}
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 7e3aaf94c3c..d6342ebadf6 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
@@ -3,32 +3,49 @@
 
     <t t-name="point_of_sale.CashMovePopup" owl="1">
         <div class="popup cash-move-popup">
-            <main class="body">
-                <div class="cash-move">
-                    <div class="input-amount">
-                        <span t-on-click="() => this.onClickButton('in')" class="input-type" t-att-class="{ highlight: state.type === 'in' }">
-                            Cash In
-                        </span>
-                        <span t-on-click="() => this.onClickButton('out')" class="input-type" t-att-class="{ 'red-highlight': state.type === 'out' }">
-                            Cash Out
-                        </span>
+            <main class="modal-body">
+                <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' }">
+                                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" >
                             <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"/>
                             <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>
-                    <textarea name="reason" t-model="state.reason" placeholder="Reason"></textarea>
-                    <span t-if="state.errorMessage" class="error-message">
+                    <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>
+                        <label for="reason">Reason</label>
+                    </div>
+                    <span t-if="state.errorMessage" class="error-message alert alert-danger mt-2">
                         <t t-esc="state.errorMessage" />
                     </span>
                 </div>
             </main>
-            <footer class="footer cash-move">
-                <div class="button confirm disable highlight dynamic-size" t-on-click="confirm">
+            <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>
-                <div class="button cancel" t-on-click="cancel">
+                <div class="button cancel btn btn-lg btn-secondary" t-on-click="cancel">
                     Discard
                 </div>
             </footer>
diff --git a/addons/point_of_sale/static/src/app/navbar/cashier_name/cashier_name.xml b/addons/point_of_sale/static/src/app/navbar/cashier_name/cashier_name.xml
index 6429c0cfd6e..5b5573cb613 100644
--- a/addons/point_of_sale/static/src/app/navbar/cashier_name/cashier_name.xml
+++ b/addons/point_of_sale/static/src/app/navbar/cashier_name/cashier_name.xml
@@ -2,8 +2,8 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.CashierName" owl="1">
-        <div t-att-class="cssClass">
-            <span class="cashier-name"><img t-att-src="avatar" t-att-alt="username" class="avatar"/> <span t-if="!ui.isSmall" t-esc="username" class="username"/></span>
+        <div t-att-class="cssClass" class="btn btn-light border-0 rounded-0">
+            <span class="cashier-name d-flex align-items-center gap-1"><img t-att-src="avatar" t-att-alt="username" class="avatar rounded-3"/> <span t-if="!ui.isSmall" t-esc="username" class="username"/></span>
         </div>
     </t>
 
diff --git a/addons/point_of_sale/static/src/app/navbar/closing_popup/closing_popup.js b/addons/point_of_sale/static/src/app/navbar/closing_popup/closing_popup.js
index 0c4e3270a37..cbf21e0ba16 100644
--- a/addons/point_of_sale/static/src/app/navbar/closing_popup/closing_popup.js
+++ b/addons/point_of_sale/static/src/app/navbar/closing_popup/closing_popup.js
@@ -85,7 +85,7 @@ export class ClosePosPopup extends AbstractAwaitablePopup {
         this.hardwareProxy.openCashbox(action);
         const { confirmed, payload } = await this.popup.add(MoneyDetailsPopup, {
             moneyDetails: this.moneyDetails,
-            total: this.manualInputCashCount
+            total: this.manualInputCashCountpayments
                 ? 0
                 : this.state.payments[this.defaultCashDetails.id].counted,
             action: action,
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 3ecbf354d8c..58bcfa40731 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
@@ -3,18 +3,18 @@
 
     <t t-name="point_of_sale.ClosePosPopup" owl="1">
         <div class="popup close-pos-popup">
-            <header>
-                <div class="title">Closing Session</div>
-                <div class="total-orders">
+            <div class="modal-header">
+                <h4 class="modal-title">Closing Session</h4>
+                <div class="total-orders fw-bolder">
                     Total <t t-esc="ordersDetails.quantity"/> orders:
                     <span class="amount" t-esc="env.utils.formatCurrency(ordersDetails.amount)"/>
                 </div>
-            </header>
-            <main class="body">
-                <div class="payment-methods-overview">
-                    <table>
+            </div>
+            <main class="modal-body">
+                <div class="payment-methods-overview overflow-auto">
+                    <table class="text-start">
                         <thead>
-                            <tr>
+                            <tr class="text-dark">
                                 <th>Payment Method</th>
                                 <th>Expected</th>
                                 <th style="width: 20%">Counted</th>
@@ -26,24 +26,24 @@
                                 <tr>
                                     <td t-esc="defaultCashDetails.name"/>
                                     <td t-esc="env.utils.formatCurrency(defaultCashDetails.amount)"/>
-                                    <td class="flex" t-on-input="(event) => this.handleInputChange(defaultCashDetails.id, event)">
-                                        <input class="pos-input" t-ref="closingCashInput" t-on-focus="ev=>ev.target.select()"/>
-                                        <div class="button icon ClosePosPopup" t-on-click="openDetailsPopup">
-                                            <i class="fa fa-money" role="img" title="Open the money details popup"/>
+                                    <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()"/>
+                                        <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': 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">
+                            <tbody class="cash-overview d-flex flex-column mb-2 border-start small text-muted">
                                 <tr>
                                     <td>Opening</td>
                                     <td t-esc="env.utils.formatCurrency(defaultCashDetails.opening)"/>
                                 </tr>
                                 <tr t-foreach="defaultCashDetails.moves" t-as="move" t-key="move_index">
                                     <td>
-                                        <div class="flex">
-                                            <div class="cash-sign" t-esc="move.amount &lt; 0 ? '-' : '+'"/>
+                                        <div class="flex d-flex flex-row">
+                                            <div class="cash-sign me-1" t-esc="move.amount &lt; 0 ? '-' : '+'"/>
                                             <t t-esc="move.name"/>
                                         </div>
                                     </td>
@@ -51,8 +51,8 @@
                                 </tr>
                                 <tr t-if="defaultCashDetails.payment_amount">
                                     <td>
-                                        <div class="flex">
-                                            <div class="cash-sign" t-esc="defaultCashDetails.payment_amount &lt; 0 ? '-' : '+'"/>
+                                        <div class="flex d-flex flex-row">
+                                            <div class="cash-sign me-1" t-esc="defaultCashDetails.payment_amount &lt; 0 ? '-' : '+'"/>
                                             Payments in <t t-esc="defaultCashDetails.name"/>
                                         </div>
                                     </td>
@@ -66,41 +66,43 @@
                                 <td t-esc="env.utils.formatCurrency(pm.amount)"/>
                                 <t t-set="_showDiff" t-value="_getShowDiff(pm)" />
                                 <td t-if="_showDiff" t-on-input="(event) => this.handleInputChange(pm.id, event)">
-                                    <input class="pos-input" t-ref="closingCashInput_{{pm.id}}" t-on-focus="ev=>ev.target.select()"/>
+                                    <input class="pos-input form-control" t-ref="closingCashInput_{{pm.id}}" t-on-focus="ev=>ev.target.select()"/>
                                 </td>
-                                <td t-if="_showDiff" t-esc="env.utils.formatCurrency(state.payments[pm.id].difference)" t-att-class="{'warning': state.payments[pm.id].difference}"/>
+                                <td t-if="_showDiff" t-esc="env.utils.formatCurrency(state.payments[pm.id].difference)" t-att-class="{'warning text-danger fw-bolder': state.payments[pm.id].difference}"/>
                             </tr>
                         </tbody>
                     </table>
                 </div>
-            </main>
-            <main class="body notes">
-                <div class="notes-container">
-                    <div class="opening-notes-container" t-if="openingNotes" >
-                        Opening note
-                        <textarea class="opening-notes">
+                <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" >
+                        <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">
-                        Closing note
-                        <textarea class="closing-notes" placeholder="Add a closing note..." t-model="state.notes"/>
+                    <div class="closing-notes-container d-flex flex-column 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">
-                <div class="button highlight" t-on-click="confirm">Close Session</div>
-                <div class="button" t-att-class="{'disabled': !canCancel()}" t-on-click="cancel">Discard</div>
+            <footer class="footer modal-footer justify-content-between">
                 <!-- Download Sale Details -->
-                <div class="small button icon"
-                    t-on-click="downloadSalesReport"
-                    title="Download a report with all the sales of the current PoS Session">
-                        <div class="daily sale">Daily Sale</div>
-                        <i class="fa fa-download" role="img"/>
+                <div class="modal-footer-left 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">
+                            Daily Sale
+                            <i class="fa fa-download" role="img"/>
+                    </button>
+                    <!-- Print Sale Details -->
+                    <button t-if="hardwareProxy.printer" class="button icon btn btn-lg btn-secondary">
+                        <SaleDetailsButton/>
+                    </button>
                 </div>
-                <!-- Print Sale Details -->
-                <div t-if="hardwareProxy.printer" class="small button icon">
-                    <SaleDetailsButton/>
+                <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>
diff --git a/addons/point_of_sale/static/src/app/navbar/customer_facing_display_button/customer_facing_display_button.xml b/addons/point_of_sale/static/src/app/navbar/customer_facing_display_button/customer_facing_display_button.xml
index 25130c48484..8e061aaee24 100644
--- a/addons/point_of_sale/static/src/app/navbar/customer_facing_display_button/customer_facing_display_button.xml
+++ b/addons/point_of_sale/static/src/app/navbar/customer_facing_display_button/customer_facing_display_button.xml
@@ -2,20 +2,21 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.CustomerFacingDisplayButton" owl="1">
-        <div class="menu-item navbar-button" t-on-click="() => {customerDisplay.connect(); this.displayMessage(message);}">
-            <div t-if="customerDisplay.status === 'warning'" class="js_warning oe_icon oe_orange">
+        <button class="menu-item navbar-button btn btn-light rounded-0 d-flex align-items-center px-3 cursor-pointer" t-on-click="() => {customerDisplay.connect(); this.displayMessage(message);}">
+            <div t-if="customerDisplay.status === 'warning'" class="js_warning oe_icon oe_orange text-warning">
                 <i class="fa fa-fw fa-desktop" role="img" t-attf-aria-label="Customer Screen Warning : {{message}}" t-attf-title="Customer Screen Warning : {{message}}"></i>
             </div>
-            <div t-if="customerDisplay.status === 'failure'" class="js_disconnected oe_icon oe_red">
+            <div t-if="customerDisplay.status === 'failure'" class="js_disconnected oe_icon oe_red text-danger">
                 <i class="fa fa-fw fa-desktop" role="img" t-attf-aria-label="Customer Screen : {{message}}" t-attf-title="Customer Screen : {{message}}"></i>
             </div>
-            <div t-if="customerDisplay.status === 'not_found'" class="js_disconnected oe_icon oe_red">
+            <div t-if="customerDisplay.status === 'not_found'" class="js_disconnected oe_icon oe_red text-danger">
                 <i class="fa fa-fw fa-desktop" role="img" t-attf-aria-label="Customer Screen Not Found : {{message}}" t-attf-title="Customer Screen Not Found : {{message}}"></i>
             </div>
-            <div t-if="customerDisplay.status === 'success'" class="js_connected oe_icon oe_green">
+            <div t-if="customerDisplay.status === 'success'" class="js_connected oe_icon oe_green text-success">
                 <i class="fa fa-fw fa-desktop" role="img" aria-label="Customer Screen Connected" title="Customer Screen Connected"></i>
             </div>
-        </div>
+            <span class="ms-1">Customer Screen</span>
+        </button>
     </t>
 
 </templates>
diff --git a/addons/point_of_sale/static/src/app/navbar/navbar.scss b/addons/point_of_sale/static/src/app/navbar/navbar.scss
new file mode 100644
index 00000000000..4f74d4d4530
--- /dev/null
+++ b/addons/point_of_sale/static/src/app/navbar/navbar.scss
@@ -0,0 +1,31 @@
+.pos-topheader {
+    height: $navbar-height;
+}
+
+.pos-branding{
+    max-width: $left-pane-width;
+}
+
+.status-buttons {
+    > div {
+        display: flex;
+        align-items: center;
+        padding: $o-horizontal-padding * 0.75;
+    }
+
+    .avatar {
+        width: 25px;
+    }
+}
+
+.menu {
+    z-index: $zindex-dropdown;
+}
+
+.sub-menu {
+    top: $navbar-height * 2/3;
+    right: $navbar-height * -1/3 ;
+}
+
+
+
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 b29d3d559d1..32872d66ac4 100644
--- a/addons/point_of_sale/static/src/app/navbar/navbar.xml
+++ b/addons/point_of_sale/static/src/app/navbar/navbar.xml
@@ -2,51 +2,54 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.Navbar" owl="1">
-        <div class="pos-topheader">
+        <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">
-                <img class="pos-logo" t-on-click="() => debug.toggleWidget()" src="/point_of_sale/static/src/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 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>
-            <div class="pos-rightheader">
+            <div class="pos-rightheader d-flex flex-grow-1 h-100">
                 <BackButton t-if="showBackButton()"/>
-                <div class="status-buttons">
+                <div class="status-buttons d-flex flex-grow-1 flex-basis-0 justify-content-end h-100">
                     <CashierName />
                     <SaleDetailsButton t-if="hardwareProxy.printer" isHeaderButton="true"/>
                     <ProxyStatus t-if="pos.config.use_proxy" />
                     <CustomerFacingDisplayButton t-if="customerFacingDisplayButtonIsShown" />
                     <SyncNotification />
                 </div>
-                <div t-if="isBurgerMenuClosed()" class="navbar-button menu-button" t-on-click="openMenu">
+                <div t-if="isBurgerMenuClosed()" class="navbar-button menu-button btn btn-light rounded-0 d-flex align-items-center px-3 cursor-pointer" t-on-click="openMenu">
                     <i class="fa fa-bars" aria-hidden="true"></i>
                 </div>
-                <div t-else="" class="navbar-button menu menu-button" t-on-click="closeMenu">
+                <div t-else="" class="navbar-button menu menu-button btn btn-light rounded-0 d-flex align-items-center px-3 cursor-pointer" t-on-click="closeMenu">
                     <ul>
-                        <li class="menu-item">
+                        <li class="menu-item position-relative d-flex">
                             <i class="fa fa-bars" aria-hidden="true"></i>
-                            <ul class="sub-menu">
-                                <li class="menu-item navbar-button ticket-button" t-on-click="onTicketButtonClick">
-                                    <div class="with-badge" t-att-badge="orderCount">
-                                        <span>Orders</span>
-                                    </div>
+                            <ul class="dropdown-menu sub-menu position-absolute d-flex flex-column align-items-stretch w-100 bg-white shadow-lg z-index-1">
+                                <li class="ticket-button" t-on-click="onTicketButtonClick">
+                                    <a class="dropdown-item with-badge py-2">
+                                        Orders
+                                        <span class="badge text-bg-info rounded-pill py-1 ms-2" t-esc="orderCount"/>
+                                    </a>
                                 </li>
                                 <li t-if="showCashMoveButton" class="menu-item navbar-button" t-on-click="onCashMoveButtonClick">
-                                    <span>Cash In/Out</span>
+                                    <a class="dropdown-item py-2">
+                                        Cash In/Out
+                                    </a>
                                 </li>
                                 <CustomerFacingDisplayButton t-if="CustomerFacingDisplayButtonIsShown"/>
-                                <li class="menu-item navbar-button backend-button" t-on-click="() => pos.closePos()">
-                                    <span>
+                                <li class="backend-button" t-on-click="() => pos.closePos()">
+                                    <a class="dropdown-item py-2">
                                         Backend
-                                    </span>
+                                    </a>
                                 </li>
-                                <li class="menu-item navbar-button close-button" t-on-click="closeSession">
-                                    <span>
+                                <li class="close-button" t-on-click="closeSession">
+                                    <a class="dropdown-item py-2">
                                         Close Session
-                                    </span>
+                                    </a>
                                 </li>
                                 <li t-if="showToggleProductView" class="menu-item navbar-button close-button" t-on-click="toggleProductView">
-                                    <span>
+                                    <a class="dropdown-item py-2">
                                         Switch Product View
-                                    </span>
+                                    </a>
                                 </li>
                                 <li t-if="this.env.debug" t-on-click="() => debug.toggleWidget()" class="menu-item navbar-button">
                                     <span>Debug Window</span>
diff --git a/addons/point_of_sale/static/src/app/navbar/proxy_status/proxy_status.xml b/addons/point_of_sale/static/src/app/navbar/proxy_status/proxy_status.xml
index 8027c534d11..842b1ec0dfc 100644
--- a/addons/point_of_sale/static/src/app/navbar/proxy_status/proxy_status.xml
+++ b/addons/point_of_sale/static/src/app/navbar/proxy_status/proxy_status.xml
@@ -2,11 +2,11 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.ProxyStatus" owl="1">
-        <div class="oe_status js_proxy" t-on-click="() => this.pos.connectToProxy()">
+        <button class="oe_status js_proxy btn btn-light" t-on-click="() => this.pos.connectToProxy()">
             <span t-if="this.message and !ui.isSmall" class="js_msg">
                 <t t-esc="this.message" />
             </span>
-            <span t-if="connectionInfo.status === 'connected' and !this.message" class="js_connected oe_green">
+            <span t-if="connectionInfo.status === 'connected' and !this.message" class="js_connected text-success">
                 <i class="fa fa-fw fa-sitemap" role="img" aria-label="Proxy Connected"
                    title="Proxy Connected"></i>
             </span>
@@ -14,15 +14,15 @@
                 <i class="fa fa-fw fa-spin fa-circle-o-notch" role="img" aria-label="Connecting to Proxy"
                    title="Connecting to Proxy"></i>
             </span>
-            <span t-elif="connectionInfo.status === 'disconnected'" class="js_disconnected oe_red">
+            <span t-elif="connectionInfo.status === 'disconnected'" class="js_disconnected text-danger">
                 <i class="fa fa-fw fa-sitemap" role="img" aria-label="Proxy Disconnected"
                    title="Proxy Disconnected"></i>
             </span>
-            <span t-elif="connectionInfo.status === 'warning' or this.message" class="js_warning oe_orange">
+            <span t-elif="connectionInfo.status === 'warning' or this.message" class="js_warning text-warning">
                 <i class="fa fa-fw fa-sitemap" role="img" aria-label="Proxy Warning"
                    title="Proxy Warning"></i>
             </span>
-        </div>
+        </button>
     </t>
 
 </templates>
diff --git a/addons/point_of_sale/static/src/app/navbar/sale_details_button/sale_details_button.xml b/addons/point_of_sale/static/src/app/navbar/sale_details_button/sale_details_button.xml
index fa6bdcbd41f..e76d4c9eaf8 100644
--- a/addons/point_of_sale/static/src/app/navbar/sale_details_button/sale_details_button.xml
+++ b/addons/point_of_sale/static/src/app/navbar/sale_details_button/sale_details_button.xml
@@ -2,8 +2,8 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.SaleDetailsButton" owl="1">
-        <div t-att-class="{'oe_status': props.isHeaderButton }" t-on-click="onClick">
-            <div class="js_connected oe_icon"
+        <div t-att-class="{'oe_status cursor-pointer': props.isHeaderButton }" t-on-click="onClick">
+            <div class="js_connected oe_icon text-white"
                 title="Print a report with all the sales of the current PoS Session">
                 <i class="fa fa-fw fa-print" role="img" aria-label="Print"></i>
             </div>
diff --git a/addons/point_of_sale/static/src/app/navbar/sync_notification/sync_notification.xml b/addons/point_of_sale/static/src/app/navbar/sync_notification/sync_notification.xml
index afd904c15d3..d0552015b21 100644
--- a/addons/point_of_sale/static/src/app/navbar/sync_notification/sync_notification.xml
+++ b/addons/point_of_sale/static/src/app/navbar/sync_notification/sync_notification.xml
@@ -2,24 +2,24 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.SyncNotification" owl="1">
-        <div class="oe_status" t-on-click="onClick">
+        <div class="oe_status btn btn-light rounded-0" t-on-click="onClick">
             <span t-if="sync.pending" class="js_msg">
                 <t t-esc="sync.pending" />
                 <span> </span>
             </span>
-            <div t-if="sync.status === 'connected'" class="js_connected oe_icon oe_green">
+            <div t-if="sync.status === 'connected'" class="js_connected oe_icon text-success">
                 <i class="fa fa-fw fa-wifi" role="img" aria-label="Synchronisation Connected"
                    title="Synchronisation Connected"></i>
             </div>
-            <div t-if="sync.status === 'connecting'" class="js_connecting oe_icon">
+            <div t-if="sync.status === 'connecting'" class="js_connecting oe_icon text-white">
                 <i class="fa fa-fw fa-spin fa-circle-o-notch" role="img"
                    aria-label="Synchronisation Connecting" title="Synchronisation Connecting"></i>
             </div>
-            <div t-if="sync.status === 'disconnected'" class="js_disconnected oe_icon oe_orange">
+            <div t-if="sync.status === 'disconnected'" class="js_disconnected oe_icon text-warning">
                 <i class="fa fa-fw fa-wifi" role="img" aria-label="Synchronisation Disconnected"
                    title="Synchronisation Disconnected"></i>
             </div>
-            <div t-if="sync.status === 'error'" class="js_error oe_icon oe_red">
+            <div t-if="sync.status === 'error'" class="js_error oe_icon text-danger">
                 <i class="fa fa-fw fa-warning" role="img" aria-label="Synchronisation Error"
                    title="Synchronisation Error"></i>
             </div>
diff --git a/addons/point_of_sale/static/src/app/notification/notification.scss b/addons/point_of_sale/static/src/app/notification/notification.scss
deleted file mode 100644
index 90f050980b8..00000000000
--- a/addons/point_of_sale/static/src/app/notification/notification.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.o_pos_notification_manager {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    flex-direction: column;
-    padding: 2rem;
-    justify-content: end;
-    align-items: center;
-    pointer-events: none;
-}
-
-.o_notification {
-    pointer-events: auto;
-    width: 350px;
-    background-color: #333333AA;
-    color: #fff;
-    text-align: center;
-    border-radius: 2px;
-    padding: 16px;
-    margin: .5rem;
-    font-size: 1rem;
-
-    span {
-        white-space: pre-line;
-    }
-}
diff --git a/addons/point_of_sale/static/src/app/notification/notification.xml b/addons/point_of_sale/static/src/app/notification/notification.xml
index f76d88f9d6f..211528468b7 100644
--- a/addons/point_of_sale/static/src/app/notification/notification.xml
+++ b/addons/point_of_sale/static/src/app/notification/notification.xml
@@ -2,13 +2,13 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.Notification" owl="1">
-        <div class="o_notification" t-att-class="props.className" t-on-click="props.close">
+        <div class="o_notification o-fade o-fade-enter-active p-3 m-2 text-bg-dark bg-opacity-75 text-center pe-none" t-att-class="props.className" t-on-click="props.close">
             <span t-esc="props.message"/>
         </div>
     </t>
 
     <t t-name="point_of_sale.NotificationContainer" owl="1">
-        <div class="o_pos_notification_manager">
+        <div class="o_pos_notification_manager fixed-bottom d-flex flex-column align-items-center justify-content-end p-4 pe-none">
             <t t-foreach="props.notifications" t-as="notification" t-key="notification">
                 <Transition name="'o-fade'" visible="notification_value.visible" leaveDuration="leaveDuration" t-slot-scope="transition" onLeave="notification_value.delete">
                     <Notification message="notification_value.message" close="notification_value.close" className="transition.className"/>
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
new file mode 100644
index 00000000000..f4ccd7a959b
--- /dev/null
+++ b/addons/point_of_sale/static/src/app/popup/popup_controller.scss
@@ -0,0 +1,36 @@
+/* --- 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;
+    padding: 20px;
+    box-shadow: 0px 10px 20px black;
+    border-radius: 3px;
+    max-width: 600px;
+    max-height: 400px;
+    margin-top: -200px;
+    margin-left: -300px;
+    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 20de6af7a9c..0d78359a609 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,7 @@
     <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">
+                <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
new file mode 100644
index 00000000000..b15323b9d3a
--- /dev/null
+++ b/addons/point_of_sale/static/src/app/pos_app.scss
@@ -0,0 +1,97 @@
+.pos {
+    background: $gray-900;
+    --btn-height-size: 54px;
+    direction: ltr;
+    padding: 0;
+    margin: 0;
+    background-color: #f0eeee;
+    color: $gray-700;
+    /* Some elements inside .pos are allowed to be moved/resized. When
+     * this 'move/resize' event is performed in touch devices, .pos
+     * element also tries to scroll (as the default action of touchstart+
+     * touchmove events).
+     * Position is fixed to prevent the movement of .pos element during
+     * the described touch events.
+     */
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    text-shadow: none;
+    overflow: hidden;
+}
+
+
+/*  ********* Generic element styling  ********* */
+
+.pos a {
+    text-decoration: none;
+    color: $gray-700;
+}
+
+.pos ul, .pos ol {
+    padding: 0;
+    margin: 0;
+}
+.pos li {
+    list-style-type: none;
+}
+
+/* --- Generic Restyling and Resets --- */
+
+html {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    font-family: sans-serif;
+}
+
+table {
+    border-spacing: 0px;
+    border-collapse: collapse;
+}
+td {
+    padding: 0px;
+}
+
+.oe_hidden{
+    display: none !important;
+}
+.oe_invisible{
+    visibility: hidden !important;
+}
+.clearfix:after {
+    content:" ";
+    display: block;
+    visibility: hidden;
+    line-height: 0;
+    height: 0;
+    clear: both;
+}
+
+
+.pos input::-webkit-outer-spin-button,
+.pos 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 1bfe71f3d37..b7e1b3ff3b7 100644
--- a/addons/point_of_sale/static/src/app/pos_app.xml
+++ b/addons/point_of_sale/static/src/app/pos_app.xml
@@ -2,12 +2,12 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.Chrome" owl="1">
-        <div class="pos" t-att-class="{ 'big-scrollbars': pos.hasBigScrollBars }">
+        <div class="pos">
             <div class="pos-receipt-print"></div>
             <Navbar />
-            <div class="pos-content">
-                <div class="window">
-                    <div class="subwindow">
+            <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) -->
diff --git a/addons/point_of_sale/static/src/app/screens/partner_list/partner_editor/partner_editor.scss b/addons/point_of_sale/static/src/app/screens/partner_list/partner_editor/partner_editor.scss
new file mode 100644
index 00000000000..6ed28dcf7e1
--- /dev/null
+++ b/addons/point_of_sale/static/src/app/screens/partner_list/partner_editor/partner_editor.scss
@@ -0,0 +1,23 @@
+.partner-picture {
+    height: 64px;
+    width: 64px;
+    & > img {
+        position: absolute;
+        top: -9999px;
+        bottom: -9999px;
+        right: -9999px;
+        left: -9999px;
+        max-height: 64px;
+        margin: auto;
+    }
+    .image-uploader {
+        position: absolute;
+        z-index: 1000;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        opacity: 0;
+        cursor: pointer;
+    }
+}
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 27d45d02f29..c25b2a14df9 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,36 @@
 <?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">
-            <div class="partner-picture">
-                <t t-if="partnerImageUrl">
-                    <img 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 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" />
+                </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" name="name" placeholder="Name" t-model="changes.name" />
-            <div class="partner-details-box clearfix">
-                <div class="partner-details-left">
+            <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">
-                        <span class="label">Street</span>
-                        <input class="detail" name="street" t-att-class="{'border-red': missingFields.includes('street')}" t-model="changes.street" placeholder="Street" />
+                        <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">
-                        <span class="label">City</span>
-                        <input class="detail" name="city" t-att-class="{'border-red': missingFields.includes('city')}" t-model="changes.city" placeholder="City" />
+                        <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">
-                        <span class="label">Postcode</span>
-                        <input class="detail" name="zip" t-att-class="{'border-red': missingFields.includes('zip')}" t-model="changes.zip" placeholder="ZIP" />
+                        <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" t-if="pos.states.some((state) => state.country_id[0] == changes.country_id)">
-                        <span class="label">State</span>
-                        <select class="detail" name="state_id" t-att-class="{'border-red': missingFields.includes('state_id')}" t-model="changes.state_id">
+                    <div class="partner-detail">
+                        <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>
                             <t t-foreach="pos.states" t-as="state" t-key="state.id">
                                 <option t-if="changes.country_id == state.country_id[0]" t-att-value="state.id">
@@ -38,8 +40,8 @@
                         </select>
                     </div>
                     <div class="partner-detail">
-                        <span class="label">Country</span>
-                        <select class="detail" name="country_id" t-att-class="{'border-red': missingFields.includes('country_id')}" t-model="changes.country_id">
+                        <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>
                             <t t-foreach="pos.countries" t-as="country" t-key="country.id">
                                 <option t-att-value="country.id">
@@ -49,10 +51,10 @@
                         </select>
                     </div>
                 </div>
-                <div class="partner-details-right">
+                <div class="partner-details-right d-flex flex-column gap-3 w-100">
                     <div class="partner-detail">
-                        <span class="label">Language</span>
-                        <select class="detail" name="lang" t-att-class="{'border-red': missingFields.includes('lang')}" t-model="changes.lang">
+                        <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">
                                 <option t-att-value="lang.code" t-att-selected="changes.lang ? ((lang.code === changes.lang) ? true : undefined) : lang.code === pos.user.lang? true : undefined">
                                     <t t-esc="lang.name" />
@@ -61,30 +63,32 @@
                         </select>
                     </div>
                     <div class="partner-detail">
-                        <span class="label">Email</span>
-                        <input class="detail" name="email" t-att-class="{'border-red': missingFields.includes('email')}" type="email" t-model="changes.email" />
+                        <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">
-                        <span class="label">Phone</span>
-                        <input class="detail" name="phone" t-att-class="{'border-red': missingFields.includes('phone')}" type="tel" t-model="changes.phone" />
+                        <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">
-                        <span class="label">Mobile</span>
-                        <input class="detail" name="mobile" t-att-class="{'border-red': missingFields.includes('mobile')}" type="tel" t-model="changes.mobile" />
+                        <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">
-                        <span class="label">Barcode</span>
-                        <input class="detail barcode" name="barcode" t-model="changes.barcode" t-att-class="{'border-red': missingFields.includes('barcode')}" />
+                        <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">
-                        <span class="label">Tax ID</span>
-                        <input class="detail vat" name="vat" t-model="changes.vat" t-att-class="{'border-red': missingFields.includes('vat')}" />
+                        <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">
-                        <span class="label">Pricelist</span>
-                        <select class="detail" name="property_product_pricelist" t-att-class="{'border-red': missingFields.includes('property_product_pricelist')}" t-model="changes.property_product_pricelist">
+                        <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">
-                                <option t-att-value="pricelist.id" t-att-selected="changes.property_product_pricelist ? (pricelist.id === changes.property_product_pricelist[0] ? true : undefined) : pricelist.id === pos.default_pricelist.id ? true : undefined">
+                                <option t-att-value="pricelist.id" t-att-selected="props.partner.property_product_pricelist ? (pricelist.id === props.partner.property_product_pricelist[0] ? true : undefined) : pricelist.id === pos.default_pricelist.id ? true : undefined">
                                     <t t-esc="pricelist.display_name" />
                                 </option>
                             </t>
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 30e348ee52f..711d15625d8 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" : "";
+        return this._isPartnerSelected ? "highlight text-bg-primary" : "";
     }
     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
new file mode 100644
index 00000000000..56541204168
--- /dev/null
+++ b/addons/point_of_sale/static/src/app/screens/partner_list/partner_line/partner_line.scss
@@ -0,0 +1,35 @@
+@include media-breakpoint-down(lg) {
+
+    .partner-line {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        padding: 12px 24px;
+        border-bottom: 1px solid $o-gray-300;
+
+        td {
+            border: 0;
+            flex-basis: 100%;
+            padding: 5px;
+            background-color: transparent;
+        }
+    }
+
+    .partner-line-balance{
+        order: 3;
+    }
+    .partner-line .pos-right-align{
+        text-align: left ;
+    }
+    .partner-line-email {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+    .edit-partner-button-cell {
+        order: 4;
+    }
+    .partner-line-last-column-placeholder {
+        display: none;
+    }
+}
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 c2317bf0c60..e7f5bf2f466 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
@@ -2,19 +2,19 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.PartnerLine" owl="1">
-        <tr t-attf-class="partner-line {{highlight}}" t-att-data-id="props.partner.id"
+        <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>
                     <t t-esc="props.partner.name or ''" />
                 </div>
-                <div class="company-field">
+                <div class="company-field text-bg-muted">
                     <t t-esc="props.partner.parent_name or ''" />
                 </div>
-                <div t-if="_isPartnerSelected" class="unselect-tag">
-                    <i class="fa fa-times"></i>
+                <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>
-                </div>
+                </button>
             </td>
             <td>
                 <div class="partner-line-adress" t-if="props.partner.address">
@@ -23,22 +23,22 @@
             </td>
             <td class="partner-line-email" >
                 <div t-if="props.partner.phone">
-                    <i class="fa fa-fw fa-phone"/><t t-esc="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"/><t t-esc="props.partner.mobile"/>
+                    <i class="fa fa-fw fa-mobile fa-lg me-2"/><t t-esc="props.partner.mobile"/>
                 </div>
                 <div t-if="props.partner.email" class="email-field">
-                    <i class="fa fa-fw fa-paper-plane-o"/><t t-esc="props.partner.email" />
+                    <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" t-on-click.stop="() => props.onClickEdit(props.partner)">DETAILS</button>
-                <div t-if="_isPartnerSelected" class="unselect-tag-mobile">
+                <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">
                     <i class="fa fa-times"></i>
                     <span> unselect </span>
-                </div>
+                </button>
             </td>
             <td class="partner-line-last-column-placeholder oe_invisible"></td>
         </tr>
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
new file mode 100644
index 00000000000..38084b0c722
--- /dev/null
+++ b/addons/point_of_sale/static/src/app/screens/partner_list/partner_list.scss
@@ -0,0 +1,33 @@
+.partner-list th.partner-line-last-column-placeholder,
+.partner-list td.partner-line-last-column-placeholder {
+    padding: 0;
+}
+.partnerlist-screen {
+    tr {
+        &.partner-line {
+            &:hover {
+                cursor: pointer;
+                background: rgba($primary, 0.2);
+            }
+            &:active {
+                background-color: $primary;
+                color: white;
+            }
+        }
+    }
+}
+
+@include media-breakpoint-down(lg) {
+
+    .table {
+        border: transparent;
+    }
+    .partner-list {
+        thead {
+            display: none;
+        }
+        td {
+            padding: 0;
+        }
+    }
+}
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 c9d46e6914e..9af8cdf4bf9 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
@@ -4,58 +4,62 @@
     <t t-name="point_of_sale.PartnerListScreen" owl="1">
         <div class="partnerlist-screen screen">
             <div class="screen-content">
-                <div class="top-content">
-                    <div class="button highlight" t-if="state.detailIsShown" t-on-click="() => this.partnerEditor.save()">
+                <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>
-                    <div t-if="!state.detailIsShown" class="button new-customer highlight" role="img" aria-label="Add a customer"
+                    <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>
-                    </div>
-                    <div class="button back" t-on-click="back">
+                    </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">
-                    <div t-if="state.detailIsShown and state.editModeProps.partner.id" class="button more-info" t-on-click="goToOrders">
-                        <span> Orders</span>
-                    </div>
-                    <a t-if="state.detailIsShown &amp;&amp; state.editModeProps.partner.id" class="button more-info" t-att-href="partnerLink" target="_blank"> More info</a>
-                    <div class="search-bar-container sb-partner" t-if="!state.detailIsShown">
-                        <div class="pos-search-bar">
-                            <i class="fa fa-search" t-on-click="_onPressEnterKey"/>
-                            <input t-ref="search-word-input-partner" placeholder="Search Customers..." size="1" t-on-keyup="updatePartnerList" />
-                            <i class="fa fa-times" t-on-click="_clearSearch"/>
+                    <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>
                         </div>
                     </div>
-                    </div>
                 </div>
-                <section class="full-content">
+                <section class="full-content position-absolute start-0 end-0 bottom-0 overflow-auto">
                     <div class="partner-window">
-                        <section class="subwindow collapsed">
-                            <div class="subwindow-container collapsed">
+                        <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">
+                            <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 class="partner-list table table-striped w-100">
                                         <thead>
                                             <tr>
-                                                <th>Name</th>
-                                                <th>Address</th>
-                                                <th class="partner-line-email">Contact</th>
-                                                <th class="pos-right-align" t-if="isBalanceDisplayed">Balance</th>
-                                                <th class="partner-line-details"></th>
-                                                <th class="partner-line-last-column-placeholder oe_invisible"></th>
+                                                <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">
@@ -70,8 +74,8 @@
                                             </t>
                                         </tbody>
                                     </table>
-                                    <div t-if="state.query" class="search-more-button">
-                                        <div class="button" t-on-click="_onPressEnterKey">Search more</div>
+                                    <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>
diff --git a/addons/point_of_sale/static/src/app/screens/payment_screen/numpad/numpad.scss b/addons/point_of_sale/static/src/app/screens/payment_screen/numpad/numpad.scss
new file mode 100644
index 00000000000..2cea5999814
--- /dev/null
+++ b/addons/point_of_sale/static/src/app/screens/payment_screen/numpad/numpad.scss
@@ -0,0 +1,15 @@
+.payment-numpad .numpad button {
+    font-size: clamp(map-get($font-sizes, 6), 3vw, 36px);
+}
+
+.payment-numpad .numpad button:nth-child(16) img {
+    width: 35%;
+    max-width: 64px;
+    height: auto;
+}
+
+@include media-breakpoint-down(md) {
+    .payment-numpad .numpad button:nth-child(16) img {
+        max-width: 48px;
+    }
+}
diff --git a/addons/point_of_sale/static/src/app/screens/payment_screen/numpad/numpad.xml b/addons/point_of_sale/static/src/app/screens/payment_screen/numpad/numpad.xml
index 40e9cb75174..81fc4a42cbf 100644
--- a/addons/point_of_sale/static/src/app/screens/payment_screen/numpad/numpad.xml
+++ b/addons/point_of_sale/static/src/app/screens/payment_screen/numpad/numpad.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.PaymentScreenNumpad" owl="1">
-        <div class="numpad">
+        <div class="numpad d-grid text-center flex-grow-1 h-100 w-100">
             <PSNumpadInputButton value="'1'" />
             <PSNumpadInputButton value="'2'" />
             <PSNumpadInputButton value="'3'" />
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 3b6c0b1f419..726dfb7ca65 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,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.PSNumpadInputButton" owl="1">
-        <button t-attf-class="{{ _class }}"
+        <button t-attf-class="{{ _class }} btn btn-secondary w-100 rounded-0 py-3"
                 t-on-click="() => this.numberBuffer.sendKey(props.value)">
             <t t-slot="default">
                 <t t-if="props.text">
diff --git a/addons/point_of_sale/static/src/app/screens/payment_screen/payment_lines/payment_lines.scss b/addons/point_of_sale/static/src/app/screens/payment_screen/payment_lines/payment_lines.scss
new file mode 100644
index 00000000000..6619c1a246c
--- /dev/null
+++ b/addons/point_of_sale/static/src/app/screens/payment_screen/payment_lines/payment_lines.scss
@@ -0,0 +1,29 @@
+.paymentlines .electronic_payment {
+    background: $gray-200;
+    border-collapse: unset;
+    font-size: 16px;
+    padding-right: 0;
+}
+
+.paymentline .electronic_status {
+    flex-grow: 1;
+    margin-left: 10px;
+    margin-right: 10px;
+    /* make the name of the payment line to be truncated with ellipsis */
+    white-space: nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    padding: map-get($spacers, 3);
+}
+
+.paymentlines .electronic_payment div:first-child {
+    flex-grow: 2;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+.paymentlines .electronic_payment div:last-child {
+    flex-grow: 1;
+    text-align: center;
+    padding: map-get($spacers, 3);
+}
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 93785a63c95..8c3a85d8d68 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
@@ -2,15 +2,15 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.PaymentScreenPaymentLines" owl="1">
-            <div class="paymentlines">
-                <p class="title-category">Summary</p>
+            <div class="paymentlines d-flex flex-column">
+                <p class="title-category py-1 px-3 m-0 text-bg-300 fw-bolder">Summary</p>
                 <t t-foreach="props.paymentLines" t-as="line" t-key="line.cid">
                     <t t-if="line.selected">
-                        <div class="paymentline selected"
+                        <div class="paymentline selected d-flex align-items-center bg-200"
                             t-att-class="selectedLineClass(line)">
-                            <div class="payment-infos" t-on-click="() => this.selectLine(line)">
+                            <div class="payment-infos d-flex align-items-center justify-content-between flex-grow-1 px-3 py-4 my-2 text-truncate cursor-pointer" t-on-click="() => this.selectLine(line)">
                                  <span class="payment-name"><t t-esc="line.payment_method.name"/></span>
-                                 <div class="payment-amount">
+                                 <div class="payment-amount px-3">
                                     <t t-if="line and line.payment_status and ['done', 'waitingCard', 'waiting', 'reversing', 'reversed'].includes(line.payment_status)">
                                             <t t-esc="env.utils.formatCurrency(line.get_amount(), false)" />
                                     </t>
@@ -21,11 +21,11 @@
                             </div>
                             
                             <t t-if="!line.payment_status or !['done', 'reversed', 'waitingCard', 'waitingCapture'].includes(line.payment_status)">
-                                <div class="delete-button"
+                                <button class="delete-button btn btn-link mx-2 px-3"
                                     t-on-click="() => this.props.deleteLine(line.cid)"
                                     aria-label="Delete" title="Delete">
-                                    <i class="fa fa-times-circle" />
-                                </div>
+                                    <i class="fa fa-2x fa-times-circle" />
+                                </button>
                             </t>
                         </div>
                         <t t-if="line and line.payment_status">
@@ -101,11 +101,11 @@
                         </t>
                     </t>
                     <t t-else="">
-                        <div class="paymentline"
+                        <div class="paymentline d-flex align-items-center bg-view"
                             t-att-class="unselectedLineClass(line)">
-                             <div class="payment-infos" t-on-click="() => this.selectLine(line)">
+                             <div class="payment-infos d-flex align-items-center justify-content-between flex-grow-1 px-3 py-4 my-2 text-truncate cursor-pointer" t-on-click="() => this.selectLine(line)">
                                  <t t-esc="line.payment_method.name" />
-                                 <div class="payment-amount">
+                                 <div class="payment-amount px-3">
                                     <t t-if="line and line.payment_status and ['done', 'waitingCard', 'waiting', 'reversing', 'reversed'].includes(line.payment_status)">
                                             <t t-esc="env.utils.formatCurrency(line.get_amount(), false)" />
                                     </t>
@@ -115,10 +115,10 @@
                                 </div>
                              </div>
                             <t t-if="!line.payment_status or !['done', 'reversed'].includes(line.payment_status)">
-                                <div class="delete-button"
+                                <div class="delete-button delete-button btn btn-link mx-2 px-3"
                                     t-on-click="() => this.props.deleteLine(line.cid)"
                                     aria-label="Delete" title="Delete">
-                                    <i class="fa fa-times-circle" />
+                                    <i class="fa fa-2x fa-times-circle" />
                                 </div>
                             </t>
                         </div>
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
new file mode 100644
index 00000000000..82241f09f37
--- /dev/null
+++ b/addons/point_of_sale/static/src/app/screens/payment_screen/payment_screen.scss
@@ -0,0 +1,52 @@
+.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 44423acd57e..37a059cd0a8 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
@@ -3,32 +3,33 @@
 
     <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">
+            <div class="screen-content d-flex flex-column h-100">
                 <t t-if="!ui.isSmall">
-                    <div class="top-content">
-                        <div class="button back"
-                              t-on-click="() => pos.showScreen('ProductScreen')">
-                            <i class="fa fa-angle-double-left fa-fw"></i>
+                    <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"><h1>Payment</h1></div>
+                        <div class="top-content-center flex-grow-1">
+                            <h2 class="mb-0">Payment</h2>
+                        </div>
                     </div>
                 </t>
-                <div class="main-content">
-                    <div class="left-content">
+                <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">
+                            <section class="paymentlines-container px-4 pt-0">
                                 <PaymentScreenStatus order="currentOrder" />
                             </section>
                         </t>
-                        <div class="paymentmethods-container">
-                            <div class="paymentmethods">
-                                <p class="title-category">Payment method</p>
+                        <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"
+                                    <div class="button paymentmethod btn btn-light rounded-0 fw-bolder"
                                         t-on-click="() => this.addNewPaymentLine(paymentMethod)">
-                                        <div class="payment-method-display">
+                                        <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>
@@ -45,30 +46,30 @@
                                 selectLine.bind="selectPaymentLine"
                                 updateSelectedPaymentline.bind="updateSelectedPaymentline"/>
                         </div>
-                        <div t-if="!ui.isSmall" class="button next validation" t-att-class="{ highlight: currentOrder.is_paid() and currentOrder._isValidEmptyOrder() }"
+                        <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">
+                            <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" t-if="!ui.isSmall">
-                        <section class="paymentlines-container">
+                    <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">
-                            <section class="payment-numpad">
+                        <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">
-                            <div class="partner-button">
-                                <div class="button" t-att-class="{ highlight: currentOrder.get_partner() }" t-on-click="() => this.selectPartner(false, [])">
-                                    <i class="fa fa-user" role="img" title="Customer" />
+                        <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">
@@ -80,25 +81,25 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="payment-controls">
-                                <div class="button js_invoice"
-                                    t-att-class="{ highlight: currentOrder.is_to_invoice() }"
+                            <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" /> Invoice
-                                </div>
-                                <div t-if="pos.config.iface_tipproduct and pos.config.tip_product_id" class="button js_tip"
-                                    t-att-class="{ highlight: currentOrder.get_tip() }"
+                                    <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" /> Tip <t t-if="currentOrder.get_tip() != 0">(<t t-esc="env.utils.formatCurrency(currentOrder.get_tip())"/>)</t>
-                                </div>
-                                <div t-if="pos.config.iface_cashdrawer" class="button js_cashdrawer"
+                                    <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" /> Open Cashbox
-                                </div>
-                                <div t-if="pos.config.ship_later" class="button"
-                                        t-att-class="{ highlight: currentOrder.getShippingDate() }"
+                                    <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" /> Ship Later
+                                    <i class="fa fa-clock-o me-2" /> Ship Later
                                     <span t-if="currentOrder.getShippingDate()">
                                         (<t t-esc="currentOrder.getShippingDate()"/>)
                                     </span>
@@ -108,8 +109,8 @@
                     </div>
                 </div>
                 <t t-if="ui.isSmall">
-                    <div class="switchpane">
-                        <button class="btn-switchpane validation-button"
+                    <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>
diff --git a/addons/point_of_sale/static/src/app/screens/payment_screen/payment_status/payment_status.scss b/addons/point_of_sale/static/src/app/screens/payment_screen/payment_status/payment_status.scss
new file mode 100644
index 00000000000..ac7ddd11502
--- /dev/null
+++ b/addons/point_of_sale/static/src/app/screens/payment_screen/payment_status/payment_status.scss
@@ -0,0 +1,10 @@
+.paymentlines-empty .total {
+    font-size: 3rem;
+    text-shadow: 0px 2px white, 0px 2px 2px rgba(0, 0, 0, 0.27);
+}
+
+@include media-breakpoint-down(md) {
+    .paymentlines-empty .message {
+        padding-bottom: map-get($spacers, 3);
+    }
+}
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 2a3e6fe2bf1..a1b81716ade 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
@@ -3,26 +3,26 @@
 
 <t t-name="point_of_sale.PaymentScreenStatus" owl="1">
     <div t-if="props.order.get_paymentlines().length === 0" class="paymentlines-empty">
-        <div class="total">
+        <div class="total text-center py-2 text-success">
             <t t-esc="totalDueText" />
         </div>
-        <div class="message">
+        <div class="message text-center">
             Please select a payment method.
         </div>
     </div>
 
     <div t-else="">
-        <div class="payment-status-container">
+        <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">Remaining</span>
+                    <span class="label pe-2">Remaining</span>
                     <span class="amount"
-                          t-att-class="{ highlight: props.order.get_due() > 0 }">
+                          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">
-                    <span class="label">Total Due</span>
+                <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>
@@ -30,9 +30,9 @@
             </div>
             <div>
                 <div class="payment-status-change">
-                    <span class="label">Change</span>
+                    <span class="label pe-2">Change</span>
                     <span class="amount"
-                          t-att-class="{ highlight: props.order.get_change() > 0 }">
+                          t-att-class="{ 'highlight text-primary fw-bolder': props.order.get_change() > 0 }">
                         <t t-esc="changeText" />
                     </span>
                 </div>
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/action_pad/action_pad.scss b/addons/point_of_sale/static/src/app/screens/product_screen/action_pad/action_pad.scss
new file mode 100644
index 00000000000..cfa41b8fc6f
--- /dev/null
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/action_pad/action_pad.scss
@@ -0,0 +1,9 @@
+.set-partner span {
+    height: 32px;
+    width: 32px;
+    min-width: 32px;
+}
+
+.pay-order-button, .set-partner {
+    height: 56px;
+}
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 36a6030b9f3..9e247006261 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,25 +2,31 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.ActionpadWidget" owl="1">
-        <div class="actionpad">
-            <button class="button mobile-more-button" t-if="ui.isSmall and props.onClickMore" t-on-click="props.onClickMore">
+        <div class="actionpad d-flex flex-column flex-grow-1 w-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>
-            <button class="button set-partner" t-att-class="{'decentered': isLongName}"
+            <button class="button set-partner btn btn-light rounded-0 py-2 flex-shrink-1 fw-bolder"
                     t-on-click="() => this.pos.selectPartner()">
-                <t t-if="!ui.isSmall"><i class="fa fa-user" role="img" aria-label="Customer" title="Customer" /></t>
-                <t t-if="props.partner">
-                    <t t-esc="props.partner.name" />
-                </t>
-                <t t-else="">
-                    Customer
-                </t>
+                <div class="d-flex justify-content-center align-items-center ">
+                    <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">
+                        <t t-esc="props.partner.name" />
+                    </div>
+                    <div t-else="fw-bolder">
+                        Customer
+                    </div>
+                </div>
             </button>
-            <button class="button pay validation pay-order-button" t-att-class="{ 'with-more-button': props.onClickMore and ui.isSmall }" t-on-click="props.actionToTrigger ? this.props.actionToTrigger : () => pos.get_order().pay()">
-                <div class="pay-circle" t-att-class="{ 'highlight': this.highlightPay }">
+            <button class="button pay validation pay-order-button btn btn-primary btn-lg py-5 rounded-0 highlight d-flex flex-column flex-fill align-items-center justify-content-center fw-bolder" 
+                t-att-class="{ 'with-more-button': props.onClickMore and ui.isSmall }" 
+                t-on-click="props.actionToTrigger ? this.props.actionToTrigger : () => pos.get_order().pay()">
+                <div class="pay-circle d-flex align-items-center justify-content-center py-2 mb-2" t-att-class="{ 'highlight': this.highlightPay }">
                     <i class="oi oi-chevron-right" role="img" aria-label="Pay" title="Pay" />
                 </div>
-                <t t-esc="props.actionName" />
+                <t class="text-white" t-esc="props.actionName" />
             </button>
         </div>
     </t>
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/category_button/category_button.xml b/addons/point_of_sale/static/src/app/screens/product_screen/category_button/category_button.xml
index 1a509aeba33..b0d1b9d43a1 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/category_button/category_button.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/category_button/category_button.xml
@@ -2,14 +2,14 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.CategoryButton" owl="1">
-        <span class="category-button" t-on-click="() => this.props.switchCategory(props.category.id)">
+        <button class="category-button btn btn-light" t-on-click="() => this.props.switchCategory(props.category.id)">
             <div class="category-img">
                 <img t-att-src="imageUrl" alt="Category" />
             </div>
-            <div class="category-name">
+            <div class="category-name mt-2 fw-bolder">
                 <t t-esc="props.category.name" />
             </div>
-        </span>
+        </button>
     </t>
 
 </templates>
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
new file mode 100644
index 00000000000..d311015a2fc
--- /dev/null
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/control_buttons.scss
@@ -0,0 +1,22 @@
+.control-buttons {
+    white-space: nowrap;
+    gap: 1px;
+}
+
+.control-button {
+    flex: 1 1 29%;
+    padding: $o-horizontal-padding * 0.75;
+}
+
+/* .control-button.highlight,
+.button.highlight {
+    background: $primary !important;
+    border-color: $primary !important;
+    color: white !important;
+} */
+.control-button.altlight,
+.button.altlight {
+    background: #7F82AC !important;
+    border: solid 1px #756A99 !important;
+    color: white !important;
+}
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/control_buttons_popup.xml b/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/control_buttons_popup.xml
index 2f2e144fe1e..9ad3f706236 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/control_buttons_popup.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/control_buttons_popup.xml
@@ -2,15 +2,15 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.ControlButtonPopup" owl="1">
-        <div class="popup popup-control-buttons">
+        <div class="popup popup-control-buttons d-flex flex-column">
             <!-- When one of the buttons is clicked, close this popup. -->
-            <div class="control-buttons" t-on-click="cancel">
+            <div class="control-buttons d-flex flex-column p-2" t-on-click="cancel">
                 <t t-foreach="controlButtons" t-as="cb" t-key="cb.name">
                     <t t-component="cb.component" t-key="cb.name"/>
                 </t>
             </div>
-            <footer class="footer">
-                <div class="button cancel" t-on-click="cancel">
+            <footer class="footer modal-footer">
+                <div class="button cancel btn btn-lg btn-primary" t-on-click="cancel">
                     <t t-esc="props.cancelText" />
                 </div>
             </footer>
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 1be51f5e5fc..e4d72ce4ffb 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,8 +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 set-partner" t-on-click="() => this.pos.selectPartner()">
-            <i class="fa fa-user" role="img" aria-label="Customer" title="Customer" />
+        <div class="control-button customer-button btn btn-light rounded-0 fw-bolder" 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="">
                 Customer
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/customer_note_button/customer_note_button.xml b/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/customer_note_button/customer_note_button.xml
index e3ee680af01..df67683e5ac 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/customer_note_button/customer_note_button.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/customer_note_button/customer_note_button.xml
@@ -2,11 +2,11 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.OrderlineCustomerNoteButton" owl="1">
-        <div class="control-button" t-on-click="() => this.onClick()">
-            <i class="fa fa-sticky-note" />
+        <button class="control-button btn btn-light rounded-0 fw-bolder" t-on-click="() => this.onClick()">
+            <i class="fa fa-sticky-note me-1" />
             <span> </span>
             <span>Customer Note</span>
-        </div>
+        </button>
     </t>
 
 </templates>
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/fiscal_position_button/fiscal_position_button.xml b/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/fiscal_position_button/fiscal_position_button.xml
index 615ca46c38b..896a4a3b312 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/fiscal_position_button/fiscal_position_button.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/fiscal_position_button/fiscal_position_button.xml
@@ -2,8 +2,8 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.SetFiscalPositionButton" owl="1">
-        <div class="control-button o_fiscal_position_button" t-on-click="() => this.click()">
-            <i class="fa fa-book" role="img" aria-label="Set fiscal position"
+        <div class="control-button o_fiscal_position_button btn btn-light rounded-0 fw-bolder" t-on-click="() => this.click()">
+            <i class="fa fa-book me-1" role="img" aria-label="Set fiscal position"
                title="Set fiscal position" />
             <t t-esc='currentFiscalPositionName' />
         </div>
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/product_info_button/product_info_button.xml b/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/product_info_button/product_info_button.xml
index 7681d03e59a..be8afd467e4 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/product_info_button/product_info_button.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/product_info_button/product_info_button.xml
@@ -2,10 +2,10 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.ProductInfoButton" owl="1">
-        <div class="control-button" t-on-click="() => this.click()">
-            <i class="fa fa-info-circle" role="img" aria-label="Info" title="Info"/>
+        <button class="control-button btn btn-light rounded-0 fw-bolder" t-on-click="() => this.click()">
+            <i class="fa fa-info-circle me-1" role="img" aria-label="Info" title="Info"/>
             Info
-        </div>
+        </button>
     </t>
 
 </templates>
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/refund_button/refund_button.xml b/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/refund_button/refund_button.xml
index 55d9eb6d7d9..404454af0f5 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/refund_button/refund_button.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/refund_button/refund_button.xml
@@ -2,10 +2,10 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.RefundButton" owl="1">
-        <div class="control-button" t-on-click="() => this.click()">
-            <i class="fa fa-undo" role="img" aria-label="Refund" title="Refund" />
+        <button class="control-button btn btn-light rounded-0 fw-bolder" t-on-click="() => this.click()">
+            <i class="fa fa-undo me-1" role="img" aria-label="Refund" title="Refund" />
             Refund
-        </div>
+        </button>
     </t>
 
 </templates>
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
new file mode 100644
index 00000000000..6b2b641d4b4
--- /dev/null
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/numpad/numpad.scss
@@ -0,0 +1,44 @@
+/*  ********* The Numpad ********* */
+
+.pos .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 {
+    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 7201cd46028..e725d802c6b 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
@@ -2,35 +2,35 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.NumpadWidget" owl="1">
-        <div class="numpad">
-            <button class="input-button number-char" t-on-click="() => this.sendInput('1')">1</button>
-            <button class="input-button number-char" t-on-click="() => this.sendInput('2')">2</button>
-            <button class="input-button number-char" t-on-click="() => this.sendInput('3')">3</button>
-            <button class="mode-button" t-att-class="{'selected-mode': props.activeMode === 'quantity'}"
+        <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'}"
                     t-on-click="() => this.changeMode('quantity')">Qty</button>
-            <button class="input-button number-char" t-on-click="() => this.sendInput('4')">4</button>
-            <button class="input-button number-char" t-on-click="() => this.sendInput('5')">5</button>
-            <button class="input-button number-char" t-on-click="() => this.sendInput('6')">6</button>
-            <button class="mode-button" t-att-class="{
+            <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',
                         'disabled-mode': !hasManualDiscount
                     }"
                     t-att-disabled="!hasManualDiscount"
                     t-on-click="() => this.changeMode('discount')">% Disc</button>
-            <button class="input-button number-char" t-on-click="() => this.sendInput('7')">7</button>
-            <button class="input-button number-char" t-on-click="() => this.sendInput('8')">8</button>
-            <button class="input-button number-char" t-on-click="() => this.sendInput('9')">9</button>
-            <button class="mode-button" t-att-class="{
+            <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',
                     'disabled-mode': !hasPriceControlRights
                 }" t-att-disabled="!hasPriceControlRights"
                     t-on-click="() => this.changeMode('price')">Price</button>
-            <button class="input-button numpad-minus" t-att-class="{ 'disabled-mode': props.disableSign }" t-on-click="() => this.sendInput('-')">+/-</button>
-            <button class="input-button number-char" t-on-click="() => this.sendInput('0')">0</button>
-            <button class="input-button number-char" t-on-click="() => this.sendInput(decimalSeparator)">
+            <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)">
                 <t t-esc="decimalSeparator" />
             </button>
-            <button class="input-button numpad-backspace" t-on-click="() => this.sendInput('Backspace')">
+            <button class="input-button numpad-backspace btn btn-light w-100 rounded-0 py-3" 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
new file mode 100644
index 00000000000..746e5681302
--- /dev/null
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/order/order.scss
@@ -0,0 +1,8 @@
+/*  ********* 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 830c161f2d3..6a24f39d90c 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
@@ -2,17 +2,17 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.OrderWidget" owl="1">
-        <div class="order-container" t-ref="scrollable">
-            <div class="order">
+        <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'>
-                        <i class='fa fa-shopping-cart' role="img" aria-label="Shopping cart"
+                    <div class="order-empty d-flex flex-column align-items-center justify-content-center h-100 text-muted">
+                        <i class="fa fa-4x fa-shopping-cart" role="img" aria-label="Shopping cart"
                            title="Shopping cart"/>
-                        <h1>This order is empty</h1>
+                        <h3 class="mt-2">This order is empty</h3>
                     </div>
                 </t>
                 <t t-else="">
-                    <ul class="orderlines">
+                    <ul class="orderlines flex-grow-1 overflow-auto">
                         <t t-foreach="orderlinesArray" t-as="orderline" t-key="orderline.id">
                             <Orderline
                                 editPackLotLines.bind="editPackLotLines"
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 d4e2b935313..4fe39f376a1 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">
+        <div class="summary clearfix sticky-top w-100 py-2 px-3 border-top 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">
-                    <span class="badge">Total: </span>
+                <div class="entry total fs-2">
+                    Total:
                     <span class="value">
                         <t t-esc="_total" />
                     </span>
-                    <div t-if="_tax.hasTax" class="subentry">
+                    <div t-if="_tax.hasTax" class="subentry fs-5 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.js b/addons/point_of_sale/static/src/app/screens/product_screen/orderline/orderline.js
index f463081bcc8..2a7630221b9 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/orderline/orderline.js
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/orderline/orderline.js
@@ -36,9 +36,9 @@ export class Orderline extends Component {
     get addedClasses() {
         return {
             selected: this.props.line.selected,
-            "has-change":
+            "has-change ps-2 text-success border-start border-success border-4":
                 this.props.line.hasChange && this.pos.config.module_pos_restaurant,
-            "skip-change":
+            "skip-change ps-2 text-secondary border-start border-secondary border-4":
                 this.props.line.skipChange && this.pos.config.module_pos_restaurant,
         };
     }
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
new file mode 100644
index 00000000000..90ce239fb3a
--- /dev/null
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/orderline/orderline.scss
@@ -0,0 +1,17 @@
+/*  ********* 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;
+    }
+
+    &.selected {
+        background: rgba($primary, 0.2);
+        transition: background 250ms ease-in-out;
+        cursor: default;
+    }
+}
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 b9f7175297f..2a576bb721d 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,14 +2,13 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.Orderline" owl="1">
-        <li t-on-click="selectLine" class="orderline" t-att-class="addedClasses">
-            <span class="product-name">
+        <li t-on-click="selectLine" class="orderline w-100 m-0 py-2 px-3 cursor-pointer" 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()"/>
-                <span> </span>
                 <t t-if="props.line.get_product().tracking!=='none' &amp;&amp; (pos.picking_type.use_create_lots || pos.picking_type.use_existing_lots)">
                     <t t-if="props.line.has_valid_product_lot()">
                         <i  t-on-click.stop="lotIconClicked"
-                            class="oe_link_icon fa fa-list oe_icon line-lot-icon oe_green"
+                            class="oe_link_icon fa fa-list oe_icon line-lot-icon ms-1 text-success"
                             aria-label="Valid product lot"
                             role="img"
                             title="Valid product lot"
@@ -17,7 +16,7 @@
                     </t>
                     <t t-else="">
                         <i  t-on-click.stop="lotIconClicked"
-                            class="oe_link_icon fa fa-list oe_icon line-lot-icon oe_red"
+                            class="oe_link_icon fa fa-list oe_icon line-lot-icon ms-1 text-danger"
                             aria-label="Invalid product lot"
                             role="img"
                             title="Invalid product lot"
@@ -25,13 +24,13 @@
                     </t>
                 </t>
             </span>
-            <span class="price">
+            <span class="price fw-bold float-end">
                 <t t-esc="env.utils.formatCurrency(props.line.get_display_price())"/>
             </span>
-            <ul class="info-list">
+            <ul class="info-list ms-2">
                 <t t-if="props.line.get_quantity_str() !== '1' || props.line.selected ">
                     <li class="info">
-                        <em>
+                        <em class="fst-normal fw-bolder">
                             <t t-esc="props.line.get_quantity_str()" />
                         </em>
                         <span> </span><t t-esc="props.line.get_unit().name" />
@@ -60,14 +59,14 @@
                     </li>
                 </t>
                 <t t-if="customerNote">
-                    <li class="info orderline-note">
-                        <i class="fa fa-sticky-note" role="img" aria-label="Customer Note" title="Customer Note"/>
+                    <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"/>
                         <t t-esc="customerNote" />
                     </li>
                 </t>
             </ul>
             <t t-if="props.line.pack_lot_lines">
-                <ul class="info-list">
+                <ul class="info-list ms-2">
                     <t t-foreach="props.line.get_lot_lines()" t-as="lot" t-key="lot.cid">
                         <li>
                             SN <t t-esc="lot.lot_name"/>
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
new file mode 100644
index 00000000000..86d867d75a9
--- /dev/null
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/product/product.scss
@@ -0,0 +1,22 @@
+.product-img img {
+    height: 100px;
+    object-fit: contain;
+}
+
+@media screen and (max-width: 768px) {
+    .product:active {
+        box-shadow: 0 0 0 3px $primary;
+    }
+}
+
+.product-name {
+
+    box-sizing: border-box;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+
+    &.no-image {
+        -webkit-line-clamp: 9;
+    }
+}
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 74b8210522e..195d1351319 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}}" tabindex="0" t-on-keypress="spaceClickProduct"
+        <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"
                  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" t-att-src="imageUrl" t-att-alt="props.product.display_name" />
+                    <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">
-                    <div t-attf-class="#{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 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}}">
                         <t t-esc="props.product.display_name" />
                     </div>
-                    <span class="price-tag">
+                    <span class="price-tag text-primary py-1 px-2 fw-bolder">
                         <t t-esc="price" />
                     </span>
                 </div>
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/product_info_popup/product_info_popup.js b/addons/point_of_sale/static/src/app/screens/product_screen/product_info_popup/product_info_popup.js
index 9a09f3dee29..3698508accb 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/product_info_popup/product_info_popup.js
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/product_info_popup/product_info_popup.js
@@ -24,8 +24,7 @@ export class ProductInfoPopup extends AbstractAwaitablePopup {
         this.cancel();
     }
     _hasMarginsCostsAccessRights() {
-        const isAccessibleToEveryUser =
-            this.pos.config.is_margins_costs_accessible_to_every_user;
+        const isAccessibleToEveryUser = this.pos.config.is_margins_costs_accessible_to_every_user;
         const isCashierManager = this.pos.get_cashier().role === "manager";
         return isAccessibleToEveryUser || isCashierManager;
     }
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/product_info_popup/product_info_popup.scss b/addons/point_of_sale/static/src/app/screens/product_screen/product_info_popup/product_info_popup.scss
new file mode 100644
index 00000000000..3a4de68880a
--- /dev/null
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/product_info_popup/product_info_popup.scss
@@ -0,0 +1,7 @@
+.product-info-popup {
+    max-width: 800px !important;
+
+    .modal-body {
+        max-height: 70vh;
+    }
+}
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/product_info_popup/product_info_popup.xml b/addons/point_of_sale/static/src/app/screens/product_screen/product_info_popup/product_info_popup.xml
index 94d5bb9f8a6..95af7cb627c 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/product_info_popup/product_info_popup.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/product_info_popup/product_info_popup.xml
@@ -2,29 +2,28 @@
 <templates id="template" xml:space="preserve">
     <t t-name="point_of_sale.ProductInfoPopup" owl="1">
             <div class="popup product-info-popup">
-                <header class="title">
-                    Product information
-                </header>
-                <main class="body">
-                    <div class="section-product-info-title">
-                        <div class="column flex-start">
-                            <span t-esc="props.product.display_name" class="global-info-title product-name"/>
-                            <span><t t-if="props.product.default_code" t-esc="props.product.default_code"/> <t t-if="props.product.default_code and props.product.barcode"> - </t> <t t-if="props.product.barcode" t-esc="props.product.barcode"/></span>
+                <div class="modal-header">
+                    <h4 class="modal-title">Product information</h4>
+                </div>
+                <main class="body modal-body overflow-auto">
+                    <div class="section-product-info-title d-flex flex-column flex-sm-row text-start gap-3 bg-info text-info bg-opacity-25 mx-n3 mt-n3 p-3">
+                        <div class="d-flex flex-column flex-grow-1 text-start w-100 w-sm-25">
+                            <span t-esc="props.product.display_name" class="global-info-title fs-2 fw-bolder text-truncate"/>
+                            <span class="fs-3"><t t-if="props.product.default_code" t-esc="props.product.default_code"/> <t t-if="props.product.default_code and props.product.barcode"> - </t> <t t-if="props.product.barcode" t-esc="props.product.barcode"/></span>
                         </div>
-                        <div class="column flex-end">
-                            <span t-esc="env.utils.formatCurrency(productInfo.all_prices.price_with_tax)" class="global-info-title" />
-                            <t t-foreach="productInfo.all_prices.tax_details" t-as="tax" t-key="tax.name">
-                                <div><t t-esc="tax.name"/>: <t t-esc="env.utils.formatCurrency(tax.amount)"/></div>
-                            </t>
+                        <div class="d-flex flex-column justify-content-center text-start text-sm-end w-100 w-sm-25">
+                            <span t-esc="env.utils.formatCurrency(productInfo.all_prices.price_with_tax)" class="global-info-title fs-2 fw-bolder" />
+                            <span class="fs-3">
+                                <t t-foreach="productInfo.all_prices.tax_details" t-as="tax" t-key="tax.name">
+                                    <div><t t-esc="tax.name"/>: <t t-esc="env.utils.formatCurrency(tax.amount)"/></div>
+                                </t>
+                            </span>
                         </div>
                     </div>
-                    <div class="section-financials">
-                        <div class="section-title">
-                            <span>Financials</span>
-                            <div class="section-title-line"></div>
-                        </div>
-                        <div class="section-financials-body">
-                            <table>
+                    <div class="section-financials mt-3 mb-4 pb-4 border-bottom text-start">
+                        <h3 class="section-title">Financials</h3>
+                        <div class="section-financials-body d-flex flex-column flex-sm-row">
+                            <table class="table table-borderless mb-0">
                                 <tr>
                                     <td>Price excl. VAT:</td>
                                     <td><t t-esc="env.utils.formatCurrency(productInfo.all_prices.price_without_tax)"/></td>
@@ -38,7 +37,7 @@
                                     <td><t t-esc="marginCurrency"/> (<t t-esc="marginPercent"/>%) </td>
                                 </tr>
                             </table>
-                            <table>
+                            <table class="table table-borderless">
                                 <t t-foreach="productInfo.pricelists" t-as="pricelist" t-key="pricelist.name">
                                     <tr>
                                         <td t-esc="pricelist.name"/>
@@ -48,71 +47,75 @@
                             </table>
                         </div>
                     </div>
-                    <div class="section-inventory" t-if="productInfo.warehouses.length > 0">
-                        <div class="section-title">
-                            <span>Inventory <t t-if="pos.pos_session.update_stock_at_closing">(as of opening)</t></span>
-                            <div class="section-title-line"></div>
-                        </div>
+                    <div class="section-inventory mt-3 mb-4 pb-4 border-bottom text-start" t-if="productInfo.warehouses.length > 0">
+                        <h3 class="section-title">
+                            Inventory 
+                            <t t-if="pos.pos_session.update_stock_at_closing">(as of opening)</t>
+                        </h3>
                         <div class="section-inventory-body">
-                            <table class="mobile-table">
-                                <t t-foreach="productInfo.warehouses" t-as="warehouse" t-key="warehouse.name">
-                                    <tr>
-                                        <td><span t-esc="warehouse.name" class="table-name"/>:</td>
-                                        <td><t t-esc="warehouse.available_quantity"/> <t t-esc="warehouse.uom"/> available,</td>
-                                        <td><t t-esc="warehouse.forecasted_quantity"/> forecasted</td>
-                                    </tr>
-                                </t>
-                            </table>
+                            <t t-foreach="productInfo.warehouses" t-as="warehouse" t-key="warehouse.name">
+                                <div class="d-flex flex-column flex-md-row gap-2">
+                                    <div>
+                                        <t t-esc="warehouse.name" class="table-name"/>
+                                        :
+                                    </div>
+                                    <div>
+                                        <span class="me-1 fw-bolder"><t t-esc="warehouse.available_quantity" class="table-name"/></span>
+                                        <t t-esc="warehouse.uom"/> available,
+                                    </div>
+                                    <div> 
+                                        <span class="me-1 fw-bolder"><t t-esc="warehouse.forecasted_quantity"/></span>
+                                        forecasted
+                                    </div>
+                                </div>
+                            </t>
                         </div>
                     </div>
-                    <div class="section-supplier" t-if="productInfo.suppliers.length > 0">
-                        <div class="section-title">
-                            <span>Replenishment</span>
-                            <div class="section-title-line"></div>
-                        </div>
+                    <div class="section-supplier mt-3 mb-4 pb-4 border-bottom text-start" t-if="productInfo.suppliers.length > 0">
+                        <h3 class="section-title">Replenishment</h3>
                         <div class="section-supplier-body">
-                            <table class="mobile-table">
-                                <t t-foreach="productInfo.suppliers" t-as="supplier" t-key="supplier.name">
-                                    <tr>
-                                        <td><span t-esc="supplier.name" class="table-name"/>:</td>
-                                        <div class="mobile-line">
-                                            <td><t t-esc="supplier.delay"/> Days</td>
-                                            <td t-if="_hasMarginsCostsAccessRights()"><t t-esc="env.utils.formatCurrency(supplier.price)"/></td>
-                                        </div>
-                                    </tr>
-                                </t>
-                            </table>
+                            <t t-foreach="productInfo.suppliers" t-as="supplier" t-key="supplier.name">
+                                <div class="d-flex flex-column flex-md-row gap-2">
+                                    <div>
+                                        <span t-esc="supplier.name" class="table-name"/>:
+                                    </div>
+                                    <span class="me-1 fw-bolder">
+                                        <t t-esc="supplier.delay"/> 
+                                        Days
+                                    </span>
+                                    <span t-if="_hasMarginsCostsAccessRights()">
+                                        <t t-esc="env.utils.formatCurrency(supplier.price)"/>
+                                    </span>
+                                </div>
+                            </t>
                         </div>
                     </div>
-                    <div class="extra">
-                        <div class="section-variants" t-if="productInfo.variants.length > 0">
-                            <div class="section-title">
-                                <span>Attributes</span>
-                                <div class="section-title-line"></div>
-                            </div>
+                    <div class="extra mt-3 mb-4 pb-4 border-bottom text-start" t-if="productInfo.variants.length > 0">
+                        <div class="section-variants">
+                            <h3 class="section-title">Attributes</h3>
                             <div class="section-variants-body">
-                                <table class="mobile-table">
-                                    <t t-foreach="productInfo.variants" t-as="variant" t-key="variant.name">
-                                        <tr>
-                                            <td><span t-esc="variant.name" class="table-name"/>:</td>
-                                            <td class="table-value">
-                                                <t t-foreach="variant.values" t-as="attribute_value" t-key="attribute_value.name">
-                                                    <span class="searchable" t-on-click="() => this.searchProduct(attribute_value.search)"><t t-esc="attribute_value.name"/></span> <t t-if="attribute_value_index lt variant.values.length - 1">, </t>
-                                                </t>
-                                            </td>
-                                        </tr>
-                                    </t>
-                                </table>
+                                <t t-foreach="productInfo.variants" t-as="variant" t-key="variant.name">
+                                    <div class="d-flex flex-column align-items-start gap-2 mb-2">
+                                        <div>
+                                            <span t-esc="variant.name" class="table-name"/>:
+                                        </div>
+                                        <div class="d-flex flex-wrap gap-1">
+                                            <t t-foreach="variant.values" t-as="attribute_value" t-key="attribute_value.name">
+                                                <span class="searchable btn btn-secondary" t-on-click="() => this.searchProduct(attribute_value.search)">
+                                                    <t t-esc="attribute_value.name"/>
+                                                </span>
+                                                <t t-if="attribute_value_index lt variant.values.length - 1"> </t>
+                                            </t>
+                                        </div>
+                                    </div>
+                                </t>
                             </div>
                         </div>
                     </div>
-                    <div class="section-order">
-                        <div class="section-title">
-                            <span>Order</span>
-                            <div class="section-title-line"></div>
-                        </div>
+                    <div class="section-order mt-3 mb-4 pb-4 border-bottom text-start">
+                        <h3 class="section-title">Order</h3>
                         <div class="section-order-body">
-                            <table>
+                            <table class="table table-borderless w-100 w-sm-50 mb-0">
                                 <tr>
                                     <td>Total Price excl. VAT:</td>
                                     <td t-esc="orderPriceWithoutTaxCurrency" class="table-value"/>
@@ -129,8 +132,8 @@
                         </div>
                     </div>
                 </main>
-                <footer class="footer">
-                    <div class="button cancel" t-on-click="cancel">
+                <footer class="footer modal-footer">
+                    <div class="button cancel btn btn-lg btn-primary" t-on-click="cancel">
                         Close
                     </div>
                 </footer>
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/product_list/control_panel/control_panel.scss b/addons/point_of_sale/static/src/app/screens/product_screen/product_list/control_panel/control_panel.scss
new file mode 100644
index 00000000000..048267a66a6
--- /dev/null
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/product_list/control_panel/control_panel.scss
@@ -0,0 +1,43 @@
+
+.category-list-scroller{
+    max-height:40vh;
+}
+
+.category-button  {
+    .category-img {
+        width: 120px;
+        height: 100px;
+    }
+
+    & img {
+        max-height: 100px;
+        max-width:  120px;
+    }
+}
+
+/* Search Bar (PartnerList & Product Screens*/
+
+.pos-search-bar:focus-within {
+    background-color: $input-focus-bg;
+    border-color: $input-focus-border-color;
+    color: $input-focus-color;
+}
+
+/* Product Screen Search Bar */
+
+.info-load-product-message {
+	background: lightblue;
+	color: #017e84;
+	padding: 8px;
+	width: fit-content;
+	display: block;
+	margin : 3px auto 0 auto;
+}
+
+@media screen and (max-width: 768px) {
+    .pos .search-bar-container.sb-product {
+        max-width: none;
+        width: auto;
+        background-color: #FFFFFF;
+    }
+}
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/product_list/control_panel/control_panel.xml b/addons/point_of_sale/static/src/app/screens/product_screen/product_list/control_panel/control_panel.xml
index 8e4c2a2c379..23c1a3d0f9e 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/product_list/control_panel/control_panel.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/product_list/control_panel/control_panel.xml
@@ -2,57 +2,57 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.ProductsWidgetControlPanel" owl="1">
-        <div class="products-widget-control" t-ref="products-widget-control">
-            <div class="rightpane-header">
-                <t t-if="this.pos.posHasValidProduct()">
-                    <div class="search-bar-container sb-product">
-                        <span t-if="state.isMobile" class="oe_status oe_icon icon" t-on-click="toggleMobileSearchBar">
-                            <i t-attf-class="fa {{state.mobileSearchBarIsShown ? 'fa-arrow-right' : 'fa-search'}}"/>
-                        </span>
-                        <t t-if="!state.isMobile || state.mobileSearchBarIsShown">
-                            <div class="pos-search-bar">
-                                <i class="fa fa-search"/>
-                                <input t-model="this.pos.searchProductWord" placeholder="Search Products..." type="text" autofocus="autofocus" t-on-keyup="updateSearch" />
-                                <i t-if="this.pos.searchProductWord" class="fa fa-times" t-on-click="_clearSearch"/>
-                            </div>
-                        </t>
-                    </div>
-                </t>
+        <div class="products-widget-control d-grid shadow-sm z-index-1" t-ref="products-widget-control">
+            <div class="rightpane-header d-flex justify-content-between align-items-center text-center bg-view p-1 overflow-x-auto overflow-y-hidden">
                 <t t-if="!props.hasNoCategories">
-                    <div class="categories-header">
+                    <div class="categories-header d-flex overflow-x-auto">
                     <!-- Breadcrumbs -->
-                        <div class="breadcrumbs">
-                            <span class="breadcrumb">
-                                <span class="breadcrumb-button breadcrumb-home" t-on-click="() => this.props.switchCategory(0)">
-                                    <i class="fa fa-home" role="img" aria-label="Home" title="Home"></i>
-                                </span>
+                        <div class="breadcrumbs d-flex">
+                            <span class="breadcrumb float-start d-flex align-items-center">
+                                <button class="breadcrumb-button breadcrumb-home btn btn-light fw-bolder" t-on-click="() => this.props.switchCategory(0)">
+                                    <i class="fa fa-home fa-2x py-1" role="img" aria-label="Home" title="Home"></i>
+                                </button>
                             </span>
                             <t t-foreach="props.breadcrumbs" t-as="category" t-key="category.id">
-                                <span class="breadcrumb">
-                                    <i class="breadcrumb-arrow fa fa-caret-right" aria-hidden="true"/>
-                                    <span class="breadcrumb-button"
+                                <span class="breadcrumb float-start d-flex align-items-center">
+                                    <i class="breadcrumb-arrow fa fa-caret-right px-2" aria-hidden="true"/>
+                                    <button class="breadcrumb-button btn btn-light h-100 fw-bolder"
                                         t-on-click="() => this.props.switchCategory(category.id)">
                                         <t t-esc="category.name"></t>
-                                    </span>
+                                    </button>
                                 </span>
                             </t>
                         </div>
                         <!-- Subcategories -->
-                        <div t-if="props.subcategories.length > 0 and !displayCategImages"  class="category-list simple">
+                        <div t-if="props.subcategories.length > 0 and !displayCategImages"  class="category-list simple d-flex align-items-center ms-1">
                             <t t-foreach="props.subcategories" t-as="category" t-key="category.id">
-                                <span class="category-simple-button"
+                                <button class="category-simple-button btn btn-light h-100 fw-bolder"
                                     t-on-click="() => this.props.switchCategory(category.id)">
                                     <t t-esc="category.name" />
-                                </span>
+                                </button>
                             </t>
                         </div>
                     </div>
                 </t>
+                <div class="search-bar-container sb-product d-flex align-items-center h-100">
+                    <span t-if="state.isMobile" class="oe_status oe_icon icon d-flex align-items-center h-100 me-1 px-4 rounded text-bg-secondary cursor-pointer" t-on-click="toggleMobileSearchBar">
+                        <i t-attf-class="fa {{state.mobileSearchBarIsShown ? 'fa-arrow-right' : 'fa-search'}}"/>
+                    </span>
+                    <t t-if="!state.isMobile || state.mobileSearchBarIsShown">
+                        <div class="input-group h-100">
+                            <div class="pos-search-bar form-control d-flex align-items-center py-1 bg-view">
+                                <i class="oi oi-search me-2"/>
+                                <input class="flex-grow-1 w-auto h-100 border-0 px-2 me-4" t-model="this.pos.searchProductWord" placeholder="Search Products..." type="text" autofocus="autofocus" t-on-keyup="updateSearch" />
+                                <i t-if="this.pos.searchProductWord" class="fa fa-times position-absolute end-0 me-2 pe-1 cursor-pointer" t-on-click="_clearSearch"/>
+                            </div>
+                        </div>
+                    </t>
+                </div>
             </div>
             <t t-if="props.subcategories.length > 0 and displayCategImages">
-                <div class="categories">
-                    <div class="category-list-scroller">
-                        <div class="category-list">
+                <div class="categories border-bottom shadow-sm">
+                    <div class="category-list-scroller w-100 h-100 overflow-hidden overflow-y-auto">
+                        <div class="category-list d-flex flex-wrap px-1 py-2 gap-3">
                             <t t-foreach="props.subcategories" t-as="category" t-key="category.id">
                                 <CategoryButton
                                     switchCategory.bind="props.switchCategory"
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
new file mode 100644
index 00000000000..1fb90d97f24
--- /dev/null
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.scss
@@ -0,0 +1,12 @@
+
+/*  ********* The product list  ********* */
+
+.product-list {
+    grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
+}
+
+@media only screen and (max-width: 768px) {
+    .product-list {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.xml b/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.xml
index cdda273460d..77af76a4c36 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.ProductsWidget" owl="1">
-      <div class="products-widget">
+      <div class="products-widget d-flex flex-column flex-grow-1 overflow-hidden">
             <ProductsWidgetControlPanel
                 updateProductList.bind="updateProductList"
                 clearSearch.bind="clearSearch"
@@ -12,14 +12,14 @@
                 subcategories="subcategories"
                 hasNoCategories="hasNoCategories"
                 loadProductFromServer.bind="onPressEnterKey" />
-            <div class="product-list-container">
-                <div t-if="productsToDisplay.length != 0 and posHasValidProduct" t-attf-class="{{this.pos.productListViewMode}} product-list">
+            <div class="product-list-container flex-grow-1 overflow-hidden overflow-y-auto">
+                <div t-if="productsToDisplay.length != 0 and posHasValidProduct" t-attf-class="{{this.pos.productListViewMode}} product-list d-grid gap-1 p-1">
                     <t t-foreach="productsToDisplay" t-as="product" t-key="product.id">
                         <ProductItem
                             product="product" />
                     </t>
                 </div>
-                <div t-else="" class="product-list-empty no-results-message">
+                <div t-else="" class="product-list-empty no-results-message text-center mt-5">
                     <t t-if="searchWord">
                         <p>No products found for <b>"<t t-esc="searchWord"/>"</b> in this category.</p>
                     </t>
@@ -30,7 +30,7 @@
                         <t t-else="">
                             <div>
                                 <p>No products here, but don't worry, we've got your back.</p>
-                                <p>Play with <a role="button" class="button-no-demo" t-on-click="loadDemoDataProducts">our demo products</a> or <a role="button" class="button-no-demo" t-on-click="createNewProducts">create your own products</a></p>
+                                <p>Play with <a role="button" class="button-no-demo btn btn-lg btn-primary" t-on-click="loadDemoDataProducts">our demo products</a> or <a role="button" class="button-no-demo" t-on-click="createNewProducts">create your own products</a></p>
                                 <div t-if="state.showReloadMessage" class="info-load-product-message">
                                     Please reload this page once products have been created
                                 </div>
@@ -38,8 +38,8 @@
                         </t>
                     </t>
                 </div>
-                <div t-if="searchWord" class="search-more-button">
-                    <div class="button" t-on-click="onPressEnterKey">Search more</div>
+                <div t-if="searchWord" class="search-more-button d-flex justify-content-center">
+                    <button class="btn btn-primary btn-lg" t-on-click="onPressEnterKey">Search more</button>
                 </div>
                 <div class="portal search-database-button no-results-message" t-att-class="{ oe_hidden:  !shouldShowButton }"></div>
             </div>
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 3724757387d..3ade9e5a327 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
@@ -3,18 +3,18 @@
 
     <t t-name="point_of_sale.ProductScreen" owl="1">
         <div class="product-screen screen" t-att-class="{ oe_hidden: !props.isShown }">
-            <div class="screen-full-width">
-                <div class="leftpane pane-border" t-if="!ui.isSmall || pos.mobile_pane === 'left'">
+            <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'">
                     <OrderWidget/>
-                    <div class="pads">
-                        <div class="control-buttons">
+                    <div class="pads border-top">
+                        <div class="control-buttons d-flex flex-wrap border-bottom overflow-hidden">
                             <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"/>
                                 </t>
                             </t>
                         </div>
-                        <div class="subpads">
+                        <div class="subpads d-flex">
                             <ActionpadWidget
                                 partner="partner"
                                 actionName="constructor.numpadActionName"
@@ -26,20 +26,19 @@
                         </div>
                     </div>
                 </div>
-                <div class="rightpane" t-if="!ui.isSmall || pos.mobile_pane === 'right'">
+                <div class="rightpane d-flex flex-column flex-grow-1 w-100 h-100 bg-300" t-if="!ui.isSmall || pos.mobile_pane === 'right'">
                     <ProductsWidget />
                     <t t-if="ui.isSmall">
-                        <div class="product-reminder" t-if="showProductReminder" t-key="animationKey">
-                            <span><t t-esc="selectedOrderlineQuantity"/> <t t-esc="selectedOrderlineDisplayName"/></span>
-                            <span><t t-esc="selectedOrderlineTotal"/></span>
+                        <div class="product-reminder d-flex justify-content-center align-items-center py-1 text-bg-warning bg-opacity-50 fw-bolder" t-if="showProductReminder" t-key="animationKey" >
+                            <span><t t-esc="selectedOrderlineQuantity"/> <t t-esc="selectedOrderlineDisplayName"/> <t t-esc="selectedOrderlineTotal"/></span>
                         </div>
-                        <div class="switchpane">
-                            <button class="btn-switchpane pay-button" t-att-class="{'primary': primaryPayButton(), 'secondary': !primaryPayButton()}" t-on-click="() => currentOrder.pay()">
-                                <h1>Pay</h1>
+                        <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()">
+                                <span class="fs-1 d-block">Pay</span>
                                 <span><t t-esc="total" /></span>
                             </button>
-                            <button class="btn-switchpane" t-att-class="{'primary': primaryReviewButton(), 'secondary': !primaryReviewButton()}" t-on-click="switchPane">
-                                <h1>Review</h1>
+                            <button class="btn-switchpane btn btn-secondary flex-fill 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>
                             </button>
                         </div>
diff --git a/addons/point_of_sale/static/src/app/screens/receipt_screen/receipt/receipt.xml b/addons/point_of_sale/static/src/app/screens/receipt_screen/receipt/receipt.xml
index 7ba7fe90e2a..08bd6ae7a6a 100644
--- a/addons/point_of_sale/static/src/app/screens/receipt_screen/receipt/receipt.xml
+++ b/addons/point_of_sale/static/src/app/screens/receipt_screen/receipt/receipt.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.OrderReceipt" owl="1">
-        <div class="pos-receipt">
+        <div class="pos-receipt d-inline-block m-3 p-3 border rounded bg-view text-start overflow-hidden">
             <t t-if="receipt.company.logo">
                 <img class="pos-receipt-logo" t-att-src="receipt.company.logo" alt="Logo"/>
                 <br/>
diff --git a/addons/point_of_sale/static/src/app/screens/receipt_screen/receipt_screen.scss b/addons/point_of_sale/static/src/app/screens/receipt_screen/receipt_screen.scss
new file mode 100644
index 00000000000..35965870962
--- /dev/null
+++ b/addons/point_of_sale/static/src/app/screens/receipt_screen/receipt_screen.scss
@@ -0,0 +1,48 @@
+.pos-receipt-container {
+    direction: ltr;
+}
+
+.receipt-screen .default-view .pos-receipt-container {
+    flex: 0 1 400px;
+}
+
+@include media-breakpoint-down(md) {
+    .receipt-screen .default-view .pos-receipt-container {
+        flex: 1;
+        overflow: visible;
+    }
+}
+
+@page {
+    margin: 0;
+}
+
+@media print {
+    body {
+        background: white;
+    }
+    body * {
+        visibility: hidden;
+    }
+    .pos, .pos * {
+        position: static !important;
+    }
+    .pos .receipt-screen .pos-receipt-container {
+        position: absolute !important;
+        top: 0;
+        left: 0;
+    }
+    .pos .receipt-screen .pos-receipt-container, .pos .receipt-screen .pos-receipt-container  * {
+        visibility: visible;
+        background: white !important;
+        color: black !important;
+    }
+    .pos .pos-receipt {
+        margin: 0 !important;
+        margin-left: auto !important;
+        margin-right: auto !important;
+        border: none !important;
+        font-size: 14px !important;
+        width: 266px !important;
+    }
+}
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 31f442854a0..f1093a7256b 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
@@ -3,80 +3,71 @@
 
     <t t-name="point_of_sale.ReceiptScreen" owl="1">
         <div class="receipt-screen screen">
-            <div class="screen-content">
-                <div class="top-content" t-if="!ui.isSmall">
-                    <div class="top-content-center">
-                        <h1>
+            <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">
+                        <h1 class="mb-0">
                             <t t-esc="orderAmountPlusTip" />
                         </h1>
                     </div>
                 </div>
-                <div class="default-view">
-                    <div class="actions">
+                <div class="default-view d-flex flex-md-row flex-column overflow-hidden">
+                    <div class="actions flex-md-grow-1 flex-grow-0 flex-shrink-1 flex-basis-0 m-4">
                         <h1>Payment Successful</h1>
-                        <div class="buttons">
-                            <div class="button print" t-on-click="printReceipt">
-                                <i class="fa fa-print" t-ref="order-print-receipt-button"></i> Print Receipt
-                            </div>
+                        <div class="buttons my-3">
+                            <button class="button print btn btn-lg btn-secondary w-100 py-3" t-on-click="printReceipt">
+                                <i class="fa fa-print ms-2" t-ref="order-print-receipt-button"></i> Print Receipt
+                            </button>
                         </div>
-                        <form t-on-submit.prevent="onSendEmail" class="send-email">
-                            <div class="input-email">
-                                <input type="email" t-attf-placeholder="Email: {{currentOrder.getEmailItems().join(', ')}}" t-model="orderUiState.inputEmail" />
-                                <button class="send" t-att-class="{ highlight: isValidEmail() }" type="submit">
+                        <form t-on-submit.prevent="onSendEmail" class="send-email d-flex">
+                            <div class="input-email input-group">
+                                <input type="email" class="form-control py-3 bg-view" t-attf-placeholder="Email: {{currentOrder.getEmailItems().join(', ')}}" t-model="orderUiState.inputEmail" />
+                                <button class="send btn px-5" t-att-class="isValidEmail() ? 'highlight btn btn-primary' : 'btn-secondary disabled'" type="submit">
                                     <i class="fa fa-paper-plane" aria-hidden="true" t-ref="order-mail-receipt-button" />
                                 </button>
                             </div>
                         </form>
-                        <div class="notice">
-                            <div t-if="orderUiState.emailSuccessful !== null" t-attf-class="{{ orderUiState.emailSuccessful ? 'successful' : 'failed' }}">
+                        <div class="notice mt-2">
+                            <div t-if="orderUiState.emailSuccessful !== null" t-attf-class="{{ orderUiState.emailSuccessful ? 'successful text-success' : 'failed text-danger' }}">
                                 <t t-esc="orderUiState.emailNotice"></t>
                             </div>
                         </div>
                     </div>
-                    <div class="pos-receipt-container" t-ref="order-receipt">
+                    <div class="pos-receipt-container bg-200 text-center overflow-auto" t-ref="order-receipt">
                         <OrderReceipt order="currentOrder"/>
                     </div>
                 </div>
                 <t t-set="splittedOrder" t-value="this.currentOrder.originalSplittedOrder and !this.currentOrder.originalSplittedOrder.finalized"/>
-                <div t-if="!ui.isSmall" class="validation-buttons">
-                    <div class="button next validation" t-att-class="{ highlight: !locked }"
+                <div t-if="!ui.isSmall" class="validation-buttons d-flex w-100 gap-1 sticky-bottom">
+                    <button class="button next validation btn btn-primary w-100 py-5 rounded-0 fs-2" t-att-class="{ highlight: !locked }"
                         t-if="!splittedOrder"
                         t-on-click="orderDone" name="done">
-                        <div class="pay-circle">
-                            <i class="oi oi-chevron-right" role="img" aria-label="Pay" title="Pay" />
-                        </div>
+                        <i class="oi oi-chevron-right" role="img" aria-label="Pay" title="Pay" />
                         New Order
-                    </div>
-                    <div t-if="isResumeVisible() and !splittedOrder" class="button next validation" t-att-class="{ highlight: !locked }"
+                    </button>
+                    <button t-if="isResumeVisible() and !splittedOrder" class="button next validation btn btn-primary w-100 py-5 rounded-0 fs-2" t-att-class="{ highlight: !locked }"
                         t-on-click="resumeOrder" name="resume">
-                        <div class="pay-circle">
-                            <i class="oi oi-chevron-right" role="img" aria-label="Pay" title="Pay" />
-                        </div>
+                        <i class="oi oi-chevron-right" role="img" aria-label="Pay" title="Pay" />
                         Resume Order
-                    </div>
-                    <div t-if="splittedOrder" class="button next validation" t-att-class="{ highlight: !locked }"
+                    </button>
+                    <button t-if="splittedOrder" class="button next validation btn btn-primary w-100 py-5 rounded-0 fs-2" t-att-class="{ highlight: !locked }"
                         t-on-click="continueSplitting" name="resume">
-                        <div class="pay-circle">
                             <i class="fa fa-chevron-right" role="img" aria-label="Pay" title="Pay" />
-                        </div>
                         Continue
-                    </div>
+                    </button>
                 </div>
-                <div t-else="" class="switchpane">
-                    <div class="btn-switchpane validation-button" t-att-class="{ highlight: !locked }"
+                <div t-else="" class="switchpane d-flex">
+                    <div class="btn-switchpane validation-button btn btn-primary flex-fill py-3 rounded-0 fw-bolder" t-att-class="{ highlight: !locked }"
                         t-if="!splittedOrder"
                         t-on-click="orderDone" name="done">
                         New Order
                     </div>
-                    <div t-if="isResumeVisible() and !splittedOrder" class="btn-switchpane validation-button" t-att-class="{ highlight: !locked }"
+                    <div t-if="isResumeVisible() and !splittedOrder" class="btn-switchpane validation-button btn btn-primary flex-fill py-3 rounded-0 fw-bolder" t-att-class="{ highlight: !locked }"
                         t-on-click="resumeOrder" name="resume">
                         Resume Order
                     </div>
-                    <div t-if="splittedOrder" class="btn-switchpane validation-button" t-att-class="{ highlight: !locked }"
+                    <div t-if="splittedOrder" class="btn-switchpane validation-button btn btn-primary flex-fill py-3 rounded-0 fw-bolder" t-att-class="{ highlight: !locked }"
                         t-on-click="continueSplitting" name="resume">
-                        <div class="pay-circle">
-                            <i class="fa fa-chevron-right" role="img" aria-label="Pay" title="Pay" />
-                        </div>
                         Continue
                     </div>
                 </div>
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 79d7be143a2..c5d4d7844eb 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
@@ -3,19 +3,19 @@
 
     <t t-name="point_of_sale.ReprintReceiptScreen" owl="1">
         <div class="receipt-screen screen">
-            <div class="screen-content">
-                <div class="top-content">
-                    <span class="button back" t-on-click="confirm">
-                        <i class="fa fa-angle-double-left"></i>
+            <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">
+                        <i class="fa fa-angle-double-left me-2"></i>
                         <span> </span>
                         <span>Back</span>
-                    </span>
+                    </button>
                 </div>
-                <div class="centered-content">
-                    <div class="button print" t-on-click="tryReprint">
-                        <i class="fa fa-print"></i> Print Receipt
-                    </div>
-                    <div class="pos-receipt-container" t-ref="order-receipt">
+                <div class="centered-content d-grid mx-autp 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>
+                    <div class="pos-receipt-container mt-2 bg-200 text-center overflow-y-auto" t-ref="order-receipt">
                         <OrderReceipt order="props.order"/>
                     </div>
                 </div>
diff --git a/addons/point_of_sale/static/src/app/screens/scale_screen/scale_screen.scss b/addons/point_of_sale/static/src/app/screens/scale_screen/scale_screen.scss
new file mode 100644
index 00000000000..bc73929e55b
--- /dev/null
+++ b/addons/point_of_sale/static/src/app/screens/scale_screen/scale_screen.scss
@@ -0,0 +1,5 @@
+.computed-price, .weight {
+    font-family: Inconsolata;
+    text-shadow: 0px 2px 0px rgb(210,210,210);
+    box-shadow: 0px 2px 0px rgb(225,225,225) inset;
+}
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 d1072e92254..2550259cb05 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
@@ -3,34 +3,36 @@
 
     <t t-name="point_of_sale.ScaleScreen" owl="1">
         <div class="scale-screen screen">
-            <div class="screen-content">
-                <div class="top-content">
-                    <span class="button back" t-on-click="back">
-                        <i class="fa fa-angle-double-left"></i>
+            <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="back">
+                        <i class="fa fa-angle-double-left me-2"></i>
                         Back
-                    </span>
-                    <h1 class="product-name">
+                    </button>
+                    <h1 class="product-name flex-grow-1 m-0">
                         <t t-esc="productName" />
                     </h1>
                 </div>
-                <div class="centered-content">
-                    <div class="weight js-weight">
+                <div class="centered-content w-100 mx-auto mt-3 border-left border-right 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>
-                    <div class="product-price">
-                        <t
-                           t-esc="env.utils.formatCurrency(productPrice) + '/' + productUom" />
+                    <div class="d-flex flex-row gap-2 m-2">
+                        <div class="product-price d-flex align-items-center justify-content-center flex-grow-1 rounded text-bg-info bg-opacity-25 text-info fs-2">
+                            <t
+                                t-esc="env.utils.formatCurrency(productPrice) + '/' + productUom" />
+                        </div>
+                        <div class="computed-price flex-grow-1 p-3 bg-view rounded text-center fs-2 fw-bold">
+                            <t t-esc="computedPriceString" />
+                        </div>
                     </div>
-                    <div class="computed-price">
-                        <t t-esc="computedPriceString" />
-                    </div>
-                    <div class="buy-product" t-on-click="confirm">
+                    <div class="buy-product btn btn-lg btn-primary d-flex align-items-center justify-content-center mx-2 mb-2 cursor-pointer" t-on-click="confirm">
                         Order
-                        <i class="fa fa-angle-double-right"></i>
+                        <i class="fa fa-angle-double-right ms-2"></i>
                     </div>
                 </div>
             </div>
         </div>
     </t>
 
-</templates>
\ No newline at end of file
+</templates>
diff --git a/addons/point_of_sale/static/src/app/screens/screens.scss b/addons/point_of_sale/static/src/app/screens/screens.scss
new file mode 100644
index 00000000000..7199f1db976
--- /dev/null
+++ b/addons/point_of_sale/static/src/app/screens/screens.scss
@@ -0,0 +1,39 @@
+/*  ********* 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/invoice_button/invoice_button.xml b/addons/point_of_sale/static/src/app/screens/ticket_screen/invoice_button/invoice_button.xml
index 4f24910a618..c33bc0e9bc6 100644
--- a/addons/point_of_sale/static/src/app/screens/ticket_screen/invoice_button/invoice_button.xml
+++ b/addons/point_of_sale/static/src/app/screens/ticket_screen/invoice_button/invoice_button.xml
@@ -2,11 +2,11 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.InvoiceButton" owl="1">
-        <div class="control-button" t-on-click="() => this.click()" t-ref="invoice-button">
-            <i class="fa fa-file-pdf-o"></i>
+        <button class="control-button btn btn-light rounded-0 fw-bolder" t-on-click="() => this.click()" t-ref="invoice-button">
+            <i class="fa fa-file-pdf-o me-1"></i>
             <span> </span>
             <span><t t-esc="commandName"></t></span>
-        </div>
+        </button>
     </t>
 
 </templates>
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 3b3e4dc8bc2..b8797389324 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
@@ -2,25 +2,25 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.OrderDetails" owl="1">
-        <div class="order-container">
-            <div t-ref="scrollable" class="order-scroller touch-scrollable">
-                <div class="order">
+        <div class="order-container h-100 overflow-y-auto bg-view">
+            <div t-ref="scrollable" class="order-scroller touch-scrollable h-100">
+                <div class="order d-flex flex-column h-100 text-start">
                     <t t-if="!props.order">
-                        <div class="order-empty">
-                            <i class="fa fa-shopping-cart" role="img" aria-label="Shopping cart"
+                        <div class="order-empty d-flex flex-column align-items-center justify-content-center h-100 text-muted">
+                            <i class="fa fa fa-4x fa-shopping-cart" role="img" aria-label="Shopping cart"
                                title="Shopping cart" />
-                            <h1>Select an order</h1>
+                            <h3 class="mt-2">Select an order</h3>
                         </div>
                     </t>
                     <t t-elif="orderlines.length === 0">
                         <div class="order-empty">
-                            <i class="fa fa-shopping-cart" role="img" aria-label="Shopping cart"
+                            <i class="fa fa fa-4x fa-shopping-cart" role="img" aria-label="Shopping cart"
                                title="Shopping cart" />
-                            <h1>Order is empty</h1>
+                            <h3 class="mt-2">Order is empty</h3>
                         </div>
                     </t>
                     <t t-else="">
-                        <div class="header-note" t-att-class="{ highlight: props.highlightHeaderNote }">
+                        <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">
@@ -33,14 +33,14 @@
                             </t>
                         </ul>
                         <!-- Not using OrderSummary because we don't need it's overrides in this view. -->
-                        <div class="summary clearfix">
+                        <div class="summary clearfix sticky-top w-100 py-2 px-3 border-top text-end fw-bolder">
                             <div class="line">
-                                <div class="entry total">
-                                    <span class="badge">Total: </span>
+                                <div class="entry total fs-2">
+                                    Total:
                                     <span class="value">
                                         <t t-esc="total" />
                                     </span>
-                                    <div t-if="tax" class="subentry">
+                                    <div t-if="tax" class="subentry fs-5 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 23d564a5bf2..4225d26db5c 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,14 +2,14 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.OrderlineDetails" owl="1">
-        <li class="orderline" t-on-click="() => this.props.onClickOrderline(props.line)" t-att-class="{ selected: props.isSelected }">
-            <span class="product-name">
+        <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 }">
+            <span class="product-name d-inline-block flex-grow-1 fw-bolder text-truncate">
                 <t t-esc="productName" />
             </span>
-            <span class="price">
+            <span class="price fw-bold float-end">
                 <t t-esc="totalPrice" />
             </span>
-            <ul class="info-list">
+            <ul class="info-list ms-2">
                 <li class="info">
                     <strong>
                         <t t-esc="quantity" />
@@ -17,13 +17,13 @@
                     <span><t t-esc="pricePerUnit" /></span>
                 </li>
                 <t t-if="customerNote">
-                    <li class="info orderline-note">
-                        <i class="fa fa-sticky-note" role="img" aria-label="Customer Note" title="Customer Note"/>
+                    <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"/>
                         <t t-esc="customerNote" />
                     </li>
                 </t>
                 <t t-if="hasRefundedQty()">
-                    <li class="info refund-note">
+                    <li class="info refund-note mt-1">
                         <strong>
                             <t t-esc="getFormattedRefundedQty()" />
                         </strong>
@@ -31,11 +31,11 @@
                     </li>
                 </t>
                 <t t-if="hasToRefundQty()">
-                    <li class="info to-refund-highlight refund-note">
+                    <li class="info to-refund-highlight refund-note mt-1 fw-bold text-primary">
                         <t t-set="_destinationOrderUid" t-value="getToRefundDetail().destinationOrderUid"/>
                         <t t-if="_destinationOrderUid">
                             <t t-esc="getRefundingMessage()" />
-                            <span t-esc="_destinationOrderUid" class="order-link" t-on-click.stop="() => this.props.onClickRefundOrderUid(_destinationOrderUid)" />
+                            <span t-esc="_destinationOrderUid" class="order-link text-decoration-underline cursor-pointer" t-on-click.stop="() => this.props.onClickRefundOrderUid(_destinationOrderUid)" />
                         </t>
                         <t t-else="">
                             <t t-esc="getToRefundMessage()" />
diff --git a/addons/point_of_sale/static/src/app/screens/ticket_screen/reprint_receipt_button/reprint_receipt_button.xml b/addons/point_of_sale/static/src/app/screens/ticket_screen/reprint_receipt_button/reprint_receipt_button.xml
index ed1541d0fd6..148f00bd9eb 100644
--- a/addons/point_of_sale/static/src/app/screens/ticket_screen/reprint_receipt_button/reprint_receipt_button.xml
+++ b/addons/point_of_sale/static/src/app/screens/ticket_screen/reprint_receipt_button/reprint_receipt_button.xml
@@ -2,11 +2,11 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.ReprintReceiptButton" owl="1">
-        <div class="control-button" t-on-click="() => this.click()">
-            <i class="fa fa-print"></i>
+        <button class="control-button btn btn-light rounded-0 fw-bolder" t-on-click="() => this.click()">
+            <i class="fa fa-print me-1"></i>
             <span> </span>
             <span>Print Receipt</span>
-        </div>
+        </button>
     </t>
 
 </templates>
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
new file mode 100644
index 00000000000..e69de29bb2d
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 8525b31bb9d..dcc6d5a12c7 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
@@ -2,9 +2,9 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.SearchBar" owl="1">
-        <div class="pos-search-bar">
-            <div class="search">
-                <span class="search-icon" t-if="!ui.isSmall"><i class="fa fa-search"></i></span>
+        <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 }"
                     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">
@@ -24,7 +24,7 @@
                     </ul>
                 </div>
             </div>
-            <div t-if="props.config.filter.show" class="filter radius-right"
+            <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>
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
new file mode 100644
index 00000000000..bcfa34de942
--- /dev/null
+++ b/addons/point_of_sale/static/src/app/screens/ticket_screen/ticket_screen.scss
@@ -0,0 +1,231 @@
+.left-pane {
+    max-width: 500px;
+}
+
+@media screen and (max-width: 640px) {
+    .screen-full-width {
+        flex-direction: column;
+        height: auto;
+        min-height: 100%;
+    }
+    .controls {
+        position: sticky;
+        top: 0;
+        background: $gray-300;
+        z-index: 100;
+    }
+
+    .ticket-screen .order,
+    .ticket-screen .leftpane {
+        max-width: inherit;
+    }
+
+    .ticket-screen .rightpane {
+        width: auto;
+    }
+    .pos .orders {
+        position: sticky;
+    }
+}
+
+.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;
+        cursor: pointer;
+    }
+
+    .order-row:nth-child(odd) {
+        background: $gray-200;
+    }
+
+    .order-row:nth-child(even) {
+        background: white;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .order-row {
+        margin: 5px;
+        border: 1px solid #C9CCD2; /* $border-color */
+        background: white; /* $o-view-background-color */
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .pos .orders .col.end {
+        justify-content: flex-end;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .pos .orders .order-row > .col > div:first-child {
+        font-weight: bold;
+    }
+
+    .ticket-screen .order-row .delete-button {
+        margin-top: 5px;
+        justify-content: center;
+        background: #d23f3a /* o-text-color('danger') */ ;
+        color: white;
+    }
+    .ticket-screen .order-row .delete-button .fa-trash {
+        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 69bf642c78b..a098be12ed4 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
@@ -3,12 +3,12 @@
 
     <t t-name="point_of_sale.TicketScreen" owl="1">
         <div class="ticket-screen screen" t-att-class="{ oe_hidden: !props.isShown }">
-            <div class="screen-full-width">
-                <div class="rightpane pane-border">
-                    <div class="controls">
+            <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">
                         <t t-if="!ui.isSmall || !state.showSearchBar">
-                            <div class="buttons">
-                                <button class="discard" t-on-click="() => this.pos.closeScreen()">
+                            <div class="buttons d-flex gap-2">
+                                <button class="discard btn btn-lg btn-light" t-on-click="() => this.pos.closeScreen()">
                                     <span class="search-icon">
                                         <i class="fa fa-angle-double-left"/>
                                     </span>
@@ -16,19 +16,19 @@
                                         Back
                                     </t>
                                 </button>
-                                <button t-if="allowNewOrders" class="highlight" t-on-click="() => this.onCreateNewOrder()">New Order</button>
+                                <button t-if="allowNewOrders" class="highlight btn btn-lg btn-primary" t-on-click="() => this.onCreateNewOrder()">New Order</button>
                             </div>
                         </t>
                         <t t-if="ui.isSmall">
                             <t t-if="state.showSearchBar">
-                                <button class="arrow-left" t-on-click="() => { state.showSearchBar = !state.showSearchBar }">
+                                <button class="arrow-left btn btn-lg btn-light" t-on-click="() => { state.showSearchBar = !state.showSearchBar }">
                                     <span class="search-icon">
                                         <i class="fa fa-angle-double-left"/>
                                     </span>
                                 </button>
                             </t>
                             <t t-else="">
-                                <button class="search" t-on-click="() => { state.showSearchBar = !state.showSearchBar }">
+                                <button class="search btn btn-lg btn-light" t-on-click="() => { state.showSearchBar = !state.showSearchBar }">
                                     <span class="search-icon">
                                         <i class="fa fa-search"/>
                                     </span>
@@ -55,61 +55,61 @@
                             </div>
                         </div>
                     </div>
-                    <div class="orders">
+                    <div class="orders overflow-y-auto">
                         <t t-set="_filteredOrderList" t-value="getFilteredOrderList()" />
                         <t t-if="_filteredOrderList.length !== 0">
-                            <div class="header-row" t-att-class="{ oe_hidden: ui.isSmall }">
-                                <div class="col wide">Date</div>
-                                <div class="col wide">Receipt Number</div>
-                                <div class="col">Customer</div>
-                                <div class="col wide" t-if="showCardholderName()">Cardholder Name</div>
-                                <div class="col">Cashier</div>
-                                <div class="col end">Total</div>
-                                <div class="col narrow">Status</div>
-                                <div class="col very-narrow" name="delete"></div>
+                            <div class="header-row d-flex text-bg-700 fw-bolder" t-att-class="{ oe_hidden: ui.isSmall }">
+                                <div class="col wide p-2">Date</div>
+                                <div class="col wide p-2">Receipt Number</div>
+                                <div class="col p-2">Customer</div>
+                                <div class="col wide p-2" t-if="showCardholderName()">Cardholder Name</div>
+                                <div class="col p-2">Cashier</div>
+                                <div class="col end p-2">Total</div>
+                                <div class="col narrow p-2">Status</div>
+                                <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: isHighlighted(order) }" t-on-click="() => this.onClickOrder(order)">
-                                    <div class="col wide">
+                                <div class="order-row" t-att-class="{ 'highlight text-bg-primary': 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>
                                     </div>
-                                    <div class="col wide">
+                                    <div class="col wide p-2">
                                         <div><t t-esc="order.name"></t></div>
                                         <div t-if="ui.isSmall"><t t-esc="getStatus(order)"></t></div>
                                     </div>
-                                    <div class="col" t-if="!ui.isSmall">
+                                    <div class="col p-2" t-if="!ui.isSmall">
                                         <div><t t-esc="getPartner(order)"></t></div>
                                     </div>
-                                    <div t-if="showCardholderName() and !ui.isSmall" class="col">
+                                    <div t-if="showCardholderName() and !ui.isSmall" class="col p-2">
                                         <div><t t-esc="getCardholderName(order)"></t></div>
                                     </div>
-                                    <div class="col">
+                                    <div class="col p-2">
                                         <div t-if="ui.isSmall"><t t-esc="getPartner(order)"></t></div>
                                         <div t-att-class = "ui.isSmall ? 'cashier':''"><t t-esc="getCashier(order)"></t></div>
                                     </div>
-                                    <div class="col end" t-if="!ui.isSmall">
+                                    <div class="col end p-2" t-if="!ui.isSmall">
                                         <div><t t-esc="getTotal(order)"></t></div>
                                     </div>
-                                    <div class="col narrow" t-if="!ui.isSmall">
+                                    <div class="col narrow p-2" t-if="!ui.isSmall">
                                         <div><t t-esc="getStatus(order)"></t></div>
                                     </div>
-                                    <div t-if="!shouldHideDeleteButton(order)" class="col very-narrow delete-button" name="delete" t-on-click.stop="() => this.onDeleteOrder(order)">
+                                    <div t-if="!shouldHideDeleteButton(order)" class="col very-narrow delete-button p-2" name="delete" t-on-click.stop="() => this.onDeleteOrder(order)">
                                         <i class="fa fa-trash" aria-hidden="true"/><t t-if="ui.isSmall"> Delete</t>
                                     </div>
-                                    <div t-else="" class="col very-narrow"></div>
+                                    <div t-else="" class="col very-narrow p-2"></div>
                                 </div>
                             </t>
                         </t>
                         <t t-else="">
-                            <div class="empty-order-list">
-                                <i role="img" aria-label="Shopping cart" title="Shopping cart" class="fa fa-shopping-cart"></i>
-                                <h1>No orders found</h1>
+                            <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>
                             </div>
                         </t>
                     </div>
                 </div>
-                <div class="leftpane">
+                <div class="leftpane d-flex flex-column flex-grow-1 w-100 h-50 h-md-100 bg-200">
                     <t t-set="_selectedSyncedOrder" t-value="getSelectedSyncedOrder()" />
                     <t t-set="_selectedOrderlineId" t-value="getSelectedOrderlineId()" />
                     <OrderDetails
@@ -118,14 +118,14 @@
                         order="_selectedSyncedOrder"
                         selectedOrderlineId="_selectedOrderlineId"
                         highlightHeaderNote="_state.ui.highlightHeaderNote" />
-                    <div class="pads">
-                        <div class="control-buttons">
+                    <div class="pads border-top">
+                        <div class="control-buttons d-flex flex-wrap border-bottom overflow-hidden">
                             <InvoiceButton
                                 onInvoiceOrder.bind="onInvoiceOrder"
                                 order="_selectedSyncedOrder" />
                             <ReprintReceiptButton order="_selectedSyncedOrder" />
                         </div>
-                        <div class="subpads">
+                        <div class="subpads d-flex">
                             <ActionpadWidget
                                 partner="getSelectedPartner()"
                                 actionName="constructor.numpadActionName"
diff --git a/addons/point_of_sale/static/src/app/store/cash_opening_popup/cash_opening_popup.xml b/addons/point_of_sale/static/src/app/store/cash_opening_popup/cash_opening_popup.xml
index 9771aefe689..66f956bb48b 100644
--- a/addons/point_of_sale/static/src/app/store/cash_opening_popup/cash_opening_popup.xml
+++ b/addons/point_of_sale/static/src/app/store/cash_opening_popup/cash_opening_popup.xml
@@ -2,25 +2,28 @@
 <templates id="template" xml:space="preserve">
     <t t-name="point_of_sale.CashOpeningPopup" owl="1">
         <div class="popup opening-cash-control">
-            <header class="title drag-handle">
-                OPENING CASH CONTROL
-            </header>
-            <main class="body">
-                <div class="opening-cash-section">
-                    <span class="info-title">Opening cash</span>
-                    <div class="cash-input-sub-section" t-on-input="handleInputChange">
-                        <input class="pos-input" t-ref="cash-input" t-on-focus="ev=>ev.target.select()"/>
-                        <div class="button icon" t-on-click="openDetailsPopup">
-                            <i class="fa fa-money" role="img" title="Open the money details popup"/>
+            <div class="modal-header drag-handle">
+                <h4 class="modal-title">Opening Cash Control</h4>
+            </div>
+            <main class="modal-body">
+                <div class="opening-cash-section mb-3">
+                    <span class="info-title d-flex flex-grow-1 align-items-start">Opening cash</span>
+                    <div class="cash-input-sub-section input-group" t-on-input="handleInputChange">
+                        <input class="pos-input form-control" type="number" t-model.number="state.openingCash" t-ref="cash-input" t-on-focus="ev=>ev.target.select()"/>
+                        <div class="button icon btn btn-secondary" t-on-click="openDetailsPopup">
+                            <i class="fa fa-money fa-2x" role="img" title="Open the money details popup"/>
                         </div>
                     </div>
                 </div>
-                <textarea placeholder="Add an opening note..." class="opening-cash-notes" t-model="state.notes"/>
-            </main>
-            <footer class="footer">
-                <div class="button dynamic-size" t-on-click="confirm">
-                    Open session <span t-esc="env.utils.formatCurrency(state.openingCash)"/> 
+                <div class="opening-notes-container d-flex flex-column align-items-start">
+                    <label class="form-label" for="openingNotes">Opening note</label>
+                    <textarea class="opening-notes form-control" id="openingNotes" rows="4" t-model="state.notes" placeholder="Add an opening note...">
+                        <t t-esc="openingNotes"/>
+                    </textarea>
                 </div>
+            </main>
+            <footer class="footer modal-footer">
+                <div class="button btn btn-lg btn-primary" t-on-click="confirm">Open session <span t-esc="env.utils.formatCurrency(state.openingCash)"/></div>
             </footer>
         </div>
     </t>
diff --git a/addons/point_of_sale/static/src/app/store/pos_store.js b/addons/point_of_sale/static/src/app/store/pos_store.js
index c760f2eb585..5d71d1490e4 100644
--- a/addons/point_of_sale/static/src/app/store/pos_store.js
+++ b/addons/point_of_sale/static/src/app/store/pos_store.js
@@ -70,7 +70,6 @@ const getProductImage = memoize(function getProductImage(productId, writeDate) {
 });
 
 export class PosStore extends Reactive {
-    hasBigScrollBars = false;
     loadingSkipButtonIsShown = false;
     mainScreen = { name: null, component: null };
     tempScreen = null;
@@ -205,7 +204,6 @@ export class PosStore extends Reactive {
         );
         const { start_category, iface_start_categ_id } = this.config;
         this.selectedCategoryId = (start_category && iface_start_categ_id?.[0]) || 0;
-        this.hasBigScrollBars = this.config.iface_big_scrollbars;
         // Push orders in background, do not await
         this.push_orders();
         this.markReady();
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 e353602a5e0..6fd9d4fea93 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
@@ -3,21 +3,22 @@
 
     <t t-name="point_of_sale.RadioProductAttribute" owl="1">
         <div class="configurator_radio" t-ref="root">
-            <div class="table">
+            <div class="d-flex flex-column gap-3">
                 <t t-foreach="values" t-as="value" t-key="value.id">
-                    <div class="attribute-name-cell">
-                        <input type="radio" t-model="state.selected_value" t-att-name="attribute.id"
+                    <div class="attribute-name-cell form-check">
+                        <input class="form-check-input" type="radio" t-model="state.selected_value" t-att-name="attribute.id"
                                 t-attf-id="{{ attribute.id }}_{{ value.id }}" t-att-value="value.id"/>
-                        <span t-esc="value.name"/>
-                        <label t-att-name="value.name" t-attf-for="{{ attribute.id }}_{{ value.id }}"/>
-                    </div>
-                    <div t-if="value.price_extra" class="price-extra-cell">
-                        <span class="price_extra">
-                            + <t t-esc="env.utils.formatCurrency(value.price_extra)"/>
-                        </span>
+                        <label class="form-check-label" t-att-name="value.name" t-attf-for="{{ attribute.id }}_{{ value.id }}">
+                            <span t-esc="value.name"/>
+                        </label>
+                        <div t-if="value.price_extra" class="price-extra-cell d-inline-block ms-3">
+                            <span class="price_extra px-2 py-1 rounded-pill text-bg-info">
+                                + <t t-esc="env.utils.formatCurrency(value.price_extra)"/>
+                            </span>
+                        </div>
                     </div>
                     <div t-if="value.id == state.selected_value &amp;&amp; value.is_custom" class="custom-value-cell">
-                        <input class="custom_value" type="text" t-model="state.custom_value"/>
+                        <input class="custom_value form-control form-control-lg mt-2" type="text" t-model="state.custom_value"/>
                     </div>
                 </t>
             </div>
@@ -28,7 +29,7 @@
         <div>
             <t t-set="is_custom" t-value="false"/>
 
-            <select class="configurator_select" t-model="state.selected_value">
+            <select class="configurator_select form-select form-select-lg" t-model="state.selected_value">
                 <option t-foreach="values" t-as="value" t-key="value.id" t-att-value="value.id">
                     <t t-set="is_custom" t-value="is_custom || (value.is_custom &amp;&amp; value.id == state.selected_value)"/>
                     <t t-esc="value.name"/>
@@ -38,7 +39,7 @@
                 </option>
             </select>
 
-            <input class="custom_value" t-if="is_custom" type="text" t-model="state.custom_value"/>
+            <input class="custom_value form-control form-control-lg mt-2" t-if="is_custom" type="text" t-model="state.custom_value"/>
         </div>
     </t>
 
@@ -46,82 +47,79 @@
         <div>
             <t t-set="is_custom" t-value="false"/>
 
-            <ul class="color_attribute_list">
+            <ul class="color_attribute_list d-flex gap-3">
                 <li t-foreach="values" t-as="value" t-key="value.id" class="color_attribute_list_item">
                     <t t-set="is_custom" t-value="is_custom || (value.is_custom &amp;&amp; value.id == state.selected_value)"/>
-                    <label t-attf-class="configurator_color {{ value.id == state.selected_value ? 'active' : '' }}"
+                    <label t-attf-class="configurator_color rounded border {{ value.id == state.selected_value ? 'active border-3 border-primary' : 'border-3 border-secondary' }}"
                         t-attf-style="background-color: {{ value.html_color }};" t-att-data-color="value.name">
-                        <input type="radio" t-model="state.selected_value" t-att-value="value.id" t-att-name="attribute.id"/>
+                        <input class="m-4 opacity-0" type="radio" t-model="state.selected_value" t-att-value="value.id" t-att-name="attribute.id"/>
                     </label>
                 </li>
             </ul>
 
-            <input class="custom_value" t-if="is_custom" type="text" t-model="state.custom_value"/>
+            <input class="custom_value form-control form-control-lg mt-2" t-if="is_custom" type="text" t-model="state.custom_value"/>
         </div>
     </t>
 
     <t t-name="point_of_sale.ProductConfiguratorPopup" owl="1">
         <t t-if="!ui.isSmall">
             <div class="popup popup-text popup-med product-configurator-popup">
-                <header class="title">
-                    <t t-esc="props.product.display_name" />
-                </header>
+                <div class="modal-header drag-handle">
+                    <h4 class="modal-title"><t t-esc="props.product.display_name" /></h4>
+                </div>
     
-                <main class="body product_configurator_attributes col-lg-4 col-md-6 col-sm-12">
-                    <div t-foreach="props.attributes" t-as="attribute" t-key="attribute.id" class="attribute">
-                        <div class="attribute_name" t-esc="attribute.name"/>
+                <main class="body modal-body product_configurator_attributes m-0 text-start">
+                    <div t-foreach="props.attributes" t-as="attribute" t-key="attribute.id" class="attribute mb-3">
+                        <div class="attribute_name mb-2 fw-bolder" t-esc="attribute.name"/>
                         <RadioProductAttribute t-if="attribute.display_type === 'radio' or attribute.display_type === 'pills'" attribute="attribute"/>
                         <SelectProductAttribute t-elif="attribute.display_type === 'select'" attribute="attribute"/>
                         <ColorProductAttribute t-elif="attribute.display_type === 'color'" attribute="attribute"/>
                     </div>
                 </main>
     
-                <footer class="footer footer-flex">
-                    <div class="button highlight confirm" t-on-click="confirm">
-                        Add
-                    </div>
-                    <div class="button cancel" t-on-click="cancel">
+                <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>
                 </footer>
             </div>
         </t>
         <t t-else="">
             <div class="popup mobile popup-text popup-med product-configurator-popup">
-                <main class="body mobile product_configurator_attributes col-lg-4 col-md-6 col-sm-12">
-                    <div class="product-img">
-                        <img t-att-src="imageUrl" t-att-alt="props.product.display_name" />
-                        <div class="product-info">
-                            <span><t t-esc="props.product.display_name" ></t></span>
-                            <span><t t-esc="unitPrice" ></t></span>
-                        </div>
-                        
+                <div class="modal-header">
+                    <h4 class="modal-title"><t t-esc="props.product.display_name" /></h4>
+                    <span><t t-esc="unitPrice" ></t></span>
+                </div>
+                <main class="body modal-body mobile product_configurator_attributes d-flex flex-column text-start">
+                    <div class="product-img d-flex justify-content-center h-50 p-2" >
+                        <img class="h-100" t-att-src="imageUrl" t-att-alt="props.product.display_name" />
                     </div>
-                    <div t-foreach="props.attributes" t-as="attribute" t-key="attribute.id" class="attribute">
-                        <div class="attribute_name" t-esc="attribute.name"/>
+                    <div t-foreach="props.attributes" t-as="attribute" t-key="attribute.id" class="attribute mb-3">
+                        <div class="attribute_name mb-2 fw-bolder" t-esc="attribute.name"/>
                         <RadioProductAttribute t-if="attribute.display_type === 'radio' or attribute.display_type === 'pills'" attribute="attribute"/>
                         <SelectProductAttribute t-elif="attribute.display_type === 'select'" attribute="attribute"/>
                         <ColorProductAttribute t-elif="attribute.display_type === 'color'" attribute="attribute"/>
                     </div>
                 </main>
     
-                <footer class="footer footer-flex mobile">
-                    <div class="quantity-selector">
-                        <button t-on-click="addOneQuantity">
-                            <i class="fa fa-plus" aria-hidden="true"></i>
-                        </button>
-                        <span class="quantity"><t t-esc="state.quantity"></t></span>
-                        <button t-on-click="removeOneQuantity">
+                <footer class="footer footer-flex mobile modal-footer">
+                    <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>
                         </button>
+                        <span class="quantity mx-3"><t t-esc="state.quantity"></t></span>
+                        <button class="btn btn-lg btn-secondary" t-on-click="addOneQuantity">
+                            <i class="fa fa-plus" aria-hidden="true"></i>
+                        </button>
                     </div>
-                    <div class="confirm-line">
-                        <div class="button highlight confirm" t-on-click="confirm">
-                            Add
-                        </div>
-                        <div class="button cancel" 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>
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 b6172c5a320..56e3ff93a49 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,12 +2,10 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.EditListInput" owl="1">
-        <div>
-            <input type="text" t-att-value="props.item.text" t-on-input="onInput" class="popup-input list-line-input"
-                   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>
+        <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>
     </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 876acf4bc2a..77ffeafb776 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
@@ -3,25 +3,25 @@
 
     <t t-name="point_of_sale.EditListPopup" owl="1">
         <div class="popup popup-text edit-list-popup" t-ref="root">
-            <header class="title">
-                <t t-esc="props.title" />
+            <div class="modal-header">
+                <h4 class="modal-title title">
+                    <t t-esc="props.title" />
+                </h4>
                 <span class="sub-title" t-esc="props.name"/>
-            </header>
-            <main>
-                <div class="list-lines">
-                    <t t-foreach="state.array" t-as="item" t-key="item._id">
-                        <EditListInput item="item" createNewItem.bind="createNewItem" removeItem="() => this.removeItem(item._id)"
-                                       deletable="_hasMoreThanOneItem()" onInputChange.bind="onInputChange" />
-                    </t>
-                </div>
+            </div>
+            <main class="modal-body">
+                <t t-foreach="state.array" t-as="item" t-key="item._id">
+                    <EditListInput item="item" createNewItem.bind="createNewItem" removeItem="() => this.removeItem(item._id)"
+                                    deletable="_hasMoreThanOneItem()" onInputChange.bind="onInputChange" />
+                </t>
             </main>
-            <footer class="footer footer-flex">
-                <div class="button confirm highlight" t-on-click="confirm">
-                    Ok
-                </div>
-                <div class="button cancel" t-on-click="cancel">
+            <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>
             </footer>
         </div>
     </t>
diff --git a/addons/point_of_sale/static/src/app/utils/confirm_popup/confirm_popup.xml b/addons/point_of_sale/static/src/app/utils/confirm_popup/confirm_popup.xml
index fec0b1a16b7..b22f7e2be31 100644
--- a/addons/point_of_sale/static/src/app/utils/confirm_popup/confirm_popup.xml
+++ b/addons/point_of_sale/static/src/app/utils/confirm_popup/confirm_popup.xml
@@ -3,17 +3,19 @@
 
     <t t-name="point_of_sale.ConfirmPopup" owl="1">
         <div class="popup popup-confirm">
-            <header class="title drag-handle">
-                <t t-esc="props.title" />
-            </header>
-            <main class="body">
+            <div class="modal-header">
+                <h4 class="modal-title title drag-handle">
+                    <t t-esc="props.title" />
+                </h4>
+            </div>
+            <main class="modal-body">
                 <t t-esc=" props.body" />
             </main>
-            <footer class="footer">
-                <div class="button confirm" t-on-click="confirm">
+            <footer class="footer modal-footer">
+                <div class="button confirm btn btn-lg btn-primary" t-on-click="confirm">
                     <t t-esc="props.confirmText" />
                 </div>
-                <div class="button cancel" t-on-click="cancel">
+                <div class="button cancel btn btn-lg btn-secondary" t-on-click="cancel">
                     <t t-esc="props.cancelText" />
                 </div>
             </footer>
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 721c08dd5bd..235a7aa7aa2 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
@@ -3,19 +3,21 @@
 
     <t t-name="point_of_sale.DatePickerPopup" owl="1">
             <div class="popup">
-                <header class="title">
-                    <t t-esc="props.title" />
-                </header>
-                <main>
-                    <input type="date" t-model="state.shippingDate" t-ref="input" t-att-min="_today()"/>
+                <div class="modal-header">
+                    <h4 class="modal-title title">
+                        <t t-esc="props.title" />
+                    </h4>
+                </div>
+                <main class="modal-body">
+                    <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">
-                    <div class="button confirm highlight" t-on-click="confirm">
-                        <t t-esc="props.confirmText" />
-                    </div>
-                    <div class="button cancel" t-on-click="cancel">
+                <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>
             </div>
     </t>
diff --git a/addons/point_of_sale/static/src/app/utils/input_popups/number_popup.scss b/addons/point_of_sale/static/src/app/utils/input_popups/number_popup.scss
new file mode 100644
index 00000000000..238dc9864e2
--- /dev/null
+++ b/addons/point_of_sale/static/src/app/utils/input_popups/number_popup.scss
@@ -0,0 +1,5 @@
+.popup-numpad .input-button, 
+.popup-numpad .mode-button {
+    height: 50px;
+    width: 50px;
+}
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 bf4d89abcb2..5b63d8cc3c2 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
@@ -2,67 +2,65 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.NumberPopup" owl="1">
-        <div class="popup popup-number" t-att-class="{ 'popup-password': props.isPassword }" t-if="!isMobile()">
-            <header class="title drag-handle">
-                <span><t t-esc="props.title"/></span>
-                <span t-if="props.subtitle" class="subtitle"><t t-esc="props.subtitle"/></span>
-            </header>
-            <div class="input-symbol">
-                <div class="popup-input value active">
+        <div class="popup popup-number w-auto" t-att-class="{ 'popup-password': props.isPassword }" t-if="!isMobile()">
+            <div class="modal-header drag-handle">
+                <h4 class="modal-title title"><t t-esc="props.title" /></h4>
+                <span t-if="props.subtitle" class="subtitle p-1"><t t-esc="props.subtitle"/></span>
+            </div>
+            <div class="input-symbol pt-3">
+                <div class="popup-input value active form-control form-control-lg w-75 mx-auto">
                     <span class="input-value" t-att-class="{ 'highlight': state.toStartOver }"><t t-esc="inputBuffer"/></span>
                     <span t-if="props.inputSuffix"><t t-esc="props.inputSuffix" /></span>
                 </div>
             </div>
-            <div class="popup-numpad">
+            <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" t-on-mousedown.prevent="() => this.sendInput('1')">1</button>
-                <button class="input-button number-char" t-on-mousedown.prevent="() => this.sendInput('2')">2</button>
-                <button class="input-button number-char" t-on-mousedown.prevent="() => this.sendInput('3')">3</button>
+                <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" t-on-mousedown.prevent="() => this.sendInput('+1')">+1</button>
+                    <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" t-on-mousedown.prevent="() => this.sendInput('+10')">+10</button>
+                    <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" t-on-mousedown.prevent="() => this.sendInput('4')">4</button>
-                <button class="input-button number-char" t-on-mousedown.prevent="() => this.sendInput('5')">5</button>
-                <button class="input-button number-char" t-on-mousedown.prevent="() => this.sendInput('6')">6</button>
+                <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" t-on-mousedown.prevent="() => this.sendInput('+2')">+2</button>
+                    <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" t-on-mousedown.prevent="() => this.sendInput('+20')">+20</button>
+                    <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" t-on-mousedown.prevent="() => this.sendInput('7')">7</button>
-                <button class="input-button number-char" t-on-mousedown.prevent="() => this.sendInput('8')">8</button>
-                <button class="input-button number-char" t-on-mousedown.prevent="() => this.sendInput('9')">9</button>
-                <button t-if="!props.isPassword" class="input-button number-char" t-on-mousedown.prevent="() => this.sendInput('-')">-</button>
+                <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" t-on-mousedown.prevent="() => this.sendInput('Delete')">C</button>
-                <button class="input-button number-char" t-on-mousedown.prevent="() => this.sendInput('0')">0</button>
-                <button class="input-button number-char dot" t-on-mousedown.prevent="() => this.sendInput(decimalSeparator)">
+                <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" t-on-mousedown.prevent="() => this.sendInput('Backspace')">
+                <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 />
             </div>
-            <footer class="footer centered">
-                <div class="button confirm highlight" t-on-mousedown.prevent="confirm">
-                    <div class="flex-column">
+            <footer class="footer centered modal-footer">
+                <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">
+                        <span t-if="props.getInputBufferReminder(state.buffer)" class="input-buffer-reminder small">
                             (<t t-esc="props.getInputBufferReminder(state.buffer)" />)
                         </span>
-                    </div>
-                </div>
-                <div class="button cancel" t-on-mousedown.prevent="cancel">
+                </button>
+                <button class="button cancel btn btn-lg btn-secondary" t-on-mousedown.prevent="cancel">
                     <t t-esc="props.cancelText" />
-                </div>
+                </button>
             </footer>
         </div>
         <div class="popup" t-att-class="{ 'popup-password': props.isPassword }" t-else="">
@@ -72,13 +70,13 @@
             <main>
                 <input type="text" t-model="state.payload" t-ref="input" class="value payment-input-number" inputmode="decimal">
             </main>
-            <footer class="footer centered">
-                <div class="button confirm highlight" t-on-mousedown.prevent="confirm">
+            <footer class="footer centered modal-footer">
+                <button class="button confirm highlight btn btn-lg btn-primary" t-on-mousedown.prevent="confirm">
                     <t t-esc="props.confirmText" />
-                </div>
-                <div class="button cancel" t-on-mousedown.prevent="cancel">
+                </button>
+                <button class="button cancel btn btn-lg btn-secondary" t-on-mousedown.prevent="cancel">
                     <t t-esc="props.cancelText" />
-                </div>
+                </button>
             </footer>
         </div>
     </t>
diff --git a/addons/point_of_sale/static/src/app/utils/input_popups/selection_popup.scss b/addons/point_of_sale/static/src/app/utils/input_popups/selection_popup.scss
new file mode 100644
index 00000000000..a8a03e5d63c
--- /dev/null
+++ b/addons/point_of_sale/static/src/app/utils/input_popups/selection_popup.scss
@@ -0,0 +1,3 @@
+.popup-selection .selection {
+    max-height: 300px;
+}
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 0b12972c687..5d01c34501d 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
@@ -3,20 +3,23 @@
 
     <t t-name="point_of_sale.SelectionPopup" owl="1">
         <div class="popup popup-selection">
-            <header class="title drag-handle">
-                <t t-esc="props.title" />
-            </header>
-            <div class="selection scrollable-y">
+            <div class="modal-header drag-handle">
+                <h4 class="modal-title"><t t-esc="props.title" /></h4>
+            </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">
-                    <div class="selection-item" t-att-class="{ selected: 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 text-bg-primary': item.isSelected }"
                             t-on-click="() => this.selectItem(item.id)">
-                        <span t-esc="item.label" />
-                        <span t-esc="item.description" t-if="item.description" />
-                    </div>
+                        <div class="d-flex flex-column">
+                            <span t-esc="item.label" />
+                            <span t-esc="item.description" t-if="item.description" />
+                        </div>
+                        <i class="oi oi-chevron-right"/>
+                    </button>
                 </t>
             </div>
-            <footer class="footer">
-                <div class="button cancel" t-on-click="cancel">
+            <footer class="footer modal-footer">
+                <div class="button cancel btn btn-lg btn-primary" t-on-click="cancel">
                     <t t-esc="props.cancelText" />
                 </div>
             </footer>
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 c7fa2b5fd3d..87cf427d63e 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
@@ -3,20 +3,19 @@
 
     <t t-name="point_of_sale.TextInputPopup" owl="1">
             <div class="popup popup-textinput">
-                <header class="title">
-                    <t t-esc="props.title" />
-                </header>
-                <main>
-                    <p t-esc="props.body" />
-                    <input type="text" t-model="state.inputValue" t-ref="input" t-att-placeholder="props.placeholder"/>
-                </main>
-                <div class="footer footer-flex">
-                    <div class="button confirm highlight" t-on-click="confirm">
-                        <t t-esc="props.confirmText" />
-                    </div>
-                    <div class="button cancel" t-on-click="cancel">
+                <div class="modal-header">
+                    <h4 class="modal-title"><t t-esc="props.title" /></h4>
+                </div>
+                <div class="modal-body">
+                    <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>
             </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 8f256bf44a0..572656cf313 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
@@ -3,17 +3,22 @@
 
     <t t-name="point_of_sale.TextAreaPopup" owl="1">
         <div class="popup popup-textarea">
-            <header class="title drag-handle">
-                <t t-esc="props.title" />
-            </header>
-            <textarea t-model="state.inputValue" t-ref="input"></textarea>
-            <footer class="footer footer-flex">
-                <div class="button confirm highlight" t-on-click="confirm">
-                    <t t-esc="props.confirmText" />
-                </div>
-                <div class="button cancel" t-on-click="cancel">
+            <div class="modal-header">
+                <h4 class="modal-title"><t t-esc="props.title" /></h4>
+                <!-- when modal fixed <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>-->
+            </div>
+
+            <div class="modal-body">
+                <textarea class="form-control" t-ref="input" placeholder="Add a note..." t-model="state.inputValue" rows="4" />
+            </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>
             </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
new file mode 100644
index 00000000000..d82b1f27567
--- /dev/null
+++ b/addons/point_of_sale/static/src/app/utils/money_details_popup/money_details_popup.scss
@@ -0,0 +1,3 @@
+.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 7af6917631a..f4feabd9747 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
@@ -2,16 +2,16 @@
 <templates id="template" xml:space="preserve">
     <t t-name="point_of_sale.MoneyDetailsPopup" owl="1">
         <div class="popup money-details">
-            <main class="body">
-                <div class="money-details-title">
-                    Coins/Bills
-                </div>
-                <div class="money-details-info">
+            <div class="modal-header">
+                <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 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" t-on-input="updateMoneyDetailsAmount">
-                                <input class="pos-input" t-att-id="moneyValue" type="number" t-model.number="state.moneyDetails[moneyValue]" t-on-focus="ev=>ev.target.select()"/>
-                                <label class="oe_link_icon" t-att-for="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()"/>
+                                <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"/>
                                     <t t-if="currency.position === 'after'">&nbsp;<t t-esc="currency.symbol"/></t>
@@ -20,14 +20,14 @@
                         </t>
                     </div>
                 </div>
-                <div class="total-section">
-                    <span>Total </span>
-                    <label t-esc="env.utils.formatCurrency(state.total)"/>
-                </div>
+                <h4 class="total-section rounded py-2">
+                    Total 
+                    <t t-esc="env.utils.formatCurrency(state.total)"/>
+                </h4>
             </main>
-            <footer class="footer footer-flex">
-                <div class="button highlight" t-on-click="confirm">Confirm</div>
-                <div class="button" t-on-click="cancel">Discard</div>
+            <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>
             </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
index 34e8ec2c52d..a1adfc18801 100644
--- 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
@@ -1,37 +1,3 @@
 .pos .opening-cash-control .body{
     margin: 24px;
 }
-
-.pos .opening-cash-control .opening-cash-section {
-    display: flex;
-    justify-content: space-between;
-    margin: 40px 0;
-}
-
-.pos .opening-cash-section .info-title {
-    font-size: 20px;
-    font-weight: bold;
-}
-
-.pos .opening-cash-section .cash-input-sub-section {
-    display: flex;
-}
-
-.pos .cash-input-sub-section .pos-input {
-    width: 85px;
-}
-
-.pos .cash-input-sub-section .button.icon {
-    margin: 0;
-    float: unset;
-}
-
-.pos .opening-cash-control .opening-cash-notes {
-    font-style: italic;
-    font-weight: 350;
-    width: calc(100% - 20px); /* textarea has a padding of 10px */
-    line-height: 20px;
-    resize: none;
-    height: 150px;
-    border-radius: 0px;
-}
diff --git a/addons/point_of_sale/static/src/css/popups/closing_pos_popup.css b/addons/point_of_sale/static/src/css/popups/closing_pos_popup.css
deleted file mode 100644
index 7084395b6c7..00000000000
--- a/addons/point_of_sale/static/src/css/popups/closing_pos_popup.css
+++ /dev/null
@@ -1,218 +0,0 @@
-.pos .close-pos-popup {
-    max-width: 800px !important;
-    max-height: 800px;
-}
-
-.pos .close-pos-popup .body{
-    margin: 0;
-    padding: 3% 5%;
-}
-
-.pos .close-pos-popup .body.notes{
-    border-top: solid 1px rgba(60, 60, 60, 0.1);
-}
-.pos .close-pos-popup header {
-    display: flex;
-    justify-content: space-between;
-    width: auto;
-    height: 65px;
-    background-color: rgb(255, 255, 255);
-    border-bottom: solid 1px rgba(60, 60, 60, 0.1);
-}
-
-.pos .close-pos-popup .title,
-.pos .close-pos-popup .total-orders {
-    padding: 2.5%;
-    border-bottom: none;
-}
-
-.pos .close-pos-popup .total-orders .amount {
-    display: inline-block; 
-}
-
-.notes-container {
-    display: flex;
-    justify-content: space-around;
-    box-sizing: border-box;
-    gap:20px;
-    height: 120px; 
-}
-
-.pos .close-pos-popup .opening-notes-container{
-    text-align: left;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    gap: 5px
-}
-
-.pos .close-pos-popup .opening-notes {
-    color: darkgrey;
-    text-align: left;
-    font-weight: 350;
-    box-sizing: border-box;
-    line-height: 20px;
-    overflow-y: auto;
-    word-break: break-word;
-    border-radius: 0px; 
-    resize: none;
-    height: 100%;
-}
-
-.pos .close-pos-popup .closing-notes-container{
-    text-align: left;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    gap: 5px;
-}
-
-.pos .close-pos-popup .closing-notes { 
-    font-style: italic;
-    font-weight: 350;
-    box-sizing: border-box;
-    line-height: 20px;
-    resize: none;
-    border-radius: 0px;
-    height: 100%;
-}
-
-.pos .close-pos-popup .payment-methods-overview {
-    max-height: 320px;
-    overflow: auto;
-}
-
-.pos .close-pos-popup .payment-methods-overview table {
-    width: 100%;
-    text-align: left;
-}
-
-.pos .close-pos-popup .payment-methods-overview table tr {
-    height: 35px
-}
-
-.pos .close-pos-popup .flex {
-    display: flex;
-    max-width: 200px;}
-
-.pos .close-pos-popup th:nth-child(1),
-.pos .close-pos-popup td:nth-child(1) {
-    padding-right: 5px;
-}
-
-.pos .close-pos-popup th:nth-child(2),
-.pos .close-pos-popup td:nth-child(2) {
-    text-align: right;
-    padding-right: 5%;
-    white-space: nowrap;
-}
-
-.pos .close-pos-popup th:nth-child(3),
-.pos .close-pos-popup td:nth-child(3) {
-    padding-left: 5px;
-}
-
-.pos .close-pos-popup th:nth-child(4),
-.pos .close-pos-popup td:nth-child(4) {
-    text-align: right;
-    padding-left: 10px;
-}
-.pos .close-pos-popup .payment-methods-overview table .pos-input {
-    width: 75%;
-    text-align: right;
-    padding-right: 7%;
-    margin-right: 3%;
-}
-
-.pos .close-pos-popup .payment-methods-overview table .warning {
-    color: red;
-    font-weight: bold;
-}
-
-.pos .close-pos-popup .body .button.icon {
-    margin: 0;
-    float: unset;
-    margin-right: 0 20px 0 20px;
-}
-
-.pos .close-pos-popup .payment-methods-overview table .cash-sign {
-    width: 10px;
-    margin-right: 5px;
-}
-
-.pos .close-pos-popup .payment-methods-overview .cash-overview {
-    border-left: solid 2px darkgrey;
-    color: darkgrey;
-    font-size: 14px;
-}
-
-.pos .close-pos-popup .payment-methods-overview .cash-overview tr td:first-child {
-    padding-left: 10px;
-}
-
-
-.pos .close-pos-popup .invisible {
-    visibility: hidden;
-}
-
-.pos .close-pos-popup .accept-closing label.disabled {
-    cursor: default;
-    color: grey;
-}
-
-.pos .close-pos-popup .footer {
-    box-sizing: border-box;
-    padding-left: 10px;
-}
-
-.pos .close-pos-popup .footer .button {
-    float: left;
-    width: 16%;
-    min-width: 95px;
-}
-
-@media screen and (max-width: 768px) {
-    .pos .close-pos-popup {
-        overflow-y: auto;
-    }
-
-    .pos .close-pos-popup .footer {
-        display: flex;
-        flex-direction: column;
-        height: unset;
-        padding-left: 0;
-    }
-
-    .pos .close-pos-popup .footer .button {
-        width: 90% !important;
-        margin-left: auto;
-        margin-right: auto;
-    }
-
-    .pos .close-pos-popup .footer .button:last-of-type {
-        margin-bottom: 10px;
-    }
-}
-
-.pos .close-pos-popup .footer .small.button {
-    float: right;
-    width: 6%;
-    min-width: 120px;
-}
-
-.pos .close-pos-popup .footer .small.button .daily.sale {
-    font-size : 14px; 
-    display: inline; 
-    margin-right: 10px;
-}
-
-.pos .close-pos-popup .footer .button.disabled {
-    cursor: default;
-    background: bottom;
-    color: unset;
-    border: solid 1px rgba(60, 60, 60, 0.1);
-}
-
-.pos .close-pos-popup .footer .button.disabled:active {
-    border: solid 1px rgba(60, 60, 60, 0.1);
-}
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
new file mode 100644
index 00000000000..50b2214ec30
--- /dev/null
+++ b/addons/point_of_sale/static/src/css/popups/closing_pos_popup.scss
@@ -0,0 +1,41 @@
+.close-pos-popup {
+    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);
+        white-space: nowrap;
+    }
+
+    th:nth-child(3),
+    td:nth-child(3) {
+        padding-left: map-get($spacers, 1);
+    }
+
+    th:nth-child(4),
+    td:nth-child(4) {
+        text-align: right;
+        padding-left: map-get($spacers, 2);
+    }
+}
+
+.cash-overview tr td:first-child {
+    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
index c1146d3e535..6bad5524859 100644
--- a/addons/point_of_sale/static/src/css/popups/common.css
+++ b/addons/point_of_sale/static/src/css/popups/common.css
@@ -1,5 +1,5 @@
 /* Input style used in cash control popups */
-.pos .popup .pos-input {
+/* .pos .popup .pos-input {
     text-align: right;
     font-size: 18px;
     color: #555555;
@@ -19,35 +19,4 @@
     border-color: blue;
     font-weight: bold;
 }
-
-.pos .popup .footer-flex {
-    display: flex;
-    justify-content: space-between;
-    padding: 0 10px;
-    box-sizing: border-box;
-}
-
-.pos .popup .footer-flex .button {
-    margin-right: 0;
-}
-
-.pos .popup .invalid-cash-input {
-    color: red;
-    animation: blink 0.5s linear;
-    animation-iteration-count: 2;
-    border: 1px solid red;
-    box-shadow: none !important;
-}
-
-.pos .popup .invalid-cash-input:focus {
-    border-color: red;
-}
-
-@keyframes blink {
-    0%, 100% {
-        border-color: red;
-    }
-    50% {
-        border-color: transparent;
-    }
-}
+ */
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
index ef31f0a60ca..afc96d8e6e7 100644
--- 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
@@ -1,8 +1,3 @@
-.pos .popup.money-details {
-    width: 350px;
-    max-height: 440px;
-}
-
 .pos .money-details.invisible {
     display: none;
 }
@@ -17,24 +12,6 @@
     font-weight: bold;
 }
 
-.pos .money-details .money-details-info {
-    margin-bottom: 20px;
-    display: flex;
-    justify-content: space-between;
-    overflow: auto;
-    max-height: 280px;
-    padding: 0 15px;
-}
-
-.pos .money-details .money-details-value {
-    display: flex;
-    margin: 10px 0;
-}
-
-.pos .money-details .total-section {
-    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
new file mode 100644
index 00000000000..ee5593e07b7
--- /dev/null
+++ b/addons/point_of_sale/static/src/css/popups/popups.scss
@@ -0,0 +1,105 @@
+.modal-footer > * {
+    margin: 0.25rem;
+}
+
+.pos .dialog{
+    width: 500px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 50px;
+    text-align: center;
+}
+.pos .dialog p{
+    font-size: 25px;
+    margin-top: 10px;
+    color: #5a5a5a;
+}
+
+.pos .modal-dialog .popup{
+    margin: auto;
+    max-width:500px;
+    width: 100%;
+    text-align:center;
+    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;
+}
+
+.pos .modal-dialog .popup-med{
+    max-width: 700px;
+    max-height: 600px;
+    height: auto;
+}
+
+.pos .popup-med .body {
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+.pos .popup .body.traceback {
+    height: 238px;
+    overflow: auto;
+    font-size: 14px;
+    white-space: pre-wrap;
+    text-align: left;
+    font-family: 'Inconsolata';
+    -webkit-user-select: text;
+       -moz-user-select: text;
+            user-select: text;
+}
+
+.pos .popup .button.big-left{
+    position:absolute;
+    top: 120px;
+    left:40px;
+    width: 180px;
+    height: 180px;
+    line-height:180px;
+}
+
+.pos .popup .button.big-right{
+    position:absolute;
+    top: 120px;
+    right:40px;
+    width: 180px;
+    height: 180px;
+    line-height:180px;
+}
+
+.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 */
+}
+
+.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/src/css/popups/product_info_popup.css b/addons/point_of_sale/static/src/css/popups/product_info_popup.css
deleted file mode 100644
index ea819c92689..00000000000
--- a/addons/point_of_sale/static/src/css/popups/product_info_popup.css
+++ /dev/null
@@ -1,186 +0,0 @@
-.product-info-popup {
-    max-width: 800px !important;
-}
-
-.product-info-popup .body {
-    max-height: 600px;
-    overflow: auto;
-}
-
-.product-info-popup .section-product-info-title {
-    display: flex;
-    justify-content: space-between;
-}
-
-.product-info-popup .section-product-info-title .global-info-title {
-    font-size: 32px;
-    font-weight: bold;
-}
-
-.product-info-popup .section-product-info-title  div:first-child{
-    max-width: 60%;
-}
-
-.product-info-popup .section-product-info-title .global-info-title.product-name {
-    max-width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.product-info-popup .subsection-list {
-    display: flex;
-}
-
-.product-info-popup .subsection-list .subsection-list-value {
-    margin-left: 30px;
-}
-
-.product-info-popup .column {
-    display: flex;
-    flex-direction: column;
-}
-
-.product-info-popup .flex-start {
-    align-items: flex-start;
-}
-
-.product-info-popup .flex-end {
-    align-items: flex-end;
-}
-
-.product-info-popup .section-title {
-    font-size: 24px;
-    font-weight: bold;
-    margin-top: 30px;
-    margin-bottom: 10px;
-    display: flex;
-    justify-content: space-between;
-    white-space: nowrap;
-}
-
-.product-info-popup .section-title-line {
-    width: 100%;
-    border-top: solid black 3px;
-    opacity: 25%;
-    margin: 15px 10px 0 10px;
-}
-
-.product-info-popup table {
-    text-align: left;
-}
-.product-info-popup .section-financials-body {
-    display: flex;
-    justify-content: space-between;
-}
-
-.product-info-popup .section-financials-body table {
-    width: 45%;
-}
-
-.product-info-popup .section-financials-body table td {
-    width: 50%;
-}
-
-.product-info-popup .section-inventory-body table td {
-    padding-right: 15px;
-}
-
-.product-info-popup .section-supplier-body table {
-    width: 50%;
-}
-
-.product-info-popup .section-supplier-body table div{
-    display: flex;
-    justify-content: space-between;
-}
-
-.product-info-popup .table-value {
-    padding-left: 15px;
-}
-
-.product-info-popup .searchable {
-    color: blue;
-    cursor: pointer;
-}
-
-.product-info-popup .searchable:hover {
-    font-weight: bold;
-}
-
-.product-info-popup .searchable:active {
-    color: darkblue;
-}
-
-.product-info-popup .section-order-body table {
-    text-align: left;
-}
-
-@media screen and (max-width: 768px) {
-    .product-info-popup .body {
-        max-height: 70vh;
-    }
-
-    .product-info-popup .section-product-info-title  div:first-child{
-        max-width: 100%;
-    }
-
-    .product-info-popup .section-product-info-title .global-info-title {
-        font-size: 28px;
-    }
-
-    .product-info-popup .section-product-info-title {
-        flex-direction: column;
-    }
-
-    .product-info-popup .flex-end {
-        align-items: unset;
-    }
-
-    .product-info-popup .section-financials-body {
-        flex-direction: column;
-    }
-
-    .product-info-popup .section-financials-body table {
-        width: unset;
-    }
-
-    .product-info-popup .mobile-table tr {
-        display: flex;
-        flex-direction: column;
-        text-align: left;
-    }
-
-    .product-info-popup .mobile-table .table-name:before {
-        content: "- ";
-    }
-
-    .product-info-popup .mobile-table td:not(:nth-child(1)) {
-        margin-left: 15px;
-    }
-
-    .product-info-popup .mobile-line {
-        display: flex;
-    }
-
-    .product-info-popup .mobile-line td {
-        margin: 0 15px;
-    }
-
-    .product-info-popup .section-supplier-body table {
-        width: 100%;
-    }
-
-    .product-info-popup .section-supplier-body table tr {
-        align-items: start;
-    }
-
-    .product-info-popup .section-variants-body .table-value {
-        padding-left: 0;
-    }
-
-    .product-info-popup .button.cancel {
-        float: unset;
-        margin: 10px auto;
-    }
-}
diff --git a/addons/point_of_sale/static/src/css/popups/text_area_popup.css b/addons/point_of_sale/static/src/css/popups/text_area_popup.css
deleted file mode 100644
index 0fa24109316..00000000000
--- a/addons/point_of_sale/static/src/css/popups/text_area_popup.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.popup-textarea textarea {
-    resize: none;
-    height: 110px;
-    width: 450px;
-}
-
-.popup-textarea footer {
-    display: flex;
-    justify-content: space-between;
-    padding: 0 10px;
-    box-sizing: border-box;
-}
-
-.pos .popup.popup-textarea footer .button {
-    margin-right: 0;
-}
diff --git a/addons/point_of_sale/static/src/scss/pos.scss b/addons/point_of_sale/static/src/scss/pos.scss
index 63247604c6e..279c762d5ef 100644
--- a/addons/point_of_sale/static/src/scss/pos.scss
+++ b/addons/point_of_sale/static/src/scss/pos.scss
@@ -5,3006 +5,53 @@
     src: url(../fonts/Inconsolata.otf);
 }
 
-/* ------ ORDER LINE STATUS ------- */
-.pos .order .orderline.has-change {
-    border-left: solid 6px #6EC89B;
-    color: #6EC89B;
-    padding-left: 9px;
-}
-.pos .order .orderline.skip-change {
-    border-left: solid 6px #7F82AC;
-    color: #7F82AC;
-    padding-left: 9px;
+button {
+    transition: all 150ms linear;
 }
 
-/* --- 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 button, .modal-dialog button {
-    padding: 8px;
-    min-width: 48px;
-}
-.ui-dialog .ui-icon-closethick{
-    float: right;
-}
-div.modal.in {
-    position: absolute;
-    background: white;
-    padding: 20px;
-    box-shadow: 0px 10px 20px black;
-    border-radius: 3px;
-    max-width: 600px;
-    max-height: 400px;
-    margin-top: -200px;
-    margin-left: -300px;
-    top: 50%;
-    left: 50%;
-}
-
-@media screen and (max-width: 768px) {
-    .ui-dialog, .modal-dialog {
-        padding: 0;
-        overflow: auto;
-    }
-}
-
-/* --- Generic Restyling and Resets --- */
-
-html {
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    font-family: sans-serif;
-}
-
-table {
-    border-spacing: 0px;
-    border-collapse: collapse;
-}
-td {
-    padding: 0px;
-}
-
-.oe_hidden{
-    display: none !important;
-}
-.oe_invisible{
-    visibility: hidden !important;
-}
-.clearfix:after {
-    content:" ";
+[type="text"], [type="password"], [type="number"], [type="email"], [type="tel"], textarea, select {
+    width: 100%;
     display: block;
-    visibility: hidden;
-    line-height: 0;
-    height: 0;
-    clear: both;
-}
-
-
-.pos input::-webkit-outer-spin-button,
-.pos input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-}
-
-.pos button{
-    box-shadow: none;
     outline: none;
-    border: none;
-    font-family: 'Lato';
-}
-.pos button:hover{
-    background: default;
-}
-.pos textarea {
-    font-family: "Lato";
-    font-size: 20px;
-    color: #444;
-    padding: 10px;
-    border-radius: 3px;
-    border: none;
-    box-shadow: 0px 0px 0px 1px rgb(220,220,220) inset;
-}
-.pos textarea:focus {
-    outline: none;
-    box-shadow: 0px 0px 0px 3px $primary;
-}
-
-
-.pos .oe_hidden{
-    display: none !important;
-}
-
-.pos ul, .pos li  {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-}
-
-.pos {
-    background: $gray-900;
-    --btn-height-size: 54px;
-    direction: ltr;
-    padding: 0;
-    margin: 0;
-    background-color: #f0eeee;
-    font-family: "Lato","Lucida Grande", Helvetica, Verdana, Arial;
-    color: $gray-700;
-    font-size: 12px;
-    /* Some elements inside .pos are allowed to be moved/resized. When
-     * this 'move/resize' event is performed in touch devices, .pos
-     * element also tries to scroll (as the default action of touchstart+
-     * touchmove events).
-     * Position is fixed to prevent the movement of .pos element during
-     * the described touch events.
-     */
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
-    text-shadow: none;
-    overflow: hidden;
-}
-
-/*  ********* Generic Layout Constructs  ********* */
-
-.pos .window{
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    height: 100%;
-    display: table;
-    border: none;
-    overflow: hidden;
-}
-.pos .window .subwindow{
-    display: table-row;
-    width: 100%;
-    height: 100%;
-}
-.pos .window .subwindow.collapsed{
-    height: 0px;
-}
-.pos .window .subwindow-container .collapsed{
-    height: 0px;
-}
-.pos .subwindow .subwindow-container{
-    height: 100%;
-    display: table-cell;
-    position: relative;
-}
-/* firefox seems to ignore the relative positionning of the subwindow-container
- * putting this inside subwindow-container fixes it.
- */
-.pos .subwindow .subwindow-container-fix{
-    height: 100%;
-    position: relative;
-}
-
-.pos .partnerlist-screen .window,
-.pos .partnerlist-screen .full-content .subwindow{
-    display: block;
-}
-.pos .partnerlist-screen .full-content .subwindow-container{
-    display: block;
-    height: 100%;
-}
-.pos .partnerlist-screen .full-content .subwindow.collapsed,
-.pos .partnerlist-screen .full-content .subwindow-container.collapsed{
-    height: auto;
-}
-
-/* ---- Scrollers ----- */
-
-.pos .scroller-container{
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-}
-.pos .scroller{
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-}
-.pos .scroller.horizontal{
-    overflow-y: hidden;
-    overflow-x: auto;
-}
-.pos .scroller-content{
-    -webkit-transform: translate3d(0,0,0);
-}
-.pos .scroller-container ::-webkit-scrollbar{
-    width:  10px;
-    height: 10px;
-}
-.pos .scroller-container ::-webkit-scrollbar-track{
-    background: $gray-200;
-    border-left: solid 1px rgb(200,200,200);
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px;
-}
-.pos .scroller-container ::-webkit-scrollbar-thumb{
-    background: rgb(168,168,168);
-    min-height: 30px;
-}
-
-/*  ********* Generic element styling  ********* */
-
-.pos a {
-    text-decoration: none;
-    color: $gray-700;
-}
-.pos button, .pos a.button {
-    display: inline-block;
-    cursor: pointer;
-    padding: 4px 10px;
-    font-size: 11px;
-    border: 1px solid $gray-200;
-    color: $primary;
-    background: #fff;
-}
-.pos ul, .pos ol {
-    padding: 0;
-    margin: 0;
-}
-.pos li {
-    list-style-type: none;
-}
-.pos .pos-right-align {
-    text-align: right;
-}
-.pos .pos-center-align {
-    text-align: center;
-}
-.pos .pos-disc-font {
-    font-size: 12px;
-    font-style:italic;
-    color: #808080;
-}
-
-/*  ********* The black header bar ********* */
-
-
-.pos .pos-topheader {
-    position:absolute;
-    left:0;
-    top:0;
-    width: 100%;
-    height: 48px;
-    margin:0;
-    padding:0;
-    color: gray;
-    background: $o-brand-odoo;
-    display: flex;
-}
-
-/*  a) The left part of the top-bar */
-
-.pos .pos-branding{
-    max-width: 503px;
-    flex-grow: 1;
-    height:100%;
-    margin:0;
-    padding:0;
-    text-align:left;
-    line-height:100%;
-    vertical-align: middle;
-    display: flex;
-    justify-content: flex-start;
-}
-.pos .pos-logo {
-    height: 50%;
-    margin-left: 10px;
-    margin-right: auto;
-    align-self: center;
-}
-.pos .pos-branding .username{
-    float:right;
-    color:#DDD;
-    font-size:16px;
-    margin-right:32px;
-    line-height: 48px;
-    font-style:italic;
-    cursor: pointer;
-}
-
-/*  b) The right part of the top-bar */
-
-.pos .pos-rightheader {
-    flex-grow: 1;
-    height:100%;
-    display: flex;
-}
-.pos .pos-rightheader > * {
-    border-right: 1px solid $o-brand-odoo;
-}
-
-.pos .status-buttons {
-    flex: 1;
-    display: flex;
-    justify-content: flex-end;
-    height: 100%;
-    color: white;
-}
-
-.pos .status-buttons > div {
-    display: flex;
-    align-items: center;
-    padding: 0 10px; /*$dropdown-item-padding-x * .5*/
-}
-
-.pos .status-buttons .cashier-name {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-}
-
-.pos .status-buttons i.fa {
-    font-size: large;
-}
-
-.pos .status-buttons .avatar {
-    vertical-align: middle;
-}
-
-.pos .status-buttons .avatar {
-    width: 25px;
-    border-radius: 50%;
-}
-.pos .order-button.floor-button {
-    color: #f0f0f0;
-    cursor: pointer;
-    display: flex;
-    gap: 7px;
-    align-items: center;
-    font-weight: bold;
-    font-size: 16px;
-    padding-left: 16px;
-    padding-right: 16px;
-    overflow-wrap: anywhere;
-    text-overflow: hidden;
-}
-.pos .order-button.floor-button .fa{
-    font-size: 24px;
-    margin-bottom: 3px;
-}
-
-.pos .order-selector {
-    display: -webkit-flex;
-    display: flex;
-    -webkit-flex: 1;
-    flex: 1;
-}
-
-/*  c) The notifications indicator */
-
-.pos .oe_status{
-    cursor:pointer;
-}
-.pos .oe_status.oe_inactive{
-    cursor: default;
-}
-.pos .oe_status .oe_icon{
-    color: white;
-}
-.pos .oe_status .oe_red,
-.pos .oe_icon.oe_red {
-    color: rgb(197, 52, 0);
-}
-.pos .oe_status .oe_green,
-.pos .oe_icon.oe_green {
-    color: rgb(94, 185, 55);
-}
-.pos .oe_status .oe_orange,
-.pos .oe_icon.oe_orange {
-    color: rgb(239, 153, 65);
-}
-.pos .oe_link_icon{
-    cursor:pointer;
-    text-align: right;
-    width: 50px;
-}
-/*  ********* Contains everything below the  bar ********* */
-
-.pos .pos-content {
-    width: 100%;
-    position: absolute;
-    top: 48px;
-    bottom: 0;
-    background: $gray-200;
 }
 
 /*  ********* The leftpane contains the order, numpad and paypad ********* */
 
-.pos .product-reminder {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    height: 30px;
-    background: #F7EFCA;
-    font-size: 12px;
-    font-weight: bold;
-    gap: 9px;
-
-    span {
-        animation: 0.7s anim-lineUp ease-out 1;
-        margin: 9px 0;
-    }
+.product-reminder span {
+    animation: 0.7s anim-lineUp ease-out 1;
 
     @keyframes anim-lineUp {
         0% {
-          opacity: 0;
-          transform: translateY(80%);
+            opacity: 0;
+            transform: translateY(80%);
         }
         20% {
-          opacity: 0;
+            opacity: 0;
         }
         50% {
-          opacity: 1;
-          transform: translateY(0%);
+            opacity: 1;
+            transform: translateY(0%);
         }
         100% {
-          opacity: 1;
-          transform: translateY(0%);
+            opacity: 1;
+            transform: translateY(0%);
         }
     }
 }
 
-.pos .switchpane {
-    display: flex;
-}
-
-.pos .switchpane .btn-switchpane {
-    height: 70px;
-    width: 100%;
-    background-color: $primary;
-    border-radius: 0px;
-    color: #FFFFFF;
-    font-size: 15px;
-    font-weight: bold;
-    flex-grow: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    border: none;
-
-    h1 {
-        font-size: 20px;
-        margin: 0;
-    }
-}
-
-.pos .switchpane .btn-switchpane.secondary {
-    background-color: #FFFFFF;
-    color: $primary;
-}
-
-.pos .switchpane .btn-switchpane.validation-button {
-    justify-content: center;
-    font-size: 20px;
-    font-weight: bold;
-    border-left: solid 1px white;
-}
-
-
-.pos .pane-border {
-    border-right: solid 3px $gray-300;
-}
-
-.pos .leftpane {
-    background: $gray-200;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    max-width: 500px;
+.leftpane {
+    max-width: $left-pane-width;
+    width: $left-pane-width;
 }
 
 @media screen and (max-width: 768px) {
-    .pos .product-screen .order,
-    .product-screen .leftpane {
+    .order,
+    .leftpane {
         max-width: inherit;
-    }
-    .product-screen .leftpane {
         border-right: none;
     }
 }
 
-.pos .leftpane .pads {
-    border-top: solid 1px $gray-300;
-}
-
-.pos .leftpane .pads .subpads {
-    display: flex;
-    flex-direction: row;
-}
-
-/*  ********* The control buttons ********* */
-
-.pos .control-buttons {
-    display: flex;
-    flex-flow: row wrap;
-    white-space: nowrap;
-    overflow: hidden;
-}
-.pos .popup-control-buttons .control-buttons {
-    flex-direction: column;
-}
-.pos .leftpane .control-buttons .control-button {
-    flex: 1 1 29%;
-}
-.pos .control-button {
-    -webkit-flex-grow: 1;
-    flex-grow: 1;
-    background: #fff;
-    border-left: solid 1px $gray-300;
-    border-bottom: solid 1px $gray-300;
-    display: inline-block;
-    line-height: 38px;
-    min-width: 80px;
-    text-align: center;
-    padding: 0px 10px;
-    font-size: 1rem;
-    font-weight: bold;
-    cursor: pointer;
-    overflow: hidden;
-    transition: all linear 150ms;
-    text-overflow: ellipsis;
-}
-.pos .control-button:hover {
-    background: $gray-200;
-}
-.pos .control-button:active {
-    background: black;
-    color: white;
-    border-color: black;
-}
-.pos .control-button .fa{
-    margin-right: 4px;
-}
-.pos .control-button .control-button-number {
-    color: rgb(226, 226, 226);
-    background: rgb(85, 85, 85);
-    display: inline-block;
-    height: 28px;
-    vertical-align: middle;
-    font-weight: bold;
-    line-height: 28px;
-    width: 28px;
-    border-radius: 50%;
-    text-align: center;
-    margin-left: -16px;
-    margin-right: 4px;
-}
-
-.pos .control-button.highlight,
-.pos .button.highlight {
-    background: $primary !important;
-    border-color: $primary !important;
-    color: white !important;
-}
-.pos .control-button.altlight,
-.pos .button.altlight {
-    background: #7F82AC !important;
-    border: solid 1px #756A99 !important;
-    color: white !important;
-}
-.pos .control-button.disabled,
-.pos .control-button.disabled:active{
-    background: #e2e2e2;
-    border: solid 1px #BEBEBE;
-    opacity: 0.5;
-    cursor: default;
-    color: inherit;
-    pointer-events: none;
-}
-
-/*  ********* The actionpad (payment, set customer) ********* */
-
-.pos .actionpad {
-    padding: 0;
-    text-align: center;
-    vertical-align: top;
-    border: none;
-    border-right: 1px solid $gray-300;
-    flex-grow: 1;
-    width: 50%;
-}
-.pos .actionpad .button {
-    position: relative;
-    display: block;
-    height: var(--btn-height-size);
-    width: 100%;
-    font-weight: bold;
-    vertical-align: middle;
-    color: $gray-700;
-    font-size: 14px;
-    border-bottom: 1px solid;
-    border-color: #bfbfbf;
-    transition: all 150ms linear;
-}
-.pos .button.validation .pay-circle.highlight {
-    color: white;
-    background-color: $primary;
-}
-.pos .actionpad .button:hover {
-    background: $gray-200;
-}
-.pos .actionpad .button:active {
-    background: black;
-    border-color: black;
-    color: white;
-}
-.pos .button.validation {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    height: calc(var(--btn-height-size) * 3);
-    border: none;
-    background: $primary;
-    color: #fff;
-    font-size: 14px;
-    font-weight: bold;
-    transition: all 150ms linear;
-}
-.pos .button.validation:hover {
-    background: darken($primary, 5%) !important;
-}
-.pos .button.validation .pay-circle {
-    display: block;
-    font-size: 32px;
-    background: $gray-900;
-    color: white;
-    text-align: center;
-    border-radius: 30px;
-    margin-bottom: 10px;
-}
-.pos .button.validation .pay-circle .oi {
-    position: relative;
-    display: block;
-    padding: 14px;
-}
-.pos .button.validation.with-more-button {
-    height: calc(var(--btn-height-size) * 2);
-}
-
-.pos .actionpad .button.mobile-more-button {
-    padding-left: 40px;
-    padding-right: 40px;
-    border: none;
-    border-bottom: solid 1px #C9CCD2;
-}
-
-.pos .actionpad .button.set-partner{
-    padding-left: 40px;
-    padding-right: 40px;
-    border-top: none;
-    border-right: none;
-    overflow-wrap: break-word;
-}
-.pos .actionpad .button.set-partner.decentered {
-    padding-left: 40px;
-    padding-right: 5px;
-}
-.pos .actionpad .button .fa-user {
-    position: absolute;
-    left: 13px;
-    top: 13px;
-    margin-right: 8px;
-    font-size: 18px;
-    background: rgba(255, 255, 255, 0.5);
-    line-height: 30px;
-    width: 30px;
-    border-radius: 100%;
-}
-
-@media screen and (max-width: 768px) {
-    .pos .actionpad .button.set-partner{
-        padding-left: 0px;
-        padding-right: 0px;
-    }
-    .pos .actionpad .button.set-partner.decentered{
-        padding-left: 0px;
-        padding-right: 0px;
-    }
-}
-
-/*  ********* The Numpad ********* */
-
-.pos .numpad {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    text-align: center;
-    flex-grow: 1;
-    width: 50%;
-    min-width: 216px;
-}
-.pos .numpad button {
-    float: left/*rtl:ignore*/; /* rtlcss forced to keep ltr */
-    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 .numpad button:hover {
-    background: $gray-200;
-}
-.pos .numpad button:active {
-    background: black;
-    color: white;
-    border-color: transparent;
-}
-.pos .input-button {
-    font-size: map-get($font-sizes, 4);
-}
-.pos .mode-button {
-    font-size: 14px;
-}
-.number-char,
-.numpad-minus {
-    width: 54px;
-}
-.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 {
-    background: $gray-200;
-    color: $gray-500;
-    cursor: not-allowed;
-}
-
-/*  ********* The right pane contains the screens and headers ********* */
-
-.pos .rightpane {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    flex-basis: 25%;
-    flex-grow: 1;
-    background: $gray-300;
-}
-
-.pos .products-widget {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    overflow: hidden;
-}
-
-.pos .products-widget .products-widget-control{
-    display: grid;
-    z-index: 1;
-    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .08);
-}
-
-.pos .product-list-container {
-    overflow: hidden;
-    overflow-y: auto;
-    flex-grow: 1;
-}
-
-.pos .rightpane-header {
-    display: flex;
-    justify-content: space-between;
-    padding: 0;
-    background: #fff;
-    text-align: center;
-    display: flex;
-    overflow-x: auto;
-    overflow-y: hidden;
-}
-
-.pos .rightpane-header .categories-header {
-    display: flex;
-    overflow-x: auto;
-
-    &::-webkit-scrollbar {
-        display: none;
-    }
-}
-
-.pos .rightpane-header .breadcrumbs {
-    display: flex;
-}
-
-.pos .green-border-bottom {
-    border-bottom: solid 3px rgb(110, 200, 155);
-}
-
-.pos .grey-border-bottom {
-    border-bottom: 1px solid #c7c7c7;
-}
-
-/*  ********* The product list  ********* */
-
-.pos .product-list.grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
-    padding: 3px;
-    gap: 3px;
-}
-@media only screen and (max-width: 768px) {
-    .pos .product-list {
-        grid-template-columns: 1fr 1fr 1fr;
-    }
-}
-.pos .product-list-container .product-list-empty p {
-    margin: 10px;
-    text-align: center;
-}
-
-.pos .search-more-button {
-    display: flex;
-    justify-content: center;
-
-    .button {
-        flex-basis: 1;
-        line-height: 32px;
-        padding: 3px 13px;
-        font-size: 14px;
-        margin-top: 12px;
-        margin-bottom: 12px;
-        margin-left: 6px;
-        margin-right: 6px;
-        cursor: pointer;
-        transition: all 150ms linear;
-        background: $primary;
-        color: white;
-        border: solid 1px $primary;
-    }
-
-}
-
-.pos .product-list-scroller{
-    -webkit-box-sizing: border-box;
-       -moz-box-sizing: border-box;
-        -ms-box-sizing: border-box;
-            box-sizing: border-box;
-    width:100%;
-    height:100%;
-    overflow: hidden;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-    -webkit-transform: translate3d(0,0,0);
-
-}
-
-/*  a) the product list navigation bar */
-
-.pos .breadcrumb{
-    float: left;
-    display: inline-block;
-    line-height: 48px;
-    height: 48px;
-    min-width: 48px;
-    overflow: hidden;
-    white-space: nowrap;
-}
-.pos .breadcrumb:last-child {
-    padding-right: 3px;
-}
-.pos .breadcrumb-button {
-    display: inline-block;
-    padding: 0 9px;
-    vertical-align: top;
-    color: $primary;
-    font-size: 12px;
-    font-weight: bold;
-    cursor: pointer;
-    max-width: 300px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis
-}
-.pos .breadcrumb-button.breadcrumb-home {
-    line-height: 50px;
-    font-size: 25px;
-    text-align: center;
-}
-
-.pos .breadcrumb-arrow{
-    width: 28px;
-}
-.pos .breadcrumb-homeimg {
-    width: 27px;
-    margin: 12px 6px;
-}
-
-@media screen and (max-width: 768px) {
-    .pos .breadcrumb-button.breadcrumb-home {
-        width: auto;
-        margin-left: 3px;
-    }
-}
-
-.pos .search-clear {
-    top: 9px;
-    width: 30px;
-    height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.search-clear.left {
-    left: 11px;
-    color: #808080;
-    margin: 6px;
-}
-
-.search-clear.right {
-    color: #808080;
-    cursor: pointer;
-    margin: 6px;
-}
-
-@media screen and (max-width: 768px) {
-  .search-clear.left {
-      position: relative;
-      top: -40px;
-      left: 5%;
-  }
-
-  .search-clear.right {
-      position: relative;
-      top: -70px;
-      left: 85%;
-  }
-}
-
-/*  c) the categories list */
-
-.pos .categories {
-    position: relative;
-    border-bottom: solid 3px rgb(110, 200, 155);
-    flex: 1;
-}
-.pos .categories h4 {
-    display: inline-block;
-    margin: 9px 5px;
-}
-.pos .category-list-scroller{
-    -webkit-box-sizing: border-box;
-       -moz-box-sizing: border-box;
-        -ms-box-sizing: border-box;
-            box-sizing: border-box;
-    width:100%;
-    height:100%;
-    max-height:40vh;
-    overflow: hidden;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-    -webkit-transform: translate3d(0,0,0);
-
-}
-.pos .category-list {
-    text-align: left;
-    padding: 10px;
-    background: rgb(229, 229, 229);
-}
-.pos .category-list.simple {
-    padding: 0px;
-    background: #fff;
-    display: flex;
-    flex: 1;
-}
-
-
-/*  d) the category button */
-
-.pos .category-button {
-    position: relative;
-    vertical-align: top;
-    display: inline-block;
-    font-size: 11px;
-    margin: 8px !important;
-    width: 120px;
-    height:120px;
-    background:#fff;
-    border: 1px solid #d7d7d7;
-    border-radius: 3px;
-    border-bottom-width: 3px;
-    cursor: pointer;
-}
-
-.pos .category-simple-button{
-    display: inline-block;
-    align-items: center;
-    font-size: 12px;
-    font-weight: bold;
-    padding: 5px 12px;
-    cursor: pointer;
-    text-align: left;
-    background: #fff;
-    max-width: 300px;
-    vertical-align: middle;
-    white-space: nowrap;
-    overflow:hidden;
-    text-overflow:ellipsis;
-}
-
-.pos .category-simple-button:before {
-    content: '';
-    display: inline-block;
-    vertical-align: middle;
-    height: 100%;
-}
-
-.pos .category-simple-button:active{
-    color: white;
-    background: black;
-
-    -webkit-transition-property: background, border;
-    -webkit-transition-duration: 0.2s;
-    -webkit-transition-timing-function: ease-out;
-}
-
-
-
-.pos .category-button .category-img {
-    position: relative;
-    width: 120px;
-    height: 100px;
-    text-align: center;
-    cursor: pointer;
-}
-
-.pos .category-button .category-img img {
-    max-height: 100px;
-    max-width:  120px;
-    vertical-align: middle;
-}
-
-.pos .category-button .category-name {
-    position: absolute;
-    -webkit-box-sizing: border-box;
-       -moz-box-sizing: border-box;
-        -ms-box-sizing: border-box;
-            box-sizing: border-box;
-    bottom: 0;
-    top: auto;
-    line-height: 14px;
-    width: 100%;
-    /* for some reason the -90deg orientation doesn't match the -webkit-linear-gradient. It should be 180deg here.
-     * webkit also insists on rendering *both* gradients instead of only the native one. So it doesn't looks right. ugh.
-    background:         linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,1), rgba(255,255,255,1)); */
-    /*background:#FFF;*/
-    padding: 3px;
-    padding-top: 15px;
-    color: #7C7BAD;
-}
-
-/*  e) the product */
-
-.pos .product {
-    display: flex;
-    position:relative;
-    cursor: pointer;
-    overflow: hidden;
-    background:#fff;
-    align-items: stretch;
-}
-.pos .product.grid {
-    height: 170px;
-    flex-direction: column;
-}
-.pos .product.list {
-    height: 90px;
-    flex-direction: row-reverse;
-    margin: 3px;
-    justify-content: space-between;
-}
-
-.pos .product-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-}
-.pos .product.list .product-content {
-    height: 100%;
-}
-.pos .product.grid .product-img {
-    height: 100px;
-    width: 100%;
-    overflow: hidden;
-    margin: 3px;
-}
-.pos .product.list .product-img {
-    height: 84px;
-    width: 84px;
-    margin: 3px;
-    overflow: hidden;
-}
-.pos .product .product-img img {
-    width: 100%;
-    height: 100px;
-    object-fit: cover;
-}
-@media screen and (max-width: 768px) {
-    .pos .product:active {
-        box-shadow: 0 0 0 3px $primary;
-    }
-}
-
-.pos .product .price-tag {
-    color: $o-brand-odoo;
-    padding: 2px 5px;
-    font-weight: bold;
-    padding: 0 map-get($spacers, 2) map-get($spacers, 2);
-}
-
-.pos .product .product-name.no-image {
-    -webkit-line-clamp: 9;
-}
-
-.pos .product .product-info-button {
-    position: absolute;
-    top: 2px;
-    left: 5px;
-    font-size: 13px;
-    border-radius: 2px;
-    background-color: #7f82ac;
-    color: white;
-    padding: 1px 4px;
-    width: 15px;
-    height: 15px;
-    display: flex;
-    justify-content: center;
-    align-items: center;}
-
-.pos .product .product-info-button:hover {
-    background-color: #595b79;
-}
-
-.pos .product .product-name {
-    box-sizing: border-box;
-    line-height: 14px;
-    overflow: hidden;
-    margin: map-get($spacers, 2);
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-}
-
-.pos .product .product-name.no-image {
-    -webkit-line-clamp: 9;
-}
-
-/*  ********* The BlockUI Component (frontend)  ********* */
-.o_blockUI {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 1100;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    height: 100vh;
-    width: 100vw;
-    background: #000000;
-    color: white;
-    opacity: 0.6;
-}
-
-/*  ********* The Screens  ********* */
-
-.pos .screen {
-    position:absolute;
-    top:0px;
-    bottom:0px;
-    width:100%;
-    background: $gray-100;
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-}
-.pos .screen header h2 {
-    margin-top: 0px;
-    padding-top: 7px;
-}
-.pos .screen p{
-    font-size: 18px;
-}
-.pos .dialog{
-    width: 500px;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 50px;
-    text-align: center;
-}
-.pos .dialog p{
-    font-size: 25px;
-    margin-top: 10px;
-    color: #5a5a5a;
-}
-
-/* a) Generic Screen Layout Constructs */
-
-.screen .screen-content{
-    position: relative;
-    margin: 0px auto;
-    text-align: left;
-    height: 100%;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    background: #fff;
-}
-
-.screen .screen-full-width{
-    height: 100%;
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-}
-
-.screen .top-content{
-    height: 64px;
-    border-bottom: solid 1px $gray-300;
-    text-align: center;
-    display: flex;
-    padding-right: 10px;
-    padding-left: 10px;
-}
-.screen .top-content .search-bar-container {
-    margin-right: -10px;
-}
-.screen .top-content .pos-search-bar {
-    border-left: solid 1px $gray-300;
-}
-.screen .top-content .button {
-    line-height: 32px;
-    padding: 3px 13px;
-    font-size: 14px;
-    margin-top: 12px;
-    margin-bottom: 12px;
-    margin-left: 6px;
-    margin-right: 6px;
-    border: solid 1px $gray-200;
-    color: $primary;
-    cursor: pointer;
-    transition: all 150ms linear;
-}
-.screen .top-content .button:hover {
-    background: $gray-200;
-}
-.screen .top-content .button:active {
-    background: black;
-    border-color: black;
-    color: white;
-}
-.screen .top-content .button.highlight {
-    background: $primary;
-    color: white;
-    border: solid 1px $primary;
-}
-.screen .top-content .button.highlight:hover {
-    background: rgb(120,210,165);
-}
-.screen .validation-buttons {
-    display:  flex;
-    width:  100%;
-    align-items: flex-end;
-    justify-content: center;
-    gap: 2px;
-}
-.screen .button.next.validation {
-    position: sticky;
-    bottom: 0;
-    height: auto;
-    width: 100%;
-    padding: 48px 0;
-}
-.screen .button.next:not(.highlight) {
-    cursor: not-allowed;
-    background: $gray-300;
-    color: $gray-600;
-    opacity: .3;
-    pointer-events: none;
-}
-
-.screen .top-content .top-content-center {
-    flex-grow: 1;
-}
-
-.screen .main-content{
-    display: flex;
-    flex-grow: 1;
-    flex-wrap: wrap;
-    overflow-y: auto;
-}
-.screen .left-content{
-    overflow-x: hidden;
-    overflow-y: auto;
-    border-right: solid 1px $gray-300;
-    flex-grow: 1;
-    min-width: 200px;
-}
-
-.screen .center-content{
-    flex-grow: 2;
-    display: flex;
-    flex-direction: column;
-}
-.screen .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) {
-    .screen .left-content {
-        max-width: 34%
-    }
-}
-
-.pos .btn-switch-payment {
-    background-color: $primary;
-    border-radius: 0px;
-    color: #FFFFFF;
-    font-size: 15px;
-    font-weight: bold;
-    height: 100px;
-    width: 100%;
-}
-.screen .centered-content{
-    border-right: solid 1px $gray-300;
-    border-left: solid 1px $gray-300;
-    overflow-x: hidden;
-    overflow-y: auto;
-    max-width: 512px;
-    margin-left: auto;
-    margin-right: auto;
-}
-.screen .full-content{
-    position: absolute;
-    right: 0%; top: 65px; bottom: 0px;
-    left: 0%;
-}
-
-/* a) Layout for the Product Screen */
-
-.pos .screen .layout-table {
-    border:none;
-    width:100%;
-    display: flex;
-    flex-grow: 1;
-}
-
-.pos .screen .header-cell{
-    border:none;
-    width:100%;
-    height:0px;
-}
-.pos .screen .content-row {
-    width:100%;
-    height:100%;
-}
-.pos .screen .content-cell{
-    height: 100%;
-    width:100%;
-}
-.pos .screen .content-cell .content-container{
-    height:100%;
-    position:relative;
-}
-
-
-/* b) The payment screen */
-
-.payment-screen .main-content {
-    display: flex;
-}
-.payment-screen .left-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    width: 100%;
-    border: none;
-    max-height: 100%;
-}
-.payment-screen .center-content {
-    display: grid;
-    grid-template-rows: auto 1fr;
-    border: 10px solid $gray-300;
-    width: 30rem;
-}
-.payment-screen p.title-category {
-    margin: 0;
-    padding: map-get($spacers, 1) map-get($spacers, 3);
-    background: $gray-300;
-    color: $gray-700;
-    text-transform: uppercase;
-    font-weight: bold;
-    font-size: $small-font-size;
-    order: 1;
-}
-
-.pos .payment-buttons-container {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-}
-
-.pos .payment-numpad {
-    box-sizing: border-box;
-    text-align: center;
-    flex-grow: 1;
-}
-.pos .payment-numpad .numpad {
-    border-top: 1px solid;
-    border-left: 1px solid;
-    border-color: $gray-300;
-    width: 100%;
-    height: 100%;
-    margin: auto;
-}
-.pos .payment-numpad .numpad button {
-    height: 100%;
-    min-height: 54px;
-    font-size: clamp(map-get($font-sizes, 6), 3vw, 36px);
-}
-
-.pos .payment-numpad .numpad button:nth-child(16) img {
-    width: 35%;
-    max-width: 64px;
-    height: auto;
-}
-
-.pos .paymentlines-container {
-    padding: 16px;
-    padding-top: 0;
-    border-bottom: solid 10px $gray-300;
-    min-height: 154px;
-}
-
-.pos .paymentlines {
-    display: flex;
-    flex-direction: column-reverse;
-    border-spacing: 0px 10px;
-    border-collapse: inherit;
-}
-
-.paymentlines .paymentline:first-child {
-    border-top-width: 1px;
-}
-.pos .paymentline {
-    background: #fff;
-    font-size: 16px;
-    border-bottom: solid 1px $gray-300;
-    border-top-width: 0px;
-    cursor: pointer;
-    display: flex;
-    flex-grow: 1;
-    flex-basis: 100%;
-    min-height: 60px;
-    overflow: auto;
-    align-items: center;
-}
-.paymentline:active {
-    background: black;
-    border-color: black;
-    color: white;
-}
-.paymentline .payment-infos {
-    flex-grow: 1;
-    /* make the name of the payment line to be truncated with ellipsis */
-    white-space: nowrap;
-    text-overflow:ellipsis;
-    padding: map-get($spacers, 3);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-.paymentline .payment-infos .payment-amount {
-    padding: map-get($spacers, 3);
-}
-.paymentline .delete-button {
-  margin-left: 10px;
-  margin-right: 10px;
-  padding: map-get($spacers, 3);
-  font-size: x-large;
-}
-.paymentline.selected{
-  background: $gray-200;
-}
-
-.pos .payment-buttons {
-    box-sizing: border-box;
-    padding-left: 0;
-    flex-grow: 5;
-}
-.payment-screen .payment-buttons .button {
-    background: #fff;
-    font-size: 16px;
-    padding: map-get($spacers, 3);
-    border-bottom: solid 1px $gray-300;
-    border-top-width: 0;
-    cursor: pointer;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    position: relative;
-    width: 100%;
-    transition: background-color, border-color, color 150ms linear;
-    box-sizing: border-box;
-    height: 60px;
-}
-.payment-screen .payment-buttons .button:hover {
-    background-color: $gray-200;
-}
-.payment-screen .payment-buttons .button:first-child {
-    border-top-width: 1px;
-}
-.payment-screen .payment-buttons .button.highlight:not(:first-child) {
-    margin-top: -1px;
-    border-top: solid 1px;
-}
-.payment-screen .payment-buttons .button:active {
-    background: black;
-    border-color: black;
-    color: white;
-}
-.payment-screen .payment-buttons .button .fa {
-    margin-right: map-get($spacers, 2);
-    transition: all 150ms linear;
-}
-.payment-screen .paymentlines-empty .total {
-    text-align: center;
-    padding: 24px 0px 18px;
-    font-size: 64px;
-    color: #43996E;
-    text-shadow: 0px 2px white, 0px 2px 2px rgba(0, 0, 0, 0.27);
-}
-.payment-screen .paymentlines-empty .message {
-    text-align: center;
-}
-
-.paymentlines .button {
-    cursor: pointer;
-    border: 1px solid #cacaca;
-}
-.paymentlines .electronic_payment {
-    background: $gray-200;
-    border-collapse: unset;
-    font-size: 16px;
-    padding-right: 0;
-}
-
-.paymentline .electronic_status {
-    flex-grow: 1;
-    margin-left: 10px;
-    margin-right: 10px;
-    /* make the name of the payment line to be truncated with ellipsis */
-    white-space: nowrap;
-    overflow:hidden;
-    text-overflow:ellipsis;
-    padding: map-get($spacers, 3);
-}
-
-.paymentlines .electronic_payment div:first-child {
-    flex-grow: 2;
-    margin-left: 10px;
-    margin-right: 10px;
-}
-
-.paymentlines .electronic_payment div:last-child {
-    flex-grow: 1;
-    text-align: center;
-    padding: map-get($spacers, 3);
-}
-
-.payment-status-container {
-    display: flex;
-    justify-content: space-between;
-    font-size: 25px;
-    padding-top: 15px;
-}
-
-.payment-status-total-due {
-    font-size: 17px;
-    padding-top: 12px;
-    padding-bottom: 12px;
-    color: $gray-500;
-}
-
-.payment-status-container .amount.highlight {
-    font-weight: bold;
-    color: $primary;
-}
-
-.payment-status-container .label {
-    padding-right: 7px;
-}
-
-@media screen and (max-width: 992px) {
-    .payment-screen .main-content {
-        grid-template-columns: 300px 1fr;
-        grid-template-rows: 1fr auto;
-    }
-    .screen .center-content {
-        border-bottom: none;
-    }
-    .screen .right-content {
-        grid-column: span 2;
-    }
-    .pos .payment-buttons {
-        display: flex;
-        flex-wrap: wrap;
-        background: $gray-300;
-        padding: 10px;
-        gap: 10px;
-    }
-    .pos .payment-buttons > div {
-        flex-grow: 1;
-        flex-basis: 25%;
-        border: 1px solid $gray-300;
-    }
-    .pos .payment-buttons .button {
-        max-width: inherit;
-        display: flex;
-        align-items: center;
-    }
-    .pos .paymentlines-container {
-        min-height: auto;
-    }
-    .payment-status-container {
-        flex-direction: column-reverse;
-    }
-    .payment-status-container > div:first-child {
-        margin-top: map-get($spacers, 2);
-    }
-}
-
-@media screen and (max-width: 768px) {
-    .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;
-    }
-    .payment-screen .paymentlines-empty .message {
-        padding-bottom: map-get($spacers, 3);
-    }
-    .pos .payment-numpad .numpad button:nth-child(16) img {
-        max-width: 48px;
-    }
-    .pos .paymentlines-container {
-        position: sticky;
-        top: 0;
-        background: #fff;
-        border-bottom: 1px solid $gray-300;
-        min-height: inherit;
-        padding-bottom: 3px;
-    }
-      .pos .paymentlines {
-        margin-top: 0px;
-        margin-bottom: 0px;
-      }
-      .payment-status-container {
-          font-size: 22px;
-      }
-
-}
-
-@media screen and (max-width: 576px) {
-    .pos .payment-buttons {
-        flex-direction: column;
-    }
-}
-
-/* c) The receipt screen */
-
-.pos .receipt-screen .screen-content {
-    display: flex;
-    justify-content: space-between;
-}
-
-.pos .receipt-screen .left-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    max-width: inherit;
-}
-
-.pos .receipt-screen .top-content {
-    grid-column: span 2;
-}
-
-.pos .receipt-screen .centered-content .button {
-    line-height: 40px;
-    padding: 3px 13px;
-    font-size: 20px;
-    text-align: center;
-    background: $gray-200;
-    margin: 16px;
-    margin-bottom: 0px;
-    border-radius: 3px;
-    border: solid 1px rgb(209, 209, 209);
-    cursor: pointer;
-}
-
-.pos .pos-receipt-container {
-    font-size: 0.75em;
-    text-align: center;
-    direction: ltr;
-}
-
-.pos .pos-receipt-container > div {
-    text-align: left;
-    width: 300px;
-    background-color: white;
-    margin: 20px;
-    padding: 15px;
-    font-size: 16px;
-    padding-bottom:30px;
-    display: inline-block;
-    border: solid 1px rgb(220,220,220);
-    border-radius: 3px;
-    overflow: hidden;
-}
-
-@page {
-    margin: 0;
-}
-
-@media print {
-    body {
-        background: white;
-    }
-    body * {
-        visibility: hidden;
-        height: 0 !important;
-    }
-    .pos, .pos * {
-        position: static !important;
-    }
-    .pos .pos-receipt-container {
-        position: absolute !important;
-        top: 0;
-        left: 0;
-    }
-    .pos .pos-receipt-container, .pos .pos-receipt-container  * {
-        visibility: visible;
-        background: white !important;
-        color: black !important;
-        height: auto !important;
-    }
-    .pos .pos-receipt {
-        margin: 0 !important;
-        margin-left: auto !important;
-        margin-right: auto !important;
-        border: none !important;
-        font-size: 14px !important;
-        width: 266px !important;
-    }
-}
-
-/* d) The Scale screen */
-
-.pos .scale-screen .product-price{
-    font-size: 25px;
-    margin: 16px;
-    text-align: center;
-    display: inline-block;
-    width: 35%;
-}
-.pos .scale-screen .computed-price{
-    font-size: 25px;
-    display: inline-block;
-    text-align: right;
-    margin: 16px;
-    margin-top: 0px;
-    padding: 16px;
-    background: white;
-    width: 35%;
-    border-radius: 3px;
-    font-family: Inconsolata;
-    font-weight: bold;
-    text-shadow: 0px 2px 0px rgb(210,210,210);
-    box-shadow: 0px 2px 0px rgb(225,225,225) inset;
-    float: right;
-}
-.pos .scale-screen .buy-product{
-    text-align: center;
-    font-size: 32px;
-    background: $primary;
-    color: white;
-    border-radius: 3px;
-    padding: 16px;
-    margin: 16px;
-    cursor: pointer;
-}
-
-.pos .scale-screen .weight{
-    text-align: right;
-    margin: 16px;
-    background: white;
-    padding: 20px;
-    padding-right: 30px;
-    font-size: 56px;
-    border-radius: 3px;
-    font-family: Inconsolata;
-    text-shadow: 0px 2px 0px rgb(210, 210, 210);
-    box-shadow: 0px 2px 0px rgb(225,225,225) inset;
-}
-
-
-/* e) The Partner List Screen */
-
-.pos .partnerlist-screen .full-content{
-    overflow: auto;
-}
-
-.pos .no-results-message {
-    text-align: center;
-}
-
-.pos .no-results-message {
-    margin-top: 45px;
-    padding: 0 10%;
-}
-
-.pos .no-results-message .button {
-    margin: auto;
-    width: 180px;
-    border-radius: 25px;
-    padding: 10px 0;
-    cursor: pointer;
-    font-size: large;
-    box-shadow: 0px -2px 5px -3px rgb(82,82,82) inset;
-    transition: all linear 75ms;
-}
-
-.pos .no-results-message .button:hover {
-    opacity: 0.8;
-}
-
-.pos .no-results-message .button:active {
-    opacity: 0.5;
-}
-
-.pos .partnerlist-screen .top-content div.top-right-buttons {
-    display: flex;
-    justify-content: flex-end;
-    flex: 1;
-}
-
-.pos .partnerlist-screen .partner-list{
-    font-size: 16px;
-    width: 100%;
-}
-.pos .partnerlist-screen .partner-list th,
-.pos .partnerlist-screen .partner-list td {
-    padding: 15px 8px;
-}
-
-.pos .partnerlist-screen .fa.fa.fa-phone,
-.pos .partnerlist-screen .fa.fa-paper-plane-o,
-.pos .partnerlist-screen .fa.fa-mobile{
-    margin-right: 4px;
-}
-
-.pos .partnerlist-screen .e-mail-field {
-    white-space: nowrap;
-}
-
-.pos .partnerlist-screen tr div.company-field {
-    opacity: .75;
-}
-
-.pos .partnerlist-screen tr.highlight div.company-field {
-    color: white;
-}
-
-.pos .partnerlist-screen tr.highlight div.unselect-tag {
-    display: inline-block;
-    color: #fff;
-    padding: 3px 6px;
-    font-size: small;
-    border-radius: 2px;
-    margin-top: 12px;
-    background: rgba(255,255,255,.25);
-}
-
-.pos .partnerlist-screen tr.highlight div.unselect-tag-mobile{
-    display: none;
-}
-
-.pos .partnerlist-screen .partner-list th.partner-line-last-column-placeholder,
-.pos .partnerlist-screen .partner-list td.partner-line-last-column-placeholder {
-    padding: 0;
-}
-
-.pos .partnerlist-screen .partner-list tr{
-    transition: all 150ms linear;
-    background: $gray-200;
-}
-.pos .partnerlist-screen .partner-list thead > tr,
-.pos .partnerlist-screen .partner-list tr:nth-child(even) {
-    background: rgba(247,247,247,0.1);
-}
-.pos .partnerlist-screen .partner-list tr.highlight{
-    background: $primary;
-    color: white;
-}
-.pos .partnerlist-screen .partner-list tr.highlight:active {
-    background-color: black;
-    color: white;
-}
-.pos .partnerlist-screen tr.partner-line:hover {
-    cursor: pointer;
-    background: $primary;
-    color: #fff;
-}
-.pos .partnerlist-screen tr.partner-line:active {
-    background-color: black;
-    color: white;
-}
-.pos .edit-partner-button:hover {
-    background: $gray-200;
-}
-.pos .partner-line {
-    vertical-align: text-top;
-}
-.pos .partner-line-email .fa {
-    width: 30px;
-    opacity: .75;
-}
-.pos .edit-partner-button-cell {
-    vertical-align: middle;
-}
-.pos .edit-partner-button {
-    height: 30px;
-    font-weight: bold;
-}
-.pos .partner-list tr.partner-line.highlight{
-    background: $primary;
-    color: white;
-}
-.pos .partnerlist-screen .partner-details{
-    padding: 16px;
-}
-.pos .partnerlist-screen .partner-picture{
-    height: 64px;
-    width: 64px;
-    border-radius: 32px;
-    overflow: hidden;
-    text-align: center;
-    float: left;
-    margin-right: 16px;
-    background: white;
-    position: relative;
-}
-.pos .partnerlist-screen .partner-picture > img {
-    position: absolute;
-    top: -9999px;
-    bottom: -9999px;
-    right: -9999px;
-    left: -9999px;
-    max-height: 64px;
-    margin: auto;
-}
-.pos .partnerlist-screen .partner-picture > .fa {
-    line-height: 64px;
-    font-size: 32px;
-}
-.pos .partnerlist-screen .partner-picture .image-uploader {
-    position: absolute;
-    z-index: 1000;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    opacity: 0;
-    cursor: pointer;
-}
-.pos .partnerlist-screen .partner-name {
-    font-size: 32px;
-    line-height: 64px;
-    margin-bottom:16px;
-}
-.pos .partnerlist-screen .edit-buttons {
-    position: absolute;
-    right: 16px;
-    top: 10px;
-}
-.pos .partnerlist-screen .edit-buttons .button{
-    display: inline-block;
-    margin-left: 16px;
-    color: rgb(128,128,128);
-    cursor: pointer;
-    font-size: 36px;
-}
-.pos .partnerlist-screen .partner-details-box{
-    position: relative;
-    font-size: 16px;
-}
-.pos .partnerlist-screen .partner-details-left{
-    width: 50%;
-    float: left;
-}
-.pos .partnerlist-screen .partner-details-right{
-    width: 50%;
-    float: right;
-}
-.pos .partnerlist-screen .partner-detail{
-    line-height: 24px;
-}
-.pos .partnerlist-screen .partner-detail > .label{
-    font-weight: bold;
-    display: inline-block;
-    width: 75px;
-    text-align: right;
-    margin-right: 8px;
-}
-.pos .partnerlist-screen .partner-details input,
-.pos .partnerlist-screen .partner-details select
-{
-    padding: 4px;
-    border-radius: 3px;
-    border: solid 1px #cecbcb;
-    margin-bottom: 4px;
-    background: white;
-    font-family: "Lato","Lucida Grande", Helvetica, Verdana, Arial;
-    color: $gray-700;
-    width: 340px;
-    font-size: 14px;
-    box-sizing: border-box;
-    min-width: 100px;
-}
-
-.pos .partnerlist-screen .partner-details input.border-red,
-.pos .partnerlist-screen .partner-details select.border-red
-{
-    border-color: red;
-}
-
-.pos .partnerlist-screen .partner-details input.partner-name {
-    font-size: 24px;
-    line-height: 24px;
-    margin: 18px 6px;
-    width: 340px;
-}
-.pos .partnerlist-screen .partner-detail > .empty{
-    opacity: 0.3;
-}
-
-@media screen and (max-width: 1045px) {
-    .partner-list thead {
-        display: none;
-    }
-
-    .partner-list-contents {
-        margin-top: 10px;
-    }
-
-    .partner-line {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        padding: 12px 24px;
-    }
-    .partner-line td {
-        flex-basis: 100%;
-        padding: 5px;
-    }
-    .partner-line-adress{
-        margin-top: 10px;
-    }
-    .partner-line-balance{
-        margin-top: 10px;
-        order: 3;
-    }
-    .partner-line .pos-right-align{
-        text-align: left ;
-    }
-    .partner-line-email {
-        order: 2;
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-        margin-top: 10px;
-    }
-    .edit-partner-button-cell {
-        order: 4;
-        margin-top: 10px;
-    }
-    .partner-list-contents {
-        margin-top: 10px;
-    }
-    .partner-list td {
-        padding: 0px 0px !important;
-    }
-    .partner-line-last-column-placeholder {
-        display: none;
-    }
-    .pos .partnerlist-screen tr.highlight div.unselect-tag{
-        display: none;
-    }
-
-    .pos .partnerlist-screen tr.highlight div.unselect-tag-mobile {
-        display: inline-block;
-        color: #fff;
-        padding: 3px 6px;
-        font-size: small;
-        border-radius: 2px;
-        margin-top: 12px;
-        background: rgba(255,255,255,.25);
-        margin-left: 10px;
-    }
-    .pos .partnerlist-screen  .partner-details-box{
-        display: flex;
-        flex-direction: column;
-    }
-    .pos .partnerlist-screen  .partner-details-box .label{
-        text-align: left;
-    }
-    .pos .partnerlist-screen .partner-details-left{
-        width: unset;
-    }
-    .pos .partnerlist-screen .partner-details-right{
-        width: unset;
-    }
-}
-
-
-
-
-
-/*  ********* The OrderWidget  ********* */
-
-.pos .order-container{
-    top: 0px;
-    width:100%;
-    height: 100%;
-    background: white;
-    flex-grow: 1;
-    overflow: hidden;
-    overflow-y: auto;
-}
-
-.pos .scrollable-y{
-    overflow: hidden !important;
-    overflow-y: auto !important;
-    -webkit-overflow-scrolling: touch !important;
-}
-
-.pos .order {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    background: white;
-    font-size: 16px;
-    text-align: left;
-    max-width: 500px;
-    -webkit-transform: translate3d(0,0,0);
-}
-.pos .order .orderlines {
-    flex-grow: 1;
-    overflow: auto;
-}
-
-.pos .order .order-empty {
-    text-align: center;
-    margin: 48px;
-    color: $gray-200;
-}
-.pos .order .order-empty .fa {
-    font-size: 64px;
-}
-.pos .order .order-empty h1 {
-    font-size: 20px;
-}
-
-.pos .order .summary{
-    position: sticky;
-    bottom: 0;
-    width:100%;
-    text-align:right;
-    font-weight: bold;
-    padding: map-get($spacers, 2) map-get($spacers, 3);
-    border-top: 1px solid $gray-200;
-    box-sizing: border-box;
-    background:  inherit;
-}
-.pos .order .summary .total {
-    font-size: 22px;
-}
-.pos .order .summary .line .subentry{
-    font-size: 16px;
-    font-weight: normal;
-}
-.pos .order .summary .line.empty{
-    text-align: right;
-    border-color:#BBB;
-    color:#999;
-}
-
-.pos .order .summary .fidpoints{
-    position: absolute;
-    left: 20px;
-    padding: 10px;
-    color: $primary;
-    background: rgba(110, 200, 155, 0.17);
-    border-radius: 3px;
-}
-
-.submit-kitchen-button {
-    float: left;
-    background: rgb(61, 235, 82);
-    color: white;
-    padding: 12px 20px;
-    margin: 0px 15px;
-    border-radius: 3px;
-    cursor: pointer;
-}
-
-/*  ********* The OrderLineWidget  ********* */
-
-.pos .order .orderline{
-    width:100%;
-    margin:0px;
-    padding: 7px 15px;
-    cursor: pointer;
-    -webkit-box-sizing: border-box;
-       -moz-box-sizing: border-box;
-        -ms-box-sizing: border-box;
-            box-sizing: border-box;
-    -webkit-transition: background 250ms ease-in-out;
-       -moz-transition: background 250ms ease-in-out;
-            transition: background 250ms ease-in-out;
-}
-.pos .order .orderline:active{
-    background: rgba(140,143,183,0.05);
-    -webkit-transition: background 50ms ease-in-out;
-       -moz-transition: background 50ms ease-in-out;
-            transition: background 50ms ease-in-out;
-}
-.pos .order .orderline.empty:active{
-    background: transparent;
-    cursor: default;
-}
-
-.pos .order .orderline.selected{
-    background: rgba($primary, 0.2);
-    -webkit-transition: background 250ms ease-in-out;
-       -moz-transition: background 250ms ease-in-out;
-            transition: background 250ms ease-in-out;
-    cursor: default;
-}
-.pos .order .orderline .product-name{
-    padding:0;
-    display:inline-block;
-    font-weight: bold;
-    width:80%;
-    overflow:hidden;
-    text-overflow: ellipsis;
-}
-.pos .order .orderline .price{
-    padding:0;
-    font-weight: bold;
-    float:right;
-}
-.pos .order .orderline .info-list{
-    color: $gray-700;
-    margin-left:10px;
-}
-.pos .order .orderline .info-list em{
-    color: $gray-700;
-    font-weight: bold;
-    font-style:normal;
-}
-
-.pos .order .orderline .to-refund-highlight {
-    font-weight: bold;
-    color: $primary;
-}
-
-.pos .order .orderline .refund-note {
-    margin-top: 2px;
-}
-
-.pos .order .orderline .refund-note span.order-link {
-    text-decoration: underline;
-    cursor: pointer;
-}
-
-/* ------ ORDER NOTES ------- */
-
-.pos .order .orderline-note {
-    margin: 8px;
-    word-break: break-all;
-}
-.orderline-note .fa {
-    opacity: 0.5;
-    margin-right: 4px;
-}
-
-/*  ********* SplitBill ********* */
-
-.splitbill-screen .order-info {
-    text-align: center;
-    padding: 20px 0px;
-    font-size: 64px;
-    color: #43996E;
-    text-shadow: 0px 2px white, 0px 2px 2px rgba(0, 0, 0, 0.27);
-    border-bottom: solid 1px $gray-300;
-}
-.pos .splitbill-screen .order {
-    background: white;
-    padding-bottom:15px;
-    padding-top:15px;
-    margin-left:16px;
-    margin-right:16px;
-    margin-top:16px;
-    margin-bottom:16px;
-    font-size:16px;
-    border-radius: 3px;
-    border: solid 1px rgb(220,220,220);
-    text-align: left;
-    max-width: 500px;
-    -webkit-transform: translate3d(0,0,0);
-    height: max-content;
-    width: 100%;
-}
-.splitbill-screen .order .orderline.selected{
-    background: $primary;
-    color: white;
-    -webkit-transition: background 250ms ease-in-out;
-       -moz-transition: background 250ms ease-in-out;
-            transition: background 250ms ease-in-out;
-    cursor: default;
-}
-.splitbill-screen .order .orderline.partially.selected{
-    background: rgb(136, 214, 176);
-}
-.splitbill-screen .order .orderline.selected .info-list {
-    color: white;
-}
-.splitbill-screen .order .orderline.selected .info-list em{
-    color: white;
-    font-size: 24px;
-    vertical-align: top;
-}
-.paymentmethods-container {
-    overflow: scroll;
-}
-.paymentmethods .button {
-    background: #fff;
-    font-size: 16px;
-    border-bottom: solid 1px $gray-300;
-    border-top-width: 0px;
-    cursor: pointer;
-    min-height: 60px;
-}
-.paymentmethods .button:first-child {
-    border-top-width: 1px;
-}
-.paymentmethods .button:active {
-    background: black;
-    border-color: black;
-    color: white;
-}
-.paymentmethod .button.active {
-    background: $primary;
-    color: white;
-    border-color: $primary;
-}
-.paymentmethod {
-    display: flex;
-    flex-grow: 1;
-    flex-basis: 100%;
-}
-.paymentmethod .payment-method-display {
-    flex-grow: 1;
-    padding: map-get($spacers, 3);
-    display: flex;
-    align-items: center;
-}
-.paymentmethods .payment-method-display .payment-method-icon {
-  max-width: 50px;
-  max-height: 50px;
-  vertical-align: middle;
-}
-
-.paymentmethods .payment-method-display .payment-name {
-    vertical-align: middle;
-    margin-left: 10px;
-}
-.paymentmethod .payment-amount {
-    margin-left: 10px;
-    margin-right: 10px;
-}
-.paymentmethod .delete-button {
-  margin-left: 10px;
-  margin-right: 10px;
-}
-.paymentmethod.selected{
-  background: $gray-200;
-}
-
-@media screen and (max-width: 768px) {
-    .paymentmethods {
-        margin-top: 0px;
-        margin-bottom: 0px;
-    }
-    .paymentmethod {
-        flex-basis: 30%;
-    }
-}
-
-/*  ********* The ActionBarWidget  ********* */
-
-.pos .pos-actionbar{
-    height: 105px;
-    background: #f5f5f5;    /*#ebebeb;*/
-    border-top: solid 1px #cecece;
-    z-index:900;
-}
-
-.pos .pos-actionbar ul{
-    list-style:  none;
-}
-
-.pos .pos-actionbar-button-list{
-    height: 100%;
-    margin: 0px;
-    padding-left:3px;
-    padding-right:3px;
-    overflow:hidden;
-}
-
-.pos .pos-actionbar .button{
-    width: 90px;
-    height: 90px;
-    text-align:center;
-    margin:3px;
-    margin-top:6px;
-    float:left;
-
-    font-size:   14px;
-    font-weight: bold;
-
-    cursor: pointer;
-
-    border: 1px solid #cacaca;
-    border-radius: 3px;
-
-    background: #e2e2e2;
-}
-.pos .pos-actionbar .button .label{
-    margin-top: 37px;
-}
-.pos .pos-actionbar .button .icon{
-    margin-top: 10px;
-}
-.pos .pos-actionbar .button:active{
-    color: white;
-    background: #7f82ac;
-    border: 1px solid #7f82ac;
-
-    -webkit-transition-property: background, border;
-    -webkit-transition-duration: 0.2s;
-    -webkit-transition-timing-function: ease-out;
-}
-
-.pos .pos-actionbar .button.disabled{
-    opacity: 0.5;
-}
-.pos .pos-actionbar .button.disabled:active{
-    border: 1px solid #cacaca;
-    color: #555;
-    cursor: default;
-
-    background: #e2e2e2;
-}
-
-.pos .pos-actionbar .button.rightalign{
-    float:right;
-}
-
-/*  ********* The PopupWidgets  ********* */
-
-.pos .modal-dialog{
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height:100%;
-    background-color: rgba(0,0,0,0.5);
-    z-index:1000;
-    display:flex;
-    align-items:center;
-    justify-content:center;
-}
-.pos .modal-dialog header{
-    position: relative;
-}
-.pos .modal-dialog .popup{
-    margin: auto;
-    max-width:500px;
-    width: 100%;
-    text-align:center;
-    font-size:20px;
-    font-weight:bold;
-    background-color: #fff;
-    box-shadow: 0px 10px 20px rgba(0,0,0,0.4);
-    z-index:1200;
-    font-family: 'Lato';
-    font-family: Lato;
-}
-
-.pos .modal-dialog .popup-med{
-    max-width: 700px;
-    max-height: 600px;
-    height: auto;
-}
-
-.pos .popup .title {
-    background: rgba(255,255,255,0.5);
-    margin: 0;
-    padding: 20px;
-    border-radius: 3px 3px 0px 0px;
-    border-bottom: solid 1px rgba(60,60,60,0.1);
-    display: flex;
-    flex-direction: column;
-}
-.pos .popup .subtitle {
-    padding: 5px;
-    font-size: 14px;
-    font-weight: normal;
-}
-.pos .popup .body {
-    font-weight: normal;
-    font-size: 18px;
-    padding: 16px;
-    white-space: pre-line;
-}
-.pos .popup .payment-input-number {
-    text-align: right;
-}
-
-.pos .popup-med .body {
-    max-height: 400px;
-    overflow-y: auto;
-}
-
-.pos .popup .body.traceback {
-    height: 238px;
-    overflow: auto;
-    font-size: 14px;
-    white-space: pre-wrap;
-    text-align: left;
-    font-family: 'Inconsolata';
-    -webkit-user-select: text;
-       -moz-user-select: text;
-            user-select: text;
-}
-.pos .popup .footer{
-    width:100%;
-    height:60px;
-    border-top: solid 1px rgba(60,60,60,0.1);
-}
-.pos .popup .button{
-    float:right;
-    width: 110px;
-    height: 40px;
-    line-height:40px;
-    text-align:center;
-    margin-top:10px;
-    margin-right:10px;
-
-    font-size:   14px;
-    font-weight: bold;
-
-    cursor: pointer;
-    border: 1px solid $gray-200;
-    color: $primary;
-}
-.pos .popup .button.dynamic-size {
-    width: auto; 
-    white-space: nowrap; 
-    padding: 0 15px;
-}
-
-.pos .button .flex-column {
-    display: flex;
-    justify-content: center;
-    height: 40px;
-    gap: 2px;
-    flex-direction: column;
-}
-
-.pos .button .flex-column span {
-    line-height: normal;
-}
-
-.pos .button .flex-column .input-buffer-reminder {
-    font-weight: normal;
-}
-
-.pos .popup .button.dont-show-again {
-    width: auto;
-    padding: 0px 10px;
-}
-
-.pos .popup .button.icon {
-    width: 40px;
-    font-size: 20px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-.pos .popup .button.icon.ClosePosPopup{
-    height: 35px;
-    font-size: 20px;
-    margin-top: 0px;
-    margin-right: 0px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-.pos .popup .button:active{
-    color: white;
-    background: black;
-    border: 1px solid black;
-
-    -webkit-transition-property: background, border;
-    -webkit-transition-duration: 0.2s;
-    -webkit-transition-timing-function: ease-out;
-}
-
-
-.pos .popup .button.big-left{
-    position:absolute;
-    top: 120px;
-    left:40px;
-    width: 180px;
-    height: 180px;
-    line-height:180px;
-}
-
-.pos .popup .button.big-right{
-    position:absolute;
-    top: 120px;
-    right:40px;
-    width: 180px;
-    height: 180px;
-    line-height:180px;
-}
-
-.pos .input-symbol {
-    display: flex;
-    align-items: center;
-    gap: 14px;
-    justify-content: center;
-}
-
-.pos .input-symbol .popup-input {
-    display: flex;
-    gap: 4px;
-}
-
-.pos .input-symbol .popup-input .input-value {
-    flex-grow: 1;
-}
-
-.pos .popup input,
-.pos .popup-input {
-    text-align: left;
-    display: inline-block;
-    overflow: hidden;
-    background: white;
-    min-height: 44px;
-    font-family: "Lato";
-    font-size: 20px;
-    color: #444;
-    padding: 10px;
-    border-radius: 3px;
-    border: none;
-    box-shadow: 0px 0px 0px 1px rgb(220,220,220) inset;
-    box-sizing: border-box;
-    width: 80%;
-}
-.pos .edit-list-popup header {
-    display: flex;
-    flex-direction: column;
-}
-.pos .edit-list-popup header .sub-title {
-    font-weight: normal;
-    margin-top: 5px
-}
-.pos .edit-list-popup main {
-    margin: 10px;
-    padding-left: 40px;
-    text-align: left;
-}
-.pos .edit-list-popup .list-lines {
-    overflow: auto;
-    display: flex;
-    flex-direction: column;
-    height: 250px;
-}
-
-.pos .edit-list-popup .list-lines span {
-    font-size: 16px;
-    padding-right: 40px;
-    margin-left: 3px;
-}
-
-.pos .edit-list-popup .list-line-input {
-    margin: 3px 10px 3px 3px;
-    width: 90%
-}
-
-.pos .popup-number .popup-input {
-    text-align: right;
-}
-.pos .popup input:focus,
-.pos .popup-input:focus-within,
-.pos .popup-input.active {
-    outline: none;
-    box-shadow: 0px 0px 0px 3px $primary;
-}
-.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);
-}
-.pos .popup.popup-selection .selection {
-    overflow-y: auto;
-    max-height: 273px;
-    font-size: 16px;
-    width: auto;
-    margin-top: -1px;
-    border-top: solid 3px rgba(60,60,60,0.1);
-
-}
-.pos .popup.popup-selection .selection-item {
-    width: auto;
-    background: rgb(230,230,230);
-    cursor: pointer;
-    text-align: left;
-    padding: 18px 16px;
-    display:flex;
-    flex-direction: column;
-}
-.pos .popup.popup-selection .selection-item span:nth-child(2) {
-    margin-top: 5px;
-    font-size: 80%;
-}
-.pos .popup.popup-selection .selection-item:nth-child(odd) {
-    background: rgb(247,247,247);
-}
-.pos .popup.popup-selection .selection-item.selected {
-    background: $primary;
-}
-.pos .popup.popup-number {
-    max-width: none;
-    width: auto;
-    padding: 0 10px;
-}
-.pos .footer.centered {
-    text-align: center;
-    display: flex;
-    justify-content: center;
-}
-.pos .footer.centered .button {
-    float: none;
-    display: inline-block;
-    margin-left: 3px;
-    margin-right: 3px;
-}
-.pos .popup-numpad {
-    direction: ltr/*rtl:ignore*/; /* rtlcss forced to keep ltr */
-    margin: 12px auto;
-    text-align: center;
-    width: 254px;
-}
-.pos .popup-number .title,
-.pos .popup-textinput .title
-{
-    margin-bottom: 20px;
-}
-.pos .popup-textinput main {
-    margin-bottom: 20px;
-}
-.pos .popup-numpad .input-button,
-.pos .popup-numpad .mode-button {
-    background: none;
-    height: 50px;
-    width: 50px;
-    padding: 0;
-    border-radius: 25px;
-    margin: 4px;
-    vertical-align: top;
-    color: #444;
-}
-.pos .popup-numpad .input-button:active,
-.pos .popup-numpad .mode-button:active {
-    background: #444;
-    color: white;
-    border-color: #444;
-}
-.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%;
- }
-.pos .popup-input.value .highlight {
-    background: lightblue;
-}
-
-.pos .popup .body ul,
-.pos .popup ul.body {
-    text-align: left;
-    margin-left: 1em;
-}
-.pos .popup .body li {
-    text-indent: 1em;
-}
-.pos .popup .body li:before {
-    content: '—';
-    position: relative;
-    font-size: 0.6em;
-    left: -1em;
-    bottom: 0.2em;
-}
-
-.pos .modal-dialog .popup.mobile{
-    bottom: 0;
-    position: absolute;
-    width: 100%;
-    font-size:20px;
-    font-weight:bold;
-    background-color: #fff;
-    z-index:1200;
-    font-family: 'Lato';
-    font-family: Lato;
-    margin: 0;
-    max-height: none;
-    max-width: none;
-    transform: none;
-    top: auto;
-    left: auto;
-}
-
-.pos .modal-dialog .popup-med.mobile{
-    max-width: 700px;
-    height: calc(100% - 48px);
-}
-
-.pos .popup-med .body.mobile {
-    overflow-y: auto;
-    height: calc(100% - 133px);
-    max-height: none;
-    margin-bottom: 0;
-}
-
-.pos .popup .footer.mobile {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.pos .popup .product_configurator_attributes .product-img {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    height: 50%;
-    padding: 10px;
-
-    & img {
-        height: 100%;
-    }
-
-    & .product-info {
-        display: flex;
-        width: 100%;
-        justify-content: space-between;
-    }
-}
-
-.pos .popup .footer .confirm-line {
-    display: flex;
-    width: 100%;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    height: 48px;
-    background: #FFF;
-    font-size: 12px;
-    font-weight: bold;
-    margin: 5px;
-
-    div {
-        margin: 0;
-    }
-}
-
-.pos .popup .footer .quantity-selector {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    height: 48px;
-    background: #FFF;
-    font-size: 12px;
-    font-weight: bold;
-    width: 100%;
-    border-bottom: 1px solid black;
-
-    button {
-        margin: 5px;
-    }
-}
-
-.pos .popup .footer .quantity-selector .quantity{
-    margin: 0 10px;
-}
-
 /*  ********* The Webkit Scrollbar  ********* */
 
 .pos *::-webkit-scrollbar{
@@ -3021,58 +68,14 @@ td {
     min-height: 30px;
 }
 
-.pos.big-scrollbars *::-webkit-scrollbar{
-    width:  40px;
-    height: 40px;
-}
-.pos.big-scrollbars *::-webkit-scrollbar-track{
-    background: $gray-200;
-    border-left: none;
-}
-.pos.big-scrollbars *::-webkit-scrollbar-thumb{
-    background: rgb(168,168,168);
-    min-height: 40px;
-    border-radius: 3px;
-}
-.pos.big-scrollbars *::-webkit-scrollbar-button{
-    width:  40px;
-    height: 40px;
-    border-radius: 3px;
-    background: rgb(210,210,210);
-    background-size: cover;
-}
-.pos.big-scrollbars *::-webkit-scrollbar-button:decrement{
-    background-image: url('../img/scroll-up.png');
-}
-.pos.big-scrollbars *::-webkit-scrollbar-button:increment{
-    background-image: url('../img/scroll-down.png');
-}
-
-
-/*  ********* Unsupported Browser Page ********* */
-
-.pos .not-supported-browser{
-    position: absolute;
-    z-index: 100000;
-    top: 0; bottom: 0; left: 0; right: 0;
-    background: #2C2C2C;
-}
-.pos .not-supported-browser .message{
-    width:600px;
-    margin-top: 100px;
-    margin-left: auto;
-    margin-right: auto;
-    text-align: center;
-    color: #d3d3d3;
-    font-size: 14px;
-}
-.pos .not-supported-browser img{
-    border-collapse: separate;
-}
+/* Fade */
 
 .o-fade {
     transition: opacity .2s;
 }
+.pos .button.validation.with-more-button {
+    height: calc(var(--btn-height-size) * 2);
+}
 
 .o-fade-enter, .o-fade-leave {
     opacity: 0;
@@ -3082,7 +85,7 @@ td {
     We block the top-header when a temp screen is displayed.
     Similar to blocking the whole ui when a popup is displayed.
 */
-.pos .block-top-header {
+/* .pos .block-top-header {
     position: absolute;
     left: 0;
     top: 0;
@@ -3090,7 +93,9 @@ td {
     height:100%;
     background-color: rgba(0,0,0,0.5);
     z-index:1000;
-}
+} */
+
+/* Debug */
 
 .drag-handle {
     /* See o-grab-cursor mixin */
@@ -3100,849 +105,6 @@ td {
 .drag-handle:active {
     cursor: grabbing;
 }
-
-
-/* Order Management */
-
-.item .page-controls {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    font-size: x-large;
-}
-
-.page-controls > div {
-    border: darkgray solid 1px;
-    border-radius: 2px;
-}
-
-.page-controls > div:hover {
-    color: $primary;
-}
-
-.page-controls .previous {
-    margin-right: 0.2rem;
-}
-
-.page-controls .next {
-    margin-left: 0.2rem;
-}
-
-.order-receipt {
-    color: white;
-    font-size: medium;
-    text-align: center;
-}
-
-.order-receipt .title {
-    font-size: large;
-}
-
-/* ********* Product Configurator Popup ********* */
-
-.pos .product_configurator_attributes {
-    text-align: left;
-    margin: 1em;
-}
-
-.pos .product_configurator_attributes .attribute {
-    margin-bottom: 1em;
-    padding-left: 0.5em;
-}
-
-.pos .product_configurator_attributes .attribute_name {
-    margin-bottom: 0.5em;
-    font-weight: bold;
-}
-
-.pos .product_configurator_attributes input {
-    min-height: 0;
-    width: auto;
-}
-
-/** Radio attribute **/
-
-.pos .product_configurator_attributes .configurator_radio {
-    line-height: 1.5;
-}
-
-.pos .product_configurator_attributes .configurator_radio .table {
-    display: grid;
-    grid-template-columns: max-content max-content 1fr;
-    grid-template-rows: max-content;
-}
-
-.pos .product_configurator_attributes .configurator_radio .table div {
-    margin: 5px 0;
-}
-
-.pos .product_configurator_attributes .configurator_radio .attribute-name-cell {
-    grid-column: 1;
-    word-break: break-word;
-    max-width: 300px;
-    position: relative
-}
-
-.pos .product_configurator_attributes .configurator_radio .attribute-name-cell label {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 80vw;
-    max-width: 600px;
-    height: 100%;
-}
-
-.pos .product_configurator_attributes .configurator_radio .attribute-name-cell label:hover {
-    cursor: pointer;
-}
-
-.pos .product_configurator_attributes .configurator_radio .price-extra-cell {
-    grid-column: 2;
-}
-
-.pos .product_configurator_attributes .configurator_radio input[type='radio'] {
-    box-shadow: none;
-    margin-right: 0.5em;
-    cursor: pointer;
-}
-
-.pos .product_configurator_attributes .configurator_radio .price_extra {
-    margin-left: 0.5em;
-    padding: 0.2em 0.4em;
-    border-radius: 10rem;
-    color: #FFFFFF;
-    background-color: #6c757d;
-}
-
-.pos .product_configurator_attributes .configurator_radio .custom_value {
-    margin-left: 0.5em;
-    height: 1.3em;
-    position: relative;
-    z-index: 1;
-}
-
-/** Selector attribute **/
-
-.pos .product_configurator_attributes .configurator_select {
-    cursor: pointer;
-    background-color: transparent;
-    width: 90%;
-    padding: 0.5em;
-    color: #666666;
-    font-size: 18px;
-    margin-bottom: 0.5em;
-}
-
-/** Color attribute **/
-
-.pos .product_configurator_attributes ul.color_attribute_list {
-    margin-left: 0;
-}
-
-.pos .product_configurator_attributes li.color_attribute_list_item:before {
-    content: '';
-}
-
-.pos .product_configurator_attributes li.color_attribute_list_item {
-    margin-bottom: 0.5em;
-    text-indent: 0;
-    display: inline-block;
-}
-
-.pos .product_configurator_attributes .color_attribute_list_item:not(:last-child) {
-    margin-right: 1rem;
-}
-
-.pos .product_configurator_attributes .configurator_color {
-    display: inline-block;
-    border: 1px solid #999999;
-}
-
-.pos .product_configurator_attributes .configurator_color.active {
-    border: 3px ridge #66ee66;
-}
-
-.pos .product_configurator_attributes .configurator_color input {
-    margin: 20px;
-    opacity: 0;
-}
-
-.pos .product_configurator_attributes .configurator_color.active input {
-    margin: 18px;
-}
-
-@media screen and (max-width: 768px) {
-    .pos .product_configurator_attributes .attribute {
-        width: 95%;
-    }
-
-    .pos .product_configurator_attributes .configurator_radio .attribute-name-cell {
-        max-width: 190px;
-    }
-
-    .pos .product_configurator_attributes .configurator_radio .custom-value-cell {
-        grid-column: 1 / 3;
-        justify-self: center;
-    }
-}
-
-/* TICKET SCREEN */
-
-.pos .orders {
-    overflow-y: auto;
-    font-size: medium;
-}
-.pos .orders .cashier {
-    font-style: italic;
-    font-size: 12px;
-}
-
-.pos .orders .header-row{
-    display: flex;
-    background: $gray-700;
-    color: white;
-}
-
-@media screen and (min-width: 768px) {
-    .pos .orders .order-row {
-        display: flex;
-        cursor: pointer;
-    }
-
-    .pos .orders .order-row:nth-child(odd) {
-        background: $gray-200;
-    }
-
-    .pos .orders .order-row:nth-child(even) {
-        background: white;
-    }
-}
-@media screen and (max-width: 768px) {
-    .pos .orders .order-row {
-        margin: 5px;
-        border: 1px solid #C9CCD2; /* $border-color */
-        background: white; /* $o-view-background-color */
-    }
-}
-
-@media screen and (max-width: 640px) {
-    .ticket-screen .screen-full-width {
-        flex-direction: column;
-        height: auto;
-        min-height: 100%;
-    }
-    .ticket-screen .controls {
-        position: sticky;
-        top: 0;
-        background: $gray-300;
-        z-index: 100;
-    }
-    .ticket-screen .controls button.search {
-        margin: 0;
-    }
-    .ticket-screen .order,
-    .ticket-screen .leftpane {
-        max-width: inherit;
-    }
-
-    .ticket-screen .rightpane {
-        width: auto;
-    }
-    .pos .orders {
-        position: sticky;
-    }
-}
-
-.pos .orders .order-row:hover, .pos .orders .order-row.highlight {
-    color: white;
-    background-color:  $primary;
-}
-
-.pos .orders .col {
-    display: flex;
-    justify-content: space-between;
-    flex: 1;
-    padding: 10px;
-}
-
-@media screen and (min-width: 768px) {
-    .pos .orders .col.end {
-        justify-content: flex-end;
-    }
-}
-
-@media screen and (max-width: 768px) {
-    .pos .orders .order-row > .col > div:first-child {
-        font-weight: bold;
-    }
-
-    .ticket-screen .order-row .delete-button {
-        margin-top: 5px;
-        justify-content: center;
-        background: #d23f3a /* o-text-color('danger') */ ;
-        color: white;
-    }
-    .ticket-screen .order-row .delete-button .fa-trash {
-        margin-right: 5px;
-    }
-}
-
-.ticket-screen .orders .col.very-narrow {
-    flex: 0.2;
-}
-
-.ticket-screen .orders .col.narrow {
-    flex: 0.5;
-}
-
-.ticket-screen .orders .col.wide {
-    flex: 1.5;
-}
-
-.ticket-screen .empty-order-list {
-    text-align: center;
-    margin: 48px;
-    color: $gray-500;
-}
-
-.ticket-screen .empty-order-list h1 {
-    font-size: 20px;
-}
-
-.ticket-screen .empty-order-list .fa {
-    font-size: 64px;
-}
-
-.ticket-screen .controls {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0px 10px;
-    flex: 0 0 80px
-}
-
-.ticket-screen .controls button {
-    min-width: 45px;
-    font-size: medium;
-    padding: 12px;
-    margin-right: 10px;
-    background: #fff;
-    font-weight: bold;
-}
-
-.ticket-screen .controls button.highlight {
-    background: $primary;
-    border-color: $primary;
-    color: white;
-}
-
-.ticket-screen .pos-search-bar {
-    vertical-align: middle;
-    white-space: nowrap;
-    position: relative;
-    display: flex;
-    max-width: 500px;
-    flex: 1;
-}
-
-.ticket-screen .pos-search-bar .search {
-    display: flex;
-    position: relative;
-    flex: 1;
-}
-
-.ticket-screen .pos-search-bar .search input {
-    width: 0;
-    height: 40px;
-    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: 14px;
-    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 {
-    height: 40px;
-    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;
-    max-width: 150px;
-}
-
-.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;
-}
-
-.ticket-screen .pos-search-bar .search {
-    display: flex;
-}
-
-.ticket-screen .order-container .header-note {
-    text-align: start;
-    padding: 15px;
-    color: grey;
-    padding-bottom: 20px;
-    border-bottom: solid 1px lightgrey;
-    transition: all 300ms linear;
-}
-
-.ticket-screen .order-container .header-note.highlight {
-    color: red;
-    transition: all 300ms linear;
-}
-
-[badge] {
-    position: relative;
-}
-
-[badge]:after {
-    background: $o-navbar-badge-bg;
-    border-radius: 10rem;
-    color: #fff;
-    content: attr(badge);
-    font-size: small;
-    min-width: 20px;
-    padding: 2px;
-    position: absolute;
-    text-align: center;
-    left: 5em;
-    bottom: 0;
-}
-
-[badge^="-"]:after,
-[badge="0"]:after,
-[badge=""]:after {
- display: none;
-}
-
-.navbar-button {
-    display: flex;
-    align-items: center;
-    padding: 0 15px;
-    font-size: medium;
-    color: white;
-}
-
-.navbar-button:hover {
-    background: rgba(0, 0, 0, .08);
-    cursor: pointer;
-}
-
-/* Search Bar (PartnerList & Product Screens*/
-
-.pos .search-bar-container {
-    display: flex;
-    align-items: center;
-}
-
-.pos .products-widget .search-bar-container {
-    position: absolute;
-    right: 0;
-}
-
-.pos .rightpane-header .pos-search-bar,
-.pos .partnerlist-screen .pos-search-bar {
-    display: flex;
-    align-items: center;
-    padding: 0px 10px;
-    background-color: #FFFFFF;
-    height: 48px;
-    font-size: 16px;
-    transition: all linear 150ms;
-}
-
-.pos .rightpane-header .pos-search-bar:focus-within,
-.pos .partnerlist-screen .pos-search-bar:focus-within {
-    background: $gray-200;
-}
-
-.pos .rightpane-header .pos-search-bar input,
-.pos .partnerlist-screen .pos-search-bar input {
-    flex-grow: 1;
-    padding: 0 5px;
-    height: 100%;
-    background: none;
-    border: none !important;
-    outline: none !important;
-    font-family: "Lato","Lucida Grande", Helvetica, Verdana, Arial;
-    color: #63717f;
-}
-
-.pos .rightpane-header .pos-search-bar i,
-.pos .partnerlist-screen .pos-search-bar i {
-    cursor: pointer;
-    transition: color linear 150ms;
-}
-
-.pos .rightpane-header .pos-search-bar i:active,
-.pos .partnerlist-screen .pos-search-bar i:active {
-    color: purple;
-}
-
-/* Partner List Screen Search Bar */
-
-.pos .search-bar-container.sb-partner {
-    flex-grow: 1;
-    justify-content: flex-end;
-}
-
-.pos .sb-partner .pos-search-bar{
-    width: 40%;
-}
-
-/* Product Screen Search Bar */
-
-.pos .search-bar-container.sb-product {
-    width: auto;
-    max-width: 250px;
-    justify-content: flex-start;
-    min-height: 48px;
-    border-left: 1px $gray-100 solid;
-    background-color: #FFFFFF;
-}
-
-.pos .search-bar-container.sb-product .icon {
-    height: 100%;
-    border-radius: 0;
-    color: $primary;
-    margin: 0;
-    padding: 0 map-get($spacers, 3);
-    background-color: #fff;
-}
-
-.pos .search-bar-container.sb-product .icon:hover {
-    background: #fff;
-    color: darken($primary, 5%);
-}
-
-.pos .sb-product .pos-search-bar{
-    flex-grow: 1;
-}
-
-.pos .sb-product .icon {
-    color: white;
-    font-size: medium;
-    padding: 0 12px;
-    margin: 0 5px;
-    height: 80%;
-    border-radius: 20px;
-    display: flex;
-    align-items: center;
-}
-
-.pos .sb-product .icon:hover {
-    background: rgba(0, 0, 0, .08);
-}
-
-.pos .sb-product .icon:active {
-    background: rgba(104,69,95, 0.7);
-}
-
-.pos .no-results-message .button-no-demo {
-	margin: 3px;
-    width: 180px;
-    padding: 10px 0;
-    cursor: pointer;
-    font-size: large;
-	color: #017e84;
-    font-weight: bold;
-}
-
-.info-load-product-message {
-	background: lightblue;
-	color: #017e84;
-	padding: 8px;
-	width: fit-content;
-	display: block;
-	margin : 3px auto 0 auto;
-}
-
-@media screen and (max-width: 768px) {
-    .pos .search-bar-container.sb-product {
-        max-width: none;
-        width: auto;
-        background-color: #FFFFFF;
-        border-left: 1px solid $gray-200;
-    }
-
-    .pos .sb-partner .pos-search-bar {
-        flex-grow: 1;
-    }
-}
-
-.currencyCashBox {
-    font-size: 30px;
-}
-
-.receipt-screen .default-view {
-    display: flex;
-    overflow: hidden;
-}
-
-.receipt-screen .default-view .pos-receipt-container {
-    flex: 0 1 400px;
-    overflow: auto;
-}
-
-.receipt-screen .default-view .actions {
-    flex: 1;
-    margin: 0 1.5rem;
-}
-
-.receipt-screen .default-view .actions * {
-    font-size: 1rem;
-}
-
-.receipt-screen .default-view .actions h1 {
-    font-size: 1.5rem;
-    margin-bottom: 4rem;
-}
-
-.receipt-screen .default-view .actions .buttons {
-    display: flex;
-    margin: 1rem 0px;
-}
-
-.receipt-screen .default-view .actions .buttons .button {
-    flex: 1;
-    border: solid 1px rgb(209, 209, 209);
-    padding: 1rem;
-    text-align: center;
-    border-radius: 3px;
-    cursor: pointer;
-    background: $gray-200;
-}
-
-.receipt-screen .default-view .actions .send-email {
-    display: flex;
-}
-
-.receipt-screen .default-view .actions .send-email .input-email {
-    display: flex;
-    flex: 1;
-    background: white;
-    border: solid 1px rgb(209, 209, 209);
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px;
-}
-
-.receipt-screen .default-view .actions .send-email input {
-    flex: 1;
-    padding-left: 1rem;
-    border: none;
-    color: $gray-700;
-}
-
-.receipt-screen .default-view .actions .send-email input:focus {
-    outline: none;
-}
-
-.receipt-screen .default-view .actions .send-email button.send {
-    padding: 1rem 40px;
-    margin: 2px;
-    border: none;
-    background: $gray-200;
-    color: $gray-500;
-}
-.receipt-screen .default-view .actions .send-email button.send:not(.highlight) {
-    cursor: not-allowed;
-}
-
-.receipt-screen .default-view .actions .send-email button.send.highlight {
-    color: white;
-    background-color: $primary;
-}
-.receipt-screen .default-view .actions .send-email button i {
-    width: 25px;
-}
-.receipt-screen .notice {
-    margin-top: 6px;
-    display: flex;
-}
-
-.receipt-screen .notice .failed {
-    color: rgb(168, 89, 89);
-}
-
-.receipt-screen .notice .successful {
-    color: $primary;
-}
-
-.receipt-screen .notice .send-mail-info {
-    width: 100%;
-    text-align: right;
-    font-style: italic;
-}
-
-.receipt-screen .button.validation {
-    grid-column: span 2;
-}
-
-@media screen and (max-width: 768px) {
-    .receipt-screen .default-view {
-        flex-direction: column;
-        overflow: auto;
-    }
-    .receipt-screen .default-view .actions {
-        flex: 0;
-    }
-    .receipt-screen .default-view .actions h1 {
-        margin-bottom: 1.5rem;
-    }
-    .receipt-screen .default-view .pos-receipt-container {
-        flex: 1;
-        overflow: visible;
-    }
-}
-
-.pos .pos-topheader .status-buttons > div:not(.not-clickable):hover {
-    background: rgba(0, 0, 0, .08);
-}
-
-@media screen and (max-width: 768px) {
-    .ticket-screen .pos-search-bar .search input {
-        padding-left: 10px;
-    }
-}
-
-.menu {
-    color: white;
-    z-index: 1000;
-    font-size: medium;
-
-	&-item {
-		display: flex;
-		position: relative;
-
-		.sub-menu {
-			position: absolute;
-			top: 33px;
-            right: -16px;
-            width: 216px;
-            display: flex;
-            flex-direction: column;
-			background-color: white;
-            z-index: 9999;
-            align-items: stretch;
-            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15);
-
-            .menu-item {
-                padding: 10px;
-
-                span, i {
-                    color: black;
-                    inline-size: 196px;
-                    overflow-wrap: break-word;
-                }
-            }
-		}
-	}
+.pos .button.validation.with-more-button {
+    height: calc(var(--btn-height-size) * 2);
 }
diff --git a/addons/point_of_sale/static/src/scss/pos_variables_extra.scss b/addons/point_of_sale/static/src/scss/pos_variables_extra.scss
index ed4ca4c3331..6aeb1fcbf5c 100644
--- a/addons/point_of_sale/static/src/scss/pos_variables_extra.scss
+++ b/addons/point_of_sale/static/src/scss/pos_variables_extra.scss
@@ -1,32 +1,3 @@
-// This file duplicates variables from web_enterprise/static/src/scss/primary_variables.scss
-// to force the colors to use those of Enterprise on Community.
-
-$o-gray-100: #f6f7fa !default;
-$o-gray-200: #E0E2E6 !default;
-$o-gray-300: #C9CCD2 !default;
-$o-gray-400: #9DA1AA !default;
-$o-gray-500: #80848F !default;
-$o-gray-600: #626774 !default;
-$o-gray-700: #4A4F59 !default;
-$o-gray-800: #353840 !default;
-$o-gray-900: #212529 !default;
-
-$o-enterprise-color: #714B67 !default;
-$o-enterprise-action-color: #017e84 !default;
-
-$o-brand-odoo: $o-enterprise-color !default;
-$o-brand-primary: $o-enterprise-action-color !default;
-$o-brand-secondary: #8f8f8f !default;
-$o-brand-lightsecondary: $o-gray-100 !default;
-
-$o-list-group-header-color: $o-gray-900 !default;
-$o-list-footer-color: $o-gray-900 !default;
-$o-list-footer-bg-color: white !default;
-
-$o-btn-secondary-bg: white !default;
-$o-btn-secondary-hover-bg: $o-gray-100 !default;
-$o-btn-secondary-hover-border: $o-gray-200 !default;
-
-// Duplicate variable from web_enterprise/static/src/webclient/navbar/navbar.variables.scss
-$o-navbar-badge-bg: $o-enterprise-action-color !default;
+$left-pane-width: 500px !default;
+$navbar-height: 48px !default;
 
diff --git a/addons/pos_discount/static/src/overrides/components/discount_button/discount_button.xml b/addons/pos_discount/static/src/overrides/components/discount_button/discount_button.xml
index 03ce5e6167b..07d19633d08 100644
--- a/addons/pos_discount/static/src/overrides/components/discount_button/discount_button.xml
+++ b/addons/pos_discount/static/src/overrides/components/discount_button/discount_button.xml
@@ -2,8 +2,8 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_discount.DiscountButton" owl="1">
-        <span class="control-button js_discount" t-on-click="() => this.click()">
-            <i class="fa fa-tag"></i>
+        <span class="control-button js_discount btn btn-light rounded-0 fw-bolder" t-on-click="() => this.click()">
+            <i class="fa fa-tag me-1"></i>
             <span> </span>
             <span>Discount</span>
         </span>
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 68b2f2a94a8..197a014a9bc 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
@@ -1,20 +1,20 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
     <t t-name="pos_hr.LoginScreen" owl="1">
-        <div class="login-overlay">
-            <div class="screen-login">
-                <div class="login-title"><small>Log in to </small>
-                    <t t-esc="shopName" />
+        <div class="login-overlay fixed-top w-100 h-100 bg-view">
+            <div class="screen-login position-absolute top-0 start-0 bottom-0 end-0 d-flex flex-column py-4 m-auto w-100 rounded bg-view text-center fw-bolder">
+                <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">
-                    <span class="login-element">
-                        <img class="login-barcode-img"
+                <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">
+                        <img class="login-barcode-img w-50"
                              src="/point_of_sale/static/img/barcode.png" />
-                        <div class="login-barcode-text">Scan your badge</div>
+                        <div class="login-barcode-text mt-2">Scan your badge</div>
                     </span>
-                    <span class="login-or">or</span>
+                    <span class="login-or fs-2 text-muted">or</span>
                     <span class="login-element">
-                        <button class="login-button select-cashier"
+                        <button class="login-button select-cashier btn btn-lg btn-secondary py-5 px-3"
                                 t-on-click="selectCashier">Select Cashier</button>
                     </span>
                 </div>
diff --git a/addons/pos_hr/static/src/css/pos.css b/addons/pos_hr/static/src/css/pos.css
deleted file mode 100644
index ab60500a6f8..00000000000
--- a/addons/pos_hr/static/src/css/pos.css
+++ /dev/null
@@ -1,116 +0,0 @@
-.pos .login-overlay{
-    position: fixed;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    width: 100%;
-    height:100%;
-    z-index:1000;
-    background: linear-gradient(to right bottom, #77717e, #c9a8a9);
-}
-.pos .login-overlay:before {
-    content: '';
-    background-image: url(../../img/login-bg-overlay.svg);
-    background-color: rgba(0, 0, 0, 0.3);
-    position: fixed;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    width: 100%;
-    height:100%;
-}
-.pos .screen-login{
-    position: absolute;
-    top: 0; left: 0; right: 0; bottom: 0;
-    margin: auto;
-    max-width: 550px;
-    width:100%;
-    height:300px;
-    text-align:center;
-    font-size:20px;
-    font-weight:bold;
-    background-color: #F0EEEE;
-    border-radius: 3px;
-    z-index:1200;
-    font-family: 'Lato';
-}
-.pos .login-title{
-    height: 40%;
-    vertical-align: middle;
-    line-height: 5;
-    font-size: larger;
-}
-.pos .login-body{
-    display: flex;
-    justify-content: center;
-    height:37%;
-}
-
-.pos .login-footer{
-    height:18%;
-}
-
-.pos .login-element{
-    float: left;
-    width: 40%;
-    height: 60%;
-}
-.pos .login-barcode-img{
-    width: 80px;
-    height: 55px;
-    background: white;
-    border: 0px;
-}
-.pos .login-barcode-text{
-    color: #999999;
-    font-size: 13px;
-    padding-top: 0.2em;
-}
-.pos .login-or{
-    font-size: 15px;
-    font-style: italic;
-    float: left;
-    width: 10%;
-    height: 100%;
-    line-height: 5;
-}
-.pos .login-button{
-    font-size: initial;
-    height: 100%;
-    color: #555555;
-    border-radius: 5px;
-}
-@media screen and (max-width: 576px) {
-    .pos .screen-login {
-        font-family: 'Lato', sans-serif;
-        width: 100%;
-        height: 100%;
-        text-align: center;
-        background-color: #fff;
-        overflow: hidden;
-    }
-    .pos .login-body {
-        flex-direction: column;
-        align-items: center;
-    }
-    .pos .login-button {
-        color: #fff;
-        background-color: #00A09D;
-        border-color: #00A09D;
-        height: 38px;
-    }
-    .pos .login-barcode-text {
-        color: #adb5bd;
-        margin-top: 8px;
-        margin-bottom: 0;
-        font-size: 15px;
-        font-weight: 400;
-        line-height: 1.2;
-    }
-    .pos .login-element .o_barcode_mobile_container .o_mobile_barcode {
-        top:0;
-        height: 55px;
-    }
-}
diff --git a/addons/pos_hr/static/src/css/pos.scss b/addons/pos_hr/static/src/css/pos.scss
new file mode 100644
index 00000000000..6203b8e9585
--- /dev/null
+++ b/addons/pos_hr/static/src/css/pos.scss
@@ -0,0 +1,27 @@
+.login-overlay{
+    z-index:1000;
+
+    &:before {
+        content: '';
+        background-image: url(../../img/login-bg-overlay.svg);
+        background-color: rgba(0, 0, 0, 0.3);
+        position: fixed;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        width: 100%;
+        height:100%;
+    }
+}
+
+.screen-login{
+    max-width: 550px;
+    height:300px;
+}
+
+@media screen and (max-width: 576px) {
+    .screen-login {
+        height: 450px;
+    }
+}
diff --git a/addons/pos_hr/static/src/overrides/components/navbar/navbar.xml b/addons/pos_hr/static/src/overrides/components/navbar/navbar.xml
index 69ffa210210..718ee8af973 100644
--- a/addons/pos_hr/static/src/overrides/components/navbar/navbar.xml
+++ b/addons/pos_hr/static/src/overrides/components/navbar/navbar.xml
@@ -16,10 +16,10 @@
 
         <xpath expr="//li[hasclass('backend-button')]" position="after">
             <li t-if="pos.config.module_pos_hr" class="menu-item navbar-button lock-button" t-on-click="showLoginScreen">
-                <span>                                                                                        
-                    Lock                                                                                      
-                </span>                                                                                       
-            </li>                                                                                             
+                <a class="dropdown-item py-2">
+                Lock
+                </a>
+            </li>
         </xpath>
     </t>
 
diff --git a/addons/pos_loyalty/static/src/app/control_buttons/e_wallet_button/e_wallet_button.xml b/addons/pos_loyalty/static/src/app/control_buttons/e_wallet_button/e_wallet_button.xml
index eaf18b9c543..9af11f76fa6 100644
--- a/addons/pos_loyalty/static/src/app/control_buttons/e_wallet_button/e_wallet_button.xml
+++ b/addons/pos_loyalty/static/src/app/control_buttons/e_wallet_button/e_wallet_button.xml
@@ -6,8 +6,8 @@
         <t t-set="_orderTotal" t-value="_order.get_total_with_tax()" />
         <t t-set="_eWalletPrograms" t-value="_getEWalletPrograms()" />
         <t t-set="_eWalletRewards" t-value="_getEWalletRewards(_order)" />
-        <span class="control-button" t-att-class="_shouldBeHighlighted(_orderTotal, _eWalletPrograms, _eWalletRewards) ? 'highlight' : ''" t-on-click="_onClickWalletButton">
-            <i class="fa fa-credit-card"></i>
+        <span class="control-button btn btn-light rounded-0 fw-bolder" t-att-class="_shouldBeHighlighted(_orderTotal, _eWalletPrograms, _eWalletRewards) ? 'highlight' : ''" t-on-click="_onClickWalletButton">
+            <i class="fa fa-credit-card me-1"></i>
             <span> </span>
             <span><t t-esc="_getText(_orderTotal, _eWalletPrograms, _eWalletRewards)" /></span>
         </span>
diff --git a/addons/pos_loyalty/static/src/app/control_buttons/promo_code_button/promo_code_button.xml b/addons/pos_loyalty/static/src/app/control_buttons/promo_code_button/promo_code_button.xml
index 49505a9a076..88c65cea2d2 100644
--- a/addons/pos_loyalty/static/src/app/control_buttons/promo_code_button/promo_code_button.xml
+++ b/addons/pos_loyalty/static/src/app/control_buttons/promo_code_button/promo_code_button.xml
@@ -2,11 +2,11 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_loyalty.PromoCodeButton" owl="1">
-        <span class="control-button" t-on-click="() => this.click()">
-            <i class="fa fa-barcode"></i>
+        <button class="control-button btn btn-light rounded-0 fw-bolder" t-on-click="() => this.click()">
+            <i class="fa fa-barcode me-1"></i>
             <span> </span>
             <span>Enter Code</span>
-        </span>
+        </button>
     </t>
 
 </templates>
diff --git a/addons/pos_loyalty/static/src/app/control_buttons/reset_programs_button/reset_programs_button.xml b/addons/pos_loyalty/static/src/app/control_buttons/reset_programs_button/reset_programs_button.xml
index ac384964abf..1c30f7b7c86 100644
--- a/addons/pos_loyalty/static/src/app/control_buttons/reset_programs_button/reset_programs_button.xml
+++ b/addons/pos_loyalty/static/src/app/control_buttons/reset_programs_button/reset_programs_button.xml
@@ -2,11 +2,11 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_loyalty.ResetProgramsButton" owl="1">
-        <span class="control-button" t-att-class="{'disabled': _isDisabled()}" t-on-click="() => this.click()">
-            <i class="fa fa-star"></i>
+        <button class="control-button btn btn-light rounded-0 fw-bolder" t-att-class="{'disabled': _isDisabled()}" t-on-click="() => this.click()">
+            <i class="fa fa-star me-1"></i>
             <span> </span>
             <span>Reset Programs</span>
-        </span>
+        </button>
     </t>
 
 </templates>
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 015c2b423eb..b4dd5a8e9a0 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,11 +2,11 @@
 <templates id="template" xml:space="preserve">
 
      <t t-name="pos_loyalty.RewardButton" owl="1">
-        <span class="control-button" t-att-class="hasClaimableRewards() ? 'highlight' : 'disabled'" t-on-click="() => this.click()">
-            <i class="fa fa-star"></i>
+        <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()">
+            <i class="fa fa-star me-1"></i>
             <span> </span>
             <span>Reward</span>
-        </span>
+        </button>
     </t>
 
  </templates>
diff --git a/addons/pos_loyalty/static/src/css/Loyalty.scss b/addons/pos_loyalty/static/src/css/Loyalty.scss
index 9a57e39eb82..c5d9a3ee9f4 100644
--- a/addons/pos_loyalty/static/src/css/Loyalty.scss
+++ b/addons/pos_loyalty/static/src/css/Loyalty.scss
@@ -82,34 +82,6 @@
     .orderline.program-reward {
         font-style: italic;
     }
-
-    .summary {
-        .loyalty-points {
-            float: left;
-            padding: 10px;
-            max-width: 216px;
-            text-align: left;
-            color: #6EC89B;
-            background: rgba(110, 200, 155, 0.17);
-            border-radius: 3px;
-        }
-
-        .loyalty-points-title {
-            font-size: small;
-        }
-
-        .loyalty-points-spent {
-            color: #C86E6E;
-            background: rgba(200, 110, 110, 0.17);
-        }
-
-        .loyalty-points-total {
-            border-top: solid 2px;
-            text-align: center;
-            padding-top: 4px;
-            margin-top: 4px;
-        }
-    }
 }
 
 .pos-receipt .pos-coupon-rewards {
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 1ae9e9798c6..6a59f8f7cba 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,12 +2,12 @@
 <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">
+            <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='loyalty-points'>
-                            <div class='loyalty-points-title'>
+                        <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'>
@@ -16,17 +16,17 @@
                                 </div>
                             </t>
                             <t t-if='_loyaltyStat.points.spent'>
-                                <div class="loyalty-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>
                             </t>
-                            <div class='loyalty-points-total'>
+                            <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></div>
+                        <div class="d-none">Test</div>
                     </t>
                 </t>
             </div>
diff --git a/addons/pos_restaurant/data/pos_restaurant_demo.xml b/addons/pos_restaurant/data/pos_restaurant_demo.xml
index cbd25c20908..fe7c1a57a17 100644
--- a/addons/pos_restaurant/data/pos_restaurant_demo.xml
+++ b/addons/pos_restaurant/data/pos_restaurant_demo.xml
@@ -350,7 +350,7 @@
             <field name="color">rgb(53,211,116)</field>
             <field name="shape">square</field>
             <field name="width">130</field>
-            <field name="height">75</field>
+            <field name="height">85</field>
             <field name="position_h">100</field>
             <field name="position_v">50</field>
         </record>
@@ -362,7 +362,7 @@
             <field name="color">rgb(53,211,116)</field>
             <field name="shape">square</field>
             <field name="width">130</field>
-            <field name="height">75</field>
+            <field name="height">85</field>
             <field name="position_h">100</field>
             <field name="position_v">166</field>
         </record>
@@ -374,7 +374,7 @@
             <field name="color">rgb(53,211,116)</field>
             <field name="shape">square</field>
             <field name="width">130</field>
-            <field name="height">75</field>
+            <field name="height">85</field>
             <field name="position_h">100</field>
             <field name="position_v">283</field>
         </record>
@@ -386,7 +386,7 @@
             <field name="color">rgb(53,211,116)</field>
             <field name="shape">square</field>
             <field name="width">130</field>
-            <field name="height">75</field>
+            <field name="height">85</field>
             <field name="position_h">100</field>
             <field name="position_v">400</field>
         </record>
@@ -400,7 +400,7 @@
             <field name="color">rgb(53,211,116)</field>
             <field name="shape">square</field>
             <field name="width">130</field>
-            <field name="height">75</field>
+            <field name="height">85</field>
             <field name="position_h">800</field>
             <field name="position_v">50</field>
         </record>
@@ -412,7 +412,7 @@
             <field name="color">rgb(53,211,116)</field>
             <field name="shape">square</field>
             <field name="width">130</field>
-            <field name="height">75</field>
+            <field name="height">85</field>
             <field name="position_h">800</field>
             <field name="position_v">166</field>
         </record>
@@ -424,7 +424,7 @@
             <field name="color">rgb(53,211,116)</field>
             <field name="shape">square</field>
             <field name="width">130</field>
-            <field name="height">75</field>
+            <field name="height">85</field>
             <field name="position_h">800</field>
             <field name="position_v">283</field>
         </record>
@@ -436,7 +436,7 @@
             <field name="color">rgb(53,211,116)</field>
             <field name="shape">square</field>
             <field name="width">130</field>
-            <field name="height">75</field>
+            <field name="height">85</field>
             <field name="position_h">800</field>
             <field name="position_v">400</field>
         </record>
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 31053e4840d..7c82b5c185d 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
@@ -3,24 +3,23 @@
 
     <t t-name="pos_restaurant.BillScreen" owl="1">
         <div class="receipt-screen screen">
-            <div class="screen-content">
-                <div class="top-content">
-                    <div class="top-content-center">
-                        <h1>Bill Printing</h1>
+            <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">
+                        <h2 class="mb-0 text-start">Bill Printing</h2>
                     </div>
-                    <span class="button next highlight" t-on-click="confirm">
+                    <button class="button next highlight btn btn-lg btn-outline-primary" t-on-click="confirm">
                         <span>Ok</span>
-                        <span> </span>
-                        <i class="fa fa-angle-double-right"></i>
-                    </span>
+                        <i class="fa fa-angle-double-right ms-2"></i>
+                    </button>
                 </div>
-                <div class="centered-content">
-                    <div class="button print" t-on-click="printReceipt">
+                <div class="centered-content mx-auto mt-3 border-left border-right 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>
                         <span>Print</span>
                     </div>
-                    <div class="pos-receipt-container" t-ref="order-receipt">
+                    <div class="pos-receipt-container text-center" t-ref="order-receipt">
                         <OrderReceipt order="currentOrder" isBill="true"/>
                     </div>
                 </div>
diff --git a/addons/pos_restaurant/static/src/app/control_buttons/orderline_note_button/orderline_note_button.xml b/addons/pos_restaurant/static/src/app/control_buttons/orderline_note_button/orderline_note_button.xml
index 53c1dcdd645..ffd927bf429 100644
--- a/addons/pos_restaurant/static/src/app/control_buttons/orderline_note_button/orderline_note_button.xml
+++ b/addons/pos_restaurant/static/src/app/control_buttons/orderline_note_button/orderline_note_button.xml
@@ -2,11 +2,11 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_restaurant.OrderlineNoteButton" owl="1">
-        <div class="control-button" t-on-click="() => this.click()">
-            <i class="fa fa-tag" />
+        <button class="control-button btn btn-light rounded-0 fw-bolder" t-on-click="() => this.click()">
+            <i class="fa fa-tag me-1" />
             <span> </span>
             <span>Internal Note</span>
-        </div>
+        </button>
     </t>
 
 </templates>
diff --git a/addons/pos_restaurant/static/src/app/control_buttons/print_bill_button/print_bill_button.xml b/addons/pos_restaurant/static/src/app/control_buttons/print_bill_button/print_bill_button.xml
index 4366e2e2684..43ca4be9e8c 100644
--- a/addons/pos_restaurant/static/src/app/control_buttons/print_bill_button/print_bill_button.xml
+++ b/addons/pos_restaurant/static/src/app/control_buttons/print_bill_button/print_bill_button.xml
@@ -2,8 +2,8 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_restaurant.PrintBillButton" owl="1">
-        <span class="control-button order-printbill" t-att-class="{'disabled': _isDisabled()}" t-on-click="() => this.click()">
-            <i class="fa fa-print"></i>
+        <span class="control-button order-printbill btn btn-light rounded-0 fw-bolder" t-att-class="{'disabled': _isDisabled()}" t-on-click="() => this.click()">
+            <i class="fa fa-print me-1"></i>
             <span> </span>
             <span>Bill</span>
         </span>
diff --git a/addons/pos_restaurant/static/src/app/control_buttons/split_bill_button/split_bill_button.xml b/addons/pos_restaurant/static/src/app/control_buttons/split_bill_button/split_bill_button.xml
index 5005b42b978..e5173ac16b2 100644
--- a/addons/pos_restaurant/static/src/app/control_buttons/split_bill_button/split_bill_button.xml
+++ b/addons/pos_restaurant/static/src/app/control_buttons/split_bill_button/split_bill_button.xml
@@ -2,8 +2,8 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_restaurant.SplitBillButton" owl="1">
-        <span class="control-button order-split" t-att-class="{'disabled': _isDisabled()}" t-on-click="() => this.click()">
-            <i class="fa fa-files-o"></i>
+        <span class="control-button order-split btn btn-light rounded-0 fw-bolder" t-att-class="{'disabled': _isDisabled()}" t-on-click="() => this.click()">
+            <i class="fa fa-files-o me-1"></i>
             <span> </span>
             <span>Split</span>
         </span>
diff --git a/addons/pos_restaurant/static/src/app/control_buttons/table_guests_button/table_guests_button.xml b/addons/pos_restaurant/static/src/app/control_buttons/table_guests_button/table_guests_button.xml
index 02a465be892..236b31fc071 100644
--- a/addons/pos_restaurant/static/src/app/control_buttons/table_guests_button/table_guests_button.xml
+++ b/addons/pos_restaurant/static/src/app/control_buttons/table_guests_button/table_guests_button.xml
@@ -2,8 +2,8 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_restaurant.TableGuestsButton" owl="1">
-        <div class="control-button" t-on-click="() => this.click()">
-            <span class="control-button-number">
+        <button class="control-button btn btn-light rounded-0 fw-bolder" t-on-click="() => this.click()">
+            <span class="control-button-number px-2 py-1 rounded-circle text-bg-dark fw-bolder small me-1">
                 <t t-esc="nGuests" />
             </span>
             <span> </span>
diff --git a/addons/pos_restaurant/static/src/app/control_buttons/transfer_order_button/transfer_order_button.xml b/addons/pos_restaurant/static/src/app/control_buttons/transfer_order_button/transfer_order_button.xml
index c507f8ebc65..8f0570d686c 100644
--- a/addons/pos_restaurant/static/src/app/control_buttons/transfer_order_button/transfer_order_button.xml
+++ b/addons/pos_restaurant/static/src/app/control_buttons/transfer_order_button/transfer_order_button.xml
@@ -2,11 +2,11 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_restaurant.TransferOrderButton" owl="1">
-        <div class="control-button" t-on-click="() => this.click()">
-            <i class="oi oi-arrow-right" />
+        <button class="control-button btn btn-light rounded-0 fw-bolder" t-on-click="() => this.click()">
+            <i class="oi oi-arrow-right me-1" />
             <span> </span>
             <span>Transfer</span>
-        </div>
+        </button>
     </t>
 
 </templates>
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 1ffc030533f..e244ee68946 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
@@ -2,78 +2,78 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_restaurant.EditBar" owl="1">
-        <div class="edit-bar-top">
-            <span class="edit-button first-button" t-if="!ui.isSmall"></span>
-            <span class="edit-button" t-on-click.stop="props.createTable">
-                <i class="fa fa-plus icon-button" role="img" aria-label="Add" title="Add"></i>
-                <span class="text-button">TABLE</span>
-            </span>
-            <span class="edit-button" t-att-class="{ disabled: props.selectedTables.length == 0 }" t-on-click.stop="props.changeSeatsNum">
-                <i class="fa fa-user icon-button" role="img" aria-label="Seats" title="Seats"></i>
-                <span class="text-button">SEATS</span>
-            </span>
-            <span class="edit-button" t-if="getSelectedTablesShape() == 'square'" t-att-class="{ disabled: props.selectedTables.length == 0 }" t-on-click.stop="props.changeToCircle">
-                <span class="button-option round">
-                    <i class="fa fa-circle-o icon-button" role="img" aria-label="Round Shape" title="Round Shape"></i>
+        <div class="edit-bar-top d-flex align-items-center justify-content-between px-3 py-2 border-bottom bg-view">
+            <div class="d-flex flex-grow-1 gap-1 overflow-x-auto">
+                <span class="edit-button btn btn-light btn-lg" t-on-click.stop="props.createTable">
+                    <i class="fa fa-plus icon-button" role="img" aria-label="Add" title="Add"></i>
+                    <span class="text-button d-block">Table</span>
                 </span>
-                <span class="text-button">SHAPE</span>
-            </span>
-            <span class="edit-button" t-else="" t-att-class="{ disabled: props.selectedTables.length == 0 }" t-on-click.stop="props.changeToSquare">
-                <span class="button-option square">
-                    <i class="fa fa-square-o icon-button" role="img" aria-label="Square Shape" title="Square Shape"></i>
+                <span class="edit-button btn btn-light btn-lg" t-att-class="{ 'disabled': props.selectedTables.length == 0 }" t-on-click.stop="props.changeSeatsNum">
+                    <i class="fa fa-user icon-button" role="img" aria-label="Seats" title="Seats"></i>
+                    <span class="text-button d-block">Seats</span>
                 </span>
-                <span class="text-button">SHAPE</span>
-            </span>
-            <span t-if="!props.isColorPicker" class="edit-button" t-on-click.stop="props.toggleColorPicker">
-                <i class="fa fa-paint-brush icon-button" role="img" aria-label="Tint" title="Tint"></i>
-                <span class="text-button">FILL</span>
-            </span>
-            <span t-else="" class="edit-button is-active" t-on-click.stop="props.toggleColorPicker">
-                <i class="fa fa-paint-brush icon-button" role="img" aria-label="Tint" title="Tint"></i>
-                <span class="text-button">FILL</span>
-            </span>
-            <span class="edit-button" t-att-class="{ disabled: props.selectedTables.length > 1 }" t-on-click.stop="props.renameTable">
-                <i class="fa fa-pencil-square-o icon-button" role="img" aria-label="Rename" title="Rename"></i>
-                <span class="text-button">RENAME</span>
-            </span>
-            <span class="edit-button" t-on-click.stop="props.duplicateTableOrFloor">
-                <i class="fa fa-clone icon-button" role="img" aria-label="Copy" title="Copy"></i>
-                <span class="text-button">COPY</span>
-            </span>
-            <span class="edit-button trash" t-on-click.stop="props.deleteFloorOrTable">
-                <i class="fa fa-trash icon-button" role="img" aria-label="Delete" title="Delete"></i>
-                <span class="text-button">DELETE</span>
-            </span>
-            <span class="edit-button" t-on-click.stop="props.toggleEditMode">
+                <span class="edit-button btn btn-light btn-lg" t-if="getSelectedTablesShape() == 'square'" t-att-class="{ disabled: props.selectedTables.length == 0 }" t-on-click.stop="props.changeToCircle">
+                    <span class="button-option round">
+                        <i class="fa fa-circle-o icon-button" role="img" aria-label="Round Shape" title="Round Shape"></i>
+                    </span>
+                    <span class="text-button d-block">Shape</span>
+                </span>
+                <span class="edit-button btn btn-light btn-lg" t-else="" t-att-class="{ disabled: props.selectedTables.length == 0 }" t-on-click.stop="props.changeToSquare">
+                    <span class="button-option square">
+                        <i class="fa fa-square-o icon-button" role="img" aria-label="Square Shape" title="Square Shape"></i>
+                    </span>
+                    <span class="text-button d-block">Shape</span>
+                </span>
+                <span t-if="!props.isColorPicker" class="edit-button btn btn-light btn-lg" t-on-click.stop="props.toggleColorPicker">
+                    <i class="fa fa-paint-brush icon-button" role="img" aria-label="Tint" title="Tint"></i>
+                    <span class="text-button d-block">Fill</span>
+                </span>
+                <span t-else="" class="edit-button is-active btn btn-secondary btn-lg" t-on-click.stop="props.toggleColorPicker">
+                    <i class="fa fa-paint-brush icon-button" role="img" aria-label="Tint" title="Tint"></i>
+                    <span class="text-button d-block">Fill</span>
+                </span>
+                <span class="edit-button btn btn-light btn-lg" t-att-class="{ disabled: props.selectedTables.length > 1 }" t-on-click.stop="props.renameTable">
+                    <i class="fa fa-pencil-square-o icon-button" role="img" aria-label="Rename" title="Rename"></i>
+                    <span class="text-button d-block">Rename</span>
+                </span>
+                <span class="edit-button btn btn-light btn-lg" t-on-click.stop="props.duplicateTableOrFloor">
+                    <i class="fa fa-clone icon-button" role="img" aria-label="Copy" title="Copy"></i>
+                    <span class="text-button d-block">Copy</span>
+                </span>
+                <span class="edit-button trash btn btn-light btn-lg" t-on-click.stop="props.deleteFloorOrTable">
+                    <i class="fa fa-trash icon-button" role="img" aria-label="Delete" title="Delete"></i>
+                    <span class="text-button d-block">Delete</span>
+                </span>
+            </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="fa fa-times icon-button" role="img" aria-label="Close" title="Close"></i>
-                    <span class="text-button">CLOSE</span>
+                    <i class="oi oi-close icon-button" role="img" aria-label="Close" title="Close"></i>
                 </div>
             </span>
         </div>
-        <div t-if="props.isColorPicker and props.selectedTables.length > 0" class="color-picker">
-            <span class="color"  style="background-color:#FFFFFF" role="img" aria-label="White" title="White" t-on-click.stop="() => props.setTableColor('#FFFFFF')" />
-            <span class="color"  style="background-color:#EB6D6D" role="img" aria-label="Red" title="Red" t-on-click.stop="() => props.setTableColor('#EB6D6D')" />
-            <span class="color"  style="background-color:#35D374" role="img" aria-label="Green" title="Green" t-on-click.stop="() => props.setTableColor('#35D374')" />
-            <span class="color"  style="background-color:#6C6DEC" role="img" aria-label="Blue" title="Blue" t-on-click.stop="() => props.setTableColor('#6C6DEC')" />
-            <span class="color"  style="background-color:#EBBF6D" role="img" aria-label="Orange" title="Orange" t-on-click.stop="() => props.setTableColor('#EBBF6D')" />
-            <span class="color"  style="background-color:#EBEC6D" role="img" aria-label="Yellow" title="Yellow" t-on-click.stop="() => props.setTableColor('#EBEC6D')" />
-            <span class="color"  style="background-color:#AC6DAD" role="img" aria-label="Purple" title="Purple" t-on-click.stop="() => props.setTableColor('#AC6DAD')" />
-            <span class="color"  style="background-color:#6C6D6D" role="img" aria-label="Grey" title="Grey" t-on-click.stop="() => props.setTableColor('#6C6D6D')" />
-            <span class="color"  style="background-color:#ACADAD" role="img" aria-label="Light grey" title="Light grey" t-on-click.stop="() => props.setTableColor('#ACADAD')" />
-            <span class="color"  style="background-color:#4ED2BE" role="img" aria-label="Turquoise" title="Turquoise" t-on-click.stop="() => props.setTableColor('#4ED2BE')" />
+        <div t-if="props.isColorPicker and props.selectedTables.length > 0" class="color-picker d-flex justify-content-center border-top border-bottom p-2 bg-200">
+            <span class="color flex-grow-1 py-4 border cursor-pointer"  style="background-color:#FFFFFF" role="img" aria-label="White" title="White" t-on-click.stop="() => props.setTableColor('#FFFFFF')" />
+            <span class="color flex-grow-1 py-4 cursor-pointer"  style="background-color:#EB6D6D" role="img" aria-label="Red" title="Red" t-on-click.stop="() => props.setTableColor('#EB6D6D')" />
+            <span class="color flex-grow-1 py-4 cursor-pointer"  style="background-color:#35D374" role="img" aria-label="Green" title="Green" t-on-click.stop="() => props.setTableColor('#35D374')" />
+            <span class="color flex-grow-1 py-4 cursor-pointer"  style="background-color:#6C6DEC" role="img" aria-label="Blue" title="Blue" t-on-click.stop="() => props.setTableColor('#6C6DEC')" />
+            <span class="color flex-grow-1 py-4 cursor-pointer"  style="background-color:#EBBF6D" role="img" aria-label="Orange" title="Orange" t-on-click.stop="() => props.setTableColor('#EBBF6D')" />
+            <span class="color flex-grow-1 py-4 cursor-pointer"  style="background-color:#EBEC6D" role="img" aria-label="Yellow" title="Yellow" t-on-click.stop="() => props.setTableColor('#EBEC6D')" />
+            <span class="color flex-grow-1 py-4 cursor-pointer"  style="background-color:#AC6DAD" role="img" aria-label="Purple" title="Purple" t-on-click.stop="() => props.setTableColor('#AC6DAD')" />
+            <span class="color flex-grow-1 py-4 cursor-pointer"  style="background-color:#6C6D6D" role="img" aria-label="Grey" title="Grey" t-on-click.stop="() => props.setTableColor('#6C6D6D')" />
+            <span class="color flex-grow-1 py-4 cursor-pointer"  style="background-color:#ACADAD" role="img" aria-label="Light grey" title="Light grey" t-on-click.stop="() => props.setTableColor('#ACADAD')" />
+            <span class="color flex-grow-1 py-4 cursor-pointer"  style="background-color:#4ED2BE" role="img" aria-label="Turquoise" title="Turquoise" t-on-click.stop="() => props.setTableColor('#4ED2BE')" />
         </div>
-        <div t-if="props.isColorPicker and props.selectedTables.length == 0" class="color-picker">
-            <span class="color"  style="background-color:rgb(255, 255, 255)" role="img" aria-label="White" title="White" t-on-click.stop="() => props.setFloorColor('rgb(255, 255, 255)')" />
-            <span class="color"  style="background-color:rgb(244, 149, 149)" role="img" aria-label="Red" title="Red" t-on-click.stop="() => props.setFloorColor('rgb(244, 149, 149)')" />
-            <span class="color"  style="background-color:rgb(130, 233, 171)" role="img" aria-label="Green" title="Green" t-on-click.stop="() => props.setFloorColor('rgb(130, 233, 171)')" />
-            <span class="color"  style="background-color:rgb(136, 137, 242)" role="img" aria-label="Blue" title="Blue" t-on-click.stop="() => props.setFloorColor('rgb(136, 137, 242)')" />
-            <span class="color"  style="background-color:rgb(255, 214, 136)" role="img" aria-label="Orange" title="Orange" t-on-click.stop="() => props.setFloorColor('rgb(255, 214, 136)')" />
-            <span class="color"  style="background-color:rgb(254, 255, 154)" role="img" aria-label="Yellow" title="Yellow" t-on-click.stop="() => props.setFloorColor('rgb(254, 255, 154)')" />
-            <span class="color"  style="background-color:rgb(209, 171, 210)" role="img" aria-label="Purple" title="Purple" t-on-click.stop="() => props.setFloorColor('rgb(209, 171, 210)')" />
-            <span class="color"  style="background-color:rgb(75, 75, 75)"    role="img" aria-label="Grey" title="Grey" t-on-click.stop="() => props.setFloorColor('rgb(75, 75, 75)')" />
-            <span class="color"  style="background-color:rgb(210, 210, 210)" role="img" aria-label="Light grey" title="Light grey" t-on-click.stop="() => props.setFloorColor('rgb(210, 210, 210)')" />
-            <span class="color"  style="background-color:rgb(127, 221, 236)" role="img" aria-label="Turquoise" title="Turquoise" t-on-click.stop="() => props.setFloorColor('rgb(127, 221, 236)')" />
+        <div t-if="props.isColorPicker and props.selectedTables.length == 0" class="color-picker d-flex justify-content-center border-top border-bottom p-2 bg-200">    
+            <span class="color flex-grow-1 py-4 border cursor-pointer"  style="background-color:rgb(255, 255, 255)" role="img" aria-label="White" title="White" t-on-click.stop="() => props.setFloorColor('rgb(255, 255, 255)')" />
+            <span class="color flex-grow-1 py-4 cursor-pointer"  style="background-color:rgb(244, 149, 149)" role="img" aria-label="Red" title="Red" t-on-click.stop="() => props.setFloorColor('rgb(244, 149, 149)')" />
+            <span class="color flex-grow-1 py-4 cursor-pointer"  style="background-color:rgb(130, 233, 171)" role="img" aria-label="Green" title="Green" t-on-click.stop="() => props.setFloorColor('rgb(130, 233, 171)')" />
+            <span class="color flex-grow-1 py-4 cursor-pointer"  style="background-color:rgb(136, 137, 242)" role="img" aria-label="Blue" title="Blue" t-on-click.stop="() => props.setFloorColor('rgb(136, 137, 242)')" />
+            <span class="color flex-grow-1 py-4 cursor-pointer"  style="background-color:rgb(255, 214, 136)" role="img" aria-label="Orange" title="Orange" t-on-click.stop="() => props.setFloorColor('rgb(255, 214, 136)')" />
+            <span class="color flex-grow-1 py-4 cursor-pointer"  style="background-color:rgb(254, 255, 154)" role="img" aria-label="Yellow" title="Yellow" t-on-click.stop="() => props.setFloorColor('rgb(254, 255, 154)')" />
+            <span class="color flex-grow-1 py-4 cursor-pointer"  style="background-color:rgb(209, 171, 210)" role="img" aria-label="Purple" title="Purple" t-on-click.stop="() => props.setFloorColor('rgb(209, 171, 210)')" />
+            <span class="color flex-grow-1 py-4 cursor-pointer"  style="background-color:rgb(75, 75, 75)"    role="img" aria-label="Grey" title="Grey" t-on-click.stop="() => props.setFloorColor('rgb(75, 75, 75)')" />
+            <span class="color flex-grow-1 py-4 cursor-pointer"  style="background-color:rgb(210, 210, 210)" role="img" aria-label="Light grey" title="Light grey" t-on-click.stop="() => props.setFloorColor('rgb(210, 210, 210)')" />
+            <span class="color flex-grow-1 py-4 cursor-pointer"  style="background-color:rgb(127, 221, 236)" role="img" aria-label="Turquoise" title="Turquoise" t-on-click.stop="() => props.setFloorColor('rgb(127, 221, 236)')" />
         </div>
     </t>
 
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 42d9639a758..3e42cc55fd3 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 09356ed0844..2cf927af8f1 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,8 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_restaurant.EditableTable" owl="1">
-        <div class="table selected" t-ref="root">
-            <span class="label drag-handle">
+        <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">
                 <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.js b/addons/pos_restaurant/static/src/app/floor_screen/floor_screen.js
index e8181d735c3..d258f431706 100644
--- a/addons/pos_restaurant/static/src/app/floor_screen/floor_screen.js
+++ b/addons/pos_restaurant/static/src/app/floor_screen/floor_screen.js
@@ -56,7 +56,6 @@ export class FloorScreen extends Component {
     }
     onPatched() {
         this.floorMapRef.el.style.background = this.state.floorBackground;
-        this.addFloorRef.el.style.background = this.state.floorBackground;
         if (!this.pos.isEditMode && this.pos.floors.length > 0) {
             this.addFloorRef.el.style.display = "none";
         } else {
@@ -90,7 +89,6 @@ export class FloorScreen extends Component {
     onMounted() {
         this.pos.openCashControl();
         this.floorMapRef.el.style.background = this.state.floorBackground;
-        this.addFloorRef.el.style.background = this.state.floorBackground;
         if (!this.pos.isEditMode && this.pos.floors.length > 0) {
             this.addFloorRef.el.style.display = "none";
         } else {
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 9791862e1c4..2669932ca63 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
@@ -1,229 +1,18 @@
-.floor-screen {
-    margin: 0px auto;
-    text-align: left;
-    height: 100%;
-    overflow: hidden;
-    position: relative;
-    display: flex;
-    flex-flow: column nowrap;
-
-    .edit-bar-top {
-        display: flex;
-        height: 48px;
-        align-items: center;
-        overflow-x: auto;
-
-        .disabled {
-            color: grey;
-        }
-
-        .edit-button {
-            padding: 3px;
-            margin: 5px 20px;
-            text-align: center;
-            flex: auto;
-            cursor: pointer;
-            display: flex;
-            flex-direction: column;
-            flex-basis: 0;
-
-            .icon-button {
-                font-size: 18px;
-            }
-
-            .text-button {
-                font-size: 14px;
-            }
-
-            &.first-button {
-                cursor: default;
-                padding-right: 10px;
-                text-align: right;
-                flex-basis: 10%;
-                border: none;
-            }
-
-            &:last-child {
-                cursor: pointer;
-                padding-right: 10px;
-                text-align: right;
-                flex-basis: 10%;
-                border: none;
-                display: flex;
-                flex-direction: row-reverse;
-
-                .close-edit-button {
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                }
-            }
-        }
-
-        .is-active {
-            background-color: $primary;
-            border: solid 1px white;
-            border-radius: 5px;
-        }
-    }
-
-    .color-picker {
-        display: flex;
-        height: 48px;
-        align-items: center;
-        justify-content: center;
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 48px;
-        background-color: $o-gray-100;
-
-        .color {
-            float: left;
-            cursor: pointer;
-            width: 48px;
-            height: 48px;
-        }
-    }
-
-    .close-picker {
-        position: absolute;
-        bottom: 0;
-        left: 50%;
-        margin-left: -16px;
-        margin-bottom: -16px;
-        width: 32px;
-        height: 32px;
-        line-height: 32px;
-        text-align: center;
-        font-size: 20px;
-        border-radius: 16px;
-        background: black;
-        color: white;
-        cursor: pointer;
-    }
-}
-
-.floor-selector {
-    line-height: 48px;
-    font-size: 18px;
-    display: flex;
-    text-align: center;
-    width: 100%;
-
-    .button {
-        cursor: pointer;
-        border-left: solid 1px $gray-400;
-        flex-grow: 3;
-
-        &:first-child {
-            border-left: none;
-        }
-
-        &.active {
-            background: $o-navbar-badge-bg;
-            color: white;
-        }
-    }
-
-    .button-add {
-        cursor: pointer;
-        flex-grow: 1;
-        background-color: transparent;
-        background-size: cover;
-        transition: all 300ms ease-in-out;
-        color: $primary;
-        border-left: none;
-    }
-}
-
 .floor-map {
-    flex: 1;
-    position: relative;
-    width: auto;
-    height: 100%;
-    background: #D8D7D7;
-    background-repeat: no-repeat;
-    overflow: auto;
-    background-size: cover;
-    transition: all 300ms ease-in-out;
-
     // Should probably be moved to table.scss but currently the selectors are too generic
     .table {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        position: absolute;
-        text-align: center;
-        color: white;
-        background: rgb(53, 211, 116);
-        border-radius: 3px;
-        cursor: pointer;
         box-shadow: 0px 3px rgba(0,0,0,0.07);
         transition: background-color 300ms ease-in-out;
         box-sizing: border-box;
 
         &.selected {
-            outline: solid rgba(255,255,255,0.3);
             cursor: move;
             z-index: 50;
-            overflow: hidden;
-        }
-
-        .infos {
-            display: flex;
-            gap: 1rem;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .order-count {
-            background: black;
-            border-radius: 999px;
-            z-index: 10;
-            width: 16px;
-            height: 16px;
-            line-height: 16px;
-            font-size: 16px;
-            position: absolute;
-            padding: 3px;
-
-            &.notify-printing {
-                background: red;
-            }
-
-            &.notify-skipped {
-                background: blue;
-            }
         }
     }
 
-    .table-seats {
-        display: inline-block;
-        border-radius: 5px;
-        background: rgba(0,0,0,0.2);
-        color: white;
-        z-index: 3;
-        overflow: hidden;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin: 0 auto;
-        padding: 0 10px;
-        position: absolute;
-        bottom: -5px;
-        left: 50%;
-        transform: translate(-50%, -50%);
-
-        .cover {
-            position: absolute;
-            left: 0;
-            top: 0;
-            height: 100%;
-            background: black;
-            opacity: 0.4;
-            z-index: -1;
-        }
+    .table > * {
+        border-top: none !important;
     }
 
     .table-handle {
@@ -246,13 +35,6 @@
         }
     }
 
-    .label {
-        display: block;
-        max-height: 100%;
-        overflow: hidden;
-        position: relative;
-    }
-
     .edit-button.editing {
         position: fixed;
         top: 0;
@@ -272,26 +54,4 @@
             color: white;
         }
     }
-
-    .empty-floor {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        margin: auto;
-        width: 400px;
-        height: 40px;
-        font-size: 18px;
-        text-align: center;
-        opacity: 0.6;
-
-        .fa-plus {
-            display: inline-block;
-            padding: 6px 7px 3px;
-            margin: 0px 3px;
-            background: rgba(255,255,255,0.5);
-            border-radius: 3px;
-        }
-    }
 }
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 38a9db8f913..6da0073e9ed 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,23 +2,24 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_restaurant.FloorScreen" owl="1">
-        <div class="floor-screen screen">
-            <EditBar t-if="pos.isEditMode" selectedTables="selectedTables" nbrFloors="nbrFloors"
+        <div class="floor-screen screen position-relative d-flex flex-column flex-nowrap m-0 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"
                         changeSeatsNum.bind="changeSeatsNum" changeToCircle.bind="changeToCircle" changeToSquare.bind="changeToSquare"
                         setTableColor.bind="setTableColor" setFloorColor.bind="setFloorColor" deleteFloorOrTable.bind="deleteFloorOrTable"
                         toggleEditMode.bind="toggleEditMode"
             />
-            <div class="floor-selector">
+            <div class="floor-selector d-flex text-center bg-100 fs-3">
                 <t t-foreach="pos.floors" t-as="floor" t-key="floor.id">
-                    <span class="button button-floor" t-att-class="{ active: floor.id === state.selectedFloorId }" t-on-click="() => this.selectFloor(floor)">
+                    <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)">
                         <t t-esc="floor.name" />
-                    </span>
+                    </button>
                 </t>
-                <span class="button button-add" t-ref="add-floor-ref" t-on-click="addFloor">
-                    ADD FLOOR
-                </span>
+                <button class="button button-add btn btn-secondary p-3 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>
             </div>
 
             <div
@@ -26,11 +27,11 @@
                 t-on-touchstart="_onPinchStart"
                 t-on-touchmove="_onPinchMove"
                 t-on-touchend="_onPinchEnd"
-                class="floor-map"
+                class="floor-map position-relative flex-grow-1 flex-shrink-1 flex-basis-0 w-auto h-100 overflow-auto"
                 t-ref="floor-map-ref"
             >
                 <t t-if="pos.floors.length > 0">
-                    <div t-if="isFloorEmpty" class="empty-floor" t-ref="map">
+                    <div t-if="isFloorEmpty" class="empty-floor d-flex align-items-center justify-content-center h-100 fs-3 text-center text-muted" t-ref="map">
                         <span>Oops! No tables available.<br/>Add a new table to get started.</span>
                     </div>
                     <div t-else="" t-ref="map">
@@ -41,7 +42,7 @@
                     </div>
                 </t>
                 <t t-else="">
-                    <div class="empty-floor" t-ref="map">
+                    <div class="empty-floor d-flex align-items-center justify-content-center h-100 fs-3 text-center text-muted" t-ref="map">
                         <span>Oops! No floors available.<br/>Add a new floor to get started.</span>
                     </div>
                 </t>
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 45a456b609f..1236691ecb7 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,8 @@ export class Table extends Component {
         const notifications = this._getNotifications();
         const countClass = {
             "order-count": true,
-            "notify-printing": notifications.printing,
-            "notify-skipped": notifications.skipped,
+            "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,
         };
         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 5c9ad417313..facd47425c4 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,16 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates id="template" xml:space="preserve">
     <t t-name="pos_restaurant.Table" owl="1">
-        <div class="table" t-on-click.stop="(ev) => props.onClick(props.table, ev)" t-att-style="style">
+        <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">
+                <span class="label fw-bolder fs-4 z-index-1">
                     <t t-esc="props.table.name" />
                 </span>
-                <span t-att-class="orderCountClass" t-att-hidden="orderCount === 0" t-att-style="badgeStyle">
+                <span t-att-class="orderCountClass" t-attf-class="{{ orderCount === 0 ? 'opacity-0' : ''}}" t-att-style="badgeStyle">
                     <t t-esc="orderCount" />
                 </span>
             </div>
-             <span class="table-seats">
+            <span class="table-seats mb-1 px-2 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/split_bill_screen/split_bill_screen.xml b/addons/pos_restaurant/static/src/app/split_bill_screen/split_bill_screen.xml
index 1420f73bdbf..16e73b28c18 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
@@ -3,21 +3,20 @@
 
     <t t-name="pos_restaurant.SplitBillScreen" owl="1">
         <div class="splitbill-screen screen">
-            <div class="contents">
-                <div class="top-content">
-                    <span class="button back" t-on-click="back">
-                        <i class="fa fa-angle-double-left"></i>
-                        <span> </span>
+            <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">
+                        <i class="fa fa-angle-double-left me-2"></i>
                         <span>Back</span>
-                    </span>
-                    <div class="top-content-center">
-                        <h1>Bill Splitting</h1>
+                    </button>
+                    <div class="top-content-center flex-grow-1">
+                        <h2 class="mb-0">Bill Splitting</h2>
                     </div>
                 </div>
-                <div t-if="newOrder" class="main">
-                    <div class="lines">
-                        <div class="order">
-                            <ul class="orderlines">
+                <div t-if="newOrder" class="main d-flex flex-nowrap flex-grow-1 overflow-hidden">
+                    <div class="lines d-flex flex-shrink-1 flex-grow-1 flex-basis-0 justify-content-center border-end overflow-y-auto ">
+                        <div class="order w-100 h-auto py-2 m-4 border rounded bg-view text-start">
+                            <ul class="orderlines flex-grow-1 h-100 overflow-auto">
                                 <t t-foreach="orderlines" t-as="line" t-key="line.cid">
                                     <SplitOrderline
                                         onClickLine.bind="onClickLine"
@@ -27,16 +26,15 @@
                             </ul>
                         </div>
                     </div>
-                    <div class="controls">
-                        <div class="order-info">
+                    <div class="controls d-flex flex-column flex-nowrap flex-grow-1 flex-shrink-1 flex-basis-0">
+                        <div class="order-info py-4 border-bottom text-center text-success">
                             <span class="subtotal">
                                 <t t-esc="env.utils.formatCurrency(newOrder.get_subtotal())" />
                             </span>
                         </div>
-                        <div class="pay-button">
-                            <div class="button" t-on-click="proceed">
-                                <i class="oi oi-chevron-right" />
-                                <span> </span>
+                        <div class="pay-button m-3">
+                            <div class="button btn btn-lg btn-secondary py-3 w-100" t-on-click="proceed">
+                                <i class="oi oi-chevron-right me-2" />
                                 <span>Payment</span>
                             </div>
                         </div>
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 5167aa4d486..43e1e446174 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,25 +2,25 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_restaurant.SplitOrderline" owl="1">
-        <li class="orderline" t-att-class="{ selected: isSelected, partially: props.split.quantity !== props.line.get_quantity() }" t-on-click="() => this.click()">
-            <span class="product-name">
+        <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()">
+            <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">
+            <span class="price fw-bold float-end">
                 <t t-esc="env.utils.formatCurrency(props.line.get_display_price())" />
             </span>
-            <ul class="info-list">
+            <ul class="info-list ms-2">
                 <t t-if="props.line.get_quantity_str() !== '1'">
                     <li class="info">
                         <t t-if="isSelected and props.line.get_unit().is_pos_groupable">
-                            <em class="big">
+                            <em class="big fs-3 fst-normal fw-bolder me-1">
                                 <t t-esc="props.split.quantity" />
                             </em>
                             /
                             <t t-esc="props.line.get_quantity_str()" />
                         </t>
                         <t t-if="!(isSelected and props.line.get_unit().is_pos_groupable)">
-                            <em>
+                            <em class="fst-normal fw-bolder me-1">
                                 <t t-esc="props.line.get_quantity_str()" />
                             </em>
                         </t>
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 6be5551a859..61efd5d6ba7 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
@@ -3,53 +3,54 @@
 
     <t t-name="pos_restaurant.TipScreen" owl="1">
         <div class="tip-screen screen">
-            <div class="pos-receipt-container" t-ref="pos-receipt-container"/>
-            <div class="screen-content">
-                <div class="top-content">
-                    <span class="button back" t-on-click="() => this.pos.showScreen('FloorScreen')">
-                        <i class="fa fa-angle-double-left"></i>
-                        <span> </span>
+            <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">
+                    <button class="button btn btn-lg btn-outline-primary" t-on-click="() => this.pos.showScreen('FloorScreen')">
+                        <i class="fa fa-angle-double-left me-2"/>
                         <span>Back</span>
-                    </span>
-                    <span class="button" t-if="hardwareProxy.printer" t-on-click="printTipReceipt">
+                    </button>
+                    <button class="button btn btn-lg btn-outline-primary" t-if="hardwareProxy.printer" t-on-click="printTipReceipt">
                         <i class="fa fa-print"></i>
                         <span> </span>
                         <span>Reprint receipts</span>
-                    </span>
-                    <div class="top-content-center">
-                        <h1>Add a tip</h1>
+                    </button>
+                    <div class="top-content-center flex-grow-1">
+                        <h2 class="mb-0">Add a tip</h2>
                     </div>
-                    <div class="button highlight next" t-on-click="validateTip">
+                    <div class="button highlight next btn btn-lg btn-primary" t-on-click="validateTip">
                         Settle <i class="fa fa-angle-double-right"></i>
                     </div>
                 </div>
                 <div class="tip-options">
-                    <div class="total-amount">
+                    <div class="total-amount my-4 fs-2 text-center">
                         <t t-esc="overallAmountStr" />
                     </div>
-                    <div class="tip-amount-options">
-                        <div class="percentage-amounts">
+                    <div class="tip-amount-options d-flex flex-column gap-2 mx-4 p-3 rounded bg-view">
+                        <div class="percentage-amounts d-flex gap-2">
                             <t t-foreach="percentageTips" t-as="tip" t-key="tip.percentage">
-                                <div class="button" t-on-click="() => { state.inputTipAmount = tip.amount.toFixed(2); }">
-                                    <div class="percentage">
+                                <button class="button btn btn-lg btn-secondary flex-fill py-5" t-on-click="() => { state.inputTipAmount = tip.amount.toFixed(2); }">
+                                    <div class="percentage fs-1 text-primary text-center">
                                         <t t-esc="tip.percentage"></t>
                                     </div>
-                                    <div class="amount">
+                                    <div class="amount text-muted">
                                         <t t-esc="env.utils.formatCurrency(tip.amount)" />
                                     </div>
-                                </div>
+                                </button>
                             </t>
                         </div>
-                        <div class="no-tip" t-on-click="() => { state.inputTipAmount = '0'; }">
-                            <div class="button">No Tip</div>
+                        <div class="no-tip d-grid">
+                            <button class="button btn btn-lg btn-secondary flex-fill py-5 fs-1 text-primary"  t-on-click="() => { state.inputTipAmount = '0'; }">No Tip</button>
                         </div>
-                        <div class="custom-amount-form">
-                            <div class="item label">Amount</div>
-                            <div class="item input">
-                                <input type="text" t-model="state.inputTipAmount" t-att-data-amount="state.inputTipAmount" />
-                                <div class="currency">
-                                    <t t-esc="pos.getCurrencySymbol()" />
-                                </div>
+                        <div class="custom-amount-form d-flex">
+                            <div class="input-group input-group-lg">
+                                <span class="input-group-text bg-secondary">Tip Amount</span>
+                                <input type="text" class="item form-control fs-1" aria-label="Username" t-model="state.inputTipAmount" t-att-data-amount="state.inputTipAmount" disabled>
+                                <span class="input-group-text">
+                                    <div class="currency">
+                                        <t t-esc="pos.getCurrencySymbol()" />
+                                    </div>
+                                </span>
                             </div>
                         </div>
                     </div>
diff --git a/addons/pos_restaurant/static/src/overrides/components/navbar/navbar.xml b/addons/pos_restaurant/static/src/overrides/components/navbar/navbar.xml
index 3a29521cea7..8cf048d03e3 100644
--- a/addons/pos_restaurant/static/src/overrides/components/navbar/navbar.xml
+++ b/addons/pos_restaurant/static/src/overrides/components/navbar/navbar.xml
@@ -4,10 +4,10 @@
     <t t-name="pos_restaurant.Navbar" t-inherit="point_of_sale.Navbar" t-inherit-mode="extension">
         <xpath expr="//li[hasclass('backend-button')]" position="before">
             <li t-if="pos.mainScreen.component.name == 'FloorScreen'" class="menu-item navbar-button edit-button" t-on-click="toggleEditMode">
-                <span>Edit Plan</span>
+                <a class="dropdown-item py-2">Edit Plan</a>
             </li>
             <li t-if="pos.mainScreen.component.name == 'FloorScreen'" class="menu-item navbar-button" t-on-click="onSwitchButtonClick">
-                <span>Switch Floor View</span>
+                <a class="dropdown-item py-2">Switch Floor View</a>
             </li>
         </xpath>
     </t>
diff --git a/addons/pos_restaurant/static/src/overrides/components/product_screen/actionpad_widget/actionpad_widget.xml b/addons/pos_restaurant/static/src/overrides/components/product_screen/actionpad_widget/actionpad_widget.xml
index 62e6c7b7207..968757583e5 100644
--- a/addons/pos_restaurant/static/src/overrides/components/product_screen/actionpad_widget/actionpad_widget.xml
+++ b/addons/pos_restaurant/static/src/overrides/components/product_screen/actionpad_widget/actionpad_widget.xml
@@ -5,8 +5,8 @@
         <xpath expr="//button[hasclass('validation')]" position="after">
             <button
                 t-if="this.swapButton"
-                class="button submit-order"
-                t-att-class="addedClasses"
+                class="button submit-order btn btn-lg py-5 rounded-0 highlight d-flex flex-column flex-fill align-items-center justify-content-center fw-bolder"
+                t-att-class="addedClasses" t-attf-class="{{ !this.highlightPay ? 'highlight btn-primary' : 'btn-secondary' }}"
                 t-on-click="submitOrder">
                 <div t-att-class ="categoryCount ? 'smaller-display' : 'none'">
                     <div  t-att-class = "categoryCount ? 'submit-circle-smaller' : 'submit-circle'">
@@ -25,7 +25,7 @@
 
         <!-- Replace the customer button by the payment button, the customer button will be added in the mixins -->
         <xpath expr="//button[hasclass('set-partner')]" position="after">
-            <button t-on-click="() => pos.get_order().pay()" class="button pay-order-button" t-att-class="{ 'highlight': this.highlightPay }" t-if="this.swapButton">
+            <button t-on-click="() => pos.get_order().pay()" class="button pay-order-button btn btn-lg rounded-0" t-attf-class="{{ this.highlightPay ? 'highlight btn-primary' : 'btn-secondary' }}" t-if="this.swapButton">
                 <i class="oi oi-chevron-right" role="img" aria-label="Pay" title="Pay" />
                 Payment
             </button>
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 c5941e44fea..f315352d168 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">
-                    <i class="fa fa-tag" role="img" aria-label="Note" title="Note"/>
+                <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"/>
                     <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 027fc43e9ca..e441782430d 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
@@ -1,24 +1,26 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
     <t t-name="pos_restaurant.ProductScreen" t-inherit="point_of_sale.ProductScreen" t-inherit-mode="extension" owl="1">
-        <!-- Replace the payment button by the order button -->
+        <!-- add a showOrderButton here (using the computeOrderChange method) -->
         <xpath expr="//button[hasclass('pay-button')]" position="replace">
             <button
                 t-if="this.swapButton"
-                class="btn-switchpane"
+                class="btn-switchpane btn btn-primary flex-fill rounded-0 fw-bolder py-5"
                 t-on-click="submitOrder"
                 t-att-class="{'primary': primaryPayButton(), 'secondary': !primaryPayButton()}">
-                <!-- add a showOrderButton here (using the computeOrderChange method) -->
-                <h1>Order</h1>
+                <!-- Replace the payment button by the order button -->
+                <span class="fs-1 d-block">Order</span>
                 <span><t t-esc="total"/></span>
             </button>
             <t t-else="">
-                <button class="btn-switchpane" t-att-class="{'primary': primaryPayButton(), 'secondary': !primaryPayButton()}" t-on-click="() => currentOrder.pay()">
-                    <h1>Pay</h1>
+                <button 
+                    class="btn-switchpane btn btn-primary flex-fill rounded-0 fw-bolder py-5" 
+                    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>
             </t>
-            
         </xpath>
     </t>
 </templates>
diff --git a/addons/pos_restaurant/static/src/overrides/components/receipt_screen/order_receipt/order_receipt.xml b/addons/pos_restaurant/static/src/overrides/components/receipt_screen/order_receipt/order_receipt.xml
index 5308a51afce..bd8e2ebccdd 100644
--- a/addons/pos_restaurant/static/src/overrides/components/receipt_screen/order_receipt/order_receipt.xml
+++ b/addons/pos_restaurant/static/src/overrides/components/receipt_screen/order_receipt/order_receipt.xml
@@ -20,22 +20,22 @@
         </xpath>
         <xpath expr="//div[hasclass('before-footer')]" position="after">
             <t t-if="props.isBill and pos.config.set_tip_after_payment">
-                <div class="tip-form">
-                    <div class="title">For convenience, we are providing the following gratuity calculations:</div>
-                    <div class="percentage-options">
-                        <div class="option">
+                <div class="tip-form py-3">
+                    <div class="title text-center mt-3">For convenience, we are providing the following gratuity calculations:</div>
+                    <div class="percentage-options percentage-options d-flex flex-nowrap mt-3">
+                        <div class="option d-flex flex-column flex-nowrap align-items-center justify-content-center flex-grow-1">
                             <div>15%</div>
                             <div class="amount">
                                 <t t-esc="env.utils.formatCurrency(receipt.total_with_tax * 0.15)"></t>
                             </div>
                         </div>
-                        <div class="option">
+                        <div class="option d-flex flex-column flex-nowrap align-items-center justify-content-center flex-grow-1">
                             <div>20%</div>
                             <div class="amount">
                                 <t t-esc="env.utils.formatCurrency(receipt.total_with_tax * 0.20)"></t>
                             </div>
                         </div>
-                        <div class="option">
+                        <div class="option d-flex flex-column flex-nowrap align-items-center justify-content-center flex-grow-1">
                             <div>25%</div>
                             <div class="amount">
                                 <t t-esc="env.utils.formatCurrency(receipt.total_with_tax * 0.25)"></t>
diff --git a/addons/pos_restaurant/static/src/overrides/components/ticket_screen/ticket_screen.xml b/addons/pos_restaurant/static/src/overrides/components/ticket_screen/ticket_screen.xml
index 52125d568b8..23dc41dda7b 100644
--- a/addons/pos_restaurant/static/src/overrides/components/ticket_screen/ticket_screen.xml
+++ b/addons/pos_restaurant/static/src/overrides/components/ticket_screen/ticket_screen.xml
@@ -3,11 +3,11 @@
 
     <t t-name="pos_restaurant.TicketScreen" t-inherit="point_of_sale.TicketScreen" t-inherit-mode="extension" owl="1">
         <xpath expr="//div[hasclass('header-row')]//div[@name='delete']" position="before">
-            <div t-if="pos.config.module_pos_restaurant" class="col" name="table">Table</div>
+            <div t-if="pos.config.module_pos_restaurant" class="col p-2" name="table">Table</div>
             <div t-if="_state.ui.filter == 'TIPPING'" class="col end narrow" name="tip">Tip</div>
         </xpath>
         <xpath expr="//div[hasclass('order-row')]//div[@name='delete']" position="before">
-            <div t-if="pos.config.module_pos_restaurant" class="col" name="table">
+            <div t-if="pos.config.module_pos_restaurant" class="col p-2" name="table">
                 <t t-if="order.tableId">
                     <div t-if="ui.isSmall">Table</div>
                     <div><t t-esc="getTable(order)"></t></div>
@@ -19,7 +19,7 @@
             </div>
         </xpath>
         <xpath expr="//div[hasclass('buttons')]" position="inside">
-            <button class="settle-tips" t-if="_state.ui.filter == 'TIPPING'" t-on-click="settleTips">Settle</button>
+            <button class="settle-tips btn btn-lg btn-primary" t-if="_state.ui.filter == 'TIPPING'" t-on-click="settleTips">Settle</button>
         </xpath>
     </t>
 
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 cb056b475a5..52accd5c757 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(), 60000);
+            this.idleTimer = setTimeout(() => this.actionAfterIdle(), 1000000);
         }
     },
     async actionAfterIdle() {
diff --git a/addons/pos_restaurant/static/src/scss/restaurant.scss b/addons/pos_restaurant/static/src/scss/restaurant.scss
index 4c272b4d43b..f3a0548e96a 100644
--- a/addons/pos_restaurant/static/src/scss/restaurant.scss
+++ b/addons/pos_restaurant/static/src/scss/restaurant.scss
@@ -1,75 +1,3 @@
-/* ------ FLOOR BUTTON IN THE ORDER SELECTOR ------- */
-.pos .actionpad .pay-order-button {
-    border: none;
-    border-bottom: solid 1px #C9CCD2;
-}
-.pos .actionpad  .pay-order-button.highlight {
-    border-bottom-color: #C9CCD2;
-}
-.pos .actionpad .submit-order {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    height: calc(var(--btn-height-size) * 3);
-    border: none;
-    font-size: 14px;
-    font-weight: bold;
-    transition: all 150ms linear;
-    border-bottom: none;
-}
-@media screen and (max-width: 768px) {
-    .pos .actionpad .submit-order{
-        height: calc(var(--btn-height-size) * 2);
-    }
-}
-.pos .actionpad .submit-order.highlight {
-    background: $primary;
-    color: #fff;
-}
-.pos .actionpad .submit-order.highlight:hover, .pos .actionpad .pay-order-button.highlight:hover{
-    background: darken($primary, 5%);
-}
-.pos .submit-order .submit-circle {
-    display: block;
-    font-size: 20px;
-    line-height: var(--btn-height-size);
-    padding-top: 6px;
-    background: $gray-900;
-    color: white;
-    width: 60px;
-    text-align: center;
-    border-radius: 30px;
-    margin-bottom: 10px;
-}
-
-.pos .submit-order .submit-circle-smaller {
-    display: block;
-    font-size: 13px;
-    line-height: var(--btn-height-size);
-    background: $gray-900;
-    color: white;
-    width: 25px;
-    text-align: center;
-    border-radius: 50%;
-    margin-bottom: 10px;
-    height: 25px;
-    top: 4px;
-    position: relative;
-}
-.pos .submit-order .submit-circle .fa {
-    position: relative;
-    top: -1px;
-}
-.pos .submit-order .submit-circle-smaller .fa {
-    position: relative;
-    top: -14px;
-}
-.pos .submit-order .smaller-display{
-    gap: 10px; 
-    display: flex; 
-    align-items:center;
-}
 .break-line {
     box-sizing: border-box;
     overflow: hidden;
@@ -78,72 +6,6 @@
     -webkit-line-clamp: 2;
 }
 
-/* ------ SPLIT BILL SCREEN ------- */
-
-.splitbill-screen.screen .contents {
-    display: flex;
-    flex-flow: column nowrap;
-    margin: 0px auto;
-    max-width: 1024px;
-    border-left: dashed 1px rgb(215,215,215);
-    border-right: dashed 1px rgb(215,215,215);
-    height: 100%;
-}
-.splitbill-screen.screen .main {
-    display: flex;
-    flex-flow: row nowrap;
-    /* take the remaining vertical space */
-    flex: 1;
-    /* do not capture overflow in this element */
-    overflow: hidden;
-}
-.splitbill-screen.screen .main .lines {
-    display: flex;
-    flex: 1;
-    justify-content: center;
-    /* show scrollbar inside this element if its content overflows */
-    overflow-y: auto;
-}
-.splitbill-screen.screen .main .controls {
-    display: flex;
-    flex-flow: column nowrap;
-}
-.splitbill-screen.screen .pay-button {
-    margin: 16px;
-}
-.splitbill-screen.screen .pay-button .button {
-    background: $gray-200;
-    line-height: 74px;
-    font-size: 16px;
-    border: solid 1px rgb(202, 202, 202);
-    border-top-width: 0px;
-    cursor: pointer;
-    width: 100%;
-    text-align: center;
-}
-.splitbill-screen.screen .pay-button .button:first-child {
-    border-top-width: 1px;
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-}
-.splitbill-screen.screen .pay-button .button:last-child {
-    border-bottom-left-radius: 3px;
-    border-bottom-right-radius: 3px;
-}
-.splitbill-screen.screen .pay-button .button:active {
-    background: black;
-    border-color: black;
-    color: white;
-}
-
-.splitbill-screen.screen .main .lines {
-    border-right: dashed 1px rgb(215,215,215);
-}
-
-.splitbill-screen.screen .main .controls {
-    flex: 1;
-}
-
 /* ------ NARROWER SCREEN ------ */
 @media screen and (max-width: 768px) {
     .splitbill-screen.screen .main {
@@ -155,125 +17,6 @@
     }
 }
 
-.tip-screen .tip-options .total-amount {
-    text-align: center;
-    font-size: x-large;
-    margin-top: 1.5rem;
-    margin-bottom: 1.5rem;
-}
-
-.tip-screen .tip-amount-options {
-    background: white;
-    border-radius: 3px;
-    margin-left: 4rem;
-    margin-right: 4rem;
-}
-
-.tip-screen .percentage-amounts {
-    display: flex;
-}
-
-.tip-screen .tip-options .button {
-    background: #FAFAFA;
-    border: solid 1px rgb(209, 209, 209);
-    border-radius: 3px;
-    flex: 1;
-    margin: 1rem;
-    display: flex;
-    flex-flow: column nowrap;
-    justify-content: center;
-    cursor: pointer;
-}
-
-.tip-screen .tip-options .button .percentage {
-    text-align: center;
-    font-size: xx-large;
-    color: #2196F3;
-    padding-top: 4rem;
-    padding-bottom: 0.75rem;
-}
-
-.tip-screen .tip-options .button .amount {
-    text-align: center;
-    font-size: large;
-    color: #757575;
-    padding-bottom: 4rem;
-}
-
-.tip-screen .custom-amount-form {
-    display: flex;
-}
-
-.tip-screen .custom-amount-form .item {
-    font-size: x-large;
-    color: #2196F3;
-    margin: 1rem;
-    flex: 1
-}
-
-.tip-screen .custom-amount-form .label {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
-    text-align: center;
-}
-
-.tip-screen .custom-amount-form .input {
-    background: #FAFAFA;
-    border: solid 1px rgb(209, 209, 209);
-    border-radius: 3px;
-    margin: 1rem;
-    text-align: right;
-    overflow: hidden;
-    position: relative;
-}
-
-.tip-screen .custom-amount-form .input .currency {
-    position: absolute;
-    display: flex;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    width: 3rem;
-    justify-content: center;
-    align-items: center;
-}
-
-.tip-screen .custom-amount-form .input input {
-    border: none;
-    padding: 0;
-    outline: none;
-    font-size: x-large;
-    text-align: right;
-    margin-left: 1rem;
-    margin-right: 3rem;
-    height: 100%;
-    width: calc(100% - 4rem);
-    background: #FAFAFA;
-    color: #2196F3;
-}
-
-.tip-screen .custom-amount-form .input input:focus {
-    border: none;
-    padding: 0;
-    outline: none;
-}
-
-.tip-screen .custom-amount-form .add {
-    text-align: center;
-}
-
-.tip-screen .no-tip {
-    display: flex;
-    color: #2196F3;
-    font-size: x-large;
-}
-
-.tip-screen .no-tip .button {
-    text-align: center;
-    flex: 1;
-    padding: 1.5rem;
-}
-
 .tip-screen .pos-receipt-container {
     display: none;
     position: fixed;
@@ -291,53 +34,32 @@
     }
 }
 
-.pos-receipt .tip-form {
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
-}
-
-.pos-receipt .tip-form .title {
-    text-align: center;
-}
 
 .pos-receipt .tip-form > div {
     margin-top: 1rem;
 }
 
-.pos-receipt .tip-form .option {
-    display: flex;
-    flex-flow: column nowrap;
-    align-items: center;
-    flex: 1;
-    justify-content: center;
-}
-
-.pos-receipt .tip-form .percentage-options {
-    display: flex;
-    flex-flow: row nowrap;
-}
-
-.ticket-screen .tip-cell {
+.tip-cell {
     height: 100%;
     width: 100%;
     text-align: right;
     white-space: nowrap;
-}
 
-.ticket-screen .tip-cell input {
-    width: 100%;
-    text-align: right;
-    font-size: medium;
-    color: #555555;
-    padding-bottom: 5px;
-    border: none;
-    outline: none;
-}
+    input {
+        width: 100%;
+        text-align: right;
+        font-size: medium;
+        color: #555555;
+        padding-bottom: 5px;
+        border: none;
+        outline: none;
+    }
 
-.ticket-screen .tip-cell input:focus {
-    border: none;
-    outline: none;
-    border-bottom: solid 1px #555555;
+    input:focus {
+        border: none;
+        outline: none;
+        border-bottom: solid 1px #555555;
+    }
 }
 
 .multiprint-flex {
diff --git a/addons/pos_restaurant/static/src/xml/Screens/SplitBillScreen/SplitBillScreen.scss b/addons/pos_restaurant/static/src/xml/Screens/SplitBillScreen/SplitBillScreen.scss
new file mode 100644
index 00000000000..e271ad48910
--- /dev/null
+++ b/addons/pos_restaurant/static/src/xml/Screens/SplitBillScreen/SplitBillScreen.scss
@@ -0,0 +1,8 @@
+.splitbill-screen .order-info {
+    font-size: 64px;
+    text-shadow: 0px 2px white, 0px 2px 2px rgba(0, 0, 0, 0.27);
+}
+
+.splitbill-screen .order .orderline.partially.selected{
+    background: rgb(136, 214, 176);
+}
diff --git a/addons/pos_restaurant/static/tests/tours/helpers/BillScreenTourMethods.js b/addons/pos_restaurant/static/tests/tours/helpers/BillScreenTourMethods.js
index 2f2733c35cf..3f23ee143fe 100644
--- a/addons/pos_restaurant/static/tests/tours/helpers/BillScreenTourMethods.js
+++ b/addons/pos_restaurant/static/tests/tours/helpers/BillScreenTourMethods.js
@@ -18,7 +18,7 @@ class Check {
         return [
             {
                 content: "Bill screen is shown",
-                trigger: '.receipt-screen h1:contains("Bill Printing")',
+                trigger: '.receipt-screen h2:contains("Bill Printing")',
                 run: () => {},
             },
         ];
diff --git a/addons/pos_restaurant/static/tests/tours/helpers/FloorScreenTourMethods.js b/addons/pos_restaurant/static/tests/tours/helpers/FloorScreenTourMethods.js
index f1b932892cb..8f6548553a5 100644
--- a/addons/pos_restaurant/static/tests/tours/helpers/FloorScreenTourMethods.js
+++ b/addons/pos_restaurant/static/tests/tours/helpers/FloorScreenTourMethods.js
@@ -106,7 +106,7 @@ class Check {
         return [
             {
                 content: `selected floor is '${name}'`,
-                trigger: `.floor-selector .button-floor.active:contains("${name}")`,
+                trigger: `.floor-selector .button-floor.btn-primary:contains("${name}")`,
                 run: () => {},
             },
         ];
diff --git a/addons/pos_sale/static/src/app/order_management_screen/sale_order_list/sale_order_list.xml b/addons/pos_sale/static/src/app/order_management_screen/sale_order_list/sale_order_list.xml
index a600019f5a1..f5cbffec561 100644
--- a/addons/pos_sale/static/src/app/order_management_screen/sale_order_list/sale_order_list.xml
+++ b/addons/pos_sale/static/src/app/order_management_screen/sale_order_list/sale_order_list.xml
@@ -2,14 +2,14 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_sale.SaleOrderList" owl="1">
-        <div class="orders">
-            <div class="header-row" t-att-class="{ oe_hidden: ui.isSmall }">
-                <div class="col name">Order</div>
-                <div class="col date">Date</div>
-                <div class="col customer">Customer</div>
-                <div class="col salesman">Salesperson</div>
-                <div class="col end total">Total</div>
-                <div class="col state">State</div>
+        <div class="orders overflow-y-auto">
+            <div class="header-row d-flex text-bg-700 fw-bolder" t-att-class="{ oe_hidden: ui.isSmall }">
+                <div class="col name p-2">Order</div>
+                <div class="col date p-2">Date</div>
+                <div class="col customer p-2">Customer</div>
+                <div class="col salesman p-2">Salesperson</div>
+                <div class="col total p-2">Total</div>
+                <div class="col state p-2">State</div>
             </div>
             <div class="order-list">
                 <t t-foreach="props.orders" t-as="order" t-key="order.id">
diff --git a/addons/pos_sale/static/src/app/order_management_screen/sale_order_management_control_panel/sale_order_management_control_panel.xml b/addons/pos_sale/static/src/app/order_management_screen/sale_order_management_control_panel/sale_order_management_control_panel.xml
index 1bf1ba74f48..77fddec989d 100644
--- a/addons/pos_sale/static/src/app/order_management_screen/sale_order_management_control_panel/sale_order_management_control_panel.xml
+++ b/addons/pos_sale/static/src/app/order_management_screen/sale_order_management_control_panel/sale_order_management_control_panel.xml
@@ -2,28 +2,34 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_sale.SaleOrderManagementControlPanel" owl="1">
-        <div class="control-panel">
-            <div class="item button back" t-on-click="() => pos.closeScreen()">
-                <i class="fa fa-angle-double-left"></i>
-                <span t-if="!ui.isSmall"> Back</span>
+        <div class="control-panel d-flex justify-content-between align-items-center m-1 p-2 gap-2">
+            <div class="d-flex">
+                <button class="item button back btn btn-lg btn-secondary" t-on-click="() => pos.closeScreen()">
+                    <span class="search-icon d-flex align-items-center">
+                        <i class="fa fa-angle-double-left"/>
+                        <span t-if="!ui.isSmall" class="ms-2"> Back</span>
+                    </span>
+                </button>
             </div>
-            <div class="item search-box">
-                <span class="icon">
-                    <i class="fa fa-search" />
-                </span>
-                <input type="text" t-ref="autofocus" t-model="pos.orderManagement.searchString" t-on-keydown="onInputKeydown" placeholder="E.g. customer: Steward, date: 2020-05-09" />
-                <span class="clear" t-on-click="() => this.clearSearch()">
-                    <i class="fa fa-remove" />
-                </span>
+            <div class="item search-box d-flex flex-grow-1 ms-3">
+                <div class="input-group">
+                    <span class="icon input-group-text">
+                        <i class="oi oi-search" />
+                    </span>
+                    <input type="text" class="form-control form-control-lg" t-ref="autofocus" t-model="pos.orderManagement.searchString" t-on-keydown="onInputKeydown" placeholder="E.g. customer: Steward, date: 2020-05-09" />
+                    <button type="button" class="clear  btn btn-secondary" t-on-click="() => this.clearSearch()">
+                        <i class="oi oi-close" />
+                    </button>
+                </div> 
             </div>
-            <div t-if="showPageControls" class="item">
-                <div class="page-controls">
-                    <div class="previous" t-on-click="() => this.props.onPrevPage">
-                        <i class="fa fa-fw fa-caret-left" role="img" aria-label="Previous Order List" title="Previous Order List"></i>
-                    </div>
-                    <div class="next" t-on-click="() => this.props.onNextPage">
-                        <i class="fa fa-fw fa-caret-right" role="img" aria-label="Next Order List" title="Next Order List"></i>
-                    </div>
+            <div t-if="showPageControls" class="item item d-flex align-items-center ms-3 gap-2">
+                <div class="page-controls input-group">
+                    <button class="previous btn btn-lg btn-secondary" t-on-click="() => this.props.onPrevPage">
+                        <i class="oi oi-chevron-left" role="img" aria-label="Previous Order List" title="Previous Order List"></i>
+                    </button>
+                    <button class="next btn btn-lg btn-secondary" t-on-click="() => this.props.onNextPage">
+                        <i class="oi oi-chevron-right" role="img" aria-label="Next Order List" title="Next Order List"></i>
+                    </button>
                 </div>
                 <div class="page">
                     <span><t t-esc="pageNumber" /></span>
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 bda16c5fb00..98e1a937870 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,9 +2,9 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_sale.SaleOrderManagementScreen" owl="1">
-        <div class="order-management-screen screen" t-att-class="{ oe_hidden: !props.isShown }" t-ref="root">
+        <div class="order-management-screen screen overflow-auto" t-att-class="{ oe_hidden: !props.isShown }" t-ref="root">
                 <div class="rightpane">
-                    <div class="flex-container">
+                    <div class="flex-container flex-container d-flex flex-column h-100">
                         <SaleOrderManagementControlPanel
                             onSearch.bind="onSearch"
                             onPrevPage.bind="onPrevPage"
diff --git a/addons/pos_sale/static/src/app/order_management_screen/sale_order_row/sale_order_row.xml b/addons/pos_sale/static/src/app/order_management_screen/sale_order_row/sale_order_row.xml
index 61d75991e22..a994dd0bfc8 100644
--- a/addons/pos_sale/static/src/app/order_management_screen/sale_order_row/sale_order_row.xml
+++ b/addons/pos_sale/static/src/app/order_management_screen/sale_order_row/sale_order_row.xml
@@ -5,34 +5,34 @@
         <div class="order-row"
         t-att-class="{ highlight: highlighted }"
         t-on-click="() => this.props.onClickSaleOrder(props.order)">
-            <div class="col name">
+            <div class="col name p-2">
                 <div t-if="ui.isSmall">Order</div>
                 <div><t t-esc="name"/></div>
             </div>
-            <div class="col date">
+            <div class="col date p-2">
                 <div t-if="ui.isSmall">Date</div>
                 <div><t t-esc="date"/></div>
             </div>
-            <div class="col partner">
+            <div class="col partner p-2">
                 <div t-if="ui.isSmall">Customer</div>
                 <div><t t-esc="partner"/></div>
             </div>
-            <div class="col salesman">
+            <div class="col salesman p-2">
                 <div t-if="ui.isSmall">Salesman</div>
                 <div><t t-esc="salesman"/></div>
             </div>
-            <div class="col end total">
+            <div class="col end total p-2">
                 <div t-if="ui.isSmall">Total</div>
-                <div class="flex-container">
-                    <div class="self-end">
+                <div class="flex-container d-flex flex-column h-100">
+                    <div >
                         <t t-esc="total"/>
                     </div>
-                    <div t-if="showAmountUnpaid" class="self-end text-gray">
+                    <div t-if="showAmountUnpaid" class="text-muted">
                         (left: <t t-esc="amountUnpaidRepr"/>)
                     </div>
                 </div>
             </div>
-            <div class="col state">
+            <div class="col state p-2">
                 <div t-if="ui.isSmall">State</div>
                 <div><t t-esc="state"/></div>
             </div>
diff --git a/addons/pos_sale/static/src/app/set_sale_order_button/set_sale_order_button.xml b/addons/pos_sale/static/src/app/set_sale_order_button/set_sale_order_button.xml
index d4b9dd4aa02..4ffe048911b 100644
--- a/addons/pos_sale/static/src/app/set_sale_order_button/set_sale_order_button.xml
+++ b/addons/pos_sale/static/src/app/set_sale_order_button/set_sale_order_button.xml
@@ -2,8 +2,8 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_sale.SetSaleOrderButton" owl="1">
-        <div class="control-button o_sale_order_button" t-on-click="() => this.click()">
-            <i class="fa fa-link" role="img" aria-label="Set Sale Order"
+        <div class="control-button o_sale_order_button btn btn-light rounded-0 fw-bolder" t-on-click="() => this.click()">
+            <i class="fa fa-link me-1" role="img" aria-label="Set Sale Order"
                title="Set Sale Order" /> Quotation/Order
         </div>
     </t>
diff --git a/addons/pos_sale/static/src/css/pos_sale.css b/addons/pos_sale/static/src/css/pos_sale.css
index 66867b1197e..00c73605efe 100644
--- a/addons/pos_sale/static/src/css/pos_sale.css
+++ b/addons/pos_sale/static/src/css/pos_sale.css
@@ -4,91 +4,3 @@
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-
-.order-management-screen .flex-container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-.order-management-screen .control-panel {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    margin: 0.5rem;
-}
-
-.order-management-screen .control-panel .item {
-    font-size: medium;
-}
-
-.order-management-screen .control-panel .search-box {
-    flex: 1;
-    position: relative;
-    text-align: center;
-    margin: 0.2rem;
-}
-
-.order-management-screen .control-panel .search-box .clear {
-    position: relative;
-    right: 25px;
-    cursor: pointer;
-    color: #808080;
-    font-size: 13px;
-}
-
-.order-management-screen .control-panel .search-box .icon {
-    position: relative;
-    left: 25px;
-    color: #808080;
-    font-size: 13px;
-}
-
-.order-management-screen .control-panel .search-box input {
-    border: 1px solid #cecbcb;
-    padding: 10px 30px;
-    margin: auto;
-    background-color: white;
-    border-radius: 20px;
-    font-family: "Lato","Lucida Grande", Helvetica, Verdana, Arial;
-    font-size: 13px;
-}
-
-.order-management-screen .control-panel .search-box input:focus {
-    outline: none;
-    box-shadow: 0px 0px 0px 2px rgb(153, 153, 255) inset;
-    color: rgb(153, 153, 255);
-}
-
-.order-management-screen .control-panel .button {
-    line-height: 32px;
-    padding: 3px 13px;
-    font-size: 20px;
-    background: rgb(230, 230, 230);
-    border-radius: 3px;
-    border: solid 1px rgb(209, 209, 209);
-    cursor: pointer;
-    transition: all 150ms linear;
-}
-
-.order-management-screen .control-panel .button:hover {
-    background: #efefef;
-}
-
-.order-management-screen .back-to-list {
-    font-size: large;
-    padding: 10px;
-    background-color: #6EC89B;
-    color: white;
-}
-
-/* Utility classes */
-
-.order-management-screen .self-end {
-    align-self: flex-end;
-}
-
-.order-management-screen .text-gray {
-    color: #808080;
-}
diff --git a/addons/pos_sale_product_configurator/static/src/overrides/components/product_info_button/product_info_button.xml b/addons/pos_sale_product_configurator/static/src/overrides/components/product_info_button/product_info_button.xml
index 2557ebfe6ce..52f6dd5caf2 100644
--- a/addons/pos_sale_product_configurator/static/src/overrides/components/product_info_button/product_info_button.xml
+++ b/addons/pos_sale_product_configurator/static/src/overrides/components/product_info_button/product_info_button.xml
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
     <t t-name="pos_sale_product_configurator.ProductInfoButton" t-inherit="point_of_sale.ProductInfoButton" t-inherit-mode="extension" owl="1">
-        <xpath expr="//div[hasclass('control-button')]" position="attributes">
-            <attribute name="t-att-class">{ 'highlight': this.hasOptionalProduct() }</attribute>
+        <xpath expr="//button[hasclass('control-button')]" position="attributes">
+            <attribute name="t-att-class">{ 'highlight text-bg-primary': this.hasOptionalProduct() }</attribute>
         </xpath>
     </t>
 </templates>
diff --git a/addons/pos_sale_product_configurator/static/src/overrides/components/product_info_popup/product_info_popup.xml b/addons/pos_sale_product_configurator/static/src/overrides/components/product_info_popup/product_info_popup.xml
index 33813ab867f..474eca82811 100644
--- a/addons/pos_sale_product_configurator/static/src/overrides/components/product_info_popup/product_info_popup.xml
+++ b/addons/pos_sale_product_configurator/static/src/overrides/components/product_info_popup/product_info_popup.xml
@@ -3,21 +3,13 @@
     <t t-name="pos_sale_product_configurator.ProductInfoPopup" t-inherit="point_of_sale.ProductInfoPopup" t-inherit-mode="extension" owl="1">
         <xpath expr="//div[hasclass('extra')]" position="inside">
             <div class="section-optional-product" t-if="productInfo.optional_products.length > 0">
-                <div class="section-title">
-                    <span>Optional Products</span>
-                    <div class="section-title-line"/>
-                </div>
-                <div class="section-optional-product-body">
-                    <table>
-                        <t t-foreach="productInfo.optional_products" t-as="optional" t-key="optional.name">
-                            <tr>
-                                <td><span class="searchable" t-esc="optional.name" t-on-click="() => this.searchProduct(optional.name)"/></td>
-                                <td class="table-value">
-                                    from <t t-esc="env.utils.formatCurrency(optional.price)"/>
-                                </td>
-                            </tr>
-                        </t>
-                    </table>
+                <span class="section-title">Optional Products:</span>
+                <div class="section-optional-product-body" t-foreach="productInfo.optional_products" t-as="optional" t-key="optional.name">
+                    <span>
+                        <a class="text-primary text-decoration-underline" t-esc="optional.name" t-on-click="() => this.searchProduct(optional.name)"/>
+ from
+                        <t t-esc="env.utils.formatCurrency(optional.price)"/>
+                    </span>
                 </div>
             </div>
         </xpath>
diff --git a/addons/pos_six/static/src/app/balance_button/balance_button.xml b/addons/pos_six/static/src/app/balance_button/balance_button.xml
index 2129bb73b16..6015d41f981 100644
--- a/addons/pos_six/static/src/app/balance_button/balance_button.xml
+++ b/addons/pos_six/static/src/app/balance_button/balance_button.xml
@@ -2,10 +2,10 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_six.BalanceButton" owl="1">
-        <li class="menu-item navbar-button lock-button" t-on-click="sendBalance">
-            <span>
+        <li class="menu-item navbar-button lock-button">
+            <a class="dropdown-item py-2" t-on-click="sendBalance">
                 Send Balance
-            </span>
+            </a>
         </li>
     </t>