From 0e27d1f46dc518800d749acf1e2a5788430be334 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Wed, 25 Jun 2025 10:56:35 +0200
Subject: [PATCH] fix(ui): update border styling for consistency across
 components and enhance loading indicators

---
 resources/css/utilities.css                        |  2 +-
 .../views/components/loading-on-button.blade.php   |  2 +-
 resources/views/components/navbar.blade.php        |  6 +++---
 resources/views/livewire/boarding/index.blade.php  | 12 ++++++------
 .../views/livewire/notifications/discord.blade.php |  8 ++++----
 .../views/livewire/notifications/email.blade.php   | 14 ++++++++------
 .../livewire/notifications/pushover.blade.php      |  8 ++++----
 .../views/livewire/notifications/slack.blade.php   |  8 ++++----
 .../livewire/notifications/telegram.blade.php      |  8 ++++----
 resources/views/livewire/profile/index.blade.php   |  2 +-
 .../livewire/project/application/heading.blade.php |  6 +++---
 .../project/application/rollback.blade.php         |  7 ++++---
 .../project/database/backup/execution.blade.php    |  2 +-
 .../livewire/project/database/heading.blade.php    |  8 ++++----
 .../shared/environment-variable/show.blade.php     |  2 +-
 .../livewire/project/shared/get-logs.blade.php     |  4 ++--
 .../project/shared/health-checks.blade.php         |  7 ++++---
 .../views/livewire/project/shared/logs.blade.php   |  6 +++---
 .../views/livewire/security/api-tokens.blade.php   |  2 +-
 .../views/livewire/server/log-drains.blade.php     |  2 +-
 resources/views/livewire/server/navbar.blade.php   | 12 ++++++------
 .../views/livewire/server/new/by-ip.blade.php      |  4 +++-
 .../views/livewire/server/resources.blade.php      |  8 ++++----
 resources/views/livewire/settings-email.blade.php  |  4 ++--
 resources/views/livewire/settings-oauth.blade.php  | 11 +++++++----
 .../livewire/subscription/pricing-plans.blade.php  | 14 +++++++-------
 26 files changed, 89 insertions(+), 80 deletions(-)

diff --git a/resources/css/utilities.css b/resources/css/utilities.css
index 4993b2302..fe0cd10ed 100644
--- a/resources/css/utilities.css
+++ b/resources/css/utilities.css
@@ -122,7 +122,7 @@
 }
 
 @utility navbar-main {
-    @apply flex flex-col gap-4 justify-items-start pb-2 border-b-2 border-solid h-fit md:flex-row sm:justify-between dark:border-coolgray-200 md:items-center;
+    @apply flex flex-col gap-4 justify-items-start pb-2 border-b-2 border-solid h-fit md:flex-row sm:justify-between dark:border-coolgray-200 border-neutral-200 md:items-center;
 }
 
 @utility loading {
diff --git a/resources/views/components/loading-on-button.blade.php b/resources/views/components/loading-on-button.blade.php
index 78a1f9726..a451023aa 100644
--- a/resources/views/components/loading-on-button.blade.php
+++ b/resources/views/components/loading-on-button.blade.php
@@ -3,7 +3,7 @@
     @if (isset($text))
         <div>{{ $text }}</div>
     @endif
-    <svg class="w-4 h-4 mx-1 ml-3 text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none"
+    <svg class="w-4 h-4 mx-1 ml-3 dark: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"
diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index a28a87797..cb6d79582 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -362,7 +362,7 @@
                             </li>
                         @endpersist
                     @endif
-                    <li>
+                    {{-- <li>
                         <a title="Onboarding"
                             class="{{ request()->is('onboarding*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                             href="{{ route('onboarding') }}">
@@ -372,7 +372,7 @@
                             </svg>
                             Onboarding
                         </a>
-                    </li>
+                    </li> --}}
                     <li>
                         <a title="Sponsor us" class="menu-item" href="https://coolify.io/sponsorships"
                             target="_blank">
@@ -410,7 +410,7 @@
                     <form action="/logout" method="POST">
                         @csrf
                         <button title="Logout" type="submit" class="gap-2 mb-6 menu-item">
-                            <svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <svg class="icon mr-1" 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>
diff --git a/resources/views/livewire/boarding/index.blade.php b/resources/views/livewire/boarding/index.blade.php
index f5ed24c51..68b328b30 100644
--- a/resources/views/livewire/boarding/index.blade.php
+++ b/resources/views/livewire/boarding/index.blade.php
@@ -4,7 +4,7 @@
 </x-slot>
 <section class="flex flex-col h-full lg:items-center lg:justify-center">
     <div
-        class="flex flex-col items-center justify-center p-10 mx-2 mt-10 bg-white border rounded-lg shadow-sm lg:p-20 dark:bg-transparent dark:border-none max-w-7xl ">
+        class="flex flex-col items-center justify-center p-10 mx-2 mt-10 bg-white border rounded-lg shadow-sm lg:p-20 dark:bg-transparent dark:border-none max-w-7xl border-neutral-200">
         @if ($currentState === 'welcome')
             <h1 class="text-3xl font-bold lg:text-5xl">Welcome to Coolify</h1>
             <div class="py-6 text-center lg:text-xl">Let me help you set up the basics.</div>
@@ -21,8 +21,8 @@
                     Git
                     integrations, deploy databases and services, monitor these resources with notifications and
                     alerts
-                    without vendor lock-in. <br/>
-                <a href="https://coolify.io" class="dark:text-white hover:underline">Coolify Home</a>.
+                    without vendor lock-in. <br />
+                    <a href="https://coolify.io" class="dark:text-white hover:underline">Coolify Home</a>.
                     <br><br>
                     <span class="text-xl">
                         <x-highlighted text="Self-hosting with superpowers!" /></span>
@@ -277,8 +277,7 @@
                         <x-forms.input required placeholder="Choose a name for your Server. Could be anything."
                             label="Name" id="remoteServerName" wire:model="remoteServerName" />
                         <x-forms.input placeholder="Description, so others will know more about this."
-                            label="Description" id="remoteServerDescription"
-                            wire:model="remoteServerDescription" />
+                            label="Description" id="remoteServerDescription" wire:model="remoteServerDescription" />
                         <x-forms.input required placeholder="127.0.0.1" label="IP Address" id="remoteServerHost"
                             wire:model="remoteServerHost" />
                         <div x-data="{ showAdvanced: false }" class="flex flex-col gap-2">
@@ -323,7 +322,8 @@
                 </x-slot:actions>
                 <x-slot:explanation>
                     <p>This will install the latest Docker Engine on your server, configure a few things to be able
-                    to run optimal.<br><br>Minimum Docker Engine version is: {{ $minDockerVersion }}<br><br>To manually install
+                        to run optimal.<br><br>Minimum Docker Engine version is: {{ $minDockerVersion }}<br><br>To
+                        manually install
                         Docker
                         Engine, check <a target="_blank" class="underline dark:text-warning"
                             href="https://docs.docker.com/engine/install/#server">this
diff --git a/resources/views/livewire/notifications/discord.blade.php b/resources/views/livewire/notifications/discord.blade.php
index a65be078f..4118af5f1 100644
--- a/resources/views/livewire/notifications/discord.blade.php
+++ b/resources/views/livewire/notifications/discord.blade.php
@@ -35,7 +35,7 @@
         Select events for which you would like to receive Discord notifications.
     </p>
     <div class="flex flex-col gap-4 max-w-2xl">
-        <div class="border dark:border-coolgray-300 p-4 rounded-lg">
+        <div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
             <h3 class="font-medium mb-3">Deployments</h3>
             <div class="flex flex-col gap-1.5 pl-1">
                 <x-forms.checkbox instantSave="saveModel" id="deploymentSuccessDiscordNotifications"
@@ -47,7 +47,7 @@
                     id="statusChangeDiscordNotifications" label="Container Status Changes" />
             </div>
         </div>
-        <div class="border dark:border-coolgray-300 p-4 rounded-lg">
+        <div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
             <h3 class="font-medium mb-3">Backups</h3>
             <div class="flex flex-col gap-1.5 pl-1">
                 <x-forms.checkbox instantSave="saveModel" id="backupSuccessDiscordNotifications"
@@ -56,7 +56,7 @@
                     label="Backup Failure" />
             </div>
         </div>
-        <div class="border dark:border-coolgray-300 p-4 rounded-lg">
+        <div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
             <h3 class="font-medium mb-3">Scheduled Tasks</h3>
             <div class="flex flex-col gap-1.5 pl-1">
                 <x-forms.checkbox instantSave="saveModel" id="scheduledTaskSuccessDiscordNotifications"
@@ -65,7 +65,7 @@
                     label="Scheduled Task Failure" />
             </div>
         </div>
-        <div class="border dark:border-coolgray-300 p-4 rounded-lg">
+        <div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
             <h3 class="font-medium mb-3">Server</h3>
             <div class="flex flex-col gap-1.5 pl-1">
                 <x-forms.checkbox instantSave="saveModel" id="dockerCleanupSuccessDiscordNotifications"
diff --git a/resources/views/livewire/notifications/email.blade.php b/resources/views/livewire/notifications/email.blade.php
index e4d8bf31d..48769a3eb 100644
--- a/resources/views/livewire/notifications/email.blade.php
+++ b/resources/views/livewire/notifications/email.blade.php
@@ -54,7 +54,8 @@
     @endif
     @if (!$useInstanceEmailSettings)
         <div class="flex flex-col gap-4">
-            <form wire:submit='submitSmtp' class="p-4 border dark:border-coolgray-300 flex flex-col gap-2">
+            <form wire:submit='submitSmtp'
+                class="p-4 border dark:border-coolgray-300 border-neutral-200 flex flex-col gap-2">
                 <div class="flex items-center gap-2">
                     <h3>SMTP Server</h3>
                     <x-forms.button type="submit">
@@ -85,7 +86,8 @@
                     </div>
                 </div>
             </form>
-            <form wire:submit='submitResend' class="p-4 border dark:border-coolgray-300 flex flex-col gap-2">
+            <form wire:submit='submitResend'
+                class="p-4 border dark:border-coolgray-300 border-neutral-200 flex flex-col gap-2">
                 <div class="flex items-center gap-2">
                     <h3>Resend</h3>
                     <x-forms.button type="submit">
@@ -112,7 +114,7 @@
         Select events for which you would like to receive email notifications.
     </p>
     <div class="flex flex-col gap-4 max-w-2xl">
-        <div class="border dark:border-coolgray-300 p-4 rounded-lg">
+        <div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
             <h3 class="font-medium mb-3">Deployments</h3>
             <div class="flex flex-col gap-1.5 pl-1">
                 <x-forms.checkbox instantSave="saveModel" id="deploymentSuccessEmailNotifications"
@@ -124,7 +126,7 @@
                     id="statusChangeEmailNotifications" label="Container Status Changes" />
             </div>
         </div>
-        <div class="border dark:border-coolgray-300 p-4 rounded-lg">
+        <div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
             <h3 class="font-medium mb-3">Backups</h3>
             <div class="flex flex-col gap-1.5 pl-1">
                 <x-forms.checkbox instantSave="saveModel" id="backupSuccessEmailNotifications"
@@ -133,7 +135,7 @@
                     label="Backup Failure" />
             </div>
         </div>
-        <div class="border dark:border-coolgray-300 p-4 rounded-lg">
+        <div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
             <h3 class="font-medium mb-3">Scheduled Tasks</h3>
             <div class="flex flex-col gap-1.5 pl-1">
                 <x-forms.checkbox instantSave="saveModel" id="scheduledTaskSuccessEmailNotifications"
@@ -142,7 +144,7 @@
                     label="Scheduled Task Failure" />
             </div>
         </div>
-        <div class="border dark:border-coolgray-300 p-4 rounded-lg">
+        <div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
             <h3 class="font-medium mb-3">Server</h3>
             <div class="flex flex-col gap-1.5 pl-1">
                 <x-forms.checkbox instantSave="saveModel" id="dockerCleanupSuccessEmailNotifications"
diff --git a/resources/views/livewire/notifications/pushover.blade.php b/resources/views/livewire/notifications/pushover.blade.php
index 697597acb..f0123a070 100644
--- a/resources/views/livewire/notifications/pushover.blade.php
+++ b/resources/views/livewire/notifications/pushover.blade.php
@@ -37,7 +37,7 @@
         Select events for which you would like to receive Pushover notifications.
     </p>
     <div class="flex flex-col gap-4 max-w-2xl">
-        <div class="border dark:border-coolgray-300 p-4 rounded-lg">
+        <div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
             <h3 class="font-medium mb-3">Deployments</h3>
             <div class="flex flex-col gap-1.5 pl-1">
                 <x-forms.checkbox instantSave="saveModel" id="deploymentSuccessPushoverNotifications"
@@ -49,7 +49,7 @@
                     id="statusChangePushoverNotifications" label="Container Status Changes" />
             </div>
         </div>
-        <div class="border dark:border-coolgray-300 p-4 rounded-lg">
+        <div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
             <h3 class="font-medium mb-3">Backups</h3>
             <div class="flex flex-col gap-1.5 pl-1">
                 <x-forms.checkbox instantSave="saveModel" id="backupSuccessPushoverNotifications"
@@ -58,7 +58,7 @@
                     label="Backup Failure" />
             </div>
         </div>
-        <div class="border dark:border-coolgray-300 p-4 rounded-lg">
+        <div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
             <h3 class="font-medium mb-3">Scheduled Tasks</h3>
             <div class="flex flex-col gap-1.5 pl-1">
                 <x-forms.checkbox instantSave="saveModel" id="scheduledTaskSuccessPushoverNotifications"
@@ -67,7 +67,7 @@
                     label="Scheduled Task Failure" />
             </div>
         </div>
-        <div class="border dark:border-coolgray-300 p-4 rounded-lg">
+        <div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
             <h3 class="font-medium mb-3">Server</h3>
             <div class="flex flex-col gap-1.5 pl-1">
                 <x-forms.checkbox instantSave="saveModel" id="dockerCleanupSuccessPushoverNotifications"
diff --git a/resources/views/livewire/notifications/slack.blade.php b/resources/views/livewire/notifications/slack.blade.php
index 85b9a2de7..22c145460 100644
--- a/resources/views/livewire/notifications/slack.blade.php
+++ b/resources/views/livewire/notifications/slack.blade.php
@@ -32,7 +32,7 @@
         Select events for which you would like to receive Slack notifications.
     </p>
     <div class="flex flex-col gap-4 max-w-2xl">
-        <div class="border dark:border-coolgray-300 p-4 rounded-lg">
+        <div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
             <h3 class="font-medium mb-3">Deployments</h3>
             <div class="flex flex-col gap-1.5 pl-1">
                 <x-forms.checkbox instantSave="saveModel" id="deploymentSuccessSlackNotifications"
@@ -44,14 +44,14 @@
                     id="statusChangeSlackNotifications" label="Container Status Changes" />
             </div>
         </div>
-        <div class="border dark:border-coolgray-300 p-4 rounded-lg">
+        <div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
             <h3 class="font-medium mb-3">Backups</h3>
             <div class="flex flex-col gap-1.5 pl-1">
                 <x-forms.checkbox instantSave="saveModel" id="backupSuccessSlackNotifications" label="Backup Success" />
                 <x-forms.checkbox instantSave="saveModel" id="backupFailureSlackNotifications" label="Backup Failure" />
             </div>
         </div>
-        <div class="border dark:border-coolgray-300 p-4 rounded-lg">
+        <div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
             <h3 class="font-medium mb-3">Scheduled Tasks</h3>
             <div class="flex flex-col gap-1.5 pl-1">
                 <x-forms.checkbox instantSave="saveModel" id="scheduledTaskSuccessSlackNotifications"
@@ -60,7 +60,7 @@
                     label="Scheduled Task Failure" />
             </div>
         </div>
-        <div class="border dark:border-coolgray-300 p-4 rounded-lg">
+        <div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
             <h3 class="font-medium mb-3">Server</h3>
             <div class="flex flex-col gap-1.5 pl-1">
                 <x-forms.checkbox instantSave="saveModel" id="dockerCleanupSuccessSlackNotifications"
diff --git a/resources/views/livewire/notifications/telegram.blade.php b/resources/views/livewire/notifications/telegram.blade.php
index b1e6eccf7..d4312f8d2 100644
--- a/resources/views/livewire/notifications/telegram.blade.php
+++ b/resources/views/livewire/notifications/telegram.blade.php
@@ -37,7 +37,7 @@
         Select events for which you would like to receive Telegram notifications.
     </p>
     <div class="flex flex-col gap-4 ">
-        <div class="border dark:border-coolgray-300 p-4 rounded-lg">
+        <div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
             <h3 class="text-lg font-medium mb-3">Deployments</h3>
             <div class="flex flex-col gap-1.5 pl-1">
                 <div class="pl-1 flex gap-2">
@@ -67,7 +67,7 @@
                 </div>
             </div>
         </div>
-        <div class="border dark:border-coolgray-300 p-4 rounded-lg">
+        <div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
             <h3 class="text-lg font-medium mb-3">Backups</h3>
             <div class="flex flex-col gap-1.5 pl-1">
                 <div class="pl-1 flex gap-2">
@@ -90,7 +90,7 @@
             </div>
         </div>
 
-        <div class="border dark:border-coolgray-300 p-4 rounded-lg">
+        <div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
             <h3 class="text-lg font-medium mb-3">Scheduled Tasks</h3>
             <div class="flex flex-col gap-1.5 pl-1">
                 <div class="pl-1 flex gap-2">
@@ -113,7 +113,7 @@
             </div>
         </div>
 
-        <div class="border dark:border-coolgray-300 p-4 rounded-lg">
+        <div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
             <h3 class="text-lg font-medium mb-3">Server</h3>
             <div class="flex flex-col gap-1.5 pl-1">
                 <div class="pl-1 flex gap-2">
diff --git a/resources/views/livewire/profile/index.blade.php b/resources/views/livewire/profile/index.blade.php
index 967c71746..0dbf09463 100644
--- a/resources/views/livewire/profile/index.blade.php
+++ b/resources/views/livewire/profile/index.blade.php
@@ -19,7 +19,7 @@
             <h2>Change Password</h2>
             <x-forms.button type="submit" label="Save">Save</x-forms.button>
         </div>
-        <div class="text-xs font-bold text-warning pb-2">Resetting the password will logout all sessions.</div>
+        <div class="text-xs font-bold dark:text-warning pb-2">Resetting the password will logout all sessions.</div>
         <div class="flex flex-col gap-2">
             <x-forms.input id="current_password" label="Current Password" required type="password" />
             <div class="flex gap-2">
diff --git a/resources/views/livewire/project/application/heading.blade.php b/resources/views/livewire/project/application/heading.blade.php
index bc568bfe3..2b44e0ddd 100644
--- a/resources/views/livewire/project/application/heading.blade.php
+++ b/resources/views/livewire/project/application/heading.blade.php
@@ -8,16 +8,16 @@
             </a>
             <a class="{{ request()->routeIs('project.application.deployment.index') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.application.deployment.index', $parameters) }}">
-                <button>Deployments</button>
+                Deployments
             </a>
             <a class="{{ request()->routeIs('project.application.logs') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.application.logs', $parameters) }}">
-                <button>Logs</button>
+                Logs
             </a>
             @if (!$application->destination->server->isSwarm())
                 <a class="{{ request()->routeIs('project.application.command') ? 'dark:text-white' : '' }}"
                     href="{{ route('project.application.command', $parameters) }}">
-                    <button>Terminal</button>
+                    Terminal
                 </a>
             @endif
             <x-applications.links :application="$application" />
diff --git a/resources/views/livewire/project/application/rollback.blade.php b/resources/views/livewire/project/application/rollback.blade.php
index cd49f4422..cf4467534 100644
--- a/resources/views/livewire/project/application/rollback.blade.php
+++ b/resources/views/livewire/project/application/rollback.blade.php
@@ -5,11 +5,11 @@
     </div>
     <div class="pb-4 ">You can easily rollback to a previously built (local) images
         quickly.</div>
-    <div wire:target='loadImages'>
+    <div wire:target='loadImages' wire:loading.remove>
         <div class="flex flex-wrap">
             @forelse ($images as $image)
                 <div class="w-2/4 p-2">
-                    <div class="bg-white border rounded-sm dark:border-black dark:bg-coolgray-100">
+                    <div class="bg-white border rounded-sm dark:border-black dark:bg-coolgray-100 border-neutral-200">
                         <div class="p-2">
                             <div class="">
                                 @if (data_get($image, 'is_current'))
@@ -31,7 +31,7 @@
                                     Rollback
                                 </x-forms.button>
                             @else
-                                <x-forms.button class="bg-coolgray-100"
+                                <x-forms.button class="dark:bg-coolgray-100"
                                     wire:click="rollbackImage('{{ data_get($image, 'tag') }}')">
                                     Rollback
                                 </x-forms.button>
@@ -44,4 +44,5 @@
             @endforelse
         </div>
     </div>
+    <div wire:target='loadImages' wire:loading>Loading available docker images...</div>
 </div>
diff --git a/resources/views/livewire/project/database/backup/execution.blade.php b/resources/views/livewire/project/database/backup/execution.blade.php
index d778b5c2c..3e689645f 100644
--- a/resources/views/livewire/project/database/backup/execution.blade.php
+++ b/resources/views/livewire/project/database/backup/execution.blade.php
@@ -5,7 +5,7 @@
     <h1>Backups</h1>
     <livewire:project.shared.configuration-checker :resource="$database" />
     <livewire:project.database.heading :database="$database" />
-    <div class="pt-6">
+    <div>
         <livewire:project.database.backup-edit :backup="$backup" :s3s="$s3s" :status="data_get($database, 'status')" />
         <livewire:project.database.backup-executions :backup="$backup" />
     </div>
diff --git a/resources/views/livewire/project/database/heading.blade.php b/resources/views/livewire/project/database/heading.blade.php
index 2eb4a09c2..3df3b0e53 100644
--- a/resources/views/livewire/project/database/heading.blade.php
+++ b/resources/views/livewire/project/database/heading.blade.php
@@ -11,16 +11,16 @@
             class="flex overflow-x-scroll shrink-0 gap-6 items-center whitespace-nowrap sm:overflow-x-hidden scrollbar min-h-10">
             <a class="{{ request()->routeIs('project.database.configuration') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.database.configuration', $parameters) }}">
-                <button>Configuration</button>
+                Configuration
             </a>
 
             <a class="{{ request()->routeIs('project.database.logs') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.database.logs', $parameters) }}">
-                <button>Logs</button>
+                Logs
             </a>
             <a class="{{ request()->routeIs('project.database.command') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.database.command', $parameters) }}">
-                <button>Terminal</button>
+                Terminal
             </a>
             @if (
                 $database->getMorphClass() === 'App\Models\StandalonePostgresql' ||
@@ -29,7 +29,7 @@
                     $database->getMorphClass() === 'App\Models\StandaloneMariadb')
                 <a class="{{ request()->routeIs('project.database.backup.index') ? 'dark:text-white' : '' }}"
                     href="{{ route('project.database.backup.index', $parameters) }}">
-                    <button>Backups</button>
+                    Backups
                 </a>
             @endif
         </nav>
diff --git a/resources/views/livewire/project/shared/environment-variable/show.blade.php b/resources/views/livewire/project/shared/environment-variable/show.blade.php
index 514b39fc5..4015d06e8 100644
--- a/resources/views/livewire/project/shared/environment-variable/show.blade.php
+++ b/resources/views/livewire/project/shared/environment-variable/show.blade.php
@@ -2,7 +2,7 @@
     <form wire:submit='submit' @class([
         'flex flex-col items-center gap-4 p-4 bg-white border lg:items-start dark:bg-base',
         'border-error' => $is_really_required,
-        'dark:border-coolgray-300' => !$is_really_required,
+        'dark:border-coolgray-300 border-neutral-200' => !$is_really_required,
     ])>
         @if ($isLocked)
             <div class="flex flex-1 w-full gap-2">
diff --git a/resources/views/livewire/project/shared/get-logs.blade.php b/resources/views/livewire/project/shared/get-logs.blade.php
index 4a55bb019..a479a3c14 100644
--- a/resources/views/livewire/project/shared/get-logs.blade.php
+++ b/resources/views/livewire/project/shared/get-logs.blade.php
@@ -1,4 +1,4 @@
-<div class="p-4 my-4 border dark:border-coolgray-200">
+<div class="p-4 my-4 border dark:border-coolgray-200 border-neutral-200">
     <div x-init="$wire.getLogs" id="screen" x-data="{
         fullscreen: false,
         alwaysScroll: false,
@@ -56,7 +56,7 @@
             <x-forms.checkbox instantSave label="Include Timestamps" id="showTimeStamps"></x-forms.checkbox>
         </form>
         <div :class="fullscreen ? 'fullscreen' : 'relative w-full py-4 mx-auto'">
-            <div class="flex overflow-y-auto flex-col-reverse px-4 py-2 w-full bg-white dark:text-white dark:bg-coolgray-100 scrollbar dark:border-coolgray-300"
+            <div class="flex overflow-y-auto flex-col-reverse px-4 py-2 w-full bg-white dark:text-white dark:bg-coolgray-100 scrollbar dark:border-coolgray-300 border-neutral-200"
                 :class="fullscreen ? '' : 'max-h-96 border border-solid rounded-sm'">
                 <div :class="fullscreen ? 'fixed top-4 right-4' : 'absolute top-6 right-0'">
                     <div class="flex justify-end gap-4" :class="fullscreen ? 'fixed' : ''"
diff --git a/resources/views/livewire/project/shared/health-checks.blade.php b/resources/views/livewire/project/shared/health-checks.blade.php
index 26d286507..00b8d593e 100644
--- a/resources/views/livewire/project/shared/health-checks.blade.php
+++ b/resources/views/livewire/project/shared/health-checks.blade.php
@@ -6,7 +6,8 @@
     <div class="pb-4">Define how your resource's health should be checked.</div>
     <div class="flex flex-col gap-4">
         @if ($resource->custom_healthcheck_found)
-            <div class="text-warning">A custom health check has been found and will be used until you enable this.</div>
+            <div class="dark:text-warning">A custom health check has been found and will be used until you enable this.
+            </div>
         @endif
         <div class="w-32">
             <x-forms.checkbox instantSave id="resource.health_check_enabled" label="Enabled" />
@@ -25,8 +26,8 @@
             <x-forms.input id="resource.health_check_response_text" placeholder="OK" label="Response Text" />
         </div>
         <div class="flex gap-2">
-            <x-forms.input min=1 type="number" id="resource.health_check_interval" placeholder="30" label="Interval (s)"
-                required />
+            <x-forms.input min=1 type="number" id="resource.health_check_interval" placeholder="30"
+                label="Interval (s)" required />
             <x-forms.input type="number" id="resource.health_check_timeout" placeholder="30" label="Timeout (s)"
                 required />
             <x-forms.input type="number" id="resource.health_check_retries" placeholder="3" label="Retries" required />
diff --git a/resources/views/livewire/project/shared/logs.blade.php b/resources/views/livewire/project/shared/logs.blade.php
index 3dc1fbe5b..87bb1a6b6 100644
--- a/resources/views/livewire/project/shared/logs.blade.php
+++ b/resources/views/livewire/project/shared/logs.blade.php
@@ -9,7 +9,7 @@
         <div>
             <h2>Logs</h2>
             @if (str($status)->contains('exited'))
-                <div class="pt-2">The resource is not running.</div>
+                <div class="pt-4">The resource is not running.</div>
             @else
                 <div class="pt-2" wire:loading wire:target="loadAllContainers">
                     Loading containers...
@@ -44,7 +44,7 @@
         <div>
             <h2>Logs</h2>
             @if (str($status)->contains('exited'))
-                <div class="pt-2">The resource is not running.</div>
+                <div class="pt-4">The resource is not running.</div>
             @else
                 <div class="pt-2" wire:loading wire:target="loadAllContainers">
                     Loading containers...
@@ -68,7 +68,7 @@
         <div>
             <h2>Logs</h2>
             @if (str($status)->contains('exited'))
-                <div class="pt-2">The resource is not running.</div>
+                <div class="pt-4">The resource is not running.</div>
             @else
                 <div class="pt-2" wire:loading wire:target="loadAllContainers">
                     Loading containers...
diff --git a/resources/views/livewire/security/api-tokens.blade.php b/resources/views/livewire/security/api-tokens.blade.php
index 2a10e53c8..eaf7a439d 100644
--- a/resources/views/livewire/security/api-tokens.blade.php
+++ b/resources/views/livewire/security/api-tokens.blade.php
@@ -47,7 +47,7 @@
             @endif
         </div>
         @if (in_array('root', $permissions))
-            <div class="font-bold text-warning">Root access, be careful!</div>
+            <div class="font-bold dark:text-warning">Root access, be careful!</div>
         @endif
     </form>
     @if (session()->has('token'))
diff --git a/resources/views/livewire/server/log-drains.blade.php b/resources/views/livewire/server/log-drains.blade.php
index 1f7c654d5..080c0928b 100644
--- a/resources/views/livewire/server/log-drains.blade.php
+++ b/resources/views/livewire/server/log-drains.blade.php
@@ -13,7 +13,7 @@
                 </div>
                 <div>Sends service logs to 3rd party tools.</div>
                 <div class="flex flex-col gap-4 pt-4">
-                    <div class="p-4 border dark:border-coolgray-300">
+                    <div class="p-4 border dark:border-coolgray-300 border-neutral-200">
                         <form wire:submit='submit("newrelic")' class="flex flex-col">
                             <h3>New Relic</h3>
                             <div class="w-32">
diff --git a/resources/views/livewire/server/navbar.blade.php b/resources/views/livewire/server/navbar.blade.php
index 0b843aba0..40d5d1c73 100644
--- a/resources/views/livewire/server/navbar.blade.php
+++ b/resources/views/livewire/server/navbar.blade.php
@@ -29,7 +29,7 @@
                     @endif
                     <div wire:loading wire:target="checkProxy" class="badge badge-warning"></div>
                     <div wire:loading wire:target="checkProxy"
-                        class="pl-2 pr-1 text-xs font-bold tracking-wider text-warning">
+                        class="pl-2 pr-1 text-xs font-bold tracking-wider dark:text-warning">
                         Checking Ports Availability...
                     </div>
                     @if ($proxyStatus !== 'exited')
@@ -60,7 +60,7 @@
                 href="{{ route('server.show', [
                     'server_uuid' => data_get($server, 'uuid'),
                 ]) }}">
-                <button>Configuration</button>
+                Configuration
             </a>
 
             @if (!$server->isSwarmWorker() && !$server->settings->is_build_server)
@@ -68,26 +68,26 @@
                     href="{{ route('server.proxy', [
                         'server_uuid' => data_get($server, 'uuid'),
                     ]) }}">
-                    <button>Proxy</button>
+                    Proxy
                 </a>
             @endif
             <a class="{{ request()->routeIs('server.resources') ? 'dark:text-white' : '' }}"
                 href="{{ route('server.resources', [
                     'server_uuid' => data_get($server, 'uuid'),
                 ]) }}">
-                <button>Resources</button>
+                Resources
             </a>
             <a class="{{ request()->routeIs('server.command') ? 'dark:text-white' : '' }}"
                 href="{{ route('server.command', [
                     'server_uuid' => data_get($server, 'uuid'),
                 ]) }}">
-                <button>Terminal</button>
+                Terminal
             </a>
             <a class="{{ request()->routeIs('server.security.patches') ? 'dark:text-white' : '' }}"
                 href="{{ route('server.security.patches', [
                     'server_uuid' => data_get($server, 'uuid'),
                 ]) }}">
-                <button>Security</button>
+                Security
             </a>
         </nav>
         <div class="order-first sm:order-last">
diff --git a/resources/views/livewire/server/new/by-ip.blade.php b/resources/views/livewire/server/new/by-ip.blade.php
index 225a59a5a..94d0fccbd 100644
--- a/resources/views/livewire/server/new/by-ip.blade.php
+++ b/resources/views/livewire/server/new/by-ip.blade.php
@@ -27,7 +27,9 @@
                 @endforeach
             </x-forms.select>
             <div class="">
-                <x-forms.checkbox instantSave type="checkbox" id="is_build_server" label="Use it as a build server?" />
+                <x-forms.checkbox instantSave type="checkbox" id="is_build_server"
+                    helper="Build servers are used to build your applications, so you cannot deploy applications to it."
+                    label="Use it as a build server?" />
             </div>
             <div class="">
                 <h3 class="pt-6">Swarm <span class="text-xs text-neutral-500">(experimental)</span></h3>
diff --git a/resources/views/livewire/server/resources.blade.php b/resources/views/livewire/server/resources.blade.php
index 86fea2041..6a0330259 100644
--- a/resources/views/livewire/server/resources.blade.php
+++ b/resources/views/livewire/server/resources.blade.php
@@ -13,8 +13,8 @@
                 <div>Here you can find all resources that are managed by Coolify.</div>
                 <div class="flex flex-row gap-4 py-10">
                     <div @class([
-                        'box-without-bg cursor-pointer bg-coolgray-100 text-white w-full text-center items-center justify-center',
-                        'bg-coollabs' => $activeTab === 'managed',
+                        'box-without-bg cursor-pointer dark:bg-coolgray-100 dark:text-white w-full text-center items-center justify-center',
+                        'dark:bg-coollabs bg-coollabs text-white' => $activeTab === 'managed',
                     ]) wire:click="loadManagedContainers">
                         Managed
                         <div class="flex flex-col items-center justify-center">
@@ -22,8 +22,8 @@
                         </div>
                     </div>
                     <div @class([
-                        'box-without-bg cursor-pointer bg-coolgray-100 text-white w-full text-center items-center justify-center',
-                        'bg-coollabs' => $activeTab === 'unmanaged',
+                        'box-without-bg cursor-pointer dark:bg-coolgray-100 dark:text-white w-full text-center items-center justify-center',
+                        'dark:bg-coollabs bg-coollabs text-white' => $activeTab === 'unmanaged',
                     ]) wire:click="loadUnmanagedContainers">
                         Unmanaged
                         <div class="flex flex-col items-center justify-center">
diff --git a/resources/views/livewire/settings-email.blade.php b/resources/views/livewire/settings-email.blade.php
index 4376cbf92..49c944998 100644
--- a/resources/views/livewire/settings-email.blade.php
+++ b/resources/views/livewire/settings-email.blade.php
@@ -28,7 +28,7 @@
         </div>
     </form>
     <div class="flex flex-col gap-4">
-        <div class="p-4 border dark:border-coolgray-300">
+        <div class="p-4 border dark:border-coolgray-300 border-neutral-200">
             <form wire:submit.prevent="submitSmtp" class="flex flex-col">
                 <div class="flex gap-2">
                     <h3>SMTP Server</h3>
@@ -58,7 +58,7 @@
                 </div>
             </form>
         </div>
-        <div class="p-4 border dark:border-coolgray-300">
+        <div class="p-4 border dark:border-coolgray-300 border-neutral-200">
             <form wire:submit.prevent="submitResend" class="flex flex-col">
                 <div class="flex gap-2">
                     <h3>Resend</h3>
diff --git a/resources/views/livewire/settings-oauth.blade.php b/resources/views/livewire/settings-oauth.blade.php
index 8ffad258f..b65d20164 100644
--- a/resources/views/livewire/settings-oauth.blade.php
+++ b/resources/views/livewire/settings-oauth.blade.php
@@ -15,7 +15,7 @@
         </div>
         <div class="flex flex-col gap-2 pt-4">
             @foreach ($oauth_settings_map as $oauth_setting)
-                <div class="p-4 border dark:border-coolgray-300">
+                <div class="p-4 border dark:border-coolgray-300 border-neutral-200">
                     <h3>{{ ucfirst($oauth_setting->provider) }}</h3>
                     <div class="w-32">
                         <x-forms.checkbox instantSave="instantSave('{{ $oauth_setting->provider }}')"
@@ -26,8 +26,8 @@
                             label="Client ID" />
                         <x-forms.input id="oauth_settings_map.{{ $oauth_setting->provider }}.client_secret"
                             type="password" label="Client Secret" autocomplete="new-password" />
-                        <x-forms.input id="oauth_settings_map.{{ $oauth_setting->provider }}.redirect_uri" placeholder="{{ route('auth.callback', $oauth_setting->provider) }}"
-                            label="Redirect URI" />
+                        <x-forms.input id="oauth_settings_map.{{ $oauth_setting->provider }}.redirect_uri"
+                            placeholder="{{ route('auth.callback', $oauth_setting->provider) }}" label="Redirect URI" />
                         @if ($oauth_setting->provider == 'azure')
                             <x-forms.input id="oauth_settings_map.{{ $oauth_setting->provider }}.tenant"
                                 label="Tenant" />
@@ -37,7 +37,10 @@
                                 helper="Optional parameter that supplies a hosted domain (HD) to Google, which<br>triggers a login hint to be displayed on the OAuth screen with this domain.<br><br><a class='underline dark:text-warning text-coollabs' href='https://developers.google.com/identity/openid-connect/openid-connect#hd-param' target='_blank'>Google Documentation</a>"
                                 label="Tenant" />
                         @endif
-            @if ($oauth_setting->provider == 'authentik' || $oauth_setting->provider == 'clerk' || $oauth_setting->provider == 'zitadel')
+                        @if (
+                            $oauth_setting->provider == 'authentik' ||
+                                $oauth_setting->provider == 'clerk' ||
+                                $oauth_setting->provider == 'zitadel')
                             <x-forms.input id="oauth_settings_map.{{ $oauth_setting->provider }}.base_url"
                                 label="Base URL" />
                         @endif
diff --git a/resources/views/livewire/subscription/pricing-plans.blade.php b/resources/views/livewire/subscription/pricing-plans.blade.php
index 1c5cde63a..4c8f0e563 100644
--- a/resources/views/livewire/subscription/pricing-plans.blade.php
+++ b/resources/views/livewire/subscription/pricing-plans.blade.php
@@ -56,7 +56,7 @@
                         </span>
                     </p>
                     <div class="flex items-center pt-6">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="flex-none w-8 h-8 mr-3 text-warning"
+                        <svg xmlns="http://www.w3.org/2000/svg" class="flex-none w-8 h-8 mr-3 dark:text-warning"
                             fill="currentColor" viewBox="0 0 256 256">
                             <path
                                 d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z">
@@ -89,8 +89,8 @@
                     </div>
                     <ul role="list" class="mt-8 space-y-3 text-sm leading-6 dark:text-neutral-400">
                         <li class="flex">
-                            <svg class="flex-none w-5 h-6 mr-3 text-warning" viewBox="0 0 20 20" fill="currentColor"
-                                aria-hidden="true">
+                            <svg class="flex-none w-5 h-6 mr-3 dark:text-warning" viewBox="0 0 20 20"
+                                fill="currentColor" aria-hidden="true">
                                 <path fill-rule="evenodd"
                                     d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
                                     clip-rule="evenodd" />
@@ -99,8 +99,8 @@
                             <span class="px-1 font-bold dark:text-white">unlimited</span> servers
                         </li>
                         <li class="flex">
-                            <svg class="flex-none w-5 h-6 mr-3 text-warning" viewBox="0 0 20 20" fill="currentColor"
-                                aria-hidden="true">
+                            <svg class="flex-none w-5 h-6 mr-3 dark:text-warning" viewBox="0 0 20 20"
+                                fill="currentColor" aria-hidden="true">
                                 <path fill-rule="evenodd"
                                     d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
                                     clip-rule="evenodd" />
@@ -109,7 +109,7 @@
                             <span class="px-1 font-bold dark:text-white">unlimited</span> applications per server
                         </li>
                         <li class="flex gap-x-3">
-                            <svg class="flex-none w-5 h-6 text-warning" viewBox="0 0 20 20" fill="currentColor"
+                            <svg class="flex-none w-5 h-6 dark:text-warning" viewBox="0 0 20 20" fill="currentColor"
                                 aria-hidden="true">
                                 <path fill-rule="evenodd"
                                     d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
@@ -118,7 +118,7 @@
                             Free email notifications
                         </li>
                         <li class="flex gap-x-3">
-                            <svg class="flex-none w-5 h-6 text-warning" viewBox="0 0 20 20" fill="currentColor"
+                            <svg class="flex-none w-5 h-6 dark:text-warning" viewBox="0 0 20 20" fill="currentColor"
                                 aria-hidden="true">
                                 <path fill-rule="evenodd"
                                     d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"