From b4e2923a2c040cc9276b63829c1aadfb8a7ff6c6 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 17 Dec 2025 12:33:10 -0500
Subject: [PATCH] refactor: update Proxmox UI components to use TailAdmin
 styling

- Changed component styles and classes to align with TailAdmin design patterns.
- Updated color schemes, typography, and layout for consistency across components.
- Refactored Info Row, Network Address Card, Notice Banner, Progress Bar, Resource Gauge, Section Header, Server Status, Spinner, Stat Card, and Tab Panel components.
- Enhanced responsiveness and accessibility features in various components.
---
 .../components/ui/action-button.blade.php     | 22 +++---
 .../components/ui/action-toolbar.blade.php    |  4 +-
 .../components/ui/allocation-card.blade.php   | 40 +++++------
 .../components/ui/confirm-dialog.blade.php    | 50 ++++++-------
 .../views/components/ui/copy-button.blade.php |  6 +-
 .../views/components/ui/copyable.blade.php    | 16 ++---
 .../components/ui/dropdown-divider.blade.php  |  4 +-
 .../components/ui/dropdown-item.blade.php     | 12 ++--
 .../components/ui/editable-field.blade.php    | 48 ++++++-------
 .../views/components/ui/empty-state.blade.php | 30 ++++----
 .../views/components/ui/help-modal.blade.php  | 20 +++---
 .../views/components/ui/icon-picker.blade.php | 46 ++++++------
 .../views/components/ui/index.blade.php       | 32 ++++-----
 .../views/components/ui/info-row.blade.php    | 17 ++---
 .../ui/network-address-card.blade.php         | 70 +++++++++----------
 .../components/ui/notice-banner.blade.php     | 44 ++++++------
 .../views/components/ui/progress.blade.php    | 37 ++++++----
 .../components/ui/resource-gauge.blade.php    | 50 ++++++-------
 .../components/ui/section-header.blade.php    | 56 +++++++--------
 .../components/ui/server-status.blade.php     | 50 ++++++-------
 .../views/components/ui/spinner.blade.php     | 16 ++---
 .../views/components/ui/stat-card.blade.php   | 38 +++++-----
 .../views/components/ui/tab-panel.blade.php   |  6 +-
 23 files changed, 364 insertions(+), 350 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/components/ui/action-button.blade.php b/extensions/Servers/Proxmox/views/components/ui/action-button.blade.php
index afc2ded7c..19442655e 100644
--- a/extensions/Servers/Proxmox/views/components/ui/action-button.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/action-button.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Action Toolbar Button Component - shadcn-style
+    Action Toolbar Button Component - TailAdmin style
     Individual button for VM control actions
     
     Usage:
@@ -24,23 +24,23 @@
 
 @php
     $variants = [
-        'default' => 'border bg-background hover:bg-accent hover:text-accent-foreground',
-        'primary' => 'border border-primary/20 bg-primary/10 text-primary hover:bg-primary/20',
-        'success' => 'border border-success/20 bg-success/10 text-success hover:bg-success/20',
-        'warning' => 'border border-warning/20 bg-warning/10 text-warning hover:bg-warning/20',
-        'danger' => 'border border-danger/20 bg-danger/10 text-danger hover:bg-danger/20',
+        'default' => 'border border-gray-300 bg-white text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700',
+        'primary' => 'border border-brand-200 bg-brand-50 text-brand-600 hover:bg-brand-100 dark:border-brand-800 dark:bg-brand-500/10 dark:text-brand-400 dark:hover:bg-brand-500/20',
+        'success' => 'border border-success-200 bg-success-50 text-success-600 hover:bg-success-100 dark:border-success-800 dark:bg-success-500/10 dark:text-success-400 dark:hover:bg-success-500/20',
+        'warning' => 'border border-warning-200 bg-warning-50 text-warning-600 hover:bg-warning-100 dark:border-warning-800 dark:bg-warning-500/10 dark:text-warning-400 dark:hover:bg-warning-500/20',
+        'danger' => 'border border-error-200 bg-error-50 text-error-600 hover:bg-error-100 dark:border-error-800 dark:bg-error-500/10 dark:text-error-400 dark:hover:bg-error-500/20',
     ];
     
     $sizes = [
-        'sm' => 'h-8 px-3 text-xs',
-        'md' => 'h-9 px-4 text-sm',
-        'lg' => 'h-10 px-5 text-sm',
+        'sm' => 'h-9 px-3 text-theme-xs',
+        'md' => 'h-10 px-4 text-theme-sm',
+        'lg' => 'h-11 px-5 text-theme-sm',
     ];
     
     $iconSizes = [
         'sm' => 'size-3.5',
         'md' => 'size-4',
-        'lg' => 'size-4',
+        'lg' => 'size-4.5',
     ];
 @endphp
 
@@ -53,7 +53,7 @@
     {{ $attributes->merge([
         'disabled' => $disabled || $loading,
     ])->class([
-        'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium ring-offset-background transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium transition-colors duration-150 focus:outline-none focus-visible:ring-3 focus-visible:ring-brand-500/20',
         $variants[$variant] ?? $variants['default'],
         $sizes[$size] ?? $sizes['md'],
         'pointer-events-none opacity-50' => $disabled,
diff --git a/extensions/Servers/Proxmox/views/components/ui/action-toolbar.blade.php b/extensions/Servers/Proxmox/views/components/ui/action-toolbar.blade.php
index 7df0c5994..db12d0d99 100644
--- a/extensions/Servers/Proxmox/views/components/ui/action-toolbar.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/action-toolbar.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Action Toolbar Component - shadcn-inspired
+    Action Toolbar Component - TailAdmin style
     For VM control buttons (Start, Stop, Restart, etc.)
     
     Usage:
@@ -17,7 +17,7 @@
 ])
 
 <div {{ $attributes->class([
-    'flex flex-wrap gap-2',
+    'flex flex-wrap gap-3',
     'justify-center' => $centered,
     'justify-start' => !$centered,
 ]) }}>
diff --git a/extensions/Servers/Proxmox/views/components/ui/allocation-card.blade.php b/extensions/Servers/Proxmox/views/components/ui/allocation-card.blade.php
index a67c5e484..55e638d01 100644
--- a/extensions/Servers/Proxmox/views/components/ui/allocation-card.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/allocation-card.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Resource Allocation Card Component - shadcn-style
+    Resource Allocation Card Component - TailAdmin style
     For displaying CPU, Memory, and other resource allocation vs entitlement
     
     Usage:
@@ -10,7 +10,7 @@
         entitlement-label="4 vCPU entitlement"
         description="Live hypervisor usage sampled directly from the cluster."
         gradient="linear-gradient(90deg, #38bdf8 0%, #6366f1 100%)"
-        :badge="['label' => 'Healthy', 'class' => 'text-success bg-success/15']"
+        :badge="['label' => 'Healthy', 'class' => 'text-success-500 bg-success-50 dark:bg-success-500/15']"
     />
 --}}
 
@@ -20,41 +20,41 @@
     'usageSummary',
     'entitlementLabel',
     'description' => null,
-    'gradient' => 'linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%)',
+    'gradient' => 'linear-gradient(90deg, #465fff 0%, #8b5cf6 100%)',
     'badge' => null,
     'icon' => null,
-    'iconColor' => 'text-primary',
+    'iconColor' => 'text-brand-500',
 ])
 
-<div {{ $attributes->class(['rounded-xl border bg-card p-4 shadow-sm transition-colors duration-150 hover:bg-accent/50']) }}>
-    <div class="flex flex-col gap-3">
+<div {{ $attributes->class(['rounded-2xl border border-gray-200 bg-white p-5 transition-colors duration-150 hover:bg-gray-50 dark:border-gray-800 dark:bg-white/[0.03] dark:hover:bg-gray-800/50']) }}>
+    <div class="flex flex-col gap-4">
         <div class="flex items-start justify-between gap-3">
-            <div class="flex items-start gap-3">
+            <div class="flex items-start gap-3.5">
                 @if($icon)
-                    <div class="flex-shrink-0 size-9 rounded-lg bg-primary/10 flex items-center justify-center">
-                        <x-dynamic-component :component="$icon" class="size-4 {{ $iconColor }}" />
+                    <div class="flex size-11 flex-shrink-0 items-center justify-center rounded-xl bg-brand-50 dark:bg-brand-500/10">
+                        <x-dynamic-component :component="$icon" class="size-5 {{ $iconColor }} dark:text-brand-400" />
                     </div>
                 @endif
-                <div class="min-w-0 space-y-0.5">
-                    <p class="text-xs font-medium text-muted-foreground">{{ $label }}</p>
-                    <p class="text-xl font-bold tracking-tight">{{ $usageSummary }}</p>
-                    <p class="text-xs text-muted-foreground">{{ $entitlementLabel }}</p>
+                <div class="min-w-0 space-y-1">
+                    <p class="text-theme-xs font-medium text-gray-500 dark:text-gray-400">{{ $label }}</p>
+                    <p class="text-xl font-bold text-gray-800 dark:text-white/90">{{ $usageSummary }}</p>
+                    <p class="text-theme-xs text-gray-500 dark:text-gray-400">{{ $entitlementLabel }}</p>
                 </div>
             </div>
             @if($badge)
-                <span class="flex-shrink-0 text-xs font-medium px-2 py-0.5 rounded-full {{ $badge['class'] ?? 'text-muted-foreground bg-muted' }}">
+                <span class="flex-shrink-0 rounded-full px-2.5 py-1 text-theme-xs font-medium {{ $badge['class'] ?? 'text-gray-500 bg-gray-100 dark:bg-gray-800 dark:text-gray-400' }}">
                     {{ $badge['label'] ?? '' }}
                 </span>
             @endif
         </div>
         
         @if(!is_null($percent))
-            <div class="space-y-1.5">
-                <div class="flex items-center justify-between text-xs">
-                    <span class="text-muted-foreground">Usage</span>
-                    <span class="font-medium">{{ $percent }}%</span>
+            <div class="space-y-2">
+                <div class="flex items-center justify-between text-theme-xs">
+                    <span class="text-gray-500 dark:text-gray-400">Usage</span>
+                    <span class="font-semibold text-gray-800 dark:text-white/90">{{ $percent }}%</span>
                 </div>
-                <div class="h-1.5 rounded-full bg-muted overflow-hidden">
+                <div class="h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
                     <div 
                         class="h-full rounded-full transition-all duration-300"
                         style="width: {{ min($percent, 130) }}%; background-image: {{ $gradient }};"
@@ -64,7 +64,7 @@
         @endif
         
         @if($description)
-            <p class="text-xs text-muted-foreground/70">{{ $description }}</p>
+            <p class="text-theme-xs text-gray-400 dark:text-gray-500">{{ $description }}</p>
         @endif
     </div>
 </div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/confirm-dialog.blade.php b/extensions/Servers/Proxmox/views/components/ui/confirm-dialog.blade.php
index 12aafa934..713b53562 100644
--- a/extensions/Servers/Proxmox/views/components/ui/confirm-dialog.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/confirm-dialog.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Confirm Dialog Component - shadcn-style
+    Confirm Dialog Component - TailAdmin style
     For dangerous actions like delete, stop, etc.
     
     Usage:
@@ -26,21 +26,21 @@
     $variants = [
         'danger' => [
             'icon' => 'ri-error-warning-line',
-            'iconBg' => 'bg-danger/10',
-            'iconColor' => 'text-danger',
-            'buttonClass' => 'bg-danger text-danger-foreground hover:bg-danger/90',
+            'iconBg' => 'bg-error-50 dark:bg-error-500/10',
+            'iconColor' => 'text-error-500',
+            'buttonClass' => 'bg-error-500 text-white shadow-theme-xs hover:bg-error-600',
         ],
         'warning' => [
             'icon' => 'ri-alert-line',
-            'iconBg' => 'bg-warning/10',
-            'iconColor' => 'text-warning',
-            'buttonClass' => 'bg-warning text-warning-foreground hover:bg-warning/90',
+            'iconBg' => 'bg-warning-50 dark:bg-warning-500/10',
+            'iconColor' => 'text-warning-500',
+            'buttonClass' => 'bg-warning-500 text-white shadow-theme-xs hover:bg-warning-600',
         ],
         'primary' => [
             'icon' => 'ri-question-line',
-            'iconBg' => 'bg-primary/10',
-            'iconColor' => 'text-primary',
-            'buttonClass' => 'bg-primary text-primary-foreground hover:bg-primary/90',
+            'iconBg' => 'bg-brand-50 dark:bg-brand-500/10',
+            'iconColor' => 'text-brand-500',
+            'buttonClass' => 'bg-brand-500 text-white shadow-theme-xs hover:bg-brand-600',
         ],
     ];
     
@@ -52,52 +52,52 @@
     x-show="open"
     x-cloak
     @keydown.escape.window="open = false"
-    class="fixed inset-0 z-50 overflow-y-auto"
+    class="fixed inset-0 z-99999 overflow-y-auto"
     {{ $attributes->whereDoesntStartWith('wire:click') }}
 >
-    <div class="flex items-center justify-center min-h-screen p-4">
+    <div class="flex min-h-screen items-center justify-center p-4">
         <!-- Backdrop -->
         <div 
             x-show="open"
-            x-transition:enter="ease-out duration-150"
+            x-transition:enter="ease-out duration-200"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
-            x-transition:leave="ease-in duration-100"
+            x-transition:leave="ease-in duration-150"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             @click="open = false"
-            class="fixed inset-0 bg-black/50 backdrop-blur-sm"
+            class="fixed inset-0 bg-gray-900/50 backdrop-blur-sm dark:bg-gray-900/80"
         ></div>
 
         <!-- Dialog -->
         <div
             x-show="open"
-            x-transition:enter="ease-out duration-150"
+            x-transition:enter="ease-out duration-200"
             x-transition:enter-start="opacity-0 scale-95"
             x-transition:enter-end="opacity-100 scale-100"
-            x-transition:leave="ease-in duration-100"
+            x-transition:leave="ease-in duration-150"
             x-transition:leave-start="opacity-100 scale-100"
             x-transition:leave-end="opacity-0 scale-95"
-            class="relative rounded-lg border bg-background shadow-lg w-full max-w-md p-6"
+            class="relative w-full max-w-md rounded-2xl border border-gray-200 bg-white p-6 shadow-theme-lg dark:border-gray-800 dark:bg-gray-900"
         >
             <div class="flex flex-col items-center text-center">
                 <!-- Icon -->
-                <div class="p-3 rounded-full {{ $config['iconBg'] }} mb-4">
-                    <x-dynamic-component :component="$config['icon']" class="size-6 {{ $config['iconColor'] }}" />
+                <div class="mb-5 flex size-14 items-center justify-center rounded-full {{ $config['iconBg'] }}">
+                    <x-dynamic-component :component="$config['icon']" class="size-7 {{ $config['iconColor'] }}" />
                 </div>
                 
                 <!-- Title -->
-                <h3 class="text-lg font-semibold leading-none tracking-tight mb-2">{{ $title }}</h3>
+                <h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-white/90">{{ $title }}</h3>
                 
                 <!-- Message -->
-                <p class="text-sm text-muted-foreground mb-6">{{ $message }}</p>
+                <p class="mb-6 text-theme-sm text-gray-500 dark:text-gray-400">{{ $message }}</p>
                 
                 <!-- Actions -->
-                <div class="flex gap-2 w-full">
+                <div class="flex w-full gap-3">
                     <button
                         type="button"
                         @click="open = false"
-                        class="flex-1 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors duration-150 h-9 px-4 py-2 border bg-background hover:bg-accent hover:text-accent-foreground"
+                        class="flex-1 inline-flex items-center justify-center whitespace-nowrap rounded-lg bg-white px-4 py-2.5 text-theme-sm font-medium text-gray-700 shadow-theme-xs ring-1 ring-gray-300 transition-colors duration-150 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-700 dark:hover:bg-gray-700"
                     >
                         {{ $cancelLabel }}
                     </button>
@@ -105,7 +105,7 @@
                         type="button"
                         @click="open = false"
                         {{ $attributes->whereStartsWith('wire:click') }}
-                        class="flex-1 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors duration-150 h-9 px-4 py-2 {{ $config['buttonClass'] }}"
+                        class="flex-1 inline-flex items-center justify-center whitespace-nowrap rounded-lg px-4 py-2.5 text-theme-sm font-medium transition-colors duration-150 {{ $config['buttonClass'] }}"
                     >
                         {{ $confirmLabel }}
                     </button>
diff --git a/extensions/Servers/Proxmox/views/components/ui/copy-button.blade.php b/extensions/Servers/Proxmox/views/components/ui/copy-button.blade.php
index 479596425..11fc58321 100644
--- a/extensions/Servers/Proxmox/views/components/ui/copy-button.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/copy-button.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Copy Button Component - shadcn-style
+    Copy Button Component - TailAdmin style
     Small inline button to copy text to clipboard
     
     Usage:
@@ -26,10 +26,10 @@
     <button
         @click="copyToClipboard()"
         type="button"
-        class="text-muted-foreground hover:text-foreground transition-colors duration-150 relative inline-flex items-center justify-center size-4"
+        class="relative inline-flex size-5 items-center justify-center text-gray-400 transition-colors duration-150 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
         title="Copy to clipboard"
     >
-        <x-ri-check-fill x-show="copied" x-transition x-cloak class="absolute size-4 text-success" />
+        <x-ri-check-fill x-show="copied" x-transition x-cloak class="absolute size-4 text-success-500" />
         <x-ri-file-copy-line x-show="!copied" x-transition class="absolute size-4" />
     </button>
 </div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/copyable.blade.php b/extensions/Servers/Proxmox/views/components/ui/copyable.blade.php
index e7a213104..c5b52107b 100644
--- a/extensions/Servers/Proxmox/views/components/ui/copyable.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/copyable.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Copyable Text Component - shadcn-style
+    Copyable Text Component - TailAdmin style
     Text field with copy to clipboard functionality
     
     Usage:
@@ -14,7 +14,7 @@
 
 <div class="space-y-2">
     @if($label)
-        <label class="text-sm font-medium leading-none">{{ $label }}</label>
+        <label class="text-theme-sm font-medium text-gray-700 dark:text-gray-300">{{ $label }}</label>
     @endif
     <div 
         x-data="{
@@ -27,29 +27,29 @@
                 setTimeout(() => this.copied = false, 2000);
             }
         }"
-        class="flex items-center gap-2 rounded-md border bg-transparent px-3 py-2 text-sm transition-colors duration-150"
+        class="flex items-center gap-2.5 rounded-lg border border-gray-300 bg-gray-50 px-4 py-2.5 text-theme-sm transition-colors duration-150 dark:border-gray-700 dark:bg-gray-800"
     >
         @if($masked)
-            <span class="truncate flex-1 font-mono" x-text="showValue ? copyText : '••••••••••••'"></span>
+            <span class="flex-1 truncate font-mono text-gray-700 dark:text-gray-300" x-text="showValue ? copyText : '••••••••••••'"></span>
             <button 
                 @click="showValue = !showValue" 
                 type="button"
-                class="text-muted-foreground hover:text-foreground transition-colors duration-150"
+                class="text-gray-400 transition-colors duration-150 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
                 :aria-label="showValue ? 'Hide value' : 'Show value'"
             >
                 <x-ri-eye-line x-show="!showValue" class="size-4" />
                 <x-ri-eye-off-line x-show="showValue" x-cloak class="size-4" />
             </button>
         @else
-            <span class="truncate flex-1 font-mono">{{ $value }}</span>
+            <span class="flex-1 truncate font-mono text-gray-700 dark:text-gray-300">{{ $value }}</span>
         @endif
         <button 
             @click="copyToClipboard()" 
             type="button"
-            class="text-muted-foreground hover:text-foreground transition-colors duration-150 relative inline-flex items-center justify-center size-4"
+            class="relative inline-flex size-5 items-center justify-center text-gray-400 transition-colors duration-150 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
             aria-label="Copy to clipboard"
         >
-            <x-ri-check-fill x-show="copied" x-transition x-cloak class="absolute size-4 text-success" />
+            <x-ri-check-fill x-show="copied" x-transition x-cloak class="absolute size-4 text-success-500" />
             <x-ri-file-copy-line x-show="!copied" x-transition class="absolute size-4" />
         </button>
     </div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/dropdown-divider.blade.php b/extensions/Servers/Proxmox/views/components/ui/dropdown-divider.blade.php
index 37468ba75..cf68742b5 100644
--- a/extensions/Servers/Proxmox/views/components/ui/dropdown-divider.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/dropdown-divider.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Dropdown Divider Component - shadcn-style
+    Dropdown Divider Component - TailAdmin style
 --}}
 
-<div class="-mx-1 my-1 h-px bg-border"></div>
+<div class="-mx-2 my-1.5 h-px bg-gray-200 dark:bg-gray-800"></div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/dropdown-item.blade.php b/extensions/Servers/Proxmox/views/components/ui/dropdown-item.blade.php
index 0d90fb4b3..4347db074 100644
--- a/extensions/Servers/Proxmox/views/components/ui/dropdown-item.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/dropdown-item.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Dropdown Item Component - shadcn-style
+    Dropdown Item Component - TailAdmin style
 --}}
 
 @props([
@@ -13,9 +13,9 @@
     $tag = $href ? 'a' : 'button';
     
     $variantClasses = [
-        'default' => 'text-foreground hover:bg-accent hover:text-accent-foreground',
-        'danger' => 'text-danger focus:bg-danger/10 focus:text-danger',
-        'success' => 'text-success focus:bg-success/10 focus:text-success',
+        'default' => 'text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white',
+        'danger' => 'text-error-600 hover:bg-error-50 dark:text-error-400 dark:hover:bg-error-500/10',
+        'success' => 'text-success-600 hover:bg-success-50 dark:text-success-400 dark:hover:bg-success-500/10',
     ];
     
     $variantClass = $variantClasses[$variant] ?? $variantClasses['default'];
@@ -26,13 +26,13 @@
     @if($tag === 'button') type="button" @endif
     @if($disabled) disabled @endif
     {{ $attributes->class([
-        'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors duration-100 w-full',
+        'relative flex w-full cursor-pointer select-none items-center gap-2.5 rounded-lg px-3 py-2 text-theme-sm outline-none transition-colors duration-150',
         $variantClass,
         'pointer-events-none opacity-50' => $disabled,
     ]) }}
 >
     @if($icon)
-        <x-dynamic-component :component="$icon" class="size-4" />
+        <x-dynamic-component :component="$icon" class="size-4.5" />
     @endif
     <span class="flex-1 text-left">{{ $slot }}</span>
 </{{ $tag }}>
diff --git a/extensions/Servers/Proxmox/views/components/ui/editable-field.blade.php b/extensions/Servers/Proxmox/views/components/ui/editable-field.blade.php
index 37fa54bc8..ac5c20212 100644
--- a/extensions/Servers/Proxmox/views/components/ui/editable-field.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/editable-field.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Editable Field Component - shadcn-inspired
+    Editable Field Component - TailAdmin style
     A field with display value and edit button that opens a modal
     
     Usage:
@@ -32,14 +32,14 @@
 ])
 
 <div class="space-y-2" x-data="{ showEditModal: @entangle($attributes->wire('model')->value() ? 'isEditing' . ucfirst($label) : 'editing') }">
-    <label class="text-sm font-medium">{{ $label }}</label>
-    <div class="flex items-center gap-2 rounded-lg border bg-muted/50 px-3 py-2 text-sm">
-        <span class="truncate flex-1">{{ $value ?? 'Not set' }}</span>
+    <label class="text-theme-sm font-medium text-gray-700 dark:text-gray-300">{{ $label }}</label>
+    <div class="flex items-center gap-2.5 rounded-lg border border-gray-200 bg-gray-50 px-4 py-2.5 text-theme-sm dark:border-gray-700 dark:bg-gray-800">
+        <span class="flex-1 truncate text-gray-700 dark:text-gray-300">{{ $value ?? 'Not set' }}</span>
         @if($editClick)
             <button 
                 wire:click="{{ $editClick }}" 
                 type="button"
-                class="text-muted-foreground hover:text-foreground transition-colors duration-150"
+                class="text-gray-400 transition-colors duration-150 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
                 aria-label="Edit {{ $label }}"
             >
                 <x-ri-edit-line class="size-4" />
@@ -52,15 +52,15 @@
         <div 
             x-cloak 
             x-show="showEditModal" 
-            x-transition:enter="transition ease-out duration-150"
+            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-100"
+            x-transition:leave="transition ease-in duration-150"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             @click="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
             @keydown.escape.window="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
-            class="fixed inset-0 z-50 bg-black/50"
+            class="fixed inset-0 z-99999 bg-gray-900/50 backdrop-blur-sm dark:bg-gray-900/80"
             style="display: none;"
         ></div>
         
@@ -68,55 +68,55 @@
         <div 
             x-cloak 
             x-show="showEditModal" 
-            x-transition:enter="transition ease-out duration-150"
+            x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 scale-95"
             x-transition:enter-end="opacity-100 scale-100"
-            x-transition:leave="transition ease-in duration-100"
+            x-transition:leave="transition ease-in duration-150"
             x-transition:leave-start="opacity-100 scale-100"
             x-transition:leave-end="opacity-0 scale-95"
             @click.away="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
-            class="fixed inset-0 z-50 flex items-center justify-center p-4"
+            class="fixed inset-0 z-99999 flex items-center justify-center p-4"
             style="display: none;"
         >
-            <div class="relative rounded-xl border bg-card shadow-lg w-full max-w-xl p-6 space-y-4">
+            <div class="relative w-full max-w-xl space-y-5 rounded-2xl border border-gray-200 bg-white p-6 shadow-theme-lg dark:border-gray-800 dark:bg-gray-900">
                 <div class="flex items-center justify-between">
-                    <h4 class="text-base font-semibold">Edit {{ $label }}</h4>
+                    <h4 class="text-lg font-semibold text-gray-800 dark:text-white/90">Edit {{ $label }}</h4>
                     <button 
                         type="button"
-                        class="p-1.5 rounded-lg hover:bg-muted transition-colors duration-150"
+                        class="flex size-9 items-center justify-center rounded-lg text-gray-500 transition-colors duration-150 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300"
                         @click="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
                         aria-label="Close"
                     >
-                        <x-ri-close-line class="size-4 text-muted-foreground" />
+                        <x-ri-close-line class="size-5" />
                     </button>
                 </div>
                 
-                <div class="space-y-3">
+                <div class="space-y-4">
                     <div>
-                        <label class="text-sm font-medium text-muted-foreground">{{ $label }}</label>
+                        <label class="text-theme-sm font-medium text-gray-500 dark:text-gray-400">{{ $label }}</label>
                         <input 
                             type="text"
                             {{ $attributes->whereStartsWith('wire:model') }}
-                            class="w-full mt-1.5 px-3 py-2 rounded-lg border bg-background text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+                            class="mt-2 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 text-theme-sm shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-none focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-gray-500 dark:focus:border-brand-600"
                             placeholder="{{ $placeholder ?? 'Enter ' . strtolower($label) }}"
                         />
                     </div>
                     
                     @if($error)
-                        <div class="text-sm text-danger">{{ $error }}</div>
+                        <div class="text-theme-sm text-error-500">{{ $error }}</div>
                     @endif
                     
                     @if(isset($hint))
-                        <div class="text-xs text-muted-foreground">{{ $hint }}</div>
+                        <div class="text-theme-xs text-gray-500 dark:text-gray-400">{{ $hint }}</div>
                     @endif
                 </div>
                 
-                <div class="flex justify-end gap-2 pt-2">
+                <div class="flex justify-end gap-3 border-t border-gray-200 pt-4 dark:border-gray-800">
                     @if($cancelClick)
                         <button 
                             type="button" 
                             @click="showEditModal = false; $wire.{{ $cancelClick }}()"
-                            class="px-4 py-2 text-sm font-medium rounded-lg border bg-background hover:bg-muted transition-colors duration-150"
+                            class="rounded-lg bg-white px-4 py-2.5 text-theme-sm font-medium text-gray-700 shadow-theme-xs ring-1 ring-gray-300 transition-colors duration-150 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-700 dark:hover:bg-gray-700"
                         >
                             Cancel
                         </button>
@@ -125,7 +125,7 @@
                         <button 
                             type="button" 
                             wire:click="{{ $saveClick }}"
-                            class="px-4 py-2 text-sm font-medium text-primary-foreground bg-primary hover:bg-primary/90 rounded-lg transition-colors duration-150"
+                            class="rounded-lg bg-brand-500 px-4 py-2.5 text-theme-sm font-medium text-white shadow-theme-xs transition-colors duration-150 hover:bg-brand-600"
                         >
                             Save
                         </button>
@@ -134,7 +134,7 @@
                         <button 
                             type="button" 
                             wire:click="{{ $applyClick }}"
-                            class="px-4 py-2 text-sm font-medium text-primary-foreground bg-primary hover:bg-primary/90 rounded-lg transition-colors duration-150"
+                            class="rounded-lg bg-brand-500 px-4 py-2.5 text-theme-sm font-medium text-white shadow-theme-xs transition-colors duration-150 hover:bg-brand-600"
                         >
                             {{ $applyLabel }}
                         </button>
diff --git a/extensions/Servers/Proxmox/views/components/ui/empty-state.blade.php b/extensions/Servers/Proxmox/views/components/ui/empty-state.blade.php
index 054d43b41..1c755c159 100644
--- a/extensions/Servers/Proxmox/views/components/ui/empty-state.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/empty-state.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Empty State Component - shadcn-style
+    Empty State Component - TailAdmin style
     
     Usage:
     <x-proxmox::ui.empty-state title="No servers found" />
@@ -23,21 +23,21 @@
 <div 
     {{ $attributes->class([
         'flex flex-col items-center justify-center text-center',
-        'py-12 px-6' => !$compact,
-        'py-6 px-4' => $compact,
+        'px-6 py-12' => !$compact,
+        'px-4 py-6' => $compact,
     ]) }}
 >
     @if($icon)
         <div @class([
-            'flex items-center justify-center rounded-full bg-muted',
-            'mb-4 size-14' => !$compact,
-            'mb-3 size-10' => $compact,
+            'flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800',
+            'mb-5 size-16' => !$compact,
+            'mb-3 size-11' => $compact,
         ])>
             <x-dynamic-component 
                 :component="$icon" 
                 @class([
-                    $iconClass ?? 'text-muted-foreground',
-                    'size-7' => !$compact,
+                    $iconClass ?? 'text-gray-400 dark:text-gray-500',
+                    'size-8' => !$compact,
                     'size-5' => $compact,
                 ])
             />
@@ -45,25 +45,25 @@
     @endif
     
     <h3 @class([
-        'font-semibold tracking-tight',
-        'text-base' => !$compact,
-        'text-sm' => $compact,
+        'font-semibold text-gray-800 dark:text-white/90',
+        'text-lg' => !$compact,
+        'text-theme-sm' => $compact,
     ])>
         {{ $title }}
     </h3>
     
     @if($description)
         <p @class([
-            'text-muted-foreground max-w-sm',
-            'mt-1.5 text-sm' => !$compact,
-            'mt-1 text-xs' => $compact,
+            'max-w-sm text-gray-500 dark:text-gray-400',
+            'mt-2 text-theme-sm' => !$compact,
+            'mt-1 text-theme-xs' => $compact,
         ])>
             {{ $description }}
         </p>
     @endif
     
     @if($slot->isNotEmpty())
-        <div @class(['mt-4' => !$compact, 'mt-3' => $compact])>
+        <div @class(['mt-5' => !$compact, 'mt-3' => $compact])>
             {{ $slot }}
         </div>
     @endif
diff --git a/extensions/Servers/Proxmox/views/components/ui/help-modal.blade.php b/extensions/Servers/Proxmox/views/components/ui/help-modal.blade.php
index 07f3c0983..37676fc3b 100644
--- a/extensions/Servers/Proxmox/views/components/ui/help-modal.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/help-modal.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Help Modal Trigger Component - shadcn-style
+    Help Modal Trigger Component - TailAdmin styled
     Question mark button that opens an info modal
     
     Usage:
@@ -19,7 +19,7 @@
 ])
 
 <div class="relative" x-data="{ open: false }" x-cloak {{ $attributes }}>
-    <button type="button" @click="open = true" class="text-muted-foreground hover:text-foreground transition-colors duration-150">
+    <button type="button" @click="open = true" class="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors duration-150">
         <x-ri-question-line class="size-4" />
     </button>
     
@@ -34,7 +34,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-50 bg-gray-900/50 backdrop-blur-sm dark:bg-gray-950/70"
         style="display: none;"
     ></div>
     
@@ -51,28 +51,28 @@
         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 rounded-xl border bg-background shadow-lg p-6">
-            <button @click="open = false" class="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity duration-150 hover:opacity-100">
+        <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-2xl border border-gray-200 bg-white shadow-theme-lg dark:border-gray-800 dark:bg-gray-900 p-6">
+            <button @click="open = false" class="absolute top-4 right-4 rounded-lg p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-500 dark:hover:text-gray-300 dark:hover:bg-gray-800 transition-colors duration-150">
                 <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 size-9 rounded-lg bg-primary/10">
-                    <x-dynamic-component :component="$icon" class="size-4 text-primary" />
+                <div class="flex items-center justify-center size-9 rounded-xl bg-brand-500/10 dark:bg-brand-500/20">
+                    <x-dynamic-component :component="$icon" class="size-4 text-brand-500" />
                 </div>
-                <h3 class="text-lg font-semibold leading-none tracking-tight">
+                <h3 class="text-lg font-semibold leading-none tracking-tight text-gray-800 dark:text-white/90">
                     {{ $title }}
                 </h3>
             </div>
             
             @if(isset($description))
-                <div class="text-sm text-muted-foreground mb-4">
+                <div class="text-theme-sm text-gray-500 dark:text-gray-400 mb-4">
                     {{ $description }}
                 </div>
             @endif
             
             @if(isset($details))
-                <div class="pt-4 mt-4 border-t space-y-2 text-sm text-muted-foreground">
+                <div class="pt-4 mt-4 border-t border-gray-200 dark:border-gray-800 space-y-2 text-theme-sm text-gray-500 dark:text-gray-400">
                     {{ $details }}
                 </div>
             @endif
diff --git a/extensions/Servers/Proxmox/views/components/ui/icon-picker.blade.php b/extensions/Servers/Proxmox/views/components/ui/icon-picker.blade.php
index d5ad9e73a..35b850b21 100644
--- a/extensions/Servers/Proxmox/views/components/ui/icon-picker.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/icon-picker.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Icon Picker Component - shadcn-inspired
+    Icon Picker Component - TailAdmin styled
     Modal-based icon picker with search and categories
     
     Usage:
@@ -40,15 +40,15 @@
     <button
         type="button"
         @click="open = true"
-        class="flex items-center gap-2 px-3 py-2 rounded-lg border bg-background hover:bg-muted transition-colors duration-150"
+        class="flex items-center gap-2 px-3 py-2.5 rounded-lg border border-gray-300 bg-white hover:bg-gray-50 shadow-theme-xs dark:border-gray-700 dark:bg-gray-900 dark:hover:bg-gray-800 transition-colors duration-150"
     >
         <template x-if="selected">
-            <x-dynamic-component x-bind:component="selected" class="size-5 text-primary" />
+            <x-dynamic-component x-bind:component="selected" class="size-5 text-brand-500" />
         </template>
         <template x-if="!selected">
-            <x-ri-image-add-line class="size-5 text-muted-foreground" />
+            <x-ri-image-add-line class="size-5 text-gray-400 dark:text-gray-500" />
         </template>
-        <span class="text-sm">Select Icon</span>
+        <span class="text-theme-sm text-gray-700 dark:text-gray-300">Select Icon</span>
     </button>
 
     <!-- Modal -->
@@ -69,7 +69,7 @@
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0"
                 @click="open = false"
-                class="fixed inset-0 bg-black/50"
+                class="fixed inset-0 bg-gray-900/50 dark:bg-gray-950/70"
             ></div>
 
             <!-- Modal Content -->
@@ -81,44 +81,44 @@
                 x-transition:leave="ease-in duration-100"
                 x-transition:leave-start="opacity-100 scale-100"
                 x-transition:leave-end="opacity-0 scale-95"
-                class="relative rounded-xl border bg-card shadow-lg w-full max-w-2xl max-h-[80vh] overflow-hidden"
+                class="relative rounded-2xl border border-gray-200 bg-white shadow-theme-lg dark:border-gray-800 dark:bg-gray-900 w-full max-w-2xl max-h-[80vh] overflow-hidden"
             >
                 <!-- Header -->
-                <div class="p-4 border-b">
+                <div class="p-4 border-b border-gray-200 dark:border-gray-800">
                     <div class="flex items-center justify-between mb-3">
-                        <h3 class="text-lg font-semibold">Select Icon</h3>
-                        <button @click="open = false" class="p-1.5 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors duration-150">
+                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Select Icon</h3>
+                        <button @click="open = false" class="p-1.5 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-500 dark:hover:text-gray-300 dark:hover:bg-gray-800 transition-colors duration-150">
                             <x-ri-close-line class="size-5" />
                         </button>
                     </div>
                     
                     <!-- Search -->
                     <div class="relative">
-                        <x-ri-search-line class="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+                        <x-ri-search-line class="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-gray-400 dark:text-gray-500" />
                         <input
                             type="text"
                             x-model="search"
                             placeholder="Search icons..."
-                            class="w-full pl-10 pr-4 py-2 rounded-lg border bg-background text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+                            class="w-full pl-10 pr-4 py-2.5 rounded-lg border border-gray-300 bg-white text-theme-sm text-gray-800 placeholder:text-gray-400 shadow-theme-xs focus:outline-none focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-gray-500"
                         />
                     </div>
                 </div>
 
                 <!-- Categories -->
                 @if(count($categories) > 0)
-                    <div class="flex gap-2 p-4 border-b overflow-x-auto">
+                    <div class="flex gap-2 p-4 border-b border-gray-200 dark:border-gray-800 overflow-x-auto">
                         <button
                             @click="activeCategory = 'all'"
-                            :class="activeCategory === 'all' ? 'bg-primary text-primary-foreground' : 'bg-muted hover:bg-muted/80'"
-                            class="px-3 py-1 rounded-full text-xs font-medium transition-colors duration-150 whitespace-nowrap"
+                            :class="activeCategory === 'all' ? 'bg-brand-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'"
+                            class="px-3 py-1.5 rounded-full text-theme-xs font-medium transition-colors duration-150 whitespace-nowrap"
                         >
                             All
                         </button>
                         @foreach($categories as $category)
                             <button
                                 @click="activeCategory = '{{ $category['id'] }}'"
-                                :class="activeCategory === '{{ $category['id'] }}' ? 'bg-primary text-primary-foreground' : 'bg-muted hover:bg-muted/80'"
-                                class="px-3 py-1 rounded-full text-xs font-medium transition-colors duration-150 whitespace-nowrap"
+                                :class="activeCategory === '{{ $category['id'] }}' ? 'bg-brand-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'"
+                                class="px-3 py-1.5 rounded-full text-theme-xs font-medium transition-colors duration-150 whitespace-nowrap"
                             >
                                 {{ $category['name'] }}
                             </button>
@@ -132,7 +132,7 @@
                         <template x-for="icon in filteredIcons" :key="icon.name">
                             <button
                                 @click="selected = icon.component; open = false;"
-                                :class="selected === icon.component ? 'ring-2 ring-primary bg-primary/10' : 'hover:bg-muted'"
+                                :class="selected === icon.component ? 'ring-2 ring-brand-500 bg-brand-500/10 dark:bg-brand-500/20' : 'hover:bg-gray-100 dark:hover:bg-gray-800'"
                                 class="flex items-center justify-center p-3 rounded-lg transition-colors duration-150"
                                 :title="icon.name"
                             >
@@ -143,22 +143,22 @@
                     
                     <!-- Empty State -->
                     <div x-show="filteredIcons.length === 0" class="py-8 text-center">
-                        <x-ri-search-line class="size-12 mx-auto text-muted-foreground/30 mb-3" />
-                        <p class="text-sm text-muted-foreground">No icons found matching your search.</p>
+                        <x-ri-search-line class="size-12 mx-auto text-gray-300 dark:text-gray-700 mb-3" />
+                        <p class="text-theme-sm text-gray-500 dark:text-gray-400">No icons found matching your search.</p>
                     </div>
                 </div>
 
                 <!-- Footer -->
-                <div class="p-4 border-t flex items-center justify-between">
+                <div class="p-4 border-t border-gray-200 dark:border-gray-800 flex items-center justify-between">
                     <button
                         @click="selected = null"
-                        class="px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors duration-150"
+                        class="px-3 py-1.5 text-theme-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-150"
                     >
                         Clear Selection
                     </button>
                     <button
                         @click="open = false"
-                        class="px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm font-medium hover:bg-primary/90 transition-colors duration-150"
+                        class="px-4 py-2.5 bg-brand-500 text-white rounded-lg text-theme-sm font-medium shadow-theme-xs hover:bg-brand-600 transition-colors duration-150"
                     >
                         Done
                     </button>
diff --git a/extensions/Servers/Proxmox/views/components/ui/index.blade.php b/extensions/Servers/Proxmox/views/components/ui/index.blade.php
index 0c6ed1de3..8555ef901 100644
--- a/extensions/Servers/Proxmox/views/components/ui/index.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/index.blade.php
@@ -3,25 +3,25 @@
     ===================================
     
     This file documents all available UI components for the Proxmox server views.
-    All components follow shadcn-inspired styling with TailServer theme CSS variables.
+    All components styled using TailAdmin CSS Framework patterns from:
+    https://github.com/TailAdmin/tailadmin-free-tailwind-dashboard-template
     
-    Design Patterns:
-    - Card: rounded-xl border bg-card shadow-sm
-    - Typography: text-2xl font-bold (values), text-sm font-medium (labels), text-xs text-muted-foreground (descriptions)
+    TailAdmin Design Patterns:
+    - Card: rounded-2xl border border-gray-200 bg-white shadow-theme-sm dark:border-gray-800 dark:bg-white/[0.03]
+    - Typography: text-theme-sm (14px), text-theme-xs (12px)
+    - Text Colors: text-gray-800 dark:text-white/90 (headings), text-gray-500 dark:text-gray-400 (muted)
     - Layout: flex/grid with gap-4/gap-6 spacing
-    - Transitions: duration-150 for all interactions (speed-optimized)
-    - Borders: border (uses CSS variable), rounded-lg/rounded-xl
-    - Backgrounds: bg-card, bg-muted, bg-muted/50 (no gradient overlays)
+    - Transitions: duration-150 for all interactions
+    - Shadows: shadow-theme-xs, shadow-theme-sm, shadow-theme-md, shadow-theme-lg
+    - Borders: rounded-2xl for cards, rounded-lg for inputs/buttons
     
-    CSS Variables Used:
-    - --color-background: Page background color
-    - --color-neutral: Neutral/gray tones
-    - --color-primary: Primary accent color (purple)
-    - --color-base: Text color
-    - --color-success: Success/positive states
-    - --color-warning: Warning states
-    - --color-danger: Error/danger states
-    - --color-info: Informational states
+    TailAdmin Color System:
+    - brand-500: #465fff (primary accent)
+    - gray-50 through gray-950 (neutral tones)
+    - success-500: Success/positive states
+    - warning-500: Warning states  
+    - error-500: Error/danger states
+    - blue-light-500: Informational states
     
     === LAYOUT COMPONENTS ===
     
diff --git a/extensions/Servers/Proxmox/views/components/ui/info-row.blade.php b/extensions/Servers/Proxmox/views/components/ui/info-row.blade.php
index 25ef9df38..718ba345e 100644
--- a/extensions/Servers/Proxmox/views/components/ui/info-row.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/info-row.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Info Row / Key-Value Pair Component - shadcn-style
+    Info Row / Key-Value Pair Component - TailAdmin style
     
     Usage:
     <x-proxmox::ui.info-row label="IP Address" value="192.168.1.1" />
@@ -16,17 +16,18 @@
     'muted' => false,
 ])
 
-<div {{ $attributes->class(['flex items-center justify-between py-2 border-b last:border-b-0']) }}>
-    <div class="flex items-center gap-2 text-sm text-muted-foreground">
+<div {{ $attributes->class(['flex items-center justify-between border-b border-gray-200 py-3 last:border-b-0 dark:border-gray-800']) }}>
+    <div class="flex items-center gap-2.5 text-theme-sm text-gray-500 dark:text-gray-400">
         @if($icon)
             <x-dynamic-component :component="$icon" class="size-4" />
         @endif
         <span>{{ $label }}</span>
     </div>
-    <div class="flex items-center gap-2">
+    <div class="flex items-center gap-2.5">
         <span @class([
-            'text-sm font-medium',
-            'text-muted-foreground' => $muted,
+            'text-theme-sm font-medium',
+            'text-gray-500 dark:text-gray-400' => $muted,
+            'text-gray-800 dark:text-white/90' => !$muted,
         ])>
             {{ $value ?? $slot }}
         </span>
@@ -39,11 +40,11 @@
                     copied = true;
                     setTimeout(() => copied = false, 2000);
                 "
-                class="rounded-sm p-1 text-muted-foreground hover:text-foreground transition-colors duration-150"
+                class="rounded-lg p-1 text-gray-400 transition-colors duration-150 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
                 title="Copy to clipboard"
             >
                 <x-ri-file-copy-line x-show="!copied" class="size-4" />
-                <x-ri-check-line x-show="copied" x-cloak class="size-4 text-success" />
+                <x-ri-check-line x-show="copied" x-cloak class="size-4 text-success-500" />
             </button>
         @endif
     </div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/network-address-card.blade.php b/extensions/Servers/Proxmox/views/components/ui/network-address-card.blade.php
index 37ba56963..f277fef97 100644
--- a/extensions/Servers/Proxmox/views/components/ui/network-address-card.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/network-address-card.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Network Address Card Component - shadcn-inspired
+    Network Address Card Component - TailAdmin style
     For displaying IP address information with gateway, netmask, and tools
     
     Usage:
@@ -24,53 +24,53 @@
     'fromGuestAgent' => false,
 ])
 
-<div class="rounded-xl border bg-card p-6 shadow-sm mb-4">
+<div class="mb-4 rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
     {{-- Header --}}
-    <div class="flex items-center justify-between mb-4">
-        <h3 class="text-base font-semibold">{{ strtoupper($type) }} Address</h3>
+    <div class="mb-5 flex items-center justify-between">
+        <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">{{ strtoupper($type) }} Address</h3>
         <x-proxmox::ui.badge variant="default">
             {{ $type === 'ipv6' ? 'IPv6' : 'IPv4' }}
         </x-proxmox::ui.badge>
     </div>
 
     {{-- Address Grid --}}
-    <div class="grid md:grid-cols-3 gap-4">
+    <div class="grid gap-5 md:grid-cols-3">
         {{-- IP Address --}}
-        <div class="space-y-1.5">
-            <span class="text-sm font-medium text-muted-foreground">IP Address</span>
-            <div class="flex items-center gap-2">
-                <span class="font-semibold font-mono">{{ $ip }}</span>
+        <div class="space-y-2">
+            <span class="text-theme-sm font-medium text-gray-500 dark:text-gray-400">IP Address</span>
+            <div class="flex items-center gap-2.5">
+                <span class="font-mono font-semibold text-gray-800 dark:text-white/90">{{ $ip }}</span>
                 <x-proxmox::ui.copy-button :value="$ip" />
             </div>
             @if($cidr)
-                <p class="text-xs text-muted-foreground">CIDR: {{ $ip }}{{ $cidr }}</p>
+                <p class="text-theme-xs text-gray-500 dark:text-gray-400">CIDR: {{ $ip }}{{ $cidr }}</p>
             @endif
         </div>
 
         {{-- Gateway --}}
-        <div class="space-y-1.5">
-            <span class="text-sm font-medium text-muted-foreground">Gateway</span>
-            <div class="flex items-center gap-2">
-                <span class="font-semibold font-mono">{{ $gateway ?? 'N/A' }}</span>
+        <div class="space-y-2">
+            <span class="text-theme-sm font-medium text-gray-500 dark:text-gray-400">Gateway</span>
+            <div class="flex items-center gap-2.5">
+                <span class="font-mono font-semibold text-gray-800 dark:text-white/90">{{ $gateway ?? 'N/A' }}</span>
                 @if($gateway)
                     <x-proxmox::ui.copy-button :value="$gateway" />
                 @endif
             </div>
-            <p class="text-xs text-muted-foreground">
+            <p class="text-theme-xs text-gray-500 dark:text-gray-400">
                 {{ $fromGuestAgent && !$gateway ? 'Not configured in database' : 'Default route' }}
             </p>
         </div>
 
         {{-- Netmask --}}
-        <div class="space-y-1.5">
-            <span class="text-sm font-medium text-muted-foreground">Subnet Mask</span>
-            <div class="flex items-center gap-2">
-                <span class="font-semibold font-mono">{{ $netmask ?? 'N/A' }}</span>
+        <div class="space-y-2">
+            <span class="text-theme-sm font-medium text-gray-500 dark:text-gray-400">Subnet Mask</span>
+            <div class="flex items-center gap-2.5">
+                <span class="font-mono font-semibold text-gray-800 dark:text-white/90">{{ $netmask ?? 'N/A' }}</span>
                 @if($netmask)
                     <x-proxmox::ui.copy-button :value="$netmask" />
                 @endif
             </div>
-            <p class="text-xs text-muted-foreground">
+            <p class="text-theme-xs text-gray-500 dark:text-gray-400">
                 {{ $fromGuestAgent && !$netmask ? 'Not configured' : 'Network range' }}
             </p>
         </div>
@@ -78,7 +78,7 @@
 
     {{-- Network Tools (for public IPs) --}}
     @if($isPublic)
-        <div class="flex gap-2 justify-end mt-4 pt-4 border-t">
+        <div class="mt-5 flex justify-end gap-3 border-t border-gray-200 pt-5 dark:border-gray-800">
             @if($isIpv6)
                 <x-proxmox::ui.button 
                     variant="outline"
@@ -130,7 +130,7 @@
     {{-- Guest Agent Technical Details --}}
     @if($guestInterface)
         <div 
-            class="border-t pt-4 mt-4"
+            class="mt-5 border-t border-gray-200 pt-5 dark:border-gray-800"
             x-data="{ isAdvancedView: localStorage.getItem('proxmox-view-mode') === 'advanced' }"
             x-init="
                 isAdvancedView = localStorage.getItem('proxmox-view-mode') === 'advanced';
@@ -139,33 +139,33 @@
                 });
             "
             x-show="isAdvancedView"
-            x-transition:enter="transition ease-out duration-150"
+            x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
         >
-            <h4 class="text-sm font-medium text-muted-foreground mb-3">Technical Details</h4>
-            <div class="grid md:grid-cols-2 gap-4">
+            <h4 class="mb-4 text-theme-sm font-medium text-gray-500 dark:text-gray-400">Technical Details</h4>
+            <div class="grid gap-4 md:grid-cols-2">
                 @if(isset($guestInterface['hardware-address']))
-                    <div class="space-y-1">
-                        <span class="text-xs font-medium text-muted-foreground">MAC Address</span>
-                        <div class="flex items-center gap-2">
-                            <span class="text-sm font-mono">{{ $guestInterface['hardware-address'] }}</span>
+                    <div class="space-y-1.5">
+                        <span class="text-theme-xs font-medium text-gray-500 dark:text-gray-400">MAC Address</span>
+                        <div class="flex items-center gap-2.5">
+                            <span class="font-mono text-theme-sm text-gray-700 dark:text-gray-300">{{ $guestInterface['hardware-address'] }}</span>
                             <x-proxmox::ui.copy-button :value="$guestInterface['hardware-address']" />
                         </div>
                     </div>
                 @endif
 
                 @if(isset($guestInterface['name']))
-                    <div class="space-y-1">
-                        <span class="text-xs font-medium text-muted-foreground">Interface</span>
-                        <span class="text-sm font-mono block">{{ $guestInterface['name'] }}</span>
+                    <div class="space-y-1.5">
+                        <span class="text-theme-xs font-medium text-gray-500 dark:text-gray-400">Interface</span>
+                        <span class="block font-mono text-theme-sm text-gray-700 dark:text-gray-300">{{ $guestInterface['name'] }}</span>
                     </div>
                 @endif
 
                 @if(isset($guestInterface['statistics']))
-                    <div class="space-y-1 md:col-span-2">
-                        <span class="text-xs font-medium text-muted-foreground">Statistics</span>
-                        <div class="flex flex-wrap gap-4 text-sm text-muted-foreground">
+                    <div class="space-y-1.5 md:col-span-2">
+                        <span class="text-theme-xs font-medium text-gray-500 dark:text-gray-400">Statistics</span>
+                        <div class="flex flex-wrap gap-4 text-theme-sm text-gray-600 dark:text-gray-400">
                             @if(isset($guestInterface['statistics']['rx-bytes']))
                                 <span>RX: {{ number_format($guestInterface['statistics']['rx-bytes']) }} bytes</span>
                             @endif
diff --git a/extensions/Servers/Proxmox/views/components/ui/notice-banner.blade.php b/extensions/Servers/Proxmox/views/components/ui/notice-banner.blade.php
index 486560626..572cad2c1 100644
--- a/extensions/Servers/Proxmox/views/components/ui/notice-banner.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/notice-banner.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Info Notice / Alert Banner Component - shadcn-style
+    Info Notice / Alert Banner Component - TailAdmin style
     Collapsible notice banners for important information
     
     Usage:
@@ -25,28 +25,28 @@
 @php
     $variants = [
         'info' => [
-            'bg' => 'bg-info/10',
-            'border' => 'border-info/20',
+            'bg' => 'bg-blue-light-50 dark:bg-blue-light-500/10',
+            'border' => 'border-blue-light-200 dark:border-blue-light-800',
             'icon' => $icon ?? 'ri-information-line',
-            'iconColor' => 'text-info',
+            'iconColor' => 'text-blue-light-500',
         ],
         'warning' => [
-            'bg' => 'bg-warning/10',
-            'border' => 'border-warning/20',
+            'bg' => 'bg-warning-50 dark:bg-warning-500/10',
+            'border' => 'border-warning-200 dark:border-warning-800',
             'icon' => $icon ?? 'ri-alert-line',
-            'iconColor' => 'text-warning',
+            'iconColor' => 'text-warning-500',
         ],
         'danger' => [
-            'bg' => 'bg-danger/10',
-            'border' => 'border-danger/20',
+            'bg' => 'bg-error-50 dark:bg-error-500/10',
+            'border' => 'border-error-200 dark:border-error-800',
             'icon' => $icon ?? 'ri-error-warning-line',
-            'iconColor' => 'text-danger',
+            'iconColor' => 'text-error-500',
         ],
         'success' => [
-            'bg' => 'bg-success/10',
-            'border' => 'border-success/20',
+            'bg' => 'bg-success-50 dark:bg-success-500/10',
+            'border' => 'border-success-200 dark:border-success-800',
             'icon' => $icon ?? 'ri-checkbox-circle-line',
-            'iconColor' => 'text-success',
+            'iconColor' => 'text-success-500',
         ],
     ];
     
@@ -73,24 +73,24 @@
         $config['bg'],
         'border',
         $config['border'],
-        'rounded-lg p-4',
+        'rounded-xl p-4',
     ]) }}
 >
-    <div class="flex items-start gap-3">
-        <x-dynamic-component :component="$config['icon']" class="size-4 {{ $config['iconColor'] }} flex-shrink-0 mt-0.5" />
-        <div class="flex-1 min-w-0">
+    <div class="flex items-start gap-3.5">
+        <x-dynamic-component :component="$config['icon']" class="mt-0.5 size-5 flex-shrink-0 {{ $config['iconColor'] }}" />
+        <div class="min-w-0 flex-1">
             @if($title)
-                <div class="flex items-center justify-between mb-2">
-                    <h3 class="text-sm font-medium">{{ $title }}</h3>
+                <div class="mb-2 flex items-center justify-between">
+                    <h3 class="text-theme-sm font-medium text-gray-800 dark:text-white/90">{{ $title }}</h3>
                     @if($collapsible)
-                        <button @click="toggle()" type="button" class="text-muted-foreground hover:text-foreground transition-colors duration-150">
-                            <x-ri-arrow-down-s-line x-bind:class="isCollapsed ? 'size-4 transition-transform rotate-180' : 'size-4 transition-transform'" />
+                        <button @click="toggle()" type="button" class="text-gray-400 transition-colors duration-150 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300">
+                            <x-ri-arrow-down-s-line x-bind:class="isCollapsed ? 'size-5 rotate-180 transition-transform' : 'size-5 transition-transform'" />
                         </button>
                     @endif
                 </div>
             @endif
             
-            <div @if($collapsible) x-show="!isCollapsed" x-transition @endif class="text-sm text-muted-foreground">
+            <div @if($collapsible) x-show="!isCollapsed" x-transition @endif class="text-theme-sm text-gray-600 dark:text-gray-400">
                 {{ $slot }}
             </div>
         </div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/progress.blade.php b/extensions/Servers/Proxmox/views/components/ui/progress.blade.php
index 79e7b615f..c2142a6c3 100644
--- a/extensions/Servers/Proxmox/views/components/ui/progress.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/progress.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Progress Bar Component - shadcn-style
+    Progress Bar Component - TailAdmin style
     
     Usage:
     <x-proxmox::ui.progress :value="75" />
@@ -23,12 +23,21 @@
     $percent = $max > 0 ? min(100, ($value / $max) * 100) : 0;
     
     $colorClasses = [
-        'primary' => 'bg-primary',
-        'secondary' => 'bg-secondary',
-        'success' => 'bg-success',
-        'warning' => 'bg-warning',
-        'danger' => 'bg-danger',
-        'info' => 'bg-info',
+        'primary' => 'bg-brand-500',
+        'secondary' => 'bg-gray-500',
+        'success' => 'bg-success-500',
+        'warning' => 'bg-warning-500',
+        'danger' => 'bg-error-500',
+        'info' => 'bg-blue-light-500',
+    ];
+    
+    $bgClasses = [
+        'primary' => 'bg-brand-100 dark:bg-brand-500/20',
+        'secondary' => 'bg-gray-200 dark:bg-gray-700',
+        'success' => 'bg-success-100 dark:bg-success-500/20',
+        'warning' => 'bg-warning-100 dark:bg-warning-500/20',
+        'danger' => 'bg-error-100 dark:bg-error-500/20',
+        'info' => 'bg-blue-light-100 dark:bg-blue-light-500/20',
     ];
     
     $sizeClasses = [
@@ -40,32 +49,36 @@
     ];
     
     $colorClass = $colorClasses[$color] ?? $colorClasses['primary'];
+    $bgClass = $bgClasses[$color] ?? $bgClasses['primary'];
     $sizeClass = $sizeClasses[$size] ?? $sizeClasses['md'];
     
     // Auto-select color based on value if specified
     if ($color === 'auto') {
         if ($percent >= 90) {
             $colorClass = $colorClasses['danger'];
+            $bgClass = $bgClasses['danger'];
         } elseif ($percent >= 70) {
             $colorClass = $colorClasses['warning'];
+            $bgClass = $bgClasses['warning'];
         } else {
             $colorClass = $colorClasses['success'];
+            $bgClass = $bgClasses['success'];
         }
     }
 @endphp
 
 <div {{ $attributes->class(['w-full']) }}>
     @if($showLabel || $label)
-        <div class="flex items-center justify-between text-xs mb-1.5">
-            <span class="text-muted-foreground font-medium">{{ $label ?? 'Usage' }}</span>
-            <span class="font-medium">{{ number_format($percent, 1) }}%</span>
+        <div class="mb-2 flex items-center justify-between text-theme-xs">
+            <span class="font-medium text-gray-700 dark:text-gray-300">{{ $label ?? 'Usage' }}</span>
+            <span class="font-semibold text-gray-800 dark:text-white/90">{{ number_format($percent, 1) }}%</span>
         </div>
     @endif
-    <div class="relative {{ $sizeClass }} w-full overflow-hidden rounded-full bg-primary/20">
+    <div class="relative {{ $sizeClass }} w-full overflow-hidden rounded-full {{ $bgClass }}">
         <div 
             @class([
                 $sizeClass,
-                'flex-1 w-full transition-all duration-300',
+                'w-full flex-1 rounded-full transition-all duration-300',
                 $colorClass => !$gradient,
             ])
             @if($gradient)
diff --git a/extensions/Servers/Proxmox/views/components/ui/resource-gauge.blade.php b/extensions/Servers/Proxmox/views/components/ui/resource-gauge.blade.php
index a1c2f3524..9a933838a 100644
--- a/extensions/Servers/Proxmox/views/components/ui/resource-gauge.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/resource-gauge.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Resource Gauge Component - shadcn-style
+    Resource Gauge Component - TailAdmin style
     Shows a circular or linear gauge for resource usage
     
     Usage:
@@ -34,19 +34,19 @@
     }
     
     $colorClasses = [
-        'primary' => 'text-primary',
-        'success' => 'text-success',
-        'warning' => 'text-warning',
-        'danger' => 'text-danger',
-        'info' => 'text-info',
+        'primary' => 'text-brand-500',
+        'success' => 'text-success-500',
+        'warning' => 'text-warning-500',
+        'danger' => 'text-error-500',
+        'info' => 'text-blue-light-500',
     ];
     
     $bgColorClasses = [
-        'primary' => 'bg-primary',
-        'success' => 'bg-success',
-        'warning' => 'bg-warning',
-        'danger' => 'bg-danger',
-        'info' => 'bg-info',
+        'primary' => 'bg-brand-500',
+        'success' => 'bg-success-500',
+        'warning' => 'bg-warning-500',
+        'danger' => 'bg-error-500',
+        'info' => 'bg-blue-light-500',
     ];
     
     $textColor = $colorClasses[$color] ?? $colorClasses['primary'];
@@ -59,34 +59,34 @@
     };
     
     $badgeClass = match(true) {
-        $percent >= 100 => 'text-danger bg-danger/15',
-        $percent >= 85 => 'text-warning bg-warning/15',
-        default => 'text-success bg-success/15',
+        $percent >= 100 => 'text-error-600 bg-error-50 dark:bg-error-500/15 dark:text-error-400',
+        $percent >= 85 => 'text-warning-600 bg-warning-50 dark:bg-warning-500/15 dark:text-warning-400',
+        default => 'text-success-600 bg-success-50 dark:bg-success-500/15 dark:text-success-400',
     };
 @endphp
 
-<div {{ $attributes->class(['rounded-xl border bg-card p-4 shadow-sm flex flex-col gap-4']) }}>
+<div {{ $attributes->class(['flex flex-col gap-4 rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]']) }}>
     <div class="flex items-start justify-between gap-3">
-        <div class="space-y-0.5">
-            <p class="text-xs font-medium text-muted-foreground">{{ $label }}</p>
-            <p class="text-xl font-bold tracking-tight">
+        <div class="space-y-1">
+            <p class="text-theme-xs font-medium text-gray-500 dark:text-gray-400">{{ $label }}</p>
+            <p class="text-xl font-bold text-gray-800 dark:text-white/90">
                 @if($prefix){{ $prefix }}@endif{{ is_numeric($value) ? number_format($value, 1) : $value }}@if($suffix){{ $suffix }}@endif
             </p>
             @if($sublabel)
-                <p class="text-xs text-muted-foreground">{{ $sublabel }}</p>
+                <p class="text-theme-xs text-gray-500 dark:text-gray-400">{{ $sublabel }}</p>
             @endif
         </div>
-        <span class="text-xs font-medium px-2 py-0.5 rounded-full {{ $badgeClass }}">
+        <span class="rounded-full px-2.5 py-1 text-theme-xs font-medium {{ $badgeClass }}">
             {{ $badgeLabel }}
         </span>
     </div>
     
-    <div class="space-y-1.5">
-        <div class="flex items-center justify-between text-xs">
-            <span class="text-muted-foreground">Usage</span>
-            <span class="font-medium">{{ number_format($percent, 1) }}%</span>
+    <div class="space-y-2">
+        <div class="flex items-center justify-between text-theme-xs">
+            <span class="text-gray-500 dark:text-gray-400">Usage</span>
+            <span class="font-semibold text-gray-800 dark:text-white/90">{{ number_format($percent, 1) }}%</span>
         </div>
-        <div class="h-2 rounded-full bg-primary/20 overflow-hidden">
+        <div class="h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
             <div 
                 class="h-full rounded-full transition-all duration-300"
                 @if($gradient)
diff --git a/extensions/Servers/Proxmox/views/components/ui/section-header.blade.php b/extensions/Servers/Proxmox/views/components/ui/section-header.blade.php
index d1e9f8957..10d9e2a95 100644
--- a/extensions/Servers/Proxmox/views/components/ui/section-header.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/section-header.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Section Header Component - shadcn-style
+    Section Header Component - TailAdmin style
     
     Usage:
     <x-proxmox::ui.section-header title="Section Title" />
@@ -14,7 +14,7 @@
     'title',
     'subtitle' => null,
     'icon' => null,
-    'iconColor' => 'text-primary',
+    'iconColor' => 'text-brand-500',
     'actions' => null,
     'helpText' => null,
     'size' => 'lg',
@@ -24,70 +24,70 @@
     $titleSizes = [
         'sm' => 'text-base font-semibold',
         'md' => 'text-lg font-semibold',
-        'lg' => 'text-xl font-semibold tracking-tight',
-        'xl' => 'text-2xl font-bold tracking-tight',
+        'lg' => 'text-xl font-semibold',
+        'xl' => 'text-2xl font-bold',
     ];
     $titleClass = $titleSizes[$size] ?? $titleSizes['lg'];
 @endphp
 
-<div {{ $attributes->class(['flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between']) }}>
-    <div class="flex items-start gap-3">
+<div {{ $attributes->class(['flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between']) }}>
+    <div class="flex items-start gap-3.5">
         @if($icon)
-            <div class="flex-shrink-0 flex items-center justify-center size-9 rounded-lg bg-primary/10">
-                <x-dynamic-component :component="$icon" class="size-4 {{ $iconColor }}" />
+            <div class="flex size-11 flex-shrink-0 items-center justify-center rounded-xl bg-brand-50 dark:bg-brand-500/10">
+                <x-dynamic-component :component="$icon" class="size-5 {{ $iconColor }} dark:text-brand-400" />
             </div>
         @endif
         <div class="space-y-1">
-            <div class="flex items-center gap-2 min-w-0">
-                <h2 class="{{ $titleClass }}">{{ $title }}</h2>
+            <div class="flex min-w-0 items-center gap-2">
+                <h2 class="{{ $titleClass }} text-gray-800 dark:text-white/90">{{ $title }}</h2>
                 @if($helpText)
                     <div class="relative" x-data="{ open: false }" x-cloak>
                         <button 
                             type="button" 
                             @click="open = true" 
-                            class="text-muted-foreground hover:text-foreground transition-colors duration-150"
+                            class="text-gray-400 transition-colors duration-150 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
                         >
-                            <x-ri-question-line class="size-4" />
+                            <x-ri-question-line class="size-4.5" />
                         </button>
                         {{-- Help Modal --}}
                         <div 
                             x-show="open"
-                            x-transition:enter="transition ease-out duration-150"
+                            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-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"
+                            class="fixed inset-0 z-99999 bg-gray-900/50 backdrop-blur-sm dark:bg-gray-900/80"
                             style="display: none;"
                         ></div>
                         <div 
                             x-show="open"
-                            x-transition:enter="transition ease-out duration-150"
+                            x-transition:enter="transition ease-out duration-200"
                             x-transition:enter-start="opacity-0 scale-95"
                             x-transition:enter-end="opacity-100 scale-100"
-                            x-transition:leave="transition ease-in duration-100"
+                            x-transition:leave="transition ease-in duration-150"
                             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-99999 flex items-center justify-center p-4"
                             style="display: none;"
                         >
-                            <div class="relative w-full max-w-lg max-h-[90vh] overflow-y-auto rounded-lg border bg-background shadow-lg p-6">
-                                <button @click="open = false" class="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity duration-150 hover:opacity-100">
-                                    <x-ri-close-line class="size-4" />
+                            <div class="relative max-h-[90vh] w-full max-w-lg overflow-y-auto rounded-2xl border border-gray-200 bg-white p-6 shadow-theme-lg dark:border-gray-800 dark:bg-gray-900">
+                                <button @click="open = false" class="absolute right-4 top-4 flex size-9 items-center justify-center rounded-lg text-gray-500 transition-colors duration-150 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300">
+                                    <x-ri-close-line class="size-5" />
                                 </button>
-                                <div class="flex items-center gap-3 mb-4 pr-8">
+                                <div class="mb-5 flex items-center gap-3.5 pr-8">
                                     @if($icon)
-                                        <div class="flex items-center justify-center size-9 rounded-lg bg-primary/10">
-                                            <x-dynamic-component :component="$icon" class="size-4 {{ $iconColor }}" />
+                                        <div class="flex size-11 items-center justify-center rounded-xl bg-brand-50 dark:bg-brand-500/10">
+                                            <x-dynamic-component :component="$icon" class="size-5 {{ $iconColor }} dark:text-brand-400" />
                                         </div>
                                     @endif
-                                    <h3 class="text-lg font-semibold leading-none tracking-tight">{{ $title }}</h3>
+                                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">{{ $title }}</h3>
                                 </div>
-                                <div class="text-sm text-muted-foreground">
+                                <div class="text-theme-sm text-gray-500 dark:text-gray-400">
                                     {{ $helpText }}
                                 </div>
                             </div>
@@ -96,13 +96,13 @@
                 @endif
             </div>
             @if($subtitle)
-                <p class="text-sm text-muted-foreground">{{ $subtitle }}</p>
+                <p class="text-theme-sm text-gray-500 dark:text-gray-400">{{ $subtitle }}</p>
             @endif
         </div>
     </div>
     
     @if($actions)
-        <div class="flex items-center gap-2 flex-shrink-0">
+        <div class="flex flex-shrink-0 items-center gap-3">
             {{ $actions }}
         </div>
     @endif
diff --git a/extensions/Servers/Proxmox/views/components/ui/server-status.blade.php b/extensions/Servers/Proxmox/views/components/ui/server-status.blade.php
index 1bfbe7cc2..87f081a71 100644
--- a/extensions/Servers/Proxmox/views/components/ui/server-status.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/server-status.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Server Status Indicator Component - shadcn-style
+    Server Status Indicator Component - TailAdmin style
     
     Usage:
     <x-proxmox::ui.server-status status="running" />
@@ -61,33 +61,33 @@
     $config = $statusConfig[strtolower($status)] ?? $statusConfig['unknown'];
     
     $colorClasses = [
-        'success' => 'text-success',
-        'warning' => 'text-warning',
-        'danger' => 'text-danger',
-        'info' => 'text-info',
-        'muted' => 'text-muted-foreground',
+        'success' => 'text-success-600 dark:text-success-400',
+        'warning' => 'text-warning-600 dark:text-warning-400',
+        'danger' => 'text-error-600 dark:text-error-400',
+        'info' => 'text-blue-light-600 dark:text-blue-light-400',
+        'muted' => 'text-gray-500 dark:text-gray-400',
     ];
     
     $bgClasses = [
-        'success' => 'bg-success/10',
-        'warning' => 'bg-warning/10',
-        'danger' => 'bg-danger/10',
-        'info' => 'bg-info/10',
-        'muted' => 'bg-muted',
+        'success' => 'bg-success-50 dark:bg-success-500/15',
+        'warning' => 'bg-warning-50 dark:bg-warning-500/15',
+        'danger' => 'bg-error-50 dark:bg-error-500/15',
+        'info' => 'bg-blue-light-50 dark:bg-blue-light-500/15',
+        'muted' => 'bg-gray-100 dark:bg-gray-800',
     ];
     
     $dotColorClasses = [
-        'success' => 'bg-success',
-        'warning' => 'bg-warning',
-        'danger' => 'bg-danger',
-        'info' => 'bg-info',
-        'muted' => 'bg-muted-foreground',
+        'success' => 'bg-success-500',
+        'warning' => 'bg-warning-500',
+        'danger' => 'bg-error-500',
+        'info' => 'bg-blue-light-500',
+        'muted' => 'bg-gray-400 dark:bg-gray-500',
     ];
     
     $sizeClasses = [
-        'sm' => 'text-xs px-2 py-1 gap-1.5',
-        'md' => 'text-sm px-2.5 py-1.5 gap-2',
-        'lg' => 'text-base px-3 py-2 gap-2',
+        'sm' => 'text-theme-xs px-2 py-1 gap-1.5',
+        'md' => 'text-theme-sm px-2.5 py-1.5 gap-2',
+        'lg' => 'text-base px-3 py-2 gap-2.5',
     ];
     
     $dotSizes = [
@@ -97,8 +97,8 @@
     ];
     
     $textSizes = [
-        'sm' => 'text-xs',
-        'md' => 'text-sm',
+        'sm' => 'text-theme-xs',
+        'md' => 'text-theme-sm',
         'lg' => 'text-base',
     ];
 @endphp
@@ -108,7 +108,7 @@
     <div {{ $attributes->class(['inline-flex items-center', 'gap-1.5' => $showLabel]) }}>
         <span class="relative flex {{ $dotSizes[$size] ?? $dotSizes['md'] }}">
             @if($config['pulse'])
-                <span class="absolute inline-flex h-full w-full rounded-full {{ $dotColorClasses[$config['color']] ?? $dotColorClasses['muted'] }} opacity-60 animate-ping"></span>
+                <span class="absolute inline-flex h-full w-full animate-ping rounded-full opacity-60 {{ $dotColorClasses[$config['color']] ?? $dotColorClasses['muted'] }}"></span>
             @endif
             <span class="relative inline-flex rounded-full {{ $dotSizes[$size] ?? $dotSizes['md'] }} {{ $dotColorClasses[$config['color']] ?? $dotColorClasses['muted'] }}"></span>
         </span>
@@ -120,7 +120,7 @@
     {{-- Full badge variant --}}
     <div 
         {{ $attributes->class([
-            'inline-flex items-center font-medium rounded-md',
+            'inline-flex items-center font-medium rounded-full',
             $bgClasses[$config['color']] ?? $bgClasses['muted'],
             $colorClasses[$config['color']] ?? $colorClasses['muted'],
             $sizeClasses[$size] ?? $sizeClasses['md'],
@@ -128,9 +128,9 @@
     >
         <span class="relative flex {{ $dotSizes[$size] ?? $dotSizes['md'] }}">
             @if($config['pulse'])
-                <span class="absolute inline-flex h-full w-full rounded-full bg-current opacity-50 animate-ping"></span>
+                <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-50"></span>
             @endif
-            <span class="relative inline-flex rounded-full {{ $dotSizes[$size] ?? $dotSizes['md'] }} bg-current"></span>
+            <span class="relative inline-flex rounded-full bg-current {{ $dotSizes[$size] ?? $dotSizes['md'] }}"></span>
         </span>
         @if($showLabel)
             <span>{{ $config['label'] }}</span>
diff --git a/extensions/Servers/Proxmox/views/components/ui/spinner.blade.php b/extensions/Servers/Proxmox/views/components/ui/spinner.blade.php
index 6e88dfd56..c953c8296 100644
--- a/extensions/Servers/Proxmox/views/components/ui/spinner.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/spinner.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Spinner Component - shadcn-style
+    Spinner Component - TailAdmin style
     
     Usage:
     <x-proxmox::ui.spinner />
@@ -22,13 +22,13 @@
     
     $colorClasses = [
         'current' => 'text-current',
-        'primary' => 'text-primary',
-        'secondary' => 'text-secondary',
-        'success' => 'text-success',
-        'warning' => 'text-warning',
-        'danger' => 'text-danger',
-        'info' => 'text-info',
-        'muted' => 'text-muted-foreground',
+        'primary' => 'text-brand-500',
+        'secondary' => 'text-gray-500',
+        'success' => 'text-success-500',
+        'warning' => 'text-warning-500',
+        'danger' => 'text-error-500',
+        'info' => 'text-blue-light-500',
+        'muted' => 'text-gray-400 dark:text-gray-500',
     ];
     
     $sizeClass = $sizeClasses[$size] ?? $sizeClasses['md'];
diff --git a/extensions/Servers/Proxmox/views/components/ui/stat-card.blade.php b/extensions/Servers/Proxmox/views/components/ui/stat-card.blade.php
index a55b044b4..eca4fc2d5 100644
--- a/extensions/Servers/Proxmox/views/components/ui/stat-card.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/stat-card.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Stat Card Component - shadcn-inspired
+    Stat Card Component - TailAdmin style
     
     Usage:
     <x-proxmox::ui.stat-card value="12" label="CPU %" />
@@ -13,12 +13,12 @@
     'suffix' => null,
     'prefix' => null,
     'icon' => null,
-    'iconClass' => 'text-muted-foreground',
+    'iconClass' => 'text-gray-500 dark:text-gray-400',
     'status' => null,
     'statusText' => null,
     'href' => null,
     'progress' => null,
-    'progressColor' => 'bg-primary',
+    'progressColor' => 'bg-brand-500',
     'clickable' => false,
     'compact' => false,
     'change' => null,
@@ -28,11 +28,11 @@
 @php
     $tag = $href ? 'a' : 'div';
     $statusClasses = [
-        'success' => 'text-success',
-        'warning' => 'text-warning',
-        'danger' => 'text-danger',
-        'info' => 'text-info',
-        'muted' => 'text-muted-foreground',
+        'success' => 'text-success-500',
+        'warning' => 'text-warning-500',
+        'danger' => 'text-error-500',
+        'info' => 'text-blue-light-500',
+        'muted' => 'text-gray-500 dark:text-gray-400',
     ];
     $statusClass = $statusClasses[$status] ?? '';
 @endphp
@@ -40,24 +40,24 @@
 <{{ $tag }}
     @if($href) href="{{ $href }}" @endif
     {{ $attributes->class([
-        'rounded-xl border bg-card p-6 shadow-sm',
-        'hover:bg-accent/50 transition-colors duration-150 cursor-pointer' => $href || $clickable,
+        'rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]',
+        'transition-colors duration-150 hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer' => $href || $clickable,
     ]) }}
 >
     <div class="flex items-center justify-between pb-2">
-        <span class="text-sm font-medium text-muted-foreground">{{ $label }}</span>
+        <span class="text-theme-sm font-medium text-gray-500 dark:text-gray-400">{{ $label }}</span>
         @if($icon)
-            <x-dynamic-component :component="$icon" class="size-4 {{ $iconClass }}" />
+            <x-dynamic-component :component="$icon" class="size-5 {{ $iconClass }}" />
         @endif
     </div>
     <div class="mt-1">
-        <span @class(['font-bold tracking-tight', 'text-2xl' => !$compact, 'text-xl' => $compact])>
-            @if($prefix)<span class="text-muted-foreground">{{ $prefix }}</span>@endif{{ $value }}@if($suffix)<span class="text-muted-foreground text-base ml-1">{{ $suffix }}</span>@endif
+        <span @class(['font-bold text-gray-800 dark:text-white/90', 'text-2xl' => !$compact, 'text-xl' => $compact])>
+            @if($prefix)<span class="text-gray-500 dark:text-gray-400">{{ $prefix }}</span>@endif{{ $value }}@if($suffix)<span class="ml-1 text-base text-gray-500 dark:text-gray-400">{{ $suffix }}</span>@endif
         </span>
         @if($change !== null || $changeLabel)
-            <p class="text-xs text-muted-foreground mt-1">
+            <p class="mt-1.5 text-theme-xs text-gray-500 dark:text-gray-400">
                 @if($change !== null)
-                    <span @class(['font-medium', $change >= 0 ? 'text-success' : 'text-danger'])>
+                    <span @class(['font-medium', $change >= 0 ? 'text-success-500' : 'text-error-500'])>
                         {{ $change >= 0 ? '+' : '' }}{{ $change }}%
                     </span>
                 @endif
@@ -68,14 +68,14 @@
     
     @if($progress !== null)
         <div class="mt-4">
-            <div class="h-1.5 w-full rounded-full bg-muted overflow-hidden">
-                <div class="h-full {{ $progressColor }} rounded-full transition-all duration-150" style="width: {{ min(100, $progress) }}%"></div>
+            <div class="h-1.5 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
+                <div class="h-full {{ $progressColor }} rounded-full transition-all duration-200" style="width: {{ min(100, $progress) }}%"></div>
             </div>
         </div>
     @endif
     
     @if($statusText)
-        <div class="border-t mt-4 pt-3 text-xs font-medium {{ $statusClass }}">
+        <div class="mt-4 border-t border-gray-200 pt-3 text-theme-xs font-medium dark:border-gray-800 {{ $statusClass }}">
             {{ $statusText }}
         </div>
     @endif
diff --git a/extensions/Servers/Proxmox/views/components/ui/tab-panel.blade.php b/extensions/Servers/Proxmox/views/components/ui/tab-panel.blade.php
index 5c6ce4647..83c6fd98e 100644
--- a/extensions/Servers/Proxmox/views/components/ui/tab-panel.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/tab-panel.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Tab Panel Component - shadcn-style
+    Tab Panel Component - TailAdmin style
 --}}
 
 @props([
@@ -8,10 +8,10 @@
 
 <div
     x-show="activeTab === '{{ $name }}'"
-    x-transition:enter="transition ease-out duration-150"
+    x-transition:enter="transition ease-out duration-200"
     x-transition:enter-start="opacity-0"
     x-transition:enter-end="opacity-100"
-    {{ $attributes->class(['ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2']) }}
+    {{ $attributes->class(['focus:outline-none focus-visible:ring-3 focus-visible:ring-brand-500/20']) }}
 >
     {{ $slot }}
 </div>