diff --git a/frontend/src/features/system/components/ThemeChanger.tsx b/frontend/src/features/system/components/ThemeChanger.tsx
index f2b1255391..33f52b2d97 100644
--- a/frontend/src/features/system/components/ThemeChanger.tsx
+++ b/frontend/src/features/system/components/ThemeChanger.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { useColorMode, VStack } from '@chakra-ui/react';
 import { RootState } from 'app/store';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
@@ -10,14 +11,21 @@ import IAIButton from 'common/components/IAIButton';
 const THEMES = ['dark', 'light', 'green'];
 
 export default function ThemeChanger() {
-  const { setColorMode } = useColorMode();
+  const { setColorMode, colorMode } = useColorMode();
   const dispatch = useAppDispatch();
   const currentTheme = useAppSelector(
     (state: RootState) => state.options.currentTheme
   );
 
+  useEffect(() => {
+    // syncs the redux store theme to the chakra's theme on startup and when
+    // setCurrentTheme is dispatched
+    if (colorMode !== currentTheme) {
+      setColorMode(currentTheme);
+    }
+  }, [colorMode, currentTheme]);
+
   const handleChangeTheme = (theme: string) => {
-    setColorMode(theme);
     dispatch(setCurrentTheme(theme));
   };