diff --git a/demo/index.html b/demo/index.html
index 05ff56d..df6f9a7 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -28,7 +28,7 @@
 		window.intl = { ...common, ...dateTime, ...fileSize, ...list, ...number, ...localize };
 
 		render(
-			common.supportedLocalesDetails.map(({ code, name }) => html`<option value="${code}">${name}</option>`),
+			common.supportedLocalesDetails.map(({ code, localName }) => html`<option value="${code}">${localName}</option>`),
 			document.querySelector('#languages')
 		);
 	</script>
@@ -57,6 +57,7 @@ <h2>Usage</h2>
 		const htmlLangInput = document.getElementById('html-lang');
 
 		document.getElementById('apply-lang').onclick = () => {
+			debugger;
 			htmlElement.lang = htmlLangInput.value;
 		};
 	</script>
diff --git a/lib/common.js b/lib/common.js
index 1dc93c7..c001874 100644
--- a/lib/common.js
+++ b/lib/common.js
@@ -1,6 +1,14 @@
 export const defaultLocale = 'en';
 export const supportedBaseLocales = ['ar', 'cy', 'da', 'de', 'en', 'es', 'fr', 'haw', 'hi', 'ja', 'ko', 'mi', 'nl', 'pt', 'sv', 'tr', 'zh'];
 export const supportedLangpacks = ['ar', 'cy', 'da', 'de', 'en', 'en-gb', 'es', 'es-es', 'fr', 'fr-fr', 'fr-on', 'haw', 'hi', 'ja', 'ko', 'mi', 'nl', 'pt', 'sv', 'tr', 'zh-cn', 'zh-tw'];
+
+function updateLocalNames() {
+	const localName = new Intl.DisplayNames(documentLocaleSettings.language || navigator.language, { type: 'language' });
+	supportedLocalesDetails.forEach(l => {
+		l.localName = localName.of(l.overrideCode || l.code);
+	});
+}
+
 export const supportedLocalesDetails = [
 	{ code: 'ar-sa', dir: 'rtl', name: 'العربية (المملكة العربية السعودية)' },
 	{ code: 'cy-gb', dir: 'ltr', name: 'Cymraeg (Y Deyrnas Unedig)' },
@@ -10,10 +18,10 @@ export const supportedLocalesDetails = [
 	{ code: 'en-gb', dir: 'ltr', name: 'English (United Kingdom)' },
 	{ code: 'en-us', dir: 'ltr', name: 'English (United States)' },
 	{ code: 'es-es', dir: 'ltr', name: 'Español (España)' },
-	{ code: 'es-mx', dir: 'ltr', name: 'Español (Latinoamérica)' },
+	{ code: 'es-mx', overrideCode: 'es-419', dir: 'ltr', name: 'Español (Latinoamérica)' },
 	{ code: 'fr-ca', dir: 'ltr', name: 'Français (Canada)' },
 	{ code: 'fr-fr', dir: 'ltr', name: 'Français (France)' },
-	{ code: 'fr-on', dir: 'ltr', name: 'Français (Ontario)' },
+	{ code: 'fr-on', overrideCode: 'fr-CA-Ontario' , dir: 'ltr', name: 'Français (Ontario)' },
 	{ code: 'haw-us', dir: 'ltr', name: 'ʻŌlelo Hawaiʻi (ʻAmelika Hui Pū ʻIa)' },
 	{ code: 'hi-in', dir: 'ltr', name: 'हिंदी (भारत)' },
 	{ code: 'ja-jp', dir: 'ltr', name: '日本語 (日本)' },
@@ -23,8 +31,8 @@ export const supportedLocalesDetails = [
 	{ code: 'pt-br', dir: 'ltr', name: 'Português (Brasil)' },
 	{ code: 'sv-se', dir: 'ltr', name: 'Svenska (Sverige)' },
 	{ code: 'tr-tr', dir: 'ltr', name: 'Türkçe (Türkiye)' },
-	{ code: 'zh-cn', dir: 'ltr', name: '中文(简体)' },
-	{ code: 'zh-tw', dir: 'ltr', name: '中文(繁体)' }
+	{ code: 'zh-cn', overrideCode: 'zh-hans', dir: 'ltr', name: '中文(简体)' },
+	{ code: 'zh-tw', overrideCode: 'zh-hant', dir: 'ltr', name: '中文(繁体)' }
 ];
 export const supportedLocales = supportedLocalesDetails.map((l) => l.code);
 
@@ -225,3 +233,8 @@ export function getDocumentLocaleSettings() {
 	}
 	return documentLocaleSettings;
 }
+
+(() => {
+	getDocumentLocaleSettings().addChangeListener(updateLocalNames);
+	updateLocalNames();
+})()