diff --git a/app/layout.tsx b/app/layout.tsx
index a9a899b..dc491d3 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,7 @@
 import '@mantine/core/styles.css';
 import React from 'react';
 import { MantineProvider, ColorSchemeScript } from '@mantine/core';
+import { theme } from '../theme';
 
 export const metadata = {
   title: 'Mantine Next.js template',
@@ -13,9 +14,13 @@ export default function RootLayout({ children }: { children: any }) {
       <head>
         <ColorSchemeScript />
         <link rel="shortcut icon" href="/favicon.svg" />
+        <meta
+          name="viewport"
+          content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
+        />
       </head>
       <body>
-        <MantineProvider>{children}</MantineProvider>
+        <MantineProvider theme={theme}>{children}</MantineProvider>
       </body>
     </html>
   );
diff --git a/theme.ts b/theme.ts
index 223cced..7fdf832 100644
--- a/theme.ts
+++ b/theme.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { createTheme } from '@mantine/core';
 
 export const theme = createTheme({
