diff --git a/extensions/Servers/Proxmox/views/components/alert.blade.php b/extensions/Servers/Proxmox/views/components/alert.blade.php
index b3f22a34f..24a3baebb 100644
--- a/extensions/Servers/Proxmox/views/components/alert.blade.php
+++ b/extensions/Servers/Proxmox/views/components/alert.blade.php
@@ -7,17 +7,19 @@
     'collapsed' => false,
     'storageKey' => null,
     'border' => true,
+    'callout' => false,
 ])
 
 @php
-    // Variant classes
+    // AdminLTE variant classes
     $variantClasses = match($variant) {
-        'success' => 'bg-success/10 border-success/30 text-success',
-        'danger', 'error' => 'bg-danger/10 border-danger/30 text-danger',
-        'warning' => 'bg-warning/10 border-warning/30 text-warning',
-        'info' => 'bg-info/10 border-info/30 text-info',
-        'neutral' => 'bg-neutral/10 border-neutral/30 text-base/80',
-        default => 'bg-info/10 border-info/30 text-info',
+        'success' => $callout ? 'lte-callout lte-callout-success' : 'lte-alert lte-alert-success',
+        'danger', 'error' => $callout ? 'lte-callout lte-callout-danger' : 'lte-alert lte-alert-danger',
+        'warning' => $callout ? 'lte-callout lte-callout-warning' : 'lte-alert lte-alert-warning',
+        'info' => $callout ? 'lte-callout lte-callout-info' : 'lte-alert lte-alert-info',
+        'primary' => $callout ? 'lte-callout lte-callout-primary' : 'lte-alert lte-alert-primary',
+        'neutral' => $callout ? 'lte-callout' : 'lte-alert',
+        default => $callout ? 'lte-callout lte-callout-info' : 'lte-alert lte-alert-info',
     };
     
     // Default icons per variant
@@ -26,13 +28,13 @@
         'danger', 'error' => 'ri-error-warning-fill',
         'warning' => 'ri-alert-fill',
         'info' => 'ri-information-line',
+        'primary' => 'ri-information-line',
         'neutral' => 'ri-information-line',
         default => 'ri-information-line',
     };
     
     $alertIcon = $icon ?? $defaultIcon;
-    $borderClasses = $border ? 'border' : '';
-    $baseClasses = "$variantClasses $borderClasses rounded-lg p-4";
+    $baseClasses = "$variantClasses lte-fade-in";
 @endphp
 
 <div 
diff --git a/extensions/Servers/Proxmox/views/components/badge.blade.php b/extensions/Servers/Proxmox/views/components/badge.blade.php
index 2c2cd2cba..85b811faf 100644
--- a/extensions/Servers/Proxmox/views/components/badge.blade.php
+++ b/extensions/Servers/Proxmox/views/components/badge.blade.php
@@ -11,16 +11,16 @@
 ])
 
 @php
-    // Base classes
-    $baseClasses = 'inline-flex items-center font-medium';
+    // AdminLTE badge base class
+    $baseClasses = 'lte-badge';
     
-    // Size classes
-    $sizeClasses = match($size) {
-        'xs' => 'px-1.5 py-0.5 text-xs gap-1',
-        'sm' => 'px-2 py-0.5 text-xs gap-1',
-        'md' => 'px-2.5 py-1 text-xs gap-1.5',
-        'lg' => 'px-3 py-1 text-sm gap-1.5',
-        default => 'px-2.5 py-1 text-xs gap-1.5',
+    // Size classes - inline style adjustments
+    $sizeStyles = match($size) {
+        'xs' => 'padding: 0.2em 0.5em; font-size: 0.65em;',
+        'sm' => 'padding: 0.25em 0.55em; font-size: 0.7em;',
+        'md' => '',
+        'lg' => 'padding: 0.4em 0.75em; font-size: 0.85em;',
+        default => '',
     };
     
     // Icon size classes
@@ -41,61 +41,47 @@
         default => 'size-2',
     };
     
-    // Variant classes
+    // AdminLTE variant classes
     $variantClasses = match($variant) {
-        'success' => $outline 
-            ? 'border border-success/50 text-success bg-transparent'
-            : 'bg-success/10 text-success border border-success/20',
-        'danger' => $outline
-            ? 'border border-danger/50 text-danger bg-transparent'
-            : 'bg-danger/10 text-danger border border-danger/20',
-        'warning' => $outline
-            ? 'border border-warning/50 text-warning bg-transparent'
-            : 'bg-warning/10 text-warning border border-warning/20',
-        'info' => $outline
-            ? 'border border-info/50 text-info bg-transparent'
-            : 'bg-info/10 text-info border border-info/20',
-        'primary' => $outline
-            ? 'border border-primary/50 text-primary bg-transparent'
-            : 'bg-primary/10 text-primary border border-primary/20',
-        'secondary' => $outline
-            ? 'border border-secondary/50 text-secondary bg-transparent'
-            : 'bg-secondary/10 text-secondary border border-secondary/20',
-        'neutral' => $outline
-            ? 'border border-neutral/50 text-base/70 bg-transparent'
-            : 'bg-neutral/10 text-base/70 border border-neutral/20',
-        default => $outline
-            ? 'border border-neutral/50 text-base/70 bg-transparent'
-            : 'bg-neutral/10 text-base/70 border border-neutral/20',
+        'success' => 'lte-badge-success',
+        'danger' => 'lte-badge-danger',
+        'warning' => 'lte-badge-warning',
+        'info' => 'lte-badge-info',
+        'primary' => 'lte-badge-primary',
+        'secondary' => 'lte-badge-secondary',
+        'neutral' => 'lte-badge-light',
+        default => 'lte-badge-secondary',
     };
     
-    // Dot color classes
+    // Dot color classes - AdminLTE colors
     $dotColorClasses = match($variant) {
-        'success' => 'bg-success',
-        'danger' => 'bg-danger',
-        'warning' => 'bg-warning',
-        'info' => 'bg-info',
-        'primary' => 'bg-primary',
-        'secondary' => 'bg-secondary',
-        'neutral' => 'bg-base/50',
-        default => 'bg-base/50',
-    };
-    
-    // Rounded classes
-    $roundedClasses = match($rounded) {
-        'none' => 'rounded-none',
-        'sm' => 'rounded-sm',
-        'md' => 'rounded-md',
-        'lg' => 'rounded-lg',
-        'full' => 'rounded-full',
-        default => 'rounded-full',
+        'success' => 'lte-bg-success',
+        'danger' => 'lte-bg-danger',
+        'warning' => 'lte-bg-warning',
+        'info' => 'lte-bg-info',
+        'primary' => 'lte-bg-primary',
+        'secondary' => 'lte-bg-secondary',
+        'neutral' => 'lte-bg-light',
+        default => 'lte-bg-secondary',
     };
     
     // Combined classes
-    $classes = "$baseClasses $sizeClasses $variantClasses $roundedClasses";
+    $classes = "$baseClasses $variantClasses";
+    
+    // Border radius style
+    $borderRadius = match($rounded) {
+        'none' => 'border-radius: 0;',
+        'sm' => 'border-radius: 0.125rem;',
+        'md' => 'border-radius: 0.25rem;',
+        'lg' => 'border-radius: 0.375rem;',
+        'full' => 'border-radius: 9999px;',
+        default => 'border-radius: 9999px;',
+    };
+    
+    $styles = trim("$sizeStyles $borderRadius");
 @endphp
 
-<span {{ $attributes->merge(['class' => $classes]) }}>
+<span {{ $attributes->merge(['class' => $classes]) }} @if($styles) style="{{ $styles }}" @endif>
     {{-- Dot indicator --}}
     @if($dot)
         <span class="{{ $dotSizeClasses }} {{ $dotColorClasses }} rounded-full {{ $pulse ? 'animate-pulse' : '' }}"></span>
diff --git a/extensions/Servers/Proxmox/views/components/button.blade.php b/extensions/Servers/Proxmox/views/components/button.blade.php
index cb5a8f3a5..caa90c1a7 100644
--- a/extensions/Servers/Proxmox/views/components/button.blade.php
+++ b/extensions/Servers/Proxmox/views/components/button.blade.php
@@ -14,17 +14,17 @@
 ])
 
 @php
-    // Base classes
-    $baseClasses = 'inline-flex items-center justify-center font-semibold transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed';
+    // AdminLTE button base class
+    $baseClasses = 'lte-btn';
     
-    // Size classes
+    // Size classes - AdminLTE style
     $sizeClasses = match($size) {
-        'xs' => 'px-2 py-1 text-xs gap-1',
-        'sm' => 'px-3 py-1.5 text-sm gap-1.5',
-        'md' => 'px-4 py-2 text-sm gap-2',
-        'lg' => 'px-5 py-2.5 text-base gap-2',
-        'xl' => 'px-6 py-3 text-base gap-2.5',
-        default => 'px-4 py-2 text-sm gap-2',
+        'xs' => 'lte-btn-sm',
+        'sm' => 'lte-btn-sm',
+        'md' => '',
+        'lg' => 'lte-btn-lg',
+        'xl' => 'lte-btn-lg',
+        default => '',
     };
     
     // Icon size classes
@@ -37,72 +37,43 @@
         default => 'size-4',
     };
     
-    // Variant classes
+    // Variant classes - AdminLTE style
     $variantClasses = match($variant) {
-        'primary' => $outline 
-            ? 'border-2 border-primary text-primary hover:bg-primary hover:text-white focus:ring-primary/50'
-            : 'bg-primary text-white hover:bg-primary/90 focus:ring-primary/50',
-        'secondary' => $outline
-            ? 'border-2 border-secondary text-secondary hover:bg-secondary hover:text-white focus:ring-secondary/50'
-            : 'bg-secondary text-white hover:bg-secondary/90 focus:ring-secondary/50',
-        'success' => $outline
-            ? 'border-2 border-success text-success hover:bg-success hover:text-white focus:ring-success/50'
-            : 'bg-success text-white hover:bg-success/90 focus:ring-success/50',
-        'danger' => $outline
-            ? 'border-2 border-danger text-danger hover:bg-danger hover:text-white focus:ring-danger/50'
-            : 'bg-danger text-white hover:bg-danger/90 focus:ring-danger/50',
-        'warning' => $outline
-            ? 'border-2 border-warning text-warning hover:bg-warning hover:text-white focus:ring-warning/50'
-            : 'bg-warning text-white hover:bg-warning/90 focus:ring-warning/50',
-        'info' => $outline
-            ? 'border-2 border-info text-info hover:bg-info hover:text-white focus:ring-info/50'
-            : 'bg-info text-white hover:bg-info/90 focus:ring-info/50',
-        'ghost' => 'text-base/70 hover:text-base/90 hover:bg-neutral/10 focus:ring-neutral/50',
-        'link' => 'text-primary hover:text-primary/80 underline-offset-4 hover:underline focus:ring-primary/50 p-0',
-        'neutral' => $outline
-            ? 'border border-neutral/30 text-base/70 hover:bg-neutral/10 hover:text-base/90 focus:ring-neutral/50'
-            : 'bg-neutral/10 text-base/80 hover:bg-neutral/20 focus:ring-neutral/50',
-        default => $outline 
-            ? 'border-2 border-primary text-primary hover:bg-primary hover:text-white focus:ring-primary/50'
-            : 'bg-primary text-white hover:bg-primary/90 focus:ring-primary/50',
-    };
-    
-    // Rounded classes
-    $roundedClasses = match($rounded) {
-        'none' => 'rounded-none',
-        'sm' => 'rounded-sm',
-        'md' => 'rounded-md',
-        'lg' => 'rounded-lg',
-        'xl' => 'rounded-xl',
-        'full' => 'rounded-full',
-        default => 'rounded-lg',
+        'primary' => $outline ? 'lte-btn-outline-primary' : 'lte-btn-primary',
+        'secondary' => $outline ? 'lte-btn-outline-secondary' : 'lte-btn-secondary',
+        'success' => $outline ? 'lte-btn-outline-success' : 'lte-btn-success',
+        'danger' => $outline ? 'lte-btn-outline-danger' : 'lte-btn-danger',
+        'warning' => 'lte-btn-warning',
+        'info' => 'lte-btn-info',
+        'ghost' => 'lte-btn-outline-secondary',
+        'link' => 'lte-text-primary',
+        'neutral' => $outline ? 'lte-btn-outline-secondary' : 'lte-btn-secondary',
+        default => $outline ? 'lte-btn-outline-primary' : 'lte-btn-primary',
     };
     
     // Full width
     $widthClasses = $fullWidth ? 'w-full' : '';
     
     // Combined classes
-    $classes = "$baseClasses $sizeClasses $variantClasses $roundedClasses $widthClasses";
+    $classes = trim("$baseClasses $sizeClasses $variantClasses $widthClasses");
     
     // Determine tag
     $tag = $href ? 'a' : 'button';
 @endphp
 
 @if($href)
-    <a href="{{ $href }}" {{ $attributes->merge(['class' => $classes]) }}>
+    <a href="{{ $href }}" {{ $attributes->merge(['class' => $classes]) }} style="border-radius: 0.375rem;">
 @else
     <button 
         type="{{ $type }}" 
         {{ $disabled || $loading ? 'disabled' : '' }}
         {{ $attributes->merge(['class' => $classes]) }}
+        style="border-radius: 0.375rem;"
     >
 @endif
 
     @if($loading)
-        <svg class="animate-spin {{ $iconSizeClasses }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-        </svg>
+        <span class="lte-spinner lte-spinner-sm" style="margin-right: 0.5rem;"></span>
     @elseif($icon && $iconPosition === 'left')
         <x-dynamic-component :component="$icon" class="{{ $iconSizeClasses }}" />
     @endif
diff --git a/extensions/Servers/Proxmox/views/components/card.blade.php b/extensions/Servers/Proxmox/views/components/card.blade.php
index d10f93a51..a1d68ccd9 100644
--- a/extensions/Servers/Proxmox/views/components/card.blade.php
+++ b/extensions/Servers/Proxmox/views/components/card.blade.php
@@ -3,19 +3,29 @@
     'subtitle' => null,
     'icon' => null,
     'iconClass' => 'size-5',
+    'iconColor' => 'lte-text-primary',
     'actions' => null,
     'padding' => true,
     'flush' => false,
     'collapsible' => false,
     'collapsed' => false,
     'storageKey' => null,
+    'variant' => null,
+    'outline' => false,
 ])
 
 @php
-    $cardClasses = 'bg-background-secondary rounded-xl border border-neutral/20 shadow-sm';
-    $headerClasses = 'flex items-center justify-between gap-4';
-    $bodyClasses = $padding ? 'p-5' : '';
-    $headerPadding = $flush ? 'px-5 py-4' : ($padding ? 'pb-4' : 'p-5 pb-4');
+    // AdminLTE Card variant classes
+    $variantClasses = match($variant) {
+        'primary' => $outline ? 'lte-card-outline-primary' : 'lte-card-primary',
+        'success' => $outline ? 'lte-card-outline-success' : 'lte-card-success',
+        'warning' => $outline ? 'lte-card-outline-warning' : 'lte-card-warning',
+        'danger' => $outline ? 'lte-card-outline-danger' : 'lte-card-danger',
+        'info' => $outline ? 'lte-card-outline-info' : 'lte-card-info',
+        default => '',
+    };
+    
+    $cardClasses = "lte-card lte-slide-in-up $variantClasses";
 @endphp
 
 <div {{ $attributes->merge(['class' => $cardClasses]) }}
@@ -37,32 +47,40 @@
     @endif
 >
     @if($title || $icon || $actions || isset($header))
-        <div class="{{ $headerPadding }} {{ $headerClasses }} border-b border-neutral/10">
-            <div class="flex items-center gap-3">
+        <div class="lte-card-header">
+            <h3 class="lte-card-title">
                 @if($icon)
-                    <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
-                        <x-dynamic-component :component="$icon" class="{{ $iconClass }} text-primary" />
-                    </div>
+                    <span class="lte-info-box-icon lte-bg-light rounded" style="width: 36px; height: 36px; font-size: 1rem;">
+                        <x-dynamic-component :component="$icon" class="{{ $iconClass }} {{ $iconColor }}" />
+                    </span>
                 @endif
-                <div class="flex flex-col gap-0.5">
-                    @if($title)
-                        <h3 class="text-base font-semibold text-base/90">{{ $title }}</h3>
-                    @endif
+                <span>
+                    {{ $title }}
                     @if($subtitle)
-                        <p class="text-sm text-base/60">{{ $subtitle }}</p>
+                        <small class="lte-text-muted d-block" style="font-size: 0.8rem; font-weight: normal;">{{ $subtitle }}</small>
                     @endif
-                </div>
-            </div>
-            <div class="flex items-center gap-2">
+                </span>
+            </h3>
+            @if($actions || $collapsible)
+            <div class="lte-card-tools">
                 @if($actions)
                     {{ $actions }}
                 @endif
                 @if($collapsible)
-                    <button @click="toggle()" type="button" class="text-base/50 hover:text-base/70 transition-colors p-1 rounded-lg hover:bg-neutral/10">
-                        <x-ri-arrow-down-s-line x-bind:class="isCollapsed ? 'size-5 transition-transform duration-200 rotate-180' : 'size-5 transition-transform duration-200'" />
+                    <button 
+                        type="button" 
+                        @click="toggle()"
+                        class="lte-btn lte-btn-sm lte-btn-outline-secondary"
+                        style="padding: 0.25rem 0.5rem;"
+                    >
+                        <x-ri-arrow-down-s-line 
+                            class="size-4 transition-transform duration-200"
+                            x-bind:class="isCollapsed ? 'rotate-180' : ''" 
+                        />
                     </button>
                 @endif
             </div>
+            @endif
             @if(isset($header))
                 {{ $header }}
             @endif
@@ -70,17 +88,26 @@
     @endif
 
     @if($collapsible)
-        <div x-show="!isCollapsed" x-collapse x-cloak class="{{ $bodyClasses }}">
+        <div 
+            class="lte-card-body"
+            x-show="!isCollapsed"
+            x-transition:enter="transition ease-out duration-200"
+            x-transition:enter-start="opacity-0"
+            x-transition:enter-end="opacity-100"
+            x-transition:leave="transition ease-in duration-150"
+            x-transition:leave-start="opacity-100"
+            x-transition:leave-end="opacity-0"
+        >
             {{ $slot }}
         </div>
     @else
-        <div class="{{ $bodyClasses }}">
+        <div class="lte-card-body">
             {{ $slot }}
         </div>
     @endif
 
     @if(isset($footer))
-        <div class="px-5 py-4 border-t border-neutral/10 bg-neutral/5 rounded-b-xl">
+        <div class="lte-card-footer">
             {{ $footer }}
         </div>
     @endif
diff --git a/extensions/Servers/Proxmox/views/components/input.blade.php b/extensions/Servers/Proxmox/views/components/input.blade.php
index 8aaedd821..6e9b6708f 100644
--- a/extensions/Servers/Proxmox/views/components/input.blade.php
+++ b/extensions/Servers/Proxmox/views/components/input.blade.php
@@ -19,12 +19,12 @@
 @php
     $inputId = $id ?? $name ?? Str::random(8);
     
-    // Size classes
+    // AdminLTE size classes
     $sizeClasses = match($size) {
-        'sm' => 'px-3 py-1.5 text-sm',
-        'md' => 'px-4 py-2 text-sm',
-        'lg' => 'px-4 py-2.5 text-base',
-        default => 'px-4 py-2 text-sm',
+        'sm' => 'lte-form-control-sm',
+        'md' => '',
+        'lg' => 'lte-form-control-lg',
+        default => '',
     };
     
     $iconSizeClasses = match($size) {
@@ -34,47 +34,61 @@
         default => 'size-4',
     };
     
-    // Input base classes
-    $baseClasses = 'w-full bg-background border rounded-lg transition-all duration-200 outline-none';
-    $focusClasses = 'focus:ring-2 focus:ring-primary/20 focus:border-primary';
-    $disabledClasses = $disabled ? 'opacity-50 cursor-not-allowed bg-neutral/5' : '';
-    $errorClasses = $error ? 'border-danger focus:ring-danger/20 focus:border-danger' : 'border-neutral/30';
-    
-    // Padding adjustments for icons/affixes
-    $paddingLeft = ($icon && $iconPosition === 'left') || $prefix ? 'pl-10' : '';
-    $paddingRight = ($icon && $iconPosition === 'right') || $suffix ? 'pr-10' : '';
-    
-    $inputClasses = "$baseClasses $sizeClasses $focusClasses $disabledClasses $errorClasses $paddingLeft $paddingRight";
+    // AdminLTE input classes
+    $inputClasses = "lte-form-control $sizeClasses";
+    if ($error) {
+        $inputClasses .= ' is-invalid';
+    }
 @endphp
 
-<div {{ $attributes->only('class')->merge(['class' => 'flex flex-col gap-1.5']) }}>
+<div {{ $attributes->only('class')->merge(['class' => 'mb-3']) }}>
     {{-- Label --}}
     @if($label)
-        <label for="{{ $inputId }}" class="text-sm font-medium text-base/80">
+        <label for="{{ $inputId }}" class="form-label" style="display: block; margin-bottom: 0.5rem; font-weight: 500;">
             {{ $label }}
             @if($required)
-                <span class="text-danger">*</span>
+                <span class="lte-text-danger">*</span>
             @endif
         </label>
     @endif
     
     {{-- Input wrapper --}}
-    <div class="relative">
-        {{-- Left icon --}}
-        @if($icon && $iconPosition === 'left')
-            <div class="absolute left-3 top-1/2 -translate-y-1/2 text-base/50 pointer-events-none">
-                <x-dynamic-component :component="$icon" class="{{ $iconSizeClasses }}" />
-            </div>
-        @endif
-        
-        {{-- Prefix --}}
-        @if($prefix)
-            <div class="absolute left-3 top-1/2 -translate-y-1/2 text-base/50 text-sm pointer-events-none">
-                {{ $prefix }}
-            </div>
-        @endif
-        
-        {{-- Input --}}
+    @if($icon || $prefix || $suffix)
+        <div class="lte-input-group">
+            {{-- Left icon/prefix --}}
+            @if($icon && $iconPosition === 'left')
+                <span class="lte-input-group-text">
+                    <x-dynamic-component :component="$icon" class="{{ $iconSizeClasses }}" />
+                </span>
+            @endif
+            @if($prefix)
+                <span class="lte-input-group-text">{{ $prefix }}</span>
+            @endif
+            
+            {{-- Input --}}
+            <input 
+                type="{{ $type }}"
+                id="{{ $inputId }}"
+                @if($name) name="{{ $name }}" @endif
+                @if($placeholder) placeholder="{{ $placeholder }}" @endif
+                @if($required) required @endif
+                @if($disabled) disabled @endif
+                @if($readonly) readonly @endif
+                {{ $attributes->except('class')->merge(['class' => $inputClasses]) }}
+            >
+            
+            {{-- Right icon/suffix --}}
+            @if($icon && $iconPosition === 'right')
+                <span class="lte-input-group-text">
+                    <x-dynamic-component :component="$icon" class="{{ $iconSizeClasses }}" />
+                </span>
+            @endif
+            @if($suffix)
+                <span class="lte-input-group-text">{{ $suffix }}</span>
+            @endif
+        </div>
+    @else
+        {{-- Simple input without addon --}}
         <input 
             type="{{ $type }}"
             id="{{ $inputId }}"
@@ -85,32 +99,18 @@
             @if($readonly) readonly @endif
             {{ $attributes->except('class')->merge(['class' => $inputClasses]) }}
         >
-        
-        {{-- Right icon --}}
-        @if($icon && $iconPosition === 'right')
-            <div class="absolute right-3 top-1/2 -translate-y-1/2 text-base/50 pointer-events-none">
-                <x-dynamic-component :component="$icon" class="{{ $iconSizeClasses }}" />
-            </div>
-        @endif
-        
-        {{-- Suffix --}}
-        @if($suffix)
-            <div class="absolute right-3 top-1/2 -translate-y-1/2 text-base/50 text-sm pointer-events-none">
-                {{ $suffix }}
-            </div>
-        @endif
-    </div>
+    @endif
     
     {{-- Hint text --}}
     @if($hint && !$error)
-        <p class="text-xs text-base/60">{{ $hint }}</p>
+        <small class="lte-text-muted" style="display: block; margin-top: 0.25rem;">{{ $hint }}</small>
     @endif
     
     {{-- Error message --}}
     @if($error)
-        <p class="text-xs text-danger flex items-center gap-1">
+        <div class="invalid-feedback" style="display: flex; align-items: center; gap: 0.25rem; margin-top: 0.25rem; color: var(--lte-danger);">
             <x-ri-error-warning-line class="size-3.5" />
             {{ $error }}
-        </p>
+        </div>
     @endif
 </div>
diff --git a/extensions/Servers/Proxmox/views/components/layout.blade.php b/extensions/Servers/Proxmox/views/components/layout.blade.php
index 6637b92e1..6c417356e 100644
--- a/extensions/Servers/Proxmox/views/components/layout.blade.php
+++ b/extensions/Servers/Proxmox/views/components/layout.blade.php
@@ -1231,12 +1231,10 @@
                     <div class="hidden lg:flex flex-row gap-2 ml-auto justify-end items-center">
                         <button wire:click="do('start')" 
                             wire:loading.attr="disabled" 
-                            wire:loading.class="opacity-50 cursor-not-allowed"
                             @if($vmStatus !== 'stopped') disabled @endif
-                            class="inline-flex items-center gap-2 px-4 py-2 bg-success hover:bg-success/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-success">
-                            <span wire:loading wire:target="do('start')" class="animate-spin">
-                                <x-ri-loader-4-line class="size-4" />
-                            </span>
+                            class="lte-btn lte-btn-success"
+                            style="border-radius: 0.375rem;">
+                            <span wire:loading wire:target="do('start')" class="lte-spinner lte-spinner-sm" style="margin-right: 0.5rem;"></span>
                             <x-ri-play-fill wire:loading.remove wire:target="do('start')" class="size-4" />
                             <span wire:loading.remove wire:target="do('start')">Start</span>
                             <span wire:loading wire:target="do('start')">Starting...</span>
@@ -1244,12 +1242,10 @@
                         <div x-show="isAdvancedView" x-transition>
                             <button wire:click="do('shutdown')" 
                                 wire:loading.attr="disabled" 
-                                wire:loading.class="opacity-50 cursor-not-allowed"
                                 @if($vmStatus !== 'running') disabled @endif
-                                class="inline-flex items-center gap-2 px-4 py-2 bg-warning hover:bg-warning/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-warning">
-                                <span wire:loading wire:target="do('shutdown')" class="animate-spin">
-                                    <x-ri-loader-4-line class="size-4" />
-                                </span>
+                                class="lte-btn lte-btn-warning"
+                                style="border-radius: 0.375rem;">
+                                <span wire:loading wire:target="do('shutdown')" class="lte-spinner lte-spinner-sm" style="margin-right: 0.5rem;"></span>
                                 <x-ri-stop-fill wire:loading.remove wire:target="do('shutdown')" class="size-4" />
                                 <span wire:loading.remove wire:target="do('shutdown')">Stop (ACPI)</span>
                                 <span wire:loading wire:target="do('shutdown')">Stopping...</span>
@@ -1258,12 +1254,10 @@
                         <div x-show="isAdvancedView" x-transition>
                             <button wire:click="do('reboot')" 
                                 wire:loading.attr="disabled" 
-                                wire:loading.class="opacity-50 cursor-not-allowed"
                                 @if($vmStatus !== 'running') disabled @endif
-                                class="inline-flex items-center gap-2 px-4 py-2 bg-info hover:bg-info/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-info">
-                                <span wire:loading wire:target="do('reboot')" class="animate-spin">
-                                    <x-ri-loader-4-line class="size-4" />
-                                </span>
+                                class="lte-btn lte-btn-info"
+                                style="border-radius: 0.375rem;">
+                                <span wire:loading wire:target="do('reboot')" class="lte-spinner lte-spinner-sm" style="margin-right: 0.5rem;"></span>
                                 <x-ri-restart-line wire:loading.remove wire:target="do('reboot')" class="size-4" />
                                 <span wire:loading.remove wire:target="do('reboot')">Reboot (ACPI)</span>
                                 <span wire:loading wire:target="do('reboot')">Rebooting...</span>
@@ -1271,12 +1265,10 @@
                         </div>
                         <button wire:click="do('stop')" 
                             wire:loading.attr="disabled" 
-                            wire:loading.class="opacity-50 cursor-not-allowed"
                             @if($vmStatus !== 'running') disabled @endif
-                            class="inline-flex items-center gap-2 px-4 py-2 bg-danger hover:bg-danger/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-danger">
-                            <span wire:loading wire:target="do('stop')" class="animate-spin">
-                                <x-ri-loader-4-line class="size-4" />
-                            </span>
+                            class="lte-btn lte-btn-danger"
+                            style="border-radius: 0.375rem;">
+                            <span wire:loading wire:target="do('stop')" class="lte-spinner lte-spinner-sm" style="margin-right: 0.5rem;"></span>
                             <x-ri-shut-down-line wire:loading.remove wire:target="do('stop')" class="size-4" />
                             <span wire:loading.remove wire:target="do('stop')">Power Off</span>
                             <span wire:loading wire:target="do('stop')">Powering Off...</span>
@@ -1287,12 +1279,10 @@
                         <div class="flex flex-col gap-2 w-full">
                             <button wire:click="do('start')" 
                                 wire:loading.attr="disabled" 
-                                wire:loading.class="opacity-50 cursor-not-allowed"
                                 @if($vmStatus !== 'stopped') disabled @endif
-                                class="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-success hover:bg-success/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-success">
-                                <span wire:loading wire:target="do('start')" class="animate-spin">
-                                    <x-ri-loader-4-line class="size-4" />
-                                </span>
+                                class="lte-btn lte-btn-success"
+                                style="width: 100%; justify-content: center; border-radius: 0.375rem; padding: 0.625rem 1rem;">
+                                <span wire:loading wire:target="do('start')" class="lte-spinner lte-spinner-sm" style="margin-right: 0.5rem;"></span>
                                 <x-ri-play-fill wire:loading.remove wire:target="do('start')" class="size-4" />
                                 <span wire:loading.remove wire:target="do('start')">Start</span>
                                 <span wire:loading wire:target="do('start')">Starting...</span>
@@ -1300,12 +1290,10 @@
                             <div x-show="isAdvancedView" x-transition>
                                 <button wire:click="do('shutdown')" 
                                     wire:loading.attr="disabled" 
-                                    wire:loading.class="opacity-50 cursor-not-allowed"
                                     @if($vmStatus !== 'running') disabled @endif
-                                    class="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-warning hover:bg-warning/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-warning">
-                                    <span wire:loading wire:target="do('shutdown')" class="animate-spin">
-                                        <x-ri-loader-4-line class="size-4" />
-                                    </span>
+                                    class="lte-btn lte-btn-warning"
+                                    style="width: 100%; justify-content: center; border-radius: 0.375rem; padding: 0.625rem 1rem;">
+                                    <span wire:loading wire:target="do('shutdown')" class="lte-spinner lte-spinner-sm" style="margin-right: 0.5rem;"></span>
                                     <x-ri-stop-fill wire:loading.remove wire:target="do('shutdown')" class="size-4" />
                                     <span wire:loading.remove wire:target="do('shutdown')">Stop (ACPI)</span>
                                     <span wire:loading wire:target="do('shutdown')">Stopping...</span>
@@ -1314,12 +1302,10 @@
                             <div x-show="isAdvancedView" x-transition>
                                 <button wire:click="do('reboot')" 
                                     wire:loading.attr="disabled" 
-                                    wire:loading.class="opacity-50 cursor-not-allowed"
                                     @if($vmStatus !== 'running') disabled @endif
-                                    class="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-info hover:bg-info/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-info">
-                                    <span wire:loading wire:target="do('reboot')" class="animate-spin">
-                                        <x-ri-loader-4-line class="size-4" />
-                                    </span>
+                                    class="lte-btn lte-btn-info"
+                                    style="width: 100%; justify-content: center; border-radius: 0.375rem; padding: 0.625rem 1rem;">
+                                    <span wire:loading wire:target="do('reboot')" class="lte-spinner lte-spinner-sm" style="margin-right: 0.5rem;"></span>
                                     <x-ri-restart-line wire:loading.remove wire:target="do('reboot')" class="size-4" />
                                     <span wire:loading.remove wire:target="do('reboot')">Reboot (ACPI)</span>
                                     <span wire:loading wire:target="do('reboot')">Rebooting...</span>
@@ -1327,12 +1313,10 @@
                             </div>
                             <button wire:click="do('stop')" 
                                 wire:loading.attr="disabled" 
-                                wire:loading.class="opacity-50 cursor-not-allowed"
                                 @if($vmStatus !== 'running') disabled @endif
-                                class="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-danger hover:bg-danger/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-danger">
-                                <span wire:loading wire:target="do('stop')" class="animate-spin">
-                                    <x-ri-loader-4-line class="size-4" />
-                                </span>
+                                class="lte-btn lte-btn-danger"
+                                style="width: 100%; justify-content: center; border-radius: 0.375rem; padding: 0.625rem 1rem;">
+                                <span wire:loading wire:target="do('stop')" class="lte-spinner lte-spinner-sm" style="margin-right: 0.5rem;"></span>
                                 <x-ri-shut-down-line wire:loading.remove wire:target="do('stop')" class="size-4" />
                                 <span wire:loading.remove wire:target="do('stop')">Power Off</span>
                                 <span wire:loading wire:target="do('stop')">Powering Off...</span>
diff --git a/extensions/Servers/Proxmox/views/components/progress.blade.php b/extensions/Servers/Proxmox/views/components/progress.blade.php
index 584afaace..5e3ccc069 100644
--- a/extensions/Servers/Proxmox/views/components/progress.blade.php
+++ b/extensions/Servers/Proxmox/views/components/progress.blade.php
@@ -12,42 +12,49 @@
 @php
     $percentage = $max > 0 ? min(100, ($value / $max) * 100) : 0;
     
-    // Size classes
+    // AdminLTE size classes
     $sizeClasses = match($size) {
-        'xs' => 'h-1',
-        'sm' => 'h-2',
-        'md' => 'h-3',
-        'lg' => 'h-4',
-        'xl' => 'h-5',
-        default => 'h-3',
+        'xs' => 'lte-progress-xs',
+        'sm' => 'lte-progress-sm',
+        'md' => '',
+        'lg' => '',
+        'xl' => '',
+        default => '',
     };
     
-    // Variant classes for the fill
+    // Height style for non-standard sizes
+    $heightStyle = match($size) {
+        'lg' => 'height: 1.25rem;',
+        'xl' => 'height: 1.5rem;',
+        default => '',
+    };
+    
+    // AdminLTE variant classes for the fill
     $variantClasses = match($variant) {
-        'primary' => 'bg-primary',
-        'secondary' => 'bg-secondary',
-        'success' => 'bg-success',
-        'danger' => 'bg-danger',
-        'warning' => 'bg-warning',
-        'info' => 'bg-info',
-        'gradient' => 'bg-gradient-to-r from-primary to-secondary',
-        default => 'bg-primary',
+        'primary' => 'lte-bg-primary',
+        'secondary' => 'lte-bg-secondary',
+        'success' => 'lte-bg-success',
+        'danger' => 'lte-bg-danger',
+        'warning' => 'lte-bg-warning',
+        'info' => 'lte-bg-info',
+        'gradient' => 'lte-bg-gradient-primary',
+        default => 'lte-bg-primary',
     };
     
     // Dynamic color based on percentage
     if ($variant === 'auto') {
         if ($percentage >= 90) {
-            $variantClasses = 'bg-danger';
+            $variantClasses = 'lte-bg-danger';
         } elseif ($percentage >= 70) {
-            $variantClasses = 'bg-warning';
+            $variantClasses = 'lte-bg-warning';
         } else {
-            $variantClasses = 'bg-success';
+            $variantClasses = 'lte-bg-success';
         }
     }
     
-    // Animation classes
-    $animationClasses = $animated ? 'transition-all duration-500 ease-out' : '';
-    $stripedClasses = $striped ? 'bg-stripes' : '';
+    // Animation classes - AdminLTE style
+    $animatedClasses = $animated ? 'lte-progress-bar-animated' : '';
+    $stripedClasses = $striped ? 'lte-progress-bar-striped' : '';
 @endphp
 
 <div {{ $attributes->merge(['class' => 'flex flex-col gap-1.5']) }}>
@@ -55,19 +62,19 @@
     @if($label || $showValue)
         <div class="flex items-center justify-between text-sm">
             @if($label)
-                <span class="text-base/70 font-medium">{{ $label }}</span>
+                <span class="lte-text-muted" style="font-weight: 500;">{{ $label }}</span>
             @endif
             @if($showValue)
-                <span class="text-base/90 font-semibold">{{ number_format($percentage, 1) }}%</span>
+                <span style="font-weight: 600;">{{ number_format($percentage, 1) }}%</span>
             @endif
         </div>
     @endif
     
-    {{-- Progress bar container --}}
-    <div class="w-full bg-neutral/20 rounded-full overflow-hidden {{ $sizeClasses }}">
+    {{-- Progress bar container - AdminLTE style --}}
+    <div class="lte-progress {{ $sizeClasses }}" @if($heightStyle) style="{{ $heightStyle }}" @endif>
         {{-- Progress bar fill --}}
         <div 
-            class="{{ $sizeClasses }} {{ $variantClasses }} {{ $animationClasses }} {{ $stripedClasses }} rounded-full"
+            class="lte-progress-bar {{ $variantClasses }} {{ $animatedClasses }} {{ $stripedClasses }}"
             style="width: {{ $percentage }}%"
             role="progressbar"
             aria-valuenow="{{ $value }}"
@@ -76,27 +83,3 @@
         ></div>
     </div>
 </div>
-
-@once
-    <style>
-        .bg-stripes {
-            background-image: linear-gradient(
-                45deg,
-                rgba(255, 255, 255, 0.15) 25%,
-                transparent 25%,
-                transparent 50%,
-                rgba(255, 255, 255, 0.15) 50%,
-                rgba(255, 255, 255, 0.15) 75%,
-                transparent 75%,
-                transparent
-            );
-            background-size: 1rem 1rem;
-            animation: progress-stripes 1s linear infinite;
-        }
-        
-        @keyframes progress-stripes {
-            from { background-position: 1rem 0; }
-            to { background-position: 0 0; }
-        }
-    </style>
-@endonce
diff --git a/extensions/Servers/Proxmox/views/components/table.blade.php b/extensions/Servers/Proxmox/views/components/table.blade.php
index be00089ac..f2ec5b905 100644
--- a/extensions/Servers/Proxmox/views/components/table.blade.php
+++ b/extensions/Servers/Proxmox/views/components/table.blade.php
@@ -10,8 +10,16 @@
 ])
 
 @php
-    $tableClasses = 'w-full text-left';
-    $wrapperClasses = 'bg-background-secondary rounded-xl border border-neutral/20 shadow-sm overflow-hidden';
+    // AdminLTE table classes
+    $tableClasses = 'lte-table';
+    if ($striped) {
+        $tableClasses .= ' lte-table-striped';
+    }
+    if ($hoverable) {
+        $tableClasses .= ' lte-table-hover';
+    }
+    
+    $wrapperClasses = 'lte-card';
     
     if ($responsive) {
         $wrapperClasses .= ' overflow-x-auto';
@@ -20,37 +28,37 @@
 
 <div {{ $attributes->merge(['class' => $wrapperClasses]) }}>
     @if($loading)
-        <div class="p-8 flex flex-col items-center justify-center gap-3">
-            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
-            <p class="text-sm text-base/60">Loading data...</p>
+        <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem;">
+            <div class="lte-spinner"></div>
+            <p class="lte-text-muted" style="font-size: 0.875rem;">Loading data...</p>
         </div>
     @else
-        <table class="{{ $tableClasses }}">
+        <table class="{{ $tableClasses }}" style="width: 100%;">
             @if(isset($head))
-                <thead class="bg-neutral/5 {{ $stickyHeader ? 'sticky top-0 z-10' : '' }}">
-                    <tr class="border-b border-neutral/10">
+                <thead @if($stickyHeader) style="position: sticky; top: 0; z-index: 10;" @endif>
+                    <tr>
                         {{ $head }}
                     </tr>
                 </thead>
             @endif
 
             @if(isset($body) && $body->isNotEmpty())
-                <tbody class="divide-y divide-neutral/10">
+                <tbody>
                     {{ $body }}
                 </tbody>
             @elseif($slot->isNotEmpty())
-                <tbody class="divide-y divide-neutral/10">
+                <tbody>
                     {{ $slot }}
                 </tbody>
             @else
                 <tbody>
                     <tr>
-                        <td colspan="100" class="px-5 py-12">
-                            <div class="flex flex-col items-center justify-center gap-3 text-center">
-                                <div class="flex items-center justify-center w-14 h-14 rounded-xl bg-neutral/10">
-                                    <x-dynamic-component :component="$emptyIcon" class="size-7 text-base/40" />
+                        <td colspan="100" style="padding: 3rem 1.25rem;">
+                            <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; text-align: center;">
+                                <div class="lte-info-box-icon lte-bg-light rounded" style="width: 56px; height: 56px;">
+                                    <x-dynamic-component :component="$emptyIcon" class="size-7 lte-text-muted" />
                                 </div>
-                                <p class="text-sm text-base/60">{{ $emptyMessage }}</p>
+                                <p class="lte-text-muted" style="font-size: 0.875rem;">{{ $emptyMessage }}</p>
                             </div>
                         </td>
                     </tr>