diff --git a/ui/components/Debugger.js b/ui/components/Debugger.js
index ffc68b9..48ed9d5 100644
--- a/ui/components/Debugger.js
+++ b/ui/components/Debugger.js
@@ -19,16 +19,15 @@ import CodeBlock from "~/components/CodeBlock";
 
 const prettyMediaSize = { sm: "SMALL", md: "MEDIUM", lg: "LARGE", xl: "X-LARGE" };
 
-export default () => {
+const Debugger = () => {
     const { isOpen: configOpen, onOpen: onConfigOpen, onClose: configClose } = useDisclosure();
     const { isOpen: themeOpen, onOpen: onThemeOpen, onClose: themeClose } = useDisclosure();
     const config = useConfig();
     const theme = useTheme();
-    const bg = { light: theme.colors.white, dark: theme.colors.black };
-    const color = { light: theme.colors.black, dark: theme.colors.white };
+    const bg = { light: "white", dark: "white" };
+    const color = { light: "black", dark: "white" };
     const { colorMode } = useColorMode();
     const { mediaSize } = useMedia();
-    const colorModeBadge = { light: "gray", dark: "black" };
     const borderColor = { light: "gray.100", dark: "gray.600" };
     return (
         <>
@@ -45,7 +44,7 @@ export default () => {
                 right={0}
                 justifyContent="center"
             >
-                <Tag variantColor={colorModeBadge[colorMode]}>{colorMode.toUpperCase()}</Tag>
+                <Tag variantColor="gray">{colorMode.toUpperCase()}</Tag>
                 <Tag variantColor="teal">{prettyMediaSize[mediaSize]}</Tag>
                 <Button size="sm" variantColor="cyan" onClick={onConfigOpen}>
                     View Config
@@ -77,3 +76,6 @@ export default () => {
         </>
     );
 };
+
+Debugger.displayName = "Debugger";
+export default Debugger;