diff --git a/src/App.tsx b/src/App.tsx
index cad1230..a68c011 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,15 +1,15 @@
-import { MantineProvider, Text, Button, Stack } from "@mantine/core";
-import { theme } from "./theme";
+import { Text, Button, Stack } from "@mantine/core";
+import { ThemeProvider } from "./ThemeProvider";
 
 export default function App() {
   return (
-    <MantineProvider theme={theme} withGlobalStyles withNormalizeCSS>
+    <ThemeProvider>
       <Stack align="center" mt={50}>
         <Text size="xl" weight={500}>
           Welcome to Mantine!
         </Text>
         <Button>Click the button</Button>
       </Stack>
-    </MantineProvider>
+    </ThemeProvider>
   );
 }
diff --git a/src/ThemeProvider.tsx b/src/ThemeProvider.tsx
new file mode 100644
index 0000000..271f864
--- /dev/null
+++ b/src/ThemeProvider.tsx
@@ -0,0 +1,17 @@
+import { MantineProvider, MantineThemeOverride } from "@mantine/core";
+
+export const theme: MantineThemeOverride = {
+  colorScheme: "dark",
+};
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+}
+
+export function ThemeProvider({ children }: ThemeProviderProps) {
+  return (
+    <MantineProvider withGlobalStyles withNormalizeCSS theme={theme}>
+      {children}
+    </MantineProvider>
+  );
+}
diff --git a/src/theme.ts b/src/theme.ts
deleted file mode 100644
index 8534f85..0000000
--- a/src/theme.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { MantineThemeOverride } from "@mantine/core";
-
-export const theme: MantineThemeOverride = {
-  colorScheme: "dark",
-};