Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/search-from-results/search-from-results.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/search-from-results/search-from-results.html	(revision 2927)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/search-from-results/search-from-results.html	(working copy)
@@ -1,6 +1,5 @@
-<mat-form-field appearance="outline" class="search-field">
+<mat-form-field appearance="outline" class="search-field" subscriptSizing="dynamic">
     <fa-icon [icon]="faSearch" matPrefix class="search-icon"></fa-icon>
-    <mat-label>{{ placeholder }}</mat-label>
     <input matInput (keyup)="onSearch()" [placeholder]="placeholder" [(ngModel)]="searchKey">
     @if (searchKey) {
     <button matSuffix mat-icon-button aria-label="Clear" (click)="clearSearch()">
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/search-from-results/search-from-results.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/search-from-results/search-from-results.scss	(revision 2927)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/search-from-results/search-from-results.scss	(working copy)
@@ -4,13 +4,28 @@
 }
 
 .search-icon {
-    margin: 0 8px;
-    color: #757575;
+    margin-right: 12px;
+    margin-left: 4px;
+    color: #9e9e9e;
+    font-size: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
+::ng-deep {
+    .mat-mdc-form-field-flex {
+        align-items: center !important;
+    }
+
+    .mat-mdc-form-field-infix {
+        padding: 0 !important;
+        display: flex !important;
+        align-items: center !important;
+        min-height: 48px !important;
+    }
+}
+
 mat-icon {
     vertical-align: middle;
 }
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.scss	(revision 2927)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.scss	(working copy)
@@ -22,51 +22,71 @@
 
 .dashboard-card {
   background: var(--surface-bg);
-  border-radius: 12px;
-  border: none;
-  min-width: 0; // Add min-width for flex/grid shrinking
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-  padding: 12px; // Reduced from 16px
+  border-radius: 16px;
+  border: 1px solid var(--border-color);
+  min-width: 0;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+  padding: 16px;
   display: flex;
   flex-direction: column;
-  height: 300px;
-  /* Slightly reduced height to fit more vertically */
-  transition: transform 0.2s, box-shadow 0.2s;
+  height: 320px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
 
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: transparent;
+    transition: background 0.3s;
+  }
+
   &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    transform: translateY(-4px);
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
+    
+    &::before {
+      background: linear-gradient(90deg, #00d2ff, #3a7bd5);
+    }
   }
 
   .card-header {
     display: flex;
     justify-content: space-between;
-    align-items: baseline;
-    margin-bottom: 4px; // Reduced from 12px */
+    align-items: center;
+    margin-bottom: 12px;
 
     h3 {
-      font-size: 16px;
-      font-weight: 600;
+      font-size: 15px;
+      font-weight: 700;
       color: var(--text-primary);
       margin: 0;
+      letter-spacing: -0.01em;
+      text-transform: uppercase;
+      opacity: 0.9;
     }
 
     .subtitle {
-      font-size: 12px;
-      color: var(--text-secondary);
-      font-weight: 500;
-      background: var(--border-color);
-      padding: 2px 8px;
-      border-radius: 12px;
+      font-size: 11px;
+      color: #fff;
+      font-weight: 700;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      padding: 3px 10px;
+      border-radius: 20px;
+      box-shadow: 0 2px 4px rgba(118, 75, 162, 0.3);
     }
   }
 
   .chart-content {
     flex: 1;
     width: 100%;
-    min-width: 0; // Essential for flex child shrinking
-    min-height: 0; // Essential for flex child overflow
-    overflow: hidden; // Prevent graph overflow during resize // Essential for flex child overflow
+    min-width: 0;
+    min-height: 0;
+    position: relative;
 
     .echart-container {
       width: 100%;
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.ts	(revision 2927)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.ts	(working copy)
@@ -269,23 +269,49 @@
   getHorizontalBarChartOptions(label: string, metrics: any[], color: string): EChartsOption {
     const isDark = document.body.classList.contains('dark-theme');
     const colors = this.getThemeColors(isDark);
+
+    // Modern color palettes
+    const gradientColors: any = {
+      'Connections': [
+        { offset: 0, color: '#00d2ff' },
+        { offset: 1, color: '#3a7bd5' }
+      ],
+      'Hits': [
+        { offset: 0, color: '#8e2de2' },
+        { offset: 1, color: '#4a00e0' }
+      ]
+    };
+
+    const selectedGradient = gradientColors[label] || [
+      { offset: 0, color: color },
+      { offset: 1, color: color }
+    ];
 
     return {
       tooltip: {
         trigger: 'axis',
         axisPointer: {
-          type: 'shadow'
+          type: 'shadow',
+          shadowStyle: {
+            color: isDark ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.02)'
+          }
         },
         backgroundColor: colors.tooltipBg,
         borderColor: colors.tooltipBorder,
+        borderWidth: 1,
+        padding: [10, 15],
         textStyle: {
-          color: colors.textMain
-        }
+          color: colors.textMain,
+          fontSize: 13,
+          fontFamily: "'Inter', sans-serif"
+        },
+        extraCssText: 'box-shadow: 0 4px 20px rgba(0,0,0,0.15); border-radius: 8px;'
       },
       grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '3%',
+        left: '5%',
+        right: '12%',
+        bottom: '8%',
+        top: '5%',
         containLabel: true
       },
       xAxis: {
@@ -293,21 +319,35 @@
         boundaryGap: [0, 0.01],
         axisLabel: {
           formatter: '{value}',
-          color: colors.textMuted
+          color: colors.textMuted,
+          fontSize: 11
         },
         splitLine: {
-          lineStyle: { color: colors.splitLine }
-        }
+          show: true,
+          lineStyle: {
+            color: colors.splitLine,
+            type: 'dashed',
+            opacity: 0.5
+          }
+        },
+        axisLine: { show: false },
+        axisTick: { show: false }
       },
       yAxis: {
         type: 'category',
         data: metrics.map(item => item.name),
         inverse: true,
         axisLabel: {
-          width: 80,
+          width: 120,
           overflow: 'truncate',
-          color: colors.textMuted
-        }
+          color: colors.textMuted,
+          fontSize: 11,
+          margin: 15
+        },
+        axisLine: {
+          lineStyle: { color: colors.splitLine }
+        },
+        axisTick: { show: false }
       },
       series: [
         {
@@ -315,16 +355,34 @@
           type: 'bar',
           data: metrics.map(item => item.value),
           itemStyle: {
-            color: color,
-            borderRadius: [0, 4, 4, 0]
+            color: {
+              type: 'linear',
+              x: 0, y: 0, x2: 1, y2: 0,
+              colorStops: selectedGradient
+            },
+            borderRadius: [0, 20, 20, 0],
+            shadowBlur: 8,
+            shadowColor: isDark ? 'rgba(0,0,0,0.5)' : 'rgba(0,0,0,0.1)',
+            shadowOffsetX: 2
           },
           label: {
             show: true,
             position: 'right',
             formatter: '{c}',
-            color: colors.textMain
+            color: colors.textMain,
+            fontSize: 11,
+            fontWeight: 600,
+            distance: 10
           },
-          barWidth: '60%'
+          barWidth: '50%',
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 15,
+              shadowOffsetX: 4
+            }
+          },
+          animationDuration: 1500,
+          animationEasing: 'cubicOut'
         }
       ]
     };
@@ -338,18 +396,33 @@
       tooltip: {
         trigger: 'axis',
         axisPointer: {
-          type: 'shadow'
+          type: 'shadow',
+          shadowStyle: {
+            color: isDark ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.02)'
+          }
         },
         backgroundColor: colors.tooltipBg,
         borderColor: colors.tooltipBorder,
+        borderWidth: 1,
+        padding: [10, 15],
         textStyle: {
-          color: colors.textMain
+          color: colors.textMain,
+          fontSize: 13,
+          fontFamily: "'Inter', sans-serif"
         },
+        extraCssText: 'box-shadow: 0 4px 20px rgba(0,0,0,0.15); border-radius: 8px;',
         formatter: (params: any) => {
-          let tooltipContent = `${params[0].name}<br/>`;
+          let tooltipContent = `<div style="margin-bottom: 5px; font-weight: 600; color: ${colors.textMain}">${params[0].name}</div>`;
           params.forEach((param: any) => {
             const valueInMbps = param.value.toFixed(2);
-            tooltipContent += `${param.marker} ${param.seriesName}: ${valueInMbps} Mbps<br/>`;
+            tooltipContent += `
+              <div style="display: flex; justify-content: space-between; align-items: center; min-width: 150px;">
+                <span style="display: flex; align-items: center;">
+                  <span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: ${param.color}; margin-right: 8px;"></span>
+                  ${param.seriesName}
+                </span>
+                <span style="font-weight: 600;">${valueInMbps} Mbps</span>
+              </div>`;
           });
           return tooltipContent;
         }
@@ -357,12 +430,19 @@
       legend: {
         data: ['Inbound', 'Outbound'],
         bottom: 0,
-        textStyle: { color: colors.textMain }
+        textStyle: {
+          color: colors.textMain,
+          fontSize: 11
+        },
+        itemWidth: 12,
+        itemHeight: 12,
+        icon: 'circle'
       },
       grid: {
-        left: '3%',
+        left: '5%',
         right: '15%',
-        bottom: '10%',
+        bottom: '15%',
+        top: '5%',
         containLabel: true
       },
       xAxis: {
@@ -370,20 +450,42 @@
         boundaryGap: [0, 0.01],
         name: 'Mbps',
         nameLocation: 'end',
-        nameGap: 20,
-        axisLabel: { color: colors.textMuted },
-        splitLine: { lineStyle: { color: colors.splitLine } },
-        nameTextStyle: { color: colors.textMuted }
+        nameGap: 10,
+        axisLabel: {
+          color: colors.textMuted,
+          fontSize: 11
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: colors.splitLine,
+            type: 'dashed',
+            opacity: 0.5
+          }
+        },
+        nameTextStyle: {
+          color: colors.textMuted,
+          fontSize: 11,
+          padding: [0, 0, 0, 10]
+        },
+        axisLine: { show: false },
+        axisTick: { show: false }
       },
       yAxis: {
         type: 'category',
         data: data.map(item => item.name),
         inverse: true,
         axisLabel: {
-          width: 80,
+          width: 120,
           overflow: 'truncate',
-          color: colors.textMuted
-        }
+          color: colors.textMuted,
+          fontSize: 11,
+          margin: 15
+        },
+        axisLine: {
+          lineStyle: { color: colors.splitLine }
+        },
+        axisTick: { show: false }
       },
       series: [
         {
@@ -392,8 +494,18 @@
           stack: 'total',
           data: data.map(item => item.inbound),
           itemStyle: {
-            color: '#4caf50'
-          }
+            color: {
+              type: 'linear',
+              x: 0, y: 0, x2: 1, y2: 0,
+              colorStops: [
+                { offset: 0, color: '#34e89e' },
+                { offset: 1, color: '#0f3443' }
+              ]
+            }
+          },
+          barWidth: '50%',
+          animationDuration: 1500,
+          animationEasing: 'cubicOut'
         },
         {
           name: 'Outbound',
@@ -401,9 +513,18 @@
           stack: 'total',
           data: data.map(item => item.outbound),
           itemStyle: {
-            color: '#2196f3',
-            borderRadius: [0, 4, 4, 0]
-          }
+            color: {
+              type: 'linear',
+              x: 0, y: 0, x2: 1, y2: 0,
+              colorStops: [
+                { offset: 0, color: '#00c6ff' },
+                { offset: 1, color: '#0072ff' }
+              ]
+            },
+            borderRadius: [0, 20, 20, 0]
+          },
+          animationDuration: 1800,
+          animationEasing: 'cubicOut'
         }
       ]
     };
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-avx/dashboard-insights-avx.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-avx/dashboard-insights-avx.scss	(revision 2927)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-avx/dashboard-insights-avx.scss	(working copy)
@@ -22,41 +22,62 @@
 
 .dashboard-card {
   background: var(--surface-bg);
-  border-radius: 12px;
-  border: none;
+  border-radius: 16px;
+  border: 1px solid var(--border-color);
   min-width: 0;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-  padding: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+  padding: 16px;
   display: flex;
   flex-direction: column;
-  height: 300px;
-  transition: transform 0.2s, box-shadow 0.2s;
+  height: 320px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
 
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: transparent;
+    transition: background 0.3s;
+  }
+
   &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    transform: translateY(-4px);
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
+
+    &::before {
+      background: linear-gradient(90deg, #f2994a, #f2c94c);
+    }
   }
 
   .card-header {
     display: flex;
     justify-content: space-between;
-    align-items: baseline;
-    margin-bottom: 4px;
+    align-items: center;
+    margin-bottom: 12px;
 
     h3 {
-      font-size: 16px;
-      font-weight: 600;
+      font-size: 15px;
+      font-weight: 700;
       color: var(--text-primary);
       margin: 0;
+      letter-spacing: -0.01em;
+      text-transform: uppercase;
+      opacity: 0.9;
     }
 
     .subtitle {
-      font-size: 12px;
-      color: var(--text-secondary);
-      font-weight: 500;
-      background: var(--border-color);
-      padding: 2px 8px;
-      border-radius: 12px;
+      font-size: 11px;
+      color: #fff;
+      font-weight: 700;
+      background: linear-gradient(135deg, #f2994a 0%, #f2c94c 100%);
+      padding: 3px 10px;
+      border-radius: 20px;
+      box-shadow: 0 2px 4px rgba(242, 153, 74, 0.3);
     }
   }
 
@@ -65,7 +86,7 @@
     width: 100%;
     min-width: 0;
     min-height: 0;
-    overflow: hidden;
+    position: relative;
 
     .echart-container {
       width: 100%;
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-avx/dashboard-insights-avx.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-avx/dashboard-insights-avx.ts	(revision 2927)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-avx/dashboard-insights-avx.ts	(working copy)
@@ -209,22 +209,52 @@
     const isDark = document.body.classList.contains('dark-theme');
     const colors = this.getThemeColors(isDark);
 
+    // Modern color palettes based on metric type
+    const gradientColors: any = {
+      'CPU %': [
+        { offset: 0, color: '#8e2de2' },
+        { offset: 1, color: '#4a00e0' }
+      ],
+      'Memory %': [
+        { offset: 0, color: '#00d2ff' },
+        { offset: 1, color: '#3a7bd5' }
+      ],
+      'Disk %': [
+        { offset: 0, color: '#f2994a' },
+        { offset: 1, color: '#f2c94c' }
+      ]
+    };
+
+    const selectedGradient = gradientColors[label] || [
+      { offset: 0, color: color },
+      { offset: 1, color: color }
+    ];
+
     return {
       tooltip: {
         trigger: 'axis',
         axisPointer: {
-          type: 'shadow'
+          type: 'shadow',
+          shadowStyle: {
+            color: isDark ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.02)'
+          }
         },
         backgroundColor: colors.tooltipBg,
         borderColor: colors.tooltipBorder,
+        borderWidth: 1,
+        padding: [10, 15],
         textStyle: {
-          color: colors.textMain
-        }
+          color: colors.textMain,
+          fontSize: 13,
+          fontFamily: "'Inter', sans-serif"
+        },
+        extraCssText: 'box-shadow: 0 4px 20px rgba(0,0,0,0.15); border-radius: 8px;'
       },
       grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '3%',
+        left: '5%',
+        right: '12%',
+        bottom: '8%',
+        top: '5%',
         containLabel: true
       },
       xAxis: {
@@ -233,21 +263,35 @@
         max: 100,
         axisLabel: {
           formatter: '{value}%',
-          color: colors.textMuted
+          color: colors.textMuted,
+          fontSize: 11
         },
         splitLine: {
-          lineStyle: { color: colors.splitLine }
-        }
+          show: true,
+          lineStyle: {
+            color: colors.splitLine,
+            type: 'dashed',
+            opacity: 0.5
+          }
+        },
+        axisLine: { show: false },
+        axisTick: { show: false }
       },
       yAxis: {
         type: 'category',
         data: metrics.map(item => item.name),
         inverse: true, // Show top value at the top
         axisLabel: {
-          width: 80,
+          width: 120,
           overflow: 'truncate',
-          color: colors.textMuted
-        }
+          color: colors.textMuted,
+          fontSize: 11,
+          margin: 15
+        },
+        axisLine: {
+          lineStyle: { color: colors.splitLine }
+        },
+        axisTick: { show: false }
       },
       series: [
         {
@@ -255,16 +299,34 @@
           type: 'bar',
           data: metrics.map(item => item.value),
           itemStyle: {
-            color: color,
-            borderRadius: [0, 4, 4, 0]
+            color: {
+              type: 'linear',
+              x: 0, y: 0, x2: 1, y2: 0,
+              colorStops: selectedGradient
+            },
+            borderRadius: [0, 20, 20, 0],
+            shadowBlur: 8,
+            shadowColor: isDark ? 'rgba(0,0,0,0.5)' : 'rgba(0,0,0,0.1)',
+            shadowOffsetX: 2
           },
           label: {
             show: true,
             position: 'right',
             formatter: '{c}%',
-            color: colors.textMain
+            color: colors.textMain,
+            fontSize: 11,
+            fontWeight: 600,
+            distance: 10
           },
-          barWidth: '60%'
+          barWidth: '50%',
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 15,
+              shadowOffsetX: 4
+            }
+          },
+          animationDuration: 1500,
+          animationEasing: 'cubicOut'
         }
       ]
     };
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.scss	(revision 2927)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.scss	(working copy)
@@ -22,41 +22,62 @@
 
 .dashboard-card {
   background: var(--surface-bg);
-  border-radius: 12px;
-  border: none;
+  border-radius: 16px;
+  border: 1px solid var(--border-color);
   min-width: 0;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-  padding: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+  padding: 16px;
   display: flex;
   flex-direction: column;
-  height: 300px;
-  transition: transform 0.2s, box-shadow 0.2s;
+  height: 320px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
 
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: transparent;
+    transition: background 0.3s;
+  }
+
   &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    transform: translateY(-4px);
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
+
+    &::before {
+      background: linear-gradient(90deg, #f093fb, #f5576c);
+    }
   }
 
   .card-header {
     display: flex;
     justify-content: space-between;
-    align-items: baseline;
-    margin-bottom: 4px;
+    align-items: center;
+    margin-bottom: 12px;
 
     h3 {
-      font-size: 16px;
-      font-weight: 600;
+      font-size: 15px;
+      font-weight: 700;
       color: var(--text-primary);
       margin: 0;
+      letter-spacing: -0.01em;
+      text-transform: uppercase;
+      opacity: 0.9;
     }
 
     .subtitle {
-      font-size: 12px;
-      color: var(--text-secondary);
-      font-weight: 500;
-      background: var(--border-color);
-      padding: 2px 8px;
-      border-radius: 12px;
+      font-size: 11px;
+      color: #fff;
+      font-weight: 700;
+      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+      padding: 3px 10px;
+      border-radius: 20px;
+      box-shadow: 0 2px 4px rgba(245, 87, 108, 0.3);
     }
   }
 
@@ -65,7 +86,7 @@
     width: 100%;
     min-width: 0;
     min-height: 0;
-    overflow: hidden;
+    position: relative;
 
     .echart-container {
       width: 100%;
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.ts	(revision 2927)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.ts	(working copy)
@@ -207,22 +207,44 @@
     const isDark = document.body.classList.contains('dark-theme');
     const colors = this.getThemeColors(isDark);
 
+    // Modern color palettes
+    const gradientColors: any = {
+      'Sessions': [
+        { offset: 0, color: '#f093fb' },
+        { offset: 1, color: '#f5576c' }
+      ]
+    };
+
+    const selectedGradient = gradientColors[label] || [
+      { offset: 0, color: color },
+      { offset: 1, color: color }
+    ];
+
     return {
       tooltip: {
         trigger: 'axis',
         axisPointer: {
-          type: 'shadow'
+          type: 'shadow',
+          shadowStyle: {
+            color: isDark ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.02)'
+          }
         },
         backgroundColor: colors.tooltipBg,
         borderColor: colors.tooltipBorder,
+        borderWidth: 1,
+        padding: [10, 15],
         textStyle: {
-          color: colors.textMain
-        }
+          color: colors.textMain,
+          fontSize: 13,
+          fontFamily: "'Inter', sans-serif"
+        },
+        extraCssText: 'box-shadow: 0 4px 20px rgba(0,0,0,0.15); border-radius: 8px;'
       },
       grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '3%',
+        left: '5%',
+        right: '12%',
+        bottom: '8%',
+        top: '5%',
         containLabel: true
       },
       xAxis: {
@@ -230,21 +252,35 @@
         boundaryGap: [0, 0.01],
         axisLabel: {
           formatter: '{value}',
-          color: colors.textMuted
+          color: colors.textMuted,
+          fontSize: 11
         },
         splitLine: {
-          lineStyle: { color: colors.splitLine }
-        }
+          show: true,
+          lineStyle: {
+            color: colors.splitLine,
+            type: 'dashed',
+            opacity: 0.5
+          }
+        },
+        axisLine: { show: false },
+        axisTick: { show: false }
       },
       yAxis: {
         type: 'category',
         data: metrics.map(item => item.name),
         inverse: true,
         axisLabel: {
-          width: 80,
+          width: 120,
           overflow: 'truncate',
-          color: colors.textMuted
-        }
+          color: colors.textMuted,
+          fontSize: 11,
+          margin: 15
+        },
+        axisLine: {
+          lineStyle: { color: colors.splitLine }
+        },
+        axisTick: { show: false }
       },
       series: [
         {
@@ -252,16 +288,34 @@
           type: 'bar',
           data: metrics.map(item => item.value),
           itemStyle: {
-            color: color,
-            borderRadius: [0, 4, 4, 0]
+            color: {
+              type: 'linear',
+              x: 0, y: 0, x2: 1, y2: 0,
+              colorStops: selectedGradient
+            },
+            borderRadius: [0, 20, 20, 0],
+            shadowBlur: 8,
+            shadowColor: isDark ? 'rgba(0,0,0,0.5)' : 'rgba(0,0,0,0.1)',
+            shadowOffsetX: 2
           },
           label: {
             show: true,
             position: 'right',
             formatter: '{c}',
-            color: colors.textMain
+            color: colors.textMain,
+            fontSize: 11,
+            fontWeight: 600,
+            distance: 10
           },
-          barWidth: '60%'
+          barWidth: '50%',
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 15,
+              shadowOffsetX: 4
+            }
+          },
+          animationDuration: 1500,
+          animationEasing: 'cubicOut'
         }
       ]
     };
@@ -275,18 +329,33 @@
       tooltip: {
         trigger: 'axis',
         axisPointer: {
-          type: 'shadow'
+          type: 'shadow',
+          shadowStyle: {
+            color: isDark ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.02)'
+          }
         },
         backgroundColor: colors.tooltipBg,
         borderColor: colors.tooltipBorder,
+        borderWidth: 1,
+        padding: [10, 15],
         textStyle: {
-          color: colors.textMain
+          color: colors.textMain,
+          fontSize: 13,
+          fontFamily: "'Inter', sans-serif"
         },
+        extraCssText: 'box-shadow: 0 4px 20px rgba(0,0,0,0.15); border-radius: 8px;',
         formatter: (params: any) => {
-          let tooltipContent = `${params[0].name}<br/>`;
+          let tooltipContent = `<div style="margin-bottom: 5px; font-weight: 600; color: ${colors.textMain}">${params[0].name}</div>`;
           params.forEach((param: any) => {
             const valueInMbps = param.value.toFixed(2);
-            tooltipContent += `${param.marker} ${param.seriesName}: ${valueInMbps} Mbps<br/>`;
+            tooltipContent += `
+              <div style="display: flex; justify-content: space-between; align-items: center; min-width: 150px;">
+                <span style="display: flex; align-items: center;">
+                  <span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: ${param.color}; margin-right: 8px;"></span>
+                  ${param.seriesName}
+                </span>
+                <span style="font-weight: 600;">${valueInMbps} Mbps</span>
+              </div>`;
           });
           return tooltipContent;
         }
@@ -294,12 +363,19 @@
       legend: {
         data: ['Inbound', 'Outbound'],
         bottom: 0,
-        textStyle: { color: colors.textMain }
+        textStyle: {
+          color: colors.textMain,
+          fontSize: 11
+        },
+        itemWidth: 12,
+        itemHeight: 12,
+        icon: 'circle'
       },
       grid: {
-        left: '3%',
+        left: '5%',
         right: '15%',
-        bottom: '10%',
+        bottom: '15%',
+        top: '5%',
         containLabel: true
       },
       xAxis: {
@@ -307,20 +383,42 @@
         boundaryGap: [0, 0.01],
         name: 'Mbps',
         nameLocation: 'end',
-        nameGap: 20,
-        axisLabel: { color: colors.textMuted },
-        splitLine: { lineStyle: { color: colors.splitLine } },
-        nameTextStyle: { color: colors.textMuted }
+        nameGap: 10,
+        axisLabel: {
+          color: colors.textMuted,
+          fontSize: 11
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: colors.splitLine,
+            type: 'dashed',
+            opacity: 0.5
+          }
+        },
+        nameTextStyle: {
+          color: colors.textMuted,
+          fontSize: 11,
+          padding: [0, 0, 0, 10]
+        },
+        axisLine: { show: false },
+        axisTick: { show: false }
       },
       yAxis: {
         type: 'category',
         data: data.map(item => item.name),
         inverse: true,
         axisLabel: {
-          width: 80,
+          width: 120,
           overflow: 'truncate',
-          color: colors.textMuted
-        }
+          color: colors.textMuted,
+          fontSize: 11,
+          margin: 15
+        },
+        axisLine: {
+          lineStyle: { color: colors.splitLine }
+        },
+        axisTick: { show: false }
       },
       series: [
         {
@@ -329,8 +427,18 @@
           stack: 'total',
           data: data.map(item => item.inbound),
           itemStyle: {
-            color: '#4caf50'
-          }
+            color: {
+              type: 'linear',
+              x: 0, y: 0, x2: 1, y2: 0,
+              colorStops: [
+                { offset: 0, color: '#00F260' },
+                { offset: 1, color: '#0575E6' }
+              ]
+            }
+          },
+          barWidth: '50%',
+          animationDuration: 1500,
+          animationEasing: 'cubicOut'
         },
         {
           name: 'Outbound',
@@ -338,9 +446,18 @@
           stack: 'total',
           data: data.map(item => item.outbound),
           itemStyle: {
-            color: '#2196f3',
-            borderRadius: [0, 4, 4, 0]
-          }
+            color: {
+              type: 'linear',
+              x: 0, y: 0, x2: 1, y2: 0,
+              colorStops: [
+                { offset: 0, color: '#fc00ff' },
+                { offset: 1, color: '#00dbde' }
+              ]
+            },
+            borderRadius: [0, 20, 20, 0]
+          },
+          animationDuration: 1800,
+          animationEasing: 'cubicOut'
         }
       ]
     };
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/dashboard-system-insights.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/dashboard-system-insights.scss	(revision 2927)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/dashboard-system-insights.scss	(working copy)
@@ -47,17 +47,40 @@
 .dashboard-card {
   width: 100%;
   height: 100%;
-  border-radius: 12px;
+  border-radius: 16px;
   background-color: var(--card-bg);
   min-width: 0;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
-  border: none;
+  border: 1px solid var(--border-color);
   display: flex;
   flex-direction: column;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: transparent;
+    transition: background 0.3s;
+  }
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
+
+    &::before {
+      background: linear-gradient(90deg, var(--accent), #3a7bd5);
+    }
+  }
 }
 
 .card-content-wrapper {
-  padding: 16px !important;
+  padding: 20px !important;
   display: flex;
   flex-direction: column;
   height: 100%;
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 2928)
+++ /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)
@@ -120,24 +120,23 @@
     if (!option) return;
     const colors = this.getThemeColors(isDark);
 
-    // Common Background
-    option.backgroundColor = 'transparent'; // Ensure transparent to let card bg show
+    option.backgroundColor = 'transparent';
 
-    // Tooltips
     if (option.tooltip) {
-      option.tooltip.backgroundColor = isDark ? '#424242' : '#fff';
-      option.tooltip.borderColor = isDark ? '#616161' : '#ccc';
+      option.tooltip.backgroundColor = colors.tooltipBg;
+      option.tooltip.borderColor = colors.tooltipBorder;
       if (!option.tooltip.textStyle) option.tooltip.textStyle = {};
       option.tooltip.textStyle.color = colors.textMain;
+      option.tooltip.textStyle.fontFamily = "'Inter', sans-serif";
+      option.tooltip.extraCssText = 'box-shadow: 0 4px 20px rgba(0,0,0,0.15); border-radius: 8px;';
     }
 
-    // Legend
     if (option.legend) {
       if (!option.legend.textStyle) option.legend.textStyle = {};
       option.legend.textStyle.color = colors.textMain;
+      option.legend.textStyle.fontSize = 11;
     }
 
-    // Axes
     const applyAxisTheme = (axis: any) => {
       if (!axis) return;
       if (Array.isArray(axis)) {
@@ -149,48 +148,52 @@
 
       if (!axis.splitLine) axis.splitLine = {};
       if (!axis.splitLine.lineStyle) axis.splitLine.lineStyle = {};
-      // axis.splitLine.lineStyle.color = isDark ? '#505050' : '#e0e0e0'; // Optional: theme split lines
+      axis.splitLine.lineStyle.color = colors.splitLine;
 
       if (!axis.nameTextStyle) axis.nameTextStyle = {};
       axis.nameTextStyle.color = colors.textMuted;
     };
 
+    applyAxisTheme(option.xAxis);
+    applyAxisTheme(option.yAxis);
+
     if (option.series) {
       option.series.forEach((s: any) => {
-        // Standard Label
-        if (s.label) s.label.color = colors.textMain;
-
-        // Gauge/Pie Detail (Value)
-        if (s.detail) s.detail.color = colors.textMain;
-
-        // Gauge Axis Label
+        if (s.label) {
+          s.label.color = s.label.position === 'inside' ? '#fff' : colors.textMain;
+        }
+        if (s.detail) {
+          if (s.detail.rich) {
+            Object.values(s.detail.rich).forEach((r: any) => {
+              if (r.color === undefined || r.color === '#e0e0e0' || r.color === '#333333') {
+                // only override if it was a default color or not set
+              }
+            });
+          } else {
+            s.detail.color = colors.textMain;
+          }
+        }
         if (s.axisLabel) s.axisLabel.color = colors.textMuted;
-
-        // Gauge Title (Name)
-        if (s.title) s.title.color = colors.textMuted;
-
-        // Pie/Donut with center label often in label: { show: true ... }
-        // Ensure it's colored
+        if (s.title) s.title.color = colors.textMain;
         if (s.type === 'pie' || s.type === 'gauge') {
           if (!s.label) s.label = {};
           s.label.color = colors.textMain;
         }
       });
     }
-
-    if (option.graph) {
-      if (option.graph.edgeLabel) option.graph.edgeLabel.color = colors.textMain;
-    }
   }
 
   getThemeColors(isDark: boolean) {
     return {
-      textMain: isDark ? '#e0e0e0' : '#333333',
-      textMuted: isDark ? '#a0a0a0' : '#777777',
-      accent: '#1170cf', // Unified Brand Blue
-      green: isDark ? '#a5d6a7' : '#4caf50',   // Green 200
-      orange: isDark ? '#ffcc80' : '#ff9800',  // Orange 200
-      teal: isDark ? '#80cbc4' : '#009688'     // Teal 200
+      textMain: isDark ? '#ffffff' : '#333333',
+      textMuted: isDark ? '#b0b0b0' : '#666666',
+      accent: '#3a7bd5',
+      green: '#34e89e',
+      orange: '#f2994a',
+      teal: '#00d2ff',
+      tooltipBg: isDark ? 'rgba(30, 30, 30, 0.95)' : 'rgba(255, 255, 255, 0.95)',
+      tooltipBorder: isDark ? '#444' : '#eee',
+      splitLine: isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'
     };
   }
 
@@ -443,7 +446,6 @@
   }
 
   // Shared generic method for basic horizontal bar charts (CPU/Memory)
-  // Disk has specific byte formatting needs so we keep it separate or could be refactored later
   getGenericMultiNodeChartOptions(
     themeColors: any,
     usedData: number[],
@@ -452,16 +454,14 @@
     tooltipFormatter: (node: any, value: number) => string,
     titleText?: string
   ): EChartsOption {
-    // Dynamic sizing based on number of nodes
+    const isDark = document.body.classList.contains('dark-theme');
     const nodeCount = this.nodeMetrics.length;
     const isSingleNode = nodeCount === 1;
 
-    // More generous spacing for multi-node to prevent cutoffs, but less bottom space if no legend
-    const gridTop = isSingleNode ? '25%' : '20%'; // Need space for Title
-    const gridBottom = isSingleNode ? '35%' : '5%'; // Very little bottom space needed without legend
-    const barWidth = isSingleNode ? '40%' : undefined;
+    const gridTop = isSingleNode ? '25%' : '15%';
+    const gridBottom = isSingleNode ? '35%' : '10%';
+    const barWidth = isSingleNode ? '35%' : '45%';
 
-    // Create simple node labels (Node 1, Node 2, etc.)
     const nodeLabels = this.nodeMetrics.map((_, index) => `Node ${index + 1}`);
 
     return {
@@ -470,39 +470,48 @@
         left: 'center',
         top: 0,
         textStyle: {
-          fontSize: 12,
+          fontSize: 13,
           color: themeColors.textMain,
-          fontWeight: 'normal'
+          fontWeight: 600,
+          fontFamily: "'Inter', sans-serif"
         }
       } : undefined,
       tooltip: {
         trigger: 'axis',
-        axisPointer: { type: 'shadow' },
-        backgroundColor: themeColors.bg ? themeColors.bg : (document.body.classList.contains('dark-theme') ? '#424242' : '#fff'),
-        borderColor: document.body.classList.contains('dark-theme') ? '#616161' : '#ccc',
-        textStyle: { color: themeColors.textMain },
-        confine: true,
-        position: function (point: any, params: any, dom: any, rect: any, size: any) {
-          return [point[0] + 20, point[1] - size.contentSize[1] / 2];
+        axisPointer: {
+          type: 'shadow',
+          shadowStyle: { color: isDark ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.02)' }
         },
+        backgroundColor: themeColors.tooltipBg,
+        borderColor: themeColors.tooltipBorder,
+        borderWidth: 1,
+        padding: [10, 15],
+        textStyle: {
+          color: themeColors.textMain,
+          fontSize: 13,
+          fontFamily: "'Inter', sans-serif"
+        },
+        extraCssText: 'box-shadow: 0 4px 20px rgba(0,0,0,0.15); border-radius: 8px;',
+        confine: true,
         formatter: (params: any) => {
           const nodeIndex = params[0].dataIndex;
           const node = this.nodeMetrics[nodeIndex];
-          // Determine which param is the 'Used' value (usually index 0, but checking seriesName is safer if mixed)
           const usedValue = params[0].value;
           return tooltipFormatter(node, usedValue);
         }
       },
       legend: {
-        show: isSingleNode, // Only show legend for single node
+        show: isSingleNode,
         data: ['Used', 'Free'],
         bottom: 0,
-        itemGap: 15,
+        itemWidth: 12,
+        itemHeight: 12,
+        icon: 'circle',
         textStyle: { color: themeColors.textMain, fontSize: 11 }
       },
       grid: {
-        left: '20%', // More space for labels
-        right: '10%',
+        left: '20%',
+        right: '12%',
         bottom: gridBottom,
         top: gridTop,
         containLabel: false
@@ -513,11 +522,13 @@
         axisLabel: {
           formatter: '{value}%',
           color: themeColors.textMuted,
-          fontSize: 10 // Slightly smaller font
+          fontSize: 10
         },
         splitLine: {
-          lineStyle: { color: document.body.classList.contains('dark-theme') ? '#505050' : '#e0e0e0' }
-        }
+          lineStyle: { color: themeColors.splitLine, type: 'dashed' }
+        },
+        axisLine: { show: false },
+        axisTick: { show: false }
       },
       yAxis: {
         type: 'category',
@@ -525,43 +536,50 @@
         axisLabel: {
           color: themeColors.textMain,
           fontSize: 11,
-          fontWeight: 500,
-          width: 80, // Allow more width for "Node X"
-          overflow: 'truncate'
+          fontWeight: 600,
+          margin: 15
         },
         axisLine: {
-          lineStyle: { color: document.body.classList.contains('dark-theme') ? '#616161' : '#ccc' }
-        }
+          lineStyle: { color: themeColors.splitLine }
+        },
+        axisTick: { show: false }
       },
       series: [
         {
           name: 'Used',
-          type: 'bar' as const,
+          type: 'bar',
           stack: 'total',
           data: usedData,
           barWidth: barWidth,
           itemStyle: {
-            color: usedColor,
+            color: {
+              type: 'linear',
+              x: 0, y: 0, x2: 1, y2: 0,
+              colorStops: [
+                { offset: 0, color: usedColor },
+                { offset: 1, color: usedColor + 'CC' }
+              ]
+            },
             borderRadius: [0, 0, 0, 0]
           },
           label: {
             show: true,
             position: 'inside',
-            formatter: (params: any) => params.value > 10 ? `${params.value.toFixed(1)}%` : '',
+            formatter: (params: any) => params.value > 15 ? `${params.value.toFixed(1)}%` : '',
             color: '#fff',
-            fontWeight: 600,
-            fontSize: 11
+            fontWeight: 700,
+            fontSize: 10
           }
         },
         {
           name: 'Free',
-          type: 'bar' as const,
+          type: 'bar',
           stack: 'total',
           data: freeData,
           barWidth: barWidth,
           itemStyle: {
-            color: '#e0e0e0', // Light grey for free space
-            borderRadius: [0, 4, 4, 0]
+            color: isDark ? 'rgba(255,255,255,0.05)' : '#f5f5f5',
+            borderRadius: [0, 20, 20, 0]
           },
           label: { show: false }
         }
@@ -570,43 +588,40 @@
   }
 
   getMultiNodeDiskChartOptions(isDark?: boolean): EChartsOption {
-    const themeColors = this.getThemeColors(isDark || document.body.classList.contains('dark-theme'));
+    const isDarkTheme = isDark || document.body.classList.contains('dark-theme');
+    const themeColors = this.getThemeColors(isDarkTheme);
 
-    // Prepare data for horizontal bar chart
     const hostnames = this.nodeMetrics.map(n => n.host);
     const usedData = this.nodeMetrics.map(n => n.disk?.used_percent || 0);
     const freeData = this.nodeMetrics.map(n => 100 - (n.disk?.used_percent || 0));
 
-    // Dynamic sizing based on number of nodes
     const nodeCount = this.nodeMetrics.length;
     const isSingleNode = nodeCount === 1;
 
-    // Adjust grid to reduce height for single node
-    const gridTop = isSingleNode ? '25%' : '5%';
+    const gridTop = isSingleNode ? '25%' : '15%';
     const gridBottom = isSingleNode ? '35%' : '15%';
+    const barWidth = isSingleNode ? '35%' : '45%';
 
-    // Bar width (thickness) - smaller for single node
-    const barWidth = isSingleNode ? '40%' : undefined; // undefined = auto
-
-    // Create simple node labels (Node 1, Node 2, etc.)
     const nodeLabels = this.nodeMetrics.map((_, index) => `Node ${index + 1}`);
 
     return {
       tooltip: {
         trigger: 'axis',
         axisPointer: {
-          type: 'shadow'
+          type: 'shadow',
+          shadowStyle: { color: isDarkTheme ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.02)' }
         },
-        backgroundColor: isDark ? '#424242' : '#fff',
-        borderColor: isDark ? '#616161' : '#ccc',
+        backgroundColor: themeColors.tooltipBg,
+        borderColor: themeColors.tooltipBorder,
+        borderWidth: 1,
+        padding: [10, 15],
         textStyle: {
-          color: themeColors.textMain
+          color: themeColors.textMain,
+          fontSize: 13,
+          fontFamily: "'Inter', sans-serif"
         },
+        extraCssText: 'box-shadow: 0 4px 20px rgba(0,0,0,0.15); border-radius: 8px;',
         confine: true,
-        position: function (point: any, params: any, dom: any, rect: any, size: any) {
-          // Position tooltip to the right of the cursor to avoid covering labels
-          return [point[0] + 20, point[1] - size.contentSize[1] / 2];
-        },
         formatter: (params: any) => {
           const nodeIndex = params[0].dataIndex;
           const node = this.nodeMetrics[nodeIndex];
@@ -615,21 +630,30 @@
           const totalBytes = node.disk?.total_bytes || 0;
 
           return `
-            <strong>${node.host}</strong><br/>
-            Used: ${this.formatBytes(usedBytes)} (${params[0].value.toFixed(1)}%)<br/>
-            Free: ${this.formatBytes(freeBytes)} (${params[1].value.toFixed(1)}%)<br/>
-            Total: ${this.formatBytes(totalBytes)}
+            <div style="margin-bottom: 5px; font-weight: 600; color: ${themeColors.textMain}">${nodeLabels[nodeIndex]} (${node.host})</div>
+            <div style="display: flex; justify-content: space-between; min-width: 150px;">
+              <span>Used:</span> <span style="font-weight: 600;">${this.formatBytes(usedBytes)} (${params[0].value.toFixed(1)}%)</span>
+            </div>
+            <div style="display: flex; justify-content: space-between; min-width: 150px;">
+              <span>Free:</span> <span style="font-weight: 600;">${this.formatBytes(freeBytes)} (${params[1].value.toFixed(1)}%)</span>
+            </div>
+            <div style="margin-top: 5px; border-top: 1px solid ${themeColors.splitLine}; padding-top: 5px; display: flex; justify-content: space-between;">
+              <span>Total:</span> <span style="font-weight: 600;">${this.formatBytes(totalBytes)}</span>
+            </div>
           `;
         }
       },
       legend: {
         data: ['Used', 'Free'],
         bottom: 0,
-        textStyle: { color: themeColors.textMain }
+        itemWidth: 12,
+        itemHeight: 12,
+        icon: 'circle',
+        textStyle: { color: themeColors.textMain, fontSize: 11 }
       },
       grid: {
-        left: '18%',
-        right: '5%',
+        left: '20%',
+        right: '12%',
         bottom: gridBottom,
         top: gridTop,
         containLabel: false
@@ -640,11 +664,13 @@
         axisLabel: {
           formatter: '{value}%',
           color: themeColors.textMuted,
-          fontSize: 11
+          fontSize: 10
         },
         splitLine: {
-          lineStyle: { color: isDark ? '#505050' : '#e0e0e0' }
-        }
+          lineStyle: { color: themeColors.splitLine, type: 'dashed' }
+        },
+        axisLine: { show: false },
+        axisTick: { show: false }
       },
       yAxis: {
         type: 'category',
@@ -652,55 +678,45 @@
         axisLabel: {
           color: themeColors.textMain,
           fontSize: 11,
-          fontWeight: 500
+          fontWeight: 600,
+          margin: 15
         },
-        axisLine: {
-          lineStyle: { color: isDark ? '#616161' : '#ccc' }
-        }
+        axisLine: { lineStyle: { color: themeColors.splitLine } },
+        axisTick: { show: false }
       },
       series: [
         {
           name: 'Used',
-          type: 'bar' as const,
+          type: 'bar',
           stack: 'total',
           data: usedData,
           barWidth: barWidth,
           itemStyle: {
-            color: themeColors.orange,
+            color: {
+              type: 'linear',
+              x: 0, y: 0, x2: 1, y2: 0,
+              colorStops: [{ offset: 0, color: themeColors.orange }, { offset: 1, color: themeColors.orange + 'CC' }]
+            },
             borderRadius: [0, 0, 0, 0]
           },
           label: {
             show: true,
             position: 'inside',
-            formatter: (params: any) => {
-              // Only show label if there's enough space (>10%)
-              return params.value > 10 ? `${params.value.toFixed(1)}%` : '';
-            },
+            formatter: (params: any) => params.value > 15 ? `${params.value.toFixed(1)}%` : '',
             color: '#fff',
-            fontWeight: 600,
-            fontSize: 11
+            fontWeight: 700,
+            fontSize: 10
           }
         },
         {
           name: 'Free',
-          type: 'bar' as const,
+          type: 'bar',
           stack: 'total',
           data: freeData,
           barWidth: barWidth,
           itemStyle: {
-            color: themeColors.green,
-            borderRadius: [0, 4, 4, 0]
-          },
-          label: {
-            show: true,
-            position: 'inside',
-            formatter: (params: any) => {
-              // Only show label if there's enough space (>10%)
-              return params.value > 10 ? `${params.value.toFixed(1)}%` : '';
-            },
-            color: '#fff',
-            fontWeight: 600,
-            fontSize: 11
+            color: isDarkTheme ? 'rgba(255,255,255,0.05)' : '#f5f5f5',
+            borderRadius: [0, 20, 20, 0]
           }
         }
       ]
@@ -709,13 +725,7 @@
 
   getMultiNodeNetworkChartOptions(isDark?: boolean): EChartsOption {
     const isDarkTheme = isDark !== undefined ? isDark : document.body.classList.contains('dark-theme');
-    const themeColors = {
-      textMain: isDarkTheme ? '#e0e0e0' : '#333333',
-      textMuted: isDarkTheme ? '#a0a0a0' : '#777777',
-      orange: isDarkTheme ? '#ffcc80' : '#ff9800',
-      green: isDarkTheme ? '#a5d6a7' : '#4caf50',
-      accent: '#1170cf'
-    };
+    const themeColors = this.getThemeColors(isDarkTheme);
 
     const sentData = this.nodeMetrics.map(n => n.network?.sent || 0);
     const receivedData = this.nodeMetrics.map(n => n.network?.received || 0);
@@ -727,27 +737,49 @@
     return {
       tooltip: {
         trigger: 'axis',
-        axisPointer: { type: 'shadow' },
-        backgroundColor: isDarkTheme ? '#424242' : '#fff',
-        borderColor: isDarkTheme ? '#616161' : '#ccc',
-        textStyle: { color: themeColors.textMain },
+        axisPointer: {
+          type: 'shadow',
+          shadowStyle: { color: isDarkTheme ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.02)' }
+        },
+        backgroundColor: themeColors.tooltipBg,
+        borderColor: themeColors.tooltipBorder,
+        borderWidth: 1,
+        padding: [10, 15],
+        textStyle: { color: themeColors.textMain, fontSize: 13, fontFamily: "'Inter', sans-serif" },
+        extraCssText: 'box-shadow: 0 4px 20px rgba(0,0,0,0.15); border-radius: 8px;',
         confine: true,
         formatter: (params: any) => {
           const nodeIndex = params[0].dataIndex;
           const node = this.nodeMetrics[nodeIndex];
           const sent = node.network?.sent || 0;
           const received = node.network?.received || 0;
+
           return `
-            <strong>${node.host || 'Node ' + (nodeIndex + 1)}</strong><br/>
-            Inbound: ${this.formatBits(received)}<br/>
-            Outbound: ${this.formatBits(sent)}
+            <div style="margin-bottom: 5px; font-weight: 600; color: ${themeColors.textMain}">${node.host || 'Node ' + (nodeIndex + 1)}</div>
+            <div style="display: flex; justify-content: space-between; align-items: center; min-width: 150px;">
+              <span style="display: flex; align-items: center;">
+                <span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: ${params[0].color}; margin-right: 8px;"></span>
+                ${params[0].seriesName}
+              </span>
+              <span style="font-weight: 600;">${this.formatBits(received)}</span>
+            </div>
+            <div style="display: flex; justify-content: space-between; align-items: center; min-width: 150px;">
+              <span style="display: flex; align-items: center;">
+                <span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: ${params[1].color}; margin-right: 8px;"></span>
+                ${params[1].seriesName}
+              </span>
+              <span style="font-weight: 600;">${this.formatBits(sent)}</span>
+            </div>
           `;
         }
       },
       legend: {
         data: ['Inbound', 'Outbound'],
         bottom: 5,
-        textStyle: { color: themeColors.textMain }
+        itemWidth: 12,
+        itemHeight: 12,
+        icon: 'circle',
+        textStyle: { color: themeColors.textMain, fontSize: 11 }
       },
       grid: {
         left: '12%',
@@ -762,30 +794,37 @@
         axisLabel: {
           color: themeColors.textMain,
           fontSize: 11,
-          fontWeight: 500,
+          fontWeight: 600,
           interval: 0,
           rotate: nodeCount > 4 ? 30 : 0
         },
-        axisLine: { lineStyle: { color: isDarkTheme ? '#616161' : '#ccc' } }
+        axisLine: { lineStyle: { color: themeColors.splitLine } },
+        axisTick: { show: false }
       },
       yAxis: {
         type: 'value',
         axisLabel: {
           formatter: (value: number) => this.formatBits(value, 0),
-          color: themeColors.textMuted
+          color: themeColors.textMuted,
+          fontSize: 10
         },
-        splitLine: { lineStyle: { color: isDarkTheme ? '#505050' : '#e0e0e0' } }
+        splitLine: { lineStyle: { color: themeColors.splitLine, type: 'dashed' } },
+        axisLine: { show: false }
       },
       series: [
         {
           name: 'Inbound',
           type: 'bar',
-          barGap: '10%', // Gap between bars in same category
-          barCategoryGap: '30%', // Gap between categories (nodes)
+          barGap: '15%',
+          barCategoryGap: '35%',
           data: receivedData,
           itemStyle: {
-            color: themeColors.green,
-            borderRadius: [4, 4, 0, 0]
+            color: {
+              type: 'linear',
+              x: 0, y: 0, x2: 0, y2: 1,
+              colorStops: [{ offset: 0, color: '#34e89e' }, { offset: 1, color: '#0f3443' }]
+            },
+            borderRadius: [6, 6, 0, 0]
           }
         },
         {
@@ -793,8 +832,12 @@
           type: 'bar',
           data: sentData,
           itemStyle: {
-            color: themeColors.accent,
-            borderRadius: [4, 4, 0, 0]
+            color: {
+              type: 'linear',
+              x: 0, y: 0, x2: 0, y2: 1,
+              colorStops: [{ offset: 0, color: '#00c6ff' }, { offset: 1, color: '#0072ff' }]
+            },
+            borderRadius: [6, 6, 0, 0]
           }
         }
       ]
@@ -803,95 +846,94 @@
 
 
   getMultiNodeDiskGaugeOptions(isDark?: boolean): EChartsOption {
-    const themeColors = this.getThemeColors(isDark || document.body.classList.contains('dark-theme'));
+    const isDarkTheme = isDark || document.body.classList.contains('dark-theme');
+    const themeColors = this.getThemeColors(isDarkTheme);
 
-    // Create a gauge for each node
     const gauges = this.nodeMetrics.map((node, index) => {
       const usedPercent = node.disk?.used_percent || 0;
       const total = this.nodeMetrics.length;
-      const radius = total === 1 ? '70%' : '60%';
+      const radius = total === 1 ? '85%' : '70%';
       const centerX = total === 1 ? '50%' : `${(100 / (total + 1)) * (index + 1)}%`;
 
       return {
         type: 'gauge' as const,
         center: [centerX, '55%'],
         radius: radius,
-        startAngle: 90,
-        endAngle: -270,
+        startAngle: 210,
+        endAngle: -30,
         min: 0,
         max: 100,
-        splitNumber: 4,
+        splitNumber: 5,
         axisLine: {
           lineStyle: {
-            width: 15,
+            width: 12,
             color: [
               [0.7, themeColors.green] as [number, string],
               [0.85, themeColors.orange] as [number, string],
               [1, '#ff4d4f'] as [number, string]
-            ]
+            ],
+            shadowBlur: 10,
+            shadowColor: 'rgba(0,0,0,0.1)'
           }
         },
-        pointer: {
-          show: false
+        progress: {
+          show: true,
+          width: 12,
+          itemStyle: {
+            shadowBlur: 5,
+            shadowColor: 'rgba(0,0,0,0.2)'
+          }
         },
-        axisTick: {
-          show: false
-        },
-        splitLine: {
-          show: false
-        },
-        axisLabel: {
-          show: false
-        },
+        pointer: { show: false },
+        axisTick: { show: false },
+        splitLine: { show: false },
+        axisLabel: { show: false },
         detail: {
           formatter: (value: number) => {
             const usedBytes = node.disk?.used_bytes || 0;
             const totalBytes = node.disk?.total_bytes || 0;
-            return `{value|${value.toFixed(1)}%}\n{label|Used}\n{size|${this.formatBytes(usedBytes)}}\n{total|of ${this.formatBytes(totalBytes)}}`;
+            return `{value|${value.toFixed(1)}%}\n{label|Used: ${this.formatBytes(usedBytes)}}\n{total|Total: ${this.formatBytes(totalBytes)}}`;
           },
           rich: {
             value: {
-              fontSize: 20,
-              fontWeight: 600,
+              fontSize: 18,
+              fontWeight: 700,
               color: themeColors.textMain,
-              lineHeight: 30
+              lineHeight: 28,
+              fontFamily: "'Inter', sans-serif"
             },
             label: {
               fontSize: 11,
               color: themeColors.textMuted,
-              lineHeight: 20
+              lineHeight: 18
             },
-            size: {
-              fontSize: 13,
-              fontWeight: 500,
-              color: themeColors.textMain,
-              lineHeight: 22
-            },
             total: {
-              fontSize: 11,
+              fontSize: 10,
               color: themeColors.textMuted,
-              lineHeight: 18
+              lineHeight: 16
             }
           },
-          offsetCenter: [0, '0%']
+          offsetCenter: [0, '25%']
         },
         title: {
           show: true,
-          offsetCenter: [0, '-85%'],
+          offsetCenter: [0, '-40%'],
           fontSize: 12,
-          fontWeight: 500,
-          color: themeColors.textMain
+          fontWeight: 700,
+          color: themeColors.textMain,
+          fontFamily: "'Inter', sans-serif"
         },
-        data: [
-          {
-            value: usedPercent,
-            name: node.host
-          }
-        ]
+        data: [{ value: usedPercent, name: node.host }]
       };
     });
 
     return {
+      tooltip: {
+        show: true,
+        backgroundColor: themeColors.tooltipBg,
+        borderColor: themeColors.tooltipBorder,
+        textStyle: { color: themeColors.textMain }
+      },
       series: gauges
     };
   }
@@ -1071,22 +1113,33 @@
     const isDark = document.body.classList.contains('dark-theme');
     const themeColors = this.getThemeColors(isDark);
 
+    const gradientColors: any = {
+      'CPU %': [{ offset: 0, color: '#8e2de2' }, { offset: 1, color: '#4a00e0' }],
+      'Memory %': [{ offset: 0, color: '#00d2ff' }, { offset: 1, color: '#3a7bd5' }],
+      'Disk %': [{ offset: 0, color: '#f2994a' }, { offset: 1, color: '#f2c94c' }]
+    };
+
+    const selectedGradient = gradientColors[label] || [{ offset: 0, color: color }, { offset: 1, color: color }];
+
     return {
       tooltip: {
         trigger: 'axis',
         axisPointer: {
-          type: 'shadow'
+          type: 'shadow',
+          shadowStyle: { color: isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.02)' }
         },
-        backgroundColor: isDark ? '#424242' : '#fff',
-        borderColor: isDark ? '#616161' : '#ccc',
-        textStyle: {
-          color: themeColors.textMain
-        }
+        backgroundColor: themeColors.tooltipBg,
+        borderColor: themeColors.tooltipBorder,
+        borderWidth: 1,
+        padding: [10, 15],
+        textStyle: { color: themeColors.textMain, fontSize: 13, fontFamily: "'Inter', sans-serif" },
+        extraCssText: 'box-shadow: 0 4px 20px rgba(0,0,0,0.15); border-radius: 8px;'
       },
       grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '3%',
+        left: '5%',
+        right: '12%',
+        bottom: '8%',
+        top: '5%',
         containLabel: true
       },
       xAxis: {
@@ -1095,30 +1148,29 @@
         max: 100,
         axisLabel: {
           formatter: '{value}%',
-          color: themeColors.textMuted
+          color: themeColors.textMuted,
+          fontSize: 11
         },
         splitLine: {
-          show: false
+          show: true,
+          lineStyle: { color: themeColors.splitLine, type: 'dashed' }
         },
-        axisLine: {
-          lineStyle: { color: isDark ? '#616161' : '#ccc' }
-        }
+        axisLine: { show: false },
+        axisTick: { show: false }
       },
       yAxis: {
         type: 'category',
         data: metrics.map(item => item.name),
         inverse: true,
         axisLabel: {
-          width: 80,
+          width: 120,
           overflow: 'truncate',
-          color: themeColors.textMuted
+          color: themeColors.textMuted,
+          fontSize: 11,
+          margin: 15
         },
-        axisLine: {
-          show: false
-        },
-        axisTick: {
-          show: false
-        }
+        axisLine: { lineStyle: { color: themeColors.splitLine } },
+        axisTick: { show: false }
       },
       series: [
         {
@@ -1126,16 +1178,31 @@
           type: 'bar',
           data: metrics.map(item => item.value),
           itemStyle: {
-            color: color,
-            borderRadius: [0, 4, 4, 0]
+            color: {
+              type: 'linear',
+              x: 0, y: 0, x2: 1, y2: 0,
+              colorStops: selectedGradient
+            },
+            borderRadius: [0, 20, 20, 0],
+            shadowBlur: 8,
+            shadowColor: isDark ? 'rgba(0,0,0,0.5)' : 'rgba(0,0,0,0.1)',
+            shadowOffsetX: 2
           },
           label: {
             show: true,
             position: 'right',
             formatter: '{c}%',
-            color: themeColors.textMain
+            color: themeColors.textMain,
+            fontSize: 11,
+            fontWeight: 600,
+            distance: 10
           },
-          barWidth: '60%'
+          barWidth: '50%',
+          emphasis: {
+            itemStyle: { shadowBlur: 15, shadowOffsetX: 4 }
+          },
+          animationDuration: 1500,
+          animationEasing: 'cubicOut'
         }
       ]
     };
@@ -1149,19 +1216,27 @@
       tooltip: {
         trigger: 'axis',
         axisPointer: {
-          type: 'shadow'
+          type: 'shadow',
+          shadowStyle: { color: isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.02)' }
         },
-        backgroundColor: isDark ? '#424242' : '#fff',
-        borderColor: isDark ? '#616161' : '#ccc',
-        textStyle: {
-          color: colors.textMain
-        },
+        backgroundColor: colors.tooltipBg,
+        borderColor: colors.tooltipBorder,
+        borderWidth: 1,
+        padding: [10, 15],
+        textStyle: { color: colors.textMain, fontSize: 13, fontFamily: "'Inter', sans-serif" },
+        extraCssText: 'box-shadow: 0 4px 20px rgba(0,0,0,0.15); border-radius: 8px;',
         formatter: (params: any) => {
-          let tooltipContent = `${params[0].name}<br/>`;
+          let tooltipContent = `<div style="margin-bottom: 5px; font-weight: 600; color: ${colors.textMain}">${params[0].name}</div>`;
           params.forEach((param: any) => {
-            // value is in bits, use formatBits
             const formattedValue = this.formatBits(param.value);
-            tooltipContent += `${param.marker} ${param.seriesName}: ${formattedValue}<br/>`;
+            tooltipContent += `
+              <div style="display: flex; justify-content: space-between; align-items: center; min-width: 150px;">
+                <span style="display: flex; align-items: center;">
+                  <span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: ${param.color}; margin-right: 8px;"></span>
+                  ${param.seriesName}
+                </span>
+                <span style="font-weight: 600;">${formattedValue}</span>
+              </div>`;
           });
           return tooltipContent;
         }
@@ -1169,67 +1244,77 @@
       legend: {
         data: ['Inbound', 'Outbound'],
         bottom: 0,
-        textStyle: { color: colors.textMain }
+        textStyle: { color: colors.textMain, fontSize: 11 },
+        itemWidth: 12,
+        itemHeight: 12,
+        icon: 'circle'
       },
       grid: {
-        left: '3%',
-        right: '5%',
-        bottom: '10%',
+        left: '5%',
+        right: '15%',
+        bottom: '15%',
+        top: '5%',
         containLabel: true
       },
       xAxis: {
         type: 'value',
         boundaryGap: [0, 0.01],
-        // name: 'Mbps', // Removed specific unit label as formatBits handles it
-        // nameLocation: 'end',
-        // nameGap: 20,
         axisLabel: {
           color: colors.textMuted,
+          fontSize: 10,
           formatter: (value: number) => this.formatBits(value, 0)
         },
         splitLine: {
-          show: false
+          show: true,
+          lineStyle: { color: colors.splitLine, type: 'dashed' }
         },
-        nameTextStyle: {
-          color: colors.textMuted
-        },
-        axisLine: {
-          lineStyle: { color: isDark ? '#616161' : '#ccc' }
-        }
+        axisLine: { show: false },
+        axisTick: { show: false }
       },
       yAxis: {
         type: 'category',
         data: data.map(item => item.name),
         inverse: true,
         axisLabel: {
-          width: 80,
+          width: 120,
           overflow: 'truncate',
-          color: colors.textMuted
+          color: colors.textMuted,
+          fontSize: 11,
+          margin: 15
         },
-        axisLine: { show: false },
+        axisLine: { lineStyle: { color: colors.splitLine } },
         axisTick: { show: false }
       },
       series: [
         {
           name: 'Inbound',
           type: 'bar',
-          // stack: 'total', // Removed for grouped bar
           data: data.map(item => item.inbound),
           itemStyle: {
-            color: colors.green,
-            borderRadius: [0, 4, 4, 0]
+            color: {
+              type: 'linear',
+              x: 0, y: 0, x2: 1, y2: 0,
+              colorStops: [{ offset: 0, color: '#34e89e' }, { offset: 1, color: '#0f3443' }]
+            }
           },
-          barGap: '20%' // Add spacing between bars
+          barWidth: '40%',
+          animationDuration: 1500,
+          animationEasing: 'cubicOut'
         },
         {
           name: 'Outbound',
           type: 'bar',
-          // stack: 'total', // Removed for grouped bar
           data: data.map(item => item.outbound),
           itemStyle: {
-            color: colors.accent,
-            borderRadius: [0, 4, 4, 0]
-          }
+            color: {
+              type: 'linear',
+              x: 0, y: 0, x2: 1, y2: 0,
+              colorStops: [{ offset: 0, color: '#00c6ff' }, { offset: 1, color: '#0072ff' }]
+            },
+            borderRadius: [0, 20, 20, 0]
+          },
+          animationDuration: 1800,
+          animationEasing: 'cubicOut'
         }
       ]
     };
@@ -1243,53 +1328,51 @@
       tooltip: {
         trigger: 'axis',
         axisPointer: {
-          type: 'shadow'
+          type: 'shadow',
+          shadowStyle: { color: isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.02)' }
         },
-        backgroundColor: isDark ? '#424242' : '#fff',
-        borderColor: isDark ? '#616161' : '#ccc',
-        textStyle: {
-          color: colors.textMain
-        }
+        backgroundColor: colors.tooltipBg,
+        borderColor: colors.tooltipBorder,
+        borderWidth: 1,
+        padding: [10, 15],
+        textStyle: { color: colors.textMain, fontSize: 13, fontFamily: "'Inter', sans-serif" },
+        extraCssText: 'box-shadow: 0 4px 20px rgba(0,0,0,0.15); border-radius: 8px;'
       },
       legend: {
         bottom: '0',
-        textStyle: {
-          color: colors.textMain
-        }
+        itemWidth: 12,
+        itemHeight: 12,
+        icon: 'circle',
+        textStyle: { color: colors.textMain, fontSize: 11 }
       },
       grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '10%',
+        left: '5%',
+        right: '5%',
+        bottom: '12%',
+        top: '5%',
         containLabel: true
       },
       yAxis: {
         type: 'value',
         axisLabel: {
-          formatter: function (value: number) {
-            if (value % 1 === 0) {
-              return String(value);
-            }
-            return '';
-          },
-          color: colors.textMuted
+          formatter: (value: number) => value % 1 === 0 ? String(value) : '',
+          color: colors.textMuted,
+          fontSize: 11
         },
         splitLine: {
-          show: false
+          show: true,
+          lineStyle: { color: colors.splitLine, type: 'dashed' }
         },
-        axisLine: {
-          lineStyle: { color: isDark ? '#616161' : '#ccc' }
-        }
+        axisLine: { show: false }
       },
       xAxis: {
         type: 'category',
-        data: metrics?.yAxisData, // Assuming yAxisData holds category names
+        data: metrics?.yAxisData,
         axisLabel: {
-          color: colors.textMuted
+          color: colors.textMuted,
+          fontSize: 11
         },
-        axisLine: {
-          lineStyle: { color: isDark ? '#616161' : '#ccc' }
-        },
+        axisLine: { lineStyle: { color: colors.splitLine } },
         axisTick: { show: false }
       },
       series: [
@@ -1299,10 +1382,15 @@
           stack: 'total',
           data: metrics?.connectedData,
           itemStyle: {
-            color: 'green', // MATCHED TO DOUGHNUT CHART
+            color: {
+              type: 'linear',
+              x: 0, y: 0, x2: 0, y2: 1,
+              colorStops: [{ offset: 0, color: '#34e89e' }, { offset: 1, color: '#0f3443' }]
+            },
             borderRadius: [0, 0, 0, 0]
           },
-          barWidth: '40%'
+          barWidth: '45%',
+          animationDuration: 1500
         },
         {
           name: 'Disconnected',
@@ -1310,10 +1398,15 @@
           stack: 'total',
           data: metrics?.disconnectedData,
           itemStyle: {
-            color: 'red', // MATCHED TO DOUGHNUT CHART
-            borderRadius: [4, 4, 0, 0] // Top radius
+            color: {
+              type: 'linear',
+              x: 0, y: 0, x2: 0, y2: 1,
+              colorStops: [{ offset: 0, color: '#ff5f6d' }, { offset: 1, color: '#ffc371' }]
+            },
+            borderRadius: [6, 6, 0, 0]
           },
-          barWidth: '40%'
+          barWidth: '45%',
+          animationDuration: 1800
         }
       ]
     };
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-groups/device-groups.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-groups/device-groups.html	(revision 2927)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-groups/device-groups.html	(working copy)
@@ -6,10 +6,13 @@
     </div>
   </mat-card-header>
   <mat-card-content>
-    <div class="table-container">
-      <app-search-from-results placeholder="Example: BLR001"
+    <div class="search-section">
+      <app-search-from-results placeholder="Search by group name..."
         (searchChange)="applyFilter($event)"></app-search-from-results>
+    </div>
 
+    <div class="table-container">
+
       <table mat-table [dataSource]="dataSource" class="an-table mat-elevation-z1">
         <ng-container matColumnDef="serial">
           <th mat-header-cell *matHeaderCellDef> No.</th>
@@ -22,13 +25,19 @@
         <ng-container matColumnDef="devices">
           <th mat-header-cell *matHeaderCellDef class="action-header"> Managed Devices</th>
           <td mat-cell *matCellDef="let element">
-            <div class="row-action">
+            <div class="device-list-cell">
               @if (element.device_list && element.device_list.length > 0) {
-              <span [matTooltip]="getTruncatedArrayString(element.device_list).full" matTooltipPosition="above">
-                {{ getTruncatedArrayString(element.device_list).display }}
-              </span>
+              <div class="device-chips" [matTooltip]="getTruncatedArrayString(element.device_list).full"
+                matTooltipPosition="above">
+                <span class="device-chip" *ngFor="let device of element.device_list.slice(0, 3)">
+                  {{ device.ip }}
+                </span>
+                <span class="device-chip-more" *ngIf="element.device_list.length > 3">
+                  +{{ element.device_list.length - 3 }} more
+                </span>
+              </div>
               } @else {
-              -
+              <span class="no-devices">No devices assigned</span>
               }
             </div>
           </td>
@@ -48,7 +57,12 @@
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 
         <tr class="mat-row table-no-data" *matNoDataRow>
-          <td class="mat-cell" colspan="4">No data matching the filter "{{ searchKey }}"</td>
+          <td class="mat-cell no-data-cell" colspan="4">
+            <div class="no-data-content">
+              <fa-icon [icon]="['far', 'chart-bar']"></fa-icon>
+              <span>No results found {{ searchKey ? 'matching "' + searchKey + '"' : '' }}</span>
+            </div>
+          </td>
         </tr>
       </table>
       <mat-paginator [pageSizeOptions]="[10, 15, 20, 25]" [length]="totalRecords" showFirstLastButtons></mat-paginator>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-groups/device-groups.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-groups/device-groups.scss	(revision 2927)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-groups/device-groups.scss	(working copy)
@@ -1,27 +1,66 @@
 .page-card-1 {
+  background: rgba(var(--bg-rgb, 255, 255, 255), 0.7) !important;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(var(--primary-rgb, 58, 123, 213), 0.15);
+  border-radius: 16px !important;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
+  overflow: hidden;
+  margin: 16px;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    background: linear-gradient(to bottom, #3a7bd5, #00d2ff);
+    opacity: 1;
+  }
+
   .mat-mdc-card-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 12px 16px; // Compact padding
-    border-bottom: 1px solid #e0e0e0;
+    padding: 24px 32px;
+    border-bottom: 1px solid rgba(var(--border-rgb, 0, 0, 0), 0.05);
+    background: rgba(var(--primary-rgb, 58, 123, 213), 0.03);
 
     .mat-mdc-card-title {
-      font-size: 18px;
-      font-weight: 500;
+      font-size: 20px;
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      color: var(--text-primary);
       margin: 0;
+      font-family: 'Inter', sans-serif;
     }
 
     .header-actions {
       display: flex;
-      gap: 12px;
+      gap: 20px;
+      margin-left: auto;
+      padding-right: 8px;
 
       button {
+        border-radius: 8px !important;
+        padding: 0 24px !important;
+        font-weight: 600;
+        letter-spacing: 0.01em;
+        text-transform: none;
+        height: 40px;
+        transition: all 0.2s ease;
+
         &.primary-btn {
-          background-color: var(--primary-color) !important;
+          background: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%) !important;
           color: #ffffff !important;
+          border: none !important;
+          box-shadow: 0 4px 12px rgba(58, 123, 213, 0.3);
 
           &:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 6px 16px rgba(58, 123, 213, 0.4);
             filter: brightness(110%);
           }
         }
@@ -30,39 +69,130 @@
   }
 
   .mat-mdc-card-content {
-    padding: 12px; // Compact padding
+    padding: 24px 32px;
+
+    .search-section {
+      margin-bottom: 24px;
+      max-width: 400px;
+
+      ::ng-deep {
+        .mat-mdc-form-field {
+          width: 100%;
+
+          .mat-mdc-text-field-wrapper {
+            background: rgba(var(--primary-rgb, 58, 123, 213), 0.04) !important;
+            border-radius: 12px !important;
+            border: 1px solid rgba(var(--primary-rgb, 58, 123, 213), 0.1) !important;
+            height: 48px !important;
+
+            &:hover {
+              background: rgba(var(--primary-rgb, 58, 123, 213), 0.05) !important;
+              border-color: rgba(var(--primary-rgb, 58, 123, 213), 0.2) !important;
+            }
+
+            &.mdc-text-field--focused {
+              border-color: rgba(var(--primary-rgb, 58, 123, 213), 0.4) !important;
+              box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 58, 123, 213), 0.05);
+            }
+          }
+
+          .mat-mdc-form-field-flex {
+            padding: 0 16px !important;
+            align-items: center !important;
+            height: 48px !important;
+          }
+
+          .mat-mdc-form-field-prefix {
+            display: flex !important;
+            align-items: center !important;
+            height: 48px !important;
+            padding: 0 !important;
+          }
+
+          .mat-mdc-form-field-infix {
+            padding: 0 !important;
+            display: flex !important;
+            align-items: center !important;
+            min-height: 48px !important;
+
+            input {
+              margin: 0 !important;
+              padding: 0 !important;
+              height: 48px !important;
+              line-height: 48px !important;
+              vertical-align: middle !important;
+            }
+          }
+        }
+      }
+    }
   }
 }
 
 .table-container {
-  border: 1px solid #e0e0e0;
-  border-radius: 4px;
-  margin-top: 0;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
+  background: rgba(var(--bg-rgb, 255, 255, 255), 0.5);
+  border: 1px solid rgba(var(--border-rgb, 0, 0, 0), 0.05);
 
   table.an-table {
     width: 100%;
+    background: transparent !important;
+    border-collapse: separate;
+    border-spacing: 0;
 
+    // Reset min-width for tables inside modals
+    :host-context(mat-dialog-content) & {
+      min-width: 100% !important;
+    }
+
     th.mat-header-cell {
-      font-weight: 600;
-      color: var(--table-header-text);
-      background-color: var(--table-header-bg);
-      padding: 10px 12px; // Compact padding
-      font-size: 14px;
-      border-bottom: 1px solid var(--border-color);
+      font-weight: 700;
+      color: var(--text-secondary);
+      background-color: rgba(var(--primary-rgb, 58, 123, 213), 0.05) !important;
+      padding: 16px 20px;
+      font-size: 13px;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      border-bottom: 1px solid rgba(var(--border-rgb, 0, 0, 0), 0.08);
+      font-family: 'Inter', sans-serif;
     }
 
     td.mat-cell {
-      padding: 10px 12px; // Compact padding
+      padding: 18px 20px;
       color: var(--text-primary);
       font-size: 14px;
-      border-bottom: 1px solid var(--border-color);
+      border-bottom: 1px solid rgba(var(--border-rgb, 0, 0, 0), 0.04);
+      transition: background-color 0.2s ease;
     }
 
     tr.mat-row {
+      transition: all 0.2s ease;
+
+      &.table-no-data {
+        td {
+          text-align: center !important;
+          padding: 40px 0 !important;
+          color: var(--text-secondary);
+          font-style: italic;
+          opacity: 0.8;
+          width: 100%; // Force full width
+        }
+
+        &:hover {
+          background-color: transparent !important;
+        }
+      }
+
       &:hover {
-        background-color: var(--table-hover);
+        background-color: rgba(var(--primary-rgb, 58, 123, 213), 0.04) !important;
       }
 
+      &:nth-child(even) {
+        background-color: rgba(0, 0, 0, 0.01);
+      }
+
       &:last-child td {
         border-bottom: none;
       }
@@ -70,12 +200,59 @@
   }
 }
 
+.device-list-cell {
+  .device-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+
+    .device-chip {
+      background: rgba(var(--primary-rgb, 58, 123, 213), 0.08);
+      color: #3a7bd5;
+      padding: 2px 8px;
+      border-radius: 4px;
+      font-size: 11px;
+      font-weight: 500;
+      border: 1px solid rgba(var(--primary-rgb, 58, 123, 213), 0.1);
+    }
+
+    .device-chip-more {
+      font-size: 11px;
+      color: var(--text-secondary);
+      align-self: center;
+      font-style: italic;
+    }
+  }
+
+  .no-devices {
+    color: var(--text-secondary);
+    font-size: 12px;
+    font-style: italic;
+    opacity: 0.7;
+  }
+}
+
 .row-action {
   display: flex;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
-  padding-right: 12px;
-  gap: 8px;
+  gap: 16px;
+  padding: 4px 0;
+
+  fa-icon {
+    font-size: 18px;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+      transform: scale(1.2);
+    }
+
+    &.delete-icon:hover {
+      color: #ff5f6d;
+    }
+  }
 }
 
 .a-link {
@@ -88,44 +265,142 @@
 }
 
 .w-10 {
-  width: 10%;
+  min-width: 100px;
 }
 
-// Dialog Styles
+:host-context(.dark-theme) {
+  .page-card-1 {
+    background: rgba(30, 30, 35, 0.6) !important;
+    border-color: rgba(255, 255, 255, 0.08);
+
+    .mat-mdc-card-header {
+      background: rgba(255, 255, 255, 0.02);
+      border-color: rgba(255, 255, 255, 0.05);
+    }
+  }
+
+  .table-container {
+    background: rgba(255, 255, 255, 0.02);
+    border-color: rgba(255, 255, 255, 0.05);
+
+    table.an-table {
+      th.mat-header-cell {
+        background-color: rgba(255, 255, 255, 0.03) !important;
+        color: rgba(255, 255, 255, 0.7);
+      }
+
+      td.mat-cell {
+        color: rgba(255, 255, 255, 0.9);
+        border-color: rgba(255, 255, 255, 0.05);
+      }
+
+      tr.mat-row:hover {
+        background-color: rgba(255, 255, 255, 0.05) !important;
+      }
+    }
+  }
+}
+
+// Dialog Styles Redesign
 h2[mat-dialog-title] {
   margin: 0;
-  padding: 10px 24px; // Reduced padding
-  font-size: 18px;
-  font-weight: 500;
-  // Removed border-bottom
-  background-color: var(--dialog-bg);
+  padding: 12px 24px !important; // Even more compact
+  font-size: 18px; // Slightly smaller font
+  font-weight: 700;
   color: var(--text-primary);
+  background: rgba(var(--primary-rgb, 58, 123, 213), 0.05);
+  border-bottom: 1px solid rgba(var(--border-rgb, 0, 0, 0), 0.05);
+  font-family: 'Inter', sans-serif;
+  letter-spacing: -0.01em;
 }
 
 mat-dialog-content {
-  padding: 24px !important;
-  min-width: 400px;
+  padding: 20px 24px !important; // More compact
+  max-height: 80vh;
+  width: 100%;
+  overflow-x: hidden !important;
 
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(var(--primary-rgb, 58, 123, 213), 0.2);
+    border-radius: 10px;
+  }
+
   .form-field-wrapper {
-    margin-bottom: 16px;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
 
     .form-label {
-      display: block;
-      margin-bottom: 8px;
-      font-weight: 500;
-      color: var(--text-secondary);
-      font-size: 14px;
+      flex: 0 0 160px;
+      margin-bottom: 0 !important;
+      font-weight: 600;
+      color: var(--text-primary);
+      font-size: 13.5px;
+      font-family: 'Inter', sans-serif;
+      opacity: 0.9;
     }
 
-    mat-form-field {
-      width: 100%;
+    ::ng-deep {
+      .mat-mdc-form-field {
+        flex: 1;
+        width: 100%;
+
+        .mat-mdc-text-field-wrapper {
+          background: rgba(var(--primary-rgb, 58, 123, 213), 0.015) !important;
+          border-radius: 10px !important;
+          border: 1px solid rgba(var(--border-rgb, 0, 0, 0), 0.06) !important;
+          transition: all 0.2s ease;
+
+          &:hover {
+            background: rgba(var(--primary-rgb, 58, 123, 213), 0.03) !important;
+            border-color: rgba(var(--primary-rgb, 58, 123, 213), 0.2) !important;
+          }
+
+          &.mdc-text-field--focused {
+            background: #ffffff !important;
+            border-color: rgba(var(--primary-rgb, 58, 123, 213), 0.4) !important;
+            box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 58, 123, 213), 0.05);
+          }
+        }
+
+        .mat-mdc-form-field-subscript-wrapper {
+          display: none;
+        }
+      }
     }
   }
 }
 
 mat-dialog-actions {
-  padding: 10px 24px !important; // Reduced padding
-  // Removed border-top
-  margin-bottom: 0;
-  background-color: var(--dialog-bg);
+  padding: 12px 24px 16px !important; // More compact
+  gap: 12px;
+  background: rgba(var(--primary-rgb, 58, 123, 213), 0.02);
+  border-top: 1px solid rgba(var(--border-rgb, 0, 0, 0), 0.05);
+
+  button {
+    border-radius: 8px !important;
+    padding: 0 24px !important;
+    height: 40px;
+    font-weight: 600;
+    text-transform: none;
+    letter-spacing: 0.01em;
+
+    &[color="primary"] {
+      background: linear-gradient(135deg, #5c9cf1 0%, #3a7bd5 100%) !important;
+      color: #ffffff !important;
+      box-shadow: 0 4px 12px rgba(58, 123, 213, 0.15);
+    }
+
+    &[color="basic"] {
+      background: #ffffff !important;
+      border: 1px solid rgba(var(--border-rgb, 0, 0, 0), 0.1) !important;
+      color: var(--text-secondary) !important;
+    }
+  }
 }
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices-build-info.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices-build-info.html	(revision 2927)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices-build-info.html	(working copy)
@@ -33,7 +33,12 @@
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
       <tr class="mat-row table-no-data" *matNoDataRow>
-        <td class="mat-cell" colspan="9">No results found.</td>
+        <td class="mat-cell no-data-cell" colspan="4">
+          <div class="no-data-content">
+            <fa-icon [icon]="['far', 'chart-bar']"></fa-icon>
+            <span>No results found.</span>
+          </div>
+        </td>
       </tr>
     </table>
   </div>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices.html	(revision 2927)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices.html	(working copy)
@@ -7,10 +7,12 @@
     </div>
   </mat-card-header>
   <mat-card-content>
-    <div class="table-container">
-      <app-search-from-results placeholder="Example: BLRAPV001"
+    <div class="search-section">
+      <app-search-from-results placeholder="Search by name, IP or type..."
         (searchChange)="applyFilter($event)"></app-search-from-results>
+    </div>
 
+    <div class="table-container">
       <table mat-table [dataSource]="dataSource" class="an-table mat-elevation-z1">
         <ng-container matColumnDef="serial">
           <th mat-header-cell *matHeaderCellDef> No.</th>
@@ -63,13 +65,15 @@
           <td mat-cell *matCellDef="let element">
             <div class="status-cell">
               @if (element.connection) {
-              <span class="status-badge success">
-                <fa-icon [icon]="['fas', 'check']"></fa-icon> Connected
-              </span>
+              <div class="status-badge success" matTooltip="Connection Established">
+                <fa-icon [icon]="['fas', 'circle']" class="pulse-icon"></fa-icon>
+                <span>Connected</span>
+              </div>
               } @else {
-              <span class="status-badge error">
-                <fa-icon [icon]="['fas', 'power-off']"></fa-icon> Disconnected
-              </span>
+              <div class="status-badge error" matTooltip="Connection Lost">
+                <fa-icon [icon]="['fas', 'circle']"></fa-icon>
+                <span>Disconnected</span>
+              </div>
               }
             </div>
           </td>
@@ -97,12 +101,11 @@
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         <tr class="mat-row table-no-data" *matNoDataRow>
-          <td class="mat-cell" colspan="9">
-            @if (searchKey) {
-            No data matching the filter "{{ searchKey }}"
-            } @else {
-            No results found.
-            }
+          <td class="mat-cell no-data-cell" colspan="9">
+            <div class="no-data-content">
+              <fa-icon [icon]="['far', 'chart-bar']"></fa-icon>
+              <span>No results found {{ searchKey ? 'matching "' + searchKey + '"' : '' }}</span>
+            </div>
           </td>
         </tr>
       </table>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices.scss	(revision 2927)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices.scss	(working copy)
@@ -1,39 +1,79 @@
 .page-card-1 {
+  background: rgba(var(--bg-rgb, 255, 255, 255), 0.7) !important;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(var(--primary-rgb, 58, 123, 213), 0.15);
+  border-radius: 16px !important;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
+  overflow: hidden;
+  margin: 16px;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    background: linear-gradient(to bottom, #3a7bd5, #00d2ff);
+    opacity: 1;
+  }
+
   .mat-mdc-card-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 12px 16px; // Compact padding
-    border-bottom: 1px solid #e0e0e0;
+    padding: 24px 32px;
+    border-bottom: 1px solid rgba(var(--border-rgb, 0, 0, 0), 0.05);
+    background: rgba(var(--primary-rgb, 58, 123, 213), 0.03);
 
     .mat-mdc-card-title {
-      font-size: 18px;
-      font-weight: 500;
+      font-size: 20px;
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      color: var(--text-primary);
       margin: 0;
+      font-family: 'Inter', sans-serif;
     }
 
     .header-actions {
       display: flex;
-      gap: 12px;
+      gap: 20px;
+      margin-left: auto;
+      padding-right: 8px;
 
       button {
+        border-radius: 8px !important;
+        padding: 0 24px !important;
+        font-weight: 600;
+        letter-spacing: 0.01em;
+        text-transform: none;
+        height: 40px;
+        transition: all 0.2s ease;
+
         &.primary-btn {
-          background-color: var(--primary-color) !important;
+          background: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%) !important;
           color: #ffffff !important;
+          border: none !important;
+          box-shadow: 0 4px 12px rgba(58, 123, 213, 0.3);
 
           &:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 6px 16px rgba(58, 123, 213, 0.4);
             filter: brightness(110%);
           }
         }
 
         &.secondary-btn {
-          background-color: transparent !important;
+          background: rgba(var(--bg-rgb, 255, 255, 255), 0.5) !important;
           color: var(--text-primary) !important;
-          border: 1px solid var(--border-color) !important;
+          border: 1px solid rgba(var(--primary-rgb, 58, 123, 213), 0.2) !important;
+          backdrop-filter: blur(4px);
 
           &:hover {
-            background-color: var(--hover-bg) !important;
-            border-color: var(--text-secondary) !important;
+            background: rgba(var(--primary-rgb, 58, 123, 213), 0.05) !important;
+            border-color: rgba(var(--primary-rgb, 58, 123, 213), 0.4) !important;
           }
         }
       }
@@ -41,43 +81,131 @@
   }
 
   .mat-mdc-card-content {
-    padding: 12px; // Compact padding
+    padding: 24px 32px;
+
+    .search-section {
+      margin-bottom: 24px;
+      max-width: 400px;
+
+      ::ng-deep {
+        .mat-mdc-form-field {
+          width: 100%;
+
+          .mat-mdc-text-field-wrapper {
+            background: rgba(var(--primary-rgb, 58, 123, 213), 0.04) !important;
+            border-radius: 12px !important;
+            border: 1px solid rgba(var(--primary-rgb, 58, 123, 213), 0.1) !important;
+            height: 48px !important; // Controlled height
+
+            &:hover {
+              background: rgba(var(--primary-rgb, 58, 123, 213), 0.05) !important;
+              border-color: rgba(var(--primary-rgb, 58, 123, 213), 0.2) !important;
+            }
+
+            &.mdc-text-field--focused {
+              border-color: rgba(var(--primary-rgb, 58, 123, 213), 0.4) !important;
+              box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 58, 123, 213), 0.05);
+            }
+          }
+
+          .mat-mdc-form-field-flex {
+            padding: 0 16px !important;
+            align-items: center !important;
+            height: 48px !important;
+          }
+
+          .mat-mdc-form-field-prefix {
+            display: flex !important;
+            align-items: center !important;
+            height: 48px !important;
+            padding: 0 !important;
+          }
+
+          .mat-mdc-form-field-infix {
+            padding: 0 !important;
+            display: flex !important;
+            align-items: center !important;
+            min-height: 48px !important;
+
+            input {
+              margin: 0 !important;
+              padding: 0 !important;
+              height: 48px !important;
+              line-height: 48px !important;
+              vertical-align: middle !important;
+            }
+          }
+        }
+      }
+    }
   }
 }
 
 .table-container {
-  border: 1px solid #e0e0e0;
-  border-radius: 4px;
-  margin-top: 0;
-  overflow-x: auto; // Content scroll
-  width: 100%; // Ensure container takes correct width
-  max-width: 100%; // Prevent expanding beyond parent
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
+  background: rgba(var(--bg-rgb, 255, 255, 255), 0.5);
+  border: 1px solid rgba(var(--border-rgb, 0, 0, 0), 0.05);
 
   table.an-table {
-    min-width: 1000px; // Force scroll on small screens
+    min-width: 1000px;
     width: 100%;
+    background: transparent !important;
+    border-collapse: separate;
+    border-spacing: 0;
 
+    // Reset min-width for tables inside modals
+    :host-context(mat-dialog-content) & {
+      min-width: 100% !important;
+    }
+
     th.mat-header-cell {
-      font-weight: 600;
-      color: var(--table-header-text);
-      background-color: var(--table-header-bg);
-      padding: 10px 12px; // Compact padding
-      font-size: 14px;
-      border-bottom: 1px solid var(--border-color);
+      font-weight: 700;
+      color: var(--text-secondary);
+      background-color: rgba(var(--primary-rgb, 58, 123, 213), 0.05) !important;
+      padding: 16px 20px;
+      font-size: 13px;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      border-bottom: 1px solid rgba(var(--border-rgb, 0, 0, 0), 0.08);
+      font-family: 'Inter', sans-serif;
     }
 
     td.mat-cell {
-      padding: 10px 12px; // Compact padding
+      padding: 18px 20px;
       color: var(--text-primary);
       font-size: 14px;
-      border-bottom: 1px solid var(--border-color);
+      border-bottom: 1px solid rgba(var(--border-rgb, 0, 0, 0), 0.04);
+      transition: background-color 0.2s ease;
     }
 
     tr.mat-row {
+      transition: all 0.2s ease;
+
+      &.table-no-data {
+        td {
+          text-align: center !important;
+          padding: 40px 0 !important;
+          color: var(--text-secondary);
+          font-style: italic;
+          opacity: 0.8;
+          width: 100%; // Force full width
+        }
+
+        &:hover {
+          background-color: transparent !important;
+        }
+      }
+
       &:hover {
-        background-color: var(--table-hover);
+        background-color: rgba(var(--primary-rgb, 58, 123, 213), 0.04) !important;
       }
 
+      &:nth-child(even) {
+        background-color: rgba(0, 0, 0, 0.01);
+      }
+
       &:last-child td {
         border-bottom: none;
       }
@@ -87,10 +215,41 @@
 
 .row-action {
   display: flex;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
-  padding-right: 12px;
-  gap: 12px;
+  gap: 16px;
+  padding: 4px 0;
+
+  fa-icon {
+    font-size: 18px;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+      transform: scale(1.2);
+    }
+
+    &.license-icon:hover {
+      color: #8e2de2;
+    }
+
+    &.webui-icon:hover {
+      color: #3a7bd5;
+    }
+
+    &.cli-icon:hover {
+      color: #f2c94c;
+    }
+
+    &.save-icon:hover {
+      color: #34e89e;
+    }
+
+    &.delete-icon:hover {
+      color: #ff5f6d;
+    }
+  }
 }
 
 .a-link {
@@ -141,7 +300,7 @@
 }
 
 .w-10 {
-  width: 10%;
+  min-width: 180px;
 }
 
 // Status Badges
@@ -153,40 +312,112 @@
 .status-badge {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 4px 10px;
-  border-radius: 16px;
+  gap: 8px;
+  padding: 6px 14px;
+  border-radius: 20px;
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 
   &.success {
-    background-color: #e8f5e9;
-    color: #2e7d32;
-    border: 1px solid transparent;
+    background: linear-gradient(135deg, rgba(52, 232, 158, 0.15) 0%, rgba(15, 52, 67, 0.05) 100%);
+    color: #1b5e20;
+    border: 1px solid rgba(52, 232, 158, 0.2);
+
+    fa-icon {
+      color: #2e7d32;
+    }
   }
 
   &.error {
-    background-color: #ffebee;
-    color: #c62828;
-    border: 1px solid transparent;
+    background: linear-gradient(135deg, rgba(255, 95, 109, 0.15) 0%, rgba(255, 195, 113, 0.05) 100%);
+    color: #b71c1c;
+    border: 1px solid rgba(255, 95, 109, 0.2);
+
+    fa-icon {
+      color: #d32f2f;
+    }
   }
+
+  fa-icon {
+    font-size: 8px;
+
+    &.pulse-icon {
+      animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
+    }
+  }
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
 }
 
+@keyframes pulse-ring {
+  0% {
+    transform: scale(0.8);
+    opacity: 0.8;
+  }
+
+  50% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(0.8);
+    opacity: 0.8;
+  }
+}
+
 // Dark Mode Support for Badges
 :host-context(.dark-theme) {
-  .status-badge {
-    background-color: transparent !important;
+  .page-card-1 {
+    background: rgba(30, 30, 35, 0.6) !important;
+    border-color: rgba(255, 255, 255, 0.08);
 
+    .mat-mdc-card-header {
+      background: rgba(255, 255, 255, 0.02);
+      border-color: rgba(255, 255, 255, 0.05);
+    }
+  }
+
+  .status-badge {
     &.success {
-      color: var(--success-color);
-      border: 1px solid var(--success-color);
+      background: rgba(52, 232, 158, 0.1) !important;
+      color: #34e89e;
+      border-color: rgba(52, 232, 158, 0.2);
     }
 
     &.error {
-      color: var(--warn-color);
-      border: 1px solid var(--warn-color);
+      background: rgba(255, 95, 109, 0.1) !important;
+      color: #ff5f6d;
+      border-color: rgba(255, 95, 109, 0.2);
     }
   }
+
+  .table-container {
+    background: rgba(255, 255, 255, 0.02);
+    border-color: rgba(255, 255, 255, 0.05);
+
+    table.an-table {
+      th.mat-header-cell {
+        background-color: rgba(255, 255, 255, 0.03) !important;
+        color: rgba(255, 255, 255, 0.7);
+      }
+
+      td.mat-cell {
+        color: rgba(255, 255, 255, 0.9);
+        border-color: rgba(255, 255, 255, 0.05);
+      }
+
+      tr.mat-row:hover {
+        background-color: rgba(255, 255, 255, 0.05) !important;
+      }
+    }
+  }
 }
 
 .mat-mdc-form-field {
@@ -194,46 +425,157 @@
   width: 100%;
 }
 
-// Dialog Styles
+// Dialog Styles Redesign
 h2[mat-dialog-title] {
   margin: 0;
-  padding: 10px 24px; // Reduced padding
-  font-size: 18px;
-  font-weight: 500;
-  // Removed border-bottom
-  background-color: var(--dialog-bg);
+  padding: 12px 24px !important; // Even more compact
+  font-size: 18px; // Slightly smaller font
+  font-weight: 700;
   color: var(--text-primary);
+  background: rgba(var(--primary-rgb, 58, 123, 213), 0.05);
+  border-bottom: 1px solid rgba(var(--border-rgb, 0, 0, 0), 0.05);
+  font-family: 'Inter', sans-serif;
+  letter-spacing: -0.01em;
 }
 
 mat-dialog-content {
-  padding: 24px !important;
-  min-width: 400px;
+  padding: 20px 24px !important; // More compact
+  max-height: 80vh;
+  width: 100%;
+  overflow-x: hidden !important; // Prevent unwanted scrollbar
 
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(var(--primary-rgb, 58, 123, 213), 0.2);
+    border-radius: 10px;
+  }
+
   .form-field-wrapper {
-    margin-bottom: 16px;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
 
     .form-label {
-      display: block;
-      margin-bottom: 8px;
-      font-weight: 500;
-      color: var(--text-secondary);
-      font-size: 14px;
+      flex: 0 0 160px;
+      margin-bottom: 0 !important;
+      font-weight: 600;
+      color: var(--text-primary);
+      font-size: 13.5px;
+      font-family: 'Inter', sans-serif;
+      opacity: 0.9;
     }
 
-    mat-form-field {
-      width: 100%;
+    ::ng-deep {
+      .mat-mdc-form-field {
+        flex: 1;
+        width: 100%;
+
+        .mat-mdc-text-field-wrapper {
+          background: rgba(var(--primary-rgb, 58, 123, 213), 0.015) !important;
+          border-radius: 10px !important;
+          border: 1px solid rgba(var(--border-rgb, 0, 0, 0), 0.06) !important;
+          transition: all 0.2s ease;
+
+          &:hover {
+            background: rgba(var(--primary-rgb, 58, 123, 213), 0.03) !important;
+            border-color: rgba(var(--primary-rgb, 58, 123, 213), 0.2) !important;
+          }
+
+          &.mdc-text-field--focused {
+            background: #ffffff !important;
+            border-color: rgba(var(--primary-rgb, 58, 123, 213), 0.4) !important;
+            box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 58, 123, 213), 0.05);
+          }
+        }
+
+        .mat-mdc-form-field-subscript-wrapper {
+          display: none; // Using subscriptSizing="dynamic"
+        }
+      }
     }
 
     mat-radio-group {
+      flex: 1;
       display: flex;
-      gap: 16px;
+      gap: 24px;
+      padding: 8px 0;
+
+      mat-radio-button {
+        ::ng-deep .mdc-label {
+          font-weight: 500;
+          color: var(--text-secondary);
+        }
+      }
     }
+
+    mat-slide-toggle {
+      flex: 1;
+      padding: 8px 0;
+    }
   }
 }
 
 mat-dialog-actions {
-  padding: 10px 24px !important; // Reduced padding
-  // Removed border-top
-  margin-bottom: 0;
-  background-color: var(--dialog-bg);
+  padding: 12px 24px 16px !important; // More compact
+  gap: 12px;
+  background: rgba(var(--primary-rgb, 58, 123, 213), 0.02);
+  border-top: 1px solid rgba(var(--border-rgb, 0, 0, 0), 0.05);
+
+  button {
+    border-radius: 8px !important;
+    padding: 0 24px !important;
+    height: 40px;
+    font-weight: 600;
+    text-transform: none;
+    letter-spacing: 0.01em;
+
+    &[color="primary"] {
+      background: linear-gradient(135deg, #5c9cf1 0%, #3a7bd5 100%) !important;
+      color: #ffffff !important;
+      box-shadow: 0 4px 12px rgba(58, 123, 213, 0.15);
+    }
+
+    &[color="basic"] {
+      background: #ffffff !important;
+      border: 1px solid rgba(var(--border-rgb, 0, 0, 0), 0.1) !important;
+      color: var(--text-secondary) !important;
+    }
+  }
+}
+
+:host-context(.dark-theme) {
+  h2[mat-dialog-title] {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: rgba(255, 255, 255, 0.08);
+  }
+
+  mat-dialog-content {
+    .form-field-wrapper {
+      ::ng-deep .mat-mdc-form-field {
+        .mat-mdc-text-field-wrapper {
+          background: rgba(255, 255, 255, 0.02) !important;
+          border-color: rgba(255, 255, 255, 0.1) !important;
+
+          &.mdc-text-field--focused {
+            background: rgba(255, 255, 255, 0.05) !important;
+          }
+        }
+      }
+    }
+  }
+
+  mat-dialog-actions {
+    background: rgba(255, 255, 255, 0.01);
+    border-color: rgba(255, 255, 255, 0.08);
+
+    button[color="basic"] {
+      background: rgba(255, 255, 255, 0.05) !important;
+      border-color: rgba(255, 255, 255, 0.1) !important;
+    }
+  }
 }
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices.ts	(revision 2927)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices.ts	(working copy)
@@ -79,7 +79,8 @@
   }
 
   getDeviceBuildInfo() {
-    this.dialogConfig.width = '40%';
+    this.dialogConfig.width = '60%';
+    this.dialogConfig.maxWidth = '900px';
     // Removed fixed height
     const dialogRef = this.dialog.open(DevicesBuildInfoDialog, this.dialogConfig);
     dialogRef.afterClosed().subscribe(result => {
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 2927)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/shared/shared-module.ts	(working copy)
@@ -18,7 +18,7 @@
   faChevronDown, faPlay, faPlusCircle, faPlus, faFileImport, faCheckCircle,
   faExclamationCircle, faExclamationTriangle, faQuestion, faDownload, faFolderTree,
   faRotateRight, faExchangeAlt, faTimes, faLink, faMoon, faSun, faCircleHalfStroke,
-  faCheck, faPowerOff, faUpload, faImage, faEdit, faTrash
+  faCheck, faPowerOff, faUpload, faImage, faEdit, faTrash, faCircle
 } from '@fortawesome/free-solid-svg-icons';
 import {
   faBell as farBell, faRectangleList, faFloppyDisk, faCircleDown, faWindowMaximize,
@@ -83,7 +83,7 @@
   faDownload, faFolderTree, faRotateRight, faExchangeAlt, faTimes,
   faLink, faMoon, faSun, faCircleHalfStroke,
   faCheck, faPowerOff, faUpload, faImage,
-  faEdit, faTrash,
+  faEdit, faTrash, faCircle
 ];
 
 
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/db/db_client.py
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/db/db_client.py	(revision 2927)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/db/db_client.py	(working copy)
@@ -132,9 +132,6 @@
             result = func(cur, *args, **kwargs)
             conn.commit()
             return result
-        except (Exception, psycopg2.DatabaseError) as error:
-            # ToDo: Integrate with Exception handlers once available.
-            print(f"Error in {func.__name__}: {error}")
         finally:
             if cur:
                 cur.close()
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 2927)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/repositories/apv_services_metrics.py	(working copy)
@@ -23,13 +23,13 @@
         _query = f"""
         WITH HitsDeltas AS (
             SELECT
-                ServerId AS service_name,
+                serverid AS service_name,
                 agent_host,
                 MAX(total_hits) - MIN(total_hits) AS hits
             FROM apv_virtual_stats
             WHERE time >= NOW() - INTERVAL '{interval_seconds} seconds'
             {host_filter}
-            GROUP BY ServerId, agent_host
+            GROUP BY serverid, agent_host
         ),
         HitsTop AS (
             SELECT
@@ -44,48 +44,48 @@
             LIMIT {limit}
         ),
         ConnLatest AS (
-            SELECT DISTINCT ON (ServerId, agent_host)
-                ServerId AS service_name,
+            SELECT DISTINCT ON (serverid, agent_host)
+                serverid AS service_name,
                 agent_host,
-                ConnCnt
+                conn_cnt
             FROM apv_virtual_stats
             WHERE time >= NOW() - INTERVAL '{interval_seconds} seconds'
             {host_filter}
-            ORDER BY ServerId, agent_host, time DESC
+            ORDER BY serverid, agent_host, time DESC
         ),
         ConnTop AS (
             SELECT
                 'connections' AS metric,
                 agent_host,
                 service_name,
-                ConnCnt AS value,
+                conn_cnt AS value,
                 NULL::bigint AS received,
                 NULL::bigint AS sent
             FROM ConnLatest
-            ORDER BY ConnCnt DESC
+            ORDER BY conn_cnt DESC
             LIMIT {limit}
         ),
         NetLatest AS (
-            SELECT DISTINCT ON (ServerId, agent_host)
-                ServerId AS service_name,
+            SELECT DISTINCT ON (serverid, agent_host)
+                serverid AS service_name,
                 agent_host,
-                InBytePerSec,
-                OutBytePerSec
+                in_byte_per_sec,
+                out_byte_per_sec
             FROM apv_virtual_stats
             WHERE time >= NOW() - INTERVAL '{interval_seconds} seconds'
             {host_filter}
-            ORDER BY ServerId, agent_host, time DESC
+            ORDER BY serverid, agent_host, time DESC
         ),
         NetTop AS (
             SELECT
                 'network' AS metric,
                 agent_host,
                 service_name,
-                (InBytePerSec + OutBytePerSec) AS value,
-                InBytePerSec AS received,
-                OutBytePerSec AS sent
+                (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 (InBytePerSec + OutBytePerSec) DESC
+            ORDER BY (in_byte_per_sec + out_byte_per_sec) DESC
             LIMIT {limit}
         )
         SELECT *
@@ -308,10 +308,10 @@
             SELECT DISTINCT ON (link_name, agent_host)
                 link_name,
                 agent_host,
-                CAST(REGEXP_REPLACE(link_bandwid_in, '\\D', '', 'g') AS BIGINT) * 8 AS received,
-                CAST(REGEXP_REPLACE(link_bandwid_out, '\\D', '', 'g') AS BIGINT) * 8 AS sent,
-                (CAST(REGEXP_REPLACE(link_bandwid_in, '\\D', '', 'g') AS BIGINT) * 8 +
-                 CAST(REGEXP_REPLACE(link_bandwid_out, '\\D', '', 'g') AS BIGINT) * 8) AS total
+                CAST(link_bandwid_in AS BIGINT) * 8 AS received,
+                CAST(link_bandwid_out AS BIGINT) * 8 AS sent,
+                (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}
             ORDER BY link_name, agent_host, time DESC