diff --git a/viewer/App.jsx b/viewer/App.jsx
index 7dd76e98..0158da2b 100644
--- a/viewer/App.jsx
+++ b/viewer/App.jsx
@@ -22,7 +22,7 @@ import WarningPage from './gui/WarningPage.jsx';
 import ViewPage from './gui/ViewPage.jsx';
 import AddonConfigPage from './gui/AddOnConfigPage.jsx';
 import ImporterPage from "./gui/ImporterPage";
-import OverlayDialog, {GlobalDialogDisplay} from './components/OverlayDialog.jsx';
+import OverlayDialog, {DialogContext, GlobalDialogDisplay, useDialog} from './components/OverlayDialog.jsx';
 import globalStore from './util/globalstore.jsx';
 import Requests from './util/requests.js';
 import SoundHandler from './components/SoundHandler.jsx';
@@ -162,6 +162,30 @@ const ButtonSizer=(props)=>{
 let lastError={
 };
 
+const MainBody = ({location, options, history, nightMode}) => {
+    const [DialogDisplay, setDialog] = useDialog();
+    return (
+        <DialogContext
+            showDialog={setDialog}
+        >
+            <DialogDisplay/>
+            <DynamicRouter
+                storeKeys={{
+                    sequence: keys.gui.global.propertySequence,
+                    dimensions: keys.gui.global.windowDimensions,
+                    dim: keys.gui.global.dimActive,
+                    isEditing: keys.gui.global.layoutEditing,
+                    ...keys.gui.capabilities
+                }}
+                location={location}
+                options={options}
+                history={history}
+                nightMode={nightMode}
+            />
+        </DialogContext>
+    )
+};
+
 class App extends React.Component {
     appRef=createRef();
     constructor(props) {
@@ -476,6 +500,7 @@ class App extends React.Component {
         let layoutClass=(this.props.layoutName||"").replace(/[^0-9a-zA-Z]/g,'_');
         appClass+=" "+layoutClass;
         if (this.props.smallDisplay) appClass+=" smallDisplay";
+        if (this.props.nightMode) appClass+=" nightMode";
         let location=this.leftHistoryState.getValue('location');
         if (location !== "warningpage") {
             if (! this.titleSet) {
@@ -492,20 +517,14 @@ class App extends React.Component {
             style={{fontSize: this.props.fontSize+"px"}}
             tabIndex="0"
             >
-            <DynamicRouter
-                storeKeys={{
-                sequence: keys.gui.global.propertySequence,
-                dimensions: keys.gui.global.windowDimensions,
-                dim: keys.gui.global.dimActive,
-                isEditing:keys.gui.global.layoutEditing,
-                ...keys.gui.capabilities}}
+            <MainBody
                 location={location}
                 options={this.leftHistoryState.getValue('options')}
                 history={this.history}
                 nightMode={this.props.nightMode}
                 />
             <GlobalDialogDisplay
-                className={this.props.nightMode?"nightMode":""}/>
+                />
             { ! (avnav.android || globalStore.getData(keys.gui.global.preventAlarms)) && globalStore.getData(keys.properties.localAlarmSound) ?<DynamicSound
                 storeKeys={alarmStoreKeys}
                 updateFunction={computeAlarmSound}
diff --git a/viewer/components/OverlayDialog.jsx b/viewer/components/OverlayDialog.jsx
index 3b1f1920..9c674f92 100644
--- a/viewer/components/OverlayDialog.jsx
+++ b/viewer/components/OverlayDialog.jsx
@@ -117,7 +117,7 @@ const DialogContextImpl=createContext({
     zIndex: DIALOG_Z
 });
 export const useDialogContext=()=>useContext(DialogContextImpl);
-const DialogContext=({closeDialog,showDialog,zIndex,children})=>{
+export const DialogContext=({closeDialog,showDialog,zIndex,children})=>{
     return <DialogContextImpl.Provider value={{
         closeDialog:closeDialog?closeDialog:()=>{},
         showDialog: showDialog?showDialog:()=>{},