Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/angular.json
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/angular.json	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/angular.json	(working copy)
@@ -29,12 +29,7 @@
             ],
             "styles": [
               "src/styles.scss"
-            ],
-            "server": "src/main.server.ts",
-            "outputMode": "server",
-            "ssr": {
-              "entry": "src/server.ts"
-            }
+            ]
           },
           "configurations": {
             "production": {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.config.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.config.ts	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.config.ts	(working copy)
@@ -10,7 +10,8 @@
 import {provideAnimations} from '@angular/platform-browser/animations';
 import {csrfInterceptorFn} from './interceptors/csrf-interceptor';
 import {loadingInterceptorFn} from './interceptors/loading-interceptor-interceptor';
-import {Auth} from './services/auth'; // Correct case
+import {Auth} from './services/auth';
+import {provideNativeDateAdapter} from '@angular/material/core'; // Correct case
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -23,5 +24,6 @@
       withInterceptors([csrfInterceptorFn, loadingInterceptorFn])
     ),
     provideAnimations(),
+    provideNativeDateAdapter(),
   ]
 };
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.html	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.html	(working copy)
@@ -1,13 +1,13 @@
-<div class="app-wrapper" [class.sidebar-collapsed]="isSidebarCollapsed && showNavigation">
-  @if (currentUser && showNavigation) {
+<div class="app-wrapper" [class.sidebar-collapsed]="(isSidebarCollapsed$ | async) && (showNavigation$ | async)">
+  @if ((currentUser$ | async) && (showNavigation$ | async)) {
     <app-navigation></app-navigation>
   }
   <div class="main-content"
-       [class.no-navigation-margin]="!currentUser && showNavigation"
+       [class.no-navigation-margin]="!(currentUser$ | async) && (showNavigation$ | async)"
        [ngStyle]="{
-         marginLeft: showNavigation ? (isSidebarCollapsed ? '60px' : '250px') : '0px',
-         width: showNavigation ? (isSidebarCollapsed ? 'calc(100% - 60px)' : 'calc(100% - 250px)') : '100%',
-         marginTop: showNavigation ? (isSidebarCollapsed ? '45px' : '45px') : '0px',
+         marginLeft: (showNavigation$ | async) ? ((isSidebarCollapsed$ | async) ? '60px' : '250px') : '0px',
+         width: (showNavigation$ | async) ? ((isSidebarCollapsed$ | async) ? 'calc(100% - 60px)' : 'calc(100% - 250px)') : '100%',
+         marginTop: (showNavigation$ | async) ? '45px' : '0px'
        }">
     <div class="main-content-inner">
       @if (loading$ | async) {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.ts	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.ts	(working copy)
@@ -1,8 +1,8 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {Router, RouterOutlet, NavigationEnd} from '@angular/router';
 import {Auth} from './services/auth';
-import {Subscription} from 'rxjs';
-import {filter} from 'rxjs/operators';
+import {Observable, Subscription, combineLatest} from 'rxjs';
+import {filter, map, startWith} from 'rxjs/operators';
 import {Navigation} from './components/navigation/navigation';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {User} from './models/user';
@@ -13,19 +13,21 @@
 
 @Component({
   selector: 'app-root',
+  standalone: true,
   imports: [RouterOutlet, Navigation, FontAwesomeModule, NgStyle, AsyncPipe, Loading],
   templateUrl: './app.html',
   styleUrl: './app.scss'
 })
 export class App implements OnInit, OnDestroy {
-  currentUser: User | null = null;
-  isSidebarCollapsed: boolean = true;
-  loading$;
-  protected title = 'Array Management Platform';
-  private authSubscription!: Subscription;
+  currentUser$: Observable<User | null>;
+  isSidebarCollapsed$: Observable<boolean>;
+  loading$: Observable<boolean>;
 
-  showNavigation: boolean = true;
+  showNavigation$: Observable<boolean>;
 
+  protected title = 'Array Management Platform';
+  private subscriptions: Subscription[] = [];
+
   constructor(
     private authService: Auth,
     private layoutService: Layout,
@@ -33,39 +35,30 @@
     private router: Router
   ) {
     this.loading$ = this.loadingService.loading$;
-  }
 
-  ngOnInit(): void {
-    this.authSubscription = this.authService.currentUser.subscribe(user => {
-      this.currentUser = user;
-      this.checkNavigationVisibility(this.router.url);
-    });
+    this.isSidebarCollapsed$ = this.layoutService.isSidebarCollapsed$;
 
-    this.layoutService.getSidebarCollapsed().subscribe(
-      (state) => this.isSidebarCollapsed = state
+    this.currentUser$ = this.authService.currentUser;
+
+    this.showNavigation$ = combineLatest([
+      this.currentUser$,
+      this.router.events.pipe(
+        filter(event => event instanceof NavigationEnd),
+        map((event: NavigationEnd) => event.urlAfterRedirects),
+        startWith(this.router.url)
+      )
+    ]).pipe(
+      map(([user, url]) => {
+        const webConsoleStandalonePath = '/inventory/web-console';
+        return user !== null && !url.includes(webConsoleStandalonePath);
+      })
     );
+  }
 
-    this.router.events.pipe(
-      filter(event => event instanceof NavigationEnd)
-    ).subscribe((event: NavigationEnd) => {
-      this.checkNavigationVisibility(event.urlAfterRedirects);
-    });
-
-    this.checkNavigationVisibility(this.router.url);
+  ngOnInit(): void {
   }
 
   ngOnDestroy(): void {
-    if (this.authSubscription) {
-      this.authSubscription.unsubscribe();
-    }
+    this.subscriptions.forEach(sub => sub.unsubscribe());
   }
-
-  private checkNavigationVisibility(url: string): void {
-    const webConsoleStandalonePath = '/inventory/web-console';
-    this.showNavigation = this.currentUser !== null && !url.includes(webConsoleStandalonePath);
-  }
-
-  onSidebarToggle(collapsed: boolean): void {
-    this.isSidebarCollapsed = collapsed;
-  }
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/general-settings/general-settings.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/general-settings/general-settings.html	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/general-settings/general-settings.html	(working copy)
@@ -1,14 +1,60 @@
-<mat-tab-group animationDuration="0ms">
-  <mat-tab label="Host">Content 1</mat-tab>
-  <mat-tab label="System Update">Content 2</mat-tab>
-  <mat-tab label="System Time">Content 3</mat-tab>
-  <mat-tab label="NTP">Content 3</mat-tab>
-  <mat-tab label="Network">Content 3</mat-tab>
-  <mat-tab label="License">Content 3</mat-tab>
-  <mat-tab label="Back & Restore Settings">Content 3</mat-tab>
-  <mat-tab label="System HA">Content 3</mat-tab>
-  <mat-tab label="WebUI">Content 3</mat-tab>
-  <mat-tab label="Admin AAA">Content 3</mat-tab>
-  <mat-tab label="Log Settings">Content 3</mat-tab>
-  <mat-tab label="System Backup & Restore">Content 3</mat-tab>
-</mat-tab-group>
+<div class="tab-container">
+  <mat-tab-group animationDuration="0ms">
+    <mat-tab label="Host">
+      <ng-template matTabContent>
+        <div class="tab-content">
+          <app-host></app-host>
+        </div>
+      </ng-template>
+    </mat-tab>
+    <mat-tab label="License">
+      <ng-template matTabContent>
+        <div class="tab-content">
+          <app-license></app-license>
+        </div>
+      </ng-template>
+    </mat-tab>
+    <mat-tab label="Date & Time">
+      <ng-template matTabContent>
+        <div class="tab-content">
+          <app-system-time></app-system-time>
+        </div>
+      </ng-template>
+    </mat-tab>
+    <mat-tab label="System Update">
+      <ng-template matTabContent>
+        <div class="tab-content">
+          <app-system-update></app-system-update>
+        </div>
+      </ng-template>
+    </mat-tab>
+    <mat-tab label="Network">
+      <ng-template matTabContent>
+        <div class="tab-content">
+          <app-network></app-network>
+        </div>
+      </ng-template>
+    </mat-tab>
+    <mat-tab label="AAA">
+      <ng-template matTabContent>
+        <div class="tab-content">
+          <app-admin-aaa></app-admin-aaa>
+        </div>
+      </ng-template>
+    </mat-tab>
+    <mat-tab label="Log Settings">
+      <ng-template matTabContent>
+        <div class="tab-content">
+          <app-log-settings></app-log-settings>
+        </div>
+      </ng-template>
+    </mat-tab>
+    <mat-tab label="Backup & Restore">
+      <ng-template matTabContent>
+        <div class="tab-content">
+          <app-system-backup-restore></app-system-backup-restore>
+        </div>
+      </ng-template>
+    </mat-tab>
+  </mat-tab-group>
+</div>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/general-settings/general-settings.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/general-settings/general-settings.scss	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/general-settings/general-settings.scss	(working copy)
@@ -2,3 +2,60 @@
   position: relative;
   z-index: 100; /* Ensure tabs are above navigation */
 }
+
+html, body {
+  height: 100%;
+  margin: 0;
+}
+
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.tab-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+mat-tab-group {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.mat-mdc-tab-body-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.mat-mdc-tab-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.tab-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+app-host {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/general-settings/general-settings.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/general-settings/general-settings.ts	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/general-settings/general-settings.ts	(working copy)
@@ -1,13 +1,22 @@
 import {Component} from '@angular/core';
-import {MatTab, MatTabGroup} from '@angular/material/tabs';
+import {Host} from '../sub-components/host/host';
+import {LogSettings} from '../sub-components/log-settings/log-settings';
+import {SharedModule} from '../../shared/shared-module';
+import {License} from '../sub-components/license/license';
+import {SystemTime} from '../sub-components/system-time/system-time';
+import {SystemUpdate} from '../sub-components/system-update/system-update';
+import {Network} from '../sub-components/network/network';
+import {AdminAaa} from '../sub-components/admin-aaa/admin-aaa';
+import {SystemBackupRestore} from '../sub-components/system-backup-restore/system-backup-restore';
 
 @Component({
   selector: 'app-general-settings',
   standalone: true,
-  imports: [MatTabGroup, MatTab],
+  imports: [SharedModule, Host, LogSettings, License, SystemTime, SystemUpdate, Network, AdminAaa, SystemBackupRestore],
   templateUrl: './general-settings.html',
   styleUrl: './general-settings.scss',
 })
 export class GeneralSettings {
-
+  constructor() {
+  }
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/navigation/navigation.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/navigation/navigation.ts	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/navigation/navigation.ts	(working copy)
@@ -1,17 +1,16 @@
-import { Component, HostListener, OnInit } from '@angular/core';
-import { Auth } from '../../services/auth';
-import { SharedModule } from '../../shared/shared-module';
-import { MenuItem } from '../../models/menu-item';
-import { Observable } from 'rxjs';
-import { MENU_ITEMS } from '../../constants/menu';
-import { map, filter, take } from 'rxjs/operators';
-import { Router, NavigationEnd } from '@angular/router';
+import {Component, HostListener, OnInit} from '@angular/core';
+import {Auth} from '../../services/auth';
+import {SharedModule} from '../../shared/shared-module';
+import {MenuItem} from '../../models/menu-item';
+import {Observable} from 'rxjs';
+import {MENU_ITEMS} from '../../constants/menu';
+import {filter, map, take} from 'rxjs/operators';
+import {NavigationEnd, Router} from '@angular/router';
 import {Layout} from '../../services/layout';
-import {NgOptimizedImage} from '@angular/common';
 
 @Component({
   selector: 'app-navigation',
-  imports: [SharedModule, NgOptimizedImage],
+  imports: [SharedModule],
   templateUrl: './navigation.html',
   styleUrl: './navigation.scss'
 })
@@ -21,7 +20,8 @@
   filteredMenu$: Observable<MenuItem[]> | undefined;
   private menuItems: MenuItem[] = [];
 
-  constructor(private authService: Auth, private router: Router, private layoutService: Layout) {}
+  constructor(private authService: Auth, private router: Router, private layoutService: Layout) {
+  }
 
   ngOnInit() {
     this.isSidebarCollapsed = localStorage.getItem('sidebarCollapsed') === 'true';
@@ -35,7 +35,7 @@
         ...item,
         expanded: savedState[item.label] ?? item.expanded ?? false,
         children: item.children
-          ? item.children.map(child => ({ ...child, expanded: child.expanded ?? false }))
+          ? item.children.map(child => ({...child, expanded: child.expanded ?? false}))
           : undefined
       }));
       this.updateMenuState();
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-details/device-details.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-details/device-details.html	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-details/device-details.html	(working copy)
@@ -66,7 +66,7 @@
     <form
       (ngSubmit)="updateDeviceSettings()"
       [formGroup]="deviceSettingsForm"
-      class="device-settings-form"
+      class="common-form"
     >
       <div class="form-field-wrapper">
         <label for="portNumber" class="form-label">API Port *</label>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-details/device-details.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-details/device-details.scss	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-details/device-details.scss	(working copy)
@@ -26,34 +26,6 @@
   font-size: medium;
 }
 
-.device-settings-form {
-  padding: 20px;
-  width: 100%;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .form-field-wrapper {
-    display: flex; /* Use flexbox to align items horizontally */
-    align-items: center; /* Vertically align items in the middle */
-    gap: 15px; /* Add some space between the label and the form field */
-    margin-bottom: 20px; /* Space between rows if you have multiple fields */
-  }
-
-  .form-label {
-    font-weight: 500;
-    min-width: 150px;
-    text-align: right;
-  }
-
-  .form-field-wrapper mat-form-field {
-    flex-grow: 1;
-    min-width: 300px;
-    max-width: 600px;
-  }
-}
-
 .device-config {
   padding: 20px;
   //background-color: #f9f9f9;
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-groups/device-groups.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-groups/device-groups.html	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-groups/device-groups.html	(working copy)
@@ -1,7 +1,7 @@
 <mat-card class="page-card" appearance="filled">
   <mat-card-header>
     <mat-card-title>Device Groups</mat-card-title>
-    <div class="page-header-button-container">
+    <div>
       <button mat-raised-button (click)="addDeviceGroup()">Add</button>
     </div>
   </mat-card-header>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/add-device.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/add-device.html	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/add-device.html	(working copy)
@@ -172,6 +172,15 @@
       <label for="webuiPortNumber" class="form-label">WebUI Port *</label>
       <mat-form-field appearance="outline" subscriptSizing="dynamic">
         <input id="webuiPortNumber" formControlName="webuiPortNumber" matInput placeholder="8888" type="number"/>
+        @if (deviceForm.get('webuiPortNumber')?.invalid && deviceForm.get('webuiPortNumber')?.touched) {
+          <mat-error>
+            @if (deviceForm.get('webuiPortNumber')?.errors?.['required']) {
+              Port number is required.
+            } @else if (deviceForm.get('webuiPortNumber')?.errors) {
+              Invalid port number, should range from 0-65535.
+            }
+          </mat-error>
+        }
       </mat-form-field>
     </div>
     @if (!['AG', 'vxAG'].includes(deviceForm.get('deviceType')?.value)) {
@@ -197,7 +206,7 @@
         </mat-form-field>
       </div>
       <div class="form-field-wrapper">
-        <label for="webuiPassword" class="form-label">WebUI Password *</label>
+        <label for="webuiPassword" class="form-label">WebUI Password</label>
         <mat-form-field appearance="outline" subscriptSizing="dynamic">
           <input
             id="webuiPassword"
@@ -257,7 +266,7 @@
     </div>
     @if (deviceForm.get('deviceGroupSource')?.value === 'created') {
       <div class="form-field-wrapper">
-        <label for="groupName" class="form-label">Device Type</label>
+        <label for="groupName" class="form-label">Group Name *</label>
         <mat-form-field appearance="outline" subscriptSizing="dynamic">
           <mat-select formControlName="groupName">
             @for (type of data?.groups; track type) {
@@ -277,7 +286,7 @@
       </div>
     } @else {
       <div class="form-field-wrapper">
-        <label for="groupName" class="form-label">Group Name</label>
+        <label for="groupName" class="form-label">Group Name *</label>
         <mat-form-field appearance="outline" subscriptSizing="dynamic">
           <input id="groupName" formControlName="groupName" matInput placeholder="Group Name" type="text"/>
           @if (deviceForm.get('groupName')?.invalid && deviceForm.get('groupName')?.touched) {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices.html	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices.html	(working copy)
@@ -1,7 +1,7 @@
 <mat-card class="page-card" appearance="filled">
   <mat-card-header>
     <mat-card-title>Managed Devices</mat-card-title>
-    <div class="page-header-button-container">
+    <div>
       <button mat-raised-button (click)="addDevice()">Add</button> &nbsp;&nbsp;
       <button mat-raised-button (click)="getDeviceBuildInfo()">Check Build Info</button>
     </div>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices.ts	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices.ts	(working copy)
@@ -10,8 +10,11 @@
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {CustomValidators} from '../../../utils/custom-validators';
 import {Router} from '@angular/router';
-import {KeyValuePair} from '../device-details/device-details';
 
+export interface KeyValuePair {
+  key: string;
+  value: any;
+}
 @Component({
   selector: 'app-devices', imports: [SharedModule], templateUrl: './devices.html', styleUrl: './devices.scss'
 })
@@ -144,13 +147,11 @@
     });
   }
   openWebConsole(device: any): void {
-    console.log(device);
     const url = this.router.serializeUrl(
       this.router.createUrlTree(['/inventory/web-console'], {
         queryParams: { device_id: device?.id, device_name: device?.name }
       })
     );
-    // const url = `/web-console-standalone.html?device_id=${encodeURIComponent(device?.id)}&device_name=${encodeURIComponent(device?.name)}`;
     window.open(url, '_blank');
   }
 
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/host/host.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/host/host.html	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/host/host.html	(working copy)
@@ -1 +1,35 @@
-<p>host works!</p>
+<div>
+  <form
+    (ngSubmit)="onSubmit()"
+    [formGroup]="hostForm"
+    class="common-form"
+  >
+    <div class="form-field-wrapper">
+      <label for="hostName" class="form-label">Hostname</label>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input
+          id="hostName"
+          formControlName="hostName"
+          matInput
+          placeholder="Hostname"
+          type="text"
+        />
+        @if (hostForm.get('hostName')?.invalid && hostForm.get('hostName')?.touched) {
+          <mat-error>
+            @if (hostForm.get('hostName')?.errors?.['required']) {
+              Hostname port is required.
+            } @else {
+              Invalid hostname format.
+            }
+          </mat-error>
+        }
+      </mat-form-field>
+    </div>
+    <button
+      type="submit"
+      mat-raised-button
+      color="primary">
+      Submit
+    </button>
+  </form>
+</div>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/host/host.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/host/host.ts	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/host/host.ts	(working copy)
@@ -1,11 +1,74 @@
-import { Component } from '@angular/core';
+import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {SharedModule} from '../../../shared/shared-module';
+import {take} from 'rxjs/operators';
+import {SystemService} from '../../../services/system-service';
+import {NotificationService} from '../../../services/notification';
 
 @Component({
   selector: 'app-host',
-  imports: [],
+  imports: [SharedModule,],
   templateUrl: './host.html',
-  styleUrl: './host.scss'
+  styleUrl: './host.scss',
 })
-export class Host {
+export class Host implements OnInit {
 
+  hostForm: FormGroup;
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private systemService: SystemService,
+    private notification: NotificationService,
+    private cdRef: ChangeDetectorRef,
+  ) {
+    this.hostForm = this.formBuilder.group({
+      hostName: ['', Validators.required],
+    });
+  }
+
+  ngOnInit() {
+    setTimeout(() => {
+      this.getSystemHostConfig();
+    });
+  }
+
+  getSystemHostConfig() {
+    this.systemService.getSystemHostConfig()
+      .pipe(take(1))
+      .subscribe({
+        next: (result: any) => {
+          if (result && result?.hostname) {
+            this.hostForm.setValue({hostName: result?.hostname});
+            this.cdRef.detectChanges();
+          }
+        },
+        error: (error: { message: string; }) => {
+          console.log(error);
+          this.notification.showError(error.message);
+        }
+      })
+  }
+
+  onSubmit() {
+    let rawPayload = new FormData();
+    rawPayload.set('post_data', JSON.stringify({"hostname": this.hostForm.value.hostName}));
+    this.systemService.updateSystemHostConfig(rawPayload)
+      .pipe(take(1))
+      .subscribe({
+        next: (result: any) => {
+          // ToDo: Backend fix required.
+          if (result && result.length > 1) {
+            if (!result[0]) {
+              this.notification.showError(`${result[1]}`);
+            } else {
+              this.notification.showSuccess(`Hostname updated successfully!`);
+              this.getSystemHostConfig();
+            }
+          }
+        },
+        error: (err) => {
+          this.notification.showError('Update Failed.');
+        }
+      })
+  }
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/license/license.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/license/license.html	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/license/license.html	(working copy)
@@ -1 +1,19 @@
-<p>license works!</p>
+<mat-card class="page-card-1" appearance="filled">
+  <mat-card-header>
+    <mat-card-title>License Information</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <div class="dialog-container">
+      <button mat-raised-button color="basic" (click)="updateLicense()" class="end-item">Update License</button>
+    </div>
+    <table mat-table [dataSource]="licenseDataSource" class="mat-elevation-z1">
+      <ng-container matColumnDef="key">
+        <td mat-cell *matCellDef="let element"> {{ element.key }}</td>
+      </ng-container>
+      <ng-container matColumnDef="value">
+        <td mat-cell *matCellDef="let element"> {{ element.value }}</td>
+      </ng-container>
+      <tr mat-row *matRowDef="let row; columns: licenseColumns;"></tr>
+    </table>
+  </mat-card-content>
+</mat-card>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/license/license.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/license/license.scss	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/license/license.scss	(working copy)
@@ -0,0 +1,9 @@
+.page-card-1 {
+  width: 100%;
+  border-radius: 0;
+  background-color: inherit;
+  font-size: 14px !important;
+  mat-card-header {
+    color: #1170cf;
+  }
+}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/license/license.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/license/license.ts	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/license/license.ts	(working copy)
@@ -1,11 +1,128 @@
-import { Component } from '@angular/core';
+import {ChangeDetectorRef, Component, inject, OnInit} from '@angular/core';
+import {SystemService} from '../../../services/system-service';
+import {take} from 'rxjs/operators';
+import {MatTableDataSource} from '@angular/material/table';
+import {NotificationService} from '../../../services/notification';
+import {UtilsService} from '../../../services/utils-service';
+import {SharedModule} from '../../../shared/shared-module';
+import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {DeviceService} from '../../../services/device-service';
+import {DeviceUpdateLicenseDialog} from '../devices/devices';
 
+export interface KeyValuePair {
+  key: string;
+  value: any;
+}
+
 @Component({
   selector: 'app-license',
-  imports: [],
+  imports: [
+    SharedModule
+  ],
   templateUrl: './license.html',
   styleUrl: './license.scss'
 })
-export class License {
+export class License implements OnInit {
 
+  systemLicense: any = {};
+  licenseDataSource = new MatTableDataSource<KeyValuePair>();
+  licenseColumns: Array<string> = ['key', 'value'];
+
+  constructor(
+    private systemService: SystemService,
+    private notification: NotificationService,
+    private cdRef: ChangeDetectorRef,
+    private utils: UtilsService,
+  ) {
+  }
+
+  ngOnInit() {
+    setTimeout(() => {
+      this.getAppLicense();
+    })
+  }
+
+  getAppLicense() {
+    this.systemLicense = [];
+
+    this.systemService.getAppLicense()
+      .pipe(take(1))
+      .subscribe({
+        next: (result: any) => {
+          this.systemLicense = result;
+          this.licenseDataSource = this.utils.processConfigData(result);
+          this.cdRef.detectChanges();
+        },
+        error: (error: { message: string; }) => {
+          console.log(error);
+          this.notification.showError(error.message);
+        }
+      })
+  }
+
+  dialog = inject(MatDialog);
+  dialogConfig = new MatDialogConfig();
+  updateLicense() {
+    this.dialogConfig.width = '60%';
+    this.dialogConfig.data = {
+      serial_number: this.systemLicense?.serial_num,
+    }
+    const dialogRef = this.dialog.open(UpdateLicenseDialog, this.dialogConfig);
+    dialogRef.afterClosed().subscribe((result: boolean) => {
+      if (result) {
+        this.getAppLicense();
+      }
+    })
+  }
 }
+
+@Component({
+  selector: 'app-update-license',
+  imports: [SharedModule],
+  templateUrl: './update-license.html'
+})
+export class UpdateLicenseDialog {
+  readonly data = inject(MAT_DIALOG_DATA);
+  readonly dialogRef = inject(MatDialogRef<UpdateLicenseDialog>);
+  licenseForm: FormGroup;
+
+  constructor(private formBuilder: FormBuilder, private systemService: SystemService, private notification: NotificationService) {
+    this.licenseForm = this.formBuilder.group({
+      licenseKey: ['', Validators.required],
+    })
+  }
+
+  onSubmit() {
+    if (this.licenseForm.invalid) {
+      console.log(this.licenseForm.value);
+      this.licenseForm.markAllAsTouched();
+      return;
+    }
+
+    let rawPayload = new FormData();
+    rawPayload.set('post_data', JSON.stringify({"license_key": this.licenseForm.value.licenseKey}));
+
+    this.systemService.updateAppLicense(rawPayload)
+      .pipe(take(1))
+      .subscribe({
+        next: (result: any) => {
+          if (result && result.length > 1) {
+            if (result[0]) {
+              this.notification.showSuccess(`License updated successfully!`);
+              this.dialogRef.close(true);
+            } else {
+              this.notification.showError(`Failure - ${result[1]}`);
+            }
+          }
+        },
+        error: () => {
+          this.notification.showError('Failed to update the license.');
+        }
+      })
+  }
+
+  onCancel(): void {
+    this.dialogRef.close(false);
+  }
+}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/license/update-license.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/license/update-license.html	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/license/update-license.html	(working copy)
@@ -0,0 +1,35 @@
+<h2 mat-dialog-title class="dialog-title">Update License</h2>
+
+<mat-dialog-content>
+  <form
+    [formGroup]="licenseForm"
+  >
+    <div class="form-field-wrapper">
+      @if (data.serial_number) {
+        <p>Serial number: {{data.serial_number}}</p>
+      }
+    </div>
+    <div class="form-field-wrapper">
+      <label for="licenseKey" class="form-label">License Key</label>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <textarea matInput rows="5" formControlName="licenseKey" id="licenseKey"
+                  placeholder="License Key"></textarea>
+      </mat-form-field>
+    </div>
+  </form>
+</mat-dialog-content>
+<mat-dialog-actions align="center">
+  <button
+    type="submit"
+    mat-button
+    color="basic"
+    (click)="onCancel()">
+    Cancel
+  </button>
+  <button
+    mat-raised-button
+    color="basic"
+    (click)="onSubmit()">
+    Submit
+  </button>
+</mat-dialog-actions>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-settings/add-remote-syslog-host.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-settings/add-remote-syslog-host.html	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-settings/add-remote-syslog-host.html	(working copy)
@@ -0,0 +1,78 @@
+<h2 mat-dialog-title>Add Remote Syslog Host</h2>
+
+<mat-dialog-content>
+  <form
+    (ngSubmit)="onSubmit()"
+    [formGroup]="syslogForm"
+  >
+    <div class="form-field-wrapper">
+      <label for="host_ip" class="form-label">IP Address *</label>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input
+          id="host_ip"
+          formControlName="host_ip"
+          matInput
+          placeholder="IP Address"
+          type="text"
+        />
+        @if (syslogForm.get('host_ip')?.invalid && syslogForm.get('host_ip')?.touched) {
+          <mat-error>
+            @if (syslogForm.get('host_ip')?.errors?.['required']) {
+              IPv4 address is required.
+            } @else if (syslogForm.get('host_ip')?.errors?.['ipv4']) {
+              Invalid IPv4 address format.
+            }
+          </mat-error>
+        }
+      </mat-form-field>
+    </div>
+    <div class="form-field-wrapper">
+      <label for="port" class="form-label">Port *</label>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input id="port" formControlName="port" matInput placeholder="443" type="number"/>
+        @if (syslogForm.get('port')?.invalid && syslogForm.get('port')?.touched) {
+          <mat-error>
+            @if (syslogForm.get('port')?.errors?.['required']) {
+              Port number is required.
+            } @else if (syslogForm.get('port')?.errors) {
+              Invalid port number, should range from 0-65535.
+            }
+          </mat-error>
+        }
+      </mat-form-field>
+    </div>
+    <div class="form-field-wrapper">
+      <label for="protocol" class="form-label">Protocol *</label>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <mat-select formControlName="protocol">
+          @for (_protocol of protocols; track _protocol) {
+            <mat-option [value]="_protocol.value">{{ _protocol.displayName }}</mat-option>
+          }
+        </mat-select>
+        @if (syslogForm.get('protocol')?.invalid && syslogForm.get('protocol')?.touched) {
+          <mat-error>
+            @if (syslogForm.get('protocol')?.errors?.['required']) {
+              Protocol is required.
+            } @else {
+              Invalid protocol format.
+            }
+          </mat-error>
+        }
+      </mat-form-field>
+    </div>
+  </form>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button
+    mat-button
+    color="basic"
+    (click)="onCancel()">
+    Cancel
+  </button>
+  <button
+    mat-raised-button
+    color="primary"
+    (click)="onSubmit()">
+    Submit
+  </button>
+</mat-dialog-actions>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-settings/log-settings.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-settings/log-settings.html	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-settings/log-settings.html	(working copy)
@@ -1 +1,90 @@
-<p>log-settings works!</p>
+<div>
+  <mat-card class="page-card-1" appearance="filled">
+    <mat-card-header>
+      <mat-card-title>Log Settings</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+      <form
+        (ngSubmit)="updateSystemHostConfig()"
+        [formGroup]="logSettingsForm"
+        class="common-form"
+      >
+        <div class="form-field-wrapper">
+          <label for="enable_log" class="form-label">Enable Log</label>
+          <mat-slide-toggle formControlName="enable_log"></mat-slide-toggle>
+        </div>
+
+        <div class="form-field-wrapper">
+          <label for="log_level" class="form-label">Log Level</label>
+          <mat-form-field appearance="outline" subscriptSizing="dynamic">
+            <mat-select formControlName="log_level">
+              @for (_level of levels; track _level) {
+                <mat-option [value]="_level.value">{{ _level.displayName }}</mat-option>
+              }
+            </mat-select>
+            @if (logSettingsForm.get('groupName')?.invalid && logSettingsForm.get('groupName')?.touched) {
+              <mat-error>
+                @if (logSettingsForm.get('groupName')?.errors?.['required']) {
+                  Group name is required.
+                } @else {
+                  Invalid group name format.
+                }
+              </mat-error>
+            }
+          </mat-form-field>
+        </div>
+
+        <button
+          type="submit"
+          mat-raised-button
+          color="primary">
+          Submit
+        </button>
+      </form>
+    </mat-card-content>
+  </mat-card>
+  <mat-card class="page-card-1" appearance="filled">
+    <mat-card-header>
+      <mat-card-title>Remote Syslog</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+      <div class="button-container">
+        <button mat-raised-button (click)="addRemoteSyslogHost()">Add</button>
+      </div>
+      <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 + 1 }}</td>
+          </ng-container>
+          <ng-container matColumnDef="ip">
+            <th mat-header-cell *matHeaderCellDef> IP Address</th>
+            <td mat-cell *matCellDef="let element"> {{ element.host_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="protocol">
+            <th mat-header-cell *matHeaderCellDef> Protocol</th>
+            <td mat-cell *matCellDef="let element"> {{ protocols[element.protocol] }}</td>
+          </ng-container>
+          <ng-container matColumnDef="action">
+            <th mat-header-cell *matHeaderCellDef class="action-header w-10"> 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 Device"
+                         (click)="deleteRemoteSyslogHost(element)"></fa-icon>
+              </div>
+            </td>
+          </ng-container>
+          <tr mat-header-row *matHeaderRowDef="remoteHostColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: remoteHostColumns;"></tr>
+          <tr class="mat-row table-no-data" *matNoDataRow>
+            <td class="mat-cell" colspan="4">No results found.</td>
+          </tr>
+        </table>
+      </div>
+    </mat-card-content>
+  </mat-card>
+</div>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-settings/log-settings.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-settings/log-settings.scss	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-settings/log-settings.scss	(working copy)
@@ -0,0 +1,28 @@
+.page-card {
+  width: 100%;
+  border-radius: 0;
+  background-color: inherit;
+  font-size: 14px !important;
+}
+
+.page-card-1 {
+  width: 100%;
+  border-radius: 0;
+  background-color: inherit;
+  font-size: 14px !important;
+  mat-card-header {
+    color: #1170cf;
+  }
+}
+
+mat-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 10px;
+}
+
+mat-card-title {
+  font-size: medium;
+}
+
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-settings/log-settings.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-settings/log-settings.ts	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-settings/log-settings.ts	(working copy)
@@ -1,11 +1,244 @@
-import { Component } from '@angular/core';
+import {AfterViewInit, ChangeDetectorRef, Component, inject, OnInit} from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {SystemService} from '../../../services/system-service';
+import {NotificationService} from '../../../services/notification';
+import {take} from 'rxjs/operators';
+import {SharedModule} from '../../../shared/shared-module';
+import {MatTableDataSource} from '@angular/material/table';
+import {AddDeviceDialog} from '../devices/devices';
+import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog';
+import {DeviceService} from '../../../services/device-service';
+import {CustomValidators} from '../../../utils/custom-validators';
+import {Confirmation} from '../../../services/confirmation';
 
 @Component({
   selector: 'app-log-settings',
-  imports: [],
+  imports: [SharedModule],
   templateUrl: './log-settings.html',
   styleUrl: './log-settings.scss'
 })
-export class LogSettings {
+export class LogSettings implements AfterViewInit {
+  logSettingsForm: FormGroup;
 
+  levels = [
+    {displayName: 'Debug', value: 0},
+    {displayName: 'Info', value: 1},
+    {displayName: 'Notice', value: 2},
+    {displayName: 'Warning', value: 3},
+    {displayName: 'Error', value: 4},
+    {displayName: 'Critical', value: 5},
+  ]
+
+  protocols: any = {
+    0: 'TCP',
+    1: 'UDP',
+  }
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private systemService: SystemService,
+    private notification: NotificationService,
+    private cdRef: ChangeDetectorRef,
+    private confirmationService: Confirmation
+  ) {
+    this.logSettingsForm = this.formBuilder.group({
+      log_level: [1, Validators.required],
+      enable_log: [false, Validators.required],
+    });
+  }
+
+  ngAfterViewInit() {
+    setTimeout(() => {
+      this.getSystemHostConfig();
+      this.getRemoteSyslogHosts();
+    });
+  }
+
+  getSystemHostConfig() {
+    this.systemService.getSystemLogSettings()
+      .pipe(take(1))
+      .subscribe({
+        next: (result: any) => {
+          if (result && result?.data) {
+            this.logSettingsForm.setValue({
+              enable_log: result?.data?.enable_log,
+              log_level: result?.data?.log_level ? parseInt(result?.data?.log_level) : 0,
+            });
+            this.cdRef.detectChanges();
+          }
+        },
+        error: (error: { message: string; }) => {
+          console.log(error);
+          this.notification.showError(error.message);
+        }
+      })
+  }
+
+  updateSystemHostConfig() {
+    let rawPayload = new FormData();
+    rawPayload.set('post_data', JSON.stringify({
+      "enable_log": this.logSettingsForm.value.enable_log,
+      "log_level": this.logSettingsForm.value.log_level,
+    }));
+    this.systemService.updateSystemLogSettings(rawPayload)
+      .pipe(take(1))
+      .subscribe({
+        next: (result: any) => {
+          // ToDo: Backend fix required.
+          if (result && result?.status) {
+            this.notification.showSuccess(`Log settings updated successfully!`);
+            this.getSystemHostConfig();
+          } else {
+            this.notification.showError('Update Failed.');
+          }
+        },
+        error: (err) => {
+          this.notification.showError('Update Failed.');
+        }
+      })
+  }
+
+  remoteHostColumns = ['serial', 'ip', 'port', 'protocol', 'action'];
+  dataSource = new MatTableDataSource([]);
+
+  getRemoteSyslogHosts() {
+    this.dataSource = new MatTableDataSource([]);
+    this.systemService.getRemoteSyslogHosts()
+      .pipe(take(1))
+      .subscribe({
+        next: (result: any) => {
+          if (result && result?.data) {
+            if (result?.data.length > 0) {
+              this.dataSource = new MatTableDataSource(result?.data);
+            }
+          }
+        },
+        error: (error: { message: string; }) => {
+          console.log(error);
+          this.notification.showError(error.message);
+        }
+      })
+  }
+
+  dialog = inject(MatDialog);
+  dialogConfig = new MatDialogConfig();
+
+  addRemoteSyslogHost() {
+    const dialogRef = this.dialog.open(AddRemoteSyslogHost, this.dialogConfig);
+    dialogRef.afterClosed().subscribe((isAdded: boolean) => {
+      if (isAdded) {
+        this.getRemoteSyslogHosts();
+      }
+    })
+  }
+
+  deleteRemoteSyslogHost(host: any) {
+    let confirmMsg = `Are you sure you want to delete "${host?.host_ip}"? This action cannot be undone.`
+    this.confirmationService.openConfirmDialog({
+      title: `Delete ${host?.host_ip}?`,
+      message: confirmMsg,
+      confirmButtonText: 'Yes, Delete It',
+      cancelButtonText: 'No, Keep It',
+      confirmButtonColor: 'warn',
+      cancelButtonColor: 'primary'
+    }).subscribe(result => {
+      if (result) {
+        let rawPayload = new FormData();
+        rawPayload.set('post_data', JSON.stringify({
+          "host_ip": host?.host_ip,
+          "port": host?.port,
+          "protocol": host?.protocol,
+        }));
+        this.systemService.deleteRemoteSyslogHost(rawPayload)
+          .pipe(take(1))
+          .subscribe({
+            next: (result: any) => {
+              // ToDo: Backend fix required.
+              if (result && result?.status) {
+                if (result.status == true) {
+                  this.notification.showSuccess(`${host?.host_ip} deleted successfully!`);
+                  this.getRemoteSyslogHosts();
+                } else {
+                  this.notification.showError(`Failed to delete the host - ${host?.host_ip}`);
+                }
+              }
+            },
+            error: (err: any) => {
+              if (err?.status === 200) {
+                // ToDo: Backend fix required.
+                this.notification.showSuccess(`${host?.host_ip} deleted successfully!`);
+                this.getRemoteSyslogHosts()
+              } else {
+                this.notification.showError('Deletion Failed.');
+              }
+            }
+          })
+      } else {
+        this.notification.showSuccess('Deletion cancelled.');
+      }
+    });
+  }
 }
+
+
+@Component({
+  selector: 'add-remote-syslog-host',
+  templateUrl: './add-remote-syslog-host.html',
+  imports: [SharedModule]
+})
+export class AddRemoteSyslogHost {
+
+  readonly data = inject(MAT_DIALOG_DATA);
+  readonly dialogRef = inject(MatDialogRef<AddRemoteSyslogHost>);
+  syslogForm: FormGroup;
+
+  protocols: any = [
+    {value: 0, displayName: 'TCP'},
+    {value: 1, displayName: 'UDP'}
+  ]
+
+  constructor(
+    private formBuilder: FormBuilder, private systemService: SystemService, private notification: NotificationService,) {
+    this.syslogForm = this.formBuilder.group({
+      host_ip: ['', [Validators.required, CustomValidators.ipv4()]],
+      port: [443, [Validators.required, Validators.min(0), Validators.max(65535)]],
+      protocol: [0, [Validators.required]],
+    });
+  }
+
+  onSubmit() {
+    if (this.syslogForm.invalid) {
+      console.log(this.syslogForm.value);
+      this.syslogForm.markAllAsTouched();
+      return;
+    }
+    let payload = {
+      host_ip: this.syslogForm.value.host_ip,
+      port: this.syslogForm.value.port,
+      protocol:this.syslogForm.value.protocol
+    }
+    let rawPayload = new FormData();
+    rawPayload.set('post_data', JSON.stringify(payload));
+    this.systemService.addRemoteSyslogHost(rawPayload)
+      .pipe(take(1))
+      .subscribe({
+        next: (result: any) => {
+          if (result && result?.status) {
+            if (result.status) {
+              this.notification.showSuccess(`${payload?.host_ip} added successfully!`);
+              this.dialogRef.close(true);
+            } else {
+              this.notification.showError(`Failed to add the host - ${payload?.host_ip}`);
+            }
+          }
+        },
+        error: () => {
+          this.notification.showError('Failed to add the host.');
+        }
+      })
+  }
+
+  onCancel() {
+    this.dialogRef.close(false);
+  }
+}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup-restore/create-scheduled-system-backup.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup-restore/create-scheduled-system-backup.html	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup-restore/create-scheduled-system-backup.html	(working copy)
@@ -0,0 +1,195 @@
+<h2 mat-dialog-title>Create Scheduled Backup</h2>
+<mat-dialog-content>
+  <form
+    (ngSubmit)="onSubmit()"
+    [formGroup]="backupForm"
+  >
+    <div class="form-field-wrapper">
+      <label for="backup_target" class="form-label">Backup Target *</label>
+      <mat-radio-group formControlName="backup_target" id="backup_target">
+        <mat-radio-button value="local">Local</mat-radio-button>
+        <mat-radio-button value="remote">Remote</mat-radio-button>
+      </mat-radio-group>
+    </div>
+    @if (backupForm.get('backup_target')?.value == 'remote') {
+      <div class="form-field-wrapper">
+        <label for="ip" class="form-label">IP Address *</label>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <input
+            id="ip"
+            formControlName="ip"
+            matInput
+            placeholder="IP Address"
+            type="text"
+          />
+          @if (backupForm.get('ip')?.invalid && backupForm.get('ip')?.touched) {
+            <mat-error>
+              @if (backupForm.get('ip')?.errors?.['required']) {
+                IPv4 address is required.
+              } @else if (backupForm.get('ip')?.errors?.['ipv4']) {
+                Invalid IPv4 address format.
+              }
+            </mat-error>
+          }
+        </mat-form-field>
+      </div>
+      <div class="form-field-wrapper">
+        <label for="username" class="form-label">Username *</label>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <input
+            id="username"
+            formControlName="username"
+            matInput
+            placeholder="Username"
+            type="text"
+          />
+          @if (backupForm.get('username')?.invalid && backupForm.get('username')?.touched) {
+            <mat-error>
+              @if (backupForm.get('username')?.errors?.['required']) {
+                Username is required.
+              } @else if (backupForm.get('username')?.errors) {
+                Invalid username format.
+              }
+            </mat-error>
+          }
+        </mat-form-field>
+      </div>
+      <div class="form-field-wrapper">
+        <label for="password" class="form-label">Password *</label>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <input
+            id="password"
+            formControlName="password"
+            matInput
+            placeholder="Password"
+            type="password"
+          />
+          @if (backupForm.get('password')?.invalid && backupForm.get('password')?.touched) {
+            <mat-error>
+              @if (backupForm.get('password')?.errors?.['required']) {
+                Password is required.
+              } @else if (backupForm.get('password')?.errors) {
+                Invalid password format.
+              }
+            </mat-error>
+          }
+        </mat-form-field>
+      </div>
+      <div class="form-field-wrapper">
+        <label for="path" class="form-label">Path *</label>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <input
+            id="path"
+            formControlName="path"
+            matInput
+            placeholder="Path"
+            type="text"
+          />
+          @if (backupForm.get('path')?.invalid && backupForm.get('path')?.touched) {
+            <mat-error>
+              @if (backupForm.get('path')?.errors?.['required']) {
+                Path is required.
+              } @else if (backupForm.get('path')?.errors) {
+                Invalid path format.
+              }
+            </mat-error>
+          }
+        </mat-form-field>
+      </div>
+    }
+    <div class="form-field-wrapper">
+      <label for="time" class="form-label">Time *</label>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <mat-label>Hour</mat-label>
+        <mat-select formControlName="hour" id="time">
+          @for (_hour of hours; track _hour) {
+            <mat-option [value]="_hour"> {{ _hour }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <mat-label>Minute</mat-label>
+        <mat-select formControlName="minute" id="time">
+          @for (_min of minutes; track _min) {
+            <mat-option [value]="_min"> {{ _min }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    </div>
+    <div class="form-field-wrapper">
+      <label for="time" class="form-label">Frequency *</label>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <mat-label>Frequency</mat-label>
+        <mat-select formControlName="frequency" id="frequency">
+          @for (_fre of frequency; track _fre) {
+            <mat-option [value]="_fre.value"> {{ _fre.displayName }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+      @if (this.backupForm.value.frequency === 'weekly') {
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <mat-label>Day</mat-label>
+          <mat-select formControlName="day" id="time">
+            @for (_day of days; track _day) {
+              <mat-option [value]="_day.value"> {{ _day.displayName }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      }
+      @if (this.backupForm.value.frequency === 'monthly') {
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <mat-label>Date</mat-label>
+          <mat-select formControlName="date" id="time">
+            @for (_date of dates; track _date) {
+              <mat-option [value]="_date"> {{ _date }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      }
+    </div>
+  </form>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button
+    mat-button
+    color="basic"
+    (click)="onCancel()">
+    Cancel
+  </button>
+  <button
+    mat-raised-button
+    color="primary"
+    (click)="onSubmit()">
+    Submit
+  </button>
+</mat-dialog-actions>
+
+<style>
+  .form-field-wrapper.multi-field-row {
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 15px;
+
+    .form-label {
+      width: 100%;
+      margin-bottom: 8px;
+      margin-left: 15%;
+    }
+
+    mat-form-field {
+      flex: 1 1 0;
+      min-width: 0;
+      max-width: none;
+    }
+
+    & > * {
+      flex-basis: calc((100% - 30px) / 3);
+    }
+  }
+
+  .submit-button-wrapper {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+  }
+</style>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup-restore/create-system-backup.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup-restore/create-system-backup.html	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup-restore/create-system-backup.html	(working copy)
@@ -0,0 +1,115 @@
+<h2 mat-dialog-title>Create Backup</h2>
+<mat-dialog-content>
+  <form
+    (ngSubmit)="onSubmit()"
+    [formGroup]="backupForm"
+  >
+    <div class="form-field-wrapper">
+      <label for="backup_target" class="form-label">Backup Target *</label>
+      <mat-radio-group formControlName="backup_target">
+        <mat-radio-button value="local">Local</mat-radio-button>
+        <mat-radio-button value="remote">Remote</mat-radio-button>
+      </mat-radio-group>
+    </div>
+    @if (backupForm.get('backup_target')?.value == 'remote') {
+      <div class="form-field-wrapper">
+        <label for="ip" class="form-label">IP Address *</label>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <input
+            id="ip"
+            formControlName="ip"
+            matInput
+            placeholder="IP Address"
+            type="text"
+          />
+          @if (backupForm.get('ip')?.invalid && backupForm.get('ip')?.touched) {
+            <mat-error>
+              @if (backupForm.get('ip')?.errors?.['required']) {
+                IPv4 address is required.
+              } @else if (backupForm.get('ip')?.errors?.['ipv4']) {
+                Invalid IPv4 address format.
+              }
+            </mat-error>
+          }
+        </mat-form-field>
+      </div>
+      <div class="form-field-wrapper">
+        <label for="username" class="form-label">Username *</label>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <input
+            id="username"
+            formControlName="username"
+            matInput
+            placeholder="Username"
+            type="text"
+          />
+          @if (backupForm.get('username')?.invalid && backupForm.get('username')?.touched) {
+            <mat-error>
+              @if (backupForm.get('username')?.errors?.['required']) {
+                Username is required.
+              } @else if (backupForm.get('username')?.errors) {
+                Invalid username format.
+              }
+            </mat-error>
+          }
+        </mat-form-field>
+      </div>
+      <div class="form-field-wrapper">
+        <label for="password" class="form-label">Password *</label>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <input
+            id="password"
+            formControlName="password"
+            matInput
+            placeholder="Password"
+            type="password"
+          />
+          @if (backupForm.get('password')?.invalid && backupForm.get('password')?.touched) {
+            <mat-error>
+              @if (backupForm.get('password')?.errors?.['required']) {
+                Password is required.
+              } @else if (backupForm.get('password')?.errors) {
+                Invalid password format.
+              }
+            </mat-error>
+          }
+        </mat-form-field>
+      </div>
+      <div class="form-field-wrapper">
+        <label for="path" class="form-label">Path *</label>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <input
+            id="path"
+            formControlName="path"
+            matInput
+            placeholder="Path"
+            type="text"
+          />
+          @if (backupForm.get('path')?.invalid && backupForm.get('path')?.touched) {
+            <mat-error>
+              @if (backupForm.get('path')?.errors?.['required']) {
+                Path is required.
+              } @else if (backupForm.get('path')?.errors) {
+                Invalid path format.
+              }
+            </mat-error>
+          }
+        </mat-form-field>
+      </div>
+    }
+  </form>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button
+    mat-button
+    color="basic"
+    (click)="onCancel()">
+    Cancel
+  </button>
+  <button
+    mat-raised-button
+    color="primary"
+    (click)="onSubmit()">
+    Submit
+  </button>
+</mat-dialog-actions>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup-restore/system-backup-restore.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup-restore/system-backup-restore.html	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup-restore/system-backup-restore.html	(working copy)
@@ -0,0 +1,124 @@
+<mat-card class="page-card-1" appearance="filled">
+  <mat-card-header>
+    <mat-card-title>Create System Backup</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <div class="button-container">
+      <button mat-raised-button (click)="addBackup()" matTooltip="Create Backup">Create</button>
+    </div>
+    <div class="table-container">
+      <table mat-table [dataSource]="backupDatasource" class="mat-elevation-z1">
+        <ng-container matColumnDef="serial">
+          <th mat-header-cell *matHeaderCellDef> No.</th>
+          <td mat-cell *matCellDef="let element; let i = index;"> {{ getGlobalSerial(i) }}</td>
+        </ng-container>
+        <ng-container matColumnDef="location">
+          <th mat-header-cell *matHeaderCellDef> Backup Location</th>
+          <td mat-cell *matCellDef="let element"> {{ element?.destination | titlecase }}</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="datetime">
+          <th mat-header-cell *matHeaderCellDef> Timestamp</th>
+          <td mat-cell *matCellDef="let element"> {{ element?.time }}</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="action">
+          <th mat-header-cell *matHeaderCellDef class="action-header w-10"> Action</th>
+          <td mat-cell *matCellDef="let element">
+            <div class="row-action a-link">
+              <fa-icon [icon]="['far', 'circle-down']" size="lg"
+                       [ngClass]="{'disabled-icon': element?.status !== 'Completed'}"
+                       matTooltip="Download Backup"
+                       (click)="element?.status === 'Completed' && downloadBackup(element)"></fa-icon>
+              <fa-icon [icon]="['far', 'trash-can']" size="lg" class="delete-icon"
+                       matTooltip="Delete Backup" (click)="deleteBackup(element)"></fa-icon>
+            </div>
+          </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="backupColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: backupColumns;"></tr>
+        <tr class="mat-row table-no-data" *matNoDataRow>
+          <td class="mat-cell" colspan="4">No results found.</td>
+        </tr>
+      </table>
+      <mat-paginator [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>Create Scheduled Backup</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <div class="button-container">
+      <button mat-raised-button (click)="addBackupSchedule()" [disabled]="scheduledBackupDatasource.data.length > 0"
+              matTooltip="Create Schedule">Create
+      </button>
+    </div>
+    <div class="table-container">
+      <table mat-table [dataSource]="scheduledBackupDatasource" 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 + 1 }}</td>
+        </ng-container>
+        <ng-container matColumnDef="location">
+          <th mat-header-cell *matHeaderCellDef> Backup Location</th>
+          <td mat-cell *matCellDef="let element"> {{ element?.backup_target | titlecase }}</td>
+        </ng-container>
+        <ng-container matColumnDef="schedule">
+          <th mat-header-cell *matHeaderCellDef> Schedule</th>
+          <td mat-cell *matCellDef="let element">
+            Frequency : {{ element?.frequency | titlecase }},
+            @if (element.day_of_the_month != null) {
+              <span>Day of Month: {{ element.day_of_the_month }},</span>
+            }
+            @if (element.day_of_the_week != null) {
+              <span>Day of Week: {{ daysOfWeek[element.day_of_the_week] }},</span>
+            }
+            Time : {{ element.time }}
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="action">
+          <th mat-header-cell *matHeaderCellDef class="action-header w-10"> Action</th>
+          <td mat-cell *matCellDef="let element">
+            <div class="row-action a-link">
+              <fa-icon [icon]="['far', 'edit']" size="lg"
+                       matTooltip="Edit Schedule"
+                       (click)="editBackupSchedule(element)"></fa-icon>
+              <fa-icon [icon]="['far', 'trash-can']" size="lg" class="delete-icon"
+                       matTooltip="Delete Schedule"
+                       (click)="deleteBackupSchedule(element)"></fa-icon>
+            </div>
+          </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="scheduledBackupColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: scheduledBackupColumns;"></tr>
+        <tr class="mat-row table-no-data" *matNoDataRow>
+          <td class="mat-cell" colspan="4">No results found.</td>
+        </tr>
+      </table>
+    </div>
+  </mat-card-content>
+</mat-card>
+<mat-card class="page-card-1" appearance="filled">
+  <mat-card-header>
+    <mat-card-title>System Restore</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <div class="button-container">
+      <button mat-raised-button (click)="restoreBackup()" matTooltip="Restore from Backup">Restore</button>
+    </div>
+    <div style="text-align: center;">
+      <p><b>Last update: </b>{{systemRestoreStatus.status}} - {{systemRestoreStatus.message}}</p>
+    </div>
+    <div style="text-align: center;">
+      <p><b>Note: </b>The restore process will substitute your current information with the backup data.</p>
+    </div>
+  </mat-card-content>
+</mat-card>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup-restore/system-backup-restore.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup-restore/system-backup-restore.scss	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup-restore/system-backup-restore.scss	(working copy)
@@ -0,0 +1,9 @@
+.page-card-1 {
+  width: 100%;
+  border-radius: 0;
+  background-color: inherit;
+  font-size: 14px !important;
+  mat-card-header {
+    color: #1170cf;
+  }
+}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup-restore/system-backup-restore.spec.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup-restore/system-backup-restore.spec.ts	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup-restore/system-backup-restore.spec.ts	(working copy)
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SystemBackupRestore } from './system-backup-restore';
+
+describe('SystemBackupRestore', () => {
+  let component: SystemBackupRestore;
+  let fixture: ComponentFixture<SystemBackupRestore>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SystemBackupRestore]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SystemBackupRestore);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup-restore/system-backup-restore.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup-restore/system-backup-restore.ts	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup-restore/system-backup-restore.ts	(working copy)
@@ -0,0 +1,501 @@
+import {ChangeDetectorRef, Component, inject, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {SystemService} from '../../../services/system-service';
+import {SharedModule} from '../../../shared/shared-module';
+import {take} from 'rxjs/operators';
+import {NotificationService} from '../../../services/notification';
+import {MatTableDataSource} from '@angular/material/table';
+import {Confirmation} from '../../../services/confirmation';
+import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {CustomValidators} from '../../../utils/custom-validators';
+import {MatPaginator} from '@angular/material/paginator';
+import {Subject} from 'rxjs';
+
+@Component({
+  selector: 'app-system-backup-restore',
+  imports: [
+    SharedModule,
+  ],
+  templateUrl: './system-backup-restore.html',
+  styleUrl: './system-backup-restore.scss'
+})
+export class SystemBackupRestore implements OnInit, OnDestroy {
+
+  scheduledBackupColumns = ['serial', 'location', 'schedule', 'action'];
+  scheduledBackupDatasource = new MatTableDataSource();
+  daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+
+  backupColumns = ['serial', 'location', 'filename', 'datetime', 'status', 'action'];
+  backupDatasource = new MatTableDataSource();
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+  dialog = inject(MatDialog);
+  dialogConfig = new MatDialogConfig();
+  systemRestoreStatus: any = {
+    status: '',
+    message: '',
+  }
+  private pollingInterval: any;
+  private destroy$ = new Subject<void>();
+
+  constructor(
+    private systemService: SystemService,
+    private notification: NotificationService,
+    private confirmationService: Confirmation,
+    private cdRef: ChangeDetectorRef,
+  ) {
+  }
+
+  ngOnInit() {
+    setTimeout(() => {
+      this.getSystemBackupFiles();
+      this.getScheduledBackupFiles();
+      this.getSystemRestoreStatus();
+    });
+    this.backupDatasource.paginator = this.paginator;
+  }
+
+  getSystemBackupFiles(): void {
+    this.backupDatasource = new MatTableDataSource();
+    this.systemService.getSystemBackupFiles()
+      .pipe(take(1))
+      .subscribe({
+        next: (result: any) => {
+          if (result.length > 0) {
+            this.backupDatasource = new MatTableDataSource(result);
+            this.backupDatasource.paginator = this.paginator;
+          }
+          this.cdRef.detectChanges();
+        },
+        error: (error: any) => {
+          this.notification.showError(`Error: ${error?.message}`);
+        }
+      })
+  }
+
+  getGlobalSerial(index: number): number {
+    if (this.paginator) {
+      return this.paginator.pageIndex * this.paginator.pageSize + index + 1;
+    }
+    return index + 1;
+  }
+
+  getScheduledBackupFiles(): void {
+    this.scheduledBackupDatasource = new MatTableDataSource();
+    this.systemService.getScheduledBackupFiles()
+      .pipe(take(1))
+      .subscribe({
+        next: (result: any) => {
+          if (result?.backup_target) {
+            this.scheduledBackupDatasource = new MatTableDataSource([result]);
+          }
+          this.cdRef.detectChanges();
+        },
+        error: (error: any) => {
+          this.notification.showError(`Error: ${error?.message}`);
+        }
+      })
+  }
+
+  addBackupSchedule() {
+    this.dialogConfig.position = {
+      bottom: '0px', right: '0px',
+    }
+    this.dialogConfig.width = '65%';
+    this.dialogConfig.height = '65%';
+    const dialogRef = this.dialog.open(CreateScheduledSystemBackup, this.dialogConfig);
+    dialogRef.afterClosed().subscribe((isCreated: boolean) => {
+      if (isCreated) {
+        this.getScheduledBackupFiles();
+      }
+    })
+  }
+
+  editBackupSchedule(_schedule: any) {
+    this.dialogConfig.position = {
+      bottom: '0px', right: '0px',
+    }
+    this.dialogConfig.width = '65%';
+    this.dialogConfig.height = '65%';
+    this.dialogConfig.data = _schedule;
+    const dialogRef = this.dialog.open(CreateScheduledSystemBackup, this.dialogConfig);
+    dialogRef.afterClosed().subscribe((isCreated: boolean) => {
+      if (isCreated) {
+        this.getScheduledBackupFiles();
+      }
+    })
+  }
+
+  deleteBackupSchedule(_schedule: any) {
+    let confirmMsg = `Are you sure you want to delete the backup schedule? This action cannot be undone.`
+    this.confirmationService.openConfirmDialog({
+      title: `Delete Backup Schedule`,
+      message: confirmMsg,
+      confirmButtonText: 'Yes, Delete It',
+      cancelButtonText: 'No, Keep It',
+      confirmButtonColor: 'warn',
+      cancelButtonColor: 'primary'
+    }).subscribe(result => {
+      if (result) {
+        this.systemService.deleteBackupSchedule()
+          .pipe(take(1))
+          .subscribe({
+            next: (result: any) => {
+              this.notification.showSuccess(`Schedule deleted successfully!`);
+              this.getScheduledBackupFiles();
+            },
+            error: (err: any) => {
+              this.notification.showError('Deletion Failed.');
+            }
+          })
+      } else {
+        this.notification.showSuccess('Deletion cancelled.');
+      }
+    });
+  }
+
+  addBackup() {
+    this.dialogConfig.position = {
+      bottom: '0px', right: '0px',
+    }
+    this.dialogConfig.width = '65%';
+    this.dialogConfig.height = '65%';
+    const dialogRef = this.dialog.open(CreateSystemBackup, this.dialogConfig);
+    dialogRef.afterClosed().subscribe((isCreated: boolean) => {
+      if (isCreated) {
+        this.getSystemBackupFiles();
+      }
+    })
+  }
+
+  downloadBackup(_schedule: any) {
+    const filename: string = _schedule?.filename;
+    const downloadUrl = `/backup/download?filename=${filename}`;
+
+    const link = document.createElement('a');
+    link.href = downloadUrl;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+
+  deleteBackup(_schedule: any) {
+    let confirmMsg = `Are you sure you want to delete "${_schedule?.filename}"? This action cannot be undone.`
+    this.confirmationService.openConfirmDialog({
+      title: `Delete ${_schedule?.filename}?`,
+      message: confirmMsg,
+      confirmButtonText: 'Yes, Delete It',
+      cancelButtonText: 'No, Keep It',
+      confirmButtonColor: 'warn',
+      cancelButtonColor: 'primary'
+    }).subscribe(result => {
+      if (result) {
+        this.systemService.deleteSystemBackupFile(_schedule?.filename)
+          .pipe(take(1))
+          .subscribe({
+            next: (result: any) => {
+              this.notification.showSuccess(`${_schedule?.filename} deleted successfully!`);
+              this.getSystemBackupFiles();
+            },
+            error: (err: any) => {
+              this.notification.showError('Deletion Failed.');
+            }
+          })
+      } else {
+        this.notification.showSuccess('Deletion cancelled.');
+      }
+    });
+  }
+
+  getSystemRestoreStatus(): void {
+    this.systemService.getSystemRestoreStatus()
+      .pipe(take(1))
+      .subscribe({
+        next: (result: any) => {
+          if (result?.status) {
+            this.systemRestoreStatus.status = result.status;
+          }
+          if (result?.message) {
+            this.systemRestoreStatus.message = result.message;
+          }
+          this.cdRef.detectChanges();
+
+          if (!['Not started', 'N/A', 'Completed', 'Failed'].includes(this.systemRestoreStatus.status)) {
+            if (!this.pollingInterval) {
+              this.startPolling();
+            }
+          } else {
+            if (this.pollingInterval) {
+              clearInterval(this.pollingInterval);
+              this.pollingInterval = null;
+            }
+          }
+        },
+        error: (error: any) => {
+          this.notification.showError(`Error: ${error?.message}`);
+          if (this.pollingInterval) {
+            clearInterval(this.pollingInterval);
+            this.pollingInterval = null;
+            console.error('Stopped polling due to error.');
+          }
+          this.cdRef.detectChanges();
+        }
+      })
+  }
+
+  // ToDo: Implement Restore System Backup functionality.
+  restoreBackup() {}
+
+  ngOnDestroy(): void {
+    if (this.pollingInterval) {
+      clearInterval(this.pollingInterval);
+    }
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private startPolling(): void {
+    if (this.pollingInterval) {
+      clearInterval(this.pollingInterval);
+    }
+
+    this.pollingInterval = setInterval(() => {
+      this.getSystemRestoreStatus();
+    }, 10000); // 10000 milliseconds = 10 seconds
+  }
+}
+
+@Component({
+  selector: 'create-system-backup',
+  templateUrl: './create-system-backup.html',
+  imports: [SharedModule]
+})
+export class CreateSystemBackup implements OnInit {
+
+  readonly data = inject(MAT_DIALOG_DATA);
+  readonly dialogRef = inject(MatDialogRef<CreateSystemBackup>);
+  backupForm: FormGroup;
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private systemService: SystemService,
+    private notification: NotificationService,
+    private cdRef: ChangeDetectorRef,
+  ) {
+    this.backupForm = this.formBuilder.group({
+      backup_target: ['local', [Validators.required]],
+      ip: ['', [Validators.required, CustomValidators.ipv4()]],
+      username: ['', [Validators.required]],
+      password: ['', [Validators.required]],
+      path: ['/var', [Validators.required]],
+    });
+  }
+
+  ngOnInit() {
+    setTimeout(() => {
+      this.getSystemBackupRemoteStorage();
+    })
+  }
+
+  getSystemBackupRemoteStorage() {
+    this.systemService.getSystemBackupRemoteStorage()
+      .pipe(take(1)).subscribe({
+      next: (result: any) => {
+        this.backupForm.patchValue(result);
+        this.cdRef.detectChanges();
+      },
+      error: (error: any) => {
+        this.notification.showError(`Error: ${error?.message}`);
+      }
+    })
+  }
+
+  onSubmit() {
+    if (this.backupForm.value.backup_target === 'local') {
+      this.createSystemBackup({backup_target: this.backupForm.value.backup_target});
+    } else {
+      if (this.backupForm.invalid) {
+        console.log(this.backupForm.value);
+        this.backupForm.markAllAsTouched();
+        return;
+      }
+      this.updateSystemBackupRemoteStorage(this.backupForm.value);
+    }
+  }
+
+  updateSystemBackupRemoteStorage(payload: any) {
+    this.systemService.updateSystemBackupRemoteStorage(payload)
+      .pipe(take(1))
+      .subscribe({
+        next: (result: any) => {
+          this.createSystemBackup({backup_target: this.backupForm.value.backup_target});
+        },
+        error: () => {
+          this.notification.showError('Failed to create the backup.');
+        }
+      })
+  }
+
+  createSystemBackup(payload: any) {
+    this.systemService.createSystemBackup(payload)
+      .pipe(take(1))
+      .subscribe({
+        next: (result: any) => {
+          this.dialogRef.close(true);
+        },
+        error: () => {
+          this.notification.showError('Failed to create the backup.');
+        }
+      })
+  }
+
+  onCancel() {
+    this.dialogRef.close(false);
+  }
+}
+
+@Component({
+  selector: 'create-scheduled-system-backup',
+  templateUrl: './create-scheduled-system-backup.html',
+  imports: [SharedModule]
+})
+export class CreateScheduledSystemBackup implements OnInit {
+
+  readonly data = inject(MAT_DIALOG_DATA);
+  readonly dialogRef = inject(MatDialogRef<CreateScheduledSystemBackup>);
+  backupForm: FormGroup;
+
+  hours: number[] = [];
+  minutes: number[] = [];
+  dates: number[] = [];
+  days: any[] = [];
+  frequency: any[] = [];
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private systemService: SystemService,
+    private notification: NotificationService,
+    private cdRef: ChangeDetectorRef,
+  ) {
+    this.backupForm = this.formBuilder.group({
+      backup_target: ['local', [Validators.required]],
+      hour: [0, [Validators.required]],
+      minute: [0, [Validators.required]],
+      frequency: ['daily', [Validators.required]],
+      day: ['0', []],
+      date: [1, []],
+      ip: ['', [Validators.required, CustomValidators.ipv4()]],
+      username: ['', [Validators.required]],
+      password: ['', [Validators.required]],
+      path: ['/var', [Validators.required]],
+    });
+  }
+
+  ngOnInit() {
+    setTimeout(() => {
+      this.getSystemBackupRemoteStorage();
+    });
+    this.hours = Array.from({length: 24}, (_, i) => i);
+    this.minutes = Array.from({length: 60}, (_, i) => i);
+    this.dates = Array.from({length: 31}, (_, i) => i + 1);
+    this.days = [
+      {value: 0, displayName: 'Sunday'},
+      {value: 1, displayName: 'Monday'},
+      {value: 2, displayName: 'Tuesday'},
+      {value: 3, displayName: 'Wednesday'},
+      {value: 4, displayName: 'Thursday'},
+      {value: 5, displayName: 'Friday'},
+      {value: 6, displayName: 'Saturday'},
+    ];
+    this.frequency = [
+      {value: 'daily', displayName: 'Daily'},
+      {value: 'weekly', displayName: 'Weekly'},
+      {value: 'monthly', displayName: 'Monthly'},
+    ];
+    if (this.data) {
+      let _frequency = this.data.frequency;
+      this.backupForm.patchValue({
+        frequency: _frequency,
+      });
+      if (_frequency == 'weekly') {
+        this.backupForm.patchValue({day: this.data.day_of_the_week})
+      } else if (_frequency == 'monthly') {
+        this.backupForm.patchValue({date: this.data.day_of_the_month})
+      }
+      let _time = this.data.time.split(":");
+      console.log(_time);
+      if (_time.length > 1) {
+        this.backupForm.patchValue({
+          hour: parseInt(_time[0]),
+          minute: parseInt(_time[1]),
+        })
+      }
+    }
+  }
+
+  getSystemBackupRemoteStorage() {
+    this.systemService.getSystemBackupRemoteStorage()
+      .pipe(take(1)).subscribe({
+      next: (result: any) => {
+        this.backupForm.patchValue(result);
+        this.cdRef.detectChanges();
+      },
+      error: (error: any) => {
+        this.notification.showError(`Error: ${error?.message}`);
+      }
+    })
+  }
+
+  onSubmit() {
+    let payload: any = {
+      backup_target: this.backupForm.value.backup_target,
+      time: this.backupForm.value.hour + ':' + this.backupForm.value.minute,
+      frequency: this.backupForm.value.frequency,
+    }
+    if (this.backupForm.value.frequency === 'weekly') {
+      payload.day_of_the_week = this.backupForm.value.day;
+    } else if (this.backupForm.value.frequency === 'monthly') {
+      payload.day_of_the_month = this.backupForm.value.date;
+    }
+    if (this.backupForm.value.backup_target === 'local') {
+      this.createSystemScheduledBackup(payload);
+    } else {
+      if (this.backupForm.invalid) {
+        console.log(this.backupForm.value);
+        this.backupForm.markAllAsTouched();
+        return;
+      }
+      this.updateSystemBackupRemoteStorage(payload, this.backupForm.value);
+    }
+  }
+
+  updateSystemBackupRemoteStorage(payload1: any, payload2: any) {
+    this.systemService.updateSystemBackupRemoteStorage(payload2)
+      .pipe(take(1))
+      .subscribe({
+        next: (result: any) => {
+          this.createSystemScheduledBackup(payload1);
+        },
+        error: () => {
+          this.notification.showError('Failed to create the backup.');
+        }
+      })
+  }
+
+  createSystemScheduledBackup(payload: any) {
+    this.systemService.createSystemScheduledBackup(payload)
+      .pipe(take(1))
+      .subscribe({
+        next: (result: any) => {
+          this.dialogRef.close(true);
+        },
+        error: () => {
+          this.notification.showError('Failed to create the backup.');
+        }
+      })
+  }
+
+  onCancel() {
+    this.dialogRef.close(false);
+  }
+}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup/system-backup.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup/system-backup.html	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup/system-backup.html	(nonexistent)
@@ -1 +0,0 @@
-<p>system-backup works!</p>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup/system-backup.scss	(deleted)
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup/system-backup.scss	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup/system-backup.scss	(working copy)
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup/system-backup.spec.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup/system-backup.spec.ts	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup/system-backup.spec.ts	(nonexistent)
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SystemBackup } from './system-backup';
-
-describe('SystemBackup', () => {
-  let component: SystemBackup;
-  let fixture: ComponentFixture<SystemBackup>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [SystemBackup]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(SystemBackup);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup/system-backup.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup/system-backup.ts	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-backup/system-backup.ts	(nonexistent)
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-system-backup',
-  imports: [],
-  templateUrl: './system-backup.html',
-  styleUrl: './system-backup.scss'
-})
-export class SystemBackup {
-
-}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-ntp/system-ntp.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-ntp/system-ntp.html	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-ntp/system-ntp.html	(nonexistent)
@@ -1 +0,0 @@
-<p>system-ntp works!</p>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-ntp/system-ntp.scss	(deleted)
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-ntp/system-ntp.scss	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-ntp/system-ntp.scss	(working copy)
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-ntp/system-ntp.spec.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-ntp/system-ntp.spec.ts	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-ntp/system-ntp.spec.ts	(nonexistent)
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SystemNtp } from './system-ntp';
-
-describe('SystemNtp', () => {
-  let component: SystemNtp;
-  let fixture: ComponentFixture<SystemNtp>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [SystemNtp]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(SystemNtp);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-ntp/system-ntp.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-ntp/system-ntp.ts	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-ntp/system-ntp.ts	(nonexistent)
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-system-ntp',
-  imports: [],
-  templateUrl: './system-ntp.html',
-  styleUrl: './system-ntp.scss'
-})
-export class SystemNtp {
-
-}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-restore/system-restore.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-restore/system-restore.html	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-restore/system-restore.html	(nonexistent)
@@ -1 +0,0 @@
-<p>system-restore works!</p>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-restore/system-restore.scss	(deleted)
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-restore/system-restore.scss	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-restore/system-restore.scss	(working copy)
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-restore/system-restore.spec.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-restore/system-restore.spec.ts	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-restore/system-restore.spec.ts	(nonexistent)
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SystemRestore } from './system-restore';
-
-describe('SystemRestore', () => {
-  let component: SystemRestore;
-  let fixture: ComponentFixture<SystemRestore>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [SystemRestore]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(SystemRestore);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-restore/system-restore.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-restore/system-restore.ts	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-restore/system-restore.ts	(nonexistent)
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-system-restore',
-  imports: [],
-  templateUrl: './system-restore.html',
-  styleUrl: './system-restore.scss'
-})
-export class SystemRestore {
-
-}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-time/add-ntp-server.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-time/add-ntp-server.html	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-time/add-ntp-server.html	(working copy)
@@ -0,0 +1,93 @@
+<h2 mat-dialog-title>Add NTP Sever</h2>
+<mat-dialog-content>
+  <form
+    (ngSubmit)="onSubmit()"
+    [formGroup]="ntpServerForm"
+  >
+    <div class="form-field-wrapper">
+      <label for="type" class="form-label">IP Type *</label>
+      <mat-radio-group formControlName="type">
+        <mat-radio-button value="v4">IPv4</mat-radio-button>
+        <mat-radio-button value="v6">IPv6</mat-radio-button>
+      </mat-radio-group>
+    </div>
+    @if (ntpServerForm.get('type')?.value == 'v4') {
+      <div class="form-field-wrapper">
+        <label for="ip" class="form-label">IP Address *</label>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <input
+            id="ip"
+            formControlName="ip"
+            matInput
+            placeholder="IP Address"
+            type="text"
+          />
+          @if (ntpServerForm.get('ip')?.invalid && ntpServerForm.get('ip')?.touched) {
+            <mat-error>
+              @if (ntpServerForm.get('ip')?.errors?.['required']) {
+                IPv4 address is required.
+              } @else if (ntpServerForm.get('ip')?.errors?.['ipv4']) {
+                Invalid IPv4 address format.
+              }
+            </mat-error>
+          }
+        </mat-form-field>
+      </div>
+    } @else {
+      <div class="form-field-wrapper">
+        <label for="ip" class="form-label">IP Address *</label>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <input
+            id="ip"
+            formControlName="ip"
+            matInput
+            placeholder="IP Address"
+            type="text"
+          />
+          @if (ntpServerForm.get('ip')?.invalid && ntpServerForm.get('ip')?.touched) {
+            <mat-error>
+              @if (ntpServerForm.get('ip')?.errors?.['required']) {
+                IPv6 address is required.
+              } @else if (ntpServerForm.get('ip')?.errors?.['ipv6']) {
+                Invalid IPv6 address format.
+              }
+            </mat-error>
+          }
+        </mat-form-field>
+      </div>
+    }
+    <div class="form-field-wrapper">
+      <label for="protocol" class="form-label">Version *</label>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <mat-select formControlName="version">
+          @for (_protocol of versions; track _protocol) {
+            <mat-option [value]="_protocol.value">{{ _protocol.displayName }}</mat-option>
+          }
+        </mat-select>
+        @if (ntpServerForm.get('version')?.invalid && ntpServerForm.get('version')?.touched) {
+          <mat-error>
+            @if (ntpServerForm.get('version')?.errors?.['required']) {
+              Version is required.
+            } @else {
+              Invalid protocol format.
+            }
+          </mat-error>
+        }
+      </mat-form-field>
+    </div>
+  </form>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button
+    mat-button
+    color="basic"
+    (click)="onCancel()">
+    Cancel
+  </button>
+  <button
+    mat-raised-button
+    color="primary"
+    (click)="onSubmit()">
+    Submit
+  </button>
+</mat-dialog-actions>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-time/system-time.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-time/system-time.html	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-time/system-time.html	(working copy)
@@ -1 +1,180 @@
-<p>system-time works!</p>
+<mat-card class="page-card-1" appearance="filled">
+  <mat-card-header>
+    <mat-card-title>System Date & Time</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <form
+      (ngSubmit)="updateSystemDateTime()"
+      [formGroup]="dateTimeForm"
+      class="system-datetime-form"
+    >
+      <div class="form-field-wrapper">
+        <label for="systemDate" class="form-label">System Date *</label>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <input
+            id="systemDate"
+            formControlName="systemDate"
+            matInput
+            placeholder="System Date"
+            [matDatepicker]="datePicker"
+          />
+          <mat-datepicker-toggle matIconSuffix [for]="datePicker"/>
+          <mat-datepicker #datePicker/>
+          <mat-hint>MM/DD/YYYY</mat-hint>
+          @if (dateTimeForm.get('systemDate')?.invalid && dateTimeForm.get('systemDate')?.touched) {
+            <mat-error>
+              @if (dateTimeForm.get('systemDate')?.errors?.['required']) {
+                Date is required.
+              } @else {
+                Invalid date format (Expected: MM/DD/YYYY).
+              }
+            </mat-error>
+          }
+        </mat-form-field>
+      </div>
+      <div class="form-field-wrapper">
+        <label for="systemTime" class="form-label">System Time *</label>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <input
+            id="systemTime"
+            formControlName="systemTime"
+            matInput
+            placeholder="System Time"
+            [matTimepicker]="timePicker"
+            matTimepickerMin="00:00"
+            matTimepickerMax="23:59"
+          />
+          <mat-timepicker-toggle matIconSuffix [for]="timePicker"/>
+          <mat-timepicker #timePicker/>
+          <mat-hint>12:00 PM</mat-hint>
+          @if (dateTimeForm.get('systemTime')?.invalid && dateTimeForm.get('systemTime')?.touched) {
+            <mat-error>
+              @if (dateTimeForm.get('systemTime')?.errors?.['required']) {
+                Time is required.
+              } @else {
+                Invalid time format (Expected: HH:MM AM/PM).
+              }
+            </mat-error>
+          }
+        </mat-form-field>
+      </div>
+      <div class="form-field-wrapper">
+        <label for="systemTimezone" class="form-label">System Timezone *</label>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <mat-label>Continent/Main Zone</mat-label>
+          <mat-select formControlName="selectedParent" id="systemTimezone">
+            @for (parent of parentTimezones; track parent.name) {
+              <mat-option [value]="parent.name"> {{ parent.name }}</mat-option>
+            }
+          </mat-select>
+          <!--          <mat-error *ngIf="hasError('selectedParent', 'required')">Please select a parent zone</mat-error>-->
+        </mat-form-field>
+        <!--      </div>-->
+        @if (childTimezones.length > 0) {
+          <!--        <div class="form-field-wrapper">-->
+            <!--          <label class="form-label"></label>-->
+          <mat-form-field appearance="outline" subscriptSizing="dynamic">
+            <mat-label>Country/Region</mat-label>
+            <mat-select formControlName="selectedChild">
+              @for (child of childTimezones; track child.name) {
+                <mat-option [value]="child.name"> {{ child.name }}</mat-option>
+              }
+            </mat-select>
+            <!--          <mat-error *ngIf="hasError('selectedChild', 'required')">Please select a country/region</mat-error>-->
+          </mat-form-field>
+          <!--        </div>-->
+        }
+
+        @if (grandchildTimezones.length > 0) {
+          <!--        <div class="form-field-wrapper">-->
+            <!--          <label class="form-label"></label>-->
+          <mat-form-field appearance="outline" subscriptSizing="dynamic">
+            <mat-label>City/Area</mat-label>
+            <mat-select formControlName="selectedGrandchild">
+              @for (grandchild of grandchildTimezones; track grandchild.name) {
+                <mat-option [value]="grandchild.name"> {{ grandchild.name }}</mat-option>
+              }
+            </mat-select>
+            <!--          <mat-error *ngIf="hasError('selectedGrandchild', 'required')">Please select a city/area</mat-error>-->
+          </mat-form-field>
+          <!--        </div>-->
+        }
+      </div>
+      <div class="submit-button-wrapper">
+        <button
+          type="submit"
+          mat-raised-button
+          color="primary">
+          Submit
+        </button>
+      </div>
+    </form>
+  </mat-card-content>
+</mat-card>
+<mat-card class="page-card-1" appearance="filled">
+  <mat-card-header>
+    <mat-card-title>NTP</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <div class="form-field-wrapper">
+      <mat-slide-toggle labelPosition="before" [(ngModel)]="isSystemNTPEnabled"
+                        (change)="onNTPToggleChange($event)">Enable NTP
+      </mat-slide-toggle>
+    </div>
+  </mat-card-content>
+</mat-card>
+<mat-card class="page-card-1" appearance="filled">
+  <mat-card-header>
+    <mat-card-title>NTP Servers</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <div class="button-container">
+      <button mat-raised-button (click)="addNTPServer()" [disabled]="isNTPEnabled"
+              matTooltip="Add NTP Server">Add
+      </button>
+    </div>
+    <div class="table-container">
+      <table mat-table [dataSource]="ntpDataSource" 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 + 1 }}</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="version">
+          <th mat-header-cell *matHeaderCellDef> NTP version</th>
+          <td mat-cell *matCellDef="let element"> {{ element.version }}</td>
+        </ng-container>
+        <ng-container matColumnDef="action">
+          <th mat-header-cell *matHeaderCellDef class="action-header w-10"> Action</th>
+          <td mat-cell *matCellDef="let element">
+            <div class="row-action a-link">
+              @if (!isNTPEnabled) {
+                <fa-icon [icon]="['far', 'trash-can']" size="lg" class="delete-icon" matTooltip="Delete NTP Server"
+                         (click)="deleteNTPServer(element)"></fa-icon>
+              } @else {
+                <fa-icon [icon]="['far', 'trash-can']" size="lg" disabled
+                         matTooltip="Not allowed when NTP is enabled."></fa-icon>
+              }
+            </div>
+          </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="ntpColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: ntpColumns;"></tr>
+        <tr class="mat-row table-no-data" *matNoDataRow>
+          <td class="mat-cell" colspan="4">No results found.</td>
+        </tr>
+      </table>
+    </div>
+  </mat-card-content>
+</mat-card>
+<mat-card class="page-card-1" appearance="filled">
+  <mat-card-header>
+    <mat-card-title>NTP Status</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <pre class="wrapped-pre">{{ ntpStats }}</pre>
+  </mat-card-content>
+</mat-card>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-time/system-time.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-time/system-time.scss	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-time/system-time.scss	(working copy)
@@ -0,0 +1,38 @@
+.page-card-1 {
+  width: 100%;
+  border-radius: 0;
+  background-color: inherit;
+  font-size: 14px !important;
+  mat-card-header {
+    color: #1170cf;
+  }
+}
+
+.form-field-wrapper.multi-field-row {
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 15px;
+
+  .form-label {
+    width: 100%; // Optional if you don’t need a label on this row
+    text-align: left;
+    margin-bottom: 8px;
+    margin-left: 15%;
+  }
+
+  mat-form-field {
+    flex: 1 1 0;
+    min-width: 0;
+    max-width: none;
+  }
+
+  & > * {
+    flex-basis: calc((100% - 30px) / 3); // 3 fields with 15px gap between
+  }
+}
+
+.submit-button-wrapper {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-time/system-time.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-time/system-time.ts	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-time/system-time.ts	(working copy)
@@ -1,11 +1,369 @@
-import { Component } from '@angular/core';
+import {ChangeDetectorRef, Component, inject, OnInit} from '@angular/core';
+import {MatTableDataSource} from "@angular/material/table";
+import {SharedModule} from '../../../shared/shared-module';
+import {SystemService} from '../../../services/system-service';
+import {take} from 'rxjs/operators';
+import {NotificationService} from '../../../services/notification';
+import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {CustomValidators} from '../../../utils/custom-validators';
+import {Confirmation} from '../../../services/confirmation';
+import {AN_TZ} from '../../../constants/system-supported-timezones';
 
 @Component({
   selector: 'app-system-time',
-  imports: [],
+  imports: [
+    SharedModule
+  ],
   templateUrl: './system-time.html',
   styleUrl: './system-time.scss'
 })
-export class SystemTime {
+export class SystemTime implements OnInit {
 
+  isNTPEnabled: boolean = false; // readonly variable for system value
+  isSystemNTPEnabled: boolean = false; // form-field value.
+  ntpStats: any = '';
+
+  ntpDataSource = new MatTableDataSource();
+  ntpColumns: Array<string> = ['serial', 'ip', 'version', 'action'];
+
+  dateTimeForm: FormGroup;
+  timezoneData = AN_TZ;
+
+  parentTimezones: any[] = [];
+  childTimezones: any[] = [];
+  grandchildTimezones: any[] = [];
+
+  dialog = inject(MatDialog);
+  dialogConfig = new MatDialogConfig();
+
+  constructor(
+    private systemService: SystemService,
+    private cdRef: ChangeDetectorRef,
+    private notification: NotificationService,
+    private confirmationService: Confirmation,
+    private formBuilder: FormBuilder,
+  ) {
+    let result = {
+      system_time: '2025-06-27T17:35:24'
+    };
+    const dateTime = new Date(result?.system_time);
+    this.dateTimeForm = this.formBuilder.group({
+      systemDate: [dateTime, [Validators.required]],
+      systemTime: ['', [Validators.required]],
+      selectedParent: ['', Validators.required],
+      selectedChild: ['', Validators.required],
+      selectedGrandchild: ['', Validators.required]
+    })
+  }
+
+  ngOnInit() {
+    setTimeout(() => {
+      this.getSystemDateTime();
+      this.getNTPConfig();
+    });
+    this.parentTimezones = this.timezoneData;
+
+    this.dateTimeForm.get('selectedParent')?.valueChanges.subscribe(parentName => {
+      this.childTimezones = [];
+      this.grandchildTimezones = [];
+      this.dateTimeForm.get('selectedChild')?.setValue('');
+      this.dateTimeForm.get('selectedGrandchild')?.setValue('');
+
+      const selectedParent = this.parentTimezones.find(p => p.name === parentName);
+      if (selectedParent && selectedParent.child) {
+        this.childTimezones = selectedParent.child;
+      }
+    });
+
+    this.dateTimeForm.get('selectedChild')?.valueChanges.subscribe(childName => {
+      this.grandchildTimezones = [];
+      this.dateTimeForm.get('selectedGrandchild')?.setValue('');
+
+      const selectedParentName = this.dateTimeForm.get('selectedParent')?.value;
+      const selectedParent = this.parentTimezones.find(p => p.name === selectedParentName);
+
+      if (selectedParent && selectedParent.child) {
+        const selectedChild = selectedParent.child.find((c: { name: any; }) => c.name === childName);
+        if (selectedChild && selectedChild.child) {
+          this.grandchildTimezones = selectedChild.child;
+        }
+      }
+    });
+  }
+
+  getSystemDateTime() {
+    this.systemService.getSystemDateTime()
+      .pipe(take(1)).subscribe({
+      next: (result: any) => {
+        try {
+          const dateTime = new Date(result?.system_time.toString());
+          const tzParts = result?.system_timezone ? result.system_timezone.split('/') : [];
+          this.dateTimeForm.patchValue({
+            systemDate: dateTime,
+            systemTime: dateTime,
+            selectedParent: tzParts[0] || '',
+            selectedChild: tzParts[1] || '',
+            selectedGrandchild: tzParts[2] || '',
+          });
+        } catch (e) {
+          this.notification.showError('Failed to get the system date & time.');
+          console.error(e);
+        }
+        this.cdRef.detectChanges();
+      },
+      error: (error: any) => {
+        this.notification.showError(`Error: ${error?.message}`);
+      }
+    })
+  }
+
+  updateSystemDateTime() {
+    if (this.dateTimeForm.invalid) {
+      console.log(this.dateTimeForm.value);
+      this.dateTimeForm.markAllAsTouched();
+      return;
+    }
+
+    const parent = this.dateTimeForm.get('selectedParent')?.value;
+    const child = this.dateTimeForm.get('selectedChild')?.value;
+    const grandchild = this.dateTimeForm.get('selectedGrandchild')?.value;
+
+    let fullTimezonePath = '';
+
+    if (parent === 'GMT') {
+      fullTimezonePath = 'GMT';
+    } else {
+      const pathParts: string[] = [];
+      if (parent) {
+        pathParts.push(parent);
+      }
+      if (child) {
+        pathParts.push(child);
+      }
+      if (grandchild) {
+        pathParts.push(grandchild);
+      }
+      fullTimezonePath = pathParts.join('/');
+    }
+
+    let selectedDate = this.dateTimeForm.value.systemDate;
+    let selectedTime = this.dateTimeForm.value.systemTime;
+    const combinedDateTime = new Date(
+      selectedDate.getFullYear(),
+      selectedDate.getMonth(),
+      selectedDate.getDate(),
+      selectedTime.getHours(),
+      selectedTime.getMinutes(),
+      selectedTime.getSeconds(),
+      selectedTime.getMilliseconds()
+    );
+    const year = combinedDateTime.getFullYear();
+    const month = ('0' + (combinedDateTime.getMonth() + 1)).slice(-2);
+    const day = ('0' + combinedDateTime.getDate()).slice(-2);
+    const hours = ('0' + combinedDateTime.getHours()).slice(-2);
+    const minutes = ('0' + combinedDateTime.getMinutes()).slice(-2);
+    const seconds = ('0' + combinedDateTime.getSeconds()).slice(-2);
+
+    const formattedDateTime = `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
+
+    let payload: any = {system_time: formattedDateTime, system_timezone: fullTimezonePath};
+    let rawPayload = new FormData();
+    rawPayload.set('post_data', JSON.stringify(payload));
+    this.systemService.updateSystemDateTime(rawPayload)
+      .pipe(take(1))
+      .subscribe({
+        next: (result: any) => {
+          if (result && result.length > 1) {
+            if (result[0]) {
+              this.notification.showSuccess(`System date & time updated successfully!`);
+              this.getSystemDateTime();
+            } else {
+              this.notification.showError(`Failed to update system date & time.`);
+            }
+          }
+        },
+        error: () => {
+          this.notification.showError(`Failed to update system date & time.`);
+        }
+      })
+  }
+
+  getNTPConfig() {
+    this.systemService.getNTPConfig()
+      .pipe(take(1)).subscribe({
+      next: (result: any) => {
+        this.isNTPEnabled = result?.enable_ntp;
+        this.isSystemNTPEnabled = result?.enable_ntp;
+        this.ntpDataSource = new MatTableDataSource(result?.ntp_server);
+        this.ntpStats = result?.ntp_stats;
+        this.cdRef.detectChanges();
+      },
+      error: error => {
+        this.notification.showError(`Error: ${error?.message}`);
+      }
+    })
+  }
+
+  onNTPToggleChange(event: any) {
+    let rawPayload = new FormData();
+    rawPayload.set('post_data', JSON.stringify({"enable_ntp": event?.checked}));
+    this.systemService.updateNTPStatus(rawPayload)
+      .pipe(take(1))
+      .subscribe({
+        next: (result: any) => {
+          if (result && result.length > 1) {
+            if (result[0]) {
+              this.notification.showSuccess(`NTP status updated successfully!`);
+              this.getNTPConfig();
+            } else {
+              this.notification.showError(`Failed to update NTP: ${result[1]}`);
+            }
+          }
+        },
+        error: () => {
+          this.notification.showError('Failed to update NTP.');
+        }
+      })
+  }
+
+  addNTPServer() {
+    const dialogRef = this.dialog.open(AddNTPServer, this.dialogConfig);
+    dialogRef.afterClosed().subscribe((isAdded: boolean) => {
+      if (isAdded) {
+        this.getNTPConfig();
+      }
+    })
+  }
+
+  deleteNTPServer(server: any) {
+    let confirmMsg = `Are you sure you want to delete "${server?.ip}"? This action cannot be undone.`
+    this.confirmationService.openConfirmDialog({
+      title: `Delete ${server?.host_ip}?`,
+      message: confirmMsg,
+      confirmButtonText: 'Yes, Delete It',
+      cancelButtonText: 'No, Keep It',
+      confirmButtonColor: 'warn',
+      cancelButtonColor: 'primary'
+    }).subscribe(result => {
+      if (result) {
+        let payload: any = {
+          ip: {ipv4: server?.ip},
+          version: parseInt(server?.version),
+        }
+        if (CustomValidators.getIpVersion(server?.ip) === 'v6') {
+          payload = {
+            ip: {ipv6: server?.ip},
+            version: parseInt(server?.version),
+          }
+        }
+        let rawPayload = new FormData();
+        rawPayload.set('pk', JSON.stringify(payload));
+        this.systemService.deleteNTPServer(rawPayload)
+          .pipe(take(1))
+          .subscribe({
+            next: (result: any) => {
+              // ToDo: Backend fix required.
+              console.log(result);
+            },
+            error: (err: any) => {
+              if (err?.status === 200) {
+                // ToDo: Backend fix required.
+                this.notification.showSuccess(`${server?.ip} deleted successfully!`);
+                this.getNTPConfig();
+              } else {
+                this.notification.showError('Deletion Failed.');
+              }
+            }
+          })
+      } else {
+        this.notification.showSuccess('Deletion cancelled.');
+      }
+    });
+  }
+
 }
+
+@Component({
+  selector: 'add-ntp-server',
+  templateUrl: './add-ntp-server.html',
+  imports: [SharedModule]
+})
+export class AddNTPServer implements OnInit {
+
+  readonly data = inject(MAT_DIALOG_DATA);
+  readonly dialogRef = inject(MatDialogRef<AddNTPServer>);
+  ntpServerForm: FormGroup;
+
+  versions: any = [
+    {value: 1, displayName: 1},
+    {value: 2, displayName: 2},
+    {value: 3, displayName: 3},
+    {value: 4, displayName: 4}
+  ]
+
+  constructor(
+    private formBuilder: FormBuilder, private systemService: SystemService, private notification: NotificationService,) {
+    this.ntpServerForm = this.formBuilder.group({
+      type: ['v4', [Validators.required]],
+      ip: ['', [Validators.required]],
+      version: [4, [Validators.required]],
+    });
+
+    this.ntpServerForm.get('type')?.valueChanges.subscribe(ipType => {
+      const ipAddressControl = this.ntpServerForm.get('ip');
+      if (ipAddressControl) {
+        ipAddressControl.clearValidators();
+        const currentValidators = [Validators.required]; // ipAddress is always required
+
+        if (ipType === 'v4') {
+          currentValidators.push(CustomValidators.ipv4());
+          ipAddressControl.setValidators(currentValidators);
+        } else if (ipType === 'v6') {
+          currentValidators.push(CustomValidators.ipv6());
+          ipAddressControl.setValidators(currentValidators);
+        }
+        ipAddressControl.updateValueAndValidity();
+      }
+    });
+  }
+
+  ngOnInit(): void {
+    this.ntpServerForm.get('ip')?.updateValueAndValidity();
+  }
+
+  onSubmit() {
+    if (this.ntpServerForm.invalid) {
+      console.log(this.ntpServerForm.value);
+      this.ntpServerForm.markAllAsTouched();
+      return;
+    }
+    let payload: any = {"ip": {"ipv4": this.ntpServerForm.value.ip}, "version": this.ntpServerForm.value.version}
+    if (this.ntpServerForm.value.type == 'v6') {
+      payload = {"ip": {"ipv6": this.ntpServerForm.value.ip}, "version": this.ntpServerForm.value.version}
+    }
+    let rawPayload = new FormData();
+    rawPayload.set('post_data', JSON.stringify(payload));
+    this.systemService.addNTPServer(rawPayload)
+      .pipe(take(1))
+      .subscribe({
+        next: (result: any) => {
+          if (result && result.length > 1) {
+            if (result[0]) {
+              this.notification.showSuccess(`${this.ntpServerForm.value.ip} added successfully!`);
+              this.dialogRef.close(true);
+            } else {
+              this.notification.showError(`Failed to add the host - ${this.ntpServerForm.value.ip}`);
+            }
+          }
+        },
+        error: () => {
+          this.notification.showError('Failed to add the host.');
+        }
+      })
+  }
+
+  onCancel() {
+    this.dialogRef.close(false);
+  }
+}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/api_urls.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/api_urls.ts	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/api_urls.ts	(working copy)
@@ -2,7 +2,9 @@
 
 // These are base URLs, Query params might be added at respective services.
 export const URLS = {
+  // Auth
   LOGIN_URL: `${PREFIX}/login_app`,
+  // Device
   GET_DEVICE_GROUPS_URL: `${PREFIX}/api/cm/device_mgmt/device_group/RoleDeviceGroup/_perform`,
   ADD_DEVICE_GROUP_URL: `${PREFIX}/api/cm/device_mgmt/device_group/DeviceGroup/_add`,
   DELETE_DEVICE_GROUPS_URL: `${PREFIX}/api/cm/device_mgmt/device_group/DeviceGroup/_delete`,
@@ -17,5 +19,29 @@
   UPDATE_DEVICE_LICENSE_URL: `${PREFIX}/api/cm/device_mgmt/device/Device/_perform`,
   WEBCONSOLE_INIT_URL: `${PREFIX}/cm/ajax/webconsole/_init`,
   WEBCONSOLE_HANDLE_REQ_URL: `${PREFIX}/cm/ajax/webconsole/_handle_request`,
-
+  // System
+  GET_SYSTEM_HOST_CONFIG_URL: `${PREFIX}/api/cm/system/HostSettings/_fields`,
+  UPDATE_SYSTEM_HOST_CONFIG_URL: `${PREFIX}/api/cm/system/HostSettings/_update`,
+  GET_SYSTEM_LOG_SETTINGS_URL: `${PREFIX}/cm/get_log_basic`,
+  UPDATE_SYSTEM_LOG_SETTINGS_URL: `${PREFIX}/cm/update_log_basic`,
+  GET_REMOTE_SYSTEM_LOG_HOST_URL: `${PREFIX}/cm/get_log_host`,
+  ADD_REMOTE_SYSTEM_LOG_HOST_URL: `${PREFIX}/cm/add_log_host`,
+  DELETE_REMOTE_SYSTEM_LOG_HOST_URL: `${PREFIX}/cm/delete_log_host`,
+  GET_APP_LICENSE_URL: `${PREFIX}/api/cm/system/License/_fields`,
+  UPDATE_APP_LICENSE_URL: `${PREFIX}/api/cm/system/License/_update`,
+  GET_NTP_CONFIG_URL: `${PREFIX}/api/cm/system/NTPSettings/_fields`,
+  UPDATE_NTP_STATUS_URL: `${PREFIX}/api/cm/system/NTPSettings/_update`,
+  ADD_NTP_SERVER_URL: `${PREFIX}/api/cm/system/NTPServer/_add`,
+  DELETE_NTP_SERVER_URL: `${PREFIX}/api/cm/system/NTPServer/_delete`,
+  GET_SYSTEM_TIME_URL: `${PREFIX}/api/cm/system/TimeSettings/_fields`,
+  UPDATE_SYSTEM_TIME_URL: `${PREFIX}/api/cm/system/TimeSettings/_update`,
+  GET_SYSTEM_BACKUP_FILES_URL: `${PREFIX}/backup/files`,
+  GET_SYSTEM_BACKUP_SCHEDULE_URL: `${PREFIX}/backup/schedule`,
+  GET_SYSTEM_RESTORE_STATUS_URL: `${PREFIX}/restore/status`,
+  DELETE_SYSTEM_BACKUP_FILE_URL: `${PREFIX}/backup/file`,
+  DELETE_SYSTEM_SCHEDULED_BACKUP_URL: `${PREFIX}/backup/schedule`,
+  CREATE_SYSTEM_BACKUP_URL: `${PREFIX}/backup/start`,
+  GET_SYSTEM_BACKUP_REMOTE_STORAGE_URL: `${PREFIX}/backup/remote_storage`,
+  UPDATE_SYSTEM_BACKUP_REMOTE_STORAGE_URL: `${PREFIX}/backup/remote_storage`,
+  CREATE_SYSTEM_SCHEDULED_BACKUP_URL: `${PREFIX}/backup/schedule`,
 } as const; // Makes properties readonly
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/menu.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/menu.ts	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/menu.ts	(working copy)
@@ -68,6 +68,13 @@
         routerLink: '/system/notifications',
         roles: ['super_admin', 'device_admin', 'common_admin'],
         permissions: ['sNotifications']
+      },
+      {
+        label: 'HA',
+        icon: '',
+        routerLink: '/system/ha',
+        roles: ['super_admin', 'device_admin', 'common_admin'],
+        permissions: ['sHA']
       }
     ]
   },
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/system-supported-timezones.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/system-supported-timezones.ts	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/system-supported-timezones.ts	(working copy)
@@ -0,0 +1,1098 @@
+export const AN_TZ: any = [
+  {
+    'name':'GMT'
+  },
+  {
+    'name':'Asia',
+    'child': [
+      {
+        'name':'Afghanistan',
+        'child':[
+          {
+            'name':'Kabul'
+          }
+        ]
+      },
+      {
+        'name':'Armenia',
+        'child':[
+          {
+            'name':'Yerevan'
+          }
+        ]
+      },
+      {
+        'name':'Azerbaijan',
+        'child':[
+          {
+            'name':'Baku'
+          }
+        ]
+      },
+      {
+        'name':'Beirut',
+        'child':[
+          {
+            'name':'Beirut'
+          }
+        ]
+      },
+      {
+        'name':'Bangladesh',
+        'child':[
+          {
+            'name':'Dhaka'
+          }
+        ]
+      },
+      {
+        'name':'Bahrain',
+        'child':[
+          {
+            'name':'Bahrain'
+          }
+        ]
+      },
+      {
+        'name':'Bhutan',
+        'child':[
+          {
+            'name':'Thimpu'
+          }
+        ]
+      },
+      {
+        'name':'Brunei',
+        'child':[
+          {
+            'name':'Brunei'
+          }
+        ]
+      },
+      {
+        'name':'China',
+        'child':[
+          {
+            'name':'Most of China(GMT+08:00)'
+          },
+          {
+            'name':'Taiwan'
+          }
+        ]
+      },
+      {
+        'name':'Cambodia',
+        'child':[
+          {
+            'name':'Phnom_Penh'
+          }
+        ]
+      },
+      {
+        'name':'Cyprus',
+        'child':[
+          {
+            'name':'Famagusta'
+          },
+          {
+            'name':'Nicosia'
+          }
+        ]
+      },
+      {
+        'name':'Georgia',
+        'child':[
+          {
+            'name':'Tbilisi'
+          }
+        ]
+      },
+      {
+        'name':'India',
+        'child':[
+          {
+            'name':'Kolkata'
+          }
+        ]
+      },
+      {
+        'name':'Indonesia',
+        'child':[
+          {
+            'name':'Indonesia - Jakarta'
+          },
+          {
+            'name':'Indonesia - Jayapura'
+          },
+          {
+            'name':'Indonesia - Makassar'
+          },
+          {
+            'name':'Indonesia - Pontianak'
+          }
+        ]
+      },
+      {
+        'name':'Iraq',
+        'child':[
+          {
+            'name':'Baghdad'
+          }
+        ]
+      },
+      {
+        'name':'Iran',
+        'child':[
+          {
+            'name':'Tehran'
+          }
+        ]
+      },
+      {
+        'name':'Japan',
+        'child':[
+          {
+            'name':'Japan'
+          }
+        ]
+      },
+      {
+        'name':'Jordan',
+        'child':[
+          {
+            'name':'Amman'
+          }
+        ]
+      },
+      {
+        'name':'Kazakhstan',
+        'child':[
+          {
+            'name':'Almaty'
+          },
+          {
+            'name':'Aqtau'
+          },
+          {
+            'name':'Aqtobe'
+          },
+          {
+            'name':'Atyrau'
+          },
+          {
+            'name':'Oral'
+          },
+          {
+            'name':'Qostanay'
+          },
+          {
+            'name':'Qyzylorda'
+          }
+        ]
+      },
+      {
+        'name':'Kyrgyzstan',
+        'child':[
+          {
+            'name':'Bishkek'
+          }
+        ]
+      },
+      {
+        'name':'Kuwait',
+        'child':[
+          {
+            'name':'Kuwait'
+          }
+        ]
+      },
+      {
+        'name':'Macao',
+        'child':[
+          {
+            'name':'Macau'
+          }
+        ]
+      },
+      {
+        'name':'Malaysia',
+        'child':[
+          {
+            'name':'Malaysia - Kuala Lumpur'
+          },
+          {
+            'name':'Malaysia - Kuching'
+          }
+        ]
+      },
+      {
+        'name':'Myanmar',
+        'child':[
+          {
+            'name':'Yangon'
+          }
+        ]
+      },
+      {
+        'name':'Mongolia',
+        'child':[
+          {
+            'name':'Choibalsan'
+          },
+          {
+            'name':'Hovd'
+          },
+          {
+            'name':'Ulaanbaatar'
+          }
+        ]
+      },
+      {
+        'name':'Nepal',
+        'child':[
+          {
+            'name':'Katmandu'
+          }
+        ]
+      },
+      {
+        'name':'North Korea Republic',
+        'child':[
+          {
+            'name':'Pyongyang'
+          }
+        ]
+      },
+      {
+        'name':'Pakistan',
+        'child':[
+          {
+            'name':'Karachi'
+          }
+        ]
+      },
+      {
+        'name':'Philippines',
+        'child':[
+          {
+            'name':'Philippines'
+          }
+        ]
+      },
+      {
+        'name':'Palestine',
+        'child':[
+          {
+            'name':'Gaza'
+          },
+          {
+            'name':'Hebron'
+          }
+        ]
+      },
+      {
+        'name':'Oman',
+        'child':[
+          {
+            'name':'Muscat'
+          }
+        ]
+      },
+      {
+        'name':'Saudiarabia',
+        'child':[
+          {
+            'name':'Riyadh'
+          }
+        ]
+      },
+      {
+        'name':'South Korea',
+        'child':[
+          {
+            'name':'South Korea'
+          }
+        ]
+      },
+      {
+        'name':'Singapore',
+        'child':[
+          {
+            'name':'Singapore'
+          }
+        ]
+      },
+      {
+        'name':'Syria',
+        'child':[
+          {
+            'name':'Damascus'
+          }
+        ]
+      },
+      {
+        'name':'Srilanka',
+        'child':[
+          {
+            'name':'Colombo'
+          }
+        ]
+      },
+      {
+        'name':'Tajikistan',
+        'child':[
+          {
+            'name':'Dushanbe'
+          }
+        ]
+      },
+      {
+        'name':'Thailand',
+        'child':[
+          {
+            'name':'Thailand'
+          }
+        ]
+      },
+      {
+        'name':'Taiwan',
+        'child':[
+          {
+            'name':'Taipei'
+          }
+        ]
+      },
+      {
+        'name':'Turkmenistan',
+        'child':[
+          {
+            'name':'Ashgabat'
+          }
+        ]
+      },
+      {
+        'name':'Timor-Leste',
+        'child':[
+          {
+            'name':'Dili'
+          }
+        ]
+      },
+      {
+        'name':'Vietnam',
+        'child':[
+          {
+            'name':'Vietnam'
+          }
+        ]
+      },
+      {
+        'name':'United Arab Emirates',
+        'child':[
+          {
+            'name':'United Arab Emirates'
+          }
+        ]
+      },
+      {
+        'name':'Uzbekistan',
+        'child':[
+          {
+            'name':'Tashkent'
+          },
+          {
+            'name':'Samarkand'
+          }
+        ]
+      },
+      {
+        'name':'Yemen',
+        'child':[
+          {
+            'name':'Aden'
+          }
+        ]
+      },
+      {
+        'name':'Qatar',
+        'child':[
+          {
+            'name':'Qatar'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    'name':'Europe',
+    'child': [
+      {
+        'name':'Austria',
+        'child':[
+          {
+            'name':'Austria'
+          }
+        ]
+      },
+      {
+        'name':'Belgium',
+        'child':[
+          {
+            'name':'Brussels'
+          }
+        ]
+      },
+      {
+        'name':'Denmark',
+        'child':[
+          {
+            'name':'Denmark'
+          }
+        ]
+      },
+      {
+        'name':'France',
+        'child':[
+          {
+            'name':'France'
+          }
+        ]
+      },
+      {
+        'name':'Finland',
+        'child':[
+          {
+            'name':'Finland'
+          }
+        ]
+      },
+      {
+        'name':'Germany',
+        'child':[
+          {
+            'name':'Germany'
+          }
+        ]
+      },
+      {
+        'name':'Greece',
+        'child':[
+          {
+            'name':'Greece'
+          }
+        ]
+      },
+      {
+        'name':'Hungary',
+        'child':[
+          {
+            'name':'Budapest'
+          }
+        ]
+      },
+      {
+        'name':'Israel',
+        'child':[
+          {
+            'name':'Israel'
+          }
+        ]
+      },
+      {
+        'name':'Italy',
+        'child':[
+          {
+            'name':'Italy'
+          }
+        ]
+      },
+      {
+        'name':'Netherland',
+        'child':[
+          {
+            'name':'Netherland'
+          }
+        ]
+      },
+      {
+        'name':'Norway',
+        'child':[
+          {
+            'name':'Norway'
+          }
+        ]
+      },
+      {
+        'name':'Portugal',
+        'child':[
+          {
+            'name':'Portugal'
+          }
+        ]
+      },
+      {
+        'name':'Russia',
+        'child':[
+          {
+            'name':'Moscow'
+          }
+        ]
+      },
+      {
+        'name':'Spain',
+        'child':[
+          {
+            'name':'Spain'
+          }
+        ]
+      },
+      {
+        'name':'Sweden',
+        'child':[
+          {
+            'name':'Sweden'
+          }
+        ]
+      },
+      {
+        'name':'Switzerland',
+        'child':[
+          {
+            'name':'Switzerland'
+          }
+        ]
+      },
+      {
+        'name':'Turkey',
+        'child':[
+          {
+            'name':'Istanbul'
+          }
+        ]
+      },
+      {
+        'name':'United Kingdom',
+        'child':[
+          {
+            'name':'Great Britain'
+          },
+          {
+            'name':'Northern Ireland'
+          },
+          {
+            'name':'Scotland'
+          }
+        ]
+      },
+      {
+        'name':'Ukraine',
+        'child':[
+          {
+            'name':'Kiev'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    'name':'North America',
+    'child':[
+      {
+        'name':'Canada',
+        'child':[
+          {
+            'name':'Newfoundland Island'
+          },
+          {
+            'name':'Atlantic Time - Nova Scotia (most places), NB, W Labrador, E Quebec & PEI'
+          },
+          {
+            'name':'Atlantic Time - Nova Scotia - places that did not observe DST 1966-1971'
+          },
+          {
+            'name':'Atlantic Time - E Labrador'
+          },
+          {
+            'name':'Eastern Time - Ontario & Quebec - most locations'
+          },
+          {
+            'name':'Eastern Time - Ontario & Quebec - places that did not observe DST 1967-1973'
+          },
+          {
+            'name':'Eastern Time - Thunder Bay, Ontario'
+          },
+          {
+            'name':'Central Time - Manitoba & west Ontario'
+          },
+          {
+            'name':'Central Time - Rainy River & Fort Frances, Ontario'
+          },
+          {
+            'name':'Central Time - Pangnirtung, Nunavut'
+          },
+          {
+            'name':'Central Time - east Nunavut'
+          },
+          {
+            'name':'Central Time - central Nunavut'
+          },
+          {
+            'name':'Central Time - west Nunavut'
+          },
+          {
+            'name':'Central Standard Time - Saskatchewan - most locations'
+          },
+          {
+            'name':'Central Standard Time - Saskatchewan - midwest'
+          },
+          {
+            'name':'Mountain Time - Alberta, east British Columbia & west Saskatchewan'
+          },
+          {
+            'name':'Mountain Time - central Northwest Territories'
+          },
+          {
+            'name':'Mountain Time - west Northwest Territories'
+          },
+          {
+            'name':'Mountain Standard Time - Dawson Creek & Fort Saint John, British Columbia'
+          },
+          {
+            'name':'Pacific Time - west British Columbia'
+          },
+          {
+            'name':'Pacific Time - south Yukon'
+          },
+          {
+            'name':'Pacific Time - north Yukon'
+          },
+        ]
+      },
+      {
+        'name':'United States',
+        'child':[
+          {
+            'name':'Eastern Time'
+          },
+          {
+            'name':'Eastern Time - Michigan - most locations'
+          },
+          {
+            'name':'Eastern Time - Kentucky - Louisville area'
+          },
+          {
+            'name':'Eastern Time - Kentucky - Wayne County'
+          },
+          {
+            'name':'Eastern Standard Time - Indiana - most locations'
+          },
+          {
+            'name':'Eastern Standard Time - Indiana - Crawford County'
+          },
+          {
+            'name':'Eastern Standard Time - Indiana - Starke County'
+          },
+          {
+            'name':'Eastern Standard Time - Indiana - Switzerland County'
+          },
+          {
+            'name':'Central Time'
+          },
+          {
+            'name':'Central Time - Michigan - Wisconsin border'
+          },
+          {
+            'name':'Mountain Time'
+          },
+          {
+            'name':'Mountain Time - south Idaho & east Oregon'
+          },
+          {
+            'name':'Mountain Time - Navajo'
+          },
+          {
+            'name':'Mountain Standard Time - Arizona'
+          },
+          {
+            'name':'Pacific Time'
+          },
+          {
+            'name':'Alaska Time'
+          },
+          {
+            'name':'Alaska Time - Alaska panhandle'
+          },
+          {
+            'name':'Alaska Time - Alaska panhandle neck'
+          },
+          {
+            'name':'Alaska Time - west Alaska'
+          },
+          {
+            'name':'Aleutian Islands'
+          },
+          {
+            'name':'Hawaii'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    'name':'Oceania',
+    'child':[
+      {
+        'name':'Australia',
+        'child':[
+          {
+            'name':'Lord Howe Island'
+          },
+          {
+            'name':'Tasmania'
+          },
+          {
+            'name':'Victoria'
+          },
+          {
+            'name':'New South Wales - most locations'
+          },
+          {
+            'name':'New South Wales - Yancowinna'
+          },
+          {
+            'name':'Queensland - most locations'
+          },
+          {
+            'name':'Queensland - Holiday Islands'
+          },
+          {
+            'name':'South Australia'
+          },
+          {
+            'name':'Northern Territory'
+          },
+          {
+            'name':'Western Australia'
+          }
+        ]
+      },
+      {
+        'name':'New Zealand',
+        'child':[
+          {
+            'name':'New Zealand'
+          }
+        ]
+      },
+      {
+        'name':'Samoa',
+        'child':[
+          {
+            'name':'Apia'
+          }
+        ]
+      },
+      {
+        'name':'Fiji',
+        'child':[
+          {
+            'name':'Fiji'
+          }
+        ]
+      },
+      {
+        'name':'Honolulu',
+        'child':[
+          {
+            'name':'Honolulu'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    'name':'Africa',
+    'child':[
+      {
+        'name':'Algeria',
+        'child':[
+          {
+            'name':'Algiers'
+          }
+        ]
+      },
+      {
+        'name':'Angola',
+        'child':[
+          {
+            'name':'Luanda'
+          }
+        ]
+      },
+      {
+        'name':'Benin',
+        'child':[
+          {
+            'name':'Porto-Novo'
+          }
+        ]
+      },
+      {
+        'name':'Burkina Faso',
+        'child':[
+          {
+            'name':'Ouagadougou'
+          }
+        ]
+      },
+      {
+        'name':'Burundi',
+        'child':[
+          {
+            'name':'Bujumbura'
+          }
+        ]
+      },
+      {
+        'name':'Bangui',
+        'child':[
+          {
+            'name':'Bangui'
+          }
+        ]
+      },
+      {
+        'name':'Cameroon',
+        'child':[
+          {
+            'name':'Douala'
+          }
+        ]
+      },
+      {
+        'name':'Congo',
+        'child':[
+          {
+            'name':'Lubumbashi'
+          }
+        ]
+      },
+      {
+        'name':'Djibouti',
+        'child':[
+          {
+            'name':'Djibouti'
+          }
+        ]
+      },
+      {
+        'name':'Equatorial Guinea',
+        'child':[
+          {
+            'name':'Malabo'
+          }
+        ]
+      },
+      {
+        'name':'Eritrea',
+        'child':[
+          {
+            'name':'Asmara'
+          }
+        ]
+      },
+      {
+        'name':'Ethiopia',
+        'child':[
+          {
+            'name':'Addis_Ababa'
+          }
+        ]
+      },
+      {
+        'name':'Egypt',
+        'child':[
+          {
+            'name':'Egypt'
+          }
+        ]
+      },
+      {
+        'name':'Morocco',
+        'child':[
+          {
+            'name':'Morocco'
+          }
+        ]
+      },
+      {
+        'name':'Gabon',
+        'child':[
+          {
+            'name':'Libreville'
+          }
+        ]
+      },
+      {
+        'name':'Gambia',
+        'child':[
+          {
+            'name':'Banjul'
+          }
+        ]
+      },
+      {
+        'name':'Ghana',
+        'child':[
+          {
+            'name':'Accra'
+          }
+        ]
+      },
+      {
+        'name':'Guinea',
+        'child':[
+          {
+            'name':'Conakry'
+          }
+        ]
+      },
+      {
+        'name':'Guinea-Bissau',
+        'child':[
+          {
+            'name':'Bissau'
+          }
+        ]
+      },
+      {
+        'name':'Ivory Coast',
+        'child':[
+          {
+            'name':'Abidjan'
+          }
+        ]
+      },
+      {
+        'name':'Namibia',
+        'child':[
+          {
+            'name':'Windhoek'
+          }
+        ]
+      },
+      {
+        'name':'Nigeria',
+        'child':[
+          {
+            'name':'Lagos'
+          }
+        ]
+      },
+      {
+        'name':'Niger',
+        'child':[
+          {
+            'name':'Niamey'
+          }
+        ]
+      },
+      {
+        'name':'Mali',
+        'child':[
+          {
+            'name':'Bamako'
+          }
+        ]
+      },
+      {
+        'name':'Mauritania',
+        'child':[
+          {
+            'name':'Nouakchott'
+          }
+        ]
+      },
+      {
+        'name':'Blantyre',
+        'child':[
+          {
+            'name':'Blantyre'
+          }
+        ]
+      },
+      {
+        'name':'Kenya',
+        'child':[
+          {
+            'name':'Nairobi'
+          }
+        ]
+      },
+      {
+        'name':'Senegal',
+        'child':[
+          {
+            'name':'Dakar'
+          }
+        ]
+      },
+      {
+        'name':'South Africa',
+        'child':[
+          {
+            'name':'South Africa'
+          }
+        ]
+      },
+      {
+        'name':'Sudan',
+        'child':[
+          {
+            'name':'Khartoum'
+          }
+        ]
+      },
+      {
+        'name':'South Sudan',
+        'child':[
+          {
+            'name':'Juba'
+          }
+        ]
+      },
+      {
+        'name':'Togo',
+        'child':[
+          {
+            'name':'Lome'
+          }
+        ]
+      },
+      {
+        'name':'Tunis',
+        'child':[
+          {
+            'name':'Tunis'
+          }
+        ]
+      },
+      {
+        'name':'Uganda',
+        'child':[
+          {
+            'name':'Kampala'
+          }
+        ]
+      },
+      {
+        'name':'Zambia',
+        'child':[
+          {
+            'name':'Lusaka'
+          }
+        ]
+      }
+    ]
+  }
+];
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/interceptors/csrf-interceptor.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/interceptors/csrf-interceptor.ts	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/interceptors/csrf-interceptor.ts	(working copy)
@@ -1,27 +1,29 @@
-import {
-  HttpContextToken,
-  HttpInterceptorFn,
-  HttpRequest
-} from '@angular/common/http';
-import { inject } from '@angular/core';
-import { NotificationService } from '../services/notification';
+import {HttpContextToken, HttpInterceptorFn, HttpRequest} from '@angular/common/http';
+import {inject, PLATFORM_ID} from '@angular/core';
+import {isPlatformBrowser} from '@angular/common';
+import {NotificationService} from '../services/notification';
 
 export const ADD_CSRF_TO_PAYLOAD = new HttpContextToken<boolean>(() => false);
 export const ADD_CSRF_TO_FORMDATA = new HttpContextToken<boolean>(() => false);
 
-export const csrfInterceptorFn: HttpInterceptorFn = (req, next) => {
-  const notificationService = inject(NotificationService);
-  const csrfToken = document.cookie
+function getCsrfToken(): string | null {
+  const platformId = inject(PLATFORM_ID);
+  if (!isPlatformBrowser(platformId)) return null;
+
+  return document.cookie
     .split('; ')
     .find(row => row.startsWith('csrftoken='))?.split('=')[1] || null;
+}
 
-  if (req.url.includes('/login_app')){
+export const csrfInterceptorFn: HttpInterceptorFn = (req, next) => {
+  const notificationService = inject(NotificationService);
+  const csrfToken = getCsrfToken();
+
+  if (req.url.includes('/login_app')) {
     return next(req);
   }
 
-  // ToDo: Fix it with CSRF support
   if (!csrfToken) {
-    // notificationService.showError('CSRF token not found');
     return next(req);
   }
 
@@ -32,20 +34,22 @@
 
   if (shouldInjectToFormData && req.body instanceof FormData) {
     const newFormData = new URLSearchParams();
-    for (const pair of newFormData.entries()) {
-      newFormData.set(pair[0], pair[1]);
+    for (const [key, value] of req.body.entries()) {
+      newFormData.append(key, value.toString());
     }
     newFormData.append('csrfmiddlewaretoken', csrfToken);
 
     clonedRequest = clonedRequest.clone({
       body: newFormData,
-      setHeaders: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}
+      setHeaders: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+      }
     });
   }
 
   if (shouldAddHeader) {
     clonedRequest = clonedRequest.clone({
-      setHeaders: { 'X-CSRFToken': csrfToken }
+      setHeaders: {'X-CSRFToken': csrfToken}
     });
   }
 
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/auth.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/auth.ts	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/auth.ts	(working copy)
@@ -30,6 +30,7 @@
     'sTasks',
     'sAdminTools',
     'sNotifications',
+    'sHA',
     'dHA',
     'dSSL',
     'UpgradeCentre',
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/layout.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/layout.ts	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/layout.ts	(working copy)
@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {BehaviorSubject} from 'rxjs';
+import {BehaviorSubject, Observable} from 'rxjs';
 import {Storage} from './storage';
 
 const SIDEBAR_COLLAPSED_KEY = 'sidebarCollapsed';
@@ -9,21 +9,24 @@
 })
 export class Layout {
 
-  private collapsedSubject;
+  private _isCollapsedSubject: BehaviorSubject<boolean>;
+  public isSidebarCollapsed$: Observable<boolean>;
 
   constructor(
     private storage: Storage,
   ) {
-    this.collapsedSubject = new BehaviorSubject<boolean>(this.getInitialCollapsedState());
+    this._isCollapsedSubject = new BehaviorSubject<boolean>(this.getInitialCollapsedState());
+    this.isSidebarCollapsed$ = this._isCollapsedSubject.asObservable();
   }
 
-  setSidebarCollapsed(state: boolean) {
+  setSidebarCollapsed(state: boolean): void {
     this.storage.setItem(SIDEBAR_COLLAPSED_KEY, JSON.stringify(state));
-    this.collapsedSubject.next(state);
+    this._isCollapsedSubject.next(state);
   }
 
-  getSidebarCollapsed() {
-    return this.collapsedSubject.asObservable();
+  toggleSidebar(): void {
+    const currentState = this._isCollapsedSubject.value;
+    this.setSidebarCollapsed(!currentState);
   }
 
   private getInitialCollapsedState(): boolean {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/system-service.spec.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/system-service.spec.ts	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/system-service.spec.ts	(working copy)
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SystemService } from './system-service';
+
+describe('SystemService', () => {
+  let service: SystemService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SystemService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/system-service.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/system-service.ts	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/system-service.ts	(working copy)
@@ -0,0 +1,147 @@
+import {Injectable} from '@angular/core';
+import {URLS} from '../constants/api_urls';
+import {HttpService} from './http';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SystemService {
+
+  constructor(private http: HttpService) {
+  }
+
+  getSystemHostConfig() {
+    return this.http.get(URLS.GET_SYSTEM_HOST_CONFIG_URL);
+  }
+
+  updateSystemHostConfig(rawPayload: any) {
+    return this.http.post(URLS.UPDATE_SYSTEM_HOST_CONFIG_URL, rawPayload, {
+      csrf: true,
+      isFormData: true,
+      csrfInFormData: true
+    });
+  }
+
+  getSystemLogSettings() {
+    return this.http.get(URLS.GET_SYSTEM_LOG_SETTINGS_URL);
+  }
+
+  updateSystemLogSettings(rawPayload: any) {
+    return this.http.post(URLS.UPDATE_SYSTEM_LOG_SETTINGS_URL, rawPayload, {
+      csrf: true,
+      isFormData: true,
+      csrfInFormData: true
+    });
+  }
+
+  getRemoteSyslogHosts() {
+    return this.http.get(URLS.GET_REMOTE_SYSTEM_LOG_HOST_URL);
+  }
+
+  addRemoteSyslogHost(rawPayload: any) {
+    return this.http.post(URLS.ADD_REMOTE_SYSTEM_LOG_HOST_URL, rawPayload, {
+      csrf: true,
+      isFormData: true,
+      csrfInFormData: true
+    });
+  }
+
+  deleteRemoteSyslogHost(rawPayload: any) {
+    return this.http.post(URLS.DELETE_REMOTE_SYSTEM_LOG_HOST_URL, rawPayload, {
+      csrf: true,
+      isFormData: true,
+      csrfInFormData: true
+    });
+  }
+
+  getAppLicense() {
+    return this.http.get(URLS.GET_APP_LICENSE_URL);
+  }
+
+  updateAppLicense(rawPayload: any) {
+    return this.http.post(URLS.UPDATE_APP_LICENSE_URL, rawPayload, {
+      csrf: true,
+      isFormData: true,
+      csrfInFormData: true
+    });
+  }
+
+  getNTPConfig() {
+    const baseUrl = URLS.GET_NTP_CONFIG_URL;
+    const finalUrl = `${baseUrl}?fields=[%22enable_ntp%22,%20%22ntp_server%22,%20%22ntp_stats%22]`;
+    return this.http.get(finalUrl);
+  }
+
+  updateNTPStatus(rawPayload: any) {
+    return this.http.post(URLS.UPDATE_NTP_STATUS_URL, rawPayload, {
+      csrf: true,
+      isFormData: true,
+      csrfInFormData: true
+    });
+  }
+
+  addNTPServer(rawPayload: any) {
+    return this.http.post(URLS.ADD_NTP_SERVER_URL, rawPayload, {
+      csrf: true,
+      isFormData: true,
+      csrfInFormData: true
+    });
+  }
+
+  deleteNTPServer(rawPayload: any) {
+    return this.http.post(URLS.DELETE_NTP_SERVER_URL, rawPayload, {
+      csrf: true,
+      isFormData: true,
+      csrfInFormData: true
+    });
+  }
+
+  getSystemDateTime() {
+    return this.http.get(URLS.GET_SYSTEM_TIME_URL);
+  }
+
+  updateSystemDateTime(rawPayload: any) {
+    return this.http.post(URLS.UPDATE_SYSTEM_TIME_URL, rawPayload, {
+      csrf: true,
+      isFormData: true,
+      csrfInFormData: true
+    });
+  }
+
+  getSystemBackupFiles() {
+    return this.http.get(URLS.GET_SYSTEM_BACKUP_FILES_URL);
+  }
+
+  deleteSystemBackupFile(filename: string) {
+    return this.http.delete(`${URLS.DELETE_SYSTEM_BACKUP_FILE_URL}?filename=${filename}`);
+  }
+
+  getScheduledBackupFiles() {
+    return this.http.get(URLS.GET_SYSTEM_BACKUP_SCHEDULE_URL);
+  }
+
+  deleteBackupSchedule() {
+    return this.http.delete(`${URLS.DELETE_SYSTEM_SCHEDULED_BACKUP_URL}`);
+  }
+
+  getSystemRestoreStatus() {
+    return this.http.get(URLS.GET_SYSTEM_RESTORE_STATUS_URL);
+  }
+
+  createSystemBackup(payload: any) {
+    return this.http.post(URLS.CREATE_SYSTEM_BACKUP_URL, payload);
+  }
+
+  getSystemBackupRemoteStorage() {
+    return this.http.get(URLS.GET_SYSTEM_BACKUP_REMOTE_STORAGE_URL);
+  }
+
+  updateSystemBackupRemoteStorage(payload: any) {
+    return this.http.post(URLS.UPDATE_SYSTEM_BACKUP_REMOTE_STORAGE_URL, payload);
+  }
+
+  // Same for Edit as well.
+  createSystemScheduledBackup(payload: any) {
+    return this.http.post(URLS.CREATE_SYSTEM_SCHEDULED_BACKUP_URL, payload);
+  }
+}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/utils-service.spec.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/utils-service.spec.ts	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/utils-service.spec.ts	(working copy)
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UtilsService } from './utils-service';
+
+describe('UtilsService', () => {
+  let service: UtilsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(UtilsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/utils-service.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/utils-service.ts	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/utils-service.ts	(working copy)
@@ -0,0 +1,62 @@
+import { Injectable } from '@angular/core';
+import {MatTableDataSource} from '@angular/material/table';
+import {KeyValuePair} from '../components/sub-components/device-details/device-details';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UtilsService {
+
+  constructor() {
+  }
+
+  processConfigData(configData: any): any {
+    let dataSource = new MatTableDataSource<KeyValuePair>();
+    if (configData) {
+      const dataArray: KeyValuePair[] = Object.keys(configData).map(key => ({
+        key: this.formatKey(key), // Format the key for display
+        value: configData[key] === "" ? "N/A" : configData[key] // Display "N/A" for empty strings
+      }));
+      dataSource.data = dataArray;
+    } else {
+      dataSource.data = [];
+    }
+    return dataSource;
+  }
+
+  formatKey(key: string): string {
+    const rawReplacements: { [abbreviation: string]: string } = {
+      'bld': 'build',
+      'hw': 'hardware',
+      'adc_num': 'number of licensed adc devices',
+      'device_num': 'total number of licensed devices',
+      'vpn_num': 'number of licensed vpn devices',
+      'vpn_lic_sess': 'number of licensed vpn sessions',
+      'waf_num': 'number of licensed waf devices',
+      "expiration_data": "expiration_date",
+    };
+
+    let processedKey = key;
+    for (const abbr in rawReplacements) {
+      if (Object.prototype.hasOwnProperty.call(rawReplacements, abbr)) {
+        const pattern = new RegExp(`(^|_)${abbr}(_|$)`, 'gi');
+        processedKey = processedKey.replace(pattern, (match, p1, p2) => {
+          return p1 + rawReplacements[abbr] + p2;
+        });
+        const directPattern = new RegExp(`^${abbr}$`, 'gi');
+        processedKey = processedKey.replace(directPattern, rawReplacements[abbr]);
+      }
+    }
+    let formattedKey = processedKey
+      .replace(/_/g, ' ')
+      .replace(/([A-Z])/g, ' $1')
+      .replace(/^./, (str) => str.toUpperCase())
+      .replace(/\s+/g, ' ').trim();
+
+    const wordsToForceUppercase = ['cpu', 'ram', 'ssl', 'adc', 'apv', 'vpn', 'waf', 'asf'];
+    const uppercasePattern = new RegExp(`\\b(${wordsToForceUppercase.join('|')})\\b`, 'gi');
+    formattedKey = formattedKey.replace(uppercasePattern, (match) => match.toUpperCase());
+
+    return formattedKey;
+  }
+}
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 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/shared/shared-module.ts	(working copy)
@@ -37,6 +37,8 @@
   faCheckCircle,
   faCircleLeft,
   faSave,
+  faCalendar,
+  faEdit,
 } from '@fortawesome/free-regular-svg-icons';
 import {MatGridListModule} from '@angular/material/grid-list';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -53,6 +55,10 @@
 import {MatSelectModule} from '@angular/material/select';
 import {MatRadioModule} from '@angular/material/radio';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {MatTabsModule} from '@angular/material/tabs';
+import {MatDatepickerModule} from '@angular/material/datepicker';
+import {MatTimepickerModule} from '@angular/material/timepicker';
+import {MatPaginatorModule} from '@angular/material/paginator';
 
 @NgModule({
   declarations: [],
@@ -78,6 +84,10 @@
     MatSelectModule,
     MatRadioModule,
     MatSlideToggleModule,
+    MatTabsModule,
+    MatDatepickerModule,
+    MatTimepickerModule,
+    MatPaginatorModule,
   ],
   exports: [
     CommonModule,
@@ -100,6 +110,10 @@
     MatSelectModule,
     MatRadioModule,
     MatSlideToggleModule,
+    MatTabsModule,
+    MatDatepickerModule,
+    MatTimepickerModule,
+    MatPaginatorModule,
   ]
 })
 export class SharedModule {
@@ -137,6 +151,8 @@
       faTv,
       faTerminal,
       faIdBadge,
+      faCalendar,
+      faEdit,
     );
   }
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/utils/custom-validators.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/utils/custom-validators.ts	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/utils/custom-validators.ts	(working copy)
@@ -42,4 +42,26 @@
     };
   }
 
+  static isIPv4(ip: string): boolean {
+    const ipv4Regex =
+      /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+    return ipv4Regex.test(ip);
+  }
+
+  static isIPv6(ip: string): boolean {
+    const ipv6Regex = new RegExp(
+      '^((([0-9a-fA-F]{1,4}:){7}([0-9a-fA-F]{1,4}|:))|(([0-9a-fA-F]{1,4}:){6}(:[0-9a-fA-F]{1,4}|((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3})|:))|(([0-9a-fA-F]{1,4}:){5}(((:[0-9a-fA-F]{1,4}){1,2})|:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3})|:))|(([0-9a-fA-F]{1,4}:){4}(((:[0-9a-fA-F]{1,4}){1,3})|((:[0-9a-fA-F]{0,1}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9a-fA-F]{1,4}:){3}(((:[0-9a-fA-F]{1,4}){1,4})|((:[0-9a-fA-F]{0,2}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9a-fA-F]{1,4}:){2}(((:[0-9a-fA-F]{1,4}){1,5})|((:[0-9a-fA-F]{0,3}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9a-fA-F]{1,4}:){1}(((:[0-9a-fA-F]{1,4}){1,6})|((:[0-9a-fA-F]{0,4}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(:(((:[0-9a-fA-F]{1,4}){1,7})|((:[0-9a-fA-F]{0,5}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:)))(%.+)?$'
+    );
+    return ipv6Regex.test(ip);
+  }
+
+  static getIpVersion(ip: string): 'v4' | 'v6' | 'N/A' {
+    if (CustomValidators.isIPv4(ip)) {
+      return 'v4';
+    } else if (CustomValidators.isIPv6(ip)) {
+      return 'v4';
+    } else {
+      return 'N/A';
+    }
+  }
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/index.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/index.html	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/index.html	(working copy)
@@ -5,7 +5,7 @@
   <title>Array Management Platform</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="icon" type="image/x-icon" href="./assets/favicon.ico">
 </head>
 <body class="mat-typography">
   <app-root></app-root>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/styles.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/styles.scss	(revision 2660)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/styles.scss	(working copy)
@@ -190,3 +190,64 @@
 .end-item {
   margin-left: auto;
 }
+
+.common-form {
+  padding: 20px;
+  width: 100%;
+  max-width: 600px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  .form-field-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    margin-bottom: 20px;
+    width: 100%;
+
+    .form-label {
+      font-weight: 500;
+      width: 150px;
+      text-align: right;
+    }
+
+    mat-form-field,
+    mat-slide-toggle {
+      flex-grow: 1;
+      min-width: 300px;
+      max-width: 600px;
+    }
+
+    mat-slide-toggle {
+      display: flex;
+      justify-content: flex-start;
+    }
+  }
+
+  button[type='submit'] {
+    align-self: center;
+    min-width: 120px;
+    margin-top: 20px;
+  }
+}
+
+.button-container {
+  display: flex;
+  justify-content: flex-end;
+  padding-right: 0;
+}
+
+.table-no-data .mat-cell {
+  text-align: center;
+  padding-top: 1em;
+  padding-bottom: 1em;
+}
+
+.disabled-icon {
+  opacity: 0.5;
+  cursor: not-allowed;
+  user-select: none;
+}