Merge branch 'next' into feature/oauth

2024-03-20 13:59:56 +01:00 · 2024-03-20 13:59:56 +01:00 · 3a391aa3cb
commit 3a391aa3cb
parent 42019321e3 b61860b3ab
119 changed files with 1967 additions and 1269 deletions
--- a/app/Console/Commands/Horizon.php
+++ b/app/Console/Commands/Horizon.php
@ -0,0 +1,21 @@
+<?php
+
+namespace App\Console\Commands;
+
+use Illuminate\Console\Command;
+
+class Horizon extends Command
+{
+    protected $signature = 'start:horizon';
+    protected $description = 'Start Horizon';
+    public function handle()
+    {
+        if (config('coolify.is_horizon_enabled')) {
+            $this->info('Horizon is enabled. Starting.');
+            $this->call('horizon');
+            exit(0);
+        } else {
+            exit(0);
+        }
+    }
+}
--- a/app/Console/Commands/Scheduler.php
+++ b/app/Console/Commands/Scheduler.php
@ -0,0 +1,21 @@
+<?php
+
+namespace App\Console\Commands;
+
+use Illuminate\Console\Command;
+
+class Scheduler extends Command
+{
+    protected $signature = 'start:scheduler';
+    protected $description = 'Start Scheduler';
+    public function handle()
+    {
+        if (config('coolify.is_scheduler_enabled')) {
+            $this->info('Scheduler is enabled. Starting.');
+            $this->call('schedule:work');
+            exit(0);
+        } else {
+            exit(0);
+        }
+    }
+}
--- a/app/Jobs/ApplicationDeploymentJob.php
+++ b/app/Jobs/ApplicationDeploymentJob.php
@ -298,6 +298,8 @@ public function handle(): void
                    "ignore_errors" => true,
                ]
            );
+
+
            // $this->execute_remote_command(
            //     [
            //         "docker image prune -f >/dev/null 2>&1",
@ -305,6 +307,8 @@ public function handle(): void
            //         "ignore_errors" => true,
            //     ]
            // );
+
+
            ApplicationStatusChanged::dispatch(data_get($this->application, 'environment.project.team.id'));
        }
    }
@ -417,7 +421,6 @@ private function deploy_docker_compose_buildpack()
                "docker network connect {$networkId} coolify-proxy || true", "hidden" => true, "ignore_errors" => true
            ]);
        }
-        $this->write_deployment_configurations();

        // Start compose file
        if ($this->application->settings->is_raw_compose_deployment_enabled) {
@ -425,7 +428,9 @@ private function deploy_docker_compose_buildpack()
                $this->execute_remote_command(
                    [executeInDocker($this->deployment_uuid, "cd {$this->workdir} && {$this->docker_compose_custom_start_command}"), "hidden" => true],
                );
+                $this->write_deployment_configurations();
            } else {
+                $this->write_deployment_configurations();
                $server_workdir = $this->application->workdir();
                ray("SOURCE_COMMIT={$this->commit} docker compose --project-directory {$server_workdir} -f {$server_workdir}{$this->docker_compose_location} up -d");
                $this->execute_remote_command(
@ -437,14 +442,15 @@ private function deploy_docker_compose_buildpack()
                $this->execute_remote_command(
                    [executeInDocker($this->deployment_uuid, "cd {$this->basedir} && {$this->docker_compose_custom_start_command}"), "hidden" => true],
                );
+                $this->write_deployment_configurations();
            } else {
                $this->execute_remote_command(
                    [executeInDocker($this->deployment_uuid, "SOURCE_COMMIT={$this->commit} docker compose --project-directory {$this->workdir} -f {$this->workdir}{$this->docker_compose_location} up -d"), "hidden" => true],
                );
+                $this->write_deployment_configurations();
            }
        }

-
        $this->application_deployment_queue->addLogEntry("New container started.");
    }
    private function deploy_dockerfile_buildpack()
@ -822,6 +828,10 @@ private function health_check()
    }
    private function deploy_pull_request()
    {
+        if ($this->application->build_pack === 'dockercompose') {
+            $this->deploy_docker_compose_buildpack();
+            return;
+        }
        if ($this->use_build_server) {
            $this->server = $this->build_server;
        }
--- a/app/Livewire/Notifications/EmailSettings.php
+++ b/app/Livewire/Notifications/EmailSettings.php
@ -119,16 +119,18 @@ public function submit()
    {
        try {
            $this->resetErrorBag();
-            $this->validate([
-                'team.smtp_from_address' => 'required|email',
-                'team.smtp_from_name' => 'required',
-                'team.smtp_host' => 'required',
-                'team.smtp_port' => 'required|numeric',
-                'team.smtp_encryption' => 'nullable',
-                'team.smtp_username' => 'nullable',
-                'team.smtp_password' => 'nullable',
-                'team.smtp_timeout' => 'nullable',
-            ]);
+            if (!$this->team->use_instance_email_settings) {
+                $this->validate([
+                    'team.smtp_from_address' => 'required|email',
+                    'team.smtp_from_name' => 'required',
+                    'team.smtp_host' => 'required',
+                    'team.smtp_port' => 'required|numeric',
+                    'team.smtp_encryption' => 'nullable',
+                    'team.smtp_username' => 'nullable',
+                    'team.smtp_password' => 'nullable',
+                    'team.smtp_timeout' => 'nullable',
+                ]);
+            }
            $this->team->save();
            refreshSession();
            $this->dispatch('success', 'Settings saved.');
--- a/app/Livewire/Project/Application/Deployment/Index.php
+++ b/app/Livewire/Project/Application/Deployment/Index.php
@ -9,7 +9,7 @@
 class Index extends Component
 {
    public Application $application;
-    public array|Collection $deployments = [];
+    public ?Collection $deployments;
    public int $deployments_count = 0;
    public string $current_url;
    public int $skip = 0;
@ -48,9 +48,9 @@ private function show_pull_request_only()
    }
    private function show_more()
    {
-        if (count($this->deployments) !== 0) {
+        if ($this->deployments->count() !== 0) {
            $this->show_next = true;
-            if (count($this->deployments) < $this->default_take) {
+            if ($this->deployments->count() < $this->default_take) {
                $this->show_next = false;
            }
            return;
@ -63,7 +63,6 @@ public function reload_deployments()
    }
    public function previous_page(?int $take = null)
    {
-
        if ($take) {
            $this->skip = $this->skip - $take;
        }
--- a/app/Livewire/Project/Shared/ScheduledTask/Add.php
+++ b/app/Livewire/Project/Shared/ScheduledTask/Add.php
@ -33,19 +33,23 @@ public function mount()

    public function submit()
    {
-        $this->validate();
-        $isValid = validate_cron_expression($this->frequency);
-        if (!$isValid) {
-            $this->dispatch('error', 'Invalid Cron / Human expression.');
-            return;
+        try {
+            $this->validate();
+            $isValid = validate_cron_expression($this->frequency);
+            if (!$isValid) {
+                $this->dispatch('error', 'Invalid Cron / Human expression.');
+                return;
+            }
+            $this->dispatch('saveScheduledTask', [
+                'name' => $this->name,
+                'command' => $this->command,
+                'frequency' => $this->frequency,
+                'container' => $this->container,
+            ]);
+            $this->clear();
+        } catch (\Exception $e) {
+            return handleError($e, $this);
        }
-        $this->dispatch('saveScheduledTask', [
-            'name' => $this->name,
-            'command' => $this->command,
-            'frequency' => $this->frequency,
-            'container' => $this->container,
-        ]);
-        $this->clear();
    }

    public function clear()
--- a/app/Livewire/Tags/Index.php
+++ b/app/Livewire/Tags/Index.php
@ -2,14 +2,73 @@

 namespace App\Livewire\Tags;

+use App\Http\Controllers\Api\Deploy;
+use App\Models\ApplicationDeploymentQueue;
 use App\Models\Tag;
+use Illuminate\Support\Collection;
+use Livewire\Attributes\Url;
 use Livewire\Component;

 class Index extends Component
 {
-    public $tags = [];
-    public function mount() {
-        $this->tags = Tag::where('team_id', currentTeam()->id)->get()->unique('name')->sortBy('name');
+    #[Url()]
+    public ?string $tag = null;
+
+    public Collection $tags;
+    public Collection $applications;
+    public Collection $services;
+    public $webhook = null;
+    public $deployments_per_tag_per_server = [];
+
+    public function updatedTag()
+    {
+        $tag = $this->tags->where('name', $this->tag)->first();
+        $this->webhook = generatTagDeployWebhook($tag->name);
+        $this->applications = $tag->applications()->get();
+        $this->services = $tag->services()->get();
+        $this->get_deployments();
+    }
+    public function get_deployments()
+    {
+        try {
+            $resource_ids = $this->applications->pluck('id');
+            $this->deployments_per_tag_per_server = ApplicationDeploymentQueue::whereIn("status", ["in_progress", "queued"])->whereIn('application_id', $resource_ids)->get([
+                "id",
+                "application_id",
+                "application_name",
+                "deployment_url",
+                "pull_request_id",
+                "server_name",
+                "server_id",
+                "status"
+            ])->sortBy('id')->groupBy('server_name')->toArray();
+        } catch (\Exception $e) {
+            return handleError($e, $this);
+        }
+    }
+    public function redeploy_all()
+    {
+        try {
+            $message = collect([]);
+            $this->applications->each(function ($resource) use ($message) {
+                $deploy = new Deploy();
+                $message->push($deploy->deploy_resource($resource));
+            });
+            $this->services->each(function ($resource) use ($message) {
+                $deploy = new Deploy();
+                $message->push($deploy->deploy_resource($resource));
+            });
+            $this->dispatch('success', 'Mass deployment started.');
+        } catch (\Exception $e) {
+            return handleError($e, $this);
+        }
+    }
+    public function mount()
+    {
+        $this->tags = Tag::ownedByCurrentTeam()->get()->unique('name')->sortBy('name');
+        if ($this->tag) {
+            $this->updatedTag();
+        }
    }
    public function render()
    {
--- a/app/View/Components/Forms/Button.php
+++ b/app/View/Components/Forms/Button.php
@ -16,7 +16,7 @@ public function __construct(
        public bool        $isModal = false,
        public bool        $noStyle = false,
        public ?string     $modalId = null,
-        public string      $defaultClass = "btn btn-primary btn-sm font-normal text-white normal-case no-animation rounded border-none"
+        public string      $defaultClass = "button"
    ) {
        if ($this->noStyle) {
            $this->defaultClass = "";
--- a/app/View/Components/Forms/Checkbox.php
+++ b/app/View/Components/Forms/Checkbox.php
@ -12,14 +12,14 @@ class Checkbox extends Component
     * Create a new component instance.
     */
    public function __construct(
-        public string|null $id = null,
-        public string|null $name = null,
-        public string|null $value = null,
-        public string|null $label = null,
-        public string|null $helper = null,
-        public string|bool        $instantSave = false,
+        public ?string     $id = null,
+        public ?string     $name = null,
+        public ?string     $value = null,
+        public ?string     $label = null,
+        public ?string     $helper = null,
+        public string|bool $instantSave = false,
        public bool        $disabled = false,
-        public string      $defaultClass = "toggle toggle-xs toggle-warning rounded disabled:bg-coolgray-200 disabled:opacity-50 placeholder:text-neutral-700",
+        public string      $defaultClass = "border-coolgray-500 text-warning focus:ring-warning dark:bg-coolgray-100 rounded cursor-pointer dark:disabled:bg-base dark:disabled:cursor-not-allowed",
    ) {
        //
    }
--- a/app/View/Components/Forms/Input.php
+++ b/app/View/Components/Forms/Input.php
@ -21,7 +21,7 @@ public function __construct(
        public ?string $helper = null,
        public bool    $allowToPeak = true,
        public bool    $isMultiline = false,
-        public string  $defaultClass = "input input-sm bg-coolgray-100 rounded text-white w-full disabled:bg-coolgray-200/50 disabled:border-none placeholder:text-coolgray-500 read-only:text-neutral-500 read-only:bg-coolgray-200/50"
+        public string  $defaultClass = "input",
    ) {
    }

--- a/app/View/Components/Forms/Select.php
+++ b/app/View/Components/Forms/Select.php
@ -14,12 +14,12 @@ class Select extends Component
     * Create a new component instance.
     */
    public function __construct(
-        public string|null $id = null,
-        public string|null $name = null,
-        public string|null $label = null,
-        public string|null $helper = null,
-        public bool        $required = false,
-        public string      $defaultClass = "select select-sm w-full rounded text-sm bg-coolgray-100 font-normal disabled:bg-coolgray-200/50 disabled:border-none"
+        public ?string $id = null,
+        public ?string $name = null,
+        public ?string $label = null,
+        public ?string $helper = null,
+        public bool    $required = false,
+        public string  $defaultClass = "block w-full py-1.5 rounded border-0 text-sm ring-inset ring-1 dark:ring-coolgray-300 dark:placeholder:text-neutral-700 focus:ring-2 focus:ring-inset dark:focus:ring-coolgray-500 dark:bg-coolgray-100 dark:text-white text-black "
    ) {
        //
    }
--- a/app/View/Components/Forms/Textarea.php
+++ b/app/View/Components/Forms/Textarea.php
@ -25,8 +25,8 @@ public function __construct(
        public ?string $helper = null,
        public bool    $realtimeValidation = false,
        public bool    $allowToPeak = true,
-        public string  $defaultClass = "textarea leading-normal bg-coolgray-100 rounded text-white w-full scrollbar disabled:bg-coolgray-200/50 disabled:border-none placeholder:text-coolgray-500 read-only:text-neutral-500 read-only:bg-coolgray-200/50",
-        public string  $defaultClassInput = "input input-sm bg-coolgray-100 rounded text-white w-full disabled:bg-coolgray-200/50 disabled:border-none placeholder:text-coolgray-500 read-only:text-neutral-500 read-only:bg-coolgray-200/50"
+        public string  $defaultClass = "block w-full py-1.5 rounded border-0 text-sm ring-inset ring-1 dark:bg-coolgray-100 dark:text-white text-black focus:ring-2 dark:focus:ring-coolgray-300 dark:ring-coolgray-300 scrollbar dark:read-only:text-neutral-500",
+        public string  $defaultClassInput = "block w-full py-1.5 rounded border-0 text-sm ring-inset ring-1 dark:bg-coolgray-100 dark:text-white text-black focus:ring-2 dark:focus:ring-coolgray-300 dark:ring-coolgray-300 dark:read-only:text-neutral-500"
    ) {
        //
    }
--- a/bootstrap/helpers/shared.php
+++ b/bootstrap/helpers/shared.php
@ -1240,84 +1240,95 @@ function parseDockerComposeFile(Service|Application $resource, bool $isNew = fal
            }
            $baseName = generateApplicationContainerName($resource, $pull_request_id);
            $containerName = "$serviceName-$baseName";
-            if ($pull_request_id !== 0) {
-                if (count($serviceVolumes) > 0) {
-                    $serviceVolumes = $serviceVolumes->map(function ($volume) use ($resource, $pull_request_id, $topLevelVolumes) {
-                        if (is_string($volume)) {
-                            $volume = str($volume);
-                            if ($volume->contains(':') && !$volume->startsWith('/')) {
-                                $name = $volume->before(':');
-                                $mount = $volume->after(':');
-                                $newName = $resource->uuid . "-{$name}-pr-$pull_request_id";
-                                $volume = str("$newName:$mount");
-                                $topLevelVolumes->put($newName, [
-                                    'name' => $newName,
-                                ]);
-                            }
-                        } else if (is_array($volume)) {
-                            $source = data_get($volume, 'source');
-                            if ($source) {
-                                $newSource = $resource->uuid . "-{$source}-pr-$pull_request_id";
-                                data_set($volume, 'source', $newSource);
-                                if (!str($source)->startsWith('/')) {
-                                    $topLevelVolumes->put($newSource, [
-                                        'name' => $newSource,
-                                    ]);
+            if (count($serviceVolumes) > 0) {
+                $serviceVolumes = $serviceVolumes->map(function ($volume) use ($resource, $topLevelVolumes, $pull_request_id) {
+                    if (is_string($volume)) {
+                        $volume = str($volume);
+                        if ($volume->contains(':') && !$volume->startsWith('/')) {
+                            $name = $volume->before(':');
+                            $mount = $volume->after(':');
+                            if ($name->startsWith('.') || $name->startsWith('~')) {
+                                $dir = base_configuration_dir() . '/applications/' . $resource->uuid;
+                                if ($name->startsWith('.')) {
+                                    $name = $name->replaceFirst('.', $dir);
                                }
-                            }
-                        }
-                        return $volume->value();
-                    });
-                    data_set($service, 'volumes', $serviceVolumes->toArray());
-                }
-            } else {
-                if (count($serviceVolumes) > 0) {
-                    $serviceVolumes = $serviceVolumes->map(function ($volume) use ($resource, $topLevelVolumes) {
-                        if (is_string($volume)) {
-                            $volume = str($volume);
-                            if ($volume->contains(':') && !$volume->startsWith('/')) {
-                                $name = $volume->before(':');
-                                $mount = $volume->after(':');
-                                if ($name->startsWith('.') || $name->startsWith('~')) {
-                                    $dir = base_configuration_dir() . '/applications/' . $resource->uuid;
-                                    if ($name->startsWith('.')) {
-                                        $name = $name->replaceFirst('.', $dir);
-                                    }
-                                    if ($name->startsWith('~')) {
-                                        $name = $name->replaceFirst('~', $dir);
-                                    }
+                                if ($name->startsWith('~')) {
+                                    $name = $name->replaceFirst('~', $dir);
+                                }
+                                if ($pull_request_id !== 0) {
+                                    $name = $name . "-pr-$pull_request_id";
+                                }
+                                $volume = str("$name:$mount");
+                            } else {
+                                if ($pull_request_id !== 0) {
+                                    $name = $name . "-pr-$pull_request_id";
                                    $volume = str("$name:$mount");
+                                    $topLevelVolumes->put($name, [
+                                        'name' => $name,
+                                    ]);
                                } else {
                                    $topLevelVolumes->put($name->value(), [
                                        'name' => $name->value(),
                                    ]);
                                }
                            }
-                        } else if (is_array($volume)) {
-                            $source = data_get($volume, 'source');
-                            if ($source) {
-                                if ((str($source)->startsWith('.') || str($source)->startsWith('~')) && !str($source)->startsWith('/')) {
-                                    $dir = base_configuration_dir() . '/applications/' . $resource->uuid;
-                                    if (str($source, '.')) {
-                                        $source = str('.', $dir, $source);
-                                    }
-                                    if (str($source, '~')) {
-                                        $source = str('~', $dir, $source);
-                                    }
-                                    data_set($volume, 'source', $source);
+                        } else {
+                            if ($volume->startsWith('/')) {
+                                $name = $volume->before(':');
+                                $mount = $volume->after(':');
+                                if ($pull_request_id !== 0) {
+                                    $name = $name . "-pr-$pull_request_id";
+                                }
+                                $volume = str("$name:$mount");
+                            }
+                        }
+
+                    } else if (is_array($volume)) {
+                        $source = data_get($volume, 'source');
+                        $target = data_get($volume, 'target');
+                        $read_only = data_get($volume, 'read_only');
+                        if ($source && $target) {
+                            if ((str($source)->startsWith('.') || str($source)->startsWith('~'))) {
+                                $dir = base_configuration_dir() . '/applications/' . $resource->uuid;
+                                if (str($source, '.')) {
+                                    $source = str($source)->replaceFirst('.', $dir);
+                                }
+                                if (str($source, '~')) {
+                                    $source = str($source)->replaceFirst('~', $dir);
+                                }
+                                if ($pull_request_id !== 0) {
+                                    $source = $source . "-pr-$pull_request_id";
+                                }
+                                if ($read_only) {
+                                    data_set($volume, 'source', $source . ':' . $target . ':ro');
                                } else {
-                                    data_set($volume, 'source', $source);
+                                    data_set($volume, 'source', $source . ':' . $target);
+                                }
+                            } else {
+                                if ($pull_request_id !== 0) {
+                                    $source = $source . "-pr-$pull_request_id";
+                                }
+                                if ($read_only) {
+                                    data_set($volume, 'source', $source . ':' . $target . ':ro');
+                                } else {
+                                    data_set($volume, 'source', $source . ':' . $target);
+                                }
+                                if (!str($source)->startsWith('/')) {
                                    $topLevelVolumes->put($source, [
                                        'name' => $source,
                                    ]);
                                }
                            }
                        }
-                        return $volume->value();
-                    });
-                    data_set($service, 'volumes', $serviceVolumes->toArray());
-                }
+                    }
+                    if (is_array($volume)) {
+                        return data_get($volume, 'source');
+                    }
+                    return $volume->value();
+                });
+                data_set($service, 'volumes', $serviceVolumes->toArray());
            }
+
            // Decide if the service is a database
            $isDatabase = isDatabaseImage(data_get_str($service, 'image'));
            data_set($service, 'is_database', $isDatabase);
@ -1602,6 +1613,12 @@ function parseDockerComposeFile(Service|Application $resource, bool $isNew = fal

            return $service;
        });
+        if ($pull_request_id !== 0) {
+            $services->each(function ($service, $serviceName) use ($pull_request_id, $services) {
+                $services[$serviceName . "-pr-$pull_request_id"] = $service;
+                data_forget($services, $serviceName);
+            });
+        }
        $finalServices = [
            'version' => $dockerComposeVersion,
            'services' => $services->toArray(),
--- a/config/coolify.php
+++ b/config/coolify.php
@ -12,4 +12,6 @@
    'is_windows_docker_desktop' => env('IS_WINDOWS_DOCKER_DESKTOP', false),
    'base_config_path' => env('BASE_CONFIG_PATH', '/data/coolify'),
    'helper_image' => env('HELPER_IMAGE', 'ghcr.io/coollabsio/coolify-helper:latest'),
+    'is_horizon_enabled' => env('HORIZON_ENABLED', true),
+    'is_scheduler_enabled' => env('SCHEDULER_ENABLED', true),
 ];
--- a/config/sentry.php
+++ b/config/sentry.php
@ -7,7 +7,7 @@

    // 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.240',
+    'release' => '4.0.0-beta.241',
    // When left empty or `null` the Laravel environment will be used
    'environment' => config('app.env'),

--- a/config/version.php
+++ b/config/version.php
@ -1,3 +1,3 @@
 <?php

-return '4.0.0-beta.240';
+return '4.0.0-beta.241';
--- a/docker/coolify-helper/Dockerfile
+++ b/docker/coolify-helper/Dockerfile
@ -2,15 +2,15 @@ FROM alpine:3.17

 ARG TARGETPLATFORM
 # https://download.docker.com/linux/static/stable/
-ARG DOCKER_VERSION=24.0.5
+ARG DOCKER_VERSION=24.0.9
 # https://github.com/docker/compose/releases
-ARG DOCKER_COMPOSE_VERSION=2.21.0
+ARG DOCKER_COMPOSE_VERSION=2.25.0
 # https://github.com/docker/buildx/releases
-ARG DOCKER_BUILDX_VERSION=0.11.2
+ARG DOCKER_BUILDX_VERSION=0.13.1
 # https://github.com/buildpacks/pack/releases
-ARG PACK_VERSION=0.32.1
+ARG PACK_VERSION=0.33.2
 # https://github.com/railwayapp/nixpacks/releases
-ARG NIXPACKS_VERSION=1.20.0
+ARG NIXPACKS_VERSION=1.21.2

 USER root
 WORKDIR /artifacts
@ -34,7 +34,7 @@ RUN if [[ ${TARGETPLATFORM} == 'linux/arm64' ]]; then \
    chmod +x ~/.docker/cli-plugins/docker-compose /usr/bin/docker /usr/local/bin/pack /root/.docker/cli-plugins/docker-buildx \
    ;fi

-COPY --from=minio/mc /usr/bin/mc /usr/bin/mc
+COPY --from=minio/mc:RELEASE.2024-03-13T23-51-57Z /usr/bin/mc /usr/bin/mc
 RUN chmod +x /usr/bin/mc

 ENTRYPOINT ["/sbin/tini", "--"]
--- a/docker/dev-ssu/Dockerfile
+++ b/docker/dev-ssu/Dockerfile
@ -2,7 +2,7 @@ FROM serversideup/php:8.2-fpm-nginx

 ARG TARGETPLATFORM
 # https://github.com/cloudflare/cloudflared/releases
-ARG CLOUDFLARED_VERSION=2023.10.0
+ARG CLOUDFLARED_VERSION=2024.2.1

 ARG POSTGRES_VERSION=15
 RUN apt-get update
@ -40,4 +40,4 @@ RUN /bin/bash -c "if [[ ${TARGETPLATFORM} == 'linux/arm64' ]]; then \
 RUN { \
    echo 'upload_max_filesize=256M'; \
    echo 'post_max_size=256M'; \
-  } > /etc/php/current_version/cli/conf.d/upload-limits.ini
+  } > /etc/php/current_version/cli/conf.d/upload-limits.ini
--- a/docker/dev-ssu/etc/s6-overlay/s6-rc.d/horizon/run
+++ b/docker/dev-ssu/etc/s6-overlay/s6-rc.d/horizon/run
@ -1,5 +1,5 @@
 #!/command/execlineb -P
 foreground {
  s6-sleep 5
-  su - webuser -c "php /var/www/html/artisan horizon"
+  su - webuser -c "php /var/www/html/artisan start:horizon"
 }
--- a/docker/dev-ssu/etc/s6-overlay/s6-rc.d/scheduler-worker/run
+++ b/docker/dev-ssu/etc/s6-overlay/s6-rc.d/scheduler-worker/run
@ -1,5 +1,5 @@
 #!/command/execlineb -P
 foreground {
  s6-sleep 5
-  su - webuser -c "php /var/www/html/artisan schedule:work"
+  su - webuser -c "php /var/www/html/artisan start:scheduler"
 }
--- a/docker/prod-ssu/Dockerfile
+++ b/docker/prod-ssu/Dockerfile
@ -4,7 +4,7 @@ WORKDIR /var/www/html
 COPY composer.json composer.lock ./
 RUN composer install --no-dev --no-interaction --no-plugins --no-scripts --prefer-dist

-FROM node:19 as static-assets
+FROM node:20 as static-assets
 WORKDIR /app
 COPY . .
 COPY --from=base --chown=9999:9999 /var/www/html .
@ -15,7 +15,7 @@ FROM serversideup/php:8.2-fpm-nginx

 ARG TARGETPLATFORM
 # https://github.com/cloudflare/cloudflared/releases
-ARG CLOUDFLARED_VERSION=2023.10.0
+ARG CLOUDFLARED_VERSION=2024.2.1
 ARG POSTGRES_VERSION=15

 WORKDIR /var/www/html
@ -66,4 +66,4 @@ RUN /bin/bash -c "if [[ ${TARGETPLATFORM} == 'linux/arm64' ]]; then \
 RUN { \
    echo 'upload_max_filesize=256M'; \
    echo 'post_max_size=256M'; \
-  } > /etc/php/current_version/cli/conf.d/upload-limits.ini
+  } > /etc/php/current_version/cli/conf.d/upload-limits.ini
--- a/package-lock.json
+++ b/package-lock.json
@ -5,6 +5,7 @@
    "packages": {
        "": {
            "dependencies": {
+                "@tailwindcss/forms": "^0.5.7",
                "@tailwindcss/typography": "0.5.10",
                "alpinejs": "3.13.5",
                "daisyui": "4.7.2",
@ -484,6 +485,17 @@
                "node": ">= 8"
            }
        },
+        "node_modules/@tailwindcss/forms": {
+            "version": "0.5.7",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz",
+            "integrity": "sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==",
+            "dependencies": {
+                "mini-svg-data-uri": "^1.2.3"
+            },
+            "peerDependencies": {
+                "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
+            }
+        },
        "node_modules/@tailwindcss/typography": {
            "version": "0.5.10",
            "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz",
@ -1462,6 +1474,14 @@
                "node": ">= 0.6"
            }
        },
+        "node_modules/mini-svg-data-uri": {
+            "version": "1.4.4",
+            "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+            "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+            "bin": {
+                "mini-svg-data-uri": "cli.js"
+            }
+        },
        "node_modules/minimatch": {
            "version": "3.1.2",
            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
--- a/package.json
+++ b/package.json
@ -18,6 +18,7 @@
        "vue": "3.4.21"
    },
    "dependencies": {
+        "@tailwindcss/forms": "^0.5.7",
        "@tailwindcss/typography": "0.5.10",
        "alpinejs": "3.13.5",
        "daisyui": "4.7.2",
--- a/resources/css/app.css
+++ b/resources/css/app.css
@ -2,22 +2,141 @@
@tailwind components;
@tailwind utilities;

-html {
-    @apply text-neutral-400;
+html,
+body {
+    @apply text-black bg-white dark:bg-base dark:text-neutral-400;
 }

 body {
    @apply text-sm antialiased scrollbar;
 }

-button[isError] {
+button[isError]:not(:disabled) {
    @apply bg-red-600 hover:bg-red-700;
 }

-button[isHighlighted] {
+button[isHighlighted]:not(:disabled) {
    @apply bg-coollabs hover:bg-coollabs-100;
 }

+.button {
+    @apply px-3 py-1.5 text-sm font-normal normal-case rounded dark:bg-coolgray-200 dark:text-white dark:hover:bg-coolgray-100 dark:disabled:bg-coolgray-100/40 dark:disabled:text-neutral-800 min-w-fit flex items-center justify-center;
+}
+
+h1 {
+    @apply text-2xl font-bold dark:text-white text-neutral-800;
+}
+
+h2 {
+    @apply text-xl font-bold dark:text-white text-neutral-800;
+}
+
+h3 {
+    @apply text-lg font-bold dark:text-white text-neutral-800;
+}
+
+h4 {
+    @apply text-base font-bold dark:text-white text-neutral-800;
+}
+
+a {
+    @apply dark:hover:text-white dark:text-neutral-400 text-neutral-600;
+}
+
+label {
+    @apply dark:text-neutral-400 text-neutral-600;
+}
+
+table {
+    @apply min-w-full divide-y divide-coolgray-200;
+}
+
+thead {
+    @apply uppercase;
+}
+
+tbody {
+    @apply divide-y divide-coolgray-200;
+}
+
+tr {
+    @apply text-neutral-400;
+}
+
+tr th {
+    @apply px-3 py-3.5 text-left text-white;
+}
+
+tr th:first-child {
+    @apply py-3.5 pl-4 pr-3 sm:pl-6;
+}
+
+tr td {
+    @apply px-3 py-4 whitespace-nowrap;
+}
+
+tr td:first-child {
+    @apply pl-4 pr-3 font-bold sm:pl-6;
+}
+
+input {
+    @apply pr-10;
+}
+.input {
+    @apply block w-full py-1.5 rounded border-0 text-sm ring-inset ring-1 dark:bg-coolgray-100 dark:text-white text-black focus:ring-2 dark:focus:ring-coolgray-300 dark:ring-coolgray-300 dark:read-only:text-neutral-500 dark:read-only:ring-0 dark:read-only:bg-coolgray-100/40 dark:placeholder:text-neutral-700;
+}
+
+option {
+    @apply text-white;
+}
+.alert-success {
+    @apply flex items-center gap-2 text-success;
+}
+.alert-error {
+    @apply flex items-center gap-2 text-error;
+}
+.dropdown-item {
+    @apply relative flex cursor-pointer select-none dark:hover:text-white dark:hover:bg-coollabs items-center px-2 py-1.5 text-xs justify-center outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 gap-2
+}
+
+.badge {
+    @apply inline-block w-3 h-3 text-xs font-bold leading-none border border-black rounded-full;
+}
+
+.badge-success {
+    @apply bg-success;
+}
+
+.badge-warning {
+    @apply bg-warning;
+}
+
+.badge-error {
+    @apply bg-error;
+}
+
+
+
+[type='checkbox']:checked {
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+
+.menu {
+    @apply flex items-center gap-1;
+}
+
+.menu-item {
+    @apply flex items-center w-full gap-2 px-4 py-1 min-w-48 hover:bg-coolgray-100 dark:hover:text-white;
+}
+
+.menu-item-active {
+    @apply rounded-none dark:bg-coolgray-200 dark:text-warning;
+}
+
+.icon {
+    @apply w-4 h-4;
+}
+
 .scrollbar {
    @apply scrollbar-thumb-coollabs-100 scrollbar-track-coolgray-200 scrollbar-w-2;
 }
@ -27,12 +146,7 @@ .main {
 }

 .custom-modal {
-    @apply flex flex-col gap-2 px-8 py-4 border bg-base-100 border-coolgray-200;
-}
-
-.label-text,
-label {
-    @apply text-neutral-400;
+    @apply z-50 flex flex-col gap-2 px-8 py-4 border dark:bg-coolgray-100 dark:border-coolgray-200;
 }

 .navbar-main {
@ -43,26 +157,6 @@ .loading {
    @apply w-4 text-warning;
 }

-h1 {
-    @apply text-3xl font-bold text-white;
-}
-
-h2 {
-    @apply text-2xl font-bold text-white;
-}
-
-h3 {
-    @apply text-xl font-bold text-white;
-}
-
-h4 {
-    @apply text-base font-bold text-white;
-}
-
-a {
-    @apply text-neutral-400 hover:text-white link link-hover hover:bg-transparent;
-}
-
 .kbd-custom {
    @apply px-2 text-xs border border-dashed rounded border-neutral-700 text-warning;
 }
@ -125,42 +219,13 @@ .text-helper {
    @apply inline-block font-bold text-warning;
 }

-table {
-    @apply min-w-full divide-y divide-coolgray-200;
-}
-
-thead {
-    @apply uppercase;
-}
-
-tbody {
-    @apply divide-y divide-coolgray-200;
-}
-
-tr {
-    @apply text-neutral-400;
-}
-
-tr th {
-    @apply px-3 py-3.5 text-left text-white;
-}
-
-tr th:first-child {
-    @apply py-3.5 pl-4 pr-3 sm:pl-6;
-}
-
-tr td {
-    @apply px-3 py-4 whitespace-nowrap;
-}
-
-tr td:first-child {
-    @apply pl-4 pr-3 font-bold sm:pl-6;
-}
-
 .buyme {
    @apply block px-3 py-2 mt-10 text-sm font-semibold leading-6 text-center text-white rounded-md shadow-sm bg-coolgray-200 hover:bg-coolgray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-coolgray-200 hover:no-underline;
 }

+.title {
+    @apply hidden pb-0 lg:block lg:pb-8 ;
+}
 .subtitle {
    @apply pt-2 pb-10;
 }
@ -169,13 +234,7 @@ .fullscreen {
    @apply fixed top-0 left-0 w-full h-full z-[9999] bg-coolgray-100 overflow-y-auto scrollbar pb-4;
 }

-input.input-sm {
-    @apply pr-10;
-}
-option{
-    @apply text-white;
-}
-
 .toast {
    z-index: 1;
 }
+
--- a/resources/js/components/MagicBar.vue
+++ b/resources/js/components/MagicBar.vue
@ -9,6 +9,7 @@
                    <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
                    <path d="M21 21l-6 -6" />
                </svg>
+                <span class="flex-1"></span>
                <span class="ml-2 kbd-custom">/</span>
            </div>
            <div class="relative" role="dialog" aria-modal="true" v-if="showCommandPalette" @keyup.esc="resetState">
--- a/resources/views/components/applications/links.blade.php
+++ b/resources/views/components/applications/links.blade.php
@ -1,54 +1,76 @@
-<div class="group">
-    @if (
-        (data_get($application, 'fqdn') ||
-            collect(json_decode($this->application->docker_compose_domains))->count() > 0 ||
-            data_get($application, 'previews', collect([]))->count() > 0 ||
-            data_get($application, 'ports_mappings_array')) &&
-            data_get($application, 'settings.is_raw_compose_deployment_enabled') !== true)
-        <label tabindex="0" class="flex items-center gap-2 cursor-pointer hover:text-white"> Open Application
-            <x-chevron-down />
-        </label>
+<div x-data="{
+    dropdownOpen: false
+}" class="relative" @click.outside="dropdownOpen = false">

-        <div class="absolute z-50 hidden group-hover:block">
-            <ul tabindex="0"
-                class="relative -ml-24 text-xs text-white normal-case rounded min-w-max menu bg-coolgray-200">
+    <button @click="dropdownOpen=true"
+        class="inline-flex items-center justify-center py-1 pr-12 text-sm font-medium transition-colors focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
+        <span class="flex flex-col items-start flex-shrink-0 h-full ml-2 leading-none translate-y-px">
+            Open Application
+        </span>
+        <svg class="absolute right-0 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+            stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round"
+                d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
+        </svg>
+    </button>
+
+    <div x-show="dropdownOpen" @click.away="dropdownOpen=false" x-transition:enter="ease-out duration-200"
+        x-transition:enter-start="-translate-y-2" x-transition:enter-end="translate-y-0"
+        class="absolute top-0 z-50 w-64 mt-6 -translate-x-1/2 left-1/2" x-cloak>
+        <div class="p-1 mt-1 dark:bg-coolgray-100 ">
+            {{-- <div class="px-2 py-1.5 text-sm font-semibold">Domains</div> --}}
+            {{-- <div class="h-px my-1 -mx-1 "></div> --}}
+            @if (
+                (data_get($application, 'fqdn') ||
+                    collect(json_decode($this->application->docker_compose_domains))->count() > 0 ||
+                    data_get($application, 'previews', collect([]))->count() > 0 ||
+                    data_get($application, 'ports_mappings_array')) &&
+                    data_get($application, 'settings.is_raw_compose_deployment_enabled') !== true)
                @if (data_get($application, 'gitBrancLocation'))
-                    <li>
-                        <a target="_blank"
-                            class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs hover:text-white"
-                            href="{{ $application->gitBranchLocation }}">
-                            <x-git-icon git="{{ $application->source?->getMorphClass() }}" />
-                            Git Repository
-                        </a>
-                    </li>
+                    <a target="_blank" class="dropdown-item" href="{{ $application->gitBranchLocation }}">
+                        <x-git-icon git="{{ $application->source?->getMorphClass() }}" />
+                        Git Repository
+                    </a>
                @endif
                @if (data_get($application, 'build_pack') === 'dockercompose')
                    @foreach (collect(json_decode($this->application->docker_compose_domains)) as $fqdn)
                        @if (data_get($fqdn, 'domain'))
                            @foreach (explode(',', data_get($fqdn, 'domain')) as $domain)
-                                <li>
-                                    <a class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs hover:text-white"
-                                        target="_blank" href="{{ getFqdnWithoutPort($domain) }}">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
-                                            stroke-width="1.5" stroke="currentColor" fill="none"
-                                            stroke-linecap="round" stroke-linejoin="round">
-                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                                            <path d="M9 15l6 -6" />
-                                            <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
-                                            <path
-                                                d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
-                                        </svg>{{ getFqdnWithoutPort($domain) }}
-                                    </a>
-                                </li>
+                                <a class="dropdown-item" target="_blank" href="{{ getFqdnWithoutPort($domain) }}">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
+                                        stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                                        stroke-linejoin="round">
+                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                        <path d="M9 15l6 -6" />
+                                        <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
+                                        <path
+                                            d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
+                                    </svg>{{ getFqdnWithoutPort($domain) }}
+                                </a>
                            @endforeach
                        @endif
                    @endforeach
                @endif
                @if (data_get($application, 'fqdn'))
                    @foreach (str(data_get($application, 'fqdn'))->explode(',') as $fqdn)
-                        <li>
-                            <a class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs hover:text-white"
-                                target="_blank" href="{{ getFqdnWithoutPort($fqdn) }}">
+                        <a class="dropdown-item" target="_blank" href="{{ getFqdnWithoutPort($fqdn) }}">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
+                                stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                <path d="M9 15l6 -6" />
+                                <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
+                                <path
+                                    d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
+                            </svg>{{ getFqdnWithoutPort($fqdn) }}
+                        </a>
+                    @endforeach
+                @endif
+                @if (data_get($application, 'previews', collect([]))->count() > 0)
+                    @foreach (data_get($application, 'previews') as $preview)
+                        @if (data_get($preview, 'fqdn'))
+                            <a class="dropdown-item" target="_blank"
+                                href="{{ getFqdnWithoutPort(data_get($preview, 'fqdn')) }}">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
                                    stroke-linejoin="round">
@ -57,92 +79,66 @@ class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs hove
                                    <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
                                    <path
                                        d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
-                                </svg>{{ getFqdnWithoutPort($fqdn) }}
+                                </svg>
+                                PR{{ data_get($preview, 'pull_request_id') }} |
+                                {{ data_get($preview, 'fqdn') }}
                            </a>
-                        </li>
-                    @endforeach
-                @endif
-                @if (data_get($application, 'previews', collect([]))->count() > 0)
-                    @foreach (data_get($application, 'previews') as $preview)
-                        @if (data_get($preview, 'fqdn'))
-                            <li>
-                                <a class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs hover:text-white"
-                                    target="_blank" href="{{ getFqdnWithoutPort(data_get($preview, 'fqdn')) }}">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
-                                        stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
-                                        stroke-linejoin="round">
-                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                                        <path d="M9 15l6 -6" />
-                                        <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
-                                        <path
-                                            d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
-                                    </svg>
-                                    PR{{ data_get($preview, 'pull_request_id') }} |
-                                    {{ data_get($preview, 'fqdn') }}
-                                </a>
-                            </li>
                        @endif
                    @endforeach
                @endif
                @if (data_get($application, 'ports_mappings_array'))
                    @foreach ($application->ports_mappings_array as $port)
                        @if ($application->destination->server->id === 0)
-                            <li>
-                                <a class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs hover:text-white"
-                                    target="_blank" href="http://localhost:{{ explode(':', $port)[0] }}">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
-                                        stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
-                                        stroke-linejoin="round">
-                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                                        <path d="M9 15l6 -6" />
-                                        <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
-                                        <path
-                                            d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
-                                    </svg>
-                                    Port {{ $port }}
-                                </a>
-                            </li>
+                            <a class="dropdown-item" target="_blank"
+                                href="http://localhost:{{ explode(':', $port)[0] }}">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                                    stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                    <path d="M9 15l6 -6" />
+                                    <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
+                                    <path
+                                        d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
+                                </svg>
+                                Port {{ $port }}
+                            </a>
                        @else
-                            <li>
-                                <a class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs hover:text-white"
-                                    target="_blank"
-                                    href="http://{{ $application->destination->server->ip }}:{{ explode(':', $port)[0] }}">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
-                                        stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
-                                        stroke-linejoin="round">
-                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                                        <path d="M9 15l6 -6" />
-                                        <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
-                                        <path
-                                            d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
-                                    </svg>
-                                    {{ $application->destination->server->ip }}:{{ explode(':', $port)[0] }}
-                                </a>
-                            </li>
+                            <a class="dropdown-item" target="_blank"
+                                href="http://{{ $application->destination->server->ip }}:{{ explode(':', $port)[0] }}">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                                    stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                    <path d="M9 15l6 -6" />
+                                    <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
+                                    <path
+                                        d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
+                                </svg>
+                                {{ $application->destination->server->ip }}:{{ explode(':', $port)[0] }}
+                            </a>
                            @if (count($application->additional_servers) > 0)
                                @foreach ($application->additional_servers as $server)
-                                    <li>
-                                        <a class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs hover:text-white"
-                                            target="_blank"
-                                            href="http://{{ $server->ip }}:{{ explode(':', $port)[0] }}">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
-                                                stroke-width="1.5" stroke="currentColor" fill="none"
-                                                stroke-linecap="round" stroke-linejoin="round">
-                                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                                                <path d="M9 15l6 -6" />
-                                                <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
-                                                <path
-                                                    d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
-                                            </svg>
-                                            {{ $server->ip }}:{{ explode(':', $port)[0] }}
-                                        </a>
-                                    </li>
+                                    <a class="dropdown-item" target="_blank"
+                                        href="http://{{ $server->ip }}:{{ explode(':', $port)[0] }}">
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
+                                            stroke-width="1.5" stroke="currentColor" fill="none"
+                                            stroke-linecap="round" stroke-linejoin="round">
+                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                            <path d="M9 15l6 -6" />
+                                            <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
+                                            <path
+                                                d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
+                                        </svg>
+                                        {{ $server->ip }}:{{ explode(':', $port)[0] }}
+                                    </a>
                                @endforeach
                            @endif
                        @endif
                    @endforeach
                @endif
-            </ul>
+            @else
+                <div class="px-2 py-1.5 text-sm font-semibold">No links available</div>
+            @endif
        </div>
-    @endif
+    </div>
 </div>
--- a/resources/views/components/external-link.blade.php
+++ b/resources/views/components/external-link.blade.php
@ -1 +1 @@
-<img class="inline-flex w-3 h-3" src="{{ asset('svgs/external-link.svg') }}">
+<img class="inline-flex w-3 h-3 ml-1" src="{{ asset('svgs/external-link.svg') }}">
--- a/resources/views/components/forms/button.blade.php
+++ b/resources/views/components/forms/button.blade.php
@ -10,11 +10,10 @@

    {{ $slot }}
    @if ($attributes->get('type') === 'submit')
-        <span wire:target="submit" wire:loading.delay class="loading loading-xs text-warning loading-spinner"></span>
+        <x-loading wire:target="submit" wire:loading.delay />
    @else
        @if ($attributes->whereStartsWith('wire:click')->first())
-            <span wire:target="{{ $attributes->whereStartsWith('wire:click')->first() }}" wire:loading.delay
-                class="loading loading-xs loading-spinner"></span>
+            <x-loading wire:target="{{ $attributes->whereStartsWith('wire:click')->first() }}" wire:loading.delay />
        @endif
    @endif
 </button>
--- a/resources/views/components/forms/checkbox.blade.php
+++ b/resources/views/components/forms/checkbox.blade.php
@ -1,6 +1,6 @@
-<div class="flex flex-row items-center gap-4 px-2 form-control min-w-fit hover:bg-coolgray-100">
+<div class="flex flex-row items-center gap-4 px-2 py-1 my-2 form-control min-w-fit dark:hover:bg-coolgray-100">
    <label class="flex gap-4 px-0 min-w-fit label">
-        <span class="flex gap-2 label-text">
+        <span class="flex gap-2">
            @if ($label)
                {!! $label !!}
            @else
@ -16,3 +16,4 @@
        @if ($instantSave) wire:loading.attr="disabled" wire:click='{{ $instantSave === 'instantSave' || $instantSave == '1' ? 'instantSave' : $instantSave }}'
       wire:model={{ $id }} @else wire:model={{ $value ?? $id }} @endif />
 </div>
+
--- a/resources/views/components/forms/input.blade.php
+++ b/resources/views/components/forms/input.blade.php
@ -28,9 +28,9 @@ class="absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer hover:te
            <input x-cloak x-show="type" value="{{ $value }}"
                {{ $attributes->merge(['class' => $defaultClass]) }} @required($required)
                @if ($id !== 'null') wire:model={{ $id }} @endif
-                wire:dirty.class.remove='text-white' wire:dirty.class="input-warning" wire:loading.attr="disabled"
-                type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $id }}"
-                name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
+                wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300' wire:dirty.class="dark:focus:ring-warning dark:ring-warning"
+                wire:loading.attr="disabled" type="{{ $type }}" @readonly($readonly) @disabled($disabled)
+                id="{{ $id }}" name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
                aria-placeholder="{{ $attributes->get('placeholder') }}">

        </div>
@ -38,8 +38,8 @@ class="absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer hover:te
        <input @if ($value) value="{{ $value }}" @endif
            {{ $attributes->merge(['class' => $defaultClass]) }} @required($required) @readonly($readonly)
            @if ($id !== 'null') wire:model={{ $id }} @endif
-            wire:dirty.class.remove='text-white' wire:dirty.class="input-warning" wire:loading.attr="disabled"
-            type="{{ $type }}" @disabled($disabled)
+            wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300' wire:dirty.class="dark:focus:ring-warning dark:ring-warning"
+            wire:loading.attr="disabled" type="{{ $type }}" @disabled($disabled)
            @if ($id !== 'null') id={{ $id }} @endif name="{{ $name }}"
            placeholder="{{ $attributes->get('placeholder') }}">
    @endif
--- a/resources/views/components/forms/textarea.blade.php
+++ b/resources/views/components/forms/textarea.blade.php
@ -25,7 +25,8 @@ class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer
            <input x-cloak x-show="type === 'password'" value="{{ $value }}"
                {{ $attributes->merge(['class' => $defaultClassInput]) }} @required($required)
                @if ($id !== 'null') wire:model={{ $id }} @endif
-                wire:dirty.class.remove='text-white' wire:dirty.class="input-warning" wire:loading.attr="disabled"
+                wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300'
+                wire:dirty.class="dark:focus:ring-warning dark:ring-warning" wire:loading.attr="disabled"
                type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $id }}"
                name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
                aria-placeholder="{{ $attributes->get('placeholder') }}">
@ -34,7 +35,7 @@ class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer
                @if ($realtimeValidation) wire:model.debounce.200ms="{{ $id }}"
                @else
            wire:model={{ $value ?? $id }}
-            wire:dirty.class="input-warning" @endif
+                     wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300' wire:dirty.class="dark:focus:ring-warning dark:ring-warning" @endif
                @disabled($disabled) @readonly($readonly) @required($required) id="{{ $id }}"
                name="{{ $name }}" name={{ $id }}></textarea>

@ -44,7 +45,7 @@ class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer
            @if ($realtimeValidation) wire:model.debounce.200ms="{{ $id }}"
        @else
    wire:model={{ $value ?? $id }}
-    wire:dirty.class="input-warning" @endif
+    wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300' wire:dirty.class="dark:focus:ring-warning dark:ring-warning" @endif
            @disabled($disabled) @readonly($readonly) @required($required) id="{{ $id }}"
            name="{{ $name }}" name={{ $id }}></textarea>
    @endif
--- a/resources/views/components/loading.blade.php
+++ b/resources/views/components/loading.blade.php
@ -1,6 +1,11 @@
@props(['text' => null])
-<span class="flex items-center gap-4 text-white">
-    {{ $text }}<span
-        {{ $attributes->class(['bg-warning loading', 'loading-spinner' => !$attributes->has('class')]) }}>
-    </span>
-</span>
+<div class="inline-flex items-center justify-center" {{ $attributes }}>
+    <svg class="w-4 h-4 mx-1 ml-3 text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none"
+        viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+        </path>
+    </svg>
+    <div>{{ $text }}</div>
+</div>
--- a/resources/views/components/modal-confirmation.blade.php
+++ b/resources/views/components/modal-confirmation.blade.php
@ -34,7 +34,7 @@ class="absolute inset-0 w-full h-full bg-black bg-opacity-20 backdrop-blur-sm"><
                x-transition:leave="ease-in duration-100"
                x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
-                class="relative w-full py-6 border rounded shadow-lg bg-coolgray-100 px-7 border-coolgray-300 sm:max-w-lg">
+                class="relative w-full py-6 border rounded shadow-lg dark:bg-base px-7 dark:border-coolgray-300 sm:max-w-lg">
                <div class="flex items-center justify-between pb-3">
                    <h3 class="text-2xl font-bold">{{ $title }}</h3>
                    {{-- <button @click="modalOpen=false"
--- a/resources/views/components/modal-input.blade.php
+++ b/resources/views/components/modal-input.blade.php
@ -0,0 +1,53 @@
+@props([
+    'title' => 'Are you sure?',
+    'buttonTitle' => 'Open Modal',
+    'isErrorButton' => false,
+    'disabled' => false,
+    'action' => 'delete',
+    'content' => null,
+])
+<div x-data="{ modalOpen: false }" :class="{ 'z-40': modalOpen }" class="relative w-auto h-auto">
+    @if ($content)
+        <div @click="modalOpen=true">
+            {{ $content }}
+        </div>
+    @else
+        @if ($disabled)
+            <x-forms.button isError disabled>{{ $buttonTitle }}</x-forms.button>
+        @elseif ($isErrorButton)
+            <x-forms.button isError @click="modalOpen=true">{{ $buttonTitle }}</x-forms.button>
+        @else
+            <x-forms.button @click="modalOpen=true">{{ $buttonTitle }}</x-forms.button>
+        @endif
+    @endif
+    <template x-teleport="body">
+        <div x-show="modalOpen" class="fixed top-0 left-0 z-[99] flex items-center justify-center w-screen h-screen"
+            x-cloak>
+            <div x-show="modalOpen" x-transition:enter="ease-out duration-100" x-transition:enter-start="opacity-0"
+                x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-100"
+                x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
+                class="absolute inset-0 w-full h-full bg-black bg-opacity-20 backdrop-blur-sm"></div>
+            <div x-show="modalOpen" x-trap.inert.noscroll="modalOpen" x-transition:enter="ease-out duration-100"
+                x-transition:enter-start="opacity-0 -translate-y-2 sm:scale-95"
+                x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+                x-transition:leave="ease-in duration-100"
+                x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+                x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
+                class="relative w-full py-6 border rounded min-w-[36rem] max-w-fit dark:bg-base px-7 dark:border-coolgray-300">
+                <div class="flex items-center justify-between pb-3">
+                    <h3 class="text-2xl font-bold">{{ $title }}</h3>
+                    <button @click="modalOpen=false"
+                        class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 text-white rounded-full hover:bg-coolgray-300">
+                        <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                            stroke-width="1.5" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
+                <div class="relative flex items-center justify-center w-auto pb-4">
+                    {{ $slot }}
+                </div>
+            </div>
+        </div>
+    </template>
+</div>
--- a/resources/views/components/navbar-old.blade.php
+++ b/resources/views/components/navbar-old.blade.php
@ -0,0 +1,216 @@
+@auth
+    <nav class="h-screen pt-[4.5rem] border-r scrollbar bg-coolgray-100/40 border-r-coolgray-200">
+        {{-- <div class="px-2 pb-2" id="vue">
+            <magic-bar></magic-bar>
+        </div> --}}
+        <a href="/" class="fixed top-0 z-50 mx-3 mt-3 bg-transparent cursor-pointer"><img
+                class="transition rounded w-11 h-11" src="{{ asset('coolify-transparent.png') }}"></a>
+        <ul class="flex flex-col h-full gap-4 menu flex-nowrap">
+            <a title="Dashboard" href="/" class="{{ request()->is('/') ? 'menu-item-active menu-item' : 'menu-item' }}">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+                </svg>
+                Dashboard
+            </a>
+            <a title="Projects"
+                class="{{ request()->is('project/*') || request()->is('projects') ? 'menu-item menu-item-active' : 'menu-item' }}"
+                href="/projects">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" stroke-width="1.5"
+                    stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <path d="M12 4l-8 4l8 4l8 -4l-8 -4" />
+                    <path d="M4 12l8 4l8 -4" />
+                    <path d="M4 16l8 4l8 -4" />
+                </svg>
+                Projects
+            </a>
+            <a title="Servers"
+                class="{{ request()->is('server/*') || request()->is('servers') ? 'menu-item menu-item-active' : 'menu-item' }}"
+                href="/servers">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" stroke-width="1.5"
+                    stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <path d="M3 4m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z" />
+                    <path d="M15 20h-9a3 3 0 0 1 -3 -3v-2a3 3 0 0 1 3 -3h12" />
+                    <path d="M7 8v.01" />
+                    <path d="M7 16v.01" />
+                    <path d="M20 15l-2 3h3l-2 3" />
+                </svg>
+                Servers
+            </a>
+            <a title="Security" class="{{ request()->is('security*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                href="{{ route('security.private-key.index') }}">
+                <svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                        stroke-width="2"
+                        d="m16.555 3.843l3.602 3.602a2.877 2.877 0 0 1 0 4.069l-2.643 2.643a2.877 2.877 0 0 1-4.069 0l-.301-.301l-6.558 6.558a2 2 0 0 1-1.239.578L5.172 21H4a1 1 0 0 1-.993-.883L3 20v-1.172a2 2 0 0 1 .467-1.284l.119-.13L4 17h2v-2h2v-2l2.144-2.144l-.301-.301a2.877 2.877 0 0 1 0-4.069l2.643-2.643a2.877 2.877 0 0 1 4.069 0zM15 9h.01" />
+                </svg>
+                Security
+            </a>
+            <a title="Source" class="{{ request()->is('source*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                href="{{ route('source.all') }}">
+                <svg class="icon" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg">
+                    <path fill="currentColor"
+                        d="m6.793 1.207l.353.354l-.353-.354ZM1.207 6.793l-.353-.354l.353.354Zm0 1.414l.354-.353l-.354.353Zm5.586 5.586l-.354.353l.354-.353Zm1.414 0l-.353-.354l.353.354Zm5.586-5.586l.353.354l-.353-.354Zm0-1.414l-.354.353l.354-.353ZM8.207 1.207l.354-.353l-.354.353ZM6.44.854L.854 6.439l.707.707l5.585-5.585L6.44.854ZM.854 8.56l5.585 5.585l.707-.707l-5.585-5.585l-.707.707Zm7.707 5.585l5.585-5.585l-.707-.707l-5.585 5.585l.707.707Zm5.585-7.707L8.561.854l-.707.707l5.585 5.585l.707-.707Zm0 2.122a1.5 1.5 0 0 0 0-2.122l-.707.707a.5.5 0 0 1 0 .708l.707.707ZM6.44 14.146a1.5 1.5 0 0 0 2.122 0l-.707-.707a.5.5 0 0 1-.708 0l-.707.707ZM.854 6.44a1.5 1.5 0 0 0 0 2.122l.707-.707a.5.5 0 0 1 0-.708L.854 6.44Zm6.292-4.878a.5.5 0 0 1 .708 0L8.56.854a1.5 1.5 0 0 0-2.122 0l.707.707Zm-2 1.293l1 1l.708-.708l-1-1l-.708.708ZM7.5 5a.5.5 0 0 1-.5-.5H6A1.5 1.5 0 0 0 7.5 6V5Zm.5-.5a.5.5 0 0 1-.5.5v1A1.5 1.5 0 0 0 9 4.5H8ZM7.5 4a.5.5 0 0 1 .5.5h1A1.5 1.5 0 0 0 7.5 3v1Zm0-1A1.5 1.5 0 0 0 6 4.5h1a.5.5 0 0 1 .5-.5V3Zm.646 2.854l1.5 1.5l.707-.708l-1.5-1.5l-.707.708ZM10.5 8a.5.5 0 0 1-.5-.5H9A1.5 1.5 0 0 0 10.5 9V8Zm.5-.5a.5.5 0 0 1-.5.5v1A1.5 1.5 0 0 0 12 7.5h-1Zm-.5-.5a.5.5 0 0 1 .5.5h1A1.5 1.5 0 0 0 10.5 6v1Zm0-1A1.5 1.5 0 0 0 9 7.5h1a.5.5 0 0 1 .5-.5V6ZM7 5.5v4h1v-4H7Zm.5 5.5a.5.5 0 0 1-.5-.5H6A1.5 1.5 0 0 0 7.5 12v-1Zm.5-.5a.5.5 0 0 1-.5.5v1A1.5 1.5 0 0 0 9 10.5H8Zm-.5-.5a.5.5 0 0 1 .5.5h1A1.5 1.5 0 0 0 7.5 9v1Zm0-1A1.5 1.5 0 0 0 6 10.5h1a.5.5 0 0 1 .5-.5V9Z" />
+                </svg>
+                Sources
+            </a>
+            <a title="Notifications"
+                class="{{ request()->is('notifications*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                href="{{ route('notification.index') }}">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1" />
+                </svg>
+                Notifications
+            </a>
+            <a title="Tags" class="{{ request()->is('tags*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                href="{{ route('tags.index') }}">
+                <svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+                        <path
+                            d="M3 8v4.172a2 2 0 0 0 .586 1.414l5.71 5.71a2.41 2.41 0 0 0 3.408 0l3.592-3.592a2.41 2.41 0 0 0 0-3.408l-5.71-5.71A2 2 0 0 0 9.172 6H5a2 2 0 0 0-2 2" />
+                        <path d="m18 19l1.592-1.592a4.82 4.82 0 0 0 0-6.816L15 6m-8 4h-.01" />
+                    </g>
+                </svg>
+                Tags
+            </a>
+            <a title="Command Center"
+                class="{{ request()->is('command-center*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                href="{{ route('command-center') }}">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5"
+                    stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <path d="M5 7l5 5l-5 5" />
+                    <path d="M12 19l7 0" />
+                </svg>
+                Command Center
+            </a>
+            <a title="Profile" class="{{ request()->is('profile*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                href="{{ route('profile') }}">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5"
+                    stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+                    <path d="M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
+                    <path d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855" />
+                </svg>
+                Profile
+            </a>
+            <a title="Teams" class="{{ request()->is('team*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                href="{{ route('team.index') }}">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5"
+                    stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <path d="M10 13a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+                    <path d="M8 21v-1a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v1" />
+                    <path d="M15 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+                    <path d="M17 10h2a2 2 0 0 1 2 2v1" />
+                    <path d="M5 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+                    <path d="M3 13v-1a2 2 0 0 1 2 -2h2" />
+                </svg>
+                Teams
+            </a>
+            @if (isCloud())
+                <a title="Subscription"
+                    class="{{ request()->is('subscription*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                    href="{{ route('subscription.show') }}">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M3 8a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm0 2h18M7 15h.01M11 15h2" />
+                    </svg>
+                    Subscription
+                </a>
+            @endif
+
+            @if (isInstanceAdmin())
+                <a title="Settings" class="{{ request()->is('settings*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                    href="/settings">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                        <path
+                            d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
+                        <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
+                    </svg>
+                    Settings
+                </a>
+            @endif
+            <a title="Onboarding" class="{{ request()->is('onboarding*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                href="{{ route('onboarding') }}">
+                <svg class="icon" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
+                    <path fill="currentColor"
+                        d="M224 128a8 8 0 0 1-8 8h-88a8 8 0 0 1 0-16h88a8 8 0 0 1 8 8m-96-56h88a8 8 0 0 0 0-16h-88a8 8 0 0 0 0 16m88 112h-88a8 8 0 0 0 0 16h88a8 8 0 0 0 0-16M82.34 42.34L56 68.69L45.66 58.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32 0l32-32a8 8 0 0 0-11.32-11.32m0 64L56 132.69l-10.34-10.35a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32 0l32-32a8 8 0 0 0-11.32-11.32m0 64L56 196.69l-10.34-10.35a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32 0l32-32a8 8 0 0 0-11.32-11.32" />
+                </svg>
+                Onboarding
+            </a>
+            {{-- <div class="menu-item" x-data="{ open: false }">
+                <div>
+                    <button x-on:click.prevent="open = !open" x-on:click.away="open = false" type="button" id="menu-button"
+                        aria-expanded="true" aria-haspopup="true">
+                        <svg class="icon text-neutral-400" xmlns="http://www.w3.org/2000/svg" width="200" height="200"
+                            viewBox="0 0 24 24">
+                            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                        </svg>
+                    </button>
+                </div>
+                <div x-show="open" x-cloak
+                    class="absolute left-0 z-10 w-56 mx-4 mt-2 origin-top-right rounded shadow-lg bg-coolgray-100 ring-1 ring-black ring-opacity-5 focus:outline-none"
+                    role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
+                    <div class="py-1" role="none">
+
+                    </div>
+                </div>
+            </div> --}}
+            @if (isCloud() && isInstanceAdmin())
+                <a title="Admin" class="menu-item" href="/admin">
+                    <svg class="text-pink-600 icon" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
+                        <path fill="currentColor"
+                            d="M177.62 159.6a52 52 0 0 1-34 34a12.2 12.2 0 0 1-3.6.55a12 12 0 0 1-3.6-23.45a28 28 0 0 0 18.32-18.32a12 12 0 0 1 22.9 7.2ZM220 144a92 92 0 0 1-184 0c0-28.81 11.27-58.18 33.48-87.28a12 12 0 0 1 17.9-1.33l19.69 19.11L127 19.89a12 12 0 0 1 18.94-5.12C168.2 33.25 220 82.85 220 144m-24 0c0-41.71-30.61-78.39-52.52-99.29l-20.21 55.4a12 12 0 0 1-19.63 4.5L80.71 82.36C67 103.38 60 124.06 60 144a68 68 0 0 0 136 0" />
+                    </svg>
+                    Admin
+                </a>
+            @endif
+            <div class="flex-1"></div>
+            @if (isInstanceAdmin() && !isCloud())
+                @persist('upgrade')
+                    <livewire:upgrade />
+                @endpersist
+            @endif
+            <a title="Help us!" class="menu-item" href="https://coolify.io/sponsorships" target="_blank">
+                <svg class="icon hover:text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                        stroke-width="2">
+                        <path d="M19.5 12.572L12 20l-7.5-7.428A5 5 0 1 1 12 6.006a5 5 0 1 1 7.5 6.572" />
+                        <path
+                            d="M12 6L8.707 9.293a1 1 0 0 0 0 1.414l.543.543c.69.69 1.81.69 2.5 0l1-1a3.182 3.182 0 0 1 4.5 0l2.25 2.25m-7 3l2 2M15 13l2 2" />
+                    </g>
+                </svg>
+                Help us!
+            </a>
+
+            <div title="Send us feedback or get help!" class="menu-item" wire:click="help" onclick="help.showModal()">
+                <svg class="icon" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
+                    <path fill="currentColor"
+                        d="M140 180a12 12 0 1 1-12-12a12 12 0 0 1 12 12M128 72c-22.06 0-40 16.15-40 36v4a8 8 0 0 0 16 0v-4c0-11 10.77-20 24-20s24 9 24 20s-10.77 20-24 20a8 8 0 0 0-8 8v8a8 8 0 0 0 16 0v-.72c18.24-3.35 32-17.9 32-35.28c0-19.85-17.94-36-40-36m104 56A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88" />
+                </svg>
+                Feedback
+            </div>
+            <form action="/logout" method="POST" class="mb-6 menu-item">
+                @csrf
+                <button title="Logout" type="submit" class="flex gap-2">
+                    <svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <path fill="currentColor"
+                            d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2a9.985 9.985 0 0 1 8 4h-2.71a8 8 0 1 0 .001 12h2.71A9.985 9.985 0 0 1 12 22m7-6v-3h-8v-2h8V8l5 4z" />
+                    </svg>
+                    Logout
+                </button>
+            </form>
+        </ul>
+    </nav>
+@endauth
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@ -1,243 +1,293 @@
-@auth
-    <nav class="fixed h-full pt-28 scrollbar">
-        <a href="/" class="fixed top-0 z-50 mx-3 mt-3 bg-transparent cursor-pointer"><img
-                class="transition rounded w-11 h-11" src="{{ asset('coolify-transparent.png') }}"></a>
-        <ul class="flex flex-col h-full gap-4 menu flex-nowrap">
-            <li title="Dashboard">
-                <a class="hover:bg-transparent" href="/">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="{{ request()->is('/') ? 'text-warning icon' : 'icon' }}"
-                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
-                    </svg>
-                </a>
-            </li>
-            <li title="Servers">
-                <a class="hover:bg-transparent" href="/servers">
-                    <svg xmlns="http://www.w3.org/2000/svg"
-                        class="{{ request()->is('server/*') || request()->is('servers') ? 'text-warning icon' : 'icon' }}"
-                        viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
-                        stroke-linejoin="round">
-                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                        <path d="M3 4m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z" />
-                        <path d="M15 20h-9a3 3 0 0 1 -3 -3v-2a3 3 0 0 1 3 -3h12" />
-                        <path d="M7 8v.01" />
-                        <path d="M7 16v.01" />
-                        <path d="M20 15l-2 3h3l-2 3" />
-                    </svg>
-                </a>
-            </li>
-            <li title="Projects">
-                <a class="hover:bg-transparent" href="/projects">
-                    <svg xmlns="http://www.w3.org/2000/svg"
-                        class="{{ request()->is('project/*') || request()->is('projects') ? 'text-warning icon' : 'icon' }}"
-                        viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
-                        stroke-linejoin="round">
-                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                        <path d="M12 4l-8 4l8 4l8 -4l-8 -4" />
-                        <path d="M4 12l8 4l8 -4" />
-                        <path d="M4 16l8 4l8 -4" />
-                    </svg>
-                </a>
-            </li>
-            <div class="inline-block text-left " x-data="{ open: false }">
-                <div>
-                    <button x-on:click.prevent="open = !open" x-on:click.away="open = false" type="button"
-                        class="py-4 mx-4" id="menu-button" aria-expanded="true" aria-haspopup="true">
-                        <svg class="icon text-neutral-400" xmlns="http://www.w3.org/2000/svg" width="200" height="200"
-                            viewBox="0 0 24 24">
-                            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-                                stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-                        </svg>
-                    </button>
-                </div>
-                <div x-show="open" x-cloak
-                    class="absolute left-0 z-10 w-56 mx-4 mt-2 origin-top-right rounded shadow-lg bg-coolgray-100 ring-1 ring-black ring-opacity-5 focus:outline-none"
-                    role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
-                    <div class="py-1" role="none">
-                        <li title="Tags" class="border-transparent hover:bg-coolgray-200 ">
-                            <a class=" hover:bg-transparent hover:no-underline" href="{{ route('tags.index') }}">
-                                <svg class="{{ request()->is('tags*') ? 'text-warning icon' : 'icon' }}"viewBox="0 0 24 24"
-                                    xmlns="http://www.w3.org/2000/svg">
-                                    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-                                        stroke-width="2">
-                                        <path
-                                            d="M3 8v4.172a2 2 0 0 0 .586 1.414l5.71 5.71a2.41 2.41 0 0 0 3.408 0l3.592-3.592a2.41 2.41 0 0 0 0-3.408l-5.71-5.71A2 2 0 0 0 9.172 6H5a2 2 0 0 0-2 2" />
-                                        <path d="m18 19l1.592-1.592a4.82 4.82 0 0 0 0-6.816L15 6m-8 4h-.01" />
-                                    </g>
-                                </svg>
-                                Tags
-                            </a>
-                        </li>
-                        <li title="Command Center" class="hover:bg-coolgray-200">
-                            <a class="hover:bg-transparent hover:no-underline" href="{{ route('command-center') }}">
-                                <svg xmlns="http://www.w3.org/2000/svg"
-                                    class="{{ request()->is('command-center*') ? 'text-warning icon' : 'icon' }}"
-                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
-                                    stroke-linecap="round" stroke-linejoin="round">
-                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                                    <path d="M5 7l5 5l-5 5" />
-                                    <path d="M12 19l7 0" />
-                                </svg>
-                                Command Center
-                            </a>
-                        </li>
-                        <li title="Source" class="hover:bg-coolgray-200">
-                            <a class="hover:bg-transparent hover:no-underline" href="{{ route('source.all') }}">
-                                <svg class="{{ request()->is('source*') ? 'text-warning icon' : 'icon' }}"
-                                    viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg">
-                                    <path fill="currentColor"
-                                        d="m6.793 1.207l.353.354l-.353-.354ZM1.207 6.793l-.353-.354l.353.354Zm0 1.414l.354-.353l-.354.353Zm5.586 5.586l-.354.353l.354-.353Zm1.414 0l-.353-.354l.353.354Zm5.586-5.586l.353.354l-.353-.354Zm0-1.414l-.354.353l.354-.353ZM8.207 1.207l.354-.353l-.354.353ZM6.44.854L.854 6.439l.707.707l5.585-5.585L6.44.854ZM.854 8.56l5.585 5.585l.707-.707l-5.585-5.585l-.707.707Zm7.707 5.585l5.585-5.585l-.707-.707l-5.585 5.585l.707.707Zm5.585-7.707L8.561.854l-.707.707l5.585 5.585l.707-.707Zm0 2.122a1.5 1.5 0 0 0 0-2.122l-.707.707a.5.5 0 0 1 0 .708l.707.707ZM6.44 14.146a1.5 1.5 0 0 0 2.122 0l-.707-.707a.5.5 0 0 1-.708 0l-.707.707ZM.854 6.44a1.5 1.5 0 0 0 0 2.122l.707-.707a.5.5 0 0 1 0-.708L.854 6.44Zm6.292-4.878a.5.5 0 0 1 .708 0L8.56.854a1.5 1.5 0 0 0-2.122 0l.707.707Zm-2 1.293l1 1l.708-.708l-1-1l-.708.708ZM7.5 5a.5.5 0 0 1-.5-.5H6A1.5 1.5 0 0 0 7.5 6V5Zm.5-.5a.5.5 0 0 1-.5.5v1A1.5 1.5 0 0 0 9 4.5H8ZM7.5 4a.5.5 0 0 1 .5.5h1A1.5 1.5 0 0 0 7.5 3v1Zm0-1A1.5 1.5 0 0 0 6 4.5h1a.5.5 0 0 1 .5-.5V3Zm.646 2.854l1.5 1.5l.707-.708l-1.5-1.5l-.707.708ZM10.5 8a.5.5 0 0 1-.5-.5H9A1.5 1.5 0 0 0 10.5 9V8Zm.5-.5a.5.5 0 0 1-.5.5v1A1.5 1.5 0 0 0 12 7.5h-1Zm-.5-.5a.5.5 0 0 1 .5.5h1A1.5 1.5 0 0 0 10.5 6v1Zm0-1A1.5 1.5 0 0 0 9 7.5h1a.5.5 0 0 1 .5-.5V6ZM7 5.5v4h1v-4H7Zm.5 5.5a.5.5 0 0 1-.5-.5H6A1.5 1.5 0 0 0 7.5 12v-1Zm.5-.5a.5.5 0 0 1-.5.5v1A1.5 1.5 0 0 0 9 10.5H8Zm-.5-.5a.5.5 0 0 1 .5.5h1A1.5 1.5 0 0 0 7.5 9v1Zm0-1A1.5 1.5 0 0 0 6 10.5h1a.5.5 0 0 1 .5-.5V9Z" />
-                                </svg>
-                                Sources
-                            </a>
-                        </li>
-                        <li title="Security" class="hover:bg-coolgray-200">
-                            <a class="hover:bg-transparent hover:no-underline"
-                                href="{{ route('security.private-key.index') }}">
-                                <svg class="{{ request()->is('security*') ? 'text-warning icon' : 'icon' }}"
-                                    viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                                    <path fill="none" stroke="currentColor" stroke-linecap="round"
-                                        stroke-linejoin="round" stroke-width="2"
-                                        d="m16.555 3.843l3.602 3.602a2.877 2.877 0 0 1 0 4.069l-2.643 2.643a2.877 2.877 0 0 1-4.069 0l-.301-.301l-6.558 6.558a2 2 0 0 1-1.239.578L5.172 21H4a1 1 0 0 1-.993-.883L3 20v-1.172a2 2 0 0 1 .467-1.284l.119-.13L4 17h2v-2h2v-2l2.144-2.144l-.301-.301a2.877 2.877 0 0 1 0-4.069l2.643-2.643a2.877 2.877 0 0 1 4.069 0zM15 9h.01" />
-                                </svg>
-                                Security
-                            </a>
-                        </li>
-                        <li title="Profile" class="hover:bg-coolgray-200">
-                            <a class="hover:bg-transparent hover:no-underline" href="{{ route('profile') }}">
-                                <svg xmlns="http://www.w3.org/2000/svg"
-                                    class="{{ request()->is('profile*') ? 'text-warning icon' : 'icon' }}"
-                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
-                                    stroke-linecap="round" stroke-linejoin="round">
-                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                                    <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
-                                    <path d="M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
-                                    <path d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855" />
-                                </svg>
-                                Profile
-                            </a>
-                        </li>
-                        <li title="Teams" class="hover:bg-coolgray-200">
-                            <a class="hover:bg-transparent hover:no-underline" href="{{ route('team.index') }}">
-                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
-                                    class="{{ request()->is('team*') ? 'text-warning icon' : 'icon' }}"
-                                    stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
-                                    stroke-linejoin="round">
-                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                                    <path d="M10 13a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
-                                    <path d="M8 21v-1a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v1" />
-                                    <path d="M15 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
-                                    <path d="M17 10h2a2 2 0 0 1 2 2v1" />
-                                    <path d="M5 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
-                                    <path d="M3 13v-1a2 2 0 0 1 2 -2h2" />
-                                </svg>
-                                Teams
-                            </a>
-                        </li>
-                        @if (isCloud())
-                            <li title="Subscription" class="hover:bg-coolgray-200">
-                                <a class="hover:bg-transparent hover:no-underline"
-                                    href="{{ route('subscription.show') }}">
-                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                        class="{{ request()->is('subscription*') ? 'text-warning icon' : 'icon' }}"
-                                        viewBox="0 0 24 24">
-                                        <path fill="none" stroke="currentColor" stroke-linecap="round"
-                                            stroke-linejoin="round" stroke-width="2"
-                                            d="M3 8a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm0 2h18M7 15h.01M11 15h2" />
-                                    </svg>
-                                    Subscription
-                                </a>
-                            </li>
-                        @endif
-                        <li title="Notifications" class="hover:bg-coolgray-200">
-                            <a class="hover:bg-transparent hover:no-underline" href="{{ route('notification.index') }}">
-                                <svg class="{{ request()->is('notifications*') ? 'text-warning icon' : 'icon' }}"
-                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                                    <path fill="none" stroke="currentColor" stroke-linecap="round"
-                                        stroke-linejoin="round" stroke-width="2"
-                                        d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1" />
-                                </svg>
-                                Notifications
-                            </a>
-                        </li>
-                        @if (isInstanceAdmin())
-                            <li title="Settings" class="hover:bg-coolgray-200">
-                                <a class="hover:bg-transparent hover:no-underline" href="/settings">
-                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                        class="{{ request()->is('settings*') ? 'text-warning icon' : 'icon' }}"
-                                        viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
-                                        stroke-linecap="round" stroke-linejoin="round">
-                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                                        <path
-                                            d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
-                                        <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
-                                    </svg>
-                                    Settings
-                                </a>
-                            </li>
-                        @endif
-                        <li title="Onboarding" class="hover:bg-coolgray-200">
-                            <a class="hover:bg-transparent hover:no-underline" href="{{ route('onboarding') }}">
-                                <svg class="{{ request()->is('onboarding*') ? 'text-warning icon' : 'icon' }}"
-                                    viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
-                                    <path fill="currentColor"
-                                        d="M224 128a8 8 0 0 1-8 8h-88a8 8 0 0 1 0-16h88a8 8 0 0 1 8 8m-96-56h88a8 8 0 0 0 0-16h-88a8 8 0 0 0 0 16m88 112h-88a8 8 0 0 0 0 16h88a8 8 0 0 0 0-16M82.34 42.34L56 68.69L45.66 58.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32 0l32-32a8 8 0 0 0-11.32-11.32m0 64L56 132.69l-10.34-10.35a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32 0l32-32a8 8 0 0 0-11.32-11.32m0 64L56 196.69l-10.34-10.35a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32 0l32-32a8 8 0 0 0-11.32-11.32" />
-                                </svg>
-                                Onboarding
-                            </a>
-                        </li>
-                    </div>
-                </div>
-            </div>
-            @if (isCloud() && isInstanceAdmin())
-                <li title="Admin">
-                    <a class="hover:bg-transparent" href="/admin">
-                        <svg class="text-pink-600 icon" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
-                            <path fill="currentColor"
-                                d="M177.62 159.6a52 52 0 0 1-34 34a12.2 12.2 0 0 1-3.6.55a12 12 0 0 1-3.6-23.45a28 28 0 0 0 18.32-18.32a12 12 0 0 1 22.9 7.2ZM220 144a92 92 0 0 1-184 0c0-28.81 11.27-58.18 33.48-87.28a12 12 0 0 1 17.9-1.33l19.69 19.11L127 19.89a12 12 0 0 1 18.94-5.12C168.2 33.25 220 82.85 220 144m-24 0c0-41.71-30.61-78.39-52.52-99.29l-20.21 55.4a12 12 0 0 1-19.63 4.5L80.71 82.36C67 103.38 60 124.06 60 144a68 68 0 0 0 136 0" />
+<div class="flex items-center h-16 pt-2 lg:pt-4 shrink-0">
+    <a href="/" class="flex items-center w-12 h-12 -mx-1 text-xl font-bold text-white"><img
+            class="transition rounded " src="{{ asset('coolify-transparent.png') }}"></a>
+</div>
+<nav class="flex flex-col flex-1">
+    <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 -mx-2 space-y-1">
+                <li>
+                    <a title="Dashboard" href="/"
+                        class="{{ request()->is('/') ? 'menu-item-active menu-item' : 'menu-item' }}">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                        </svg>
+                        Dashboard
                    </a>
                </li>
-            @endif
-            <div class="flex-1"></div>
-            @if (isInstanceAdmin() && !isCloud())
-                @persist('upgrade')
-                    <livewire:upgrade />
-                @endpersist
-            @endif
-            <li title="Help us!">
-                <a class="hover:bg-transparent" href="https://coolify.io/sponsorships" target="_blank">
-                    <svg class="icon hover:text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-                            stroke-width="2">
-                            <path d="M19.5 12.572L12 20l-7.5-7.428A5 5 0 1 1 12 6.006a5 5 0 1 1 7.5 6.572" />
-                            <path
-                                d="M12 6L8.707 9.293a1 1 0 0 0 0 1.414l.543.543c.69.69 1.81.69 2.5 0l1-1a3.182 3.182 0 0 1 4.5 0l2.25 2.25m-7 3l2 2M15 13l2 2" />
-                        </g>
-                    </svg>
-                </a>
-            </li>
-
-            <li title="Send us feedback or get help!" class="hover:bg-transparent">
-                <div class="justify-center" wire:click="help" onclick="help.showModal()">
-                    <svg class="icon" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
-                        <path fill="currentColor"
-                            d="M140 180a12 12 0 1 1-12-12a12 12 0 0 1 12 12M128 72c-22.06 0-40 16.15-40 36v4a8 8 0 0 0 16 0v-4c0-11 10.77-20 24-20s24 9 24 20s-10.77 20-24 20a8 8 0 0 0-8 8v8a8 8 0 0 0 16 0v-.72c18.24-3.35 32-17.9 32-35.28c0-19.85-17.94-36-40-36m104 56A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88" />
-                    </svg>
-                </div>
-            </li>
-            <form action="/logout" method="POST" class="hover:bg-transparent">
-                <li title="Logout" class="mb-6 hover:transparent">
-                    @csrf
-                    <button type="submit" class="rounded-none hover:text-white hover:bg-transparent">
-                        <svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                            <path fill="currentColor"
-                                d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2a9.985 9.985 0 0 1 8 4h-2.71a8 8 0 1 0 .001 12h2.71A9.985 9.985 0 0 1 12 22m7-6v-3h-8v-2h8V8l5 4z" />
+                <li>
+                    <a title="Projects"
+                        class="{{ request()->is('project/*') || request()->is('projects') ? 'menu-item menu-item-active' : 'menu-item' }}"
+                        href="/projects">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                            <path d="M12 4l-8 4l8 4l8 -4l-8 -4" />
+                            <path d="M4 12l8 4l8 -4" />
+                            <path d="M4 16l8 4l8 -4" />
                        </svg>
-                    </button>
+                        Projects
+                    </a>
                </li>
-            </form>
-        </ul>
-    </nav>
-@endauth
+                <li>
+                    <a title="Servers"
+                        class="{{ request()->is('server/*') || request()->is('servers') ? 'menu-item menu-item-active' : 'menu-item' }}"
+                        href="/servers">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                            <path d="M3 4m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z" />
+                            <path d="M15 20h-9a3 3 0 0 1 -3 -3v-2a3 3 0 0 1 3 -3h12" />
+                            <path d="M7 8v.01" />
+                            <path d="M7 16v.01" />
+                            <path d="M20 15l-2 3h3l-2 3" />
+                        </svg>
+                        Servers
+                    </a>
+                </li>
+                <li>
+                    <a title="Security"
+                        class="{{ request()->is('security*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                        href="{{ route('security.private-key.index') }}">
+                        <svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                stroke-width="2"
+                                d="m16.555 3.843l3.602 3.602a2.877 2.877 0 0 1 0 4.069l-2.643 2.643a2.877 2.877 0 0 1-4.069 0l-.301-.301l-6.558 6.558a2 2 0 0 1-1.239.578L5.172 21H4a1 1 0 0 1-.993-.883L3 20v-1.172a2 2 0 0 1 .467-1.284l.119-.13L4 17h2v-2h2v-2l2.144-2.144l-.301-.301a2.877 2.877 0 0 1 0-4.069l2.643-2.643a2.877 2.877 0 0 1 4.069 0zM15 9h.01" />
+                        </svg>
+                        Security
+                    </a>
+                </li>
+                <li>
+                    <a title="Source"
+                        class="{{ request()->is('source*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                        href="{{ route('source.all') }}">
+                        <svg class="icon" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg">
+                            <path fill="currentColor"
+                                d="m6.793 1.207l.353.354l-.353-.354ZM1.207 6.793l-.353-.354l.353.354Zm0 1.414l.354-.353l-.354.353Zm5.586 5.586l-.354.353l.354-.353Zm1.414 0l-.353-.354l.353.354Zm5.586-5.586l.353.354l-.353-.354Zm0-1.414l-.354.353l.354-.353ZM8.207 1.207l.354-.353l-.354.353ZM6.44.854L.854 6.439l.707.707l5.585-5.585L6.44.854ZM.854 8.56l5.585 5.585l.707-.707l-5.585-5.585l-.707.707Zm7.707 5.585l5.585-5.585l-.707-.707l-5.585 5.585l.707.707Zm5.585-7.707L8.561.854l-.707.707l5.585 5.585l.707-.707Zm0 2.122a1.5 1.5 0 0 0 0-2.122l-.707.707a.5.5 0 0 1 0 .708l.707.707ZM6.44 14.146a1.5 1.5 0 0 0 2.122 0l-.707-.707a.5.5 0 0 1-.708 0l-.707.707ZM.854 6.44a1.5 1.5 0 0 0 0 2.122l.707-.707a.5.5 0 0 1 0-.708L.854 6.44Zm6.292-4.878a.5.5 0 0 1 .708 0L8.56.854a1.5 1.5 0 0 0-2.122 0l.707.707Zm-2 1.293l1 1l.708-.708l-1-1l-.708.708ZM7.5 5a.5.5 0 0 1-.5-.5H6A1.5 1.5 0 0 0 7.5 6V5Zm.5-.5a.5.5 0 0 1-.5.5v1A1.5 1.5 0 0 0 9 4.5H8ZM7.5 4a.5.5 0 0 1 .5.5h1A1.5 1.5 0 0 0 7.5 3v1Zm0-1A1.5 1.5 0 0 0 6 4.5h1a.5.5 0 0 1 .5-.5V3Zm.646 2.854l1.5 1.5l.707-.708l-1.5-1.5l-.707.708ZM10.5 8a.5.5 0 0 1-.5-.5H9A1.5 1.5 0 0 0 10.5 9V8Zm.5-.5a.5.5 0 0 1-.5.5v1A1.5 1.5 0 0 0 12 7.5h-1Zm-.5-.5a.5.5 0 0 1 .5.5h1A1.5 1.5 0 0 0 10.5 6v1Zm0-1A1.5 1.5 0 0 0 9 7.5h1a.5.5 0 0 1 .5-.5V6ZM7 5.5v4h1v-4H7Zm.5 5.5a.5.5 0 0 1-.5-.5H6A1.5 1.5 0 0 0 7.5 12v-1Zm.5-.5a.5.5 0 0 1-.5.5v1A1.5 1.5 0 0 0 9 10.5H8Zm-.5-.5a.5.5 0 0 1 .5.5h1A1.5 1.5 0 0 0 7.5 9v1Zm0-1A1.5 1.5 0 0 0 6 10.5h1a.5.5 0 0 1 .5-.5V9Z" />
+                        </svg>
+                        Sources
+                    </a>
+                </li>
+                <li>
+                    <a title="Notifications"
+                        class="{{ request()->is('notifications*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                        href="{{ route('notification.index') }}">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                stroke-width="2"
+                                d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1" />
+                        </svg>
+                        Notifications
+                    </a>
+                </li>
+                <li>
+                    <a title="Tags" class="{{ request()->is('tags*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                        href="{{ route('tags.index') }}">
+                        <svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                stroke-width="2">
+                                <path
+                                    d="M3 8v4.172a2 2 0 0 0 .586 1.414l5.71 5.71a2.41 2.41 0 0 0 3.408 0l3.592-3.592a2.41 2.41 0 0 0 0-3.408l-5.71-5.71A2 2 0 0 0 9.172 6H5a2 2 0 0 0-2 2" />
+                                <path d="m18 19l1.592-1.592a4.82 4.82 0 0 0 0-6.816L15 6m-8 4h-.01" />
+                            </g>
+                        </svg>
+                        Tags
+                    </a>
+                </li>
+                <li>
+                    <a title="Command Center"
+                        class="{{ request()->is('command-center*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                        href="{{ route('command-center') }}">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                            <path d="M5 7l5 5l-5 5" />
+                            <path d="M12 19l7 0" />
+                        </svg>
+                        Command Center
+                    </a>
+                </li>
+                <li>
+                    <a title="Profile"
+                        class="{{ request()->is('profile*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                        href="{{ route('profile') }}">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+                            stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                            stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                            <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+                            <path d="M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
+                            <path d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855" />
+                        </svg>
+                        Profile
+                    </a>
+                </li>
+                <li>
+                    <a title="Teams"
+                        class="{{ request()->is('team*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                        href="{{ route('team.index') }}">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+                            stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                            stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                            <path d="M10 13a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+                            <path d="M8 21v-1a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v1" />
+                            <path d="M15 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+                            <path d="M17 10h2a2 2 0 0 1 2 2v1" />
+                            <path d="M5 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+                            <path d="M3 13v-1a2 2 0 0 1 2 -2h2" />
+                        </svg>
+                        Teams
+                    </a>
+                </li>
+                @if (isCloud())
+                    <li>
+
+                        <a title="Subscription"
+                            class="{{ request()->is('subscription*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                            href="{{ route('subscription.show') }}">
+                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                                <path fill="none" stroke="currentColor" stroke-linecap="round"
+                                    stroke-linejoin="round" stroke-width="2"
+                                    d="M3 8a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm0 2h18M7 15h.01M11 15h2" />
+                            </svg>
+                            Subscription
+                    </li>
+                    </a>
+                @endif
+                @if (isInstanceAdmin())
+                    <li>
+
+                        <a title="Settings"
+                            class="{{ request()->is('settings*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                            href="/settings">
+                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+                                stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                <path
+                                    d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
+                                <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
+                            </svg>
+                            Settings
+                        </a>
+                    </li>
+                @endif
+
+                @if (isCloud() && isInstanceAdmin())
+                    <li>
+
+                        <a title="Admin" class="menu-item" href="/admin">
+                            <svg class="text-pink-600 icon" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
+                                <path fill="currentColor"
+                                    d="M177.62 159.6a52 52 0 0 1-34 34a12.2 12.2 0 0 1-3.6.55a12 12 0 0 1-3.6-23.45a28 28 0 0 0 18.32-18.32a12 12 0 0 1 22.9 7.2ZM220 144a92 92 0 0 1-184 0c0-28.81 11.27-58.18 33.48-87.28a12 12 0 0 1 17.9-1.33l19.69 19.11L127 19.89a12 12 0 0 1 18.94-5.12C168.2 33.25 220 82.85 220 144m-24 0c0-41.71-30.61-78.39-52.52-99.29l-20.21 55.4a12 12 0 0 1-19.63 4.5L80.71 82.36C67 103.38 60 124.06 60 144a68 68 0 0 0 136 0" />
+                            </svg>
+                            Admin
+                        </a>
+                    </li>
+                @endif
+                <div class="flex-1"></div>
+                @if (isInstanceAdmin() && !isCloud())
+                    <li>
+                        @persist('upgrade')
+                            <livewire:upgrade />
+                        @endpersist
+                    </li>
+                @endif
+                <li>
+                    <a title="Onboarding"
+                        class="{{ request()->is('onboarding*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                        href="{{ route('onboarding') }}">
+                        <svg class="icon" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
+                            <path fill="currentColor"
+                                d="M224 128a8 8 0 0 1-8 8h-88a8 8 0 0 1 0-16h88a8 8 0 0 1 8 8m-96-56h88a8 8 0 0 0 0-16h-88a8 8 0 0 0 0 16m88 112h-88a8 8 0 0 0 0 16h88a8 8 0 0 0 0-16M82.34 42.34L56 68.69L45.66 58.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32 0l32-32a8 8 0 0 0-11.32-11.32m0 64L56 132.69l-10.34-10.35a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32 0l32-32a8 8 0 0 0-11.32-11.32m0 64L56 196.69l-10.34-10.35a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32 0l32-32a8 8 0 0 0-11.32-11.32" />
+                        </svg>
+                        Onboarding
+                    </a>
+                </li>
+                <li>
+                    <a title="Help us!" class="menu-item" href="https://coolify.io/sponsorships" target="_blank">
+                        <svg class="icon hover:text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                stroke-width="2">
+                                <path d="M19.5 12.572L12 20l-7.5-7.428A5 5 0 1 1 12 6.006a5 5 0 1 1 7.5 6.572" />
+                                <path
+                                    d="M12 6L8.707 9.293a1 1 0 0 0 0 1.414l.543.543c.69.69 1.81.69 2.5 0l1-1a3.182 3.182 0 0 1 4.5 0l2.25 2.25m-7 3l2 2M15 13l2 2" />
+                            </g>
+                        </svg>
+                        Help us!
+                    </a>
+                </li>
+                <li>
+                    <x-modal-input title="How can we help?">
+                        <x-slot:content>
+                            <div title="Send us feedback or get help!" class="cursor-pointer menu-item"
+                                wire:click="help" onclick="help.showModal()">
+                                <svg class="icon" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
+                                    <path fill="currentColor"
+                                        d="M140 180a12 12 0 1 1-12-12a12 12 0 0 1 12 12M128 72c-22.06 0-40 16.15-40 36v4a8 8 0 0 0 16 0v-4c0-11 10.77-20 24-20s24 9 24 20s-10.77 20-24 20a8 8 0 0 0-8 8v8a8 8 0 0 0 16 0v-.72c18.24-3.35 32-17.9 32-35.28c0-19.85-17.94-36-40-36m104 56A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88" />
+                                </svg>
+                                Feedback
+                            </div>
+                        </x-slot:content>
+                        <livewire:help />
+                    </x-modal-input>
+                </li>
+                <li>
+                    <form action="/logout" method="POST" class="mb-6 menu-item">
+                        @csrf
+                        <button title="Logout" type="submit" class="flex gap-2">
+                            <svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                <path fill="currentColor"
+                                    d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2a9.985 9.985 0 0 1 8 4h-2.71a8 8 0 1 0 .001 12h2.71A9.985 9.985 0 0 1 12 22m7-6v-3h-8v-2h8V8l5 4z" />
+                            </svg>
+                            Logout
+                        </button>
+                    </form>
+                </li>
+
+            </ul>
+        </li>
+        {{-- <li>
+            <div class="text-xs font-semibold leading-6 text-gray-400">Your teams</div>
+            <ul role="list" class="mt-2 -mx-2 space-y-1">
+                <li>
+                    <a href="#"
+                        class="flex p-2 text-sm font-semibold leading-6 text-gray-700 rounded-md hover:text-indigo-600 hover:bg-gray-50 group gap-x-3">
+                        <span
+                            class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-[0.625rem] font-medium bg-white text-gray-400 border-gray-200 group-hover:border-indigo-600 group-hover:text-indigo-600">H</span>
+                        <span class="truncate">Heroicons</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#"
+                        class="flex p-2 text-sm font-semibold leading-6 text-gray-700 rounded-md hover:text-indigo-600 hover:bg-gray-50 group gap-x-3">
+                        <span
+                            class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-[0.625rem] font-medium bg-white text-gray-400 border-gray-200 group-hover:border-indigo-600 group-hover:text-indigo-600">T</span>
+                        <span class="truncate">Tailwind Labs</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#"
+                        class="flex p-2 text-sm font-semibold leading-6 text-gray-700 rounded-md hover:text-indigo-600 hover:bg-gray-50 group gap-x-3">
+                        <span
+                            class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-[0.625rem] font-medium bg-white text-gray-400 border-gray-200 group-hover:border-indigo-600 group-hover:text-indigo-600">W</span>
+                        <span class="truncate">Workcation</span>
+                    </a>
+                </li>
+            </ul>
+        </li> --}}
+        {{-- <li class="mt-auto -mx-6">
+            <a href="#"
+                class="flex items-center px-6 py-3 text-sm font-semibold leading-6 text-gray-900 gap-x-4 hover:bg-gray-50">
+                <img class="w-8 h-8 rounded-full bg-gray-50"
+                    src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                    alt="">
+                <span class="sr-only">Your profile</span>
+                <span aria-hidden="true">Tom Cook</span>
+            </a>
+        </li> --}}
+    </ul>
+</nav>
--- a/resources/views/components/popup.blade.php
+++ b/resources/views/components/popup.blade.php
@ -0,0 +1,30 @@
+@props(['title' => 'Default title', 'description' => 'Default Description', 'buttonText' => 'Default Button Text'])
+<div x-data="{
+    bannerVisible: false,
+    bannerVisibleAfter: 300
+}" x-show="bannerVisible" x-transition:enter="transition ease-out duration-500"
+    x-transition:enter-start="translate-y-full" x-transition:enter-end="translate-y-0"
+    x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-y-0"
+    x-transition:leave-end="translate-y-full" x-init="setTimeout(() => { bannerVisible = true }, bannerVisibleAfter);"
+    class="fixed bottom-0 right-0 w-full h-auto duration-300 ease-out sm:px-5 sm:pb-5 sm:w-[26rem] lg:w-full" x-cloak>
+    <div
+        class="flex flex-col items-center justify-between w-full h-full max-w-4xl p-6 mx-auto bg-white border-t shadow-lg dark:bg-coolgray-100 lg:p-8 lg:flex-row sm:border-0 sm:rounded-xl">
+        <div
+            class="flex flex-col items-start h-full pb-6 text-xs lg:items-center lg:flex-row lg:pb-0 lg:pr-6 lg:space-x-5 dark:text-neutral-300">
+            <img src="https://cdn-icons-png.flaticon.com/512/8236/8236748.png"
+                class="w-8 h-8 sm:w-12 sm:h-12 lg:w-16 lg:h-16">
+            <div class="pt-6 lg:pt-0">
+                <h4 class="w-full mb-1 text-xl font-bold leading-none -translate-y-1 text-neutral-900 dark:text-white">
+                    {{ $title }}
+                </h4>
+                <p class="">{{ $description }}</span></p>
+            </div>
+        </div>
+        <div class="flex items-end justify-end w-full pl-3 space-x-3 lg:flex-shrink-0 lg:w-auto">
+            <button @click="bannerVisible=false;" {{ $buttonText->attributes }}
+                class="inline-flex items-center justify-center flex-shrink-0 w-1/2 px-4 py-2 text-sm font-medium tracking-wide transition-colors duration-200 bg-white rounded-md dark:bg-coolgray-200 lg:w-auto dark:text-neutral-200 dark:hover:bg-coolgray-300 focus:shadow-outline focus:outline-none">
+                {{ $buttonText }}
+            </button>
+        </div>
+    </div>
+</div>
--- a/resources/views/components/resources/breadcrumbs.blade.php
+++ b/resources/views/components/resources/breadcrumbs.blade.php
@ -13,7 +13,7 @@
                        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                        clip-rule="evenodd"></path>
                </svg>
-                <a  class="text-xs truncate lg:text-sm"
+                <a class="text-xs truncate lg:text-sm"
                    href="{{ route('project.resource.index', ['environment_name' => $this->parameters['environment_name'], 'project_uuid' => $this->parameters['project_uuid']]) }}">{{ $this->parameters['environment_name'] }}</a>
            </div>
        </li>
--- a/resources/views/components/security/navbar.blade.php
+++ b/resources/views/components/security/navbar.blade.php
@ -1,14 +1,7 @@
 <div class="pb-6">
    <h1>Security</h1>
-    <nav class="flex pt-2 pb-10">
-        <ol class="inline-flex items-center">
-            <li>
-                <div class="flex items-center">
-                    <span>Security related settings</span>
-                </div>
-            </li>
-        </ol>
-    </nav>
+    <div class="subtitle">Security related settings.</div>
+  
    <nav class="navbar-main">
        <a  href="{{ route('security.private-key.index') }}">
            <button>Private Keys</button>
--- a/resources/views/components/server/navbar.blade.php
+++ b/resources/views/components/server/navbar.blade.php
@ -10,7 +10,7 @@
            <livewire:server.proxy.status :server="$server" />
        @endif
    </div>
-    <div class="subtitle ">{{ data_get($server, 'name') }}</div>
+    <div class="subtitle ">{{ data_get($server, 'name') }}.</div>
    <nav class="navbar-main">
        <a class="{{ request()->routeIs('server.show') ? 'text-white' : '' }}"
            href="{{ route('server.show', [
@ -18,18 +18,18 @@
            ]) }}">
            <button>General</button>
        </a>
-        <a class="{{ request()->routeIs('server.resources') ? 'text-white' : '' }}"
-            href="{{ route('server.resources', [
-                'server_uuid' => data_get($parameters, 'server_uuid'),
-            ]) }}">
-            <button>Resources</button>
-        </a>
        <a class="{{ request()->routeIs('server.private-key') ? 'text-white' : '' }}"
            href="{{ route('server.private-key', [
                'server_uuid' => data_get($parameters, 'server_uuid'),
            ]) }}">
            <button>Private Key</button>
        </a>
+        <a class="{{ request()->routeIs('server.resources') ? 'text-white' : '' }}"
+            href="{{ route('server.resources', [
+                'server_uuid' => data_get($parameters, 'server_uuid'),
+            ]) }}">
+            <button>Resources</button>
+        </a>
        @if (!$server->isSwarmWorker() && !$server->settings->is_build_server)
            <a class="{{ request()->routeIs('server.proxy') ? 'text-white' : '' }}"
                href="{{ route('server.proxy', [
@ -52,7 +52,11 @@
        @endif

        <div class="flex-1"></div>
-        @if ($server->proxyType() !== 'NONE' && $server->isFunctional() && !$server->isSwarmWorker() && !$server->settings->is_build_server)
+        @if (
+            $server->proxyType() !== 'NONE' &&
+                $server->isFunctional() &&
+                !$server->isSwarmWorker() &&
+                !$server->settings->is_build_server)
            <livewire:server.proxy.deploy :server="$server" />
        @endif
    </nav>
--- a/resources/views/components/slide-over.blade.php
+++ b/resources/views/components/slide-over.blade.php
@ -22,7 +22,7 @@ class="fixed inset-0 bg-black bg-opacity-60"></div>
                                'max-w-4xl w-screen' => $fullScreen,
                            ])>
                            <div
-                                class="flex flex-col h-full py-6 overflow-hidden border-l shadow-lg bg-base-100 border-neutral-800">
+                                class="flex flex-col h-full py-6 overflow-hidden border-l shadow-lg bg-base border-neutral-800">
                                <div class="px-4 pb-4 sm:px-5">
                                    <div class="flex items-start justify-between pb-1">
                                        <h2 class="text-2xl leading-6" id="slide-over-title">
--- a/resources/views/components/status/degraded.blade.php
+++ b/resources/views/components/status/degraded.blade.php
@ -1,13 +1,15 @@
@props([
    'status' => 'Degraded',
 ])
-<x-loading wire:loading.delay.longer />
-<div class="flex items-center" wire:loading.remove.delay.longer>
-    <div class="badge badge-warning badge-xs"></div>
-    <div class="pl-2 pr-1 text-xs font-bold tracking-widerr text-warning">
-        {{ str($status)->before(':')->headline() }}
-    </div>
-    @if (!str($status)->startsWith('Proxy') && !str($status)->contains('('))
-        <div class="text-xs text-warning">({{ str($status)->after(':') }})</div>
-    @endif
+<div class="flex items-center" >
+    <x-loading wire:loading.delay.longer />
+    <span wire:loading.remove.delay.longer class="flex items-center">
+        <div class="badge badge-warning "></div>
+        <div class="pl-2 pr-1 text-xs font-bold tracking-widerr text-warning">
+            {{ str($status)->before(':')->headline() }}
+        </div>
+        @if (!str($status)->startsWith('Proxy') && !str($status)->contains('('))
+            <div class="text-xs text-warning">({{ str($status)->after(':') }})</div>
+        @endif
+    </span>
 </div>
--- a/resources/views/components/status/restarting.blade.php
+++ b/resources/views/components/status/restarting.blade.php
@ -1,13 +1,15 @@
@props([
    'status' => 'Restarting',
 ])
-<x-loading wire:loading.delay.longer />
-<div class="flex items-center" wire:loading.remove.delay.longer>
-    <div class="badge badge-warning badge-xs"></div>
-    <div class="pl-2 pr-1 text-xs font-bold tracking-widerr text-warning">
-        {{ str($status)->before(':')->headline() }}
-    </div>
-    @if (!str($status)->startsWith('Proxy') && !str($status)->contains('('))
-        <div class="text-xs text-warning">({{ str($status)->after(':') }})</div>
-    @endif
+<div class="flex items-center" >
+    <x-loading wire:loading.delay.longer />
+    <span wire:loading.remove.delay.longer class="flex items-center">
+        <div class="badge badge-warning "></div>
+        <div class="pl-2 pr-1 text-xs font-bold tracking-widerr text-warning">
+            {{ str($status)->before(':')->headline() }}
+        </div>
+        @if (!str($status)->startsWith('Proxy') && !str($status)->contains('('))
+            <div class="text-xs text-warning">({{ str($status)->after(':') }})</div>
+        @endif
+    </span>
 </div>
--- a/resources/views/components/status/running.blade.php
+++ b/resources/views/components/status/running.blade.php
@ -1,13 +1,15 @@
@props([
    'status' => 'Running',
 ])
-<x-loading wire:loading.delay.longer />
-<div class="flex items-center" wire:loading.remove.delay.longer>
-    <div class="badge badge-success badge-xs"></div>
+<div class="flex items-center" >
+    <x-loading wire:loading.delay.longer />
+    <span wire:loading.remove.delay.longer class="flex items-center">
+    <div class="badge badge-success "></div>
    <div class="pl-2 pr-1 text-xs font-bold tracking-wider text-success">
        {{ str($status)->before(':')->headline() }}
    </div>
    @if (!str($status)->startsWith('Proxy') && !str($status)->contains('('))
        <div class="text-xs {{ str($status)->contains('unhealthy') ? 'text-warning' : 'text-success' }}">({{ str($status)->after(':') }})</div>
    @endif
+    </span>
 </div>
--- a/resources/views/components/status/stopped.blade.php
+++ b/resources/views/components/status/stopped.blade.php
@ -1,8 +1,10 @@
@props([
    'status' => 'Stopped',
 ])
-<x-loading wire:loading.delay.longer />
-<div class="flex items-center" wire:loading.remove.delay.longer>
-    <div class="badge badge-error badge-xs"></div>
-    <div class="pl-2 pr-1 text-xs font-bold tracking-wider text-error">{{ str($status)->before(':')->headline() }}</div>
+<div class="flex items-center">
+    <x-loading wire:loading.delay.longer />
+    <span wire:loading.remove.delay.longer class="flex items-center">
+        <div class="badge badge-error "></div>
+        <div class="pl-2 pr-1 text-xs font-bold tracking-wider text-error">{{ str($status)->before(':')->headline() }}</div>
+    </span>
 </div>
--- a/resources/views/components/version.blade.php
+++ b/resources/views/components/version.blade.php
@ -1,2 +1,2 @@
-<a {{ $attributes->merge(['class' => 'text-xs cursor-pointer opacity-60 hover:opacity-100 hover:text-white z-50']) }}
+<a {{ $attributes->merge(['class' => 'text-xs cursor-pointer opacity-60 hover:opacity-100 hover:text-white z-[60]']) }}
    href="https://github.com/coollabsio/coolify/releases/tag/v{{ config('version') }}">v{{ config('version') }}</a>
--- a/resources/views/destination/all.blade.php
+++ b/resources/views/destination/all.blade.php
@ -1,6 +1,6 @@
 <x-layout>
    <h1>Destinations</h1>
-    <div class="subtitle ">All Destinations</div>
+    <div class="subtitle ">All Destinations.</div>
    <div class="grid gap-2 lg:grid-cols-2">
        @forelse ($destinations as $destination)
            @if ($destination->getMorphClass() === 'App\Models\StandaloneDocker')
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@ -1,17 +1,64 @@
@extends('layouts.base')
@section('body')
    @parent
-    <x-navbar />
-    @persist('magic-bar')
-        <div class="fixed z-30 top-[4.5rem] left-4" id="vue">
-            <magic-bar></magic-bar>
-        </div>
-    @endpersist
    <livewire:layout-popups />
    @auth
        <livewire:realtime-connection />
    @endauth
-    <main class="pb-10 main">
-        {{ $slot }}
-    </main>
+    @auth
+        <div x-data="{ open: false }" x-cloak>
+            <div class="relative z-50 lg:hidden" :class="open ? 'block' : 'hidden'" role="dialog" aria-modal="true">
+                <div class="fixed inset-0 bg-black/80"></div>
+                <div class="fixed inset-0 flex">
+                    <div class="relative flex flex-1 w-full mr-16 max-w-56 ">
+                        <div class="absolute top-0 flex justify-center w-16 pt-5 left-full">
+                            <button type="button" class="-m-2.5 p-2.5" x-on:click="open = !open">
+                                <span class="sr-only">Close sidebar</span>
+                                <svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                    stroke="currentColor" aria-hidden="true">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                                </svg>
+                            </button>
+                        </div>
+
+                        <div class="flex flex-col px-6 pb-2 overflow-y-auto dark:bg-coolgray-100 gap-y-5 scrollbar">
+                            <x-navbar />
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-56 lg:flex-col">
+                <div class="flex flex-col px-4 overflow-y-auto grow gap-y-5 scrollbar">
+                    <x-navbar />
+                </div>
+            </div>
+
+            <div
+                class="sticky top-0 z-40 flex items-center px-4 py-4 gap-x-6 sm:px-6 lg:hidden">
+                <button type="button" class="-m-2.5 p-2.5 dark:text-warning lg:hidden" x-on:click="open = !open">
+                    <span class="sr-only">Open sidebar</span>
+                    <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24">
+                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                            stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                    </svg>
+                </button>
+                <div class="flex-1 text-xl font-bold leading-6 dark:text-white">Dashboard</div>
+                {{-- <a href="#">
+                    <span class="sr-only">Your profile</span>
+                    <img class="w-8 h-8 rounded-full bg-gray-50"
+                        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                        alt="">
+                </a> --}}
+            </div>
+
+            <main class="lg:pl-56">
+                <div>
+                    <div class="p-4 sm:px-6 lg:px-8 lg:py-6">
+                        {{ $slot }}
+                    </div>
+                </div>
+            </main>
+        </div>
+    @endauth
@endsection
--- a/resources/views/layouts/base.blade.php
+++ b/resources/views/layouts/base.blade.php
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-theme="coollabs" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<html data-theme="coolify" lang="{{ str_replace('_', '-', app()->getLocale()) }}">

 <head>
    <meta charset="utf-8">
@ -38,16 +38,27 @@
@section('body')

    <body>
+        {{-- <button onclick="changeTheme()" class="fixed z-50 left-52">Dark/light</button> --}}
        @livewire('wire-elements-modal')
-        <dialog id="help" class="modal">
-            <livewire:help />
-            <form method="dialog" class="modal-backdrop">
-                <button>close</button>
-            </form>
-        </dialog>
        <x-toast />
-        <x-version class="fixed left-2 bottom-1" />
+        <x-version class="fixed left-7 bottom-1" />
        <script data-navigate-once>
+            if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia(
+                    '(prefers-color-scheme: dark)').matches)) {
+                document.documentElement.classList.add('dark')
+            } else {
+                document.documentElement.classList.remove('dark')
+            }
+
+            function changeTheme() {
+                if (localStorage.theme === 'dark') {
+                    localStorage.theme = 'light'
+                    document.documentElement.classList.remove('dark')
+                } else {
+                    localStorage.theme = 'dark'
+                    document.documentElement.classList.add('dark')
+                }
+            }
            @auth
            window.Pusher = Pusher;
            window.Echo = new Echo({
--- a/resources/views/livewire/activity-monitor.blade.php
+++ b/resources/views/livewire/activity-monitor.blade.php
@ -10,7 +10,7 @@
            </div>
        @endif
        <div
-            class="scrollbar flex flex-col-reverse w-full overflow-y-auto border border-solid rounded border-coolgray-300 max-h-[32rem] p-4 pt-6 text-xs text-white">
+            class="scrollbar flex flex-col-reverse w-full overflow-y-auto border border-solid rounded border-coolgray-300 max-h-[32rem] p-4 text-xs text-white">

            <pre class="font-mono whitespace-pre-wrap" @if ($isPollingActive) wire:poll.1000ms="polling" @endif>{{ RunRemoteProcess::decodeOutput($this->activity) }}</pre>
        </div>
--- a/resources/views/livewire/dashboard.blade.php
+++ b/resources/views/livewire/dashboard.blade.php
@ -2,10 +2,10 @@
    @if (session('error'))
        <span x-data x-init="$wire.emit('error', '{{ session('error') }}')" />
    @endif
-    <h1>Dashboard</h1>
-    <div class="subtitle">Your self-hosted environment</div>
+    <h1 class="title">Dashboard</h1>
+    {{-- <div class="subtitle">Your self-hosted environment</div> --}}
    @if (request()->query->get('success'))
-        <div class="mb-10 text-white rounded alert alert-success">
+        <div class="mb-10 text-white rounded alert-success">
            <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"
--- a/resources/views/livewire/destination/form.blade.php
+++ b/resources/views/livewire/destination/form.blade.php
@ -6,14 +6,14 @@
                Save
            </x-forms.button>
            @if ($destination->network !== 'coolify')
-                <x-new-modal isErrorButton buttonTitle="Delete Destination">
+                <x-modal-confirmation isErrorButton buttonTitle="Delete Destination">
                    This destination will be deleted. It is not reversible. <br>Please think again.
-                </x-new-modal>
+                </x-modal-confirmation>
            @endif
        </div>

        @if ($destination->getMorphClass() === 'App\Models\StandaloneDocker')
-            <div class="subtitle ">A Docker network in a non-swarm environment</div>
+            <div class="subtitle ">A Docker network in a non-swarm environment.</div>
        @else
            <div class="subtitle ">Your swarm docker network. WIP</div>
        @endif
--- a/resources/views/livewire/help.blade.php
+++ b/resources/views/livewire/help.blade.php
@ -1,11 +1,10 @@
-<div class="flex flex-col w-11/12 max-w-5xl gap-2 modal-box">
-    <h3>How can we help?</h3>
+<div class="flex flex-col w-full gap-2">
    <div>Your feedback helps us to improve Coolify. Thank you! 💜</div>
    <form wire:submit="submit" class="flex flex-col gap-4 pt-4">
        <x-forms.input id="subject" label="Subject" placeholder="Summary of your problem."></x-forms.input>
        <x-forms.textarea rows="10" id="description" label="Description"
            placeholder="Please provide as much information as possible."></x-forms.textarea>
        <div></div>
-        <x-forms.button class="w-full mt-4" type="submit" onclick="help.close()">Send</x-forms.button>
+        <x-forms.button class="w-full mt-4" type="submit" @click="modalOpen=false">Send</x-forms.button>
    </form>
 </div>
--- a/resources/views/livewire/layout-popups.blade.php
+++ b/resources/views/livewire/layout-popups.blade.php
@ -1,6 +1,22 @@
 <div>
    @if (data_get(auth()->user(), 'is_notification_sponsorship_enabled'))
-        <div class="toast">
+        <x-popup>
+            <x-slot:title>
+                Love Coolify as we do?
+            </x-slot:title>
+            <x-slot:description>
+                <span>Please
+                    consider donating on <a href="https://github.com/sponsors/coollabsio"
+                        class="text-xs text-white underline">GitHub</a> or <a href="https://opencollective.com/coollabsio"
+                        class="text-xs text-white underline">OpenCollective</a>.<br><br></span>
+                <span>It enables us to keep creating features without paywalls, ensuring our work remains free and
+                    open.</span>
+            </x-slot:description>
+            <x-slot:button-text wire:click='disableSponsorship'>
+                Disable This Popup
+            </x-slot:button-text>
+        </x-popup>
+        {{-- <div class="toast">
            <div class="flex flex-col text-white rounded alert bg-coolgray-200">
                <span>Love Coolify as we do? <a href="https://coolify.io/sponsorships"
                        class="underline text-warning">Please
@ -10,8 +26,9 @@ class="underline text-warning">Please
                <x-forms.button class="bg-coolgray-400" wire:click='disableSponsorship'>Disable This
                    Popup</x-forms.button>
            </div>
-        </div>
+        </div> --}}
    @endif
+    {{-- <x-popup /> --}}
    @if (currentTeam()->serverOverflow())
        <x-banner :closable=false>
            <div><span class="font-bold text-red-500">WARNING:</span> The number of active servers exceeds the limit
@ -24,10 +41,12 @@ class="text-white underline">/subscription</a> to update your subscription or re
    @if (!currentTeam()->isAnyNotificationEnabled())
        <div class="toast">
            <div class="flex flex-col text-white rounded alert bg-coolgray-200">
-                <span><span class="font-bold text-red-500">WARNING:</span> No notifications enabled.<br><br> It is highly recommended to enable at least
+                <span><span class="font-bold text-red-500">WARNING:</span> No notifications enabled.<br><br> It is
+                    highly recommended to enable at least
                    one
-                    notification channel to receive important alerts.<br>Visit <a href="{{ route('notification.index') }}"
-                        class="text-white underline">/notification</a> to enable notifications.</span>
+                    notification channel to receive important alerts.<br>Visit <a
+                        href="{{ route('notification.index') }}" class="text-white underline">/notification</a> to
+                    enable notifications.</span>
                <x-forms.button class="bg-coolgray-400" wire:click='disableNotifications'>Disable This
                    Popup</x-forms.button>
            </div>
--- a/resources/views/livewire/notifications/email-settings.blade.php
+++ b/resources/views/livewire/notifications/email-settings.blade.php
@ -1,15 +1,4 @@
 <div>
-    <dialog id="sendTestEmail" class="modal">
-        <form method="dialog" class="flex flex-col gap-2 rounded modal-box" wire:submit='submit'>
-            <x-forms.input placeholder="test@example.com" id="emails" label="Recipients" required />
-            <x-forms.button onclick="sendTestEmail.close()" wire:click="sendTestNotification">
-                Send Email
-            </x-forms.button>
-        </form>
-        <form method="dialog" class="modal-backdrop">
-            <button>close</button>
-        </form>
-    </dialog>
    <form wire:submit='submit' class="flex flex-col">
        <div class="flex items-center gap-2">
            <h2>Email</h2>
@ -21,15 +10,17 @@
                    Copy from Instance Settings
                </x-forms.button>
            @endif
-            @if (isEmailEnabled($team) &&
-                    auth()->user()->isAdminFromSession() &&
-                    isTestEmailEnabled($team))
-                <x-forms.button onclick="sendTestEmail.showModal()"
-                    class="text-white normal-case btn btn-xs no-animation btn-primary">
-                    Send Test Email
-                </x-forms.button>
+            @if (isEmailEnabled($team) && auth()->user()->isAdminFromSession() && isTestEmailEnabled($team))
+                <x-modal-input buttonTitle="Send Test Email" title="Send Test Email">
+                    <form wire:submit='submit' class="flex flex-col w-full gap-2">
+                        <x-forms.input placeholder="test@example.com" id="emails" label="Recipients" required />
+                        <x-forms.button onclick="sendTestEmail.close()" wire:click="sendTestNotification"
+                            @click="modalOpen=false">
+                            Send Email
+                        </x-forms.button>
+                    </form>
+                </x-modal-input>
            @endif
-
        </div>
    </form>
    @if (isCloud())
@ -45,7 +36,7 @@ class="text-white normal-case btn btn-xs no-animation btn-primary">
            </div>
        @endif
    @else
-        <div class="pb-4 w-96">
+        <div class="w-96">
            <x-forms.checkbox instantSave="instantSaveInstance" id="team.use_instance_email_settings"
                label="Use system wide (transactional) email settings" />
        </div>
--- a/resources/views/livewire/project/add-empty.blade.php
+++ b/resources/views/livewire/project/add-empty.blade.php
@ -1,12 +1,8 @@
-<dialog id="newEmptyProject" class="modal">
-    <form method="dialog" class="flex flex-col gap-2 rounded modal-box" wire:submit='submit'>
-        <x-forms.input placeholder="Your Cool Project" id="name" label="Name" required />
-        <x-forms.input placeholder="This is my cool project everyone knows about" id="description" label="Description" />
-        <x-forms.button onclick="newEmptyProject.close()" type="submit">
-            Save
-        </x-forms.button>
-    </form>
-    <form method="dialog" class="modal-backdrop">
-        <button>close</button>
-    </form>
-</dialog>
+<form class="flex flex-col gap-2 rounded" wire:submit='submit'>
+    <x-forms.input placeholder="Your Cool Project" id="name" label="Name" required />
+    <x-forms.input placeholder="This is my cool project everyone knows about" id="description" label="Description" />
+    <div class="subtitle">New project will have a default production environment.</div>
+    <x-forms.button type="submit" @click="slideOverOpen=false">
+        Save
+    </x-forms.button>
+</form>
--- a/resources/views/livewire/project/add-environment.blade.php
+++ b/resources/views/livewire/project/add-environment.blade.php
@ -1,11 +1,6 @@
-<dialog id="newEnvironment" class="modal">
-    <form method="dialog" class="flex flex-col gap-2 rounded modal-box" wire:submit='submit'>
-        <x-forms.input placeholder="production" id="name" label="Name" required />
-        <x-forms.button onclick="newEnvironment.close()" type="submit">
-            Save
-        </x-forms.button>
-    </form>
-    <form method="dialog" class="modal-backdrop">
-        <button>close</button>
-    </form>
-</dialog>
+<form class="flex flex-col gap-2 rounded" wire:submit='submit'>
+    <x-forms.input placeholder="production" id="name" label="Name" required />
+    <x-forms.button type="submit" @click="slideOverOpen=false">
+        Save
+    </x-forms.button>
+</form>
--- a/resources/views/livewire/project/application/advanced.blade.php
+++ b/resources/views/livewire/project/application/advanced.blade.php
@ -4,7 +4,7 @@
            <h2>Advanced</h2>
        </div>
        <div>Advanced configuration for your application.</div>
-        <div class="flex flex-col pt-4 w-96">
+        <div class="pt-4 w-96">
            <h3>General</h3>
            @if ($application->git_based())
                <x-forms.checkbox helper="Automatically deploy new commits based on Git webhooks." instantSave
@ -42,7 +42,9 @@
            <x-forms.checkbox disabled instantSave id="is_custom_ssl" label="Is Custom SSL?" />
            <x-forms.checkbox disabled instantSave id="is_http2" label="Is Http2?" /> --}}
        </div>
-        <h3>GPU</h3>
+        @if ($application->build_pack !== 'dockercompose')
+            <h3>GPU</h3>
+        @endif
        <form wire:submit="submit">
            @if ($application->build_pack !== 'dockercompose')
                <div class="w-96">
--- a/resources/views/livewire/project/application/configuration.blade.php
+++ b/resources/views/livewire/project/application/configuration.blade.php
@ -3,31 +3,31 @@
    <livewire:project.application.heading :application="$application" />
    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-6">
        <div class="flex flex-col gap-4 xl:w-48">
-            <a :class="activeTab === 'general' && 'text-white'"
+            <a :class="activeTab === 'general' && 'dark:text-white text-black'"
                @click.prevent="activeTab = 'general'; window.location.hash = 'general'" href="#">General</a>
            @if ($application->destination->server->isSwarm())
-                <a :class="activeTab === 'swarm' && 'text-white'"
+                <a :class="activeTab === 'swarm' && 'dark:text-white text-black'"
                    @click.prevent="activeTab = 'swarm'; window.location.hash = 'swarm'" href="#">Swarm
                    Configuration</a>
            @endif
-            <a :class="activeTab === 'advanced' && 'text-white'"
+            <a :class="activeTab === 'advanced' && 'dark:text-white text-black'"
                @click.prevent="activeTab = 'advanced'; window.location.hash = 'advanced'" href="#">Advanced</a>
            @if ($application->build_pack !== 'static')
-                <a :class="activeTab === 'environment-variables' && 'text-white'"
+                <a :class="activeTab === 'environment-variables' && 'dark:text-white text-black'"
                    @click.prevent="activeTab = 'environment-variables'; window.location.hash = 'environment-variables'"
                    href="#">Environment
                    Variables</a>
            @endif
            @if ($application->build_pack !== 'static' && $application->build_pack !== 'dockercompose')
-                <a :class="activeTab === 'storages' && 'text-white'"
+                <a :class="activeTab === 'storages' && 'dark:text-white text-black'"
                    @click.prevent="activeTab = 'storages'; window.location.hash = 'storages'" href="#">Storages
                </a>
            @endif
            @if ($application->git_based())
-                <a :class="activeTab === 'source' && 'text-white'"
+                <a :class="activeTab === 'source' && 'dark:text-white text-black'"
                    @click.prevent="activeTab = 'source'; window.location.hash = 'source'" href="#">Source</a>
            @endif
-            <a :class="activeTab === 'servers' && 'text-white'" class="flex items-center gap-2"
+            <a :class="activeTab === 'servers' && 'dark:text-white text-black'" class="flex items-center gap-2"
                @click.prevent="activeTab = 'servers'; window.location.hash = 'servers'" href="#">Servers
                @if (str($application->status)->contains('degraded'))
                    <span title="Some servers are unavailable">
@ -38,42 +38,42 @@
                    </span>
                @endif
            </a>
-            <a :class="activeTab === 'scheduled-tasks' && 'text-white'"
+            <a :class="activeTab === 'scheduled-tasks' && 'dark:text-white text-black'"
                @click.prevent="activeTab = 'scheduled-tasks'; window.location.hash = 'scheduled-tasks'"
                href="#">Scheduled Tasks
            </a>

-            <a :class="activeTab === 'webhooks' && 'text-white'"
+            <a :class="activeTab === 'webhooks' && 'dark:text-white text-black'"
                @click.prevent="activeTab = 'webhooks'; window.location.hash = 'webhooks'" href="#">Webhooks
            </a>
            @if ($application->git_based())
-                <a :class="activeTab === 'previews' && 'text-white'"
+                <a :class="activeTab === 'previews' && 'dark:text-white text-black'"
                    @click.prevent="activeTab = 'previews'; window.location.hash = 'previews'" href="#">Preview
                    Deployments
                </a>
            @endif
            @if ($application->build_pack !== 'static' && $application->build_pack !== 'dockercompose')
-                <a :class="activeTab === 'health' && 'text-white'"
+                <a :class="activeTab === 'health' && 'dark:text-white text-black'"
                    @click.prevent="activeTab = 'health'; window.location.hash = 'health'" href="#">Healthchecks
                </a>
            @endif
-            <a :class="activeTab === 'rollback' && 'text-white'"
+            <a :class="activeTab === 'rollback' && 'dark:text-white text-black'"
                @click.prevent="activeTab = 'rollback'; window.location.hash = 'rollback'" href="#">Rollback
            </a>
            @if ($application->build_pack !== 'dockercompose')
-                <a :class="activeTab === 'resource-limits' && 'text-white'"
+                <a :class="activeTab === 'resource-limits' && 'dark:text-white text-black'"
                    @click.prevent="activeTab = 'resource-limits'; window.location.hash = 'resource-limits'"
                    href="#">Resource Limits
                </a>
            @endif
-            <a :class="activeTab === 'resource-operations' && 'text-white'"
+            <a :class="activeTab === 'resource-operations' && 'dark:text-white text-black'"
                @click.prevent="activeTab = 'resource-operations'; window.location.hash = 'resource-operations'"
                href="#">Resource Operations
            </a>
-            <a :class="activeTab === 'tags' && 'text-white'"
+            <a :class="activeTab === 'tags' && 'dark:text-white text-black'"
                @click.prevent="activeTab = 'tags'; window.location.hash = 'tags'" href="#">Tags
            </a>
-            <a :class="activeTab === 'danger' && 'text-white'"
+            <a :class="activeTab === 'danger' && 'dark:text-white text-black'"
                @click.prevent="activeTab = 'danger'; window.location.hash = 'danger'" href="#">Danger Zone
            </a>
        </div>
--- a/resources/views/livewire/project/application/deployment/index.blade.php
+++ b/resources/views/livewire/project/application/deployment/index.blade.php
@ -6,39 +6,30 @@
        @if ($skip == 0) wire:poll.5000ms='reload_deployments' @endif>
        <div class="flex items-end gap-2 pt-4">
            <h2>Deployments <span class="text-xs">({{ $deployments_count }})</span></h2>
-            @if ($show_prev)
-                <x-forms.button wire:click="previous_page({{ $default_take }})"><svg class="w-6 h-6" viewBox="0 0 24 24"
-                        xmlns="http://www.w3.org/2000/svg">
+            @if ($deployments_count > 0)
+                <x-forms.button disabled="{{ !$show_prev }}" wire:click="previous_page('{{ $default_take }}')"><svg
+                        class="w-6 h-6" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="2" d="m14 6l-6 6l6 6z" />
                    </svg></x-forms.button>
-            @else
-                <x-forms.button disabled><svg class="w-6 h-6" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-                            stroke-width="2" d="m14 6l-6 6l6 6z" />
-                    </svg></x-forms.button>
-            @endif
-            @if ($show_next)
-                <x-forms.button wire:click="next_page({{ $default_take }})"><svg class="w-6 h-6" viewBox="0 0 24 24"
-                        xmlns="http://www.w3.org/2000/svg">
-                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-                            stroke-width="2" d="m10 18l6-6l-6-6z" />
-                    </svg></x-forms.button>
-            @else
-                <x-forms.button disabled><svg class="w-6 h-6" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <x-forms.button disabled="{{ !$show_next }}" wire:click="next_page('{{ $default_take }}')"><svg
+                        class="w-6 h-6" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="2" d="m10 18l6-6l-6-6z" />
                    </svg></x-forms.button>
            @endif
        </div>
-        <form class="flex items-end gap-2">
-            <x-forms.input id="pull_request_id" label="Pull Request"></x-forms.input>
-            <x-forms.button type="submit">Filter</x-forms.button>
-        </form>
+        @if ($deployments_count > 0)
+            <form class="flex items-end gap-2">
+                <x-forms.input id="pull_request_id" label="Pull Request"></x-forms.input>
+                <x-forms.button type="submit">Filter</x-forms.button>
+            </form>
+        @endif
        @forelse ($deployments as $deployment)
            <a @class([
-                'bg-coolgray-100 p-2 border-l border-dashed transition-colors hover:no-underline',
-                'hover:bg-coolgray-200' => data_get($deployment, 'status') === 'queued',
+                'dark:bg-coolgray-100 p-2 border-l border-dashed transition-colors hover:no-underline',
+                'dark:hover:bg-coolgray-200' =>
+                    data_get($deployment, 'status') === 'queued',
                'border-warning hover:bg-warning hover:text-black' =>
                    data_get($deployment, 'status') === 'in_progress' ||
                    data_get($deployment, 'status') === 'cancelled-by-user',
@ -98,42 +89,44 @@ class="hover:no-underline">
        @empty
            <div class="">No deployments found</div>
        @endforelse
-        <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/utc.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.js"></script>
-        <script>
-            document.addEventListener('alpine:init', () => {
-                let timers = {};
+        @if ($deployments_count > 0)
+            <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
+            <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/utc.js"></script>
+            <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.js"></script>
+            <script>
+                document.addEventListener('alpine:init', () => {
+                    let timers = {};

-                dayjs.extend(window.dayjs_plugin_utc);
-                dayjs.extend(window.dayjs_plugin_relativeTime);
+                    dayjs.extend(window.dayjs_plugin_utc);
+                    dayjs.extend(window.dayjs_plugin_relativeTime);

-                Alpine.data('elapsedTime', (uuid, status, created_at, updated_at) => ({
-                    finished_time: 'calculating...',
-                    started_time: 'calculating...',
-                    init() {
-                        if (timers[uuid]) {
-                            clearInterval(timers[uuid]);
+                    Alpine.data('elapsedTime', (uuid, status, created_at, updated_at) => ({
+                        finished_time: 'calculating...',
+                        started_time: 'calculating...',
+                        init() {
+                            if (timers[uuid]) {
+                                clearInterval(timers[uuid]);
+                            }
+                            if (status === 'in_progress') {
+                                timers[uuid] = setInterval(() => {
+                                    this.finished_time = dayjs().diff(dayjs.utc(created_at),
+                                        'second') + 's'
+                                }, 1000);
+                            } else {
+                                let seconds = dayjs.utc(updated_at).diff(dayjs.utc(created_at), 'second')
+                                this.finished_time = seconds + 's';
+                            }
+                        },
+                        measure_finished_time() {
+                            return this.finished_time;
+                        },
+                        measure_since_started() {
+                            return dayjs.utc(created_at).fromNow();
                        }
-                        if (status === 'in_progress') {
-                            timers[uuid] = setInterval(() => {
-                                this.finished_time = dayjs().diff(dayjs.utc(created_at),
-                                    'second') + 's'
-                            }, 1000);
-                        } else {
-                            let seconds = dayjs.utc(updated_at).diff(dayjs.utc(created_at), 'second')
-                            this.finished_time = seconds + 's';
-                        }
-                    },
-                    measure_finished_time() {
-                        return this.finished_time;
-                    },
-                    measure_since_started() {
-                        return dayjs.utc(created_at).fromNow();
-                    }
-                }))
-            })
-        </script>
+                    }))
+                })
+            </script>
+        @endif
    </div>

 </div>
--- a/resources/views/livewire/project/application/general.blade.php
+++ b/resources/views/livewire/project/application/general.blade.php
@ -51,6 +51,7 @@
                                helper="WARNING: Advanced use cases only. Your docker compose file will be deployed as-is. Nothing is modified by Coolify. You need to configure the proxy parts. More info in the <a href='https://coolify.io/docs/docker/compose#raw-docker-compose-deployment'>documentation.</a>" />
                        </div>
                        @if (count($parsedServices) > 0 && !$application->settings->is_raw_compose_deployment_enabled)
+                        <h3>Domains</h3>
                            @foreach (data_get($parsedServices, 'services') as $serviceName => $service)
                                @if (!isDatabaseImage(data_get($service, 'image')))
                                    <div class="flex items-end gap-2">
--- a/resources/views/livewire/project/application/previews.blade.php
+++ b/resources/views/livewire/project/application/previews.blade.php
@ -15,8 +15,8 @@ class="text-warning">{{ $application->destination->server->name }}</span>.</div>
        @isset($rate_limit_remaining)
            <div class="pt-1 ">Requests remaining till rate limited by Git: {{ $rate_limit_remaining }}</div>
        @endisset
-        @if (count($pull_requests) > 0)
-            <div wire:loading.remove wire:target='load_prs'>
+        <div wire:loading.remove wire:target='load_prs'>
+            @if ($pull_requests->count() > 0)
                <div class="overflow-x-auto table-md">
                    <table>
                        <thead>
@ -50,8 +50,8 @@ class="text-warning">{{ $application->destination->server->name }}</span>.</div>
                        </tbody>
                    </table>
                </div>
-            </div>
-        @endif
+            @endif
+        </div>
    </div>
    @if ($application->previews->count() > 0)
        <div class="pb-4">Previews</div>
--- a/resources/views/livewire/project/application/rollback.blade.php
+++ b/resources/views/livewire/project/application/rollback.blade.php
@ -3,13 +3,13 @@
        <h2>Rollback</h2>
        <x-forms.button wire:click='loadImages(true)'>Reload Available Images</x-forms.button>
    </div>
-    <div class="pb-4 ">You can easily rollback to a previously built <span class="text-warning">(local)</span> images
+    <div class="pb-4 ">You can easily rollback to a previously built (local) images
        quickly.</div>
    <div wire:target='loadImages'>
        <div class="flex flex-wrap">
            @forelse ($images as $image)
                <div class="w-2/4 p-2">
-                    <div class="rounded shadow-lg bg-coolgray-200">
+                    <div class="rounded shadow-lg bg-coolgray-100">
                        <div class="p-2">
                            <div class="">
                                @if (data_get($image, 'is_current'))
--- a/resources/views/livewire/project/clone-me.blade.php
+++ b/resources/views/livewire/project/clone-me.blade.php
@ -1,7 +1,7 @@
 <form>
    <div class="flex flex-col">
        <h1>Clone</h1>
-        <div class="subtitle ">Quickly clone all resources to a new project or environment</div>
+        <div class="subtitle ">Quickly clone all resources to a new project or environment.</div>
    </div>
    <x-forms.input required id="newName" label="New Name" />
    <x-forms.button isHighlighted wire:click="clone('project')" class="mt-4">Clone to a new Project</x-forms.button>
--- a/resources/views/livewire/project/database/import.blade.php
+++ b/resources/views/livewire/project/database/import.blade.php
@ -1,6 +1,6 @@
 <div>
    <h2>Import Backup</h2>
-    <div class="mt-2 mb-4 rounded alert alert-error">
+    <div class="mt-2 mb-4 rounded alert">
        <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
@ -23,7 +23,7 @@
                    <x-forms.input class="mb-2" label="Custom Import Command"
                        wire:model='mariadbRestoreCommand'></x-forms.input>
                @endif
-                <div  x-on:livewire-upload-start="isUploading = true; isFinished = false"
+                <div x-on:livewire-upload-start="isUploading = true; isFinished = false"
                    x-on:livewire-upload-finish="isUploading = false; isFinished = true"
                    x-on:livewire-upload-error="isUploading = false"
                    x-on:livewire-upload-progress="progress = $event.detail.progress">
--- a/resources/views/livewire/project/database/postgresql/general.blade.php
+++ b/resources/views/livewire/project/database/postgresql/general.blade.php
@ -82,7 +82,7 @@
    <div class="pb-16">
        <div class="flex gap-2 pt-4 pb-2">
            <h3>Initialization scripts</h3>
-            <x-forms.button class="btn" onclick="newInitScript.showModal()">+ Add</x-forms.button>
+            <x-forms.button  onclick="newInitScript.showModal()">+ Add</x-forms.button>
        </div>
        <div class="flex flex-col gap-2">
            @forelse(data_get($database,'init_scripts', []) as $script)
--- a/resources/views/livewire/project/delete-environment.blade.php
+++ b/resources/views/livewire/project/delete-environment.blade.php
@ -1,3 +1,3 @@
-<x-new-modal isErrorButton buttonTitle="Delete Environment" disabled="{{ $disabled }}">
+<x-modal-confirmation isErrorButton buttonTitle="Delete Environment" disabled="{{ $disabled }}">
    This environment will be deleted. It is not reversible. <br>Please think again.
-</x-new-modal>
+</x-modal-confirmation>
--- a/resources/views/livewire/project/delete-project.blade.php
+++ b/resources/views/livewire/project/delete-project.blade.php
@ -1,3 +1,3 @@
-<x-new-modal isErrorButton buttonTitle="Delete Project" disabled="{{ $disabled }}">
+<x-modal-confirmation isErrorButton buttonTitle="Delete Project" disabled="{{ $disabled }}">
    This project will be deleted. It is not reversible. <br>Please think again.
-</x-new-modal>
+</x-modal-confirmation>
--- a/resources/views/livewire/project/edit.blade.php
+++ b/resources/views/livewire/project/edit.blade.php
@ -20,7 +20,7 @@
                <livewire:project.shared.environment-variable.add />
            </x-slot:content>
            <button @click="slideOverOpen=true"
-                class="font-normal text-white normal-case border-none rounded btn btn-primary btn-sm no-animation">+
+                class="button">+
                Add</button>
        </x-slide-over>
    </div>
--- a/resources/views/livewire/project/environment-edit.blade.php
+++ b/resources/views/livewire/project/environment-edit.blade.php
@ -50,7 +50,7 @@
                <livewire:project.shared.environment-variable.add />
            </x-slot:content>
            <button @click="slideOverOpen=true"
-                class="font-normal text-white normal-case border-none rounded btn btn-primary btn-sm no-animation">+
+                class="button">+
                Add</button>
        </x-slide-over>
    </div>
--- a/resources/views/livewire/project/index.blade.php
+++ b/resources/views/livewire/project/index.blade.php
@ -1,12 +1,18 @@
 <div>
    <div class="flex gap-2">
-        <h1>Projects</span></h1>
+        <h1>Projects</h1>
        @if ($servers > 0)
-            <x-forms.button class="btn" onclick="newEmptyProject.showModal()">+ Add</x-forms.button>
-            <livewire:project.add-empty />
+            <x-slide-over>
+                <x-slot:title>New Project</x-slot:title>
+                <x-slot:content>
+                    <livewire:project.add-empty />
+                </x-slot:content>
+                <button @click="slideOverOpen=true" class="button">+
+                    Add</button>
+            </x-slide-over>
        @endif
    </div>
-    <div class="subtitle ">All Projects</div>
+    <div class="subtitle">All your projects.</div>
    <div class="grid gap-2 lg:grid-cols-2">
        @if ($servers === 0)
            <div>
@ -17,14 +23,14 @@
            @forelse ($projects as $project)
                <div class="gap-2 border border-transparent cursor-pointer box group" x-data
                    x-on:click="goto('{{ $project->uuid }}')">
-                    <a  class="flex flex-col flex-1 mx-6 hover:no-underline"
+                    <a class="flex flex-col flex-1 mx-6 hover:no-underline"
                        href="{{ route('project.show', ['project_uuid' => data_get($project, 'uuid')]) }}">
                        <div class="font-bold text-white">{{ $project->name }}</div>
                        <div class="description ">
                            {{ $project->description }}</div>
                    </a>
                    <div class="flex items-center">
-                        <a  class="mx-4 rounded group-hover:text-white"
+                        <a class="mx-4 rounded group-hover:text-white"
                            href="{{ route('project.edit', ['project_uuid' => data_get($project, 'uuid')]) }}">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon hover:text-warning" viewBox="0 0 24 24"
                                stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
--- a/resources/views/livewire/project/new/select.blade.php
+++ b/resources/views/livewire/project/new/select.blade.php
@ -10,13 +10,13 @@
        </div>
    </div>
    <div class="pb-4 ">Deploy resources, like Applications, Databases, Services...</div>
-    <div class="flex flex-col gap-4 pt-10 sm:px-20">
+    <div class="flex flex-col gap-4 pt-10">
        @if ($current_step === 'type')
-            <ul class="pb-10 steps">
+            {{-- <ul class="pb-10 steps">
                <li class="step step-secondary">Select Resource Type</li>
                <li class="step">Select a Server</li>
                <li class="step">Select a Destination</li>
-            </ul>
+            </ul> --}}
            <h2>Applications</h2>
            <div class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-3">
                <x-resource-view wire="setType('public')">
@ -167,7 +167,7 @@
                <h2 class="py-4">Services</h2>
                <x-forms.button wire:click="loadServices('force')">Reload List</x-forms.button>
                <input
-                    class="w-full text-white rounded input input-sm bg-coolgray-200 disabled:bg-coolgray-200/50 disabled:border-none placeholder:text-coolgray-500 read-only:text-neutral-500 read-only:bg-coolgray-200/50"
+                    class="input"
                    wire:model.live.debounce.200ms="search" autofocus placeholder="Search...">
            </div>
            <div class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-3">
@ -254,11 +254,11 @@ class="w-full text-white rounded input input-sm bg-coolgray-200 disabled:bg-cool
                companies, and use of them does not imply any affiliation or endorsement.</div>
        @endif
        @if ($current_step === 'servers')
-            <ul class="pb-10 steps">
+            {{-- <ul class="pb-10 steps">
                <li class="step step-secondary">Select Resource Type</li>
                <li class="step step-secondary">Select a Server</li>
                <li class="step">Select a Destination</li>
-            </ul>
+            </ul> --}}

            {{-- @if ($isDatabase)
                <div class="flex items-center justify-center pt-4">
@ -295,11 +295,11 @@ class="w-full text-white rounded input input-sm bg-coolgray-200 disabled:bg-cool
            @endif --}}
        @endif
        @if ($current_step === 'destinations')
-            <ul class="pb-10 steps">
+            {{-- <ul class="pb-10 steps">
                <li class="step step-secondary">Select Resource Type</li>
                <li class="step step-secondary">Select a Server</li>
                <li class="step step-secondary">Select a Destination</li>
-            </ul>
+            </ul> --}}

            <div class="flex flex-col justify-center gap-4 text-left xl:flex-row xl:flex-wrap">
                @if ($server->isSwarm())
--- a/resources/views/livewire/project/resource/index.blade.php
+++ b/resources/views/livewire/project/resource/index.blade.php
@ -3,15 +3,15 @@
        <div class="flex items-center gap-2">
            <h1>Resources</h1>
            @if ($environment->isEmpty())
-                <a class="font-normal text-white normal-case border-none rounded hover:no-underline btn btn-primary btn-sm no-animation"
+                <a class="button"
                    href="{{ route('project.clone-me', ['project_uuid' => data_get($project, 'uuid'), 'environment_name' => request()->route('environment_name')]) }}">
                    Clone
                </a>
            @else
                <a href="{{ route('project.resource.create', ['project_uuid' => request()->route('project_uuid'), 'environment_name' => request()->route('environment_name')]) }}  "
-                    class="font-normal text-white normal-case border-none rounded hover:no-underline btn btn-primary btn-sm no-animation">+
+                    class="button">+
                    New</a>
-                <a class="font-normal text-white normal-case border-none rounded hover:no-underline btn btn-primary btn-sm no-animation"
+                <a class="button"
                    href="{{ route('project.clone-me', ['project_uuid' => data_get($project, 'uuid'), 'environment_name' => request()->route('environment_name')]) }}">
                    Clone
                </a>
@ -45,7 +45,7 @@ class="font-normal text-white normal-case border-none rounded hover:no-underline
            class="items-center justify-center box">+ Add New Resource</a>
    @else
        <div x-data="searchComponent()">
-            <x-forms.input autofocus="true" placeholder="Search for name, fqdn..." class="w-full" x-model="search" />
+            <x-forms.input autofocus placeholder="Search for name, fqdn..." class="w-full" x-model="search" />
            <div class="grid grid-cols-1 gap-4 pt-4 lg:grid-cols-2 xl:grid-cols-3">
                <template x-for="item in filteredApplications" :key="item.id">
                    <span>
@ -54,16 +54,16 @@ class="items-center justify-center box">+ Add New Resource</a>
                                <div class="flex gap-2">
                                    <div class="pb-2 font-bold text-white" x-text="item.name"></div>
                                    <template x-if="item.status.startsWith('running')">
-                                        <div title="running" class="mt-1 bg-success badge badge-xs"></div>
+                                        <div title="running" class="mt-1 bg-success badge "></div>
                                    </template>
                                    <template x-if="item.status.startsWith('exited')">
-                                        <div title="exited" class="mt-1 bg-error badge badge-xs"></div>
+                                        <div title="exited" class="mt-1 bg-error badge "></div>
                                    </template>
                                    <template x-if="item.status.startsWith('restarting')">
-                                        <div title="restarting" class="mt-1 bg-warningbadge badge-xs"></div>
+                                        <div title="restarting" class="mt-1 bg-warningbadge "></div>
                                    </template>
                                    <template x-if="item.status.startsWith('degraded')">
-                                        <div title="degraded" class="mt-1 bg-warning badge badge-xs"></div>
+                                        <div title="degraded" class="mt-1 bg-warning badge "></div>
                                    </template>
                                </div>
                                <div class="max-w-full truncate description" x-text="item.description"></div>
@ -87,16 +87,16 @@ class="items-center justify-center box">+ Add New Resource</a>
                                <div class="flex gap-2">
                                    <div class="pb-2 font-bold text-white" x-text="item.name"></div>
                                    <template x-if="item.status.startsWith('running')">
-                                        <div title="running" class="mt-1 bg-success badge badge-xs"></div>
+                                        <div title="running" class="mt-1 bg-success badge "></div>
                                    </template>
                                    <template x-if="item.status.startsWith('exited')">
-                                        <div title="exited" class="mt-1 bg-error badge badge-xs"></div>
+                                        <div title="exited" class="mt-1 bg-error badge "></div>
                                    </template>
                                    <template x-if="item.status.startsWith('restarting')">
-                                        <div title="restarting" class="mt-1 bg-warningbadge badge-xs"></div>
+                                        <div title="restarting" class="mt-1 bg-warningbadge "></div>
                                    </template>
                                    <template x-if="item.status.startsWith('degraded')">
-                                        <div title="degraded" class="mt-1 bg-warning badge badge-xs"></div>
+                                        <div title="degraded" class="mt-1 bg-warning badge "></div>
                                    </template>
                                </div>
                                <div class="max-w-full truncate description" x-text="item.description"></div>
@ -119,16 +119,16 @@ class="items-center justify-center box">+ Add New Resource</a>
                                <div class="flex gap-2">
                                    <div class="pb-2 font-bold text-white" x-text="item.name"></div>
                                    <template x-if="item.status.startsWith('running')">
-                                        <div title="running" class="mt-1 bg-success badge badge-xs"></div>
+                                        <div title="running" class="mt-1 bg-success badge "></div>
                                    </template>
                                    <template x-if="item.status.startsWith('exited')">
-                                        <div title="exited" class="mt-1 bg-error badge badge-xs"></div>
+                                        <div title="exited" class="mt-1 bg-error badge "></div>
                                    </template>
                                    <template x-if="item.status.startsWith('restarting')">
-                                        <div title="restarting" class="mt-1 bg-warningbadge badge-xs"></div>
+                                        <div title="restarting" class="mt-1 bg-warningbadge "></div>
                                    </template>
                                    <template x-if="item.status.startsWith('degraded')">
-                                        <div title="degraded" class="mt-1 bg-warning badge badge-xs"></div>
+                                        <div title="degraded" class="mt-1 bg-warning badge "></div>
                                    </template>
                                </div>
                                <div class="max-w-full truncate description" x-text="item.description"></div>
@ -151,16 +151,16 @@ class="items-center justify-center box">+ Add New Resource</a>
                                <div class="flex gap-2">
                                    <div class="pb-2 font-bold text-white" x-text="item.name"></div>
                                    <template x-if="item.status.startsWith('running')">
-                                        <div title="running" class="mt-1 bg-success badge badge-xs"></div>
+                                        <div title="running" class="mt-1 bg-success badge "></div>
                                    </template>
                                    <template x-if="item.status.startsWith('exited')">
-                                        <div title="exited" class="mt-1 bg-error badge badge-xs"></div>
+                                        <div title="exited" class="mt-1 bg-error badge "></div>
                                    </template>
                                    <template x-if="item.status.startsWith('restarting')">
-                                        <div title="restarting" class="mt-1 bg-warningbadge badge-xs"></div>
+                                        <div title="restarting" class="mt-1 bg-warningbadge "></div>
                                    </template>
                                    <template x-if="item.status.startsWith('degraded')">
-                                        <div title="degraded" class="mt-1 bg-warning badge badge-xs"></div>
+                                        <div title="degraded" class="mt-1 bg-warning badge "></div>
                                    </template>
                                </div>
                                <div class="max-w-full truncate description" x-text="item.description"></div>
@ -183,16 +183,16 @@ class="items-center justify-center box">+ Add New Resource</a>
                                <div class="flex gap-2">
                                    <div class="pb-2 font-bold text-white" x-text="item.name"></div>
                                    <template x-if="item.status.startsWith('running')">
-                                        <div title="running" class="mt-1 bg-success badge badge-xs"></div>
+                                        <div title="running" class="mt-1 bg-success badge "></div>
                                    </template>
                                    <template x-if="item.status.startsWith('exited')">
-                                        <div title="exited" class="mt-1 bg-error badge badge-xs"></div>
+                                        <div title="exited" class="mt-1 bg-error badge "></div>
                                    </template>
                                    <template x-if="item.status.startsWith('restarting')">
-                                        <div title="restarting" class="mt-1 bg-warningbadge badge-xs"></div>
+                                        <div title="restarting" class="mt-1 bg-warningbadge "></div>
                                    </template>
                                    <template x-if="item.status.startsWith('degraded')">
-                                        <div title="degraded" class="mt-1 bg-warning badge badge-xs"></div>
+                                        <div title="degraded" class="mt-1 bg-warning badge "></div>
                                    </template>
                                </div>
                                <div class="max-w-full truncate description" x-text="item.description"></div>
@ -215,16 +215,16 @@ class="items-center justify-center box">+ Add New Resource</a>
                                <div class="flex gap-2">
                                    <div class="pb-2 font-bold text-white" x-text="item.name"></div>
                                    <template x-if="item.status.startsWith('running')">
-                                        <div title="running" class="mt-1 bg-success badge badge-xs"></div>
+                                        <div title="running" class="mt-1 bg-success badge "></div>
                                    </template>
                                    <template x-if="item.status.startsWith('exited')">
-                                        <div title="exited" class="mt-1 bg-error badge badge-xs"></div>
+                                        <div title="exited" class="mt-1 bg-error badge "></div>
                                    </template>
                                    <template x-if="item.status.startsWith('restarting')">
-                                        <div title="restarting" class="mt-1 bg-warningbadge badge-xs"></div>
+                                        <div title="restarting" class="mt-1 bg-warningbadge "></div>
                                    </template>
                                    <template x-if="item.status.startsWith('degraded')">
-                                        <div title="degraded" class="mt-1 bg-warning badge badge-xs"></div>
+                                        <div title="degraded" class="mt-1 bg-warning badge "></div>
                                    </template>
                                </div>
                                <div class="max-w-full truncate description" x-text="item.description"></div>
@ -247,16 +247,16 @@ class="items-center justify-center box">+ Add New Resource</a>
                                <div class="flex gap-2">
                                    <div class="pb-2 font-bold text-white" x-text="item.name"></div>
                                    <template x-if="item.status.startsWith('running')">
-                                        <div title="running" class="mt-1 bg-success badge badge-xs"></div>
+                                        <div title="running" class="mt-1 bg-success badge "></div>
                                    </template>
                                    <template x-if="item.status.startsWith('exited')">
-                                        <div title="exited" class="mt-1 bg-error badge badge-xs"></div>
+                                        <div title="exited" class="mt-1 bg-error badge "></div>
                                    </template>
                                    <template x-if="item.status.startsWith('restarting')">
-                                        <div title="restarting" class="mt-1 bg-warningbadge badge-xs"></div>
+                                        <div title="restarting" class="mt-1 bg-warningbadge "></div>
                                    </template>
                                    <template x-if="item.status.startsWith('degraded')">
-                                        <div title="degraded" class="mt-1 bg-warning badge badge-xs"></div>
+                                        <div title="degraded" class="mt-1 bg-warning badge "></div>
                                    </template>
                                </div>
                                <div class="max-w-full truncate description" x-text="item.description"></div>
--- a/resources/views/livewire/project/service/storage.blade.php
+++ b/resources/views/livewire/project/service/storage.blade.php
@ -11,13 +11,17 @@
                helper="For Preview Deployments, storage has a <span class='text-helper'>-pr-#PRNumber</span> in their
                    volume
                    name, example: <span class='text-helper'>-pr-1</span>" />
-            <x-forms.button class="btn" onclick="newStorage.showModal()">+ Add</x-forms.button>
-            <livewire:project.shared.storages.add :uuid="$resource->uuid" />
+            <x-slide-over>
+                <x-slot:title>New Persistent Storage</x-slot:title>
+                <x-slot:content>
+                    <livewire:project.shared.storages.add :uuid="$resource->uuid" />
+                </x-slot:content>
+                <button @click="slideOverOpen=true" class="button">+ Add</button>
+            </x-slide-over>
+            {{-- <x-forms.button onclick="newStorage.showModal()">+ Add</x-forms.button> --}}
        </div>
        <div class="pb-4">Persistent storage to preserve data between deployments.</div>
-        @if (
-            $resource->persistentStorages()->get()->count() === 0 &&
-                $resource->fileStorages()->get()->count() == 0)
+        @if ($resource->persistentStorages()->get()->count() === 0 && $resource->fileStorages()->get()->count() == 0)
            <div>No storage found.</div>
        @else
            @if ($resource->persistentStorages()->get()->count() > 0)
@ -33,9 +37,7 @@
            @endif
        @endif
    @else
-        @if (
-            $resource->persistentStorages()->get()->count() > 0 ||
-                $resource->fileStorages()->get()->count() > 0)
+        @if ($resource->persistentStorages()->get()->count() > 0 || $resource->fileStorages()->get()->count() > 0)
            <h3 class="pt-4">{{ Str::headline($resource->name) }} </h3>
        @endif
        @if ($resource->persistentStorages()->get()->count() > 0)
--- a/resources/views/livewire/project/shared/danger.blade.php
+++ b/resources/views/livewire/project/shared/danger.blade.php
@ -5,7 +5,7 @@
    <div class="pb-4">This will stop your containers, delete all related data, etc. Beware! There is no coming
        back!
    </div>
-    <x-new-modal isErrorButton buttonTitle="Delete">
+    <x-modal-confirmation isErrorButton buttonTitle="Delete">
        This resource will be deleted. It is not reversible. <br>Please think again.
-    </x-new-modal>
+    </x-modal-confirmation>
 </div>
--- a/resources/views/livewire/project/shared/destination.blade.php
+++ b/resources/views/livewire/project/shared/destination.blade.php
@ -6,10 +6,10 @@
            <div class="relative flex flex-col text-white cursor-default box-without-bg bg-coolgray-100 w-96">
                <div class="text-xl font-bold">Primary Server</div>
                @if (str($resource->realStatus())->startsWith('running'))
-                    <div title="{{ $resource->realStatus() }}" class="absolute bg-success -top-1 -left-1 badge badge-xs">
+                    <div title="{{ $resource->realStatus() }}" class="absolute bg-success -top-1 -left-1 badge ">
                    </div>
                @elseif (str($resource->realStatus())->startsWith('exited'))
-                    <div title="{{ $resource->realStatus() }}" class="absolute bg-error -top-1 -left-1 badge badge-xs">
+                    <div title="{{ $resource->realStatus() }}" class="absolute bg-error -top-1 -left-1 badge ">
                    </div>
                @endif
                <div>
@ -34,10 +34,10 @@
                    <div class="relative flex flex-col box w-96">
                        @if (str(data_get($destination, 'pivot.status'))->startsWith('running'))
                            <div title="{{ data_get($destination, 'pivot.status') }}"
-                                class="absolute bg-success -top-1 -left-1 badge badge-xs"></div>
+                                class="absolute bg-success -top-1 -left-1 badge "></div>
                        @elseif (str(data_get($destination, 'pivot.status'))->startsWith('exited'))
                            <div title="{{ data_get($destination, 'pivot.status') }}"
-                                class="absolute bg-error -top-1 -left-1 badge badge-xs"></div>
+                                class="absolute bg-error -top-1 -left-1 badge "></div>
                        @endif
                        <div>
                            Server: {{ data_get($destination, 'server.name') }}
@ -55,12 +55,12 @@ class="absolute bg-error -top-1 -left-1 badge badge-xs"></div>
                        <x-forms.button isError
                            wire:click="stop('{{ data_get($destination, 'server.id') }}')">Stop</x-forms.button>
                    @endif
-                    <x-new-modal
+                    <x-modal-confirmation
                        action="removeServer({{ data_get($destination, 'id') }},{{ data_get($destination, 'server.id') }})"
                        isErrorButton buttonTitle="Remove Server">
                        This will stop the running application in this server and remove it as a deployment
                        destination.<br><br>Please think again.
-                    </x-new-modal>
+                    </x-modal-confirmation>

                </div>
            @endforeach
--- a/resources/views/livewire/project/shared/environment-variable/all.blade.php
+++ b/resources/views/livewire/project/shared/environment-variable/all.blade.php
@ -8,8 +8,7 @@
                    <x-slot:content>
                        <livewire:project.shared.environment-variable.add />
                    </x-slot:content>
-                    <button @click="slideOverOpen=true"
-                        class="font-normal text-white normal-case border-none rounded btn btn-primary btn-sm no-animation">+ Add</button>
+                    <button @click="slideOverOpen=true" class="button">+ Add</button>
                </x-slide-over>
            @endif
            <x-forms.button
--- a/resources/views/livewire/project/shared/environment-variable/show.blade.php
+++ b/resources/views/livewire/project/shared/environment-variable/show.blade.php
@ -39,10 +39,10 @@ class="flex flex-col gap-2 p-4 m-2 border lg:items-center border-coolgray-300 lg
        @endif
        <div class="flex gap-2">
            @if ($isLocked)
-                <x-new-modal isErrorButton buttonTitle="Delete">
+                <x-modal-confirmation isErrorButton buttonTitle="Delete">
                    You will delete environment variable <span
                        class="font-bold text-warning">{{ $env->key }}</span>.
-                </x-new-modal>
+                </x-modal-confirmation>
            @else
                @if ($isDisabled)
                    <x-forms.button disabled type="submit">
@ -51,10 +51,10 @@ class="font-bold text-warning">{{ $env->key }}</span>.
                    <x-forms.button wire:click='lock'>
                        Lock
                    </x-forms.button>
-                    <x-new-modal isErrorButton buttonTitle="Delete">
+                    <x-modal-confirmation isErrorButton buttonTitle="Delete">
                        You will delete environment variable <span
                            class="font-bold text-warning">{{ $env->key }}</span>.
-                    </x-new-modal>
+                    </x-modal-confirmation>
                @else
                    <x-forms.button type="submit">
                        Update
@ -62,10 +62,10 @@ class="font-bold text-warning">{{ $env->key }}</span>.
                    <x-forms.button wire:click='lock'>
                        Lock
                    </x-forms.button>
-                    <x-new-modal isErrorButton buttonTitle="Delete">
+                    <x-modal-confirmation isErrorButton buttonTitle="Delete">
                        You will delete environment variable <span
                            class="font-bold text-warning">{{ $env->key }}</span>.
-                    </x-new-modal>
+                    </x-modal-confirmation>
                @endif
            @endif
        </div>
--- a/resources/views/livewire/project/shared/execute-container-command.blade.php
+++ b/resources/views/livewire/project/shared/execute-container-command.blade.php
@ -50,7 +50,7 @@
            @endif
        </div>
    </div>
-    <div class="container w-full pt-10 mx-auto">
+    <div class="w-full pt-10 mx-auto">
        <livewire:activity-monitor header="Command output" />
    </div>
 </div>
--- a/resources/views/livewire/project/shared/resource-operations.blade.php
+++ b/resources/views/livewire/project/shared/resource-operations.blade.php
@ -11,7 +11,7 @@
                <div>
                    <div class="grid grid-cols-1 gap-2 pb-4 lg:grid-cols-4">
                        @foreach ($server->destinations() as $destination)
-                            <x-new-modal action="cloneTo({{ data_get($destination, 'id') }})">
+                            <x-modal-confirmation action="cloneTo({{ data_get($destination, 'id') }})">
                                <x:slot name="content">
                                    <div class="flex flex-col gap-2 box">
                                        <div class="font-bold text-white">{{ $server->name }}</div>
@ -19,7 +19,7 @@
                                    </div>
                                </x:slot>
                                <div>You are about to clone this resource.</div>
-                            </x-new-modal>
+                            </x-modal-confirmation>
                        @endforeach
                    </div>
                </div>
@ -37,7 +37,7 @@ class="font-bold text-warning">{{ $resource->environment->project->name }} /
            @forelse ($projects as $project)
                <div class="flex flex-row flex-wrap gap-2">
                    @foreach ($project->environments as $environment)
-                    <x-new-modal action="moveTo({{ data_get($environment, 'id') }})">
+                    <x-modal-confirmation action="moveTo({{ data_get($environment, 'id') }})">
                        <x:slot name="content">
                            <div class="flex flex-col gap-2 box">
                                <div class="font-bold text-white">{{ $project->name }}</div>
@ -45,7 +45,7 @@ class="font-bold text-warning">{{ $resource->environment->project->name }} /
                            </div>
                        </x:slot>
                        <div>You are about to move this resource.</div>
-                    </x-new-modal>
+                    </x-modal-confirmation>
                    @endforeach
                </div>
            @empty
--- a/resources/views/livewire/project/shared/scheduled-task/add.blade.php
+++ b/resources/views/livewire/project/shared/scheduled-task/add.blade.php
@ -1,15 +1,10 @@
-<dialog id="newTask" class="modal">
-    <form method="dialog" class="flex flex-col gap-2 rounded modal-box" wire:submit='submit'>
-        <h3 class="text-lg font-bold">Add Scheduled Task</h3>
-        <x-forms.input placeholder="Run cron" id="name" label="Name" required />
-        <x-forms.input placeholder="php artisan schedule:run" id="command" label="Command" required />
-        <x-forms.input placeholder="0 0 * * * or daily" id="frequency" label="Frequency" required />
-        <x-forms.input placeholder="php" id="container" helper="You can leave it empty if your resource only have one container." label="Container name" />
-        <x-forms.button onclick="newTask.close()" type="submit">
-            Save
-        </x-forms.button>
-    </form>
-    <form method="dialog" class="modal-backdrop">
-        <button>close</button>
-    </form>
-</dialog>
+<form class="flex flex-col gap-2 rounded" wire:submit='submit'>
+    <x-forms.input placeholder="Run cron" id="name" label="Name"  />
+    <x-forms.input placeholder="php artisan schedule:run" id="command" label="Command"  />
+    <x-forms.input placeholder="0 0 * * * or daily" id="frequency" label="Frequency"  />
+    <x-forms.input placeholder="php" id="container"
+        helper="You can leave it empty if your resource only have one container." label="Container name" />
+    <x-forms.button @click="slideOverOpen=false" type="submit">
+        Save
+    </x-forms.button>
+</form>
--- a/resources/views/livewire/project/shared/scheduled-task/all.blade.php
+++ b/resources/views/livewire/project/shared/scheduled-task/all.blade.php
@ -1,11 +1,15 @@
 <div>
    <div class="flex gap-2">
-        <h2 class="pb-4">Scheduled Tasks</h2>
-        <x-forms.button class="btn" onclick="newTask.showModal()">+ Add</x-forms.button>
-        <livewire:project.shared.scheduled-task.add />
+        <h2>Scheduled Tasks</h2>
+        <x-slide-over>
+            <x-slot:title>New Scheduled Task</x-slot:title>
+            <x-slot:content>
+                <livewire:project.shared.scheduled-task.add />
+            </x-slot:content>
+            <button @click="slideOverOpen=true" class="button">+ Add</button>
+        </x-slide-over>
    </div>
-
-    <div class="flex flex-wrap gap-2">
+    <div class="flex flex-wrap gap-2 pt-4">
        @forelse($resource->scheduled_tasks as $task)
            <a class="flex flex-col box"
                @if ($resource->type() == 'application')
--- a/resources/views/livewire/project/shared/scheduled-task/show.blade.php
+++ b/resources/views/livewire/project/shared/scheduled-task/show.blade.php
@ -13,9 +13,9 @@
                <x-forms.button type="submit">
                    Save
                </x-forms.button>
-                <x-new-modal isErrorButton buttonTitle="Delete Scheduled Task">
+                <x-modal-confirmation isErrorButton buttonTitle="Delete Scheduled Task">
                    You will delete scheduled task <span class="font-bold text-warning">{{ $task->name }}</span>.
-                </x-new-modal>
+                </x-modal-confirmation>
            </div>
        </div>
        <div class="flex w-full gap-2">
--- a/resources/views/livewire/project/shared/storages/add.blade.php
+++ b/resources/views/livewire/project/shared/storages/add.blade.php
@ -1,28 +1,18 @@
-<dialog id="newStorage" class="modal">
-    <form method="dialog" class="flex flex-col gap-2 rounded modal-box" wire:submit='submit'>
-        <h3 class="text-lg font-bold">Add Storage Volume</h3>
-        @if ($isSwarm)
-        <h5>Swarm Mode detected: You need to set a shared volume (EFS/NFS/etc) on all the worker nodes if you would like to use a persistent volumes.</h5>
-        @endif
-        <x-forms.input placeholder="pv-name" id="name" label="Name" required helper="Volume name."  />
-        @if ($isSwarm)
-            <x-forms.input placeholder="/root" id="host_path" label="Source Path" required helper="Directory on the host system." />
-        @else
-            <x-forms.input placeholder="/root" id="host_path" label="Source Path"  helper="Directory on the host system." />
-        @endif
-        <x-forms.input placeholder="/tmp/root" id="mount_path" label="Destination Path" required helper="Directory inside the container." />
-        <x-forms.button type="submit">
-            Save
-        </x-forms.button>
-    </form>
-    <form method="dialog" class="modal-backdrop">
-        <button>close</button>
-    </form>
-    <script>
-        document.addEventListener('livewire:initialized', () => {
-            Livewire.on('closeStorageModal', () => {
-                document.getElementById('newStorage').close()
-            })
-        })
-    </script>
-</dialog>
+<form class="flex flex-col gap-2 rounded" wire:submit='submit'>
+    @if ($isSwarm)
+        <h5>Swarm Mode detected: You need to set a shared volume (EFS/NFS/etc) on all the worker nodes if you would
+            like to use a persistent volumes.</h5>
+    @endif
+    <x-forms.input placeholder="pv-name" id="name" label="Name" required helper="Volume name." />
+    @if ($isSwarm)
+        <x-forms.input placeholder="/root" id="host_path" label="Source Path" required
+            helper="Directory on the host system." />
+    @else
+        <x-forms.input placeholder="/root" id="host_path" label="Source Path" helper="Directory on the host system." />
+    @endif
+    <x-forms.input placeholder="/tmp/root" id="mount_path" label="Destination Path" required
+        helper="Directory inside the container." />
+    <x-forms.button type="submit" @click="slideOverOpen=false">
+        Save
+    </x-forms.button>
+</form>
--- a/resources/views/livewire/project/shared/storages/show.blade.php
+++ b/resources/views/livewire/project/shared/storages/show.blade.php
@ -24,12 +24,12 @@
                <x-forms.button type="submit">
                    Update
                </x-forms.button>
-                <x-new-modal isErrorButton buttonTitle="Delete">
+                <x-modal-confirmation isErrorButton buttonTitle="Delete">
                    This storage will be deleted <span class="font-bold text-warning">{{ $storage->name }}</span>. It
                    is
                    not
                    reversible. <br>Please think again.
-                </x-new-modal>
+                </x-modal-confirmation>
            </div>
        @endif
    </form>
--- a/resources/views/livewire/project/shared/webhooks.blade.php
+++ b/resources/views/livewire/project/shared/webhooks.blade.php
@ -9,7 +9,7 @@
            helper="See details in our <a target='_blank' class='text-white underline' href='https://coolify.io/docs/api/authentication'>documentation</a>."
            label="Deploy Webhook (auth required)" id="deploywebhook"></x-forms.input>
    </div>
-    @if ($resource->type() !== 'service')
+    @if ($resource->type() === 'application')
        <div>
            <h3>Manual Git Webhooks</h3>
            @if ($githubManualWebhook && $gitlabManualWebhook)
@ -35,7 +35,10 @@
                    </div>
                    <div class="flex gap-2">
                        <x-forms.input readonly label="Bitbucket" id="bitbucketManualWebhook"></x-forms.input>
-                        <x-forms.input type="password" helper="Need to set a secret to be able to use this webhook. It should match with the secret in Bitbucket." label="Bitbucket Webhook Secret" id="resource.manual_webhook_secret_bitbucket"></x-forms.input>
+                        <x-forms.input type="password"
+                            helper="Need to set a secret to be able to use this webhook. It should match with the secret in Bitbucket."
+                            label="Bitbucket Webhook Secret"
+                            id="resource.manual_webhook_secret_bitbucket"></x-forms.input>
                    </div>
                    <x-forms.button type="submit">Save</x-forms.button>
                </form>
--- a/resources/views/livewire/project/show.blade.php
+++ b/resources/views/livewire/project/show.blade.php
@ -1,11 +1,17 @@
 <div>
    <div class="flex items-center gap-2">
        <h1>Environments</h1>
-        <x-forms.button class="btn" onclick="newEnvironment.showModal()">+ Add</x-forms.button>
-        <livewire:project.add-environment :project="$project" />
+        <x-slide-over>
+            <x-slot:title>New Environment</x-slot:title>
+            <x-slot:content>
+                <livewire:project.add-environment :project="$project" />
+            </x-slot:content>
+            <button @click="slideOverOpen=true" class="button">+
+                Add</button>
+        </x-slide-over>
        <livewire:project.delete-project :disabled="$project->resource_count() > 0" :project_id="$project->id" />
    </div>
-    <div class="text-xs truncate subtitle lg:text-sm">{{ $project->name }}</div>
+    <div class="text-xs truncate subtitle lg:text-sm">{{ $project->name }}.</div>
    <div class="grid gap-2 lg:grid-cols-2">
        @forelse ($project->environments as $environment)
            <div class="gap-2 border border-transparent cursor-pointer box group" x-data
--- a/resources/views/livewire/run-command.blade.php
+++ b/resources/views/livewire/run-command.blade.php
@ -13,7 +13,7 @@
        <x-forms.button type="submit">Execute Command
        </x-forms.button>
    </form>
-    <div class="container w-full pt-10 mx-auto">
+    <div class="w-full pt-10 mx-auto">
        <livewire:activity-monitor header="Command output" />
    </div>
 </div>
--- a/resources/views/livewire/security/api-tokens.blade.php
+++ b/resources/views/livewire/security/api-tokens.blade.php
@ -12,7 +12,7 @@
        <x-forms.button type="submit">Create New Token</x-forms.button>
    </form>
    @if (session()->has('token'))
-        <div class="pb-4 font-bold text-warning">Please copy this token now. For your security, it won't be shown again.
+        <div class="py-4 font-bold text-warning">Please copy this token now. For your security, it won't be shown again.
        </div>
        <div class="pb-4 font-bold text-white"> {{ session('token') }}</div>
    @endif
--- a/resources/views/livewire/security/private-key/create.blade.php
+++ b/resources/views/livewire/security/private-key/create.blade.php
@ -1,6 +1,6 @@
 <div>
-    <h2>Private Key</h2>
-    <div class="subtitle ">Private Keys are used to connect to your servers without passwords.</div>
+    <h1>Private Key</h1>
+    <div class="subtitle">Private Keys are used to connect to your servers without passwords.</div>
    <x-forms.button class="mb-4" wire:click="generateNewKey">Generate new SSH key for me</x-forms.button>
    <form class="flex flex-col gap-2" wire:submit='createPrivateKey'>
        <div class="flex gap-2">
--- a/resources/views/livewire/security/private-key/show.blade.php
+++ b/resources/views/livewire/security/private-key/show.blade.php
@ -8,9 +8,9 @@
                    Save
                </x-forms.button>
                @if (data_get($private_key, 'id') > 0)
-                    <x-new-modal isErrorButton buttonTitle="Delete">
+                    <x-modal-confirmation isErrorButton buttonTitle="Delete">
                        This private key will be deleted. It is not reversible. <br>Please think again.
-                    </x-new-modal>
+                    </x-modal-confirmation>
                @endif
            </div>
            <x-forms.input id="private_key.name" label="Name" required />
--- a/resources/views/livewire/server/delete.blade.php
+++ b/resources/views/livewire/server/delete.blade.php
@ -8,13 +8,13 @@
        </div>
        @if ($server->definedResources()->count() > 0)
            <div class="pb-2 text-red-500">You need to delete all resources before deleting this server.</div>
-            <x-new-modal disabled isErrorButton buttonTitle="Delete">
+            <x-modal-confirmation disabled isErrorButton buttonTitle="Delete">
                This server will be deleted. It is not reversible. <br>Please think again.
-            </x-new-modal>
+            </x-modal-confirmation>
        @else
-            <x-new-modal isErrorButton buttonTitle="Delete">
+            <x-modal-confirmation isErrorButton buttonTitle="Delete">
                This server will be deleted. It is not reversible. <br>Please think again.
-            </x-new-modal>
+            </x-modal-confirmation>
        @endif
    @endif
 </div>
--- a/resources/views/livewire/server/form.blade.php
+++ b/resources/views/livewire/server/form.blade.php
@ -3,11 +3,11 @@
        <div class="flex gap-2">
            <h2>General</h2>
            @if ($server->id === 0)
-                <x-new-modal buttonTitle="Save" title="Change Localhost" action="submit">
+                <x-modal-confirmation buttonTitle="Save" title="Change Localhost" action="submit">
                    You could lose a lot of functionalities if you change the server details of the server where Coolify
                    is
                    running on.<br>Please think again.
-                </x-new-modal>
+                </x-modal-confirmation>
            @else
                <x-forms.button type="submit">Save</x-forms.button>
                @if ($server->isFunctional())
--- a/resources/views/livewire/server/index.blade.php
+++ b/resources/views/livewire/server/index.blade.php
@ -2,10 +2,11 @@
    <div class="flex items-start gap-2">
        <h1>Servers</h1>
        <a class="text-white hover:no-underline" href="{{ route('server.create') }}">
-            <x-forms.button class="btn">+ Add</x-forms.button>
+            <x-forms.button >+ Add</x-forms.button>
        </a>
    </div>
-    <div class="subtitle ">All Servers</div>
+    <div class="subtitle">All your projects.</div>
+
    <div class="grid gap-2 lg:grid-cols-2">
        @forelse ($servers as $server)
            <a href="{{ route('server.show', ['server_uuid' => data_get($server, 'uuid')]) }}"
--- a/resources/views/livewire/server/log-drains.blade.php
+++ b/resources/views/livewire/server/log-drains.blade.php
@ -1,69 +1,70 @@
 <div>
    <x-server.navbar :server="$server" :parameters="$parameters" />
-    <h2>Log Drains</h2>
-    <div class="pb-4">Sends service logs to 3rd party tools.</div>
-    <div class="flex flex-col gap-4 pt-4">
-        <div class="p-4 border border-coolgray-500">
-            <form wire:submit='submit("newrelic")' class="flex flex-col">
-                <h3>New Relic</h3>
-                <div class="w-32">
-                    <x-forms.checkbox instantSave='instantSave("newrelic")'
-                        id="server.settings.is_logdrain_newrelic_enabled" label="Enabled" />
-                </div>
-                <div class="flex flex-col gap-4">
-                    <div class="flex flex-col w-full gap-2 xl:flex-row">
-                        @if ($server->isLogDrainEnabled())
-                            <x-forms.input disabled type="password" required
-                                id="server.settings.logdrain_newrelic_license_key" label="License Key" />
-                            <x-forms.input disabled required id="server.settings.logdrain_newrelic_base_uri"
-                                placeholder="https://log-api.eu.newrelic.com/log/v1"
-                                helper="For EU use: https://log-api.eu.newrelic.com/log/v1<br>For US use: https://log-api.newrelic.com/log/v1"
-                                label="Endpoint" />
-                        @else
-                            <x-forms.input type="password" required id="server.settings.logdrain_newrelic_license_key"
-                                label="License Key" />
-                            <x-forms.input required id="server.settings.logdrain_newrelic_base_uri"
-                                placeholder="https://log-api.eu.newrelic.com/log/v1"
-                                helper="For EU use: https://log-api.eu.newrelic.com/log/v1<br>For US use: https://log-api.newrelic.com/log/v1"
-                                label="Endpoint" />
-                        @endif
+    @if ($server->isFunctional())
+        <h2>Log Drains</h2>
+        <div class="pb-4">Sends service logs to 3rd party tools.</div>
+        <div class="flex flex-col gap-4 pt-4">
+            <div class="p-4 border border-coolgray-500">
+                <form wire:submit='submit("newrelic")' class="flex flex-col">
+                    <h3>New Relic</h3>
+                    <div class="w-32">
+                        <x-forms.checkbox instantSave='instantSave("newrelic")'
+                            id="server.settings.is_logdrain_newrelic_enabled" label="Enabled" />
                    </div>
-                </div>
-                <div class="flex justify-end gap-4 pt-6">
-                    <x-forms.button type="submit">
-                        Save
-                    </x-forms.button>
-                </div>
-            </form>
+                    <div class="flex flex-col gap-4">
+                        <div class="flex flex-col w-full gap-2 xl:flex-row">
+                            @if ($server->isLogDrainEnabled())
+                                <x-forms.input disabled type="password" required
+                                    id="server.settings.logdrain_newrelic_license_key" label="License Key" />
+                                <x-forms.input disabled required id="server.settings.logdrain_newrelic_base_uri"
+                                    placeholder="https://log-api.eu.newrelic.com/log/v1"
+                                    helper="For EU use: https://log-api.eu.newrelic.com/log/v1<br>For US use: https://log-api.newrelic.com/log/v1"
+                                    label="Endpoint" />
+                            @else
+                                <x-forms.input type="password" required
+                                    id="server.settings.logdrain_newrelic_license_key" label="License Key" />
+                                <x-forms.input required id="server.settings.logdrain_newrelic_base_uri"
+                                    placeholder="https://log-api.eu.newrelic.com/log/v1"
+                                    helper="For EU use: https://log-api.eu.newrelic.com/log/v1<br>For US use: https://log-api.newrelic.com/log/v1"
+                                    label="Endpoint" />
+                            @endif
+                        </div>
+                    </div>
+                    <div class="flex justify-end gap-4 pt-6">
+                        <x-forms.button type="submit">
+                            Save
+                        </x-forms.button>
+                    </div>
+                </form>

-            <h3>Axiom</h3>
-            <div class="w-32">
-                <x-forms.checkbox instantSave='instantSave("axiom")' id="server.settings.is_logdrain_axiom_enabled"
-                    label="Enabled" />
-            </div>
-            <form wire:submit='submit("axiom")' class="flex flex-col">
-                <div class="flex flex-col gap-4">
-                    <div class="flex flex-col w-full gap-2 xl:flex-row">
-                        @if ($server->isLogDrainEnabled())
-                            <x-forms.input disabled type="password" required id="server.settings.logdrain_axiom_api_key"
-                                label="API Key" />
-                            <x-forms.input disabled required id="server.settings.logdrain_axiom_dataset_name"
-                                label="Dataset Name" />
-                        @else
-                            <x-forms.input type="password" required id="server.settings.logdrain_axiom_api_key"
-                                label="API Key" />
-                            <x-forms.input required id="server.settings.logdrain_axiom_dataset_name"
-                                label="Dataset Name" />
-                        @endif
+                <h3>Axiom</h3>
+                <div class="w-32">
+                    <x-forms.checkbox instantSave='instantSave("axiom")' id="server.settings.is_logdrain_axiom_enabled"
+                        label="Enabled" />
+                </div>
+                <form wire:submit='submit("axiom")' class="flex flex-col">
+                    <div class="flex flex-col gap-4">
+                        <div class="flex flex-col w-full gap-2 xl:flex-row">
+                            @if ($server->isLogDrainEnabled())
+                                <x-forms.input disabled type="password" required
+                                    id="server.settings.logdrain_axiom_api_key" label="API Key" />
+                                <x-forms.input disabled required id="server.settings.logdrain_axiom_dataset_name"
+                                    label="Dataset Name" />
+                            @else
+                                <x-forms.input type="password" required id="server.settings.logdrain_axiom_api_key"
+                                    label="API Key" />
+                                <x-forms.input required id="server.settings.logdrain_axiom_dataset_name"
+                                    label="Dataset Name" />
+                            @endif
+                        </div>
                    </div>
-                </div>
-                <div class="flex justify-end gap-4 pt-6">
-                    <x-forms.button type="submit">
-                        Save
-                    </x-forms.button>
-                </div>
-            </form>
-            {{-- <h3>Highlight.io</h3>
+                    <div class="flex justify-end gap-4 pt-6">
+                        <x-forms.button type="submit">
+                            Save
+                        </x-forms.button>
+                    </div>
+                </form>
+                {{-- <h3>Highlight.io</h3>
            <div class="w-32">
                <x-forms.checkbox instantSave='instantSave("highlight")'
                    id="server.settings.is_logdrain_highlight_enabled" label="Enabled" />
@ -81,33 +82,36 @@
                    </x-forms.button>
                </div>
            </form> --}}
-            <h3>Custom FluentBit configuration</h3>
-            <div class="w-32">
-                <x-forms.checkbox instantSave='instantSave("custom")' id="server.settings.is_logdrain_custom_enabled"
-                    label="Enabled" />
+                <h3>Custom FluentBit configuration</h3>
+                <div class="w-32">
+                    <x-forms.checkbox instantSave='instantSave("custom")'
+                        id="server.settings.is_logdrain_custom_enabled" label="Enabled" />
+                </div>
+                <form wire:submit='submit("custom")' class="flex flex-col">
+                    <div class="flex flex-col gap-4">
+                        @if ($server->isLogDrainEnabled())
+                            <x-forms.textarea disabled rows="6" required
+                                id="server.settings.logdrain_custom_config" label="Custom FluentBit Configuration" />
+                            <x-forms.textarea disabled id="server.settings.logdrain_custom_config_parser"
+                                label="Custom Parser Configuration" />
+                        @else
+                            <x-forms.textarea rows="6" required id="server.settings.logdrain_custom_config"
+                                label="Custom FluentBit Configuration" />
+                            <x-forms.textarea id="server.settings.logdrain_custom_config_parser"
+                                label="Custom Parser Configuration" />
+                        @endif
+
+                    </div>
+                    <div class="flex justify-end gap-4 pt-6">
+                        <x-forms.button type="submit">
+                            Save
+                        </x-forms.button>
+                    </div>
+                </form>
+
            </div>
-            <form wire:submit='submit("custom")' class="flex flex-col">
-                <div class="flex flex-col gap-4">
-                    @if ($server->isLogDrainEnabled())
-                        <x-forms.textarea disabled rows="6" required id="server.settings.logdrain_custom_config"
-                            label="Custom FluentBit Configuration" />
-                        <x-forms.textarea disabled id="server.settings.logdrain_custom_config_parser"
-                            label="Custom Parser Configuration" />
-                    @else
-                        <x-forms.textarea rows="6" required id="server.settings.logdrain_custom_config"
-                            label="Custom FluentBit Configuration" />
-                        <x-forms.textarea id="server.settings.logdrain_custom_config_parser"
-                            label="Custom Parser Configuration" />
-                    @endif
-
-                </div>
-                <div class="flex justify-end gap-4 pt-6">
-                    <x-forms.button type="submit">
-                        Save
-                    </x-forms.button>
-                </div>
-            </form>
-
        </div>
-    </div>
+    @else
+        <div>Server is not validated. Validate first.</div>
+    @endif
 </div>
--- a/resources/views/livewire/server/new/by-ip.blade.php
+++ b/resources/views/livewire/server/new/by-ip.blade.php
@ -2,8 +2,7 @@
    @if ($limit_reached)
        <x-limit-reached name="servers" />
    @else
-        <h1>Create a new Server</h1>
-        <div class="subtitle">Servers are the main blocks of your infrastructure.</div>
+        <h1 class="title">New Server</h1>
        <form class="flex flex-col gap-2" wire:submit='submit'>
            <div class="flex gap-2">
                <x-forms.input id="name" label="Name" required />
@ -29,8 +28,8 @@
                <x-forms.checkbox instantSave type="checkbox" id="is_build_server" label="Use it as a build server?" />
            </div>
            <div class="w-96">
-                <h3 class="pt-6">Swarm Support</h3>
-                <div> Swarm support is experimental. Read the docs <a class='text-white'
+                <h3 class="pt-6">Swarm <span class="text-xs text-neutral-500">(experimental)</span></h3>
+                <div class="pb-4">Read the docs <a class='text-white'
                        href='https://coolify.io/docs/docker/swarm#deploy-with-persistent-storage'
                        target='_blank'>here</a>.</div>
                @if ($is_swarm_worker || $is_build_server)
--- a/resources/views/livewire/server/proxy/dynamic-configuration-navbar.blade.php
+++ b/resources/views/livewire/server/proxy/dynamic-configuration-navbar.blade.php
@ -8,7 +8,7 @@
                    :newFile="$newFile" wire:key="{{ $fileName }}" />
            </x-slot:content>
            <button @click="slideOverOpen=true"
-                class="font-normal text-white normal-case border-none rounded btn btn-primary btn-sm no-animation">Edit</button>
+                class="button">Edit</button>
        </x-slide-over>
    </div>
    <x-forms.button isError wire:click="delete('{{ $fileName }}')">Delete</x-forms.button>
--- a/resources/views/livewire/server/proxy/dynamic-configurations.blade.php
+++ b/resources/views/livewire/server/proxy/dynamic-configurations.blade.php
@ -15,7 +15,7 @@
                                    <livewire:server.proxy.new-dynamic-configuration />
                                </x-slot:content>
                                <button @click="slideOverOpen=true"
-                                    class="font-normal text-white normal-case border-none rounded btn btn-primary btn-sm no-animation">+
+                                    class="button">+
                                    Add</button>
                            </x-slide-over>
                        </div>
--- a/resources/views/livewire/server/resources.blade.php
+++ b/resources/views/livewire/server/resources.blade.php
@ -1,142 +1,165 @@
 <div>
    <x-server.navbar :server="$server" :parameters="$parameters" />
-
-    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'managed' }" class="flex h-full">
-        <div class="flex flex-col gap-4 xl:w-32">
-            <a :class="activeTab === 'managed' && 'text-white'"
-                @click.prevent="activeTab = 'managed'; window.location.hash = 'managed'" href="#">Managed</a>
-            <a :class="activeTab === 'unmanaged' && 'text-white'"
-                @click.prevent="activeTab = 'unmanaged'; window.location.hash = 'unmanaged'" href="#">Unmanaged</a>
-        </div>
-        <div class="w-full pl-8">
-            <div x-cloak x-show="activeTab === 'managed'" class="h-full">
-                <div class="flex flex-col">
-                    <div class="flex gap-2">
-                        <h2>Resources</h2>
-                        <x-forms.button wire:click="refreshStatus">Refresh</x-forms.button>
-                    </div>
-                    <div class="pb-4 title">Here you can find all resources that are managed by Coolify.</div>
-                </div>
-                <div class="flex flex-col">
-                    <div class="flex flex-col">
-                        <div class="overflow-x-auto">
-                            <div class="inline-block min-w-full">
-                                <div class="overflow-hidden">
-                                    <table class="min-w-full divide-y divide-coolgray-400">
-                                        <thead>
-                                            <tr class="text-neutral-500">
-                                                <th class="px-5 py-3 text-xs font-medium text-left uppercase">Project
-                                                </th>
-                                                <th class="px-5 py-3 text-xs font-medium text-left uppercase">
-                                                    Environment</th>
-                                                <th class="px-5 py-3 text-xs font-medium text-left uppercase">Name</th>
-                                                <th class="px-5 py-3 text-xs font-medium text-left uppercase">Type</th>
-                                                <th class="px-5 py-3 text-xs font-medium text-left uppercase">Status
-                                                </th>
-                                            </tr>
-                                        </thead>
-                                        <tbody class="divide-y divide-coolgray-400">
-                                            @forelse ($server->definedResources()->sortBy('name',SORT_NATURAL) as $resource)
-                                                <tr class="text-white bg-coolblack hover:bg-coolgray-100">
-                                                    <td class="px-5 py-4 text-sm whitespace-nowrap">
-                                                        {{ data_get($resource->project(), 'name') }}
-                                                    </td>
-                                                    <td class="px-5 py-4 text-sm whitespace-nowrap">
-                                                        {{ data_get($resource, 'environment.name') }}
-                                                    </td>
-                                                    <td class="px-5 py-4 text-sm whitespace-nowrap"><a class=""
-                                                            href="{{ $resource->link() }}">{{ $resource->name }}
-                                                            <x-internal-link /></a>
-                                                    </td>
-                                                    <td class="px-5 py-4 text-sm whitespace-nowrap">
-                                                        {{ str($resource->type())->headline() }}</td>
-                                                    <td class="px-5 py-4 text-sm font-medium whitespace-nowrap">
-                                                        @if ($resource->type() === 'service')
-                                                            <x-status.services :service="$resource" :showRefreshButton="false" />
-                                                        @else
-                                                            <x-status.index :resource="$resource" :showRefreshButton="false" />
-                                                        @endif
-                                                    </td>
-                                                </tr>
-                                            @empty
-                                            @endforelse
-                                        </tbody>
-                                    </table>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+    @if ($server->isFunctional())
+        <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'managed' }" class="flex h-full">
+            <div class="flex flex-col gap-4 xl:w-32">
+                <a :class="activeTab === 'managed' && 'text-white'"
+                    @click.prevent="activeTab = 'managed'; window.location.hash = 'managed'" href="#">Managed</a>
+                <a :class="activeTab === 'unmanaged' && 'text-white'"
+                    @click.prevent="activeTab = 'unmanaged'; window.location.hash = 'unmanaged'"
+                    href="#">Unmanaged</a>
            </div>
-            <div x-cloak x-show="activeTab === 'unmanaged'" class="h-full">
-                <div class="flex flex-col" x-init="$wire.loadUnmanagedContainers()">
-                    <div class="flex gap-2">
-                        <h2>Resources</h2>
-                        <x-forms.button wire:click="refreshStatus">Refresh</x-forms.button>
-                    </div>
-                    <div class="pb-4 title">Here you can find all other containers running on the server.</div>
-                </div>
-                @if ($unmanagedContainers->count() > 0)
+            <div class="w-full pl-8">
+                <div x-cloak x-show="activeTab === 'managed'" class="h-full">
                    <div class="flex flex-col">
+                        <div class="flex gap-2">
+                            <h2>Resources</h2>
+                            <x-forms.button wire:click="refreshStatus">Refresh</x-forms.button>
+                        </div>
+                        <div class="subtitle">Here you can find all resources that are managed by Coolify.</div>
+                    </div>
+                    @if ($server->definedResources()->count() > 0)
                        <div class="flex flex-col">
-                            <div class="overflow-x-auto">
-                                <div class="inline-block min-w-full">
-                                    <div class="overflow-hidden">
-                                        <table class="min-w-full divide-y divide-coolgray-400">
-                                            <thead>
-                                                <tr class="text-neutral-500">
-                                                    <th class="px-5 py-3 text-xs font-medium text-left uppercase">Name
-                                                    </th>
-                                                    <th class="px-5 py-3 text-xs font-medium text-left uppercase">Image
-                                                    </th>
-                                                    <th class="px-5 py-3 text-xs font-medium text-left uppercase">Status
-                                                    </th>
-                                                    <th class="px-5 py-3 text-xs font-medium text-left uppercase">Action
-                                                    </th>
-                                                </tr>
-                                            </thead>
-                                            <tbody class="divide-y divide-coolgray-400">
-                                                @forelse ($unmanagedContainers->sortBy('name',SORT_NATURAL) as $resource)
-                                                    <tr class="text-white bg-coolblack hover:bg-coolgray-100">
-                                                        <td class="px-5 py-4 text-sm whitespace-nowrap">
-                                                            {{ data_get($resource, 'Names') }}
-                                                        </td>
-                                                        <td class="px-5 py-4 text-sm whitespace-nowrap">
-                                                            {{ data_get($resource, 'Image') }}
-                                                        </td>
-                                                        <td class="px-5 py-4 text-sm whitespace-nowrap">
-                                                            {{ data_get($resource, 'State') }}
-                                                        </td>
-                                                        <td class="px-5 py-4 text-sm whitespace-nowrap">
-                                                            @if (data_get($resource, 'State') === 'running')
-                                                                <x-forms.button
-                                                                    wire:click="restartUnmanaged('{{ data_get($resource, 'ID') }}')"
-                                                                    wire:key="{{ data_get($resource, 'ID') }}">Restart</x-forms.button>
-                                                                <x-forms.button isError
-                                                                    wire:click="stopUnmanaged('{{ data_get($resource, 'ID') }}')"
-                                                                    wire:key="{{ data_get($resource, 'ID') }}">Stop</x-forms.button>
-                                                            @elseif (data_get($resource, 'State') === 'exited')
-                                                                <x-forms.button
-                                                                    wire:click="startUnmanaged('{{ data_get($resource, 'ID') }}')"
-                                                                    wire:key="{{ data_get($resource, 'ID') }}">Start</x-forms.button>
-                                                            @elseif (data_get($resource, 'State') === 'restarting')
-                                                                <x-forms.button
-                                                                    wire:click="stopUnmanaged('{{ data_get($resource, 'ID') }}')"
-                                                                    wire:key="{{ data_get($resource, 'ID') }}">Stop</x-forms.button>
-                                                            @endif
-                                                        </td>
+                            <div class="flex flex-col">
+                                <div class="overflow-x-auto">
+                                    <div class="inline-block min-w-full">
+                                        <div class="overflow-hidden">
+                                            <table class="min-w-full divide-y divide-coolgray-400">
+                                                <thead>
+                                                    <tr class="text-neutral-500">
+                                                        <th class="px-5 py-3 text-xs font-medium text-left uppercase">
+                                                            Project
+                                                        </th>
+                                                        <th class="px-5 py-3 text-xs font-medium text-left uppercase">
+                                                            Environment</th>
+                                                        <th class="px-5 py-3 text-xs font-medium text-left uppercase">
+                                                            Name
+                                                        </th>
+                                                        <th class="px-5 py-3 text-xs font-medium text-left uppercase">
+                                                            Type
+                                                        </th>
+                                                        <th class="px-5 py-3 text-xs font-medium text-left uppercase">
+                                                            Status
+                                                        </th>
                                                    </tr>
-                                                @empty
-                                                @endforelse
-                                            </tbody>
-                                        </table>
+                                                </thead>
+                                                <tbody class="divide-y divide-coolgray-400">
+                                                    @forelse ($server->definedResources()->sortBy('name',SORT_NATURAL) as $resource)
+                                                        <tr class="text-white bg-coolblack hover:bg-coolgray-100">
+                                                            <td class="px-5 py-4 text-sm whitespace-nowrap">
+                                                                {{ data_get($resource->project(), 'name') }}
+                                                            </td>
+                                                            <td class="px-5 py-4 text-sm whitespace-nowrap">
+                                                                {{ data_get($resource, 'environment.name') }}
+                                                            </td>
+                                                            <td class="px-5 py-4 text-sm whitespace-nowrap"><a
+                                                                    class=""
+                                                                    href="{{ $resource->link() }}">{{ $resource->name }}
+                                                                    <x-internal-link /></a>
+                                                            </td>
+                                                            <td class="px-5 py-4 text-sm whitespace-nowrap">
+                                                                {{ str($resource->type())->headline() }}</td>
+                                                            <td class="px-5 py-4 text-sm font-medium whitespace-nowrap">
+                                                                @if ($resource->type() === 'service')
+                                                                    <x-status.services :service="$resource"
+                                                                        :showRefreshButton="false" />
+                                                                @else
+                                                                    <x-status.index :resource="$resource"
+                                                                        :showRefreshButton="false" />
+                                                                @endif
+                                                            </td>
+                                                        </tr>
+                                                    @empty
+                                                    @endforelse
+                                                </tbody>
+                                            </table>
+                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
+                    @else
+                        <div>No resources found.</div>
+                    @endif
+                </div>
+                <div x-cloak x-show="activeTab === 'unmanaged'" class="h-full">
+                    <div class="flex flex-col" x-init="$wire.loadUnmanagedContainers()">
+                        <div class="flex gap-2">
+                            <h2>Resources</h2>
+                            <x-forms.button wire:click="refreshStatus">Refresh</x-forms.button>
+                        </div>
+                        <div class="subtitle">Here you can find all other containers running on the server.</div>
                    </div>
-                @endif
+                    @if ($unmanagedContainers->count() > 0)
+                        <div class="flex flex-col">
+                            <div class="flex flex-col">
+                                <div class="overflow-x-auto">
+                                    <div class="inline-block min-w-full">
+                                        <div class="overflow-hidden">
+                                            <table class="min-w-full divide-y divide-coolgray-400">
+                                                <thead>
+                                                    <tr class="text-neutral-500">
+                                                        <th class="px-5 py-3 text-xs font-medium text-left uppercase">
+                                                            Name
+                                                        </th>
+                                                        <th class="px-5 py-3 text-xs font-medium text-left uppercase">
+                                                            Image
+                                                        </th>
+                                                        <th class="px-5 py-3 text-xs font-medium text-left uppercase">
+                                                            Status
+                                                        </th>
+                                                        <th class="px-5 py-3 text-xs font-medium text-left uppercase">
+                                                            Action
+                                                        </th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody class="divide-y divide-coolgray-400">
+                                                    @forelse ($unmanagedContainers->sortBy('name',SORT_NATURAL) as $resource)
+                                                        <tr class="text-white bg-coolblack hover:bg-coolgray-100">
+                                                            <td class="px-5 py-4 text-sm whitespace-nowrap">
+                                                                {{ data_get($resource, 'Names') }}
+                                                            </td>
+                                                            <td class="px-5 py-4 text-sm whitespace-nowrap">
+                                                                {{ data_get($resource, 'Image') }}
+                                                            </td>
+                                                            <td class="px-5 py-4 text-sm whitespace-nowrap">
+                                                                {{ data_get($resource, 'State') }}
+                                                            </td>
+                                                            <td class="px-5 py-4 text-sm whitespace-nowrap">
+                                                                @if (data_get($resource, 'State') === 'running')
+                                                                    <x-forms.button
+                                                                        wire:click="restartUnmanaged('{{ data_get($resource, 'ID') }}')"
+                                                                        wire:key="{{ data_get($resource, 'ID') }}">Restart</x-forms.button>
+                                                                    <x-forms.button isError
+                                                                        wire:click="stopUnmanaged('{{ data_get($resource, 'ID') }}')"
+                                                                        wire:key="{{ data_get($resource, 'ID') }}">Stop</x-forms.button>
+                                                                @elseif (data_get($resource, 'State') === 'exited')
+                                                                    <x-forms.button
+                                                                        wire:click="startUnmanaged('{{ data_get($resource, 'ID') }}')"
+                                                                        wire:key="{{ data_get($resource, 'ID') }}">Start</x-forms.button>
+                                                                @elseif (data_get($resource, 'State') === 'restarting')
+                                                                    <x-forms.button
+                                                                        wire:click="stopUnmanaged('{{ data_get($resource, 'ID') }}')"
+                                                                        wire:key="{{ data_get($resource, 'ID') }}">Stop</x-forms.button>
+                                                                @endif
+                                                            </td>
+                                                        </tr>
+                                                    @empty
+                                                    @endforelse
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    @else
+                        <div>No resources found.</div>
+                    @endif
+                </div>
            </div>
        </div>
-    </div>
+    @else
+        <div>Server is not validated. Validate first.</div>
+    @endif
 </div>
--- a/resources/views/livewire/settings/configuration.blade.php
+++ b/resources/views/livewire/settings/configuration.blade.php
@ -11,7 +11,9 @@
        <div class="flex flex-col gap-2 pt-4">
            <div class="flex items-end gap-2">
                <x-forms.input id="settings.fqdn" label="Instance's Domain" placeholder="https://coolify.io" />
-                <x-forms.input id="settings.custom_dns_servers" label="DNS Servers" helper="DNS servers for validation FQDNS againts. A comma separated list of DNS servers." placeholder="1.1.1.1,8.8.8.8" />
+                <x-forms.input id="settings.custom_dns_servers" label="DNS Servers"
+                    helper="DNS servers for validation FQDNS againts. A comma separated list of DNS servers."
+                    placeholder="1.1.1.1,8.8.8.8" />
                <x-forms.checkbox instantSave id="is_dns_validation_enabled" label="Validate DNS settings?" />
            </div>

@ -22,12 +24,12 @@
        </div>
    </form>
    <h2 class="pt-6">Advanced</h2>
-    <div class="flex flex-col py-6 text-right w-80">
-        @if(!is_null(env('AUTOUPDATE', null)))
+    <div class="text-right w-80">
+        @if (!is_null(env('AUTOUPDATE', null)))
            <x-forms.checkbox instantSave helper="AUTOUPDATE is set in .env file, you need to modify it there." disabled
                id="is_auto_update_enabled" label="Auto Update Coolify" />
        @else
-            <x-forms.checkbox instantSave id="is_auto_update_enabled" label="Auto Update Coolify" />
+            <x-forms.checkbox  instantSave id="is_auto_update_enabled" label="Auto Update Coolify" />
        @endif
        <x-forms.checkbox instantSave id="is_registration_enabled" label="Registration Allowed" />
        <x-forms.checkbox instantSave id="do_not_track" label="Do Not Track" />
--- a/Show More
+++ b/Show More