diff --git a/app/layout.tsx b/app/layout.tsx
index e9a1547..378f840 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
new file mode 100644
index 0000000..80da4ee
--- /dev/null
+++ b/theme.ts
@@ -0,0 +1,7 @@
+"use client";
+
+import { createTheme } from "@mantine/core";
+
+export const theme = createTheme({
+  /* Put your mantine theme override here */
+});
