diff --git a/app/Livewire/Project/Shared/ScheduledTask/Add.php b/app/Livewire/Project/Shared/ScheduledTask/Add.php
index 3cc5428b8..3a7a3fa23 100644
--- a/app/Livewire/Project/Shared/ScheduledTask/Add.php
+++ b/app/Livewire/Project/Shared/ScheduledTask/Add.php
@@ -33,19 +33,23 @@ public function mount()
 
     public function submit()
     {
-        $this->validate();
-        $isValid = validate_cron_expression($this->frequency);
-        if (!$isValid) {
-            $this->dispatch('error', 'Invalid Cron / Human expression.');
-            return;
+        try {
+            $this->validate();
+            $isValid = validate_cron_expression($this->frequency);
+            if (!$isValid) {
+                $this->dispatch('error', 'Invalid Cron / Human expression.');
+                return;
+            }
+            $this->dispatch('saveScheduledTask', [
+                'name' => $this->name,
+                'command' => $this->command,
+                'frequency' => $this->frequency,
+                'container' => $this->container,
+            ]);
+            $this->clear();
+        } catch (\Exception $e) {
+            return handleError($e, $this);
         }
-        $this->dispatch('saveScheduledTask', [
-            'name' => $this->name,
-            'command' => $this->command,
-            'frequency' => $this->frequency,
-            'container' => $this->container,
-        ]);
-        $this->clear();
     }
 
     public function clear()
diff --git a/app/View/Components/Forms/Button.php b/app/View/Components/Forms/Button.php
index c9f4ebdc0..350039fce 100644
--- a/app/View/Components/Forms/Button.php
+++ b/app/View/Components/Forms/Button.php
@@ -16,7 +16,7 @@ public function __construct(
         public bool        $isModal = false,
         public bool        $noStyle = false,
         public ?string     $modalId = null,
-        public string      $defaultClass = "btn btn-primary btn-sm font-normal text-white normal-case no-animation rounded border-none"
+        public string      $defaultClass = "button"
     ) {
         if ($this->noStyle) {
             $this->defaultClass = "";
diff --git a/app/View/Components/Forms/Checkbox.php b/app/View/Components/Forms/Checkbox.php
index 0bbbc1e04..5361be4e7 100644
--- a/app/View/Components/Forms/Checkbox.php
+++ b/app/View/Components/Forms/Checkbox.php
@@ -12,14 +12,14 @@ class Checkbox extends Component
      * Create a new component instance.
      */
     public function __construct(
-        public string|null $id = null,
-        public string|null $name = null,
-        public string|null $value = null,
-        public string|null $label = null,
-        public string|null $helper = null,
-        public string|bool        $instantSave = false,
+        public ?string     $id = null,
+        public ?string     $name = null,
+        public ?string     $value = null,
+        public ?string     $label = null,
+        public ?string     $helper = null,
+        public string|bool $instantSave = false,
         public bool        $disabled = false,
-        public string      $defaultClass = "toggle toggle-xs toggle-warning rounded disabled:bg-coolgray-200 disabled:opacity-50 placeholder:text-neutral-700",
+        public string      $defaultClass = "border-coolgray-500 text-warning focus:ring-warning bg-coolgray-100 rounded cursor-pointer",
     ) {
         //
     }
diff --git a/app/View/Components/Forms/Input.php b/app/View/Components/Forms/Input.php
index a55f9b9d2..c1c60e8a0 100644
--- a/app/View/Components/Forms/Input.php
+++ b/app/View/Components/Forms/Input.php
@@ -21,7 +21,7 @@ public function __construct(
         public ?string $helper = null,
         public bool    $allowToPeak = true,
         public bool    $isMultiline = false,
-        public string  $defaultClass = "input input-sm bg-coolgray-100 rounded text-white w-full disabled:bg-coolgray-200/50 disabled:border-none placeholder:text-coolgray-500 read-only:text-neutral-500 read-only:bg-coolgray-200/50"
+        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 dark:read-only:text-neutral-500 dark:read-only:bg-coolgray-100/20"
     ) {
     }
 
diff --git a/app/View/Components/Forms/Select.php b/app/View/Components/Forms/Select.php
index e1f2fc759..eadb8dcac 100644
--- a/app/View/Components/Forms/Select.php
+++ b/app/View/Components/Forms/Select.php
@@ -19,7 +19,7 @@ public function __construct(
         public string|null $label = null,
         public string|null $helper = null,
         public bool        $required = false,
-        public string      $defaultClass = "select select-sm w-full rounded text-sm bg-coolgray-100 font-normal disabled:bg-coolgray-200/50 disabled:border-none"
+        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 "
     ) {
         //
     }
diff --git a/app/View/Components/Forms/Textarea.php b/app/View/Components/Forms/Textarea.php
index 8c50af533..58a1af67a 100644
--- a/app/View/Components/Forms/Textarea.php
+++ b/app/View/Components/Forms/Textarea.php
@@ -25,8 +25,8 @@ public function __construct(
         public ?string $helper = null,
         public bool    $realtimeValidation = false,
         public bool    $allowToPeak = true,
-        public string  $defaultClass = "textarea leading-normal bg-coolgray-100 rounded text-white w-full scrollbar disabled:bg-coolgray-200/50 disabled:border-none placeholder:text-coolgray-500 read-only:text-neutral-500 read-only:bg-coolgray-200/50",
-        public string  $defaultClassInput = "input input-sm bg-coolgray-100 rounded text-white w-full disabled:bg-coolgray-200/50 disabled:border-none placeholder:text-coolgray-500 read-only:text-neutral-500 read-only:bg-coolgray-200/50"
+        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 dark:read-only:text-neutral-500 dark:read-only:bg-coolgray-100/20 scrollbar",
+        public string  $defaultClassInput = "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 dark:read-only:text-neutral-500 dark:read-only:bg-coolgray-100/20"
     ) {
         //
     }
diff --git a/package-lock.json b/package-lock.json
index b2124e9df..cc9889a18 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
     "packages": {
         "": {
             "dependencies": {
+                "@tailwindcss/forms": "^0.5.7",
                 "@tailwindcss/typography": "0.5.10",
                 "alpinejs": "3.13.5",
                 "daisyui": "4.7.2",
@@ -484,6 +485,17 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/@tailwindcss/forms": {
+            "version": "0.5.7",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz",
+            "integrity": "sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==",
+            "dependencies": {
+                "mini-svg-data-uri": "^1.2.3"
+            },
+            "peerDependencies": {
+                "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
+            }
+        },
         "node_modules/@tailwindcss/typography": {
             "version": "0.5.10",
             "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz",
@@ -1462,6 +1474,14 @@
                 "node": ">= 0.6"
             }
         },
+        "node_modules/mini-svg-data-uri": {
+            "version": "1.4.4",
+            "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+            "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+            "bin": {
+                "mini-svg-data-uri": "cli.js"
+            }
+        },
         "node_modules/minimatch": {
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
diff --git a/package.json b/package.json
index 8568525e6..69c5c560a 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
         "vue": "3.4.21"
     },
     "dependencies": {
+        "@tailwindcss/forms": "^0.5.7",
         "@tailwindcss/typography": "0.5.10",
         "alpinejs": "3.13.5",
         "daisyui": "4.7.2",
diff --git a/resources/css/app.css b/resources/css/app.css
index 1080a84f4..b7eec46fb 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -2,8 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
-html {
-    @apply text-neutral-400;
+html,
+body {
+    @apply text-black bg-white dark:bg-base dark:text-neutral-400;
 }
 
 body {
@@ -18,6 +19,101 @@ button[isHighlighted] {
     @apply bg-coollabs hover:bg-coollabs-100;
 }
 
+h1 {
+    @apply pb-6 text-2xl font-bold dark:text-white text-neutral-800;
+}
+
+h2 {
+    @apply text-xl font-bold dark:text-white text-neutral-800;
+}
+
+h3 {
+    @apply text-lg font-bold dark:text-white text-neutral-800;
+}
+
+h4 {
+    @apply text-base font-bold dark:text-white text-neutral-800;
+}
+
+a {
+    @apply dark:text-neutral-400 text-neutral-600;
+}
+
+label {
+    @apply dark:text-neutral-400 text-neutral-600;
+}
+
+table {
+    @apply min-w-full divide-y divide-coolgray-200;
+}
+
+thead {
+    @apply uppercase;
+}
+
+tbody {
+    @apply divide-y divide-coolgray-200;
+}
+
+tr {
+    @apply text-neutral-400;
+}
+
+tr th {
+    @apply px-3 py-3.5 text-left text-white;
+}
+
+tr th:first-child {
+    @apply py-3.5 pl-4 pr-3 sm:pl-6;
+}
+
+tr td {
+    @apply px-3 py-4 whitespace-nowrap;
+}
+
+tr td:first-child {
+    @apply pl-4 pr-3 font-bold sm:pl-6;
+}
+
+input.input-sm {
+    @apply pr-10;
+}
+
+option {
+    @apply text-white;
+}
+.badge {
+    @apply inline-block w-3 h-3 text-xs font-bold leading-none border border-black rounded-full ;
+}
+.badge-success {
+    @apply bg-success;
+}
+.badge-warning {
+    @apply bg-warning;
+}
+.badge-error {
+    @apply bg-error;
+}
+.button {
+    @apply px-3 py-1 text-sm font-normal normal-case rounded dark:bg-coolgray-200 dark:text-white dark:hover:bg-coolgray-100;
+}
+[type='checkbox']:checked {
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+
+.menu {
+    @apply flex items-center gap-1;
+}
+.menu-item {
+    @apply flex items-center w-full gap-2 px-4 py-1 min-w-48 hover:bg-coolgray-100 dark:hover:text-white;
+}
+.menu-item-active {
+    @apply rounded-none bg-coolgray-200 text-warning;
+}
+.icon {
+    @apply w-4 h-4;
+}
+
 .scrollbar {
     @apply scrollbar-thumb-coollabs-100 scrollbar-track-coolgray-200 scrollbar-w-2;
 }
@@ -27,13 +123,9 @@ .main {
 }
 
 .custom-modal {
-    @apply flex flex-col gap-2 px-8 py-4 border bg-base-100 border-coolgray-200;
+    @apply flex flex-col gap-2 px-8 py-4 border bg-coolgray-100 border-coolgray-200;
 }
 
-.label-text,
-label {
-    @apply text-neutral-400;
-}
 
 .navbar-main {
     @apply flex items-end gap-6 py-2 border-b-2 border-solid border-coolgray-200;
@@ -43,26 +135,6 @@ .loading {
     @apply w-4 text-warning;
 }
 
-h1 {
-    @apply text-3xl font-bold text-white;
-}
-
-h2 {
-    @apply text-2xl font-bold text-white;
-}
-
-h3 {
-    @apply text-xl font-bold text-white;
-}
-
-h4 {
-    @apply text-base font-bold text-white;
-}
-
-a {
-    @apply text-neutral-400 hover:text-white link link-hover hover:bg-transparent;
-}
-
 .kbd-custom {
     @apply px-2 text-xs border border-dashed rounded border-neutral-700 text-warning;
 }
@@ -125,37 +197,7 @@ .text-helper {
     @apply inline-block font-bold text-warning;
 }
 
-table {
-    @apply min-w-full divide-y divide-coolgray-200;
-}
 
-thead {
-    @apply uppercase;
-}
-
-tbody {
-    @apply divide-y divide-coolgray-200;
-}
-
-tr {
-    @apply text-neutral-400;
-}
-
-tr th {
-    @apply px-3 py-3.5 text-left text-white;
-}
-
-tr th:first-child {
-    @apply py-3.5 pl-4 pr-3 sm:pl-6;
-}
-
-tr td {
-    @apply px-3 py-4 whitespace-nowrap;
-}
-
-tr td:first-child {
-    @apply pl-4 pr-3 font-bold sm:pl-6;
-}
 
 .buyme {
     @apply block px-3 py-2 mt-10 text-sm font-semibold leading-6 text-center text-white rounded-md shadow-sm bg-coolgray-200 hover:bg-coolgray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-coolgray-200 hover:no-underline;
@@ -168,10 +210,3 @@ .subtitle {
 .fullscreen {
     @apply fixed top-0 left-0 w-full h-full z-[9999] bg-coolgray-100 overflow-y-auto scrollbar pb-4;
 }
-
-input.input-sm {
-    @apply pr-10;
-}
-option{
-    @apply text-white;
-}
diff --git a/resources/js/components/MagicBar.vue b/resources/js/components/MagicBar.vue
index 386a267b1..7fe770279 100644
--- a/resources/js/components/MagicBar.vue
+++ b/resources/js/components/MagicBar.vue
@@ -9,6 +9,7 @@
                     <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
                     <path d="M21 21l-6 -6" />
                 </svg>
+                <span class="flex-1"></span>
                 <span class="ml-2 kbd-custom">/</span>
             </div>
             <div class="relative" role="dialog" aria-modal="true" v-if="showCommandPalette" @keyup.esc="resetState">
diff --git a/resources/views/components/forms/checkbox.blade.php b/resources/views/components/forms/checkbox.blade.php
index 12ed8edb3..749c7a21a 100644
--- a/resources/views/components/forms/checkbox.blade.php
+++ b/resources/views/components/forms/checkbox.blade.php
@@ -1,6 +1,6 @@
-<div class="flex flex-row items-center gap-4 px-2 form-control min-w-fit hover:bg-coolgray-100">
+<div class="flex flex-row items-center gap-4 px-2 py-1 form-control min-w-fit dark:hover:bg-coolgray-100">
     <label class="flex gap-4 px-0 min-w-fit label">
-        <span class="flex gap-2 label-text">
+        <span class="flex gap-2">
             @if ($label)
                 {!! $label !!}
             @else
@@ -16,3 +16,4 @@
         @if ($instantSave) wire:loading.attr="disabled" wire:click='{{ $instantSave === 'instantSave' || $instantSave == '1' ? 'instantSave' : $instantSave }}'
        wire:model={{ $id }} @else wire:model={{ $value ?? $id }} @endif />
 </div>
+
diff --git a/resources/views/components/forms/input.blade.php b/resources/views/components/forms/input.blade.php
index 1ced7c43d..a00f767c8 100644
--- a/resources/views/components/forms/input.blade.php
+++ b/resources/views/components/forms/input.blade.php
@@ -28,7 +28,7 @@ class="absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer hover:te
             <input x-cloak x-show="type" value="{{ $value }}"
                 {{ $attributes->merge(['class' => $defaultClass]) }} @required($required)
                 @if ($id !== 'null') wire:model={{ $id }} @endif
-                wire:dirty.class.remove='text-white' wire:dirty.class="input-warning" wire:loading.attr="disabled"
+                wire:dirty.class.remove='dark:text-white text-black' wire:dirty.class="input-warning" wire:loading.attr="disabled"
                 type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $id }}"
                 name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
                 aria-placeholder="{{ $attributes->get('placeholder') }}">
@@ -38,7 +38,7 @@ class="absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer hover:te
         <input @if ($value) value="{{ $value }}" @endif
             {{ $attributes->merge(['class' => $defaultClass]) }} @required($required) @readonly($readonly)
             @if ($id !== 'null') wire:model={{ $id }} @endif
-            wire:dirty.class.remove='text-white' wire:dirty.class="input-warning" wire:loading.attr="disabled"
+            wire:dirty.class.remove='dark:text-white text-black' wire:dirty.class="input-warning" wire:loading.attr="disabled"
             type="{{ $type }}" @disabled($disabled)
             @if ($id !== 'null') id={{ $id }} @endif name="{{ $name }}"
             placeholder="{{ $attributes->get('placeholder') }}">
diff --git a/resources/views/components/loading.blade.php b/resources/views/components/loading.blade.php
index 2cb8b894c..b792b292a 100644
--- a/resources/views/components/loading.blade.php
+++ b/resources/views/components/loading.blade.php
@@ -1,6 +1,11 @@
 @props(['text' => null])
-<span class="flex items-center gap-4 text-white">
-    {{ $text }}<span
-        {{ $attributes->class(['bg-warning loading', 'loading-spinner' => !$attributes->has('class')]) }}>
-    </span>
-</span>
+<button type="button" class="inline-flex items-center px-2 " {{ $attributes }}>
+    <svg class="w-4 h-4 mr-3 -ml-1 text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none"
+        viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+        </path>
+    </svg>
+    {{ $text }}
+</button>
diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index 4ba890c31..9cb03de3c 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -1,49 +1,157 @@
 @auth
-    <nav class="fixed h-full pt-28 scrollbar">
+    <nav class="h-screen pt-[4.5rem] border-r scrollbar bg-coolgray-100/40 border-r-coolgray-200">
+        {{-- <div class="px-2 pb-2" id="vue">
+            <magic-bar></magic-bar>
+        </div> --}}
         <a href="/" class="fixed top-0 z-50 mx-3 mt-3 bg-transparent cursor-pointer"><img
                 class="transition rounded w-11 h-11" src="{{ asset('coolify-transparent.png') }}"></a>
         <ul class="flex flex-col h-full gap-4 menu flex-nowrap">
-            <li title="Dashboard">
-                <a class="hover:bg-transparent" href="/">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="{{ request()->is('/') ? 'text-warning icon' : 'icon' }}"
-                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+            <a title="Dashboard" href="/" class="{{ request()->is('/') ? 'menu-item-active menu-item' : 'menu-item' }}">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+                </svg>
+                Dashboard
+            </a>
+            <a title="Projects"
+                class="{{ request()->is('project/*') || request()->is('projects') ? 'menu-item menu-item-active' : 'menu-item' }}"
+                href="/projects">
+                <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">
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <path d="M12 4l-8 4l8 4l8 -4l-8 -4" />
+                    <path d="M4 12l8 4l8 -4" />
+                    <path d="M4 16l8 4l8 -4" />
+                </svg>
+                Projects
+            </a>
+            <a title="Servers"
+                class="{{ request()->is('server/*') || request()->is('servers') ? 'menu-item menu-item-active' : 'menu-item' }}"
+                href="/servers">
+                <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">
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <path d="M3 4m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z" />
+                    <path d="M15 20h-9a3 3 0 0 1 -3 -3v-2a3 3 0 0 1 3 -3h12" />
+                    <path d="M7 8v.01" />
+                    <path d="M7 16v.01" />
+                    <path d="M20 15l-2 3h3l-2 3" />
+                </svg>
+                Servers
+            </a>
+            <a title="Security" class="{{ request()->is('security*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                href="{{ route('security.private-key.index') }}">
+                <svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                        stroke-width="2"
+                        d="m16.555 3.843l3.602 3.602a2.877 2.877 0 0 1 0 4.069l-2.643 2.643a2.877 2.877 0 0 1-4.069 0l-.301-.301l-6.558 6.558a2 2 0 0 1-1.239.578L5.172 21H4a1 1 0 0 1-.993-.883L3 20v-1.172a2 2 0 0 1 .467-1.284l.119-.13L4 17h2v-2h2v-2l2.144-2.144l-.301-.301a2.877 2.877 0 0 1 0-4.069l2.643-2.643a2.877 2.877 0 0 1 4.069 0zM15 9h.01" />
+                </svg>
+                Security
+            </a>
+            <a title="Source" class="{{ request()->is('source*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                href="{{ route('source.all') }}">
+                <svg class="icon" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg">
+                    <path fill="currentColor"
+                        d="m6.793 1.207l.353.354l-.353-.354ZM1.207 6.793l-.353-.354l.353.354Zm0 1.414l.354-.353l-.354.353Zm5.586 5.586l-.354.353l.354-.353Zm1.414 0l-.353-.354l.353.354Zm5.586-5.586l.353.354l-.353-.354Zm0-1.414l-.354.353l.354-.353ZM8.207 1.207l.354-.353l-.354.353ZM6.44.854L.854 6.439l.707.707l5.585-5.585L6.44.854ZM.854 8.56l5.585 5.585l.707-.707l-5.585-5.585l-.707.707Zm7.707 5.585l5.585-5.585l-.707-.707l-5.585 5.585l.707.707Zm5.585-7.707L8.561.854l-.707.707l5.585 5.585l.707-.707Zm0 2.122a1.5 1.5 0 0 0 0-2.122l-.707.707a.5.5 0 0 1 0 .708l.707.707ZM6.44 14.146a1.5 1.5 0 0 0 2.122 0l-.707-.707a.5.5 0 0 1-.708 0l-.707.707ZM.854 6.44a1.5 1.5 0 0 0 0 2.122l.707-.707a.5.5 0 0 1 0-.708L.854 6.44Zm6.292-4.878a.5.5 0 0 1 .708 0L8.56.854a1.5 1.5 0 0 0-2.122 0l.707.707Zm-2 1.293l1 1l.708-.708l-1-1l-.708.708ZM7.5 5a.5.5 0 0 1-.5-.5H6A1.5 1.5 0 0 0 7.5 6V5Zm.5-.5a.5.5 0 0 1-.5.5v1A1.5 1.5 0 0 0 9 4.5H8ZM7.5 4a.5.5 0 0 1 .5.5h1A1.5 1.5 0 0 0 7.5 3v1Zm0-1A1.5 1.5 0 0 0 6 4.5h1a.5.5 0 0 1 .5-.5V3Zm.646 2.854l1.5 1.5l.707-.708l-1.5-1.5l-.707.708ZM10.5 8a.5.5 0 0 1-.5-.5H9A1.5 1.5 0 0 0 10.5 9V8Zm.5-.5a.5.5 0 0 1-.5.5v1A1.5 1.5 0 0 0 12 7.5h-1Zm-.5-.5a.5.5 0 0 1 .5.5h1A1.5 1.5 0 0 0 10.5 6v1Zm0-1A1.5 1.5 0 0 0 9 7.5h1a.5.5 0 0 1 .5-.5V6ZM7 5.5v4h1v-4H7Zm.5 5.5a.5.5 0 0 1-.5-.5H6A1.5 1.5 0 0 0 7.5 12v-1Zm.5-.5a.5.5 0 0 1-.5.5v1A1.5 1.5 0 0 0 9 10.5H8Zm-.5-.5a.5.5 0 0 1 .5.5h1A1.5 1.5 0 0 0 7.5 9v1Zm0-1A1.5 1.5 0 0 0 6 10.5h1a.5.5 0 0 1 .5-.5V9Z" />
+                </svg>
+                Sources
+            </a>
+            <a title="Notifications"
+                class="{{ request()->is('notifications*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                href="{{ route('notification.index') }}">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1" />
+                </svg>
+                Notifications
+            </a>
+            <a title="Tags" class="{{ request()->is('tags*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                href="{{ route('tags.index') }}">
+                <svg 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" stroke-width="2">
+                        <path
+                            d="M3 8v4.172a2 2 0 0 0 .586 1.414l5.71 5.71a2.41 2.41 0 0 0 3.408 0l3.592-3.592a2.41 2.41 0 0 0 0-3.408l-5.71-5.71A2 2 0 0 0 9.172 6H5a2 2 0 0 0-2 2" />
+                        <path d="m18 19l1.592-1.592a4.82 4.82 0 0 0 0-6.816L15 6m-8 4h-.01" />
+                    </g>
+                </svg>
+                Tags
+            </a>
+            <a title="Command Center"
+                class="{{ request()->is('command-center*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                href="{{ route('command-center') }}">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" 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="M5 7l5 5l-5 5" />
+                    <path d="M12 19l7 0" />
+                </svg>
+                Command Center
+            </a>
+            <a title="Profile" class="{{ request()->is('profile*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                href="{{ route('profile') }}">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5"
+                    stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+                    <path d="M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
+                    <path d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855" />
+                </svg>
+                Profile
+            </a>
+            <a title="Teams" class="{{ request()->is('team*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                href="{{ route('team.index') }}">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" 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 13a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+                    <path d="M8 21v-1a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v1" />
+                    <path d="M15 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+                    <path d="M17 10h2a2 2 0 0 1 2 2v1" />
+                    <path d="M5 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+                    <path d="M3 13v-1a2 2 0 0 1 2 -2h2" />
+                </svg>
+                Teams
+            </a>
+            @if (isCloud())
+                <a title="Subscription"
+                    class="{{ request()->is('subscription*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                    href="{{ route('subscription.show') }}">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M3 8a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm0 2h18M7 15h.01M11 15h2" />
                     </svg>
+                    Subscription
                 </a>
-            </li>
-            <li title="Servers">
-                <a class="hover:bg-transparent" href="/servers">
-                    <svg xmlns="http://www.w3.org/2000/svg"
-                        class="{{ request()->is('server/*') || request()->is('servers') ? 'text-warning icon' : 'icon' }}"
-                        viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
-                        stroke-linejoin="round">
+            @endif
+
+            @if (isInstanceAdmin())
+                <a title="Settings" class="{{ request()->is('settings*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                    href="/settings">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" 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="M3 4m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z" />
-                        <path d="M15 20h-9a3 3 0 0 1 -3 -3v-2a3 3 0 0 1 3 -3h12" />
-                        <path d="M7 8v.01" />
-                        <path d="M7 16v.01" />
-                        <path d="M20 15l-2 3h3l-2 3" />
+                        <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>
-            </li>
-            <li title="Projects">
-                <a class="hover:bg-transparent" href="/projects">
-                    <svg xmlns="http://www.w3.org/2000/svg"
-                        class="{{ request()->is('project/*') || request()->is('projects') ? 'text-warning icon' : 'icon' }}"
-                        viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
-                        stroke-linejoin="round">
-                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                        <path d="M12 4l-8 4l8 4l8 -4l-8 -4" />
-                        <path d="M4 12l8 4l8 -4" />
-                        <path d="M4 16l8 4l8 -4" />
-                    </svg>
-                </a>
-            </li>
-            <div class="inline-block text-left " x-data="{ open: false }">
+            @endif
+            <a title="Onboarding" class="{{ request()->is('onboarding*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                href="{{ route('onboarding') }}">
+                <svg class="icon" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
+                    <path fill="currentColor"
+                        d="M224 128a8 8 0 0 1-8 8h-88a8 8 0 0 1 0-16h88a8 8 0 0 1 8 8m-96-56h88a8 8 0 0 0 0-16h-88a8 8 0 0 0 0 16m88 112h-88a8 8 0 0 0 0 16h88a8 8 0 0 0 0-16M82.34 42.34L56 68.69L45.66 58.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32 0l32-32a8 8 0 0 0-11.32-11.32m0 64L56 132.69l-10.34-10.35a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32 0l32-32a8 8 0 0 0-11.32-11.32m0 64L56 196.69l-10.34-10.35a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32 0l32-32a8 8 0 0 0-11.32-11.32" />
+                </svg>
+                Onboarding
+            </a>
+            {{-- <div class="menu-item" x-data="{ open: false }">
                 <div>
-                    <button x-on:click.prevent="open = !open" x-on:click.away="open = false" type="button"
-                        class="py-4 mx-4" id="menu-button" aria-expanded="true" aria-haspopup="true">
+                    <button x-on:click.prevent="open = !open" x-on:click.away="open = false" type="button" id="menu-button"
+                        aria-expanded="true" aria-haspopup="true">
                         <svg class="icon text-neutral-400" xmlns="http://www.w3.org/2000/svg" width="200" height="200"
                             viewBox="0 0 24 24">
                             <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
@@ -55,150 +163,18 @@ class="py-4 mx-4" id="menu-button" aria-expanded="true" aria-haspopup="true">
                     class="absolute left-0 z-10 w-56 mx-4 mt-2 origin-top-right rounded shadow-lg bg-coolgray-100 ring-1 ring-black ring-opacity-5 focus:outline-none"
                     role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
                     <div class="py-1" role="none">
-                        <li title="Tags" class="border-transparent hover:bg-coolgray-200 ">
-                            <a class=" hover:bg-transparent hover:no-underline" href="{{ route('tags.index') }}">
-                                <svg class="{{ request()->is('tags*') ? 'text-warning icon' : 'icon' }}"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="M3 8v4.172a2 2 0 0 0 .586 1.414l5.71 5.71a2.41 2.41 0 0 0 3.408 0l3.592-3.592a2.41 2.41 0 0 0 0-3.408l-5.71-5.71A2 2 0 0 0 9.172 6H5a2 2 0 0 0-2 2" />
-                                        <path d="m18 19l1.592-1.592a4.82 4.82 0 0 0 0-6.816L15 6m-8 4h-.01" />
-                                    </g>
-                                </svg>
-                                Tags
-                            </a>
-                        </li>
-                        <li title="Command Center" class="hover:bg-coolgray-200">
-                            <a class="hover:bg-transparent hover:no-underline" href="{{ route('command-center') }}">
-                                <svg xmlns="http://www.w3.org/2000/svg"
-                                    class="{{ request()->is('command-center*') ? 'text-warning icon' : 'icon' }}"
-                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
-                                    stroke-linecap="round" stroke-linejoin="round">
-                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                                    <path d="M5 7l5 5l-5 5" />
-                                    <path d="M12 19l7 0" />
-                                </svg>
-                                Command Center
-                            </a>
-                        </li>
-                        <li title="Source" class="hover:bg-coolgray-200">
-                            <a class="hover:bg-transparent hover:no-underline" href="{{ route('source.all') }}">
-                                <svg class="{{ request()->is('source*') ? 'text-warning icon' : 'icon' }}"
-                                    viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg">
-                                    <path fill="currentColor"
-                                        d="m6.793 1.207l.353.354l-.353-.354ZM1.207 6.793l-.353-.354l.353.354Zm0 1.414l.354-.353l-.354.353Zm5.586 5.586l-.354.353l.354-.353Zm1.414 0l-.353-.354l.353.354Zm5.586-5.586l.353.354l-.353-.354Zm0-1.414l-.354.353l.354-.353ZM8.207 1.207l.354-.353l-.354.353ZM6.44.854L.854 6.439l.707.707l5.585-5.585L6.44.854ZM.854 8.56l5.585 5.585l.707-.707l-5.585-5.585l-.707.707Zm7.707 5.585l5.585-5.585l-.707-.707l-5.585 5.585l.707.707Zm5.585-7.707L8.561.854l-.707.707l5.585 5.585l.707-.707Zm0 2.122a1.5 1.5 0 0 0 0-2.122l-.707.707a.5.5 0 0 1 0 .708l.707.707ZM6.44 14.146a1.5 1.5 0 0 0 2.122 0l-.707-.707a.5.5 0 0 1-.708 0l-.707.707ZM.854 6.44a1.5 1.5 0 0 0 0 2.122l.707-.707a.5.5 0 0 1 0-.708L.854 6.44Zm6.292-4.878a.5.5 0 0 1 .708 0L8.56.854a1.5 1.5 0 0 0-2.122 0l.707.707Zm-2 1.293l1 1l.708-.708l-1-1l-.708.708ZM7.5 5a.5.5 0 0 1-.5-.5H6A1.5 1.5 0 0 0 7.5 6V5Zm.5-.5a.5.5 0 0 1-.5.5v1A1.5 1.5 0 0 0 9 4.5H8ZM7.5 4a.5.5 0 0 1 .5.5h1A1.5 1.5 0 0 0 7.5 3v1Zm0-1A1.5 1.5 0 0 0 6 4.5h1a.5.5 0 0 1 .5-.5V3Zm.646 2.854l1.5 1.5l.707-.708l-1.5-1.5l-.707.708ZM10.5 8a.5.5 0 0 1-.5-.5H9A1.5 1.5 0 0 0 10.5 9V8Zm.5-.5a.5.5 0 0 1-.5.5v1A1.5 1.5 0 0 0 12 7.5h-1Zm-.5-.5a.5.5 0 0 1 .5.5h1A1.5 1.5 0 0 0 10.5 6v1Zm0-1A1.5 1.5 0 0 0 9 7.5h1a.5.5 0 0 1 .5-.5V6ZM7 5.5v4h1v-4H7Zm.5 5.5a.5.5 0 0 1-.5-.5H6A1.5 1.5 0 0 0 7.5 12v-1Zm.5-.5a.5.5 0 0 1-.5.5v1A1.5 1.5 0 0 0 9 10.5H8Zm-.5-.5a.5.5 0 0 1 .5.5h1A1.5 1.5 0 0 0 7.5 9v1Zm0-1A1.5 1.5 0 0 0 6 10.5h1a.5.5 0 0 1 .5-.5V9Z" />
-                                </svg>
-                                Sources
-                            </a>
-                        </li>
-                        <li title="Security" class="hover:bg-coolgray-200">
-                            <a class="hover:bg-transparent hover:no-underline"
-                                href="{{ route('security.private-key.index') }}">
-                                <svg class="{{ request()->is('security*') ? 'text-warning icon' : 'icon' }}"
-                                    viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                                    <path fill="none" stroke="currentColor" stroke-linecap="round"
-                                        stroke-linejoin="round" stroke-width="2"
-                                        d="m16.555 3.843l3.602 3.602a2.877 2.877 0 0 1 0 4.069l-2.643 2.643a2.877 2.877 0 0 1-4.069 0l-.301-.301l-6.558 6.558a2 2 0 0 1-1.239.578L5.172 21H4a1 1 0 0 1-.993-.883L3 20v-1.172a2 2 0 0 1 .467-1.284l.119-.13L4 17h2v-2h2v-2l2.144-2.144l-.301-.301a2.877 2.877 0 0 1 0-4.069l2.643-2.643a2.877 2.877 0 0 1 4.069 0zM15 9h.01" />
-                                </svg>
-                                Security
-                            </a>
-                        </li>
-                        <li title="Profile" class="hover:bg-coolgray-200">
-                            <a class="hover:bg-transparent hover:no-underline" href="{{ route('profile') }}">
-                                <svg xmlns="http://www.w3.org/2000/svg"
-                                    class="{{ request()->is('profile*') ? 'text-warning icon' : 'icon' }}"
-                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
-                                    stroke-linecap="round" stroke-linejoin="round">
-                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                                    <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
-                                    <path d="M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
-                                    <path d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855" />
-                                </svg>
-                                Profile
-                            </a>
-                        </li>
-                        <li title="Teams" class="hover:bg-coolgray-200">
-                            <a class="hover:bg-transparent hover:no-underline" href="{{ route('team.index') }}">
-                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
-                                    class="{{ request()->is('team*') ? 'text-warning icon' : 'icon' }}"
-                                    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 13a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
-                                    <path d="M8 21v-1a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v1" />
-                                    <path d="M15 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
-                                    <path d="M17 10h2a2 2 0 0 1 2 2v1" />
-                                    <path d="M5 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
-                                    <path d="M3 13v-1a2 2 0 0 1 2 -2h2" />
-                                </svg>
-                                Teams
-                            </a>
-                        </li>
-                        @if (isCloud())
-                            <li title="Subscription" class="hover:bg-coolgray-200">
-                                <a class="hover:bg-transparent hover:no-underline"
-                                    href="{{ route('subscription.show') }}">
-                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                        class="{{ request()->is('subscription*') ? 'text-warning icon' : 'icon' }}"
-                                        viewBox="0 0 24 24">
-                                        <path fill="none" stroke="currentColor" stroke-linecap="round"
-                                            stroke-linejoin="round" stroke-width="2"
-                                            d="M3 8a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm0 2h18M7 15h.01M11 15h2" />
-                                    </svg>
-                                    Subscription
-                                </a>
-                            </li>
-                        @endif
-                        <li title="Notifications" class="hover:bg-coolgray-200">
-                            <a class="hover:bg-transparent hover:no-underline" href="{{ route('notification.index') }}">
-                                <svg class="{{ request()->is('notifications*') ? 'text-warning icon' : 'icon' }}"
-                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                                    <path fill="none" stroke="currentColor" stroke-linecap="round"
-                                        stroke-linejoin="round" stroke-width="2"
-                                        d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1" />
-                                </svg>
-                                Notifications
-                            </a>
-                        </li>
-                        @if (isInstanceAdmin())
-                            <li title="Settings" class="hover:bg-coolgray-200">
-                                <a class="hover:bg-transparent hover:no-underline" href="/settings">
-                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                        class="{{ request()->is('settings*') ? 'text-warning icon' : 'icon' }}"
-                                        viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
-                                        stroke-linecap="round" stroke-linejoin="round">
-                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                                        <path
-                                            d="M10.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>
-                            </li>
-                        @endif
-                        <li title="Onboarding" class="hover:bg-coolgray-200">
-                            <a class="hover:bg-transparent hover:no-underline" href="{{ route('onboarding') }}">
-                                <svg class="{{ request()->is('onboarding*') ? 'text-warning icon' : 'icon' }}"
-                                    viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
-                                    <path fill="currentColor"
-                                        d="M224 128a8 8 0 0 1-8 8h-88a8 8 0 0 1 0-16h88a8 8 0 0 1 8 8m-96-56h88a8 8 0 0 0 0-16h-88a8 8 0 0 0 0 16m88 112h-88a8 8 0 0 0 0 16h88a8 8 0 0 0 0-16M82.34 42.34L56 68.69L45.66 58.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32 0l32-32a8 8 0 0 0-11.32-11.32m0 64L56 132.69l-10.34-10.35a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32 0l32-32a8 8 0 0 0-11.32-11.32m0 64L56 196.69l-10.34-10.35a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32 0l32-32a8 8 0 0 0-11.32-11.32" />
-                                </svg>
-                                Onboarding
-                            </a>
-                        </li>
+
                     </div>
                 </div>
-            </div>
+            </div> --}}
             @if (isCloud() && isInstanceAdmin())
-                <li title="Admin">
-                    <a class="hover:bg-transparent" href="/admin">
-                        <svg class="text-pink-600 icon" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
-                            <path fill="currentColor"
-                                d="M177.62 159.6a52 52 0 0 1-34 34a12.2 12.2 0 0 1-3.6.55a12 12 0 0 1-3.6-23.45a28 28 0 0 0 18.32-18.32a12 12 0 0 1 22.9 7.2ZM220 144a92 92 0 0 1-184 0c0-28.81 11.27-58.18 33.48-87.28a12 12 0 0 1 17.9-1.33l19.69 19.11L127 19.89a12 12 0 0 1 18.94-5.12C168.2 33.25 220 82.85 220 144m-24 0c0-41.71-30.61-78.39-52.52-99.29l-20.21 55.4a12 12 0 0 1-19.63 4.5L80.71 82.36C67 103.38 60 124.06 60 144a68 68 0 0 0 136 0" />
-                        </svg>
-                    </a>
-                </li>
+                <a title="Admin" class="menu-item" href="/admin">
+                    <svg class="text-pink-600 icon" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
+                        <path fill="currentColor"
+                            d="M177.62 159.6a52 52 0 0 1-34 34a12.2 12.2 0 0 1-3.6.55a12 12 0 0 1-3.6-23.45a28 28 0 0 0 18.32-18.32a12 12 0 0 1 22.9 7.2ZM220 144a92 92 0 0 1-184 0c0-28.81 11.27-58.18 33.48-87.28a12 12 0 0 1 17.9-1.33l19.69 19.11L127 19.89a12 12 0 0 1 18.94-5.12C168.2 33.25 220 82.85 220 144m-24 0c0-41.71-30.61-78.39-52.52-99.29l-20.21 55.4a12 12 0 0 1-19.63 4.5L80.71 82.36C67 103.38 60 124.06 60 144a68 68 0 0 0 136 0" />
+                    </svg>
+                    Admin
+                </a>
             @endif
             <div class="flex-1"></div>
             @if (isInstanceAdmin() && !isCloud())
@@ -206,37 +182,34 @@ class="{{ request()->is('settings*') ? 'text-warning icon' : 'icon' }}"
                     <livewire:upgrade />
                 @endpersist
             @endif
-            <li title="Help us!">
-                <a class="hover:bg-transparent" href="https://coolify.io/sponsorships" target="_blank">
-                    <svg class="icon hover:text-pink-500" 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.5 12.572L12 20l-7.5-7.428A5 5 0 1 1 12 6.006a5 5 0 1 1 7.5 6.572" />
-                            <path
-                                d="M12 6L8.707 9.293a1 1 0 0 0 0 1.414l.543.543c.69.69 1.81.69 2.5 0l1-1a3.182 3.182 0 0 1 4.5 0l2.25 2.25m-7 3l2 2M15 13l2 2" />
-                        </g>
-                    </svg>
-                </a>
-            </li>
+            <a title="Help us!" class="menu-item" href="https://coolify.io/sponsorships" target="_blank">
+                <svg class="icon hover:text-pink-500" 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.5 12.572L12 20l-7.5-7.428A5 5 0 1 1 12 6.006a5 5 0 1 1 7.5 6.572" />
+                        <path
+                            d="M12 6L8.707 9.293a1 1 0 0 0 0 1.414l.543.543c.69.69 1.81.69 2.5 0l1-1a3.182 3.182 0 0 1 4.5 0l2.25 2.25m-7 3l2 2M15 13l2 2" />
+                    </g>
+                </svg>
+                Help us!
+            </a>
 
-            <li title="Send us feedback or get help!" class="hover:bg-transparent">
-                <div class="justify-center" wire:click="help" onclick="help.showModal()">
-                    <svg class="icon" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
+            <div title="Send us feedback or get help!" class="menu-item" wire:click="help" onclick="help.showModal()">
+                <svg class="icon" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
+                    <path fill="currentColor"
+                        d="M140 180a12 12 0 1 1-12-12a12 12 0 0 1 12 12M128 72c-22.06 0-40 16.15-40 36v4a8 8 0 0 0 16 0v-4c0-11 10.77-20 24-20s24 9 24 20s-10.77 20-24 20a8 8 0 0 0-8 8v8a8 8 0 0 0 16 0v-.72c18.24-3.35 32-17.9 32-35.28c0-19.85-17.94-36-40-36m104 56A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88" />
+                </svg>
+                Feedback
+            </div>
+            <form action="/logout" method="POST" class="mb-6 menu-item">
+                @csrf
+                <button title="Logout" type="submit" class="flex gap-2">
+                    <svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                         <path fill="currentColor"
-                            d="M140 180a12 12 0 1 1-12-12a12 12 0 0 1 12 12M128 72c-22.06 0-40 16.15-40 36v4a8 8 0 0 0 16 0v-4c0-11 10.77-20 24-20s24 9 24 20s-10.77 20-24 20a8 8 0 0 0-8 8v8a8 8 0 0 0 16 0v-.72c18.24-3.35 32-17.9 32-35.28c0-19.85-17.94-36-40-36m104 56A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88" />
+                            d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2a9.985 9.985 0 0 1 8 4h-2.71a8 8 0 1 0 .001 12h2.71A9.985 9.985 0 0 1 12 22m7-6v-3h-8v-2h8V8l5 4z" />
                     </svg>
-                </div>
-            </li>
-            <form action="/logout" method="POST" class="hover:bg-transparent">
-                <li title="Logout" class="mb-6 hover:transparent">
-                    @csrf
-                    <button type="submit" class="rounded-none hover:text-white hover:bg-transparent">
-                        <svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                            <path fill="currentColor"
-                                d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2a9.985 9.985 0 0 1 8 4h-2.71a8 8 0 1 0 .001 12h2.71A9.985 9.985 0 0 1 12 22m7-6v-3h-8v-2h8V8l5 4z" />
-                        </svg>
-                    </button>
-                </li>
+                    Logout
+                </button>
             </form>
         </ul>
     </nav>
diff --git a/resources/views/components/resources/breadcrumbs.blade.php b/resources/views/components/resources/breadcrumbs.blade.php
index 6e2b234a3..4a4ea86f2 100644
--- a/resources/views/components/resources/breadcrumbs.blade.php
+++ b/resources/views/components/resources/breadcrumbs.blade.php
@@ -13,7 +13,7 @@
                         d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                         clip-rule="evenodd"></path>
                 </svg>
-                <a  class="text-xs truncate lg:text-sm"
+                <a class="text-xs truncate lg:text-sm"
                     href="{{ route('project.resource.index', ['environment_name' => $this->parameters['environment_name'], 'project_uuid' => $this->parameters['project_uuid']]) }}">{{ $this->parameters['environment_name'] }}</a>
             </div>
         </li>
diff --git a/resources/views/components/slide-over.blade.php b/resources/views/components/slide-over.blade.php
index 02dfa63c0..e62069b74 100644
--- a/resources/views/components/slide-over.blade.php
+++ b/resources/views/components/slide-over.blade.php
@@ -22,7 +22,7 @@ class="fixed inset-0 bg-black bg-opacity-60"></div>
                                 'max-w-4xl w-screen' => $fullScreen,
                             ])>
                             <div
-                                class="flex flex-col h-full py-6 overflow-hidden border-l shadow-lg bg-base-100 border-neutral-800">
+                                class="flex flex-col h-full py-6 overflow-hidden border-l shadow-lg bg-base border-neutral-800">
                                 <div class="px-4 pb-4 sm:px-5">
                                     <div class="flex items-start justify-between pb-1">
                                         <h2 class="text-2xl leading-6" id="slide-over-title">
diff --git a/resources/views/components/status/degraded.blade.php b/resources/views/components/status/degraded.blade.php
index 490ecc239..4b687c269 100644
--- a/resources/views/components/status/degraded.blade.php
+++ b/resources/views/components/status/degraded.blade.php
@@ -3,7 +3,7 @@
 ])
 <x-loading wire:loading.delay.longer />
 <div class="flex items-center" wire:loading.remove.delay.longer>
-    <div class="badge badge-warning badge-xs"></div>
+    <div class="badge badge-warning "></div>
     <div class="pl-2 pr-1 text-xs font-bold tracking-widerr text-warning">
         {{ str($status)->before(':')->headline() }}
     </div>
diff --git a/resources/views/components/status/restarting.blade.php b/resources/views/components/status/restarting.blade.php
index d9c353d02..12a99194d 100644
--- a/resources/views/components/status/restarting.blade.php
+++ b/resources/views/components/status/restarting.blade.php
@@ -3,7 +3,7 @@
 ])
 <x-loading wire:loading.delay.longer />
 <div class="flex items-center" wire:loading.remove.delay.longer>
-    <div class="badge badge-warning badge-xs"></div>
+    <div class="badge badge-warning "></div>
     <div class="pl-2 pr-1 text-xs font-bold tracking-widerr text-warning">
         {{ str($status)->before(':')->headline() }}
     </div>
diff --git a/resources/views/components/status/running.blade.php b/resources/views/components/status/running.blade.php
index 4751204ce..37ec2b030 100644
--- a/resources/views/components/status/running.blade.php
+++ b/resources/views/components/status/running.blade.php
@@ -3,7 +3,7 @@
 ])
 <x-loading wire:loading.delay.longer />
 <div class="flex items-center" wire:loading.remove.delay.longer>
-    <div class="badge badge-success badge-xs"></div>
+    <div class="badge badge-success "></div>
     <div class="pl-2 pr-1 text-xs font-bold tracking-wider text-success">
         {{ str($status)->before(':')->headline() }}
     </div>
diff --git a/resources/views/components/status/stopped.blade.php b/resources/views/components/status/stopped.blade.php
index ef84e915a..e97cf8f3f 100644
--- a/resources/views/components/status/stopped.blade.php
+++ b/resources/views/components/status/stopped.blade.php
@@ -3,6 +3,6 @@
 ])
 <x-loading wire:loading.delay.longer />
 <div class="flex items-center" wire:loading.remove.delay.longer>
-    <div class="badge badge-error badge-xs"></div>
+    <div class="badge badge-error "></div>
     <div class="pl-2 pr-1 text-xs font-bold tracking-wider text-error">{{ str($status)->before(':')->headline() }}</div>
 </div>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 7d74f7acb..8c6e4e5dc 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -1,17 +1,15 @@
 @extends('layouts.base')
 @section('body')
     @parent
-    <x-navbar />
-    @persist('magic-bar')
-        <div class="fixed z-30 top-[4.5rem] left-4" id="vue">
-            <magic-bar></magic-bar>
-        </div>
-    @endpersist
+
     <livewire:layout-popups />
     @auth
         <livewire:realtime-connection />
     @endauth
-    <main class="pb-10 main">
-        {{ $slot }}
+    <main class="flex gap-2">
+        <x-navbar />
+        <div class="w-full px-10 pt-4">
+            {{ $slot }}
+        </div>
     </main>
 @endsection
diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php
index 44ef50f53..91dec5b7b 100644
--- a/resources/views/layouts/base.blade.php
+++ b/resources/views/layouts/base.blade.php
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-theme="coollabs" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<html data-theme="coolify" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 
 <head>
     <meta charset="utf-8">
@@ -38,6 +38,7 @@
 @section('body')
 
     <body>
+        {{-- <button onclick="changeTheme()" class="fixed z-50 left-52">Dark/light</button> --}}
         @livewire('wire-elements-modal')
         <dialog id="help" class="modal">
             <livewire:help />
@@ -48,6 +49,22 @@
         <x-toast />
         <x-version class="fixed left-2 bottom-1" />
         <script data-navigate-once>
+            if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia(
+                    '(prefers-color-scheme: dark)').matches)) {
+                document.documentElement.classList.add('dark')
+            } else {
+                document.documentElement.classList.remove('dark')
+            }
+
+            function changeTheme() {
+                if (localStorage.theme === 'dark') {
+                    localStorage.theme = 'light'
+                    document.documentElement.classList.remove('dark')
+                } else {
+                    localStorage.theme = 'dark'
+                    document.documentElement.classList.add('dark')
+                }
+            }
             @auth
             window.Pusher = Pusher;
             window.Echo = new Echo({
diff --git a/resources/views/livewire/dashboard.blade.php b/resources/views/livewire/dashboard.blade.php
index e079d8301..60feb16ad 100644
--- a/resources/views/livewire/dashboard.blade.php
+++ b/resources/views/livewire/dashboard.blade.php
@@ -3,7 +3,7 @@
         <span x-data x-init="$wire.emit('error', '{{ session('error') }}')" />
     @endif
     <h1>Dashboard</h1>
-    <div class="subtitle">Your self-hosted environment</div>
+    {{-- <div class="subtitle">Your self-hosted environment</div> --}}
     @if (request()->query->get('success'))
         <div class="mb-10 text-white rounded alert alert-success">
             <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none"
diff --git a/resources/views/livewire/project/application/advanced.blade.php b/resources/views/livewire/project/application/advanced.blade.php
index d4566a2b2..dc6a188bf 100644
--- a/resources/views/livewire/project/application/advanced.blade.php
+++ b/resources/views/livewire/project/application/advanced.blade.php
@@ -4,7 +4,7 @@
             <h2>Advanced</h2>
         </div>
         <div>Advanced configuration for your application.</div>
-        <div class="flex flex-col pt-4 w-96">
+        <div class="flex flex-col gap-2 pt-4 w-96">
             <h3>General</h3>
             @if ($application->git_based())
                 <x-forms.checkbox helper="Automatically deploy new commits based on Git webhooks." instantSave
@@ -42,7 +42,9 @@
             <x-forms.checkbox disabled instantSave id="is_custom_ssl" label="Is Custom SSL?" />
             <x-forms.checkbox disabled instantSave id="is_http2" label="Is Http2?" /> --}}
         </div>
-        <h3>GPU</h3>
+        @if ($application->build_pack !== 'dockercompose')
+            <h3>GPU</h3>
+        @endif
         <form wire:submit="submit">
             @if ($application->build_pack !== 'dockercompose')
                 <div class="w-96">
diff --git a/resources/views/livewire/project/application/configuration.blade.php b/resources/views/livewire/project/application/configuration.blade.php
index 58a92b231..54644c5fa 100644
--- a/resources/views/livewire/project/application/configuration.blade.php
+++ b/resources/views/livewire/project/application/configuration.blade.php
@@ -3,31 +3,31 @@
     <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' && 'text-white'"
+            <a :class="activeTab === 'general' && 'dark:text-white text-black'"
                 @click.prevent="activeTab = 'general'; window.location.hash = 'general'" href="#">General</a>
             @if ($application->destination->server->isSwarm())
-                <a :class="activeTab === 'swarm' && 'text-white'"
+                <a :class="activeTab === 'swarm' && 'dark:text-white text-black'"
                     @click.prevent="activeTab = 'swarm'; window.location.hash = 'swarm'" href="#">Swarm
                     Configuration</a>
             @endif
-            <a :class="activeTab === 'advanced' && 'text-white'"
+            <a :class="activeTab === 'advanced' && 'dark:text-white text-black'"
                 @click.prevent="activeTab = 'advanced'; window.location.hash = 'advanced'" href="#">Advanced</a>
             @if ($application->build_pack !== 'static')
-                <a :class="activeTab === 'environment-variables' && 'text-white'"
+                <a :class="activeTab === 'environment-variables' && 'dark:text-white text-black'"
                     @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' && 'text-white'"
+                <a :class="activeTab === 'storages' && 'dark:text-white text-black'"
                     @click.prevent="activeTab = 'storages'; window.location.hash = 'storages'" href="#">Storages
                 </a>
             @endif
             @if ($application->git_based())
-                <a :class="activeTab === 'source' && 'text-white'"
+                <a :class="activeTab === 'source' && 'dark:text-white text-black'"
                     @click.prevent="activeTab = 'source'; window.location.hash = 'source'" href="#">Source</a>
             @endif
-            <a :class="activeTab === 'servers' && 'text-white'" class="flex items-center gap-2"
+            <a :class="activeTab === 'servers' && 'dark:text-white text-black'" 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' && 'text-white'"
+            <a :class="activeTab === 'scheduled-tasks' && 'dark:text-white text-black'"
                 @click.prevent="activeTab = 'scheduled-tasks'; window.location.hash = 'scheduled-tasks'"
                 href="#">Scheduled Tasks
             </a>
 
-            <a :class="activeTab === 'webhooks' && 'text-white'"
+            <a :class="activeTab === 'webhooks' && 'dark:text-white text-black'"
                 @click.prevent="activeTab = 'webhooks'; window.location.hash = 'webhooks'" href="#">Webhooks
             </a>
             @if ($application->git_based())
-                <a :class="activeTab === 'previews' && 'text-white'"
+                <a :class="activeTab === 'previews' && 'dark:text-white text-black'"
                     @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' && 'text-white'"
+                <a :class="activeTab === 'health' && 'dark:text-white text-black'"
                     @click.prevent="activeTab = 'health'; window.location.hash = 'health'" href="#">Healthchecks
                 </a>
             @endif
-            <a :class="activeTab === 'rollback' && 'text-white'"
+            <a :class="activeTab === 'rollback' && 'dark:text-white text-black'"
                 @click.prevent="activeTab = 'rollback'; window.location.hash = 'rollback'" href="#">Rollback
             </a>
             @if ($application->build_pack !== 'dockercompose')
-                <a :class="activeTab === 'resource-limits' && 'text-white'"
+                <a :class="activeTab === 'resource-limits' && 'dark:text-white text-black'"
                     @click.prevent="activeTab = 'resource-limits'; window.location.hash = 'resource-limits'"
                     href="#">Resource Limits
                 </a>
             @endif
-            <a :class="activeTab === 'resource-operations' && 'text-white'"
+            <a :class="activeTab === 'resource-operations' && 'dark:text-white text-black'"
                 @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 text-black'"
                 @click.prevent="activeTab = 'tags'; window.location.hash = 'tags'" href="#">Tags
             </a>
-            <a :class="activeTab === 'danger' && 'text-white'"
+            <a :class="activeTab === 'danger' && 'dark:text-white text-black'"
                 @click.prevent="activeTab = 'danger'; window.location.hash = 'danger'" href="#">Danger Zone
             </a>
         </div>
diff --git a/resources/views/livewire/project/application/general.blade.php b/resources/views/livewire/project/application/general.blade.php
index 449c83dbc..8deccc889 100644
--- a/resources/views/livewire/project/application/general.blade.php
+++ b/resources/views/livewire/project/application/general.blade.php
@@ -51,6 +51,7 @@
                                 helper="WARNING: Advanced use cases only. Your docker compose file will be deployed as-is. Nothing is modified by Coolify. You need to configure the proxy parts. More info in the <a href='https://coolify.io/docs/docker/compose#raw-docker-compose-deployment'>documentation.</a>" />
                         </div>
                         @if (count($parsedServices) > 0 && !$application->settings->is_raw_compose_deployment_enabled)
+                        <h3>Domains</h3>
                             @foreach (data_get($parsedServices, 'services') as $serviceName => $service)
                                 @if (!isDatabaseImage(data_get($service, 'image')))
                                     <div class="flex items-end gap-2">
diff --git a/resources/views/livewire/project/edit.blade.php b/resources/views/livewire/project/edit.blade.php
index 164ba34cd..4118efa55 100644
--- a/resources/views/livewire/project/edit.blade.php
+++ b/resources/views/livewire/project/edit.blade.php
@@ -20,7 +20,7 @@
                 <livewire:project.shared.environment-variable.add />
             </x-slot:content>
             <button @click="slideOverOpen=true"
-                class="font-normal text-white normal-case border-none rounded btn btn-primary btn-sm no-animation">+
+                class="button">+
                 Add</button>
         </x-slide-over>
     </div>
diff --git a/resources/views/livewire/project/environment-edit.blade.php b/resources/views/livewire/project/environment-edit.blade.php
index 758d737d3..7cd80308f 100644
--- a/resources/views/livewire/project/environment-edit.blade.php
+++ b/resources/views/livewire/project/environment-edit.blade.php
@@ -50,7 +50,7 @@
                 <livewire:project.shared.environment-variable.add />
             </x-slot:content>
             <button @click="slideOverOpen=true"
-                class="font-normal text-white normal-case border-none rounded btn btn-primary btn-sm no-animation">+
+                class="button">+
                 Add</button>
         </x-slide-over>
     </div>
diff --git a/resources/views/livewire/project/index.blade.php b/resources/views/livewire/project/index.blade.php
index 4e3f28c9f..bbfe84c8c 100644
--- a/resources/views/livewire/project/index.blade.php
+++ b/resources/views/livewire/project/index.blade.php
@@ -1,12 +1,11 @@
 <div>
     <div class="flex gap-2">
-        <h1>Projects</span></h1>
+        <h1>Projects</h1>
         @if ($servers > 0)
-            <x-forms.button class="btn" onclick="newEmptyProject.showModal()">+ Add</x-forms.button>
+            <x-forms.button onclick="newEmptyProject.showModal()">+ Add</x-forms.button>
             <livewire:project.add-empty />
         @endif
     </div>
-    <div class="subtitle ">All Projects</div>
     <div class="grid gap-2 lg:grid-cols-2">
         @if ($servers === 0)
             <div>
@@ -17,14 +16,14 @@
             @forelse ($projects as $project)
                 <div class="gap-2 border border-transparent cursor-pointer box group" x-data
                     x-on:click="goto('{{ $project->uuid }}')">
-                    <a  class="flex flex-col flex-1 mx-6 hover:no-underline"
+                    <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 ">
                             {{ $project->description }}</div>
                     </a>
                     <div class="flex items-center">
-                        <a  class="mx-4 rounded group-hover:text-white"
+                        <a class="mx-4 rounded group-hover:text-white"
                             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"
                                 stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
diff --git a/resources/views/livewire/project/resource/index.blade.php b/resources/views/livewire/project/resource/index.blade.php
index 03fc8c42a..bf70fc6ec 100644
--- a/resources/views/livewire/project/resource/index.blade.php
+++ b/resources/views/livewire/project/resource/index.blade.php
@@ -54,16 +54,16 @@ class="items-center justify-center box">+ Add New Resource</a>
                                 <div class="flex gap-2">
                                     <div class="pb-2 font-bold text-white" x-text="item.name"></div>
                                     <template x-if="item.status.startsWith('running')">
-                                        <div title="running" class="mt-1 bg-success badge badge-xs"></div>
+                                        <div title="running" class="mt-1 bg-success badge "></div>
                                     </template>
                                     <template x-if="item.status.startsWith('exited')">
-                                        <div title="exited" class="mt-1 bg-error badge badge-xs"></div>
+                                        <div title="exited" class="mt-1 bg-error badge "></div>
                                     </template>
                                     <template x-if="item.status.startsWith('restarting')">
-                                        <div title="restarting" class="mt-1 bg-warningbadge badge-xs"></div>
+                                        <div title="restarting" class="mt-1 bg-warningbadge "></div>
                                     </template>
                                     <template x-if="item.status.startsWith('degraded')">
-                                        <div title="degraded" class="mt-1 bg-warning badge badge-xs"></div>
+                                        <div title="degraded" class="mt-1 bg-warning badge "></div>
                                     </template>
                                 </div>
                                 <div class="max-w-full truncate description" x-text="item.description"></div>
@@ -87,16 +87,16 @@ class="items-center justify-center box">+ Add New Resource</a>
                                 <div class="flex gap-2">
                                     <div class="pb-2 font-bold text-white" x-text="item.name"></div>
                                     <template x-if="item.status.startsWith('running')">
-                                        <div title="running" class="mt-1 bg-success badge badge-xs"></div>
+                                        <div title="running" class="mt-1 bg-success badge "></div>
                                     </template>
                                     <template x-if="item.status.startsWith('exited')">
-                                        <div title="exited" class="mt-1 bg-error badge badge-xs"></div>
+                                        <div title="exited" class="mt-1 bg-error badge "></div>
                                     </template>
                                     <template x-if="item.status.startsWith('restarting')">
-                                        <div title="restarting" class="mt-1 bg-warningbadge badge-xs"></div>
+                                        <div title="restarting" class="mt-1 bg-warningbadge "></div>
                                     </template>
                                     <template x-if="item.status.startsWith('degraded')">
-                                        <div title="degraded" class="mt-1 bg-warning badge badge-xs"></div>
+                                        <div title="degraded" class="mt-1 bg-warning badge "></div>
                                     </template>
                                 </div>
                                 <div class="max-w-full truncate description" x-text="item.description"></div>
@@ -119,16 +119,16 @@ class="items-center justify-center box">+ Add New Resource</a>
                                 <div class="flex gap-2">
                                     <div class="pb-2 font-bold text-white" x-text="item.name"></div>
                                     <template x-if="item.status.startsWith('running')">
-                                        <div title="running" class="mt-1 bg-success badge badge-xs"></div>
+                                        <div title="running" class="mt-1 bg-success badge "></div>
                                     </template>
                                     <template x-if="item.status.startsWith('exited')">
-                                        <div title="exited" class="mt-1 bg-error badge badge-xs"></div>
+                                        <div title="exited" class="mt-1 bg-error badge "></div>
                                     </template>
                                     <template x-if="item.status.startsWith('restarting')">
-                                        <div title="restarting" class="mt-1 bg-warningbadge badge-xs"></div>
+                                        <div title="restarting" class="mt-1 bg-warningbadge "></div>
                                     </template>
                                     <template x-if="item.status.startsWith('degraded')">
-                                        <div title="degraded" class="mt-1 bg-warning badge badge-xs"></div>
+                                        <div title="degraded" class="mt-1 bg-warning badge "></div>
                                     </template>
                                 </div>
                                 <div class="max-w-full truncate description" x-text="item.description"></div>
@@ -151,16 +151,16 @@ class="items-center justify-center box">+ Add New Resource</a>
                                 <div class="flex gap-2">
                                     <div class="pb-2 font-bold text-white" x-text="item.name"></div>
                                     <template x-if="item.status.startsWith('running')">
-                                        <div title="running" class="mt-1 bg-success badge badge-xs"></div>
+                                        <div title="running" class="mt-1 bg-success badge "></div>
                                     </template>
                                     <template x-if="item.status.startsWith('exited')">
-                                        <div title="exited" class="mt-1 bg-error badge badge-xs"></div>
+                                        <div title="exited" class="mt-1 bg-error badge "></div>
                                     </template>
                                     <template x-if="item.status.startsWith('restarting')">
-                                        <div title="restarting" class="mt-1 bg-warningbadge badge-xs"></div>
+                                        <div title="restarting" class="mt-1 bg-warningbadge "></div>
                                     </template>
                                     <template x-if="item.status.startsWith('degraded')">
-                                        <div title="degraded" class="mt-1 bg-warning badge badge-xs"></div>
+                                        <div title="degraded" class="mt-1 bg-warning badge "></div>
                                     </template>
                                 </div>
                                 <div class="max-w-full truncate description" x-text="item.description"></div>
@@ -183,16 +183,16 @@ class="items-center justify-center box">+ Add New Resource</a>
                                 <div class="flex gap-2">
                                     <div class="pb-2 font-bold text-white" x-text="item.name"></div>
                                     <template x-if="item.status.startsWith('running')">
-                                        <div title="running" class="mt-1 bg-success badge badge-xs"></div>
+                                        <div title="running" class="mt-1 bg-success badge "></div>
                                     </template>
                                     <template x-if="item.status.startsWith('exited')">
-                                        <div title="exited" class="mt-1 bg-error badge badge-xs"></div>
+                                        <div title="exited" class="mt-1 bg-error badge "></div>
                                     </template>
                                     <template x-if="item.status.startsWith('restarting')">
-                                        <div title="restarting" class="mt-1 bg-warningbadge badge-xs"></div>
+                                        <div title="restarting" class="mt-1 bg-warningbadge "></div>
                                     </template>
                                     <template x-if="item.status.startsWith('degraded')">
-                                        <div title="degraded" class="mt-1 bg-warning badge badge-xs"></div>
+                                        <div title="degraded" class="mt-1 bg-warning badge "></div>
                                     </template>
                                 </div>
                                 <div class="max-w-full truncate description" x-text="item.description"></div>
@@ -215,16 +215,16 @@ class="items-center justify-center box">+ Add New Resource</a>
                                 <div class="flex gap-2">
                                     <div class="pb-2 font-bold text-white" x-text="item.name"></div>
                                     <template x-if="item.status.startsWith('running')">
-                                        <div title="running" class="mt-1 bg-success badge badge-xs"></div>
+                                        <div title="running" class="mt-1 bg-success badge "></div>
                                     </template>
                                     <template x-if="item.status.startsWith('exited')">
-                                        <div title="exited" class="mt-1 bg-error badge badge-xs"></div>
+                                        <div title="exited" class="mt-1 bg-error badge "></div>
                                     </template>
                                     <template x-if="item.status.startsWith('restarting')">
-                                        <div title="restarting" class="mt-1 bg-warningbadge badge-xs"></div>
+                                        <div title="restarting" class="mt-1 bg-warningbadge "></div>
                                     </template>
                                     <template x-if="item.status.startsWith('degraded')">
-                                        <div title="degraded" class="mt-1 bg-warning badge badge-xs"></div>
+                                        <div title="degraded" class="mt-1 bg-warning badge "></div>
                                     </template>
                                 </div>
                                 <div class="max-w-full truncate description" x-text="item.description"></div>
@@ -247,16 +247,16 @@ class="items-center justify-center box">+ Add New Resource</a>
                                 <div class="flex gap-2">
                                     <div class="pb-2 font-bold text-white" x-text="item.name"></div>
                                     <template x-if="item.status.startsWith('running')">
-                                        <div title="running" class="mt-1 bg-success badge badge-xs"></div>
+                                        <div title="running" class="mt-1 bg-success badge "></div>
                                     </template>
                                     <template x-if="item.status.startsWith('exited')">
-                                        <div title="exited" class="mt-1 bg-error badge badge-xs"></div>
+                                        <div title="exited" class="mt-1 bg-error badge "></div>
                                     </template>
                                     <template x-if="item.status.startsWith('restarting')">
-                                        <div title="restarting" class="mt-1 bg-warningbadge badge-xs"></div>
+                                        <div title="restarting" class="mt-1 bg-warningbadge "></div>
                                     </template>
                                     <template x-if="item.status.startsWith('degraded')">
-                                        <div title="degraded" class="mt-1 bg-warning badge badge-xs"></div>
+                                        <div title="degraded" class="mt-1 bg-warning badge "></div>
                                     </template>
                                 </div>
                                 <div class="max-w-full truncate description" x-text="item.description"></div>
diff --git a/resources/views/livewire/project/shared/destination.blade.php b/resources/views/livewire/project/shared/destination.blade.php
index b5596ea21..2658adf2c 100644
--- a/resources/views/livewire/project/shared/destination.blade.php
+++ b/resources/views/livewire/project/shared/destination.blade.php
@@ -6,10 +6,10 @@
             <div class="relative flex flex-col 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 badge-xs">
+                    <div title="{{ $resource->realStatus() }}" class="absolute bg-success -top-1 -left-1 badge ">
                     </div>
                 @elseif (str($resource->realStatus())->startsWith('exited'))
-                    <div title="{{ $resource->realStatus() }}" class="absolute bg-error -top-1 -left-1 badge badge-xs">
+                    <div title="{{ $resource->realStatus() }}" class="absolute bg-error -top-1 -left-1 badge ">
                     </div>
                 @endif
                 <div>
@@ -34,10 +34,10 @@
                     <div class="relative flex flex-col box w-96">
                         @if (str(data_get($destination, 'pivot.status'))->startsWith('running'))
                             <div title="{{ data_get($destination, 'pivot.status') }}"
-                                class="absolute bg-success -top-1 -left-1 badge badge-xs"></div>
+                                class="absolute bg-success -top-1 -left-1 badge "></div>
                         @elseif (str(data_get($destination, 'pivot.status'))->startsWith('exited'))
                             <div title="{{ data_get($destination, 'pivot.status') }}"
-                                class="absolute bg-error -top-1 -left-1 badge badge-xs"></div>
+                                class="absolute bg-error -top-1 -left-1 badge "></div>
                         @endif
                         <div>
                             Server: {{ data_get($destination, 'server.name') }}
diff --git a/resources/views/livewire/project/shared/environment-variable/all.blade.php b/resources/views/livewire/project/shared/environment-variable/all.blade.php
index 74e8f792d..c6e44db88 100644
--- a/resources/views/livewire/project/shared/environment-variable/all.blade.php
+++ b/resources/views/livewire/project/shared/environment-variable/all.blade.php
@@ -8,8 +8,7 @@
                     <x-slot:content>
                         <livewire:project.shared.environment-variable.add />
                     </x-slot:content>
-                    <button @click="slideOverOpen=true"
-                        class="font-normal text-white normal-case border-none rounded btn btn-primary btn-sm no-animation">+ Add</button>
+                    <button @click="slideOverOpen=true" class="button">+ Add</button>
                 </x-slide-over>
             @endif
             <x-forms.button
diff --git a/resources/views/livewire/project/shared/scheduled-task/add.blade.php b/resources/views/livewire/project/shared/scheduled-task/add.blade.php
index 7cd74e0bf..6448480b8 100644
--- a/resources/views/livewire/project/shared/scheduled-task/add.blade.php
+++ b/resources/views/livewire/project/shared/scheduled-task/add.blade.php
@@ -1,15 +1,10 @@
-<dialog id="newTask" class="modal">
-    <form method="dialog" class="flex flex-col gap-2 rounded modal-box" wire:submit='submit'>
-        <h3 class="text-lg font-bold">Add Scheduled Task</h3>
-        <x-forms.input placeholder="Run cron" id="name" label="Name" required />
-        <x-forms.input placeholder="php artisan schedule:run" id="command" label="Command" required />
-        <x-forms.input placeholder="0 0 * * * or daily" id="frequency" label="Frequency" required />
-        <x-forms.input placeholder="php" id="container" helper="You can leave it empty if your resource only have one container." label="Container name" />
-        <x-forms.button onclick="newTask.close()" type="submit">
-            Save
-        </x-forms.button>
-    </form>
-    <form method="dialog" class="modal-backdrop">
-        <button>close</button>
-    </form>
-</dialog>
+<form class="flex flex-col gap-2 rounded" wire:submit='submit'>
+    <x-forms.input placeholder="Run cron" id="name" label="Name"  />
+    <x-forms.input placeholder="php artisan schedule:run" id="command" label="Command"  />
+    <x-forms.input placeholder="0 0 * * * or daily" id="frequency" label="Frequency"  />
+    <x-forms.input placeholder="php" id="container"
+        helper="You can leave it empty if your resource only have one container." label="Container name" />
+    <x-forms.button @click="slideOverOpen=false" type="submit">
+        Save
+    </x-forms.button>
+</form>
diff --git a/resources/views/livewire/project/shared/scheduled-task/all.blade.php b/resources/views/livewire/project/shared/scheduled-task/all.blade.php
index 32ed50bb1..e751577c7 100644
--- a/resources/views/livewire/project/shared/scheduled-task/all.blade.php
+++ b/resources/views/livewire/project/shared/scheduled-task/all.blade.php
@@ -1,11 +1,15 @@
 <div>
     <div class="flex gap-2">
-        <h2 class="pb-4">Scheduled Tasks</h2>
-        <x-forms.button class="btn" onclick="newTask.showModal()">+ Add</x-forms.button>
-        <livewire:project.shared.scheduled-task.add />
+        <h2>Scheduled Tasks</h2>
+        <x-slide-over>
+            <x-slot:title>New Scheduled Task</x-slot:title>
+            <x-slot:content>
+                <livewire:project.shared.scheduled-task.add />
+            </x-slot:content>
+            <button @click="slideOverOpen=true" class="button">+ Add</button>
+        </x-slide-over>
     </div>
-
-    <div class="flex flex-wrap gap-2">
+    <div class="flex flex-wrap gap-2 pt-4">
         @forelse($resource->scheduled_tasks as $task)
             <a class="flex flex-col box"
                 @if ($resource->type() == 'application')
diff --git a/resources/views/livewire/server/index.blade.php b/resources/views/livewire/server/index.blade.php
index 75812698a..605a41152 100644
--- a/resources/views/livewire/server/index.blade.php
+++ b/resources/views/livewire/server/index.blade.php
@@ -5,7 +5,6 @@
             <x-forms.button class="btn">+ Add</x-forms.button>
         </a>
     </div>
-    <div class="subtitle ">All Servers</div>
     <div class="grid gap-2 lg:grid-cols-2">
         @forelse ($servers as $server)
             <a href="{{ route('server.show', ['server_uuid' => data_get($server, 'uuid')]) }}"
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 c2a5dade9..d8e859cad 100644
--- a/resources/views/livewire/server/proxy/dynamic-configuration-navbar.blade.php
+++ b/resources/views/livewire/server/proxy/dynamic-configuration-navbar.blade.php
@@ -8,7 +8,7 @@
                     :newFile="$newFile" wire:key="{{ $fileName }}" />
             </x-slot:content>
             <button @click="slideOverOpen=true"
-                class="font-normal text-white normal-case border-none rounded btn btn-primary btn-sm no-animation">Edit</button>
+                class="button">Edit</button>
         </x-slide-over>
     </div>
     <x-forms.button isError wire:click="delete('{{ $fileName }}')">Delete</x-forms.button>
diff --git a/resources/views/livewire/server/proxy/dynamic-configurations.blade.php b/resources/views/livewire/server/proxy/dynamic-configurations.blade.php
index bc768f392..7d5aae932 100644
--- a/resources/views/livewire/server/proxy/dynamic-configurations.blade.php
+++ b/resources/views/livewire/server/proxy/dynamic-configurations.blade.php
@@ -15,7 +15,7 @@
                                     <livewire:server.proxy.new-dynamic-configuration />
                                 </x-slot:content>
                                 <button @click="slideOverOpen=true"
-                                    class="font-normal text-white normal-case border-none rounded btn btn-primary btn-sm no-animation">+
+                                    class="button">+
                                     Add</button>
                             </x-slide-over>
                         </div>
diff --git a/resources/views/livewire/team-shared-variables-index.blade.php b/resources/views/livewire/team-shared-variables-index.blade.php
index 0dc69447e..64560bc3c 100644
--- a/resources/views/livewire/team-shared-variables-index.blade.php
+++ b/resources/views/livewire/team-shared-variables-index.blade.php
@@ -7,12 +7,12 @@
             <x-slot:content>
                 <livewire:project.shared.environment-variable.add />
             </x-slot:content>
-            <button @click="slideOverOpen=true"
-                class="font-normal text-white normal-case border-none rounded btn btn-primary btn-sm no-animation">+
+            <button @click="slideOverOpen=true" class="button">+
                 Add</button>
         </x-slide-over>
     </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
+    <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>
     </div>
 
diff --git a/resources/views/livewire/upgrade.blade.php b/resources/views/livewire/upgrade.blade.php
index 8d2242f41..f1b2de5e0 100644
--- a/resources/views/livewire/upgrade.blade.php
+++ b/resources/views/livewire/upgrade.blade.php
@@ -1,8 +1,7 @@
-<li @if ($isUpgradeAvailable) title="New version available" @else title="No upgrade available" @endif
+<div @if ($isUpgradeAvailable) title="New version available" @else title="No upgrade available" @endif
     x-init="$wire.checkUpdate" x-data>
     @if ($isUpgradeAvailable)
-        <button wire:key="upgrade" wire:click='upgrade' class="hover:bg-transparent focus:bg-transparent"
-            x-on:click="upgrade">
+        <button wire:key="upgrade" wire:click='upgrade' class="menu-item" x-on:click="upgrade">
             @if ($showProgress)
                 <svg xmlns="http://www.w3.org/2000/svg"
                     class="w-6 h-6 text-pink-500 transition-colors hover:text-pink-300 lds-heart" viewBox="0 0 24 24"
@@ -11,6 +10,7 @@ class="w-6 h-6 text-pink-500 transition-colors hover:text-pink-300 lds-heart" vi
                     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                     <path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
                 </svg>
+                Inprogress
             @else
                 <svg xmlns="http://www.w3.org/2000/svg"
                     class="w-6 h-6 text-pink-500 transition-colors hover:text-pink-300" viewBox="0 0 24 24"
@@ -22,10 +22,11 @@ class="w-6 h-6 text-pink-500 transition-colors hover:text-pink-300" viewBox="0 0
                     <path d="M9 21h6" />
                     <path d="M9 18h6" />
                 </svg>
+                Upgrade
             @endif
         </button>
     @else
-        <button class="hover:bg-transparent">
+        <button class="menu-item">
             <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 transition-colors text-neutral-700"
                 viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
                 stroke-linejoin="round">
@@ -35,6 +36,7 @@ class="w-6 h-6 text-pink-500 transition-colors hover:text-pink-300" viewBox="0 0
                 <path d="M9 21h6" />
                 <path d="M9 18h6" />
             </svg>
+            <div class="w-20"></div>
         </button>
     @endif
-</li>
+</div>
diff --git a/tailwind.config.js b/tailwind.config.js
index bfc322748..4716e0740 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,19 @@
 /** @type {import('tailwindcss').Config} */
+const colors = {
+    "base": "#101010",
+    "warning": "#FCD452",
+    "success": "#16A34A",
+    "error": "#DC2626",
+    "coollabs": "#6B16ED",
+    "coollabs-100": "#7317FF",
+    "coolgray-100": "#181818",
+    "coolgray-200": "#202020",
+    "coolgray-300": "#242424",
+    "coolgray-400": "#282828",
+    "coolgray-500": "#323232",
+}
 module.exports = {
+    darkMode: "selector",
     content: [
         './vendor/wire-elements/modal/resources/views/*.blade.php',
         './storage/framework/views/*.php',
@@ -13,42 +27,17 @@ module.exports = {
             fontFamily: {
                 sans: ["Inter", "sans-serif"],
             },
-            colors: {
-                coollabs: "#6B16ED",
-                "coollabs-100": "#7317FF",
-                "coolgray-100": "#181818",
-                "coolgray-200": "#202020",
-                "coolgray-300": "#242424",
-                "coolgray-400": "#282828",
-                "coolgray-500": "#323232",
-            },
+            colors
         },
     },
     variants: {
         scrollbar: ["dark"],
         extend: {},
     },
-    daisyui: {
-        themes: [
-            {
-                coollabs: {
-                    primary: "#202020",
-                    "primary-focus": "#242424",
-                    secondary: "#6B16ED",
-                    accent: "#4338ca",
-                    neutral: "#1B1D1D",
-                    "base-100": "#101010",
-                    info: "#2563EB",
-                    success: "#16A34A",
-                    warning: "#FCD34D",
-                    error: "#DC2626",
-                },
-            },
-        ],
-    },
+
     plugins: [
-        require("daisyui"),
         require("tailwindcss-scrollbar"),
         require("@tailwindcss/typography"),
+        require("@tailwindcss/forms")
     ],
 };