diff --git a/ui/src/app/account/service/account.service.ts b/ui/src/app/account/service/account.service.ts
index 5c42c1395..0086f71f3 100644
--- a/ui/src/app/account/service/account.service.ts
+++ b/ui/src/app/account/service/account.service.ts
@@ -47,6 +47,9 @@ export class AccountService {
           if (response && response.body) {
             this.authenticated = true
             const account: IAccount = response.body
+            if (account.langKey) {
+              localStorage.setItem('langCode', account.langKey)
+            }
             this.accountData.next(account)
 
             // After retrieve the account info, the language will be changed to
diff --git a/ui/src/app/app.module.ts b/ui/src/app/app.module.ts
index 4b906ce98..565cfec67 100644
--- a/ui/src/app/app.module.ts
+++ b/ui/src/app/app.module.ts
@@ -3,7 +3,7 @@ import { BrowserModule } from '@angular/platform-browser'
 
 import { AppRoutingModule } from './app-routing.module'
 import { AppComponent } from './app.component'
-import { HttpClientModule } from '@angular/common/http'
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http'
 import { AccountModule } from './account/account.module'
 import { NgxWebstorageModule } from 'ngx-webstorage'
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
@@ -14,6 +14,7 @@ import { HasAnyAuthorityDirective } from './shared/directive/has-any-authority.d
 import { HomeModule } from './home/home.module'
 import { FooterComponent } from './layout/footer/footer.component'
 import { SharedModule } from './shared/shared.module'
+import { HeaderInterceptor } from './shared/interceptor/header.interceptor'
 
 @NgModule({
   declarations: [AppComponent, NavbarComponent, HasAnyAuthorityDirective, FooterComponent],
@@ -29,7 +30,13 @@ import { SharedModule } from './shared/shared.module'
     NgbModule,
     SharedModule.forRoot(),
   ],
-  providers: [],
+  providers: [
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: HeaderInterceptor,
+      multi: true,
+    },
+  ],
   bootstrap: [AppComponent],
 })
 export class AppModule {}
diff --git a/ui/src/app/shared/interceptor/header.interceptor.ts b/ui/src/app/shared/interceptor/header.interceptor.ts
new file mode 100644
index 000000000..7c2ae5a2e
--- /dev/null
+++ b/ui/src/app/shared/interceptor/header.interceptor.ts
@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core'
+import { HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http'
+
+@Injectable()
+export class HeaderInterceptor implements HttpInterceptor {
+  intercept(req: HttpRequest<any>, next: HttpHandler) {
+    const langCode = localStorage.getItem('langCode')
+
+    if (langCode) {
+      const request = req.clone({
+        headers: req.headers.set('Accept-Language', langCode),
+      })
+
+      // send cloned request with header to the next handler.
+      return next.handle(request)
+    }
+
+    // pass through unaltered request
+    return next.handle(req)
+  }
+}