diff --git a/API/Controllers/LocaleController.cs b/API/Controllers/LocaleController.cs
index ef79533ef8..13d4f6ca97 100644
--- a/API/Controllers/LocaleController.cs
+++ b/API/Controllers/LocaleController.cs
@@ -22,7 +22,6 @@ public LocaleController(IUnitOfWork unitOfWork, ILocalizationService localizatio
     [HttpGet]
     public ActionResult<IEnumerable<string>> GetAllLocales()
     {
-        // TODO: cache this
         var languages = _localizationService.GetLocales().Select(c => new CultureInfo(c)).Select(c =>
             new LanguageDto()
             {
diff --git a/UI/Web/src/app/_single-module/scrobble-event-type.pipe.ts b/UI/Web/src/app/_single-module/scrobble-event-type.pipe.ts
index 36da355220..ad860276c7 100644
--- a/UI/Web/src/app/_single-module/scrobble-event-type.pipe.ts
+++ b/UI/Web/src/app/_single-module/scrobble-event-type.pipe.ts
@@ -1,5 +1,6 @@
-import { Pipe, PipeTransform } from '@angular/core';
+import {inject, Pipe, PipeTransform} from '@angular/core';
 import {ScrobbleEventType} from "../_models/scrobbling/scrobble-event";
+import {TranslocoPipe, TranslocoService} from "@ngneat/transloco";
 
 @Pipe({
   name: 'scrobbleEventType',
@@ -7,13 +8,20 @@ import {ScrobbleEventType} from "../_models/scrobbling/scrobble-event";
 })
 export class ScrobbleEventTypePipe implements PipeTransform {
 
+  translocoService = inject(TranslocoService);
+
   transform(value: ScrobbleEventType): string {
     switch (value) {
-      case ScrobbleEventType.ChapterRead: return 'Reading Progress';
-      case ScrobbleEventType.ScoreUpdated: return 'Rating Update';
-      case ScrobbleEventType.AddWantToRead: return 'Want To Read: Add';
-      case ScrobbleEventType.RemoveWantToRead: return 'Want To Read: Remove';
-      case ScrobbleEventType.Review: return 'Review update';
+      case ScrobbleEventType.ChapterRead:
+        return this.translocoService.translate('scrobble-event-type-pipe.chapter-read');
+      case ScrobbleEventType.ScoreUpdated:
+        return this.translocoService.translate('scrobble-event-type-pipe.score-updated');
+      case ScrobbleEventType.AddWantToRead:
+        return this.translocoService.translate('scrobble-event-type-pipe.want-to-read-add');
+      case ScrobbleEventType.RemoveWantToRead:
+        return this.translocoService.translate('scrobble-event-type-pipe.want-to-read-remove');
+      case ScrobbleEventType.Review:
+        return this.translocoService.translate('scrobble-event-type-pipe.review');
     }
   }
 
diff --git a/UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.html b/UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.html
index bfbdf78e28..43c0f5c669 100644
--- a/UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.html
+++ b/UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.html
@@ -1,51 +1,50 @@
-<h5>Scrobble History</h5>
-<p>Here you will find any scrobble events linked with your account. In order for events to exist, you must have an active
-  scrobble provider configured. All events that have been processed will clear after a month. If there are non-processed events, it
-  is likely these cannot form matches upstream. Please reach out to your admin to get them corrected.</p>
-<div class="row g-0 mb-2">
-  <div class="col-md-10">
-    <form [formGroup]="formGroup">
-      <div class="form-group pe-1">
-        <label for="filter">Filter</label>
-        <input id="filter" type="text" class="form-control" formControlName="filter" autocomplete="off"/>
-      </div>
-    </form>
+<ng-container *transloco="let t; read:'user-scrobble-history'">
+  <h5>{{t('title')}}</h5>
+  <p>{{t('description')}}</p>
+  <div class="row g-0 mb-2">
+    <div class="col-md-10">
+      <form [formGroup]="formGroup">
+        <div class="form-group pe-1">
+          <label for="filter">{{t('filter-label')}}</label>
+          <input id="filter" type="text" class="form-control" formControlName="filter" autocomplete="off"/>
+        </div>
+      </form>
+    </div>
+    <div class="col-md-2 mt-4">
+      <ngb-pagination *ngIf="pagination"
+                      [(page)]="pagination.currentPage"
+                      [pageSize]="pagination.itemsPerPage"
+                      [collectionSize]="pagination.totalItems"
+                      (pageChange)="onPageChange($event)"
+      ></ngb-pagination>
+    </div>
   </div>
-  <div class="col-md-2 mt-4">
-    <ngb-pagination *ngIf="pagination"
-                    [(page)]="pagination.currentPage"
-                    [pageSize]="pagination.itemsPerPage"
-                    [collectionSize]="pagination.totalItems"
-                    (pageChange)="onPageChange($event)"
-    ></ngb-pagination>
-  </div>
-</div>
   <table class="table table-striped table-hover table-sm scrollable">
     <thead>
     <tr>
       <th scope="col" sortable="created" (sort)="updateSort($event)">
-        Created
+        {{t('created-header')}}
       </th>
       <th scope="col" sortable="lastModified" (sort)="updateSort($event)" direction="desc">
-        Last Modified
+        {{t('last-modified-header')}}
       </th>
       <th scope="col">
-        Type
+        {{t('type-header')}}
       </th>
       <th scope="col" sortable="seriesName" (sort)="updateSort($event)">
-        Series
+        {{t('series-header')}}
       </th>
       <th scope="col">
-        Data
+        {{t('data-header')}}
       </th>
       <th scope="col">
-        Is Processed
+        {{t('is-processed-header')}}
       </th>
     </tr>
     </thead>
     <tbody>
     <tr *ngIf="events.length === 0">
-      <td colspan="6">No Data</td>
+      <td colspan="6">{{t('no-data')}}/td>
     </tr>
     <tr *ngFor="let item of events; let idx = index;">
       <td>
@@ -63,22 +62,24 @@ <h5>Scrobble History</h5>
       <td>
         <ng-container [ngSwitch]="item.scrobbleEventType">
           <ng-container *ngSwitchCase="ScrobbleEventType.ChapterRead">
-            Volume {{item.volumeNumber}} Chapter {{item.chapterNumber}}
+            {{t('volume-and-chapter-num', {v: item.volumeNumber, c: item.chapterNumber})}}
           </ng-container>
           <ng-container *ngSwitchCase="ScrobbleEventType.ScoreUpdated">
-            Rating {{item.rating}}
+            {{t('rating', {r: item.rating})}}
           </ng-container>
           <ng-container *ngSwitchDefault>
-            Not Applicable
+            {{t('not-applicable')}}
           </ng-container>
         </ng-container>
       </td>
       <td>
         <i class="fa-regular fa-circle icon" aria-hidden="true" *ngIf="!item.isProcessed"></i>
         <i class="fa-solid fa-check-circle icon" aria-hidden="true" *ngIf="item.isProcessed"></i>
-        <span class="visually-hidden" attr.aria-labelledby="scrobble-history--{{idx}}">{{item.isProcessed ? 'Processed' : 'Not Processed'}}</span>
+        <span class="visually-hidden" attr.aria-labelledby="scrobble-history--{{idx}}">
+          {{item.isProcessed ? t('processed') : t('not-processed')}}
+        </span>
       </td>
     </tr>
     </tbody>
   </table>
-
+</ng-container>
diff --git a/UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.ts b/UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.ts
index cd8822b740..41268d93cf 100644
--- a/UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.ts
+++ b/UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.ts
@@ -2,21 +2,21 @@ import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, injec
 import {CommonModule} from '@angular/common';
 
 import {ScrobblingService} from "../../_services/scrobbling.service";
-import {shareReplay} from "rxjs";
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 import {ScrobbleEvent, ScrobbleEventType} from "../../_models/scrobbling/scrobble-event";
 import {ScrobbleEventTypePipe} from "../scrobble-event-type.pipe";
 import {NgbPagination} from "@ng-bootstrap/ng-bootstrap";
 import {ScrobbleEventSortField} from "../../_models/scrobbling/scrobble-event-filter";
-import {debounceTime, map, take, tap} from "rxjs/operators";
+import {debounceTime, take} from "rxjs/operators";
 import {PaginatedResult, Pagination} from "../../_models/pagination";
 import {SortableHeader, SortEvent} from "../table/_directives/sortable-header.directive";
 import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
+import {TranslocoModule} from "@ngneat/transloco";
 
 @Component({
   selector: 'app-user-scrobble-history',
   standalone: true,
-  imports: [CommonModule, ScrobbleEventTypePipe, NgbPagination, ReactiveFormsModule, SortableHeader],
+  imports: [CommonModule, ScrobbleEventTypePipe, NgbPagination, ReactiveFormsModule, SortableHeader, TranslocoModule],
   templateUrl: './user-scrobble-history.component.html',
   styleUrls: ['./user-scrobble-history.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/UI/Web/src/assets/langs/en.json b/UI/Web/src/assets/langs/en.json
index f4606be800..bfaddbad38 100644
--- a/UI/Web/src/assets/langs/en.json
+++ b/UI/Web/src/assets/langs/en.json
@@ -27,5 +27,36 @@
         "cancel": "Cancel",
         "saving": "Saving...",
         "update": "Update"
+    },
+
+    "user-scrobble-history": {
+        "title": "Scrobble History",
+        "description": "Here you will find any scrobble events linked with your account. In order for events to exist, you must have an active\n  scrobble provider configured. All events that have been processed will clear after a month. If there are non-processed events, it\n  is likely these cannot form matches upstream. Please reach out to your admin to get them corrected.",
+        "filter-label": "Filter",
+        "created-header": "Created",
+        "last-modified-header": "Last Modified",
+        "type-header": "Type",
+        "series-header": "Series",
+        "data-header": "Data",
+        "is-processed-header": "Is Processed",
+        "no-data": "No Data",
+        "volume-and-chapter-num": "Volume {{v}} Chapter {{n}}",
+        "rating": "Rating {{r}}",
+        "not-applicable": "Not Applicable",
+        "processed": "Processed",
+        "not-processed": "Not Processed"
+    },
+
+    "scrobble-event-type-pipe": {
+        "chapter-read": "Reading Progress",
+        "score-updated": "Rating Update",
+        "want-to-read-add": "Want to Read: Add",
+        "want-to-read-remove": "Want to Read: Remove",
+        "review": "Review update"
+    },
+
+    "common": {
+
     }
+
 }
diff --git a/UI/Web/src/httpLoader.ts b/UI/Web/src/httpLoader.ts
index def663b086..c473f3f3fb 100644
--- a/UI/Web/src/httpLoader.ts
+++ b/UI/Web/src/httpLoader.ts
@@ -1,33 +1,16 @@
 import {Injectable} from "@angular/core";
 import {HttpClient} from "@angular/common/http";
 import {Translation, TRANSLOCO_LOADER, TranslocoLoader} from "@ngneat/transloco";
-import {AccountService} from "./app/_services/account.service";
-import {distinct, of, switchMap} from "rxjs";
-import {catchError, distinctUntilChanged} from "rxjs/operators";
 
 
 @Injectable({ providedIn: 'root' })
 export class HttpLoader implements TranslocoLoader {
-  constructor(private http: HttpClient, private accountService: AccountService) {}
+  constructor(private http: HttpClient) {}
 
   getTranslation(langPath: string) {
-    console.log('loading language: ', langPath);
     const tokens = langPath.split('/');
-    console.log('\ttokens: ', tokens);
     return this.http.get<Translation>(`assets/langs/${tokens[tokens.length - 1]}.json`);
-    // return this.accountService.currentUser$.pipe(
-    //   distinctUntilChanged(),
-    //   switchMap(user => {
-    //     // Get the user's selected locale from the currentUser$.
-    //     // If no user or no locale is available, fallback to 'en'.
-    //     const locale = user?.preferences.locale || 'en';
-    //
-    //     // Load the translation file based on the user's locale (e.g., 'en.json', 'es.json', etc.).
-    //     return this.http.get<Translation>(`assets/langs/${locale}.json`).pipe(
-    //       catchError(() => of({})), // Return an empty object if the translation file is not found.
-    //     );
-    //   }),
-    // );
+
   }
 }
 
diff --git a/UI/Web/src/main.ts b/UI/Web/src/main.ts
index db638eea52..4eb5346285 100644
--- a/UI/Web/src/main.ts
+++ b/UI/Web/src/main.ts
@@ -57,7 +57,7 @@ bootstrapApplication(AppComponent, {
           provide: TRANSLOCO_CONFIG,
           useValue: {
             reRenderOnLangChange: true,
-            availableLangs: ['en', 'es'],
+            availableLangs: ['en', 'es'], // TODO: Derive this from the directory
             prodMode: environment.production,
             defaultLang: 'en',
             fallbackLang: 'en',