diff --git a/resources/css/app.css b/resources/css/app.css
index d2f06102e..ffea7a63a 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -41,7 +41,7 @@ option {
 }
 
 .button {
-    @apply flex items-center justify-center gap-2 px-3 py-1 text-sm font-bold text-white normal-case rounded cursor-pointer hover:bg-black/80 bg-coolgray-200 hover:bg-coolgray-100 hover:text-white disabled:bg-coolgray-100/10 disabled:cursor-not-allowed min-w-fit focus:outline-1 dark:disabled:text-neutral-600;
+    @apply flex items-center justify-center gap-2 px-3 py-1 text-sm text-white normal-case rounded cursor-pointer hover:bg-black/80 bg-coolgray-200 hover:bg-coolgray-500 hover:text-white disabled:bg-coolgray-100/10 disabled:cursor-not-allowed min-w-fit focus:outline-1 dark:disabled:text-neutral-600;
 }
 
 button[isError]:not(:disabled) {
@@ -118,7 +118,10 @@ tr td:first-child {
 }
 
 .dropdown-item {
-    @apply relative flex cursor-pointer select-none dark:text-white hover:bg-neutral-300 dark:hover:bg-coollabs items-center pr-4 pl-2 py-1 text-xs justify-start outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 gap-2 w-full;
+    @apply relative flex cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs items-center pr-4 pl-2 py-1 text-xs justify-start outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 gap-2 w-full;
+}
+.dropdown-item-no-padding {
+    @apply relative flex cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs items-center py-1 text-xs justify-start outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 gap-2 w-full;
 }
 
 .badge {
@@ -187,7 +190,10 @@ tr td:first-child {
 }
 
 .box {
-    @apply flex lg:flex-row flex-col 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;
+    @apply flex lg:flex-row flex-col 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-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:no-underline;
+}
+.box-boarding {
+    @apply flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 dark:text-white bg-neutral-50 border border-neutral-200 dark:border-black hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:text-black hover:no-underline text-black;
 }
 
 .on-box {
diff --git a/resources/views/components/boarding-step.blade.php b/resources/views/components/boarding-step.blade.php
index 98ec53ad6..d963e55f0 100644
--- a/resources/views/components/boarding-step.blade.php
+++ b/resources/views/components/boarding-step.blade.php
@@ -1,5 +1,5 @@
 <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
-    <div class="box-border col-span-2 lg:min-w-[24rem] min-h-[21rem]">
+    <div class="box-border col-span-2 lg:min-w-[24rem] lg:min-h-[21rem]">
         <h1 class="text-2xl font-bold lg:text-5xl">{{ $title }}</h1>
         <div class="py-6">
             @isset($question)
@@ -16,7 +16,7 @@
     </div>
     @isset($explanation)
         <div class="col-span-1">
-            <h1 class="pb-8 font-bold">Explanation</h1>
+            <h3 class="pb-8 font-bold">Explanation</h3>
             <div class="space-y-4">
                 {{ $explanation }}
             </div>
diff --git a/resources/views/components/dropdown.blade.php b/resources/views/components/dropdown.blade.php
index 097a490ab..0eb8086a1 100644
--- a/resources/views/components/dropdown.blade.php
+++ b/resources/views/components/dropdown.blade.php
@@ -2,11 +2,11 @@
     dropdownOpen: false
 }" class="relative" @click.outside="dropdownOpen = false">
     <button @click="dropdownOpen=true"
-        class="inline-flex items-center justify-start pr-10 transition-colors focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
+        class="inline-flex items-center justify-start pr-8 transition-colors focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
         <span class="flex flex-col items-start h-full leading-none">
             {{ $title }}
         </span>
-        <svg class="absolute right-0 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+        <svg class="absolute right-0 w-4 h-4 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
             stroke-width="1.5" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round"
                 d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
@@ -16,7 +16,7 @@
     <div x-show="dropdownOpen" @click.away="dropdownOpen=false" x-transition:enter="ease-out duration-200"
         x-transition:enter-start="-translate-y-2" x-transition:enter-end="translate-y-0"
         class="absolute top-0 z-50 mt-6 min-w-max" x-cloak>
-        <div class="p-1 mt-1 border dark:bg-coolgray-200 bg-neutral-200 dark:border-black border-neutral-300">
+        <div class="p-1 mt-1 bg-white border rounded shadow dark:bg-coolgray-200 dark:border-black border-neutral-300">
             {{ $slot }}
         </div>
     </div>
diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index e4119ba3b..07f0e885e 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -1,20 +1,72 @@
-<nav class="flex flex-col flex-1 pl-2 bg-white border-r dark:border-coolgray-200 dark:bg-base">
+<nav class="flex flex-col flex-1 pl-2 bg-white border-r dark:border-coolgray-200 dark:bg-base" x-data="{
+    init() {
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+                const userSettings = localStorage.getItem('theme');
+                if (userSettings !== 'system') {
+                    return;
+                }
+                if (e.matches) {
+                    document.documentElement.classList.add('dark');
+                } else {
+                    document.documentElement.classList.remove('dark');
+                }
+            });
+            this.queryTheme();
+        },
+        setTheme(type) {
+            this.theme = type;
+            localStorage.setItem('theme', type);
+            this.queryTheme();
+        },
+        queryTheme() {
+            const darkModePreference = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            const userSettings = localStorage.getItem('theme') || 'dark';
+            localStorage.setItem('theme', userSettings);
+            if (userSettings === 'dark') {
+                document.documentElement.classList.add('dark');
+                this.theme = 'dark';
+            } else if (userSettings === 'light') {
+                document.documentElement.classList.remove('dark');
+                this.theme = 'light';
+            } else if (darkModePreference) {
+                this.theme = 'system';
+                document.documentElement.classList.add('dark');
+            } else if (!darkModePreference) {
+                this.theme = 'system';
+                document.documentElement.classList.remove('dark');
+            }
+        }
+}">
     <div class="flex pt-6 pb-4 pl-3">
         <div class="flex flex-col w-full">
             <div class="text-2xl font-bold tracking-wide dark:text-white">Coolify</div>
             <x-version />
         </div>
-        <button class="flex items-start w-12 pt-1 transition-all duration-200" onclick="changeTheme()">
-            <svg class="hidden w-5 h-5 rounded dark:block fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                <path
-                    d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
-            </svg>
+        <div class="pt-1">
+            <x-dropdown>
+                <x-slot:title>
+                    <div class="flex justify-end w-8" x-show="theme === 'dark' || theme === 'system'">
+                        <svg class="w-5 h-5 rounded dark:fill-white" xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 24 24">
+                            <path
+                                d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
+                        </svg>
+                    </div>
+                    <div class="flex justify-end w-8" x-show="theme === 'light'">
+                        <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                            <path
+                                d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
+                        </svg>
+                    </div>
+                </x-slot:title>
+                <div class="flex flex-col gap-1">
+                    <button @click="setTheme('dark')" class="px-1 dropdown-item-no-padding">Dark</button>
+                    <button @click="setTheme('light')" class="px-1 dropdown-item-no-padding">Light</button>
+                    <button @click="setTheme('system')" class="px-1 dropdown-item-no-padding">System</button>
+                </div>
+            </x-dropdown>
+        </div>
 
-            <svg class="block w-5 h-5 dark:hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                <path
-                    d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
-            </svg>
-        </button>
     </div>
     <div class="px-2 pt-2 pb-7">
         <livewire:switch-team />
diff --git a/resources/views/components/version.blade.php b/resources/views/components/version.blade.php
index 4f631f4b2..d8dd9ebab 100644
--- a/resources/views/components/version.blade.php
+++ b/resources/views/components/version.blade.php
@@ -1,2 +1,2 @@
-<a {{ $attributes->merge(['class' => 'text-xs cursor-pointer opacity-90 hover:opacity-100 dark:hover:text-white hover:text-black z-[60]']) }}
+<a {{ $attributes->merge(['class' => 'text-xs cursor-pointer opacity-90 hover:opacity-100 dark:hover:text-white hover:text-black']) }}
     href="https://github.com/coollabsio/coolify/releases/tag/v{{ config('version') }}">v{{ config('version') }}</a>
diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php
index 1f02fd95c..5ad073569 100644
--- a/resources/views/layouts/base.blade.php
+++ b/resources/views/layouts/base.blade.php
@@ -40,20 +40,15 @@
     <body>
         <x-toast />
         <script data-navigate-once>
-            if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia(
-                    '(prefers-color-scheme: dark)').matches)) {
+            if (localStorage.theme === 'dark') {
                 document.documentElement.classList.add('dark')
-            } else {
+            } else if (localStorage.theme === 'light') {
                 document.documentElement.classList.remove('dark')
-            }
-
-            function changeTheme() {
-                if (localStorage.theme === 'dark') {
-                    localStorage.theme = 'light'
-                    document.documentElement.classList.remove('dark')
-                } else {
-                    localStorage.theme = 'dark'
+            } else {
+                if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
                     document.documentElement.classList.add('dark')
+                } else {
+                    document.documentElement.classList.remove('dark')
                 }
             }
             @auth
diff --git a/resources/views/layouts/boarding.blade.php b/resources/views/layouts/boarding.blade.php
index 4a897ff2f..67c1cc998 100644
--- a/resources/views/layouts/boarding.blade.php
+++ b/resources/views/layouts/boarding.blade.php
@@ -1,6 +1,6 @@
 @extends('layouts.base')
 @section('body')
-    <main class="h-full bg-gray-50 dark:bg-base">
+    <main class="h-full">
         {{ $slot }}
     </main>
     @parent
diff --git a/resources/views/livewire/boarding/index.blade.php b/resources/views/livewire/boarding/index.blade.php
index 50684cc65..34ae23591 100644
--- a/resources/views/livewire/boarding/index.blade.php
+++ b/resources/views/livewire/boarding/index.blade.php
@@ -1,11 +1,11 @@
 @php use App\Enums\ProxyTypes; @endphp
 <section class="flex flex-col h-full lg:items-center lg:justify-center">
-    <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto max-w-7xl lg:py-0">
+    <div class="flex flex-col items-center justify-center p-10 mx-2 mt-10 bg-white border rounded-lg shadow lg:p-20 dark:bg-transparent dark:border-none max-w-7xl ">
         @if ($currentState === 'welcome')
             <h1 class="text-3xl font-bold lg:text-5xl">Welcome to Coolify</h1>
-            <p class="py-6 text-base text-center lg:text-xl">Let me help you set up the basics.</p>
+            <div class="py-6 text-center lg:text-xl">Let me help you set up the basics.</div>
             <div class="flex justify-center ">
-                <x-forms.button class="justify-center w-64 box" wire:click="$set('currentState','explanation')">Get
+                <x-forms.button class="justify-center w-64 box-boarding" wire:click="$set('currentState','explanation')">Get
                     Started
                 </x-forms.button>
             </div>
@@ -33,7 +33,7 @@
                         Telegram, Email, etc.) when something goes wrong, or an action is needed from your side.</p>
                 </x-slot:explanation>
                 <x-slot:actions>
-                    <x-forms.button class="justify-center lg:w-64 box" wire:click="explanation">Next
+                    <x-forms.button class="justify-center lg:w-64 box-boarding" wire:click="explanation">Next
                     </x-forms.button>
                 </x-slot:actions>
             </x-boarding-step>
@@ -44,11 +44,11 @@
                     or to a <x-highlighted text="Remote Server" />?
                 </x-slot:question>
                 <x-slot:actions>
-                    <x-forms.button class="justify-center w-64 box" wire:target="setServerType('localhost')"
+                    <x-forms.button class="justify-center w-64 box-boarding" wire:target="setServerType('localhost')"
                         wire:click="setServerType('localhost')">Localhost
                     </x-forms.button>
 
-                    <x-forms.button class="justify-center w-64 box " wire:target="setServerType('remote')"
+                    <x-forms.button class="justify-center w-64 box-boarding " wire:target="setServerType('remote')"
                         wire:click="setServerType('remote')">Remote Server
                     </x-forms.button>
                     @if (!$serverReachable)
@@ -62,7 +62,7 @@
                         Check this <a target="_blank" class="underline"
                             href="https://coolify.io/docs/server/openssh">documentation</a> for further help.
                         <x-forms.input readonly id="serverPublicKey"></x-forms.input>
-                        <x-forms.button class="lg:w-64 box" wire:target="setServerType('localhost')"
+                        <x-forms.button class="lg:w-64 box-boarding" wire:target="setServerType('localhost')"
                             wire:click="setServerType('localhost')">Check again
                         </x-forms.button>
                     @endif
@@ -85,10 +85,10 @@
                     Do you have your own SSH Private Key?
                 </x-slot:question>
                 <x-slot:actions>
-                    <x-forms.button class="justify-center lg:w-64 box" wire:target="setPrivateKey('own')"
+                    <x-forms.button class="justify-center lg:w-64 box-boarding" wire:target="setPrivateKey('own')"
                         wire:click="setPrivateKey('own')">Yes
                     </x-forms.button>
-                    <x-forms.button class="justify-center lg:w-64 box" wire:target="setPrivateKey('create')"
+                    <x-forms.button class="justify-center lg:w-64 box-boarding" wire:target="setPrivateKey('create')"
                         wire:click="setPrivateKey('create')">No (create one for me)
                     </x-forms.button>
                     @if (count($privateKeys) > 0)
@@ -120,7 +120,7 @@
                 <x-slot:actions>
                     <div class="flex flex-col gap-4">
                         <div>
-                            <x-forms.button class="justify-center w-64 box" wire:click="createNewServer">No (create
+                            <x-forms.button class="justify-center w-64 box-boarding" wire:click="createNewServer">No (create
                                 one
                                 for
                                 me)
@@ -146,7 +146,7 @@
                         'root' or skip the boarding process and add a new private key manually to Coolify and to the
                         server.
                         <x-forms.input readonly id="serverPublicKey"></x-forms.input>
-                        <x-forms.button class="w-64 box" wire:target="validateServer" wire:click="validateServer">Check
+                        <x-forms.button class="w-64 box-boarding" wire:target="validateServer" wire:click="validateServer">Check
                             again
                         </x-forms.button>
                     @endif
@@ -236,7 +236,7 @@
                         <x-slot:content>
                             <livewire:server.validate-and-install :server="$this->createdServer" />
                         </x-slot:content>
-                        <x-forms.button @click="slideOverOpen=true" class="w-full font-bold box lg:w-96"
+                        <x-forms.button @click="slideOverOpen=true" class="w-full font-bold box-boarding lg:w-96"
                             wire:click.prevent='installServer' isHighlighted>
                             Let's do it!
                         </x-forms.button>
@@ -263,7 +263,7 @@
                     @endif
                 </x-slot:question>
                 <x-slot:actions>
-                    <x-forms.button class="justify-center w-64 box" wire:click="createNewProject">Create new
+                    <x-forms.button class="justify-center w-64 box-boarding" wire:click="createNewProject">Create new
                         project!</x-forms.button>
                     <div>
                         @if (count($projects) > 0)
@@ -292,7 +292,7 @@
                     Let's go to the new resource page, where you can create your first resource.
                 </x-slot:question>
                 <x-slot:actions>
-                    <div class="items-center justify-center w-64 box" wire:click="showNewResource">Let's do
+                    <div class="items-center justify-center w-64 box-boarding" wire:click="showNewResource">Let's do
                         it!</div>
                 </x-slot:actions>
                 <x-slot:explanation>
diff --git a/resources/views/livewire/layout-popups.blade.php b/resources/views/livewire/layout-popups.blade.php
index fb95bca9e..43de765a9 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 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>
+                        class="text-xs underline dark:text-white">GitHub</a> or <a href="https://opencollective.com/coollabsio"
+                        class="text-xs underline dark:text-white">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="dark:text-white underline">/subscription</a> to update your subscription or remove some servers.
+                    class="underline dark:text-white">/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="dark:text-white underline">/notification</a> to
+                        href="{{ route('notifications.email') }}" class="underline dark:text-white">/notification</a> to
                     enable notifications.</span>
         </x-slot:description>
         <x-slot:button-text @click="disableNotification()">