From 3219d4d7f3e3a604a0786d963ff85d2c62fc2463 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 17 Dec 2025 12:39:36 -0500
Subject: [PATCH] refactor: enhance layout and styling for improved UI
 consistency and performance

---
 .../Proxmox/views/components/layout.blade.php | 505 +++++++++---------
 .../Servers/Proxmox/views/overview.blade.php  |  58 +-
 2 files changed, 297 insertions(+), 266 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/components/layout.blade.php b/extensions/Servers/Proxmox/views/components/layout.blade.php
index c60d685ae..5bae5e700 100644
--- a/extensions/Servers/Proxmox/views/components/layout.blade.php
+++ b/extensions/Servers/Proxmox/views/components/layout.blade.php
@@ -1315,10 +1315,11 @@
             </div>
 
             @if ($view !== 'statistics')
-                <!-- Preload Statistics tab content when entering the server page -->
+                <!-- Preload Statistics/Telemetry data when entering the server page -->
                 <div
                     x-init="
                         if (window.fetch) {
+                            // Preload statistics immediately for faster tab switching
                             setTimeout(function () {
                                 try {
                                     fetch('{{ route('proxmox.server.statistics', ['server' => $server->id]) }}', {
@@ -1326,7 +1327,16 @@
                                         headers: { 'X-Proxmox-Preload': 'true' },
                                     });
                                 } catch (e) {}
-                            }, 500);
+                            }, 100);
+                            // Also preload the telemetry stats data
+                            setTimeout(function () {
+                                try {
+                                    fetch('{{ route('proxmox.server.statistics', ['server' => $server->id]) }}?preload_charts=1', {
+                                        credentials: 'same-origin',
+                                        headers: { 'X-Proxmox-Preload': 'true', 'X-Preload-Charts': 'true' },
+                                    });
+                                } catch (e) {}
+                            }, 300);
                         }
                     "
                     class="hidden"
@@ -1334,232 +1344,214 @@
             @endif
 
             @php
-                $tabs = [
-                    ['label' => 'Overview', 'view' => 'overview', 'route' => route('proxmox.server.overview', ['server' => $server->id])],
-                    ['label' => 'Statistics', 'view' => 'statistics', 'route' => route('proxmox.server.statistics', ['server' => $server->id]), 'advanced' => true],
-                    [
-                        'label' => 'Hardware', 
-                        'dropdown' => true,
-                        'items' => [
-                            ['label' => 'Boot Settings', 'view' => 'boot-order', 'route' => route('proxmox.server.boot-order', ['server' => $server->id]), 'advanced' => true],
-                            ['label' => 'Display', 'view' => 'display', 'route' => route('proxmox.server.display', ['server' => $server->id]), 'advanced' => true],
-                            ['label' => 'Storage', 'view' => 'storage', 'route' => route('proxmox.server.storage', ['server' => $server->id]), 'advanced' => true],
-                            ['label' => 'System', 'view' => 'system', 'route' => route('proxmox.server.system', ['server' => $server->id]), 'advanced' => true],
-                        ]
-                    ],
-                    [
-                        'label' => 'Networking', 
-                        'dropdown' => true,
-                        'items' => [
-                            ['label' => 'Configuration', 'view' => 'network', 'route' => route('proxmox.server.network', ['server' => $server->id])],
-                            ['label' => 'Firewall', 'view' => 'firewall', 'route' => route('proxmox.server.firewall', ['server' => $server->id]), 'advanced' => true],
-                            ['label' => 'Subdomain', 'view' => 'subdomain', 'route' => route('proxmox.server.subdomain', ['server' => $server->id]), 'advanced' => true],
-                        ]
-                    ],
-                    ['label' => 'Cloud-init', 'view' => 'cloud-init', 'route' => route('proxmox.server.cloud-init', ['server' => $server->id]), 'advanced' => true],
-                ];
-                if($server->service->product->settings()->where('key', 'backups')->first()?->value > 0) {
-                    $tabs[] = ['label' => 'Backups', 'view' => 'backups', 'route' => route('proxmox.server.backups', ['server' => $server->id])];
-                }
+                // Build tabs dynamically with logical organization for speed and usability
+                $tabs = [];
+                
+                // 1. Overview - Primary dashboard (always first, always visible)
+                $tabs[] = ['label' => 'Overview', 'view' => 'overview', 'route' => route('proxmox.server.overview', ['server' => $server->id]), 'icon' => 'ri-dashboard-line'];
+                
+                // 2. Console - Quick access for remote management (if VNC enabled)
                 if($server->node->vnc_enabled) {
                     $tabs[] = [
                         'label' => 'Console', 
                         'dropdown' => true,
+                        'icon' => 'ri-terminal-box-line',
                         'items' => [
-                            ['label' => 'NoVNC', 'view' => 'vnc', 'route' => route('proxmox.server.vnc', ['server' => $server->id])],
-                            ['label' => 'Xterm.js', 'view' => 'xterm', 'route' => route('proxmox.server.xterm', ['server' => $server->id])],
+                            ['label' => 'NoVNC Console', 'view' => 'vnc', 'route' => route('proxmox.server.vnc', ['server' => $server->id]), 'icon' => 'ri-computer-line'],
+                            ['label' => 'Xterm.js Terminal', 'view' => 'xterm', 'route' => route('proxmox.server.xterm', ['server' => $server->id]), 'icon' => 'ri-terminal-line'],
                         ]
                     ];
                 }
-                $tabs[] = ['label' => 'Help', 'view' => 'help', 'route' => route('proxmox.server.help', ['server' => $server->id]), 'advanced' => true];
+                
+                // 3. Monitoring - Statistics and telemetry (now prominently visible)
+                $tabs[] = ['label' => 'Monitoring', 'view' => 'statistics', 'route' => route('proxmox.server.statistics', ['server' => $server->id]), 'icon' => 'ri-line-chart-line'];
+                
+                // 4. Networking - All network related (dropdown)
+                $tabs[] = [
+                    'label' => 'Networking', 
+                    'dropdown' => true,
+                    'icon' => 'ri-global-line',
+                    'items' => [
+                        ['label' => 'IP Configuration', 'view' => 'network', 'route' => route('proxmox.server.network', ['server' => $server->id]), 'icon' => 'ri-router-line'],
+                        ['label' => 'Firewall Rules', 'view' => 'firewall', 'route' => route('proxmox.server.firewall', ['server' => $server->id]), 'icon' => 'ri-shield-line', 'advanced' => true],
+                        ['label' => 'Subdomain', 'view' => 'subdomain', 'route' => route('proxmox.server.subdomain', ['server' => $server->id]), 'icon' => 'ri-link', 'advanced' => true],
+                    ]
+                ];
+                
+                // 5. Storage - All storage related (dropdown)
+                $storageItems = [
+                    ['label' => 'Disk Management', 'view' => 'storage', 'route' => route('proxmox.server.storage', ['server' => $server->id]), 'icon' => 'ri-hard-drive-2-line', 'advanced' => true],
+                ];
+                if($server->service->product->settings()->where('key', 'backups')->first()?->value > 0) {
+                    $storageItems[] = ['label' => 'Backups', 'view' => 'backups', 'route' => route('proxmox.server.backups', ['server' => $server->id]), 'icon' => 'ri-folder-shield-line'];
+                }
+                $tabs[] = [
+                    'label' => 'Storage', 
+                    'dropdown' => true,
+                    'icon' => 'ri-hard-drive-line',
+                    'items' => $storageItems
+                ];
+                
+                // 6. System - Hardware configuration (dropdown)
+                $tabs[] = [
+                    'label' => 'System', 
+                    'dropdown' => true,
+                    'icon' => 'ri-settings-3-line',
+                    'items' => [
+                        ['label' => 'Boot Order', 'view' => 'boot-order', 'route' => route('proxmox.server.boot-order', ['server' => $server->id]), 'icon' => 'ri-restart-line', 'advanced' => true],
+                        ['label' => 'Display', 'view' => 'display', 'route' => route('proxmox.server.display', ['server' => $server->id]), 'icon' => 'ri-computer-line', 'advanced' => true],
+                        ['label' => 'Hardware Config', 'view' => 'system', 'route' => route('proxmox.server.system', ['server' => $server->id]), 'icon' => 'ri-cpu-line', 'advanced' => true],
+                        ['label' => 'Cloud-init', 'view' => 'cloud-init', 'route' => route('proxmox.server.cloud-init', ['server' => $server->id]), 'icon' => 'ri-cloud-line', 'advanced' => true],
+                    ]
+                ];
+                
+                // 7. Help - Documentation (always last)
+                $tabs[] = ['label' => 'Help', 'view' => 'help', 'route' => route('proxmox.server.help', ['server' => $server->id]), 'icon' => 'ri-question-line', 'advanced' => true];
             @endphp
 
             <div class="mb-10 mt-3">
                 <style>
-                    /* Modern Navigation Styles */
+                    /* TailAdmin Navigation Styles */
                     .proxmox-nav-container {
-                        background: color-mix(in srgb, var(--color-background-secondary) 60%, transparent);
-                        backdrop-filter: blur(12px);
-                        border: 1px solid color-mix(in srgb, var(--color-neutral) 30%, transparent);
-                        border-radius: 14px;
-                        padding: 8px;
-                        box-shadow: 
-                            0 1px 3px rgba(0, 0, 0, 0.05),
-                            0 0 0 1px rgba(0, 0, 0, 0.02);
-                        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-                        position: relative;
-                        z-index: 10;
+                        background: rgba(255, 255, 255, 0.8);
+                        backdrop-filter: blur(16px);
+                        -webkit-backdrop-filter: blur(16px);
+                        border: 1px solid rgba(226, 232, 240, 0.8);
+                        border-radius: 16px;
+                        padding: 6px;
+                        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+                        transition: all 0.2s ease;
                     }
 
                     .dark .proxmox-nav-container {
-                        background: color-mix(in srgb, var(--color-background-secondary) 80%, transparent);
-                        border-color: color-mix(in srgb, var(--color-neutral) 40%, transparent);
-                        box-shadow: 
-                            0 1px 3px rgba(0, 0, 0, 0.3),
-                            0 0 0 1px rgba(255, 255, 255, 0.05);
+                        background: rgba(30, 41, 59, 0.9);
+                        border-color: rgba(51, 65, 85, 0.8);
+                        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
                     }
 
                     .proxmox-nav-tabs {
                         display: flex;
-                        gap: 4px;
+                        gap: 2px;
                         flex-wrap: wrap;
                         flex: 1;
+                        align-items: center;
                     }
 
                     .proxmox-tab-link {
-                        position: relative;
-                        font-size: 0.8125rem;
-                        font-weight: 600;
+                        display: inline-flex;
+                        align-items: center;
+                        gap: 6px;
+                        font-size: 0.875rem;
+                        font-weight: 500;
                         padding: 10px 16px;
                         border-radius: 10px;
-                        letter-spacing: -0.01em;
                         white-space: nowrap;
-                        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-                        border: 1px solid transparent;
-                        overflow: hidden;
-                    }
-
-                    .proxmox-tab-link::before {
-                        content: '';
-                        position: absolute;
-                        inset: 0;
-                        background: linear-gradient(135deg, 
-                            rgba(37, 99, 235, 0.08), 
-                            rgba(59, 130, 246, 0.05));
-                        opacity: 0;
-                        transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-                        z-index: 0;
-                    }
-
-                    .proxmox-tab-link:hover::before {
-                        opacity: 1;
-                    }
-
-                    .proxmox-tab-link span {
-                        position: relative;
-                        z-index: 1;
+                        transition: all 0.15s ease;
+                        color: #64748b;
+                        background: transparent;
                     }
 
                     .proxmox-tab-link:hover {
-                        transform: translateY(-1px);
-                        border-color: rgba(37, 99, 235, 0.15);
+                        background: rgba(70, 95, 255, 0.06);
+                        color: #475569;
+                    }
+
+                    .dark .proxmox-tab-link {
+                        color: #94a3b8;
+                    }
+
+                    .dark .proxmox-tab-link:hover {
+                        background: rgba(70, 95, 255, 0.1);
+                        color: #cbd5e1;
                     }
 
                     .proxmox-tab-link.active {
-                        background: linear-gradient(135deg, 
-                            rgba(37, 99, 235, 0.12), 
-                            rgba(59, 130, 246, 0.08));
-                        border-color: rgba(37, 99, 235, 0.25);
-                        box-shadow: 
-                            0 2px 8px rgba(37, 99, 235, 0.15),
-                            inset 0 1px 0 rgba(255, 255, 255, 0.1);
-                        color: rgb(37, 99, 235);
+                        background: linear-gradient(135deg, #465fff 0%, #6366f1 100%);
+                        color: white;
+                        box-shadow: 0 2px 8px rgba(70, 95, 255, 0.3);
                     }
 
                     .dark .proxmox-tab-link.active {
-                        background: linear-gradient(135deg, 
-                            rgba(59, 130, 246, 0.18), 
-                            rgba(37, 99, 235, 0.12));
-                        border-color: rgba(59, 130, 246, 0.35);
-                        color: rgb(96, 165, 250);
+                        background: linear-gradient(135deg, #465fff 0%, #818cf8 100%);
+                        box-shadow: 0 2px 12px rgba(70, 95, 255, 0.4);
                     }
 
-                    .proxmox-tab-link:not(.active) {
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        color: color-mix(in srgb, var(--color-base) 65%, transparent);
+                    .proxmox-tab-link .tab-icon {
+                        width: 16px;
+                        height: 16px;
+                        opacity: 0.7;
+                        transition: opacity 0.15s ease;
                     }
 
-                    .dark .proxmox-tab-link:not(.active) {
-                        color: color-mix(in srgb, var(--color-base) 65%, transparent);
+                    .proxmox-tab-link.active .tab-icon,
+                    .proxmox-tab-link:hover .tab-icon {
+                        opacity: 1;
                     }
 
-                    /* Modern Toggle Switch */
+                    /* TailAdmin Toggle Switch */
                     .modern-toggle-container {
                         display: inline-flex;
                         align-items: center;
-                        gap: 12px;
-                        padding: 6px 12px;
-                        background: color-mix(in srgb, var(--color-background) 50%, transparent);
-                        border: 1px solid color-mix(in srgb, var(--color-neutral) 40%, transparent);
-                        border-radius: 12px;
-                        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
-                        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+                        gap: 10px;
+                        padding: 6px 14px;
+                        background: rgba(241, 245, 249, 0.8);
+                        border: 1px solid rgba(226, 232, 240, 0.8);
+                        border-radius: 10px;
+                        transition: all 0.2s ease;
                     }
 
                     .dark .modern-toggle-container {
-                        background: color-mix(in srgb, var(--color-background) 60%, transparent);
-                        border-color: color-mix(in srgb, var(--color-neutral) 50%, transparent);
+                        background: rgba(30, 41, 59, 0.6);
+                        border-color: rgba(51, 65, 85, 0.6);
                     }
 
                     .modern-toggle-label {
-                        font-size: 0.75rem;
+                        font-size: 0.6875rem;
                         font-weight: 600;
-                        letter-spacing: 0.02em;
+                        letter-spacing: 0.03em;
                         text-transform: uppercase;
-                        transition: all 0.2s ease;
+                        transition: all 0.15s ease;
                         user-select: none;
                     }
 
                     .modern-toggle-label.inactive {
-                        color: color-mix(in srgb, var(--color-base) 40%, transparent);
+                        color: #94a3b8;
                     }
 
                     .modern-toggle-label.active {
-                        color: rgb(37, 99, 235);
+                        color: #465fff;
                     }
 
                     .dark .modern-toggle-label.active {
-                        color: rgb(96, 165, 250);
+                        color: #818cf8;
                     }
 
                     .dark .modern-toggle-label.inactive {
-                        color: color-mix(in srgb, var(--color-base) 40%, transparent);
+                        color: #64748b;
                     }
 
                     .modern-toggle-switch {
                         position: relative;
-                        width: 48px;
-                        height: 26px;
-                        background: linear-gradient(135deg, 
-                            rgba(156, 163, 175, 0.4), 
-                            rgba(209, 213, 219, 0.4));
-                        border-radius: 13px;
+                        width: 44px;
+                        height: 24px;
+                        background: #e2e8f0;
+                        border-radius: 12px;
                         cursor: pointer;
-                        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-                        border: 1px solid rgba(var(--neutral-rgb, 156, 163, 175), 0.2);
-                        box-shadow: 
-                            inset 0 1px 3px rgba(0, 0, 0, 0.1),
-                            0 1px 2px rgba(0, 0, 0, 0.05);
+                        transition: all 0.2s ease;
                     }
 
                     .dark .modern-toggle-switch {
-                        background: linear-gradient(135deg, 
-                            rgba(55, 65, 81, 0.6), 
-                            rgba(75, 85, 99, 0.6));
-                        border-color: rgba(var(--neutral-rgb, 75, 85, 99), 0.4);
+                        background: #334155;
                     }
 
                     .modern-toggle-switch.active {
-                        background: linear-gradient(135deg, 
-                            rgb(37, 99, 235), 
-                            rgb(59, 130, 246));
-                        border-color: rgba(37, 99, 235, 0.3);
-                        box-shadow: 
-                            0 0 0 3px rgba(37, 99, 235, 0.1),
-                            inset 0 1px 3px rgba(0, 0, 0, 0.15),
-                            0 2px 6px rgba(37, 99, 235, 0.25);
+                        background: linear-gradient(135deg, #465fff 0%, #6366f1 100%);
+                        box-shadow: 0 0 0 3px rgba(70, 95, 255, 0.15);
                     }
 
                     .dark .modern-toggle-switch.active {
-                        background: linear-gradient(135deg, 
-                            rgb(59, 130, 246), 
-                            rgb(96, 165, 250));
-                        box-shadow: 
-                            0 0 0 3px rgba(59, 130, 246, 0.15),
-                            inset 0 1px 3px rgba(0, 0, 0, 0.2),
-                            0 2px 8px rgba(59, 130, 246, 0.3);
+                        background: linear-gradient(135deg, #465fff 0%, #818cf8 100%);
+                        box-shadow: 0 0 0 3px rgba(70, 95, 255, 0.2);
                     }
 
                     .modern-toggle-handle {
@@ -1568,21 +1560,14 @@
                         left: 2px;
                         width: 20px;
                         height: 20px;
-                        background: linear-gradient(135deg, 
-                            rgb(255, 255, 255), 
-                            rgb(249, 250, 251));
+                        background: white;
                         border-radius: 50%;
-                        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-                        box-shadow: 
-                            0 2px 4px rgba(0, 0, 0, 0.15),
-                            0 0 0 1px rgba(0, 0, 0, 0.05);
+                        transition: transform 0.2s ease;
+                        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
                     }
 
                     .modern-toggle-switch.active .modern-toggle-handle {
-                        transform: translateX(22px);
-                        box-shadow: 
-                            0 3px 8px rgba(0, 0, 0, 0.2),
-                            0 0 0 1px rgba(255, 255, 255, 0.1);
+                        transform: translateX(20px);
                     }
 
                     .modern-toggle-switch.disabled {
@@ -1594,7 +1579,7 @@
                     @keyframes tabSlideIn {
                         from {
                             opacity: 0;
-                            transform: translateY(-8px);
+                            transform: translateY(-4px);
                         }
                         to {
                             opacity: 1;
@@ -1603,17 +1588,16 @@
                     }
 
                     .proxmox-tab-wrapper {
-                        animation: tabSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                        animation: tabSlideIn 0.2s ease-out;
                         display: flex;
                         align-items: center;
                     }
 
-                    /* Dropdown Styles */
+                    /* TailAdmin Dropdown Styles */
                     .dropdown-wrapper {
                         position: relative;
                         display: flex;
                         align-items: center;
-                        
                     }
 
                     .dropdown-trigger {
@@ -1623,9 +1607,10 @@
                     }
 
                     .dropdown-icon {
-                        transition: transform 0.2s ease;
+                        transition: transform 0.15s ease;
                         width: 14px;
                         height: 14px;
+                        opacity: 0.6;
                     }
 
                     .dropdown-wrapper.open .dropdown-icon {
@@ -1637,64 +1622,77 @@
                         top: calc(100% + 8px);
                         left: 50%;
                         transform: translateX(-50%);
-                        min-width: 180px;
-                        background: rgba(255, 255, 255, 0.705);
-                        backdrop-filter: blur(10px);
-                        border: 1px solid rgba(209, 213, 219, 0.3);
+                        min-width: 200px;
+                        background: white;
+                        border: 1px solid #e2e8f0;
                         border-radius: 12px;
-                        box-shadow: 
-                            0 4px 16px rgba(0, 0, 0, 0.15),
-                            0 0 0 1px rgba(0, 0, 0, 0.05);
+                        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
                         z-index: 100;
                         overflow: hidden;
+                        padding: 6px;
                     }
 
                     .dark .dropdown-menu {
-                        background: rgba(30, 30, 35, 0.98);
-                        border-color: rgba(75, 85, 99, 0.4);
-                        box-shadow: 
-                            0 4px 20px rgba(0, 0, 0, 0.5),
-                            0 0 0 1px rgba(255, 255, 255, 0.1);
+                        background: #1e293b;
+                        border-color: #334155;
+                        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
                     }
 
                     .dropdown-item {
-                        display: block;
-                        padding: 10px 16px;
-                        font-size: 0.8125rem;
-                        font-weight: 600;
-                        transition: all 0.2s ease;
-                        border-left: 3px solid transparent;
-                        color: var(--color-base);
+                        display: flex;
+                        align-items: center;
+                        gap: 10px;
+                        padding: 10px 14px;
+                        font-size: 0.875rem;
+                        font-weight: 500;
+                        transition: all 0.15s ease;
+                        border-radius: 8px;
+                        color: #475569;
+                    }
+
+                    .dark .dropdown-item {
+                        color: #94a3b8;
                     }
 
                     .dropdown-item:hover {
-                        background: linear-gradient(135deg, 
-                            rgba(37, 99, 235, 0.15), 
-                            rgba(59, 130, 246, 0.1));
-                        border-left-color: rgba(37, 99, 235, 0.6);
-                        color: var(--color-base);
+                        background: rgba(70, 95, 255, 0.08);
+                        color: #465fff;
+                    }
+
+                    .dark .dropdown-item:hover {
+                        background: rgba(70, 95, 255, 0.12);
+                        color: #818cf8;
                     }
 
                     .dropdown-item.active {
-                        background: linear-gradient(135deg, 
-                            rgba(37, 99, 235, 0.15), 
-                            rgba(59, 130, 246, 0.1));
-                        border-left-color: rgb(37, 99, 235);
-                        color: rgb(37, 99, 235);
+                        background: linear-gradient(135deg, rgba(70, 95, 255, 0.12) 0%, rgba(99, 102, 241, 0.08) 100%);
+                        color: #465fff;
                     }
 
                     .dark .dropdown-item.active {
-                        background: linear-gradient(135deg, 
-                            rgba(59, 130, 246, 0.2), 
-                            rgba(37, 99, 235, 0.15));
-                        border-left-color: rgb(96, 165, 250);
-                        color: rgb(96, 165, 250);
+                        background: linear-gradient(135deg, rgba(70, 95, 255, 0.18) 0%, rgba(129, 140, 248, 0.12) 100%);
+                        color: #818cf8;
+                    }
+
+                    .dropdown-item .item-icon {
+                        width: 16px;
+                        height: 16px;
+                        opacity: 0.7;
+                    }
+
+                    .dropdown-item:hover .item-icon,
+                    .dropdown-item.active .item-icon {
+                        opacity: 1;
                     }
 
                     .dropdown-divider {
                         height: 1px;
-                        background: color-mix(in srgb, var(--color-neutral) 30%, transparent);
-                        margin: 4px 0;
+                        background: #e2e8f0;
+                        margin: 6px 0;
+                    }
+
+                    .dark .dropdown-divider {
+                        background: #334155;
                     }
                 </style>
                 
@@ -1706,6 +1704,7 @@
                                     @php
                                         $isAdvancedTab = $tab['advanced'] ?? false;
                                         $isDropdown = $tab['dropdown'] ?? false;
+                                        $tabIcon = $tab['icon'] ?? null;
                                         
                                         // Check if current view is in dropdown items
                                         $isDropdownActive = false;
@@ -1734,6 +1733,9 @@
                                             <button @click="open = !open"
                                                 class="proxmox-tab-link {{ $isDropdownActive ? 'active' : '' }}">
                                                 <span class="dropdown-trigger">
+                                                    @if($tabIcon)
+                                                        <x-dynamic-component :component="$tabIcon" class="tab-icon" />
+                                                    @endif
                                                     {{ $tab['label'] }}
                                                     <svg class="dropdown-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
@@ -1742,16 +1744,17 @@
                                             </button>
                                             
                                             <div x-show="open"
-                                                 x-transition:enter="transition ease-out duration-200"
-                                                 x-transition:enter-start="opacity-0 scale-95 -translate-y-2"
+                                                 x-transition:enter="transition ease-out duration-150"
+                                                 x-transition:enter-start="opacity-0 scale-95 -translate-y-1"
                                                  x-transition:enter-end="opacity-100 scale-100 translate-y-0"
-                                                 x-transition:leave="transition ease-in duration-150"
+                                                 x-transition:leave="transition ease-in duration-100"
                                                  x-transition:leave-start="opacity-100 scale-100"
                                                  x-transition:leave-end="opacity-0 scale-95"
                                                  class="dropdown-menu">
                                                 @foreach($tab['items'] as $itemIndex => $item)
                                                     @php
                                                         $itemAdvanced = $item['advanced'] ?? false;
+                                                        $itemIcon = $item['icon'] ?? null;
                                                     @endphp
                                                     <div @if($itemAdvanced)
                                                              x-show="isAdvancedView"
@@ -1759,6 +1762,9 @@
                                                         <a href="{{ $item['route'] }}" wire:navigate
                                                            class="dropdown-item {{ $view === $item['view'] ? 'active' : '' }}"
                                                            @click="open = false">
+                                                            @if($itemIcon)
+                                                                <x-dynamic-component :component="$itemIcon" class="item-icon" />
+                                                            @endif
                                                             {{ $item['label'] }}
                                                         </a>
                                                         @if($itemIndex < count($tab['items']) - 1 && $itemAdvanced && !($tab['items'][$itemIndex + 1]['advanced'] ?? false))
@@ -1772,15 +1778,18 @@
                                         <div class="proxmox-tab-wrapper"
                                              @if($isAdvancedTab)
                                                  x-show="isAdvancedView"
-                                                 x-transition:enter="transition ease-out duration-200"
+                                                 x-transition:enter="transition ease-out duration-150"
                                                  x-transition:enter-start="opacity-0 scale-95"
                                                  x-transition:enter-end="opacity-100 scale-100"
-                                                 x-transition:leave="transition ease-in duration-150"
+                                                 x-transition:leave="transition ease-in duration-100"
                                                  x-transition:leave-start="opacity-100 scale-100"
                                                  x-transition:leave-end="opacity-0 scale-95"
                                              @endif>
                                             <a href="{{ $tab['route'] }}" wire:navigate
                                                 class="proxmox-tab-link {{ $view === $tab['view'] ? 'active' : '' }}">
+                                                @if($tabIcon)
+                                                    <x-dynamic-component :component="$tabIcon" class="tab-icon" />
+                                                @endif
                                                 <span>{{ $tab['label'] }}</span>
                                             </a>
                                         </div>
@@ -1838,20 +1847,17 @@
                 ">
                     <style>
                         .mobile-nav-button {
-                            background: color-mix(in srgb, var(--color-background-secondary) 60%, transparent);
-                            backdrop-filter: blur(12px);
-                            border: 1px solid color-mix(in srgb, var(--color-neutral) 30%, transparent);
+                            background: rgba(255, 255, 255, 0.9);
+                            border: 1px solid #e2e8f0;
                             border-radius: 12px;
                             padding: 12px 16px;
-                            box-shadow: 
-                                0 1px 3px rgba(0, 0, 0, 0.05),
-                                0 0 0 1px rgba(0, 0, 0, 0.02);
-                            transition: all 0.2s ease;
+                            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+                            transition: all 0.15s ease;
                         }
 
                         .dark .mobile-nav-button {
-                            background: color-mix(in srgb, var(--color-background-secondary) 80%, transparent);
-                            border-color: color-mix(in srgb, var(--color-neutral) 40%, transparent);
+                            background: rgba(30, 41, 59, 0.95);
+                            border-color: #334155;
                         }
 
                         .mobile-nav-button:active {
@@ -1859,43 +1865,52 @@
                         }
 
                         .mobile-dropdown {
-                            background: rgba(var(--background-secondary-rgb, 255, 255, 255), 0.95);
-                            backdrop-filter: blur(16px);
-                            border: 1px solid rgba(var(--neutral-rgb, 229, 231, 235), 0.3);
+                            background: white;
+                            border: 1px solid #e2e8f0;
                             border-radius: 14px;
-                            box-shadow: 
-                                0 4px 16px rgba(0, 0, 0, 0.1),
-                                0 0 0 1px rgba(0, 0, 0, 0.03);
+                            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
                         }
 
                         .dark .mobile-dropdown {
-                            background: rgba(var(--background-secondary-rgb, 31, 41, 55), 0.95);
-                            border-color: rgba(var(--neutral-rgb, 75, 85, 99), 0.4);
-                            box-shadow: 
-                                0 4px 16px rgba(0, 0, 0, 0.3),
-                                0 0 0 1px rgba(255, 255, 255, 0.05);
+                            background: #1e293b;
+                            border-color: #334155;
+                            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
                         }
 
                         .mobile-tab-item {
+                            display: flex;
+                            align-items: center;
+                            gap: 10px;
                             padding: 12px 16px;
-                            transition: all 0.2s ease;
-                            border-left: 3px solid transparent;
+                            transition: all 0.15s ease;
+                            border-radius: 8px;
+                            margin: 2px 6px;
+                            color: #475569;
+                        }
+
+                        .dark .mobile-tab-item {
+                            color: #94a3b8;
                         }
 
                         .mobile-tab-item:hover {
-                            background: rgba(37, 99, 235, 0.08);
-                            border-left-color: rgba(37, 99, 235, 0.3);
+                            background: rgba(70, 95, 255, 0.08);
+                            color: #465fff;
+                        }
+
+                        .dark .mobile-tab-item:hover {
+                            background: rgba(70, 95, 255, 0.12);
+                            color: #818cf8;
                         }
 
                         .mobile-tab-item.active {
-                            background: rgba(37, 99, 235, 0.12);
-                            border-left-color: rgb(37, 99, 235);
-                            font-weight: 600;
+                            background: linear-gradient(135deg, rgba(70, 95, 255, 0.12) 0%, rgba(99, 102, 241, 0.08) 100%);
+                            color: #465fff;
+                            font-weight: 500;
                         }
 
                         .dark .mobile-tab-item.active {
-                            background: rgba(59, 130, 246, 0.15);
-                            border-left-color: rgb(96, 165, 250);
+                            background: linear-gradient(135deg, rgba(70, 95, 255, 0.18) 0%, rgba(129, 140, 248, 0.12) 100%);
+                            color: #818cf8;
                         }
 
                         .mobile-toggle-compact {
@@ -1903,14 +1918,14 @@
                             align-items: center;
                             gap: 8px;
                             padding: 8px 12px;
-                            background: rgba(var(--background-rgb, 255, 255, 255), 0.5);
-                            border: 1px solid rgba(var(--neutral-rgb, 229, 231, 235), 0.4);
+                            background: #f1f5f9;
+                            border: 1px solid #e2e8f0;
                             border-radius: 10px;
                         }
 
                         .dark .mobile-toggle-compact {
-                            background: rgba(var(--background-rgb, 17, 24, 39), 0.6);
-                            border-color: rgba(var(--neutral-rgb, 75, 85, 99), 0.5);
+                            background: rgba(30, 41, 59, 0.6);
+                            border-color: #334155;
                         }
 
                         .mobile-toggle-label-compact {
@@ -1918,24 +1933,24 @@
                             font-weight: 600;
                             text-transform: uppercase;
                             letter-spacing: 0.03em;
+                            color: #64748b;
                         }
 
                         .mobile-toggle-switch-compact {
                             width: 40px;
                             height: 22px;
-                            background: linear-gradient(135deg, 
-                                rgba(156, 163, 175, 0.4), 
-                                rgba(209, 213, 219, 0.4));
+                            background: #e2e8f0;
                             border-radius: 11px;
                             position: relative;
-                            transition: all 0.3s ease;
-                            border: 1px solid rgba(var(--neutral-rgb, 156, 163, 175), 0.2);
+                            transition: all 0.2s ease;
+                        }
+
+                        .dark .mobile-toggle-switch-compact {
+                            background: #334155;
                         }
 
                         .mobile-toggle-switch-compact.active {
-                            background: linear-gradient(135deg, 
-                                rgb(37, 99, 235), 
-                                rgb(59, 130, 246));
+                            background: linear-gradient(135deg, #465fff 0%, #6366f1 100%);
                         }
 
                         .dark .mobile-toggle-switch-compact.active {
diff --git a/extensions/Servers/Proxmox/views/overview.blade.php b/extensions/Servers/Proxmox/views/overview.blade.php
index 881b1364b..b9f8d578d 100644
--- a/extensions/Servers/Proxmox/views/overview.blade.php
+++ b/extensions/Servers/Proxmox/views/overview.blade.php
@@ -150,54 +150,70 @@
             </div>
         </div>
         <style>
+            /* TailAdmin Progress Bar Styles */
             progress {
-                border-radius: var(--radius-lg);
-                background-color: hsl(var(--color-background));
-                border: 1px solid hsl(var(--color-neutral));
+                border-radius: 8px;
+                background-color: #f1f5f9;
+                border: none;
                 width: 100%;
                 overflow: hidden;
+                height: 8px;
+            }
+
+            .dark progress {
+                background-color: #334155;
             }
 
             progress[value]::-webkit-progress-bar {
-                background-color: hsl(var(--color-background));
+                background-color: #f1f5f9;
+                border-radius: 8px;
+            }
+
+            .dark progress[value]::-webkit-progress-bar {
+                background-color: #334155;
             }
 
             progress[value]#memory::-webkit-progress-value {
-                background-color: color-mix(in oklab, hsl(var(--color-success)) 60%, transparent);
-                border: 1px solid hsl(var(--color-success));
-                border-radius: var(--radius-lg);
+                background: linear-gradient(90deg, #22c55e 0%, #10b981 100%);
+                border-radius: 8px;
             }
 
             progress[value]#memory::-moz-progress-bar {
-                background-color: color-mix(in oklab, hsl(var(--color-success)) 60%, transparent);
-                border: 1px solid hsl(var(--color-success));
-                border-radius: var(--radius-lg);
+                background: linear-gradient(90deg, #22c55e 0%, #10b981 100%);
+                border-radius: 8px;
             }
 
             progress[value]#cpu::-webkit-progress-value {
-                background-color: color-mix(in oklab, hsl(var(--color-info)) 60%, transparent);
-                border: 1px solid hsl(var(--color-info));
-                border-radius: var(--radius-lg);
+                background: linear-gradient(90deg, #465fff 0%, #818cf8 100%);
+                border-radius: 8px;
             }
 
             progress[value]#cpu::-moz-progress-bar {
-                background-color: color-mix(in oklab, hsl(var(--color-info)) 60%, transparent);
-                border: 1px solid hsl(var(--color-info));
-                border-radius: var(--radius-lg);
+                background: linear-gradient(90deg, #465fff 0%, #818cf8 100%);
+                border-radius: 8px;
             }
 
             .formRight select {
-                background-color: hsl(var(--color-background));
-                border: 1px solid hsl(var(--color-neutral));
-                border-radius: 0.375rem;
-                padding: 0.5rem 0.75rem;
+                background-color: white;
+                border: 1px solid #e2e8f0;
+                border-radius: 8px;
+                padding: 0.625rem 1rem;
                 font-size: 0.875rem;
                 line-height: 1.25rem;
                 outline: none;
+                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+                transition: all 0.15s ease;
             }
+
+            .dark .formRight select {
+                background-color: #1e293b;
+                border-color: #334155;
+            }
+
             .formRight select:focus {
                 outline: none;
-                box-shadow: 0 0 0 2px hsl(var(--color-secondary));
+                border-color: #465fff;
+                box-shadow: 0 0 0 3px rgba(70, 95, 255, 0.1);
             }
         </style>