diff --git a/apps/sample/src/app/app.component.html b/apps/sample/src/app/app.component.html
index be84164..ca8ca50 100644
--- a/apps/sample/src/app/app.component.html
+++ b/apps/sample/src/app/app.component.html
@@ -2,8 +2,8 @@
 <div i18n="@@translate-content.simple-dom-element-content">Translate content of DOM element</div>
 <div i18n="Provide the meaning or intent of the text within the specific context@@translate-content.dom-element-content-with-meaning">Translate content of DOM element with description</div>
 <div i18n="Provide the meaning or intent of the text within the specific context|Provide additional information or context@@translate-content.dom-element-content-with-meaning-and-description">Translate content of DOM element with meaning and description</div>
-<div i18n="Provide the meaning or intent of the text within the specific context|Provide additional information or context@@translate-content.with-interpolation">Some string with the texte "{{ text }}" interpolated without spaces</div>
-<div i18n="Provide the meaning or intent of the text within the specific context|Provide additional information or context@@translate-content.with-interpolation-and-spaces">Some string with the texte " {{ text }} " interpolated with spaces</div>
+<div i18n="Provide the meaning or intent of the text within the specific context|Provide additional information or context@@translate-content.with-interpolation">Some string with the text "{{ text }}" interpolated without spaces</div>
+<div i18n="Provide the meaning or intent of the text within the specific context|Provide additional information or context@@translate-content.with-interpolation-and-spaces">Some string with the text " {{ text }} " interpolated with spaces</div>
 <div i18n="Provide the meaning or intent of the text within the specific context|Provide additional information or context@@translate-content.with-interpolation-at-the-beginning">{{ text }} is interpolated at the beginning of the sentence</div>
 <div i18n="Provide the meaning or intent of the text within the specific context|Provide additional information or context@@translate-content.with-interpolation-at-the-end">An interpolated text at the end of the sentence is {{ text }}</div>
 <div i18n="Provide the meaning or intent of the text within the specific context|Provide additional information or context@@translate-content.with-twice-the-same-interpolation">The text {{ text }} and {{ text }} are the same</div>
diff --git a/apps/ui/src/app/modules/translations/components/file-list/file-list.component.ts b/apps/ui/src/app/modules/translations/components/file-list/file-list.component.ts
index f684987..6f6df12 100644
--- a/apps/ui/src/app/modules/translations/components/file-list/file-list.component.ts
+++ b/apps/ui/src/app/modules/translations/components/file-list/file-list.component.ts
@@ -1,4 +1,10 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import {
+  Component,
+  Input,
+  OnChanges,
+  SimpleChange,
+  SimpleChanges,
+} from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -25,8 +31,8 @@ export class FileListComponent implements OnChanges {
     );
   }
 
-  public ngOnChanges(changes: SimpleChanges): void {
-    if (!changes['filePaths']) {
+  public ngOnChanges(changes: { filePaths?: SimpleChange }): void {
+    if (!changes.filePaths) {
       return;
     }
 
diff --git a/apps/ui/src/app/modules/translations/components/translation-language/translation-language.component.ts b/apps/ui/src/app/modules/translations/components/translation-language/translation-language.component.ts
index 64ca6a3..ff060d4 100644
--- a/apps/ui/src/app/modules/translations/components/translation-language/translation-language.component.ts
+++ b/apps/ui/src/app/modules/translations/components/translation-language/translation-language.component.ts
@@ -1,5 +1,12 @@
-import { Component, Input, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChange,
+} from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { IXliffFile } from '@vtabary/xliff2js';
 import { ElectronService } from '../../../shared/public-api';
 
@@ -17,14 +24,17 @@ export class TranslationLanguageComponent implements OnChanges {
 
   public group: UntypedFormGroup;
 
-  constructor(formBuilder: UntypedFormBuilder, private electron: ElectronService) {
+  constructor(
+    formBuilder: UntypedFormBuilder,
+    private electron: ElectronService
+  ) {
     this.group = formBuilder.group({
       target: '',
     });
   }
 
-  public ngOnChanges(changes: SimpleChanges) {
-    if (!changes['file']) {
+  public ngOnChanges(changes: { file?: SimpleChange }) {
+    if (!changes.file) {
       return;
     }
 
@@ -32,7 +42,9 @@ export class TranslationLanguageComponent implements OnChanges {
       return this.group.controls['target'].setValue(null);
     }
 
-    this.group.controls['target'].setValue(this.file.$['target-language'] || null);
+    this.group.controls['target'].setValue(
+      this.file.$['target-language'] || null
+    );
   }
 
   public goToRFC() {
diff --git a/apps/vscode-webview/src/styles.scss b/apps/vscode-webview/src/styles.scss
index 00e2bb4..4b05e3b 100644
--- a/apps/vscode-webview/src/styles.scss
+++ b/apps/vscode-webview/src/styles.scss
@@ -9,6 +9,10 @@ app-translations,
   width: 100vw;
 }
 
+.sidenav {
+  height: 100vh;
+}
+
 .content-area,
 .sidenav {
   overflow-y: auto;
diff --git a/libs/shared-module/src/lib/components/modal/modal.component.ts b/libs/shared-module/src/lib/components/modal/modal.component.ts
index e0e46a6..1fbfcc7 100644
--- a/libs/shared-module/src/lib/components/modal/modal.component.ts
+++ b/libs/shared-module/src/lib/components/modal/modal.component.ts
@@ -4,7 +4,7 @@ import {
   Input,
   OnChanges,
   Output,
-  SimpleChanges,
+  SimpleChange,
 } from '@angular/core';
 
 @Component({
@@ -25,16 +25,21 @@ export class ModalComponent implements OnChanges {
   public buttonLabel = 'Confirm';
 
   @Output()
-  public close = new EventEmitter<boolean>();
+  public closeModal = new EventEmitter<boolean>();
 
-  public ngOnChanges(changes: SimpleChanges) {
-    if (changes['isOpen'] && changes['isOpen'].currentValue) {
-      this.isOpen = changes['isOpen'].currentValue;
+  public ngOnChanges(changes: {
+    isOpen?: SimpleChange;
+    title?: SimpleChange;
+    message?: SimpleChange;
+    buttonLabel?: SimpleChange;
+  }) {
+    if (changes.isOpen?.currentValue) {
+      this.isOpen = changes.isOpen.currentValue;
     }
   }
 
   public onClose(value: boolean): void {
-    this.close.emit(value);
+    this.closeModal.emit(value);
     this.isOpen = false;
   }
 }
diff --git a/libs/shared-module/src/lib/components/translation-navigation/translation-navigation.component.ts b/libs/shared-module/src/lib/components/translation-navigation/translation-navigation.component.ts
index 6622018..e83ed85 100644
--- a/libs/shared-module/src/lib/components/translation-navigation/translation-navigation.component.ts
+++ b/libs/shared-module/src/lib/components/translation-navigation/translation-navigation.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChange } from '@angular/core';
 import { IXliffTransUnit } from '@vtabary/xliff2js';
 import {
   ITreeNode,
@@ -26,22 +26,29 @@ export class TranslationNavigationComponent implements OnChanges {
 
   constructor(private treeBuilder: TreeBuilderService) {}
 
-  public ngOnChanges(changes: SimpleChanges): void {
-    if (changes['toTranslate']) {
+  /**
+   * @internal
+   */
+  public ngOnChanges(changes: {
+    toTranslate: SimpleChange;
+    translated: SimpleChange;
+    duplicated: SimpleChange;
+  }): void {
+    if (changes.toTranslate) {
       this.toTranslateTree = this.treeBuilder.build(
         this.toTranslate.map((item) => item.$.id),
         '.'
       );
     }
 
-    if (changes['translated']) {
+    if (changes.translated) {
       this.translatedTree = this.treeBuilder.build(
         this.translated.map((item) => item.$.id),
         '.'
       );
     }
 
-    if (changes['duplicated']) {
+    if (changes.duplicated) {
       this.duplicatedTree = this.treeBuilder.build(
         this.duplicated.map((item) => item.$.id),
         '.'
diff --git a/libs/shared-module/src/lib/components/translation-plural/translation-plural.component.html b/libs/shared-module/src/lib/components/translation-plural/translation-plural.component.html
index c8bedc8..c87ee7f 100644
--- a/libs/shared-module/src/lib/components/translation-plural/translation-plural.component.html
+++ b/libs/shared-module/src/lib/components/translation-plural/translation-plural.component.html
@@ -1,6 +1,6 @@
 <div class="plural-container">
   <div class="plural" *ngFor="let key of pluralCountersKey">
-    <p>{{ key }}</p>
+    <label>{{ key }}</label>
     <div class="plural-item" *ngIf="source?.counters?.[key] as pluralCounter">
       <translatol-translation-plural-item
         *ngFor="let item of pluralCounter; let i = index"
diff --git a/libs/shared-module/src/lib/components/translation-plural/translation-plural.component.scss b/libs/shared-module/src/lib/components/translation-plural/translation-plural.component.scss
index 3f40df6..cc01df0 100644
--- a/libs/shared-module/src/lib/components/translation-plural/translation-plural.component.scss
+++ b/libs/shared-module/src/lib/components/translation-plural/translation-plural.component.scss
@@ -4,15 +4,20 @@
 }
 
 .plural {
-  display: flex;
-  flex-direction: row;
+  line-height: 1.1;
   margin-top: 5px;
   padding-bottom: 15px;
   border-bottom-width: var(--clr-card-border-width, 0.05rem);
   border-bottom-style: solid;
   border-bottom-color: var(--clr-card-border-color, hsl(198, 0%, 87%));
 
-  p {
+  display: grid;
+  grid-template-columns: repeat(2, 30px 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  grid-column-gap: 30px;
+  grid-row-gap: 6px;
+
+  label {
     margin-top: 0;
     min-width: 50px;
   }
diff --git a/libs/shared-module/src/lib/components/translation-plural/translation-plural.component.ts b/libs/shared-module/src/lib/components/translation-plural/translation-plural.component.ts
index cc0a436..e1f4294 100644
--- a/libs/shared-module/src/lib/components/translation-plural/translation-plural.component.ts
+++ b/libs/shared-module/src/lib/components/translation-plural/translation-plural.component.ts
@@ -1,4 +1,10 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import {
+  Component,
+  Input,
+  OnChanges,
+  SimpleChange,
+  SimpleChanges,
+} from '@angular/core';
 import { IXliffInterpolation, IXliffPlural } from '@vtabary/xliff2js';
 
 @Component({
@@ -24,8 +30,11 @@ export class TranslationPluralComponent implements OnChanges {
   /**
    * @internal
    */
-  public ngOnChanges(changes: SimpleChanges) {
-    if (changes['plural']) {
+  public ngOnChanges(changes: {
+    source?: SimpleChange;
+    target?: SimpleChange;
+  }) {
+    if (changes.source) {
       this.pluralCountersKey = Object.keys(this.source?.counters ?? {});
     }
   }
diff --git a/libs/shared-module/src/lib/components/translation/translation.component.ts b/libs/shared-module/src/lib/components/translation/translation.component.ts
index e34c795..25314fd 100644
--- a/libs/shared-module/src/lib/components/translation/translation.component.ts
+++ b/libs/shared-module/src/lib/components/translation/translation.component.ts
@@ -4,7 +4,7 @@ import {
   Input,
   OnChanges,
   Output,
-  SimpleChanges,
+  SimpleChange,
 } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import {
@@ -64,8 +64,12 @@ export class TranslationComponent implements OnChanges {
   /**
    * @internal
    */
-  public ngOnChanges(changes: SimpleChanges): void {
-    if (!changes['translation']) {
+  public ngOnChanges(changes: {
+    translation: SimpleChange;
+    sourceLanguage: SimpleChange;
+    targetLanguage: SimpleChange;
+  }): void {
+    if (!changes.translation) {
       return;
     }
 
diff --git a/libs/shared-module/src/lib/components/translations/translations.component.html b/libs/shared-module/src/lib/components/translations/translations.component.html
index 0a552b9..6d39135 100644
--- a/libs/shared-module/src/lib/components/translations/translations.component.html
+++ b/libs/shared-module/src/lib/components/translations/translations.component.html
@@ -70,5 +70,5 @@ <h2 [title]="resolvedXliff?.file?.path">{{
   i18n-buttonLabel="@@translations.modal-button"
   buttonLabel="Delete"
   [isOpen]="openModalDeleteObsolete"
-  (close)="deleteObsoleteKey($event)"
+  (closeModal)="deleteObsoleteKey($event)"
 ></translatol-modal>
diff --git a/package.json b/package.json
index 1076a65..f626fe4 100644
--- a/package.json
+++ b/package.json
@@ -99,7 +99,7 @@
     "@electron/remote": "^2.0.9",
     "@nrwl/angular": "^16.0.1",
     "@vscode/webview-ui-toolkit": "^1.2.2",
-    "@vtabary/xliff2js": "~0.5.2",
+    "@vtabary/xliff2js": "~0.6.0",
     "axios": "^1.0.0",
     "lodash": "^4.17.21",
     "rxjs": "~7.8.0",
diff --git a/yarn.lock b/yarn.lock
index 2cdbb5e..11d404b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3428,10 +3428,10 @@
     "@microsoft/fast-foundation" "^2.38.0"
     "@microsoft/fast-react-wrapper" "^0.1.18"
 
-"@vtabary/xliff2js@~0.5.2":
-  version "0.5.2"
-  resolved "https://artefacts.si.perfect-memory.com/repository/npm-all/@vtabary/xliff2js/-/xliff2js-0.5.2.tgz#f436cc06fa4b2fdfdba942d598a0a8fc30ed538d"
-  integrity sha512-Lca9Wp0BKUSpJaw+PJmPKJvfAv75aH3LclrfA5RpCsx/ymJVyVHWR2TT5h0Ub6QICvPRm8MQdEoQPXawgmECog==
+"@vtabary/xliff2js@~0.6.0":
+  version "0.6.0"
+  resolved "https://artefacts.si.perfect-memory.com/repository/npm-all/@vtabary/xliff2js/-/xliff2js-0.6.0.tgz#337146387fe3d22e82ddc3afb5f8ee02bce9bfdd"
+  integrity sha512-nWDZLt/Mo0yJAywCQjxC1V1IMjnzd5nXZ39UA+tzuyM9A+0voGuI/O5j8suJEokvLFt4oU84cLqt52ff+XUS6g==
   dependencies:
     "@formatjs/icu-messageformat-parser" "^2.3.1"
     fast-xml-parser "^4.2.2"