diff --git a/src/app/components/icon-action-list/icon-action-list.html b/src/app/components/icon-action-list/icon-action-list.html
index 2f3b78a..4fe6a8f 100644
--- a/src/app/components/icon-action-list/icon-action-list.html
+++ b/src/app/components/icon-action-list/icon-action-list.html
@@ -2,7 +2,7 @@
   @for (item of items(); track item.value) {
     <button mat-list-item (click)="action.emit(item.value)">
       <img matListItemAvatar src="{{item.iconSrc}}" alt=""/>
-      <span matListItemTitle>{{item.label|translate|titlecase}}</span>
+      <span matListItemTitle>{{item.label|translate|upperfirst}}</span>
     </button>
   }
 </mat-action-list>
diff --git a/src/app/components/icon-action-list/icon-action-list.ts b/src/app/components/icon-action-list/icon-action-list.ts
index 17b3895..1fad7f9 100644
--- a/src/app/components/icon-action-list/icon-action-list.ts
+++ b/src/app/components/icon-action-list/icon-action-list.ts
@@ -2,11 +2,11 @@ import { Component, input, output } from '@angular/core';
 import { MatListModule } from '@angular/material/list';
 import { IconActionListItem } from './IconActionListItem';
 import { TranslatePipe } from '@ngx-translate/core';
-import { TitleCasePipe } from '@angular/common';
+import { UpperfirstPipe } from "../../pipes/upperfirst-pipe";
 
 @Component({
   selector: 'app-icon-action-list',
-  imports: [MatListModule, TranslatePipe, TitleCasePipe],
+  imports: [MatListModule, TranslatePipe, UpperfirstPipe],
   templateUrl: './icon-action-list.html',
   styleUrl: './icon-action-list.scss',
 })
diff --git a/src/app/components/icon-nav-list/icon-nav-list.html b/src/app/components/icon-nav-list/icon-nav-list.html
index e2f131c..f54ab18 100644
--- a/src/app/components/icon-nav-list/icon-nav-list.html
+++ b/src/app/components/icon-nav-list/icon-nav-list.html
@@ -2,7 +2,7 @@
     @for (item of items(); track item.label) {
       <a mat-list-item [routerLink]="item.routerLink">
         <mat-icon matListItemIcon>{{item.icon}}</mat-icon>
-        <span matListItemTitle>{{item.label|translate|titlecase }}</span>
+        <span matListItemTitle>{{item.label|translate|upperfirst }}</span>
       </a>
     }
   </mat-nav-list>
\ No newline at end of file
diff --git a/src/app/components/icon-nav-list/icon-nav-list.ts b/src/app/components/icon-nav-list/icon-nav-list.ts
index 2398dc9..1929d3b 100644
--- a/src/app/components/icon-nav-list/icon-nav-list.ts
+++ b/src/app/components/icon-nav-list/icon-nav-list.ts
@@ -4,11 +4,11 @@ import { MatListModule } from '@angular/material/list';
 import { RouterLink } from '@angular/router';
 import { IconNavListItem } from './IconNavListItem';
 import { TranslatePipe } from '@ngx-translate/core';
-import { TitleCasePipe } from '@angular/common';
+import { UpperfirstPipe } from "../../pipes/upperfirst-pipe";
 
 @Component({
   selector: 'app-icon-nav-list',
-  imports: [MatListModule, MatIcon, RouterLink, TranslatePipe, TitleCasePipe],
+  imports: [MatListModule, MatIcon, RouterLink, TranslatePipe, UpperfirstPipe],
   templateUrl: './icon-nav-list.html',
   styleUrl: './icon-nav-list.scss',
 })
diff --git a/src/app/components/simple-layout/simple-layout.html b/src/app/components/simple-layout/simple-layout.html
index d2d063c..ca93de0 100644
--- a/src/app/components/simple-layout/simple-layout.html
+++ b/src/app/components/simple-layout/simple-layout.html
@@ -5,7 +5,7 @@
         <mat-icon>arrow_back</mat-icon>
       </button>
     }
-    <h1>{{title()|translate|titlecase}}</h1>
+    <h1>{{title()|translate|upperfirst}}</h1>
   </header>
   <ng-content></ng-content>
 </div>
\ No newline at end of file
diff --git a/src/app/components/simple-layout/simple-layout.ts b/src/app/components/simple-layout/simple-layout.ts
index 295368e..5555d74 100644
--- a/src/app/components/simple-layout/simple-layout.ts
+++ b/src/app/components/simple-layout/simple-layout.ts
@@ -1,13 +1,11 @@
-import { TitleCasePipe } from '@angular/common';
 import { Component, inject, input } from '@angular/core';
 import { TranslatePipe } from '@ngx-translate/core';
-import { RouterLink } from "@angular/router";
 import { Location } from '@angular/common';
 import { MatIcon } from "@angular/material/icon";
-import { MatAnchor, MatButton } from "@angular/material/button";
+import { UpperfirstPipe } from "../../pipes/upperfirst-pipe";
 @Component({
   selector: 'app-simple-layout',
-  imports: [TranslatePipe, TitleCasePipe, MatIcon],
+  imports: [TranslatePipe, MatIcon, UpperfirstPipe],
   templateUrl: './simple-layout.html',
   styleUrl: './simple-layout.scss',
 })