diff --git a/Components/NavBar.js b/Components/NavBar.js
index 2444795..38c1275 100644
--- a/Components/NavBar.js
+++ b/Components/NavBar.js
@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import Styles from '../styles/navbar.module.css';
 import Cookies from 'js-cookie';
+import ThemeChangeButton from './ThemeChangeButton';
 // import { setInfo } from "../redux/actions/main"
 // import { connect } from "react-redux";
 // import { makeStore } from "../redux/store";
@@ -57,20 +58,6 @@
         }));
     }
 
-    updateCookie(that) {
-        // return () => {
-        //     if (that.props.theme == "light") {
-        //         that.props.setInfo('dark')
-        //     } else {
-        //         that.props.setInfo('light')
-        //     }
-        //     this.setState({
-        //         cookie: that.props.theme
-        //     })
-        //     // store.dispatch();
-        // }
-    }
-
 	render() {
 		return (
             <>
@@ -85,11 +72,7 @@
                         {/* <a href="https://clcks.dev"><img className={Styles.icon} src="/Icons/CL.svg"/></a> */}
                     </div>
                     <div className={Styles.group}>
-                        <a onClick={this.updateCookie(this)}><img
-                            alt="Theme"
-                            className={Styles.icon}
-                            src={"/light.svg"}
-                        /></a>
+                        <ThemeChangeButton/>
                     </div>
                 </div>
             </>
diff --git a/Components/ThemeChangeButton.js b/Components/ThemeChangeButton.js
new file mode 100644
index 0000000..50f1cc2
--- /dev/null
+++ b/Components/ThemeChangeButton.js
@@ -0,0 +1,22 @@
+/** @jsxImportSource theme-ui */
+import { useColorMode } from 'theme-ui';
+import Styles from '../styles/navbar.module.css'
+
+const ThemeChangeButton = () => {
+    const [colorMode, setColorMode] = useColorMode()
+    return (
+        <header>
+            <a onClick={(e) => {
+                    e.preventDefault();
+                    setColorMode(colorMode === 'light' ? 'dark' : 'light');
+                }}>
+            <img
+                alt="Theme"
+                className={Styles.icon}
+                src={`/${colorMode}.svg`}
+            /></a>
+        </header>
+    )
+}
+
+export default ThemeChangeButton;
\ No newline at end of file
diff --git a/pages/_app.js b/pages/_app.js
index 48674ca..23c45ff 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,22 +1,46 @@
 import '../styles/globals.css';
 import NavBar from '../Components/NavBar';
-// import { wrapper } from "../redux/store";
+import { ThemeProvider } from 'theme-ui';
 
-// function App({ Component, pageProps }) {
-//   return (
-//     <>
-//       <Component {...pageProps} />
-//       <NavBar />
-//     </>
-//   );
-// }
+const theme = {
+    config: {
+        useColorSchemeMediaQuery: true,
+        initialColorModeName: 'light',
+    },
+    colors: {
+        text: '#424242',
+        background: '#ffffff',
+        primary: '#6576CC',
+        cardText: '#ffffff',
+        cardBackground: 'rgba(255, 255, 255, 0.65)',
+        cardBorder: '#C4C4C4',
+        cardFilter: 'rgba(0, 0, 0, 0)',
+        cardOverlay: '#00000080',
+        hint: '#f1f1f1',
 
-// export default wrapper.withRedux(App);
+        modes: {
+            dark: {
+                text: '#ffffff',
+                background: '#252525',
+                primary: '#6576CC',
+                cardText: '#424242',
+                cardBackground: 'rgba(0, 0, 0, 0.65)',
+                cardBorder: '#424242',
+                cardFilter: 'brightness(0.7)',
+                cardOverlay: '#42424280',
+                hint: '#101010',
+            }
+        }
+    },
+};
+
 
 function App({ Component, pageProps }) {
   return <>
-    <Component {...pageProps} />
-    <NavBar />
+    <ThemeProvider theme={theme}>
+      <Component {...pageProps} />
+      <NavBar />
+    </ThemeProvider>
   </>
 }