diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index 694a691ab..7567b06f7 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -20,7 +20,7 @@
                     aria-expanded="false"
                     ngbDropdownToggle>
                     <i class="fa fa-plus-circle fa-fw" aria-hidden="true"></i>
-                    <ng-container i18n="@@action--add-new">Add New</ng-container>
+                    <ng-container translate="action.add-new">Add</ng-container>
                 </button>
                 <div ngbDropdownMenu aria-labelledby="addNewDropdown">
                     <a class="nav-link"
diff --git a/ui/src/app/i18n/directive/translate.directive.ts b/ui/src/app/i18n/directive/translate.directive.ts
index 1922cedc7..a904c5167 100644
--- a/ui/src/app/i18n/directive/translate.directive.ts
+++ b/ui/src/app/i18n/directive/translate.directive.ts
@@ -19,7 +19,7 @@ export class TranslateDirective implements OnDestroy {
     key: string;
     lastParams: any;
     currentParams: any;
-    messages: Messages;
+    messages: Messages = {};
     sub: Subscription;
 
     @Input() set translate(key: string) {
@@ -40,11 +40,18 @@ export class TranslateDirective implements OnDestroy {
         private element: ElementRef,
         private _ref: ChangeDetectorRef
     ) {
-        this.sub = this.store.select(fromI18n.getMessages).subscribe(m => this.messages = m);
+        this.sub = this.store.select(fromI18n.getMessages).subscribe(m => {
+            if (m && Object.keys(m).length) {
+                this.messages = m;
+                this.update();
+            }
+        });
     }
 
     update(): void {
-        this.element.nativeElement.textContent = this.service.translate(this.key, this.currentParams, this.messages);
+        const translated = this.service.translate(this.key, this.currentParams, this.messages);
+        this.element.nativeElement.textContent = translated;
+        // this.element.nativeElement.data = translated;
     }
 
     ngOnDestroy() {
diff --git a/ui/src/app/i18n/service/i18n.service.ts b/ui/src/app/i18n/service/i18n.service.ts
index 16a613c1f..cc38f0404 100644
--- a/ui/src/app/i18n/service/i18n.service.ts
+++ b/ui/src/app/i18n/service/i18n.service.ts
@@ -39,6 +39,7 @@ export class I18nService {
     translate(value: string, interpolated: any, messages: Messages): string {
         interpolated = interpolated || {};
         let val = messages.hasOwnProperty(value) ? messages[value] : value;
+        console.log(val, messages);
         return this.interpolate(val, interpolated);
     }