diff --git a/app/layout.tsx b/app/layout.tsx
index f7bd3fb..ad137e7 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,6 +2,8 @@ import type { Metadata } from "next";
 
 import "./styles/globals.css";
 import { GeistSans } from "geist/font/sans";
+import { ColorModeScript } from "@chakra-ui/react";
+import { theme } from "./styles/theme";
 import { Providers } from "./providers";
 import { GoogleAnalytics } from "@next/third-parties/google";
 import IconLink from "./components/IconLink";
@@ -29,14 +31,15 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <GoogleAnalytics gaId="G-X3SVRNR6WN" />
       <head>
         <IconLink />
       </head>
-      <body className={GeistSans.className}>
+      <body suppressHydrationWarning>
+        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
         <Providers>
-          <main>{children}</main>
+          <main className={GeistSans.className}>{children}</main>
         </Providers>
       </body>
     </html>
diff --git a/app/styles/globals.css b/app/styles/globals.css
index 45a27d6..88f72e7 100644
--- a/app/styles/globals.css
+++ b/app/styles/globals.css
@@ -45,7 +45,7 @@ html {
   --success-dark: 120 90% 45%;
 }
 
-:root[data-theme="dark"] {
+html[data-theme="dark"] {
   --background: var(--background-dark);
   --text: var(--text-dark);
   --border-color: var(--border-color-dark);
@@ -56,7 +56,7 @@ html {
   --success: var(--success-dark);
 }
 
-:root[data-theme="light"] {
+html[data-theme="light"] {
   --background: var(--background-light);
   --text: var(--text-light);
   --border-color: var(--border-color-light);
