diff --git a/package-lock.json b/package-lock.json
index dbe7828..7075bd2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,8 @@
         "@angular/platform-browser": "^17.1.0",
         "@angular/platform-browser-dynamic": "^17.1.0",
         "@angular/router": "^17.1.0",
+        "@ngx-translate/core": "^15.0.0",
+        "@ngx-translate/http-loader": "^8.0.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.3"
@@ -40,6 +42,7 @@
         "karma-coverage": "~2.2.0",
         "karma-jasmine": "~5.1.0",
         "karma-jasmine-html-reporter": "~2.1.0",
+        "ngx-translate-testing": "^7.0.0",
         "typescript": "~5.3.2"
       }
     },
@@ -3124,6 +3127,33 @@
         "webpack": "^5.54.0"
       }
     },
+    "node_modules/@ngx-translate/core": {
+      "version": "15.0.0",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-15.0.0.tgz",
+      "integrity": "sha512-Am5uiuR0bOOxyoercDnAA3rJVizo4RRqJHo8N3RqJ+XfzVP/I845yEnMADykOHvM6HkVm4SZSnJBOiz0Anx5BA==",
+      "engines": {
+        "node": "^16.13.0 || >=18.10.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=16.0.0",
+        "@angular/core": ">=16.0.0",
+        "rxjs": "^6.5.5 || ^7.4.0"
+      }
+    },
+    "node_modules/@ngx-translate/http-loader": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/http-loader/-/http-loader-8.0.0.tgz",
+      "integrity": "sha512-SFMsdUcmHF5OdZkL1CHEoSAwbP5EbAOPTLLboOCRRoOg21P4GJx+51jxGdJeGve6LSKLf4Pay7BkTwmE6vxYlg==",
+      "engines": {
+        "node": "^16.13.0 || >=18.10.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=16.0.0",
+        "@angular/core": ">=16.0.0",
+        "@ngx-translate/core": ">=15.0.0",
+        "rxjs": "^6.5.5 || ^7.4.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -10544,6 +10574,21 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "node_modules/ngx-translate-testing": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-translate-testing/-/ngx-translate-testing-7.0.0.tgz",
+      "integrity": "sha512-Alp8QTMNem/rY7ygCjefz4aLN6ln4AlgtHeFJkLSK2YHQwD+Ab6zdDNOLF4QqXIhcEBSAMJKHrXEJqAySSx2fA==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^16.0.0-rc.0 || >=16.0.0",
+        "@angular/core": "^16.0.0-rc.0 || >=16.0.0",
+        "@ngx-translate/core": ">=15.0.0",
+        "rxjs": ">=7.4.0"
+      }
+    },
     "node_modules/nice-napi": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",
diff --git a/package.json b/package.json
index b14a24d..f00802c 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,8 @@
     "@angular/platform-browser": "^17.1.0",
     "@angular/platform-browser-dynamic": "^17.1.0",
     "@angular/router": "^17.1.0",
+    "@ngx-translate/core": "^15.0.0",
+    "@ngx-translate/http-loader": "^8.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
@@ -43,6 +45,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
+    "ngx-translate-testing": "^7.0.0",
     "typescript": "~5.3.2"
   }
 }
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 26a08cc..bba508b 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,6 +1,7 @@
 <div>
-  <h1>Hello, {{ title }}</h1>
+  <h1>{{ 'HELLO' | translate:{value: title} }}</h1>
   <p>Congratulations! Your app is running. 🎉</p>
+
+  <router-outlet />
 </div>
 
-<router-outlet />
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index 9041856..4e3d0aa 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -1,10 +1,18 @@
-import { TestBed } from '@angular/core/testing'
+import { ComponentFixtureAutoDetect, TestBed } from '@angular/core/testing'
 import { AppComponent } from './app.component'
+import { TranslateTestingModule } from 'ngx-translate-testing'
+import en from '../assets/i18n/en.json'
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AppComponent],
+      imports: [
+        AppComponent,
+        TranslateTestingModule
+          .withTranslations('en', en)
+          .withDefaultLanguage('en'),
+      ],
+      providers: [{ provide: ComponentFixtureAutoDetect, useValue: true }],
     }).compileComponents()
   })
 
@@ -22,7 +30,6 @@ describe('AppComponent', () => {
 
   it('should render title', () => {
     const fixture = TestBed.createComponent(AppComponent)
-    fixture.detectChanges()
     const compiled = fixture.nativeElement as HTMLElement
     expect(compiled.querySelector('h1')?.textContent).toContain('Hello, contracts-angular')
   })
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 02be0a0..f1a906a 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,10 +1,11 @@
 import { Component } from '@angular/core'
 import { RouterOutlet } from '@angular/router'
+import { TranslateModule } from '@ngx-translate/core'
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, TranslateModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
 })
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index bd93270..2218e27 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -1,8 +1,26 @@
-import { ApplicationConfig } from '@angular/core'
+import { ApplicationConfig, importProvidersFrom } from '@angular/core'
 import { provideRouter } from '@angular/router'
 
 import { routes } from './app.routes'
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core'
+import { HttpClient, provideHttpClient } from '@angular/common/http'
+import { TranslateHttpLoader } from '@ngx-translate/http-loader'
+
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http)
+}
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)],
+  providers: [
+    provideRouter(routes),
+    provideHttpClient(),
+    importProvidersFrom(TranslateModule.forRoot({
+      defaultLanguage: 'en',
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [HttpClient],
+      },
+    })),
+  ],
 }
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
new file mode 100644
index 0000000..4bb8718
--- /dev/null
+++ b/src/assets/i18n/en.json
@@ -0,0 +1,3 @@
+{
+    "HELLO": "Hello, {{value}}"
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index f37b67f..7c03b37 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,7 +22,8 @@
     "lib": [
       "ES2022",
       "dom"
-    ]
+    ],
+    "resolveJsonModule": true
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,