diff --git a/packages/phoenix-event-display/src/managers/three-manager/ar-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/ar-manager.ts
index d0981f02a..81798621f 100644
--- a/packages/phoenix-event-display/src/managers/three-manager/ar-manager.ts
+++ b/packages/phoenix-event-display/src/managers/three-manager/ar-manager.ts
@@ -35,7 +35,7 @@ export class ARManager extends XRManager {
     this.sessionInit = () => {
       return ARManager.enableDomOverlay ? {
         optionalFeatures: ['dom-overlay'],
-        domOverlay: { root: document.body },
+        domOverlay: { root: document.getElementById('arOverlay') },
       } : {};
     }
   }
@@ -46,7 +46,6 @@ export class ARManager extends XRManager {
    * @override
    */
   protected async onXRSessionStarted(session: any) {
-    document.body.style.setProperty('background-color', 'transparent');
     this.previousValues.sceneScale = this.scene.scale.x;
     this.previousValues.cameraNear = this.camera.near;
     this.scaleScene(0.00001);
@@ -60,7 +59,6 @@ export class ARManager extends XRManager {
    * @override
    */
   protected onXRSessionEnded() {
-    document.body.style.removeProperty('background-color');
     this.scaleScene(this.previousValues.sceneScale);
     this.camera.near = this.previousValues.cameraNear;
     super.onXRSessionEnded();
diff --git a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/atlas/atlas.component.html b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/atlas/atlas.component.html
index f86aae387..880619d71 100644
--- a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/atlas/atlas.component.html
+++ b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/atlas/atlas.component.html
@@ -1,12 +1,14 @@
 <app-loader [loaded]="loaded" [progress]="loadingProgress"></app-loader>
 <app-nav></app-nav>
-<app-ui-menu
-  [eventDataImportOptions]="['JSON', 'JIVEXML', 'ZIP']"
-></app-ui-menu>
+<div id="arOverlay">
+  <app-ui-menu
+    [eventDataImportOptions]="['JSON', 'JIVEXML', 'ZIP']"
+  ></app-ui-menu>
+  <app-phoenix-menu [rootNode]="phoenixMenuRoot"></app-phoenix-menu>
+</div>
 <app-embed-menu></app-embed-menu>
 <app-experiment-info
   experiment="atlas"
   experimentTagline="ATLAS Experiment at CERN"
 ></app-experiment-info>
-<app-phoenix-menu [rootNode]="phoenixMenuRoot"></app-phoenix-menu>
 <div id="eventDisplay"></div>
diff --git a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/cms/cms.component.html b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/cms/cms.component.html
index f8351a872..01679191a 100644
--- a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/cms/cms.component.html
+++ b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/cms/cms.component.html
@@ -1,10 +1,12 @@
 <app-loader [loaded]="loaded" [progress]="loadingProgress"></app-loader>
 <app-nav></app-nav>
-<app-ui-menu [eventDataImportOptions]="['JSON', 'IG']"></app-ui-menu>
+<div id="arOverlay">
+  <app-ui-menu [eventDataImportOptions]="['JSON', 'IG']"></app-ui-menu>
+  <app-phoenix-menu [rootNode]="phoenixMenuRoot"></app-phoenix-menu>
+</div>
 <app-embed-menu></app-embed-menu>
 <app-experiment-info
   experiment="cms"
   experimentTagline="CMS Experiment at LHC, CERN"
 ></app-experiment-info>
-<app-phoenix-menu [rootNode]="phoenixMenuRoot"></app-phoenix-menu>
 <div id="eventDisplay"></div>
diff --git a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/lhcb/lhcb.component.html b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/lhcb/lhcb.component.html
index 7756c76ae..cbe264050 100644
--- a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/lhcb/lhcb.component.html
+++ b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/lhcb/lhcb.component.html
@@ -1,10 +1,12 @@
 <app-loader [loaded]="loaded" [progress]="loadingProgress"></app-loader>
 <app-nav></app-nav>
-<app-ui-menu [eventDataImportOptions]="['JSON', lhcbImporter]"></app-ui-menu>
+<div id="arOverlay">
+  <app-ui-menu [eventDataImportOptions]="['JSON', lhcbImporter]"></app-ui-menu>
+  <app-phoenix-menu [rootNode]="phoenixMenuRoot"></app-phoenix-menu>
+</div>
 <app-embed-menu></app-embed-menu>
 <app-experiment-info
   experiment="lhcb"
   experimentTagline="LHCb Experiment at CERN"
 ></app-experiment-info>
-<app-phoenix-menu [rootNode]="phoenixMenuRoot"></app-phoenix-menu>
 <div id="eventDisplay"></div>
diff --git a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/playground/playground.component.html b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/playground/playground.component.html
index 84dbba22f..60d8c0ffe 100644
--- a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/playground/playground.component.html
+++ b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/playground/playground.component.html
@@ -1,5 +1,7 @@
 <app-loader [loaded]="loaded" [progress]="loadingProgress"></app-loader>
 <app-nav></app-nav>
-<app-ui-menu></app-ui-menu>
+<div id="arOverlay">
+  <app-ui-menu></app-ui-menu>
+</div>
 <app-embed-menu></app-embed-menu>
 <div id="eventDisplay"></div>
diff --git a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/trackml/trackml.component.html b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/trackml/trackml.component.html
index 72f452f9f..0ff5b740a 100644
--- a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/trackml/trackml.component.html
+++ b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/trackml/trackml.component.html
@@ -1,6 +1,8 @@
 <app-loader [loaded]="loaded" [progress]="loadingProgress"></app-loader>
 <app-nav></app-nav>
-<app-ui-menu></app-ui-menu>
+<div id="arOverlay">
+  <app-ui-menu></app-ui-menu>
+  <app-phoenix-menu [rootNode]="phoenixMenuRoot"></app-phoenix-menu>
+</div>
 <app-embed-menu></app-embed-menu>
-<app-phoenix-menu [rootNode]="phoenixMenuRoot"></app-phoenix-menu>
 <div id="eventDisplay"></div>