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 906623852f6..cdf9e7a3d85 100644
--- a/addons/point_of_sale/static/src/app/navbar/navbar.xml
+++ b/addons/point_of_sale/static/src/app/navbar/navbar.xml
@@ -3,6 +3,7 @@
 
     <t t-name="point_of_sale.Navbar" owl="1">
         <div class="pos-topheader">
+            <div t-if="pos.tempScreen" class="block-top-header" />
             <div class="pos-branding">
                 <img t-if="!env.isMobile" class="pos-logo" t-on-click="() => pos.toggleDebugWidget()" src="/point_of_sale/static/src/img/logo.png" alt="Logo" />
                 <CashMoveButton t-if="props.showCashMoveButton" />
diff --git a/addons/point_of_sale/static/src/app/pos_store.js b/addons/point_of_sale/static/src/app/pos_store.js
index b572ab73009..b961d23c138 100644
--- a/addons/point_of_sale/static/src/app/pos_store.js
+++ b/addons/point_of_sale/static/src/app/pos_store.js
@@ -21,6 +21,7 @@ export class PosStore {
         this.debugWidgetIsShown = !toRaw(this).debugWidgetIsShown;
     }, 100);
     mainScreen = { name: null, component: null };
+    tempScreen = null;
     constructor() {
         this.setup();
     }
diff --git a/addons/point_of_sale/static/src/js/Chrome.js b/addons/point_of_sale/static/src/js/Chrome.js
index 425ec4e3520..31cfe4abcff 100644
--- a/addons/point_of_sale/static/src/js/Chrome.js
+++ b/addons/point_of_sale/static/src/js/Chrome.js
@@ -25,7 +25,6 @@ import {
     onMounted,
     onWillDestroy,
     useExternalListener,
-    useState,
     useSubEnv,
     reactive,
     markRaw,
@@ -103,9 +102,6 @@ export class Chrome extends PosComponent {
         this.mainScreen = this.state.mainScreen;
         this.mainScreenProps = {};
 
-        this.tempScreen = useState({ isShown: false, name: null, component: null });
-        this.tempScreenProps = {};
-
         useSubEnv({
             pos: reactive(
                 this.env.pos,
@@ -317,14 +313,14 @@ export class Chrome extends PosComponent {
     }
     __showTempScreen(event) {
         const { name, props, resolve } = event.detail;
-        this.tempScreen.isShown = true;
-        this.tempScreen.name = name;
-        this.tempScreen.component = this.constructor.components[name];
-        this.tempScreenProps = Object.assign({}, props, { resolve });
+        this.state.tempScreen = {
+            name,
+            component: this.constructor.components[name],
+            props: { ...props, resolve },
+        };
     }
     __closeTempScreen() {
-        this.tempScreen.isShown = false;
-        this.tempScreen.name = null;
+        this.state.tempScreen = null;
     }
     __showScreen({ detail: { name, props = {} } }) {
         const component = this.constructor.components[name];
diff --git a/addons/point_of_sale/static/src/xml/Chrome.xml b/addons/point_of_sale/static/src/xml/Chrome.xml
index 2fc6a55d518..a12fa990fc0 100644
--- a/addons/point_of_sale/static/src/xml/Chrome.xml
+++ b/addons/point_of_sale/static/src/xml/Chrome.xml
@@ -4,7 +4,6 @@
     <t t-name="Chrome" owl="1">
         <div class="pos" t-att-class="{ 'big-scrollbars': state.hasBigScrollBars }">
             <div class="pos-receipt-print"></div>
-            <div t-if="tempScreen.isShown" class="block-top-header" />
             <t t-if="state.uiState === 'READY'">
                 <Navbar showCashMoveButton="showCashMoveButton"/>
                 <div class="pos-content">
@@ -12,10 +11,10 @@
                         <div class="subwindow">
                             <div class="subwindow-container">
                                 <div class="subwindow-container-fix screens">
-                                    <t isShown="!tempScreen.isShown" t-component="mainScreen.component"
+                                    <t isShown="!state.tempScreen" t-component="mainScreen.component"
                                        t-props="mainScreenProps" t-key="mainScreen.name" />
-                                    <t t-if="tempScreen.isShown" t-component="tempScreen.component"
-                                       t-props="tempScreenProps" t-key="tempScreen.name" />
+                                    <t t-if="state.tempScreen" t-component="state.tempScreen.component"
+                                       t-props="state.tempScreen.props" t-key="state.tempScreen.name" />
                                 </div>
                             </div>
                         </div>
diff --git a/addons/pos_hr_restaurant/static/src/js/Chrome.js b/addons/pos_hr_restaurant/static/src/js/Chrome.js
index d2eb1f7a59a..09f5e6b7cdd 100644
--- a/addons/pos_hr_restaurant/static/src/js/Chrome.js
+++ b/addons/pos_hr_restaurant/static/src/js/Chrome.js
@@ -7,7 +7,7 @@ import Registries from '@point_of_sale/js/Registries';
 export const PosHrRestaurantChrome = (Chrome) => class extends Chrome {
     //@override
     _shouldResetIdleTimer() {
-        return super._shouldResetIdleTimer() && this.tempScreen.name !== 'LoginScreen';
+        return super._shouldResetIdleTimer() && this.state.tempScreen?.name !== 'LoginScreen';
     }
 }
 
diff --git a/addons/pos_restaurant/static/src/js/Chrome.js b/addons/pos_restaurant/static/src/js/Chrome.js
index 46bbb8743b7..d8c436ad463 100644
--- a/addons/pos_restaurant/static/src/js/Chrome.js
+++ b/addons/pos_restaurant/static/src/js/Chrome.js
@@ -59,7 +59,7 @@ const PosResChrome = (Chrome) =>
                 this.env.posbus.trigger("close-popups-but-error", { resolve })
             );
             if (isPopupClosed) {
-                if (this.tempScreen.isShown) {
+                if (this.state.tempScreen) {
                     this.trigger("close-temp-screen");
                 }
                 const table = this.env.pos.table;