diff --git a/web/src/components/LocaleSelect.tsx b/web/src/components/LocaleSelect.tsx
index a5aa48c8e..55b52b214 100644
--- a/web/src/components/LocaleSelect.tsx
+++ b/web/src/components/LocaleSelect.tsx
@@ -2,7 +2,7 @@ import { GlobeIcon } from "lucide-react";
 import { FC } from "react";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { locales } from "@/i18n";
-import { getLocaleDisplayName } from "@/utils/i18n";
+import { getLocaleDisplayName, loadLocale } from "@/utils/i18n";
 
 interface Props {
   value: Locale;
@@ -13,6 +13,9 @@ const LocaleSelect: FC<Props> = (props: Props) => {
   const { onChange, value } = props;
 
   const handleSelectChange = async (locale: Locale) => {
+    // Apply locale globally immediately
+    loadLocale(locale);
+    // Also notify parent component
     onChange(locale);
   };
 
diff --git a/web/src/components/ThemeSelect.tsx b/web/src/components/ThemeSelect.tsx
index af045b6a7..7b9b4bbf1 100644
--- a/web/src/components/ThemeSelect.tsx
+++ b/web/src/components/ThemeSelect.tsx
@@ -1,6 +1,6 @@
 import { Monitor, Moon, MoonStar, Palette, Sun, Wallpaper } from "lucide-react";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { THEME_OPTIONS } from "@/utils/theme";
+import { loadTheme, THEME_OPTIONS } from "@/utils/theme";
 
 interface ThemeSelectProps {
   value?: string;
@@ -21,6 +21,9 @@ const ThemeSelect = ({ value, onValueChange, className }: ThemeSelectProps = {})
   const currentTheme = value || "system";
 
   const handleThemeChange = (newTheme: string) => {
+    // Apply theme globally immediately
+    loadTheme(newTheme);
+    // Also notify parent component if callback is provided
     if (onValueChange) {
       onValueChange(newTheme);
     }