diff --git a/npm/ng-packs/package.json b/npm/ng-packs/package.json
index afaf4dafb1..6b46fa897a 100644
--- a/npm/ng-packs/package.json
+++ b/npm/ng-packs/package.json
@@ -44,7 +44,7 @@
   },
   "private": true,
   "devDependencies": {
-    "@abp/ng.theme.lepton-x": "~3.0.4",
+    "@abp/ng.theme.lepton-x": "~3.1.0-rc.2",
     "@abp/utils": "~8.1.0-rc.2",
     "@angular-devkit/build-angular": "~17.1.0",
     "@angular-devkit/core": "~17.1.0",
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.html
index 53f5f8dd96..4b47e8fbb1 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.html
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.html
@@ -1,9 +1,10 @@
 @if (form) {
-  @for (groupedProp of groupedPropList.items; track $index) {
+  @for (groupedProp of groupedPropList.items; track i; let i = $index) {
     <ng-container *abpPropData="let data; fromList: groupedProp.formPropList; withRecord: record">
-      @if(isAnyGroupMemberVisible($index, data) && groupedProp.group?.className){
-        <div [ngClass]="groupedProp.group?.className"
-             [attr.data-name]="groupedProp.group?.name || groupedProp.group?.className"
+      @if (isAnyGroupMemberVisible(i, data) && groupedProp.group?.className) {
+        <div
+          [ngClass]="groupedProp.group?.className"
+          [attr.data-name]="groupedProp.group?.name || groupedProp.group?.className"
         >
           <ng-container
             [ngTemplateOutlet]="propListTemplate"
@@ -12,36 +13,33 @@
           </ng-container>
         </div>
       } @else {
-          <ng-container
-            [ngTemplateOutlet]="propListTemplate"
-            [ngTemplateOutletContext]="{ groupedProp: groupedProp, data: data }"
-          >
-          </ng-container>
+        <ng-container
+          [ngTemplateOutlet]="propListTemplate"
+          [ngTemplateOutletContext]="{ groupedProp: groupedProp, data: data }"
+        >
+        </ng-container>
       }
     </ng-container>
-  } 
+  }
 }
 
 <ng-template let-groupedProp="groupedProp" let-data="data" #propListTemplate>
   @for (prop of groupedProp.formPropList; let first = $first; track prop.name) {
-    @if(prop.visible(data)) {
-      <ng-container
-        [formGroupName]="extraPropertiesKey"
-        *ngIf="extraProperties.controls[prop.name]; else tempDefault"
-      >
-        <abp-extensible-form-prop [prop]="prop" [data]="data" [class]="prop.className">
-        </abp-extensible-form-prop>
-      </ng-container>
-
-      <ng-template #tempDefault>
-        <abp-extensible-form-prop
-          [class]="prop.className"
-          *ngIf="form.get(prop.name)"
-          [prop]="prop"
-          [data]="data"
-          [first]="first"
-        ></abp-extensible-form-prop>
-      </ng-template>
+    @if (prop.visible(data)) {
+      @if (extraProperties.controls[prop.name]) {
+        <ng-container [formGroupName]="extraPropertiesKey">
+          <abp-extensible-form-prop [prop]="prop" [data]="data" [class]="prop.className" />
+        </ng-container>
+      } @else {
+        @if (form.get(prop.name)) {
+          <abp-extensible-form-prop
+            [class]="prop.className"
+            [prop]="prop"
+            [data]="data"
+            [first]="first"
+          />
+        }
+      }
     }
   }
 </ng-template>
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.ts
index 46e7d1ea53..455f8cdd99 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.ts
@@ -1,82 +1,84 @@
-import {TrackByService} from '@abp/ng.core';
+import { TrackByService } from '@abp/ng.core';
 import {
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component, inject,
-    Input,
-    Optional,
-    QueryList,
-    SkipSelf,
-    ViewChildren,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  inject,
+  Input,
+  Optional,
+  QueryList,
+  SkipSelf,
+  ViewChildren,
 } from '@angular/core';
-import {ControlContainer, ReactiveFormsModule, UntypedFormGroup} from '@angular/forms';
-import {EXTRA_PROPERTIES_KEY} from '../../constants/extra-properties';
-import {FormProp, FormPropList, GroupedFormPropList} from '../../models/form-props';
-import {ExtensionsService} from '../../services/extensions.service';
-import {EXTENSIONS_IDENTIFIER} from '../../tokens/extensions.token';
-import {selfFactory} from '../../utils/factory.util';
-import {ExtensibleFormPropComponent} from './extensible-form-prop.component';
-import {CommonModule} from "@angular/common";
-import {PropDataDirective} from "../../directives/prop-data.directive";
+import { ControlContainer, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { EXTRA_PROPERTIES_KEY } from '../../constants/extra-properties';
+import { FormProp, FormPropList, GroupedFormPropList } from '../../models/form-props';
+import { ExtensionsService } from '../../services/extensions.service';
+import { EXTENSIONS_IDENTIFIER } from '../../tokens/extensions.token';
+import { selfFactory } from '../../utils/factory.util';
+import { ExtensibleFormPropComponent } from './extensible-form-prop.component';
+import { CommonModule } from '@angular/common';
+import { PropDataDirective } from '../../directives/prop-data.directive';
 
 @Component({
-    exportAs: 'abpExtensibleForm',
-    selector: 'abp-extensible-form',
-    templateUrl: './extensible-form.component.html',
-    standalone:true,
-    imports:[CommonModule, PropDataDirective,ReactiveFormsModule,ExtensibleFormPropComponent],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    viewProviders: [
-        {
-            provide: ControlContainer,
-            useFactory: selfFactory,
-            deps: [[new Optional(), new SkipSelf(), ControlContainer]],
-        },
-    ],
+  standalone: true,
+  exportAs: 'abpExtensibleForm',
+  selector: 'abp-extensible-form',
+  templateUrl: './extensible-form.component.html',
+  imports: [CommonModule, PropDataDirective, ReactiveFormsModule, ExtensibleFormPropComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [
+    {
+      provide: ControlContainer,
+      useFactory: selfFactory,
+      deps: [[new Optional(), new SkipSelf(), ControlContainer]],
+    },
+  ],
 })
 export class ExtensibleFormComponent<R = any> {
+  public readonly cdRef = inject(ChangeDetectorRef);
+  public readonly track = inject(TrackByService);
+  private readonly container = inject(ControlContainer);
+  private readonly extensions = inject(ExtensionsService);
+  private readonly identifier = inject(EXTENSIONS_IDENTIFIER);
 
-    @ViewChildren(ExtensibleFormPropComponent)
-    formProps!: QueryList<ExtensibleFormPropComponent>;
+  @ViewChildren(ExtensibleFormPropComponent)
+  formProps!: QueryList<ExtensibleFormPropComponent>;
 
-    @Input()
-    set selectedRecord(record: R) {
-        const type = !record || JSON.stringify(record) === '{}' ? 'create' : 'edit';
-        const propList = this.extensions[`${type}FormProps`].get(this.identifier).props;
-        this.groupedPropList = this.createGroupedList(propList);
-        this.record = record;
-    }
+  @Input()
+  set selectedRecord(record: R) {
+    const type = !record || JSON.stringify(record) === '{}' ? 'create' : 'edit';
+    const propList = this.extensions[`${type}FormProps`].get(this.identifier).props;
+    this.groupedPropList = this.createGroupedList(propList);
+    this.record = record;
+  }
 
-    extraPropertiesKey = EXTRA_PROPERTIES_KEY;
-    groupedPropList!: GroupedFormPropList;
-    groupedPropListOfArray: FormProp<any>[][];
-    record!: R;
+  extraPropertiesKey = EXTRA_PROPERTIES_KEY;
+  groupedPropList!: GroupedFormPropList;
+  groupedPropListOfArray: FormProp<any>[][];
+  record!: R;
 
-    public readonly cdRef = inject(ChangeDetectorRef)
-    public readonly track = inject(TrackByService)
-    private container = inject(ControlContainer)
-    private extensions = inject(ExtensionsService);
-    private identifier = inject(EXTENSIONS_IDENTIFIER)
+  get form(): UntypedFormGroup {
+    return (this.container ? this.container.control : { controls: {} }) as UntypedFormGroup;
+  }
 
-    createGroupedList(propList: FormPropList<R>) {
-        const groupedFormPropList = new GroupedFormPropList();
-        propList.forEach(item => {
-            groupedFormPropList.addItem(item.value);
-        });
-        return groupedFormPropList;
-    }
+  get extraProperties(): UntypedFormGroup {
+    return (this.form.controls.extraProperties || { controls: {} }) as UntypedFormGroup;
+  }
 
-    isAnyGroupMemberVisible(index: number, data){
-        const isVisible = this.groupedPropList.items.map(i => i.formPropList.toArray())[index].find(prop => prop.visible(data));
-        return isVisible;
-    }
+  createGroupedList(propList: FormPropList<R>) {
+    const groupedFormPropList = new GroupedFormPropList();
+    propList.forEach(item => {
+      groupedFormPropList.addItem(item.value);
+    });
 
-    get form(): UntypedFormGroup {
-        return (this.container ? this.container.control : {controls: {}}) as UntypedFormGroup;
-    }
-
-    get extraProperties(): UntypedFormGroup {
-        return (this.form.controls.extraProperties || {controls: {}}) as UntypedFormGroup;
-    }
+    return groupedFormPropList;
+  }
 
+  //TODO: Reactor this method
+  isAnyGroupMemberVisible(index: number, data) {
+    const { items } = this.groupedPropList;
+    const formPropList = items[index].formPropList.toArray();
+    return formPropList.some(prop => prop.visible(data));
+  }
 }