diff --git a/components/Faucet.js b/components/Faucet.js
index 1c12dd841..fd148e7ec 100644
--- a/components/Faucet.js
+++ b/components/Faucet.js
@@ -15,7 +15,7 @@ import {
   removeQueryParams,
   addQueryParams
 } from '../utils'
-import { useTheme } from './Layout/ThemeContext'
+import { useTheme } from 'next-themes'
 import { useRouter } from 'next/router'
 
 import AddressInput from './UI/AddressInput'
diff --git a/components/Home/PriceChart.js b/components/Home/PriceChart.js
index c13173cfb..73efeafb8 100644
--- a/components/Home/PriceChart.js
+++ b/components/Home/PriceChart.js
@@ -4,7 +4,7 @@ import { useState, useEffect } from 'react'
 import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 
-import { useTheme } from '../Layout/ThemeContext'
+import { useTheme } from 'next-themes'
 import { nativeCurrency } from '../../utils'
 
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false })
diff --git a/components/Layout/Ads.js b/components/Layout/Ads.js
index a013cf636..a5ceace64 100644
--- a/components/Layout/Ads.js
+++ b/components/Layout/Ads.js
@@ -1,5 +1,5 @@
 import { useWidth, xahauNetwork } from '../../utils'
-import { useTheme } from '../Layout/ThemeContext'
+import { useTheme } from 'next-themes'
 import { useEffect, useState } from 'react'
 import { brandsBlock } from '../../styles/components/ads.module.scss'
 
diff --git a/components/Layout/Header/Switch.js b/components/Layout/Header/Switch.js
index 8c68c6024..3b0c500a6 100644
--- a/components/Layout/Header/Switch.js
+++ b/components/Layout/Header/Switch.js
@@ -1,19 +1,18 @@
 import { useState, useEffect } from 'react'
-import { useTheme } from '../ThemeContext'
+import { useTheme } from 'next-themes'
 import Image from 'next/image'
 
 export default function Switch() {
-  const [rendered, setRendered] = useState(false)
-  const { theme, toggleTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+  const { theme, setTheme } = useTheme()
 
-  useEffect(() => {
-    setRendered(true)
-  }, [])
+  // When mounted on client, now we can show the UI
+  useEffect(() => setMounted(true), [])
 
-  if (!rendered) return null
+  if (!mounted) return null
 
   const switchOnClick = () => {
-    toggleTheme()
+    setTheme(theme === 'dark' ? 'light' : 'dark')
   }
 
   return (
diff --git a/components/Layout/LogoSmall.js b/components/Layout/LogoSmall.js
index 7e6328493..7dd03d9d0 100644
--- a/components/Layout/LogoSmall.js
+++ b/components/Layout/LogoSmall.js
@@ -1,9 +1,15 @@
 import Logo from '../../public/images/logo-small.svg'
 import { server, xahauNetwork } from '../../utils'
-import { useTheme } from './ThemeContext'
+import { useTheme } from 'next-themes'
+import { useState, useEffect } from 'react'
 
 export default function LogoSmall({ width, height, color, dependOnTheme }) {
   const { theme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
 
   if (server.includes('bithomp')) {
     return (
@@ -44,7 +50,7 @@ export default function LogoSmall({ width, height, color, dependOnTheme }) {
   }
 
   let fill = color || xahauNetwork ? '#ffcc53' : '#4ba8b6'
-  if (dependOnTheme && theme === 'light' && xahauNetwork) {
+  if (dependOnTheme && mounted && theme === 'light' && xahauNetwork) {
     fill = '#0E233F'
   }
   return <Logo width={width} height={height} fill={fill} />
diff --git a/components/Layout/ThemeContext.js b/components/Layout/ThemeContext.js
deleted file mode 100644
index 88dbca018..000000000
--- a/components/Layout/ThemeContext.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useState, useEffect, useContext, createContext } from "react"
-
-const ThemeContext = createContext("light")
-
-export function ThemeProvider({ children }) {
-  const [theme, setTheme] = useState(global.window?.__theme || "light")
-  const toggleTheme = () => {
-    global.window.__setPreferredTheme(theme === "light" ? "dark" : "light")
-  }
-
-  useEffect(() => {
-    global.window.__onThemeChange = setTheme;
-  }, [])
-
-  return (
-    <ThemeContext.Provider value={{ theme, toggleTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  )
-}
-
-export const useTheme = () => useContext(ThemeContext)
\ No newline at end of file
diff --git a/components/Receipt.js b/components/Receipt.js
index f15face1c..be2b6eb23 100644
--- a/components/Receipt.js
+++ b/components/Receipt.js
@@ -1,9 +1,8 @@
 import { useTranslation } from 'next-i18next'
+import { useTheme } from 'next-themes'
 
 import { fullDateAndTime } from '../utils/format'
 
-import { useTheme } from './Layout/ThemeContext'
-
 import XahauExplorerLogo from '../public/images/xahauexplorer/longDark.svg'
 import XrplExplorerLogo from '../public/images/xrplexplorer/longDark.svg'
 
@@ -11,7 +10,7 @@ import { nativeCurrency, xahauNetwork } from '../utils'
 
 export default function Receipt({ item, details }) {
   const { t } = useTranslation()
-  const { theme } = useTheme()
+  const { theme, setTheme } = useTheme()
 
   if (!details) {
     return
@@ -19,9 +18,11 @@ export default function Receipt({ item, details }) {
 
   const onPrint = () => {
     if (theme === 'dark') {
-      global.window.__setPreferredTheme('light')
-      window.print()
-      global.window.__setPreferredTheme('dark')
+      setTheme('light')
+      setTimeout(() => {
+        window.print()
+        setTheme('dark')
+      }, 100)
     } else {
       window.print()
     }
diff --git a/components/SimpleChart.js b/components/SimpleChart.js
index 6ca7ff092..f0a35560e 100644
--- a/components/SimpleChart.js
+++ b/components/SimpleChart.js
@@ -1,7 +1,7 @@
 import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
+import { useTheme } from 'next-themes'
 
-import { useTheme } from './Layout/ThemeContext'
 import { niceNumber } from '../utils/format'
 
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false })
@@ -22,7 +22,7 @@ const locales = {
   }
 }
 
-export default function PriceChart({ data, combined, currency }) {
+export default function SimpleChart({ data, combined, currency }) {
   const { i18n } = useTranslation()
   const { theme } = useTheme()
 
diff --git a/package.json b/package.json
index fa77f5d83..e70016012 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "next-i18next": "^13.2.1",
     "next-qrcode": "^2.5.1",
     "next-seo": "^5.15.0",
+    "next-themes": "^0.4.6",
     "nprogress": "^0.2.0",
     "postcss": "^8.5.3",
     "react": "^18.3.1",
diff --git a/pages/_app.js b/pages/_app.js
index 60d06be16..cf98a5f68 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -24,7 +24,7 @@ import '../styles/globals.css'
 import '../styles/ui.scss'
 import '../styles/components/nprogress.css'
 
-import { ThemeProvider } from '../components/Layout/ThemeContext'
+import { ThemeProvider } from 'next-themes'
 import { fetchCurrentFiatRate } from '../utils/common'
 
 const Header = dynamic(() => import('../components/Layout/Header'), { ssr: true })
@@ -164,7 +164,7 @@ const MyApp = ({ Component, pageProps }) => {
         <meta charSet="utf-8" />
       </Head>
       <IsSsrMobileContext.Provider value={pageProps.isSsrMobile}>
-        <ThemeProvider>
+        <ThemeProvider attribute="class" storageKey="theme" enableSystem={false} defaultTheme="light">
           <div
             className="body"
             data-network={network}
diff --git a/pages/_document.js b/pages/_document.js
index 67c8772a7..d465b3e63 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -31,55 +31,7 @@ class MyDocument extends Document {
           <link rel="apple-touch-icon" href={this.props.logoPath + '/apple-touch-icon.png'} />
           <link rel="manifest" href="/manifest.json" />
         </Head>
-        <body className={this.props.cookieTheme} data-networkname={process.env.NEXT_PUBLIC_NETWORK_NAME}>
-          <script
-            dangerouslySetInnerHTML={{
-              __html: `(function () {
-                function getCookie(cname) {
-                  let name = cname + "=";
-                  let decodedCookie = decodeURIComponent(document.cookie);
-                  let ca = decodedCookie.split(';');
-                  for(let i = 0; i <ca.length; i++) {
-                    let c = ca[i];
-                    while (c.charAt(0) == ' ') {
-                      c = c.substring(1);
-                    }
-                    if (c.indexOf(name) == 0) {
-                      return c.substring(name.length, c.length);
-                    }
-                  }
-                  return "";
-                }
-                function setTheme(newTheme) {
-                  document.body.className = newTheme;
-                  window.__theme = newTheme;
-                  window.__onThemeChange(newTheme);
-                }
-                window.__onThemeChange = function () {};
-                window.__setPreferredTheme = function (newTheme) {
-                  setTheme(newTheme);
-                  try {
-                    let domain = window.location.hostname;
-                    document.cookie = "theme=" + JSON.stringify(window.__theme) + ";path=/;domain=" + encodeURI(domain) + ";max-age=31536000";
-                  } catch (err) {}
-                };
-                let preferredTheme;
-                try {
-                  preferredTheme = JSON.parse(getCookie("theme"));
-                } catch (err) {}
-                const darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
-                if (!preferredTheme) {
-                  darkQuery.addListener(function (event) {
-                    window.__setPreferredTheme(event.matches ? "dark" : "light");
-                  });
-                  preferredTheme = darkQuery.matches ? "dark" : "light";
-                  window.__setPreferredTheme(preferredTheme);
-                }
-                setTheme(preferredTheme);
-              })();
-            `
-            }}
-          />
+        <body data-networkname={process.env.NEXT_PUBLIC_NETWORK_NAME}>
           <Main />
           <NextScript />
         </body>
diff --git a/pages/admin/index.js b/pages/admin/index.js
index 90fa0f09b..62614e57e 100644
--- a/pages/admin/index.js
+++ b/pages/admin/index.js
@@ -1,17 +1,18 @@
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { useTranslation } from 'next-i18next'
-import { useEffect, useState } from 'react'
-import { Turnstile } from '@marsidev/react-turnstile'
-import { useTheme } from '../../components/Layout/ThemeContext'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { useState, useEffect } from 'react'
+import { useTheme } from 'next-themes'
 import Link from 'next/link'
 import Mailto from 'react-protected-mailto'
+import { Turnstile } from '@marsidev/react-turnstile'
 
 import SEO from '../../components/SEO'
+import AdminTabs from '../../components/Tabs/AdminTabs'
 import CheckBox from '../../components/UI/CheckBox'
 
-import { isEmailValid, turnstileSupportedLanguages, useWidth } from '../../utils'
 import { getIsSsrMobile } from '../../utils/mobile'
-import AdminTabs from '../../components/Tabs/AdminTabs'
+
+import { isEmailValid, turnstileSupportedLanguages, useWidth } from '../../utils'
 import { axiosAdmin } from '../../utils/axios'
 
 export const getServerSideProps = async (context) => {
diff --git a/pages/amendment/[amendmentName].js b/pages/amendment/[amendmentName].js
index c2c1b406d..fc367a906 100644
--- a/pages/amendment/[amendmentName].js
+++ b/pages/amendment/[amendmentName].js
@@ -9,7 +9,7 @@ import Image from 'next/image'
 import SEO from '../../components/SEO'
 import CopyButton from '../../components/UI/CopyButton'
 import ReactCountryFlag from 'react-country-flag'
-import { useTheme } from '../../components/Layout/ThemeContext'
+import { useTheme } from 'next-themes'
 import VerifiedIcon from '../../public/images/verified.svg'
 
 export async function getServerSideProps(context) {
diff --git a/pages/validators.js b/pages/validators.js
index da87466e3..2e053d71c 100644
--- a/pages/validators.js
+++ b/pages/validators.js
@@ -2,7 +2,7 @@ import { useTranslation, Trans } from 'next-i18next'
 import { useState, useEffect, memo } from 'react'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import ReactCountryFlag from 'react-country-flag'
-import { useTheme } from '../components/Layout/ThemeContext'
+import { useTheme } from 'next-themes'
 
 import SEO from '../components/SEO'
 import CheckBox from '../components/UI/CheckBox'
diff --git a/styles/variables.scss b/styles/variables.scss
index ef4dd8cb1..200c8ad0f 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -30,7 +30,7 @@ body {
   --card-bg: #fff;
   --card-text: #000;
   }
-  body.dark {
+.dark body {
   --background-header: #031B21;
   --background-block: #031B21;
   --background-main: #090909;
@@ -63,12 +63,13 @@ body {
   --card-text: #fff;
   }
   
-  body[data-networkname*="xahau"] {
+body[data-networkname*="xahau"] {
   --background-header: #0E233F;
   --background-block: #0E233F;
   --background-footer: #061322;
-  &.dark {
+}
+
+.dark body[data-networkname*="xahau"] {
   --background-header: #061322;
   --background-block: #061322;
-  }
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 8189ee7a7..aadecdb2a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6933,6 +6933,11 @@ next-seo@^5.15.0:
   resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-5.15.0.tgz#b1a90508599774982909ea44803323c6fb7b50f4"
   integrity sha512-LGbcY91yDKGMb7YI+28n3g+RuChUkt6pXNpa8FkfKkEmNiJkeRDEXTnnjVtwT9FmMhG6NH8qwHTelGrlYm9rgg==
 
+next-themes@^0.4.6:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.4.6.tgz#8d7e92d03b8fea6582892a50a928c9b23502e8b6"
+  integrity sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==
+
 next@14.2.29:
   version "14.2.29"
   resolved "https://registry.yarnpkg.com/next/-/next-14.2.29.tgz#f67610f8368ef863065b3b791e23b9198f0df615"