diff --git a/web/src/App.tsx b/web/src/App.tsx
index 83a3b0304..a0062549f 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -6,13 +6,12 @@ import Sidebar from "@/components/navigation/Sidebar";
 import { isDesktop, isMobile } from "react-device-detect";
 import Statusbar from "./components/Statusbar";
 import Bottombar from "./components/navigation/Bottombar";
-import React, { Suspense, lazy } from "react";
+import { Suspense, lazy } from "react";
 import { Redirect } from "./components/navigation/Redirect";
 import { cn } from "./lib/utils";
 import { isPWA } from "./utils/isPWA";
 import ProtectedRoute from "@/components/auth/ProtectedRoute";
 import { AuthProvider } from "@/context/auth-context";
-import { useTranslation } from "react-i18next";
 
 const Live = lazy(() => import("@/pages/Live"));
 const Events = lazy(() => import("@/pages/Events"));
@@ -27,13 +26,6 @@ const Logs = lazy(() => import("@/pages/Logs"));
 const AccessDenied = lazy(() => import("@/pages/AccessDenied"));
 
 function App() {
-  const { i18n } = useTranslation();
-
-  // Set the lang attribute on the html element when language changes
-  React.useEffect(() => {
-    document.documentElement.lang = i18n.language;
-  }, [i18n.language]);
-
   return (
     <Providers>
       <AuthProvider>
diff --git a/web/src/context/language-provider.tsx b/web/src/context/language-provider.tsx
index e0c965494..4d935da97 100644
--- a/web/src/context/language-provider.tsx
+++ b/web/src/context/language-provider.tsx
@@ -45,6 +45,9 @@ export function LanguageProvider({
   }, []);
 
   useEffect(() => {
+    // set document lang for smart capitalization
+    document.documentElement.lang = language;
+
     if (language === systemLanguage) return;
     i18next.changeLanguage(language);
   }, [language, systemLanguage]);