diff --git a/frontend/src/themes/default.js b/frontend/src/themes/default.ts
similarity index 65%
rename from frontend/src/themes/default.js
rename to frontend/src/themes/default.ts
index 2190734..866ad28 100644
--- a/frontend/src/themes/default.js
+++ b/frontend/src/themes/default.ts
@@ -1,17 +1,19 @@
+import { ThemeOptions } from "@mui/material/styles";
+
 const primary = "#00695C";
 const secondary = "#DC7633";
 const warning = "#ff9800";
 const success = "#4caf50";
 const info = "#2196f3";
 
-const defaultTheme = {
+export const theme: ThemeOptions = {
   palette: {
+    mode: "light",
     primary: {
       main: primary
     },
     secondary: {
       main: secondary
-      // contrastText: "#ffcc00"
     },
     warning: {
       main: warning
@@ -22,14 +24,7 @@ const defaultTheme = {
     info: {
       main: info
     }
-  },
-  overrides: {
-    MuiBackdrop: {
-      root: {
-        backgroundColor: "#4A4A4A1A"
-      }
-    }
   }
 };
 
-export default defaultTheme;
+export default theme;
diff --git a/frontend/src/themes/index.js b/frontend/src/themes/index.ts
similarity index 58%
rename from frontend/src/themes/index.js
rename to frontend/src/themes/index.ts
index 4b45ee1..d3c6815 100644
--- a/frontend/src/themes/index.js
+++ b/frontend/src/themes/index.ts
@@ -1,5 +1,9 @@
 import defaultTheme from "./default";
-import { createTheme } from "@mui/material/styles";
+import { createTheme, Theme } from "@mui/material/styles";
+
+type Themes = {
+  default: Theme;
+};
 
 const overrides = {
   typography: {
@@ -24,15 +28,16 @@ const overrides = {
   }
 };
 
-const getThemes = darkMode => {
+const getThemes = (darkMode: boolean): Themes => {
   const type = darkMode ? "dark" : "light";
+  const dTheme = createTheme({
+    ...defaultTheme,
+    ...overrides,
+    palette: { ...defaultTheme.palette, mode: type }
+  });
 
   return {
-    default: createTheme({
-      ...defaultTheme,
-      ...overrides,
-      palette: { ...defaultTheme.palette, type }
-    })
+    default: dTheme
   };
 };