diff --git a/src/renderer/app.tsx b/src/renderer/app.tsx
index 30719b54..62865d07 100644
--- a/src/renderer/app.tsx
+++ b/src/renderer/app.tsx
@@ -2,7 +2,6 @@ import { useEffect, useMemo, useRef } from 'react';
 import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
 import { ModuleRegistry } from '@ag-grid-community/core';
 import { InfiniteRowModelModule } from '@ag-grid-community/infinite-row-model';
-import { MantineProvider } from '@mantine/core';
 import { ModalsProvider } from '@mantine/modals';
 import isElectron from 'is-electron';
 import { initSimpleImg } from 'react-simple-img';
@@ -39,7 +38,6 @@ const ipc = isElectron() ? window.electron.ipc : null;
 const remote = isElectron() ? window.electron.remote : null;
 
 export const App = () => {
-    const theme = useTheme();
     const accent = useSettingsStore((store) => store.general.accent);
     const language = useSettingsStore((store) => store.general.language);
     const { builtIn, custom, system, type } = useSettingsStore((state) => state.font);
@@ -188,60 +186,7 @@ export const App = () => {
     }, [language]);
 
     return (
-        <MantineProvider
-            withGlobalStyles
-            withNormalizeCSS
-            theme={{
-                colorScheme: theme as 'light' | 'dark',
-                components: {
-                    Modal: {
-                        styles: {
-                            body: { background: 'var(--modal-bg)', padding: '1rem !important' },
-                            close: { marginRight: '0.5rem' },
-                            content: { borderRadius: '5px' },
-                            header: {
-                                background: 'var(--modal-header-bg)',
-                                paddingBottom: '1rem',
-                            },
-                            title: { fontSize: 'medium', fontWeight: 500 },
-                        },
-                    },
-                },
-                defaultRadius: 'xs',
-                dir: 'ltr',
-                focusRing: 'auto',
-                focusRingStyles: {
-                    inputStyles: () => ({
-                        border: '1px solid var(--primary-color)',
-                    }),
-                    resetStyles: () => ({ outline: 'none' }),
-                    styles: () => ({
-                        outline: '1px solid var(--primary-color)',
-                        outlineOffset: '-1px',
-                    }),
-                },
-                fontFamily: 'var(--content-font-family)',
-                fontSizes: {
-                    lg: '1.1rem',
-                    md: '1rem',
-                    sm: '0.9rem',
-                    xl: '1.5rem',
-                    xs: '0.8rem',
-                },
-                headings: {
-                    fontFamily: 'var(--content-font-family)',
-                    fontWeight: 700,
-                },
-                other: {},
-                spacing: {
-                    lg: '2rem',
-                    md: '1rem',
-                    sm: '0.5rem',
-                    xl: '4rem',
-                    xs: '0rem',
-                },
-            }}
-        >
+        <>
             <ModalsProvider
                 modalProps={{
                     centered: true,
@@ -264,6 +209,6 @@ export const App = () => {
                 </PlayQueueHandlerContext.Provider>
             </ModalsProvider>
             <IsUpdatedDialog />
-        </MantineProvider>
+        </>
     );
 };
diff --git a/src/renderer/index.tsx b/src/renderer/index.tsx
index 0253dff4..d52d359b 100644
--- a/src/renderer/index.tsx
+++ b/src/renderer/index.tsx
@@ -1,3 +1,4 @@
+import { MantineProvider } from '@mantine/core';
 import { Notifications } from '@mantine/notifications';
 import {
     PersistedClient,
@@ -8,7 +9,6 @@ import { get, set, del } from 'idb-keyval';
 import { createRoot } from 'react-dom/client';
 import { App } from './app';
 import { queryClient } from './lib/react-query';
-
 import 'overlayscrollbars/overlayscrollbars.css';
 
 export function createIDBPersister(idbValidKey: IDBValidKey = 'reactQuery') {
@@ -59,10 +59,51 @@ root.render(
             persister: indexedDbPersister,
         }}
     >
-        <Notifications
-            containerWidth="300px"
-            position="bottom-center"
-        />
-        <App />
+        <MantineProvider
+            theme={{
+                components: {
+                    Modal: {
+                        styles: {
+                            body: { background: 'var(--modal-bg)', padding: '1rem !important' },
+                            close: { marginRight: '0.5rem' },
+                            content: { borderRadius: '5px' },
+                            header: {
+                                background: 'var(--modal-header-bg)',
+                                paddingBottom: '1rem',
+                            },
+                            title: { fontSize: 'medium', fontWeight: 500 },
+                        },
+                    },
+                },
+                defaultRadius: 'xs',
+                focusRing: 'auto',
+                fontFamily: 'var(--content-font-family)',
+                fontSizes: {
+                    lg: '1.1rem',
+                    md: '1rem',
+                    sm: '0.9rem',
+                    xl: '1.5rem',
+                    xs: '0.8rem',
+                },
+                headings: {
+                    fontFamily: 'var(--content-font-family)',
+                    fontWeight: '700',
+                },
+                other: {},
+                spacing: {
+                    lg: '2rem',
+                    md: '1rem',
+                    sm: '0.5rem',
+                    xl: '4rem',
+                    xs: '0rem',
+                },
+            }}
+        >
+            <Notifications
+                containerWidth="300px"
+                position="bottom-center"
+            />
+            <App />
+        </MantineProvider>
     </PersistQueryClientProvider>,
 );