From b418a78e2e3b12bedd7c399f2c9473a0c15ba53f Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Sun, 24 Mar 2024 16:00:25 +0100
Subject: [PATCH] ui ui ui (pig)

---
 app/Livewire/Project/Application/General.php  |   2 +-
 package-lock.json                             |  14 +-
 package.json                                  |   1 -
 resources/css/app.css                         |  40 ++---
 resources/js/components/MagicBar.vue          |   8 +-
 .../views/auth/confirm-password.blade.php     |   2 +-
 .../views/auth/forgot-password.blade.php      |   4 +-
 resources/views/auth/reset-password.blade.php |   2 +-
 .../views/auth/two-factor-challenge.blade.php |   6 +-
 .../applications/advanced.blade.php           |   8 +-
 .../views/components/confirm-modal.blade.php  |   2 +-
 .../views/components/forms/input.blade.php    |   2 +-
 .../views/components/forms/select.blade.php   |   2 +-
 .../views/components/forms/textarea.blade.php |   2 +-
 .../views/components/limit-reached.blade.php  |   4 +-
 .../components/modal-confirmation.blade.php   |   8 +-
 .../views/components/modal-input.blade.php    |   6 +-
 resources/views/components/navbar.blade.php   |   6 +-
 .../views/components/pricing-plans.blade.php  |  84 +++++-----
 .../views/components/resource-view.blade.php  |   2 +-
 .../views/components/server/navbar.blade.php  |  12 +-
 .../views/components/server/sidebar.blade.php |   6 +-
 .../components/settings/navbar.blade.php      |   4 +-
 .../views/components/team/navbar.blade.php    |   8 +-
 resources/views/components/toast.blade.php    |   2 +-
 resources/views/destination/all.blade.php     |   4 +-
 resources/views/errors/401.blade.php          |   2 +-
 resources/views/errors/403.blade.php          |   2 +-
 resources/views/errors/404.blade.php          |   2 +-
 resources/views/errors/419.blade.php          |   4 +-
 resources/views/errors/429.blade.php          |   4 +-
 resources/views/errors/500.blade.php          |   4 +-
 resources/views/errors/503.blade.php          |   4 +-
 resources/views/layouts/app.blade.php         |  10 +-
 resources/views/layouts/base.blade.php        |   2 +-
 .../views/livewire/activity-monitor.blade.php |   2 +-
 .../views/livewire/admin/index.blade.php      |   2 +-
 .../views/livewire/boarding/index.blade.php   |   4 +-
 resources/views/livewire/dashboard.blade.php  |  26 ++-
 .../views/livewire/destination/show.blade.php |   4 +-
 .../livewire/force-password-reset.blade.php   |   4 +-
 .../views/livewire/layout-popups.blade.php    |   8 +-
 .../livewire/new-activity-monitor.blade.php   |   2 +-
 .../livewire/notifications/discord.blade.php  |   2 +-
 .../livewire/notifications/telegram.blade.php |   4 +-
 .../views/livewire/profile/index.blade.php    |   4 +-
 .../project/application/advanced.blade.php    |   4 +-
 .../application/configuration.blade.php       |  34 ++--
 .../application/deployment/show.blade.php     |   2 +-
 .../project/application/general.blade.php     |   4 +-
 .../project/application/heading.blade.php     | 157 ++++++++----------
 .../views/livewire/project/clone-me.blade.php |   8 +-
 .../project/database/configuration.blade.php  |  20 +--
 .../project/database/heading.blade.php        |   8 +-
 .../project/database/redis/general.blade.php  |   2 +-
 .../views/livewire/project/edit.blade.php     |   2 +-
 .../project/environment-edit.blade.php        |   2 +-
 .../views/livewire/project/index.blade.php    |  15 +-
 ...ub-private-repository-deploy-key.blade.php |   4 +-
 .../new/github-private-repository.blade.php   |   6 +-
 .../new/public-git-repository.blade.php       |   2 +-
 .../livewire/project/new/select.blade.php     |  18 +-
 .../livewire/project/resource/index.blade.php |  32 ++--
 .../project/service/configuration.blade.php   |  22 +--
 .../livewire/project/service/index.blade.php  |  10 +-
 .../livewire/project/service/navbar.blade.php |   2 +-
 .../project/service/stack-form.blade.php      |   2 +-
 .../project/shared/destination.blade.php      |   4 +-
 .../environment-variable/show.blade.php       |   2 +-
 .../project/shared/get-logs.blade.php         |   2 +-
 .../project/shared/resource-limits.blade.php  |   6 +-
 .../shared/resource-operations.blade.php      |   4 +-
 .../scheduled-task/executions.blade.php       |   2 +-
 .../livewire/project/shared/tags.blade.php    |   2 +-
 .../project/shared/webhooks.blade.php         |   4 +-
 .../views/livewire/project/show.blade.php     |  17 +-
 .../livewire/realtime-connection.blade.php    |   2 +-
 .../livewire/security/api-tokens.blade.php    |   4 +-
 .../security/private-key/show.blade.php       |   4 +-
 .../views/livewire/server/form.blade.php      |   8 +-
 .../views/livewire/server/index.blade.php     |   2 +-
 .../views/livewire/server/new/by-ip.blade.php |  10 +-
 .../views/livewire/server/proxy.blade.php     |   2 +-
 .../dynamic-configuration-navbar.blade.php    |   2 +-
 .../proxy/dynamic-configurations.blade.php    |   2 +-
 .../views/livewire/server/resources.blade.php |   8 +-
 .../server/show-private-key.blade.php         |   2 +-
 .../views/livewire/settings/index.blade.php   |   8 +-
 .../livewire/source/github/change.blade.php   |   2 +-
 .../livewire/subscription/actions.blade.php   |   8 +-
 .../livewire/subscription/index.blade.php     |   2 +-
 resources/views/livewire/tags/index.blade.php |  10 +-
 resources/views/livewire/tags/show.blade.php  |  10 +-
 .../team-shared-variables-index.blade.php     |   2 +-
 resources/views/livewire/team/index.blade.php |   2 +-
 .../views/livewire/team/invitations.blade.php |   2 +-
 .../views/livewire/team/member.blade.php      |   2 +-
 .../livewire/team/storage/index.blade.php     |   6 +-
 .../views/livewire/waitlist/index.blade.php   |   2 +-
 resources/views/security/index.blade.php      |   2 +-
 .../security/private-key/index.blade.php      |   2 +-
 resources/views/source/all.blade.php          |   8 +-
 resources/views/source/new.blade.php          |   8 +-
 103 files changed, 413 insertions(+), 445 deletions(-)

diff --git a/app/Livewire/Project/Application/General.php b/app/Livewire/Project/Application/General.php
index e530a0698..67f6c2115 100644
--- a/app/Livewire/Project/Application/General.php
+++ b/app/Livewire/Project/Application/General.php
@@ -251,7 +251,7 @@ class General extends Component
                 if ($this->application->additional_servers->count() === 0) {
                     foreach ($domains as $domain) {
                         if (!validate_dns_entry($domain, $this->application->destination->server)) {
-                            $showToaster && $this->dispatch('error', "Validating DNS ($domain) failed.", "Make sure you have added the DNS records correctly.<br><br>Check this <a target='_blank' class='text-white underline' href='https://coolify.io/docs/dns-settings'>documentation</a> for further help.");
+                            $showToaster && $this->dispatch('error', "Validating DNS ($domain) failed.", "Make sure you have added the DNS records correctly.<br><br>Check this <a target='_blank' class='dark:text-white underline' href='https://coolify.io/docs/dns-settings'>documentation</a> for further help.");
                         }
                     }
                 }
diff --git a/package-lock.json b/package-lock.json
index cc9889a18..011955424 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,6 @@
                 "@tailwindcss/forms": "^0.5.7",
                 "@tailwindcss/typography": "0.5.10",
                 "alpinejs": "3.13.5",
-                "daisyui": "4.7.2",
                 "ioredis": "5.3.2",
                 "tailwindcss-scrollbar": "0.1.0"
             },
@@ -16,6 +15,7 @@
                 "@vitejs/plugin-vue": "4.5.1",
                 "autoprefixer": "10.4.18",
                 "axios": "1.6.7",
+                "daisyui": "^4.7.3",
                 "laravel-echo": "1.16.0",
                 "laravel-vite-plugin": "0.8.1",
                 "postcss": "8.4.35",
@@ -934,6 +934,7 @@
             "version": "0.8.0",
             "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
             "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
+            "dev": true,
             "dependencies": {
                 "cssesc": "^3.0.0",
                 "fastparse": "^1.1.2"
@@ -960,14 +961,16 @@
             "version": "3.2.0",
             "resolved": "https://registry.npmjs.org/culori/-/culori-3.2.0.tgz",
             "integrity": "sha512-HIEbTSP7vs1mPq/2P9In6QyFE0Tkpevh0k9a+FkjhD+cwsYm9WRSbn4uMdW9O0yXlNYC3ppxL3gWWPOcvEl57w==",
+            "dev": true,
             "engines": {
                 "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
             }
         },
         "node_modules/daisyui": {
-            "version": "4.7.2",
-            "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.7.2.tgz",
-            "integrity": "sha512-9UCss12Zmyk/22u+JbkVrHHxOzFOyY17HuqP5LeswI4hclbj6qbjJTovdj2zRy8cCH6/n6Wh0lTLjriGnyGh0g==",
+            "version": "4.7.3",
+            "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.7.3.tgz",
+            "integrity": "sha512-R8jUpBMAUm4rSyxzGa9QqFdJTkzREtb1QahXdDoOfElGiF4VbSuu5bfqQoOro1kkSagPy+aTKu5WtSSXmH3u3g==",
+            "dev": true,
             "dependencies": {
                 "css-selector-tokenizer": "^0.8",
                 "culori": "^3",
@@ -1124,7 +1127,8 @@
         "node_modules/fastparse": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
-            "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ=="
+            "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
+            "dev": true
         },
         "node_modules/fastq": {
             "version": "1.15.0",
diff --git a/package.json b/package.json
index 69c5c560a..2ca3fa590 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,6 @@
         "@tailwindcss/forms": "^0.5.7",
         "@tailwindcss/typography": "0.5.10",
         "alpinejs": "3.13.5",
-        "daisyui": "4.7.2",
         "ioredis": "5.3.2",
         "tailwindcss-scrollbar": "0.1.0"
     }
diff --git a/resources/css/app.css b/resources/css/app.css
index e9737dced..7d7659a8a 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -4,7 +4,7 @@
 
 html,
 body {
-    @apply bg-white text-neutral-600 dark:bg-base dark:text-neutral-400;
+    @apply bg-neutral-100 text-neutral-800 dark:bg-base dark:text-neutral-400;
 }
 
 body {
@@ -28,14 +28,14 @@ body {
 }
 
 option {
-    @apply text-white dark:bg-coolgray-100;
+    @apply dark:text-white dark:bg-coolgray-100;
 }
 
 .button {
-    @apply flex items-center justify-center px-3 py-1 text-sm font-normal normal-case rounded bg-neutral-200 hover:bg-neutral-300 dark:bg-coolgray-200 dark:text-white dark:hover:bg-coolgray-100 hover:text-black dark:hover:text-white dark:disabled:bg-coolgray-100/40 dark:disabled:text-neutral-800 min-w-fit;
+    @apply flex items-center justify-center gap-2 px-3 py-1 text-sm font-normal normal-case rounded cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-coolgray-200 dark:text-white dark:hover:bg-coolgray-100 dark:hover:dark:text-white dark:disabled:bg-coolgray-100/40 dark:disabled:text-neutral-800 min-w-fit hover:dark:text-white ;
 }
 button[isError]:not(:disabled) {
-    @apply bg-red-600 hover:bg-red-700;
+    @apply text-white bg-red-600 hover:bg-red-700;
 }
 
 button[isHighlighted]:not(:disabled) {
@@ -44,19 +44,19 @@ button[isHighlighted]:not(:disabled) {
 
 
 h1 {
-    @apply text-2xl font-bold dark:text-white text-neutral-800;
+    @apply text-2xl font-bold dark:text-white;
 }
 
 h2 {
-    @apply text-xl font-bold dark:text-white text-neutral-800;
+    @apply text-xl font-bold dark:text-white;
 }
 
 h3 {
-    @apply text-lg font-bold dark:text-white text-neutral-800;
+    @apply text-lg font-bold dark:text-white;
 }
 
 h4 {
-    @apply text-base font-bold dark:text-white text-neutral-800;
+    @apply text-base font-bold dark:text-white;
 }
 
 a {
@@ -64,11 +64,11 @@ a {
 }
 
 label {
-    @apply dark:text-neutral-400 text-neutral-600;
+    @apply dark:text-neutral-400;
 }
 
 table {
-    @apply min-w-full divide-y divide-coolgray-200;
+    @apply min-w-full divide-y dark:divide-coolgray-200 divide-neutral-300;
 }
 
 thead {
@@ -76,7 +76,7 @@ thead {
 }
 
 tbody {
-    @apply divide-y divide-coolgray-200;
+    @apply divide-y dark:divide-coolgray-200 divide-neutral-300;
 }
 
 tr {
@@ -112,7 +112,7 @@ tr td:first-child {
 }
 
 .badge {
-    @apply inline-block w-3 h-3 text-xs font-bold leading-none border border-black rounded-full;
+    @apply inline-block w-3 h-3 text-xs font-bold leading-none border rounded-full border-neutral-200 dark:border-black;
 }
 
 .badge-success {
@@ -142,11 +142,13 @@ tr td:first-child {
 .menu-item-active {
     @apply text-black rounded-none dark:bg-coolgray-200 dark:text-warning bg-neutral-200;
 }
-
-.icon {
-    @apply w-6 h-6 hover:text-white;
+.heading-item-active {
+    @apply text-black rounded-none dark:bg-coolgray-200 dark:text-warning;
 }
 
+.icon {
+    @apply w-6 h-6 dark:hover:text-white;
+}
 
 
 .scrollbar {
@@ -162,7 +164,7 @@ tr td:first-child {
 }
 
 .navbar-main {
-    @apply flex items-center h-10 gap-6 pb-2 border-b-2 border-solid border-coolgray-200;
+    @apply flex items-center h-10 gap-6 pb-2 border-b-2 border-solid dark:border-coolgray-200;
 }
 
 .loading {
@@ -174,7 +176,7 @@ tr td:first-child {
 }
 
 .box {
-    @apply flex p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 bg-neutral-100 hover:bg-neutral-200 dark:hover:bg-coollabs-100 dark:hover:text-white hover:no-underline;
+    @apply flex p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 bg-white border border-neutral-200 dark:border-black hover:bg-neutral-200 dark:hover:bg-coollabs-100 dark:hover:text-white hover:no-underline;
 }
 
 .on-box {
@@ -230,13 +232,13 @@ tr td:first-child {
 }
 
 .text-helper {
-    @apply inline-block font-bold text-coollabs dark:text-warning;
+    @apply inline-block font-bold text-red-500 dark:text-warning;
 }
 .info-helper {
     @apply cursor-pointer text-coollabs dark:text-warning;
 }
 .info-helper-popup {
-    @apply absolute z-40 hidden text-xs rounded text-neutral-700 group-hover:block dark:border-coolgray-500 border-neutral-900 dark:bg-coolgray-400 bg-neutral-100 dark:text-neutral-300;
+    @apply absolute z-40 hidden text-xs rounded text-neutral-700 group-hover:block dark:border-coolgray-500 border-neutral-900 dark:bg-coolgray-400 bg-neutral-200 dark:text-neutral-300;
 }
 
 .buyme {
diff --git a/resources/js/components/MagicBar.vue b/resources/js/components/MagicBar.vue
index 7fe770279..5a6ca8016 100644
--- a/resources/js/components/MagicBar.vue
+++ b/resources/js/components/MagicBar.vue
@@ -27,7 +27,7 @@
                             </svg>
                             <input type="text" v-model="search" ref="searchInput" @keydown.down="focusNext(magic.length)"
                                 @keydown.up="focusPrev(magic.length)" @keyup.enter="callAction"
-                                class="w-full h-10 pr-4 text-white rounded outline-none bg-coolgray-400 pl-11 placeholder:text-neutral-700 sm:text-sm focus:outline-none"
+                                class="w-full h-10 pr-4 dark:text-white rounded outline-none bg-coolgray-400 pl-11 placeholder:text-neutral-700 sm:text-sm focus:outline-none"
                                 placeholder="Search, jump or create... magically... 🪄" role="combobox"
                                 aria-expanded="false" aria-controls="options">
                         </div>
@@ -39,7 +39,7 @@
                                     class="mt-4 mb-2 text-xs font-semibold text-neutral-500">{{
                                         possibleSequences[sequenceState.sequence[sequenceState.currentActionIndex]].newTitle }}
                                 </h2>
-                                <ul class="mt-2 -mx-4 text-white">
+                                <ul class="mt-2 -mx-4 dark:text-white">
                                     <li class="flex items-center px-4 py-2 cursor-pointer select-none group hover:bg-coolgray-400"
                                         id="option-1" role="option" tabindex="-1"
                                         @click="addNew(sequenceState.sequence[sequenceState.currentActionIndex])">
@@ -67,7 +67,7 @@
                                 </ul>
                             </li>
                             <li>
-                                <ul v-if="magic.length == 0" class="mt-2 -mx-4 text-white">
+                                <ul v-if="magic.length == 0" class="mt-2 -mx-4 dark:text-white">
                                     <li class="flex items-center px-4 py-2 select-none group">
                                         <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"
@@ -85,7 +85,7 @@
                                     class="mt-4 mb-2 text-xs font-semibold text-neutral-500">{{
                                         possibleSequences[sequenceState.sequence[sequenceState.currentActionIndex]].title }}
                                 </h2>
-                                <ul v-if="magic.length != 0" class="mt-2 -mx-4 text-white">
+                                <ul v-if="magic.length != 0" class="mt-2 -mx-4 dark:text-white">
                                     <li class="flex items-center px-4 py-2 transition-all cursor-pointer select-none group hover:bg-coolgray-400"
                                         :class="{ 'bg-coollabs': currentFocus === index }" id="option-1" role="option"
                                         tabindex="-1" v-for="action, index in magic" @click="goThroughSequence(index)"
diff --git a/resources/views/auth/confirm-password.blade.php b/resources/views/auth/confirm-password.blade.php
index 491d25cac..c376c6af5 100644
--- a/resources/views/auth/confirm-password.blade.php
+++ b/resources/views/auth/confirm-password.blade.php
@@ -2,7 +2,7 @@
     <div class="flex items-center justify-center h-screen">
         <div>
             <div class="flex flex-col items-center pb-8">
-                <div class="text-5xl font-bold tracking-tight text-center text-white">Coolify</div>
+                <div class="text-5xl font-bold tracking-tight text-center dark:text-white">Coolify</div>
                 <x-version />
             </div>
             <div class="w-96">
diff --git a/resources/views/auth/forgot-password.blade.php b/resources/views/auth/forgot-password.blade.php
index d52a5b4e3..c431ad518 100644
--- a/resources/views/auth/forgot-password.blade.php
+++ b/resources/views/auth/forgot-password.blade.php
@@ -3,7 +3,7 @@
         <div>
             <div class="flex flex-col items-center pb-8">
                 <a href="{{ route('dashboard') }}">
-                    <div class="text-5xl font-bold tracking-tight text-center text-white">Coolify</div>
+                    <div class="text-5xl font-bold tracking-tight text-center dark:text-white">Coolify</div>
                 </a>
                 <x-version />
             </div>
@@ -20,7 +20,7 @@
                     </form>
                 @else
                     <div>Transactional emails are not active on this instance.</div>
-                    <div>See how to set it in our <a class="text-white" target="_blank"
+                    <div>See how to set it in our <a class="dark:text-white" target="_blank"
                             href="{{ config('constants.docs.base_url') }}">docs</a>, or how to
                         manually reset password.
                     </div>
diff --git a/resources/views/auth/reset-password.blade.php b/resources/views/auth/reset-password.blade.php
index 6b248cfee..d227a7498 100644
--- a/resources/views/auth/reset-password.blade.php
+++ b/resources/views/auth/reset-password.blade.php
@@ -3,7 +3,7 @@
         <div>
             <div class="flex flex-col items-center ">
                 <a href="{{ route('dashboard') }}">
-                    <div class="text-5xl font-bold tracking-tight text-center text-white">Coolify</div>
+                    <div class="text-5xl font-bold tracking-tight text-center dark:text-white">Coolify</div>
                 </a>
             </div>
             <div class="flex items-center justify-center pb-4 text-center">
diff --git a/resources/views/auth/two-factor-challenge.blade.php b/resources/views/auth/two-factor-challenge.blade.php
index 90d975f22..7ba75e80a 100644
--- a/resources/views/auth/two-factor-challenge.blade.php
+++ b/resources/views/auth/two-factor-challenge.blade.php
@@ -2,7 +2,7 @@
     <div class="flex items-center justify-center h-screen">
         <div>
             <div class="flex flex-col items-center pb-8">
-                <div class="text-5xl font-bold tracking-tight text-center text-white">Coolify</div>
+                <div class="text-5xl font-bold tracking-tight text-center dark:text-white">Coolify</div>
                 <x-version />
             </div>
             <div class="w-96" x-data="{ showRecovery: false }">
@@ -12,7 +12,7 @@
                         <div>
                             <x-forms.input required type="number" name="code" label="{{ __('input.code') }}"
                                 autofocus />
-                            <div class="pt-2 text-xs cursor-pointer hover:underline hover:text-white"
+                            <div class="pt-2 text-xs cursor-pointer hover:underline hover:dark:text-white"
                                 x-on:click="showRecovery = !showRecovery">Use
                                 Recovery Code
                             </div>
@@ -22,7 +22,7 @@
                         <div>
                             <x-forms.input required type="text" name="recovery_code"
                                 label="{{ __('input.recovery_code') }}" />
-                            <div class="pt-2 text-xs cursor-pointer hover:underline hover:text-white"
+                            <div class="pt-2 text-xs cursor-pointer hover:underline hover:dark:text-white"
                                 x-on:click="showRecovery = !showRecovery">Use
                                 One-Time Code
                             </div>
diff --git a/resources/views/components/applications/advanced.blade.php b/resources/views/components/applications/advanced.blade.php
index 622708103..72e92f367 100644
--- a/resources/views/components/applications/advanced.blade.php
+++ b/resources/views/components/applications/advanced.blade.php
@@ -1,14 +1,14 @@
 <div class="flex items-center gap-2">
     <div class="group">
-        <label tabindex="0" class="flex items-center gap-2 cursor-pointer hover:text-white"> Advanced
+        <label tabindex="0" class="flex items-center gap-2 cursor-pointer hover:dark:text-white"> Advanced
             <x-chevron-down />
         </label>
         <div class="absolute hidden group-hover:block ">
             <ul tabindex="0"
-                class="relative text-xs text-white normal-case rounded -ml-44 min-w-max menu bg-coolgray-200">
+                class="relative text-xs dark: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 hover:text-white"
+                        <div class="rounded-none hover:bg-coollabs hover:dark: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"
@@ -27,7 +27,7 @@
                     </li>
                 @else
                     <li>
-                        <div class="rounded-none hover:bg-coollabs hover:text-white" wire:click='deploy(true)'>
+                        <div class="rounded-none hover:bg-coollabs hover:dark: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/confirm-modal.blade.php b/resources/views/components/confirm-modal.blade.php
index 461ac2637..a0cd8d01e 100644
--- a/resources/views/components/confirm-modal.blade.php
+++ b/resources/views/components/confirm-modal.blade.php
@@ -20,7 +20,7 @@
 <div x-cloak x-show="open" x-transition class="fixed inset-0 z-50 flex pt-10">
     <div @click.away="open = false" class="w-screen h-20 max-w-xl mx-auto bg-black rounded-lg">
         <div class="flex flex-col items-center justify-center h-full">
-            <div class="pb-5 text-white" x-text="message"></div>
+            <div class="pb-5 dark:text-white" x-text="message"></div>
             <div>
                 <x-forms.button x-on:click='confirmed()'>Confirm</x-forms.button>
                 <x-forms.button x-on:click="open = false">Cancel</x-forms.button>
diff --git a/resources/views/components/forms/input.blade.php b/resources/views/components/forms/input.blade.php
index 8f4c38edf..f6b255a9f 100644
--- a/resources/views/components/forms/input.blade.php
+++ b/resources/views/components/forms/input.blade.php
@@ -16,7 +16,7 @@
         <div class="relative" x-data="{ type: 'password' }">
             @if ($allowToPeak)
                 <div x-on:click="changePasswordFieldType"
-                    class="absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer hover:text-white">
+                    class="absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer hover:dark: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" />
diff --git a/resources/views/components/forms/select.blade.php b/resources/views/components/forms/select.blade.php
index 5f621179e..1159830bf 100644
--- a/resources/views/components/forms/select.blade.php
+++ b/resources/views/components/forms/select.blade.php
@@ -9,7 +9,7 @@
             @endif
         </label>
     @endif
-    <select {{ $attributes->merge(['class' => $defaultClass]) }} @required($required) wire:dirty.class.remove='text-white'
+    <select {{ $attributes->merge(['class' => $defaultClass]) }} @required($required) wire:dirty.class.remove='dark:text-white'
         wire:dirty.class="text-black bg-warning" wire:loading.attr="disabled" name={{ $id }}
         @if ($attributes->whereStartsWith('wire:model')->first()) {{ $attributes->whereStartsWith('wire:model')->first() }} @else wire:model={{ $id }} @endif>
         {{ $slot }}
diff --git a/resources/views/components/forms/textarea.blade.php b/resources/views/components/forms/textarea.blade.php
index ea8865f6c..86f24302f 100644
--- a/resources/views/components/forms/textarea.blade.php
+++ b/resources/views/components/forms/textarea.blade.php
@@ -13,7 +13,7 @@
         <div class="relative" x-data="{ type: 'password' }">
             @if ($allowToPeak)
                 <div x-on:click="changePasswordFieldType"
-                    class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer hover:text-white">
+                    class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer hover:dark: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" />
diff --git a/resources/views/components/limit-reached.blade.php b/resources/views/components/limit-reached.blade.php
index 584fd2428..d53dae3f3 100644
--- a/resources/views/components/limit-reached.blade.php
+++ b/resources/views/components/limit-reached.blade.php
@@ -1,6 +1,6 @@
 <div class="flex flex-col items-center justify-center h-32">
-    <span class="text-xl font-bold text-white">You have reached the limit of {{ $name }} you can create.</span>
-    <span>Please <a class="text-white underline "href="{{ route('subscription.show') }}">upgrade your
+    <span class="text-xl font-bold dark:text-white">You have reached the limit of {{ $name }} you can create.</span>
+    <span>Please <a class="dark:text-white underline "href="{{ route('subscription.show') }}">upgrade your
             subscription</a> to create more
         {{ $name }}.</span>
 </div>
diff --git a/resources/views/components/modal-confirmation.blade.php b/resources/views/components/modal-confirmation.blade.php
index b1b9a5d40..66704b8db 100644
--- a/resources/views/components/modal-confirmation.blade.php
+++ b/resources/views/components/modal-confirmation.blade.php
@@ -47,7 +47,7 @@
         @endif
     @endif
     <template x-teleport="body">
-        <div x-show="modalOpen" class="fixed top-0 lg:top-10 left-0 z-[99] flex items-start justify-center w-screen h-screen"
+        <div x-show="modalOpen" class="fixed top-0 lg:pt-10 left-0 z-[99] flex items-start justify-center w-screen h-screen"
             x-cloak>
             <div x-show="modalOpen" x-transition:enter="ease-out duration-100" x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-100"
@@ -59,11 +59,11 @@
                 x-transition:leave="ease-in duration-100"
                 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                 x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
-                class="relative w-full py-6 border rounded shadow-lg dark:bg-base px-7 dark:border-coolgray-300 sm:max-w-lg">
+                class="relative w-full py-6 border rounded min-w-full lg:min-w-[36rem] max-w-fit bg-neutral-100 border-neutral-400 dark:bg-base px-7 dark:border-coolgray-300">
                 <div class="flex items-center justify-between pb-3">
                     <h3 class="text-2xl font-bold">{{ $title }}</h3>
                     {{-- <button @click="modalOpen=false"
-                        class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 text-white rounded-full hover:bg-coolgray-300">
+                        class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 rounded-full dark:text-white hover:bg-coolgray-300">
                         <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                             stroke-width="1.5" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -74,7 +74,7 @@
                     {{ $slot }}
                 </div>
                 <div class="flex flex-row justify-end space-x-2">
-                    <x-forms.button @click="modalOpen=false" class="w-24 bg-coolgray-200 hover:bg-coolgray-300"
+                    <x-forms.button @click="modalOpen=false" class="w-24 dark:bg-coolgray-200 dark:hover:bg-coolgray-300"
                         type="button">Cancel
                     </x-forms.button>
                     <div class="flex-1"></div>
diff --git a/resources/views/components/modal-input.blade.php b/resources/views/components/modal-input.blade.php
index dce9ec611..8b56ce750 100644
--- a/resources/views/components/modal-input.blade.php
+++ b/resources/views/components/modal-input.blade.php
@@ -21,7 +21,7 @@
         @endif
     @endif
     <template x-teleport="body">
-        <div x-show="modalOpen" class="fixed top-0 left-0 z-[99] flex items-center justify-center w-screen h-screen"
+        <div x-show="modalOpen" class="fixed top-0 left-0 lg:px-0 px-4 z-[99] flex items-center justify-center w-screen h-screen"
             x-cloak>
             <div x-show="modalOpen" x-transition:enter="ease-out duration-100" x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-100"
@@ -33,11 +33,11 @@
                 x-transition:leave="ease-in duration-100"
                 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                 x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
-                class="relative w-full py-6 border rounded min-w-[36rem] max-w-fit dark:bg-base px-7 dark:border-coolgray-300">
+                class="relative w-full py-6 border rounded min-w-full lg:min-w-[36rem] max-w-fit bg-neutral-100 border-neutral-400 dark:bg-base px-7 dark:border-coolgray-300">
                 <div class="flex items-center justify-between pb-3">
                     <h3 class="text-2xl font-bold">{{ $title }}</h3>
                     <button @click="modalOpen=false"
-                        class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 text-white rounded-full hover:bg-coolgray-300">
+                        class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 rounded-full dark:text-white hover:bg-coolgray-300">
                         <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                             stroke-width="1.5" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index 481c68e83..6ecc2e70b 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -1,10 +1,10 @@
-<nav class="flex flex-col flex-1 pl-4 bg-white border-r dark:border-coolgray-200 dark:bg-base">
-    <div class="flex w-full px-2 pt-6 pb-4">
+<nav class="flex flex-col flex-1 pl-2 bg-white border-r dark:border-coolgray-200 dark:bg-base">
+    <div class="flex w-full pt-6 pb-4 pl-3">
         <div class="flex flex-col">
             <div class="text-2xl font-bold tracking-wide dark:text-white">Coolify</div>
             <x-version />
         </div>
-        {{-- <button onclick="changeTheme()">Dark/light</button> --}}
+        <button onclick="changeTheme()">Dark/light</button>
     </div>
     <div class="px-2 pt-2 pb-7">
         <livewire:switch-team />
diff --git a/resources/views/components/pricing-plans.blade.php b/resources/views/components/pricing-plans.blade.php
index e6ea81342..b58977259 100644
--- a/resources/views/components/pricing-plans.blade.php
+++ b/resources/views/components/pricing-plans.blade.php
@@ -5,16 +5,16 @@
     <div class="px-6 mx-auto lg:px-8">
         <div class="flex justify-center">
             <fieldset
-                class="grid grid-cols-2 p-1 text-xs font-semibold leading-5 text-center text-white rounded gap-x-1 bg-white/5">
+                class="grid grid-cols-2 p-1 text-xs font-semibold leading-5 text-center dark:text-white rounded gap-x-1 bg-white/5">
                 <legend class="sr-only">Payment frequency</legend>
                 <label class="cursor-pointer rounded px-2.5 py-1"
-                    :class="selected === 'monthly' ? 'bg-coollabs-100 text-white' : ''">
+                    :class="selected === 'monthly' ? 'bg-coollabs-100 dark:text-white' : ''">
                     <input type="radio" x-on:click="selected = 'monthly'" name="frequency" value="monthly"
                         class="sr-only">
                     <span>Monthly</span>
                 </label>
                 <label class="cursor-pointer rounded px-2.5 py-1"
-                    :class="selected === 'yearly' ? 'bg-coollabs-100 text-white' : ''">
+                    :class="selected === 'yearly' ? 'bg-coollabs-100 dark:text-white' : ''">
                     <input type="radio" x-on:click="selected = 'yearly'" name="frequency" value="annually"
                         class="sr-only">
                     <span>Annually</span>
@@ -36,7 +36,7 @@
         </div>
         {{-- <div class="p-4 rounded bg-coolgray-400">
             <h2 id="tier-hobby" class="flex items-start gap-4 text-4xl font-bold tracking-tight">Unlimited Trial
-                <x-forms.button><a class="font-bold text-white hover:no-underline"
+                <x-forms.button><a class="font-bold dark:text-white hover:no-underline"
                         href="https://github.com/coollabsio/coolify">Get Started</a></x-forms.button>
             </h2>
             <p class="mt-4 text-sm leading-6">Start self-hosting <span class="text-warning">without limits</span> with
@@ -46,19 +46,19 @@
 
         <div class="flow-root mt-12">
             <div class="pb-10 text-xl text-center">For the detailed list of features, please visit our landing page: <a
-                    class="font-bold text-white underline" href="https://coolify.io">coolify.io</a></div>
+                    class="font-bold dark:text-white underline" href="https://coolify.io">coolify.io</a></div>
             <div
                 class="grid max-w-sm grid-cols-1 -mt-16 divide-y divide-coolgray-500 isolate gap-y-16 sm:mx-auto lg:-mx-8 lg:mt-0 lg:max-w-none lg:grid-cols-3 lg:divide-x lg:divide-y-0 xl:-mx-4">
 
                 <div class="pt-16 lg:px-8 lg:pt-0 xl:px-14">
-                    <h3 id="tier-basic" class="text-base font-semibold leading-7 text-white">Basic</h3>
+                    <h3 id="tier-basic" class="text-base font-semibold leading-7 dark:text-white">Basic</h3>
                     <p class="flex items-baseline mt-6 gap-x-1">
                         <span x-show="selected === 'monthly'" x-cloak>
-                            <span class="text-4xl font-bold tracking-tight text-white">$5</span>
+                            <span class="text-4xl font-bold tracking-tight dark:text-white">$5</span>
                             <span class="text-sm font-semibold leading-6 ">/month + VAT</span>
                         </span>
                         <span x-show="selected === 'yearly'" x-cloak>
-                            <span class="text-4xl font-bold tracking-tight text-white">$4</span>
+                            <span class="text-4xl font-bold tracking-tight dark:text-white">$4</span>
                             <span class="text-sm font-semibold leading-6 ">/month + VAT</span>
                         </span>
                     </p>
@@ -73,7 +73,7 @@
                             {{ $basic }}
                         @endisset
                     @endif
-                    <p class="mt-10 text-sm leading-6 text-white h-[6.5rem]">Begin hosting your own services in the
+                    <p class="mt-10 text-sm leading-6 dark:text-white h-[6.5rem]">Begin hosting your own services in the
                         cloud.
                     </p>
                     <ul role="list" class="space-y-3 text-sm leading-6 ">
@@ -84,7 +84,7 @@
                                     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" />
                             </svg>
-                            Connect <span class="px-1 font-bold text-white">2</span> servers
+                            Connect <span class="px-1 font-bold dark:text-white">2</span> servers
                         </li>
                         <li class="flex gap-x-3">
                             <svg class="flex-none w-5 h-6 text-warning" viewBox="0 0 20 20" fill="currentColor"
@@ -104,7 +104,7 @@
                             </svg>
                             Email Support
                         </li>
-                        <li class="flex font-bold text-white gap-x-3">
+                        <li class="flex font-bold dark:text-white gap-x-3">
                             <svg width="512" height="512" class="flex-none w-5 h-6 text-green-600"
                                 viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                 <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
@@ -119,14 +119,14 @@
                     </ul>
                 </div>
                 <div class="pt-16 lg:px-8 lg:pt-0 xl:px-14">
-                    <h3 id="tier-pro" class="text-base font-semibold leading-7 text-white">Pro</h3>
+                    <h3 id="tier-pro" class="text-base font-semibold leading-7 dark:text-white">Pro</h3>
                     <p class="flex items-baseline mt-6 gap-x-1">
                         <span x-show="selected === 'monthly'" x-cloak>
-                            <span class="text-4xl font-bold tracking-tight text-white">$30</span>
+                            <span class="text-4xl font-bold tracking-tight dark:text-white">$30</span>
                             <span class="text-sm font-semibold leading-6 ">/month + VAT</span>
                         </span>
                         <span x-show="selected === 'yearly'" x-cloak>
-                            <span class="text-4xl font-bold tracking-tight text-white">$27</span>
+                            <span class="text-4xl font-bold tracking-tight dark:text-white">$27</span>
                             <span class="text-sm font-semibold leading-6 ">/month + VAT</span>
                         </span>
                     </p>
@@ -141,7 +141,7 @@
                             {{ $pro }}
                         @endisset
                     @endif
-                    <p class="h-20 mt-10 text-sm leading-6 text-white">Expand your business or set up your own hosting
+                    <p class="h-20 mt-10 text-sm leading-6 dark:text-white">Expand your business or set up your own hosting
                         environment.
                     </p>
                     <ul role="list" class="mt-6 space-y-3 text-sm leading-6 ">
@@ -152,7 +152,7 @@
                                     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" />
                             </svg>
-                            Connect <span class="px-1 font-bold text-white">10</span> servers
+                            Connect <span class="px-1 font-bold dark:text-white">10</span> servers
                         </li>
                         <li class="flex gap-x-3">
                             <svg class="flex-none w-5 h-6 text-warning" viewBox="0 0 20 20" fill="currentColor"
@@ -172,7 +172,7 @@
                             </svg>
                             Priority Email Support
                         </li>
-                        <li class="flex font-bold text-white gap-x-3">
+                        <li class="flex font-bold dark:text-white gap-x-3">
                             <svg width="512" height="512" class="flex-none w-5 h-6 text-green-600"
                                 viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                 <g fill="none" stroke="currentColor" stroke-linecap="round"
@@ -187,14 +187,14 @@
                     </ul>
                 </div>
                 <div class="pt-16 lg:px-8 lg:pt-0 xl:px-14">
-                    <h3 id="tier-ultimate" class="text-base font-semibold leading-7 text-white">Ultimate</h3>
+                    <h3 id="tier-ultimate" class="text-base font-semibold leading-7 dark:text-white">Ultimate</h3>
                    <p class="flex items-baseline mt-6 gap-x-1">
                         <span x-show="selected === 'monthly'" x-cloak>
-                            <span class="text-4xl font-bold tracking-tight text-white">Custom</span>
+                            <span class="text-4xl font-bold tracking-tight dark:text-white">Custom</span>
                             {{-- <span class="text-sm font-semibold leading-6 ">pay-as-you-go</span> --}}
                         </span>
                         <span x-show="selected === 'yearly'" x-cloak>
-                            <span class="text-4xl font-bold tracking-tight text-white">Custom</span>
+                            <span class="text-4xl font-bold tracking-tight dark:text-white">Custom</span>
                             {{-- <span class="text-sm font-semibold leading-6 ">/month + VAT</span> --}}
                         </span>
                     </p>
@@ -209,7 +209,7 @@
                             {{ $ultimate }}
                         @endisset
                     @endif
-                    <p class="h-20 mt-10 text-sm leading-6 text-white">Easily manage complex infrastructures in a
+                    <p class="h-20 mt-10 text-sm leading-6 dark:text-white">Easily manage complex infrastructures in a
                         single location.</p>
                     <ul role="list" class="mt-6 space-y-3 text-sm leading-6 ">
                         <li class="flex ">
@@ -219,7 +219,7 @@
                                     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" />
                             </svg>
-                            Connect <span class="px-1 font-bold text-white">10+</span> servers
+                            Connect <span class="px-1 font-bold dark:text-white">10+</span> servers
                         </li>
 
                         <li class="flex gap-x-3">
@@ -231,7 +231,7 @@
                             </svg>
                             Included Email System
                         </li>
-                        <li class="flex font-bold text-white gap-x-3">
+                        <li class="flex font-bold dark:text-white gap-x-3">
                             <svg class="flex-none w-5 h-6 text-warning" viewBox="0 0 20 20" fill="currentColor"
                                 aria-hidden="true">
                                 <path fill-rule="evenodd"
@@ -240,7 +240,7 @@
                             </svg>
                             Priority (Email/Chat) Support
                         </li>
-                        <li class="flex font-bold text-white gap-x-3">
+                        <li class="flex font-bold dark:text-white gap-x-3">
                             <svg width="512" height="512" class="flex-none w-5 h-6 text-green-600"
                                 viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                 <g fill="none" stroke="currentColor" stroke-linecap="round"
@@ -259,7 +259,7 @@
                 <div class="flex items-start gap-4 text-xl tracking-tight">Need official support for
                     your self-hosted instance?
                     <x-forms.button>
-                        <a class="font-bold text-white hover:no-underline"
+                        <a class="font-bold dark:text-white hover:no-underline"
                             href="{{ config('coolify.contact') }}">Contact
                             Us</a>
                     </x-forms.button>
@@ -267,11 +267,11 @@
             </div> --}}
         </div>
 
-        {{-- <div class="pt-8 pb-12 text-4xl font-bold text-center text-white">Included in all plans</div>
+        {{-- <div class="pt-8 pb-12 text-4xl font-bold text-center dark:text-white">Included in all plans</div>
         <div class="grid grid-cols-1 gap-10 md:grid-cols-2 gap-y-28">
             <div>
                 <div class="flex items-center gap-4 mb-4">
-                    <div class="flex items-center justify-center w-10 h-10 text-white rounded-lg bg-coolgray-500">
+                    <div class="flex items-center justify-center w-10 h-10 dark:text-white rounded-lg bg-coolgray-500">
                         <svg width="512" height="512" class="icon" viewBox="0 0 24 24"
                             xmlns="http://www.w3.org/2000/svg">
                             <path fill="none" stroke="currentColor" stroke-linecap="round"
@@ -279,7 +279,7 @@
                                 d="M3 7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm12 13H6a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3h12M7 8v.01M7 16v.01M20 15l-2 3h3l-2 3" />
                         </svg>
                     </div>
-                    <div class="text-2xl font-semibold text-white">Bring Your Own Servers</div>
+                    <div class="text-2xl font-semibold dark:text-white">Bring Your Own Servers</div>
                 </div>
                 <div class="mt-1 text-base leading-7 text-gray-300">
                     Bring your own server from any cloud providers, or even your own server at home! All you need is SSH
@@ -288,7 +288,7 @@
             </div>
             <div>
                 <div class="flex items-center gap-4 mb-4">
-                    <div class="flex items-center justify-center w-10 h-10 text-white rounded-lg bg-coolgray-500">
+                    <div class="flex items-center justify-center w-10 h-10 dark:text-white rounded-lg bg-coolgray-500">
                         <svg width="512" height="512" class="icon" viewBox="0 0 24 24"
                             xmlns="http://www.w3.org/2000/svg">
                             <g fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round"
@@ -301,7 +301,7 @@
                             </g>
                         </svg>
                     </div>
-                    <div class="text-2xl font-semibold text-white">Server Automations</div>
+                    <div class="text-2xl font-semibold dark:text-white">Server Automations</div>
                 </div>
                 <div class="mt-1 text-base leading-7 text-gray-300">
                     Once you connected your server, Coolify will start managing it and do a
@@ -311,7 +311,7 @@
             </div>
             <div>
                 <div class="flex items-center gap-4 mb-4">
-                    <div class="flex items-center justify-center w-10 h-10 text-white rounded-lg bg-coolgray-500">
+                    <div class="flex items-center justify-center w-10 h-10 dark:text-white rounded-lg bg-coolgray-500">
                         <svg width="512" height="512" viewBox="0 0 24 24" class="icon"
                             xmlns="http://www.w3.org/2000/svg">
                             <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
@@ -323,7 +323,7 @@
                             </g>
                         </svg>
                     </div>
-                    <div class="text-2xl font-semibold text-white">No Vendor Lock-in</div>
+                    <div class="text-2xl font-semibold dark:text-white">No Vendor Lock-in</div>
                 </div>
                 <div class="mt-1 text-base leading-7 text-gray-300">
                     You own your own data. All configurations saved on your own servers, so if
@@ -334,7 +334,7 @@
 
             <div>
                 <div class="flex items-center gap-4 mb-4">
-                    <div class="flex items-center justify-center w-10 h-10 text-white rounded-lg bg-coolgray-500">
+                    <div class="flex items-center justify-center w-10 h-10 dark:text-white rounded-lg bg-coolgray-500">
                         <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24"
                             stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
                             stroke-linejoin="round">
@@ -346,7 +346,7 @@
                             <path d="M7 10h2l2 3l2 -6l1 3h3" />
                         </svg>
                     </div>
-                    <div class="text-2xl font-semibold text-white">Monitoring</div>
+                    <div class="text-2xl font-semibold dark:text-white">Monitoring</div>
                 </div>
                 <div class="mt-1 text-base leading-7 text-gray-300">
                     Coolify will automatically monitor your configured servers and deployed
@@ -356,7 +356,7 @@
             </div>
             <div>
                 <div class="flex items-center gap-4 mb-4">
-                    <div class="flex items-center justify-center w-10 h-10 text-white rounded-lg bg-coolgray-500">
+                    <div class="flex items-center justify-center w-10 h-10 dark:text-white rounded-lg bg-coolgray-500">
                         <svg width="512" height="512" class="icon" viewBox="0 0 24 24"
                             xmlns="http://www.w3.org/2000/svg">
                             <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
@@ -366,7 +366,7 @@
                             </g>
                         </svg>
                     </div>
-                    <div class="text-2xl font-semibold text-white">Automatic Backups</div>
+                    <div class="text-2xl font-semibold dark:text-white">Automatic Backups</div>
                 </div>
                 <div class="mt-1 text-base leading-7 text-gray-300">
                     We automatically backup your databases to any S3 compatible solution. If
@@ -375,7 +375,7 @@
             </div>
             <div>
                 <div class="flex items-center gap-4 mb-4">
-                    <div class="flex items-center justify-center w-10 h-10 text-white rounded-lg bg-coolgray-500">
+                    <div class="flex items-center justify-center w-10 h-10 dark:text-white rounded-lg bg-coolgray-500">
                         <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24"
                             stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
                             stroke-linejoin="round">
@@ -384,7 +384,7 @@
                             <line x1="13" y1="17" x2="19" y2="17" />
                         </svg>
                     </div>
-                    <div class="text-2xl font-semibold text-white">Powerful API</div>
+                    <div class="text-2xl font-semibold dark:text-white">Powerful API</div>
                 </div>
                 <div class="mt-1 text-base leading-7 text-gray-300">
                     Programmatically deploy, query, and manage your servers & resources.
@@ -394,7 +394,7 @@
             </div>
             <div>
                 <div class="flex items-center gap-4 mb-4">
-                    <div class="flex items-center justify-center w-10 h-10 text-white rounded-lg bg-coolgray-500">
+                    <div class="flex items-center justify-center w-10 h-10 dark:text-white rounded-lg bg-coolgray-500">
                         <svg width="512" height="512" class="icon" viewBox="0 0 24 24"
                             xmlns="http://www.w3.org/2000/svg">
                             <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
@@ -406,7 +406,7 @@
                             </g>
                         </svg>
                     </div>
-                    <div class="text-2xl font-semibold text-white">Push to Deploy</div>
+                    <div class="text-2xl font-semibold dark:text-white">Push to Deploy</div>
                 </div>
                 <div class="mt-1 text-base leading-7 text-gray-300">
                     Git integration is default today. We support hosted (github.com,
@@ -417,7 +417,7 @@
             </div>
             <div>
                 <div class="flex items-center gap-4 mb-4">
-                    <div class="flex items-center justify-center w-10 h-10 text-white rounded-lg bg-coolgray-500">
+                    <div class="flex items-center justify-center w-10 h-10 dark:text-white rounded-lg bg-coolgray-500">
                         <svg width="512" height="512" class="icon" viewBox="0 0 24 24"
                             xmlns="http://www.w3.org/2000/svg">
                             <path fill="none" stroke="currentColor" stroke-linecap="round"
@@ -425,7 +425,7 @@
                                 d="M10 13a2 2 0 1 0 4 0a2 2 0 0 0-4 0m-2 8v-1a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1M15 5a2 2 0 1 0 4 0a2 2 0 0 0-4 0m2 5h2a2 2 0 0 1 2 2v1M5 5a2 2 0 1 0 4 0a2 2 0 0 0-4 0m-2 8v-1a2 2 0 0 1 2-2h2" />
                         </svg>
                     </div>
-                    <div class="text-2xl font-semibold text-white">Pull Request Deployments</div>
+                    <div class="text-2xl font-semibold dark:text-white">Pull Request Deployments</div>
                 </div>
                 <div class="mt-1 text-base leading-7 text-gray-300">
                     Automagically deploy new commits and pull requests separately to quickly
diff --git a/resources/views/components/resource-view.blade.php b/resources/views/components/resource-view.blade.php
index d80dccdf2..a6bfef53c 100644
--- a/resources/views/components/resource-view.blade.php
+++ b/resources/views/components/resource-view.blade.php
@@ -21,7 +21,7 @@
     @isset($documentation)
         <div class="flex-1"></div>
         <div class="flex items-center px-2 " title="Read the documentation.">
-            <a class="p-2 rounded hover:bg-coolgray-200 hover:no-underline group-hover:text-white text-neutral-600"
+            <a class="p-2 rounded hover:bg-coolgray-200 hover:no-underline group-hover:dark:text-white text-neutral-600"
                 onclick="event.stopPropagation()" href="{{ $documentation }}" target="_blank">
                 Docs
             </a>
diff --git a/resources/views/components/server/navbar.blade.php b/resources/views/components/server/navbar.blade.php
index 93fd2f462..5afee652c 100644
--- a/resources/views/components/server/navbar.blade.php
+++ b/resources/views/components/server/navbar.blade.php
@@ -12,38 +12,38 @@
     </div>
     <div class="subtitle">{{ data_get($server, 'name') }}.</div>
     <nav class="navbar-main">
-        <a class="{{ request()->routeIs('server.show') ? 'text-white' : '' }}"
+        <a class="{{ request()->routeIs('server.show') ? 'dark:text-white' : '' }}"
             href="{{ route('server.show', [
                 'server_uuid' => data_get($parameters, 'server_uuid'),
             ]) }}">
             <button>General</button>
         </a>
-        <a class="{{ request()->routeIs('server.private-key') ? 'text-white' : '' }}"
+        <a class="{{ request()->routeIs('server.private-key') ? 'dark:text-white' : '' }}"
             href="{{ route('server.private-key', [
                 'server_uuid' => data_get($parameters, 'server_uuid'),
             ]) }}">
             <button>Private Key</button>
         </a>
-        <a class="{{ request()->routeIs('server.resources') ? 'text-white' : '' }}"
+        <a class="{{ request()->routeIs('server.resources') ? 'dark:text-white' : '' }}"
             href="{{ route('server.resources', [
                 'server_uuid' => data_get($parameters, 'server_uuid'),
             ]) }}">
             <button>Resources</button>
         </a>
         @if (!$server->isSwarmWorker() && !$server->settings->is_build_server)
-            <a class="{{ request()->routeIs('server.proxy') ? 'text-white' : '' }}"
+            <a class="{{ request()->routeIs('server.proxy') ? 'dark:text-white' : '' }}"
                 href="{{ route('server.proxy', [
                     'server_uuid' => data_get($parameters, 'server_uuid'),
                 ]) }}">
                 <button>Proxy</button>
             </a>
-            <a class="{{ request()->routeIs('server.destinations') ? 'text-white' : '' }}"
+            <a class="{{ request()->routeIs('server.destinations') ? 'dark:text-white' : '' }}"
                 href="{{ route('server.destinations', [
                     'server_uuid' => data_get($parameters, 'server_uuid'),
                 ]) }}">
                 <button>Destinations</button>
             </a>
-            <a class="{{ request()->routeIs('server.log-drains') ? 'text-white' : '' }}"
+            <a class="{{ request()->routeIs('server.log-drains') ? 'dark:text-white' : '' }}"
                 href="{{ route('server.log-drains', [
                     'server_uuid' => data_get($parameters, 'server_uuid'),
                 ]) }}">
diff --git a/resources/views/components/server/sidebar.blade.php b/resources/views/components/server/sidebar.blade.php
index ef2b4b8e7..2b06ba7e6 100644
--- a/resources/views/components/server/sidebar.blade.php
+++ b/resources/views/components/server/sidebar.blade.php
@@ -1,17 +1,17 @@
 <div class="flex h-full pr-4">
     <div class="flex flex-col w-48 gap-4 min-w-fit">
-        <a class="{{ request()->routeIs('server.proxy') ? 'text-white' : '' }}"
+        <a class="{{ request()->routeIs('server.proxy') ? 'dark:text-white' : '' }}"
             href="{{ route('server.proxy', $parameters) }}">
             <button>Configuration</button>
         </a>
         @if ($server->proxyType() !== 'NONE')
             {{-- @if ($server->proxyType() === 'TRAEFIK_V2') --}}
-                <a class="{{ request()->routeIs('server.proxy.dynamic-confs') ? 'text-white' : '' }}"
+                <a class="{{ request()->routeIs('server.proxy.dynamic-confs') ? 'dark:text-white' : '' }}"
                     href="{{ route('server.proxy.dynamic-confs', $parameters) }}">
                     <button>Dynamic Configurations</button>
                 </a>
             {{-- @endif --}}
-            <a class="{{ request()->routeIs('server.proxy.logs') ? 'text-white' : '' }}"
+            <a class="{{ request()->routeIs('server.proxy.logs') ? 'dark:text-white' : '' }}"
                 href="{{ route('server.proxy.logs', $parameters) }}">
                 <button>Logs</button>
             </a>
diff --git a/resources/views/components/settings/navbar.blade.php b/resources/views/components/settings/navbar.blade.php
index 93625efd9..fc431d220 100644
--- a/resources/views/components/settings/navbar.blade.php
+++ b/resources/views/components/settings/navbar.blade.php
@@ -2,12 +2,12 @@
     <h1>Settings</h1>
     <div class="subtitle">Instance wide settings for Coolify.</div>
     <nav class="navbar-main">
-        <a class="{{ request()->routeIs('settings.index') ? 'text-white' : '' }}"
+        <a class="{{ request()->routeIs('settings.index') ? 'dark:text-white' : '' }}"
             href="{{ route('settings.index') }}">
             <button>Configuration</button>
         </a>
         @if (isCloud())
-            <a class="{{ request()->routeIs('settings.license') ? 'text-white' : '' }}"
+            <a class="{{ request()->routeIs('settings.license') ? 'dark:text-white' : '' }}"
                 href="{{ route('settings.license') }}">
                 <button>Resale License</button>
             </a>
diff --git a/resources/views/components/team/navbar.blade.php b/resources/views/components/team/navbar.blade.php
index 67de96544..9c857478e 100644
--- a/resources/views/components/team/navbar.blade.php
+++ b/resources/views/components/team/navbar.blade.php
@@ -7,18 +7,18 @@
     </div>
     <div class="subtitle">Team settings & shared environment variables.</div>
     <nav class="navbar-main">
-        <a class="{{ request()->routeIs('team.index') ? 'text-white' : '' }}" href="{{ route('team.index') }}">
+        <a class="{{ request()->routeIs('team.index') ? 'dark:text-white' : '' }}" href="{{ route('team.index') }}">
             <button>General</button>
         </a>
-        <a class="{{ request()->routeIs('team.member.index') ? 'text-white' : '' }}"
+        <a class="{{ request()->routeIs('team.member.index') ? 'dark:text-white' : '' }}"
             href="{{ route('team.member.index') }}">
             <button>Members</button>
         </a>
-        <a class="{{ request()->routeIs('team.storage.index') ? 'text-white' : '' }}"
+        <a class="{{ request()->routeIs('team.storage.index') ? 'dark:text-white' : '' }}"
             href="{{ route('team.storage.index') }}">
             <button>S3 Storages</button>
         </a>
-        <a class="{{ request()->routeIs('team.shared-variables.index') ? 'text-white' : '' }}"
+        <a class="{{ request()->routeIs('team.shared-variables.index') ? 'dark:text-white' : '' }}"
             href="{{ route('team.shared-variables.index') }}">
             <button>Shared Variables</button>
         </a>
diff --git a/resources/views/components/toast.blade.php b/resources/views/components/toast.blade.php
index 297737875..e70bbfbc2 100644
--- a/resources/views/components/toast.blade.php
+++ b/resources/views/components/toast.blade.php
@@ -386,7 +386,7 @@
                     class="absolute w-full duration-100 ease-out sm:max-w-xs "
                     :class="{ 'toast-no-description': !toast.description }">
                     <span
-                        class="relative flex flex-col items-start shadow-[0_5px_15px_-3px_rgb(0_0_0_/_0.08)] w-full transition-all duration-100 ease-out dark:bg-coolgray-100 bg-neutral-100 dark:border dark:border-coolgray-200 rounded sm:max-w-xs group"
+                        class="relative flex flex-col items-start shadow-[0_5px_15px_-3px_rgb(0_0_0_/_0.08)] w-full transition-all duration-100 ease-out dark:bg-coolgray-100 bg-white dark:border dark:border-coolgray-200 rounded sm:max-w-xs group"
                         :class="{ 'p-4': !toast.html, 'p-0': toast.html }">
                         <template x-if="!toast.html">
                             <div class="relative w-full">
diff --git a/resources/views/destination/all.blade.php b/resources/views/destination/all.blade.php
index 3d3c34761..91ab2032e 100644
--- a/resources/views/destination/all.blade.php
+++ b/resources/views/destination/all.blade.php
@@ -11,7 +11,7 @@
             @if ($destination->getMorphClass() === 'App\Models\StandaloneDocker')
                 <a class="flex gap-4 text-center hover:no-underline box group"
                     href="{{ route('destination.show', ['destination_uuid' => data_get($destination, 'uuid')]) }}">
-                    <div class="group-hover:text-white">
+                    <div class="group-hover:dark:text-white">
                         <div>{{ $destination->name }}</div>
                     </div>
                 </a>
@@ -20,7 +20,7 @@
                 <a class="flex gap-4 text-center hover:no-underline box group"
                     href="{{ route('destination.show', ['destination_uuid' => data_get($destination, 'uuid')]) }}">
 
-                    <div class="group-hover:text-white">
+                    <div class="group-hover:dark:text-white">
                         <div>{{ $destination->name }}</div>
                     </div>
                 </a>
diff --git a/resources/views/errors/401.blade.php b/resources/views/errors/401.blade.php
index 9db36a494..c0cfa1148 100644
--- a/resources/views/errors/401.blade.php
+++ b/resources/views/errors/401.blade.php
@@ -3,7 +3,7 @@
     <div class="text-center hero-content">
         <div class="">
             <p class="font-mono text-6xl font-semibold text-warning">401</p>
-            <h1 class="mt-4 font-bold tracking-tight text-white">You shall not pass!</h1>
+            <h1 class="mt-4 font-bold tracking-tight dark:text-white">You shall not pass!</h1>
             <p class="mt-6 text-base leading-7 text-neutral-300">You don't have permission to access this page.
             </p>
             <div class="flex items-center justify-center mt-10 gap-x-6">
diff --git a/resources/views/errors/403.blade.php b/resources/views/errors/403.blade.php
index 434d30ada..2b19498c0 100644
--- a/resources/views/errors/403.blade.php
+++ b/resources/views/errors/403.blade.php
@@ -3,7 +3,7 @@
     <div class="text-center hero-content">
         <div class="">
             <p class="font-mono text-6xl font-semibold text-warning">403</p>
-            <h1 class="mt-4 font-bold tracking-tight text-white">You shall not pass!</h1>
+            <h1 class="mt-4 font-bold tracking-tight dark:text-white">You shall not pass!</h1>
             <p class="mt-6 text-base leading-7 text-neutral-300">You don't have permission to access this page.
             </p>
             <div class="flex items-center justify-center mt-10 gap-x-6">
diff --git a/resources/views/errors/404.blade.php b/resources/views/errors/404.blade.php
index 473b2194e..233e11736 100644
--- a/resources/views/errors/404.blade.php
+++ b/resources/views/errors/404.blade.php
@@ -3,7 +3,7 @@
     <div class="text-center hero-content">
         <div class="">
             <p class="font-mono text-6xl font-semibold text-warning">404</p>
-            <h1 class="mt-4 font-bold tracking-tight text-white">How did you got here?</h1>
+            <h1 class="mt-4 font-bold tracking-tight dark:text-white">How did you got here?</h1>
             <p class="mt-6 text-base leading-7 text-neutral-300">Sorry, we couldn’t find the page you’re looking
                 for.
             </p>
diff --git a/resources/views/errors/419.blade.php b/resources/views/errors/419.blade.php
index 31fda0824..fa4b7d5c1 100644
--- a/resources/views/errors/419.blade.php
+++ b/resources/views/errors/419.blade.php
@@ -3,7 +3,7 @@
     <div class="text-center hero-content">
         <div class="">
             <p class="font-mono text-6xl font-semibold text-warning">419</p>
-            <h1 class="mt-4 font-bold tracking-tight text-white">This page is definitely old, not like you!</h1>
+            <h1 class="mt-4 font-bold tracking-tight dark:text-white">This page is definitely old, not like you!</h1>
             <p class="mt-6 text-base leading-7 text-neutral-300">Sorry, we couldn’t find the page you’re looking
                 for.
             </p>
@@ -11,7 +11,7 @@
                 <a href="/">
                     <x-forms.button>Go back home</x-forms.button>
                 </a>
-                <a href="{{ config('coolify.contact') }}" class="font-semibold text-white ">Contact
+                <a href="{{ config('coolify.contact') }}" class="font-semibold dark:text-white ">Contact
                     support
                     <span aria-hidden="true">&rarr;</span></a>
             </div>
diff --git a/resources/views/errors/429.blade.php b/resources/views/errors/429.blade.php
index f8ffeb85a..d2cfa39f1 100644
--- a/resources/views/errors/429.blade.php
+++ b/resources/views/errors/429.blade.php
@@ -3,7 +3,7 @@
     <div class="text-center hero-content">
         <div class="">
             <p class="font-mono text-6xl font-semibold text-warning">429</p>
-            <h1 class="mt-4 font-bold tracking-tight text-white">Woah, slow down there!</h1>
+            <h1 class="mt-4 font-bold tracking-tight dark:text-white">Woah, slow down there!</h1>
             <p class="mt-6 text-base leading-7 text-neutral-300">You're making too many requests. Please wait a few
                 seconds before trying again.
             </p>
@@ -11,7 +11,7 @@
                 <a href="/">
                     <x-forms.button>Go back home</x-forms.button>
                 </a>
-                <a href="{{ config('coolify.contact') }}" class="font-semibold text-white ">Contact
+                <a href="{{ config('coolify.contact') }}" class="font-semibold dark:text-white ">Contact
                     support
                     <span aria-hidden="true">&rarr;</span></a>
             </div>
diff --git a/resources/views/errors/500.blade.php b/resources/views/errors/500.blade.php
index 828e910f6..a9e41f184 100644
--- a/resources/views/errors/500.blade.php
+++ b/resources/views/errors/500.blade.php
@@ -3,7 +3,7 @@
     <div class="text-center hero-content">
         <div>
             <p class="font-mono text-6xl font-semibold text-warning">500</p>
-            <h1 class="mt-4 font-bold tracking-tight text-white">Something is not okay, are you okay?</h1>
+            <h1 class="mt-4 font-bold tracking-tight dark:text-white">Something is not okay, are you okay?</h1>
             <p class="mt-6 text-base leading-7 text-neutral-300">There has been an error, we are working on it.
             </p>
             @if ($exception->getMessage() !== '')
@@ -14,7 +14,7 @@
                 <a href="/">
                     <x-forms.button>Go back home</x-forms.button>
                 </a>
-                <a href="{{ config('coolify.contact') }}" class="font-semibold text-white">Contact
+                <a href="{{ config('coolify.contact') }}" class="font-semibold dark:text-white">Contact
                     support
                     <span aria-hidden="true">&rarr;</span></a>
             </div>
diff --git a/resources/views/errors/503.blade.php b/resources/views/errors/503.blade.php
index 906d610b4..b3712d484 100644
--- a/resources/views/errors/503.blade.php
+++ b/resources/views/errors/503.blade.php
@@ -3,12 +3,12 @@
     <div class="text-center hero-content">
         <div>
             <p class="font-mono text-6xl font-semibold text-warning">503</p>
-            <h1 class="mt-4 font-bold tracking-tight text-white">We are working on serious things.</h1>
+            <h1 class="mt-4 font-bold tracking-tight dark:text-white">We are working on serious things.</h1>
             <p class="mt-6 text-base leading-7 text-neutral-300">Service Unavailable. Be right back. Thanks for your
                 patience.
             </p>
             <div class="flex items-center justify-center mt-10 gap-x-6">
-                <a href="{{ config('coolify.contact') }}" class="font-semibold text-white ">Contact
+                <a href="{{ config('coolify.contact') }}" class="font-semibold dark:text-white ">Contact
                     support
                     <span aria-hidden="true">&rarr;</span></a>
             </div>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 0f120674b..450aa40c2 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -16,7 +16,7 @@
                         <div class="absolute top-0 flex justify-center w-16 pt-5 left-full">
                             <button type="button" class="-m-2.5 p-2.5" x-on:click="open = !open">
                                 <span class="sr-only">Close sidebar</span>
-                                <svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                <svg class="w-6 h-6 dark:text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                     stroke="currentColor" aria-hidden="true">
                                     <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                                 </svg>
@@ -53,11 +53,9 @@
                 </a> --}}
             </div>
 
-            <main class="lg:pl-48">
-                <div>
-                    <div class="p-4 sm:px-6 lg:px-8 lg:py-6">
-                        {{ $slot }}
-                    </div>
+            <main class="lg:pl-48" >
+                <div class="p-4 sm:px-6 lg:px-8 lg:py-6">
+                    {{ $slot }}
                 </div>
             </main>
         </div>
diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php
index 820511e25..cd4e6e258 100644
--- a/resources/views/layouts/base.blade.php
+++ b/resources/views/layouts/base.blade.php
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-theme="coolify" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<html data-theme="dark" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 
 <head>
     <meta charset="utf-8">
diff --git a/resources/views/livewire/activity-monitor.blade.php b/resources/views/livewire/activity-monitor.blade.php
index 867e8f486..8600bc4fc 100644
--- a/resources/views/livewire/activity-monitor.blade.php
+++ b/resources/views/livewire/activity-monitor.blade.php
@@ -10,7 +10,7 @@
             </div>
         @endif
         <div
-            class="flex flex-col-reverse w-full px-4 py-2 overflow-y-auto text-white border border-solid rounded bg-coolgray-100 scrollbar border-coolgray-300 max-h-96">
+            class="flex flex-col-reverse w-full px-4 py-2 overflow-y-auto dark:text-white border border-solid rounded bg-coolgray-100 scrollbar border-coolgray-300 max-h-96">
             <pre class="font-mono whitespace-pre-wrap" @if ($isPollingActive) wire:poll.1000ms="polling" @endif>{{ RunRemoteProcess::decodeOutput($this->activity) }}</pre>
         </div>
     @else
diff --git a/resources/views/livewire/admin/index.blade.php b/resources/views/livewire/admin/index.blade.php
index 7cc76f4a8..5964097c6 100644
--- a/resources/views/livewire/admin/index.blade.php
+++ b/resources/views/livewire/admin/index.blade.php
@@ -4,7 +4,7 @@
     {{ auth()->user()->name }}
     <h3 class="pt-4">Users</h3>
     <div class="flex flex-wrap gap-2">
-        <div class="text-white cursor-pointer w-96 box-without-bg bg-coollabs-100" wire:click="switchUser('0')">
+        <div class="dark:text-white cursor-pointer w-96 box-without-bg bg-coollabs-100" wire:click="switchUser('0')">
             Root
         </div>
         @foreach ($users as $user)
diff --git a/resources/views/livewire/boarding/index.blade.php b/resources/views/livewire/boarding/index.blade.php
index cca0c0344..5e5df0bad 100644
--- a/resources/views/livewire/boarding/index.blade.php
+++ b/resources/views/livewire/boarding/index.blade.php
@@ -19,7 +19,7 @@
                         integrations, deploy databases and services, monitor these resources with notifications and
                         alerts
                         without vendor lock-in
-                        and <a href="https://coolify.io" class="text-white hover:underline">much much more</a>.
+                        and <a href="https://coolify.io" class="dark:text-white hover:underline">much much more</a>.
                         <br><br>
                         <span class="text-xl">
                             <x-highlighted text="Self-hosting with superpowers!" /></span>
@@ -332,7 +332,7 @@
             <a wire:click='restartBoarding' class="cursor-pointer">Restart boarding process</a>
             <x-modal-input title="How can we help?">
                 <x-slot:content>
-                    <div class="cursor-pointer dark:hover:text-white" title="Send us feedback or get help!">
+                    <div class="cursor-pointer dark:hover:dark:text-white" title="Send us feedback or get help!">
                         Feedback
                     </div>
                 </x-slot:content>
diff --git a/resources/views/livewire/dashboard.blade.php b/resources/views/livewire/dashboard.blade.php
index 70912a37c..8c0e35a7b 100644
--- a/resources/views/livewire/dashboard.blade.php
+++ b/resources/views/livewire/dashboard.blade.php
@@ -35,22 +35,15 @@
                                 {{ $project->description }}</div>
                         </a>
                     @endif
-                    <div class="flex items-center group">
-                        <a class="mx-4 rounded hover:no-underline"
+                    <div class="flex items-center gap-2 mr-4">
+                        <a class="hover:underline"
                             href="{{ route('project.resource.create', ['project_uuid' => data_get($project, 'uuid'), 'environment_name' => data_get($project, 'environments.0.name', 'production')]) }}">
-                            <span class="p-2 font-bold on-box">+
+                            <span class="p-2 font-bold">+
                                 Add Resource</span>
                         </a>
-                        <a class="mx-4"
+                        <a class="font-bold hover:underline"
                             href="{{ route('project.edit', ['project_uuid' => data_get($project, 'uuid')]) }}">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="icon on-box" viewBox="0 0 24 24"
-                                stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
-                                stroke-linejoin="round">
-                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                                <path
-                                    d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
-                                <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
-                            </svg>
+                           Settings
                         </a>
                     </div>
                 </div>
@@ -114,9 +107,9 @@
                 </div>
             </div>
         @else
-            <div class="flex gap-1">
-                <span class='font-bold text-warning'>No servers found.</span>
-                <x-modal-input buttonTitle="Add"
+            <div class="flex flex-col gap-1">
+                <div class='font-bold dark:text-warning'>No servers found.</div>
+                <div class="flex items-center gap-1"><x-modal-input buttonTitle="Add"
                     title="New Server">
                     <livewire:server.create />
                 </x-modal-input> your first server
@@ -124,6 +117,7 @@
                 go to the <a class="underline dark:text-white" href="{{ route('onboarding') }}">onboarding</a>
                 page.
             </div>
+            </div>
         @endif
     @endif
     @if ($servers->count() > 0 && $projects->count() > 0)
@@ -134,7 +128,7 @@
             @endif
             <x-forms.button wire:click='cleanup_queue'>Cleanup Queues</x-forms.button>
         </div>
-        <div wire:poll.1000ms="get_deployments" class="grid grid-cols-1">
+        <div wire:poll.3000ms="get_deployments" class="grid grid-cols-1">
             @forelse ($deployments_per_server as $server_name => $deployments)
                 <h4 class="py-4">{{ $server_name }}</h4>
                 <div class="grid grid-cols-1 gap-2 lg:grid-cols-3">
diff --git a/resources/views/livewire/destination/show.blade.php b/resources/views/livewire/destination/show.blade.php
index ff537402a..a73c8aceb 100644
--- a/resources/views/livewire/destination/show.blade.php
+++ b/resources/views/livewire/destination/show.blade.php
@@ -18,13 +18,13 @@
             Available for using:
             @forelse ($server->standaloneDockers as $docker)
                 <a href="{{ route('destination.show', ['destination_uuid' => data_get($docker, 'uuid')]) }}">
-                    <button class="text-white btn-link">{{ data_get($docker, 'network') }} </button>
+                    <button class="dark:text-white btn-link">{{ data_get($docker, 'network') }} </button>
                 </a>
             @empty
             @endforelse
             @forelse ($server->swarmDockers as $docker)
                 <a href="{{ route('destination.show', ['destination_uuid' => data_get($docker, 'uuid')]) }}">
-                    <button class="text-white btn-link">{{ data_get($docker, 'network') }} </button>
+                    <button class="dark:text-white btn-link">{{ data_get($docker, 'network') }} </button>
                 </a>
             @empty
             @endforelse
diff --git a/resources/views/livewire/force-password-reset.blade.php b/resources/views/livewire/force-password-reset.blade.php
index d77651675..e94e26ca7 100644
--- a/resources/views/livewire/force-password-reset.blade.php
+++ b/resources/views/livewire/force-password-reset.blade.php
@@ -2,10 +2,10 @@
     <div class="w-96 min-w-fit">
         <div class="flex flex-col items-center">
             <a href="{{ route('dashboard') }}">
-                <div class="text-5xl font-bold tracking-tight text-center text-white">Coolify</div>
+                <div class="text-5xl font-bold tracking-tight text-center dark:text-white">Coolify</div>
             </a>
         </div>
-        
+
         <form class="flex flex-col gap-2" wire:submit='submit'>
             <x-forms.input id="email" type="email" placeholder="Email" readonly label="Email" />
             <x-forms.input id="password" type="password" placeholder="New Password" label="New Password" required />
diff --git a/resources/views/livewire/layout-popups.blade.php b/resources/views/livewire/layout-popups.blade.php
index d710b4407..fb95bca9e 100644
--- a/resources/views/livewire/layout-popups.blade.php
+++ b/resources/views/livewire/layout-popups.blade.php
@@ -20,8 +20,8 @@
             <x-slot:description>
                 <span>Please
                     consider donating on <a href="https://github.com/sponsors/coollabsio"
-                        class="text-xs text-white underline">GitHub</a> or <a href="https://opencollective.com/coollabsio"
-                        class="text-xs text-white underline">OpenCollective</a>.<br><br></span>
+                        class="text-xs dark:text-white underline">GitHub</a> or <a href="https://opencollective.com/coollabsio"
+                        class="text-xs dark:text-white underline">OpenCollective</a>.<br><br></span>
                 <span>It enables us to keep creating features without paywalls, ensuring our work remains free and
                     open.</span>
             </x-slot:description>
@@ -35,7 +35,7 @@
             <div><span class="font-bold text-red-500">WARNING:</span> The number of active servers exceeds the limit
                 covered by your payment. If not resolved, some of your servers <span class="font-bold text-red-500">will
                     be deactivated</span>. Visit <a href="{{ route('subscription.show') }}"
-                    class="text-white underline">/subscription</a> to update your subscription or remove some servers.
+                    class="dark:text-white underline">/subscription</a> to update your subscription or remove some servers.
             </div>
         </x-banner>
     @endif
@@ -57,7 +57,7 @@
                     highly recommended to enable at least
                     one
                     notification channel to receive important alerts.<br>Visit <a
-                        href="{{ route('notifications.email') }}" class="text-white underline">/notification</a> to
+                        href="{{ route('notifications.email') }}" class="dark:text-white underline">/notification</a> to
                     enable notifications.</span>
         </x-slot:description>
         <x-slot:button-text @click="disableNotification()">
diff --git a/resources/views/livewire/new-activity-monitor.blade.php b/resources/views/livewire/new-activity-monitor.blade.php
index bce21c0a1..e31477103 100644
--- a/resources/views/livewire/new-activity-monitor.blade.php
+++ b/resources/views/livewire/new-activity-monitor.blade.php
@@ -10,7 +10,7 @@
             </div>
         @endif
         <div
-            class="scrollbar flex flex-col-reverse w-full overflow-y-auto border border-solid rounded border-coolgray-300 max-h-[32rem] p-4 pt-6 text-xs text-white">
+            class="scrollbar flex flex-col-reverse w-full overflow-y-auto border border-solid rounded border-coolgray-300 max-h-[32rem] p-4 pt-6 text-xs dark:text-white">
 
             <pre class="font-mono whitespace-pre-wrap" @if ($isPollingActive) wire:poll.1000ms="polling" @endif>{{ RunRemoteProcess::decodeOutput($this->activity) }}</pre>
         </div>
diff --git a/resources/views/livewire/notifications/discord.blade.php b/resources/views/livewire/notifications/discord.blade.php
index 03cd0bb54..95fc9aae9 100644
--- a/resources/views/livewire/notifications/discord.blade.php
+++ b/resources/views/livewire/notifications/discord.blade.php
@@ -7,7 +7,7 @@
                 Save
             </x-forms.button>
             @if ($team->discord_enabled)
-                <x-forms.button class="text-white normal-case btn btn-xs no-animation btn-primary"
+                <x-forms.button class="dark:text-white normal-case btn btn-xs no-animation btn-primary"
                     wire:click="sendTestNotification">
                     Send Test Notifications
                 </x-forms.button>
diff --git a/resources/views/livewire/notifications/telegram.blade.php b/resources/views/livewire/notifications/telegram.blade.php
index 7c8f420fa..4925b9f75 100644
--- a/resources/views/livewire/notifications/telegram.blade.php
+++ b/resources/views/livewire/notifications/telegram.blade.php
@@ -7,7 +7,7 @@
                 Save
             </x-forms.button>
             @if ($team->telegram_enabled)
-                <x-forms.button class="text-white normal-case btn btn-xs no-animation btn-primary"
+                <x-forms.button class="dark:text-white normal-case btn btn-xs no-animation btn-primary"
                     wire:click="sendTestNotification">
                     Send Test Notifications
                 </x-forms.button>
@@ -18,7 +18,7 @@
         </div>
         <div class="flex gap-2">
             <x-forms.input type="password"
-                helper="Get it from the <a class='inline-block text-white underline' href='https://t.me/botfather' target='_blank'>BotFather Bot</a> on Telegram."
+                helper="Get it from the <a class='inline-block dark:text-white underline' href='https://t.me/botfather' target='_blank'>BotFather Bot</a> on Telegram."
                 required id="team.telegram_token" label="Token" />
             <x-forms.input helper="Recommended to add your bot to a group chat and add its Chat ID here." required
                 id="team.telegram_chat_id" label="Chat ID" />
diff --git a/resources/views/livewire/profile/index.blade.php b/resources/views/livewire/profile/index.blade.php
index b179f0499..404268eb0 100644
--- a/resources/views/livewire/profile/index.blade.php
+++ b/resources/views/livewire/profile/index.blade.php
@@ -53,7 +53,7 @@
             <div class="pb-6 ">Here are the recovery codes for your account. Please store them in a secure
                 location.
             </div>
-            <div class="text-white">
+            <div class="dark:text-white">
                 @foreach (request()->user()->recoveryCodes() as $code)
                     <div>{{ $code }}</div>
                 @endforeach
@@ -79,7 +79,7 @@
                         secure
                         location.
                     </div>
-                    <div class="text-white">
+                    <div class="dark:text-white">
                         @foreach (request()->user()->recoveryCodes() as $code)
                             <div>{{ $code }}</div>
                         @endforeach
diff --git a/resources/views/livewire/project/application/advanced.blade.php b/resources/views/livewire/project/application/advanced.blade.php
index 0ba49606d..be8afe8f8 100644
--- a/resources/views/livewire/project/application/advanced.blade.php
+++ b/resources/views/livewire/project/application/advanced.blade.php
@@ -49,7 +49,7 @@
             @if ($application->build_pack !== 'dockercompose')
                 <div class="w-96">
                     <x-forms.checkbox
-                        helper="Enable GPU usage for this application. More info <a href='https://docs.docker.com/compose/gpu-support/' class='text-white underline' target='_blank'>here</a>."
+                        helper="Enable GPU usage for this application. More info <a href='https://docs.docker.com/compose/gpu-support/' class='dark:text-white underline' target='_blank'>here</a>."
                         instantSave id="application.settings.is_gpu_enabled" label="Attach GPU" />
                     @if ($application->settings->is_gpu_enabled)
                         <h5>GPU Settings</h5>
@@ -64,7 +64,7 @@
                     <x-forms.input label="GPU Count" placeholder="empty means use all GPUs"
                         id="application.settings.gpu_count"> </x-forms.input>
                     <x-forms.input label="GPU Device Ids" placeholder="0,2"
-                        helper="Comma separated list of device ids. More info <a href='https://docs.docker.com/compose/gpu-support/#access-specific-devices' class='text-white underline' target='_blank'>here</a>."
+                        helper="Comma separated list of device ids. More info <a href='https://docs.docker.com/compose/gpu-support/#access-specific-devices' class='dark:text-white underline' target='_blank'>here</a>."
                         id="application.settings.gpu_device_ids"> </x-forms.input>
 
                 </div>
diff --git a/resources/views/livewire/project/application/configuration.blade.php b/resources/views/livewire/project/application/configuration.blade.php
index 54644c5fa..6a3c14174 100644
--- a/resources/views/livewire/project/application/configuration.blade.php
+++ b/resources/views/livewire/project/application/configuration.blade.php
@@ -2,32 +2,32 @@
     <h1>Configuration</h1>
     <livewire:project.application.heading :application="$application" />
     <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-6">
-        <div class="flex flex-col gap-4 xl:w-48">
-            <a :class="activeTab === 'general' && 'dark:text-white text-black'"
+        <div class="flex flex-col gap-2 xl:w-48">
+            <a class="menu-item" :class="activeTab === 'general' && 'menu-item-active'"
                 @click.prevent="activeTab = 'general'; window.location.hash = 'general'" href="#">General</a>
             @if ($application->destination->server->isSwarm())
-                <a :class="activeTab === 'swarm' && 'dark:text-white text-black'"
+                <a class="menu-item" :class="activeTab === 'swarm' && 'menu-item-active'"
                     @click.prevent="activeTab = 'swarm'; window.location.hash = 'swarm'" href="#">Swarm
                     Configuration</a>
             @endif
-            <a :class="activeTab === 'advanced' && 'dark:text-white text-black'"
+            <a class="menu-item" :class="activeTab === 'advanced' && 'menu-item-active'"
                 @click.prevent="activeTab = 'advanced'; window.location.hash = 'advanced'" href="#">Advanced</a>
             @if ($application->build_pack !== 'static')
-                <a :class="activeTab === 'environment-variables' && 'dark:text-white text-black'"
+                <a class="menu-item" :class="activeTab === 'environment-variables' && 'menu-item-active'"
                     @click.prevent="activeTab = 'environment-variables'; window.location.hash = 'environment-variables'"
                     href="#">Environment
                     Variables</a>
             @endif
             @if ($application->build_pack !== 'static' && $application->build_pack !== 'dockercompose')
-                <a :class="activeTab === 'storages' && 'dark:text-white text-black'"
+                <a class="menu-item" :class="activeTab === 'storages' && 'menu-item-active'"
                     @click.prevent="activeTab = 'storages'; window.location.hash = 'storages'" href="#">Storages
                 </a>
             @endif
             @if ($application->git_based())
-                <a :class="activeTab === 'source' && 'dark:text-white text-black'"
+                <a class="menu-item" :class="activeTab === 'source' && 'menu-item-active'"
                     @click.prevent="activeTab = 'source'; window.location.hash = 'source'" href="#">Source</a>
             @endif
-            <a :class="activeTab === 'servers' && 'dark:text-white text-black'" class="flex items-center gap-2"
+            <a  class="menu-item" :class="activeTab === 'servers' && 'menu-item-active'" class="flex items-center gap-2"
                 @click.prevent="activeTab = 'servers'; window.location.hash = 'servers'" href="#">Servers
                 @if (str($application->status)->contains('degraded'))
                     <span title="Some servers are unavailable">
@@ -38,42 +38,42 @@
                     </span>
                 @endif
             </a>
-            <a :class="activeTab === 'scheduled-tasks' && 'dark:text-white text-black'"
+            <a class="menu-item" :class="activeTab === 'scheduled-tasks' && 'menu-item-active'"
                 @click.prevent="activeTab = 'scheduled-tasks'; window.location.hash = 'scheduled-tasks'"
                 href="#">Scheduled Tasks
             </a>
 
-            <a :class="activeTab === 'webhooks' && 'dark:text-white text-black'"
+            <a class="menu-item" :class="activeTab === 'webhooks' && 'menu-item-active'"
                 @click.prevent="activeTab = 'webhooks'; window.location.hash = 'webhooks'" href="#">Webhooks
             </a>
             @if ($application->git_based())
-                <a :class="activeTab === 'previews' && 'dark:text-white text-black'"
+                <a class="menu-item" :class="activeTab === 'previews' && 'menu-item-active'"
                     @click.prevent="activeTab = 'previews'; window.location.hash = 'previews'" href="#">Preview
                     Deployments
                 </a>
             @endif
             @if ($application->build_pack !== 'static' && $application->build_pack !== 'dockercompose')
-                <a :class="activeTab === 'health' && 'dark:text-white text-black'"
+                <a class="menu-item" :class="activeTab === 'health' && 'menu-item-active'"
                     @click.prevent="activeTab = 'health'; window.location.hash = 'health'" href="#">Healthchecks
                 </a>
             @endif
-            <a :class="activeTab === 'rollback' && 'dark:text-white text-black'"
+            <a class="menu-item" :class="activeTab === 'rollback' && 'menu-item-active'"
                 @click.prevent="activeTab = 'rollback'; window.location.hash = 'rollback'" href="#">Rollback
             </a>
             @if ($application->build_pack !== 'dockercompose')
-                <a :class="activeTab === 'resource-limits' && 'dark:text-white text-black'"
+                <a class="menu-item" :class="activeTab === 'resource-limits' && 'menu-item-active'"
                     @click.prevent="activeTab = 'resource-limits'; window.location.hash = 'resource-limits'"
                     href="#">Resource Limits
                 </a>
             @endif
-            <a :class="activeTab === 'resource-operations' && 'dark:text-white text-black'"
+            <a class="menu-item" :class="activeTab === 'resource-operations' && 'menu-item-active'"
                 @click.prevent="activeTab = 'resource-operations'; window.location.hash = 'resource-operations'"
                 href="#">Resource Operations
             </a>
-            <a :class="activeTab === 'tags' && 'dark:text-white text-black'"
+            <a class="menu-item" :class="activeTab === 'tags' && 'menu-item-active'"
                 @click.prevent="activeTab = 'tags'; window.location.hash = 'tags'" href="#">Tags
             </a>
-            <a :class="activeTab === 'danger' && 'dark:text-white text-black'"
+            <a class="menu-item" :class="activeTab === 'danger' && 'menu-item-active'"
                 @click.prevent="activeTab = 'danger'; window.location.hash = 'danger'" href="#">Danger Zone
             </a>
         </div>
diff --git a/resources/views/livewire/project/application/deployment/show.blade.php b/resources/views/livewire/project/application/deployment/show.blade.php
index 6eabd859c..f61fc764e 100644
--- a/resources/views/livewire/project/application/deployment/show.blade.php
+++ b/resources/views/livewire/project/application/deployment/show.blade.php
@@ -17,7 +17,7 @@
         @endif
         <div id="screen" :class="fullscreen ? 'fullscreen' : ''">
             <div @if ($isKeepAliveOn) wire:poll.2000ms="polling" @endif
-                class="relative flex flex-col-reverse w-full p-2 px-4 mt-4 overflow-y-auto text-white bg-coolgray-100 scrollbar border-coolgray-300"
+                class="relative flex flex-col-reverse w-full p-2 px-4 mt-4 overflow-y-auto dark:text-white bg-coolgray-100 scrollbar border-coolgray-300"
                 :class="fullscreen ? '' : 'max-h-[40rem] border border-dotted rounded'">
                 <button title="Minimize" x-show="fullscreen" class="fixed top-4 right-4"
                     x-on:click="makeFullscreen"><svg class="icon" viewBox="0 0 24 24"
diff --git a/resources/views/livewire/project/application/general.blade.php b/resources/views/livewire/project/application/general.blade.php
index 8deccc889..9049e731b 100644
--- a/resources/views/livewire/project/application/general.blade.php
+++ b/resources/views/livewire/project/application/general.blade.php
@@ -206,13 +206,13 @@
                         know what are
                         you doing.</div>
                     <x-forms.input
-                        helper="You can add custom docker run options that will be used when your container is started.<br>Note: Not all options are supported, as they could mess up Coolify's automation and could cause bad experience for users.<br><br>Check the <a class='text-white underline' href='https://coolify.io/docs/custom-docker-options'>docs.</a>"
+                        helper="You can add custom docker run options that will be used when your container is started.<br>Note: Not all options are supported, as they could mess up Coolify's automation and could cause bad experience for users.<br><br>Check the <a class='dark:text-white underline' href='https://coolify.io/docs/custom-docker-options'>docs.</a>"
                         placeholder="--cap-add SYS_ADMIN --device=/dev/fuse --security-opt apparmor:unconfined --ulimit nofile=1024:1024 --tmpfs /run:rw,noexec,nosuid,size=65536k"
                         id="application.custom_docker_run_options" label="Custom Docker Options" />
                 @endif
             @else
                 <x-forms.input
-                    helper="You can add custom docker run options that will be used when your container is started.<br>Note: Not all options are supported, as they could mess up Coolify's automation and could cause bad experience for users.<br><br>Check the <a class='text-white underline' href='https://coolify.io/docs/custom-docker-options'>docs.</a>"
+                    helper="You can add custom docker run options that will be used when your container is started.<br>Note: Not all options are supported, as they could mess up Coolify's automation and could cause bad experience for users.<br><br>Check the <a class='dark:text-white underline' href='https://coolify.io/docs/custom-docker-options'>docs.</a>"
                     placeholder="--cap-add SYS_ADMIN --device=/dev/fuse --security-opt apparmor:unconfined --ulimit nofile=1024:1024 --tmpfs /run:rw,noexec,nosuid,size=65536k"
                     id="application.custom_docker_run_options" label="Custom Docker Options" />
             @endif
diff --git a/resources/views/livewire/project/application/heading.blade.php b/resources/views/livewire/project/application/heading.blade.php
index 7d1987c33..2b9506cb6 100644
--- a/resources/views/livewire/project/application/heading.blade.php
+++ b/resources/views/livewire/project/application/heading.blade.php
@@ -1,24 +1,20 @@
 <nav wire:poll.5000ms="check_status">
     <x-resources.breadcrumbs :resource="$application" :parameters="$parameters" />
     <div class="navbar-main">
-        <a class="{{ request()->routeIs('project.application.configuration') ? 'text-white' : '' }}"
-            href="{{ route('project.application.configuration', $parameters) }}">
-            <button>Configuration</button>
+        <a href="{{ route('project.application.configuration', $parameters) }}">
+            Configuration
         </a>
-        <a class="{{ request()->routeIs('project.application.deployment.index') ? 'text-white' : '' }}"
-            href="{{ route('project.application.deployment.index', $parameters) }}">
+        <a href="{{ route('project.application.deployment.index', $parameters) }}">
             <button>Deployments</button>
         </a>
-        <a class="{{ request()->routeIs('project.application.logs') ? 'text-white' : '' }}"
-            href="{{ route('project.application.logs', $parameters) }}">
+        <a href="{{ route('project.application.logs', $parameters) }}">
             <button>Logs</button>
         </a>
         @if (!$application->destination->server->isSwarm())
-        <a class="{{ request()->routeIs('project.application.command') ? 'text-white' : '' }}"
-            href="{{ route('project.application.command', $parameters) }}">
-            <button>Command</button>
-        </a>
-    @endif
+            <a href="{{ route('project.application.command', $parameters) }}">
+                <button>Command</button>
+            </a>
+        @endif
         <x-applications.links :application="$application" />
         <div class="flex-1"></div>
         @if ($application->build_pack === 'dockercompose' && is_null($application->docker_compose_raw))
@@ -27,86 +23,75 @@
             @if (!$application->destination->server->isSwarm())
                 <x-applications.advanced :application="$application" />
             @endif
-            @if (!str($application->status)->startsWith('exited'))
-                @if (!$application->destination->server->isSwarm())
-                    <button title="With rolling update if possible" wire:click='deploy'
-                        class="flex items-center gap-2 cursor-pointer hover:text-white text-neutral-400">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-orange-400" viewBox="0 0 24 24"
+            <div class="flex gap-2">
+                @if (!str($application->status)->startsWith('exited'))
+                    @if (!$application->destination->server->isSwarm())
+                        <x-forms.button title="With rolling update if possible" wire:click='deploy'>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-orange-400"
+                                viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
+                                stroke-linecap="round" stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                <path
+                                    d="M10.09 4.01l.496 -.495a2 2 0 0 1 2.828 0l7.071 7.07a2 2 0 0 1 0 2.83l-7.07 7.07a2 2 0 0 1 -2.83 0l-7.07 -7.07a2 2 0 0 1 0 -2.83l3.535 -3.535h-3.988">
+                                </path>
+                                <path d="M7.05 11.038v-3.988"></path>
+                            </svg>
+                            Redeploy
+                        </x-forms.button>
+                    @endif
+                    @if ($application->build_pack !== 'dockercompose')
+                        @if ($application->destination->server->isSwarm())
+                            <x-forms.button title="Redeploy Swarm Service (rolling update)" wire:click='deploy'>
+                                <svg class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24"
+                                    xmlns="http://www.w3.org/2000/svg">
+                                    <g fill="none" stroke="currentColor" stroke-linecap="round"
+                                        stroke-linejoin="round" stroke-width="2">
+                                        <path
+                                            d="M19.933 13.041a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747" />
+                                        <path d="M20 4v5h-5" />
+                                    </g>
+                                </svg>
+                                Update Service
+                            </x-forms.button>
+                        @else
+                            <x-forms.button title="Restart without rebuilding" wire:click='restart'>
+                                <svg class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24"
+                                    xmlns="http://www.w3.org/2000/svg">
+                                    <g fill="none" stroke="currentColor" stroke-linecap="round"
+                                        stroke-linejoin="round" stroke-width="2">
+                                        <path
+                                            d="M19.933 13.041a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747" />
+                                        <path d="M20 4v5h-5" />
+                                    </g>
+                                </svg>
+                                Restart
+                            </x-forms.button>
+                        @endif
+                    @endif
+                    <x-forms.button wire:click='stop'>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24"
                             stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                             stroke-linejoin="round">
                             <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                            <path
-                                d="M10.09 4.01l.496 -.495a2 2 0 0 1 2.828 0l7.071 7.07a2 2 0 0 1 0 2.83l-7.07 7.07a2 2 0 0 1 -2.83 0l-7.07 -7.07a2 2 0 0 1 0 -2.83l3.535 -3.535h-3.988">
+                            <path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                            </path>
+                            <path d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
                             </path>
-                            <path d="M7.05 11.038v-3.988"></path>
                         </svg>
-                        Redeploy
-                    </button>
+                        Stop
+                    </x-forms.button>
+                @else
+                    <x-forms.button wire:click='deploy'>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark: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>
+                        Deploy
+                    </x-forms.button>
                 @endif
-                @if ($application->build_pack !== 'dockercompose')
-                    @if ($application->destination->server->isSwarm())
-                        <button title="Redeploy Swarm Service (rolling update)" wire:click='deploy'
-                            class="flex items-center gap-2 cursor-pointer hover:text-white text-neutral-400">
-                            <svg class="w-5 h-5 text-warning" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-                                    stroke-width="2">
-                                    <path d="M19.933 13.041a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747" />
-                                    <path d="M20 4v5h-5" />
-                                </g>
-                            </svg>
-                            Update Service
-                        </button>
-                    @else
-                        <button title="Restart without rebuilding" wire:click='restart'
-                            class="flex items-center gap-2 cursor-pointer hover:text-white text-neutral-400">
-                            <svg class="w-5 h-5 text-warning" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-                                    stroke-width="2">
-                                    <path d="M19.933 13.041a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747" />
-                                    <path d="M20 4v5h-5" />
-                                </g>
-                            </svg>
-
-                            Restart
-                        </button>
-                    @endif
-                    {{-- @if (isDev())
-                        <button title="Restart without rebuilding" wire:click='restartNew'
-                            class="flex items-center gap-2 cursor-pointer hover:text-white text-neutral-400">
-                            <svg class="w-5 h-5 text-warning" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-                                    stroke-width="2">
-                                    <path d="M19.933 13.041a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747" />
-                                    <path d="M20 4v5h-5" />
-                                </g>
-                            </svg>
-                            Restart (new)
-                        </button>
-                    @endif --}}
-                @endif
-                <button wire:click='stop'
-                    class="flex items-center gap-2 cursor-pointer hover:text-white text-neutral-400">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24"
-                        stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
-                        stroke-linejoin="round">
-                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                        <path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path>
-                        <path d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path>
-                    </svg>
-                    Stop
-                </button>
-            @else
-                <button wire:click='deploy'
-                    class="flex items-center gap-2 cursor-pointer hover:text-white text-neutral-400">
-                    <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>
-                    Deploy
-                </button>
-            @endif
+            </div>
         @endif
     </div>
 </nav>
diff --git a/resources/views/livewire/project/clone-me.blade.php b/resources/views/livewire/project/clone-me.blade.php
index c7389079d..3ab5f0654 100644
--- a/resources/views/livewire/project/clone-me.blade.php
+++ b/resources/views/livewire/project/clone-me.blade.php
@@ -16,7 +16,7 @@
                 <div class="grid grid-cols-1 gap-2 pb-4 lg:grid-cols-4">
                     @foreach ($server->destinations() as $destination)
                         <div class="cursor-pointer box-without-bg bg-coolgray-200 group"
-                            :class="'{{ $selectedDestination === $destination->id }}' && 'bg-coollabs text-white'"
+                            :class="'{{ $selectedDestination === $destination->id }}' && 'bg-coollabs dark:text-white'"
                             wire:click="selectServer('{{ $server->id }}', '{{ $destination->id }}')">
                             {{ $destination->name }}
                         </div>
@@ -32,7 +32,7 @@
         @foreach ($environment->applications->sortBy('name') as $application)
             <div class="cursor-default box-without-bg bg-coolgray-100 group">
                 <div class="flex flex-col">
-                    <div class="font-bold text-white">{{ $application->name }}</div>
+                    <div class="font-bold dark:text-white">{{ $application->name }}</div>
                     <div class="description">{{ $application->description }}</div>
                 </div>
             </div>
@@ -40,7 +40,7 @@
         @foreach ($environment->databases()->sortBy('name') as $database)
             <div class="cursor-default box-without-bg bg-coolgray-100 group">
                 <div class="flex flex-col">
-                    <div class="font-bold text-white">{{ $database->name }}</div>
+                    <div class="font-bold dark:text-white">{{ $database->name }}</div>
                     <div class="description">{{ $database->description }}</div>
                 </div>
             </div>
@@ -48,7 +48,7 @@
         @foreach ($environment->services->sortBy('name') as $service)
             <div class="cursor-default box-without-bg bg-coolgray-100 group">
                 <div class="flex flex-col">
-                    <div class="font-bold text-white">{{ $service->name }}</div>
+                    <div class="font-bold dark:text-white">{{ $service->name }}</div>
                     <div class="description">{{ $service->description }}</div>
                 </div>
             </div>
diff --git a/resources/views/livewire/project/database/configuration.blade.php b/resources/views/livewire/project/database/configuration.blade.php
index 9d4a6c28c..1cb43d939 100644
--- a/resources/views/livewire/project/database/configuration.blade.php
+++ b/resources/views/livewire/project/database/configuration.blade.php
@@ -13,45 +13,45 @@
     </x-modal>
     <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-6">
         <div class="flex flex-col gap-4 min-w-fit">
-            <a :class="activeTab === 'general' && 'text-white'"
+            <a :class="activeTab === 'general' && 'dark:text-white'"
                 @click.prevent="activeTab = 'general';
                 window.location.hash = 'general'"
                 href="#">General</a>
-            <a :class="activeTab === 'environment-variables' && 'text-white'"
+            <a :class="activeTab === 'environment-variables' && 'dark:text-white'"
                 @click.prevent="activeTab = 'environment-variables'; window.location.hash = 'environment-variables'"
                 href="#">Environment
                 Variables</a>
-            <a :class="activeTab === 'servers' && 'text-white'"
+            <a :class="activeTab === 'servers' && 'dark:text-white'"
                 @click.prevent="activeTab = 'servers';
                 window.location.hash = 'servers'"
                 href="#">Servers
             </a>
-            <a :class="activeTab === 'storages' && 'text-white'"
+            <a :class="activeTab === 'storages' && 'dark:text-white'"
                 @click.prevent="activeTab = 'storages';
                 window.location.hash = 'storages'"
                 href="#">Storages
             </a>
-            <a :class="activeTab === 'import' && 'text-white'"
+            <a :class="activeTab === 'import' && 'dark:text-white'"
                 @click.prevent="activeTab = 'import';
             window.location.hash = 'import'" href="#">Import
                 Backup
             </a>
-            <a :class="activeTab === 'webhooks' && 'text-white'"
+            <a :class="activeTab === 'webhooks' && 'dark:text-white'"
                 @click.prevent="activeTab = 'webhooks'; window.location.hash = 'webhooks'" href="#">Webhooks
             </a>
-            <a :class="activeTab === 'resource-limits' && 'text-white'"
+            <a :class="activeTab === 'resource-limits' && 'dark:text-white'"
                 @click.prevent="activeTab = 'resource-limits';
                 window.location.hash = 'resource-limits'"
                 href="#">Resource Limits
             </a>
-            <a :class="activeTab === 'resource-operations' && 'text-white'"
+            <a :class="activeTab === 'resource-operations' && 'dark:text-white'"
                 @click.prevent="activeTab = 'resource-operations'; window.location.hash = 'resource-operations'"
                 href="#">Resource Operations
             </a>
-            <a :class="activeTab === 'tags' && 'text-white'"
+            <a :class="activeTab === 'tags' && 'dark:text-white'"
                 @click.prevent="activeTab = 'tags'; window.location.hash = 'tags'" href="#">Tags
             </a>
-            <a :class="activeTab === 'danger' && 'text-white'"
+            <a :class="activeTab === 'danger' && 'dark:text-white'"
                 @click.prevent="activeTab = 'danger';
                 window.location.hash = 'danger'"
                 href="#">Danger Zone
diff --git a/resources/views/livewire/project/database/heading.blade.php b/resources/views/livewire/project/database/heading.blade.php
index 88e1d48b7..739e38c12 100644
--- a/resources/views/livewire/project/database/heading.blade.php
+++ b/resources/views/livewire/project/database/heading.blade.php
@@ -7,15 +7,15 @@
         </x-slot:content>
     </x-slide-over>
     <div class="navbar-main">
-        <a class="{{ request()->routeIs('project.database.configuration') ? 'text-white' : '' }}"
+        <a class="{{ request()->routeIs('project.database.configuration') ? 'dark:text-white' : '' }}"
             href="{{ route('project.database.configuration', $parameters) }}">
             <button>Configuration</button>
         </a>
-        <a class="{{ request()->routeIs('project.database.command') ? 'text-white' : '' }}"
+        <a class="{{ request()->routeIs('project.database.command') ? 'dark:text-white' : '' }}"
             href="{{ route('project.database.command', $parameters) }}">
             <button>Execute Command</button>
         </a>
-        <a class="{{ request()->routeIs('project.database.logs') ? 'text-white' : '' }}"
+        <a class="{{ request()->routeIs('project.database.logs') ? 'dark:text-white' : '' }}"
             href="{{ route('project.database.logs', $parameters) }}">
             <button>Logs</button>
         </a>
@@ -24,7 +24,7 @@
                 $database->getMorphClass() === 'App\Models\StandaloneMongodb' ||
                 $database->getMorphClass() === 'App\Models\StandaloneMysql' ||
                 $database->getMorphClass() === 'App\Models\StandaloneMariadb')
-            <a class="{{ request()->routeIs('project.database.backup.index') ? 'text-white' : '' }}"
+            <a class="{{ request()->routeIs('project.database.backup.index') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.database.backup.index', $parameters) }}">
                 <button>Backups</button>
             </a>
diff --git a/resources/views/livewire/project/database/redis/general.blade.php b/resources/views/livewire/project/database/redis/general.blade.php
index dd000de48..0bbf8fb33 100644
--- a/resources/views/livewire/project/database/redis/general.blade.php
+++ b/resources/views/livewire/project/database/redis/general.blade.php
@@ -31,7 +31,7 @@
             @endif
         </div>
         <x-forms.textarea
-            helper="<a target='_blank' class='text-white underline' href='https://raw.githubusercontent.com/redis/redis/7.2/redis.conf'>Redis Default Configuration</a>"
+            helper="<a target='_blank' class='dark:text-white underline' href='https://raw.githubusercontent.com/redis/redis/7.2/redis.conf'>Redis Default Configuration</a>"
             label="Custom Redis Configuration" rows="10" id="database.redis_conf" />
         <h3 class="pt-4">Advanced</h3>
         <div class="flex flex-col">
diff --git a/resources/views/livewire/project/edit.blade.php b/resources/views/livewire/project/edit.blade.php
index 6860f3328..aee64bdde 100644
--- a/resources/views/livewire/project/edit.blade.php
+++ b/resources/views/livewire/project/edit.blade.php
@@ -27,7 +27,7 @@
     </div>
     <div class="flex items-center gap-2 pb-4">You can use these variables anywhere with <span
             class="dark:text-warning text-coollabs">@{{ project.VARIABLENAME }}</span><x-helper
-            helper="More info <a class='text-white underline' href='https://coolify.io/docs/environment-variables#shared-variables' target='_blank'>here</a>."></x-helper>
+            helper="More info <a class='dark:text-white underline' href='https://coolify.io/docs/environment-variables#shared-variables' target='_blank'>here</a>."></x-helper>
     </div>
     <div class="flex flex-col gap-2">
         @forelse ($project->environment_variables->sort()->sortBy('real_value') as $env)
diff --git a/resources/views/livewire/project/environment-edit.blade.php b/resources/views/livewire/project/environment-edit.blade.php
index 268111b89..53aa0777a 100644
--- a/resources/views/livewire/project/environment-edit.blade.php
+++ b/resources/views/livewire/project/environment-edit.blade.php
@@ -55,7 +55,7 @@
         </x-slide-over>
     </div>
     <div class="flex items-center gap-2 pb-4">You can use these variables anywhere with <span class="text-warning">@{{environment.VARIABLENAME}}</span><x-helper
-            helper="More info <a class='text-white underline' href='https://coolify.io/docs/environment-variables#shared-variables' target='_blank'>here</a>."></x-helper>
+            helper="More info <a class='dark:text-white underline' href='https://coolify.io/docs/environment-variables#shared-variables' target='_blank'>here</a>."></x-helper>
     </div>
     <div class="flex flex-col gap-2">
         @forelse ($environment->environment_variables->sort()->sortBy('real_value') as $env)
diff --git a/resources/views/livewire/project/index.blade.php b/resources/views/livewire/project/index.blade.php
index a4ab515f0..8cce07023 100644
--- a/resources/views/livewire/project/index.blade.php
+++ b/resources/views/livewire/project/index.blade.php
@@ -12,21 +12,14 @@
                 x-on:click="goto('{{ $project->uuid }}')">
                 <a class="flex flex-col flex-1 mx-6 hover:no-underline"
                     href="{{ route('project.show', ['project_uuid' => data_get($project, 'uuid')]) }}">
-                    <div class="font-bold text-white">{{ $project->name }}</div>
-                    <div class="description ">
+                    <div class="box-title">{{ $project->name }}</div>
+                    <div class="box-description ">
                         {{ $project->description }}</div>
                 </a>
                 <div class="flex items-center">
-                    <a class="mx-4 on-box"
+                    <a class="mx-4 font-bold hover:underline dark:hover:no-underline"
                         href="{{ route('project.edit', ['project_uuid' => data_get($project, 'uuid')]) }}">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon on-box" viewBox="0 0 24 24"
-                            stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
-                            stroke-linejoin="round">
-                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                            <path
-                                d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
-                            <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
-                        </svg>
+                        Settings
                     </a>
                 </div>
             </div>
diff --git a/resources/views/livewire/project/new/github-private-repository-deploy-key.blade.php b/resources/views/livewire/project/new/github-private-repository-deploy-key.blade.php
index f08b08c4a..a157307d2 100644
--- a/resources/views/livewire/project/new/github-private-repository-deploy-key.blade.php
+++ b/resources/views/livewire/project/new/github-private-repository-deploy-key.blade.php
@@ -13,7 +13,7 @@
                         <div class="gap-2 py-4 cursor-pointer group hover:bg-coollabs bg-coolgray-200"
                             wire:click.defer="setPrivateKey('{{ $key->id }}')" wire:key="{{ $key->id }}">
                             <div class="flex gap-4 mx-6">
-                                <div class="group-hover:text-white">
+                                <div class="group-hover:dark:text-white">
                                     {{ $key->name }}
                                 </div>
                                 <span wire:target="loadRepositories" wire:loading.delay
@@ -24,7 +24,7 @@
                         <div class="gap-2 py-4 cursor-pointer group hover:bg-coollabs bg-coolgray-200"
                             wire:click.defer="setPrivateKey('{{ $key->id }}')" wire:key="{{ $key->id }}">
                             <div class="flex gap-4 mx-6">
-                                <div class="group-hover:text-white">
+                                <div class="group-hover:dark:text-white">
                                     {{ $key->name }}
                                 </div>
                                 <span wire:target="loadRepositories" wire:loading.delay
diff --git a/resources/views/livewire/project/new/github-private-repository.blade.php b/resources/views/livewire/project/new/github-private-repository.blade.php
index a522e7b75..45249607b 100644
--- a/resources/views/livewire/project/new/github-private-repository.blade.php
+++ b/resources/views/livewire/project/new/github-private-repository.blade.php
@@ -1,7 +1,7 @@
 <div>
     <div class="flex items-end gap-2">
         <h1>Create a new Application</h1>
-        <x-forms.button wire:click="saveFromRedirect('source.new')" class="group-hover:text-white">
+        <x-forms.button wire:click="saveFromRedirect('source.new')" class="group-hover:dark:text-white">
             + Add New GitHub App
         </x-forms.button>
         @if ($repositories->count() > 0)
@@ -27,10 +27,10 @@
                             wire:click.prevent="loadRepositories({{ $ghapp->id }})" wire:key="{{ $ghapp->id }}">
                             <div class="flex mr-4">
                                 <div class="flex flex-col mx-6">
-                                    <div class="group-hover:text-white">
+                                    <div class="group-hover:dark:text-white">
                                         {{ data_get($ghapp, 'name') }}
                                     </div>
-                                    <div class="text-xs text-gray-400 group-hover:text-white">
+                                    <div class="text-xs text-gray-400 group-hover:dark:text-white">
                                         {{ data_get($ghapp, 'html_url') }}</div>
 
                                 </div>
diff --git a/resources/views/livewire/project/new/public-git-repository.blade.php b/resources/views/livewire/project/new/public-git-repository.blade.php
index 12aee9912..1edc481ec 100644
--- a/resources/views/livewire/project/new/public-git-repository.blade.php
+++ b/resources/views/livewire/project/new/public-git-repository.blade.php
@@ -25,7 +25,7 @@
                             <div class='text-helper'>https://github.com/coollabsio/coolify-examples/tree/main</div>
                         </div>
                         <div>
-                            For example application deployments, checkout <a class="text-white underline"
+                            For example application deployments, checkout <a class="dark:text-white underline"
                                 href="https://github.com/coollabsio/coolify-examples/" target="_blank">Coolify
                                 Examples</a>.
                         </div>
diff --git a/resources/views/livewire/project/new/select.blade.php b/resources/views/livewire/project/new/select.blade.php
index 079d7861b..5be683ca0 100644
--- a/resources/views/livewire/project/new/select.blade.php
+++ b/resources/views/livewire/project/new/select.blade.php
@@ -151,10 +151,10 @@
 
                 {{-- <div class="box group" wire="setType('existing-postgresql')">
                     <div class="flex flex-col mx-6">
-                        <div class="group-hover:text-white">
+                        <div class="group-hover:dark:text-white">
                             Backup Existing PostgreSQL
                         </div>
-                        <div class="text-xs group-hover:text-white">
+                        <div class="text-xs group-hover:dark:text-white">
                             Schedule a backup of an existing PostgreSQL database.
                         </div>
                     </div>
@@ -231,7 +231,7 @@
                             {{-- <button class="text-left box group" wire:loading.attr="disabled"
                                 wire:click="setType('one-click-service-{{ $serviceName }}')">
                                 <div class="flex flex-col mx-2">
-                                    <div class="font-bold text-white group-hover:text-white">
+                                    <div class="font-bold dark:text-white group-hover:dark:text-white">
                                         {{ Str::headline($serviceName) }}
                                     </div>
                                     @if (data_get($service, 'slogan'))
@@ -256,16 +256,16 @@
                 @forelse($servers as $server)
                     <div class="w-64 box group" wire:click="setServer({{ $server }})">
                         <div class="flex flex-col mx-6">
-                            <div class="font-bold group-hover:text-white">
+                            <div class="font-bold group-hover:dark:text-white">
                                 {{ $server->name }}
                             </div>
-                            <div class="text-xs group-hover:text-white">
+                            <div class="text-xs group-hover:dark:text-white">
                                 {{ $server->description }}</div>
                         </div>
                     </div>
                 @empty
                     <div>
-                        <div>No validated & reachable servers found. <a class="text-white underline" href="/servers">
+                        <div>No validated & reachable servers found. <a class="dark:text-white underline" href="/servers">
                                 Go to servers page
                             </a></div>
                     </div>
@@ -285,7 +285,7 @@
                     @foreach ($swarmDockers as $swarmDocker)
                         <div class="box group" wire:click="setDestination('{{ $swarmDocker->uuid }}')">
                             <div class="flex flex-col mx-6">
-                                <div class="font-bold group-hover:text-white">
+                                <div class="font-bold group-hover:dark:text-white">
                                     Swarm Docker <span class="text-xs">({{ $swarmDocker->name }})</span>
                                 </div>
                             </div>
@@ -295,10 +295,10 @@
                     @foreach ($standaloneDockers as $standaloneDocker)
                         <div class="box group" wire:click="setDestination('{{ $standaloneDocker->uuid }}')">
                             <div class="flex flex-col mx-6">
-                                <div class="font-bold group-hover:text-white">
+                                <div class="font-bold group-hover:dark:text-white">
                                     Standalone Docker <span class="text-xs">({{ $standaloneDocker->name }})</span>
                                 </div>
-                                <div class="text-xs group-hover:text-white">
+                                <div class="text-xs group-hover:dark:text-white">
                                     Network: {{ $standaloneDocker->network }}</div>
                             </div>
                         </div>
diff --git a/resources/views/livewire/project/resource/index.blade.php b/resources/views/livewire/project/resource/index.blade.php
index 3c241ad6d..3cd50fbd2 100644
--- a/resources/views/livewire/project/resource/index.blade.php
+++ b/resources/views/livewire/project/resource/index.blade.php
@@ -107,7 +107,7 @@
                                 <div class="px-2 py-1 cursor-pointer description bg-coolgray-100 hover:bg-coolgray-300"
                                     @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
                             </template>
-                            <div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:text-white hover:bg-coolgray-300"
+                            <div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:dark:text-white hover:bg-coolgray-300"
                                 @click.prevent="goto(item)">Add tag</div>
                         </div>
                     </span>
@@ -117,7 +117,7 @@
                         <a class="h-24 box group" :href="item.hrefLink">
                             <div class="flex flex-col px-4 mx-2">
                                 <div class="flex gap-2">
-                                    <div class="pb-2 font-bold text-white" x-text="item.name"></div>
+                                    <div class="pb-2 font-bold dark:text-white" x-text="item.name"></div>
                                     <template x-if="item.status.startsWith('running')">
                                         <div title="running" class="mt-1 bg-success badge "></div>
                                     </template>
@@ -134,12 +134,12 @@
                                 <div class="max-w-full truncate description" x-text="item.description"></div>
                             </div>
                         </a>
-                        <div class="flex gap-1 pt-1 group-hover:text-white group min-h-6">
+                        <div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
                             <template x-for="tag in item.tags">
                                 <div class="px-2 py-1 cursor-pointer description bg-coolgray-100 hover:bg-coolgray-300"
                                     @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
                             </template>
-                            <div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:text-white hover:bg-coolgray-300"
+                            <div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:dark:text-white hover:bg-coolgray-300"
                                 @click.prevent="goto(item)">Add tag</div>
                         </div>
                     </span>
@@ -149,7 +149,7 @@
                         <a class="h-24 box group" :href="item.hrefLink">
                             <div class="flex flex-col px-4 mx-2">
                                 <div class="flex gap-2">
-                                    <div class="pb-2 font-bold text-white" x-text="item.name"></div>
+                                    <div class="pb-2 font-bold dark:text-white" x-text="item.name"></div>
                                     <template x-if="item.status.startsWith('running')">
                                         <div title="running" class="mt-1 bg-success badge "></div>
                                     </template>
@@ -166,12 +166,12 @@
                                 <div class="max-w-full truncate description" x-text="item.description"></div>
                             </div>
                         </a>
-                        <div class="flex gap-1 pt-1 group-hover:text-white group min-h-6">
+                        <div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
                             <template x-for="tag in item.tags">
                                 <div class="px-2 py-1 cursor-pointer description bg-coolgray-100 hover:bg-coolgray-300"
                                     @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
                             </template>
-                            <div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:text-white hover:bg-coolgray-300"
+                            <div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:dark:text-white hover:bg-coolgray-300"
                                 @click.prevent="goto(item)">Add tag</div>
                         </div>
                     </span>
@@ -181,7 +181,7 @@
                         <a class="h-24 box group" :href="item.hrefLink">
                             <div class="flex flex-col px-4 mx-2">
                                 <div class="flex gap-2">
-                                    <div class="pb-2 font-bold text-white" x-text="item.name"></div>
+                                    <div class="pb-2 font-bold dark:text-white" x-text="item.name"></div>
                                     <template x-if="item.status.startsWith('running')">
                                         <div title="running" class="mt-1 bg-success badge "></div>
                                     </template>
@@ -198,12 +198,12 @@
                                 <div class="max-w-full truncate description" x-text="item.description"></div>
                             </div>
                         </a>
-                        <div class="flex gap-1 pt-1 group-hover:text-white group min-h-6">
+                        <div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
                             <template x-for="tag in item.tags">
                                 <div class="px-2 py-1 cursor-pointer description bg-coolgray-100 hover:bg-coolgray-300"
                                     @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
                             </template>
-                            <div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:text-white hover:bg-coolgray-300"
+                            <div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:dark:text-white hover:bg-coolgray-300"
                                 @click.prevent="goto(item)">Add tag</div>
                         </div>
                     </span>
@@ -213,7 +213,7 @@
                         <a class="h-24 box group" :href="item.hrefLink">
                             <div class="flex flex-col px-4 mx-2">
                                 <div class="flex gap-2">
-                                    <div class="pb-2 font-bold text-white" x-text="item.name"></div>
+                                    <div class="pb-2 font-bold dark:text-white" x-text="item.name"></div>
                                     <template x-if="item.status.startsWith('running')">
                                         <div title="running" class="mt-1 bg-success badge "></div>
                                     </template>
@@ -230,12 +230,12 @@
                                 <div class="max-w-full truncate description" x-text="item.description"></div>
                             </div>
                         </a>
-                        <div class="flex gap-1 pt-1 group-hover:text-white group min-h-6">
+                        <div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
                             <template x-for="tag in item.tags">
                                 <div class="px-2 py-1 cursor-pointer description bg-coolgray-100 hover:bg-coolgray-300"
                                     @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
                             </template>
-                            <div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:text-white hover:bg-coolgray-300"
+                            <div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:dark:text-white hover:bg-coolgray-300"
                                 @click.prevent="goto(item)">Add tag</div>
                         </div>
                     </span>
@@ -245,7 +245,7 @@
                         <a class="h-24 box group" :href="item.hrefLink">
                             <div class="flex flex-col px-4 mx-2">
                                 <div class="flex gap-2">
-                                    <div class="pb-2 font-bold text-white" x-text="item.name"></div>
+                                    <div class="pb-2 font-bold dark:text-white" x-text="item.name"></div>
                                     <template x-if="item.status.startsWith('running')">
                                         <div title="running" class="mt-1 bg-success badge "></div>
                                     </template>
@@ -262,12 +262,12 @@
                                 <div class="max-w-full truncate description" x-text="item.description"></div>
                             </div>
                         </a>
-                        <div class="flex gap-1 pt-1 group-hover:text-white group min-h-6">
+                        <div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
                             <template x-for="tag in item.tags">
                                 <div class="px-2 py-1 cursor-pointer description bg-coolgray-100 hover:bg-coolgray-300"
                                     @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
                             </template>
-                            <div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:text-white hover:bg-coolgray-300"
+                            <div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:dark:text-white hover:bg-coolgray-300"
                                 @click.prevent="goto(item)">Add tag</div>
                         </div>
                     </span>
diff --git a/resources/views/livewire/project/service/configuration.blade.php b/resources/views/livewire/project/service/configuration.blade.php
index d0ecda0a3..32c504cfa 100644
--- a/resources/views/livewire/project/service/configuration.blade.php
+++ b/resources/views/livewire/project/service/configuration.blade.php
@@ -3,37 +3,37 @@
     <div class="flex h-full pt-6">
         <div class="flex flex-col items-start gap-4 min-w-fit">
             <a target="_blank" href="{{ $service->documentation() }}">Documentation <x-external-link /></a>
-            <a :class="activeTab === 'service-stack' && 'text-white'"
+            <a :class="activeTab === 'service-stack' && 'dark:text-white'"
                 @click.prevent="activeTab = 'service-stack';
                 window.location.hash = 'service-stack'"
                 href="#">Service Stack</a>
-            <a :class="activeTab === 'environment-variables' && 'text-white'"
+            <a :class="activeTab === 'environment-variables' && 'dark:text-white'"
                 @click.prevent="activeTab = 'environment-variables'; window.location.hash = 'environment-variables'"
                 href="#">Environment
                 Variables</a>
-            <a :class="activeTab === 'storages' && 'text-white'"
+            <a :class="activeTab === 'storages' && 'dark:text-white'"
                 @click.prevent="activeTab = 'storages';
                 window.location.hash = 'storages'"
                 href="#">Storages</a>
-            <a :class="activeTab === 'execute-command' && 'text-white'"
+            <a :class="activeTab === 'execute-command' && 'dark:text-white'"
                 @click.prevent="activeTab = 'execute-command';
                 window.location.hash = 'execute-command'"
                 href="#">Execute Command</a>
-            <a :class="activeTab === 'logs' && 'text-white'"
+            <a :class="activeTab === 'logs' && 'dark:text-white'"
                 @click.prevent="activeTab = 'logs';
                 window.location.hash = 'logs'"
                 href="#">Logs</a>
-            <a :class="activeTab === 'webhooks' && 'text-white'"
+            <a :class="activeTab === 'webhooks' && 'dark:text-white'"
                 @click.prevent="activeTab = 'webhooks'; window.location.hash = 'webhooks'" href="#">Webhooks
             </a>
-            <a :class="activeTab === 'resource-operations' && 'text-white'"
+            <a :class="activeTab === 'resource-operations' && 'dark:text-white'"
                 @click.prevent="activeTab = 'resource-operations'; window.location.hash = 'resource-operations'"
                 href="#">Resource Operations
             </a>
-            <a :class="activeTab === 'tags' && 'text-white'"
+            <a :class="activeTab === 'tags' && 'dark:text-white'"
                 @click.prevent="activeTab = 'tags'; window.location.hash = 'tags'" href="#">Tags
             </a>
-            <a :class="activeTab === 'danger' && 'text-white'"
+            <a :class="activeTab === 'danger' && 'dark:text-white'"
                 @click.prevent="activeTab = 'danger';
                 window.location.hash = 'danger'"
                 href="#">Danger Zone
@@ -75,7 +75,7 @@
                                     <div class="text-xs">{{ $application->status }}</div>
                                 </div>
                                 <div class="flex items-center px-4">
-                                    <a class="flex flex-col flex-1 group-hover:text-white hover:no-underline"
+                                    <a class="flex flex-col flex-1 group-hover:dark:text-white hover:no-underline"
                                         href="{{ route('project.service.index', [...$parameters, 'stack_service_uuid' => $application->uuid]) }}">
                                         <svg xmlns="http://www.w3.org/2000/svg" class="icon hover:text-warning"
                                             viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
@@ -121,7 +121,7 @@
                                     <div class="text-xs">{{ $database->status }}</div>
                                 </div>
                                 <div class="flex items-center px-4">
-                                    <a class="flex flex-col flex-1 group-hover:text-white hover:no-underline"
+                                    <a class="flex flex-col flex-1 group-hover:dark:text-white hover:no-underline"
                                         href="{{ route('project.service.index', [...$parameters, 'stack_service_uuid' => $database->uuid]) }}">
                                         <svg xmlns="http://www.w3.org/2000/svg" class="icon hover:text-warning"
                                             viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
diff --git a/resources/views/livewire/project/service/index.blade.php b/resources/views/livewire/project/service/index.blade.php
index a90438487..8f3be917d 100644
--- a/resources/views/livewire/project/service/index.blade.php
+++ b/resources/views/livewire/project/service/index.blade.php
@@ -2,18 +2,18 @@
     <livewire:project.service.navbar :service="$service" :parameters="$parameters" :query="$query" />
     <div class="flex h-full pt-6">
         <div class="flex flex-col gap-4 min-w-fit">
-            <a class="{{ request()->routeIs('project.service.configuration') ? 'text-white' : '' }}"
+            <a class="{{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.service.configuration', [...$parameters, 'stack_service_uuid' => null]) }}">
                 <button><- Back</button>
             </a>
-            <a :class="activeTab === 'general' && 'text-white'"
+            <a :class="activeTab === 'general' && 'dark:text-white'"
                 @click.prevent="activeTab = 'general'; window.location.hash = 'general'; if(window.location.search) window.location.search = ''"
                 href="#">General</a>
-            <a :class="activeTab === 'storages' && 'text-white'"
+            <a :class="activeTab === 'storages' && 'dark:text-white'"
                 @click.prevent="activeTab = 'storages'; window.location.hash = 'storages'; if(window.location.search) window.location.search = ''"
                 href="#">Storages
             </a>
-            <a :class="activeTab === 'scheduled-tasks' && 'text-white'"
+            <a :class="activeTab === 'scheduled-tasks' && 'dark:text-white'"
                 @click.prevent="activeTab = 'scheduled-tasks'; window.location.hash = 'scheduled-tasks'"
                 href="#">Scheduled Tasks
             </a>
@@ -21,7 +21,7 @@
                 $serviceDatabase?->databaseType() === 'standalone-mysql' ||
                     $serviceDatabase?->databaseType() === 'standalone-postgresql' ||
                     $serviceDatabase?->databaseType() === 'standalone-mariadb')
-                <a :class="activeTab === 'backups' && 'text-white'"
+                <a :class="activeTab === 'backups' && 'dark:text-white'"
                     @click.prevent="activeTab = 'backups'; window.location.hash = 'backups'" href="#">Backups</a>
             @endif
         </div>
diff --git a/resources/views/livewire/project/service/navbar.blade.php b/resources/views/livewire/project/service/navbar.blade.php
index a7323a973..34bcf2070 100644
--- a/resources/views/livewire/project/service/navbar.blade.php
+++ b/resources/views/livewire/project/service/navbar.blade.php
@@ -8,7 +8,7 @@
     <h1>Configuration</h1>
     <x-resources.breadcrumbs :resource="$service" :parameters="$parameters" />
     <div class="navbar-main" x-data>
-        <a class="{{ request()->routeIs('project.service.configuration') ? 'text-white' : '' }}"
+        <a class="{{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}"
             href="{{ route('project.service.configuration', $parameters) }}">
             <button>Configuration</button>
         </a>
diff --git a/resources/views/livewire/project/service/stack-form.blade.php b/resources/views/livewire/project/service/stack-form.blade.php
index 560353ed8..0606234d6 100644
--- a/resources/views/livewire/project/service/stack-form.blade.php
+++ b/resources/views/livewire/project/service/stack-form.blade.php
@@ -19,7 +19,7 @@
     </div>
     <div class="w-96">
         <x-forms.checkbox instantSave id="service.connect_to_docker_network" label="Connect To Predefined Network"
-            helper="By default, you do not reach the Coolify defined networks.<br>Starting a docker compose based resource will have an internal network. <br>If you connect to a Coolify defined network, you maybe need to use different internal DNS names to connect to a resource.<br><br>For more information, check <a class='text-white underline' target='_blank' href='https://coolify.io/docs/docker/compose#connect-to-predefined-networks'>this</a>." />
+            helper="By default, you do not reach the Coolify defined networks.<br>Starting a docker compose based resource will have an internal network. <br>If you connect to a Coolify defined network, you maybe need to use different internal DNS names to connect to a resource.<br><br>For more information, check <a class='dark:text-white underline' target='_blank' href='https://coolify.io/docs/docker/compose#connect-to-predefined-networks'>this</a>." />
     </div>
     @if ($fields)
         <div>
diff --git a/resources/views/livewire/project/shared/destination.blade.php b/resources/views/livewire/project/shared/destination.blade.php
index 580a5f672..f94d011f7 100644
--- a/resources/views/livewire/project/shared/destination.blade.php
+++ b/resources/views/livewire/project/shared/destination.blade.php
@@ -3,7 +3,7 @@
     <div class="">Server related configurations.</div>
     <div class="grid grid-cols-1 gap-4 py-4">
         <div class="flex gap-2">
-            <div class="relative flex flex-col text-white cursor-default box-without-bg bg-coolgray-100 w-96">
+            <div class="relative flex flex-col dark:text-white cursor-default box-without-bg bg-coolgray-100 w-96">
                 <div class="text-xl font-bold">Primary Server</div>
                 @if (str($resource->realStatus())->startsWith('running'))
                     <div title="{{ $resource->realStatus() }}" class="absolute bg-success -top-1 -left-1 badge ">
@@ -73,7 +73,7 @@
             <div class="grid grid-cols-1 gap-4">
                 @foreach ($networks as $network)
                     <div wire:click="addServer('{{ $network->id }}','{{ data_get($network, 'server.id') }}')"
-                        class="relative flex flex-col text-white cursor-default box w-96">
+                        class="relative flex flex-col dark:text-white cursor-default box w-96">
                         <div>
                             Server: {{ data_get($network, 'server.name') }}
                         </div>
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 4b760b47e..a3f9210fa 100644
--- a/resources/views/livewire/project/shared/environment-variable/show.blade.php
+++ b/resources/views/livewire/project/shared/environment-variable/show.blade.php
@@ -1,5 +1,5 @@
 <div>
-    <form wire:submit='submit' class="flex flex-col items-center gap-4 p-4 border lg:items-start border-coolgray-300">
+    <form wire:submit='submit' class="flex flex-col items-center gap-4 p-4 border lg:items-start dark:border-coolgray-300">
         @if ($isLocked)
             <div class="flex flex-1 w-full gap-2">
                 <x-forms.input disabled id="env.key" />
diff --git a/resources/views/livewire/project/shared/get-logs.blade.php b/resources/views/livewire/project/shared/get-logs.blade.php
index 995782144..2c458fd0d 100644
--- a/resources/views/livewire/project/shared/get-logs.blade.php
+++ b/resources/views/livewire/project/shared/get-logs.blade.php
@@ -24,7 +24,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 flex-col-reverse w-full px-4 py-2 overflow-y-auto text-white bg-coolgray-100 scrollbar border-coolgray-300"
+            <div class="flex flex-col-reverse w-full px-4 py-2 overflow-y-auto dark:text-white bg-coolgray-100 scrollbar border-coolgray-300"
                 :class="fullscreen ? '' : 'max-h-96 border border-solid rounded'">
                 <button title="Minimize" x-show="fullscreen" class="fixed top-4 right-4"
                     x-on:click="makeFullscreen"><svg class="icon" viewBox="0 0 24 24"
diff --git a/resources/views/livewire/project/shared/resource-limits.blade.php b/resources/views/livewire/project/shared/resource-limits.blade.php
index 1dcb7fb66..9c1e8b4fc 100644
--- a/resources/views/livewire/project/shared/resource-limits.blade.php
+++ b/resources/views/livewire/project/shared/resource-limits.blade.php
@@ -8,13 +8,13 @@
         <h3 class="pt-4">Limit CPUs</h3>
         <div class="flex gap-2">
             <x-forms.input placeholder="1.5"
-                helper="0 means use all CPUs. Floating point number, like 0.002 or 1.5. More info <a class='text-white underline' target='_blank' href='https://docs.docker.com/engine/reference/run/#cpu-share-constraint'>here</a>."
+                helper="0 means use all CPUs. Floating point number, like 0.002 or 1.5. More info <a class='dark:text-white underline' target='_blank' href='https://docs.docker.com/engine/reference/run/#cpu-share-constraint'>here</a>."
                 label="Number of CPUs" id="resource.limits_cpus" />
             <x-forms.input placeholder="0-2"
-                helper="Empty means, use all CPU sets. 0-2 will use CPU 0, CPU 1 and CPU 2. More info <a class='text-white underline'  target='_blank' href='https://docs.docker.com/engine/reference/run/#cpu-share-constraint'>here</a>."
+                helper="Empty means, use all CPU sets. 0-2 will use CPU 0, CPU 1 and CPU 2. More info <a class='dark:text-white underline'  target='_blank' href='https://docs.docker.com/engine/reference/run/#cpu-share-constraint'>here</a>."
                 label="CPU sets to use" id="resource.limits_cpuset" />
             <x-forms.input placeholder="1024"
-                helper="More info <a class='text-white underline' target='_blank' href='https://docs.docker.com/engine/reference/run/#cpu-share-constraint'>here</a>."
+                helper="More info <a class='dark:text-white underline' target='_blank' href='https://docs.docker.com/engine/reference/run/#cpu-share-constraint'>here</a>."
                 label="CPU Weight" id="resource.limits_cpu_shares" />
         </div>
         <h3 class="pt-4">Limit Memory</h3>
diff --git a/resources/views/livewire/project/shared/resource-operations.blade.php b/resources/views/livewire/project/shared/resource-operations.blade.php
index 9607c0dbc..12ecf66fa 100644
--- a/resources/views/livewire/project/shared/resource-operations.blade.php
+++ b/resources/views/livewire/project/shared/resource-operations.blade.php
@@ -14,7 +14,7 @@
                             <x-modal-confirmation action="cloneTo({{ data_get($destination, 'id') }})">
                                 <x:slot name="content">
                                     <div class="flex flex-col gap-2 box">
-                                        <div class="font-bold text-white">{{ $server->name }}</div>
+                                        <div class="font-bold dark:text-white">{{ $server->name }}</div>
                                         <div>{{ $destination->name }}</div>
                                     </div>
                                 </x:slot>
@@ -40,7 +40,7 @@
                     <x-modal-confirmation action="moveTo({{ data_get($environment, 'id') }})">
                         <x:slot name="content">
                             <div class="flex flex-col gap-2 box">
-                                <div class="font-bold text-white">{{ $project->name }}</div>
+                                <div class="font-bold dark:text-white">{{ $project->name }}</div>
                                 <div><span class="text-warning">{{ $environment->name }}</span> environment</div>
                             </div>
                         </x:slot>
diff --git a/resources/views/livewire/project/shared/scheduled-task/executions.blade.php b/resources/views/livewire/project/shared/scheduled-task/executions.blade.php
index 9e8d82db5..56f7e8854 100644
--- a/resources/views/livewire/project/shared/scheduled-task/executions.blade.php
+++ b/resources/views/livewire/project/shared/scheduled-task/executions.blade.php
@@ -13,7 +13,7 @@
         @endif
         <a wire:click="selectTask({{ data_get($execution, 'id') }})" @class([
             'flex flex-col border-l border-dashed transition-colors box-without-bg bg-coolgray-100 hover:bg-coolgray-100',
-            'bg-coolgray-200 text-white hover:bg-coolgray-200' =>
+            'bg-coolgray-200 dark:text-white hover:bg-coolgray-200' =>
                 data_get($execution, 'id') == $selectedKey,
             'border-green-500' => data_get($execution, 'status') === 'success',
             'border-red-500' => data_get($execution, 'status') === 'failed',
diff --git a/resources/views/livewire/project/shared/tags.blade.php b/resources/views/livewire/project/shared/tags.blade.php
index ff56d149c..466e30991 100644
--- a/resources/views/livewire/project/shared/tags.blade.php
+++ b/resources/views/livewire/project/shared/tags.blade.php
@@ -2,7 +2,7 @@
     <h2>Tags</h2>
     <div class="flex gap-2 pt-4">
         @forelse ($this->resource->tags as $tagId => $tag)
-            <div class="px-2 py-1 text-center text-white select-none w-fit bg-coolgray-100 hover:bg-coolgray-200">
+            <div class="px-2 py-1 text-center dark:text-white select-none w-fit bg-coolgray-100 hover:bg-coolgray-200">
                 {{ $tag->name }}
                 <svg wire:click="deleteTag('{{ $tag->id }}')"
                     xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
diff --git a/resources/views/livewire/project/shared/webhooks.blade.php b/resources/views/livewire/project/shared/webhooks.blade.php
index 26fa7bfbf..fe1382597 100644
--- a/resources/views/livewire/project/shared/webhooks.blade.php
+++ b/resources/views/livewire/project/shared/webhooks.blade.php
@@ -2,11 +2,11 @@
     <div class="flex items-center gap-2">
         <h2>Webhooks</h2>
         <x-helper
-            helper="For more details goto our <a class='text-white underline' href='https://coolify.io/docs/api/deploy-webhook' target='_blank'>docs</a>." />
+            helper="For more details goto our <a class='dark:text-white underline' href='https://coolify.io/docs/api/deploy-webhook' target='_blank'>docs</a>." />
     </div>
     <div>
         <x-forms.input readonly
-            helper="See details in our <a target='_blank' class='text-white underline' href='https://coolify.io/docs/api/authentication'>documentation</a>."
+            helper="See details in our <a target='_blank' class='dark:text-white underline' href='https://coolify.io/docs/api/authentication'>documentation</a>."
             label="Deploy Webhook (auth required)" id="deploywebhook"></x-forms.input>
     </div>
     @if ($resource->type() === 'application')
diff --git a/resources/views/livewire/project/show.blade.php b/resources/views/livewire/project/show.blade.php
index 07b2568de..70dae4bf0 100644
--- a/resources/views/livewire/project/show.blade.php
+++ b/resources/views/livewire/project/show.blade.php
@@ -16,23 +16,16 @@
         @forelse ($project->environments as $environment)
             <div class="gap-2 border border-transparent cursor-pointer box group" x-data
                 x-on:click="goto('{{ $project->uuid }}','{{ $environment->name }}')">
-                <a class="flex flex-col flex-1 mx-6 hover:no-underline"
+                <a class="flex flex-col justify-center flex-1 mx-6 hover:no-underline"
                     href="{{ route('project.resource.index', [$project->uuid, $environment->name]) }}">
-                    <div class="font-bold text-white"> {{ $environment->name }}</div>
-                    <div class="description ">
+                    <div class="font-bold dark:text-white"> {{ $environment->name }}</div>
+                    <div class="description">
                         {{ $environment->description }}</div>
                 </a>
                 <div class="flex items-center">
-                    <a class="mx-4"
+                    <a class="mx-4 font-bold hover:underline dark:hover:no-underline"
                         href="{{ route('project.environment.edit', ['project_uuid' => data_get($project, 'uuid'), 'environment_name' => $environment->name]) }}">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon on-box" viewBox="0 0 24 24"
-                            stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
-                            stroke-linejoin="round">
-                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                            <path
-                                d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
-                            <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
-                        </svg>
+                        Settings
                     </a>
                 </div>
             </div>
diff --git a/resources/views/livewire/realtime-connection.blade.php b/resources/views/livewire/realtime-connection.blade.php
index 779e07102..5a9d14a9f 100644
--- a/resources/views/livewire/realtime-connection.blade.php
+++ b/resources/views/livewire/realtime-connection.blade.php
@@ -34,7 +34,7 @@
             </script>
         @endscript
         <div class="toast z-[9999]" x-cloak x-show="showNotification">
-            <div class="flex flex-col text-white border border-red-500 border-dashed rounded alert-error bg-coolgray-200">
+            <div class="flex flex-col dark:text-white border border-red-500 border-dashed rounded alert-error bg-coolgray-200">
                 <span><span class="font-bold text-left text-red-500">WARNING: </span>Coolify could not connect to the new
                     realtime service introduced in beta.154. <br>This will cause unusual problems on the UI if not
                     fixed!<br><br>Please check the
diff --git a/resources/views/livewire/security/api-tokens.blade.php b/resources/views/livewire/security/api-tokens.blade.php
index ef5eea450..d8c35b9ec 100644
--- a/resources/views/livewire/security/api-tokens.blade.php
+++ b/resources/views/livewire/security/api-tokens.blade.php
@@ -13,14 +13,14 @@
     @if (session()->has('token'))
         <div class="py-4 font-bold text-warning">Please copy this token now. For your security, it won't be shown again.
         </div>
-        <div class="pb-4 font-bold text-white"> {{ session('token') }}</div>
+        <div class="pb-4 font-bold dark:text-white"> {{ session('token') }}</div>
     @endif
     <h4 class="py-4">Issued Tokens</h4>
     <div class="grid gap-2 lg:grid-cols-1">
         @forelse ($tokens as $token)
             <div class="flex items-center gap-2">
                 <div
-                    class="flex items-center gap-2 group-hover:text-white p-2 border border-coolgray-200 hover:text-white hover:no-underline min-w-[24rem] cursor-default">
+                    class="flex items-center gap-2 group-hover:dark:text-white p-2 border border-coolgray-200 hover:dark:text-white hover:no-underline min-w-[24rem] cursor-default">
                     <div>{{ $token->name }}</div>
                 </div>
                 <x-modal-confirmation isErrorButton action="revoke({{ data_get($token, 'id') }})">
diff --git a/resources/views/livewire/security/private-key/show.blade.php b/resources/views/livewire/security/private-key/show.blade.php
index cf609d5cd..b56fab610 100644
--- a/resources/views/livewire/security/private-key/show.blade.php
+++ b/resources/views/livewire/security/private-key/show.blade.php
@@ -22,11 +22,11 @@
                 <x-forms.input readonly id="public_key" />
                 <div class="flex items-end gap-2 py-2 ">
                     <div class="pl-1 ">Private Key <span class='text-helper'>*</span></div>
-                    <div class="text-xs text-white underline cursor-pointer" x-cloak x-show="!showPrivateKey"
+                    <div class="text-xs dark:text-white underline cursor-pointer" x-cloak x-show="!showPrivateKey"
                         x-on:click="showPrivateKey = true">
                         Edit
                     </div>
-                    <div class="text-xs text-white underline cursor-pointer" x-cloak x-show="showPrivateKey"
+                    <div class="text-xs dark:text-white underline cursor-pointer" x-cloak x-show="showPrivateKey"
                         x-on:click="showPrivateKey = false">
                         Hide
                     </div>
diff --git a/resources/views/livewire/server/form.blade.php b/resources/views/livewire/server/form.blade.php
index 55228af75..0ed481cad 100644
--- a/resources/views/livewire/server/form.blade.php
+++ b/resources/views/livewire/server/form.blade.php
@@ -83,20 +83,20 @@
                         @endif
                         @if ($server->settings->is_swarm_worker)
                             <x-forms.checkbox disabled instantSave type="checkbox" id="server.settings.is_swarm_manager"
-                                helper="For more information, please read the documentation <a class='text-white' href='https://coolify.io/docs/docker/swarm' target='_blank'>here</a>."
+                                helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/docker/swarm' target='_blank'>here</a>."
                                 label="Is it a Swarm Manager?" />
                         @else
                             <x-forms.checkbox instantSave type="checkbox" id="server.settings.is_swarm_manager"
-                                helper="For more information, please read the documentation <a class='text-white' href='https://coolify.io/docs/docker/swarm' target='_blank'>here</a>."
+                                helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/docker/swarm' target='_blank'>here</a>."
                                 label="Is it a Swarm Manager?" />
                         @endif
                         @if ($server->settings->is_swarm_manager)
                             <x-forms.checkbox disabled instantSave type="checkbox" id="server.settings.is_swarm_worker"
-                                helper="For more information, please read the documentation <a class='text-white' href='https://coolify.io/docs/docker/swarm' target='_blank'>here</a>."
+                                helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/docker/swarm' target='_blank'>here</a>."
                                 label="Is it a Swarm Worker?" />
                         @else
                             <x-forms.checkbox instantSave type="checkbox" id="server.settings.is_swarm_worker"
-                                helper="For more information, please read the documentation <a class='text-white' href='https://coolify.io/docs/docker/swarm' target='_blank'>here</a>."
+                                helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/docker/swarm' target='_blank'>here</a>."
                                 label="Is it a Swarm Worker?" />
                         @endif
                     @endif
diff --git a/resources/views/livewire/server/index.blade.php b/resources/views/livewire/server/index.blade.php
index 751c1f236..85e93213e 100644
--- a/resources/views/livewire/server/index.blade.php
+++ b/resources/views/livewire/server/index.blade.php
@@ -19,7 +19,7 @@
                         !$server->settings->is_reachable || $server->settings->force_disabled,
                 ])>
                 <div class="flex flex-col mx-6">
-                    <div class="font-bold text-white">
+                    <div class="font-bold dark:text-white">
                         {{ $server->name }}
                     </div>
                     <div class="description">
diff --git a/resources/views/livewire/server/new/by-ip.blade.php b/resources/views/livewire/server/new/by-ip.blade.php
index 999a015f3..0120f1f2c 100644
--- a/resources/views/livewire/server/new/by-ip.blade.php
+++ b/resources/views/livewire/server/new/by-ip.blade.php
@@ -28,25 +28,25 @@
             </div>
             <div class="w-96">
                 <h3 class="pt-6">Swarm <span class="text-xs text-neutral-500">(experimental)</span></h3>
-                <div class="pb-4">Read the docs <a class='text-white'
+                <div class="pb-4">Read the docs <a class='dark:text-white'
                         href='https://coolify.io/docs/docker/swarm#deploy-with-persistent-storage'
                         target='_blank'>here</a>.</div>
                 @if ($is_swarm_worker || $is_build_server)
                     <x-forms.checkbox disabled instantSave type="checkbox" id="is_swarm_manager"
-                        helper="For more information, please read the documentation <a class='text-white' href='https://coolify.io/docs/docker/swarm' target='_blank'>here</a>."
+                        helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/docker/swarm' target='_blank'>here</a>."
                         label="Is it a Swarm Manager?" />
                 @else
                     <x-forms.checkbox type="checkbox" instantSave id="is_swarm_manager"
-                        helper="For more information, please read the documentation <a class='text-white' href='https://coolify.io/docs/docker/swarm' target='_blank'>here</a>."
+                        helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/docker/swarm' target='_blank'>here</a>."
                         label="Is it a Swarm Manager?" />
                 @endif
                 @if ($is_swarm_manager|| $is_build_server)
                     <x-forms.checkbox disabled instantSave type="checkbox" id="is_swarm_worker"
-                        helper="For more information, please read the documentation <a class='text-white' href='https://coolify.io/docs/docker/swarm' target='_blank'>here</a>."
+                        helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/docker/swarm' target='_blank'>here</a>."
                         label="Is it a Swarm Worker?" />
                 @else
                     <x-forms.checkbox type="checkbox" instantSave id="is_swarm_worker"
-                        helper="For more information, please read the documentation <a class='text-white' href='https://coolify.io/docs/docker/swarm' target='_blank'>here</a>."
+                        helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/docker/swarm' target='_blank'>here</a>."
                         label="Is it a Swarm Worker?" />
                 @endif
                 @if ($is_swarm_worker && count($swarm_managers) > 0)
diff --git a/resources/views/livewire/server/proxy.blade.php b/resources/views/livewire/server/proxy.blade.php
index f2d9b839e..fc2e020c3 100644
--- a/resources/views/livewire/server/proxy.blade.php
+++ b/resources/views/livewire/server/proxy.blade.php
@@ -17,7 +17,7 @@
                             xmlns="http://www.w3.org/2000/svg">
                             <path fill="currentColor"
                                 d="M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71m-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73M116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0m28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16" />
-                        </svg>Before switching proxies, please read <a class="text-white underline"
+                        </svg>Before switching proxies, please read <a class="dark:text-white underline"
                             href="https://coolify.io/docs/server/switching-proxies">this</a>.</div>
                     @if ($server->proxyType() === 'TRAEFIK_V2')
                         <div class="pb-4">Traefik v2</div>
diff --git a/resources/views/livewire/server/proxy/dynamic-configuration-navbar.blade.php b/resources/views/livewire/server/proxy/dynamic-configuration-navbar.blade.php
index d8e859cad..a11ee20ae 100644
--- a/resources/views/livewire/server/proxy/dynamic-configuration-navbar.blade.php
+++ b/resources/views/livewire/server/proxy/dynamic-configuration-navbar.blade.php
@@ -1,5 +1,5 @@
 <div class="flex gap-2">
-    <h3 class="text-white">File: {{ str_replace('|', '.', $fileName) }}</h3>
+    <h3 class="dark:text-white">File: {{ str_replace('|', '.', $fileName) }}</h3>
     <div class="flex gap-2">
         <x-slide-over>
             <x-slot:title>Edit Configuration</x-slot:title>
diff --git a/resources/views/livewire/server/proxy/dynamic-configurations.blade.php b/resources/views/livewire/server/proxy/dynamic-configurations.blade.php
index 7d5aae932..347c5c9ad 100644
--- a/resources/views/livewire/server/proxy/dynamic-configurations.blade.php
+++ b/resources/views/livewire/server/proxy/dynamic-configurations.blade.php
@@ -31,7 +31,7 @@
                             <div class="flex flex-col gap-2 py-2">
                                 @if (str_replace('|', '.', $fileName) === 'coolify.yaml' || str_replace('|', '.', $fileName) === 'Caddyfile' || str_replace('|', '.', $fileName) === 'coolify.caddy' || str_replace('|', '.', $fileName) === 'default_redirect_404.caddy')
                                     <div>
-                                        <h3 class="text-white">File: {{ str_replace('|', '.', $fileName) }}</h3>
+                                        <h3 class="dark:text-white">File: {{ str_replace('|', '.', $fileName) }}</h3>
                                     </div>
                                     <x-forms.textarea disabled name="proxy_settings"
                                         wire:model="contents.{{ $fileName }}" rows="5" />
diff --git a/resources/views/livewire/server/resources.blade.php b/resources/views/livewire/server/resources.blade.php
index 080ea06d6..378547f1a 100644
--- a/resources/views/livewire/server/resources.blade.php
+++ b/resources/views/livewire/server/resources.blade.php
@@ -3,9 +3,9 @@
     @if ($server->isFunctional())
         <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'managed' }" class="flex h-full">
             <div class="flex flex-col gap-4">
-                <a :class="activeTab === 'managed' && 'text-white'"
+                <a :class="activeTab === 'managed' && 'dark:text-white'"
                     @click.prevent="activeTab = 'managed'; window.location.hash = 'managed'" href="#">Managed</a>
-                <a :class="activeTab === 'unmanaged' && 'text-white'"
+                <a :class="activeTab === 'unmanaged' && 'dark:text-white'"
                     @click.prevent="activeTab = 'unmanaged'; window.location.hash = 'unmanaged'"
                     href="#">Unmanaged</a>
             </div>
@@ -45,7 +45,7 @@
                                                 </thead>
                                                 <tbody class="divide-y divide-coolgray-400">
                                                     @forelse ($server->definedResources()->sortBy('name',SORT_NATURAL) as $resource)
-                                                        <tr class="text-white bg-coolblack hover:bg-coolgray-100">
+                                                        <tr class="dark:text-white bg-coolblack hover:bg-coolgray-100">
                                                             <td class="px-5 py-4 text-sm whitespace-nowrap">
                                                                 {{ data_get($resource->project(), 'name') }}
                                                             </td>
@@ -115,7 +115,7 @@
                                                 </thead>
                                                 <tbody class="divide-y divide-coolgray-400">
                                                     @forelse ($unmanagedContainers->sortBy('name',SORT_NATURAL) as $resource)
-                                                        <tr class="text-white bg-coolblack hover:bg-coolgray-100">
+                                                        <tr class="dark:text-white bg-coolblack hover:bg-coolgray-100">
                                                             <td class="px-5 py-4 text-sm whitespace-nowrap">
                                                                 {{ data_get($resource, 'Names') }}
                                                             </td>
diff --git a/resources/views/livewire/server/show-private-key.blade.php b/resources/views/livewire/server/show-private-key.blade.php
index cefb52f26..dcadabb8f 100644
--- a/resources/views/livewire/server/show-private-key.blade.php
+++ b/resources/views/livewire/server/show-private-key.blade.php
@@ -20,7 +20,7 @@
                 Currently attached Private Key:
                 <a
                     href="{{ route('security.private-key.show', ['private_key_uuid' => data_get($server, 'privateKey.uuid')]) }}">
-                    <button class="text-white btn-link">{{ data_get($server, 'privateKey.name') }}</button>
+                    <button class="dark:text-white btn-link">{{ data_get($server, 'privateKey.name') }}</button>
                 </a>
             </div>
         @else
diff --git a/resources/views/livewire/settings/index.blade.php b/resources/views/livewire/settings/index.blade.php
index ba56ca6fa..5ab89413d 100644
--- a/resources/views/livewire/settings/index.blade.php
+++ b/resources/views/livewire/settings/index.blade.php
@@ -2,14 +2,14 @@
     <x-settings.navbar />
     <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-1">
         <div class="flex flex-col gap-4 min-w-fit">
-            <a :class="activeTab === 'general' && 'text-white'"
+            <a :class="activeTab === 'general' && 'dark:text-white'"
                 @click.prevent="activeTab = 'general'; window.location.hash = 'general'" href="#">General</a>
-            <a :class="activeTab === 'backup' && 'text-white'"
+            <a :class="activeTab === 'backup' && 'dark:text-white'"
                 @click.prevent="activeTab = 'backup'; window.location.hash = 'backup'" href="#">Instance Backup</a>
-            <a :class="activeTab === 'smtp' && 'text-white'"
+            <a :class="activeTab === 'smtp' && 'dark:text-white'"
                 @click.prevent="activeTab = 'smtp'; window.location.hash = 'smtp'" href="#">Transactional
                 Email</a>
-            <a :class="activeTab === 'auth' && 'text-white'"
+            <a :class="activeTab === 'auth' && 'dark:text-white'"
                 @click.prevent="activeTab = 'auth'; window.location.hash = 'auth'" href="#">Authentication (OAuth)</a>
         </div>
         <div class="w-full pl-8">
diff --git a/resources/views/livewire/source/github/change.blade.php b/resources/views/livewire/source/github/change.blade.php
index 4d54d4d0a..c883c6e27 100644
--- a/resources/views/livewire/source/github/change.blade.php
+++ b/resources/views/livewire/source/github/change.blade.php
@@ -123,7 +123,7 @@
                                             </thead>
                                             <tbody class="divide-y divide-coolgray-400">
                                                 @forelse ($applications->sortBy('name',SORT_NATURAL) as $resource)
-                                                    <tr class="text-white bg-coolblack hover:bg-coolgray-100">
+                                                    <tr class="dark:text-white bg-coolblack hover:bg-coolgray-100">
                                                         <td class="px-5 py-4 text-sm whitespace-nowrap">
                                                             {{ data_get($resource->project(), 'name') }}
                                                         </td>
diff --git a/resources/views/livewire/subscription/actions.blade.php b/resources/views/livewire/subscription/actions.blade.php
index 8144d19b0..9166c948f 100644
--- a/resources/views/livewire/subscription/actions.blade.php
+++ b/resources/views/livewire/subscription/actions.blade.php
@@ -30,7 +30,7 @@
             </div>
         </div>
         <div class="pt-4">
-            If you have any problem, please <a class="text-white underline" href="{{ config('coolify.contact') }}"
+            If you have any problem, please <a class="dark:text-white underline" href="{{ config('coolify.contact') }}"
                 target="_blank">contact us.</a>
         </div>
     @endif
@@ -40,7 +40,7 @@
         @if (currentTeam()->subscription->lemon_status === 'cancelled')
             <div class="pb-4">Subscriptions ends at: {{ getRenewDate() }}</div>
             <div class="py-4">If you would like to change the subscription to a lower/higher plan, <a
-                    class="text-white underline" href="{{ config('coolify.contact') }}" target="_blank">please
+                    class="dark:text-white underline" href="{{ config('coolify.contact') }}" target="_blank">please
                     contact
                     us.</a></div>
         @else
@@ -56,10 +56,10 @@
                 @endif
             </div>
             <div>
-                <x-forms.button><a class="text-white hover:no-underline" href="{{ getPaymentLink() }}">Update Payment
+                <x-forms.button><a class="dark:text-white hover:no-underline" href="{{ getPaymentLink() }}">Update Payment
                         Details</a>
                 </x-forms.button>
-                <a class="text-white hover:no-underline"
+                <a class="dark:text-white hover:no-underline"
                     href="https://app.lemonsqueezy.com/my-orders"><x-forms.button>Manage My
                         Subscription</x-forms.button></a>
             </div>
diff --git a/resources/views/livewire/subscription/index.blade.php b/resources/views/livewire/subscription/index.blade.php
index 8141a5324..227b94ef7 100644
--- a/resources/views/livewire/subscription/index.blade.php
+++ b/resources/views/livewire/subscription/index.blade.php
@@ -29,7 +29,7 @@
                 <h1>Subscription</h1>
             </div>
             <div>You are not an admin or have been removed from this team. If this does not make sense, please <span
-                    class="text-white underline cursor-pointer" wire:click="help">contact
+                    class="dark:text-white underline cursor-pointer" wire:click="help">contact
                     us</span>.</div>
         </div>
     @endif
diff --git a/resources/views/livewire/tags/index.blade.php b/resources/views/livewire/tags/index.blade.php
index db55b37a5..e81866d32 100644
--- a/resources/views/livewire/tags/index.blade.php
+++ b/resources/views/livewire/tags/index.blade.php
@@ -26,16 +26,16 @@
                             @foreach ($applications as $application)
                                 <a href="{{ $application->link() }}" class="flex flex-col box group">
                                     <span
-                                        class="font-bold text-white">{{ $application->project()->name }}/{{ $application->environment->name }}</span>
-                                    <span class="text-white ">{{ $application->name }}</span>
+                                        class="font-bold dark:text-white">{{ $application->project()->name }}/{{ $application->environment->name }}</span>
+                                    <span class="dark:text-white ">{{ $application->name }}</span>
                                     <span class="description">{{ $application->description }}</span>
                                 </a>
                             @endforeach
                             @foreach ($services as $service)
                                 <a href="{{ $service->link() }}" class="flex flex-col box group">
                                     <span
-                                        class="font-bold text-white">{{ $service->project()->name }}/{{ $service->environment->name }}</span>
-                                    <span class="text-white ">{{ $service->name }}</span>
+                                        class="font-bold dark:text-white">{{ $service->project()->name }}/{{ $service->environment->name }}</span>
+                                    <span class="dark:text-white ">{{ $service->name }}</span>
                                     <span class="description">{{ $service->description }}</span>
                                 </a>
                             @endforeach
@@ -58,7 +58,7 @@
                                                 'border-yellow-500' => data_get($deployment, 'status') === 'in_progress',
                                             ])>
                                             <div class="flex flex-col mx-6">
-                                                <div class="font-bold text-white">
+                                                <div class="font-bold dark:text-white">
                                                     {{ data_get($deployment, 'application_name') }}
                                                 </div>
                                                 <div class="description">
diff --git a/resources/views/livewire/tags/show.blade.php b/resources/views/livewire/tags/show.blade.php
index 0bf8d1b43..bd1c4901f 100644
--- a/resources/views/livewire/tags/show.blade.php
+++ b/resources/views/livewire/tags/show.blade.php
@@ -30,16 +30,16 @@
             @foreach ($applications as $application)
                 <a href="{{ $application->link() }}" class="flex flex-col box group">
                     <span
-                        class="font-bold text-white">{{ $application->project()->name }}/{{ $application->environment->name }}</span>
-                    <span class="text-white ">{{ $application->name }}</span>
+                        class="font-bold dark:text-white">{{ $application->project()->name }}/{{ $application->environment->name }}</span>
+                    <span class="dark:text-white ">{{ $application->name }}</span>
                     <span class="description">{{ $application->description }}</span>
                 </a>
             @endforeach
             @foreach ($services as $service)
                 <a href="{{ $service->link() }}" class="flex flex-col box group">
                     <span
-                        class="font-bold text-white">{{ $service->project()->name }}/{{ $service->environment->name }}</span>
-                    <span class="text-white ">{{ $service->name }}</span>
+                        class="font-bold dark:text-white">{{ $service->project()->name }}/{{ $service->environment->name }}</span>
+                    <span class="dark:text-white ">{{ $service->name }}</span>
                     <span class="description">{{ $service->description }}</span>
                 </a>
             @endforeach
@@ -61,7 +61,7 @@
                             'border-yellow-500' => data_get($deployment, 'status') === 'in_progress',
                         ])>
                             <div class="flex flex-col mx-6">
-                                <div class="font-bold text-white">
+                                <div class="font-bold dark:text-white">
                                     {{ data_get($deployment, 'application_name') }}
                                 </div>
                                 <div class="description">
diff --git a/resources/views/livewire/team-shared-variables-index.blade.php b/resources/views/livewire/team-shared-variables-index.blade.php
index 06b1e8a70..795adc03c 100644
--- a/resources/views/livewire/team-shared-variables-index.blade.php
+++ b/resources/views/livewire/team-shared-variables-index.blade.php
@@ -13,7 +13,7 @@
     </div>
     <div class="flex items-center gap-2 pb-4">You can use these variables anywhere with <span
             class="text-warning">@{{ team.VARIABLENAME }}</span> <x-helper
-            helper="More info <a class='text-white underline' href='https://coolify.io/docs/environment-variables#shared-variables' target='_blank'>here</a>."></x-helper>
+            helper="More info <a class='underline dark:text-white' href='https://coolify.io/docs/environment-variables#shared-variables' target='_blank'>here</a>."></x-helper>
     </div>
 
     <div class="flex flex-col gap-2">
diff --git a/resources/views/livewire/team/index.blade.php b/resources/views/livewire/team/index.blade.php
index 40457986a..b057adc50 100644
--- a/resources/views/livewire/team/index.blade.php
+++ b/resources/views/livewire/team/index.blade.php
@@ -23,7 +23,7 @@
         @elseif(auth()->user()->teams()->get()->count() === 1 || auth()->user()->currentTeam()->personal_team)
             <div>You can't delete your last / personal team.</div>
         @elseif(currentTeam()->subscription && currentTeam()->subscription?->lemon_status !== 'cancelled')
-            <div>Please cancel your subscription <a class="text-white underline"
+            <div>Please cancel your subscription <a class="dark:text-white underline"
                     href="{{ route('subscription.show') }}">here</a> before delete this team.</div>
         @else
             @if (currentTeam()->isEmpty())
diff --git a/resources/views/livewire/team/invitations.blade.php b/resources/views/livewire/team/invitations.blade.php
index 395be07c1..c9ca4d6b7 100644
--- a/resources/views/livewire/team/invitations.blade.php
+++ b/resources/views/livewire/team/invitations.blade.php
@@ -22,7 +22,7 @@
                                 </thead>
                                 <tbody class="divide-y divide-coolgray-400">
                                     @foreach ($invitations as $invite)
-                                        <tr class="text-white bg-coolblack hover:bg-coolgray-100/40">
+                                        <tr class="dark:text-white bg-coolblack hover:bg-coolgray-100/40">
                                             <td class="px-5 py-4 text-sm whitespace-nowrap">{{ $invite->email }}</td>
                                             <td class="px-5 py-4 text-sm whitespace-nowrap">{{ $invite->via }}</td>
                                             <td class="px-5 py-4 text-sm whitespace-nowrap">{{ $invite->role }}</td>
diff --git a/resources/views/livewire/team/member.blade.php b/resources/views/livewire/team/member.blade.php
index bc8f54be7..e30862e19 100644
--- a/resources/views/livewire/team/member.blade.php
+++ b/resources/views/livewire/team/member.blade.php
@@ -1,5 +1,5 @@
 <tr @class([
-    'text-white bg-coolblack hover:bg-coolgray-100',
+    'dark:text-white bg-coolblack hover:bg-coolgray-100',
     'bg-coolgray-100' => $member->id == auth()->user()->id,
 ])>
     <td class="px-5 py-4 text-sm whitespace-nowrap">
diff --git a/resources/views/livewire/team/storage/index.blade.php b/resources/views/livewire/team/storage/index.blade.php
index 37f4151cc..af8289bf9 100644
--- a/resources/views/livewire/team/storage/index.blade.php
+++ b/resources/views/livewire/team/storage/index.blade.php
@@ -10,17 +10,17 @@
             <button @click="slideOverOpen=true" class="button">+
                 Add</button>
         </x-slide-over>
-        {{-- <a class="text-white hover:no-underline" href="/team/storages/new"> <x-forms.button>+ Add
+        {{-- <a class="dark:text-white hover:no-underline" href="/team/storages/new"> <x-forms.button>+ Add
             </x-forms.button></a> --}}
     </div>
     <div class="grid gap-2 lg:grid-cols-2">
         @forelse ($s3 as $storage)
             <div x-data x-on:click="goto('{{ $storage->uuid }}')" @class(['gap-2 border cursor-pointer box group border-transparent'])>
                 <div class="flex flex-col mx-6">
-                    <div class=" group-hover:text-white">
+                    <div class=" group-hover:dark:text-white">
                         {{ $storage->name }}
                     </div>
-                    <div class="text-xs group-hover:text-white">
+                    <div class="text-xs group-hover:dark:text-white">
                         {{ $storage->description }}</div>
                 </div>
             </div>
diff --git a/resources/views/livewire/waitlist/index.blade.php b/resources/views/livewire/waitlist/index.blade.php
index bfbe9a255..8bf2aed1c 100644
--- a/resources/views/livewire/waitlist/index.blade.php
+++ b/resources/views/livewire/waitlist/index.blade.php
@@ -2,7 +2,7 @@
     <div class="w-96 min-w-fit">
         <div class="flex flex-col items-center pb-8">
             <a href="{{ route('dashboard') }}">
-                <div class="text-5xl font-bold tracking-tight text-center text-white">Coolify</div>
+                <div class="text-5xl font-bold tracking-tight text-center dark:text-white">Coolify</div>
             </a>
         </div>
         <div class="flex items-center justify-center pb-4 text-center">
diff --git a/resources/views/security/index.blade.php b/resources/views/security/index.blade.php
index 05d2ac0fb..f964b68fa 100644
--- a/resources/views/security/index.blade.php
+++ b/resources/views/security/index.blade.php
@@ -1,7 +1,7 @@
 <x-layout>
     <x-security.navbar />
     <a class="text-center hover:no-underline group" href="{{ route('security.private-key.index') }}">
-        <div class="group-hover:text-white">
+        <div class="group-hover:dark:text-white">
             <div>Private Keys</div>
         </div>
     </a>
diff --git a/resources/views/security/private-key/index.blade.php b/resources/views/security/private-key/index.blade.php
index 30d8ad2e1..5ef4c722e 100644
--- a/resources/views/security/private-key/index.blade.php
+++ b/resources/views/security/private-key/index.blade.php
@@ -15,7 +15,7 @@
         @forelse ($privateKeys as $key)
             <a class="text-center hover:no-underline box group"
                 href="{{ route('security.private-key.show', ['private_key_uuid' => data_get($key, 'uuid')]) }}">
-                <div class="group-hover:text-white">
+                <div class="group-hover:dark:text-white">
                     <div>{{ $key->name }}</div>
                 </div>
             </a>
diff --git a/resources/views/source/all.blade.php b/resources/views/source/all.blade.php
index 7874a1c6d..c564d1316 100644
--- a/resources/views/source/all.blade.php
+++ b/resources/views/source/all.blade.php
@@ -16,8 +16,8 @@
             @if ($source->getMorphClass() === 'App\Models\GithubApp')
                 <a class="flex gap-4 text-center hover:no-underline box group"
                     href="{{ route('source.github.show', ['github_app_uuid' => data_get($source, 'uuid')]) }}">
-                    <x-git-icon class="text-white w-9 h-9" git="{{ $source->getMorphClass() }}" />
-                    <div class="text-left group-hover:text-white">
+                    <x-git-icon class="dark:text-white w-9 h-9" git="{{ $source->getMorphClass() }}" />
+                    <div class="text-left group-hover:dark:text-white">
                         <div>{{ $source->name }}</div>
                         @if (is_null($source->app_id))
                             <span class="text-error">Configuration is not finished</span>
@@ -28,8 +28,8 @@
             @if ($source->getMorphClass() === 'App\Models\GitlabApp')
                 <a class="flex gap-4 text-center hover:no-underline box group"
                     href="{{ route('source.gitlab.show', ['gitlab_app_uuid' => data_get($source, 'uuid')]) }}">
-                    <x-git-icon class="text-white w-9 h-9" git="{{ $source->getMorphClass() }}" />
-                    <div class="text-left group-hover:text-white">
+                    <x-git-icon class="dark:text-white w-9 h-9" git="{{ $source->getMorphClass() }}" />
+                    <div class="text-left group-hover:dark:text-white">
                         <div>{{ $source->name }}</div>
                         @if (is_null($source->app_id))
                             <span class="text-error">Configuration is not finished</span>
diff --git a/resources/views/source/new.blade.php b/resources/views/source/new.blade.php
index d91b3a9de..29359c5d7 100644
--- a/resources/views/source/new.blade.php
+++ b/resources/views/source/new.blade.php
@@ -3,12 +3,12 @@
     <div class="subtitle ">Add source providers for your applications.</div>
     <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'github' }">
         {{-- <div class="flex justify-center h-full gap-2 pb-6">
-            <a class="flex items-center justify-center w-1/2 p-2 transition-colors rounded-none min-h-12 bg-coolgray-200 hover:bg-coollabs-100 hover:text-white hover:no-underline"
-                :class="activeTab === 'github' && 'bg-coollabs text-white'"
+            <a class="flex items-center justify-center w-1/2 p-2 transition-colors rounded-none min-h-12 bg-coolgray-200 hover:bg-coollabs-100 hover:dark:text-white hover:no-underline"
+                :class="activeTab === 'github' && 'bg-coollabs dark:text-white'"
                 @click.prevent="activeTab = 'github'; window.location.hash = 'github'" href="#">GitHub
             </a>
-            <a class="flex items-center justify-center w-1/2 p-2 transition-colors rounded-none min-h-12 bg-coolgray-200 hover:bg-coollabs-100 hover:text-white hover:no-underline"
-                :class="activeTab === 'gitlab' && 'bg-coollabs text-white'"
+            <a class="flex items-center justify-center w-1/2 p-2 transition-colors rounded-none min-h-12 bg-coolgray-200 hover:bg-coollabs-100 hover:dark:text-white hover:no-underline"
+                :class="activeTab === 'gitlab' && 'bg-coollabs dark:text-white'"
                 @click.prevent="activeTab = 'gitlab'; window.location.hash = 'gitlab'" href="#">GitLab
             </a>
         </div> --}}