diff --git a/.vscode/settings.json b/.vscode/settings.json
index ed8a895..02df2a7 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,5 @@
 {
+  "editor.formatOnSaveMode": "modificationsIfAvailable",
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "cSpell.words": []
diff --git a/package.json b/package.json
index b725780..e9cab7c 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,8 @@
     "@angular/platform-browser-dynamic": "^19.0.0",
     "@angular/router": "^19.0.0",
     "@ikilote/json2html": "0.5.0",
+    "@jsverse/transloco": "^7.5.0",
+    "bootstrap": "^5.3.3",
     "bowser": "2.11.0",
     "core-js": "^2.5.4",
     "graphemer": "^1.4.0",
@@ -74,4 +76,4 @@
     "tslib": "^2.3.0",
     "typescript": "~5.6.3"
   }
-}
\ No newline at end of file
+}
diff --git a/projects/ng-select2-component/src/lib/select2-hint.component.ts b/projects/ng-select2-component/src/lib/select2-hint.component.ts
index b61663d..91bb164 100644
--- a/projects/ng-select2-component/src/lib/select2-hint.component.ts
+++ b/projects/ng-select2-component/src/lib/select2-hint.component.ts
@@ -1,4 +1,4 @@
 import { Directive } from '@angular/core';
 
-@Directive({ selector: 'select2-hint' })
+@Directive({ selector: 'select2-hint, ng-select2-hint' })
 export class Select2Hint {}
diff --git a/projects/ng-select2-component/src/lib/select2-label.component.ts b/projects/ng-select2-component/src/lib/select2-label.component.ts
index 3a54069..b562314 100644
--- a/projects/ng-select2-component/src/lib/select2-label.component.ts
+++ b/projects/ng-select2-component/src/lib/select2-label.component.ts
@@ -1,4 +1,4 @@
 import { Directive } from '@angular/core';
 
-@Directive({ selector: 'select2-label' })
+@Directive({ selector: 'select2-label, ng-select2-label' })
 export class Select2Label {}
diff --git a/projects/ng-select2-component/src/lib/select2.component.html b/projects/ng-select2-component/src/lib/select2.component.html
index 75f0778..0da75b2 100644
--- a/projects/ng-select2-component/src/lib/select2.component.html
+++ b/projects/ng-select2-component/src/lib/select2.component.html
@@ -1,5 +1,5 @@
 <label class="select2-label" (click)="toggleOpenAndClose()" [id]="idLabel()">
-  <ng-content select="select2-label"></ng-content>
+  <ng-content select="select2-label, ng-select2-label"></ng-content>
   @if (required()) {
     <span class="select2-required" aria-hidden="true"></span>
   }
@@ -136,7 +136,7 @@
   }
 
   <div class="select2-subscript-wrapper">
-    <ng-content select="select2-hint"></ng-content>
+    <ng-content select="select2-hint, ng-select2-hint"></ng-content>
   </div>
 </div>
 
diff --git a/projects/ng-select2-component/src/lib/select2.component.scss b/projects/ng-select2-component/src/lib/select2.component.scss
index f32ba66..e8d86b6 100644
--- a/projects/ng-select2-component/src/lib/select2.component.scss
+++ b/projects/ng-select2-component/src/lib/select2.component.scss
@@ -1,3 +1,4 @@
+
 .select2-label {
     color: var(--select2-label-text-color, #000);
 }
@@ -261,12 +262,12 @@
     }
 
     .select2-selection__reset {
-        color: var(--select2-reset-color, #999);
-        background: var(--select2-reset-background, transparent);
+        align-self: center;
         border: var(--select2-reset-border, none);
         border-radius: var(--select2-reset-border-radius, 4px);
+        background: var(--select2-reset-background, transparent);
         height: fit-content;
-        align-self: center;
+        color: var(--select2-reset-color, #999);
     }
 
     &.select2-container--disabled,
@@ -735,9 +736,9 @@
                     --select2-material-underline-disabled,
                     linear-gradient(to right, rgba(0, 0, 0, 0.26) 0, rgba(0, 0, 0, 0.26) 33%, transparent 0)
                 );
+                background-position: 0 bottom;
                 background-size: 4px 1px;
                 background-repeat: repeat-x;
-                background-position: 0 bottom;
             }
         }
         &.select2-container--readonly .select2-selection--single,
@@ -747,9 +748,9 @@
                     --select2-material-underline-readonly,
                     linear-gradient(to right, rgba(0, 0, 0, 0.26) 0, rgba(0, 0, 0, 0.26) 33%, transparent 0)
                 );
+                background-position: 0 bottom;
                 background-size: 4px 1px;
                 background-repeat: repeat-x;
-                background-position: 0 bottom;
             }
         }
     }
diff --git a/projects/ng-select2-component/src/lib/select2.component.ts b/projects/ng-select2-component/src/lib/select2.component.ts
index 3da4738..7c7ce1a 100644
--- a/projects/ng-select2-component/src/lib/select2.component.ts
+++ b/projects/ng-select2-component/src/lib/select2.component.ts
@@ -64,7 +64,7 @@ const ON_OPEN_KEYS: (string | KeyInfo)[] = ['Home', 'End', 'PageUp', 'PageDown']
 const CLOSE_KEYS: (string | KeyInfo)[] = ['Escape', 'Tab', { key: 'ArrowUp', altKey: true }];
 
 @Component({
-    selector: 'select2',
+    selector: 'select2, ng-select2',
     templateUrl: './select2.component.html',
     styleUrls: ['./select2.component.scss'],
     imports: [CdkOverlayOrigin, NgTemplateOutlet, CdkConnectedOverlay, InfiniteScrollDirective],
diff --git a/src/app/app-examples.component.html b/src/app/app-examples.component.html
index 1706a61..d7d2b47 100644
--- a/src/app/app-examples.component.html
+++ b/src/app/app-examples.component.html
@@ -1,4 +1,5 @@
-<h2>Examples</h2>
+
+<h2>{{ 'Examples' | transloco }}</h2>
 
 <label for="disabled">overlay : </label>
 <input id="disabled" type="checkbox" [(ngModel)]="overlay" />
diff --git a/src/app/app-examples.component.ts b/src/app/app-examples.component.ts
index 1e2a196..d3798e3 100644
--- a/src/app/app-examples.component.ts
+++ b/src/app/app-examples.component.ts
@@ -1,27 +1,58 @@
 import { JsonPipe } from '@angular/common';
 import { Component } from '@angular/core';
-import { FormsModule, ReactiveFormsModule, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
-
-
-
-import { Select2AutoCreateEvent, Select2Data, Select2ScrollEvent, Select2SearchEvent, Select2SelectionOverride, Select2UpdateEvent, Select2UpdateValue } from 'projects/ng-select2-component/src/public_api';
-
-
-
-import { data1, data13, data17, data18, data19, data2, data22, data23, data24, data26, data28, data3, data31en, data31fr, data31ja, data35, data35b, data5, data6, data8 } from './app.data';
-
-
+import {
+    FormsModule,
+    ReactiveFormsModule,
+    UntypedFormBuilder,
+    UntypedFormControl,
+    UntypedFormGroup,
+    Validators,
+} from '@angular/forms';
+
+import { TranslocoModule } from '@jsverse/transloco';
+
+import {
+    Select2AutoCreateEvent,
+    Select2Data,
+    Select2ScrollEvent,
+    Select2SearchEvent,
+    Select2SelectionOverride,
+    Select2UpdateEvent,
+    Select2UpdateValue,
+} from 'projects/ng-select2-component/src/public_api';
+
+import {
+    data1,
+    data2,
+    data3,
+    data5,
+    data6,
+    data8,
+    data13,
+    data17,
+    data18,
+    data19,
+    data22,
+    data23,
+    data24,
+    data26,
+    data28,
+    data31en,
+    data31fr,
+    data31ja,
+    data35,
+    data35b,
+} from './app.data';
 
 import { Select2Hint } from '../../projects/ng-select2-component/src/lib/select2-hint.component';
 import { Select2Label } from '../../projects/ng-select2-component/src/lib/select2-label.component';
 import { Select2 } from '../../projects/ng-select2-component/src/lib/select2.component';
 
-
 @Component({
     selector: 'app-root',
     templateUrl: './app-examples.component.html',
     styleUrls: ['./app-examples.component.scss'],
-    imports: [FormsModule, ReactiveFormsModule, Select2, Select2Hint, Select2Label, JsonPipe],
+    imports: [FormsModule, ReactiveFormsModule, Select2, Select2Hint, Select2Label, JsonPipe, TranslocoModule],
 })
 export class AppExamplesComponent {
     data1 = data1;
@@ -89,7 +120,7 @@ export class AppExamplesComponent {
     value18 = '';
     value19 = '';
     value20 = '';
-    value21 :string | null | undefined = 'foo6';
+    value21: string | null | undefined = 'foo6';
     value22 = '';
     value23 = '';
     value24 = '';
@@ -114,10 +145,8 @@ export class AppExamplesComponent {
     value37 = ['AK', 'NY', 'NC', 'RI'];
 
     selectionOverride: Select2SelectionOverride = params => {
-        return `Selection (${params.size}${(
-            params.options?.length || 0) > 0
-            ? ': ' + params.options!.map(e => e.label).join(', ')
-            : ''
+        return `Selection (${params.size}${
+            (params.options?.length || 0) > 0 ? ': ' + params.options!.map(e => e.label).join(', ') : ''
         }) `;
     };
 
@@ -259,4 +288,4 @@ export class AppExamplesComponent {
                 break;
         }
     }
-}
+}
\ No newline at end of file
diff --git a/src/app/app-gen.component.html b/src/app/app-gen.component.html
index e6fbddf..fdfdbe8 100644
--- a/src/app/app-gen.component.html
+++ b/src/app/app-gen.component.html
@@ -2,40 +2,40 @@ <h2>Generator</h2>
 
 <div class="cols">
   <div [formGroup]="ctrlForm">
-    <h4>data</h4>
+    <h4>{{ 'Data' | transloco }}</h4>
     <div>
-      <label for="json">json (for <code>[data]</code>) : </label>
+      <label for="json">json (for <code>[data]</code>)</label>
       <textarea formControlName="json" id="json"></textarea>
       <div class="error" [innerHTML]="jsonError"></div>
     </div>
-    <h4>tags</h4>
+    <h4>{{ 'Tags' | transloco }}</h4>
     <div>
-      <label for="label">label : </label>
+      <label for="label">label</label>
       <input type="text" formControlName="label" id="label" />
     </div>
     <div>
-      <label for="hint">hint : </label>
+      <label for="hint">hint</label>
       <input type="text" formControlName="hint" id="hint" />
     </div>
-    <h4>parameters</h4>
+    <h4>{{ 'Parameters' | transloco }}</h4>
     <div>
-      <label for="disabled">disabled : </label>
+      <label for="disabled">disabled</label>
       <input type="checkbox" formControlName="disabled" id="disabled" />
     </div>
     <div>
-        <label for="readonly">readonly : </label>
-        <input type="checkbox" formControlName="readonly" id="readonly" />
+      <label for="readonly">readonly</label>
+      <input type="checkbox" formControlName="readonly" id="readonly" />
     </div>
     <div>
-      <label for="overlay">overlay : </label>
+      <label for="overlay">overlay</label>
       <input type="checkbox" formControlName="overlay" id="overlay" />
     </div>
     <div>
-      <label for="minCharForSearch">minCharForSearch (0) : </label>
+      <label for="minCharForSearch">minCharForSearch (0)</label>
       <input type="number" formControlName="minCharForSearch" id="minCharForSearch" min="0" />
     </div>
     <div>
-      <label for="minCountForSearch">minCountForSearch (6) : </label>
+      <label for="minCountForSearch">minCountForSearch (6)</label>
       <input type="number" formControlName="minCountForSearch" id="minCountForSearch" min="0" />
     </div>
     <div>
@@ -47,23 +47,23 @@ <h4>parameters</h4>
       </select>
     </div>
     <div>
-      <label for="placeholder">placeholder : </label>
+      <label for="placeholder">placeholder</label>
       <input type="text" formControlName="placeholder" id="placeholder" />
     </div>
     <div>
-      <label for="noResultMessage">noResultMessage : </label>
+      <label for="noResultMessage">noResultMessage</label>
       <input type="text" formControlName="noResultMessage" id="noResultMessage" />
     </div>
     <div>
-      <label for="multiple">multiple : </label>
+      <label for="multiple">multiple</label>
       <input type="checkbox" formControlName="multiple" id="multiple" />
     </div>
     <div [class.hide]="ctrlForm.value?.multiple ?? false">
-      <label for="resettable">resettable : </label>
+      <label for="resettable">resettable</label>
       <input type="checkbox" formControlName="resettable" id="resettable" />
     </div>
     <div [class.hide]="ctrlForm.value?.multiple">
-      <label for="resetSelectedValue">resetSelectedValue : </label>
+      <label for="resetSelectedValue">resetSelectedValue</label>
       <select formControlName="resetSelectedValue" id="resetSelectedValue">
         <option [value]="undefined">undefined</option>
         <option [value]="null">null</option>
@@ -76,31 +76,31 @@ <h4>parameters</h4>
       </select>
     </div>
     <div>
-      <label for="autoCreate">autoCreate : </label>
+      <label for="autoCreate">autoCreate</label>
       <input type="checkbox" formControlName="autoCreate" id="autoCreate" />
     </div>
     <div>
-      <label for="limitSelection">limitSelection (0) : </label>
+      <label for="limitSelection">limitSelection (0)</label>
       <input type="number" formControlName="limitSelection" id="limitSelection" />
     </div>
     <div>
-      <label for="grid">grid (4 or '100px') : </label>
+      <label for="grid">grid ({{ "4 or '100px'" | transloco }})</label>
       <input type="string" formControlName="grid" id="grid" />
     </div>
     <div [class.hide]="!ctrlForm.value?.multiple">
-      <label for="hideSelectedItems">hideSelectedItems : </label>
+      <label for="hideSelectedItems">hideSelectedItems</label>
       <input type="checkbox" formControlName="hideSelectedItems" id="hideSelectedItems" />
     </div>
     <div>
-      <label for="resultMaxHeight">resultMaxHeight ('200px') : </label>
+      <label for="resultMaxHeight">resultMaxHeight ('200px')</label>
       <input type="text" formControlName="resultMaxHeight" id="resultMaxHeight" />
     </div>
     <div>
-      <label for="maxResults">maxResults (0 = infinity) : </label>
+      <label for="maxResults">maxResults ({{ "0 = infinity" | transloco }})</label>
       <input type="text" formControlName="maxResults" id="maxResults" />
     </div>
     <div>
-      <label for="maxResultsMessage">maxResultsMessage ('Too much result...') : </label>
+      <label for="maxResultsMessage">maxResultsMessage ('Too much result...')</label>
       <input type="text" formControlName="maxResultsMessage" id="maxResultsMessage" />
     </div>
     <div>
@@ -112,19 +112,19 @@ <h4>parameters</h4>
       </select>
     </div>
     <div>
-      <label for="infiniteScroll">infiniteScroll : </label>
+      <label for="infiniteScroll">infiniteScroll</label>
       <input type="checkbox" formControlName="infiniteScroll" id="infiniteScroll" />
     </div>
     <div [class.hide]="!ctrlForm.value?.infiniteScrollDistance">
-      <label for="infiniteScrollDistance">infiniteScrollDistance (1.5) : </label>
+      <label for="infiniteScrollDistance">infiniteScrollDistance (1.5)</label>
       <input type="number" formControlName="infiniteScrollDistance" id="infiniteScrollDistance" />
     </div>
     <div [class.hide]="!ctrlForm.value?.infiniteScroll">
-      <label for="infiniteScrollThrottle">infiniteScrollThrottle (150) : </label>
+      <label for="infiniteScrollThrottle">infiniteScrollThrottle (150)</label>
       <input type="number" formControlName="infiniteScrollThrottle" id="infiniteScrollThrottle" />
     </div>
     <div>
-      <label for="styleMode">styleMode : </label>
+      <label for="styleMode">styleMode</label>
       <select formControlName="styleMode" id="listPstyleModeosition">
         <option value="">default</option>
         <option value="material">material</option>
@@ -133,15 +133,15 @@ <h4>parameters</h4>
       </select>
     </div>
 
-    <h5>Selection</h5>
-    <div>selectionOverride:</div>
+    <h5>{{ 'Selection' | transloco }}</h5>
+    <div>selectionOverride</div>
     <div>
-      <label for="selectionOverrideFunction"> - function : </label>
+      <label for="selectionOverrideFunction"> - function</label>
       <input type="checkbox" formControlName="selectionOverrideFunction" id="selectionOverrideFunction" />
     </div>
     <div>
       <label for="selectionOverrideString">
-        - string: <br /><small><code>%size%</code> = selected item count </small></label
+        - string: <br /><small><code>%size%</code> = {{ 'selected item count' | transloco }} </small></label
       >
       <input
         type="text"
@@ -151,14 +151,14 @@ <h5>Selection</h5>
       />
     </div>
     <div>
-      <label for="selectionNoWrap">selectionOverride : </label>
+      <label for="selectionNoWrap">selectionOverride</label>
       <input type="checkbox" formControlName="selectionNoWrap" id="selectionNoWrap" />
     </div>
 
     @if (ctrlForm.value?.multiple) {
-      <h5>Select all</h5>
+      <h5>{{ 'Select all' | transloco }}</h5>
       <div>
-        <label for="showSelectAll">showSelectAll : </label>
+        <label for="showSelectAll">showSelectAll</label>
         <input type="checkbox" formControlName="showSelectAll" id="showSelectAll" />
       </div>
       @if (ctrlForm.value?.showSelectAll) {
@@ -173,9 +173,9 @@ <h5>Select all</h5>
       }
     }
 
-    <h5>Templates</h5>
+    <h5>{{ 'Templates' | transloco }}</h5>
     <div>
-      <label for="template">template style :</label>
+      <label for="template">template style</label>
       <select formControlName="template" id="template">
         <option value="none">None</option>
         <option value="ref">Unique template</option>
@@ -184,7 +184,7 @@ <h5>Templates</h5>
       </select>
     </div>
     <div>
-      <label for="templateSelection">template selection style :</label>
+      <label for="templateSelection">template selection style</label>
       <select formControlName="templateSelection" id="templateSelection">
         <option value="none">None</option>
         <option value="ref">Unique template</option>
@@ -193,48 +193,55 @@ <h5>Templates</h5>
       </select>
     </div>
     <div>
-      <label for="noLabelTemplate">noLabelTemplate : </label>
+      <label for="noLabelTemplate">noLabelTemplate</label>
       <input type="checkbox" formControlName="noLabelTemplate" id="noLabelTemplate" />
     </div>
 
-    <h4>Events</h4>
+    <h5>{{ 'HTML standard' | transloco }}</h5>
+
+    <div>
+      <label for="guideLineName">{{ 'Web Component guide line name' | transloco }}</label>
+      <input type="checkbox" formControlName="guideLineName" id="guideLineName" />
+    </div>
+
+    <h4>{{ 'Events' | transloco }}</h4>
     <div>
-      <label for="update">update: </label>
+      <label for="update">update</label>
       <input type="checkbox" formControlName="update" id="update" />
     </div>
     <div>
-      <label for="open">open: </label>
+      <label for="open">open</label>
       <input type="checkbox" formControlName="open" id="open" />
     </div>
     <div>
-      <label for="close">close: </label>
+      <label for="close">close</label>
       <input type="checkbox" formControlName="close" id="close" />
     </div>
     <div>
-      <label for="focus">focus: </label>
+      <label for="focus">focus</label>
       <input type="checkbox" formControlName="focus" id="focus" />
     </div>
     <div>
-      <label for="blur">blur: </label>
+      <label for="blur">blur</label>
       <input type="checkbox" formControlName="blur" id="blur" />
     </div>
     <div>
-      <label for="search">search: </label>
+      <label for="search">search</label>
       <input type="checkbox" formControlName="search" id="search" />
       (Required: <code>customSearchEnabled</code>)
     </div>
     <div>
-      <label for="scroll">scroll: </label>
+      <label for="scroll">scroll</label>
       <input type="checkbox" formControlName="scroll" id="scroll" />
     </div>
     <div>
-      <label for="removeOption">removeOption: </label>
+      <label for="removeOption">removeOption</label>
       <input type="checkbox" formControlName="removeOption" id="removeOption" />
     </div>
   </div>
   <div>
     <div class="result">
-      <h4>HTML render</h4>
+      <h4>{{ 'HTML render' | transloco }}</h4>
       @if (ctrlForm.value) {
         @let value = ctrlForm.value;
         <select2
@@ -270,16 +277,18 @@ <h4>HTML render</h4>
           [removeAllText]="value?.removeAllText || 'Remove all'"
           [selectAllText]="value?.selectAllText || 'Select all'"
           [templates]="
-            $any(getTemplate(
-              template,
-              option,
-              group,
-              template1,
-              template2,
-              optionSelection,
-              template2Selection,
-              template3Selection
-            ))
+            $any(
+              getTemplate(
+                template,
+                option,
+                group,
+                template1,
+                template2,
+                optionSelection,
+                template2Selection,
+                template3Selection
+              )
+            )
           "
           [templateSelection]="getTemplateSelection(templateSelection)"
           (update)="_event('update', $event)"
@@ -322,7 +331,7 @@ <h4>HTML render</h4>
         </select2>
       }
 
-      <h4>HTML Code</h4>
+      <h4>{{ 'HTML Code' | transloco }}</h4>
 
       <div class="code">
         <code><pre [highlight]="html" language="html"></pre></code>
diff --git a/src/app/app-gen.component.scss b/src/app/app-gen.component.scss
index 3df49c3..162402b 100644
--- a/src/app/app-gen.component.scss
+++ b/src/app/app-gen.component.scss
@@ -34,5 +34,5 @@ textarea#json {
 
 .result {
     position: sticky;
-    top: 0;
+    top: 90px;
 }
diff --git a/src/app/app-gen.component.ts b/src/app/app-gen.component.ts
index 7e1992a..ef801db 100644
--- a/src/app/app-gen.component.ts
+++ b/src/app/app-gen.component.ts
@@ -1,9 +1,14 @@
 import { AfterContentInit, Component, TemplateRef } from '@angular/core';
-import { FormsModule, ReactiveFormsModule, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
-
-
+import {
+    FormsModule,
+    ReactiveFormsModule,
+    UntypedFormBuilder,
+    UntypedFormControl,
+    UntypedFormGroup,
+} from '@angular/forms';
 
 import { Json2html, Json2htmlAttr, Json2htmlRef } from '@ikilote/json2html';
+import { TranslocoModule } from '@jsverse/transloco';
 
 import * as Bowser from 'bowser';
 import { Highlight } from 'ngx-highlightjs';
@@ -19,7 +24,7 @@ import { Select2 } from '../../projects/ng-select2-component/src/lib/select2.com
     selector: 'app-gen',
     templateUrl: './app-gen.component.html',
     styleUrls: ['./app-gen.component.scss'],
-    imports: [FormsModule, ReactiveFormsModule, Select2, Select2Label, Select2Hint, Highlight],
+    imports: [FormsModule, ReactiveFormsModule, Select2, Select2Label, Select2Hint, Highlight, TranslocoModule],
 })
 export class AppGenComponent implements AfterContentInit {
     data = data24;
@@ -71,6 +76,8 @@ export class AppGenComponent implements AfterContentInit {
             template: new UntypedFormControl(),
             templateSelection: new UntypedFormControl(),
             noLabelTemplate: new UntypedFormControl(),
+            // HTML standard
+            guideLineName: new UntypedFormControl(),
             // event
             update: new UntypedFormControl(),
             open: new UntypedFormControl(),
@@ -173,24 +180,35 @@ export class AppGenComponent implements AfterContentInit {
     }
 
     codeGeneration() {
+        const value = this.ctrlForm.value;
+
+        // tag root
+
         const json: Json2htmlRef = {
-            tag: 'select2',
+            tag: value.guideLineName ? 'ng-select2' : 'select2',
             attrs: {
                 '[data]': 'data',
             },
             body: [],
         };
-        const value = this.ctrlForm.value;
         const attrs: Json2htmlAttr = json.attrs!;
         const body = json.body as Json2htmlRef[];
 
         // tags
 
         if (value.label) {
-            body.push({ tag: 'select2-label', body: value.label, inline: true });
+            body.push({
+                tag: value.guideLineName ? 'ng-select2-label' : 'select2-label',
+                body: value.label,
+                inline: true,
+            });
         }
         if (value.hint) {
-            body.push({ tag: 'select2-hint', body: value.hint, inline: true });
+            body.push({
+                tag: value.guideLineName ? 'ng-select2-hint' : 'select2-hint',
+                body: value.hint,
+                inline: true,
+            });
         }
 
         // parameters
@@ -472,4 +490,4 @@ export class AppGenComponent implements AfterContentInit {
     private _testBoolean(value: any): null | undefined {
         return value ? null : undefined;
     }
-}
+}
\ No newline at end of file
diff --git a/src/app/app-home.component.html b/src/app/app-home.component.html
new file mode 100644
index 0000000..6cb6772
--- /dev/null
+++ b/src/app/app-home.component.html
@@ -0,0 +1,44 @@
+<h1>
+  <code><pre>&#60;select2&#62;&#60;/select2&#62;</pre></code>
+</h1>
+
+<p>
+  {{ 'Extended version of the basic HTML select.' | transloco }}
+</p>
+
+<div class="container">
+  <div class="row">
+    <div class="col-md-4">
+      <select2 [data]="data"></select2>
+    </div>
+  </div>
+
+  <div>
+    <h3>
+         {{ 'Installation' | transloco }}
+    </h3>
+    <div>
+        <code>npm install ng-select2-component</code>
+    </div>
+
+
+    <h3>
+        {{ 'Basic usage' | transloco }}
+    </h3>
+    <h3>
+        HTML
+    </h3>
+    <div>
+        <code><pre [highlight]="html" language="html"></pre></code>
+    </div>
+    <h3>
+        Typescript
+    </h3>
+    <div>
+        <code><pre [highlight]="ts" language="ts"></pre></code>
+    </div>
+
+
+  </div>
+
+</div>
diff --git a/src/app/app-home.component.scss b/src/app/app-home.component.scss
new file mode 100644
index 0000000..2e77e32
--- /dev/null
+++ b/src/app/app-home.component.scss
@@ -0,0 +1,5 @@
+
+
+select2 {
+    width: 300px;
+}
diff --git a/src/app/app-home.component.ts b/src/app/app-home.component.ts
new file mode 100644
index 0000000..e058d5a
--- /dev/null
+++ b/src/app/app-home.component.ts
@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+
+import { TranslocoModule } from '@jsverse/transloco';
+
+import { Highlight } from 'ngx-highlightjs';
+import { Select2 } from 'projects/ng-select2-component/src/public_api';
+
+import { data1 } from './app.data';
+
+@Component({
+    selector: 'app-home',
+    templateUrl: './app-home.component.html',
+    styleUrls: ['./app-home.component.scss'],
+    imports: [Select2, TranslocoModule, Highlight],
+})
+export class AppHomeComponent {
+    data = data1;
+
+    ts = `import { Select2 } from 'ng-select2-component';
+
+@Component({
+    selector: 'app-root',
+    templateUrl: './app-root.component.html',
+    styleUrls: ['./app-root.component.scss'],
+    imports: [Select2],
+})
+export class AppHomeComponent {
+    data = : Select2Data = [
+        { value: 'foo', label: 'foo' },
+        { value: 'bar', label: 'bar' },
+        { value: 'baz', label: 'baz' },
+    ];
+}
+    `;
+    html = `<select2 [data]="data"></select2>`;
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 0a00544..67ffceb 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,10 +1,37 @@
-<a href="https://github.com/Harvest-Dev/ng-select2/tree/master/src" target="_blank">the source code of the demo</a>
-
 <nav>
-  <ul>
-    <li><a routerLink="/examples" routerLinkActive="active">Examples</a></li>
-    <li><a routerLink="/generator" routerLinkActive="active">Code generator</a></li>
-  </ul>
+  <a href="https://github.com/Harvest-Dev/ng-select2"
+    ><img
+      decoding="async"
+      width="149"
+      height="149"
+      src="https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png"
+      class="attachment-full size-full"
+      alt="Fork me on GitHub"
+      loading="lazy"
+  /></a>
+  <div class="container">
+    <div class="row">
+      <div class="col-md-10">
+        <ul class="row">
+          <li class="col-2"><a routerLink="/" routerLinkActive="home">{{ 'Home' | transloco }}</a></li>
+          <li class="col-2"><a routerLink="/examples" routerLinkActive="active">{{ 'Examples' | transloco }}</a></li>
+          <li class="col-4"><a routerLink="/generator" routerLinkActive="active">{{ 'Code generator' | transloco }}</a></li>
+        </ul>
+      </div>
+      <div class="col-md-2">
+        <select [(ngModel)]="language" (ngModelChange)="changeLanguage($event)" id="language">
+          <option value="en">English</option>
+          <option value="fr">Français</option>
+        </select>
+      </div>
+    </div>
+  </div>
 </nav>
 
-<router-outlet></router-outlet>
+<main class="container">
+  <div class="row">
+    <div class="col">
+      <router-outlet></router-outlet>
+    </div>
+  </div>
+</main>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index e8c6249..0a2dd5e 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -94,12 +94,25 @@
 }
 
 nav {
+    background-color: #ddd;
+    padding: 15px;
+    position: sticky;
+    top: 0;
+    z-index: 100000;
+
     ul {
-        display: block;
+        list-style: none;
+        padding: 0;
+        font-size: 20px;
+        margin-bottom: 5px;
     }
 
-    li {
-        display: inline-block;
-        padding: 0 15px;
-    }
+}
+
+
+img{
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 100000;
 }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7f45fd1..894a32a 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,4 +1,6 @@
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, ViewEncapsulation, inject } from '@angular/core';
+
+import { TranslocoService } from '@jsverse/transloco';
 
 @Component({
     selector: 'app-root',
@@ -7,4 +9,15 @@ import { Component, ViewEncapsulation } from '@angular/core';
     styleUrls: ['./app.component.scss'],
     standalone: false,
 })
-export class AppComponent {}
+export class AppComponent {
+    private readonly translate = inject(TranslocoService);
+
+    language = 'en';
+
+    changeLanguage(lang: string) {
+        this.translate.load(lang).subscribe(() => {
+            this.translate.setActiveLang(lang);
+        });
+        document.documentElement.setAttribute('lang', lang);
+    }
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 71997fc..d3ba3d6 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,3 +1,4 @@
+import { provideHttpClient } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
@@ -8,6 +9,7 @@ import { AppExamplesComponent } from './app-examples.component';
 import { AppGenComponent } from './app-gen.component';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app.routing';
+import { TranslocoRootModule } from './transloco-root.module';
 
 declare var require: any;
 
@@ -26,8 +28,17 @@ export function hljsLanguages() {
 
 @NgModule({
     declarations: [AppComponent],
-    imports: [BrowserModule, AppRoutingModule, FormsModule, HighlightModule, AppExamplesComponent, AppGenComponent],
+    imports: [
+        BrowserModule,
+        AppRoutingModule,
+        FormsModule,
+        HighlightModule,
+        TranslocoRootModule,
+        AppExamplesComponent,
+        AppGenComponent,
+    ],
     providers: [
+        provideHttpClient(),
         {
             provide: HIGHLIGHT_OPTIONS,
             useValue: {
diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts
index 5c60c73..53593b8 100644
--- a/src/app/app.routing.ts
+++ b/src/app/app.routing.ts
@@ -3,13 +3,14 @@ import { RouterModule, Routes } from '@angular/router';
 
 
 const routes: Routes = [
+    { path: 'home', loadComponent: () => import('./app-home.component').then(m => m.AppHomeComponent) },
     { path: 'examples', loadComponent: () => import('./app-examples.component').then(m => m.AppExamplesComponent) },
     { path: 'generator', loadComponent: () => import('./app-gen.component').then(m => m.AppGenComponent) },
-    { path: '**', loadComponent: () => import('./app-examples.component').then(m => m.AppExamplesComponent) },
+    { path: '**', loadComponent: () => import('./app-home.component').then(m => m.AppHomeComponent) },
 ];
 
 @NgModule({
-    imports: [RouterModule.forRoot(routes)],
+    imports: [RouterModule.forRoot(routes, { useHash: true })],
     exports: [RouterModule],
 })
 export class AppRoutingModule {}
\ No newline at end of file
diff --git a/src/app/transloco-loader.ts b/src/app/transloco-loader.ts
new file mode 100644
index 0000000..c939f0d
--- /dev/null
+++ b/src/app/transloco-loader.ts
@@ -0,0 +1,12 @@
+import { inject, Injectable } from "@angular/core";
+import { Translation, TranslocoLoader } from "@jsverse/transloco";
+import { HttpClient } from "@angular/common/http";
+
+@Injectable({ providedIn: 'root' })
+export class TranslocoHttpLoader implements TranslocoLoader {
+    private http = inject(HttpClient);
+
+    getTranslation(lang: string) {
+        return this.http.get<Translation>(`/assets/i18n/${lang}.json`);
+    }
+}
diff --git a/src/app/transloco-root.module.ts b/src/app/transloco-root.module.ts
new file mode 100644
index 0000000..faa6cf9
--- /dev/null
+++ b/src/app/transloco-root.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+
+import { TranslocoModule, provideTransloco } from '@jsverse/transloco';
+
+import { TranslocoHttpLoader } from './transloco-loader';
+
+import { environment } from '../environments/environment';
+
+@NgModule({
+    exports: [TranslocoModule],
+    providers: [
+        provideTransloco({
+            config: {
+                availableLangs: ['en', 'fr'],
+                defaultLang: 'en',
+                // Remove this option if your application doesn't support changing language in runtime.
+                reRenderOnLangChange: true,
+                prodMode: environment.production,
+            },
+            loader: TranslocoHttpLoader,
+        }),
+    ],
+})
+export class TranslocoRootModule {}
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/src/assets/i18n/en.json
@@ -0,0 +1 @@
+{}
diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json
new file mode 100644
index 0000000..dc51bac
--- /dev/null
+++ b/src/assets/i18n/fr.json
@@ -0,0 +1,22 @@
+{
+  "Home": "Accueil",
+  "Basic usage": "Utilisation de base",
+  "Examples": "Exemples",
+  "Code generator": "Générateur de code",
+  "Extended version of the basic HTML select.": "Version étendu du select HTML de base.",
+  "Generator": "Générateur",
+  "Data": "Données",
+  "Tags": "Balises",
+  "Parameters": "Paramètres",
+  "4 or '100px'": "4 ou '100px'",
+  "0 = infinity": "0 = infini",
+  "selected item count": "nombre d'éléments sélectionnés",
+  "Selection": "Sélection",
+  "Select all": "Sélectionner tout",
+  "HTML standard": "Standard HTML",
+  "Events": "Événements",
+  "Web Component guide line name": "Nom recommandé pour les Web Component",
+  "Required": "Requis",
+  "HTML render": "Rendu HTML",
+  "HTML Code": "Code HTML"
+}
diff --git a/src/styles.css b/src/styles.css
index 90d4ee0..2c6ce79 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1 +1,17 @@
 /* You can add global styles to this file, and also import other style files */
+
+@import '../node_modules/bootstrap/dist/css/bootstrap-grid.css';
+
+body {
+    background-color: #fff;
+    color: #000;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 1.7em;
+    padding: 0;
+    margin: 0;
+    font-family:
+        Open Sans,
+        Arial,
+        sans-serif;
+}
diff --git a/transloco.config.ts b/transloco.config.ts
new file mode 100644
index 0000000..ba22c0b
--- /dev/null
+++ b/transloco.config.ts
@@ -0,0 +1,9 @@
+import {TranslocoGlobalConfig} from '@jsverse/transloco-utils';
+    
+const config: TranslocoGlobalConfig = {
+  rootTranslationsPath: 'src/assets/i18n/',
+  langs: [ 'en', 'fr' ],
+  keysManager: {}
+};
+    
+export default config;
\ No newline at end of file