diff --git a/site/src/components/Navigation/index.js b/site/src/components/Navigation/index.js
index fd9eb2ea..87352145 100644
--- a/site/src/components/Navigation/index.js
+++ b/site/src/components/Navigation/index.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useContext} from "react";
 import Search from '../../assets/images/Search.svg';
 import SearchDark from "../../assets/images/SearchDark.svg";
 import ThemeContext from "../Theme";
@@ -6,9 +6,9 @@ import Weather from '../../assets/images/Weather.svg';
 import WeatherDark from '../../assets/images/WeatherDark.svg';
 
 const Navbar = () => {
+    const theme = useContext(ThemeContext)
+
     return (
-        <ThemeContext.Consumer>
-            {theme => (
                 <>
     <div className=" w-[1440px] h-[100px] px-10 py-6 bg-background-default justify-between items-center inline-flex">
     <div className="h-12 justify-center items-center gap-4 flex">
@@ -37,8 +37,6 @@ const Navbar = () => {
 </div>
 <hr className="border-border-default border-solid"/>
 </>
-            )}
-        </ThemeContext.Consumer>
     )
 };
 
diff --git a/site/src/components/Theme/index.js b/site/src/components/Theme/index.js
index e59dc549..15e2d505 100644
--- a/site/src/components/Theme/index.js
+++ b/site/src/components/Theme/index.js
@@ -21,9 +21,9 @@ function ThemeProvider({ children }) {
 
   useEffect(() => {
     // Getting dark mode value from localStorage!
-    const lsDark = JSON.parse(localStorage.getItem("dark"));
-    if (lsDark) {
-      setDark(lsDark);
+    const isDark = JSON.parse(localStorage.getItem("dark"));
+    if (isDark) {
+      setDark(isDark);
     } else if (supportsDarkMode()) {
       setDark(true);
     }
diff --git a/site/src/pages/index.js b/site/src/pages/index.js
index 8d92b9dc..3e096f34 100644
--- a/site/src/pages/index.js
+++ b/site/src/pages/index.js
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React, {useContext} from "react";
 import {
   BrowserRouter as Router,
   Route,
@@ -18,6 +18,7 @@ import '../styles/global.css';
 import ThemeContext from "../components/Theme";
 
 const IndexPage = () => {
+  const theme = useContext(ThemeContext);
   const routes = (
     <Routes>
       <Route path="/" element={<Home />} exact />
@@ -33,8 +34,6 @@ const IndexPage = () => {
   );
 
   return (
-    <ThemeContext.Consumer>
-      {theme => (
         <div className={`${theme.dark? 'dark' : 'light'} bg-background-default`} >
         <Router>
           <Navbar />
@@ -45,8 +44,6 @@ const IndexPage = () => {
           <Footer />
         </Router>
         </div>
-      )}
-    </ThemeContext.Consumer>
   );
 }