diff --git a/web/pages/_document.tsx b/web/pages/_document.tsx
new file mode 100644
index 00000000..86de0544
--- /dev/null
+++ b/web/pages/_document.tsx
@@ -0,0 +1,71 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+        <title>Mantic Markets</title>
+
+        <meta
+          property="og:title"
+          name="twitter:title"
+          content="Mantic Markets"
+        />
+        <meta
+          name="description"
+          content="Decentralized user-created prediction markets on Solana"
+        />
+        <meta
+          property="og:description"
+          name="twitter:description"
+          content="Decentralized user-created prediction markets on Solana"
+        />
+        <meta property="og:url" content="https://mantic.markets" />
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:site" content="@manticmarkets" />
+        <meta
+          property="og:image"
+          name="twitter:image"
+          content="https://mantic.markets/logo-cover.png"
+        />
+
+        <link rel="icon" href="/favicon.ico" />
+
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link
+          rel="preconnect"
+          href="https://fonts.gstatic.com"
+          crossOrigin="true"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap"
+          rel="stylesheet"
+        />
+
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
+          rel="stylesheet"
+        />
+
+        <script
+          async
+          src="https://www.googletagmanager.com/gtag/js?id=G-SSFK1Q138D"
+        />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', 'G-SSFK1Q138D');
+          `,
+          }}
+        />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
diff --git a/web/pages/index.tsx b/web/pages/index.tsx
index b38b7ab5..2bde6f17 100644
--- a/web/pages/index.tsx
+++ b/web/pages/index.tsx
@@ -1,55 +1,11 @@
 import React from 'react'
 
 import type { NextPage } from 'next'
-import Head from 'next/head'
 
 import { Hero } from '../components/hero'
 
 const Home: NextPage = () => {
-  return (
-    <div>
-      <Head>
-        <title>Mantic Markets</title>
-
-        <meta property="og:title" name="twitter:title" content="Mantic Markets" />
-        <meta name="description" content="Decentralized user-created prediction markets on Solana" />
-        <meta property="og:description" name="twitter:description" content="Decentralized user-created prediction markets on Solana" />
-        <meta property="og:url" content="https://mantic.markets" />
-        <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:site" content="@manticmarkets" />
-        <meta property="og:image" name="twitter:image" content="https://mantic.markets/logo-cover.png" />
-
-        <link rel="icon" href="/favicon.ico" />
-
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link
-          rel="preconnect"
-          href="https://fonts.gstatic.com"
-          crossOrigin="true"
-        />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap"
-          rel="stylesheet"
-        />
-        <script
-          async
-          src="https://www.googletagmanager.com/gtag/js?id=G-SSFK1Q138D"
-        />
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `
-            window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
-            gtag('config', 'G-SSFK1Q138D');
-          `,
-          }}
-        />
-      </Head>
-
-      <Hero />
-    </div>
-  )
+  return <Hero />
 }
 
 export default Home
