diff --git a/pages/_app.tsx b/pages/_app.tsx
index 237e383..b9e3f36 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,8 +1,10 @@
 import { AppProps } from 'next/app';
 import { UserProvider } from '@auth0/nextjs-auth0';
+import CssBaseline from '@mui/material/CssBaseline';
+import { ThemeProvider } from '@mui/material/styles';
 
 import { ApolloProvider } from '../src/shared/apollo/ApolloProvider';
-import '../styles/globals.css';
+import { theme } from '../src/shared/css/theme';
 
 /**
  * 
@@ -13,11 +15,16 @@ import '../styles/globals.css';
  */
 function App({ Component, pageProps }: AppProps):JSX.Element {
   return (
-    <UserProvider>
-      <ApolloProvider>
-        <Component {...pageProps} />
-      </ApolloProvider>
-    </UserProvider>
+    <>
+      <CssBaseline />
+      <UserProvider>
+        <ApolloProvider>
+          <ThemeProvider theme={theme}>
+            <Component {...pageProps} />
+          </ThemeProvider>
+        </ApolloProvider>
+      </UserProvider>
+    </>
   );
 }
 
diff --git a/src/shared/css/theme.ts b/src/shared/css/theme.ts
new file mode 100644
index 0000000..5998143
--- /dev/null
+++ b/src/shared/css/theme.ts
@@ -0,0 +1,17 @@
+import { createTheme } from '@mui/material/styles';
+
+declare module '@mui/material/styles/createMixins' {
+  interface Mixins {
+    drawer: {
+      maxWidth: number;
+    };
+  }
+}
+
+export const theme = createTheme({
+  mixins: {
+    drawer: {
+      maxWidth: 240,
+    },
+  },
+});