diff --git a/app/View/Components/Forms/Select.php b/app/View/Components/Forms/Select.php
index 99bcf1873..40279bea6 100644
--- a/app/View/Components/Forms/Select.php
+++ b/app/View/Components/Forms/Select.php
@@ -19,7 +19,7 @@ class Select extends Component
         public ?string $label = null,
         public ?string $helper = null,
         public bool    $required = false,
-        public string  $defaultClass = "block w-full py-1.5 rounded border-0 text-sm ring-inset ring-1 dark:ring-coolgray-300 dark:placeholder:text-neutral-700 focus:ring-2 focus:ring-inset dark:focus:ring-coolgray-500 dark:bg-coolgray-100 dark:text-white text-black "
+        public string  $defaultClass = "select"
     ) {
         //
     }
diff --git a/resources/css/app.css b/resources/css/app.css
index e66a22991..e9737dced 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -11,8 +11,28 @@ body {
     @apply text-sm antialiased scrollbar;
 }
 
+.input, .select  {
+    @apply text-black dark:bg-coolgray-100 dark:text-white ring-neutral-300 dark:ring-coolgray-300 ;
+}
+/* Readonly */
+.input  {
+    @apply dark:read-only:text-neutral-500 dark:read-only:ring-0 dark:read-only:bg-coolgray-100/40 placeholder:text-neutral-300 dark:placeholder:text-neutral-700;
+}
+/* Focus */
+.input, .select  {
+    @apply focus:ring-2 dark:focus:ring-coolgray-300 focus:ring-neutral-400;
+}
+
+.input, .select {
+    @apply block w-full py-1.5 rounded border-0 text-sm pr-10 ring-1 ring-inset;
+}
+
+option {
+    @apply 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 dark:disabled:bg-coolgray-100/40 dark:disabled:text-neutral-800 min-w-fit;
+    @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;
 }
 button[isError]:not(:disabled) {
     @apply bg-red-600 hover:bg-red-700;
@@ -79,18 +99,6 @@ tr td:first-child {
     @apply pl-4 pr-3 font-bold sm:pl-6;
 }
 
-input {
-    @apply pr-10;
-}
-
-.input {
-    @apply block w-full py-1.5 rounded border-0 text-sm ring-inset ring-1 dark:bg-coolgray-100 dark:text-white text-black focus:ring-2 dark:focus:ring-coolgray-300 dark:ring-coolgray-300 dark:read-only:text-neutral-500 dark:read-only:ring-0 dark:read-only:bg-coolgray-100/40 dark:placeholder:text-neutral-700;
-}
-
-option {
-    @apply text-white;
-}
-
 .alert-success {
     @apply flex items-center gap-2 text-success;
 }
@@ -136,12 +144,10 @@ option {
 }
 
 .icon {
-    @apply w-6 h-6;
+    @apply w-6 h-6 hover:text-white;
 }
 
-.icon:hover {
-    @apply text-white;
-}
+
 
 .scrollbar {
     @apply scrollbar-thumb-coollabs-100 scrollbar-track-coolgray-200 scrollbar-w-2;
@@ -167,11 +173,12 @@ option {
     @apply px-2 text-xs border border-dashed rounded border-neutral-700 text-warning;
 }
 
-
-
-
 .box {
-    @apply flex p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 bg-neutral-50 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-neutral-100 hover:bg-neutral-200 dark:hover:bg-coollabs-100 dark:hover:text-white hover:no-underline;
+}
+
+.on-box {
+    @apply rounded hover:bg-neutral-300 dark:hover:bg-coolgray-500/20;
 }
 
 .box-without-bg {
@@ -223,7 +230,13 @@ option {
 }
 
 .text-helper {
-    @apply inline-block font-bold text-warning;
+    @apply inline-block font-bold text-coollabs 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;
 }
 
 .buyme {
diff --git a/resources/views/components/helper.blade.php b/resources/views/components/helper.blade.php
index df37bf086..378892b85 100644
--- a/resources/views/components/helper.blade.php
+++ b/resources/views/components/helper.blade.php
@@ -1,11 +1,11 @@
 <div class="group">
-    <div class="cursor-pointer text-warning">
+    <div class="info-helper">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 stroke-current">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                 d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
         </svg>
     </div>
-    <div class="absolute z-40 hidden text-xs rounded group-hover:block border-coolgray-400 bg-coolgray-500">
+    <div class="info-helper-popup">
         <div class="p-4">
             {!! $helper !!}
         </div>
diff --git a/resources/views/components/highlighted.blade.php b/resources/views/components/highlighted.blade.php
index 5a7b830d2..ebcc7ec0f 100644
--- a/resources/views/components/highlighted.blade.php
+++ b/resources/views/components/highlighted.blade.php
@@ -1 +1 @@
-<span class="inline-block font-bold text-warning">{{ $text }}</span>
+<span class="text-helper">{{ $text }}</span>
diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index 9da3816a7..481c68e83 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -1,4 +1,4 @@
-<nav class="flex flex-col flex-1 pl-4 border-r dark:border-coolgray-200 dark:bg-base bg-neutral-50">
+<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">
         <div class="flex flex-col">
             <div class="text-2xl font-bold tracking-wide dark:text-white">Coolify</div>
@@ -6,7 +6,7 @@
         </div>
         {{-- <button onclick="changeTheme()">Dark/light</button> --}}
     </div>
-    <div class="px-2 pt-2 pb-6">
+    <div class="px-2 pt-2 pb-7">
         <livewire:switch-team />
     </div>
     <ul role="list" class="flex flex-col flex-1 gap-y-7">
diff --git a/resources/views/components/team/navbar.blade.php b/resources/views/components/team/navbar.blade.php
index 7020b270d..67de96544 100644
--- a/resources/views/components/team/navbar.blade.php
+++ b/resources/views/components/team/navbar.blade.php
@@ -1,14 +1,9 @@
 <div class="pb-6">
     <div class="flex items-end gap-2">
         <h1>Team</h1>
-        <x-slide-over>
-            <x-slot:title>New Team</x-slot:title>
-            <x-slot:content>
-                <livewire:team.create/>
-            </x-slot:content>
-            <button @click="slideOverOpen=true" class="button">+
-                Add</button>
-        </x-slide-over>
+        <x-modal-input buttonTitle="+ Add" title="New Team">
+            <livewire:team.create/>
+        </x-modal-input>
     </div>
     <div class="subtitle">Team settings & shared environment variables.</div>
     <nav class="navbar-main">
diff --git a/resources/views/components/toast.blade.php b/resources/views/components/toast.blade.php
index df0d224e0..297737875 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 bg-coolgray-100 border 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-neutral-100 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">
@@ -417,7 +417,7 @@
                                             d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM11.9996 7C12.5519 7 12.9996 7.44772 12.9996 8V12C12.9996 12.5523 12.5519 13 11.9996 13C11.4474 13 10.9996 12.5523 10.9996 12V8C10.9996 7.44772 11.4474 7 11.9996 7ZM12.001 14.99C11.4488 14.9892 11.0004 15.4363 10.9997 15.9886L10.9996 15.9986C10.9989 16.5509 11.446 16.9992 11.9982 17C12.5505 17.0008 12.9989 16.5537 12.9996 16.0014L12.9996 15.9914C13.0004 15.4391 12.5533 14.9908 12.001 14.99Z"
                                             fill="currentColor"></path>
                                     </svg>
-                                    <p class="leading-2 text-neutral-200" x-html="toast.message">
+                                    <p class="text-black leading-2 dark:text-neutral-200" x-html="toast.message">
                                     </p>
                                 </div>
                                 <div x-show="toast.description" :class="{ 'pl-5': toast.type!='default' }"
@@ -438,7 +438,7 @@
                             Copied
                         </span>
                         <span @click="copyToClipboard()"
-                            class="absolute right-7 p-1.5 mr-2.5 text-neutral-400 duration-100 ease-in-out rounded-full opacity-0 cursor-pointer hover:bg-coolgray-400 hover:text-neutral-300"
+                            class="absolute right-7 p-1.5 mr-2.5 text-neutral-700 hover:text-neutral-900 dark:text-neutral-400 hover:bg-neutral-300  duration-100 ease-in-out rounded-full opacity-0 cursor-pointer dark:hover:bg-coolgray-400 dark:hover:text-neutral-300"
                             :class="{
                                 'top-1/2 -translate-y-1/2': !toast.description && !toast.html,
                                 'top-0 mt-3': (toast
@@ -455,7 +455,7 @@
                             </svg>
                         </span>
                         <span @click="burnToast(toast.id)"
-                            class="absolute right-0 p-1.5 mr-2.5 text-neutral-400 duration-100 ease-in-out rounded-full opacity-0 cursor-pointer hover:bg-coolgray-400 hover:text-neutral-300"
+                            class="absolute right-0 p-1.5 mr-2.5 text-neutral-700 hover:text-neutral-900 dark:text-neutral-400 duration-100 ease-in-out rounded-full opacity-0 cursor-pointer hover:bg-neutral-300 dark:hover:bg-coolgray-400 dark:hover:text-neutral-300"
                             :class="{
                                 'top-1/2 -translate-y-1/2': !toast.description && !toast.html,
                                 'top-0 mt-3.5': (toast
diff --git a/resources/views/livewire/dashboard.blade.php b/resources/views/livewire/dashboard.blade.php
index 777624fe3..06737c53c 100644
--- a/resources/views/livewire/dashboard.blade.php
+++ b/resources/views/livewire/dashboard.blade.php
@@ -39,12 +39,12 @@
                         <a class="mx-4 rounded hover:no-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 group-hover:dark:text-white group-hover:text-black dark:hover:bg-coollabs hover:bg-neutral-300">+
+                                class="p-2 font-bold on-box">+
                                 Add Resource</span>
                         </a>
-                        <a class="mx-4 rounded group-hover:dark:text-white group-hover:text-black"
+                        <a class="mx-4"
                             href="{{ route('project.edit', ['project_uuid' => data_get($project, 'uuid')]) }}">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="icon hover:bg-coollabs" viewBox="0 0 24 24"
+                            <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" />
diff --git a/resources/views/livewire/profile/index.blade.php b/resources/views/livewire/profile/index.blade.php
index 8f4dfe62b..b179f0499 100644
--- a/resources/views/livewire/profile/index.blade.php
+++ b/resources/views/livewire/profile/index.blade.php
@@ -12,7 +12,7 @@
         </div>
     </form>
     <form wire:submit='resetPassword' class="flex flex-col max-w-xl pt-4">
-        <div class="flex items-center gap-2">
+        <div class="flex items-center gap-2 pb-2">
             <h2>Change Password</h2>
             <x-forms.button type="submit" label="Save">Save</x-forms.button>
         </div>
diff --git a/resources/views/livewire/project/edit.blade.php b/resources/views/livewire/project/edit.blade.php
index c12a94eb8..6860f3328 100644
--- a/resources/views/livewire/project/edit.blade.php
+++ b/resources/views/livewire/project/edit.blade.php
@@ -26,7 +26,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">@{{ project.VARIABLENAME }}</span><x-helper
+            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>
     </div>
     <div class="flex flex-col gap-2">
diff --git a/resources/views/livewire/project/index.blade.php b/resources/views/livewire/project/index.blade.php
index f7c6e91ba..a4ab515f0 100644
--- a/resources/views/livewire/project/index.blade.php
+++ b/resources/views/livewire/project/index.blade.php
@@ -1,14 +1,6 @@
 <div>
     <div class="flex gap-2">
         <h1>Projects</h1>
-        <x-slide-over>
-            <x-slot:title>New Project</x-slot:title>
-            <x-slot:content>
-                <livewire:project.add-empty />
-            </x-slot:content>
-            <button @click="slideOverOpen=true" class="button">+
-                Add</button>
-        </x-slide-over>
         <x-modal-input buttonTitle="+ Add" title="New Project">
             <livewire:project.add-empty />
         </x-modal-input>
@@ -25,9 +17,9 @@
                         {{ $project->description }}</div>
                 </a>
                 <div class="flex items-center">
-                    <a class="mx-4 rounded group-hover:text-white"
+                    <a class="mx-4 on-box"
                         href="{{ route('project.edit', ['project_uuid' => data_get($project, 'uuid')]) }}">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon hover:text-warning" viewBox="0 0 24 24"
+                        <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" />
diff --git a/resources/views/livewire/project/resource/index.blade.php b/resources/views/livewire/project/resource/index.blade.php
index 61c2d1321..3c241ad6d 100644
--- a/resources/views/livewire/project/resource/index.blade.php
+++ b/resources/views/livewire/project/resource/index.blade.php
@@ -45,7 +45,7 @@
             class="items-center justify-center box">+ Add New Resource</a>
     @else
         <div x-data="searchComponent()">
-            <x-forms.input autofocus placeholder="Search for name, fqdn..." class="w-full" x-model="search" />
+            <x-forms.input autofocus placeholder="Search for name, fqdn..." x-model="search" />
             <div class="grid grid-cols-1 gap-4 pt-4 lg:grid-cols-2 xl:grid-cols-3">
                 <template x-for="item in filteredApplications" :key="item.id">
                     <span>
diff --git a/resources/views/livewire/project/show.blade.php b/resources/views/livewire/project/show.blade.php
index 288d6c07f..07b2568de 100644
--- a/resources/views/livewire/project/show.blade.php
+++ b/resources/views/livewire/project/show.blade.php
@@ -23,9 +23,9 @@
                         {{ $environment->description }}</div>
                 </a>
                 <div class="flex items-center">
-                    <a class="mx-4 rounded group-hover:text-white"
+                    <a class="mx-4"
                         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 hover:text-warning" viewBox="0 0 24 24"
+                        <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" />
diff --git a/resources/views/livewire/switch-team.blade.php b/resources/views/livewire/switch-team.blade.php
index 52500087e..024346147 100644
--- a/resources/views/livewire/switch-team.blade.php
+++ b/resources/views/livewire/switch-team.blade.php
@@ -1,6 +1,6 @@
 <x-forms.select wire:model.live="selectedTeamId" label="Current Team">
     <option value="default" disabled selected>Switch team</option>
     @foreach (auth()->user()->teams as $team)
-        <option value="{{ $team->id }}">{{ $team->name }}</option>
+        <option  value="{{ $team->id }}">{{ $team->name }}</option>
     @endforeach
 </x-forms.select>
diff --git a/resources/views/livewire/team/create.blade.php b/resources/views/livewire/team/create.blade.php
index 8ab50c34e..b0fdf4b0c 100644
--- a/resources/views/livewire/team/create.blade.php
+++ b/resources/views/livewire/team/create.blade.php
@@ -1,4 +1,4 @@
-<form class="flex flex-col gap-2" wire:submit='submit'>
+<form class="flex flex-col w-full gap-2" wire:submit='submit'>
     <x-forms.input autofocus id="name" label="Name" required />
     <x-forms.input id="description" label="Description" />
     <x-forms.button type="submit">