diff --git a/Components/ThemeChangeButton.js b/Components/ThemeChangeButton.js
index 50f1cc2..b4c80c8 100644
--- a/Components/ThemeChangeButton.js
+++ b/Components/ThemeChangeButton.js
@@ -1,20 +1,29 @@
 /** @jsxImportSource theme-ui */
 import { useColorMode } from 'theme-ui';
-import Styles from '../styles/navbar.module.css'
+import Styles from '../styles/navbar.module.css';
+import Light from '../public/light.svg';
+import Dark from '../public/dark.svg';
+import { useState, useEffect } from 'react';
+
 
 const ThemeChangeButton = () => {
     const [colorMode, setColorMode] = useColorMode()
+    const [render, setRender] = useState(false);
+
+    useEffect(() => {
+        setRender(true);
+    });
+
     return (
         <header>
-            <a onClick={(e) => {
-                    e.preventDefault();
-                    setColorMode(colorMode === 'light' ? 'dark' : 'light');
-                }}>
-            <img
-                alt="Theme"
-                className={Styles.icon}
-                src={`/${colorMode}.svg`}
-            /></a>
+            <a className={Styles.icon + " " + Styles.ThemeChangeButton} onClick={(e) => {
+                e.preventDefault();
+                setColorMode(colorMode === 'light' ? 'dark' : 'light');
+            }}>
+            {
+                !render ? null : (colorMode == 'light' ? <Light /> : <Dark />)
+            }
+            </a>
         </header>
     )
 }