diff --git a/Tn-manager/src/app/modules/groups-management/components/group-form/group-form.component.html b/Tn-manager/src/app/modules/groups-management/components/group-form/group-form.component.html
index 36834a89a..49360aef0 100644
--- a/Tn-manager/src/app/modules/groups-management/components/group-form/group-form.component.html
+++ b/Tn-manager/src/app/modules/groups-management/components/group-form/group-form.component.html
@@ -1,8 +1,10 @@
+
 <div class="modal" [class.show]="show" style="display: block" *ngIf="show">
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title">
+
           {{ isEdit ? ('GROUPS.ACTIONS.EDIT' | translate) : ('GROUPS.ACTIONS.CREATE' | translate) }}
         </h5>
         <button type="button" class="btn-close" (click)="onCancel()"></button>
@@ -14,15 +16,19 @@ <h5 class="modal-title">
             <div class="col-md-8">
               <div class="mb-3">
                 <label class="form-label required">{{ 'GROUPS.FIELDS.NAME' | translate }}</label>
-                <input type="text" 
-                       class="form-control" 
+                <tn-input type="text" 
                        formControlName="name"
                        [class.is-invalid]="f.name.invalid && f.name.touched"
-                       [placeholder]="'GROUPS.PLACEHOLDERS.NAME' | translate">
-                <div class="invalid-feedback" *ngIf="f.name.invalid && f.name.touched">
-                  <div *ngIf="f.name.errors?.['required']">{{ 'COMMON.VALIDATION.REQUIRED' | translate }}</div>
-                  <div *ngIf="f.name.errors?.['minlength']">{{ 'COMMON.VALIDATION.MIN_LENGTH' | translate: {'0': 2} }}</div>
-                </div>
+                       [placeholder]="'GROUPS.PLACEHOLDERS.NAME' | translate"
+                       [state]="f.name.invalid && f.name.touched ? 'error' : (f.name.valid ? 'success' : 'default')"
+                       [errorMessage]="f.name.errors?.['required']
+                          ? ('COMMON.VALIDATION.REQUIRED' | translate)
+                            : (f.name.errors?.['minlength']
+                           ? ('COMMON.VALIDATION.MIN_LENGTH' | translate: {'0': 2})
+                           : null)
+                 ">
+
+                </tn-input>
               </div>
             </div>
             <div class="col-md-4">
diff --git a/Tn-manager/src/app/modules/groups-management/components/group-form/group-form.component.ts b/Tn-manager/src/app/modules/groups-management/components/group-form/group-form.component.ts
index c2476bd0a..6f469d81f 100644
--- a/Tn-manager/src/app/modules/groups-management/components/group-form/group-form.component.ts
+++ b/Tn-manager/src/app/modules/groups-management/components/group-form/group-form.component.ts
@@ -3,11 +3,12 @@ import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
 import { GroupCard, GroupFormData } from '../../models/group-card.model';
+import { TnInputComponent } from '@shared/components';
 
 @Component({
   selector: 'app-group-form',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, TranslateModule],
+  imports: [CommonModule, ReactiveFormsModule, TranslateModule ,TnInputComponent],
   templateUrl: './group-form.component.html',
   styleUrls: ['./group-form.component.scss']
 })
@@ -16,7 +17,6 @@ export class GroupFormComponent implements OnChanges {
   @Input() group: GroupCard | null = null;
   @Output() save = new EventEmitter<GroupFormData>();
   @Output() cancel = new EventEmitter<void>();
-
   groupForm: FormGroup;
   previewImageError = false;