diff --git a/ui/components/Debugger.js b/ui/components/Debugger.js
index 48ed9d5..3abcc98 100644
--- a/ui/components/Debugger.js
+++ b/ui/components/Debugger.js
@@ -24,7 +24,7 @@ const Debugger = () => {
     const { isOpen: themeOpen, onOpen: onThemeOpen, onClose: themeClose } = useDisclosure();
     const config = useConfig();
     const theme = useTheme();
-    const bg = { light: "white", dark: "white" };
+    const bg = { light: "white", dark: "black" };
     const color = { light: "black", dark: "white" };
     const { colorMode } = useColorMode();
     const { mediaSize } = useMedia();
@@ -38,11 +38,13 @@ const Debugger = () => {
                 mx={-4}
                 px={4}
                 isInline
-                position="fixed"
-                bottom="10%"
+                // position="fixed"
+                position="relative"
+                // bottom="10%"
                 left={0}
                 right={0}
                 justifyContent="center"
+                zIndex={1000}
             >
                 <Tag variantColor="gray">{colorMode.toUpperCase()}</Tag>
                 <Tag variantColor="teal">{prettyMediaSize[mediaSize]}</Tag>
diff --git a/ui/components/Layout.js b/ui/components/Layout.js
index 08726c7..93bc601 100644
--- a/ui/components/Layout.js
+++ b/ui/components/Layout.js
@@ -83,7 +83,6 @@ const Layout = () => {
                         )}
                     </AnimatePresence>
                 </Flex>
-                {config.general.debug && <Debugger />}
                 <Footer
                     general={config.general}
                     content={config.content}
@@ -92,6 +91,7 @@ const Layout = () => {
                     credit={config.branding.credit}
                     extLink={config.branding.external_link}
                 />
+                {config.general.debug && <Debugger />}
             </Flex>
         </>
     );