From e7b33a2f6cf55edce15cec17a716a58338c9dd23 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 17 Dec 2025 11:24:17 -0500
Subject: [PATCH] Refactor Proxmox server views for improved UI consistency and
 usability

- Updated server card component to use new UI elements and improved layout.
- Enhanced status display with badges and better status indicators.
- Refined quick info row for server details with consistent styling.
- Reorganized server configuration statistics into stat cards for clarity.
- Improved help modals for statistics and storage management sections.
- Streamlined alerts and warnings for better user experience.
- Updated storage management view to utilize new UI components and improve readability.
---
 .../Proxmox/views/components/alert.blade.php  | 136 ++++++++++
 .../Proxmox/views/components/badge.blade.php  | 123 +++++++++
 .../Proxmox/views/components/button.blade.php | 122 +++++++++
 .../Proxmox/views/components/card.blade.php   |  87 ++++++
 .../components/dropdown-divider.blade.php     |   1 +
 .../views/components/dropdown-item.blade.php  |  41 +++
 .../views/components/dropdown.blade.php       |  54 ++++
 .../views/components/empty-state.blade.php    |  24 ++
 .../Proxmox/views/components/index.blade.php  | 203 ++++++++++++++
 .../views/components/info-list.blade.php      |  19 ++
 .../views/components/info-row.blade.php       |  55 ++++
 .../Proxmox/views/components/input.blade.php  | 116 ++++++++
 .../Proxmox/views/components/modal.blade.php  | 139 ++++++++++
 .../views/components/progress.blade.php       | 102 +++++++
 .../views/components/section-header.blade.php | 115 ++++++++
 .../views/components/spinner.blade.php        |  27 ++
 .../views/components/stat-card.blade.php      | 104 ++++++++
 .../views/components/tab-panel.blade.php      |  16 ++
 .../views/components/table-row.blade.php      |  26 ++
 .../views/components/table-td.blade.php       |  22 ++
 .../views/components/table-th.blade.php       |  42 +++
 .../Proxmox/views/components/table.blade.php  |  67 +++++
 .../Proxmox/views/components/tabs.blade.php   |  41 +++
 .../components/ui/action-button.blade.php     |  72 +++++
 .../components/ui/action-toolbar.blade.php    |  25 ++
 .../views/components/ui/alert.blade.php       | 120 +++++++++
 .../components/ui/allocation-card.blade.php   |  73 +++++
 .../views/components/ui/badge.blade.php       |  78 ++++++
 .../views/components/ui/button.blade.php      |  92 +++++++
 .../views/components/ui/card.blade.php        | 103 ++++++++
 .../components/ui/confirm-dialog.blade.php    | 116 ++++++++
 .../views/components/ui/copy-button.blade.php |  35 +++
 .../views/components/ui/copyable.blade.php    |  56 ++++
 .../components/ui/dropdown-divider.blade.php  |   5 +
 .../components/ui/dropdown-item.blade.php     |  38 +++
 .../views/components/ui/dropdown.blade.php    |  61 +++++
 .../components/ui/editable-field.blade.php    | 148 +++++++++++
 .../views/components/ui/empty-state.blade.php |  72 +++++
 .../views/components/ui/help-modal.blade.php  |  83 ++++++
 .../views/components/ui/icon-picker.blade.php | 169 ++++++++++++
 .../views/components/ui/index.blade.php       | 249 ++++++++++++++++++
 .../views/components/ui/info-row.blade.php    |  51 ++++
 .../views/components/ui/input.blade.php       |  93 +++++++
 .../views/components/ui/modal.blade.php       | 115 ++++++++
 .../ui/network-address-card.blade.php         | 191 ++++++++++++++
 .../components/ui/notice-banner.blade.php     |  98 +++++++
 .../views/components/ui/progress.blade.php    |  80 ++++++
 .../components/ui/resource-gauge.blade.php    | 103 ++++++++
 .../components/ui/section-header.blade.php    | 109 ++++++++
 .../views/components/ui/select.blade.php      |  67 +++++
 .../components/ui/server-status.blade.php     | 139 ++++++++++
 .../views/components/ui/spinner.blade.php     |  46 ++++
 .../views/components/ui/stat-card.blade.php   |  75 ++++++
 .../views/components/ui/tab-panel.blade.php   |  17 ++
 .../views/components/ui/table-row.blade.php   |  36 +++
 .../views/components/ui/table-td.blade.php    |  31 +++
 .../views/components/ui/table-th.blade.php    |  50 ++++
 .../views/components/ui/table.blade.php       |  53 ++++
 .../views/components/ui/tabs.blade.php        |  82 ++++++
 .../views/components/ui/toggle.blade.php      |  45 ++++
 .../views/components/ui/tooltip.blade.php     |  56 ++++
 .../Servers/Proxmox/views/firewall.blade.php  | 237 ++++++-----------
 .../Servers/Proxmox/views/index.blade.php     |  23 +-
 .../Servers/Proxmox/views/network.blade.php   |  72 ++---
 .../Servers/Proxmox/views/overview.blade.php  | 138 +++-------
 .../Servers/Proxmox/views/server.blade.php    | 160 +++++------
 .../Proxmox/views/statistics.blade.php        |  93 ++-----
 .../Servers/Proxmox/views/storage.blade.php   | 240 +++++------------
 68 files changed, 5127 insertions(+), 650 deletions(-)
 create mode 100644 extensions/Servers/Proxmox/views/components/alert.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/badge.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/button.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/card.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/dropdown-divider.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/dropdown-item.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/dropdown.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/empty-state.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/index.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/info-list.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/info-row.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/input.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/modal.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/progress.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/section-header.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/spinner.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/stat-card.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/tab-panel.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/table-row.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/table-td.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/table-th.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/table.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/tabs.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/action-button.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/action-toolbar.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/alert.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/allocation-card.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/badge.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/button.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/card.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/confirm-dialog.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/copy-button.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/copyable.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/dropdown-divider.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/dropdown-item.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/dropdown.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/editable-field.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/empty-state.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/help-modal.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/icon-picker.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/index.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/info-row.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/input.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/modal.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/network-address-card.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/notice-banner.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/progress.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/resource-gauge.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/section-header.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/select.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/server-status.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/spinner.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/stat-card.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/tab-panel.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/table-row.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/table-td.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/table-th.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/table.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/tabs.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/toggle.blade.php
 create mode 100644 extensions/Servers/Proxmox/views/components/ui/tooltip.blade.php

diff --git a/extensions/Servers/Proxmox/views/components/alert.blade.php b/extensions/Servers/Proxmox/views/components/alert.blade.php
new file mode 100644
index 000000000..b3f22a34f
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/alert.blade.php
@@ -0,0 +1,136 @@
+@props([
+    'variant' => 'info',
+    'title' => null,
+    'icon' => null,
+    'dismissible' => false,
+    'collapsible' => false,
+    'collapsed' => false,
+    'storageKey' => null,
+    'border' => true,
+])
+
+@php
+    // 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',
+    };
+    
+    // Default icons per variant
+    $defaultIcon = match($variant) {
+        'success' => 'ri-checkbox-circle-fill',
+        'danger', 'error' => 'ri-error-warning-fill',
+        'warning' => 'ri-alert-fill',
+        'info' => 'ri-information-line',
+        'neutral' => 'ri-information-line',
+        default => 'ri-information-line',
+    };
+    
+    $alertIcon = $icon ?? $defaultIcon;
+    $borderClasses = $border ? 'border' : '';
+    $baseClasses = "$variantClasses $borderClasses rounded-lg p-4";
+@endphp
+
+<div 
+    {{ $attributes->merge(['class' => $baseClasses]) }}
+    @if($dismissible || $collapsible)
+        x-data="{
+            show: true,
+            isCollapsed: {{ $collapsed ? 'true' : 'false' }},
+            init() {
+                @if($storageKey)
+                    @if($dismissible)
+                        this.show = localStorage.getItem('{{ $storageKey }}-dismissed') !== 'true';
+                    @endif
+                    @if($collapsible)
+                        this.isCollapsed = localStorage.getItem('{{ $storageKey }}-collapsed') === 'true';
+                    @endif
+                @endif
+            },
+            dismiss() {
+                this.show = false;
+                @if($storageKey)
+                    localStorage.setItem('{{ $storageKey }}-dismissed', 'true');
+                @endif
+            },
+            toggle() {
+                this.isCollapsed = !this.isCollapsed;
+                @if($storageKey)
+                    localStorage.setItem('{{ $storageKey }}-collapsed', this.isCollapsed);
+                @endif
+            }
+        }"
+        x-show="show"
+        x-transition:enter="transition ease-out duration-300"
+        x-transition:enter-start="opacity-0 transform -translate-y-2"
+        x-transition:enter-end="opacity-100 transform translate-y-0"
+        x-transition:leave="transition ease-in duration-200"
+        x-transition:leave-start="opacity-100"
+        x-transition:leave-end="opacity-0"
+    @endif
+>
+    <div class="flex items-start gap-3">
+        {{-- Icon --}}
+        @if($alertIcon)
+            <x-dynamic-component :component="$alertIcon" class="size-5 flex-shrink-0 mt-0.5" />
+        @endif
+        
+        {{-- Content --}}
+        <div class="flex-1 min-w-0">
+            {{-- Header with title and controls --}}
+            @if($title || $dismissible || $collapsible)
+                <div class="flex items-center justify-between gap-2 mb-1">
+                    @if($title)
+                        <h3 class="text-sm font-semibold">{{ $title }}</h3>
+                    @endif
+                    
+                    <div class="flex items-center gap-1">
+                        @if($collapsible)
+                            <button 
+                                @click="toggle()" 
+                                type="button" 
+                                class="opacity-60 hover:opacity-100 transition-opacity p-0.5"
+                            >
+                                <x-ri-arrow-down-s-line 
+                                    x-bind:class="isCollapsed ? 'size-4 transition-transform duration-200 rotate-180' : 'size-4 transition-transform duration-200'" 
+                                />
+                            </button>
+                        @endif
+                        
+                        @if($dismissible)
+                            <button 
+                                @click="dismiss()" 
+                                type="button" 
+                                class="opacity-60 hover:opacity-100 transition-opacity p-0.5"
+                            >
+                                <x-ri-close-line class="size-4" />
+                            </button>
+                        @endif
+                    </div>
+                </div>
+            @endif
+            
+            {{-- Body --}}
+            @if($collapsible)
+                <div x-show="!isCollapsed" x-collapse x-cloak class="text-sm opacity-90">
+                    {{ $slot }}
+                </div>
+            @else
+                <div class="text-sm opacity-90">
+                    {{ $slot }}
+                </div>
+            @endif
+        </div>
+    </div>
+    
+    {{-- Actions slot --}}
+    @if(isset($actions))
+        <div class="mt-4 flex items-center gap-2">
+            {{ $actions }}
+        </div>
+    @endif
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/badge.blade.php b/extensions/Servers/Proxmox/views/components/badge.blade.php
new file mode 100644
index 000000000..2c2cd2cba
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/badge.blade.php
@@ -0,0 +1,123 @@
+@props([
+    'variant' => 'neutral',
+    'size' => 'md',
+    'rounded' => 'full',
+    'dot' => false,
+    'pulse' => false,
+    'icon' => null,
+    'iconPosition' => 'left',
+    'removable' => false,
+    'outline' => false,
+])
+
+@php
+    // Base classes
+    $baseClasses = 'inline-flex items-center font-medium';
+    
+    // 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',
+    };
+    
+    // Icon size classes
+    $iconSizeClasses = match($size) {
+        'xs' => 'size-2.5',
+        'sm' => 'size-3',
+        'md' => 'size-3.5',
+        'lg' => 'size-4',
+        default => 'size-3.5',
+    };
+    
+    // Dot size classes
+    $dotSizeClasses = match($size) {
+        'xs' => 'size-1.5',
+        'sm' => 'size-1.5',
+        'md' => 'size-2',
+        'lg' => 'size-2',
+        default => 'size-2',
+    };
+    
+    // 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',
+    };
+    
+    // Dot color classes
+    $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',
+    };
+    
+    // Combined classes
+    $classes = "$baseClasses $sizeClasses $variantClasses $roundedClasses";
+@endphp
+
+<span {{ $attributes->merge(['class' => $classes]) }}>
+    {{-- Dot indicator --}}
+    @if($dot)
+        <span class="{{ $dotSizeClasses }} {{ $dotColorClasses }} rounded-full {{ $pulse ? 'animate-pulse' : '' }}"></span>
+    @endif
+    
+    {{-- Left icon --}}
+    @if($icon && $iconPosition === 'left')
+        <x-dynamic-component :component="$icon" class="{{ $iconSizeClasses }}" />
+    @endif
+    
+    {{-- Content --}}
+    {{ $slot }}
+    
+    {{-- Right icon --}}
+    @if($icon && $iconPosition === 'right')
+        <x-dynamic-component :component="$icon" class="{{ $iconSizeClasses }}" />
+    @endif
+    
+    {{-- Remove button --}}
+    @if($removable)
+        <button type="button" class="ml-1 -mr-1 hover:opacity-70 transition-opacity">
+            <x-ri-close-line class="{{ $iconSizeClasses }}" />
+        </button>
+    @endif
+</span>
diff --git a/extensions/Servers/Proxmox/views/components/button.blade.php b/extensions/Servers/Proxmox/views/components/button.blade.php
new file mode 100644
index 000000000..cb5a8f3a5
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/button.blade.php
@@ -0,0 +1,122 @@
+@props([
+    'type' => 'button',
+    'variant' => 'primary',
+    'size' => 'md',
+    'icon' => null,
+    'iconPosition' => 'left',
+    'iconClass' => null,
+    'loading' => false,
+    'disabled' => false,
+    'fullWidth' => false,
+    'href' => null,
+    'outline' => false,
+    'rounded' => 'lg',
+])
+
+@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';
+    
+    // Size classes
+    $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',
+    };
+    
+    // Icon size classes
+    $iconSizeClasses = $iconClass ?? match($size) {
+        'xs' => 'size-3',
+        'sm' => 'size-3.5',
+        'md' => 'size-4',
+        'lg' => 'size-5',
+        'xl' => 'size-5',
+        default => 'size-4',
+    };
+    
+    // Variant classes
+    $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',
+    };
+    
+    // Full width
+    $widthClasses = $fullWidth ? 'w-full' : '';
+    
+    // Combined classes
+    $classes = "$baseClasses $sizeClasses $variantClasses $roundedClasses $widthClasses";
+    
+    // Determine tag
+    $tag = $href ? 'a' : 'button';
+@endphp
+
+@if($href)
+    <a href="{{ $href }}" {{ $attributes->merge(['class' => $classes]) }}>
+@else
+    <button 
+        type="{{ $type }}" 
+        {{ $disabled || $loading ? 'disabled' : '' }}
+        {{ $attributes->merge(['class' => $classes]) }}
+    >
+@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>
+    @elseif($icon && $iconPosition === 'left')
+        <x-dynamic-component :component="$icon" class="{{ $iconSizeClasses }}" />
+    @endif
+
+    @if($slot->isNotEmpty())
+        <span>{{ $slot }}</span>
+    @endif
+
+    @if($icon && $iconPosition === 'right' && !$loading)
+        <x-dynamic-component :component="$icon" class="{{ $iconSizeClasses }}" />
+    @endif
+
+@if($href)
+    </a>
+@else
+    </button>
+@endif
diff --git a/extensions/Servers/Proxmox/views/components/card.blade.php b/extensions/Servers/Proxmox/views/components/card.blade.php
new file mode 100644
index 000000000..d10f93a51
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/card.blade.php
@@ -0,0 +1,87 @@
+@props([
+    'title' => null,
+    'subtitle' => null,
+    'icon' => null,
+    'iconClass' => 'size-5',
+    'actions' => null,
+    'padding' => true,
+    'flush' => false,
+    'collapsible' => false,
+    'collapsed' => false,
+    'storageKey' => null,
+])
+
+@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');
+@endphp
+
+<div {{ $attributes->merge(['class' => $cardClasses]) }}
+    @if($collapsible)
+        x-data="{
+            isCollapsed: {{ $collapsed ? 'true' : 'false' }},
+            init() {
+                @if($storageKey)
+                    this.isCollapsed = localStorage.getItem('{{ $storageKey }}') === 'true';
+                @endif
+            },
+            toggle() {
+                this.isCollapsed = !this.isCollapsed;
+                @if($storageKey)
+                    localStorage.setItem('{{ $storageKey }}', this.isCollapsed);
+                @endif
+            }
+        }"
+    @endif
+>
+    @if($title || $icon || $actions || isset($header))
+        <div class="{{ $headerPadding }} {{ $headerClasses }} border-b border-neutral/10">
+            <div class="flex items-center gap-3">
+                @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>
+                @endif
+                <div class="flex flex-col gap-0.5">
+                    @if($title)
+                        <h3 class="text-base font-semibold text-base/90">{{ $title }}</h3>
+                    @endif
+                    @if($subtitle)
+                        <p class="text-sm text-base/60">{{ $subtitle }}</p>
+                    @endif
+                </div>
+            </div>
+            <div class="flex items-center gap-2">
+                @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>
+                @endif
+            </div>
+            @if(isset($header))
+                {{ $header }}
+            @endif
+        </div>
+    @endif
+
+    @if($collapsible)
+        <div x-show="!isCollapsed" x-collapse x-cloak class="{{ $bodyClasses }}">
+            {{ $slot }}
+        </div>
+    @else
+        <div class="{{ $bodyClasses }}">
+            {{ $slot }}
+        </div>
+    @endif
+
+    @if(isset($footer))
+        <div class="px-5 py-4 border-t border-neutral/10 bg-neutral/5 rounded-b-xl">
+            {{ $footer }}
+        </div>
+    @endif
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/dropdown-divider.blade.php b/extensions/Servers/Proxmox/views/components/dropdown-divider.blade.php
new file mode 100644
index 000000000..957514a9f
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/dropdown-divider.blade.php
@@ -0,0 +1 @@
+<div {{ $attributes->merge(['class' => 'border-t border-neutral/10 my-1']) }}></div>
diff --git a/extensions/Servers/Proxmox/views/components/dropdown-item.blade.php b/extensions/Servers/Proxmox/views/components/dropdown-item.blade.php
new file mode 100644
index 000000000..8492699ca
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/dropdown-item.blade.php
@@ -0,0 +1,41 @@
+@props([
+    'icon' => null,
+    'iconClass' => 'size-4',
+    'href' => null,
+    'active' => false,
+    'disabled' => false,
+    'danger' => false,
+])
+
+@php
+    $tag = $href ? 'a' : 'button';
+    
+    $baseClasses = 'w-full flex items-center gap-3 px-4 py-2.5 text-sm text-left transition-colors';
+    
+    $stateClasses = match(true) {
+        $disabled => 'opacity-50 cursor-not-allowed text-base/50',
+        $danger => 'text-danger hover:bg-danger/10',
+        $active => 'bg-primary/10 text-primary font-medium',
+        default => 'text-base/80 hover:bg-neutral/10 hover:text-base/90',
+    };
+    
+    $classes = "$baseClasses $stateClasses";
+@endphp
+
+@if($href && !$disabled)
+    <a href="{{ $href }}" {{ $attributes->merge(['class' => $classes]) }}>
+@else
+    <button type="button" {{ $disabled ? 'disabled' : '' }} {{ $attributes->merge(['class' => $classes]) }}>
+@endif
+
+    @if($icon)
+        <x-dynamic-component :component="$icon" class="{{ $iconClass }} flex-shrink-0" />
+    @endif
+    
+    <span class="flex-1">{{ $slot }}</span>
+
+@if($href && !$disabled)
+    </a>
+@else
+    </button>
+@endif
diff --git a/extensions/Servers/Proxmox/views/components/dropdown.blade.php b/extensions/Servers/Proxmox/views/components/dropdown.blade.php
new file mode 100644
index 000000000..0ea180051
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/dropdown.blade.php
@@ -0,0 +1,54 @@
+@props([
+    'align' => 'left',
+    'width' => '48',
+    'contentClasses' => '',
+])
+
+@php
+    $alignClasses = match($align) {
+        'left' => 'origin-top-left left-0',
+        'right' => 'origin-top-right right-0',
+        'center' => 'origin-top left-1/2 -translate-x-1/2',
+        default => 'origin-top-left left-0',
+    };
+    
+    $widthClasses = match($width) {
+        '32' => 'w-32',
+        '40' => 'w-40',
+        '48' => 'w-48',
+        '56' => 'w-56',
+        '64' => 'w-64',
+        '72' => 'w-72',
+        'auto' => 'w-auto',
+        default => 'w-48',
+    };
+@endphp
+
+<div 
+    x-data="{ open: false }" 
+    @click.away="open = false" 
+    @close.stop="open = false"
+    {{ $attributes->merge(['class' => 'relative inline-block']) }}
+>
+    {{-- Trigger --}}
+    <div @click="open = !open" class="cursor-pointer">
+        {{ $trigger }}
+    </div>
+
+    {{-- Dropdown content --}}
+    <div
+        x-show="open"
+        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-150"
+        x-transition:leave-start="opacity-100 scale-100"
+        x-transition:leave-end="opacity-0 scale-95"
+        x-cloak
+        class="absolute z-50 mt-2 {{ $widthClasses }} {{ $alignClasses }} rounded-xl bg-background-secondary border border-neutral/20 shadow-xl overflow-hidden"
+    >
+        <div class="py-1 {{ $contentClasses }}">
+            {{ $slot }}
+        </div>
+    </div>
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/empty-state.blade.php b/extensions/Servers/Proxmox/views/components/empty-state.blade.php
new file mode 100644
index 000000000..b8afa70b5
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/empty-state.blade.php
@@ -0,0 +1,24 @@
+@props([
+    'icon' => 'ri-inbox-line',
+    'iconClass' => 'size-12',
+    'title' => 'No data found',
+    'description' => null,
+])
+
+<div {{ $attributes->merge(['class' => 'flex flex-col items-center justify-center py-12 px-6 text-center']) }}>
+    <div class="flex items-center justify-center w-20 h-20 rounded-2xl bg-neutral/10 mb-4">
+        <x-dynamic-component :component="$icon" class="{{ $iconClass }} text-base/40" />
+    </div>
+    
+    <h3 class="text-lg font-semibold text-base/80 mb-1">{{ $title }}</h3>
+    
+    @if($description)
+        <p class="text-sm text-base/60 max-w-sm">{{ $description }}</p>
+    @endif
+    
+    @if($slot->isNotEmpty())
+        <div class="mt-4">
+            {{ $slot }}
+        </div>
+    @endif
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/index.blade.php b/extensions/Servers/Proxmox/views/components/index.blade.php
new file mode 100644
index 000000000..1377ffe12
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/index.blade.php
@@ -0,0 +1,203 @@
+{{--
+    Proxmox UI Components - Index File
+    
+    This file documents all available reusable components in the Proxmox views.
+    Import components using: <x-proxmox::component-name />
+    
+    ============================================
+    LAYOUT & STRUCTURE
+    ============================================
+    
+    card.blade.php
+    ---------------
+    Generic card wrapper with consistent styling
+    Props: title, subtitle, icon, iconClass, actions, padding, flush, collapsible, collapsed, storageKey
+    Slots: default, header, actions, footer
+    
+    Example:
+    <x-proxmox::card title="Server Info" icon="ri-server-line" collapsible>
+        Content here
+    </x-proxmox::card>
+    
+    section-header.blade.php
+    ------------------------
+    Page section headers with title, subtitle, actions
+    Props: title, subtitle, icon, iconClass, helpIcon, helpTitle, helpContent, border
+    Slots: default, actions, help
+    
+    Example:
+    <x-proxmox::section-header title="Network Configuration" subtitle="Manage network settings" icon="ri-global-line">
+        <x-slot:actions>
+            <x-proxmox::button>Add Network</x-proxmox::button>
+        </x-slot:actions>
+    </x-proxmox::section-header>
+    
+    ============================================
+    DATA DISPLAY
+    ============================================
+    
+    stat-card.blade.php
+    -------------------
+    Statistics display card with icon, value, label
+    Props: label, value, icon, iconClass, iconBg, iconColor, trend, trendUp, trendLabel, suffix, prefix, loading, compact, href, clickable
+    
+    Example:
+    <x-proxmox::stat-card 
+        label="CPU Usage" 
+        value="45" 
+        suffix="%" 
+        icon="ri-cpu-line"
+        :trendUp="true"
+        trend="+5%"
+        trendLabel="vs last hour"
+    />
+    
+    table.blade.php + table-th.blade.php + table-td.blade.php + table-row.blade.php
+    --------------------------------------------------------------------------------
+    Styled table components
+    
+    Example:
+    <x-proxmox::table>
+        <x-slot:head>
+            <x-proxmox::table-th>Name</x-proxmox::table-th>
+            <x-proxmox::table-th align="right">Value</x-proxmox::table-th>
+        </x-slot:head>
+        <x-slot:body>
+            <x-proxmox::table-row>
+                <x-proxmox::table-td>Item 1</x-proxmox::table-td>
+                <x-proxmox::table-td align="right">100</x-proxmox::table-td>
+            </x-proxmox::table-row>
+        </x-slot:body>
+    </x-proxmox::table>
+    
+    info-list.blade.php + info-row.blade.php
+    ----------------------------------------
+    Key-value information display
+    
+    Example:
+    <x-proxmox::info-list title="Server Details">
+        <x-proxmox::info-row label="IP Address" value="192.168.1.100" copyable mono />
+        <x-proxmox::info-row label="Status" icon="ri-checkbox-circle-line">
+            <x-proxmox::badge variant="success">Running</x-proxmox::badge>
+        </x-proxmox::info-row>
+    </x-proxmox::info-list>
+    
+    progress.blade.php
+    ------------------
+    Progress bar component
+    Props: value, max, size, variant, label, showValue, animated, striped
+    
+    Example:
+    <x-proxmox::progress :value="75" :max="100" variant="auto" label="Disk Usage" showValue />
+    
+    empty-state.blade.php
+    ---------------------
+    Empty state placeholder
+    Props: icon, iconClass, title, description
+    
+    Example:
+    <x-proxmox::empty-state 
+        title="No backups found" 
+        description="Create your first backup to get started"
+        icon="ri-hard-drive-2-line"
+    >
+        <x-proxmox::button icon="ri-add-line">Create Backup</x-proxmox::button>
+    </x-proxmox::empty-state>
+    
+    ============================================
+    INTERACTIVE ELEMENTS
+    ============================================
+    
+    button.blade.php
+    ----------------
+    Consistent button styling
+    Props: type, variant (primary|secondary|success|danger|warning|info|ghost|link|neutral), size (xs|sm|md|lg|xl), icon, iconPosition, iconClass, loading, disabled, fullWidth, href, outline, rounded
+    
+    Example:
+    <x-proxmox::button variant="primary" icon="ri-play-line">Start Server</x-proxmox::button>
+    <x-proxmox::button variant="danger" outline icon="ri-stop-line">Stop</x-proxmox::button>
+    
+    badge.blade.php
+    ---------------
+    Status badges
+    Props: variant (success|danger|warning|info|primary|secondary|neutral), size, rounded, dot, pulse, icon, iconPosition, removable, outline
+    
+    Example:
+    <x-proxmox::badge variant="success" dot pulse>Running</x-proxmox::badge>
+    <x-proxmox::badge variant="danger" icon="ri-error-warning-line">Error</x-proxmox::badge>
+    
+    modal.blade.php
+    ---------------
+    Modal dialog component
+    Props: name, show, maxWidth, closeable, title, subtitle, icon, iconClass, iconBg, iconColor, blur, centered
+    Slots: default, header, footer
+    
+    Example:
+    <x-proxmox::modal name="confirm-delete" title="Confirm Delete" icon="ri-delete-bin-line" iconBg="bg-danger/10" iconColor="text-danger">
+        <p>Are you sure you want to delete this item?</p>
+        <x-slot:footer>
+            <x-proxmox::button variant="neutral" @click="$dispatch('close-modal', 'confirm-delete')">Cancel</x-proxmox::button>
+            <x-proxmox::button variant="danger">Delete</x-proxmox::button>
+        </x-slot:footer>
+    </x-proxmox::modal>
+    
+    dropdown.blade.php + dropdown-item.blade.php + dropdown-divider.blade.php
+    -------------------------------------------------------------------------
+    Dropdown menu components
+    
+    Example:
+    <x-proxmox::dropdown align="right">
+        <x-slot:trigger>
+            <x-proxmox::button variant="neutral" icon="ri-more-2-fill" />
+        </x-slot:trigger>
+        <x-proxmox::dropdown-item icon="ri-edit-line">Edit</x-proxmox::dropdown-item>
+        <x-proxmox::dropdown-item icon="ri-file-copy-line">Duplicate</x-proxmox::dropdown-item>
+        <x-proxmox::dropdown-divider />
+        <x-proxmox::dropdown-item icon="ri-delete-bin-line" danger>Delete</x-proxmox::dropdown-item>
+    </x-proxmox::dropdown>
+    
+    tabs.blade.php + tab-panel.blade.php
+    ------------------------------------
+    Tab navigation component
+    
+    Example:
+    <x-proxmox::tabs :items="[
+        ['id' => 'general', 'label' => 'General', 'icon' => 'ri-settings-line'],
+        ['id' => 'advanced', 'label' => 'Advanced', 'icon' => 'ri-tools-line'],
+    ]">
+        <x-proxmox::tab-panel id="general">General content</x-proxmox::tab-panel>
+        <x-proxmox::tab-panel id="advanced">Advanced content</x-proxmox::tab-panel>
+    </x-proxmox::tabs>
+    
+    input.blade.php
+    ---------------
+    Form input component
+    Props: label, id, name, type, placeholder, hint, error, required, disabled, readonly, prefix, suffix, icon, iconPosition, size
+    
+    Example:
+    <x-proxmox::input label="Hostname" name="hostname" placeholder="Enter hostname" required icon="ri-server-line" />
+    
+    ============================================
+    FEEDBACK
+    ============================================
+    
+    alert.blade.php
+    ---------------
+    Alert/notification component
+    Props: variant (success|danger|warning|info|neutral), title, icon, dismissible, collapsible, collapsed, storageKey, border
+    Slots: default, actions
+    
+    Example:
+    <x-proxmox::alert variant="warning" title="Maintenance Notice" collapsible storageKey="maintenance-alert">
+        Scheduled maintenance will occur on Sunday at 2:00 AM.
+    </x-proxmox::alert>
+    
+    spinner.blade.php
+    -----------------
+    Loading spinner
+    Props: size, variant
+    
+    Example:
+    <x-proxmox::spinner size="lg" variant="primary" />
+    
+--}}
diff --git a/extensions/Servers/Proxmox/views/components/info-list.blade.php b/extensions/Servers/Proxmox/views/components/info-list.blade.php
new file mode 100644
index 000000000..0555c4eff
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/info-list.blade.php
@@ -0,0 +1,19 @@
+@props([
+    'title' => null,
+    'count' => null,
+])
+
+<div {{ $attributes->merge(['class' => 'divide-y divide-neutral/10']) }}>
+    @if($title || $count !== null)
+        <div class="flex items-center justify-between pb-3 mb-1">
+            @if($title)
+                <h4 class="text-sm font-semibold text-base/80">{{ $title }}</h4>
+            @endif
+            @if($count !== null)
+                <span class="text-xs text-base/50 bg-neutral/10 px-2 py-0.5 rounded-full">{{ $count }} items</span>
+            @endif
+        </div>
+    @endif
+    
+    {{ $slot }}
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/info-row.blade.php b/extensions/Servers/Proxmox/views/components/info-row.blade.php
new file mode 100644
index 000000000..c5a9fff26
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/info-row.blade.php
@@ -0,0 +1,55 @@
+@props([
+    'label' => null,
+    'value' => null,
+    'icon' => null,
+    'iconClass' => 'size-4',
+    'mono' => false,
+    'copyable' => false,
+    'truncate' => false,
+    'href' => null,
+    'vertical' => false,
+])
+
+@php
+    $valueClasses = 'text-base/90';
+    if ($mono) $valueClasses .= ' font-mono text-sm';
+    if ($truncate) $valueClasses .= ' truncate';
+@endphp
+
+<div {{ $attributes->merge(['class' => $vertical ? 'flex flex-col gap-1' : 'flex items-center justify-between gap-4 py-2']) }}>
+    {{-- Label --}}
+    <div class="flex items-center gap-2 text-sm text-base/60 {{ $vertical ? '' : 'flex-shrink-0' }}">
+        @if($icon)
+            <x-dynamic-component :component="$icon" class="{{ $iconClass }}" />
+        @endif
+        <span>{{ $label }}</span>
+    </div>
+    
+    {{-- Value --}}
+    <div class="flex items-center gap-2 {{ $valueClasses }} {{ $vertical ? '' : 'text-right min-w-0' }}">
+        @if($href)
+            <a href="{{ $href }}" class="text-primary hover:underline truncate">
+                {{ $value ?? $slot }}
+            </a>
+        @else
+            <span class="{{ $truncate ? 'truncate' : '' }}">{{ $value ?? $slot }}</span>
+        @endif
+        
+        @if($copyable && ($value || $slot->isNotEmpty()))
+            <button 
+                type="button"
+                x-data="{ copied: false }"
+                @click="
+                    navigator.clipboard.writeText('{{ addslashes($value ?? $slot->toHtml()) }}');
+                    copied = true;
+                    setTimeout(() => copied = false, 2000);
+                "
+                class="text-base/50 hover:text-base/70 transition-colors flex-shrink-0"
+                :title="copied ? 'Copied!' : 'Copy to clipboard'"
+            >
+                <x-ri-file-copy-line x-show="!copied" class="size-4" />
+                <x-ri-check-line x-show="copied" x-cloak class="size-4 text-success" />
+            </button>
+        @endif
+    </div>
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/input.blade.php b/extensions/Servers/Proxmox/views/components/input.blade.php
new file mode 100644
index 000000000..8aaedd821
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/input.blade.php
@@ -0,0 +1,116 @@
+@props([
+    'label' => null,
+    'id' => null,
+    'name' => null,
+    'type' => 'text',
+    'placeholder' => null,
+    'hint' => null,
+    'error' => null,
+    'required' => false,
+    'disabled' => false,
+    'readonly' => false,
+    'prefix' => null,
+    'suffix' => null,
+    'icon' => null,
+    'iconPosition' => 'left',
+    'size' => 'md',
+])
+
+@php
+    $inputId = $id ?? $name ?? Str::random(8);
+    
+    // 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',
+    };
+    
+    $iconSizeClasses = match($size) {
+        'sm' => 'size-4',
+        'md' => 'size-4',
+        'lg' => 'size-5',
+        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";
+@endphp
+
+<div {{ $attributes->only('class')->merge(['class' => 'flex flex-col gap-1.5']) }}>
+    {{-- Label --}}
+    @if($label)
+        <label for="{{ $inputId }}" class="text-sm font-medium text-base/80">
+            {{ $label }}
+            @if($required)
+                <span class="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 --}}
+        <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 --}}
+        @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>
+    
+    {{-- Hint text --}}
+    @if($hint && !$error)
+        <p class="text-xs text-base/60">{{ $hint }}</p>
+    @endif
+    
+    {{-- Error message --}}
+    @if($error)
+        <p class="text-xs text-danger flex items-center gap-1">
+            <x-ri-error-warning-line class="size-3.5" />
+            {{ $error }}
+        </p>
+    @endif
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/modal.blade.php b/extensions/Servers/Proxmox/views/components/modal.blade.php
new file mode 100644
index 000000000..3dc526b01
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/modal.blade.php
@@ -0,0 +1,139 @@
+@props([
+    'name' => null,
+    'show' => false,
+    'maxWidth' => 'lg',
+    'closeable' => true,
+    'title' => null,
+    'subtitle' => null,
+    'icon' => null,
+    'iconClass' => 'size-5',
+    'iconBg' => 'bg-primary/10',
+    'iconColor' => 'text-primary',
+    'blur' => true,
+    'centered' => true,
+])
+
+@php
+    $maxWidthClasses = match($maxWidth) {
+        'xs' => 'max-w-xs',
+        'sm' => 'max-w-sm',
+        'md' => 'max-w-md',
+        'lg' => 'max-w-lg',
+        'xl' => 'max-w-xl',
+        '2xl' => 'max-w-2xl',
+        '3xl' => 'max-w-3xl',
+        '4xl' => 'max-w-4xl',
+        '5xl' => 'max-w-5xl',
+        'full' => 'max-w-full mx-4',
+        default => 'max-w-lg',
+    };
+    
+    $backdropClasses = $blur ? 'bg-black/50 backdrop-blur-sm' : 'bg-black/50';
+    $positionClasses = $centered ? 'items-center' : 'items-start pt-20';
+@endphp
+
+<div
+    x-data="{
+        show: @js($show),
+        focusables() {
+            let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
+            return [...this.$el.querySelectorAll(selector)]
+                .filter(el => !el.hasAttribute('disabled'))
+        },
+        firstFocusable() { return this.focusables()[0] },
+        lastFocusable() { return this.focusables().slice(-1)[0] },
+        nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() },
+        prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() },
+        nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
+        prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1 },
+        open() { this.show = true },
+        close() { this.show = false },
+    }"
+    @if($name)
+        x-on:open-modal.window="$event.detail == '{{ $name }}' ? open() : null"
+        x-on:close-modal.window="$event.detail == '{{ $name }}' ? close() : null"
+        x-on:close.stop="close()"
+    @endif
+    x-on:keydown.escape.window="show && {{ $closeable ? 'close()' : '' }}"
+    x-on:keydown.tab.prevent="$event.shiftKey ? prevFocusable().focus() : nextFocusable().focus()"
+    x-cloak
+    {{ $attributes }}
+>
+    {{-- Backdrop --}}
+    <div
+        x-show="show"
+        x-transition:enter="transition ease-out duration-300"
+        x-transition:enter-start="opacity-0"
+        x-transition:enter-end="opacity-100"
+        x-transition:leave="transition ease-in duration-200"
+        x-transition:leave-start="opacity-100"
+        x-transition:leave-end="opacity-0"
+        class="fixed inset-0 z-50 {{ $backdropClasses }}"
+        @if($closeable)
+            @click="close()"
+        @endif
+    ></div>
+
+    {{-- Modal Container --}}
+    <div
+        x-show="show"
+        x-transition:enter="transition ease-out duration-300"
+        x-transition:enter-start="opacity-0 scale-95"
+        x-transition:enter-end="opacity-100 scale-100"
+        x-transition:leave="transition ease-in duration-200"
+        x-transition:leave-start="opacity-100 scale-100"
+        x-transition:leave-end="opacity-0 scale-95"
+        class="fixed inset-0 z-50 flex justify-center {{ $positionClasses }} p-4 overflow-y-auto"
+        @click.self="{{ $closeable ? 'close()' : '' }}"
+    >
+        <div class="relative w-full {{ $maxWidthClasses }} bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl">
+            {{-- Close button --}}
+            @if($closeable)
+                <button 
+                    @click="close()" 
+                    type="button"
+                    class="absolute top-4 right-4 text-base/50 hover:text-base/70 transition-colors z-10 p-1 rounded-lg hover:bg-neutral/10"
+                >
+                    <x-ri-close-line class="size-5" />
+                </button>
+            @endif
+
+            {{-- Header --}}
+            @if($title || $icon || isset($header))
+                <div class="px-6 py-5 border-b border-neutral/10">
+                    @if(isset($header))
+                        {{ $header }}
+                    @else
+                        <div class="flex items-center gap-3 pr-8">
+                            @if($icon)
+                                <div class="flex items-center justify-center w-10 h-10 rounded-lg {{ $iconBg }}">
+                                    <x-dynamic-component :component="$icon" class="{{ $iconClass }} {{ $iconColor }}" />
+                                </div>
+                            @endif
+                            <div class="flex flex-col gap-0.5">
+                                @if($title)
+                                    <h3 class="text-lg font-semibold text-base/90">{{ $title }}</h3>
+                                @endif
+                                @if($subtitle)
+                                    <p class="text-sm text-base/60">{{ $subtitle }}</p>
+                                @endif
+                            </div>
+                        </div>
+                    @endif
+                </div>
+            @endif
+
+            {{-- Body --}}
+            <div class="px-6 py-5 max-h-[60vh] overflow-y-auto">
+                {{ $slot }}
+            </div>
+
+            {{-- Footer --}}
+            @if(isset($footer))
+                <div class="px-6 py-4 border-t border-neutral/10 bg-neutral/5 rounded-b-xl flex items-center justify-end gap-3">
+                    {{ $footer }}
+                </div>
+            @endif
+        </div>
+    </div>
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/progress.blade.php b/extensions/Servers/Proxmox/views/components/progress.blade.php
new file mode 100644
index 000000000..584afaace
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/progress.blade.php
@@ -0,0 +1,102 @@
+@props([
+    'value' => 0,
+    'max' => 100,
+    'size' => 'md',
+    'variant' => 'primary',
+    'label' => null,
+    'showValue' => false,
+    'animated' => false,
+    'striped' => false,
+])
+
+@php
+    $percentage = $max > 0 ? min(100, ($value / $max) * 100) : 0;
+    
+    // Size classes
+    $sizeClasses = match($size) {
+        'xs' => 'h-1',
+        'sm' => 'h-2',
+        'md' => 'h-3',
+        'lg' => 'h-4',
+        'xl' => 'h-5',
+        default => 'h-3',
+    };
+    
+    // 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',
+    };
+    
+    // Dynamic color based on percentage
+    if ($variant === 'auto') {
+        if ($percentage >= 90) {
+            $variantClasses = 'bg-danger';
+        } elseif ($percentage >= 70) {
+            $variantClasses = 'bg-warning';
+        } else {
+            $variantClasses = 'bg-success';
+        }
+    }
+    
+    // Animation classes
+    $animationClasses = $animated ? 'transition-all duration-500 ease-out' : '';
+    $stripedClasses = $striped ? 'bg-stripes' : '';
+@endphp
+
+<div {{ $attributes->merge(['class' => 'flex flex-col gap-1.5']) }}>
+    {{-- Label and value row --}}
+    @if($label || $showValue)
+        <div class="flex items-center justify-between text-sm">
+            @if($label)
+                <span class="text-base/70 font-medium">{{ $label }}</span>
+            @endif
+            @if($showValue)
+                <span class="text-base/90 font-semibold">{{ 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 fill --}}
+        <div 
+            class="{{ $sizeClasses }} {{ $variantClasses }} {{ $animationClasses }} {{ $stripedClasses }} rounded-full"
+            style="width: {{ $percentage }}%"
+            role="progressbar"
+            aria-valuenow="{{ $value }}"
+            aria-valuemin="0"
+            aria-valuemax="{{ $max }}"
+        ></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/section-header.blade.php b/extensions/Servers/Proxmox/views/components/section-header.blade.php
new file mode 100644
index 000000000..6d0b94fe9
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/section-header.blade.php
@@ -0,0 +1,115 @@
+@props([
+    'title' => null,
+    'subtitle' => null,
+    'icon' => null,
+    'iconClass' => 'size-5',
+    'helpIcon' => false,
+    'helpTitle' => null,
+    'helpContent' => null,
+    'border' => false,
+])
+
+@php
+    $containerClasses = 'flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4';
+    if ($border) {
+        $containerClasses .= ' pb-4 border-b border-neutral/10';
+    }
+@endphp
+
+<div {{ $attributes->merge(['class' => $containerClasses]) }}>
+    <div class="flex flex-col gap-1">
+        <div class="flex items-center gap-2">
+            @if($icon)
+                <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10">
+                    <x-dynamic-component :component="$icon" class="{{ $iconClass }} text-primary" />
+                </div>
+            @endif
+            
+            @if($title)
+                <h2 class="text-xl font-semibold text-base/90">{{ $title }}</h2>
+            @endif
+            
+            {{-- Help modal trigger --}}
+            @if($helpIcon || $helpContent)
+                <div class="relative" x-data="{ open: false }" x-cloak>
+                    <button 
+                        type="button" 
+                        @click="open = true" 
+                        class="text-base/50 hover:text-base/70 transition-colors"
+                        title="Learn more"
+                    >
+                        <x-ri-question-line class="size-5" />
+                    </button>
+                    
+                    {{-- Modal Backdrop --}}
+                    <div 
+                        x-show="open" 
+                        x-transition:enter="transition ease-out duration-300"
+                        x-transition:enter-start="opacity-0"
+                        x-transition:enter-end="opacity-100"
+                        x-transition:leave="transition ease-in duration-200"
+                        x-transition:leave-start="opacity-100"
+                        x-transition:leave-end="opacity-0"
+                        @click="open = false"
+                        @keydown.escape.window="open = false"
+                        class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                        style="display: none;"
+                    ></div>
+                    
+                    {{-- Modal --}}
+                    <div 
+                        x-show="open"
+                        x-transition:enter="transition ease-out duration-300"
+                        x-transition:enter-start="opacity-0 scale-95"
+                        x-transition:enter-end="opacity-100 scale-100"
+                        x-transition:leave="transition ease-in duration-200"
+                        x-transition:leave-start="opacity-100 scale-100"
+                        x-transition:leave-end="opacity-0 scale-95"
+                        @click.away="open = false"
+                        @keydown.escape.window="open = false"
+                        class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                        style="display: none;"
+                    >
+                        <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
+                            <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
+                                <x-ri-close-line class="size-5" />
+                            </button>
+                            
+                            <div class="flex items-center gap-3 mb-4 pr-8">
+                                @if($icon)
+                                    <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
+                                        <x-dynamic-component :component="$icon" class="size-5 text-primary" />
+                                    </div>
+                                @endif
+                                <h6 class="font-sans text-lg font-semibold leading-tight">
+                                    {{ $helpTitle ?? $title }}
+                                </h6>
+                            </div>
+                            
+                            @if($helpContent)
+                                <div class="prose prose-sm text-base/80 max-w-none">
+                                    {!! $helpContent !!}
+                                </div>
+                            @endif
+                            
+                            @if(isset($help))
+                                {{ $help }}
+                            @endif
+                        </div>
+                    </div>
+                </div>
+            @endif
+        </div>
+        
+        @if($subtitle)
+            <p class="text-base/70 text-sm">{{ $subtitle }}</p>
+        @endif
+    </div>
+    
+    {{-- Actions slot --}}
+    @if(isset($actions))
+        <div class="flex items-center gap-2 flex-shrink-0">
+            {{ $actions }}
+        </div>
+    @endif
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/spinner.blade.php b/extensions/Servers/Proxmox/views/components/spinner.blade.php
new file mode 100644
index 000000000..d293b1d8b
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/spinner.blade.php
@@ -0,0 +1,27 @@
+@props([
+    'size' => 'md',
+    'variant' => 'primary',
+])
+
+@php
+    $sizeClasses = match($size) {
+        'xs' => 'h-4 w-4 border-2',
+        'sm' => 'h-5 w-5 border-2',
+        'md' => 'h-8 w-8 border-2',
+        'lg' => 'h-12 w-12 border-3',
+        'xl' => 'h-16 w-16 border-4',
+        default => 'h-8 w-8 border-2',
+    };
+    
+    $colorClasses = match($variant) {
+        'primary' => 'border-primary',
+        'secondary' => 'border-secondary',
+        'white' => 'border-white',
+        'neutral' => 'border-base/50',
+        default => 'border-primary',
+    };
+@endphp
+
+<div {{ $attributes->merge(['class' => 'flex items-center justify-center']) }}>
+    <div class="animate-spin rounded-full {{ $sizeClasses }} {{ $colorClasses }} border-t-transparent"></div>
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/stat-card.blade.php b/extensions/Servers/Proxmox/views/components/stat-card.blade.php
new file mode 100644
index 000000000..f271b46aa
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/stat-card.blade.php
@@ -0,0 +1,104 @@
+@props([
+    'label' => '',
+    'value' => '',
+    'icon' => null,
+    'iconClass' => 'size-5',
+    'iconBg' => 'bg-primary/10',
+    'iconColor' => 'text-primary',
+    'trend' => null,
+    'trendUp' => null,
+    'trendLabel' => null,
+    'suffix' => null,
+    'prefix' => null,
+    'loading' => false,
+    'compact' => false,
+    'href' => null,
+    'clickable' => false,
+])
+
+@php
+    $cardClasses = 'bg-background-secondary rounded-xl border border-neutral/20 shadow-sm transition-all duration-200';
+    if ($href || $clickable) {
+        $cardClasses .= ' hover:shadow-md hover:border-primary/30 cursor-pointer';
+    }
+    $paddingClasses = $compact ? 'p-4' : 'p-5';
+    
+    // Determine trend styling
+    $trendClasses = '';
+    $trendIcon = null;
+    if ($trendUp === true) {
+        $trendClasses = 'text-success';
+        $trendIcon = 'ri-arrow-up-line';
+    } elseif ($trendUp === false) {
+        $trendClasses = 'text-danger';
+        $trendIcon = 'ri-arrow-down-line';
+    } else {
+        $trendClasses = 'text-base/50';
+        $trendIcon = 'ri-subtract-line';
+    }
+@endphp
+
+@if($href)
+    <a href="{{ $href }}" {{ $attributes->merge(['class' => $cardClasses . ' ' . $paddingClasses . ' block']) }}>
+@else
+    <div {{ $attributes->merge(['class' => $cardClasses . ' ' . $paddingClasses]) }}>
+@endif
+
+    <div class="flex items-start justify-between gap-4">
+        <div class="flex-1 min-w-0">
+            {{-- Label --}}
+            <p class="text-sm font-medium text-base/60 mb-1 truncate">{{ $label }}</p>
+            
+            {{-- Value --}}
+            <div class="flex items-baseline gap-1">
+                @if($prefix)
+                    <span class="text-sm text-base/50">{{ $prefix }}</span>
+                @endif
+                
+                @if($loading)
+                    <div class="h-8 w-20 bg-neutral/20 rounded animate-pulse"></div>
+                @else
+                    <span class="text-2xl font-bold text-base/90 truncate">{{ $value }}</span>
+                @endif
+                
+                @if($suffix)
+                    <span class="text-sm text-base/50">{{ $suffix }}</span>
+                @endif
+            </div>
+            
+            {{-- Trend --}}
+            @if($trend !== null || $trendLabel)
+                <div class="flex items-center gap-1 mt-2">
+                    @if($trendIcon)
+                        <x-dynamic-component :component="$trendIcon" class="size-4 {{ $trendClasses }}" />
+                    @endif
+                    @if($trend !== null)
+                        <span class="text-sm font-medium {{ $trendClasses }}">{{ $trend }}</span>
+                    @endif
+                    @if($trendLabel)
+                        <span class="text-xs text-base/50">{{ $trendLabel }}</span>
+                    @endif
+                </div>
+            @endif
+            
+            {{-- Slot for additional content --}}
+            @if($slot->isNotEmpty())
+                <div class="mt-3">
+                    {{ $slot }}
+                </div>
+            @endif
+        </div>
+        
+        {{-- Icon --}}
+        @if($icon)
+            <div class="flex items-center justify-center w-12 h-12 rounded-xl {{ $iconBg }} flex-shrink-0">
+                <x-dynamic-component :component="$icon" class="{{ $iconClass }} {{ $iconColor }}" />
+            </div>
+        @endif
+    </div>
+
+@if($href)
+    </a>
+@else
+    </div>
+@endif
diff --git a/extensions/Servers/Proxmox/views/components/tab-panel.blade.php b/extensions/Servers/Proxmox/views/components/tab-panel.blade.php
new file mode 100644
index 000000000..df15acdc4
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/tab-panel.blade.php
@@ -0,0 +1,16 @@
+@props([
+    'id',
+])
+
+<div
+    x-show="activeTab === '{{ $id }}'"
+    x-transition:enter="transition ease-out duration-200"
+    x-transition:enter-start="opacity-0 translate-y-1"
+    x-transition:enter-end="opacity-100 translate-y-0"
+    x-transition:leave="transition ease-in duration-150"
+    x-transition:leave-start="opacity-100 translate-y-0"
+    x-transition:leave-end="opacity-0 translate-y-1"
+    {{ $attributes->merge(['class' => 'mt-4']) }}
+>
+    {{ $slot }}
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/table-row.blade.php b/extensions/Servers/Proxmox/views/components/table-row.blade.php
new file mode 100644
index 000000000..74a7c21c2
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/table-row.blade.php
@@ -0,0 +1,26 @@
+@props([
+    'hoverable' => true,
+    'clickable' => false,
+    'selected' => false,
+    'striped' => false,
+])
+
+@php
+    $classes = '';
+    
+    if ($hoverable) {
+        $classes .= ' hover:bg-neutral/5 transition-colors';
+    }
+    
+    if ($clickable) {
+        $classes .= ' cursor-pointer';
+    }
+    
+    if ($selected) {
+        $classes .= ' bg-primary/5 border-l-2 border-l-primary';
+    }
+@endphp
+
+<tr {{ $attributes->merge(['class' => trim($classes)]) }}>
+    {{ $slot }}
+</tr>
diff --git a/extensions/Servers/Proxmox/views/components/table-td.blade.php b/extensions/Servers/Proxmox/views/components/table-td.blade.php
new file mode 100644
index 000000000..9bf398dd8
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/table-td.blade.php
@@ -0,0 +1,22 @@
+@props([
+    'align' => 'left',
+    'compact' => false,
+    'truncate' => false,
+    'mono' => false,
+])
+
+@php
+    $paddingClasses = $compact ? 'px-3 py-2' : 'px-5 py-4';
+    $alignClasses = match($align) {
+        'center' => 'text-center',
+        'right' => 'text-right',
+        default => 'text-left',
+    };
+    $textClasses = $mono ? 'font-mono text-sm' : 'text-sm';
+    $truncateClasses = $truncate ? 'truncate max-w-xs' : '';
+    $tdClasses = "$paddingClasses $alignClasses $textClasses $truncateClasses text-base/80";
+@endphp
+
+<td {{ $attributes->merge(['class' => $tdClasses]) }}>
+    {{ $slot }}
+</td>
diff --git a/extensions/Servers/Proxmox/views/components/table-th.blade.php b/extensions/Servers/Proxmox/views/components/table-th.blade.php
new file mode 100644
index 000000000..3276e8c48
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/table-th.blade.php
@@ -0,0 +1,42 @@
+@props([
+    'sortable' => false,
+    'sorted' => null,
+    'sortKey' => null,
+    'align' => 'left',
+    'compact' => false,
+])
+
+@php
+    $paddingClasses = $compact ? 'px-3 py-2' : 'px-5 py-3';
+    $alignClasses = match($align) {
+        'center' => 'text-center',
+        'right' => 'text-right',
+        default => 'text-left',
+    };
+    $thClasses = "$paddingClasses $alignClasses text-xs font-semibold text-base/70 uppercase tracking-wider";
+@endphp
+
+<th {{ $attributes->merge(['class' => $thClasses]) }}>
+    @if($sortable)
+        <button 
+            type="button"
+            @if($sortKey)
+                wire:click="sortBy('{{ $sortKey }}')"
+            @endif
+            class="flex items-center gap-1 hover:text-base/90 transition-colors group"
+        >
+            <span>{{ $slot }}</span>
+            <span class="flex flex-col">
+                @if($sorted === 'asc')
+                    <x-ri-arrow-up-s-fill class="size-3 text-primary" />
+                @elseif($sorted === 'desc')
+                    <x-ri-arrow-down-s-fill class="size-3 text-primary" />
+                @else
+                    <x-ri-arrow-up-down-line class="size-3 text-base/40 group-hover:text-base/60" />
+                @endif
+            </span>
+        </button>
+    @else
+        {{ $slot }}
+    @endif
+</th>
diff --git a/extensions/Servers/Proxmox/views/components/table.blade.php b/extensions/Servers/Proxmox/views/components/table.blade.php
new file mode 100644
index 000000000..be00089ac
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/table.blade.php
@@ -0,0 +1,67 @@
+@props([
+    'striped' => false,
+    'hoverable' => true,
+    'compact' => false,
+    'responsive' => true,
+    'stickyHeader' => false,
+    'emptyMessage' => 'No data available',
+    'emptyIcon' => 'ri-inbox-line',
+    'loading' => false,
+])
+
+@php
+    $tableClasses = 'w-full text-left';
+    $wrapperClasses = 'bg-background-secondary rounded-xl border border-neutral/20 shadow-sm overflow-hidden';
+    
+    if ($responsive) {
+        $wrapperClasses .= ' overflow-x-auto';
+    }
+@endphp
+
+<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>
+    @else
+        <table class="{{ $tableClasses }}">
+            @if(isset($head))
+                <thead class="bg-neutral/5 {{ $stickyHeader ? 'sticky top-0 z-10' : '' }}">
+                    <tr class="border-b border-neutral/10">
+                        {{ $head }}
+                    </tr>
+                </thead>
+            @endif
+
+            @if(isset($body) && $body->isNotEmpty())
+                <tbody class="divide-y divide-neutral/10">
+                    {{ $body }}
+                </tbody>
+            @elseif($slot->isNotEmpty())
+                <tbody class="divide-y divide-neutral/10">
+                    {{ $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" />
+                                </div>
+                                <p class="text-sm text-base/60">{{ $emptyMessage }}</p>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            @endif
+
+            @if(isset($foot))
+                <tfoot class="bg-neutral/5 border-t border-neutral/10">
+                    {{ $foot }}
+                </tfoot>
+            @endif
+        </table>
+    @endif
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/tabs.blade.php b/extensions/Servers/Proxmox/views/components/tabs.blade.php
new file mode 100644
index 000000000..b8d33c9df
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/tabs.blade.php
@@ -0,0 +1,41 @@
+@props([
+    'items' => [],
+    'vertical' => false,
+    'gap' => '2',
+])
+
+@php
+    $containerClasses = $vertical 
+        ? "flex flex-col gap-{$gap}" 
+        : "inline-flex items-center rounded-lg border border-neutral/30 bg-background p-1 gap-1";
+@endphp
+
+<div 
+    x-data="{ activeTab: '{{ collect($items)->first()['id'] ?? '' }}' }"
+    {{ $attributes->merge(['class' => $containerClasses]) }}
+>
+    {{-- Tab buttons --}}
+    <div class="{{ $vertical ? 'flex flex-col gap-1' : 'flex items-center gap-1' }}">
+        @foreach($items as $item)
+            <button
+                type="button"
+                @click="activeTab = '{{ $item['id'] }}'"
+                :class="activeTab === '{{ $item['id'] }}' 
+                    ? 'bg-primary text-white shadow-sm' 
+                    : 'text-base/70 hover:text-base/90 hover:bg-neutral/10'"
+                class="px-3 py-1.5 text-sm font-medium rounded-md transition-all duration-200 flex items-center gap-2"
+            >
+                @if(isset($item['icon']))
+                    <x-dynamic-component :component="$item['icon']" class="size-4" />
+                @endif
+                {{ $item['label'] }}
+                @if(isset($item['badge']))
+                    <span class="ml-1 px-1.5 py-0.5 text-xs rounded-full bg-white/20">{{ $item['badge'] }}</span>
+                @endif
+            </button>
+        @endforeach
+    </div>
+
+    {{-- Tab content --}}
+    {{ $slot }}
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/action-button.blade.php b/extensions/Servers/Proxmox/views/components/ui/action-button.blade.php
new file mode 100644
index 000000000..9df746114
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/action-button.blade.php
@@ -0,0 +1,72 @@
+{{--
+    Action Toolbar Button Component - TailServer Theme
+    Individual button for VM control actions
+    
+    Usage:
+    <x-proxmox::ui.action-button 
+        action="start" 
+        wire:click="startServer"
+        icon="ri-play-fill"
+        label="Start"
+    />
+--}}
+
+@props([
+    'action' => null,
+    'icon' => null,
+    'label',
+    'variant' => 'default', // default, danger, warning, success
+    'disabled' => false,
+    'loading' => false,
+    'confirm' => null,
+    'size' => 'md', // sm, md, lg
+])
+
+@php
+    $variants = [
+        'default' => 'bg-gradient-to-b from-neutral/5 to-neutral/10 hover:from-neutral/10 hover:to-neutral/15 text-base border border-neutral/20 hover:border-neutral/30 shadow-sm hover:shadow',
+        'primary' => 'bg-gradient-to-b from-primary/10 to-primary/15 hover:from-primary/15 hover:to-primary/20 text-primary border border-primary/20 hover:border-primary/30 shadow-sm hover:shadow-md hover:shadow-primary/10',
+        'success' => 'bg-gradient-to-b from-success/10 to-success/15 hover:from-success/15 hover:to-success/20 text-success border border-success/20 hover:border-success/30 shadow-sm hover:shadow-md hover:shadow-success/10',
+        'warning' => 'bg-gradient-to-b from-warning/10 to-warning/15 hover:from-warning/15 hover:to-warning/20 text-warning border border-warning/20 hover:border-warning/30 shadow-sm hover:shadow-md hover:shadow-warning/10',
+        'danger' => 'bg-gradient-to-b from-danger/10 to-danger/15 hover:from-danger/15 hover:to-danger/20 text-danger border border-danger/20 hover:border-danger/30 shadow-sm hover:shadow-md hover:shadow-danger/10',
+    ];
+    
+    $sizes = [
+        'sm' => 'px-2.5 py-1.5 text-xs',
+        'md' => 'px-3.5 py-2 text-sm',
+        'lg' => 'px-5 py-2.5 text-base',
+    ];
+    
+    $iconSizes = [
+        'sm' => 'size-3.5',
+        'md' => 'size-4',
+        'lg' => 'size-5',
+    ];
+@endphp
+
+<button 
+    type="button"
+    @if($confirm)
+        x-data=""
+        @click="if(confirm('{{ $confirm }}')) { $wire.call('{{ $action }}') }"
+    @endif
+    {{ $attributes->merge([
+        'disabled' => $disabled || $loading,
+    ])->class([
+        'inline-flex items-center gap-2 rounded-xl font-medium transition-all duration-200 hover:-translate-y-0.5 active:translate-y-0 active:scale-95',
+        $variants[$variant] ?? $variants['default'],
+        $sizes[$size] ?? $sizes['md'],
+        'opacity-50 cursor-not-allowed hover:translate-y-0' => $disabled,
+        'cursor-wait hover:translate-y-0' => $loading,
+    ]) }}
+>
+    @if($loading)
+        <svg class="animate-spin {{ $iconSizes[$size] ?? 'size-4' }}" 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>
+    @elseif($icon)
+        <x-dynamic-component :component="$icon" class="{{ $iconSizes[$size] ?? 'size-4' }}" />
+    @endif
+    <span>{{ $label }}</span>
+</button>
diff --git a/extensions/Servers/Proxmox/views/components/ui/action-toolbar.blade.php b/extensions/Servers/Proxmox/views/components/ui/action-toolbar.blade.php
new file mode 100644
index 000000000..6ee000e25
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/action-toolbar.blade.php
@@ -0,0 +1,25 @@
+{{--
+    Action Toolbar Component - TailServer Theme
+    For VM control buttons (Start, Stop, Restart, etc.)
+    
+    Usage:
+    <x-proxmox::ui.action-toolbar>
+        <x-proxmox::ui.action-toolbar-button 
+            action="start" 
+            icon="ri-play-line" 
+            label="Start"
+        />
+    </x-proxmox::ui.action-toolbar>
+--}}
+
+@props([
+    'centered' => false,
+])
+
+<div {{ $attributes->class([
+    'flex flex-wrap gap-2.5',
+    'justify-center' => $centered,
+    'justify-start' => !$centered,
+]) }}>
+    {{ $slot }}
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/alert.blade.php b/extensions/Servers/Proxmox/views/components/ui/alert.blade.php
new file mode 100644
index 000000000..945fbb7fb
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/alert.blade.php
@@ -0,0 +1,120 @@
+{{--
+    Alert Component - TailServer Theme
+    
+    Usage:
+    <x-proxmox::ui.alert>Default alert</x-proxmox::ui.alert>
+    <x-proxmox::ui.alert variant="success" title="Success">Operation completed</x-proxmox::ui.alert>
+    <x-proxmox::ui.alert variant="warning" dismissible>Warning message</x-proxmox::ui.alert>
+--}}
+
+@props([
+    'variant' => 'info',
+    'title' => null,
+    'icon' => null,
+    'dismissible' => false,
+    'collapsible' => false,
+    'collapsed' => false,
+])
+
+@php
+    $variantConfig = [
+        'info' => [
+            'bg' => 'bg-gradient-to-r from-info/10 via-info/5 to-transparent',
+            'border' => 'border-info/20',
+            'text' => 'text-info',
+            'icon' => $icon ?? 'ri-information-line',
+        ],
+        'success' => [
+            'bg' => 'bg-gradient-to-r from-success/10 via-success/5 to-transparent',
+            'border' => 'border-success/20',
+            'text' => 'text-success',
+            'icon' => $icon ?? 'ri-checkbox-circle-line',
+        ],
+        'warning' => [
+            'bg' => 'bg-gradient-to-r from-warning/10 via-warning/5 to-transparent',
+            'border' => 'border-warning/20',
+            'text' => 'text-warning',
+            'icon' => $icon ?? 'ri-error-warning-line',
+        ],
+        'danger' => [
+            'bg' => 'bg-gradient-to-r from-danger/10 via-danger/5 to-transparent',
+            'border' => 'border-danger/20',
+            'text' => 'text-danger',
+            'icon' => $icon ?? 'ri-error-warning-fill',
+        ],
+        'default' => [
+            'bg' => 'bg-gradient-to-r from-neutral/10 via-neutral/5 to-transparent',
+            'border' => 'border-neutral/20',
+            'text' => 'text-base/70',
+            'icon' => $icon ?? 'ri-information-line',
+        ],
+    ];
+    
+    $config = $variantConfig[$variant] ?? $variantConfig['default'];
+@endphp
+
+<div 
+    {{ $attributes->class([
+        'rounded-xl p-4 border',
+        $config['bg'],
+        $config['border'],
+    ]) }}
+    @if($dismissible || $collapsible)
+        x-data="{ 
+            show: true,
+            @if($collapsible) collapsed: {{ $collapsed ? 'true' : 'false' }} @endif
+        }"
+        x-show="show"
+        x-transition:enter="transition ease-out duration-300"
+        x-transition:enter-start="opacity-0 scale-95"
+        x-transition:enter-end="opacity-100 scale-100"
+        x-transition:leave="transition ease-in duration-200"
+        x-transition:leave-start="opacity-100 scale-100"
+        x-transition:leave-end="opacity-0 scale-95"
+    @endif
+>
+    <div class="flex items-start gap-3">
+        <x-dynamic-component :component="$config['icon']" class="size-5 {{ $config['text'] }} flex-shrink-0 mt-0.5" />
+        <div class="flex-1 min-w-0">
+            <div class="flex items-center justify-between gap-2">
+                @if($title)
+                    <h4 class="text-sm font-semibold text-base">{{ $title }}</h4>
+                @endif
+                <div class="flex items-center gap-1 ml-auto">
+                    @if($collapsible)
+                        <button 
+                            type="button" 
+                            @click="collapsed = !collapsed"
+                            class="p-1.5 rounded-lg hover:bg-black/10 transition-all duration-200 {{ $config['text'] }}"
+                        >
+                            <x-ri-arrow-down-s-line 
+                                class="size-4 transition-transform duration-300 ease-out"
+                                x-bind:class="collapsed ? 'rotate-180' : ''" 
+                            />
+                        </button>
+                    @endif
+                    @if($dismissible)
+                        <button 
+                            type="button" 
+                            @click="show = false"
+                            class="p-1.5 rounded-lg hover:bg-black/10 hover:rotate-90 transition-all duration-200 {{ $config['text'] }}"
+                        >
+                            <x-ri-close-line class="size-4" />
+                        </button>
+                    @endif
+                </div>
+            </div>
+            <div 
+                class="text-sm text-base/70 leading-relaxed @if($title) mt-1 @endif"
+                @if($collapsible)
+                    x-show="!collapsed"
+                    x-transition:enter="transition ease-out duration-200"
+                    x-transition:enter-start="opacity-0 -translate-y-2"
+                    x-transition:enter-end="opacity-100 translate-y-0"
+                @endif
+            >
+                {{ $slot }}
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/allocation-card.blade.php b/extensions/Servers/Proxmox/views/components/ui/allocation-card.blade.php
new file mode 100644
index 000000000..09ae20d2e
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/allocation-card.blade.php
@@ -0,0 +1,73 @@
+{{--
+    Resource Allocation Card Component - TailServer Theme
+    For displaying CPU, Memory, and other resource allocation vs entitlement
+    
+    Usage:
+    <x-proxmox::ui.allocation-card
+        label="CPU Allocation"
+        :percent="45"
+        usage-summary="1.8 / 4 vCPU"
+        entitlement-label="4 vCPU entitlement"
+        description="Live hypervisor usage sampled directly from the cluster."
+        gradient="linear-gradient(90deg, #38bdf8 0%, #6366f1 100%)"
+        :badge="['label' => 'Healthy', 'class' => 'text-success bg-success/15']"
+    />
+--}}
+
+@props([
+    'label',
+    'percent' => null,
+    'usageSummary',
+    'entitlementLabel',
+    'description' => null,
+    'gradient' => 'linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%)',
+    'badge' => null,
+    'icon' => null,
+    'iconColor' => 'text-primary',
+])
+
+<div {{ $attributes->class(['group relative border border-neutral/20 rounded-xl p-4 bg-background hover:border-neutral/30 hover:shadow-sm transition-all duration-200']) }}>
+    {{-- Subtle gradient overlay on hover --}}
+    <div class="absolute inset-0 rounded-xl bg-gradient-to-br from-primary/[0.02] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
+    
+    <div class="relative flex flex-col gap-3">
+        <div class="flex items-start justify-between gap-3">
+            <div class="flex items-start gap-3">
+                @if($icon)
+                    <div class="flex-shrink-0 w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center">
+                        <x-dynamic-component :component="$icon" class="size-4.5 {{ $iconColor }}" />
+                    </div>
+                @endif
+                <div class="min-w-0">
+                    <p class="text-[11px] font-semibold tracking-wider uppercase text-base/50">{{ $label }}</p>
+                    <p class="text-xl font-bold text-base leading-tight mt-0.5">{{ $usageSummary }}</p>
+                    <p class="text-xs text-base/50 mt-0.5">{{ $entitlementLabel }}</p>
+                </div>
+            </div>
+            @if($badge)
+                <span class="flex-shrink-0 text-[10px] font-bold px-2 py-1 rounded-full {{ $badge['class'] ?? 'text-base/60 bg-neutral/10' }}">
+                    {{ $badge['label'] ?? '' }}
+                </span>
+            @endif
+        </div>
+        
+        @if(!is_null($percent))
+            <div class="space-y-1.5">
+                <div class="flex items-center justify-between text-xs">
+                    <span class="text-base/50">Usage</span>
+                    <span class="font-semibold text-base/70">{{ $percent }}%</span>
+                </div>
+                <div class="h-1.5 rounded-full bg-neutral/10 overflow-hidden">
+                    <div 
+                        class="h-full rounded-full transition-all duration-500 ease-out"
+                        style="width: {{ min($percent, 130) }}%; background-image: {{ $gradient }};"
+                    ></div>
+                </div>
+            </div>
+        @endif
+        
+        @if($description)
+            <p class="text-[11px] text-base/40 leading-relaxed">{{ $description }}</p>
+        @endif
+    </div>
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/badge.blade.php b/extensions/Servers/Proxmox/views/components/ui/badge.blade.php
new file mode 100644
index 000000000..c05cf0fe4
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/badge.blade.php
@@ -0,0 +1,78 @@
+{{--
+    Badge Component - TailServer Theme
+    
+    Usage:
+    <x-proxmox::ui.badge>Default</x-proxmox::ui.badge>
+    <x-proxmox::ui.badge variant="success">Running</x-proxmox::ui.badge>
+    <x-proxmox::ui.badge variant="danger" icon="ri-error-warning-line">Error</x-proxmox::ui.badge>
+    <x-proxmox::ui.badge variant="info" dot pulse>Active</x-proxmox::ui.badge>
+--}}
+
+@props([
+    'variant' => 'default',
+    'size' => 'md',
+    'icon' => null,
+    'dot' => false,
+    'pulse' => false,
+    'outline' => false,
+])
+
+@php
+    $baseClasses = 'inline-flex items-center font-semibold rounded-full transition-colors';
+    
+    $variantClasses = [
+        'default' => $outline ? 'bg-transparent border border-neutral/30 text-base/70' : 'bg-neutral/10 text-base/70',
+        'primary' => $outline ? 'bg-transparent border border-primary/40 text-primary' : 'bg-primary/10 text-primary',
+        'secondary' => $outline ? 'bg-transparent border border-secondary/40 text-secondary' : 'bg-secondary/10 text-secondary',
+        'success' => $outline ? 'bg-transparent border border-success/40 text-success' : 'bg-success/10 text-success',
+        'warning' => $outline ? 'bg-transparent border border-warning/40 text-warning' : 'bg-warning/10 text-warning',
+        'danger' => $outline ? 'bg-transparent border border-danger/40 text-danger' : 'bg-danger/10 text-danger',
+        'info' => $outline ? 'bg-transparent border border-info/40 text-info' : 'bg-info/10 text-info',
+        'muted' => 'bg-neutral/5 text-base/40',
+    ];
+    
+    $sizeClasses = [
+        'xs' => 'px-1.5 py-0.5 text-[10px] leading-tight',
+        'sm' => 'px-2 py-0.5 text-[11px] leading-tight',
+        'md' => 'px-2.5 py-1 text-xs',
+        'lg' => 'px-3 py-1.5 text-sm',
+    ];
+    
+    $iconSizes = [
+        'xs' => 'size-2.5',
+        'sm' => 'size-3',
+        'md' => 'size-3.5',
+        'lg' => 'size-4',
+    ];
+    
+    $dotSizes = [
+        'xs' => 'size-1',
+        'sm' => 'size-1.5',
+        'md' => 'size-1.5',
+        'lg' => 'size-2',
+    ];
+    
+    $classes = collect([
+        $baseClasses,
+        $variantClasses[$variant] ?? $variantClasses['default'],
+        $sizeClasses[$size] ?? $sizeClasses['md'],
+    ])->filter()->join(' ');
+    
+    $iconSize = $iconSizes[$size] ?? $iconSizes['md'];
+    $dotSize = $dotSizes[$size] ?? $dotSizes['md'];
+@endphp
+
+<span {{ $attributes->class([$classes, 'gap-1.5' => $icon || $dot]) }}>
+    @if($dot)
+        <span class="relative flex {{ $dotSize }}">
+            @if($pulse)
+                <span class="absolute inline-flex h-full w-full rounded-full bg-current opacity-40 animate-ping"></span>
+            @endif
+            <span class="relative inline-flex rounded-full {{ $dotSize }} bg-current"></span>
+        </span>
+    @endif
+    @if($icon)
+        <x-dynamic-component :component="$icon" class="{{ $iconSize }} opacity-80" />
+    @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
new file mode 100644
index 000000000..48da8425f
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/button.blade.php
@@ -0,0 +1,92 @@
+{{--
+    Button Component - TailServer Theme
+    
+    Usage:
+    <x-proxmox::ui.button>Click me</x-proxmox::ui.button>
+    <x-proxmox::ui.button variant="primary" icon="ri-add-line">Add Server</x-proxmox::ui.button>
+    <x-proxmox::ui.button variant="danger" size="sm">Delete</x-proxmox::ui.button>
+    <x-proxmox::ui.button :loading="true">Processing</x-proxmox::ui.button>
+--}}
+
+@props([
+    'variant' => 'secondary',
+    'size' => 'md',
+    'icon' => null,
+    'iconRight' => null,
+    'loading' => false,
+    'loadingText' => null,
+    'disabled' => false,
+    'href' => null,
+    'type' => 'button',
+    'full' => false,
+])
+
+@php
+    $tag = $href ? 'a' : 'button';
+    
+    $baseClasses = 'group relative inline-flex items-center justify-center gap-2 rounded-lg font-semibold transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-background disabled:opacity-50 disabled:cursor-not-allowed overflow-hidden';
+    
+    $variantClasses = [
+        'primary' => 'bg-primary text-white border border-primary hover:bg-primary/90 hover:shadow-md hover:shadow-primary/20 active:scale-[0.98] focus:ring-primary/50',
+        'secondary' => 'bg-background-secondary text-base border border-neutral/30 hover:bg-background-secondary/80 hover:border-neutral/50 active:scale-[0.98] focus:ring-neutral/30',
+        'outline' => 'bg-transparent text-base border border-neutral/30 hover:bg-neutral/10 hover:border-neutral/50 focus:ring-neutral/30',
+        'ghost' => 'bg-transparent text-base hover:bg-neutral/10 focus:ring-neutral/20',
+        'danger' => 'bg-danger text-white border border-danger hover:bg-danger/90 hover:shadow-md hover:shadow-danger/20 active:scale-[0.98] focus:ring-danger/50',
+        'success' => 'bg-success text-white border border-success hover:bg-success/90 hover:shadow-md hover:shadow-success/20 active:scale-[0.98] focus:ring-success/50',
+        'warning' => 'bg-warning text-white border border-warning hover:bg-warning/90 hover:shadow-md hover:shadow-warning/20 active:scale-[0.98] focus:ring-warning/50',
+        'info' => 'bg-info text-white border border-info hover:bg-info/90 hover:shadow-md hover:shadow-info/20 active:scale-[0.98] focus:ring-info/50',
+    ];
+    
+    $sizeClasses = [
+        'xs' => 'px-2 py-1 text-xs',
+        'sm' => 'px-2.5 py-1.5 text-sm',
+        'md' => 'px-3.5 py-2 text-sm',
+        'lg' => 'px-4 py-2.5 text-base',
+        'xl' => 'px-5 py-3 text-lg',
+    ];
+    
+    $iconSizes = [
+        'xs' => 'size-3',
+        'sm' => 'size-3.5',
+        'md' => 'size-4',
+        'lg' => 'size-5',
+        'xl' => 'size-6',
+    ];
+    
+    $classes = collect([
+        $baseClasses,
+        $variantClasses[$variant] ?? $variantClasses['secondary'],
+        $sizeClasses[$size] ?? $sizeClasses['md'],
+        $full ? 'w-full' : '',
+    ])->filter()->join(' ');
+    
+    $iconSize = $iconSizes[$size] ?? $iconSizes['md'];
+@endphp
+
+<{{ $tag }}
+    @if($href) href="{{ $href }}" @endif
+    @if($tag === 'button') type="{{ $type }}" @endif
+    @if($disabled || $loading) disabled @endif
+    {{ $attributes->class([$classes]) }}
+>
+    {{-- Subtle shine effect on hover --}}
+    <span class="absolute inset-0 -translate-x-full group-hover:translate-x-full transition-transform duration-700 bg-gradient-to-r from-transparent via-white/10 to-transparent pointer-events-none"></span>
+    
+    <span class="relative inline-flex items-center gap-2">
+        @if($loading)
+            <svg class="animate-spin {{ $iconSize }}" 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>{{ $loadingText ?? $slot }}</span>
+        @else
+            @if($icon)
+                <x-dynamic-component :component="$icon" class="{{ $iconSize }} opacity-80 group-hover:opacity-100 transition-opacity" />
+            @endif
+            {{ $slot }}
+            @if($iconRight)
+                <x-dynamic-component :component="$iconRight" class="{{ $iconSize }} opacity-80 group-hover:opacity-100 transition-opacity" />
+            @endif
+        @endif
+    </span>
+</{{ $tag }}>
diff --git a/extensions/Servers/Proxmox/views/components/ui/card.blade.php b/extensions/Servers/Proxmox/views/components/ui/card.blade.php
new file mode 100644
index 000000000..004c0e312
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/card.blade.php
@@ -0,0 +1,103 @@
+{{--
+    Card Component - TailServer Theme
+    
+    Usage:
+    <x-proxmox::ui.card>Content</x-proxmox::ui.card>
+    <x-proxmox::ui.card title="Title" subtitle="Subtitle" icon="ri-server-line">Content</x-proxmox::ui.card>
+    <x-proxmox::ui.card :collapsible="true" :collapsed="false">Content</x-proxmox::ui.card>
+--}}
+
+@props([
+    'title' => null,
+    'subtitle' => null,
+    'icon' => null,
+    'iconColor' => 'text-primary',
+    'actions' => null,
+    'footer' => null,
+    'footerClass' => '',
+    'padding' => true,
+    'hover' => false,
+    'clickable' => false,
+    'collapsible' => false,
+    'collapsed' => false,
+])
+
+@php
+    $cardClasses = 'relative flex flex-col rounded-xl border border-neutral/20 bg-background-secondary shadow-sm';
+    if ($hover) {
+        $cardClasses .= ' hover:bg-background-secondary/90 hover:border-neutral/30 hover:shadow-md transition-all duration-200';
+    }
+    if ($clickable) {
+        $cardClasses .= ' cursor-pointer';
+    }
+@endphp
+
+<div 
+    {{ $attributes->class([$cardClasses]) }}
+    @if($collapsible)
+        x-data="{ isCollapsed: {{ $collapsed ? 'true' : 'false' }} }"
+    @endif
+>
+    {{-- Subtle gradient overlay for depth --}}
+    <div class="absolute inset-0 rounded-xl bg-gradient-to-b from-white/[0.02] to-transparent pointer-events-none"></div>
+    @if($title || $actions)
+        <div class="flex flex-col items-start justify-between gap-4 border-b border-neutral/20 p-5 sm:flex-row sm:items-center">
+            <div class="flex items-center gap-3">
+                @if($icon)
+                    <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
+                        <x-dynamic-component :component="$icon" class="size-5 {{ $iconColor }}" />
+                    </div>
+                @endif
+                <div>
+                    @if($title)
+                        <h3 class="text-lg font-semibold text-base">{{ $title }}</h3>
+                    @endif
+                    @if($subtitle)
+                        <p class="text-sm text-base/60 mt-0.5">{{ $subtitle }}</p>
+                    @endif
+                </div>
+            </div>
+            <div class="flex items-center gap-2">
+                @if($actions)
+                    {{ $actions }}
+                @endif
+                @if($collapsible)
+                    <button 
+                        type="button" 
+                        @click="isCollapsed = !isCollapsed"
+                        class="p-2 rounded-lg hover:bg-neutral/10 transition-colors"
+                    >
+                        <x-ri-arrow-down-s-line 
+                            class="size-5 text-base/50 transition-transform duration-200"
+                            x-bind:class="isCollapsed ? 'rotate-180' : ''" 
+                        />
+                    </button>
+                @endif
+            </div>
+        </div>
+    @endif
+
+    <div 
+        @class([
+            'flex-1',
+            'p-5' => $padding,
+        ])
+        @if($collapsible)
+            x-show="!isCollapsed"
+            x-transition:enter="transition ease-out duration-200"
+            x-transition:enter-start="opacity-0 -translate-y-2"
+            x-transition:enter-end="opacity-100 translate-y-0"
+            x-transition:leave="transition ease-in duration-150"
+            x-transition:leave-start="opacity-100 translate-y-0"
+            x-transition:leave-end="opacity-0 -translate-y-2"
+        @endif
+    >
+        {{ $slot }}
+    </div>
+
+    @if($footer)
+        <div class="border-t border-neutral/20 px-5 py-3 {{ $footerClass }}">
+            {{ $footer }}
+        </div>
+    @endif
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/confirm-dialog.blade.php b/extensions/Servers/Proxmox/views/components/ui/confirm-dialog.blade.php
new file mode 100644
index 000000000..9307da4bd
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/confirm-dialog.blade.php
@@ -0,0 +1,116 @@
+{{--
+    Confirm Dialog Component - TailServer Theme
+    For dangerous actions like delete, stop, etc.
+    
+    Usage:
+    <x-proxmox::ui.confirm-dialog
+        title="Stop Server?"
+        message="This will immediately stop the server."
+        confirm-label="Stop"
+        cancel-label="Cancel"
+        variant="danger"
+        wire:click="stopServer"
+    />
+--}}
+
+@props([
+    'title' => 'Confirm Action',
+    'message' => 'Are you sure you want to proceed?',
+    'confirmLabel' => 'Confirm',
+    'cancelLabel' => 'Cancel',
+    'variant' => 'danger', // danger, warning, primary
+    'open' => false,
+])
+
+@php
+    $variants = [
+        'danger' => [
+            'icon' => 'ri-error-warning-line',
+            'iconBg' => 'bg-danger/10',
+            'iconColor' => 'text-danger',
+            'buttonBg' => 'bg-danger hover:bg-danger/90',
+        ],
+        'warning' => [
+            'icon' => 'ri-alert-line',
+            'iconBg' => 'bg-warning/10',
+            'iconColor' => 'text-warning',
+            'buttonBg' => 'bg-warning hover:bg-warning/90',
+        ],
+        'primary' => [
+            'icon' => 'ri-question-line',
+            'iconBg' => 'bg-primary/10',
+            'iconColor' => 'text-primary',
+            'buttonBg' => 'bg-primary hover:bg-primary/90',
+        ],
+    ];
+    
+    $config = $variants[$variant] ?? $variants['danger'];
+@endphp
+
+<div
+    x-data="{ open: @js($open) }"
+    x-show="open"
+    x-cloak
+    @keydown.escape.window="open = false"
+    class="fixed inset-0 z-50 overflow-y-auto"
+    {{ $attributes->whereDoesntStartWith('wire:click') }}
+>
+    <div class="flex items-center justify-center min-h-screen p-4">
+        <!-- Backdrop -->
+        <div 
+            x-show="open"
+            x-transition:enter="ease-out duration-300"
+            x-transition:enter-start="opacity-0"
+            x-transition:enter-end="opacity-100"
+            x-transition:leave="ease-in duration-200"
+            x-transition:leave-start="opacity-100"
+            x-transition:leave-end="opacity-0"
+            @click="open = false"
+            class="fixed inset-0 bg-black/60 backdrop-blur-md"
+        ></div>
+
+        <!-- Dialog -->
+        <div
+            x-show="open"
+            x-transition:enter="ease-out duration-300"
+            x-transition:enter-start="opacity-0 scale-95 translate-y-4"
+            x-transition:enter-end="opacity-100 scale-100 translate-y-0"
+            x-transition:leave="ease-in duration-200"
+            x-transition:leave-start="opacity-100 scale-100 translate-y-0"
+            x-transition:leave-end="opacity-0 scale-95 translate-y-4"
+            class="relative bg-background rounded-2xl shadow-2xl ring-1 ring-neutral/10 w-full max-w-md p-6"
+        >
+            <div class="flex flex-col items-center text-center">
+                <!-- Icon -->
+                <div class="p-4 rounded-2xl {{ $config['iconBg'] }} mb-4 shadow-lg">
+                    <x-dynamic-component :component="$config['icon']" class="size-8 {{ $config['iconColor'] }}" />
+                </div>
+                
+                <!-- Title -->
+                <h3 class="text-lg font-semibold text-base mb-2">{{ $title }}</h3>
+                
+                <!-- Message -->
+                <p class="text-sm text-base/60 mb-6">{{ $message }}</p>
+                
+                <!-- Actions -->
+                <div class="flex gap-3 w-full">
+                    <button
+                        type="button"
+                        @click="open = false"
+                        class="flex-1 px-4 py-2.5 bg-neutral/5 hover:bg-neutral/15 rounded-xl text-sm font-medium text-base transition-all duration-200 hover:shadow-sm active:scale-95"
+                    >
+                        {{ $cancelLabel }}
+                    </button>
+                    <button
+                        type="button"
+                        @click="open = false"
+                        {{ $attributes->whereStartsWith('wire:click') }}
+                        class="flex-1 px-4 py-2.5 {{ $config['buttonBg'] }} rounded-xl text-sm font-medium text-white transition-all duration-200 shadow-md hover:shadow-lg active:scale-95"
+                    >
+                        {{ $confirmLabel }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/copy-button.blade.php b/extensions/Servers/Proxmox/views/components/ui/copy-button.blade.php
new file mode 100644
index 000000000..673c25f8b
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/copy-button.blade.php
@@ -0,0 +1,35 @@
+{{--
+    Copy Button Component - TailServer Theme
+    Small inline button to copy text to clipboard
+    
+    Usage:
+    <x-proxmox::ui.copy-button :value="$text" />
+--}}
+
+@props([
+    'value',
+])
+
+<div 
+    x-data="{
+        copied: false,
+        copyText: @js($value),
+        copyToClipboard() {
+            navigator.clipboard.writeText(this.copyText);
+            this.copied = true;
+            setTimeout(() => this.copied = false, 3000);
+        }
+    }"
+    class="inline-flex items-center"
+    {{ $attributes }}
+>
+    <button
+        @click="copyToClipboard()"
+        type="button"
+        class="text-base/50 hover:text-base/70 transition-colors relative inline-flex items-center justify-center size-4"
+        title="Copy to clipboard"
+    >
+        <x-ri-check-fill x-show="copied" x-transition x-cloak class="absolute size-4 text-success" />
+        <x-ri-file-copy-line x-show="!copied" x-transition class="absolute size-4" />
+    </button>
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/copyable.blade.php b/extensions/Servers/Proxmox/views/components/ui/copyable.blade.php
new file mode 100644
index 000000000..152f5eb9a
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/copyable.blade.php
@@ -0,0 +1,56 @@
+{{--
+    Copyable Text Component - TailServer Theme
+    Text field with copy to clipboard functionality
+    
+    Usage:
+    <x-proxmox::ui.copyable label="IPv4 Address" value="192.168.1.1" />
+--}}
+
+@props([
+    'label' => null,
+    'value',
+    'masked' => false,
+])
+
+<div class="space-y-2">
+    @if($label)
+        <label class="text-sm font-semibold text-base/70">{{ $label }}</label>
+    @endif
+    <div 
+        x-data="{
+            copied: false,
+            showValue: @js(!$masked),
+            copyText: @js($value),
+            copyToClipboard() {
+                navigator.clipboard.writeText(this.copyText);
+                this.copied = true;
+                setTimeout(() => this.copied = false, 3000);
+            }
+        }"
+        class="group flex items-center gap-2 border border-neutral/15 rounded-xl bg-gradient-to-r from-neutral/5 to-transparent px-3.5 py-2.5 text-sm text-base hover:border-neutral/30 transition-all duration-200 shadow-sm hover:shadow"
+    >
+        @if($masked)
+            <span class="truncate flex-1 font-mono" x-text="showValue ? copyText : '••••••••••••'"></span>
+            <button 
+                @click="showValue = !showValue" 
+                type="button"
+                class="text-base/40 hover:text-primary transition-colors duration-200"
+                :aria-label="showValue ? 'Hide value' : 'Show value'"
+            >
+                <x-ri-eye-line x-show="!showValue" class="size-4" />
+                <x-ri-eye-off-line x-show="showValue" x-cloak class="size-4" />
+            </button>
+        @else
+            <span class="truncate flex-1 font-mono">{{ $value }}</span>
+        @endif
+        <button 
+            @click="copyToClipboard()" 
+            type="button"
+            class="text-base/40 hover:text-primary transition-all duration-200 relative inline-flex items-center justify-center size-5 hover:scale-110 active:scale-95"
+            aria-label="Copy to clipboard"
+        >
+            <x-ri-check-fill x-show="copied" x-transition x-cloak class="absolute size-4 text-success" />
+            <x-ri-file-copy-line x-show="!copied" x-transition class="absolute size-4" />
+        </button>
+    </div>
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/dropdown-divider.blade.php b/extensions/Servers/Proxmox/views/components/ui/dropdown-divider.blade.php
new file mode 100644
index 000000000..3e362f41a
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/dropdown-divider.blade.php
@@ -0,0 +1,5 @@
+{{--
+    Dropdown Divider Component - TailServer Theme
+--}}
+
+<hr class="my-2 border-neutral/20" />
diff --git a/extensions/Servers/Proxmox/views/components/ui/dropdown-item.blade.php b/extensions/Servers/Proxmox/views/components/ui/dropdown-item.blade.php
new file mode 100644
index 000000000..08d46e43f
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/dropdown-item.blade.php
@@ -0,0 +1,38 @@
+{{--
+    Dropdown Item Component - TailServer Theme
+--}}
+
+@props([
+    'href' => null,
+    'icon' => null,
+    'variant' => 'default',
+    'disabled' => false,
+])
+
+@php
+    $tag = $href ? 'a' : 'button';
+    
+    $variantClasses = [
+        'default' => 'text-base/70 hover:bg-gradient-to-r hover:from-neutral/10 hover:to-transparent hover:text-base',
+        'danger' => 'text-danger hover:bg-gradient-to-r hover:from-danger/10 hover:to-transparent',
+        'success' => 'text-success hover:bg-gradient-to-r hover:from-success/10 hover:to-transparent',
+    ];
+    
+    $variantClass = $variantClasses[$variant] ?? $variantClasses['default'];
+@endphp
+
+<{{ $tag }}
+    @if($href) href="{{ $href }}" @endif
+    @if($tag === 'button') type="button" @endif
+    @if($disabled) disabled @endif
+    {{ $attributes->class([
+        'group flex w-full items-center gap-2.5 px-4 py-2.5 text-sm font-medium transition-all duration-150',
+        $variantClass,
+        'opacity-50 cursor-not-allowed' => $disabled,
+    ]) }}
+>
+    @if($icon)
+        <x-dynamic-component :component="$icon" class="size-4 opacity-50 group-hover:opacity-80 transition-opacity" />
+    @endif
+    <span class="flex-1 text-left">{{ $slot }}</span>
+</{{ $tag }}>
diff --git a/extensions/Servers/Proxmox/views/components/ui/dropdown.blade.php b/extensions/Servers/Proxmox/views/components/ui/dropdown.blade.php
new file mode 100644
index 000000000..c3c538a2c
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/dropdown.blade.php
@@ -0,0 +1,61 @@
+{{--
+    Dropdown Component - TailServer Theme
+    
+    Usage:
+    <x-proxmox::ui.dropdown>
+        <x-slot:trigger>
+            <x-proxmox::ui.button>Options</x-proxmox::ui.button>
+        </x-slot:trigger>
+        
+        <x-proxmox::ui.dropdown-item href="/profile">Profile</x-proxmox::ui.dropdown-item>
+        <x-proxmox::ui.dropdown-item href="/settings">Settings</x-proxmox::ui.dropdown-item>
+        <x-proxmox::ui.dropdown-divider />
+        <x-proxmox::ui.dropdown-item wire:click="logout" variant="danger">Sign out</x-proxmox::ui.dropdown-item>
+    </x-proxmox::ui.dropdown>
+--}}
+
+@props([
+    'align' => 'right',
+    'width' => '48',
+    'contentClasses' => '',
+])
+
+@php
+    $alignClasses = [
+        'left' => 'ltr:origin-top-left rtl:origin-top-right start-0',
+        'right' => 'ltr:origin-top-right rtl:origin-top-left end-0',
+        'center' => 'origin-top left-1/2 -translate-x-1/2',
+    ];
+    
+    $widthClasses = [
+        '32' => 'w-32',
+        '40' => 'w-40',
+        '48' => 'w-48',
+        '56' => 'w-56',
+        '64' => 'w-64',
+        '80' => 'w-80',
+    ];
+@endphp
+
+<div class="relative inline-block" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false">
+    <div @click="open = !open">
+        {{ $trigger }}
+    </div>
+
+    <div
+        x-show="open"
+        x-transition:enter="transition ease-out duration-200"
+        x-transition:enter-start="opacity-0 scale-95 -translate-y-1"
+        x-transition:enter-end="opacity-100 scale-100 translate-y-0"
+        x-transition:leave="transition ease-in duration-100"
+        x-transition:leave-start="opacity-100 scale-100 translate-y-0"
+        x-transition:leave-end="opacity-0 scale-95 -translate-y-1"
+        class="absolute z-50 mt-2 {{ $widthClasses[$width] ?? 'w-48' }} {{ $alignClasses[$align] ?? $alignClasses['right'] }}"
+        style="display: none;"
+        @click="open = false"
+    >
+        <div class="rounded-xl bg-background-secondary py-2 ring-1 ring-neutral/10 shadow-2xl border border-neutral/5 backdrop-blur-xl {{ $contentClasses }}">
+            {{ $slot }}
+        </div>
+    </div>
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/editable-field.blade.php b/extensions/Servers/Proxmox/views/components/ui/editable-field.blade.php
new file mode 100644
index 000000000..2a04c7dfc
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/editable-field.blade.php
@@ -0,0 +1,148 @@
+{{--
+    Editable Field Component - TailServer Theme
+    A field with display value and edit button that opens a modal
+    
+    Usage:
+    <x-proxmox::ui.editable-field 
+        label="Hostname"
+        :value="$server->hostname"
+        :editing="$isEditingHostname"
+        wire:model="hostname"
+        edit-click="startEditingHostname"
+        cancel-click="cancelEditingHostname"
+        save-click="updateHostname"
+    >
+        <x-slot:hint>
+            Additional information about the field...
+        </x-slot:hint>
+    </x-proxmox::ui.editable-field>
+--}}
+
+@props([
+    'label',
+    'value',
+    'placeholder' => null,
+    'editing' => false,
+    'editClick' => null,
+    'cancelClick' => null,
+    'saveClick' => null,
+    'applyClick' => null,
+    'applyLabel' => 'Save & Apply',
+    'error' => null,
+])
+
+<div class="space-y-2" x-data="{ showEditModal: @entangle($attributes->wire('model')->value() ? 'isEditing' . ucfirst($label) : 'editing') }">
+    <label class="text-sm font-semibold text-base/80">{{ $label }}</label>
+    <div class="space-y-2">
+        <div class="flex items-center gap-2 border border-neutral/20 rounded-lg bg-neutral/5 px-3 py-2 text-sm text-base">
+            <span class="truncate flex-1">{{ $value ?? 'Not set' }}</span>
+            @if($editClick)
+                <button 
+                    wire:click="{{ $editClick }}" 
+                    type="button"
+                    class="text-base/50 hover:text-base/70 transition-colors"
+                    aria-label="Edit {{ $label }}"
+                >
+                    <x-ri-edit-line class="size-4" />
+                </button>
+            @endif
+        </div>
+    </div>
+
+    @if($editing !== false)
+        <!-- Edit Modal Backdrop -->
+        <div 
+            x-cloak 
+            x-show="showEditModal" 
+            x-transition:enter="transition ease-out duration-200"
+            x-transition:enter-start="opacity-0"
+            x-transition:enter-end="opacity-100"
+            x-transition:leave="transition ease-in duration-150"
+            x-transition:leave-start="opacity-100"
+            x-transition:leave-end="opacity-0"
+            @click="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
+            @keydown.escape.window="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
+            class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+            style="display: none;"
+        ></div>
+        
+        <!-- Edit Modal -->
+        <div 
+            x-cloak 
+            x-show="showEditModal" 
+            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-150"
+            x-transition:leave-start="opacity-100 scale-100"
+            x-transition:leave-end="opacity-0 scale-95"
+            @click.away="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
+            class="fixed inset-0 z-50 flex items-center justify-center p-4"
+            style="display: none;"
+        >
+            <div class="relative bg-background border border-neutral/20 rounded-xl shadow-2xl w-full max-w-xl p-5 space-y-4">
+                <div class="flex items-center justify-between">
+                    <h4 class="text-base font-semibold text-base/90">Edit {{ $label }}</h4>
+                    <button 
+                        type="button"
+                        class="p-1.5 rounded-lg hover:bg-neutral/10 transition-colors"
+                        @click="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
+                        aria-label="Close"
+                    >
+                        <x-ri-close-line class="size-4 text-base/60" />
+                    </button>
+                </div>
+                
+                <div class="space-y-3">
+                    <div>
+                        <label class="text-xs font-semibold text-base/70">{{ $label }}</label>
+                        <input 
+                            type="text"
+                            {{ $attributes->whereStartsWith('wire:model') }}
+                            class="w-full mt-1 px-3 py-2 bg-neutral/5 border border-neutral/20 rounded-lg text-sm text-base placeholder:text-base/40 focus:outline-none focus:ring-2 focus:ring-primary/50"
+                            placeholder="{{ $placeholder ?? 'Enter ' . strtolower($label) }}"
+                        />
+                    </div>
+                    
+                    @if($error)
+                        <div class="text-sm text-danger">{{ $error }}</div>
+                    @endif
+                    
+                    @if(isset($hint))
+                        <div class="text-xs text-base/60">{{ $hint }}</div>
+                    @endif
+                </div>
+                
+                <div class="flex justify-end gap-2 pt-2">
+                    @if($cancelClick)
+                        <button 
+                            type="button" 
+                            @click="showEditModal = false; $wire.{{ $cancelClick }}()"
+                            class="px-4 py-2 text-sm font-medium text-base/70 hover:text-base bg-neutral/5 hover:bg-neutral/10 rounded-lg transition-colors"
+                        >
+                            Cancel
+                        </button>
+                    @endif
+                    @if($saveClick)
+                        <button 
+                            type="button" 
+                            wire:click="{{ $saveClick }}"
+                            class="px-4 py-2 text-sm font-medium text-white bg-primary hover:bg-primary/90 rounded-lg transition-colors"
+                        >
+                            Save
+                        </button>
+                    @endif
+                    @if($applyClick)
+                        <button 
+                            type="button" 
+                            wire:click="{{ $applyClick }}"
+                            class="px-4 py-2 text-sm font-medium text-white bg-primary hover:bg-primary/90 rounded-lg transition-colors"
+                        >
+                            {{ $applyLabel }}
+                        </button>
+                    @endif
+                </div>
+            </div>
+        </div>
+    @endif
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/empty-state.blade.php b/extensions/Servers/Proxmox/views/components/ui/empty-state.blade.php
new file mode 100644
index 000000000..7a0a74706
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/empty-state.blade.php
@@ -0,0 +1,72 @@
+{{--
+    Empty State Component - TailServer Theme
+    
+    Usage:
+    <x-proxmox::ui.empty-state title="No servers found" />
+    <x-proxmox::ui.empty-state 
+        title="No servers" 
+        description="Get started by creating your first server."
+        icon="ri-server-line"
+    >
+        <x-proxmox::ui.button variant="primary">Create Server</x-proxmox::ui.button>
+    </x-proxmox::ui.empty-state>
+--}}
+
+@props([
+    'title' => 'No data',
+    'description' => null,
+    'icon' => 'ri-inbox-line',
+    'iconClass' => null,
+    'compact' => false,
+])
+
+<div 
+    {{ $attributes->class([
+        'flex flex-col items-center justify-center text-center',
+        'py-12 px-6' => !$compact,
+        'py-6 px-4' => $compact,
+    ]) }}
+>
+    @if($icon)
+        <div @class([
+            'relative flex items-center justify-center rounded-full',
+            'mb-4 w-16 h-16 bg-neutral/5' => !$compact,
+            'mb-3 w-12 h-12 bg-neutral/5' => $compact,
+        ])>
+            {{-- Decorative ring --}}
+            <div class="absolute inset-0 rounded-full border border-dashed border-neutral/20"></div>
+            <x-dynamic-component 
+                :component="$icon" 
+                @class([
+                    $iconClass ?? 'text-base/25',
+                    'size-8' => !$compact,
+                    'size-6' => $compact,
+                ])
+            />
+        </div>
+    @endif
+    
+    <h3 @class([
+        'font-semibold text-base/80',
+        'text-base' => !$compact,
+        'text-sm' => $compact,
+    ])>
+        {{ $title }}
+    </h3>
+    
+    @if($description)
+        <p @class([
+            'text-base/50 max-w-sm leading-relaxed',
+            'mt-1.5 text-sm' => !$compact,
+            'mt-1 text-xs' => $compact,
+        ])>
+            {{ $description }}
+        </p>
+    @endif
+    
+    @if($slot->isNotEmpty())
+        <div @class(['mt-5' => !$compact, 'mt-3' => $compact])>
+            {{ $slot }}
+        </div>
+    @endif
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/help-modal.blade.php b/extensions/Servers/Proxmox/views/components/ui/help-modal.blade.php
new file mode 100644
index 000000000..5a3e1fd50
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/help-modal.blade.php
@@ -0,0 +1,83 @@
+{{--
+    Help Modal Trigger Component - TailServer Theme
+    Question mark button that opens an info modal
+    
+    Usage:
+    <x-proxmox::ui.help-modal title="Server Details" icon="ri-server-line">
+        <x-slot:description>
+            Displays comprehensive information about your virtual machine...
+        </x-slot:description>
+        <x-slot:details>
+            <p><span class="font-semibold">Status:</span> Shows the current power state...</p>
+        </x-slot:details>
+    </x-proxmox::ui.help-modal>
+--}}
+
+@props([
+    'title',
+    'icon' => 'ri-question-line',
+])
+
+<div class="relative" x-data="{ open: false }" x-cloak {{ $attributes }}>
+    <button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
+        <x-ri-question-line class="size-4" />
+    </button>
+    
+    <!-- Modal Backdrop -->
+    <div 
+        x-show="open" 
+        x-transition:enter="transition ease-out duration-200"
+        x-transition:enter-start="opacity-0"
+        x-transition:enter-end="opacity-100"
+        x-transition:leave="transition ease-in duration-150"
+        x-transition:leave-start="opacity-100"
+        x-transition:leave-end="opacity-0"
+        @click="open = false"
+        @keydown.escape.window="open = false"
+        class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+        style="display: none;"
+    ></div>
+    
+    <!-- Modal Content -->
+    <div 
+        x-show="open"
+        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-150"
+        x-transition:leave-start="opacity-100 scale-100"
+        x-transition:leave-end="opacity-0 scale-95"
+        @click.away="open = false"
+        class="fixed inset-0 z-50 flex items-center justify-center p-4"
+        style="display: none;"
+    >
+        <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background rounded-xl border border-neutral/20 shadow-2xl p-6">
+            <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
+                <x-ri-close-line class="size-5" />
+            </button>
+            
+            <div class="flex items-center gap-3 mb-4 pr-8">
+                <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
+                    <x-dynamic-component :component="$icon" class="size-5 text-primary" />
+                </div>
+                <h6 class="font-sans text-lg font-semibold leading-tight text-base">
+                    {{ $title }}
+                </h6>
+            </div>
+            
+            @if(isset($description))
+                <div class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
+                    {{ $description }}
+                </div>
+            @endif
+            
+            @if(isset($details))
+                <div class="pt-4 mt-4 border-t border-neutral/20 space-y-2.5 text-xs leading-relaxed text-base/75">
+                    {{ $details }}
+                </div>
+            @endif
+            
+            {{ $slot }}
+        </div>
+    </div>
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/icon-picker.blade.php b/extensions/Servers/Proxmox/views/components/ui/icon-picker.blade.php
new file mode 100644
index 000000000..ac0e3459c
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/icon-picker.blade.php
@@ -0,0 +1,169 @@
+{{--
+    Icon Picker Component - TailServer Theme
+    Modal-based icon picker with search and categories
+    
+    Usage:
+    <x-proxmox::ui.icon-picker :icons="$icons" wire:model="selectedIcon" />
+--}}
+
+@props([
+    'icons' => [],
+    'categories' => [],
+    'selected' => null,
+])
+
+<div
+    x-data="{
+        open: false,
+        search: '',
+        activeCategory: 'all',
+        icons: @js($icons),
+        selected: @entangle($attributes->wire('model')),
+        get filteredIcons() {
+            let filtered = this.icons;
+            if (this.search) {
+                const search = this.search.toLowerCase();
+                filtered = filtered.filter(icon => 
+                    icon.name.toLowerCase().includes(search) ||
+                    (icon.keywords && icon.keywords.some(k => k.toLowerCase().includes(search)))
+                );
+            }
+            if (this.activeCategory !== 'all') {
+                filtered = filtered.filter(icon => icon.category === this.activeCategory);
+            }
+            return filtered;
+        }
+    }"
+    {{ $attributes->whereDoesntStartWith('wire:model') }}
+>
+    <!-- Trigger Button -->
+    <button
+        type="button"
+        @click="open = true"
+        class="flex items-center gap-2 px-3 py-2 bg-neutral/5 hover:bg-neutral/10 rounded-lg border border-neutral/20 transition-colors"
+    >
+        <template x-if="selected">
+            <x-dynamic-component x-bind:component="selected" class="size-5 text-primary" />
+        </template>
+        <template x-if="!selected">
+            <x-ri-image-add-line class="size-5 text-base/40" />
+        </template>
+        <span class="text-sm text-base">Select Icon</span>
+    </button>
+
+    <!-- Modal -->
+    <div
+        x-show="open"
+        x-cloak
+        @keydown.escape.window="open = false"
+        class="fixed inset-0 z-50 overflow-y-auto"
+    >
+        <div class="flex items-center justify-center min-h-screen p-4">
+            <!-- Backdrop -->
+            <div 
+                x-show="open"
+                x-transition:enter="ease-out duration-200"
+                x-transition:enter-start="opacity-0"
+                x-transition:enter-end="opacity-100"
+                x-transition:leave="ease-in duration-150"
+                x-transition:leave-start="opacity-100"
+                x-transition:leave-end="opacity-0"
+                @click="open = false"
+                class="fixed inset-0 bg-black/50"
+            ></div>
+
+            <!-- Modal Content -->
+            <div
+                x-show="open"
+                x-transition:enter="ease-out duration-200"
+                x-transition:enter-start="opacity-0 scale-95"
+                x-transition:enter-end="opacity-100 scale-100"
+                x-transition:leave="ease-in duration-150"
+                x-transition:leave-start="opacity-100 scale-100"
+                x-transition:leave-end="opacity-0 scale-95"
+                class="relative bg-background rounded-xl shadow-2xl w-full max-w-2xl max-h-[80vh] overflow-hidden"
+            >
+                <!-- Header -->
+                <div class="p-4 border-b border-neutral/10">
+                    <div class="flex items-center justify-between mb-3">
+                        <h3 class="text-lg font-semibold text-base">Select Icon</h3>
+                        <button @click="open = false" class="p-1 rounded hover:bg-neutral/10 text-base/40 hover:text-base">
+                            <x-ri-close-line class="size-5" />
+                        </button>
+                    </div>
+                    
+                    <!-- Search -->
+                    <div class="relative">
+                        <x-ri-search-line class="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-base/40" />
+                        <input
+                            type="text"
+                            x-model="search"
+                            placeholder="Search icons..."
+                            class="w-full pl-10 pr-4 py-2 bg-neutral/5 border border-neutral/20 rounded-lg text-sm text-base placeholder:text-base/40 focus:outline-none focus:ring-2 focus:ring-primary/50"
+                        />
+                    </div>
+                </div>
+
+                <!-- Categories -->
+                @if(count($categories) > 0)
+                    <div class="flex gap-2 p-4 border-b border-neutral/10 overflow-x-auto">
+                        <button
+                            @click="activeCategory = 'all'"
+                            :class="activeCategory === 'all' ? 'bg-primary text-white' : 'bg-neutral/5 text-base hover:bg-neutral/10'"
+                            class="px-3 py-1 rounded-full text-xs font-medium transition-colors whitespace-nowrap"
+                        >
+                            All
+                        </button>
+                        @foreach($categories as $category)
+                            <button
+                                @click="activeCategory = '{{ $category['id'] }}'"
+                                :class="activeCategory === '{{ $category['id'] }}' ? 'bg-primary text-white' : 'bg-neutral/5 text-base hover:bg-neutral/10'"
+                                class="px-3 py-1 rounded-full text-xs font-medium transition-colors whitespace-nowrap"
+                            >
+                                {{ $category['name'] }}
+                            </button>
+                        @endforeach
+                    </div>
+                @endif
+
+                <!-- Icons Grid -->
+                <div class="p-4 overflow-y-auto max-h-80">
+                    <div class="grid grid-cols-8 gap-2">
+                        <template x-for="icon in filteredIcons" :key="icon.name">
+                            <button
+                                @click="selected = icon.component; open = false;"
+                                :class="selected === icon.component ? 'ring-2 ring-primary bg-primary/10' : 'hover:bg-neutral/10'"
+                                class="flex items-center justify-center p-3 rounded-lg transition-colors"
+                                :title="icon.name"
+                            >
+                                <x-dynamic-component x-bind:component="icon.component" class="size-6 text-base" />
+                            </button>
+                        </template>
+                    </div>
+                    
+                    <!-- Empty State -->
+                    <div x-show="filteredIcons.length === 0" class="py-8 text-center">
+                        <x-ri-search-line class="size-12 mx-auto text-base/20 mb-3" />
+                        <p class="text-sm text-base/50">No icons found matching your search.</p>
+                    </div>
+                </div>
+
+                <!-- Footer -->
+                <div class="p-4 border-t border-neutral/10 flex items-center justify-between">
+                    <button
+                        @click="selected = null"
+                        class="px-3 py-1.5 text-sm text-base/60 hover:text-base"
+                    >
+                        Clear Selection
+                    </button>
+                    <button
+                        @click="open = false"
+                        class="px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-primary/90 transition-colors"
+                    >
+                        Done
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/index.blade.php b/extensions/Servers/Proxmox/views/components/ui/index.blade.php
new file mode 100644
index 000000000..738fd9c13
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/index.blade.php
@@ -0,0 +1,249 @@
+{{--
+    Proxmox UI Component Library Index
+    ===================================
+    
+    This file documents all available UI components for the Proxmox server views.
+    All components follow the TailServer theme using CSS variables for consistent styling.
+    
+    CSS Variables Used:
+    - --color-background: Page background color
+    - --color-neutral: Neutral/gray tones
+    - --color-primary: Primary accent color (purple)
+    - --color-base: Text color
+    - --color-success: Success/positive states
+    - --color-warning: Warning states
+    - --color-danger: Error/danger states
+    - --color-info: Informational states
+    
+    === LAYOUT COMPONENTS ===
+    
+    1. Card (ui.card)
+       @props(['title', 'subtitle', 'icon', 'collapsible', 'collapsed', 'padding', 'noPadding'])
+       Container component for grouping related content.
+       
+    2. Section Header (ui.section-header)
+       @props(['title', 'subtitle', 'icon', 'help', 'helpTitle', 'helpContent'])
+       Page/section titles with optional help modal.
+       
+    3. Modal (ui.modal)
+       @props(['name', 'title', 'maxWidth', 'closeable'])
+       Overlay dialog with Alpine.js transitions.
+       
+    4. Tabs (ui.tabs)
+       @props(['tabs', 'active', 'variant'])
+       Tab navigation (default, pills, buttons variants).
+       
+    5. Tab Panel (ui.tab-panel)
+       @props(['name', 'active'])
+       Tab content panel with transitions.
+       
+    6. Help Modal (ui.help-modal)
+       @props(['title', 'icon'])
+       Question mark trigger that opens info modal with description and details slots.
+       
+    === DATA DISPLAY COMPONENTS ===
+    
+    7. Stat Card (ui.stat-card)
+       @props(['label', 'value', 'icon', 'trend', 'progress', 'variant'])
+       Statistics display with progress bar support.
+       
+    8. Badge (ui.badge)
+       @props(['variant', 'dot', 'icon', 'size', 'rounded'])
+       Status/label badges with icons.
+       
+    9. Progress (ui.progress)
+       @props(['value', 'max', 'showLabel', 'size', 'variant', 'animated'])
+       Progress bars with auto-coloring thresholds.
+       
+    10. Server Status (ui.server-status)
+        @props(['status', 'size', 'showLabel'])
+        VM status indicator (running, stopped, paused, etc).
+        
+    11. Resource Gauge (ui.resource-gauge)
+        @props(['label', 'value', 'max', 'unit', 'icon', 'showPercentage', 'size'])
+        Resource usage display with progress bar.
+        
+    12. Info Row (ui.info-row)
+        @props(['label', 'value', 'copyable', 'icon', 'muted'])
+        Key-value pair display with copy functionality.
+        
+    13. Empty State (ui.empty-state)
+        @props(['title', 'description', 'icon'])
+        Placeholder for empty content areas.
+        
+    14. Allocation Card (ui.allocation-card)
+        @props(['label', 'percent', 'usageSummary', 'entitlementLabel', 'description', 'gradient', 'badge'])
+        Resource allocation vs entitlement display with gradient progress bar.
+        
+    15. Network Address Card (ui.network-address-card)
+        @props(['type', 'ip', 'gateway', 'netmask', 'cidr', 'isPublic', 'isIpv6', 'guestInterface', 'fromGuestAgent'])
+        IP address card with gateway, netmask, network tools, and guest agent details.
+        
+    === TABLE COMPONENTS ===
+    
+    16. Table (ui.table)
+        @props(['striped', 'hoverable', 'compact', 'bordered'])
+        Table wrapper with styling options.
+        
+    17. Table Row (ui.table-row)
+        @props(['hoverable', 'clickable', 'selected'])
+        Table row with interaction states.
+        
+    18. Table Header Cell (ui.table-th)
+        @props(['sortable', 'sorted', 'direction', 'align'])
+        Table header with sorting support.
+        
+    19. Table Data Cell (ui.table-td)
+        @props(['align', 'nowrap'])
+        Table cell with alignment options.
+        
+    === FORM COMPONENTS ===
+    
+    20. Button (ui.button)
+        @props(['variant', 'size', 'icon', 'iconPosition', 'loading', 'disabled', 'full'])
+        Multi-variant buttons with loading states.
+        
+    21. Input (ui.input)
+        @props(['label', 'error', 'icon', 'iconPosition', 'hint'])
+        Form text input with icon support.
+        
+    22. Select (ui.select)
+        @props(['label', 'error', 'options', 'placeholder', 'icon', 'hint'])
+        Form select dropdown.
+        
+    23. Toggle (ui.toggle)
+        @props(['label', 'description', 'disabled'])
+        Toggle/switch input.
+        
+    24. Editable Field (ui.editable-field)
+        @props(['label', 'value', 'editing', 'editClick', 'cancelClick', 'saveClick', 'applyClick', 'error'])
+        Display field with edit button that opens a modal editor.
+        
+    === INTERACTIVE COMPONENTS ===
+    
+    25. Dropdown (ui.dropdown)
+        @props(['align', 'width', 'contentClasses'])
+        Dropdown menu container.
+        
+    26. Dropdown Item (ui.dropdown-item)
+        @props(['icon', 'danger', 'disabled'])
+        Dropdown menu item.
+        
+    27. Dropdown Divider (ui.dropdown-divider)
+        Dropdown menu separator.
+        
+    28. Action Toolbar (ui.action-toolbar)
+        @props(['centered'])
+        Container for VM action buttons.
+        
+    29. Action Button (ui.action-button)
+        @props(['action', 'icon', 'label', 'variant', 'disabled', 'loading', 'confirm', 'size'])
+        VM control action button.
+        
+    30. Icon Picker (ui.icon-picker)
+        @props(['icons', 'categories', 'selected'])
+        Modal-based icon selection.
+        
+    31. Tooltip (ui.tooltip)
+        @props(['text', 'position'])
+        Hover tooltip.
+        
+    32. Confirm Dialog (ui.confirm-dialog)
+        @props(['title', 'message', 'confirmLabel', 'cancelLabel', 'variant', 'open'])
+        Confirmation modal for dangerous actions.
+        
+    33. Copy Button (ui.copy-button)
+        @props(['value'])
+        Small inline button to copy text to clipboard.
+        
+    34. Copyable (ui.copyable)
+        @props(['label', 'value', 'masked'])
+        Text field with copy to clipboard and optional masking.
+        
+    === FEEDBACK COMPONENTS ===
+    
+    35. Alert (ui.alert)
+        @props(['variant', 'title', 'dismissible', 'icon'])
+        Alert/notification messages.
+        
+    36. Spinner (ui.spinner)
+        @props(['size', 'color'])
+        Loading spinner animation.
+        
+    37. Notice Banner (ui.notice-banner)
+        @props(['title', 'variant', 'collapsible', 'storageKey', 'icon', 'showCondition'])
+        Collapsible notice/alert banner with localStorage persistence.
+        
+    === USAGE EXAMPLES ===
+    
+    -- Server Status Badge --
+    <x-proxmox::ui.server-status status="running" showLabel />
+    
+    -- Resource Usage --
+    <x-proxmox::ui.resource-gauge 
+        label="Memory" 
+        :value="2048" 
+        :max="4096" 
+        unit="MB" 
+        icon="ri-ram-line" 
+    />
+    
+    -- Allocation Card --
+    <x-proxmox::ui.allocation-card
+        label="CPU Allocation"
+        :percent="45"
+        usage-summary="1.8 / 4 vCPU"
+        entitlement-label="4 vCPU entitlement"
+        description="Live hypervisor usage."
+        :badge="['label' => 'Healthy', 'class' => 'text-success bg-success/15']"
+    />
+    
+    -- Action Toolbar --
+    <x-proxmox::ui.action-toolbar>
+        <x-proxmox::ui.action-button 
+            wire:click="startServer" 
+            icon="ri-play-fill" 
+            label="Start" 
+            variant="success"
+        />
+        <x-proxmox::ui.action-button 
+            wire:click="stopServer" 
+            icon="ri-stop-fill" 
+            label="Stop" 
+            variant="danger"
+            confirm="Are you sure you want to stop this server?"
+        />
+    </x-proxmox::ui.action-toolbar>
+    
+    -- Card with Stats --
+    <x-proxmox::ui.card title="Server Resources" icon="ri-server-line">
+        <div class="grid grid-cols-2 gap-4">
+            <x-proxmox::ui.stat-card label="CPU Usage" value="45%" icon="ri-cpu-line" :progress="45" />
+            <x-proxmox::ui.stat-card label="Memory" value="2GB/4GB" icon="ri-ram-line" :progress="50" />
+        </div>
+    </x-proxmox::ui.card>
+    
+    -- Notice Banner --
+    <x-proxmox::ui.notice-banner 
+        title="Important Notice"
+        variant="warning"
+        :collapsible="true"
+        storage-key="my-notice-collapsed"
+    >
+        <p class="text-xs text-base/70">Your notice content here...</p>
+    </x-proxmox::ui.notice-banner>
+    
+    -- Help Modal --
+    <x-proxmox::ui.help-modal title="Feature Help" icon="ri-server-line">
+        <x-slot:description>
+            Brief description of the feature.
+        </x-slot:description>
+        <x-slot:details>
+            <p><span class="font-semibold">Item:</span> Detailed explanation...</p>
+        </x-slot:details>
+    </x-proxmox::ui.help-modal>
+    
+    -- Copyable Field --
+    <x-proxmox::ui.copyable label="IP Address" value="192.168.1.1" />
+    <x-proxmox::ui.copyable label="Password" value="secret123" :masked="true" />
+--}}
diff --git a/extensions/Servers/Proxmox/views/components/ui/info-row.blade.php b/extensions/Servers/Proxmox/views/components/ui/info-row.blade.php
new file mode 100644
index 000000000..a591509a5
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/info-row.blade.php
@@ -0,0 +1,51 @@
+{{--
+    Info Row / Key-Value Pair Component - TailServer Theme
+    
+    Usage:
+    <x-proxmox::ui.info-row label="IP Address" value="192.168.1.1" />
+    <x-proxmox::ui.info-row label="Status" :copyable="true">
+        <x-proxmox::ui.badge variant="success">Active</x-proxmox::ui.badge>
+    </x-proxmox::ui.info-row>
+--}}
+
+@props([
+    'label',
+    'value' => null,
+    'copyable' => false,
+    'icon' => null,
+    'muted' => false,
+])
+
+<div {{ $attributes->class(['flex items-center justify-between py-2 border-b border-neutral/10 last:border-b-0']) }}>
+    <div class="flex items-center gap-2 text-sm text-base/60">
+        @if($icon)
+            <x-dynamic-component :component="$icon" class="size-4" />
+        @endif
+        <span>{{ $label }}</span>
+    </div>
+    <div class="flex items-center gap-2">
+        <span @class([
+            'text-sm font-medium',
+            'text-base/50' => $muted,
+            'text-base' => !$muted,
+        ])>
+            {{ $value ?? $slot }}
+        </span>
+        @if($copyable && $value)
+            <button 
+                type="button"
+                x-data="{ copied: false }"
+                @click="
+                    navigator.clipboard.writeText('{{ $value }}');
+                    copied = true;
+                    setTimeout(() => copied = false, 2000);
+                "
+                class="p-1 rounded hover:bg-neutral/10 transition-colors text-base/40 hover:text-base/70"
+                title="Copy to clipboard"
+            >
+                <x-ri-file-copy-line x-show="!copied" class="size-4" />
+                <x-ri-check-line x-show="copied" x-cloak class="size-4 text-success" />
+            </button>
+        @endif
+    </div>
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/input.blade.php b/extensions/Servers/Proxmox/views/components/ui/input.blade.php
new file mode 100644
index 000000000..22eeb2320
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/input.blade.php
@@ -0,0 +1,93 @@
+{{--
+    Input Component - TailServer Theme
+    
+    Usage:
+    <x-proxmox::ui.input name="email" label="Email" />
+    <x-proxmox::ui.input name="search" placeholder="Search..." icon="ri-search-line" />
+    <x-proxmox::ui.input name="password" type="password" label="Password" error="Password is required" />
+--}}
+
+@props([
+    'type' => 'text',
+    'name' => null,
+    'label' => null,
+    'placeholder' => null,
+    'icon' => null,
+    'iconRight' => null,
+    'error' => null,
+    'hint' => null,
+    'disabled' => false,
+    'readonly' => false,
+    'required' => false,
+    'size' => 'md',
+])
+
+@php
+    $sizeClasses = [
+        'sm' => 'py-1.5 text-sm',
+        'md' => 'py-2 text-sm',
+        'lg' => 'py-2.5 text-base',
+    ];
+    $sizeClass = $sizeClasses[$size] ?? $sizeClasses['md'];
+    
+    $inputClasses = 'block w-full rounded-xl border bg-background leading-6 placeholder-base/40 shadow-sm transition-all duration-200 focus:ring-2 focus:ring-offset-0 focus:shadow-md hover:border-neutral/50 hover:shadow';
+    
+    if ($error) {
+        $inputClasses .= ' border-danger/50 focus:border-danger focus:ring-danger/25 focus:shadow-danger/10';
+    } else {
+        $inputClasses .= ' border-neutral/30 focus:border-primary focus:ring-primary/25 focus:shadow-primary/10';
+    }
+    
+    if ($icon) {
+        $inputClasses .= ' ps-10';
+    } else {
+        $inputClasses .= ' ps-3';
+    }
+    
+    if ($iconRight) {
+        $inputClasses .= ' pe-10';
+    } else {
+        $inputClasses .= ' pe-3';
+    }
+@endphp
+
+<div {{ $attributes->only('class')->class(['']) }}>
+    @if($label)
+        <label @if($name) for="{{ $name }}" @endif class="block text-sm font-medium text-base/80 mb-1.5">
+            {{ $label }}
+            @if($required)
+                <span class="text-danger">*</span>
+            @endif
+        </label>
+    @endif
+    
+    <div class="relative group/input">
+        @if($icon)
+            <div class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3 text-base/40 transition-colors duration-200 group-focus-within/input:text-primary">
+                <x-dynamic-component :component="$icon" class="size-5" />
+            </div>
+        @endif
+        
+        <input
+            type="{{ $type }}"
+            @if($name) name="{{ $name }}" id="{{ $name }}" @endif
+            @if($placeholder) placeholder="{{ $placeholder }}" @endif
+            @if($disabled) disabled @endif
+            @if($readonly) readonly @endif
+            @if($required) required @endif
+            {{ $attributes->except('class')->class([$inputClasses, $sizeClass]) }}
+        />
+        
+        @if($iconRight)
+            <div class="pointer-events-none absolute inset-y-0 end-0 flex items-center pe-3 text-base/40 transition-colors duration-200 group-focus-within/input:text-primary">
+                <x-dynamic-component :component="$iconRight" class="size-5" />
+            </div>
+        @endif
+    </div>
+    
+    @if($error)
+        <p class="mt-1.5 text-xs text-danger">{{ $error }}</p>
+    @elseif($hint)
+        <p class="mt-1.5 text-xs text-base/50">{{ $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
new file mode 100644
index 000000000..cef36f467
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/modal.blade.php
@@ -0,0 +1,115 @@
+{{--
+    Modal Component - TailServer Theme
+    
+    Usage:
+    <x-proxmox::ui.modal name="my-modal" title="Modal Title">Content</x-proxmox::ui.modal>
+    
+    Open with: $dispatch('open-modal', { name: 'my-modal' })
+    Close with: $dispatch('close-modal', { name: 'my-modal' })
+--}}
+
+@props([
+    'name',
+    'title' => null,
+    'subtitle' => null,
+    'icon' => null,
+    'iconColor' => 'text-primary',
+    'maxWidth' => 'md',
+    'closeable' => true,
+    'footer' => null,
+])
+
+@php
+    $maxWidthClasses = [
+        'sm' => 'max-w-sm',
+        'md' => 'max-w-md',
+        'lg' => 'max-w-lg',
+        'xl' => 'max-w-xl',
+        '2xl' => 'max-w-2xl',
+        '3xl' => 'max-w-3xl',
+        '4xl' => 'max-w-4xl',
+        '5xl' => 'max-w-5xl',
+        'full' => 'max-w-full mx-4',
+    ];
+    $maxWidthClass = $maxWidthClasses[$maxWidth] ?? $maxWidthClasses['md'];
+@endphp
+
+<div
+    x-data="{ show: false }"
+    x-on:open-modal.window="if ($event.detail.name === '{{ $name }}') show = true"
+    x-on:close-modal.window="if ($event.detail.name === '{{ $name }}') show = false"
+    x-on:keydown.escape.window="@if($closeable) show = false @endif"
+    x-show="show"
+    x-cloak
+    class="fixed inset-0 z-50 overflow-y-auto"
+    {{ $attributes }}
+>
+    {{-- Backdrop --}}
+    <div 
+        x-show="show"
+        x-transition:enter="transition ease-out duration-300"
+        x-transition:enter-start="opacity-0"
+        x-transition:enter-end="opacity-100"
+        x-transition:leave="transition ease-in duration-200"
+        x-transition:leave-start="opacity-100"
+        x-transition:leave-end="opacity-0"
+        @if($closeable) @click="show = false" @endif
+        class="fixed inset-0 bg-black/60 backdrop-blur-md"
+    ></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-300"
+            x-transition:enter-start="opacity-0 scale-95 translate-y-4"
+            x-transition:enter-end="opacity-100 scale-100 translate-y-0"
+            x-transition:leave="transition ease-in duration-200"
+            x-transition:leave-start="opacity-100 scale-100 translate-y-0"
+            x-transition:leave-end="opacity-0 scale-95 translate-y-4"
+            @click.stop
+            class="relative w-full {{ $maxWidthClass }} max-h-[90vh] overflow-y-auto bg-background-secondary rounded-2xl border border-neutral/20 shadow-2xl ring-1 ring-black/5"
+        >
+            {{-- Header --}}
+            @if($title || $closeable)
+                <div class="flex items-start justify-between gap-4 p-6 border-b border-neutral/10">
+                    <div class="flex items-center gap-3">
+                        @if($icon)
+                            <div class="flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-xl bg-gradient-to-br from-primary/20 to-primary/5 shadow-sm">
+                                <x-dynamic-component :component="$icon" class="size-5 {{ $iconColor }}" /> />
+                            </div>
+                        @endif
+                        <div>
+                            @if($title)
+                                <h3 class="text-lg font-semibold text-base">{{ $title }}</h3>
+                            @endif
+                            @if($subtitle)
+                                <p class="text-sm text-base/60 mt-0.5">{{ $subtitle }}</p>
+                            @endif
+                        </div>
+                    </div>
+                    @if($closeable)
+                        <button 
+                            @click="show = false" 
+                            class="flex-shrink-0 p-2 -m-2 text-base/40 hover:text-base transition-all duration-200 rounded-xl hover:bg-neutral/10 hover:rotate-90"
+                        >
+                            <x-ri-close-line class="size-5" />
+                        </button>
+                    @endif
+                </div>
+            @endif
+            
+            {{-- Content --}}
+            <div class="p-6">
+                {{ $slot }}
+            </div>
+            
+            {{-- Footer --}}
+            @if($footer)
+                <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-neutral/10 bg-gradient-to-t from-neutral/5 to-transparent">
+                    {{ $footer }}
+                </div>
+            @endif
+        </div>
+    </div>
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/network-address-card.blade.php b/extensions/Servers/Proxmox/views/components/ui/network-address-card.blade.php
new file mode 100644
index 000000000..d58517d00
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/network-address-card.blade.php
@@ -0,0 +1,191 @@
+{{--
+    Network Address Card Component - TailServer Theme
+    For displaying IP address information with gateway, netmask, and tools
+    
+    Usage:
+    <x-proxmox::ui.network-address-card
+        :network="$network"
+        :cidr="$cidr"
+        :is-public="$isPublic"
+        :is-ipv6="$isIpv6"
+        :guest-interface="$guestInterface"
+    />
+--}}
+
+@props([
+    'type' => 'ipv4',
+    'ip',
+    'gateway' => null,
+    'netmask' => null,
+    'cidr' => null,
+    'isPublic' => false,
+    'isIpv6' => false,
+    'guestInterface' => null,
+    'fromGuestAgent' => false,
+])
+
+<x-proxmox::ui.card class="mb-4">
+    {{-- Header --}}
+    <div class="flex items-center justify-between mb-4">
+        <h3 class="text-lg font-semibold text-base">{{ strtoupper($type) }} Address</h3>
+        <x-proxmox::ui.badge variant="default">
+            {{ $type === 'ipv6' ? 'IPv6' : 'IPv4' }}
+        </x-proxmox::ui.badge>
+    </div>
+
+    {{-- Address Grid --}}
+    <div class="grid md:grid-cols-3 grid-cols-1 gap-4 network-tools-grid">
+        {{-- IP Address --}}
+        <div class="flex flex-col gap-2 min-w-0">
+            <h4 class="text-sm font-semibold text-base/70">IP Address</h4>
+            <div class="flex items-center gap-2">
+                <span class="text-base font-semibold text-base/80">{{ $ip }}</span>
+                <x-proxmox::ui.copy-button :value="$ip" />
+            </div>
+            @if($cidr)
+                <p class="text-xs text-base/50 mt-1">CIDR: {{ $ip }}{{ $cidr }}</p>
+            @endif
+        </div>
+
+        {{-- Gateway --}}
+        <div class="flex flex-col gap-2 min-w-0">
+            <h4 class="text-sm font-semibold text-base/70">Gateway</h4>
+            <div class="flex items-center gap-2">
+                <span class="text-base font-semibold text-base/80">{{ $gateway ?? 'N/A' }}</span>
+                @if($gateway)
+                    <x-proxmox::ui.copy-button :value="$gateway" />
+                @endif
+            </div>
+            <p class="text-xs text-base/50 mt-1">
+                {{ $fromGuestAgent && !$gateway ? 'Not configured in database' : 'Default route for this network' }}
+            </p>
+        </div>
+
+        {{-- Netmask --}}
+        <div class="flex flex-col gap-2 min-w-0">
+            <h4 class="text-sm font-semibold text-base/70">Subnet Mask</h4>
+            <div class="flex items-center gap-2">
+                <span class="text-base font-semibold text-base/80">{{ $netmask ?? 'N/A' }}</span>
+                @if($netmask)
+                    <x-proxmox::ui.copy-button :value="$netmask" />
+                @endif
+            </div>
+            <p class="text-xs text-base/50 mt-1 break-words">
+                {{ $fromGuestAgent && !$netmask ? 'Not configured in database' : 'Network address range mask' }}
+            </p>
+        </div>
+
+        {{-- Network Tools (for public IPs) --}}
+        @if($isPublic)
+            <div class="network-tools-column flex flex-col gap-2 relative min-w-0 @if($guestInterface) network-tools-with-details @endif">
+                <div class="flex-1"></div>
+                <div class="flex gap-2 justify-end mt-auto">
+                    @if($isIpv6)
+                        <x-proxmox::ui.button 
+                            variant="primary"
+                            size="sm"
+                            onclick="window.open('https://ping6.ping.pe/{{ $ip }}', '_blank')"
+                        >
+                            Ping
+                        </x-proxmox::ui.button>
+                        <x-proxmox::ui.button 
+                            variant="primary"
+                            size="sm"
+                            onclick="window.open('https://mtr6.ping.pe/{{ $ip }}', '_blank')"
+                        >
+                            MTR
+                        </x-proxmox::ui.button>
+                        <x-proxmox::ui.button 
+                            variant="primary"
+                            size="sm"
+                            onclick="window.open('https://bgp.ping.pe/{{ $ip }}', '_blank')"
+                        >
+                            BGP
+                        </x-proxmox::ui.button>
+                    @else
+                        <x-proxmox::ui.button 
+                            variant="primary"
+                            size="sm"
+                            onclick="window.open('https://ping.pe/{{ $ip }}', '_blank')"
+                        >
+                            Ping
+                        </x-proxmox::ui.button>
+                        <x-proxmox::ui.button 
+                            variant="primary"
+                            size="sm"
+                            onclick="window.open('https://mtr.ping.pe/{{ $ip }}', '_blank')"
+                        >
+                            MTR
+                        </x-proxmox::ui.button>
+                        <x-proxmox::ui.button 
+                            variant="primary"
+                            size="sm"
+                            onclick="window.open('https://bgp.ping.pe/{{ $ip }}', '_blank')"
+                        >
+                            BGP
+                        </x-proxmox::ui.button>
+                    @endif
+                </div>
+            </div>
+        @endif
+    </div>
+
+    {{-- Guest Agent Technical Details --}}
+    @if($guestInterface)
+        <div 
+            class="border-t border-neutral/20 pt-4 mt-4"
+            x-data="{ isAdvancedView: localStorage.getItem('proxmox-view-mode') === 'advanced' }"
+            x-init="
+                isAdvancedView = localStorage.getItem('proxmox-view-mode') === 'advanced';
+                window.addEventListener('proxmox-view-mode-changed', (e) => {
+                    isAdvancedView = e.detail.isAdvancedView;
+                });
+            "
+            x-show="isAdvancedView"
+            x-transition
+        >
+            <h4 class="text-sm font-semibold text-base/70 mb-3">Technical Details (Guest Agent)</h4>
+            <div class="grid md:grid-cols-2 grid-cols-1 gap-4">
+                @if(isset($guestInterface['hardware-address']))
+                    <div class="flex flex-col gap-1">
+                        <span class="text-xs font-semibold text-base/60">MAC Address</span>
+                        <div class="flex items-center gap-2">
+                            <span class="text-sm font-mono text-base/80">{{ $guestInterface['hardware-address'] }}</span>
+                            <x-proxmox::ui.copy-button :value="$guestInterface['hardware-address']" />
+                        </div>
+                        <p class="text-xs text-base/50 mt-1">Hardware address for this interface</p>
+                    </div>
+                @endif
+
+                @if(isset($guestInterface['name']))
+                    <div class="flex flex-col gap-1">
+                        <span class="text-xs font-semibold text-base/60">Interface Name</span>
+                        <span class="text-sm font-mono text-base/80">{{ $guestInterface['name'] }}</span>
+                        <p class="text-xs text-base/50 mt-1">Network interface identifier within the guest OS</p>
+                    </div>
+                @endif
+
+                @if(isset($guestInterface['statistics']))
+                    <div class="flex flex-col gap-1">
+                        <span class="text-xs font-semibold text-base/60">Statistics</span>
+                        <div class="text-xs text-base/60 space-y-1">
+                            @if(isset($guestInterface['statistics']['rx-bytes']))
+                                <div>RX: {{ number_format($guestInterface['statistics']['rx-bytes']) }} bytes</div>
+                            @endif
+                            @if(isset($guestInterface['statistics']['tx-bytes']))
+                                <div>TX: {{ number_format($guestInterface['statistics']['tx-bytes']) }} bytes</div>
+                            @endif
+                            @if(isset($guestInterface['statistics']['rx-packets']))
+                                <div>RX Packets: {{ number_format($guestInterface['statistics']['rx-packets']) }}</div>
+                            @endif
+                            @if(isset($guestInterface['statistics']['tx-packets']))
+                                <div>TX Packets: {{ number_format($guestInterface['statistics']['tx-packets']) }}</div>
+                            @endif
+                        </div>
+                        <p class="text-xs text-base/50 mt-1">Network traffic statistics from guest OS</p>
+                    </div>
+                @endif
+            </div>
+        </div>
+    @endif
+</x-proxmox::ui.card>
diff --git a/extensions/Servers/Proxmox/views/components/ui/notice-banner.blade.php b/extensions/Servers/Proxmox/views/components/ui/notice-banner.blade.php
new file mode 100644
index 000000000..6aa4c4c69
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/notice-banner.blade.php
@@ -0,0 +1,98 @@
+{{--
+    Info Notice / Alert Banner Component - TailServer Theme
+    Collapsible notice banners for important information
+    
+    Usage:
+    <x-proxmox::ui.notice-banner 
+        title="Cloud-init Configuration Notice"
+        variant="info"
+        :collapsible="true"
+        storage-key="overview-notice-collapsed"
+    >
+        <p>Your notice content here...</p>
+    </x-proxmox::ui.notice-banner>
+--}}
+
+@props([
+    'title' => null,
+    'variant' => 'info', // info, warning, danger, success
+    'collapsible' => false,
+    'storageKey' => null,
+    'icon' => null,
+    'showCondition' => null, // Alpine.js expression for conditional display
+])
+
+@php
+    $variants = [
+        'info' => [
+            'bg' => 'bg-info/10',
+            'border' => 'border-info/30',
+            'icon' => $icon ?? 'ri-information-line',
+            'iconColor' => 'text-info',
+        ],
+        'warning' => [
+            'bg' => 'bg-warning/10',
+            'border' => 'border-warning/30',
+            'icon' => $icon ?? 'ri-alert-line',
+            'iconColor' => 'text-warning',
+        ],
+        'danger' => [
+            'bg' => 'bg-danger/10',
+            'border' => 'border-danger/30',
+            'icon' => $icon ?? 'ri-error-warning-line',
+            'iconColor' => 'text-danger',
+        ],
+        'success' => [
+            'bg' => 'bg-success/10',
+            'border' => 'border-success/30',
+            'icon' => $icon ?? 'ri-checkbox-circle-line',
+            'iconColor' => 'text-success',
+        ],
+    ];
+    
+    $config = $variants[$variant] ?? $variants['info'];
+@endphp
+
+<div 
+    @if($collapsible)
+        x-data="{
+            isCollapsed: {{ $storageKey ? "localStorage.getItem('$storageKey') === 'true'" : 'false' }},
+            toggle() {
+                this.isCollapsed = !this.isCollapsed;
+                @if($storageKey)
+                    localStorage.setItem('{{ $storageKey }}', this.isCollapsed);
+                @endif
+            }
+        }"
+    @endif
+    @if($showCondition)
+        x-show="{{ $showCondition }}"
+        x-transition
+    @endif
+    {{ $attributes->class([
+        $config['bg'],
+        'border',
+        $config['border'],
+        'rounded-lg p-4',
+    ]) }}
+>
+    <div class="flex items-start gap-3">
+        <x-dynamic-component :component="$config['icon']" class="size-5 {{ $config['iconColor'] }} flex-shrink-0 mt-0.5" />
+        <div class="flex-1 min-w-0">
+            @if($title)
+                <div class="flex items-center justify-between mb-2">
+                    <h3 class="text-sm font-semibold text-base">{{ $title }}</h3>
+                    @if($collapsible)
+                        <button @click="toggle()" type="button" class="text-base/60 hover:text-base transition-colors">
+                            <x-ri-arrow-down-s-line x-bind:class="isCollapsed ? 'size-4 transition-transform rotate-180' : 'size-4 transition-transform'" />
+                        </button>
+                    @endif
+                </div>
+            @endif
+            
+            <div @if($collapsible) x-show="!isCollapsed" x-transition @endif>
+                {{ $slot }}
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/progress.blade.php b/extensions/Servers/Proxmox/views/components/ui/progress.blade.php
new file mode 100644
index 000000000..919efa12f
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/progress.blade.php
@@ -0,0 +1,80 @@
+{{--
+    Progress Bar Component - TailServer Theme
+    
+    Usage:
+    <x-proxmox::ui.progress :value="75" />
+    <x-proxmox::ui.progress :value="90" color="danger" showLabel />
+    <x-proxmox::ui.progress :value="60" color="auto" />
+--}}
+
+@props([
+    'value' => 0,
+    'max' => 100,
+    'color' => 'primary',
+    'size' => 'md',
+    'showLabel' => false,
+    'label' => null,
+    'gradient' => null,
+    'animated' => false,
+    'striped' => false,
+])
+
+@php
+    $percent = $max > 0 ? min(100, ($value / $max) * 100) : 0;
+    
+    $colorClasses = [
+        'primary' => 'bg-primary',
+        'secondary' => 'bg-secondary',
+        'success' => 'bg-success',
+        'warning' => 'bg-warning',
+        'danger' => 'bg-danger',
+        'info' => 'bg-info',
+    ];
+    
+    $sizeClasses = [
+        'xs' => 'h-1',
+        'sm' => 'h-1.5',
+        'md' => 'h-2',
+        'lg' => 'h-2.5',
+        'xl' => 'h-3',
+    ];
+    
+    $colorClass = $colorClasses[$color] ?? $colorClasses['primary'];
+    $sizeClass = $sizeClasses[$size] ?? $sizeClasses['md'];
+    
+    // Auto-select color based on value if specified
+    if ($color === 'auto') {
+        if ($percent >= 90) {
+            $colorClass = $colorClasses['danger'];
+        } elseif ($percent >= 70) {
+            $colorClass = $colorClasses['warning'];
+        } else {
+            $colorClass = $colorClasses['success'];
+        }
+    }
+@endphp
+
+<div {{ $attributes->class(['w-full']) }}>
+    @if($showLabel || $label)
+        <div class="flex items-center justify-between text-xs mb-1.5">
+            <span class="text-base/50 font-medium">{{ $label ?? 'Usage' }}</span>
+            <span class="font-semibold text-base/70">{{ number_format($percent, 1) }}%</span>
+        </div>
+    @endif
+    <div class="{{ $sizeClass }} rounded-full bg-neutral/10 overflow-hidden">
+        <div 
+            @class([
+                $sizeClass,
+                'rounded-full transition-all duration-500 ease-out',
+                $colorClass => !$gradient,
+                'animate-pulse' => $animated,
+                'bg-[length:1rem_1rem] bg-gradient-to-r from-white/20 via-transparent to-transparent' => $striped,
+            ])
+            @if($gradient)
+                style="width: {{ $percent }}%; background-image: {{ $gradient }};"
+            @else
+                style="width: {{ $percent }}%;"
+            @endif
+        ></div>
+    </div>
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/resource-gauge.blade.php b/extensions/Servers/Proxmox/views/components/ui/resource-gauge.blade.php
new file mode 100644
index 000000000..6841fa36b
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/resource-gauge.blade.php
@@ -0,0 +1,103 @@
+{{--
+    Resource Gauge Component - TailServer Theme
+    Shows a circular or linear gauge for resource usage
+    
+    Usage:
+    <x-proxmox::ui.resource-gauge :value="75" label="CPU" />
+    <x-proxmox::ui.resource-gauge :value="45" label="Memory" :max="100" suffix="%" />
+--}}
+
+@props([
+    'value' => 0,
+    'max' => 100,
+    'label',
+    'sublabel' => null,
+    'suffix' => '%',
+    'prefix' => null,
+    'icon' => null,
+    'gradient' => null,
+    'color' => 'auto',
+])
+
+@php
+    $percent = $max > 0 ? min(100, ($value / $max) * 100) : 0;
+    
+    // Auto-color based on usage
+    if ($color === 'auto') {
+        if ($percent >= 90) {
+            $color = 'danger';
+        } elseif ($percent >= 70) {
+            $color = 'warning';
+        } else {
+            $color = 'success';
+        }
+    }
+    
+    $colorClasses = [
+        'primary' => 'text-primary',
+        'success' => 'text-success',
+        'warning' => 'text-warning',
+        'danger' => 'text-danger',
+        'info' => 'text-info',
+    ];
+    
+    $bgColorClasses = [
+        'primary' => 'bg-primary',
+        'success' => 'bg-success',
+        'warning' => 'bg-warning',
+        'danger' => 'bg-danger',
+        'info' => 'bg-info',
+    ];
+    
+    $textColor = $colorClasses[$color] ?? $colorClasses['primary'];
+    $bgColor = $bgColorClasses[$color] ?? $bgColorClasses['primary'];
+    
+    $badgeLabel = match(true) {
+        $percent >= 100 => 'Over entitlement',
+        $percent >= 85 => 'Watchlist',
+        default => 'Healthy',
+    };
+    
+    $badgeClass = match(true) {
+        $percent >= 100 => 'text-danger bg-danger/15',
+        $percent >= 85 => 'text-warning bg-warning/15',
+        default => 'text-success bg-success/15',
+    };
+@endphp
+
+<div {{ $attributes->class(['border border-neutral/15 rounded-2xl p-5 bg-gradient-to-br from-background to-neutral/5 shadow-sm hover:shadow-md transition-shadow duration-300 flex flex-col gap-4']) }}>
+    <div class="flex items-start justify-between gap-3">
+        <div>
+            <p class="text-xs font-semibold tracking-wide uppercase text-base/50">{{ $label }}</p>
+            <p class="text-xl font-bold tracking-tight">
+                @if($prefix){{ $prefix }}@endif{{ is_numeric($value) ? number_format($value, 1) : $value }}@if($suffix){{ $suffix }}@endif
+            </p>
+            @if($sublabel)
+                <p class="text-xs text-base/50 mt-0.5">{{ $sublabel }}</p>
+            @endif
+        </div>
+        <span class="text-[10px] font-semibold px-2.5 py-1 rounded-full {{ $badgeClass }} shadow-sm">
+            {{ $badgeLabel }}
+        </span>
+    </div>
+    
+    <div>
+        <div class="flex items-center justify-between text-xs text-base/50 mb-1.5">
+            <span>Usage</span>
+            <span class="font-medium">{{ number_format($percent, 1) }}%</span>
+        </div>
+        <div class="h-2.5 rounded-full bg-neutral/10 overflow-hidden shadow-inner">
+            <div 
+                class="h-full rounded-full transition-all duration-700 ease-out relative overflow-hidden"
+                @if($gradient)
+                    style="width: {{ min($percent, 130) }}%; background-image: {{ $gradient }};"
+                @else
+                    style="width: {{ min($percent, 130) }}%;"
+                    class="{{ $bgColor }}"
+                @endif
+            >
+                <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full animate-shimmer"></div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/section-header.blade.php b/extensions/Servers/Proxmox/views/components/ui/section-header.blade.php
new file mode 100644
index 000000000..2d8337c9d
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/section-header.blade.php
@@ -0,0 +1,109 @@
+{{--
+    Section Header Component - TailServer Theme
+    
+    Usage:
+    <x-proxmox::ui.section-header title="Section Title" />
+    <x-proxmox::ui.section-header title="Title" subtitle="Subtitle" icon="ri-server-line">
+        <x-slot:actions>
+            <x-proxmox::ui.button>Action</x-proxmox::ui.button>
+        </x-slot:actions>
+    </x-proxmox::ui.section-header>
+--}}
+
+@props([
+    'title',
+    'subtitle' => null,
+    'icon' => null,
+    'iconColor' => 'text-primary',
+    'actions' => null,
+    'helpText' => null,
+    'size' => 'lg',
+])
+
+@php
+    $titleSizes = [
+        'sm' => 'text-base font-semibold',
+        'md' => 'text-lg font-semibold',
+        'lg' => 'text-xl font-semibold',
+        'xl' => 'text-2xl font-bold',
+    ];
+    $titleClass = $titleSizes[$size] ?? $titleSizes['lg'];
+@endphp
+
+<div {{ $attributes->class(['flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between']) }}>
+    <div class="flex items-start gap-3">
+        @if($icon)
+            <div class="flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
+                <x-dynamic-component :component="$icon" class="size-5 {{ $iconColor }}" />
+            </div>
+        @endif
+        <div>
+            <div class="flex items-center gap-2 min-w-0">
+                <h2 class="{{ $titleClass }} text-base break-words">{{ $title }}</h2>
+                @if($helpText)
+                    <div class="relative" x-data="{ open: false }" x-cloak>
+                        <button 
+                            type="button" 
+                            @click="open = true" 
+                            class="text-base/50 hover:text-base/70 transition-colors"
+                        >
+                            <x-ri-question-line class="size-4" />
+                        </button>
+                        {{-- Help Modal --}}
+                        <div 
+                            x-show="open"
+                            x-transition:enter="transition ease-out duration-300"
+                            x-transition:enter-start="opacity-0"
+                            x-transition:enter-end="opacity-100"
+                            x-transition:leave="transition ease-in duration-200"
+                            x-transition:leave-start="opacity-100"
+                            x-transition:leave-end="opacity-0"
+                            @click="open = false"
+                            @keydown.escape.window="open = false"
+                            class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                            style="display: none;"
+                        ></div>
+                        <div 
+                            x-show="open"
+                            x-transition:enter="transition ease-out duration-300"
+                            x-transition:enter-start="opacity-0 scale-95"
+                            x-transition:enter-end="opacity-100 scale-100"
+                            x-transition:leave="transition ease-in duration-200"
+                            x-transition:leave-start="opacity-100 scale-100"
+                            x-transition:leave-end="opacity-0 scale-95"
+                            @click.away="open = false"
+                            class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                            style="display: none;"
+                        >
+                            <div class="relative w-full max-w-lg max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
+                                <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
+                                    <x-ri-close-line class="size-5" />
+                                </button>
+                                <div class="flex items-center gap-3 mb-4 pr-8">
+                                    @if($icon)
+                                        <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
+                                            <x-dynamic-component :component="$icon" class="size-5 {{ $iconColor }}" />
+                                        </div>
+                                    @endif
+                                    <h6 class="text-lg font-semibold">{{ $title }}</h6>
+                                </div>
+                                <div class="text-sm text-base/70 leading-relaxed">
+                                    {{ $helpText }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                @endif
+            </div>
+            @if($subtitle)
+                <p class="text-sm text-base/60 mt-0.5">{{ $subtitle }}</p>
+            @endif
+        </div>
+    </div>
+    
+    @if($actions)
+        <div class="flex items-center gap-2 flex-shrink-0">
+            {{ $actions }}
+        </div>
+    @endif
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/select.blade.php b/extensions/Servers/Proxmox/views/components/ui/select.blade.php
new file mode 100644
index 000000000..c075e2a91
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/select.blade.php
@@ -0,0 +1,67 @@
+{{--
+    Select Component - TailServer Theme
+    
+    Usage:
+    <x-proxmox::ui.select name="country" label="Country">
+        <option value="us">United States</option>
+        <option value="uk">United Kingdom</option>
+    </x-proxmox::ui.select>
+--}}
+
+@props([
+    'name' => null,
+    'label' => null,
+    'error' => null,
+    'hint' => null,
+    'disabled' => false,
+    'required' => false,
+    'size' => 'md',
+])
+
+@php
+    $sizeClasses = [
+        'sm' => 'py-1.5 text-sm',
+        'md' => 'py-2 text-sm',
+        'lg' => 'py-2.5 text-base',
+    ];
+    $sizeClass = $sizeClasses[$size] ?? $sizeClasses['md'];
+    
+    $selectClasses = 'block w-full rounded-xl border bg-background px-3 leading-6 shadow-sm transition-all duration-200 focus:ring-2 focus:ring-offset-0 focus:shadow-md hover:border-neutral/50 hover:shadow appearance-none cursor-pointer';
+    
+    if ($error) {
+        $selectClasses .= ' border-danger/50 focus:border-danger focus:ring-danger/25 focus:shadow-danger/10';
+    } else {
+        $selectClasses .= ' border-neutral/30 focus:border-primary focus:ring-primary/25 focus:shadow-primary/10';
+    }
+@endphp
+
+<div {{ $attributes->only('class')->class(['']) }}>
+    @if($label)
+        <label @if($name) for="{{ $name }}" @endif class="block text-sm font-medium text-base/80 mb-1.5">
+            {{ $label }}
+            @if($required)
+                <span class="text-danger">*</span>
+            @endif
+        </label>
+    @endif
+    
+    <div class="relative group/select">
+        <select
+            @if($name) name="{{ $name }}" id="{{ $name }}" @endif
+            @if($disabled) disabled @endif
+            @if($required) required @endif
+            {{ $attributes->except('class')->class([$selectClasses, $sizeClass]) }}
+        >
+            {{ $slot }}
+        </select>
+        <div class="pointer-events-none absolute inset-y-0 end-0 flex items-center pe-3 text-base/40 transition-all duration-200 group-focus-within/select:text-primary group-hover/select:text-base/60">
+            <x-ri-arrow-down-s-line class="size-5 transition-transform duration-200 group-focus-within/select:rotate-180" />
+        </div>
+    </div>
+    
+    @if($error)
+        <p class="mt-1.5 text-xs text-danger">{{ $error }}</p>
+    @elseif($hint)
+        <p class="mt-1.5 text-xs text-base/50">{{ $hint }}</p>
+    @endif
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/server-status.blade.php b/extensions/Servers/Proxmox/views/components/ui/server-status.blade.php
new file mode 100644
index 000000000..7fee27282
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/server-status.blade.php
@@ -0,0 +1,139 @@
+{{--
+    Server Status Indicator Component - TailServer Theme
+    
+    Usage:
+    <x-proxmox::ui.server-status status="running" />
+    <x-proxmox::ui.server-status status="stopped" showLabel />
+    <x-proxmox::ui.server-status status="running" minimal />
+--}}
+
+@props([
+    'status',
+    'showLabel' => true,
+    'size' => 'md',
+    'minimal' => false,
+])
+
+@php
+    $statusConfig = [
+        'running' => [
+            'color' => 'success',
+            'label' => 'Running',
+            'pulse' => true,
+        ],
+        'stopped' => [
+            'color' => 'muted',
+            'label' => 'Stopped',
+            'pulse' => false,
+        ],
+        'paused' => [
+            'color' => 'warning',
+            'label' => 'Paused',
+            'pulse' => false,
+        ],
+        'suspended' => [
+            'color' => 'warning',
+            'label' => 'Suspended',
+            'pulse' => false,
+        ],
+        'migrating' => [
+            'color' => 'info',
+            'label' => 'Migrating',
+            'pulse' => true,
+        ],
+        'starting' => [
+            'color' => 'info',
+            'label' => 'Starting',
+            'pulse' => true,
+        ],
+        'stopping' => [
+            'color' => 'warning',
+            'label' => 'Stopping',
+            'pulse' => true,
+        ],
+        'unknown' => [
+            'color' => 'danger',
+            'label' => 'Unknown',
+            'pulse' => false,
+        ],
+    ];
+    
+    $config = $statusConfig[strtolower($status)] ?? $statusConfig['unknown'];
+    
+    $colorClasses = [
+        'success' => 'text-success',
+        'warning' => 'text-warning',
+        'danger' => 'text-danger',
+        'info' => 'text-info',
+        'muted' => 'text-base/40',
+    ];
+    
+    $bgClasses = [
+        'success' => 'bg-success/10',
+        'warning' => 'bg-warning/10',
+        'danger' => 'bg-danger/10',
+        'info' => 'bg-info/10',
+        'muted' => 'bg-neutral/10',
+    ];
+    
+    $dotColorClasses = [
+        'success' => 'bg-success',
+        'warning' => 'bg-warning',
+        'danger' => 'bg-danger',
+        'info' => 'bg-info',
+        'muted' => 'bg-base/40',
+    ];
+    
+    $sizeClasses = [
+        'sm' => 'text-xs px-2 py-1 gap-1.5',
+        'md' => 'text-sm px-2.5 py-1.5 gap-2',
+        'lg' => 'text-base px-3 py-2 gap-2',
+    ];
+    
+    $dotSizes = [
+        'sm' => 'h-1.5 w-1.5',
+        'md' => 'h-2 w-2',
+        'lg' => 'h-2.5 w-2.5',
+    ];
+    
+    $textSizes = [
+        'sm' => 'text-xs',
+        'md' => 'text-sm',
+        'lg' => 'text-base',
+    ];
+@endphp
+
+@if($minimal)
+    {{-- Minimal dot-only variant --}}
+    <div {{ $attributes->class(['inline-flex items-center', 'gap-1.5' => $showLabel]) }}>
+        <span class="relative flex {{ $dotSizes[$size] ?? $dotSizes['md'] }}">
+            @if($config['pulse'])
+                <span class="absolute inline-flex h-full w-full rounded-full {{ $dotColorClasses[$config['color']] ?? $dotColorClasses['muted'] }} opacity-60 animate-ping"></span>
+            @endif
+            <span class="relative inline-flex rounded-full {{ $dotSizes[$size] ?? $dotSizes['md'] }} {{ $dotColorClasses[$config['color']] ?? $dotColorClasses['muted'] }}"></span>
+        </span>
+        @if($showLabel)
+            <span class="font-medium {{ $colorClasses[$config['color']] ?? $colorClasses['muted'] }} {{ $textSizes[$size] ?? $textSizes['md'] }}">{{ $config['label'] }}</span>
+        @endif
+    </div>
+@else
+    {{-- Full badge variant --}}
+    <div 
+        {{ $attributes->class([
+            'inline-flex items-center font-semibold rounded-lg',
+            $bgClasses[$config['color']] ?? $bgClasses['muted'],
+            $colorClasses[$config['color']] ?? $colorClasses['muted'],
+            $sizeClasses[$size] ?? $sizeClasses['md'],
+        ]) }}
+    >
+        <span class="relative flex {{ $dotSizes[$size] ?? $dotSizes['md'] }}">
+            @if($config['pulse'])
+                <span class="absolute inline-flex h-full w-full rounded-full bg-current opacity-50 animate-ping"></span>
+            @endif
+            <span class="relative inline-flex rounded-full {{ $dotSizes[$size] ?? $dotSizes['md'] }} bg-current"></span>
+        </span>
+        @if($showLabel)
+            <span>{{ $config['label'] }}</span>
+        @endif
+    </div>
+@endif
diff --git a/extensions/Servers/Proxmox/views/components/ui/spinner.blade.php b/extensions/Servers/Proxmox/views/components/ui/spinner.blade.php
new file mode 100644
index 000000000..c03ca0dd8
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/spinner.blade.php
@@ -0,0 +1,46 @@
+{{--
+    Spinner Component - TailServer Theme
+    
+    Usage:
+    <x-proxmox::ui.spinner />
+    <x-proxmox::ui.spinner size="lg" color="primary" />
+--}}
+
+@props([
+    'size' => 'md',
+    'color' => 'current',
+])
+
+@php
+    $sizeClasses = [
+        'xs' => 'size-3',
+        'sm' => 'size-4',
+        'md' => 'size-6',
+        'lg' => 'size-8',
+        'xl' => 'size-12',
+    ];
+    
+    $colorClasses = [
+        'current' => 'text-current',
+        'primary' => 'text-primary',
+        'secondary' => 'text-secondary',
+        'success' => 'text-success',
+        'warning' => 'text-warning',
+        'danger' => 'text-danger',
+        'info' => 'text-info',
+        'muted' => 'text-base/50',
+    ];
+    
+    $sizeClass = $sizeClasses[$size] ?? $sizeClasses['md'];
+    $colorClass = $colorClasses[$color] ?? $colorClasses['current'];
+@endphp
+
+<svg 
+    {{ $attributes->class(['animate-spin drop-shadow-sm', $sizeClass, $colorClass]) }} 
+    xmlns="http://www.w3.org/2000/svg" 
+    fill="none" 
+    viewBox="0 0 24 24"
+>
+    <circle class="opacity-20" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+    <path class="opacity-80" 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>
diff --git a/extensions/Servers/Proxmox/views/components/ui/stat-card.blade.php b/extensions/Servers/Proxmox/views/components/ui/stat-card.blade.php
new file mode 100644
index 000000000..535234110
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/stat-card.blade.php
@@ -0,0 +1,75 @@
+{{--
+    Stat Card Component - TailServer Theme
+    
+    Usage:
+    <x-proxmox::ui.stat-card value="12" label="CPU %" />
+    <x-proxmox::ui.stat-card value="8.5" suffix="GB" label="Memory" icon="ri-database-2-line" />
+    <x-proxmox::ui.stat-card value="3" label="Servers" status="success" statusText="All active" />
+--}}
+
+@props([
+    'value',
+    'label',
+    'suffix' => null,
+    'prefix' => null,
+    'icon' => null,
+    'iconClass' => 'text-primary/30',
+    'status' => null,
+    'statusText' => null,
+    'href' => null,
+    'progress' => null,
+    'progressColor' => 'bg-primary',
+    'clickable' => false,
+    'compact' => false,
+])
+
+@php
+    $tag = $href ? 'a' : 'div';
+    $statusClasses = [
+        'success' => 'text-success bg-success/10',
+        'warning' => 'text-warning bg-warning/10',
+        'danger' => 'text-danger bg-danger/10',
+        'info' => 'text-info bg-info/10',
+        'muted' => 'text-base/50 bg-neutral/10',
+    ];
+    $statusClass = $statusClasses[$status] ?? $statusClasses['muted'];
+@endphp
+
+<{{ $tag }}
+    @if($href) href="{{ $href }}" @endif
+    {{ $attributes->class([
+        'group relative flex flex-col rounded-xl border border-neutral/20 bg-background-secondary overflow-hidden',
+        'hover:bg-background-secondary/80 hover:border-neutral/30 hover:shadow-sm cursor-pointer transition-all duration-200' => $href || $clickable,
+    ]) }}
+>
+    {{-- Subtle gradient overlay --}}
+    <div class="absolute inset-0 bg-gradient-to-br from-primary/[0.02] to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"></div>
+    
+    <div @class(['relative flex grow items-center justify-between', 'p-5' => !$compact, 'p-4' => $compact])>
+        <dl class="min-w-0">
+            <dt @class(['font-bold text-base', 'text-2xl' => !$compact, 'text-xl' => $compact])>
+                @if($prefix)<span class="text-base/40">{{ $prefix }}</span>@endif{{ $value }}@if($suffix)<span @class(['text-base/40', 'text-lg' => !$compact, 'text-base' => $compact])>{{ $suffix }}</span>@endif
+            </dt>
+            <dd @class(['font-medium text-base/50', 'text-sm' => !$compact, 'text-xs' => $compact])>{{ $label }}</dd>
+        </dl>
+        @if($icon)
+            <div @class(['flex items-center', $iconClass, 'opacity-60 group-hover:opacity-80 transition-opacity'])>
+                <x-dynamic-component :component="$icon" @class(['size-10' => !$compact, 'size-8' => $compact]) />
+            </div>
+        @endif
+    </div>
+    
+    @if($progress !== null)
+        <div class="px-5 pb-4">
+            <div class="h-1.5 w-full rounded-full bg-neutral/10 overflow-hidden">
+                <div class="h-full {{ $progressColor }} rounded-full transition-all duration-500" style="width: {{ min(100, $progress) }}%"></div>
+            </div>
+        </div>
+    @endif
+    
+    @if($statusText)
+        <div class="border-t border-neutral/20 px-5 py-2.5 text-xs font-semibold {{ $statusClass }}">
+            {{ $statusText }}
+        </div>
+    @endif
+</{{ $tag }}>
diff --git a/extensions/Servers/Proxmox/views/components/ui/tab-panel.blade.php b/extensions/Servers/Proxmox/views/components/ui/tab-panel.blade.php
new file mode 100644
index 000000000..bb29b4416
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/tab-panel.blade.php
@@ -0,0 +1,17 @@
+{{--
+    Tab Panel Component - TailServer Theme
+--}}
+
+@props([
+    'name',
+])
+
+<div
+    x-show="activeTab === '{{ $name }}'"
+    x-transition:enter="transition ease-out duration-200"
+    x-transition:enter-start="opacity-0 translate-y-1"
+    x-transition:enter-end="opacity-100 translate-y-0"
+    {{ $attributes }}
+>
+    {{ $slot }}
+</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
new file mode 100644
index 000000000..0a52fd089
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/table-row.blade.php
@@ -0,0 +1,36 @@
+{{--
+    Table Row Component - TailServer Theme
+--}}
+
+@props([
+    'clickable' => false,
+    'href' => null,
+    'hoverable' => null,
+])
+
+@php
+    // Check parent table's hoverable attribute if not explicitly set
+    $isHoverable = $hoverable ?? true;
+@endphp
+
+@if($href)
+    <tr 
+        {{ $attributes->class([
+            'border-b border-neutral/10 cursor-pointer transition-colors duration-150',
+            'hover:bg-primary/5' => $isHoverable,
+        ]) }}
+        onclick="window.location='{{ $href }}'"
+    >
+        {{ $slot }}
+    </tr>
+@else
+    <tr 
+        {{ $attributes->class([
+            'border-b border-neutral/10 transition-colors duration-150',
+            'hover:bg-neutral/5' => $isHoverable,
+            'cursor-pointer hover:bg-primary/5' => $clickable,
+        ]) }}
+    >
+        {{ $slot }}
+    </tr>
+@endif
diff --git a/extensions/Servers/Proxmox/views/components/ui/table-td.blade.php b/extensions/Servers/Proxmox/views/components/ui/table-td.blade.php
new file mode 100644
index 000000000..d94327ad4
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/table-td.blade.php
@@ -0,0 +1,31 @@
+{{--
+    Table Data Cell Component - TailServer Theme
+--}}
+
+@props([
+    'align' => 'start',
+    'nowrap' => false,
+    'muted' => false,
+    'strong' => false,
+])
+
+@php
+    $alignClasses = [
+        'start' => 'text-start',
+        'center' => 'text-center',
+        'end' => 'text-end',
+    ];
+    $alignClass = $alignClasses[$align] ?? $alignClasses['start'];
+@endphp
+
+<td 
+    {{ $attributes->class([
+        'px-3 py-3',
+        $alignClass,
+        'whitespace-nowrap' => $nowrap,
+        'text-base/50' => $muted,
+        'font-semibold text-base' => $strong,
+    ]) }}
+>
+    {{ $slot }}
+</td>
diff --git a/extensions/Servers/Proxmox/views/components/ui/table-th.blade.php b/extensions/Servers/Proxmox/views/components/ui/table-th.blade.php
new file mode 100644
index 000000000..feab7263c
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/table-th.blade.php
@@ -0,0 +1,50 @@
+{{--
+    Table Header Cell Component - TailServer Theme
+--}}
+
+@props([
+    'align' => 'start',
+    'sortable' => false,
+    'sortKey' => null,
+    'currentSort' => null,
+    'currentDirection' => 'asc',
+])
+
+@php
+    $alignClasses = [
+        'start' => 'text-start',
+        'center' => 'text-center',
+        'end' => 'text-end',
+    ];
+    $alignClass = $alignClasses[$align] ?? $alignClasses['start'];
+    
+    $isSorted = $sortable && $sortKey === $currentSort;
+@endphp
+
+<th 
+    {{ $attributes->class([
+        'px-3 py-3 text-xs font-semibold tracking-wider text-base/60 uppercase',
+        $alignClass,
+        'cursor-pointer hover:text-base hover:bg-neutral/5 select-none transition-colors duration-150' => $sortable,
+    ]) }}
+    @if($sortable && $sortKey)
+        wire:click="sort('{{ $sortKey }}')"
+    @endif
+>
+    <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-base/40">
+                @if($isSorted)
+                    @if($currentDirection === 'asc')
+                        <x-ri-arrow-up-s-line class="size-4" />
+                    @else
+                        <x-ri-arrow-down-s-line class="size-4" />
+                    @endif
+                @else
+                    <x-ri-arrow-up-down-line class="size-3.5 opacity-50" />
+                @endif
+            </span>
+        @endif
+    </div>
+</th>
diff --git a/extensions/Servers/Proxmox/views/components/ui/table.blade.php b/extensions/Servers/Proxmox/views/components/ui/table.blade.php
new file mode 100644
index 000000000..6ae7c9348
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/table.blade.php
@@ -0,0 +1,53 @@
+{{--
+    Table Component - TailServer Theme
+    
+    Usage:
+    <x-proxmox::ui.table>
+        <x-slot:head>
+            <x-proxmox::ui.table-th>Name</x-proxmox::ui.table-th>
+            <x-proxmox::ui.table-th>Status</x-proxmox::ui.table-th>
+        </x-slot:head>
+        <x-proxmox::ui.table-row>
+            <x-proxmox::ui.table-td>Server 1</x-proxmox::ui.table-td>
+            <x-proxmox::ui.table-td>Running</x-proxmox::ui.table-td>
+        </x-proxmox::ui.table-row>
+    </x-proxmox::ui.table>
+--}}
+
+@props([
+    'striped' => false,
+    'hoverable' => true,
+    'responsive' => true,
+    'compact' => false,
+])
+
+@php
+    $wrapperClasses = $responsive ? 'min-w-full overflow-x-auto rounded-xl border border-neutral/10' : '';
+@endphp
+
+<div class="{{ $wrapperClasses }}">
+    <table 
+        {{ $attributes->class([
+            'min-w-full align-middle text-sm',
+            '[&_tbody_tr:nth-child(even)]:bg-neutral/3' => $striped,
+        ]) }}
+        data-hoverable="{{ $hoverable ? 'true' : 'false' }}"
+        data-compact="{{ $compact ? 'true' : 'false' }}"
+    >
+        @if(isset($head))
+            <thead class="bg-gradient-to-b from-neutral/5 to-transparent">
+                <tr class="border-b border-neutral/15">
+                    {{ $head }}
+                </tr>
+            </thead>
+        @endif
+        <tbody>
+            {{ $slot }}
+        </tbody>
+        @if(isset($foot))
+            <tfoot>
+                {{ $foot }}
+            </tfoot>
+        @endif
+    </table>
+</div>
diff --git a/extensions/Servers/Proxmox/views/components/ui/tabs.blade.php b/extensions/Servers/Proxmox/views/components/ui/tabs.blade.php
new file mode 100644
index 000000000..58c540cb1
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/tabs.blade.php
@@ -0,0 +1,82 @@
+{{--
+    Tabs Component - TailServer Theme
+    
+    Usage:
+    <x-proxmox::ui.tabs :tabs="['Overview', 'Settings', 'Logs']" active="Overview">
+        <x-proxmox::ui.tab-panel name="Overview">Overview content</x-proxmox::ui.tab-panel>
+        <x-proxmox::ui.tab-panel name="Settings">Settings content</x-proxmox::ui.tab-panel>
+        <x-proxmox::ui.tab-panel name="Logs">Logs content</x-proxmox::ui.tab-panel>
+    </x-proxmox::ui.tabs>
+--}}
+
+@props([
+    'tabs' => [],
+    'active' => null,
+    'variant' => 'default',
+])
+
+@php
+    $variantClasses = [
+        'default' => [
+            'container' => 'border-b border-neutral/15',
+            'tab' => 'px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-all duration-200',
+            'active' => 'text-primary border-primary',
+            'inactive' => 'text-base/50 border-transparent hover:text-base hover:border-neutral/30',
+        ],
+        'pills' => [
+            'container' => 'flex gap-1.5 p-1.5 bg-neutral/5 rounded-xl border border-neutral/10',
+            'tab' => 'px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200',
+            'active' => 'bg-background-secondary text-base shadow-md',
+            'inactive' => 'text-base/50 hover:text-base hover:bg-neutral/10',
+        ],
+        'buttons' => [
+            'container' => 'flex gap-2',
+            'tab' => 'px-4 py-2.5 text-sm font-medium rounded-xl border transition-all duration-200',
+            'active' => 'bg-primary text-white border-primary shadow-md shadow-primary/25',
+            'inactive' => 'bg-background-secondary text-base/60 border-neutral/20 hover:border-neutral/40 hover:text-base hover:shadow-sm',
+        ],
+    ];
+    
+    $styles = $variantClasses[$variant] ?? $variantClasses['default'];
+    $activeTab = $active ?? ($tabs[0] ?? null);
+@endphp
+
+<div 
+    x-data="{ activeTab: '{{ $activeTab }}' }"
+    {{ $attributes }}
+>
+    {{-- Tab Navigation --}}
+    <div class="{{ $styles['container'] }}">
+        <nav class="flex @if($variant === 'default') -mb-px @endif">
+            @foreach($tabs as $tab)
+                @php
+                    $tabName = is_array($tab) ? ($tab['name'] ?? $tab['label'] ?? '') : $tab;
+                    $tabLabel = is_array($tab) ? ($tab['label'] ?? $tab['name'] ?? '') : $tab;
+                    $tabIcon = is_array($tab) ? ($tab['icon'] ?? null) : null;
+                    $tabBadge = is_array($tab) ? ($tab['badge'] ?? null) : null;
+                @endphp
+                <button
+                    type="button"
+                    @click="activeTab = '{{ $tabName }}'"
+                    :class="activeTab === '{{ $tabName }}' ? '{{ $styles['active'] }}' : '{{ $styles['inactive'] }}'"
+                    class="{{ $styles['tab'] }} flex items-center gap-2"
+                >
+                    @if($tabIcon)
+                        <x-dynamic-component :component="$tabIcon" class="size-4" />
+                    @endif
+                    <span>{{ $tabLabel }}</span>
+                    @if($tabBadge)
+                        <span class="px-1.5 py-0.5 text-xs font-semibold rounded-full bg-primary/10 text-primary">
+                            {{ $tabBadge }}
+                        </span>
+                    @endif
+                </button>
+            @endforeach
+        </nav>
+    </div>
+    
+    {{-- Tab Panels --}}
+    <div class="mt-4">
+        {{ $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
new file mode 100644
index 000000000..c4d5940e7
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/toggle.blade.php
@@ -0,0 +1,45 @@
+{{--
+    Toggle/Switch Component - TailServer Theme
+    
+    Usage:
+    <x-proxmox::ui.toggle wire:model="enabled" label="Enable Feature" />
+--}}
+
+@props([
+    'label' => null,
+    'description' => null,
+    'disabled' => false,
+])
+
+<label {{ $attributes->only('class')->class(['flex items-center justify-between gap-4 cursor-pointer group']) }}>
+    @if($label || $description)
+        <div class="flex flex-col">
+            @if($label)
+                <span class="text-sm font-medium text-base transition-colors duration-200 group-hover:text-primary">{{ $label }}</span>
+            @endif
+            @if($description)
+                <span class="text-xs text-base/50 transition-colors duration-200 group-hover:text-base/70">{{ $description }}</span>
+            @endif
+        </div>
+    @endif
+    
+    <div class="relative">
+        <input
+            type="checkbox"
+            {{ $attributes->whereDoesntStartWith('class')->merge(['disabled' => $disabled]) }}
+            class="sr-only peer"
+        />
+        <div @class([
+            'w-11 h-6 rounded-full transition-all duration-300 ease-out',
+            'bg-neutral/20 peer-checked:bg-primary peer-checked:shadow-md peer-checked:shadow-primary/30',
+            'peer-focus:ring-2 peer-focus:ring-primary/25 peer-focus:ring-offset-2 peer-focus:ring-offset-background',
+            'peer-disabled:opacity-50 peer-disabled:cursor-not-allowed',
+            'group-hover:bg-neutral/30 peer-checked:group-hover:bg-primary/90',
+        ])></div>
+        <div @class([
+            'absolute top-0.5 left-0.5 size-5 bg-white rounded-full shadow-md transition-all duration-300 ease-out',
+            'peer-checked:translate-x-5 peer-checked:shadow-lg',
+            'group-hover:scale-105 peer-active:scale-95',
+        ])></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
new file mode 100644
index 000000000..48ffc8a51
--- /dev/null
+++ b/extensions/Servers/Proxmox/views/components/ui/tooltip.blade.php
@@ -0,0 +1,56 @@
+{{--
+    Tooltip Component - TailServer Theme
+    
+    Usage:
+    <x-proxmox::ui.tooltip text="This is a tooltip">
+        <button>Hover me</button>
+    </x-proxmox::ui.tooltip>
+--}}
+
+@props([
+    'text',
+    'position' => 'top', // top, bottom, left, right
+])
+
+@php
+    $positions = [
+        'top' => 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+        'bottom' => 'top-full left-1/2 -translate-x-1/2 mt-2',
+        'left' => 'right-full top-1/2 -translate-y-1/2 mr-2',
+        'right' => 'left-full top-1/2 -translate-y-1/2 ml-2',
+    ];
+    
+    $arrows = [
+        'top' => 'top-full left-1/2 -translate-x-1/2 border-t-zinc-800 border-x-transparent border-b-transparent border-4',
+        'bottom' => 'bottom-full left-1/2 -translate-x-1/2 border-b-zinc-800 border-x-transparent border-t-transparent border-4',
+        'left' => 'left-full top-1/2 -translate-y-1/2 border-l-zinc-800 border-y-transparent border-r-transparent border-4',
+        'right' => 'right-full top-1/2 -translate-y-1/2 border-r-zinc-800 border-y-transparent border-l-transparent border-4',
+    ];
+@endphp
+
+<div 
+    x-data="{ show: false }"
+    @mouseenter="show = true"
+    @mouseleave="show = false"
+    class="relative inline-block"
+    {{ $attributes }}
+>
+    {{ $slot }}
+    
+    <div
+        x-show="show"
+        x-cloak
+        x-transition:enter="transition ease-out duration-150"
+        x-transition:enter-start="opacity-0 scale-90"
+        x-transition:enter-end="opacity-100 scale-100"
+        x-transition:leave="transition ease-in duration-100"
+        x-transition:leave-start="opacity-100 scale-100"
+        x-transition:leave-end="opacity-0 scale-90"
+        class="absolute z-50 {{ $positions[$position] ?? $positions['top'] }} pointer-events-none"
+    >
+        <div class="relative bg-zinc-900 text-white text-xs font-medium rounded-lg px-2.5 py-1.5 whitespace-nowrap shadow-xl ring-1 ring-white/10">
+            {{ $text }}
+            <div class="absolute {{ $arrows[$position] ?? $arrows['top'] }}"></div>
+        </div>
+    </div>
+</div>
diff --git a/extensions/Servers/Proxmox/views/firewall.blade.php b/extensions/Servers/Proxmox/views/firewall.blade.php
index 284587ff4..8b16ff3b4 100644
--- a/extensions/Servers/Proxmox/views/firewall.blade.php
+++ b/extensions/Servers/Proxmox/views/firewall.blade.php
@@ -56,85 +56,36 @@
     
     <div class="flex flex-col gap-6">
     {{-- Page Header --}}
-    <div class="mb-6">
-        <h1 class="text-2xl font-bold">Firewall Management</h1>
-        <p class="text-sm text-base/60 mt-1">Configure firewall rules, policies, aliases, and IPSets for your virtual machine</p>
-    </div>
+    <x-proxmox::ui.section-header 
+        title="Firewall Management" 
+        subtitle="Configure firewall rules, policies, aliases, and IPSets for your virtual machine"
+        icon="ri-shield-line"
+    />
 
     {{-- Error Modal --}}
     @if($error && $showErrorModal)
-        <div class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
-            <div class="relative w-full max-w-md bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
+        <x-proxmox::ui.modal title="Error" icon="ri-error-warning-line" icon-class="text-error" :show="true" wire:key="error-modal">
+            <x-slot name="header">
                 <button wire:click="$set('showErrorModal', false)" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
                     <x-ri-close-line class="size-5" />
                 </button>
-                <div class="flex items-start gap-3 mb-4">
-                    <div class="flex-shrink-0 w-10 h-10 rounded-full bg-error/20 flex items-center justify-center">
-                        <x-ri-error-warning-line class="size-5 text-error" />
-                    </div>
-                    <div>
-                        <h3 class="text-lg font-semibold">Error</h3>
-                        <p class="text-sm text-base/70 mt-1">{{ $error }}</p>
-                    </div>
-                </div>
-                <div class="flex justify-end">
-                    <button wire:click="$set('showErrorModal', false)" class="px-4 py-2 bg-background border border-neutral rounded-lg hover:bg-background-secondary transition-colors text-sm font-medium">
-                        Close
-                    </button>
-                </div>
-            </div>
-        </div>
+            </x-slot>
+            <p class="text-sm text-base/70">{{ $error }}</p>
+            <x-slot name="footer">
+                <x-proxmox::ui.button wire:click="$set('showErrorModal', false)" variant="secondary">
+                    Close
+                </x-proxmox::ui.button>
+            </x-slot>
+        </x-proxmox::ui.modal>
     @endif
 
-    {{-- Main Firewall Toggle & Status --}}
-    <div class="bg-gradient-to-br from-primary/10 to-primary/5 border border-primary/20 rounded-xl p-6 mb-6">
-        <div class="flex items-center justify-between">
-            <div class="flex items-center gap-4">
-                <div class="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center">
-                    <x-ri-shield-line class="size-6 text-primary" />
-                </div>
-                <div>
-                    <h2 class="text-xl font-semibold">Master Firewall Control</h2>
-                    <p class="text-sm text-base/60 mt-1">
-                        @if($firewallEnabled)
-                            <span class="text-success font-medium">✓ Active - Your VM is protected by firewall rules</span>
-                        @else
-                            <span class="text-warning font-medium">⚠ Disabled - Your VM has no firewall protection</span>
-                        @endif
-                    </p>
-                </div>
-            </div>
-            <div class="flex items-center gap-2">
-                @if($firewallEnabled)
-                    <button type="button" 
-                            wire:click="toggleFirewall" 
-                            wire:loading.attr="disabled"
-                            style="padding: 0.5rem 1rem; background-color: #ef4444; color: white; border-radius: 0.5rem; transition: all 0.2s; font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; gap: 0.5rem;"
-                            onmouseover="this.style.backgroundColor='#dc2626'" 
-                            onmouseout="this.style.backgroundColor='#ef4444'">
-                        <x-ri-close-line class="size-4" />
-                        <span wire:loading.remove wire:target="toggleFirewall">Disable Firewall</span>
-                        <span wire:loading wire:target="toggleFirewall">Disabling...</span>
-                    </button>
-                @else
-                    <button type="button" 
-                            wire:click="toggleFirewall" 
-                            wire:loading.attr="disabled"
-                            class="px-4 py-2 bg-success text-white rounded-lg hover:bg-success/90 transition-colors text-sm font-medium flex items-center gap-2">
-                        <x-ri-shield-line class="size-4" />
-                        <span wire:loading.remove wire:target="toggleFirewall">Enable Firewall</span>
-                        <span wire:loading wire:target="toggleFirewall">Enabling...</span>
-                    </button>
-                @endif
-            </div>
-        </div>
-    </div>
+    {{-- Main Firewall Toggle & Status --}}\n    <div class=\"relative overflow-hidden rounded-xl border border-primary/20 bg-gradient-to-br from-primary/10 via-primary/5 to-transparent p-6 mb-6\">\n        {{-- Decorative elements --}}\n        <div class=\"absolute top-0 right-0 w-32 h-32 bg-primary/10 rounded-full -translate-y-1/2 translate-x-1/2 blur-2xl\"></div>\n        <div class=\"absolute bottom-0 left-0 w-24 h-24 bg-primary/5 rounded-full translate-y-1/2 -translate-x-1/2 blur-xl\"></div>\n        \n        <div class=\"relative flex flex-col sm:flex-row sm:items-center justify-between gap-4\">\n            <div class=\"flex items-center gap-4\">\n                <div class=\"w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center ring-4 ring-primary/10\">\n                    <x-ri-shield-line class=\"size-6 text-primary\" />\n                </div>\n                <div>\n                    <h2 class=\"text-xl font-bold\">Master Firewall Control</h2>\n                    <p class=\"text-sm mt-1\">\n                        @if($firewallEnabled)\n                            <span class=\"inline-flex items-center gap-1.5 text-success font-medium\">\n                                <span class=\"relative flex h-2 w-2\">\n                                    <span class=\"absolute inline-flex h-full w-full rounded-full bg-success opacity-75 animate-ping\"></span>\n                                    <span class=\"relative inline-flex rounded-full h-2 w-2 bg-success\"></span>\n                                </span>\n                                Active - Your VM is protected\n                            </span>\n                        @else\n                            <span class=\"inline-flex items-center gap-1.5 text-warning font-medium\">\n                                <x-ri-error-warning-line class=\"size-4\" />\n                                Disabled - No firewall protection\n                            </span>\n                        @endif\n                    </p>\n                </div>\n            </div>\n            <div class=\"flex items-center gap-2\">\n                @if($firewallEnabled)\n                    <x-proxmox::ui.button \n                        wire:click=\"toggleFirewall\" \n                        wire:loading.attr=\"disabled\"\n                        variant=\"danger\"\n                        icon=\"ri-shield-off-line\">\n                        <span wire:loading.remove wire:target=\"toggleFirewall\">Disable</span>\n                        <span wire:loading wire:target=\"toggleFirewall\">Disabling...</span>\n                    </x-proxmox::ui.button>\n                @else\n                    <x-proxmox::ui.button \n                        wire:click=\"toggleFirewall\" \n                        wire:loading.attr=\"disabled\"\n                        variant=\"success\"\n                        icon=\"ri-shield-check-line\">\n                        <span wire:loading.remove wire:target=\"toggleFirewall\">Enable Firewall</span>\n                        <span wire:loading wire:target=\"toggleFirewall\">Enabling...</span>\n                    </x-proxmox::ui.button>\n                @endif\n            </div>\n        </div>\n    </div>
 
     {{-- Firewall Policies & Network Adapters Grid --}}
     @if($firewallEnabled)
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
             {{-- Default Policies Card --}}
-            <div class="bg-background border border-neutral rounded-xl p-6">
+            <x-proxmox::ui.card>
                 <div class="flex items-center justify-between mb-4">
                     <div class="flex items-center gap-3">
                         <div class="w-10 h-10 rounded-lg bg-warning/10 flex items-center justify-center">
@@ -151,35 +102,36 @@
                 </div>
 
                 <div class="space-y-4">
-                    <div>
-                        <label class="block text-sm font-medium mb-2">Incoming Traffic (Policy In)</label>
-                        <select wire:model="policyIn" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background text-sm">
-                            <option value="ACCEPT">Accept</option>
-                            <option value="REJECT">Reject</option>
-                            <option value="DROP">Drop</option>
-                        </select>
-                        <p class="text-xs text-base/60 mt-1">Default action for incoming traffic not matching any rule</p>
-                    </div>
+                    <x-proxmox::ui.select 
+                        wire:model="policyIn" 
+                        label="Incoming Traffic (Policy In)" 
+                        help="Default action for incoming traffic not matching any rule">
+                        <option value="ACCEPT">Accept</option>
+                        <option value="REJECT">Reject</option>
+                        <option value="DROP">Drop</option>
+                    </x-proxmox::ui.select>
 
-                    <div>
-                        <label class="block text-sm font-medium mb-2">Outgoing Traffic (Policy Out)</label>
-                        <select wire:model="policyOut" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background text-sm">
-                            <option value="ACCEPT">Accept</option>
-                            <option value="REJECT">Reject</option>
-                            <option value="DROP">Drop</option>
-                        </select>
-                        <p class="text-xs text-base/60 mt-1">Default action for outgoing traffic not matching any rule</p>
-                    </div>
+                    <x-proxmox::ui.select 
+                        wire:model="policyOut" 
+                        label="Outgoing Traffic (Policy Out)" 
+                        help="Default action for outgoing traffic not matching any rule">
+                        <option value="ACCEPT">Accept</option>
+                        <option value="REJECT">Reject</option>
+                        <option value="DROP">Drop</option>
+                    </x-proxmox::ui.select>
 
-                    <button type="button" wire:click="updatePolicies" wire:loading.attr="disabled" class="w-full px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium mt-4">
+                    <x-proxmox::ui.button 
+                        wire:click="updatePolicies" 
+                        wire:loading.attr="disabled" 
+                        class="w-full mt-4">
                         <span wire:loading.remove wire:target="updatePolicies">Update Policies</span>
                         <span wire:loading wire:target="updatePolicies">Updating...</span>
-                    </button>
+                    </x-proxmox::ui.button>
                 </div>
-            </div>
+            </x-proxmox::ui.card>
 
             {{-- Network Adapters --}}
-            <div class="bg-background border border-neutral rounded-xl p-6">
+            <x-proxmox::ui.card>
                 <div class="flex items-center gap-3 mb-4">
                     <div class="w-10 h-10 rounded-lg bg-success/10 flex items-center justify-center">
                         <x-ri-router-line class="size-5 text-success" />
@@ -198,11 +150,9 @@
                                     <div class="flex-1">
                                         <div class="flex items-center gap-2 mb-1">
                                             <span class="font-semibold text-sm">{{ $adapter['name'] }}</span>
-                                            @if($adapterFirewallStates[$adapter['name']] ?? false)
-                                                <span class="px-2 py-0.5 bg-success/20 text-success text-xs font-medium rounded-full">Active</span>
-                                            @else
-                                                <span class="px-2 py-0.5 bg-base/20 text-base/60 text-xs font-medium rounded-full">Off</span>
-                                            @endif
+                                            <x-proxmox::ui.badge :variant="($adapterFirewallStates[$adapter['name']] ?? false) ? 'success' : 'secondary'">
+                                                {{ ($adapterFirewallStates[$adapter['name']] ?? false) ? 'Active' : 'Off' }}
+                                            </x-proxmox::ui.badge>
                                         </div>
                                         <div class="text-xs text-base/60">
                                             {{ ucfirst($adapter['model'] ?? 'Unknown') }}
@@ -213,27 +163,27 @@
                                     </div>
                                     <div class="flex items-center gap-2">
                                         @if($adapterFirewallStates[$adapter['name']] ?? false)
-                                            <button type="button" 
-                                                    wire:click="toggleAdapterFirewall('{{ $adapter['name'] }}')" 
-                                                    wire:loading.attr="disabled"
-                                                    wire:key="adapter-{{ $adapter['name'] }}"
-                                                    style="padding: 0.375rem 0.75rem; background-color: #ef4444; color: white; border-radius: 0.5rem; transition: all 0.2s; font-size: 0.75rem; font-weight: 500; display: flex; align-items: center; gap: 0.375rem;"
-                                                    onmouseover="this.style.backgroundColor='#dc2626'" 
-                                                    onmouseout="this.style.backgroundColor='#ef4444'">
-                                                <x-ri-close-line class="size-3.5" />
+                                            <x-proxmox::ui.button 
+                                                wire:click="toggleAdapterFirewall('{{ $adapter['name'] }}')" 
+                                                wire:loading.attr="disabled"
+                                                wire:key="adapter-{{ $adapter['name'] }}"
+                                                variant="danger"
+                                                size="sm"
+                                                icon="ri-close-line">
                                                 <span wire:loading.remove wire:target="toggleAdapterFirewall('{{ $adapter['name'] }}')">Disable</span>
                                                 <span wire:loading wire:target="toggleAdapterFirewall('{{ $adapter['name'] }}')">...</span>
-                                            </button>
+                                            </x-proxmox::ui.button>
                                         @else
-                                            <button type="button" 
-                                                    wire:click="toggleAdapterFirewall('{{ $adapter['name'] }}')" 
-                                                    wire:loading.attr="disabled"
-                                                    wire:key="adapter-{{ $adapter['name'] }}"
-                                                    class="px-3 py-1.5 bg-success text-white rounded-lg hover:bg-success/90 transition-colors text-xs font-medium flex items-center gap-1.5">
-                                                <x-ri-shield-line class="size-3.5" />
+                                            <x-proxmox::ui.button 
+                                                wire:click="toggleAdapterFirewall('{{ $adapter['name'] }}')" 
+                                                wire:loading.attr="disabled"
+                                                wire:key="adapter-{{ $adapter['name'] }}"
+                                                variant="success"
+                                                size="sm"
+                                                icon="ri-shield-line">
                                                 <span wire:loading.remove wire:target="toggleAdapterFirewall('{{ $adapter['name'] }}')">Enable</span>
                                                 <span wire:loading wire:target="toggleAdapterFirewall('{{ $adapter['name'] }}')">...</span>
-                                            </button>
+                                            </x-proxmox::ui.button>
                                         @endif
                                     </div>
                                 </div>
@@ -241,12 +191,12 @@
                         @endforeach
                     </div>
                 @else
-                    <div class="text-center py-4 text-base/60 text-sm">
-                        <x-ri-router-line class="size-8 mx-auto mb-2 opacity-50" />
-                        <p>No network adapters found</p>
-                    </div>
+                    <x-proxmox::ui.empty-state 
+                        icon="ri-router-line"
+                        title="No Network Adapters"
+                        description="No network adapters found on this VM" />
                 @endif
-            </div>
+            </x-proxmox::ui.card>
         </div>
 
         {{-- Policy Info Modal --}}
@@ -1817,19 +1767,14 @@
                     </div>
                 </div>
                 </div>
-                <div style="display: flex; gap: 12px; justify-content: flex-end;">
-                    <button wire:click="cancelDeleteRule" 
-                            type="button"
-                            style="padding: 8px 16px; background-color: rgba(var(--background), 1); border: 1px solid rgba(var(--neutral), 0.3); border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s;">
+                <div class="flex gap-3 justify-end">
+                    <x-proxmox::ui.button wire:click="cancelDeleteRule" variant="secondary">
                         Cancel
-                    </button>
-                    <button wire:click="deleteRule" 
-                            wire:loading.attr="disabled" 
-                            type="button"
-                            style="padding: 8px 16px; background-color: #ef4444; color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s;">
+                    </x-proxmox::ui.button>
+                    <x-proxmox::ui.button wire:click="deleteRule" wire:loading.attr="disabled" variant="danger">
                         <span wire:loading.remove wire:target="deleteRule">Delete Rule</span>
                         <span wire:loading wire:target="deleteRule">Deleting...</span>
-                    </button>
+                    </x-proxmox::ui.button>
         </div>
         </div>
 </div>
@@ -1894,16 +1839,13 @@
                 </div>
             </div>
                 <div class="flex gap-3 justify-end">
-                    <button wire:click="cancelDeleteAlias" class="px-4 py-2 bg-background border border-neutral rounded-lg hover:bg-background-secondary transition-colors text-sm font-medium">
+                    <x-proxmox::ui.button wire:click="cancelDeleteAlias" variant="secondary">
                         Cancel
-                    </button>
-                    <button wire:click="deleteAlias" wire:loading.attr="disabled" 
-                            style="padding: 0.5rem 1rem; background-color: #ef4444; color: white; border-radius: 0.5rem; transition: all 0.2s; font-size: 0.875rem; font-weight: 500;"
-                            onmouseover="this.style.backgroundColor='#dc2626'" 
-                            onmouseout="this.style.backgroundColor='#ef4444'">
+                    </x-proxmox::ui.button>
+                    <x-proxmox::ui.button wire:click="deleteAlias" wire:loading.attr="disabled" variant="danger">
                         <span wire:loading.remove wire:target="deleteAlias">Delete</span>
                         <span wire:loading wire:target="deleteAlias">Deleting...</span>
-                    </button>
+                    </x-proxmox::ui.button>
                 </div>
         </div>
     </div>
@@ -1966,16 +1908,13 @@
                     </div>
                     </div>
                 <div class="flex gap-3 justify-end">
-                    <button wire:click="cancelDeleteIPSet" class="px-4 py-2 bg-background border border-neutral rounded-lg hover:bg-background-secondary transition-colors text-sm font-medium">
+                    <x-proxmox::ui.button wire:click="cancelDeleteIPSet" variant="secondary">
                         Cancel
-                    </button>
-                    <button wire:click="deleteIPSet" wire:loading.attr="disabled" 
-                            style="padding: 0.5rem 1rem; background-color: #ef4444; color: white; border-radius: 0.5rem; transition: all 0.2s; font-size: 0.875rem; font-weight: 500;"
-                            onmouseover="this.style.backgroundColor='#dc2626'" 
-                            onmouseout="this.style.backgroundColor='#ef4444'">
+                    </x-proxmox::ui.button>
+                    <x-proxmox::ui.button wire:click="deleteIPSet" wire:loading.attr="disabled" variant="danger">
                         <span wire:loading.remove wire:target="deleteIPSet">Delete</span>
                         <span wire:loading wire:target="deleteIPSet">Deleting...</span>
-                    </button>
+                    </x-proxmox::ui.button>
                 </div>
         </div>
     </div>
@@ -2041,16 +1980,13 @@
                             </div>
                     </div>
                 <div class="flex gap-3 justify-end">
-                    <button wire:click="cancelDeleteIPSetMember" class="px-4 py-2 bg-background border border-neutral rounded-lg hover:bg-background-secondary transition-colors text-sm font-medium">
+                    <x-proxmox::ui.button wire:click="cancelDeleteIPSetMember" variant="secondary">
                         Cancel
-                    </button>
-                    <button wire:click="deleteIPSetMember" wire:loading.attr="disabled" 
-                            style="padding: 0.5rem 1rem; background-color: #ef4444; color: white; border-radius: 0.5rem; transition: all 0.2s; font-size: 0.875rem; font-weight: 500;"
-                            onmouseover="this.style.backgroundColor='#dc2626'" 
-                            onmouseout="this.style.backgroundColor='#ef4444'">
+                    </x-proxmox::ui.button>
+                    <x-proxmox::ui.button wire:click="deleteIPSetMember" wire:loading.attr="disabled" variant="danger">
                         <span wire:loading.remove wire:target="deleteIPSetMember">Remove</span>
                         <span wire:loading wire:target="deleteIPSetMember">Removing...</span>
-                    </button>
+                    </x-proxmox::ui.button>
                 </div>
         </div>
     </div>
@@ -2334,16 +2270,13 @@
                 </div>
             </div>
             <div class="flex gap-3 justify-end">
-                <button wire:click="cancelDeleteConfiguration" class="px-4 py-2 bg-background border border-neutral rounded-lg hover:bg-background-secondary transition-colors text-sm font-medium">
+                <x-proxmox::ui.button wire:click="cancelDeleteConfiguration" variant="secondary">
                     Cancel
-                </button>
-                <button wire:click="deleteConfiguration" wire:loading.attr="disabled" 
-                        style="padding: 0.5rem 1rem; background-color: #ef4444; color: white; border-radius: 0.5rem; transition: all 0.2s; font-size: 0.875rem; font-weight: 500;"
-                        onmouseover="this.style.backgroundColor='#dc2626'" 
-                        onmouseout="this.style.backgroundColor='#ef4444'">
+                </x-proxmox::ui.button>
+                <x-proxmox::ui.button wire:click="deleteConfiguration" wire:loading.attr="disabled" variant="danger">
                     <span wire:loading.remove wire:target="deleteConfiguration">Delete</span>
                     <span wire:loading wire:target="deleteConfiguration">Deleting...</span>
-                </button>
+                </x-proxmox::ui.button>
             </div>
         </div>
     </div>
diff --git a/extensions/Servers/Proxmox/views/index.blade.php b/extensions/Servers/Proxmox/views/index.blade.php
index a55262ac4..e6a99b8ff 100644
--- a/extensions/Servers/Proxmox/views/index.blade.php
+++ b/extensions/Servers/Proxmox/views/index.blade.php
@@ -1,11 +1,22 @@
+{{-- Server Listing - TailServer Theme --}}
 <div class="flex flex-col flex-1" style="min-height: calc(100vh - 30rem);">
-    <div class="flex flex-row items-center pb-4">
-        <span class="text-2xl font-bold">Servers</span>
-    </div>
+    {{-- Page Header --}}
+    <x-proxmox::ui.section-header 
+        title="Servers" 
+        icon="ri-server-line"
+        subtitle="Manage your virtual private servers"
+    />
 
-    <div class="flex flex-col gap-4 flex-1">
-        @foreach($servers as $server)
+    {{-- Server Cards Grid --}}
+    <div class="flex flex-col gap-4 flex-1 mt-4">
+        @forelse($servers as $server)
             <livewire:proxmox.server :server="$server" wire:key="proxmox-server-{{ $server->id }}" lazy />
-        @endforeach
+        @empty
+            <x-proxmox::ui.empty-state 
+                title="No Servers Found"
+                description="You don't have any servers yet. Purchase a server to get started."
+                icon="ri-server-line"
+            />
+        @endforelse
     </div>
 </div>
\ No newline at end of file
diff --git a/extensions/Servers/Proxmox/views/network.blade.php b/extensions/Servers/Proxmox/views/network.blade.php
index 02a9169f6..1edfd0b25 100644
--- a/extensions/Servers/Proxmox/views/network.blade.php
+++ b/extensions/Servers/Proxmox/views/network.blade.php
@@ -101,63 +101,23 @@
         </div>
     </div>
     <div class="flex items-center justify-between mb-6">
-        <div class="flex items-center gap-3">
-            <div class="flex items-center gap-2 min-w-0">
-                <h2 class="text-xl font-semibold break-words">Assigned Network Addresses</h2>
-                <div class="relative" x-data="{ open: false }" x-cloak>
-                    <button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
-                        <x-ri-question-line class="size-4" />
-                    </button>
-                    <!-- Modal Backdrop -->
-                    <div x-show="open" 
-                         x-transition:enter="transition ease-out duration-300"
-                         x-transition:enter-start="opacity-0"
-                         x-transition:enter-end="opacity-100"
-                         x-transition:leave="transition ease-in duration-200"
-                         x-transition:leave-start="opacity-100"
-                         x-transition:leave-end="opacity-0"
-                         @click="open = false"
-                         @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
-                         style="display: none;">
+        <x-proxmox::ui.section-header 
+            title="Assigned Network Addresses" 
+            icon="ri-global-line"
+            class="mb-0">
+            <x-slot name="actions">
+                <x-proxmox::ui.help-modal icon="ri-question-line" title="Assigned Network Addresses">
+                    <p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
+                        Displays all IP addresses (both IPv4 and IPv6) that have been assigned to this virtual machine. These addresses are configured through the QEMU API and are part of your service allocation.
+                    </p>
+                    <div class="pt-4 mt-4 border-t border-neutral/30">
+                        <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
+                            <span class="font-semibold text-base/90">Note:</span> These addresses are managed by the hosting provider and cannot be modified directly. Contact support if you need additional IP addresses or changes to your network configuration.
+                        </p>
                     </div>
-                    <!-- Modal -->
-                    <div x-show="open"
-                         x-transition:enter="transition ease-out duration-300"
-                         x-transition:enter-start="opacity-0 scale-95"
-                         x-transition:enter-end="opacity-100 scale-100"
-                         x-transition:leave="transition ease-in duration-200"
-                         x-transition:leave-start="opacity-100 scale-100"
-                         x-transition:leave-end="opacity-0 scale-95"
-                         @click.away="open = false"
-                         @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 flex items-center justify-center p-4"
-                         style="display: none;">
-                        <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
-                            <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
-                                <x-ri-close-line class="size-5" />
-                            </button>
-                            <div class="flex items-center gap-3 mb-4 pr-8">
-                                <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
-                                    <x-ri-global-line class="size-5 text-primary" />
-                                </div>
-                                <h6 class="font-sans text-lg font-semibold leading-tight text-base/100">
-                                    Assigned Network Addresses
-                                </h6>
-                            </div>
-                            <p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
-                                Displays all IP addresses (both IPv4 and IPv6) that have been assigned to this virtual machine. These addresses are configured through the QEMU API and are part of your service allocation.
-                            </p>
-                            <div class="pt-4 mt-4 border-t border-neutral/30">
-                                <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                    <span class="font-semibold text-base/90">Note:</span> These addresses are managed by the hosting provider and cannot be modified directly. Contact support if you need additional IP addresses or changes to your network configuration.
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+                </x-proxmox::ui.help-modal>
+            </x-slot>
+        </x-proxmox::ui.section-header>
     </div>
 
     
diff --git a/extensions/Servers/Proxmox/views/overview.blade.php b/extensions/Servers/Proxmox/views/overview.blade.php
index 75f2fda26..881b1364b 100644
--- a/extensions/Servers/Proxmox/views/overview.blade.php
+++ b/extensions/Servers/Proxmox/views/overview.blade.php
@@ -7,22 +7,18 @@
 >
     @if(!$status)
     {{-- Error state when status cannot be loaded --}}
-    <div class="bg-danger/10 border border-danger/30 rounded-xl p-6 mt-8">
-        <div class="flex items-center gap-3 mb-4">
-            <x-ri-error-warning-fill class="size-6 text-danger" />
-            <h3 class="text-lg font-semibold text-danger">Unable to Load Server Status</h3>
-        </div>
+    <x-proxmox::ui.alert variant="danger" icon="ri-error-warning-fill" class="mt-8">
+        <x-slot name="title">Unable to Load Server Status</x-slot>
         <p class="text-base/70 mb-4">We couldn't retrieve the current status from the hypervisor. This may be due to:</p>
         <ul class="list-disc list-inside text-base/70 mb-4 space-y-1">
             <li>Temporary connectivity issues with the Proxmox cluster</li>
             <li>The VM may be in an intermediate state</li>
             <li>Network timeout while fetching data</li>
         </ul>
-        <button wire:click="loadVmStatus" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/80 transition-colors">
-            <x-ri-refresh-line class="size-4 inline mr-2" />
+        <x-proxmox::ui.button wire:click="loadVmStatus" icon="ri-refresh-line">
             Retry
-        </button>
-    </div>
+        </x-proxmox::ui.button>
+    </x-proxmox::ui.alert>
     @else
     <script>
         function copyToClipboard(text, buttonEl) {
@@ -300,107 +296,47 @@
         $lastSampleTimestamp = now()->toIso8601String();
     @endphp
 
-    <div class="bg-background-secondary border border-neutral rounded-xl p-6 mt-8">
+    <x-proxmox::ui.card class="mt-8">
         <div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between mb-6">
-            <div>
-                <div class="flex items-center gap-2 min-w-0">
-                    <h3 class="text-lg font-semibold">Resource Allocation vs Entitlement</h3>
-                    <div class="relative" x-data="{ open: false }" x-cloak>
-                        <button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
-                            <x-ri-question-line class="size-4" />
-                        </button>
-                        <!-- Modal Backdrop -->
-                        <div x-show="open" 
-                             x-transition:enter="transition ease-out duration-300"
-                             x-transition:enter-start="opacity-0"
-                             x-transition:enter-end="opacity-100"
-                             x-transition:leave="transition ease-in duration-200"
-                             x-transition:leave-start="opacity-100"
-                             x-transition:leave-end="opacity-0"
-                             @click="open = false"
-                             @keydown.escape.window="open = false"
-                             class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
-                             style="display: none;">
-                        </div>
-                        <!-- Modal -->
-                        <div x-show="open"
-                             x-transition:enter="transition ease-out duration-300"
-                             x-transition:enter-start="opacity-0 scale-95"
-                             x-transition:enter-end="opacity-100 scale-100"
-                             x-transition:leave="transition ease-in duration-200"
-                             x-transition:leave-start="opacity-100 scale-100"
-                             x-transition:leave-end="opacity-0 scale-95"
-                             @click.away="open = false"
-                             class="fixed inset-0 z-50 flex items-center justify-center p-4"
-                             style="display: none;">
-                            <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
-                                <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
-                                    <x-ri-close-line class="size-5" />
-                                </button>
-                                <div class="flex items-center gap-3 mb-4 pr-8">
-                                    <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
-                                        <x-ri-server-line class="size-5 text-primary" />
-                                    </div>
-                                    <h6 class="font-sans text-lg font-semibold leading-tight">
-                                        Resource Allocation vs Entitlement
-                                    </h6>
-                                </div>
-                                <p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
-                                    Compares your virtual machine's actual resource consumption against its allocated entitlements, providing real-time visibility into CPU, memory, and uptime metrics.
-                                </p>
-                                <div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
-                                    <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                        <span class="font-semibold text-base/90">CPU Allocation:</span> Shows live CPU usage as a percentage of your vCPU entitlement. Values are sampled directly from the Proxmox hypervisor and update with each status poll. The progress bar can exceed 100% to indicate over-allocation.
-                                    </p>
-                                    <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                        <span class="font-semibold text-base/90">Memory Allocation:</span> Displays current RAM usage compared to your provisioned memory entitlement. Calculated from the VM's allocated memory and updates in real-time as memory consumption changes.
-                                    </p>
-                                    <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                        <span class="font-semibold text-base/90">Hypervisor Uptime:</span> Shows the live uptime reported by the Proxmox hypervisor, plus power event statistics (starts, shutdowns, reboots) from the task history. This provides insight into VM stability and availability.
-                                    </p>
-                                    <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                        <span class="font-semibold text-base/90">Status Badges:</span> Color-coded badges indicate resource health: "Healthy" (green) for normal usage, "Watchlist" (yellow) when approaching limits (85%+), and "Over entitlement" (red) when exceeding allocated resources.
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
+            <div class="flex items-center gap-2">
+                <h3 class="text-lg font-semibold">Resource Allocation vs Entitlement</h3>
+                <x-proxmox::ui.help-modal title="Resource Allocation vs Entitlement">
+                    <p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
+                        Compares your virtual machine's actual resource consumption against its allocated entitlements, providing real-time visibility into CPU, memory, and uptime metrics.
+                    </p>
+                    <div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
+                        <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
+                            <span class="font-semibold text-base/90">CPU Allocation:</span> Shows live CPU usage as a percentage of your vCPU entitlement. Values are sampled directly from the Proxmox hypervisor and update with each status poll.
+                        </p>
+                        <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
+                            <span class="font-semibold text-base/90">Memory Allocation:</span> Displays current RAM usage compared to your provisioned memory entitlement.
+                        </p>
+                        <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
+                            <span class="font-semibold text-base/90">Hypervisor Uptime:</span> Shows the live uptime plus power event statistics from the task history.
+                        </p>
+                        <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
+                            <span class="font-semibold text-base/90">Status Badges:</span> "Healthy" (green) for normal usage, "Watchlist" (yellow) at 85%+, "Over entitlement" (red) when exceeded.
+                        </p>
                     </div>
-                </div>
-                <p class="text-sm text-base/70">Instantly compare what this service is entitled to with how much it is consuming right now.</p>
+                </x-proxmox::ui.help-modal>
+                <p class="text-sm text-base/70 ml-2 hidden md:block">Instantly compare entitlement with current consumption.</p>
             </div>
             <p class="text-xs text-base/50">Values refresh alongside the live status poll.</p>
         </div>
         <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
             @foreach($resourceAllocations as $resource)
-                <div class="border border-neutral rounded-xl p-4 bg-background flex flex-col gap-4">
-                    <div class="flex items-start justify-between gap-3">
-                        <div>
-                            <p class="text-xs font-semibold tracking-wide uppercase text-base/60">{{ $resource['label'] }}</p>
-                            <p class="text-lg font-semibold">{{ $resource['usage_summary'] }}</p>
-                            <p class="text-xs text-base/60">{{ $resource['entitlement_label'] }}</p>
-                        </div>
-                        <span class="text-[10px] font-semibold px-2 py-1 rounded-full {{ $resource['badge']['class'] }}">
-                            {{ $resource['badge']['label'] }}
-                        </span>
-                    </div>
-                    <div>
-                        @if(!is_null($resource['used_percent']))
-                            <div class="flex items-center justify-between text-xs text-base/60 mb-1">
-                                <span>Usage</span>
-                                <span>{{ $resource['used_percent'] }}%</span>
-                            </div>
-                            <div class="h-2 rounded-full bg-background-secondary overflow-hidden">
-                                <div class="h-full rounded-full transition-all duration-300"
-                                     style="width: {{ min($resource['used_percent'], 130) }}%; background-image: {{ $resource['gradient'] }};">
-                                </div>
-                            </div>
-                        @endif
-                        <p class="text-xs text-base/60 mt-2">{{ $resource['description'] }}</p>
-                    </div>
-                </div>
+                <x-proxmox::ui.allocation-card
+                    :label="$resource['label']"
+                    :percent="$resource['used_percent']"
+                    :usage-summary="$resource['usage_summary']"
+                    :entitlement-label="$resource['entitlement_label']"
+                    :description="$resource['description']"
+                    :gradient="$resource['gradient']"
+                    :badge="$resource['badge']"
+                />
             @endforeach
         </div>
-    </div>
+    </x-proxmox::ui.card>
 
     <div class="grid grid-cols-1 md:grid-cols-2 gap-12 mt-8 md:items-stretch">
 
diff --git a/extensions/Servers/Proxmox/views/server.blade.php b/extensions/Servers/Proxmox/views/server.blade.php
index d7152312e..1af353318 100644
--- a/extensions/Servers/Proxmox/views/server.blade.php
+++ b/extensions/Servers/Proxmox/views/server.blade.php
@@ -1,16 +1,15 @@
+{{-- Server Card Component - TailServer Theme --}}
 <div class="space-y-4">
     @if($status)
     <a href="{{ route('proxmox.server.overview', ['server' => $server->id]) }}" wire:navigate>
-        <div class="bg-background-secondary hover:bg-background-secondary/80 border border-neutral p-4 rounded-lg mb-4">
-
-            <div class="flex items-center justify-between mb-2">
+        <x-proxmox::ui.card class="hover:border-primary/30 transition-colors cursor-pointer">
+            {{-- Header: Server Name & Status --}}
+            <div class="flex items-center justify-between mb-4">
                 <div class="flex items-center gap-3">
                     @if($server->user_set_icon)
                         @php
                             $iconColor = $server->user_set_icon_color ?? '#6366f1';
-                            // Calculate a lighter background color (20% opacity of the icon color)
-                            $bgColor = $iconColor . '33'; // 33 in hex = 20% opacity
-                            // Build the full component name with prefix
+                            $bgColor = $iconColor . '33';
                             $iconPrefix = $server->user_set_icon_prefix ?? 'ri';
                             $iconName = $server->user_set_icon;
                             $componentName = $iconPrefix . '-' . $iconName;
@@ -19,50 +18,29 @@
                             <x-dynamic-component :component="$componentName" class="size-5" style="color: {{ $iconColor }};" />
                         </div>
                     @else
-                        <div class="bg-secondary/10 p-2 rounded-lg">
-                            <x-ri-server-line class="size-5 text-secondary" />
+                        <div class="bg-primary/10 p-2 rounded-lg">
+                            <x-ri-server-line class="size-5 text-primary" />
                         </div>
                     @endif
-                    <span class="font-medium">{{ $status->name }}</span>
-                </div>
-                <div class="flex items-center gap-2 px-3 py-1.5 rounded-lg
-                    @if($status->status == 'running') text-success bg-success/20
-                    @elseif($status->status == 'stopped') text-inactive bg-inactive/20
-                    @else text-warning bg-warning/20 @endif">
-                    <div class="size-5">
-                        @if($status->status == 'running')
-                            <x-ri-checkbox-circle-fill />
-                        @elseif($status->status == 'stopped')
-                            <x-ri-forbid-fill />
-                        @else
-                            <x-ri-error-warning-fill />
-                        @endif
-                    </div>
-                    <span class="text-sm font-medium">
-                        @if($status->status == 'running')
-                            Running
-                        @elseif($status->status == 'stopped')
-                            Stopped
-                        @else
-                            {{ ucfirst($status->status) }}
-                        @endif
-                    </span>
+                    <span class="font-semibold text-base">{{ $status->name }}</span>
                 </div>
+                <x-proxmox::ui.server-status :status="$status->status" showLabel />
             </div>
 
-            <div class="flex flex-row flex-wrap gap-4 mt-4">
-                <div class="flex flex-col">
-                    <span class="text-xs text-base/50">IPv4 Address</span>
-                    <span class="text-base">{{ $server->primaryIpv4->ip ?? 'None' }}</span>
+            {{-- Quick Info Row --}}
+            <div class="flex flex-row flex-wrap gap-6 py-3 border-y border-neutral/10">
+                <div class="flex flex-col min-w-[120px]">
+                    <span class="text-xs font-medium text-base/50 uppercase tracking-wide">IPv4 Address</span>
+                    <span class="text-sm text-base mt-0.5">{{ $server->primaryIpv4->ip ?? 'None' }}</span>
                 </div>
-                <div class="flex flex-col">
-                    <span class="text-xs text-base/50">IPv6 Address</span>
-                    <span class="text-base">{{ $server->primaryIpv6->ip }}</span>
+                <div class="flex flex-col min-w-[120px]">
+                    <span class="text-xs font-medium text-base/50 uppercase tracking-wide">IPv6 Address</span>
+                    <span class="text-sm text-base mt-0.5">{{ $server->primaryIpv6->ip ?? 'None' }}</span>
                 </div>
                 @if($status->status == 'running' && isset($status->uptime))
-                <div class="flex flex-col">
-                    <span class="text-xs text-base/50">Uptime</span>
-                    <span class="text-base">
+                <div class="flex flex-col min-w-[100px]">
+                    <span class="text-xs font-medium text-base/50 uppercase tracking-wide">Uptime</span>
+                    <span class="text-sm text-base mt-0.5">
                         @php
                             $uptime = $status->uptime;
                             $days = floor($uptime / 86400);
@@ -70,100 +48,90 @@
                             $minutes = floor(($uptime % 3600) / 60);
                             
                             $uptimeStr = '';
-                            if ($days > 0) {
-                                $uptimeStr .= $days . 'd ';
-                            }
-                            if ($hours > 0 || $days > 0) {
-                                $uptimeStr .= $hours . 'h ';
-                            }
+                            if ($days > 0) $uptimeStr .= $days . 'd ';
+                            if ($hours > 0 || $days > 0) $uptimeStr .= $hours . 'h ';
                             $uptimeStr .= $minutes . 'm';
                         @endphp
                         {{ trim($uptimeStr) }}
                     </span>
                 </div>
                 @endif
-                <div class="hidden sm:flex flex-col">
-                    <span class="text-xs text-base/50">Memory</span>
-                    <span class="text-base">
+                <div class="hidden sm:flex flex-col min-w-[100px]">
+                    <span class="text-xs font-medium text-base/50 uppercase tracking-wide">Memory</span>
+                    <span class="text-sm text-base mt-0.5">
                         @if($status->status == 'running')
                             {{ Illuminate\Support\Number::fileSize(bytes: $status->mem) }}/
                         @endif
                         {{ Illuminate\Support\Number::fileSize(bytes: $status->maxmem) }}
                     </span>
                 </div>
-                <div class="hidden sm:flex flex-col">
-                    <span class="text-xs text-base/50">Disk</span>
-                    <span class="text-base">
-                        {{ Illuminate\Support\Number::fileSize(bytes: $status->maxdisk) }}
-                    </span>
+                <div class="hidden sm:flex flex-col min-w-[80px]">
+                    <span class="text-xs font-medium text-base/50 uppercase tracking-wide">Disk</span>
+                    <span class="text-sm text-base mt-0.5">{{ Illuminate\Support\Number::fileSize(bytes: $status->maxdisk) }}</span>
                 </div>
                 @if($status->status == 'running')
-                <div class="hidden sm:flex flex-col">
-                    <span class="text-xs text-base/50">CPU</span>
-                    <span class="text-base">{{ round($status->cpu * 100, 2) }}%</span>
+                <div class="hidden sm:flex flex-col min-w-[60px]">
+                    <span class="text-xs font-medium text-base/50 uppercase tracking-wide">CPU</span>
+                    <span class="text-sm text-base mt-0.5">{{ round($status->cpu * 100, 2) }}%</span>
                 </div>
                 @endif
             </div>
 
-            {{-- Server Configuration Statistics --}}
-            <div class="mt-4 pt-4 border-t border-neutral">
-                <div class="text-sm font-medium text-base/70 mb-3">Server Configuration</div>
+            {{-- Server Configuration Grid --}}
+            <div class="mt-4">
+                <div class="text-xs font-semibold text-base/60 uppercase tracking-wide mb-3">Server Configuration</div>
                 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-                    <div class="flex flex-col">
-                        <div class="flex items-center gap-2 mb-1">
-                            <x-ri-cpu-line class="size-4 text-base/50" />
-                            <span class="text-xs text-base/50">CPU Cores</span>
-                        </div>
-                        <span class="text-base">{{ $status->cpus ?? 'N/A' }} {{ ($status->cpus ?? 0) > 1 ? 'Cores' : 'Core' }}</span>
-                    </div>
-                    <div class="flex flex-col">
-                        <div class="flex items-center gap-2 mb-1">
-                            <x-ri-database-2-line class="size-4 text-base/50" />
-                            <span class="text-xs text-base/50">RAM Allocation</span>
-                        </div>
-                        <span class="text-base">{{ round(($status->maxmem ?? 0) / (1024 * 1024 * 1024), 2) }} GiB</span>
-                    </div>
-                    <div class="flex flex-col">
-                        <div class="flex items-center gap-2 mb-1">
-                            <x-ri-hard-drive-2-line class="size-4 text-base/50" />
-                            <span class="text-xs text-base/50">Disk Capacity</span>
-                        </div>
-                        <span class="text-base">{{ Illuminate\Support\Number::fileSize(bytes: $status->maxdisk ?? 0) }}</span>
-                    </div>
-                    <div class="flex flex-col">
+                    <x-proxmox::ui.stat-card
+                        label="CPU Cores"
+                        :value="($status->cpus ?? 'N/A') . ' ' . (($status->cpus ?? 0) > 1 ? 'Cores' : 'Core')"
+                        icon="ri-cpu-line"
+                        variant="default"
+                    />
+                    <x-proxmox::ui.stat-card
+                        label="RAM Allocation"
+                        :value="round(($status->maxmem ?? 0) / (1024 * 1024 * 1024), 2) . ' GiB'"
+                        icon="ri-ram-line"
+                        variant="default"
+                    />
+                    <x-proxmox::ui.stat-card
+                        label="Disk Capacity"
+                        :value="Illuminate\Support\Number::fileSize(bytes: $status->maxdisk ?? 0)"
+                        icon="ri-hard-drive-2-line"
+                        variant="default"
+                    />
+                    <div class="flex flex-col p-3 bg-neutral/5 rounded-lg">
                         <div class="flex items-center gap-2 mb-1">
                             <x-ri-speed-line class="size-4 text-base/50" />
                             <span class="text-xs text-base/50">Bandwidth</span>
                         </div>
-                        <span class="text-base font-medium">
+                        <span class="text-sm font-medium text-base">
                             {{ $this->monthlyTraffic }} GiB / {{ $this->bandwidthThreshold95 }} GiB
                         </span>
-                        <span class="text-base text-xs leading-relaxed text-base/60 mt-1">
-                            Threshold: 95% of average usage or 10 GiB minimum. Connection reduced to 1 MiB/s if exceeded.
+                        <span class="text-xs text-base/50 mt-1 leading-relaxed">
+                            95% threshold or 10 GiB min. Reduced to 1 MiB/s if exceeded.
                         </span>
                     </div>
                 </div>
             </div>
-        </div>
+        </x-proxmox::ui.card>
     </a>
     @else
-    {{-- Status unavailable - show error state --}}
+    {{-- Error State: Status unavailable --}}
     <a href="{{ route('proxmox.server.overview', ['server' => $server->id]) }}" wire:navigate>
-        <div class="bg-background-secondary hover:bg-background-secondary/80 border border-danger/30 p-4 rounded-lg mb-4">
+        <x-proxmox::ui.card class="border-danger/30 hover:border-danger/50 transition-colors cursor-pointer">
             <div class="flex items-center justify-between mb-2">
                 <div class="flex items-center gap-3">
                     <div class="bg-danger/10 p-2 rounded-lg">
                         <x-ri-server-line class="size-5 text-danger" />
                     </div>
-                    <span class="font-medium">{{ $server->hostname ?? 'Server #' . $server->id }}</span>
-                </div>
-                <div class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-danger bg-danger/20">
-                    <x-ri-error-warning-fill class="size-5" />
-                    <span class="text-sm font-medium">Unavailable</span>
+                    <span class="font-semibold text-base">{{ $server->hostname ?? 'Server #' . $server->id }}</span>
                 </div>
+                <x-proxmox::ui.badge variant="danger" icon="ri-error-warning-fill">
+                    Unavailable
+                </x-proxmox::ui.badge>
             </div>
             <p class="text-sm text-base/60 mt-2">Unable to retrieve server status. Click to view details or try again.</p>
-        </div>
+        </x-proxmox::ui.card>
     </a>
     @endif
 </div>
diff --git a/extensions/Servers/Proxmox/views/statistics.blade.php b/extensions/Servers/Proxmox/views/statistics.blade.php
index 31088fc20..88b58e0f8 100644
--- a/extensions/Servers/Proxmox/views/statistics.blade.php
+++ b/extensions/Servers/Proxmox/views/statistics.blade.php
@@ -23,76 +23,33 @@
         <div class="flex flex-col gap-4">
             <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                 <div class="flex flex-col gap-1">
-                    <div class="flex items-center gap-2">
-                        <h1 class="text-xl font-semibold">Statistics</h1>
-                        <div class="relative" x-data="{ open: false }" x-cloak>
-                            <button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
-                                <x-ri-question-line class="size-5" />
-                            </button>
-                            <!-- Modal Backdrop -->
-                            <div x-show="open" 
-                                 x-transition:enter="transition ease-out duration-300"
-                                 x-transition:enter-start="opacity-0"
-                                 x-transition:enter-end="opacity-100"
-                                 x-transition:leave="transition ease-in duration-200"
-                                 x-transition:leave-start="opacity-100"
-                                 x-transition:leave-end="opacity-0"
-                                 @click="open = false"
-                                 @keydown.escape.window="open = false"
-                                 class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
-                                 style="display: none;">
-                            </div>
-                            <!-- Modal -->
-                            <div x-show="open"
-                                 x-transition:enter="transition ease-out duration-300"
-                                 x-transition:enter-start="opacity-0 scale-95"
-                                 x-transition:enter-end="opacity-100 scale-100"
-                                 x-transition:leave="transition ease-in duration-200"
-                                 x-transition:leave-start="opacity-100 scale-100"
-                                 x-transition:leave-end="opacity-0 scale-95"
-                                 @click.away="open = false"
-                                 @keydown.escape.window="open = false"
-                                 class="fixed inset-0 z-50 flex items-center justify-center p-4"
-                                 style="display: none;">
-                                <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
-                                    <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
-                                        <x-ri-close-line class="size-5" />
-                                    </button>
-                                    <div class="flex items-center gap-3 mb-4 pr-8">
-                                        <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
-                                            <x-ri-bar-chart-line class="size-5 text-primary" />
-                                        </div>
-                                        <h6 class="font-sans text-lg font-semibold leading-tight">
-                                            Statistics
-                                        </h6>
-                                    </div>
-                                    <p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
-                                        The Statistics page provides comprehensive monitoring and analysis tools for your virtual machine's performance. This page includes real-time telemetry graphs, historical data snapshots, task execution history, lifecycle events tracking, and comparison tools to help you understand your server's behavior over time.
+                    <x-proxmox::ui.section-header 
+                        title="Statistics" 
+                        icon="ri-bar-chart-line"
+                        subtitle="Monitor your server's performance metrics and resource utilization over time."
+                        class="mb-0">
+                        <x-slot name="actions">
+                            <x-proxmox::ui.help-modal title="Statistics" icon="ri-question-line">
+                                <p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
+                                    The Statistics page provides comprehensive monitoring and analysis tools for your virtual machine's performance. This page includes real-time telemetry graphs, historical data snapshots, task execution history, lifecycle events tracking, and comparison tools to help you understand your server's behavior over time.
+                                </p>
+                                <div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
+                                    <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
+                                        <span class="font-semibold text-base/90">Live Telemetry:</span> Four interactive performance graphs display real-time data from the Proxmox RRD API, including Processor Utilization, Network Traffic, Memory Utilization, and Storage I/O.
+                                    </p>
+                                    <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
+                                        <span class="font-semibold text-base/90">Statistics History:</span> View historical performance snapshots in a sortable and filterable table.
+                                    </p>
+                                    <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
+                                        <span class="font-semibold text-base/90">Task History:</span> Monitor all executed tasks with detailed execution logs.
+                                    </p>
+                                    <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
+                                        <span class="font-semibold text-base/90">Lifecycle Events:</span> Track critical state changes and operations.
                                     </p>
-                                    <div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
-                                        <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                            <span class="font-semibold text-base/90">Live Telemetry:</span> Four interactive performance graphs display real-time data from the Proxmox RRD API, including Processor Utilization, Network Traffic, Memory Utilization, and Storage I/O. Each graph supports time range selection (Hour, Day, Week, Month, Year), aggregation methods (Average/Maximum), and CSV export functionality. Graphs automatically refresh every 2 minutes.
-                                        </p>
-                                        <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                            <span class="font-semibold text-base/90">Statistics History:</span> View historical performance snapshots in a sortable and filterable table. The system automatically records statistics hourly (up to 24 entries), and you can create up to 5 manual snapshots. Each entry includes CPU, memory, disk usage, network traffic, disk I/O, uptime, and VM status. All data can be exported to CSV.
-                                        </p>
-                                        <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                            <span class="font-semibold text-base/90">Task History:</span> Monitor all executed tasks on your virtual machine, including their type, status, start/end times, and duration. Expand any task to view detailed execution logs and metadata. The table supports sorting, filtering, and CSV export for analysis and troubleshooting.
-                                        </p>
-                                        <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                            <span class="font-semibold text-base/90">Recent Lifecycle Events:</span> Track critical state changes and operations such as power state changes (start, shutdown, reboot, reset) and backup operations. Events are automatically extracted from task history and displayed with status indicators, timing information, and detailed metadata. The table auto-refreshes every 10 seconds and supports sorting, filtering, and export.
-                                        </p>
-                                        <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                            <span class="font-semibold text-base/90">Historical Data Comparison:</span> Compare current server statistics with historical data from a previous time period. Select both historical and current periods (with custom date/time options), then view side-by-side comparisons of all metrics with percentage change indicators. This helps identify trends, performance changes, and resource utilization patterns over time. All comparison data can be exported to CSV.
-                                        </p>
-                                    </div>
                                 </div>
-                            </div>
-                        </div>
-                    </div>
-                    <p class="text-base/70">
-                        Monitor your server's performance metrics and resource utilization over time.
-                    </p>
+                            </x-proxmox::ui.help-modal>
+                        </x-slot>
+                    </x-proxmox::ui.section-header>
                 </div>
             </div>
         </div>
diff --git a/extensions/Servers/Proxmox/views/storage.blade.php b/extensions/Servers/Proxmox/views/storage.blade.php
index c490b4a44..01a8c7c31 100644
--- a/extensions/Servers/Proxmox/views/storage.blade.php
+++ b/extensions/Servers/Proxmox/views/storage.blade.php
@@ -37,96 +37,36 @@
     @endphp
     
     <div class="space-y-6">
-        <!-- Page Header -->
-        <div class="flex flex-col gap-2">
-            <div class="flex items-center gap-2 min-w-0">
-                <h2 class="text-xl font-semibold break-words">Storage Management</h2>
-                <div class="relative" x-data="{ open: false }" x-cloak>
-                    <button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
-                        <x-ri-question-line class="size-4" />
-                    </button>
-                    <!-- Modal Backdrop -->
-                    <div x-show="open" 
-                         x-transition:enter="transition ease-out duration-300"
-                         x-transition:enter-start="opacity-0"
-                         x-transition:enter-end="opacity-100"
-                         x-transition:leave="transition ease-in duration-200"
-                         x-transition:leave-start="opacity-100"
-                         x-transition:leave-end="opacity-0"
-                         @click="open = false"
-                         @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
-                         style="display: none;">
-                    </div>
-                    <!-- Modal -->
-                    <div x-show="open"
-                         x-transition:enter="transition ease-out duration-300"
-                         x-transition:enter-start="opacity-0 scale-95"
-                         x-transition:enter-end="opacity-100 scale-100"
-                         x-transition:leave="transition ease-in duration-200"
-                         x-transition:leave-start="opacity-100 scale-100"
-                         x-transition:leave-end="opacity-0 scale-95"
-                         @click.away="open = false"
-                         @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 flex items-center justify-center p-4"
-                         style="display: none;">
-                        <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
-                            <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
-                                <x-ri-close-line class="size-5" />
-                            </button>
-                            <div class="flex items-center gap-3 mb-4 pr-8">
-                                <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
-                                    <x-ri-hard-drive-2-line class="size-5 text-primary" />
-                                </div>
-                                <h6 class="font-sans text-lg font-semibold leading-tight text-base">
-                                    Storage Management
-                                </h6>
-                            </div>
-                            <p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
-                                Manage the storage drives attached to your VPS. You can add, remove, and configure drives with different bus types, cache modes, and performance options.
-                            </p>
-                            <div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
-                                <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                    <span class="font-semibold text-base/90">Bus Types:</span> SCSI (VirtIO SCSI) offers the best performance with IO thread support. VirtIO Block is also high-performance. IDE and SATA are available for compatibility.
-                                </p>
-                                <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                    <span class="font-semibold text-base/90">Important:</span> The VM must be stopped to add, remove, or move drives. Total storage cannot exceed your plan allocation.
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <p class="text-sm text-base/60">Manage virtual hard disks attached to your VPS. Add, configure, or remove storage drives.</p>
-        </div>
+        {{-- Page Header --}}
+        <x-proxmox::ui.section-header 
+            title="Storage Management" 
+            subtitle="Manage virtual hard disks attached to your VPS. Add, configure, or remove storage drives."
+            icon="ri-hard-drive-2-line"
+        >
+            <x-proxmox::ui.help-modal title="Storage Management" icon="ri-hard-drive-2-line">
+                <x-slot:description>
+                    Manage the storage drives attached to your VPS. You can add, remove, and configure drives with different bus types, cache modes, and performance options.
+                </x-slot:description>
+                <x-slot:details>
+                    <p><span class="font-semibold text-base/90">Bus Types:</span> SCSI (VirtIO SCSI) offers the best performance with IO thread support. VirtIO Block is also high-performance. IDE and SATA are available for compatibility.</p>
+                    <p><span class="font-semibold text-base/90">Important:</span> The VM must be stopped to add, remove, or move drives. Total storage cannot exceed your plan allocation.</p>
+                </x-slot:details>
+            </x-proxmox::ui.help-modal>
+        </x-proxmox::ui.section-header>
 
-        <!-- VM Running Warning -->
+        {{-- VM Running Warning --}}
         @if($status && $status->status !== 'stopped')
-            <div class="bg-error/10 border border-error/30 rounded-lg p-4">
-                <div class="flex items-start gap-3">
-                    <x-ri-error-warning-fill class="size-5 text-error flex-shrink-0 mt-0.5" />
-                    <div class="flex-1">
-                        <h3 class="text-sm font-semibold">Server Must Be Powered Off</h3>
-                        <p class="text-xs text-base/70 leading-relaxed mt-1">Storage changes can only be made when the server is in a powered off state. Please shut down your server before making any storage modifications.</p>
-                    </div>
-                </div>
-            </div>
+            <x-proxmox::ui.alert variant="danger" title="Server Must Be Powered Off">
+                Storage changes can only be made when the server is in a powered off state. Please shut down your server before making any storage modifications.
+            </x-proxmox::ui.alert>
         @endif
 
-        <!-- Storage Over-Provisioned Warning -->
+        {{-- Storage Over-Provisioned Warning --}}
         @if($totalAllocatedStorage > $maxAllowedStorage && $maxAllowedStorage > 0)
-            <div class="bg-error/10 border border-error/30 rounded-lg p-4">
-                <div class="flex items-start gap-3">
-                    <x-ri-alarm-warning-fill class="size-5 text-error flex-shrink-0 mt-0.5" />
-                    <div class="flex-1">
-                        <h3 class="text-sm font-semibold">Storage Quota Exceeded</h3>
-                        <p class="text-xs text-base/70 leading-relaxed mt-1">
-                            <strong>Your server has {{ number_format($totalAllocatedStorage, 1) }} GB of storage configured, but your plan only allows {{ number_format($maxAllowedStorage, 1) }} GB.</strong> 
-                            The server cannot be started until storage is reduced to within your plan limits. Please delete drives or upgrade your service to allow this configuration.
-                        </p>
-                    </div>
-                </div>
-            </div>
+            <x-proxmox::ui.alert variant="danger" title="Storage Quota Exceeded" icon="ri-alarm-warning-fill">
+                <strong>Your server has {{ number_format($totalAllocatedStorage, 1) }} GB of storage configured, but your plan only allows {{ number_format($maxAllowedStorage, 1) }} GB.</strong> 
+                The server cannot be started until storage is reduced to within your plan limits. Please delete drives or upgrade your service to allow this configuration.
+            </x-proxmox::ui.alert>
         @endif
 
         <!-- Storage Usage Overview -->
@@ -178,62 +118,22 @@
             </div>
         </div>
 
-        <!-- SCSI Controller Configuration -->
-        <div class="bg-background-secondary border border-neutral rounded-lg p-5 space-y-4">
-            <div class="flex items-center justify-between">
+        {{-- SCSI Controller Configuration --}}
+        <x-proxmox::ui.card>
+            <div class="flex items-center justify-between mb-4">
                 <div>
                     <div class="flex items-center gap-2">
-                        <h3 class="text-lg font-semibold">SCSI Controller</h3>
-                        <div class="relative" x-data="{ open: false }" x-cloak>
-                            <button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
-                                <x-ri-question-line class="size-4" />
-                            </button>
-                            <!-- Modal Backdrop -->
-                            <div x-show="open" 
-                                 x-transition:enter="transition ease-out duration-300"
-                                 x-transition:enter-start="opacity-0"
-                                 x-transition:enter-end="opacity-100"
-                                 x-transition:leave="transition ease-in duration-200"
-                                 x-transition:leave-start="opacity-100"
-                                 x-transition:leave-end="opacity-0"
-                                 @click="open = false"
-                                 @keydown.escape.window="open = false"
-                                 class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
-                                 style="display: none;">
-                            </div>
-                            <!-- Modal -->
-                            <div x-show="open"
-                                 x-transition:enter="transition ease-out duration-300"
-                                 x-transition:enter-start="opacity-0 scale-95"
-                                 x-transition:enter-end="opacity-100 scale-100"
-                                 x-transition:leave="transition ease-in duration-200"
-                                 x-transition:leave-start="opacity-100 scale-100"
-                                 x-transition:leave-end="opacity-0 scale-95"
-                                 @click.away="open = false"
-                                 @keydown.escape.window="open = false"
-                                 class="fixed inset-0 z-50 flex items-center justify-center p-4"
-                                 style="display: none;">
-                                <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
-                                    <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
-                                        <x-ri-close-line class="size-5" />
-                                    </button>
-                                    <div class="flex items-center gap-3 mb-4 pr-8">
-                                        <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
-                                            <x-ri-cpu-line class="size-5 text-primary" />
-                                        </div>
-                                        <h6 class="font-sans text-lg font-semibold leading-tight text-base">
-                                            SCSI Controller Types
-                                        </h6>
-                                    </div>
-                                    <div class="space-y-3 text-sm text-base/90">
-                                        <p><strong>VirtIO SCSI / VirtIO SCSI Single:</strong> Best performance with paravirtualized drivers. Recommended for Linux and modern Windows.</p>
-                                        <p><strong>LSI 53C895A / LSI 53C810:</strong> Emulated LSI controllers with wide compatibility.</p>
-                                        <p><strong>MegaRAID SAS 8708EM2:</strong> Emulated MegaRAID controller.</p>
-                                        <p><strong>VMware PVSCSI:</strong> VMware paravirtualized controller, useful for VMs migrated from VMware.</p>
-                                    </div>
+                        <h3 class="text-lg font-semibold text-base">SCSI Controller</h3>
+                        <x-proxmox::ui.help-modal title="SCSI Controller Types" icon="ri-cpu-line">
+                            <x-slot:description>
+                                <div class="space-y-3 text-sm text-base/90">
+                                    <p><strong>VirtIO SCSI / VirtIO SCSI Single:</strong> Best performance with paravirtualized drivers. Recommended for Linux and modern Windows.</p>
+                                    <p><strong>LSI 53C895A / LSI 53C810:</strong> Emulated LSI controllers with wide compatibility.</p>
+                                    <p><strong>MegaRAID SAS 8708EM2:</strong> Emulated MegaRAID controller.</p>
+                                    <p><strong>VMware PVSCSI:</strong> VMware paravirtualized controller, useful for VMs migrated from VMware.</p>
                                 </div>
-                            </div>
-                        </div>
+                            </x-slot:description>
+                        </x-proxmox::ui.help-modal>
                     </div>
                     <p class="text-sm text-base/60 mt-1">Select the SCSI controller type for SCSI drives.</p>
                 </div>
@@ -259,24 +159,26 @@
             </div>
             
             @if($vmRunning && !$this->scsiControllerSynced)
-                <div class="flex items-center gap-2 p-3 rounded-lg bg-warning/10 border border-warning/30 text-warning text-sm">
-                    <x-ri-alert-line class="size-4 flex-shrink-0" />
-                    <span>VM must be stopped to change the SCSI controller type.</span>
-                </div>
+                <x-proxmox::ui.alert variant="warning" class="mt-4">
+                    VM must be stopped to change the SCSI controller type.
+                </x-proxmox::ui.alert>
             @endif
-        </div>
+        </x-proxmox::ui.card>
 
-        <!-- Drives List -->
-        <div class="bg-background-secondary border border-neutral rounded-lg overflow-hidden">
-            <div class="p-5 border-b border-neutral">
-                <h3 class="text-lg font-semibold">Attached Drives</h3>
+        {{-- Drives List --}}
+        <x-proxmox::ui.card :noPadding="true">
+            <div class="p-5 border-b border-neutral/20">
+                <h3 class="text-lg font-semibold text-base">Attached Drives</h3>
                 <p class="text-sm text-base/60 mt-1">Manage the virtual hard disks connected to your VPS.</p>
             </div>
             
             @if(count($drives) === 0)
-                <div class="p-8 text-center">
-                    <x-ri-hard-drive-2-line class="size-12 mx-auto text-base/30 mb-3" />
-                    <p class="text-base/60">No drives attached to this VM.</p>
+                <x-proxmox::ui.empty-state 
+                    title="No Drives Attached" 
+                    description="No drives are currently attached to this VM."
+                    icon="ri-hard-drive-2-line"
+                    class="py-8"
+                >
                     @if($this->remainingStorage > 0 && !$vmRunning)
                         <button wire:click="openAddDriveModal" class="mt-4 text-primary hover:text-primary/80 text-sm font-medium">
                             Add your first drive →
@@ -284,7 +186,7 @@
                     @elseif($this->remainingStorage > 0 && $vmRunning)
                         <p class="mt-4 text-base/50 text-sm">Power off server to add drives</p>
                     @endif
-                </div>
+                </x-proxmox::ui.empty-state>
             @else
                 <div class="divide-y divide-neutral">
                     @foreach($drives as $driveKey => $drive)
@@ -381,41 +283,37 @@
                     @endforeach
                 </div>
             @endif
-        </div>
+        </x-proxmox::ui.card>
 
-        <!-- Detached/Unused Drives -->
+        {{-- Detached/Unused Drives --}}
         @if(count($unusedDrives) > 0)
-            <div class="bg-background-secondary border border-neutral rounded-lg overflow-hidden">
-                <div class="p-5 border-b border-neutral">
+            <x-proxmox::ui.card :noPadding="true">
+                <div class="p-5 border-b border-neutral/20">
                     <div class="flex items-center justify-between">
                         <div>
                             <div class="flex items-center gap-2">
                                 <x-ri-eject-line class="size-5 text-warning" />
-                                <h3 class="text-lg font-semibold">Detached Drives</h3>
-                                <span class="px-2 py-0.5 text-xs font-medium rounded {{ count($unusedDrives) >= 2 ? 'bg-danger/20 text-danger' : 'bg-warning/20 text-warning' }}">{{ count($unusedDrives) }}/2</span>
+                                <h3 class="text-lg font-semibold text-base">Detached Drives</h3>
+                                <x-proxmox::ui.badge :variant="count($unusedDrives) >= 2 ? 'danger' : 'warning'">
+                                    {{ count($unusedDrives) }}/2
+                                </x-proxmox::ui.badge>
                             </div>
                             <p class="text-sm text-base/60 mt-1">These drives have been detached but their data is preserved. You can reattach them or delete them permanently.</p>
                         </div>
                     </div>
                     @if(count($unusedDrives) >= 2)
-                        <div class="mt-3 p-3 rounded-lg bg-danger/10 border border-danger/30">
-                            <p class="text-xs text-danger flex items-center gap-2">
-                                <x-ri-error-warning-line class="size-4 flex-shrink-0" />
-                                Maximum detached drives reached. Please reattach or delete drives before detaching more.
-                            </p>
-                        </div>
+                        <x-proxmox::ui.alert variant="danger" class="mt-3">
+                            Maximum detached drives reached. Please reattach or delete drives before detaching more.
+                        </x-proxmox::ui.alert>
                     @endif
                     @if($totalAllocatedStorage >= $maxAllowedStorage && $maxAllowedStorage > 0)
-                        <div class="mt-3 p-3 rounded-lg bg-danger/10 border border-danger/30">
-                            <p class="text-xs text-danger flex items-center gap-2">
-                                <x-ri-error-warning-line class="size-4 flex-shrink-0" />
-                                Storage quota reached ({{ number_format($totalAllocatedStorage, 1) }} GB / {{ number_format($maxAllowedStorage, 1) }} GB). Reattaching drives is disabled. Please upgrade your service or delete drives to allow this configuration.
-                            </p>
-                        </div>
+                        <x-proxmox::ui.alert variant="danger" class="mt-3">
+                            Storage quota reached ({{ number_format($totalAllocatedStorage, 1) }} GB / {{ number_format($maxAllowedStorage, 1) }} GB). Reattaching drives is disabled. Please upgrade your service or delete drives to allow this configuration.
+                        </x-proxmox::ui.alert>
                     @endif
                 </div>
                 
-                <div class="divide-y divide-neutral">
+                <div class="divide-y divide-neutral/20">
                     @foreach($unusedDrives as $unusedKey => $unusedDrive)
                         <div class="p-4 hover:bg-background/50 transition-colors">
                             <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
@@ -489,7 +387,7 @@
                         </div>
                     @endforeach
                 </div>
-            </div>
+            </x-proxmox::ui.card>
         @endif
     </div>