diff --git a/src/providers/index.tsx b/src/providers/index.tsx
index 8f68aa21e..01adb4c94 100644
--- a/src/providers/index.tsx
+++ b/src/providers/index.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 import { ChakraProvider, localStorageManager } from "@chakra-ui/react";
 
 import { SigningProvider } from "./signing-provider";
-import createTheme from "../theme";
+import buildTheme from "../theme";
 import useAppSettings from "../hooks/use-app-settings";
 import DeleteEventProvider from "./delete-event-provider";
 import { InvoiceModalProvider } from "./invoice-modal";
@@ -16,7 +16,7 @@ import MuteModalProvider from "./mute-modal-provider";
 export const GlobalProviders = ({ children }: { children: React.ReactNode }) => {
   const { theme: themeName, primaryColor, maxPageWidth } = useAppSettings();
   const theme = useMemo(
-    () => createTheme(themeName, primaryColor, maxPageWidth !== "none" ? maxPageWidth : undefined),
+    () => buildTheme(themeName, primaryColor, maxPageWidth !== "none" ? maxPageWidth : undefined),
     [themeName, primaryColor, maxPageWidth],
   );
 
diff --git a/src/theme/midnight/components/button.ts b/src/theme/default/components/button.ts
similarity index 100%
rename from src/theme/midnight/components/button.ts
rename to src/theme/default/components/button.ts
diff --git a/src/theme/midnight/components/card.ts b/src/theme/default/components/card.ts
similarity index 100%
rename from src/theme/midnight/components/card.ts
rename to src/theme/default/components/card.ts
diff --git a/src/theme/midnight/components/drawer.ts b/src/theme/default/components/drawer.ts
similarity index 100%
rename from src/theme/midnight/components/drawer.ts
rename to src/theme/default/components/drawer.ts
diff --git a/src/theme/midnight/components/modal.ts b/src/theme/default/components/modal.ts
similarity index 100%
rename from src/theme/midnight/components/modal.ts
rename to src/theme/default/components/modal.ts
diff --git a/src/theme/midnight/index.ts b/src/theme/default/index.ts
similarity index 93%
rename from src/theme/midnight/index.ts
rename to src/theme/default/index.ts
index 88c3705c3..9d870e410 100644
--- a/src/theme/midnight/index.ts
+++ b/src/theme/default/index.ts
@@ -7,7 +7,7 @@ import { buttonTheme } from "./components/button";
 import { drawerTheme } from "./components/drawer";
 import { modalTheme } from "./components/modal";
 
-const midnightTheme = extendTheme({
+const defaultTheme = extendTheme({
   colors: {
     gray: pallet(chroma.scale(["#d5d5d5", "#0e0e0e"]).colors(10)),
   },
@@ -27,4 +27,4 @@ const midnightTheme = extendTheme({
   },
 } as DeepPartial<Theme>);
 
-export default midnightTheme;
+export default defaultTheme;
diff --git a/src/theme/index.ts b/src/theme/index.ts
index eba503395..2bba8c9aa 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -2,7 +2,7 @@ import { extendTheme, Theme, DeepPartial } from "@chakra-ui/react";
 import { containerTheme } from "./container";
 import chroma from "chroma-js";
 
-import midnightTheme from "./midnight";
+import defaultTheme from "./default";
 
 function pallet(colors: string[]) {
   return [50, 100, 200, 300, 400, 500, 600, 700, 800, 900].reduce(
@@ -12,13 +12,13 @@ function pallet(colors: string[]) {
 }
 
 function getTheme(name: string) {
-  if (name === "midnight") return midnightTheme;
+  if (name === "default") return defaultTheme;
   return {};
 }
 
 const breakpoints = ["sm", "md", "lg", "xl", "2xl"] as const;
 
-export default function createTheme(
+export default function buildTheme(
   themeName: string,
   primaryColor: string = "#8DB600",
   maxBreakpoint?: (typeof breakpoints)[number],
diff --git a/src/views/settings/display-settings.tsx b/src/views/settings/display-settings.tsx
index 02792bf89..2f834ea60 100644
--- a/src/views/settings/display-settings.tsx
+++ b/src/views/settings/display-settings.tsx
@@ -39,7 +39,7 @@ export default function DisplaySettings() {
             </FormLabel>
             <Select id="theme" {...register("theme")}>
               <option value="default">Default</option>
-              <option value="midnight">Midnight</option>
+              <option value="chakraui">ChakraUI</option>
             </Select>
           </FormControl>
           <FormControl>