diff --git a/app/ThemeRegistry.tsx b/app/ThemeRegistry.tsx
new file mode 100644
index 00000000..873d699e
--- /dev/null
+++ b/app/ThemeRegistry.tsx
@@ -0,0 +1,17 @@
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
+import CssBaseline from '@mui/material/CssBaseline';
+import { ThemeProvider } from '@mui/material/styles';
+import theme from '../styles/theme';
+
+// This implementation is from mui integrations with nextjs app router
+// see https://mui.com/material-ui/integrations/nextjs/#app-router
+export default function ThemeRegistry({ children }: { children: React.ReactNode }) {
+ return (
+
+
+
+ {children}
+
+
+ );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 68b6d6c0..54beec6b 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,6 @@
import { Metadata } from 'next';
import GoogleTagManagerScript from '../components/head/GoogleTagManagerScript';
+import ThemeRegistry from './ThemeRegistry';
// Nextjs automatically includes for each route two default meta tags, charset and viewport
// https://nextjs.org/docs/app/building-your-application/optimizing/metadata#default-fields
@@ -22,7 +23,7 @@ export default function RootLayout({
but sending an event using sendGTMEvent requires an object rather than a list of arguments so the current gtag api function would need to be adapted
*/}
- {children}
+ {children}