diff --git a/frontend/app/components/HtmlLang.tsx b/frontend/app/components/HtmlLang.tsx
new file mode 100644
index 0000000..1b63f2e
--- /dev/null
+++ b/frontend/app/components/HtmlLang.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { useEffect } from "react";
+import { useLanguage } from "../hooks/useLanguage";
+
+/**
+ * Client component that updates the HTML lang attribute based on the selected language.
+ * This must be a client component because it uses hooks and DOM manipulation.
+ */
+export function HtmlLang() {
+ const { locale } = useLanguage();
+
+ useEffect(() => {
+ // Update the HTML lang attribute when locale changes
+ document.documentElement.lang = locale;
+ }, [locale]);
+
+ return null;
+}
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 53cbf7e..b692a25 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -1,5 +1,6 @@
import { AuthProvider } from "./auth-context";
import { Providers } from "./components/Providers";
+import { HtmlLang } from "./components/HtmlLang";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
@@ -39,6 +40,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
+
{children}