diff --git a/package-lock.json b/package-lock.json
index cbaca10fc..cc95afe0c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,6 @@
         "mousetrap": "^1.6.5",
         "ng-in-viewport": "13.0.0",
         "ng2-file-upload": "5.0.0",
-        "normalize.css": "^8.0.0",
         "prismjs": "1.29.0",
         "resize-observer-polyfill": "^1.5.1",
         "rxjs": "7.8.1",
@@ -20061,11 +20060,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/normalize.css": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
-      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
-    },
     "node_modules/npm-bundled": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-3.0.1.tgz",
diff --git a/projects/swimlane/ngx-ui/src/lib/components/toggle/toggle.component.html b/projects/swimlane/ngx-ui/src/lib/components/toggle/toggle.component.html
index 35a2f5a48..6cd50a137 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/toggle/toggle.component.html
+++ b/projects/swimlane/ngx-ui/src/lib/components/toggle/toggle.component.html
@@ -11,11 +11,11 @@
     [name]="name"
     (blur)="onBlur()"
   />
-  <label [attr.for]="id" class="ngx-toggle-label" >
+  <label [attr.for]="id" class="ngx-toggle-label">
     <span *ngIf="showIcons && value" class="ngx-icon ngx-check"></span>
     <span *ngIf="showIcons && !value" class="ngx-icon ngx-x"></span>
   </label>
-  <label [attr.for]="id" class="ngx-toggle-text" >
+  <label [attr.for]="id" class="ngx-toggle-text">
     <span *ngIf="label" [innerHTML]="label"></span>
     <ng-content></ng-content>
   </label>
diff --git a/projects/swimlane/ngx-ui/src/lib/components/toggle/toggle.component.spec.ts b/projects/swimlane/ngx-ui/src/lib/components/toggle/toggle.component.spec.ts
index 3783bc31b..1d8c2579d 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/toggle/toggle.component.spec.ts
+++ b/projects/swimlane/ngx-ui/src/lib/components/toggle/toggle.component.spec.ts
@@ -131,4 +131,12 @@ describe('ToggleComponent', () => {
 
     expect(component.value).toEqual(false);
   });
+
+  it('emitChange should emit the change event', () => {
+    spyOn(component.change, 'emit');
+
+    component['emitChange']();
+
+    expect(component.change.emit).toHaveBeenCalled();
+  });
 });
diff --git a/projects/swimlane/ngx-ui/src/lib/components/toggle/toggle.component.ts b/projects/swimlane/ngx-ui/src/lib/components/toggle/toggle.component.ts
index 5d798d3c7..3b86e4c09 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/toggle/toggle.component.ts
+++ b/projects/swimlane/ngx-ui/src/lib/components/toggle/toggle.component.ts
@@ -5,7 +5,9 @@ import {
   forwardRef,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
-  HostListener
+  HostListener,
+  Output,
+  EventEmitter
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
@@ -36,6 +38,7 @@ export class ToggleComponent implements ControlValueAccessor {
     ev.preventDefault();
     if (!this.disabled) {
       this.toggle();
+      this.emitChange();
     }
   }
 
@@ -76,6 +79,8 @@ export class ToggleComponent implements ControlValueAccessor {
     this._tabIndex = coerceNumberProperty(tabIndex);
   }
 
+  @Output() change = new EventEmitter<Event>();
+
   get value(): boolean {
     return this._value;
   }
@@ -138,4 +143,8 @@ export class ToggleComponent implements ControlValueAccessor {
   private onChangeCallback = (_: unknown) => {
     // placeholder
   };
+
+  private emitChange() {
+    this.change.emit({ stopPropagation: () => {}, target: { checked: this._value } } as any);
+  }
 }
diff --git a/src/app/forms/toggle-page/toggle-page.component.html b/src/app/forms/toggle-page/toggle-page.component.html
index 556fdbe63..de4df751b 100644
--- a/src/app/forms/toggle-page/toggle-page.component.html
+++ b/src/app/forms/toggle-page/toggle-page.component.html
@@ -3,52 +3,37 @@ <h3 class="style-header">Toggle</h3>
 <ngx-tabs>
   <ngx-tab label="Examples">
     <ngx-section class="shadow" [sectionTitle]="'Demo'">
-      <ngx-toggle name="toggle1" [(ngModel)]="toggleChk" [label]="'High Priority'">
-      </ngx-toggle>
+      <ngx-toggle name="toggle1" [(ngModel)]="toggleChk" [label]="'High Priority'"> </ngx-toggle>
       <app-prism>
-    <![CDATA[<ngx-toggle
-      name="toggle1"
-      [(ngModel)]="toggleChk"
-      [label]="'High Priority'">
-    </ngx-toggle>]]>
+        <![CDATA[<ngx-toggle name="toggle1" [(ngModel)]="toggleChk" [label]="'High Priority'"> </ngx-toggle>]]>
       </app-prism>
       <br />
       <br />
-    
-      <ngx-toggle name="toggle2" [disabled]="true" [label]="'Disabled'">
-      </ngx-toggle>
+
+      <ngx-toggle name="toggle2" [disabled]="true" [label]="'Disabled'"> </ngx-toggle>
       <app-prism>
-    <![CDATA[<ngx-toggle
-      name="toggle2"
-      [disabled]="true"
-      [label]="'Disabled'">
-    </ngx-toggle>]]>
+        <![CDATA[<ngx-toggle name="toggle2" [disabled]="true" [label]="'Disabled'"> </ngx-toggle>]]>
       </app-prism>
       <br />
       <br />
-    
+
       <ngx-toggle name="toggle3" [(ngModel)]="toggleChk" (ngModelChange)="onToggleChange($event)">
         <strong class="color-red" [hidden]="!toggleChk">Alert Everyone!</strong>
         <strong class="color-green" [hidden]="toggleChk">All good!</strong>
       </ngx-toggle>
       <app-prism>
-    <![CDATA[<ngx-toggle name="toggle3" [(ngModel)]="toggleChk" (ngModelChange)="onToggleChange($event)">
-      <strong class="color-red" [hidden]="!toggleChk">Alert Everyone!</strong>
-      <strong class="color-green" [hidden]="toggleChk">All good!</strong>
-    </ngx-toggle>]]>
+        <![CDATA[<ngx-toggle name="toggle3" [(ngModel)]="toggleChk" (ngModelChange)="onToggleChange($event)"> <strong
+        class="color-red" [hidden]="!toggleChk">Alert Everyone!</strong> <strong class="color-green"
+        [hidden]="toggleChk">All good!</strong> </ngx-toggle>]]>
       </app-prism>
       <br />
       <br />
-    
+
       <ngx-toggle name="toggle4" [(ngModel)]="toggleChk" [label]="'High Priority With No Icons'" [showIcons]="false">
       </ngx-toggle>
       <app-prism>
-    <![CDATA[<ngx-toggle 
-      name="toggle4" 
-      [(ngModel)]="toggleChk" 
-      [label]="'High Priority With No Icons'" 
-      [showIcons]="false">
-    </ngx-toggle>]]>
+        <![CDATA[<ngx-toggle name="toggle4" [(ngModel)]="toggleChk" [label]="'High Priority With No Icons'"
+        [showIcons]="false"> </ngx-toggle>]]>
       </app-prism>
     </ngx-section>
   </ngx-tab>
@@ -56,7 +41,7 @@ <h3 class="style-header">Toggle</h3>
     <h3>Table of Contents</h3>
     <a class="documentation-content" (click)="scrollTo('inputs')">Component Inputs</a>
     <a class="documentation-content" (click)="scrollTo('outputs')">Component Outputs</a>
-    <hr>
+    <hr />
 
     <h3 class="style-header" id="inputs">Component Inputs</h3>
     <table class="table documentation-table">
@@ -118,8 +103,24 @@ <h3 class="style-header" id="inputs">Component Inputs</h3>
         </tr>
       </tbody>
     </table>
-    <hr>
+    <hr />
     <h3 class="style-header" id="outputs">Component Outputs</h3>
-    <h4>No component outputs to display.</h4>
+    <table class="table documentation-table">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th>
+            <code class="component-type">&#64;Output()</code>
+            <code>change: EventEmitter&lt;Event&gt;</code>
+          </th>
+          <td>Event emitted when the value is changed.</td>
+        </tr>
+      </tbody>
+    </table>
   </ngx-tab>
-</ngx-tabs>
\ No newline at end of file
+</ngx-tabs>