diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 60477d9..204c335 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,9 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { FormsComponent } from './forms/forms.component';
+import { KycOnboardingComponent } from './kyc/kyc-onboarding.component';
 
 const routes: Routes = [
-    { path: '', component: FormsComponent }
+    { path: '', component: KycOnboardingComponent },
+    { path: 'demo-forms', component: FormsComponent }
 ];
 
 @NgModule({
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index b39111b..2af2689 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -7,6 +7,7 @@ import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { FormsComponent } from './forms/forms.component';
+import { KycOnboardingComponent } from './kyc/kyc-onboarding.component';
 
 import { MatButtonModule } from '@angular/material/button';
 import { MatInputModule } from '@angular/material/input';
@@ -18,7 +19,8 @@ import { MatSelectModule } from '@angular/material/select';
 @NgModule({
   declarations: [
     AppComponent,
-    FormsComponent
+    FormsComponent,
+    KycOnboardingComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/kyc/kyc-onboarding.component.html b/src/app/kyc/kyc-onboarding.component.html
new file mode 100644
index 0000000..eb11695
--- /dev/null
+++ b/src/app/kyc/kyc-onboarding.component.html
@@ -0,0 +1,328 @@
+<div class="container" [formGroup]="kycForm">
+  <h1 class="page-title">Employee KYC Onboarding</h1>
+
+  <form (ngSubmit)="submit()">
+
+    <h2 class="section-title">Personal Information</h2>
+    <div class="section" formGroupName="personalInfo">
+      <div class="row">
+        <mat-form-field class="col half">
+          <mat-label>First Name</mat-label>
+          <input matInput formControlName="firstName" required>
+          <mat-error *ngIf="kycForm.get('personalInfo.firstName').invalid && kycForm.get('personalInfo.firstName').touched">Required</mat-error>
+        </mat-form-field>
+
+        <mat-form-field class="col half">
+          <mat-label>Middle Name</mat-label>
+          <input matInput formControlName="middleName">
+        </mat-form-field>
+      </div>
+
+      <div class="row">
+        <mat-form-field class="col half">
+          <mat-label>Last Name</mat-label>
+          <input matInput formControlName="lastName" required>
+          <mat-error *ngIf="kycForm.get('personalInfo.lastName').invalid && kycForm.get('personalInfo.lastName').touched">Required</mat-error>
+        </mat-form-field>
+
+        <mat-form-field class="col half">
+          <mat-label>Email</mat-label>
+          <input matInput type="email" formControlName="email" required>
+          <mat-error *ngIf="kycForm.get('personalInfo.email').invalid && kycForm.get('personalInfo.email').touched">Enter a valid email</mat-error>
+        </mat-form-field>
+      </div>
+
+      <div class="row">
+        <mat-form-field class="col half">
+          <mat-label>Phone</mat-label>
+          <input matInput formControlName="phone" placeholder="+1 555 123 4567" required>
+          <mat-error *ngIf="kycForm.get('personalInfo.phone').invalid && kycForm.get('personalInfo.phone').touched">Enter a valid phone</mat-error>
+        </mat-form-field>
+
+        <mat-form-field class="col quarter">
+          <mat-label>Gender</mat-label>
+          <mat-select formControlName="gender" required>
+            <mat-option *ngFor="let g of genders" [value]="g">{{ g }}</mat-option>
+          </mat-select>
+          <mat-error *ngIf="kycForm.get('personalInfo.gender').invalid && kycForm.get('personalInfo.gender').touched">Required</mat-error>
+        </mat-form-field>
+
+        <mat-form-field class="col quarter">
+          <mat-label>Date of Birth</mat-label>
+          <input matInput [matDatepicker]="dobPicker" formControlName="dob" required>
+          <mat-datepicker-toggle matSuffix [for]="dobPicker"></mat-datepicker-toggle>
+          <mat-datepicker #dobPicker></mat-datepicker>
+          <mat-error *ngIf="kycForm.get('personalInfo.dob').invalid && kycForm.get('personalInfo.dob').touched">Required</mat-error>
+        </mat-form-field>
+      </div>
+
+      <div class="row">
+        <mat-form-field class="col half">
+          <mat-label>Marital Status</mat-label>
+          <mat-select formControlName="maritalStatus">
+            <mat-option *ngFor="let m of maritalStatuses" [value]="m">{{ m }}</mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <mat-form-field class="col half">
+          <mat-label>Nationality</mat-label>
+          <mat-select formControlName="nationality" required>
+            <mat-option *ngFor="let c of countries" [value]="c">{{ c }}</mat-option>
+          </mat-select>
+          <mat-error *ngIf="kycForm.get('personalInfo.nationality').invalid && kycForm.get('personalInfo.nationality').touched">Required</mat-error>
+        </mat-form-field>
+      </div>
+    </div>
+
+    <h2 class="section-title">Government Identity</h2>
+    <div class="section" formGroupName="identity">
+      <div class="row">
+        <mat-form-field class="col quarter">
+          <mat-label>ID Type</mat-label>
+          <mat-select formControlName="idType" required>
+            <mat-option value="Passport">Passport</mat-option>
+            <mat-option value="National ID">National ID</mat-option>
+            <mat-option value="Driver License">Driver License</mat-option>
+          </mat-select>
+          <mat-error *ngIf="kycForm.get('identity.idType').invalid && kycForm.get('identity.idType').touched">Required</mat-error>
+        </mat-form-field>
+
+        <mat-form-field class="col half">
+          <mat-label>ID Number</mat-label>
+          <input matInput formControlName="idNumber" required>
+          <mat-error *ngIf="kycForm.get('identity.idNumber').invalid && kycForm.get('identity.idNumber').touched">Required</mat-error>
+        </mat-form-field>
+
+        <mat-form-field class="col quarter">
+          <mat-label>Issued Country</mat-label>
+          <mat-select formControlName="idIssuedCountry" required>
+            <mat-option *ngFor="let c of countries" [value]="c">{{ c }}</mat-option>
+          </mat-select>
+          <mat-error *ngIf="kycForm.get('identity.idIssuedCountry').invalid && kycForm.get('identity.idIssuedCountry').touched">Required</mat-error>
+        </mat-form-field>
+      </div>
+
+      <div class="row">
+        <mat-form-field class="col half">
+          <mat-label>Issue Date</mat-label>
+          <input matInput [matDatepicker]="issuePicker" formControlName="idIssuedDate" required>
+          <mat-datepicker-toggle matSuffix [for]="issuePicker"></mat-datepicker-toggle>
+          <mat-datepicker #issuePicker></mat-datepicker>
+          <mat-error *ngIf="kycForm.get('identity.idIssuedDate').invalid && kycForm.get('identity.idIssuedDate').touched">Required</mat-error>
+        </mat-form-field>
+
+        <mat-form-field class="col half">
+          <mat-label>Expiry Date</mat-label>
+          <input matInput [matDatepicker]="expPicker" formControlName="idExpiryDate">
+          <mat-datepicker-toggle matSuffix [for]="expPicker"></mat-datepicker-toggle>
+          <mat-datepicker #expPicker></mat-datepicker>
+        </mat-form-field>
+      </div>
+
+      <div class="row">
+        <mat-form-field class="col half">
+          <mat-label>Tax ID (Optional)</mat-label>
+          <input matInput formControlName="taxId">
+        </mat-form-field>
+      </div>
+    </div>
+
+    <h2 class="section-title">Residential Address</h2>
+    <div class="section" formGroupName="address">
+      <div class="row">
+        <mat-form-field class="col full">
+          <mat-label>Address Line 1</mat-label>
+          <input matInput formControlName="line1" required>
+          <mat-error *ngIf="kycForm.get('address.line1').invalid && kycForm.get('address.line1').touched">Required</mat-error>
+        </mat-form-field>
+      </div>
+      <div class="row">
+        <mat-form-field class="col full">
+          <mat-label>Address Line 2</mat-label>
+          <input matInput formControlName="line2">
+        </mat-form-field>
+      </div>
+
+      <div class="row">
+        <mat-form-field class="col third">
+          <mat-label>City</mat-label>
+          <input matInput formControlName="city" required>
+          <mat-error *ngIf="kycForm.get('address.city').invalid && kycForm.get('address.city').touched">Required</mat-error>
+        </mat-form-field>
+
+        <mat-form-field class="col third">
+          <mat-label>State/Province</mat-label>
+          <mat-select formControlName="state" required>
+            <mat-option *ngFor="let s of states" [value]="s">{{ s }}</mat-option>
+          </mat-select>
+          <mat-error *ngIf="kycForm.get('address.state').invalid && kycForm.get('address.state').touched">Required</mat-error>
+        </mat-form-field>
+
+        <mat-form-field class="col third">
+          <mat-label>Postal Code</mat-label>
+          <input matInput formControlName="postalCode" required>
+          <mat-error *ngIf="kycForm.get('address.postalCode').invalid && kycForm.get('address.postalCode').touched">Required</mat-error>
+        </mat-form-field>
+      </div>
+
+      <div class="row">
+        <mat-form-field class="col half">
+          <mat-label>Country</mat-label>
+          <mat-select formControlName="country" required>
+            <mat-option *ngFor="let c of countries" [value]="c">{{ c }}</mat-option>
+          </mat-select>
+          <mat-error *ngIf="kycForm.get('address.country').invalid && kycForm.get('address.country').touched">Required</mat-error>
+        </mat-form-field>
+      </div>
+    </div>
+
+    <h2 class="section-title">Employment Details</h2>
+    <div class="section" formGroupName="employment">
+      <div class="row">
+        <mat-form-field class="col third">
+          <mat-label>Employee ID</mat-label>
+          <input matInput formControlName="employeeId" required>
+          <mat-error *ngIf="kycForm.get('employment.employeeId').invalid && kycForm.get('employment.employeeId').touched">Required</mat-error>
+        </mat-form-field>
+
+        <mat-form-field class="col third">
+          <mat-label>Department</mat-label>
+          <input matInput formControlName="department" required>
+          <mat-error *ngIf="kycForm.get('employment.department').invalid && kycForm.get('employment.department').touched">Required</mat-error>
+        </mat-form-field>
+
+        <mat-form-field class="col third">
+          <mat-label>Designation</mat-label>
+          <input matInput formControlName="designation" required>
+          <mat-error *ngIf="kycForm.get('employment.designation').invalid && kycForm.get('employment.designation').touched">Required</mat-error>
+        </mat-form-field>
+      </div>
+
+      <div class="row">
+        <mat-form-field class="col third">
+          <mat-label>Employment Type</mat-label>
+          <mat-select formControlName="employmentType" required>
+            <mat-option *ngFor="let e of employmentTypes" [value]="e">{{ e }}</mat-option>
+          </mat-select>
+          <mat-error *ngIf="kycForm.get('employment.employmentType').invalid && kycForm.get('employment.employmentType').touched">Required</mat-error>
+        </mat-form-field>
+
+        <mat-form-field class="col third">
+          <mat-label>Date of Joining</mat-label>
+          <input matInput [matDatepicker]="dojPicker" formControlName="dateOfJoining" required>
+          <mat-datepicker-toggle matSuffix [for]="dojPicker"></mat-datepicker-toggle>
+          <mat-datepicker #dojPicker></mat-datepicker>
+          <mat-error *ngIf="kycForm.get('employment.dateOfJoining').invalid && kycForm.get('employment.dateOfJoining').touched">Required</mat-error>
+        </mat-form-field>
+
+        <mat-form-field class="col third">
+          <mat-label>Annual CTC</mat-label>
+          <input matInput formControlName="annualCTC" placeholder="e.g. 120000" required>
+          <mat-error *ngIf="kycForm.get('employment.annualCTC').invalid && kycForm.get('employment.annualCTC').touched">Enter a valid amount</mat-error>
+        </mat-form-field>
+      </div>
+    </div>
+
+    <h2 class="section-title">Bank Details</h2>
+    <div class="section" formGroupName="bankDetails">
+      <div class="row">
+        <mat-form-field class="col half">
+          <mat-label>Account Holder Name</mat-label>
+          <input matInput formControlName="accountHolderName" required>
+          <mat-error *ngIf="kycForm.get('bankDetails.accountHolderName').invalid && kycForm.get('bankDetails.accountHolderName').touched">Required</mat-error>
+        </mat-form-field>
+
+        <mat-form-field class="col half">
+          <mat-label>Bank Name</mat-label>
+          <input matInput formControlName="bankName" required>
+          <mat-error *ngIf="kycForm.get('bankDetails.bankName').invalid && kycForm.get('bankDetails.bankName').touched">Required</mat-error>
+        </mat-form-field>
+      </div>
+
+      <div class="row">
+        <mat-form-field class="col third">
+          <mat-label>Account Number</mat-label>
+          <input matInput formControlName="accountNumber" required>
+          <mat-error *ngIf="kycForm.get('bankDetails.accountNumber').invalid && kycForm.get('bankDetails.accountNumber').touched">Enter a valid account</mat-error>
+        </mat-form-field>
+
+        <mat-form-field class="col third">
+          <mat-label>IFSC/SWIFT</mat-label>
+          <input matInput formControlName="ifscOrSwift" required>
+          <mat-error *ngIf="kycForm.get('bankDetails.ifscOrSwift').invalid && kycForm.get('bankDetails.ifscOrSwift').touched">Enter a valid code</mat-error>
+        </mat-form-field>
+
+        <mat-form-field class="col third">
+          <mat-label>Branch (Optional)</mat-label>
+          <input matInput formControlName="branch">
+        </mat-form-field>
+      </div>
+    </div>
+
+    <h2 class="section-title">Emergency Contacts</h2>
+    <div class="section">
+      <div formArrayName="emergencyContacts">
+        <div class="emergency-card" *ngFor="let group of emergencyContacts.controls; let i = index" [formGroupName]="i">
+          <div class="row">
+            <mat-form-field class="col third">
+              <mat-label>Name</mat-label>
+              <input matInput formControlName="name" required>
+            </mat-form-field>
+
+            <mat-form-field class="col third">
+              <mat-label>Relationship</mat-label>
+              <mat-select formControlName="relationship" required>
+                <mat-option *ngFor="let r of relationshipTypes" [value]="r">{{ r }}</mat-option>
+              </mat-select>
+            </mat-form-field>
+
+            <mat-form-field class="col third">
+              <mat-label>Phone</mat-label>
+              <input matInput formControlName="phone" required>
+            </mat-form-field>
+          </div>
+
+          <div class="row">
+            <mat-form-field class="col half">
+              <mat-label>Email (Optional)</mat-label>
+              <input matInput formControlName="email">
+            </mat-form-field>
+
+            <mat-form-field class="col half">
+              <mat-label>Address (Optional)</mat-label>
+              <input matInput formControlName="address">
+            </mat-form-field>
+          </div>
+
+          <div class="row actions">
+            <button mat-stroked-button color="warn" type="button" (click)="removeEmergencyContact(i)" [disabled]="emergencyContacts.length === 1">Remove</button>
+          </div>
+        </div>
+      </div>
+
+      <button mat-stroked-button color="primary" type="button" (click)="addEmergencyContact()">Add another contact</button>
+    </div>
+
+    <h2 class="section-title">Declarations</h2>
+    <div class="section" formGroupName="declarations">
+      <div class="checkbox-row">
+        <mat-checkbox formControlName="politicallyExposed">I am a Politically Exposed Person (PEP)</mat-checkbox>
+      </div>
+      <div class="checkbox-row">
+        <mat-checkbox formControlName="hasCriminalRecord">I have a criminal record</mat-checkbox>
+      </div>
+      <div class="checkbox-row">
+        <mat-checkbox formControlName="acceptsPolicies" required>
+          I confirm that the information provided is true and agree to the company's policies.
+        </mat-checkbox>
+        <mat-error *ngIf="kycForm.get('declarations.acceptsPolicies').invalid && kycForm.get('declarations.acceptsPolicies').touched">
+          You must accept to proceed.
+        </mat-error>
+      </div>
+    </div>
+
+    <div class="submit-row">
+      <button mat-raised-button color="primary" type="submit" [disabled]="kycForm.invalid">Submit KYC</button>
+    </div>
+  </form>
+</div>
\ No newline at end of file
diff --git a/src/app/kyc/kyc-onboarding.component.scss b/src/app/kyc/kyc-onboarding.component.scss
new file mode 100644
index 0000000..86a1aff
--- /dev/null
+++ b/src/app/kyc/kyc-onboarding.component.scss
@@ -0,0 +1,56 @@
+.container {
+  margin: 24px auto;
+  max-width: 1100px;
+}
+
+.page-title {
+  margin: 0 0 16px 0;
+  font-weight: 600;
+}
+
+.section-title {
+  margin: 24px 0 8px 0;
+  font-weight: 600;
+}
+
+.section {
+  padding: 16px;
+  border: 1px solid rgba(0,0,0,.08);
+  border-radius: 8px;
+  background: #fff;
+}
+
+.row {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  margin-bottom: 8px;
+}
+
+.col {
+  flex: 1 1 0;
+  min-width: 220px;
+}
+
+.full { flex: 1 1 100%; }
+.half { flex: 1 1 calc(50% - 16px); min-width: 280px; }
+.third { flex: 1 1 calc(33.33% - 16px); min-width: 220px; }
+.quarter { flex: 1 1 calc(25% - 16px); min-width: 200px; }
+
+.emergency-card {
+  padding: 12px;
+  border: 1px dashed rgba(0,0,0,.15);
+  border-radius: 8px;
+  margin-bottom: 12px;
+  background: #fafafa;
+}
+
+.checkbox-row {
+  margin: 8px 0;
+}
+
+.submit-row {
+  margin: 24px 0;
+  display: flex;
+  justify-content: flex-end;
+}
\ No newline at end of file
diff --git a/src/app/kyc/kyc-onboarding.component.ts b/src/app/kyc/kyc-onboarding.component.ts
new file mode 100644
index 0000000..7bc010c
--- /dev/null
+++ b/src/app/kyc/kyc-onboarding.component.ts
@@ -0,0 +1,128 @@
+import { Component, OnInit } from '@angular/core';
+import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-kyc-onboarding',
+  templateUrl: './kyc-onboarding.component.html',
+  styleUrls: ['./kyc-onboarding.component.scss']
+})
+export class KycOnboardingComponent implements OnInit {
+
+  kycForm: FormGroup;
+
+  genders = ['Male', 'Female', 'Other', 'Prefer not to say'];
+  maritalStatuses = ['Single', 'Married', 'Divorced', 'Widowed'];
+  countries = [
+    'United States', 'United Kingdom', 'Canada', 'India', 'Australia',
+    'Germany', 'France', 'Brazil', 'Argentina', 'South Africa'
+  ];
+  states = [
+    'N/A', 'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut',
+    'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa',
+    'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan',
+    'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
+    'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio',
+    'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota',
+    'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia',
+    'Wisconsin', 'Wyoming'
+  ];
+  employmentTypes = ['Full-time', 'Part-time', 'Contract', 'Intern', 'Consultant'];
+  relationshipTypes = ['Parent', 'Sibling', 'Spouse/Partner', 'Friend', 'Other'];
+
+  constructor(private fb: FormBuilder) {}
+
+  ngOnInit(): void {
+    this.kycForm = this.fb.group({
+      personalInfo: this.fb.group({
+        firstName: ['', Validators.required],
+        middleName: [''],
+        lastName: ['', Validators.required],
+        email: ['', [Validators.required, Validators.email]],
+        phone: ['', [Validators.required, Validators.pattern(/^[0-9 +()-]{7,20}$/)]],
+        gender: [null, Validators.required],
+        dob: [null, Validators.required],
+        maritalStatus: [null],
+        nationality: [null, Validators.required]
+      }),
+
+      identity: this.fb.group({
+        idType: ['Passport', Validators.required], // Passport, National ID, Driver License
+        idNumber: ['', [Validators.required, Validators.maxLength(32)]],
+        idIssuedCountry: [null, Validators.required],
+        idIssuedDate: [null, Validators.required],
+        idExpiryDate: [null],
+        taxId: ['']
+      }),
+
+      address: this.fb.group({
+        line1: ['', Validators.required],
+        line2: [''],
+        city: ['', Validators.required],
+        state: ['N/A', Validators.required],
+        postalCode: ['', [Validators.required, Validators.pattern(/^[A-Za-z0-9 -]{3,12}$/)]],
+        country: ['United States', Validators.required]
+      }),
+
+      employment: this.fb.group({
+        employeeId: ['', Validators.required],
+        department: ['', Validators.required],
+        designation: ['', Validators.required],
+        employmentType: [null, Validators.required],
+        dateOfJoining: [null, Validators.required],
+        annualCTC: ['', [Validators.required, Validators.pattern(/^[0-9,.]+$/)]]
+      }),
+
+      bankDetails: this.fb.group({
+        accountHolderName: ['', Validators.required],
+        bankName: ['', Validators.required],
+        accountNumber: ['', [Validators.required, Validators.pattern(/^[0-9]{6,18}$/)]],
+        ifscOrSwift: ['', [Validators.required, Validators.pattern(/^[A-Za-z0-9]{6,11}$/)]],
+        branch: ['']
+      }),
+
+      emergencyContacts: this.fb.array([
+        this.createEmergencyContactGroup()
+      ]),
+
+      declarations: this.fb.group({
+        politicallyExposed: [false, Validators.required],
+        hasCriminalRecord: [false, Validators.required],
+        acceptsPolicies: [false, Validators.requiredTrue]
+      })
+    });
+  }
+
+  get emergencyContacts(): FormArray {
+    return this.kycForm.get('emergencyContacts') as FormArray;
+  }
+
+  addEmergencyContact(): void {
+    this.emergencyContacts.push(this.createEmergencyContactGroup());
+  }
+
+  removeEmergencyContact(index: number): void {
+    if (this.emergencyContacts.length > 1) {
+      this.emergencyContacts.removeAt(index);
+    }
+  }
+
+  private createEmergencyContactGroup(): FormGroup {
+    return this.fb.group({
+      name: ['', Validators.required],
+      relationship: [null, Validators.required],
+      phone: ['', [Validators.required, Validators.pattern(/^[0-9 +()-]{7,20}$/)]],
+      email: ['', [Validators.email]],
+      address: ['']
+    });
+  }
+
+  submit(): void {
+    if (this.kycForm.valid) {
+      // In a real app, you would send this. For now, just log.
+      console.log('KYC form submission', this.kycForm.value);
+      alert('KYC submitted. Check console for payload.');
+    } else {
+      this.kycForm.markAllAsTouched();
+    }
+  }
+}
\ No newline at end of file