From 7a089f53e25a157d9360fd01238e3f801e8c2f30 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 17 Dec 2025 12:07:54 -0500
Subject: [PATCH] refactor: Update UI components to TailAdmin theme

- Changed badge, button, card, dropdown, input, modal, select, table, tabs, toggle, and tooltip components to align with the TailAdmin design system.
- Updated class names and styles for consistency across components.
- Enhanced accessibility and responsiveness in various components.
- Improved hover and focus states for better user experience.
---
 .../views/components/ui/alert.blade.php       | 39 +++++++++-------
 .../views/components/ui/badge.blade.php       | 32 ++++++-------
 .../views/components/ui/button.blade.php      | 46 +++++++++----------
 .../views/components/ui/card.blade.php        | 34 +++++++-------
 .../views/components/ui/dropdown.blade.php    | 10 ++--
 .../views/components/ui/input.blade.php       | 38 +++++++--------
 .../views/components/ui/modal.blade.php       | 38 +++++++--------
 .../views/components/ui/select.blade.php      | 26 +++++------
 .../views/components/ui/table-row.blade.php   | 12 ++---
 .../views/components/ui/table-td.blade.php    |  8 ++--
 .../views/components/ui/table-th.blade.php    |  8 ++--
 .../views/components/ui/table.blade.php       | 16 +++----
 .../views/components/ui/tabs.blade.php        | 28 +++++------
 .../views/components/ui/toggle.blade.php      | 21 +++++----
 .../views/components/ui/tooltip.blade.php     |  8 ++--
 15 files changed, 184 insertions(+), 180 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/components/ui/alert.blade.php b/extensions/Servers/Proxmox/views/components/ui/alert.blade.php
index 6985e6c70..c65d151b1 100644
--- a/extensions/Servers/Proxmox/views/components/ui/alert.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/alert.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Alert Component - TailServer Theme (shadcn-inspired)
+    Alert Component - TailAdmin Theme
     
     Usage:
     <x-proxmox::ui.alert>Default alert</x-proxmox::ui.alert>
@@ -19,23 +19,28 @@
 @php
     $variantConfig = [
         'default' => [
-            'class' => 'bg-card text-card-foreground',
+            'class' => 'border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] text-gray-800 dark:text-white/90',
+            'iconClass' => 'fill-gray-500 dark:fill-gray-400',
             'icon' => $icon ?? 'ri-information-line',
         ],
         'info' => [
-            'class' => 'border-info/20 bg-info/5 text-info [&>svg]:text-info',
+            'class' => 'border-blue-light-200 bg-blue-light-50 dark:border-blue-light-500/20 dark:bg-blue-light-500/10 text-blue-light-600 dark:text-blue-light-400',
+            'iconClass' => 'fill-blue-light-500',
             'icon' => $icon ?? 'ri-information-line',
         ],
         'success' => [
-            'class' => 'border-success/20 bg-success/5 text-success [&>svg]:text-success',
+            'class' => 'border-success-200 bg-success-50 dark:border-success-500/20 dark:bg-success-500/10 text-success-600 dark:text-success-400',
+            'iconClass' => 'fill-success-500',
             'icon' => $icon ?? 'ri-checkbox-circle-line',
         ],
         'warning' => [
-            'class' => 'border-warning/20 bg-warning/5 text-warning [&>svg]:text-warning',
+            'class' => 'border-warning-200 bg-warning-50 dark:border-warning-500/20 dark:bg-warning-500/10 text-warning-600 dark:text-orange-400',
+            'iconClass' => 'fill-warning-500',
             'icon' => $icon ?? 'ri-error-warning-line',
         ],
         'danger' => [
-            'class' => 'border-danger/20 bg-danger/5 text-danger [&>svg]:text-danger',
+            'class' => 'border-error-200 bg-error-50 dark:border-error-500/20 dark:bg-error-500/10 text-error-600 dark:text-error-400',
+            'iconClass' => 'fill-error-500',
             'icon' => $icon ?? 'ri-error-warning-fill',
         ],
     ];
@@ -46,7 +51,7 @@
 <div 
     role="alert"
     {{ $attributes->class([
-        'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5',
+        'relative w-full rounded-xl border p-4 flex gap-3 items-start',
         $config['class'],
     ]) }}
     @if($dismissible || $collapsible)
@@ -55,24 +60,24 @@
             @if($collapsible) collapsed: {{ $collapsed ? 'true' : 'false' }} @endif
         }"
         x-show="show"
-        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"
     @endif
 >
-    <x-dynamic-component :component="$config['icon']" class="size-4" />
+    <x-dynamic-component :component="$config['icon']" class="size-5 mt-0.5 shrink-0 {{ $config['iconClass'] }}" />
     <div class="flex-1 min-w-0">
         @if($title)
-            <h5 class="mb-1 font-medium leading-none tracking-tight">{{ $title }}</h5>
+            <h5 class="mb-1 text-sm font-semibold">{{ $title }}</h5>
         @endif
         <div 
-            class="text-sm [&_p]:leading-relaxed opacity-90"
+            class="text-theme-sm"
             @if($collapsible)
                 x-show="!collapsed"
-                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"
             @endif
@@ -81,15 +86,15 @@
         </div>
     </div>
     @if($dismissible || $collapsible)
-        <div class="absolute top-3 right-3 flex items-center gap-1">
+        <div class="flex items-center gap-1 shrink-0">
             @if($collapsible)
                 <button 
                     type="button" 
                     @click="collapsed = !collapsed"
-                    class="p-1 rounded hover:bg-black/5 transition-colors"
+                    class="p-1.5 rounded-lg hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
                 >
                     <x-ri-arrow-down-s-line 
-                        class="size-4 transition-transform duration-150"
+                        class="size-4 transition-transform duration-200"
                         x-bind:class="collapsed ? 'rotate-180' : ''" 
                     />
                 </button>
@@ -98,7 +103,7 @@
                 <button 
                     type="button" 
                     @click="show = false"
-                    class="p-1 rounded hover:bg-black/5 transition-colors"
+                    class="p-1.5 rounded-lg hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
                 >
                     <x-ri-close-line class="size-4" />
                 </button>
diff --git a/extensions/Servers/Proxmox/views/components/ui/badge.blade.php b/extensions/Servers/Proxmox/views/components/ui/badge.blade.php
index d1cfce2b1..373a5f258 100644
--- a/extensions/Servers/Proxmox/views/components/ui/badge.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/badge.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Badge Component - TailServer Theme (shadcn-inspired)
+    Badge Component - TailAdmin Theme
     
     Usage:
     <x-proxmox::ui.badge>Default</x-proxmox::ui.badge>
@@ -18,31 +18,31 @@
 ])
 
 @php
-    $baseClasses = 'inline-flex items-center rounded-md border font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2';
+    $baseClasses = 'inline-flex items-center rounded-full font-medium transition-colors';
     
     $variantClasses = [
-        'default' => 'border-transparent bg-primary text-primary-foreground shadow',
-        'secondary' => 'border-transparent bg-secondary text-secondary-foreground',
-        'success' => $outline ? 'border-success/40 text-success bg-transparent' : 'border-transparent bg-success/15 text-success',
-        'warning' => $outline ? 'border-warning/40 text-warning bg-transparent' : 'border-transparent bg-warning/15 text-warning',
-        'danger' => $outline ? 'border-danger/40 text-danger bg-transparent' : 'border-transparent bg-danger/15 text-danger',
-        'info' => $outline ? 'border-info/40 text-info bg-transparent' : 'border-transparent bg-info/15 text-info',
-        'outline' => 'text-foreground border-neutral/20',
-        'muted' => 'border-transparent bg-muted text-muted-foreground',
+        'default' => 'bg-brand-50 text-brand-500 dark:bg-brand-500/15 dark:text-brand-400',
+        'secondary' => 'bg-gray-100 text-gray-700 dark:bg-white/5 dark:text-white/80',
+        'success' => $outline ? 'ring-1 ring-success-500/40 text-success-600 bg-transparent dark:text-success-400' : 'bg-success-50 text-success-600 dark:bg-success-500/15 dark:text-success-400',
+        'warning' => $outline ? 'ring-1 ring-warning-500/40 text-warning-600 bg-transparent dark:text-orange-400' : 'bg-warning-50 text-warning-600 dark:bg-warning-500/15 dark:text-orange-400',
+        'danger' => $outline ? 'ring-1 ring-error-500/40 text-error-600 bg-transparent dark:text-error-400' : 'bg-error-50 text-error-600 dark:bg-error-500/15 dark:text-error-400',
+        'info' => $outline ? 'ring-1 ring-blue-light-500/40 text-blue-light-600 bg-transparent dark:text-blue-light-400' : 'bg-blue-light-50 text-blue-light-500 dark:bg-blue-light-500/15 dark:text-blue-light-500',
+        'outline' => 'text-gray-700 ring-1 ring-gray-300 dark:text-gray-400 dark:ring-gray-700',
+        'muted' => 'bg-gray-500 text-white dark:bg-white/5 dark:text-white/80',
     ];
     
     $sizeClasses = [
-        'xs' => 'px-1.5 py-0.5 text-[10px]',
-        'sm' => 'px-2 py-0.5 text-[11px]',
-        'md' => 'px-2.5 py-0.5 text-xs',
+        'xs' => 'px-2 py-0.5 text-[10px]',
+        'sm' => 'px-2 py-0.5 text-xs',
+        'md' => 'px-2.5 py-0.5 text-sm',
         'lg' => 'px-3 py-1 text-sm',
     ];
     
     $iconSizes = [
         'xs' => 'size-2.5',
         'sm' => 'size-3',
-        'md' => 'size-3',
-        'lg' => 'size-3.5',
+        'md' => 'size-3.5',
+        'lg' => 'size-4',
     ];
     
     $dotSizes = [
@@ -72,7 +72,7 @@
         </span>
     @endif
     @if($icon)
-        <x-dynamic-component :component="$icon" class="{{ $iconSize }}" />
+        <x-dynamic-component :component="$icon" class="fill-current {{ $iconSize }}" />
     @endif
     {{ $slot }}
 </span>
diff --git a/extensions/Servers/Proxmox/views/components/ui/button.blade.php b/extensions/Servers/Proxmox/views/components/ui/button.blade.php
index 86bf21605..90a73c32a 100644
--- a/extensions/Servers/Proxmox/views/components/ui/button.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/button.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Button Component - shadcn-inspired
+    Button Component - TailAdmin Theme
     
     Usage:
     <x-proxmox::ui.button>Click me</x-proxmox::ui.button>
@@ -24,36 +24,36 @@
 @php
     $tag = $href ? 'a' : 'button';
     
-    $baseClasses = 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50';
+    $baseClasses = 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium transition-colors focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-brand-500/10 disabled:pointer-events-none disabled:opacity-50';
     
     $variantClasses = [
-        'primary' => 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-        'secondary' => 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
-        'outline' => 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
-        'ghost' => 'hover:bg-accent hover:text-accent-foreground',
-        'danger' => 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-        'success' => 'bg-success text-white shadow-sm hover:bg-success/90',
-        'warning' => 'bg-warning text-white shadow-sm hover:bg-warning/90',
-        'info' => 'bg-info text-white shadow-sm hover:bg-info/90',
-        'link' => 'text-primary underline-offset-4 hover:underline',
+        'primary' => 'bg-brand-500 text-white shadow-theme-xs hover:bg-brand-600',
+        'secondary' => 'bg-white text-gray-700 shadow-theme-xs ring-1 ring-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-700 dark:hover:bg-white/[0.03]',
+        'outline' => 'border border-gray-300 bg-white shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200',
+        'ghost' => 'hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-white/5 dark:hover:text-gray-300',
+        'danger' => 'bg-error-500 text-white shadow-theme-xs hover:bg-error-600',
+        'success' => 'bg-success-500 text-white shadow-theme-xs hover:bg-success-600',
+        'warning' => 'bg-warning-500 text-white shadow-theme-xs hover:bg-warning-600',
+        'info' => 'bg-blue-light-500 text-white shadow-theme-xs hover:bg-blue-light-600',
+        'link' => 'text-brand-500 hover:text-brand-600 hover:underline underline-offset-4',
     ];
     
     $sizeClasses = [
-        'xs' => 'h-7 px-2 text-xs',
-        'sm' => 'h-8 px-3 text-xs',
-        'md' => 'h-9 px-4 py-2',
-        'lg' => 'h-10 px-8',
-        'xl' => 'h-11 px-10 text-base',
-        'icon' => 'h-9 w-9',
+        'xs' => 'h-8 px-2.5 text-xs',
+        'sm' => 'h-9 px-3 text-sm',
+        'md' => 'h-10 px-4 text-sm',
+        'lg' => 'h-11 px-5 text-sm',
+        'xl' => 'h-12 px-6 text-base',
+        'icon' => 'h-10 w-10',
     ];
     
     $iconSizes = [
-        'xs' => 'size-3',
-        'sm' => 'size-3.5',
+        'xs' => 'size-3.5',
+        'sm' => 'size-4',
         'md' => 'size-4',
-        'lg' => 'size-4',
+        'lg' => 'size-5',
         'xl' => 'size-5',
-        'icon' => 'size-4',
+        'icon' => 'size-5',
     ];
     
     $classes = collect([
@@ -80,11 +80,11 @@
         <span>{{ $loadingText ?? $slot }}</span>
     @else
         @if($icon)
-            <x-dynamic-component :component="$icon" class="{{ $iconSize }}" />
+            <x-dynamic-component :component="$icon" class="fill-current {{ $iconSize }}" />
         @endif
         {{ $slot }}
         @if($iconRight)
-            <x-dynamic-component :component="$iconRight" class="{{ $iconSize }}" />
+            <x-dynamic-component :component="$iconRight" class="fill-current {{ $iconSize }}" />
         @endif
     @endif
 </{{ $tag }}>
diff --git a/extensions/Servers/Proxmox/views/components/ui/card.blade.php b/extensions/Servers/Proxmox/views/components/ui/card.blade.php
index 93c6634d2..5dfaa6821 100644
--- a/extensions/Servers/Proxmox/views/components/ui/card.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/card.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Card Component - shadcn-inspired
+    Card Component - TailAdmin Theme
     
     Usage:
     <x-proxmox::ui.card>Content</x-proxmox::ui.card>
@@ -11,7 +11,7 @@
     'title' => null,
     'subtitle' => null,
     'icon' => null,
-    'iconColor' => 'text-primary',
+    'iconColor' => 'text-brand-500',
     'actions' => null,
     'footer' => null,
     'footerClass' => '',
@@ -24,8 +24,8 @@
 
 <div 
     {{ $attributes->class([
-        'rounded-xl border bg-card shadow-sm',
-        'hover:bg-accent/50 transition-colors duration-150' => $hover || $clickable,
+        'rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]',
+        'hover:shadow-theme-md transition-shadow duration-200' => $hover || $clickable,
         'cursor-pointer' => $clickable,
     ]) }}
     @if($collapsible)
@@ -33,19 +33,19 @@
     @endif
 >
     @if($title || $actions)
-        <div class="flex items-center justify-between gap-4 p-6 pb-0">
+        <div class="flex items-center justify-between gap-4 px-6 py-5">
             <div class="flex items-center gap-3">
                 @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 items-center justify-center size-10 rounded-xl bg-brand-50 dark:bg-brand-500/10">
+                        <x-dynamic-component :component="$icon" class="size-5 {{ $iconColor }}" />
                     </div>
                 @endif
-                <div class="space-y-1">
+                <div class="space-y-0.5">
                     @if($title)
-                        <h3 class="font-semibold leading-none tracking-tight">{{ $title }}</h3>
+                        <h3 class="text-base font-medium text-gray-800 dark:text-white/90">{{ $title }}</h3>
                     @endif
                     @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>
@@ -58,10 +58,10 @@
                     <button 
                         type="button" 
                         @click="isCollapsed = !isCollapsed"
-                        class="p-1.5 rounded-md hover:bg-muted transition-colors duration-150"
+                        class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-white/5 transition-colors duration-200"
                     >
                         <x-ri-arrow-down-s-line 
-                            class="size-4 text-muted-foreground transition-transform duration-150"
+                            class="size-5 text-gray-500 dark:text-gray-400 transition-transform duration-200"
                             x-bind:class="isCollapsed ? 'rotate-180' : ''" 
                         />
                     </button>
@@ -73,15 +73,15 @@
 
     <div 
         @class([
-            'p-6',
-            'pt-4' => $title,
+            'border-t border-gray-100 dark:border-gray-800' => $title,
+            'p-5 sm:p-6',
         ])
         @if($collapsible)
             x-show="!isCollapsed"
-            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"
         @endif
@@ -90,7 +90,7 @@
     </div>
 
     @if($footer)
-        <div class="flex items-center p-6 pt-0 {{ $footerClass }}">
+        <div class="flex items-center border-t border-gray-100 dark:border-gray-800 px-6 py-4 {{ $footerClass }}">
             {{ $footer }}
         </div>
     @endif
diff --git a/extensions/Servers/Proxmox/views/components/ui/dropdown.blade.php b/extensions/Servers/Proxmox/views/components/ui/dropdown.blade.php
index 726fd5cc7..1c7635dfe 100644
--- a/extensions/Servers/Proxmox/views/components/ui/dropdown.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/dropdown.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Dropdown Component - shadcn-style
+    Dropdown Component - TailAdmin style
     
     Usage:
     <x-proxmox::ui.dropdown>
@@ -44,17 +44,17 @@
 
     <div
         x-show="open"
-        x-transition:enter="transition ease-out duration-100"
+        x-transition:enter="transition ease-out duration-150"
         x-transition:enter-start="opacity-0 scale-95"
         x-transition:enter-end="opacity-100 scale-100"
-        x-transition:leave="transition ease-in duration-75"
+        x-transition:leave="transition ease-in duration-100"
         x-transition:leave-start="opacity-100 scale-100"
         x-transition:leave-end="opacity-0 scale-95"
-        class="absolute z-50 mt-1.5 {{ $widthClasses[$width] ?? 'w-48' }} {{ $alignClasses[$align] ?? $alignClasses['right'] }}"
+        class="absolute z-50 mt-2 {{ $widthClasses[$width] ?? 'w-48' }} {{ $alignClasses[$align] ?? $alignClasses['right'] }}"
         style="display: none;"
         @click="open = false"
     >
-        <div class="rounded-md border bg-popover p-1 text-popover-foreground shadow-md {{ $contentClasses }}">
+        <div class="rounded-xl border border-gray-200 bg-white p-2 shadow-theme-lg dark:border-gray-800 dark:bg-gray-900 {{ $contentClasses }}">
             {{ $slot }}
         </div>
     </div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/input.blade.php b/extensions/Servers/Proxmox/views/components/ui/input.blade.php
index bff8a1a52..0876cd674 100644
--- a/extensions/Servers/Proxmox/views/components/ui/input.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/input.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Input Component - shadcn-style
+    Input Component - TailAdmin Theme
     
     Usage:
     <x-proxmox::ui.input name="email" label="Email" />
@@ -24,43 +24,43 @@
 
 @php
     $sizeClasses = [
-        'sm' => 'h-8 text-sm',
-        'md' => 'h-9 text-sm',
-        'lg' => 'h-10 text-base',
+        'sm' => 'h-9 text-sm',
+        'md' => 'h-11 text-sm',
+        'lg' => 'h-12 text-base',
     ];
     $sizeClass = $sizeClasses[$size] ?? $sizeClasses['md'];
     
-    $inputClasses = 'flex w-full rounded-md border bg-transparent px-3 py-1 text-sm transition-colors duration-150 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50';
+    $inputClasses = 'flex w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs transition-colors duration-200 placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800';
     
     if ($error) {
-        $inputClasses .= ' border-danger focus-visible:ring-danger';
-    } else {
-        $inputClasses .= ' border-input';
+        $inputClasses = str_replace('border-gray-300', 'border-error-300', $inputClasses);
+        $inputClasses = str_replace('focus:border-brand-300', 'focus:border-error-500', $inputClasses);
+        $inputClasses = str_replace('focus:ring-brand-500/10', 'focus:ring-error-500/10', $inputClasses);
     }
     
     if ($icon) {
-        $inputClasses .= ' ps-9';
+        $inputClasses .= ' pl-11';
     }
     
     if ($iconRight) {
-        $inputClasses .= ' pe-9';
+        $inputClasses .= ' pr-11';
     }
 @endphp
 
-<div {{ $attributes->only('class')->class(['space-y-2']) }}>
+<div {{ $attributes->only('class')->class(['space-y-1.5']) }}>
     @if($label)
-        <label @if($name) for="{{ $name }}" @endif class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+        <label @if($name) for="{{ $name }}" @endif class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
             {{ $label }}
             @if($required)
-                <span class="text-danger">*</span>
+                <span class="text-error-500">*</span>
             @endif
         </label>
     @endif
     
     <div class="relative">
         @if($icon)
-            <div class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3 text-muted-foreground">
-                <x-dynamic-component :component="$icon" class="size-4" />
+            <div class="pointer-events-none absolute inset-y-0 left-0 flex h-11 w-[46px] items-center justify-center border-r border-gray-200 dark:border-gray-800">
+                <x-dynamic-component :component="$icon" class="fill-gray-500 dark:fill-gray-400 size-5" />
             </div>
         @endif
         
@@ -75,15 +75,15 @@
         />
         
         @if($iconRight)
-            <div class="pointer-events-none absolute inset-y-0 end-0 flex items-center pe-3 text-muted-foreground">
-                <x-dynamic-component :component="$iconRight" class="size-4" />
+            <div class="pointer-events-none absolute inset-y-0 right-0 flex h-11 w-[46px] items-center justify-center border-l border-gray-200 dark:border-gray-800">
+                <x-dynamic-component :component="$iconRight" class="fill-gray-500 dark:fill-gray-400 size-5" />
             </div>
         @endif
     </div>
     
     @if($error)
-        <p class="text-[0.8rem] font-medium text-danger">{{ $error }}</p>
+        <p class="text-sm text-error-500">{{ $error }}</p>
     @elseif($hint)
-        <p class="text-[0.8rem] text-muted-foreground">{{ $hint }}</p>
+        <p class="text-sm text-gray-500 dark:text-gray-400">{{ $hint }}</p>
     @endif
 </div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/modal.blade.php b/extensions/Servers/Proxmox/views/components/ui/modal.blade.php
index 905eadd32..b3fa72f16 100644
--- a/extensions/Servers/Proxmox/views/components/ui/modal.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/modal.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Modal Component - shadcn-style Dialog
+    Modal Component - TailAdmin Dialog
     
     Usage:
     <x-proxmox::ui.modal name="my-modal" title="Modal Title">Content</x-proxmox::ui.modal>
@@ -13,7 +13,7 @@
     'title' => null,
     'subtitle' => null,
     'icon' => null,
-    'iconColor' => 'text-primary',
+    'iconColor' => 'text-brand-500',
     'maxWidth' => 'md',
     'closeable' => true,
     'footer' => null,
@@ -41,59 +41,59 @@
     x-on:keydown.escape.window="@if($closeable) show = false @endif"
     x-show="show"
     x-cloak
-    class="fixed inset-0 z-50 overflow-y-auto"
+    class="fixed inset-0 z-99999 overflow-y-auto"
     {{ $attributes }}
 >
     {{-- Backdrop --}}
     <div 
         x-show="show"
-        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"
         @if($closeable) @click="show = false" @endif
-        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>
     
     {{-- Modal Panel --}}
     <div class="fixed inset-0 flex items-center justify-center p-4">
         <div
             x-show="show"
-            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.stop
-            class="relative w-full {{ $maxWidthClass }} max-h-[90vh] overflow-y-auto rounded-xl border bg-background-secondary shadow-lg"
+            class="relative w-full {{ $maxWidthClass }} 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"
         >
             {{-- Header --}}
             @if($title || $closeable)
-                <div class="flex items-start justify-between gap-4 px-6 pt-6 pb-4">
-                    <div class="flex items-center gap-3">
+                <div class="flex items-start justify-between gap-4 border-b border-gray-200 px-6 py-5 dark:border-gray-800">
+                    <div class="flex items-center 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">
                             @if($title)
-                                <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>
                             @endif
                             @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($closeable)
                         <button 
                             @click="show = false" 
-                            class="rounded-sm opacity-70 ring-offset-background transition-opacity duration-150 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                            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 focus:outline-none focus:ring-2 focus:ring-brand-500/20 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300"
                         >
-                            <x-ri-close-line class="size-4" />
+                            <x-ri-close-line class="size-5" />
                             <span class="sr-only">Close</span>
                         </button>
                     @endif
@@ -101,13 +101,13 @@
             @endif
             
             {{-- Content --}}
-            <div class="px-6 pb-6">
+            <div class="px-6 py-5">
                 {{ $slot }}
             </div>
             
             {{-- Footer --}}
             @if($footer)
-                <div class="flex items-center justify-end gap-2 px-6 py-4 border-t">
+                <div class="flex items-center justify-end gap-3 border-t border-gray-200 px-6 py-4 dark:border-gray-800">
                     {{ $footer }}
                 </div>
             @endif
diff --git a/extensions/Servers/Proxmox/views/components/ui/select.blade.php b/extensions/Servers/Proxmox/views/components/ui/select.blade.php
index e80ac1866..12caa716b 100644
--- a/extensions/Servers/Proxmox/views/components/ui/select.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/select.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Select Component - shadcn-style
+    Select Component - TailAdmin style
     
     Usage:
     <x-proxmox::ui.select name="country" label="Country">
@@ -20,27 +20,27 @@
 
 @php
     $sizeClasses = [
-        'sm' => 'h-8 text-sm',
-        'md' => 'h-9 text-sm',
-        'lg' => 'h-10 text-base',
+        'sm' => 'h-9 text-theme-xs py-2',
+        'md' => 'h-11 text-theme-sm py-2.5',
+        'lg' => 'h-12 text-base py-3',
     ];
     $sizeClass = $sizeClasses[$size] ?? $sizeClasses['md'];
     
-    $selectClasses = 'flex w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm ring-offset-background transition-colors duration-150 placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 appearance-none cursor-pointer';
+    $selectClasses = 'block w-full appearance-none rounded-lg border bg-transparent px-4 pr-10 shadow-theme-xs transition-colors duration-150 placeholder:text-gray-400 focus:outline-none focus:ring-3 disabled:cursor-not-allowed disabled:bg-gray-50 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-gray-500 dark:disabled:bg-gray-800';
     
     if ($error) {
-        $selectClasses .= ' border-danger focus:ring-danger';
+        $selectClasses .= ' border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700';
     } else {
-        $selectClasses .= ' border-input';
+        $selectClasses .= ' border-gray-300 focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-600';
     }
 @endphp
 
 <div {{ $attributes->only('class')->class(['space-y-2']) }}>
     @if($label)
-        <label @if($name) for="{{ $name }}" @endif class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+        <label @if($name) for="{{ $name }}" @endif class="text-theme-sm font-medium text-gray-700 dark:text-gray-300">
             {{ $label }}
             @if($required)
-                <span class="text-danger">*</span>
+                <span class="text-error-500">*</span>
             @endif
         </label>
     @endif
@@ -54,14 +54,14 @@
         >
             {{ $slot }}
         </select>
-        <div class="pointer-events-none absolute inset-y-0 end-0 flex items-center pe-3 text-muted-foreground">
-            <x-ri-arrow-down-s-line class="size-4 opacity-50" />
+        <div class="pointer-events-none absolute inset-y-0 end-0 flex items-center pe-4 text-gray-500 dark:text-gray-400">
+            <x-ri-arrow-down-s-line class="size-5" />
         </div>
     </div>
     
     @if($error)
-        <p class="text-[0.8rem] font-medium text-danger">{{ $error }}</p>
+        <p class="text-theme-xs font-medium text-error-500">{{ $error }}</p>
     @elseif($hint)
-        <p class="text-[0.8rem] text-muted-foreground">{{ $hint }}</p>
+        <p class="text-theme-xs text-gray-500 dark:text-gray-400">{{ $hint }}</p>
     @endif
 </div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/table-row.blade.php b/extensions/Servers/Proxmox/views/components/ui/table-row.blade.php
index 8464260b6..cc6cc0d60 100644
--- a/extensions/Servers/Proxmox/views/components/ui/table-row.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/table-row.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Table Row Component - shadcn-style
+    Table Row Component - TailAdmin style
 --}}
 
 @props([
@@ -16,9 +16,8 @@
 @if($href)
     <tr 
         {{ $attributes->class([
-            'border-b transition-colors cursor-pointer',
-            'hover:bg-muted/50' => $isHoverable,
-            'data-[state=selected]:bg-muted',
+            'cursor-pointer transition-colors duration-150',
+            'hover:bg-gray-50 dark:hover:bg-gray-800/50' => $isHoverable,
         ]) }}
         onclick="window.location='{{ $href }}'"
     >
@@ -27,10 +26,9 @@
 @else
     <tr 
         {{ $attributes->class([
-            'border-b transition-colors',
-            'hover:bg-muted/50' => $isHoverable,
+            'transition-colors duration-150',
+            'hover:bg-gray-50 dark:hover:bg-gray-800/50' => $isHoverable,
             'cursor-pointer' => $clickable,
-            'data-[state=selected]:bg-muted',
         ]) }}
     >
         {{ $slot }}
diff --git a/extensions/Servers/Proxmox/views/components/ui/table-td.blade.php b/extensions/Servers/Proxmox/views/components/ui/table-td.blade.php
index cc3a875d9..fb5c2d0c1 100644
--- a/extensions/Servers/Proxmox/views/components/ui/table-td.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/table-td.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Table Data Cell Component - shadcn-style
+    Table Data Cell Component - TailAdmin style
 --}}
 
 @props([
@@ -20,11 +20,11 @@
 
 <td 
     {{ $attributes->class([
-        'p-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        'px-5 py-4 text-theme-sm text-gray-700 dark:text-gray-300',
         $alignClass,
         'whitespace-nowrap' => $nowrap,
-        'text-muted-foreground' => $muted,
-        'font-medium' => $strong,
+        'text-gray-500 dark:text-gray-400' => $muted,
+        'font-medium text-gray-800 dark:text-white/90' => $strong,
     ]) }}
 >
     {{ $slot }}
diff --git a/extensions/Servers/Proxmox/views/components/ui/table-th.blade.php b/extensions/Servers/Proxmox/views/components/ui/table-th.blade.php
index 2b5f6fd5f..e127ae6f0 100644
--- a/extensions/Servers/Proxmox/views/components/ui/table-th.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/table-th.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Table Header Cell Component - shadcn-style
+    Table Header Cell Component - TailAdmin style
 --}}
 
 @props([
@@ -23,9 +23,9 @@
 
 <th 
     {{ $attributes->class([
-        'h-10 px-4 font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        'px-5 py-3.5 text-theme-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400',
         $alignClass,
-        'cursor-pointer select-none hover:text-foreground transition-colors duration-150' => $sortable,
+        'cursor-pointer select-none transition-colors duration-150 hover:text-gray-700 dark:hover:text-gray-300' => $sortable,
     ]) }}
     @if($sortable && $sortKey)
         wire:click="sort('{{ $sortKey }}')"
@@ -34,7 +34,7 @@
     <div class="flex items-center gap-1.5 @if($align === 'end') justify-end @elseif($align === 'center') justify-center @endif">
         <span>{{ $slot }}</span>
         @if($sortable)
-            <span class="text-muted-foreground">
+            <span class="text-gray-400 dark:text-gray-500">
                 @if($isSorted)
                     @if($currentDirection === 'asc')
                         <x-ri-arrow-up-s-line class="size-4" />
diff --git a/extensions/Servers/Proxmox/views/components/ui/table.blade.php b/extensions/Servers/Proxmox/views/components/ui/table.blade.php
index ba1417920..2b34ab3b0 100644
--- a/extensions/Servers/Proxmox/views/components/ui/table.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/table.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Table Component - shadcn-style
+    Table Component - TailAdmin style
     
     Usage:
     <x-proxmox::ui.table>
@@ -21,27 +21,27 @@
     'compact' => false,
 ])
 
-<div @class(['relative w-full overflow-auto' => $responsive])>
+<div @class(['relative w-full overflow-x-auto rounded-xl border border-gray-200 dark:border-gray-800' => $responsive])>
     <table 
         {{ $attributes->class([
-            'w-full caption-bottom text-sm',
-            '[&_tbody_tr:nth-child(even)]:bg-muted/50' => $striped,
+            'w-full text-theme-sm',
+            '[&_tbody_tr:nth-child(even)]:bg-gray-50 dark:[&_tbody_tr:nth-child(even)]:bg-gray-800/50' => $striped,
         ]) }}
         data-hoverable="{{ $hoverable ? 'true' : 'false' }}"
         data-compact="{{ $compact ? 'true' : 'false' }}"
     >
         @if(isset($head))
-            <thead class="[&_tr]:border-b">
-                <tr class="border-b transition-colors">
+            <thead class="border-b border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-800/50">
+                <tr>
                     {{ $head }}
                 </tr>
             </thead>
         @endif
-        <tbody class="[&_tr:last-child]:border-0">
+        <tbody class="divide-y divide-gray-200 dark:divide-gray-800">
             {{ $slot }}
         </tbody>
         @if(isset($foot))
-            <tfoot class="border-t bg-muted/50 font-medium [&>tr]:last:border-b-0">
+            <tfoot class="border-t border-gray-200 bg-gray-50 font-medium dark:border-gray-800 dark:bg-gray-800/50">
                 {{ $foot }}
             </tfoot>
         @endif
diff --git a/extensions/Servers/Proxmox/views/components/ui/tabs.blade.php b/extensions/Servers/Proxmox/views/components/ui/tabs.blade.php
index f8b9c5bb1..1ffd37445 100644
--- a/extensions/Servers/Proxmox/views/components/ui/tabs.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/tabs.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Tabs Component - shadcn-style
+    Tabs Component - TailAdmin style
     
     Usage:
     <x-proxmox::ui.tabs :tabs="['Overview', 'Settings', 'Logs']" active="Overview">
@@ -18,22 +18,22 @@
 @php
     $variantClasses = [
         'default' => [
-            'container' => 'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
-            'tab' => 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
-            'active' => 'bg-background text-foreground shadow',
-            'inactive' => 'hover:bg-background/50 hover:text-foreground',
+            'container' => 'inline-flex items-center gap-1 rounded-lg border border-gray-200 bg-gray-50 p-1 dark:border-gray-800 dark:bg-gray-800/50',
+            'tab' => 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-4 py-2 text-theme-sm font-medium transition-all duration-150',
+            'active' => 'bg-white text-gray-800 shadow-theme-xs dark:bg-gray-900 dark:text-white/90',
+            'inactive' => 'text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300',
         ],
         'pills' => [
-            'container' => 'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
-            'tab' => 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all duration-150',
-            'active' => 'bg-background text-foreground shadow',
-            'inactive' => 'hover:bg-background/50 hover:text-foreground',
+            'container' => 'inline-flex items-center gap-1 rounded-lg border border-gray-200 bg-gray-50 p-1 dark:border-gray-800 dark:bg-gray-800/50',
+            'tab' => 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-4 py-2 text-theme-sm font-medium transition-all duration-150',
+            'active' => 'bg-white text-gray-800 shadow-theme-xs dark:bg-gray-900 dark:text-white/90',
+            'inactive' => 'text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300',
         ],
         'buttons' => [
             'container' => 'flex gap-2',
-            'tab' => 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium transition-colors duration-150',
-            'active' => 'bg-primary text-primary-foreground shadow',
-            'inactive' => 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+            'tab' => 'inline-flex items-center justify-center whitespace-nowrap rounded-lg px-4 py-2.5 text-theme-sm font-medium transition-colors duration-150',
+            'active' => 'bg-brand-500 text-white shadow-theme-xs hover:bg-brand-600',
+            'inactive' => 'bg-white text-gray-700 shadow-theme-xs ring-1 ring-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-700 dark:hover:bg-gray-700',
         ],
     ];
     
@@ -65,7 +65,7 @@
                 @endif
                 <span>{{ $tabLabel }}</span>
                 @if($tabBadge)
-                    <span class="ml-1.5 rounded-full bg-primary/10 px-1.5 py-0.5 text-xs font-medium text-primary">
+                    <span class="ml-1.5 rounded-full bg-brand-50 px-2 py-0.5 text-theme-xs font-medium text-brand-600 dark:bg-brand-500/15 dark:text-brand-400">
                         {{ $tabBadge }}
                     </span>
                 @endif
@@ -74,7 +74,7 @@
     </div>
     
     {{-- Tab Panels --}}
-    <div class="mt-4">
+    <div class="mt-5">
         {{ $slot }}
     </div>
 </div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/toggle.blade.php b/extensions/Servers/Proxmox/views/components/ui/toggle.blade.php
index 95bc7b903..3ea7d0a80 100644
--- a/extensions/Servers/Proxmox/views/components/ui/toggle.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/toggle.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Toggle/Switch Component - shadcn-style
+    Toggle/Switch Component - TailAdmin style
     
     Usage:
     <x-proxmox::ui.toggle wire:model="enabled" label="Enable Feature" />
@@ -11,14 +11,14 @@
     'disabled' => false,
 ])
 
-<label {{ $attributes->only('class')->class(['flex items-center justify-between gap-4 cursor-pointer']) }}>
+<label {{ $attributes->only('class')->class(['flex cursor-pointer items-center justify-between gap-4']) }}>
     @if($label || $description)
         <div class="space-y-0.5">
             @if($label)
-                <span class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">{{ $label }}</span>
+                <span class="text-theme-sm font-medium text-gray-700 dark:text-gray-300">{{ $label }}</span>
             @endif
             @if($description)
-                <p class="text-[0.8rem] text-muted-foreground">{{ $description }}</p>
+                <p class="text-theme-xs text-gray-500 dark:text-gray-400">{{ $description }}</p>
             @endif
         </div>
     @endif
@@ -27,17 +27,18 @@
         <input
             type="checkbox"
             {{ $attributes->whereDoesntStartWith('class')->merge(['disabled' => $disabled]) }}
-            class="sr-only peer"
+            class="peer sr-only"
         />
         <div @class([
-            'inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-150',
-            'bg-input peer-checked:bg-primary',
-            'peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background',
+            'block h-6 w-11 rounded-full border-2 border-transparent transition-colors duration-200',
+            'bg-gray-200 peer-checked:bg-brand-500',
+            'peer-focus-visible:outline-none peer-focus-visible:ring-3 peer-focus-visible:ring-brand-500/20',
             'peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+            'dark:bg-gray-700 dark:peer-checked:bg-brand-500',
         ])></div>
         <div @class([
-            'pointer-events-none absolute top-0.5 left-0.5 block size-4 rounded-full bg-background shadow-lg ring-0 transition-transform duration-150',
-            'peer-checked:translate-x-4',
+            'pointer-events-none absolute left-0.5 top-0.5 size-5 rounded-full bg-white shadow-theme-sm ring-0 transition-transform duration-200',
+            'peer-checked:translate-x-5',
         ])></div>
     </div>
 </label>
diff --git a/extensions/Servers/Proxmox/views/components/ui/tooltip.blade.php b/extensions/Servers/Proxmox/views/components/ui/tooltip.blade.php
index 3c2d75c8a..96e30abdb 100644
--- a/extensions/Servers/Proxmox/views/components/ui/tooltip.blade.php
+++ b/extensions/Servers/Proxmox/views/components/ui/tooltip.blade.php
@@ -1,5 +1,5 @@
 {{--
-    Tooltip Component - shadcn-style
+    Tooltip Component - TailAdmin style
     
     Usage:
     <x-proxmox::ui.tooltip text="This is a tooltip">
@@ -33,15 +33,15 @@
     <div
         x-show="show"
         x-cloak
-        x-transition:enter="transition ease-out duration-100"
+        x-transition:enter="transition ease-out duration-150"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
-        x-transition:leave="transition ease-in duration-75"
+        x-transition:leave="transition ease-in duration-100"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="absolute z-50 {{ $positions[$position] ?? $positions['top'] }} pointer-events-none"
     >
-        <div class="overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground">
+        <div class="overflow-hidden rounded-lg bg-gray-900 px-3 py-1.5 text-theme-xs font-medium text-white shadow-theme-md dark:bg-gray-700">
             {{ $text }}
         </div>
     </div>