Index: /branches/amp_4_0/platform/tools/install_nginx.sh
===================================================================
--- /branches/amp_4_0/platform/tools/install_nginx.sh	(revision 2724)
+++ /branches/amp_4_0/platform/tools/install_nginx.sh	(working copy)
@@ -298,26 +298,29 @@
         proxy_cache_bypass \$http_upgrade;
     }
 
-    # Main application
-    $(if [ "$USE_STATIC_PAGE" = true ]; then
-        echo "location / {
-            root /usr/share/nginx/html;
-            index index.html;
-        }"
-    else
-        echo "location / {
-            proxy_pass ${BACKEND_URL};
-            proxy_set_header Host \$host;
-            proxy_set_header X-Real-IP \$remote_addr;
-            proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto \$scheme;
-            proxy_set_header X-Forwarded-Port \$server_port;
-            proxy_connect_timeout 75s;
-            proxy_send_timeout 75s;
-            proxy_read_timeout 75s;
-            proxy_buffering off;
-        }"
-    fi)
+    # --- Backend API Proxy at /api/v2/ ---
+    location ^~ /api/v2/ {
+        # Proxy to the backend service running on port 8000
+        proxy_pass ${BACKEND_URL};
+
+        proxy_http_version 1.1;
+        proxy_set_header Host \$host;
+        proxy_set_header X-Real-IP \$remote_addr;
+        proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto \$scheme;
+        proxy_set_header Authorization "Bearer \$jwt_token";
+        proxy_set_header Upgrade \$http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_read_timeout 60s;
+        proxy_connect_timeout 60s;
+    }
+
+    # Main application (GUI)
+    location / {
+        root /usr/share/amp-gui;
+        index index.html;
+        try_files \$uri \$uri/ /index.html;
+    }
 
     location ~ /\. {
         deny all;
@@ -444,27 +447,30 @@
         proxy_cache_bypass \$\$http_upgrade;
     }
 
-    # Main application
-    $(if [ "$USE_STATIC_PAGE" = true ]; then
-        echo "location / {
-            root /usr/share/nginx/html;
-            index index.html;
-        }"
-    else
-        echo "location / {
-            proxy_pass ${BACKEND_URL};
-            proxy_set_header Host \$\$host;
-            proxy_set_header X-Real-IP \$\$remote_addr;
-            proxy_set_header X-Forwarded-For \$\$proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto \$\$scheme;
-            proxy_set_header X-Forwarded-Port \$\$server_port;
-            proxy_connect_timeout 75s;
-            proxy_send_timeout 75s;
-            proxy_read_timeout 75s;
-            proxy_buffering off;
-        }"
-    fi)
+    # --- Backend API Proxy at /api/v2/ ---
+    location ^~ /api/v2/ {
+        # Proxy to the backend service running on port 8000
+        proxy_pass ${BACKEND_URL};
 
+        proxy_http_version 1.1;
+        proxy_set_header Host \$host;
+        proxy_set_header X-Real-IP \$remote_addr;
+        proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto \$scheme;
+        proxy_set_header Authorization "Bearer \$jwt_token";
+        proxy_set_header Upgrade \$http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_read_timeout 60s;
+        proxy_connect_timeout 60s;
+    }
+
+    # Main application (GUI)
+    location / {
+        root /usr/share/amp-gui;
+        index index.html;
+        try_files \$uri \$uri/ /index.html;
+    }
+
     location ~ /\. {
         deny all;
     }
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 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/angular.json	(working copy)
@@ -36,13 +36,13 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kB",
-                  "maximumError": "1MB"
+                  "maximumWarning": "2MB",
+                  "maximumError": "10MB"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "4kB",
-                  "maximumError": "8kB"
+                  "maximumWarning": "5kB",
+                  "maximumError": "10kB"
                 }
               ],
               "outputHashing": "all"
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/proxy.conf.json
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/proxy.conf.json	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/proxy.conf.json	(working copy)
@@ -1,9 +1,9 @@
 {
-  "/api": {
+  "/api/v2": {
     "target": "http://192.168.85.41:8000",
     "secure": false,
     "changeOrigin": true,
-    "pathRewrite": { "^/api": "" },
+    "pathRewrite": { "^/api/v2": "" },
     "logLevel": "debug"
   }
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/app-notification/app-notification.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/app-notification/app-notification.html	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/app-notification/app-notification.html	(working copy)
@@ -1,7 +1,31 @@
 <div class="notification {{data.type}}" role="alert">
-  <span class="message">{{ data.message }}</span>
+  <div
+    class="message-container"
+    [matTooltip]="data.message" matTooltipPosition="below"
+    matTooltipClass="error-tooltip"
+  >
+    <div class="icon-container">
+      @if (data.type === 'success') {
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+             stroke-linecap="round" stroke-linejoin="round">
+          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+          <polyline points="22 4 12 14.01 9 11.01"></polyline>
+        </svg>
+      } @else {
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="10"/>
+          <line x1="12" y1="8" x2="12" y2="12"/>
+          <line x1="12" y1="16" x2="12.01" y2="16"/>
+        </svg>
+      }
+    </div>
+    <span class="message">
+      {{ data.message.length > 50 ? (data.message | slice:0:50) + '...' : data.message }}
+    </span>
+  </div>
   <button class="dismiss-btn" (click)="dismiss()" aria-label="Dismiss notification">
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
+         stroke-linecap="round" stroke-linejoin="round">
       <path d="M18 6L6 18M6 6l12 12"/>
     </svg>
   </button>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/app-notification/app-notification.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/app-notification/app-notification.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/app-notification/app-notification.scss	(working copy)
@@ -1,41 +1,116 @@
+$font-family: 'Inter', sans-serif;
+$max-width: 420px;
+$base-color: #2c3e50;
+$text-color: #fff;
+$radius: 6px;
+$padding: 12px 16px;
+$shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+
+// Type Colors
+$error-accent: #e74c3c;
+$success-accent: #2ecc71;
+$success-bg: #27ae60; // Keep separate if needed for other elements
+
 .notification {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
-  padding: 12px 20px;
-  max-width: 500px;
-  font-family: 'Inter', sans-serif;
-  font-size: 15px;
+
+  max-width: $max-width;
+
+  font-family: $font-family;
+  font-size: 14px;
   font-weight: 500;
-  color: #fff;
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  animation: slideIn 0.3s ease-out;
+  color: $text-color;
+
+  border-radius: $radius;
+  background-color: $base-color;
+
+  padding: $padding;
+
+  box-shadow: $shadow;
+
+  border-left: 4px solid rgba(255, 255, 255, 0.2); // Default accent border
+
+  animation: slideIn 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
   transition: opacity 0.3s ease-out;
+  outline: none;
+
+  .message-container {
+    display: flex;
+    align-items: flex-start;
+    flex-grow: 1;
+    margin-right: 10px;
+    min-width: 0;
+  }
+
+  .icon-container {
+    margin-right: 10px;
+    flex-shrink: 0;
+    padding-top: 1px;
+
+    svg {
+      display: block;
+      width: 16px;
+      height: 16px;
+      stroke: currentColor;
+      fill: none;
+    }
+  }
+
+  .message {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.4;
+    max-width: 100%;
+  }
+
+  .dismiss-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: $text-color;
+    opacity: 0.5;
+    transition: opacity 0.2s, transform 0.2s;
+    padding: 0;
+    margin-top: 2px;
+    flex-shrink: 0;
+    outline: none;
+
+    svg {
+      display: block;
+      width: 12px;
+      height: 12px;
+      stroke-width: 2.5;
+      stroke: currentColor;
+    }
+    &:hover {
+      opacity: 1;
+      transform: scale(1.05);
+    }
+  }
+
+  // --- Type-Specific Styles (Error/Success) ---
+
+  &.error {
+    border-color: $error-accent;
+
+    .icon-container svg {
+      stroke: $error-accent;
+    }
+  }
+
+  &.success {
+    // Note: We use the base color for the body, only accenting the stripe and icon
+    border-color: $success-accent;
+
+    .icon-container svg {
+      stroke: $success-accent;
+    }
+  }
 }
-.success {
-  background: linear-gradient(135deg, #2ecc71, #27ae60);
-}
-.error {
-  background: linear-gradient(135deg, #e74c3c, #c0392b);
-}
-.message {
-  flex: 1;
-  margin-right: 10px;
-  white-space: pre-wrap;
-}
-.dismiss-btn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: #fff;
-  opacity: 0.7;
-  transition: opacity 0.2s;
-  padding: 4px;
-}
-.dismiss-btn:hover {
-  opacity: 1;
-}
+
 @keyframes slideIn {
   from {
     transform: translateY(-20px);
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/app-notification/app-notification.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/app-notification/app-notification.ts	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/app-notification/app-notification.ts	(working copy)
@@ -1,9 +1,10 @@
 import {Component, Inject} from '@angular/core';
 import {MAT_SNACK_BAR_DATA, MatSnackBarRef} from '@angular/material/snack-bar';
+import {SharedModule} from '../../shared/shared-module';
 
 @Component({
   selector: 'app-app-notification',
-  imports: [],
+  imports: [SharedModule],
   templateUrl: './app-notification.html',
   styleUrl: './app-notification.scss'
 })
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/apv-ssl-management/apv-ssl-management.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/apv-ssl-management/apv-ssl-management.scss	(revision 2725)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/apv-ssl-management/apv-ssl-management.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/apv-ssl-management/apv-ssl-management.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/apv-ssl-management/apv-ssl-management.ts	(revision 2725)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/apv-ssl-management/apv-ssl-management.ts	(working copy)
@@ -12,8 +12,8 @@
 import {Storage} from '../../services/storage';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {VpnService} from '../../services/vpn-service';
-import {SyncACLResourceGroupDialog} from '../sub-components/vpn-acl-resource-groups/vpn-acl-resource-groups';
 
+
 @Component({
   selector: 'app-apv-ssl-management',
   imports: [SharedModule, GlobalSerialPipe],
@@ -55,12 +55,6 @@
 
   getDeviceGroups(): void {
     this.devices = [];
-    // ToDo: Update with actual RoleId
-    let roleId = "0"
-    let rawPayload = new FormData();
-    rawPayload.set('action', 'FilterRoleDeviceGroups');
-    rawPayload.set('options', JSON.stringify({"role_id": roleId}));
-
     let type_dict: any = {
       "slb virtual tcps ": "TCPS",
       "slb virtual https ": "HTTPS",
@@ -69,109 +63,99 @@
     let ssl_result: any = [];
     this.dataSource.data = [];
 
-    this._device.getDeviceGroups(rawPayload)
+    this._device.getDeviceGroups()
       .pipe(take(1))
       .subscribe({
-        next: (result: any) => {
-          if (result && result.length > 1) {
-            if (result[1] && 'result' in result[1]) {
-              let groups = result[1].result;
-              groups.forEach((group: any) => {
-                group?.device_list.forEach((device: any) => {
-                  this.devices.push(device);
-                })
-              })
-              this.devices.forEach((_device: any) => {
-                  if (this.device_type_info?.ADC_TYPE_LIST.includes(_device.type.toLowerCase())) {
-                    this._device.executeCLICommand(_device?.id, {cmd: "show slb virtual all"})
-                      .pipe(take(1))
-                      .subscribe({
-                        next: (result: any) => {
-                          if (result && result?.contents) {
-                            let conf_list = result?.contents.split('\n');
-                            conf_list.forEach((item: any) => {
-                              let _tmp = item.split("\"");
-                              if (_tmp[0] in type_dict) {
-                                ssl_result.push({
-                                  service_name: _tmp[1],
-                                  protocol: type_dict[_tmp[0]],
-                                  device: _device?.name,
-                                  id: _device?.id,
-                                  device_group: _device?.device_group,
-                                  host_name: "",
-                                  status: "",
-                                })
-                              }
+        next: (data: any) => {
+          this.devices = data.devices;
+          this.devices.forEach((_device: any) => {
+              if (this.device_type_info?.ADC_TYPE_LIST.includes(_device.type.toLowerCase())) {
+                this._device.executeCLICommand(_device?.id, {cmd: "show slb virtual all"})
+                  .pipe(take(1))
+                  .subscribe({
+                    next: (result: any) => {
+                      if (result && result?.contents) {
+                        let conf_list = result?.contents.split('\n');
+                        conf_list.forEach((item: any) => {
+                          let _tmp = item.split("\"");
+                          if (_tmp[0] in type_dict) {
+                            ssl_result.push({
+                              service_name: _tmp[1],
+                              protocol: type_dict[_tmp[0]],
+                              device: _device?.name,
+                              id: _device?.id,
+                              device_group: _device?.device_group,
+                              host_name: "",
+                              status: "",
                             })
                           }
-                          let status_result: any = {}
-                          if (this.device_type_info?.ADC_TYPE_LIST.includes(_device.type.toLowerCase())) {
-                            this._device.executeCLICommand(_device?.id, {cmd: "show ssl host"})
-                              .pipe(take(1))
-                              .subscribe({
-                                next: (resp: any) => {
-                                  if (resp && resp?.contents) {
-                                    let conf_list = resp.contents.split("\n");
-                                    conf_list.forEach((item: any) => {
-                                      let _tmp = item.split("\"");
-                                      if (_tmp[0] == "ssl host virtual ") {
-                                        ssl_result.forEach((_item: any) => {
-                                          if (_item.device === _device.name && _item.service_name === _tmp[3]) {
-                                            _item.status = status_result[_tmp[1]] || '';
-                                            _item.host_name = _tmp[1]
+                        })
+                      }
+                      let status_result: any = {}
+                      if (this.device_type_info?.ADC_TYPE_LIST.includes(_device.type.toLowerCase())) {
+                        this._device.executeCLICommand(_device?.id, {cmd: "show ssl host"})
+                          .pipe(take(1))
+                          .subscribe({
+                            next: (resp: any) => {
+                              if (resp && resp?.contents) {
+                                let conf_list = resp.contents.split("\n");
+                                conf_list.forEach((item: any) => {
+                                  let _tmp = item.split("\"");
+                                  if (_tmp[0] == "ssl host virtual ") {
+                                    ssl_result.forEach((_item: any) => {
+                                      if (_item.device === _device.name && _item.service_name === _tmp[3]) {
+                                        _item.status = status_result[_tmp[1]] || '';
+                                        _item.host_name = _tmp[1]
+                                      }
+                                    })
+                                  }
+                                })
+                                this._device.executeCLICommand(_device?.id, {cmd: "show ssl status host"})
+                                  .pipe(take(1))
+                                  .subscribe({
+                                    next: (res: any) => {
+                                      if (res && res?.contents) {
+                                        let conf_list1 = res.contents.split("\n");
+                                        conf_list1.forEach((item1: any) => {
+                                          let tmp1: any = item1.split("\"");
+                                          let status_str = "";
+                                          if (tmp1[0] == "virtual host ") {
+                                            if (tmp1[2] == " is inactive") {
+                                              status_str = "Inactive";
+                                            } else {
+                                              status_str = "Active";
+                                            }
+                                            ssl_result.forEach((_item: any) => {
+                                              if (_item?.device === _device?.name && _item?.host_name === tmp1[1]) {
+                                                _item.status = status_str;
+                                              }
+                                            });
                                           }
                                         })
                                       }
-                                    })
-                                    this._device.executeCLICommand(_device?.id, {cmd: "show ssl status host"})
-                                      .pipe(take(1))
-                                      .subscribe({
-                                        next: (res: any) => {
-                                          if (res && res?.contents) {
-                                            let conf_list1 = res.contents.split("\n");
-                                            conf_list1.forEach((item1: any) => {
-                                              let tmp1: any = item1.split("\"");
-                                              let status_str = "";
-                                              if (tmp1[0] == "virtual host ") {
-                                                if (tmp1[2] == " is inactive") {
-                                                  status_str = "Inactive";
-                                                } else {
-                                                  status_str = "Active";
-                                                }
-                                                ssl_result.forEach((_item: any) => {
-                                                  if (_item?.device === _device?.name && _item?.host_name === tmp1[1]) {
-                                                    _item.status = status_str;
-                                                  }
-                                                });
-                                              }
-                                            })
-                                          }
-                                        },
-                                        error: (error: any) => {
-                                          this._notification.showError(error?.message);
-                                        }
-                                      });
-                                  }
-                                  this.dataSource.data = ssl_result
-                                  this.dataSource.paginator = this.paginator;
-                                  this.totalRecords = this.dataSource.data.length;
-                                },
-                                error: (error: any) => {
-                                  this._notification.showError(error?.message);
-                                }
-                              });
-                          }
-                        },
-                        error: (error: any) => {
-                          this._notification.showError(error?.message);
-                        }
-                      });
-                    console.log(ssl_result)
-                  }
-                }
-              )
+                                    },
+                                    error: (error: any) => {
+                                      this._notification.showError(error?.message);
+                                    }
+                                  });
+                              }
+                              this.dataSource.data = ssl_result
+                              this.dataSource.paginator = this.paginator;
+                              this.totalRecords = this.dataSource.data.length;
+                            },
+                            error: (error: any) => {
+                              this._notification.showError(error?.message);
+                            }
+                          });
+                      }
+                    },
+                    error: (error: any) => {
+                      this._notification.showError(error?.message);
+                    }
+                  });
+              }
             }
-          }
+          )
         }
         ,
         error: (error: { message: string; }) => {
@@ -256,7 +240,7 @@
         this.dialogRef.close(true);
       },
       error: (error: any) => {
-      this._notification.showError(error?.message);
+        this._notification.showError(error?.message);
       }
     })
   }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/avx-management/avx-management.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/avx-management/avx-management.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/avx-management/avx-management.scss	(working copy)
@@ -1,20 +0,0 @@
-.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/navigation/navigation.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/navigation/navigation.html	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/navigation/navigation.html	(working copy)
@@ -7,10 +7,47 @@
       <span class="app-branding">Array </span><span class="app-platform">Management Platform</span>
     </div>
     <div class="top-right">
-      <fa-icon [icon]="['far', 'rectangle-list']" size="2x" class="a-link" (click)="showLatestTasks()" matTooltip="Show Latest Tasks"></fa-icon>
-             
-      <fa-icon [icon]="['far', 'bell']" size="2x"></fa-icon>
-           
+      <fa-icon [icon]="['far', 'rectangle-list']" size="2x" class="a-link" (click)="showLatestTasks()"
+               matTooltip="Show Latest Tasks"></fa-icon>
+      <div class="top-right">
+        <button mat-icon-button [matMenuTriggerFor]="notificationMenu" class="notification-button">
+          <fa-icon [icon]="['far', 'bell']" size="2x"></fa-icon>
+          <span class="notification-badge">{{ notifications.length }}</span>
+        </button>
+        <mat-menu #notificationMenu="matMenu" class="app-notification-menu-panel">
+          <div class="app-notification-drawer-content">
+            <div class="drawer-header">
+              <h3>Notifications</h3>
+            </div>
+            <div class="notification-list-scroll">
+              @for (item of notifications.slice(0, 5); track item.id) {
+                <div class="notification-item">
+                  <div class="notification-meta">
+                    <div class="user-avatar">{{ item.avatarInitials }}</div>
+                    <p class="summary">
+                      <b>{{ item.user }}</b> {{ item.summary }} <span>{{ item.time }}</span>
+                    </p>
+                  </div>
+                  <!--                  <div class="notification-details">-->
+                  <!--                    <fa-icon [icon]="['fas', 'bookmark']" class="issue-icon"></fa-icon>-->
+                  <!--                    <span class="n-title">{{ item.issueTitle }}</span>-->
+                  <!--                    <span class="n-key">{{ item.issueKey }}</span>-->
+                  <!--                  </div>-->
+                  <!--                  <div class="n-details">-->
+                  <!--                    {{ item.commitDetails }}-->
+                  <!--                  </div>-->
+                </div>
+              }
+              <div class="notification-footer-summary">
+                <a class="view-all-link" (click)="viewAllNotifications()">
+                  +{{ notifications.length > 5 ? notifications.length - 5 : 0 }} more notifications
+                </a>
+              </div>
+            </div>
+          </div>
+        </mat-menu>
+      </div>
+         
       <div class="user-dropdown-container">
         <fa-icon [icon]="['fas', 'user-circle']" size="2x" (click)="toggleUserDropdown($event)"></fa-icon>
         @if (isUserDropdownOpen) {
@@ -60,7 +97,8 @@
                 <a [routerLink]="item.routerLink" routerLinkActive="active"
                    (click)="isSidebarCollapsed && toggleSidebar()" class="a-link">
                   @if (item.icon != '') {
-                    <fa-icon [icon]="['fas', item.icon]" [matTooltip]="item?.label" class="left-nav-icon-size"></fa-icon>
+                    <fa-icon [icon]="['fas', item.icon]" [matTooltip]="item?.label"
+                             class="left-nav-icon-size"></fa-icon>
                   }
                   <span> &nbsp;{{ item?.label }}</span>
                 </a>
@@ -74,10 +112,11 @@
                   class="a-link"
                 >
                   @if (item.icon != '') {
-                    <fa-icon [icon]="['fas', item.icon]" [matTooltip]="item?.label" class="left-nav-icon-size"></fa-icon>
+                    <fa-icon [icon]="['fas', item.icon]" [matTooltip]="item?.label"
+                             class="left-nav-icon-size"></fa-icon>
                   }
                   <span>&nbsp;{{ item?.label }}</span>
-<!--                  <fa-icon [icon]="['fas', 'chevron-right']"></fa-icon>-->
+                  <!--                  <fa-icon [icon]="['fas', 'chevron-right']"></fa-icon>-->
                 </a>
                 @if (item.expanded) {
                   <ul>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/navigation/navigation.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/navigation/navigation.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/navigation/navigation.scss	(working copy)
@@ -10,6 +10,10 @@
 $shadow-light: 0 2px 5px rgba(0, 0, 0, 0.03);
 $shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
 
+$app-light-grey: #F4F5F7;
+$app-issue-link: #0052cc;
+$app-red-badge: #FF5630;
+
 .navigation-container {
   display: flex;
   flex-direction: column;
@@ -90,12 +94,16 @@
   border-color: $primary-blue;
 }
 
-.top-right .icon {
+.top-right .fa-icon {
   font-size: 1em;
-  margin-left: 20px;
   cursor: pointer;
   color: $medium-text;
   transition: color 0.2s ease;
+  margin-left: 15px;
+}
+
+.top-right .a-link:hover {
+  color: $primary-blue;
 }
 
 .top-right .icon:hover {
@@ -430,4 +438,206 @@
 
 .left-nav-icon-size {
   font-size: 1.25em;
+}
+
+.notification-button {
+  position: relative;
+  margin-left: 15px;
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: $medium-text;
+
+  &:hover {
+    color: $primary-blue;
+  }
+}
+
+.notification-badge {
+  position: absolute;
+  top: 15px;
+  right: -5px;
+  background-color: $app-red-badge;
+  color: $white;
+  border-radius: 50%;
+  padding: 1px 5px;
+  font-size: 0.7em;
+  font-weight: 600;
+  line-height: 1;
+  min-width: 15px;
+  text-align: center;
+}
+
+.mat-mdc-menu-panel.app-notification-menu-panel {
+  max-width: 400px !important;
+  width: 400px !important;
+  max-height: 80vh !important;
+  padding: 0 !important;
+  border-radius: 6px !important;
+  box-shadow: $shadow-medium !important;
+  margin-top: 5px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+.app-notification-drawer-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.drawer-header {
+  padding: 0 8px;
+  background-color: $white;
+  border-bottom: 1px solid $border-color;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  h3 {
+    margin: 0;
+    font-size: 1.25em;
+    font-weight: 600;
+    color: $dark-text;
+  }
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+
+  .action-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: $medium-text;
+    padding: 6px;
+    border-radius: 4px;
+    transition: background-color 0.2s ease, color 0.2s ease;
+
+    fa-icon {
+      font-size: 1em;
+    }
+
+    &:hover {
+      background-color: $hover-bg;
+      color: $primary-blue;
+    }
+  }
+}
+
+.notification-list-scroll {
+  overflow-y: auto;
+  flex-grow: 1;
+  padding: 10px 16px 0 16px;
+  background-color: $app-light-grey;
+}
+
+.notification-item {
+  background-color: $white;
+  border-radius: 3px;
+  padding: 10px;
+  margin-bottom: 8px;
+  box-shadow: 0 1px 2px rgba(9, 30, 66, 0.1);
+  font-size: 0.9em;
+  border: 1px solid transparent;
+
+  &:hover {
+    border-color: $primary-blue-light;
+    cursor: pointer;
+  }
 }
+
+.notification-meta {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 6px;
+}
+
+.user-avatar {
+  width: 26px;
+  height: 26px;
+  border-radius: 4px;
+  background-color: #0052cc;
+  color: $white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.7em;
+  font-weight: 600;
+  flex-shrink: 0;
+  margin-right: 8px;
+}
+
+.summary {
+  margin: 0;
+  line-height: 1.3;
+  font-size: 0.85em;
+
+  b {
+    font-weight: 600;
+    color: $dark-text;
+  }
+
+  span {
+    color: $medium-text;
+    font-size: 0.9em;
+  }
+}
+
+.notification-details {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-bottom: 4px;
+  font-size: 0.9em;
+
+  .issue-icon {
+    color: #4C9AFF;
+    font-size: 0.8em;
+  }
+  .n-title {
+    font-weight: 500;
+    color: $app-issue-link;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+  .n-key {
+    color: $medium-text;
+    font-size: 0.9em;
+  }
+}
+
+
+.n-details {
+  background-color: $app-light-grey;
+  border: 1px solid $border-color;
+  border-radius: 3px;
+  padding: 6px;
+  margin-top: 4px;
+  font-size: 0.75em;
+  white-space: pre-wrap;
+  color: $dark-text;
+}
+
+.notification-footer-summary {
+  padding: 12px 0;
+  text-align: center;
+
+  .view-all-link {
+    color: $app-issue-link;
+    font-size: 0.85em;
+    text-decoration: none;
+    cursor: pointer;
+    font-weight: 500;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
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 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/navigation/navigation.ts	(working copy)
@@ -10,11 +10,12 @@
 import {AsyncPipe} from '@angular/common';
 import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
 import {LatestTasks} from '../common/latest-tasks/latest-tasks';
+import {MatMenu, MatMenuTrigger} from '@angular/material/menu';
 
 @Component({
   selector: 'app-navigation',
   standalone: true,
-  imports: [SharedModule, AsyncPipe],
+  imports: [SharedModule, AsyncPipe, MatMenu, MatMenuTrigger],
   templateUrl: './navigation.html',
   styleUrl: './navigation.scss'
 })
@@ -184,4 +185,31 @@
     const dialogRef = this.dialog.open(LatestTasks, this.dialogConfig);
     dialogRef.afterClosed().subscribe(task => {})
   }
+
+  // ToDo: Update with actual API response.
+  notifications: any[] = [
+    {
+      id: 1,
+      user: 'Rolex User',
+      avatarInitials: 'RU',
+      time: '2 hours ago',
+      summary: 'commented on a story',
+      issueKey: 'AE-2145 · Review',
+      issueTitle: 'AMP4 - Implement the Client Certificates...',
+      commitDetails: 'SVN Commit r2725 linked to this issue. Author: rolex Branch: amp_4_0 Project: cm Commit message....',
+    },
+    {
+      id: 2,
+      user: 'Admin Bot',
+      avatarInitials: 'AB',
+      time: '1 day ago',
+      summary: 'assigned a task to you',
+      issueKey: 'INF-502',
+      issueTitle: 'Security Patch Q3 deployment',
+      commitDetails: 'The vulnerability patch deployment is scheduled for 2024-11-15.',
+    },
+  ];
+
+  viewAllNotifications(): void {}
+
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/observability/observability.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/observability/observability.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/observability/observability.scss	(working copy)
@@ -1,20 +0,0 @@
-.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/admin-aaa/admin-aaa.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/admin-aaa/admin-aaa.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/admin-aaa/admin-aaa.scss	(working copy)
@@ -1,22 +0,0 @@
-.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/apv-ssl-certificate-backup-restore/apv-ssl-certificate-backup-restore.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-certificate-backup-restore/apv-ssl-certificate-backup-restore.scss	(revision 2725)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-certificate-backup-restore/apv-ssl-certificate-backup-restore.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/apv-ssl-certificates/apv-ssl-certificates.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-certificates/apv-ssl-certificates.scss	(revision 2725)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-certificates/apv-ssl-certificates.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/apv-ssl-client-verification/apv-ssl-client-verification.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-client-verification/apv-ssl-client-verification.scss	(revision 2725)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-client-verification/apv-ssl-client-verification.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/apv-ssl-inter-ca-certificates/apv-ssl-inter-ca-certificates.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-inter-ca-certificates/apv-ssl-inter-ca-certificates.scss	(revision 2725)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-inter-ca-certificates/apv-ssl-inter-ca-certificates.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/apv-ssl-overview/apv-ssl-overview.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-overview/apv-ssl-overview.scss	(revision 2725)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/apv-ssl-overview/apv-ssl-overview.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/avx-device-detail-deployments/avx-device-detail-deployments.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/avx-device-detail-deployments/avx-device-detail-deployments.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/avx-device-detail-deployments/avx-device-detail-deployments.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/avx-device-detail-logs/avx-device-detail-logs.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/avx-device-detail-logs/avx-device-detail-logs.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/avx-device-detail-logs/avx-device-detail-logs.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/avx-device-details/avx-device-details.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/avx-device-details/avx-device-details.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/avx-device-details/avx-device-details.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/avx-va-backup/avx-va-backup.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/avx-va-backup/avx-va-backup.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/avx-va-backup/avx-va-backup.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/avx-va-instance-details/avx-va-instance-details.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/avx-va-instance-details/avx-va-instance-details.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/avx-va-instance-details/avx-va-instance-details.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/avx-va-instances/avx-va-instances.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/avx-va-instances/avx-va-instances.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/avx-va-instances/avx-va-instances.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/dashboard-insights-apv/dashboard-insights-apv.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.ts	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.ts	(working copy)
@@ -1,15 +1,10 @@
 import {Component, DestroyRef, inject, OnChanges, OnInit, SimpleChanges} from '@angular/core';
-import {FaIconComponent} from "@fortawesome/angular-fontawesome";
-import {MatCard, MatCardContent, MatCardTitle} from "@angular/material/card";
-import {MatGridList, MatGridTile} from "@angular/material/grid-list";
-import {NgxEchartsDirective} from "ngx-echarts";
 import {SharedModule} from '../../../shared/shared-module';
 import {EChartsOption} from 'echarts';
 import {NotificationService} from '../../../services/notification';
 import {SystemService} from '../../../services/system-service';
 import {startWith, take, tap} from 'rxjs/operators';
 import {DeviceService} from '../../../services/device-service';
-import {MatTableDataSource} from '@angular/material/table';
 import {ChartOptions} from '../../../services/chart-options';
 import {UtilsService} from '../../../services/utils-service';
 import {interval} from 'rxjs';
@@ -67,12 +62,7 @@
   getDeviceGroups(): void {
     this.devices = [];
     this.groups = [];
-    // ToDo: Update with actual RoleId with RBAC
-    let roleId = "0"
-    let rawPayload = new FormData();
-    rawPayload.set('action', 'FilterRoleDeviceGroups');
-    rawPayload.set('options', JSON.stringify({"role_id": roleId}));
-    this._device.getDeviceGroups(rawPayload)
+    this._device.getDeviceGroups()
       .pipe(take(1))
       .subscribe({
         next: (result: any) => {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-devices/dashboard-insights-devices.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-devices/dashboard-insights-devices.ts	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-devices/dashboard-insights-devices.ts	(working copy)
@@ -56,36 +56,23 @@
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes['cpuUsagePercentage']) {}
+    if (changes['cpuUsagePercentage']) {
+    }
   }
 
   getDeviceGroups(): void {
     this.devices = [];
     this.groups = [];
-    // ToDo: Update with actual RoleId with RBAC
-    let roleId = "0"
-    let rawPayload = new FormData();
-    rawPayload.set('action', 'FilterRoleDeviceGroups');
-    rawPayload.set('options', JSON.stringify({"role_id": roleId}));
-    this._device.getDeviceGroups(rawPayload)
+    this._device.getDeviceGroups()
       .pipe(take(1))
       .subscribe({
-        next: (result: any) => {
-          if (result && result.length > 1) {
-            if (result[1] && 'result' in result[1]) {
-              let groups = result[1].result;
-              groups.forEach((group: any) => {
-                this.groups.push(group?.group_name);
-                group?.device_list.forEach((device: any) => {
-                  this.devices.push(device);
-                })
-              })
-              this.deviceStats = this._utils.transformTotalConnectedDevicesMetrics(this.devices);
-              this.deviceConnectionStats = this._utils.transformConnectedDevicesMetrics(this.deviceStats.types.entries());
-              this.connectedDevices = this.devices.filter((device: any) => device?.connection === true).length;
-              this.getConnectedDevicesMetrics();
-            }
-          }
+        next: (data: any) => {
+          this.devices = data.devices;
+          this.groups = data.groups;
+          this.deviceStats = this._utils.transformTotalConnectedDevicesMetrics(this.devices);
+          this.deviceConnectionStats = this._utils.transformConnectedDevicesMetrics(this.deviceStats.types.entries());
+          this.connectedDevices = this.devices.filter((device: any) => device?.connection === true).length;
+          this.getConnectedDevicesMetrics();
           this.connectionChartOption1 = this._chartOptions.connectedDeviceLineChart(this.deviceConnectionStats);
         }, error: (error: { message: string; }) => {
           console.log(error);
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.ts	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.ts	(working copy)
@@ -1,7 +1,6 @@
 import {Component, DestroyRef, inject, OnChanges, OnInit, SimpleChanges} from '@angular/core';
 import {SharedModule} from '../../../shared/shared-module';
 import {EChartsOption} from 'echarts';
-import {MatTableDataSource} from '@angular/material/table';
 import {NotificationService} from '../../../services/notification';
 import {SystemService} from '../../../services/system-service';
 import {DeviceService} from '../../../services/device-service';
@@ -52,35 +51,21 @@
   getDeviceGroups(): void {
     this.devices = [];
     this.groups = [];
-    // ToDo: Update with actual RoleId with RBAC
-    let roleId = "0"
-    let rawPayload = new FormData();
-    rawPayload.set('action', 'FilterRoleDeviceGroups');
-    rawPayload.set('options', JSON.stringify({"role_id": roleId}));
-    this._device.getDeviceGroups(rawPayload)
+    this._device.getDeviceGroups()
       .pipe(take(1))
       .subscribe({
-        next: (result: any) => {
-          if (result && result.length > 1) {
-            if (result[1] && 'result' in result[1]) {
-              let groups = result[1].result;
-              groups.forEach((group: any) => {
-                this.groups.push(group?.group_name);
-                group?.device_list.forEach((device: any) => {
-                  this.devices.push(device);
-                })
-              })
-              interval(this._utils.AUTO_REFRESH_INTERVAL)
-                .pipe(
-                  startWith(0),
-                  tap(() => {
-                    this.getTopSSLVPNMetrics();
-                  }),
-                  takeUntilDestroyed(this.destroyRef)
-                )
-                .subscribe();
-            }
-          }
+        next: (data: any) => {
+          this.devices = data.devices;
+          this.groups = data.groups;
+          interval(this._utils.AUTO_REFRESH_INTERVAL)
+            .pipe(
+              startWith(0),
+              tap(() => {
+                this.getTopSSLVPNMetrics();
+              }),
+              takeUntilDestroyed(this.destroyRef)
+            )
+            .subscribe();
         }, error: (error: { message: string; }) => {
           console.log(error);
           this._notification.showError(error.message);
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/dashboard-system-insights.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/dashboard-system-insights.ts	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/dashboard-system-insights.ts	(working copy)
@@ -8,7 +8,7 @@
 import {SystemService} from '../../../services/system-service';
 import {BytesPipe} from '../../../pipes/bytes-pipe';
 import {ChartOptions} from '../../../services/chart-options';
-import {KeyValuePair, UtilsService} from '../../../services/utils-service';
+import {UtilsService} from '../../../services/utils-service';
 import {interval} from 'rxjs';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {MatTableDataSource} from '@angular/material/table';
@@ -124,32 +124,20 @@
     this.devices = [];
     this.groups = [];
     this.virtualServices = [];
-    // ToDo: Update with actual RoleId
-    let roleId = "0"
-    let rawPayload = new FormData();
-    rawPayload.set('action', 'FilterRoleDeviceGroups');
-    rawPayload.set('options', JSON.stringify({"role_id": roleId}));
-    this._device.getDeviceGroups(rawPayload)
+    this._device.getDeviceGroups()
       .pipe(take(1))
       .subscribe({
-        next: (result: any) => {
-          if (result && result.length > 1) {
-            if (result[1] && 'result' in result[1]) {
-              let groups = result[1].result;
-              groups.forEach((group: any) => {
-                this.groups.push(group?.group_name);
-                group?.device_list.forEach((device: any) => {
-                  this.devices.push(device);
-                  if (device.connection && (device?.type.toLowerCase() === 'apv' || device?.type.toLowerCase() === 'vapv')) {
-                    this.getAPVVirtualServices(device);
-                  }
-                })
-              })
-              this.deviceStats = this._utils.transformTotalConnectedDevicesMetrics(this.devices);
-              this.deviceConnectionStats = this._utils.transformConnectedDevicesMetrics(this.deviceStats.types.entries());
-              this.connectedDevices = this.devices.filter((device: any) => device?.connection === true).length;
+        next: (data: any) => {
+          this.devices = data.devices;
+          this.groups = data.groups;
+          this.devices.forEach((device: any) => {
+            if (device.connection && (device?.type.toLowerCase() === 'apv' || device?.type.toLowerCase() === 'vapv')) {
+              this.getAPVVirtualServices(device);
             }
-          }
+          })
+          this.deviceStats = this._utils.transformTotalConnectedDevicesMetrics(this.devices);
+          this.deviceConnectionStats = this._utils.transformConnectedDevicesMetrics(this.deviceStats.types.entries());
+          this.connectedDevices = this.devices.filter((device: any) => device?.connection === true).length;
         }, error: (error: { message: string; }) => {
           console.log(error);
           this._notification.showError(error.message);
@@ -284,31 +272,19 @@
     this.groups = [];
     this.deviceStatusDataSource.data = [];
     let offlineDevices: any = [];
-    // ToDo: Update with actual RoleId
-    let roleId = "0"
-    let rawPayload = new FormData();
-    rawPayload.set('action', 'FilterRoleDeviceGroups');
-    rawPayload.set('options', JSON.stringify({"role_id": roleId}));
-    this._device.getDeviceGroups(rawPayload)
+    this._device.getDeviceGroups()
       .pipe(take(1))
       .subscribe({
-        next: (result: any) => {
-          if (result && result.length > 1) {
-            if (result[1] && 'result' in result[1]) {
-              let groups = result[1].result;
-              groups.forEach((group: any) => {
-                this.groups.push(group?.group_name);
-                group?.device_list.forEach((device: any) => {
-                  this.devices.push(device);
-                  if (!device?.connection) {
-                    offlineDevices.push(device);
-                  }
-                })
-              })
-              this.deviceStats = this._utils.transformTotalConnectedDevicesMetrics(this.devices);
-              this.deviceStatusDataSource.data = offlineDevices;
+        next: (data: any) => {
+          this.devices = data.devices;
+          this.groups = data.groups;
+          this.devices.forEach((device: any) => {
+            if (!device?.connection) {
+              offlineDevices.push(device);
             }
-          }
+          })
+          this.deviceStats = this._utils.transformTotalConnectedDevicesMetrics(this.devices);
+          this.deviceStatusDataSource.data = offlineDevices;
         }, error: (error: { message: string; }) => {
           console.log(error);
           this._notification.showError(error.message);
@@ -322,6 +298,7 @@
     });
     this.dialogRef.close();
   }
+
   onCancel() {
     this.dialogRef.close();
   }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-backup-files/device-backup-files.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-backup-files/device-backup-files.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-backup-files/device-backup-files.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/device-cloned-files/device-cloned-files.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-cloned-files/device-cloned-files.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-cloned-files/device-cloned-files.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/device-cloned-files/device-cloned-files.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-cloned-files/device-cloned-files.ts	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-cloned-files/device-cloned-files.ts	(working copy)
@@ -113,29 +113,17 @@
   getDeviceGroups() {
     this.groups = [];
     this.deviceGroups = []
-    // ToDo: Update with actual RoleId
-    let roleId = "0"
-    let rawPayload = new FormData();
-    rawPayload.set('action', 'FilterRoleDeviceGroups');
-    rawPayload.set('options', JSON.stringify({"role_id": roleId}));
-    this._device.getDeviceGroups(rawPayload)
+    this._device.getDeviceGroups()
       .pipe(take(1))
       .subscribe({
-        next: (result: any) => {
-          if (result && result.length > 1) {
-            if (result[1] && 'result' in result[1]) {
-              let groups = result[1].result;
-              groups.forEach((group: any) => {
-                if (group?.device_list.length > 0) {
-                  this.groups.push(group?.group_name);
-                  this.deviceGroups.push(group);
-                }
-                // group?.device_list.forEach((device: any) => {
-                //   this.devices.push(device);
-                // })
-              })
+        next: (data: any) => {
+          let groups = data.groups;
+          groups.forEach((group: any) => {
+            if (group?.device_list.length > 0) {
+              this.groups.push(group?.group_name);
+              this.deviceGroups.push(group);
             }
-          }
+          })
         }, error: (error: { message: string; }) => {
           console.log(error);
           this._notification.showError(error.message);
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-config-overview/device-config-overview.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-config-overview/device-config-overview.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-config-overview/device-config-overview.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/device-config-overview/device-config-overview.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-config-overview/device-config-overview.ts	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-config-overview/device-config-overview.ts	(working copy)
@@ -231,30 +231,18 @@
     this.devices = [];
     this.groups = [];
     this.deviceGroups = []
-    // ToDo: Update with actual RoleId
-    let roleId = "0"
-    let rawPayload = new FormData();
-    rawPayload.set('action', 'FilterRoleDeviceGroups');
-    rawPayload.set('options', JSON.stringify({"role_id": roleId}));
-    this._device.getDeviceGroups(rawPayload)
+    this._device.getDeviceGroups()
       .pipe(take(1))
       .subscribe({
-        next: (result: any) => {
-          if (result && result.length > 1) {
-            if (result[1] && 'result' in result[1]) {
-              let groups = result[1].result;
-              groups.forEach((group: any) => {
-                if (group?.device_list.length > 0) {
-                  this.groups.push(group?.group_name);
-                  this.deviceGroups.push(group);
-                }
-                group?.device_list.forEach((device: any) => {
-                  this.devices.push(device);
-                })
-              })
-              this.dataSource = new MatTableDataSource(this.devices);
+        next: (data: any) => {
+          this.devices = data.devices;
+          data.groups.forEach((group: any) => {
+            if (group?.device_list.length > 0) {
+              this.groups.push(group?.group_name);
+              this.deviceGroups.push(group);
             }
-          }
+          })
+          this.dataSource = new MatTableDataSource(this.devices);
         }, error: (error: { message: string; }) => {
           console.log(error);
           this._notification.showError(error.message);
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-custom-config-overview/device-custom-config-overview.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-custom-config-overview/device-custom-config-overview.ts	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-custom-config-overview/device-custom-config-overview.ts	(working copy)
@@ -112,26 +112,14 @@
   getDeviceGroups() {
     this.groups = [];
     this.deviceGroups = []
-    // ToDo: Update with actual RoleId
-    let roleId = "0"
-    let rawPayload = new FormData();
-    rawPayload.set('action', 'FilterRoleDeviceGroups');
-    rawPayload.set('options', JSON.stringify({"role_id": roleId}));
-    this._device.getDeviceGroups(rawPayload)
+    this._device.getDeviceGroups()
       .pipe(take(1))
       .subscribe({
-        next: (result: any) => {
-          if (result && result.length > 1) {
-            if (result[1] && 'result' in result[1]) {
-              let groups = result[1].result;
-              groups.forEach((group: any) => {
-                if (group?.device_list.length > 0) {
-                  this.groups.push(group?.group_name);
-                  this.deviceGroups.push(group);
-                }
-              })
-            }
-          }
+        next: (data: any) => {
+          this.deviceGroups = data.groups;
+          this.deviceGroups.forEach((group: any) => {
+            this.groups.push(group?.group_name);
+          })
         }, error: (error: { message: string; }) => {
           console.log(error);
           this._notification.showError(error.message);
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-custom-config-templates/device-custom-config-templates.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-custom-config-templates/device-custom-config-templates.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-custom-config-templates/device-custom-config-templates.scss	(working copy)
@@ -1,20 +0,0 @@
-.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/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 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-details/device-details.html	(working copy)
@@ -1,4 +1,4 @@
-<mat-card class="page-card" appearance="filled">
+<mat-card class="page-card-1" appearance="filled">
   <mat-card-header>
     <mat-card-title>
       <a class="back-to-main-page" (click)="backToManagedDevices()">
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 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-details/device-details.scss	(working copy)
@@ -1,31 +1,3 @@
-.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;
-}
-
 .device-config {
   padding: 20px;
   border-radius: 8px;
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 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-groups/device-groups.html	(working copy)
@@ -1,4 +1,4 @@
-<mat-card class="page-card" appearance="filled">
+<mat-card class="page-card-1" appearance="filled">
   <mat-card-header>
     <mat-card-title>Device Groups</mat-card-title>
     <div>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-groups/device-groups.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-groups/device-groups.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-groups/device-groups.scss	(working copy)
@@ -1,4 +1,3 @@
-/* Structure */
 table {
   width: 100%;
 }
@@ -9,31 +8,9 @@
 }
 
 mat-icon {
-  vertical-align: middle; /* Align icon with text baseline */
+  vertical-align: middle;
 }
 
-.page-card {
-  width: 100%;
-  border-radius: 0;
-  background-color: inherit;
-  font-size: 14px !important;
-}
-
-mat-card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 4px 10px;
-}
-
-mat-card-title {
-  font-size: medium;
-}
-
-.action-header {
-  text-align: center;
-}
-
 .w-10 {
   width: 10%;
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-groups/device-groups.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-groups/device-groups.ts	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-groups/device-groups.ts	(working copy)
@@ -36,23 +36,14 @@
 
   getDeviceGroups(): void {
     this.deviceGroups = [];
-    // ToDo: Update with actual RoleId
-    let roleId = "0"
-    let rawPayload = new FormData();
-    rawPayload.set('action', 'FilterRoleDeviceGroups');
-    rawPayload.set('options', JSON.stringify({"role_id": roleId}));
-    this._device.getDeviceGroups(rawPayload)
+    this._device.getDeviceGroups()
       .pipe(take(1))
       .subscribe({
-        next: (result: any) => {
-          if (result && result.length > 1) {
-            if (result[1] && 'result' in result[1]) {
-              this.deviceGroups = result[1].result;
-              this.dataSource = new MatTableDataSource(this.deviceGroups);
-              this.dataSource.paginator = this.paginator;
-              this.totalRecords = this.deviceGroups.length;
-            }
-          }
+        next: (data: any) => {
+          this.deviceGroups = data.groups;
+          this.dataSource = new MatTableDataSource(this.deviceGroups);
+          this.dataSource.paginator = this.paginator;
+          this.totalRecords = this.deviceGroups.length;
         },
         error: (error: { message: string; }) => {
           console.log(error);
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-group/device-ha-group.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-group/device-ha-group.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-group/device-ha-group.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/device-ha-group/device-ha-group.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-group/device-ha-group.ts	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-group/device-ha-group.ts	(working copy)
@@ -9,7 +9,6 @@
 import {GlobalSerialPipe} from '../../../pipes/global-serial-pipe';
 import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {ImportDeviceSSLCertificateDialog} from '../device-ssl-certificates/device-ssl-certificates';
 
 @Component({
   selector: 'app-device-ha-group',
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-overview/device-ha-overview.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-overview/device-ha-overview.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-overview/device-ha-overview.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/devices/devices.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices.html	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices.html	(working copy)
@@ -1,4 +1,4 @@
-<mat-card class="page-card" appearance="filled">
+<mat-card class="page-card-1" appearance="filled">
   <mat-card-header>
     <mat-card-title>Managed Devices</mat-card-title>
     <div>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices.scss	(working copy)
@@ -9,31 +9,9 @@
 }
 
 mat-icon {
-  vertical-align: middle; /* Align icon with text baseline */
+  vertical-align: middle;
 }
 
-.page-card {
-  width: 100%;
-  border-radius: 0;
-  background-color: inherit;
-  font-size: 14px !important;
-}
-
-mat-card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 4px 10px;
-}
-
-mat-card-title {
-  font-size: medium;
-}
-
-.action-header {
-  text-align: center;
-}
-
 .w-10 {
   width: 10%;
 }
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 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices.ts	(working copy)
@@ -55,27 +55,13 @@
   getDeviceGroups(): void {
     this.devices = [];
     this.groups = [];
-    // ToDo: Update with actual RoleId
-    let roleId = "0"
-    let rawPayload = new FormData();
-    rawPayload.set('action', 'FilterRoleDeviceGroups');
-    rawPayload.set('options', JSON.stringify({"role_id": roleId}));
-    this._device.getDeviceGroups(rawPayload)
+    this._device.getDeviceGroups()
       .pipe(take(1))
       .subscribe({
-        next: (result: any) => {
-          if (result && result.length > 1) {
-            if (result[1] && 'result' in result[1]) {
-              let groups = result[1].result;
-              groups.forEach((group: any) => {
-                this.groups.push(group?.group_name);
-                group?.device_list.forEach((device: any) => {
-                  this.devices.push(device);
-                })
-              })
-              this.dataSource = new MatTableDataSource(this.devices);
-            }
-          }
+        next: (data: any) => {
+          this.groups = data.groups;
+          this.devices = data.devices;
+          this.dataSource = new MatTableDataSource(this.devices);
         }, error: (error: { message: string; }) => {
           console.log(error);
           this._notification.showError(error.message);
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/host/host.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/host/host.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/host/host.scss	(working copy)
@@ -1,22 +0,0 @@
-.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/license/license.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/license/license.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/license/license.scss	(working copy)
@@ -1,21 +0,0 @@
-.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-analysis-slb-overview/log-analysis-slb-overview.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-analysis-slb-overview/log-analysis-slb-overview.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-analysis-slb-overview/log-analysis-slb-overview.scss	(working copy)
@@ -1,21 +0,0 @@
-.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-analysis-slb-overview/log-analysis-slb-overview.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-analysis-slb-overview/log-analysis-slb-overview.ts	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-analysis-slb-overview/log-analysis-slb-overview.ts	(working copy)
@@ -41,29 +41,17 @@
   getDeviceGroups(): void {
     this.devices = [];
     this.groups = [];
-    // ToDo: Update with actual RoleId
-    let roleId = "0"
-    let rawPayload = new FormData();
-    rawPayload.set('action', 'FilterRoleDeviceGroups');
-    rawPayload.set('options', JSON.stringify({"role_id": roleId}));
-    this._device.getDeviceGroups(rawPayload)
+    this._device.getDeviceGroups()
       .pipe(take(1))
       .subscribe({
-        next: (result: any) => {
-          if (result && result.length > 1) {
-            if (result[1] && 'result' in result[1]) {
-              let groups = result[1].result;
-              groups.forEach((group: any) => {
-                this.groups.push(group?.group_name);
-                group?.device_list.forEach((device: any) => {
-                  this.devices.push(device);
-                  if (device?.type.toLowerCase() === 'apv' || device?.type.toLowerCase() === 'vapv') {
-                    this.getAPVVirtualServices(device);
-                  }
-                })
-              })
+        next: (data: any) => {
+          this.groups = data.groups;
+          this.devices = data.devices;
+          this.devices.forEach((device: any) => {
+            if (device?.type.toLowerCase() === 'apv' || device?.type.toLowerCase() === 'vapv') {
+              this.getAPVVirtualServices(device);
             }
-          }
+          })
         }, error: (error: { message: string; }) => {
           console.log(error);
           this._notification.showError(error.message);
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 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-settings/log-settings.scss	(working copy)
@@ -1,22 +0,0 @@
-.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/notification-channels/notification-channels.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/notification-channels/notification-channels.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/notification-channels/notification-channels.scss	(working copy)
@@ -1,20 +0,0 @@
-.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/notification-settings/notification-settings.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/notification-settings/notification-settings.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/notification-settings/notification-settings.scss	(working copy)
@@ -1,20 +0,0 @@
-.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/resource-monitoring-devices/resource-monitoring-devices.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-devices/resource-monitoring-devices.ts	(revision 2725)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-devices/resource-monitoring-devices.ts	(working copy)
@@ -42,37 +42,28 @@
   getDeviceGroups(): void {
     this.devices = [];
     this.groups = [];
-    // ToDo: Update with actual RoleId
-    let roleId = "0"
-    let rawPayload = new FormData();
-    rawPayload.set('action', 'FilterRoleDeviceGroups');
-    rawPayload.set('options', JSON.stringify({"role_id": roleId}));
-    this._device.getDeviceGroups(rawPayload)
+    this._device.getDeviceGroups()
       .pipe(take(1))
       .subscribe({
-        next: (result: any) => {
-          if (result && result.length > 1) {
-            if (result[1] && 'result' in result[1]) {
-              let groups = result[1].result;
-              groups.forEach((group: any) => {
-                this.groups.push(group?.group_name);
-                group?.device_list.forEach((device: any) => {
-                  this.deviceMetrics.forEach((d: any) => {
-                    if (d?.agent_host === device?.ip) {
-                      device.cpu = d.cpu !== null ? d.cpu : 0;
-                      device.memory = d.mem !== null ? d.mem : 0;
-                      device.net_mem = d.net_mem !== null ? d.net_mem : 0;
-                      device.connections = d.connections !== null ? d.connections : 0;
-                      this.devices.push(device);
-                    }
-                  })
-                })
+        next: (data: any) => {
+          let groups = data.groups;
+          groups.forEach((group: any) => {
+            this.groups.push(group?.group_name);
+            group?.device_list.forEach((device: any) => {
+              this.deviceMetrics.forEach((d: any) => {
+                if (d?.agent_host === device?.ip) {
+                  device.cpu = d.cpu !== null ? d.cpu : 0;
+                  device.memory = d.mem !== null ? d.mem : 0;
+                  device.net_mem = d.net_mem !== null ? d.net_mem : 0;
+                  device.connections = d.connections !== null ? d.connections : 0;
+                  this.devices.push(device);
+                }
               })
-              this.dataSource.data = this.devices;
-              this.dataSource.paginator = this.paginator;
-              this.totalRecords = this.dataSource.data.length;
-            }
-          }
+            })
+          })
+          this.dataSource.data = this.devices;
+          this.dataSource.paginator = this.paginator;
+          this.totalRecords = this.dataSource.data.length;
         }, error: (error: { message: string; }) => {
           console.log(error);
           this._notification.showError(error.message);
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb/resource-monitoring-llb.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb/resource-monitoring-llb.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb/resource-monitoring-llb.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/resource-monitoring-llb/resource-monitoring-llb.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb/resource-monitoring-llb.ts	(revision 2725)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb/resource-monitoring-llb.ts	(working copy)
@@ -39,29 +39,17 @@
   getDeviceGroups(): void {
     this.devices = [];
     this.groups = [];
-    // ToDo: Update with actual RoleId
-    let roleId = "0"
-    let rawPayload = new FormData();
-    rawPayload.set('action', 'FilterRoleDeviceGroups');
-    rawPayload.set('options', JSON.stringify({"role_id": roleId}));
-    this._device.getDeviceGroups(rawPayload)
+    this._device.getDeviceGroups()
       .pipe(take(1))
       .subscribe({
-        next: (result: any) => {
-          if (result && result.length > 1) {
-            if (result[1] && 'result' in result[1]) {
-              let groups = result[1].result;
-              groups.forEach((group: any) => {
-                this.groups.push(group?.group_name);
-                group?.device_list.forEach((device: any) => {
-                  this.devices.push(device);
-                  if ((device?.type.toLowerCase() === 'apv' || device?.type.toLowerCase() === 'vapv') && device?.connection) {
-                    this.getTopAPVLLBMetrics(device)
-                  }
-                })
-              })
+        next: (data: any) => {
+          this.devices = data.devices;
+          this.groups = data.groups;
+          this.devices.forEach((device: any) => {
+            if ((device?.type.toLowerCase() === 'apv' || device?.type.toLowerCase() === 'vapv') && device?.connection) {
+              this.getTopAPVLLBMetrics(device)
             }
-          }
+          })
         }, error: (error: { message: string; }) => {
           console.log(error);
           this._notification.showError(error.message);
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real/resource-monitoring-slb-real.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real/resource-monitoring-slb-real.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real/resource-monitoring-slb-real.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/resource-monitoring-slb-real/resource-monitoring-slb-real.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real/resource-monitoring-slb-real.ts	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real/resource-monitoring-slb-real.ts	(working copy)
@@ -26,6 +26,7 @@
   @ViewChild(MatPaginator) paginator!: MatPaginator;
 
   protocols: any = {};
+
   constructor(
     private _router: Router,
     private _device: DeviceService,
@@ -44,37 +45,28 @@
   getDeviceGroups(): void {
     this.devices = [];
     this.groups = [];
-    // ToDo: Update with actual RoleId
-    let roleId = "0"
-    let rawPayload = new FormData();
-    rawPayload.set('action', 'FilterRoleDeviceGroups');
-    rawPayload.set('options', JSON.stringify({"role_id": roleId}));
-    this._device.getDeviceGroups(rawPayload)
+    this._device.getDeviceGroups()
       .pipe(take(1))
       .subscribe({
-        next: (result: any) => {
-          if (result && result.length > 1) {
-            if (result[1] && 'result' in result[1]) {
-              let groups = result[1].result;
-              groups.forEach((group: any) => {
-                const deviceMap = new Map();
-                group?.device_list.forEach((device: any) => {
-                  if (device?.ip) {
-                    deviceMap.set(device.ip, device);
-                  }
-                });
-                this.realServiceStats = this.realServiceStats.map((rs: any) => {
-                  const matchingDevice = deviceMap.get(rs?.agent_host);
-                  if (matchingDevice) {
-                    return {...matchingDevice, ...rs};
-                  }
-                  return rs;
-                });
-                this.devices = group?.device_list;
-              })
-              this.dataSource.data = this.realServiceStats;
-            }
-          }
+        next: (data: any) => {
+          this.groups = data.groups;
+          this.groups.forEach((group: any) => {
+            const deviceMap = new Map();
+            group?.device_list.forEach((device: any) => {
+              if (device?.ip) {
+                deviceMap.set(device.ip, device);
+              }
+            });
+            this.realServiceStats = this.realServiceStats.map((rs: any) => {
+              const matchingDevice = deviceMap.get(rs?.agent_host);
+              if (matchingDevice) {
+                return {...matchingDevice, ...rs};
+              }
+              return rs;
+            });
+            this.devices = group?.device_list;
+          })
+          this.dataSource.data = this.realServiceStats;
         }, error: (error: { message: string; }) => {
           console.log(error);
           this._notification.showError(error.message);
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual/resource-monitoring-slb-virtual.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual/resource-monitoring-slb-virtual.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual/resource-monitoring-slb-virtual.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/resource-monitoring-slb-virtual/resource-monitoring-slb-virtual.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual/resource-monitoring-slb-virtual.ts	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual/resource-monitoring-slb-virtual.ts	(working copy)
@@ -25,6 +25,7 @@
   @ViewChild(MatPaginator) paginator!: MatPaginator;
 
   protocols: any = {}
+
   constructor(
     private _router: Router,
     private _device: DeviceService,
@@ -44,37 +45,28 @@
     this.devices = [];
     this.groups = [];
     this.dataSource.data = [];
-    // ToDo: Update with actual RoleId
-    let roleId = "0"
-    let rawPayload = new FormData();
-    rawPayload.set('action', 'FilterRoleDeviceGroups');
-    rawPayload.set('options', JSON.stringify({"role_id": roleId}));
-    this._device.getDeviceGroups(rawPayload)
+    this._device.getDeviceGroups()
       .pipe(take(1))
       .subscribe({
-        next: (result: any) => {
-          if (result && result.length > 1) {
-            if (result[1] && 'result' in result[1]) {
-              let groups = result[1].result;
-              groups.forEach((group: any) => {
-                const deviceMap = new Map();
-                group?.device_list.forEach((device: any) => {
-                  if (device?.ip) {
-                    deviceMap.set(device.ip, device);
-                  }
-                });
-                this.virtualServiceStats = this.virtualServiceStats.map((vs: any) => {
-                  const matchingDevice = deviceMap.get(vs?.agent_host);
-                  if (matchingDevice) {
-                    return {...matchingDevice, ...vs};
-                  }
-                  return vs;
-                });
-                this.devices = group?.device_list;
-              })
-              this.dataSource.data = this.virtualServiceStats;
-            }
-          }
+        next: (data: any) => {
+          this.groups = data.groups;
+          this.groups.forEach((group: any) => {
+            const deviceMap = new Map();
+            group?.device_list.forEach((device: any) => {
+              if (device?.ip) {
+                deviceMap.set(device.ip, device);
+              }
+            });
+            this.virtualServiceStats = this.virtualServiceStats.map((vs: any) => {
+              const matchingDevice = deviceMap.get(vs?.agent_host);
+              if (matchingDevice) {
+                return {...matchingDevice, ...vs};
+              }
+              return vs;
+            });
+            this.devices = group?.device_list;
+          })
+          this.dataSource.data = this.virtualServiceStats;
         }, error: (error: { message: string; }) => {
           console.log(error);
           this._notification.showError(error.message);
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn/resource-monitoring-ssl-vpn.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn/resource-monitoring-ssl-vpn.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn/resource-monitoring-ssl-vpn.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/resource-monitoring-ssl-vpn/resource-monitoring-ssl-vpn.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn/resource-monitoring-ssl-vpn.ts	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn/resource-monitoring-ssl-vpn.ts	(working copy)
@@ -39,37 +39,28 @@
   getDeviceGroups(): void {
     this.devices = [];
     this.groups = [];
-    // ToDo: Update with actual RoleId
-    let roleId = "0"
-    let rawPayload = new FormData();
-    rawPayload.set('action', 'FilterRoleDeviceGroups');
-    rawPayload.set('options', JSON.stringify({"role_id": roleId}));
-    this._device.getDeviceGroups(rawPayload)
+    this._device.getDeviceGroups()
       .pipe(take(1))
       .subscribe({
-        next: (result: any) => {
-          if (result && result.length > 1) {
-            if (result[1] && 'result' in result[1]) {
-              let groups = result[1].result;
-              groups.forEach((group: any) => {
-                const deviceMap = new Map();
-                group?.device_list.forEach((device: any) => {
-                  if (device?.ip) {
-                    deviceMap.set(device.ip, device);
-                  }
-                });
-                this.sslVPNStats = this.sslVPNStats.map((rs: any) => {
-                  const matchingDevice = deviceMap.get(rs?.agent_host);
-                  if (matchingDevice) {
-                    return {...matchingDevice, ...rs};
-                  }
-                  return rs;
-                });
-                this.devices = group?.device_list;
-              })
-              this.dataSource.data = this.sslVPNStats;
-            }
-          }
+        next: (data: any) => {
+          this.groups = data.groups;
+          this.groups.forEach((group: any) => {
+            const deviceMap = new Map();
+            group?.device_list.forEach((device: any) => {
+              if (device?.ip) {
+                deviceMap.set(device.ip, device);
+              }
+            });
+            this.sslVPNStats = this.sslVPNStats.map((rs: any) => {
+              const matchingDevice = deviceMap.get(rs?.agent_host);
+              if (matchingDevice) {
+                return {...matchingDevice, ...rs};
+              }
+              return rs;
+            });
+            this.devices = group?.device_list;
+          })
+          this.dataSource.data = this.sslVPNStats;
         }, error: (error: { message: string; }) => {
           console.log(error);
           this._notification.showError(error.message);
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-details/role-details.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-details/role-details.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-details/role-details.scss	(working copy)
@@ -1,22 +0,0 @@
-.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/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	(revision 2724)
+++ /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)
@@ -1,22 +0,0 @@
-.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/system-control/system-control.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-control/system-control.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-control/system-control.scss	(working copy)
@@ -1,22 +0,0 @@
-.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/system-update/system-update.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-update/system-update.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-update/system-update.scss	(working copy)
@@ -1,22 +0,0 @@
-.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/topology-slb-virtual-service/topology-slb-virtual-service.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/topology-slb-virtual-service/topology-slb-virtual-service.ts	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/topology-slb-virtual-service/topology-slb-virtual-service.ts	(working copy)
@@ -48,29 +48,19 @@
     this.groups = [];
     this.deviceServices = [];
     this.dataSource.data = [];
-    // ToDo: Update with actual RoleId
-    let roleId = "0"
-    let rawPayload = new FormData();
-    rawPayload.set('action', 'FilterRoleDeviceGroups');
-    rawPayload.set('options', JSON.stringify({"role_id": roleId}));
-    this._device.getDeviceGroups(rawPayload)
+    this._device.getDeviceGroups()
       .pipe(take(1))
       .subscribe({
-        next: (result: any) => {
-          if (result && result.length > 1) {
-            if (result[1] && 'result' in result[1]) {
-              let groups = result[1].result;
-              groups.forEach((group: any) => {
-                this.groups.push(group?.group_name);
-                group?.device_list.forEach((device: any) => {
-                  if (device?.type.toLowerCase() === 'apv' || device?.type.toLowerCase() === 'vapv') {
-                    this.devices.push(device);
-                    this.getDeviceSLBServices(device);
-                  }
-                })
-              })
+        next: (data: any) => {
+          this.devices = data.devices;
+          data.groups.forEach((group: any) => {
+            this.groups.push(group?.group_name);
+          });
+          this.devices.forEach((device: any) => {
+            if (device?.type.toLowerCase() === 'apv' || device?.type.toLowerCase() === 'vapv') {
+              this.getDeviceSLBServices(device);
             }
-          }
+          })
           this._cdRef.detectChanges();
         }, error: (error: { message: string; }) => {
           console.log(error);
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vl-discovered-devices/vl-discovered-devices.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vl-discovered-devices/vl-discovered-devices.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vl-discovered-devices/vl-discovered-devices.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/vl-managed-devices/vl-managed-devices.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vl-managed-devices/vl-managed-devices.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vl-managed-devices/vl-managed-devices.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/vl-managed-devices/vl-managed-devices.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vl-managed-devices/vl-managed-devices.ts	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vl-managed-devices/vl-managed-devices.ts	(working copy)
@@ -90,26 +90,14 @@
   getDeviceGroups(): void {
     this.devices = [];
     this.deviceGroups = [];
-    // ToDo: Update with actual RoleId
-    let roleId = "0"
-    let rawPayload = new FormData();
-    rawPayload.set('action', 'FilterRoleDeviceGroups');
-    rawPayload.set('options', JSON.stringify({"role_id": roleId}));
-    this._device.getDeviceGroups(rawPayload)
+    this._device.getDeviceGroups()
       .pipe(take(1))
       .subscribe({
-        next: (result: any) => {
-          if (result && result.length > 1) {
-            if (result[1] && 'result' in result[1]) {
-              let groups = result[1].result;
-              groups.forEach((group: any) => {
-                this.deviceGroups.push(group?.group_name);
-                group?.device_list.forEach((device: any) => {
-                  this.devices.push(device);
-                })
-              })
-            }
-          }
+        next: (data: any) => {
+          this.devices = data.devices;
+          data.groups.forEach((group: any) => {
+            this.deviceGroups.push(group?.group_name);
+          })
         }, error: (error: { message: string; }) => {
           this._notification.showError(error.message);
         }
@@ -580,11 +568,20 @@
       {key: 'Serial Number', value: this.data?.device?.serial_number},
       {key: 'Interface', value: this.data?.device?.network_interface},
       {key: 'Build', value: this.data?.device?.build_version},
-      {key: 'Connection status', value: this.data?.device?.connection == 'connected' ? 'Connected' : this.data?.device?.connection},
-      {key: 'Volume license status', value: this.data?.device?.status == 'enabled' ? 'Enabled' : this.data?.device?.status},
+      {
+        key: 'Connection status',
+        value: this.data?.device?.connection == 'connected' ? 'Connected' : this.data?.device?.connection
+      },
+      {
+        key: 'Volume license status',
+        value: this.data?.device?.status == 'enabled' ? 'Enabled' : this.data?.device?.status
+      },
       {key: 'Boot time', value: this.data?.device?.system_boot_time},
       {key: 'Up time', value: this.data?.device?.system_up_time},
-      {key: 'Bandwidth limit', value: this.data?.device?.bw_limit === 0 ? 'Automatic' : this.data?.device?.bw_limit + ' Mbps' },
+      {
+        key: 'Bandwidth limit',
+        value: this.data?.device?.bw_limit === 0 ? 'Automatic' : this.data?.device?.bw_limit + ' Mbps'
+      },
     ];
     this.deviceDataSource = new MatTableDataSource(this.deviceDetails);
   }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-acl-groups/vpn-acl-groups.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-acl-groups/vpn-acl-groups.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-acl-groups/vpn-acl-groups.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/vpn-acl-resource-groups/vpn-acl-resource-groups.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-acl-resource-groups/vpn-acl-resource-groups.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-acl-resource-groups/vpn-acl-resource-groups.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/vpn-acl-resources/vpn-acl-resources.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-acl-resources/vpn-acl-resources.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-acl-resources/vpn-acl-resources.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/vpn-acl-rules/vpn-acl-rules.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-acl-rules/vpn-acl-rules.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-acl-rules/vpn-acl-rules.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/vpn-details-overview/vpn-details-overview.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-details-overview/vpn-details-overview.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-details-overview/vpn-details-overview.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/vpn-hardware-id/vpn-hardware-id.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-hardware-id/vpn-hardware-id.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-hardware-id/vpn-hardware-id.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/vpn-resource-group-app-resources-excluded/vpn-resource-group-app-resources-excluded.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-app-resources-excluded/vpn-resource-group-app-resources-excluded.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-app-resources-excluded/vpn-resource-group-app-resources-excluded.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/vpn-resource-group-app-resources/vpn-resource-group-app-resources.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-app-resources/vpn-resource-group-app-resources.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-app-resources/vpn-resource-group-app-resources.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/vpn-resource-group-network-resources-excluded/vpn-resource-group-network-resources-excluded.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-network-resources-excluded/vpn-resource-group-network-resources-excluded.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-network-resources-excluded/vpn-resource-group-network-resources-excluded.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/vpn-resource-group-network-resources/vpn-resource-group-network-resources.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-network-resources/vpn-resource-group-network-resources.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-network-resources/vpn-resource-group-network-resources.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/vpn-resource-group-overview/vpn-resource-group-overview.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-overview/vpn-resource-group-overview.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-group-overview/vpn-resource-group-overview.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/vpn-resource-groups/vpn-resource-groups.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-groups/vpn-resource-groups.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vpn-resource-groups/vpn-resource-groups.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/tasks/tasks.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/tasks/tasks.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/tasks/tasks.scss	(working copy)
@@ -1,20 +0,0 @@
-.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/upgrade-centre/upgrade-centre.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/upgrade-centre/upgrade-centre.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/upgrade-centre/upgrade-centre.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/upgrade-centre/upgrade-centre.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/upgrade-centre/upgrade-centre.ts	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/upgrade-centre/upgrade-centre.ts	(working copy)
@@ -546,30 +546,15 @@
     this.devices = [];
     this.groups = [];
     this.deviceGroups = []
-    // ToDo: Update with actual RoleId
-    let roleId = "0"
-    let rawPayload = new FormData();
-    rawPayload.set('action', 'FilterRoleDeviceGroups');
-    rawPayload.set('options', JSON.stringify({"role_id": roleId}));
-    this._device.getDeviceGroups(rawPayload)
+    this._device.getDeviceGroups()
       .pipe(take(1))
       .subscribe({
-        next: (result: any) => {
-          if (result && result.length > 1) {
-            if (result[1] && 'result' in result[1]) {
-              let groups = result[1].result;
-              groups.forEach((group: any) => {
-                if (group?.device_list.length > 0) {
-                  group?.device_list.forEach((device: any) => {
-                    this.devices.push(device);
-                  })
-                  this.groups.push(group?.group_name);
-                  this.deviceGroups.push(group);
-                }
-              })
-              console.log(this.groups, this.devices)
-            }
-          }
+        next: (data: any) => {
+          this.deviceGroups = data.groups;
+          this.devices = data.devices;
+          this.deviceGroups.forEach((group: any) => {
+            this.groups.push(group?.group_name);
+          })
         }, error: (error: { message: string; }) => {
           console.log(error);
           this._notification.showError(error.message);
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/volume-license-overview/volume-license-overview.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/volume-license-overview/volume-license-overview.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/volume-license-overview/volume-license-overview.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/vpn-management/vpn-management.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/vpn-management/vpn-management.scss	(revision 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/vpn-management/vpn-management.scss	(working copy)
@@ -1,21 +0,0 @@
-.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/constants/api_urls.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/api_urls.ts	(revision 2725)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/api_urls.ts	(working copy)
@@ -1,8 +1,8 @@
-const PREFIX = '/api';
+const PREFIX = '/api/v2';
 
 // These are base URLs, Query params might be added at respective services.
 export const URLS = {
-  // Auth
+// Auth
   LOGIN_URL: `${PREFIX}/login_app`,
   // Device
   GET_DEVICE_GROUPS_URL: `${PREFIX}/api/cm/device_mgmt/device_group/RoleDeviceGroup/_perform`,
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 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/auth.ts	(working copy)
@@ -7,6 +7,7 @@
 import {map} from 'rxjs/operators';
 import {URLS} from '../constants/api_urls';
 import {MatSnackBar} from '@angular/material/snack-bar';
+import {NotificationService} from './notification';
 
 @Injectable({
   providedIn: 'root'
@@ -58,13 +59,11 @@
   constructor(
     private router: Router,
     private storage: Storage,
-    private snackBar: MatSnackBar,
+    private _notification: NotificationService,
     protected http: HttpService) {
 
     this.currentUserSubject = new BehaviorSubject<User | null>(null);
     this.currentUser = this.currentUserSubject.asObservable();
-
-    // this.init();
   }
 
   public get currentUserValue(): User | null {
@@ -93,7 +92,6 @@
           if (!('permissions' in response)) {
             response['permissions'] = this._permissions;
           }
-
           this.storage.setItem('currentUser', JSON.stringify(response));
           this.currentUserSubject.next(response);
           this._isAuthenticating.next(false);
@@ -120,13 +118,7 @@
       const msg = reason === 'expired'
         ? 'Your session has expired. Please log in again.'
         : 'You have been logged out successfully.';
-
-      this.snackBar.open(msg, 'Close', {
-        duration: 4000,
-        horizontalPosition: 'right',
-        verticalPosition: 'top',
-        panelClass: ['session-expired-snackbar']
-      });
+      this._notification.showError(msg);
     }
     this.router.navigate(['/login']).finally(() => {
       this.logoutInProgress = false;
@@ -151,9 +143,7 @@
         this._isAuthenticating.next(false);
         return resolve();
       }
-
       const storedUserRaw = this.storage.getItem('currentUser');
-
       if (storedUserRaw) {
         try {
           const user: User = JSON.parse(storedUserRaw);
@@ -164,10 +154,8 @@
       } else {
         this.currentUserSubject.next(null);
       }
-
       this._isAuthenticating.next(false);
       resolve();
     });
   }
-
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/device-service.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/device-service.ts	(revision 2725)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/device-service.ts	(working copy)
@@ -1,17 +1,57 @@
 import {Injectable} from '@angular/core';
 import {URLS} from '../constants/api_urls';
 import {HttpService} from './http';
+import {map} from 'rxjs/operators';
+import {catchError, throwError} from 'rxjs';
+import {Storage} from './storage';
 
 @Injectable({
   providedIn: 'root'
 })
 export class DeviceService {
 
-  constructor(private http: HttpService) {
+  constructor(
+    private http: HttpService,
+    private _storage: Storage
+    ) {
   }
 
-  getDeviceGroups(rawPayload: any) {
-    return this.http.post(URLS.GET_DEVICE_GROUPS_URL, rawPayload, {csrf: true, isFormData: true, csrfInFormData: true});
+  getDeviceGroups() {
+    // ToDo: Update with actual RoleId with RBAC
+    let roleId = this._storage.getItem('roleId') || "0";
+    let rawPayload = new FormData();
+    rawPayload.set('action', 'FilterRoleDeviceGroups');
+    rawPayload.set('options', JSON.stringify({"role_id": roleId}));
+    return this.http.post(URLS.GET_DEVICE_GROUPS_URL, rawPayload, {csrf: true, isFormData: true, csrfInFormData: true})
+      .pipe(
+        map((result: any): any => {
+          const processedData: any = {
+            groups: [],
+            groupNames: [],
+            devices: []
+          };
+          if (result && result.length > 1 && result[1] && 'result' in result[1]) {
+            const groups: any[] = result[1].result;
+            groups.forEach((group: any) => {
+              if (group?.group_name) {
+                processedData.groupNames.push(group.group_name);
+              }
+              if (group?.device_list) {
+                processedData.devices.push(...group.device_list);
+              }
+              processedData.groups.push(group);
+            });
+          }
+          return processedData;
+        }),
+        catchError((err: any) => {
+          console.error('API Error in getDeviceGroups:', err);
+          const userFriendlyError = {
+            message: err.error?.message || 'A network or API error occurred.'
+          };
+          return throwError(() => userFriendlyError);
+        })
+      );
   }
 
   addDeviceGroup(rawPayload: any) {
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 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/shared/shared-module.ts	(working copy)
@@ -60,7 +60,7 @@
   solidIcons.faHouseSignal, solidIcons.faMagnifyingGlassChart, solidIcons.faFileLines,
   solidIcons.faDesktop, solidIcons.faNetworkWired, solidIcons.faCloudArrowUp,
   solidIcons.faPeopleLine, solidIcons.faMicrochip, solidIcons.faSignal, solidIcons.faBell,
-  solidIcons.faLaptopCode, solidIcons.faHardDrive, solidIcons.faSpinner
+  solidIcons.faLaptopCode, solidIcons.faHardDrive, solidIcons.faSpinner, solidIcons.faBookmark,
 ];
 
 const customRegularIcons = [
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 2724)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/styles.scss	(working copy)
@@ -373,4 +373,57 @@
 
 .center {
   text-align: center;
+}
+
+/* start - app-notification style*/
+.mat-mdc-snack-bar-container {
+  padding: 0 !important;
+  margin: 0 !important;
+  min-height: 0 !important;
+  min-width: 0 !important;
+  max-width: initial !important;
+  background: none !important;
+  box-shadow: none !important;
+}
+
+.mat-mdc-snack-bar-label {
+  padding: 0 !important;
 }
+
+.mdc-snackbar__label {
+  padding: 3px !important;
+  min-height: 0 !important;
+  min-width: 0 !important;
+}
+
+.mdc-snackbar__surface {
+  padding: 0 !important;
+}
+
+app-app-notification {
+  display: block;
+}
+
+/* end - app-notification style*/
+
+.page-card-1 {
+  width: 100% !important;
+  border-radius: 0 !important;
+  background-color: inherit !important;
+  font-size: 14px !important;
+}
+
+.page-card-1 mat-card-header {
+  color: #1170cf !important;
+}
+
+mat-card-header {
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+  padding: 4px 10px !important;
+}
+
+mat-card-title {
+  font-size: medium !important;
+}