diff --git a/app/Http/Livewire/Project/Application/Danger.php b/app/Http/Livewire/Project/Application/Danger.php
index 72873665e..4af90927e 100644
--- a/app/Http/Livewire/Project/Application/Danger.php
+++ b/app/Http/Livewire/Project/Application/Danger.php
@@ -4,14 +4,17 @@
 
 use App\Models\Application;
 use Livewire\Component;
+use Visus\Cuid2\Cuid2;
 
 class Danger extends Component
 {
     public Application $application;
     public array $parameters;
+    public string|null $modalId = null;
 
     public function mount()
     {
+        $this->modalId = new Cuid2(7);
         $this->parameters = getRouteParameters();
     }
     public function delete()
diff --git a/app/Http/Livewire/Project/Application/EnvironmentVariable/Add.php b/app/Http/Livewire/Project/Application/EnvironmentVariable/Add.php
index 9b1b78a00..9b35de54f 100644
--- a/app/Http/Livewire/Project/Application/EnvironmentVariable/Add.php
+++ b/app/Http/Livewire/Project/Application/EnvironmentVariable/Add.php
@@ -29,6 +29,7 @@ public function mount()
     }
     public function submit()
     {
+        ray('submitting');
         $this->validate();
         $this->emitUp('submit', [
             'key' => $this->key,
@@ -36,6 +37,7 @@ public function submit()
             'is_build_time' => $this->is_build_time,
             'is_preview' => $this->is_preview,
         ]);
+        $this->clear();
     }
     public function clear()
     {
diff --git a/app/Http/Livewire/Project/Application/EnvironmentVariable/All.php b/app/Http/Livewire/Project/Application/EnvironmentVariable/All.php
index 1dcd605cd..f1ac75917 100644
--- a/app/Http/Livewire/Project/Application/EnvironmentVariable/All.php
+++ b/app/Http/Livewire/Project/Application/EnvironmentVariable/All.php
@@ -5,11 +5,17 @@
 use App\Models\Application;
 use App\Models\EnvironmentVariable;
 use Livewire\Component;
+use Visus\Cuid2\Cuid2;
 
 class All extends Component
 {
     public Application $application;
+    public string|null $modalId = null;
     protected $listeners = ['refreshEnvs', 'submit'];
+    public function mount()
+    {
+        $this->modalId = new Cuid2(7);
+    }
     public function refreshEnvs()
     {
         $this->application->refresh();
@@ -17,6 +23,11 @@ public function refreshEnvs()
     public function submit($data)
     {
         try {
+            $found = $this->application->environment_variables()->where('key', $data['key'])->first();
+            if ($found) {
+                $this->emit('error', 'Environment variable already exists.');
+                return;
+            }
             EnvironmentVariable::create([
                 'key' => $data['key'],
                 'value' => $data['value'],
@@ -27,7 +38,6 @@ public function submit($data)
             $this->application->refresh();
 
             $this->emit('success', 'Environment variable added successfully.');
-            $this->emit('clearAddEnv');
         } catch (\Exception $e) {
             return general_error_handler(err: $e, that: $this);
         }
diff --git a/app/Http/Livewire/Project/Application/EnvironmentVariable/Show.php b/app/Http/Livewire/Project/Application/EnvironmentVariable/Show.php
index 61ecaf3de..c5260e77c 100644
--- a/app/Http/Livewire/Project/Application/EnvironmentVariable/Show.php
+++ b/app/Http/Livewire/Project/Application/EnvironmentVariable/Show.php
@@ -4,12 +4,13 @@
 
 use App\Models\EnvironmentVariable as ModelsEnvironmentVariable;
 use Livewire\Component;
+use Visus\Cuid2\Cuid2;
 
 class Show extends Component
 {
     public $parameters;
     public ModelsEnvironmentVariable $env;
-
+    public string|null $modalId = null;
     protected $rules = [
         'env.key' => 'required|string',
         'env.value' => 'required|string',
@@ -22,6 +23,7 @@ class Show extends Component
     ];
     public function mount()
     {
+        $this->modalId = new Cuid2(7);
         $this->parameters = getRouteParameters();
     }
     public function submit()
diff --git a/app/Http/Livewire/Project/Application/Storages/Show.php b/app/Http/Livewire/Project/Application/Storages/Show.php
index 41c3c1fb8..ef6042baf 100644
--- a/app/Http/Livewire/Project/Application/Storages/Show.php
+++ b/app/Http/Livewire/Project/Application/Storages/Show.php
@@ -3,10 +3,12 @@
 namespace App\Http\Livewire\Project\Application\Storages;
 
 use Livewire\Component;
+use Visus\Cuid2\Cuid2;
 
 class Show extends Component
 {
     public $storage;
+    public string|null $modalId = null;
     protected $rules = [
         'storage.name' => 'required|string',
         'storage.mount_path' => 'required|string',
@@ -17,6 +19,10 @@ class Show extends Component
         'mount_path' => 'mount',
         'host_path' => 'host',
     ];
+    public function mount()
+    {
+        $this->modalId = new Cuid2(7);
+    }
     public function submit()
     {
         $this->validate();
diff --git a/app/Http/Livewire/Server/Form.php b/app/Http/Livewire/Server/Form.php
index fc98c05bf..c7c056665 100644
--- a/app/Http/Livewire/Server/Form.php
+++ b/app/Http/Livewire/Server/Form.php
@@ -5,6 +5,7 @@
 use App\Actions\Server\InstallDocker;
 use App\Models\Server;
 use Livewire\Component;
+use Visus\Cuid2\Cuid2;
 
 class Form extends Component
 {
@@ -13,6 +14,7 @@ class Form extends Component
     public $dockerVersion;
     public string|null $wildcard_domain = null;
     public int $cleanup_after_percentage;
+    public string|null $modalId = null;
 
     protected $rules = [
         'server.name' => 'required|min:6',
@@ -35,6 +37,7 @@ class Form extends Component
     ];
     public function mount()
     {
+        $this->modalId = new Cuid2(7);
         $this->wildcard_domain = $this->server->settings->wildcard_domain;
         $this->cleanup_after_percentage = $this->server->settings->cleanup_after_percentage;
     }
@@ -98,4 +101,4 @@ public function submit()
         $this->server->save();
         $this->emit('success', 'Server updated successfully.');
     }
-}
\ No newline at end of file
+}
diff --git a/app/View/Components/Forms/Button.php b/app/View/Components/Forms/Button.php
new file mode 100644
index 000000000..8621db72a
--- /dev/null
+++ b/app/View/Components/Forms/Button.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\View\Components\Forms;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class Button extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct(
+        public bool $disabled = false,
+        public bool $isModal = false,
+        public string|null $modalId = null,
+        public string $defaultClass = "btn btn-primary btn-xs text-white normal-case no-animation rounded border-none"
+    ) {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.forms.button');
+    }
+}
diff --git a/app/View/Components/Forms/Checkbox.php b/app/View/Components/Forms/Checkbox.php
new file mode 100644
index 000000000..b79066775
--- /dev/null
+++ b/app/View/Components/Forms/Checkbox.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\View\Components\Forms;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+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 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"
+    ) {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.forms.checkbox');
+    }
+}
diff --git a/app/View/Components/Forms/Input.php b/app/View/Components/Forms/Input.php
index 06c077474..c1dc45819 100644
--- a/app/View/Components/Forms/Input.php
+++ b/app/View/Components/Forms/Input.php
@@ -21,8 +21,8 @@ public function __construct(
         public bool $disabled = false,
         public bool $readonly = false,
         public string|null $helper = null,
-        public bool $noDirty = false,
-        public bool $cannotPeakPassword = false,
+        public bool $allowToPeak = true,
+        public string $defaultClass = "input input-sm bg-coolgray-200 rounded text-white w-full disabled:bg-coolgray-200/50 disabled:border-none"
     ) {
     }
 
diff --git a/app/View/Components/Forms/Select.php b/app/View/Components/Forms/Select.php
new file mode 100644
index 000000000..5de29c7cd
--- /dev/null
+++ b/app/View/Components/Forms/Select.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace App\View\Components\Forms;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+use Visus\Cuid2\Cuid2;
+use Illuminate\Support\Str;
+
+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-white text-sm bg-coolgray-200 font-normal"
+    ) {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        if (is_null($this->id)) $this->id = new Cuid2(7);
+        if (is_null($this->name)) $this->name = $this->id;
+
+        $this->label = Str::title($this->label);
+        return view('components.forms.select');
+    }
+}
diff --git a/app/View/Components/Forms/Textarea.php b/app/View/Components/Forms/Textarea.php
new file mode 100644
index 000000000..f4d1f0bee
--- /dev/null
+++ b/app/View/Components/Forms/Textarea.php
@@ -0,0 +1,43 @@
+<?php
+
+namespace App\View\Components\Forms;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+use Visus\Cuid2\Cuid2;
+use Illuminate\Support\Str;
+
+class Textarea extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct(
+        public string|null $id = null,
+        public string|null $name = null,
+        public string|null $type = 'text',
+        public string|null $value = null,
+        public string|null $label = null,
+        public string|null $placeholder = null,
+        public bool $required = false,
+        public bool $disabled = false,
+        public bool $readonly = false,
+        public string|null $helper = null,
+        public string $defaultClass = "textarea bg-coolgray-200 rounded text-white scrollbar disabled:bg-coolgray-200/50 disabled:border-none"
+    ) {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        if (is_null($this->id)) $this->id = new Cuid2(7);
+        if (is_null($this->name)) $this->name = $this->id;
+
+        $this->label = Str::title($this->label);
+        return view('components.forms.textarea');
+    }
+}
diff --git a/app/View/Components/Modal.php b/app/View/Components/Modal.php
new file mode 100644
index 000000000..b317d3c44
--- /dev/null
+++ b/app/View/Components/Modal.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+use Visus\Cuid2\Cuid2;
+
+class Modal extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct(
+        public string $modalId,
+        public string $modalTitle,
+        public string|null $modalBody = null,
+        public string|null $modalSubmit = null,
+        public bool $yesOrNo = false,
+        public string $action = 'delete'
+    ) {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.modal');
+    }
+}
diff --git a/package-lock.json b/package-lock.json
index 3c31ddffc..641f42213 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,7 +7,7 @@
             "dependencies": {
                 "@tailwindcss/typography": "0.5.9",
                 "alpinejs": "3.12.2",
-                "daisyui": "3.0.3",
+                "daisyui": "3.2.1",
                 "tailwindcss-scrollbar": "0.1.0"
             },
             "devDependencies": {
@@ -941,21 +941,22 @@
             "dev": true
         },
         "node_modules/daisyui": {
-            "version": "3.0.3",
-            "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.0.3.tgz",
-            "integrity": "sha512-RSbXsEBj2LonvjOKEI0I64F5xFJrFrthPgxRNeAZKmACQ3NoIoP45lO6UXLW3bm8PVOUGpKf1Br2SWwc1NqnHQ==",
+            "version": "3.2.1",
+            "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.2.1.tgz",
+            "integrity": "sha512-gIqE6wiqoJt9G8+n3R/SwLeUnpNCE2eDhT73rP0yZYVaM7o6zVcakBH3aEW5RGpx3UkonPiLuvcgxRcb2lE8TA==",
             "dependencies": {
                 "colord": "^2.9",
                 "css-selector-tokenizer": "^0.8",
+                "postcss": "^8",
                 "postcss-js": "^4",
                 "tailwindcss": "^3"
             },
+            "engines": {
+                "node": ">=16.9.0"
+            },
             "funding": {
                 "type": "opencollective",
                 "url": "https://opencollective.com/daisyui"
-            },
-            "peerDependencies": {
-                "postcss": "^8"
             }
         },
         "node_modules/delayed-stream": {
diff --git a/package.json b/package.json
index 2884c7466..ed81d6a26 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "dependencies": {
         "@tailwindcss/typography": "0.5.9",
         "alpinejs": "3.12.2",
-        "daisyui": "3.0.3",
+        "daisyui": "3.2.1",
         "tailwindcss-scrollbar": "0.1.0"
     }
 }
\ No newline at end of file
diff --git a/resources/css/app.css b/resources/css/app.css
index b788c6e6d..5bca7271f 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -2,19 +2,22 @@
 @tailwind components;
 @tailwind utilities;
 
-.scrollbar {
-    @apply scrollbar-thumb-coollabs-100 scrollbar-track-coolgray-200 scrollbar-w-2;
-}
 html {
     @apply text-neutral-400;
 }
 body {
     @apply text-sm antialiased scrollbar;
 }
+button[isError] {
+    @apply bg-red-600 hover:bg-red-500;
+}
+.scrollbar {
+    @apply scrollbar-thumb-coollabs-100 scrollbar-track-coolgray-200 scrollbar-w-2;
+}
 .main {
     @apply max-w-screen-xl pt-4 pl-24 pr-10 mx-auto;
 }
-input {
+/* input {
     @apply w-full text-white rounded outline-none input input-sm h-7 placeholder:text-neutral-700 bg-coolgray-200 read-only:bg-coolgray-200/50 read-only:text-opacity-25;
 }
 input:not(input[type="checkbox"]) {
@@ -22,14 +25,14 @@ input:not(input[type="checkbox"]) {
 }
 input[type="checkbox"] {
     @apply rounded toggle toggle-warning toggle-xs disabled:toggle-warning;
-}
+} */
 
-textarea {
+/* textarea {
     @apply text-xs leading-5 text-white rounded textarea read-only:bg-coolgray-200/50 disabled:border-none read-only:text-opacity-25 placeholder:text-neutral-700 scrollbar bg-coolgray-200;
 }
 select {
     @apply font-normal text-white border-none rounded h-7 select select-xs disabled:bg-coolgray-200 disabled:opacity-50 placeholder:text-neutral-700 bg-coolgray-200;
-}
+} */
 .label-text,
 label {
     @apply text-neutral-400;
@@ -39,12 +42,12 @@ .loading {
     @apply w-4 text-warning;
 }
 
-button[isWarning] {
+/* button[isWarning] {
     @apply bg-red-600 hover:bg-red-500;
 }
 button[isHighlighted] {
     @apply text-white btn-primary;
-}
+} */
 h1 {
     @apply text-3xl font-bold text-white;
 }
diff --git a/resources/views/components/applications/actions.blade.php b/resources/views/components/applications/actions.blade.php
index 141a9b151..fe5b235fc 100644
--- a/resources/views/components/applications/actions.blade.php
+++ b/resources/views/components/applications/actions.blade.php
@@ -8,7 +8,7 @@
                 class="relative text-xs text-white normal-case rounded -ml-44 min-w-max menu bg-coolgray-200">
                 @if ($application->status === 'running')
                     <li>
-                        <div class="rounded-none hover:bg-coollabs" wire:click='deploy'><svg
+                        <div class="rounded-none hover:bg-coollabs hover:text-white" wire:click='deploy'><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" />
@@ -19,10 +19,10 @@ class="relative text-xs text-white normal-case rounded -ml-44 min-w-max menu bg-
                             </svg>Restart</div>
                     </li>
                     <li>
-                        <div class="rounded-none hover:bg-coollabs" wire:click='force_deploy_without_cache'><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">
+                        <div class="rounded-none hover:bg-coollabs hover:text-white"
+                            wire:click='force_deploy_without_cache'><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="M12.983 8.978c3.955 -.182 7.017 -1.446 7.017 -2.978c0 -1.657 -3.582 -3 -8 -3c-1.661 0 -3.204 .19 -4.483 .515m-2.783 1.228c-.471 .382 -.734 .808 -.734 1.257c0 1.22 1.944 2.271 4.734 2.74" />
@@ -35,7 +35,7 @@ class="relative text-xs text-white normal-case rounded -ml-44 min-w-max menu bg-
                         </div>
                     </li>
                     <li>
-                        <div class="rounded-none hover:bg-red-500" wire:click='stop'><svg
+                        <div class="rounded-none hover:bg-red-500 hover:text-white" wire:click='stop'><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">
@@ -49,7 +49,7 @@ class="relative text-xs text-white normal-case rounded -ml-44 min-w-max menu bg-
                     </li>
                 @else
                     <li>
-                        <div class="rounded-none hover:bg-coollabs" wire:click='deploy'><svg
+                        <div class="rounded-none hover:bg-coollabs hover:text-white" wire:click='deploy'><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">
@@ -60,7 +60,7 @@ class="relative text-xs text-white normal-case rounded -ml-44 min-w-max menu bg-
                     <li>
                     </li>
                     <li>
-                        <div class="rounded-none hover:bg-coollabs" wire:click='deploy(true)'><svg
+                        <div class="rounded-none hover:bg-coollabs hover:text-white" wire:click='deploy(true)'><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">
diff --git a/resources/views/components/applications/links.blade.php b/resources/views/components/applications/links.blade.php
index 4a8e14672..b410cf0e1 100644
--- a/resources/views/components/applications/links.blade.php
+++ b/resources/views/components/applications/links.blade.php
@@ -6,7 +6,8 @@
     <div class="absolute 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">
             <li>
-                <a target="_blank" class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs"
+                <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
@@ -15,8 +16,8 @@
             @if (data_get($application, 'fqdn'))
                 @foreach (Str::of(data_get($application, 'fqdn'))->explode(',') as $fqdn)
                     <li>
-                        <a class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs" target="_blank"
-                            href="{{ $fqdn }}">
+                        <a class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs hover:text-white"
+                            target="_blank" href="{{ $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">
@@ -34,7 +35,7 @@
                 @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"
+                            <a class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs hover:text-white"
                                 target="_blank" href="{{ 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"
@@ -55,7 +56,7 @@
                 @foreach ($application->ports_mappings_array as $port)
                     @if (isDev())
                         <li>
-                            <a class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs"
+                            <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"
@@ -70,7 +71,7 @@
                         </li>
                     @else
                         <li>
-                            <a class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs"
+                            <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"
diff --git a/resources/views/components/forms/button.blade.php b/resources/views/components/forms/button.blade.php
index efa7d9644..318d126ea 100644
--- a/resources/views/components/forms/button.blade.php
+++ b/resources/views/components/forms/button.blade.php
@@ -1,46 +1,18 @@
-@props([
-    'type' => $attributes->get('type') ?? 'button',
-    'disabled' => null,
-    'confirm' => null,
-    'confirmAction' => null,
-    'tooltip' => null,
-])
-@isset($tooltip)
-    <div class="tooltip tooltip-warning" data-tip="{{ $tooltip }}">
-    @endisset
-    @if ($type === 'submit')
-        <button
-            {{ $attributes->class(['btn btn-xs border-none no-animation normal-case text-white rounded', 'hover:bg-coolgray-400 bg-coolgray-200 h-7' => !$attributes->has('class')]) }}
-            type="submit" @if ($disabled !== null) disabled @endif
-            @isset($confirm)
+<button @disabled($disabled) {{ $attributes->merge(['class' => $defaultClass]) }}
+    {{ $attributes->merge(['type' => 'button']) }}
+    @isset($confirm)
         x-on:click="toggleConfirmModal('{{ $confirm }}', '{{ explode('(', $confirmAction)[0] }}')"
     @endisset
-            @isset($confirmAction)
+    @isset($confirmAction)
         x-on:{{ explode('(', $confirmAction)[0] }}.window="$wire.{{ explode('(', $confirmAction)[0] }}"
-    @endisset>
-            @if ($attributes->whereStartsWith('wire:click')->first())
-                <span wire:target="submit" wire:loading.delay class="loading loading-spinner"></span>
-            @endif
-            {{ $slot }}
-        </button>
-    @elseif($type === 'button')
-        <button
-            {{ $attributes->class(['btn btn-xs border-none no-animation normal-case text-white rounded', 'hover:bg-coolgray-400 bg-coolgray-200 h-7' => !$attributes->has('class')]) }}
-            @if ($disabled !== null) disabled @endif type="button"
-            @isset($confirm)
-        x-on:click="toggleConfirmModal('{{ $confirm }}', '{{ explode('(', $confirmAction)[0] }}')"
     @endisset
-            @isset($confirmAction)
-        x-on:{{ explode('(', $confirmAction)[0] }}.window="$wire.{{ explode('(', $confirmAction)[0] }}"
-    @endisset>
-            @if ($attributes->whereStartsWith('wire:click')->first())
-                <span wire:target="{{ explode('(', $attributes->whereStartsWith('wire:click')->first())[0] }}"
-                    wire:loading.delay class="loading loading-spinner"></span>
-            @endif
-            {{ $slot }}
-        </button>
-    @endif
+    @if ($isModal) onclick="{{ $modalId }}.showModal()" @endif>
 
-    @isset($tooltip)
-    </div>
-@endisset
+    @if ($attributes->get('type') === 'submit')
+        <span wire:target="submit" wire:loading.delay class="loading loading-xs text-warning loading-spinner"></span>
+    @else
+        <span wire:target="{{ explode('(', $attributes->whereStartsWith('wire:click')->first())[0] }}" wire:loading.delay
+            class="loading loading-xs loading-spinner"></span>
+    @endif
+    {{ $slot }}
+</button>
diff --git a/resources/views/components/forms/checkbox.blade.php b/resources/views/components/forms/checkbox.blade.php
index 47c579b1a..743acfd81 100644
--- a/resources/views/components/forms/checkbox.blade.php
+++ b/resources/views/components/forms/checkbox.blade.php
@@ -1,39 +1,29 @@
-@props([
-    'id' => $attributes->has('id') || $attributes->has('label'),
-    'required' => $attributes->has('required'),
-    'label' => $attributes->has('label'),
-    'helper' => $attributes->has('helper'),
-    'instantSave' => $attributes->has('instantSave'),
-    'noLabel' => $attributes->has('noLabel'),
-    'noDirty' => $attributes->has('noDirty'),
-    'disabled' => null,
-])
-<div {{ $attributes->merge(['class' => 'flex cursor-pointer label']) }}>
-    <div class="flex gap-1 label-text">
-        @if ($label)
-            {{ $label }}
-        @else
-            {{ $id }}
-        @endif
-        @if ($helper)
-            <div class="group w-fit">
-                <div class="cursor-pointer text-warning">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                        class="w-4 h-4 stroke-current">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                    </svg>
-                </div>
-                <div class="absolute hidden text-xs group-hover:block border-coolgray-400 bg-coolgray-500">
-                    <div class="p-4 card-body">
-                        {!! $helper !!}
+<div class="form-control min-w-fit">
+    <label class="flex gap-4 cursor-pointer label">
+        <span class="flex gap-2 label-text min-w-fit">
+            @if ($label)
+                {{ $label }}
+            @else
+                {{ $id }}
+            @endif
+            @if ($helper)
+                <div class="group w-fit">
+                    <div class="cursor-pointer text-warning">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                            class="w-4 h-4 stroke-current">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                        </svg>
+                    </div>
+                    <div class="absolute hidden text-xs group-hover:block border-coolgray-400 bg-coolgray-500">
+                        <div class="p-4 card-body">
+                            {!! $helper !!}
+                        </div>
                     </div>
                 </div>
-            </div>
-        @endif
-    </div>
-    <div class="flex-1"></div>
-    <input type="checkbox" @if ($disabled !== null) disabled @endif name={{ $id }}
-        @if (!$noDirty) wire:dirty.class="input-warning" @endif
-        @if ($instantSave) wire:click='{{ $instantSave === 'instantSave' || $instantSave == '1' ? 'instantSave' : $instantSave }}' wire:model.defer={{ $id }} @else wire:model.defer={{ $value ?? $id }} @endif />
+            @endif
+        </span>
+        <input @disabled($disabled) type="checkbox" {{ $attributes->merge(['class' => $defaultClass]) }}
+            @if ($instantSave) wire:click='{{ $instantSave === 'instantSave' || $instantSave == '1' ? 'instantSave' : $instantSave }}' wire:model.defer={{ $id }} @else wire:model.defer={{ $value ?? $id }} @endif />
+    </label>
 </div>
diff --git a/resources/views/components/forms/input.blade.php b/resources/views/components/forms/input.blade.php
index 33df229fe..3631482e0 100644
--- a/resources/views/components/forms/input.blade.php
+++ b/resources/views/components/forms/input.blade.php
@@ -1,58 +1,40 @@
 <div class="w-full">
     @if ($label)
-        <label class="label">
-            <span class="flex gap-1 label-text">
-                {{ $label }}
-                @if ($required)
-                    <span class="text-warning">*</span>
-                @endif
-                @if ($helper)
-                    <x-helper :helper="$helper" />
-                @endif
-            </span>
+        <label for="small-input"
+            class="flex items-center gap-1 mb-2 text-sm font-medium text-neutral-400">{{ $label }}
+            @if ($required)
+                <span class="text-warning">*</span>
+            @endif
+            @if ($helper)
+                <x-helper :helper="$helper" />
+            @endif
         </label>
     @endif
-
-    <div class="w-full">
-        @if ($type === 'password')
-            <div class="w-full rounded join" x-data>
-                <input {{ $attributes }} class="join-item" wire:model.defer={{ $id }}
-                    wire:dirty.class="input-warning" wire:loading.attr='disabled' @readonly($readonly)
-                    @disabled($disabled) type={{ $type }} id={{ $id }}
-                    name={{ $name }} @isset($value) value={{ $value }} @endisset
-                    @isset($placeholder) placeholder={{ $placeholder }} @endisset>
-                @if (!$cannotPeakPassword)
-                    <span x-on:click="changePasswordFieldType" x-cloak @class([
-                        'border-l-0 border-none rounded-r no-animation h-7 btn join-item btn-xs',
-                        'bg-coolgray-200/50 hover:bg-coolgray-200/50 text-opacity-25' =>
-                            $disabled || $readonly,
-                        'bg-coolgray-200 hover:bg-coolgray-200' => !$disabled || !$readonly,
-                    ])><svg
-                            xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 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 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
-                            <path
-                                d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
-                        </svg>
-                    </span>
-                @endif
-            </div>
-        @else
-            <input {{ $attributes }} id={{ $id }} name={{ $name }}
-                wire:model.defer={{ $id }} wire:dirty.class="input-warning" wire:loading.attr='disabled'
-                @readonly($readonly) @disabled($disabled)
-                @isset($value) value="{{ $value }}" @endisset
-                @isset($placeholder) placeholder="{{ $placeholder }}" @endisset>
-        @endif
-        @if (!$label && $helper)
-            <x-helper :helper="$helper" />
-        @endif
-        @error($id)
-            <label class="label">
-                <span class="text-red-500 label-text-alt">{{ $message }}</span>
-            </label>
-        @enderror
-    </div>
+    @if ($type !== 'password')
+        <input {{ $attributes->merge(['class' => $defaultClass]) }} @required($required)
+            wire:model.defer={{ $id }} wire:dirty.class.remove='text-white'
+            wire:dirty.class="text-black bg-warning" wire:loading.attr="disabled" type="{{ $type }}"
+            @disabled($disabled) id="{{ $id }}" name="{{ $name }}">
+    @elseif ($type === 'password')
+        <div class="relative" x-data>
+            @if ($allowToPeak)
+                <div x-on:click="changePasswordFieldType"
+                    class="absolute inset-y-0 left-0 flex items-center pl-2 cursor-pointer hover:text-white">
+                    <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="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+                        <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
+                    </svg>
+                </div>
+            @endif
+            <input {{ $attributes->merge(['class' => $defaultClass . ' pl-10']) }} @required($required)
+                wire:model.defer={{ $id }} wire:dirty.class.remove='text-white'
+                wire:dirty.class="text-black bg-warning" wire:loading.attr="disabled" type="{{ $type }}"
+                @disabled($disabled) id="{{ $id }}" name="{{ $name }}">
+        </div>
+    @endif
+    @if (!$label && $helper)
+        <x-helper :helper="$helper" />
+    @endif
 </div>
diff --git a/resources/views/components/forms/select.blade.php b/resources/views/components/forms/select.blade.php
index f19845fda..fc4e34e3c 100644
--- a/resources/views/components/forms/select.blade.php
+++ b/resources/views/components/forms/select.blade.php
@@ -1,43 +1,18 @@
-@props([
-    'id' => null,
-    'label' => null,
-    'helper' => $attributes->has('helper'),
-    'required' => false,
-])
-
-<div {{ $attributes->merge(['class' => 'flex flex-col']) }}>
+<div class="w-full">
     @if ($label)
-        <label class="label" for={{ $id }}>
-            <span class="flex gap-1 label-text">
-                {{ $label }}
-                @if ($required)
-                    <span class="text-warning">*</span>
-                @endif
-                @if ($helper)
-                    <div class="group">
-                        <div class="cursor-pointer text-warning">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                                class="w-4 h-4 stroke-current">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                            </svg>
-                        </div>
-                        <div class="absolute hidden text-xs group-hover:block border-coolgray-400 bg-coolgray-500">
-                            <div class="p-4 card-body">
-                                {!! $helper !!}
-                            </div>
-                        </div>
-                    </div>
-                @endif
-            </span>
+        <label for="small-input"
+            class="flex items-center gap-1 mb-2 text-sm font-medium text-neutral-400">{{ $label }}
+            @if ($required)
+                <span class="text-warning">*</span>
+            @endif
+            @if ($helper)
+                <x-helper :helper="$helper" />
+            @endif
         </label>
     @endif
-    <select {{ $attributes }}
-        @if ($id) name={{ $id }} wire:model.defer={{ $id }} @endif>
+    <select {{ $attributes->merge(['class' => $defaultClass]) }} @required($required)
+        wire:dirty.class="text-black bg-warning" wire:loading.attr="disabled" name={{ $id }}
+        wire:model.defer={{ $id }}>
         {{ $slot }}
     </select>
-
-    @error($id)
-        <div class="text-red-500">{{ $message }}</div>
-    @enderror
 </div>
diff --git a/resources/views/components/forms/textarea.blade.php b/resources/views/components/forms/textarea.blade.php
index 9a782db0a..08ea20653 100644
--- a/resources/views/components/forms/textarea.blade.php
+++ b/resources/views/components/forms/textarea.blade.php
@@ -1,13 +1,4 @@
-@props([
-    'id' => $attributes->has('id'),
-    'label' => $attributes->has('label'),
-    'required' => null,
-    'disabled' => null,
-    'helper' => $attributes->has('helper'),
-    'noDirty' => $attributes->has('noDirty'),
-])
-
-<div class=" form-control">
+<div class="form-control">
     @if ($label)
         <label class="label">
             <span class="label-text">
@@ -38,11 +29,9 @@ class="w-4 h-4 stroke-current">
             </span>
         </label>
     @endif
-    <textarea {{ $attributes }}
-        @if ($id) name={{ $id }} wire:model.defer={{ $id }} @endisset
-        @if ($disabled !== null) disabled @endif
-        @if ($required !== null) required @endif name={{ $id }} wire:model.defer={{ $value ?? $id }}
-        @if (!$noDirty) wire:dirty.class="input-warning" @endif></textarea>
+    <textarea {{ $attributes->merge(['class' => $defaultClass]) }} @required($required) wire:model.defer={{ $id }}
+        @disabled($disabled) id="{{ $id }}" name="{{ $name }}" name={{ $id }}
+        wire:model.defer={{ $value ?? $id }} wire:dirty.class="input-warning"></textarea>
     @error($id)
         <label class="label">
             <span class="text-red-500 label-text-alt">{{ $message }}</span>
diff --git a/resources/views/components/layout-simple.blade.php b/resources/views/components/layout-simple.blade.php
index 604768ccd..e4481af85 100644
--- a/resources/views/components/layout-simple.blade.php
+++ b/resources/views/components/layout-simple.blade.php
@@ -30,7 +30,14 @@
     <x-version class="fixed left-2 bottom-1" />
     <script>
         function changePasswordFieldType(event) {
-            const element = event.target.parentElement.parentElement.children[0];
+            let element = event.target
+            for (let i = 0; i < 10; i++) {
+                if (element.className === "relative") {
+                    break;
+                }
+                element = element.parentElement;
+            }
+            element = element.children[1];
             if (element.nodeName === 'INPUT') {
                 if (element.type === 'password') {
                     element.type = 'text';
@@ -38,20 +45,6 @@ function changePasswordFieldType(event) {
                     element.type = 'password';
                 }
             }
-            if (element.nodeName === 'DIV') {
-                if (element.children[0].type === 'password') {
-                    element.children[0].type = 'text';
-                } else {
-                    element.children[0].type = 'password';
-                }
-            }
-            if (element.nodeName === 'svg') {
-                if (element.parentElement.parentElement.children[0].type === 'password') {
-                    element.parentElement.parentElement.children[0].type = 'text';
-                } else {
-                    element.parentElement.parentElement.children[0].type = 'password';
-                }
-            }
         }
     </script>
 </body>
diff --git a/resources/views/components/layout.blade.php b/resources/views/components/layout.blade.php
index 36668c6a2..b69b54fa2 100644
--- a/resources/views/components/layout.blade.php
+++ b/resources/views/components/layout.blade.php
@@ -17,9 +17,9 @@
     <meta name="csrf-token" content="{{ csrf_token() }}">
     @vite(['resources/js/app.js', 'resources/css/app.css'])
     <style>
-    [x-cloak] {
-        display: none !important;
-    }
+        [x-cloak] {
+            display: none !important;
+        }
     </style>
     @livewireStyles
 </head>
@@ -27,107 +27,100 @@
 <body>
     @livewireScripts
     @auth
-    <x-toaster-hub />
-    <x-navbar />
-    <div class="fixed top-3 left-4" id="vue">
-        <magic-bar></magic-bar>
-    </div>
-    <main class="main">
-        {{ $slot }}
-    </main>
-    <x-version class="fixed left-2 bottom-1" />
-    <script>
-    let checkHealthInterval = null;
-    let checkIfIamDeadInterval = null;
+        <x-toaster-hub />
+        <x-navbar />
+        <div class="fixed top-3 left-4" id="vue">
+            <magic-bar></magic-bar>
+        </div>
+        <main class="main">
+            {{ $slot }}
+        </main>
+        <x-version class="fixed left-2 bottom-1" />
+        <script>
+            let checkHealthInterval = null;
+            let checkIfIamDeadInterval = null;
 
-    function changePasswordFieldType(event) {
-        const element = event.target.parentElement.parentElement.children[0];
-        if (element.nodeName === 'INPUT') {
-            if (element.type === 'password') {
-                element.type = 'text';
-            } else {
-                element.type = 'password';
-            }
-        }
-        if (element.nodeName === 'DIV') {
-            if (element.children[0].type === 'password') {
-                element.children[0].type = 'text';
-            } else {
-                element.children[0].type = 'password';
-            }
-        }
-        if (element.nodeName === 'svg') {
-            if (element.parentElement.parentElement.children[0].type === 'password') {
-                element.parentElement.parentElement.children[0].type = 'text';
-            } else {
-                element.parentElement.parentElement.children[0].type = 'password';
-            }
-        }
-    }
-
-    function revive() {
-        if (checkHealthInterval) return true;
-        console.log('Checking server\'s health...')
-        checkHealthInterval = setInterval(() => {
-            fetch('/api/health')
-                .then(response => {
-                    if (response.ok) {
-                        Toaster.success('Coolify is back online. Reloading...')
-                        if (checkHealthInterval) clearInterval(checkHealthInterval);
-                        setTimeout(() => {
-                            window.location.reload();
-                        }, 5000)
-                    } else {
-                        console.log('Waiting for server to come back from dead...');
+            function changePasswordFieldType(event) {
+                let element = event.target
+                for (let i = 0; i < 10; i++) {
+                    if (element.className === "relative") {
+                        break;
                     }
-                })
-            return;
-        }, 2000);
-    }
-
-    function upgrade() {
-        if (checkIfIamDeadInterval) return true;
-        console.log('Update initiated.')
-        checkIfIamDeadInterval = setInterval(() => {
-            fetch('/api/health')
-                .then(response => {
-                    if (response.ok) {
-                        console.log('It\'s alive. Waiting for server to be dead...');
+                    element = element.parentElement;
+                }
+                element = element.children[1];
+                if (element.nodeName === 'INPUT') {
+                    if (element.type === 'password') {
+                        element.type = 'text';
                     } else {
-                        Toaster.success('Update done, restarting Coolify!')
-                        console.log('It\'s dead. Reviving... Standby... Bzz... Bzz...')
-                        if (checkIfIamDeadInterval) clearInterval(checkIfIamDeadInterval);
-                        revive();
+                        element.type = 'password';
                     }
-                })
-            return;
-        }, 2000);
-    }
+                }
+            }
 
-    function copyToClipboard(text) {
-        navigator.clipboard.writeText(text);
-        Livewire.emit('message', 'Copied to clipboard.');
-    }
-    Livewire.on('reloadWindow', () => {
-        window.location.reload();
-    })
-    Livewire.on('info', (message) => {
-        if (message) Toaster.info(message)
-    })
-    Livewire.on('error', (message) => {
-        if (message) Toaster.error(message)
-    })
-    Livewire.on('warning', (message) => {
-        if (message) Toaster.warning(message)
-    })
-    Livewire.on('success', (message) => {
-        if (message) Toaster.success(message)
-    })
-    </script>
+            function revive() {
+                if (checkHealthInterval) return true;
+                console.log('Checking server\'s health...')
+                checkHealthInterval = setInterval(() => {
+                    fetch('/api/health')
+                        .then(response => {
+                            if (response.ok) {
+                                Toaster.success('Coolify is back online. Reloading...')
+                                if (checkHealthInterval) clearInterval(checkHealthInterval);
+                                setTimeout(() => {
+                                    window.location.reload();
+                                }, 5000)
+                            } else {
+                                console.log('Waiting for server to come back from dead...');
+                            }
+                        })
+                    return;
+                }, 2000);
+            }
+
+            function upgrade() {
+                if (checkIfIamDeadInterval) return true;
+                console.log('Update initiated.')
+                checkIfIamDeadInterval = setInterval(() => {
+                    fetch('/api/health')
+                        .then(response => {
+                            if (response.ok) {
+                                console.log('It\'s alive. Waiting for server to be dead...');
+                            } else {
+                                Toaster.success('Update done, restarting Coolify!')
+                                console.log('It\'s dead. Reviving... Standby... Bzz... Bzz...')
+                                if (checkIfIamDeadInterval) clearInterval(checkIfIamDeadInterval);
+                                revive();
+                            }
+                        })
+                    return;
+                }, 2000);
+            }
+
+            function copyToClipboard(text) {
+                navigator.clipboard.writeText(text);
+                Livewire.emit('message', 'Copied to clipboard.');
+            }
+            Livewire.on('reloadWindow', () => {
+                window.location.reload();
+            })
+            Livewire.on('info', (message) => {
+                if (message) Toaster.info(message)
+            })
+            Livewire.on('error', (message) => {
+                if (message) Toaster.error(message)
+            })
+            Livewire.on('warning', (message) => {
+                if (message) Toaster.warning(message)
+            })
+            Livewire.on('success', (message) => {
+                if (message) Toaster.success(message)
+            })
+        </script>
     @endauth
     @guest
-    {{ $slot }}
+        {{ $slot }}
     @endguest
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/resources/views/components/modal.blade.php b/resources/views/components/modal.blade.php
new file mode 100644
index 000000000..052c2b943
--- /dev/null
+++ b/resources/views/components/modal.blade.php
@@ -0,0 +1,53 @@
+<dialog id="{{ $modalId }}" class="modal">
+    @if ($yesOrNo)
+        <form method="dialog" class="rounded modal-box" wire:submit.prevent='submit'>
+            <div class="flex items-start">
+                <div class="flex items-center justify-center flex-shrink-0 w-10 h-10 mr-4 rounded-full">
+                    <svg class="w-8 h-8 text-error" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+                    </svg>
+                </div>
+                <div class="flex flex-col w-full gap-2">
+                    <h3 class="text-lg font-bold">{{ $modalTitle }}</h3>
+                    @isset($modalBody)
+                        {{ $modalBody }}
+                    @endisset
+                    @if ($modalSubmit)
+                        {{ $modalSubmit }}
+                    @else
+                        <div class="flex gap-4 mt-4">
+                            <x-forms.button class="w-24 bg-coolgray-200 hover:bg-coolgray-100" type="button"
+                                onclick="{{ $modalId }}.close()">Cancel
+                            </x-forms.button>
+                            <div class="flex-1"></div>
+                            <x-forms.button class="w-24" isError type="button"
+                                wire:click.prevent='{{ $action }}' onclick="{{ $modalId }}.close()">Continue
+                            </x-forms.button>
+                        </div>
+                    @endif
+                </div>
+            </div>
+        </form>
+    @else
+        <form method="dialog" class="flex flex-col gap-2 rounded modal-box" wire:submit.prevent='submit'>
+            <h3 class="text-lg font-bold">{{ $modalTitle }}</h3>
+            @isset($modalBody)
+                {{ $modalBody }}
+            @endisset
+            @if ($modalSubmit)
+                {{ $modalSubmit }}
+            @else
+                <x-forms.button onclick="{{ $modalId }}.close()" type="submit">
+                    Save
+                </x-forms.button>
+            @endif
+
+        </form>
+    @endif
+
+    <form method="dialog" class="modal-backdrop">
+        <button>close</button>
+    </form>
+</dialog>
diff --git a/resources/views/components/naked-modal.blade.php b/resources/views/components/naked-modal.blade.php
index 426fe1876..661d1dfeb 100644
--- a/resources/views/components/naked-modal.blade.php
+++ b/resources/views/components/naked-modal.blade.php
@@ -34,7 +34,7 @@ class="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto rounded-
                     </x-forms.button>
                     <div class="flex-1"></div>
                     <x-forms.button class="w-24" wire:click='{{ $action }}'
-                        x-on:click="{{ $show }} = false" isWarning type="button">Continue</x-forms.button>
+                        x-on:click="{{ $show }} = false" isError type="button">Continue</x-forms.button>
                 </div>
             </div>
         </div>
diff --git a/resources/views/livewire/private-key/change.blade.php b/resources/views/livewire/private-key/change.blade.php
index 584badbac..0186a1ad9 100644
--- a/resources/views/livewire/private-key/change.blade.php
+++ b/resources/views/livewire/private-key/change.blade.php
@@ -34,7 +34,7 @@
                 </div>
             @endif
             <div x-cloak x-show="!showPrivateKey">
-                <x-forms.input cannotPeakPassword type="password" rows="10" id="private_key.private_key" required
+                <x-forms.input allowToPeak="false" type="password" rows="10" id="private_key.private_key" required
                     disabled />
             </div>
             <div x-cloak x-show="showPrivateKey">
diff --git a/resources/views/livewire/project/application/danger.blade.php b/resources/views/livewire/project/application/danger.blade.php
index 264573026..cca71f1d2 100644
--- a/resources/views/livewire/project/application/danger.blade.php
+++ b/resources/views/livewire/project/application/danger.blade.php
@@ -1,11 +1,16 @@
-<div x-data="{ deleteApplication: false }">
-    <x-naked-modal show="deleteApplication" title="Delete Application"
-        message='This application will be deleted. It is not reversible. <br>Please think again.' />
+<div>
+    <x-modal yesOrNo modalId="{{ $modalId }}" modalTitle="Delete Application">
+        <x-slot:modalBody>
+            <p>This application will be deleted. It is not reversible. <br>Please think again.</p>
+        </x-slot:modalBody>
+    </x-modal>
     <h3>Danger Zone</h3>
     <div class="">Woah. I hope you know what are you doing.</div>
     <h4 class="pt-4">Delete Application</h4>
     <div class="pb-4">This will stop your containers, delete all related data, etc. Beware! There is no coming
         back!
     </div>
-    <x-forms.button isWarning x-on:click.prevent="deleteApplication = true">Delete</x-forms.button>
+    <x-forms.button isError isModal modalId="{{ $modalId }}">
+        Delete
+    </x-forms.button>
 </div>
diff --git a/resources/views/livewire/project/application/environment-variable/add.blade.php b/resources/views/livewire/project/application/environment-variable/add.blade.php
index a18b45789..3fe53e843 100644
--- a/resources/views/livewire/project/application/environment-variable/add.blade.php
+++ b/resources/views/livewire/project/application/environment-variable/add.blade.php
@@ -1,8 +1,14 @@
-<form wire:submit.prevent='submit' class="flex flex-col gap-2 xl:items-end xl:flex-row"">
-    <x-forms.input placeholder="NODE_ENV" noDirty id="key" label="Name" required />
-    <x-forms.input placeholder="production" noDirty id="value" label="Value" required />
-    <x-forms.checkbox class="w-96" noDirty id="is_build_time" label="Build Variable?" />
-    <x-forms.button type="submit">
-        Add New Variable
-    </x-forms.button>
-</form>
+<dialog id="newVariable" class="modal">
+    <form method="dialog" class="flex flex-col gap-2 rounded modal-box" wire:submit.prevent='submit'>
+        <h3 class="text-lg font-bold">Add Environment Variable</h3>
+        <x-forms.input placeholder="NODE_ENV" id="key" label="Name" required />
+        <x-forms.input placeholder="production" id="value" label="Value" required />
+        <x-forms.checkbox id="is_build_time" label="Build Variable?" />
+        <x-forms.button onclick="newVariable.close()" type="submit">
+            Save
+        </x-forms.button>
+    </form>
+    <form method="dialog" class="modal-backdrop">
+        <button>close</button>
+    </form>
+</dialog>
diff --git a/resources/views/livewire/project/application/environment-variable/all.blade.php b/resources/views/livewire/project/application/environment-variable/all.blade.php
index b21d94f27..5c11d76a3 100644
--- a/resources/views/livewire/project/application/environment-variable/all.blade.php
+++ b/resources/views/livewire/project/application/environment-variable/all.blade.php
@@ -1,24 +1,26 @@
 <div class="flex flex-col gap-2">
     <div>
-        <h2>Environment Variables</h2>
+        <div class="flex items-center gap-2">
+            <h2>Environment Variables</h2>
+            <x-forms.button class="btn" onclick="newVariable.showModal()">+ Add</x-forms.button>
+            <livewire:project.application.environment-variable.add />
+        </div>
         <div class="">Environment (secrets) variables for normal deployments.</div>
     </div>
-    @foreach ($application->environment_variables as $env)
+    @forelse ($application->environment_variables as $env)
         <livewire:project.application.environment-variable.show wire:key="environment-{{ $env->id }}"
             :env="$env" />
-    @endforeach
-    <div class="pt-2 pb-8">
-        <livewire:project.application.environment-variable.add />
-    </div>
-    <div>
-        <h3>Preview Deployments</h3>
-        <div class="">Environment (secrets) variables for Preview Deployments.</div>
-    </div>
-    @foreach ($application->environment_variables_preview as $env)
-        <livewire:project.application.environment-variable.show wire:key="environment-{{ $env->id }}"
-            :env="$env" />
-    @endforeach
-    <div class="pt-2 pb-8">
-        <livewire:project.application.environment-variable.add is_preview="true" />
-    </div>
+    @empty
+        <div class="text-neutral-500">No environment variables found.</div>
+    @endforelse
+    @if ($application->environment_variables_preview->count() > 0)
+        <div>
+            <h3>Preview Deployments</h3>
+            <div class="">Environment (secrets) variables for Preview Deployments.</div>
+        </div>
+        @foreach ($application->environment_variables_preview as $env)
+            <livewire:project.application.environment-variable.show wire:key="environment-{{ $env->id }}"
+                :env="$env" />
+        @endforeach
+    @endif
 </div>
diff --git a/resources/views/livewire/project/application/environment-variable/show.blade.php b/resources/views/livewire/project/application/environment-variable/show.blade.php
index 609e7774b..3081f7ab2 100644
--- a/resources/views/livewire/project/application/environment-variable/show.blade.php
+++ b/resources/views/livewire/project/application/environment-variable/show.blade.php
@@ -1,15 +1,19 @@
-<div x-data="{ deleteEnvironment: false }">
-    <x-naked-modal show="deleteEnvironment" title="Delete Environment"
-        message='This environment will be deleted. It is not reversible. <br>Please think again.' />
-    <form wire:submit.prevent='submit' class="flex flex-col gap-2 xl:items-end xl:flex-row">
-        <x-forms.input id="env.key" label="Name" />
-        <x-forms.input type="password" id="env.value" label="Value" />
-        <x-forms.checkbox class="w-96" disabled id="env.is_build_time" label="Build Variable?" />
+<div>
+    <x-modal yesOrNo modalId="{{ $modalId }}" modalTitle="Delete Environment Variable">
+        <x-slot:modalBody>
+            <p>Are you sure you want to delete this environment variable <span
+                    class="font-bold text-warning">({{ $env->key }})</span>?</p>
+        </x-slot:modalBody>
+    </x-modal>
+    <form wire:submit.prevent='submit' class="flex flex-col items-center gap-2 xl:flex-row">
+        <x-forms.input id="env.key" />
+        <x-forms.input type="password" id="env.value" />
+        <x-forms.checkbox disabled id="env.is_build_time" label="Build Variable?" />
         <div class="flex gap-2">
             <x-forms.button type="submit">
                 Update
             </x-forms.button>
-            <x-forms.button x-on:click.prevent="deleteEnvironment = true">
+            <x-forms.button isError isModal modalId="{{ $modalId }}">
                 Delete
             </x-forms.button>
         </div>
diff --git a/resources/views/livewire/project/application/previews.blade.php b/resources/views/livewire/project/application/previews.blade.php
index 85ea12b02..89e3e8a23 100644
--- a/resources/views/livewire/project/application/previews.blade.php
+++ b/resources/views/livewire/project/application/previews.blade.php
@@ -3,7 +3,7 @@
     <div>
         <div class="flex items-center gap-2">
             <h3>Pull Requests on Git</h3>
-            <x-forms.button wire:click="load_prs">Load Pull Requests (Open)
+            <x-forms.button wire:click="load_prs">Load Pull Requests
             </x-forms.button>
         </div>
         @isset($rate_limit_remaining)
diff --git a/resources/views/livewire/project/application/source.blade.php b/resources/views/livewire/project/application/source.blade.php
index 59c44525e..bc6a6111d 100644
--- a/resources/views/livewire/project/application/source.blade.php
+++ b/resources/views/livewire/project/application/source.blade.php
@@ -17,25 +17,24 @@
                     </x-forms.button>
                 </a>
             @endif
-        </div>
-        <div class="">Code source of your application.</div>
-        <x-forms.input placeholder="coollabsio/coolify-example" id="application.git_repository" label="Repository" />
-        <x-forms.input placeholder="main" id="application.git_branch" label="Branch" />
-        <div class="flex items-end gap-2 w-96">
-            <x-forms.input placeholder="HEAD" id="application.git_commit_sha" placeholder="HEAD" label="Commit SHA" />
             <a target="_blank" class="flex hover:no-underline" href="{{ $application?->gitCommits }}">
-                <x-forms.button><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="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
-                        <path d="M12 3l0 6" />
-                        <path d="M12 15l0 6" />
-                    </svg>Open Commits on Git
+                <x-forms.button>Open Commits on Git
                     <x-external-link />
                 </x-forms.button>
             </a>
         </div>
+        <div class="pb-4">Code source of your application.</div>
+
+        <div class="flex gap-2">
+            <x-forms.input placeholder="coollabsio/coolify-example" id="application.git_repository"
+                label="Repository" />
+            <x-forms.input placeholder="main" id="application.git_branch" label="Branch" />
+        </div>
+        <div class="flex items-end gap-2">
+            <x-forms.input placeholder="HEAD" id="application.git_commit_sha" placeholder="HEAD" label="Commit SHA" />
+
+        </div>
+
         @if ($application->private_key_id)
             <h4 class="py-2 pt-4">Current Deploy Key: <span
                     class="text-warning">{{ $application->private_key->name }}</span></h4>
diff --git a/resources/views/livewire/project/application/storages/add.blade.php b/resources/views/livewire/project/application/storages/add.blade.php
index 948dc7074..73a5d50d7 100644
--- a/resources/views/livewire/project/application/storages/add.blade.php
+++ b/resources/views/livewire/project/application/storages/add.blade.php
@@ -1,8 +1,14 @@
-<form wire:submit.prevent='submit' class="flex flex-col gap-2 xl:items-end xl:flex-row">
-    <x-forms.input placeholder="pv-name" noDirty id="name" label="Name" required />
-    <x-forms.input placeholder="/root" noDirty id="host_path" label="Source Path" />
-    <x-forms.input placeholder="/tmp/root" noDirty id="mount_path" label="Destination Path" required />
-    <x-forms.button type="submit">
-        Add New Volume
-    </x-forms.button>
-</form>
+<dialog id="newStorage" class="modal">
+    <form method="dialog" class="flex flex-col gap-2 rounded modal-box" wire:submit.prevent='submit'>
+        <h3 class="text-lg font-bold">Add Environment Variable</h3>
+        <x-forms.input placeholder="pv-name" id="name" label="Name" required />
+        <x-forms.input placeholder="/root" id="host_path" label="Source Path" />
+        <x-forms.input placeholder="/tmp/root" id="mount_path" label="Destination Path" required />
+        <x-forms.button onclick="newStorage.close()" type="submit">
+            Save
+        </x-forms.button>
+    </form>
+    <form method="dialog" class="modal-backdrop">
+        <button>close</button>
+    </form>
+</dialog>
diff --git a/resources/views/livewire/project/application/storages/all.blade.php b/resources/views/livewire/project/application/storages/all.blade.php
index 7536f0871..002d183d8 100644
--- a/resources/views/livewire/project/application/storages/all.blade.php
+++ b/resources/views/livewire/project/application/storages/all.blade.php
@@ -6,13 +6,16 @@
                 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.application.storages.add />
         </div>
         <div class="">Persistent storage to preserve data between deployments.</div>
     </div>
     <div class="flex flex-col gap-2 py-4">
-        @foreach ($application->persistentStorages as $storage)
+        @forelse ($application->persistentStorages as $storage)
             <livewire:project.application.storages.show wire:key="storage-{{ $storage->id }}" :storage="$storage" />
-        @endforeach
+        @empty
+            <div class="text-neutral-500">No storages found.</div>
+        @endforelse
     </div>
-    <livewire:project.application.storages.add />
 </div>
diff --git a/resources/views/livewire/project/application/storages/show.blade.php b/resources/views/livewire/project/application/storages/show.blade.php
index ecaa72a3c..c734d2eab 100644
--- a/resources/views/livewire/project/application/storages/show.blade.php
+++ b/resources/views/livewire/project/application/storages/show.blade.php
@@ -1,6 +1,10 @@
-<div x-data="{ deleteStorage: false }">
-    <x-naked-modal show="deleteStorage" title="Delete Storage"
-        message='This storage will be deleted. It is not reversible. <br>Please think again.' />
+<div>
+    <x-modal yesOrNo modalId="{{ $modalId }}" modalTitle="Delete Storage">
+        <x-slot:modalBody>
+            <p>This storage will be deleted <span class="font-bold text-warning">({{ $storage->name }})</span>. It is not
+                reversible. <br>Please think again.</p>
+        </x-slot:modalBody>
+    </x-modal>
     <form wire:submit.prevent='submit' class="flex flex-col gap-2 xl:items-end xl:flex-row">
         <x-forms.input id="storage.name" label="Name" required />
         <x-forms.input id="storage.host_path" label="Source Path" />
@@ -9,7 +13,7 @@
             <x-forms.button type="submit">
                 Update
             </x-forms.button>
-            <x-forms.button x-on:click.prevent="deleteStorage = true">
+            <x-forms.button isError isModal modalId="{{ $modalId }}">
                 Delete
             </x-forms.button>
         </div>
diff --git a/resources/views/livewire/run-command.blade.php b/resources/views/livewire/run-command.blade.php
index f05b58a93..7e4d9693f 100644
--- a/resources/views/livewire/run-command.blade.php
+++ b/resources/views/livewire/run-command.blade.php
@@ -1,6 +1,6 @@
 <div>
     <form class="flex flex-col justify-center gap-2 xl:items-end xl:flex-row" wire:submit.prevent='runCommand'>
-        <x-forms.input placeholder="ls -l" autofocus noDirty id="command" label="Command" required />
+        <x-forms.input placeholder="ls -l" autofocus id="command" label="Command" required />
         <x-forms.select label="Server" id="server" required>
             @foreach ($servers as $server)
                 @if ($loop->first)
diff --git a/resources/views/livewire/server/form.blade.php b/resources/views/livewire/server/form.blade.php
index ce7720fc6..c69d530e9 100644
--- a/resources/views/livewire/server/form.blade.php
+++ b/resources/views/livewire/server/form.blade.php
@@ -1,6 +1,9 @@
-<div x-data="{ deleteServer: false, changeLocalhost: false }">
-    <x-naked-modal show="deleteServer" title="Delete Server"
-        message='This server will be deleted. It is not reversible. <br>Please think again.' />
+<div x-data="{ changeLocalhost: false }">
+    <x-modal yesOrNo modalId="{{ $modalId }}" modalTitle="Delete Server">
+        <x-slot:modalBody>
+            <p>This server will be deleted. It is not reversible. <br>Please think again..</p>
+        </x-slot:modalBody>
+    </x-modal>
     <x-naked-modal show="changeLocalhost" action="submit" title="Change localhost"
         message='You could lost a lot of functionalities if you change the server details of the server where Coolify is running on.<br>Please think again.' />
     <form wire:submit.prevent='submit' class="flex flex-col">
@@ -35,7 +38,8 @@
         </div>
         <h3 class="py-4">Settings</h3>
         <div class="flex items-center w-64 gap-2">
-            <x-forms.input id="cleanup_after_percentage" label="Disk Cleanup threshold (%)" required helper="Disk cleanup job will be executed if disk usage is more than this number."/>
+            <x-forms.input id="cleanup_after_percentage" label="Disk Cleanup threshold (%)" required
+                helper="Disk cleanup job will be executed if disk usage is more than this number." />
         </div>
         <h3 class="py-4">Actions</h3>
         @if ($server->settings->is_reachable)
@@ -80,7 +84,7 @@
         back!
     </div>
     @if ($server->id !== 0 || isDev())
-        <x-forms.button x-on:click.prevent="deleteServer = true">
+        <x-forms.button isError isModal modalId="{{ $modalId }}">
             Delete
         </x-forms.button>
     @endif
diff --git a/resources/views/livewire/server/proxy.blade.php b/resources/views/livewire/server/proxy.blade.php
index 4ba4444e1..bb73798d0 100644
--- a/resources/views/livewire/server/proxy.blade.php
+++ b/resources/views/livewire/server/proxy.blade.php
@@ -34,8 +34,8 @@
                         <div wire:loading.remove wire:target="checkProxySettingsInSync">
                             @if ($proxy_settings)
                                 <div class="flex flex-col gap-2 pt-2">
-                                    <x-forms.textarea label="Configuration file: traefik.conf" class="text-xs" noDirty
-                                        name="proxy_settings" wire:model.defer="proxy_settings" rows="30" />
+                                    <x-forms.textarea label="Configuration file: traefik.conf" name="proxy_settings"
+                                        wire:model.defer="proxy_settings" rows="30" />
                                     <x-forms.button wire:click.prevent="resetProxy">
                                         Reset configuration to default
                                     </x-forms.button>
diff --git a/resources/views/livewire/server/proxy/deploy.blade.php b/resources/views/livewire/server/proxy/deploy.blade.php
index 9da0c6c37..03f36a285 100644
--- a/resources/views/livewire/server/proxy/deploy.blade.php
+++ b/resources/views/livewire/server/proxy/deploy.blade.php
@@ -12,14 +12,14 @@ class="relative text-xs text-white normal-case rounded -ml-28 min-w-max menu bg-
                             <li>
                                 @if ($server->name === 'localhost')
                                     <a target="_blank"
-                                        class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs"
+                                        class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs hover:text-white"
                                         href="{{ base_ip() }}:8080">
                                         Traefik Dashboard
                                         <x-external-link />
                                     </a>
                                 @else
                                     <a target="_blank"
-                                        class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs"
+                                        class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs hover:text-white"
                                         href="http://{{ $server->ip }}:8080">
                                         Traefik Dashboard
                                         <x-external-link />
@@ -37,7 +37,7 @@ class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs"
                         <ul tabindex="0"
                             class="relative text-xs text-white normal-case rounded min-w-max menu bg-coolgray-200 -ml-14">
                             <li>
-                                <div class="rounded-none hover:bg-coollabs" wire:click='deploy'><svg
+                                <div class="rounded-none hover:bg-coollabs hover:text-white" wire:click='deploy'><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">
@@ -49,7 +49,7 @@ class="relative text-xs text-white normal-case rounded min-w-max menu bg-coolgra
                                     </svg>Restart</div>
                             </li>
                             <li>
-                                <div class="rounded-none hover:bg-red-500" wire:click='stop'><svg
+                                <div class="rounded-none hover:bg-red-500 hover:text-white" wire:click='stop'><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">
@@ -66,9 +66,10 @@ class="relative text-xs text-white normal-case rounded min-w-max menu bg-coolgra
                 </div>
             </div>
         @else
-            <button wire:click='deploy' class="flex items-center gap-2 cursor-pointer hover:text-white"> <svg
-                    xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" stroke-width="1.5"
-                    stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <button wire:click='deploy' class="flex items-center gap-2 cursor-pointer hover:text-white">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-warning" 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="M7 4v16l13 -8z" />
                 </svg>Start Proxy
diff --git a/resources/views/livewire/source/github/change.blade.php b/resources/views/livewire/source/github/change.blade.php
index 3cea34698..733c3cdca 100644
--- a/resources/views/livewire/source/github/change.blade.php
+++ b/resources/views/livewire/source/github/change.blade.php
@@ -33,7 +33,7 @@
         <div class="pt-2 pb-10 ">Your Private GitHub App for private repositories.</div>
         @if ($github_app->app_id)
             <div class="w-48">
-                <x-forms.checkbox noDirty label="System Wide?"
+                <x-forms.checkbox label="System Wide?"
                     helper="If checked, this GitHub App will be available for everyone in this Coolify instance."
                     instantSave id="is_system_wide" />
             </div>
@@ -119,7 +119,7 @@
                 @endif
             </div>
             <x-forms.checkbox
-                helper="If checked, this GitHub App will be available for everyone in this Coolify instance." noDirty
+                helper="If checked, this GitHub App will be available for everyone in this Coolify instance."
                 label="System Wide?" disabled id="is_system_wide" />
             <script>
                 function createGithubApp(webhook_endpoint, preview_deployment_permissions) {
diff --git a/resources/views/livewire/team/delete.blade.php b/resources/views/livewire/team/delete.blade.php
index 6c8e82a6f..8126c9246 100644
--- a/resources/views/livewire/team/delete.blade.php
+++ b/resources/views/livewire/team/delete.blade.php
@@ -11,7 +11,7 @@
     @else
         @if (session('currentTeam')->isEmpty())
             <div class="pb-4">This will delete your team. Beware! There is no coming back!</div>
-            <x-forms.button isWarning x-on:click.prevent="deleteTeam = true">
+            <x-forms.button isError x-on:click.prevent="deleteTeam = true">
                 Delete
             </x-forms.button>
         @else
diff --git a/tailwind.config.js b/tailwind.config.js
index 1d1568f6c..6219d41a2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,6 +2,7 @@
 module.exports = {
     content: [
         "./resources/**/*.blade.php",
+        "./app/**/*.php",
         "./resources/**/*.js",
         "./resources/**/*.vue",
     ],
@@ -11,17 +12,17 @@ module.exports = {
                 sans: ["Inter", "sans-serif"],
             },
             colors: {
-                applications: "#16A34A",
-                databases: "#9333EA",
-                "databases-100": "#9b46ea",
-                destinations: "#0284C7",
-                sources: "#EA580C",
-                services: "#DB2777",
-                settings: "#FEE440",
-                iam: "#C026D3",
+                //     applications: "#16A34A",
+                //     databases: "#9333EA",
+                //     "databases-100": "#9b46ea",
+                //     destinations: "#0284C7",
+                //     sources: "#EA580C",
+                //     services: "#DB2777",
+                //     settings: "#FEE440",
+                //     iam: "#C026D3",
                 coollabs: "#6B16ED",
                 "coollabs-100": "#7317FF",
-                coolblack: "#141414",
+                //     coolblack: "#141414",
                 "coolgray-100": "#181818",
                 "coolgray-200": "#202020",
                 "coolgray-300": "#242424",
@@ -52,8 +53,8 @@ module.exports = {
         ],
     },
     plugins: [
+        require("daisyui"),
         require("tailwindcss-scrollbar"),
         require("@tailwindcss/typography"),
-        require("daisyui"),
     ],
 };