diff --git a/client/src/components/ThemeToggle.tsx b/client/src/components/ThemeToggle.tsx
index 8942f52..6982f14 100644
--- a/client/src/components/ThemeToggle.tsx
+++ b/client/src/components/ThemeToggle.tsx
@@ -7,11 +7,15 @@ export default function ThemeToggle() {
   const [darkTheme, setDarkTheme] = useState(false);
 
   useEffect(() => {
-    window
-      .matchMedia("(prefers-color-scheme: dark)")
-      .addEventListener("change", (e) => changeTheme(e.matches ? "dark" : "light"));
+    const onChange = (e: MediaQueryListEvent) => changeTheme(e.matches ? "dark" : "light");
+
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", onChange);
 
     changeTheme(window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+
+    return () => {
+      window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", onChange);
+    };
   }, []);
 
   function changeTheme(theme: "dark" | "light") {