diff --git a/src/app/user-management/setup-user/setup-user.component.html b/src/app/user-management/setup-user/setup-user.component.html
index 61730c5..ed18c5b 100644
--- a/src/app/user-management/setup-user/setup-user.component.html
+++ b/src/app/user-management/setup-user/setup-user.component.html
@@ -79,9 +79,6 @@
                                           ]
                                         "
                                       >
-                                        {{
-                                          "emptySpaceRestriction" | translate
-                                        }}
                                       </div>
                                     </div>
                                   </div>
diff --git a/src/app/user-management/setup-user/setup-user.component.ts b/src/app/user-management/setup-user/setup-user.component.ts
index 16386bd..7a077bc 100644
--- a/src/app/user-management/setup-user/setup-user.component.ts
+++ b/src/app/user-management/setup-user/setup-user.component.ts
@@ -238,12 +238,12 @@ export class SetupUserComponent implements OnInit {
     this.userForm = this.fb.group({
       userId: ['', [
         Validators.required,
-        Validators.minLength(5),
+        Validators.minLength(3),
         Validators.pattern('^[a-zA-Z0-9]*$')
       ]],
       userFullname: ['', [
         Validators.required,
-        Validators.minLength(5),
+        Validators.minLength(3),
         Validators.maxLength(500)
       ]],
       defaultPassword: ['', [
diff --git a/src/app/user-permissions/user-permissions.component.html b/src/app/user-permissions/user-permissions.component.html
index 82aa6f5..f3a57e8 100644
--- a/src/app/user-permissions/user-permissions.component.html
+++ b/src/app/user-permissions/user-permissions.component.html
@@ -1,13 +1,11 @@
 <div class="page-content">
   <div class="container-fluid">
-
     <!-- User Selection Card -->
     <div class="card shadow-sm mb-4">
       <div class="card-body">
         <form [formGroup]="permission" class="row align-items-center">
-
           <label class="col-md-2 col-form-label fw-semibold">
-            {{ 'userCode' | translate }}
+            {{ "userCode" | translate }}
           </label>
 
           <div class="col-md-6">
@@ -15,7 +13,7 @@
               class="form-select"
               formControlName="userCode"
               [items]="users"
-              bindLabel="userName"
+              bindLabel="displayName"
               bindValue="userId"
               placeholder="{{ 'choose' | translate }}"
               (change)="onUserChange()"
@@ -24,10 +22,22 @@
               [dropdownPosition]="'auto'"
               [virtualScroll]="true"
               [bufferAmount]="20"
-              appendTo="body">
+              appendTo="body"
+            >
+              <!-- Custom template for dropdown options -->
+              <ng-template ng-option-tmp let-item="item">
+                <div class="d-flex flex-column">
+                  <span class="fw-medium">{{ item.userName }}</span>
+                  <small class="text-muted">{{ item.userId }}</small>
+                </div>
+              </ng-template>
+
+              <!-- Optional: Custom template for selected item -->
+              <ng-template ng-label-tmp let-item="item">
+                <span>{{ item.userName }} ({{ item.userId }})</span>
+              </ng-template>
             </ng-select>
           </div>
-
         </form>
       </div>
     </div>
@@ -35,47 +45,60 @@
     <!-- Permissions Table Card -->
     <div class="card shadow-sm" *ngIf="showPermissions">
       <div class="card-body">
-
-        <h4 class="card-title mb-3">{{ 'permissions' | translate }}</h4>
+        <h4 class="card-title mb-3">{{ "permissions" | translate }}</h4>
 
         <div class="table-responsive scrollable-table">
-          <table class="table table-hover table-bordered table-sm permission-table">
+          <table
+            class="table table-hover table-bordered table-sm permission-table"
+          >
             <thead class="table-light">
               <tr>
-                <th style="width: 40px;"></th>
-                <th>{{ 'Permissions' | translate }}</th>
-                <th style="width: 120px;" class="text-center">{{ 'allow' | translate }}</th>
+                <th style="width: 40px"></th>
+                <th>{{ "Permissions" | translate }}</th>
+                <th style="width: 120px" class="text-center">
+                  {{ "allow" | translate }}
+                </th>
               </tr>
             </thead>
 
             <tbody>
-              <ng-container *ngTemplateOutlet="permissionRow; context: { nodes: permissions, level: 0 }"></ng-container>
+              <ng-container
+                *ngTemplateOutlet="
+                  permissionRow;
+                  context: { nodes: permissions, level: 0 }
+                "
+              ></ng-container>
             </tbody>
           </table>
         </div>
 
         <div class="text-end mt-3">
-          <button class="btn btn-primary btn-sm px-4" (click)="savePermissions()">
-            {{ 'save' | translate }}
+          <button
+            class="btn btn-primary btn-sm px-4"
+            (click)="savePermissions()"
+          >
+            {{ "save" | translate }}
           </button>
         </div>
-
       </div>
     </div>
-
   </div>
 </div>
 
 <!-- Recursive Permission Rows -->
 <ng-template #permissionRow let-nodes="nodes" let-level="level">
   <ng-container *ngFor="let node of nodes">
-
     <tr>
       <td class="text-center">
-        <span *ngIf="node.children?.length || node.buttons?.length"
-              class="expand-icon"
-              (click)="toggleExpand(node)">
-          <i class="bx" [ngClass]="node.expanded ? 'bx-chevron-down' : 'bx-chevron-right'"></i>
+        <span
+          *ngIf="node.children?.length || node.buttons?.length"
+          class="expand-icon"
+          (click)="toggleExpand(node)"
+        >
+          <i
+            class="bx"
+            [ngClass]="node.expanded ? 'bx-chevron-down' : 'bx-chevron-right'"
+          ></i>
         </span>
       </td>
 
@@ -84,18 +107,31 @@
       </td>
 
       <td class="text-center">
-        <input type="checkbox" [checked]="node.checked" (change)="toggleNode(node, $event)">
+        <input
+          type="checkbox"
+          [checked]="node.checked"
+          (change)="toggleNode(node, $event)"
+        />
       </td>
     </tr>
 
     <ng-container *ngIf="node.expanded">
       <ng-container *ngIf="node.children?.length">
-        <ng-container *ngTemplateOutlet="permissionRow; context: { nodes: node.children, level: level + 1 }"></ng-container>
+        <ng-container
+          *ngTemplateOutlet="
+            permissionRow;
+            context: { nodes: node.children, level: level + 1 }
+          "
+        ></ng-container>
       </ng-container>
       <ng-container *ngIf="node.buttons?.length">
-        <ng-container *ngTemplateOutlet="permissionRow; context: { nodes: node.buttons, level: level + 1 }"></ng-container>
+        <ng-container
+          *ngTemplateOutlet="
+            permissionRow;
+            context: { nodes: node.buttons, level: level + 1 }
+          "
+        ></ng-container>
       </ng-container>
     </ng-container>
-
   </ng-container>
 </ng-template>