diff --git a/app/Actions/Database/StartClickhouse.php b/app/Actions/Database/StartClickhouse.php
index f218fcabb..38f6d7bc8 100644
--- a/app/Actions/Database/StartClickhouse.php
+++ b/app/Actions/Database/StartClickhouse.php
@@ -105,6 +105,8 @@ public function handle(StandaloneClickhouse $database)
         $this->commands[] = "echo '{$readme}' > $this->configuration_dir/README.md";
         $this->commands[] = "echo 'Pulling {$database->image} image.'";
         $this->commands[] = "docker compose -f $this->configuration_dir/docker-compose.yml pull";
+        $this->commands[] = "docker stop --timeout=10 $container_name 2>/dev/null || true";
+        $this->commands[] = "docker rm -f $container_name 2>/dev/null || true";
         $this->commands[] = "docker compose -f $this->configuration_dir/docker-compose.yml up -d";
         $this->commands[] = "echo 'Database started.'";
 
diff --git a/app/Actions/Database/StartDragonfly.php b/app/Actions/Database/StartDragonfly.php
index 0db73ba07..300221d24 100644
--- a/app/Actions/Database/StartDragonfly.php
+++ b/app/Actions/Database/StartDragonfly.php
@@ -192,6 +192,8 @@ public function handle(StandaloneDragonfly $database)
         if ($this->database->enable_ssl) {
             $this->commands[] = "chown -R 999:999 $this->configuration_dir/ssl/server.key $this->configuration_dir/ssl/server.crt";
         }
+        $this->commands[] = "docker stop --timeout=10 $container_name 2>/dev/null || true";
+        $this->commands[] = "docker rm -f $container_name 2>/dev/null || true";
         $this->commands[] = "docker compose -f $this->configuration_dir/docker-compose.yml up -d";
         $this->commands[] = "echo 'Database started.'";
 
diff --git a/app/Actions/Database/StartKeydb.php b/app/Actions/Database/StartKeydb.php
index 2908eb9c1..3a2ceebb3 100644
--- a/app/Actions/Database/StartKeydb.php
+++ b/app/Actions/Database/StartKeydb.php
@@ -208,6 +208,8 @@ public function handle(StandaloneKeydb $database)
         if ($this->database->enable_ssl) {
             $this->commands[] = "chown -R 999:999 $this->configuration_dir/ssl/server.key $this->configuration_dir/ssl/server.crt";
         }
+        $this->commands[] = "docker stop --timeout=10 $container_name 2>/dev/null || true";
+        $this->commands[] = "docker rm -f $container_name 2>/dev/null || true";
         $this->commands[] = "docker compose -f $this->configuration_dir/docker-compose.yml up -d";
         $this->commands[] = "echo 'Database started.'";
 
diff --git a/app/Actions/Database/StartMariadb.php b/app/Actions/Database/StartMariadb.php
index 11b424ff8..8a936c8ae 100644
--- a/app/Actions/Database/StartMariadb.php
+++ b/app/Actions/Database/StartMariadb.php
@@ -209,6 +209,8 @@ public function handle(StandaloneMariadb $database)
         $this->commands[] = "echo '{$readme}' > $this->configuration_dir/README.md";
         $this->commands[] = "echo 'Pulling {$database->image} image.'";
         $this->commands[] = "docker compose -f $this->configuration_dir/docker-compose.yml pull";
+        $this->commands[] = "docker stop --timeout=10 $container_name 2>/dev/null || true";
+        $this->commands[] = "docker rm -f $container_name 2>/dev/null || true";
         $this->commands[] = "docker compose -f $this->configuration_dir/docker-compose.yml up -d";
         $this->commands[] = "echo 'Database started.'";
         if ($this->database->enable_ssl) {
diff --git a/app/Actions/Database/StartMongodb.php b/app/Actions/Database/StartMongodb.php
index 0bf6ab253..19699d684 100644
--- a/app/Actions/Database/StartMongodb.php
+++ b/app/Actions/Database/StartMongodb.php
@@ -260,6 +260,8 @@ public function handle(StandaloneMongodb $database)
         $this->commands[] = "echo '{$readme}' > $this->configuration_dir/README.md";
         $this->commands[] = "echo 'Pulling {$database->image} image.'";
         $this->commands[] = "docker compose -f $this->configuration_dir/docker-compose.yml pull";
+        $this->commands[] = "docker stop --timeout=10 $container_name 2>/dev/null || true";
+        $this->commands[] = "docker rm -f $container_name 2>/dev/null || true";
         $this->commands[] = "docker compose -f $this->configuration_dir/docker-compose.yml up -d";
         if ($this->database->enable_ssl) {
             $this->commands[] = executeInDocker($this->database->uuid, 'chown mongodb:mongodb /etc/mongo/certs/server.pem');
diff --git a/app/Actions/Database/StartMysql.php b/app/Actions/Database/StartMysql.php
index bf81d01ab..25546fa9d 100644
--- a/app/Actions/Database/StartMysql.php
+++ b/app/Actions/Database/StartMysql.php
@@ -210,6 +210,8 @@ public function handle(StandaloneMysql $database)
         $this->commands[] = "echo '{$readme}' > $this->configuration_dir/README.md";
         $this->commands[] = "echo 'Pulling {$database->image} image.'";
         $this->commands[] = "docker compose -f $this->configuration_dir/docker-compose.yml pull";
+        $this->commands[] = "docker stop --timeout=10 $container_name 2>/dev/null || true";
+        $this->commands[] = "docker rm -f $container_name 2>/dev/null || true";
         $this->commands[] = "docker compose -f $this->configuration_dir/docker-compose.yml up -d";
 
         if ($this->database->enable_ssl) {
diff --git a/app/Actions/Database/StartPostgresql.php b/app/Actions/Database/StartPostgresql.php
index 6cdf32e27..ac011acbe 100644
--- a/app/Actions/Database/StartPostgresql.php
+++ b/app/Actions/Database/StartPostgresql.php
@@ -223,6 +223,8 @@ public function handle(StandalonePostgresql $database)
         $this->commands[] = "echo '{$readme}' > $this->configuration_dir/README.md";
         $this->commands[] = "echo 'Pulling {$database->image} image.'";
         $this->commands[] = "docker compose -f $this->configuration_dir/docker-compose.yml pull";
+        $this->commands[] = "docker stop --timeout=10 $container_name 2>/dev/null || true";
+        $this->commands[] = "docker rm -f $container_name 2>/dev/null || true";
         $this->commands[] = "docker compose -f $this->configuration_dir/docker-compose.yml up -d";
         if ($this->database->enable_ssl) {
             $this->commands[] = executeInDocker($this->database->uuid, "chown {$this->database->postgres_user}:{$this->database->postgres_user} /var/lib/postgresql/certs/server.key /var/lib/postgresql/certs/server.crt");
diff --git a/app/Actions/Database/StartRedis.php b/app/Actions/Database/StartRedis.php
index c040ec391..8a7ae42a4 100644
--- a/app/Actions/Database/StartRedis.php
+++ b/app/Actions/Database/StartRedis.php
@@ -205,6 +205,8 @@ public function handle(StandaloneRedis $database)
         if ($this->database->enable_ssl) {
             $this->commands[] = "chown -R 999:999 $this->configuration_dir/ssl/server.key $this->configuration_dir/ssl/server.crt";
         }
+        $this->commands[] = "docker stop --timeout=10 $container_name 2>/dev/null || true";
+        $this->commands[] = "docker rm -f $container_name 2>/dev/null || true";
         $this->commands[] = "docker compose -f $this->configuration_dir/docker-compose.yml up -d";
         $this->commands[] = "echo 'Database started.'";
 
diff --git a/app/Actions/Database/StopDatabase.php b/app/Actions/Database/StopDatabase.php
index 5c881e743..63f5b1979 100644
--- a/app/Actions/Database/StopDatabase.php
+++ b/app/Actions/Database/StopDatabase.php
@@ -49,7 +49,7 @@ private function stopContainer($database, string $containerName, int $timeout =
     {
         $server = $database->destination->server;
         instant_remote_process(command: [
-            "docker stop --time=$timeout $containerName",
+            "docker stop --timeout=$timeout $containerName",
             "docker rm -f $containerName",
         ], server: $server, throwError: false);
     }
diff --git a/app/Livewire/Boarding/Index.php b/app/Livewire/Boarding/Index.php
index 430470fa0..ac2b9213b 100644
--- a/app/Livewire/Boarding/Index.php
+++ b/app/Livewire/Boarding/Index.php
@@ -16,14 +16,18 @@ class Index extends Component
 {
     protected $listeners = ['refreshBoardingIndex' => 'validateServer'];
 
+    #[\Livewire\Attributes\Url(as: 'step', history: true)]
     public string $currentState = 'welcome';
 
+    #[\Livewire\Attributes\Url(keep: true)]
     public ?string $selectedServerType = null;
 
     public ?Collection $privateKeys = null;
 
+    #[\Livewire\Attributes\Url(keep: true)]
     public ?int $selectedExistingPrivateKey = null;
 
+    #[\Livewire\Attributes\Url(keep: true)]
     public ?string $privateKeyType = null;
 
     public ?string $privateKey = null;
@@ -38,6 +42,7 @@ class Index extends Component
 
     public ?Collection $servers = null;
 
+    #[\Livewire\Attributes\Url(keep: true)]
     public ?int $selectedExistingServer = null;
 
     public ?string $remoteServerName = null;
@@ -58,6 +63,7 @@ class Index extends Component
 
     public Collection $projects;
 
+    #[\Livewire\Attributes\Url(keep: true)]
     public ?int $selectedProject = null;
 
     public ?Project $createdProject = null;
@@ -79,17 +85,68 @@ public function mount()
         $this->minDockerVersion = str(config('constants.docker.minimum_required_version'))->before('.');
         $this->privateKeyName = generate_random_name();
         $this->remoteServerName = generate_random_name();
-        if (isDev()) {
-            $this->privateKey = '-----BEGIN OPENSSH PRIVATE KEY-----
-b3BlbnNzaC1rZXktdjEAAAAABG5vbmUAAAAEbm9uZQAAAAAAAAABAAAAMwAAAAtzc2gtZW
-QyNTUxOQAAACBbhpqHhqv6aI67Mj9abM3DVbmcfYhZAhC7ca4d9UCevAAAAJi/QySHv0Mk
-hwAAAAtzc2gtZWQyNTUxOQAAACBbhpqHhqv6aI67Mj9abM3DVbmcfYhZAhC7ca4d9UCevA
-AAAECBQw4jg1WRT2IGHMncCiZhURCts2s24HoDS0thHnnRKVuGmoeGq/pojrsyP1pszcNV
-uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
------END OPENSSH PRIVATE KEY-----';
-            $this->privateKeyDescription = 'Created by Coolify';
-            $this->remoteServerDescription = 'Created by Coolify';
-            $this->remoteServerHost = 'coolify-testing-host';
+
+        // Initialize collections to avoid null errors
+        if ($this->privateKeys === null) {
+            $this->privateKeys = collect();
+        }
+        if ($this->servers === null) {
+            $this->servers = collect();
+        }
+        if (! isset($this->projects)) {
+            $this->projects = collect();
+        }
+
+        // Restore state when coming from URL with query params
+        if ($this->selectedServerType === 'localhost' && $this->selectedExistingServer === 0) {
+            $this->createdServer = Server::find(0);
+            if ($this->createdServer) {
+                $this->serverPublicKey = $this->createdServer->privateKey->getPublicKey();
+            }
+        }
+
+        if ($this->selectedServerType === 'remote') {
+            if ($this->privateKeys->isEmpty()) {
+                $this->privateKeys = PrivateKey::ownedByCurrentTeam(['name'])->where('id', '!=', 0)->get();
+            }
+            if ($this->servers->isEmpty()) {
+                $this->servers = Server::ownedByCurrentTeam(['name'])->where('id', '!=', 0)->get();
+            }
+
+            if ($this->selectedExistingServer) {
+                $this->createdServer = Server::find($this->selectedExistingServer);
+                if ($this->createdServer) {
+                    $this->serverPublicKey = $this->createdServer->privateKey->getPublicKey();
+                    $this->updateServerDetails();
+                }
+            }
+
+            if ($this->selectedExistingPrivateKey) {
+                $this->createdPrivateKey = PrivateKey::where('team_id', currentTeam()->id)
+                    ->where('id', $this->selectedExistingPrivateKey)
+                    ->first();
+                if ($this->createdPrivateKey) {
+                    $this->privateKey = $this->createdPrivateKey->private_key;
+                    $this->publicKey = $this->createdPrivateKey->getPublicKey();
+                }
+            }
+
+            // Auto-regenerate key pair for "Generate with Coolify" mode on page refresh
+            if ($this->privateKeyType === 'create' && empty($this->privateKey)) {
+                $this->createNewPrivateKey();
+            }
+        }
+
+        if ($this->selectedProject) {
+            $this->createdProject = Project::find($this->selectedProject);
+            if (! $this->createdProject) {
+                $this->projects = Project::ownedByCurrentTeam(['name'])->get();
+            }
+        }
+
+        // Load projects when on create-project state (for page refresh)
+        if ($this->currentState === 'create-project' && $this->projects->isEmpty()) {
+            $this->projects = Project::ownedByCurrentTeam(['name'])->get();
         }
     }
 
@@ -129,41 +186,16 @@ public function setServerType(string $type)
 
             return $this->validateServer('localhost');
         } elseif ($this->selectedServerType === 'remote') {
-            if (isDev()) {
-                $this->privateKeys = PrivateKey::ownedByCurrentTeam(['name'])->get();
-            } else {
-                $this->privateKeys = PrivateKey::ownedByCurrentTeam(['name'])->where('id', '!=', 0)->get();
-            }
+            $this->privateKeys = PrivateKey::ownedByCurrentTeam(['name'])->where('id', '!=', 0)->get();
+            // Auto-select first key if available for better UX
             if ($this->privateKeys->count() > 0) {
                 $this->selectedExistingPrivateKey = $this->privateKeys->first()->id;
             }
-            $this->servers = Server::ownedByCurrentTeam(['name'])->where('id', '!=', 0)->get();
-            if ($this->servers->count() > 0) {
-                $this->selectedExistingServer = $this->servers->first()->id;
-                $this->updateServerDetails();
-                $this->currentState = 'select-existing-server';
-
-                return;
-            }
+            // Onboarding always creates new servers, skip existing server selection
             $this->currentState = 'private-key';
         }
     }
 
-    public function selectExistingServer()
-    {
-        $this->createdServer = Server::find($this->selectedExistingServer);
-        if (! $this->createdServer) {
-            $this->dispatch('error', 'Server is not found.');
-            $this->currentState = 'private-key';
-
-            return;
-        }
-        $this->selectedExistingPrivateKey = $this->createdServer->privateKey->id;
-        $this->serverPublicKey = $this->createdServer->privateKey->getPublicKey();
-        $this->updateServerDetails();
-        $this->currentState = 'validate-server';
-    }
-
     private function updateServerDetails()
     {
         if ($this->createdServer) {
@@ -181,7 +213,7 @@ public function getProxyType()
     public function selectExistingPrivateKey()
     {
         if (is_null($this->selectedExistingPrivateKey)) {
-            $this->restartBoarding();
+            $this->dispatch('error', 'Please select a private key.');
 
             return;
         }
@@ -202,6 +234,9 @@ public function setPrivateKey(string $type)
         $this->privateKeyType = $type;
         if ($type === 'create') {
             $this->createNewPrivateKey();
+        } else {
+            $this->privateKey = null;
+            $this->publicKey = null;
         }
         $this->currentState = 'create-private-key';
     }
diff --git a/app/Livewire/Terminal/Index.php b/app/Livewire/Terminal/Index.php
index 03dbc1d91..6bb4c5e90 100644
--- a/app/Livewire/Terminal/Index.php
+++ b/app/Livewire/Terminal/Index.php
@@ -61,6 +61,10 @@ private function getAllActiveContainers()
 
     public function updatedSelectedUuid()
     {
+        if ($this->selected_uuid === 'default') {
+            // When cleared to default, do nothing (no error message)
+            return;
+        }
         $this->connectToContainer();
     }
 
diff --git a/resources/views/components/boarding-progress.blade.php b/resources/views/components/boarding-progress.blade.php
new file mode 100644
index 000000000..dec34abac
--- /dev/null
+++ b/resources/views/components/boarding-progress.blade.php
@@ -0,0 +1,47 @@
+@props(['currentStep' => 1, 'totalSteps' => 3])
+
+<div class="w-full max-w-2xl mx-auto mb-8">
+    <div class="flex items-center justify-between">
+        @for ($i = 1; $i <= $totalSteps; $i++)
+            <div class="flex items-center {{ $i < $totalSteps ? 'flex-1' : '' }}">
+                <div class="flex flex-col items-center">
+                    <div
+                        class="flex items-center justify-center size-10 rounded-full border-2 transition-all duration-300
+                        {{ $i < $currentStep ? 'bg-success border-success' : 'border-neutral-200 dark:border-coolgray-300' }}
+                        {{ $i === $currentStep ? 'bg-white dark:bg-coolgray-500' : '' }}
+                       ">
+                        @if ($i < $currentStep)
+                            <svg class="size-5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+                                fill="currentColor">
+                                <path fill-rule="evenodd"
+                                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                                    clip-rule="evenodd" />
+                            </svg>
+                        @else
+                            <span
+                                class="text-sm font-bold text-black dark:text-white">
+                                {{ $i }}
+                            </span>
+                        @endif
+                    </div>
+                    <span
+                        class="mt-2 text-xs font-medium text-black dark:text-white">
+                        @if ($i === 1)
+                            Server
+                        @elseif ($i === 2)
+                            Connection
+                        @elseif ($i === 3)
+                            Complete
+                        @endif
+                    </span>
+                </div>
+                @if ($i < $totalSteps)
+                    <div
+                        class="flex-1 h-0.5 mx-4 transition-all duration-300
+                        {{ $i < $currentStep ? 'bg-success' : 'bg-neutral-200 dark:bg-coolgray-300' }}">
+                    </div>
+                @endif
+            </div>
+        @endfor
+    </div>
+</div>
diff --git a/resources/views/components/boarding-step.blade.php b/resources/views/components/boarding-step.blade.php
index d963e55f0..716987baf 100644
--- a/resources/views/components/boarding-step.blade.php
+++ b/resources/views/components/boarding-step.blade.php
@@ -1,25 +1,29 @@
-<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
-    <div class="box-border col-span-2 lg:min-w-[24rem] lg:min-h-[21rem]">
-        <h1 class="text-2xl font-bold lg:text-5xl">{{ $title }}</h1>
-        <div class="py-6">
+<div class="w-full max-w-4xl">
+    <div class=" rounded-lg shadow-sm border border-neutral-200 dark:border-coolgray-300 overflow-hidden">
+        <div class="p-8 lg:p-12">
+            <h1 class="text-3xl font-bold lg:text-4xl mb-4">{{ $title }}</h1>
             @isset($question)
-                <p class="dark:text-neutral-400">
+                <div class="text-base lg:text-lg dark:text-neutral-400 mb-8">
                     {{ $question }}
-                </p>
+                </div>
             @endisset
+
+            @if ($actions)
+                <div class="flex flex-col gap-4">
+                    {{ $actions }}
+                </div>
+            @endif
         </div>
-        @if ($actions)
-            <div class="flex flex-col flex-wrap gap-4 lg:items-center md:flex-row">
-                {{ $actions }}
+
+        @isset($explanation)
+            <div class=" border-t border-neutral-200 dark:border-coolgray-300 p-8 lg:p-12 ">
+                <h3 class="text-sm font-bold uppercase tracking-wide mb-4 dark:text-neutral-400">
+                    Technical Details
+                </h3>
+                <div class="space-y-3 text-sm dark:text-neutral-400">
+                    {{ $explanation }}
+                </div>
             </div>
-        @endif
+        @endisset
     </div>
-    @isset($explanation)
-        <div class="col-span-1">
-            <h3 class="pb-8 font-bold">Explanation</h3>
-            <div class="space-y-4">
-                {{ $explanation }}
-            </div>
-        </div>
-    @endisset
 </div>
diff --git a/resources/views/components/forms/datalist.blade.php b/resources/views/components/forms/datalist.blade.php
index 224ff82ab..7f9ffefec 100644
--- a/resources/views/components/forms/datalist.blade.php
+++ b/resources/views/components/forms/datalist.blade.php
@@ -98,11 +98,12 @@
 
             {{-- Unified Input Container with Tags Inside --}}
             <div @click="$refs.searchInput.focus()"
-                class="flex flex-wrap gap-1.5 p-2 min-h-[42px] max-h-40 overflow-y-auto {{ $defaultClass }} cursor-text"
+                class="flex flex-wrap gap-1.5 max-h-40 overflow-y-auto scrollbar py-1.5 w-full text-sm rounded-sm border-0 ring-1 ring-inset ring-neutral-200 dark:ring-coolgray-300 bg-white dark:bg-coolgray-100 cursor-text px-1 focus-within:ring-2 focus-within:ring-coollabs dark:focus-within:ring-warning text-black dark:text-white"
                 :class="{
                     'opacity-50': {{ $disabled ? 'true' : 'false' }}
                 }"
-                wire:loading.class="opacity-50">
+                wire:loading.class="opacity-50"
+                wire:dirty.class="dark:ring-warning ring-warning">
 
                 {{-- Selected Tags Inside Input --}}
                 <template x-for="value in selected" :key="value">
@@ -124,13 +125,13 @@ class="inline-flex items-center gap-1.5 px-2 py-0.5 text-xs bg-coolgray-200 dark
                     @required($required) @readonly($readonly) @disabled($disabled) @if ($autofocus)
                 autofocus
     @endif
-    class="flex-1 min-w-[120px] text-sm border-0 outline-none bg-transparent p-0 focus:ring-0 placeholder:text-neutral-400 dark:placeholder:text-neutral-600"
+    class="flex-1 min-w-[120px] text-sm border-0 outline-none bg-transparent p-0 focus:ring-0 placeholder:text-neutral-400 dark:placeholder:text-neutral-600 text-black dark:text-white"
     />
 </div>
 
 {{-- Dropdown Options --}}
 <div x-show="open && !{{ $disabled ? 'true' : 'false' }}" x-transition
-    class="absolute z-50 w-full mt-1 bg-white dark:bg-coolgray-100 border border-neutral-300 dark:border-coolgray-400 rounded shadow-lg max-h-60 overflow-auto">
+    class="absolute z-50 w-full mt-1 bg-white dark:bg-coolgray-100 border border-neutral-300 dark:border-coolgray-400 rounded shadow-lg max-h-60 overflow-auto scrollbar">
 
     <template x-if="filteredOptions.length === 0">
         <div class="px-3 py-2 text-sm text-neutral-500 dark:text-neutral-400">
@@ -156,21 +157,131 @@ class="w-4 h-4 rounded border-neutral-300 dark:border-neutral-600 bg-white dark:
 </datalist>
 </div>
 @else
-{{-- Single Selection Mode (Standard HTML5 Datalist) --}}
-<input list="{{ $id }}" {{ $attributes->merge(['class' => $defaultClass]) }} @required($required)
-    @readonly($readonly) @disabled($disabled) wire:dirty.class="dark:ring-warning ring-warning"
-    wire:loading.attr="disabled" name="{{ $id }}"
-    @if ($value) value="{{ $value }}" @endif
-    @if ($placeholder) placeholder="{{ $placeholder }}" @endif
-    @if ($attributes->whereStartsWith('wire:model')->first()) {{ $attributes->whereStartsWith('wire:model')->first() }}
-            @else
-                wire:model="{{ $id }}" @endif
-    @if ($instantSave) wire:change="{{ $instantSave === 'instantSave' || $instantSave == '1' ? 'instantSave' : $instantSave }}"
-                wire:blur="{{ $instantSave === 'instantSave' || $instantSave == '1' ? 'instantSave' : $instantSave }}" @endif
-    @if ($autofocus) x-ref="autofocusInput" @endif>
-<datalist id="{{ $id }}">
-    {{ $slot }}
-</datalist>
+{{-- Single Selection Mode with Alpine.js --}}
+<div x-data="{
+    open: false,
+    search: '',
+    selected: @entangle(($attributes->whereStartsWith('wire:model')->first() ? $attributes->wire('model')->value() : $id)).live,
+    options: [],
+    filteredOptions: [],
+
+    init() {
+        this.options = Array.from(this.$refs.datalist.querySelectorAll('option')).map(opt => {
+            // Skip disabled options
+            if (opt.disabled) {
+                return null;
+            }
+            // Try to parse as integer, fallback to string
+            let value = opt.value;
+            const intValue = parseInt(value, 10);
+            if (!isNaN(intValue) && intValue.toString() === value) {
+                value = intValue;
+            }
+            return {
+                value: value,
+                text: opt.textContent.trim()
+            };
+        }).filter(opt => opt !== null);
+        this.filteredOptions = this.options;
+    },
+
+    filterOptions() {
+        if (!this.search) {
+            this.filteredOptions = this.options;
+            return;
+        }
+        const searchLower = this.search.toLowerCase();
+        this.filteredOptions = this.options.filter(opt =>
+            opt.text.toLowerCase().includes(searchLower)
+        );
+    },
+
+    selectOption(value) {
+        this.selected = value;
+        this.search = '';
+        this.open = false;
+        this.filterOptions();
+    },
+
+    openDropdown() {
+        if ({{ $disabled ? 'true' : 'false' }}) return;
+        this.open = true;
+        this.$nextTick(() => {
+            if (this.$refs.searchInput) {
+                this.$refs.searchInput.focus();
+            }
+        });
+    },
+
+    getSelectedText() {
+        if (!this.selected || this.selected === 'default') return '';
+        const option = this.options.find(opt => opt.value == this.selected);
+        return option ? option.text : this.selected;
+    },
+
+    isDefaultValue() {
+        return !this.selected || this.selected === 'default' || this.selected === '';
+    }
+}" @click.outside="open = false" class="relative">
+
+    {{-- Hidden input for form validation --}}
+    <input type="hidden" :value="selected" @required($required) />
+
+    {{-- Input Container --}}
+    <div @click="openDropdown()"
+        class="flex items-center gap-2 py-1.5 w-full text-sm rounded-sm border-0 ring-1 ring-inset ring-neutral-200 dark:ring-coolgray-300 bg-white dark:bg-coolgray-100 cursor-text focus-within:ring-2 focus-within:ring-coollabs dark:focus-within:ring-warning text-black dark:text-white"
+        :class="{
+            'opacity-50': {{ $disabled ? 'true' : 'false' }}
+        }"
+        wire:loading.class="opacity-50"
+        wire:dirty.class="dark:ring-warning ring-warning">
+
+        {{-- Display Selected Value or Search Input --}}
+        <div class="flex-1 flex items-center min-w-0 px-1">
+            <template x-if="!isDefaultValue() && !open">
+                <span class="text-sm flex-1 truncate text-black dark:text-white px-2" x-text="getSelectedText()"></span>
+            </template>
+            <input type="text" x-show="isDefaultValue() || open" x-model="search" x-ref="searchInput"
+                @input="filterOptions()" @focus="open = true"
+                @keydown.escape="open = false"
+                :placeholder="{{ json_encode($placeholder ?: 'Search...') }}"
+                @readonly($readonly) @disabled($disabled) @if ($autofocus) autofocus @endif
+                class="flex-1 text-sm border-0 outline-none bg-transparent p-0 focus:ring-0 placeholder:text-neutral-400 dark:placeholder:text-neutral-600 text-black dark:text-white px-2" />
+        </div>
+
+        {{-- Dropdown Arrow --}}
+        <button type="button" @click.stop="open = !open" :disabled="{{ $disabled ? 'true' : 'false' }}"
+            class="shrink-0 text-neutral-400 px-2 {{ $disabled ? 'cursor-not-allowed' : 'cursor-pointer' }}">
+            <svg class="w-4 h-4 transition-transform" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+            </svg>
+        </button>
+    </div>
+
+    {{-- Dropdown Options --}}
+    <div x-show="open && !{{ $disabled ? 'true' : 'false' }}" x-transition
+        class="absolute z-50 w-full mt-1 bg-white dark:bg-coolgray-100 border border-neutral-300 dark:border-coolgray-400 rounded shadow-lg max-h-60 overflow-auto scrollbar">
+
+        <template x-if="filteredOptions.length === 0">
+            <div class="px-3 py-2 text-sm text-neutral-500 dark:text-neutral-400">
+                No options found
+            </div>
+        </template>
+
+        <template x-for="option in filteredOptions" :key="option.value">
+            <div @click="selectOption(option.value)"
+                class="px-3 py-2 cursor-pointer hover:bg-neutral-100 dark:hover:bg-coolgray-200"
+                :class="{ 'bg-neutral-50 dark:bg-coolgray-300': selected == option.value }">
+                <span class="text-sm" x-text="option.text"></span>
+            </div>
+        </template>
+    </div>
+
+    {{-- Hidden datalist for options --}}
+    <datalist x-ref="datalist" style="display: none;">
+        {{ $slot }}
+    </datalist>
+</div>
 @endif
 
 @error($id)
diff --git a/resources/views/layouts/boarding.blade.php b/resources/views/layouts/boarding.blade.php
index 67c1cc998..e0b5f49a3 100644
--- a/resources/views/layouts/boarding.blade.php
+++ b/resources/views/layouts/boarding.blade.php
@@ -1,6 +1,6 @@
 @extends('layouts.base')
 @section('body')
-    <main class="h-full">
+    <main class="min-h-screen flex items-center justify-center p-4">
         {{ $slot }}
     </main>
     @parent
diff --git a/resources/views/livewire/boarding/index.blade.php b/resources/views/livewire/boarding/index.blade.php
index 68b328b30..faee9883b 100644
--- a/resources/views/livewire/boarding/index.blade.php
+++ b/resources/views/livewire/boarding/index.blade.php
@@ -1,400 +1,737 @@
 @php use App\Enums\ProxyTypes; @endphp
 <x-slot:title>
     Onboarding | Coolify
-</x-slot>
-<section class="flex flex-col h-full lg:items-center lg:justify-center">
-    <div
-        class="flex flex-col items-center justify-center p-10 mx-2 mt-10 bg-white border rounded-lg shadow-sm lg:p-20 dark:bg-transparent dark:border-none max-w-7xl border-neutral-200">
-        @if ($currentState === 'welcome')
-            <h1 class="text-3xl font-bold lg:text-5xl">Welcome to Coolify</h1>
-            <div class="py-6 text-center lg:text-xl">Let me help you set up the basics.</div>
-            <div class="flex justify-center ">
-                <x-forms.button class="justify-center w-64 box-boarding"
-                    wire:click="$set('currentState','explanation')">Get
-                    Started
-                </x-forms.button>
-            </div>
-        @elseif ($currentState === 'explanation')
-            <x-boarding-step title="What is Coolify?">
-                <x-slot:question>
-                    Coolify is an all-in-one application to automate tasks on your servers, deploy applications with
-                    Git
-                    integrations, deploy databases and services, monitor these resources with notifications and
-                    alerts
-                    without vendor lock-in. <br />
-                    <a href="https://coolify.io" class="dark:text-white hover:underline">Coolify Home</a>.
-                    <br><br>
-                    <span class="text-xl">
-                        <x-highlighted text="Self-hosting with superpowers!" /></span>
-                </x-slot:question>
-                <x-slot:explanation>
-                    <p>
-                        <x-highlighted text="Task automation:" /> You don't need to manage your servers anymore.
-                        Coolify does
-                        it for you.
-                    </p>
-                    <p>
-                        <x-highlighted text="No vendor lock-in:" /> All configurations are stored on your servers, so
-                        everything works without a connection to Coolify (except integrations and automations).
-                    </p>
-                    <p>
-                        <x-highlighted text="Monitoring:" />You can get notified on your favourite platforms
-                        (Discord,
-                        Telegram, Email, etc.) when something goes wrong, or an action is needed from your side.
-                    </p>
-                </x-slot:explanation>
-                <x-slot:actions>
-                    <x-forms.button class="justify-center w-64 box-boarding" wire:click="explanation">Next
-                    </x-forms.button>
-                </x-slot:actions>
-            </x-boarding-step>
-        @elseif ($currentState === 'select-server-type')
-            <x-boarding-step title="Server">
-                <x-slot:question>
-                    Do you want to deploy your resources to your
-                    <x-highlighted text="Localhost" />
-                    or to a
-                    <x-highlighted text="Remote Server" />?
-                </x-slot:question>
-                <x-slot:actions>
-                    <x-forms.button class="justify-center w-64 box-boarding" wire:target="setServerType('localhost')"
-                        wire:click="setServerType('localhost')">Localhost
-                    </x-forms.button>
-
-                    <x-forms.button class="justify-center w-64 box-boarding " wire:target="setServerType('remote')"
-                        wire:click="setServerType('remote')">Remote Server
-                    </x-forms.button>
-
-                    @if (!$serverReachable)
-                        <div class="mt-6 p-4 border border-error rounded-lg text-gray-800 dark:text-gray-200">
-                            <h2 class="text-lg font-bold mb-2">Server is not reachable</h2>
-                            <p class="mb-4">Please check the connection details below and correct them if they are
-                                incorrect.</p>
-
-                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-                                <x-forms.input placeholder="Default is 22" label="Port" id="remoteServerPort"
-                                    wire:model="remoteServerPort" :value="$remoteServerPort" />
-                                <div>
-                                    <x-forms.input placeholder="Default is root" label="User" id="remoteServerUser"
-                                        wire:model="remoteServerUser" :value="$remoteServerUser" />
-                                    <p class="text-xs mt-1">
-                                        Non-root user is experimental:
-                                        <a class="font-bold underline" target="_blank"
-                                            href="https://coolify.io/docs/knowledge-base/server/non-root-user">docs</a>
-                                    </p>
-                                </div>
-                            </div>
-
-                            <div class="mb-4">
-                                <p class="mb-2">If the connection details are correct, please ensure:</p>
-                                <ul class="list-disc list-inside">
-                                    <li>The correct public key is in your <code
-                                            class="bg-red-200 dark:bg-red-900 px-1 rounded-sm">~/.ssh/authorized_keys</code>
-                                        file for the specified user</li>
-                                    <li>Or skip the boarding process and manually add a new private key to Coolify and
-                                        the server</li>
-                                </ul>
-                            </div>
-
-                            <p class="mb-4">
-                                For more help, check this <a target="_blank" class="underline font-semibold"
-                                    href="https://coolify.io/docs/knowledge-base/server/openssh">documentation</a>.
-                            </p>
-
-                            <x-forms.input readonly id="serverPublicKey" class="mb-4"
-                                label="Current Public Key"></x-forms.input>
-
-                            <x-forms.button class="w-full box-boarding" wire:click="saveAndValidateServer">
-                                Check Again
-                            </x-forms.button>
-                        </div>
-                    @endif
-                </x-slot:actions>
-                <x-slot:explanation>
-                    <p>Servers are the main building blocks, as they will host your applications, databases,
-                        services, called resources. Any CPU intensive process will use the server's CPU where you
-                        are deploying your resources.</p>
-                    <p>
-                        <x-highlighted text="Localhost" /> is the server where Coolify is running on. It is not
-                        recommended to use one server
-                        for everything.
-                    </p>
-                    <p>
-                        <x-highlighted text="A remote server" /> is a server reachable through SSH. It can be hosted
-                        at home, or from any cloud
-                        provider.
-                    </p>
-                </x-slot:explanation>
-            </x-boarding-step>
-        @elseif ($currentState === 'private-key')
-            <x-boarding-step title="SSH Key">
-                <x-slot:question>
-                    Do you have your own SSH Private Key?
-                </x-slot:question>
-                <x-slot:actions>
-                    <x-forms.button class="justify-center lg:w-64 box-boarding" wire:target="setPrivateKey('own')"
-                        wire:click="setPrivateKey('own')">Yes
-                    </x-forms.button>
-                    <x-forms.button class="justify-center lg:w-64 box-boarding" wire:target="setPrivateKey('create')"
-                        wire:click="setPrivateKey('create')">No (create one for me)
-                    </x-forms.button>
-                    @if (count($privateKeys) > 0)
-                        <form wire:submit='selectExistingPrivateKey' class="flex flex-col w-full gap-4 lg:pr-10">
-                            <x-forms.select label="Existing SSH Keys" id='selectedExistingPrivateKey'>
-                                @foreach ($privateKeys as $privateKey)
-                                    <option wire:key="{{ $loop->index }}" value="{{ $privateKey->id }}">
-                                        {{ $privateKey->name }}</option>
-                                @endforeach
-                            </x-forms.select>
-                            <x-forms.button type="submit">Use this SSH Key</x-forms.button>
-                        </form>
-                    @endif
-                </x-slot:actions>
-                <x-slot:explanation>
-                    <p>SSH Keys are used to connect to a remote server through a secure shell, called SSH.</p>
-                    <p>You can use your own ssh private key, or you can let Coolify to create one for you.</p>
-                    <p>In both ways, you need to add the public version of your ssh private key to the remote
-                        server's
-                        <code class="dark:text-warning">~/.ssh/authorized_keys</code> file.
-                    </p>
-                </x-slot:explanation>
-            </x-boarding-step>
-        @elseif ($currentState === 'select-existing-server')
-            <x-boarding-step title="Select a server">
-                <x-slot:question>
-                    There are already servers available for your Team. Do you want to use one of them?
-                </x-slot:question>
-                <x-slot:actions>
-                    <div class="flex flex-col gap-4">
-                        <div>
-                            <x-forms.button class="justify-center w-64 box-boarding" wire:click="createNewServer">No
-                                (create one for me)
-                            </x-forms.button>
-                        </div>
-                        <div>
-                            <form wire:submit='selectExistingServer' class="flex flex-col w-full gap-4 lg:w-96">
-                                <x-forms.select label="Existing servers" class="w-96" id='selectedExistingServer'>
-                                    @foreach ($servers as $server)
-                                        <option wire:key="{{ $loop->index }}" value="{{ $server->id }}">
-                                            {{ $server->name }}</option>
-                                    @endforeach
-                                </x-forms.select>
-                                <x-forms.button type="submit">Use this Server</x-forms.button>
-                            </form>
-                        </div>
+    </x-slot>
+    <section class="w-full">
+        <div class="flex flex-col items-center w-full space-y-8">
+            @if ($currentState === 'welcome')
+                <div class="w-full max-w-2xl text-center space-y-8">
+                    <div class="space-y-4">
+                        <h1 class="text-4xl font-bold lg:text-6xl">Welcome to Coolify</h1>
+                        <p class="text-lg lg:text-xl dark:text-neutral-400">
+                            Connect your first server and start deploying in minutes
+                        </p>
                     </div>
-                    @if (!$serverReachable)
-                        <div class="mt-6 p-4 bg-red-100 dark:bg-red-950 rounded-lg text-gray-800 dark:text-gray-200">
-                            <h2 class="text-lg font-bold mb-2">Server is not reachable</h2>
-                            <p class="mb-4">Please check the connection details below and correct them if they are
-                                incorrect.</p>
 
-                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-                                <x-forms.input placeholder="Default is 22" label="Port" id="remoteServerPort"
-                                    wire:model="remoteServerPort" :value="$remoteServerPort" />
+                    <div
+                        class="bg-white dark:bg-coolgray-100 rounded-lg shadow-sm border border-neutral-200 dark:border-coolgray-300 p-8 text-left">
+                        <h2 class="text-sm font-bold uppercase tracking-wide dark:text-neutral-400 mb-4">
+                            What You'll Set Up
+                        </h2>
+                        <div class="space-y-3">
+                            <div class="flex items-start gap-3">
+                                <div class="flex-shrink-0 mt-0.5">
+                                    <svg class="size-5 text-success" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+                                        fill="currentColor">
+                                        <path fill-rule="evenodd"
+                                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                                            clip-rule="evenodd" />
+                                    </svg>
+                                </div>
                                 <div>
-                                    <x-forms.input placeholder="Default is root" label="User" id="remoteServerUser"
-                                        wire:model="remoteServerUser" :value="$remoteServerUser" />
-                                    <p class="text-xs mt-1">
-                                        Non-root user is experimental:
-                                        <a class="font-bold underline" target="_blank"
-                                            href="https://coolify.io/docs/knowledge-base/server/non-root-user">docs</a>
-                                    </p>
+                                    <div class="font-semibold text-base dark:text-white">Server Connection</div>
+                                    <div class="text-sm dark:text-neutral-400">Connect via SSH to deploy your resources
+                                    </div>
                                 </div>
                             </div>
-
-                            <div class="mb-4">
-                                <p class="mb-2">If the connection details are correct, please ensure:</p>
-                                <ul class="list-disc list-inside">
-                                    <li>The correct public key is in your <code
-                                            class="bg-red-200 dark:bg-red-900 px-1 rounded-sm">~/.ssh/authorized_keys</code>
-                                        file for the specified user</li>
-                                    <li>Or skip the boarding process and manually add a new private key to Coolify and
-                                        the server</li>
-                                </ul>
-                            </div>
-
-                            <p class="mb-4">
-                                For more help, check this <a target="_blank" class="underline font-semibold"
-                                    href="https://coolify.io/docs/knowledge-base/server/openssh">documentation</a>.
-                            </p>
-
-                            <x-forms.input readonly id="serverPublicKey" class="mb-4"
-                                label="Current Public Key"></x-forms.input>
-
-                            <x-forms.button class="w-full md:w-auto box-boarding" wire:click="saveAndValidateServer">
-                                Check again
-                            </x-forms.button>
-                        </div>
-                    @endif
-                </x-slot:actions>
-                <x-slot:explanation>
-                    <p>Private Keys are used to connect to a remote server through a secure shell, called SSH.</p>
-                    <p>You can use your own private key, or you can let Coolify to create one for you.</p>
-                    <p>In both ways, you need to add the public version of your private key to the remote server's
-                        <code>~/.ssh/authorized_keys</code> file.
-                    </p>
-                </x-slot:explanation>
-            </x-boarding-step>
-        @elseif ($currentState === 'create-private-key')
-            <x-boarding-step title="Create Private Key">
-                <x-slot:question>
-                    Please let me know your key details.
-                </x-slot:question>
-                <x-slot:actions>
-                    <form wire:submit='savePrivateKey' class="flex flex-col w-full gap-4 lg:pr-10">
-                        <x-forms.input required placeholder="Choose a name for your Private Key. Could be anything."
-                            label="Name" id="privateKeyName" />
-                        <x-forms.input placeholder="Description, so others will know more about this."
-                            label="Description" id="privateKeyDescription" />
-                        <x-forms.textarea required placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"
-                            label="Private Key" id="privateKey" />
-                        @if ($privateKeyType === 'create')
-                            <x-forms.textarea rows="7" readonly label="Public Key" id="publicKey" />
-                            <span class="font-bold dark:text-warning">ACTION REQUIRED: Copy the 'Public Key' to your
-                                server's
-                                ~/.ssh/authorized_keys
-                                file.</span>
-                        @endif
-                        <x-forms.button type="submit">Save</x-forms.button>
-                    </form>
-                </x-slot:actions>
-                <x-slot:explanation>
-                    <p>Private Keys are used to connect to a remote server through a secure shell, called SSH.</p>
-                    <p>You can use your own private key, or you can let Coolify to create one for you.</p>
-                    <p>In both ways, you need to add the public version of your private key to the remote server's
-                        <code>~/.ssh/authorized_keys</code> file.
-                    </p>
-                </x-slot:explanation>
-            </x-boarding-step>
-        @elseif ($currentState === 'create-server')
-            <x-boarding-step title="Create Server">
-                <x-slot:question>
-                    Please let me know your server details.
-                </x-slot:question>
-                <x-slot:actions>
-                    <form wire:submit='saveServer' class="flex flex-col w-full gap-4 lg:w-96">
-                        <x-forms.input required placeholder="Choose a name for your Server. Could be anything."
-                            label="Name" id="remoteServerName" wire:model="remoteServerName" />
-                        <x-forms.input placeholder="Description, so others will know more about this."
-                            label="Description" id="remoteServerDescription" wire:model="remoteServerDescription" />
-                        <x-forms.input required placeholder="127.0.0.1" label="IP Address" id="remoteServerHost"
-                            wire:model="remoteServerHost" />
-                        <div x-data="{ showAdvanced: false }" class="flex flex-col gap-2">
-                            <button @click="showAdvanced = !showAdvanced" type="button"
-                                class="text-left text-sm text-gray-600 dark:text-gray-300 hover:underline">
-                                Advanced Settings
-                            </button>
-                            <div x-show="showAdvanced" class="flex flex-col gap-2">
-                                <x-forms.input placeholder="Port number of your server. Default is 22." label="Port"
-                                    id="remoteServerPort" wire:model="remoteServerPort" />
+                            <div class="flex items-start gap-3">
+                                <div class="flex-shrink-0 mt-0.5">
+                                    <svg class="size-5 text-success" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+                                        fill="currentColor">
+                                        <path fill-rule="evenodd"
+                                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                                            clip-rule="evenodd" />
+                                    </svg>
+                                </div>
                                 <div>
-                                    <x-forms.input placeholder="Default is root." label="User"
-                                        id="remoteServerUser" wire:model="remoteServerUser" />
-                                    <div class="text-xs text-gray-600 dark:text-gray-300">Non-root user is
-                                        experimental: <a class="font-bold underline" target="_blank"
-                                            href="https://coolify.io/docs/knowledge-base/server/non-root-user">docs</a>.
+                                    <div class="font-semibold text-base dark:text-white">Docker Environment</div>
+                                    <div class="text-sm dark:text-neutral-400">Automated installation and configuration
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex items-start gap-3">
+                                <div class="flex-shrink-0 mt-0.5">
+                                    <svg class="size-5 text-success" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+                                        fill="currentColor">
+                                        <path fill-rule="evenodd"
+                                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                                            clip-rule="evenodd" />
+                                    </svg>
+                                </div>
+                                <div>
+                                    <div class="font-semibold text-base dark:text-white">Project Structure</div>
+                                    <div class="text-sm dark:text-neutral-400">Organize your applications and resources
                                     </div>
                                 </div>
                             </div>
                         </div>
-                        <x-forms.button type="submit">Continue</x-forms.button>
-                    </form>
-                </x-slot:actions>
-            </x-boarding-step>
-        @elseif ($currentState === 'validate-server')
-            <x-boarding-step title="Validate & Configure Server">
-                <x-slot:question>
-                    I need to validate your server (connection, Docker Engine, etc) and configure if something is
-                    missing for me. Are you okay with this?
-                </x-slot:question>
-                <x-slot:actions>
-                    <x-slide-over closeWithX fullScreen>
-                        <x-slot:title>Validate & configure</x-slot:title>
-                        <x-slot:content>
-                            <livewire:server.validate-and-install :server="$this->createdServer" />
-                        </x-slot:content>
-                        <x-forms.button @click="slideOverOpen=true" class="w-full font-bold box-boarding lg:w-96"
-                            wire:click.prevent='installServer' isHighlighted>
-                            Let's do it!
-                        </x-forms.button>
-                    </x-slide-over>
-                </x-slot:actions>
-                <x-slot:explanation>
-                    <p>This will install the latest Docker Engine on your server, configure a few things to be able
-                        to run optimal.<br><br>Minimum Docker Engine version is: {{ $minDockerVersion }}<br><br>To
-                        manually install
-                        Docker
-                        Engine, check <a target="_blank" class="underline dark:text-warning"
-                            href="https://docs.docker.com/engine/install/#server">this
-                            documentation</a>.</p>
-                </x-slot:explanation>
-            </x-boarding-step>
-        @elseif ($currentState === 'create-project')
-            <x-boarding-step title="Project">
-                <x-slot:question>
-                    @if (count($projects) > 0)
-                        You already have some projects. Do you want to use one of them or should I create a new one
-                        for
-                        you?
-                    @else
-                        Let's create an initial project for you. You can change all the details later on.
-                    @endif
-                </x-slot:question>
-                <x-slot:actions>
-                    <x-forms.button class="justify-center w-64 box-boarding" wire:click="createNewProject">Create new
-                        project!</x-forms.button>
-                    <div>
-                        @if (count($projects) > 0)
-                            <form wire:submit='selectExistingProject' class="flex flex-col w-full gap-4 lg:w-96">
-                                <x-forms.select label="Existing projects" class="w-96" id='selectedProject'>
-                                    @foreach ($projects as $project)
-                                        <option wire:key="{{ $loop->index }}" value="{{ $project->id }}">
-                                            {{ $project->name }}</option>
-                                    @endforeach
-                                </x-forms.select>
-                                <x-forms.button type="submit">Use this Project</x-forms.button>
-                            </form>
-                        @endif
                     </div>
-                </x-slot:actions>
-                <x-slot:explanation>
-                    <p>Projects contain several resources combined into one virtual group. There are no
-                        limitations on the number of projects you can add.</p>
-                    <p>Each project should have at least one environment, this allows you to create a production &
-                        staging version of the same application, but grouped separately.</p>
-                </x-slot:explanation>
-            </x-boarding-step>
-        @elseif ($currentState === 'create-resource')
-            <x-boarding-step title="Resources">
-                <x-slot:question>
-                    Let's go to the new resource page, where you can create your first resource.
-                </x-slot:question>
-                <x-slot:actions>
-                    <div class="items-center justify-center w-64 box-boarding" wire:click="showNewResource">Let's do
-                        it!</div>
-                </x-slot:actions>
-                <x-slot:explanation>
-                    <p>A resource could be an application, a database or a service (like WordPress).</p>
-                </x-slot:explanation>
-            </x-boarding-step>
-        @endif
-    </div>
-    <div class="flex flex-col justify-center gap-4 pt-4 lg:gap-2 lg:flex">
-        <div class="flex justify-center w-full gap-2">
-            <div class="cursor-pointer hover:underline dark:hover:text-white" wire:click='skipBoarding'>Skip
-                onboarding</div>
-            <div class="cursor-pointer hover:underline dark:hover:text-white" wire:click='restartBoarding'>Restart
-                onboarding</div>
-        </div>
-        <x-modal-input title="How can we help?">
-            <x-slot:content>
-                <div class="w-full text-center cursor-pointer hover:underline dark:hover:text-white"
-                    title="Send us feedback or get help!">
-                    Feedback
+
+                    <div class="flex justify-center pt-4">
+                        <x-forms.button class="justify-center px-12 py-4 text-lg font-bold box-boarding"
+                            wire:click="explanation">
+                            Start Setup
+                        </x-forms.button>
+                    </div>
                 </div>
-            </x-slot:content>
-            <livewire:help />
-        </x-modal-input>
-    </div>
-</section>
+            @elseif ($currentState === 'explanation')
+                <x-boarding-progress :currentStep="0" />
+                <x-boarding-step title="Platform Overview">
+                    <x-slot:question>
+                        Coolify automates deployment and infrastructure management on your own servers. Deploy applications
+                        from Git, manage databases, and monitor everything—without vendor lock-in.
+                    </x-slot:question>
+                    <x-slot:explanation>
+                        <p>
+                            <x-highlighted text="Automation:" /> Coolify handles server configuration, Docker management,
+                            and
+                            deployments automatically.
+                        </p>
+                        <p>
+                            <x-highlighted text="Self-hosted:" /> All data and configurations live on your infrastructure.
+                            Works offline except for external integrations.
+                        </p>
+                        <p>
+                            <x-highlighted text="Monitoring & Alerts:" /> Get real-time notifications via Discord, Telegram,
+                            Email, and other platforms.
+                        </p>
+                    </x-slot:explanation>
+                    <x-slot:actions>
+                        <x-forms.button class="justify-center w-full lg:w-auto px-8 py-3 box-boarding"
+                            wire:click="explanation">
+                            Continue
+                        </x-forms.button>
+                    </x-slot:actions>
+                </x-boarding-step>
+            @elseif ($currentState === 'select-server-type')
+                <x-boarding-progress :currentStep="1" />
+                <x-boarding-step title="Choose Server Type">
+                    <x-slot:question>
+                        Select where to deploy your applications and databases. You can add more servers later.
+                    </x-slot:question>
+                    <x-slot:actions>
+                        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 w-full">
+                            <button
+                                class="group relative box-without-bg cursor-pointer hover:border-coollabs transition-all duration-200 p-6"
+                                wire:target="setServerType('localhost')" wire:click="setServerType('localhost')">
+                                <div class="flex flex-col gap-4 text-left">
+                                    <div class="flex items-center justify-between">
+                                        <svg class="size-10" xmlns="http://www.w3.org/2000/svg" fill="none"
+                                            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z" />
+                                        </svg>
+                                        <span
+                                            class="px-2 py-1 text-xs font-bold uppercase tracking-wide bg-neutral-100 dark:bg-coolgray-300 dark:text-neutral-400 rounded">
+                                            Quick Start
+                                        </span>
+                                    </div>
+                                    <div>
+                                        <h3 class="text-xl font-bold mb-2">This Machine</h3>
+                                        <p class="text-sm dark:text-neutral-400">
+                                            Deploy on the server running Coolify. Best for testing and single-server setups.
+                                        </p>
+                                    </div>
+                                </div>
+                            </button>
+
+
+
+                            <button
+                                class="group relative box-without-bg cursor-pointer hover:border-coollabs transition-all duration-200 p-6"
+                                wire:target="setServerType('remote')" wire:click="setServerType('remote')">
+                                <div class="flex flex-col gap-4 text-left">
+                                    <div class="flex items-center justify-between">
+                                        <svg class="size-10 " xmlns="http://www.w3.org/2000/svg" fill="none"
+                                            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                d="M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z" />
+                                        </svg>
+                                        <span
+                                            class="px-2 py-1 text-xs font-bold uppercase tracking-wide bg-coollabs/10 dark:bg-warning/20 text-coollabs dark:text-warning rounded">
+                                            Recommended
+                                        </span>
+                                    </div>
+                                    <div>
+                                        <h3 class="text-xl font-bold mb-2">Remote Server</h3>
+                                        <p class="text-sm dark:text-neutral-400">
+                                            Connect via SSH to any server—cloud VPS, bare metal, or home infrastructure.
+                                        </p>
+                                    </div>
+                                </div>
+                            </button>
+                            @can('viewAny', App\Models\CloudProviderToken::class)
+                                <x-modal-input title="Connect a Hetzner Server" isFullWidth>
+                                    <x-slot:content>
+                                        <div
+                                            class="group relative box-without-bg cursor-pointer hover:border-coollabs transition-all duration-200 p-6 h-full min-h-[210px]">
+                                            <div class="flex flex-col gap-4 text-left">
+                                                <div class="flex items-center justify-between">
+                                                    <svg class="size-10" viewBox="0 0 200 200"
+                                                        xmlns="http://www.w3.org/2000/svg">
+                                                        <rect width="200" height="200" fill="#D50C2D" rx="8" />
+                                                        <path d="M40 40 H60 V90 H140 V40 H160 V160 H140 V110 H60 V160 H40 Z"
+                                                            fill="white" />
+                                                    </svg>
+                                                    <span
+                                                        class="px-2 py-1 text-xs font-bold uppercase tracking-wide bg-coollabs/10 dark:bg-warning/20 text-coollabs dark:text-warning rounded">
+                                                        Recommended
+                                                    </span>
+                                                </div>
+                                                <div>
+                                                    <h3 class="text-xl font-bold mb-2">Hetzner Cloud</h3>
+                                                    <p class="text-sm dark:text-neutral-400">
+                                                        Deploy servers directly from your Hetzner Cloud account.
+                                                    </p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </x-slot:content>
+                                    <livewire:server.new.by-hetzner :private_keys="$this->privateKeys" :limit_reached="false" />
+                                </x-modal-input>
+                            @endcan
+                        </div>
+
+                        @if (!$serverReachable)
+                            <div class="mt-6 p-4 border border-error rounded-lg text-gray-800 dark:text-gray-200">
+                                <h2 class="text-lg font-bold mb-2">Server is not reachable</h2>
+                                <p class="mb-4">Please check the connection details below and correct them if they are
+                                    incorrect.</p>
+
+                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                                    <x-forms.input placeholder="Default is 22" label="Port" id="remoteServerPort"
+                                        wire:model="remoteServerPort" :value="$remoteServerPort" />
+                                    <div>
+                                        <x-forms.input placeholder="Default is root" label="User" id="remoteServerUser"
+                                            wire:model="remoteServerUser" :value="$remoteServerUser" />
+                                        <p class="text-xs mt-1">
+                                            Non-root user is experimental:
+                                            <a class="font-bold underline" target="_blank"
+                                                href="https://coolify.io/docs/knowledge-base/server/non-root-user">docs</a>
+                                        </p>
+                                    </div>
+                                </div>
+
+                                <div class="mb-4">
+                                    <p class="mb-2">If the connection details are correct, please ensure:</p>
+                                    <ul class="list-disc list-inside">
+                                        <li>The correct public key is in your <code
+                                                class="bg-red-200 dark:bg-red-900 px-1 rounded-sm">~/.ssh/authorized_keys</code>
+                                            file for the specified user</li>
+                                        <li>Or skip the boarding process and manually add a new private key to Coolify and
+                                            the server</li>
+                                    </ul>
+                                </div>
+
+                                <p class="mb-4">
+                                    For more help, check this <a target="_blank" class="underline font-semibold"
+                                        href="https://coolify.io/docs/knowledge-base/server/openssh">documentation</a>.
+                                </p>
+
+                                <x-forms.input readonly id="serverPublicKey" class="mb-4"
+                                    label="Current Public Key"></x-forms.input>
+
+                                <x-forms.button class="w-full box-boarding" wire:click="saveAndValidateServer">
+                                    Check Again
+                                </x-forms.button>
+                            </div>
+                        @endif
+                    </x-slot:actions>
+                    <x-slot:explanation>
+                        <p>
+                            <x-highlighted text="Servers" /> host your applications, databases, and services (collectively
+                            called resources). All CPU-intensive operations run on the target server.
+                        </p>
+                        <p>
+                            <x-highlighted text="Localhost:" /> The machine running Coolify. Not recommended for production
+                            workloads due to resource contention.
+                        </p>
+                        <p>
+                            <x-highlighted text="Remote Server:" /> Any SSH-accessible server—cloud providers (AWS, Hetzner,
+                            DigitalOcean), bare metal, or self-hosted infrastructure.
+                        </p>
+                    </x-slot:explanation>
+                </x-boarding-step>
+            @elseif ($currentState === 'private-key')
+                <x-boarding-progress :currentStep="2" />
+                <x-boarding-step title="SSH Authentication">
+                    <x-slot:question>
+                        Configure SSH key-based authentication for secure server access.
+                    </x-slot:question>
+                    <x-slot:actions>
+                        @if ($privateKeys && $privateKeys->count() > 0)
+                            <div class="w-full space-y-4">
+                                <div class="p-4 rounded-lg border border-neutral-200 dark:border-coolgray-400">
+                                    <form wire:submit='selectExistingPrivateKey' class="flex flex-col gap-4">
+                                        <x-forms.select label="Existing SSH Keys" id='selectedExistingPrivateKey'>
+                                            @foreach ($privateKeys as $privateKey)
+                                                <option wire:key="{{ $loop->index }}" value="{{ $privateKey->id }}">
+                                                    {{ $privateKey->name }}
+                                                </option>
+                                            @endforeach
+                                        </x-forms.select>
+                                        <x-forms.button type="submit" class="w-full lg:w-auto">Use Selected Key</x-forms.button>
+                                    </form>
+                                </div>
+                                <div class="relative">
+                                    <div class="absolute inset-0 flex items-center">
+                                        <div class="w-full border-t border-neutral-300 dark:border-coolgray-400"></div>
+                                    </div>
+                                    <div class="relative flex justify-center text-sm">
+                                        <div
+                                            class="px-2 py-1 bg-white dark:bg-coolgray-100 border border-neutral-300 dark:border-coolgray-300 rounded text-xs font-bold text-neutral-500 dark:text-neutral-400">
+                                            OR
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        @endif
+                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 w-full">
+                            <x-forms.button
+                                class="justify-center h-auto py-6 box-without-bg hover:border-coollabs transition-all duration-200"
+                                wire:target="setPrivateKey('own')" wire:click="setPrivateKey('own')">
+                                <div class="flex flex-col items-center gap-2">
+                                    <svg class="size-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                        stroke-width="1.5" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z" />
+                                    </svg>
+                                    <div class="text-center">
+                                        <h3 class="text-xl font-bold mb-2">Use Existing Key</h3>
+                                        <p class="text-sm dark:text-neutral-400">I have my own SSH key</p>
+                                    </div>
+                                </div>
+                            </x-forms.button>
+                            <x-forms.button
+                                class="justify-center h-auto py-6 box-without-bg hover:border-coollabs transition-all duration-200"
+                                wire:target="setPrivateKey('create')" wire:click="setPrivateKey('create')">
+                                <div class="flex flex-col items-center gap-2">
+                                    <svg class="size-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                        stroke-width="1.5" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z" />
+                                    </svg>
+                                    <div class="text-center">
+                                        <h3 class="text-xl font-bold mb-2">Generate New Key</h3>
+                                        <p class="text-sm dark:text-neutral-400">Create ED25519 key pair</p>
+                                    </div>
+                                </div>
+                            </x-forms.button>
+                        </div>
+                    </x-slot:actions>
+                    <x-slot:explanation>
+                        <p>
+                            <x-highlighted text="SSH Key Authentication:" /> Uses public-key cryptography for secure,
+                            password-less server access.
+                        </p>
+                        <p>
+                            <x-highlighted text="Public Key Deployment:" /> Add the public key to your server's
+                            <code
+                                class="text-xs bg-coolgray-300 dark:bg-coolgray-400 px-1 py-0.5 rounded">~/.ssh/authorized_keys</code>
+                            file.
+                        </p>
+                        <p>
+                            <x-highlighted text="Key Generation:" /> Coolify generates ED25519 keys by default for optimal
+                            security and performance.
+                        </p>
+                    </x-slot:explanation>
+                </x-boarding-step>
+            @elseif ($currentState === 'create-private-key')
+                <x-boarding-progress :currentStep="2" />
+                <x-boarding-step title="SSH Key Configuration">
+                    <x-slot:question>
+                        Configure your SSH key for server authentication.
+                    </x-slot:question>
+                    <x-slot:actions>
+                        <form wire:submit='savePrivateKey' class="flex flex-col w-full gap-4">
+                            <x-forms.input required placeholder="e.g., production-server-key" label="Key Name"
+                                id="privateKeyName" />
+                            <x-forms.input placeholder="Optional: Note what this key is used for" label="Description"
+                                id="privateKeyDescription" />
+                            @if ($privateKeyType === 'create')
+                                <x-forms.textarea required readonly label="Private Key" id="privateKey" rows="8" />
+                                <x-forms.textarea rows="7" readonly label="Public Key" id="publicKey" />
+                            @else
+                                <x-forms.textarea required placeholder="-----BEGIN OPENSSH PRIVATE KEY-----" label="Private Key"
+                                    id="privateKey" rows="8" />
+                            @endif
+                            @if ($privateKeyType === 'create')
+                                <div class="p-4 bg-warning/10 border border-warning rounded-lg">
+                                    <div class="flex gap-3">
+                                        <svg class="size-5 text-warning flex-shrink-0 mt-0.5" xmlns="http://www.w3.org/2000/svg"
+                                            viewBox="0 0 20 20" fill="currentColor">
+                                            <path fill-rule="evenodd"
+                                                d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
+                                                clip-rule="evenodd" />
+                                        </svg>
+                                        <div>
+                                            <p class="font-bold text-warning mb-1">Action Required</p>
+                                            <p class="text-sm dark:text-white text-black">
+                                                Copy the public key above and add it to your server's
+                                                <code
+                                                    class="text-xs bg-coolgray-300 dark:bg-coolgray-400 px-1 py-0.5 rounded">~/.ssh/authorized_keys</code>
+                                                file.
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            @endif
+                            <x-forms.button type="submit" class="w-full lg:w-auto">Save SSH Key</x-forms.button>
+                        </form>
+                    </x-slot:actions>
+                    <x-slot:explanation>
+                        <p>
+                            <x-highlighted text="Key Storage:" /> Private keys are encrypted at rest in Coolify's database.
+                        </p>
+                        <p>
+                            <x-highlighted text="Public Key Distribution:" /> Deploy the public key to
+                            <code
+                                class="text-xs bg-coolgray-300 dark:bg-coolgray-400 px-1 py-0.5 rounded">~/.ssh/authorized_keys</code>
+                            on your target server for the specified user.
+                        </p>
+                        <p>
+                            <x-highlighted text="Key Format:" /> Supports RSA, ED25519, ECDSA, and DSA key types in OpenSSH
+                            format.
+                        </p>
+                    </x-slot:explanation>
+                </x-boarding-step>
+            @elseif ($currentState === 'create-server')
+                <x-boarding-progress :currentStep="2" />
+                <x-boarding-step title="Server Configuration">
+                    <x-slot:question>
+                        Provide connection details for your remote server.
+                    </x-slot:question>
+                    <x-slot:actions>
+                        <form wire:submit='saveServer' class="flex flex-col w-full gap-4">
+                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                                <x-forms.input required placeholder="e.g., production-app-server" label="Server Name"
+                                    id="remoteServerName" wire:model="remoteServerName" />
+                                <x-forms.input required placeholder="IP address or hostname" label="IP Address/Hostname"
+                                    id="remoteServerHost" wire:model="remoteServerHost" />
+                            </div>
+                            <x-forms.input placeholder="Optional: Note what this server hosts" label="Description"
+                                id="remoteServerDescription" wire:model="remoteServerDescription" />
+
+                            <div x-data="{ showAdvanced: false }" class="flex flex-col gap-4">
+                                <button @click="showAdvanced = !showAdvanced" type="button"
+                                    class="flex items-center gap-2 text-left text-sm font-medium  hover:underline">
+                                    <svg x-show="!showAdvanced" class="size-4" xmlns="http://www.w3.org/2000/svg"
+                                        viewBox="0 0 20 20" fill="currentColor">
+                                        <path fill-rule="evenodd"
+                                            d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+                                            clip-rule="evenodd" />
+                                    </svg>
+                                    <svg x-show="showAdvanced" class="size-4" xmlns="http://www.w3.org/2000/svg"
+                                        viewBox="0 0 20 20" fill="currentColor">
+                                        <path fill-rule="evenodd"
+                                            d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
+                                            clip-rule="evenodd" />
+                                    </svg>
+                                    Advanced Connection Settings
+                                </button>
+                                <div x-show="showAdvanced" x-cloak
+                                    class="grid grid-cols-1 lg:grid-cols-2 gap-4 p-4 rounded-lg border border-neutral-200 dark:border-coolgray-400">
+                                    <x-forms.input placeholder="Default: 22" label="SSH Port" type="number"
+                                        id="remoteServerPort" wire:model="remoteServerPort" />
+                                    <div>
+                                        <x-forms.input placeholder="Default: root" label="SSH User" id="remoteServerUser"
+                                            wire:model="remoteServerUser" />
+                                        <p class="mt-1 text-xs dark:text-white text-black">
+                                            Non-root user support is experimental.
+                                            <a class="font-bold underline hover:text-coollabs" target="_blank"
+                                                href="https://coolify.io/docs/knowledge-base/server/non-root-user">Learn
+                                                more</a>
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                            <x-forms.button type="submit" class="w-full lg:w-auto">Validate Connection</x-forms.button>
+                        </form>
+                    </x-slot:actions>
+                    <x-slot:explanation>
+                        <p>
+                            <x-highlighted text="Connection Requirements:" /> Server must be accessible via SSH on the
+                            specified port (default 22).
+                        </p>
+                        <p>
+                            <x-highlighted text="Hostname Resolution:" /> Use IP addresses for direct connections or ensure
+                            DNS resolution is configured.
+                        </p>
+                        <p>
+                            <x-highlighted text="User Permissions:" /> Root or sudo-enabled users recommended for full
+                            Docker
+                            management capabilities.
+                        </p>
+                    </x-slot:explanation>
+                </x-boarding-step>
+            @elseif ($currentState === 'validate-server')
+                <x-boarding-progress :currentStep="2" />
+                <x-boarding-step title="Server Validation">
+                    <x-slot:question>
+                        Coolify will automatically install Docker {{ $minDockerVersion }}+ if not present.
+                    </x-slot:question>
+                    <x-slot:actions>
+                        <div class="w-full space-y-6">
+                            <div
+                                class="p-6 bg-neutral-50 dark:bg-coolgray-200 rounded-lg border border-neutral-200 dark:border-coolgray-400">
+                                <h3 class="font-bold text-black dark:text-white mb-4">Validation Steps</h3>
+                                <div class="space-y-3">
+                                    <div class="flex items-start gap-3">
+                                        <div class="flex-shrink-0 mt-0.5">
+                                            <svg class="size-5 text-success" xmlns="http://www.w3.org/2000/svg"
+                                                viewBox="0 0 20 20" fill="currentColor">
+                                                <path fill-rule="evenodd"
+                                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                                                    clip-rule="evenodd" />
+                                            </svg>
+                                        </div>
+                                        <div>
+                                            <div class="font-semibold text-base dark:text-white">Test SSH Connection</div>
+                                            <div class="text-sm dark:text-neutral-400">Verify key-based authentication</div>
+                                        </div>
+                                    </div>
+                                    <div class="flex items-start gap-3">
+                                        <div class="flex-shrink-0 mt-0.5">
+                                            <svg class="size-5 text-success" xmlns="http://www.w3.org/2000/svg"
+                                                viewBox="0 0 20 20" fill="currentColor">
+                                                <path fill-rule="evenodd"
+                                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                                                    clip-rule="evenodd" />
+                                            </svg>
+                                        </div>
+                                        <div>
+                                            <div class="font-semibold text-base dark:text-white">Check OS Compatibility
+                                            </div>
+                                            <div class="text-sm dark:text-neutral-400">Verify supported Linux distribution
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="flex items-start gap-3">
+                                        <div class="flex-shrink-0 mt-0.5">
+                                            <svg class="size-5 text-success" xmlns="http://www.w3.org/2000/svg"
+                                                viewBox="0 0 20 20" fill="currentColor">
+                                                <path fill-rule="evenodd"
+                                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                                                    clip-rule="evenodd" />
+                                            </svg>
+                                        </div>
+                                        <div>
+                                            <div class="font-semibold text-base dark:text-white">Install Docker Engine</div>
+                                            <div class="text-sm dark:text-neutral-400">Auto-install if version
+                                                {{ $minDockerVersion }}+ not
+                                                found
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="flex items-start gap-3">
+                                        <div class="flex-shrink-0 mt-0.5">
+                                            <svg class="size-5 text-success" xmlns="http://www.w3.org/2000/svg"
+                                                viewBox="0 0 20 20" fill="currentColor">
+                                                <path fill-rule="evenodd"
+                                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                                                    clip-rule="evenodd" />
+                                            </svg>
+                                        </div>
+                                        <div>
+                                            <div class="font-semibold text-base dark:text-white">Configure Network</div>
+                                            <div class="text-sm dark:text-neutral-400">Set up Docker networks and proxy
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <x-slide-over closeWithX fullScreen>
+                                <x-slot:title>Server Validation</x-slot:title>
+                                <x-slot:content>
+                                    <livewire:server.validate-and-install :server="$this->createdServer" />
+                                </x-slot:content>
+                                <x-forms.button @click="slideOverOpen=true" class="w-full font-bold py-4 box-boarding"
+                                    wire:click.prevent='installServer' isHighlighted>
+                                    Start Validation
+                                </x-forms.button>
+                            </x-slide-over>
+                        </div>
+                    </x-slot:actions>
+                    <x-slot:explanation>
+                        <p>
+                            <x-highlighted text="Automated Setup:" /> Coolify installs Docker Engine, Docker Compose, and
+                            configures system requirements automatically.
+                        </p>
+                        <p>
+                            <x-highlighted text="Version Requirements:" /> Minimum Docker Engine {{ $minDockerVersion }}.x
+                            required.
+                            <a target="_blank" class="underline hover:text-coollabs"
+                                href="https://docs.docker.com/engine/install/#server">Manual installation guide</a>
+                        </p>
+                        <p>
+                            <x-highlighted text="System Configuration:" /> Sets up Docker networks, proxy configuration, and
+                            resource monitoring.
+                        </p>
+                    </x-slot:explanation>
+                </x-boarding-step>
+            @elseif ($currentState === 'create-project')
+                <x-boarding-progress :currentStep="3" />
+                <x-boarding-step title="Project Setup">
+                    <x-slot:question>
+                        @if ($projects && $projects->count() > 0)
+                            You have existing projects. Select one or create a new project to organize your resources.
+                        @else
+                            Create your first project to organize applications, databases, and services.
+                        @endif
+                    </x-slot:question>
+                    <x-slot:actions>
+                        <div class="w-full space-y-4">
+                            <x-forms.button class="justify-center w-full py-4 font-bold box-boarding"
+                                wire:click="createNewProject" isHighlighted>
+                                Create "My First Project"
+                            </x-forms.button>
+
+                            @if ($projects && $projects->count() > 0)
+                                <div class="relative">
+                                    <div class="absolute inset-0 flex items-center">
+                                        <div class="w-full border-t border-neutral-300 dark:border-coolgray-400"></div>
+                                    </div>
+                                    <div class="relative flex justify-center text-sm">
+                                        <span class="px-2 text-neutral-500 dark:text-neutral-400">Or use existing</span>
+                                    </div>
+                                </div>
+                                <form wire:submit='selectExistingProject' class="flex flex-col gap-4">
+                                    <x-forms.select label="Existing Projects" id='selectedProject'>
+                                        @foreach ($projects as $project)
+                                            <option wire:key="{{ $loop->index }}" value="{{ $project->id }}">
+                                                {{ $project->name }}
+                                            </option>
+                                        @endforeach
+                                    </x-forms.select>
+                                    <x-forms.button type="submit" class="w-full lg:w-auto">Use Selected Project</x-forms.button>
+                                </form>
+                            @endif
+                        </div>
+                    </x-slot:actions>
+                    <x-slot:explanation>
+                        <p>
+                            <x-highlighted text="Project Organization:" /> Group related resources (apps, databases,
+                            services)
+                            into logical projects.
+                        </p>
+                        <p>
+                            <x-highlighted text="Environments:" /> Each project includes a production environment by
+                            default.
+                            Add staging, development, or custom environments as needed.
+                        </p>
+                        <p>
+                            <x-highlighted text="Team Access:" /> Projects inherit team permissions and can be managed
+                            collaboratively.
+                        </p>
+                    </x-slot:explanation>
+                </x-boarding-step>
+            @elseif ($currentState === 'create-resource')
+                <x-boarding-progress :currentStep="3" />
+                <div class="w-full max-w-2xl text-center space-y-8">
+                    <div class="space-y-4">
+                        <div class="flex justify-center">
+                            <svg class="size-16 text-success" xmlns="http://www.w3.org/2000/svg" fill="none"
+                                viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round"
+                                    d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                            </svg>
+                        </div>
+                        <h1 class="text-4xl font-bold lg:text-5xl">Setup Complete!</h1>
+                        <p class="text-lg dark:text-neutral-400">
+                            Your server is connected and ready. Start deploying your first resource.
+                        </p>
+                    </div>
+
+                    <div
+                        class="bg-white dark:bg-coolgray-100 rounded-lg shadow-sm border border-neutral-200 dark:border-coolgray-300 p-8 text-left">
+                        <h2 class="text-sm font-bold uppercase tracking-wide dark:text-neutral-400 mb-4">
+                            What's Configured
+                        </h2>
+                        <div class="space-y-3">
+                            <div class="flex items-start gap-3">
+                                <div class="flex-shrink-0 mt-0.5">
+                                    <svg class="size-5 text-success" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+                                        fill="currentColor">
+                                        <path fill-rule="evenodd"
+                                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                                            clip-rule="evenodd" />
+                                    </svg>
+                                </div>
+                                <div>
+                                    <div class="font-semibold text-base dark:text-white">Server: {{ $createdServer->name }}
+                                    </div>
+                                    <div class="text-sm dark:text-neutral-400">{{ $createdServer->ip }}</div>
+                                </div>
+                            </div>
+                            <div class="flex items-start gap-3">
+                                <div class="flex-shrink-0 mt-0.5">
+                                    <svg class="size-5 text-success" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+                                        fill="currentColor">
+                                        <path fill-rule="evenodd"
+                                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                                            clip-rule="evenodd" />
+                                    </svg>
+                                </div>
+                                <div>
+                                    <div class="font-semibold text-base dark:text-white">Project:
+                                        {{ $createdProject->name }}
+                                    </div>
+                                    <div class="text-sm dark:text-neutral-400">Production environment ready</div>
+                                </div>
+                            </div>
+                            <div class="flex items-start gap-3">
+                                <div class="flex-shrink-0 mt-0.5">
+                                    <svg class="size-5 text-success" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+                                        fill="currentColor">
+                                        <path fill-rule="evenodd"
+                                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                                            clip-rule="evenodd" />
+                                    </svg>
+                                </div>
+                                <div>
+                                    <div class="font-semibold text-base dark:text-white">Docker Engine</div>
+                                    <div class="text-sm dark:text-neutral-400">Installed and running</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="flex flex-col gap-3">
+                        <x-forms.button class="justify-center w-full py-4 text-lg font-bold box-boarding"
+                            wire:click="showNewResource" isHighlighted>
+                            Deploy Your First Resource
+                        </x-forms.button>
+                        <button wire:click="skipBoarding"
+                            class="text-sm dark:text-neutral-400 hover:text-coollabs dark:hover:text-warning hover:underline transition-colors">
+                            Go to Dashboard
+                        </button>
+                    </div>
+                </div>
+            @endif
+        </div>
+
+        @if ($currentState !== 'welcome' && $currentState !== 'create-resource')
+            <div class="flex flex-col items-center gap-4 pt-8 mt-8 border-t border-neutral-200 dark:border-coolgray-400">
+                <div class="flex justify-center gap-6 text-sm">
+                    <button wire:click='skipBoarding'
+                        class="dark:text-neutral-400 hover:text-coollabs dark:hover:text-warning hover:underline transition-colors">
+                        Skip Setup
+                    </button>
+                    <button wire:click='restartBoarding'
+                        class="dark:text-neutral-400 hover:text-coollabs dark:hover:text-warning hover:underline transition-colors">
+                        Restart
+                    </button>
+                </div>
+                <x-modal-input title="Need Help?">
+                    <x-slot:content>
+                        <button
+                            class="text-sm dark:text-neutral-400 hover:text-coollabs dark:hover:text-warning hover:underline transition-colors">
+                            Contact Support
+                        </button>
+                    </x-slot:content>
+                    <livewire:help />
+                </x-modal-input>
+            </div>
+        @endif
+    </section>
\ No newline at end of file
diff --git a/resources/views/livewire/terminal/index.blade.php b/resources/views/livewire/terminal/index.blade.php
index aed2ef55d..0d6e7c559 100644
--- a/resources/views/livewire/terminal/index.blade.php
+++ b/resources/views/livewire/terminal/index.blade.php
@@ -17,7 +17,7 @@
             @if ($servers->count() > 0)
                 <form class="flex flex-col gap-2 justify-center xl:items-end xl:flex-row"
                     wire:submit="$dispatchSelf('connectToContainer')">
-                    <x-forms.select id="server" required wire:model.live="selected_uuid">
+                    <x-forms.datalist id="selected_uuid" required wire:model.live="selected_uuid" placeholder="Search servers or containers...">
                         @foreach ($servers as $server)
                             @if ($loop->first)
                                 <option disabled value="default">Select a server or container</option>
@@ -31,7 +31,7 @@
                                 @endif
                             @endforeach
                         @endforeach
-                    </x-forms.select>
+                    </x-forms.datalist>
                     <x-forms.button type="submit">Connect</x-forms.button>
                 </form>
             @else