diff --git a/app/Http/Controllers/Controller.php b/app/Http/Controllers/Controller.php
index e92a29fc2..e3d8420ab 100644
--- a/app/Http/Controllers/Controller.php
+++ b/app/Http/Controllers/Controller.php
@@ -48,23 +48,6 @@ public function license()
     public function force_passoword_reset() {
         return view('auth.force-password-reset');
     }
-    // public function dashboard()
-    // {
-    //     $projects = Project::ownedByCurrentTeam()->get();
-    //     $servers = Server::ownedByCurrentTeam()->get();
-    //     $s3s = S3Storage::ownedByCurrentTeam()->get();
-    //     $resources = 0;
-    //     foreach ($projects as $project) {
-    //         $resources += $project->applications->count();
-    //         $resources += $project->postgresqls->count();
-    //     }
-    //     return view('dashboard', [
-    //         'servers' => $servers->count(),
-    //         'projects' => $projects->count(),
-    //         'resources' => $resources,
-    //         's3s' => $s3s,
-    //     ]);
-    // }
     public function boarding() {
         if (currentTeam()->boarding || isDev()) {
             return view('boarding');
diff --git a/app/Http/Livewire/Boarding/Index.php b/app/Http/Livewire/Boarding/Index.php
new file mode 100644
index 000000000..d704f4f02
--- /dev/null
+++ b/app/Http/Livewire/Boarding/Index.php
@@ -0,0 +1,183 @@
+<?php
+
+namespace App\Http\Livewire\Boarding;
+use App\Actions\Server\InstallDocker;
+use App\Models\PrivateKey;
+use App\Models\Project;
+use App\Models\Server;
+use Livewire\Component;
+
+class Index extends Component
+{  public string $currentState = 'welcome';
+
+    public ?string $privateKeyType = null;
+    public ?string $privateKey = null;
+    public ?string $publicKey = null;
+    public ?string $privateKeyName = null;
+    public ?string $privateKeyDescription = null;
+    public ?PrivateKey $createdPrivateKey = null;
+
+    public ?string $remoteServerName = null;
+    public ?string $remoteServerDescription = null;
+    public ?string $remoteServerHost = null;
+    public ?int    $remoteServerPort = 22;
+    public ?string $remoteServerUser = 'root';
+    public ?Server $createdServer = null;
+
+    public ?Project $createdProject = null;
+
+    public function mount()
+    {
+        $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';
+        }
+    }
+    public function restartBoarding()
+    {
+        if ($this->createdServer) {
+            $this->createdServer->delete();
+        }
+        if ($this->createdPrivateKey) {
+            $this->createdPrivateKey->delete();
+        }
+        return redirect()->route('boarding');
+    }
+    public function skipBoarding()
+    {
+        currentTeam()->update([
+            'show_boarding' => false
+        ]);
+        refreshSession();
+        return redirect()->route('dashboard');
+    }
+    public function setServer(string $type)
+    {
+        if ($type === 'localhost') {
+            $this->createdServer = Server::find(0);
+            if (!$this->createdServer) {
+                return $this->emit('error', 'Localhost server is not found. Something went wrong during installation. Please try to reinstall or contact support.');
+            }
+            $this->currentState = 'select-proxy';
+        } elseif ($type === 'remote') {
+            $this->currentState = 'private-key';
+        }
+    }
+    public function setPrivateKey(string $type)
+    {
+        $this->privateKeyType = $type;
+        if ($type === 'create' && !isDev()) {
+            $this->createNewPrivateKey();
+        }
+        $this->currentState = 'create-private-key';
+    }
+    public function savePrivateKey()
+    {
+        $this->validate([
+            'privateKeyName' => 'required',
+            'privateKey' => 'required',
+        ]);
+        $this->currentState = 'create-server';
+    }
+    public function saveServer()
+    {
+        $this->validate([
+            'remoteServerName' => 'required',
+            'remoteServerHost' => 'required',
+            'remoteServerPort' => 'required',
+            'remoteServerUser' => 'required',
+        ]);
+        $this->privateKey = formatPrivateKey($this->privateKey);
+        $this->createdPrivateKey = PrivateKey::create([
+            'name' => $this->privateKeyName,
+            'description' => $this->privateKeyDescription,
+            'private_key' => $this->privateKey,
+            'team_id' => currentTeam()->id
+        ]);
+        $this->createdServer = Server::create([
+            'name' => $this->remoteServerName,
+            'ip' => $this->remoteServerHost,
+            'port' => $this->remoteServerPort,
+            'user' => $this->remoteServerUser,
+            'description' => $this->remoteServerDescription,
+            'private_key_id' => $this->createdPrivateKey->id,
+            'team_id' => currentTeam()->id
+        ]);
+        try {
+            ['uptime' => $uptime, 'dockerVersion' => $dockerVersion] = validateServer($this->createdServer);
+            if (!$uptime) {
+                $this->createdServer->delete();
+                $this->createdPrivateKey->delete();
+                throw new \Exception('Server is not reachable.');
+            } else {
+                $this->createdServer->settings->update([
+                    'is_reachable' => true,
+                ]);
+                $this->emit('success', 'Server is reachable.');
+            }
+            if ($dockerVersion) {
+                $this->emit('error', 'Docker is not installed on the server.');
+                $this->currentState = 'install-docker';
+                return;
+            }
+        } catch (\Exception $e) {
+            return general_error_handler(customErrorMessage: "Server is not reachable. Reason: {$e->getMessage()}", that: $this);
+        }
+    }
+    public function installDocker()
+    {
+        $activity = resolve(InstallDocker::class)($this->createdServer, currentTeam());
+        $this->emit('newMonitorActivity', $activity->id);
+        $this->currentState = 'select-proxy';
+    }
+    public function selectProxy(string|null $proxyType = null)
+    {
+        if (!$proxyType) {
+            return $this->currentState = 'create-project';
+        }
+        $this->createdServer->proxy->type = $proxyType;
+        $this->createdServer->proxy->status = 'exited';
+        $this->createdServer->save();
+        $this->currentState = 'create-project';
+    }
+    public function createNewProject()
+    {
+        $this->createdProject = Project::create([
+            'name' => "My first project",
+            'team_id' => currentTeam()->id
+        ]);
+        $this->currentState = 'create-resource';
+    }
+    public function showNewResource()
+    {
+        $this->skipBoarding();
+        return redirect()->route(
+            'project.resources.new',
+            [
+                'project_uuid' => $this->createdProject->uuid,
+                'environment_name' => 'production',
+
+            ]
+        );
+    }
+    private function createNewPrivateKey()
+    {
+        $this->privateKeyName = generate_random_name();
+        $this->privateKeyDescription = 'Created by Coolify';
+        ['private' => $this->privateKey, 'public'=> $this->publicKey] = generateSSHKey();
+    }
+    public function render()
+    {
+        return view('livewire.boarding.index')->layout('layouts.boarding');
+    }
+}
diff --git a/resources/views/boarding.blade.php b/resources/views/boarding.blade.php
deleted file mode 100644
index bdf229935..000000000
--- a/resources/views/boarding.blade.php
+++ /dev/null
@@ -1,13 +0,0 @@
-<x-layout-simple>
-    <livewire:boarding />
-    <x-modal modalId="installDocker">
-        <x-slot:modalBody>
-            <livewire:activity-monitor header="Installing Docker Logs" />
-        </x-slot:modalBody>
-        <x-slot:modalSubmit>
-            <x-forms.button onclick="installDocker.close()" type="submit">
-                Close
-            </x-forms.button>
-        </x-slot:modalSubmit>
-    </x-modal>
-</x-layout-simple>
diff --git a/resources/views/components/layout-simple.blade.php b/resources/views/components/layout-simple.blade.php
index cf1328b32..538b357f0 100644
--- a/resources/views/components/layout-simple.blade.php
+++ b/resources/views/components/layout-simple.blade.php
@@ -1,68 +1 @@
-<!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="preconnect" href="https://api.fonts.coollabs.io" crossorigin>
-    <link href="https://api.fonts.coollabs.io/css2?family=Inter&display=swap" rel="stylesheet">
-    @env('local')
-    <title>Coolify - localhost</title>
-    <link rel="icon" href="{{ asset('favicon-dev.png') }}" type="image/x-icon" />
-    @else
-    <title>{{ $title ?? 'Coolify' }}</title>
-    <link rel="icon" href="{{ asset('coolify-transparent.png') }}" type="image/x-icon" />
-    @endenv
-    <meta name="csrf-token" content="{{ csrf_token() }}">
-    @vite(['resources/js/app.js', 'resources/css/app.css'])
-    <style>
-        [x-cloak] {
-            display: none !important;
-        }
-    </style>
-    @livewireStyles
-</head>
-
-<body>
-    @livewireScripts
-    <x-toaster-hub />
-    <main>
-        {{ $slot }}
-    </main>
-    <x-version class="fixed left-2 bottom-1" />
-    <script>
-        Livewire.on('info', (message) => {
-            if (message) Toaster.info(message)
-        })
-        Livewire.on('error', (message) => {
-            if (message) Toaster.error(message)
-        })
-        Livewire.on('warning', (message) => {
-            if (message) Toaster.warning(message)
-        })
-        Livewire.on('success', (message) => {
-            if (message) Toaster.success(message)
-        })
-
-        function changePasswordFieldType(event) {
-            let element = event.target
-            for (let i = 0; i < 10; i++) {
-                if (element.className === "relative") {
-                    break;
-                }
-                element = element.parentElement;
-            }
-            element = element.children[1];
-            if (element.nodeName === 'INPUT') {
-                if (element.type === 'password') {
-                    element.type = 'text';
-                } else {
-                    element.type = 'password';
-                }
-            }
-        }
-    </script>
-
-</body>
-
-</html>
+@extends('layouts.simple')
diff --git a/resources/views/components/layout-subscription.blade.php b/resources/views/components/layout-subscription.blade.php
index a3b0bf806..5fdd838af 100644
--- a/resources/views/components/layout-subscription.blade.php
+++ b/resources/views/components/layout-subscription.blade.php
@@ -1,86 +1 @@
-<!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="preconnect" href="https://api.fonts.coollabs.io" crossorigin>
-    <link href="https://api.fonts.coollabs.io/css2?family=Inter&display=swap" rel="stylesheet">
-    @env('local')
-    <title>Coolify - localhost</title>
-    <link rel="icon" href="{{ asset('favicon-dev.png') }}" type="image/x-icon" />
-@else
-    <title>{{ $title ?? 'Coolify' }}</title>
-    <link rel="icon" href="{{ asset('coolify-transparent.png') }}" type="image/x-icon" />
-    @endenv
-    <meta name="csrf-token" content="{{ csrf_token() }}">
-    @vite(['resources/js/app.js', 'resources/css/app.css'])
-    <style>
-        [x-cloak] {
-            display: none !important;
-        }
-    </style>
-    @livewireStyles
-</head>
-
-<body>
-    @livewireScripts
-    <x-toaster-hub />
-    @if (isSubscriptionOnGracePeriod())
-        <div class="fixed top-3 left-4" id="vue">
-            <magic-bar></magic-bar>
-        </div>
-        <x-navbar />
-    @else
-        <x-navbar-subscription />
-    @endif
-
-    <main class="main max-w-screen-2xl">
-        {{ $slot }}
-    </main>
-    <x-version class="fixed left-2 bottom-1" />
-    <script>
-        function changePasswordFieldType(event) {
-            let element = event.target
-            for (let i = 0; i < 10; i++) {
-                if (element.className === "relative") {
-                    break;
-                }
-                element = element.parentElement;
-            }
-            element = element.children[1];
-            if (element.nodeName === 'INPUT') {
-                if (element.type === 'password') {
-                    element.type = 'text';
-                } else {
-                    element.type = 'password';
-                }
-            }
-        }
-
-        Livewire.on('reloadWindow', (timeout) => {
-            if (timeout) {
-                setTimeout(() => {
-                    window.location.reload();
-                }, timeout);
-                return;
-            } else {
-                window.location.reload();
-            }
-        })
-        Livewire.on('info', (message) => {
-            if (message) Toaster.info(message)
-        })
-        Livewire.on('error', (message) => {
-            if (message) Toaster.error(message)
-        })
-        Livewire.on('warning', (message) => {
-            if (message) Toaster.warning(message)
-        })
-        Livewire.on('success', (message) => {
-            if (message) Toaster.success(message)
-        })
-    </script>
-</body>
-
-</html>
+@extends('layouts.subscription')
diff --git a/resources/views/components/layout.blade.php b/resources/views/components/layout.blade.php
index 32fc1c73f..f16b07f50 100644
--- a/resources/views/components/layout.blade.php
+++ b/resources/views/components/layout.blade.php
@@ -1,133 +1 @@
-<!DOCTYPE html>
-<html data-theme="coollabs" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="preconnect" href="https://api.fonts.coollabs.io" crossorigin>
-    <link href="https://api.fonts.coollabs.io/css2?family=Inter&display=swap" rel="stylesheet">
-    @env('local')
-    <title>Coolify - localhost</title>
-    <link rel="icon" href="{{ asset('favicon-dev.png') }}" type="image/x-icon" />
-@else
-    <title>{{ $title ?? 'Coolify' }}</title>
-    <link rel="icon" href="{{ asset('coolify-transparent.png') }}" type="image/x-icon" />
-    @endenv
-    <meta name="csrf-token" content="{{ csrf_token() }}">
-    @vite(['resources/js/app.js', 'resources/css/app.css'])
-    <style>
-        [x-cloak] {
-            display: none !important;
-        }
-    </style>
-    @livewireStyles
-</head>
-
-<body>
-    @livewireScripts
-    @auth
-        <x-toaster-hub />
-        <x-navbar />
-        <div class="fixed top-3 left-4" id="vue">
-            <magic-bar></magic-bar>
-        </div>
-        <main class="main max-w-screen-2xl">
-            {{ $slot }}
-        </main>
-        <x-version class="fixed left-2 bottom-1" />
-        <script>
-            let checkHealthInterval = null;
-            let checkIfIamDeadInterval = null;
-
-            function changePasswordFieldType(event) {
-                let element = event.target
-                for (let i = 0; i < 10; i++) {
-                    if (element.className === "relative") {
-                        break;
-                    }
-                    element = element.parentElement;
-                }
-                element = element.children[1];
-                if (element.nodeName === 'INPUT') {
-                    if (element.type === 'password') {
-                        element.type = 'text';
-                    } else {
-                        element.type = 'password';
-                    }
-                }
-            }
-
-            function revive() {
-                if (checkHealthInterval) return true;
-                console.log('Checking server\'s health...')
-                checkHealthInterval = setInterval(() => {
-                    fetch('/api/health')
-                        .then(response => {
-                            if (response.ok) {
-                                Toaster.success('Coolify is back online. Reloading...')
-                                if (checkHealthInterval) clearInterval(checkHealthInterval);
-                                setTimeout(() => {
-                                    window.location.reload();
-                                }, 5000)
-                            } else {
-                                console.log('Waiting for server to come back from dead...');
-                            }
-                        })
-
-                }, 2000);
-            }
-
-            function upgrade() {
-                if (checkIfIamDeadInterval) return true;
-                console.log('Update initiated.')
-                checkIfIamDeadInterval = setInterval(() => {
-                    fetch('/api/health')
-                        .then(response => {
-                            if (response.ok) {
-                                console.log('It\'s alive. Waiting for server to be dead...');
-                            } else {
-                                Toaster.success('Update done, restarting Coolify!')
-                                console.log('It\'s dead. Reviving... Standby... Bzz... Bzz...')
-                                if (checkIfIamDeadInterval) clearInterval(checkIfIamDeadInterval);
-                                revive();
-                            }
-                        })
-
-                }, 2000);
-            }
-
-            function copyToClipboard(text) {
-                navigator.clipboard.writeText(text);
-                Livewire.emit('message', 'Copied to clipboard.');
-            }
-
-            Livewire.on('reloadWindow', (timeout) => {
-                if (timeout) {
-                    setTimeout(() => {
-                        window.location.reload();
-                    }, timeout);
-                    return;
-                } else {
-                    window.location.reload();
-                }
-            })
-            Livewire.on('info', (message) => {
-                if (message) Toaster.info(message)
-            })
-            Livewire.on('error', (message) => {
-                if (message) Toaster.error(message)
-            })
-            Livewire.on('warning', (message) => {
-                if (message) Toaster.warning(message)
-            })
-            Livewire.on('success', (message) => {
-                if (message) Toaster.success(message)
-            })
-        </script>
-    @endauth
-    @guest
-        {{ $slot }}
-    @endguest
-</body>
-
-</html>
+@extends('layouts.app')
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 32fc1c73f..e825b5493 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -1,133 +1,11 @@
-<!DOCTYPE html>
-<html data-theme="coollabs" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="preconnect" href="https://api.fonts.coollabs.io" crossorigin>
-    <link href="https://api.fonts.coollabs.io/css2?family=Inter&display=swap" rel="stylesheet">
-    @env('local')
-    <title>Coolify - localhost</title>
-    <link rel="icon" href="{{ asset('favicon-dev.png') }}" type="image/x-icon" />
-@else
-    <title>{{ $title ?? 'Coolify' }}</title>
-    <link rel="icon" href="{{ asset('coolify-transparent.png') }}" type="image/x-icon" />
-    @endenv
-    <meta name="csrf-token" content="{{ csrf_token() }}">
-    @vite(['resources/js/app.js', 'resources/css/app.css'])
-    <style>
-        [x-cloak] {
-            display: none !important;
-        }
-    </style>
-    @livewireStyles
-</head>
-
-<body>
-    @livewireScripts
-    @auth
-        <x-toaster-hub />
-        <x-navbar />
-        <div class="fixed top-3 left-4" id="vue">
-            <magic-bar></magic-bar>
-        </div>
-        <main class="main max-w-screen-2xl">
-            {{ $slot }}
-        </main>
-        <x-version class="fixed left-2 bottom-1" />
-        <script>
-            let checkHealthInterval = null;
-            let checkIfIamDeadInterval = null;
-
-            function changePasswordFieldType(event) {
-                let element = event.target
-                for (let i = 0; i < 10; i++) {
-                    if (element.className === "relative") {
-                        break;
-                    }
-                    element = element.parentElement;
-                }
-                element = element.children[1];
-                if (element.nodeName === 'INPUT') {
-                    if (element.type === 'password') {
-                        element.type = 'text';
-                    } else {
-                        element.type = 'password';
-                    }
-                }
-            }
-
-            function revive() {
-                if (checkHealthInterval) return true;
-                console.log('Checking server\'s health...')
-                checkHealthInterval = setInterval(() => {
-                    fetch('/api/health')
-                        .then(response => {
-                            if (response.ok) {
-                                Toaster.success('Coolify is back online. Reloading...')
-                                if (checkHealthInterval) clearInterval(checkHealthInterval);
-                                setTimeout(() => {
-                                    window.location.reload();
-                                }, 5000)
-                            } else {
-                                console.log('Waiting for server to come back from dead...');
-                            }
-                        })
-
-                }, 2000);
-            }
-
-            function upgrade() {
-                if (checkIfIamDeadInterval) return true;
-                console.log('Update initiated.')
-                checkIfIamDeadInterval = setInterval(() => {
-                    fetch('/api/health')
-                        .then(response => {
-                            if (response.ok) {
-                                console.log('It\'s alive. Waiting for server to be dead...');
-                            } else {
-                                Toaster.success('Update done, restarting Coolify!')
-                                console.log('It\'s dead. Reviving... Standby... Bzz... Bzz...')
-                                if (checkIfIamDeadInterval) clearInterval(checkIfIamDeadInterval);
-                                revive();
-                            }
-                        })
-
-                }, 2000);
-            }
-
-            function copyToClipboard(text) {
-                navigator.clipboard.writeText(text);
-                Livewire.emit('message', 'Copied to clipboard.');
-            }
-
-            Livewire.on('reloadWindow', (timeout) => {
-                if (timeout) {
-                    setTimeout(() => {
-                        window.location.reload();
-                    }, timeout);
-                    return;
-                } else {
-                    window.location.reload();
-                }
-            })
-            Livewire.on('info', (message) => {
-                if (message) Toaster.info(message)
-            })
-            Livewire.on('error', (message) => {
-                if (message) Toaster.error(message)
-            })
-            Livewire.on('warning', (message) => {
-                if (message) Toaster.warning(message)
-            })
-            Livewire.on('success', (message) => {
-                if (message) Toaster.success(message)
-            })
-        </script>
-    @endauth
-    @guest
+@extends('layouts.base')
+@section('body')
+    @parent
+    <x-navbar />
+    <div class="fixed top-3 left-4" id="vue">
+        <magic-bar></magic-bar>
+    </div>
+    <main class="main max-w-screen-2xl">
         {{ $slot }}
-    @endguest
-</body>
-
-</html>
+    </main>
+@endsection
diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php
new file mode 100644
index 000000000..a8e2f941d
--- /dev/null
+++ b/resources/views/layouts/base.blade.php
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="preconnect" href="https://api.fonts.coollabs.io" crossorigin>
+    <link href="https://api.fonts.coollabs.io/css2?family=Inter&display=swap" rel="stylesheet">
+    <title>Coolify</title>
+    @env('local')
+    <link rel="icon" href="{{ asset('favicon-dev.png') }}" type="image/x-icon" />
+@else
+    <link rel="icon" href="{{ asset('coolify-transparent.png') }}" type="image/x-icon" />
+    @endenv
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    @vite(['resources/js/app.js', 'resources/css/app.css'])
+    <style>
+        [x-cloak] {
+            display: none !important;
+        }
+    </style>
+    @livewireStyles
+</head>
+@section('body')
+
+    <body>
+        @livewireScripts
+        @auth
+            <x-toaster-hub />
+            <x-version class="fixed left-2 bottom-1" />
+            <script>
+                let checkHealthInterval = null;
+                let checkIfIamDeadInterval = null;
+
+                function changePasswordFieldType(event) {
+                    let element = event.target
+                    for (let i = 0; i < 10; i++) {
+                        if (element.className === "relative") {
+                            break;
+                        }
+                        element = element.parentElement;
+                    }
+                    element = element.children[1];
+                    if (element.nodeName === 'INPUT') {
+                        if (element.type === 'password') {
+                            element.type = 'text';
+                        } else {
+                            element.type = 'password';
+                        }
+                    }
+                }
+
+                function copyToClipboard(text) {
+                    navigator.clipboard.writeText(text);
+                    Livewire.emit('message', 'Copied to clipboard.');
+                }
+
+                Livewire.on('reloadWindow', (timeout) => {
+                    if (timeout) {
+                        setTimeout(() => {
+                            window.location.reload();
+                        }, timeout);
+                        return;
+                    } else {
+                        window.location.reload();
+                    }
+                })
+                Livewire.on('info', (message) => {
+                    if (message) Toaster.info(message)
+                })
+                Livewire.on('error', (message) => {
+                    if (message) Toaster.error(message)
+                })
+                Livewire.on('warning', (message) => {
+                    if (message) Toaster.warning(message)
+                })
+                Livewire.on('success', (message) => {
+                    if (message) Toaster.success(message)
+                })
+            </script>
+        @endauth
+        @guest
+            {{ $slot }}
+        @endguest
+    </body>
+@show
+
+</html>
diff --git a/resources/views/layouts/boarding.blade.php b/resources/views/layouts/boarding.blade.php
new file mode 100644
index 000000000..a63d26a41
--- /dev/null
+++ b/resources/views/layouts/boarding.blade.php
@@ -0,0 +1,9 @@
+@extends('layouts.base')
+@section('body')
+<main class="min-h-screen hero">
+    <div class="hero-content">
+        {{ $slot }}
+    </div>
+</main>
+@parent
+@endsection
diff --git a/resources/views/layouts/simple.blade.php b/resources/views/layouts/simple.blade.php
new file mode 100644
index 000000000..c3a25cda8
--- /dev/null
+++ b/resources/views/layouts/simple.blade.php
@@ -0,0 +1,7 @@
+@extends('layouts.base')
+@section('body')
+    @parent
+    <main>
+        {{ $slot }}
+    </main>
+@endsection
diff --git a/resources/views/layouts/subscription.blade.php b/resources/views/layouts/subscription.blade.php
new file mode 100644
index 000000000..2feb5199b
--- /dev/null
+++ b/resources/views/layouts/subscription.blade.php
@@ -0,0 +1,16 @@
+@extends('layouts.base')
+@section('body')
+    @parent
+    @if (isSubscriptionOnGracePeriod())
+        <div class="fixed top-3 left-4" id="vue">
+            <magic-bar></magic-bar>
+        </div>
+        <x-navbar />
+    @else
+        <x-navbar-subscription />
+    @endif
+
+    <main class="main max-w-screen-2xl">
+        {{ $slot }}
+    </main>
+@endsection
diff --git a/resources/views/livewire/boarding.blade.php b/resources/views/livewire/boarding.blade.php
deleted file mode 100644
index c6482cbeb..000000000
--- a/resources/views/livewire/boarding.blade.php
+++ /dev/null
@@ -1,195 +0,0 @@
-@php use App\Enums\ProxyTypes; @endphp
-<div class="min-h-screen hero">
-    <div class="hero-content">
-        <div>
-            @if ($currentState === 'welcome')
-                <h1 class="text-5xl font-bold">Welcome to Coolify</h1>
-                <p class="py-6 text-xl text-center">Let me help you to set the basics.</p>
-                <div class="flex justify-center ">
-                    <div class="justify-center box" wire:click="$set('currentState', 'select-server')">Get Started
-                    </div>
-                </div>
-            @endif
-            @if ($currentState === 'select-server')
-                <x-boarding-step title="Server">
-                    <x-slot:question>
-                        Do you want to deploy your resources on your <x-highlighted text="Localhost" />
-                        or on a <x-highlighted text="Remote Server" />?
-                    </x-slot:question>
-                    <x-slot:actions>
-                        <div class="justify-center box" wire:click="setServer('localhost')">Localhost
-                        </div>
-                        <div class="justify-center box" wire:click="setServer('remote')">Remote Server
-                        </div>
-                    </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>Localhost is the server where Coolify is running on. It is not recommended to use one server
-                            for everyting.</p>
-                        <p>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
-            @if ($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>
-                        <div class="justify-center box" wire:click="setPrivateKey('own')">Yes
-                        </div>
-                        <div class="justify-center box" wire:click="setPrivateKey('create')">No (create one for me)
-                        </div>
-                    </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="text-warning">~/.ssh/authorized_keys</code> file.
-                        </p>
-                    </x-slot:explanation>
-                </x-boarding-step>
-            @endif
-            @if ($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.prevent='savePrivateKey' class="flex flex-col w-full gap-4 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' && !isDev())
-                            <span class="font-bold text-warning">Copy this to your server's ~/.ssh/authorized_keys file.</span>
-                                <x-forms.textarea rows="7" readonly label="Public Key" id="publicKey" />
-                            @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
-            @if ($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.prevent='saveServer' class="flex flex-col w-full gap-4 pr-10">
-                            <div class="flex gap-2">
-                                <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 gap-2">
-                                <x-forms.input required placeholder="Hostname or IP address"
-                                    label="Hostname or 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>
-                            <x-forms.button type="submit">Save</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
-            @if ($currentState === 'install-docker')
-                <x-boarding-step title="Install Docker">
-                    <x-slot:question>
-                        Could not find Docker Engine on your server. Do you want me to install it for you?
-                    </x-slot:question>
-                    <x-slot:actions>
-                        <div class="justify-center box" wire:click="installDocker" onclick="installDocker.showModal()">
-                            Let's do
-                            it!</div>
-                    </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.</p>
-                    </x-slot:explanation>
-                </x-boarding-step>
-            @endif
-            @if ($currentState === 'select-proxy')
-                <x-boarding-step title="Select a Proxy">
-                    <x-slot:question>
-                        If you would like to attach any kind of domain to your resources, you need a proxy.
-                    </x-slot:question>
-                    <x-slot:actions>
-                        <x-forms.button wire:click="selectProxy" class="w-64 box">
-                            Decide later
-                        </x-forms.button>
-                        <x-forms.button class="w-32 box" wire:click="selectProxy('{{ ProxyTypes::TRAEFIK_V2 }}')">
-                            Traefik
-                            v2
-                        </x-forms.button>
-                        <x-forms.button disabled class="w-32 box">
-                            Nginx
-                        </x-forms.button>
-                        <x-forms.button disabled class="w-32 box">
-                            Caddy
-                        </x-forms.button>
-                    </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.</p>
-                    </x-slot:explanation>
-                </x-boarding-step>
-            @endif
-            @if ($currentState === 'create-project')
-                <x-boarding-step title="Project">
-                    <x-slot:question>
-                        I will create an initial project for you. You can change all the details later on.
-                    </x-slot:question>
-                    <x-slot:actions>
-                        <div class="justify-center box" wire:click="createNewProject">Let's do it!</div>
-                    </x-slot:actions>
-                    <x-slot:explanation>
-                        <p>Projects are bound together several resources into one virtual group. There are no
-                            limitations on the number of projects you could have.</p>
-                        <p>Each project should have at least one environment. This helps you to create a production &
-                            staging version of the same application, but grouped separately.</p>
-                    </x-slot:explanation>
-                </x-boarding-step>
-            @endif
-            @if ($currentState === 'create-resource')
-                <x-boarding-step title="Resources">
-                    <x-slot:question>
-                        I will redirect you to the new resource page, where you can create your first resource.
-                    </x-slot:question>
-                    <x-slot:actions>
-                        <div class="justify-center 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 class="flex justify-center gap-2 pt-4">
-                <a wire:click='skipBoarding'>Skip boarding process</a>
-                <a wire:click='restartBoarding'>Restart boarding process</a>
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/resources/views/livewire/boarding/index.blade.php b/resources/views/livewire/boarding/index.blade.php
new file mode 100644
index 000000000..4bda0e4dc
--- /dev/null
+++ b/resources/views/livewire/boarding/index.blade.php
@@ -0,0 +1,192 @@
+@php use App\Enums\ProxyTypes; @endphp
+<div>
+    @if ($currentState === 'welcome')
+        <h1 class="text-5xl font-bold">Welcome to Coolify</h1>
+        <p class="py-6 text-xl text-center">Let me help you to set the basics.</p>
+        <div class="flex justify-center ">
+            <div class="justify-center box" wire:click="$set('currentState', 'select-server')">Get Started
+            </div>
+        </div>
+    @endif
+    @if ($currentState === 'select-server')
+        <x-boarding-step title="Server">
+            <x-slot:question>
+                Do you want to deploy your resources on your <x-highlighted text="Localhost" />
+                or on a <x-highlighted text="Remote Server" />?
+            </x-slot:question>
+            <x-slot:actions>
+                <div class="justify-center box" wire:click="setServer('localhost')">Localhost
+                </div>
+                <div class="justify-center box" wire:click="setServer('remote')">Remote Server
+                </div>
+            </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>Localhost is the server where Coolify is running on. It is not recommended to use one server
+                    for everyting.</p>
+                <p>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
+    @if ($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>
+                <div class="justify-center box" wire:click="setPrivateKey('own')">Yes
+                </div>
+                <div class="justify-center box" wire:click="setPrivateKey('create')">No (create one for me)
+                </div>
+            </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="text-warning">~/.ssh/authorized_keys</code> file.
+                </p>
+            </x-slot:explanation>
+        </x-boarding-step>
+    @endif
+    @if ($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.prevent='savePrivateKey' class="flex flex-col w-full gap-4 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' && !isDev())
+                        <span class="font-bold text-warning">Copy this to your server's ~/.ssh/authorized_keys
+                            file.</span>
+                        <x-forms.textarea rows="7" readonly label="Public Key" id="publicKey" />
+                    @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
+    @if ($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.prevent='saveServer' class="flex flex-col w-full gap-4 pr-10">
+                    <div class="flex gap-2">
+                        <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 gap-2">
+                        <x-forms.input required placeholder="Hostname or IP address" label="Hostname or 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>
+                    <x-forms.button type="submit">Save</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
+    @if ($currentState === 'install-docker')
+        <x-boarding-step title="Install Docker">
+            <x-slot:question>
+                Could not find Docker Engine on your server. Do you want me to install it for you?
+            </x-slot:question>
+            <x-slot:actions>
+                <div class="justify-center box" wire:click="installDocker" onclick="installDocker.showModal()">
+                    Let's do
+                    it!</div>
+            </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.</p>
+            </x-slot:explanation>
+        </x-boarding-step>
+    @endif
+    @if ($currentState === 'select-proxy')
+        <x-boarding-step title="Select a Proxy">
+            <x-slot:question>
+                If you would like to attach any kind of domain to your resources, you need a proxy.
+            </x-slot:question>
+            <x-slot:actions>
+                <x-forms.button wire:click="selectProxy" class="w-64 box">
+                    Decide later
+                </x-forms.button>
+                <x-forms.button class="w-32 box" wire:click="selectProxy('{{ ProxyTypes::TRAEFIK_V2 }}')">
+                    Traefik
+                    v2
+                </x-forms.button>
+                <x-forms.button disabled class="w-32 box">
+                    Nginx
+                </x-forms.button>
+                <x-forms.button disabled class="w-32 box">
+                    Caddy
+                </x-forms.button>
+            </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.</p>
+            </x-slot:explanation>
+        </x-boarding-step>
+    @endif
+    @if ($currentState === 'create-project')
+        <x-boarding-step title="Project">
+            <x-slot:question>
+                I will create an initial project for you. You can change all the details later on.
+            </x-slot:question>
+            <x-slot:actions>
+                <div class="justify-center box" wire:click="createNewProject">Let's do it!</div>
+            </x-slot:actions>
+            <x-slot:explanation>
+                <p>Projects are bound together several resources into one virtual group. There are no
+                    limitations on the number of projects you could have.</p>
+                <p>Each project should have at least one environment. This helps you to create a production &
+                    staging version of the same application, but grouped separately.</p>
+            </x-slot:explanation>
+        </x-boarding-step>
+    @endif
+    @if ($currentState === 'create-resource')
+        <x-boarding-step title="Resources">
+            <x-slot:question>
+                I will redirect you to the new resource page, where you can create your first resource.
+            </x-slot:question>
+            <x-slot:actions>
+                <div class="justify-center 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 class="flex justify-center gap-2 pt-4">
+        <a wire:click='skipBoarding'>Skip boarding process</a>
+        <a wire:click='restartBoarding'>Restart boarding process</a>
+    </div>
+</div>
diff --git a/routes/web.php b/routes/web.php
index 2824a0be1..839786385 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -6,6 +6,8 @@
 use App\Http\Controllers\MagicController;
 use App\Http\Controllers\ProjectController;
 use App\Http\Controllers\ServerController;
+use App\Http\Livewire\Boarding\Index;
+use App\Http\Livewire\Boarding\Server as BoardingServer;
 use App\Http\Livewire\Dashboard;
 use App\Http\Livewire\Server\All;
 use App\Http\Livewire\Server\Show;
@@ -92,7 +94,7 @@
 
 Route::middleware(['auth'])->group(function () {
     Route::get('/', Dashboard::class)->name('dashboard');
-    Route::get('/boarding', [Controller::class, 'boarding'])->name('boarding');
+    Route::get('/boarding', Index::class)->name('boarding');
     Route::middleware(['throttle:force-password-reset'])->group(function () {
         Route::get('/force-password-reset', [Controller::class, 'force_passoword_reset'])->name('auth.force-password-reset');
     });