diff --git a/marketplace-ui/src/app/modules/product/product-card/product-card.component.html b/marketplace-ui/src/app/modules/product/product-card/product-card.component.html
index bd404c3ba..dd414407c 100644
--- a/marketplace-ui/src/app/modules/product/product-card/product-card.component.html
+++ b/marketplace-ui/src/app/modules/product/product-card/product-card.component.html
@@ -7,7 +7,10 @@
       width="70"
       height="70"
       [ngSrc]="product | logo"
-      [alt]="product.names | multilingualism: languageService.selectedLanguage()" />
+      [alt]="
+        product.names | multilingualism: languageService.selectedLanguage()
+      "
+      [lang]="languageService.selectedLanguage()" />
     @if (isShowInRESTClientEditor) {
       <div
         class="card__tag lh-md px-2 py-1 text-capitalize"
@@ -16,6 +19,7 @@
       </div>
     } @else {
       <div
+        [lang]="languageService.selectedLanguage()"
         class="card__tag lh-md px-2 py-1"
         [ngClass]="themeService.isDarkMode() ? 'text-dark' : 'text-light'">
         {{ 'common.filter.value.' + product.type | translate }}
@@ -23,13 +27,15 @@
     }
   </div>
   <div>
-    <h5 class="card__title text-primary">
-      {{
-        product.names | multilingualism: languageService.selectedLanguage()
-      }}
+    <h5
+      class="card__title text-primary"
+      [lang]="languageService.selectedLanguage()">
+      {{ product.names | multilingualism: languageService.selectedLanguage() }}
     </h5>
     @if (!isShowInRESTClientEditor) {
-      <p class="card__description text-secondary">
+      <p
+        class="card__description text-secondary"
+        [lang]="languageService.selectedLanguage()">
         {{
           product.shortDescriptions
             | multilingualism: languageService.selectedLanguage()
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-detail-feedback.component.html b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-detail-feedback.component.html
index 196c02984..de0d9b4fb 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-detail-feedback.component.html
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-detail-feedback.component.html
@@ -1,15 +1,15 @@
 <div style="margin-bottom: 64px;">
-  <app-product-star-rating-panel (openAddFeedbackDialog)="appModalService.openAddFeedbackDialog()" [isMobileMode]="isMobileMode()" />
+  <app-product-star-rating-panel (openAddFeedbackDialog)="appModalService.openAddFeedbackDialog()"
+    [isMobileMode]="isMobileMode()" />
 </div>
 
 <app-product-feedbacks-panel [isMobileMode]="isMobileMode()" />
 
 @if (isShowBtnMore()) {
-  <div class="d-flex flex-row justify-content-center">
-    <button
-      class="btn border-0 btn-secondary btn-show-more"
-      (click)="openShowFeedbacksDialog()">
-      {{ 'common.feedback.showMoreBtnLabel' | translate }}
-    </button>
-  </div>
+<div class="d-flex flex-row justify-content-center">
+  <button [lang]="languageService.selectedLanguage()" class="btn border-0 btn-secondary btn-show-more"
+    (click)="openShowFeedbacksDialog()">
+    {{ 'common.feedback.showMoreBtnLabel' | translate }}
+  </button>
+</div>
 }
\ No newline at end of file
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-detail-feedback.component.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-detail-feedback.component.ts
index 7b4e4d318..3ed5bab2a 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-detail-feedback.component.ts
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-detail-feedback.component.ts
@@ -11,6 +11,7 @@ import { ProductFeedbacksPanelComponent } from './product-feedbacks-panel/produc
 import { AppModalService } from '../../../../shared/services/app-modal.service';
 import { ProductFeedbackService } from './product-feedbacks-panel/product-feedback.service';
 import { TranslateModule } from '@ngx-translate/core';
+import { LanguageService } from '../../../../core/services/language/language.service';
 
 const MAX_ELEMENTS = 6;
 
@@ -41,6 +42,7 @@ export class ProductDetailFeedbackComponent {
 
   productFeedbackService = inject(ProductFeedbackService);
   appModalService = inject(AppModalService);
+  languageService = inject(LanguageService);
 
   showPopup!: boolean;
 
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/feedback-filter/feedback-filter.component.html b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/feedback-filter/feedback-filter.component.html
index 1741cde6d..9df399dcb 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/feedback-filter/feedback-filter.component.html
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/feedback-filter/feedback-filter.component.html
@@ -1,14 +1,12 @@
 <div class="d-flex flex-row align-items-center">
-  <p class="text-primary mb-0 text-nowrap">{{'common.sort.label' | translate}}:</p>
-  <select
-    class="form-select border-primary text-primary"
-    aria-label="sort"
-    [ngModel]="productFeedbackService.sort()"
+  <p [lang]="languageService.selectedLanguage()" class="text-primary mb-0 text-nowrap">{{'common.sort.label' |
+    translate}}:</p>
+  <select class="form-select border-primary text-primary" aria-label="sort" [ngModel]="productFeedbackService.sort()"
     (change)="onSortChange($event)">
     @for (type of feedbackSortTypes; track $index) {
-      <option [value]="type.sortFn">
-        {{ type.label | translate }}
-      </option>
+    <option [value]="type.sortFn">
+      {{ type.label | translate }}
+    </option>
     }
   </select>
-</div>
+</div>
\ No newline at end of file
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/feedback-filter/feedback-filter.component.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/feedback-filter/feedback-filter.component.ts
index e8b316b5a..1a7645579 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/feedback-filter/feedback-filter.component.ts
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/feedback-filter/feedback-filter.component.ts
@@ -3,6 +3,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { FEEDBACK_SORT_TYPES } from '../../../../../../shared/constants/common.constant';
 import { FormsModule } from '@angular/forms';
 import { ProductFeedbackService } from '../product-feedback.service';
+import { LanguageService } from '../../../../../../core/services/language/language.service';
 
 @Component({
   selector: 'app-feedback-filter',
@@ -17,6 +18,7 @@ export class FeedbackFilterComponent {
   @Output() sortChange = new EventEmitter<string>();
 
   productFeedbackService = inject(ProductFeedbackService);
+  languageService = inject(LanguageService);
 
   onSortChange(event: Event): void {
     const selectElement = event.target as HTMLSelectElement;
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/product-feedbacks-panel.component.html b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/product-feedbacks-panel.component.html
index 37067feed..3e674a7e7 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/product-feedbacks-panel.component.html
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/product-feedbacks-panel.component.html
@@ -1,27 +1,27 @@
 <div class="d-flex flex-column p-0" style="gap: 48px">
   <div class="d-flex flex-row p-0 align-items-center justify-content-between feedback-header">
-    <h4 class="text-secondary mb-0">
+    <h4 [lang]="languageService.selectedLanguage()" class="text-secondary mb-0">
       {{ 'common.feedback.label' | translate }}
     </h4>
     <app-feedback-filter (sortChange)="onSortChange($event)" />
   </div>
   @if (isRenderInModalDialog) {
-    <div class="overflow-auto grid-feedbacks-container-dialog" (scroll)="onScrollCheckAllFeedbacksLoaded($event)">
-      @for (feedback of feedbacks(); track $index) {
-        <app-product-feedback [feedback]="feedback" />
-      }
-    </div>
+  <div class="overflow-auto grid-feedbacks-container-dialog" (scroll)="onScrollCheckAllFeedbacksLoaded($event)">
+    @for (feedback of feedbacks(); track $index) {
+    <app-product-feedback [feedback]="feedback" />
+    }
+  </div>
   } @else if (isMobileMode()) {
-    <div class="grid-feedbacks-container">
-      @for (feedback of feedbacks(); track $index) {
-        <app-product-feedback [feedback]="feedback" />
-      }
-    </div>
+  <div class="grid-feedbacks-container">
+    @for (feedback of feedbacks(); track $index) {
+    <app-product-feedback [feedback]="feedback" />
+    }
+  </div>
   } @else {
-    <div class="grid-feedbacks-container">
-      @for (feedback of feedbacks() | slice:0:6; track $index) {
-        <app-product-feedback [feedback]="feedback" />
-      }
-    </div>
+  <div class="grid-feedbacks-container">
+    @for (feedback of feedbacks() | slice:0:6; track $index) {
+    <app-product-feedback [feedback]="feedback" />
+    }
+  </div>
   }
-</div>
+</div>
\ No newline at end of file
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/product-feedbacks-panel.component.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/product-feedbacks-panel.component.ts
index 6f2c46cca..3531a69fc 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/product-feedbacks-panel.component.ts
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/product-feedbacks-panel.component.ts
@@ -15,6 +15,7 @@ import { ThemeService } from '../../../../../core/services/theme/theme.service';
 import { Feedback } from '../../../../../shared/models/feedback.model';
 import { CommonModule } from '@angular/common';
 import { ProductDetailService } from '../../product-detail.service';
+import { LanguageService } from '../../../../../core/services/language/language.service';
 
 interface CustomElement extends HTMLElement {
   scrollTop: number;
@@ -43,6 +44,7 @@ export class ProductFeedbacksPanelComponent {
   themeService = inject(ThemeService);
   productFeedbackService = inject(ProductFeedbackService);
   productDetailService = inject(ProductDetailService);
+  languageService = inject(LanguageService);
 
   feedbacks: Signal<Feedback[] | undefined> =
     this.productFeedbackService.feedbacks;
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/add-feedback-dialog/add-feedback-dialog.component.html b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/add-feedback-dialog/add-feedback-dialog.component.html
index 6ef300d1c..7b6c61bc9 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/add-feedback-dialog/add-feedback-dialog.component.html
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/add-feedback-dialog/add-feedback-dialog.component.html
@@ -1,51 +1,44 @@
 <div class="modal-content-wrapper">
   <div class="modal-header border-bottom-0">
-    <button
-      type="button"
-      class="btn-close"
-      aria-label="Close"
-      (click)="activeModal.dismiss()"></button>
+    <button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss()"></button>
   </div>
   <div class="modal-body modal-body-wrapper default-cursor">
-    <h4 class="add-feedback-title text-primary">
+    <h4 [lang]="languageService.selectedLanguage()" class="add-feedback-title text-primary">
       {{ 'common.feedback.addFeedbackTitle' | translate }}
     </h4>
-    <h5 class="text-secondary">
+    <h5 [lang]="languageService.selectedLanguage()" class="text-secondary">
       {{ 'common.feedback.addFeedbackDescription' | translate }}
     </h5>
     <div>
-      <p class="text-secondary mb-2">
+      <p [lang]="languageService.selectedLanguage()" class="text-secondary mb-2">
         {{ 'common.feedback.currentProductTitle' | translate }}
       </p>
-      <select
-        class="form-select product-item-select border-primary text-primary"
-        aria-label="item">
-        <option>{{ productDetailService.productNames() | multilingualism: languageService.selectedLanguage() }}</option>
+      <select class="form-select product-item-select border-primary text-primary" aria-label="item">
+        <option [lang]="languageService.selectedLanguage()">{{ productDetailService.productNames() | multilingualism:
+          languageService.selectedLanguage() }}</option>
       </select>
     </div>
     <div class="d-flex flex-column flex-grow-1">
-      <p class="text-secondary mb-2">
+      <p [lang]="languageService.selectedLanguage()" class="text-secondary mb-2">
         {{ 'common.feedback.starRatingTitle' | translate }}
       </p>
-      <app-star-rating [rate]="feedback.rating" (rateChange)="onRateChange($event)" [starClass]="'adding-feedback-star'" [ratingStarsClass]="'rating-stars'" />
-      <p class="text-secondary mb-2 mt-3">
+      <app-star-rating [rate]="feedback.rating" (rateChange)="onRateChange($event)" [starClass]="'adding-feedback-star'"
+        [ratingStarsClass]="'rating-stars'" />
+      <p [lang]="languageService.selectedLanguage()" class="text-secondary mb-2 mt-3">
         {{ 'common.feedback.commentLabel' | translate }}
       </p>
-      <textarea
-        class="feedback-content-textarea text-primary"
-        maxlength="250"
+      <textarea class="feedback-content-textarea text-primary" maxlength="250"
         [(ngModel)]="feedback.content"></textarea>
     </div>
-    <button
-      class="btn btn-primary border-0 submit-feedback-btn" [disabled]="!feedback.content.trim() || feedback.rating <= 0"
-      (click)="onSubmitFeedback()">
+    <button [lang]="languageService.selectedLanguage()" class="btn btn-primary border-0 submit-feedback-btn"
+      [disabled]="!feedback.content.trim() || feedback.rating <= 0" (click)="onSubmitFeedback()">
       {{ 'common.feedback.submitBtnLabel' | translate }}
     </button>
-    <p class="text-secondary mb-2 text-center">
+    <p [lang]="languageService.selectedLanguage()" class="text-secondary mb-2 text-center">
       {{ 'common.feedback.loggedGithubAsLabel' | translate }}
       <span class="user-link">
         {{ displayName }}
       </span>
     </p>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/add-feedback-dialog/success-dialog/success-dialog.component.html b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/add-feedback-dialog/success-dialog/success-dialog.component.html
index 6cc10d0a8..0f2d4b724 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/add-feedback-dialog/success-dialog/success-dialog.component.html
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/add-feedback-dialog/success-dialog/success-dialog.component.html
@@ -3,11 +3,11 @@
     <button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss()"></button>
   </div>
   <div class="modal-body">
-    <img ngSrc="/assets/images/misc/confetti-icon.png"
-      width="60" height="60" alt="Confetti Icon">
-    <h4 class="text-primary">
+    <img ngSrc="/assets/images/misc/confetti-icon.png" width="60" height="60" alt="Confetti Icon">
+    <h4 [lang]="languageService.selectedLanguage()" class="text-primary">
       {{ 'common.feedback.successMessage' | translate }}
     </h4>
-    <h4 class="text-primary">{{ 'common.feedback.thankMessage' | translate }} {{ authService.getDisplayName() ?? '' }}</h4>
+    <h4 [lang]="languageService.selectedLanguage()" class="text-primary">{{ 'common.feedback.thankMessage' | translate
+      }} {{ authService.getDisplayName() ?? '' }}</h4>
   </div>
 </div>
\ No newline at end of file
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/add-feedback-dialog/success-dialog/success-dialog.component.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/add-feedback-dialog/success-dialog/success-dialog.component.ts
index 9790866c9..3384b7ce4 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/add-feedback-dialog/success-dialog/success-dialog.component.ts
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/add-feedback-dialog/success-dialog/success-dialog.component.ts
@@ -3,6 +3,7 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 import { AuthService } from '../../../../../../../auth/auth.service';
 import { NgOptimizedImage } from '@angular/common';
+import { LanguageService } from '../../../../../../../core/services/language/language.service';
 
 @Component({
   selector: 'app-success-dialog',
@@ -16,4 +17,6 @@ export class SuccessDialogComponent {
   activeModal = inject(NgbActiveModal);
 
   authService = inject(AuthService);
+
+  languageService = inject(LanguageService);
 }
\ No newline at end of file
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/product-star-rating-panel.component.html b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/product-star-rating-panel.component.html
index eb1c26356..f6ca0d2d9 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/product-star-rating-panel.component.html
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/product-star-rating-panel.component.html
@@ -6,7 +6,7 @@
   <app-product-star-rating-number (openAddFeedbackDialog)="openAddFeedbackDialog.emit()" />
   <div></div>
   <div>
-    <p class="text-secondary mb-1">
+    <p [lang]="languageService.selectedLanguage()" class="text-secondary mb-1">
       {{ 'common.feedback.detailedReviews' | translate }}
     </p>
     <div>
@@ -19,8 +19,8 @@
           </div>
         </div>
         <div aria-hidden="true" class="star-rating-counting-line">
-          <div id="star-rating-percent-{{ counting.starRating }}" class="star-rating-percent"
-          starRatingHighlight [percent]="counting.percent!"></div>
+          <div id="star-rating-percent-{{ counting.starRating }}" class="star-rating-percent" starRatingHighlight
+            [percent]="counting.percent!"></div>
         </div>
       </div>
       }
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/product-star-rating-panel.component.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/product-star-rating-panel.component.ts
index 86888b5e2..351599f1e 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/product-star-rating-panel.component.ts
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/product-star-rating-panel.component.ts
@@ -8,6 +8,7 @@ import {
 } from '../../product-star-rating-number/product-star-rating-number.component';
 import { CommonModule } from '@angular/common';
 import { StarRatingCounting } from '../../../../../shared/models/star-rating-counting.model';
+import { LanguageService } from '../../../../../core/services/language/language.service';
 
 @Component({
   selector: 'app-product-star-rating-panel',
@@ -28,6 +29,7 @@ export class ProductStarRatingPanelComponent {
   @Output() openAddFeedbackDialog = new EventEmitter<void>();
 
   productStarRatingService = inject(ProductStarRatingService);
+  languageService = inject(LanguageService);
 
   starRatings: Signal<StarRatingCounting[]> = this.productStarRatingService.starRatings;
 }
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail-information-tab/product-detail-information-tab.component.html b/marketplace-ui/src/app/modules/product/product-detail/product-detail-information-tab/product-detail-information-tab.component.html
index caf883de5..d61a45eb4 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail-information-tab/product-detail-information-tab.component.html
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail-information-tab/product-detail-information-tab.component.html
@@ -1,16 +1,16 @@
-<h3 class="info-title text-primary mb-3">
+<h3 [lang]="languageService.selectedLanguage()" class="info-title text-primary mb-3">
   {{ 'common.product.detail.information.label' | translate }}
 </h3>
 <div class="info-container d-flex flex-column p-0 w-100">
   <div class="d-flex flex-row justify-content-between p-0">
-    <span class="text-secondary">
+    <span [lang]="languageService.selectedLanguage()" class="text-secondary">
       {{ 'common.product.detail.information.value.author' | translate }}
     </span>
     <span class="text-primary">{{ productDetail.vendor }}</span>
   </div>
   <hr class="border-top-0" />
   <div class="d-flex flex-row justify-content-between p-0">
-    <span class="text-secondary">
+    <span [lang]="languageService.selectedLanguage()" class="text-secondary">
       {{ 'common.product.detail.information.value.version' | translate }}
     </span>
     <span class="text-primary">
@@ -19,7 +19,7 @@ <h3 class="info-title text-primary mb-3">
   </div>
   <hr class="border-top-0" />
   <div class="d-flex flex-row justify-content-between p-0">
-    <span class="text-secondary">
+    <span [lang]="languageService.selectedLanguage()" class="text-secondary">
       {{ 'common.product.detail.information.value.compatibility' | translate }}
     </span>
     <span class="text-primary">
@@ -28,35 +28,35 @@ <h3 class="info-title text-primary mb-3">
   </div>
   <hr class="border-top-0" />
   <div class="d-flex flex-row justify-content-between p-0">
-    <span class="text-secondary">
+    <span [lang]="languageService.selectedLanguage()" class="text-secondary">
       {{ 'common.product.detail.information.value.cost' | translate }}
     </span>
     <span class="text-primary">{{ productDetail.cost }}</span>
   </div>
   <hr class="border-top-0" />
   <div class="d-flex flex-row justify-content-between p-0">
-    <span class="text-secondary">
+    <span [lang]="languageService.selectedLanguage()" class="text-secondary">
       {{ 'common.product.detail.information.value.language' | translate }}
     </span>
     <span class="text-primary">{{ productDetail.language }}</span>
   </div>
   <hr class="border-top-0" />
   <div class="d-flex flex-row justify-content-between p-0">
-    <span class="text-secondary">
+    <span [lang]="languageService.selectedLanguage()" class="text-secondary">
       {{ 'common.product.detail.type' | translate }}
     </span>
     <span class="text-primary text-capitalize">{{ productDetail.type }}</span>
   </div>
   <hr class="border-top-0" />
   <div class="d-flex flex-row justify-content-between p-0">
-    <span class="text-secondary">
+    <span [lang]="languageService.selectedLanguage()" class="text-secondary">
       {{ 'common.product.detail.information.value.industry' | translate }}
     </span>
     <span class="text-primary">{{ productDetail.industry }}</span>
   </div>
   <hr class="border-top-0" />
   <div class="d-flex flex-row justify-content-between p-0">
-    <span class="text-secondary">
+    <span [lang]="languageService.selectedLanguage()" class="text-secondary">
       {{ 'common.product.detail.information.value.tag' | translate }}
     </span>
     <span class="text-primary text-capitalize">
@@ -65,7 +65,7 @@ <h3 class="info-title text-primary mb-3">
   </div>
   <hr class="border-top-0" />
   <div class="d-flex flex-row justify-content-between p-0">
-    <span class="text-secondary">
+    <span [lang]="languageService.selectedLanguage()" class="text-secondary">
       {{ 'common.product.detail.information.value.source' | translate }}
     </span>
     <span>
@@ -76,26 +76,24 @@ <h3 class="info-title text-primary mb-3">
   </div>
   <hr class="border-top-0" />
   <div class="d-flex flex-row justify-content-between p-0">
-    <span class="text-secondary">
+    <span [lang]="languageService.selectedLanguage()" class="text-secondary">
       {{ 'common.product.detail.information.value.status' | translate }}
     </span>
     <img class="status__image" src="{{ productDetail.statusBadgeUrl }}" [alt]="productDetail.statusBadgeUrl" />
   </div>
   <hr class="border-top-0" />
   <div class="d-flex flex-row justify-content-between p-0">
-    <span class="text-secondary">
+    <span [lang]="languageService.selectedLanguage()" class="text-secondary">
       {{
-        'common.product.detail.information.value.moreInformation' | translate
+      'common.product.detail.information.value.moreInformation' | translate
       }}
     </span>
     <span>
-      <a
-        class="text-primary mx-auto"
-        href="https://www.axonivy.com/marketplace/contact/?market_solutions= + {{
+      <a [lang]="languageService.selectedLanguage()" class="text-primary mx-auto" href="https://www.axonivy.com/marketplace/contact/?market_solutions= + {{
           productDetail.id
         }}">
         {{ 'common.product.detail.information.value.contactUs' | translate }}
       </a>
     </span>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail-information-tab/product-detail-information-tab.component.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail-information-tab/product-detail-information-tab.component.ts
index 8c8ca8822..5d7bb86dc 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail-information-tab/product-detail-information-tab.component.ts
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail-information-tab/product-detail-information-tab.component.ts
@@ -1,7 +1,8 @@
 import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { ProductDetail } from '../../../../shared/models/product-detail.model';
+import { LanguageService } from '../../../../core/services/language/language.service';
 
 @Component({
   selector: 'app-product-detail-information-tab',
@@ -15,4 +16,6 @@ export class ProductDetailInformationTabComponent {
   productDetail!: ProductDetail;
   @Input()
   selectedVersion!: string;
+
+  languageService = inject(LanguageService);
 }
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail-maven-content/product-detail-maven-content.component.html b/marketplace-ui/src/app/modules/product/product-detail/product-detail-maven-content/product-detail-maven-content.component.html
index ef973f8cf..15e185a93 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail-maven-content/product-detail-maven-content.component.html
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail-maven-content/product-detail-maven-content.component.html
@@ -1,4 +1,4 @@
-<p [innerHTML]="'common.product.detail.maven.description' | translate"></p>
+<p [lang]="languageService.selectedLanguage()" [innerHTML]="'common.product.detail.maven.description' | translate"></p>
 <code>
   &lt;!-- {{ productModuleContent.name }} --&gt;
   <br />
@@ -17,4 +17,4 @@
   &nbsp;&nbsp;&lt;type&gt;{{ productModuleContent.type }}&lt;/type&gt;
   <br />
   &lt;/dependency&gt;
-</code>
+</code>
\ No newline at end of file
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail-maven-content/product-detail-maven-content.component.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail-maven-content/product-detail-maven-content.component.ts
index 9d46efffb..a645e68e9 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail-maven-content/product-detail-maven-content.component.ts
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail-maven-content/product-detail-maven-content.component.ts
@@ -1,6 +1,7 @@
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { ProductModuleContent } from '../../../../shared/models/product-module-content.model';
+import { LanguageService } from '../../../../core/services/language/language.service';
 
 @Component({
   selector: 'app-product-detail-maven-content',
@@ -14,4 +15,6 @@ export class ProductDetailMavenContentComponent {
   productModuleContent!: ProductModuleContent;
   @Input()
   selectedVersion!: string;
+
+  languageService = inject(LanguageService);
 }
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.html b/marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.html
index 28d71be0a..ee74b0136 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.html
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.html
@@ -1,11 +1,12 @@
-<button class="btn btn__install flex-grow-1" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true"
-  [attr.data-bs-title]="getInstallationTooltipText()" (click)="onUpdateInstallationCountForDesigner()"
-  data-bs-custom-class="custom-tooltip" [ngClass]="themeService.isDarkMode() ? 'btn-light' : 'btn-primary'">
+<button [lang]="languageService.selectedLanguage()" class="btn btn__install flex-grow-1" data-bs-toggle="tooltip"
+  data-bs-placement="bottom" data-bs-html="true" [attr.data-bs-title]="getInstallationTooltipText()"
+  (click)="onUpdateInstallationCountForDesigner()" data-bs-custom-class="custom-tooltip"
+  [ngClass]="themeService.isDarkMode() ? 'btn-light' : 'btn-primary'">
   {{ 'common.product.detail.install.buttonLabel' | translate }}
 </button>
 @if(!isDesignerEnvironment()) {
-<button class="btn btn__download btn-secondary primary-bg flex-grow-1" type="button"
-  (click)="onShowVersionAndArtifact()" aria-expanded="false">
+<button [lang]="languageService.selectedLanguage()" class="btn btn__download btn-secondary primary-bg flex-grow-1"
+  type="button" (click)="onShowVersionAndArtifact()" aria-expanded="false">
   {{ 'common.product.detail.download.buttonLabel' | translate }}
 </button>
 }
@@ -15,7 +16,7 @@
   <div class="up-arrow border__dropdown position-absolute"></div>
   <form>
     <div class="form-group">
-      <label for="artifacts-selector" class="form-label fs-md text-primary">
+      <label for="artifacts-selector" [lang]="languageService.selectedLanguage()" class="form-label fs-md text-primary">
         {{
         'common.product.detail.download.artifactSelector.label' | translate
         }}
@@ -31,7 +32,8 @@
       </select>
     </div>
     <div class="form-group">
-      <label for="verions-selector" class="form-label mt-2 fs-md text-primary">
+      <label for="verions-selector" [lang]="languageService.selectedLanguage()"
+        class="form-label mt-2 fs-md text-primary">
         {{
         'common.product.detail.download.versionSelector.label' | translate
         }}
@@ -46,7 +48,8 @@
         }
       </select>
     </div>
-    <a href="#" class="dev-versions__toggle primary-color text-decoration-none" (click)="onShowDevVersion($event)">
+    <a href="#" [lang]="languageService.selectedLanguage()"
+      class="dev-versions__toggle primary-color text-decoration-none" (click)="onShowDevVersion($event)">
       @if (isDevVersionsDisplayed()) {
       {{ 'common.product.detail.download.hideDevVersions' | translate }}
       } @else {
@@ -54,7 +57,7 @@
       }
     </a>
     <div class="form-group d-flex justify-content-end">
-      <button class="btn form-download__btn text-center"
+      <button [lang]="languageService.selectedLanguage()" class="btn form-download__btn text-center"
         [ngClass]="themeService.isDarkMode() ? 'btn-light' : 'btn-primary'" (click)="downloadArifact()" type="button"
         id="downloadButton">
         {{ 'common.product.detail.download.buttonLabel' | translate }}
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.ts
index 5eaa2fe5c..882788acb 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.ts
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.ts
@@ -18,6 +18,7 @@ import { Artifact } from '../../../../shared/models/vesion-artifact.model';
 import { Tooltip } from 'bootstrap';
 import { ProductDetailService } from '../product-detail.service';
 import { RoutingQueryParamService } from '../../../../shared/services/routing.query.param.service';
+import { LanguageService } from '../../../../core/services/language/language.service';
 
 const delayTimeBeforeHideMessage = 2000;
 @Component({
@@ -49,6 +50,7 @@ export class ProductDetailVersionActionComponent implements AfterViewInit {
   productService = inject(ProductService);
   productDetailService = inject(ProductDetailService);
   elementRef = inject(ElementRef);
+  languageService = inject(LanguageService);
 
   ngAfterViewInit() {
     const tooltipTriggerList = [].slice.call(
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html
index ce0c7134f..d0ab6f0d4 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html
@@ -10,33 +10,48 @@
             themeService.isDarkMode() ? 'text-light' : 'text-link-blue'
           ">
           &lt;
-          <span>{{ 'common.product.detail.backToMainPage' | translate }}</span>
+          <span [lang]="languageService.selectedLanguage()">
+            {{ 'common.product.detail.backToMainPage' | translate }}
+          </span>
         </a>
       </div>
       <div class="version-gap d-flex flex-column flex-lg-row">
         <div class="d-flex flex-column module-gap col-12 col-lg-8">
           <div class="d-flex">
             <div class="logo__image-container">
-              <img class="logo__image" [src]="productDetail().logoUrl" alt="" />
+              <img
+                [lang]="languageService.selectedLanguage()"
+                class="logo__image"
+                [src]="productDetail().logoUrl"
+                [alt]="
+                  productDetail().names
+                    | multilingualism: languageService.selectedLanguage()
+                " />
             </div>
-            <h1 class="product-title align-items-start default-cursor">
+            <h1
+              [lang]="languageService.selectedLanguage()"
+              class="product-title align-items-start default-cursor">
               {{
                 productDetail().names
                   | multilingualism: languageService.selectedLanguage()
               }}
             </h1>
           </div>
-          <div class="d-flex flex-row align-items-start module-gap default-cursor">
+          <div
+            class="d-flex flex-row align-items-start module-gap default-cursor">
             <div
               class="analysis-container d-flex flex-column align-items-start p-0">
               <app-product-star-rating-number
                 [isShowRateLink]="false"
                 [isShowTotalRatingNumber]="false" />
             </div>
-            <app-product-installation-count-action [currentInstallationCount]="installationCount"/>
+            <app-product-installation-count-action
+              [currentInstallationCount]="installationCount" />
             <div
               class="analysis-container d-flex flex-column align-items-start p-0">
-              <h4 class="analysis-title text-secondary mb-0">
+              <h4
+                [lang]="languageService.selectedLanguage()"
+                class="analysis-title text-secondary mb-0">
                 {{ 'common.product.detail.type' | translate }}
               </h4>
               <h2 class="product-analysis mb-0">
@@ -52,8 +67,8 @@ <h4 class="analysis-title text-primary text-capitalize mb-0">
         <div class="d-flex flex-column col-12 col-lg-4">
           <div class="d-flex text-lg-end mt-md-3 m-sm-0">
             <app-product-version-action
-            class="w-100 d-flex d-lg-block text-end"
-            (installationCount)="receiveInstallationCountData($event)"
+              class="w-100 d-flex d-lg-block text-end"
+              (installationCount)="receiveInstallationCountData($event)"
               [(selectedVersion)]="selectedVersion!"
               [productId]="productDetail().id"
               (selectedVersionChange)="
@@ -75,6 +90,7 @@ <h4 class="analysis-title text-primary text-capitalize mb-0">
                   ngbNavItem
                   class="nav-item d-flex flex-row position-relative border-bottom-1 p-2 justify-content-center align-items-start">
                   <a
+                    [lang]="languageService.selectedLanguage()"
                     ngbNavLink
                     class="nav-link border-0 bg-transparent"
                     [class.active]="tab.activeClass"
@@ -104,10 +120,14 @@ <h4 class="analysis-title text-primary text-capitalize mb-0">
                 id="tab-group-dropdown"
                 (change)="onTabChange($event)"
                 (click)="onTabDropdownShown()"
-                [ngClass]="{'indicator-arrow__up': isTabDropdownShown()}">
+                [ngClass]="{ 'indicator-arrow__up': isTabDropdownShown() }">
                 @for (tab of detailTabs; track $index) {
                   @if (getContent(tab.value)) {
-                    <option class="w-100" [value]="tab.value" [id]="tab.tabId">
+                    <option
+                      [lang]="languageService.selectedLanguage()"
+                      class="w-100"
+                      [value]="tab.value"
+                      [id]="tab.tabId">
                       {{ tab.label | translate }}
                     </option>
                   }
@@ -148,8 +168,12 @@ <h4 class="analysis-title text-primary text-capitalize mb-0">
             role="tabpanel"
             aria-labelledby="description-tab">
             <markdown
+              [lang]="languageService.selectedLanguage()"
               class="readme-content"
-              [data]="productModuleContent().description! | multilingualism: languageService.selectedLanguage()"></markdown>
+              [data]="
+                productModuleContent().description!
+                  | multilingualism: languageService.selectedLanguage()
+              "></markdown>
           </div>
           <div
             class="tab-pane fade"
@@ -209,14 +233,18 @@ <h4 class="analysis-title text-primary text-capitalize mb-0">
             height="72"
             alt="Message Star" />
           <p class="rate-empty-text">
-            <span>{{ 'common.feedback.noFeedbackMessage1' | translate }}</span>
+            <span [lang]="languageService.selectedLanguage()">
+              {{ 'common.feedback.noFeedbackMessage1' | translate }}
+            </span>
             <br />
-            <span>{{ 'common.feedback.noFeedbackMessage2' | translate }}</span>
+            <span [lang]="languageService.selectedLanguage()">
+              {{ 'common.feedback.noFeedbackMessage2' | translate }}
+            </span>
           </p>
           <button
             class="btn border-0 btn-primary rate-connector-btn"
             (click)="onClickRateBtn()">
-            <h5 class="mb-0">
+            <h5 class="mb-0" [lang]="languageService.selectedLanguage()">
               {{ 'common.feedback.rateFeedbackBtnLabel' | translate }}
             </h5>
           </button>
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.scss b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.scss
index 688a50ff7..a17334e1f 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.scss
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.scss
@@ -57,6 +57,7 @@
   ul, li {
     font-size: 18px;
     font-weight: 400;
+    color: var(--ivy-text-primary-color);
   }
 
   ul, li {
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-installation-count-action/product-installation-count-action.component.html b/marketplace-ui/src/app/modules/product/product-detail/product-installation-count-action/product-installation-count-action.component.html
index 60b474ae8..98a1a2082 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-installation-count-action/product-installation-count-action.component.html
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-installation-count-action/product-installation-count-action.component.html
@@ -1,9 +1,9 @@
 <div class="analysis-container d-flex flex-column align-items-start p-0">
-  <h4 class="analysis-title text-secondary mb-0">
+  <h4 [lang]="languageService.selectedLanguage()" class="analysis-title text-secondary mb-0">
     {{ 'common.product.detail.installation' | translate }}
   </h4>
   <h2 class="product-analysis text-primary mb-0">{{this.currentInstallationCount}}</h2>
-  <h4 class="analysis-title text-primary mb-0">
+  <h4 [lang]="languageService.selectedLanguage()" class="analysis-title text-primary mb-0">
     {{ 'common.product.detail.times' | translate }}
   </h4>
-</div>
+</div>
\ No newline at end of file
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-installation-count-action/product-installation-count-action.component.ts b/marketplace-ui/src/app/modules/product/product-detail/product-installation-count-action/product-installation-count-action.component.ts
index 6b40a0e5a..dd7be48d5 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-installation-count-action/product-installation-count-action.component.ts
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-installation-count-action/product-installation-count-action.component.ts
@@ -1,5 +1,6 @@
-import {Component, Input} from '@angular/core';
+import {Component, inject, Input} from '@angular/core';
 import {TranslateModule} from "@ngx-translate/core";
+import { LanguageService } from '../../../../core/services/language/language.service';
 
 @Component({
   selector: 'app-product-installation-count-action',
@@ -14,4 +15,6 @@ import {TranslateModule} from "@ngx-translate/core";
 export class ProductInstallationCountActionComponent {
   @Input()
   currentInstallationCount!: number;
+
+  languageService = inject(LanguageService);
 }
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-star-rating-number/product-star-rating-number.component.html b/marketplace-ui/src/app/modules/product/product-detail/product-star-rating-number/product-star-rating-number.component.html
index a669dd5f7..6a211ed0e 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-star-rating-number/product-star-rating-number.component.html
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-star-rating-number/product-star-rating-number.component.html
@@ -1,9 +1,8 @@
 <div
   class="d-flex flex-column"
-  [class]="
-    isShowRateLink ? 'star-rating-min-width' : ''
-  ">
+  [class]="isShowRateLink ? 'star-rating-min-width' : ''">
   <h4
+    [lang]="languageService.selectedLanguage()"
     class="text-secondary review-label-detail-page"
     [class]="isShowRateLink ? '' : 'review-label-detail-page'"
     [style]="isShowRateLink ? 'margin-bottom: 0px' : 'margin-bottom: 10px'">
@@ -39,7 +38,10 @@ <h4 class="d-inline-block text-secondary mb-0">
     }
   </div>
   @if (isShowRateLink) {
-    <a class="rate-link mt-1" (click)="onClickRateLink()">
+    <a
+      [lang]="languageService.selectedLanguage()"
+      class="rate-link mt-1"
+      (click)="onClickRateLink()">
       {{ 'common.feedback.rateLinkLabel' | translate }}
     </a>
   }
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-star-rating-number/product-star-rating-number.component.ts b/marketplace-ui/src/app/modules/product/product-detail/product-star-rating-number/product-star-rating-number.component.ts
index 4516546ff..74413de3f 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-star-rating-number/product-star-rating-number.component.ts
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-star-rating-number/product-star-rating-number.component.ts
@@ -7,6 +7,7 @@ import {
 import { CommonModule } from '@angular/common';
 import { AuthService } from '../../../../auth/auth.service';
 import { ProductDetailService } from '../product-detail.service';
+import { LanguageService } from '../../../../core/services/language/language.service';
 
 @Component({
   selector: 'app-product-star-rating-number',
@@ -19,6 +20,7 @@ export class ProductStarRatingNumberComponent {
   productStarRatingService = inject(ProductStarRatingService);
   private readonly productDetailService = inject(ProductDetailService);
   private readonly authService = inject(AuthService);
+  languageService = inject(LanguageService);
 
   @Input() isShowRateLink = true;
   @Input() isShowTotalRatingNumber = true;
diff --git a/marketplace-ui/src/app/modules/product/product-filter/product-filter.component.html b/marketplace-ui/src/app/modules/product/product-filter/product-filter.component.html
index f63101c8b..b1f7f936f 100644
--- a/marketplace-ui/src/app/modules/product/product-filter/product-filter.component.html
+++ b/marketplace-ui/src/app/modules/product/product-filter/product-filter.component.html
@@ -1,15 +1,12 @@
 <div class="mt-5">
-  <p class="h3 mb-4">
+  <p [lang]="languageService.selectedLanguage()" class="h3 mb-4">
     {{ translateService.get('common.filter.label') | async }}
   </p>
   <div class="filter-container d-flex justify-content-between w-auto mb-4">
     <!-- Filter type -->
     <div class="filter-container__button d-none d-md-flex">
       @for (type of types; track $index) {
-      <div
-        (click)="onSelectType(type.value)"
-        class="filter-type border"
-        [ngClass]="{
+      <div (click)="onSelectType(type.value)" class="filter-type border" [ngClass]="{
             'border-light text-light': themeService.isDarkMode(),
             'border-dark text-dark': !themeService.isDarkMode(),
             'bg-light text-dark':
@@ -17,21 +14,17 @@
             'bg-primary border-0 text-light':
               selectedType === type.value && !themeService.isDarkMode()
           }">
-        <p>
+        <p [lang]="languageService.selectedLanguage()">
           {{ type.label | translate }}
         </p>
       </div>
       }
     </div>
     <div class="col-6 d-md-block d-md-none">
-      <select
-        [(ngModel)]="selectedType"
-        (ngModelChange)="onSelectType($event)"
-        class="form-select border-primary filter-type--select w-auto"
-        aria-label="sort"
-        name="sort">
+      <select [(ngModel)]="selectedType" (ngModelChange)="onSelectType($event)"
+        class="form-select border-primary filter-type--select w-auto" aria-label="sort" name="sort">
         @for (type of types; track $index) {
-        <option [value]="type.value">
+        <option [lang]="languageService.selectedLanguage()" [value]="type.value">
           {{ type.label | translate }}
         </option>
         }
@@ -39,19 +32,14 @@
     </div>
 
     <!-- Sort type -->
-    <div
-      class="col-6 col-md-4 d-flex sort-container justify-content-end align-items-end">
-      <h4 class="sort-container__label text-primary d-none d-lg-flex w-auto">
+    <div class="col-6 col-md-4 d-flex sort-container justify-content-end align-items-end">
+      <h4 [lang]="languageService.selectedLanguage()" class="sort-container__label text-primary d-none d-lg-flex w-auto">
         {{ translateService.get('common.sort.label') | async }}:
       </h4>
-      <select
-        [(ngModel)]="selectedSort"
-        (ngModelChange)="onSortChange()"
-        class="form-select text-primary border-primary sort-type w-50 ms-2"
-        aria-label="sort"
-        name="sort">
+      <select [(ngModel)]="selectedSort" (ngModelChange)="onSortChange()"
+        class="form-select text-primary border-primary sort-type w-50 ms-2" aria-label="sort" name="sort">
         @for (type of sorts; track $index) {
-        <option class="border-danger" [value]="type.value">
+        <option [lang]="languageService.selectedLanguage()" class="border-danger" [value]="type.value">
           {{ type.label | translate }}
         </option>
         }
@@ -62,18 +50,13 @@ <h4 class="sort-container__label text-primary d-none d-lg-flex w-auto">
   <!-- Search -->
   <div class="input-group mb-5">
     <div class="input-group-prepend">
-      <span
-        class="input-group-text text-primary bg-secondary h-100 border-0 rounded-end-0">
+      <span class="input-group-text text-primary bg-secondary h-100 border-0 rounded-end-0">
         <i class="bi bi-search"></i>
       </span>
     </div>
-    <input
-      [(ngModel)]="searchText"
-      (ngModelChange)="onSearchChanged($event)"
-      type="text"
-      class="form-control input__search bg-secondary border-0 rounded-start-0 ps-0 search-input"
+    <input autocomplete="on" [(ngModel)]="searchText" (ngModelChange)="onSearchChanged($event)" type="text"
+      [lang]="languageService.selectedLanguage()" class="form-control input__search bg-secondary border-0 rounded-start-0 ps-0 search-input"
       [placeholder]="translateService.get('common.search.placeholder') | async"
-      [ariaLabel]="translateService.get('common.search.placeholder') | async"
-      aria-describedby="search"/>
+      [ariaLabel]="translateService.get('common.search.placeholder') | async" aria-describedby="search" />
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/marketplace-ui/src/app/modules/product/product-filter/product-filter.component.ts b/marketplace-ui/src/app/modules/product/product-filter/product-filter.component.ts
index c2d9cfc66..b57b92246 100644
--- a/marketplace-ui/src/app/modules/product/product-filter/product-filter.component.ts
+++ b/marketplace-ui/src/app/modules/product/product-filter/product-filter.component.ts
@@ -6,6 +6,7 @@ import { ThemeService } from '../../../core/services/theme/theme.service';
 import { FILTER_TYPES, SORT_TYPES } from '../../../shared/constants/common.constant';
 import { TypeOption } from '../../../shared/enums/type-option.enum';
 import { SortOption } from '../../../shared/enums/sort-option.enum';
+import { LanguageService } from '../../../core/services/language/language.service';
 
 @Component({
   selector: 'app-product-filter',
@@ -28,6 +29,7 @@ export class ProductFilterComponent {
 
   themeService = inject(ThemeService);
   translateService = inject(TranslateService);
+  languageService = inject(LanguageService);
 
   onSelectType(type: TypeOption) {
     this.selectedType = type;
diff --git a/marketplace-ui/src/app/modules/product/product.component.html b/marketplace-ui/src/app/modules/product/product.component.html
index 337828546..f91611b02 100644
--- a/marketplace-ui/src/app/modules/product/product.component.html
+++ b/marketplace-ui/src/app/modules/product/product.component.html
@@ -1,7 +1,7 @@
 <div class="container">
   @if (!isRESTClient()) {
     <div class="row col-md-12 mt-8">
-      <h1 class="text-primary">
+      <h1 [lang]="languageService.selectedLanguage()" class="text-primary">
         {{ translateService.get('common.branch') | async }}
       </h1>
       <div class="d-sm-block col-md-6">
@@ -10,10 +10,11 @@ <h3 class="text-secondary">
         </h3>
       </div>
       <div class="d-sm-block col-md-6 align-items-center">
-        <h4 class="text-secondary">
+        <h4 [lang]="languageService.selectedLanguage()" class="text-secondary">
           {{ translateService.get('common.introduction.contribute') | async }}
         </h4>
         <h4
+          [lang]="languageService.selectedLanguage()"
           class="text-secondary"
           [innerHTML]="
             translateService.get('common.introduction.link') | async
@@ -28,29 +29,22 @@ <h4 class="text-secondary">
   }
 
   @if (products().length > 0) {
-    <div class="row product-container">
-      @for (product of products(); track $index) {
-        <div
-          (click)="viewProductDetail(product.id, '')"
-          class="col-sm-12 col-md-6 col-lg-4 col-xxl-3 mt-2 mb-2">
-          <app-product-card [product]="product"></app-product-card>
-        </div>
-      }
+  <div class="row product-container">
+    @for (product of products(); track $index) {
+    <div (click)="viewProductDetail(product.id, '')" class="col-sm-12 col-md-6 col-lg-4 col-xxl-3 mt-2 mb-2">
+      <app-product-card [product]="product" [tabIndex]="$index"></app-product-card>
     </div>
+    }
+  </div>
   } @else {
-    <div
-      class="d-flex flex-column align-items-center justify-content-center w-100">
-      <div class="not-found-result w-100">
-        <img
-          src="/assets/images/misc/search-off.svg"
-          alt="Search not found"
-          class="no-result-image mx-auto d-block" />
-        <div
-          class="h5 text-center not-found-text"
-          [innerHTML]="'common.nothingFound' | translate"></div>
-      </div>
+  <div class="d-flex flex-column align-items-center justify-content-center w-100">
+    <div class="not-found-result w-100">
+      <img src="/assets/images/misc/search-off.svg" alt="Search not found" class="no-result-image mx-auto d-block" />
+      <div [lang]="languageService.selectedLanguage()" class="h5 text-center not-found-text"
+        [innerHTML]="'common.nothingFound' | translate"></div>
     </div>
+  </div>
   }
 
   <div #observer class="observer"></div>
-</div>
+</div>
\ No newline at end of file
diff --git a/marketplace-ui/src/app/shared/components/footer/footer.component.html b/marketplace-ui/src/app/shared/components/footer/footer.component.html
index 6c8b11172..42daf8830 100644
--- a/marketplace-ui/src/app/shared/components/footer/footer.component.html
+++ b/marketplace-ui/src/app/shared/components/footer/footer.component.html
@@ -1,30 +1,25 @@
 <!-- Footer -->
 <div class="mt-5">
   <!-- Section: Ivy Information -->
-  <section
-    class="d-flex justify-content-lg-between justify-content-center py-4 border-bottom">
+  <section class="d-flex justify-content-lg-between justify-content-center py-4 border-bottom">
     <div class="flex-column text-center text-lg-start">
       <!-- Left -->
       <div class="logo">
-        <img
-          class="logo__image"
-          [src]="
+        <img class="logo__image" [src]="
             themeService.isDarkMode()
               ? '/assets/images/misc/axonivy-logo.svg'
               : '/assets/images/misc/axonivy-logo-black.svg'
-          "
-          alt="Axon Ivy"/>
+          " alt="Axon Ivy" />
       </div>
       <div
-        class="text-secondary default-cursor"
+        [lang]="languageService.selectedLanguage()" class="text-secondary default-cursor"
         [innerHtml]="'common.footer.newVersionsInfo' | translate"></div>
       <div class="button-container flex-row">
-        <button
-          class="btn btn-primary border-0"
+        <button [lang]="languageService.selectedLanguage()" class="btn btn-primary border-0"
           [ngClass]="themeService.isDarkMode() ? 'text-dark' : 'text-light'">
           {{ 'common.footer.downloadLatestLTSVersion' | translate }}
         </button>
-        <button class="btn btn-secondary m-2">
+        <button [lang]="languageService.selectedLanguage()" class="btn btn-secondary m-2">
           {{ 'common.footer.downloadLatestDevVersion' | translate }}
         </button>
       </div>
@@ -37,12 +32,12 @@
           @for (item of navItems; track $index) {
           <li class="nav-item">
             <a
+              [lang]="languageService.selectedLanguage()"
               class="nav-link"
               [href]="item.link"
               [ngClass]="
                   item.link === '/' ? 'text-primary fw-bold' : 'text-muted'
-                "
-              aria-current="page">
+                " aria-current="page">
               {{ item.label | translate | uppercase }}
             </a>
           </li>
@@ -52,15 +47,14 @@
     </div>
   </section>
   <!-- Section: Policy & Social Media -->
-  <section
-    class="d-flex flex-lg-row flex-column justify-content-between py-4">
+  <section class="d-flex flex-lg-row flex-column justify-content-between py-4">
     <div class="navbar navbar-expand-xl align-self-md-center w-md-100">
       <!-- Left -->
       <div
         class="flex-row navbar-nav me-auto mb-lg-0 flex-wrap w-md-100 justify-content-center text-center footer__ivy-policy">
         @for (ivyFooterLink of ivyFooterLinks; track $index) {
         <div class="link--left" [class]="ivyFooterLink.containerStyleClass">
-          <a class="nav-link text-secondary h5-text" aria-current="page" [href]="ivyFooterLink.link">
+          <a [lang]="languageService.selectedLanguage()" class="nav-link text-secondary h5-text" aria-current="page" [href]="ivyFooterLink.link">
             {{ ivyFooterLink.label | translate }}
           </a>
         </div>
@@ -68,17 +62,15 @@
       </div>
     </div>
 
-    <div
-      class="d-flex align-items-center justify-content-center footer__social-media">
+    <div class="d-flex align-items-center justify-content-center footer__social-media">
       <div class="navbar navbar-expand-lg">
         <ul class="navbar-nav me-auto mb-lg-0 flex-row">
           @for (link of socialMediaLinks; track $index) {
           <li>
             <a class="nav-link" aria-current="page" [href]="link.url">
-                <span
-                  class="d-flex justify-content-center align-items-center link-icon">
-                  <i [class]="link.styleClass" class="w-100 h-100"></i>
-                </span>
+              <span class="d-flex justify-content-center align-items-center link-icon">
+                <i [class]="link.styleClass" class="w-100 h-100"></i>
+              </span>
             </a>
           </li>
           }
@@ -87,4 +79,4 @@
     </div>
   </section>
 </div>
-<!-- Footer -->
+<!-- Footer -->
\ No newline at end of file
diff --git a/marketplace-ui/src/app/shared/components/footer/footer.component.ts b/marketplace-ui/src/app/shared/components/footer/footer.component.ts
index 3ae857a18..0c16ce98f 100644
--- a/marketplace-ui/src/app/shared/components/footer/footer.component.ts
+++ b/marketplace-ui/src/app/shared/components/footer/footer.component.ts
@@ -4,6 +4,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { ThemeService } from '../../../core/services/theme/theme.service';
 import { IVY_FOOTER_LINKS, NAV_ITEMS, SOCIAL_MEDIA_LINK } from '../../constants/common.constant';
 import { NavItem } from '../../models/nav-item.model';
+import { LanguageService } from '../../../core/services/language/language.service';
 
 @Component({
   selector: 'app-footer',
@@ -14,6 +15,7 @@ import { NavItem } from '../../models/nav-item.model';
 })
 export class FooterComponent {
   themeService = inject(ThemeService);
+  languageService = inject(LanguageService);
   socialMediaLinks = SOCIAL_MEDIA_LINK;
   navItems: NavItem[] = NAV_ITEMS;
   ivyFooterLinks = IVY_FOOTER_LINKS;
diff --git a/marketplace-ui/src/app/shared/components/header/navigation/navigation.component.html b/marketplace-ui/src/app/shared/components/header/navigation/navigation.component.html
index 1b4f513c6..0b2fb3815 100644
--- a/marketplace-ui/src/app/shared/components/header/navigation/navigation.component.html
+++ b/marketplace-ui/src/app/shared/components/header/navigation/navigation.component.html
@@ -2,14 +2,11 @@
   <!-- Mobile Search Input -->
   <div class="input-group d-lg-none header-mobile__search bg-secondary">
     <div class="input-group-prepend">
-      <span
-        class="input-group-text h-100 rounded-start-4 rounded-end-0 border-0">
+      <span class="input-group-text h-100 rounded-start-4 rounded-end-0 border-0">
         <i class="bi bi-search"></i>
       </span>
     </div>
-    <input
-      class="form-control bg-secondary me-2 border-0"
-      type="search"
+    <input autocomplete="on" [lang]="languageService.selectedLanguage()" class="form-control bg-secondary me-2 border-0" type="search"
       [placeholder]="translateService.get('common.search.placeholder') | async"
       [ariaLabel]="translateService.get('common.search.placeholder') | async" />
   </div>
@@ -17,20 +14,14 @@
   <!-- Navigation -->
   <ul class="navbar-nav">
     @for (item of navItems; track $index) {
-      <li class="nav-item">
-        <a
-          class="nav-link"
-          [ngClass]="
+    <li class="nav-item">
+      <a [lang]="languageService.selectedLanguage()" class="nav-link" [ngClass]="
             item.link === '/' ? 'text-primary fw-bold active' : 'text-secondary'
-          "
-          aria-current="page"
-          [href]="item.link">
-          {{ item.label | translate }}
-        </a>
-        <div
-          class="active-line d-none"
-          [ngClass]="{ 'd-lg-block': item.link === '/' }"></div>
-      </li>
+          " aria-current="page" [href]="item.link">
+        {{ item.label | translate }}
+      </a>
+      <div class="active-line d-none" [ngClass]="{ 'd-lg-block': item.link === '/' }"></div>
+    </li>
     }
   </ul>
-</div>
+</div>
\ No newline at end of file
diff --git a/marketplace-ui/src/app/shared/components/header/navigation/navigation.component.ts b/marketplace-ui/src/app/shared/components/header/navigation/navigation.component.ts
index 858d48ce7..a8db15d56 100644
--- a/marketplace-ui/src/app/shared/components/header/navigation/navigation.component.ts
+++ b/marketplace-ui/src/app/shared/components/header/navigation/navigation.component.ts
@@ -3,6 +3,7 @@ import { Component, inject, Input } from '@angular/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { NAV_ITEMS } from '../../../constants/common.constant';
 import { NavItem } from '../../../models/nav-item.model';
+import { LanguageService } from '../../../../core/services/language/language.service';
 
 @Component({
   selector: 'app-navigation',
@@ -15,4 +16,5 @@ export class NavigationComponent {
   @Input() navItems: NavItem[] = NAV_ITEMS;
 
   translateService = inject(TranslateService);
+  languageService = inject(LanguageService);
 }
diff --git a/marketplace-ui/src/app/shared/components/header/search-bar/search-bar.component.html b/marketplace-ui/src/app/shared/components/header/search-bar/search-bar.component.html
index 38b2df478..fad70609a 100644
--- a/marketplace-ui/src/app/shared/components/header/search-bar/search-bar.component.html
+++ b/marketplace-ui/src/app/shared/components/header/search-bar/search-bar.component.html
@@ -4,33 +4,27 @@
   <li>
     <div class="input-group bg-secondary">
       <div class="input-group-prepend">
-          <span class="input-group-text text-primary h-100 border-0 bg-secondary">
-            <i class="bi bi-search"></i>
-          </span>
+        <span class="input-group-text text-primary h-100 border-0 bg-secondary">
+          <i class="bi bi-search"></i>
+        </span>
       </div>
-      <input
-        class="form-control bg-secondary me-2 border-0 header__search-input bg-secondary"
-        type="input"
-        [placeholder]="
+      <input autocomplete="on" [lang]="languageService.selectedLanguage()" class="form-control bg-secondary me-2 border-0 header__search-input bg-secondary"
+        type="input" [placeholder]="
             translateService.get('common.search.placeholder') | async
-          "
-        [ariaLabel]="
+          " [ariaLabel]="
             translateService.get('common.search.placeholder') | async
-          "/>
+          " />
 
-      <div
-        class="input-group-prepend search__cancel-button"
-        (click)="onHideSearch()">
-          <span class="input-group-text text-primary h-100 border-0 bg-secondary">
-            <i class="bi bi-x-lg"></i>
-          </span>
+      <div class="input-group-prepend search__cancel-button" (click)="onHideSearch()">
+        <span class="input-group-text text-primary h-100 border-0 bg-secondary">
+          <i class="bi bi-x-lg"></i>
+        </span>
       </div>
     </div>
   </li>
   } @else {
   <!-- Language Selection -->
-  <div
-    class="d-flex flex-row-reverse flex-lg-row justify-content-between border-top-md-gray header__button">
+  <div class="d-flex flex-row-reverse flex-lg-row justify-content-between border-top-md-gray header__button">
     <li class="header__button--right">
       <app-language-selection></app-language-selection>
     </li>
@@ -46,19 +40,16 @@
     @if (isSearchBarDisplayed()) {
     <div class="header-desktop__search">
       <div class="input-group-prepend h-100">
-            <span class="input-group-text border-0 bg-secondary">
-              <i class="bi bi-search"></i>
-            </span>
+        <span class="input-group-text border-0 bg-secondary">
+          <i class="bi bi-search"></i>
+        </span>
       </div>
-      <input
-        class="form-control bg-secondary me-2 border-0 header__search-input bg-secondary"
-        type="search"
-        [placeholder]="
+      <input autocomplete="on" [lang]="languageService.selectedLanguage()" class="form-control bg-secondary me-2 border-0 header__search-input bg-secondary"
+        type="search" [placeholder]="
               translateService.get('common.search.placeholder') | async
-            "
-        [ariaLabel]="
+            " [ariaLabel]="
               translateService.get('common.search.placeholder') | async
-            "/>
+            " />
     </div>
     } @else {
     <div class="search-icon">
@@ -69,13 +60,13 @@
 
   <!-- Download Latest LTS Version -->
   <li>
-    <button
+    <button [lang]="languageService.selectedLanguage()"
       class="btn btn-primary header__download-button border-0 w-100 rounded-3">
       {{ 'common.header.download' | translate }}
       <span>
-          <i class="bi bi-chevron-down"></i>
-        </span>
+        <i class="bi bi-chevron-down"></i>
+      </span>
     </button>
   </li>
   }
-</ul>
+</ul>
\ No newline at end of file
diff --git a/marketplace-ui/src/app/shared/components/header/search-bar/search-bar.component.ts b/marketplace-ui/src/app/shared/components/header/search-bar/search-bar.component.ts
index caf326ec2..fd530437b 100644
--- a/marketplace-ui/src/app/shared/components/header/search-bar/search-bar.component.ts
+++ b/marketplace-ui/src/app/shared/components/header/search-bar/search-bar.component.ts
@@ -3,6 +3,7 @@ import { Component, ElementRef, HostListener, inject, signal } from '@angular/co
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { LanguageSelectionComponent } from '../language-selection/language-selection.component';
 import { ThemeSelectionComponent } from '../theme-selection/theme-selection.component';
+import { LanguageService } from '../../../../core/services/language/language.service';
 
 @Component({
   selector: 'app-search-bar',
@@ -21,6 +22,7 @@ export class SearchBarComponent {
 
   translateService = inject(TranslateService);
   elementRef = inject(ElementRef);
+  languageService = inject(LanguageService);
 
   @HostListener('document:click', ['$event'])
   handleClickOutside(event: MouseEvent) {
diff --git a/marketplace-ui/src/assets/scss/custom-style.scss b/marketplace-ui/src/assets/scss/custom-style.scss
index 78961f4cb..b9a1c1633 100644
--- a/marketplace-ui/src/assets/scss/custom-style.scss
+++ b/marketplace-ui/src/assets/scss/custom-style.scss
@@ -62,8 +62,8 @@ p {
   --ivy-active-color: #{$ivyPrimaryColorLight};
   --ivy-link-corlor: #{$ivyPrimaryColorLight};
   --ivy-text-normal-color: #{$ivyNormalTextColorLight};
-  --ivy-text-primary-color: $ivyPrimaryTextColorLight;
-  --ivy-text-secondary-color: $ivySecondaryTextLight;
+  --ivy-text-primary-color: #{$ivyPrimaryTextColorLight};
+  --ivy-text-secondary-color: #{$ivySecondaryTextLight};
   --ivy-border-color: #{$ivySecondaryButtonHoverLight};
   --ivy-textarea-background-color: #FAFAFA;
   --header-border-color: #ebebeb;
@@ -256,11 +256,6 @@ p {
   cursor: pointer;
 }
 
-*:focus {
-  box-shadow: none !important;
-  outline: none !important;
-}
-
 .card {
   padding: 20px;
   margin: 0 32px 8px 0;