Index: /branches/amp_4_0/platform/tools/container/services/telegraf/telegraf.conf
===================================================================
--- /branches/amp_4_0/platform/tools/container/services/telegraf/telegraf.conf	(revision 2948)
+++ /branches/amp_4_0/platform/tools/container/services/telegraf/telegraf.conf	(working copy)
@@ -15,8 +15,9 @@
 
 # === Output: TimescaleDB/PostgreSQL ===
 [[outputs.postgresql]]
-  connection = "host=127.0.0.1 port=5432 user=amp_ts_user password=Array@123$ dbname=amp_ts sslmode=disable"
+  connection = "host=${TSDB_HOST:-127.0.0.1} port=${TSDB_PORT:-5432} user=${TSDB_USER:-amp_ts_user} password=${TSDB_PASSWORD:-Array@123$} dbname=${TSDB_NAME:-amp_ts} sslmode=disable"
   schema     = "public"
+  method     = "insert"
   # Route metrics to Timescale, configured to drop logs
   namedrop = ["docker_log"]
 
@@ -36,6 +37,7 @@
 [[inputs.mem]]
 [[inputs.diskio]]
 [[inputs.net]]
+  ignore_protocol_stats = true
 
 [[inputs.system]]
   fieldinclude = ["load1", "load5", "load15", "uptime"]
@@ -43,6 +45,7 @@
 # Using Docker input for container stats (Metrics -> TimescaleDB)
 [[inputs.docker]]
   endpoint = "unix:///var/run/docker.sock"
+  docker_api_version = ""
   gather_services = false
   timeout = "5s"
 
@@ -52,6 +55,7 @@
 # Using Docker logs (Logs -> Logstash)
 [[inputs.docker_log]]
   endpoint = "unix:///var/run/docker.sock"
+  docker_api_version = ""
   container_name_include = [] # All containers
   timeout = "5s"
 
@@ -128,30 +132,25 @@
         return metric
 
     # Fields that must remain as strings
-    string_fields = ["link_resp_time", "link_up_time", "link_down_time",
-                     "link_bandwid_in", "link_bandwid_out", "link_thresh",
-                     "link_status", "link_down_event", "link_name",
-                     "link_gateway", "host"]
+    string_fields = ["link_resp_time", "link_status", "link_down_event", 
+                     "link_name", "link_gateway", "host"]
 
     # Fields that must be integers
     int_fields = ["link_index", "link_hits", "link_conn", "link_usage",
-                  "link_down_count"]
+                  "link_down_count", "link_up_time", "link_down_time",
+                  "link_bandwid_in", "link_bandwid_out", "link_thresh"]
 
     # Convert string fields safely
     for f in string_fields:
-        if f in metric.fields:
-            if metric.fields[f] == None:
-                metric.fields[f] = ""
-            else:
-                metric.fields[f] = str(metric.fields[f])
+        if f in metric.fields and metric.fields[f] != None:
+            metric.fields[f] = str(metric.fields[f])
 
     # Convert int fields safely
     for f in int_fields:
         if f in metric.fields:
             val = metric.fields[f]
-            # Convert numeric strings to int, keep actual int, else 0
             if val == None:
-                metric.fields[f] = 0
+                continue
             elif type(val) == int:
                 metric.fields[f] = val
             elif type(val) == float:
@@ -165,7 +164,10 @@
                 if digits == "":
                     metric.fields[f] = 0
                 else:
-                    metric.fields[f] = int(float(digits))
+                    try:
+                        metric.fields[f] = int(float(digits))
+                    except:
+                        metric.fields[f] = 0
             else:
                 metric.fields[f] = 0
 
Index: /branches/amp_4_0/platform/tools/container/services/telegraf/telegraf.d/ag.toml
===================================================================
--- /branches/amp_4_0/platform/tools/container/services/telegraf/telegraf.d/ag.toml	(revision 2948)
+++ /branches/amp_4_0/platform/tools/container/services/telegraf/telegraf.d/ag.toml	(working copy)
@@ -1,5 +1,6 @@
 [[inputs.snmp]]
 agents = []
+agent_host_tag = "source"
 community = "public"
 name = "an_device_metrics"
 timeout = "2s"
Index: /branches/amp_4_0/platform/tools/container/services/telegraf/telegraf.d/apv.toml
===================================================================
--- /branches/amp_4_0/platform/tools/container/services/telegraf/telegraf.d/apv.toml	(revision 2948)
+++ /branches/amp_4_0/platform/tools/container/services/telegraf/telegraf.d/apv.toml	(working copy)
@@ -1,5 +1,6 @@
 [[inputs.snmp]]
 agents = []
+agent_host_tag = "source"
 community = "public"
 name = "an_device_metrics"
 timeout = "2s"
@@ -330,3 +331,39 @@
 [[inputs.snmp.table.field]]
 name = "link_usage"
 oid = ".1.3.6.1.4.1.7564.34.2.1.2.1.15"
+
+[[processors.starlark]]
+  namepass = ["apv_llb_stats"]
+  source = '''
+def apply(metric):
+    # HOTFIX: The immutable telegraf.conf forces these fields to strings, causing PG failures.
+    # We must RE-CONVERT them to int to pass the binary PG COPY check.
+    
+    int_fields = ["link_up_time", "link_down_time",
+                  "link_bandwid_in", "link_bandwid_out", "link_thresh"]
+
+    for f in int_fields:
+        if f in metric.fields:
+            val = metric.fields[f]
+            # Handle string (e.g. "123" or "100 bps")
+            if type(val) == "string":
+                 digits = ""
+                 # Remove non-digits (like units)
+                 for i in range(len(val)):
+                     c = val[i]
+                     if c.isdigit() or c == ".":
+                         digits += c
+                 
+                 if len(digits) > 0:
+                     metric.fields[f] = int(float(digits))
+                 else:
+                     metric.fields[f] = 0
+            # Handle number (if original processor didn't touch it)
+            elif type(val) == "int" or type(val) == "float":
+                 metric.fields[f] = int(val)
+            # Handle None
+            else:
+                 pass 
+
+    return metric
+'''
Index: /branches/amp_4_0/platform/tools/container/services/telegraf/telegraf.d/asf.toml
===================================================================
--- /branches/amp_4_0/platform/tools/container/services/telegraf/telegraf.d/asf.toml	(revision 2948)
+++ /branches/amp_4_0/platform/tools/container/services/telegraf/telegraf.d/asf.toml	(working copy)
@@ -1,5 +1,6 @@
 [[inputs.snmp]]
 agents = []
+agent_host_tag = "source"
 community = "public"
 name = "an_device_metrics"
 timeout = "2s"
Index: /branches/amp_4_0/platform/tools/container/stack.yml.template
===================================================================
--- /branches/amp_4_0/platform/tools/container/stack.yml.template	(revision 2948)
+++ /branches/amp_4_0/platform/tools/container/stack.yml.template	(working copy)
@@ -399,6 +399,7 @@
     entrypoint: ["telegraf", "--config", "/etc/telegraf/telegraf.conf", "--config", "/etc/telegraf/telegraf.d/apv.toml", "--config", "/etc/telegraf/telegraf.d/ag.toml", "--config", "/etc/telegraf/telegraf.d/asf.toml"]
     environment:
       PG_PASSWORD_FILE: /run/secrets/pg_password
+      DOCKER_API_VERSION: "1.44"
       HOST_PROC: /rootfs/proc
       HOST_SYS: /rootfs/sys
       HOST_ETC: /rootfs/etc
Index: /branches/amp_4_0/platform/tools/scripts/configure_telegraf_timescale.sh
===================================================================
--- /branches/amp_4_0/platform/tools/scripts/configure_telegraf_timescale.sh	(revision 2948)
+++ /branches/amp_4_0/platform/tools/scripts/configure_telegraf_timescale.sh	(working copy)
@@ -75,6 +75,7 @@
 [[outputs.postgresql]]
   connection = "host=${PG_HOST} port=${PG_PORT} user=${PG_USER} password=${PG_PASSWORD} dbname=${PG_DB} sslmode=disable"
   schema     = "public"
+  method     = "insert"
   # Expect tables/columns to exist (no auto-DDL)
 
 # === Optional local host metrics ===
@@ -167,30 +168,25 @@
         return metric
 
     # Fields that must remain as strings
-    string_fields = ["link_resp_time", "link_up_time", "link_down_time",
-                     "link_bandwid_in", "link_bandwid_out", "link_thresh",
-                     "link_status", "link_down_event", "link_name",
-                     "link_gateway", "host"]
+    string_fields = ["link_resp_time", "link_status", "link_down_event", 
+                     "link_name", "link_gateway", "host"]
 
     # Fields that must be integers
     int_fields = ["link_index", "link_hits", "link_conn", "link_usage",
-                  "link_down_count"]
+                  "link_down_count", "link_up_time", "link_down_time",
+                  "link_bandwid_in", "link_bandwid_out", "link_thresh"]
 
     # Convert string fields safely
     for f in string_fields:
-        if f in metric.fields:
-            if metric.fields[f] == None:
-                metric.fields[f] = ""
-            else:
-                metric.fields[f] = str(metric.fields[f])
+        if f in metric.fields and metric.fields[f] != None:
+            metric.fields[f] = str(metric.fields[f])
 
     # Convert int fields safely
     for f in int_fields:
         if f in metric.fields:
             val = metric.fields[f]
-            # Convert numeric strings to int, keep actual int, else 0
             if val == None:
-                metric.fields[f] = 0
+                continue
             elif type(val) == int:
                 metric.fields[f] = val
             elif type(val) == float:
@@ -204,7 +200,10 @@
                 if digits == "":
                     metric.fields[f] = 0
                 else:
-                    metric.fields[f] = int(float(digits))
+                    try:
+                        metric.fields[f] = int(float(digits))
+                    except:
+                        metric.fields[f] = 0
             else:
                 metric.fields[f] = 0
 
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.html	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.html	(working copy)
@@ -9,9 +9,6 @@
          marginTop: (showNavigation$ | async) ? '50px' : '0px'
        }">
     <div class="main-content-inner">
-      @if (loading$ | async) {
-      <app-loading></app-loading>
-      }
       <router-outlet></router-outlet>
     </div>
   </div>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.routes.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.routes.ts	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.routes.ts	(working copy)
@@ -212,7 +212,7 @@
         ]
       },
       {
-        path: 'monitoring',
+        path: 'monitor',
         data: { roles: ['super_admin', 'device_admin', 'common_admin'], },
         children: [
           {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.ts	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.ts	(working copy)
@@ -8,12 +8,11 @@
 import { AsyncPipe, NgStyle } from '@angular/common';
 import { LayoutService } from './services/layout.service';
 import { LoadingService } from './services/loading.service';
-import { Loading } from './components/common/loading/loading';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, Navigation, FontAwesomeModule, NgStyle, AsyncPipe, Loading],
+  imports: [RouterOutlet, Navigation, FontAwesomeModule, NgStyle, AsyncPipe],
   templateUrl: './app.html',
   styleUrl: './app.scss'
 })
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/loading/loading.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/loading/loading.html	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/loading/loading.html	(working copy)
@@ -1,7 +1,7 @@
-<div class="loading-overlay">
+<div class="spinner-container">
   <div class="sleek-spinner">
     <div class="ring"></div>
     <div class="ring"></div>
     <div class="ring"></div>
   </div>
-</div>
+</div>
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/loading/loading.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/loading/loading.scss	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/loading/loading.scss	(working copy)
@@ -1,48 +1,50 @@
-.loading-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.7);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
+/* The component is rendered inside a CDK overlay pane — just show the spinner */
+.spinner-container {
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   width: 100px;
+   height: 100px;
 }
+
 .sleek-spinner {
-  position: relative;
-  width: 60px;
-  height: 60px;
+   position: relative;
+   width: 60px;
+   height: 60px;
 }
+
 .ring {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border: 3px solid transparent;
-  border-top-color: #00ddeb;
-  border-radius: 50%;
-  animation: spin 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
+   position: absolute;
+   width: 100%;
+   height: 100%;
+   border: 3px solid transparent;
+   border-top-color: #00ddeb;
+   border-radius: 50%;
+   animation: component-spin 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
 }
+
 .ring:nth-child(2) {
-  animation-delay: 0.15s;
-  border-top-color: #ff4081;
+   animation-delay: 0.15s;
+   border-top-color: #ff4081;
 }
+
 .ring:nth-child(3) {
-  animation-delay: 0.3s;
-  border-top-color: #7c4dff;
+   animation-delay: 0.3s;
+   border-top-color: #7c4dff;
 }
-@keyframes spin {
-  0% {
-    transform: rotate(0deg) scale(1);
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.6;
-  }
-  100% {
-    transform: rotate(360deg) scale(0.8);
-    opacity: 0.4;
-  }
-}
 
+@keyframes component-spin {
+   0% {
+      transform: rotate(0deg) scale(1);
+      opacity: 1;
+   }
+
+   50% {
+      opacity: 0.6;
+   }
+
+   100% {
+      transform: rotate(360deg) scale(0.8);
+      opacity: 0.4;
+   }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.html	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.html	(working copy)
@@ -48,7 +48,7 @@
       <div class="dialog-actions">
         <div class="current-range-preview">
           <span class="label">Selection:</span>
-          <span class="value">{{ customFrom }} - {{ customTo }}</span>
+          <span class="value">{{ getFormattedDate(customFrom) }} - {{ getFormattedDate(customTo) }}</span>
         </div>
         <button mat-flat-button color="primary" (click)="applyCustomRange()">Apply</button>
       </div>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.scss	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.scss	(working copy)
@@ -48,20 +48,12 @@
 
       .range-btn {
         text-align: left;
-        padding: 10px 16px;
-        border-radius: 0;
+        padding: 0 16px;
         font-weight: 500;
         color: #475569;
         font-size: 13px;
-        line-height: normal;
         justify-content: flex-start;
-        min-width: 0;
-        height: auto; // Allow height to fit content
-
-        &:hover {
-          background: #f1f5f9;
-          color: #0f172a;
-        }
+        height: 36px;
       }
     }
   }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.ts	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.ts	(working copy)
@@ -82,6 +82,52 @@
     this.refreshInterval = this.data.initialInterval || 10;
   }
 
+  getFormattedDate(val: any): string {
+    if (!val) return '';
+    if (typeof val === 'string' && val.startsWith('now')) {
+      const range = this.getFriendlyTimeRange(val);
+      return range ? range : val;
+    }
+    try {
+      const date = new Date(val);
+      if (!isNaN(date.getTime())) {
+        const year = date.getFullYear();
+        const month = (date.getMonth() + 1).toString().padStart(2, '0');
+        const day = date.getDate().toString().padStart(2, '0');
+        const hours = date.getHours().toString().padStart(2, '0');
+        const minutes = date.getMinutes().toString().padStart(2, '0');
+        const seconds = date.getSeconds().toString().padStart(2, '0');
+        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+      }
+    } catch (e) {
+      console.error('Error formatting date:', e);
+    }
+    return val;
+  }
+
+  getFriendlyTimeRange(val: string): string | null {
+    const quickRanges: any = {
+      'now-10m': 'Last 10m',
+      'now-15m': 'Last 15m',
+      'now-30m': 'Last 30m',
+      'now-1h': 'Last 1h',
+      'now-3h': 'Last 3h',
+      'now-6h': 'Last 6h',
+      'now-12h': 'Last 12h',
+      'now-24h': 'Last 24h',
+      'now-2d': 'Last 2d',
+      'now-7d': 'Last 7d',
+      'now-30d': 'Last 30d',
+      'now-90d': 'Last 90d',
+      'now-6M': 'Last 6M',
+      'now-1y': 'Last 1y',
+      'now-2y': 'Last 2y',
+      'now-5y': 'Last 5y',
+      'now': 'Now'
+    };
+    return quickRanges[val] || null;
+  }
+
   applyCustomRange(): void {
     const timeRange: TimeRange = {
       from: this.customFrom,
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 2948)
+++ /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)
@@ -1090,10 +1090,17 @@
           name: names[i],
           inbound: inbound[i],
           outbound: outbound[i],
-          total: inbound[i] + outbound[i]
+          total: (inbound[i] || 0) + (outbound[i] || 0)
         });
       }
     }
+    // Filter out noise (anything less than 0.1 bps is effectively 0)
+    // Actually, keep 0s for the chart categories but ensure they don't render bars
+    networkData = networkData.map(item => ({
+      ...item,
+      inbound: item.inbound < 0.1 ? 0 : item.inbound,
+      outbound: item.outbound < 0.1 ? 0 : item.outbound
+    }));
     // Sort by total throughput
     networkData.sort((a, b) => b.total - a.total);
     const top5Network = networkData.slice(0, 5);
@@ -1287,14 +1294,16 @@
           name: 'Inbound',
           type: 'bar',
           data: data.map(item => item.inbound),
+          barWidth: '35%',
+          barGap: '15%',
           itemStyle: {
             color: {
               type: 'linear',
               x: 0, y: 0, x2: 1, y2: 0,
               colorStops: [{ offset: 0, color: '#34e89e' }, { offset: 1, color: '#0f3443' }]
-            }
+            },
+            borderRadius: [0, 20, 20, 0]
           },
-          barWidth: '40%',
           animationDuration: 1500,
           animationEasing: 'cubicOut'
         },
@@ -1302,6 +1311,7 @@
           name: 'Outbound',
           type: 'bar',
           data: data.map(item => item.outbound),
+          barWidth: '35%',
           itemStyle: {
             color: {
               type: 'linear',
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 2948)
+++ /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,10 @@
 <div class="device-details-container">
+  @if (!deviceData && deviceName) {
+  <div class="loading-overlay">
+    <mat-spinner diameter="40"></mat-spinner>
+    <p>Loading device details...</p>
+  </div>
+  }
   <div class="header-actions">
     <button mat-button class="back-button" (click)="backToManagedDevices()">
       <fa-icon [icon]="['far', 'circle-left']"></fa-icon>
@@ -136,7 +142,7 @@
                   }
                 </mat-form-field>
 
-                @if (!['AG', 'vxAG'].includes(deviceSettingsForm.get('deviceType')?.value)) {
+                @if (!['AG', 'vxAG', 'vAG'].includes(deviceData?.type)) {
                 <mat-form-field appearance="outline">
                   <mat-label>WebUI Username</mat-label>
                   <input id="webuiUsername" formControlName="webuiUsername" matInput placeholder="WebUI Username" />
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 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-details/device-details.scss	(working copy)
@@ -1,10 +1,31 @@
 .device-details-container {
-  padding: 12px 5px 24px 5px; // Added 5px side padding
+  padding: 12px 5px 24px 5px;
   max-width: 100%;
   margin: 0;
   box-sizing: border-box;
+  position: relative; // For loading overlay
 }
 
+.loading-overlay {
+  position: absolute;
+  top: 100px;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  background: rgba(var(--surface-bg-rgb), 0.8);
+  padding: 40px;
+
+  p {
+    margin-top: 16px;
+    color: var(--text-secondary);
+    font-weight: 500;
+  }
+}
+
 .header-actions {
   display: flex;
   align-items: center;
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-details/device-details.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-details/device-details.ts	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-details/device-details.ts	(working copy)
@@ -58,22 +58,54 @@
 
   ngOnInit(): void {
     this.deviceName = this.route.snapshot.paramMap.get('deviceName');
-    this.deviceData = history.state.deviceData;
+    const stateDeviceData = history.state.deviceData;
     this.groups = history.state.groups;
-    let licenseData: any = {};
-    let systemData: any = {};
 
-    if (this.deviceData) {
-      if (typeof this.deviceData === 'string') {
-        try {
-          this.deviceData = JSON.parse(this.deviceData);
-        } catch (error) {
-          console.error('Error parsing deviceData:', error);
-          this.deviceData = null;
-        }
-      }
+    if (stateDeviceData) {
+      this.deviceData = typeof stateDeviceData === 'string' ? this.tryParseJson(stateDeviceData) : stateDeviceData;
+      this.initializeDeviceDetails();
+    } else if (this.deviceName) {
+      this.loadDeviceDataByName(this.deviceName);
     }
+  }
 
+  private tryParseJson(data: string): any {
+    try {
+      return JSON.parse(data);
+    } catch (error) {
+      console.error('Error parsing deviceData:', error);
+      return null;
+    }
+  }
+
+  private loadDeviceDataByName(name: string): void {
+    this.deviceFacade.getDeviceGroups()
+      .pipe(take(1))
+      .subscribe({
+        next: (processedData: any) => {
+          this.groups = processedData.groups;
+          const foundDevice = processedData.devices.find((d: any) => d.name === name);
+          if (foundDevice) {
+            this.deviceData = foundDevice;
+            this.initializeDeviceDetails();
+          } else {
+            this.coreUiFacade.notifyError('Device not found.');
+            this.backToManagedDevices();
+          }
+        },
+        error: (error) => {
+          console.error('Error loading devices:', error);
+          this.coreUiFacade.notifyError('Failed to load device information.');
+        }
+      });
+  }
+
+  private initializeDeviceDetails(): void {
+    if (!this.deviceData) return;
+
+    let licenseData: any = {};
+    let systemData: any = {};
+
     Object.keys(this.deviceData).forEach(key => {
       const value = this.deviceData[key as keyof typeof this.deviceData];
       if (['license_date', 'license_feature', 'license_key', 'license_limit'].includes(key)) {
@@ -82,6 +114,7 @@
         systemData[key] = value;
       }
     });
+
     this.isMonitorEnabled = this.deviceData?.snmp_general?.snmp_enable;
     this.licenseDataSource = this.utils.processConfigData(licenseData);
     this.systemDataSource = this.utils.processConfigData(systemData);
@@ -98,8 +131,13 @@
       groupName: this.deviceData['device_group'],
       enablePassword: this.deviceData['enable_password'],
       enableLog: this.deviceData['log_enable'] == 1,
-    })
+    });
 
+    this.updateFormValidators();
+    this.getDeviceConfiguration(this.deviceData?.name);
+  }
+
+  private updateFormValidators(): void {
     const initialDeviceType = this.deviceData?.type;
     const webuiUsernameControl = this.deviceSettingsForm.get('webuiUsername');
     const webuiPasswordControl = this.deviceSettingsForm.get('webuiPassword');
@@ -115,8 +153,6 @@
       webuiUsernameControl.updateValueAndValidity();
       webuiPasswordControl.updateValueAndValidity();
     }
-
-    this.getDeviceConfiguration(this.deviceData?.name);
   }
 
   backToManagedDevices(): void {
@@ -166,7 +202,7 @@
   }
 
   downloadConfigFile(): void {
-    const filename = `${this.deviceData.name.toLocaleLowerCase()}_config.txt`;
+    const filename = `${this.deviceData?.name?.toLocaleLowerCase()}_config.txt` || 'device_config.txt';
     const blob = new Blob([this.deviceConfig], { type: 'text/plain;charset=utf-8' });
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.html	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.html	(working copy)
@@ -11,7 +11,8 @@
     <div class="time-filter">
       <a class="filter-link" (click)="openTimeFilterDialog()">
         <fa-icon [icon]="['far', 'clock']"></fa-icon>
-        {{ currentFrom }} to {{ currentTo }} ({{ currentInterval }}s)
+        <span class="range-text">{{ getFormattedDate(currentFrom) }} to {{ getFormattedDate(currentTo) }}</span>
+        <span class="interval-badge">{{ currentInterval }}s</span>
       </a>
     </div>
   </div>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.scss	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.scss	(working copy)
@@ -46,18 +46,24 @@
       height: 32px;
 
       h1 {
-        font-size: 15px;
-        font-weight: 500;
+        font-family: 'Roboto', sans-serif;
+        font-size: 16px;
+        font-weight: 600;
         margin: 0;
         color: var(--text-primary);
         white-space: nowrap;
+        letter-spacing: -0.01em;
       }
 
       .device-ip {
+        font-family: 'Roboto', sans-serif;
         font-size: 13px;
         color: var(--text-secondary);
         font-weight: 400;
-        margin-left: 4px;
+        margin-left: 8px;
+        background: rgba(0, 0, 0, 0.04);
+        padding: 2px 8px;
+        border-radius: 12px;
       }
     }
 
@@ -70,21 +76,49 @@
       .filter-link {
         display: flex;
         align-items: center;
-        gap: 6px;
-        padding: 2px 8px;
+        gap: 8px;
+        padding: 0 14px;
         background-color: var(--surface-bg);
         border: 1px solid var(--border-color);
-        border-radius: 4px;
+        border-radius: 6px;
         color: var(--text-primary);
-        font-size: 11px;
+        font-size: 11.5px;
+        font-weight: 500;
         cursor: pointer;
         text-decoration: none;
-        height: 24px;
+        height: 28px;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 
+        .range-text {
+          font-weight: 500;
+        }
+
+        .interval-badge {
+          background-color: #e3f2fd;
+          color: #1976d2;
+          padding: 1px 6px;
+          border-radius: 10px;
+          font-weight: 600;
+          font-size: 10px;
+          margin-left: 4px;
+        }
+
+        fa-icon {
+          color: var(--primary-color);
+          font-size: 12px;
+        }
+
         &:hover {
           background-color: var(--hover-bg);
-          color: #1976d2;
+          border-color: var(--primary-color);
+          transform: translateY(-1px);
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
         }
+
+        &:active {
+          transform: translateY(0);
+        }
       }
     }
   }
@@ -156,10 +190,12 @@
     margin-bottom: 8px;
 
     h3 {
+      font-family: 'Roboto', sans-serif;
       font-size: 14px;
       font-weight: 600;
       color: var(--text-primary);
       margin: 0;
+      letter-spacing: -0.01em;
     }
 
     .unit {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.ts	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.ts	(working copy)
@@ -26,6 +26,7 @@
 
     deviceName: any = '';
     deviceIp: any = '';
+    deviceType: any = '';
 
     selectedTabIndex: number = 0;
     private tabNames: string[] = [
@@ -68,6 +69,14 @@
         const route = this.coreUiFacade.activeRoute;
         this.deviceName = route.snapshot.paramMap.get('deviceName');
         this.deviceIp = route.snapshot.paramMap.get('deviceIp');
+        this.deviceType = history.state.deviceType;
+
+        if (!this.deviceType) {
+            this.fetchDeviceTypeAndMetrics();
+        } else {
+            this.getBasicMonitoringMetrics();
+        }
+
         // setTimeout(()=>{
         //   interval(this.currentInterval * 1000)
         //     .pipe(
@@ -82,7 +91,7 @@
     }
 
     navigateMonitoringDevices() {
-        this.coreUiFacade.navigate(['/monitoring/resources'], { state: {} });
+        this.coreUiFacade.navigate(['/monitor/resources'], { state: {} });
     }
 
     onTabChange($event: any) {
@@ -91,12 +100,35 @@
         } else if ($event.index === 1) {
             this.getAuditMonitoringMetrics();
         }
+    }
+
+    fetchDeviceTypeAndMetrics() {
+        this.deviceFacade.getDeviceGroups().pipe(take(1)).subscribe({
+            next: (data: any) => {
+                const device = data?.devices?.find((d: any) => d.ip === this.deviceIp);
+                if (device) {
+                    this.deviceType = device.type;
+                    this.getBasicMonitoringMetrics();
+                } else {
+                    // Fallback or error handling if device not found
+                    console.error('Device not found for metrics');
+                    this.deviceType = 'vapv'; // Default
+                    this.getBasicMonitoringMetrics();
+                }
+            },
+            error: (err) => {
+                console.error('Error fetching device info:', err);
+                this.deviceType = 'vapv'; // Default
+                this.getBasicMonitoringMetrics();
+            }
+        });
     }
 
     getBasicMonitoringMetrics() {
         this.getDeviceMonitoringMetrics({
             "metric_name": "cpu_usage",
             "agent_host": this.deviceIp,
+            "device_type": this.deviceType,
             "interval": "10s",
             "from": this.currentFrom,
             "to": this.currentTo,
@@ -105,6 +137,7 @@
         this.getDeviceMonitoringMetrics({
             "metric_name": "memory_usage",
             "agent_host": this.deviceIp,
+            "device_type": this.deviceType,
             "interval": "10s",
             "from": this.currentFrom,
             "to": this.currentTo,
@@ -113,6 +146,7 @@
         this.getDeviceMonitoringMetrics({
             "metric_name": "disk_usage",
             "agent_host": this.deviceIp,
+            "device_type": this.deviceType,
             "interval": "10s",
             "from": this.currentFrom,
             "to": this.currentTo,
@@ -121,6 +155,7 @@
         this.getDeviceMonitoringMetrics({
             "metric_name": "network_throughput",
             "agent_host": this.deviceIp,
+            "device_type": this.deviceType,
             "interval": "10s",
             "from": this.currentFrom,
             "to": this.currentTo,
@@ -129,6 +164,7 @@
         this.getDeviceMonitoringMetrics({
             "metric_name": "ssl_connections",
             "agent_host": this.deviceIp,
+            "device_type": this.deviceType,
             "interval": "10s",
             "from": this.currentFrom,
             "to": this.currentTo,
@@ -137,6 +173,7 @@
         this.getDeviceMonitoringMetrics({
             "metric_name": "connections",
             "agent_host": this.deviceIp,
+            "device_type": this.deviceType,
             "interval": "10s",
             "from": this.currentFrom,
             "to": this.currentTo,
@@ -145,6 +182,7 @@
         this.getDeviceMonitoringMetrics({
             "metric_name": "requests",
             "agent_host": this.deviceIp,
+            "device_type": this.deviceType,
             "interval": "10s",
             "from": this.currentFrom,
             "to": this.currentTo,
@@ -153,6 +191,7 @@
         this.getDeviceMonitoringMetrics({
             "metric_name": "ssl_core_utilization",
             "agent_host": this.deviceIp,
+            "device_type": this.deviceType,
             "interval": "10s",
             "from": this.currentFrom,
             "to": this.currentTo,
@@ -163,7 +202,9 @@
         this.deviceFacade.getDeviceMonitoringMetrics(payload).pipe(take(1)).subscribe({
             next: (result: any) => {
                 if (payload?.metric_name === 'cpu_usage') {
+                    console.log(result?.data);
                     const cpu_data_formatted: any = result?.data.map((d: any) => [d.ts, d.cpu]);
+                    console.log(cpu_data_formatted);
                     this.cpuChartOptions = cpu_data_formatted.length ? this.getAreaChartOptions('CPU Usage', cpu_data_formatted, '#2196f3', '#e3f2fd', '%') : this.getNoDataChartOptions();
                 } else if (payload?.metric_name === 'memory_usage') {
                     const memory_data_formatted: any = result?.data.map((d: any) => [d.ts, d.memory_usage]);
@@ -242,7 +283,8 @@
                         style: {
                             text: 'No Data Available',
                             fontSize: 14,
-                            fill: '#bdbdbd'
+                            fill: '#bdbdbd',
+                            fontFamily: 'Roboto'
                         }
                     }
                 ]
@@ -271,7 +313,7 @@
                 backgroundColor: 'rgba(255, 255, 255, 0.95)',
                 borderColor: '#eee',
                 borderWidth: 1,
-                textStyle: { color: '#333' },
+                textStyle: { color: '#333', fontFamily: 'Roboto' },
                 padding: [8, 12]
             },
             grid: {
@@ -287,7 +329,7 @@
                 axisLine: { show: false },
                 axisTick: { show: false },
                 splitLine: { show: false },
-                axisLabel: { color: this.getTextColor(), fontSize: 11 }
+                axisLabel: { color: this.getTextColor(), fontSize: 11, fontFamily: 'Roboto' }
             },
             yAxis: {
                 type: 'value',
@@ -297,7 +339,7 @@
                         color: '#f0f0f0'
                     }
                 },
-                axisLabel: { color: this.getTextColor(), fontSize: 11 }
+                axisLabel: { color: this.getTextColor(), fontSize: 11, fontFamily: 'Roboto' }
             },
             series: [
                 {
@@ -368,7 +410,7 @@
                 backgroundColor: 'rgba(255, 255, 255, 0.95)',
                 borderColor: '#eee',
                 borderWidth: 1,
-                textStyle: { color: '#333' },
+                textStyle: { color: '#333', fontFamily: 'Roboto' },
                 padding: [8, 12]
             },
             grid: {
@@ -385,7 +427,7 @@
                 itemWidth: 10,
                 itemHeight: 10,
                 icon: 'circle',
-                textStyle: { fontSize: 11, color: this.getTextColor() }
+                textStyle: { fontSize: 11, color: this.getTextColor(), fontFamily: 'Roboto' }
             },
             xAxis: {
                 type: 'time',
@@ -393,7 +435,7 @@
                 axisLine: { show: false },
                 axisTick: { show: false },
                 splitLine: { show: false },
-                axisLabel: { color: this.getTextColor(), fontSize: 11 }
+                axisLabel: { color: this.getTextColor(), fontSize: 11, fontFamily: 'Roboto' }
             },
             yAxis: {
                 type: 'value',
@@ -403,7 +445,7 @@
                         color: '#f0f0f0'
                     }
                 },
-                axisLabel: { color: this.getTextColor(), fontSize: 11 }
+                axisLabel: { color: this.getTextColor(), fontSize: 11, fontFamily: 'Roboto' }
             },
             series: series
         };
@@ -618,8 +660,8 @@
 
         (dialogRef.componentInstance as TimeFilter).applyRange.subscribe((result: TimeRange) => {
             if (result) {
-                this.currentFrom = result.from;
-                this.currentTo = result.to;
+                this.currentFrom = result.from instanceof Date ? result.from.toISOString() : result.from;
+                this.currentTo = result.to instanceof Date ? result.to.toISOString() : result.to;
                 this.currentInterval = result.interval || 10;
                 this.getBasicMonitoringMetrics()
             }
@@ -627,6 +669,50 @@
 
         dialogRef.afterClosed().subscribe(() => {
         });
+    }
+
+    getFormattedDate(val: any): string {
+        if (!val) return '';
+        if (typeof val === 'string' && val.startsWith('now')) {
+            const range = this.getFriendlyTimeRange(val);
+            return range ? range : val;
+        }
+        try {
+            const date = new Date(val);
+            if (!isNaN(date.getTime())) {
+                const year = date.getFullYear();
+                const month = (date.getMonth() + 1).toString().padStart(2, '0');
+                const day = date.getDate().toString().padStart(2, '0');
+                const hours = date.getHours().toString().padStart(2, '0');
+                const minutes = date.getMinutes().toString().padStart(2, '0');
+                const seconds = date.getSeconds().toString().padStart(2, '0');
+                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+            }
+        } catch (e) {
+            console.error('Error formatting date:', e);
+        }
+        return val;
     }
+
+    getFriendlyTimeRange(val: string): string | null {
+        const quickRanges: any = {
+            'now-10m': 'Last 10m',
+            'now-15m': 'Last 15m',
+            'now-30m': 'Last 30m',
+            'now-1h': 'Last 1h',
+            'now-3h': 'Last 3h',
+            'now-6h': 'Last 6h',
+            'now-12h': 'Last 12h',
+            'now-24h': 'Last 24h',
+            'now-2d': 'Last 2d',
+            'now-7d': 'Last 7d',
+            'now-30d': 'Last 30d',
+            'now-90d': 'Last 90d',
+            'now-6M': 'Last 6M',
+            'now-1y': 'Last 1y',
+            'now': 'Now'
+        };
+        return quickRanges[val] || null;
+    }
 }
 
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-devices/resource-monitoring-devices.spec.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-devices/resource-monitoring-devices.spec.ts	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-devices/resource-monitoring-devices.spec.ts	(working copy)
@@ -108,7 +108,7 @@
     const mockDevice = { name: 'D1', ip: '1.1.1.1' };
     component.goToDetails(mockDevice);
     expect(coreUiFacade.navigate).toHaveBeenCalledWith(
-      ['/monitoring/resources/devices', 'D1', '1.1.1.1'],
+      ['/monitor/resources/devices', 'D1', '1.1.1.1'],
       expect.any(Object)
     );
   });
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 2948)
+++ /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)
@@ -44,8 +44,8 @@
       .subscribe({
         next: (data: any) => {
           this.groups = data.groupNames;
-          data.devices.forEach((device: any) => {
-            this.deviceMetrics.forEach((d: any) => {
+          data?.devices.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;
@@ -72,7 +72,7 @@
       "to": "now"
     }).pipe(take(1)).subscribe({
       next: (result: any) => {
-        this.deviceMetrics = result?.device_stats;
+        this.deviceMetrics = result?.data;
         this.getDeviceGroups();
       },
       error: (error: any) => {
@@ -129,7 +129,8 @@
 
 
   goToDetails(_device: any) {
-    this.coreUiFacade.navigate(['/monitoring/resources/devices', _device.name, _device?.ip], { state: {} });
+    console.log(_device.name, _device?.ip);
+    this.coreUiFacade.navigate(['/monitor/resources/devices', _device.name, _device?.ip], { state: { deviceType: _device?.type } });
   }
 
   dialog = inject(MatDialog);
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb-details/resource-monitoring-llb-details.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb-details/resource-monitoring-llb-details.html	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb-details/resource-monitoring-llb-details.html	(working copy)
@@ -1,58 +1,63 @@
-<mat-card class="page-card-1" appearance="filled">
+<div class="llb-details-container">
+  <!-- Header -->
   <div class="details-header">
     <a class="back-link" (click)="navigateMonitoringDevices()">
       <fa-icon [icon]="['fas', 'arrow-left']"></fa-icon>
       Back
     </a>
     <div class="header-title">
-      <h1>Monitoring Devices - {{ linkName }} <span class="device-ip">(IP : {{ deviceIp }})</span></h1>
+      <h1>{{ linkName }} <span class="device-ip">(IP : {{ deviceIp }})</span></h1>
     </div>
     <div class="time-filter">
       <a class="filter-link" (click)="openTimeFilterDialog()">
         <fa-icon [icon]="['far', 'clock']"></fa-icon>
-        {{ currentFrom }} to {{ currentTo }} ({{ currentInterval }}s)
+        <span class="range-text">{{ getFormattedDate(currentFrom) }} to {{ getFormattedDate(currentTo) }}</span>
+        <span class="interval-badge">{{ currentInterval }}s</span>
       </a>
     </div>
   </div>
-</mat-card>
-<mat-tab-group mat-stretch-tabs="false" animationDuration="0ms" [selectedIndex]="selectedTabIndex">
-  <mat-tab label="Basic Monitoring">
-    <ng-template matTabContent>
-      <div class="tab-content">
-        <div class="charts-grid">
-          <!-- Network Throughput -->
-          <div class="chart-card">
-            <div class="chart-header">
-              <h3>Network Throughput</h3>
+
+  <!-- Content -->
+  <div class="details-content">
+    <mat-tab-group mat-stretch-tabs="false" animationDuration="0ms" [selectedIndex]="selectedTabIndex"
+      class="custom-tab-group">
+      <mat-tab label="Basic Monitoring">
+        <ng-template matTabContent>
+          <div class="charts-grid">
+            <!-- Network Throughput -->
+            <div class="chart-card">
+              <div class="chart-header">
+                <h3>Network Throughput</h3>
+              </div>
+              <div echarts [options]="throughputChartOptions" class="chart-instance"></div>
             </div>
-            <div echarts [options]="throughputChartOptions" class="chart-instance"></div>
-          </div>
 
-          <!-- Bandwidth Usage -->
-          <div class="chart-card">
-            <div class="chart-header">
-              <h3>Bandwidth Usage</h3>
+            <!-- Bandwidth Usage -->
+            <div class="chart-card">
+              <div class="chart-header">
+                <h3>Bandwidth Usage</h3>
+              </div>
+              <div echarts [options]="bandwidthChartOptions" class="chart-instance"></div>
             </div>
-            <div echarts [options]="bandwidthChartOptions" class="chart-instance"></div>
-          </div>
 
-          <!-- Connections -->
-          <div class="chart-card">
-            <div class="chart-header">
-              <h3>Connections</h3>
+            <!-- Connections -->
+            <div class="chart-card">
+              <div class="chart-header">
+                <h3>Connections</h3>
+              </div>
+              <div echarts [options]="connectionsChartOptions" class="chart-instance"></div>
             </div>
-            <div echarts [options]="connectionsChartOptions" class="chart-instance"></div>
-          </div>
 
-          <!-- Hits -->
-          <div class="chart-card">
-            <div class="chart-header">
-              <h3>Hits</h3>
+            <!-- Hits -->
+            <div class="chart-card">
+              <div class="chart-header">
+                <h3>Hits</h3>
+              </div>
+              <div echarts [options]="hitsChartOptions" class="chart-instance"></div>
             </div>
-            <div echarts [options]="hitsChartOptions" class="chart-instance"></div>
           </div>
-        </div>
-      </div>
-    </ng-template>
-  </mat-tab>
-</mat-tab-group>
\ No newline at end of file
+        </ng-template>
+      </mat-tab>
+    </mat-tab-group>
+  </div>
+</div>
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb-details/resource-monitoring-llb-details.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb-details/resource-monitoring-llb-details.scss	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb-details/resource-monitoring-llb-details.scss	(working copy)
@@ -1,310 +1,216 @@
-.page-card-1 {
-  width: 100%;
-  border-radius: 0;
-  background-color: inherit;
-  font-size: 14px !important;
+.llb-details-container {
+  padding: 8px;
+  background-color: var(--app-bg);
+  height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+  font-family: 'Roboto', sans-serif;
+  display: flex;
+  flex-direction: column;
 
-  mat-card-header {
-    color: #1170cf;
-  }
-}
-
-.details-header {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  grid-template-rows: auto auto;
-  align-items: center;
-  padding: 0 4px;
-  /* Minimal vertical padding */
-  gap: 0px;
-  /* Minimal gap */
-  margin-bottom: 4px;
-  border-bottom: 1px solid var(--border-color);
-
-  .back-link {
-    grid-column: 1;
-    grid-row: 1;
-    justify-self: start;
-    display: flex;
+  .details-header {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    grid-template-rows: auto auto;
     align-items: center;
-    gap: 6px;
-    color: var(--text-secondary);
-    text-decoration: none;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    height: 32px;
-    /* Fixed height for consistency */
-
-    &:hover {
-      color: #1976d2;
-    }
-  }
-
-  .header-title {
-    grid-column: 2;
-    grid-row: 1;
-    justify-self: center;
-    display: flex;
-    align-items: center;
-    height: 32px;
-    /* Match back link height */
-
-    h1 {
-      font-size: 15px;
-      /* Slightly reduced */
-      font-weight: 500;
-      margin: 0;
-      color: var(--text-primary);
-      white-space: nowrap;
-    }
-
-    .device-ip {
-      font-size: 13px;
-      color: var(--text-secondary);
-      font-weight: 400;
-      margin-left: 4px;
-    }
-  }
-
-  .time-filter {
-    grid-column: 3;
-    grid-row: 2;
-    justify-self: end;
+    padding: 0 4px;
+    gap: 0px;
     margin-bottom: 4px;
-    /* Slight buffer from bottom border */
+    border-bottom: 1px solid var(--border-color);
 
-    .filter-link {
+    .back-link {
+      grid-column: 1;
+      grid-row: 1;
+      justify-self: start;
       display: flex;
       align-items: center;
       gap: 6px;
-      padding: 2px 8px;
-      padding: 2px 8px;
-      /* Compact padding */
-      background-color: var(--surface-bg);
-      border: 1px solid var(--border-color);
-      border-radius: 4px;
-      color: var(--text-primary);
-      font-size: 11px;
-      cursor: pointer;
+      color: var(--text-secondary);
       text-decoration: none;
-      height: 24px;
-      /* Fixed compact height */
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      height: 32px;
 
       &:hover {
-        background-color: var(--hover-bg);
         color: #1976d2;
       }
     }
-  }
-}
 
-.button-container.time-filter {
-  margin: 5px 0;
-  font-size: 12px;
-}
+    .header-title {
+      grid-column: 2;
+      grid-row: 1;
+      justify-self: center;
+      display: flex;
+      align-items: center;
+      height: 32px;
 
-mat-card-title {
-  font-size: medium;
-}
+      h1 {
+        font-family: 'Roboto', sans-serif;
+        font-size: 16px;
+        font-weight: 600;
+        margin: 0;
+        color: var(--text-primary);
+        white-space: nowrap;
+        letter-spacing: -0.01em;
+      }
 
-.dashboard-card {
-  width: 100%;
-  height: 100%;
-  border-radius: 8px;
-  background-color: inherit;
-}
+      .device-ip {
+        font-family: 'Roboto', sans-serif;
+        font-size: 13px;
+        color: var(--text-secondary);
+        font-weight: 400;
+        margin-left: 8px;
+        background: rgba(0, 0, 0, 0.04);
+        padding: 2px 8px;
+        border-radius: 12px;
+      }
+    }
 
-.card-content-wrapper {
-  margin-top: 2px;
-  padding: 0 !important;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-}
+    .time-filter {
+      grid-column: 3;
+      grid-row: 2;
+      justify-self: end;
+      margin-bottom: 4px;
 
-.card-header-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 8px;
-  padding: 0 8px;
-}
+      .filter-link {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 0 14px;
+        background-color: var(--surface-bg);
+        border: 1px solid var(--border-color);
+        border-radius: 6px;
+        color: var(--text-primary);
+        font-size: 11.5px;
+        font-weight: 500;
+        cursor: pointer;
+        text-decoration: none;
+        height: 28px;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 
-.metric-icon {
-  color: #3f51b5;
-}
+        .range-text {
+          font-weight: 500;
+        }
 
-.card-title {
-  font-size: 18px;
-  font-weight: 500;
-  color: #555;
-  margin: 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-}
-
-.metric-value {
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
-  line-height: 1;
-}
+        .interval-badge {
+          background-color: #e3f2fd;
+          color: #1976d2;
+          padding: 1px 6px;
+          border-radius: 10px;
+          font-weight: 600;
+          font-size: 10px;
+          margin-left: 4px;
+        }
 
-.metric-label {
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
-  font-size: 0.9rem;
-  color: #777;
-  margin-top: 5px;
-}
+        fa-icon {
+          color: var(--primary-color);
+          font-size: 12px;
+        }
 
-.online-count {
-  font-size: 36px;
-  font-weight: 600;
-  color: #333;
-}
+        &:hover {
+          background-color: var(--hover-bg);
+          border-color: var(--primary-color);
+          transform: translateY(-1px);
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
+        }
 
-.total-count {
-  font-size: 18px;
-  font-weight: 500;
-  color: #888;
-  margin-left: 4px;
-}
+        &:active {
+          transform: translateY(0);
+        }
+      }
+    }
+  }
 
-.status-details {
-  font-size: 14px;
-  color: #d32f2f;
-  margin: 0;
-  font-weight: 500;
-  text-align: center;
+  .details-content {
+    flex: 1;
+    overflow-y: auto;
+    padding-right: 4px;
+  }
 }
 
-.active,
-.matrics-icon {
-  color: darkgreen;
-}
-
-/* Updated CSS for horizontal chart layout */
-.chart-flex-container {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
+.custom-tab-group {
   height: 100%;
-  width: 100%;
-  flex-grow: 1;
-}
 
-.chart-container {
-  width: 100%;
-  height: 100%;
-  max-width: none;
-  max-height: none;
-}
+  ::ng-deep {
+    .mat-mdc-tab-header {
+      --mdc-tab-indicator-active-indicator-height: 2px;
+      --mat-tab-header-pagination-icon-color: var(--text-primary);
+      height: 36px;
+    }
 
-/* Adjustments for multiple charts */
-.chart-flex-container .chart-container {
-  width: 100%;
-  height: 100%;
-}
+    .mdc-tab-indicator__content--underline {
+      border-top-width: 3px !important;
+    }
 
-mat-grid-list {
-  height: 100%;
-  width: 100%;
-}
+    .mdc-tab {
+      height: 36px !important;
+      min-height: 36px !important;
+      padding: 0 16px !important;
 
-/* The original vertical layout for metrics */
-.metrics-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 20px;
-}
+      .mdc-tab__text-label {
+        font-size: 13px !important;
+      }
+    }
 
-/* Container to center content vertically and horizontally */
-.card-body-content {
-  flex-grow: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
+    .mat-tab-header {
+      height: 36px !important;
+    }
 
-/* New CSS for the metrics block */
-.metrics-horizontal-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 20px;
-  width: 100%;
+    .mat-tab-label {
+      height: 36px !important;
+      min-height: 36px !important;
+      font-size: 13px !important;
+    }
+  }
 }
 
-.metric-item {
-  text-align: center;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.metric-value {
-  font-size: 1rem;
-  font-weight: 500;
-  color: #333;
-}
-
-/* Grid Layout for Charts */
 .charts-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr); // 3 Columns
-  gap: 20px;
-  padding: 20px;
+  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
+  gap: 8px;
+  padding: 8px 0;
 }
 
 .chart-card {
   background: var(--surface-bg);
   border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  padding: 10px;
+  border: 1px solid var(--border-color);
+  padding: 12px;
   display: flex;
   flex-direction: column;
-  height: 350px;
-  border: 1px solid var(--border-color);
+  height: 260px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
 
   .chart-header {
-    margin-bottom: 5px;
-    border-bottom: 1px solid #f0f0f0;
-    padding-bottom: 5px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
 
     h3 {
-      margin: 0;
+      font-family: 'Roboto', sans-serif;
       font-size: 14px;
       font-weight: 600;
       color: var(--text-primary);
+      margin: 0;
+      letter-spacing: -0.01em;
     }
+
+    .unit {
+      font-size: 11px;
+      color: var(--text-secondary);
+      font-weight: 500;
+      background: var(--app-bg);
+      padding: 2px 6px;
+      border-radius: 4px;
+    }
   }
 
   .chart-instance {
     flex: 1;
     width: 100%;
     height: 100%;
-    min-height: 0; // Essential for nested flex/grid scrolling
   }
-}
-
-/* Responsive Adjustments */
-@media (max-width: 1200px) {
-  .charts-grid {
-    grid-template-columns: repeat(2, 1fr); // 2 Columns on smaller screens
-  }
-}
-
-@media (max-width: 768px) {
-  .charts-grid {
-    grid-template-columns: 1fr; // 1 Column on mobile
-  }
 }
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb-details/resource-monitoring-llb-details.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb-details/resource-monitoring-llb-details.ts	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb-details/resource-monitoring-llb-details.ts	(working copy)
@@ -86,8 +86,52 @@
       });
   }
 
+  getFormattedDate(val: any): string {
+    if (!val) return '';
+    if (typeof val === 'string' && val.startsWith('now')) {
+      const range = this.getFriendlyTimeRange(val);
+      return range ? range : val;
+    }
+    try {
+      const date = new Date(val);
+      if (!isNaN(date.getTime())) {
+        const year = date.getFullYear();
+        const month = (date.getMonth() + 1).toString().padStart(2, '0');
+        const day = date.getDate().toString().padStart(2, '0');
+        const hours = date.getHours().toString().padStart(2, '0');
+        const minutes = date.getMinutes().toString().padStart(2, '0');
+        const seconds = date.getSeconds().toString().padStart(2, '0');
+        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+      }
+    } catch (e) {
+      console.error('Error formatting date:', e);
+    }
+    return val;
+  }
+
+  getFriendlyTimeRange(val: string): string | null {
+    const quickRanges: any = {
+      'now-10m': 'Last 10m',
+      'now-15m': 'Last 15m',
+      'now-30m': 'Last 30m',
+      'now-1h': 'Last 1h',
+      'now-3h': 'Last 3h',
+      'now-6h': 'Last 6h',
+      'now-12h': 'Last 12h',
+      'now-24h': 'Last 24h',
+      'now-2d': 'Last 2d',
+      'now-7d': 'Last 7d',
+      'now-30d': 'Last 30d',
+      'now-90d': 'Last 90d',
+      'now-6M': 'Last 6M',
+      'now-1y': 'Last 1y',
+      'now': 'Now'
+    };
+    return quickRanges[val] || null;
+  }
+
   navigateMonitoringDevices() {
-    this.coreUiFacade.navigate(['/monitoring/resources'], { state: {} });
+    this.coreUiFacade.navigate(['/monitor/resources'], { state: {} });
   }
 
   openTimeFilterDialog(): void {
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 2948)
+++ /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)
@@ -74,6 +74,6 @@
   }
 
   goToDetails(_link: any) {
-    this.coreUiFacade.navigate(['/monitoring/resources/llb', _link.agent_host, _link?.link_name], { state: {} });
+    this.coreUiFacade.navigate(['/monitor/resources/llb', _link.agent_host, _link?.link_name], { state: {} });
   }
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real-details/resource-monitoring-slb-real-details.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real-details/resource-monitoring-slb-real-details.html	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real-details/resource-monitoring-slb-real-details.html	(working copy)
@@ -1,67 +1,71 @@
-<mat-card class="page-card-1" appearance="filled">
+<div class="real-details-container">
+  <!-- Header -->
   <div class="details-header">
     <a class="back-link" (click)="navigateMonitoringDevices()">
       <fa-icon [icon]="['fas', 'arrow-left']"></fa-icon>
       Back
     </a>
     <div class="header-title">
-      <h1>Monitoring Devices - {{ serviceName }} <span class="device-ip">(IP : {{ deviceIp }})</span></h1>
+      <h1>{{ serviceName }} <span class="device-ip">(IP : {{ deviceIp }})</span></h1>
     </div>
     <div class="time-filter">
       <a class="filter-link" (click)="openTimeFilterDialog()">
         <fa-icon [icon]="['far', 'clock']"></fa-icon>
-        {{ currentFrom }} to {{ currentTo }} ({{ currentInterval }}s)
+        <span class="range-text">{{ getFormattedDate(currentFrom) }} to {{ getFormattedDate(currentTo) }}</span>
+        <span class="interval-badge">{{ currentInterval }}s</span>
       </a>
     </div>
   </div>
-</mat-card>
-<mat-tab-group mat-stretch-tabs="false" animationDuration="0ms" [selectedIndex]="selectedTabIndex"
-  (selectedTabChange)="onTabChange($event)">
-  <mat-tab label="Basic Monitoring">
-    <ng-template matTabContent>
-      <div class="tab-content">
-        <div class="charts-grid">
-          <!-- Network Throughput -->
-          <div class="chart-card">
-            <div class="chart-header">
-              <h3>Network Throughput (bps)</h3>
+
+  <!-- Content -->
+  <div class="details-content">
+    <mat-tab-group mat-stretch-tabs="false" animationDuration="0ms" [selectedIndex]="selectedTabIndex"
+      (selectedTabChange)="onTabChange($event)" class="custom-tab-group">
+      <mat-tab label="Basic Monitoring">
+        <ng-template matTabContent>
+          <div class="charts-grid">
+            <!-- Network Throughput -->
+            <div class="chart-card">
+              <div class="chart-header">
+                <h3>Network Throughput (bps)</h3>
+              </div>
+              <div echarts [options]="throughputChartOptions" class="chart-instance"></div>
             </div>
-            <div echarts [options]="throughputChartOptions" class="chart-instance"></div>
-          </div>
 
-          <!-- Outstanding Requests -->
-          <div class="chart-card">
-            <div class="chart-header">
-              <h3>Outstanding Requests</h3>
+            <!-- Outstanding Requests -->
+            <div class="chart-card">
+              <div class="chart-header">
+                <h3>Outstanding Requests</h3>
+              </div>
+              <div echarts [options]="outstandingRequestsChartOptions" class="chart-instance"></div>
             </div>
-            <div echarts [options]="outstandingRequestsChartOptions" class="chart-instance"></div>
-          </div>
 
-          <!-- Requests Number -->
-          <div class="chart-card">
-            <div class="chart-header">
-              <h3>Requests Number</h3>
+            <!-- Requests Number -->
+            <div class="chart-card">
+              <div class="chart-header">
+                <h3>Requests Number</h3>
+              </div>
+              <div echarts [options]="requestsChartOptions" class="chart-instance"></div>
             </div>
-            <div echarts [options]="requestsChartOptions" class="chart-instance"></div>
-          </div>
 
-          <!-- Open Connections -->
-          <div class="chart-card">
-            <div class="chart-header">
-              <h3>Open Connections</h3>
+            <!-- Open Connections -->
+            <div class="chart-card">
+              <div class="chart-header">
+                <h3>Open Connections</h3>
+              </div>
+              <div echarts [options]="openConnectionsChartOptions" class="chart-instance"></div>
             </div>
-            <div echarts [options]="openConnectionsChartOptions" class="chart-instance"></div>
-          </div>
 
-          <!-- Connections Per Second -->
-          <div class="chart-card">
-            <div class="chart-header">
-              <h3>Connections Per Second</h3>
+            <!-- Connections Per Second -->
+            <div class="chart-card">
+              <div class="chart-header">
+                <h3>Connections Per Second</h3>
+              </div>
+              <div echarts [options]="connectionChartOptions" class="chart-instance"></div>
             </div>
-            <div echarts [options]="connectionChartOptions" class="chart-instance"></div>
           </div>
-        </div>
-      </div>
-    </ng-template>
-  </mat-tab>
-</mat-tab-group>
\ No newline at end of file
+        </ng-template>
+      </mat-tab>
+    </mat-tab-group>
+  </div>
+</div>
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real-details/resource-monitoring-slb-real-details.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real-details/resource-monitoring-slb-real-details.scss	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real-details/resource-monitoring-slb-real-details.scss	(working copy)
@@ -1,310 +1,216 @@
-.page-card-1 {
-  width: 100%;
-  border-radius: 0;
-  background-color: inherit;
-  font-size: 14px !important;
+.real-details-container {
+  padding: 8px;
+  background-color: var(--app-bg);
+  height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+  font-family: 'Roboto', sans-serif;
+  display: flex;
+  flex-direction: column;
 
-  mat-card-header {
-    color: #1170cf;
-  }
-}
-
-.details-header {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  grid-template-rows: auto auto;
-  align-items: center;
-  padding: 0 4px;
-  /* Minimal vertical padding */
-  gap: 0px;
-  /* Minimal gap */
-  margin-bottom: 4px;
-  border-bottom: 1px solid var(--border-color);
-
-  .back-link {
-    grid-column: 1;
-    grid-row: 1;
-    justify-self: start;
-    display: flex;
+  .details-header {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    grid-template-rows: auto auto;
     align-items: center;
-    gap: 6px;
-    color: var(--text-secondary);
-    text-decoration: none;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    height: 32px;
-    /* Fixed height for consistency */
-
-    &:hover {
-      color: #1976d2;
-    }
-  }
-
-  .header-title {
-    grid-column: 2;
-    grid-row: 1;
-    justify-self: center;
-    display: flex;
-    align-items: center;
-    height: 32px;
-    /* Match back link height */
-
-    h1 {
-      font-size: 15px;
-      /* Slightly reduced */
-      font-weight: 500;
-      margin: 0;
-      color: var(--text-primary);
-      white-space: nowrap;
-    }
-
-    .device-ip {
-      font-size: 13px;
-      color: var(--text-secondary);
-      font-weight: 400;
-      margin-left: 4px;
-    }
-  }
-
-  .time-filter {
-    grid-column: 3;
-    grid-row: 2;
-    justify-self: end;
+    padding: 0 4px;
+    gap: 0px;
     margin-bottom: 4px;
-    /* Slight buffer from bottom border */
+    border-bottom: 1px solid var(--border-color);
 
-    .filter-link {
+    .back-link {
+      grid-column: 1;
+      grid-row: 1;
+      justify-self: start;
       display: flex;
       align-items: center;
       gap: 6px;
-      padding: 2px 8px;
-      padding: 2px 8px;
-      /* Compact padding */
-      background-color: var(--surface-bg);
-      border: 1px solid var(--border-color);
-      border-radius: 4px;
-      color: var(--text-primary);
-      font-size: 11px;
-      cursor: pointer;
+      color: var(--text-secondary);
       text-decoration: none;
-      height: 24px;
-      /* Fixed compact height */
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      height: 32px;
 
       &:hover {
-        background-color: var(--hover-bg);
         color: #1976d2;
       }
     }
-  }
-}
 
-.button-container.time-filter {
-  margin: 5px 0;
-  font-size: 12px;
-}
+    .header-title {
+      grid-column: 2;
+      grid-row: 1;
+      justify-self: center;
+      display: flex;
+      align-items: center;
+      height: 32px;
 
-mat-card-title {
-  font-size: medium;
-}
+      h1 {
+        font-family: 'Roboto', sans-serif;
+        font-size: 16px;
+        font-weight: 600;
+        margin: 0;
+        color: var(--text-primary);
+        white-space: nowrap;
+        letter-spacing: -0.01em;
+      }
 
-.dashboard-card {
-  width: 100%;
-  height: 100%;
-  border-radius: 8px;
-  background-color: inherit;
-}
+      .device-ip {
+        font-family: 'Roboto', sans-serif;
+        font-size: 13px;
+        color: var(--text-secondary);
+        font-weight: 400;
+        margin-left: 8px;
+        background: rgba(0, 0, 0, 0.04);
+        padding: 2px 8px;
+        border-radius: 12px;
+      }
+    }
 
-.card-content-wrapper {
-  margin-top: 2px;
-  padding: 0 !important;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-}
+    .time-filter {
+      grid-column: 3;
+      grid-row: 2;
+      justify-self: end;
+      margin-bottom: 4px;
 
-.card-header-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 8px;
-  padding: 0 8px;
-}
+      .filter-link {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 0 14px;
+        background-color: var(--surface-bg);
+        border: 1px solid var(--border-color);
+        border-radius: 6px;
+        color: var(--text-primary);
+        font-size: 11.5px;
+        font-weight: 500;
+        cursor: pointer;
+        text-decoration: none;
+        height: 28px;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 
-.metric-icon {
-  color: #3f51b5;
-}
+        .range-text {
+          font-weight: 500;
+        }
 
-.card-title {
-  font-size: 18px;
-  font-weight: 500;
-  color: #555;
-  margin: 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-}
-
-.metric-value {
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
-  line-height: 1;
-}
+        .interval-badge {
+          background-color: #e3f2fd;
+          color: #1976d2;
+          padding: 1px 6px;
+          border-radius: 10px;
+          font-weight: 600;
+          font-size: 10px;
+          margin-left: 4px;
+        }
 
-.metric-label {
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
-  font-size: 0.9rem;
-  color: #777;
-  margin-top: 5px;
-}
+        fa-icon {
+          color: var(--primary-color);
+          font-size: 12px;
+        }
 
-.online-count {
-  font-size: 36px;
-  font-weight: 600;
-  color: #333;
-}
+        &:hover {
+          background-color: var(--hover-bg);
+          border-color: var(--primary-color);
+          transform: translateY(-1px);
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
+        }
 
-.total-count {
-  font-size: 18px;
-  font-weight: 500;
-  color: #888;
-  margin-left: 4px;
-}
+        &:active {
+          transform: translateY(0);
+        }
+      }
+    }
+  }
 
-.status-details {
-  font-size: 14px;
-  color: #d32f2f;
-  margin: 0;
-  font-weight: 500;
-  text-align: center;
+  .details-content {
+    flex: 1;
+    overflow-y: auto;
+    padding-right: 4px;
+  }
 }
 
-.active,
-.matrics-icon {
-  color: darkgreen;
-}
-
-/* Updated CSS for horizontal chart layout */
-.chart-flex-container {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
+.custom-tab-group {
   height: 100%;
-  width: 100%;
-  flex-grow: 1;
-}
 
-.chart-container {
-  width: 100%;
-  height: 100%;
-  max-width: none;
-  max-height: none;
-}
+  ::ng-deep {
+    .mat-mdc-tab-header {
+      --mdc-tab-indicator-active-indicator-height: 2px;
+      --mat-tab-header-pagination-icon-color: var(--text-primary);
+      height: 36px;
+    }
 
-/* Adjustments for multiple charts */
-.chart-flex-container .chart-container {
-  width: 100%;
-  height: 100%;
-}
+    .mdc-tab-indicator__content--underline {
+      border-top-width: 3px !important;
+    }
 
-mat-grid-list {
-  height: 100%;
-  width: 100%;
-}
+    .mdc-tab {
+      height: 36px !important;
+      min-height: 36px !important;
+      padding: 0 16px !important;
 
-/* The original vertical layout for metrics */
-.metrics-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 20px;
-}
+      .mdc-tab__text-label {
+        font-size: 13px !important;
+      }
+    }
 
-/* Container to center content vertically and horizontally */
-.card-body-content {
-  flex-grow: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
+    .mat-tab-header {
+      height: 36px !important;
+    }
 
-/* New CSS for the metrics block */
-.metrics-horizontal-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 20px;
-  width: 100%;
+    .mat-tab-label {
+      height: 36px !important;
+      min-height: 36px !important;
+      font-size: 13px !important;
+    }
+  }
 }
 
-.metric-item {
-  text-align: center;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.metric-value {
-  font-size: 1rem;
-  font-weight: 500;
-  color: #333;
-}
-
-/* Grid Layout for Charts */
 .charts-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr); // 3 Columns
-  gap: 20px;
-  padding: 20px;
+  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
+  gap: 8px;
+  padding: 8px 0;
 }
 
 .chart-card {
   background: var(--surface-bg);
   border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  padding: 10px;
+  border: 1px solid var(--border-color);
+  padding: 12px;
   display: flex;
   flex-direction: column;
-  height: 350px;
-  border: 1px solid var(--border-color);
+  height: 260px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
 
   .chart-header {
-    margin-bottom: 5px;
-    border-bottom: 1px solid #f0f0f0;
-    padding-bottom: 5px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
 
     h3 {
-      margin: 0;
+      font-family: 'Roboto', sans-serif;
       font-size: 14px;
       font-weight: 600;
       color: var(--text-primary);
+      margin: 0;
+      letter-spacing: -0.01em;
     }
+
+    .unit {
+      font-size: 11px;
+      color: var(--text-secondary);
+      font-weight: 500;
+      background: var(--app-bg);
+      padding: 2px 6px;
+      border-radius: 4px;
+    }
   }
 
   .chart-instance {
     flex: 1;
     width: 100%;
     height: 100%;
-    min-height: 0; // Essential for nested flex/grid scrolling
   }
-}
-
-/* Responsive Adjustments */
-@media (max-width: 1200px) {
-  .charts-grid {
-    grid-template-columns: repeat(2, 1fr); // 2 Columns on smaller screens
-  }
-}
-
-@media (max-width: 768px) {
-  .charts-grid {
-    grid-template-columns: 1fr; // 1 Column on mobile
-  }
 }
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real-details/resource-monitoring-slb-real-details.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real-details/resource-monitoring-slb-real-details.ts	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real-details/resource-monitoring-slb-real-details.ts	(working copy)
@@ -73,7 +73,7 @@
   }
 
   navigateMonitoringDevices() {
-    this.coreUiFacade.navigate(['/monitoring/resources'], { state: {} });
+    this.coreUiFacade.navigate(['/monitor/resources'], { state: {} });
   }
 
   getBasicMonitoringMetrics() {
@@ -114,6 +114,50 @@
     })
   }
 
+  getFormattedDate(val: any): string {
+    if (!val) return '';
+    if (typeof val === 'string' && val.startsWith('now')) {
+      const range = this.getFriendlyTimeRange(val);
+      return range ? range : val;
+    }
+    try {
+      const date = new Date(val);
+      if (!isNaN(date.getTime())) {
+        const year = date.getFullYear();
+        const month = (date.getMonth() + 1).toString().padStart(2, '0');
+        const day = date.getDate().toString().padStart(2, '0');
+        const hours = date.getHours().toString().padStart(2, '0');
+        const minutes = date.getMinutes().toString().padStart(2, '0');
+        const seconds = date.getSeconds().toString().padStart(2, '0');
+        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+      }
+    } catch (e) {
+      console.error('Error formatting date:', e);
+    }
+    return val;
+  }
+
+  getFriendlyTimeRange(val: string): string | null {
+    const quickRanges: any = {
+      'now-10m': 'Last 10m',
+      'now-15m': 'Last 15m',
+      'now-30m': 'Last 30m',
+      'now-1h': 'Last 1h',
+      'now-3h': 'Last 3h',
+      'now-6h': 'Last 6h',
+      'now-12h': 'Last 12h',
+      'now-24h': 'Last 24h',
+      'now-2d': 'Last 2d',
+      'now-7d': 'Last 7d',
+      'now-30d': 'Last 30d',
+      'now-90d': 'Last 90d',
+      'now-6M': 'Last 6M',
+      'now-1y': 'Last 1y',
+      'now': 'Now'
+    };
+    return quickRanges[val] || null;
+  }
+
   getAPVRSMonitoringMetrics(payload: any) {
     this.deviceFacade.getAPVRSMonitoringMetrics(payload)
       .pipe(take(1))
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 2948)
+++ /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)
@@ -95,6 +95,7 @@
   }
 
   goToDetails(_device: any) {
-    this.coreUiFacade.navigate(['/monitoring/resources/slb-real', _device.ip, _device?.real_server_id], { state: {} });
+    const ip = _device.ip || _device.agent_host;
+    this.coreUiFacade.navigate(['/monitor/resources/slb-real', ip, _device?.real_server_id], { state: { deviceType: _device.type || 'vapv' } });
   }
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.html	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.html	(working copy)
@@ -1,96 +1,101 @@
-<div class="details-header">
-    <a class="back-link" (click)="navigateMonitoringDevices()">
-        <fa-icon [icon]="['fas', 'arrow-left']"></fa-icon>
-        Back
-    </a>
-    <div class="header-title">
-        <h1>Monitoring Devices - {{ serviceName }} <span class="device-ip">(IP : {{ deviceIp }})</span></h1>
-    </div>
-    <div class="time-filter">
-        <a class="filter-link" (click)="openTimeFilterDialog()">
-            <fa-icon [icon]="['far', 'clock']"></fa-icon>
-            {{ currentFrom }} to {{ currentTo }} ({{ currentInterval }}s)
+<div class="virtual-details-container">
+    <!-- Header -->
+    <div class="details-header">
+        <a class="back-link" (click)="navigateMonitoringDevices()">
+            <fa-icon [icon]="['fas', 'arrow-left']"></fa-icon>
+            Back
         </a>
+        <div class="header-title">
+            <h1>{{ serviceName }} <span class="device-ip">(IP : {{ deviceIp }})</span></h1>
+        </div>
+        <div class="time-filter">
+            <a class="filter-link" (click)="openTimeFilterDialog()">
+                <fa-icon [icon]="['far', 'clock']"></fa-icon>
+                <span class="range-text">{{ getFormattedDate(currentFrom) }} to {{ getFormattedDate(currentTo) }}</span>
+                <span class="interval-badge">{{ currentInterval }}s</span>
+            </a>
+        </div>
     </div>
-</div>
-<mat-tab-group mat-stretch-tabs="false" animationDuration="0ms" [selectedIndex]="selectedTabIndex"
-    (selectedTabChange)="onTabChange($event)">
-    <mat-tab label="Basic Monitoring">
-        <ng-template matTabContent>
-            <div class="tab-content">
-                <div class="charts-grid">
-                    <!-- Network Throughput -->
-                    <div class="chart-card">
-                        <div class="chart-header">
-                            <h3>Network Throughput (bps)</h3>
+
+    <!-- Content -->
+    <div class="details-content">
+        <mat-tab-group mat-stretch-tabs="false" animationDuration="0ms" [selectedIndex]="selectedTabIndex"
+            (selectedTabChange)="onTabChange($event)" class="custom-tab-group">
+            <mat-tab label="Basic Monitoring">
+                <ng-template matTabContent>
+                    <div class="charts-grid">
+                        <!-- Network Throughput -->
+                        <div class="chart-card">
+                            <div class="chart-header">
+                                <h3>Network Throughput (bps)</h3>
+                            </div>
+                            <div echarts [options]="throughputChartOptions" class="chart-instance"></div>
                         </div>
-                        <div echarts [options]="throughputChartOptions" class="chart-instance"></div>
-                    </div>
 
-                    <!-- Total Hits -->
-                    <div class="chart-card">
-                        <div class="chart-header">
-                            <h3>Hits</h3>
+                        <!-- Total Hits -->
+                        <div class="chart-card">
+                            <div class="chart-header">
+                                <h3>Hits</h3>
+                            </div>
+                            <div echarts [options]="totalHitsChartOptions" class="chart-instance"></div>
                         </div>
-                        <div echarts [options]="totalHitsChartOptions" class="chart-instance"></div>
-                    </div>
 
-                    <!-- Hits Distribution -->
-                    <div class="chart-card">
-                        <div class="chart-header">
-                            <h3>Hits Distribution</h3>
+                        <!-- Hits Distribution -->
+                        <div class="chart-card">
+                            <div class="chart-header">
+                                <h3>Hits Distribution</h3>
+                            </div>
+                            <div echarts [options]="hitsDistributionChartOptions" class="chart-instance"></div>
                         </div>
-                        <div echarts [options]="hitsDistributionChartOptions" class="chart-instance"></div>
-                    </div>
 
-                    <!-- Open Connections -->
-                    <div class="chart-card">
-                        <div class="chart-header">
-                            <h3>Open Connections</h3>
+                        <!-- Open Connections -->
+                        <div class="chart-card">
+                            <div class="chart-header">
+                                <h3>Open Connections</h3>
+                            </div>
+                            <div echarts [options]="connectionsChartOptions" class="chart-instance"></div>
                         </div>
-                        <div echarts [options]="connectionsChartOptions" class="chart-instance"></div>
-                    </div>
 
-                    <!-- Connections Per Second -->
-                    <div class="chart-card">
-                        <div class="chart-header">
-                            <h3>Connections Per Second</h3>
+                        <!-- Connections Per Second -->
+                        <div class="chart-card">
+                            <div class="chart-header">
+                                <h3>Connections Per Second</h3>
+                            </div>
+                            <div echarts [options]="connectionPerSecondChartOptions" class="chart-instance"></div>
                         </div>
-                        <div echarts [options]="connectionPerSecondChartOptions" class="chart-instance"></div>
                     </div>
-                </div>
-            </div>
-        </ng-template>
-    </mat-tab>
-    <mat-tab label="Audit Monitoring">
-        <ng-template matTabContent>
-            <div class="tab-content">
-                <div class="charts-grid">
-                    <!-- HTTP Status Code Ratio -->
-                    <div class="chart-card">
-                        <div class="chart-header">
-                            <h3>HTTP Status Code Ratio</h3>
+                </ng-template>
+            </mat-tab>
+            <mat-tab label="Audit Monitoring">
+                <ng-template matTabContent>
+                    <div class="charts-grid">
+                        <!-- HTTP Status Code Ratio -->
+                        <div class="chart-card">
+                            <div class="chart-header">
+                                <h3>HTTP Status Code Ratio</h3>
+                            </div>
+                            <div echarts [options]="httpStatusRatioChartOptions" class="chart-instance"></div>
                         </div>
-                        <div echarts [options]="httpStatusRatioChartOptions" class="chart-instance"></div>
-                    </div>
 
-                    <!-- Number Of Virtual Service Visits -->
-                    <div class="chart-card">
-                        <div class="chart-header">
-                            <h3>Number Of Virtual Service Visits</h3>
+                        <!-- Number Of Virtual Service Visits -->
+                        <div class="chart-card">
+                            <div class="chart-header">
+                                <h3>Number Of Virtual Service Visits</h3>
+                            </div>
+                            <div echarts [options]="vSVisitsChartOptions" class="chart-instance"></div>
                         </div>
-                        <div echarts [options]="vSVisitsChartOptions" class="chart-instance"></div>
-                    </div>
 
-                    <!-- Client To Device Time -->
-                    <div class="chart-card">
-                        <div class="chart-header">
-                            <h3>Client To Device Time</h3>
+                        <!-- Client To Device Time -->
+                        <div class="chart-card">
+                            <div class="chart-header">
+                                <h3>Client To Device Time</h3>
+                                <span class="unit">ms</span>
+                            </div>
+                            <div echarts [options]="vSRespTimeChartOptions" class="chart-instance"></div>
                         </div>
-                        <div echarts [options]="vSRespTimeChartOptions" class="chart-instance"></div>
                     </div>
-                </div>
-            </div>
-        </ng-template>
-    </mat-tab>
-</mat-tab-group>
\ No newline at end of file
+                </ng-template>
+            </mat-tab>
+        </mat-tab-group>
+    </div>
+</div>
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.scss	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.scss	(working copy)
@@ -1,305 +1,216 @@
-.page-card-1 {
-  width: 100%;
-  border-radius: 0;
-  background-color: inherit;
-  font-size: 14px !important;
+.virtual-details-container {
+  padding: 8px;
+  background-color: var(--app-bg);
+  height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+  font-family: 'Roboto', sans-serif;
+  display: flex;
+  flex-direction: column;
 
-  mat-card-header {
-    color: #1170cf;
-  }
-}
-
-.details-header {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  grid-template-rows: auto auto;
-  align-items: center;
-  padding: 0 4px;
-  /* Minimal vertical padding */
-  gap: 0px;
-  /* Minimal gap */
-  margin-bottom: 4px;
-  border-bottom: 1px solid var(--border-color);
-
-  .back-link {
-    grid-column: 1;
-    grid-row: 1;
-    justify-self: start;
-    display: flex;
+  .details-header {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    grid-template-rows: auto auto;
     align-items: center;
-    gap: 6px;
-    color: var(--text-secondary);
-    text-decoration: none;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    height: 32px;
-    /* Fixed height for consistency */
-
-    &:hover {
-      color: #1976d2;
-    }
-  }
-
-  .header-title {
-    grid-column: 2;
-    grid-row: 1;
-    justify-self: center;
-    display: flex;
-    align-items: center;
-    height: 32px;
-    /* Match back link height */
-
-    h1 {
-      font-size: 15px;
-      /* Slightly reduced */
-      font-weight: 500;
-      margin: 0;
-      color: var(--text-primary);
-      white-space: nowrap;
-    }
-
-    .device-ip {
-      font-size: 13px;
-      color: var(--text-secondary);
-      font-weight: 400;
-      margin-left: 4px;
-    }
-  }
-
-  .time-filter {
-    grid-column: 3;
-    grid-row: 2;
-    justify-self: end;
+    padding: 0 4px;
+    gap: 0px;
     margin-bottom: 4px;
-    /* Slight buffer from bottom border */
+    border-bottom: 1px solid var(--border-color);
 
-    .filter-link {
+    .back-link {
+      grid-column: 1;
+      grid-row: 1;
+      justify-self: start;
       display: flex;
       align-items: center;
       gap: 6px;
-      padding: 2px 8px;
-      padding: 2px 8px;
-      /* Compact padding */
-      background-color: var(--surface-bg);
-      border: 1px solid var(--border-color);
-      border-radius: 4px;
-      color: var(--text-primary);
-      font-size: 11px;
-      cursor: pointer;
+      color: var(--text-secondary);
       text-decoration: none;
-      height: 24px;
-      /* Fixed compact height */
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      height: 32px;
 
       &:hover {
-        background-color: var(--hover-bg);
         color: #1976d2;
       }
     }
-  }
-}
 
-mat-card-title {
-  font-size: medium;
-}
+    .header-title {
+      grid-column: 2;
+      grid-row: 1;
+      justify-self: center;
+      display: flex;
+      align-items: center;
+      height: 32px;
 
-.dashboard-card {
-  width: 100%;
-  height: 100%;
-  border-radius: 8px;
-  background-color: inherit;
-}
+      h1 {
+        font-family: 'Roboto', sans-serif;
+        font-size: 16px;
+        font-weight: 600;
+        margin: 0;
+        color: var(--text-primary);
+        white-space: nowrap;
+        letter-spacing: -0.01em;
+      }
 
-.card-content-wrapper {
-  margin-top: 2px;
-  padding: 0 !important;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-}
+      .device-ip {
+        font-family: 'Roboto', sans-serif;
+        font-size: 13px;
+        color: var(--text-secondary);
+        font-weight: 400;
+        margin-left: 8px;
+        background: rgba(0, 0, 0, 0.04);
+        padding: 2px 8px;
+        border-radius: 12px;
+      }
+    }
 
-.card-header-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 8px;
-  padding: 0 8px;
-}
+    .time-filter {
+      grid-column: 3;
+      grid-row: 2;
+      justify-self: end;
+      margin-bottom: 4px;
 
-.metric-icon {
-  color: #3f51b5;
-}
+      .filter-link {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 0 14px;
+        background-color: var(--surface-bg);
+        border: 1px solid var(--border-color);
+        border-radius: 6px;
+        color: var(--text-primary);
+        font-size: 11.5px;
+        font-weight: 500;
+        cursor: pointer;
+        text-decoration: none;
+        height: 28px;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 
-.card-title {
-  font-size: 18px;
-  font-weight: 500;
-  color: #555;
-  margin: 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-}
+        .range-text {
+          font-weight: 500;
+        }
 
-.metric-value {
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
-  line-height: 1;
-}
+        .interval-badge {
+          background-color: #e3f2fd;
+          color: #1976d2;
+          padding: 1px 6px;
+          border-radius: 10px;
+          font-weight: 600;
+          font-size: 10px;
+          margin-left: 4px;
+        }
 
-.metric-label {
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
-  font-size: 0.9rem;
-  color: #777;
-  margin-top: 5px;
-}
+        fa-icon {
+          color: var(--primary-color);
+          font-size: 12px;
+        }
 
-.online-count {
-  font-size: 36px;
-  font-weight: 600;
-  color: #333;
-}
+        &:hover {
+          background-color: var(--hover-bg);
+          border-color: var(--primary-color);
+          transform: translateY(-1px);
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
+        }
 
-.total-count {
-  font-size: 18px;
-  font-weight: 500;
-  color: #888;
-  margin-left: 4px;
-}
+        &:active {
+          transform: translateY(0);
+        }
+      }
+    }
+  }
 
-.status-details {
-  font-size: 14px;
-  color: #d32f2f;
-  margin: 0;
-  font-weight: 500;
-  text-align: center;
+  .details-content {
+    flex: 1;
+    overflow-y: auto;
+    padding-right: 4px;
+  }
 }
 
-.active,
-.matrics-icon {
-  color: darkgreen;
-}
-
-/* Updated CSS for horizontal chart layout */
-.chart-flex-container {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
+.custom-tab-group {
   height: 100%;
-  width: 100%;
-  flex-grow: 1;
-}
 
-.chart-container {
-  width: 100%;
-  height: 100%;
-  max-width: none;
-  max-height: none;
-}
+  ::ng-deep {
+    .mat-mdc-tab-header {
+      --mdc-tab-indicator-active-indicator-height: 2px;
+      --mat-tab-header-pagination-icon-color: var(--text-primary);
+      height: 36px;
+    }
 
-/* Adjustments for multiple charts */
-.chart-flex-container .chart-container {
-  width: 100%;
-  height: 100%;
-}
+    .mdc-tab-indicator__content--underline {
+      border-top-width: 3px !important;
+    }
 
-mat-grid-list {
-  height: 100%;
-  width: 100%;
-}
+    .mdc-tab {
+      height: 36px !important;
+      min-height: 36px !important;
+      padding: 0 16px !important;
 
-/* The original vertical layout for metrics */
-.metrics-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 20px;
-}
+      .mdc-tab__text-label {
+        font-size: 13px !important;
+      }
+    }
 
-/* Container to center content vertically and horizontally */
-.card-body-content {
-  flex-grow: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
+    .mat-tab-header {
+      height: 36px !important;
+    }
 
-/* New CSS for the metrics block */
-.metrics-horizontal-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 20px;
-  width: 100%;
+    .mat-tab-label {
+      height: 36px !important;
+      min-height: 36px !important;
+      font-size: 13px !important;
+    }
+  }
 }
 
-.metric-item {
-  text-align: center;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.metric-value {
-  font-size: 1rem;
-  font-weight: 500;
-  color: #333;
-}
-
-/* Grid Layout for Charts */
 .charts-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr); // 3 Columns
-  gap: 20px;
-  padding: 20px;
+  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
+  gap: 8px;
+  padding: 8px 0;
 }
 
 .chart-card {
   background: var(--surface-bg);
   border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  padding: 10px;
+  border: 1px solid var(--border-color);
+  padding: 12px;
   display: flex;
   flex-direction: column;
-  height: 350px;
-  border: 1px solid var(--border-color);
+  height: 260px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
 
   .chart-header {
-    margin-bottom: 5px;
-    border-bottom: 1px solid #f0f0f0;
-    padding-bottom: 5px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
 
     h3 {
-      margin: 0;
+      font-family: 'Roboto', sans-serif;
       font-size: 14px;
       font-weight: 600;
       color: var(--text-primary);
+      margin: 0;
+      letter-spacing: -0.01em;
     }
+
+    .unit {
+      font-size: 11px;
+      color: var(--text-secondary);
+      font-weight: 500;
+      background: var(--app-bg);
+      padding: 2px 6px;
+      border-radius: 4px;
+    }
   }
 
   .chart-instance {
     flex: 1;
     width: 100%;
     height: 100%;
-    min-height: 0; // Essential for nested flex/grid scrolling
   }
-}
-
-/* Responsive Adjustments */
-@media (max-width: 1200px) {
-  .charts-grid {
-    grid-template-columns: repeat(2, 1fr); // 2 Columns on smaller screens
-  }
-}
-
-@media (max-width: 768px) {
-  .charts-grid {
-    grid-template-columns: 1fr; // 1 Column on mobile
-  }
 }
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.ts	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.ts	(working copy)
@@ -25,6 +25,7 @@
 
     deviceIp: string = '';
     serviceName: string = '';
+    deviceType: string = '';
 
     selectedTabIndex: number = 0;
     private tabNames: string[] = [
@@ -57,11 +58,38 @@
     ngOnInit() {
         this.deviceIp = this.route.snapshot.paramMap.get('deviceIp') || '';
         this.serviceName = this.route.snapshot.paramMap.get('serviceName') || '';
-
+        this.deviceType = history.state.deviceType || '';
+        console.log(this.deviceIp)
         this.initializeCharts();
-        this.getBasicMonitoringMetrics()
+
+        if (this.deviceType) {
+            this.getBasicMonitoringMetrics();
+        } else {
+            this.fetchDeviceTypeAndMetrics();
+        }
     }
 
+    fetchDeviceTypeAndMetrics() {
+        this.deviceFacade.getDeviceGroups().pipe(take(1)).subscribe({
+            next: (data: any) => {
+                const device = data?.devices?.find((d: any) => d.ip === this.deviceIp);
+                if (device) {
+                    this.deviceType = device.type;
+                    this.getBasicMonitoringMetrics();
+                } else {
+                    console.error('Device not found for metrics');
+                    this.deviceType = 'vapv'; // Default
+                    this.getBasicMonitoringMetrics();
+                }
+            },
+            error: (err) => {
+                console.error('Error fetching device info:', err);
+                this.deviceType = 'vapv'; // Default
+                this.getBasicMonitoringMetrics();
+            }
+        });
+    }
+
     initializeCharts() {
         const noData = this._chartOptions.getNoDataChartOptions();
         this.throughputChartOptions = noData;
@@ -85,13 +113,14 @@
     }
 
     navigateMonitoringDevices() {
-        this.coreUiFacade.navigate(['/monitoring/resources'], { state: {} });
+        this.coreUiFacade.navigate(['/monitor/resources'], { state: {} });
     }
 
     getBasicMonitoringMetrics() {
         this.getAPVVSMonitoringMetrics({
             agent_host: this.deviceIp,
             server_id: this.serviceName,
+            device_type: this.deviceType,
             from: this.currentFrom,
             to: this.currentTo,
             stat_name: 'network_throughput'
@@ -99,6 +128,7 @@
         this.getAPVVSMonitoringMetrics({
             agent_host: this.deviceIp,
             server_id: this.serviceName,
+            device_type: this.deviceType,
             from: this.currentFrom,
             to: this.currentTo,
             stat_name: 'total_hits'
@@ -106,6 +136,7 @@
         this.getAPVVSMonitoringMetrics({
             agent_host: this.deviceIp,
             server_id: this.serviceName,
+            device_type: this.deviceType,
             from: this.currentFrom,
             to: this.currentTo,
             stat_name: 'hits_distribution'
@@ -113,6 +144,7 @@
         this.getAPVVSMonitoringMetrics({
             agent_host: this.deviceIp,
             server_id: this.serviceName,
+            device_type: this.deviceType,
             from: this.currentFrom,
             to: this.currentTo,
             stat_name: 'connection_count'
@@ -120,12 +152,57 @@
         this.getAPVVSMonitoringMetrics({
             agent_host: this.deviceIp,
             server_id: this.serviceName,
+            device_type: this.deviceType,
             from: this.currentFrom,
             to: this.currentTo,
             stat_name: 'connections_per_sec'
         })
     }
 
+    getFormattedDate(val: any): string {
+        if (!val) return '';
+        if (typeof val === 'string' && val.startsWith('now')) {
+            const range = this.getFriendlyTimeRange(val);
+            return range ? range : val;
+        }
+        try {
+            const date = new Date(val);
+            if (!isNaN(date.getTime())) {
+                const year = date.getFullYear();
+                const month = (date.getMonth() + 1).toString().padStart(2, '0');
+                const day = date.getDate().toString().padStart(2, '0');
+                const hours = date.getHours().toString().padStart(2, '0');
+                const minutes = date.getMinutes().toString().padStart(2, '0');
+                const seconds = date.getSeconds().toString().padStart(2, '0');
+                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+            }
+        } catch (e) {
+            console.error('Error formatting date:', e);
+        }
+        return val;
+    }
+
+    getFriendlyTimeRange(val: string): string | null {
+        const quickRanges: any = {
+            'now-10m': 'Last 10m',
+            'now-15m': 'Last 15m',
+            'now-30m': 'Last 30m',
+            'now-1h': 'Last 1h',
+            'now-3h': 'Last 3h',
+            'now-6h': 'Last 6h',
+            'now-12h': 'Last 12h',
+            'now-24h': 'Last 24h',
+            'now-2d': 'Last 2d',
+            'now-7d': 'Last 7d',
+            'now-30d': 'Last 30d',
+            'now-90d': 'Last 90d',
+            'now-6M': 'Last 6M',
+            'now-1y': 'Last 1y',
+            'now': 'Now'
+        };
+        return quickRanges[val] || null;
+    }
+
     throughputChartOptions: EChartsOption = {};
     totalHitsChartOptions: EChartsOption = {};
     hitsDistributionChartOptions: EChartsOption = {};
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 2948)
+++ /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)
@@ -41,6 +41,7 @@
   }
 
   getDeviceGroups(): void {
+    console.log('getDeviceGroups');
     this.devices = [];
     this.groups = [];
     this.dataSource.data = [];
@@ -81,6 +82,7 @@
         agent_host: null
       }
     }
+    console.log(payload)
     this.deviceFacade.getAPVVSMonitoringMetrics(payload)
       .pipe(take(1))
       .subscribe({
@@ -96,6 +98,7 @@
   }
 
   goToDetails(_device: any) {
-    this.coreUiFacade.navigate(['/monitoring/resources/slb-virtual', _device.ip, _device?.serverid], { state: {} });
+    const ip = _device.ip || _device.agent_host;
+    this.coreUiFacade.navigate(['/monitor/resources/slb-virtual', ip, _device?.serverid], { state: { deviceType: _device.type || 'vapv' } });
   }
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn-details/resource-monitoring-ssl-vpn-details.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn-details/resource-monitoring-ssl-vpn-details.html	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn-details/resource-monitoring-ssl-vpn-details.html	(working copy)
@@ -11,7 +11,8 @@
     <div class="time-filter">
       <a class="filter-link" (click)="openTimeFilterDialog()">
         <fa-icon [icon]="['far', 'clock']"></fa-icon>
-        {{ currentFrom }} to {{ currentTo }} ({{ currentInterval }}s)
+        <span class="range-text">{{ getFormattedDate(currentFrom) }} to {{ getFormattedDate(currentTo) }}</span>
+        <span class="interval-badge">{{ currentInterval }}s</span>
       </a>
     </div>
   </div>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn-details/resource-monitoring-ssl-vpn-details.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn-details/resource-monitoring-ssl-vpn-details.scss	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn-details/resource-monitoring-ssl-vpn-details.scss	(working copy)
@@ -76,21 +76,35 @@
       .filter-link {
         display: flex;
         align-items: center;
-        gap: 6px;
-        padding: 2px 8px;
-        /* Compact padding */
+        gap: 8px;
+        padding: 0 10px;
         background-color: var(--surface-bg);
         border: 1px solid var(--border-color);
-        border-radius: 4px;
+        border-radius: 6px;
         color: var(--text-primary);
         font-size: 11px;
         cursor: pointer;
         text-decoration: none;
-        height: 24px;
-        /* Fixed compact height */
+        height: 28px;
+        /* Match back link height */
 
+        .range-text {
+          font-weight: 500;
+        }
+
+        .interval-badge {
+          background-color: #e3f2fd;
+          color: #1976d2;
+          padding: 1px 6px;
+          border-radius: 10px;
+          font-weight: 600;
+          font-size: 10px;
+          margin-left: 4px;
+        }
+
         &:hover {
           background-color: var(--hover-bg);
+          border-color: #1976d2;
           color: #1976d2;
         }
       }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn-details/resource-monitoring-ssl-vpn-details.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn-details/resource-monitoring-ssl-vpn-details.ts	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn-details/resource-monitoring-ssl-vpn-details.ts	(working copy)
@@ -22,6 +22,7 @@
 export class ResourceMonitoringSslVpnDetails implements OnInit {
   deviceIp: string = '';
   serviceName: string = '';
+  deviceType: string = '';
 
   selectedTabIndex: number = 0;
 
@@ -58,10 +59,38 @@
   ngOnInit() {
     this.deviceIp = this.route.snapshot.paramMap.get('deviceIp') || '';
     this.serviceName = this.route.snapshot.paramMap.get('serviceName') || '';
+    this.deviceType = history.state.deviceType || '';
+
     this.initializeCharts();
-    this.getBasicMonitoringMetrics();
+
+    if (this.deviceType) {
+      this.getBasicMonitoringMetrics();
+    } else {
+      this.fetchDeviceTypeAndMetrics();
+    }
   }
 
+  fetchDeviceTypeAndMetrics() {
+    this.deviceFacade.getDeviceGroups().pipe(take(1)).subscribe({
+      next: (data: any) => {
+        const device = data?.devices?.find((d: any) => d.ip === this.deviceIp);
+        if (device) {
+          this.deviceType = device.type;
+          this.getBasicMonitoringMetrics();
+        } else {
+          console.error('Device not found for metrics');
+          this.deviceType = 'vapv'; // Default
+          this.getBasicMonitoringMetrics();
+        }
+      },
+      error: (err) => {
+        console.error('Error fetching device info:', err);
+        this.deviceType = 'vapv'; // Default
+        this.getBasicMonitoringMetrics();
+      }
+    });
+  }
+
   initializeCharts() {
     const noData = this.getNoDataChartOptions();
     this.loginStatusChartOptions = noData;
@@ -84,13 +113,14 @@
   }
 
   navigateMonitoringDevices() {
-    this.coreUiFacade.navigate(['/monitoring/resources'], { state: {} });
+    this.coreUiFacade.navigate(['/monitor/resources'], { state: {} });
   }
 
   getBasicMonitoringMetrics() {
     this.getSSLVPNMonitoringMetrics({
       agent_host: this.deviceIp,
       vsite_id: this.serviceName,
+      device_type: this.deviceType,
       from: this.currentFrom,
       to: this.currentTo,
       stat_name: 'login_status'
@@ -98,6 +128,7 @@
     this.getSSLVPNMonitoringMetrics({
       agent_host: this.deviceIp,
       vsite_id: this.serviceName,
+      device_type: this.deviceType,
       from: this.currentFrom,
       to: this.currentTo,
       stat_name: 'net_throughput'
@@ -105,6 +136,7 @@
     this.getSSLVPNMonitoringMetrics({
       agent_host: this.deviceIp,
       vsite_id: this.serviceName,
+      device_type: this.deviceType,
       from: this.currentFrom,
       to: this.currentTo,
       stat_name: 'tunnel_status'
@@ -112,6 +144,7 @@
     this.getSSLVPNMonitoringMetrics({
       agent_host: this.deviceIp,
       vsite_id: this.serviceName,
+      device_type: this.deviceType,
       from: this.currentFrom,
       to: this.currentTo,
       stat_name: 'l3_vpn_throughput'
@@ -119,6 +152,7 @@
     this.getSSLVPNMonitoringMetrics({
       agent_host: this.deviceIp,
       vsite_id: this.serviceName,
+      device_type: this.deviceType,
       from: this.currentFrom,
       to: this.currentTo,
       stat_name: 'l3_client_app_throughput'
@@ -126,6 +160,7 @@
     this.getSSLVPNMonitoringMetrics({
       agent_host: this.deviceIp,
       vsite_id: this.serviceName,
+      device_type: this.deviceType,
       from: this.currentFrom,
       to: this.currentTo,
       stat_name: 'l7_request_status'
@@ -133,6 +168,7 @@
     this.getSSLVPNMonitoringMetrics({
       agent_host: this.deviceIp,
       vsite_id: this.serviceName,
+      device_type: this.deviceType,
       from: this.currentFrom,
       to: this.currentTo,
       stat_name: 'l7_client_throughput'
@@ -140,12 +176,57 @@
     this.getSSLVPNMonitoringMetrics({
       agent_host: this.deviceIp,
       vsite_id: this.serviceName,
+      device_type: this.deviceType,
       from: this.currentFrom,
       to: this.currentTo,
       stat_name: 'l7_server_throughput'
     })
   }
 
+  getFormattedDate(val: any): string {
+    if (!val) return '';
+    if (typeof val === 'string' && val.startsWith('now')) {
+      const range = this.getFriendlyTimeRange(val);
+      return range ? range : val;
+    }
+    try {
+      const date = new Date(val);
+      if (!isNaN(date.getTime())) {
+        const year = date.getFullYear();
+        const month = (date.getMonth() + 1).toString().padStart(2, '0');
+        const day = date.getDate().toString().padStart(2, '0');
+        const hours = date.getHours().toString().padStart(2, '0');
+        const minutes = date.getMinutes().toString().padStart(2, '0');
+        const seconds = date.getSeconds().toString().padStart(2, '0');
+        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+      }
+    } catch (e) {
+      console.error('Error formatting date:', e);
+    }
+    return val;
+  }
+
+  getFriendlyTimeRange(val: string): string | null {
+    const quickRanges: any = {
+      'now-10m': 'Last 10m',
+      'now-15m': 'Last 15m',
+      'now-30m': 'Last 30m',
+      'now-1h': 'Last 1h',
+      'now-3h': 'Last 3h',
+      'now-6h': 'Last 6h',
+      'now-12h': 'Last 12h',
+      'now-24h': 'Last 24h',
+      'now-2d': 'Last 2d',
+      'now-7d': 'Last 7d',
+      'now-30d': 'Last 30d',
+      'now-90d': 'Last 90d',
+      'now-6M': 'Last 6M',
+      'now-1y': 'Last 1y',
+      'now': 'Now'
+    };
+    return quickRanges[val] || null;
+  }
+
   getSSLVPNMonitoringMetrics(payload: any) {
     this.deviceFacade.getSSLVPNMonitoringMetrics(payload)
       .pipe(take(1))
@@ -202,7 +283,6 @@
                 { name: 'Received', data: received_formatted, colorStart: '#4caf50', colorEnd: '#e8f5e9' },
                 { name: 'Sent', data: sent_formatted, colorStart: '#2196f3', colorEnd: '#e3f2fd' }
               ];
-              // Assuming net_throughput maps to Server Throughput based on variable names in original code
               this.serverThroughputChartOptions = (sent_formatted.length || received_formatted.length) ?
                 this.getMultiSeriesAreaChartOptions(seriesData, 'bps') : this.getNoDataChartOptions();
             } else {
@@ -304,23 +384,6 @@
               this.l7ServerThroughputChartOptions = this.getNoDataChartOptions();
             }
           }
-          // Missing handler for clientThroughputChartOptions?
-          // The original code had clientThroughputChartOptions configured but I don't see an explicit call for 'client_throughput'.
-          // However 'net_throughput' was assigned to serverThroughputChartOptions.
-          // Looking at the calls:
-          // 'net_throughput', 'l3_vpn_throughput', 'l3_client_app_throughput', 'l7_client_throughput', 'l7_server_throughput'
-          // The original assigned 'net_throughput' to serverThroughputChartOptions.
-          // Maybe client_throughput is not fetched or part of one of these?
-          // Original code:
-          // else if (payload?.stat_name === 'net_throughput') { ... this.serverThroughputChartOptions = ... }
-          // Where is clientThroughputChartOptions used?
-          // It is defined but not seemingly assigned in the original 'next' block provided in the snippet.
-          // I will keep it as empty/placeholder unless I see where it comes from.
-          // Actually, let me check the original code snippet again.
-          // Line 125: clientThroughputChartOptions defined effectively.
-          // It was not assigned in the original snippet I viewed!
-          // I will initialize it to No Data to be safe.
-
         },
         error: (error: any) => {
           console.log(error);
@@ -365,77 +428,6 @@
     dialogRef.afterClosed().subscribe(() => { });
   }
 
-  getAreaChartOptions(title: string, data: any[], colorStart: string, colorEnd: string, unit: string = ''): EChartsOption {
-    return {
-      tooltip: {
-        trigger: 'axis',
-        formatter: (params: any) => {
-          let tooltip = `<div style="font-size:12px; font-weight:bold; margin-bottom:4px; color:#555;">${params[0].axisValueLabel}</div>`;
-          params.forEach((item: any) => {
-            let val = item.value[1];
-            try { val = Number(val).toFixed(2); } catch (e) { }
-            tooltip += `<div style="font-size:12px; padding: 2px 0;">
-                    <span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:${item.color.colorStops ? item.color.colorStops[0].color : item.color};"></span>
-                     ${item.seriesName}: <b style="color:#333;">${val} ${unit}</b></div>`;
-          });
-          return tooltip;
-        },
-        backgroundColor: 'rgba(255, 255, 255, 0.95)',
-        borderColor: '#eee',
-        borderWidth: 1,
-        textStyle: { color: '#333' },
-        padding: [8, 12]
-      },
-      grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '3%',
-        top: '10%',
-        containLabel: true
-      },
-      xAxis: {
-        type: 'time',
-        boundaryGap: ['0%', '0%'],
-        axisLine: { show: false },
-        axisTick: { show: false },
-        splitLine: { show: false },
-        axisLabel: { color: this.getTextColor(), fontSize: 11 }
-      },
-      yAxis: {
-        type: 'value',
-        splitLine: {
-          lineStyle: {
-            type: 'dashed',
-            color: '#f0f0f0'
-          }
-        },
-        axisLabel: { color: this.getTextColor(), fontSize: 11 }
-      },
-      series: [
-        {
-          name: title,
-          type: 'line',
-          smooth: true,
-          symbol: 'none',
-          itemStyle: {
-            color: colorStart
-          },
-          lineStyle: {
-            width: 2.5,
-            color: colorStart
-          },
-          areaStyle: {
-            color: new graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: colorStart },
-              { offset: 1, color: colorEnd }
-            ])
-          },
-          data: data
-        }
-      ]
-    };
-  }
-
   getMultiSeriesAreaChartOptions(seriesData: { name: string, data: any[], colorStart: string, colorEnd: string }[], unit: string = ''): EChartsOption {
     const series = seriesData.map(s => ({
       name: s.name,
@@ -450,7 +442,7 @@
         color: s.colorStart
       },
       areaStyle: {
-        opacity: 0.6, // Slight transparency for stacking visibility
+        opacity: 0.6,
         color: new graphic.LinearGradient(0, 0, 0, 1, [
           { offset: 0, color: s.colorStart },
           { offset: 1, color: s.colorEnd }
@@ -487,7 +479,7 @@
         left: '3%',
         right: '4%',
         bottom: '3%',
-        top: '15%', // Space for legend
+        top: '15%',
         containLabel: true
       },
       legend: {
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 2948)
+++ /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)
@@ -89,6 +89,7 @@
   }
 
   goToDetails(_device: any) {
-    this.coreUiFacade.navigate(['/monitoring/resources/ssl-vpn', _device.ip, _device?.vsite_name], { state: {} });
+    const ip = _device.ip || _device.agent_host;
+    this.coreUiFacade.navigate(['/monitor/resources/ssl-vpn', ip, _device?.vsite_name], { state: { deviceType: _device.type || 'vapv' } });
   }
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/tasks/tasks.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/tasks/tasks.html	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/tasks/tasks.html	(working copy)
@@ -33,7 +33,7 @@
 
           <ng-container matColumnDef="created_at">
             <th mat-header-cell *matHeaderCellDef>Creation Time</th>
-            <td mat-cell *matCellDef="let element">{{ element.name.split('-')[1] | taskTimeFromName }}</td>
+            <td mat-cell *matCellDef="let element">{{ element.name.split('-').slice(-1)[0] | taskTimeFromName }}</td>
           </ng-container>
 
           <ng-container matColumnDef="executed_at">
@@ -43,7 +43,12 @@
 
           <ng-container matColumnDef="status">
             <th mat-header-cell *matHeaderCellDef>Status</th>
-            <td mat-cell *matCellDef="let element">{{ element.state | titlecase }}</td>
+            <td mat-cell *matCellDef="let element">
+              <span [class]="'status-badge status-' + element.state">{{ element.state | titlecase }}</span>
+              <fa-icon *ngIf="element.description" [icon]="['fas', 'circle-info']" size="sm" class="desc-info-icon"
+                [matTooltip]="element.description" matTooltipClass="task-desc-tooltip" matTooltipPosition="left">
+              </fa-icon>
+            </td>
           </ng-container>
 
           <ng-container matColumnDef="action">
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 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/tasks/tasks.scss	(working copy)
@@ -67,9 +67,59 @@
                 color: #d93025; // Google red for delete
             }
         }
+
+        // Status badge pill
+        .status-badge {
+            display: inline-block;
+            padding: 2px 10px;
+            border-radius: 12px;
+            font-size: 12px;
+            font-weight: 500;
+            letter-spacing: 0.3px;
+
+            &.status-waiting {
+                background: #e8eaf6;
+                color: #3949ab;
+            }
+
+            &.status-ongoing {
+                background: #e3f2fd;
+                color: #1565c0;
+            }
+
+            &.status-done {
+                background: #e8f5e9;
+                color: #2e7d32;
+            }
+
+            &.status-failed {
+                background: #fce4ec;
+                color: #c62828;
+            }
+        }
+
+        // Info icon next to status
+        .desc-info-icon {
+            margin-left: 6px;
+            color: #78909c;
+            cursor: help;
+            vertical-align: middle;
+
+            &:hover {
+                color: #1976d2;
+            }
+        }
     }
 }
 
+// Wide tooltip for task descriptions / error messages
+::ng-deep .task-desc-tooltip {
+    max-width: 420px !important;
+    white-space: pre-wrap !important;
+    font-size: 12px !important;
+    line-height: 1.5 !important;
+}
+
 // Paginator styling to match
 mat-paginator {
     border-top: 1px solid #dadce0;
@@ -110,6 +160,36 @@
                     color: #ef9a9a;
                 }
             }
+
+            .status-badge {
+                &.status-waiting {
+                    background: #1a237e33;
+                    color: #9fa8da;
+                }
+
+                &.status-ongoing {
+                    background: #0d47a133;
+                    color: #90caf9;
+                }
+
+                &.status-done {
+                    background: #1b5e2033;
+                    color: #a5d6a7;
+                }
+
+                &.status-failed {
+                    background: #b71c1c33;
+                    color: #ef9a9a;
+                }
+            }
+
+            .desc-info-icon {
+                color: var(--text-secondary);
+
+                &:hover {
+                    color: #90caf9;
+                }
+            }
         }
     }
 
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/menu.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/menu.ts	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/menu.ts	(working copy)
@@ -1,4 +1,4 @@
-import {MenuItem} from '../models/menu-item';
+import { MenuItem } from '../models/menu-item';
 
 export const MENU_ITEMS: MenuItem[] = [
   {
@@ -178,14 +178,14 @@
       {
         label: 'Resources',
         icon: '',
-        routerLink: '/monitoring/resources',
+        routerLink: '/monitor/resources',
         roles: ['super_admin', 'device_admin', 'common_admin'],
         permissions: ['mResources']
       },
       {
         label: 'Events',
         icon: '',
-        routerLink: '/monitoring/events',
+        routerLink: '/monitor/events',
         roles: ['super_admin', 'device_admin', 'common_admin'],
         permissions: ['mEvents']
       },
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/chart-options.service.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/chart-options.service.ts	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/chart-options.service.ts	(working copy)
@@ -24,7 +24,8 @@
             style: {
               text: 'No Data Available',
               fontSize: 14,
-              fill: '#bdbdbd'
+              fill: '#bdbdbd',
+              fontFamily: 'Roboto'
             }
           }
         ]
@@ -63,14 +64,16 @@
         nameGap: 20,
         axisLabel: {
           formatter: '{value}',
-          color: this.getTextColor()
+          color: this.getTextColor(),
+          fontFamily: 'Roboto'
         }
       },
       xAxis: {
         type: 'category',
         data: sortedNames,
         axisLabel: {
-          color: this.getTextColor()
+          color: this.getTextColor(),
+          fontFamily: 'Roboto'
         }
       },
       series: [
@@ -184,7 +187,8 @@
       legend: {
         bottom: 'bottom',
         textStyle: {
-          color: this.getTextColor()
+          color: this.getTextColor(),
+          fontFamily: 'Roboto'
         }
       },
       yAxis: {
@@ -267,7 +271,8 @@
         data: ['Inbound', 'Outbound'],
         bottom: 0,
         textStyle: {
-          color: this.getTextColor()
+          color: this.getTextColor(),
+          fontFamily: 'Roboto'
         }
       },
       xAxis: {
@@ -347,7 +352,8 @@
       legend: {
         data: ['CPU', 'Memory'],
         textStyle: {
-          color: this.getTextColor()
+          color: this.getTextColor(),
+          fontFamily: 'Roboto'
         }
       },
       xAxis: {
@@ -413,7 +419,8 @@
       legend: {
         data: [labels?.label],
         textStyle: {
-          color: this.getTextColor()
+          color: this.getTextColor(),
+          fontFamily: 'Roboto'
         }
       },
       xAxis: {
@@ -596,7 +603,8 @@
       legend: {
         data: ['Disk I/O',],
         textStyle: {
-          color: this.getTextColor()
+          color: this.getTextColor(),
+          fontFamily: 'Roboto'
         }
       },
       xAxis: {
@@ -661,7 +669,8 @@
       options.legend = {
         bottom: 'bottom',
         textStyle: {
-          color: this.getTextColor()
+          color: this.getTextColor(),
+          fontFamily: 'Roboto'
         }
       }
     }
@@ -677,7 +686,8 @@
         textStyle: {
           fontSize: 14,
           fontWeight: 'bold',
-          color: '#333'
+          color: '#333',
+          fontFamily: 'Roboto'
         }
       },
       tooltip: {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/facades/core-ui.facade.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/facades/core-ui.facade.ts	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/facades/core-ui.facade.ts	(working copy)
@@ -89,7 +89,11 @@
     }
 
     get activeRoute() {
-        return this.route;
+        let route = this.router.routerState.root;
+        while (route.firstChild) {
+            route = route.firstChild;
+        }
+        return route;
     }
 
     getReturnUrl(): string {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/loading.service.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/loading.service.ts	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/loading.service.ts	(working copy)
@@ -1,5 +1,8 @@
-import { Injectable } from '@angular/core';
+import { Injectable, Injector, ApplicationRef, createComponent, EnvironmentInjector } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { Loading } from '../components/common/loading/loading';
 
 @Injectable({
   providedIn: 'root'
@@ -10,10 +13,15 @@
   private loadingSubject = new BehaviorSubject<boolean>(false);
   loading$ = this.loadingSubject.asObservable();
 
+  private overlayRef: OverlayRef | null = null;
+
+  constructor(private overlay: Overlay) { }
+
   startRequest(): void {
     this.activeRequestCount++;
     if (this.activeRequestCount === 1) {
       this.loadingSubject.next(true);
+      this.showOverlay();
     }
   }
 
@@ -26,6 +34,29 @@
 
     if (this.activeRequestCount === 0) {
       this.loadingSubject.next(false);
+      this.hideOverlay();
     }
   }
+
+  private showOverlay(): void {
+    if (this.overlayRef) return;
+
+    this.overlayRef = this.overlay.create({
+      hasBackdrop: true,
+      backdropClass: 'loading-backdrop',
+      panelClass: 'loading-panel',
+      // Render above all other CDK overlays (dialogs use default z-index within CDK)
+      positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
+    });
+
+    const portal = new ComponentPortal(Loading);
+    this.overlayRef.attach(portal);
+  }
+
+  private hideOverlay(): void {
+    if (this.overlayRef) {
+      this.overlayRef.dispose();
+      this.overlayRef = null;
+    }
+  }
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/utils.service.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/utils.service.ts	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/utils.service.ts	(working copy)
@@ -153,9 +153,8 @@
         .filter((item: any) => item.metric === 'network')
         .map((item: any) => ({
           name: `${item.service_name} (${item.device_name || 'N/A'})`,
-          // Convert Bytes to Megabytes (MB)
-          inbound: item.received / (1024 * 1024),
-          outbound: item.sent / (1024 * 1024),
+          inbound: item.received,
+          outbound: item.sent,
         }))
         .sort((a: any, b: any) => (b.inbound + b.outbound) - (a.inbound + a.outbound));
       result.network = {
@@ -170,9 +169,8 @@
         .filter((item: any) => item.metric === 'network')
         .map((item: any) => ({
           name: `${item.device_name || 'N/A'}`,
-          // Convert Bytes to Megabytes (MB)
-          total_in: item.total_in / (1024 * 1024),
-          total_out: item.total_out / (1024 * 1024),
+          total_in: item.total_in,
+          total_out: item.total_out,
         }))
         .sort((a: any, b: any) => (b.total_in + b.total_out) - (a.total_in + a.total_out));
       result.network = {
@@ -187,11 +185,11 @@
         .filter((item: any) => item.metric === 'client_network')
         .map((item: any) => ({
           name: `${item.vsite_name} (${item.device_name || 'N/A'})`,
-          // Convert Bytes to Megabytes (MB)
-          inbound: item.received / (1024 * 1024),
-          outbound: item.sent / (1024 * 1024),
+          inbound: item.received,
+          outbound: item.sent,
         }))
         .sort((a: any, b: any) => (b.inbound + b.outbound) - (a.inbound + a.outbound));
+
       result.client_network = {
         names: sortedNetworkData.map((item: any) => item.name),
         inbound: sortedNetworkData.map((item: any) => item.inbound),
@@ -204,11 +202,11 @@
         .filter((item: any) => item.metric === 'server_network')
         .map((item: any) => ({
           name: `${item.vsite_name} (${item.device_name || 'N/A'})`,
-          // Convert Bytes to Megabytes (MB)
-          inbound: item.received / (1024 * 1024),
-          outbound: item.sent / (1024 * 1024),
+          inbound: item.received,
+          outbound: item.sent,
         }))
         .sort((a: any, b: any) => (b.inbound + b.outbound) - (a.inbound + a.outbound));
+
       result.server_network = {
         names: sortedNetworkData.map((item: any) => item.name),
         inbound: sortedNetworkData.map((item: any) => item.inbound),
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 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/shared/shared-module.ts	(working copy)
@@ -55,6 +55,7 @@
 import { MatMenuModule } from '@angular/material/menu';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatNativeDateModule } from '@angular/material/core';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 
 // Note: Heavy modules like NgxEchartsModule and NgxMatDatetimepicker have been removed 
@@ -134,6 +135,7 @@
   MatMenuModule,
   MatCheckboxModule,
   MatNativeDateModule,
+  MatProgressSpinnerModule,
 ];
 
 const thirdPartyModules = [
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/index.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/index.html	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/index.html	(working copy)
@@ -1,5 +1,6 @@
 <!doctype html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <title>Array Management Platform</title>
@@ -7,7 +8,16 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="./assets/favicon.ico">
 </head>
+
 <body class="mat-typography">
+  <div id="global-loader" class="global-loading-overlay">
+    <div class="sleek-spinner">
+      <div class="ring"></div>
+      <div class="ring"></div>
+      <div class="ring"></div>
+    </div>
+  </div>
   <app-root></app-root>
 </body>
-</html>
+
+</html>
\ No newline at end of file
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 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/styles.scss	(working copy)
@@ -629,4 +629,141 @@
 .no-data-cell {
   padding: 0 !important;
   border-bottom: none !important;
+}
+
+/* Global Datetime Picker Overrides */
+.ngx-mat-datetime-picker-content {
+  background: var(--surface-bg) !important;
+  color: var(--text-primary) !important;
+  border-radius: 8px !important;
+  box-shadow: var(--shadow-medium) !important;
+  padding: 16px !important;
+
+  .mat-calendar-header {
+    background: transparent !important;
+  }
+
+  .mat-calendar-table-header {
+    color: var(--text-secondary) !important;
+  }
+
+  .mat-calendar-body-label {
+    color: var(--text-primary) !important;
+    font-weight: 600;
+  }
+
+  .mat-calendar-body-cell-content {
+    color: var(--text-primary) !important;
+    border-radius: 4px !important;
+  }
+
+  .mat-calendar-body-selected {
+    background-color: var(--primary-color) !important;
+    color: white !important;
+  }
+
+  .mat-calendar-body-today:not(.mat-calendar-body-selected) {
+    border-color: var(--primary-color) !important;
+  }
+
+  /* Clock styles */
+  .ngx-mat-timepicker-content {
+    .mat-form-field-wrapper {
+      padding-bottom: 0 !important;
+    }
+
+    .mat-form-field-infix {
+      border-top: none !important;
+    }
+  }
+
+  .ngx-mat-timepicker-clock {
+    background-color: #f8fafc !important;
+    border-radius: 50% !important;
+
+    .ngx-mat-timepicker-clock-hand {
+      background-color: var(--primary-color) !important;
+
+      &::before {
+        background-color: var(--primary-color) !important;
+      }
+    }
+
+    .ngx-mat-timepicker-clock-center {
+      background-color: var(--primary-color) !important;
+    }
+
+    .ngx-mat-timepicker-clock-cell {
+      color: #64748b !important;
+      font-weight: 500 !important;
+
+      &.ngx-mat-timepicker-clock-cell-selected {
+        background-color: var(--primary-color) !important;
+        color: white !important;
+      }
+    }
+  }
+
+  .ngx-mat-datetime-picker-actions {
+    margin-top: 16px !important;
+    border-top: 1px solid var(--border-color) !important;
+    padding-top: 12px !important;
+
+    button {
+      text-transform: uppercase;
+      font-weight: 600;
+      letter-spacing: 0.5px;
+      font-size: 12px;
+    }
+
+    .mat-flat-button.mat-primary {
+      background-color: var(--primary-color) !important;
+    }
+  }
+}
+
+.dark-theme .ngx-mat-datetime-picker-content {
+  .ngx-mat-timepicker-clock {
+    background-color: #2c2c2c !important;
+
+    .ngx-mat-timepicker-clock-cell {
+      color: #94a3b8 !important;
+    }
+  }
+}
+
+/* Time Filter Sidebar Button Grid */
+.time-filter-wrapper .ranges-list {
+  display: grid !important;
+  grid-template-columns: 1fr !important;
+  gap: 2px !important;
+  padding: 0 8px !important;
+
+  .range-btn {
+    border-radius: 6px !important;
+    height: 36px !important;
+    font-size: 12.5px !important;
+    transition: all 0.2s ease !important;
+    width: calc(100% - 16px) !important;
+    margin: 0 8px !important;
+
+    &:hover {
+      background-color: #e2e8f0 !important;
+      transform: translateX(4px) !important;
+    }
+  }
+}
+
+.dark-theme .time-filter-wrapper .ranges-list .range-btn:hover {
+  background-color: #334155 !important;
+}
+
+/* CDK-based Loading Overlay backdrop */
+.loading-backdrop {
+  background: rgba(0, 0, 0, 0.6) !important;
+}
+
+/* Hide the legacy #global-loader element in index.html (no longer used for display) */
+#global-loader {
+  display: none !important;
 }
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/controller/apv_services_metrics.py
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/controller/apv_services_metrics.py	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/controller/apv_services_metrics.py	(working copy)
@@ -1,4 +1,5 @@
 from django.http import JsonResponse
+import json
 
 from cm.lib.libbasic_operation import oper_log
 from hive.custom_exceptions import generic_exception as ge
@@ -14,8 +15,15 @@
                 'message': "Invalid HTTP method"
             }, status=400)
 
-        payload = getattr(request, 'json', {}) or {}
-        agent_hosts = payload.get('agent_host', None)
+        if request.body:
+            payload = json.loads(request.body)
+        else:
+            payload = {}
+        
+        agent_hosts = payload.get('agent_host')
+        if agent_hosts is None and 'query' in payload:
+            agent_hosts = payload['query'].get('agent_host')
+
         if agent_hosts is not None:
             if isinstance(agent_hosts, str):
                 agent_hosts = [agent_hosts]
@@ -30,7 +38,9 @@
     except Exception as e:
         msg = f'Exception while getting top apv virtual services metrics: {str(e)}'
         oper_log('error', 'system', msg)
-        raise ge.GenericError(500, msg)
+        import traceback
+        traceback.print_exc()
+        return JsonResponse({'error': 500, 'message': msg}, status=500)
 
 
 def handle_get_top_apv_real_services_metrics(request, path=None):
@@ -41,8 +51,15 @@
                 'message': "Invalid HTTP method"
             }, status=400)
 
-        payload = getattr(request, 'json', {}) or {}
-        agent_hosts = payload.get('agent_host', None)
+        if request.body:
+            payload = json.loads(request.body)
+        else:
+            payload = {}
+
+        agent_hosts = payload.get('agent_host')
+        if agent_hosts is None and 'query' in payload:
+            agent_hosts = payload['query'].get('agent_host')
+
         if agent_hosts is not None:
             if isinstance(agent_hosts, str):
                 agent_hosts = [agent_hosts]
@@ -68,8 +85,15 @@
                 'message': "Invalid HTTP method"
             }, status=400)
 
-        payload = getattr(request, 'json', {}) or {}
-        agent_hosts = payload.get('agent_host', None)
+        if request.body:
+            payload = json.loads(request.body)
+        else:
+            payload = {}
+
+        agent_hosts = payload.get('agent_host')
+        if agent_hosts is None and 'query' in payload:
+            agent_hosts = payload['query'].get('agent_host')
+
         if agent_hosts is not None:
             if isinstance(agent_hosts, str):
                 agent_hosts = [agent_hosts]
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/controller/device_metrics.py
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/controller/device_metrics.py	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/controller/device_metrics.py	(working copy)
@@ -36,7 +36,7 @@
         metric_name = req_body.get("metric_name", None)
 
         json_response = fetch_device_metrics(
-            agent_host, device_type, interval, metric_name, time_from, time_to
+            agent_host, device_type, metric_name, interval, time_from, time_to
         )
 
         return JsonResponse(json_response)
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/controller/slb_stats.py
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/controller/slb_stats.py	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/controller/slb_stats.py	(working copy)
@@ -35,7 +35,13 @@
             req = {}
 
         agent_host = req.get("agent_host", None)
+        if agent_host is None and 'query' in req:
+            agent_host = req['query'].get('agent_host')
+            
         server_id = req.get("server_id", None)
+        if server_id is None and 'query' in req:
+            server_id = req['query'].get('server_id')
+
         interval = req.get("interval", "20s")
         time_from = req.get("from", None)
         time_to = req.get("to", None)
@@ -58,7 +64,12 @@
     try:
         req_body = json.loads(request.body)
         agent_host = req_body.get("agent_host", None)
+        if agent_host is None and 'query' in req_body:
+            agent_host = req_body['query'].get('agent_host')
+
         server_id = req_body.get("server_id", None)
+        if server_id is None and 'query' in req_body:
+            server_id = req_body['query'].get('server_id')
         interval = req_body.get("interval", "1m")
         time_from = req_body.get("from", None)
         time_to = req_body.get("to", None)
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/db/slb_stats_queries.py
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/db/slb_stats_queries.py	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/db/slb_stats_queries.py	(working copy)
@@ -63,11 +63,11 @@
             params.append(agent_host)
 
         if time_from and time_to:
-            time_filter = f"AND time >= '{time_from}' AND time <= '{time_to}'"
+            time_filter = f"AND time >= {time_from} AND time <= {time_to}"
         elif time_from:
-            time_filter = f"AND time >= '{time_from}'"
+            time_filter = f"AND time >= {time_from}"
         elif time_to:
-            time_filter = f"AND time <= '{time_to}'"
+            time_filter = f"AND time <= {time_to}"
         else:
             time_filter = "AND time > now() - interval '20 seconds'"
 
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/repositories/apv_services_metrics.py
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/repositories/apv_services_metrics.py	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/repositories/apv_services_metrics.py	(working copy)
@@ -8,102 +8,83 @@
     def get_top_virtual_services_metrics(cur, agent_hosts=None, interval_seconds=20, limit=5):
         """
         Fetch top Hits, Connections, and Network metrics from apv_virtual_stats
-        - agent_hosts: optional list of agent hosts to filter
-        - interval_seconds: look-back interval for metrics
-        - limit: top N metrics per category
         """
-        # Build agent_host filter
+        params = {
+            'interval': f"{interval_seconds} seconds",
+            'limit': limit
+        }
         host_filter = ""
-        params = []
         if agent_hosts:
-            placeholders = ','.join(['%s'] * len(agent_hosts))
-            host_filter = f"AND agent_host IN ({placeholders})"
-            params.extend(agent_hosts)
+            host_filter = "AND agent_host = ANY(%(agent_hosts)s)"
+            params['agent_hosts'] = agent_hosts
 
+        # Using a simpler hits calculation for debugging/robustness if needed, 
+        # but let's keep the full expr if possible, just simplified in query structure.
+        total_hits_expr = "(COALESCE(url_hits, 0) + COALESCE(hostname_hits, 0) + COALESCE(perstnt_cookie_hits, 0) + COALESCE(qos_cookie_hits, 0) + COALESCE(default_hits, 0) + COALESCE(perstnt_url_hits, 0) + COALESCE(static_hits, 0) + COALESCE(qos_network_hits, 0) + COALESCE(qos_url_hits, 0) + COALESCE(backup_hits, 0) + COALESCE(cache_hits, 0) + COALESCE(regex_hits, 0) + COALESCE(rcookie_hits, 0) + COALESCE(icookie_hits, 0) + COALESCE(qos_client_port_hits, 0) + COALESCE(qos_body_hits, 0) + COALESCE(header_hits, 0) + COALESCE(hash_url_hits, 0) + COALESCE(redirect_hits, 0))"
+
         _query = f"""
-        WITH HitsDeltas AS (
+        WITH VirtualStats AS (
             SELECT
-                serverid AS service_name,
+                serverid,
                 agent_host,
-                MAX(total_hits) - MIN(total_hits) AS hits
+                time,
+                {total_hits_expr} AS total_hits,
+                conn_cnt,
+                in_byte_per_sec,
+                out_byte_per_sec
             FROM apv_virtual_stats
-            WHERE time >= NOW() - INTERVAL '{interval_seconds} seconds'
+            WHERE time >= (NOW() AT TIME ZONE 'UTC') - INTERVAL %(interval)s
             {host_filter}
-            GROUP BY serverid, agent_host
         ),
         HitsTop AS (
             SELECT
                 'hits' AS metric,
                 agent_host,
-                service_name,
-                hits AS value,
+                serverid AS service_name,
+                (MAX(total_hits) - MIN(total_hits)) AS value,
                 NULL::bigint AS received,
                 NULL::bigint AS sent
-            FROM HitsDeltas
-            ORDER BY hits DESC
-            LIMIT {limit}
+            FROM VirtualStats
+            GROUP BY agent_host, serverid
+            ORDER BY value DESC
+            LIMIT %(limit)s
         ),
-        ConnLatest AS (
-            SELECT DISTINCT ON (serverid, agent_host)
-                serverid AS service_name,
-                agent_host,
-                conn_cnt
-            FROM apv_virtual_stats
-            WHERE time >= NOW() - INTERVAL '{interval_seconds} seconds'
-            {host_filter}
-            ORDER BY serverid, agent_host, time DESC
-        ),
         ConnTop AS (
-            SELECT
+            SELECT DISTINCT ON (serverid, agent_host)
                 'connections' AS metric,
                 agent_host,
-                service_name,
+                serverid AS service_name,
                 conn_cnt AS value,
                 NULL::bigint AS received,
                 NULL::bigint AS sent
-            FROM ConnLatest
-            ORDER BY conn_cnt DESC
-            LIMIT {limit}
-        ),
-        NetLatest AS (
-            SELECT DISTINCT ON (serverid, agent_host)
-                serverid AS service_name,
-                agent_host,
-                in_byte_per_sec,
-                out_byte_per_sec
-            FROM apv_virtual_stats
-            WHERE time >= NOW() - INTERVAL '{interval_seconds} seconds'
-            {host_filter}
+            FROM VirtualStats
             ORDER BY serverid, agent_host, time DESC
         ),
         NetTop AS (
-            SELECT
+            SELECT DISTINCT ON (serverid, agent_host)
                 'network' AS metric,
                 agent_host,
-                service_name,
-                (in_byte_per_sec + out_byte_per_sec) AS value,
-                in_byte_per_sec AS received,
-                out_byte_per_sec AS sent
-            FROM NetLatest
-            ORDER BY (in_byte_per_sec + out_byte_per_sec) DESC
-            LIMIT {limit}
-        )
-        SELECT *
-        FROM (
+                serverid AS service_name,
+                (in_byte_per_sec + out_byte_per_sec) * 8 AS value,
+                in_byte_per_sec * 8 AS received,
+                out_byte_per_sec * 8 AS sent
+            FROM VirtualStats
+            ORDER BY serverid, agent_host, time DESC
+        ),
+        UnionStats AS (
             SELECT * FROM HitsTop
             UNION ALL
-            SELECT * FROM ConnTop
+            (SELECT * FROM ConnTop ORDER BY value DESC LIMIT %(limit)s)
             UNION ALL
-            SELECT * FROM NetTop
-        ) t
-        ORDER BY metric, value DESC;
+            (SELECT * FROM NetTop ORDER BY value DESC LIMIT %(limit)s)
+        )
+        SELECT * FROM UnionStats ORDER BY metric, value DESC;
         """
 
         cur.execute(_query, params)
         rows = cur.fetchall()
         cur.close()
 
-        # Convert rows to VirtualServicesMetrics objects
         metrics_list = []
         for row in rows:
             metric_obj = VirtualServicesMetricsRepo.parse_virtual_service_metric(row)
@@ -268,7 +249,7 @@
                 agent_host,
                 MAX(CAST(link_hits AS BIGINT)) - MIN(CAST(link_hits AS BIGINT)) AS hits
             FROM apv_llb_stats
-            WHERE time >= NOW() - INTERVAL '%(interval)s seconds' {host_filter}
+            WHERE time >= NOW() - (INTERVAL '1 second' * %(interval)s) {host_filter}
             GROUP BY link_name, agent_host
         ),
         HitsTop AS (
@@ -289,7 +270,7 @@
                 agent_host,
                 CAST(link_conn AS BIGINT) AS conn
             FROM apv_llb_stats
-            WHERE time >= NOW() - INTERVAL '%(interval)s seconds' {host_filter}
+            WHERE time >= NOW() - (INTERVAL '1 second' * %(interval)s) {host_filter}
             ORDER BY link_name, agent_host, time DESC
         ),
         ConnTop AS (
@@ -313,7 +294,7 @@
                 (CAST(link_bandwid_in AS BIGINT) * 8 +
                  CAST(link_bandwid_out AS BIGINT) * 8) AS total
             FROM apv_llb_stats
-            WHERE time >= NOW() - INTERVAL '%(interval)s seconds' {host_filter}
+            WHERE time >= NOW() - (INTERVAL '1 second' * %(interval)s) {host_filter}
             ORDER BY link_name, agent_host, time DESC
         ),
         NetTop AS (
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/services/slb_stats_service.py
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/services/slb_stats_service.py	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/services/slb_stats_service.py	(working copy)
@@ -18,7 +18,7 @@
     elif req.get("stat_name") == "connections_per_sec":
         response = SLBStats.get_connections_per_sec(agent_host, server_id, interval, time_from, time_to)
     else:
-        response = SLBStats.get_virtual_service_stats(agent_host, time_from, time_from)
+        response = SLBStats.get_virtual_service_stats(agent_host, time_from, time_to)
     return response
 
 
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/services/utils.py
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/services/utils.py	(revision 2948)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/services/utils.py	(working copy)
@@ -2,6 +2,7 @@
 import os
 import subprocess
 import dateutil
+from dateutil import parser
 
 from django.http import HttpResponse
 
@@ -296,8 +297,8 @@
         else:
             # Assume ISO8601 timestamp
             try:
-                dt = dateutil.parser.isoparse(value)
-                return f"'{dt.strftime('%Y-%m-%d %H:%M:%S')}'"
+                dt = parser.isoparse(value)
+                return f"'{dt.strftime('%Y-%m-%d %H:%M:%S')}'::timestamptz"
             except Exception:
                 raise ge.GenericError(400, f"Invalid time format: {value}")
     return default