diff --git a/pinry-spa/src/components/PHeader.vue b/pinry-spa/src/components/PHeader.vue
index c6383a1..20415f3 100644
--- a/pinry-spa/src/components/PHeader.vue
+++ b/pinry-spa/src/components/PHeader.vue
@@ -102,7 +102,7 @@
                   :key="`locale-${locale}`"
                   @click="setLocale(locale)"
                   class="navbar-item">
-                  {{ locale }}
+                  {{ langs[locale] }}
                 </a>
               </div>
             </div>
@@ -136,6 +136,7 @@
 </template>
 
 <script>
+import localeUtils from '@/components/utils/i18n';
 import api from './api';
 import modals from './modals';
 
@@ -148,7 +149,7 @@ export default {
         loggedIn: false,
         meta: {},
       },
-      langs: ['en'],
+      langs: localeUtils.langCode2Name,
     };
   },
   computed: {
diff --git a/pinry-spa/src/components/utils/i18n/index.js b/pinry-spa/src/components/utils/i18n/index.js
new file mode 100644
index 0000000..c909596
--- /dev/null
+++ b/pinry-spa/src/components/utils/i18n/index.js
@@ -0,0 +1,17 @@
+import en from './locales/en.json';
+import zh from './locales/zh.json';
+
+const messages = {
+  en,
+  zh,
+};
+
+const langCode2Name = {
+  en: 'English',
+  zh: '简体中文',
+};
+
+export default {
+  messages,
+  langCode2Name,
+};
diff --git a/pinry-spa/src/assets/locales/en.json b/pinry-spa/src/components/utils/i18n/locales/en.json
similarity index 100%
rename from pinry-spa/src/assets/locales/en.json
rename to pinry-spa/src/components/utils/i18n/locales/en.json
diff --git a/pinry-spa/src/assets/locales/zh.json b/pinry-spa/src/components/utils/i18n/locales/zh.json
similarity index 100%
rename from pinry-spa/src/assets/locales/zh.json
rename to pinry-spa/src/components/utils/i18n/locales/zh.json
diff --git a/pinry-spa/src/main.js b/pinry-spa/src/main.js
index 20fa611..7efea88 100644
--- a/pinry-spa/src/main.js
+++ b/pinry-spa/src/main.js
@@ -2,17 +2,12 @@ import Buefy from 'buefy';
 import Vue from 'vue';
 import { VueMasonryPlugin } from 'vue-masonry';
 import VueI18n from 'vue-i18n';
+import localeUtils from './components/utils/i18n';
 import App from './App.vue';
 import router from './router';
 import setUpAxiosCsrfConfig from './components/utils/csrf';
 import './registerServiceWorker';
-import en from './assets/locales/en.json';
-import zh from './assets/locales/zh.json';
 
-const messages = {
-  en,
-  zh,
-};
 
 Vue.config.productionTip = false;
 Vue.use(Buefy);
@@ -23,7 +18,7 @@ setUpAxiosCsrfConfig();
 const i18n = new VueI18n({
   locale: localStorage.getItem('localeCode') || navigator.language.split('-')[0],
   fallbackLocale: 'en',
-  messages,
+  messages: localeUtils.messages,
 });
 
 new Vue({