diff --git a/extensions/Servers/Proxmox/views/firewall.blade.php b/extensions/Servers/Proxmox/views/firewall.blade.php
index 9f884db7f..30a085572 100644
--- a/extensions/Servers/Proxmox/views/firewall.blade.php
+++ b/extensions/Servers/Proxmox/views/firewall.blade.php
@@ -2272,9 +2272,19 @@
 
 <!-- Error Message Modal -->
 @if($error && $showErrorModal)
-    <div class="fixed inset-0 flex items-center justify-center z-[9999] bg-black/50 backdrop-blur-sm" 
-         wire:click="$set('error', ''); $set('showErrorModal', false)">
-        <div class="bg-error/20 border-2 border-error rounded-lg p-6 shadow-lg max-w-3xl w-full mx-4 max-h-[80vh] overflow-y-auto" wire:click.stop>
+    <!-- Modal Backdrop -->
+    <div wire:click="$set('error', ''); $set('showErrorModal', false)"
+         class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+         style="display: block;">
+    </div>
+    <!-- Modal -->
+    <div class="fixed inset-0 z-50 flex items-center justify-center p-4"
+         style="display: block;">
+        <div class="relative w-full max-w-3xl max-h-[80vh] overflow-y-auto bg-error/20 border-2 border-error rounded-xl shadow-2xl p-6" wire:click.stop>
+            <button wire:click="$set('error', ''); $set('showErrorModal', false)" 
+                    class="absolute top-4 right-4 text-error/70 hover:text-error transition-colors">
+                <x-ri-close-line class="size-5" />
+            </button>
             <div class="flex items-start gap-3">
                 <x-ri-error-warning-fill class="size-6 text-error flex-shrink-0 mt-0.5" />
                 <div class="flex-1">
@@ -2283,11 +2293,6 @@
                         <p class="text-sm text-error/90 leading-relaxed whitespace-pre-wrap break-words">{{ $error }}</p>
                     </div>
                 </div>
-                <button 
-                    wire:click="$set('error', ''); $set('showErrorModal', false)"
-                    class="text-error/70 hover:text-error transition-colors flex-shrink-0">
-                    <x-ri-close-line class="size-5" />
-                </button>
             </div>
         </div>
     </div>
@@ -2295,17 +2300,22 @@
 
 <!-- Add/Edit Rule Modal -->
 @if($showRuleForm)
-    <div class="fixed inset-0 flex items-center justify-center z-[9999] bg-black/50 backdrop-blur-sm" 
-         wire:click="$set('showRuleForm', false); $set('editingRulePos', null); resetRuleForm()">
-        <div class="bg-background border border-neutral rounded-lg p-6 shadow-lg max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto" wire:click.stop>
-            <div class="flex items-center justify-between mb-4">
-                    <h3 class="text-lg font-semibold">{{ $editingRulePos !== null ? 'Edit Rule' : 'Create New Rule' }}</h3>
-                    <button 
-                        wire:click="$set('showRuleForm', false); $set('editingRulePos', null); resetRuleForm()" 
-                        class="text-base/50 hover:text-base transition-colors">
-                        <x-ri-close-line class="size-5" />
-                    </button>
-                </div>
+    <!-- Modal Backdrop -->
+    <div wire:click="$set('showRuleForm', false); $set('editingRulePos', null); resetRuleForm()"
+         class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+         style="display: block;">
+    </div>
+    <!-- Modal -->
+    <div class="fixed inset-0 z-50 flex items-center justify-center p-4"
+         style="display: block;">
+        <div class="relative w-full max-w-4xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6" wire:click.stop>
+            <button wire:click="$set('showRuleForm', false); $set('editingRulePos', null); resetRuleForm()" 
+                    class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors z-10">
+                <x-ri-close-line class="size-5" />
+            </button>
+            <div class="mb-4 pr-8">
+                <h3 class="text-lg font-semibold">{{ $editingRulePos !== null ? 'Edit Rule' : 'Create New Rule' }}</h3>
+            </div>
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <div>
                         <label class="block text-sm font-medium mb-2">Action</label>
@@ -2436,19 +2446,30 @@
                         Cancel
                     </button>
                 </div>
-            </div>
         </div>
-    @endif
+    </div>
+@endif
 
 <!-- Delete Rule Confirmation Modal -->
 @if($showDeleteModal && $deletingRulePos !== null)
     @php
         $ruleToDelete = collect($rules)->firstWhere('pos', $deletingRulePos);
     @endphp
-    <div class="fixed inset-0 flex items-center justify-center z-[9999] bg-black/60 backdrop-blur-sm transition-opacity"
-             wire:click="cancelDeleteRule">
-            <div class="bg-background border border-neutral/30 rounded-xl p-6 shadow-2xl max-w-lg w-full mx-4 transform transition-all" wire:click.stop>
-                <div class="flex items-start gap-4 mb-6">
+    <!-- Modal Backdrop -->
+    <div wire:click="cancelDeleteRule"
+         class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+         style="display: block;">
+    </div>
+    <!-- Modal -->
+    <div class="fixed inset-0 z-50 flex items-center justify-center p-4"
+         style="display: block;">
+        <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" wire:click.stop>
+            <button wire:click="cancelDeleteRule" 
+                    class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors z-10">
+                <x-ri-close-line class="size-5" />
+            </button>
+            <div class="mb-6 pr-8">
+                <div class="flex items-start gap-4">
                     <div class="flex items-center justify-center w-12 h-12 rounded-full bg-error/10 flex-shrink-0">
                         <x-ri-delete-bin-fill class="size-6 text-error" />
                     </div>
@@ -2503,13 +2524,9 @@
                             </div>
                         @endif
                     </div>
-                    <button 
-                        wire:click="cancelDeleteRule"
-                        class="text-base/40 hover:text-base transition-colors flex-shrink-0">
-                        <x-ri-close-line class="size-5" />
-                    </button>
                 </div>
-                <div class="flex gap-3 justify-end pt-4 border-t border-neutral/20">
+            </div>
+            <div class="flex gap-3 justify-end pt-4 border-t border-neutral/20">
                     <button 
                         wire:click="cancelDeleteRule"
                         class="px-5 py-2.5 bg-background-secondary border border-neutral/30 rounded-lg hover:bg-background hover:border-neutral/50 transition-all text-sm font-medium text-base/80">
@@ -2530,6 +2547,6 @@
                         <span wire:loading wire:target="deleteRule">Deleting...</span>
                     </button>
                 </div>
-            </div>
         </div>
-    @endif
+    </div>
+@endif