diff --git a/projects/documentation/public/i18n/en.json b/projects/documentation/public/i18n/en.json
index e8a7973..4609891 100644
--- a/projects/documentation/public/i18n/en.json
+++ b/projects/documentation/public/i18n/en.json
@@ -348,5 +348,90 @@
       "TABLE_TAB_SECOND": "HTML Code",
       "TABLE_TAB_THIRD": "TypeScript Code"
     }
+  },
+  "FLEXI_TOAST": {
+    "WHAT_IS": {
+      "CARD_TITLE": "What is Flexi Toast?",
+      "DESCRIPTION_ONE": "Meet the elegant and practical Toast and Swal that you can use in your Angular applications.",
+      "LINKED_DESCRIPTION_ONE": "Flexi Toast is open source. You can access the source code by <a href=\"https://github.com/TanerSaydam/flexi-ui/tree/main/projects/flexi-toast/src/lib\" target=\"_blank\">clicking here</a>.",
+      "DESCRIPTION_TWO": "By reviewing the documentation step by step, you can learn how to install and use Flexi Toast in your project. Below is an example of Flexi Toast. After this section, you will learn step by step how to install and configure the component.",
+      "NOTE_ALERT_PRIMARY": "Note: You can use it in Angular v18+ projects.",
+      "CURRENT_VERSION": "Current version v19.",
+      "NOTE_ALERT_DANGER": "For v18, you must use the v18 versions of the package.",
+      "CODE_DESCRIPTION": "The usage example is below.",
+      "EXAMPLE": "Example"
+    },
+    "INSTALLATION": {
+      "CARD_TITLE": "Installation",
+      "DESCRIPTION": "To use/update Flexi Toast in your Angular project, you should run the following npm command",
+      "NOTE_ALERT": "Important Note: The toast or swal will not be visible on the screen unless you add the CSS file to the styles section!",
+      "USAGE_DESCRIPTION": "After installing the library, you need to add the CSS file to the styles section in the angular.json file. If the application is running while you do this, stop it and run it again."
+    },
+    "TOAST_USE_PAGE": {
+      "CARD_TITLE": "Toast Usage",
+      "DESCRIPTION": "To use the toast in your component, inject the service and display the toast using the showToast method. You can modify your settings through the options in the service, or create your own settings and set them to the options in the service."
+    },
+    "TOAST_TEST_PAGE": {
+      "CARD_TITLE": "Toast Test",
+      "DESCRIPTION": "You can test all features of the Toast from this section.",
+      "FIRST_LABEL": "Title",
+      "FOURTH_LABEL": "Position",
+      "OPTION_TOP_LEFT": "Top left",
+      "OPTION_TOP_RIGHT": "Top right",
+      "OPTION_BOTTOM_LEFT": "Bottom left",
+      "OPTION_BOTTOM_RIGHT": "Bottom right",
+      "OPTION_TOP_FULL": "Top full",
+      "OPTION_BOTTOM_FULL": "Bottom full",
+      "CHECKBOX_ONE": "Auto close",
+      "CHECKBOX_TWO": "Show close button",
+      "CHECKBOX_THREE": "Show progress bar",
+      "CHECKBOX_FOUR": "Prevent multiple toasts from showing",
+      "BUTTON": "Show Toast"
+    },
+    "SWAL_USE_PAGE": {
+      "CARD_TITLE": "Swal Usage",
+      "DESCRIPTION": "To use Swal in your component, inject the service and display the Swal using the showSwal method. This method requires a callback function as a parameter. With this approach, you can code what action to perform if the response is confirmed, for example, when the delete button is pressed. You can modify your settings through the options in the service, or create your own settings and set them to the options in the service."
+    },
+    "SWAL_TEST_PAGE": {
+      "CARD_TITLE": "Swal Test",
+      "DESCRIPTION": "You can test all features of Swal from this section.",
+      "FIRST_LABEL": "Title",
+      "BUTTON": "Show Swal"
+    }
+  },
+  "FLEXI_TOOLTIP": {
+    "INSTALLATION": {
+      "CARD_TITLE": "Installation",
+      "DESCRIPTION_ONE": "An elegant and practical tooltip that you can use in your Angular applications. After adding it as an attribute to an element, simply add the title attribute and provide a value. It allows you to display the value of the title attribute on the screen with the design I have created.",
+      "DESCRIPTION_TWO": "To use/update Flexi Tooltip, you should run the following npm command",
+      "CARD_TITLE_TWO": "Usage",
+      "TAB_FIRST": "Example",
+      "TAB_PANE_FIRST": "Example usages",
+      "TOOLTIP_ONE": "Open",
+      "TOOLTIP_TWO": "Save",
+      "TOOLTIP_THREE": "Update",
+      "TOOLTIP_FOUR": "Delete",
+      "TAB_PANE_SECOND": "HTML Codes",
+      "TAB_PANE_THIRD": "Typescript Codes"
+    }
+  },
+  "FLEXI_TREEVIEW": {
+    "FIRST_PART": {
+      "CARD_TITLE": "What is Flexi Treeview?",
+      "DESCRIPTION_ONE": "Meet Flexi Treeview, the new member of our Flexi UI library.",
+      "LINKED_DESCRIPTION_ONE": "Flexi Treeview is open source. You can access the source code by <a href=\"https://github.com/TanerSaydam/flexi-ui/tree/main/projects/flexi-treeview/src/lib\" target=\"_blank\">clicking here</a>.",
+      "DESCRIPTION_TWO": "With Flexi Treeview, you can display nested lists of any depth, collapse or expand all items, check items with checkboxes, and easily perform necessary operations using add, update, delete, and detail buttons.",
+      "LINKED_DESCRIPTION_TWO": "To contribute to the project and support me, don't forget to star (⭐) the GitHub repository. <a href=\"https://github.com/TanerSaydam/flexi-ui\" target=\"_blank\">Click here to access the GitHub repository</a>.",
+      "DESCRIPTION_THREE": "By reviewing the documentation step by step, you can learn how to install and use Flexi Grid in your project. Below is an example that includes all the features of Flexi Grid. After this section, you will learn step by step how to install and configure the component.",
+      "NOTE_ALERT_PRIMARY": "Note: You can use it in Angular v18+ projects.",
+      "CURRENT_VERSION": "Current version v19.",
+      "NOTE_ALERT_DANGER": "For v18, you must use the v18 versions of the package.",
+      "DESCRIPTION_FOUR": "To use/update Flexi Treeview, you should run the following npm command in your Angular project."
+    },
+    "SECOND_PART": {
+      "TAB_FIRST": "Example",
+      "TAB_PANE_SECOND": "HTML Codes",
+      "TAB_PANE_THIRD": "Typescript Codes"
+    }
   }
 }
diff --git a/projects/documentation/public/i18n/tr.json b/projects/documentation/public/i18n/tr.json
index 07fc26b..24fd585 100644
--- a/projects/documentation/public/i18n/tr.json
+++ b/projects/documentation/public/i18n/tr.json
@@ -349,5 +349,90 @@
       "TABLE_TAB_SECOND": "HTML kodları",
       "TABLE_TAB_THIRD": "Typescript kodları"
     }
+  },
+  "FLEXI_TOAST": {
+    "WHAT_IS": {
+      "CARD_TITLE": "Flexi Toast nedir?",
+      "DESCRIPTION_ONE": "Angular uygulamalarınızda kullanabileceğiniz, şık ve kullanışlı Toast ve Swal ile tanışın.",
+      "LINKED_DESCRIPTION_ONE": "Flexi Toast açık kaynak kodludur. Kaynak kodlarına <a href=\"https://github.com/TanerSaydam/flexi-ui/tree/main/projects/flexi-toast/src/lib\" target=\"_blank\">buraya tıklayarak</a> ulaşabilirsiniz.",
+      "DESCRIPTION_TWO": "Dökümantasyonu adım adım inceleyerek Flexi Toast'ı projenize nasıl kurup kullanabileceğinizi öğrenebilirsiniz. Aşağıda Flexi Toast'ın bir örneği bulunmaktadır. Bu başlıktan sonra, bileşeni nasıl kurup yapılandıracağınızı adım adım öğreneceksiniz.",
+      "NOTE_ALERT_PRIMARY": "Not: Angular v18+ projelerinde kullanabilirsiniz.",
+      "CURRENT_VERSION": "Güncel sürüm v19.",
+      "NOTE_ALERT_DANGER": "v18 için paketin v18 sürümlerini kullanmalısınız.",
+      "CODE_DESCRIPTION": "Kullanım örneği aşağıdadır.",
+      "EXAMPLE": "Örnek"
+    },
+    "INSTALLATION": {
+      "CARD_TITLE": "Kurulum",
+      "DESCRIPTION": "Flexi Toast'ı kullanmak/güncellemek için Angular projenizde aşağıdaki npm komutunu çalıştırmalısınız",
+      "NOTE_ALERT": "Önemli Not: css dosyasını styles kısmına eklemeden toast veya swalı ekranda görünmez!",
+      "USAGE_DESCRIPTION": "Kütüphaneyi kurduktan sonra css dosyasını angular.json dosyasındaki styles kısmına eklemeniz gerekiyor. Bu esnada uygulamaya çalışıyorsa durdurup tekrar çalıştırın"
+    },
+    "TOAST_USE_PAGE": {
+      "CARD_TITLE": "Toast Kullanım",
+      "DESCRIPTION": "Toastı kullanmak istediğiniz component de servisi inject edip showToast metodu ile toast görüntüleyebilirsiniz. Service de bulunan options üzerinden ayarlarınızı değiştirebilir ya da kendi ayarlarınızı oluşturup servicedeki options a set edebilirsiniz."
+    },
+    "TOAST_TEST_PAGE": {
+      "CARD_TITLE": "Toast Test",
+      "DESCRIPTION": "Bu bölümden Toast'ın tüm özelliklerini test edebilirsiniz.",
+      "FIRST_LABEL": "Başlık",
+      "FOURTH_LABEL": "Pozisyon",
+      "OPTION_TOP_LEFT": "Yukarı sol",
+      "OPTION_TOP_RIGHT": "Yukarı sağ",
+      "OPTION_BOTTOM_LEFT": "Aşağı sol",
+      "OPTION_BOTTOM_RIGHT": "Aşağı sağ",
+      "OPTION_TOP_FULL": "Yukarı full",
+      "OPTION_BOTTOM_FULL": "Aşağı full",
+      "CHECKBOX_ONE": "Otomatik kapat",
+      "CHECKBOX_TWO": "Kapat butonunu göster",
+      "CHECKBOX_THREE": "Progess barı göster",
+      "CHECKBOX_FOUR": "Birden fazla toast gözükmesini engelle",
+      "BUTTON": "Toast Göster"
+    },
+    "SWAL_USE_PAGE": {
+      "CARD_TITLE": "Swal Kullanım",
+      "DESCRIPTION": "Swalı kullanmak istediğiniz component de servisi inject edip showSwal metodu ile swalı görüntüleyebilirsiniz. Metot parametre olarak callBack funtion istiyor. Bu yöntemle de eğer sorunuz onaylanırsa, örneğin sil tuşuna basılırsa ne işlem yapacağınızı kodlayabiliyorsunuz. Service de bulunan options üzerinden ayarlarınızı değiştirebilir ya da kendi ayarlarınızı oluşturup servicedeki options a set edebilirsiniz."
+    },
+    "SWAL_TEST_PAGE": {
+      "CARD_TITLE": "Swal Test",
+      "DESCRIPTION": "Bu bölümden Swal'ın tüm özelliklerini test edebilirsiniz.",
+      "FIRST_LABEL": "Başlık",
+      "BUTTON": "Swal Göster"
+    }
+  },
+  "FLEXI_TOOLTIP": {
+    "INSTALLATION": {
+      "CARD_TITLE": "Kurulum",
+      "DESCRIPTION_ONE": "Angular uygulamalarınızda kullanabileceğiniz, şık ve kullanışlı tooltip. Attribute olarak elemente ekledikten sonra title attribute ekleyip değer vermeniz yeterli. Onun içindeki değeri oluşturduğum tasarımla ekranda göstermenize olanak sağlar.",
+      "DESCRIPTION_TWO": "Flexi Tooltip'i kullanmak/güncellemek için aşağıdaki npm komutunu çalıştırmalısınız",
+      "CARD_TITLE_TWO": "Kullanım",
+      "TAB_FIRST": "Örnek",
+      "TAB_PANE_FIRST": "Örnek kullanımları",
+      "TOOLTIP_ONE": "Aç",
+      "TOOLTIP_TWO": "Kaydet",
+      "TOOLTIP_THREE": "Güncelle",
+      "TOOLTIP_FOUR": "Sil",
+      "TAB_PANE_SECOND": "HTML Kodları",
+      "TAB_PANE_THIRD": "Typescript kodları"
+    }
+  },
+  "FLEXI_TREEVIEW": {
+    "FIRST_PART": {
+      "CARD_TITLE": "Flexi Treeview nedir?",
+      "DESCRIPTION_ONE": "Flexi UI kütüphanemizin yeni üyesi Flexi Treeview ile tanışın..",
+      "LINKED_DESCRIPTION_ONE": "Flexi Treview, açık kaynak kodludur. Kaynak kodlarına <a href=\"https://github.com/TanerSaydam/flexi-ui/tree/main/projects/flexi-treeview/src/lib\" target=\"_blank\">buraya tıklayarak</a> ulaşabilirsiniz.",
+      "DESCRIPTION_TWO": "Flexi Treeview ile n sayıda listesiyi iç içe gösterebilir, tamamını kapatabilir, açabilir, checkbox ile işaretleyebilir, ekleme, güncelleme, silme ve detay butonları ile gerekli işlemleri kolayca gerçekleştirebilirsiniz.",
+      "LINKED_DESCRIPTION_TWO": "Projeye katkıda bulunmak ve bana destek vermek için GitHub reposuna bir yıldız (⭐) atmayı unutmayın. <a href=\"https://github.com/TanerSaydam/flexi-ui\" target=\"_blank\">GitHub reposuna ulaşmak için tıklayın</a>.",
+      "DESCRIPTION_THREE": "Dökümantasyonu adım adım inceleyerek Flexi Grid'i projenize nasıl kurup kullanabileceğinizi öğrenebilirsiniz. Aşağıda, Flexi Grid'in tüm özelliklerini içeren bir örnek bulunmaktadır. Bu başlıktan sonra, bileşeni nasıl kurup yapılandıracağınızı adım adım öğreneceksiniz.",
+      "NOTE_ALERT_PRIMARY": "Not: Angular v18+ projelerinde kullanabilirsiniz.",
+      "CURRENT_VERSION": "Güncel sürüm v19.",
+      "NOTE_ALERT_DANGER": "v18 için paketin v18 sürümlerini kullanmalısınız.",
+      "DESCRIPTION_FOUR": "Flexi Treeview'i kullanmak/güncellemek için Angular projenizde aşağıdaki npm komutunu çalıştırmalısınız"
+    },
+    "SECOND_PART": {
+      "TAB_FIRST": "Örnek",
+      "TAB_PANE_SECOND": "HTML Kodları",
+      "TAB_PANE_THIRD": "Typescript kodları"
+    }
   }
 }
diff --git a/projects/documentation/src/app/flexi-toast/flexi-toast.component.html b/projects/documentation/src/app/flexi-toast/flexi-toast.component.html
index 4ab570a..ad34e07 100644
--- a/projects/documentation/src/app/flexi-toast/flexi-toast.component.html
+++ b/projects/documentation/src/app/flexi-toast/flexi-toast.component.html
@@ -1,22 +1,17 @@
-<app-blank pageName="Flexi Toast" pageDescription="Angular Flexi Toast" *transloco="let t">
+<app-blank pageName="Flexi Toast" pageDescription="Angular Flexi Toast" *transloco="let t; read: 'FLEXI_TOAST.WHAT_IS'">
     <!-- Flexi Toast Nedir?  -->
-    <app-card cardTitle="Flexi Toast nedir?">
-        <p>Angular uygulamalarınızda kullanabileceğiniz, şık ve kullanışlı Toast ve Swal ile tanışın.</p>
-        <p>Flexi Toast açık kaynak kodludur. Kaynak kodlarına <a
-                href="https://github.com/TanerSaydam/flexi-ui/tree/main/projects/flexi-toast/src/lib"
-                target="_blank">buraya tıklayarak</a> ulaşabilirsiniz.</p>
-        <hr>
-        <p>Projeye katkıda bulunmak ve bana destek vermek için GitHub reposuna bir yıldız (⭐) atmayı unutmayın. <a
-                href="https://github.com/TanerSaydam/flexi-ui" target="_blank">GitHub reposuna ulaşmak için
-                tıklayın</a>.</p>
-        <p>Dökümantasyonu adım adım inceleyerek Flexi Toast'ı projenize nasıl kurup kullanabileceğinizi öğrenebilirsiniz. Aşağıda Flexi Toast'ın bir örneği bulunmaktadır. Bu başlıktan sonra, bileşeni nasıl kurup yapılandıracağınızı adım adım öğreneceksiniz.</p>
-        <p class="alert aler-primary"><b>Not: Angular v18+ projelerinde kullanabilirsiniz.</b></p>
+    <app-card cardTitle="{{t('CARD_TITLE')}}">
+        <p>{{t('DESCRIPTION_ONE')}}</p>
+        <p [innerHTML]="t('LINKED_DESCRIPTION_ONE')"></p>
+                <hr>
+        <p>{{t('DESCRIPTION_TWO')}}</p>
+        <p class="alert aler-primary"><b>{{t('NOTE_ALERT_PRIMARY')}}</b></p>
         <div class="alert alert-danger"><b>
-        <p>Güncel sürüm v19.</p>
-        <p>v18 için paketin v18 sürümlerini kullanmalısınız.</p></b>
+        <p>{{t('CURRENT_VERSION')}} </p>
+        <p>{{t('NOTE_ALERT_DANGER')}}</p></b>
         </div>
         <br>
-        <p>Kullanım örneği aşağıdadır.</p>
+        <p>{{t('CODE_DESCRIPTION')}}</p>
     </app-card>
 
     <!-- Toast {{ t('EXAMPLE') }} Çıktısı -->
diff --git a/projects/documentation/src/app/flexi-toast/flexi-toast.component.ts b/projects/documentation/src/app/flexi-toast/flexi-toast.component.ts
index 8ca2266..aa661ee 100644
--- a/projects/documentation/src/app/flexi-toast/flexi-toast.component.ts
+++ b/projects/documentation/src/app/flexi-toast/flexi-toast.component.ts
@@ -3,6 +3,7 @@ import { Component} from '@angular/core';
 import { CardComponent } from '../blank/card/card.component';
 import { BlankComponent } from '../blank/blank.component';
 import { FormsModule } from '@angular/forms';
+import { TranslocoModule } from '@jsverse/transloco';
 
 @Component({
     selector: 'app-flexi-toast',
@@ -11,6 +12,7 @@ import { FormsModule } from '@angular/forms';
         CardComponent,
         CommonModule,
         FormsModule,        
+        TranslocoModule
     ],
     templateUrl: './flexi-toast.component.html',
     styleUrl: './flexi-toast.component.css'
diff --git a/projects/documentation/src/app/flexi-toast/installation/installation.component.html b/projects/documentation/src/app/flexi-toast/installation/installation.component.html
index aed550f..5e54950 100644
--- a/projects/documentation/src/app/flexi-toast/installation/installation.component.html
+++ b/projects/documentation/src/app/flexi-toast/installation/installation.component.html
@@ -1,12 +1,12 @@
-<app-blank pageName="Flexi Toast" pageDescription="Angular Flexi Toast">
-    <app-card id="installation" cardTitle="Kurulum">
+<app-blank pageName="Flexi Toast" pageDescription="Angular Flexi Toast" *transloco="let t; read: 'FLEXI_TOAST.INSTALLATION'">
+    <app-card id="installation" cardTitle="{{t('CARD_TITLE')}}">
         <div class="card-body">
-            <p>Flexi Toast'ı kullanmak/güncellemek için Angular projenizde aşağıdaki npm komutunu çalıştırmalısınız</p>
+            <p>{{t('DESCRIPTION')}}</p>
             <pre><code style="font-size: larger; font-weight: 700;">npm install flexi-toast</code></pre>
         </div>
         <div class="card-body">
-            <div class="alert alert-warning">Önemli Not: css dosyasını styles kısmına eklemeden toast veya swalı ekranda görünmez!</div>
-            <p>Kütüphaneyi kurduktan sonra css dosyasını angular.json dosyasındaki styles kısmına eklemeniz gerekiyor. Bu esnada uygulamaya çalışıyorsa durdurup tekrar çalıştırın</p>
+            <div class="alert alert-warning">{{t('NOTE_ALERT')}}</div>
+            <p>{{t('USAGE_DESCRIPTION')}}</p>
             <strong>angular.json</strong>
             <pre><code style="font-size: larger; font-weight: 700;">{{angularJSONCode()}}</code></pre>                
         </div>
diff --git a/projects/documentation/src/app/flexi-toast/installation/installation.component.ts b/projects/documentation/src/app/flexi-toast/installation/installation.component.ts
index 874af9a..b0ae876 100644
--- a/projects/documentation/src/app/flexi-toast/installation/installation.component.ts
+++ b/projects/documentation/src/app/flexi-toast/installation/installation.component.ts
@@ -1,13 +1,15 @@
 import { Component, signal } from '@angular/core';
 import { SharedModule } from '../../shared.module';
+import { TranslocoModule } from '@jsverse/transloco';
 
-@Component({
-    selector: 'app-installation',
-    imports: [
-        SharedModule
-    ],
-    templateUrl: './installation.component.html',
-    styleUrl: './installation.component.css'
+@Component({
+    selector: 'app-installation',
+    imports: [
+        SharedModule,
+        TranslocoModule
+    ],
+    templateUrl: './installation.component.html',
+    styleUrl: './installation.component.css'
 })
 export default class InstallationComponent {
   angularJSONCode = signal<string>(`{
diff --git a/projects/documentation/src/app/flexi-toast/swal-test/swal-test.component.html b/projects/documentation/src/app/flexi-toast/swal-test/swal-test.component.html
index 4b28ec8..621aedc 100644
--- a/projects/documentation/src/app/flexi-toast/swal-test/swal-test.component.html
+++ b/projects/documentation/src/app/flexi-toast/swal-test/swal-test.component.html
@@ -1,12 +1,12 @@
-<app-blank pageName="Flexi Toast" pageDescription="Angular Flexi Toast">
-    <app-card id="swal-full" style="padding-top: 5px;" cardTitle="Swal Test">     
+<app-blank pageName="Flexi Toast" pageDescription="Angular Flexi Toast" *transloco="let t; read: 'FLEXI_TOAST.SWAL_TEST_PAGE'">
+    <app-card id="swal-full" style="padding-top: 5px;" cardTitle="{{t('CARD_TITLE')}}">     
         <div class="card-body">
-            <p>Bu bölümden Swal'ın tüm özelliklerini test edebilirsiniz</p>
+            <p>{{t('DESCRIPTION')}}</p>
         </div>  
         <div class="card-body">
             <div class="row form-group">
                 <div class="form-group">
-                    <label>Başlık</label>
+                    <label>{{t('FIRST_LABEL')}}</label>
                     <input type="text" class="form-control" [(ngModel)]="swalTitle">
                 </div>
                 <div class="form-group mt-2">
@@ -32,7 +32,7 @@
                 </div>                
             </div>        
             <div class="form-group mt-2">
-                <button class="btn btn-primary" (click)="showSwal()">Swal Göster</button>
+                <button class="btn btn-primary" (click)="showSwal()">{{t('BUTTON')}}</button>
             </div>
         </div>
     </app-card>
diff --git a/projects/documentation/src/app/flexi-toast/swal-test/swal-test.component.ts b/projects/documentation/src/app/flexi-toast/swal-test/swal-test.component.ts
index 7ea5816..08b872d 100644
--- a/projects/documentation/src/app/flexi-toast/swal-test/swal-test.component.ts
+++ b/projects/documentation/src/app/flexi-toast/swal-test/swal-test.component.ts
@@ -1,12 +1,13 @@
 import { Component, signal } from '@angular/core';
 import { SharedModule } from '../../shared.module';
 import { FlexiToastOptionsModel, FlexiToastService } from 'flexi-toast';
+import { TranslocoModule } from '@jsverse/transloco';
 
-@Component({
-    selector: 'app-swal-test',
-    imports: [SharedModule],
-    templateUrl: './swal-test.component.html',
-    styleUrl: './swal-test.component.css'
+@Component({
+    selector: 'app-swal-test',
+    imports: [SharedModule,TranslocoModule],
+    templateUrl: './swal-test.component.html',
+    styleUrl: './swal-test.component.css'
 })
 export default class SwalTestComponent {
   swalTitle = signal<string>("Sil?");
diff --git a/projects/documentation/src/app/flexi-toast/swal-use/swal-use.component.html b/projects/documentation/src/app/flexi-toast/swal-use/swal-use.component.html
index 6e52a9f..dee0215 100644
--- a/projects/documentation/src/app/flexi-toast/swal-use/swal-use.component.html
+++ b/projects/documentation/src/app/flexi-toast/swal-use/swal-use.component.html
@@ -1,11 +1,11 @@
-<app-blank pageName="Flexi Toast" pageDescription="Angular Flexi Toast">
-    <app-card id="installation" cardTitle="Swal Kullanım">    
+<app-blank pageName="Flexi Toast" pageDescription="Angular Flexi Toast" *transloco="let t; read: 'FLEXI_TOAST.SWAL_USE_PAGE'">
+    <app-card id="installation" cardTitle="{{t('CARD_TITLE')}}">    
         <div class="card-body">
             <img class="me-1" src="/img/flexi-swal-light.png">
             <img src="/img/flexi-swal-dark.png">
         </div>        
         <div class="card-body">
-            <p>Swalı kullanmak istediğiniz component de servisi inject edip showSwal metodu ile swalı görüntüleyebilirsiniz. Metot parametre olarak callBack funtion istiyor. Bu yöntemle de eğer sorunuz onaylanırsa, örneğin sil tuşuna basılırsa ne işlem yapacağınızı kodlayabiliyorsunuz. Service de bulunan options üzerinden ayarlarınızı değiştirebilir ya da kendi ayarlarınızı oluşturup servicedeki options a set edebilirsiniz.</p>
+            <p>{{t('DESCRIPTION')}}</p>
             <my-code [code]="swalTSCode()" language="typescript"></my-code>
         </div>
     </app-card>    
diff --git a/projects/documentation/src/app/flexi-toast/swal-use/swal-use.component.ts b/projects/documentation/src/app/flexi-toast/swal-use/swal-use.component.ts
index d7b57fa..f4cd54a 100644
--- a/projects/documentation/src/app/flexi-toast/swal-use/swal-use.component.ts
+++ b/projects/documentation/src/app/flexi-toast/swal-use/swal-use.component.ts
@@ -1,12 +1,13 @@
 import { Component, signal } from '@angular/core';
 import { SharedModule } from '../../shared.module';
 import { FlexiToastOptionsModel, FlexiToastService } from 'flexi-toast';
+import { TranslocoModule } from '@jsverse/transloco';
 
-@Component({
-    selector: 'app-swal-use',
-    imports: [SharedModule],
-    templateUrl: './swal-use.component.html',
-    styleUrl: './swal-use.component.css'
+@Component({
+    selector: 'app-swal-use',
+    imports: [SharedModule,TranslocoModule],
+    templateUrl: './swal-use.component.html',
+    styleUrl: './swal-use.component.css'
 })
 export default class SwalUseComponent { 
   swalTSCode = signal<string>(`options = signal<FlexiToastOptionsModel>({    
diff --git a/projects/documentation/src/app/flexi-toast/toast-test/toast-test.component.html b/projects/documentation/src/app/flexi-toast/toast-test/toast-test.component.html
index 7b29409..da65d58 100644
--- a/projects/documentation/src/app/flexi-toast/toast-test/toast-test.component.html
+++ b/projects/documentation/src/app/flexi-toast/toast-test/toast-test.component.html
@@ -1,13 +1,13 @@
-<app-blank pageName="Flexi Toast" pageDescription="Angular Flexi Toast">
-    <app-card id="toast-full" style="padding-top: 5px;" cardTitle="Toast Test">     
+<app-blank pageName="Flexi Toast" pageDescription="Angular Flexi Toast" *transloco="let t; read: 'FLEXI_TOAST.TOAST_TEST_PAGE'">
+    <app-card id="toast-full" style="padding-top: 5px;" cardTitle="{{t('CARD_TITLE')}}">     
         <div class="card-body">
-            <p>Bu bölümden Toast'ın tüm özelliklerini test edebilirsiniz</p>
+            <p>{{t('DESCRIPTION')}}</p>
         </div>  
         <div class="card-body">
             <div class="row form-group">
                 <div class="col-6">
                     <div class="form-group">
-                        <label>Başlık</label>
+                        <label>{{t('FIRST_LABEL')}}</label>
                         <input type="text" class="form-control" [(ngModel)]="toastTitle">
                     </div>
                     <div class="form-group mt-2">
@@ -24,14 +24,14 @@
                         </select>
                     </div>
                     <div class="form-group mt-2">
-                        <label>Pozisyon</label>
+                        <label>{{t('FOURTH_LABEL')}}</label>
                         <select class="form-control" [(ngModel)]="options().position">
-                            <option value="top-left">Yukarı sol</option>
-                            <option value="top-right">Yukarı sağ</option>
-                            <option value="bottom-left">Aşağı sol</option>
-                            <option value="bottom-right">Aşağı sağ</option>
-                            <option value="top-full">Yukarı full</option>
-                            <option value="bottom-full">Aşağı full</option>
+                            <option value="top-left">{{t('OPTION_TOP_LEFT')}}</option>
+                            <option value="top-right">{{t('OPTION_TOP_RIGHT')}}</option>
+                            <option value="bottom-left">{{t('OPTION_BOTTOM_LEFT')}}</option>
+                            <option value="bottom-right">{{t('OPTION_BOTTOM_RIGHT')}}</option>
+                            <option value="top-full">{{t('OPTION_TOP_FULL')}}</option>
+                            <option value="bottom-full">{{t('OPTION_BOTTOM_FULL')}}</option>
                         </select>
                     </div>
                 </div>
@@ -39,25 +39,25 @@
                     <div class="form-check">
                         <input class="form-check-input" type="checkbox" [(ngModel)]="options().autoClose" id="autoClose">
                         <label class="form-check-label" for="autoClose">
-                            Otomatik kapat
+                            {{t('CHECKBOX_ONE')}}
                         </label>
                     </div>
                     <div class="form-check">
                         <input class="form-check-input" type="checkbox" [(ngModel)]="options().showToastCloseBtn" id="showCloseBtn">
                         <label class="form-check-label" for="showCloseBtn">
-                            Kapat butonunu göster
+                            {{t('CHECKBOX_TWO')}}
                         </label>
                     </div>
                     <div class="form-check">
                         <input class="form-check-input" type="checkbox" [(ngModel)]="options().showProgressBar" id="showProgressBar" [disabled]="!options().autoClose">
                         <label class="form-check-label" for="showProgressBar">
-                            Progess barı göster
+                            {{t('CHECKBOX_THREE')}}
                         </label>
                     </div>
                     <div class="form-check">
                         <input class="form-check-input" type="checkbox" [(ngModel)]="options().preventDuplicate" id="preventDuplicate">
                         <label class="form-check-label" for="preventDuplicate">
-                            Birden fazla toast gözükmesini engelle
+                            {{t('CHECKBOX_FOUR')}}
                         </label>
                     </div>
                     <div class="form-group">
@@ -74,7 +74,7 @@
                 </div>
             </div>        
             <div class="form-group mt-2">
-                <button class="btn btn-primary" (click)="showToast()">Toast Göster</button>
+                <button class="btn btn-primary" (click)="showToast()">{{t('BUTTON')}}</button>
             </div>
         </div>
     </app-card>
diff --git a/projects/documentation/src/app/flexi-toast/toast-test/toast-test.component.ts b/projects/documentation/src/app/flexi-toast/toast-test/toast-test.component.ts
index 7cf7597..93fdf46 100644
--- a/projects/documentation/src/app/flexi-toast/toast-test/toast-test.component.ts
+++ b/projects/documentation/src/app/flexi-toast/toast-test/toast-test.component.ts
@@ -1,12 +1,13 @@
 import { Component, signal } from '@angular/core';
 import { SharedModule } from '../../shared.module';
 import { FlexiToastOptionsModel, FlexiToastService } from 'flexi-toast';
+import { TranslocoModule } from '@jsverse/transloco';
 
-@Component({
-    selector: 'app-toast-test',
-    imports: [SharedModule],
-    templateUrl: './toast-test.component.html',
-    styleUrl: './toast-test.component.css'
+@Component({
+    selector: 'app-toast-test',
+    imports: [SharedModule,TranslocoModule],
+    templateUrl: './toast-test.component.html',
+    styleUrl: './toast-test.component.css'
 })
 export default class ToastTestComponent {
   options = signal<FlexiToastOptionsModel>({
diff --git a/projects/documentation/src/app/flexi-toast/toast-use/toast-use.component.html b/projects/documentation/src/app/flexi-toast/toast-use/toast-use.component.html
index b873d40..02f517e 100644
--- a/projects/documentation/src/app/flexi-toast/toast-use/toast-use.component.html
+++ b/projects/documentation/src/app/flexi-toast/toast-use/toast-use.component.html
@@ -1,10 +1,10 @@
-<app-blank pageName="Flexi Toast" pageDescription="Angular Flexi Toast">
-    <app-card id="installation" cardTitle="Toast Kullanım">    
+<app-blank pageName="Flexi Toast" pageDescription="Angular Flexi Toast" *transloco="let t; read: 'FLEXI_TOAST.TOAST_USE_PAGE'">
+    <app-card id="installation" cardTitle="{{t('CARD_TITLE')}}">    
         <div class="card-body">
             <img src="/img/flexi-toast-1.png">
         </div>        
         <div class="card-body">
-            <p>Toastı kullanmak istediğiniz component de servisi inject edip showToast metodu ile toast görüntüleyebilirsiniz. Service de bulunan options üzerinden ayarlarınızı değiştirebilir ya da kendi ayarlarınızı oluşturup servicedeki options a set edebilirsiniz.</p>
+            <p>{{t('DESCRIPTION')}}</p>
             <my-code [code]="toastTSCode()" language="typescript"></my-code>
         </div>
     </app-card>
diff --git a/projects/documentation/src/app/flexi-toast/toast-use/toast-use.component.ts b/projects/documentation/src/app/flexi-toast/toast-use/toast-use.component.ts
index c1cd3aa..d7eac6e 100644
--- a/projects/documentation/src/app/flexi-toast/toast-use/toast-use.component.ts
+++ b/projects/documentation/src/app/flexi-toast/toast-use/toast-use.component.ts
@@ -1,14 +1,16 @@
 import { Component, signal } from '@angular/core';
 import { SharedModule } from '../../shared.module';
 import { FlexiToastOptionsModel, FlexiToastService } from 'flexi-toast';
+import { TranslocoModule } from '@jsverse/transloco';
 
-@Component({
-    selector: 'app-toast-use',
-    imports: [
-        SharedModule
-    ],
-    templateUrl: './toast-use.component.html',
-    styleUrl: './toast-use.component.css'
+@Component({
+    selector: 'app-toast-use',
+    imports: [
+        SharedModule,
+        TranslocoModule
+    ],
+    templateUrl: './toast-use.component.html',
+    styleUrl: './toast-use.component.css'
 })
 export default class ToastUseComponent {  
   toastTSCode = signal<string>(`options = signal<FlexiToastOptionsModel>({
diff --git a/projects/documentation/src/app/flexi-tooltip/flexi-tooltip.component.html b/projects/documentation/src/app/flexi-tooltip/flexi-tooltip.component.html
index f5b0521..a601048 100644
--- a/projects/documentation/src/app/flexi-tooltip/flexi-tooltip.component.html
+++ b/projects/documentation/src/app/flexi-tooltip/flexi-tooltip.component.html
@@ -1,17 +1,17 @@
-<app-blank pageName="Flexi Tooltip" pageDescription="Angular Flexi Tooltip" *transloco="let t">
-    <app-card id="installation" cardTitle="Kurulum">
+<app-blank pageName="Flexi Tooltip" pageDescription="Angular Flexi Tooltip" *transloco="let t; read: 'FLEXI_TOOLTIP.INSTALLATION'">
+    <app-card id="installation" cardTitle="{{t('CARD_TITLE')}}">
         <div class="card-body">
-            <p>Angular uygulamalarınızda kullanabileceğiniz, şık ve kullanışlı tooltip. Attribute olarak elemente ekledikten sonra title attribute ekleyip değer vermeniz yeterli. Onun içindeki değeri oluşturduğum tasarımla ekranda göstermenize olanak sağlar.</p>
-            <p>Flexi Tooltip'i kullanmak/güncellemek için aşağıdaki npm komutunu çalıştırmalısınız</p>
+            <p>{{t('DESCRIPTION_ONE')}}</p>
+            <p>{{t('DESCRIPTION_TWO')}}</p>
             <pre><code style="font-size: larger; font-weight: 700;">npm install flexi-tooltip</code></pre>
         </div>
     </app-card>
 
-    <app-card cardTitle="Kullanım">
+    <app-card cardTitle="{{t('CARD_TITLE_TWO')}}">
         <div class="card-header">
             <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
                 <li class="nav-item">
-                    <a href="#tabs-example-full" class="nav-link active" data-bs-toggle="tab">{{ t('EXAMPLE') }}</a>
+                    <a href="#tabs-example-full" class="nav-link active" data-bs-toggle="tab">{{ t('TAB_FIRST') }}</a>
                 </li>
                 <li class="nav-item">
                     <a href="#tabs-html-full" class="nav-link" data-bs-toggle="tab">component.html</a>
@@ -24,26 +24,26 @@
         <div class="card-body">
             <div class="tab-content">
                 <div class="tab-pane active show" id="tabs-example-full">
-                    <h4>{{ t('EXAMPLE') }} kullanımları</h4>
+                    <h4>{{ t('TAB_PANE_FIRST') }}</h4>
                     <div style="display: flex; flex-direction: column; gap:5px">
                         <div style="display: flex; gap: 5px;">
                             <flexi-button btnColor="light" btnSize="large" btnIcon="info" flexiTooltip="left"
-                                title="Aç" />
+                                title="{{t('TOOLTIP_ONE')}}" />
                             <flexi-button btnColor="primary" btnSize="large" btnIcon="add" flexiTooltip="right"
-                                title="Kaydet" />
+                                title="{{t('TOOLTIP_TWO')}}" />
                             <flexi-button btnColor="warning" btnSize="large" btnIcon="edit" flexiTooltip="top"
-                                title="Güncelle" />
+                                title="{{t('TOOLTIP_THREE')}}" />
                             <flexi-button btnColor="danger" btnSize="large" btnIcon="delete" flexiTooltip="bottom"
-                                title="Sil" />
+                                title="{{t('TOOLTIP_FOUR')}}" />
                         </div>
                     </div>
                 </div>
                 <div class="tab-pane" id="tabs-html-full">
-                    <h4>HTML kodları</h4>
+                    <h4>{{t('TAB_PANE_SECOND')}}</h4>
                     <my-code [code]="tooltipHTMLCodeExample()" language="html"></my-code>
                 </div>
                 <div class="tab-pane" id="tabs-ts-full">
-                    <h4>Typescript kodları</h4>
+                    <h4>{{t('TAB_PANE_THIRD')}}</h4>
                     <my-code [code]="tooltipTSCodeExample()" language="typescript"></my-code>
                 </div>
             </div>
diff --git a/projects/documentation/src/app/flexi-tooltip/flexi-tooltip.component.ts b/projects/documentation/src/app/flexi-tooltip/flexi-tooltip.component.ts
index d35adf3..ee5dae8 100644
--- a/projects/documentation/src/app/flexi-tooltip/flexi-tooltip.component.ts
+++ b/projects/documentation/src/app/flexi-tooltip/flexi-tooltip.component.ts
@@ -2,10 +2,11 @@ import { Component, signal } from '@angular/core';
 import { SharedModule } from '../shared.module';
 import { FlexiTooltipDirective } from 'flexi-tooltip';
 import { FlexiButtonComponent } from 'flexi-button';
+import { TranslocoModule } from '@jsverse/transloco';
 
 @Component({
     selector: 'app-flexi-tooltip',
-    imports: [SharedModule, FlexiTooltipDirective, FlexiButtonComponent],
+    imports: [SharedModule, FlexiTooltipDirective, FlexiButtonComponent,TranslocoModule],
     templateUrl: './flexi-tooltip.component.html',
     styleUrl: './flexi-tooltip.component.css'
 })
diff --git a/projects/documentation/src/app/flexi-treeview/flexi-treeview.component.html b/projects/documentation/src/app/flexi-treeview/flexi-treeview.component.html
index 86a4c6f..5116f99 100644
--- a/projects/documentation/src/app/flexi-treeview/flexi-treeview.component.html
+++ b/projects/documentation/src/app/flexi-treeview/flexi-treeview.component.html
@@ -1,25 +1,20 @@
-<app-blank pageName="Flexi Treeview" pageDescription="Angular Flexi Treeview" *transloco="let t">
-  <app-card cardTitle="Flexi Treeview nedir?">
-    <p>Flexi UI kütüphanemizin yeni üyesi Flexi Treeview ile tanışın.</p>
-    <p>Flexi Treview, açık kaynak kodludur. Kaynak kodlarına <a
-        href="https://github.com/TanerSaydam/flexi-ui/tree/main/projects/flexi-treeview/src/lib" target="_blank">buraya
-        tıklayarak</a> ulaşabilirsiniz.</p>
+<app-blank pageName="Flexi Treeview" pageDescription="Angular Flexi Treeview" *transloco="let t; read: 'FLEXI_TREEVIEW.FIRST_PART'">
+  <app-card cardTitle="{{t('CARD_TITLE')}}">
+    <p>{{t('DESCRIPTION_ONE')}}</p>
+    <p [innerHTML]="t('LINKED_DESCRIPTION_ONE')"></p>
     <hr>
-    <p>Flexi Treeview ile n sayıda listesiyi iç içe gösterebilir, tamamını kapatabilir, açabilir, checkbox ile işaretleyebilir, ekleme, güncelleme, silme ve detay butonları ile gerekli işlemleri kolayca gerçekleştirebilirsiniz.</p>
-    <p>Projeye katkıda bulunmak ve bana destek vermek için GitHub reposuna bir yıldız (⭐) atmayı unutmayın. <a
-        href="https://github.com/TanerSaydam/flexi-ui" target="_blank">GitHub reposuna ulaşmak için tıklayın</a>.</p>
-    <p>Dökümantasyonu adım adım inceleyerek Flexi Grid'i projenize nasıl kurup kullanabileceğinizi öğrenebilirsiniz.
-      Aşağıda, Flexi Grid'in tüm özelliklerini içeren bir {{ t('EXAMPLE') }} bulunmaktadır. Bu başlıktan sonra, bileşeni nasıl kurup
-      yapılandıracağınızı adım adım öğreneceksiniz.</p>
-    <p class="alert aler-primary"><b>Not: Angular v18+ projelerinde kullanabilirsiniz.</b></p>
+    <p>{{t('DESCRIPTION_TWO')}}</p>
+    <p [innerHTML]="t('LINKED_DESCRIPTION_TWO')"></p>
+    <p>{{t('DESCRIPTION_THREE')}}</p>
+    <p class="alert aler-primary"><b>{{t('NOTE_ALERT_PRIMARY')}}</b></p>
     <div class="alert alert-danger"><b>
-      <p>Güncel sürüm v19.</p>
-      <p>v18 için paketin v18 sürümlerini kullanmalısınız.</p></b>
+      <p>{{t('CURRENT_VERSION')}}</p>
+      <p>{{t('NOTE_ALERT_DANGER')}}</p></b>
     </div>
     <br>
 
     <div class="card-body">
-      <p>Flexi Treeview'i kullanmak/güncellemek için Angular projenizde aşağıdaki npm komutunu çalıştırmalısınız</p>
+      <p>{{t('DESCRIPTION_FOUR')}}</p>
       <pre><code style="font-size: larger; font-weight: 700;">npm install flexi-treeview</code></pre>
     </div>
 
diff --git a/projects/documentation/src/app/flexi-treeview/flexi-treeview.component.ts b/projects/documentation/src/app/flexi-treeview/flexi-treeview.component.ts
index 1c9e061..7477fc4 100644
--- a/projects/documentation/src/app/flexi-treeview/flexi-treeview.component.ts
+++ b/projects/documentation/src/app/flexi-treeview/flexi-treeview.component.ts
@@ -1,9 +1,10 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 import { SharedModule } from '../shared.module';
 import FullTreeViewComponent from './full/full.component';
+import { TranslocoModule } from '@jsverse/transloco';
 
 @Component({  
-  imports: [SharedModule, FullTreeViewComponent],
+  imports: [SharedModule, FullTreeViewComponent,TranslocoModule],
   templateUrl: './flexi-treeview.component.html',  
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/projects/documentation/src/app/flexi-treeview/full/full.component.html b/projects/documentation/src/app/flexi-treeview/full/full.component.html
index 88800c1..ef1ad0a 100644
--- a/projects/documentation/src/app/flexi-treeview/full/full.component.html
+++ b/projects/documentation/src/app/flexi-treeview/full/full.component.html
@@ -1,7 +1,8 @@
-<div class="card-header" *transloco="let t">
+<div *transloco="let t; read: 'FLEXI_TREEVIEW.SECOND_PART'">
+<div class="card-header" >
     <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
       <li class="nav-item">
-        <a href="#tabs-example-full" class="nav-link active" data-bs-toggle="tab">{{ t('EXAMPLE') }}</a>
+        <a href="#tabs-example-full" class="nav-link active" data-bs-toggle="tab">{{ t('TAB_FIRST') }}</a>
       </li>
       <li class="nav-item">
         <a href="#tabs-html-full" class="nav-link" data-bs-toggle="tab">component.html</a>
@@ -16,7 +17,7 @@
   </div>
   <div class="card-body">
     <div class="tab-content">
-      <div class="tab-pane active show" id="tabs-example-full" *transloco="let t">
+      <div class="tab-pane active show" id="tabs-example-full">
        <flexi-treeview
          [data]="treeviewData()"
          [loading]="loading()"
@@ -31,11 +32,11 @@
          (onSelected)="onSelected($event)" />
       </div>
       <div class="tab-pane" id="tabs-html-full">
-        <h4>HTML kodları</h4>
+        <h4>{{t('TAB_PANE_SECOND')}}</h4>
         <my-code [code]="fullExampleHTMLCode()" language="html"></my-code>
       </div>
       <div class="tab-pane" id="tabs-ts-full">
-        <h4>Typescript kodları</h4>
+        <h4>{{t('TAB_PANE_THIRD')}}</h4>
         <my-code [code]="fullExampleTSCode()" language="typescript"></my-code>
       </div>
       <div class="tab-pane" id="tabs-ts-data">
@@ -43,4 +44,6 @@ <h4>Data</h4>
         <my-code [code]="dataCode()" language="typescript"></my-code>
       </div>
     </div>
-  </div>
\ No newline at end of file
+  </div>
+
+</div>
diff --git a/projects/documentation/src/app/flexi-treeview/full/full.component.ts b/projects/documentation/src/app/flexi-treeview/full/full.component.ts
index 4a947ea..43d122c 100644
--- a/projects/documentation/src/app/flexi-treeview/full/full.component.ts
+++ b/projects/documentation/src/app/flexi-treeview/full/full.component.ts
@@ -3,10 +3,11 @@ import { SharedModule } from '../../shared.module';
 import { FlexiTreeNode, FlexiTreeviewComponent } from 'flexi-treeview';
 import { CategoryTreeviewData } from '../../flexi-grid/data';
 import { flexiTreeviewData, flexiTreeviewfullExampleHTMLCode, flexiTreeviewfullExampleTSCode } from '../../flexi-grid/code';
+import { TranslocoModule } from '@jsverse/transloco';
 
 @Component({
   selector: 'app-flexi-treeview-full',
-  imports: [SharedModule, FlexiTreeviewComponent],
+  imports: [SharedModule, FlexiTreeviewComponent,TranslocoModule],
   templateUrl: './full.component.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush