diff --git a/addons/point_of_sale/static/src/app/navbar/navbar.js b/addons/point_of_sale/static/src/app/navbar/navbar.js
index 9823320664b..23ee574e7d9 100644
--- a/addons/point_of_sale/static/src/app/navbar/navbar.js
+++ b/addons/point_of_sale/static/src/app/navbar/navbar.js
@@ -9,7 +9,6 @@ import { HeaderButton } from "@point_of_sale/js/ChromeWidgets/HeaderButton";
 import { ProxyStatus } from "@point_of_sale/js/ChromeWidgets/ProxyStatus";
 import { SaleDetailsButton } from "@point_of_sale/js/ChromeWidgets/SaleDetailsButton";
 import { SyncNotification } from "@point_of_sale/js/ChromeWidgets/SyncNotification";
-import { BackendButton } from "@point_of_sale/js/ChromeWidgets/BackendButton";
 import { CashMovePopup } from "./cash_move_popup/cash_move_popup";
 import { TicketScreen } from "@point_of_sale/js/Screens/TicketScreen/TicketScreen";
 import { Component, useState, useExternalListener } from "@odoo/owl";
@@ -24,7 +23,6 @@ export class Navbar extends Component {
         ProxyStatus,
         SaleDetailsButton,
         SyncNotification,
-        BackendButton,
     };
     static props = {
         showCashMoveButton: Boolean,
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 4ca2504a4e3..3fb3f62b6d4 100644
--- a/addons/point_of_sale/static/src/app/navbar/navbar.xml
+++ b/addons/point_of_sale/static/src/app/navbar/navbar.xml
@@ -32,11 +32,13 @@
                                     <span>Cash In/Out</span>
                                 </li>
                                 <CustomerFacingDisplayButton t-if="CustomerFacingDisplayButtonIsShown"/>
-                                <div class="end-nav-button">
-                                    <BackendButton/>
-                                    <div class="close-button">
-                                        <HeaderButton/>
-                                    </div>
+                                <li class="menu-item navbar-button backend-button" t-on-click="() => pos.closePos()">
+                                    <span>
+                                        Backend
+                                    </span>
+                                </li>
+                                <div class="close-button">
+                                    <HeaderButton/>
                                 </div>
                                 <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/js/ChromeWidgets/BackendButton.js b/addons/point_of_sale/static/src/js/ChromeWidgets/BackendButton.js
deleted file mode 100644
index 75f9cebdd59..00000000000
--- a/addons/point_of_sale/static/src/js/ChromeWidgets/BackendButton.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/** @odoo-module */
-
-import { useService } from "@web/core/utils/hooks";
-import { Component } from "@odoo/owl";
-
-export class BackendButton extends Component {
-    static template = "BackendButton";
-
-    setup() {
-        super.setup(...arguments);
-        this.pos = useService("pos");
-    }
-
-    async onClick() {
-        this.pos.closePos();
-    }
-}
diff --git a/addons/point_of_sale/static/src/xml/ChromeWidgets/BackendButton.xml b/addons/point_of_sale/static/src/xml/ChromeWidgets/BackendButton.xml
deleted file mode 100644
index f3192e3e2b5..00000000000
--- a/addons/point_of_sale/static/src/xml/ChromeWidgets/BackendButton.xml
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<templates id="template" xml:space="preserve">
-
-    <t t-name="BackendButton" owl="1">
-        <li class="menu-item navbar-button" t-on-click="onClick">
-            <span>
-                Backend
-            </span>
-        </li>
-    </t>
-
-</templates>
diff --git a/addons/pos_hr/static/src/app/navbar.xml b/addons/pos_hr/static/src/app/navbar.xml
index f792a4c1c1b..313d8e4dbdb 100644
--- a/addons/pos_hr/static/src/app/navbar.xml
+++ b/addons/pos_hr/static/src/app/navbar.xml
@@ -2,15 +2,20 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_hr.Navbar" t-inherit="point_of_sale.Navbar" t-inherit-mode="extension" owl="1">
-        <xpath expr="//div[hasclass('end-nav-button')]" position="replace">
-            <div class="end-nav-button">
-                <BackendButton t-if="!pos.globalState.config.module_pos_hr"/>
-                <BackendButton t-elif="(pos.globalState.get_cashier().role === 'manager' || pos.globalState.get_cashier_user_id() === pos.globalState.user.id)"/>
-                <HeaderLockButton t-if="pos.globalState.config.module_pos_hr" />
-                <div class="close-button" t-if="!pos.globalState.config.module_pos_hr || pos.globalState.get_cashier().role === 'manager' || pos.globalState.get_cashier_user_id() === pos.globalState.user.id">
-                    <HeaderButton/>
-                </div>
-            </div>
+        <xpath expr="//li[hasclass('backend-button')]" position="attributes">
+            <attribute name="t-if">
+                !pos.globalState.config.module_pos_hr or pos.globalState.get_cashier().role === 'manager' or pos.globalState.get_cashier_user_id() === pos.globalState.user.id
+            </attribute>
+        </xpath>
+
+        <xpath expr="//div[hasclass('close-button')]" position="attributes">
+            <attribute name="t-if">
+                !pos.globalState.config.module_pos_hr or pos.globalState.get_cashier().role === 'manager' or pos.globalState.get_cashier_user_id() === pos.globalState.user.id
+            </attribute>
+        </xpath>
+
+        <xpath expr="//li[hasclass('backend-button')]" position="after">
+            <HeaderLockButton t-if="pos.globalState.config.module_pos_hr" />
         </xpath>
     </t>
 
diff --git a/addons/pos_restaurant/static/src/app/navbar/navbar.xml b/addons/pos_restaurant/static/src/app/navbar/navbar.xml
index d404f152b6c..e61e4a61a68 100644
--- a/addons/pos_restaurant/static/src/app/navbar/navbar.xml
+++ b/addons/pos_restaurant/static/src/app/navbar/navbar.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_restaurant.Navbar" t-inherit="point_of_sale.Navbar" t-inherit-mode="extension">
-        <xpath expr="//div[hasclass('end-nav-button')]" position="before">
+        <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>
             </li>
diff --git a/addons/pos_six/static/app/navbar.xml b/addons/pos_six/static/app/navbar.xml
index 5154f5682c3..9f5bebb5ff1 100644
--- a/addons/pos_six/static/app/navbar.xml
+++ b/addons/pos_six/static/app/navbar.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_six.Navbar" t-inherit="point_of_sale.Navbar" t-inherit-mode="extension" owl="1">
-        <xpath expr="//div[hasclass('end-nav-button')]" position="before">
+        <xpath expr="//li[hasclass('backend-button')]" position="before">
             <BalanceButton t-if="pos.globalState.payment_methods.some((pm) => pm.use_payment_terminal === 'six')" />
         </xpath>
     </t>