From a90aba582dd4b859c891a7aa370561c2a3ef2ccc Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 17 Dec 2025 14:36:53 -0500
Subject: [PATCH] Refactor Proxmox server views for improved layout and styling

- Updated server card component to use a more compact layout with adjusted spacing and styling.
- Enhanced server status display with improved icon sizes and colors.
- Modified quick info row to use smaller text and adjusted labels for clarity.
- Refined server configuration grid for better alignment and spacing.
- Updated modal z-index values for consistent layering across various modals in statistics, storage, subdomain, and system views.
- General styling improvements for better readability and user experience.
---
 .../Servers/Proxmox/views/backups.blade.php   | 141 +--
 .../Proxmox/views/boot-order.blade.php        |  32 +-
 .../Proxmox/views/cloud-init.blade.php        |  26 +-
 .../Servers/Proxmox/views/display.blade.php   |   8 +-
 .../Servers/Proxmox/views/firewall.blade.php  |  40 +-
 .../Servers/Proxmox/views/index.blade.php     |  32 +-
 .../Servers/Proxmox/views/network.blade.php   |   8 +-
 .../Servers/Proxmox/views/overview.blade.php  | 847 ++++++------------
 .../Servers/Proxmox/views/server.blade.php    | 124 ++-
 .../Proxmox/views/statistics.blade.php        |  80 +-
 .../Servers/Proxmox/views/storage.blade.php   |  12 +-
 .../Servers/Proxmox/views/subdomain.blade.php |  12 +-
 .../Servers/Proxmox/views/system.blade.php    |  20 +-
 13 files changed, 517 insertions(+), 865 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/backups.blade.php b/extensions/Servers/Proxmox/views/backups.blade.php
index 88f0e6e96..7221df05d 100644
--- a/extensions/Servers/Proxmox/views/backups.blade.php
+++ b/extensions/Servers/Proxmox/views/backups.blade.php
@@ -1,121 +1,76 @@
 <x-proxmox::layout :server="$server" view="backups" :status="$status" :status-polling="true" :status-polling-interval="'2s'">
-    <div class="space-y-6">
+    <div class="space-y-4">
         <div class="flex items-center justify-between">
-        <div class="flex items-center gap-3">
-            <div class="flex items-center gap-2 min-w-0">
-                <h2 class="text-xl font-semibold break-words">Backup Details</h2>
-                <div class="relative" x-data="{ open: false }" x-cloak>
-                    <button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
-                        <x-ri-question-line class="size-4" />
-                    </button>
-                    <!-- Modal Backdrop -->
-                    <div x-show="open" 
-                         x-transition:enter="transition ease-out duration-300"
-                         x-transition:enter-start="opacity-0"
-                         x-transition:enter-end="opacity-100"
-                         x-transition:leave="transition ease-in duration-200"
-                         x-transition:leave-start="opacity-100"
-                         x-transition:leave-end="opacity-0"
-                         @click="open = false"
-                         @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
-                         style="display: none;">
-                    </div>
-                    <!-- Modal -->
-                    <div x-show="open"
-                         x-transition:enter="transition ease-out duration-300"
-                         x-transition:enter-start="opacity-0 scale-95"
-                         x-transition:enter-end="opacity-100 scale-100"
-                         x-transition:leave="transition ease-in duration-200"
-                         x-transition:leave-start="opacity-100 scale-100"
-                         x-transition:leave-end="opacity-0 scale-95"
-                         @click.away="open = false"
-                         @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 flex items-center justify-center p-4"
-                         style="display: none;">
-                        <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6">
-                            <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
-                                <x-ri-close-line class="size-5" />
-                            </button>
-                            <div class="flex items-center gap-3 mb-4 pr-8">
-                                <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
-                                    <x-ri-database-2-line class="size-5 text-primary" />
-                                </div>
-                                <h6 class="font-sans text-lg font-semibold leading-tight text-base">
-                                    Backup Details
-                                </h6>
-                            </div>
-                            <p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
-                                View and manage backups for this virtual machine. Backups are stored on the KVM server and can be restored or deleted as needed.
-                            </p>
-                            <div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
-                                <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                    <span class="font-semibold text-base/90">Restore:</span> Restores the virtual machine to the state captured in the backup. The VM must be powered off before restoring.
-                                </p>
-                                <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                    <span class="font-semibold text-base/90">Delete:</span> Permanently removes a backup from the server. This action cannot be undone.
-                                </p>
-                                <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                    <span class="font-semibold text-base/90">Note:</span> Backups include the entire VM state including disk data, configuration, and metadata. Ensure you have sufficient storage quota for backups.
-                                </p>
+        <div class="flex items-center gap-2">
+            <h2 class="text-lg font-semibold">Backups</h2>
+            <div class="relative" x-data="{ open: false }" x-cloak>
+                <button type="button" @click="open = true" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+                    <x-ri-question-line class="size-4" />
+                </button>
+                <div x-show="open" @click="open = false" @keydown.escape.window="open = false"
+                     class="fixed inset-0 z-[60] bg-gray-900 bg-opacity-50 backdrop-blur-sm" style="display: none;"></div>
+                <div x-show="open" @click.away="open = false"
+                     class="fixed inset-0 z-[60] flex items-center justify-center p-4" style="display: none;">
+                    <div class="relative w-full max-w-xl max-h-[90vh] overflow-y-auto bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 shadow-xl p-4">
+                        <button @click="open = false" class="absolute top-3 right-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+                            <x-ri-close-line class="size-4" />
+                        </button>
+                        <div class="flex items-center gap-2 mb-3 pr-6">
+                            <div class="flex items-center justify-center w-8 h-8 rounded bg-blue-50 dark:bg-blue-900">
+                                <x-ri-database-2-line class="size-4 text-primary" />
                             </div>
+                            <h6 class="text-base font-semibold">Backup Details</h6>
+                        </div>
+                        <p class="text-sm text-gray-700 dark:text-gray-300 mb-3">Manage VM backups stored on the KVM server.</p>
+                        <div class="pt-3 border-t border-gray-200 dark:border-gray-700 space-y-2 text-xs text-gray-600 dark:text-gray-400">
+                            <p><strong>Restore:</strong> Restores VM state. Must be powered off.</p>
+                            <p><strong>Delete:</strong> Permanently removes backup. Cannot be undone.</p>
+                            <p><strong>Note:</strong> Includes disk data, config, and metadata.</p>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
 
-        <div>
-            <div class="flex flex-row gap-2 w-fit hidden lg:flex">
-                <livewire:proxmox.backups.create :server="$server" />
-            </div>
+        <div class="flex flex-row gap-2 w-fit hidden lg:flex">
+            <livewire:proxmox.backups.create :server="$server" />
+        </div>
         </div>
 
-        </div>
-
-        <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm">
+        <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg shadow-sm">
             <div class="overflow-x-auto rounded-lg">
-                <table class="min-w-full divide-y divide-neutral/40 text-sm">
+                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 text-sm">
                     <thead>
-                        <tr class="text-left text-base font-semibold text-base/70">
-                            <th class="px-4 py-3">Backup</th>
-                            <th class="px-4 py-3">Size</th>
-                            <th class="px-4 py-3">Created At</th>
-                            <th class="px-4 py-3 text-center">Actions</th>
+                        <tr class="text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">
+                            <th class="px-3 py-2">Backup</th>
+                            <th class="px-3 py-2">Size</th>
+                            <th class="px-3 py-2">Created</th>
+                            <th class="px-3 py-2 text-center">Actions</th>
                         </tr>
                     </thead>
-                    <tbody class="divide-y divide-neutral/20 text-base text-base/80">
+                    <tbody class="divide-y divide-gray-200 dark:divide-gray-700 text-gray-700 dark:text-gray-300">
                         @forelse($backups as $backup)
                             @php $backup = (object) $backup; @endphp
-                            <tr class="hover:bg-background/60 transition-colors">
-                                <td class="px-4 py-4 align-middle">
-                                    <p class="font-semibold text-base/90 break-words">{{ $backup->notes ?: '—' }}</p>
-                                </td>
-                                <td class="px-4 py-4 align-middle">
-                                    <span class="font-medium">{{ Illuminate\Support\Number::fileSize($backup->size, 2) }}</span>
-                                </td>
-                                <td class="px-4 py-4 align-middle">
-                                    <span class="font-medium">{{ date('Y-m-d H:i:s', $backup->ctime) }}</span>
-                                </td>
-                                <td class="px-4 py-4 align-middle">
-                                    <div class="flex flex-wrap items-center justify-center gap-2">
+                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
+                                <td class="px-3 py-3"><span class="font-medium text-gray-800 dark:text-gray-200">{{ $backup->notes ?: '—' }}</span></td>
+                                <td class="px-3 py-3">{{ Illuminate\Support\Number::fileSize($backup->size, 2) }}</td>
+                                <td class="px-3 py-3">{{ date('Y-m-d H:i', $backup->ctime) }}</td>
+                                <td class="px-3 py-3">
+                                    <div class="flex flex-wrap items-center justify-center gap-1">
                                         <button @click="$wire.set('showRestore', true); $wire.set('volid', '{{ $backup->volid }}')"
-                                            class="bg-background border border-neutral px-3 py-2 rounded-md text-sm font-semibold flex items-center gap-2">
-                                            <x-ri-checkbox-circle-fill class="w-4 h-4"/> Restore
+                                            class="bg-background border border-neutral px-2 py-1 rounded text-xs font-semibold flex items-center gap-1">
+                                            <x-ri-checkbox-circle-fill class="w-3 h-3"/> Restore
                                         </button>
-                                        <button
-                                            wire:click="promptDelete('{{ $backup->volid }}')"
-                                            class="bg-background border border-neutral px-3 py-2 rounded-md text-sm font-semibold flex items-center gap-2 text-error">
-                                            <x-ri-delete-bin-fill class="w-4 h-4"/> Delete
+                                        <button wire:click="promptDelete('{{ $backup->volid }}')"
+                                            class="bg-background border border-neutral px-2 py-1 rounded text-xs font-semibold flex items-center gap-1 text-error">
+                                            <x-ri-delete-bin-fill class="w-3 h-3"/> Delete
                                         </button>
                                     </div>
                                 </td>
                             </tr>
                         @empty
                             <tr>
-                                <td colspan="4" class="px-4 py-6 text-center text-base/50 text-sm">
-                                    No backups available for this server.
-                                </td>
+                                <td colspan="4" class="px-3 py-4 text-center text-gray-400 text-sm">No backups available.</td>
                             </tr>
                         @endforelse
                     </tbody>
diff --git a/extensions/Servers/Proxmox/views/boot-order.blade.php b/extensions/Servers/Proxmox/views/boot-order.blade.php
index 1b1597dc5..40b751842 100644
--- a/extensions/Servers/Proxmox/views/boot-order.blade.php
+++ b/extensions/Servers/Proxmox/views/boot-order.blade.php
@@ -88,7 +88,7 @@
                          x-transition:leave-end="opacity-0"
                          @click="open = false"
                          @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                         class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                          style="display: none;">
                     </div>
                     <!-- Modal -->
@@ -101,7 +101,7 @@
                          x-transition:leave-end="opacity-0 scale-95"
                          @click.away="open = false"
                          @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                         class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                          style="display: none;">
                         <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6">
                             <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -161,7 +161,7 @@
                                      x-transition:leave-end="opacity-0"
                                      @click="open = false"
                                      @keydown.escape.window="open = false"
-                                     class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                                     class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                                      style="display: none;">
                                 </div>
                                 <!-- Modal -->
@@ -174,7 +174,7 @@
                                      x-transition:leave-end="opacity-0 scale-95"
                                      @click.away="open = false"
                                      @keydown.escape.window="open = false"
-                                     class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                                     class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                                      style="display: none;">
                                     <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6">
                                         <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -243,7 +243,7 @@
                                      x-transition:leave-end="opacity-0"
                                      @click="open = false"
                                      @keydown.escape.window="open = false"
-                                     class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                                     class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                                      style="display: none;">
                                 </div>
                                 <!-- Modal -->
@@ -256,7 +256,7 @@
                                      x-transition:leave-end="opacity-0 scale-95"
                                      @click.away="open = false"
                                      @keydown.escape.window="open = false"
-                                     class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                                     class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                                      style="display: none;">
                                     <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6">
                                         <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -370,7 +370,7 @@
                                      x-transition:leave-end="opacity-0"
                                      @click="open = false"
                                      @keydown.escape.window="open = false"
-                                     class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                                     class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                                      style="display: none;">
                                 </div>
                                 <!-- Modal -->
@@ -383,7 +383,7 @@
                                      x-transition:leave-end="opacity-0 scale-95"
                                      @click.away="open = false"
                                      @keydown.escape.window="open = false"
-                                     class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                                     class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                                      style="display: none;">
                                     <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6">
                                         <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -472,7 +472,7 @@
                                      x-transition:leave-end="opacity-0"
                                      @click="open = false"
                                      @keydown.escape.window="open = false"
-                                     class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                                     class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                                      style="display: none;">
                                 </div>
                                 <!-- Modal -->
@@ -485,7 +485,7 @@
                                      x-transition:leave-end="opacity-0 scale-95"
                                      @click.away="open = false"
                                      @keydown.escape.window="open = false"
-                                     class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                                     class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                                      style="display: none;">
                                     <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6">
                                         <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -589,7 +589,7 @@
                                      x-transition:leave-end="opacity-0"
                                      @click="open = false"
                                      @keydown.escape.window="open = false"
-                                     class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                                     class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                                      style="display: none;">
                                 </div>
                                 <!-- Modal -->
@@ -602,7 +602,7 @@
                                      x-transition:leave-end="opacity-0 scale-95"
                                      @click.away="open = false"
                                      @keydown.escape.window="open = false"
-                                     class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                                     class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                                      style="display: none;">
                                     <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6">
                                         <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -689,7 +689,7 @@
                          x-transition:leave-end="opacity-0"
                          @click="open = false"
                          @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                         class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                          style="display: none;">
                     </div>
                     <!-- Modal -->
@@ -702,7 +702,7 @@
                          x-transition:leave-end="opacity-0 scale-95"
                          @click.away="open = false"
                          @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                         class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                          style="display: none;">
                         <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6">
                             <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -748,7 +748,7 @@
                          x-transition:leave-end="opacity-0"
                          @click="open = false"
                          @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                         class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                          style="display: none;">
                     </div>
                     <!-- Modal -->
@@ -761,7 +761,7 @@
                          x-transition:leave-end="opacity-0 scale-95"
                          @click.away="open = false"
                          @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                         class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                          style="display: none;">
                         <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6">
                             <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
diff --git a/extensions/Servers/Proxmox/views/cloud-init.blade.php b/extensions/Servers/Proxmox/views/cloud-init.blade.php
index baf2b6f05..7d3a2a44a 100644
--- a/extensions/Servers/Proxmox/views/cloud-init.blade.php
+++ b/extensions/Servers/Proxmox/views/cloud-init.blade.php
@@ -53,7 +53,7 @@
                     <button type="button" @click="open = true" class="text-base/50 hover:text-gray-600 dark:text-gray-400 transition-colors">
                         <x-ri-question-line class="size-4" />
                     </button>
-                    <div x-show="open" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center p-4">
+                    <div x-show="open" x-transition.opacity class="fixed inset-0 z-[60] flex items-center justify-center p-4">
                         <div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
                         <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6"
                              x-on:keydown.escape.window="open = false">
@@ -102,7 +102,7 @@
                                 <button type="button" @click="open = true" class="text-base/50 hover:text-gray-600 dark:text-gray-400 transition-colors">
                                     <x-ri-question-line class="size-4" />
                                 </button>
-                                <div x-show="open" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center p-4">
+                                <div x-show="open" x-transition.opacity class="fixed inset-0 z-[60] flex items-center justify-center p-4">
                                     <div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
                                     <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6"
                                          x-on:keydown.escape.window="open = false">
@@ -162,7 +162,7 @@
                         </div>
                         <p class="text-xs text-gray-500 dark:text-gray-400">Use distro-friendly names. Leave blank to keep the template default.</p>
 
-                        <div x-cloak x-show="showCiUserModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
+                        <div x-cloak x-show="showCiUserModal" x-transition.opacity class="fixed inset-0 z-[60] flex items-center justify-center">
                             <div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="showCiUserModal = false"></div>
                             <div class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
                                  x-on:keydown.escape.window="showCiUserModal = false">
@@ -225,7 +225,7 @@
                         <p class="text-xs text-gray-500 dark:text-gray-400">Matches the Overview tab control. Use Save for database only, Save &amp; Apply to push via cloud-init.</p>
 
                         @if(isset($server->password) && $server->password)
-                            <div x-cloak x-show="showPasswordViewModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
+                            <div x-cloak x-show="showPasswordViewModal" x-transition.opacity class="fixed inset-0 z-[60] flex items-center justify-center">
                                 <div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="showPasswordViewModal = false"></div>
                                 <div class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
                                      x-on:keydown.escape.window="showPasswordViewModal = false"
@@ -262,7 +262,7 @@
                             </div>
                         @endif
 
-                        <div x-cloak x-show="showPasswordEditModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
+                        <div x-cloak x-show="showPasswordEditModal" x-transition.opacity class="fixed inset-0 z-[60] flex items-center justify-center">
                             <div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="showPasswordEditModal = false; $wire.cancelEditingPassword()"></div>
                             <div class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
                                  x-on:keydown.escape.window="showPasswordEditModal = false; $wire.cancelEditingPassword()">
@@ -340,7 +340,7 @@
                                         <x-ri-close-line class="inline size-4" />
                                     </button>
 
-                                    <div x-cloak x-show="showKeyModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
+                                    <div x-cloak x-show="showKeyModal" x-transition.opacity class="fixed inset-0 z-[60] flex items-center justify-center">
                                         <div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="showKeyModal = false"></div>
                                         <div class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
                                              x-on:keydown.escape.window="showKeyModal = false">
@@ -378,7 +378,7 @@
                         </div>
                         <p class="text-xs text-gray-500 dark:text-gray-400">Add as many keys as needed. The platform management key is always kept but never shown.</p>
 
-                        <div x-cloak x-show="showAddKeyModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
+                        <div x-cloak x-show="showAddKeyModal" x-transition.opacity class="fixed inset-0 z-[60] flex items-center justify-center">
                             <div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="showAddKeyModal = false"></div>
                             <div class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
                                  x-on:keydown.escape.window="showAddKeyModal = false">
@@ -430,7 +430,7 @@
                                 <button type="button" @click="open = true" class="text-base/50 hover:text-gray-600 dark:text-gray-400 transition-colors">
                                     <x-ri-question-line class="size-4" />
                                 </button>
-                                <div x-show="open" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center p-4">
+                                <div x-show="open" x-transition.opacity class="fixed inset-0 z-[60] flex items-center justify-center p-4">
                                     <div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
                                     <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6"
                                          x-on:keydown.escape.window="open = false">
@@ -525,7 +525,7 @@
                     @endforeach
                 </div>
 
-                <div x-cloak x-show="showNetworkModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
+                <div x-cloak x-show="showNetworkModal" x-transition.opacity class="fixed inset-0 z-[60] flex items-center justify-center">
                     <div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="showNetworkModal = false; $wire.cancelEditingNetwork()"></div>
                     <div class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm shadow-xl w-full max-w-2xl mx-4 p-5 space-y-4"
                          x-on:keydown.escape.window="showNetworkModal = false; $wire.cancelEditingNetwork()">
@@ -589,7 +589,7 @@
                                 <button type="button" @click="open = true" class="text-base/50 hover:text-gray-600 dark:text-gray-400 transition-colors">
                                     <x-ri-question-line class="size-4" />
                                 </button>
-                                <div x-show="open" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center p-4">
+                                <div x-show="open" x-transition.opacity class="fixed inset-0 z-[60] flex items-center justify-center p-4">
                                     <div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
                                     <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6"
                                          x-on:keydown.escape.window="open = false">
@@ -649,7 +649,7 @@
                         </div>
                         <p class="text-xs text-gray-500 dark:text-gray-400">Appended to short hostnames for resolution.</p>
 
-                        <div x-cloak x-show="showDnsDomainModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
+                        <div x-cloak x-show="showDnsDomainModal" x-transition.opacity class="fixed inset-0 z-[60] flex items-center justify-center">
                             <div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="showDnsDomainModal = false"></div>
                             <div class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
                                  x-on:keydown.escape.window="showDnsDomainModal = false">
@@ -704,7 +704,7 @@
                         </div>
                         <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Entries are applied in order. Add one IPv4/IPv6 resolver per line.</p>
 
-                        <div x-cloak x-show="showAddDnsModal" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center">
+                        <div x-cloak x-show="showAddDnsModal" x-transition.opacity class="fixed inset-0 z-[60] flex items-center justify-center">
                             <div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="showAddDnsModal = false"></div>
                             <div class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm shadow-xl w-full max-w-xl mx-4 p-5 space-y-4"
                                  x-on:keydown.escape.window="showAddDnsModal = false">
@@ -811,7 +811,7 @@
                                 <button type="button" @click="open = true" class="text-base/50 hover:text-gray-600 dark:text-gray-400 transition-colors">
                                     <x-ri-question-line class="size-4" />
                                 </button>
-                                <div x-show="open" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center p-4">
+                                <div x-show="open" x-transition.opacity class="fixed inset-0 z-[60] flex items-center justify-center p-4">
                                     <div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
                                     <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6"
                                          x-on:keydown.escape.window="open = false">
diff --git a/extensions/Servers/Proxmox/views/display.blade.php b/extensions/Servers/Proxmox/views/display.blade.php
index 6f2ba2a47..589a75654 100644
--- a/extensions/Servers/Proxmox/views/display.blade.php
+++ b/extensions/Servers/Proxmox/views/display.blade.php
@@ -17,7 +17,7 @@
                          x-transition:leave-end="opacity-0"
                          @click="open = false"
                          @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                         class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                          style="display: none;">
                     </div>
                     <!-- Modal -->
@@ -30,7 +30,7 @@
                          x-transition:leave-end="opacity-0 scale-95"
                          @click.away="open = false"
                          @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                         class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                          style="display: none;">
                         <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6">
                             <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -86,7 +86,7 @@
                              x-transition:leave-end="opacity-0"
                              @click="open = false"
                              @keydown.escape.window="open = false"
-                             class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                             class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                              style="display: none;">
                         </div>
                         <!-- Modal -->
@@ -99,7 +99,7 @@
                              x-transition:leave-end="opacity-0 scale-95"
                              @click.away="open = false"
                              @keydown.escape.window="open = false"
-                             class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                             class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                              style="display: none;">
                             <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6">
                                 <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
diff --git a/extensions/Servers/Proxmox/views/firewall.blade.php b/extensions/Servers/Proxmox/views/firewall.blade.php
index 1ef68942e..07cbc94d8 100644
--- a/extensions/Servers/Proxmox/views/firewall.blade.php
+++ b/extensions/Servers/Proxmox/views/firewall.blade.php
@@ -254,7 +254,7 @@
 
         {{-- Policy Info Modal --}}
         @if($showPolicyInfoModal)
-            <div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
+            <div class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
                 <div class="relative w-full max-w-3xl bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-800 shadow-2xl max-h-[85vh] overflow-y-auto">
                     <button wire:click="closePolicyInfoModal" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors z-10">
                         <x-ri-close-line class="size-5" />
@@ -482,7 +482,7 @@
                                                         </button>
                                                             
                                                             {{-- IP Location Modal (same as logs) --}}
-                                                            <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click="open = false" @keydown.escape.window="open = false" class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4" style="display: none;">
+                                                            <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click="open = false" @keydown.escape.window="open = false" class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4" style="display: none;">
                                                                 <div @click.stop class="relative w-full max-w-4xl bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl max-h-[90vh] overflow-y-auto">
                                                                     <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors z-10">
                                                                     <x-ri-close-line class="size-5" />
@@ -560,7 +560,7 @@
                                                         </button>
                                                             
                                                             {{-- IP Location Modal (same structure) --}}
-                                                            <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click="open = false" @keydown.escape.window="open = false" class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4" style="display: none;">
+                                                            <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click="open = false" @keydown.escape.window="open = false" class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4" style="display: none;">
                                                                 <div @click.stop class="relative w-full max-w-4xl bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl max-h-[90vh] overflow-y-auto">
                                                                 <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors z-10">
                                                                     <x-ri-close-line class="size-5" />
@@ -986,7 +986,7 @@
                                                             </button>
                                                             
                                                             {{-- IP Location Modal --}}
-                                                            <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click="open = false" @keydown.escape.window="open = false" class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4" style="display: none;">
+                                                            <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click="open = false" @keydown.escape.window="open = false" class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4" style="display: none;">
                                                                 <div @click.stop class="relative w-full max-w-4xl bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl max-h-[90vh] overflow-y-auto">
                                                                     <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors z-10">
                                                                         <x-ri-close-line class="size-5" />
@@ -1064,7 +1064,7 @@
                                                             </button>
                                                             
                                                             {{-- IP Location Modal --}}
-                                                            <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click="open = false" @keydown.escape.window="open = false" class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4" style="display: none;">
+                                                            <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click="open = false" @keydown.escape.window="open = false" class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4" style="display: none;">
                                                                 <div @click.stop class="relative w-full max-w-4xl bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl max-h-[90vh] overflow-y-auto">
                                                                     <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors z-10">
                                                                         <x-ri-close-line class="size-5" />
@@ -1214,7 +1214,7 @@
                                                          x-transition:leave-end="opacity-0" 
                                                          @click="open = false" 
                                                          @keydown.escape.window="open = false" 
-                                                         class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4" 
+                                                         class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4" 
                                                          style="display: none;">
                                                         <div @click.stop 
                                                              class="relative w-full max-w-5xl bg-gradient-to-br from-background via-background-secondary to-background rounded-2xl border border-primary/20 shadow-2xl max-h-[90vh] overflow-hidden">
@@ -1630,7 +1630,7 @@
 
     {{-- Rule Form Modal --}}
     @if($showRuleForm)
-        <div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4" 
+        <div class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4" 
              x-data="{
                  macroDefinitions: @js($this->macroDefinitions),
                  currentMacro: @entangle('ruleMacro'),
@@ -1801,7 +1801,7 @@
     {{-- Delete Rule Modal --}}
     @if($showDeleteRuleModal && $deletingRuleIndex !== null && isset($rules[$deletingRuleIndex]))
         @php $ruleToDelete = $rules[$deletingRuleIndex]; @endphp
-        <div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
+        <div class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
             <div class="relative w-full max-w-lg bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
                 <button wire:click="cancelDeleteRule" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
                     <x-ri-close-line class="size-5" />
@@ -1835,7 +1835,7 @@
 
     {{-- Alias Form Modal --}}
     @if($showAliasForm)
-        <div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
+        <div class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
             <div class="relative w-full max-w-lg bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
                 <button wire:click="cancelAliasForm" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
                     <x-ri-close-line class="size-5" />
@@ -1876,7 +1876,7 @@
 
     {{-- Delete Alias Modal --}}
     @if($showDeleteAliasModal && $deletingAliasName)
-        <div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
+        <div class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
             <div class="relative w-full max-w-md bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
                 <button wire:click="cancelDeleteAlias" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
                 <x-ri-close-line class="size-5" />
@@ -1906,7 +1906,7 @@
 
     {{-- IPSet Form Modal --}}
     @if($showIPSetForm)
-        <div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
+        <div class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
             <div class="relative w-full max-w-lg bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
                 <button wire:click="cancelIPSetForm" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
                 <x-ri-close-line class="size-5" />
@@ -1945,7 +1945,7 @@
 
     {{-- Delete IPSet Modal --}}
     @if($showDeleteIPSetModal && $deletingIPSetName)
-        <div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
+        <div class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
             <div class="relative w-full max-w-md bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
                 <button wire:click="cancelDeleteIPSet" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
                     <x-ri-close-line class="size-5" />
@@ -1975,7 +1975,7 @@
 
     {{-- IPSet Member Form Modal --}}
     @if($showIPSetMemberForm && $selectedIPSetName)
-        <div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
+        <div class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
             <div class="relative w-full max-w-lg bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
                 <button wire:click="cancelIPSetMemberForm" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
                 <x-ri-close-line class="size-5" />
@@ -2018,7 +2018,7 @@
 
     {{-- Delete IPSet Member Modal --}}
     @if($showDeleteIPSetMemberModal && $deletingMemberCidr)
-        <div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
+        <div class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
             <div class="relative w-full max-w-md bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
                 <button wire:click="cancelDeleteIPSetMember" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
                     <x-ri-close-line class="size-5" />
@@ -2048,7 +2048,7 @@
 
 {{-- Save Configuration Modal --}}
 @if($showSaveConfigModal)
-    <div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
+    <div class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
         <div class="relative w-full max-w-lg bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
             <button wire:click="closeSaveConfigModal" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
                 <x-ri-close-line class="size-5" />
@@ -2107,7 +2107,7 @@
 
 {{-- View Configuration Modal --}}
 @if($showViewConfigModal && $viewingConfiguration)
-    <div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
+    <div class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
         <div class="relative w-full max-w-4xl bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl max-h-[90vh] overflow-hidden flex flex-col">
             <div class="p-6 border-b border-neutral/20">
                 <button wire:click="closeViewConfigModal" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -2238,7 +2238,7 @@
 
 {{-- Apply Configuration Modal --}}
 @if($showApplyConfigModal && $applyingConfiguration)
-    <div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
+    <div class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
         <div class="relative w-full max-w-lg bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
             <button wire:click="closeApplyConfigModal" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
                 <x-ri-close-line class="size-5" />
@@ -2308,7 +2308,7 @@
 
 {{-- Delete Configuration Modal --}}
 @if($showDeleteConfigModal && $deletingConfigId)
-    <div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
+    <div class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
         <div class="relative w-full max-w-md bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
             <button wire:click="cancelDeleteConfiguration" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
                 <x-ri-close-line class="size-5" />
@@ -2337,7 +2337,7 @@
 
 {{-- Apply to All Servers Modal --}}
 @if($showApplyToAllModal)
-    <div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
+    <div class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
         <div class="relative w-full max-w-2xl bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
             <button wire:click="closeApplyToAllModal" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
                 <x-ri-close-line class="size-5" />
@@ -2454,7 +2454,7 @@
 
 {{-- Rename Configuration Modal --}}
 @if($showRenameConfigModal && $renamingConfigId)
-    <div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
+    <div class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
         <div class="relative w-full max-w-md bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
             <button wire:click="closeRenameConfigModal" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
                 <x-ri-close-line class="size-5" />
diff --git a/extensions/Servers/Proxmox/views/index.blade.php b/extensions/Servers/Proxmox/views/index.blade.php
index e6a99b8ff..16922b6a0 100644
--- a/extensions/Servers/Proxmox/views/index.blade.php
+++ b/extensions/Servers/Proxmox/views/index.blade.php
@@ -1,22 +1,30 @@
-{{-- Server Listing - TailServer Theme --}}
+{{-- Server Listing - Compact Layout --}}
 <div class="flex flex-col flex-1" style="min-height: calc(100vh - 30rem);">
     {{-- Page Header --}}
-    <x-proxmox::ui.section-header 
-        title="Servers" 
-        icon="ri-server-line"
-        subtitle="Manage your virtual private servers"
-    />
+    <div class="flex items-center justify-between mb-3">
+        <div class="flex items-center gap-2">
+            <div class="flex items-center justify-center w-8 h-8 rounded bg-blue-50 dark:bg-blue-900">
+                <x-ri-server-line class="size-4 text-primary" />
+            </div>
+            <div>
+                <h2 class="text-lg font-semibold">Servers</h2>
+                <p class="text-xs text-gray-500 dark:text-gray-400">Manage your virtual private servers</p>
+            </div>
+        </div>
+    </div>
 
     {{-- Server Cards Grid --}}
-    <div class="flex flex-col gap-4 flex-1 mt-4">
+    <div class="flex flex-col gap-3 flex-1">
         @forelse($servers as $server)
             <livewire:proxmox.server :server="$server" wire:key="proxmox-server-{{ $server->id }}" lazy />
         @empty
-            <x-proxmox::ui.empty-state 
-                title="No Servers Found"
-                description="You don't have any servers yet. Purchase a server to get started."
-                icon="ri-server-line"
-            />
+            <div class="flex flex-col items-center justify-center text-center py-12 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+                <div class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-100 dark:bg-gray-700 mb-3">
+                    <x-ri-server-line class="size-6 text-gray-400" />
+                </div>
+                <h3 class="text-base font-semibold text-gray-700 dark:text-gray-300 mb-1">No Servers Found</h3>
+                <p class="text-sm text-gray-500 dark:text-gray-400">You don't have any servers yet. Purchase a server to get started.</p>
+            </div>
         @endforelse
     </div>
 </div>
\ No newline at end of file
diff --git a/extensions/Servers/Proxmox/views/network.blade.php b/extensions/Servers/Proxmox/views/network.blade.php
index 3c7ed3f4b..abcb8ab86 100644
--- a/extensions/Servers/Proxmox/views/network.blade.php
+++ b/extensions/Servers/Proxmox/views/network.blade.php
@@ -149,7 +149,7 @@
                          x-transition:leave-end="opacity-0"
                          @click="open = false"
                          @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                         class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                          style="display: none;">
                     </div>
                     <!-- Modal -->
@@ -162,7 +162,7 @@
                          x-transition:leave-end="opacity-0 scale-95"
                          @click.away="open = false"
                          @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                         class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                          style="display: none;">
                         <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
                             <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -588,7 +588,7 @@
                          x-transition:leave-end="opacity-0"
                          @click="open = false"
                          @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                         class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                          style="display: none;">
                     </div>
                     <!-- Modal -->
@@ -601,7 +601,7 @@
                          x-transition:leave-end="opacity-0 scale-95"
                          @click.away="open = false"
                          @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                         class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                          style="display: none;">
                         <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
                             <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
diff --git a/extensions/Servers/Proxmox/views/overview.blade.php b/extensions/Servers/Proxmox/views/overview.blade.php
index 9b34cc8aa..f051b38df 100644
--- a/extensions/Servers/Proxmox/views/overview.blade.php
+++ b/extensions/Servers/Proxmox/views/overview.blade.php
@@ -9,8 +9,8 @@
     {{-- Error state when status cannot be loaded --}}
     <x-proxmox::ui.alert variant="danger" icon="ri-error-warning-fill" class="mt-8">
         <x-slot name="title">Unable to Load Server Status</x-slot>
-        <p class="text-base/70 mb-4">We couldn't retrieve the current status from the hypervisor. This may be due to:</p>
-        <ul class="list-disc list-inside text-base/70 mb-4 space-y-1">
+        <p class="text-gray-600 dark:text-gray-400 mb-3">Could not retrieve status from hypervisor:</p>
+        <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 mb-3 space-y-1 text-sm">
             <li>Temporary connectivity issues with the Proxmox cluster</li>
             <li>The VM may be in an intermediate state</li>
             <li>Network timeout while fetching data</li>
@@ -103,7 +103,7 @@
                          x-transition:leave-end="opacity-0"
                          @click="open = false"
                          @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 bg-gray-900 bg-opacity-50"
+                         class="fixed inset-0 z-[60] bg-gray-900 bg-opacity-50"
                          style="display: none;">
                     </div>
                     <!-- Modal -->
@@ -115,7 +115,7 @@
                          x-transition:leave-start="opacity-100 scale-100"
                          x-transition:leave-end="opacity-0 scale-95"
                          @click.away="open = false"
-                         class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                         class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                          style="display: none;">
                         <div class="relative w-full max-w-xl max-h-[90vh] overflow-y-auto bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-xl p-5">
                             <button @click="open = false" class="absolute top-3 right-3 text-gray-400 hover:text-gray-600 dark:text-gray-500">
@@ -224,14 +224,14 @@
 
         $badgeForPercent = function (float $value) {
             if ($value >= 100) {
-                return ['label' => 'Over entitlement', 'class' => 'text-red-600 bg-red-100 dark:text-red-400 dark:bg-red-950/50'];
+                return ['label' => 'Over entitlement', 'class' => 'text-red-600 bg-red-100 dark:text-red-400 dark:bg-red-900'];
             }
 
             if ($value >= 85) {
-                return ['label' => 'Watchlist', 'class' => 'text-amber-600 bg-amber-100 dark:text-amber-400 dark:bg-amber-950/50'];
+                return ['label' => 'Watchlist', 'class' => 'text-amber-600 bg-amber-100 dark:text-amber-400 dark:bg-amber-900'];
             }
 
-            return ['label' => 'Healthy', 'class' => 'text-emerald-600 bg-emerald-100 dark:text-emerald-400 dark:bg-emerald-950/50'];
+            return ['label' => 'Healthy', 'class' => 'text-emerald-600 bg-emerald-100 dark:text-emerald-400 dark:bg-emerald-900'];
         };
 
         $cpuBadge = $badgeForPercent($cpuUsagePercent);
@@ -395,7 +395,7 @@
                                  x-transition:leave-end="opacity-0"
                                  @click="showHostnameEditModal = false; $wire.cancelEditingHostname()"
                                  @keydown.escape.window="showHostnameEditModal = false; $wire.cancelEditingHostname()"
-                                 class="fixed inset-0 z-50 bg-gray-900 bg-opacity-50"
+                                 class="fixed inset-0 z-[60] bg-gray-900 bg-opacity-50"
                                  style="display: none;">
                             </div>
                             <div x-cloak x-show="showHostnameEditModal" 
@@ -406,7 +406,7 @@
                                  x-transition:leave-start="opacity-100 scale-100"
                                  x-transition:leave-end="opacity-0 scale-95"
                                  @click.away="showHostnameEditModal = false; $wire.cancelEditingHostname()"
-                                 class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                                 class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                                  style="display: none;">
                                 <div class="relative bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xl w-full max-w-md p-4 space-y-3">
                                     <div class="flex items-center justify-between">
@@ -502,7 +502,7 @@
                                  x-transition:leave-end="opacity-0"
                                  @click="showPasswordViewModal = false"
                                  @keydown.escape.window="showPasswordViewModal = false"
-                                 class="fixed inset-0 z-50 bg-gray-900 bg-opacity-50"
+                                 class="fixed inset-0 z-[60] bg-gray-900 bg-opacity-50"
                                  style="display: none;">
                             </div>
                             <div x-cloak x-show="showPasswordViewModal" 
@@ -513,7 +513,7 @@
                                  x-transition:leave-start="opacity-100 scale-100"
                                  x-transition:leave-end="opacity-0 scale-95"
                                  @click.away="showPasswordViewModal = false"
-                                 class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                                 class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                                  style="display: none;"
                                  x-data="{
                                      copied: false,
@@ -549,7 +549,7 @@
                                  x-transition:leave-end="opacity-0"
                                  @click="showPasswordEditModal = false; $wire.cancelEditingPassword()"
                                  @keydown.escape.window="showPasswordEditModal = false; $wire.cancelEditingPassword()"
-                                 class="fixed inset-0 z-50 bg-gray-900 bg-opacity-50"
+                                 class="fixed inset-0 z-[60] bg-gray-900 bg-opacity-50"
                                  style="display: none;">
                             </div>
                             <div x-cloak x-show="showPasswordEditModal" 
@@ -560,7 +560,7 @@
                                  x-transition:leave-start="opacity-100 scale-100"
                                  x-transition:leave-end="opacity-0 scale-95"
                                  @click.away="showPasswordEditModal = false; $wire.cancelEditingPassword()"
-                                 class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                                 class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                                  style="display: none;">
                                 <div class="relative bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xl w-full max-w-md p-4 space-y-3">
                                     <div class="flex items-center justify-between">
@@ -612,67 +612,40 @@
                         <p class="text-xs text-red-600 dark:text-red-400">Data permanently deleted. Irreversible.</p>
                     </div>
                     <livewire:proxmox.reinstall :server="$server" />
-                    </label>
                 </div>
-
             </div>
-
         </div>
         
 <div>
-    <div style="background-image: url('https://billing.virtnet.bond/assets/images/dns.jpeg'); background-size: 100%; height: 5.5vh;" class="flex flex-col p-4 rounded-t-lg border-t border-x border-neutral "></div>
-<div class="fflex flex-col gap-4 bg-background-secondary hover:bg-background-secondary/80 border-m border-x border-neutral p-4 ">
-    <div class="flex flex-col gap-2">
+    <div style="background-image: url('https://billing.virtnet.bond/assets/images/dns.jpeg'); background-size: 100%; height: 4vh;" class="flex flex-col p-3 rounded-t-lg border-t border-x border-neutral"></div>
+<div class="flex flex-col gap-3 bg-background-secondary hover:bg-background-secondary border-x border-neutral p-3">
+    <div class="flex flex-col gap-1">
         <div class="flex items-center gap-2 min-w-0">
-            <h2 class="text-lg font-semibold break-words">
-                Domain Name System (DNS)
-            </h2>
+            <h2 class="text-base font-semibold">DNS</h2>
             <div class="relative" x-data="{ open: false }" x-cloak>
-                <button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
+                <button type="button" @click="open = true" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                     <x-ri-question-line class="size-4" />
                 </button>
-                <!-- Modal Backdrop -->
-                <div x-show="open" 
-                     x-transition:enter="transition ease-out duration-300"
-                     x-transition:enter-start="opacity-0"
-                     x-transition:enter-end="opacity-100"
-                     x-transition:leave="transition ease-in duration-200"
-                     x-transition:leave-start="opacity-100"
-                     x-transition:leave-end="opacity-0"
-                     @click="open = false"
-                     @keydown.escape.window="open = false"
-                     class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
-                     style="display: none;">
-                </div>
-                <!-- Modal -->
-                <div x-show="open"
-                     x-transition:enter="transition ease-out duration-300"
-                     x-transition:enter-start="opacity-0 scale-95"
-                     x-transition:enter-end="opacity-100 scale-100"
-                     x-transition:leave="transition ease-in duration-200"
-                     x-transition:leave-start="opacity-100 scale-100"
-                     x-transition:leave-end="opacity-0 scale-95"
-                     @click.away="open = false"
-                     class="fixed inset-0 z-50 flex items-center justify-center p-4"
-                     style="display: none;">
-                    <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
-                        <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
-                            <x-ri-close-line class="size-5" />
+                <div x-show="open" @click="open = false" @keydown.escape.window="open = false"
+                     class="fixed inset-0 z-[60] bg-gray-900 bg-opacity-50 backdrop-blur-sm" style="display: none;"></div>
+                <div x-show="open" @click.away="open = false"
+                     class="fixed inset-0 z-[60] flex items-center justify-center p-4" style="display: none;">
+                    <div class="relative w-full max-w-xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-lg border border-gray-200 dark:border-gray-700 shadow-xl p-4">
+                        <button @click="open = false" class="absolute top-3 right-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+                            <x-ri-close-line class="size-4" />
                         </button>
-                        <div class="flex items-center gap-3 mb-4 pr-8">
-                            <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
-                                <x-ri-global-line class="size-5 text-primary" />
+                        <div class="flex items-center gap-2 mb-3 pr-6">
+                            <div class="flex items-center justify-center w-8 h-8 rounded bg-blue-50 dark:bg-blue-900">
+                                <x-ri-global-line class="size-4 text-primary" />
                             </div>
-                            <h6 class="font-sans text-lg font-semibold leading-tight">
-                                Domain Name System (DNS)
-                            </h6>
+                            <h6 class="text-base font-semibold">Domain Name System (DNS)</h6>
                         </div>
-                        <p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
-                            DNS information for your virtual machine. This section displays the hostname and DNS configuration that will be used by the guest operating system.
+                        <p class="text-sm text-gray-700 dark:text-gray-300 mb-3">
+                            DNS info for your VM. Displays hostname and DNS configuration for the guest OS.
                         </p>
-                        <div class="pt-4 mt-4 border-t border-neutral/30">
-                            <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                <span class="font-semibold text-base/90">Note:</span> DNS settings are typically configured via cloud-init for supported operating systems. For Windows or manual installations, DNS must be configured within the guest OS.
+                        <div class="pt-3 border-t border-gray-200 dark:border-gray-700">
+                            <p class="text-xs text-gray-600 dark:text-gray-400">
+                                <strong>Note:</strong> DNS configured via cloud-init. For Windows/manual, configure within guest OS.
                             </p>
                         </div>
                     </div>
@@ -680,74 +653,44 @@
             </div>
         </div>
 
-        <!-- Explanation -->
+        <div class="text-sm text-gray-600 dark:text-gray-400">
+            <p class="font-medium">IPv6 DNS: {{ $server->primaryIpv6->ip }}</p>
 
-        <div class="flex items-center gap-2">
-            <div class="text-md font-semibold text-base/60">
-                <p>IPv6 DNS: {{ $server->primaryIpv6->ip }}</p>
-
-                <!-- Virtnet -->
-                <div class="flex items-center space-x-2 ml-8">
-                    <span>
-                        {{ str_replace(':', '-', $server->primaryIpv6->ip) . '.virtnet.host' }}
-                        <small>(Internally Provided)</small>
-                    </span>
-                    <div x-data="{
-                        copied: false,
-                        copyText: '{{ str_replace(':', '-', $server->primaryIpv6->ip) . '.virtnet.host' }}',
-                        copyToClipboard() {
-                            navigator.clipboard.writeText(this.copyText);
-                            this.copied = true;
-                            setTimeout(() => this.copied = false, 3000);
-                        }
-                    }" class="flex items-center">
-                        <button @click="copyToClipboard()" type="button"
-                            class="text-base/70 hover:text-base/60 relative inline-flex items-center justify-center ml-2">
-                            <span x-show="copied" x-transition class="absolute">
-                                <x-ri-check-fill class="inline size-4 text-success stroke-current" />
-                            </span>
-                            <span x-show="!copied" x-transition class="absolute">
-                                <x-ri-file-copy-fill class="inline size-4" />
-                            </span>
-                        </button>
-                    </div>
+            <!-- Virtnet -->
+            <div class="flex items-center gap-1 ml-4 text-xs">
+                <span>{{ str_replace(':', '-', $server->primaryIpv6->ip) . '.virtnet.host' }} <small class="text-gray-500">(Internal)</small></span>
+                <div x-data="{
+                    copied: false,
+                    copyText: '{{ str_replace(':', '-', $server->primaryIpv6->ip) . '.virtnet.host' }}',
+                    copyToClipboard() { navigator.clipboard.writeText(this.copyText); this.copied = true; setTimeout(() => this.copied = false, 2000); }
+                }">
+                    <button @click="copyToClipboard()" type="button" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 relative inline-flex items-center justify-center">
+                        <span x-show="copied" x-transition class="absolute"><x-ri-check-fill class="size-3 text-success" /></span>
+                        <span x-show="!copied" x-transition class="absolute"><x-ri-file-copy-fill class="size-3" /></span>
+                    </button>
                 </div>
+            </div>
 
-                <!-- nip.io -->
-                <div class="flex items-center space-x-2 ml-8">
-                    <span>
-                        {{ str_replace(':', '-', $server->primaryIpv6->ip) . '.nip.io' }}
-                        <small>(Hosted by <a href="https://nip.io" target="_blank">nip.io</a>)</small>
-                    </span>
-                    <div x-data="{
-                        copied: false,
-                        copyText: '{{ str_replace(':', '-', $server->primaryIpv6->ip) . '.nip.io' }}',
-                        copyToClipboard() {
-                            navigator.clipboard.writeText(this.copyText);
-                            this.copied = true;
-                            setTimeout(() => this.copied = false, 3000);
-                        }
-                    }" class="flex items-center">
-                        <button @click="copyToClipboard()" type="button"
-                            class="text-base/70 hover:text-base/60 relative inline-flex items-center justify-center ml-2">
-                            <span x-show="copied" x-transition class="absolute">
-                                <x-ri-check-fill class="inline size-4 text-success stroke-current" />
-                            </span>
-                            <span x-show="!copied" x-transition class="absolute">
-                                <x-ri-file-copy-fill class="inline size-4" />
-                            </span>
-                        </button>
-                    </div>
+            <!-- nip.io -->
+            <div class="flex items-center gap-1 ml-4 text-xs">
+                <span>{{ str_replace(':', '-', $server->primaryIpv6->ip) . '.nip.io' }} <small class="text-gray-500">(<a href="https://nip.io" target="_blank" class="underline">nip.io</a>)</small></span>
+                <div x-data="{
+                    copied: false,
+                    copyText: '{{ str_replace(':', '-', $server->primaryIpv6->ip) . '.nip.io' }}',
+                    copyToClipboard() { navigator.clipboard.writeText(this.copyText); this.copied = true; setTimeout(() => this.copied = false, 2000); }
+                }">
+                    <button @click="copyToClipboard()" type="button" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 relative inline-flex items-center justify-center">
+                        <span x-show="copied" x-transition class="absolute"><x-ri-check-fill class="size-3 text-success" /></span>
+                        <span x-show="!copied" x-transition class="absolute"><x-ri-file-copy-fill class="size-3" /></span>
+                    </button>
                 </div>
+            </div>
 
-                <!-- sslip.io -->
-                <div class="flex items-center space-x-2 ml-8">
-                    <span>
-                        {{ str_replace(':', '-', $server->primaryIpv6->ip) . '.sslip.io' }}
-                        <small>(Hosted by <a href="https://sslip.io" target="_blank">sslip.io</a>)</small>
-                    </span>
-                    <div x-data="{
-                        copied: false,
+            <!-- sslip.io -->
+            <div class="flex items-center gap-1 ml-4 text-xs">
+                <span>{{ str_replace(':', '-', $server->primaryIpv6->ip) . '.sslip.io' }} <small class="text-gray-500">(<a href="https://sslip.io" target="_blank" class="underline">sslip.io</a>)</small></span>
+                <div x-data="{
+                    copied: false,
                         copyText: '{{ str_replace(':', '-', $server->primaryIpv6->ip) . '.sslip.io' }}',
                         copyToClipboard() {
                             navigator.clipboard.writeText(this.copyText);
@@ -755,265 +698,145 @@
                             setTimeout(() => this.copied = false, 3000);
                         }
                     }" class="flex items-center">
-                        <button @click="copyToClipboard()" type="button"
-                            class="text-base/70 hover:text-base/60 relative inline-flex items-center justify-center ml-2">
-                            <span x-show="copied" x-transition class="absolute">
-                                <x-ri-check-fill class="inline size-4 text-success stroke-current" />
-                            </span>
-                            <span x-show="!copied" x-transition class="absolute">
-                                <x-ri-file-copy-fill class="inline size-4" />
-                            </span>
+                        <button @click="copyToClipboard()" type="button" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 relative inline-flex items-center justify-center ml-1">
+                            <span x-show="copied" x-transition class="absolute"><x-ri-check-fill class="size-3 text-success" /></span>
+                            <span x-show="!copied" x-transition class="absolute"><x-ri-file-copy-fill class="size-3" /></span>
                         </button>
                     </div>
                 </div>
 
                 <!-- backname.io -->
-                <div class="flex items-center space-x-2 ml-8">
-                    <span>
-                        {{ str_replace(':', '-', $server->primaryIpv6->ip) . '.backname.io' }}
-                        <small>(Hosted by <a href="https://backname.io" target="_blank">backname.io</a>)</small>
-                    </span>
+                <div class="flex items-center gap-1 ml-4 text-xs">
+                    <span>{{ str_replace(':', '-', $server->primaryIpv6->ip) . '.backname.io' }} <small class="text-gray-500">(<a href="https://backname.io" target="_blank" class="underline">backname.io</a>)</small></span>
                     <div x-data="{
                         copied: false,
                         copyText: '{{ str_replace(':', '-', $server->primaryIpv6->ip) . '.backname.io' }}',
-                        copyToClipboard() {
-                            navigator.clipboard.writeText(this.copyText);
-                            this.copied = true;
-                            setTimeout(() => this.copied = false, 3000);
-                        }
-                    }" class="flex items-center">
-                        <button @click="copyToClipboard()" type="button"
-                            class="text-base/70 hover:text-base/60 relative inline-flex items-center justify-center ml-2">
-                            <span x-show="copied" x-transition class="absolute">
-                                <x-ri-check-fill class="inline size-4 text-success stroke-current" />
-                            </span>
-                            <span x-show="!copied" x-transition class="absolute">
-                                <x-ri-file-copy-fill class="inline size-4" />
-                            </span>
+                        copyToClipboard() { navigator.clipboard.writeText(this.copyText); this.copied = true; setTimeout(() => this.copied = false, 2000); }
+                    }">
+                        <button @click="copyToClipboard()" type="button" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 relative inline-flex items-center justify-center">
+                            <span x-show="copied" x-transition class="absolute"><x-ri-check-fill class="size-3 text-success" /></span>
+                            <span x-show="!copied" x-transition class="absolute"><x-ri-file-copy-fill class="size-3" /></span>
                         </button>
                     </div>
                 </div>
             </div>
-
-
-
-
-                            </div>
-                        </div></div>
+        </div>
+    </div>
+</div>
                         
-                     
-                        
-    <div class="flex flex-col bg-info/10 border border-info/30 p-4 rounded-b-lg ">
-        <p class="text-sm text-base/50 font-bold leading-relaxed">
-            <code>@</code> points the root domain directly to the server IP ({{ $server->primaryIpv6->ip }})<br/>
-            <code>*.@</code> points all subdomains (wildcard) to the same IP ({{ $server->primaryIpv6->ip }})<br/><br/></p><p class="text-sm text-base/50 italic leading-relaxed">
-
-    <code>@</code> — Represents the <strong>root domain</strong> (also called the apex domain).  
-    This means the base domain name (e.g. <code>example.com</code>) will point directly to the server IP.<br/><br/>
-
-    <code>*.@</code> — Represents a <strong>wildcard record</strong>.  
-    This ensures that <em>any</em> subdomain also points to the same server IP.  
-    <br/><br/>
-
-    Together, using both <code>@</code> and <code>*.@</code> ensures that your server will respond to requests for the root domain and <em>all possible subdomains</em>.<br/><br/>
-    
-    rDNS PTR Records: Please make note that at no time will PTR records be generated for any IP address via the RIR systems. No exceptions will be made other than for direct contract business customers due to the security risks involved with allowing arbitrary PTR records to be set and the potential for abuse.<br/><br/>
-
-        </p></div></div>
+<div class="bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 p-3 rounded-b-lg text-xs text-gray-600 dark:text-gray-400">
+    <p class="font-semibold"><code>@</code> = root domain → {{ $server->primaryIpv6->ip }} | <code>*.@</code> = wildcard subdomains → same IP</p>
+    <p class="mt-1 text-gray-500 dark:text-gray-500">rDNS PTR: No PTR records via RIR systems except direct contract customers.</p>
+</div>
+</div>
 
         @if(stripos($server->os->name, 'Windows') !== false)
-        <div class="">
-            <div style="background-image: url('https://billing.virtnet.bond/assets/images/windows.jpg'); background-size: 100%; height: 5.5vh;" class="flex flex-col p-4 rounded-t-lg border border-neutral"></div>
         <div>
-        <div>
-        <div class="bg-info/10 border border-info/30 p-4 rounded-b-lg">
-
-  <div class="flex items-center gap-2 min-w-0">
-    <h2 class="text-lg font-semibold break-words">
-      Windows Server Installations
-    </h2>
-    <div class="relative" x-data="{ open: false }" x-cloak>
-        <button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
-            <x-ri-question-line class="size-4" />
-        </button>
-        <!-- Modal Backdrop -->
-        <div x-show="open" 
-             x-transition:enter="transition ease-out duration-300"
-             x-transition:enter-start="opacity-0"
-             x-transition:enter-end="opacity-100"
-             x-transition:leave="transition ease-in duration-200"
-             x-transition:leave-start="opacity-100"
-             x-transition:leave-end="opacity-0"
-             @click="open = false"
-             @keydown.escape.window="open = false"
-             class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
-             style="display: none;">
-        </div>
-        <!-- Modal -->
-        <div x-show="open"
-             x-transition:enter="transition ease-out duration-300"
-             x-transition:enter-start="opacity-0 scale-95"
-             x-transition:enter-end="opacity-100 scale-100"
-             x-transition:leave="transition ease-in duration-200"
-             x-transition:leave-start="opacity-100 scale-100"
-             x-transition:leave-end="opacity-0 scale-95"
-             @click.away="open = false"
-             class="fixed inset-0 z-50 flex items-center justify-center p-4"
-             style="display: none;">
-            <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
-                <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
-                    <x-ri-close-line class="size-5" />
-                </button>
-                <div class="flex items-center gap-3 mb-4 pr-8">
-                    <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
-                        <x-ri-windows-line class="size-5 text-primary" />
+            <div style="background-image: url('https://billing.virtnet.bond/assets/images/windows.jpg'); background-size: 100%; height: 4vh;" class="flex flex-col p-3 rounded-t-lg border border-neutral"></div>
+        <div class="bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 p-3 rounded-b-lg">
+            <div class="flex items-center gap-2">
+                <h2 class="text-base font-semibold">Windows Server</h2>
+                <div class="relative" x-data="{ open: false }" x-cloak>
+                    <button type="button" @click="open = true" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+                        <x-ri-question-line class="size-4" />
+                    </button>
+                    <div x-show="open" @click="open = false" @keydown.escape.window="open = false"
+                         class="fixed inset-0 z-[60] bg-gray-900 bg-opacity-50 backdrop-blur-sm" style="display: none;"></div>
+                    <div x-show="open" @click.away="open = false"
+                         class="fixed inset-0 z-[60] flex items-center justify-center p-4" style="display: none;">
+                        <div class="relative w-full max-w-xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-lg border border-gray-200 dark:border-gray-700 shadow-xl p-4">
+                            <button @click="open = false" class="absolute top-3 right-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+                                <x-ri-close-line class="size-4" />
+                            </button>
+                            <div class="flex items-center gap-2 mb-3 pr-6">
+                                <div class="flex items-center justify-center w-8 h-8 rounded bg-blue-50 dark:bg-blue-900">
+                                    <x-ri-windows-line class="size-4 text-primary" />
+                                </div>
+                                <h6 class="text-base font-semibold">Windows Server</h6>
+                            </div>
+                            <p class="text-sm text-gray-700 dark:text-gray-300 mb-3">Windows doesn't support cloud-init. Manual config required.</p>
+                            <div class="pt-3 border-t border-gray-200 dark:border-gray-700 space-y-2 text-xs text-gray-600 dark:text-gray-400">
+                                <p><strong>Manual Config:</strong> Configure networking, hostname, and users during/after install.</p>
+                                <p><strong>Network:</strong> Use static IPs or DHCP via Windows Network Configuration.</p>
+                                <p><strong>Remote Access:</strong> Enable RDP within Windows for remote server access.</p>
+                            </div>
+                        </div>
                     </div>
-                    <h6 class="font-sans text-lg font-semibold leading-tight">
-                        Windows Server Installations
-                    </h6>
                 </div>
-                <p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
-                    Special instructions and information for Windows Server installations. Windows does not support cloud-init, so additional configuration steps are required.
-                </p>
-                <div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
-                    <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                        <span class="font-semibold text-base/90">Manual Configuration Required:</span> Unlike Linux distributions, Windows does not support cloud-init. You must manually configure networking, hostname, and user accounts during or after installation.
-                    </p>
-                    <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                        <span class="font-semibold text-base/90">Network Setup:</span> Windows will need to be configured with static IP addresses or DHCP settings through the Windows Network Configuration interface.
-                    </p>
-                    <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                        <span class="font-semibold text-base/90">Remote Access:</span> Enable Remote Desktop (RDP) within Windows to access the server remotely after installation.
-                    </p>
+            </div>
+
+            <div class="mt-2 space-y-2 text-xs">
+                <div class="border-l-4 border-blue-400 bg-blue-100 dark:bg-blue-900 p-2 rounded-r">
+                    <p class="font-semibold text-gray-700 dark:text-gray-200">IPv4/IPv6 Setup:</p>
+                    <p class="text-gray-600 dark:text-gray-400">Cloud-init doesn't configure networking on Windows. Configure addresses manually.</p>
+                </div>
+                <div class="border-l-4 border-blue-400 bg-blue-100 dark:bg-blue-900 p-2 rounded-r">
+                    <p class="font-semibold text-gray-700 dark:text-gray-200">Licensing:</p>
+                    <p class="text-gray-600 dark:text-gray-400">No license key provided. User must maintain compliant licensing.</p>
+                </div>
+                <div class="border-l-4 border-blue-400 bg-blue-100 dark:bg-blue-900 p-2 rounded-r">
+                    <p class="font-semibold text-gray-700 dark:text-gray-200">Audits:</p>
+                    <p class="text-gray-600 dark:text-gray-400">Periodic audits may occur. Non-compliant installations subject to suspension.</p>
                 </div>
             </div>
         </div>
-    </div>
-  </div>
-
-
-
-
-  <div class="mt-2 border-l-4 bg-info/10 border border-info/30 p-3 rounded-md">
-      <p class="text-sm dark:text-gray-100 font-bold leading-relaxed">
-    Windows Server Networking (IPv4/IPv6 Setup):
-  </p>
-    <p class="text-sm dark:text-gray-200 italic leading-relaxed ">
-      Cloud-init does not automatically configure IPv4 or IPv6 networking on Windows Server installations. Please configure the addresses manually as assigned in the control panel of your installation.
-    </p>
-  </div>
-    <div class="mt-2 border-l-4 bg-info/10 border border-info/30 p-3 rounded-md">
-      <p class="text-sm dark:text-gray-100 font-bold leading-relaxed">
-    Windows Server Activation (Licensing):
-  </p>
-    <p class="text-sm dark:text-gray-100 italic leading-relaxed ">
-      No Windows Server license key is provided by Virtnet.bond. It is the responsibility of the account holder
-      to provide and maintain active and compliant licensing with all Windows Server products.
-    </p>
-  </div>
-    <div class="mt-2 border-l-4 bg-info/10 border border-info/30 p-3 rounded-md">
-      <p class="text-sm dark:text-gray-100 font-bold leading-relaxed">
-    Periodic Licensing Audits and User Compliance:
-  </p>
-    <p class="text-sm dark:text-gray-200 italic leading-relaxed ">
-        Virtnet.bond reserves the right to perform periodic audits of Windows Server installations to ensure compliance with Microsoft's licensing terms. Non-compliant installations may be subject to suspension or termination. If you have any questions regarding licensing compliance, please contact our support team.
-    </p>
-    </div>
-
-
-                    
-
-
-
-                    
-        
         </div>
-
         @endif
 
         <!-- Live Network Traffic -->
-        <div wire:ignore class="bg-background-secondary border border-neutral rounded-xl p-6 h-full w-full mt-0">
-            <div class="flex items-center justify-between mb-4">
-                <div>
-                    <div class="flex items-center gap-2 min-w-0">
-                        <h3 class="text-lg font-semibold flex items-center gap-2">
-                            <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
-                            </svg>
-                            Live Network Traffic
-                        </h3>
-                        <div class="relative" x-data="{ open: false }" x-cloak>
-                            <button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
-                                <x-ri-question-line class="size-4" />
-                            </button>
-                            <!-- Modal Backdrop -->
-                            <div x-show="open" 
-                                 x-transition:enter="transition ease-out duration-300"
-                                 x-transition:enter-start="opacity-0"
-                                 x-transition:enter-end="opacity-100"
-                                 x-transition:leave="transition ease-in duration-200"
-                                 x-transition:leave-start="opacity-100"
-                                 x-transition:leave-end="opacity-0"
-                                 @click="open = false"
+        <div wire:ignore class="bg-background-secondary border border-neutral rounded-lg p-4 h-full w-full mt-0">
+            <div class="flex items-center justify-between mb-3">
+                <div class="flex items-center gap-2">
+                    <h3 class="text-base font-semibold flex items-center gap-2">
+                        <svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                        </svg>
+                        Live Network Traffic
+                    </h3>
+                    <div class="relative" x-data="{ open: false }" x-cloak>
+                        <button type="button" @click="open = true" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+                            <x-ri-question-line class="size-4" />
+                        </button>
+                        <div x-show="open" @click="open = false"
                                  @keydown.escape.window="open = false"
-                                 class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                                 class="fixed inset-0 z-[60] bg-gray-900 bg-opacity-50 backdrop-blur-sm"
                                  style="display: none;">
                             </div>
                             <!-- Modal -->
-                            <div x-show="open"
-                                 x-transition:enter="transition ease-out duration-300"
-                                 x-transition:enter-start="opacity-0 scale-95"
-                                 x-transition:enter-end="opacity-100 scale-100"
-                                 x-transition:leave="transition ease-in duration-200"
-                                 x-transition:leave-start="opacity-100 scale-100"
-                                 x-transition:leave-end="opacity-0 scale-95"
-                                 @click.away="open = false"
-                                 @keydown.escape.window="open = false"
-                                 class="fixed inset-0 z-50 flex items-center justify-center p-4"
-                                 style="display: none;">
-                                <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
-                                    <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
-                                        <x-ri-close-line class="size-5" />
+                            <div x-show="open" @click.away="open = false" @keydown.escape.window="open = false"
+                                 class="fixed inset-0 z-[60] flex items-center justify-center p-4" style="display: none;">
+                                <div class="relative w-full max-w-xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-lg border border-gray-200 dark:border-gray-700 shadow-xl p-4">
+                                    <button @click="open = false" class="absolute top-3 right-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+                                        <x-ri-close-line class="size-4" />
                                     </button>
-                                    <div class="flex items-center gap-3 mb-4 pr-8">
-                                        <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
-                                            <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <div class="flex items-center gap-2 mb-3 pr-6">
+                                        <div class="flex items-center justify-center w-8 h-8 rounded bg-blue-50 dark:bg-blue-900">
+                                            <svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                                             </svg>
                                         </div>
-                                        <h6 class="font-sans text-lg font-semibold leading-tight">
-                                            Live Network Traffic
-                                        </h6>
+                                        <h6 class="text-base font-semibold">Live Network Traffic</h6>
                                     </div>
-                                    <p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
-                                        Displays real-time network bandwidth statistics for each network interface on your virtual machine, including current transfer rates, peak values, and historical traffic graphs.
+                                    <p class="text-sm text-gray-700 dark:text-gray-300 mb-3">
+                                        Real-time bandwidth stats per interface with current rates, peaks, and historical graphs.
                                     </p>
-                                    <div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
-                                        <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                            <span class="font-semibold text-base/90">Current Rates:</span> Shows the instantaneous download and upload speeds in bytes per second, updated every 30 seconds from Proxmox RRD data.
-                                        </p>
-                                        <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                            <span class="font-semibold text-base/90">Peak Values:</span> Tracks the highest observed transfer rates for each direction since the page was loaded, helping identify maximum bandwidth usage.
-                                        </p>
-                                        <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                            <span class="font-semibold text-base/90">Historical Graph:</span> Click the "Graph" button to view a line chart showing network traffic trends over the last 10 minutes, with separate lines for download (green) and upload (blue) traffic.
-                                        </p>
-                                        <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                            <span class="font-semibold text-base/90">Total Statistics:</span> Displays cumulative data transfer totals (total bytes in and out) from the VM's start, providing a long-term view of network usage.
-                                        </p>
+                                    <div class="pt-3 border-t border-gray-200 dark:border-gray-700 space-y-2 text-xs text-gray-600 dark:text-gray-400">
+                                        <p><strong>Current:</strong> Download/upload speeds (bytes/s), updated every 30s.</p>
+                                        <p><strong>Peak:</strong> Highest observed rates since page load.</p>
+                                        <p><strong>Graph:</strong> View 10-min traffic trends (download=green, upload=blue).</p>
+                                        <p><strong>Totals:</strong> Cumulative bytes in/out since VM start.</p>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <p class="text-sm text-base/60 mt-1">Real-time bandwidth monitoring • Updates every 30 seconds</p>
+                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Updates every 30 seconds</p>
                 </div>
                 <div class="flex items-center gap-2">
-                    <button type="button"
-                            @click="exportLiveNetworkTrafficToCSV()"
-                            class="bg-background border border-neutral px-3 py-2 rounded-md text-sm font-semibold hover:bg-background/80 flex items-center gap-2 h-[calc(0.5rem*2+1.25rem)]"
-                            title="Export network traffic data to CSV">
-                        <x-ri-download-line class="size-4" />
+                    <button type="button" @click="exportLiveNetworkTrafficToCSV()"
+                            class="bg-background border border-neutral px-2 py-1 rounded text-xs font-semibold hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center gap-1"
+                            title="Export to CSV">
+                        <x-ri-download-line class="size-3" />
                         Export
                     </button>
                 </div>
@@ -1021,86 +844,51 @@
 
             <!-- Network Traffic Sections -->
             <div id="network-traffic-container" data-live-traffic-endpoint="{{ route('proxmox.server.live-traffic', $server) }}">
-                <!-- Initial placeholder; replaced on first successful poll -->
-                <div class="border border-dashed border-neutral/40 rounded-lg p-6 text-center">
-                    <p class="text-sm text-base/60">Loading live network statistics…</p>
+                <div class="border border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-4 text-center">
+                    <p class="text-xs text-gray-500 dark:text-gray-400">Loading live network statistics…</p>
                 </div>
             </div>
         </div>
 
         <!-- Notes Section -->
-        <div id="notes-section" class="bg-background-secondary hover:bg-background-secondary/80 border border-neutral rounded-xl p-6 h-full flex flex-col mt-0" x-data="{ showExportErrorModal: false }" x-cloak>
-            <div class="flex items-center justify-between mb-4">
-                <div>
-                    <div class="flex items-center gap-2 min-w-0">
-                        <h2 class="text-lg font-semibold break-words">Notes</h2>
-                        <div class="relative" x-data="{ open: false }" x-cloak>
-                            <button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
-                                <x-ri-question-line class="size-4" />
-                            </button>
-                            <!-- Modal Backdrop -->
-                            <div x-show="open" 
-                                 x-transition:enter="transition ease-out duration-300"
-                                 x-transition:enter-start="opacity-0"
-                                 x-transition:enter-end="opacity-100"
-                                 x-transition:leave="transition ease-in duration-200"
-                                 x-transition:leave-start="opacity-100"
-                                 x-transition:leave-end="opacity-0"
-                                 @click="open = false"
-                                 @keydown.escape.window="open = false"
-                                 class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
-                                 style="display: none;">
-                            </div>
-                            <!-- Modal -->
-                            <div x-show="open"
-                                 x-transition:enter="transition ease-out duration-300"
-                                 x-transition:enter-start="opacity-0 scale-95"
-                                 x-transition:enter-end="opacity-100 scale-100"
-                                 x-transition:leave="transition ease-in duration-200"
-                                 x-transition:leave-start="opacity-100 scale-100"
-                                 x-transition:leave-end="opacity-0 scale-95"
-                                 @click.away="open = false"
-                                 @keydown.escape.window="open = false"
-                                 class="fixed inset-0 z-50 flex items-center justify-center p-4"
-                                 style="display: none;">
-                                <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
-                                    <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
-                                        <x-ri-close-line class="size-5" />
-                                    </button>
-                                    <div class="flex items-center gap-3 mb-4 pr-8">
-                                        <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
-                                            <x-ri-file-text-line class="size-5 text-primary" />
-                                        </div>
-                                        <h6 class="font-sans text-lg font-semibold leading-tight">
-                                            Notes
-                                        </h6>
-                                    </div>
-                                    <p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
-                                        Store custom notes and documentation about this virtual machine. Notes support Markdown formatting for rich text editing.
-                                    </p>
-                                    <div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
-                                        <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                            <span class="font-semibold text-base/90">Markdown Support:</span> Use Markdown syntax for formatting including headers, lists, links, and code blocks.
-                                        </p>
-                                        <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                            <span class="font-semibold text-base/90">Persistence:</span> Notes are stored in the database and persist across sessions. However, notes are deleted when the server is reinstalled.
-                                        </p>
-                                        <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                            <span class="font-semibold text-base/90">Use Cases:</span> Document server configuration, installation steps, important IP addresses, credentials (stored securely), or any other information relevant to this VPS.
-                                        </p>
+        <div id="notes-section" class="bg-background-secondary border border-neutral rounded-lg p-4 h-full flex flex-col mt-0" x-data="{ showExportErrorModal: false }" x-cloak>
+            <div class="flex items-center justify-between mb-3">
+                <div class="flex items-center gap-2">
+                    <h2 class="text-base font-semibold">Notes</h2>
+                    <div class="relative" x-data="{ open: false }" x-cloak>
+                        <button type="button" @click="open = true" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+                            <x-ri-question-line class="size-4" />
+                        </button>
+                        <div x-show="open" @click="open = false" @keydown.escape.window="open = false"
+                             class="fixed inset-0 z-[60] bg-gray-900 bg-opacity-50 backdrop-blur-sm" style="display: none;"></div>
+                        <div x-show="open" @click.away="open = false" @keydown.escape.window="open = false"
+                             class="fixed inset-0 z-[60] flex items-center justify-center p-4" style="display: none;">
+                            <div class="relative w-full max-w-xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-lg border border-gray-200 dark:border-gray-700 shadow-xl p-4">
+                                <button @click="open = false" class="absolute top-3 right-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+                                    <x-ri-close-line class="size-4" />
+                                </button>
+                                <div class="flex items-center gap-2 mb-3 pr-6">
+                                    <div class="flex items-center justify-center w-8 h-8 rounded bg-blue-50 dark:bg-blue-900">
+                                        <x-ri-file-text-line class="size-4 text-primary" />
                                     </div>
+                                    <h6 class="text-base font-semibold">Notes</h6>
+                                </div>
+                                <p class="text-sm text-gray-700 dark:text-gray-300 mb-3">Store notes about this VM with Markdown support.</p>
+                                <div class="pt-3 border-t border-gray-200 dark:border-gray-700 space-y-2 text-xs text-gray-600 dark:text-gray-400">
+                                    <p><strong>Markdown:</strong> Headers, lists, links, code blocks supported.</p>
+                                    <p><strong>Persistence:</strong> Notes saved to DB but deleted on reinstall.</p>
+                                    <p><strong>Uses:</strong> Config docs, IPs, credentials, install steps.</p>
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <p class="text-md font-semibold text-base/60 mt-1">Store notes about this server, Markdown is supported. <small>(These do not persist reinstalls)</small></p>
+                    <span class="text-xs text-gray-500 dark:text-gray-400">(Markdown • Cleared on reinstall)</span>
                 </div>
                 <div class="flex items-center gap-2">
-                    <button type="button"
-                            @click="exportNotesToCSV()"
-                            class="bg-background border border-neutral px-3 py-2 rounded-md text-sm font-semibold hover:bg-background/80 flex items-center gap-2 h-[calc(0.5rem*2+1.25rem)]"
-                            title="Export notes to text file">
-                        <x-ri-download-line class="size-4" />
+                    <button type="button" @click="exportNotesToCSV()"
+                            class="bg-background border border-neutral px-2 py-1 rounded text-xs font-semibold hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center gap-1"
+                            title="Export notes">
+                        <x-ri-download-line class="size-3" />
                         Export
                     </button>
                 </div>
@@ -1116,50 +904,36 @@
                  x-transition:leave-end="opacity-0"
                  @click="showExportErrorModal = false"
                  @keydown.escape.window="showExportErrorModal = false"
-                 class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                 class="fixed inset-0 z-[60] bg-gray-900 bg-opacity-50 backdrop-blur-sm"
                  style="display: none;">
             </div>
-            <div x-show="showExportErrorModal"
-                 x-transition:enter="transition ease-out duration-300"
-                 x-transition:enter-start="opacity-0 scale-95"
-                 x-transition:enter-end="opacity-100 scale-100"
-                 x-transition:leave="transition ease-in duration-200"
-                 x-transition:leave-start="opacity-100 scale-100"
-                 x-transition:leave-end="opacity-0 scale-95"
-                 @click.away="showExportErrorModal = false"
-                 class="fixed inset-0 z-50 flex items-center justify-center p-4"
-                 style="display: none;">
-                <div class="relative w-full max-w-md bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
-                    <button @click="showExportErrorModal = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
-                        <x-ri-close-line class="size-5" />
+            <div x-show="showExportErrorModal" @click.away="showExportErrorModal = false"
+                 class="fixed inset-0 z-[60] flex items-center justify-center p-4" style="display: none;">
+                <div class="relative w-full max-w-sm bg-background-secondary rounded-lg border border-gray-200 dark:border-gray-700 shadow-xl p-4">
+                    <button @click="showExportErrorModal = false" class="absolute top-3 right-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+                        <x-ri-close-line class="size-4" />
                     </button>
-                    <div class="flex items-center gap-3 mb-4 pr-8">
-                        <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-error/10">
-                            <x-ri-error-warning-line class="size-5 text-error" />
+                    <div class="flex items-center gap-2 mb-3 pr-6">
+                        <div class="flex items-center justify-center w-8 h-8 rounded bg-red-50 dark:bg-red-900">
+                            <x-ri-error-warning-line class="size-4 text-error" />
                         </div>
-                        <h6 class="font-sans text-lg font-semibold leading-tight">
-                            Export Error
-                        </h6>
+                        <h6 class="text-base font-semibold">Export Error</h6>
                     </div>
-                    <p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
-                        No notes available to export.
-                    </p>
-                    <div class="flex justify-end gap-2 mt-6">
-                        <x-button.secondary type="button" @click="showExportErrorModal = false">
-                            Close
-                        </x-button.secondary>
+                    <p class="text-sm text-gray-700 dark:text-gray-300 mb-3">No notes available to export.</p>
+                    <div class="flex justify-end">
+                        <x-button.secondary type="button" @click="showExportErrorModal = false">Close</x-button.secondary>
                     </div>
                 </div>
             </div>
             
             <div class="flex flex-col gap-2 flex-1">
                 @if($isEditingNotes)
-                    <div class="space-y-3 flex-1 flex flex-col">
+                    <div class="space-y-2 flex-1 flex flex-col">
                         <textarea wire:model="notes" 
-                            class="bg-background border border-neutral rounded-md px-3 py-2 text-sm w-full resize-y flex-1 focus:outline-none focus:ring-2 focus:ring-secondary"
-                            placeholder="Enter your notes here..."></textarea>
+                            class="bg-background border border-neutral rounded px-2 py-1 text-sm w-full resize-y flex-1 focus:outline-none focus:ring-2 focus:ring-secondary"
+                            placeholder="Enter notes..."></textarea>
                         @if($notesError)
-                            <div class="text-sm text-error">{{ $notesError }}</div>
+                            <div class="text-xs text-error">{{ $notesError }}</div>
                         @endif
                         <div class="flex gap-2">
                             <x-button.primary wire:click="saveNotes" wire:loading.attr="disabled">
@@ -1167,29 +941,24 @@
                                 <div wire:loading.remove wire:target="saveNotes">Save</div>
                                 <div wire:loading wire:target="saveNotes">Saving...</div>
                             </x-button.primary>
-                            <x-button.secondary wire:click="cancelEditingNotes" wire:loading.attr="disabled">
-                                Cancel
-                            </x-button.secondary>
+                            <x-button.secondary wire:click="cancelEditingNotes" wire:loading.attr="disabled">Cancel</x-button.secondary>
                         </div>
                     </div>
                 @else
-                    <div class="space-y-3 flex-1 flex flex-col">
-                        <div class="bg-background border border-neutral rounded-md px-3 py-2 text-sm flex-1 overflow-auto prose prose-sm dark:prose-invert max-w-none text-base/80">
+                    <div class="space-y-2 flex-1 flex flex-col">
+                        <div class="bg-background border border-neutral rounded px-2 py-1 text-sm flex-1 overflow-auto prose prose-sm dark:prose-invert max-w-none text-gray-700 dark:text-gray-300">
                             @if($notes)
                                 {!! \Illuminate\Support\Str::markdown(e($notes), [
                                     'allow_unsafe_links' => false,
-                                    'renderer' => [
-                                        'soft_break' => "<br>"
-                                    ]
+                                    'renderer' => ['soft_break' => "<br>"]
                                 ]) !!}
                             @else
-                                <p class="text-base/60">No notes stored. Click Edit to add notes.</p>
+                                <p class="text-gray-500 dark:text-gray-400">No notes. Click Edit to add.</p>
                             @endif
                         </div>
                         <div class="flex gap-2">
                             <x-button.secondary wire:click="startEditingNotes">
-                                <x-ri-edit-fill class="size-4" />
-                                Edit
+                                <x-ri-edit-fill class="size-3" /> Edit
                             </x-button.secondary>
                         </div>
                     </div>
@@ -1201,61 +970,14 @@
 
 @once
     <style>
-        /* Network Traffic Bars */
-        .network-flow-bar {
-            position: relative;
-            height: 8px;
-            background: rgba(128, 128, 128, 0.1);
-            border-radius: 9999px;
-            overflow: hidden;
-        }
-        
-        .network-flow-fill {
-            position: absolute;
-            top: 0;
-            left: 0;
-            height: 100%;
-            border-radius: 9999px;
-            transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-        
-        .network-flow-fill.download {
-            background: linear-gradient(90deg, 
-                rgba(34, 197, 94, 0.3),
-                rgba(34, 197, 94, 0.8),
-                rgba(34, 197, 94, 0.3)
-            );
-        }
-        
-        .network-flow-fill.upload {
-            background: linear-gradient(90deg,
-                rgba(59, 130, 246, 0.3),
-                rgba(59, 130, 246, 0.8),
-                rgba(59, 130, 246, 0.3)
-            );
-        }
-        
-        /* Sparkline chart styles */
-        .sparkline-chart {
-            width: 100%;
-            height: 40px;
-        }
-        
-        .chart-dropdown {
-            max-height: 0;
-            overflow: hidden;
-            transition: max-height 0.3s ease-out;
-        }
-        
-        .chart-dropdown.open {
-            max-height: 400px;
-            transition: max-height 0.5s ease-in;
-        }
-        
-        /* Ensure network traffic container is visible */
-        #network-traffic-container {
-            min-height: 100px;
-        }
+        .network-flow-bar { position: relative; height: 6px; background: rgba(128, 128, 128, 0.1); border-radius: 9999px; overflow: hidden; }
+        .network-flow-fill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 9999px; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
+        .network-flow-fill.download { background: linear-gradient(90deg, rgba(34, 197, 94, 0.3), rgba(34, 197, 94, 0.8), rgba(34, 197, 94, 0.3)); }
+        .network-flow-fill.upload { background: linear-gradient(90deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.8), rgba(59, 130, 246, 0.3)); }
+        .sparkline-chart { width: 100%; height: 32px; }
+        .chart-dropdown { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
+        .chart-dropdown.open { max-height: 350px; transition: max-height 0.5s ease-in; }
+        #network-traffic-container { min-height: 80px; }
     </style>
     
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
@@ -1276,51 +998,43 @@
                 return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
             };
             
-            const formatRate = (bytesPerSec) => {
-                return formatBytes(bytesPerSec) + '/s';
-            };
+            const formatRate = (bytesPerSec) => formatBytes(bytesPerSec) + '/s';
 
             const createInterfaceCard = (interfaceData) => {
                 const interfaceId = interfaceData.id.replace(/[^a-z0-9]/gi, '-');
-                
                 return `
-                    <div class="bg-background-secondary border border-neutral rounded-xl p-6 w-full">
-                        <div class="flex items-center justify-between mb-4">
-                            <div>
-                                <h3 class="text-lg font-semibold text-base flex items-center gap-2">
-                                    <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
-                                              d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
+                    <div class="bg-background-secondary border border-neutral rounded-lg p-3 w-full">
+                        <div class="flex items-center justify-between mb-2">
+                            <div class="flex items-center gap-2">
+                                <h3 class="text-sm font-semibold flex items-center gap-1">
+                                    <svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
                                     </svg>
                                     ${interfaceData.name}
                                 </h3>
-                                <p class="text-sm text-base/60 mt-1">Live bandwidth • Updates every 30 seconds</p>
+                                <span class="text-xs text-gray-500">30s refresh</span>
                             </div>
-                            <button class="flex items-center gap-1.5 text-base/60 hover:text-base transition-colors chart-toggle" 
-                                    data-interface="${interfaceId}"
-                                    title="Toggle network graph">
-                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
-                                          d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+                            <button class="flex items-center gap-1 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 chart-toggle text-xs" data-interface="${interfaceId}" title="Toggle graph">
+                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                                 </svg>
-                                <span class="text-sm font-medium">Graph</span>
+                                Graph
                             </button>
                         </div>
                         
                         <!-- Download Speed -->
-                        <div class="mb-6">
-                            <div class="flex items-center justify-between mb-2">
-                                <div class="flex items-center gap-2">
-                                    <svg class="w-4 h-4 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
-                                              d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"></path>
+                        <div class="mb-3">
+                            <div class="flex items-center justify-between mb-1">
+                                <div class="flex items-center gap-1">
+                                    <svg class="w-3 h-3 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"></path>
                                     </svg>
-                                    <span class="text-sm font-medium text-base/80">Download</span>
-                                    <span class="text-lg font-bold text-success" data-traffic="${interfaceId}-download-rate">0 B/s</span>
+                                    <span class="text-xs font-medium text-gray-700 dark:text-gray-300">Down</span>
+                                    <span class="text-sm font-bold text-success" data-traffic="${interfaceId}-download-rate">0 B/s</span>
                                 </div>
                                 <div class="text-right">
-                                    <span class="text-xs text-base/50">Peak: </span>
-                                    <span class="text-xs font-medium text-base/70" data-traffic="${interfaceId}-download-peak">0 B/s</span>
+                                    <span class="text-xs text-gray-400">Peak: </span>
+                                    <span class="text-xs font-medium text-gray-600 dark:text-gray-400" data-traffic="${interfaceId}-download-peak">0 B/s</span>
                                 </div>
                             </div>
                             <div class="network-flow-bar">
@@ -1329,19 +1043,18 @@
                         </div>
                         
                         <!-- Upload Speed -->
-                        <div class="mb-6">
-                            <div class="flex items-center justify-between mb-2">
-                                <div class="flex items-center gap-2">
-                                    <svg class="w-4 h-4 text-info" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
-                                              d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
+                        <div class="mb-3">
+                            <div class="flex items-center justify-between mb-1">
+                                <div class="flex items-center gap-1">
+                                    <svg class="w-3 h-3 text-info" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                                     </svg>
-                                    <span class="text-sm font-medium text-base/80">Upload</span>
-                                    <span class="text-lg font-bold text-info" data-traffic="${interfaceId}-upload-rate">0 B/s</span>
+                                    <span class="text-xs font-medium text-gray-700 dark:text-gray-300">Up</span>
+                                    <span class="text-sm font-bold text-info" data-traffic="${interfaceId}-upload-rate">0 B/s</span>
                                 </div>
                                 <div class="text-right">
-                                    <span class="text-xs text-base/50">Peak: </span>
-                                    <span class="text-xs font-medium text-base/70" data-traffic="${interfaceId}-upload-peak">0 B/s</span>
+                                    <span class="text-xs text-gray-400">Peak: </span>
+                                    <span class="text-xs font-medium text-gray-600 dark:text-gray-400" data-traffic="${interfaceId}-upload-peak">0 B/s</span>
                                 </div>
                             </div>
                             <div class="network-flow-bar">
@@ -1351,24 +1064,24 @@
                         
                         <!-- Network Graph Dropdown -->
                         <div class="chart-dropdown" data-chart-container="${interfaceId}">
-                            <div class="border-t border-neutral/30 pt-4 mt-4">
-                                <canvas id="chart-${interfaceId}" class="w-full" style="height: 200px;"></canvas>
+                            <div class="border-t border-gray-200 dark:border-gray-700 pt-3 mt-2">
+                                <canvas id="chart-${interfaceId}" class="w-full" style="height: 150px;"></canvas>
                             </div>
                         </div>
                         
                         <!-- Statistics -->
-                        <div class="grid grid-cols-3 gap-3 text-center">
-                            <div class="p-3 rounded bg-background-secondary/50 border border-neutral/20">
-                                <p class="text-xs text-base/50 uppercase">Combined</p>
-                                <p class="text-sm font-semibold text-base" data-traffic="${interfaceId}-combined">0 B/s</p>
+                        <div class="grid grid-cols-3 gap-2 text-center mt-2">
+                            <div class="p-2 rounded bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
+                                <p class="text-xs text-gray-400 uppercase">Combined</p>
+                                <p class="text-xs font-semibold" data-traffic="${interfaceId}-combined">0 B/s</p>
                             </div>
-                            <div class="p-3 rounded bg-background-secondary/50 border border-neutral/20">
-                                <p class="text-xs text-base/50 uppercase">Total In</p>
-                                <p class="text-sm font-semibold text-base" data-traffic="${interfaceId}-total-in">0 MB</p>
+                            <div class="p-2 rounded bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
+                                <p class="text-xs text-gray-400 uppercase">In</p>
+                                <p class="text-xs font-semibold" data-traffic="${interfaceId}-total-in">0 MB</p>
                             </div>
-                            <div class="p-3 rounded bg-background-secondary/50 border border-neutral/20">
-                                <p class="text-xs text-base/50 uppercase">Total Out</p>
-                                <p class="text-sm font-semibold text-base" data-traffic="${interfaceId}-total-out">0 MB</p>
+                            <div class="p-2 rounded bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
+                                <p class="text-xs text-gray-400 uppercase">Out</p>
+                                <p class="text-xs font-semibold" data-traffic="${interfaceId}-total-out">0 MB</p>
                             </div>
                         </div>
                     </div>
@@ -1498,12 +1211,11 @@
                 
                 if (networkData.interfaces.length === 0) {
                     container.innerHTML = `
-                        <div class="bg-background-secondary border border-neutral rounded-lg p-8 text-center">
-                            <svg class="w-12 h-12 mx-auto text-base/40 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
-                                      d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                        <div class="bg-background-secondary border border-neutral rounded-lg p-6 text-center">
+                            <svg class="w-10 h-10 mx-auto text-gray-300 dark:text-gray-600 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                             </svg>
-                            <p class="text-base/60">No network data available</p>
+                            <p class="text-sm text-gray-500 dark:text-gray-400">No network data available</p>
                         </div>
                     `;
                     return;
@@ -1900,13 +1612,12 @@
                     const container = document.getElementById('network-traffic-container');
                     if (container && !container.querySelector('.bg-background-secondary')) {
                         container.innerHTML = `
-                            <div class="bg-background-secondary border border-neutral rounded-lg p-8 text-center">
-                                <svg class="w-12 h-12 mx-auto text-red-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
-                                          d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                            <div class="bg-background-secondary border border-neutral rounded-lg p-6 text-center">
+                                <svg class="w-10 h-10 mx-auto text-red-400 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                 </svg>
-                                <p class="text-base/60">Failed to load network data</p>
-                                <p class="text-sm text-base/40 mt-2">${error.message}</p>
+                                <p class="text-sm text-gray-500 dark:text-gray-400">Failed to load network data</p>
+                                <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">${error.message}</p>
                             </div>
                         `;
                     }
diff --git a/extensions/Servers/Proxmox/views/server.blade.php b/extensions/Servers/Proxmox/views/server.blade.php
index 0bd22932e..0fbb1bf95 100644
--- a/extensions/Servers/Proxmox/views/server.blade.php
+++ b/extensions/Servers/Proxmox/views/server.blade.php
@@ -1,11 +1,11 @@
-{{-- Server Card Component - TailServer Theme (shadcn-inspired) --}}
-<div class="space-y-4">
+{{-- Server Card Component - Compact Layout --}}
+<div class="space-y-2">
     @if($status)
     <a href="{{ route('proxmox.server.overview', ['server' => $server->id]) }}" wire:navigate>
-        <div class="flex flex-col rounded-xl border border-neutral/15 bg-card text-card-foreground shadow-sm hover:shadow-md hover:border-neutral/25 transition-shadow duration-150 cursor-pointer">
+        <div class="flex flex-col rounded-lg border border-gray-200 dark:border-gray-700 bg-card text-card-foreground shadow-sm hover:shadow-md hover:border-gray-300 dark:hover:border-gray-600 transition-shadow duration-150 cursor-pointer">
             {{-- Header: Server Name & Status --}}
-            <div class="flex items-center justify-between px-6 py-4">
-                <div class="flex items-center gap-3">
+            <div class="flex items-center justify-between px-4 py-3">
+                <div class="flex items-center gap-2">
                     @if($server->user_set_icon)
                         @php
                             $iconColor = $server->user_set_icon_color ?? '#6366f1';
@@ -14,39 +14,38 @@
                             $iconName = $server->user_set_icon;
                             $componentName = $iconPrefix . '-' . $iconName;
                         @endphp
-                        <div class="flex items-center justify-center size-9 rounded-lg" style="background-color: {{ $bgColor }};">
-                            <x-dynamic-component :component="$componentName" class="size-4" style="color: {{ $iconColor }};" />
+                        <div class="flex items-center justify-center size-7 rounded" style="background-color: {{ $bgColor }};">
+                            <x-dynamic-component :component="$componentName" class="size-3" style="color: {{ $iconColor }};" />
                         </div>
                     @else
-                        <div class="flex items-center justify-center size-9 rounded-lg bg-primary/10">
-                            <x-ri-server-line class="size-4 text-primary" />
+                        <div class="flex items-center justify-center size-7 rounded bg-blue-50 dark:bg-blue-900">
+                            <x-ri-server-line class="size-3 text-primary" />
                         </div>
                     @endif
-                    <span class="font-semibold">{{ $status->name }}</span>
+                    <span class="font-semibold text-sm">{{ $status->name }}</span>
                 </div>
                 <x-proxmox::ui.server-status :status="$status->status" showLabel />
             </div>
 
             {{-- Quick Info Row --}}
-            <div class="flex flex-row flex-wrap gap-6 px-6 py-3 border-y border-neutral/10">
-                <div class="flex flex-col min-w-[120px]">
-                    <span class="text-xs font-medium text-muted-foreground uppercase tracking-wide">IPv4 Address</span>
-                    <span class="text-sm mt-0.5">{{ $server->primaryIpv4->ip ?? 'None' }}</span>
+            <div class="flex flex-row flex-wrap gap-3 px-4 py-2 border-y border-gray-100 dark:border-gray-800 text-xs">
+                <div class="flex flex-col min-w-[100px]">
+                    <span class="font-medium text-gray-500 dark:text-gray-400 uppercase text-[10px]">IPv4</span>
+                    <span class="text-xs">{{ $server->primaryIpv4->ip ?? 'None' }}</span>
                 </div>
-                <div class="flex flex-col min-w-[120px]">
-                    <span class="text-xs font-medium text-muted-foreground uppercase tracking-wide">IPv6 Address</span>
-                    <span class="text-sm mt-0.5">{{ $server->primaryIpv6->ip ?? 'None' }}</span>
+                <div class="flex flex-col min-w-[100px]">
+                    <span class="font-medium text-gray-500 dark:text-gray-400 uppercase text-[10px]">IPv6</span>
+                    <span class="text-xs">{{ $server->primaryIpv6->ip ?? 'None' }}</span>
                 </div>
                 @if($status->status == 'running' && isset($status->uptime))
-                <div class="flex flex-col min-w-[100px]">
-                    <span class="text-xs font-medium text-muted-foreground uppercase tracking-wide">Uptime</span>
-                    <span class="text-sm mt-0.5">
+                <div class="flex flex-col min-w-[70px]">
+                    <span class="font-medium text-gray-500 dark:text-gray-400 uppercase text-[10px]">Uptime</span>
+                    <span class="text-xs">
                         @php
                             $uptime = $status->uptime;
                             $days = floor($uptime / 86400);
                             $hours = floor(($uptime % 86400) / 3600);
                             $minutes = floor(($uptime % 3600) / 60);
-                            
                             $uptimeStr = '';
                             if ($days > 0) $uptimeStr .= $days . 'd ';
                             if ($hours > 0 || $days > 0) $uptimeStr .= $hours . 'h ';
@@ -56,78 +55,57 @@
                     </span>
                 </div>
                 @endif
-                <div class="hidden sm:flex flex-col min-w-[100px]">
-                    <span class="text-xs font-medium text-muted-foreground uppercase tracking-wide">Memory</span>
-                    <span class="text-sm mt-0.5">
-                        @if($status->status == 'running')
-                            {{ Illuminate\Support\Number::fileSize(bytes: $status->mem) }}/
-                        @endif
-                        {{ Illuminate\Support\Number::fileSize(bytes: $status->maxmem) }}
+                <div class="hidden sm:flex flex-col min-w-[80px]">
+                    <span class="font-medium text-gray-500 dark:text-gray-400 uppercase text-[10px]">Memory</span>
+                    <span class="text-xs">
+                        @if($status->status == 'running'){{ Illuminate\Support\Number::fileSize(bytes: $status->mem) }}/@endif{{ Illuminate\Support\Number::fileSize(bytes: $status->maxmem) }}
                     </span>
                 </div>
-                <div class="hidden sm:flex flex-col min-w-[80px]">
-                    <span class="text-xs font-medium text-muted-foreground uppercase tracking-wide">Disk</span>
-                    <span class="text-sm mt-0.5">{{ Illuminate\Support\Number::fileSize(bytes: $status->maxdisk) }}</span>
+                <div class="hidden sm:flex flex-col min-w-[60px]">
+                    <span class="font-medium text-gray-500 dark:text-gray-400 uppercase text-[10px]">Disk</span>
+                    <span class="text-xs">{{ Illuminate\Support\Number::fileSize(bytes: $status->maxdisk) }}</span>
                 </div>
                 @if($status->status == 'running')
-                <div class="hidden sm:flex flex-col min-w-[60px]">
-                    <span class="text-xs font-medium text-muted-foreground uppercase tracking-wide">CPU</span>
-                    <span class="text-sm mt-0.5">{{ round($status->cpu * 100, 2) }}%</span>
+                <div class="hidden sm:flex flex-col min-w-[50px]">
+                    <span class="font-medium text-gray-500 dark:text-gray-400 uppercase text-[10px]">CPU</span>
+                    <span class="text-xs">{{ round($status->cpu * 100, 1) }}%</span>
                 </div>
                 @endif
             </div>
 
             {{-- Server Configuration Grid --}}
-            <div class="px-6 py-4">
-                <div class="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-3">Server Configuration</div>
-                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-                    <x-proxmox::ui.stat-card
-                        label="CPU Cores"
-                        :value="($status->cpus ?? 'N/A') . ' ' . (($status->cpus ?? 0) > 1 ? 'Cores' : 'Core')"
-                        icon="ri-cpu-line"
-                    />
-                    <x-proxmox::ui.stat-card
-                        label="RAM Allocation"
-                        :value="round(($status->maxmem ?? 0) / (1024 * 1024 * 1024), 2) . ' GiB'"
-                        icon="ri-ram-line"
-                    />
-                    <x-proxmox::ui.stat-card
-                        label="Disk Capacity"
-                        :value="Illuminate\Support\Number::fileSize(bytes: $status->maxdisk ?? 0)"
-                        icon="ri-hard-drive-2-line"
-                    />
-                    <div class="flex flex-col gap-6 rounded-xl border border-neutral/15 bg-card py-6 text-card-foreground shadow-sm">
-                        <div class="flex flex-row items-center justify-between space-y-0 px-6 pb-2">
-                            <h3 class="text-sm font-medium text-muted-foreground">Bandwidth</h3>
-                            <x-ri-speed-line class="size-4 text-muted-foreground" />
-                        </div>
-                        <div class="px-6">
-                            <div class="text-xl font-bold">{{ $this->monthlyTraffic }} GiB</div>
-                            <p class="text-xs text-muted-foreground mt-1">
-                                of {{ $this->bandwidthThreshold95 }} GiB (95% threshold)
-                            </p>
+            <div class="px-4 py-3">
+                <div class="text-[10px] font-medium text-gray-500 dark:text-gray-400 uppercase mb-2">Configuration</div>
+                <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
+                    <x-proxmox::ui.stat-card label="CPU" :value="($status->cpus ?? 'N/A') . ' Core' . (($status->cpus ?? 0) > 1 ? 's' : '')" icon="ri-cpu-line" />
+                    <x-proxmox::ui.stat-card label="RAM" :value="round(($status->maxmem ?? 0) / (1024 * 1024 * 1024), 1) . ' GiB'" icon="ri-ram-line" />
+                    <x-proxmox::ui.stat-card label="Disk" :value="Illuminate\Support\Number::fileSize(bytes: $status->maxdisk ?? 0)" icon="ri-hard-drive-2-line" />
+                    <div class="flex flex-col gap-2 rounded border border-gray-200 dark:border-gray-700 bg-card p-3 text-card-foreground">
+                        <div class="flex items-center justify-between">
+                            <span class="text-xs font-medium text-gray-500 dark:text-gray-400">Bandwidth</span>
+                            <x-ri-speed-line class="size-3 text-gray-400" />
                         </div>
+                        <div class="text-sm font-bold">{{ $this->monthlyTraffic }} GiB</div>
+                        <p class="text-[10px] text-gray-500 dark:text-gray-400">of {{ $this->bandwidthThreshold95 }} GiB (95%)</p>
                     </div>
                 </div>
             </div>
         </div>
     </a>
     @else
-    {{-- Error State: Status unavailable --}}
+    {{-- Error State --}}
     <a href="{{ route('proxmox.server.overview', ['server' => $server->id]) }}" wire:navigate>
-        <div class="flex flex-col rounded-xl border border-danger/20 bg-card text-card-foreground shadow-sm hover:shadow-md hover:border-danger/30 transition-shadow duration-150 cursor-pointer">
-            <div class="flex items-center justify-between px-6 py-4">
-                <div class="flex items-center gap-3">
-                    <div class="flex items-center justify-center size-9 rounded-lg bg-danger/10">
-                        <x-ri-server-line class="size-4 text-danger" />
+        <div class="flex flex-col rounded-lg border border-red-200 dark:border-red-800 bg-card text-card-foreground shadow-sm hover:shadow-md hover:border-red-300 dark:hover:border-red-700 transition-shadow duration-150 cursor-pointer">
+            <div class="flex items-center justify-between px-4 py-3">
+                <div class="flex items-center gap-2">
+                    <div class="flex items-center justify-center size-7 rounded bg-red-50 dark:bg-red-900">
+                        <x-ri-server-line class="size-3 text-danger" />
                     </div>
-                    <span class="font-semibold">{{ $server->hostname ?? 'Server #' . $server->id }}</span>
+                    <span class="font-semibold text-sm">{{ $server->hostname ?? 'Server #' . $server->id }}</span>
                 </div>
-                <x-proxmox::ui.badge variant="danger" icon="ri-error-warning-fill">
-                    Unavailable
-                </x-proxmox::ui.badge>
+                <x-proxmox::ui.badge variant="danger" icon="ri-error-warning-fill">Unavailable</x-proxmox::ui.badge>
             </div>
-            <p class="text-sm text-muted-foreground px-6 pb-4">Unable to retrieve server status. Click to view details or try again.</p>
+            <p class="text-xs text-gray-500 dark:text-gray-400 px-4 pb-3">Unable to retrieve server status.</p>
         </div>
     </a>
     @endif
diff --git a/extensions/Servers/Proxmox/views/statistics.blade.php b/extensions/Servers/Proxmox/views/statistics.blade.php
index 4a4f1dc02..b35e3acec 100644
--- a/extensions/Servers/Proxmox/views/statistics.blade.php
+++ b/extensions/Servers/Proxmox/views/statistics.blade.php
@@ -82,7 +82,7 @@
                                      x-transition:leave-end="opacity-0"
                                      @click="open = false"
                                      @keydown.escape.window="open = false"
-                                     class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                                     class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                                      style="display: none;">
                                 </div>
                                 <!-- Modal -->
@@ -95,7 +95,7 @@
                                      x-transition:leave-end="opacity-0 scale-95"
                                      @click.away="open = false"
                                      @keydown.escape.window="open = false"
-                                     class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                                     class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                                      style="display: none;">
                                     <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
                                         <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -172,7 +172,7 @@
                                                  x-transition:leave-end="opacity-0"
                                                  @click="open = false"
                                                  @keydown.escape.window="open = false"
-                                                 class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                                                 class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                                                  style="display: none;">
                                             </div>
                                             <!-- Modal -->
@@ -185,7 +185,7 @@
                                                  x-transition:leave-end="opacity-0 scale-95"
                                                  @click.away="open = false"
                                                  @keydown.escape.window="open = false"
-                                                 class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                                                 class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                                                  style="display: none;">
                                                 <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
                                                     <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -266,7 +266,7 @@
                                              x-transition:leave-end="opacity-0"
                                              @click="open = false"
                                              @keydown.escape.window="open = false"
-                                             class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                                             class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                                              style="display: none;">
                                         </div>
                                         <!-- Modal -->
@@ -279,7 +279,7 @@
                                              x-transition:leave-end="opacity-0 scale-95"
                                              @click.away="open = false"
                                              @keydown.escape.window="open = false"
-                                             class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                                             class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                                              style="display: none;">
                                             <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
                                                 <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -360,7 +360,7 @@
                                              x-transition:leave-end="opacity-0"
                                              @click="open = false"
                                              @keydown.escape.window="open = false"
-                                             class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                                             class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                                              style="display: none;">
                                         </div>
                                         <!-- Modal -->
@@ -373,7 +373,7 @@
                                              x-transition:leave-end="opacity-0 scale-95"
                                              @click.away="open = false"
                                              @keydown.escape.window="open = false"
-                                             class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                                             class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                                              style="display: none;">
                                             <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
                                                 <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -454,7 +454,7 @@
                                              x-transition:leave-end="opacity-0"
                                              @click="open = false"
                                              @keydown.escape.window="open = false"
-                                             class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                                             class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                                              style="display: none;">
                                         </div>
                                         <!-- Modal -->
@@ -467,7 +467,7 @@
                                              x-transition:leave-end="opacity-0 scale-95"
                                              @click.away="open = false"
                                              @keydown.escape.window="open = false"
-                                             class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                                             class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                                              style="display: none;">
                                             <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
                                                 <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -550,7 +550,7 @@
                              x-transition:leave-end="opacity-0"
                              @click="open = false"
                              @keydown.escape.window="open = false"
-                             class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                             class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                              style="display: none;">
                         </div>
                         <!-- Modal -->
@@ -563,7 +563,7 @@
                              x-transition:leave-end="opacity-0 scale-95"
                              @click.away="open = false"
                              @keydown.escape.window="open = false"
-                             class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                             class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                              style="display: none;">
                             <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
                                 <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -972,7 +972,7 @@
                              x-transition:leave-end="opacity-0"
                              @click="open = false"
                              @keydown.escape.window="open = false"
-                             class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                             class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                              style="display: none;">
                         </div>
                         <!-- Modal -->
@@ -985,7 +985,7 @@
                              x-transition:leave-end="opacity-0 scale-95"
                              @click.away="open = false"
                              @keydown.escape.window="open = false"
-                             class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                             class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                              style="display: none;">
                             <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
                                 <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -1467,7 +1467,7 @@
                              x-transition:leave-end="opacity-0"
                              @click="open = false"
                              @keydown.escape.window="open = false"
-                             class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                             class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                              style="display: none;">
                         </div>
                         <!-- Modal -->
@@ -1480,7 +1480,7 @@
                              x-transition:leave-end="opacity-0 scale-95"
                              @click.away="open = false"
                              @keydown.escape.window="open = false"
-                             class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                             class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                              style="display: none;">
                             <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
                                 <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -1886,7 +1886,7 @@
                          x-transition:leave-end="opacity-0"
                          @click="open = false"
                          @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                         class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                          style="display: none;">
                     </div>
                     <!-- Modal -->
@@ -1899,7 +1899,7 @@
                          x-transition:leave-end="opacity-0 scale-95"
                          @click.away="open = false"
                          @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                         class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                          style="display: none;">
                         <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
                             <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -2207,7 +2207,7 @@
                                  x-transition:leave-end="opacity-0"
                                  @click="open = false"
                                  @keydown.escape.window="open = false"
-                                 class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                                 class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                                  style="display: none;">
                             </div>
                             <!-- Modal -->
@@ -2220,7 +2220,7 @@
                                  x-transition:leave-end="opacity-0 scale-95"
                                  @click.away="open = false"
                                  @keydown.escape.window="open = false"
-                                 class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                                 class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                                  style="display: none;">
                                 <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
                                     <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -2433,7 +2433,7 @@
                                                                      x-transition:leave-end="opacity-0"
                                                                      @click="open = false"
                                                                      @keydown.escape.window="open = false"
-                                                                     class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                                                                     class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                                                                      style="display: none;">
                                                                 </div>
                                                                 <!-- Modal -->
@@ -2446,7 +2446,7 @@
                                                                      x-transition:leave-end="opacity-0"
                                                                      @click="open = false"
                                                                      @keydown.escape.window="open = false"
-                                                                     class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4"
+                                                                     class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4"
                                                                      style="display: none;">
                                                                     <div @click.stop class="relative w-full max-w-4xl bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl max-h-[90vh] overflow-y-auto overflow-x-hidden">
                                                                         <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors z-10">
@@ -2488,7 +2488,7 @@
                                                                      x-transition:leave-end="opacity-0"
                                                                      @click="open = false"
                                                                      @keydown.escape.window="open = false"
-                                                                     class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                                                                     class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                                                                      style="display: none;">
                                                                 </div>
                                                                 <!-- Modal -->
@@ -2501,7 +2501,7 @@
                                                                      x-transition:leave-end="opacity-0"
                                                                      @click="open = false"
                                                                      @keydown.escape.window="open = false"
-                                                                     class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4"
+                                                                     class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4"
                                                                      style="display: none;">
                                                                     <div @click.stop class="relative w-full max-w-4xl bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl max-h-[90vh] overflow-y-auto overflow-x-hidden">
                                                                         <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors z-10">
@@ -2558,7 +2558,7 @@
                                                                      x-transition:leave-end="opacity-0"
                                                                      @click="open = false"
                                                                      @keydown.escape.window="open = false"
-                                                                     class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4"
+                                                                     class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4"
                                                                      style="display: none;">
                                                                     <div @click.stop class="relative w-full max-w-4xl bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl max-h-[90vh] overflow-y-auto overflow-x-hidden">
                                                                         <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors z-10">
@@ -2662,7 +2662,7 @@
                                                                      x-transition:leave-end="opacity-0"
                                                                      @click="open = false"
                                                                      @keydown.escape.window="open = false"
-                                                                     class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4"
+                                                                     class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4"
                                                                      style="display: none;">
                                                                     <div @click.stop class="relative w-full max-w-4xl bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl max-h-[90vh] overflow-y-auto overflow-x-hidden">
                                                                         <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors z-10">
@@ -2753,7 +2753,7 @@
                                                                      x-transition:leave-end="opacity-0"
                                                                      @click="open = false"
                                                                      @keydown.escape.window="open = false"
-                                                                     class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                                                                     class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                                                                      style="display: none;">
                                                                 </div>
                                                                 <!-- Modal -->
@@ -2766,7 +2766,7 @@
                                                                      x-transition:leave-end="opacity-0"
                                                                      @click="open = false"
                                                                      @keydown.escape.window="open = false"
-                                                                     class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4"
+                                                                     class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4"
                                                                      style="display: none;">
                                                                     <div @click.stop class="relative w-full max-w-4xl bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl max-h-[90vh] overflow-y-auto overflow-x-hidden">
                                                                         <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors z-10">
@@ -2996,7 +2996,7 @@
                                                                  x-transition:leave-end="opacity-0"
                                                                  @click="open = false"
                                                                  @keydown.escape.window="open = false"
-                                                                 class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4"
+                                                                 class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4"
                                                                  style="display: none;">
                                                                 <div @click.stop class="relative w-full max-w-2xl bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl max-h-[90vh] overflow-y-auto overflow-x-hidden">
                                                                     <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors z-10">
@@ -3077,7 +3077,7 @@
                                                                  x-transition:leave-end="opacity-0"
                                                                  @click="open = false"
                                                                  @keydown.escape.window="open = false"
-                                                                 class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                                                                 class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                                                                  style="display: none;">
                                                             </div>
                                                             <!-- Modal -->
@@ -3090,7 +3090,7 @@
                                                                  x-transition:leave-end="opacity-0 scale-95"
                                                                  @click.away="open = false"
                                                                  @keydown.escape.window="open = false"
-                                                                 class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                                                                 class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                                                                  style="display: none;">
                                                                 <div class="relative w-full max-w-md bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-4">
                                                                     <button @click="open = false" class="absolute top-3 right-3 text-base/50 hover:text-base transition-colors">
@@ -3293,7 +3293,7 @@
                                                              x-transition:leave-end="opacity-0"
                                                              @click="open = false"
                                                              @keydown.escape.window="open = false"
-                                                             class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                                                             class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                                                              style="display: none;">
                                                         </div>
                                                         <!-- Modal -->
@@ -3306,7 +3306,7 @@
                                                              x-transition:leave-end="opacity-0 scale-95"
                                                              @click.away="open = false"
                                                              @keydown.escape.window="open = false"
-                                                             class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                                                             class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                                                              style="display: none;">
                                                             <div class="relative w-full max-w-md bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-4">
                                                                 <button @click="open = false" class="absolute top-3 right-3 text-base/50 hover:text-base transition-colors">
@@ -3528,7 +3528,7 @@
                                                              x-transition:leave-end="opacity-0"
                                                              @click="open = false"
                                                              @keydown.escape.window="open = false"
-                                                             class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4"
+                                                             class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4"
                                                              style="display: none;">
                                                             <div @click.stop class="relative w-full max-w-4xl bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl max-h-[90vh] overflow-y-auto overflow-x-hidden">
                                                                 <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors z-10">
@@ -3696,7 +3696,7 @@
              x-transition:leave-end="opacity-0"
              @click="open = false"
              @keydown.escape.window="open = false"
-             class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+             class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
              style="display: none;">
         </div>
         <!-- Modal -->
@@ -3709,7 +3709,7 @@
              x-transition:leave-end="opacity-0 scale-95"
              @click.away="open = false"
              @keydown.escape.window="open = false"
-             class="fixed inset-0 z-50 flex items-center justify-center p-4"
+             class="fixed inset-0 z-[60] flex items-center justify-center p-4"
              style="display: none;">
             <div class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-2xl max-w-md w-full mx-4">
                 <div class="p-6">
@@ -3786,7 +3786,7 @@
              x-transition:leave-end="opacity-0"
              @click="$wire.closeClearStatisticsModal()"
              @keydown.escape.window="$wire.closeClearStatisticsModal()"
-             class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+             class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
              style="display: none;">
         </div>
         <!-- Modal -->
@@ -3799,7 +3799,7 @@
              x-transition:leave-end="opacity-0 scale-95"
              @click.away="$wire.closeClearStatisticsModal()"
              @keydown.escape.window="$wire.closeClearStatisticsModal()"
-             class="fixed inset-0 z-50 flex items-center justify-center p-4"
+             class="fixed inset-0 z-[60] flex items-center justify-center p-4"
              style="display: none;">
             <div class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-2xl max-w-md w-full mx-4">
                 <div class="p-6">
@@ -3846,7 +3846,7 @@
              x-transition:leave-end="opacity-0"
              @click="$wire.closeExportInfoModal()"
              @keydown.escape.window="$wire.closeExportInfoModal()"
-             class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+             class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
              style="display: none;">
         </div>
         <!-- Modal -->
@@ -3859,7 +3859,7 @@
              x-transition:leave-end="opacity-0 scale-95"
              @click.away="$wire.closeExportInfoModal()"
              @keydown.escape.window="$wire.closeExportInfoModal()"
-             class="fixed inset-0 z-50 flex items-center justify-center p-4"
+             class="fixed inset-0 z-[60] flex items-center justify-center p-4"
              style="display: none;">
             <div class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-2xl max-w-md w-full mx-4">
                 <div class="p-6 space-y-4">
diff --git a/extensions/Servers/Proxmox/views/storage.blade.php b/extensions/Servers/Proxmox/views/storage.blade.php
index b8ecdb583..517428419 100644
--- a/extensions/Servers/Proxmox/views/storage.blade.php
+++ b/extensions/Servers/Proxmox/views/storage.blade.php
@@ -393,7 +393,7 @@
 
     <!-- Add Drive Modal -->
     @if($showAddDriveModal)
-        <div class="fixed inset-0 z-50 overflow-y-auto" x-data x-init="$el.querySelector('input')?.focus()">
+        <div class="fixed inset-0 z-[60] overflow-y-auto" x-data x-init="$el.querySelector('input')?.focus()">
             <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" wire:click="closeAddDriveModal"></div>
             <div class="relative min-h-screen flex items-center justify-center p-4">
                 <div class="relative w-full max-w-lg bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl">
@@ -519,7 +519,7 @@
     <!-- Edit Drive Modal -->
     @if($showEditDriveModal && $editingDriveKey && isset($drives[$editingDriveKey]))
         @php $editDrive = $drives[$editingDriveKey]; @endphp
-        <div class="fixed inset-0 z-50 overflow-y-auto">
+        <div class="fixed inset-0 z-[60] overflow-y-auto">
             <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" wire:click="closeEditDriveModal"></div>
             <div class="relative min-h-screen flex items-center justify-center p-4">
                 <div class="relative w-full max-w-lg bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl">
@@ -620,7 +620,7 @@
     <!-- Change Device Bus Modal -->
     @if($showMoveDriveModal && $movingDriveKey && isset($drives[$movingDriveKey]))
         @php $moveDrive = $drives[$movingDriveKey]; @endphp
-        <div class="fixed inset-0 z-50 overflow-y-auto">
+        <div class="fixed inset-0 z-[60] overflow-y-auto">
             <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" wire:click="closeMoveDriveModal"></div>
             <div class="relative min-h-screen flex items-center justify-center p-4">
                 <div class="relative w-full max-w-lg bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl">
@@ -685,7 +685,7 @@
     <!-- Detach Drive Confirmation Modal -->
     @if($showDetachModal && $detachingDriveKey && isset($drives[$detachingDriveKey]))
         @php $detachDrive = $drives[$detachingDriveKey]; @endphp
-        <div class="fixed inset-0 z-50 overflow-y-auto">
+        <div class="fixed inset-0 z-[60] overflow-y-auto">
             <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" wire:click="closeDetachModal"></div>
             <div class="relative min-h-screen flex items-center justify-center p-4">
                 <div class="relative w-full max-w-md bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl">
@@ -747,7 +747,7 @@
     <!-- Delete Drive Confirmation Modal -->
     @if($showDeleteModal && $deletingDriveKey && isset($drives[$deletingDriveKey]))
         @php $deleteDrive = $drives[$deletingDriveKey]; @endphp
-        <div class="fixed inset-0 z-50 overflow-y-auto">
+        <div class="fixed inset-0 z-[60] overflow-y-auto">
             <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" wire:click="closeDeleteModal"></div>
             <div class="relative min-h-screen flex items-center justify-center p-4">
                 <div class="relative w-full max-w-md bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl">
@@ -808,7 +808,7 @@
 
     <!-- Reattach Drive Modal -->
     @if($showReattachModal)
-        <div class="fixed inset-0 z-50 overflow-y-auto">
+        <div class="fixed inset-0 z-[60] overflow-y-auto">
             <div class="fixed inset-0 bg-black/50 transition-opacity"></div>
             <div class="flex min-h-full items-center justify-center p-4">
                 <div class="relative w-full max-w-lg transform overflow-hidden rounded-xl bg-background border border-neutral shadow-xl transition-all">
diff --git a/extensions/Servers/Proxmox/views/subdomain.blade.php b/extensions/Servers/Proxmox/views/subdomain.blade.php
index 6bef17509..f78667994 100644
--- a/extensions/Servers/Proxmox/views/subdomain.blade.php
+++ b/extensions/Servers/Proxmox/views/subdomain.blade.php
@@ -17,7 +17,7 @@
                          x-transition:leave-end="opacity-0"
                          @click="open = false"
                          @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                         class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                          style="display: none;">
                     </div>
                     <!-- Modal -->
@@ -30,7 +30,7 @@
                          x-transition:leave-end="opacity-0 scale-95"
                          @click.away="open = false"
                          @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                         class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                          style="display: none;">
                         <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6">
                             <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -110,7 +110,7 @@
                              x-transition:leave-end="opacity-0"
                              @click="open = false"
                              @keydown.escape.window="open = false"
-                             class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                             class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                              style="display: none;">
                         </div>
                         <!-- Modal -->
@@ -123,7 +123,7 @@
                              x-transition:leave-end="opacity-0 scale-95"
                              @click.away="open = false"
                              @keydown.escape.window="open = false"
-                             class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                             class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                              style="display: none;">
                             <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6">
                                 <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -185,7 +185,7 @@
                          x-transition:leave-end="opacity-0"
                          @click="open = false"
                          @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                         class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                          style="display: none;">
                     </div>
                     <!-- Modal -->
@@ -198,7 +198,7 @@
                          x-transition:leave-end="opacity-0 scale-95"
                          @click.away="open = false"
                          @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                         class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                          style="display: none;">
                         <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6">
                             <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
diff --git a/extensions/Servers/Proxmox/views/system.blade.php b/extensions/Servers/Proxmox/views/system.blade.php
index 19d39b277..6c7ac59c3 100644
--- a/extensions/Servers/Proxmox/views/system.blade.php
+++ b/extensions/Servers/Proxmox/views/system.blade.php
@@ -17,7 +17,7 @@
                          x-transition:leave-end="opacity-0"
                          @click="open = false"
                          @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                         class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                          style="display: none;">
                     </div>
                     <!-- Modal -->
@@ -30,7 +30,7 @@
                          x-transition:leave-end="opacity-0 scale-95"
                          @click.away="open = false"
                          @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                         class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                          style="display: none;">
                         <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6">
                             <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -85,7 +85,7 @@
                                  x-transition:leave-end="opacity-0"
                                  @click="open = false"
                                  @keydown.escape.window="open = false"
-                                 class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                                 class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                                  style="display: none;">
                             </div>
                             <!-- Modal -->
@@ -98,7 +98,7 @@
                                  x-transition:leave-end="opacity-0 scale-95"
                                  @click.away="open = false"
                                  @keydown.escape.window="open = false"
-                                 class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                                 class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                                  style="display: none;">
                                 <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6">
                                     <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -216,7 +216,7 @@
                                  x-transition:leave-end="opacity-0"
                                  @click="open = false"
                                  @keydown.escape.window="open = false"
-                                 class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                                 class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                                  style="display: none;">
                             </div>
                             <!-- Modal -->
@@ -229,7 +229,7 @@
                                  x-transition:leave-end="opacity-0 scale-95"
                                  @click.away="open = false"
                                  @keydown.escape.window="open = false"
-                                 class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                                 class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                                  style="display: none;">
                                 <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6">
                                     <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -330,7 +330,7 @@
                                      x-transition:leave-end="opacity-0"
                                      @click="open = false"
                                      @keydown.escape.window="open = false"
-                                     class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                                     class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                                      style="display: none;">
                                 </div>
                                 <!-- Modal -->
@@ -343,7 +343,7 @@
                                      x-transition:leave-end="opacity-0 scale-95"
                                      @click.away="open = false"
                                      @keydown.escape.window="open = false"
-                                     class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                                     class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                                      style="display: none;">
                                     <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6">
                                         <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -444,7 +444,7 @@
                                      x-transition:leave-end="opacity-0"
                                      @click="open = false"
                                      @keydown.escape.window="open = false"
-                                     class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                                     class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
                                      style="display: none;">
                                 </div>
                                 <!-- Modal -->
@@ -457,7 +457,7 @@
                                      x-transition:leave-end="opacity-0 scale-95"
                                      @click.away="open = false"
                                      @keydown.escape.window="open = false"
-                                     class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                                     class="fixed inset-0 z-[60] flex items-center justify-center p-4"
                                      style="display: none;">
                                     <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6">
                                         <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">