diff --git a/src/frontend/src/components/core/appHeaderComponent/components/AccountMenu/index.tsx b/src/frontend/src/components/core/appHeaderComponent/components/AccountMenu/index.tsx
index 44269dd11f..891f222b6e 100644
--- a/src/frontend/src/components/core/appHeaderComponent/components/AccountMenu/index.tsx
+++ b/src/frontend/src/components/core/appHeaderComponent/components/AccountMenu/index.tsx
@@ -23,7 +23,6 @@ import {
HeaderMenuToggle,
} from "../HeaderMenu";
import ThemeButtons from "../ThemeButtons";
-import LanguageSelector from "../LanguageSelector";
export const AccountMenu = () => {
const { t } = useTranslation();
@@ -172,13 +171,6 @@ export const AccountMenu = () => {
-
-
{!autoLogin && (
diff --git a/src/frontend/src/locales/en.json b/src/frontend/src/locales/en.json
index cda9650118..bec06e7435 100644
--- a/src/frontend/src/locales/en.json
+++ b/src/frontend/src/locales/en.json
@@ -173,6 +173,9 @@
"settings.passwordRequired": "Please enter your password",
"settings.confirmPasswordRequired": "Please confirm your password",
"settings.saveButton": "Save",
+ "settings.languageTitle": "Language",
+ "settings.languageDescription": "Choose the display language for the Langflow interface.",
+ "settings.languageRecommended": "Recommended",
"settings.profilePictureTitle": "Profile Picture",
"settings.profilePictureDescription": "Choose the image that appears as your profile picture.",
"settings.apiKeysTitle": "Langflow API Keys",
diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/LanguageForm/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/LanguageForm/index.tsx
new file mode 100644
index 0000000000..f1810991af
--- /dev/null
+++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/LanguageForm/index.tsx
@@ -0,0 +1,60 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { useTypesStore } from "@/stores/typesStore";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "../../../../../../components/ui/card";
+
+const LANGUAGES = [
+ { code: "en", label: "English" },
+ { code: "fr", label: "Français" },
+ { code: "es", label: "Español" },
+ { code: "de", label: "Deutsch" },
+ { code: "pt", label: "Português" },
+ { code: "ja", label: "日本語" },
+ { code: "zh-Hans", label: "中文" },
+];
+
+const LanguageFormComponent = () => {
+ const { t, i18n } = useTranslation();
+ const queryClient = useQueryClient();
+ const setTypes = useTypesStore((state) => state.setTypes);
+
+ const handleChange = (code: string) => {
+ i18n.changeLanguage(code);
+ localStorage.setItem("languagePreference", code);
+ setTypes({});
+ queryClient.invalidateQueries({ queryKey: ["useGetTypes"] });
+ };
+
+ return (
+
+
+ {t("settings.languageTitle")}
+ {t("settings.languageDescription")}
+
+
+
+
+
+ );
+};
+
+export default LanguageFormComponent;
diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
index 73ea73c483..3091439637 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
@@ -21,6 +21,7 @@ import type {
} from "../../../../types/components";
import useScrollToElement from "../hooks/use-scroll-to-element";
import GeneralPageHeaderComponent from "./components/GeneralPageHeader";
+import LanguageFormComponent from "./components/LanguageForm";
import PasswordFormComponent from "./components/PasswordForm";
import ProfilePictureFormComponent from "./components/ProfilePictureForm";
@@ -138,6 +139,8 @@ export const GeneralPage = () => {
+
+
{ENABLE_PROFILE_ICONS && (