chore: change the font to montserrat

src/index.css

@@ -1,7 +1,7 @@
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: "Montserrat", sans-serif !important; 
   line-height: 1.5;
-  font-weight: 400;
+  font-weight: 100 !important;
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);

src/main.jsx

@@ -1,16 +1,15 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 
-import '@fontsource/roboto/300.css';
-import '@fontsource/roboto/400.css';
-import '@fontsource/roboto/500.css';
-import '@fontsource/roboto/700.css';
-
+import { ThemeProvider } from '@mui/material/styles';
+import theme from './theme';
 import './index.css'
 import App from './App.jsx'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-    <App />
+    <ThemeProvider theme={theme}>
+      <App />
+    </ThemeProvider>
   </StrictMode>,
 )

src/theme.jsx

@@ -0,0 +1,15 @@
+// src/theme.js
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+  typography: {
+    fontFamily: 'Montserrat, sans-serif',
+  },
+  palette: {
+    text: {
+      primary: '#26201A',
+    },
+  },
+});
+
+export default theme;