diff --git a/projects/test-app/src/app/app.component.html b/projects/test-app/src/app/app.component.html
index b1dbfb9..4a9190f 100644
--- a/projects/test-app/src/app/app.component.html
+++ b/projects/test-app/src/app/app.component.html
@@ -1,3 +1,5 @@
+<app-language-switch></app-language-switch>
+
 <div class="title">
     <h1>{{ 'demo.title' | translate }}</h1>
 </div>
diff --git a/projects/test-app/src/app/app.component.scss b/projects/test-app/src/app/app.component.scss
deleted file mode 100644
index 04798aa..0000000
--- a/projects/test-app/src/app/app.component.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-div
-{
-  font-family: Arial, Helvetica, sans-serif;
-  margin: 0;
-  padding: 1rem 2rem;
-}
-
-p, .translated
-{
-  background-color: #d4f3ff;
-  padding:0.5rem 1rem;
-}
-
-button {
-  background-color: #008CBA;
-  border: none;
-  color: white;
-  padding: 0.25rem 0.5rem;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 16px;
-  margin-left: 1rem;
-  border-radius: 0.5rem;
-  transition: background-color 0.3s ease;
-
-  &:hover {
-    background-color: #005f73;
-  }
-}
-
-.title {
-  background-color: #bde8f8;
-  padding: 0.5rem 2rem 1.5rem 2rem;
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-}
\ No newline at end of file
diff --git a/projects/test-app/src/app/app.component.ts b/projects/test-app/src/app/app.component.ts
index 172fa85..22a4ee2 100644
--- a/projects/test-app/src/app/app.component.ts
+++ b/projects/test-app/src/app/app.component.ts
@@ -1,16 +1,26 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 import { _, TranslateDirective, TranslatePipe, TranslateService } from "@ngx-translate/core";
-import { StandaloneComponent } from "./standalone.component";
+import { map } from 'rxjs';
+import { TranslationObject } from '../../../ngx-translate/src/public-api';
+import { LanguageSwitchComponent } from './language-switch/language-switch.component';
+import { StandaloneComponent } from "./standalone/standalone.component";
 
 
 @Component({
     selector: "app-root",
     standalone: true,
-    imports: [TranslateDirective, TranslatePipe, StandaloneComponent],
-    templateUrl: "./app.component.html",
-    styleUrl: "./app.component.scss"
+    imports: [
+      // Components
+      LanguageSwitchComponent,
+      StandaloneComponent,
+
+      // Vendors
+      TranslateDirective,
+      TranslatePipe,
+      ],
+    templateUrl: "./app.component.html"
 })
-export class AppComponent
+export class AppComponent implements OnInit
 {
     title = _("test-app");
 
@@ -19,4 +29,14 @@ export class AppComponent
         this.translate.setDefaultLang('en');
         this.translate.use('en');
     }
+
+    ngOnInit() {
+      // Service Get method with a set of string[]
+      this.translate
+        .get(['demo.simple.text-as-attribute', 'demo.simple.text-as-content'])
+        .pipe(map((arr: TranslationObject) => {
+          return Object.values(arr).join(', ')
+        }))
+        .subscribe(console.info);
+    }
 }
diff --git a/projects/test-app/src/app/language-switch/language-switch.component.html b/projects/test-app/src/app/language-switch/language-switch.component.html
new file mode 100644
index 0000000..54b8890
--- /dev/null
+++ b/projects/test-app/src/app/language-switch/language-switch.component.html
@@ -0,0 +1,3 @@
+@for(lang of translateService.getLangs(); track lang) {
+  <button (click)="translateService.use(lang)" [class.active]="translateService.currentLang === lang">{{ lang }}</button>
+}
diff --git a/projects/test-app/src/app/language-switch/language-switch.component.scss b/projects/test-app/src/app/language-switch/language-switch.component.scss
new file mode 100644
index 0000000..c8b6673
--- /dev/null
+++ b/projects/test-app/src/app/language-switch/language-switch.component.scss
@@ -0,0 +1,36 @@
+:host{
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+
+  button {
+    background-color: var(--mat-sys-secondary);
+    border: none;
+    color: var(--mat-sys-on-secondary);
+    padding: 0.25rem 0.5rem;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin-left: 1rem;
+    border-radius: 0.5rem;
+    transition: all 0.3s ease;
+    min-width: 120px;
+    min-height: 46px;
+    cursor: pointer;
+    box-shadow: var(--mat-sys-level2);
+
+    &:hover {
+      box-shadow: var(--mat-sys-level3);
+      &:active {
+        box-shadow: var(--mat-sys-level1);
+      }
+    }
+
+    &.active {
+      background-color: var(--mat-sys-primary);
+      color: var(--mat-sys-on-primary);
+
+    }
+  }
+}
diff --git a/projects/test-app/src/app/language-switch/language-switch.component.ts b/projects/test-app/src/app/language-switch/language-switch.component.ts
new file mode 100644
index 0000000..e992915
--- /dev/null
+++ b/projects/test-app/src/app/language-switch/language-switch.component.ts
@@ -0,0 +1,12 @@
+import { Component, inject } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-language-switch',
+  standalone: true,
+  styleUrl: './language-switch.component.scss',
+  templateUrl: './language-switch.component.html',
+})
+export class LanguageSwitchComponent {
+  translateService = inject(TranslateService);
+}
diff --git a/projects/test-app/src/app/standalone.component.html b/projects/test-app/src/app/standalone.component.html
deleted file mode 100644
index a4f5585..0000000
--- a/projects/test-app/src/app/standalone.component.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="title">
-    <h1>{{ 'standalone-component.title' | translate }}</h1>
-</div>
-<div>
-    <h2>Simple translations without parameters</h2>
-
-    <p [translate]="'demo.simple.text-as-attribute'"></p>
-
-    <p translate>demo.simple.text-as-content</p>
-</div>
\ No newline at end of file
diff --git a/projects/test-app/src/app/standalone.component.ts b/projects/test-app/src/app/standalone.component.ts
deleted file mode 100644
index 81a17f1..0000000
--- a/projects/test-app/src/app/standalone.component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import {Component} from "@angular/core";
-import {TranslatePipe, TranslateDirective} from "@ngx-translate/core";
-
-
-@Component({
-    selector: "app-standalone-component",
-    standalone: true,
-    imports: [TranslateDirective, TranslatePipe],
-    templateUrl: "./standalone.component.html"
-})
-export class StandaloneComponent
-{
-
-}
diff --git a/projects/test-app/src/app/standalone/standalone.component.html b/projects/test-app/src/app/standalone/standalone.component.html
new file mode 100644
index 0000000..8bd870f
--- /dev/null
+++ b/projects/test-app/src/app/standalone/standalone.component.html
@@ -0,0 +1,12 @@
+<div class="standalone-container">
+  <div class="title">
+      <h1>{{ 'standalone-component.title' | translate }}</h1>
+  </div>
+  <div>
+      <h2>Simple translations without parameters</h2>
+
+      <p [translate]="'demo.simple.text-as-attribute'"></p>
+
+      <p translate>demo.simple.text-as-content</p>
+  </div>
+</div>
diff --git a/projects/test-app/src/app/standalone/standalone.component.scss b/projects/test-app/src/app/standalone/standalone.component.scss
new file mode 100644
index 0000000..94298a2
--- /dev/null
+++ b/projects/test-app/src/app/standalone/standalone.component.scss
@@ -0,0 +1,5 @@
+.standalone-container {
+  border: 1px solid var(--mat-sys-outline);
+  border-radius: var(--mat-sys-corner-small);
+  padding: 0 var(--space);
+}
diff --git a/projects/test-app/src/app/standalone/standalone.component.ts b/projects/test-app/src/app/standalone/standalone.component.ts
new file mode 100644
index 0000000..418f7d8
--- /dev/null
+++ b/projects/test-app/src/app/standalone/standalone.component.ts
@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component } from "@angular/core";
+import { TranslateDirective, TranslatePipe } from "@ngx-translate/core";
+
+
+@Component({
+    selector: "app-standalone-component",
+    standalone: true,
+    imports: [TranslateDirective, TranslatePipe],
+    styleUrl: "./standalone.component.scss",
+    templateUrl: "./standalone.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class StandaloneComponent
+{
+
+}
diff --git a/projects/test-app/src/styles.scss b/projects/test-app/src/styles.scss
index 90d4ee0..ab35d7c 100644
--- a/projects/test-app/src/styles.scss
+++ b/projects/test-app/src/styles.scss
@@ -1 +1,43 @@
-/* You can add global styles to this file, and also import other style files */
+:root {
+  --mat-sys-primary: #c2282b;
+  --mat-sys-on-primary: #fff;
+
+  --mat-sys-secondary: #3f4258;
+  --mat-sys-on-secondary: #fff;
+
+  --mat-sys-surface-dim: #ffe8f1;
+
+  --mat-sys-outline: #e5e5e5;
+
+  --mat-sys-corner-small: 8px;
+  --mat-sys-corner-medium: 12px;
+
+  --mat-sys-level0: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);
+  --mat-sys-level1: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);
+  --mat-sys-level2: 0px 3px 3px -2px rgba(0, 0, 0, .2), 0px 3px 4px 0px rgba(0, 0, 0, .14), 0px 1px 8px 0px rgba(0, 0, 0, .12);
+  --mat-sys-level3: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);
+
+  --space-smallest: 4px;
+  --space-smaller: 8px;
+  --space-small: 12px;
+  --space: 16px;
+}
+
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+p, .translated{
+  background-color: var(--mat-sys-surface-dim);
+  padding:0.5rem 1rem;
+}
+
+.title {
+
+  h1 {
+    background-color: var(--mat-sys-surface-dim);
+    border-radius: var(--mat-sys-corner-small);
+    padding: var(--space) var(--space-small);
+  }
+}