diff --git a/app/Http/Livewire/Server/Delete.php b/app/Http/Livewire/Server/Delete.php
new file mode 100644
index 000000000..966de4f19
--- /dev/null
+++ b/app/Http/Livewire/Server/Delete.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Http\Livewire\Server;
+
+use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
+use Livewire\Component;
+
+class Delete extends Component
+{
+    use AuthorizesRequests;
+
+    public $server;
+    public function delete()
+    {
+        try {
+            $this->authorize('delete', $this->server);
+            if (!$this->server->isEmpty()) {
+                $this->emit('error', 'Server has defined resources. Please delete them first.');
+                return;
+            }
+            $this->server->delete();
+            return redirect()->route('server.all');
+        } catch (\Throwable $e) {
+            return handleError($e, $this);
+        }
+    }
+    public function render()
+    {
+        return view('livewire.server.delete');
+    }
+}
diff --git a/app/Http/Livewire/Server/Form.php b/app/Http/Livewire/Server/Form.php
index e71db0093..4caa15b3f 100644
--- a/app/Http/Livewire/Server/Form.php
+++ b/app/Http/Livewire/Server/Form.php
@@ -4,12 +4,10 @@ namespace App\Http\Livewire\Server;
 
 use App\Actions\Server\InstallDocker;
 use App\Models\Server;
-use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
 use Livewire\Component;
 
 class Form extends Component
 {
-    use AuthorizesRequests;
     public Server $server;
     public bool $isValidConnection = false;
     public bool $isValidDocker = false;
@@ -106,23 +104,9 @@ class Form extends Component
         }
     }
 
-    public function delete()
-    {
-        try {
-            $this->authorize('delete', $this->server);
-            if (!$this->server->isEmpty()) {
-                $this->emit('error', 'Server has defined resources. Please delete them first.');
-                return;
-            }
-            $this->server->delete();
-            return redirect()->route('server.all');
-        } catch (\Throwable $e) {
-            return handleError($e, $this);
-        }
-    }
     public function submit()
     {
-        if(isCloud() && !isDev()) {
+        if (isCloud() && !isDev()) {
             $this->validate();
             $this->validate([
                 'server.ip' => 'required',
diff --git a/resources/views/livewire/server/delete.blade.php b/resources/views/livewire/server/delete.blade.php
new file mode 100644
index 000000000..b4a9a030f
--- /dev/null
+++ b/resources/views/livewire/server/delete.blade.php
@@ -0,0 +1,18 @@
+<div>
+    <x-modal yesOrNo modalId="deleteServer" modalTitle="Delete Server">
+        <x-slot:modalBody>
+            <p>This server will be deleted. It is not reversible. <br>Please think again..</p>
+        </x-slot:modalBody>
+    </x-modal>
+    @if ($server->id !== 0)
+        <h2 class="pt-4">Danger Zone</h2>
+        <div class="">Woah. I hope you know what are you doing.</div>
+        <h4 class="pt-4">Delete Server</h4>
+        <div class="pb-4">This will remove this server from Coolify. Beware! There is no coming
+            back!
+        </div>
+        <x-forms.button isError isModal modalId="deleteServer">
+            Delete
+        </x-forms.button>
+    @endif
+</div>
diff --git a/resources/views/livewire/server/form.blade.php b/resources/views/livewire/server/form.blade.php
index 6f5d0d32b..047bf1882 100644
--- a/resources/views/livewire/server/form.blade.php
+++ b/resources/views/livewire/server/form.blade.php
@@ -1,9 +1,4 @@
 <div x-init="$wire.validateServer(false)">
-    <x-modal yesOrNo modalId="deleteServer" modalTitle="Delete Server">
-        <x-slot:modalBody>
-            <p>This server will be deleted. It is not reversible. <br>Please think again..</p>
-        </x-slot:modalBody>
-    </x-modal>
     <x-modal yesOrNo modalId="changeLocalhost" modalTitle="Change Localhost" action="submit">
         <x-slot:modalBody>
             <p>You could lost a lot of functionalities if you change the server details of the server where Coolify is
@@ -47,7 +42,8 @@
                     label="Is it part of a Swarm cluster?" /> --}}
             </div>
             <div class="flex flex-col w-full gap-2 lg:flex-row">
-                <x-forms.input id="server.ip" label="IP Address/Domain"  helper="An IP Address (127.0.0.1) or domain (example.com)."  required />
+                <x-forms.input id="server.ip" label="IP Address/Domain"
+                    helper="An IP Address (127.0.0.1) or domain (example.com)." required />
                 <div class="flex gap-2">
                     <x-forms.input id="server.user" label="User" required />
                     <x-forms.input type="number" id="server.port" label="Port" required />
@@ -66,21 +62,9 @@
                 helper="Disk cleanup job will be executed if disk usage is more than this number." />
         @endif
     </form>
-    @if ($server->id !== 0)
-        <h2 class="pt-4">Danger Zone</h2>
-        <div class="">Woah. I hope you know what are you doing.</div>
-        <h4 class="pt-4">Delete Server</h4>
-        <div class="pb-4">This will remove this server from Coolify. Beware! There is no coming
-            back!
-        </div>
-        <x-forms.button isError isModal modalId="deleteServer">
-            Delete
-        </x-forms.button>
-    @endif
-
+    <livewire:server.delete :server="$server" />
     <script>
         Livewire.on('installDocker', () => {
-            console.log('asd');
             installDocker.showModal();
         })
     </script>