Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.routes.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.routes.ts	(revision 2771)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.routes.ts	(working copy)
@@ -1,41 +1,41 @@
-import {Routes} from '@angular/router';
-import {Login} from './components/login/login';
-import {AuthGuard} from './guards/auth-guard';
-import {Dashboard} from './components/dashboard/dashboard';
-import {GeneralSettings} from './components/general-settings/general-settings';
-import {DeviceGroups} from './components/sub-components/device-groups/device-groups';
-import {Devices} from './components/sub-components/devices/devices';
-import {DeviceDetails} from './components/sub-components/device-details/device-details';
-import {WebConsole} from './components/sub-components/web-console/web-console';
-import {Tasks} from './components/tasks/tasks';
-import {Notification} from './components/notification/notification';
-import {AdminTools} from './components/admin-tools/admin-tools';
-import {RoleDetails} from './components/sub-components/role-details/role-details';
+import { Routes } from '@angular/router';
+import { Login } from './components/login/login';
+import { AuthGuard } from './guards/auth-guard';
+import { Dashboard } from './components/dashboard/dashboard';
+import { GeneralSettings } from './components/general-settings/general-settings';
+import { DeviceGroups } from './components/sub-components/device-groups/device-groups';
+import { Devices } from './components/sub-components/devices/devices';
+import { DeviceDetails } from './components/sub-components/device-details/device-details';
+import { WebConsole } from './components/sub-components/web-console/web-console';
+import { Tasks } from './components/tasks/tasks';
+import { Notification } from './components/notification/notification';
+import { AdminTools } from './components/admin-tools/admin-tools';
+import { RoleDetails } from './components/sub-components/role-details/role-details';
 import {
   VolumeLicenseDevicesOverview
 } from './components/volume-license-devices-overview/volume-license-devices-overview';
-import {VolumeLicenseOverview} from './components/volume-license-overview/volume-license-overview';
-import {ConfigHub} from './components/config-hub/config-hub';
-import {DeviceBackupFiles} from './components/sub-components/device-backup-files/device-backup-files';
-import {VpnManagement} from './components/vpn-management/vpn-management';
-import {UpgradeCentre} from './components/upgrade-centre/upgrade-centre';
-import {VpnDetailsOverview} from './components/sub-components/vpn-details-overview/vpn-details-overview';
-import {VpnAclGroups} from './components/sub-components/vpn-acl-groups/vpn-acl-groups';
+import { VolumeLicenseOverview } from './components/volume-license-overview/volume-license-overview';
+import { ConfigHub } from './components/config-hub/config-hub';
+import { DeviceBackupFiles } from './components/sub-components/device-backup-files/device-backup-files';
+import { VpnManagement } from './components/vpn-management/vpn-management';
+import { UpgradeCentre } from './components/upgrade-centre/upgrade-centre';
+import { VpnDetailsOverview } from './components/sub-components/vpn-details-overview/vpn-details-overview';
+import { VpnAclGroups } from './components/sub-components/vpn-acl-groups/vpn-acl-groups';
 import {
   VpnResourceGroupOverview
 } from './components/sub-components/vpn-resource-group-overview/vpn-resource-group-overview';
-import {ApvSslManagement} from './components/apv-ssl-management/apv-ssl-management';
-import {ApvSslOverview} from './components/sub-components/apv-ssl-overview/apv-ssl-overview';
-import {DeviceHaOverview} from './components/sub-components/device-ha-overview/device-ha-overview';
-import {DeviceHa} from './components/device-ha/device-ha';
-import {Topology} from './components/topology/topology';
-import {Observability} from './components/observability/observability';
-import {AvxDevices} from './components/sub-components/avx-devices/avx-devices';
-import {AvxInstancesOverview} from './components/sub-components/avx-instances-overview/avx-instances-overview';
-import {AvxDeviceDetails} from './components/sub-components/avx-device-details/avx-device-details';
-import {AvxVaInstanceDetails} from './components/sub-components/avx-va-instance-details/avx-va-instance-details';
-import {Monitoring} from './components/monitoring/monitoring';
-import {LogAnalysis} from './components/log-analysis/log-analysis';
+import { ApvSslManagement } from './components/apv-ssl-management/apv-ssl-management';
+import { ApvSslOverview } from './components/sub-components/apv-ssl-overview/apv-ssl-overview';
+import { DeviceHaOverview } from './components/sub-components/device-ha-overview/device-ha-overview';
+import { DeviceHa } from './components/device-ha/device-ha';
+import { Topology } from './components/topology/topology';
+import { Observability } from './components/observability/observability';
+import { AvxDevices } from './components/sub-components/avx-devices/avx-devices';
+import { AvxInstancesOverview } from './components/sub-components/avx-instances-overview/avx-instances-overview';
+import { AvxDeviceDetails } from './components/sub-components/avx-device-details/avx-device-details';
+import { AvxVaInstanceDetails } from './components/sub-components/avx-va-instance-details/avx-va-instance-details';
+import { Monitoring } from './components/monitoring/monitoring';
+import { LogAnalysis } from './components/log-analysis/log-analysis';
 import {
   LogAnalysisSlbElaborate
 } from './components/sub-components/log-analysis-slb-elaborate/log-analysis-slb-elaborate';
@@ -51,42 +51,43 @@
 import {
   ResourceMonitoringSslVpnDetails
 } from './components/sub-components/resource-monitoring-ssl-vpn-details/resource-monitoring-ssl-vpn-details';
-import {StorageComponent} from './components/storage/storage';
+import { StorageComponent } from './components/storage/storage';
 import {
   ResourceMonitoringLlbDetails
 } from './components/sub-components/resource-monitoring-llb-details/resource-monitoring-llb-details';
-import {Reports} from './components/reports/reports';
-import {AlertLog} from './components/sub-components/alert-log/alert-log';
-import {AlertThresholds} from './components/sub-components/alert-thresholds/alert-thresholds';
-import {AlertRulesOverview} from './components/sub-components/alert-rules-overview/alert-rules-overview';
-import {EventMonitoringOverview} from './components/sub-components/event-monitoring-overview/event-monitoring-overview';
-import {ControlPanel} from "./components/control-panel/control-panel";
+import { Reports } from './components/reports/reports';
+import { AlertLog } from './components/sub-components/alert-log/alert-log';
+import { AlertThresholds } from './components/sub-components/alert-thresholds/alert-thresholds';
+import { AlertRulesOverview } from './components/sub-components/alert-rules-overview/alert-rules-overview';
+import { EventMonitoringOverview } from './components/sub-components/event-monitoring-overview/event-monitoring-overview';
+import { ControlPanel } from "./components/control-panel/control-panel";
+import { InitiativeAlerts } from './components/sub-components/initiative-alerts/initiative-alerts';
 
 
 export const routes: Routes = [
-  {path: 'login', component: Login},
+  { path: 'login', component: Login },
   {
     path: '',
     canActivate: [AuthGuard],
     children: [
-      {path: 'dashboard', component: Dashboard, data: {roles: ['super_admin', 'device_admin', 'common_admin']}},
+      { path: 'dashboard', component: Dashboard, data: { roles: ['super_admin', 'device_admin', 'common_admin'] } },
       {
         path: 'inventory',
         children: [
           {
             path: 'devices',
             component: Devices,
-            data: {roles: ['super_admin', 'device_admin', 'common_admin']}
+            data: { roles: ['super_admin', 'device_admin', 'common_admin'] }
           },
           {
             path: 'devices/:deviceName',
             component: DeviceDetails,
-            data: {roles: ['super_admin', 'device_admin', 'common_admin']}
+            data: { roles: ['super_admin', 'device_admin', 'common_admin'] }
           },
           {
             path: 'web-console',
             component: WebConsole,
-            data: {roles: ['super_admin', 'device_admin', 'common_admin']}
+            data: { roles: ['super_admin', 'device_admin', 'common_admin'] }
           },
         ]
       },
@@ -96,7 +97,7 @@
           {
             path: 'device-groups',
             component: DeviceGroups,
-            data: {roles: ['super_admin', 'device_admin', 'common_admin']}
+            data: { roles: ['super_admin', 'device_admin', 'common_admin'] }
           },
         ]
       },
@@ -106,19 +107,19 @@
           {
             path: 'logs',
             component: AlertLog,
-            data: {roles: ['super_admin', 'device_admin', 'common_admin']}
+            data: { roles: ['super_admin', 'device_admin', 'common_admin'] }
           },
           {
             path: 'rules',
             component: AlertRulesOverview,
-            data: {roles: ['super_admin', 'device_admin', 'common_admin']}
+            data: { roles: ['super_admin', 'device_admin', 'common_admin'] }
           },
           {
             path: 'default',
-            component: AlertThresholds,
-            data: {roles: ['super_admin', 'device_admin', 'common_admin']}
+            component: InitiativeAlerts,
+            data: { roles: ['super_admin', 'device_admin', 'common_admin'] }
           },
-          ]
+        ]
       },
       {
         path: 'system',
@@ -126,32 +127,32 @@
           {
             path: 'general',
             component: GeneralSettings,
-            data: {roles: ['super_admin', 'device_admin', 'common_admin']}
+            data: { roles: ['super_admin', 'device_admin', 'common_admin'] }
           },
           {
             path: 'storage',
             component: StorageComponent,
-            data: {roles: ['super_admin', 'device_admin', 'common_admin']}
+            data: { roles: ['super_admin', 'device_admin', 'common_admin'] }
           },
           {
             path: 'tasks',
             component: Tasks,
-            data: {roles: ['super_admin', 'device_admin', 'common_admin']}
+            data: { roles: ['super_admin', 'device_admin', 'common_admin'] }
           },
           {
             path: 'admin-tools',
             component: AdminTools,
-            data: {roles: ['super_admin', 'device_admin', 'common_admin']},
+            data: { roles: ['super_admin', 'device_admin', 'common_admin'] },
           },
           {
             path: 'admin-tools/role/:roleName',
             component: RoleDetails,
-            data: {roles: ['super_admin', 'device_admin', 'common_admin']}
+            data: { roles: ['super_admin', 'device_admin', 'common_admin'] }
           },
           {
             path: 'notifications',
             component: Notification,
-            data: {roles: ['super_admin', 'device_admin', 'common_admin']}
+            data: { roles: ['super_admin', 'device_admin', 'common_admin'] }
           },
         ]
       },
@@ -161,27 +162,27 @@
           {
             path: 'apv/ha',
             component: DeviceHa,
-            data: {roles: ['super_admin', 'device_admin', 'common_admin']}
+            data: { roles: ['super_admin', 'device_admin', 'common_admin'] }
           },
           {
             path: 'apv/ha/details/:deviceName',
             component: DeviceHaOverview,
-            data: {roles: ['super_admin', 'device_admin', 'common_admin']}
+            data: { roles: ['super_admin', 'device_admin', 'common_admin'] }
           },
           {
             path: 'apv/ssl',
             component: ApvSslManagement,
-            data: {roles: ['super_admin', 'device_admin', 'common_admin']}
+            data: { roles: ['super_admin', 'device_admin', 'common_admin'] }
           },
           {
             path: 'apv/ssl/details/:deviceName/:deviceId/:serviceName/:hostName',
             component: ApvSslOverview,
-            data: {roles: ['super_admin', 'device_admin', 'common_admin']}
+            data: { roles: ['super_admin', 'device_admin', 'common_admin'] }
           },
           {
             path: 'apv/slb',
             component: Topology,
-            data: {roles: ['super_admin', 'device_admin', 'common_admin']}
+            data: { roles: ['super_admin', 'device_admin', 'common_admin'] }
           },
           {
             path: 'ssl-vpn',
@@ -189,22 +190,22 @@
               {
                 path: '',
                 component: VpnManagement,
-                data: {roles: ['super_admin', 'device_admin', 'common_admin']}
+                data: { roles: ['super_admin', 'device_admin', 'common_admin'] }
               },
               {
                 path: 'details/acl/:deviceName/:serviceName/:groupName',
                 component: VpnAclGroups,
-                data: {roles: ['super_admin', 'device_admin', 'common_admin']}
+                data: { roles: ['super_admin', 'device_admin', 'common_admin'] }
               },
               {
                 path: 'details/vpn-resource/:deviceName/:serviceName/:groupName',
                 component: VpnResourceGroupOverview,
-                data: {roles: ['super_admin', 'device_admin', 'common_admin']}
+                data: { roles: ['super_admin', 'device_admin', 'common_admin'] }
               },
               {
                 path: 'details/:deviceName/:serviceName',
                 component: VpnDetailsOverview,
-                data: {roles: ['super_admin', 'device_admin', 'common_admin']}
+                data: { roles: ['super_admin', 'device_admin', 'common_admin'] }
               },
             ]
           },
@@ -216,23 +217,23 @@
           {
             path: 'licenses',
             component: VolumeLicenseOverview,
-            data: {roles: ['super_admin', 'device_admin', 'common_admin']}
+            data: { roles: ['super_admin', 'device_admin', 'common_admin'] }
           },
           {
             path: 'devices',
             component: VolumeLicenseDevicesOverview,
-            data: {roles: ['super_admin', 'device_admin', 'common_admin']}
+            data: { roles: ['super_admin', 'device_admin', 'common_admin'] }
           },
         ]
       },
       {
         path: 'upgrade-centre',
         component: UpgradeCentre,
-        data: {roles: ['super_admin', 'device_admin', 'common_admin']}
+        data: { roles: ['super_admin', 'device_admin', 'common_admin'] }
       },
       {
         path: 'configuration-hub',
-        data: {roles: ['super_admin', 'device_admin', 'common_admin'],},
+        data: { roles: ['super_admin', 'device_admin', 'common_admin'], },
         children: [
           {
             path: '',
@@ -246,7 +247,7 @@
       },
       {
         path: 'avx',
-        data: {roles: ['super_admin', 'device_admin', 'common_admin'],},
+        data: { roles: ['super_admin', 'device_admin', 'common_admin'], },
         children: [
           {
             path: 'devices',
@@ -268,35 +269,35 @@
       },
       {
         path: 'monitoring',
-        data: {roles: ['super_admin', 'device_admin', 'common_admin'],},
+        data: { roles: ['super_admin', 'device_admin', 'common_admin'], },
         children: [
-          {path: 'resources', component: Monitoring},
-          {path: 'resources/devices/:deviceName/:deviceIp', component: ResourceMonitoringDeviceDetails},
-          {path: 'resources/slb-virtual/:deviceIp/:serviceName', component: ResourceMonitoringSlbVirtualDetails},
-          {path: 'resources/slb-real/:deviceIp/:serviceName', component: ResourceMonitoringSlbRealDetails},
-          {path: 'resources/llb/:deviceIp/:linkName', component: ResourceMonitoringLlbDetails},
-          {path: 'resources/ssl-vpn/:deviceIp/:serviceName', component: ResourceMonitoringSslVpnDetails},
-          {path: 'events', component: EventMonitoringOverview},
+          { path: 'resources', component: Monitoring },
+          { path: 'resources/devices/:deviceName/:deviceIp', component: ResourceMonitoringDeviceDetails },
+          { path: 'resources/slb-virtual/:deviceIp/:serviceName', component: ResourceMonitoringSlbVirtualDetails },
+          { path: 'resources/slb-real/:deviceIp/:serviceName', component: ResourceMonitoringSlbRealDetails },
+          { path: 'resources/llb/:deviceIp/:linkName', component: ResourceMonitoringLlbDetails },
+          { path: 'resources/ssl-vpn/:deviceIp/:serviceName', component: ResourceMonitoringSslVpnDetails },
+          { path: 'events', component: EventMonitoringOverview },
         ]
       },
       {
         path: 'reports',
-        data: {roles: ['super_admin', 'device_admin', 'common_admin'],},
+        data: { roles: ['super_admin', 'device_admin', 'common_admin'], },
         component: Reports
       },
       {
         path: 'log-analysis',
-        data: {roles: ['super_admin', 'device_admin', 'common_admin']},
+        data: { roles: ['super_admin', 'device_admin', 'common_admin'] },
         children: [
-          {path: '', component: LogAnalysis},
-          {path: 'elaborate/:serviceName/:vip', component: LogAnalysisSlbElaborate},
+          { path: '', component: LogAnalysis },
+          { path: 'elaborate/:serviceName/:vip', component: LogAnalysisSlbElaborate },
         ]
       },
-      {path: 'observability', component: Observability, data: {roles: ['super_admin', 'device_admin', 'common_admin']}},
-      {path: 'control-panel', component: ControlPanel, data: {roles: ['super_admin', 'device_admin', 'common_admin']}},
-      {path: '', redirectTo: 'dashboard', pathMatch: 'full'},
+      { path: 'observability', component: Observability, data: { roles: ['super_admin', 'device_admin', 'common_admin'] } },
+      { path: 'control-panel', component: ControlPanel, data: { roles: ['super_admin', 'device_admin', 'common_admin'] } },
+      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
       // {path: '**', redirectTo: 'dashboard'}
     ]
   },
-  {path: '**', redirectTo: 'login'}
+  { path: '**', redirectTo: 'login' }
 ];
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-log/alert-log-detail.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-log/alert-log-detail.html	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-log/alert-log-detail.html	(working copy)
@@ -0,0 +1,52 @@
+<h2 mat-dialog-title class="dialog-title">Alert Log Detail</h2>
+
+<mat-dialog-content>
+    <div class="detail-grid">
+        <!-- Headers -->
+        <div class="grid-header">Metric Name</div>
+        <div class="grid-header">Device Name</div>
+        <div class="grid-header">Device Group</div>
+        <div class="grid-header">Device IP</div>
+        <div class="grid-header">Service Name</div>
+        <div class="grid-header">Event Name</div>
+        <div class="grid-header">Value</div>
+
+        <!-- Filters -->
+        <div class="grid-filter"></div>
+        <div class="grid-filter"></div> <!-- Device Name Filter Removed -->
+        <div class="grid-filter"></div> <!-- Device Group Filter Removed -->
+
+        <div class="grid-filter">
+            <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                <input matInput placeholder="Search by IP Address" [(ngModel)]="searchIp" (keyup)="filterData()">
+            </mat-form-field>
+        </div>
+        <div class="grid-filter">
+            <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                <input matInput placeholder="Search by Service Name" [(ngModel)]="searchService" (keyup)="filterData()">
+            </mat-form-field>
+        </div>
+        <div class="grid-filter"></div>
+        <div class="grid-filter"></div>
+
+        <!-- Values -->
+        @for (item of filteredList; track item) {
+        <div class="grid-value">{{item.metricName}}</div>
+        <div class="grid-value">{{item.deviceName}}</div>
+        <div class="grid-value">{{item.deviceGroup}}</div>
+        <div class="grid-value">{{item.deviceIp}}</div>
+        <div class="grid-value">{{item.serviceName}}</div>
+        <div class="grid-value">{{item.eventName}}</div>
+        <div class="grid-value">{{item.value}}</div>
+        }
+        @if (filteredList.length === 0) {
+        <div class="grid-value" style="grid-column: 1 / -1; text-align: center; padding: 20px;">
+            No records found.
+        </div>
+        }
+    </div>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+    <button mat-button (click)="close()">Close</button>
+</mat-dialog-actions>
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-log/alert-log-detail.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-log/alert-log-detail.scss	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-log/alert-log-detail.scss	(working copy)
@@ -0,0 +1,45 @@
+.detail-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 15px;
+    margin-bottom: 10px;
+    min-width: 900px; // Ensure grid has enough space
+
+    .grid-header {
+        font-size: 11px;
+        color: #666;
+        font-weight: 500;
+        margin-bottom: 5px;
+    }
+
+    .grid-filter {
+        margin-bottom: 15px;
+
+        mat-form-field {
+            width: 100%;
+            font-size: 12px;
+
+            // Compact form field
+            .mat-mdc-form-field-wrapper {
+                padding-bottom: 0;
+            }
+
+            .mat-mdc-form-field-infix {
+                padding: 8px 0;
+                min-height: unset;
+            }
+        }
+    }
+
+    .grid-value {
+        font-size: 12px;
+        color: #333;
+        padding: 8px 0;
+        border-top: 1px solid #f0f0f0;
+        word-break: break-word;
+    }
+}
+
+::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-surface {
+    border-radius: 4px !important;
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-log/alert-log.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-log/alert-log.html	(revision 2771)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-log/alert-log.html	(working copy)
@@ -1 +1,100 @@
-<p>alert-log works!</p>
+<div class="alert-log-container">
+    <div class="time-range-selector">
+        <button mat-button *ngFor="let range of timeRanges" [class.active]="selectedTimeRange === range"
+            (click)="selectTimeRange(range)">
+            {{range}}
+        </button>
+        <div class="custom-range">
+            2025-11-27 09:36:04 - 2025-11-27 15:36:04
+        </div>
+    </div>
+
+    <div class="content-wrapper">
+
+        <div class="filters-row">
+            <div class="filter-item rule-name">
+                <label>Alert Rule</label>
+                <input matInput placeholder="Search by Rule Name"
+                    (keyup)="applyFilter($any($event.target).value, 'alertRule')">
+            </div>
+
+            <div class="filter-group-right">
+                <div class="filter-item">
+                    <label>Alert Type</label>
+                    <mat-select value="All" (selectionChange)="applyFilter($event.value, 'alertType')">
+                        <mat-option *ngFor="let type of alertTypes" [value]="type">{{type}}</mat-option>
+                    </mat-select>
+                </div>
+
+                <div class="filter-item">
+                    <label>Product</label>
+                    <mat-select value="All Products" (selectionChange)="applyFilter($event.value, 'product')">
+                        <mat-option *ngFor="let p of products" [value]="p">{{p}}</mat-option>
+                    </mat-select>
+                </div>
+
+                <div class="filter-item">
+                    <label>Status</label>
+                    <mat-select value="All" (selectionChange)="applyFilter($event.value, 'status')">
+                        <mat-option *ngFor="let s of statuses" [value]="s">{{s}}</mat-option>
+                    </mat-select>
+                </div>
+            </div>
+        </div>
+
+        <div class="table-container">
+            <table mat-table [dataSource]="dataSource">
+
+                <!-- Alert Type Column -->
+                <ng-container matColumnDef="alertType">
+                    <th mat-header-cell *matHeaderCellDef> Alert Type </th>
+                    <td mat-cell *matCellDef="let element"> {{element.alertType}} </td>
+                </ng-container>
+
+                <!-- Product Column -->
+                <ng-container matColumnDef="product">
+                    <th mat-header-cell *matHeaderCellDef> Product </th>
+                    <td mat-cell *matCellDef="let element"> {{element.product}} </td>
+                </ng-container>
+
+                <!-- Occurred At Column -->
+                <ng-container matColumnDef="occurredAt">
+                    <th mat-header-cell *matHeaderCellDef> Occurred At </th>
+                    <td mat-cell *matCellDef="let element"> {{element.occurredAt}} </td>
+                </ng-container>
+
+                <!-- Alert Rule Column -->
+                <ng-container matColumnDef="alertRule">
+                    <th mat-header-cell *matHeaderCellDef> Alert Rule </th>
+                    <td mat-cell *matCellDef="let element">
+                        <a href="javascript:void(0)" class="rule-link">{{element.alertRule}}</a>
+                    </td>
+                </ng-container>
+
+                <!-- Status Column -->
+                <ng-container matColumnDef="status">
+                    <th mat-header-cell *matHeaderCellDef> Status </th>
+                    <td mat-cell *matCellDef="let element">
+                        <span [class.status-alerting]="element.status === 'Alerting'"
+                            [class.status-resolved]="element.status === 'Resolved'">
+                            {{element.status}}
+                        </span>
+                    </td>
+                </ng-container>
+
+                <!-- Action Column -->
+                <ng-container matColumnDef="action">
+                    <th mat-header-cell *matHeaderCellDef> Action </th>
+                    <td mat-cell *matCellDef="let element">
+                        <a href="javascript:void(0)" class="action-link"
+                            (click)="openDetail(element)">{{element.action}}</a>
+                    </td>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            </table>
+            <mat-paginator [pageSizeOptions]="[15, 30, 50]" showFirstLastButtons></mat-paginator>
+        </div>
+    </div>
+</div>
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-log/alert-log.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-log/alert-log.scss	(revision 2771)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-log/alert-log.scss	(working copy)
@@ -0,0 +1,174 @@
+.alert-log-container {
+    padding: 20px;
+    background-color: #f0f2f5;
+    min-height: calc(100vh - 64px);
+
+    .time-range-selector {
+        background-color: #e0e0e0;
+        padding: 5px 20px;
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        border-bottom: 1px solid #ccc;
+        margin-bottom: 20px;
+
+        button {
+            background-color: #d0d0d0;
+            color: #333;
+            font-size: 12px;
+            height: 24px;
+            line-height: 24px;
+            padding: 0 10px;
+            min-width: unset;
+            border-radius: 2px;
+
+            &.active {
+                background-color: #5c6bc0;
+                color: #fff;
+            }
+        }
+
+        .custom-range {
+            margin-left: 10px;
+            background-color: #fff;
+            padding: 2px 8px;
+            font-size: 12px;
+            border-radius: 2px;
+            border: 1px solid #ccc;
+        }
+    }
+
+    .content-wrapper {
+        // padding: 20px; // Removed padding as container has it
+
+        .toolbar {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+            // background-color: #e0e0e0; // Removed background to match AlertThresholds
+            // padding: 5px 15px; // Removed padding
+
+            .title {
+                font-size: 14px;
+                font-weight: 500;
+                color: #333;
+                display: none; // AlertThresholds doesn't have a visible title in toolbar
+            }
+
+            button {
+                color: #333;
+            }
+        }
+
+        .filters-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-end;
+            margin-bottom: 15px;
+            background-color: #fff;
+            padding: 15px 20px;
+            border-radius: 4px;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+            .filter-item {
+                display: flex;
+                flex-direction: column;
+
+                label {
+                    font-size: 12px;
+                    color: #666;
+                    margin-bottom: 5px;
+                    font-weight: 500;
+                }
+
+                &.rule-name {
+                    flex: 1;
+                    max-width: 300px;
+
+                    input {
+                        width: 100%;
+                        padding: 8px 12px;
+                        border: 1px solid #ddd;
+                        border-radius: 4px;
+                        font-size: 13px;
+                        outline: none;
+
+                        &:focus {
+                            border-color: #3f51b5;
+                        }
+                    }
+                }
+            }
+
+            .filter-group-right {
+                display: flex;
+                gap: 20px;
+
+                .filter-item {
+                    min-width: 150px;
+                }
+            }
+        }
+
+        .table-container {
+            background-color: #fff;
+            border-radius: 4px;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+
+            table {
+                width: 100%;
+
+                th.mat-header-cell {
+                    background-color: #fff;
+                    color: #666;
+                    font-size: 12px;
+                    font-weight: 600;
+                    border-bottom: 1px solid #eee;
+                    padding: 15px 20px;
+                }
+
+                td.mat-cell {
+                    padding: 12px 20px;
+                    font-size: 13px;
+                    color: #444;
+                    border-bottom: 1px solid #f5f5f5;
+
+                    .rule-link,
+                    .action-link {
+                        color: #3f51b5;
+                        text-decoration: none;
+
+                        &:hover {
+                            text-decoration: underline;
+                        }
+                    }
+
+                    .status-alerting {
+                        color: #d32f2f;
+                        font-weight: 500;
+                    }
+
+                    .status-resolved {
+                        color: #388e3c;
+                        font-weight: 500;
+                    }
+
+                    &.mat-column-action {
+                        white-space: nowrap;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// Override material form field styles
+::ng-deep .mat-mdc-form-field-subscript-wrapper {
+    display: none;
+}
+
+::ng-deep .mat-mdc-select-value {
+    font-size: 12px;
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-log/alert-log.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-log/alert-log.ts	(revision 2771)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-log/alert-log.ts	(working copy)
@@ -1,11 +1,179 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, ViewChild, AfterViewInit, Inject } from '@angular/core';
+import { SharedModule } from '../../../shared/shared-module';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatDialog, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
+export interface AlertLogEntry {
+  alertType: string;
+  product: string;
+  occurredAt: string;
+  alertRule: string;
+  status: string;
+  action: string;
+}
+
+export interface AlertLogDetailData {
+  metricName: string;
+  deviceName: string;
+  deviceGroup: string;
+  deviceIp: string;
+  serviceName: string;
+  eventName: string;
+  value: string;
+}
+
 @Component({
+  selector: 'app-alert-log-detail',
+  standalone: true,
+  imports: [SharedModule],
+  templateUrl: './alert-log-detail.html',
+  styleUrl: './alert-log-detail.scss'
+})
+export class AlertLogDetail implements OnInit {
+  searchIp: string = '';
+  searchService: string = '';
+  detailList: AlertLogDetailData[] = [];
+  filteredList: AlertLogDetailData[] = [];
+
+  constructor(
+    public dialogRef: MatDialogRef<AlertLogDetail>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) { }
+
+  ngOnInit() {
+    // Mocking multiple rows to demonstrate filtering
+    this.detailList = [
+      this.data,
+      { ...this.data, deviceIp: '192.168.85.102', serviceName: 'rs2', value: '2.00' },
+      { ...this.data, deviceIp: '10.0.0.5', serviceName: 'db-service', value: '5.00' }
+    ];
+    this.filteredList = this.detailList;
+  }
+
+  filterData() {
+    this.filteredList = this.detailList.filter(item => {
+      const matchIp = !this.searchIp || item.deviceIp.toLowerCase().includes(this.searchIp.toLowerCase());
+      const matchService = !this.searchService || item.serviceName.toLowerCase().includes(this.searchService.toLowerCase());
+      return matchIp && matchService;
+    });
+  }
+
+  close(): void {
+    this.dialogRef.close();
+  }
+}
+
+@Component({
   selector: 'app-alert-log',
-  imports: [],
+  standalone: true,
+  imports: [
+    SharedModule
+  ],
   templateUrl: './alert-log.html',
   styleUrl: './alert-log.scss'
 })
-export class AlertLog {
+export class AlertLog implements OnInit, AfterViewInit {
+  displayedColumns: string[] = ['alertType', 'product', 'occurredAt', 'alertRule', 'status', 'action'];
+  dataSource = new MatTableDataSource<AlertLogEntry>([]);
 
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+
+  alertTypes: string[] = ['All', 'Event Alert', 'Threshold Alert'];
+  products: string[] = ['All Products', 'Real Service', 'Virtual Service', 'Device'];
+  statuses: string[] = ['All', 'Alerting', 'Resolved'];
+  timeRanges: string[] = ['1 Hour', '2 Hours', '4 Hours', '6 Hours', '12 Hours', '1 Day', '3 Days', '7 Days'];
+  selectedTimeRange = '6 Hours';
+
+  filterValues = {
+    alertType: 'All',
+    product: 'All Products',
+    alertRule: '',
+    status: 'All'
+  };
+
+  constructor(private dialog: MatDialog) { }
+
+  ngOnInit() {
+    const data: AlertLogEntry[] = [
+      {
+        alertType: 'Event Alert',
+        product: 'Real Service',
+        occurredAt: '2025-11-27 13:37:34',
+        alertRule: 'HealthCheck_pdq37m_rs_hc_failed',
+        status: 'Alerting',
+        action: 'View Detail'
+      },
+      {
+        alertType: 'Threshold Alert',
+        product: 'Device',
+        occurredAt: '2025-11-27 12:15:00',
+        alertRule: 'DeviceStatus_urvx98_cpu_usage',
+        status: 'Resolved',
+        action: 'View Detail'
+      },
+      {
+        alertType: 'Event Alert',
+        product: 'Virtual Service',
+        occurredAt: '2025-11-27 10:00:00',
+        alertRule: 'CertKeyExpired_6umk3_cert_exp_60',
+        status: 'Alerting',
+        action: 'View Detail'
+      }
+    ];
+    this.dataSource.data = data;
+    this.dataSource.filterPredicate = this.createFilter();
+  }
+
+  createFilter(): (data: AlertLogEntry, filter: string) => boolean {
+    return (data: AlertLogEntry, filter: string): boolean => {
+      const searchTerms = JSON.parse(filter);
+
+      const typeMatch = searchTerms.alertType === 'All' || data.alertType === searchTerms.alertType;
+      const productMatch = searchTerms.product === 'All Products' || data.product === searchTerms.product;
+      const ruleMatch = data.alertRule.toLowerCase().indexOf(searchTerms.alertRule) !== -1;
+      const statusMatch = searchTerms.status === 'All' || data.status === searchTerms.status;
+
+      return typeMatch && productMatch && ruleMatch && statusMatch;
+    };
+  }
+
+  applyFilter(filterValue: string, key: string) {
+    this.filterValues[key as keyof typeof this.filterValues] = filterValue.trim().toLowerCase();
+
+    if (key === 'alertType' || key === 'product' || key === 'status') {
+      this.filterValues[key as keyof typeof this.filterValues] = filterValue;
+    }
+
+    this.dataSource.filter = JSON.stringify(this.filterValues);
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
+  selectTimeRange(range: string) {
+    this.selectedTimeRange = range;
+    // Implement actual time range filtering logic here if needed
+  }
+
+  openDetail(row: AlertLogEntry) {
+    this.dialog.open(AlertLogDetail, {
+      width: '80%',
+      maxWidth: '1200px',
+      data: {
+        metricName: 'Event Quantity',
+        deviceName: 'A6',
+        deviceGroup: 'Sample',
+        deviceIp: '192.168.85.101',
+        serviceName: 'rs1',
+        eventName: 'Health Check Failed',
+        value: '1.00'
+      }
+    });
+  }
+
+  ngAfterViewInit() {
+    this.dataSource.paginator = this.paginator;
+  }
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-rules-overview/alert-rules-overview.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-rules-overview/alert-rules-overview.html	(revision 2771)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-rules-overview/alert-rules-overview.html	(working copy)
@@ -1 +1 @@
-<p>alert-rules-overview works!</p>
+<app-tab-container [tabDefinitions]="tabDefinitions" paramKey="tab" />
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-rules-overview/alert-rules-overview.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-rules-overview/alert-rules-overview.ts	(revision 2771)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-rules-overview/alert-rules-overview.ts	(working copy)
@@ -1,11 +1,18 @@
 import { Component } from '@angular/core';
+import { TabContainer, TabDefinition } from '../../common/tab-container/tab-container';
+import { AlertThresholds } from '../alert-thresholds/alert-thresholds';
+import { EventAlert } from '../event-alert/event-alert';
+import { SharedModule } from '../../../shared/shared-module';
 
 @Component({
   selector: 'app-alert-rules-overview',
-  imports: [],
+  imports: [SharedModule, TabContainer],
   templateUrl: './alert-rules-overview.html',
   styleUrl: './alert-rules-overview.scss'
 })
 export class AlertRulesOverview {
-
+  tabDefinitions: TabDefinition[] = [
+    { label: 'Alert Thresholds', component: AlertThresholds, paramName: 'alert-thresholds' },
+    { label: 'Event Alert', component: EventAlert, paramName: 'event-alert' },
+  ];
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-thresholds/alert-thresholds.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-thresholds/alert-thresholds.html	(revision 2771)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-thresholds/alert-thresholds.html	(working copy)
@@ -1 +1,122 @@
-<p>alert-thresholds works!</p>
+<div class="alert-thresholds-container">
+    <div class="toolbar">
+        <button mat-raised-button (click)="openCreateModal()">Add</button>
+    </div>
+
+    <div class="filters-row">
+        <div class="filter-item rule-name">
+            <label>Rule Name</label>
+            <input matInput placeholder="Search by Rule Name"
+                (keyup)="applyFilter($any($event.target).value, 'ruleName')">
+        </div>
+
+        <div class="filter-group-right">
+            <div class="filter-item product">
+                <label>Product</label>
+                <mat-select value="All Products" (selectionChange)="applyFilter($event.value, 'product')">
+                    <mat-option *ngFor="let p of products" [value]="p">{{p}}</mat-option>
+                </mat-select>
+            </div>
+            <div class="filter-item status">
+                <label>Status
+                    <div class="status-info-container" (mouseenter)="showStatusTooltip = true"
+                        (mouseleave)="showStatusTooltip = false">
+                        <fa-icon [icon]="['fas', 'circle-info']" class="info-icon"></fa-icon>
+                        <div class="custom-tooltip" *ngIf="showStatusTooltip">
+                            <div class="tooltip-item paused"><fa-icon [icon]="['fas', 'circle-info']"></fa-icon>
+                                <strong>Paused:</strong> Alerting is not running
+                            </div>
+                            <div class="tooltip-item ok"><fa-icon [icon]="['fas', 'check-circle']"></fa-icon>
+                                <strong>OK:</strong> Query matches the configured threshold
+                            </div>
+                            <div class="tooltip-item alerting"><fa-icon
+                                    [icon]="['fas', 'exclamation-circle']"></fa-icon> <strong>Alerting:</strong> Query
+                                violates the configured threshold and has been firing for more thanEvaluate times</div>
+                            <div class="tooltip-item no-data"><fa-icon [icon]="['fas', 'question-circle']"></fa-icon>
+                                <strong>No Data:</strong> Query return no data
+                            </div>
+                            <div class="tooltip-item pending"><fa-icon
+                                    [icon]="['fas', 'exclamation-triangle']"></fa-icon> <strong>Pending:</strong> Query
+                                violates the configured threshold but not firing for more thanEvaluate times</div>
+                            <div class="tooltip-item unknown"><fa-icon [icon]="['fas', 'question']"></fa-icon>
+                                <strong>Unknown:</strong> Alerting has just started, does not enter a query cycle
+                            </div>
+                        </div>
+                    </div>
+                </label>
+                <mat-select value="All" (selectionChange)="applyFilter($event.value, 'status')">
+                    <mat-option *ngFor="let s of statuses" [value]="s">{{s}}</mat-option>
+                </mat-select>
+            </div>
+        </div>
+    </div>
+
+    <div class="table-container">
+        <table mat-table [dataSource]="dataSource">
+
+            <!-- Rule Name Column -->
+            <ng-container matColumnDef="ruleName">
+                <th mat-header-cell *matHeaderCellDef> Rule Name </th>
+                <td mat-cell *matCellDef="let element"> {{element.ruleName}} </td>
+            </ng-container>
+
+            <!-- Rule Description Column -->
+            <ng-container matColumnDef="ruleDescription">
+                <th mat-header-cell *matHeaderCellDef> Rule Description </th>
+                <td mat-cell *matCellDef="let element"> {{element.ruleDescription}} </td>
+            </ng-container>
+
+            <!-- Resource Range Column -->
+            <ng-container matColumnDef="resourceRange">
+                <th mat-header-cell *matHeaderCellDef> Resource Range </th>
+                <td mat-cell *matCellDef="let element"> {{element.resourceRange}} </td>
+            </ng-container>
+
+            <!-- Product Column -->
+            <ng-container matColumnDef="product">
+                <th mat-header-cell *matHeaderCellDef> Product </th>
+                <td mat-cell *matCellDef="let element"> {{element.product}} </td>
+            </ng-container>
+
+            <!-- Status Column -->
+            <ng-container matColumnDef="status">
+                <th mat-header-cell *matHeaderCellDef> Status <fa-icon [icon]="['fas', 'circle-info']"
+                        class="info-icon"></fa-icon> </th>
+                <td mat-cell *matCellDef="let element">
+                    <span class="status-ok" *ngIf="element.status === 'Ok'">
+                        <fa-icon [icon]="['far', 'check-circle']" class="status-icon"></fa-icon> Ok
+                    </span>
+                    <span class="status-message">{{element.statusMessage}}</span>
+                </td>
+            </ng-container>
+
+            <!-- Notification Column -->
+            <ng-container matColumnDef="notification">
+                <th mat-header-cell *matHeaderCellDef> Notification </th>
+                <td mat-cell *matCellDef="let element">
+                    <fa-icon [icon]="['fas', 'envelope']" *ngIf="element.notification"></fa-icon>
+                </td>
+            </ng-container>
+
+            <!-- Action Column -->
+            <ng-container matColumnDef="action">
+                <th mat-header-cell *matHeaderCellDef> Action </th>
+                <td mat-cell *matCellDef="let element">
+                    <button mat-icon-button>
+                        <fa-icon [icon]="['fas', 'pause']"></fa-icon>
+                    </button>
+                    <button mat-icon-button>
+                        <fa-icon [icon]="['far', 'edit']"></fa-icon>
+                    </button>
+                    <button mat-icon-button>
+                        <fa-icon [icon]="['far', 'circle-xmark']"></fa-icon>
+                    </button>
+                </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+        </table>
+        <mat-paginator [pageSizeOptions]="[15, 30, 50]" showFirstLastButtons></mat-paginator>
+    </div>
+</div>
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-thresholds/alert-thresholds.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-thresholds/alert-thresholds.scss	(revision 2771)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-thresholds/alert-thresholds.scss	(working copy)
@@ -0,0 +1,213 @@
+.alert-thresholds-container {
+    padding: 20px;
+    background-color: #f0f2f5;
+    min-height: calc(100vh - 64px); // Adjust based on header height
+
+    .toolbar {
+        display: flex;
+        gap: 10px;
+        margin-bottom: 15px;
+        justify-content: flex-end;
+
+        button {
+            color: #333;
+        }
+    }
+
+    .filters-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        margin-bottom: 15px;
+        background-color: #fff;
+        padding: 15px 20px;
+        border-radius: 4px;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+        .filter-item {
+            display: flex;
+            flex-direction: column;
+
+            label {
+                font-size: 12px;
+                color: #666;
+                margin-bottom: 5px;
+                font-weight: 500;
+
+                .status-info-container {
+                    display: inline-block;
+                    position: relative;
+                }
+
+                .info-icon {
+                    font-size: 10px;
+                    color: #999;
+                    margin-left: 4px;
+                    cursor: help;
+                }
+
+                .custom-tooltip {
+                    position: absolute;
+                    top: 100%;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    background-color: #6c757d;
+                    color: #fff;
+                    padding: 10px;
+                    border-radius: 4px;
+                    width: 300px;
+                    z-index: 1000;
+                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+                    margin-top: 5px;
+
+                    .tooltip-item {
+                        display: flex;
+                        align-items: flex-start;
+                        margin-bottom: 5px;
+                        font-size: 11px;
+                        line-height: 1.4;
+
+                        &:last-child {
+                            margin-bottom: 0;
+                        }
+
+                        fa-icon {
+                            margin-right: 8px;
+                            width: 14px;
+                            text-align: center;
+                            margin-top: 2px;
+                        }
+
+                        strong {
+                            margin-right: 4px;
+                            font-weight: 600;
+                        }
+
+                        &.paused fa-icon {
+                            color: #adb5bd;
+                        }
+
+                        &.ok fa-icon {
+                            color: #28a745;
+                        }
+
+                        &.alerting fa-icon {
+                            color: #dc3545;
+                        }
+
+                        &.no-data fa-icon {
+                            color: #ffc107;
+                        }
+
+                        &.pending fa-icon {
+                            color: #fd7e14;
+                        }
+
+                        &.unknown fa-icon {
+                            color: #6c757d;
+                        }
+                    }
+                }
+            }
+
+            &.rule-name {
+                flex: 1;
+                max-width: 300px;
+
+                input {
+                    width: 100%;
+                    padding: 8px 12px;
+                    border: 1px solid #ddd;
+                    border-radius: 4px;
+                    font-size: 13px;
+                    outline: none;
+
+                    &:focus {
+                        border-color: #3f51b5;
+                    }
+                }
+            }
+        }
+
+        .filter-group-right {
+            display: flex;
+            gap: 20px;
+
+            .filter-item {
+                min-width: 150px;
+            }
+        }
+    }
+
+    .table-container {
+        background-color: #fff;
+        border-radius: 4px;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+
+        table {
+            width: 100%;
+
+            th.mat-header-cell {
+                background-color: #fff;
+                color: #666;
+                font-size: 12px;
+                font-weight: 600;
+                border-bottom: 1px solid #eee;
+                padding: 15px 20px;
+
+                .info-icon {
+                    font-size: 10px;
+                    color: #999;
+                    margin-left: 4px;
+                }
+            }
+
+            td.mat-cell {
+                padding: 12px 20px;
+                font-size: 13px;
+                color: #444;
+                border-bottom: 1px solid #f5f5f5;
+
+                &.mat-column-action {
+                    white-space: nowrap;
+
+                    button {
+                        width: 32px;
+                        height: 32px;
+                        line-height: 32px;
+
+                        fa-icon {
+                            font-size: 14px;
+                            color: #555;
+                        }
+
+                        &:hover fa-icon {
+                            color: #333;
+                        }
+                    }
+                }
+            }
+
+            .status-ok {
+                color: #28a745;
+                font-weight: 500;
+                display: inline-flex;
+                align-items: center;
+                gap: 5px;
+                font-size: 12px;
+            }
+
+            .status-message {
+                color: #888;
+                font-size: 12px;
+                margin-left: 5px;
+            }
+        }
+    }
+}
+
+// Override material form field styles for filters if using mat-form-field
+::ng-deep .mat-mdc-form-field-subscript-wrapper {
+    display: none;
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-thresholds/alert-thresholds.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-thresholds/alert-thresholds.ts	(revision 2771)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-thresholds/alert-thresholds.ts	(working copy)
@@ -1,11 +1,190 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, ViewChild, AfterViewInit, inject } from '@angular/core';
+import { SharedModule } from '../../../shared/shared-module';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
+export interface AlertThresholdRule {
+  ruleName: string;
+  ruleDescription: string;
+  resourceRange: string;
+  product: string;
+  status: string;
+  statusMessage: string;
+  notification: boolean;
+}
+
 @Component({
   selector: 'app-alert-thresholds',
-  imports: [],
+  standalone: true,
+  imports: [
+    SharedModule
+  ],
   templateUrl: './alert-thresholds.html',
   styleUrl: './alert-thresholds.scss'
 })
-export class AlertThresholds {
+export class AlertThresholds implements OnInit, AfterViewInit {
+  displayedColumns: string[] = ['ruleName', 'ruleDescription', 'resourceRange', 'product', 'status', 'notification', 'action'];
+  dataSource = new MatTableDataSource<AlertThresholdRule>([]);
 
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+
+  products: string[] = ['All Products', 'Device', 'Virtual Service', 'Real Service', 'SSLVPN Service'];
+  statuses: string[] = ['All', 'Ok', 'Alerting', 'No Data', 'Paused', 'Pending'];
+
+  filterValues = {
+    ruleName: '',
+    product: 'All Products',
+    status: 'All'
+  };
+
+  showStatusTooltip = false;
+
+  constructor(private dialog: MatDialog) { }
+
+  ngOnInit() {
+    const data: AlertThresholdRule[] = [
+      {
+        ruleName: 'DeviceStatus_urvx98_net_mem_usage',
+        ruleDescription: 'Network Memory>80',
+        resourceRange: 'Resource: _ALL',
+        product: 'Device',
+        status: 'Ok',
+        statusMessage: '2minutes before',
+        notification: true
+      },
+      {
+        ruleName: 'DeviceStatus_urvx98_cpu_usage',
+        ruleDescription: 'CPU>80',
+        resourceRange: 'Resource: _ALL',
+        product: 'Device',
+        status: 'Ok',
+        statusMessage: '2minutes before',
+        notification: true
+      },
+      {
+        ruleName: 'VS_HTTP_Health_Check',
+        ruleDescription: 'Health Check Failed',
+        resourceRange: 'Resource: vs_http',
+        product: 'Virtual Service',
+        status: 'Alerting',
+        statusMessage: 'Firing for 5 mins',
+        notification: true
+      },
+      {
+        ruleName: 'RS_DB_Latency',
+        ruleDescription: 'Latency > 200ms',
+        resourceRange: 'Resource: rs_db_01',
+        product: 'Real Service',
+        status: 'Paused',
+        statusMessage: 'Maintenance window',
+        notification: false
+      },
+      {
+        ruleName: 'SSLVPN_User_Count',
+        ruleDescription: 'Active Users > 1000',
+        resourceRange: 'Resource: _ALL',
+        product: 'SSLVPN Service',
+        status: 'No Data',
+        statusMessage: 'No metrics received',
+        notification: true
+      },
+      {
+        ruleName: 'VS_Cert_Expiry',
+        ruleDescription: 'Certificate expiring in 7 days',
+        resourceRange: 'Resource: *.example.com',
+        product: 'Virtual Service',
+        status: 'Pending',
+        statusMessage: 'Condition met once',
+        notification: true
+      }
+    ];
+    this.dataSource.data = data;
+    this.dataSource.filterPredicate = this.createFilter();
+  }
+
+  createFilter(): (data: AlertThresholdRule, filter: string) => boolean {
+    return (data: AlertThresholdRule, filter: string): boolean => {
+      const searchTerms = JSON.parse(filter);
+
+      const nameMatch = data.ruleName.toLowerCase().indexOf(searchTerms.ruleName) !== -1;
+      const productMatch = searchTerms.product === 'All Products' || data.product === searchTerms.product;
+      const statusMatch = searchTerms.status === 'All' || data.status === searchTerms.status;
+
+      return nameMatch && productMatch && statusMatch;
+    };
+  }
+
+  applyFilter(filterValue: string, key: string) {
+    this.filterValues[key as keyof typeof this.filterValues] = filterValue.trim().toLowerCase();
+
+    // For dropdowns, we want exact match (except 'All'), but for name we want partial match
+    if (key === 'product' || key === 'status') {
+      this.filterValues[key as keyof typeof this.filterValues] = filterValue;
+    }
+
+    this.dataSource.filter = JSON.stringify(this.filterValues);
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
+  ngAfterViewInit() {
+    this.dataSource.paginator = this.paginator;
+  }
+
+  openCreateModal() {
+    const dialogRef = this.dialog.open(CreateAlertThreshold, {
+      width: '1200px',
+      disableClose: true
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        console.log('Dialog result:', result);
+        // Handle result if needed
+      }
+    });
+  }
 }
+
+@Component({
+  selector: 'app-create-alert-threshold',
+  standalone: true,
+  imports: [SharedModule],
+  templateUrl: './create-alert-threshold.html',
+  styleUrl: './create-alert-threshold.scss'
+})
+export class CreateAlertThreshold implements OnInit {
+  alertForm: FormGroup;
+
+  constructor(
+    public dialogRef: MatDialogRef<CreateAlertThreshold>,
+    private fb: FormBuilder
+  ) {
+    this.alertForm = this.fb.group({
+      ruleName: ['', Validators.required],
+      product: ['Device', Validators.required],
+      instance: ['All Instances', Validators.required],
+      triggerPeriod: ['5Minute cycle', Validators.required],
+      triggerPeriodCount: ['0', Validators.required],
+      noDataState: ['No Data', Validators.required]
+    });
+  }
+
+  ngOnInit() {
+  }
+
+  save() {
+    if (this.alertForm.valid) {
+      console.log(this.alertForm.value);
+      this.dialogRef.close(this.alertForm.value);
+    }
+  }
+
+  close() {
+    this.dialogRef.close();
+  }
+}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-thresholds/create-alert-threshold.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-thresholds/create-alert-threshold.html	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-thresholds/create-alert-threshold.html	(working copy)
@@ -0,0 +1,133 @@
+<h2 mat-dialog-title class="dialog-title">Add Threshold Alert</h2>
+
+<mat-dialog-content class="create-alert-threshold-form">
+    <form [formGroup]="alertForm">
+        <div class="form-field-wrapper">
+            <label class="form-label">Rule Name</label>
+            <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                <input matInput formControlName="ruleName">
+            </mat-form-field>
+        </div>
+
+        <div class="form-field-wrapper">
+            <label class="form-label">Product</label>
+            <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                <mat-select formControlName="product">
+                    <mat-option value="Device">Device</mat-option>
+                    <mat-option value="Virtual Service">Virtual Service</mat-option>
+                    <mat-option value="Real Service">Real Service</mat-option>
+                    <mat-option value="SSLVPN Service">SSLVPN Service</mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
+
+        <div class="form-field-wrapper">
+            <label class="form-label">Instance</label>
+            <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                <mat-select formControlName="instance">
+                    <mat-option value="All Instances">All Instances</mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
+
+        <div class="form-field-wrapper">
+            <label class="form-label">Trigger period</label>
+            <div class="time-select-container">
+                <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                    <mat-select formControlName="triggerPeriod">
+                        <mat-option value="1Minute cycle">1Minute cycle</mat-option>
+                        <mat-option value="5Minute cycle">5Minute cycle</mat-option>
+                        <mat-option value="15Minute cycle">15Minute cycle</mat-option>
+                        <mat-option value="30Minute cycle">30Minute cycle</mat-option>
+                        <mat-option value="60Minute cycle">60Minute cycle</mat-option>
+                    </mat-select>
+                </mat-form-field>
+                <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                    <mat-select formControlName="triggerPeriodCount">
+                        <mat-option value="0">Immediately</mat-option>
+                        <mat-option value="1">Continue for 1 periods</mat-option>
+                        <mat-option value="3">Continue for 3 periods</mat-option>
+                        <mat-option value="5">Continue for 5 periods</mat-option>
+                        <mat-option value="10">Continue for 10 periods</mat-option>
+                        <mat-option value="15">Continue for 15 periods</mat-option>
+                        <mat-option value="30">Continue for 30 periods</mat-option>
+                    </mat-select>
+                </mat-form-field>
+            </div>
+        </div>
+
+        <div class="form-field-wrapper align-start">
+            <label class="form-label">Rule Description</label>
+            <div class="rule-description-container">
+                <div class="add-condition-link">
+                    <a href="javascript:void(0)" class="details-page-link">+ Add Condition</a>
+                </div>
+                <div class="condition-row">
+                    <span class="keyword">WHEN</span>
+                    <mat-form-field appearance="outline" subscriptSizing="dynamic" class="width-xs">
+                        <mat-select value="avg()">
+                            <mat-option value="avg()">avg()</mat-option>
+                            <mat-option value="min()">min()</mat-option>
+                            <mat-option value="max()">max()</mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                    <span class="keyword">OF</span>
+                    <mat-form-field appearance="outline" subscriptSizing="dynamic" class="width-lg">
+                        <mat-select value="CPU Usage (%)">
+                            <mat-option value="CPU Usage (%)">CPU Usage (%)</mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                    <mat-form-field appearance="outline" subscriptSizing="dynamic" class="width-sm">
+                        <mat-select value="CPU">
+                            <mat-option value="CPU">CPU</mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                    <mat-form-field appearance="outline" subscriptSizing="dynamic" class="width-md">
+                        <mat-select value="IS ABOVE">
+                            <mat-option value="IS ABOVE">IS ABOVE</mat-option>
+                            <mat-option value="IS BELOW">IS BELOW</mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                    <mat-form-field appearance="outline" subscriptSizing="dynamic" class="width-xs">
+                        <input matInput value="0">
+                    </mat-form-field>
+                </div>
+            </div>
+        </div>
+
+        <div class="form-field-wrapper">
+            <label class="form-label">No Data State <fa-icon [icon]="['fas', 'circle-info']"
+                    style="font-size: 14px; height: 14px; width: 14px; vertical-align: middle;"></fa-icon></label>
+            <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                <mat-select formControlName="noDataState">
+                    <mat-option value="No Data">No Data</mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
+
+        <div class="form-field-wrapper">
+            <label class="form-label">Send to</label>
+            <div class="send-to-container">
+                <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                    <mat-select placeholder="---Please Select---">
+                        <mat-option value="email">Email</mat-option>
+                    </mat-select>
+                </mat-form-field>
+                <fa-icon [icon]="['fas', 'plus-circle']" class="blue-icon"
+                    style="font-size: 18px; cursor: pointer;"></fa-icon>
+            </div>
+        </div>
+
+        <div class="form-field-wrapper align-start">
+            <label class="form-label">Message</label>
+            <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                <textarea matInput rows="4"></textarea>
+            </mat-form-field>
+        </div>
+    </form>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+    <button mat-button (click)="close()">Cancel</button>
+    <button mat-raised-button color="primary" (click)="save()">Save Changes</button>
+</mat-dialog-actions>
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-thresholds/create-alert-threshold.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-thresholds/create-alert-threshold.scss	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-thresholds/create-alert-threshold.scss	(working copy)
@@ -0,0 +1,120 @@
+.create-alert-threshold-form {
+    padding: 20px;
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+
+    // Override common-form max-width if it was used, or just set our own
+    max-width: 100%;
+
+    .form-field-wrapper {
+        display: flex;
+        align-items: center;
+        gap: 15px;
+        margin-bottom: 20px;
+        width: 100%;
+
+        &.align-start {
+            align-items: flex-start;
+
+            .form-label {
+                margin-top: 10px;
+            }
+        }
+
+        .form-label {
+            font-weight: 500;
+            width: 160px; // Slightly reduced from 200px to give more room
+            text-align: right;
+            flex-shrink: 0;
+        }
+
+        mat-form-field {
+            flex-grow: 1;
+        }
+
+        .time-select-container {
+            flex-grow: 1;
+            display: flex;
+            gap: 10px;
+            align-items: center;
+
+            mat-form-field {
+                flex-grow: 0;
+                width: 150px;
+            }
+        }
+
+        .rule-description-container {
+            flex-grow: 1;
+
+            .add-condition-link {
+                margin-bottom: 5px;
+            }
+
+            .condition-row {
+                display: flex;
+                gap: 5px;
+                row-gap: 10px; // Add vertical gap for wrapped items
+                align-items: center;
+                flex-wrap: wrap; // Allow wrapping as requested
+
+                .keyword {
+                    color: #1170cf;
+                    font-weight: 500;
+                    white-space: nowrap;
+                }
+
+                mat-form-field {
+                    flex-grow: 0;
+
+                    // Use !important to force width if necessary, or ensure specificity
+                    &.width-xs {
+                        width: 80px !important;
+                    }
+
+                    &.width-sm {
+                        width: 100px !important;
+                    }
+
+                    &.width-md {
+                        width: 120px !important;
+                    }
+
+                    &.width-lg {
+                        width: 180px !important;
+                    }
+
+                    // Compact density for these specific fields
+                    ::ng-deep .mat-mdc-form-field-wrapper {
+                        padding-bottom: 0;
+                    }
+
+                    ::ng-deep .mat-mdc-form-field-infix {
+                        padding-top: 4px;
+                        padding-bottom: 4px;
+                        min-height: unset;
+                    }
+                }
+            }
+        }
+
+        .send-to-container {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            flex-grow: 1;
+        }
+    }
+}
+
+.dialog-actions {
+    padding-left: 20px;
+    padding-bottom: 20px;
+
+    button {
+        min-width: 100px;
+    }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-alert/create-event-alert.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-alert/create-event-alert.html	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-alert/create-event-alert.html	(working copy)
@@ -0,0 +1,82 @@
+<h2 mat-dialog-title class="dialog-title">Add Event Alert</h2>
+
+<mat-dialog-content class="create-event-alert-form">
+    <form [formGroup]="alertForm">
+        <div class="form-field-wrapper">
+            <label class="form-label">Rule Name</label>
+            <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                <input matInput formControlName="ruleName">
+            </mat-form-field>
+        </div>
+
+        <div class="form-field-wrapper">
+            <label class="form-label">Product</label>
+            <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                <mat-select formControlName="product">
+                    <mat-option value="Device">Device</mat-option>
+                    <mat-option value="Virtual Service">Virtual Service</mat-option>
+                    <mat-option value="Real Service">Real Service</mat-option>
+                    <mat-option value="SSLVPN Service">SSLVPN Service</mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
+
+        <div class="form-field-wrapper">
+            <label class="form-label">Instance</label>
+            <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                <mat-select formControlName="instance">
+                    <mat-option value="All Instances">All Instances</mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
+
+        <div class="form-field-wrapper">
+            <label class="form-label">Event Type</label>
+            <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                <mat-select formControlName="eventType">
+                    <mat-option value="All Types">All Types</mat-option>
+                    <mat-option value="Maintenance">Maintenance</mat-option>
+                    <mat-option value="Exception">Exception</mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
+
+        <div class="form-field-wrapper">
+            <label class="form-label">Event Name</label>
+            <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                <mat-select formControlName="eventName">
+                    <mat-option value="All Events">All Events</mat-option>
+                    <mat-option value="CPU fan malfunction">CPU fan malfunction</mat-option>
+                    <mat-option value="CPU overheating">CPU overheating</mat-option>
+                    <mat-option value="System overheating">System overheating</mat-option>
+                    <mat-option value="Power supply failure">Power supply failure</mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
+
+        <div class="form-field-wrapper">
+            <label class="form-label">Send to</label>
+            <div class="send-to-container">
+                <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                    <mat-select formControlName="sendTo" placeholder="---Please Select---">
+                        <mat-option value="email">Email</mat-option>
+                    </mat-select>
+                </mat-form-field>
+                <fa-icon [icon]="['fas', 'plus-circle']" class="blue-icon"
+                    style="font-size: 18px; cursor: pointer;"></fa-icon>
+            </div>
+        </div>
+
+        <div class="form-field-wrapper align-start">
+            <label class="form-label">Message</label>
+            <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                <textarea matInput rows="4" formControlName="message"></textarea>
+            </mat-form-field>
+        </div>
+    </form>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+    <button mat-button (click)="close()">Cancel</button>
+    <button mat-raised-button color="primary" (click)="save()">Confirm</button>
+</mat-dialog-actions>
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-alert/create-event-alert.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-alert/create-event-alert.scss	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-alert/create-event-alert.scss	(working copy)
@@ -0,0 +1,54 @@
+.create-event-alert-form {
+    padding: 20px;
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+
+    // Override common-form max-width if it was used, or just set our own
+    max-width: 100%;
+
+    .form-field-wrapper {
+        display: flex;
+        align-items: center;
+        gap: 15px;
+        margin-bottom: 20px;
+        width: 100%;
+
+        &.align-start {
+            align-items: flex-start;
+
+            .form-label {
+                margin-top: 10px;
+            }
+        }
+
+        .form-label {
+            font-weight: 500;
+            width: 120px;
+            text-align: right;
+            flex-shrink: 0;
+        }
+
+        mat-form-field {
+            flex-grow: 1;
+        }
+
+        .send-to-container {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            flex-grow: 1;
+        }
+    }
+}
+
+.dialog-actions {
+    padding-left: 20px;
+    padding-bottom: 20px;
+
+    button {
+        min-width: 100px;
+    }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-alert/event-alert.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-alert/event-alert.html	(revision 2771)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-alert/event-alert.html	(working copy)
@@ -1 +1,96 @@
-<p>event-alert works!</p>
+<div class="event-alert-container">
+    <div class="toolbar">
+        <button mat-raised-button (click)="openCreateModal()">Add</button>
+    </div>
+
+    <div class="filters-row">
+        <div class="filter-item rule-name">
+            <label>Rule Name</label>
+            <input matInput placeholder="Search by Rule Name"
+                (keyup)="applyFilter($any($event.target).value, 'ruleName')">
+        </div>
+
+        <div class="filter-group-right">
+            <div class="filter-item product">
+                <label>Product</label>
+                <mat-select value="All Products" (selectionChange)="applyFilter($event.value, 'product')">
+                    <mat-option *ngFor="let p of products" [value]="p">{{p}}</mat-option>
+                </mat-select>
+            </div>
+            <div class="filter-item status">
+                <label>Status</label>
+                <mat-select value="All" (selectionChange)="applyFilter($event.value, 'status')">
+                    <mat-option *ngFor="let s of statuses" [value]="s">{{s}}</mat-option>
+                </mat-select>
+            </div>
+        </div>
+    </div>
+
+    <div class="table-container">
+        <table mat-table [dataSource]="dataSource">
+
+            <!-- Rule Name Column -->
+            <ng-container matColumnDef="ruleName">
+                <th mat-header-cell *matHeaderCellDef> Rule Name </th>
+                <td mat-cell *matCellDef="let element"> {{element.ruleName}} </td>
+            </ng-container>
+
+            <!-- Rule Description Column -->
+            <ng-container matColumnDef="ruleDescription">
+                <th mat-header-cell *matHeaderCellDef> Rule Description </th>
+                <td mat-cell *matCellDef="let element"> {{element.ruleDescription}} </td>
+            </ng-container>
+
+            <!-- Resource Range Column -->
+            <ng-container matColumnDef="resourceRange">
+                <th mat-header-cell *matHeaderCellDef> Resource Range </th>
+                <td mat-cell *matCellDef="let element"> {{element.resourceRange}} </td>
+            </ng-container>
+
+            <!-- Product Column -->
+            <ng-container matColumnDef="product">
+                <th mat-header-cell *matHeaderCellDef> Product </th>
+                <td mat-cell *matCellDef="let element"> {{element.product}} </td>
+            </ng-container>
+
+            <!-- Status Column -->
+            <ng-container matColumnDef="status">
+                <th mat-header-cell *matHeaderCellDef> Status </th>
+                <td mat-cell *matCellDef="let element">
+                    <span class="status-enabled" *ngIf="element.status === 'Enabled'">
+                        <fa-icon [icon]="['fas', 'check-circle']" class="status-icon"></fa-icon> {{element.status}}
+                    </span>
+                    <span *ngIf="element.status !== 'Enabled'">{{element.status}}</span>
+                </td>
+            </ng-container>
+
+            <!-- Notification Column -->
+            <ng-container matColumnDef="notification">
+                <th mat-header-cell *matHeaderCellDef> Notification </th>
+                <td mat-cell *matCellDef="let element">
+                    <fa-icon [icon]="['fas', 'envelope']" *ngIf="element.notification"></fa-icon>
+                </td>
+            </ng-container>
+
+            <!-- Action Column -->
+            <ng-container matColumnDef="action">
+                <th mat-header-cell *matHeaderCellDef> Action </th>
+                <td mat-cell *matCellDef="let element">
+                    <button mat-icon-button>
+                        <fa-icon [icon]="['fas', 'pause']"></fa-icon>
+                    </button>
+                    <button mat-icon-button>
+                        <fa-icon [icon]="['far', 'edit']"></fa-icon>
+                    </button>
+                    <button mat-icon-button>
+                        <fa-icon [icon]="['far', 'circle-xmark']"></fa-icon>
+                    </button>
+                </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+        </table>
+        <mat-paginator [pageSizeOptions]="[15, 30, 50]" showFirstLastButtons></mat-paginator>
+    </div>
+</div>
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-alert/event-alert.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-alert/event-alert.scss	(revision 2771)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-alert/event-alert.scss	(working copy)
@@ -0,0 +1,126 @@
+.event-alert-container {
+    padding: 20px;
+    background-color: #f0f2f5;
+    min-height: calc(100vh - 64px); // Adjust based on header height
+
+    .toolbar {
+        display: flex;
+        gap: 10px;
+        margin-bottom: 15px;
+        justify-content: flex-end;
+
+        button {
+            color: #333;
+        }
+    }
+
+    .filters-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        margin-bottom: 15px;
+        background-color: #fff;
+        padding: 15px 20px;
+        border-radius: 4px;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+        .filter-item {
+            display: flex;
+            flex-direction: column;
+
+            label {
+                font-size: 12px;
+                color: #666;
+                margin-bottom: 5px;
+                font-weight: 500;
+            }
+
+            &.rule-name {
+                flex: 1;
+                max-width: 300px;
+
+                input {
+                    width: 100%;
+                    padding: 8px 12px;
+                    border: 1px solid #ddd;
+                    border-radius: 4px;
+                    font-size: 13px;
+                    outline: none;
+
+                    &:focus {
+                        border-color: #3f51b5;
+                    }
+                }
+            }
+        }
+
+        .filter-group-right {
+            display: flex;
+            gap: 20px;
+
+            .filter-item {
+                min-width: 150px;
+            }
+        }
+    }
+
+    .table-container {
+        background-color: #fff;
+        border-radius: 4px;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+
+        table {
+            width: 100%;
+
+            th.mat-header-cell {
+                background-color: #fff;
+                color: #666;
+                font-size: 12px;
+                font-weight: 600;
+                border-bottom: 1px solid #eee;
+                padding: 15px 20px;
+            }
+
+            td.mat-cell {
+                padding: 12px 20px;
+                font-size: 13px;
+                color: #444;
+                border-bottom: 1px solid #f5f5f5;
+
+                &.mat-column-action {
+                    white-space: nowrap;
+
+                    button {
+                        width: 32px;
+                        height: 32px;
+                        line-height: 32px;
+
+                        fa-icon {
+                            font-size: 14px;
+                            color: #555;
+                        }
+
+                        &:hover fa-icon {
+                            color: #333;
+                        }
+                    }
+                }
+            }
+
+            .status-enabled {
+                color: #28a745;
+                font-weight: 500;
+                display: inline-flex;
+                align-items: center;
+                gap: 5px;
+                font-size: 12px;
+            }
+        }
+    }
+}
+
+// Override material form field styles for filters if using mat-form-field
+::ng-deep .mat-mdc-form-field-subscript-wrapper {
+    display: none;
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-alert/event-alert.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-alert/event-alert.ts	(revision 2771)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-alert/event-alert.ts	(working copy)
@@ -1,11 +1,172 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
+import { SharedModule } from '../../../shared/shared-module';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
+export interface EventAlertRule {
+  ruleName: string;
+  ruleDescription: string;
+  resourceRange: string;
+  product: string;
+  status: string;
+  notification: boolean;
+}
+
 @Component({
   selector: 'app-event-alert',
-  imports: [],
+  standalone: true,
+  imports: [
+    SharedModule
+  ],
   templateUrl: './event-alert.html',
   styleUrl: './event-alert.scss'
 })
-export class EventAlert {
+export class EventAlert implements OnInit, AfterViewInit {
+  displayedColumns: string[] = ['ruleName', 'ruleDescription', 'resourceRange', 'product', 'status', 'notification', 'action'];
+  dataSource = new MatTableDataSource<EventAlertRule>([]);
 
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+
+  products: string[] = ['All Products', 'Device', 'Virtual Service', 'Real Service', 'SSLVPN Service'];
+  statuses: string[] = ['All', 'Enabled', 'Paused'];
+
+  filterValues = {
+    ruleName: '',
+    product: 'All Products',
+    status: 'All'
+  };
+
+  constructor(private dialog: MatDialog) { }
+
+  ngOnInit() {
+    const data: EventAlertRule[] = [
+      {
+        ruleName: 'HealthCheck_pdq37m_rs_hc_failed',
+        ruleDescription: 'realService | * | health_check_failed',
+        resourceRange: 'Resource: _ALL',
+        product: 'Real Service',
+        status: 'Enabled',
+        notification: true
+      },
+      {
+        ruleName: 'HealthCheck_pdq37m_vs_hc_failed',
+        ruleDescription: 'virtualService | * | health_check_failed',
+        resourceRange: 'Resource: _ALL',
+        product: 'Virtual Service',
+        status: 'Enabled',
+        notification: true
+      },
+      {
+        ruleName: 'CertKeyExpired_6umk3_cert_exp_60',
+        ruleDescription: 'virtualService | * | CertKeyExpired_60',
+        resourceRange: 'Resource: _ALL',
+        product: 'Virtual Service',
+        status: 'Enabled',
+        notification: true
+      },
+      {
+        ruleName: 'CertKeyExpired_6umk3_cert_exp_7',
+        ruleDescription: 'virtualService | * | CertKeyExpired_7',
+        resourceRange: 'Resource: _ALL',
+        product: 'Virtual Service',
+        status: 'Enabled',
+        notification: true
+      },
+      {
+        ruleName: 'CertKeyExpired_6umk3_cert_exp',
+        ruleDescription: 'virtualService | * | CertKeyExpired',
+        resourceRange: 'Resource: _ALL',
+        product: 'Virtual Service',
+        status: 'Enabled',
+        notification: true
+      }
+    ];
+    this.dataSource.data = data;
+    this.dataSource.filterPredicate = this.createFilter();
+  }
+
+  createFilter(): (data: EventAlertRule, filter: string) => boolean {
+    return (data: EventAlertRule, filter: string): boolean => {
+      const searchTerms = JSON.parse(filter);
+
+      const nameMatch = data.ruleName.toLowerCase().indexOf(searchTerms.ruleName) !== -1;
+      const productMatch = searchTerms.product === 'All Products' || data.product === searchTerms.product;
+      const statusMatch = searchTerms.status === 'All' || data.status === searchTerms.status;
+
+      return nameMatch && productMatch && statusMatch;
+    };
+  }
+
+  applyFilter(filterValue: string, key: string) {
+    this.filterValues[key as keyof typeof this.filterValues] = filterValue.trim().toLowerCase();
+
+    if (key === 'product' || key === 'status') {
+      this.filterValues[key as keyof typeof this.filterValues] = filterValue;
+    }
+
+    this.dataSource.filter = JSON.stringify(this.filterValues);
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
+  ngAfterViewInit() {
+    this.dataSource.paginator = this.paginator;
+  }
+  openCreateModal() {
+    const dialogRef = this.dialog.open(CreateEventAlert, {
+      width: '600px',
+      disableClose: true
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        console.log('Dialog result:', result);
+        // Handle result if needed
+      }
+    });
+  }
 }
+
+@Component({
+  selector: 'app-create-event-alert',
+  standalone: true,
+  imports: [SharedModule],
+  templateUrl: './create-event-alert.html',
+  styleUrl: './create-event-alert.scss'
+})
+export class CreateEventAlert implements OnInit {
+  alertForm: FormGroup;
+
+  constructor(
+    public dialogRef: MatDialogRef<CreateEventAlert>,
+    private fb: FormBuilder
+  ) {
+    this.alertForm = this.fb.group({
+      ruleName: ['', Validators.required],
+      product: ['Device', Validators.required],
+      instance: ['All Instances', Validators.required],
+      eventType: ['All Types', Validators.required],
+      eventName: ['All Events', Validators.required],
+      sendTo: ['', Validators.required],
+      message: ['']
+    });
+  }
+
+  ngOnInit() {
+  }
+
+  save() {
+    if (this.alertForm.valid) {
+      console.log(this.alertForm.value);
+      this.dialogRef.close(this.alertForm.value);
+    }
+  }
+
+  close() {
+    this.dialogRef.close();
+  }
+}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/initiative-alerts/initiative-alerts.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/initiative-alerts/initiative-alerts.html	(revision 2771)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/initiative-alerts/initiative-alerts.html	(working copy)
@@ -1 +1,72 @@
-<p>initiative-alerts works!</p>
+<mat-accordion displayMode="flat" multi>
+    <mat-expansion-panel *ngFor="let category of categories" [expanded]="category.rules.length > 0" hideToggle="true"
+        #panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                <fa-icon *ngIf="category.rules.length > 0 && panel.expanded" [icon]="['fas', 'chevron-down']"></fa-icon>
+                <fa-icon *ngIf="category.rules.length > 0 && !panel.expanded"
+                    [icon]="['fas', 'chevron-right']"></fa-icon>
+                {{ category.title }}
+            </mat-panel-title>
+            <mat-panel-description>
+                <span class="description-text">{{ category.description }}</span>
+                <div class="initiative-alert-container" (click)="$event.stopPropagation()">
+                    <span class="label">Initiative Alert</span>
+                    <mat-slide-toggle [checked]="category.initiativeAlert"
+                        (change)="category.initiativeAlert = $event.checked" color="primary">
+                        {{ category.initiativeAlert ? 'ON' : 'OFF' }}
+                    </mat-slide-toggle>
+                </div>
+            </mat-panel-description>
+        </mat-expansion-panel-header>
+
+        <div class="panel-content" *ngIf="category.rules.length > 0">
+            <div class="disabled-message" *ngIf="!category.initiativeAlert">
+                Initiative Alert has not enabled
+            </div>
+            <table mat-table [dataSource]="category.rules" class="rules-table" *ngIf="category.initiativeAlert">
+
+                <!-- Description Column -->
+                <ng-container matColumnDef="description">
+                    <th mat-header-cell *matHeaderCellDef> Rule Description </th>
+                    <td mat-cell *matCellDef="let rule"> {{rule.description}} </td>
+                </ng-container>
+
+                <!-- Status Column -->
+                <ng-container matColumnDef="status">
+                    <th mat-header-cell *matHeaderCellDef> Status </th>
+                    <td mat-cell *matCellDef="let rule">
+                        <span class="status-enabled" *ngIf="rule.status === 'Enabled'">
+                            <fa-icon [icon]="['far', 'check-circle']" class="status-icon"></fa-icon> {{rule.status}}
+                        </span>
+                        <span *ngIf="rule.status !== 'Enabled'">{{rule.status}}</span>
+                    </td>
+                </ng-container>
+
+                <!-- Notification Column -->
+                <ng-container matColumnDef="notification">
+                    <th mat-header-cell *matHeaderCellDef> Notification </th>
+                    <td mat-cell *matCellDef="let rule">
+                        <fa-icon [icon]="['fas', 'envelope']"></fa-icon>
+                    </td>
+                </ng-container>
+
+                <!-- Action Column -->
+                <ng-container matColumnDef="action">
+                    <th mat-header-cell *matHeaderCellDef> Action </th>
+                    <td mat-cell *matCellDef="let rule">
+                        <button mat-icon-button color="primary" (click)="toggleRuleStatus(rule)">
+                            <fa-icon [icon]="rule.status === 'Enabled' ? ['fas', 'pause'] : ['fas', 'play']"></fa-icon>
+                        </button>
+                        <button mat-icon-button color="primary" (click)="editRule(rule)">
+                            <fa-icon [icon]="['far', 'edit']"></fa-icon>
+                        </button>
+                    </td>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            </table>
+        </div>
+    </mat-expansion-panel>
+</mat-accordion>
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/initiative-alerts/initiative-alerts.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/initiative-alerts/initiative-alerts.scss	(revision 2771)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/initiative-alerts/initiative-alerts.scss	(working copy)
@@ -0,0 +1,134 @@
+mat-accordion {
+    display: block;
+}
+
+mat-expansion-panel {
+    border-bottom: 1px solid #e0e0e0;
+    box-shadow: none !important;
+    border-radius: 0 !important;
+
+    &.mat-expanded {
+        margin-bottom: 0;
+    }
+}
+
+mat-expansion-panel-header {
+    height: auto;
+    padding: 16px 24px;
+
+    ::ng-deep .mat-content {
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+    }
+
+    mat-panel-title {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        font-weight: 500;
+        flex: 0 0 200px; // Fixed width for title
+
+        fa-icon {
+            margin-right: 8px;
+            font-size: 14px; // FontAwesome icons might need different sizing
+            width: 20px;
+            text-align: center;
+        }
+    }
+
+    mat-panel-description {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-grow: 1;
+        margin-right: 0;
+        font-size: 13px;
+        color: #666;
+
+        .description-text {
+            flex: 1;
+            margin-right: 16px;
+        }
+
+        .initiative-alert-container {
+            display: flex;
+            align-items: center;
+            white-space: nowrap;
+
+            .label {
+                margin-right: 12px;
+                font-size: 12px;
+                color: #333;
+            }
+        }
+    }
+}
+
+.panel-content {
+    background-color: #f5f5f5;
+    padding: 0;
+
+    .disabled-message {
+        padding: 24px;
+        text-align: center;
+        color: #666;
+        font-size: 14px;
+        font-style: italic;
+    }
+}
+
+.rules-table {
+    width: 100%;
+    background-color: transparent;
+
+    th.mat-header-cell {
+        font-size: 12px;
+        color: #666;
+        font-weight: 500;
+        border-bottom: 1px solid #e0e0e0;
+        padding: 0 24px;
+    }
+
+    td.mat-cell {
+        font-size: 13px;
+        color: #333;
+        border-bottom: 1px solid #e0e0e0;
+        padding: 0 24px;
+
+        &:first-child {
+            color: #666;
+        }
+    }
+
+    tr.mat-row:last-child td {
+        border-bottom: none;
+    }
+
+    .status-enabled {
+        display: flex;
+        align-items: center;
+        color: #4caf50; // Green color
+        font-weight: 500;
+
+        .status-icon {
+            font-size: 16px;
+            width: 16px;
+            height: 16px;
+            margin-right: 4px;
+        }
+    }
+
+    button {
+        width: 32px;
+        height: 32px;
+        line-height: 32px;
+
+        mat-icon {
+            font-size: 18px;
+            width: 18px;
+            height: 18px;
+            color: #1976d2; // Primary blue
+        }
+    }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/initiative-alerts/initiative-alerts.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/initiative-alerts/initiative-alerts.ts	(revision 2771)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/initiative-alerts/initiative-alerts.ts	(working copy)
@@ -1,11 +1,72 @@
 import { Component } from '@angular/core';
+import { SharedModule } from '../../../shared/shared-module';
 
+export interface AlertRule {
+  description: string;
+  status: 'Enabled' | 'Disabled';
+  notification: string; // e.g., 'email'
+}
+
+export interface AlertCategory {
+  title: string;
+  description: string;
+  initiativeAlert: boolean;
+  rules: AlertRule[];
+}
+
 @Component({
   selector: 'app-initiative-alerts',
-  imports: [],
+  imports: [SharedModule],
   templateUrl: './initiative-alerts.html',
   styleUrl: './initiative-alerts.scss'
 })
 export class InitiativeAlerts {
+  displayedColumns: string[] = ['description', 'status', 'notification', 'action'];
 
+  categories: AlertCategory[] = [
+    {
+      title: 'Device Status',
+      description: 'Will create alert rules for CPU Utilize Rate, Network Memory Utilize Rate, which will apply to all the device.',
+      initiativeAlert: true,
+      rules: [
+        { description: 'Network Memory>80', status: 'Enabled', notification: 'email' },
+        { description: 'CPU>80', status: 'Enabled', notification: 'email' }
+      ]
+    },
+    {
+      title: 'Health Check',
+      description: 'Will create alert rules for Virtual Service Health Check Failed, Real Service Health Check Failed, which will apply to all the SLB service.',
+      initiativeAlert: true,
+      rules: [
+        { description: 'realService | * | health_check_failed', status: 'Enabled', notification: 'email' },
+        { description: 'virtualService | * | health_check_failed', status: 'Enabled', notification: 'email' }
+      ]
+    },
+    {
+      title: 'CertKeyExpired',
+      description: 'Will create alert rules for Virtual Service CertKeyExpired, which will apply to all the SLB virual service.',
+      initiativeAlert: true,
+      rules: [
+        { description: 'virtualService | * | CertKeyExpired_60', status: 'Enabled', notification: 'email' },
+        { description: 'virtualService | * | CertKeyExpired_7', status: 'Enabled', notification: 'email' },
+        { description: 'virtualService | * | CertKeyExpired', status: 'Enabled', notification: 'email' }
+      ]
+    }
+  ];
+
+  toggleInitiativeAlert(event: Event, category: AlertCategory) {
+    event.stopPropagation();
+    category.initiativeAlert = !category.initiativeAlert;
+  }
+
+  editRule(rule: AlertRule) {
+    console.log('Edit rule:', rule);
+    // Logic to open edit dialog would go here
+  }
+
+  toggleRuleStatus(rule: AlertRule) {
+    rule.status = rule.status === 'Enabled' ? 'Disabled' : 'Enabled';
+    console.log('Toggled rule status:', rule);
+  }
+
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/shared/shared-module.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/shared/shared-module.ts	(revision 2771)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/shared/shared-module.ts	(working copy)
@@ -1,39 +1,39 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
 
 
 // FontAwesome Imports
-import {FaIconLibrary, FontAwesomeModule} from '@fortawesome/angular-fontawesome';
+import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import * as solidIcons from '@fortawesome/free-solid-svg-icons';
 import * as regularIcons from '@fortawesome/free-regular-svg-icons';
 
 // Angular Material Imports
-import {MatGridListModule} from '@angular/material/grid-list';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatCardModule} from '@angular/material/card';
-import {MatButtonModule} from '@angular/material/button';
-import {MatInputModule} from '@angular/material/input';
-import {MatListModule, MatNavList} from '@angular/material/list';
-import {MatExpansionModule} from '@angular/material/expansion';
-import {MatIconModule} from '@angular/material/icon';
-import {MatSnackBarModule} from '@angular/material/snack-bar';
-import {MatTableModule} from '@angular/material/table';
-import {MatTooltipModule} from '@angular/material/tooltip';
-import {MatDialogModule} from '@angular/material/dialog';
-import {MatSelectModule} from '@angular/material/select';
-import {MatRadioModule} from '@angular/material/radio';
-import {MatSlideToggleModule} from '@angular/material/slide-toggle';
-import {MatTabsModule} from '@angular/material/tabs';
-import {MatDatepickerModule} from '@angular/material/datepicker';
-import {MatPaginatorModule} from '@angular/material/paginator';
-import {MatProgressBarModule} from '@angular/material/progress-bar';
-import {MatTimepickerModule} from '@angular/material/timepicker';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule, MatNavList } from '@angular/material/list';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatSelectModule } from '@angular/material/select';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatTimepickerModule } from '@angular/material/timepicker';
 
 
 // Third-Party Modules
-import {NgxEchartsModule} from 'ngx-echarts';
+import { NgxEchartsModule } from 'ngx-echarts';
 
 import {
   NgxMatDatepickerActions,
@@ -43,7 +43,7 @@
   NgxMatDatepickerInput,
   NgxMatDatetimepicker,
 } from '@ngxmc/datetime-picker';
-import {MatStepperModule} from '@angular/material/stepper';
+import { MatStepperModule } from '@angular/material/stepper';
 
 const allSolidIcons = Object.values(solidIcons).filter((icon: any) => icon.iconName);
 const allRegularIcons = Object.values(regularIcons).filter((icon: any) => icon.iconName);
@@ -63,6 +63,9 @@
   solidIcons.faDesktop, solidIcons.faNetworkWired, solidIcons.faCloudArrowUp,
   solidIcons.faPeopleLine, solidIcons.faMicrochip, solidIcons.faSignal, solidIcons.faBell,
   solidIcons.faLaptopCode, solidIcons.faHardDrive, solidIcons.faSpinner, solidIcons.faBookmark,
+  solidIcons.faPause, solidIcons.faEnvelope,
+  solidIcons.faChevronDown, solidIcons.faPlay, solidIcons.faPlusCircle,
+  solidIcons.faCheckCircle, solidIcons.faExclamationCircle, solidIcons.faExclamationTriangle, solidIcons.faQuestion,
 ];
 
 const customRegularIcons = [