diff --git a/hello-data-portal/hello-data-portal-ui/src/app/pages/admin/announcements-management/announcements-management.component.ts b/hello-data-portal/hello-data-portal-ui/src/app/pages/admin/announcements-management/announcements-management.component.ts
index b70d572d..86cab27d 100644
--- a/hello-data-portal/hello-data-portal-ui/src/app/pages/admin/announcements-management/announcements-management.component.ts
+++ b/hello-data-portal/hello-data-portal-ui/src/app/pages/admin/announcements-management/announcements-management.component.ts
@@ -87,7 +87,7 @@ export class AnnouncementsManagementComponent extends BaseComponent implements O
     return deleteAnnouncement();
   }
 
-  getMessage(announcement: Announcement, selectedLanguage: string): string | undefined {
-    return announcement?.messages?.[selectedLanguage];
+  getMessage(announcement: Announcement, selectedLanguage: any): string | undefined {
+    return announcement?.messages?.[selectedLanguage.code];
   }
 }
diff --git a/hello-data-portal/hello-data-portal-ui/src/app/pages/admin/documentation-management/documentation-management.component.html b/hello-data-portal/hello-data-portal-ui/src/app/pages/admin/documentation-management/documentation-management.component.html
index f45db4bf..8de19343 100644
--- a/hello-data-portal/hello-data-portal-ui/src/app/pages/admin/documentation-management/documentation-management.component.html
+++ b/hello-data-portal/hello-data-portal-ui/src/app/pages/admin/documentation-management/documentation-management.component.html
@@ -1,7 +1,6 @@
 <h2 class="content-block">{{ '@Documentation management' | transloco }}</h2>
-<div *ngIf="documentation$ | async"></div>
 <div class="card">
-  <form *ngIf="(documentation$ | async) as documentation" [formGroup]="documentationForm">
+  <form *ngIf="(initForm$ | async) as result" [formGroup]="documentationForm">
     <p-tabView *ngIf="(supportedLanguages$ | async) as supportedLanguages">
       <ng-template ngFor let-language [ngForOf]="supportedLanguages">
         <p-tabPanel [header]="language.slice(0, 2).toUpperCase()">
@@ -55,7 +54,7 @@ <h2 class="content-block">{{ '@Documentation management' | transloco }}</h2>
     <p-toolbar>
       <div class="p-toolbar-group-start">&nbsp;</div>
       <div class="p-toolbar-group-end">
-        <p-button (click)="createOrUpdateDocumentation(documentation)"
+        <p-button (click)="createOrUpdateDocumentation(result.doc)"
                   icon="fas fa-floppy-disk"
                   label="{{'@Save' | transloco}}"
                   styleClass="p-button-success mr-2"></p-button>
diff --git a/hello-data-portal/hello-data-portal-ui/src/app/pages/admin/documentation-management/documentation-management.component.ts b/hello-data-portal/hello-data-portal-ui/src/app/pages/admin/documentation-management/documentation-management.component.ts
index 1fadd8d1..abaf3712 100644
--- a/hello-data-portal/hello-data-portal-ui/src/app/pages/admin/documentation-management/documentation-management.component.ts
+++ b/hello-data-portal/hello-data-portal-ui/src/app/pages/admin/documentation-management/documentation-management.component.ts
@@ -46,13 +46,14 @@ import {take} from "rxjs/operators";
 })
 export class DocumentationManagementComponent extends BaseComponent implements OnInit {
   documentationForm!: FormGroup;
-  documentation$: Observable<any>;
+  initForm$: Observable<any>;
+  selectedLanguage$: Observable<any>;
   supportedLanguages$: Observable<string[]>;
 
   constructor(private store: Store<AppState>, private fb: FormBuilder) {
     super();
     this.store.dispatch(loadDocumentation());
-    this.documentation$ = combineLatest([
+    this.initForm$ = combineLatest([
       this.store.select(selectDocumentation),
       this.store.select(selectSupportedLanguages).pipe(take(1))
     ]).pipe(
@@ -73,8 +74,11 @@ export class DocumentationManagementComponent extends BaseComponent implements O
           languages: this.fb.group(languageAnnouncementFormGroups),
         });
       }),
-      map(([doc]) => doc)
+      map(([doc, supportedLanguages]) => {
+        return  {doc: doc, langs: supportedLanguages};
+      })
     );
+    this.selectedLanguage$ = this.store.select(selectSelectedLanguage);
     this.supportedLanguages$ = this.store.select(selectSupportedLanguages);
     this.createBreadcrumbs();
   }
diff --git a/hello-data-portal/hello-data-portal-ui/src/app/pages/admin/faq-management/faq-list.component.ts b/hello-data-portal/hello-data-portal-ui/src/app/pages/admin/faq-management/faq-list.component.ts
index 17d3ee7c..65c15b2c 100644
--- a/hello-data-portal/hello-data-portal-ui/src/app/pages/admin/faq-management/faq-list.component.ts
+++ b/hello-data-portal/hello-data-portal-ui/src/app/pages/admin/faq-management/faq-list.component.ts
@@ -81,11 +81,11 @@ export class FaqListComponent extends BaseComponent implements OnInit {
     return deleteFaq();
   }
 
-  getTitle(faq: Faq, selectedLanguage: string): string | undefined {
-    return faq?.messages?.[selectedLanguage].title;
+  getTitle(faq: Faq, selectedLanguage: any): string | undefined {
+    return faq?.messages?.[selectedLanguage.code].title;
   }
 
-  getMessage(faq: Faq, selectedLanguage: string): string | undefined {
-    return faq?.messages?.[selectedLanguage].message;
+  getMessage(faq: Faq, selectedLanguage: any): string | undefined {
+    return faq?.messages?.[selectedLanguage.code].message;
   }
 }
diff --git a/hello-data-portal/hello-data-portal-ui/src/app/pages/published-announcements/published-announcements.component.html b/hello-data-portal/hello-data-portal-ui/src/app/pages/published-announcements/published-announcements.component.html
index 3b677d08..c84b5977 100644
--- a/hello-data-portal/hello-data-portal-ui/src/app/pages/published-announcements/published-announcements.component.html
+++ b/hello-data-portal/hello-data-portal-ui/src/app/pages/published-announcements/published-announcements.component.html
@@ -7,7 +7,7 @@
             <i class="fas fa-circle-info"></i>
           </div>
           <div class="p-toolbar-group-center" style="width: 65%">
-            <p-editor [ngModel]="getMessage(announcement, selectedLanguage.code)" [disabled]="true" [readonly]="true" [style]="{width: '100%'}">
+            <p-editor [ngModel]="getMessage(announcement, selectedLanguage)" [disabled]="true" [readonly]="true" [style]="{width: '100%'}">
               <p-header hidden></p-header>
             </p-editor>
           </div>
diff --git a/hello-data-portal/hello-data-portal-ui/src/app/pages/published-announcements/published-announcements.component.ts b/hello-data-portal/hello-data-portal-ui/src/app/pages/published-announcements/published-announcements.component.ts
index 010ce62e..62e2b13a 100644
--- a/hello-data-portal/hello-data-portal-ui/src/app/pages/published-announcements/published-announcements.component.ts
+++ b/hello-data-portal/hello-data-portal-ui/src/app/pages/published-announcements/published-announcements.component.ts
@@ -26,8 +26,8 @@ export class PublishedAnnouncementsComponent implements OnInit {
     this.selectedLanguage$ = store.select(selectSelectedLanguage);
   }
 
-  getMessage(announcement: Announcement, selectedLanguage: string): string | undefined {
-    return announcement?.messages?.[selectedLanguage];
+  getMessage(announcement: Announcement, selectedLanguage: any): string | undefined {
+    return announcement?.messages?.[selectedLanguage.code];
   }
 
   ngOnInit(): void {