diff --git a/apps/web-mzima-client/src/app/core/enums/icons.ts b/apps/web-mzima-client/src/app/core/enums/icons.ts
index 28bc3415fe..4c59be5e77 100644
--- a/apps/web-mzima-client/src/app/core/enums/icons.ts
+++ b/apps/web-mzima-client/src/app/core/enums/icons.ts
@@ -75,4 +75,5 @@ export enum Icons {
   thumbUp = 'thumb-up',
   ellipses = 'ellipses',
   lock = 'lock',
+  translate = 'translate',
 }
diff --git a/apps/web-mzima-client/src/app/core/services/event-bus.service.ts b/apps/web-mzima-client/src/app/core/services/event-bus.service.ts
index bd908a6542..0e2dc5e557 100644
--- a/apps/web-mzima-client/src/app/core/services/event-bus.service.ts
+++ b/apps/web-mzima-client/src/app/core/services/event-bus.service.ts
@@ -22,6 +22,7 @@ export const enum EventType {
   RefreshSurveysCounters = 'REFRESH_SURVEYS_COUNTERS',
   StopExportPolling = 'STOP_EXPORT_POLLING',
   ExportDone = 'EXPORT_DONE',
+  DisplayTranslatedPost = 'DISPLAY_TRANSLATED_POST',
   StatusChange = 'STATUS_CHANGE',
 }
 
diff --git a/apps/web-mzima-client/src/app/core/services/language.service.ts b/apps/web-mzima-client/src/app/core/services/language.service.ts
index cbd54c874b..6ab674cfc5 100644
--- a/apps/web-mzima-client/src/app/core/services/language.service.ts
+++ b/apps/web-mzima-client/src/app/core/services/language.service.ts
@@ -4,6 +4,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { BehaviorSubject } from 'rxjs';
 import { LanguageInterface } from '@mzima-client/sdk';
 import LangJSON from '../../../assets/locales/languages.json';
+import entityLanguages from '../../../assets/locales/entity-languages.json';
 import { SessionService } from './session.service';
 
 @Injectable({
@@ -41,6 +42,9 @@ export class LanguageService {
   private set initialLanguage(value: string) {
     localStorage.setItem(this.languageKey, value);
   }
+  getEntityLanguages() {
+    return entityLanguages;
+  }
 
   getLanguages(): LanguageInterface[] {
     if (LangJSON.languages && LangJSON.languages.length > 0) {
diff --git a/apps/web-mzima-client/src/app/post/post-details/post-details.component.html b/apps/web-mzima-client/src/app/post/post-details/post-details.component.html
index 67bfece381..0c1aae326f 100644
--- a/apps/web-mzima-client/src/app/post/post-details/post-details.component.html
+++ b/apps/web-mzima-client/src/app/post/post-details/post-details.component.html
@@ -17,28 +17,43 @@
           [deleteable]="post.allowed_privileges.includes('delete')"
           (statusChanged)="statusChangedHandle()"
           (deleted)="deletedHandle()"
+          (openTranslationModal)="openTranslatePost()"
         >
         </app-post-head>
       </div>
-
+      <app-post-translated
+        *ngIf="displayLanguage"
+        (openTranslationModal)="openTranslatePost()"
+        (displayOriginalPost)="displayOriginalPost()"
+        [baseLanguage]="post.base_language"
+        [displayLanguage]="displayLanguage"
+      ></app-post-translated>
       <div class="post__twitter" *ngIf="post.source === 'Twitter' && post.data_source_message_id">
         <app-twitter-widget [id]="post.data_source_message_id"></app-twitter-widget>
       </div>
 
       <div class="post__survey" *ngIf="post.form">
-        <h3>{{ post.form.name }}</h3>
-        <p>{{ post.form.description }}</p>
+        <h3>{{ post.form.translations[displayLanguage]?.name || post.form.name }}</h3>
+        <p>{{ post.form.translations[displayLanguage]?.description || post.form.description }}</p>
       </div>
 
       <h2 *ngIf="post.title?.length || post.content?.length" data-qa="postTitleValue">
-        {{ post.title || post.content }}
+        {{
+          post.translations[displayLanguage]?.title ||
+            post.title ||
+            post.translations[displayLanguage]?.description ||
+            post.content
+        }}
       </h2>
       <div class="post__metadata-container">
         <app-post-metadata *ngIf="post.id" [post]="post"></app-post-metadata>
       </div>
 
       <div class="post__description" *ngIf="post.title?.length && post.content?.length">
-        <p [innerHTML]="post.content" data-qa="postDescriptionValue"></p>
+        <p
+          [innerHTML]="post.translations[displayLanguage]?.description || post.content"
+          data-qa="postDescriptionValue"
+        ></p>
       </div>
 
       <ng-container *ngFor="let post_content of post.post_content; let i = index">
@@ -60,7 +75,7 @@ <h2 *ngIf="post.title?.length || post.content?.length" data-qa="postTitleValue">
               *ngIf="field.input !== 'tags' ? field.value : field.value?.length"
               class="post__group"
             >
-              <h3>{{ field.label }}</h3>
+              <h3>{{ field.translations[displayLanguage]?.label || field.label }}</h3>
 
               <ng-container *ngIf="field.input === 'tags'">
                 <ng-container *ngFor="let category of field.value">
@@ -121,12 +136,21 @@ <h3>{{ field.label }}</h3>
                   <p *ngIf="!field.value.value">-</p>
                 </ng-container>
                 <ng-container *ngIf="field.label !== 'Media Link'">
-                  <p>{{ field.value.value || '-' }}</p>
+                  <p>
+                    {{
+                      field.value.translations[displayLanguage]?.value || field.value.value || '-'
+                    }}
+                  </p>
                 </ng-container>
               </ng-container>
 
               <ng-container *ngIf="field.input === 'textarea'">
-                <p [innerHTML]="field.value.value" data-qa="longTextValue"></p>
+                <p
+                  [innerHTML]="
+                    field.value.translations[displayLanguage]?.value || field.value.value
+                  "
+                  data-qa="longTextValue"
+                ></p>
               </ng-container>
 
               <ng-container *ngIf="field.input === 'checkbox'">
@@ -228,7 +252,9 @@ <h3>{{ field.label }}</h3>
 
               <ng-container *ngIf="field.input === 'markdown'">
                 <span class="code-container">
-                  <code>{{ field.value.value || '-' }}</code>
+                  <code>{{
+                    field.value.translations[displayLanguage]?.value || field.value.value || '-'
+                  }}</code>
                 </span>
               </ng-container>
             </div>
diff --git a/apps/web-mzima-client/src/app/post/post-details/post-details.component.ts b/apps/web-mzima-client/src/app/post/post-details/post-details.component.ts
index 0593bc20c6..a0710a29bf 100644
--- a/apps/web-mzima-client/src/app/post/post-details/post-details.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-details/post-details.component.ts
@@ -25,11 +25,14 @@ import {
   SurveysService,
 } from '@mzima-client/sdk';
 import { TranslateService } from '@ngx-translate/core';
+import { untilDestroyed } from '@ngneat/until-destroy';
 import { lastValueFrom, Subscription } from 'rxjs';
 import { BaseComponent } from '../../base.component';
 import { preparingVideoUrl } from '../../core/helpers/validators';
 import { dateHelper } from '@helpers';
 import { BreakpointService, EventBusService, EventType, SessionService } from '@services';
+import { LanguageService } from '../../core/services/language.service';
+import { PostTranslateComponent } from '../post-translate/post-translate.component';
 
 @Component({
   selector: 'app-post-details',
@@ -51,6 +54,8 @@ export class PostDetailsComponent extends BaseComponent implements OnChanges, On
   public isPostLoading: boolean = true;
   public isManagePosts: boolean = false;
   public postChanged: boolean;
+  public displayLanguage: string;
+
   public post: PostResult;
   private dataSubscription: Subscription;
   constructor(
@@ -66,6 +71,7 @@ export class PostDetailsComponent extends BaseComponent implements OnChanges, On
     private surveyService: SurveysService,
     protected sanitizer: DomSanitizer,
     private eventBusService: EventBusService,
+    private languageService: LanguageService,
   ) {
     super(sessionService, breakpointService);
     this.getUserData();
@@ -86,6 +92,7 @@ export class PostDetailsComponent extends BaseComponent implements OnChanges, On
         //----------------------
         this.allowed_privileges = localStorage.getItem('USH_allowed_privileges') ?? '';
         this.postId = Number(params['id']);
+        this.translatePost();
       }
     });
     if (this.postFromModal) {
@@ -98,6 +105,16 @@ export class PostDetailsComponent extends BaseComponent implements OnChanges, On
       });
     }
   }
+  translatePost() {
+    this.eventBusService
+      .on(EventType.DisplayTranslatedPost)
+      .pipe(untilDestroyed(this))
+      .subscribe({
+        next: (language) => {
+          this.displayLanguage = language.code;
+        },
+      });
+  }
 
   loadData(): void {}
 
@@ -314,4 +331,27 @@ export class PostDetailsComponent extends BaseComponent implements OnChanges, On
   public getDate(value: any, format: string): string {
     return dateHelper.getDateWithTz(value, format);
   }
+
+  public openTranslatePost() {
+    const dialogRef = this.dialog.open(PostTranslateComponent, {
+      width: '100%',
+      maxWidth: '768px',
+      panelClass: ['modal', 'select-languages-modal'],
+      data: {
+        post: this.post,
+        languages: this.languageService.getEntityLanguages(),
+      },
+    });
+
+    dialogRef.afterClosed().subscribe((response) => {
+      if (response) {
+        this.post = response.post;
+        this.displayLanguage = response.displayLanguage.code;
+      }
+    });
+  }
+
+  public displayOriginalPost() {
+    this.displayLanguage = '';
+  }
 }
diff --git a/apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts b/apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts
index 0270bc42b1..ee5643dc06 100644
--- a/apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts
@@ -565,11 +565,12 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
   }
 
   async preparationData(): Promise<any> {
-    for (const task of this.tasks) {
+    for (const [index, task] of this.tasks.entries()) {
       task.fields = await Promise.all(
         task.fields.map(
           async (field: { key: string | number; input: string; type: string; options: any }) => {
             let value: any = {
+              translations: [],
               value: this.form.value[field.key],
             };
 
@@ -705,8 +706,13 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
                   this.form.value[field.key]?.map((fieldValue: any) => fieldValue.value) || [];
                 break;
               default:
+                const postField = this.post.post_content[index].fields.find(
+                  (f: any) => f.key === field.key,
+                );
                 value.value = this.form.value[field.key] || null;
+                value.translations = postField?.value?.translations || [];
             }
+
             return {
               ...field,
               value,
@@ -731,18 +737,19 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
       return;
     }
 
+    const postLanguage = this.selectedLanguage?.code || this.languageService.initialLanguage;
     const postData = {
-      base_language: 'en',
+      base_language: postLanguage,
       completed_stages: this.completeStages,
       content: this.description,
       description: '',
-      enabled_languages: {},
       form_id: this.formId,
       locale: 'en_US',
       post_content: this.tasks,
       published_to: [],
       title: this.title,
       type: 'report',
+      translations: this.post?.translations || [],
     };
 
     if (!this.form.valid) this.form.markAllAsTouched();
diff --git a/apps/web-mzima-client/src/app/post/post-head/post-head.component.html b/apps/web-mzima-client/src/app/post/post-head/post-head.component.html
index e93e68cc3d..7c23c586f1 100644
--- a/apps/web-mzima-client/src/app/post/post-head/post-head.component.html
+++ b/apps/web-mzima-client/src/app/post/post-head/post-head.component.html
@@ -33,6 +33,22 @@
   >
     <mat-icon icon svgIcon="share" [data-qa]="'share-post'" [attr.post]="post.id"></mat-icon>
   </mzima-client-button>
+  <mzima-client-button
+    fill="clear"
+    color="gray"
+    tabindex="-1"
+    [iconOnly]="true"
+    (buttonClick)="openTranslationModal.emit()"
+    *ngIf="showTranslationsIcon()"
+    class="post-head__control post-head__control--share"
+  >
+    <mat-icon
+      icon
+      svgIcon="translate"
+      [data-qa]="'translate-post'"
+      [attr.post]="post.id"
+    ></mat-icon>
+  </mzima-client-button>
   <mzima-client-button
     *ngIf="!!user?.userId"
     fill="clear"
diff --git a/apps/web-mzima-client/src/app/post/post-head/post-head.component.ts b/apps/web-mzima-client/src/app/post/post-head/post-head.component.ts
index 7a000496ea..c630626898 100644
--- a/apps/web-mzima-client/src/app/post/post-head/post-head.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-head/post-head.component.ts
@@ -20,10 +20,12 @@ export class PostHeadComponent extends BaseComponent implements OnInit {
   @Input() public editable: boolean;
   @Input() public feedView: boolean;
   @Input() public deleteable: boolean;
+  @Input() public hideTranslationsIcon: boolean;
   @Output() edit = new EventEmitter();
   @Output() refresh = new EventEmitter();
   @Output() deleted = new EventEmitter();
   @Output() statusChanged = new EventEmitter();
+  @Output() openTranslationModal = new EventEmitter();
   public isLocked: boolean;
 
   constructor(
@@ -165,4 +167,8 @@ export class PostHeadComponent extends BaseComponent implements OnInit {
       duration,
     });
   }
+  public showTranslationsIcon() {
+    const languagesAvailabe = this.post?.enabled_languages?.available?.length > 0;
+    return !this.hideTranslationsIcon && (languagesAvailabe || this.editable);
+  }
 }
diff --git a/apps/web-mzima-client/src/app/post/post-preview/post-preview.component.html b/apps/web-mzima-client/src/app/post/post-preview/post-preview.component.html
index 772da88e31..05fb48f59d 100644
--- a/apps/web-mzima-client/src/app/post/post-preview/post-preview.component.html
+++ b/apps/web-mzima-client/src/app/post/post-preview/post-preview.component.html
@@ -21,6 +21,7 @@
       [deleteable]="post.allowed_privileges.includes('delete')"
       (deleted)="deletedHandle()"
       (statusChanged)="statusChangedHandle()"
+      [hideTranslationsIcon]="true"
     >
     </app-post-head>
   </div>
diff --git a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html
new file mode 100644
index 0000000000..329c7fbd5e
--- /dev/null
+++ b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html
@@ -0,0 +1,168 @@
+<mzima-client-button
+  tabindex="-1"
+  fill="outline"
+  [iconOnly]="true"
+  color="light-gray"
+  [data-qa]="'btn-close'"
+  class="modal__close-btn"
+  [mat-dialog-close]="false"
+  ariaLabel="{{ 'modal.button.close' | translate }}"
+  (buttonClick)="closeModal()"
+>
+  <mat-icon icon svgIcon="close"></mat-icon>
+</mzima-client-button>
+
+<strong *ngIf="!isTranslateMode" mat-dialog-title [data-qa]="'lang-modal-title'"
+  >{{ 'translations.translate_post' | translate }}
+</strong>
+
+<strong *ngIf="isTranslateMode" mat-dialog-title [data-qa]="'lang-modal-title'"
+  >{{ 'translations.translate_post_to' | translate : { language: activeLanguage.name } }}
+</strong>
+
+<div mat-dialog-content>
+  <ng-container *ngIf="!isTranslateMode; else translate">
+    <div class="select-language" *ngIf="enabledLanguages.length > 0">
+      <p>{{ 'translations.available_languages' | translate }}</p>
+      <mat-form-field appearance="outline" class="feed-page__control">
+        <mat-select
+          name="language"
+          disableOptionCentering
+          [placeholder]="'app.select_language' | translate"
+          [(value)]="displayPostLanguage"
+          (selectionChange)="displayTranslatedPost($event)"
+        >
+          <mat-option *ngFor="let language of enabledLanguages" [value]="language">
+            {{ language.name }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+    <div *ngIf="post.allowed_privileges.includes('update')">
+      <h3 class="list-label">{{ 'translations.select_translate_edit' | translate }}</h3>
+      <ul role="list" class="types-list">
+        <li mat-ripple role="listitem" class="type-item" *ngIf="defaultLanguage">
+          <mzima-client-button
+            fill="clear"
+            color="secondary"
+            class="type-item__checkbox"
+            [disabled]="true"
+          >
+            {{ defaultLanguage.name }} ({{ 'translations.default_language' | translate }})
+          </mzima-client-button>
+        </li>
+        <li mat-ripple role="listitem" class="type-item" *ngFor="let language of languages">
+          <mzima-client-button
+            fill="clear"
+            color="secondary"
+            class="type-item__checkbox"
+            *ngIf="language.code !== defaultLanguage?.code"
+            (buttonClick)="selectLanguage($event, language)"
+          >
+            {{ language.name }}
+          </mzima-client-button>
+        </li>
+      </ul>
+    </div>
+  </ng-container>
+
+  <ng-template mat-dialog-content #translate>
+    <div class="translate-post" *ngIf="post.allowed_privileges.includes('update')">
+      <form class="" [formGroup]="translateForm">
+        <div class="translate-post__fields" *ngFor="let task of post.post_content">
+          <ng-container *ngFor="let field of task.fields">
+            <div class="form-row" *ngIf="isTranslateableContent(field)">
+              <mat-label
+                >{{ field?.translations[activeLanguage.code]?.label || field?.label }}
+              </mat-label>
+              <div class="translate-post__original">
+                <div>
+                  <i>{{ 'translations.text_in_original' | translate }}</i>
+                </div>
+                <div>
+                  <p>{{ getOriginalValue(field) }}</p>
+                </div>
+              </div>
+              <span class="field-label">{{ 'translations.add_translation' | translate }}</span>
+              <ng-container *ngIf="field.input === 'text' && field.type === 'title'">
+                <span class="color-accent">*</span>
+                <mat-form-field appearance="outline">
+                  <input matInput name="title" id="title" [formControlName]="field.key" />
+                </mat-form-field>
+              </ng-container>
+              <ng-container *ngIf="field.input === 'text' && field.type === 'description'">
+                <span class="color-accent">*</span>
+                <mat-form-field appearance="outline">
+                  <textarea
+                    matInput
+                    name="description"
+                    id="description"
+                    rows="3"
+                    [formControlName]="field.key"
+                  ></textarea>
+                </mat-form-field>
+              </ng-container>
+              <ng-container *ngIf="field.input === 'textarea'">
+                <mat-form-field appearance="outline">
+                  <textarea
+                    matInput
+                    name="'field.id'"
+                    id="'field.id'"
+                    [formControlName]="field.key"
+                  ></textarea>
+                </mat-form-field>
+              </ng-container>
+              <ng-container
+                *ngIf="
+                  field.input === 'text' && field.type !== 'title' && field.type !== 'description'
+                "
+              >
+                <mat-form-field appearance="outline">
+                  <input matInput name="'field.id'" id="'field.id'" [formControlName]="field.key"
+                /></mat-form-field>
+              </ng-container>
+              <ng-container *ngIf="field.input === 'markdown'">
+                <mat-form-field appearance="outline">
+                  <textarea
+                    matInput
+                    name="'field.id'"
+                    id="'field.id'"
+                    [formControlName]="field.key"
+                  ></textarea>
+                </mat-form-field>
+              </ng-container>
+              <mat-error
+                *ngIf="
+                  translateForm.get(field.key)?.invalid && translateForm.get(field.key)?.touched
+                "
+              >
+                <p *ngIf="translateForm.get(field.key)?.hasError('required')">
+                  {{ 'post.modify.errors.required' | translate : { label: field.label } }}
+                </p>
+              </mat-error>
+            </div>
+          </ng-container>
+        </div>
+      </form>
+    </div>
+
+    <div mat-dialog-actions align="end">
+      <mzima-client-button
+        (buttonClick)="closeModal()"
+        fill="outline"
+        color="secondary"
+        [mat-dialog-close]="false"
+        [data-qa]="'btn-lang-cancel'"
+      >
+        {{ 'app.cancel' | translate }}
+      </mzima-client-button>
+      <mzima-client-button
+        (buttonClick)="saveTranslation()"
+        [disabled]="translateForm.disabled || translateForm.invalid"
+        [data-qa]="'btn-lang-add'"
+      >
+        {{ 'app.save' | translate }}
+      </mzima-client-button>
+    </div>
+  </ng-template>
+</div>
diff --git a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.scss b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.scss
new file mode 100644
index 0000000000..315b343d62
--- /dev/null
+++ b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.scss
@@ -0,0 +1,62 @@
+@import 'helpers';
+.select-language {
+  margin-bottom: 26px;
+}
+.list-label {
+  margin: 4px 0 8px 0;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.types-list {
+  display: flex;
+  margin: 0 -8px;
+  flex-wrap: wrap;
+}
+
+.type-item {
+  display: flex;
+  padding: 8px 12px;
+  margin: 0 4px 8px;
+  border-radius: 4px;
+  width: calc(50% - 8px);
+  transition: color 0.35s ease;
+  background: var(--color-neutral-10);
+
+  @include breakpoint-max($tablet) {
+    border-inline-start-width: 4px;
+    box-shadow: inset 0 0 0 1px var(--color-neutral-20);
+  }
+
+  @include breakpoint-max($mobile) {
+    width: calc(100% - 8px);
+  }
+}
+
+.translate-post {
+  &__fields {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: 24px 16px;
+    border-radius: 4px;
+    gap: 24px;
+    background: var(--Neutral-Neutral-10, #f5f5f5);
+  }
+
+  .field-label {
+    font-weight: 500;
+    line-height: 160%; /* 22.4px */
+    letter-spacing: -0.07px;
+  }
+
+  &__original {
+    padding: 24px;
+    border: 1px solid var(--Neutral-Neutral-30, #e2e2e3);
+    background-color: white;
+  }
+
+  .mat-form-field {
+    background: white;
+  }
+}
diff --git a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.spec.ts b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.spec.ts
new file mode 100644
index 0000000000..9a1a44daaf
--- /dev/null
+++ b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { PostTranslateComponent } from './post-translate.component';
+
+describe('PostTranslateComponent', () => {
+  let component: PostTranslateComponent;
+  let fixture: ComponentFixture<PostTranslateComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [PostTranslateComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PostTranslateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts
new file mode 100644
index 0000000000..9870dfbdda
--- /dev/null
+++ b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts
@@ -0,0 +1,162 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { LanguageInterface, PostResult, PostsService } from '@mzima-client/sdk';
+import { EventBusService, EventType } from '@services';
+import { UntilDestroy } from '@ngneat/until-destroy';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatSelectChange } from '@angular/material/select';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+export interface PostTranslateComponentData {
+  post: PostResult;
+  languages: LanguageInterface[];
+}
+
+@UntilDestroy()
+@Component({
+  selector: 'app-post-translate',
+  templateUrl: './post-translate.component.html',
+  styleUrls: ['./post-translate.component.scss'],
+})
+export class PostTranslateComponent implements OnInit {
+  public languages: LanguageInterface[];
+  public enabledLanguages: any;
+  public isTranslateMode: boolean;
+  public activeLanguage: LanguageInterface;
+  public defaultLanguage: LanguageInterface | undefined;
+  public post: any;
+  public translateForm: FormGroup;
+  public displayPostLanguage: LanguageInterface;
+  constructor(
+    @Inject(MAT_DIALOG_DATA)
+    public data: PostTranslateComponentData,
+    private postsService: PostsService,
+    private eventBusService: EventBusService,
+    private snackBar: MatSnackBar,
+    private matDialogRef: MatDialogRef<PostTranslateComponent>,
+  ) {}
+
+  ngOnInit(): void {
+    this.languages = this.data.languages;
+    this.isTranslateMode = false;
+    this.post = structuredClone(this.data.post);
+    this.enabledLanguages = this.languages.filter((lang) =>
+      this.post.enabled_languages?.available?.includes(lang.code),
+    );
+    this.defaultLanguage = this.languages.find((lang) => lang.code === this.post.base_language);
+  }
+  public closeModal(ref?: any): void {
+    this.matDialogRef.close(ref);
+  }
+  public displayTranslatedPost(event: MatSelectChange) {
+    this.eventBusService.next({
+      type: EventType.DisplayTranslatedPost,
+      payload: event.value,
+    });
+    this.closeModal({ displayLanguage: event.value, post: this.post });
+  }
+  saveTranslation() {
+    this.translateForm.disable();
+    this.post.post_content.forEach((task: any) => {
+      task.fields
+        .filter((field: any) => field.key in this.translateForm.controls)
+        .forEach((field: any) => {
+          const translatedValue = this.translateForm.controls[field.key].value;
+          field.value = field.value || {};
+          field.value.translations = field.value.translations || {};
+
+          if (Array.isArray(field.value.translations) && field.value.translations.length === 0) {
+            field.value.translations = {};
+          }
+
+          field.value.translations[this.activeLanguage.code] = { value: translatedValue };
+
+          if (field.type === 'title' || field.type === 'description') {
+            this.post.translations = this.post.translations || {};
+            if (Array.isArray(this.post.translations) && this.post.translations.length === 0) {
+              this.post.translations = {};
+            }
+            this.post.translations[this.activeLanguage.code] =
+              this.post.translations[this.activeLanguage.code] || {};
+            this.post.translations[this.activeLanguage.code][field.type] = translatedValue;
+          }
+        });
+    });
+    this.post.enabled_languages = { default: 'en', available: this.enabledLanguages };
+    delete this.post.completed_stages;
+
+    this.postsService.updateTranslations(this.post.id, this.post).subscribe({
+      next: ({ result }) => {
+        this.postsService.unlockPost(this.post.id).subscribe();
+        this.showMessage('Translation saved successfully', 'success');
+        this.postsService.unlockPost(this.post.id).subscribe();
+        this.closeModal({ displayLanguage: this.activeLanguage, post: result });
+      },
+      error: ({ error }) => {
+        this.translateForm.enable();
+        this.postsService.unlockPost(this.post.id).subscribe();
+        this.showMessage(`Failed to save translation. ${error.errors.message}`, 'error');
+      },
+    });
+  }
+
+  private showMessage(message: string, type: string) {
+    this.snackBar.open(message, 'Close', {
+      panelClass: [type],
+      duration: 3000,
+    });
+  }
+  selectLanguage(event: Event, lang: LanguageInterface) {
+    this.postsService.lockPost(this.post.id).subscribe();
+    this.activeLanguage = lang;
+    this.translateForm = this.createForm();
+    this.enabledLanguages.push(lang.code);
+    this.isTranslateMode = true;
+  }
+
+  createForm() {
+    const newForm = new FormGroup({});
+    this.post.post_content
+      .flatMap((task: any) => task.fields)
+      .filter((field: any) => this.isTranslateableContent(field))
+      .forEach((field: any) => {
+        if (field.type === 'title' || field.type === 'description') {
+          newForm.addControl(field.key, new FormControl('', Validators.required));
+        } else {
+          newForm.addControl(field.key, new FormControl(''));
+        }
+        const translation = this.getTranslationValue(field);
+        if (translation) {
+          newForm.get(field.key)?.setValue(translation);
+        }
+      });
+    return newForm;
+  }
+
+  getOriginalValue(field: any) {
+    if (field.type === 'title') {
+      return this.post.title;
+    }
+    if (field.type === 'description') {
+      return this.post.content;
+    }
+    return field.value.value;
+  }
+
+  getTranslationValue(field: any) {
+    if (field.type === 'title') {
+      return this.post.translations?.[this.activeLanguage.code]?.title || '';
+    }
+    if (field.type === 'description') {
+      return this.post.translations?.[this.activeLanguage.code]?.description || '';
+    }
+    return field.value?.translations?.[this.activeLanguage.code]?.value || '';
+  }
+
+  isTranslateableContent(field: any) {
+    if (field.type === 'title' || field.type === 'description') return true;
+    if (field.value && field.value.value)
+      return field.input === 'text' || field.input === 'textarea' || field.input === 'markdown';
+    return false;
+  }
+}
diff --git a/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.html b/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.html
new file mode 100644
index 0000000000..303d1ae40f
--- /dev/null
+++ b/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.html
@@ -0,0 +1,32 @@
+<ng-container>
+  <div class="alert success-info">
+    <div>
+      <mat-icon class="icon" icon svgIcon="translate"></mat-icon>
+    </div>
+    <div>
+      <h3>
+        {{
+          'translations.translated_to' | translate : { language: getLanguageName(displayLanguage) }
+        }}
+      </h3>
+      <p>
+        {{ 'translations.viewing_translated' | translate }}
+      </p>
+      <mzima-client-button
+        class="original-post"
+        matSuffix
+        fill="clear"
+        color="secondary"
+        size="medium"
+        (buttonClick)="originalPost()"
+        iconPosition="first"
+      >
+        <mat-icon iconPrefix svgIcon="eye-open"></mat-icon>
+        {{ 'translations.view_original' | translate }}
+      </mzima-client-button>
+      <a (click)="openTranslations()" class="link-blue">{{
+        'translations.change_lang' | translate
+      }}</a>
+    </div>
+  </div>
+</ng-container>
diff --git a/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.scss b/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.scss
new file mode 100644
index 0000000000..a890fefeae
--- /dev/null
+++ b/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.scss
@@ -0,0 +1,21 @@
+.alert {
+  display: flex;
+  .icon {
+    width: 1em;
+    height: 1em;
+    font-size: 32px;
+    margin-inline-end: 18px;
+    margin-top: -2px;
+  }
+  .link-blue {
+    color: #006acd;
+  }
+  ::ng-deep {
+    .original-post {
+      button {
+        width: unset;
+        padding: 4px;
+      }
+    }
+  }
+}
diff --git a/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.spec.ts b/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.spec.ts
new file mode 100644
index 0000000000..e4e98315d6
--- /dev/null
+++ b/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { PostTranslatedComponent } from './post-translated.component';
+
+describe('PostTranslatedComponent', () => {
+  let component: PostTranslatedComponent;
+  let fixture: ComponentFixture<PostTranslatedComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [PostTranslatedComponent],
+      imports: [IonicModule.forRoot()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PostTranslatedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.ts b/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.ts
new file mode 100644
index 0000000000..37818ed46f
--- /dev/null
+++ b/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.ts
@@ -0,0 +1,29 @@
+import { Component, EventEmitter, Output, Input } from '@angular/core';
+import { LanguageService } from '../../core/services/language.service';
+
+@Component({
+  selector: 'app-post-translated',
+  templateUrl: './post-translated.component.html',
+  styleUrls: ['./post-translated.component.scss'],
+})
+export class PostTranslatedComponent {
+  @Output() public displayOriginalPost = new EventEmitter<Event>();
+  @Output() public openTranslationModal = new EventEmitter<Event>();
+  @Input() public baseLanguage: string;
+  @Input() public displayLanguage: string;
+  constructor(private languageService: LanguageService) {}
+
+  public getLanguageName(code: string) {
+    return (
+      this.languageService.getEntityLanguages().find((lang) => lang.code === code)?.name || code
+    );
+  }
+
+  originalPost() {
+    this.displayOriginalPost.emit();
+  }
+
+  openTranslations() {
+    this.openTranslationModal.emit();
+  }
+}
diff --git a/apps/web-mzima-client/src/app/post/post.module.ts b/apps/web-mzima-client/src/app/post/post.module.ts
index 48b253fc49..1611210f53 100644
--- a/apps/web-mzima-client/src/app/post/post.module.ts
+++ b/apps/web-mzima-client/src/app/post/post.module.ts
@@ -39,6 +39,8 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { PostNotFoundComponent } from './post-not-found/post-not-found.component';
 import { PostNotAllowedComponent } from './post-not-allowed/post-not-allowed.component';
 import { PostConversationComponent } from './post-conversation/post-conversation.component';
+import { PostTranslateComponent } from './post-translate/post-translate.component';
+import { PostTranslatedComponent } from './post-translated/post-translated.component';
 
 @NgModule({
   declarations: [
@@ -54,6 +56,8 @@ import { PostConversationComponent } from './post-conversation/post-conversation
     PostNotFoundComponent,
     PostNotAllowedComponent,
     PostConversationComponent,
+    PostTranslateComponent,
+    PostTranslatedComponent,
   ],
   imports: [
     CommonModule,
@@ -96,6 +100,7 @@ import { PostConversationComponent } from './post-conversation/post-conversation
     PostNotFoundComponent,
     PostNotAllowedComponent,
     PostConversationComponent,
+    PostTranslatedComponent,
   ],
 })
 export class PostModule {}
diff --git a/apps/web-mzima-client/src/assets/icons/translate.svg b/apps/web-mzima-client/src/assets/icons/translate.svg
new file mode 100644
index 0000000000..f087508b88
--- /dev/null
+++ b/apps/web-mzima-client/src/assets/icons/translate.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 32 32">
+  <!-- Generator: Adobe Illustrator 29.0.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 186)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: none;
+      }
+
+      .st1 {
+        clip-path: url(#clippath);
+      }
+    </style>
+    <clipPath id="clippath">
+      <rect class="st0" x="4.8" y="3.2" width="32" height="32"/>
+    </clipPath>
+  </defs>
+  <g class="st1">
+    <g id="translate">
+      <path id="Vector" d="M17.4,20c.1-.4,0-.8-.2-1.1l-2.1-2.1h0c1.7-2,3-4.2,3.7-6.6h1.9c.5,0,1-.4,1-1h0c0-.6-.5-1-1-1h-6v-1c0-.5-.4-1-1-1s-1,.5-1,1v1h-6c-.5,0-1,.4-1,1s.5,1,1,1h10.2c-.7,1.9-1.7,3.8-3.2,5.4-.8-.9-1.5-1.9-2.1-2.9-.2-.3-.5-.5-.8-.5-.7,0-1.1.8-.8,1.4.6,1.1,1.4,2.2,2.3,3.2l-4.4,4.3c-.4.4-.4,1,0,1.4.4.4,1,.4,1.4,0l4.3-4.3,2,2c.5.5,1.4.3,1.6-.4ZM22.3,14.3c-.6,0-1.1.4-1.4.9l-3.7,9.8c-.2.6.2,1.3.9,1.3s.7-.2.9-.6l.9-2.4h4.8l.9,2.4c.1.4.5.6.9.6.6,0,1.1-.6.9-1.3l-3.7-9.8c-.2-.6-.8-.9-1.4-.9ZM20.7,21.3l1.6-4.3,1.6,4.3h-3.2Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/apps/web-mzima-client/src/assets/locales/en.json b/apps/web-mzima-client/src/assets/locales/en.json
index 78873aa0b4..071cc81787 100644
--- a/apps/web-mzima-client/src/assets/locales/en.json
+++ b/apps/web-mzima-client/src/assets/locales/en.json
@@ -2162,15 +2162,19 @@
     "i_agree": "I agree to Ushahidi's <a href=\"https://www.ushahidi.com/privacy-policy\" target=\"_blank\">Privacy Policy</a> and\n<a href=\"https://www.ushahidi.com/terms-of-service\" target=\"_blank\">Terms and Conditions</a>."
   },
   "translations": {
+    "available_languages": "Available translations (select to see post):",
+    "translate_post": "Translate post",
+    "translate_post_to": "Translate post to {{language}}",
     "languages": "Languages",
     "language": "Language",
     "default": "default",
+    "default_language": "Default language",
+    "text_in_original": "Text in original language:",
     "translation_default": "(default)",
     "translate_field": "Translate field",
     "survey_select_default": "Select default language for this survey",
     "category_select_default": "Select default language for this category",
     "error_translation_exists": "You cannot select this language since there is already a translation for it.",
-    "edit_default_text": "Text in default language",
     "edit_placeholder": "Write your translation here",
     "add_translation": "Add your translation below:",
     "survey_name_required": "Translation for survey-name is required",
@@ -2184,7 +2188,12 @@
     "add_a_language": "Add a language",
     "error_no_default": "You need to specify a default language before adding a new translation.",
     "select_language": "Select a language to add translation for",
-    "default_lang_info": "This is the language that will be used if no translations are available for the language the user has set for the deployment."
+    "select_translate_edit": "Select a language to translate to, or edit:",
+    "default_lang_info": "This is the language that will be used if no translations are available for the language the user has set for the deployment.",
+    "translated_to": "Translated to {{language}}",
+    "viewing_translated":"You are viewing a translated version of this post.",
+    "view_original":"View original post",
+    "change_lang": "Change language"
   },
   "languages": {
     "ach": "Acoli",
diff --git a/apps/web-mzima-client/src/assets/locales/entity-languages.json b/apps/web-mzima-client/src/assets/locales/entity-languages.json
new file mode 100644
index 0000000000..bb0044cb69
--- /dev/null
+++ b/apps/web-mzima-client/src/assets/locales/entity-languages.json
@@ -0,0 +1,390 @@
+[{ "code": "ach", "name": "Acoli" },
+    { "code": "ady", "name": "Adyghe" },
+    { "code": "af", "name": "Afrikaans" },
+    { "code": "af-ZA", "name": "Afrikaans (South Africa)" },
+    { "code": "ak", "name": "Akan" },
+    { "code": "sq", "name": "Albanian" },
+    { "code": "sq-AL", "name": "Albanian (Albania)" },
+    { "code": "aln", "name": "Albanian Gheg" },
+    { "code": "am", "name": "Amharic" },
+    { "code": "am-ET", "name": "Amharic (Ethiopia)" },
+    { "code": "ar", "name": "Arabic" },
+    { "code": "ar-EG", "name": "Arabic (Egypt)" },
+    { "code": "ar-SA", "name": "Arabic (Saudi Arabia)" },
+    { "code": "ar-SD", "name": "Arabic (Sudan)" },
+    { "code": "ar-SY", "name": "Arabic (Syria)" },
+    { "code": "ar-AA", "name": "Arabic (Unitag)" },
+    { "code": "an", "name": "Aragonese" },
+    { "code": "hy", "name": "Armenian" },
+    { "code": "hy-AM", "name": "Armenian (Armenia)" },
+    { "code": "as", "name": "Assamese" },
+    { "code": "as-IN", "name": "Assamese (India)" },
+    { "code": "ast", "name": "Asturian" },
+    { "code": "ast-ES", "name": "Asturian (Spain)" },
+    { "code": "az", "name": "Azerbaijani" },
+    { "code": "az@Arab", "name": "Azerbaijani (Arabic)" },
+    { "code": "az-AZ", "name": "Azerbaijani (Azerbaijan)" },
+    { "code": "az-IR", "name": "Azerbaijani (Iran)" },
+    { "code": "az@latin", "name": "Azerbaijani (Latin)" },
+    { "code": "bal", "name": "Balochi" },
+    { "code": "ba", "name": "Bashkir" },
+    { "code": "eu", "name": "Basque" },
+    { "code": "eu-ES", "name": "Basque (Spain)" },
+    { "code": "bar", "name": "Bavarian" },
+    { "code": "be", "name": "Belarusian" },
+    { "code": "be-BY", "name": "Belarusian (Belarus)" },
+    { "code": "be@tarask", "name": "Belarusian (Tarask)" },
+    { "code": "bn", "name": "Bengali" },
+    { "code": "bn-BD", "name": "Bengali (Bangladesh)" },
+    { "code": "bn-IN", "name": "Bengali (India)" },
+    { "code": "brx", "name": "Bodo" },
+    { "code": "bs", "name": "Bosnian" },
+    { "code": "bs-BA", "name": "Bosnian (Bosnia and Herzegovina)" },
+    { "code": "br", "name": "Breton" },
+    { "code": "bg", "name": "Bulgarian" },
+    { "code": "bg-BG", "name": "Bulgarian (Bulgaria)" },
+    { "code": "my", "name": "Burmese" },
+    { "code": "my-MM", "name": "Burmese (Myanmar)" },
+    { "code": "ca", "name": "Catalan" },
+    { "code": "ca-ES", "name": "Catalan (Spain)" },
+    { "code": "ca@valencia", "name": "Catalan (Valencian)" },
+    { "code": "ceb", "name": "Cebuano" },
+    { "code": "tzm", "name": "Central Atlas Tamazight" },
+    { "code": "hne", "name": "Chhattisgarhi" },
+    { "code": "cgg", "name": "Chiga" },
+    { "code": "zh", "name": "Chinese" },
+    { "code": "zh-CN", "name": "Chinese (China)" },
+    { "code": "zh-CN.GB2312", "name": "Chinese (China) (GB2312)" },
+    { "code": "gan", "name": "Chinese (Gan)" },
+    { "code": "hak", "name": "Chinese (Hakka)" },
+    { "code": "zh-HK", "name": "Chinese (Hong Kong)" },
+    { "code": "czh", "name": "Chinese (Huizhou)" },
+    { "code": "cjy", "name": "Chinese (Jinyu)" },
+    { "code": "lzh", "name": "Chinese (Literary)" },
+    { "code": "cmn", "name": "Chinese (Mandarin)" },
+    { "code": "mnp", "name": "Chinese (Min Bei)" },
+    { "code": "cdo", "name": "Chinese (Min Dong)" },
+    { "code": "nan", "name": "Chinese (Min Nan)" },
+    { "code": "czo", "name": "Chinese (Min Zhong)" },
+    { "code": "cpx", "name": "Chinese (Pu-Xian)" },
+    { "code": "zh-Hans", "name": "Chinese Simplified" },
+    { "code": "zh-TW", "name": "Chinese (Taiwan)" },
+    { "code": "zh-TW.Big5", "name": "Chinese (Taiwan) (Big5) " },
+    { "code": "zh-Hant", "name": "Chinese Traditional" },
+    { "code": "wuu", "name": "Chinese (Wu)" },
+    { "code": "hsn", "name": "Chinese (Xiang)" },
+    { "code": "yue", "name": "Chinese (Yue)" },
+    { "code": "cv", "name": "Chuvash" },
+    { "code": "ksh", "name": "Colognian" },
+    { "code": "kw", "name": "Cornish" },
+    { "code": "co", "name": "Corsican" },
+    { "code": "crh", "name": "Crimean Turkish" },
+    { "code": "hr", "name": "Croatian" },
+    { "code": "hr-HR", "name": "Croatian (Croatia)" },
+    { "code": "cs", "name": "Czech" },
+    { "code": "cs-CZ", "name": "Czech (Czech Republic)" },
+    { "code": "da", "name": "Danish" },
+    { "code": "da-DK", "name": "Danish (Denmark)" },
+    { "code": "dv", "name": "Divehi" },
+    { "code": "doi", "name": "Dogri" },
+    { "code": "nl", "name": "Dutch" },
+    { "code": "nl-BE", "name": "Dutch (Belgium)" },
+    { "code": "nl-NL", "name": "Dutch (Netherlands)" },
+    { "code": "dz", "name": "Dzongkha" },
+    { "code": "dz-BT", "name": "Dzongkha (Bhutan)" },
+    { "code": "en", "name": "English" },
+    { "code": "en-BD", "name": "English (Bangladesh)" },
+    { "code": "en-CA", "name": "English (Canada)" },
+    { "code": "en-GH", "name": "English (Ghana)" },
+    { "code": "en-HK", "name": "English (Hong Kong)" },
+    { "code": "en-HU", "name": "English (Hungary)" },
+    { "code": "en-IN", "name": "English (India)" },
+    { "code": "en-IE", "name": "English (Ireland)" },
+    { "code": "en-NL", "name": "English (Netherlands)" },
+    { "code": "en-NZ", "name": "English (New Zealand)" },
+    { "code": "en-NG", "name": "English (Nigeria)" },
+    { "code": "en-PK", "name": "English (Pakistan)" },
+    { "code": "en-ZA", "name": "English (South Africa)" },
+    { "code": "en-LK", "name": "English (Sri Lanka)" },
+    { "code": "en-GB", "name": "English (United Kingdom)" },
+    { "code": "en-US", "name": "English (United States)" },
+    { "code": "en-EN", "name": "English" },
+    { "code": "myv", "name": "Erzya" },
+    { "code": "eo", "name": "Esperanto" },
+    { "code": "et", "name": "Estonian" },
+    { "code": "et-EE", "name": "Estonian (Estonia)" },
+    { "code": "fo", "name": "Faroese" },
+    { "code": "fo-FO", "name": "Faroese (Faroe Islands)" },
+    { "code": "fil", "name": "Filipino" },
+    { "code": "fi", "name": "Finnish" },
+    { "code": "fi-FI", "name": "Finnish (Finland)" },
+    { "code": "frp", "name": "Franco-Provençal (Arpitan)" },
+    { "code": "fr", "name": "French" },
+    { "code": "fr-BE", "name": "French (Belgium)" },
+    { "code": "fr-CA", "name": "French (Canada)" },
+    { "code": "fr-FR", "name": "French (France)" },
+    { "code": "fr-CH", "name": "French (Switzerland)" },
+    { "code": "fur", "name": "Friulian" },
+    { "code": "ff", "name": "Fulah" },
+    { "code": "ff-SN", "name": "Fulah (Senegal)" },
+    { "code": "gd", "name": "Gaelic, Scottish" },
+    { "code": "gl", "name": "Galician" },
+    { "code": "gl-ES", "name": "Galician (Spain)" },
+    { "code": "lg", "name": "Ganda" },
+    { "code": "ka", "name": "Georgian" },
+    { "code": "ka-GE", "name": "Georgian (Georgia)" },
+    { "code": "de", "name": "German" },
+    { "code": "de-AT", "name": "German (Austria)" },
+    { "code": "de-DE", "name": "German (Germany)" },
+    { "code": "de-CH", "name": "German (Switzerland)" },
+    { "code": "el", "name": "Greek" },
+    { "code": "el-GR", "name": "Greek (Greece)" },
+    { "code": "kl", "name": "Greenlandic" },
+    { "code": "gu", "name": "Gujarati" },
+    { "code": "gu-IN", "name": "Gujarati (India)" },
+    { "code": "gun", "name": "Gun" },
+    { "code": "ht", "name": "Haitian (Haitian Creole)" },
+    { "code": "ht-HT", "name": "Haitian (Haitian Creole) (Haiti)" },
+    { "code": "ha", "name": "Hausa" },
+    { "code": "haw", "name": "Hawaiian" },
+    { "code": "he", "name": "Hebrew" },
+    { "code": "he-IL", "name": "Hebrew (Israel)" },
+    { "code": "hi", "name": "Hindi" },
+    { "code": "hi-IN", "name": "Hindi (India)" },
+    { "code": "hu", "name": "Hungarian" },
+    { "code": "hu-HU", "name": "Hungarian (Hungary)" },
+    { "code": "is", "name": "Icelandic" },
+    { "code": "is-IS", "name": "Icelandic (Iceland)" },
+    { "code": "io", "name": "Ido" },
+    { "code": "ig", "name": "Igbo" },
+    { "code": "ilo", "name": "Iloko" },
+    { "code": "id", "name": "Indonesian" },
+    { "code": "id-ID", "name": "Indonesian (Indonesia)" },
+    { "code": "ia", "name": "Interlingua" },
+    { "code": "iu", "name": "Inuktitut" },
+    { "code": "ga", "name": "Irish" },
+    { "code": "ga-IE", "name": "Irish (Ireland)" },
+    { "code": "it", "name": "Italian" },
+    { "code": "it-IT", "name": "Italian (Italy)" },
+    { "code": "it-CH", "name": "Italian (Switzerland)" },
+    { "code": "ja", "name": "Japanese" },
+    { "code": "ja-JP", "name": "Japanese (Japan)" },
+    { "code": "jv", "name": "Javanese" },
+    { "code": "kab", "name": "Kabyle" },
+    { "code": "kn", "name": "Kannada" },
+    { "code": "kn-IN", "name": "Kannada (India)" },
+    { "code": "pam", "name": "Kapampangan" },
+    { "code": "ks", "name": "Kashmiri" },
+    { "code": "ks-IN", "name": "Kashmiri (India)" },
+    { "code": "csb", "name": "Kashubian" },
+    { "code": "kk", "name": "Kazakh" },
+    { "code": "kk@Arab", "name": "Kazakh (Arabic)" },
+    { "code": "kk@Cyrl", "name": "Kazakh (Cyrillic)" },
+    { "code": "kk-KZ", "name": "Kazakh (Kazakhstan)" },
+    { "code": "kk@latin", "name": "Kazakh (Latin)" },
+    { "code": "km", "name": "Khmer" },
+    { "code": "km-KH", "name": "Khmer (Cambodia)" },
+    { "code": "rw", "name": "Kinyarwanda" },
+    { "code": "ky", "name": "Kirgyz" },
+    { "code": "tlh", "name": "Klingon" },
+    { "code": "kok", "name": "Konkani" },
+    { "code": "ko", "name": "Korean" },
+    { "code": "ko-KR", "name": "Korean (Korea)" },
+    { "code": "ku", "name": "Kurdish" },
+    { "code": "ku-IQ", "name": "Kurdish (Iraq)" },
+    { "code": "lad", "name": "Ladino" },
+    { "code": "lo", "name": "Lao" },
+    { "code": "lo-LA", "name": "Lao (Laos)" },
+    { "code": "ltg", "name": "Latgalian" },
+    { "code": "la", "name": "Latin" },
+    { "code": "lv", "name": "Latvian" },
+    { "code": "lv-LV", "name": "Latvian (Latvia)" },
+    { "code": "lez", "name": "Lezghian" },
+    { "code": "lij", "name": "Ligurian" },
+    { "code": "li", "name": "Limburgian" },
+    { "code": "ln", "name": "Lingala" },
+    { "code": "lt", "name": "Lithuanian" },
+    { "code": "lt-LT", "name": "Lithuanian (Lithuania)" },
+    { "code": "jbo", "name": "Lojban" },
+    { "code": "lmo", "name": "Lombard" },
+    { "code": "dsb", "name": "Lower Sorbian" },
+    { "code": "nds", "name": "Low German" },
+    { "code": "lb", "name": "Luxembourgish" },
+    { "code": "mk", "name": "Macedonian" },
+    { "code": "mk-MK", "name": "Macedonian (Macedonia)" },
+    { "code": "mai", "name": "Maithili" },
+    { "code": "mg", "name": "Malagasy" },
+    { "code": "ms", "name": "Malay" },
+    { "code": "ml", "name": "Malayalam" },
+    { "code": "ml-IN", "name": "Malayalam (India)" },
+    { "code": "ms-MY", "name": "Malay (Malaysia)" },
+    { "code": "mt", "name": "Maltese" },
+    { "code": "mt-MT", "name": "Maltese (Malta)" },
+    { "code": "mni", "name": "Manipuri" },
+    { "code": "mi", "name": "Maori" },
+    { "code": "arn", "name": "Mapudungun" },
+    { "code": "mr", "name": "Marathi" },
+    { "code": "mr-IN", "name": "Marathi (India)" },
+    { "code": "mh", "name": "Marshallese" },
+    { "code": "mw1", "name": "Mirandese" },
+    { "code": "mn", "name": "Mongolian" },
+    { "code": "mn-MN", "name": "Mongolian (Mongolia)" },
+    { "code": "nah", "name": "Nahuatl" },
+    { "code": "nv", "name": "Navajo" },
+    { "code": "nr", "name": "Ndebele, South" },
+    { "code": "nap", "name": "Neapolitan" },
+    { "code": "ne", "name": "Nepali" },
+    { "code": "ne-NP", "name": "Nepali (Nepal)" },
+    { "code": "nia", "name": "Nias" },
+    { "code": "nqo", "name": "N'ko" },
+    { "code": "se", "name": "Northern Sami" },
+    { "code": "nso", "name": "Northern Sotho" },
+    { "code": "no", "name": "Norwegian" },
+    { "code": "nb", "name": "Norwegian Bokmål" },
+    { "code": "nb-NO", "name": "Norwegian Bokmål (Norway)" },
+    { "code": "no-NO", "name": "Norwegian (Norway)" },
+    { "code": "nn", "name": "Norwegian Nynorsk" },
+    { "code": "nn-NO", "name": "Norwegian Nynorsk (Norway)" },
+    { "code": "ny", "name": "Nyanja" },
+    { "code": "oc", "name": "Occitan (post 1500)" },
+    { "code": "or", "name": "Oriya" },
+    { "code": "or-IN", "name": "Oriya (India)" },
+    { "code": "om", "name": "Oromo" },
+    { "code": "os", "name": "Ossetic" },
+    { "code": "pfl", "name": "Palatinate German" },
+    { "code": "pa", "name": "Panjabi (Punjabi)" },
+    { "code": "pa-IN", "name": "Panjabi (Punjabi) (India)" },
+    { "code": "pap", "name": "Papiamento" },
+    { "code": "fa", "name": "Persian" },
+    { "code": "fa-AF", "name": "Persian (Afghanistan)" },
+    { "code": "fa-IR", "name": "Persian (Iran)" },
+    { "code": "pms", "name": "Piemontese" },
+    { "code": "pl", "name": "Polish" },
+    { "code": "pl-PL", "name": "Polish (Poland)" },
+    { "code": "pt", "name": "Portuguese" },
+    { "code": "pt-BR", "name": "Portuguese (Brazil)" },
+    { "code": "pt-PT", "name": "Portuguese (Portugal)" },
+    { "code": "ps", "name": "Pushto" },
+    { "code": "ro", "name": "Romanian" },
+    { "code": "ro-RO", "name": "Romanian (Romania)" },
+    { "code": "rm", "name": "Romansh" },
+    { "code": "ru", "name": "Russian" },
+    { "code": "ru-ee", "name": "Russian (Estonia)" },
+    { "code": "ru-lv", "name": "Russian (Latvia)" },
+    { "code": "ru-lt", "name": "Russian (Lithuania)" },
+    { "code": "ru@petr1708", "name": "Russian Petrine orthography" },
+    { "code": "ru-RU", "name": "Russian (Russia)" },
+    { "code": "sah", "name": "Sakha (Yakut)" },
+    { "code": "sm", "name": "Samoan" },
+    { "code": "sa", "name": "Sanskrit" },
+    { "code": "sat", "name": "Santali" },
+    { "code": "sc", "name": "Sardinian" },
+    { "code": "sco", "name": "Scots" },
+    { "code": "sr", "name": "Serbian" },
+    { "code": "sr@Ijekavian", "name": "Serbian (Ijekavian)" },
+    { "code": "sr@ijekavianlatin", "name": "Serbian (Ijekavian Latin)" },
+    { "code": "sr@latin", "name": "Serbian (Latin)" },
+    { "code": "sr-RS@latin", "name": "Serbian (Latin) (Serbia)" },
+    { "code": "sr-RS", "name": "Serbian (Serbia)" },
+    { "code": "sn", "name": "Shona" },
+    { "code": "scn", "name": "Sicilian" },
+    { "code": "szl", "name": "Silesian" },
+    { "code": "sd", "name": "Sindhi" },
+    { "code": "si", "name": "Sinhala" },
+    { "code": "si-LK", "name": "Sinhala (Sri Lanka)" },
+    { "code": "sk", "name": "Slovak" },
+    { "code": "sk-SK", "name": "Slovak (Slovakia)" },
+    { "code": "sl", "name": "Slovenian" },
+    { "code": "sl-SI", "name": "Slovenian (Slovenia)" },
+    { "code": "so", "name": "Somali" },
+    { "code": "son", "name": "Songhay" },
+    { "code": "st", "name": "Sotho, Southern" },
+    { "code": "st-ZA", "name": "Sotho, Southern (South Africa)" },
+    { "code": "sma", "name": "Southern Sami" },
+    { "code": "es", "name": "Spanish" },
+    { "code": "es-AR", "name": "Spanish (Argentina)" },
+    { "code": "es-BO", "name": "Spanish (Bolivia)" },
+    { "code": "es-CL", "name": "Spanish (Chile)" },
+    { "code": "es-CO", "name": "Spanish (Colombia)" },
+    { "code": "es-CR", "name": "Spanish (Costa Rica)" },
+    { "code": "es-DO", "name": "Spanish (Dominican Republic)" },
+    { "code": "es-EC", "name": "Spanish (Ecuador)" },
+    { "code": "es-SV", "name": "Spanish (El Salvador)" },
+    { "code": "es-GT", "name": "Spanish (Guatemala)" },
+    { "code": "es-419", "name": "Spanish (Latin America)" },
+    { "code": "es-MX", "name": "Spanish (Mexico)" },
+    { "code": "es-NI", "name": "Spanish (Nicaragua)" },
+    { "code": "es-PA", "name": "Spanish (Panama)" },
+    { "code": "es-PY", "name": "Spanish (Paraguay)" },
+    { "code": "es-PE", "name": "Spanish (Peru)" },
+    { "code": "es-PR", "name": "Spanish (Puerto Rico)" },
+    { "code": "es-ES", "name": "Spanish (Spain)" },
+    { "code": "es-US", "name": "Spanish (United States)" },
+    { "code": "es-UY", "name": "Spanish (Uruguay)" },
+    { "code": "es-VE", "name": "Spanish (Venezuela)" },
+    { "code": "su", "name": "Sundanese" },
+    { "code": "sw", "name": "Swahili" },
+    { "code": "sw-KE", "name": "Swahili (Kenya)" },
+    { "code": "ss", "name": "Swati" },
+    { "code": "sv", "name": "Swedish" },
+    { "code": "sv-FI", "name": "Swedish (Finland)" },
+    { "code": "sv-SE", "name": "Swedish (Sweden)" },
+    { "code": "tl", "name": "Tagalog" },
+    { "code": "tl-PH", "name": "Tagalog (Philippines)" },
+    { "code": "tg", "name": "Tajik" },
+    { "code": "tg-TJ", "name": "Tajik (Tajikistan)" },
+    { "code": "tzl", "name": "Talossan" },
+    { "code": "ta", "name": "Tamil" },
+    { "code": "ta-IN", "name": "Tamil (India)" },
+    { "code": "ta-LK", "name": "Tamil (Sri-Lanka)" },
+    { "code": "tt", "name": "Tatar" },
+    { "code": "te", "name": "Telugu" },
+    { "code": "te-IN", "name": "Telugu (India)" },
+    { "code": "tet", "name": "Tetum (Tetun)" },
+    { "code": "th", "name": "Thai" },
+    { "code": "th-TH", "name": "Thai (Thailand)" },
+    { "code": "bo", "name": "Tibetan" },
+    { "code": "bo-CN", "name": "Tibetan (China)" },
+    { "code": "ti", "name": "Tigrinya" },
+    { "code": "to", "name": "Tongan" },
+    { "code": "ts", "name": "Tsonga" },
+    { "code": "tn", "name": "Tswana" },
+    { "code": "tr", "name": "Turkish" },
+    { "code": "tr-TR", "name": "Turkish (Turkey)" },
+    { "code": "tk", "name": "Turkmen" },
+    { "code": "tk-TM", "name": "Turkmen (Turkmenistan)" },
+    { "code": "udm", "name": "Udmurt" },
+    { "code": "ug", "name": "Uighur" },
+    { "code": "ug@Arab", "name": "Uighur (Arabic)" },
+    { "code": "ug@Cyrl", "name": "Uighur (Cyrillic)" },
+    { "code": "ug@Latin", "name": "Uighur (Latin)" },
+    { "code": "uk", "name": "Ukrainian" },
+    { "code": "uk-UA", "name": "Ukrainian (Ukraine)" },
+    { "code": "vmf", "name": "Upper Franconian" },
+    { "code": "hsb", "name": "Upper Sorbian" },
+    { "code": "ur", "name": "Urdu" },
+    { "code": "ur-PK", "name": "Urdu (Pakistan)" },
+    { "code": "uz", "name": "Uzbek" },
+    { "code": "uz@Arab", "name": "Uzbek (Arabic)" },
+    { "code": "uz@Cyrl", "name": "Uzbek (Cyrillic)" },
+    { "code": "uz@Latn", "name": "Uzbek (Latin)" },
+    { "code": "uz-UZ", "name": "Uzbek (Uzbekistan)" },
+    { "code": "ve", "name": "Venda" },
+    { "code": "vec", "name": "Venetian" },
+    { "code": "vi", "name": "Vietnamese" },
+    { "code": "vi-VN", "name": "Vietnamese (Viet Nam)" },
+    { "code": "vls", "name": "Vlaams" },
+    { "code": "wa", "name": "Walloon" },
+    { "code": "war", "name": "Wáray-Wáray" },
+    { "code": "cy", "name": "Welsh" },
+    { "code": "cy-GB", "name": "Welsh (United Kingdom)" },
+    { "code": "fy", "name": "Western Frisian" },
+    { "code": "fy-NL", "name": "Western Frisian (Netherlands)" },
+    { "code": "wo", "name": "Wolof" },
+    { "code": "wo-SN", "name": "Wolof (Senegal)" },
+    { "code": "xh", "name": "Xhosa" },
+    { "code": "yi", "name": "Yiddish" },
+    { "code": "yo", "name": "Yoruba" },
+    { "code": "zu", "name": "Zulu" },
+    { "code": "zu-ZA", "name": "Zulu (South Africa)" }]
+  
\ No newline at end of file
diff --git a/apps/web-mzima-client/src/styles.scss b/apps/web-mzima-client/src/styles.scss
index c7238e2ec8..c6a2c49f0c 100644
--- a/apps/web-mzima-client/src/styles.scss
+++ b/apps/web-mzima-client/src/styles.scss
@@ -133,6 +133,14 @@ a {
   .notice {
     margin: 0;
   }
+
+  &.success-info {
+    background-color: #e4f9ed;
+    border: none;
+    border-radius: 4px;
+    padding: 16px;
+    font-style: normal;
+  }
 }
 
 .mat-drawer-container {
diff --git a/libs/sdk/src/lib/helpers/api.ts b/libs/sdk/src/lib/helpers/api.ts
index 9e0c90187b..8647d79600 100644
--- a/libs/sdk/src/lib/helpers/api.ts
+++ b/libs/sdk/src/lib/helpers/api.ts
@@ -14,7 +14,8 @@ export const ONLY = {
   NAME_ID_COLOR: 'name,id,color',
   NAME_COLOR_PERMISSIONS: 'name,color,everyone_can_create,can_create',
   NAME_ID_DESCRIPTION: 'name,id,description',
-  NEEDED_POSTS_LIST_PROPERTIES: 'id,title,content,status,color,contact,locks,post_media,data_source_message_id,post_date',
+  NEEDED_POSTS_LIST_PROPERTIES:
+    'id,title,content,status,color,contact,locks,post_media,data_source_message_id,post_date',
   TAG_ID_PARENTID_PARENT_SLUG: 'tag,id,parent_id,parent,slug',
   TAG_ID_PARENTID_PARENT_SLUG_CHILDREN: 'tag,id,parent_id,parent,slug,children',
   TAG_ID_PARENTID_CHILDREN: 'tag,id,parent_id,children',
diff --git a/libs/sdk/src/lib/models/posts.interface.ts b/libs/sdk/src/lib/models/posts.interface.ts
index 4cd047cb1b..e685830012 100644
--- a/libs/sdk/src/lib/models/posts.interface.ts
+++ b/libs/sdk/src/lib/models/posts.interface.ts
@@ -61,6 +61,7 @@ export interface PostPropertiesInterface {
   locks?: any[];
   data_source_message_id?: string;
   allowed_privileges: string[];
+  enabled_languages: PostEnabledLanguages;
 }
 
 export interface PostPropertiesUser {
@@ -80,6 +81,8 @@ export enum PostStatus {
 }
 
 export interface PostResult {
+  translations: any;
+  base_language: string;
   allowed_privileges: string[];
   author_email?: string;
   author_realname?: string;
@@ -112,6 +115,7 @@ export interface PostResult {
   form_id?: number;
   user?: PostPropertiesUser;
   post_content?: PostContent[];
+  enabled_languages: PostEnabledLanguages;
   post_media?: any;
 }
 
@@ -125,6 +129,7 @@ interface PostForm {
   url: string;
   description?: string;
   name?: string;
+  translations: any;
 }
 
 export interface PostContent {
@@ -178,3 +183,8 @@ export interface PostContentField {
   type: string;
   value?: any;
 }
+
+export interface PostEnabledLanguages {
+  default: string;
+  available: string[];
+}
diff --git a/libs/sdk/src/lib/services/posts.service.ts b/libs/sdk/src/lib/services/posts.service.ts
index e3b8542949..e323495000 100644
--- a/libs/sdk/src/lib/services/posts.service.ts
+++ b/libs/sdk/src/lib/services/posts.service.ts
@@ -50,7 +50,6 @@ export class PostsService extends ResourceService<any> {
   private responseObject: any;
   private awaitedResponse = new Subject<any>();
   public awaitedResponse$ = this.awaitedResponse.asObservable();
-
   constructor(
     protected override httpClient: HttpClient,
     protected override currentLoader: EnvLoader,
@@ -70,6 +69,9 @@ export class PostsService extends ResourceService<any> {
   updateStatus(id: string | number, status: string) {
     return super.patch(id, { status });
   }
+  updateTranslations(id: string, post: any) {
+    return super.update(id, post);
+  }
 
   override post(params: any): Observable<any> {
     return super.post(params);