diff --git a/src/components/Button.js b/src/components/Button.js
index f235ce5..414762d 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -9,6 +9,7 @@ import { Link } from "gatsby";
 import AnchorLink from 'react-anchor-link-smooth-scroll-v2'
 import rippleFn from "../libs/ripple";
 import classNames from "classnames";
+import { getPathName } from "../libs/utils";
 
 const ButtonInner = ({ icon, text, className }) => (
     <div role="button" tabIndex={0} className={classNames("button relative overflow-hidden", className)} onMouseDown={rippleFn} onTouchStart={rippleFn}>
@@ -17,15 +18,9 @@ const ButtonInner = ({ icon, text, className }) => (
     </div>
 );
 
-const GetPathName = () => {
-    if (typeof window !== "undefined")
-        return window.location.pathname;
-    return "";
-}
-
 const Button = ({ href="", icon, text, onClick, className }) =>  {
-    if (href.startsWith(GetPathName() + "#"))
-        href = href.substring(GetPathName().length);
+    if (href.startsWith(getPathName() + "#"))
+        href = href.substring(getPathName().length);
     
     return href.startsWith("http") ? (
         <a href={href} onClick={onClick} rel="noreferrer" target="_blank" tabIndex={-1}>
diff --git a/src/components/CustomLink.js b/src/components/CustomLink.js
index 1e419d3..44e3231 100644
--- a/src/components/CustomLink.js
+++ b/src/components/CustomLink.js
@@ -9,16 +9,11 @@ import { Link } from "gatsby";
 import AnchorLink from 'react-anchor-link-smooth-scroll-v2'
 import rippleFn from "../libs/ripple";
 import classnames from "classnames";
-
-const GetPathName = () => {
-    if (typeof window !== "undefined")
-        return window.location.pathname;
-    return "";
-}
+import { getPathName } from "../libs/utils";
 
 const CustomLink = ({ style, href, children, className, ripple }) =>  {
-    if (href.startsWith(GetPathName() + "#"))
-        href = href.substring(GetPathName().length);
+    if (href.startsWith(getPathName() + "#"))
+        href = href.substring(getPathName().length);
     
     return href.startsWith("http") ? (
         <a
diff --git a/src/components/Layout.js b/src/components/Layout.js
index 71260cd..edd5d53 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -11,7 +11,6 @@ import Footer from "../components/Footer";
 import { Helmet } from "react-helmet";
 import Button from "./Button";
 import Cookies from "js-cookie";
-import useDarkModeState from "../libs/useDarkModeState";
 
 const addAnalyticsScripts = () => {
     console.log('Analytics Enabled');
@@ -64,15 +63,14 @@ const handleDeclineCookie = () => {
     cookiesDeclined = true;
 };
 
-const Layout = ({ children, title }) => {
-    const isDark = useDarkModeState();
+const Layout = ({ children, title}) => {
 
     const hasConsent = getCookieConsent();
     if (hasConsent)
         initializeCookies();
 
     return (
-        <main className={isDark ? "dark" : "light"}>
+        <main> 
             <Helmet htmlAttributes={{ lang: "en" }}>
                 <title>{title}</title>
             </Helmet>
diff --git a/src/libs/configureDarkMode.js b/src/libs/configureDarkMode.js
new file mode 100644
index 0000000..9dc0839
--- /dev/null
+++ b/src/libs/configureDarkMode.js
@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright © 2022 Skyline Team and Contributors (https://github.com/skyline-emu/)
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+
+import { isBrowser } from "./utils";
+import { colorSchemeMedia } from "./utils";
+
+const configureDarkMode = () => {
+
+    if (isBrowser()) {
+        if (window.matchMedia(colorSchemeMedia).matches) {
+            document.documentElement.classList.add('dark')
+        } else {
+            document.documentElement.classList.add('light')
+        }
+    }
+
+};
+
+export default configureDarkMode;
diff --git a/src/libs/useDarkModeState.js b/src/libs/useDarkModeState.js
deleted file mode 100644
index 2d510bb..0000000
--- a/src/libs/useDarkModeState.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * @license
- * Copyright © 2022 Skyline Team and Contributors (https://github.com/skyline-emu/)
- * SPDX-License-Identifier: BSD-3-Clause
- */
-
-import { useEffect, useState } from "react";
-
-const colorSchemeMedia = "(prefers-color-scheme: dark)";
-
-const useDarkModeState = () => {
-    const [isDark, setIsDark] = useState(false);
-
-    const getSystemTheme = () => {
-        const query = window.matchMedia(colorSchemeMedia);
-        if (query.matches) setIsDark(true);
-        else setIsDark(false);
-    };
-
-    useEffect(() => {
-        getSystemTheme();
-
-        const media = window.matchMedia(colorSchemeMedia);
-        media.addEventListener("change", getSystemTheme);
-        return () => media.removeEventListener("change", getSystemTheme);
-    }, []);
-
-    return isDark;
-};
-
-export default useDarkModeState;
diff --git a/src/libs/utils.js b/src/libs/utils.js
new file mode 100644
index 0000000..1da5485
--- /dev/null
+++ b/src/libs/utils.js
@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright © 2022 Skyline Team and Contributors (https://github.com/skyline-emu/)
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+export const colorSchemeMedia = "(prefers-color-scheme: dark)";
+export const isBrowser = () => typeof window !== "undefined"
+export const getPathName = () => {
+
+    if (isBrowser()) {
+        return window.location.pathname; 
+    } else {
+        return "";
+    }
+    
+}
diff --git a/src/pages/404.js b/src/pages/404.js
index 8ee1a92..10224c2 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -8,9 +8,13 @@ import * as React from "react";
 import Layout from "../components/Layout";
 import Button from "../components/Button";
 import { FaHome } from "react-icons/fa";
+import configureDarkMode from "../libs/configureDarkMode";
 
 // markup
 const NotFoundPage = () => {
+
+    configureDarkMode();
+
     return (
         <Layout title="404 - Not Found">
             <div className="w-full min-h-screen dark:text-white flex flex-col items-center justify-center">
diff --git a/src/pages/download.js b/src/pages/download.js
index 4cab4ec..555fe26 100644
--- a/src/pages/download.js
+++ b/src/pages/download.js
@@ -12,8 +12,13 @@ import useSWR from "swr";
 import config from "../config";
 import { Helmet } from "react-helmet";
 import Spinner from "../components/Spinner";
+import configureDarkMode from "../libs/configureDarkMode";
+
 
 const IndexPage = () => {
+
+    configureDarkMode();
+
     const { data } = useSWR(config.builds_api_url, (url) => axios.get(url).then((r) => r.data));
 
     return (
diff --git a/src/pages/index.js b/src/pages/index.js
index 97dcb86..be05e89 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -9,8 +9,12 @@ import Landing from "../sections/Landing";
 import About from "../sections/About";
 import Team from "../sections/Team";
 import Layout from "../components/Layout";
+import configureDarkMode from "../libs/configureDarkMode";
 
 const IndexPage = () => {
+
+    configureDarkMode();
+   
     return (
         <Layout title="Skyline - Nintendo Switch Emulator">
             <Landing />
diff --git a/src/pages/privacy-policy.js b/src/pages/privacy-policy.js
index dcf54ca..86ce0f2 100644
--- a/src/pages/privacy-policy.js
+++ b/src/pages/privacy-policy.js
@@ -7,8 +7,12 @@
 import * as React from "react";
 import Layout from "../components/Layout";
 import CustomLink from "../components/CustomLink";
+import configureDarkMode from "../libs/configureDarkMode";
 
 const PrivacyPolicyPage = () => {
+
+    configureDarkMode();
+
     return (
         <Layout title="Privacy Policy">
             <div className="mx-16 text-gray-800 dark:text-white">
diff --git a/tailwind.config.js b/tailwind.config.js
index f47644f..84af0cc 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,7 +6,7 @@
 
 module.exports = {
     content: ["./src/**/*.{js,jsx,ts,tsx}"],
-    darkMode: "class",
+    darkMode: ['class'],
     i18n: {
         locales: ["en-US"],
         defaultLocale: "en-US",