diff --git a/src/App.js b/src/App.js
index 2e4b879..5930e33 100644
--- a/src/App.js
+++ b/src/App.js
@@ -100,6 +100,9 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 const gloBlue = "#0669de";
+const darkBlue = "#07366E";
+const darkNavy = "#020c18";
+const darkPaper = "#05182E";
 
 const initialState = { mode: "light" };
 
@@ -118,44 +121,33 @@ function reducer(state, action) {
 const App = () => {
   const classes = useStyles();
   const [state, dispatch] = useReducer(reducer, initialState, initializer);
+  const themeMode = state.mode;
+
+  const palette =
+    themeMode === "light"
+      ? {
+          primary: { main: gloBlue },
+          secondary: { main: gloBlue },
+          primary1Color: gloBlue,
+        }
+      : {
+          primary: { main: darkBlue },
+          secondary: { main: gloBlue },
+          background: { default: darkNavy, paper: darkPaper },
+          primary1Color: gloBlue,
+        };
+
+  const typography = {
+    useNextVariants: true,
+  };
 
   const theme = useMemo(
     () =>
       createMuiTheme({
-        palette: {
-          ...(state.mode === "light"
-            ? {
-                // light mode
-                primary: {
-                  main: gloBlue,
-                },
-                secondary: {
-                  main: gloBlue,
-                },
-                primary1Color: gloBlue,
-                type: state.mode,
-              }
-            : {
-                // dark mode
-                primary: {
-                  main: "#07366E",
-                },
-                secondary: {
-                  main: gloBlue,
-                },
-                background: {
-                  default: "#020c18",
-                  paper: "#05182E",
-                },
-                primary1Color: gloBlue,
-                type: state.mode,
-              }),
-        },
-        typography: {
-          useNextVariants: true,
-        },
+        palette: { ...palette, type: themeMode },
+        typography,
       }),
-    [state.mode]
+    [themeMode]
   );
 
   useEffect(() => {