Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/apv-ssl-management/apv-ssl-management.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/apv-ssl-management/apv-ssl-management.html	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/apv-ssl-management/apv-ssl-management.html	(working copy)
@@ -1,65 +1,97 @@
-<mat-card class="page-card-1" appearance="filled">
-  <mat-card-header>
-    <div>
-      <button mat-raised-button (click)="checkCertificateExpiry()">Check Certificate Expiry</button>
-    </div>
-  </mat-card-header>
-  <mat-card-content>
+<div class="apv-ssl-container">
+
+  <!-- Info Alert -->
+  <div class="info-alert">
+    <fa-icon [icon]="['fas', 'circle-info']"></fa-icon>
     <span>
-      SSL certificate display depends on APV version. For APV 10.3 version, the required version is 10.3.0.2 and later. For APV 10.3.1 version, the required version is 10.3.1.2 and later. For APV 8.6.1 version, the required version is 8.6.1.89 and later. Therefore, if you want to use the related functions of the SSL certificate, please update the corresponding APV version.
+      SSL certificate display depends on APV version. For APV 10.3 version, the required version is 10.3.0.2 and later.
+      For APV 10.3.1 version, the required version is 10.3.1.2 and later. For APV 8.6.1 version, the required version is
+      8.6.1.89 and later. Therefore, if you want to use the related functions of the SSL certificate, please update the
+      corresponding APV version.
     </span>
-  </mat-card-content>
-</mat-card>
-<div class="table-container">
-  <table mat-table [dataSource]="dataSource" class="mat-elevation-z1">
-    <ng-container matColumnDef="serial">
-      <th mat-header-cell *matHeaderCellDef> No.</th>
-      <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial:paginator }}</td>
-    </ng-container>
-    <ng-container matColumnDef="serviceName">
-      <th mat-header-cell *matHeaderCellDef> Service Name</th>
-      <td mat-cell *matCellDef="let element">
-        <a class="details-page-link" (click)="goToDetails(element)">{{ element?.service_name }}</a>
-      </td>
-    </ng-container>
-    <ng-container matColumnDef="deviceName">
-      <th mat-header-cell *matHeaderCellDef> Device Name</th>
-      <td mat-cell *matCellDef="let element">{{ element?.device }}</td>
-    </ng-container>
-    <ng-container matColumnDef="deviceGroup">
-      <th mat-header-cell *matHeaderCellDef> Device Group</th>
-      <td mat-cell *matCellDef="let element">{{ element?.device_group }}</td>
-    </ng-container>
-    <ng-container matColumnDef="serviceType">
-      <th mat-header-cell *matHeaderCellDef> Service Type</th>
-      <td mat-cell *matCellDef="let element"> {{ element?.protocol }}</td>
-    </ng-container>
-    <ng-container matColumnDef="sslHostName">
-      <th mat-header-cell *matHeaderCellDef> SSL Hostname</th>
-      <td mat-cell *matCellDef="let element">{{ element?.host_name }}</td>
-    </ng-container>
-    <ng-container matColumnDef="status">
-      <th mat-header-cell *matHeaderCellDef> SSL Host Status</th>
-      <td mat-cell *matCellDef="let element">{{ element?.status }}</td>
-    </ng-container>
-    <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> Action</th>
-      <td mat-cell *matCellDef="let element">
-        <div class="row-action a-link">
-          <fa-icon [icon]="['far', 'edit']" size="lg" matTooltip="Edit"
-                   (click)="editSSL(element)"></fa-icon>
-        </div>
-      </td>
-    </ng-container>
-    <tr mat-header-row *matHeaderRowDef="tableColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
-    <tr class="mat-row table-no-data" *matNoDataRow>
-      <td class="mat-cell" colspan="10">No results found.</td>
-    </tr>
-  </table>
-  <mat-paginator
-    [pageSizeOptions]="[10, 15, 20, 25]"
-    [length]="totalRecords"
-    showFirstLastButtons
-  ></mat-paginator>
-</div>
+  </div>
+
+  <!-- Toolbar (Button + Filter) -->
+  <div class="table-toolbar">
+    <!-- Filter -->
+    <mat-form-field appearance="outline" class="filter-field">
+      <mat-label>Filter SSL Host</mat-label>
+      <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Service Name, Hostname" #input>
+      <fa-icon [icon]="['fas', 'search']" matSuffix class="search-icon"></fa-icon>
+    </mat-form-field>
+
+    <!-- Action Button -->
+    <button mat-flat-button color="primary" (click)="checkCertificateExpiry()">
+      Check Certificate Expiry
+    </button>
+  </div>
+
+
+  <div class="table-container">
+    <div class="table-scroll-area">
+      <table mat-table [dataSource]="dataSource" matSort class="modern-table">
+        <ng-container matColumnDef="serial">
+          <th mat-header-cell *matHeaderCellDef> No.</th>
+          <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial:paginator }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="serviceName">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Service Name</th>
+          <td mat-cell *matCellDef="let element">
+            <a class="details-page-link" (click)="goToDetails(element)">{{ element?.service_name }}</a>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="deviceName">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Device Name</th>
+          <td mat-cell *matCellDef="let element">{{ element?.device }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="deviceGroup">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Device Group</th>
+          <td mat-cell *matCellDef="let element">{{ element?.device_group }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="serviceType">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Service Type</th>
+          <td mat-cell *matCellDef="let element">
+            <div class="protocol-chip">{{ element?.protocol }}</div>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="sslHostName">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> SSL Hostname</th>
+          <td mat-cell *matCellDef="let element">{{ element?.host_name }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="status">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> SSL Host Status</th>
+          <td mat-cell *matCellDef="let element">{{ element?.status }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="action">
+          <th mat-header-cell *matHeaderCellDef> Action</th>
+          <td mat-cell *matCellDef="let element">
+            <div class="row-action a-link">
+              <fa-icon [icon]="['far', 'edit']" size="lg" matTooltip="Edit" (click)="editSSL(element)"></fa-icon>
+            </div>
+          </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="tableColumns; sticky: true"></tr>
+        <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
+
+        <tr class="mat-row table-no-data" *matNoDataRow>
+          <td class="mat-cell" colspan="10">
+            @if (input.value) {
+            No results found for "{{input.value}}"
+            } @else {
+            No results found.
+            }
+          </td>
+        </tr>
+      </table>
+    </div>
+    <mat-paginator [pageSizeOptions]="[10, 15, 20, 25]" 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/apv-ssl-management/apv-ssl-management.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/apv-ssl-management/apv-ssl-management.scss	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/apv-ssl-management/apv-ssl-management.scss	(working copy)
@@ -0,0 +1,140 @@
+// Copied from topology-slb-virtual-service.scss for consistency
+
+.apv-ssl-container {
+    padding: 12px;
+    background-color: #fafafa;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    display: flex;
+    flex-direction: column;
+
+    // Header Toolbar (Button + Filter)
+    .table-toolbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20px;
+        gap: 16px;
+
+        .filter-field {
+            width: 100%;
+            max-width: 400px;
+            margin-bottom: 0; // Reset for flex alignment
+
+            ::ng-deep .mat-mdc-text-field-wrapper {
+                background-color: white;
+                border-radius: 8px;
+            }
+
+            ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+                display: none;
+            }
+
+            .search-icon {
+                color: #757575;
+                font-size: 16px;
+                margin-right: 8px;
+            }
+        }
+    }
+
+    // Alert Box
+    .info-alert {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px 16px;
+        background-color: #e3f2fd;
+        border: 1px solid #bbdefb;
+        border-radius: 8px;
+        color: #0d47a1;
+        margin-bottom: 20px;
+        font-size: 13px;
+        line-height: 1.5;
+
+        fa-icon {
+            font-size: 16px;
+        }
+    }
+
+    // Table Container
+    .table-container {
+        border-radius: 8px;
+        overflow: hidden;
+        border: 1px solid #e0e0e0;
+        background: white;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+
+        .table-scroll-area {
+            flex: 1;
+            overflow: auto;
+            width: 100%;
+        }
+
+        .modern-table {
+            width: 100%;
+
+            th.mat-mdc-header-cell {
+                background-color: #f5f5f5;
+                color: #424242;
+                font-weight: 600;
+                font-size: 13px;
+                padding: 0 16px;
+                border-bottom: 1px solid #e0e0e0;
+            }
+
+            td.mat-mdc-cell {
+                padding: 12px 16px;
+                font-size: 13px;
+                color: #333;
+                border-bottom: 1px solid #f0f0f0;
+
+                &.no-data-cell {
+                    text-align: center;
+                    padding: 48px;
+                    color: #757575;
+                    background-color: white;
+                }
+            }
+
+            tr.mat-mdc-row:hover {
+                background-color: #f9f9f9;
+            }
+
+            // Links
+            .details-page-link,
+            .a-link {
+                color: #1976d2;
+                cursor: pointer;
+                text-decoration: none;
+                font-weight: 500;
+
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+
+            // Chips
+            .protocol-chip {
+                display: inline-block;
+                padding: 2px 8px;
+                border-radius: 12px;
+                background-color: #e0e0e0;
+                color: #424242;
+                font-size: 11px;
+                font-weight: 500;
+                text-transform: uppercase;
+                letter-spacing: 0.5px;
+            }
+        }
+    }
+
+    mat-paginator {
+        background: transparent;
+        border-top: 1px solid #e0e0e0;
+    }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/apv-ssl-management/apv-ssl-management.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/apv-ssl-management/apv-ssl-management.ts	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/apv-ssl-management/apv-ssl-management.ts	(working copy)
@@ -1,17 +1,18 @@
-import {ChangeDetectorRef, Component, inject, OnInit, ViewChild} from '@angular/core';
-import {MatTableDataSource} from "@angular/material/table";
-import {SharedModule} from '../../shared/shared-module';
-import {MatPaginator} from '@angular/material/paginator';
-import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog';
-import {Router} from '@angular/router';
-import {NotificationService} from '../../services/notification';
-import {DeviceService} from '../../services/device-service';
-import {GlobalSerialPipe} from '../../pipes/global-serial-pipe';
-import {take} from 'rxjs/operators';
-import {Storage} from '../../services/storage';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {VpnService} from '../../services/vpn-service';
-import {DevicesBuildInfoDialog} from '../sub-components/devices/devices';
+import { ChangeDetectorRef, Component, inject, OnInit, ViewChild } from '@angular/core';
+import { MatTableDataSource } from "@angular/material/table";
+import { MatSort } from "@angular/material/sort";
+import { SharedModule } from '../../shared/shared-module';
+import { MatPaginator } from '@angular/material/paginator';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { NotificationService } from '../../services/notification';
+import { DeviceService } from '../../services/device-service';
+import { GlobalSerialPipe } from '../../pipes/global-serial-pipe';
+import { take } from 'rxjs/operators';
+import { Storage } from '../../services/storage';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { VpnService } from '../../services/vpn-service';
+import { DevicesBuildInfoDialog } from '../sub-components/devices/devices';
 
 
 @Component({
@@ -28,6 +29,7 @@
   tableColumns: string[] = ['serial', 'serviceName', 'deviceName', 'deviceGroup', 'serviceType', 'sslHostName', 'status', 'action'];
   dataSource: MatTableDataSource<any> = new MatTableDataSource();
   @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
   dialog = inject(MatDialog);
   dialogConfig = new MatDialogConfig();
   devices: any = [];
@@ -66,92 +68,93 @@
         next: (data: any) => {
           this.devices = data.devices;
           this.devices.forEach((_device: any) => {
-              if (this.device_type_info?.ADC_TYPE_LIST.includes(_device.type.toLowerCase())) {
-                this._device.executeCLICommand(_device?.id, {cmd: "show slb virtual all"})
-                  .pipe(take(1))
-                  .subscribe({
-                    next: (result: any) => {
-                      if (result && result?.contents) {
-                        let conf_list = result?.contents.split('\n');
-                        conf_list.forEach((item: any) => {
-                          let _tmp = item.split("\"");
-                          if (_tmp[0] in type_dict) {
-                            ssl_result.push({
-                              service_name: _tmp[1],
-                              protocol: type_dict[_tmp[0]],
-                              device: _device?.name,
-                              id: _device?.id,
-                              device_group: _device?.device_group,
-                              host_name: "",
-                              status: "",
-                            })
-                          }
-                        })
-                      }
-                      let status_result: any = {}
-                      if (this.device_type_info?.ADC_TYPE_LIST.includes(_device.type.toLowerCase())) {
-                        this._device.executeCLICommand(_device?.id, {cmd: "show ssl host"})
-                          .pipe(take(1))
-                          .subscribe({
-                            next: (resp: any) => {
-                              if (resp && resp?.contents) {
-                                let conf_list = resp.contents.split("\n");
-                                conf_list.forEach((item: any) => {
-                                  let _tmp = item.split("\"");
-                                  if (_tmp[0] == "ssl host virtual ") {
-                                    ssl_result.forEach((_item: any) => {
-                                      if (_item.device === _device.name && _item.service_name === _tmp[3]) {
-                                        _item.status = status_result[_tmp[1]] || '';
-                                        _item.host_name = _tmp[1]
-                                      }
-                                    })
-                                  }
-                                })
-                                this._device.executeCLICommand(_device?.id, {cmd: "show ssl status host"})
-                                  .pipe(take(1))
-                                  .subscribe({
-                                    next: (res: any) => {
-                                      if (res && res?.contents) {
-                                        let conf_list1 = res.contents.split("\n");
-                                        conf_list1.forEach((item1: any) => {
-                                          let tmp1: any = item1.split("\"");
-                                          let status_str = "";
-                                          if (tmp1[0] == "virtual host ") {
-                                            if (tmp1[2] == " is inactive") {
-                                              status_str = "Inactive";
-                                            } else {
-                                              status_str = "Active";
-                                            }
-                                            ssl_result.forEach((_item: any) => {
-                                              if (_item?.device === _device?.name && _item?.host_name === tmp1[1]) {
-                                                _item.status = status_str;
-                                              }
-                                            });
-                                          }
-                                        })
-                                      }
-                                    },
-                                    error: (error: any) => {
-                                      this._notification.showError(error?.message);
-                                    }
-                                  });
-                              }
-                              this.dataSource.data = ssl_result
-                              this.dataSource.paginator = this.paginator;
-                              this.totalRecords = this.dataSource.data.length;
-                            },
-                            error: (error: any) => {
-                              this._notification.showError(error?.message);
-                            }
-                          });
-                      }
-                    },
-                    error: (error: any) => {
-                      this._notification.showError(error?.message);
-                    }
-                  });
-              }
+            if (this.device_type_info?.ADC_TYPE_LIST.includes(_device.type.toLowerCase())) {
+              this._device.executeCLICommand(_device?.id, { cmd: "show slb virtual all" })
+                .pipe(take(1))
+                .subscribe({
+                  next: (result: any) => {
+                    if (result && result?.contents) {
+                      let conf_list = result?.contents.split('\n');
+                      conf_list.forEach((item: any) => {
+                        let _tmp = item.split("\"");
+                        if (_tmp[0] in type_dict) {
+                          ssl_result.push({
+                            service_name: _tmp[1],
+                            protocol: type_dict[_tmp[0]],
+                            device: _device?.name,
+                            id: _device?.id,
+                            device_group: _device?.device_group,
+                            host_name: "",
+                            status: "",
+                          })
+                        }
+                      })
+                    }
+                    let status_result: any = {}
+                    if (this.device_type_info?.ADC_TYPE_LIST.includes(_device.type.toLowerCase())) {
+                      this._device.executeCLICommand(_device?.id, { cmd: "show ssl host" })
+                        .pipe(take(1))
+                        .subscribe({
+                          next: (resp: any) => {
+                            if (resp && resp?.contents) {
+                              let conf_list = resp.contents.split("\n");
+                              conf_list.forEach((item: any) => {
+                                let _tmp = item.split("\"");
+                                if (_tmp[0] == "ssl host virtual ") {
+                                  ssl_result.forEach((_item: any) => {
+                                    if (_item.device === _device.name && _item.service_name === _tmp[3]) {
+                                      _item.status = status_result[_tmp[1]] || '';
+                                      _item.host_name = _tmp[1]
+                                    }
+                                  })
+                                }
+                              })
+                              this._device.executeCLICommand(_device?.id, { cmd: "show ssl status host" })
+                                .pipe(take(1))
+                                .subscribe({
+                                  next: (res: any) => {
+                                    if (res && res?.contents) {
+                                      let conf_list1 = res.contents.split("\n");
+                                      conf_list1.forEach((item1: any) => {
+                                        let tmp1: any = item1.split("\"");
+                                        let status_str = "";
+                                        if (tmp1[0] == "virtual host ") {
+                                          if (tmp1[2] == " is inactive") {
+                                            status_str = "Inactive";
+                                          } else {
+                                            status_str = "Active";
+                                          }
+                                          ssl_result.forEach((_item: any) => {
+                                            if (_item?.device === _device?.name && _item?.host_name === tmp1[1]) {
+                                              _item.status = status_str;
+                                            }
+                                          });
+                                        }
+                                      })
+                                    }
+                                  },
+                                  error: (error: any) => {
+                                    this._notification.showError(error?.message);
+                                  }
+                                });
+                            }
+                            this.dataSource.data = ssl_result
+                            this.dataSource.paginator = this.paginator;
+                            this.dataSource.sort = this.sort;
+                            this.totalRecords = this.dataSource.data.length;
+                          },
+                          error: (error: any) => {
+                            this._notification.showError(error?.message);
+                          }
+                        });
+                    }
+                  },
+                  error: (error: any) => {
+                    this._notification.showError(error?.message);
+                  }
+                });
             }
+          }
           )
         }
         ,
@@ -161,6 +164,15 @@
       })
   }
 
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
   editSSL(_vs: any) {
     this.dialogConfig.data = {
       service: _vs
@@ -175,8 +187,8 @@
   }
 
   checkCertificateExpiry() {
-    this.dialogConfig.width = '40%';
-    this.dialogConfig.height = '60%';
+    this.dialogConfig.width = '60%';
+    this.dialogConfig.height = 'auto';
     const dialogRef = this.dialog.open(APVVSSSLInfoDialog, this.dialogConfig);
     dialogRef.afterClosed().subscribe(result => {
     })
@@ -212,10 +224,10 @@
 
   ngOnInit(): void {
     this.configForm = this._fB.group({
-      deviceName: [{value: '', disabled: true}, Validators.required],
-      serviceName: [{value: '', disabled: true}, Validators.required],
-      type: [{value: '', disabled: true}, Validators.required],
-      hostName: [{value: '', disabled: true}, Validators.required],
+      deviceName: [{ value: '', disabled: true }, Validators.required],
+      serviceName: [{ value: '', disabled: true }, Validators.required],
+      type: [{ value: '', disabled: true }, Validators.required],
+      hostName: [{ value: '', disabled: true }, Validators.required],
       enableSSL: [false, Validators.required],
     });
     this.configForm.patchValue({
@@ -238,13 +250,13 @@
     }
     this._device.updateSSLVHost(this.data?.service?.device, this.data?.service?.host_name, _payload)
       .pipe(take(1)).subscribe({
-      next: (resp: any) => {
-        this.dialogRef.close(true);
-      },
-      error: (error: any) => {
-        this._notification.showError(error?.message);
-      }
-    })
+        next: (resp: any) => {
+          this.dialogRef.close(true);
+        },
+        error: (error: any) => {
+          this._notification.showError(error?.message);
+        }
+      })
   }
 
   onCancel(): void {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/tab-container/tab-container.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/tab-container/tab-container.html	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/tab-container/tab-container.html	(working copy)
@@ -1,16 +1,21 @@
 <div class="tab-container">
-  <mat-tab-group
-    animationDuration="0ms"
-    [selectedIndex]="selectedTabIndex"
-    (selectedTabChange)="onTabChange($event)">
+  <mat-tab-group animationDuration="0ms" [selectedIndex]="selectedTabIndex" (selectedTabChange)="onTabChange($event)">
     @for (tab of tabDefinitions; track tab.label) {
-      <mat-tab [label]="tab.label">
-        <ng-template matTabContent>
-          <div class="tab-content">
-            <ng-container *ngComponentOutlet="tab.component"></ng-container>
-          </div>
-        </ng-template>
-      </mat-tab>
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <div class="custom-tab-label">
+          @if (tab.icon) {
+          <fa-icon [icon]="tab.icon" class="tab-icon"></fa-icon>
+          }
+          <span class="tab-text">{{ tab.label }}</span>
+        </div>
+      </ng-template>
+      <ng-template matTabContent>
+        <div class="tab-content">
+          <ng-container *ngComponentOutlet="tab.component"></ng-container>
+        </div>
+      </ng-template>
+    </mat-tab>
     }
   </mat-tab-group>
-</div>
+</div>
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/tab-container/tab-container.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/tab-container/tab-container.scss	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/tab-container/tab-container.scss	(working copy)
@@ -11,6 +11,22 @@
     mat-tab-group {
         flex: 1;
         overflow: hidden;
+
+        ::ng-deep .mat-mdc-tab-header {
+            border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+        }
+
+        ::ng-deep .mat-mdc-tab {
+            min-width: auto !important;
+            padding: 0 24px !important;
+            height: 48px !important;
+            flex-grow: 0 !important;
+            opacity: 1 !important;
+
+            &:hover {
+                background-color: rgba(0, 0, 0, 0.04);
+            }
+        }
     }
 
     ::ng-deep .mat-mdc-tab-body-wrapper {
@@ -31,4 +47,31 @@
         flex-direction: column;
         overflow: hidden;
     }
+
+    // Custom Tab Label Styles
+    .custom-tab-label {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        .tab-icon {
+            font-size: 14px;
+            color: #666;
+        }
+
+        .tab-text {
+            font-weight: 500;
+            font-size: 14px;
+            color: #666;
+        }
+    }
+
+    // Active State Styling (matching General Settings)
+    ::ng-deep .mat-mdc-tab.mdc-tab--active {
+
+        .tab-icon,
+        .tab-text {
+            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/common/tab-container/tab-container.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/tab-container/tab-container.ts	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/tab-container/tab-container.ts	(working copy)
@@ -1,12 +1,13 @@
-import {Component, OnInit, Input, Type} from '@angular/core';
-import {SharedModule} from '../../../shared/shared-module';
-import {MatTabChangeEvent} from '@angular/material/tabs';
-import {ActivatedRoute, Router} from '@angular/router';
+import { Component, OnInit, Input, Type } from '@angular/core';
+import { SharedModule } from '../../../shared/shared-module';
+import { MatTabChangeEvent } from '@angular/material/tabs';
+import { ActivatedRoute, Router } from '@angular/router';
 
 export interface TabDefinition {
   label: string;
   component: Type<any>;
   paramName?: string;
+  icon?: any;
 }
 
 @Component({
@@ -49,7 +50,7 @@
     if (tabName) {
       this._router.navigate([], {
         relativeTo: this._route,
-        queryParams: {[this.paramKey]: tabName},
+        queryParams: { [this.paramKey]: tabName },
         queryParamsHandling: 'merge'
       });
     }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/device-ha/device-ha.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/device-ha/device-ha.html	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/device-ha/device-ha.html	(working copy)
@@ -1,80 +1,97 @@
-<div class="table-container">
-  <table mat-table [dataSource]="dataSource" class="mat-elevation-z1">
-    <ng-container matColumnDef="serial">
-      <th mat-header-cell *matHeaderCellDef> No.</th>
-      <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial:paginator }}</td>
-    </ng-container>
-    <ng-container matColumnDef="deviceName">
-      <th mat-header-cell *matHeaderCellDef> Device Name</th>
-      <td mat-cell *matCellDef="let element"><a class="details-page-link" (click)="goToDetails(element)">{{ element?.device_name }}</a></td>
-    </ng-container>
-    <ng-container matColumnDef="status">
-      <th mat-header-cell *matHeaderCellDef> HA Status</th>
-      <td mat-cell *matCellDef="let element">
-        @if (element?.enable) {
-          <fa-icon [icon]="['far', 'check-circle']" class="success-icon"></fa-icon>
-        } @else {
-          <fa-icon [icon]="['far', 'xmark-circle']" class="delete-icon"></fa-icon>
-        }
-      </td>
-    </ng-container>
-    <ng-container matColumnDef="interval">
-      <th mat-header-cell *matHeaderCellDef> ARP Interval</th>
-      <td mat-cell *matCellDef="let element">{{ element?.arp }}</td>
-    </ng-container>
-    <ng-container matColumnDef="syncConfig">
-      <th mat-header-cell *matHeaderCellDef> Runtime Sync Config</th>
-      <td mat-cell *matCellDef="let element">
-        @if (element?.sync_runtime) {
-          <fa-icon [icon]="['far', 'check-circle']" class="success-icon"></fa-icon>
-        } @else {
-          <fa-icon [icon]="['far', 'xmark-circle']" class="delete-icon"></fa-icon>
-        }
-      </td>
-    </ng-container>
-    <ng-container matColumnDef="logging">
-      <th mat-header-cell *matHeaderCellDef> HA Logging</th>
-      <td mat-cell *matCellDef="let element">
-        @if (element?.log_enable) {
-          <fa-icon [icon]="['far', 'check-circle']" class="success-icon"></fa-icon>
-        } @else {
-          <fa-icon [icon]="['far', 'xmark-circle']" class="delete-icon"></fa-icon>
-        }
-      </td>
-    </ng-container>
-    <ng-container matColumnDef="logLevel">
-      <th mat-header-cell *matHeaderCellDef> HA Log Level</th>
-      <td mat-cell *matCellDef="let element">{{ element?.log_level }}</td>
-    </ng-container>
-    <ng-container matColumnDef="floatingMac">
-      <th mat-header-cell *matHeaderCellDef> HA Floating MAC</th>
-      <td mat-cell *matCellDef="let element">
-        @if (element?.floatmac_enable) {
-          <fa-icon [icon]="['far', 'check-circle']" class="success-icon"></fa-icon>
-        } @else {
-          <fa-icon [icon]="['far', 'xmark-circle']" class="delete-icon"></fa-icon>
-        }
-      </td>
-    </ng-container>
-    <ng-container matColumnDef="ffoLink">
-      <th mat-header-cell *matHeaderCellDef> HA FFO Link</th>
-      <td mat-cell *matCellDef="let element">
-        @if (element?.link_ffo) {
-          <fa-icon [icon]="['far', 'check-circle']" class="success-icon"></fa-icon>
-        } @else {
-          <fa-icon [icon]="['far', 'xmark-circle']" class="delete-icon"></fa-icon>
-        }
-      </td>
-    </ng-container>
-    <tr mat-header-row *matHeaderRowDef="tableColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
-    <tr class="mat-row table-no-data" *matNoDataRow>
-      <td class="mat-cell" colspan="10">No results found.</td>
-    </tr>
-  </table>
-  <mat-paginator
-    [pageSizeOptions]="[10, 15, 20, 25]"
-    [length]="totalRecords"
-    showFirstLastButtons
-  ></mat-paginator>
-</div>
+<div class="ha-container">
+
+  <div class="table-toolbar">
+    <!-- Filter -->
+    <mat-form-field appearance="outline" class="filter-field">
+      <mat-label>Filter HA Devices</mat-label>
+      <input matInput (keyup)="applyFilter($event)" placeholder="Search..." #input>
+      <fa-icon [icon]="['fas', 'search']" matSuffix class="search-icon"></fa-icon>
+    </mat-form-field>
+  </div>
+
+  <div class="table-container">
+    <div class="table-scroll-area">
+      <table mat-table [dataSource]="dataSource" matSort class="modern-table">
+        <ng-container matColumnDef="serial">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> No.</th>
+          <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial:paginator }}</td>
+        </ng-container>
+        <ng-container matColumnDef="deviceName">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Device Name</th>
+          <td mat-cell *matCellDef="let element"><a class="details-page-link" (click)="goToDetails(element)">{{
+              element?.device_name }}</a></td>
+        </ng-container>
+        <ng-container matColumnDef="status">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> HA Status</th>
+          <td mat-cell *matCellDef="let element">
+            @if (element?.enable) {
+            <fa-icon [icon]="['far', 'check-circle']" class="success-icon"></fa-icon>
+            } @else {
+            <fa-icon [icon]="['far', 'xmark-circle']" class="delete-icon"></fa-icon>
+            }
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="interval">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> ARP Interval</th>
+          <td mat-cell *matCellDef="let element">{{ element?.arp }}</td>
+        </ng-container>
+        <ng-container matColumnDef="syncConfig">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Runtime Sync Config</th>
+          <td mat-cell *matCellDef="let element">
+            @if (element?.sync_runtime) {
+            <fa-icon [icon]="['far', 'check-circle']" class="success-icon"></fa-icon>
+            } @else {
+            <fa-icon [icon]="['far', 'xmark-circle']" class="delete-icon"></fa-icon>
+            }
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="logging">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> HA Logging</th>
+          <td mat-cell *matCellDef="let element">
+            @if (element?.log_enable) {
+            <fa-icon [icon]="['far', 'check-circle']" class="success-icon"></fa-icon>
+            } @else {
+            <fa-icon [icon]="['far', 'xmark-circle']" class="delete-icon"></fa-icon>
+            }
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="logLevel">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> HA Log Level</th>
+          <td mat-cell *matCellDef="let element">{{ element?.log_level }}</td>
+        </ng-container>
+        <ng-container matColumnDef="floatingMac">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> HA Floating MAC</th>
+          <td mat-cell *matCellDef="let element">
+            @if (element?.floatmac_enable) {
+            <fa-icon [icon]="['far', 'check-circle']" class="success-icon"></fa-icon>
+            } @else {
+            <fa-icon [icon]="['far', 'xmark-circle']" class="delete-icon"></fa-icon>
+            }
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="ffoLink">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> HA FFO Link</th>
+          <td mat-cell *matCellDef="let element">
+            @if (element?.link_ffo) {
+            <fa-icon [icon]="['far', 'check-circle']" class="success-icon"></fa-icon>
+            } @else {
+            <fa-icon [icon]="['far', 'xmark-circle']" class="delete-icon"></fa-icon>
+            }
+          </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="tableColumns; sticky: true"></tr>
+        <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
+        <tr class="mat-row table-no-data" *matNoDataRow>
+          <td class="mat-cell no-data-cell" colspan="10">
+            @if (input.value) {
+            No results found for "{{input.value}}"
+            } @else {
+            No results found.
+            }
+          </td>
+        </tr>
+      </table>
+    </div>
+    <mat-paginator [pageSizeOptions]="[10, 15, 20, 25]" [length]="totalRecords" 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/device-ha/device-ha.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/device-ha/device-ha.scss	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/device-ha/device-ha.scss	(working copy)
@@ -0,0 +1,139 @@
+// Copied from topology-slb-virtual-service.scss for consistency
+
+:host {
+    display: block;
+    height: 100%;
+}
+
+.ha-container {
+    padding: 12px;
+    background-color: #fafafa;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    // Header Toolbar (Filter)
+    .table-toolbar {
+        display: flex;
+        justify-content: flex-end; // Align filter to right
+        align-items: center;
+        margin-bottom: 0;
+        gap: 16px;
+
+        .filter-field {
+            width: 100%;
+            max-width: 400px;
+            margin-bottom: 0;
+
+            ::ng-deep .mat-mdc-text-field-wrapper {
+                background-color: white;
+                border-radius: 8px;
+                height: 40px !important;
+                padding: 0 12px !important;
+            }
+
+            ::ng-deep .mat-mdc-form-field-infix {
+                padding: 8px 0 !important;
+                min-height: 40px !important;
+            }
+
+            ::ng-deep .mat-mdc-input-element {
+                margin-top: 0;
+            }
+
+            ::ng-deep .mat-mdc-floating-label {
+                top: 16px !important;
+            }
+
+            .search-icon {
+                color: #757575;
+                font-size: 16px;
+                margin-right: 8px;
+            }
+        }
+    }
+
+    // Table Container
+    .table-container {
+        border-radius: 8px;
+        overflow: hidden;
+        border: 1px solid #e0e0e0;
+        background: white;
+        flex: 0 1 auto; // Shrink to fit content
+        display: flex;
+        flex-direction: column;
+        max-height: 100%; // Don't overflow parent
+
+        .table-scroll-area {
+            flex: 0 1 auto; // Allow shrink and auto height, don't force fill
+            overflow: auto;
+            width: 100%;
+            position: relative; // Establish context for sticky headers
+        }
+
+        .modern-table {
+            width: 100%;
+            border-collapse: collapse;
+
+            th.mat-mdc-header-cell {
+                background-color: #f5f5f5;
+                color: #424242;
+                font-weight: 600;
+                font-size: 13px;
+                padding: 0 16px;
+                border-bottom: 1px solid #e0e0e0;
+                z-index: 10;
+            }
+
+            td.mat-mdc-cell {
+                padding: 12px 16px;
+                font-size: 13px;
+                color: #333;
+                border-bottom: 1px solid #f0f0f0;
+
+                &.no-data-cell {
+                    text-align: center;
+                    padding: 48px;
+                    color: #757575;
+                    background-color: white;
+                }
+            }
+
+            tr.mat-mdc-row:hover {
+                background-color: #f9f9f9;
+            }
+
+            // Links
+            .details-page-link {
+                color: #1976d2;
+                cursor: pointer;
+                text-decoration: none;
+                font-weight: 500;
+
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+
+            .success-icon {
+                color: #2e7d32;
+                font-size: 16px;
+            }
+
+            .delete-icon {
+                color: #c62828; // Used for "x" icons here
+                font-size: 16px;
+            }
+        }
+    }
+
+    mat-paginator {
+        background: transparent;
+        border-top: 1px solid #e0e0e0;
+        flex-shrink: 0;
+    }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/device-ha/device-ha.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/device-ha/device-ha.ts	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/device-ha/device-ha.ts	(working copy)
@@ -1,13 +1,14 @@
-import {ChangeDetectorRef, Component, inject, ViewChild} from '@angular/core';
-import {GlobalSerialPipe} from '../../pipes/global-serial-pipe';
-import {SharedModule} from '../../shared/shared-module';
-import {MatTableDataSource} from '@angular/material/table';
-import {MatPaginator} from '@angular/material/paginator';
-import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
-import {DeviceService} from '../../services/device-service';
-import {NotificationService} from '../../services/notification';
-import {Router} from '@angular/router';
-import {take} from 'rxjs/operators';
+import { AfterViewInit, ChangeDetectorRef, Component, inject, ViewChild } from '@angular/core';
+import { MatSort } from '@angular/material/sort';
+import { GlobalSerialPipe } from '../../pipes/global-serial-pipe';
+import { SharedModule } from '../../shared/shared-module';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
+import { DeviceService } from '../../services/device-service';
+import { NotificationService } from '../../services/notification';
+import { Router } from '@angular/router';
+import { take } from 'rxjs/operators';
 
 @Component({
   selector: 'app-device-ha',
@@ -18,12 +19,13 @@
   templateUrl: './device-ha.html',
   styleUrl: './device-ha.scss'
 })
-export class DeviceHa {
+export class DeviceHa implements AfterViewInit {
 
   totalRecords: number = 0;
   tableColumns: string[] = ['serial', 'deviceName', 'status', 'interval', 'syncConfig', 'logging', 'logLevel', 'floatingMac', 'ffoLink'];
   dataSource: MatTableDataSource<any> = new MatTableDataSource();
   @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
   dialog = inject(MatDialog);
   dialogConfig = new MatDialogConfig();
 
@@ -36,6 +38,20 @@
     this.getDeviceHAList();
   }
 
+  ngAfterViewInit() {
+    this.dataSource.sort = this.sort;
+    this.dataSource.paginator = this.paginator;
+  }
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
   getDeviceHAList() {
     this.dataSource.data = [];
     this._device.getDeviceHAList()
@@ -46,6 +62,7 @@
             this.dataSource.data = resp.device_ha;
             this.totalRecords = this.dataSource.data.length;
             this.dataSource.paginator = this.paginator;
+            this.dataSource.sort = this.sort;
           }
           this._cdRef.detectChanges();
         },
@@ -57,7 +74,7 @@
   }
 
   goToDetails(device: any) {
-    this._router.navigate(['/device/ha/details', device?.device_name], {
+    this._router.navigate(['/device/apv/ha/details', device?.device_name], {
       state: {}
     });
   }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-certificate-backup-restore/apv-ssl-certificate-backup-restore.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-certificate-backup-restore/apv-ssl-certificate-backup-restore.html	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-certificate-backup-restore/apv-ssl-certificate-backup-restore.html	(working copy)
@@ -1,46 +1,66 @@
-<mat-card class="page-card-1" appearance="filled">
-  <mat-card-header>
-    <div>
-      <button mat-raised-button (click)="addBackupSSLCertificate()">Add</button>
+<div class="apv-ssl-container">
+
+  <!-- Toolbar (Button + Filter) -->
+  <div class="table-toolbar">
+    <!-- Filter -->
+    <mat-form-field appearance="outline" class="filter-field">
+      <mat-label>Filter Backup Certificates</mat-label>
+      <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Filename" #input>
+      <fa-icon [icon]="['fas', 'search']" matSuffix class="search-icon"></fa-icon>
+    </mat-form-field>
+
+    <!-- Action Button -->
+    <button mat-flat-button color="primary" (click)="addBackupSSLCertificate()">
+      <fa-icon [icon]="['fas', 'plus']"></fa-icon> Add Backup
+    </button>
+  </div>
+
+  <div class="table-container">
+    <div class="table-scroll-area">
+      <table mat-table [dataSource]="dataSource" matSort class="modern-table">
+        <ng-container matColumnDef="serial">
+          <th mat-header-cell *matHeaderCellDef> No.</th>
+          <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial:paginator }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="domain">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Domain Name</th>
+          <td mat-cell *matCellDef="let element">{{ element?.domain_name }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="filename">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Filename</th>
+          <td mat-cell *matCellDef="let element">{{ element?.filename }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="action">
+          <th mat-header-cell *matHeaderCellDef> Action</th>
+          <td mat-cell *matCellDef="let element">
+            <div class="row-action a-link">
+              <fa-icon [icon]="['fas', 'gears']" size="lg" matTooltip="Restore Certificate"
+                (click)="restoreBackupSSLCertificate(element)" style="margin-right: 8px; color: #1976d2"></fa-icon>
+              <fa-icon [icon]="['far', 'circle-down']" size="lg" matTooltip="Download Certificate"
+                (click)="downloadBackupSSLCertificate(element)" style="margin-right: 8px; color: #1976d2"></fa-icon>
+              <fa-icon [icon]="['far', 'trash-can']" size="lg" class="delete-icon" matTooltip="Delete Certificate"
+                (click)="deleteBackupSSLCertificate(element)"></fa-icon>
+            </div>
+          </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="tableColumns; sticky: true"></tr>
+        <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
+
+        <tr class="mat-row table-no-data" *matNoDataRow>
+          <td class="mat-cell no-data-cell" colspan="10">
+            @if (input.value) {
+            No results found for "{{input.value}}"
+            } @else {
+            No results found.
+            }
+          </td>
+        </tr>
+      </table>
     </div>
-  </mat-card-header>
-</mat-card>
-<div class="table-container">
-  <table mat-table [dataSource]="dataSource" class="mat-elevation-z1">
-    <ng-container matColumnDef="serial">
-      <th mat-header-cell *matHeaderCellDef> No.</th>
-      <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial:paginator }}</td>
-    </ng-container>
-    <ng-container matColumnDef="domain">
-      <th mat-header-cell *matHeaderCellDef> Domain Name</th>
-      <td mat-cell *matCellDef="let element">{{ element?.domain_name }}</td>
-    </ng-container>
-    <ng-container matColumnDef="filename">
-      <th mat-header-cell *matHeaderCellDef> Filename</th>
-      <td mat-cell *matCellDef="let element">{{ element?.filename }}</td>
-    </ng-container>
-    <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> Action</th>
-      <td mat-cell *matCellDef="let element">
-        <div class="row-action a-link">
-          <fa-icon [icon]="['fas', 'gears']" size="lg" matTooltip="Restore Certificate"
-                   (click)="restoreBackupSSLCertificate(element)"></fa-icon>
-          <fa-icon [icon]="['far', 'circle-down']" size="lg" matTooltip="Download Certificate"
-                   (click)="downloadBackupSSLCertificate(element)"></fa-icon>
-          <fa-icon [icon]="['far', 'trash-can']" size="lg" class="delete-icon" matTooltip="Delete Certificate"
-                   (click)="deleteBackupSSLCertificate(element)"></fa-icon>
-        </div>
-      </td>
-    </ng-container>
-    <tr mat-header-row *matHeaderRowDef="tableColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
-    <tr class="mat-row table-no-data" *matNoDataRow>
-      <td class="mat-cell" colspan="10">No results found.</td>
-    </tr>
-  </table>
-  <mat-paginator
-    [pageSizeOptions]="[10, 15, 20, 25]"
-    [length]="totalRecords"
-    showFirstLastButtons
-  ></mat-paginator>
-</div>
+    <mat-paginator [pageSizeOptions]="[10, 15, 20, 25]" 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/apv-ssl-certificate-backup-restore/apv-ssl-certificate-backup-restore.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-certificate-backup-restore/apv-ssl-certificate-backup-restore.scss	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-certificate-backup-restore/apv-ssl-certificate-backup-restore.scss	(working copy)
@@ -0,0 +1,128 @@
+// Copied from topology-slb-virtual-service.scss for consistency
+
+:host {
+    display: block;
+    height: 100%;
+}
+
+.apv-ssl-container {
+    padding: 12px;
+    background-color: #fafafa;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    // Header Toolbar (Button + Filter)
+    .table-toolbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 12px;
+        gap: 16px;
+
+        .section-header {
+            font-size: 16px;
+            font-weight: 500;
+            color: #424242;
+        }
+
+        .filter-field {
+            width: 100%;
+            max-width: 300px;
+            margin-bottom: 0;
+
+            ::ng-deep .mat-mdc-text-field-wrapper {
+                background-color: white;
+                border-radius: 8px;
+                height: 40px !important;
+                padding: 0 12px !important;
+            }
+
+            ::ng-deep .mat-mdc-form-field-infix {
+                padding: 8px 0 !important;
+                min-height: 40px !important;
+            }
+
+            ::ng-deep .mat-mdc-input-element {
+                margin-top: 0;
+            }
+
+            ::ng-deep .mat-mdc-floating-label {
+                top: 16px !important;
+            }
+
+            .search-icon {
+                color: #757575;
+                font-size: 14px;
+                margin-right: 8px;
+            }
+        }
+    }
+
+    // Table Container
+    .table-container {
+        border-radius: 8px;
+        overflow: hidden;
+        border: 1px solid #e0e0e0;
+        background: white;
+        flex: 0 1 auto;
+        display: flex;
+        flex-direction: column;
+        max-height: 100%;
+
+        .table-scroll-area {
+            flex: 0 1 auto;
+            overflow: auto;
+            width: 100%;
+            position: relative;
+        }
+
+        .modern-table {
+            width: 100%;
+            border-collapse: collapse;
+
+            th.mat-mdc-header-cell {
+                background-color: #f5f5f5;
+                color: #424242;
+                font-weight: 600;
+                font-size: 13px;
+                padding: 0 16px;
+                border-bottom: 1px solid #e0e0e0;
+                z-index: 10;
+            }
+
+            td.mat-mdc-cell {
+                padding: 12px 16px;
+                font-size: 13px;
+                color: #333;
+                border-bottom: 1px solid #f0f0f0;
+
+                &.no-data-cell {
+                    text-align: center;
+                    padding: 48px;
+                    color: #757575;
+                    background-color: white;
+                }
+            }
+
+            tr.mat-mdc-row:hover {
+                background-color: #f9f9f9;
+            }
+
+            .row-action {
+                cursor: pointer;
+                color: #c62828;
+            }
+        }
+    }
+
+    mat-paginator {
+        background: transparent;
+        border-top: 1px solid #e0e0e0;
+        flex-shrink: 0;
+    }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-certificate-backup-restore/apv-ssl-certificate-backup-restore.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-certificate-backup-restore/apv-ssl-certificate-backup-restore.ts	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-certificate-backup-restore/apv-ssl-certificate-backup-restore.ts	(working copy)
@@ -1,16 +1,17 @@
-import {ChangeDetectorRef, Component, inject, OnInit, ViewChild} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
-import {MatPaginator} from '@angular/material/paginator';
-import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog';
-import {DeviceService} from '../../../services/device-service';
-import {ActivatedRoute} from '@angular/router';
-import {NotificationService} from '../../../services/notification';
-import {take} from 'rxjs/operators';
-import {GlobalSerialPipe} from '../../../pipes/global-serial-pipe';
-import {SharedModule} from '../../../shared/shared-module';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {CustomValidators} from '../../../utils/custom-validators';
-import {Confirmation} from '../../../services/confirmation';
+import { ChangeDetectorRef, Component, inject, OnInit, ViewChild } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
+import { DeviceService } from '../../../services/device-service';
+import { ActivatedRoute } from '@angular/router';
+import { NotificationService } from '../../../services/notification';
+import { take } from 'rxjs/operators';
+import { GlobalSerialPipe } from '../../../pipes/global-serial-pipe';
+import { SharedModule } from '../../../shared/shared-module';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { CustomValidators } from '../../../utils/custom-validators';
+import { Confirmation } from '../../../services/confirmation';
+import { MatSort } from '@angular/material/sort';
 
 @Component({
   selector: 'app-apv-ssl-certificate-backup-restore',
@@ -30,6 +31,7 @@
   tableColumns: string[] = ['serial', 'domain', 'filename', 'action'];
   dataSource: MatTableDataSource<any> = new MatTableDataSource();
   @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
   dialog = inject(MatDialog);
   dialogConfig = new MatDialogConfig();
 
@@ -51,6 +53,14 @@
       this.getSSLBackupCertificates();
       this.getSSLVHostSNI();
     })
+  }
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
   }
 
   getSSLBackupCertificates() {
@@ -63,6 +73,7 @@
             this.dataSource.data = resp.SSLVirtualHost.backup_certs;
             this.totalRecords = this.dataSource.data.length;
             this.dataSource.paginator = this.paginator;
+            this.dataSource.sort = this.sort;
           }
           this._cdRef.detectChanges();
         },
@@ -137,7 +148,7 @@
                 .pipe(take(1))
                 .subscribe({
                   next: (res: Blob) => {
-                    let blob = new Blob([res], {type: "application/octet-stream"});
+                    let blob = new Blob([res], { type: "application/octet-stream" });
                     let link = document.createElement("a");
                     link.href = window.URL.createObjectURL(blob);
                     link.download = originalFilename;
@@ -224,7 +235,7 @@
       domain_name: [''],
       password: ['', Validators.required],
       confirm_password: ['', [Validators.required]],
-    }, {validators: [CustomValidators.passwordMatchValidator()]})
+    }, { validators: [CustomValidators.passwordMatchValidator()] })
     this.domains = this.data?.domains;
   }
 
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-certificates/apv-ssl-certificates.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-certificates/apv-ssl-certificates.html	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-certificates/apv-ssl-certificates.html	(working copy)
@@ -1,75 +1,104 @@
-<mat-card class="page-card-1" appearance="filled">
-  <mat-card-header>
-    <div>
-      <button mat-raised-button (click)="addSSLCertificate()">Add</button>
+<div class="apv-ssl-container">
+
+  <!-- Toolbar (Button + Filter) -->
+  <div class="table-toolbar">
+    <!-- Filter -->
+    <mat-form-field appearance="outline" class="filter-field">
+      <mat-label>Filter Certificates</mat-label>
+      <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Domain, Type" #input>
+      <fa-icon [icon]="['fas', 'search']" matSuffix class="search-icon"></fa-icon>
+    </mat-form-field>
+
+    <!-- Action Button -->
+    <button mat-flat-button color="primary" (click)="addSSLCertificate()">
+      <fa-icon [icon]="['fas', 'plus']"></fa-icon> Add Certificate
+    </button>
+  </div>
+
+  <div class="table-container">
+    <div class="table-scroll-area">
+      <table mat-table [dataSource]="dataSource" matSort class="modern-table">
+        <ng-container matColumnDef="serial">
+          <th mat-header-cell *matHeaderCellDef> No.</th>
+          <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial:paginator }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="domain">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Domain Name</th>
+          <td mat-cell *matCellDef="let element">{{ element?.domain_name }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="index">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Index</th>
+          <td mat-cell *matCellDef="let element">{{ element?.index }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="type">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Type</th>
+          <td mat-cell *matCellDef="let element">
+            <div class="protocol-chip">{{ element?.type }}</div>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="status">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Status</th>
+          <td mat-cell *matCellDef="let element">{{ element?.status }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="astate">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Activated State</th>
+          <td mat-cell *matCellDef="let element">
+            @if (element?.activated_state) {
+            <fa-icon [icon]="['far', 'check-circle']" class="success-icon"></fa-icon>
+            } @else {
+            <fa-icon [icon]="['far', 'xmark-circle']" class="delete-icon"></fa-icon>
+            }
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="subject">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Subject</th>
+          <td mat-cell *matCellDef="let element">
+            <div class="wrap-cell">{{ element?.subject }}</div>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="etime">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Expiry Time</th>
+          <td mat-cell *matCellDef="let element">{{ element?.validity_not_after }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="action">
+          <th mat-header-cell *matHeaderCellDef> Action</th>
+          <td mat-cell *matCellDef="let element">
+            <div class="row-action a-link">
+              @if (element?.activated_state) {
+              <fa-icon [icon]="['far', 'circle-stop']" size="lg" matTooltip="Deactivate Certificate"
+                (click)="deactivateSSLCertificate(element)"></fa-icon>
+              } @else {
+              <fa-icon [icon]="['far', 'play-circle']" size="lg" matTooltip="Activate Certificate"
+                (click)="activateSSLCertificate(element)"></fa-icon>
+              }
+              <fa-icon [icon]="['far', 'trash-can']" size="lg" class="delete-icon" matTooltip="Delete"
+                (click)="deleteSSLCertificate(element)"></fa-icon>
+            </div>
+          </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="tableColumns; sticky: true"></tr>
+        <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
+
+        <tr class="mat-row table-no-data" *matNoDataRow>
+          <td class="mat-cell no-data-cell" colspan="10">
+            @if (input.value) {
+            No results found for "{{input.value}}"
+            } @else {
+            No results found.
+            }
+          </td>
+        </tr>
+      </table>
     </div>
-  </mat-card-header>
-</mat-card>
-<div class="table-container">
-  <table mat-table [dataSource]="dataSource" class="mat-elevation-z1">
-    <ng-container matColumnDef="serial">
-      <th mat-header-cell *matHeaderCellDef> No.</th>
-      <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial:paginator }}</td>
-    </ng-container>
-    <ng-container matColumnDef="domain">
-      <th mat-header-cell *matHeaderCellDef> Domain Name</th>
-      <td mat-cell *matCellDef="let element">{{ element?.domain_name }}</td>
-    </ng-container>
-    <ng-container matColumnDef="index">
-      <th mat-header-cell *matHeaderCellDef> Index</th>
-      <td mat-cell *matCellDef="let element">{{ element?.index }}</td>
-    </ng-container>
-    <ng-container matColumnDef="type">
-      <th mat-header-cell *matHeaderCellDef> Type</th>
-      <td mat-cell *matCellDef="let element">{{ element?.type }}</td>
-    </ng-container>
-    <ng-container matColumnDef="status">
-      <th mat-header-cell *matHeaderCellDef> Status</th>
-      <td mat-cell *matCellDef="let element">{{ element?.status }}</td>
-    </ng-container>
-    <ng-container matColumnDef="astate">
-      <th mat-header-cell *matHeaderCellDef> Activated State</th>
-      <td mat-cell *matCellDef="let element">
-        @if (element?.activated_state) {
-          <fa-icon [icon]="['far', 'check-circle']" class="success-icon"></fa-icon>
-        } @else {
-          <fa-icon [icon]="['far', 'xmark-circle']" class="delete-icon"></fa-icon>
-        }
-      </td>
-    </ng-container>
-    <ng-container matColumnDef="subject">
-      <th mat-header-cell *matHeaderCellDef> Subject</th>
-      <td mat-cell *matCellDef="let element">{{ element?.subject }}</td>
-    </ng-container>
-    <ng-container matColumnDef="etime">
-      <th mat-header-cell *matHeaderCellDef> Expiry Time</th>
-      <td mat-cell *matCellDef="let element">{{ element?.validity_not_after }}</td>
-    </ng-container>
-    <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> Action</th>
-      <td mat-cell *matCellDef="let element">
-        <div class="row-action a-link">
-          @if (element?.activated_state) {
-            <fa-icon [icon]="['far', 'stop-circle']" size="lg" matTooltip="Deactivate Certificate"
-                     (click)="deactivateSSLCertificate(element)"></fa-icon>
-          } @else {
-            <fa-icon [icon]="['far', 'play-circle']" size="lg" matTooltip="Activate Certificate"
-                     (click)="activateSSLCertificate(element)"></fa-icon>
-          }
-          <fa-icon [icon]="['far', 'trash-can']" size="lg" class="delete-icon" matTooltip="Delete"
-                   (click)="deleteSSLCertificate(element)"></fa-icon>
-        </div>
-      </td>
-    </ng-container>
-    <tr mat-header-row *matHeaderRowDef="tableColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
-    <tr class="mat-row table-no-data" *matNoDataRow>
-      <td class="mat-cell" colspan="10">No results found.</td>
-    </tr>
-  </table>
-  <mat-paginator
-    [pageSizeOptions]="[10, 15, 20, 25]"
-    [length]="totalRecords"
-    showFirstLastButtons
-  ></mat-paginator>
-</div>
+    <mat-paginator [pageSizeOptions]="[10, 15, 20, 25]" 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/apv-ssl-certificates/apv-ssl-certificates.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-certificates/apv-ssl-certificates.scss	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-certificates/apv-ssl-certificates.scss	(working copy)
@@ -0,0 +1,171 @@
+// Copied from topology-slb-virtual-service.scss for consistency
+
+:host {
+    display: block;
+    height: 100%;
+}
+
+.apv-ssl-container {
+    padding: 12px;
+    background-color: #fafafa;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    display: flex;
+    flex-direction: column;
+
+    // Header Toolbar (Button + Filter)
+    .table-toolbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20px;
+        gap: 16px;
+
+        .filter-field {
+            width: 100%;
+            max-width: 400px;
+            margin-bottom: 0; // Reset for flex alignment
+
+            ::ng-deep .mat-mdc-text-field-wrapper {
+                background-color: white;
+                border-radius: 8px;
+                height: 40px !important;
+                padding: 0 12px !important;
+            }
+
+            ::ng-deep .mat-mdc-form-field-infix {
+                padding: 8px 0 !important;
+                min-height: 40px !important;
+            }
+
+            ::ng-deep .mat-mdc-input-element {
+                margin-top: 0;
+            }
+
+            ::ng-deep .mat-mdc-floating-label {
+                top: 16px !important;
+            }
+
+            .search-icon {
+                color: #757575;
+                font-size: 16px;
+                margin-right: 8px;
+            }
+        }
+    }
+
+    // Alert Box
+    .info-alert {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px 16px;
+        background-color: #e3f2fd;
+        border: 1px solid #bbdefb;
+        border-radius: 8px;
+        color: #0d47a1;
+        margin-bottom: 20px;
+        font-size: 13px;
+        line-height: 1.5;
+
+        fa-icon {
+            font-size: 16px;
+        }
+    }
+
+    // Table Container
+    .table-container {
+        border-radius: 8px;
+        overflow: hidden;
+        border: 1px solid #e0e0e0;
+        background: white;
+        flex: 0 1 auto; // Shrink to fit content
+        display: flex;
+        flex-direction: column;
+        max-height: 100%; // Don't overflow parent
+
+        .table-scroll-area {
+            flex: 0 1 auto; // Allow shrink and auto height, don't force fill
+            overflow: auto;
+            width: 100%;
+            position: relative; // Establish context for sticky
+        }
+
+        .modern-table {
+            width: 100%;
+            border-collapse: collapse; // Ensure standard table behavior
+
+            th.mat-mdc-header-cell {
+                background-color: #f5f5f5;
+                color: #424242;
+                font-weight: 600;
+                font-size: 13px;
+                padding: 0 16px;
+                border-bottom: 1px solid #e0e0e0;
+                z-index: 10; // Ensure header stays on top
+            }
+
+            td.mat-mdc-cell {
+                padding: 12px 16px;
+                font-size: 13px;
+                color: #333;
+                border-bottom: 1px solid #f0f0f0;
+
+                &.no-data-cell {
+                    text-align: center;
+                    padding: 48px;
+                    color: #757575;
+                    background-color: white;
+                }
+            }
+
+            tr.mat-mdc-row:hover {
+                background-color: #f9f9f9;
+            }
+
+            // Links
+            .details-page-link,
+            .a-link {
+                color: #1976d2;
+                cursor: pointer;
+                text-decoration: none;
+                font-weight: 500;
+
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+
+            // Chips
+            .protocol-chip {
+                display: inline-block;
+                padding: 2px 8px;
+                border-radius: 12px;
+                background-color: #e0e0e0;
+                color: #424242;
+                font-size: 11px;
+                font-weight: 500;
+                text-transform: uppercase;
+                letter-spacing: 0.5px;
+            }
+
+            .success-icon {
+                color: #2e7d32;
+                font-size: 16px;
+            }
+
+            .delete-icon {
+                color: #c62828;
+                font-size: 16px;
+            }
+        }
+    }
+
+    mat-paginator {
+        background: transparent;
+        border-top: 1px solid #e0e0e0;
+        flex-shrink: 0;
+    }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-certificates/apv-ssl-certificates.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-certificates/apv-ssl-certificates.ts	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-certificates/apv-ssl-certificates.ts	(working copy)
@@ -1,15 +1,16 @@
-import {ChangeDetectorRef, Component, inject, OnInit, ViewChild} from '@angular/core';
-import {DeviceService} from '../../../services/device-service';
-import {NotificationService} from '../../../services/notification';
-import {take} from 'rxjs/operators';
-import {ActivatedRoute} from '@angular/router';
-import {MatTableDataSource} from '@angular/material/table';
-import {MatPaginator} from '@angular/material/paginator';
-import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog';
-import {SharedModule} from '../../../shared/shared-module';
-import {GlobalSerialPipe} from '../../../pipes/global-serial-pipe';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {Confirmation} from '../../../services/confirmation';
+import { ChangeDetectorRef, Component, inject, OnInit, ViewChild } from '@angular/core';
+import { DeviceService } from '../../../services/device-service';
+import { NotificationService } from '../../../services/notification';
+import { take } from 'rxjs/operators';
+import { ActivatedRoute } from '@angular/router';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatSort } from '@angular/material/sort';
+import { MatPaginator } from '@angular/material/paginator';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
+import { SharedModule } from '../../../shared/shared-module';
+import { GlobalSerialPipe } from '../../../pipes/global-serial-pipe';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Confirmation } from '../../../services/confirmation';
 
 @Component({
   selector: 'app-apv-ssl-certificates',
@@ -26,6 +27,7 @@
   tableColumns: string[] = ['serial', 'domain', 'index', 'type', 'status', 'astate', 'subject', 'etime', 'action'];
   dataSource: MatTableDataSource<any> = new MatTableDataSource();
   @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
   dialog = inject(MatDialog);
   dialogConfig = new MatDialogConfig();
   sslVHostSNI: any = [];
@@ -43,7 +45,7 @@
     this.deviceName = this._route.snapshot.paramMap.get('deviceName');
     this.serviceName = this._route.snapshot.paramMap.get('serviceName');
     this.hostName = this._route.snapshot.paramMap.get('hostName');
-    this.dataSource.paginator = this.paginator;
+    // this.dataSource.paginator = this.paginator;
     setTimeout(() => {
       this.getSSLCertificates();
       this.getSSLVHostSNI();
@@ -60,6 +62,7 @@
             this.dataSource.data = resp.SSLVirtualHost.certs;
             this.totalRecords = this.dataSource.data.length;
             this.dataSource.paginator = this.paginator;
+            this.dataSource.sort = this.sort;
           }
           this._cdRef.detectChanges();
         },
@@ -70,6 +73,15 @@
       });
   }
 
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
   getSSLVHostSNI() {
     this.sslVHostSNI = [];
     this._device.getSSLVHostSNI(this.deviceName, this.hostName)
@@ -156,7 +168,7 @@
 
   deleteSSLCertificate(_cert: any) {
     let deviceName = _cert?.filename;
-    let confirmMsg = `Are you sure you want to delete "${_cert?.filename}"?`
+    let confirmMsg = `Are you sure you want to delete "${_cert?.filename}" ? `
     this._confirmation.openConfirmDialog({
       title: `Delete ${deviceName}?`,
       message: confirmMsg,
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-client-verification/apv-ssl-client-verification.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-client-verification/apv-ssl-client-verification.html	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-client-verification/apv-ssl-client-verification.html	(working copy)
@@ -1,112 +1,147 @@
-<mat-card class="page-card-1" appearance="filled">
-  <mat-card-header>
-    <mat-card-title>Client Verification</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <form
-      (ngSubmit)="updateClientVerificationSettings()"
-      [formGroup]="configForm"
-      class="common-form"
-    >
+<div class="apv-ssl-container">
+
+  <!-- Settings Section -->
+  <div class="settings-section">
+    <div class="section-title">Client Verification Settings</div>
+    <form (ngSubmit)="updateClientVerificationSettings()" [formGroup]="configForm" class="common-form">
       <div class="form-field-wrapper">
-        <label for="client_auth" class="form-label">Enable Client Verification</label>
+        <label for="client_auth">Enable Client Verification</label>
         <mat-slide-toggle id="client_auth" formControlName="client_auth"></mat-slide-toggle>
       </div>
       <div class="form-field-wrapper">
-        <label for="host_status" class="form-label">Virtual Host Status ({{ hostName }})</label>
+        <label for="host_status">Virtual Host Status ({{ hostName }})</label>
         <mat-slide-toggle id="host_status" formControlName="host_status"></mat-slide-toggle>
       </div>
-      <div class="button-container-center">
-        <button mat-raised-button color="primary" type="submit">Submit</button>
+      <div>
+        <button mat-flat-button color="primary" type="submit">Update Settings</button>
       </div>
     </form>
-  </mat-card-content>
-</mat-card>
-<mat-card class="page-card-1" appearance="filled">
-  <mat-card-header>
-    <mat-card-title>Client Certificate</mat-card-title>
-    <div>
-      <button mat-raised-button (click)="importClientCertificate()">Import</button>
+  </div>
+
+  <!-- Client Certificate Section -->
+  <div>
+    <div class="table-toolbar">
+      <div class="section-header">Client Certificates</div>
+      <div class="toolbar-actions">
+        <!-- Filter -->
+        <mat-form-field appearance="outline" class="filter-field">
+          <mat-label>Filter Client Certs</mat-label>
+          <input matInput (keyup)="applyClientFilter($event)" placeholder="Search..." #clientInput>
+          <fa-icon [icon]="['fas', 'search']" matSuffix class="search-icon"></fa-icon>
+        </mat-form-field>
+
+        <!-- Action -->
+        <button mat-flat-button color="primary" (click)="importClientCertificate()">
+          <fa-icon [icon]="['fas', 'file-import']"></fa-icon> Import
+        </button>
+      </div>
     </div>
-  </mat-card-header>
-  <mat-card-content>
+
     <div class="table-container">
-      <table mat-table [dataSource]="clientCertDataSource" class="mat-elevation-z1">
-        <ng-container matColumnDef="index">
-          <th mat-header-cell *matHeaderCellDef> No.</th>
-          <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial:paginator }}</td>
-        </ng-container>
-        <ng-container matColumnDef="status">
-          <th mat-header-cell *matHeaderCellDef> Status</th>
-          <td mat-cell *matCellDef="let element">{{ element?.status }}</td>
-        </ng-container>
-        <ng-container matColumnDef="subject">
-          <th mat-header-cell *matHeaderCellDef> Subject</th>
-          <td mat-cell *matCellDef="let element">{{ element?.subject }}</td>
-        </ng-container>
-        <ng-container matColumnDef="etime">
-          <th mat-header-cell *matHeaderCellDef> Expiry Time</th>
-          <td mat-cell *matCellDef="let element">{{ element?.validity_not_after }}</td>
-        </ng-container>
-        <ng-container matColumnDef="action">
-          <th mat-header-cell *matHeaderCellDef> Action</th>
-          <td mat-cell *matCellDef="let element">
-            <div class="row-action a-link">
-              <fa-icon [icon]="['far', 'trash-can']" size="lg" class="delete-icon" matTooltip="Delete"
-                       (click)="deleteCertificate('clientcert')"></fa-icon>
-            </div>
-          </td>
-        </ng-container>
-        <tr mat-header-row *matHeaderRowDef="clientCertColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: clientCertColumns;"></tr>
-        <tr class="mat-row table-no-data" *matNoDataRow>
-          <td class="mat-cell" colspan="5">No results found.</td>
-        </tr>
-      </table>
+      <div class="table-scroll-area">
+        <table mat-table [dataSource]="clientCertDataSource" matSort #clientSort="matSort" class="modern-table">
+          <ng-container matColumnDef="index">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> No.</th>
+            <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial:clientPaginator }}</td>
+          </ng-container>
+          <ng-container matColumnDef="status">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Status</th>
+            <td mat-cell *matCellDef="let element">{{ element?.status }}</td>
+          </ng-container>
+          <ng-container matColumnDef="subject">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Subject</th>
+            <td mat-cell *matCellDef="let element">{{ element?.subject }}</td>
+          </ng-container>
+          <ng-container matColumnDef="etime">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Expiry Time</th>
+            <td mat-cell *matCellDef="let element">{{ element?.validity_not_after }}</td>
+          </ng-container>
+          <ng-container matColumnDef="action">
+            <th mat-header-cell *matHeaderCellDef> Action</th>
+            <td mat-cell *matCellDef="let element">
+              <div class="row-action" matTooltip="Delete" (click)="deleteCertificate('clientcert')">
+                <fa-icon [icon]="['far', 'trash-can']" size="lg" class="delete-icon"></fa-icon>
+              </div>
+            </td>
+          </ng-container>
+          <tr mat-header-row *matHeaderRowDef="clientCertColumns; sticky: true"></tr>
+          <tr mat-row *matRowDef="let row; columns: clientCertColumns;"></tr>
+          <tr class="mat-row table-no-data" *matNoDataRow>
+            <td class="mat-cell no-data-cell" colspan="5">
+              @if (clientInput.value) {
+              No results found for "{{clientInput.value}}"
+              } @else {
+              No results found.
+              }
+            </td>
+          </tr>
+        </table>
+      </div>
+      <mat-paginator #clientPaginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
     </div>
-  </mat-card-content>
-</mat-card>
-<mat-card class="page-card-1" appearance="filled">
-  <mat-card-header>
-    <mat-card-title>RootCA Certificate</mat-card-title>
-    <div>
-      <button mat-raised-button (click)="importRootCACertificate()">Import</button>
+  </div>
+
+  <!-- RootCA Certificate Section -->
+  <div>
+    <div class="table-toolbar">
+      <div class="section-header">RootCA Certificates</div>
+      <div class="toolbar-actions">
+        <!-- Filter -->
+        <mat-form-field appearance="outline" class="filter-field">
+          <mat-label>Filter RootCA Certs</mat-label>
+          <input matInput (keyup)="applyRootFilter($event)" placeholder="Search..." #rootInput>
+          <fa-icon [icon]="['fas', 'search']" matSuffix class="search-icon"></fa-icon>
+        </mat-form-field>
+
+        <!-- Action -->
+        <button mat-flat-button color="primary" (click)="importRootCACertificate()">
+          <fa-icon [icon]="['fas', 'file-import']"></fa-icon> Import
+        </button>
+      </div>
     </div>
-  </mat-card-header>
-  <mat-card-content>
+
     <div class="table-container">
-      <table mat-table [dataSource]="rootCACertDataSource" class="mat-elevation-z1">
-        <ng-container matColumnDef="index">
-          <th mat-header-cell *matHeaderCellDef> No.</th>
-          <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial:paginator }}</td>
-        </ng-container>
-        <ng-container matColumnDef="status">
-          <th mat-header-cell *matHeaderCellDef> Status</th>
-          <td mat-cell *matCellDef="let element">{{ element?.status }}</td>
-        </ng-container>
-        <ng-container matColumnDef="subject">
-          <th mat-header-cell *matHeaderCellDef> Subject</th>
-          <td mat-cell *matCellDef="let element">{{ element?.subject }}</td>
-        </ng-container>
-        <ng-container matColumnDef="etime">
-          <th mat-header-cell *matHeaderCellDef> Expiry Time</th>
-          <td mat-cell *matCellDef="let element">{{ element?.validity_not_after }}</td>
-        </ng-container>
-        <ng-container matColumnDef="action">
-          <th mat-header-cell *matHeaderCellDef> Action</th>
-          <td mat-cell *matCellDef="let element">
-            <div class="row-action a-link">
-              <fa-icon [icon]="['far', 'trash-can']" size="lg" class="delete-icon" matTooltip="Delete"
-                       (click)="deleteCertificate('rootca')"></fa-icon>
-            </div>
-          </td>
-        </ng-container>
-        <tr mat-header-row *matHeaderRowDef="rootCACertColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: rootCACertColumns;"></tr>
-        <tr class="mat-row table-no-data" *matNoDataRow>
-          <td class="mat-cell" colspan="5">No results found.</td>
-        </tr>
-      </table>
+      <div class="table-scroll-area">
+        <table mat-table [dataSource]="rootCACertDataSource" matSort #rootSort="matSort" class="modern-table">
+          <ng-container matColumnDef="index">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> No.</th>
+            <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial:rootPaginator }}</td>
+          </ng-container>
+          <ng-container matColumnDef="status">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Status</th>
+            <td mat-cell *matCellDef="let element">{{ element?.status }}</td>
+          </ng-container>
+          <ng-container matColumnDef="subject">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Subject</th>
+            <td mat-cell *matCellDef="let element">{{ element?.subject }}</td>
+          </ng-container>
+          <ng-container matColumnDef="etime">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Expiry Time</th>
+            <td mat-cell *matCellDef="let element">{{ element?.validity_not_after }}</td>
+          </ng-container>
+          <ng-container matColumnDef="action">
+            <th mat-header-cell *matHeaderCellDef> Action</th>
+            <td mat-cell *matCellDef="let element">
+              <div class="row-action" matTooltip="Delete" (click)="deleteCertificate('rootca')">
+                <fa-icon [icon]="['far', 'trash-can']" size="lg" class="delete-icon"></fa-icon>
+              </div>
+            </td>
+          </ng-container>
+          <tr mat-header-row *matHeaderRowDef="rootCACertColumns; sticky: true"></tr>
+          <tr mat-row *matRowDef="let row; columns: rootCACertColumns;"></tr>
+          <tr class="mat-row table-no-data" *matNoDataRow>
+            <td class="mat-cell no-data-cell" colspan="5">
+              @if (rootInput.value) {
+              No results found for "{{rootInput.value}}"
+              } @else {
+              No results found.
+              }
+            </td>
+          </tr>
+        </table>
+      </div>
+      <mat-paginator #rootPaginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
     </div>
-  </mat-card-content>
-</mat-card>
+  </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/apv-ssl-client-verification/apv-ssl-client-verification.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-client-verification/apv-ssl-client-verification.scss	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-client-verification/apv-ssl-client-verification.scss	(working copy)
@@ -0,0 +1,166 @@
+// Copied from topology-slb-virtual-service.scss for consistency
+
+:host {
+    display: block;
+    height: 100%;
+}
+
+.apv-ssl-container {
+    padding: 12px;
+    background-color: #fafafa;
+    height: 100%;
+    overflow: auto; // Allow scroll for the whole page since it has multiple sections
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    // Settings Section
+    .settings-section {
+        background: white;
+        padding: 16px;
+        border-radius: 8px;
+        border: 1px solid #e0e0e0;
+
+        .section-title {
+            font-size: 16px;
+            font-weight: 500;
+            color: #424242;
+            margin-bottom: 16px;
+        }
+
+        .common-form {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+
+            .form-field-wrapper {
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                gap: 24px;
+                // max-width: 400px; // Remove fixed max-width restriction or adjust if needed
+
+                label {
+                    font-size: 14px;
+                    color: #616161;
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+
+    // Header Toolbar (Button + Filter)
+    .table-toolbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 12px;
+        gap: 16px;
+
+        .toolbar-actions {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+
+        .section-header {
+            font-size: 16px;
+            font-weight: 500;
+            color: #424242;
+        }
+
+        .filter-field {
+            width: 100%;
+            max-width: 300px;
+            margin-bottom: 0;
+
+            ::ng-deep .mat-mdc-text-field-wrapper {
+                background-color: white;
+                border-radius: 8px;
+                height: 40px !important;
+                padding: 0 12px !important;
+            }
+
+            ::ng-deep .mat-mdc-form-field-infix {
+                padding: 8px 0 !important;
+                min-height: 40px !important;
+            }
+
+            ::ng-deep .mat-mdc-input-element {
+                margin-top: 0;
+            }
+
+            ::ng-deep .mat-mdc-floating-label {
+                top: 16px !important;
+            }
+
+            .search-icon {
+                color: #757575;
+                font-size: 14px;
+                margin-right: 8px;
+            }
+        }
+    }
+
+    // Table Container
+    .table-container {
+        border-radius: 8px;
+        overflow: hidden;
+        border: 1px solid #e0e0e0;
+        background: white;
+        display: flex;
+        flex-direction: column;
+
+        .table-scroll-area {
+            flex: 0 1 auto;
+            overflow: auto;
+            width: 100%;
+        }
+
+        .modern-table {
+            width: 100%;
+            border-collapse: collapse;
+
+            th.mat-mdc-header-cell {
+                background-color: #f5f5f5;
+                color: #424242;
+                font-weight: 600;
+                font-size: 13px;
+                padding: 0 16px;
+                border-bottom: 1px solid #e0e0e0;
+                z-index: 10;
+            }
+
+            td.mat-mdc-cell {
+                padding: 12px 16px;
+                font-size: 13px;
+                color: #333;
+                border-bottom: 1px solid #f0f0f0;
+
+                &.no-data-cell {
+                    text-align: center;
+                    padding: 48px;
+                    color: #757575;
+                    background-color: white;
+                }
+            }
+
+            tr.mat-mdc-row:hover {
+                background-color: #f9f9f9;
+            }
+
+            .row-action {
+                cursor: pointer;
+                color: #c62828;
+            }
+        }
+    }
+
+    mat-paginator {
+        background: transparent;
+        border-top: 1px solid #e0e0e0;
+        flex-shrink: 0;
+    }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-client-verification/apv-ssl-client-verification.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-client-verification/apv-ssl-client-verification.ts	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-client-verification/apv-ssl-client-verification.ts	(working copy)
@@ -1,17 +1,17 @@
-import {ChangeDetectorRef, Component, inject, OnInit, ViewChild} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
-import {MatPaginator} from '@angular/material/paginator';
-import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog';
-import {DeviceService} from '../../../services/device-service';
-import {ActivatedRoute} from '@angular/router';
-import {NotificationService} from '../../../services/notification';
-import {Confirmation} from '../../../services/confirmation';
-import {SharedModule} from '../../../shared/shared-module';
-import {GlobalSerialPipe} from '../../../pipes/global-serial-pipe';
-import {take} from 'rxjs/operators';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import { ChangeDetectorRef, Component, inject, OnInit, ViewChild } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
+import { DeviceService } from '../../../services/device-service';
+import { ActivatedRoute } from '@angular/router';
+import { NotificationService } from '../../../services/notification';
+import { Confirmation } from '../../../services/confirmation';
+import { SharedModule } from '../../../shared/shared-module';
+import { GlobalSerialPipe } from '../../../pipes/global-serial-pipe';
+import { take } from 'rxjs/operators';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatSort } from '@angular/material/sort';
 
-
 @Component({
   selector: 'app-apv-ssl-client-verification',
   imports: [SharedModule, GlobalSerialPipe],
@@ -31,7 +31,11 @@
   rootCACertColumns: string[] = ['index', 'status', 'subject', 'etime', 'action'];
   rootCACertDataSource: MatTableDataSource<any> = new MatTableDataSource();
 
-  @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild('clientPaginator') clientPaginator!: MatPaginator;
+  @ViewChild('clientSort') clientSort!: MatSort;
+  @ViewChild('rootPaginator') rootPaginator!: MatPaginator;
+  @ViewChild('rootSort') rootSort!: MatSort;
+
   dialog = inject(MatDialog);
   dialogConfig = new MatDialogConfig();
 
@@ -92,7 +96,12 @@
             let settings = resp.SSLClientVerificationSettings;
             if (settings?.certs && settings?.certs.length > 0) {
               this.clientCertDataSource.data = settings?.certs[0]?.client_certs;
+              this.clientCertDataSource.paginator = this.clientPaginator;
+              this.clientCertDataSource.sort = this.clientSort;
+
               this.rootCACertDataSource.data = settings?.certs[0]?.rootca_certs;
+              this.rootCACertDataSource.paginator = this.rootPaginator;
+              this.rootCACertDataSource.sort = this.rootSort;
             }
             this.configForm.patchValue({
               client_auth: settings?.client_auth,
@@ -105,8 +114,24 @@
           this._cdRef.detectChanges();
         }
       });
+  }
+
+  applyClientFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.clientCertDataSource.filter = filterValue.trim().toLowerCase();
+    if (this.clientCertDataSource.paginator) {
+      this.clientCertDataSource.paginator.firstPage();
+    }
   }
 
+  applyRootFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.rootCACertDataSource.filter = filterValue.trim().toLowerCase();
+    if (this.rootCACertDataSource.paginator) {
+      this.rootCACertDataSource.paginator.firstPage();
+    }
+  }
+
   updateClientVerificationSettings(): void {
     let options = JSON.stringify({
       client_auth: this.configForm.value?.client_auth,
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-inter-ca-certificates/apv-ssl-inter-ca-certificates.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-inter-ca-certificates/apv-ssl-inter-ca-certificates.html	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-inter-ca-certificates/apv-ssl-inter-ca-certificates.html	(working copy)
@@ -1,46 +1,69 @@
-<mat-card class="page-card-1" appearance="filled">
-  <mat-card-header>
-    <div>
-      <button mat-raised-button (click)="importIntermediateCA()">Import</button>
+<div class="apv-ssl-container">
+
+  <!-- Toolbar (Button + Filter) -->
+  <div class="table-toolbar">
+    <!-- Filter -->
+    <mat-form-field appearance="outline" class="filter-field">
+      <mat-label>Filter InterCA Certificates</mat-label>
+      <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Domain, Issuer" #input>
+      <fa-icon [icon]="['fas', 'search']" matSuffix class="search-icon"></fa-icon>
+    </mat-form-field>
+
+    <!-- Action Button -->
+    <button mat-flat-button color="primary" (click)="importIntermediateCA()">
+      <fa-icon [icon]="['fas', 'file-import']"></fa-icon> Import
+    </button>
+  </div>
+
+  <div class="table-container">
+    <div class="table-scroll-area">
+      <table mat-table [dataSource]="dataSource" matSort class="modern-table">
+        <ng-container matColumnDef="serial">
+          <th mat-header-cell *matHeaderCellDef> No.</th>
+          <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial:paginator }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="domain">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Domain Name</th>
+          <td mat-cell *matCellDef="let element">{{ element?.domain_name }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="status">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Status</th>
+          <td mat-cell *matCellDef="let element">{{ element?.status }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="issuer">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Issuer</th>
+          <td mat-cell *matCellDef="let element">
+            <div class="wrap-cell">{{ element?.subject }}</div>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="action">
+          <th mat-header-cell *matHeaderCellDef> Action</th>
+          <td mat-cell *matCellDef="let element">
+            <div class="row-action a-link">
+              <fa-icon [icon]="['far', 'trash-can']" size="lg" class="delete-icon" matTooltip="Delete"
+                (click)="deleteIntermediateCACertificate(element)"></fa-icon>
+            </div>
+          </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="tableColumns; sticky: true"></tr>
+        <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
+
+        <tr class="mat-row table-no-data" *matNoDataRow>
+          <td class="mat-cell no-data-cell" colspan="10">
+            @if (input.value) {
+            No results found for "{{input.value}}"
+            } @else {
+            No results found.
+            }
+          </td>
+        </tr>
+      </table>
     </div>
-  </mat-card-header>
-</mat-card>
-<div class="table-container">
-  <table mat-table [dataSource]="dataSource" class="mat-elevation-z1">
-    <ng-container matColumnDef="serial">
-      <th mat-header-cell *matHeaderCellDef> No.</th>
-      <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial:paginator }}</td>
-    </ng-container>
-    <ng-container matColumnDef="domain">
-      <th mat-header-cell *matHeaderCellDef> Domain Name</th>
-      <td mat-cell *matCellDef="let element">{{ element?.domain_name }}</td>
-    </ng-container>
-    <ng-container matColumnDef="status">
-      <th mat-header-cell *matHeaderCellDef> Status</th>
-      <td mat-cell *matCellDef="let element">{{ element?.status }}</td>
-    </ng-container>
-    <ng-container matColumnDef="issuer">
-      <th mat-header-cell *matHeaderCellDef> Issuer</th>
-      <td mat-cell *matCellDef="let element">{{ element?.subject }}</td>
-    </ng-container>
-    <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> Action</th>
-      <td mat-cell *matCellDef="let element">
-        <div class="row-action a-link">
-          <fa-icon [icon]="['far', 'trash-can']" size="lg" class="delete-icon" matTooltip="Delete"
-                   (click)="deleteIntermediateCACertificate(element)"></fa-icon>
-        </div>
-      </td>
-    </ng-container>
-    <tr mat-header-row *matHeaderRowDef="tableColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
-    <tr class="mat-row table-no-data" *matNoDataRow>
-      <td class="mat-cell" colspan="10">No results found.</td>
-    </tr>
-  </table>
-  <mat-paginator
-    [pageSizeOptions]="[10, 15, 20, 25]"
-    [length]="totalRecords"
-    showFirstLastButtons
-  ></mat-paginator>
-</div>
+    <mat-paginator [pageSizeOptions]="[10, 15, 20, 25]" 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/apv-ssl-inter-ca-certificates/apv-ssl-inter-ca-certificates.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-inter-ca-certificates/apv-ssl-inter-ca-certificates.scss	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-inter-ca-certificates/apv-ssl-inter-ca-certificates.scss	(working copy)
@@ -0,0 +1,131 @@
+// Copied from topology-slb-virtual-service.scss for consistency
+
+:host {
+    display: block;
+    height: 100%;
+}
+
+.apv-ssl-container {
+    padding: 12px;
+    background-color: #fafafa;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    // Header Toolbar (Button + Filter)
+    .table-toolbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 12px;
+        gap: 16px;
+
+        .section-header {
+            font-size: 16px;
+            font-weight: 500;
+            color: #424242;
+        }
+
+        .filter-field {
+            width: 100%;
+            max-width: 300px;
+            margin-bottom: 0;
+
+            ::ng-deep .mat-mdc-text-field-wrapper {
+                background-color: white;
+                border-radius: 8px;
+                height: 40px !important;
+                padding: 0 12px !important; // Add padding to wrapper
+            }
+
+            // Center the content vertically
+            ::ng-deep .mat-mdc-form-field-infix {
+                padding: 8px 0 !important;
+                min-height: 40px !important;
+            }
+
+            // Adjust input position
+            ::ng-deep .mat-mdc-input-element {
+                margin-top: 0;
+            }
+
+            // Fix Label Position (Center it when not floating)
+            ::ng-deep .mat-mdc-floating-label {
+                top: 16px !important;
+            }
+
+            .search-icon {
+                color: #757575;
+                font-size: 14px;
+                margin-right: 8px;
+            }
+        }
+    }
+
+    // Table Container
+    .table-container {
+        border-radius: 8px;
+        overflow: hidden;
+        border: 1px solid #e0e0e0;
+        background: white;
+        flex: 0 1 auto;
+        display: flex;
+        flex-direction: column;
+        max-height: 100%;
+
+        .table-scroll-area {
+            flex: 0 1 auto;
+            overflow: auto;
+            width: 100%;
+            position: relative;
+        }
+
+        .modern-table {
+            width: 100%;
+            border-collapse: collapse;
+
+            th.mat-mdc-header-cell {
+                background-color: #f5f5f5;
+                color: #424242;
+                font-weight: 600;
+                font-size: 13px;
+                padding: 0 16px;
+                border-bottom: 1px solid #e0e0e0;
+                z-index: 10;
+            }
+
+            td.mat-mdc-cell {
+                padding: 12px 16px;
+                font-size: 13px;
+                color: #333;
+                border-bottom: 1px solid #f0f0f0;
+
+                &.no-data-cell {
+                    text-align: center;
+                    padding: 48px;
+                    color: #757575;
+                    background-color: white;
+                }
+            }
+
+            tr.mat-mdc-row:hover {
+                background-color: #f9f9f9;
+            }
+
+            .row-action {
+                cursor: pointer;
+                color: #c62828;
+            }
+        }
+    }
+
+    mat-paginator {
+        background: transparent;
+        border-top: 1px solid #e0e0e0;
+        flex-shrink: 0;
+    }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-inter-ca-certificates/apv-ssl-inter-ca-certificates.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-inter-ca-certificates/apv-ssl-inter-ca-certificates.ts	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-inter-ca-certificates/apv-ssl-inter-ca-certificates.ts	(working copy)
@@ -1,15 +1,16 @@
-import {ChangeDetectorRef, Component, inject, OnInit, ViewChild} from '@angular/core';
-import {GlobalSerialPipe} from '../../../pipes/global-serial-pipe';
-import {SharedModule} from '../../../shared/shared-module';
-import {MatTableDataSource} from '@angular/material/table';
-import {MatPaginator} from '@angular/material/paginator';
-import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog';
-import {DeviceService} from '../../../services/device-service';
-import {ActivatedRoute} from '@angular/router';
-import {NotificationService} from '../../../services/notification';
-import {Confirmation} from '../../../services/confirmation';
-import {take} from 'rxjs/operators';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import { ChangeDetectorRef, Component, inject, OnInit, ViewChild } from '@angular/core';
+import { GlobalSerialPipe } from '../../../pipes/global-serial-pipe';
+import { SharedModule } from '../../../shared/shared-module';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
+import { DeviceService } from '../../../services/device-service';
+import { ActivatedRoute } from '@angular/router';
+import { NotificationService } from '../../../services/notification';
+import { Confirmation } from '../../../services/confirmation';
+import { take } from 'rxjs/operators';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatSort } from '@angular/material/sort';
 
 
 @Component({
@@ -30,6 +31,7 @@
   tableColumns: string[] = ['serial', 'domain', 'status', 'issuer', 'action'];
   dataSource: MatTableDataSource<any> = new MatTableDataSource();
   @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
   dialog = inject(MatDialog);
   dialogConfig = new MatDialogConfig();
   sslVHostSNI: any = [];
@@ -47,13 +49,21 @@
     this.deviceName = this._route.snapshot.paramMap.get('deviceName');
     this.serviceName = this._route.snapshot.paramMap.get('serviceName');
     this.hostName = this._route.snapshot.paramMap.get('hostName');
-    this.dataSource.paginator = this.paginator;
+    // Paginator is not available in OnInit usually, moved to bind in get method or AfterViewInit
     setTimeout(() => {
       this.getIntermediateCACertificates();
       this.getSSLVHostSNI();
     })
   }
 
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
   getIntermediateCACertificates() {
     this.dataSource.data = [];
     this._device.getSSLInterCACertificates(this.deviceName, this.hostName)
@@ -64,6 +74,7 @@
             this.dataSource.data = resp.SSLVirtualHost.interca_certs;
             this.totalRecords = this.dataSource.data.length;
             this.dataSource.paginator = this.paginator;
+            this.dataSource.sort = this.sort;
           }
           this._cdRef.detectChanges();
         },
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-device-insights/dashboard-device-insights.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-device-insights/dashboard-device-insights.ts	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-device-insights/dashboard-device-insights.ts	(working copy)
@@ -57,10 +57,13 @@
         // Check for APV types (APV, AG, vAG, vxAG)
         this.hasApv = devices.some((d: any) => {
           const type = d.type?.toUpperCase();
-          return ['APV', 'AG', 'VAG', 'VXAG'].includes(type);
+          return ['APV', 'VAPV'].includes(type);
         });
 
-        this.hasSslVpn = this.hasApv; // Assuming SSLVPN is a feature of APV devices for now.
+        this.hasSslVpn = devices.some((d: any) => {
+          const type = d.type?.toUpperCase();
+          return ['AG', 'VXAG'].includes(type);
+        });
 
         this.isLoading = false;
       },
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-base-settings/device-ha-base-settings.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-base-settings/device-ha-base-settings.html	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-base-settings/device-ha-base-settings.html	(working copy)
@@ -1,66 +1,52 @@
-<form
-  (ngSubmit)="onSubmit()"
-  [formGroup]="configForm"
-  class="common-form"
->
-  <div class="form-field-wrapper">
-    <label for="enable" class="form-label">HA Status</label>
-    <mat-slide-toggle formControlName="enable"></mat-slide-toggle>
-  </div>
-  <div class="form-field-wrapper">
-    <label for="arp" class="form-label">ARP Interval</label>
-    <mat-form-field appearance="outline" subscriptSizing="dynamic">
-      <input
-        id="arp"
-        formControlName="arp"
-        matInput
-        placeholder="ARP Interval"
-        type="number"
-      />
-    </mat-form-field>
-  </div>
-  <div class="form-field-wrapper">
-    <label for="sync_bootup" class="form-label">Bootup Sync Config</label>
-    <mat-slide-toggle formControlName="sync_bootup"></mat-slide-toggle>
-  </div>
-  <div class="form-field-wrapper">
-    <label for="sync_runtime" class="form-label">Runtime Sync Config</label>
-    <mat-slide-toggle formControlName="sync_runtime"></mat-slide-toggle>
-  </div>
-  <div class="form-field-wrapper">
-    <label for="log_enable" class="form-label">HA Logging</label>
-    <mat-slide-toggle formControlName="log_enable"></mat-slide-toggle>
-  </div>
-  <div class="form-field-wrapper">
-    <label for="log_level" class="form-label">HA Log Level</label>
-    <mat-form-field appearance="outline" subscriptSizing="dynamic">
-      <input
-        id="log_level"
-        formControlName="log_level"
-        matInput
-        placeholder="HA Log Level"
-        type="text"
-      />
-    </mat-form-field>
-  </div>
-  <div class="form-field-wrapper">
-    <label for="floatmac_enable" class="form-label">HA Floating MAC</label>
-    <mat-slide-toggle formControlName="floatmac_enable"></mat-slide-toggle>
-  </div>
-  <div class="form-field-wrapper">
-    <label for="link_ffo" class="form-label">HA FFO Link</label>
-    <mat-slide-toggle formControlName="link_ffo"></mat-slide-toggle>
-  </div>
-  <div class="form-field-wrapper">
-    <label for="link_network" class="form-label">HA Network Link</label>
-    <mat-slide-toggle formControlName="link_network"></mat-slide-toggle>
-  </div>
-  <div class="form-field-wrapper">
-    <label for="ha_consistency" class="form-label">HA Consistency Check</label>
-    <mat-slide-toggle formControlName="ha_consistency"></mat-slide-toggle>
-  </div>
-  <div class="form-field-wrapper">
-    <label for="ha_checkpeer" class="form-label">HA Peer Check</label>
-    <mat-slide-toggle formControlName="ha_checkpeer"></mat-slide-toggle>
-  </div>
-</form>
+<div class="settings-container">
+  <form (ngSubmit)="onSubmit()" [formGroup]="configForm" class="common-form">
+    <div class="form-field-wrapper">
+      <label for="enable" class="form-label">HA Status</label>
+      <mat-slide-toggle formControlName="enable" color="primary"></mat-slide-toggle>
+    </div>
+    <div class="form-field-wrapper">
+      <label for="arp" class="form-label">ARP Interval</label>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input id="arp" formControlName="arp" matInput placeholder="ARP Interval" type="number" />
+      </mat-form-field>
+    </div>
+    <div class="form-field-wrapper">
+      <label for="sync_bootup" class="form-label">Bootup Sync Config</label>
+      <mat-slide-toggle formControlName="sync_bootup" color="primary"></mat-slide-toggle>
+    </div>
+    <div class="form-field-wrapper">
+      <label for="sync_runtime" class="form-label">Runtime Sync Config</label>
+      <mat-slide-toggle formControlName="sync_runtime" color="primary"></mat-slide-toggle>
+    </div>
+    <div class="form-field-wrapper">
+      <label for="log_enable" class="form-label">HA Logging</label>
+      <mat-slide-toggle formControlName="log_enable" color="primary"></mat-slide-toggle>
+    </div>
+    <div class="form-field-wrapper">
+      <label for="log_level" class="form-label">HA Log Level</label>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input id="log_level" formControlName="log_level" matInput placeholder="HA Log Level" type="text" />
+      </mat-form-field>
+    </div>
+    <div class="form-field-wrapper">
+      <label for="floatmac_enable" class="form-label">HA Floating MAC</label>
+      <mat-slide-toggle formControlName="floatmac_enable" color="primary"></mat-slide-toggle>
+    </div>
+    <div class="form-field-wrapper">
+      <label for="link_ffo" class="form-label">HA FFO Link</label>
+      <mat-slide-toggle formControlName="link_ffo" color="primary"></mat-slide-toggle>
+    </div>
+    <div class="form-field-wrapper">
+      <label for="link_network" class="form-label">HA Network Link</label>
+      <mat-slide-toggle formControlName="link_network" color="primary"></mat-slide-toggle>
+    </div>
+    <div class="form-field-wrapper">
+      <label for="ha_consistency" class="form-label">HA Consistency Check</label>
+      <mat-slide-toggle formControlName="ha_consistency" color="primary"></mat-slide-toggle>
+    </div>
+    <div class="form-field-wrapper">
+      <label for="ha_checkpeer" class="form-label">HA Peer Check</label>
+      <mat-slide-toggle formControlName="ha_checkpeer" color="primary"></mat-slide-toggle>
+    </div>
+  </form>
+</div>
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-base-settings/device-ha-base-settings.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-base-settings/device-ha-base-settings.scss	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-base-settings/device-ha-base-settings.scss	(working copy)
@@ -0,0 +1,59 @@
+:host {
+    display: block;
+    height: 100%;
+}
+
+.settings-container {
+    padding: 24px;
+    background-color: white; // Or same specific background
+    height: 100%;
+    overflow: auto;
+    box-sizing: border-box;
+
+    .common-form {
+        display: flex;
+        flex-direction: column;
+        gap: 24px; // Spacing between rows
+        max-width: 800px; // Limit width for readability
+    }
+
+    .form-field-wrapper {
+        display: flex;
+        align-items: center;
+        gap: 24px;
+
+        .form-label {
+            width: 200px; // Fixed label width for alignment
+            font-size: 14px;
+            font-weight: 500;
+            color: #424242;
+            flex-shrink: 0;
+        }
+
+        mat-form-field {
+            width: 100%;
+            max-width: 300px;
+
+            // Apply compact height fix
+            ::ng-deep .mat-mdc-text-field-wrapper {
+                background-color: white;
+                border-radius: 8px;
+                height: 40px !important;
+                padding: 0 12px !important;
+            }
+
+            ::ng-deep .mat-mdc-form-field-infix {
+                padding: 8px 0 !important;
+                min-height: 40px !important;
+            }
+
+            ::ng-deep .mat-mdc-input-element {
+                margin-top: 0;
+            }
+
+            ::ng-deep .mat-mdc-floating-label {
+                top: 16px !important;
+            }
+        }
+    }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-group/device-ha-group.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-group/device-ha-group.html	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-group/device-ha-group.html	(working copy)
@@ -1,49 +1,62 @@
-<mat-card class="page-card-1" appearance="filled">
-  <mat-card-header>
-    <div>
-      <button mat-raised-button (click)="switchHAGroup()">Switch</button>
+<div class="ha-container">
+  <div class="table-toolbar">
+    <mat-form-field appearance="outline" class="filter-field">
+      <mat-label>Filter Groups</mat-label>
+      <input matInput (keyup)="applyFilter($event)" placeholder="Search..." #input>
+      <fa-icon [icon]="['fas', 'search']" matSuffix class="search-icon"></fa-icon>
+    </mat-form-field>
+
+    <div class="action-buttons">
+      <button mat-flat-button color="primary" (click)="switchHAGroup()">
+        <fa-icon [icon]="['fas', 'exchange-alt']"></fa-icon> Switch Group
+      </button>
     </div>
-  </mat-card-header>
-</mat-card>
-<div class="table-container">
-  <table mat-table [dataSource]="dataSource" class="mat-elevation-z1">
-    <ng-container matColumnDef="serial">
-      <th mat-header-cell *matHeaderCellDef> No.</th>
-      <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial:paginator }}</td>
-    </ng-container>
-    <ng-container matColumnDef="id">
-      <th mat-header-cell *matHeaderCellDef> Group Id</th>
-      <td mat-cell *matCellDef="let element">{{ element?.id }}</td>
-    </ng-container>
-    <ng-container matColumnDef="group">
-      <th mat-header-cell *matHeaderCellDef>HA Group</th>
-      <td mat-cell *matCellDef="let element">
-        @if (element?.enable) {
-          <fa-icon [icon]="['far', 'check-circle']" class="success-icon"></fa-icon>
-        } @else {
-          <fa-icon [icon]="['far', 'xmark-circle']" class="delete-icon"></fa-icon>
-        }
-      </td>
-    </ng-container>
-    <ng-container matColumnDef="mode">
-      <th mat-header-cell *matHeaderCellDef>Preemption Mode</th>
-      <td mat-cell *matCellDef="let element">
-        @if (element?.preempt) {
-          <fa-icon [icon]="['far', 'check-circle']" class="success-icon"></fa-icon>
-        } @else {
-          <fa-icon [icon]="['far', 'xmark-circle']" class="delete-icon"></fa-icon>
-        }
-      </td>
-    </ng-container>
-    <tr mat-header-row *matHeaderRowDef="tableColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
-    <tr class="mat-row table-no-data" *matNoDataRow>
-      <td class="mat-cell" colspan="10">No results found.</td>
-    </tr>
-  </table>
-  <mat-paginator
-    [pageSizeOptions]="[10, 15, 20, 25]"
-    [length]="totalRecords"
-    showFirstLastButtons
-  ></mat-paginator>
-</div>
+  </div>
+
+  <div class="table-container">
+    <div class="table-scroll-area">
+      <table mat-table [dataSource]="dataSource" matSort class="modern-table">
+        <ng-container matColumnDef="serial">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> No.</th>
+          <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial:paginator }}</td>
+        </ng-container>
+        <ng-container matColumnDef="id">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Group Id</th>
+          <td mat-cell *matCellDef="let element">{{ element?.id }}</td>
+        </ng-container>
+        <ng-container matColumnDef="group">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>HA Group</th>
+          <td mat-cell *matCellDef="let element">
+            @if (element?.enable) {
+            <fa-icon [icon]="['far', 'check-circle']" class="success-icon"></fa-icon>
+            } @else {
+            <fa-icon [icon]="['far', 'xmark-circle']" class="delete-icon"></fa-icon>
+            }
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="mode">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>Preemption Mode</th>
+          <td mat-cell *matCellDef="let element">
+            @if (element?.preempt) {
+            <fa-icon [icon]="['far', 'check-circle']" class="success-icon"></fa-icon>
+            } @else {
+            <fa-icon [icon]="['far', 'xmark-circle']" class="delete-icon"></fa-icon>
+            }
+          </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="tableColumns; sticky: true"></tr>
+        <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
+        <tr class="mat-row table-no-data" *matNoDataRow>
+          <td class="mat-cell no-data-cell" colspan="10">
+            @if (input.value) {
+            No results found for "{{input.value}}"
+            } @else {
+            No results found.
+            }
+          </td>
+        </tr>
+      </table>
+    </div>
+    <mat-paginator [pageSizeOptions]="[10, 15, 20, 25]" [length]="totalRecords" 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/device-ha-group/device-ha-group.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-group/device-ha-group.scss	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-group/device-ha-group.scss	(working copy)
@@ -0,0 +1,166 @@
+:host {
+    display: block;
+    height: 100%;
+}
+
+.ha-container {
+    padding: 12px;
+    background-color: #fafafa;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    // Header Toolbar (Filter + Actions)
+    .table-toolbar {
+        display: flex;
+        justify-content: flex-end; // Align filter to right
+        align-items: center;
+        margin-bottom: 0; // Removed margin as per recent fix
+        gap: 16px;
+
+        .filter-field {
+            width: 100%;
+            max-width: 400px;
+            margin-bottom: 0;
+
+            ::ng-deep .mat-mdc-text-field-wrapper {
+                background-color: white;
+                border-radius: 8px;
+                height: 40px !important;
+                padding: 0 12px !important;
+                display: flex;
+                align-items: center;
+            }
+
+            ::ng-deep .mat-mdc-form-field-infix {
+                padding: 0 !important;
+                min-height: 40px !important;
+                height: 40px !important;
+                display: flex;
+                align-items: center;
+            }
+
+            ::ng-deep .mat-mdc-input-element {
+                margin-top: 0;
+                position: relative;
+                top: -2px; // Slight adjustment for vertical centering
+            }
+
+            ::ng-deep .mat-mdc-floating-label {
+                top: 50% !important;
+                transform: translateY(-50%) !important;
+            }
+
+            // Hide the subscript wrapper (hints/errors) to fix vertical alignment
+            ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+                display: none;
+            }
+
+            .search-icon {
+                color: #757575;
+                font-size: 16px;
+                margin-right: 8px;
+            }
+        }
+
+        .action-buttons {
+            display: flex;
+            gap: 12px;
+
+            button {
+                height: 40px; // Match filter height
+                border-radius: 8px;
+                background-color: #1976d2;
+                color: white;
+                font-weight: 500;
+                padding: 0 16px;
+                border: none;
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                cursor: pointer;
+                transition: background-color 0.2s;
+
+                &:hover {
+                    background-color: #1565c0;
+                }
+
+                fa-icon {
+                    font-size: 14px;
+                }
+            }
+        }
+    }
+
+    // Table Container
+    .table-container {
+        border-radius: 8px;
+        overflow: hidden;
+        border: 1px solid #e0e0e0;
+        background: white;
+        flex: 0 1 auto; // Shrink to fit content
+        display: flex;
+        flex-direction: column;
+        max-height: 100%; // Don't overflow parent
+
+        .table-scroll-area {
+            flex: 0 1 auto; // Allow shrink and auto height, don't force fill
+            overflow: auto;
+            width: 100%;
+            position: relative; // Establish context for sticky headers
+        }
+
+        .modern-table {
+            width: 100%;
+            border-collapse: collapse;
+
+            th.mat-mdc-header-cell {
+                background-color: #f5f5f5;
+                color: #424242;
+                font-weight: 600;
+                font-size: 13px;
+                padding: 0 16px;
+                border-bottom: 1px solid #e0e0e0;
+                z-index: 10;
+            }
+
+            td.mat-mdc-cell {
+                padding: 12px 16px;
+                font-size: 13px;
+                color: #333;
+                border-bottom: 1px solid #f0f0f0;
+
+                &.no-data-cell {
+                    text-align: center;
+                    padding: 48px;
+                    color: #757575;
+                    background-color: white;
+                }
+            }
+
+            tr.mat-mdc-row:hover {
+                background-color: #f9f9f9;
+            }
+
+            .success-icon {
+                color: #2e7d32;
+                font-size: 16px;
+            }
+
+            .delete-icon {
+                color: #c62828; // Used for "x" icons here
+                font-size: 16px;
+            }
+        }
+    }
+
+    mat-paginator {
+        background: transparent;
+        border-top: 1px solid #e0e0e0;
+        flex-shrink: 0;
+    }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-group/device-ha-group.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-group/device-ha-group.ts	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-group/device-ha-group.ts	(working copy)
@@ -1,14 +1,15 @@
-import {ChangeDetectorRef, Component, inject, OnInit, ViewChild} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
-import {MatPaginator} from '@angular/material/paginator';
-import {ActivatedRoute} from '@angular/router';
-import {DeviceService} from '../../../services/device-service';
-import {NotificationService} from '../../../services/notification';
-import {take} from 'rxjs/operators';
-import {SharedModule} from '../../../shared/shared-module';
-import {GlobalSerialPipe} from '../../../pipes/global-serial-pipe';
-import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import { ChangeDetectorRef, Component, inject, OnInit, ViewChild } from '@angular/core';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
+import { ActivatedRoute } from '@angular/router';
+import { DeviceService } from '../../../services/device-service';
+import { NotificationService } from '../../../services/notification';
+import { take } from 'rxjs/operators';
+import { SharedModule } from '../../../shared/shared-module';
+import { GlobalSerialPipe } from '../../../pipes/global-serial-pipe';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-device-ha-group',
@@ -22,45 +23,56 @@
   totalRecords: number = 0;
   tableColumns: string[] = ['serial', 'id', 'group', 'mode',];
   dataSource: MatTableDataSource<any> = new MatTableDataSource();
-@ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
 
   constructor(
     private _cdRef: ChangeDetectorRef,
     private _route: ActivatedRoute,
     private _device: DeviceService,
     private _notification: NotificationService
-) {
+  ) {
     this.deviceName = this._route.snapshot.paramMap.get('deviceName');
   }
 
   ngOnInit() {
     this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
     setTimeout(() => {
       this.getDeviceHAGroups();
       this.getDeviceHAUnits();
     })
   }
 
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
   getDeviceHAGroups() {
     this.dataSource.data = [];
     let payload = new FormData();
     payload.set('device_name', JSON.stringify(this.deviceName))
     this._device.getDeviceHAGroupsByName(this.deviceName, payload)
       .pipe(take(1)).subscribe({
-      next: (result: any) => {
-        if (result && result.data) {
-          console.log(result.data);
-          this.dataSource.data = result.data;
-          this.totalRecords = this.dataSource.data.length;
-          this.dataSource.paginator = this.paginator;
+        next: (result: any) => {
+          if (result && result.data) {
+            this.dataSource.data = result.data;
+            this.totalRecords = this.dataSource.data.length;
+            this.dataSource.paginator = this.paginator;
+            this.dataSource.sort = this.sort;
+            this.dataSource.sort = this.sort;
+          }
+          this._cdRef.detectChanges();
+        },
+        error: error => {
+          this._notification.showError(`Error: ${error?.message}`);
+          this._cdRef.detectChanges();
         }
-        this._cdRef.detectChanges();
-      },
-      error: error => {
-        this._notification.showError(`Error: ${error?.message}`);
-        this._cdRef.detectChanges();
-      }
-    })
+      })
   }
 
   deviceHAUnits: any = [];
@@ -70,17 +82,17 @@
     payload.set('device_name', JSON.stringify(this.deviceName))
     this._device.getDeviceHAUnitsByName(this.deviceName, payload)
       .pipe(take(1)).subscribe({
-      next: (result: any) => {
-        if (result && result.data) {
-          this.deviceHAUnits = result.data;
+        next: (result: any) => {
+          if (result && result.data) {
+            this.deviceHAUnits = result.data;
+          }
+          this._cdRef.detectChanges();
+        },
+        error: error => {
+          this._notification.showError(`Error: ${error?.message}`);
+          this._cdRef.detectChanges();
         }
-        this._cdRef.detectChanges();
-      },
-      error: error => {
-        this._notification.showError(`Error: ${error?.message}`);
-        this._cdRef.detectChanges();
-      }
-    })
+      })
   }
   dialog = inject(MatDialog);
   dialogConfig = new MatDialogConfig();
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-unit/device-ha-unit.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-unit/device-ha-unit.html	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-unit/device-ha-unit.html	(working copy)
@@ -1,30 +1,44 @@
-<div class="table-container">
-  <table mat-table [dataSource]="dataSource" class="mat-elevation-z1">
-    <ng-container matColumnDef="serial">
-      <th mat-header-cell *matHeaderCellDef> No.</th>
-      <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial:paginator }}</td>
-    </ng-container>
-    <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> Unit Name</th>
-      <td mat-cell *matCellDef="let element">{{ element?.name }}</td>
-    </ng-container>
-    <ng-container matColumnDef="ip">
-      <th mat-header-cell *matHeaderCellDef> Primary Link IP</th>
-      <td mat-cell *matCellDef="let element">{{ element?.ip }}</td>
-    </ng-container>
-    <ng-container matColumnDef="port">
-      <th mat-header-cell *matHeaderCellDef> Primary Link Port</th>
-      <td mat-cell *matCellDef="let element">{{ element?.port }}</td>
-    </ng-container>
-    <tr mat-header-row *matHeaderRowDef="tableColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
-    <tr class="mat-row table-no-data" *matNoDataRow>
-      <td class="mat-cell" colspan="10">No results found.</td>
-    </tr>
-  </table>
-  <mat-paginator
-    [pageSizeOptions]="[10, 15, 20, 25]"
-    [length]="totalRecords"
-    showFirstLastButtons
-  ></mat-paginator>
-</div>
+<div class="ha-container">
+  <div class="table-toolbar">
+    <mat-form-field appearance="outline" class="filter-field">
+      <mat-label>Filter Units</mat-label>
+      <input matInput (keyup)="applyFilter($event)" placeholder="Search..." #input>
+      <fa-icon [icon]="['fas', 'search']" matSuffix class="search-icon"></fa-icon>
+    </mat-form-field>
+  </div>
+
+  <div class="table-container">
+    <div class="table-scroll-area">
+      <table mat-table [dataSource]="dataSource" matSort class="modern-table">
+        <ng-container matColumnDef="serial">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> No.</th>
+          <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial:paginator }}</td>
+        </ng-container>
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Unit Name</th>
+          <td mat-cell *matCellDef="let element">{{ element?.name }}</td>
+        </ng-container>
+        <ng-container matColumnDef="ip">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Primary Link IP</th>
+          <td mat-cell *matCellDef="let element">{{ element?.ip }}</td>
+        </ng-container>
+        <ng-container matColumnDef="port">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Primary Link Port</th>
+          <td mat-cell *matCellDef="let element">{{ element?.port }}</td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="tableColumns; sticky: true"></tr>
+        <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
+        <tr class="mat-row table-no-data" *matNoDataRow>
+          <td class="mat-cell no-data-cell" colspan="10">
+            @if (input.value) {
+            No results found for "{{input.value}}"
+            } @else {
+            No results found.
+            }
+          </td>
+        </tr>
+      </table>
+    </div>
+    <mat-paginator [pageSizeOptions]="[10, 15, 20, 25]" [length]="totalRecords" 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/device-ha-unit/device-ha-unit.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-unit/device-ha-unit.scss	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-unit/device-ha-unit.scss	(working copy)
@@ -0,0 +1,115 @@
+:host {
+    display: block;
+    height: 100%;
+}
+
+.ha-container {
+    padding: 12px;
+    background-color: #fafafa;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    // Header Toolbar (Filter)
+    .table-toolbar {
+        display: flex;
+        justify-content: flex-end; // Align filter to right
+        align-items: center;
+        margin-bottom: 0; // Removed margin as per recent fix
+        gap: 16px;
+
+        .filter-field {
+            width: 100%;
+            max-width: 400px;
+            margin-bottom: 0;
+
+            ::ng-deep .mat-mdc-text-field-wrapper {
+                background-color: white;
+                border-radius: 8px;
+                height: 40px !important;
+                padding: 0 12px !important;
+            }
+
+            ::ng-deep .mat-mdc-form-field-infix {
+                padding: 8px 0 !important;
+                min-height: 40px !important;
+            }
+
+            ::ng-deep .mat-mdc-input-element {
+                margin-top: 0;
+            }
+
+            ::ng-deep .mat-mdc-floating-label {
+                top: 16px !important;
+            }
+
+            .search-icon {
+                color: #757575;
+                font-size: 16px;
+                margin-right: 8px;
+            }
+        }
+    }
+
+    // Table Container
+    .table-container {
+        border-radius: 8px;
+        overflow: hidden;
+        border: 1px solid #e0e0e0;
+        background: white;
+        flex: 0 1 auto; // Shrink to fit content
+        display: flex;
+        flex-direction: column;
+        max-height: 100%; // Don't overflow parent
+
+        .table-scroll-area {
+            flex: 0 1 auto; // Allow shrink and auto height, don't force fill
+            overflow: auto;
+            width: 100%;
+            position: relative; // Establish context for sticky headers
+        }
+
+        .modern-table {
+            width: 100%;
+            border-collapse: collapse;
+
+            th.mat-mdc-header-cell {
+                background-color: #f5f5f5;
+                color: #424242;
+                font-weight: 600;
+                font-size: 13px;
+                padding: 0 16px;
+                border-bottom: 1px solid #e0e0e0;
+                z-index: 10;
+            }
+
+            td.mat-mdc-cell {
+                padding: 12px 16px;
+                font-size: 13px;
+                color: #333;
+                border-bottom: 1px solid #f0f0f0;
+
+                &.no-data-cell {
+                    text-align: center;
+                    padding: 48px;
+                    color: #757575;
+                    background-color: white;
+                }
+            }
+
+            tr.mat-mdc-row:hover {
+                background-color: #f9f9f9;
+            }
+        }
+    }
+
+    mat-paginator {
+        background: transparent;
+        border-top: 1px solid #e0e0e0;
+        flex-shrink: 0;
+    }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-unit/device-ha-unit.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-unit/device-ha-unit.ts	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-unit/device-ha-unit.ts	(working copy)
@@ -1,12 +1,13 @@
-import {ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
-import {take} from 'rxjs/operators';
-import {ActivatedRoute} from '@angular/router';
-import {DeviceService} from '../../../services/device-service';
-import {NotificationService} from '../../../services/notification';
-import {SharedModule} from '../../../shared/shared-module';
-import {GlobalSerialPipe} from '../../../pipes/global-serial-pipe';
-import {MatTableDataSource} from '@angular/material/table';
-import {MatPaginator} from '@angular/material/paginator';
+import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
+import { MatSort } from '@angular/material/sort';
+import { take } from 'rxjs/operators';
+import { ActivatedRoute } from '@angular/router';
+import { DeviceService } from '../../../services/device-service';
+import { NotificationService } from '../../../services/notification';
+import { SharedModule } from '../../../shared/shared-module';
+import { GlobalSerialPipe } from '../../../pipes/global-serial-pipe';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
 
 @Component({
   selector: 'app-device-ha-unit',
@@ -21,6 +22,7 @@
   tableColumns: string[] = ['serial', 'name', 'ip', 'port',];
   dataSource: MatTableDataSource<any> = new MatTableDataSource();
   @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
 
   constructor(
     private _cdRef: ChangeDetectorRef,
@@ -33,29 +35,39 @@
 
   ngOnInit() {
     this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
     setTimeout(() => {
       this.getDeviceHAUnits();
     })
   }
 
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
   getDeviceHAUnits() {
     this.dataSource.data = [];
     let payload = new FormData();
     payload.set('device_name', JSON.stringify(this.deviceName))
     this._device.getDeviceHAUnitsByName(this.deviceName, payload)
       .pipe(take(1)).subscribe({
-      next: (result: any) => {
-        if (result && result.data) {
-          this.dataSource.data = result.data;
-          this.totalRecords = this.dataSource.data.length;
-          this.dataSource.paginator = this.paginator;
+        next: (result: any) => {
+          if (result && result.data) {
+            this.dataSource.data = result.data;
+            this.totalRecords = this.dataSource.data.length;
+            this.dataSource.paginator = this.paginator;
+            this.dataSource.sort = this.sort;
+          }
+          this._cdRef.detectChanges();
+        },
+        error: error => {
+          this._notification.showError(`Error: ${error?.message}`);
+          this._cdRef.detectChanges();
         }
-        this._cdRef.detectChanges();
-      },
-      error: error => {
-        this._notification.showError(`Error: ${error?.message}`);
-        this._cdRef.detectChanges();
-      }
-    })
+      })
   }
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-analysis-slb-overview/log-analysis-slb-overview.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-analysis-slb-overview/log-analysis-slb-overview.ts	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-analysis-slb-overview/log-analysis-slb-overview.ts	(working copy)
@@ -1,14 +1,14 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
-import {take} from 'rxjs/operators';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { take } from 'rxjs/operators';
 import {
   MatTableDataSource
 } from '@angular/material/table';
-import {MatPaginator} from '@angular/material/paginator';
-import {DeviceService} from '../../../services/device-service';
-import {NotificationService} from '../../../services/notification';
-import {GlobalSerialPipe} from '../../../pipes/global-serial-pipe';
-import {SharedModule} from '../../../shared/shared-module';
-import {Router} from '@angular/router';
+import { MatPaginator } from '@angular/material/paginator';
+import { DeviceService } from '../../../services/device-service';
+import { NotificationService } from '../../../services/notification';
+import { GlobalSerialPipe } from '../../../pipes/global-serial-pipe';
+import { SharedModule } from '../../../shared/shared-module';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-log-analysis-slb-overview',
@@ -35,7 +35,9 @@
   }
 
   ngOnInit() {
-    this.getDeviceGroups();
+    setTimeout(() => {
+      this.getDeviceGroups();
+    });
   }
 
   getDeviceGroups(): void {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/topology-graph/topology-graph.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/topology-graph/topology-graph.html	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/topology-graph/topology-graph.html	(working copy)
@@ -0,0 +1,10 @@
+<div class="topology-graph-container" [class.loading]="isLoading">
+    @if (isLoading) {
+    <div class="loading-spinner">
+        <mat-spinner diameter="40"></mat-spinner>
+        <p>Loading Topology Data...</p>
+    </div>
+    } @else {
+    <div echarts [options]="chartOptions" class="topology-chart"></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/topology-graph/topology-graph.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/topology-graph/topology-graph.scss	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/topology-graph/topology-graph.scss	(working copy)
@@ -0,0 +1,28 @@
+.topology-graph-container {
+  width: 100%;
+  height: 600px;
+  position: relative;
+  background-color: #fafafa;
+  border-radius: 4px;
+  border: 1px solid #e0e0e0;
+  overflow: hidden;
+
+  &.loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.topology-chart {
+  width: 100%;
+  height: 100%;
+}
+
+.loading-spinner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  color: #666;
+}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/topology-graph/topology-graph.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/topology-graph/topology-graph.ts	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/topology-graph/topology-graph.ts	(working copy)
@@ -0,0 +1,242 @@
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NgxEchartsModule } from 'ngx-echarts';
+import { EChartsOption } from 'echarts';
+import { GraphChart } from 'echarts/charts';
+import * as echarts from 'echarts/core';
+
+echarts.use([GraphChart]);
+import { DeviceService } from '../../../services/device-service';
+import { NotificationService } from '../../../services/notification';
+import { take } from 'rxjs/operators';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+
+@Component({
+    selector: 'app-topology-graph',
+    standalone: true,
+    imports: [
+        CommonModule,
+        NgxEchartsModule,
+        MatProgressSpinnerModule
+    ],
+    templateUrl: './topology-graph.html',
+    styleUrl: './topology-graph.scss'
+})
+export class TopologyGraph implements OnInit {
+    isLoading: boolean = true;
+    chartOptions: EChartsOption = {};
+
+    constructor(
+        private _device: DeviceService,
+        private _notification: NotificationService,
+        private _cdRef: ChangeDetectorRef
+    ) { }
+
+    ngOnInit() {
+        // Use setTimeout to avoid ExpressionChangedAfterItHasBeenCheckedError when setting isLoading
+        setTimeout(() => {
+            this.fetchTopologyData();
+        });
+    }
+
+    fetchTopologyData() {
+        this.isLoading = true;
+        this._device.getDeviceGroups()
+            .pipe(take(1))
+            .subscribe({
+                next: (data: any) => {
+                    const devices = data.devices || [];
+                    const apvDevices = devices.filter((d: any) =>
+                        d.type?.toLowerCase() === 'apv' || d.type?.toLowerCase() === 'vapv'
+                    );
+
+                    if (apvDevices.length === 0) {
+                        this.isLoading = false;
+                        this.renderEmptyGraph();
+                        return;
+                    }
+
+                    // Fetch SLB services for all APV devices
+                    let completedRequests = 0;
+                    const nodes: any[] = [];
+                    const links: any[] = [];
+                    const categories = [
+                        { name: 'Device', itemStyle: { color: '#3f51b5' } },
+                        { name: 'Virtual Service', itemStyle: { color: '#4caf50' } },
+                        { name: 'Real Service', itemStyle: { color: '#ff9800' } }
+                    ];
+
+                    apvDevices.forEach((device: any) => {
+                        // Add Device Node
+                        nodes.push({
+                            name: device.name,
+                            category: 0,
+                            symbolSize: 50,
+                            label: { show: true }
+                        });
+
+                        this._device.getSLBServices(device.id)
+                            .pipe(take(1))
+                            .subscribe({
+                                next: (result: any) => {
+                                    if (result && result.data) {
+                                        result.data.forEach((service: any) => {
+                                            const vsName = service.basic?.service_name || 'Unknown VS';
+
+                                            // Create unique ID for this device's VS
+                                            const vsId = `${device.name}__${vsName}`;
+
+                                            // Add VS Node
+                                            if (!nodes.find(n => n.name === vsId)) {
+                                                nodes.push({
+                                                    name: vsId, // Unique ID
+                                                    value: vsName, // Display Name (stored in value or formatter)
+                                                    category: 1,
+                                                    symbolSize: 40,
+                                                    label: {
+                                                        show: true,
+                                                        formatter: vsName // Show simple name
+                                                    }
+                                                });
+                                            }
+
+                                            // Link Device -> VS
+                                            links.push({
+                                                source: device.name,
+                                                target: vsId
+                                            });
+
+                                            // Process Policies to find Real Services
+                                            service.policies?.forEach((policy: any) => {
+                                                if (policy?.type === 'static') {
+                                                    // Static Policy
+                                                    const rsName = policy.dst?.name;
+                                                    if (rsName) {
+                                                        const rsId = `${device.name}__${vsName}__${rsName}`;
+                                                        if (!nodes.find(n => n.name === rsId)) {
+                                                            nodes.push({
+                                                                name: rsId,
+                                                                value: rsName,
+                                                                category: 2, // Real Service
+                                                                symbolSize: 30,
+                                                                label: {
+                                                                    show: true,
+                                                                    formatter: rsName
+                                                                }
+                                                            });
+                                                        }
+                                                        // Link VS -> RS
+                                                        links.push({
+                                                            source: vsId,
+                                                            target: rsId
+                                                        });
+                                                    }
+                                                } else {
+                                                    // Other Policies (e.g. Compression, etc? Or just normal ones)
+                                                    const dst = policy.dst;
+                                                    if (dst && dst.type === 'group') {
+                                                        // Iterate through group members
+                                                        dst.members?.forEach((member: any) => {
+                                                            const rsName = member.name;
+                                                            if (rsName) {
+                                                                const rsId = `${device.name}__${vsName}__${rsName}`;
+                                                                if (!nodes.find(n => n.name === rsId)) {
+                                                                    nodes.push({
+                                                                        name: rsId,
+                                                                        value: rsName,
+                                                                        category: 2, // Real Service
+                                                                        symbolSize: 30,
+                                                                        label: {
+                                                                            show: true,
+                                                                            formatter: rsName
+                                                                        }
+                                                                    });
+                                                                }
+                                                                // Link VS -> RS
+                                                                links.push({
+                                                                    source: vsId,
+                                                                    target: rsId
+                                                                });
+                                                            }
+                                                        });
+                                                    }
+                                                }
+                                            });
+                                        });
+                                    }
+                                },
+                                complete: () => {
+                                    completedRequests++;
+                                    if (completedRequests === apvDevices.length) {
+                                        this.renderGraph(nodes, links, categories);
+                                        this.isLoading = false;
+                                        this._cdRef.detectChanges();
+                                    }
+                                },
+                                error: (err: any) => {
+                                    console.error(err);
+                                    completedRequests++;
+                                    if (completedRequests === apvDevices.length) {
+                                        this.renderGraph(nodes, links, categories);
+                                        this.isLoading = false;
+                                        this._cdRef.detectChanges();
+                                    }
+                                }
+                            });
+                    });
+                },
+                error: (err: any) => {
+                    console.error(err);
+                    this._notification.showError('Failed to fetch devices');
+                    this.isLoading = false;
+                }
+            });
+    }
+
+    renderEmptyGraph() {
+        this.chartOptions = {
+            title: { text: 'No APV Devices Found', left: 'center' }
+        };
+    }
+
+    renderGraph(nodes: any[], links: any[], categories: any[]) {
+        // Unique nodes
+        const uniqueNodes = Array.from(new Map(nodes.map(item => [item.name, item])).values());
+
+        this.chartOptions = {
+            tooltip: {},
+            // Legend removed as per requirement
+            animationDuration: 1500,
+            animationEasingUpdate: 'quinticInOut',
+            series: [
+                {
+                    name: 'Topology',
+                    type: 'graph',
+                    layout: 'force',
+                    data: uniqueNodes,
+                    links: links,
+                    categories: categories,
+                    roam: true,
+                    label: {
+                        position: 'right',
+                        formatter: '{b}'
+                    },
+                    lineStyle: {
+                        color: 'source',
+                        curveness: 0.3
+                    },
+                    force: {
+                        repulsion: 300,
+                        edgeLength: 100
+                    },
+                    emphasis: {
+                        focus: 'adjacency',
+                        lineStyle: {
+                            width: 10
+                        }
+                    }
+                }
+            ]
+        };
+    }
+}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/topology-slb-real-service/topology-slb-real-service.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/topology-slb-real-service/topology-slb-real-service.html	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/topology-slb-real-service/topology-slb-real-service.html	(working copy)
@@ -1,97 +1,106 @@
-<div class="table-container">
-  <table mat-table [dataSource]="dataSource" class="mat-elevation-z1">
-    <ng-container matColumnDef="serial">
-      <th mat-header-cell *matHeaderCellDef>No.</th>
-      <td mat-cell *matCellDef="let element; let i = index;">{{ i | globalSerial: paginator }}</td>
-    </ng-container>
-    <ng-container matColumnDef="serviceName">
-      <th mat-header-cell *matHeaderCellDef>Service Name</th>
-      <td mat-cell *matCellDef="let element">
-        <a class="details-page-link" (click)="updateRealService(element)">{{ element?.service_name }}</a>
-      </td>
-    </ng-container>
-    <ng-container matColumnDef="protocol">
-      <th mat-header-cell *matHeaderCellDef>Protocol</th>
-      <td mat-cell *matCellDef="let element">{{ element?.protocol }}</td>
-    </ng-container>
-    <ng-container matColumnDef="deviceName">
-      <th mat-header-cell *matHeaderCellDef>Device Name</th>
-      <td mat-cell *matCellDef="let element">
-        <a class="details-page-link" (click)="deviceDetails(element)">{{ element?.device_name }}</a>
-      </td>
-    </ng-container>
-    <ng-container matColumnDef="deviceGroup">
-      <th mat-header-cell *matHeaderCellDef>Device Group</th>
-      <td mat-cell *matCellDef="let element">{{ element?.device_group }}</td>
-    </ng-container>
-    <ng-container matColumnDef="ip">
-      <th mat-header-cell *matHeaderCellDef>IP Address</th>
-      <td mat-cell *matCellDef="let element">{{ element?.ip }}</td>
-    </ng-container>
-    <ng-container matColumnDef="port">
-      <th mat-header-cell *matHeaderCellDef>Port</th>
-      <td mat-cell *matCellDef="let element">{{ element?.port }}</td>
-    </ng-container>
-    <ng-container matColumnDef="enabled">
-      <th mat-header-cell *matHeaderCellDef>Enabled</th>
-      <td mat-cell *matCellDef="let element">
-        @if (element?.enable) {
-          <fa-icon [icon]="['far', 'check-circle']" class="success-icon"></fa-icon>
-        } @else {
-          <fa-icon [icon]="['far', 'xmark-circle']" class="delete-icon"></fa-icon>
-        }
-      </td>
-    </ng-container>
-<!--    <ng-container matColumnDef="status">-->
-<!--      <th mat-header-cell *matHeaderCellDef>Status</th>-->
-<!--      <td mat-cell *matCellDef="let element">-->
-<!--        @if (element?.upDown === 'UP') {-->
-<!--          <fa-icon [icon]="['far', 'check-circle']" class="success-icon"></fa-icon> {{ element?.upDown }}-->
-<!--        } @else {-->
-<!--          <fa-icon [icon]="['far', 'xmark-circle']" class="delete-icon"></fa-icon> {{ element?.upDown }}-->
-<!--        }-->
-<!--      </td>-->
-<!--    </ng-container>-->
-<!--    <ng-container matColumnDef="groupWeight">-->
-<!--      <th mat-header-cell *matHeaderCellDef>Group Weight</th>-->
-<!--      <td mat-cell *matCellDef="let element">-->
-<!--        @if (element?.groups.length > 0) {-->
-<!--          <table>-->
-<!--            <tbody>-->
-<!--              @for (_group of element?.groups; track _group) {-->
-<!--                <tr>-->
-<!--                  <td matTooltip="Group Name">{{ _group.group_name }}</td>-->
-<!--                  <td matTooltip="Group Method">{{ _group.group_method }}</td>-->
-<!--                  <td matTooltip="Group Weight">{{ _group.weight }}</td>-->
-<!--                </tr>-->
-<!--              }-->
-<!--            </tbody>-->
-<!--          </table>-->
-<!--        }-->
-<!--      </td>-->
-<!--    </ng-container>-->
-    <ng-container matColumnDef="maxConn">
-      <th mat-header-cell *matHeaderCellDef>Max Connection</th>
-      <td mat-cell *matCellDef="let element">{{ element?.max_conn }}</td>
-    </ng-container>
-    <ng-container matColumnDef="upCheck">
-      <th mat-header-cell *matHeaderCellDef>Up Check</th>
-      <td mat-cell *matCellDef="let element">{{ element?.hc_up }}</td>
-    </ng-container>
-    <ng-container matColumnDef="downCheck">
-      <th mat-header-cell *matHeaderCellDef>Down Check</th>
-      <td mat-cell *matCellDef="let element">{{ element?.hc_down }}</td>
-    </ng-container>
-    <tr mat-header-row *matHeaderRowDef="dataColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: dataColumns;"></tr>
-    <tr class="mat-row table-no-data" *matNoDataRow>
-      <td class="mat-cell" colspan="9">No results found.</td>
-    </tr>
-  </table>
-  <mat-paginator
-    [pageSizeOptions]="[5, 10, 15]"
-    [pageSize]="5"
-    [length]="totalRecords"
-    showFirstLastButtons
-  ></mat-paginator>
-</div>
+<div class="real-service-container">
+
+  <!-- Info Alert -->
+  <div class="info-alert">
+    <fa-icon [icon]="['fas', 'circle-info']"></fa-icon>
+    <span>
+      SLB topology display depends on APV version. Required: APV 10.3 (>=10.3.0.48), APV 10.3.1 (>=10.3.1.2), APV 8.6.1
+      (>=8.6.1.146). Please update if needed.
+    </span>
+  </div>
+
+  <!-- Filter -->
+  <mat-form-field appearance="outline" class="filter-field">
+    <mat-label>Filter Services</mat-label>
+    <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Service Name, IP, Protocol" #input>
+    <fa-icon [icon]="['fas', 'search']" matSuffix class="search-icon"></fa-icon>
+  </mat-form-field>
+
+  <div class="table-container">
+    <div class="table-scroll-area">
+      <table mat-table [dataSource]="dataSource" matSort class="modern-table">
+
+        <ng-container matColumnDef="serial">
+          <th mat-header-cell *matHeaderCellDef>No.</th>
+          <td mat-cell *matCellDef="let element; let i = index;">{{ i | globalSerial: paginator }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="serviceName">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>Service Name</th>
+          <td mat-cell *matCellDef="let element">
+            <a class="service-name" (click)="updateRealService(element)">{{ element?.service_name }}</a>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="protocol">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>Protocol</th>
+          <td mat-cell *matCellDef="let element">
+            <div class="protocol-chip">{{ element?.protocol }}</div>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="deviceName">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>Device Name</th>
+          <td mat-cell *matCellDef="let element">
+            <a class="device-link" (click)="deviceDetails(element)">{{ element?.device_name }}</a>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="deviceGroup">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>Device Group</th>
+          <td mat-cell *matCellDef="let element">{{ element?.device_group }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="ip">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>IP Address</th>
+          <td mat-cell *matCellDef="let element">{{ element?.ip }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="port">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>Port</th>
+          <td mat-cell *matCellDef="let element">{{ element?.port }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="enabled">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>Enabled</th>
+          <td mat-cell *matCellDef="let element">
+            @if (element?.enable) {
+            <fa-icon [icon]="['far', 'check-circle']" class="success-icon"></fa-icon>
+            } @else {
+            <fa-icon [icon]="['far', 'xmark-circle']" class="delete-icon"></fa-icon>
+            }
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="maxConn">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>Max Connection</th>
+          <td mat-cell *matCellDef="let element">{{ element?.max_conn }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="upCheck">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>Up Check</th>
+          <td mat-cell *matCellDef="let element">{{ element?.hc_up }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="downCheck">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>Down Check</th>
+          <td mat-cell *matCellDef="let element">{{ element?.hc_down }}</td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="dataColumns; sticky: true"></tr>
+        <tr mat-row *matRowDef="let row; columns: dataColumns;"></tr>
+
+        <tr class="mat-row" *matNoDataRow>
+          <td class="mat-cell no-data-cell" colspan="11">
+            @if (input.value) {
+            No services found matching the filter "{{input.value}}"
+            } @else {
+            No services found.
+            }
+          </td>
+        </tr>
+      </table>
+    </div>
+    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" 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/topology-slb-real-service/topology-slb-real-service.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/topology-slb-real-service/topology-slb-real-service.scss	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/topology-slb-real-service/topology-slb-real-service.scss	(working copy)
@@ -0,0 +1,161 @@
+// Copied from topology-slb-virtual-service.scss for consistency
+
+.real-service-container {
+    padding: 12px;
+    background-color: #fafafa;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    display: flex;
+    flex-direction: column;
+
+    // Alert Box
+    .info-alert {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px 16px;
+        background-color: #e3f2fd;
+        border: 1px solid #bbdefb;
+        border-radius: 8px;
+        color: #0d47a1;
+        margin-bottom: 20px;
+        font-size: 13px;
+        line-height: 1.5;
+
+        fa-icon {
+            font-size: 16px;
+        }
+    }
+
+    // Filter Field
+    .filter-field {
+        width: 100%;
+        max-width: 400px;
+        margin-bottom: 8px;
+
+        ::ng-deep .mat-mdc-text-field-wrapper {
+            background-color: white;
+            border-radius: 8px;
+        }
+
+        ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+            display: none; // Hide hint space
+        }
+
+        .search-icon {
+            color: #757575;
+            font-size: 16px;
+            margin-right: 8px;
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    // Table Container
+    .table-container {
+        border-radius: 8px;
+        overflow: hidden; // Parent handles border/radius
+        border: 1px solid #e0e0e0;
+        background: white;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+
+        .table-scroll-area {
+            flex: 1;
+            overflow: auto;
+            width: 100%;
+        }
+
+        .modern-table {
+            width: 100%;
+
+            th.mat-mdc-header-cell {
+                background-color: #f5f5f5;
+                color: #424242;
+                font-weight: 600;
+                font-size: 13px;
+                padding: 0 16px;
+                border-bottom: 1px solid #e0e0e0;
+                // Removed border-radius here as it's handled by container
+            }
+
+            td.mat-mdc-cell {
+                padding: 12px 16px;
+                font-size: 13px;
+                color: #333;
+                border-bottom: 1px solid #f0f0f0;
+
+                &.no-data-cell {
+                    text-align: center;
+                    padding: 48px;
+                    color: #757575;
+                    background-color: white;
+                }
+            }
+
+            tr.mat-mdc-row:hover {
+                background-color: #f9f9f9;
+            }
+
+            // Specific Column Styles
+            .service-name {
+                font-weight: 500;
+                color: #1976d2;
+                text-decoration: none;
+                cursor: pointer;
+
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+
+            .device-link {
+                color: #1976d2;
+                text-decoration: none;
+                cursor: pointer;
+                font-weight: 500;
+
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+
+            .protocol-chip {
+                display: inline-block;
+                padding: 2px 8px;
+                border-radius: 12px;
+                background-color: #e0e0e0;
+                color: #424242;
+                font-size: 11px;
+                font-weight: 500;
+                text-transform: uppercase;
+                letter-spacing: 0.5px;
+            }
+
+            .success-icon {
+                color: #2e7d32;
+                font-size: 16px;
+            }
+
+            .delete-icon {
+                color: #c62828;
+                font-size: 16px;
+            }
+
+            .wrap-cell {
+                max-width: 200px;
+                white-space: normal;
+                word-wrap: break-word;
+                line-height: 1.4;
+            }
+        }
+    }
+
+    mat-paginator {
+        background: transparent;
+        border-top: 1px solid #e0e0e0;
+    }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/topology-slb-real-service/topology-slb-real-service.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/topology-slb-real-service/topology-slb-real-service.ts	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/topology-slb-real-service/topology-slb-real-service.ts	(working copy)
@@ -1,15 +1,16 @@
-import {ChangeDetectorRef, Component, inject, OnInit, ViewChild} from '@angular/core';
-import {MatPaginator} from '@angular/material/paginator';
-import {DeviceService} from '../../../services/device-service';
-import {NotificationService} from '../../../services/notification';
-import {Router} from '@angular/router';
-import {take} from 'rxjs/operators';
-import {GlobalSerialPipe} from '../../../pipes/global-serial-pipe';
-import {SharedModule} from '../../../shared/shared-module';
-import {MatTableDataSource} from '@angular/material/table';
-import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {VpnService} from '../../../services/vpn-service';
+import { ChangeDetectorRef, Component, inject, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { DeviceService } from '../../../services/device-service';
+import { NotificationService } from '../../../services/notification';
+import { Router } from '@angular/router';
+import { take } from 'rxjs/operators';
+import { GlobalSerialPipe } from '../../../pipes/global-serial-pipe';
+import { SharedModule } from '../../../shared/shared-module';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatSort } from '@angular/material/sort';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { VpnService } from '../../../services/vpn-service';
 
 @Component({
   selector: 'app-topology-slb-real-service',
@@ -24,8 +25,11 @@
 
   totalRecords: number = 0;
   dataSource: MatTableDataSource<any> = new MatTableDataSource();
-  dataColumns: string[] = ['serial', 'serviceName', 'protocol', 'deviceName', 'deviceGroup', 'ip', 'port', 'enabled', 'maxConn', 'upCheck', 'downCheck']; //'groupWeight','status',
+  dataColumns: string[] = ['serial', 'serviceName', 'protocol', 'deviceName', 'deviceGroup', 'ip', 'port', 'enabled', 'maxConn', 'upCheck', 'downCheck'];
+
   @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
+
   deviceServices: any = [];
 
   constructor(
@@ -34,7 +38,6 @@
     private _cdRef: ChangeDetectorRef,
     private _router: Router,
   ) {
-    this.dataSource.paginator = this.paginator;
   }
 
   ngOnInit(): void {
@@ -83,6 +86,7 @@
           })
           this.dataSource.data = this.deviceServices;
           this.dataSource.paginator = this.paginator;
+          this.dataSource.sort = this.sort;
           this.totalRecords = this.dataSource.data.length;
         },
         error: (err: any) => {
@@ -90,6 +94,15 @@
       })
   }
 
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
   dialog = inject(MatDialog);
   dialogConfig = new MatDialogConfig();
 
@@ -134,12 +147,12 @@
 
   ngOnInit(): void {
     this.configForm = this._fB.group({
-      deviceName: [{value: '', disabled: true}, Validators.required],
-      serviceName: [{value: '', disabled: true}, Validators.required],
-      type: [{value: '', disabled: true}, Validators.required],
-      max_conn: [{value: 0, disabled: true}, Validators.required],
-      hc_up: [{value: 0, disabled: true}, Validators.required],
-      hc_down: [{value: 0, disabled: true}, Validators.required],
+      deviceName: [{ value: '', disabled: true }, Validators.required],
+      serviceName: [{ value: '', disabled: true }, Validators.required],
+      type: [{ value: '', disabled: true }, Validators.required],
+      max_conn: [{ value: 0, disabled: true }, Validators.required],
+      hc_up: [{ value: 0, disabled: true }, Validators.required],
+      hc_down: [{ value: 0, disabled: true }, Validators.required],
       enable: [false, Validators.required],
     });
     this.configForm.patchValue({
@@ -166,14 +179,14 @@
     }
     this._device.updateRealService([_payload])
       .pipe(take(1)).subscribe({
-      next: (resp: any) => {
-        this._notification.showSuccess(`The SLB Real service has been updated successfully.`);
-        this.dialogRef.close(true);
-      },
-      error: (error: any) => {
-        this._notification.showError(error?.message);
-      }
-    })
+        next: (resp: any) => {
+          this._notification.showSuccess(`The SLB Real service has been updated successfully.`);
+          this.dialogRef.close(true);
+        },
+        error: (error: any) => {
+          this._notification.showError(error?.message);
+        }
+      })
   }
 
   onCancel(): void {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/topology-slb-virtual-service/topology-slb-virtual-service.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/topology-slb-virtual-service/topology-slb-virtual-service.html	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/topology-slb-virtual-service/topology-slb-virtual-service.html	(working copy)
@@ -1,62 +1,100 @@
-<p>
-  SLB topology display depends on APV version. For APV 10.3 version, the required version is 10.3.0.48 and later. For
-  APV 10.3.1 version, the required version is 10.3.1.2 and later. For APV 8.6.1 version, the required version is
-  8.6.1.146 and later. Therefore, if you want to browse the related functions of the topology, please update the
-  corresponding APV version.
-</p>
-<div class="table-container">
-  <table mat-table [dataSource]="dataSource" class="mat-elevation-z1">
-    <ng-container matColumnDef="serial">
-      <th mat-header-cell *matHeaderCellDef>No.</th>
-      <td mat-cell *matCellDef="let element; let i = index;">{{ i | globalSerial: paginator }}</td>
-    </ng-container>
-    <ng-container matColumnDef="serviceName">
-      <th mat-header-cell *matHeaderCellDef>Service Name</th>
-      <td mat-cell *matCellDef="let element">
-        {{ element?.service_name }}
-        <!--        <a class="details-page-link" (click)="serviceDetails(element)">{{ element?.service_name }}</a>-->
-      </td>
-    </ng-container>
-    <ng-container matColumnDef="type">
-      <th mat-header-cell *matHeaderCellDef>Protocol</th>
-      <td mat-cell *matCellDef="let element">{{ element?.protocol }}</td>
-    </ng-container>
-    <ng-container matColumnDef="deviceName">
-      <th mat-header-cell *matHeaderCellDef>Device Name</th>
-      <td mat-cell *matCellDef="let element">
-        <a class="details-page-link" (click)="deviceDetails(element)">{{ element?.device_name }}</a>
-      </td>
-    </ng-container>
-    <ng-container matColumnDef="deviceGroup">
-      <th mat-header-cell *matHeaderCellDef>Device Group</th>
-      <td mat-cell *matCellDef="let element">{{ element?.device_group }}</td>
-    </ng-container>
-    <ng-container matColumnDef="ip">
-      <th mat-header-cell *matHeaderCellDef>IP Address</th>
-      <td mat-cell *matCellDef="let element">{{ element?.vip }}</td>
-    </ng-container>
-    <ng-container matColumnDef="policy">
-      <th mat-header-cell *matHeaderCellDef>Policy</th>
-      <td mat-cell *matCellDef="let element">{{ element?.policy }}</td>
-    </ng-container>
-    <ng-container matColumnDef="group">
-      <th mat-header-cell *matHeaderCellDef>Group</th>
-      <td mat-cell *matCellDef="let element">{{ element?.group }}</td>
-    </ng-container>
-    <ng-container matColumnDef="realService">
-      <th mat-header-cell *matHeaderCellDef>Real Service</th>
-      <td mat-cell *matCellDef="let element">{{ element?.rs }}</td>
-    </ng-container>
-    <tr mat-header-row *matHeaderRowDef="dataColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: dataColumns;"></tr>
-    <tr class="mat-row table-no-data" *matNoDataRow>
-      <td class="mat-cell" colspan="9">No results found.</td>
-    </tr>
-  </table>
-  <mat-paginator
-    [pageSizeOptions]="[5, 10, 15]"
-    [pageSize]="5"
-    [length]="totalRecords"
-    showFirstLastButtons
-  ></mat-paginator>
-</div>
+<div class="virtual-service-container">
+
+  <!-- Info Alert -->
+  <div class="info-alert">
+    <fa-icon [icon]="['fas', 'circle-info']"></fa-icon>
+    <span>
+      SLB topology display depends on APV version. Required: APV 10.3 (>=10.3.0.48), APV 10.3.1 (>=10.3.1.2), APV 8.6.1
+      (>=8.6.1.146). Please update if needed.
+    </span>
+  </div>
+
+  <!-- Filter -->
+  <mat-form-field appearance="outline" class="filter-field">
+    <mat-label>Filter Services</mat-label>
+    <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Service Name, IP, Protocol" #input>
+    <fa-icon [icon]="['fas', 'search']" matSuffix class="search-icon"></fa-icon>
+  </mat-form-field>
+
+  <div class="table-container">
+    <div class="table-scroll-area">
+      <table mat-table [dataSource]="dataSource" matSort class="modern-table">
+
+        <!-- Serial Column -->
+        <ng-container matColumnDef="serial">
+          <th mat-header-cell *matHeaderCellDef> No. </th>
+          <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial: paginator }} </td>
+        </ng-container>
+
+        <!-- Service Name Column -->
+        <ng-container matColumnDef="serviceName">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Service Name </th>
+          <td mat-cell *matCellDef="let element">
+            <span class="service-name">{{ element?.service_name }}</span>
+          </td>
+        </ng-container>
+
+        <!-- Protocol Column (Type) -->
+        <ng-container matColumnDef="type">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Protocol </th>
+          <td mat-cell *matCellDef="let element">
+            <div class="protocol-chip">{{ element?.protocol }}</div>
+          </td>
+        </ng-container>
+
+        <!-- Device Name Column -->
+        <ng-container matColumnDef="deviceName">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Device Name </th>
+          <td mat-cell *matCellDef="let element">
+            <a class="device-link" (click)="deviceDetails(element)">{{ element?.device_name }}</a>
+          </td>
+        </ng-container>
+
+        <!-- Device Group Column -->
+        <ng-container matColumnDef="deviceGroup">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Device Group </th>
+          <td mat-cell *matCellDef="let element"> {{ element?.device_group || '-' }} </td>
+        </ng-container>
+
+        <!-- IP Address Column -->
+        <ng-container matColumnDef="ip">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> IP Address </th>
+          <td mat-cell *matCellDef="let element"> {{ element?.vip }} </td>
+        </ng-container>
+
+        <!-- Policy Column -->
+        <ng-container matColumnDef="policy">
+          <th mat-header-cell *matHeaderCellDef> Policy </th>
+          <td mat-cell *matCellDef="let element"> {{ element?.policy || '-' }} </td>
+        </ng-container>
+
+        <!-- Group Column -->
+        <ng-container matColumnDef="group">
+          <th mat-header-cell *matHeaderCellDef> Group </th>
+          <td mat-cell *matCellDef="let element"> {{ element?.group || '-' }} </td>
+        </ng-container>
+
+        <!-- Real Service Column -->
+        <ng-container matColumnDef="realService">
+          <th mat-header-cell *matHeaderCellDef> Real Service </th>
+          <td mat-cell *matCellDef="let element" class="wrap-cell"> {{ element?.rs || '-' }} </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="dataColumns; sticky: true"></tr>
+        <tr mat-row *matRowDef="let row; columns: dataColumns;"></tr>
+
+        <!-- No Data Row -->
+        <tr class="mat-row" *matNoDataRow>
+          <td class="mat-cell no-data-cell" colspan="9">
+            @if (input.value) {
+            No services found matching the filter "{{input.value}}"
+            } @else {
+            No services found.
+            }
+          </td>
+        </tr>
+      </table>
+    </div>
+    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" 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/topology-slb-virtual-service/topology-slb-virtual-service.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/topology-slb-virtual-service/topology-slb-virtual-service.scss	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/topology-slb-virtual-service/topology-slb-virtual-service.scss	(working copy)
@@ -0,0 +1,143 @@
+.virtual-service-container {
+    padding: 12px;
+    background-color: #fafafa;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box; // Fix sizing calculation
+    font-family: 'Roboto', sans-serif;
+    display: flex;
+    flex-direction: column;
+
+    // Alert Box
+    .info-alert {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px 16px;
+        background-color: #e3f2fd;
+        border: 1px solid #bbdefb;
+        border-radius: 8px;
+        color: #0d47a1;
+        margin-bottom: 20px;
+        font-size: 13px;
+        line-height: 1.5;
+
+        fa-icon {
+            font-size: 16px;
+        }
+    }
+
+    // Filter Field
+    .filter-field {
+        width: 100%;
+        max-width: 400px;
+        margin-bottom: 8px;
+
+        ::ng-deep .mat-mdc-text-field-wrapper {
+            background-color: white;
+            border-radius: 8px;
+        }
+
+        ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+            display: none; // Hide hint space
+        }
+
+        .search-icon {
+            color: #757575;
+            font-size: 16px;
+            margin-right: 8px;
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    // Table Container
+    .table-container {
+        border-radius: 8px;
+        overflow: hidden; // Parent handles border/radius
+        border: 1px solid #e0e0e0;
+        background: white;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+
+        .table-scroll-area {
+            flex: 1;
+            overflow: auto;
+            width: 100%;
+        }
+
+        .modern-table {
+            width: 100%;
+
+            th.mat-mdc-header-cell {
+                background-color: #f5f5f5;
+                color: #424242;
+                font-weight: 600;
+                font-size: 13px;
+                padding: 0 16px;
+                border-bottom: 1px solid #e0e0e0;
+                // Removed border-radius here as it's handled by container
+            }
+
+            td.mat-mdc-cell {
+                padding: 12px 16px;
+                font-size: 13px;
+                color: #333;
+                border-bottom: 1px solid #f0f0f0;
+
+                &.no-data-cell {
+                    text-align: center;
+                    padding: 48px;
+                    color: #757575;
+                    background-color: white;
+                }
+            }
+
+            tr.mat-mdc-row:hover {
+                background-color: #f9f9f9;
+            }
+
+            // Specific Column Styles
+            .service-name {
+                font-weight: 500;
+                color: #1976d2;
+            }
+
+            .device-link {
+                color: #1976d2;
+                text-decoration: none;
+                cursor: pointer;
+                font-weight: 500;
+
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+
+            .protocol-chip {
+                display: inline-block;
+                padding: 2px 8px;
+                border-radius: 12px;
+                background-color: #e0e0e0;
+                color: #424242;
+                font-size: 11px;
+                font-weight: 500;
+                text-transform: uppercase;
+                letter-spacing: 0.5px;
+            }
+
+            .wrap-cell {
+                max-width: 200px;
+                white-space: normal;
+                word-wrap: break-word;
+                line-height: 1.4;
+            }
+        }
+    }
+
+    mat-paginator {
+        background: transparent;
+        border-top: 1px solid #e0e0e0;
+    }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/topology-slb-virtual-service/topology-slb-virtual-service.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/topology-slb-virtual-service/topology-slb-virtual-service.ts	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/topology-slb-virtual-service/topology-slb-virtual-service.ts	(working copy)
@@ -1,12 +1,13 @@
-import {ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
-import {MatPaginator} from '@angular/material/paginator';
-import {DeviceService} from '../../../services/device-service';
-import {NotificationService} from '../../../services/notification';
-import {Router} from '@angular/router';
-import {take} from 'rxjs/operators';
-import {SharedModule} from '../../../shared/shared-module';
-import {GlobalSerialPipe} from '../../../pipes/global-serial-pipe';
+import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatSort } from '@angular/material/sort';
+import { MatPaginator } from '@angular/material/paginator';
+import { DeviceService } from '../../../services/device-service';
+import { NotificationService } from '../../../services/notification';
+import { Router } from '@angular/router';
+import { take } from 'rxjs/operators';
+import { SharedModule } from '../../../shared/shared-module';
+import { GlobalSerialPipe } from '../../../pipes/global-serial-pipe';
 
 @Component({
   selector: 'app-topology-slb-virtual-service',
@@ -22,7 +23,9 @@
   totalRecords: number = 0;
   dataSource: MatTableDataSource<any> = new MatTableDataSource();
   dataColumns: string[] = ['serial', 'serviceName', 'type', 'deviceName', 'deviceGroup', 'ip', 'policy', 'group', 'realService'];
+
   @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
 
   constructor(
     private _device: DeviceService,
@@ -30,7 +33,6 @@
     private _cdRef: ChangeDetectorRef,
     private _router: Router,
   ) {
-    this.dataSource.paginator = this.paginator;
   }
 
   ngOnInit() {
@@ -43,6 +45,15 @@
   groups: any = [];
   deviceServices: any = [];
 
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
   getDeviceGroups() {
     this.devices = [];
     this.groups = [];
@@ -116,6 +127,7 @@
           }
           this.dataSource.data = this.deviceServices;
           this.dataSource.paginator = this.paginator;
+          this.dataSource.sort = this.sort;
           this.totalRecords = this.dataSource.data.length;
         },
         error: (error: any) => {
@@ -128,10 +140,4 @@
   deviceDetails(device: any) {
     this._router.navigate(['/inventory/devices'], {});
   }
-
-  // serviceDetails(device: any) {
-  //   this._router.navigate(['/inventory/devices', device.name], {
-  //     state: {deviceData: device, groups: this.groups}
-  //   });
-  // }
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-acl-resources/vpn-acl-resources.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-acl-resources/vpn-acl-resources.html	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-acl-resources/vpn-acl-resources.html	(working copy)
@@ -1,38 +1,60 @@
-<mat-card class="page-card-1" appearance="filled">
-  <mat-card-header>
-    <div>
-      <button mat-raised-button (click)="addACLResource()">Add</button>
+<div class="vpn-container">
+  <div class="table-toolbar">
+    <div class="filter-field">
+      <mat-form-field appearance="outline" class="filter-field">
+        <mat-label>Filter ACL Resources</mat-label>
+        <input matInput (keyup)="applyFilter($event)" placeholder="Search..." #input>
+        <fa-icon [icon]="['fas', 'search']" matSuffix class="search-icon"></fa-icon>
+      </mat-form-field>
     </div>
-  </mat-card-header>
-</mat-card>
-<div class="table-container">
-  <table mat-table [dataSource]="dataSource" class="mat-elevation-z1">
-    <ng-container matColumnDef="serial">
-      <th mat-header-cell *matHeaderCellDef> No.</th>
-      <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial }}</td>
-    </ng-container>
-    <ng-container matColumnDef="resource">
-      <th mat-header-cell *matHeaderCellDef> Resource</th>
-      <td mat-cell *matCellDef="let element">{{ element?.resource }}</td>
-    </ng-container>
-    <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> Action</th>
-      <td mat-cell *matCellDef="let element">
-        <div class="row-action a-link">
-          <fa-icon [icon]="['far', 'trash-can']" size="lg" class="delete-icon" matTooltip="Delete"
-                   (click)="deleteResource(element)"></fa-icon>
-        </div>
-      </td>
-    </ng-container>
-    <tr mat-header-row *matHeaderRowDef="tableColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
-    <tr class="mat-row table-no-data" *matNoDataRow>
-      <td class="mat-cell" colspan="10">No results found.</td>
-    </tr>
-  </table>
-  <mat-paginator
-    [pageSizeOptions]="[10, 15, 20, 25]"
-    [length]="totalRecords"
-    showFirstLastButtons
-  ></mat-paginator>
-</div>
+    <div class="action-buttons">
+      <button mat-raised-button (click)="addACLResource()">
+        <fa-icon [icon]="['fas', 'plus']"></fa-icon> Add Resource
+      </button>
+    </div>
+  </div>
+
+  <div class="table-container">
+    <div class="table-scroll-area">
+      <table mat-table [dataSource]="dataSource" matSort class="modern-table">
+        <!-- Serial No Column -->
+        <ng-container matColumnDef="serial">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> No.</th>
+          <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial:paginator }}</td>
+        </ng-container>
+
+        <!-- Resource Column -->
+        <ng-container matColumnDef="resource">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Resource</th>
+          <td mat-cell *matCellDef="let element">{{ element?.resource }}</td>
+        </ng-container>
+        <!-- Action Column -->
+        <ng-container matColumnDef="action">
+          <th mat-header-cell *matHeaderCellDef> Action</th>
+          <td mat-cell *matCellDef="let element">
+            <div class="row-action">
+              @if (element.editable) {
+              <fa-icon [icon]="['far', 'trash-can']" size="lg" class="delete-icon" matTooltip="Delete"
+                (click)="deleteResource(element)"></fa-icon>
+              } @else {
+              <fa-icon [icon]="['far', 'trash-can']" size="lg" class="disabled" matTooltip="Cannot delete"></fa-icon>
+              }
+            </div>
+          </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="tableColumns; sticky: true"></tr>
+        <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
+        <tr class="mat-row table-no-data" *matNoDataRow>
+          <td class="mat-cell no-data-cell" colspan="10">
+            @if (input.value) {
+            No results found for "{{input.value}}"
+            } @else {
+            No results found.
+            }
+          </td>
+        </tr>
+      </table>
+    </div>
+    <mat-paginator [pageSizeOptions]="[10, 15, 20, 25]" [length]="totalRecords" 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/vpn-acl-resources/vpn-acl-resources.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-acl-resources/vpn-acl-resources.scss	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-acl-resources/vpn-acl-resources.scss	(working copy)
@@ -0,0 +1,197 @@
+:host {
+    display: block;
+    height: 100%;
+}
+
+.vpn-container {
+    padding: 12px;
+    background-color: #fafafa;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    // Header Toolbar (Filter + Actions)
+    .table-toolbar {
+        display: flex;
+        justify-content: flex-end; // Align filter to right
+        align-items: center;
+        margin-bottom: 0;
+        gap: 16px;
+
+        .filter-field {
+            width: 100%;
+            max-width: 400px;
+            margin-bottom: 0;
+
+            ::ng-deep .mat-mdc-text-field-wrapper {
+                background-color: white;
+                border-radius: 8px;
+                height: 40px !important;
+                padding: 0 12px !important;
+                display: flex;
+                align-items: center;
+            }
+
+            ::ng-deep .mat-mdc-form-field-infix {
+                padding: 0 !important;
+                min-height: 40px !important;
+                height: 40px !important;
+                display: flex;
+                align-items: center;
+            }
+
+            ::ng-deep .mat-mdc-input-element {
+                margin-top: 0;
+                position: relative;
+                top: -2px; // Slight adjustment for vertical centering
+            }
+
+            ::ng-deep .mat-mdc-floating-label {
+                top: 50% !important;
+                transform: translateY(-50%) !important;
+            }
+
+            // Hide subscript wrapper
+            ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+                display: none;
+            }
+
+            .search-icon {
+                color: #757575;
+                font-size: 16px;
+                margin-right: 8px;
+            }
+        }
+
+        .action-buttons {
+            display: flex;
+            gap: 12px;
+
+            button {
+                height: 40px; // Match filter height
+                border-radius: 8px;
+                background-color: #1976d2;
+                color: white;
+                font-weight: 500;
+                padding: 0 16px;
+                border: none;
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                cursor: pointer;
+                transition: background-color 0.2s;
+
+                &:hover {
+                    background-color: #1565c0;
+                }
+
+                fa-icon {
+                    font-size: 14px;
+                }
+            }
+        }
+    }
+
+    // Table Container
+    .table-container {
+        border-radius: 8px;
+        overflow: hidden;
+        border: 1px solid #e0e0e0;
+        background: white;
+        flex: 0 1 auto; // Shrink to fit content
+        display: flex;
+        flex-direction: column;
+        max-height: 100%; // Don't overflow parent
+
+        .table-scroll-area {
+            flex: 0 1 auto; // Allow shrink and auto height, don't force fill
+            overflow: auto;
+            width: 100%;
+            position: relative; // Establish context for sticky headers
+        }
+
+        .modern-table {
+            width: 100%;
+            border-collapse: collapse;
+
+            th.mat-mdc-header-cell {
+                background-color: #f5f5f5;
+                color: #424242;
+                font-weight: 600;
+                font-size: 13px;
+                padding: 0 16px;
+                border-bottom: 1px solid #e0e0e0;
+                z-index: 10;
+            }
+
+            td.mat-mdc-cell {
+                padding: 12px 16px;
+                font-size: 13px;
+                color: #333;
+                border-bottom: 1px solid #f0f0f0;
+
+                &.no-data-cell {
+                    text-align: center;
+                    padding: 48px;
+                    color: #757575;
+                    background-color: white;
+                }
+            }
+
+            tr.mat-mdc-row:hover {
+                background-color: #f9f9f9;
+            }
+
+            .row-action {
+                display: flex;
+                align-items: center;
+                gap: 12px;
+                cursor: pointer;
+
+                fa-icon {
+                    color: #1976d2;
+                    transition: color 0.2s;
+
+                    &:hover {
+                        color: #1565c0;
+                    }
+
+                    &.delete-icon {
+                        color: #c62828;
+
+                        &:hover {
+                            color: #b71c1c;
+                        }
+                    }
+
+                    &.success-icon {
+                        color: #2e7d32;
+
+                        &:hover {
+                            color: #1b5e20;
+                        }
+                    }
+
+                    &.disabled {
+                        color: #bdbdbd;
+                        cursor: not-allowed;
+
+                        &:hover {
+                            color: #bdbdbd;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    mat-paginator {
+        background: transparent;
+        border-top: 1px solid #e0e0e0;
+        flex-shrink: 0;
+    }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-acl-resources/vpn-acl-resources.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-acl-resources/vpn-acl-resources.ts	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-acl-resources/vpn-acl-resources.ts	(working copy)
@@ -1,16 +1,17 @@
-import {ChangeDetectorRef, Component, inject, OnInit, ViewChild} from '@angular/core';
-import {MatTableDataSource} from "@angular/material/table";
-import {SharedModule} from '../../../shared/shared-module';
-import {take} from 'rxjs/operators';
-import {VpnService} from '../../../services/vpn-service';
-import {ActivatedRoute} from '@angular/router';
-import {MatPaginator} from '@angular/material/paginator';
-import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog';
-import {NotificationService} from '../../../services/notification';
-import {Confirmation} from '../../../services/confirmation';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {CustomValidators} from '../../../utils/custom-validators';
-import {GlobalSerialPipe} from '../../../pipes/global-serial-pipe';
+import { ChangeDetectorRef, Component, inject, OnInit, ViewChild } from '@angular/core';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from "@angular/material/table";
+import { SharedModule } from '../../../shared/shared-module';
+import { take } from 'rxjs/operators';
+import { VpnService } from '../../../services/vpn-service';
+import { ActivatedRoute } from '@angular/router';
+import { MatPaginator } from '@angular/material/paginator';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
+import { NotificationService } from '../../../services/notification';
+import { Confirmation } from '../../../services/confirmation';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { CustomValidators } from '../../../utils/custom-validators';
+import { GlobalSerialPipe } from '../../../pipes/global-serial-pipe';
 
 @Component({
   selector: 'app-vpn-acl-resources',
@@ -28,8 +29,10 @@
   groupName: string = '';
   totalRecords: number = 0;
   tableColumns: string[] = ['serial', 'resource', 'action'];
+
   dataSource: MatTableDataSource<any> = new MatTableDataSource();
   @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
   dialog = inject(MatDialog);
   dialogConfig = new MatDialogConfig();
 
@@ -46,12 +49,22 @@
   }
 
   ngOnInit() {
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
     setTimeout(() => {
-      this.dataSource.paginator = this.paginator;
       this.getACLResources()
     })
   }
 
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
   getACLResources(): void {
     let payload: any = {
       cmd: `show acl resource ${this.groupName}`,
@@ -60,32 +73,33 @@
     this.dataSource.data = [];
     this._vpn.executeAGCLICommand(this.deviceName, payload)
       .pipe(take(1)).subscribe({
-      next: (result: any) => {
-        if (result && result.contents && result.contents.length > 0) {
-          result.contents.forEach((item: any) => {
-            if (item?.cmdid === 'acl resource') {
-              this.dataSource.data.push({
-                resource: item?.resource,
-                editable: true,
-              })
-            }
-            if (item?.cmdid === '##acl resource') {
-              this.dataSource.data.push({
-                resource: item?.resource,
-                editable: false,
-              })
-            }
-          })
+        next: (result: any) => {
+          if (result && result.contents && result.contents.length > 0) {
+            result.contents.forEach((item: any) => {
+              if (item?.cmdid === 'acl resource') {
+                this.dataSource.data.push({
+                  resource: item?.resource,
+                  editable: true,
+                })
+              }
+              if (item?.cmdid === '##acl resource') {
+                this.dataSource.data.push({
+                  resource: item?.resource,
+                  editable: false,
+                })
+              }
+            })
+          }
+          this.dataSource.paginator = this.paginator;
+          this.dataSource.sort = this.sort;
+          this.totalRecords = this.dataSource.data.length;
+          this._cdRef.detectChanges();
+        },
+        error: (error: any) => {
+          this._notification.showError(`Error: ${error?.message}`);
+          this._cdRef.detectChanges();
         }
-        this.dataSource.paginator = this.paginator;
-        this.totalRecords = this.dataSource.data.length;
-        this._cdRef.detectChanges();
-      },
-      error: (error: any) => {
-        this._notification.showError(`Error: ${error?.message}`);
-        this._cdRef.detectChanges();
-      }
-    });
+      });
   }
 
   addACLResource() {
@@ -120,18 +134,18 @@
         }
         this._vpn.executeAGCLICommand(this.deviceName, payload)
           .pipe(take(1)).subscribe({
-          next: (result: any) => {
-            if (result && result.contents === '') {
-              this._notification.showSuccess(`The ACL Resource has been deleted successfully.`);
-              this.getACLResources();
+            next: (result: any) => {
+              if (result && result.contents === '') {
+                this._notification.showSuccess(`The ACL Resource has been deleted successfully.`);
+                this.getACLResources();
+              }
+              this._cdRef.detectChanges();
+            },
+            error: (error: any) => {
+              this._notification.showError(`Error: ${error?.message}`);
+              this._cdRef.detectChanges();
             }
-            this._cdRef.detectChanges();
-          },
-          error: (error: any) => {
-            this._notification.showError(`Error: ${error?.message}`);
-            this._cdRef.detectChanges();
-          }
-        });
+          });
       }
     });
   }
@@ -174,18 +188,18 @@
     }
     this._vpn.executeAGCLICommand(this.data?.deviceName, payload)
       .pipe(take(1)).subscribe({
-      next: (result: any) => {
-        if (result && result.contents === '') {
-          this._notification.showSuccess(`The ACL Resource has been created successfully.`);
-          this.dialogRef.close(true);
+        next: (result: any) => {
+          if (result && result.contents === '') {
+            this._notification.showSuccess(`The ACL Resource has been created successfully.`);
+            this.dialogRef.close(true);
+          }
+          this._cdRef.detectChanges();
+        },
+        error: (error: any) => {
+          this._notification.showError(`Error: ${error?.message}`);
+          this._cdRef.detectChanges();
         }
-        this._cdRef.detectChanges();
-      },
-      error: (error: any) => {
-        this._notification.showError(`Error: ${error?.message}`);
-        this._cdRef.detectChanges();
-      }
-    });
+      });
   }
 
   onCancel() {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-acl-rules/vpn-acl-rules.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-acl-rules/vpn-acl-rules.html	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-acl-rules/vpn-acl-rules.html	(working copy)
@@ -1,50 +1,81 @@
-<mat-card class="page-card-1" appearance="filled">
-  <mat-card-header>
-    <div>
-      <button mat-raised-button (click)="addACLRule()">Add</button>
+<content>
+  <div class="vpn-container">
+    <div class="table-toolbar">
+      <div class="filter-field">
+        <mat-form-field appearance="outline" class="filter-field">
+          <mat-label>Filter ACL Rules</mat-label>
+          <input matInput (keyup)="applyFilter($event)" placeholder="Search..." #input>
+          <fa-icon [icon]="['fas', 'search']" matSuffix class="search-icon"></fa-icon>
+        </mat-form-field>
+      </div>
+      <div class="action-buttons">
+        <button mat-raised-button (click)="addACLRule()">
+          <fa-icon [icon]="['fas', 'plus']"></fa-icon> Add Rule
+        </button>
+      </div>
     </div>
-  </mat-card-header>
-</mat-card>
-<div class="table-container">
-  <table mat-table [dataSource]="dataSource" class="mat-elevation-z1">
-    <ng-container matColumnDef="serial">
-      <th mat-header-cell *matHeaderCellDef> No.</th>
-      <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial }}</td>
-    </ng-container>
-    <ng-container matColumnDef="type">
-      <th mat-header-cell *matHeaderCellDef> Target Type</th>
-      <td mat-cell *matCellDef="let element">{{ element?.target_type }}</td>
-    </ng-container>
-    <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> Target Name</th>
-      <td mat-cell *matCellDef="let element">{{ element?.target_name }}</td>
-    </ng-container>
-    <ng-container matColumnDef="raction">
-      <th mat-header-cell *matHeaderCellDef> Rule Action</th>
-      <td mat-cell *matCellDef="let element">{{ element?.action }}</td>
-    </ng-container>
-    <ng-container matColumnDef="priority">
-      <th mat-header-cell *matHeaderCellDef> Priority</th>
-      <td mat-cell *matCellDef="let element">{{ element?.priority }}</td>
-    </ng-container>
-    <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> Action</th>
-      <td mat-cell *matCellDef="let element">
-        <div class="row-action a-link">
-          <fa-icon [icon]="['far', 'trash-can']" size="lg" class="delete-icon" matTooltip="Delete"
-                   (click)="deleteACLRule(element)"></fa-icon>
-        </div>
-      </td>
-    </ng-container>
-    <tr mat-header-row *matHeaderRowDef="tableColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
-    <tr class="mat-row table-no-data" *matNoDataRow>
-      <td class="mat-cell" colspan="10">No results found.</td>
-    </tr>
-  </table>
-  <mat-paginator
-    [pageSizeOptions]="[10, 15, 20, 25]"
-    [length]="totalRecords"
-    showFirstLastButtons
-  ></mat-paginator>
-</div>
+
+    <div class="table-container">
+      <div class="table-scroll-area">
+        <table mat-table [dataSource]="dataSource" matSort class="modern-table">
+          <!-- Serial No Column -->
+          <ng-container matColumnDef="serial">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> No.</th>
+            <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial:paginator }}</td>
+          </ng-container>
+
+          <!-- Name Column -->
+          <ng-container matColumnDef="name">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Name</th>
+            <td mat-cell *matCellDef="let element">{{ element?.target_name }}</td>
+          </ng-container>
+
+          <!-- Type Column -->
+          <ng-container matColumnDef="type">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Type</th>
+            <td mat-cell *matCellDef="let element">{{ element?.target_type }}</td>
+          </ng-container>
+
+          <!-- Action Column (Rule Action) -->
+          <ng-container matColumnDef="raction">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Action</th>
+            <td mat-cell *matCellDef="let element">{{ element?.action }}</td>
+          </ng-container>
+
+          <!-- Priority Column -->
+          <ng-container matColumnDef="priority">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Priority</th>
+            <td mat-cell *matCellDef="let element">{{ element?.priority }}</td>
+          </ng-container>
+
+          <!-- Action Column (Table Actions) -->
+          <ng-container matColumnDef="action">
+            <th mat-header-cell *matHeaderCellDef> Action</th>
+            <td mat-cell *matCellDef="let element">
+              <div class="row-action">
+                @if (element.editable) {
+                <fa-icon [icon]="['far', 'trash-can']" size="lg" class="delete-icon" matTooltip="Delete"
+                  (click)="deleteACLRule(element)"></fa-icon>
+                } @else {
+                <fa-icon [icon]="['far', 'trash-can']" size="lg" class="disabled" matTooltip="Cannot delete"></fa-icon>
+                }
+              </div>
+            </td>
+          </ng-container>
+          <tr mat-header-row *matHeaderRowDef="tableColumns; sticky: true"></tr>
+          <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
+          <tr class="mat-row table-no-data" *matNoDataRow>
+            <td class="mat-cell no-data-cell" colspan="10">
+              @if (input.value) {
+              No results found for "{{input.value}}"
+              } @else {
+              No results found.
+              }
+            </td>
+          </tr>
+        </table>
+      </div>
+      <mat-paginator [pageSizeOptions]="[10, 15, 20, 25]" [length]="totalRecords" showFirstLastButtons></mat-paginator>
+    </div>
+  </div>
+</content>
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-acl-rules/vpn-acl-rules.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-acl-rules/vpn-acl-rules.scss	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-acl-rules/vpn-acl-rules.scss	(working copy)
@@ -0,0 +1,197 @@
+:host {
+    display: block;
+    height: 100%;
+}
+
+.vpn-container {
+    padding: 12px;
+    background-color: #fafafa;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    // Header Toolbar (Filter + Actions)
+    .table-toolbar {
+        display: flex;
+        justify-content: flex-end; // Align filter to right
+        align-items: center;
+        margin-bottom: 0;
+        gap: 16px;
+
+        .filter-field {
+            width: 100%;
+            max-width: 400px;
+            margin-bottom: 0;
+
+            ::ng-deep .mat-mdc-text-field-wrapper {
+                background-color: white;
+                border-radius: 8px;
+                height: 40px !important;
+                padding: 0 12px !important;
+                display: flex;
+                align-items: center;
+            }
+
+            ::ng-deep .mat-mdc-form-field-infix {
+                padding: 0 !important;
+                min-height: 40px !important;
+                height: 40px !important;
+                display: flex;
+                align-items: center;
+            }
+
+            ::ng-deep .mat-mdc-input-element {
+                margin-top: 0;
+                position: relative;
+                top: -2px; // Slight adjustment for vertical centering
+            }
+
+            ::ng-deep .mat-mdc-floating-label {
+                top: 50% !important;
+                transform: translateY(-50%) !important;
+            }
+
+            // Hide subscript wrapper
+            ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+                display: none;
+            }
+
+            .search-icon {
+                color: #757575;
+                font-size: 16px;
+                margin-right: 8px;
+            }
+        }
+
+        .action-buttons {
+            display: flex;
+            gap: 12px;
+
+            button {
+                height: 40px; // Match filter height
+                border-radius: 8px;
+                background-color: #1976d2;
+                color: white;
+                font-weight: 500;
+                padding: 0 16px;
+                border: none;
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                cursor: pointer;
+                transition: background-color 0.2s;
+
+                &:hover {
+                    background-color: #1565c0;
+                }
+
+                fa-icon {
+                    font-size: 14px;
+                }
+            }
+        }
+    }
+
+    // Table Container
+    .table-container {
+        border-radius: 8px;
+        overflow: hidden;
+        border: 1px solid #e0e0e0;
+        background: white;
+        flex: 0 1 auto; // Shrink to fit content
+        display: flex;
+        flex-direction: column;
+        max-height: 100%; // Don't overflow parent
+
+        .table-scroll-area {
+            flex: 0 1 auto; // Allow shrink and auto height, don't force fill
+            overflow: auto;
+            width: 100%;
+            position: relative; // Establish context for sticky headers
+        }
+
+        .modern-table {
+            width: 100%;
+            border-collapse: collapse;
+
+            th.mat-mdc-header-cell {
+                background-color: #f5f5f5;
+                color: #424242;
+                font-weight: 600;
+                font-size: 13px;
+                padding: 0 16px;
+                border-bottom: 1px solid #e0e0e0;
+                z-index: 10;
+            }
+
+            td.mat-mdc-cell {
+                padding: 12px 16px;
+                font-size: 13px;
+                color: #333;
+                border-bottom: 1px solid #f0f0f0;
+
+                &.no-data-cell {
+                    text-align: center;
+                    padding: 48px;
+                    color: #757575;
+                    background-color: white;
+                }
+            }
+
+            tr.mat-mdc-row:hover {
+                background-color: #f9f9f9;
+            }
+
+            .row-action {
+                display: flex;
+                align-items: center;
+                gap: 12px;
+                cursor: pointer;
+
+                fa-icon {
+                    color: #1976d2;
+                    transition: color 0.2s;
+
+                    &:hover {
+                        color: #1565c0;
+                    }
+
+                    &.delete-icon {
+                        color: #c62828;
+
+                        &:hover {
+                            color: #b71c1c;
+                        }
+                    }
+
+                    &.success-icon {
+                        color: #2e7d32;
+
+                        &:hover {
+                            color: #1b5e20;
+                        }
+                    }
+
+                    &.disabled {
+                        color: #bdbdbd;
+                        cursor: not-allowed;
+
+                        &:hover {
+                            color: #bdbdbd;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    mat-paginator {
+        background: transparent;
+        border-top: 1px solid #e0e0e0;
+        flex-shrink: 0;
+    }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-acl-rules/vpn-acl-rules.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-acl-rules/vpn-acl-rules.ts	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-acl-rules/vpn-acl-rules.ts	(working copy)
@@ -1,15 +1,16 @@
-import {ChangeDetectorRef, Component, inject, OnInit, ViewChild} from '@angular/core';
-import {MatTableDataSource} from "@angular/material/table";
-import {MatPaginator} from '@angular/material/paginator';
-import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog';
-import {ActivatedRoute} from '@angular/router';
-import {VpnService} from '../../../services/vpn-service';
-import {NotificationService} from '../../../services/notification';
-import {SharedModule} from '../../../shared/shared-module';
-import {take} from 'rxjs/operators';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {Confirmation} from '../../../services/confirmation';
-import {GlobalSerialPipe} from '../../../pipes/global-serial-pipe';
+import { ChangeDetectorRef, Component, inject, OnInit, ViewChild } from '@angular/core';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from "@angular/material/table";
+import { MatPaginator } from '@angular/material/paginator';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
+import { ActivatedRoute } from '@angular/router';
+import { VpnService } from '../../../services/vpn-service';
+import { NotificationService } from '../../../services/notification';
+import { SharedModule } from '../../../shared/shared-module';
+import { take } from 'rxjs/operators';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Confirmation } from '../../../services/confirmation';
+import { GlobalSerialPipe } from '../../../pipes/global-serial-pipe';
 
 @Component({
   selector: 'app-vpn-acl-rules',
@@ -27,8 +28,10 @@
   groupName: string = '';
   totalRecords: number = 0;
   tableColumns: string[] = ['serial', 'name', 'type', 'raction', 'priority', 'action'];
+
   dataSource: MatTableDataSource<any> = new MatTableDataSource();
   @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
   dialog = inject(MatDialog);
   dialogConfig = new MatDialogConfig();
 
@@ -45,12 +48,22 @@
   }
 
   ngOnInit() {
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
     setTimeout(() => {
-      this.dataSource.paginator = this.paginator;
       this.getACLRules()
     })
   }
 
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
   getACLRules() {
     let payload: any = {
       cmd: `show acl rule "" ${this.groupName}`,
@@ -59,38 +72,39 @@
     this.dataSource.data = [];
     this._vpn.executeAGCLICommand(this.deviceName, payload)
       .pipe(take(1)).subscribe({
-      next: (result: any) => {
-        if (result && result.contents && result.contents.length > 0) {
-          result.contents.forEach((item: any) => {
-            if (item?.cmdid === 'acl rule') {
-              this.dataSource.data.push({
-                target_name: item?.target_name,
-                target_type: item?.target_type,
-                priority: item?.priority,
-                action: item?.action,
-                editable: true
-              })
-            }
-            if (item?.cmdid === '##acl rule') {
-              this.dataSource.data.push({
-                target_name: item?.target_name,
-                target_type: item?.target_type,
-                priority: item?.priority,
-                action: item?.action,
-                'editable': true
-              })
-            }
-          })
+        next: (result: any) => {
+          if (result && result.contents && result.contents.length > 0) {
+            result.contents.forEach((item: any) => {
+              if (item?.cmdid === 'acl rule') {
+                this.dataSource.data.push({
+                  target_name: item?.target_name,
+                  target_type: item?.target_type,
+                  priority: item?.priority,
+                  action: item?.action,
+                  editable: true
+                })
+              }
+              if (item?.cmdid === '##acl rule') {
+                this.dataSource.data.push({
+                  target_name: item?.target_name,
+                  target_type: item?.target_type,
+                  priority: item?.priority,
+                  action: item?.action,
+                  'editable': true
+                })
+              }
+            })
+          }
+          this.dataSource.paginator = this.paginator;
+          this.dataSource.sort = this.sort;
+          this.totalRecords = this.dataSource.data.length;
+          this._cdRef.detectChanges();
+        },
+        error: (error: any) => {
+          this._notification.showError(`Error: ${error?.message}`);
+          this._cdRef.detectChanges();
         }
-        this.dataSource.paginator = this.paginator;
-        this.totalRecords = this.dataSource.data.length;
-        this._cdRef.detectChanges();
-      },
-      error: (error: any) => {
-        this._notification.showError(`Error: ${error?.message}`);
-        this._cdRef.detectChanges();
-      }
-    });
+      });
   }
 
   addACLRule() {
@@ -125,18 +139,18 @@
         }
         this._vpn.executeAGCLICommand(this.deviceName, payload)
           .pipe(take(1)).subscribe({
-          next: (result: any) => {
-            if (result && result.contents === '') {
-              this._notification.showSuccess(`The ACL Rule has been deleted successfully.`);
-              this.getACLRules();
+            next: (result: any) => {
+              if (result && result.contents === '') {
+                this._notification.showSuccess(`The ACL Rule has been deleted successfully.`);
+                this.getACLRules();
+              }
+              this._cdRef.detectChanges();
+            },
+            error: (error: any) => {
+              this._notification.showError(`Error: ${error?.message}`);
+              this._cdRef.detectChanges();
             }
-            this._cdRef.detectChanges();
-          },
-          error: (error: any) => {
-            this._notification.showError(`Error: ${error?.message}`);
-            this._cdRef.detectChanges();
-          }
-        });
+          });
       }
     });
   }
@@ -155,14 +169,14 @@
   configForm!: FormGroup;
 
   targetTypes: any = [
-    {value: 'R', label: 'Role'},
-    {value: 'U', label: 'User'},
-    {value: 'G', label: 'Group'},
+    { value: 'R', label: 'Role' },
+    { value: 'U', label: 'User' },
+    { value: 'G', label: 'Group' },
   ];
 
   actions: any = [
-    {value: 'PERMIT', label: 'PERMIT'},
-    {value: 'DENY', label: 'DENY'},
+    { value: 'PERMIT', label: 'PERMIT' },
+    { value: 'DENY', label: 'DENY' },
   ]
 
   constructor(
@@ -195,18 +209,18 @@
     }
     this._vpn.executeAGCLICommand(this.data?.deviceName, payload)
       .pipe(take(1)).subscribe({
-      next: (result: any) => {
-        if (result && result.contents === '') {
-          this._notification.showSuccess(`The ACL Rule has been created successfully.`);
-          this.dialogRef.close(true);
+        next: (result: any) => {
+          if (result && result.contents === '') {
+            this._notification.showSuccess(`The ACL Rule has been created successfully.`);
+            this.dialogRef.close(true);
+          }
+          this._cdRef.detectChanges();
+        },
+        error: (error: any) => {
+          this._notification.showError(`Error: ${error?.message}`);
+          this._cdRef.detectChanges();
         }
-        this._cdRef.detectChanges();
-      },
-      error: (error: any) => {
-        this._notification.showError(`Error: ${error?.message}`);
-        this._cdRef.detectChanges();
-      }
-    });
+      });
   }
 
   onCancel(): void {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-hardware-id/vpn-hardware-id.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-hardware-id/vpn-hardware-id.html	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-hardware-id/vpn-hardware-id.html	(working copy)
@@ -1,66 +1,80 @@
-<mat-card class="page-card-1" appearance="filled">
-  <mat-card-header>
-    <div>
-      <button mat-raised-button (click)="addHardwareId()">Add</button>
+<div class="vpn-container">
+  <div class="table-toolbar">
+    <div class="filter-field">
+      <mat-form-field appearance="outline" class="filter-field">
+        <mat-label>Filter Hardware IDs</mat-label>
+        <input matInput (keyup)="applyFilter($event)" placeholder="Search..." #input>
+        <fa-icon [icon]="['fas', 'search']" matSuffix class="search-icon"></fa-icon>
+      </mat-form-field>
     </div>
-  </mat-card-header>
-</mat-card>
-<div class="table-container">
-  <table mat-table [dataSource]="dataSource" class="mat-elevation-z1">
-    <ng-container matColumnDef="serial">
-      <th mat-header-cell *matHeaderCellDef> No.</th>
-      <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial }}</td>
-    </ng-container>
-    <ng-container matColumnDef="category">
-      <th mat-header-cell *matHeaderCellDef> Category</th>
-      <td mat-cell *matCellDef="let element">{{ element?.category }}</td>
-    </ng-container>
-    <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> Name</th>
-      <td mat-cell *matCellDef="let element">{{ element?.name }}</td>
-    </ng-container>
-    <ng-container matColumnDef="hardwareId">
-      <th mat-header-cell *matHeaderCellDef> Hardware Id</th>
-      <td mat-cell *matCellDef="let element"> {{ element?.hardware_id }}</td>
-    </ng-container>
-    <ng-container matColumnDef="status">
-      <th mat-header-cell *matHeaderCellDef> Status</th>
-      <td mat-cell *matCellDef="let element">
-        {{ element?.status === 'approve' ? 'Approved' : element?.status === 'deny' ? 'Denied' : 'Pending' }}
-      </td>
-    </ng-container>
-    <ng-container matColumnDef="hostname">
-      <th mat-header-cell *matHeaderCellDef> Hostname</th>
-      <td mat-cell *matCellDef="let element"> {{ element?.host_name }}</td>
-    </ng-container>
-    <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> Action</th>
-      <td mat-cell *matCellDef="let element">
-        <div class="row-action a-link">
-          @if (element.status === 'approve' || element.status === 'pending') {
-            <fa-icon [icon]="['far', 'xmark-circle']" class="delete-icon" (click)="denyHardwareId(element)"
-                     matTooltip="Deny"></fa-icon>&nbsp;&nbsp;
-          }
-          @if (element.status === 'deny' || element.status === 'pending') {
-            <fa-icon [icon]="['far', 'check-circle']" class="success-icon" (click)="approveHardwareId(element)"
-                     matTooltip="Approve"></fa-icon>&nbsp;&nbsp;
-          }
-          <fa-icon [icon]="['fas', 'gears']" size="lg" matTooltip="Sync"
-                   (click)="syncHardwareId(element)"></fa-icon> &nbsp;&nbsp;
-          <fa-icon [icon]="['far', 'trash-can']" size="lg" class="delete-icon" matTooltip="Delete"
-                   (click)="deleteHardwareId(element)"></fa-icon>
-        </div>
-      </td>
-    </ng-container>
-    <tr mat-header-row *matHeaderRowDef="tableColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
-    <tr class="mat-row table-no-data" *matNoDataRow>
-      <td class="mat-cell" colspan="10">No results found.</td>
-    </tr>
-  </table>
-  <mat-paginator
-    [pageSizeOptions]="[10, 15, 20, 25]"
-    [length]="totalRecords"
-    showFirstLastButtons
-  ></mat-paginator>
-</div>
+    <div class="action-buttons">
+      <button mat-raised-button (click)="addHardwareId()">
+        <fa-icon [icon]="['fas', 'plus']"></fa-icon> Add Hardware ID
+      </button>
+    </div>
+  </div>
+
+  <div class="table-container">
+    <div class="table-scroll-area">
+      <table mat-table [dataSource]="dataSource" matSort class="modern-table">
+        <ng-container matColumnDef="serial">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> No.</th>
+          <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial:paginator }}</td>
+        </ng-container>
+        <ng-container matColumnDef="category">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Category</th>
+          <td mat-cell *matCellDef="let element">{{ element?.category }}</td>
+        </ng-container>
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Name</th>
+          <td mat-cell *matCellDef="let element">{{ element?.name }}</td>
+        </ng-container>
+        <ng-container matColumnDef="hardwareId">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Hardware Id</th>
+          <td mat-cell *matCellDef="let element"> {{ element?.hardware_id }}</td>
+        </ng-container>
+        <ng-container matColumnDef="status">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Status</th>
+          <td mat-cell *matCellDef="let element">
+            {{ element?.status === 'approve' ? 'Approved' : element?.status === 'deny' ? 'Denied' : 'Pending' }}
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="hostname">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Hostname</th>
+          <td mat-cell *matCellDef="let element"> {{ element?.host_name }}</td>
+        </ng-container>
+        <ng-container matColumnDef="action">
+          <th mat-header-cell *matHeaderCellDef> Action</th>
+          <td mat-cell *matCellDef="let element">
+            <div class="row-action">
+              @if (element.status === 'approve' || element.status === 'pending') {
+              <fa-icon [icon]="['far', 'xmark-circle']" class="delete-icon" (click)="denyHardwareId(element)"
+                matTooltip="Deny"></fa-icon>
+              }
+              @if (element.status === 'deny' || element.status === 'pending') {
+              <fa-icon [icon]="['far', 'check-circle']" class="success-icon" (click)="approveHardwareId(element)"
+                matTooltip="Approve"></fa-icon>
+              }
+              <fa-icon [icon]="['fas', 'gears']" size="lg" matTooltip="Sync"
+                (click)="syncHardwareId(element)"></fa-icon>
+              <fa-icon [icon]="['far', 'trash-can']" size="lg" class="delete-icon" matTooltip="Delete"
+                (click)="deleteHardwareId(element)"></fa-icon>
+            </div>
+          </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="tableColumns; sticky: true"></tr>
+        <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
+        <tr class="mat-row table-no-data" *matNoDataRow>
+          <td class="mat-cell no-data-cell" colspan="10">
+            @if (input.value) {
+            No results found for "{{input.value}}"
+            } @else {
+            No results found.
+            }
+          </td>
+        </tr>
+      </table>
+    </div>
+    <mat-paginator [pageSizeOptions]="[10, 15, 20, 25]" [length]="totalRecords" 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/vpn-hardware-id/vpn-hardware-id.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-hardware-id/vpn-hardware-id.scss	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-hardware-id/vpn-hardware-id.scss	(working copy)
@@ -0,0 +1,188 @@
+:host {
+    display: block;
+    height: 100%;
+}
+
+.vpn-container {
+    padding: 12px;
+    background-color: #fafafa;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    // Header Toolbar (Filter + Actions)
+    .table-toolbar {
+        display: flex;
+        justify-content: flex-end; // Align filter to right
+        align-items: center;
+        margin-bottom: 0;
+        gap: 16px;
+
+        .filter-field {
+            width: 100%;
+            max-width: 400px;
+            margin-bottom: 0;
+
+            ::ng-deep .mat-mdc-text-field-wrapper {
+                background-color: white;
+                border-radius: 8px;
+                height: 40px !important;
+                padding: 0 12px !important;
+                display: flex;
+                align-items: center;
+            }
+
+            ::ng-deep .mat-mdc-form-field-infix {
+                padding: 0 !important;
+                min-height: 40px !important;
+                height: 40px !important;
+                display: flex;
+                align-items: center;
+            }
+
+            ::ng-deep .mat-mdc-input-element {
+                margin-top: 0;
+                position: relative;
+                top: -2px; // Slight adjustment for vertical centering
+            }
+
+            ::ng-deep .mat-mdc-floating-label {
+                top: 50% !important;
+                transform: translateY(-50%) !important;
+            }
+
+            // Hide subscript wrapper
+            ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+                display: none;
+            }
+
+            .search-icon {
+                color: #757575;
+                font-size: 16px;
+                margin-right: 8px;
+            }
+        }
+
+        .action-buttons {
+            display: flex;
+            gap: 12px;
+
+            button {
+                height: 40px; // Match filter height
+                border-radius: 8px;
+                background-color: #1976d2;
+                color: white;
+                font-weight: 500;
+                padding: 0 16px;
+                border: none;
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                cursor: pointer;
+                transition: background-color 0.2s;
+
+                &:hover {
+                    background-color: #1565c0;
+                }
+
+                fa-icon {
+                    font-size: 14px;
+                }
+            }
+        }
+    }
+
+    // Table Container
+    .table-container {
+        border-radius: 8px;
+        overflow: hidden;
+        border: 1px solid #e0e0e0;
+        background: white;
+        flex: 0 1 auto; // Shrink to fit content
+        display: flex;
+        flex-direction: column;
+        max-height: 100%; // Don't overflow parent
+
+        .table-scroll-area {
+            flex: 0 1 auto; // Allow shrink and auto height, don't force fill
+            overflow: auto;
+            width: 100%;
+            position: relative; // Establish context for sticky headers
+        }
+
+        .modern-table {
+            width: 100%;
+            border-collapse: collapse;
+
+            th.mat-mdc-header-cell {
+                background-color: #f5f5f5;
+                color: #424242;
+                font-weight: 600;
+                font-size: 13px;
+                padding: 0 16px;
+                border-bottom: 1px solid #e0e0e0;
+                z-index: 10;
+            }
+
+            td.mat-mdc-cell {
+                padding: 12px 16px;
+                font-size: 13px;
+                color: #333;
+                border-bottom: 1px solid #f0f0f0;
+
+                &.no-data-cell {
+                    text-align: center;
+                    padding: 48px;
+                    color: #757575;
+                    background-color: white;
+                }
+            }
+
+            tr.mat-mdc-row:hover {
+                background-color: #f9f9f9;
+            }
+
+            .row-action {
+                display: flex;
+                align-items: center;
+                gap: 12px;
+                cursor: pointer;
+
+                fa-icon {
+                    color: #1976d2;
+                    transition: color 0.2s;
+
+                    &:hover {
+                        color: #1565c0;
+                    }
+
+                    &.delete-icon {
+                        color: #c62828;
+
+                        &:hover {
+                            color: #b71c1c;
+                        }
+                    }
+
+                    &.success-icon {
+                        color: #2e7d32;
+
+                        &:hover {
+                            color: #1b5e20;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    mat-paginator {
+        background: transparent;
+        border-top: 1px solid #e0e0e0;
+        flex-shrink: 0;
+    }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-hardware-id/vpn-hardware-id.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-hardware-id/vpn-hardware-id.ts	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-hardware-id/vpn-hardware-id.ts	(working copy)
@@ -1,17 +1,18 @@
-import {ChangeDetectorRef, Component, inject, OnDestroy, OnInit, ViewChild} from '@angular/core';
-import {VpnService} from '../../../services/vpn-service';
-import {take} from 'rxjs/operators';
-import {NotificationService} from '../../../services/notification';
-import {ActivatedRoute} from '@angular/router';
-import {MatTableDataSource} from '@angular/material/table';
-import {MatPaginator} from '@angular/material/paginator';
-import {SharedModule} from '../../../shared/shared-module';
-import {Confirmation} from '../../../services/confirmation';
-import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {Subscription} from 'rxjs';
-import {DeviceService} from '../../../services/device-service';
-import {GlobalSerialPipe} from '../../../pipes/global-serial-pipe';
+import { ChangeDetectorRef, Component, inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { MatSort } from '@angular/material/sort';
+import { VpnService } from '../../../services/vpn-service';
+import { take } from 'rxjs/operators';
+import { NotificationService } from '../../../services/notification';
+import { ActivatedRoute } from '@angular/router';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
+import { SharedModule } from '../../../shared/shared-module';
+import { Confirmation } from '../../../services/confirmation';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Subscription } from 'rxjs';
+import { DeviceService } from '../../../services/device-service';
+import { GlobalSerialPipe } from '../../../pipes/global-serial-pipe';
 
 @Component({
   selector: 'app-vpn-hardware-id',
@@ -30,6 +31,7 @@
   tableColumns: string[] = ['serial', 'category', 'name', 'hardwareId', 'status', 'hostname', 'action'];
   dataSource: MatTableDataSource<any> = new MatTableDataSource();
   @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
   hardwarePayload: any = {
     start: 0,
     number: 200,
@@ -54,10 +56,21 @@
     this.serviceName = this._route.snapshot.paramMap.get('serviceName') || '';
     setTimeout(() => {
       this.dataSource.paginator = this.paginator;
+      this.dataSource.sort = this.sort;
       this.getHardwareId();
     })
   }
 
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
+
   addHardwareId() {
     this.dialogConfig.data = {
       serviceName: this.serviceName,
@@ -77,51 +90,52 @@
     let payload = this.buildHardwareIdRuleCommand(this.hardwarePayload, this.serviceName);
     this._vpn.getHardwareIds(this.deviceName, payload)
       .pipe(take(1)).subscribe({
-      next: (res: any) => {
-        if (res && res.contents && Array.isArray(res.contents) && res.contents.length > 0) {
-          const conf_list: any[] = res['contents'];
-          let total = 0;
-          const result: any[] = [];
+        next: (res: any) => {
+          if (res && res.contents && Array.isArray(res.contents) && res.contents.length > 0) {
+            const conf_list: any[] = res['contents'];
+            let total = 0;
+            const result: any[] = [];
 
-          conf_list.forEach((data: any) => {
-            if (data.cmdid.includes('#total count of hardwareid rule is')) {
-              const tmp = data.cmdid.split(' ');
-              total = parseInt(tmp[tmp.length - 1], 10);
-            }
+            conf_list.forEach((data: any) => {
+              if (data.cmdid.includes('#total count of hardwareid rule is')) {
+                const tmp = data.cmdid.split(' ');
+                total = parseInt(tmp[tmp.length - 1], 10);
+              }
 
-            if (data.cmdid === 'localdb hardwareid account' && data.hardwareid_value) {
-              result.push({
-                hardware_id: data.hardwareid_value,
-                category: 'account',
-                name: data.user_name || 'N/A',
-                status: data.status,
-                host_name: data.hostname
-              });
-              return;
-            }
+              if (data.cmdid === 'localdb hardwareid account' && data.hardwareid_value) {
+                result.push({
+                  hardware_id: data.hardwareid_value,
+                  category: 'account',
+                  name: data.user_name || 'N/A',
+                  status: data.status,
+                  host_name: data.hostname
+                });
+                return;
+              }
 
-            if (data.cmdid === 'localdb hardwareid group' && data.hardwareid_value) {
-              result.push({
-                hardware_id: data.hardwareid_value,
-                category: 'group',
-                name: data.group_name || 'N/A',
-                status: data.status,
-                host_name: data.hostname
-              });
-              return;
-            }
-          });
-          this.dataSource.data = result;
-          this.dataSource.paginator = this.paginator;
-          this.totalRecords = result.length;
+              if (data.cmdid === 'localdb hardwareid group' && data.hardwareid_value) {
+                result.push({
+                  hardware_id: data.hardwareid_value,
+                  category: 'group',
+                  name: data.group_name || 'N/A',
+                  status: data.status,
+                  host_name: data.hostname
+                });
+                return;
+              }
+            });
+            this.dataSource.data = result;
+            this.dataSource.paginator = this.paginator;
+            this.dataSource.sort = this.sort;
+            this.totalRecords = result.length;
+          }
+          this._cdRef.detectChanges();
+        },
+        error: error => {
+          this._notification.showError(`Error: ${error?.message}`);
+          this._cdRef.detectChanges();
         }
-        this._cdRef.detectChanges();
-      },
-      error: error => {
-        this._notification.showError(`Error: ${error?.message}`);
-        this._cdRef.detectChanges();
-      }
-    })
+      })
   }
 
   buildHardwareIdRuleCommand(data: any, vsiteName: string) {
@@ -185,20 +199,20 @@
             name: `${rule.name}(${dataDict[rule.category]})`
           };
         });
-        const postData: any = {config: commandStrings.join('\n')};
+        const postData: any = { config: commandStrings.join('\n') };
         this._vpn.batchAGCLICommand(this.deviceName, postData)
           .pipe(take(1)).subscribe({
-          next: (res: any) => {
-            if (res && res.contents) {
-              this._notification.showSuccess('The hardware has been approved successfully.');
-              this.getHardwareId();
+            next: (res: any) => {
+              if (res && res.contents) {
+                this._notification.showSuccess('The hardware has been approved successfully.');
+                this.getHardwareId();
+              }
+            },
+            error: error => {
+              this._notification.showError(`Error: ${error?.message}`);
+              this._cdRef.detectChanges();
             }
-          },
-          error: error => {
-            this._notification.showError(`Error: ${error?.message}`);
-            this._cdRef.detectChanges();
-          }
-        });
+          });
       }
     });
   }
@@ -228,20 +242,20 @@
             name: `${rule.name}(${dataDict[rule.category]})`
           };
         });
-        const postData: any = {config: commandStrings.join('\n')};
+        const postData: any = { config: commandStrings.join('\n') };
         this._vpn.batchAGCLICommand(this.deviceName, postData)
           .pipe(take(1)).subscribe({
-          next: (res: any) => {
-            if (res && res.contents) {
-              this._notification.showSuccess('The hardware has been denied successfully.');
-              this.getHardwareId();
+            next: (res: any) => {
+              if (res && res.contents) {
+                this._notification.showSuccess('The hardware has been denied successfully.');
+                this.getHardwareId();
+              }
+            },
+            error: error => {
+              this._notification.showError(`Error: ${error?.message}`);
+              this._cdRef.detectChanges();
             }
-          },
-          error: error => {
-            this._notification.showError(`Error: ${error?.message}`);
-            this._cdRef.detectChanges();
-          }
-        });
+          });
       }
     });
   }
@@ -286,20 +300,20 @@
             name: `${rule.name}(${dataDict[rule.category]})`
           };
         });
-        const postData: any = {config: commandStrings.join('\n')};
+        const postData: any = { config: commandStrings.join('\n') };
         this._vpn.batchAGCLICommand(this.deviceName, postData)
           .pipe(take(1)).subscribe({
-          next: (res: any) => {
-            if (res && res.contents) {
-              this._notification.showSuccess('The hardware rule has been deleted successfully.');
-              this.getHardwareId();
+            next: (res: any) => {
+              if (res && res.contents) {
+                this._notification.showSuccess('The hardware rule has been deleted successfully.');
+                this.getHardwareId();
+              }
+            },
+            error: error => {
+              this._notification.showError(`Error: ${error?.message}`);
+              this._cdRef.detectChanges();
             }
-          },
-          error: error => {
-            this._notification.showError(`Error: ${error?.message}`);
-            this._cdRef.detectChanges();
-          }
-        });
+          });
       }
     })
   }
@@ -318,9 +332,9 @@
   configForm!: FormGroup;
 
   statusOptions: any = [
-    {value: 'pending', label: 'Pending'},
-    {value: 'approve', label: 'Approved'},
-    {value: 'deny', label: 'Denied'},
+    { value: 'pending', label: 'Pending' },
+    { value: 'approve', label: 'Approved' },
+    { value: 'deny', label: 'Denied' },
   ];
   private categorySubscription!: Subscription | undefined;
 
@@ -363,16 +377,16 @@
     }
     this._vpn.executeAGCLICommand(this.data?.deviceName, payload)
       .pipe(take(1)).subscribe({
-      next: (res: any) => {
-        if (res && res.contents === "") {
-          this._notification.showSuccess('The hardware rule has been added successfully.');
-          this.dialogRef.close(true);
+        next: (res: any) => {
+          if (res && res.contents === "") {
+            this._notification.showSuccess('The hardware rule has been added successfully.');
+            this.dialogRef.close(true);
+          }
+        },
+        error: error => {
+          this._notification.showError(`Error: ${error?.message}`);
         }
-      },
-      error: error => {
-        this._notification.showError(`Error: ${error?.message}`);
-      }
-    });
+      });
   }
 
   onCancel(): void {
@@ -442,45 +456,45 @@
     this.serviceOptions = [];
     this._device.getAMPDevicesList()
       .pipe(take(1)).subscribe({
-      next: (result: any) => {
-        if (result && result.length > 0) {
-          result.forEach((_device: any) => {
-            if (_device.type.toLowerCase() === 'ag' || _device.type.toLowerCase() === 'vxag') {
-              this.getVpnServices(_device?.name, _device?.device_group);
-            }
-          })
+        next: (result: any) => {
+          if (result && result.length > 0) {
+            result.forEach((_device: any) => {
+              if (_device.type.toLowerCase() === 'ag' || _device.type.toLowerCase() === 'vxag') {
+                this.getVpnServices(_device?.name, _device?.device_group);
+              }
+            })
+          }
+          this._cdRef.detectChanges();
+        },
+        error: (error: any) => {
+          this._notification.showError(`Error: ${error?.message}`);
+          this._cdRef.detectChanges();
         }
-        this._cdRef.detectChanges();
-      },
-      error: (error: any) => {
-        this._notification.showError(`Error: ${error?.message}`);
-        this._cdRef.detectChanges();
-      }
-    })
+      })
   }
 
   getVpnServices(aGName: string, device_group: string): void {
-    let payload = {cmd: 'show virtual site config'}
+    let payload = { cmd: 'show virtual site config' }
     this._vpn.getVPNServices(aGName, payload)
       .pipe(take(1)).subscribe({
-      next: (result: any) => {
-        if (result && result.contents && result.contents.length > 0) {
-          let vsites = this.processVirtualSiteData(result?.contents);
-          vsites.forEach((vsite: any) => {
-            vsite.device_name = aGName;
-            vsite.device_group = device_group;
-            if (vsite.deviceName !== this.data?.deviceName && vsite?.name !== this.data?.serviceName) {
-              this.serviceOptions.push(vsite);
-            }
-          })
+        next: (result: any) => {
+          if (result && result.contents && result.contents.length > 0) {
+            let vsites = this.processVirtualSiteData(result?.contents);
+            vsites.forEach((vsite: any) => {
+              vsite.device_name = aGName;
+              vsite.device_group = device_group;
+              if (vsite.deviceName !== this.data?.deviceName && vsite?.name !== this.data?.serviceName) {
+                this.serviceOptions.push(vsite);
+              }
+            })
+          }
+          this._cdRef.detectChanges();
+        },
+        error: error => {
+          this._notification.showError(`Error: ${error?.message}`);
+          this._cdRef.detectChanges();
         }
-        this._cdRef.detectChanges();
-      },
-      error: error => {
-        this._notification.showError(`Error: ${error?.message}`);
-        this._cdRef.detectChanges();
-      }
-    })
+      })
   }
 
   processVirtualSiteData(confList: any[]) {
@@ -624,95 +638,95 @@
         }
       });
       cmdList.forEach((cmd: any) => {
-        const postData = {config: cmd.cmd_str};
+        const postData = { config: cmd.cmd_str };
         this._vpn.batchAGCLICommand(this.data?.deviceName, postData)
           .pipe(take(1)).subscribe({
-          next: (res: any) => {
-            let all_has_error = false;
-            const all_result_list: any[] = [];
-            if (res && res.contents) {
-              if (res['contents'] !== 'Successful') {
-                const res_list = res['contents'].split('\n');
-                const res_dict: { [key: string]: { [key: string]: string } } = {};
-                let curr_vs = '';
-                let has_error = false;
+            next: (res: any) => {
+              let all_has_error = false;
+              const all_result_list: any[] = [];
+              if (res && res.contents) {
+                if (res['contents'] !== 'Successful') {
+                  const res_list = res['contents'].split('\n');
+                  const res_dict: { [key: string]: { [key: string]: string } } = {};
+                  let curr_vs = '';
+                  let has_error = false;
 
-                res_list.forEach((res_str: string) => {
-                  if (!res_str) {
-                    // return;
-                  }
-                  const tmp_cmd = res_str.split(':"');
-                  if (res_str.indexOf('change to') !== -1) {
-                    curr_vs = tmp_cmd[0].replace(/^change to \"|\"$/g, '');
-                    if (!(curr_vs in res_dict)) {
-                      res_dict[curr_vs] = {};
+                  res_list.forEach((res_str: string) => {
+                    if (!res_str) {
+                      // return;
                     }
-                    // return;
-                  }
-                  if (curr_vs && tmp_cmd.length > 1) { // Ensure tmp_cmd[1] exists
-                    let tmp_str = tmp_cmd[1].replace(/^\"|\"$/g, '');
-                    tmp_str = tmp_str.replace(/\\/g, '');
-                    res_dict[curr_vs][tmp_cmd[0]] = tmp_str;
-                    has_error = true;
-                    all_has_error = true;
-                  }
-                });
-                if (!has_error) {
-                  all_result_list.push({
-                    type: 'success',
-                    message: this.translate('Sync hardware ID rule to device "{0}" successfully', [cmd?.device_name])
-                  });
-                } else {
-                  cmd?.vsite_list.forEach((vs: string) => {
-                    if (!res_dict[vs] || Object.keys(res_dict[vs]).length === 0) {
-                      all_result_list.push({
-                        type: 'success',
-                        message: this.translate('Sync hardware ID rule to device "{0}" virtual site "{1}" successfully', [cmd?.device_name, vs])
-                      });
-                    } else {
-                      all_result_list.push({
-                        type: 'normal',
-                        message: this.translate('Do Syncing on device "{0}" virtual site "{1}"', [cmd?.device_name, vs])
-                      });
-
-                      const commandsToCheck = Object.keys(all_dict);
-                      commandsToCheck.forEach((_cmd: string) => {
-                        if (res_dict[vs] && res_dict[vs][_cmd]) {
-                          all_result_list.push({
-                            type: 'error',
-                            message: this.translate('Create hardware ID rule for "{0}" ID "{1}" failed', [all_dict[_cmd]['name'], all_dict[_cmd]['id']]) + ': ' + res_dict[vs][_cmd]
-                          });
-                        } else if (all_dict[_cmd]) {
-                          all_result_list.push({
-                            type: 'success',
-                            message: this.translate('Create hardware ID rule for "{0}" ID "{1}" successfully', [all_dict[_cmd]['name'], all_dict[_cmd]['id']])
-                          });
-                        }
-                      });
+                    const tmp_cmd = res_str.split(':"');
+                    if (res_str.indexOf('change to') !== -1) {
+                      curr_vs = tmp_cmd[0].replace(/^change to \"|\"$/g, '');
+                      if (!(curr_vs in res_dict)) {
+                        res_dict[curr_vs] = {};
+                      }
+                      // return;
                     }
+                    if (curr_vs && tmp_cmd.length > 1) { // Ensure tmp_cmd[1] exists
+                      let tmp_str = tmp_cmd[1].replace(/^\"|\"$/g, '');
+                      tmp_str = tmp_str.replace(/\\/g, '');
+                      res_dict[curr_vs][tmp_cmd[0]] = tmp_str;
+                      has_error = true;
+                      all_has_error = true;
+                    }
                   });
+                  if (!has_error) {
+                    all_result_list.push({
+                      type: 'success',
+                      message: this.translate('Sync hardware ID rule to device "{0}" successfully', [cmd?.device_name])
+                    });
+                  } else {
+                    cmd?.vsite_list.forEach((vs: string) => {
+                      if (!res_dict[vs] || Object.keys(res_dict[vs]).length === 0) {
+                        all_result_list.push({
+                          type: 'success',
+                          message: this.translate('Sync hardware ID rule to device "{0}" virtual site "{1}" successfully', [cmd?.device_name, vs])
+                        });
+                      } else {
+                        all_result_list.push({
+                          type: 'normal',
+                          message: this.translate('Do Syncing on device "{0}" virtual site "{1}"', [cmd?.device_name, vs])
+                        });
+
+                        const commandsToCheck = Object.keys(all_dict);
+                        commandsToCheck.forEach((_cmd: string) => {
+                          if (res_dict[vs] && res_dict[vs][_cmd]) {
+                            all_result_list.push({
+                              type: 'error',
+                              message: this.translate('Create hardware ID rule for "{0}" ID "{1}" failed', [all_dict[_cmd]['name'], all_dict[_cmd]['id']]) + ': ' + res_dict[vs][_cmd]
+                            });
+                          } else if (all_dict[_cmd]) {
+                            all_result_list.push({
+                              type: 'success',
+                              message: this.translate('Create hardware ID rule for "{0}" ID "{1}" successfully', [all_dict[_cmd]['name'], all_dict[_cmd]['id']])
+                            });
+                          }
+                        });
+                      }
+                    });
+                  }
                 }
-              }
-            } else {
-              all_has_error = true;
-              all_result_list.push({
-                type: 'error',
-                message: this.translate('Sync hardware ID rule to device "{0}" failed: internal error', [cmd?.device_name])
-              });
-            }
-            all_result_list.forEach((msg: any) => {
-              if (msg?.type === 'normal' || msg?.type === 'success') {
-                this._notification.showSuccess(msg?.message);
               } else {
-                this._notification.showError(msg?.message);
+                all_has_error = true;
+                all_result_list.push({
+                  type: 'error',
+                  message: this.translate('Sync hardware ID rule to device "{0}" failed: internal error', [cmd?.device_name])
+                });
               }
-            })
-          },
-          error: error => {
-            this._notification.showError(`Error: ${error?.message}`);
-            this._cdRef.detectChanges();
-          }
-        });
+              all_result_list.forEach((msg: any) => {
+                if (msg?.type === 'normal' || msg?.type === 'success') {
+                  this._notification.showSuccess(msg?.message);
+                } else {
+                  this._notification.showError(msg?.message);
+                }
+              })
+            },
+            error: error => {
+              this._notification.showError(`Error: ${error?.message}`);
+              this._cdRef.detectChanges();
+            }
+          });
       })
     }
   }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-app-resources-excluded/vpn-resource-group-app-resources-excluded.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-app-resources-excluded/vpn-resource-group-app-resources-excluded.html	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-app-resources-excluded/vpn-resource-group-app-resources-excluded.html	(working copy)
@@ -1,42 +1,61 @@
-<mat-card class="page-card-1" appearance="filled">
-  <mat-card-header>
-    <div>
-      <button mat-raised-button (click)="addAppVPNResource()">Add</button>
+<div class="vpn-container">
+  <div class="table-toolbar">
+    <div class="filter-field">
+      <mat-form-field appearance="outline" class="filter-field">
+        <mat-label>Filter Excluded Resources</mat-label>
+        <input matInput (keyup)="applyFilter($event)" placeholder="Search..." #input>
+        <fa-icon [icon]="['fas', 'search']" matSuffix class="search-icon"></fa-icon>
+      </mat-form-field>
     </div>
-  </mat-card-header>
-</mat-card>
-<div class="table-container">
-  <table mat-table [dataSource]="dataSource" class="mat-elevation-z1">
-    <ng-container matColumnDef="serial">
-      <th mat-header-cell *matHeaderCellDef> No.</th>
-      <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial: paginator }}</td>
-    </ng-container>
-    <ng-container matColumnDef="appName">
-      <th mat-header-cell *matHeaderCellDef> Application Name</th>
-      <td mat-cell *matCellDef="let element">{{ element?.appname }}</td>
-    </ng-container>
-    <ng-container matColumnDef="fileName">
-      <th mat-header-cell *matHeaderCellDef> File Name</th>
-      <td mat-cell *matCellDef="let element">{{ element?.exename }}</td>
-    </ng-container>
-    <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> Action</th>
-      <td mat-cell *matCellDef="let element">
-        <div class="row-action a-link">
-          <fa-icon [icon]="['far', 'trash-can']" size="lg" class="delete-icon" matTooltip="Delete"
-                   (click)="deleteAppVPNResource(element)"></fa-icon>
-        </div>
-      </td>
-    </ng-container>
-    <tr mat-header-row *matHeaderRowDef="tableColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
-    <tr class="mat-row table-no-data" *matNoDataRow>
-      <td class="mat-cell" colspan="10">No results found.</td>
-    </tr>
-  </table>
-  <mat-paginator
-    [pageSizeOptions]="[10, 15, 20, 25]"
-    [length]="totalRecords"
-    showFirstLastButtons
-  ></mat-paginator>
-</div>
+    <div class="action-buttons">
+      <button mat-raised-button (click)="addAppVPNResource()">
+        <fa-icon [icon]="['fas', 'plus']"></fa-icon> Add Excluded Resource
+      </button>
+    </div>
+  </div>
+
+  <div class="table-container">
+    <div class="table-scroll-area">
+      <table mat-table [dataSource]="dataSource" matSort class="modern-table">
+        <!-- Serial No Column -->
+        <ng-container matColumnDef="serial">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> No.</th>
+          <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial:paginator }}</td>
+        </ng-container>
+
+        <!-- App Name Column -->
+        <ng-container matColumnDef="appName">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> App Name</th>
+          <td mat-cell *matCellDef="let element">{{ element?.appname }}</td>
+        </ng-container>
+        <!-- File Name Column -->
+        <ng-container matColumnDef="fileName">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> File Name</th>
+          <td mat-cell *matCellDef="let element">{{ element?.exename }}</td>
+        </ng-container>
+        <!-- Action Column -->
+        <ng-container matColumnDef="action">
+          <th mat-header-cell *matHeaderCellDef> Action</th>
+          <td mat-cell *matCellDef="let element">
+            <div class="row-action">
+              <fa-icon [icon]="['far', 'trash-can']" size="lg" class="delete-icon" matTooltip="Delete"
+                (click)="deleteAppVPNResource(element)"></fa-icon>
+            </div>
+          </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="tableColumns; sticky: true"></tr>
+        <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
+        <tr class="mat-row table-no-data" *matNoDataRow>
+          <td class="mat-cell no-data-cell" colspan="10">
+            @if (input.value) {
+            No results found for "{{input.value}}"
+            } @else {
+            No results found.
+            }
+          </td>
+        </tr>
+      </table>
+    </div>
+    <mat-paginator [pageSizeOptions]="[10, 15, 20, 25]" [length]="totalRecords" 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/vpn-resource-group-app-resources-excluded/vpn-resource-group-app-resources-excluded.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-app-resources-excluded/vpn-resource-group-app-resources-excluded.scss	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-app-resources-excluded/vpn-resource-group-app-resources-excluded.scss	(working copy)
@@ -0,0 +1,188 @@
+:host {
+    display: block;
+    height: 100%;
+}
+
+.vpn-container {
+    padding: 12px;
+    background-color: #fafafa;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    // Header Toolbar (Filter + Actions)
+    .table-toolbar {
+        display: flex;
+        justify-content: flex-end; // Align filter to right
+        align-items: center;
+        margin-bottom: 0;
+        gap: 16px;
+
+        .filter-field {
+            width: 100%;
+            max-width: 400px;
+            margin-bottom: 0;
+
+            ::ng-deep .mat-mdc-text-field-wrapper {
+                background-color: white;
+                border-radius: 8px;
+                height: 40px !important;
+                padding: 0 12px !important;
+                display: flex;
+                align-items: center;
+            }
+
+            ::ng-deep .mat-mdc-form-field-infix {
+                padding: 0 !important;
+                min-height: 40px !important;
+                height: 40px !important;
+                display: flex;
+                align-items: center;
+            }
+
+            ::ng-deep .mat-mdc-input-element {
+                margin-top: 0;
+                position: relative;
+                top: -2px; // Slight adjustment for vertical centering
+            }
+
+            ::ng-deep .mat-mdc-floating-label {
+                top: 50% !important;
+                transform: translateY(-50%) !important;
+            }
+
+            // Hide subscript wrapper
+            ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+                display: none;
+            }
+
+            .search-icon {
+                color: #757575;
+                font-size: 16px;
+                margin-right: 8px;
+            }
+        }
+
+        .action-buttons {
+            display: flex;
+            gap: 12px;
+
+            button {
+                height: 40px; // Match filter height
+                border-radius: 8px;
+                background-color: #1976d2;
+                color: white;
+                font-weight: 500;
+                padding: 0 16px;
+                border: none;
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                cursor: pointer;
+                transition: background-color 0.2s;
+
+                &:hover {
+                    background-color: #1565c0;
+                }
+
+                fa-icon {
+                    font-size: 14px;
+                }
+            }
+        }
+    }
+
+    // Table Container
+    .table-container {
+        border-radius: 8px;
+        overflow: hidden;
+        border: 1px solid #e0e0e0;
+        background: white;
+        flex: 0 1 auto; // Shrink to fit content
+        display: flex;
+        flex-direction: column;
+        max-height: 100%; // Don't overflow parent
+
+        .table-scroll-area {
+            flex: 0 1 auto; // Allow shrink and auto height, don't force fill
+            overflow: auto;
+            width: 100%;
+            position: relative; // Establish context for sticky headers
+        }
+
+        .modern-table {
+            width: 100%;
+            border-collapse: collapse;
+
+            th.mat-mdc-header-cell {
+                background-color: #f5f5f5;
+                color: #424242;
+                font-weight: 600;
+                font-size: 13px;
+                padding: 0 16px;
+                border-bottom: 1px solid #e0e0e0;
+                z-index: 10;
+            }
+
+            td.mat-mdc-cell {
+                padding: 12px 16px;
+                font-size: 13px;
+                color: #333;
+                border-bottom: 1px solid #f0f0f0;
+
+                &.no-data-cell {
+                    text-align: center;
+                    padding: 48px;
+                    color: #757575;
+                    background-color: white;
+                }
+            }
+
+            tr.mat-mdc-row:hover {
+                background-color: #f9f9f9;
+            }
+
+            .row-action {
+                display: flex;
+                align-items: center;
+                gap: 12px;
+                cursor: pointer;
+
+                fa-icon {
+                    color: #1976d2;
+                    transition: color 0.2s;
+
+                    &:hover {
+                        color: #1565c0;
+                    }
+
+                    &.delete-icon {
+                        color: #c62828;
+
+                        &:hover {
+                            color: #b71c1c;
+                        }
+                    }
+
+                    &.success-icon {
+                        color: #2e7d32;
+
+                        &:hover {
+                            color: #1b5e20;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    mat-paginator {
+        background: transparent;
+        border-top: 1px solid #e0e0e0;
+        flex-shrink: 0;
+    }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-app-resources-excluded/vpn-resource-group-app-resources-excluded.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-app-resources-excluded/vpn-resource-group-app-resources-excluded.ts	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-app-resources-excluded/vpn-resource-group-app-resources-excluded.ts	(working copy)
@@ -1,15 +1,16 @@
-import {ChangeDetectorRef, Component, inject, OnInit, ViewChild} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
-import {MatPaginator} from '@angular/material/paginator';
-import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog';
-import {ActivatedRoute} from '@angular/router';
-import {VpnService} from '../../../services/vpn-service';
-import {NotificationService} from '../../../services/notification';
-import {Confirmation} from '../../../services/confirmation';
-import {SharedModule} from '../../../shared/shared-module';
-import {take} from 'rxjs/operators';
-import {GlobalSerialPipe} from '../../../pipes/global-serial-pipe';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import { ChangeDetectorRef, Component, inject, OnInit, ViewChild } from '@angular/core';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
+import { ActivatedRoute } from '@angular/router';
+import { VpnService } from '../../../services/vpn-service';
+import { NotificationService } from '../../../services/notification';
+import { Confirmation } from '../../../services/confirmation';
+import { SharedModule } from '../../../shared/shared-module';
+import { take } from 'rxjs/operators';
+import { GlobalSerialPipe } from '../../../pipes/global-serial-pipe';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-vpn-resource-group-app-resources-excluded',
@@ -23,8 +24,10 @@
   groupName: string = '';
   totalRecords: number = 0;
   tableColumns: string[] = ['serial', 'appName', 'fileName', 'action'];
+
   dataSource: MatTableDataSource<any> = new MatTableDataSource();
   @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
   dialog = inject(MatDialog);
   dialogConfig = new MatDialogConfig();
 
@@ -42,11 +45,21 @@
 
   ngOnInit() {
     this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
     setTimeout(() => {
       this.getAppVPNResource();
     })
   }
 
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
   getAppVPNResource() {
     let payload: any = {
       cmd: `show vpn resource groupexcludeditem appname "${this.groupName}"`,
@@ -55,19 +68,20 @@
     this.dataSource.data = [];
     this._vpn.executeAGCLICommand(this.deviceName, payload)
       .pipe(take(1)).subscribe({
-      next: (result: any) => {
-        if (result && result.contents && result.contents.length > 0) {
-          this.dataSource.data = result.contents;
+        next: (result: any) => {
+          if (result && result.contents && result.contents.length > 0) {
+            this.dataSource.data = result.contents;
+          }
+          this.dataSource.paginator = this.paginator;
+          this.dataSource.sort = this.sort;
+          this.totalRecords = this.dataSource.data.length;
+          this._cdRef.detectChanges();
+        },
+        error: (error: any) => {
+          this._notification.showError(`Error: ${error?.message}`);
+          this._cdRef.detectChanges();
         }
-        this.dataSource.paginator = this.paginator;
-        this.totalRecords = this.dataSource.data.length;
-        this._cdRef.detectChanges();
-      },
-      error: (error: any) => {
-        this._notification.showError(`Error: ${error?.message}`);
-        this._cdRef.detectChanges();
-      }
-    });
+      });
   }
 
   addAppVPNResource() {
@@ -102,18 +116,18 @@
         }
         this._vpn.executeAGCLICommand(this.deviceName, payload)
           .pipe(take(1)).subscribe({
-          next: (result: any) => {
-            if (result && result.contents === '') {
-              this._notification.showSuccess(`The vpn resource has been deleted successfully.`);
-              this.getAppVPNResource();
+            next: (result: any) => {
+              if (result && result.contents === '') {
+                this._notification.showSuccess(`The vpn resource has been deleted successfully.`);
+                this.getAppVPNResource();
+              }
+              this._cdRef.detectChanges();
+            },
+            error: (error: any) => {
+              this._notification.showError(`Error: ${error?.message}`);
+              this._cdRef.detectChanges();
             }
-            this._cdRef.detectChanges();
-          },
-          error: (error: any) => {
-            this._notification.showError(`Error: ${error?.message}`);
-            this._cdRef.detectChanges();
-          }
-        });
+          });
       }
     });
   }
@@ -157,16 +171,16 @@
     }
     this._vpn.executeAGCLICommand(this.data?.deviceName, payload)
       .pipe(take(1)).subscribe({
-      next: (result: any) => {
-        if (result && result.contents === '') {
-          this._notification.showSuccess(`The VPN resource has been created successfully.`);
-          this.dialogRef.close(true);
+        next: (result: any) => {
+          if (result && result.contents === '') {
+            this._notification.showSuccess(`The VPN resource has been created successfully.`);
+            this.dialogRef.close(true);
+          }
+        },
+        error: (error: any) => {
+          this._notification.showError(`Error: ${error?.message}`);
         }
-      },
-      error: (error: any) => {
-        this._notification.showError(`Error: ${error?.message}`);
-      }
-    });
+      });
   }
 
   onCancel() {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-app-resources/vpn-resource-group-app-resources.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-app-resources/vpn-resource-group-app-resources.html	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-app-resources/vpn-resource-group-app-resources.html	(working copy)
@@ -1,46 +1,66 @@
-<mat-card class="page-card-1" appearance="filled">
-  <mat-card-header>
-    <div>
-      <button mat-raised-button (click)="addAppVPNResource()">Add</button>
+<div class="vpn-container">
+  <div class="table-toolbar">
+    <div class="filter-field">
+      <mat-form-field appearance="outline" class="filter-field">
+        <mat-label>Filter Resources</mat-label>
+        <input matInput (keyup)="applyFilter($event)" placeholder="Search..." #input>
+        <fa-icon [icon]="['fas', 'search']" matSuffix class="search-icon"></fa-icon>
+      </mat-form-field>
     </div>
-  </mat-card-header>
-</mat-card>
-<div class="table-container">
-  <table mat-table [dataSource]="dataSource" class="mat-elevation-z1">
-    <ng-container matColumnDef="serial">
-      <th mat-header-cell *matHeaderCellDef> No.</th>
-      <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial: paginator }}</td>
-    </ng-container>
-    <ng-container matColumnDef="appName">
-      <th mat-header-cell *matHeaderCellDef> Application Name</th>
-      <td mat-cell *matCellDef="let element">{{ element?.appname }}</td>
-    </ng-container>
-    <ng-container matColumnDef="fileName">
-      <th mat-header-cell *matHeaderCellDef> File Name</th>
-      <td mat-cell *matCellDef="let element">{{ element?.exename }}</td>
-    </ng-container>
-    <ng-container matColumnDef="md5">
-      <th mat-header-cell *matHeaderCellDef> MD5 Hash value</th>
-      <td mat-cell *matCellDef="let element">{{ element?.hash }}</td>
-    </ng-container>
-    <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> Action</th>
-      <td mat-cell *matCellDef="let element">
-        <div class="row-action a-link">
-          <fa-icon [icon]="['far', 'trash-can']" size="lg" class="delete-icon" matTooltip="Delete"
-                   (click)="deleteAppVPNResource(element)"></fa-icon>
-        </div>
-      </td>
-    </ng-container>
-    <tr mat-header-row *matHeaderRowDef="tableColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
-    <tr class="mat-row table-no-data" *matNoDataRow>
-      <td class="mat-cell" colspan="10">No results found.</td>
-    </tr>
-  </table>
-  <mat-paginator
-    [pageSizeOptions]="[10, 15, 20, 25]"
-    [length]="totalRecords"
-    showFirstLastButtons
-  ></mat-paginator>
-</div>
+    <div class="action-buttons">
+      <button mat-raised-button (click)="addAppVPNResource()">
+        <fa-icon [icon]="['fas', 'plus']"></fa-icon> Add Resource
+      </button>
+    </div>
+  </div>
+
+  <div class="table-container">
+    <div class="table-scroll-area">
+      <table mat-table [dataSource]="dataSource" matSort class="modern-table">
+        <!-- Serial No Column -->
+        <ng-container matColumnDef="serial">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> No.</th>
+          <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial:paginator }}</td>
+        </ng-container>
+
+        <!-- App Name Column -->
+        <ng-container matColumnDef="appName">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> App Name</th>
+          <td mat-cell *matCellDef="let element">{{ element?.appname }}</td>
+        </ng-container>
+        <!-- File Name Column -->
+        <ng-container matColumnDef="fileName">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> File Name</th>
+          <td mat-cell *matCellDef="let element">{{ element?.filename }}</td>
+        </ng-container>
+        <!-- MD5 Column -->
+        <ng-container matColumnDef="md5">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> MD5</th>
+          <td mat-cell *matCellDef="let element"> {{ element?.md5 }}</td>
+        </ng-container>
+        <!-- Action Column -->
+        <ng-container matColumnDef="action">
+          <th mat-header-cell *matHeaderCellDef> Action</th>
+          <td mat-cell *matCellDef="let element">
+            <div class="row-action">
+              <fa-icon [icon]="['far', 'trash-can']" size="lg" class="delete-icon" matTooltip="Delete"
+                (click)="deleteAppVPNResource(element)"></fa-icon>
+            </div>
+          </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="tableColumns; sticky: true"></tr>
+        <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
+        <tr class="mat-row table-no-data" *matNoDataRow>
+          <td class="mat-cell no-data-cell" colspan="10">
+            @if (input.value) {
+            No results found for "{{input.value}}"
+            } @else {
+            No results found.
+            }
+          </td>
+        </tr>
+      </table>
+    </div>
+    <mat-paginator [pageSizeOptions]="[10, 15, 20, 25]" [length]="totalRecords" 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/vpn-resource-group-app-resources/vpn-resource-group-app-resources.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-app-resources/vpn-resource-group-app-resources.scss	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-app-resources/vpn-resource-group-app-resources.scss	(working copy)
@@ -0,0 +1,188 @@
+:host {
+    display: block;
+    height: 100%;
+}
+
+.vpn-container {
+    padding: 12px;
+    background-color: #fafafa;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    // Header Toolbar (Filter + Actions)
+    .table-toolbar {
+        display: flex;
+        justify-content: flex-end; // Align filter to right
+        align-items: center;
+        margin-bottom: 0;
+        gap: 16px;
+
+        .filter-field {
+            width: 100%;
+            max-width: 400px;
+            margin-bottom: 0;
+
+            ::ng-deep .mat-mdc-text-field-wrapper {
+                background-color: white;
+                border-radius: 8px;
+                height: 40px !important;
+                padding: 0 12px !important;
+                display: flex;
+                align-items: center;
+            }
+
+            ::ng-deep .mat-mdc-form-field-infix {
+                padding: 0 !important;
+                min-height: 40px !important;
+                height: 40px !important;
+                display: flex;
+                align-items: center;
+            }
+
+            ::ng-deep .mat-mdc-input-element {
+                margin-top: 0;
+                position: relative;
+                top: -2px; // Slight adjustment for vertical centering
+            }
+
+            ::ng-deep .mat-mdc-floating-label {
+                top: 50% !important;
+                transform: translateY(-50%) !important;
+            }
+
+            // Hide subscript wrapper
+            ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+                display: none;
+            }
+
+            .search-icon {
+                color: #757575;
+                font-size: 16px;
+                margin-right: 8px;
+            }
+        }
+
+        .action-buttons {
+            display: flex;
+            gap: 12px;
+
+            button {
+                height: 40px; // Match filter height
+                border-radius: 8px;
+                background-color: #1976d2;
+                color: white;
+                font-weight: 500;
+                padding: 0 16px;
+                border: none;
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                cursor: pointer;
+                transition: background-color 0.2s;
+
+                &:hover {
+                    background-color: #1565c0;
+                }
+
+                fa-icon {
+                    font-size: 14px;
+                }
+            }
+        }
+    }
+
+    // Table Container
+    .table-container {
+        border-radius: 8px;
+        overflow: hidden;
+        border: 1px solid #e0e0e0;
+        background: white;
+        flex: 0 1 auto; // Shrink to fit content
+        display: flex;
+        flex-direction: column;
+        max-height: 100%; // Don't overflow parent
+
+        .table-scroll-area {
+            flex: 0 1 auto; // Allow shrink and auto height, don't force fill
+            overflow: auto;
+            width: 100%;
+            position: relative; // Establish context for sticky headers
+        }
+
+        .modern-table {
+            width: 100%;
+            border-collapse: collapse;
+
+            th.mat-mdc-header-cell {
+                background-color: #f5f5f5;
+                color: #424242;
+                font-weight: 600;
+                font-size: 13px;
+                padding: 0 16px;
+                border-bottom: 1px solid #e0e0e0;
+                z-index: 10;
+            }
+
+            td.mat-mdc-cell {
+                padding: 12px 16px;
+                font-size: 13px;
+                color: #333;
+                border-bottom: 1px solid #f0f0f0;
+
+                &.no-data-cell {
+                    text-align: center;
+                    padding: 48px;
+                    color: #757575;
+                    background-color: white;
+                }
+            }
+
+            tr.mat-mdc-row:hover {
+                background-color: #f9f9f9;
+            }
+
+            .row-action {
+                display: flex;
+                align-items: center;
+                gap: 12px;
+                cursor: pointer;
+
+                fa-icon {
+                    color: #1976d2;
+                    transition: color 0.2s;
+
+                    &:hover {
+                        color: #1565c0;
+                    }
+
+                    &.delete-icon {
+                        color: #c62828;
+
+                        &:hover {
+                            color: #b71c1c;
+                        }
+                    }
+
+                    &.success-icon {
+                        color: #2e7d32;
+
+                        &:hover {
+                            color: #1b5e20;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    mat-paginator {
+        background: transparent;
+        border-top: 1px solid #e0e0e0;
+        flex-shrink: 0;
+    }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-app-resources/vpn-resource-group-app-resources.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-app-resources/vpn-resource-group-app-resources.ts	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-app-resources/vpn-resource-group-app-resources.ts	(working copy)
@@ -1,15 +1,16 @@
-import {ChangeDetectorRef, Component, inject, OnInit, ViewChild} from '@angular/core';
-import {SharedModule} from '../../../shared/shared-module';
-import {MatTableDataSource} from '@angular/material/table';
-import {MatPaginator} from '@angular/material/paginator';
-import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog';
-import {ActivatedRoute} from '@angular/router';
-import {VpnService} from '../../../services/vpn-service';
-import {NotificationService} from '../../../services/notification';
-import {Confirmation} from '../../../services/confirmation';
-import {take} from 'rxjs/operators';
-import {GlobalSerialPipe} from '../../../pipes/global-serial-pipe';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import { ChangeDetectorRef, Component, inject, OnInit, ViewChild } from '@angular/core';
+import { MatSort } from '@angular/material/sort';
+import { SharedModule } from '../../../shared/shared-module';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
+import { ActivatedRoute } from '@angular/router';
+import { VpnService } from '../../../services/vpn-service';
+import { NotificationService } from '../../../services/notification';
+import { Confirmation } from '../../../services/confirmation';
+import { take } from 'rxjs/operators';
+import { GlobalSerialPipe } from '../../../pipes/global-serial-pipe';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-vpn-resource-group-app-resources',
@@ -25,6 +26,7 @@
   tableColumns: string[] = ['serial', 'appName', 'fileName', 'md5', 'action'];
   dataSource: MatTableDataSource<any> = new MatTableDataSource();
   @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
   dialog = inject(MatDialog);
   dialogConfig = new MatDialogConfig();
 
@@ -42,11 +44,21 @@
 
   ngOnInit() {
     this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
     setTimeout(() => {
       this.getAppVPNResource();
     })
   }
 
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
   getAppVPNResource() {
     let payload: any = {
       cmd: `show vpn resource groupitem appname "${this.groupName}"`,
@@ -55,19 +67,20 @@
     this.dataSource.data = [];
     this._vpn.executeAGCLICommand(this.deviceName, payload)
       .pipe(take(1)).subscribe({
-      next: (result: any) => {
-        if (result && result.contents && result.contents.length > 0) {
-          this.dataSource.data = result.contents;
+        next: (result: any) => {
+          if (result && result.contents && result.contents.length > 0) {
+            this.dataSource.data = result.contents;
+          }
+          this.dataSource.paginator = this.paginator;
+          this.dataSource.sort = this.sort;
+          this.totalRecords = this.dataSource.data.length;
+          this._cdRef.detectChanges();
+        },
+        error: (error: any) => {
+          this._notification.showError(`Error: ${error?.message}`);
+          this._cdRef.detectChanges();
         }
-        this.dataSource.paginator = this.paginator;
-        this.totalRecords = this.dataSource.data.length;
-        this._cdRef.detectChanges();
-      },
-      error: (error: any) => {
-        this._notification.showError(`Error: ${error?.message}`);
-        this._cdRef.detectChanges();
-      }
-    });
+      });
   }
 
   addAppVPNResource() {
@@ -102,18 +115,18 @@
         }
         this._vpn.executeAGCLICommand(this.deviceName, payload)
           .pipe(take(1)).subscribe({
-          next: (result: any) => {
-            if (result && result.contents === '') {
-              this._notification.showSuccess(`The vpn resource has been deleted successfully.`);
-              this.getAppVPNResource();
+            next: (result: any) => {
+              if (result && result.contents === '') {
+                this._notification.showSuccess(`The vpn resource has been deleted successfully.`);
+                this.getAppVPNResource();
+              }
+              this._cdRef.detectChanges();
+            },
+            error: (error: any) => {
+              this._notification.showError(`Error: ${error?.message}`);
+              this._cdRef.detectChanges();
             }
-            this._cdRef.detectChanges();
-          },
-          error: (error: any) => {
-            this._notification.showError(`Error: ${error?.message}`);
-            this._cdRef.detectChanges();
-          }
-        });
+          });
       }
     });
   }
@@ -158,16 +171,16 @@
     }
     this._vpn.executeAGCLICommand(this.data?.deviceName, payload)
       .pipe(take(1)).subscribe({
-      next: (result: any) => {
-        if (result && result.contents === '') {
-          this._notification.showSuccess(`The VPN resource has been created successfully.`);
-          this.dialogRef.close(true);
+        next: (result: any) => {
+          if (result && result.contents === '') {
+            this._notification.showSuccess(`The VPN resource has been created successfully.`);
+            this.dialogRef.close(true);
+          }
+        },
+        error: (error: any) => {
+          this._notification.showError(`Error: ${error?.message}`);
         }
-      },
-      error: (error: any) => {
-        this._notification.showError(`Error: ${error?.message}`);
-      }
-    });
+      });
   }
 
   onCancel() {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-network-resources-excluded/vpn-resource-group-network-resources-excluded.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-network-resources-excluded/vpn-resource-group-network-resources-excluded.html	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-network-resources-excluded/vpn-resource-group-network-resources-excluded.html	(working copy)
@@ -1,42 +1,63 @@
-<mat-card class="page-card-1" appearance="filled">
-  <mat-card-header>
-    <div>
-      <button mat-raised-button (click)="addNetworkVPNResource()">Add</button>
+<div class="vpn-container">
+  <div class="table-toolbar">
+    <div class="filter-field">
+      <mat-form-field appearance="outline" class="filter-field">
+        <mat-label>Filter Excluded Resources</mat-label>
+        <input matInput (keyup)="applyFilter($event)" placeholder="Search..." #input>
+        <fa-icon [icon]="['fas', 'search']" matSuffix class="search-icon"></fa-icon>
+      </mat-form-field>
     </div>
-  </mat-card-header>
-</mat-card>
-<div class="table-container">
-  <table mat-table [dataSource]="dataSource" class="mat-elevation-z1">
-    <ng-container matColumnDef="serial">
-      <th mat-header-cell *matHeaderCellDef> No.</th>
-      <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial: paginator }}</td>
-    </ng-container>
-    <ng-container matColumnDef="resource">
-      <th mat-header-cell *matHeaderCellDef> Network Resource</th>
-      <td mat-cell *matCellDef="let element">{{ element?.netresource }}</td>
-    </ng-container>
-    <ng-container matColumnDef="type">
-      <th mat-header-cell *matHeaderCellDef> Resource Tye</th>
-      <td mat-cell *matCellDef="let element">{{ resourceType[element?.type] }}</td>
-    </ng-container>
-    <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> Action</th>
-      <td mat-cell *matCellDef="let element">
-        <div class="row-action a-link">
-          <fa-icon [icon]="['far', 'trash-can']" size="lg" class="delete-icon" matTooltip="Delete"
-                   (click)="deleteNetworkVPNResource(element)"></fa-icon>
-        </div>
-      </td>
-    </ng-container>
-    <tr mat-header-row *matHeaderRowDef="tableColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
-    <tr class="mat-row table-no-data" *matNoDataRow>
-      <td class="mat-cell" colspan="10">No results found.</td>
-    </tr>
-  </table>
-  <mat-paginator
-    [pageSizeOptions]="[10, 15, 20, 25]"
-    [length]="totalRecords"
-    showFirstLastButtons
-  ></mat-paginator>
-</div>
+    <div class="action-buttons">
+      <button mat-raised-button (click)="addNetworkVPNResource()">
+        <fa-icon [icon]="['fas', 'plus']"></fa-icon> Add Excluded Resource
+      </button>
+    </div>
+  </div>
+
+  <div class="table-container">
+    <div class="table-scroll-area">
+      <table mat-table [dataSource]="dataSource" matSort class="modern-table">
+        <!-- Serial No Column -->
+        <ng-container matColumnDef="serial">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> No.</th>
+          <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial:paginator }}</td>
+        </ng-container>
+
+        <!-- Resource Column -->
+        <ng-container matColumnDef="resource">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Resources</th>
+          <td mat-cell *matCellDef="let element">{{ element?.netresource }}</td>
+        </ng-container>
+        <!-- Type Column -->
+        <ng-container matColumnDef="type">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Type</th>
+          <td mat-cell *matCellDef="let element">
+            {{ resourceType[element?.type] ? resourceType[element?.type] : element?.type }}
+          </td>
+        </ng-container>
+        <!-- Action Column -->
+        <ng-container matColumnDef="action">
+          <th mat-header-cell *matHeaderCellDef> Action</th>
+          <td mat-cell *matCellDef="let element">
+            <div class="row-action">
+              <fa-icon [icon]="['far', 'trash-can']" size="lg" class="delete-icon" matTooltip="Delete"
+                (click)="deleteNetworkVPNResource(element)"></fa-icon>
+            </div>
+          </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="tableColumns; sticky: true"></tr>
+        <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
+        <tr class="mat-row table-no-data" *matNoDataRow>
+          <td class="mat-cell no-data-cell" colspan="10">
+            @if (input.value) {
+            No results found for "{{input.value}}"
+            } @else {
+            No results found.
+            }
+          </td>
+        </tr>
+      </table>
+    </div>
+    <mat-paginator [pageSizeOptions]="[10, 15, 20, 25]" [length]="totalRecords" 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/vpn-resource-group-network-resources-excluded/vpn-resource-group-network-resources-excluded.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-network-resources-excluded/vpn-resource-group-network-resources-excluded.scss	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-network-resources-excluded/vpn-resource-group-network-resources-excluded.scss	(working copy)
@@ -0,0 +1,188 @@
+:host {
+    display: block;
+    height: 100%;
+}
+
+.vpn-container {
+    padding: 12px;
+    background-color: #fafafa;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    // Header Toolbar (Filter + Actions)
+    .table-toolbar {
+        display: flex;
+        justify-content: flex-end; // Align filter to right
+        align-items: center;
+        margin-bottom: 0;
+        gap: 16px;
+
+        .filter-field {
+            width: 100%;
+            max-width: 400px;
+            margin-bottom: 0;
+
+            ::ng-deep .mat-mdc-text-field-wrapper {
+                background-color: white;
+                border-radius: 8px;
+                height: 40px !important;
+                padding: 0 12px !important;
+                display: flex;
+                align-items: center;
+            }
+
+            ::ng-deep .mat-mdc-form-field-infix {
+                padding: 0 !important;
+                min-height: 40px !important;
+                height: 40px !important;
+                display: flex;
+                align-items: center;
+            }
+
+            ::ng-deep .mat-mdc-input-element {
+                margin-top: 0;
+                position: relative;
+                top: -2px; // Slight adjustment for vertical centering
+            }
+
+            ::ng-deep .mat-mdc-floating-label {
+                top: 50% !important;
+                transform: translateY(-50%) !important;
+            }
+
+            // Hide subscript wrapper
+            ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+                display: none;
+            }
+
+            .search-icon {
+                color: #757575;
+                font-size: 16px;
+                margin-right: 8px;
+            }
+        }
+
+        .action-buttons {
+            display: flex;
+            gap: 12px;
+
+            button {
+                height: 40px; // Match filter height
+                border-radius: 8px;
+                background-color: #1976d2;
+                color: white;
+                font-weight: 500;
+                padding: 0 16px;
+                border: none;
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                cursor: pointer;
+                transition: background-color 0.2s;
+
+                &:hover {
+                    background-color: #1565c0;
+                }
+
+                fa-icon {
+                    font-size: 14px;
+                }
+            }
+        }
+    }
+
+    // Table Container
+    .table-container {
+        border-radius: 8px;
+        overflow: hidden;
+        border: 1px solid #e0e0e0;
+        background: white;
+        flex: 0 1 auto; // Shrink to fit content
+        display: flex;
+        flex-direction: column;
+        max-height: 100%; // Don't overflow parent
+
+        .table-scroll-area {
+            flex: 0 1 auto; // Allow shrink and auto height, don't force fill
+            overflow: auto;
+            width: 100%;
+            position: relative; // Establish context for sticky headers
+        }
+
+        .modern-table {
+            width: 100%;
+            border-collapse: collapse;
+
+            th.mat-mdc-header-cell {
+                background-color: #f5f5f5;
+                color: #424242;
+                font-weight: 600;
+                font-size: 13px;
+                padding: 0 16px;
+                border-bottom: 1px solid #e0e0e0;
+                z-index: 10;
+            }
+
+            td.mat-mdc-cell {
+                padding: 12px 16px;
+                font-size: 13px;
+                color: #333;
+                border-bottom: 1px solid #f0f0f0;
+
+                &.no-data-cell {
+                    text-align: center;
+                    padding: 48px;
+                    color: #757575;
+                    background-color: white;
+                }
+            }
+
+            tr.mat-mdc-row:hover {
+                background-color: #f9f9f9;
+            }
+
+            .row-action {
+                display: flex;
+                align-items: center;
+                gap: 12px;
+                cursor: pointer;
+
+                fa-icon {
+                    color: #1976d2;
+                    transition: color 0.2s;
+
+                    &:hover {
+                        color: #1565c0;
+                    }
+
+                    &.delete-icon {
+                        color: #c62828;
+
+                        &:hover {
+                            color: #b71c1c;
+                        }
+                    }
+
+                    &.success-icon {
+                        color: #2e7d32;
+
+                        &:hover {
+                            color: #1b5e20;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    mat-paginator {
+        background: transparent;
+        border-top: 1px solid #e0e0e0;
+        flex-shrink: 0;
+    }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-network-resources-excluded/vpn-resource-group-network-resources-excluded.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-network-resources-excluded/vpn-resource-group-network-resources-excluded.ts	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-network-resources-excluded/vpn-resource-group-network-resources-excluded.ts	(working copy)
@@ -1,19 +1,20 @@
-import {ChangeDetectorRef, Component, inject, OnInit, ViewChild} from '@angular/core';
-import {SharedModule} from '../../../shared/shared-module';
-import {GlobalSerialPipe} from '../../../pipes/global-serial-pipe';
-import {MatTableDataSource} from '@angular/material/table';
-import {MatPaginator} from '@angular/material/paginator';
-import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog';
-import {ActivatedRoute} from '@angular/router';
-import {VpnService} from '../../../services/vpn-service';
-import {NotificationService} from '../../../services/notification';
-import {Confirmation} from '../../../services/confirmation';
-import {take} from 'rxjs/operators';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import { ChangeDetectorRef, Component, inject, OnInit, ViewChild } from '@angular/core';
+import { MatSort } from '@angular/material/sort';
+import { SharedModule } from '../../../shared/shared-module';
+import { GlobalSerialPipe } from '../../../pipes/global-serial-pipe';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
+import { ActivatedRoute } from '@angular/router';
+import { VpnService } from '../../../services/vpn-service';
+import { NotificationService } from '../../../services/notification';
+import { Confirmation } from '../../../services/confirmation';
+import { take } from 'rxjs/operators';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-vpn-resource-group-network-resources-excluded',
-  imports: [    SharedModule,
+  imports: [SharedModule,
     GlobalSerialPipe,],
   templateUrl: './vpn-resource-group-network-resources-excluded.html',
   styleUrl: './vpn-resource-group-network-resources-excluded.scss'
@@ -26,6 +27,7 @@
   tableColumns: string[] = ['serial', 'resource', 'type', 'action'];
   dataSource: MatTableDataSource<any> = new MatTableDataSource();
   @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
   dialog = inject(MatDialog);
   dialogConfig = new MatDialogConfig();
 
@@ -49,11 +51,21 @@
 
   ngOnInit() {
     this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
     setTimeout(() => {
       this.getNetworkVPNResource();
     })
   }
 
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
   getNetworkVPNResource() {
     let payload: any = {
       cmd: `show vpn resource groupexcludeditem network "${this.groupName}"`,
@@ -62,19 +74,20 @@
     this.dataSource.data = [];
     this._vpn.executeAGCLICommand(this.deviceName, payload)
       .pipe(take(1)).subscribe({
-      next: (result: any) => {
-        if (result && result.contents && result.contents.length > 0) {
-          this.dataSource.data = result.contents;
+        next: (result: any) => {
+          if (result && result.contents && result.contents.length > 0) {
+            this.dataSource.data = result.contents;
+          }
+          this.dataSource.paginator = this.paginator;
+          this.dataSource.sort = this.sort;
+          this.totalRecords = this.dataSource.data.length;
+          this._cdRef.detectChanges();
+        },
+        error: (error: any) => {
+          this._notification.showError(`Error: ${error?.message}`);
+          this._cdRef.detectChanges();
         }
-        this.dataSource.paginator = this.paginator;
-        this.totalRecords = this.dataSource.data.length;
-        this._cdRef.detectChanges();
-      },
-      error: (error: any) => {
-        this._notification.showError(`Error: ${error?.message}`);
-        this._cdRef.detectChanges();
-      }
-    });
+      });
   }
 
   addNetworkVPNResource() {
@@ -109,18 +122,18 @@
         }
         this._vpn.executeAGCLICommand(this.deviceName, payload)
           .pipe(take(1)).subscribe({
-          next: (result: any) => {
-            if (result && result.contents === '') {
-              this._notification.showSuccess(`The vpn resource has been deleted successfully.`);
-              this.getNetworkVPNResource();
+            next: (result: any) => {
+              if (result && result.contents === '') {
+                this._notification.showSuccess(`The vpn resource has been deleted successfully.`);
+                this.getNetworkVPNResource();
+              }
+              this._cdRef.detectChanges();
+            },
+            error: (error: any) => {
+              this._notification.showError(`Error: ${error?.message}`);
+              this._cdRef.detectChanges();
             }
-            this._cdRef.detectChanges();
-          },
-          error: (error: any) => {
-            this._notification.showError(`Error: ${error?.message}`);
-            this._cdRef.detectChanges();
-          }
-        });
+          });
       }
     });
   }
@@ -170,18 +183,18 @@
     }
     this._vpn.executeAGCLICommand(this.data?.deviceName, payload)
       .pipe(take(1)).subscribe({
-      next: (result: any) => {
-        if (result && result.contents === '') {
-          this._notification.showSuccess(`The VPN resource has been created successfully.`);
-          this.dialogRef.close(true);
-        } else {
-          this._notification.showError(`Error: ${result?.contents}`);
+        next: (result: any) => {
+          if (result && result.contents === '') {
+            this._notification.showSuccess(`The VPN resource has been created successfully.`);
+            this.dialogRef.close(true);
+          } else {
+            this._notification.showError(`Error: ${result?.contents}`);
+          }
+        },
+        error: (error: any) => {
+          this._notification.showError(`Error: ${error?.message}`);
         }
-      },
-      error: (error: any) => {
-        this._notification.showError(`Error: ${error?.message}`);
-      }
-    });
+      });
   }
 
   onCancel() {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-network-resources/vpn-resource-group-network-resources.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-network-resources/vpn-resource-group-network-resources.html	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-network-resources/vpn-resource-group-network-resources.html	(working copy)
@@ -1,42 +1,63 @@
-<mat-card class="page-card-1" appearance="filled">
-  <mat-card-header>
-    <div>
-      <button mat-raised-button (click)="addNetworkVPNResource()">Add</button>
+<div class="vpn-container">
+  <div class="table-toolbar">
+    <div class="filter-field">
+      <mat-form-field appearance="outline" class="filter-field">
+        <mat-label>Filter Resources</mat-label>
+        <input matInput (keyup)="applyFilter($event)" placeholder="Search..." #input>
+        <fa-icon [icon]="['fas', 'search']" matSuffix class="search-icon"></fa-icon>
+      </mat-form-field>
     </div>
-  </mat-card-header>
-</mat-card>
-<div class="table-container">
-  <table mat-table [dataSource]="dataSource" class="mat-elevation-z1">
-    <ng-container matColumnDef="serial">
-      <th mat-header-cell *matHeaderCellDef> No.</th>
-      <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial: paginator }}</td>
-    </ng-container>
-    <ng-container matColumnDef="resource">
-      <th mat-header-cell *matHeaderCellDef> Network Resource</th>
-      <td mat-cell *matCellDef="let element">{{ element?.netresource }}</td>
-    </ng-container>
-    <ng-container matColumnDef="type">
-      <th mat-header-cell *matHeaderCellDef> Resource Tye</th>
-      <td mat-cell *matCellDef="let element">{{ resourceType[element?.type] }}</td>
-    </ng-container>
-    <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> Action</th>
-      <td mat-cell *matCellDef="let element">
-        <div class="row-action a-link">
-          <fa-icon [icon]="['far', 'trash-can']" size="lg" class="delete-icon" matTooltip="Delete"
-                   (click)="deleteNetworkVPNResource(element)"></fa-icon>
-        </div>
-      </td>
-    </ng-container>
-    <tr mat-header-row *matHeaderRowDef="tableColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
-    <tr class="mat-row table-no-data" *matNoDataRow>
-      <td class="mat-cell" colspan="10">No results found.</td>
-    </tr>
-  </table>
-  <mat-paginator
-    [pageSizeOptions]="[10, 15, 20, 25]"
-    [length]="totalRecords"
-    showFirstLastButtons
-  ></mat-paginator>
-</div>
+    <div class="action-buttons">
+      <button mat-raised-button (click)="addNetworkVPNResource()">
+        <fa-icon [icon]="['fas', 'plus']"></fa-icon> Add Resource
+      </button>
+    </div>
+  </div>
+
+  <div class="table-container">
+    <div class="table-scroll-area">
+      <table mat-table [dataSource]="dataSource" matSort class="modern-table">
+        <!-- Serial No Column -->
+        <ng-container matColumnDef="serial">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> No.</th>
+          <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial:paginator }}</td>
+        </ng-container>
+
+        <!-- Resource Column -->
+        <ng-container matColumnDef="resource">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Resources</th>
+          <td mat-cell *matCellDef="let element">{{ element?.netresource }}</td>
+        </ng-container>
+        <!-- Type Column -->
+        <ng-container matColumnDef="type">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Type</th>
+          <td mat-cell *matCellDef="let element">
+            {{ resourceType[element?.type] ? resourceType[element?.type] : element?.type }}
+          </td>
+        </ng-container>
+        <!-- Action Column -->
+        <ng-container matColumnDef="action">
+          <th mat-header-cell *matHeaderCellDef> Action</th>
+          <td mat-cell *matCellDef="let element">
+            <div class="row-action">
+              <fa-icon [icon]="['far', 'trash-can']" size="lg" class="delete-icon" matTooltip="Delete"
+                (click)="deleteNetworkVPNResource(element)"></fa-icon>
+            </div>
+          </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="tableColumns; sticky: true"></tr>
+        <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
+        <tr class="mat-row table-no-data" *matNoDataRow>
+          <td class="mat-cell no-data-cell" colspan="10">
+            @if (input.value) {
+            No results found for "{{input.value}}"
+            } @else {
+            No results found.
+            }
+          </td>
+        </tr>
+      </table>
+    </div>
+    <mat-paginator [pageSizeOptions]="[10, 15, 20, 25]" [length]="totalRecords" 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/vpn-resource-group-network-resources/vpn-resource-group-network-resources.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-network-resources/vpn-resource-group-network-resources.scss	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-network-resources/vpn-resource-group-network-resources.scss	(working copy)
@@ -0,0 +1,188 @@
+:host {
+    display: block;
+    height: 100%;
+}
+
+.vpn-container {
+    padding: 12px;
+    background-color: #fafafa;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    // Header Toolbar (Filter + Actions)
+    .table-toolbar {
+        display: flex;
+        justify-content: flex-end; // Align filter to right
+        align-items: center;
+        margin-bottom: 0;
+        gap: 16px;
+
+        .filter-field {
+            width: 100%;
+            max-width: 400px;
+            margin-bottom: 0;
+
+            ::ng-deep .mat-mdc-text-field-wrapper {
+                background-color: white;
+                border-radius: 8px;
+                height: 40px !important;
+                padding: 0 12px !important;
+                display: flex;
+                align-items: center;
+            }
+
+            ::ng-deep .mat-mdc-form-field-infix {
+                padding: 0 !important;
+                min-height: 40px !important;
+                height: 40px !important;
+                display: flex;
+                align-items: center;
+            }
+
+            ::ng-deep .mat-mdc-input-element {
+                margin-top: 0;
+                position: relative;
+                top: -2px; // Slight adjustment for vertical centering
+            }
+
+            ::ng-deep .mat-mdc-floating-label {
+                top: 50% !important;
+                transform: translateY(-50%) !important;
+            }
+
+            // Hide subscript wrapper
+            ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+                display: none;
+            }
+
+            .search-icon {
+                color: #757575;
+                font-size: 16px;
+                margin-right: 8px;
+            }
+        }
+
+        .action-buttons {
+            display: flex;
+            gap: 12px;
+
+            button {
+                height: 40px; // Match filter height
+                border-radius: 8px;
+                background-color: #1976d2;
+                color: white;
+                font-weight: 500;
+                padding: 0 16px;
+                border: none;
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                cursor: pointer;
+                transition: background-color 0.2s;
+
+                &:hover {
+                    background-color: #1565c0;
+                }
+
+                fa-icon {
+                    font-size: 14px;
+                }
+            }
+        }
+    }
+
+    // Table Container
+    .table-container {
+        border-radius: 8px;
+        overflow: hidden;
+        border: 1px solid #e0e0e0;
+        background: white;
+        flex: 0 1 auto; // Shrink to fit content
+        display: flex;
+        flex-direction: column;
+        max-height: 100%; // Don't overflow parent
+
+        .table-scroll-area {
+            flex: 0 1 auto; // Allow shrink and auto height, don't force fill
+            overflow: auto;
+            width: 100%;
+            position: relative; // Establish context for sticky headers
+        }
+
+        .modern-table {
+            width: 100%;
+            border-collapse: collapse;
+
+            th.mat-mdc-header-cell {
+                background-color: #f5f5f5;
+                color: #424242;
+                font-weight: 600;
+                font-size: 13px;
+                padding: 0 16px;
+                border-bottom: 1px solid #e0e0e0;
+                z-index: 10;
+            }
+
+            td.mat-mdc-cell {
+                padding: 12px 16px;
+                font-size: 13px;
+                color: #333;
+                border-bottom: 1px solid #f0f0f0;
+
+                &.no-data-cell {
+                    text-align: center;
+                    padding: 48px;
+                    color: #757575;
+                    background-color: white;
+                }
+            }
+
+            tr.mat-mdc-row:hover {
+                background-color: #f9f9f9;
+            }
+
+            .row-action {
+                display: flex;
+                align-items: center;
+                gap: 12px;
+                cursor: pointer;
+
+                fa-icon {
+                    color: #1976d2;
+                    transition: color 0.2s;
+
+                    &:hover {
+                        color: #1565c0;
+                    }
+
+                    &.delete-icon {
+                        color: #c62828;
+
+                        &:hover {
+                            color: #b71c1c;
+                        }
+                    }
+
+                    &.success-icon {
+                        color: #2e7d32;
+
+                        &:hover {
+                            color: #1b5e20;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    mat-paginator {
+        background: transparent;
+        border-top: 1px solid #e0e0e0;
+        flex-shrink: 0;
+    }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-network-resources/vpn-resource-group-network-resources.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-network-resources/vpn-resource-group-network-resources.ts	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-network-resources/vpn-resource-group-network-resources.ts	(working copy)
@@ -1,15 +1,16 @@
-import {ChangeDetectorRef, Component, inject, OnInit, ViewChild} from '@angular/core';
-import {GlobalSerialPipe} from "../../../pipes/global-serial-pipe";
-import {MatTableDataSource} from "@angular/material/table";
-import {MatPaginator} from '@angular/material/paginator';
-import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog';
-import {ActivatedRoute} from '@angular/router';
-import {VpnService} from '../../../services/vpn-service';
-import {NotificationService} from '../../../services/notification';
-import {Confirmation} from '../../../services/confirmation';
-import {take} from 'rxjs/operators';
-import {SharedModule} from '../../../shared/shared-module';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import { ChangeDetectorRef, Component, inject, OnInit, ViewChild } from '@angular/core';
+import { MatSort } from '@angular/material/sort';
+import { GlobalSerialPipe } from "../../../pipes/global-serial-pipe";
+import { MatTableDataSource } from "@angular/material/table";
+import { MatPaginator } from '@angular/material/paginator';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
+import { ActivatedRoute } from '@angular/router';
+import { VpnService } from '../../../services/vpn-service';
+import { NotificationService } from '../../../services/notification';
+import { Confirmation } from '../../../services/confirmation';
+import { take } from 'rxjs/operators';
+import { SharedModule } from '../../../shared/shared-module';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-vpn-resource-group-network-resources',
@@ -28,6 +29,7 @@
   tableColumns: string[] = ['serial', 'resource', 'type', 'action'];
   dataSource: MatTableDataSource<any> = new MatTableDataSource();
   @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
   dialog = inject(MatDialog);
   dialogConfig = new MatDialogConfig();
 
@@ -51,11 +53,21 @@
 
   ngOnInit() {
     this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
     setTimeout(() => {
       this.getNetworkVPNResource();
     })
   }
 
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
   getNetworkVPNResource() {
     let payload: any = {
       cmd: `show vpn resource groupitem network "${this.groupName}"`,
@@ -64,19 +76,20 @@
     this.dataSource.data = [];
     this._vpn.executeAGCLICommand(this.deviceName, payload)
       .pipe(take(1)).subscribe({
-      next: (result: any) => {
-        if (result && result.contents && result.contents.length > 0) {
-          this.dataSource.data = result.contents;
+        next: (result: any) => {
+          if (result && result.contents && result.contents.length > 0) {
+            this.dataSource.data = result.contents;
+          }
+          this.dataSource.paginator = this.paginator;
+          this.dataSource.sort = this.sort;
+          this.totalRecords = this.dataSource.data.length;
+          this._cdRef.detectChanges();
+        },
+        error: (error: any) => {
+          this._notification.showError(`Error: ${error?.message}`);
+          this._cdRef.detectChanges();
         }
-        this.dataSource.paginator = this.paginator;
-        this.totalRecords = this.dataSource.data.length;
-        this._cdRef.detectChanges();
-      },
-      error: (error: any) => {
-        this._notification.showError(`Error: ${error?.message}`);
-        this._cdRef.detectChanges();
-      }
-    });
+      });
   }
 
   addNetworkVPNResource() {
@@ -111,18 +124,18 @@
         }
         this._vpn.executeAGCLICommand(this.deviceName, payload)
           .pipe(take(1)).subscribe({
-          next: (result: any) => {
-            if (result && result.contents === '') {
-              this._notification.showSuccess(`The vpn resource has been deleted successfully.`);
-              this.getNetworkVPNResource();
+            next: (result: any) => {
+              if (result && result.contents === '') {
+                this._notification.showSuccess(`The vpn resource has been deleted successfully.`);
+                this.getNetworkVPNResource();
+              }
+              this._cdRef.detectChanges();
+            },
+            error: (error: any) => {
+              this._notification.showError(`Error: ${error?.message}`);
+              this._cdRef.detectChanges();
             }
-            this._cdRef.detectChanges();
-          },
-          error: (error: any) => {
-            this._notification.showError(`Error: ${error?.message}`);
-            this._cdRef.detectChanges();
-          }
-        });
+          });
       }
     });
   }
@@ -172,18 +185,18 @@
     }
     this._vpn.executeAGCLICommand(this.data?.deviceName, payload)
       .pipe(take(1)).subscribe({
-      next: (result: any) => {
-        if (result && result.contents === '') {
-          this._notification.showSuccess(`The VPN resource has been created successfully.`);
-          this.dialogRef.close(true);
-        } else {
-          this._notification.showError(`Error: ${result?.contents}`);
+        next: (result: any) => {
+          if (result && result.contents === '') {
+            this._notification.showSuccess(`The VPN resource has been created successfully.`);
+            this.dialogRef.close(true);
+          } else {
+            this._notification.showError(`Error: ${result?.contents}`);
+          }
+        },
+        error: (error: any) => {
+          this._notification.showError(`Error: ${error?.message}`);
         }
-      },
-      error: (error: any) => {
-        this._notification.showError(`Error: ${error?.message}`);
-      }
-    });
+      });
   }
 
   onCancel() {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/topology/topology.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/topology/topology.html	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/topology/topology.html	(working copy)
@@ -1 +1,4 @@
-<app-tab-container [tabDefinitions]="tabDefinitions" paramKey="tab"/>
+<div class="topology-container">
+
+    <app-tab-container [tabDefinitions]="tabDefinitions" paramKey="tab" />
+</div>
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/topology/topology.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/topology/topology.scss	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/topology/topology.scss	(working copy)
@@ -0,0 +1,9 @@
+.topology-container {
+    padding: 4px 5px; // Match General Settings
+    background-color: #fafafa;
+    font-family: 'Roboto', sans-serif;
+    height: 100%;
+    box-sizing: border-box;
+
+
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/topology/topology.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/topology/topology.ts	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/topology/topology.ts	(working copy)
@@ -1,8 +1,9 @@
-import {Component, OnInit} from '@angular/core';
-import {SharedModule} from '../../shared/shared-module';
-import {TopologySlbVirtualService} from '../sub-components/topology-slb-virtual-service/topology-slb-virtual-service';
-import {TopologySlbRealService} from '../sub-components/topology-slb-real-service/topology-slb-real-service';
-import {TabContainer, TabDefinition} from '../common/tab-container/tab-container';
+import { Component, OnInit } from '@angular/core';
+import { SharedModule } from '../../shared/shared-module';
+import { TopologySlbVirtualService } from '../sub-components/topology-slb-virtual-service/topology-slb-virtual-service';
+import { TopologySlbRealService } from '../sub-components/topology-slb-real-service/topology-slb-real-service';
+import { TopologyGraph } from '../sub-components/topology-graph/topology-graph';
+import { TabContainer, TabDefinition } from '../common/tab-container/tab-container';
 
 @Component({
   selector: 'app-topology',
@@ -16,7 +17,8 @@
 export class Topology {
 
   tabDefinitions: TabDefinition[] = [
-    {label: 'SLB Virtual Services', component: TopologySlbVirtualService, paramName: 'VS'},
-    {label: 'SLB Real Services', component: TopologySlbRealService, paramName: 'RS'},
+    { label: 'Visual Topology', component: TopologyGraph, paramName: 'graph', icon: ['fas', 'project-diagram'] },
+    { label: 'SLB Virtual Services', component: TopologySlbVirtualService, paramName: 'VS', icon: ['fas', 'globe'] },
+    { label: 'SLB Real Services', component: TopologySlbRealService, paramName: 'RS', icon: ['fas', 'server'] },
   ]
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/vpn-management/vpn-management.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/vpn-management/vpn-management.html	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/vpn-management/vpn-management.html	(working copy)
@@ -1,49 +1,58 @@
-<mat-card class="page-card-1" appearance="filled">
-  <mat-card-header>
-    <mat-card-title>SSL VPN Management</mat-card-title>
-  </mat-card-header>
-</mat-card>
-<div class="table-container">
-  <table mat-table [dataSource]="dataSource" class="mat-elevation-z1">
-    <ng-container matColumnDef="serial">
-      <th mat-header-cell *matHeaderCellDef> No.</th>
-      <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial }}</td>
-    </ng-container>
-    <ng-container matColumnDef="serviceName">
-      <th mat-header-cell *matHeaderCellDef> Service Name</th>
-      <td mat-cell *matCellDef="let element">
-        <a class="details-page-link" (click)="goToDetails(element)">{{element?.name}}</a>
-      </td>
-    </ng-container>
-    <ng-container matColumnDef="deviceName">
-      <th mat-header-cell *matHeaderCellDef> Device Name</th>
-      <td mat-cell *matCellDef="let element">{{element?.device_name}}</td>
-    </ng-container>
-    <ng-container matColumnDef="deviceGroup">
-      <th mat-header-cell *matHeaderCellDef> Device Group</th>
-      <td mat-cell *matCellDef="let element"> {{ element?.device_group }}</td>
-    </ng-container>
-    <ng-container matColumnDef="ip">
-      <th mat-header-cell *matHeaderCellDef> IP Address</th>
-      <td mat-cell *matCellDef="let element"> {{ element?.ip_str }}</td>
-    </ng-container>
-    <ng-container matColumnDef="domain">
-      <th mat-header-cell *matHeaderCellDef> Domain</th>
-      <td mat-cell *matCellDef="let element"> {{ element?.domain_str }}</td>
-    </ng-container>
-    <ng-container matColumnDef="type">
-      <th mat-header-cell *matHeaderCellDef> Type</th>
-      <td mat-cell *matCellDef="let element"> {{ element?.type }}</td>
-    </ng-container>
-    <tr mat-header-row *matHeaderRowDef="vpnColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: vpnColumns;"></tr>
-    <tr class="mat-row table-no-data" *matNoDataRow>
-      <td class="mat-cell" colspan="10">No results found.</td>
-    </tr>
-  </table>
-  <mat-paginator
-    [pageSizeOptions]="[10, 15, 20, 25]"
-    [length]="totalRecords"
-    showFirstLastButtons
-  ></mat-paginator>
-</div>
+<div class="vpn-container">
+  <div class="table-toolbar">
+    <mat-form-field appearance="outline" class="filter-field">
+      <mat-label>Filter SSL VPN Services</mat-label>
+      <input matInput (keyup)="applyFilter($event)" placeholder="Search..." #input>
+      <fa-icon [icon]="['fas', 'search']" matSuffix class="search-icon"></fa-icon>
+    </mat-form-field>
+  </div>
+
+  <div class="table-container">
+    <div class="table-scroll-area">
+      <table mat-table [dataSource]="dataSource" matSort class="modern-table">
+        <ng-container matColumnDef="serial">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> No.</th>
+          <td mat-cell *matCellDef="let element; let i = index;"> {{ i | globalSerial:paginator }}</td>
+        </ng-container>
+        <ng-container matColumnDef="serviceName">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Service Name</th>
+          <td mat-cell *matCellDef="let element">
+            <a class="details-page-link" (click)="goToDetails(element)">{{element?.name}}</a>
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="deviceName">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Device Name</th>
+          <td mat-cell *matCellDef="let element">{{element?.device_name}}</td>
+        </ng-container>
+        <ng-container matColumnDef="deviceGroup">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Device Group</th>
+          <td mat-cell *matCellDef="let element"> {{ element?.device_group }}</td>
+        </ng-container>
+        <ng-container matColumnDef="ip">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> IP Address</th>
+          <td mat-cell *matCellDef="let element"> {{ element?.ip_str }}</td>
+        </ng-container>
+        <ng-container matColumnDef="domain">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Domain</th>
+          <td mat-cell *matCellDef="let element"> {{ element?.domain_str }}</td>
+        </ng-container>
+        <ng-container matColumnDef="type">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Type</th>
+          <td mat-cell *matCellDef="let element"> {{ element?.type }}</td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="vpnColumns; sticky: true"></tr>
+        <tr mat-row *matRowDef="let row; columns: vpnColumns;"></tr>
+        <tr class="mat-row table-no-data" *matNoDataRow>
+          <td class="mat-cell no-data-cell" colspan="10">
+            @if (input.value) {
+            No results found for "{{input.value}}"
+            } @else {
+            No results found.
+            }
+          </td>
+        </tr>
+      </table>
+    </div>
+    <mat-paginator [pageSizeOptions]="[10, 15, 20, 25]" [length]="totalRecords" 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/vpn-management/vpn-management.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/vpn-management/vpn-management.scss	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/vpn-management/vpn-management.scss	(working copy)
@@ -0,0 +1,139 @@
+:host {
+    display: block;
+    height: 100%;
+}
+
+.vpn-container {
+    padding: 12px;
+    background-color: #fafafa;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    // Header Toolbar (Filter)
+    .table-toolbar {
+        display: flex;
+        justify-content: flex-end; // Align filter to right
+        align-items: center;
+        margin-bottom: 0;
+        gap: 16px;
+
+        .filter-field {
+            width: 100%;
+            max-width: 400px;
+            margin-bottom: 0;
+
+            ::ng-deep .mat-mdc-text-field-wrapper {
+                background-color: white;
+                border-radius: 8px;
+                height: 40px !important;
+                padding: 0 12px !important;
+                display: flex;
+                align-items: center;
+            }
+
+            ::ng-deep .mat-mdc-form-field-infix {
+                padding: 0 !important; // Zero padding to remove extra height
+                min-height: 40px !important;
+                height: 40px !important;
+                display: flex;
+                align-items: center;
+            }
+
+            ::ng-deep .mat-mdc-input-element {
+                margin-top: 0;
+                position: relative;
+                top: -2px; // Slight adjustment for vertical centering
+            }
+
+            ::ng-deep .mat-mdc-floating-label {
+                top: 50% !important;
+                transform: translateY(-50%) !important;
+            }
+
+            // Hide the subscript wrapper (hints/errors) to fix vertical alignment
+            ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+                display: none;
+            }
+
+            .search-icon {
+                color: #757575;
+                font-size: 16px;
+                margin-right: 8px;
+            }
+        }
+    }
+
+    // Table Container
+    .table-container {
+        border-radius: 8px;
+        overflow: hidden;
+        border: 1px solid #e0e0e0;
+        background: white;
+        flex: 0 1 auto; // Shrink to fit content
+        display: flex;
+        flex-direction: column;
+        max-height: 100%; // Don't overflow parent
+
+        .table-scroll-area {
+            flex: 0 1 auto; // Allow shrink and auto height, don't force fill
+            overflow: auto;
+            width: 100%;
+            position: relative; // Establish context for sticky headers
+        }
+
+        .modern-table {
+            width: 100%;
+            border-collapse: collapse;
+
+            th.mat-mdc-header-cell {
+                background-color: #f5f5f5;
+                color: #424242;
+                font-weight: 600;
+                font-size: 13px;
+                padding: 0 16px;
+                border-bottom: 1px solid #e0e0e0;
+                z-index: 10;
+            }
+
+            td.mat-mdc-cell {
+                padding: 12px 16px;
+                font-size: 13px;
+                color: #333;
+                border-bottom: 1px solid #f0f0f0;
+
+                &.no-data-cell {
+                    text-align: center;
+                    padding: 48px;
+                    color: #757575;
+                    background-color: white;
+                }
+            }
+
+            tr.mat-mdc-row:hover {
+                background-color: #f9f9f9;
+            }
+
+            .details-page-link {
+                color: #1976d2;
+                font-weight: 500;
+                text-decoration: none;
+                cursor: pointer;
+
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+        }
+    }
+
+    mat-paginator {
+        background: transparent;
+        border-top: 1px solid #e0e0e0;
+        flex-shrink: 0;
+    }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/vpn-management/vpn-management.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/vpn-management/vpn-management.ts	(revision 2805)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/vpn-management/vpn-management.ts	(working copy)
@@ -1,14 +1,15 @@
-import {Component, inject, ViewChild} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
-import {SharedModule} from '../../shared/shared-module';
-import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
-import {MatPaginator} from '@angular/material/paginator';
-import {VpnService} from '../../services/vpn-service';
-import {take} from 'rxjs/operators';
-import {NotificationService} from '../../services/notification';
-import {DeviceService} from '../../services/device-service';
-import {Router} from '@angular/router';
-import {GlobalSerialPipe} from '../../pipes/global-serial-pipe';
+import { Component, inject, ViewChild, OnInit } from '@angular/core';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
+import { SharedModule } from '../../shared/shared-module';
+import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
+import { MatPaginator } from '@angular/material/paginator';
+import { VpnService } from '../../services/vpn-service';
+import { take } from 'rxjs/operators';
+import { NotificationService } from '../../services/notification';
+import { DeviceService } from '../../services/device-service';
+import { Router } from '@angular/router';
+import { GlobalSerialPipe } from '../../pipes/global-serial-pipe';
 
 @Component({
   selector: 'app-vpn-management',
@@ -16,7 +17,7 @@
   templateUrl: './vpn-management.html',
   styleUrl: './vpn-management.scss'
 })
-export class VpnManagement {
+export class VpnManagement implements OnInit {
 
   totalRecords: number = 0;
   vpnColumns: string[] = ['serial', 'serviceName', 'deviceName', 'deviceGroup', 'ip', 'domain', 'type'];
@@ -26,6 +27,7 @@
   dialogConfig = new MatDialogConfig();
 
   @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
   selectedVSite: any = null;
 
   constructor(
@@ -35,51 +37,65 @@
     private _router: Router
   ) {
     // this.getVpnServices();
+  }
+
+  ngOnInit() {
     this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
     this.getAMPDevices();
   }
 
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
   getAMPDevices() {
     this.dataSource.data = [];
     this.totalRecords = 0;
     this._device.getDeviceGroups()
       .pipe(take(1)).subscribe({
-      next: (result: any) => {
-        let devices = result.devices;
-        if (devices.length > 0) {
-          devices.forEach((_device: any) => {
-            if (_device.type.toLowerCase() === 'ag' || _device.type.toLowerCase() === 'vxag') {
-              this.getVpnServices(_device?.name, _device?.device_group);
-            }
-          })
+        next: (result: any) => {
+          let devices = result.devices;
+          if (devices.length > 0) {
+            devices.forEach((_device: any) => {
+              if (_device.type.toLowerCase() === 'ag' || _device.type.toLowerCase() === 'vxag') {
+                this.getVpnServices(_device?.name, _device?.device_group);
+              }
+            })
+          }
+        },
+        error: error => {
+          this._notification.showError(`Error: ${error?.message}`);
         }
-      },
-      error: error => {
-        this._notification.showError(`Error: ${error?.message}`);
-      }
-    })
+      })
   }
 
   getVpnServices(aGName: string, device_group: string): void {
-    let payload = {cmd: 'show virtual site config'}
+    let payload = { cmd: 'show virtual site config' }
     this._vpn.getVPNServices(aGName, payload)
       .pipe(take(1)).subscribe({
-      next: (result: any) => {
-        if (result && result.contents && result.contents.length > 0) {
-          let vsites = this.processVirtualSiteData(result?.contents);
-          vsites.forEach((vsite: any) => {
-            vsite.device_name = aGName;
-            vsite.device_group = device_group;
-            this.dataSource.data.push(vsite);
-          })
-          this.dataSource.paginator = this.paginator;
-          this.totalRecords = this.dataSource.data.length;
+        next: (result: any) => {
+          if (result && result.contents && result.contents.length > 0) {
+            let vsites = this.processVirtualSiteData(result?.contents);
+            vsites.forEach((vsite: any) => {
+              vsite.device_name = aGName;
+              vsite.device_group = device_group;
+              this.dataSource.data.push(vsite);
+            })
+            this.dataSource.paginator = this.paginator;
+            this.dataSource.sort = this.sort;
+            this.totalRecords = this.dataSource.data.length;
+          }
+        },
+        error: error => {
+          this._notification.showError(`Error: ${error?.message}`);
         }
-      },
-      error: error => {
-        this._notification.showError(`Error: ${error?.message}`);
-      }
-    })
+      })
   }
 
   processVirtualSiteData(confList: any[]) {
@@ -169,7 +185,7 @@
   goToDetails(vsite: any) {
     this.selectedVSite = vsite;
     this._router.navigate(['/device/ssl-vpn/details', vsite?.device_name, vsite?.name], {
-      state: {serviceDetails: this.selectedVSite}
+      state: { serviceDetails: this.selectedVSite }
     });
   }
 }
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 2807)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/shared/shared-module.ts	(working copy)
@@ -30,6 +30,7 @@
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatTimepickerModule } from '@angular/material/timepicker';
+import { MatSortModule } from '@angular/material/sort';
 
 
 // Third-Party Modules
@@ -62,11 +63,12 @@
   solidIcons.faHouseSignal, solidIcons.faMagnifyingGlassChart, solidIcons.faFileLines,
   solidIcons.faDesktop, solidIcons.faNetworkWired, solidIcons.faCloudArrowUp,
   solidIcons.faPeopleLine, solidIcons.faMicrochip, solidIcons.faSignal, solidIcons.faBell,
+  solidIcons.faProjectDiagram, solidIcons.faGlobe, solidIcons.faSearch,
   solidIcons.faLaptopCode, solidIcons.faHardDrive, solidIcons.faSpinner, solidIcons.faBookmark,
   solidIcons.faPause, solidIcons.faEnvelope,
-  solidIcons.faChevronDown, solidIcons.faPlay, solidIcons.faPlusCircle,
+  solidIcons.faChevronDown, solidIcons.faPlay, solidIcons.faPlusCircle, solidIcons.faPlus, solidIcons.faFileImport,
   solidIcons.faCheckCircle, solidIcons.faExclamationCircle, solidIcons.faExclamationTriangle, solidIcons.faQuestion,
-  solidIcons.faDownload, solidIcons.faFolderTree, solidIcons.faRotateRight,
+  solidIcons.faDownload, solidIcons.faFolderTree, solidIcons.faRotateRight, solidIcons.faExchangeAlt,
 ];
 
 const customRegularIcons = [
@@ -111,6 +113,7 @@
   MatPaginatorModule,
   MatProgressBarModule,
   MatStepperModule,
+  MatSortModule,
 ];
 
 const thirdPartyModules = [