diff --git a/npm/ng-packs/apps/dev-app/src/app/home/home.component.html b/npm/ng-packs/apps/dev-app/src/app/home/home.component.html
index 9f6de55327..466c08d824 100644
--- a/npm/ng-packs/apps/dev-app/src/app/home/home.component.html
+++ b/npm/ng-packs/apps/dev-app/src/app/home/home.component.html
@@ -1,4 +1,6 @@
 <div class="container">
+  <abp-dynamic-form [fields]="formFields" (onSubmit)="submit($event)">
+  </abp-dynamic-form>
   <div class="p-5 text-center">
     <div class="d-inline-block bg-success text-white p-1 h5 rounded mb-4" role="alert">
       <h5 class="m-1">
@@ -7,8 +9,6 @@
       </h5>
     </div>
 
-    <abp-dynamic-form [fields]="formFields"></abp-dynamic-form>
-
     <h1>{{ '::Welcome' | abpLocalization }}</h1>
 
     <p class="lead px-lg-5 mx-lg-5">{{ '::LongWelcomeMessage' | abpLocalization }}</p>
diff --git a/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts b/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts
index 44bf9f269e..6afd17a90c 100644
--- a/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts
+++ b/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts
@@ -1,21 +1,99 @@
 import { AuthService, LocalizationPipe } from '@abp/ng.core';
-import { Component, inject } from '@angular/core';
+import { Component, inject, ViewChild } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { ButtonComponent, CardBodyComponent, CardComponent } from '@abp/ng.theme.shared';
+import { DynamicFormComponent, FormFieldConfig } from '@abp/ng.components/dynamic-form';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
-  imports: [NgTemplateOutlet, LocalizationPipe, CardComponent, CardBodyComponent, ButtonComponent],
+  imports: [NgTemplateOutlet, LocalizationPipe, CardComponent, CardBodyComponent, ButtonComponent, DynamicFormComponent],
 })
 export class HomeComponent {
+  @ViewChild(DynamicFormComponent, { static: true }) dynamicFormComponent: DynamicFormComponent;
   protected readonly authService = inject(AuthService);
-
+  formFields: FormFieldConfig[] = [
+    {
+      key: 'firstName',
+      type: 'text',
+      label: 'First Name',
+      placeholder: 'Enter first name',
+      value: 'erdemc',
+      required: true,
+      validators: [
+        { type: 'required', message: 'First name is required' },
+        { type: 'minLength', value: 2, message: 'Minimum 2 characters required' }
+      ],
+      gridSize: 6,
+      order: 1
+    },
+    {
+      key: 'lastName',
+      type: 'text',
+      label: 'Last Name',
+      placeholder: 'Enter last name',
+      required: true,
+      validators: [
+        { type: 'required', message: 'Last name is required' }
+      ],
+      gridSize: 12,
+      order: 3
+    },
+    {
+      key: 'email',
+      type: 'email',
+      label: 'Email Address',
+      placeholder: 'Enter email',
+      required: true,
+      validators: [
+        { type: 'required', message: 'Email is required' },
+        { type: 'email', message: 'Please enter a valid email' }
+      ],
+      gridSize: 6,
+      order: 2
+    },
+    {
+      key: 'userType',
+      type: 'select',
+      label: 'User Type',
+      required: true,
+      options: [
+        { key: 'admin', value: 'Administrator' },
+        { key: 'user', value: 'Regular User' },
+        { key: 'guest', value: 'Guest User' }
+      ],
+      validators: [
+        { type: 'required', message: 'Please select user type' }
+      ],
+      order: 4
+    },
+    {
+      key: 'adminNotes',
+      type: 'textarea',
+      label: 'Admin Notes',
+      placeholder: 'Enter admin-specific notes',
+      conditionalLogic: [
+        {
+          dependsOn: 'userType',
+          condition: 'equals',
+          value: 'admin',
+          action: 'show'
+        }
+      ],
+      order: 5
+    }
+  ];
   loading = false;
+
   get hasLoggedIn(): boolean {
     return this.authService.isAuthenticated;
   }
 
+  submit(val) {
+    console.log('submit', val);
+    this.dynamicFormComponent.resetForm();
+  }
+
   login() {
     this.loading = true;
     this.authService.navigateToLogin();
diff --git a/npm/ng-packs/apps/dev-app/src/server.ts b/npm/ng-packs/apps/dev-app/src/server.ts
index a8d7558341..fb45c1dec0 100644
--- a/npm/ng-packs/apps/dev-app/src/server.ts
+++ b/npm/ng-packs/apps/dev-app/src/server.ts
@@ -11,9 +11,7 @@ import {environment} from './environments/environment';
 import * as oidc from 'openid-client';
 import { ServerCookieParser } from '@abp/ng.core';
 
-if (environment.production === false) {
-  process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = "0";
-}
+process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = "0";
 
 const serverDistFolder = dirname(fileURLToPath(import.meta.url));
 const browserDistFolder = resolve(serverDistFolder, '../browser');
diff --git a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
index 23c2302906..294043fc47 100644
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts
@@ -6,7 +6,8 @@ import {
   inject,
   OnInit,
   DestroyRef,
-  ChangeDetectorRef
+  ChangeDetectorRef,
+  effect,
 } from '@angular/core';
 import { FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
@@ -26,6 +27,7 @@ import { DynamicFormFieldComponent } from './dynamic-form-field';
 })
 export class DynamicFormComponent implements OnInit {
   fields = input<FormFieldConfig[]>([]);
+  values = input<Record<string, any>>();
   submitButtonText = input<string>('Submit');
   submitInProgress = input<boolean>(false);
   showCancelButton = input<boolean>(false);
@@ -40,6 +42,10 @@ export class DynamicFormComponent implements OnInit {
 
   ngOnInit() {
     this.setupFormAndLogic();
+
+    effect(() => {
+      console.log(this.values());
+    });
   }
 
   get sortedFields(): FormFieldConfig[] {