diff --git a/src/index.js b/src/index.js
index 42df9d84..488c9698 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,23 +1,44 @@
 import React from 'react';
-import { CssVarsProvider } from '@mui/joy/styles';
 import { createRoot } from 'react-dom/client';
 import { App } from './app';
 import { LayersProvider, SettingsProvider } from '@context';
+import { CssVarsProvider as JoyCssVarsProvider } from '@mui/joy/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+
+import {
+    experimental_extendTheme as materialExtendTheme,
+    Experimental_CssVarsProvider as MaterialCssVarsProvider,
+    THEME_ID as MATERIAL_THEME_ID
+} from '@mui/material/styles';
+
 import './index.css';
 import '@fontsource/inter';
 import theme from './theme';
 
+// get a reference to the root element used as a rendering target
 const container = document.getElementById('root');
+
+// create the root container
 const root = createRoot(container);
 
-const ProvisionedApp = () => (
-  <CssVarsProvider theme={ theme } defaultMode="system">
-    <SettingsProvider>
-      <LayersProvider>
-        <App />
-      </LayersProvider>
-    </SettingsProvider>
-  </CssVarsProvider>
-);
+// create a new material theme. this is so it can be differentiated from the joy theme
+const materialTheme = materialExtendTheme();
+
+// render the app specifying the material and joy providers
+const ProvisionedApp = () => {
+    return (
+        <MaterialCssVarsProvider theme={{ [MATERIAL_THEME_ID]: materialTheme }}>
+            <JoyCssVarsProvider theme={ theme }>
+                <CssBaseline enableColorScheme />
+                <SettingsProvider>
+                    <LayersProvider>
+                        <App />
+                    </LayersProvider>
+                </SettingsProvider>
+            </JoyCssVarsProvider>
+        </MaterialCssVarsProvider>
+    );
+};
 
-root.render(<ProvisionedApp />);
+// render the app
+root.render(<ProvisionedApp />);
\ No newline at end of file