diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index c62e992..bf3e1c4 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -33,7 +33,7 @@ export const Header = ({
 }: Props) => {
   const { mode, toggleMode } = useContext<UserConfig>(ThemeContext);
   return (
-    <AppBar position="static" sx={{ padding: "0.5rem" }}>
+    <AppBar position="static" sx={{ padding: "0.5rem" }} color="default">
       <Toolbar variant="dense">
         <Box
           sx={{
diff --git a/src/context/ThemeProvider.tsx b/src/context/ThemeProvider.tsx
index 8a2b6cc..cf7f0ef 100644
--- a/src/context/ThemeProvider.tsx
+++ b/src/context/ThemeProvider.tsx
@@ -36,13 +36,19 @@ export const ThemeProvider = ({ children }: Props) => {
             ? {
                 primary: amber,
                 text: {
-                  primary: "#fff",
+                  primary: "#D4D4D4",
+                },
+                background: {
+                  default: "#1E1E1E",
                 },
               }
             : {
                 primary: amber,
                 text: {
-                  primary: "#000",
+                  primary: "#000000",
+                },
+                background: {
+                  default: "#FFFFFF",
                 },
               }),
         },