diff --git a/packages/hydrooj/locales/en.yaml b/packages/hydrooj/locales/en.yaml
index 151c54ba1..62caaac29 100644
--- a/packages/hydrooj/locales/en.yaml
+++ b/packages/hydrooj/locales/en.yaml
@@ -1,4 +1,6 @@
+__flag: 🇬🇧
 __id: en
+__interface: yes
 __langname: English
 Can be Extended For: Extension
 contest_create: Contest Create
diff --git a/packages/hydrooj/locales/ko.yaml b/packages/hydrooj/locales/ko.yaml
index aec6eac96..d161b258e 100644
--- a/packages/hydrooj/locales/ko.yaml
+++ b/packages/hydrooj/locales/ko.yaml
@@ -1,4 +1,6 @@
+__flag: 🇰🇷
 __id: ko
+__interface: yes
 __langname: 한국어
 '"{data}" copied to clipboard!': “{data}”복사 완료
 '{0} comments': '{0} 댓글'
diff --git a/packages/hydrooj/locales/zh.yaml b/packages/hydrooj/locales/zh.yaml
index a2cb7c6ad..525a629f2 100644
--- a/packages/hydrooj/locales/zh.yaml
+++ b/packages/hydrooj/locales/zh.yaml
@@ -1,4 +1,6 @@
+__flag: 🇨🇳
 __id: zh
+__interface: yes
 __langname: 简体中文
 '"{data}" copied to clipboard!': “{data}”已复制到剪贴板！
 '{0} {1} delete your discussion reply {2} in "{3}"({4}).' : '{0} {1} 从讨论 {3}({4}) 删除了你的回复 {2}。'
diff --git a/packages/hydrooj/locales/zh_TW.yaml b/packages/hydrooj/locales/zh_TW.yaml
index f7df250cf..2cbe7f943 100644
--- a/packages/hydrooj/locales/zh_TW.yaml
+++ b/packages/hydrooj/locales/zh_TW.yaml
@@ -1,4 +1,5 @@
 __id: zh_TW
+__interface: yes
 __langname: 正體中文
 '{0} comments': '{0} 條評論'
 '{0} discussions': '{0} 條討論'
diff --git a/packages/hydrooj/src/entry/cli.ts b/packages/hydrooj/src/entry/cli.ts
index 333deb0cb..031abd16c 100644
--- a/packages/hydrooj/src/entry/cli.ts
+++ b/packages/hydrooj/src/entry/cli.ts
@@ -104,7 +104,6 @@ async function cli() {
 
 export async function load(ctx: Context) {
     fs.ensureDirSync(tmpdir);
-    require('../lib/i18n');
     require('../utils');
     require('../error');
     require('../service/bus').apply(ctx);
diff --git a/packages/hydrooj/src/entry/worker.ts b/packages/hydrooj/src/entry/worker.ts
index c22da2520..cc259a582 100644
--- a/packages/hydrooj/src/entry/worker.ts
+++ b/packages/hydrooj/src/entry/worker.ts
@@ -19,7 +19,6 @@ const tmpdir = path.resolve(os.tmpdir(), 'hydro');
 
 export async function apply(ctx: Context) {
     fs.ensureDirSync(tmpdir);
-    require('../lib/i18n');
     require('../utils');
     require('../error');
     require('../service/bus').apply(ctx);
diff --git a/packages/hydrooj/src/lib/i18n.ts b/packages/hydrooj/src/lib/i18n.ts
index 61116b8b7..71f0f42af 100644
--- a/packages/hydrooj/src/lib/i18n.ts
+++ b/packages/hydrooj/src/lib/i18n.ts
@@ -21,6 +21,7 @@ declare global {
 class I18nService extends Service {
     constructor(ctx: Context) {
         super(ctx, 'i18n');
+        this.load('ja', { __flag: '🇯🇵', __id: 'ja', __langname: '日本語' });
     }
 
     load(lang: string, content: Record<string, string>) {
@@ -57,8 +58,11 @@ class I18nService extends Service {
     }
 }
 
-app.provide('i18n', undefined, true);
-app.i18n = new I18nService(app);
+export const name = 'i18n';
+export function apply(ctx: Context) {
+    ctx.provide('i18n', undefined, true);
+    ctx.i18n = new I18nService(ctx);
+}
 
 String.prototype.translate = function translate(...languages: string[]) {
     if (languages[0]?.startsWith('en')) {
diff --git a/packages/hydrooj/src/loader.ts b/packages/hydrooj/src/loader.ts
index fea27a0fe..d4482a2bc 100644
--- a/packages/hydrooj/src/loader.ts
+++ b/packages/hydrooj/src/loader.ts
@@ -11,7 +11,7 @@ import child from 'child_process';
 import './utils';
 import cac from 'cac';
 import './ui';
-import './lib/i18n';
+import * as I18n from './lib/i18n';
 
 import { Logger } from './logger';
 import { Context, Service, ScopeStatus } from './context';
@@ -136,6 +136,7 @@ export class Loader extends Service {
     }
 }
 
+app.plugin(I18n);
 app.plugin(Loader);
 
 function preload() {
diff --git a/packages/hydrooj/src/model/setting.ts b/packages/hydrooj/src/model/setting.ts
index 8d9902a2d..6ab5eff54 100644
--- a/packages/hydrooj/src/model/setting.ts
+++ b/packages/hydrooj/src/model/setting.ts
@@ -24,6 +24,7 @@ const timezones = Array.from(tzs).sort().map((tz) => [tz, tz]) as [string, strin
 const langRange: Dictionary<string> = {};
 
 for (const lang in global.Hydro.locales) {
+    if (!global.Hydro.locales[lang].__interface) continue;
     langRange[lang] = global.Hydro.locales[lang].__langname;
 }
 
diff --git a/packages/ui-default/templates/problem_detail.html b/packages/ui-default/templates/problem_detail.html
index e1a66eb74..f43af842e 100644
--- a/packages/ui-default/templates/problem_detail.html
+++ b/packages/ui-default/templates/problem_detail.html
@@ -124,7 +124,7 @@
             <ul class="section__tab-header flex-row">
               {% for k in pdoc.content|contentLang %}
               <a class="section__tab-header-item {{'tab--active' if (handler.request.query.lang or handler.user.viewLang or handler.session.viewLang or (pdoc.content|contentLang)[0] ) == k }}" data-lang="{{ k }}" href="./{{pdoc.pid|default(pdoc.docId)}}?lang={{k}}">
-                {{ model.setting.SETTINGS_BY_KEY['viewLang'].range[k] }}
+                {{ handler.ctx.i18n.get('__langname', k) or i18n('Unknown language') }}
               </a>
               {% endfor %}
             </ul>