Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.html	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.html	(working copy)
@@ -1,19 +1,18 @@
 <div class="app-wrapper" [class.sidebar-collapsed]="(isSidebarCollapsed$ | async) && (showNavigation$ | async)">
   @if ((currentUser$ | async) && (showNavigation$ | async)) {
-    <app-navigation></app-navigation>
+  <app-navigation></app-navigation>
   }
-  <div class="main-content"
-       [class.no-navigation-margin]="!(currentUser$ | async) && (showNavigation$ | async)"
-       [ngStyle]="{
-         marginLeft: (showNavigation$ | async) ? ((isSidebarCollapsed$ | async) ? '60px' : '250px') : '0px',
-         width: (showNavigation$ | async) ? ((isSidebarCollapsed$ | async) ? 'calc(100% - 60px)' : 'calc(100% - 250px)') : '100%',
-         marginTop: (showNavigation$ | async) ? '45px' : '0px'
+  <div class="main-content" [class.no-navigation-margin]="!(currentUser$ | async) && (showNavigation$ | async)"
+    [ngStyle]="{
+         marginLeft: (showNavigation$ | async) ? ((isSidebarCollapsed$ | async) ? '70px' : '260px') : '0px',
+         width: (showNavigation$ | async) ? ((isSidebarCollapsed$ | async) ? 'calc(100% - 70px)' : 'calc(100% - 260px)') : '100%',
+         marginTop: (showNavigation$ | async) ? '50px' : '0px'
        }">
     <div class="main-content-inner">
       @if (loading$ | async) {
-        <app-loading></app-loading>
+      <app-loading></app-loading>
       }
       <router-outlet></router-outlet>
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.scss	(working copy)
@@ -9,26 +9,38 @@
 
 .main-content {
   flex-grow: 1;
-  transition: margin-left 0.3s ease, margin-top 0.3s ease;
-  width: calc(100% - 250px);
+  // Match sidebar transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1)
+  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  width: calc(100% - 260px);
   box-sizing: border-box;
-  overflow-y: auto; /* Allow vertical scroll only if needed */
-  height: calc(100vh - 60px); /* Account for top bar */
+  overflow-y: auto;
+  overflow-x: hidden !important;
+  height: calc(100vh - 50px);
 }
 
+/* Add padding to inner content wrapper */
+.main-content-inner {
+  padding: 4px; // Compact padding as requested
+  width: 100%;
+  box-sizing: border-box;
+}
+
 .app-wrapper.sidebar-collapsed .main-content {
-  margin-left: 60px;
-  width: calc(100% - 60px);
+  margin-left: 70px;
+  width: calc(100% - 70px);
 }
 
 .main-content.no-navigation-margin {
   margin: 0 !important;
   width: 100% !important;
   height: 100vh !important;
-  max-height: 100vh; /* Prevent exceeding viewport */
+  max-height: 100vh;
+  /* Prevent exceeding viewport */
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 0 !important;
   overflow: hidden;
-}
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/alert-msg-dialog/alert-msg-dialog.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/alert-msg-dialog/alert-msg-dialog.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/alert-msg-dialog/alert-msg-dialog.scss	(working copy)
@@ -3,6 +3,12 @@
   line-height: 1.5;
 }
 
-mat-dialog-title {
+h2[mat-dialog-title] {
   padding-bottom: 0;
+  background-color: var(--dialog-bg);
+  color: var(--text-primary);
 }
+
+mat-dialog-actions {
+  background-color: var(--dialog-bg);
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/app-notification/app-notification.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/app-notification/app-notification.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/app-notification/app-notification.scss	(working copy)
@@ -85,6 +85,7 @@
       stroke-width: 2.5;
       stroke: currentColor;
     }
+
     &:hover {
       opacity: 1;
       transform: scale(1.05);
@@ -116,8 +117,38 @@
     transform: translateY(-20px);
     opacity: 0;
   }
+
   to {
     transform: translateY(0);
     opacity: 1;
   }
 }
+
+/* Dark Theme Overrides */
+:host-context(.dark-theme) {
+  .notification {
+    background-color: var(--surface-bg); // Use app theme background
+    color: var(--text-primary);
+    border: 1px solid var(--border-color); // Subtle border matching theme
+    box-shadow: var(--shadow-medium);
+
+    // Initial left border for accent
+    border-left: 4px solid var(--border-color);
+
+    &.error {
+      border-left-color: $error-accent;
+    }
+
+    &.success {
+      border-left-color: $success-accent;
+    }
+
+    .dismiss-btn {
+      color: var(--text-secondary);
+
+      &:hover {
+        color: var(--text-primary);
+      }
+    }
+  }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/delete-confirmation-dialog/delete-confirmation-dialog.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/delete-confirmation-dialog/delete-confirmation-dialog.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/delete-confirmation-dialog/delete-confirmation-dialog.scss	(working copy)
@@ -3,6 +3,12 @@
   line-height: 1.5;
 }
 
-mat-dialog-title {
+h2[mat-dialog-title] {
   padding-bottom: 0;
+  background-color: var(--dialog-bg);
+  color: var(--text-primary);
 }
+
+mat-dialog-actions {
+  background-color: var(--dialog-bg);
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/tab-container/tab-container.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/tab-container/tab-container.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/tab-container/tab-container.scss	(working copy)
@@ -13,7 +13,8 @@
         overflow: hidden;
 
         ::ng-deep .mat-mdc-tab-header {
-            border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+            border-bottom: 1px solid var(--border-color);
+            background-color: var(--surface-bg);
         }
 
         ::ng-deep .mat-mdc-tab {
@@ -24,7 +25,7 @@
             opacity: 1 !important;
 
             &:hover {
-                background-color: rgba(0, 0, 0, 0.04);
+                background-color: var(--hover-bg);
             }
         }
     }
@@ -56,13 +57,13 @@
 
         .tab-icon {
             font-size: 14px;
-            color: #666;
+            color: var(--text-secondary);
         }
 
         .tab-text {
             font-weight: 500;
             font-size: 14px;
-            color: #666;
+            color: var(--text-secondary);
         }
     }
 
@@ -71,7 +72,7 @@
 
         .tab-icon,
         .tab-text {
-            color: #1976d2; // Primary blue
+            color: var(--primary-color);
         }
     }
 }
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.html	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.html	(working copy)
@@ -50,7 +50,7 @@
           <span class="label">Selection:</span>
           <span class="value">{{ customFrom }} - {{ customTo }}</span>
         </div>
-        <button mat-flat-button color="primary" (click)="applyCustomRange()">Apply Time Range</button>
+        <button mat-flat-button color="primary" (click)="applyCustomRange()">Apply</button>
       </div>
     </div>
   </div>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.scss	(working copy)
@@ -188,4 +188,92 @@
       }
     }
   }
+}
+
+// Dark Theme Overrides
+.dark-theme {
+  .time-filter-wrapper {
+    background: var(--bg-dark);
+    color: var(--text-primary);
+
+    // Left Sidebar
+    .quick-ranges-sidebar {
+      background: var(--panel-bg);
+      border-right: 1px solid var(--border-color);
+
+      .sidebar-title {
+        color: var(--text-secondary);
+      }
+
+      .ranges-list {
+        .range-btn {
+          color: var(--text-secondary);
+
+          &:hover {
+            background: rgba(255, 255, 255, 0.05);
+            color: var(--text-primary);
+          }
+        }
+      }
+    }
+
+    // Right Main Content
+    .custom-range-content {
+      .dialog-header {
+        .dialog-title {
+          color: var(--text-primary);
+        }
+
+        button {
+          color: var(--text-secondary);
+        }
+      }
+
+      .custom-inputs-container {
+        .date-row {
+          .range-separator {
+            color: var(--text-secondary);
+          }
+
+          mat-form-field.dense-field {
+            ::ng-deep .mat-mdc-text-field-wrapper {
+              background-color: var(--panel-bg);
+              border: 1px solid var(--border-color);
+            }
+
+            input {
+              color: var(--text-primary);
+            }
+          }
+        }
+
+        .settings-row {
+          mat-form-field.refresh-field {
+            ::ng-deep .mat-mdc-text-field-wrapper {
+              background-color: var(--panel-bg);
+              border: 1px solid var(--border-color);
+            }
+
+            input {
+              color: var(--text-primary);
+            }
+          }
+        }
+
+        .dialog-actions {
+          border-top: 1px solid var(--border-color);
+
+          .current-range-preview {
+            .label {
+              color: var(--text-secondary);
+            }
+
+            .value {
+              color: var(--text-primary);
+            }
+          }
+        }
+      }
+    }
+  }
 }
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/control-panel/control-panel.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/control-panel/control-panel.scss	(revision 2832)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/control-panel/control-panel.scss	(working copy)
@@ -1,22 +1,28 @@
 :host {
-  --bg-dark: #f0f2f5;
-  --panel-bg: #ffffff;
-  --border-color: #e0e0e0;
-  --text-primary: #333333;
-  --text-secondary: #666666;
-
   --accent-blue: #2196f3;
   --accent-green: #4caf50;
   --accent-orange: #ff9800;
   --accent-red: #f44336;
+
+  /* Explicitly define theme variables for component scope */
+  --bg-dark: var(--app-bg);
+  --panel-bg: var(--surface-bg);
+  --border-color: var(--border-color);
+  --text-primary: var(--text-primary);
+  --text-secondary: var(--text-secondary);
 
   display: block;
-  background-color: var(--bg-dark);
-  min-height: 100vh;
-  color: var(--text-primary);
-  font-family: Roboto, "Helvetica Neue", sans-serif;
+  /* background and color inherited from body */
 }
 
+:host-context(.dark-theme) {
+  --bg-dark: #303030;
+  --panel-bg: #424242;
+  --border-color: #616161;
+  --text-primary: #ffffff;
+  --text-secondary: #b0b0b0;
+}
+
 * {
   font-family: Roboto, "Helvetica Neue", sans-serif;
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/control-panel/control-panel.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/control-panel/control-panel.ts	(revision 2832)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/control-panel/control-panel.ts	(working copy)
@@ -9,6 +9,7 @@
 import { UtilsService } from '../../services/utils-service';
 import { BytesPerSecPipe } from '../../pipes/bytes-per-sec-pipe';
 import { ChartOptions } from '../../services/chart-options';
+import { Layout } from '../../services/layout';
 
 @Component({
   selector: 'app-control-panel',
@@ -78,11 +79,16 @@
     private _system: SystemService,
     private _utils: UtilsService,
     private _chartOptions: ChartOptions,
+    private layoutService: Layout
   ) { }
 
   ngOnInit() {
     this.initEmptyCharts();
     this.refreshData();
+
+    this.layoutService.isDarkMode$.subscribe(isDark => {
+      this.updateChartTheme(isDark);
+    });
   }
 
   refreshData() {
@@ -386,22 +392,67 @@
 
   customizeMainChart(option: any) {
     if (!option) return;
-    // Force some dashboard-friendly overrides
+    const isDark = document.body.classList.contains('dark-theme'); // Or use state if available
+    this.applyThemeToOption(option, isDark);
+  }
+
+  updateChartTheme(isDark: boolean) {
+    // Re-apply theme to all active chart options
+    this.applyThemeToOption(this.connectionChartOption1, isDark);
+    this.connectionChartOption1 = { ...this.connectionChartOption1 }; // Trigger change detection
+
+    this.applyThemeToOption(this.connectionChartOption2, isDark);
+    this.connectionChartOption2 = { ...this.connectionChartOption2 };
+
+    this.applyThemeToGauge(this.cpuLoadOptions, isDark);
+    this.cpuLoadOptions = { ...this.cpuLoadOptions };
+
+    this.applyThemeToGauge(this.memLoadOptions, isDark);
+    this.memLoadOptions = { ...this.memLoadOptions };
+
+    this.applyThemeToGauge(this.diskLoadOptions, isDark);
+    this.diskLoadOptions = { ...this.diskLoadOptions };
+  }
+
+  applyThemeToOption(option: any, isDark: boolean) {
+    if (!option) return;
+    const textColor = isDark ? '#ffffff' : '#333333';
+    const secondaryColor = isDark ? '#b0b0b0' : '#666666';
+    const lineColor = isDark ? '#616161' : '#e0e0e0';
+
     option.grid = { top: 40, right: 20, bottom: 20, left: 50, containLabel: true };
     option.backgroundColor = 'transparent';
+
     if (option.xAxis) {
-      option.xAxis.axisLine = { lineStyle: { color: '#e0e0e0' } };
-      option.xAxis.axisLabel = { color: '#666666' };
+      if (!option.xAxis.axisLine) option.xAxis.axisLine = { lineStyle: {} };
+      option.xAxis.axisLine.lineStyle = { color: lineColor };
+      if (!option.xAxis.axisLabel) option.xAxis.axisLabel = {};
+      option.xAxis.axisLabel.color = secondaryColor;
       option.xAxis.splitLine = { show: false };
     }
     if (option.yAxis) {
-      option.yAxis.axisLine = { show: false };
-      option.yAxis.axisLabel = { color: '#666666' };
-      option.yAxis.splitLine = { lineStyle: { color: '#e0e0e0', type: 'dashed' } };
+      if (!option.yAxis.axisLine) option.yAxis.axisLine = { show: false };
+      if (!option.yAxis.axisLabel) option.yAxis.axisLabel = {};
+      option.yAxis.axisLabel.color = secondaryColor;
+      if (!option.yAxis.splitLine) option.yAxis.splitLine = { lineStyle: { type: 'dashed' } };
+      option.yAxis.splitLine.lineStyle = { color: lineColor, type: 'dashed' };
     }
     if (option.legend) {
-      option.legend.textStyle = { color: '#333333' };
+      if (!option.legend.textStyle) option.legend.textStyle = {};
+      option.legend.textStyle.color = textColor;
     }
   }
 
+  applyThemeToGauge(option: any, isDark: boolean) {
+    if (!option || !option.series || !option.series[0]) return;
+    const textColor = isDark ? '#ffffff' : '#333333';
+    const secondaryColor = isDark ? '#b0b0b0' : '#666666';
+
+    const series = option.series[0];
+    if (series.data && series.data[0]) {
+      const data = series.data[0];
+      if (data.title) data.title.color = secondaryColor;
+      if (data.detail) data.detail.color = textColor;
+    }
+  }
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/general-settings/general-settings.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/general-settings/general-settings.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/general-settings/general-settings.scss	(working copy)
@@ -77,4 +77,48 @@
     box-shadow: none;
     padding: 24px;
     min-height: 400px;
+}
+
+/* Dark Theme Overrides */
+:host-context(.dark-theme) {
+    .settings-container {
+        background-color: var(--surface-bg);
+
+        ::ng-deep .general-settings-tabs {
+            .mat-mdc-tab-header {
+                border-bottom: 1px solid var(--border-color);
+            }
+
+            .mat-mdc-tab {
+                &:hover {
+                    background-color: var(--hover-bg);
+                }
+
+                &.mdc-tab--active {
+
+                    .tab-icon,
+                    .tab-text {
+                        color: #64b5f6 !important;
+                    }
+                }
+            }
+
+            .mdc-tab-indicator__content--underline {
+                border-color: #64b5f6 !important;
+            }
+        }
+    }
+
+    .custom-tab-label {
+
+        .tab-icon,
+        .tab-text {
+            color: var(--text-secondary);
+        }
+    }
+
+    .tab-content-wrapper {
+        background-color: var(--surface-bg);
+        border: 1px solid var(--border-color);
+    }
 }
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/login/login.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/login/login.html	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/login/login.html	(working copy)
@@ -34,6 +34,9 @@
                 placeholder="Username"
                 type="text"
               />
+              <mat-error *ngIf="loginForm.get('username')?.hasError('required')">
+                Username is required
+              </mat-error>
             </mat-form-field>
           </div>
           <div>
@@ -45,6 +48,9 @@
                 placeholder="Password"
                 type="password"
               />
+              <mat-error *ngIf="loginForm.get('password')?.hasError('required')">
+                Password is required
+              </mat-error>
             </mat-form-field>
           </div>
           <p class="text-center login-error">
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/login/login.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/login/login.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/login/login.scss	(working copy)
@@ -9,6 +9,85 @@
   margin: 0;
   flex-direction: column;
   box-sizing: border-box;
+
+  // Force Light Theme Variables Isolation
+  --app-bg: #fafafa;
+  --surface-bg: #ffffff;
+  --text-primary: #333333;
+  --text-secondary: #555555;
+  --border-color: #cccccc;
+
+  // Specific overrides for Material colors which might inherit Dark Theme
+  --mat-form-field-container-text-color: #000000;
+  --mat-mdc-form-field-floating-label-text-color: #333333;
+
+  // Enforce dark colors for all states (resting, hover, focus)
+  --mdc-outlined-text-field-label-text-color: #333333;
+  --mdc-outlined-text-field-hover-label-text-color: #333333;
+  --mdc-outlined-text-field-focus-label-text-color: #333333;
+  --mdc-outlined-text-field-input-text-color: #000000;
+  --mdc-outlined-text-field-caret-color: #000000;
+
+  color: #000000; // Base text color
+
+  // Force input and form field colors
+  .mat-mdc-form-field {
+    .mat-mdc-input-element {
+      color: #000000 !important;
+      -webkit-text-fill-color: #000000 !important; // For autofill
+    }
+
+    .mat-mdc-input-element::placeholder {
+      color: #333333 !important;
+    }
+
+    .mat-mdc-floating-label {
+      color: #333333 !important;
+    }
+
+    .mdc-notched-outline__leading,
+    .mdc-notched-outline__notch,
+    .mdc-notched-outline__trailing {
+      border-color: rgba(0, 0, 0, 0.38) !important;
+    }
+
+    &.mat-form-field-invalid {
+
+      .mdc-notched-outline__leading,
+      .mdc-notched-outline__notch,
+      .mdc-notched-outline__trailing {
+        border-color: #b71c1c !important;
+      }
+    }
+
+    &.mat-focused {
+
+      .mdc-notched-outline__leading,
+      .mdc-notched-outline__notch,
+      .mdc-notched-outline__trailing {
+        border-color: #1170cf !important;
+      }
+
+      .mat-mdc-floating-label {
+        color: #1170cf !important;
+      }
+    }
+
+    // Specific fix for MDC label color reset
+    ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label {
+      color: #333333 !important;
+    }
+
+    // Dark red required marker
+    ::ng-deep .mat-mdc-form-field-required-marker {
+      color: #b71c1c !important;
+    }
+
+    // Dark red validation error text
+    ::ng-deep .mat-mdc-form-field-error {
+      color: #b71c1c !important;
+    }
+  }
 }
 
 .box-content {
@@ -67,6 +146,11 @@
   width: 100px;
 }
 
+button[type='submit'] {
+  background-color: var(--primary-color) !important;
+  color: #ffffff !important;
+}
+
 .login-form {
   padding: 20px;
   width: 100%;
@@ -76,12 +160,12 @@
   align-items: center;
 }
 
-.login-form > div {
+.login-form>div {
   width: 100%;
   margin-bottom: 15px;
 }
 
-.login-form > div:last-child {
+.login-form>div:last-child {
   margin-bottom: 0;
 }
 
@@ -130,4 +214,4 @@
   height: 100%;
   font-size: 1.4rem;
   line-height: 2.25rem;
-}
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/monitoring/monitoring.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/monitoring/monitoring.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/monitoring/monitoring.scss	(working copy)
@@ -1,6 +1,6 @@
 .monitoring-container {
   padding: 4px 5px;
-  background-color: #fafafa;
+  background-color: var(--app-bg);
   height: 100%;
   overflow: hidden;
   box-sizing: border-box;
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/navigation/navigation.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/navigation/navigation.html	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/navigation/navigation.html	(working copy)
@@ -7,49 +7,46 @@
       <span class="app-branding">Array </span><span class="app-platform">Management Platform</span>
     </div>
     <div class="top-right">
-      <fa-icon [icon]="['far', 'rectangle-list']" size="2x" class="a-link" (click)="showLatestTasks()"
-        matTooltip="Show Latest Tasks"></fa-icon>
-      <div class="top-right">
-        <button mat-icon-button [matMenuTriggerFor]="notificationMenu" class="notification-button">
-          <fa-icon [icon]="['far', 'bell']" size="2x"></fa-icon>
-          <span class="notification-badge">{{ notifications.length }}</span>
-        </button>
-        <mat-menu #notificationMenu="matMenu" class="app-notification-menu-panel">
-          <div class="app-notification-drawer-content">
-            <div class="drawer-header">
-              <h3>Notifications</h3>
-            </div>
-            <div class="notification-list-scroll">
-              @for (item of notifications.slice(0, 5); track item.id) {
-              <div class="notification-item">
-                <div class="notification-meta">
-                  <div class="user-avatar">{{ item.avatarInitials }}</div>
-                  <p class="summary">
-                    <b>{{ item.user }}</b> {{ item.summary }} <span>{{ item.time }}</span>
-                  </p>
-                </div>
-                <!--                  <div class="notification-details">-->
-                <!--                    <fa-icon [icon]="['fas', 'bookmark']" class="issue-icon"></fa-icon>-->
-                <!--                    <span class="n-title">{{ item.issueTitle }}</span>-->
-                <!--                    <span class="n-key">{{ item.issueKey }}</span>-->
-                <!--                  </div>-->
-                <!--                  <div class="n-details">-->
-                <!--                    {{ item.commitDetails }}-->
-                <!--                  </div>-->
+      <button class="nav-icon-btn" (click)="showLatestTasks()" matTooltip="Show Latest Tasks">
+        <fa-icon [icon]="['far', 'rectangle-list']"></fa-icon>
+      </button>
+
+      <button mat-icon-button class="nav-icon-btn theme-toggle" (click)="toggleTheme()" matTooltip="Toggle Theme">
+        <fa-icon [icon]="['fas', 'circle-half-stroke']"></fa-icon>
+      </button>
+
+      <button mat-icon-button [matMenuTriggerFor]="notificationMenu" class="nav-icon-btn notification-button">
+        <fa-icon [icon]="['far', 'bell']"></fa-icon>
+        <span class="notification-badge">{{ notifications.length }}</span>
+      </button>
+
+      <mat-menu #notificationMenu="matMenu" class="app-notification-menu-panel">
+        <div class="app-notification-drawer-content">
+          <div class="drawer-header">
+            <h3>Notifications</h3>
+          </div>
+          <div class="notification-list-scroll">
+            @for (item of notifications.slice(0, 5); track item.id) {
+            <div class="notification-item">
+              <div class="notification-meta">
+                <div class="user-avatar">{{ item.avatarInitials }}</div>
+                <p class="summary">
+                  <b>{{ item.user }}</b> {{ item.summary }} <span>{{ item.time }}</span>
+                </p>
               </div>
-              }
-              <div class="notification-footer-summary">
-                <a class="view-all-link" (click)="viewAllNotifications()">
-                  +{{ notifications.length > 5 ? notifications.length - 5 : 0 }} more notifications
-                </a>
-              </div>
             </div>
+            }
+            <div class="notification-footer-summary">
+              <a class="view-all-link" (click)="viewAllNotifications()">
+                +{{ notifications.length > 5 ? notifications.length - 5 : 0 }} more notifications
+              </a>
+            </div>
           </div>
-        </mat-menu>
-      </div>
+        </div>
+      </mat-menu>
          
-      <div class="user-dropdown-container">
-        <fa-icon [icon]="['fas', 'user-circle']" size="2x" (click)="toggleUserDropdown($event)"></fa-icon>
+      <div class="user-dropdown-container" (click)="toggleUserDropdown($event)">
+        <fa-icon [icon]="['fas', 'user-circle']"></fa-icon>
         @if (isUserDropdownOpen) {
         <div class="user-dropdown-menu" [class.open]="isUserDropdownOpen">
           <a href="#" (click)="isUserDropdownOpen = false">
@@ -83,10 +80,10 @@
     </div>
   </div>
   <div class="sidebar" [class.collapsed]="isSidebarCollapsed">
-    <div class="sidebar-header">
-      <span class="app-title">Array</span>
-      <!--      <img ngSrc="assets/images/array_logo_color_white.png" height="30" width="100" alt="AMP">-->
-    </div>
+    <!-- <div class="sidebar-header"> -->
+    <!-- <span class="app-title">Array</span> -->
+    <!-- <img ngSrc="assets/images/array_logo_color_white.png" height="30" width="100" alt="AMP"> -->
+    <!-- </div> -->
 
     <nav class="sidebar-nav">
       <ul>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/navigation/navigation.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/navigation/navigation.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/navigation/navigation.scss	(working copy)
@@ -1,19 +1,26 @@
-$nav-bg: #F0F3F7;
-$primary-blue: #1170CF;
+$nav-bg: var(--nav-bg);
+$primary-blue: var(--primary-color);
 $primary-blue-light: #6B8BFF;
-$dark-text: #343A40;
-$medium-text: #6C757D;
-$white: #FFFFFF;
-$active-bg: #E8F0FE;
-$hover-bg: #EAECEF;
-$border-color: #DBDFE4;
-$shadow-light: 0 2px 5px rgba(0, 0, 0, 0.03);
-$shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
+$dark-text: var(--text-primary);
+$medium-text: var(--text-secondary);
+$white: var(--surface-bg);
+$active-bg: var(--active-bg);
+$hover-bg: var(--hover-bg);
+$border-color: var(--border-color);
+$shadow-light: var(--shadow-light);
+$shadow-medium: var(--shadow-medium);
 
-$app-light-grey: #F4F5F7;
+$app-light-grey: var(--app-bg);
 $app-issue-link: #0052cc;
 $app-red-badge: #FF5630;
 
+// Modern Dimensions
+$navbar-height: 50px;
+$sidebar-width: 260px;
+$sidebar-collapsed-width: 70px;
+$border-radius-pill: 12px;
+$transition-speed: 0.3s;
+
 .navigation-container {
   display: flex;
   flex-direction: column;
@@ -23,167 +30,177 @@
   top: 0;
   z-index: 50;
   overflow: hidden;
+  font-family: 'Inter', sans-serif; // Ensure consistent font
 }
 
+/* --- Top Navbar --- */
 .top-navbar {
-  background-color: $nav-bg;
+  background-color: var(--surface-bg); // Use surface color for modern feel
   color: $dark-text;
-  height: 45px;
+  height: $navbar-height;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 20px;
-  box-shadow: $shadow-light;
+  padding: 0 24px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); // Very subtle shadow
   width: 100vw;
   z-index: 51;
   box-sizing: border-box;
   position: fixed;
-  border-bottom: 1px solid $border-color;
+  // border-bottom: 1px solid $border-color; // Removed for cleaner look, shadow is enough
+  backdrop-filter: blur(8px); // Glassmorphism effect if bg is transparent
 }
 
 .top-left {
   display: flex;
   align-items: center;
+  gap: 16px;
 }
 
 .top-left .menu-toggle {
   background: none;
   border: none;
-  font-size: 1.2em;
+  font-size: 1.25em;
   cursor: pointer;
-  margin-right: 15px;
   color: $medium-text;
   transition: color 0.2s ease;
-}
+  padding: 8px;
+  border-radius: 50%;
 
-.top-left .menu-toggle:hover {
-  color: $primary-blue;
+  &:hover {
+    color: $primary-blue;
+    background-color: $hover-bg;
+  }
 }
 
 .top-left .app-branding {
-  line-height: 45px;
+  line-height: 1;
   color: $primary-blue;
-  margin-left: 15px;
-  letter-spacing: 1px;
-  font-weight: 500;
+  font-weight: 700;
+  font-size: 1.25em;
+  letter-spacing: -0.5px;
 }
 
 .top-left .app-platform {
-  line-height: 45px;
+  line-height: 1;
   color: $dark-text;
-  margin-left: 15px;
-  letter-spacing: 1px;
+  font-weight: 400;
+  font-size: 1.25em;
+  margin-left: 8px;
 }
 
 .top-right {
   display: flex;
   align-items: center;
+  gap: 12px; // Reduced gap since buttons have internal spacing
 }
 
-.top-right .search-bar {
-  padding: 8px 12px;
-  border: 1px solid $border-color;
-  border-radius: 20px;
-  margin-right: 20px;
-  width: 200px;
-  outline: none;
-  transition: border-color 0.2s ease;
-}
-
-.top-right .search-bar:focus {
-  border-color: $primary-blue;
-}
-
-.top-right .fa-icon {
-  font-size: 1em;
+// Common Nav Icon Button
+.nav-icon-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%; // Circular touch target
   cursor: pointer;
   color: $medium-text;
-  transition: color 0.2s ease;
-  margin-left: 15px;
-}
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  position: relative; // For badge
 
-.top-right .a-link:hover {
-  color: $primary-blue;
-}
+  &:hover {
+    background-color: $hover-bg;
+    color: $primary-blue;
+    transform: translateY(-1px);
+  }
 
-.top-right .icon:hover {
-  color: $primary-blue;
+  fa-icon {
+    font-size: 1.35em; // Slightly larger, uniform size
+    width: 24px; // Explicit width to prevent shifts
+    height: 24px; // Explicit height
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
 }
 
-
-.top-right .logout-button {
-  background: none;
-  border: 1px solid $primary-blue;
-  color: $primary-blue;
-  padding: 8px 15px;
-  border-radius: 20px;
-  font-size: 0.9em;
+/* --- Dropdown & User Menu --- */
+.user-dropdown-container {
+  position: relative;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
   cursor: pointer;
-  margin-left: 20px;
-  transition: background-color 0.2s ease, color 0.2s ease;
-}
+  color: $medium-text; // Match other icons default
+  transition: all 0.2s ease;
 
-.top-right .logout-button:hover {
-  background-color: $primary-blue;
-  color: $white;
-}
+  &:hover {
+    background-color: $hover-bg;
+    color: $primary-blue;
+  }
 
-.top-right .logout-button i {
-  margin-right: 5px;
+  fa-icon {
+    font-size: 1.35em; // Exact same size as buttons
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
 
 .sidebar {
-  width: 250px;
+  width: $sidebar-width;
   background-color: $nav-bg;
   color: $dark-text;
-  height: calc(100vh - 45px);
+  height: calc(100vh - #{$navbar-height});
   position: fixed;
-  top: 45px;
+  top: $navbar-height;
   left: 0;
   display: flex;
   flex-direction: column;
-  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.03);
-  transition: width 0.3s ease, transform 0.3s ease;
+  box-shadow: 1px 0 0 $border-color; // Clean right border
+  transition: width $transition-speed cubic-bezier(0.4, 0, 0.2, 1);
   overflow-y: auto;
   box-sizing: border-box;
-  max-height: calc(100vh - 45px);
-  border-right: 1px solid $border-color;
+  z-index: 40;
 }
 
 .sidebar.collapsed {
-  width: 60px;
+  width: $sidebar-collapsed-width;
 }
 
 .sidebar-header {
-  padding: 12px;
+  padding: 20px 24px;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid $border-color;
   flex-shrink: 0;
-  color: $dark-text;
+  font-weight: 600;
+  color: $medium-text;
+  font-size: 0.85em;
+  text-transform: uppercase;
+  letter-spacing: 1px;
 }
 
-.sidebar-header .logo {
-  width: 30px;
-  height: 30px;
-  margin-right: 10px;
-}
+.sidebar.collapsed .sidebar-header {
+  justify-content: center;
+  padding: 20px 0;
 
-.sidebar-header .app-title {
-  font-size: 1.2em;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: $primary-blue;
+  span {
+    display: none;
+  }
 }
 
-.sidebar.collapsed .sidebar-header .app-title {
-  display: none;
-}
-
 .sidebar-nav {
   flex-grow: 1;
-  padding: 10px 0;
+  padding: 16px 12px;
   overflow-y: auto;
 }
 
@@ -194,302 +211,247 @@
 }
 
 .sidebar-nav li {
-  margin-bottom: 5px;
+  margin-bottom: 4px;
 }
 
+// Main Menu Links
 .sidebar-nav a {
   display: flex;
   align-items: center;
-  padding: 8px 12px;
-  color: $dark-text;
+  padding: 12px 16px;
+  color: $medium-text;
   text-decoration: none;
-  transition: background-color 0.2s ease, color 0.2s ease;
+  transition: all 0.2s ease;
   position: relative;
-  border-radius: 4px;
-  margin: 0 10px;
+  border-radius: $border-radius-pill;
+  margin: 0;
+  font-weight: 500;
+  font-size: 0.95em;
 }
 
 .sidebar-nav a:hover {
   background-color: $hover-bg;
-  color: $primary-blue;
+  color: $dark-text;
 }
 
+// Active State - Pill Style
 .sidebar-nav a.active {
-  background-color: $active-bg;
+  background-color: $active-bg; // Ensure this is a distinct pill color (e.g., light blue)
   color: $primary-blue;
   font-weight: 600;
 }
 
 .sidebar-nav a .icon {
-  margin-right: 15px;
+  margin-right: 16px;
   min-width: 20px;
-  color: $medium-text;
+  text-align: center;
+  color: inherit;
+  font-size: 1.1em;
 }
 
-.sidebar-nav a.active .icon {
-  color: $primary-blue;
+.sidebar.collapsed .sidebar-nav a {
+  justify-content: center;
+  padding: 12px;
 }
 
+.sidebar.collapsed .sidebar-nav a .icon {
+  margin-right: 0;
+}
+
 .sidebar-nav a span {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  flex-grow: 1;
 }
 
 .sidebar.collapsed .sidebar-nav a span {
   display: none;
 }
 
-.sidebar-footer {
-  padding: 8px;
-  border-top: 1px solid $border-color;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.sidebar-footer a {
-  color: $dark-text;
-  text-decoration: none;
-  display: flex;
-  align-items: center;
-  padding: 5px 8px;
-  border-radius: 4px;
-}
-
-.sidebar-footer a:hover {
-  background-color: $hover-bg;
-  color: $primary-blue;
-}
-
-.sidebar-footer a .icon {
-  margin-right: 10px;
-  color: $medium-text;
-}
-
-.sidebar-footer a:hover .icon {
-  color: $primary-blue;
-}
-
-.sidebar-footer a span {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.sidebar.collapsed .sidebar-footer a span {
-  display: none;
-}
-
-.sidebar-footer .toggle-button {
-  background: none;
-  border: none;
-  color: $medium-text;
-  cursor: pointer;
-  font-size: 1.2em;
-  padding: 5px;
-  display: flex;
-  align-items: center;
-}
-
-.sidebar-footer .toggle-button:hover {
-  color: $primary-blue;
-}
-
-.sidebar-footer .toggle-button .fas.fa-angle-double-left.rotated {
-  transform: rotate(180deg);
-}
-
+// Submenu
 .sidebar-nav ul ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  background-color: $white;
+  background-color: transparent;
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease-in-out;
+  padding-left: 0; // Reset
 }
 
 .sidebar-nav ul ul li a {
-  padding-left: 45px;
-  color: $medium-text;
-  background-color: transparent;
-  margin: 0;
+  padding-left: 52px; // Indent children
+  font-size: 0.9em;
 }
 
-.sidebar-nav ul ul li a:hover {
-  background-color: $hover-bg;
-  color: $primary-blue;
+.sidebar.collapsed .sidebar-nav ul ul {
+  display: none; // Hide submenus when collapsed
 }
 
-.sidebar-nav ul ul li a.active {
-  background-color: $active-bg;
-  color: $primary-blue;
-  font-weight: 600;
-}
-
 .sidebar-nav a .fa-chevron-right {
   margin-left: auto;
-  font-size: 0.8em;
-  opacity: 0.7;
+  font-size: 0.75em;
+  opacity: 0.5;
   transition: transform 0.3s ease;
-  color: $medium-text;
 }
 
 .sidebar-nav a.expanded .fa-chevron-right {
   transform: rotate(90deg);
   opacity: 1;
-  color: $primary-blue;
 }
 
-.sidebar.collapsed .sidebar-nav a .fa-chevron-right {
-  display: none;
-}
-
-.sidebar-nav li a.expanded + ul {
+.sidebar-nav li a.expanded+ul {
   max-height: 500px;
 }
 
-.user-dropdown-container {
-  position: relative;
+/* --- Sidebar Footer --- */
+.sidebar-footer {
+  padding: 16px;
+  border-top: 1px solid $border-color;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.toggle-button {
+  background: $hover-bg;
+  border: none;
+  color: $medium-text;
   cursor: pointer;
-  height: 100%;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
   display: flex;
   align-items: center;
-  padding: 0 10px;
-  border-radius: 4px;
-  transition: background-color 0.2s ease;
-  color: $dark-text;
+  justify-content: center;
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: $primary-blue;
+    background-color: $hover-bg;
+    filter: brightness(0.95);
+  }
 }
 
-.user-dropdown-container:hover {
-  background-color: $hover-bg;
+.sidebar.collapsed .sidebar-footer {
+  justify-content: center;
 }
 
+/* --- Dropdown & User Menu --- */
+
+
 .user-dropdown-menu {
   position: absolute;
-  top: calc(100% + 10px);
+  top: 100%; // Start below the container
   right: 0;
-  background-color: $white;
+  z-index: 1000;
+  background-color: var(--surface-bg); // Ensure background is set
+  // Modern shadow & radius
   border: 1px solid $border-color;
-  border-radius: 6px;
-  box-shadow: $shadow-medium;
-  min-width: 200px;
-  z-index: 102;
-  padding: 5px 0;
-  opacity: 0;
-  transform: translateY(-10px) scale(0.98);
-  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
-  pointer-events: none;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); // Slightly stronger shadow
+  padding: 8px;
+  min-width: 220px;
+  display: flex; // Ensure flex column layout
+  flex-direction: column;
+  margin-top: 8px; // Slight gap
 }
 
-.user-dropdown-menu.open {
-  opacity: 1;
-  transform: translateY(0) scale(1);
-  pointer-events: auto;
-}
-
 .user-dropdown-menu a,
 .user-dropdown-menu .logout-button-dropdown {
   display: flex;
   align-items: center;
-  padding: 10px 15px;
+  padding: 10px 12px;
   color: $dark-text;
   text-decoration: none;
-  font-size: 0.8em;
+  font-size: 0.9em;
   white-space: nowrap;
-  transition: background-color 0.2s ease, color 0.2s ease;
+  transition: all 0.2s ease;
   width: 100%;
   box-sizing: border-box;
   border: none;
   background: none;
   text-align: left;
   cursor: pointer;
-}
+  border-radius: 8px; // Rounded items
 
-.user-dropdown-menu a:hover,
-.user-dropdown-menu .logout-button-dropdown:hover {
-  background-color: $hover-bg;
-  color: $primary-blue;
-}
+  &:hover {
+    background-color: $hover-bg;
+    color: $primary-blue;
+    transform: translateX(2px); // Subtle movement
+  }
 
-.user-dropdown-menu a fa-icon,
-.user-dropdown-menu .logout-button-dropdown fa-icon {
-  margin-right: 10px;
-  min-width: 20px;
-  text-align: center;
+  fa-icon {
+    margin-right: 12px;
+    width: 20px;
+    text-align: center;
+    color: $medium-text;
+  }
+
+  &:hover fa-icon {
+    color: $primary-blue;
+  }
 }
 
 .dropdown-divider {
   height: 1px;
   background-color: $border-color;
-  margin: 5px 0;
+  margin: 6px 0;
 }
 
 .user-dropdown-menu .logout-button-dropdown {
-  color: #DC3545;
-}
+  color: $app-red-badge; // Use red for logout
 
-.user-dropdown-menu .logout-button-dropdown:hover {
-  background-color: #C0392B;
-  color: $white;
-}
-
-.left-nav-icon-size {
-  font-size: 1.25em;
-}
-
-.notification-button {
-  position: relative;
-  margin-left: 15px;
-  padding: 0;
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: $medium-text;
-
   &:hover {
-    color: $primary-blue;
+    background-color: #FFF5F5; // Light red bg
+    color: #C0392B;
   }
+
+  fa-icon {
+    color: inherit;
+  }
 }
 
+// Notification layout
 .notification-badge {
   position: absolute;
-  top: 15px;
-  right: -5px;
+  top: 0;
+  right: 0; // Adjusted for circular button
   background-color: $app-red-badge;
   color: $white;
-  border-radius: 50%;
-  padding: 1px 5px;
+  border-radius: 10px;
+  padding: 2px 5px;
   font-size: 0.7em;
-  font-weight: 600;
+  font-weight: 700;
   line-height: 1;
-  min-width: 15px;
+  min-width: 14px;
   text-align: center;
+  box-shadow: 0 0 0 2px var(--surface-bg);
+  pointer-events: none;
 }
 
+/* --- Notification Menu --- */
 .mat-mdc-menu-panel.app-notification-menu-panel {
   max-width: 400px !important;
   width: 400px !important;
   max-height: 80vh !important;
   padding: 0 !important;
-  border-radius: 6px !important;
+  border-radius: 12px !important; // Match new radius
   box-shadow: $shadow-medium !important;
-  margin-top: 5px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  margin-top: 8px;
+  background-color: var(--surface-bg) !important; // Theme aware
+  border: 1px solid var(--border-color);
 }
 
 .app-notification-drawer-content {
   display: flex;
   flex-direction: column;
   height: 100%;
+  color: $dark-text;
 }
 
 .drawer-header {
-  padding: 0 8px;
-  background-color: $white;
-  border-bottom: 1px solid $border-color;
+  padding: 16px;
+  background-color: var(--surface-bg);
+  border-bottom: 1px solid var(--border-color);
   flex-shrink: 0;
   display: flex;
   justify-content: space-between;
@@ -497,84 +459,61 @@
 
   h3 {
     margin: 0;
-    font-size: 1.25em;
+    font-size: 1.1em;
     font-weight: 600;
     color: $dark-text;
-  }
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-
-  .action-button {
-    background: none;
-    border: none;
-    cursor: pointer;
-    color: $medium-text;
-    padding: 6px;
-    border-radius: 4px;
-    transition: background-color 0.2s ease, color 0.2s ease;
-
-    fa-icon {
-      font-size: 1em;
-    }
-
-    &:hover {
-      background-color: $hover-bg;
-      color: $primary-blue;
-    }
   }
 }
 
 .notification-list-scroll {
   overflow-y: auto;
   flex-grow: 1;
-  padding: 10px 16px 0 16px;
-  background-color: $app-light-grey;
+  padding: 0;
+  background-color: var(--app-bg); // Use app background for contrast
 }
 
 .notification-item {
-  background-color: $white;
-  border-radius: 3px;
-  padding: 10px;
-  margin-bottom: 8px;
-  box-shadow: 0 1px 2px rgba(9, 30, 66, 0.1);
-  font-size: 0.9em;
-  border: 1px solid transparent;
+  background-color: var(--surface-bg);
+  padding: 16px;
+  border-bottom: 1px solid var(--border-color);
+  transition: background-color 0.2s;
+  cursor: pointer;
 
   &:hover {
-    border-color: $primary-blue-light;
-    cursor: pointer;
+    background-color: $hover-bg;
   }
+
+  &:last-child {
+    border-bottom: none;
+  }
 }
 
 .notification-meta {
   display: flex;
   align-items: flex-start;
-  margin-bottom: 6px;
+  margin-bottom: 4px;
 }
 
 .user-avatar {
-  width: 26px;
-  height: 26px;
-  border-radius: 4px;
-  background-color: #0052cc;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px; // Soft rounded
+  background-color: $primary-blue;
   color: $white;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.7em;
+  font-size: 0.8em;
   font-weight: 600;
   flex-shrink: 0;
-  margin-right: 8px;
+  margin-right: 12px;
 }
 
 .summary {
   margin: 0;
-  line-height: 1.3;
-  font-size: 0.85em;
+  line-height: 1.4;
+  font-size: 0.9em;
+  color: $dark-text;
 
   b {
     font-weight: 600;
@@ -582,62 +521,72 @@
   }
 
   span {
+    display: block; // Time on new line or distinguishable
     color: $medium-text;
-    font-size: 0.9em;
+    font-size: 0.85em;
+    margin-top: 2px;
   }
 }
 
-.notification-details {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  margin-bottom: 4px;
-  font-size: 0.9em;
+.notification-footer-summary {
+  padding: 12px;
+  text-align: center;
+  background-color: var(--surface-bg);
+  border-top: 1px solid var(--border-color);
 
-  .issue-icon {
-    color: #4C9AFF;
-    font-size: 0.8em;
-  }
-  .n-title {
-    font-weight: 500;
-    color: $app-issue-link;
+  .view-all-link {
+    color: $primary-blue;
+    font-size: 0.9em;
     text-decoration: none;
+    font-weight: 500;
 
     &:hover {
       text-decoration: underline;
     }
   }
-  .n-key {
-    color: $medium-text;
-    font-size: 0.9em;
-  }
 }
 
+// Clean scrollbar for sidebar
+.sidebar::-webkit-scrollbar {
+  width: 4px;
+}
 
-.n-details {
-  background-color: $app-light-grey;
-  border: 1px solid $border-color;
-  border-radius: 3px;
-  padding: 6px;
-  margin-top: 4px;
-  font-size: 0.75em;
-  white-space: pre-wrap;
-  color: $dark-text;
+.sidebar::-webkit-scrollbar-track {
+  background: transparent;
 }
 
-.notification-footer-summary {
-  padding: 12px 0;
-  text-align: center;
+.sidebar::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+}
 
-  .view-all-link {
-    color: $app-issue-link;
-    font-size: 0.85em;
-    text-decoration: none;
-    cursor: pointer;
-    font-weight: 500;
+.sidebar:hover::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+}
 
-    &:hover {
-      text-decoration: underline;
-    }
+/* Dark Theme Adjustments */
+:host-context(.dark-theme) {
+  .navigation-container {
+    // any specific overrides
   }
-}
+
+  .sidebar {
+    box-shadow: 1px 0 0 var(--border-color);
+    background-color: #18191c; // slightly darker sidebar for contrast
+  }
+
+  .top-navbar {
+    background-color: rgba(30, 30, 30, 0.8); // translucent
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  }
+
+  .sidebar-nav a:hover {
+    background-color: rgba(255, 255, 255, 0.05);
+    color: var(--text-primary);
+  }
+
+  .sidebar-nav a.active {
+    background-color: rgba(17, 112, 207, 0.15); // Transparent primary
+    color: #64b5f6;
+  }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/navigation/navigation.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/navigation/navigation.ts	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/navigation/navigation.ts	(working copy)
@@ -1,16 +1,16 @@
-import {Component, HostListener, OnInit, OnDestroy, inject} from '@angular/core';
-import {Auth} from '../../services/auth';
-import {SharedModule} from '../../shared/shared-module';
-import {MenuItem} from '../../models/menu-item';
-import {Observable, Subject, combineLatest} from 'rxjs';
-import {MENU_ITEMS} from '../../constants/menu';
-import {filter, map, takeUntil, startWith} from 'rxjs/operators';
-import {NavigationEnd, Router} from '@angular/router';
-import {Layout} from '../../services/layout';
-import {AsyncPipe} from '@angular/common';
-import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
-import {LatestTasks} from '../common/latest-tasks/latest-tasks';
-import {MatMenu, MatMenuTrigger} from '@angular/material/menu';
+import { Component, HostListener, OnInit, OnDestroy, inject } from '@angular/core';
+import { Auth } from '../../services/auth';
+import { SharedModule } from '../../shared/shared-module';
+import { MenuItem } from '../../models/menu-item';
+import { Observable, Subject, combineLatest } from 'rxjs';
+import { MENU_ITEMS } from '../../constants/menu';
+import { filter, map, takeUntil, startWith } from 'rxjs/operators';
+import { NavigationEnd, Router } from '@angular/router';
+import { Layout } from '../../services/layout';
+import { AsyncPipe } from '@angular/common';
+import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
+import { LatestTasks } from '../common/latest-tasks/latest-tasks';
+import { MatMenu, MatMenuTrigger } from '@angular/material/menu';
 
 @Component({
   selector: 'app-navigation',
@@ -22,6 +22,7 @@
 export class Navigation implements OnInit, OnDestroy {
   isSidebarCollapsed: boolean = false;
   isUserDropdownOpen: boolean = false;
+  isDarkMode: boolean = false;
   menuItems: MenuItem[] = [];
   filteredMenu$: Observable<MenuItem[]> | undefined;
 
@@ -59,6 +60,10 @@
     );
 
     this.filteredMenu$.subscribe();
+
+    this.layoutService.isDarkMode$.pipe(takeUntil(this.destroy$)).subscribe(isDark => {
+      this.isDarkMode = isDark;
+    });
   }
 
   ngOnDestroy(): void {
@@ -108,6 +113,10 @@
     this.router.navigate(['/login']);
   }
 
+  toggleTheme() {
+    this.layoutService.toggleTheme();
+  }
+
   isParentActive(item: MenuItem): boolean {
     if (!item.children) return false;
     const currentUrl = this.router.url;
@@ -120,7 +129,7 @@
       ...item,
       expanded: savedState[item.label] ?? item.expanded ?? false,
       children: item.children
-        ? item.children.map(child => ({...child, expanded: child.expanded ?? false}))
+        ? item.children.map(child => ({ ...child, expanded: child.expanded ?? false }))
         : undefined
     }));
   }
@@ -183,7 +192,7 @@
     };
     this.dialogConfig.disableClose = true;
     const dialogRef = this.dialog.open(LatestTasks, this.dialogConfig);
-    dialogRef.afterClosed().subscribe(task => {})
+    dialogRef.afterClosed().subscribe(task => { })
   }
 
   // ToDo: Update with actual API response.
@@ -210,7 +219,7 @@
     },
   ];
 
-  viewAllNotifications(): void {}
+  viewAllNotifications(): void { }
 
   closeDropdown() {
     setTimeout(() => {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/observability/observability.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/observability/observability.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/observability/observability.scss	(working copy)
@@ -29,18 +29,19 @@
     gap: 8px;
     margin-bottom: 12px; // Reduced from 24px
     padding: 12px 16px;
-    background-color: #f5f7fa;
+    background-color: var(--surface-bg);
     border-radius: 4px;
-    border-left: 4px solid #1976d2;
+    border-left: 4px solid var(--primary-color);
+    border: 1px solid var(--border-color);
 
     span {
         font-weight: 500;
-        color: #555;
+        color: var(--text-primary);
     }
 }
 
 .table-container {
-    border: 1px solid #e0e0e0;
+    border: 1px solid var(--border-color);
     border-radius: 4px;
 
     table.an-table {
@@ -48,23 +49,23 @@
 
         th.mat-header-cell {
             font-weight: 600;
-            color: #444;
-            background-color: #f9fafb;
+            color: var(--table-header-text);
+            background-color: var(--table-header-bg);
             padding: 10px 12px; // Reduced from 16px
             font-size: 14px;
-            border-bottom: 1px solid #e0e0e0;
+            border-bottom: 1px solid var(--border-color);
         }
 
         td.mat-cell {
             padding: 10px 12px; // Reduced from 16px
-            color: #333;
+            color: var(--text-primary);
             font-size: 14px;
-            border-bottom: 1px solid #f0f0f0;
+            border-bottom: 1px solid var(--border-color);
         }
 
         tr.mat-row {
             &:hover {
-                background-color: #f5f7fa;
+                background-color: var(--table-hover);
             }
 
             &:last-child td {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/storage/storage.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/storage/storage.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/storage/storage.scss	(working copy)
@@ -75,4 +75,43 @@
     box-shadow: none;
     padding: 16px 0 0 0; // Keep top padding if needed, or just 0 if grid gap handles it. Let's say 16px top to separate from tabs.
     min-height: 400px;
+}
+
+/* Dark Theme Overrides */
+:host-context(.dark-theme) {
+    .storage-container {
+        background-color: var(--surface-bg);
+
+        ::ng-deep .storage-tabs {
+            .mat-mdc-tab-header {
+                border-bottom: 1px solid var(--border-color);
+            }
+
+            .mat-mdc-tab {
+                &:hover {
+                    background-color: var(--hover-bg);
+                }
+
+                &.mdc-tab--active {
+
+                    .tab-icon,
+                    .tab-text {
+                        color: #64b5f6 !important;
+                    }
+                }
+            }
+
+            .mdc-tab-indicator__content--underline {
+                border-color: #64b5f6 !important;
+            }
+        }
+    }
+
+    .custom-tab-label {
+
+        .tab-icon,
+        .tab-text {
+            color: var(--text-secondary);
+        }
+    }
 }
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-log/alert-log.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-log/alert-log.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-log/alert-log.scss	(working copy)
@@ -3,22 +3,26 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    background-color: #f5f7fa;
+    padding: 24px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--app-bg);
     box-sizing: border-box;
 
     .time-range-selector {
-        background-color: #e0e0e0;
+        background-color: var(--surface-bg);
         padding: 5px 20px;
         display: flex;
         align-items: center;
         gap: 5px;
-        border-bottom: 1px solid #ccc;
+        border-bottom: 1px solid var(--border-color);
         margin-bottom: 20px;
         border-radius: 4px;
 
         button {
-            background-color: #d0d0d0;
-            color: #333;
+            background-color: var(--app-bg);
+            color: var(--text-primary);
             font-size: 12px;
             height: 24px;
             line-height: 24px;
@@ -34,11 +38,11 @@
 
         .custom-range {
             margin-left: 10px;
-            background-color: #fff;
+            background-color: var(--surface-bg);
             padding: 2px 8px;
             font-size: 12px;
             border-radius: 2px;
-            border: 1px solid #ccc;
+            border: 1px solid var(--border-color);
         }
     }
 
@@ -59,7 +63,7 @@
         }
 
         .summary-card {
-            background-color: #fff;
+            background-color: var(--surface-bg);
             border-radius: 12px;
             box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
             border: none;
@@ -81,7 +85,7 @@
 
         .metric-label {
             font-size: 1rem;
-            color: #777;
+            color: var(--text-secondary);
             margin-bottom: 8px;
             text-transform: uppercase;
             font-weight: 500;
@@ -90,7 +94,7 @@
         .metric-value {
             font-size: 2.5rem;
             font-weight: 600;
-            color: #333;
+            color: var(--text-primary);
         }
 
         .status-alerting {
@@ -126,7 +130,7 @@
         mat-card-title {
             font-size: 1.1rem;
             font-weight: 600;
-            color: #333;
+            color: var(--text-primary);
         }
 
         /* Existing Filters and Table Styles */
@@ -135,7 +139,7 @@
             justify-content: space-between;
             align-items: flex-end;
             margin-bottom: 15px;
-            background-color: #fff;
+            background-color: var(--surface-bg);
             padding: 15px 20px;
             border-radius: 4px;
             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
@@ -146,7 +150,7 @@
 
                 label {
                     font-size: 12px;
-                    color: #666;
+                    color: var(--text-secondary);
                     margin-bottom: 5px;
                     font-weight: 500;
                 }
@@ -158,10 +162,12 @@
                     input {
                         width: 100%;
                         padding: 8px 12px;
-                        border: 1px solid #ddd;
+                        border: 1px solid var(--border-color);
                         border-radius: 4px;
                         font-size: 13px;
                         outline: none;
+                        background-color: transparent;
+                        color: var(--text-primary);
 
                         &:focus {
                             border-color: #3f51b5;
@@ -181,7 +187,7 @@
         }
 
         .table-container {
-            background-color: #fff;
+            background-color: var(--surface-bg);
             border-radius: 4px;
             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
             overflow: hidden;
@@ -190,19 +196,19 @@
                 width: 100%;
 
                 th.mat-header-cell {
-                    background-color: #fff;
-                    color: #666;
+                    background-color: var(--table-header-bg);
+                    color: var(--table-header-text);
                     font-size: 12px;
                     font-weight: 600;
-                    border-bottom: 1px solid #eee;
+                    border-bottom: 1px solid var(--border-color);
                     padding: 15px 20px;
                 }
 
                 td.mat-cell {
                     padding: 12px 20px;
                     font-size: 13px;
-                    color: #444;
-                    border-bottom: 1px solid #f5f5f5;
+                    color: var(--text-primary);
+                    border-bottom: 1px solid var(--border-color);
 
                     .rule-link,
                     .action-link {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-thresholds/alert-thresholds.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-thresholds/alert-thresholds.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-thresholds/alert-thresholds.scss	(working copy)
@@ -1,6 +1,6 @@
 .alert-thresholds-container {
     padding: 20px;
-    background-color: #f0f2f5;
+    background-color: var(--app-bg);
     min-height: calc(100vh - 64px); // Adjust based on header height
 
     .toolbar {
@@ -10,7 +10,7 @@
         justify-content: flex-end;
 
         button {
-            color: #333;
+            color: var(--text-primary);
         }
     }
 
@@ -19,7 +19,7 @@
         justify-content: space-between;
         align-items: flex-end;
         margin-bottom: 15px;
-        background-color: #fff;
+        background-color: var(--surface-bg);
         padding: 15px 20px;
         border-radius: 4px;
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
@@ -30,7 +30,7 @@
 
             label {
                 font-size: 12px;
-                color: #666;
+                color: var(--text-secondary);
                 margin-bottom: 5px;
                 font-weight: 500;
 
@@ -117,10 +117,12 @@
                 input {
                     width: 100%;
                     padding: 8px 12px;
-                    border: 1px solid #ddd;
+                    border: 1px solid var(--border-color);
                     border-radius: 4px;
                     font-size: 13px;
                     outline: none;
+                    background-color: transparent;
+                    color: var(--text-primary);
 
                     &:focus {
                         border-color: #3f51b5;
@@ -140,7 +142,7 @@
     }
 
     .table-container {
-        background-color: #fff;
+        background-color: var(--surface-bg);
         border-radius: 4px;
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
         overflow: hidden;
@@ -149,11 +151,11 @@
             width: 100%;
 
             th.mat-header-cell {
-                background-color: #fff;
-                color: #666;
+                background-color: var(--table-header-bg);
+                color: var(--table-header-text);
                 font-size: 12px;
                 font-weight: 600;
-                border-bottom: 1px solid #eee;
+                border-bottom: 1px solid var(--border-color);
                 padding: 15px 20px;
 
                 .info-icon {
@@ -166,8 +168,8 @@
             td.mat-cell {
                 padding: 12px 20px;
                 font-size: 13px;
-                color: #444;
-                border-bottom: 1px solid #f5f5f5;
+                color: var(--text-primary);
+                border-bottom: 1px solid var(--border-color);
 
                 &.mat-column-action {
                     white-space: nowrap;
@@ -179,7 +181,7 @@
 
                         fa-icon {
                             font-size: 14px;
-                            color: #555;
+                            color: var(--text-secondary);
                         }
 
                         &:hover fa-icon {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-device-insights/dashboard-device-insights.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-device-insights/dashboard-device-insights.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-device-insights/dashboard-device-insights.scss	(working copy)
@@ -5,7 +5,7 @@
     padding: 8px; // Reduced from 12px
     height: 100%;
     overflow-y: auto;
-    background-color: #f4f6f8;
+    background-color: var(--app-bg);
     box-sizing: border-box;
     font-family: 'Inter', 'Roboto', sans-serif;
 
@@ -42,19 +42,19 @@
 
         .empty-icon {
             font-size: 48px;
-            color: #ccc;
+            color: var(--text-secondary);
             margin-bottom: 10px;
         }
 
         h3 {
             margin: 0;
-            color: #333;
+            color: var(--text-primary);
             font-weight: 500;
         }
 
         p {
             margin: 0;
-            color: #666;
+            color: var(--text-secondary);
         }
     }
 }
\ 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.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.html	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.html	(working copy)
@@ -10,7 +10,7 @@
         <span class="subtitle">Top 5</span>
       </div>
       <div class="chart-content">
-        <div echarts [options]="vSHitsChartOption" class="echart-container"></div>
+        <div echarts [autoResize]="true" [options]="vSHitsChartOption" class="echart-container"></div>
       </div>
     </mat-card>
 
@@ -20,7 +20,7 @@
         <span class="subtitle">Top 5</span>
       </div>
       <div class="chart-content">
-        <div echarts [options]="vSConnectionsChartOption" class="echart-container"></div>
+        <div echarts [autoResize]="true" [options]="vSConnectionsChartOption" class="echart-container"></div>
       </div>
     </mat-card>
 
@@ -30,7 +30,7 @@
         <span class="subtitle">Top 5</span>
       </div>
       <div class="chart-content">
-        <div echarts [options]="vSThroughputChartOption" class="echart-container"></div>
+        <div echarts [autoResize]="true" [options]="vSThroughputChartOption" class="echart-container"></div>
       </div>
     </mat-card>
   </div>
@@ -48,7 +48,7 @@
         <span class="subtitle">Top 5</span>
       </div>
       <div class="chart-content">
-        <div echarts [options]="rSHitsChartOption" class="echart-container"></div>
+        <div echarts [autoResize]="true" [options]="rSHitsChartOption" class="echart-container"></div>
       </div>
     </mat-card>
 
@@ -58,7 +58,7 @@
         <span class="subtitle">Top 5</span>
       </div>
       <div class="chart-content">
-        <div echarts [options]="rSConnectionsChartOption" class="echart-container"></div>
+        <div echarts [autoResize]="true" [options]="rSConnectionsChartOption" class="echart-container"></div>
       </div>
     </mat-card>
 
@@ -68,7 +68,7 @@
         <span class="subtitle">Top 5</span>
       </div>
       <div class="chart-content">
-        <div echarts [options]="rSThroughputChartOption" class="echart-container"></div>
+        <div echarts [autoResize]="true" [options]="rSThroughputChartOption" class="echart-container"></div>
       </div>
     </mat-card>
   </div>
@@ -86,7 +86,7 @@
         <span class="subtitle">Top 5</span>
       </div>
       <div class="chart-content">
-        <div echarts [options]="lLBHitsChartOption" class="echart-container"></div>
+        <div echarts [autoResize]="true" [options]="lLBHitsChartOption" class="echart-container"></div>
       </div>
     </mat-card>
 
@@ -96,7 +96,7 @@
         <span class="subtitle">Top 5</span>
       </div>
       <div class="chart-content">
-        <div echarts [options]="lLBConnectionsChartOption" class="echart-container"></div>
+        <div echarts [autoResize]="true" [options]="lLBConnectionsChartOption" class="echart-container"></div>
       </div>
     </mat-card>
 
@@ -106,7 +106,7 @@
         <span class="subtitle">Top 5</span>
       </div>
       <div class="chart-content">
-        <div echarts [options]="lLBThroughputChartOption" class="echart-container"></div>
+        <div echarts [autoResize]="true" [options]="lLBThroughputChartOption" class="echart-container"></div>
       </div>
     </mat-card>
   </div>
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 2830)
+++ /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)
@@ -7,7 +7,7 @@
     .section-title {
       font-size: 16px;
       font-weight: 600;
-      color: #1a1a1a;
+      color: var(--text-primary);
       margin: 0;
       font-family: 'Inter', 'Roboto', sans-serif;
     }
@@ -21,9 +21,10 @@
 }
 
 .dashboard-card {
-  background: white;
+  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
   display: flex;
@@ -46,15 +47,15 @@
     h3 {
       font-size: 16px;
       font-weight: 600;
-      color: #2d3748;
+      color: var(--text-primary);
       margin: 0;
     }
 
     .subtitle {
       font-size: 12px;
-      color: #718096;
+      color: var(--text-secondary);
       font-weight: 500;
-      background: #edf2f7;
+      background: var(--border-color);
       padding: 2px 8px;
       border-radius: 12px;
     }
@@ -63,7 +64,9 @@
   .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
 
     .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 2831)
+++ /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)
@@ -9,6 +9,7 @@
 import { UtilsService } from '../../../services/utils-service';
 import { interval } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Layout } from '../../../services/layout';
 
 @Component({
   selector: 'app-dashboard-insights-apv',
@@ -45,16 +46,83 @@
     private _system: SystemService,
     private _device: DeviceService,
     private _chartOptions: ChartOptions,
-    private _utils: UtilsService
+    private _utils: UtilsService,
+    private layoutService: Layout
   ) {
   }
 
   ngOnInit(): void {
     setTimeout(() => {
       this.getDeviceGroups();
+      this.layoutService.isDarkMode$.subscribe(isDark => {
+        this.updateChartTheme(isDark);
+      });
     })
   }
 
+  getThemeColors(isDark: boolean) {
+    return {
+      textMain: isDark ? '#fff' : '#333',
+      textMuted: isDark ? '#b0b0b0' : '#777',
+      gridColor: isDark ? '#444' : '#e0e0e0',
+      tooltipBg: isDark ? '#424242' : '#fff',
+      tooltipBorder: isDark ? '#616161' : '#ccc',
+      splitLine: isDark ? '#505050' : '#e0e0e0',
+    };
+  }
+
+  updateChartTheme(isDark: boolean) {
+    [
+      this.vSHitsChartOption, this.vSConnectionsChartOption, this.vSThroughputChartOption,
+      this.rSHitsChartOption, this.rSConnectionsChartOption, this.rSThroughputChartOption,
+      this.lLBHitsChartOption, this.lLBConnectionsChartOption, this.lLBThroughputChartOption
+    ].forEach(opt => this.applyThemeToOption(opt, isDark));
+  }
+
+  applyThemeToOption(option: any, isDark: boolean) {
+    if (!option) return;
+    const colors = this.getThemeColors(isDark);
+
+    option.backgroundColor = 'transparent';
+
+    if (option.tooltip) {
+      option.tooltip.backgroundColor = colors.tooltipBg;
+      option.tooltip.borderColor = colors.tooltipBorder;
+      if (!option.tooltip.textStyle) option.tooltip.textStyle = {};
+      option.tooltip.textStyle.color = colors.textMain;
+    }
+
+    if (option.legend) {
+      if (!option.legend.textStyle) option.legend.textStyle = {};
+      option.legend.textStyle.color = colors.textMain;
+    }
+
+    const applyAxisTheme = (axis: any) => {
+      if (!axis) return;
+      if (Array.isArray(axis)) {
+        axis.forEach(a => applyAxisTheme(a));
+        return;
+      }
+      if (!axis.axisLabel) axis.axisLabel = {};
+      axis.axisLabel.color = colors.textMuted;
+
+      if (!axis.splitLine) axis.splitLine = {};
+      if (!axis.splitLine.lineStyle) axis.splitLine.lineStyle = {};
+      axis.splitLine.lineStyle.color = colors.splitLine;
+
+      if (axis.nameTextStyle) axis.nameTextStyle.color = colors.textMuted;
+    };
+
+    if (option.xAxis) applyAxisTheme(option.xAxis);
+    if (option.yAxis) applyAxisTheme(option.yAxis);
+
+    if (option.series) {
+      option.series.forEach((s: any) => {
+        if (s.label) s.label.color = colors.textMain;
+      });
+    }
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['cpuUsagePercentage']) {
     }
@@ -200,11 +268,19 @@
   }
 
   getHorizontalBarChartOptions(label: string, metrics: any[], color: string): EChartsOption {
+    const isDark = document.body.classList.contains('dark-theme');
+    const colors = this.getThemeColors(isDark);
+
     return {
       tooltip: {
         trigger: 'axis',
         axisPointer: {
           type: 'shadow'
+        },
+        backgroundColor: colors.tooltipBg,
+        borderColor: colors.tooltipBorder,
+        textStyle: {
+          color: colors.textMain
         }
       },
       grid: {
@@ -217,7 +293,11 @@
         type: 'value',
         boundaryGap: [0, 0.01],
         axisLabel: {
-          formatter: '{value}'
+          formatter: '{value}',
+          color: colors.textMuted
+        },
+        splitLine: {
+          lineStyle: { color: colors.splitLine }
         }
       },
       yAxis: {
@@ -226,7 +306,8 @@
         inverse: true,
         axisLabel: {
           width: 80,
-          overflow: 'truncate'
+          overflow: 'truncate',
+          color: colors.textMuted
         }
       },
       series: [
@@ -241,7 +322,8 @@
           label: {
             show: true,
             position: 'right',
-            formatter: '{c}'
+            formatter: '{c}',
+            color: colors.textMain
           },
           barWidth: '60%'
         }
@@ -250,12 +332,20 @@
   }
 
   getHorizontalThroughputChartOptions(data: any[]): EChartsOption {
+    const isDark = document.body.classList.contains('dark-theme');
+    const colors = this.getThemeColors(isDark);
+
     return {
       tooltip: {
         trigger: 'axis',
         axisPointer: {
           type: 'shadow'
         },
+        backgroundColor: colors.tooltipBg,
+        borderColor: colors.tooltipBorder,
+        textStyle: {
+          color: colors.textMain
+        },
         formatter: (params: any) => {
           let tooltipContent = `${params[0].name}<br/>`;
           params.forEach((param: any) => {
@@ -267,7 +357,8 @@
       },
       legend: {
         data: ['Inbound', 'Outbound'],
-        bottom: 0
+        bottom: 0,
+        textStyle: { color: colors.textMain }
       },
       grid: {
         left: '3%',
@@ -280,7 +371,10 @@
         boundaryGap: [0, 0.01],
         name: 'Mbps',
         nameLocation: 'end',
-        nameGap: 20
+        nameGap: 20,
+        axisLabel: { color: colors.textMuted },
+        splitLine: { lineStyle: { color: colors.splitLine } },
+        nameTextStyle: { color: colors.textMuted }
       },
       yAxis: {
         type: 'category',
@@ -288,7 +382,8 @@
         inverse: true,
         axisLabel: {
           width: 80,
-          overflow: 'truncate'
+          overflow: 'truncate',
+          color: colors.textMuted
         }
       },
       series: [
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-avx/dashboard-insights-avx.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-avx/dashboard-insights-avx.html	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-avx/dashboard-insights-avx.html	(working copy)
@@ -9,7 +9,7 @@
         <span class="subtitle">Top 5</span>
       </div>
       <div class="chart-content">
-        <div echarts [options]="cpuChartOption" class="echart-container"></div>
+        <div echarts [autoResize]="true" [options]="cpuChartOption" class="echart-container"></div>
       </div>
     </mat-card>
 
@@ -19,7 +19,7 @@
         <span class="subtitle">Top 5</span>
       </div>
       <div class="chart-content">
-        <div echarts [options]="memoryChartOption" class="echart-container"></div>
+        <div echarts [autoResize]="true" [options]="memoryChartOption" class="echart-container"></div>
       </div>
     </mat-card>
 
@@ -29,7 +29,7 @@
         <span class="subtitle">Top 5</span>
       </div>
       <div class="chart-content">
-        <div echarts [options]="diskChartOption" class="echart-container"></div>
+        <div echarts [autoResize]="true" [options]="diskChartOption" class="echart-container"></div>
       </div>
     </mat-card>
 
@@ -40,7 +40,7 @@
           deviceStats?.total?.disconnected }}</span>
       </div>
       <div class="chart-content">
-        <div echarts [options]="connectionChartOption" class="echart-container"></div>
+        <div echarts [autoResize]="true" [options]="connectionChartOption" class="echart-container"></div>
       </div>
     </mat-card>
   </div>
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 2830)
+++ /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)
@@ -7,7 +7,7 @@
     .section-title {
       font-size: 16px;
       font-weight: 600;
-      color: #1a1a1a;
+      color: var(--text-primary);
       margin: 0;
       font-family: 'Inter', 'Roboto', sans-serif;
     }
@@ -21,9 +21,10 @@
 }
 
 .dashboard-card {
-  background: white;
+  background: var(--surface-bg);
   border-radius: 12px;
   border: none;
+  min-width: 0;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
   padding: 12px;
   display: flex;
@@ -45,15 +46,15 @@
     h3 {
       font-size: 16px;
       font-weight: 600;
-      color: #2d3748;
+      color: var(--text-primary);
       margin: 0;
     }
 
     .subtitle {
       font-size: 12px;
-      color: #718096;
+      color: var(--text-secondary);
       font-weight: 500;
-      background: #edf2f7;
+      background: var(--border-color);
       padding: 2px 8px;
       border-radius: 12px;
     }
@@ -62,7 +63,9 @@
   .chart-content {
     flex: 1;
     width: 100%;
+    min-width: 0;
     min-height: 0;
+    overflow: hidden;
 
     .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 2831)
+++ /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)
@@ -6,6 +6,7 @@
 import { startWith, take, tap } from 'rxjs/operators';
 import { UtilsService } from '../../../services/utils-service';
 import { ChartOptions } from '../../../services/chart-options';
+import { Layout } from '../../../services/layout';
 import { interval } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
@@ -35,7 +36,8 @@
     private _avx: AvxService,
     private _notification: NotificationService,
     private _utils: UtilsService,
-    private _chartOptions: ChartOptions
+    private _chartOptions: ChartOptions,
+    private layoutService: Layout
   ) {
   }
 
@@ -50,9 +52,94 @@
           takeUntilDestroyed(this.destroyRef)
         )
         .subscribe();
+
+      this.layoutService.isDarkMode$.subscribe(isDark => {
+        this.updateChartTheme(isDark);
+      });
     })
   }
 
+  getThemeColors(isDark: boolean) {
+    return {
+      textMain: isDark ? '#fff' : '#333',
+      textMuted: isDark ? '#b0b0b0' : '#777', // Lighter grey for dark mode
+      gridColor: isDark ? '#444' : '#e0e0e0', // Darker grid for dark mode
+      tooltipBg: isDark ? '#424242' : '#fff',
+      tooltipBorder: isDark ? '#616161' : '#ccc',
+      splitLine: isDark ? '#505050' : '#e0e0e0',
+      accent: '#3f51b5', // Example accent
+      teal: '#00c698',
+      orange: '#ff9800'
+    };
+  }
+
+  updateChartTheme(isDark: boolean) {
+    [
+      this.connectionChartOption,
+      this.cpuChartOption,
+      this.memoryChartOption,
+      this.diskChartOption
+    ].forEach(opt => this.applyThemeToOption(opt, isDark));
+  }
+
+  applyThemeToOption(option: any, isDark: boolean) {
+    if (!option) return;
+    const colors = this.getThemeColors(isDark);
+
+    // Common Background
+    option.backgroundColor = 'transparent';
+
+    // Tooltips
+    if (option.tooltip) {
+      option.tooltip.backgroundColor = colors.tooltipBg;
+      option.tooltip.borderColor = colors.tooltipBorder;
+      if (!option.tooltip.textStyle) option.tooltip.textStyle = {};
+      option.tooltip.textStyle.color = colors.textMain;
+    }
+
+    // Legend
+    if (option.legend) {
+      if (!option.legend.textStyle) option.legend.textStyle = {};
+      option.legend.textStyle.color = colors.textMain;
+    }
+
+    // Axes
+    const applyAxisTheme = (axis: any) => {
+      if (!axis) return;
+      if (Array.isArray(axis)) {
+        axis.forEach(a => applyAxisTheme(a));
+        return;
+      }
+      if (!axis.axisLabel) axis.axisLabel = {};
+      axis.axisLabel.color = colors.textMuted;
+
+      if (!axis.splitLine) axis.splitLine = {};
+      if (!axis.splitLine.lineStyle) axis.splitLine.lineStyle = {};
+      axis.splitLine.lineStyle.color = colors.splitLine;
+
+      if (axis.nameTextStyle) axis.nameTextStyle.color = colors.textMuted;
+    };
+
+    if (option.xAxis) applyAxisTheme(option.xAxis);
+    if (option.yAxis) applyAxisTheme(option.yAxis);
+
+    // Series Label
+    if (option.series) {
+      option.series.forEach((s: any) => {
+        if (s.label) s.label.color = colors.textMain;
+      });
+    }
+
+    // Title (if any)
+    if (option.title) {
+      if (Array.isArray(option.title)) {
+        option.title.forEach((t: any) => { if (t.textStyle) t.textStyle.color = colors.textMain; });
+      } else if (option.title.textStyle) {
+        option.title.textStyle.color = colors.textMain;
+      }
+    }
+  }
+
   avxDevices: any = [];
   deviceStats: any = [];
   deviceConnectionStats: any = [];
@@ -120,11 +207,19 @@
   }
 
   getHorizontalBarChartOptions(label: string, metrics: DeviceMetric[], color: string): EChartsOption {
+    const isDark = document.body.classList.contains('dark-theme');
+    const colors = this.getThemeColors(isDark);
+
     return {
       tooltip: {
         trigger: 'axis',
         axisPointer: {
           type: 'shadow'
+        },
+        backgroundColor: colors.tooltipBg,
+        borderColor: colors.tooltipBorder,
+        textStyle: {
+          color: colors.textMain
         }
       },
       grid: {
@@ -138,7 +233,11 @@
         boundaryGap: [0, 0.01],
         max: 100,
         axisLabel: {
-          formatter: '{value}%'
+          formatter: '{value}%',
+          color: colors.textMuted
+        },
+        splitLine: {
+          lineStyle: { color: colors.splitLine }
         }
       },
       yAxis: {
@@ -147,7 +246,8 @@
         inverse: true, // Show top value at the top
         axisLabel: {
           width: 80,
-          overflow: 'truncate'
+          overflow: 'truncate',
+          color: colors.textMuted
         }
       },
       series: [
@@ -162,7 +262,8 @@
           label: {
             show: true,
             position: 'right',
-            formatter: '{c}%'
+            formatter: '{c}%',
+            color: colors.textMain
           },
           barWidth: '60%'
         }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-devices/dashboard-insights-devices.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-devices/dashboard-insights-devices.html	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-devices/dashboard-insights-devices.html	(working copy)
@@ -7,7 +7,7 @@
         </mat-card-title>
       </div>
       <div class="chart-flex-container">
-        <div echarts [options]="devicesCPUChartOption1" class="chart-container"></div>
+        <div echarts [autoResize]="true" [options]="devicesCPUChartOption1" class="chart-container"></div>
       </div>
     </mat-card-content>
   </mat-card>
@@ -20,7 +20,7 @@
         </mat-card-title>
       </div>
       <div class="chart-flex-container">
-        <div echarts [options]="devicesMemoryChartOption1" class="chart-container"></div>
+        <div echarts [autoResize]="true" [options]="devicesMemoryChartOption1" class="chart-container"></div>
       </div>
     </mat-card-content>
   </mat-card>
@@ -33,7 +33,7 @@
         </mat-card-title>
       </div>
       <div class="chart-flex-container">
-        <div echarts [options]="devicesThroughputChartOption1" class="chart-container"></div>
+        <div echarts [autoResize]="true" [options]="devicesThroughputChartOption1" class="chart-container"></div>
       </div>
     </mat-card-content>
   </mat-card>
@@ -47,7 +47,7 @@
         </mat-card-title>
       </div>
       <div class="chart-flex-container">
-        <div echarts [options]="connectionChartOption1" class="chart-container"></div>
+        <div echarts [autoResize]="true" [options]="connectionChartOption1" class="chart-container"></div>
       </div>
     </mat-card-content>
   </mat-card>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-devices/dashboard-insights-devices.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-devices/dashboard-insights-devices.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-devices/dashboard-insights-devices.scss	(working copy)
@@ -17,6 +17,8 @@
   border: none;
   display: flex;
   flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .card-content-wrapper {
@@ -102,6 +104,8 @@
   flex-grow: 1;
   min-height: 250px;
   /* Ensure chart has height */
+  overflow: hidden;
+  min-width: 0;
 }
 
 .chart-container {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.html	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.html	(working copy)
@@ -9,7 +9,7 @@
         <span class="subtitle">Top 5</span>
       </div>
       <div class="chart-content">
-        <div echarts [options]="activeSessionsChartOption" class="echart-container"></div>
+        <div echarts [autoResize]="true" [options]="activeSessionsChartOption" class="echart-container"></div>
       </div>
     </mat-card>
 
@@ -19,7 +19,7 @@
         <span class="subtitle">Top 5</span>
       </div>
       <div class="chart-content">
-        <div echarts [options]="clientThroughputChartOption" class="echart-container"></div>
+        <div echarts [autoResize]="true" [options]="clientThroughputChartOption" class="echart-container"></div>
       </div>
     </mat-card>
 
@@ -29,7 +29,7 @@
         <span class="subtitle">Top 5</span>
       </div>
       <div class="chart-content">
-        <div echarts [options]="serverThroughputChartOption" class="echart-container"></div>
+        <div echarts [autoResize]="true" [options]="serverThroughputChartOption" class="echart-container"></div>
       </div>
     </mat-card>
   </div>
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 2830)
+++ /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)
@@ -7,7 +7,7 @@
     .section-title {
       font-size: 16px;
       font-weight: 600;
-      color: #1a1a1a;
+      color: var(--text-primary);
       margin: 0;
       font-family: 'Inter', 'Roboto', sans-serif;
     }
@@ -21,9 +21,10 @@
 }
 
 .dashboard-card {
-  background: white;
+  background: var(--surface-bg);
   border-radius: 12px;
   border: none;
+  min-width: 0;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
   padding: 12px;
   display: flex;
@@ -45,15 +46,15 @@
     h3 {
       font-size: 16px;
       font-weight: 600;
-      color: #2d3748;
+      color: var(--text-primary);
       margin: 0;
     }
 
     .subtitle {
       font-size: 12px;
-      color: #718096;
+      color: var(--text-secondary);
       font-weight: 500;
-      background: #edf2f7;
+      background: var(--border-color);
       padding: 2px 8px;
       border-radius: 12px;
     }
@@ -62,7 +63,9 @@
   .chart-content {
     flex: 1;
     width: 100%;
+    min-width: 0;
     min-height: 0;
+    overflow: hidden;
 
     .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 2831)
+++ /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)
@@ -9,6 +9,7 @@
 import { UtilsService } from '../../../services/utils-service';
 import { interval } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Layout } from '../../../services/layout';
 
 @Component({
   selector: 'app-dashboard-insights-sslvpn',
@@ -33,16 +34,83 @@
     private _system: SystemService,
     private _device: DeviceService,
     private _chartOptions: ChartOptions,
-    private _utils: UtilsService
+    private _utils: UtilsService,
+    private layoutService: Layout
   ) {
   }
 
   ngOnInit(): void {
     setTimeout(() => {
       this.getDeviceGroups();
+      this.layoutService.isDarkMode$.subscribe(isDark => {
+        this.updateChartTheme(isDark);
+      });
     })
   }
 
+  getThemeColors(isDark: boolean) {
+    return {
+      textMain: isDark ? '#fff' : '#333',
+      textMuted: isDark ? '#b0b0b0' : '#777',
+      gridColor: isDark ? '#444' : '#e0e0e0',
+      tooltipBg: isDark ? '#424242' : '#fff',
+      tooltipBorder: isDark ? '#616161' : '#ccc',
+      splitLine: isDark ? '#505050' : '#e0e0e0',
+    };
+  }
+
+  updateChartTheme(isDark: boolean) {
+    [
+      this.activeSessionsChartOption,
+      this.clientThroughputChartOption,
+      this.serverThroughputChartOption
+    ].forEach(opt => this.applyThemeToOption(opt, isDark));
+  }
+
+  applyThemeToOption(option: any, isDark: boolean) {
+    if (!option) return;
+    const colors = this.getThemeColors(isDark);
+
+    option.backgroundColor = 'transparent';
+
+    if (option.tooltip) {
+      option.tooltip.backgroundColor = colors.tooltipBg;
+      option.tooltip.borderColor = colors.tooltipBorder;
+      if (!option.tooltip.textStyle) option.tooltip.textStyle = {};
+      option.tooltip.textStyle.color = colors.textMain;
+    }
+
+    if (option.legend) {
+      if (!option.legend.textStyle) option.legend.textStyle = {};
+      option.legend.textStyle.color = colors.textMain;
+    }
+
+    const applyAxisTheme = (axis: any) => {
+      if (!axis) return;
+      if (Array.isArray(axis)) {
+        axis.forEach(a => applyAxisTheme(a));
+        return;
+      }
+      if (!axis.axisLabel) axis.axisLabel = {};
+      axis.axisLabel.color = colors.textMuted;
+
+      if (!axis.splitLine) axis.splitLine = {};
+      if (!axis.splitLine.lineStyle) axis.splitLine.lineStyle = {};
+      axis.splitLine.lineStyle.color = colors.splitLine;
+
+      if (axis.nameTextStyle) axis.nameTextStyle.color = colors.textMuted;
+    };
+
+    if (option.xAxis) applyAxisTheme(option.xAxis);
+    if (option.yAxis) applyAxisTheme(option.yAxis);
+
+    if (option.series) {
+      option.series.forEach((s: any) => {
+        if (s.label) s.label.color = colors.textMain;
+      });
+    }
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['cpuUsagePercentage']) {
     }
@@ -138,11 +206,19 @@
   }
 
   getHorizontalBarChartOptions(label: string, metrics: any[], color: string): EChartsOption {
+    const isDark = document.body.classList.contains('dark-theme');
+    const colors = this.getThemeColors(isDark);
+
     return {
       tooltip: {
         trigger: 'axis',
         axisPointer: {
           type: 'shadow'
+        },
+        backgroundColor: colors.tooltipBg,
+        borderColor: colors.tooltipBorder,
+        textStyle: {
+          color: colors.textMain
         }
       },
       grid: {
@@ -155,7 +231,11 @@
         type: 'value',
         boundaryGap: [0, 0.01],
         axisLabel: {
-          formatter: '{value}'
+          formatter: '{value}',
+          color: colors.textMuted
+        },
+        splitLine: {
+          lineStyle: { color: colors.splitLine }
         }
       },
       yAxis: {
@@ -164,7 +244,8 @@
         inverse: true,
         axisLabel: {
           width: 80,
-          overflow: 'truncate'
+          overflow: 'truncate',
+          color: colors.textMuted
         }
       },
       series: [
@@ -179,7 +260,8 @@
           label: {
             show: true,
             position: 'right',
-            formatter: '{c}'
+            formatter: '{c}',
+            color: colors.textMain
           },
           barWidth: '60%'
         }
@@ -188,12 +270,20 @@
   }
 
   getHorizontalThroughputChartOptions(data: any[]): EChartsOption {
+    const isDark = document.body.classList.contains('dark-theme');
+    const colors = this.getThemeColors(isDark);
+
     return {
       tooltip: {
         trigger: 'axis',
         axisPointer: {
           type: 'shadow'
         },
+        backgroundColor: colors.tooltipBg,
+        borderColor: colors.tooltipBorder,
+        textStyle: {
+          color: colors.textMain
+        },
         formatter: (params: any) => {
           let tooltipContent = `${params[0].name}<br/>`;
           params.forEach((param: any) => {
@@ -205,7 +295,8 @@
       },
       legend: {
         data: ['Inbound', 'Outbound'],
-        bottom: 0
+        bottom: 0,
+        textStyle: { color: colors.textMain }
       },
       grid: {
         left: '3%',
@@ -218,7 +309,10 @@
         boundaryGap: [0, 0.01],
         name: 'Mbps',
         nameLocation: 'end',
-        nameGap: 20
+        nameGap: 20,
+        axisLabel: { color: colors.textMuted },
+        splitLine: { lineStyle: { color: colors.splitLine } },
+        nameTextStyle: { color: colors.textMuted }
       },
       yAxis: {
         type: 'category',
@@ -226,7 +320,8 @@
         inverse: true,
         axisLabel: {
           width: 80,
-          overflow: 'truncate'
+          overflow: 'truncate',
+          color: colors.textMuted
         }
       },
       series: [
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/dashboard-system-insights.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/dashboard-system-insights.html	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/dashboard-system-insights.html	(working copy)
@@ -68,8 +68,10 @@
       </div>
       <div class="main-chart-layout centered-content">
         <div class="chart-column chart-stack-container vertical-layout">
-          <div echarts [options]="systemLoadChartOption2" class="chart-container full-width-h-50"></div>
-          <div echarts [options]="systemLoadChartOption3" class="chart-container full-width-h-50"></div>
+          <div echarts [autoResize]="true" [options]="systemLoadChartOption2" class="chart-container full-width-h-50">
+          </div>
+          <div echarts [autoResize]="true" [options]="systemLoadChartOption3" class="chart-container full-width-h-50">
+          </div>
         </div>
       </div>
     </mat-card-content>
@@ -112,7 +114,7 @@
       </div>
       <div class="main-chart-layout centered-content">
         <div class="chart-column chart-stack-container vertical-layout">
-          <div echarts [options]="diskChartOption1" class="chart-container full-width-h-50"></div>
+          <div echarts [autoResize]="true" [options]="diskChartOption1" class="chart-container full-width-h-50"></div>
           <div class="metric-details full-width-h-50">
             <div class="metric-item">
               <span class="metric-value">{{ diskMetrics?.used_bytes | bytes }}</span>
@@ -139,7 +141,7 @@
         </mat-card-title>
       </div>
       <div class="chart-flex-container centered-content">
-        <div echarts [options]="connectionChartOption2" class="chart-container full-width"></div>
+        <div echarts [autoResize]="true" [options]="connectionChartOption2" class="chart-container full-width"></div>
       </div>
     </mat-card-content>
   </mat-card>
@@ -153,7 +155,7 @@
         </mat-card-title>
       </div>
       <div class="chart-flex-container centered-content">
-        <div echarts [options]="devicesCPUChartOption1" class="chart-container full-width"></div>
+        <div echarts [autoResize]="true" [options]="devicesCPUChartOption1" class="chart-container full-width"></div>
       </div>
     </mat-card-content>
   </mat-card>
@@ -166,7 +168,7 @@
         </mat-card-title>
       </div>
       <div class="chart-flex-container centered-content">
-        <div echarts [options]="devicesMemoryChartOption1" class="chart-container full-width"></div>
+        <div echarts [autoResize]="true" [options]="devicesMemoryChartOption1" class="chart-container full-width"></div>
       </div>
     </mat-card-content>
   </mat-card>
@@ -179,7 +181,8 @@
         </mat-card-title>
       </div>
       <div class="chart-flex-container centered-content">
-        <div echarts [options]="devicesThroughputChartOption1" class="chart-container full-width"></div>
+        <div echarts [autoResize]="true" [options]="devicesThroughputChartOption1" class="chart-container full-width">
+        </div>
       </div>
     </mat-card-content>
   </mat-card>
@@ -193,7 +196,7 @@
         </mat-card-title>
       </div>
       <div class="chart-flex-container centered-content">
-        <div echarts [options]="connectionChartOption1" class="chart-container full-width"></div>
+        <div echarts [autoResize]="true" [options]="connectionChartOption1" class="chart-container full-width"></div>
       </div>
     </mat-card-content>
   </mat-card>
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 2830)
+++ /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)
@@ -23,6 +23,21 @@
   grid-column: span 1;
 }
 
+:host {
+  /* Component specific overrides or mapping */
+  --card-bg: var(--surface-bg);
+  --text-main: var(--text-primary);
+  --text-muted: var(--text-secondary);
+  --accent: var(--primary-color);
+}
+
+:host-context(.dark-theme) {
+  --card-bg: #424242;
+  --text-main: #ffffff;
+  --text-muted: #b0b0b0;
+  --accent: #64b5f6;
+}
+
 .col-span-2 {
   grid-column: span 2;
   min-height: 350px;
@@ -33,7 +48,8 @@
   width: 100%;
   height: 100%;
   border-radius: 12px;
-  background-color: #fff;
+  background-color: var(--card-bg);
+  min-width: 0;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
   border: none;
   display: flex;
@@ -57,13 +73,13 @@
 }
 
 .metric-icon {
-  color: #3f51b5;
+  color: var(--accent);
 }
 
 .card-title {
   font-size: 1.1rem;
   font-weight: 600;
-  color: #333;
+  color: var(--text-main);
   margin: 0;
   display: flex;
   justify-content: space-between;
@@ -83,20 +99,20 @@
   justify-content: center;
   align-items: flex-end;
   font-size: 0.9rem;
-  color: #777;
+  color: var(--text-muted);
   margin-top: 5px;
 }
 
 .online-count {
   font-size: 36px;
   font-weight: 600;
-  color: #333;
+  color: var(--text-main);
 }
 
 .total-count {
   font-size: 18px;
   font-weight: 500;
-  color: #888;
+  color: var(--text-muted);
   margin-left: 4px;
 }
 
@@ -130,6 +146,8 @@
   height: 100%;
   max-width: none;
   max-height: none;
+  overflow: hidden; // Prevent overflow
+  min-width: 0;
 }
 
 /* Adjustments for multiple charts */
@@ -175,7 +193,7 @@
 .metric-value {
   font-size: 1rem;
   font-weight: 500;
-  color: #333;
+  color: var(--text-main);
 }
 
 .main-chart-layout {
@@ -235,6 +253,8 @@
 .chart-container {
   width: 100%;
   height: 100%;
+  overflow: hidden;
+  min-width: 0;
 }
 
 .chart-stack-container {
@@ -283,12 +303,12 @@
 .metric-value {
   font-size: 1.2rem;
   font-weight: 600;
-  color: #333;
+  color: var(--text-main);
 }
 
 .metric-label {
   font-size: 0.9rem;
-  color: #777;
+  color: var(--text-muted);
   text-transform: uppercase;
   margin-top: 5px;
 }
\ No newline at end of file
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 2831)
+++ /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)
@@ -13,6 +13,7 @@
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatTableDataSource } from '@angular/material/table';
 import { GlobalSerialPipe } from '../../../pipes/global-serial-pipe';
+import { Layout } from '../../../services/layout';
 import { Router } from '@angular/router';
 
 
@@ -44,6 +45,7 @@
     private _notification: NotificationService,
     private _chartOptions: ChartOptions,
     private _utils: UtilsService,
+    private layoutService: Layout
   ) {
   }
 
@@ -57,9 +59,134 @@
           takeUntilDestroyed(this.destroyRef)
         )
         .subscribe();
+
+      this.layoutService.isDarkMode$.subscribe(isDark => {
+        this.updateChartTheme(isDark);
+      });
     })
+  }
+
+  updateChartTheme(isDark: boolean) {
+    this.updateChartOption(isDark);
+    this.updateHistoricalCharts(isDark);
+    this.updateDeviceMetricsCharts(isDark);
+    this.applyThemeOverrides(isDark);
+  }
+
+  applyThemeOverrides(isDark_in?: boolean) {
+    const isDark = isDark_in !== undefined ? isDark_in : document.body.classList.contains('dark-theme');
+    // Post-process options that come from shared service or need general overrides
+    [
+      this.systemLoadChartOption1,
+      this.systemLoadChartOption2,
+      this.systemLoadChartOption3,
+      this.networkThroughputChartOption1,
+      this.diskIOChartOption1,
+      this.diskChartOption1,
+      this.connectionChartOption1,
+      this.connectionChartOption2,
+      this.devicesCPUChartOption1,
+      this.devicesMemoryChartOption1,
+      this.devicesThroughputChartOption1
+    ].forEach(opt => this.applyThemeToOption(opt, isDark));
+
+    // Specific overrides for charts with hardcoded titles/series from service
+    [this.systemLoadChartOption2, this.systemLoadChartOption3, this.diskChartOption1].forEach(opt => {
+      if (opt && opt.title) {
+        const title: any = opt.title;
+        if (Array.isArray(title)) {
+          title.forEach((t: any) => { if (t.textStyle) t.textStyle.color = isDark ? '#fff' : '#333'; });
+        } else if (title.textStyle) {
+          title.textStyle.color = isDark ? '#fff' : '#333';
+        }
+      }
+    });
+
+    // Fix connectionChartOption1 (Line Chart) legend if it exists
+    if (this.connectionChartOption1 && this.connectionChartOption1.legend && !Array.isArray(this.connectionChartOption1.legend)) {
+      if (!this.connectionChartOption1.legend.textStyle) this.connectionChartOption1.legend.textStyle = {};
+      this.connectionChartOption1.legend.textStyle.color = isDark ? '#fff' : '#333';
+    }
+  }
+
+  applyThemeToOption(option: any, isDark: boolean) {
+    if (!option) return;
+    const colors = this.getThemeColors(isDark);
+
+    // Common Background
+    option.backgroundColor = 'transparent'; // Ensure transparent to let card bg show
+
+    // Tooltips
+    if (option.tooltip) {
+      option.tooltip.backgroundColor = isDark ? '#424242' : '#fff';
+      option.tooltip.borderColor = isDark ? '#616161' : '#ccc';
+      if (!option.tooltip.textStyle) option.tooltip.textStyle = {};
+      option.tooltip.textStyle.color = colors.textMain;
+    }
+
+    // Legend
+    if (option.legend) {
+      if (!option.legend.textStyle) option.legend.textStyle = {};
+      option.legend.textStyle.color = colors.textMain;
+    }
+
+    // Axes
+    const applyAxisTheme = (axis: any) => {
+      if (!axis) return;
+      if (Array.isArray(axis)) {
+        axis.forEach(a => applyAxisTheme(a));
+        return;
+      }
+      if (!axis.axisLabel) axis.axisLabel = {};
+      axis.axisLabel.color = colors.textMuted;
+
+      if (!axis.splitLine) axis.splitLine = {};
+      if (!axis.splitLine.lineStyle) axis.splitLine.lineStyle = {};
+      // axis.splitLine.lineStyle.color = isDark ? '#505050' : '#e0e0e0'; // Optional: theme split lines
+
+      if (!axis.nameTextStyle) axis.nameTextStyle = {};
+      axis.nameTextStyle.color = colors.textMuted;
+    };
+
+    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.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.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
+    };
+  }
+
   devices: any[] = [];
   groups: any[] = [];
   connectedDevices: number = 0;
@@ -166,7 +293,8 @@
     }
   }
 
-  private updateChartOption() {
+  private updateChartOption(isDark_in?: boolean) {
+    const isDark = isDark_in !== undefined ? isDark_in : document.body.classList.contains('dark-theme');
     let _data: any = {
       cpu: {
         usage: this.currentSystemMetrics?.cpu?.cpu_percent,
@@ -186,20 +314,22 @@
       }
     }
 
+    const colors = this.getThemeColors(isDark);
+
     if (_data.cpu.usage !== undefined && _data.cpu.usage !== null) {
-      this.systemLoadChartOption2 = this._chartOptions.systemStatusPieChartOptions('CPU', _data?.cpu?.usage, '#3f51b5');
+      this.systemLoadChartOption2 = this._chartOptions.systemStatusPieChartOptions('CPU', _data?.cpu?.usage, colors.accent);
     } else {
       this.systemLoadChartOption2 = this._chartOptions.getNoDataChartOptions();
     }
 
     if (_data.memory.usage !== undefined && _data.memory.usage !== null) {
-      this.systemLoadChartOption3 = this._chartOptions.systemStatusPieChartOptions('Memory', _data?.memory?.usage, '#00c698');
+      this.systemLoadChartOption3 = this._chartOptions.systemStatusPieChartOptions('Memory', _data?.memory?.usage, colors.teal);
     } else {
       this.systemLoadChartOption3 = this._chartOptions.getNoDataChartOptions();
     }
 
     if (_data.disk.usage !== undefined && _data.disk.usage !== null) {
-      this.diskChartOption1 = this._chartOptions.systemStatusPieChartOptions('Disk', _data?.disk?.usage, '#ff9800');
+      this.diskChartOption1 = this._chartOptions.systemStatusPieChartOptions('Disk', _data?.disk?.usage, colors.orange);
     } else {
       this.diskChartOption1 = this._chartOptions.getNoDataChartOptions();
     }
@@ -215,9 +345,11 @@
     } else {
       this.connectionChartOption2 = this._chartOptions.getNoDataChartOptions();
     }
+    this.applyThemeOverrides();
   }
 
-  updateHistoricalCharts() {
+  updateHistoricalCharts(isDark_in?: boolean) {
+    const isDark = isDark_in !== undefined ? isDark_in : document.body.classList.contains('dark-theme');
     const factor: any = 1024 * 1024;
 
     if (this.historicalCPUMetrics && this.historicalCPUMetrics.length > 0 && this.historicalMemoryMetrics && this.historicalMemoryMetrics.length > 0) {
@@ -242,6 +374,7 @@
     } else {
       this.diskIOChartOption1 = this._chartOptions.getNoDataChartOptions();
     }
+    this.applyThemeOverrides();
   }
 
   // Device Metrics Logic
@@ -266,7 +399,8 @@
       });
   }
 
-  private updateDeviceMetricsCharts(): void {
+  private updateDeviceMetricsCharts(isDark_in?: boolean): void {
+    const isDark = isDark_in !== undefined ? isDark_in : document.body.classList.contains('dark-theme');
     if (!this.connectedDevicesMetrics || this.connectedDevicesMetrics.length === 0) {
       this.devicesCPUChartOption1 = this._chartOptions.getNoDataChartOptions();
       this.devicesMemoryChartOption1 = this._chartOptions.getNoDataChartOptions();
@@ -281,14 +415,16 @@
     const sortedCpu = (_data?.cpu || []).sort(sortByValueDesc).slice(0, 5);
     const sortedMemory = (_data?.memory || []).sort(sortByValueDesc).slice(0, 5);
 
+    const colors = this.getThemeColors(isDark);
+
     if (sortedCpu.length > 0) {
-      this.devicesCPUChartOption1 = this.getHorizontalBarChartOptions('CPU %', sortedCpu, '#3f51b5');
+      this.devicesCPUChartOption1 = this.getHorizontalBarChartOptions('CPU %', sortedCpu, colors.accent); // was #3f51b5
     } else {
       this.devicesCPUChartOption1 = this._chartOptions.getNoDataChartOptions();
     }
 
     if (sortedMemory.length > 0) {
-      this.devicesMemoryChartOption1 = this.getHorizontalBarChartOptions('Memory %', sortedMemory, '#00c698');
+      this.devicesMemoryChartOption1 = this.getHorizontalBarChartOptions('Memory %', sortedMemory, colors.teal); // was #00c698
     } else {
       this.devicesMemoryChartOption1 = this._chartOptions.getNoDataChartOptions();
     }
@@ -316,14 +452,31 @@
     } else {
       this.devicesThroughputChartOption1 = this._chartOptions.getNoDataChartOptions();
     }
+    this.applyThemeOverrides();
   }
 
   getHorizontalBarChartOptions(label: string, metrics: any[], color: string): EChartsOption {
+    // This is called by updateDeviceMetricsCharts which now sets the theme context, 
+    // but if called directly we might need consistent isDark. 
+    // However, for now we can likely rely on DOM for this helper as it's not the top-level updater,
+    // OR ideally we pass colors in. But for now, let's keep it DOM based or pass it.
+    // Given the method signature is used elsewhere, let's stick to DOM here OR update signature.
+    // Simpler: The caller (updateDeviceMetricsCharts) calls this, but this method re-reads theme.
+    // Let's rely on the caller passing 'colors' properly? No, 'colors' arg is just BAR color.
+    // We should patch this too.
+    const isDark = document.body.classList.contains('dark-theme');
+    const themeColors = this.getThemeColors(isDark); // Rename to avoid conflict with 'color' arg
+
     return {
       tooltip: {
         trigger: 'axis',
         axisPointer: {
           type: 'shadow'
+        },
+        backgroundColor: isDark ? '#424242' : '#fff',
+        borderColor: isDark ? '#616161' : '#ccc',
+        textStyle: {
+          color: themeColors.textMain
         }
       },
       grid: {
@@ -337,7 +490,14 @@
         boundaryGap: [0, 0.01],
         max: 100,
         axisLabel: {
-          formatter: '{value}%'
+          formatter: '{value}%',
+          color: themeColors.textMuted
+        },
+        splitLine: {
+          show: false
+        },
+        axisLine: {
+          lineStyle: { color: isDark ? '#616161' : '#ccc' }
         }
       },
       yAxis: {
@@ -346,7 +506,11 @@
         inverse: true,
         axisLabel: {
           width: 80,
-          overflow: 'truncate'
+          overflow: 'truncate',
+          color: themeColors.textMuted
+        },
+        axisLine: {
+          show: false
         }
       },
       series: [
@@ -361,7 +525,8 @@
           label: {
             show: true,
             position: 'right',
-            formatter: '{c}%'
+            formatter: '{c}%',
+            color: themeColors.textMain
           },
           barWidth: '60%'
         }
@@ -370,12 +535,20 @@
   }
 
   getHorizontalThroughputChartOptions(data: any[]): EChartsOption {
+    const isDark = document.body.classList.contains('dark-theme');
+    const colors = this.getThemeColors(isDark);
+
     return {
       tooltip: {
         trigger: 'axis',
         axisPointer: {
           type: 'shadow'
         },
+        backgroundColor: isDark ? '#424242' : '#fff',
+        borderColor: isDark ? '#616161' : '#ccc',
+        textStyle: {
+          color: colors.textMain
+        },
         formatter: (params: any) => {
           let tooltipContent = `${params[0].name}<br/>`;
           params.forEach((param: any) => {
@@ -387,7 +560,8 @@
       },
       legend: {
         data: ['Inbound', 'Outbound'],
-        bottom: 0
+        bottom: 0,
+        textStyle: { color: colors.textMain }
       },
       grid: {
         left: '3%',
@@ -400,7 +574,16 @@
         boundaryGap: [0, 0.01],
         name: 'Mbps',
         nameLocation: 'end',
-        nameGap: 20
+        nameGap: 20,
+        axisLabel: {
+          color: colors.textMuted
+        },
+        splitLine: {
+          show: false
+        },
+        nameTextStyle: {
+          color: colors.textMuted
+        }
       },
       yAxis: {
         type: 'category',
@@ -408,7 +591,8 @@
         inverse: true,
         axisLabel: {
           width: 80,
-          overflow: 'truncate'
+          overflow: 'truncate',
+          color: colors.textMuted
         }
       },
       series: [
@@ -418,7 +602,7 @@
           stack: 'total',
           data: data.map(item => item.inbound),
           itemStyle: {
-            color: '#4caf50'
+            color: colors.green
           }
         },
         {
@@ -427,7 +611,7 @@
           stack: 'total',
           data: data.map(item => item.outbound),
           itemStyle: {
-            color: '#2196f3',
+            color: colors.accent,
             borderRadius: [0, 4, 4, 0]
           }
         }
@@ -435,6 +619,7 @@
     };
   }
 
+
   dialog = inject(MatDialog);
   dialogConfig = new MatDialogConfig();
 
@@ -559,12 +744,17 @@
     private _system: SystemService,
     private _notification: NotificationService,
     private _chartOptions: ChartOptions,
-    private _utils: UtilsService
+    private _utils: UtilsService,
+    private layoutService: Layout
   ) {
   }
 
   ngOnInit() {
     setTimeout(() => {
+      this.layoutService.isDarkMode$.subscribe(isDark => {
+        this.updateChartTheme(isDark);
+      });
+
       interval(this._utils.AUTO_REFRESH_INTERVAL)
         .pipe(
           startWith(0),
@@ -600,6 +790,51 @@
     const cpu_data_formatted = this.cpuMetrics.map((d: any) => [d.time, d.cpu_percent]);
     const memory_data_formatted = this.memoryMetrics.map((d: any) => [d.time, d.mem_percent]);
     this.chartOption1 = this._chartOptions.historicalCPUMemoryChartOptions(cpu_data_formatted, memory_data_formatted);
+    this.applyThemeToOption(this.chartOption1);
+  }
+
+  updateChartTheme(isDark: boolean) {
+    this.applyThemeToOption(this.chartOption1, isDark);
+    this.chartOption1 = { ...this.chartOption1 };
+  }
+
+  applyThemeToOption(option: any, isDark_in?: boolean) {
+    if (!option) return;
+    const isDark = isDark_in !== undefined ? isDark_in : document.body.classList.contains('dark-theme');
+
+    // Use the same colors as main system insights
+    const colors = {
+      textMain: isDark ? '#e0e0e0' : '#333333',
+      textMuted: isDark ? '#a0a0a0' : '#777777'
+    };
+
+    option.backgroundColor = 'transparent';
+
+    if (option.tooltip) {
+      option.tooltip.backgroundColor = isDark ? '#424242' : '#fff';
+      option.tooltip.borderColor = isDark ? '#616161' : '#ccc';
+      if (!option.tooltip.textStyle) option.tooltip.textStyle = {};
+      option.tooltip.textStyle.color = colors.textMain;
+    }
+
+    if (option.legend) {
+      if (!option.legend.textStyle) option.legend.textStyle = {};
+      option.legend.textStyle.color = colors.textMain;
+    }
+
+    const applyAxisTheme = (axis: any) => {
+      if (!axis) return;
+      if (Array.isArray(axis)) {
+        axis.forEach(a => applyAxisTheme(a));
+        return;
+      }
+      if (!axis.axisLabel) axis.axisLabel = {};
+      if (!axis.nameTextStyle) axis.nameTextStyle = {};
+      axis.nameTextStyle.color = colors.textMuted;
+    };
+
+    applyAxisTheme(option.xAxis);
+    applyAxisTheme(option.yAxis);
   }
 
   onCancel() {
@@ -624,12 +859,17 @@
     private _system: SystemService,
     private _notification: NotificationService,
     private _chartOptions: ChartOptions,
-    private _utils: UtilsService
+    private _utils: UtilsService,
+    private layoutService: Layout
   ) {
   }
 
   ngOnInit() {
     setTimeout(() => {
+      this.layoutService.isDarkMode$.subscribe(isDark => {
+        this.updateChartTheme(isDark);
+      });
+
       interval(this._utils.AUTO_REFRESH_INTERVAL)
         .pipe(
           startWith(0),
@@ -664,8 +904,45 @@
     const sent_data_formatted = this.networkMetrics.map((d: any) => [d.time, d.sent / factor]);
     const received_data_formatted = this.networkMetrics.map((d: any) => [d.time, d.received / factor]);
     this.chartOption1 = this._chartOptions.historicalThroughputChartOptions(sent_data_formatted, received_data_formatted)
+    this.applyThemeToOption(this.chartOption1);
   }
 
+  updateChartTheme(isDark: boolean) {
+    this.applyThemeToOption(this.chartOption1, isDark);
+    this.chartOption1 = { ...this.chartOption1 };
+  }
+
+  applyThemeToOption(option: any, isDark_in?: boolean) {
+    // Duplicated simple theme logic for now
+    if (!option) return;
+    const isDark = isDark_in !== undefined ? isDark_in : document.body.classList.contains('dark-theme');
+    const colors = {
+      textMain: isDark ? '#e0e0e0' : '#333333',
+      textMuted: isDark ? '#a0a0a0' : '#777777'
+    };
+    option.backgroundColor = 'transparent';
+    if (option.tooltip) {
+      option.tooltip.backgroundColor = isDark ? '#424242' : '#fff';
+      option.tooltip.borderColor = isDark ? '#616161' : '#ccc';
+      if (!option.tooltip.textStyle) option.tooltip.textStyle = {};
+      option.tooltip.textStyle.color = colors.textMain;
+    }
+    if (option.legend) {
+      if (!option.legend.textStyle) option.legend.textStyle = {};
+      option.legend.textStyle.color = colors.textMain;
+    }
+    const applyAxisTheme = (axis: any) => {
+      if (!axis) return;
+      if (Array.isArray(axis)) { axis.forEach(a => applyAxisTheme(a)); return; }
+      if (!axis.axisLabel) axis.axisLabel = {};
+      axis.axisLabel.color = colors.textMuted;
+      if (!axis.nameTextStyle) axis.nameTextStyle = {};
+      axis.nameTextStyle.color = colors.textMuted;
+    };
+    applyAxisTheme(option.xAxis);
+    applyAxisTheme(option.yAxis);
+  }
+
   onCancel() {
     this.dialogRef.close();
   }
@@ -688,12 +965,17 @@
     private _system: SystemService,
     private _notification: NotificationService,
     private _chartOptions: ChartOptions,
-    private _utils: UtilsService
+    private _utils: UtilsService,
+    private layoutService: Layout
   ) {
   }
 
   ngOnInit() {
     setTimeout(() => {
+      this.layoutService.isDarkMode$.subscribe(isDark => {
+        this.updateChartTheme(isDark);
+      });
+
       interval(this._utils.AUTO_REFRESH_INTERVAL)
         .pipe(
           startWith(0),
@@ -726,8 +1008,44 @@
   updateChartOptions() {
     const disk_io_formatted = this.diskIOMetrics.map((d: any) => [d.time, d.disk_io_percent]);
     this.chartOption1 = this._chartOptions.historicalDiskIOChartOptions(disk_io_formatted);
+    this.applyThemeToOption(this.chartOption1);
   }
 
+  updateChartTheme(isDark: boolean) {
+    this.applyThemeToOption(this.chartOption1, isDark);
+    this.chartOption1 = { ...this.chartOption1 };
+  }
+
+  applyThemeToOption(option: any, isDark_in?: boolean) {
+    if (!option) return;
+    const isDark = isDark_in !== undefined ? isDark_in : document.body.classList.contains('dark-theme');
+    const colors = {
+      textMain: isDark ? '#e0e0e0' : '#333333',
+      textMuted: isDark ? '#a0a0a0' : '#777777'
+    };
+    option.backgroundColor = 'transparent';
+    if (option.tooltip) {
+      option.tooltip.backgroundColor = isDark ? '#424242' : '#fff';
+      option.tooltip.borderColor = isDark ? '#616161' : '#ccc';
+      if (!option.tooltip.textStyle) option.tooltip.textStyle = {};
+      option.tooltip.textStyle.color = colors.textMain;
+    }
+    if (option.legend) {
+      if (!option.legend.textStyle) option.legend.textStyle = {};
+      option.legend.textStyle.color = colors.textMain;
+    }
+    const applyAxisTheme = (axis: any) => {
+      if (!axis) return;
+      if (Array.isArray(axis)) { axis.forEach(a => applyAxisTheme(a)); return; }
+      if (!axis.axisLabel) axis.axisLabel = {};
+      axis.axisLabel.color = colors.textMuted;
+      if (!axis.nameTextStyle) axis.nameTextStyle = {};
+      axis.nameTextStyle.color = colors.textMuted;
+    };
+    applyAxisTheme(option.xAxis);
+    applyAxisTheme(option.yAxis);
+  }
+
   onCancel() {
     this.dialogRef.close();
   }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/enlarge-system-disk-usage.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/enlarge-system-disk-usage.html	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/enlarge-system-disk-usage.html	(working copy)
@@ -1,11 +1,11 @@
 <h2 mat-dialog-title>System Disk Usage (Last 1 Hour)</h2>
 <mat-dialog-content>
   <div class="dialog-charts-wrapper">
-    <div echarts [options]="chartOption1" class="dialog-chart-container"></div>
+    <div echarts [autoResize]="true" [options]="chartOption1" class="dialog-chart-container"></div>
   </div>
 </mat-dialog-content>
 <mat-dialog-actions>
   <button mat-button color="basic" (click)="onCancel()">
     Close
   </button>
-</mat-dialog-actions>
+</mat-dialog-actions>
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/enlarge-system-load.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/enlarge-system-load.html	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/enlarge-system-load.html	(working copy)
@@ -1,12 +1,9 @@
 <h2 mat-dialog-title>System Load (Last 1 Hour)</h2>
 <mat-dialog-content>
-  <div echarts [options]="chartOption1" class="chart-container"></div>
+  <div echarts [autoResize]="true" [options]="chartOption1" class="chart-container"></div>
 </mat-dialog-content>
 <mat-dialog-actions>
-  <button
-    mat-button
-    color="basic"
-    (click)="onCancel()">
+  <button mat-button color="basic" (click)="onCancel()">
     Close
   </button>
-</mat-dialog-actions>
+</mat-dialog-actions>
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/enlarge-system-throughput.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/enlarge-system-throughput.html	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/enlarge-system-throughput.html	(working copy)
@@ -1,12 +1,9 @@
 <h2 mat-dialog-title>Network Throughput (Last 1 Hour)</h2>
 <mat-dialog-content>
-  <div echarts [options]="chartOption1" class="chart-container"></div>
+  <div echarts [autoResize]="true" [options]="chartOption1" class="chart-container"></div>
 </mat-dialog-content>
 <mat-dialog-actions>
-  <button
-    mat-button
-    color="basic"
-    (click)="onCancel()">
+  <button mat-button color="basic" (click)="onCancel()">
     Close
   </button>
-</mat-dialog-actions>
+</mat-dialog-actions>
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-cloned-files/device-cloned-files.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-cloned-files/device-cloned-files.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-cloned-files/device-cloned-files.scss	(working copy)
@@ -145,4 +145,58 @@
             font-size: 14px;
         }
     }
+}
+
+:host-context(.dark-theme) {
+    mat-card.table-card {
+        background-color: var(--surface-bg);
+        border: 1px solid var(--border-color);
+
+        mat-card-header {
+            border-bottom: 1px solid var(--border-color);
+
+            mat-card-title {
+                color: var(--text-primary);
+            }
+        }
+    }
+
+    table.modern-table {
+        th.mat-header-cell {
+            background-color: var(--panel-bg);
+            color: var(--text-secondary);
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        td.mat-cell {
+            color: var(--text-primary);
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        tr.mat-row:hover {
+            background-color: var(--hover-bg);
+        }
+
+        .row-link {
+            color: #64b5f6;
+        }
+
+        .secondary-text {
+            color: var(--text-secondary);
+        }
+
+        .badge {
+            background-color: rgba(26, 115, 232, 0.2); // Darker translucent blue
+            color: #8ab4f8; // Lighter blue for text
+
+            &.template {
+                background-color: rgba(19, 115, 51, 0.2); // Darker translucent green
+                color: #81c995; // Lighter green
+            }
+        }
+
+        .no-data-content {
+            color: var(--text-secondary);
+        }
+    }
 }
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-config-overview/device-config-overview.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-config-overview/device-config-overview.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-config-overview/device-config-overview.scss	(working copy)
@@ -175,4 +175,48 @@
             font-size: 14px;
         }
     }
+}
+
+:host-context(.dark-theme) {
+    mat-card.table-card {
+        background-color: var(--surface-bg);
+        border: 1px solid var(--border-color);
+
+        mat-card-header {
+            border-bottom: 1px solid var(--border-color);
+
+            mat-card-title {
+                color: var(--text-primary);
+            }
+        }
+    }
+
+    table.modern-table {
+        th.mat-header-cell {
+            background-color: var(--panel-bg);
+            color: var(--text-secondary);
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        td.mat-cell {
+            color: var(--text-primary);
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        tr.mat-row:hover {
+            background-color: var(--hover-bg);
+        }
+
+        .row-link {
+            color: #64b5f6; // Lighter blue for dark mode
+        }
+
+        .secondary-text {
+            color: var(--text-secondary);
+        }
+
+        .no-data-content {
+            color: var(--text-secondary);
+        }
+    }
 }
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-custom-config-overview/device-custom-config-overview.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-custom-config-overview/device-custom-config-overview.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-custom-config-overview/device-custom-config-overview.scss	(working copy)
@@ -169,4 +169,63 @@
             font-size: 14px;
         }
     }
+}
+
+:host-context(.dark-theme) {
+    mat-card.table-card {
+        background-color: var(--surface-bg);
+        border: 1px solid var(--border-color);
+
+        mat-card-header {
+            border-bottom: 1px solid var(--border-color);
+
+            mat-card-title {
+                color: var(--text-primary);
+            }
+        }
+    }
+
+    table.modern-table {
+        th.mat-header-cell {
+            background-color: var(--panel-bg);
+            color: var(--text-secondary);
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        td.mat-cell {
+            color: var(--text-primary);
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        tr.mat-row:hover {
+            background-color: var(--hover-bg);
+        }
+
+        .row-link {
+            color: #64b5f6;
+        }
+
+        .secondary-text {
+            color: var(--text-secondary);
+        }
+
+        .badge {
+            background-color: rgba(26, 115, 232, 0.2); // Darker translucent blue
+            color: #8ab4f8; // Lighter blue for text
+
+            &.template {
+                background-color: rgba(19, 115, 51, 0.2); // Darker translucent green
+                color: #81c995; // Lighter green
+            }
+
+            &.customize {
+                background-color: rgba(249, 168, 37, 0.2); // Darker translucent amber
+                color: #fdd835; // Lighter amber
+            }
+        }
+
+        .no-data-content {
+            color: var(--text-secondary);
+        }
+    }
 }
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-custom-config-templates/device-custom-config-templates.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-custom-config-templates/device-custom-config-templates.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-custom-config-templates/device-custom-config-templates.scss	(working copy)
@@ -168,4 +168,58 @@
             font-size: 14px;
         }
     }
+}
+
+:host-context(.dark-theme) {
+    mat-card.table-card {
+        background-color: var(--surface-bg);
+        border: 1px solid var(--border-color);
+
+        mat-card-header {
+            border-bottom: 1px solid var(--border-color);
+
+            mat-card-title {
+                color: var(--text-primary);
+            }
+        }
+
+        mat-card-content {
+            mat-paginator {
+                background-color: var(--surface-bg);
+                color: var(--text-secondary);
+                border-top: 1px solid var(--border-color);
+            }
+        }
+    }
+
+    table.modern-table {
+        th.mat-header-cell {
+            background-color: var(--panel-bg);
+            color: var(--text-secondary);
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        td.mat-cell {
+            color: var(--text-primary);
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        tr.mat-row:hover {
+            background-color: var(--hover-bg);
+        }
+
+        .template-param {
+            .param-key {
+                color: var(--text-secondary);
+            }
+
+            .param-value {
+                color: var(--text-primary);
+            }
+        }
+
+        .no-data-content {
+            color: var(--text-secondary);
+        }
+    }
 }
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-details/device-details.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-details/device-details.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-details/device-details.scss	(working copy)
@@ -12,7 +12,7 @@
   height: 40px;
 
   .back-button {
-    color: #1976d2;
+    color: var(--primary-color);
     font-weight: 500;
     padding: 0 12px 0 0; // Right padding for visual separation before border
     min-width: auto; // Override mat-button min-width
@@ -40,9 +40,9 @@
     margin: 0;
     font-size: 20px;
     font-weight: 500;
-    color: #333;
+    color: var(--text-primary);
     padding-left: 12px;
-    border-left: 1px solid #ddd;
+    border-left: 1px solid var(--border-color);
     line-height: 24px;
   }
 }
@@ -72,14 +72,14 @@
   mat-card {
     mat-card-header {
       padding: 10px 24px; // Reduced padding
-      border-bottom: 1px solid #eee;
+      border-bottom: 1px solid var(--border-color);
       margin-bottom: 0;
 
       mat-card-title {
         font-size: 16px;
         font-weight: 600;
         margin: 0;
-        color: #1976d2; // Updated color
+        color: var(--primary-color); // Updated color
       }
     }
 
@@ -108,7 +108,7 @@
 
   .status-label {
     font-weight: 500;
-    color: #555;
+    color: var(--text-secondary);
   }
 }
 
@@ -120,24 +120,24 @@
     height: 40px;
 
     &:hover {
-      background-color: #f9f9f9;
+      background-color: var(--table-hover);
     }
   }
 
   td.mat-mdc-cell {
-    border-bottom-color: #f0f0f0;
+    border-bottom-color: var(--border-color);
     padding: 8px 24px;
     font-size: 14px;
 
     &.label-cell {
       width: 40%;
-      color: #666;
+      color: var(--text-secondary);
       font-weight: 500;
       text-transform: capitalize;
     }
 
     &.value-cell {
-      color: #333;
+      color: var(--text-primary);
       font-family: 'Roboto Mono', monospace; // Optional for values
     }
   }
@@ -149,8 +149,8 @@
 }
 
 .config-viewer {
-  background: #fff;
-  border: 1px solid #e0e0e0;
+  background: var(--surface-bg);
+  border: 1px solid var(--border-color);
   border-radius: 8px;
   overflow: hidden;
 
@@ -159,13 +159,14 @@
     justify-content: space-between;
     align-items: center;
     padding: 8px 16px; // Reduced padding
-    background: #f5f5f5;
-    border-bottom: 1px solid #e0e0e0;
+    background: var(--table-header-bg);
+    border-bottom: 1px solid var(--border-color);
 
     h3 {
       margin: 0;
       font-size: 16px;
       font-weight: 500;
+      color: var(--text-primary);
     }
   }
 
@@ -186,10 +187,10 @@
 .empty-state {
   text-align: center;
   padding: 48px;
-  color: #888;
-  background: #f9f9f9;
+  color: var(--text-secondary);
+  background: var(--surface-bg);
   border-radius: 8px;
-  border: 1px dashed #ccc;
+  border: 1px dashed var(--border-color);
 }
 
 // Settings Form
@@ -204,10 +205,10 @@
   .form-section-title {
     font-size: 16px;
     font-weight: 600;
-    color: #1976d2; // Primary color accent
+    color: var(--primary-color); // Primary color accent
     margin: 24px 0 16px;
     padding-bottom: 8px;
-    border-bottom: 2px solid rgba(25, 118, 210, 0.1);
+    border-bottom: 2px solid rgba(var(--primary-color-rgb), 0.1);
 
     &:first-child {
       margin-top: 0;
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 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-groups/device-groups.html	(working copy)
@@ -2,7 +2,7 @@
   <mat-card-header>
     <mat-card-title>Device Groups</mat-card-title>
     <div class="header-actions">
-      <button mat-raised-button color="primary" (click)="addDeviceGroup()">Add</button>
+      <button mat-raised-button color="primary" class="primary-btn" (click)="addDeviceGroup()">Add</button>
     </div>
   </mat-card-header>
   <mat-card-content>
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 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-groups/device-groups.scss	(working copy)
@@ -11,6 +11,22 @@
       font-weight: 500;
       margin: 0;
     }
+
+    .header-actions {
+      display: flex;
+      gap: 12px;
+
+      button {
+        &.primary-btn {
+          background-color: var(--primary-color) !important;
+          color: #ffffff !important;
+
+          &:hover {
+            filter: brightness(110%);
+          }
+        }
+      }
+    }
   }
 
   .mat-mdc-card-content {
@@ -28,23 +44,23 @@
 
     th.mat-header-cell {
       font-weight: 600;
-      color: #444;
-      background-color: #f9fafb;
+      color: var(--table-header-text);
+      background-color: var(--table-header-bg);
       padding: 10px 12px; // Compact padding
       font-size: 14px;
-      border-bottom: 1px solid #e0e0e0;
+      border-bottom: 1px solid var(--border-color);
     }
 
     td.mat-cell {
       padding: 10px 12px; // Compact padding
-      color: #333;
+      color: var(--text-primary);
       font-size: 14px;
-      border-bottom: 1px solid #f0f0f0;
+      border-bottom: 1px solid var(--border-color);
     }
 
     tr.mat-row {
       &:hover {
-        background-color: #f5f7fa;
+        background-color: var(--table-hover);
       }
 
       &:last-child td {
@@ -82,8 +98,8 @@
   font-size: 18px;
   font-weight: 500;
   // Removed border-bottom
-  background-color: #fff; // Changed to white for cleaner look
-  color: #333;
+  background-color: var(--dialog-bg);
+  color: var(--text-primary);
 }
 
 mat-dialog-content {
@@ -97,7 +113,7 @@
       display: block;
       margin-bottom: 8px;
       font-weight: 500;
-      color: #444;
+      color: var(--text-secondary);
       font-size: 14px;
     }
 
@@ -111,5 +127,5 @@
   padding: 10px 24px !important; // Reduced padding
   // Removed border-top
   margin-bottom: 0;
-  background-color: #fff;
+  background-color: var(--dialog-bg);
 }
\ 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.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices.html	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices.html	(working copy)
@@ -2,8 +2,8 @@
   <mat-card-header>
     <mat-card-title>Managed Devices</mat-card-title>
     <div class="header-actions">
-      <button mat-raised-button color="primary" (click)="addDevice()">Add</button>
-      <button mat-raised-button (click)="getDeviceBuildInfo()">Check Build Info</button>
+      <button mat-raised-button class="primary-btn" (click)="addDevice()">Add</button>
+      <button mat-raised-button class="secondary-btn" (click)="getDeviceBuildInfo()">Check Build Info</button>
     </div>
   </mat-card-header>
   <mat-card-content>
@@ -75,16 +75,16 @@
           <td mat-cell *matCellDef="let element">
             <div class="row-action a-link">
               <fa-icon [icon]="['fas', 'id-badge']" size="lg" (click)="showLicenseDialog(element)" matTooltip="License"
-                [ngClass]="{'disabled-icon': otherDeviceTypes.includes(element.type)}"></fa-icon>
+                [ngClass]="{'disabled-icon': otherDeviceTypes.includes(element.type)}" class="license-icon"></fa-icon>
               <a target="_blank" rel="noopener noreferrer"
                 [href]="element?.ip && element?.webui_port ? 'https://' + element.ip + ':' + element.webui_port : '#'"
                 [ngClass]="{'disabled-icon': otherDeviceTypes.includes(element.type)}">
-                <fa-icon [icon]="['fas', 'tv']" size="lg" matTooltip="WebUI"></fa-icon>
+                <fa-icon [icon]="['fas', 'tv']" size="lg" matTooltip="WebUI" class="webui-icon"></fa-icon>
               </a>
               <fa-icon [icon]="['fas', 'terminal']" size="lg" (click)="openWebConsole(element)" matTooltip="CLI"
-                [ngClass]="{'disabled-icon': otherDeviceTypes.includes(element.type)}"></fa-icon>
+                [ngClass]="{'disabled-icon': otherDeviceTypes.includes(element.type)}" class="cli-icon"></fa-icon>
               <fa-icon [icon]="['far', 'save']" size="lg" (click)="confirmSave(element)" matTooltip="Save Config"
-                [ngClass]="{'disabled-icon': otherDeviceTypes.includes(element.type)}"></fa-icon>
+                [ngClass]="{'disabled-icon': otherDeviceTypes.includes(element.type)}" class="save-icon"></fa-icon>
               <fa-icon [icon]="['far', 'trash-can']" size="lg" class="delete-icon" matTooltip="Delete Device"
                 (click)="confirmDelete(element)"></fa-icon>
             </div>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/devices/devices.scss	(working copy)
@@ -15,6 +15,28 @@
     .header-actions {
       display: flex;
       gap: 12px;
+
+      button {
+        &.primary-btn {
+          background-color: var(--primary-color) !important;
+          color: #ffffff !important;
+
+          &:hover {
+            filter: brightness(110%);
+          }
+        }
+
+        &.secondary-btn {
+          background-color: transparent !important;
+          color: var(--text-primary) !important;
+          border: 1px solid var(--border-color) !important;
+
+          &:hover {
+            background-color: var(--hover-bg) !important;
+            border-color: var(--text-secondary) !important;
+          }
+        }
+      }
     }
   }
 
@@ -33,23 +55,23 @@
 
     th.mat-header-cell {
       font-weight: 600;
-      color: #444;
-      background-color: #f9fafb;
+      color: var(--table-header-text);
+      background-color: var(--table-header-bg);
       padding: 10px 12px; // Compact padding
       font-size: 14px;
-      border-bottom: 1px solid #e0e0e0;
+      border-bottom: 1px solid var(--border-color);
     }
 
     td.mat-cell {
       padding: 10px 12px; // Compact padding
-      color: #333;
+      color: var(--text-primary);
       font-size: 14px;
-      border-bottom: 1px solid #f0f0f0;
+      border-bottom: 1px solid var(--border-color);
     }
 
     tr.mat-row {
       &:hover {
-        background-color: #f5f7fa;
+        background-color: var(--table-hover);
       }
 
       &:last-child td {
@@ -72,12 +94,12 @@
 }
 
 .delete-icon {
-  color: #d32f2f;
+  color: var(--warn-color);
   font-size: 16px;
 }
 
 .success-icon {
-  color: #2e7d32;
+  color: var(--success-color);
   font-size: 16px;
 }
 
@@ -88,7 +110,7 @@
 }
 
 .details-page-link {
-  color: #1976d2;
+  color: var(--primary-color);
   cursor: pointer;
   text-decoration: none;
   font-weight: 500;
@@ -98,6 +120,22 @@
   }
 }
 
+.license-icon {
+  color: var(--text-secondary);
+}
+
+.webui-icon {
+  color: var(--primary-color);
+}
+
+.cli-icon {
+  color: var(--text-secondary);
+}
+
+.save-icon {
+  color: var(--success-color);
+}
+
 .w-10 {
   width: 10%;
 }
@@ -114,8 +152,8 @@
   font-size: 18px;
   font-weight: 500;
   // Removed border-bottom
-  background-color: #fff; // Changed to white for cleaner look
-  color: #333;
+  background-color: var(--dialog-bg);
+  color: var(--text-primary);
 }
 
 mat-dialog-content {
@@ -129,7 +167,7 @@
       display: block;
       margin-bottom: 8px;
       font-weight: 500;
-      color: #444;
+      color: var(--text-secondary);
       font-size: 14px;
     }
 
@@ -148,5 +186,5 @@
   padding: 10px 24px !important; // Reduced padding
   // Removed border-top
   margin-bottom: 0;
-  background-color: #fff;
+  background-color: var(--dialog-bg);
 }
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-alert/event-alert.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-alert/event-alert.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-alert/event-alert.scss	(working copy)
@@ -1,6 +1,6 @@
 .event-alert-container {
     padding: 20px;
-    background-color: #f0f2f5;
+    background-color: var(--app-bg);
     min-height: calc(100vh - 64px); // Adjust based on header height
 
     .toolbar {
@@ -10,7 +10,7 @@
         justify-content: flex-end;
 
         button {
-            color: #333;
+            color: var(--text-primary);
         }
     }
 
@@ -19,7 +19,7 @@
         justify-content: space-between;
         align-items: flex-end;
         margin-bottom: 15px;
-        background-color: #fff;
+        background-color: var(--surface-bg);
         padding: 15px 20px;
         border-radius: 4px;
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
@@ -30,7 +30,7 @@
 
             label {
                 font-size: 12px;
-                color: #666;
+                color: var(--text-secondary);
                 margin-bottom: 5px;
                 font-weight: 500;
             }
@@ -42,10 +42,12 @@
                 input {
                     width: 100%;
                     padding: 8px 12px;
-                    border: 1px solid #ddd;
+                    border: 1px solid var(--border-color);
                     border-radius: 4px;
                     font-size: 13px;
                     outline: none;
+                    background-color: transparent;
+                    color: var(--text-primary);
 
                     &:focus {
                         border-color: #3f51b5;
@@ -65,7 +67,7 @@
     }
 
     .table-container {
-        background-color: #fff;
+        background-color: var(--surface-bg);
         border-radius: 4px;
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
         overflow: hidden;
@@ -74,19 +76,19 @@
             width: 100%;
 
             th.mat-header-cell {
-                background-color: #fff;
-                color: #666;
+                background-color: var(--table-header-bg);
+                color: var(--table-header-text);
                 font-size: 12px;
                 font-weight: 600;
-                border-bottom: 1px solid #eee;
+                border-bottom: 1px solid var(--border-color);
                 padding: 15px 20px;
             }
 
             td.mat-cell {
                 padding: 12px 20px;
                 font-size: 13px;
-                color: #444;
-                border-bottom: 1px solid #f5f5f5;
+                color: var(--text-primary);
+                border-bottom: 1px solid var(--border-color);
 
                 &.mat-column-action {
                     white-space: nowrap;
@@ -98,7 +100,7 @@
 
                         fa-icon {
                             font-size: 14px;
-                            color: #555;
+                            color: var(--text-secondary);
                         }
 
                         &:hover fa-icon {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-monitoring-overview/event-monitoring-overview.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-monitoring-overview/event-monitoring-overview.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-monitoring-overview/event-monitoring-overview.scss	(working copy)
@@ -2,7 +2,7 @@
 
 .dashboard-container {
     padding: 24px;
-    background-color: #f4f6f8; // Modern light grey background
+    background-color: var(--app-bg); // Modern background
     height: 100%;
     overflow-y: auto;
     box-sizing: border-box;
@@ -19,14 +19,14 @@
         .page-title {
             font-size: 20px;
             font-weight: 600;
-            color: #1a1a1a;
+            color: var(--text-primary);
             margin: 0;
             font-family: 'Inter', 'Roboto', sans-serif;
         }
 
         // Chromeless Date Picker styling
         .date-picker-wrapper {
-            background: white;
+            background: var(--surface-bg);
             border-radius: 8px;
             padding: 0;
             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
@@ -61,7 +61,7 @@
         gap: 24px;
 
         .kpi-card {
-            background: white;
+            background: var(--surface-bg);
             border-radius: 12px;
             padding: 20px;
             display: flex;
@@ -93,13 +93,13 @@
                 .kpi-value {
                     font-size: 24px;
                     font-weight: 700;
-                    color: #2d3748;
+                    color: var(--text-primary);
                     line-height: 1.2;
                 }
 
                 .kpi-label {
                     font-size: 13px;
-                    color: #718096;
+                    color: var(--text-secondary);
                     font-weight: 500;
                 }
             }
@@ -108,18 +108,18 @@
 
     // Main Content Card
     .content-card {
-        background: white;
+        background: var(--surface-bg);
         border-radius: 16px;
         box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
         display: flex;
         flex-direction: column;
         flex: 1;
         overflow: hidden;
-        border: 1px solid #f0f0f0;
+        border: 1px solid var(--border-color);
 
         .toolbar-section {
             padding: 20px 24px;
-            border-bottom: 1px solid #f0f0f0;
+            border-bottom: 1px solid var(--border-color);
             display: flex;
             align-items: center;
             gap: 16px;
@@ -140,7 +140,7 @@
 
                     ::ng-deep .mat-mdc-text-field-wrapper {
                         height: 40px;
-                        background-color: #f8fafc; // Subtle background
+                        background-color: var(--app-bg); // Subtle background
                         border-radius: 8px;
                         padding-top: 0;
                         padding-bottom: 0;
@@ -159,8 +159,8 @@
                 }
 
                 .refresh-btn {
-                    border: 1px solid #e2e8f0;
-                    color: #64748b;
+                    border: 1px solid var(--border-color);
+                    color: var(--text-secondary);
                     width: 40px;
                     height: 40px;
                     border-radius: 8px;
@@ -193,26 +193,26 @@
                 width: 100%;
 
                 th.mat-mdc-header-cell {
-                    background: #f8fafc;
-                    color: #64748b;
+                    background: var(--table-header-bg);
+                    color: var(--table-header-text);
                     font-size: 12px;
                     text-transform: uppercase;
                     letter-spacing: 0.05em;
                     font-weight: 600;
                     padding: 0 24px;
                     height: 48px;
-                    border-bottom: 1px solid #e2e8f0;
+                    border-bottom: 1px solid var(--border-color);
                 }
 
                 td.mat-mdc-cell {
                     padding: 16px 24px;
                     font-size: 14px;
-                    color: #334155;
-                    border-bottom: 1px solid #f1f5f9;
+                    color: var(--text-primary);
+                    border-bottom: 1px solid var(--border-color);
 
                     &.fw-500 {
                         font-weight: 500;
-                        color: #1e293b;
+                        color: var(--text-primary);
                     }
 
                     .quantity-badge {
@@ -226,7 +226,7 @@
                 }
 
                 tr.mat-mdc-row:hover {
-                    background-color: #f8fafc; // Subtle hover
+                    background-color: var(--table-hover); // Subtle hover
                 }
             }
 
@@ -241,7 +241,7 @@
                 .empty-icon-circle {
                     width: 64px;
                     height: 64px;
-                    background: #f1f5f9;
+                    background: var(--app-bg);
                     border-radius: 50%;
                     display: flex;
                     align-items: center;
@@ -254,12 +254,12 @@
                 h3 {
                     font-size: 16px;
                     font-weight: 600;
-                    color: #1e293b;
+                    color: var(--text-primary);
                     margin: 0 0 8px 0;
                 }
 
                 p {
-                    color: #64748b;
+                    color: var(--text-secondary);
                     margin: 0;
                     font-size: 14px;
                 }
@@ -267,7 +267,7 @@
         }
 
         .dashboard-paginator {
-            border-top: 1px solid #e2e8f0;
+            border-top: 1px solid var(--border-color);
         }
     }
 }
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/initiative-alerts/initiative-alerts.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/initiative-alerts/initiative-alerts.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/initiative-alerts/initiative-alerts.scss	(working copy)
@@ -3,7 +3,7 @@
 }
 
 mat-expansion-panel {
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid var(--border-color);
     box-shadow: none !important;
     border-radius: 0 !important;
 
@@ -44,7 +44,7 @@
         flex-grow: 1;
         margin-right: 0;
         font-size: 13px;
-        color: #666;
+        color: var(--text-secondary);
 
         .description-text {
             flex: 1;
@@ -59,20 +59,20 @@
             .label {
                 margin-right: 12px;
                 font-size: 12px;
-                color: #333;
+                color: var(--text-primary);
             }
         }
     }
 }
 
 .panel-content {
-    background-color: #f5f5f5;
+    background-color: var(--surface-bg);
     padding: 0;
 
     .disabled-message {
         padding: 24px;
         text-align: center;
-        color: #666;
+        color: var(--text-secondary);
         font-size: 14px;
         font-style: italic;
     }
@@ -84,16 +84,16 @@
 
     th.mat-header-cell {
         font-size: 12px;
-        color: #666;
+        color: var(--table-header-text);
         font-weight: 500;
-        border-bottom: 1px solid #e0e0e0;
+        border-bottom: 1px solid var(--border-color);
         padding: 0 24px;
     }
 
     td.mat-cell {
         font-size: 13px;
-        color: #333;
-        border-bottom: 1px solid #e0e0e0;
+        color: var(--text-primary);
+        border-bottom: 1px solid var(--border-color);
         padding: 0 24px;
 
         &:first-child {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-analysis-slb-elaborate/log-analysis-slb-elaborate.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-analysis-slb-elaborate/log-analysis-slb-elaborate.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-analysis-slb-elaborate/log-analysis-slb-elaborate.scss	(working copy)
@@ -3,7 +3,7 @@
   flex-direction: column;
   gap: 16px;
   padding: 16px;
-  background-color: #f8f9fa;
+  background-color: var(--app-bg);
   height: calc(100vh - 64px); // Subtract header height if necessary, or just 100vh if under main shell
   height: 100%; // Assuming parent container manages height, otherwise 100vh
   overflow: hidden;
@@ -27,12 +27,12 @@
 // Common Card Styles
 mat-card {
   border-radius: 8px;
-  background: #fff;
+  background: var(--surface-bg);
   border: none;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
 
   &.appearance-outlined {
-    border: 1px solid #e0e0e0;
+    border: 1px solid var(--border-color);
     box-shadow: none !important;
   }
 }
@@ -64,14 +64,14 @@
 
     mat-card-subtitle {
       font-size: 14px;
-      color: #666;
+      color: var(--text-secondary);
       margin: 0;
 
       .subtitle-item {
         margin-right: 16px;
 
         strong {
-          color: #333;
+          color: var(--text-primary);
           font-weight: 500;
         }
       }
@@ -142,7 +142,7 @@
 
   .help-icon {
     font-size: 16px; // Slightly smaller
-    color: #757575;
+    color: var(--text-secondary);
 
     &:hover {
       color: #1976d2;
@@ -159,7 +159,7 @@
     justify-content: space-between;
     align-items: center;
     padding: 12px 16px;
-    border-bottom: 1px solid #f0f0f0;
+    border-bottom: 1px solid var(--border-color);
 
     mat-card-title {
       font-size: 16px;
@@ -217,26 +217,26 @@
     width: 100%;
 
     th.mat-header-cell {
-      background-color: #f8f9fa;
-      color: #5f6368;
+      background-color: var(--table-header-bg);
+      color: var(--table-header-text);
       font-weight: 600;
       font-size: 13px;
       text-transform: uppercase;
       padding: 0 16px;
       height: 48px;
-      border-bottom: 1px solid #e0e0e0;
+      border-bottom: 1px solid var(--border-color);
     }
 
     td.mat-cell {
       padding: 0 16px;
       font-size: 14px;
-      color: #3c4043;
+      color: var(--text-primary);
       height: 48px;
-      border-bottom: 1px solid #f1f3f4;
+      border-bottom: 1px solid var(--border-color);
     }
 
     tr.mat-row:hover {
-      background-color: #f8f9fa;
+      background-color: var(--table-hover);
     }
 
     // Status Badges
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/network/network.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/network/network.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/network/network.scss	(working copy)
@@ -25,3 +25,15 @@
   justify-content: center;
   margin-top: 20px;
 }
+
+/* Dark Theme Overrides */
+:host-context(.dark-theme) {
+  .page-card-1 {
+    background-color: var(--surface-bg);
+    color: var(--text-primary);
+
+    mat-card-header {
+      color: var(--text-primary);
+    }
+  }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/notification-channels/notification-channels.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/notification-channels/notification-channels.scss	(revision 2831)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/notification-channels/notification-channels.scss	(working copy)
@@ -23,7 +23,7 @@
     .form-label {
         font-size: 13px;
         font-weight: 500;
-        color: #444; // Slightly darker for better readability
+        color: var(--text-secondary); // Slightly darker for better readability
         margin-bottom: 2px;
     }
 
@@ -69,7 +69,9 @@
     justify-content: space-between;
     align-items: center;
     padding: 12px 24px; // Slight reduction
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--border-color);
+    background-color: var(--dialog-bg);
+    color: var(--text-primary);
 
     h2 {
         margin: 0;
@@ -99,9 +101,10 @@
 // Dialog Actions
 mat-dialog-actions {
     padding: 12px 24px !important;
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--border-color);
     justify-content: flex-end;
     margin-bottom: 0;
+    background-color: var(--dialog-bg);
 }
 
 
@@ -236,27 +239,27 @@
     width: 100%;
 
     th.mat-header-cell {
-        background-color: #f8f9fa;
-        color: #5f6368;
+        background-color: var(--table-header-bg);
+        color: var(--table-header-text);
         font-weight: 600;
         font-size: 13px;
         text-transform: uppercase;
         padding: 0 16px;
         height: 48px;
-        border-bottom: 1px solid #e0e0e0;
+        border-bottom: 1px solid var(--border-color);
     }
 
     td.mat-cell {
         padding: 0 16px;
         font-size: 14px;
-        color: #3c4043;
+        color: var(--text-primary);
         height: 48px;
-        border-bottom: 1px solid #f1f3f4;
+        border-bottom: 1px solid var(--border-color);
     }
 
     tr.mat-row:hover {
-        background-color: #f8f9fa;
-        color: #1967d2;
+        background-color: var(--table-hover);
+        color: var(--primary-color);
     }
 
     .row-link {
@@ -345,6 +348,113 @@
 
         span {
             font-size: 14px;
+        }
+    }
+}
+
+/* Dark Theme Overrides */
+:host-context(.dark-theme) {
+    .page-container {
+        color: var(--text-primary);
+    }
+
+    mat-card.table-card {
+        background-color: var(--surface-bg);
+        border: 1px solid var(--border-color);
+
+        mat-card-header {
+            border-bottom: 1px solid var(--border-color);
+
+            mat-card-title {
+                color: var(--text-primary);
+            }
+
+            .header-actions button {
+                color: var(--text-primary);
+
+                fa-icon {
+                    color: var(--text-secondary);
+                }
+            }
+        }
+    }
+
+    .form-field-wrapper .form-label {
+        color: var(--text-secondary);
+    }
+
+    .settings-container {
+        .section-header {
+            border-bottom: 1px solid var(--border-color);
+
+            h3 {
+                color: var(--text-secondary);
+            }
+        }
+
+        .section-sub-header h4 {
+            color: var(--text-primary);
         }
     }
+
+    // Dialog Overrides
+    .dialog-header {
+        background-color: var(--surface-bg);
+        border-bottom: 1px solid var(--border-color);
+        color: var(--text-primary);
+
+        button {
+            color: var(--text-secondary);
+
+            &:hover {
+                color: var(--text-primary);
+            }
+        }
+    }
+
+    mat-dialog-content {
+        background-color: var(--surface-bg); // Ensure dialog content matches
+    }
+
+    mat-dialog-actions {
+        background-color: var(--surface-bg);
+        border-top: 1px solid var(--border-color);
+    }
+
+    table.modern-table {
+        th.mat-header-cell {
+            background-color: var(--panel-bg);
+            color: var(--text-secondary);
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        td.mat-cell {
+            color: var(--text-primary);
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        tr.mat-row:hover {
+            background-color: var(--hover-bg);
+        }
+
+        .row-link {
+            color: #64b5f6;
+        }
+
+        .secondary-text {
+            color: var(--text-secondary);
+        }
+
+        .row-action button fa-icon {
+            color: var(--text-secondary);
+
+            &:hover {
+                color: #64b5f6;
+            }
+        }
+
+        .no-data-content {
+            color: var(--text-secondary);
+        }
+    }
 }
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/notification-settings/notification-settings.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/notification-settings/notification-settings.scss	(revision 2831)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/notification-settings/notification-settings.scss	(working copy)
@@ -102,4 +102,24 @@
   display: flex;
   justify-content: flex-end;
   margin-top: 16px; // Reduced margin
+}
+
+/* Dark Theme Overrides */
+:host-context(.dark-theme) {
+  mat-card.table-card {
+    background-color: var(--surface-bg);
+    border: 1px solid var(--border-color);
+
+    mat-card-content {
+      color: var(--text-primary);
+    }
+  }
+
+  .form-field-wrapper .form-label {
+    color: var(--text-secondary);
+  }
+
+  .section-header h3 {
+    color: var(--text-primary);
+  }
 }
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/operation-logs/operation-logs.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/operation-logs/operation-logs.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/operation-logs/operation-logs.scss	(working copy)
@@ -91,4 +91,53 @@
 
 mat-paginator {
   border-top: 1px solid #dadce0;
+}
+
+/* Dark Theme Overrides */
+:host-context(.dark-theme) {
+  .admin-card {
+    background-color: var(--surface-bg);
+    border: 1px solid var(--border-color);
+
+    mat-card-header {
+      background-color: var(--surface-bg);
+      border-bottom: 1px solid var(--border-color);
+
+      mat-card-title {
+        color: var(--text-primary);
+      }
+
+      .header-actions button[color="warn"] {
+        background-color: transparent !important;
+        color: #ef9a9a !important;
+        border: 1px solid #ef9a9a !important;
+      }
+    }
+  }
+
+  .table-container {
+    .details-table {
+      tr.mat-mdc-row:hover {
+        background-color: var(--hover-bg);
+      }
+
+      .row-action fa-icon {
+        color: var(--text-secondary);
+
+        &.delete-icon:hover {
+          color: #ef9a9a;
+        }
+      }
+    }
+
+    .filter-row {
+      color: var(--text-primary);
+    }
+  }
+
+  mat-paginator {
+    background-color: var(--surface-bg);
+    color: var(--text-secondary);
+    border-top: 1px solid var(--border-color);
+  }
 }
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.scss	(working copy)
@@ -1,6 +1,6 @@
 .device-details-container {
   padding: 8px;
-  background-color: #fafafa;
+  background-color: var(--app-bg);
   height: 100%;
   overflow: hidden;
   box-sizing: border-box;
@@ -14,11 +14,9 @@
     grid-template-rows: auto auto;
     align-items: center;
     padding: 0 4px;
-    /* Minimal vertical padding */
     gap: 0px;
-    /* Minimal gap */
     margin-bottom: 4px;
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid var(--border-color);
 
     .back-link {
       grid-column: 1;
@@ -27,13 +25,12 @@
       display: flex;
       align-items: center;
       gap: 6px;
-      color: #757575;
+      color: var(--text-secondary);
       text-decoration: none;
       font-size: 14px;
       font-weight: 500;
       cursor: pointer;
       height: 32px;
-      /* Fixed height for consistency */
 
       &:hover {
         color: #1976d2;
@@ -47,20 +44,18 @@
       display: flex;
       align-items: center;
       height: 32px;
-      /* Match back link height */
 
       h1 {
         font-size: 15px;
-        /* Slightly reduced */
         font-weight: 500;
         margin: 0;
-        color: #333;
+        color: var(--text-primary);
         white-space: nowrap;
       }
 
       .device-ip {
         font-size: 13px;
-        color: #757575;
+        color: var(--text-secondary);
         font-weight: 400;
         margin-left: 4px;
       }
@@ -71,26 +66,23 @@
       grid-row: 2;
       justify-self: end;
       margin-bottom: 4px;
-      /* Slight buffer from bottom border */
 
       .filter-link {
         display: flex;
         align-items: center;
         gap: 6px;
         padding: 2px 8px;
-        /* Compact padding */
-        background-color: white;
-        border: 1px solid #e0e0e0;
+        background-color: var(--surface-bg);
+        border: 1px solid var(--border-color);
         border-radius: 4px;
-        color: #555;
+        color: var(--text-primary);
         font-size: 11px;
         cursor: pointer;
         text-decoration: none;
         height: 24px;
-        /* Fixed compact height */
 
         &:hover {
-          background-color: #f5f5f5;
+          background-color: var(--hover-bg);
           color: #1976d2;
         }
       }
@@ -100,7 +92,7 @@
   .details-content {
     flex: 1;
     overflow-y: auto;
-    padding-right: 4px; // Avoid scrollbar overlap
+    padding-right: 4px;
   }
 }
 
@@ -110,8 +102,8 @@
   ::ng-deep {
     .mat-mdc-tab-header {
       --mdc-tab-indicator-active-indicator-height: 2px;
-      --mat-tab-header-pagination-icon-color: #000;
-      height: 36px; // Reduced height
+      --mat-tab-header-pagination-icon-color: var(--text-primary);
+      height: 36px;
     }
 
     .mdc-tab-indicator__content--underline {
@@ -119,8 +111,8 @@
     }
 
     .mdc-tab {
-      height: 36px !important; // Force height
-      min-height: 36px !important; // Force min-height
+      height: 36px !important;
+      min-height: 36px !important;
       padding: 0 16px !important;
 
       .mdc-tab__text-label {
@@ -128,7 +120,6 @@
       }
     }
 
-    // Fallback for older Angular Material versions if needed
     .mat-tab-header {
       height: 36px !important;
     }
@@ -143,19 +134,19 @@
 
 .charts-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); // Slightly wider min-width
+  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
   gap: 8px;
   padding: 8px 0;
 }
 
 .chart-card {
-  background: white;
+  background: var(--surface-bg);
   border-radius: 8px;
-  border: 1px solid #e0e0e0;
+  border: 1px solid var(--border-color);
   padding: 12px;
   display: flex;
   flex-direction: column;
-  height: 260px; // Compact height
+  height: 260px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
 
   .chart-header {
@@ -167,15 +158,15 @@
     h3 {
       font-size: 14px;
       font-weight: 600;
-      color: #424242;
+      color: var(--text-primary);
       margin: 0;
     }
 
     .unit {
       font-size: 11px;
-      color: #9e9e9e;
+      color: var(--text-secondary);
       font-weight: 500;
-      background: #f5f5f5;
+      background: var(--app-bg);
       padding: 2px 6px;
       border-radius: 4px;
     }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.ts	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.ts	(working copy)
@@ -59,6 +59,10 @@
         private _openSearch: OpenSearch,
         private _utils: UtilsService,
     ) {
+    }
+
+    private getTextColor(): string {
+        return getComputedStyle(document.body).getPropertyValue('--text-secondary').trim() || '#999';
     }
 
     ngOnInit() {
@@ -283,7 +287,7 @@
                 axisLine: { show: false },
                 axisTick: { show: false },
                 splitLine: { show: false },
-                axisLabel: { color: '#999', fontSize: 11 }
+                axisLabel: { color: this.getTextColor(), fontSize: 11 }
             },
             yAxis: {
                 type: 'value',
@@ -293,7 +297,7 @@
                         color: '#f0f0f0'
                     }
                 },
-                axisLabel: { color: '#999', fontSize: 11 }
+                axisLabel: { color: this.getTextColor(), fontSize: 11 }
             },
             series: [
                 {
@@ -381,7 +385,7 @@
                 itemWidth: 10,
                 itemHeight: 10,
                 icon: 'circle',
-                textStyle: { fontSize: 11, color: '#666' }
+                textStyle: { fontSize: 11, color: this.getTextColor() }
             },
             xAxis: {
                 type: 'time',
@@ -389,7 +393,7 @@
                 axisLine: { show: false },
                 axisTick: { show: false },
                 splitLine: { show: false },
-                axisLabel: { color: '#999', fontSize: 11 }
+                axisLabel: { color: this.getTextColor(), fontSize: 11 }
             },
             yAxis: {
                 type: 'value',
@@ -399,7 +403,7 @@
                         color: '#f0f0f0'
                     }
                 },
-                axisLabel: { color: '#999', fontSize: 11 }
+                axisLabel: { color: this.getTextColor(), fontSize: 11 }
             },
             series: series
         };
@@ -507,7 +511,7 @@
         this._openSearch.queryOSLogs(payload).pipe(take(1)).subscribe({
             next: (result: any) => {
                 let data = result?.aggregations?.visits_over_time.buckets;
-                if (data && data.length > 0) {
+                if (data && data.length > 0 && data.some((d: any) => d.doc_count > 0)) {
                     const data_formatted: any = data.map((d: any) => [d.key, d.doc_count]);
                     this.vSVisitsChartOptions = this._chartOptions.plotSingleLineChartOptions({
                         label: 'Number of VS Visits',
@@ -583,7 +587,7 @@
         this._openSearch.queryOSLogs(payload).pipe(take(1)).subscribe({
             next: (result: any) => {
                 let data = result?.aggregations?.response_time_over_time.buckets;
-                if (data && data.length > 0) {
+                if (data && data.length > 0 && data.some((d: any) => d.doc_count > 0)) {
                     const data_formatted: any = this._utils.formatResponseTimePercentiles(data, 'response_time_percentiles')
                     this.vSRespTimeChartOptions = this._chartOptions.plotTripleLineChartOptions({
                         label: ['P50 Response Time', 'P95 Response Time', 'P99 Response Time'],
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-devices/resource-monitoring-devices.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-devices/resource-monitoring-devices.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-devices/resource-monitoring-devices.scss	(working copy)
@@ -1,6 +1,6 @@
 .devices-container {
   padding: 12px;
-  background-color: #fafafa;
+  background-color: var(--app-bg);
   height: 100%;
   overflow: hidden;
   box-sizing: border-box;
@@ -12,8 +12,8 @@
   .table-container {
     border-radius: 8px;
     overflow: hidden;
-    border: 1px solid #e0e0e0;
-    background: white;
+    border: 1px solid var(--border-color);
+    background: var(--surface-bg);
     flex: 1;
     display: flex;
     flex-direction: column;
@@ -29,30 +29,30 @@
       width: 100%;
 
       th.mat-mdc-header-cell {
-        background-color: #f5f5f5;
-        color: #424242;
+        background-color: var(--table-header-bg);
+        color: var(--table-header-text);
         font-weight: 600;
         font-size: 13px;
         padding: 0 16px;
-        border-bottom: 1px solid #e0e0e0;
+        border-bottom: 1px solid var(--border-color);
       }
 
       td.mat-mdc-cell {
         padding: 12px 16px;
         font-size: 13px;
-        color: #333;
-        border-bottom: 1px solid #f0f0f0;
+        color: var(--text-primary);
+        border-bottom: 1px solid var(--border-color);
 
         &.no-data-cell {
           text-align: center;
           padding: 48px;
-          color: #757575;
-          background-color: white;
+          color: var(--text-secondary);
+          background-color: var(--surface-bg);
         }
       }
 
       tr.mat-mdc-row:hover {
-        background-color: #f9f9f9;
+        background-color: var(--table-hover);
       }
 
       // Links
@@ -72,7 +72,7 @@
 
   mat-paginator {
     background: transparent;
-    border-top: 1px solid #e0e0e0;
+    border-top: 1px solid var(--border-color);
   }
 
   // Stats & Charts (Preserved)
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-devices/resource-monitoring-devices.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-devices/resource-monitoring-devices.ts	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-devices/resource-monitoring-devices.ts	(working copy)
@@ -165,6 +165,7 @@
 @Component({
   selector: 'show-device-info',
   templateUrl: './show-device-info.html',
+  styleUrl: './show-device-info.scss',
   imports: [SharedModule],
 })
 export class ShowDeviceInfoDialog implements OnInit {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-devices/show-device-info.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-devices/show-device-info.scss	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-devices/show-device-info.scss	(working copy)
@@ -0,0 +1,49 @@
+h2[mat-dialog-title] {
+    background-color: var(--surface-bg);
+    color: var(--text-primary);
+    margin: 0;
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+mat-dialog-content {
+    background-color: var(--surface-bg);
+    padding: 0 !important;
+    max-height: 65vh;
+}
+
+table {
+    width: 100%;
+    background-color: var(--surface-bg);
+
+    tr.mat-mdc-row {
+        background-color: var(--surface-bg);
+
+        &:hover {
+            background-color: var(--table-hover);
+        }
+    }
+
+    td.mat-mdc-cell {
+        color: var(--text-primary);
+        border-bottom: 1px solid var(--border-color);
+        padding: 12px 24px;
+
+        &:first-child {
+            color: var(--text-secondary);
+            font-weight: 500;
+            width: 40%;
+        }
+    }
+}
+
+mat-dialog-actions {
+    background-color: var(--surface-bg);
+    border-top: 1px solid var(--border-color);
+    padding: 16px 24px;
+    margin: 0;
+
+    button {
+        color: var(--text-primary);
+    }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb-details/resource-monitoring-llb-details.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb-details/resource-monitoring-llb-details.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb-details/resource-monitoring-llb-details.scss	(working copy)
@@ -19,7 +19,7 @@
   gap: 0px;
   /* Minimal gap */
   margin-bottom: 4px;
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid var(--border-color);
 
   .back-link {
     grid-column: 1;
@@ -28,7 +28,7 @@
     display: flex;
     align-items: center;
     gap: 6px;
-    color: #757575;
+    color: var(--text-secondary);
     text-decoration: none;
     font-size: 14px;
     font-weight: 500;
@@ -55,13 +55,13 @@
       /* Slightly reduced */
       font-weight: 500;
       margin: 0;
-      color: #333;
+      color: var(--text-primary);
       white-space: nowrap;
     }
 
     .device-ip {
       font-size: 13px;
-      color: #757575;
+      color: var(--text-secondary);
       font-weight: 400;
       margin-left: 4px;
     }
@@ -79,11 +79,12 @@
       align-items: center;
       gap: 6px;
       padding: 2px 8px;
+      padding: 2px 8px;
       /* Compact padding */
-      background-color: white;
-      border: 1px solid #e0e0e0;
+      background-color: var(--surface-bg);
+      border: 1px solid var(--border-color);
       border-radius: 4px;
-      color: #555;
+      color: var(--text-primary);
       font-size: 11px;
       cursor: pointer;
       text-decoration: none;
@@ -91,7 +92,7 @@
       /* Fixed compact height */
 
       &:hover {
-        background-color: #f5f5f5;
+        background-color: var(--hover-bg);
         color: #1976d2;
       }
     }
@@ -265,14 +266,14 @@
 }
 
 .chart-card {
-  background: white;
+  background: var(--surface-bg);
   border-radius: 8px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   padding: 10px;
   display: flex;
   flex-direction: column;
   height: 350px;
-  border: 1px solid #e0e0e0;
+  border: 1px solid var(--border-color);
 
   .chart-header {
     margin-bottom: 5px;
@@ -283,7 +284,7 @@
       margin: 0;
       font-size: 14px;
       font-weight: 600;
-      color: #333;
+      color: var(--text-primary);
     }
   }
 
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb/resource-monitoring-llb.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb/resource-monitoring-llb.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb/resource-monitoring-llb.scss	(working copy)
@@ -1,6 +1,6 @@
 .devices-container {
     padding: 12px;
-    background-color: #fafafa;
+    background-color: var(--app-bg);
     height: 100%;
     overflow: hidden;
     box-sizing: border-box;
@@ -12,8 +12,8 @@
     .table-container {
         border-radius: 8px;
         overflow: hidden;
-        border: 1px solid #e0e0e0;
-        background: white;
+        border: 1px solid var(--border-color);
+        background: var(--surface-bg);
         flex: 1;
         display: flex;
         flex-direction: column;
@@ -29,30 +29,30 @@
             width: 100%;
 
             th.mat-mdc-header-cell {
-                background-color: #f5f5f5;
-                color: #424242;
+                background-color: var(--table-header-bg);
+                color: var(--table-header-text);
                 font-weight: 600;
                 font-size: 13px;
                 padding: 0 16px;
-                border-bottom: 1px solid #e0e0e0;
+                border-bottom: 1px solid var(--border-color);
             }
 
             td.mat-mdc-cell {
                 padding: 12px 16px;
                 font-size: 13px;
-                color: #333;
-                border-bottom: 1px solid #f0f0f0;
+                color: var(--text-primary);
+                border-bottom: 1px solid var(--border-color);
 
                 &.no-data-cell {
                     text-align: center;
                     padding: 48px;
-                    color: #757575;
-                    background-color: white;
+                    color: var(--text-secondary);
+                    background-color: var(--surface-bg);
                 }
             }
 
             tr.mat-mdc-row:hover {
-                background-color: #f9f9f9;
+                background-color: var(--table-hover);
             }
 
             // Links
@@ -80,7 +80,7 @@
 
     mat-paginator {
         background: transparent;
-        border-top: 1px solid #e0e0e0;
+        border-top: 1px solid var(--border-color);
     }
 }
 
@@ -93,7 +93,7 @@
         font-size: 12px;
 
         span:first-child {
-            color: #757575;
+            color: var(--text-secondary);
             margin-right: 4px;
         }
     }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real-details/resource-monitoring-slb-real-details.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real-details/resource-monitoring-slb-real-details.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real-details/resource-monitoring-slb-real-details.scss	(working copy)
@@ -19,7 +19,7 @@
   gap: 0px;
   /* Minimal gap */
   margin-bottom: 4px;
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid var(--border-color);
 
   .back-link {
     grid-column: 1;
@@ -28,7 +28,7 @@
     display: flex;
     align-items: center;
     gap: 6px;
-    color: #757575;
+    color: var(--text-secondary);
     text-decoration: none;
     font-size: 14px;
     font-weight: 500;
@@ -55,13 +55,13 @@
       /* Slightly reduced */
       font-weight: 500;
       margin: 0;
-      color: #333;
+      color: var(--text-primary);
       white-space: nowrap;
     }
 
     .device-ip {
       font-size: 13px;
-      color: #757575;
+      color: var(--text-secondary);
       font-weight: 400;
       margin-left: 4px;
     }
@@ -79,11 +79,12 @@
       align-items: center;
       gap: 6px;
       padding: 2px 8px;
+      padding: 2px 8px;
       /* Compact padding */
-      background-color: white;
-      border: 1px solid #e0e0e0;
+      background-color: var(--surface-bg);
+      border: 1px solid var(--border-color);
       border-radius: 4px;
-      color: #555;
+      color: var(--text-primary);
       font-size: 11px;
       cursor: pointer;
       text-decoration: none;
@@ -91,7 +92,7 @@
       /* Fixed compact height */
 
       &:hover {
-        background-color: #f5f5f5;
+        background-color: var(--hover-bg);
         color: #1976d2;
       }
     }
@@ -265,14 +266,14 @@
 }
 
 .chart-card {
-  background: white;
+  background: var(--surface-bg);
   border-radius: 8px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   padding: 10px;
   display: flex;
   flex-direction: column;
   height: 350px;
-  border: 1px solid #e0e0e0;
+  border: 1px solid var(--border-color);
 
   .chart-header {
     margin-bottom: 5px;
@@ -283,7 +284,7 @@
       margin: 0;
       font-size: 14px;
       font-weight: 600;
-      color: #333;
+      color: var(--text-primary);
     }
   }
 
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real/resource-monitoring-slb-real.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real/resource-monitoring-slb-real.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real/resource-monitoring-slb-real.scss	(working copy)
@@ -1,6 +1,6 @@
 .devices-container {
     padding: 12px;
-    background-color: #fafafa;
+    background-color: var(--app-bg);
     height: 100%;
     overflow: hidden;
     box-sizing: border-box;
@@ -12,8 +12,8 @@
     .table-container {
         border-radius: 8px;
         overflow: hidden;
-        border: 1px solid #e0e0e0;
-        background: white;
+        border: 1px solid var(--border-color);
+        background: var(--surface-bg);
         flex: 1;
         display: flex;
         flex-direction: column;
@@ -29,30 +29,30 @@
             width: 100%;
 
             th.mat-mdc-header-cell {
-                background-color: #f5f5f5;
-                color: #424242;
+                background-color: var(--table-header-bg);
+                color: var(--table-header-text);
                 font-weight: 600;
                 font-size: 13px;
                 padding: 0 16px;
-                border-bottom: 1px solid #e0e0e0;
+                border-bottom: 1px solid var(--border-color);
             }
 
             td.mat-mdc-cell {
                 padding: 12px 16px;
                 font-size: 13px;
-                color: #333;
-                border-bottom: 1px solid #f0f0f0;
+                color: var(--text-primary);
+                border-bottom: 1px solid var(--border-color);
 
                 &.no-data-cell {
                     text-align: center;
                     padding: 48px;
-                    color: #757575;
-                    background-color: white;
+                    color: var(--text-secondary);
+                    background-color: var(--surface-bg);
                 }
             }
 
             tr.mat-mdc-row:hover {
-                background-color: #f9f9f9;
+                background-color: var(--table-hover);
             }
 
             // Links
@@ -80,7 +80,7 @@
 
     mat-paginator {
         background: transparent;
-        border-top: 1px solid #e0e0e0;
+        border-top: 1px solid var(--border-color);
     }
 }
 
@@ -93,7 +93,7 @@
         font-size: 12px;
 
         span:first-child {
-            color: #757575;
+            color: var(--text-secondary);
             margin-right: 4px;
         }
     }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.scss	(working copy)
@@ -19,7 +19,7 @@
   gap: 0px;
   /* Minimal gap */
   margin-bottom: 4px;
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid var(--border-color);
 
   .back-link {
     grid-column: 1;
@@ -28,7 +28,7 @@
     display: flex;
     align-items: center;
     gap: 6px;
-    color: #757575;
+    color: var(--text-secondary);
     text-decoration: none;
     font-size: 14px;
     font-weight: 500;
@@ -55,13 +55,13 @@
       /* Slightly reduced */
       font-weight: 500;
       margin: 0;
-      color: #333;
+      color: var(--text-primary);
       white-space: nowrap;
     }
 
     .device-ip {
       font-size: 13px;
-      color: #757575;
+      color: var(--text-secondary);
       font-weight: 400;
       margin-left: 4px;
     }
@@ -79,11 +79,12 @@
       align-items: center;
       gap: 6px;
       padding: 2px 8px;
+      padding: 2px 8px;
       /* Compact padding */
-      background-color: white;
-      border: 1px solid #e0e0e0;
+      background-color: var(--surface-bg);
+      border: 1px solid var(--border-color);
       border-radius: 4px;
-      color: #555;
+      color: var(--text-primary);
       font-size: 11px;
       cursor: pointer;
       text-decoration: none;
@@ -91,7 +92,7 @@
       /* Fixed compact height */
 
       &:hover {
-        background-color: #f5f5f5;
+        background-color: var(--hover-bg);
         color: #1976d2;
       }
     }
@@ -260,14 +261,14 @@
 }
 
 .chart-card {
-  background: white;
+  background: var(--surface-bg);
   border-radius: 8px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   padding: 10px;
   display: flex;
   flex-direction: column;
   height: 350px;
-  border: 1px solid #e0e0e0;
+  border: 1px solid var(--border-color);
 
   .chart-header {
     margin-bottom: 5px;
@@ -278,7 +279,7 @@
       margin: 0;
       font-size: 14px;
       font-weight: 600;
-      color: #333;
+      color: var(--text-primary);
     }
   }
 
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.ts	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.ts	(working copy)
@@ -256,7 +256,11 @@
                         name: `Status Code - ${d.key}`
                     })
                 })
-                this.httpStatusRatioChartOptions = this._chartOptions.distributionChartOptions('HTTP Status Codes', data_formatted);
+                if (data_formatted.length > 0) {
+                    this.httpStatusRatioChartOptions = this._chartOptions.distributionChartOptions('HTTP Status Codes', data_formatted);
+                } else {
+                    this.httpStatusRatioChartOptions = this._chartOptions.getNoDataChartOptions();
+                }
             },
             error: (error: any) => {
                 console.log(error);
@@ -310,12 +314,16 @@
         this._openSearch.queryOSLogs(payload).pipe(take(1)).subscribe({
             next: (result: any) => {
                 let data = result?.aggregations?.visits_over_time.buckets;
-                const data_formatted: any = data.map((d: any) => [d.key, d.doc_count]);
-                console.log(data_formatted);
-                this.vSVisitsChartOptions = this._chartOptions.plotSingleLineChartOptions({
-                    label: 'Number of VS Visits',
-                    unit: 'Percentage'
-                }, data_formatted);
+                if (data && data.length > 0 && data.some((d: any) => d.doc_count > 0)) {
+                    const data_formatted: any = data.map((d: any) => [d.key, d.doc_count]);
+                    console.log(data_formatted);
+                    this.vSVisitsChartOptions = this._chartOptions.plotSingleLineChartOptions({
+                        label: 'Number of VS Visits',
+                        unit: 'Percentage'
+                    }, data_formatted);
+                } else {
+                    this.vSVisitsChartOptions = this._chartOptions.getNoDataChartOptions();
+                }
             },
             error: (error: any) => {
                 console.log(error);
@@ -381,12 +389,16 @@
         this._openSearch.queryOSLogs(payload).pipe(take(1)).subscribe({
             next: (result: any) => {
                 let data = result?.aggregations?.duration_over_time.buckets;
-                const data_formatted: any = this._utils.formatResponseTimePercentiles(data, 'duration_percentiles')
-                console.log(data_formatted);
-                this.vSRespTimeChartOptions = this._chartOptions.plotTripleLineChartOptions({
-                    label: ['P50 Response Time', 'P95 Response Time', 'P99 Response Time'],
-                    unit: 'Milliseconds (ms)'
-                }, [data_formatted?.p50_formatted, data_formatted?.p95_formatted, data_formatted?.p99_formatted]);
+                if (data && data.length > 0 && data.some((d: any) => d.doc_count > 0)) {
+                    const data_formatted: any = this._utils.formatResponseTimePercentiles(data, 'duration_percentiles')
+                    console.log(data_formatted);
+                    this.vSRespTimeChartOptions = this._chartOptions.plotTripleLineChartOptions({
+                        label: ['P50 Response Time', 'P95 Response Time', 'P99 Response Time'],
+                        unit: 'Milliseconds (ms)'
+                    }, [data_formatted?.p50_formatted, data_formatted?.p95_formatted, data_formatted?.p99_formatted]);
+                } else {
+                    this.vSRespTimeChartOptions = this._chartOptions.getNoDataChartOptions();
+                }
             },
             error: (error: any) => {
                 console.log(error);
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual/resource-monitoring-slb-virtual.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual/resource-monitoring-slb-virtual.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual/resource-monitoring-slb-virtual.scss	(working copy)
@@ -1,6 +1,6 @@
 .devices-container {
     padding: 12px;
-    background-color: #fafafa;
+    background-color: var(--app-bg);
     height: 100%;
     overflow: hidden;
     box-sizing: border-box;
@@ -12,8 +12,8 @@
     .table-container {
         border-radius: 8px;
         overflow: hidden;
-        border: 1px solid #e0e0e0;
-        background: white;
+        border: 1px solid var(--border-color);
+        background: var(--surface-bg);
         flex: 1;
         display: flex;
         flex-direction: column;
@@ -29,30 +29,30 @@
             width: 100%;
 
             th.mat-mdc-header-cell {
-                background-color: #f5f5f5;
-                color: #424242;
+                background-color: var(--table-header-bg);
+                color: var(--table-header-text);
                 font-weight: 600;
                 font-size: 13px;
                 padding: 0 16px;
-                border-bottom: 1px solid #e0e0e0;
+                border-bottom: 1px solid var(--border-color);
             }
 
             td.mat-mdc-cell {
                 padding: 12px 16px;
                 font-size: 13px;
-                color: #333;
-                border-bottom: 1px solid #f0f0f0;
+                color: var(--text-primary);
+                border-bottom: 1px solid var(--border-color);
 
                 &.no-data-cell {
                     text-align: center;
                     padding: 48px;
-                    color: #757575;
-                    background-color: white;
+                    color: var(--text-secondary);
+                    background-color: var(--surface-bg);
                 }
             }
 
             tr.mat-mdc-row:hover {
-                background-color: #f9f9f9;
+                background-color: var(--table-hover);
             }
 
             // Links
@@ -80,7 +80,7 @@
 
     mat-paginator {
         background: transparent;
-        border-top: 1px solid #e0e0e0;
+        border-top: 1px solid var(--border-color);
     }
 }
 
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn-details/resource-monitoring-ssl-vpn-details.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn-details/resource-monitoring-ssl-vpn-details.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn-details/resource-monitoring-ssl-vpn-details.scss	(working copy)
@@ -1,6 +1,6 @@
 .ssl-vpn-details-container {
   padding: 8px;
-  background-color: #fafafa;
+  background-color: var(--app-bg);
   height: 100%;
   overflow: hidden;
   box-sizing: border-box;
@@ -18,7 +18,7 @@
     gap: 0px;
     /* Minimal gap */
     margin-bottom: 4px;
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid var(--border-color);
 
     .back-link {
       grid-column: 1;
@@ -27,7 +27,7 @@
       display: flex;
       align-items: center;
       gap: 6px;
-      color: #757575;
+      color: var(--text-secondary);
       text-decoration: none;
       font-size: 14px;
       font-weight: 500;
@@ -54,13 +54,13 @@
         /* Slightly reduced */
         font-weight: 500;
         margin: 0;
-        color: #333;
+        color: var(--text-primary);
         white-space: nowrap;
       }
 
       .device-ip {
         font-size: 13px;
-        color: #757575;
+        color: var(--text-secondary);
         font-weight: 400;
         margin-left: 4px;
       }
@@ -79,10 +79,10 @@
         gap: 6px;
         padding: 2px 8px;
         /* Compact padding */
-        background-color: white;
-        border: 1px solid #e0e0e0;
+        background-color: var(--surface-bg);
+        border: 1px solid var(--border-color);
         border-radius: 4px;
-        color: #555;
+        color: var(--text-primary);
         font-size: 11px;
         cursor: pointer;
         text-decoration: none;
@@ -90,7 +90,7 @@
         /* Fixed compact height */
 
         &:hover {
-          background-color: #f5f5f5;
+          background-color: var(--hover-bg);
           color: #1976d2;
         }
       }
@@ -110,7 +110,7 @@
   ::ng-deep {
     .mat-mdc-tab-header {
       --mdc-tab-indicator-active-indicator-height: 2px;
-      --mat-tab-header-pagination-icon-color: #000;
+      --mat-tab-header-pagination-icon-color: var(--text-primary);
       height: 36px; // Reduced height
     }
 
@@ -149,9 +149,9 @@
 }
 
 .chart-card {
-  background: white;
+  background: var(--surface-bg);
   border-radius: 8px;
-  border: 1px solid #e0e0e0;
+  border: 1px solid var(--border-color);
   padding: 12px;
   display: flex;
   flex-direction: column;
@@ -167,15 +167,15 @@
     h3 {
       font-size: 14px;
       font-weight: 600;
-      color: #424242;
+      color: var(--text-primary);
       margin: 0;
     }
 
     .unit {
       font-size: 11px;
-      color: #9e9e9e;
+      color: var(--text-secondary);
       font-weight: 500;
-      background: #f5f5f5;
+      background: var(--app-bg);
       padding: 2px 6px;
       border-radius: 4px;
     }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn-details/resource-monitoring-ssl-vpn-details.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn-details/resource-monitoring-ssl-vpn-details.ts	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn-details/resource-monitoring-ssl-vpn-details.ts	(working copy)
@@ -50,6 +50,10 @@
   ) {
   }
 
+  private getTextColor(): string {
+    return getComputedStyle(document.body).getPropertyValue('--text-secondary').trim() || '#999';
+  }
+
   ngOnInit() {
     this.deviceIp = this._route.snapshot.paramMap.get('deviceIp') || '';
     this.serviceName = this._route.snapshot.paramMap.get('serviceName') || '';
@@ -393,7 +397,7 @@
         axisLine: { show: false },
         axisTick: { show: false },
         splitLine: { show: false },
-        axisLabel: { color: '#999', fontSize: 11 }
+        axisLabel: { color: this.getTextColor(), fontSize: 11 }
       },
       yAxis: {
         type: 'value',
@@ -403,7 +407,7 @@
             color: '#f0f0f0'
           }
         },
-        axisLabel: { color: '#999', fontSize: 11 }
+        axisLabel: { color: this.getTextColor(), fontSize: 11 }
       },
       series: [
         {
@@ -491,7 +495,7 @@
         itemWidth: 10,
         itemHeight: 10,
         icon: 'circle',
-        textStyle: { fontSize: 11, color: '#666' }
+        textStyle: { fontSize: 11, color: this.getTextColor() }
       },
       xAxis: {
         type: 'time',
@@ -499,7 +503,7 @@
         axisLine: { show: false },
         axisTick: { show: false },
         splitLine: { show: false },
-        axisLabel: { color: '#999', fontSize: 11 }
+        axisLabel: { color: this.getTextColor(), fontSize: 11 }
       },
       yAxis: {
         type: 'value',
@@ -509,7 +513,7 @@
             color: '#f0f0f0'
           }
         },
-        axisLabel: { color: '#999', fontSize: 11 }
+        axisLabel: { color: this.getTextColor(), fontSize: 11 }
       },
       series: series
     };
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn/resource-monitoring-ssl-vpn.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn/resource-monitoring-ssl-vpn.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn/resource-monitoring-ssl-vpn.scss	(working copy)
@@ -1,6 +1,6 @@
 .ssl-vpn-container {
     padding: 12px;
-    background-color: #fafafa;
+    background-color: var(--app-bg);
     height: 100%;
     overflow: hidden;
     box-sizing: border-box;
@@ -12,8 +12,8 @@
     .table-container {
         border-radius: 8px;
         overflow: hidden;
-        border: 1px solid #e0e0e0;
-        background: white;
+        border: 1px solid var(--border-color);
+        background: var(--surface-bg);
         flex: 1;
         display: flex;
         flex-direction: column;
@@ -29,30 +29,30 @@
             width: 100%;
 
             th.mat-mdc-header-cell {
-                background-color: #f5f5f5;
-                color: #424242;
+                background-color: var(--table-header-bg);
+                color: var(--table-header-text);
                 font-weight: 600;
                 font-size: 13px;
                 padding: 0 16px;
-                border-bottom: 1px solid #e0e0e0;
+                border-bottom: 1px solid var(--border-color);
             }
 
             td.mat-mdc-cell {
                 padding: 12px 16px;
                 font-size: 13px;
-                color: #333;
-                border-bottom: 1px solid #f0f0f0;
+                color: var(--text-primary);
+                border-bottom: 1px solid var(--border-color);
 
                 &.no-data-cell {
                     text-align: center;
                     padding: 48px;
-                    color: #757575;
-                    background-color: white;
+                    color: var(--text-secondary);
+                    background-color: var(--surface-bg);
                 }
             }
 
             tr.mat-mdc-row:hover {
-                background-color: #f9f9f9;
+                background-color: var(--table-hover);
             }
 
             // Links
@@ -72,7 +72,7 @@
 
     mat-paginator {
         background: transparent;
-        border-top: 1px solid #e0e0e0;
+        border-top: 1px solid var(--border-color);
     }
 
     // Stats (Preserved)
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-management/role-management.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-management/role-management.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/role-management/role-management.scss	(working copy)
@@ -76,4 +76,48 @@
 
 mat-paginator {
     border-top: 1px solid #dadce0;
+}
+
+/* Dark Theme Overrides */
+:host-context(.dark-theme) {
+    .admin-card {
+        background-color: var(--surface-bg);
+        border: 1px solid var(--border-color);
+
+        mat-card-header {
+            background-color: var(--surface-bg);
+            border-bottom: 1px solid var(--border-color);
+
+            mat-card-title {
+                color: var(--text-primary);
+            }
+        }
+    }
+
+    .table-container {
+        .details-table {
+
+            tr.mat-mdc-row:hover {
+                background-color: var(--hover-bg);
+            }
+
+            .row-action fa-icon {
+                color: var(--text-secondary);
+
+                &:hover {
+                    color: #64b5f6;
+                }
+
+                &.delete-icon:hover {
+                    color: #ef9a9a;
+                }
+            }
+        }
+    }
+
+    mat-paginator {
+        background-color: var(--surface-bg);
+        color: var(--text-secondary);
+        border-top: 1px solid var(--border-color);
+    }
 }
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/storage-log-location/storage-log-location.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/storage-log-location/storage-log-location.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/storage-log-location/storage-log-location.scss	(working copy)
@@ -115,11 +115,54 @@
     border-bottom-color: #f0f0f0;
   }
 
-  .table-no-data {
-    td {
-      text-align: center;
-      padding: 24px;
-      color: #777;
+  color: #777;
+}
+
+
+/* Dark Theme Overrides */
+:host-context(.dark-theme) {
+  .storage-card {
+    background-color: var(--surface-bg);
+    border: 1px solid var(--border-color);
+
+    mat-card-header {
+      background-color: var(--surface-bg);
+      border-bottom: 1px solid var(--border-color);
+
+      mat-card-title {
+        color: var(--text-primary);
+
+        .info-icon {
+          color: var(--text-secondary);
+
+          &:hover {
+            color: #64b5f6;
+          }
+        }
+      }
     }
   }
+
+  .form-field-wrapper .form-label {
+    color: var(--text-primary);
+  }
+
+  .details-table {
+    tr.mat-mdc-row:hover {
+      background-color: var(--hover-bg);
+    }
+
+    th.mat-mdc-header-cell {
+      color: var(--text-secondary);
+    }
+
+    td.mat-mdc-cell {
+      color: var(--text-primary);
+      border-bottom-color: var(--border-color);
+    }
+
+    .table-no-data td {
+      color: var(--text-secondary);
+    }
+  }
 }
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/storage-primary/storage-primary.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/storage-primary/storage-primary.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/storage-primary/storage-primary.scss	(working copy)
@@ -114,11 +114,46 @@
     border-bottom-color: #f0f0f0;
   }
 
-  .table-no-data {
-    td {
-      text-align: center;
-      padding: 24px;
-      color: #777;
+  color: #777;
+}
+
+
+/* Dark Theme Overrides */
+:host-context(.dark-theme) {
+  .storage-card {
+    background-color: var(--surface-bg);
+    border: 1px solid var(--border-color);
+
+    mat-card-header {
+      background-color: var(--surface-bg);
+      border-bottom: 1px solid var(--border-color);
+
+      mat-card-title {
+        color: var(--text-primary);
+      }
     }
   }
+
+  .form-field-wrapper .form-label {
+    color: var(--text-primary);
+  }
+
+  .details-table {
+    tr.mat-mdc-row:hover {
+      background-color: var(--hover-bg);
+    }
+
+    th.mat-mdc-header-cell {
+      color: var(--text-secondary);
+    }
+
+    td.mat-mdc-cell {
+      color: var(--text-primary);
+      border-bottom-color: var(--border-color);
+    }
+
+    .table-no-data td {
+      color: var(--text-secondary);
+    }
+  }
 }
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/storage-secondary/storage-secondary.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/storage-secondary/storage-secondary.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/storage-secondary/storage-secondary.scss	(working copy)
@@ -83,4 +83,25 @@
 .chart-container {
   width: 100%;
   height: 100%;
+}
+
+/* Dark Theme Overrides */
+:host-context(.dark-theme) {
+  .storage-card {
+    background-color: var(--surface-bg);
+    border: 1px solid var(--border-color);
+
+    mat-card-header {
+      background-color: var(--surface-bg);
+      border-bottom: 1px solid var(--border-color);
+
+      mat-card-title {
+        color: var(--text-primary);
+      }
+    }
+  }
+
+  .form-field-wrapper .form-label {
+    color: var(--text-primary);
+  }
 }
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-control/system-control.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-control/system-control.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-control/system-control.scss	(working copy)
@@ -77,4 +77,29 @@
     display: flex;
     justify-content: center;
     margin-top: 8px;
+}
+
+/* Dark Theme Overrides */
+:host-context(.dark-theme) {
+    .admin-card {
+        background-color: var(--surface-bg);
+        border: 1px solid var(--border-color);
+
+        mat-card-header {
+            background-color: var(--surface-bg);
+            border-bottom: 1px solid var(--border-color);
+
+            mat-card-title {
+                color: var(--text-primary);
+            }
+        }
+
+        mat-card-content {
+            color: var(--text-primary);
+        }
+    }
+
+    .form-field-wrapper .form-label {
+        color: var(--text-primary);
+    }
 }
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-time/system-time.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-time/system-time.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-time/system-time.scss	(working copy)
@@ -3,6 +3,7 @@
   border-radius: 0;
   background-color: inherit;
   font-size: 14px !important;
+
   mat-card-header {
     color: #1170cf;
   }
@@ -37,7 +38,7 @@
     max-width: none;
   }
 
-  & > * {
+  &>* {
     flex-basis: calc((100% - 30px) / 3); // 3 fields with 15px gap between
   }
 }
@@ -47,3 +48,44 @@
   justify-content: center;
   margin-top: 20px;
 }
+
+/* Dark Theme Overrides */
+:host-context(.dark-theme) {
+  .page-card-1 {
+    background-color: var(--surface-bg);
+    color: var(--text-primary);
+
+    mat-card-header {
+      color: var(--text-primary);
+    }
+  }
+
+  .form-field-wrapper .form-label {
+    color: var(--text-primary);
+  }
+
+  .table-container {
+    table {
+      background-color: var(--surface-bg);
+    }
+
+    th.mat-header-cell {
+      color: var(--text-secondary);
+    }
+
+    td.mat-cell {
+      color: var(--text-primary);
+      border-bottom-color: var(--border-color);
+    }
+
+    .table-no-data td {
+      color: var(--text-secondary);
+    }
+  }
+
+  .wrapped-pre {
+    color: var(--text-primary);
+    background-color: var(--panel-bg);
+    border: 1px solid var(--border-color);
+  }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/user-management/user-management.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/user-management/user-management.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/user-management/user-management.scss	(working copy)
@@ -76,4 +76,48 @@
 
 mat-paginator {
     border-top: 1px solid #dadce0;
+}
+
+/* Dark Theme Overrides */
+:host-context(.dark-theme) {
+    .admin-card {
+        background-color: var(--surface-bg);
+        border: 1px solid var(--border-color);
+
+        mat-card-header {
+            background-color: var(--surface-bg);
+            border-bottom: 1px solid var(--border-color);
+
+            mat-card-title {
+                color: var(--text-primary);
+            }
+        }
+    }
+
+    .table-container {
+        .details-table {
+
+            tr.mat-mdc-row:hover {
+                background-color: var(--hover-bg);
+            }
+
+            .row-action fa-icon {
+                color: var(--text-secondary);
+
+                &:hover {
+                    color: #64b5f6;
+                }
+
+                &.delete-icon:hover {
+                    color: #ef9a9a;
+                }
+            }
+        }
+    }
+
+    mat-paginator {
+        background-color: var(--surface-bg);
+        color: var(--text-secondary);
+        border-top: 1px solid var(--border-color);
+    }
 }
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vl-discovered-devices/vl-discovered-devices.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vl-discovered-devices/vl-discovered-devices.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vl-discovered-devices/vl-discovered-devices.scss	(working copy)
@@ -0,0 +1,158 @@
+/* Base Styles using pattern from other components */
+.page-card-1 {
+    width: 100%;
+    border-radius: 8px;
+    background: #fff;
+    margin-bottom: 16px;
+
+    mat-card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 16px;
+        border-bottom: 1px solid #f0f0f0;
+
+        mat-card-title {
+            font-size: 18px;
+            font-weight: 500;
+            margin: 0;
+        }
+    }
+}
+
+.table-container {
+    background: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    position: relative;
+    margin-top: 16px;
+}
+
+table.mat-table {
+    width: 100%;
+
+    th.mat-header-cell {
+        background-color: #f8f9fa;
+        color: #5f6368;
+        font-weight: 600;
+        font-size: 13px;
+        text-transform: uppercase;
+        padding: 0 16px;
+        height: 48px;
+        border-bottom: 1px solid #e0e0e0;
+    }
+
+    td.mat-cell {
+        padding: 0 16px;
+        font-size: 14px;
+        color: #3c4043;
+        height: 48px;
+        border-bottom: 1px solid #f1f3f4;
+    }
+
+    tr.mat-row:hover {
+        background-color: #f8f9fa;
+    }
+
+    .a-link {
+        color: #1967d2;
+        cursor: pointer;
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    .row-action {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+
+        fa-icon {
+            cursor: pointer;
+            color: #5f6368;
+
+            &:hover {
+                color: #1967d2;
+            }
+
+            &.delete-icon {
+                color: #d32f2f;
+            }
+        }
+    }
+}
+
+/* Dark Theme Overrides */
+:host-context(.dark-theme) {
+    .page-card-1 {
+        background-color: var(--surface-bg);
+        border: 1px solid var(--border-color);
+        color: var(--text-primary);
+
+        mat-card-header {
+            border-bottom: 1px solid var(--border-color);
+
+            mat-card-title {
+                color: var(--text-primary);
+            }
+        }
+
+        mat-card-content {
+            color: var(--text-primary);
+        }
+    }
+
+    .table-container {
+        background-color: var(--surface-bg);
+        border: 1px solid var(--border-color);
+    }
+
+    table.mat-table {
+        background-color: var(--surface-bg);
+
+        th.mat-header-cell {
+            background-color: var(--panel-bg);
+            color: var(--text-secondary);
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        td.mat-cell {
+            color: var(--text-primary);
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        tr.mat-row:hover {
+            background-color: var(--hover-bg);
+        }
+
+        .a-link {
+            color: #64b5f6;
+        }
+
+        .row-action {
+            fa-icon {
+                color: var(--text-secondary);
+
+                &:hover {
+                    color: #64b5f6;
+                }
+
+                &.delete-icon {
+                    color: #ef9a9a;
+                }
+            }
+        }
+
+        tr.table-no-data td {
+            color: var(--text-secondary);
+        }
+    }
+
+    mat-paginator {
+        background-color: var(--surface-bg);
+        color: var(--text-secondary);
+        border-top: 1px solid var(--border-color);
+    }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vl-managed-devices/vl-managed-devices.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vl-managed-devices/vl-managed-devices.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/vl-managed-devices/vl-managed-devices.scss	(working copy)
@@ -0,0 +1,162 @@
+/* Base Styles using pattern from other components */
+.page-card-1 {
+    width: 100%;
+    border-radius: 8px;
+    background: #fff;
+    margin-bottom: 16px;
+
+    mat-card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 16px;
+        border-bottom: 1px solid #f0f0f0;
+
+        mat-card-title {
+            font-size: 18px;
+            font-weight: 500;
+            margin: 0;
+        }
+    }
+}
+
+.table-container {
+    background: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    position: relative;
+}
+
+table.mat-table {
+    width: 100%;
+
+    th.mat-header-cell {
+        background-color: #f8f9fa;
+        color: #5f6368;
+        font-weight: 600;
+        font-size: 13px;
+        text-transform: uppercase;
+        padding: 0 16px;
+        height: 48px;
+        border-bottom: 1px solid #e0e0e0;
+    }
+
+    td.mat-cell {
+        padding: 0 16px;
+        font-size: 14px;
+        color: #3c4043;
+        height: 48px;
+        border-bottom: 1px solid #f1f3f4;
+    }
+
+    tr.mat-row:hover {
+        background-color: #f8f9fa;
+    }
+
+    .details-page-link,
+    .a-link {
+        color: #1967d2;
+        cursor: pointer;
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    .row-action {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+
+        fa-icon {
+            cursor: pointer;
+            color: #5f6368;
+
+            &:hover {
+                color: #1967d2;
+            }
+
+            &.success-icon {
+                color: #137333;
+            }
+
+            &.delete-icon {
+                color: #d32f2f;
+            }
+        }
+    }
+}
+
+/* Dark Theme Overrides */
+:host-context(.dark-theme) {
+    .page-card-1 {
+        background-color: var(--surface-bg);
+        border: 1px solid var(--border-color);
+
+        mat-card-header {
+            border-bottom: 1px solid var(--border-color);
+
+            mat-card-title {
+                color: var(--text-primary);
+            }
+        }
+    }
+
+    .table-container {
+        background-color: var(--surface-bg);
+        border: 1px solid var(--border-color);
+    }
+
+    table.mat-table {
+        background-color: var(--surface-bg);
+
+        th.mat-header-cell {
+            background-color: var(--panel-bg);
+            color: var(--text-secondary);
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        td.mat-cell {
+            color: var(--text-primary);
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        tr.mat-row:hover {
+            background-color: var(--hover-bg);
+        }
+
+        .details-page-link,
+        .a-link {
+            color: #64b5f6;
+        }
+
+        .row-action {
+            fa-icon {
+                color: var(--text-secondary);
+
+                &:hover {
+                    color: #64b5f6;
+                }
+
+                &.success-icon {
+                    color: #81c995;
+                }
+
+                &.delete-icon {
+                    color: #ef9a9a;
+                }
+            }
+        }
+
+        tr.table-no-data td {
+            color: var(--text-secondary);
+        }
+    }
+
+    mat-paginator {
+        background-color: var(--surface-bg);
+        color: var(--text-secondary);
+        border-top: 1px solid var(--border-color);
+    }
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/tasks/tasks.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/tasks/tasks.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/tasks/tasks.scss	(working copy)
@@ -73,4 +73,49 @@
 // Paginator styling to match
 mat-paginator {
     border-top: 1px solid #dadce0;
+}
+
+/* Dark Theme Overrides */
+:host-context(.dark-theme) {
+    .tasks-card {
+        background-color: var(--surface-bg);
+        border: 1px solid var(--border-color);
+
+        mat-card-header {
+            background-color: var(--surface-bg);
+            border-bottom: 1px solid var(--border-color);
+
+            mat-card-title {
+                color: var(--text-primary);
+            }
+
+            .header-actions button {
+                background-color: transparent !important;
+                color: #ef9a9a !important;
+                border: 1px solid #ef9a9a !important;
+            }
+        }
+    }
+
+    .table-container {
+        .details-table {
+            tr.mat-mdc-row:hover {
+                background-color: var(--hover-bg);
+            }
+
+            .row-action {
+                color: var(--text-secondary);
+
+                &:hover {
+                    color: #ef9a9a;
+                }
+            }
+        }
+    }
+
+    mat-paginator {
+        background-color: var(--surface-bg);
+        color: var(--text-secondary);
+        border-top: 1px solid var(--border-color);
+    }
 }
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/volume-license-devices-overview/volume-license-devices-overview.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/volume-license-devices-overview/volume-license-devices-overview.ts	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/volume-license-devices-overview/volume-license-devices-overview.ts	(working copy)
@@ -1,11 +1,10 @@
-import {Component, OnInit} from '@angular/core';
-import {SharedModule} from '../../shared/shared-module';
-import {VlDiscoveredDevices} from '../sub-components/vl-discovered-devices/vl-discovered-devices';
-import {VlManagedDevices} from '../sub-components/vl-managed-devices/vl-managed-devices';
-import {ActivatedRoute, Router} from '@angular/router';
-import {MatTabChangeEvent} from '@angular/material/tabs';
-import {TabContainer, TabDefinition} from '../common/tab-container/tab-container';
-import {UserManagement} from '../sub-components/user-management/user-management';
+import { Component, OnInit } from '@angular/core';
+import { SharedModule } from '../../shared/shared-module';
+import { VlDiscoveredDevices } from '../sub-components/vl-discovered-devices/vl-discovered-devices';
+import { VlManagedDevices } from '../sub-components/vl-managed-devices/vl-managed-devices';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MatTabChangeEvent } from '@angular/material/tabs';
+import { TabContainer, TabDefinition } from '../common/tab-container/tab-container';
 
 @Component({
   selector: 'app-volume-license-devices-overview',
@@ -16,7 +15,7 @@
 export class VolumeLicenseDevicesOverview {
 
   tabDefinitions: TabDefinition[] = [
-    {label: 'Managed Devices', component: UserManagement, paramName: 'Managed'},
-    {label: 'Discovered Devices', component: UserManagement, paramName: 'Discovered'},
+    { label: 'Managed Devices', component: VlManagedDevices, paramName: 'Managed' },
+    { label: 'Discovered Devices', component: VlDiscoveredDevices, paramName: 'Discovered' },
   ]
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/chart-options.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/chart-options.ts	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/chart-options.ts	(working copy)
@@ -6,6 +6,10 @@
 })
 export class ChartOptions {
 
+  private getTextColor(): string {
+    return getComputedStyle(document.body).getPropertyValue('--text-secondary').trim() || '#999';
+  }
+
   getNoDataChartOptions(): EChartsOption {
     return {
       title: {
@@ -58,12 +62,16 @@
         nameLocation: 'end',
         nameGap: 20,
         axisLabel: {
-          formatter: '{value}'
+          formatter: '{value}',
+          color: this.getTextColor()
         }
       },
       xAxis: {
         type: 'category',
         data: sortedNames,
+        axisLabel: {
+          color: this.getTextColor()
+        }
       },
       series: [
         {
@@ -143,13 +151,17 @@
         nameLocation: 'end',
         nameGap: 20,
         axisLabel: {
-          formatter: '{value}'
+          formatter: '{value}',
+          color: this.getTextColor()
         }
       },
       xAxis: {
         type: 'category',
         data: metrics.map((item: any) => item?.name),
-        inverse: false
+        inverse: false,
+        axisLabel: {
+          color: this.getTextColor()
+        }
       },
       series: [
         {
@@ -170,7 +182,10 @@
         }
       },
       legend: {
-        bottom: 'bottom'
+        bottom: 'bottom',
+        textStyle: {
+          color: this.getTextColor()
+        }
       },
       yAxis: {
         type: 'value',
@@ -181,11 +196,15 @@
             }
             return '';
           },
+          color: this.getTextColor()
         },
       },
       xAxis: {
         type: 'category',
-        data: metrics?.yAxisData
+        data: metrics?.yAxisData,
+        axisLabel: {
+          color: this.getTextColor()
+        }
       },
       series: [
         {
@@ -244,15 +263,22 @@
         }
       },
       legend: {
-        data: ['Sent', 'Received']
+        data: ['Sent', 'Received'],
+        textStyle: {
+          color: this.getTextColor()
+        }
       },
       xAxis: {
         type: 'time',
-        name: 'Time'
+        name: 'Time',
+        axisLabel: { color: this.getTextColor() },
+        nameTextStyle: { color: this.getTextColor() }
       },
       yAxis: {
         type: 'value',
-        name: `Bandwidth (Mbps)`
+        name: `Bandwidth (Mbps)`,
+        axisLabel: { color: this.getTextColor() },
+        nameTextStyle: { color: this.getTextColor() }
       },
       series: [
         {
@@ -317,15 +343,22 @@
         }
       },
       legend: {
-        data: ['CPU', 'Memory']
+        data: ['CPU', 'Memory'],
+        textStyle: {
+          color: this.getTextColor()
+        }
       },
       xAxis: {
         type: 'time',
-        name: 'Time'
+        name: 'Time',
+        axisLabel: { color: this.getTextColor() },
+        nameTextStyle: { color: this.getTextColor() }
       },
       yAxis: {
         type: 'value',
-        name: 'Percentage'
+        name: 'Percentage',
+        axisLabel: { color: this.getTextColor() },
+        nameTextStyle: { color: this.getTextColor() }
       },
       series: [
         {
@@ -376,16 +409,23 @@
         }
       },
       legend: {
-        data: [labels?.label]
+        data: [labels?.label],
+        textStyle: {
+          color: this.getTextColor()
+        }
       },
       xAxis: {
         type: 'time',
-        name: 'Time'
+        name: 'Time',
+        axisLabel: { color: this.getTextColor() },
+        nameTextStyle: { color: this.getTextColor() }
       },
       yAxis: {
         type: 'value',
         name: labels?.unit,
-        min: 0
+        min: 0,
+        axisLabel: { color: this.getTextColor() },
+        nameTextStyle: { color: this.getTextColor() }
       },
       series: [
         {
@@ -429,15 +469,22 @@
         }
       },
       legend: {
-        data: [labels?.label[0], labels?.label[1]]
+        data: [labels?.label[0], labels?.label[1]],
+        textStyle: {
+          color: this.getTextColor()
+        }
       },
       xAxis: {
         type: 'time',
-        name: 'Time'
+        name: 'Time',
+        axisLabel: { color: this.getTextColor() },
+        nameTextStyle: { color: this.getTextColor() }
       },
       yAxis: {
         type: 'value',
-        name: labels?.unit
+        name: labels?.unit,
+        axisLabel: { color: this.getTextColor() },
+        nameTextStyle: { color: this.getTextColor() }
       },
       series: [
         {
@@ -489,11 +536,15 @@
       },
       xAxis: {
         type: 'time',
-        name: 'Time'
+        name: 'Time',
+        axisLabel: { color: this.getTextColor() },
+        nameTextStyle: { color: this.getTextColor() }
       },
       yAxis: {
         type: 'value',
-        name: labels?.unit
+        name: labels?.unit,
+        axisLabel: { color: this.getTextColor() },
+        nameTextStyle: { color: this.getTextColor() }
       },
       series: [
         {
@@ -541,21 +592,39 @@
         }
       },
       legend: {
-        data: ['Disk I/O',]
+        data: ['Disk I/O',],
+        textStyle: {
+          color: this.getTextColor()
+        }
       },
       xAxis: {
         type: 'time',
-        name: 'Time'
+        name: 'Time',
+        axisLabel: { color: this.getTextColor() },
+        nameTextStyle: { color: this.getTextColor() }
       },
       yAxis: {
         type: 'value',
-        name: `Percentage %`
+        name: `Percentage %`,
+        axisLabel: { color: this.getTextColor() },
+        nameTextStyle: { color: this.getTextColor() }
       },
       series: [
         {
           name: 'Disk I/O',
           type: 'line',
-          data: disk_io_data
+          data: disk_io_data,
+          showSymbol: false,
+          smooth: true,
+          itemStyle: {
+            color: '#ff9800' // Orange matches main dashboard disk color
+          },
+          lineStyle: {
+            color: '#ff9800'
+          },
+          areaStyle: {
+            color: '#ffe0b2' // Lighter orange for area
+          }
         },
       ]
     }
@@ -588,7 +657,10 @@
     }
     if (showLegend) {
       options.legend = {
-        bottom: 'bottom'
+        bottom: 'bottom',
+        textStyle: {
+          color: this.getTextColor()
+        }
       }
     }
     return options;
@@ -748,8 +820,8 @@
             show: false
           },
           data: [
-            { value: usage, name: 'Used', itemStyle: { color: color } },
-            { value: 100 - usage, name: 'Free', itemStyle: { color: '#E0E0E0' } }
+            { value: parseFloat(usage.toFixed(2)), name: 'Used', itemStyle: { color: color } },
+            { value: parseFloat((100 - usage).toFixed(2)), name: 'Free', itemStyle: { color: '#E0E0E0' } }
           ]
         }
       ]
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/layout.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/layout.ts	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/layout.ts	(working copy)
@@ -1,6 +1,6 @@
-import {Injectable} from '@angular/core';
-import {BehaviorSubject, Observable} from 'rxjs';
-import {Storage} from './storage';
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { Storage } from './storage';
 
 const SIDEBAR_COLLAPSED_KEY = 'sidebarCollapsed';
 
@@ -12,11 +12,22 @@
   private _isCollapsedSubject: BehaviorSubject<boolean>;
   public isSidebarCollapsed$: Observable<boolean>;
 
+  private _isDarkModeSubject: BehaviorSubject<boolean>;
+  public isDarkMode$: Observable<boolean>;
+
   constructor(
     private storage: Storage,
   ) {
     this._isCollapsedSubject = new BehaviorSubject<boolean>(this.getInitialCollapsedState());
     this.isSidebarCollapsed$ = this._isCollapsedSubject.asObservable();
+
+    this._isDarkModeSubject = new BehaviorSubject<boolean>(this.getInitialThemeState());
+    this.isDarkMode$ = this._isDarkModeSubject.asObservable();
+
+    // Apply initial theme
+    if (this._isDarkModeSubject.value) {
+      document.body.classList.add('dark-theme');
+    }
   }
 
   setSidebarCollapsed(state: boolean): void {
@@ -29,8 +40,24 @@
     this.setSidebarCollapsed(!currentState);
   }
 
+  toggleTheme(): void {
+    const isDark = !this._isDarkModeSubject.value;
+    this._isDarkModeSubject.next(isDark);
+    this.storage.setItem('theme', isDark ? 'dark' : 'light');
+
+    if (isDark) {
+      document.body.classList.add('dark-theme');
+    } else {
+      document.body.classList.remove('dark-theme');
+    }
+  }
+
   private getInitialCollapsedState(): boolean {
     const stored = this.storage.getItem(SIDEBAR_COLLAPSED_KEY);
     return stored ? JSON.parse(stored) : false;
   }
+
+  private getInitialThemeState(): boolean {
+    return this.storage.getItem('theme') === 'dark';
+  }
 }
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 2831)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/shared/shared-module.ts	(working copy)
@@ -69,7 +69,7 @@
   solidIcons.faChevronDown, solidIcons.faPlay, solidIcons.faPlusCircle, solidIcons.faPlus, solidIcons.faFileImport,
   solidIcons.faCheckCircle, solidIcons.faExclamationCircle, solidIcons.faExclamationTriangle, solidIcons.faQuestion,
   solidIcons.faDownload, solidIcons.faFolderTree, solidIcons.faRotateRight, solidIcons.faExchangeAlt, solidIcons.faTimes,
-  solidIcons.faLink,
+  solidIcons.faLink, solidIcons.faMoon, solidIcons.faSun, solidIcons.faCircleHalfStroke,
 ];
 
 const customRegularIcons = [
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/styles.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/styles.scss	(revision 2830)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/styles.scss	(working copy)
@@ -31,22 +31,98 @@
   medium-weight: 500
 );
 
-$theme: mat.define-theme((typography: $custom-typography,
+// Define Light Theme
+$light-theme: mat.define-theme((typography: $custom-typography,
       color: (theme-type: light,
         primary: mat.$azure-palette,
         tertiary: mat.$azure-palette,
       ),
       density: (scale: 0)));
 
+// Define Dark Theme
+$dark-theme: mat.define-theme((typography: $custom-typography,
+      color: (theme-type: dark,
+        primary: mat.$azure-palette,
+        tertiary: mat.$azure-palette,
+      ),
+      density: (scale: 0)));
+
+// CSS Variables for Semantic Colors
+:root {
+  --app-bg: #fafafa;
+  --surface-bg: #ffffff;
+  --text-primary: #333333;
+  --text-secondary: #555555;
+  --border-color: #cccccc;
+  --table-header-bg: #f1f3f4;
+  --table-header-text: #202124;
+  --table-hover: #f5f5f5;
+  --primary-color: #1170cf;
+  --dialog-bg: #ffffff;
+
+  --nav-bg: #F0F3F7;
+  --hover-bg: #EAECEF;
+  --active-bg: #E8F0FE;
+
+  --accent-color: #673ab7; // Deep Purple
+  --warn-color: #d32f2f; // Red
+  --success-color: #2e7d32; // Green
+
+  --shadow-light: 0 2px 5px rgba(0, 0, 0, 0.03);
+  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+  --scrollbar-track: #f5f5f5;
+  --scrollbar-thumb: #bdbdbd;
+  --scrollbar-thumb-hover: #9e9e9e;
+}
+
+.dark-theme {
+  --app-bg: #121212; // Material 3 Standard Dark
+  --surface-bg: #1e1e1e; // Slightly lighter for cards
+  --text-primary: #e0e0e0; // Soft white for less eye strain
+  --text-secondary: #a0a0a0; // Neutral grey
+  --border-color: #333333;
+
+  --table-header-bg: #252525;
+  --table-header-text: #e0e0e0;
+  --table-hover: #2c2c2c;
+
+  --primary-color: #1170cf; // Same as light mode
+  --accent-color: #b39ddb; // Soft Deep Purple
+  --warn-color: #ef9a9a; // Soft Red
+  --success-color: #a5d6a7; // Soft Green
+
+  --dialog-bg: #1e1e1e;
+
+  --nav-bg: #121212;
+  --hover-bg: #2c2c2c;
+  --active-bg: #333333;
+
+  --shadow-light: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  --shadow-medium: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+
+  --scrollbar-track: #1e1e1e;
+  --scrollbar-thumb: #555555;
+  --scrollbar-thumb-hover: #777777;
+
+  @include mat.all-component-themes($dark-theme);
+}
+
+
 $primary-color: #1170cf;
 
 html,
 body {
-  @include mat.core-theme($theme);
-  @include mat.all-component-themes($theme);
-  @include mat.typography-hierarchy($theme);
+  // Apply Default Light Theme
+  @include mat.core-theme($light-theme);
+  @include mat.all-component-themes($light-theme);
+  @include mat.typography-hierarchy($light-theme);
+
   font-size: 1rem;
   font-family: 'Roboto', sans-serif !important;
+
+  background-color: var(--app-bg);
+  color: var(--text-primary);
 }
 
 body {
@@ -65,8 +141,35 @@
 
 * {
   font-family: inherit; // Ensure all elements inherit Roboto
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
 }
 
+/* Global Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 5px;
+  border: 2px solid var(--scrollbar-track); // Creates padding effect
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+}
+
+::-webkit-scrollbar-corner {
+  background: var(--scrollbar-track);
+}
+
+
 .table-container {
   padding: 3px;
   position: relative;
@@ -80,8 +183,8 @@
     .mat-header-cell,
     .mat-header-row,
     [mat-header-row] {
-      background: #f1f3f4; // Google/Gmail style light grey
-      color: #202124; // Google's standard dark grey text
+      background: var(--table-header-bg);
+      color: var(--table-header-text);
       font-weight: 500;
       height: 40px !important; // Compact header
     }
@@ -104,6 +207,21 @@
   }
 }
 
+/* Global Dialog Overrides for Uniformity */
+.mat-mdc-dialog-container .mat-mdc-dialog-surface {
+  background-color: var(--dialog-bg) !important;
+  color: var(--text-primary) !important;
+  box-shadow: var(--shadow-medium);
+  /* Optional: add shadow if needed */
+}
+
+/* Ensure title and actions inherit or match */
+.mat-mdc-dialog-title,
+.mat-mdc-dialog-actions {
+  background-color: transparent !important;
+  /* Let container bg show through */
+}
+
 /* Filter container with high specificity */
 :host ::ng-deep .filter-container {
   width: 100%;
@@ -113,8 +231,8 @@
   z-index: 25;
 
   .mat-mdc-form-field {
-    background-color: #fff;
-    border: 1px solid #ccc;
+    background-color: var(--surface-bg);
+    border: 1px solid var(--border-color);
     border-radius: 20px;
     transition: border-color 0.2s ease;
 
@@ -132,14 +250,14 @@
   }
 
   .mat-mdc-input-element {
-    color: #333;
+    color: var(--text-primary);
     font-size: 1em;
     position: relative;
     z-index: 26;
   }
 
   .mat-mdc-form-field-label {
-    color: #555;
+    color: var(--text-secondary);
   }
 
   .mat-mdc-input-element:focus {
@@ -160,7 +278,7 @@
 }
 
 .blue-icon {
-  color: $primary-color;
+  color: var(--primary-color);
 }
 
 .align-center,
@@ -186,7 +304,7 @@
 
 .a-link-color {
   cursor: pointer;
-  color: $primary-color;
+  color: var(--primary-color);
 }
 
 .mat-column-serial {
@@ -233,11 +351,11 @@
 .details-page-link,
 .back-to-main-page {
   cursor: pointer;
-  color: $primary-color;
+  color: var(--primary-color);
 }
 
 .dialog-title {
-  color: $primary-color !important;
+  color: var(--primary-color) !important;
 }
 
 .dialog-container {
@@ -429,6 +547,7 @@
   max-width: initial !important;
   background: none !important;
   box-shadow: none !important;
+  border: none !important;
 }
 
 .mat-mdc-snack-bar-label {
@@ -443,6 +562,9 @@
 
 .mdc-snackbar__surface {
   padding: 0 !important;
+  background-color: transparent !important;
+  box-shadow: none !important;
+  border: none !important;
 }
 
 app-app-notification {
@@ -459,7 +581,7 @@
 }
 
 .page-card-1 mat-card-header {
-  color: #1170cf !important;
+  color: var(--primary-color) !important;
 }
 
 mat-card-header {