From c9160cabc5bfcc45696029e9c727bdad956a691e Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Mon, 25 Mar 2024 14:09:13 +0100
Subject: [PATCH 1/6] Update version numbers and fix layout in subscription
 views

---
 config/sentry.php                             |  2 +-
 config/version.php                            |  2 +-
 resources/views/auth/verify-email.blade.php   | 10 +--
 resources/views/layouts/boarding.blade.php    |  2 +-
 .../livewire/subscription/index.blade.php     | 68 ++++++++++---------
 versions.json                                 |  2 +-
 6 files changed, 44 insertions(+), 42 deletions(-)

diff --git a/config/sentry.php b/config/sentry.php
index d7469ecfc..00613c115 100644
--- a/config/sentry.php
+++ b/config/sentry.php
@@ -7,7 +7,7 @@ return [
 
     // The release version of your application
     // Example with dynamic git hash: trim(exec('git --git-dir ' . base_path('.git') . ' log --pretty="%h" -n1 HEAD'))
-    'release' => '4.0.0-beta.242',
+    'release' => '4.0.0-beta.243',
     // When left empty or `null` the Laravel environment will be used
     'environment' => config('app.env'),
 
diff --git a/config/version.php b/config/version.php
index f67327b64..a16c004bf 100644
--- a/config/version.php
+++ b/config/version.php
@@ -1,3 +1,3 @@
 <?php
 
-return '4.0.0-beta.242';
+return '4.0.0-beta.243';
diff --git a/resources/views/auth/verify-email.blade.php b/resources/views/auth/verify-email.blade.php
index 7db8da43b..cfdd68291 100644
--- a/resources/views/auth/verify-email.blade.php
+++ b/resources/views/auth/verify-email.blade.php
@@ -1,6 +1,6 @@
-<x-layout-subscription>
-    <div class="min-h-screen hero">
-        <div class="min-w-fit">
+<x-layout>
+    <section class="flex flex-col h-full lg:items-center lg:justify-center">
+        <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto max-w-7xl lg:py-0">
             <h1> Verification Email Sent </h1>
             <div class="flex justify-center gap-2 text-center">
                 <br>To activate your account, please open the email and follow the
@@ -8,5 +8,5 @@
             </div>
             <livewire:verify-email />
         </div>
-    </div>
-</x-layout-subscription>
+    </section>
+</x-layout>
diff --git a/resources/views/layouts/boarding.blade.php b/resources/views/layouts/boarding.blade.php
index f65e14a00..4a897ff2f 100644
--- a/resources/views/layouts/boarding.blade.php
+++ b/resources/views/layouts/boarding.blade.php
@@ -1,7 +1,7 @@
 @extends('layouts.base')
 @section('body')
     <main class="h-full bg-gray-50 dark:bg-base">
-            {{ $slot }}
+        {{ $slot }}
     </main>
     @parent
 @endsection
diff --git a/resources/views/livewire/subscription/index.blade.php b/resources/views/livewire/subscription/index.blade.php
index 227b94ef7..4c2a03374 100644
--- a/resources/views/livewire/subscription/index.blade.php
+++ b/resources/views/livewire/subscription/index.blade.php
@@ -1,38 +1,40 @@
-@if ($settings->is_resale_license_active)
-    @if (auth()->user()->isAdminFromSession())
-        <div>
-            <div class="flex gap-2">
-                <h1>Choose a Plan</h1>
-                @if (subscriptionProvider() === 'stripe' && $alreadySubscribed)
-                    <x-forms.button wire:click='stripeCustomerPortal'>Manage My Subscription</x-forms.button>
+<div>
+    @if ($settings->is_resale_license_active)
+        @if (auth()->user()->isAdminFromSession())
+            <div>
+                <div class="flex gap-2">
+                    <h1>Choose a Plan</h1>
+                    @if (subscriptionProvider() === 'stripe' && $alreadySubscribed)
+                        <x-forms.button wire:click='stripeCustomerPortal'>Manage My Subscription</x-forms.button>
+                    @endif
+                </div>
+                @if (request()->query->get('cancelled'))
+                    <div class="mb-6 rounded alert-error">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none"
+                            viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                        <span>Something went wrong with your subscription. Please try again or contact
+                            support.</span>
+                    </div>
+                @endif
+
+                @if (config('subscription.provider') !== null)
+                    <livewire:subscription.pricing-plans />
                 @endif
             </div>
-            @if (request()->query->get('cancelled'))
-                <div class="mb-6 rounded alert-error">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none"
-                        viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                    </svg>
-                    <span>Something went wrong with your subscription. Please try again or contact
-                        support.</span>
+        @else
+            <div class="flex flex-col justify-center mx-10">
+                <div class="flex gap-2">
+                    <h1>Subscription</h1>
                 </div>
-            @endif
-
-            @if (config('subscription.provider') !== null)
-                <livewire:subscription.pricing-plans />
-            @endif
-        </div>
-    @else
-        <div class="flex flex-col justify-center mx-10">
-            <div class="flex gap-2">
-                <h1>Subscription</h1>
+                <div>You are not an admin or have been removed from this team. If this does not make sense, please <span
+                        class="underline cursor-pointer dark:text-white" wire:click="help">contact
+                        us</span>.</div>
             </div>
-            <div>You are not an admin or have been removed from this team. If this does not make sense, please <span
-                    class="dark:text-white underline cursor-pointer" wire:click="help">contact
-                    us</span>.</div>
-        </div>
+        @endif
+    @else
+        <div class="px-10">Resale license is not active. Please contact your instance admin.</div>
     @endif
-@else
-    <div class="px-10">Resale license is not active. Please contact your instance admin.</div>
-@endif
+</div>
diff --git a/versions.json b/versions.json
index bcc5d1414..fda35b876 100644
--- a/versions.json
+++ b/versions.json
@@ -4,7 +4,7 @@
             "version": "3.12.36"
         },
         "v4": {
-            "version": "4.0.0-beta.242"
+            "version": "4.0.0-beta.243"
         }
     }
 }

From 37333f7fbec972b4f6cba2d7af2d6afda1ca21d6 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Mon, 25 Mar 2024 14:23:32 +0100
Subject: [PATCH 2/6] fix: two factor

---
 composer.json                                 |  1 -
 composer.lock                                 | 60 +------------------
 config/wire-elements-modal.php                | 52 ----------------
 resources/js/app.js                           |  1 -
 .../views/auth/two-factor-challenge.blade.php | 36 +++++------
 resources/views/layouts/base.blade.php        |  1 -
 resources/views/layouts/simple.blade.php      |  4 +-
 tailwind.config.js                            |  1 -
 8 files changed, 18 insertions(+), 138 deletions(-)
 delete mode 100644 config/wire-elements-modal.php

diff --git a/composer.json b/composer.json
index 1624e1390..b57263534 100644
--- a/composer.json
+++ b/composer.json
@@ -41,7 +41,6 @@
         "stripe/stripe-php": "^12.0",
         "symfony/yaml": "^6.2",
         "visus/cuid2": "^2.0.0",
-        "wire-elements/modal": "^2.0",
         "yosymfony/toml": "^1.0"
     },
     "require-dev": {
diff --git a/composer.lock b/composer.lock
index 1c52be3ab..91613ec5f 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "9bdaf702cdd870434444f8937a816fdb",
+    "content-hash": "e095b8a9eb22df2943cbc3e9649ff9e8",
     "packages": [
         {
             "name": "amphp/amp",
@@ -11859,64 +11859,6 @@
             },
             "time": "2022-06-03T18:03:27+00:00"
         },
-        {
-            "name": "wire-elements/modal",
-            "version": "2.0.9",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/wire-elements/modal.git",
-                "reference": "899b05e313403669aa8a359db71a066246184355"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/wire-elements/modal/zipball/899b05e313403669aa8a359db71a066246184355",
-                "reference": "899b05e313403669aa8a359db71a066246184355",
-                "shasum": ""
-            },
-            "require": {
-                "livewire/livewire": "^3.2.3",
-                "php": "^8.1",
-                "spatie/laravel-package-tools": "^1.9"
-            },
-            "require-dev": {
-                "orchestra/testbench": "^8.5",
-                "phpunit/phpunit": "^9.5"
-            },
-            "type": "library",
-            "extra": {
-                "laravel": {
-                    "providers": [
-                        "LivewireUI\\Modal\\LivewireModalServiceProvider"
-                    ]
-                }
-            },
-            "autoload": {
-                "psr-4": {
-                    "LivewireUI\\Modal\\": "src"
-                }
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
-            "authors": [
-                {
-                    "name": "Philo Hermans",
-                    "email": "me@philohermans.com"
-                }
-            ],
-            "description": "Laravel Livewire modal component",
-            "keywords": [
-                "laravel",
-                "livewire",
-                "modal"
-            ],
-            "support": {
-                "issues": "https://github.com/wire-elements/modal/issues",
-                "source": "https://github.com/wire-elements/modal/tree/2.0.9"
-            },
-            "time": "2023-12-08T09:31:14+00:00"
-        },
         {
             "name": "yosymfony/parser-utils",
             "version": "v2.0.0",
diff --git a/config/wire-elements-modal.php b/config/wire-elements-modal.php
deleted file mode 100644
index b0bf5ff03..000000000
--- a/config/wire-elements-modal.php
+++ /dev/null
@@ -1,52 +0,0 @@
-<?php
-
-return [
-
-    /*
-    |--------------------------------------------------------------------------
-    | Include CSS
-    |--------------------------------------------------------------------------
-    |
-    | The modal uses TailwindCSS, if you don't use TailwindCSS you will need
-    | to set this parameter to true. This includes the modern-normalize css.
-    |
-    */
-    'include_css' => false,
-
-    /*
-    |--------------------------------------------------------------------------
-    | Include JS
-    |--------------------------------------------------------------------------
-    |
-    | Livewire UI will inject the required Javascript in your blade template.
-    | If you want to bundle the required Javascript you can set this to false
-    | and add `require('vendor/wire-elements/modal/resources/js/modal');`
-    | to your script bundler like webpack.
-    |
-    */
-    'include_js' => false,
-
-    /*
-    |--------------------------------------------------------------------------
-    | Modal Component Defaults
-    |--------------------------------------------------------------------------
-    |
-    | Configure the default properties for a modal component.
-    |
-    | Supported modal_max_width
-    | 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl'
-    */
-    'component_defaults' => [
-        'modal_max_width' => '7xl',
-
-        'close_modal_on_click_away' => true,
-
-        'close_modal_on_escape' => true,
-
-        'close_modal_on_escape_is_forceful' => true,
-
-        'dispatch_close_event' => false,
-
-        'destroy_on_close' => false,
-    ],
-];
diff --git a/resources/js/app.js b/resources/js/app.js
index a49c95e97..47313863b 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,6 +1,5 @@
 import { createApp } from "vue";
 import MagicBar from "./components/MagicBar.vue";
-import "../../vendor/wire-elements/modal/resources/js/modal";
 
 const app = createApp({});
 app.component("magic-bar", MagicBar);
diff --git a/resources/views/auth/two-factor-challenge.blade.php b/resources/views/auth/two-factor-challenge.blade.php
index 7ba75e80a..244487eb8 100644
--- a/resources/views/auth/two-factor-challenge.blade.php
+++ b/resources/views/auth/two-factor-challenge.blade.php
@@ -3,31 +3,25 @@
         <div>
             <div class="flex flex-col items-center pb-8">
                 <div class="text-5xl font-bold tracking-tight text-center dark:text-white">Coolify</div>
-                <x-version />
+                {{-- <x-version /> --}}
             </div>
-            <div class="w-96" x-data="{ showRecovery: false }">
+            <div class="w-96">
                 <form action="/two-factor-challenge" method="POST" class="flex flex-col gap-2">
                     @csrf
-                    <template x-if="!showRecovery">
-                        <div>
-                            <x-forms.input required type="number" name="code" label="{{ __('input.code') }}"
-                                autofocus />
-                            <div class="pt-2 text-xs cursor-pointer hover:underline hover:dark:text-white"
-                                x-on:click="showRecovery = !showRecovery">Use
-                                Recovery Code
-                            </div>
+                    <div>
+                        <x-forms.input autofocus type="number" name="code" label="{{ __('input.code') }}" autofocus />
+                        {{-- <div class="pt-2 text-xs cursor-pointer hover:underline hover:dark:text-white"
+                            x-on:click="showRecovery = !showRecovery">Use
+                            Recovery Code
+                        </div> --}}
+                    </div>
+                    <div>
+                        <x-forms.input name="recovery_code" label="{{ __('input.recovery_code') }}" />
+                        <div class="pt-2 text-xs cursor-pointer hover:underline hover:dark:text-white"
+                            x-on:click="showRecovery = !showRecovery">Use
+                            One-Time Code
                         </div>
-                    </template>
-                    <template x-if="showRecovery">
-                        <div>
-                            <x-forms.input required type="text" name="recovery_code"
-                                label="{{ __('input.recovery_code') }}" />
-                            <div class="pt-2 text-xs cursor-pointer hover:underline hover:dark:text-white"
-                                x-on:click="showRecovery = !showRecovery">Use
-                                One-Time Code
-                            </div>
-                        </div>
-                    </template>
+                    </div>
                     <x-forms.button type="submit">{{ __('auth.login') }}</x-forms.button>
                 </form>
                 @if ($errors->any())
diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php
index cd4e6e258..1f02fd95c 100644
--- a/resources/views/layouts/base.blade.php
+++ b/resources/views/layouts/base.blade.php
@@ -38,7 +38,6 @@
 @section('body')
 
     <body>
-        {{-- @livewire('wire-elements-modal') --}}
         <x-toast />
         <script data-navigate-once>
             if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia(
diff --git a/resources/views/layouts/simple.blade.php b/resources/views/layouts/simple.blade.php
index c3a25cda8..4a897ff2f 100644
--- a/resources/views/layouts/simple.blade.php
+++ b/resources/views/layouts/simple.blade.php
@@ -1,7 +1,7 @@
 @extends('layouts.base')
 @section('body')
-    @parent
-    <main>
+    <main class="h-full bg-gray-50 dark:bg-base">
         {{ $slot }}
     </main>
+    @parent
 @endsection
diff --git a/tailwind.config.js b/tailwind.config.js
index 1e15c8ddb..2bb1b73e4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -15,7 +15,6 @@ const colors = {
 module.exports = {
     darkMode: "selector",
     content: [
-        './vendor/wire-elements/modal/resources/views/*.blade.php',
         './storage/framework/views/*.php',
         "./resources/**/*.blade.php",
         "./app/**/*.php",

From afe0673fd12db619f6f4e84aa23739e67dfec2d9 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Mon, 25 Mar 2024 14:24:09 +0100
Subject: [PATCH 3/6] Commented out x-version component in confirm-password and
 forgot-password views

---
 resources/views/auth/confirm-password.blade.php | 2 +-
 resources/views/auth/forgot-password.blade.php  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/views/auth/confirm-password.blade.php b/resources/views/auth/confirm-password.blade.php
index c376c6af5..8d491a218 100644
--- a/resources/views/auth/confirm-password.blade.php
+++ b/resources/views/auth/confirm-password.blade.php
@@ -3,7 +3,7 @@
         <div>
             <div class="flex flex-col items-center pb-8">
                 <div class="text-5xl font-bold tracking-tight text-center dark:text-white">Coolify</div>
-                <x-version />
+                {{-- <x-version /> --}}
             </div>
             <div class="w-96">
                 <form action="/user/confirm-password" method="POST" class="flex flex-col gap-2">
diff --git a/resources/views/auth/forgot-password.blade.php b/resources/views/auth/forgot-password.blade.php
index c431ad518..08d52facd 100644
--- a/resources/views/auth/forgot-password.blade.php
+++ b/resources/views/auth/forgot-password.blade.php
@@ -5,7 +5,7 @@
                 <a href="{{ route('dashboard') }}">
                     <div class="text-5xl font-bold tracking-tight text-center dark:text-white">Coolify</div>
                 </a>
-                <x-version />
+                {{-- <x-version /> --}}
             </div>
 
             <div class="flex items-center gap-2">

From 9c03525369f7b09bed7fcb0a8e0d1ff22e595431 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Mon, 25 Mar 2024 14:29:11 +0100
Subject: [PATCH 4/6] Remove commented out code in
 two-factor-challenge.blade.php

---
 resources/views/auth/two-factor-challenge.blade.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/views/auth/two-factor-challenge.blade.php b/resources/views/auth/two-factor-challenge.blade.php
index 244487eb8..33094920c 100644
--- a/resources/views/auth/two-factor-challenge.blade.php
+++ b/resources/views/auth/two-factor-challenge.blade.php
@@ -17,10 +17,10 @@
                     </div>
                     <div>
                         <x-forms.input name="recovery_code" label="{{ __('input.recovery_code') }}" />
-                        <div class="pt-2 text-xs cursor-pointer hover:underline hover:dark:text-white"
+                        {{-- <div class="pt-2 text-xs cursor-pointer hover:underline hover:dark:text-white"
                             x-on:click="showRecovery = !showRecovery">Use
                             One-Time Code
-                        </div>
+                        </div> --}}
                     </div>
                     <x-forms.button type="submit">{{ __('auth.login') }}</x-forms.button>
                 </form>

From 995c303f2714867a664e2f75917d72f2c0ffc587 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Mon, 25 Mar 2024 14:34:11 +0100
Subject: [PATCH 5/6] Refactor Livewire/Boarding/Index.php and
 resources/views/livewire/boarding/index.blade.php

---
 app/Livewire/Boarding/Index.php                   |  5 -----
 resources/views/livewire/boarding/index.blade.php | 11 +++++++----
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/app/Livewire/Boarding/Index.php b/app/Livewire/Boarding/Index.php
index 110222fb4..14524a46f 100644
--- a/app/Livewire/Boarding/Index.php
+++ b/app/Livewire/Boarding/Index.php
@@ -15,14 +15,11 @@ class Index extends Component
 {
     protected $listeners = ['serverInstalled' => 'validateServer'];
 
-    #[Url()]
     public string $state = 'welcome';
 
-    #[Url()]
     public ?string $selectedServerType = null;
     public ?Collection $privateKeys = null;
 
-    #[Url()]
     public ?int $selectedExistingPrivateKey = null;
     public ?string $privateKeyType = null;
     public ?string $privateKey = null;
@@ -33,7 +30,6 @@ class Index extends Component
 
     public ?Collection $servers = null;
 
-    #[Url()]
     public ?int $selectedExistingServer = null;
     public ?string $remoteServerName = null;
     public ?string $remoteServerDescription = null;
@@ -46,7 +42,6 @@ class Index extends Component
 
     public Collection $projects;
 
-    #[Url()]
     public ?int $selectedProject = null;
     public ?Project $createdProject = null;
 
diff --git a/resources/views/livewire/boarding/index.blade.php b/resources/views/livewire/boarding/index.blade.php
index c254a003b..d1b9f3160 100644
--- a/resources/views/livewire/boarding/index.blade.php
+++ b/resources/views/livewire/boarding/index.blade.php
@@ -329,14 +329,17 @@
         </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">
-                <x-forms.button wire:click='skipBoarding'>Skip onboarding</x-forms.button>
-                <x-forms.button wire:click='restartBoarding'>Restart onboarding</x-forms.button>
+                <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>
-                    <x-forms.button class="w-full" title="Send us feedback or get help!">
+                    <div class="w-full text-center cursor-pointer hover:underline dark:hover:text-white"
+                        title="Send us feedback or get help!">
                         Feedback
-                    </x-forms.button>
+                    </div>
                 </x-slot:content>
                 <livewire:help />
             </x-modal-input>

From 2be2a2621e07202690426f3b11a97ed28ff50ffb Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Mon, 25 Mar 2024 14:44:31 +0100
Subject: [PATCH 6/6] Update conditional statements in app.blade.php and
 navbar.blade.php

---
 app/Livewire/Boarding/Index.php               |  70 +-
 resources/views/components/navbar.blade.php   |   4 +-
 resources/views/layouts/app.blade.php         |   2 +-
 .../views/livewire/boarding/index.blade.php   | 630 +++++++++---------
 4 files changed, 340 insertions(+), 366 deletions(-)

diff --git a/app/Livewire/Boarding/Index.php b/app/Livewire/Boarding/Index.php
index 14524a46f..2681b69e0 100644
--- a/app/Livewire/Boarding/Index.php
+++ b/app/Livewire/Boarding/Index.php
@@ -15,7 +15,7 @@ class Index extends Component
 {
     protected $listeners = ['serverInstalled' => 'validateServer'];
 
-    public string $state = 'welcome';
+    public string $currentState = 'welcome';
 
     public ?string $selectedServerType = null;
     public ?Collection $privateKeys = null;
@@ -66,25 +66,25 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
             $this->remoteServerDescription = 'Created by Coolify';
             $this->remoteServerHost = 'coolify-testing-host';
         }
-        if ($this->state === 'create-project') {
-            $this->getProjects();
-        }
-        if ($this->state === 'create-resource') {
-            $this->selectExistingServer();
-            $this->selectExistingProject();
-        }
-        if ($this->state === 'private-key') {
-            $this->setServerType('remote');
-        }
-        if ($this->state === 'create-server') {
-            $this->selectExistingPrivateKey();
-        }
-        if ($this->state === 'validate-server') {
-            $this->selectExistingServer();
-        }
-        if ($this->state === 'select-existing-server') {
-            $this->selectExistingServer();
-        }
+        // if ($this->currentState === 'create-project') {
+        //     $this->getProjects();
+        // }
+        // if ($this->currentState === 'create-resource') {
+        //     $this->selectExistingServer();
+        //     $this->selectExistingProject();
+        // }
+        // if ($this->currentState === 'private-key') {
+        //     $this->setServerType('remote');
+        // }
+        // if ($this->currentState === 'create-server') {
+        //     $this->selectExistingPrivateKey();
+        // }
+        // if ($this->currentState === 'validate-server') {
+        //     $this->selectExistingServer();
+        // }
+        // if ($this->currentState === 'select-existing-server') {
+        //     $this->selectExistingServer();
+        // }
 
     }
     public function explanation()
@@ -92,7 +92,7 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
         if (isCloud()) {
             return $this->setServerType('remote');
         }
-        $this->state = 'select-server-type';
+        $this->currentState = 'select-server-type';
     }
 
     public function restartBoarding()
@@ -131,10 +131,10 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
             $this->servers = Server::ownedByCurrentTeam(['name'])->where('id', '!=', 0)->get();
             if ($this->servers->count() > 0) {
                 $this->selectedExistingServer = $this->servers->first()->id;
-                $this->state = 'select-existing-server';
+                $this->currentState = 'select-existing-server';
                 return;
             }
-            $this->state = 'private-key';
+            $this->currentState = 'private-key';
         }
     }
     public function selectExistingServer()
@@ -142,12 +142,12 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
         $this->createdServer = Server::find($this->selectedExistingServer);
         if (!$this->createdServer) {
             $this->dispatch('error', 'Server is not found.');
-            $this->state = 'private-key';
+            $this->currentState = 'private-key';
             return;
         }
         $this->selectedExistingPrivateKey = $this->createdServer->privateKey->id;
         $this->serverPublicKey = $this->createdServer->privateKey->publicKey();
-        $this->state = 'validate-server';
+        $this->currentState = 'validate-server';
     }
     public function getProxyType()
     {
@@ -155,7 +155,7 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
         $this->selectProxy(ProxyTypes::TRAEFIK_V2->value);
         // $proxyTypeSet = $this->createdServer->proxy->type;
         // if (!$proxyTypeSet) {
-        //     $this->state = 'select-proxy';
+        //     $this->currentState = 'select-proxy';
         //     return;
         // }
         $this->getProjects();
@@ -168,12 +168,12 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
         }
         $this->createdPrivateKey = PrivateKey::find($this->selectedExistingPrivateKey);
         $this->privateKey = $this->createdPrivateKey->private_key;
-        $this->state = 'create-server';
+        $this->currentState = 'create-server';
     }
     public function createNewServer()
     {
         $this->selectedExistingServer = null;
-        $this->state = 'private-key';
+        $this->currentState = 'private-key';
     }
     public function setPrivateKey(string $type)
     {
@@ -182,7 +182,7 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
         if ($type === 'create') {
             $this->createNewPrivateKey();
         }
-        $this->state = 'create-private-key';
+        $this->currentState = 'create-private-key';
     }
     public function savePrivateKey()
     {
@@ -197,7 +197,7 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
             'team_id' => currentTeam()->id
         ]);
         $this->createdPrivateKey->save();
-        $this->state = 'create-server';
+        $this->currentState = 'create-server';
     }
     public function saveServer()
     {
@@ -226,7 +226,7 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
         $this->createdServer->settings->save();
         $this->createdServer->addInitialNetwork();
         $this->selectedExistingServer = $this->createdServer->id;
-        $this->state = 'validate-server';
+        $this->currentState = 'validate-server';
     }
     public function installServer()
     {
@@ -253,7 +253,7 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
             $dockerVersion = instant_remote_process(["docker version|head -2|grep -i version| awk '{print $2}'"], $this->createdServer, true);
             $dockerVersion = checkMinimumDockerEngineVersion($dockerVersion);
             if (is_null($dockerVersion)) {
-                $this->state = 'validate-server';
+                $this->currentState = 'validate-server';
                 throw new \Exception('Docker not found or old version is installed.');
             }
             $this->createdServer->settings()->update([
@@ -281,12 +281,12 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
         if ($this->projects->count() > 0) {
             $this->selectedProject = $this->projects->first()->id;
         }
-        $this->state = 'create-project';
+        $this->currentState = 'create-project';
     }
     public function selectExistingProject()
     {
         $this->createdProject = Project::find($this->selectedProject);
-        $this->state = 'create-resource';
+        $this->currentState = 'create-resource';
     }
     public function createNewProject()
     {
@@ -294,7 +294,7 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
             'name' => "My first project",
             'team_id' => currentTeam()->id
         ]);
-        $this->state = 'create-resource';
+        $this->currentState = 'create-resource';
     }
     public function showNewResource()
     {
diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index 05a5fd315..0c0561a32 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -12,7 +12,7 @@
     <ul role="list" class="flex flex-col flex-1 gap-y-7">
         <li class="flex-1 ">
             <ul role="list" class="flex flex-col h-full space-y-1.5">
-                @if (isSubscribed())
+                @if (isSubscribed() || !isCloud())
                     <li>
                         <a title="Dashboard" href="/"
                             class="{{ request()->is('/') ? 'menu-item-active menu-item' : 'menu-item' }}">
@@ -263,7 +263,7 @@
                         <livewire:help />
                     </x-modal-input>
                 </li>
-                <li >
+                <li>
                     <form action="/logout" method="POST">
                         @csrf
                         <button title="Logout" type="submit" class="gap-2 mb-6 menu-item">
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index dcbeede5d..e502e9e6e 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -1,7 +1,7 @@
 @extends('layouts.base')
 @section('body')
     @parent
-    @if (isSubscribed())
+    @if (isSubscribed() || !isCloud())
         <livewire:layout-popups />
     @endif
     @auth
diff --git a/resources/views/livewire/boarding/index.blade.php b/resources/views/livewire/boarding/index.blade.php
index d1b9f3160..50684cc65 100644
--- a/resources/views/livewire/boarding/index.blade.php
+++ b/resources/views/livewire/boarding/index.blade.php
@@ -1,348 +1,322 @@
 @php use App\Enums\ProxyTypes; @endphp
 <section class="flex flex-col h-full lg:items-center lg:justify-center">
     <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto max-w-7xl lg:py-0">
-        @if ($state === 'welcome')
+        @if ($currentState === 'welcome')
             <h1 class="text-3xl font-bold lg:text-5xl">Welcome to Coolify</h1>
             <p class="py-6 text-base text-center lg:text-xl">Let me help you set up the basics.</p>
             <div class="flex justify-center ">
-                <x-forms.button class="justify-center w-64 box" wire:click="$set('state','explanation')">Get
+                <x-forms.button class="justify-center w-64 box" wire:click="$set('currentState','explanation')">Get
                     Started
                 </x-forms.button>
             </div>
-        @endif
-        <div>
-            @if ($state === '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 application with
-                        Git
-                        integrations, deploy databases and services, monitor these resources with notifications and
-                        alerts
-                        without vendor lock-in
-                        and <a href="https://coolify.io" class="dark:text-white hover:underline">much much more</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 lg:w-64 box" wire:click="explanation">Next
-                        </x-forms.button>
-                    </x-slot:actions>
-                </x-boarding-step>
-            @endif
-            @if ($state === '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" wire:target="setServerType('localhost')"
-                            wire:click="setServerType('localhost')">Localhost
-                        </x-forms.button>
+        @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 application with
+                    Git
+                    integrations, deploy databases and services, monitor these resources with notifications and
+                    alerts
+                    without vendor lock-in
+                    and <a href="https://coolify.io" class="dark:text-white hover:underline">much much more</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 lg:w-64 box" 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" wire:target="setServerType('localhost')"
+                        wire:click="setServerType('localhost')">Localhost
+                    </x-forms.button>
 
-                        <x-forms.button class="justify-center w-64 box " wire:target="setServerType('remote')"
-                            wire:click="setServerType('remote')">Remote Server
+                    <x-forms.button class="justify-center w-64 box " wire:target="setServerType('remote')"
+                        wire:click="setServerType('remote')">Remote Server
+                    </x-forms.button>
+                    @if (!$serverReachable)
+                        Localhost is not reachable with the following public key.
+                        <br /> <br />
+                        Please make sure you have the correct public key in your ~/.ssh/authorized_keys file for
+                        user
+                        'root' or skip the boarding process and add a new private key manually to Coolify and to the
+                        server.
+                        <br />
+                        Check this <a target="_blank" class="underline"
+                            href="https://coolify.io/docs/server/openssh">documentation</a> for further help.
+                        <x-forms.input readonly id="serverPublicKey"></x-forms.input>
+                        <x-forms.button class="lg:w-64 box" wire:target="setServerType('localhost')"
+                            wire:click="setServerType('localhost')">Check again
                         </x-forms.button>
-                        @if (!$serverReachable)
-                            Localhost is not reachable with the following public key.
-                            <br /> <br />
-                            Please make sure you have the correct public key in your ~/.ssh/authorized_keys file for
-                            user
-                            'root' or skip the boarding process and add a new private key manually to Coolify and to the
-                            server.
-                            <br />
-                            Check this <a target="_blank" class="underline"
-                                href="https://coolify.io/docs/server/openssh">documentation</a> for further help.
-                            <x-forms.input readonly id="serverPublicKey"></x-forms.input>
-                            <x-forms.button class="lg:w-64 box" wire:target="setServerType('localhost')"
-                                wire:click="setServerType('localhost')">Check again
+                    @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" wire:target="setPrivateKey('own')"
+                        wire:click="setPrivateKey('own')">Yes
+                    </x-forms.button>
+                    <x-forms.button class="justify-center lg:w-64 box" 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" wire:click="createNewServer">No (create
+                                one
+                                for
+                                me)
                             </x-forms.button>
-                        @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>
-            @endif
-        </div>
-        <div>
-            @if ($state === '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" wire:target="setPrivateKey('own')"
-                            wire:click="setPrivateKey('own')">Yes
-                        </x-forms.button>
-                        <x-forms.button class="justify-center lg:w-64 box" 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>
+                        </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 SSH Key</x-forms.button>
+                                <x-forms.button type="submit">Use this Server</x-forms.button>
+                            </form>
+                        </div>
+                    </div>
+                    @if (!$serverReachable)
+                        This server is not reachable with the following public key.
+                        <br /> <br />
+                        Please make sure you have the correct public key in your ~/.ssh/authorized_keys file for
+                        user
+                        'root' or skip the boarding process and add a new private key manually to Coolify and to the
+                        server.
+                        <x-forms.input readonly id="serverPublicKey"></x-forms.input>
+                        <x-forms.button class="w-64 box" wire:target="validateServer" wire:click="validateServer">Check
+                            again
+                        </x-forms.button>
+                    @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:pr-10">
+                        <div class="flex flex-col gap-2 lg:flex-row">
+                            <x-forms.input required placeholder="Choose a name for your Server. Could be anything."
+                                label="Name" id="remoteServerName" />
+                            <x-forms.input placeholder="Description, so others will know more about this."
+                                label="Description" id="remoteServerDescription" />
+                        </div>
+                        <div class="flex flex-col gap-2 lg:flex-row ">
+                            <x-forms.input required placeholder="127.0.0.1" label="IP Address" id="remoteServerHost" />
+                            <x-forms.input required placeholder="Port number of your server. Default is 22."
+                                label="Port" id="remoteServerPort" />
+                            <x-forms.input required readonly
+                                placeholder="Username to connect to your server. Default is root." label="Username"
+                                id="remoteServerUser" />
+                        </div>
+                        <div class="lg:w-64">
+                            <x-forms.checkbox
+                                helper="If you are using Cloudflare Tunnels, enable this. It will proxy all ssh requests to your server through Cloudflare.<br><span class='dark:text-warning'>Coolify does not install/setup Cloudflare (cloudflared) on your server.</span>"
+                                id="isCloudflareTunnel" label="Cloudflare Tunnel" />
+                        </div>
+                        <x-forms.button type="submit">Continue</x-forms.button>
+                    </form>
+                </x-slot:actions>
+                <x-slot:explanation>
+                    <p>Username should be <x-highlighted text="root" /> for now. We are working on to use
+                        non-root users.</p>
+                </x-slot:explanation>
+            </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 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: 22<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" 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
-                    </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>
-            @endif
-        </div>
-        <div>
-            @if ($state === '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" 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>
-                        </div>
-                        @if (!$serverReachable)
-                            This server is not reachable with the following public key.
-                            <br /> <br />
-                            Please make sure you have the correct public key in your ~/.ssh/authorized_keys file for
-                            user
-                            'root' or skip the boarding process and add a new private key manually to Coolify and to the
-                            server.
-                            <x-forms.input readonly id="serverPublicKey"></x-forms.input>
-                            <x-forms.button class="w-64 box" wire:target="validateServer"
-                                wire:click="validateServer">Check
-                                again
-                            </x-forms.button>
-                        @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>
-            @endif
-        </div>
-        <div>
-            @if ($state === '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>
-            @endif
-        </div>
-        <div>
-            @if ($state === '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:pr-10">
-                            <div class="flex flex-col gap-2 lg:flex-row">
-                                <x-forms.input required placeholder="Choose a name for your Server. Could be anything."
-                                    label="Name" id="remoteServerName" />
-                                <x-forms.input placeholder="Description, so others will know more about this."
-                                    label="Description" id="remoteServerDescription" />
-                            </div>
-                            <div class="flex flex-col gap-2 lg:flex-row ">
-                                <x-forms.input required placeholder="127.0.0.1" label="IP Address"
-                                    id="remoteServerHost" />
-                                <x-forms.input required placeholder="Port number of your server. Default is 22."
-                                    label="Port" id="remoteServerPort" />
-                                <x-forms.input required readonly
-                                    placeholder="Username to connect to your server. Default is root."
-                                    label="Username" id="remoteServerUser" />
-                            </div>
-                            <div class="lg:w-64">
-                                <x-forms.checkbox
-                                    helper="If you are using Cloudflare Tunnels, enable this. It will proxy all ssh requests to your server through Cloudflare.<br><span class='dark:text-warning'>Coolify does not install/setup Cloudflare (cloudflared) on your server.</span>"
-                                    id="isCloudflareTunnel" label="Cloudflare Tunnel" />
-                            </div>
-                            <x-forms.button type="submit">Continue</x-forms.button>
-                        </form>
-                    </x-slot:actions>
-                    <x-slot:explanation>
-                        <p>Username should be <x-highlighted text="root" /> for now. We are working on to use
-                            non-root users.</p>
-                    </x-slot:explanation>
-                </x-boarding-step>
-            @endif
-        </div>
-        <div>
-            @if ($state === '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 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: 22<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>
-            @endif
-        </div>
-        <div>
-            @if ($state === '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" 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>
-            @endif
-        </div>
-        <div>
-            @if ($state === '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" 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>
-                </x-slot:content>
-                <livewire:help />
-            </x-modal-input>
+                </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" 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>
+            </x-slot:content>
+            <livewire:help />
+        </x-modal-input>
+    </div>
     </div>
 </section>