diff --git a/surfsense_web/contexts/LocaleContext.tsx b/surfsense_web/contexts/LocaleContext.tsx
index 484721cbc..ec336ce8c 100644
--- a/surfsense_web/contexts/LocaleContext.tsx
+++ b/surfsense_web/contexts/LocaleContext.tsx
@@ -2,21 +2,27 @@
 
 import type React from "react";
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { set } from "zod";
 import enMessages from "../messages/en.json";
-import esMessages from "../messages/es.json";
-import hiMessages from "../messages/hi.json";
-import ptMessages from "../messages/pt.json";
-import zhMessages from "../messages/zh.json";
 
 type Locale = "en" | "es" | "pt" | "hi" | "zh";
 
-const messagesMap: Record<Locale, typeof enMessages> = {
-	en: enMessages,
-	es: esMessages as typeof enMessages,
-	pt: ptMessages as typeof enMessages,
-	hi: hiMessages as typeof enMessages,
-	zh: zhMessages as typeof enMessages,
+/**
+ * Dynamically load locale messages on demand.
+ * English is the default and always available synchronously.
+ */
+const loadMessages = async (locale: Locale): Promise<typeof enMessages> => {
+	switch (locale) {
+		case "es":
+			return (await import("../messages/es.json")).default;
+		case "hi":
+			return (await import("../messages/hi.json")).default;
+		case "pt":
+			return (await import("../messages/pt.json")).default;
+		case "zh":
+			return (await import("../messages/zh.json")).default;
+		default:
+			return enMessages;
+	}
 };
 
 interface LocaleContextType {
@@ -33,24 +39,30 @@ export function LocaleProvider({ children }: { children: React.ReactNode }) {
 	// Always start with 'en' to avoid hydration mismatch
 	// Then sync with localStorage after mount
 	const [locale, setLocaleState] = useState<Locale>("en");
+	const [messages, setMessages] = useState<typeof enMessages>(enMessages);
 	const [mounted, setMounted] = useState(false);
 
-	// Get messages based on current locale
-	const messages = messagesMap[locale] || enMessages;
-
 	// Load locale from localStorage after component mounts (client-side only)
 	useEffect(() => {
 		setMounted(true);
 		if (typeof window !== "undefined") {
 			const stored = localStorage.getItem(LOCALE_STORAGE_KEY);
 			if (stored && (["en", "es", "pt", "hi", "zh"] as const).includes(stored as Locale)) {
-				setLocaleState(stored as Locale);
+				const storedLocale = stored as Locale;
+				setLocaleState(storedLocale);
+				// Load messages for non-English locale
+				if (storedLocale !== "en") {
+					loadMessages(storedLocale).then(setMessages);
+				}
 			}
 		}
 	}, []);
 
 	// Update locale and persist to localStorage
-	const setLocale = useCallback((newLocale: Locale) => {
+	const setLocale = useCallback(async (newLocale: Locale) => {
+		// Load messages for the new locale
+		const newMessages = await loadMessages(newLocale);
+		setMessages(newMessages);
 		setLocaleState(newLocale);
 		if (typeof window !== "undefined") {
 			localStorage.setItem(LOCALE_STORAGE_KEY, newLocale);