diff --git a/src/frontend/src/theme.ts b/src/frontend/src/theme.ts
new file mode 100644
index 0000000000..568c9810cf
--- /dev/null
+++ b/src/frontend/src/theme.ts
@@ -0,0 +1,5 @@
+import { createTheme } from '@mantine/core';
+import { themeToVars } from '@mantine/vanilla-extract';
+
+export const theme = createTheme({});
+export const vars = themeToVars(theme);
diff --git a/src/frontend/src/views/MainView.tsx b/src/frontend/src/views/MainView.tsx
index 33535757b5..3b84dec3f4 100644
--- a/src/frontend/src/views/MainView.tsx
+++ b/src/frontend/src/views/MainView.tsx
@@ -1,9 +1,12 @@
+import { MantineProvider } from '@mantine/core';
+import '@mantine/core/styles.css';
 import { useViewportSize } from '@mantine/hooks';
 import { lazy, useEffect } from 'react';
 
 import { setApiDefaults } from '../App';
 import { Loadable } from '../functions/loading';
 import { useLocalState } from '../states/LocalState';
+import { theme } from '../theme';
 
 function checkMobile() {
   const { height, width } = useViewportSize();
@@ -25,9 +28,17 @@ export default function MainView() {
 
   // Check if mobile
   if (!allowMobile && checkMobile()) {
-    return <MobileAppView />;
+    return (
+      <MantineProvider theme={theme}>
+        <MobileAppView />
+      </MantineProvider>
+    );
   }
 
   // Main App component
-  return <DesktopAppView />;
+  return (
+    <MantineProvider theme={theme}>
+      <DesktopAppView />
+    </MantineProvider>
+  );
 }