diff --git a/CHANGELOG.md b/CHANGELOG.md
index 745fd4517..09b36679c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+# [0.76.0](https://github.com/juspay/hyperswitch-web/compare/v0.75.0...v0.76.0) (2024-07-17)
+
+
+### Features
+
+* language preference for mifinity added ([#502](https://github.com/juspay/hyperswitch-web/issues/502)) ([f9f15ca](https://github.com/juspay/hyperswitch-web/commit/f9f15cacbda9d1b02e778e6606c209f5233b6553))
+
 # [0.75.0](https://github.com/juspay/hyperswitch-web/compare/v0.74.5...v0.75.0) (2024-07-16)
 
 
diff --git a/package-lock.json b/package-lock.json
index 022889252..fc98b3771 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "orca-payment-page",
-  "version": "0.75.0",
+  "version": "0.76.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "orca-payment-page",
-      "version": "0.75.0",
+      "version": "0.76.0",
       "hasInstallScript": true,
       "dependencies": {
         "@aws-sdk/client-cloudfront": "^3.414.0",
diff --git a/package.json b/package.json
index b31ee39c8..0cae867a7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "orca-payment-page",
-  "version": "0.75.0",
+  "version": "0.76.0",
   "main": "index.js",
   "private": true,
   "dependencies": {
diff --git a/src/App.res b/src/App.res
index 966f6c432..504867011 100644
--- a/src/App.res
+++ b/src/App.res
@@ -45,7 +45,9 @@ let make = () => {
             "hyperComponentName",
           )->Types.getHyperComponentNameFromStr
 
-        <PreMountLoader publishableKey sessionId clientSecret endpoint ephemeralKey hyperComponentName />
+        <PreMountLoader
+          publishableKey sessionId clientSecret endpoint ephemeralKey hyperComponentName
+        />
       }
     | "achBankTransfer"
     | "bacsBankTransfer"
diff --git a/src/CardTheme.res b/src/CardTheme.res
index 771a0a826..fb2f8a97b 100644
--- a/src/CardTheme.res
+++ b/src/CardTheme.res
@@ -72,7 +72,7 @@ type recoilConfig = {
 let getLocaleObject = async string => {
   try {
     let locale = if string == "auto" {
-      navigator["language"]
+      Window.Navigator.language
     } else {
       string
     }
diff --git a/src/Components/DynamicFields.res b/src/Components/DynamicFields.res
index 0d01e58d8..df8d89d3e 100644
--- a/src/Components/DynamicFields.res
+++ b/src/Components/DynamicFields.res
@@ -483,6 +483,7 @@ let make = (
           | ShippingAddressPincode
           | ShippingAddressState
           | PhoneCountryCode
+          | LanguagePreference(_)
           | ShippingAddressCountry(_) => React.null
           }}
         </div>
@@ -767,6 +768,7 @@ let make = (
                 | DateOfBirth
                 | PhoneCountryCode
                 | VpaId
+                | LanguagePreference(_)
                 | None => React.null
                 }}
               </div>
diff --git a/src/LoaderController.res b/src/LoaderController.res
index fcf2fa5af..8aee5a46a 100644
--- a/src/LoaderController.res
+++ b/src/LoaderController.res
@@ -123,7 +123,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
       setConfig(_ => {
         config: {
           appearance,
-          locale: config.locale,
+          locale: config.locale === "auto" ? Window.Navigator.language : config.locale,
           fonts: config.fonts,
           clientSecret: config.clientSecret,
           ephemeralKey: config.ephemeralKey,
diff --git a/src/Payments/CardPayment.res b/src/Payments/CardPayment.res
index e3e7b3191..9d4934d06 100644
--- a/src/Payments/CardPayment.res
+++ b/src/Payments/CardPayment.res
@@ -208,7 +208,7 @@ let make = (
     isCustomerAcceptanceRequired,
     nickname,
     isCardBrandValid,
-    isManualRetryEnabled
+    isManualRetryEnabled,
   ))
   useSubmitPaymentData(submitCallback)
 
diff --git a/src/Payments/PaymentMethodsRecord.res b/src/Payments/PaymentMethodsRecord.res
index 38aba1c0a..afedb52cd 100644
--- a/src/Payments/PaymentMethodsRecord.res
+++ b/src/Payments/PaymentMethodsRecord.res
@@ -1,3 +1,5 @@
+open Utils
+
 type paymentFlow = InvokeSDK | RedirectToURL | QrFlow
 
 type paymentFlowWithConnector = array<(paymentFlow, array<string>)>
@@ -38,6 +40,7 @@ type paymentMethodsFields =
   | CryptoCurrencyNetworks
   | DateOfBirth
   | VpaId
+  | LanguagePreference(array<string>)
 
 let getPaymentMethodsFieldsOrder = paymentMethodField => {
   switch paymentMethodField {
@@ -574,7 +577,7 @@ let getPaymentMethodsFieldTypeFromString = (str, isBancontact) => {
 }
 
 let getOptionsFromPaymentMethodFieldType = (dict, key, ~isAddressCountry=true) => {
-  let options = dict->Utils.getArrayValFromJsonDict(key, "options")
+  let options = dict->getArrayValFromJsonDict(key, "options")
   switch options->Array.get(0)->Option.getOr("") {
   | "" => None
   | "ALL" => {
@@ -598,7 +601,7 @@ let getPaymentMethodsFieldTypeFromDict = dict => {
   let key = keysArr->Array.get(0)->Option.getOr("")
   switch key {
   | "user_currency" => {
-      let options = dict->Utils.getArrayValFromJsonDict("user_currency", "options")
+      let options = dict->getArrayValFromJsonDict("user_currency", "options")
       Currency(options)
     }
   | "user_country" => dict->getOptionsFromPaymentMethodFieldType("user_country")
@@ -608,6 +611,10 @@ let getPaymentMethodsFieldTypeFromDict = dict => {
       "user_shipping_address_country",
       ~isAddressCountry=false,
     )
+  | "language_preference" => {
+      let options = dict->getArrayValFromJsonDict("language_preference", "options")
+      LanguagePreference(options)
+    }
   | _ => None
   }
 }
@@ -788,8 +795,6 @@ type paymentMethodList = {
   merchant_name: string,
 }
 
-open Utils
-
 let defaultPaymentMethodType = {
   payment_method_type: "",
   payment_experience: [],
@@ -913,17 +918,17 @@ let getAchConnectors = (dict, str) => {
 
 let getDynamicFieldsFromJsonDict = (dict, isBancontact) => {
   let requiredFields =
-    Utils.getJsonFromDict(dict, "required_fields", JSON.Encode.null)
-    ->Utils.getDictFromJson
+    getJsonFromDict(dict, "required_fields", JSON.Encode.null)
+    ->getDictFromJson
     ->Dict.valuesToArray
 
   requiredFields->Array.map(requiredField => {
-    let requiredFieldsDict = requiredField->Utils.getDictFromJson
+    let requiredFieldsDict = requiredField->getDictFromJson
     {
-      required_field: requiredFieldsDict->Utils.getString("required_field", ""),
-      display_name: requiredFieldsDict->Utils.getString("display_name", ""),
+      required_field: requiredFieldsDict->getString("required_field", ""),
+      display_name: requiredFieldsDict->getString("display_name", ""),
       field_type: requiredFieldsDict->getFieldType(isBancontact),
-      value: requiredFieldsDict->Utils.getString("value", ""),
+      value: requiredFieldsDict->getString("value", ""),
     }
   })
 }
diff --git a/src/Types/CardThemeType.res b/src/Types/CardThemeType.res
index ed526c19f..3db3322ed 100644
--- a/src/Types/CardThemeType.res
+++ b/src/Types/CardThemeType.res
@@ -2,7 +2,6 @@ type theme = Default | Brutal | Midnight | Soft | Charcoal | NONE
 
 type innerLayout = Spaced | Compressed
 
-@val external navigator: 'a = "navigator"
 type showLoader = Auto | Always | Never
 
 type mode =
diff --git a/src/Utilities/DynamicFieldsUtils.res b/src/Utilities/DynamicFieldsUtils.res
index 16f5fe252..dec0ad117 100644
--- a/src/Utilities/DynamicFieldsUtils.res
+++ b/src/Utilities/DynamicFieldsUtils.res
@@ -400,6 +400,7 @@ let useSetInitialRequiredFields = (
           }
         | None => ()
         }
+      | LanguagePreference(_)
       | SpecialField(_)
       | InfoElement
       | CardNumber
@@ -433,6 +434,7 @@ let useRequiredFieldsBody = (
   ~isAllStoredCardsHaveName,
   ~setRequiredFieldsBody,
 ) => {
+  let configValue = Recoil.useRecoilValueFromAtom(configAtom)
   let email = Recoil.useRecoilValueFromAtom(userEmailAddress)
   let vpaId = Recoil.useRecoilValueFromAtom(userVpaId)
   let fullName = Recoil.useRecoilValueFromAtom(userFullName)
@@ -464,6 +466,12 @@ let useRequiredFieldsBody = (
     | PhoneCountryCode => phone.countryCode->Option.getOr("")
     | Currency(_) => currency
     | Country => country
+    | LanguagePreference(languageOptions) =>
+      languageOptions->Array.includes(
+        configValue.config.locale->String.toUpperCase->String.split("-")->Array.joinWith("_"),
+      )
+        ? configValue.config.locale
+        : "en"
     | Bank =>
       (
         Bank.getBanks(paymentMethodType)