diff --git a/packages/bruno-app/src/providers/Theme/index.js b/packages/bruno-app/src/providers/Theme/index.js
index 1a639c46..724ef4fa 100644
--- a/packages/bruno-app/src/providers/Theme/index.js
+++ b/packages/bruno-app/src/providers/Theme/index.js
@@ -1,7 +1,7 @@
 import themes from 'themes/index';
 import useLocalStorage from 'hooks/useLocalStorage/index';
 
-import { createContext, useContext, useState } from 'react';
+import { createContext, useContext, useEffect, useState } from 'react';
 import { ThemeProvider as SCThemeProvider } from 'styled-components';
 
 export const ThemeContext = createContext();
@@ -10,10 +10,12 @@ export const ThemeProvider = (props) => {
   const [displayedTheme, setDisplayedTheme] = useState(isBrowserThemeLight ? 'light' : 'dark');
   const [storedTheme, setStoredTheme] = useLocalStorage('bruno.theme', 'system');
 
-  window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
-    if (storedTheme !== 'system') return;
-    setDisplayedTheme(e.matches ? 'light' : 'dark');
-  });
+  useEffect(() => {
+    window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
+      if (storedTheme !== 'system') return;
+      setDisplayedTheme(e.matches ? 'light' : 'dark');
+    });
+  }, []);
 
   const theme = storedTheme === 'system' ? themes[displayedTheme] : themes[storedTheme];
   const themeOptions = Object.keys(themes);