diff --git a/apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx b/apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx
index 4b16a250b..462ba9b2c 100644
--- a/apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx
+++ b/apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx
@@ -2,7 +2,7 @@
// import { useFormStatus } from "react-dom"
import { useIntl } from "react-intl"
-import { languageSelect } from "@/constants/languages"
+import { getLocalizedLanguageOptions } from "@/constants/languages"
import Divider from "@/components/TempDesignSystem/Divider"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
@@ -12,13 +12,17 @@ import NewPassword from "@/components/TempDesignSystem/Form/NewPassword"
import Phone from "@/components/TempDesignSystem/Form/Phone"
import Select from "@/components/TempDesignSystem/Form/Select"
import Body from "@/components/TempDesignSystem/Text/Body"
+import useLang from "@/hooks/useLang"
import styles from "./formContent.module.css"
export default function FormContent() {
const intl = useIntl()
+ const lang = useLang()
+
// const { pending } = useFormStatus()
+ const languageOptions = getLocalizedLanguageOptions(lang)
const city = intl.formatMessage({ id: "City" })
const country = intl.formatMessage({ id: "Country" })
const email = `${intl.formatMessage({ id: "Email" })} ${intl.formatMessage({ id: "Address" }).toLowerCase()}`
@@ -65,7 +69,7 @@ export default function FormContent() {
/>
diff --git a/apps/scandic-web/constants/languages.ts b/apps/scandic-web/constants/languages.ts
index 0605e1ce7..ceb7a061e 100644
--- a/apps/scandic-web/constants/languages.ts
+++ b/apps/scandic-web/constants/languages.ts
@@ -85,3 +85,24 @@ export const languageSelect = [
{ label: "Norwegian", value: ApiLang.No },
{ label: "Swedish", value: ApiLang.Sv },
]
+
+/**
+ * Get localized language options based on the current lang.
+ */
+export function getLocalizedLanguageOptions(currentLang: Lang) {
+ const displayNames = new Intl.DisplayNames([currentLang], {
+ type: "language",
+ })
+
+ return languageSelect.map((option) => {
+ const localizedName = displayNames.of(option.value)
+ const capitalizedName = localizedName
+ ? localizedName.charAt(0).toUpperCase() + localizedName.slice(1)
+ : option.label
+
+ return {
+ value: option.value,
+ label: capitalizedName,
+ }
+ })
+}