diff --git a/quiz-app/src/App.vue b/quiz-app/src/App.vue
index a6a92613..ca812e48 100644
--- a/quiz-app/src/App.vue
+++ b/quiz-app/src/App.vue
@@ -3,10 +3,10 @@
     <nav>
       <router-link class="navlink" to="/">Home</router-link>
       <label for="locale">locale</label>
-      <select v-model="locale">
-        <option>ar</option>
-        <option>bn</option>
-        <option>en</option>
+      <select v-model="native_name">
+        <option v-for="lan in iso_639_1_map_keys" :key="lan">
+          {{ lan }}
+        </option>
       </select>
     </nav>
     <div id="app">
@@ -30,12 +30,26 @@ export default {
   },
   data() {
     return {
-      locale: "en",
+      native_name: "English",
+
+      // Native names are from
+      // https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
+      iso_639_1_map: {
+        "العربية": "ar",
+        "বাংলা": "bn",
+        "English": "en",
+        "中文 - 大陆简体": "zh-cn",
+      },
     };
   },
+  computed: {
+    iso_639_1_map_keys() {
+      return Object.keys(this.iso_639_1_map);
+    }
+  },
   watch: {
-    locale(val) {
-      this.$root.$i18n.locale = val;
+    native_name(val) {
+      this.$root.$i18n.locale = this.iso_639_1_map[val];
     },
   },
   created() {
diff --git a/quiz-app/src/assets/translations/index.js b/quiz-app/src/assets/translations/index.js
index 1f118787..08cd4e01 100644
--- a/quiz-app/src/assets/translations/index.js
+++ b/quiz-app/src/assets/translations/index.js
@@ -2,6 +2,7 @@
 import ar from './ar.json';
 import bn from './bn.json';
 import en from './en.json';
+import zh_cn from './zh-cn.json';
 
 //export const defaultLocale = 'en';
 
@@ -9,6 +10,7 @@ const messages = {
 	ar: ar[0],
 	bn: bn[0],
 	en: en[0],
+	"zh-cn": zh_cn[0],
 };
 
 export default messages;