diff --git a/app/View/Components/Forms/Input.php b/app/View/Components/Forms/Input.php
new file mode 100644
index 000000000..06c077474
--- /dev/null
+++ b/app/View/Components/Forms/Input.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace App\View\Components\Forms;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+use Visus\Cuid2\Cuid2;
+use Illuminate\Support\Str;
+
+class Input extends Component
+{
+    public function __construct(
+        public string|null $id = null,
+        public string|null $name = null,
+        public string|null $type = 'text',
+        public string|null $value = null,
+        public string|null $label = null,
+        public string|null $placeholder = null,
+        public bool $required = false,
+        public bool $disabled = false,
+        public bool $readonly = false,
+        public string|null $helper = null,
+        public bool $noDirty = false,
+        public bool $cannotPeakPassword = false,
+    ) {
+    }
+
+    public function render(): View|Closure|string
+    {
+        if (is_null($this->id)) $this->id = new Cuid2(7);
+        if (is_null($this->name)) $this->name = $this->id;
+
+        $this->label = Str::title($this->label);
+        return view('components.forms.input');
+    }
+}
diff --git a/resources/css/app.css b/resources/css/app.css
index 3250a89e2..dd6382f00 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -5,41 +5,39 @@
 .scrollbar {
     @apply scrollbar-thumb-coollabs-100 scrollbar-track-coolgray-200 scrollbar-w-1;
 }
-
 html {
-    @apply min-h-screen h-full bg-coolgray-100;
+    @apply text-neutral-400;
 }
-
 body {
-    @apply scrollbar min-h-screen bg-coolgray-100 text-neutral-400 antialiased;
+    @apply scrollbar antialiased;
 }
-main {
+.main {
     @apply pl-24 pr-10 mx-auto max-w-screen-xl pt-4;
 }
-
+input {
+    @apply input input-sm h-7 outline-none placeholder:text-neutral-700 text-white rounded bg-coolgray-200 w-full;
+}
 input[type="checkbox"] {
     @apply toggle toggle-warning toggle-xs rounded;
 }
-input {
-    @apply input input-sm h-7 outline-none placeholder:text-neutral-700 text-white rounded;
-}
+
 input[type="text"],
 [type="number"],
 [type="email"],
 [type="password"] {
-    @apply read-only:bg-coolgray-200/50 read-only:text-opacity-25;
+    @apply read-only:bg-coolgray-200/50 read-only:text-opacity-25 border-none;
+}
+textarea {
+    @apply textarea placeholder:text-neutral-700 text-white rounded scrollbar bg-coolgray-200;
+}
+select {
+    @apply h-7 select select-xs text-sm disabled:bg-coolgray-200 border-none disabled:opacity-50 font-normal placeholder:text-neutral-700 text-white rounded bg-coolgray-200;
 }
 .label-text,
 label {
     @apply text-neutral-400 text-sm;
 }
 
-textarea {
-    @apply textarea placeholder:text-neutral-700 text-white rounded scrollbar;
-}
-select {
-    @apply h-7 select select-xs text-sm disabled:bg-coolgray-200 border-none disabled:opacity-50 font-normal placeholder:text-neutral-700 text-white rounded;
-}
 .loading {
     @apply w-4 text-warning;
 }
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 30937c16e..fdfce764d 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -1,5 +1,5 @@
 <x-layout-simple>
-    <div class="flex items-center justify-center h-screen">
+    <div class="min-h-screen hero">
         <div class="w-96 min-w-fit">
             <div class="flex flex-col items-center pb-8">
                 <div class="text-5xl font-extrabold tracking-tight text-center text-white">Coolify</div>
@@ -7,14 +7,19 @@
             </div>
             <div class="flex items-center gap-2">
                 <h1>{{ __('auth.login') }}</h1>
-
+                @if ($is_registration_enabled)
+                    <a href="/register"
+                        class="text-xs text-center text-white normal-case bg-transparent border-none rounded no-animation hover:no-underline btn btn-sm bg-coollabs-gradient">
+                        {{ __('auth.register_now') }}
+                    </a>
+                @endif
             </div>
             <div>
                 <form action="/login" method="POST" class="flex flex-col gap-2">
                     @csrf
                     @env('local')
-                    <x-forms.input value="test@example.com" type="email" name="email" label="{{ __('input.email') }}"
-                        autofocus />
+                    <x-forms.input value="test@example.com" type="email" name="email"
+                        label="{{ __('input.email') }}" autofocus />
 
                     <x-forms.input value="password" type="password" name="password"
                         label="{{ __('input.password') }}" />
@@ -27,12 +32,7 @@
                     @endenv
 
                     <x-forms.button type="submit">{{ __('auth.login') }}</x-forms.button>
-                    @if ($is_registration_enabled)
-                        <a href="/register"
-                            class="text-xs text-center text-white normal-case bg-transparent border-none rounded no-animation hover:no-underline btn btn-sm bg-coollabs-gradient">
-                            {{ __('auth.register_now') }}
-                        </a>
-                    @else
+                    @if (!$is_registration_enabled)
                         <div class="text-sm text-center">{{ __('auth.registration_disabled') }}</div>
                     @endif
                     @if ($errors->any())
diff --git a/resources/views/components/forms/input.blade.php b/resources/views/components/forms/input.blade.php
index 50daa43d5..c3c85d828 100644
--- a/resources/views/components/forms/input.blade.php
+++ b/resources/views/components/forms/input.blade.php
@@ -1,15 +1,4 @@
-@props([
-    'id' => $attributes->has('id'),
-    'type' => $attributes->get('type') ?? 'text',
-    'label' => $attributes->has('label'),
-    'readonly' => null,
-    'required' => null,
-    'disabled' => null,
-    'helper' => $attributes->has('helper'),
-    'noDirty' => $attributes->has('noDirty'),
-    'cannotPeak' => $attributes->has('cannotPeak'),
-])
-<div {{ $attributes->merge(['class' => 'w-full form-control']) }}>
+<div class="w-full">
     @if ($label)
         <label class="label">
             <span class="flex gap-1 label-text">
@@ -18,52 +7,28 @@
                     <span class="text-warning">*</span>
                 @endif
                 @if ($helper)
-                    <div class="group">
-                        <div class="cursor-pointer text-warning">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                                class="w-4 h-4 stroke-current">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                            </svg>
-                        </div>
-                        <div class="absolute hidden text-xs group-hover:block border-coolgray-400 bg-coolgray-500">
-                            <div class="p-4 card-body">
-                                {!! $helper !!}
-                            </div>
-                        </div>
-                    </div>
+                    <x-helper :helper="$helper" />
                 @endif
             </span>
         </label>
     @endif
-    @if ($type === 'password')
-        <div class="join" x-data>
-            <input class="w-full join-item" type={{ $type }} @class([
-                'border-r-0 rounded-l' => $cannotPeak,
-            ]) @if ($id) id={{ $id }} name={{ $id }}
-        wire:model.defer={{ $id }} @endisset
-        @if ($disabled !== null) disabled @endif
-        @if ($required !== null) required @endif @if ($readonly !== null) readonly @endif
-            @if (!$noDirty && $id) wire:dirty.class="input-warning"
-            @endif {{ $attributes }} />
-            @if (!$cannotPeak)
-                @if (!$disabled)
+
+    <div class="w-full">
+        @if ($type === 'password')
+            <div class="w-full join" x-data>
+                <input class="join-item" @readonly($readonly) @disabled($disabled || $errors->isNotEmpty()) type={{ $type }}
+                    id={{ $id }} name={{ $name }} value={{ $value }}
+                    placeholder={{ $placeholder }}>
+                @if ($cannotPeakPassword)
                     <span x-on:click="changePasswordFieldType('{{ $id }}')" x-cloak
-                        class="border-l-0 border-none rounded-r hover:bg-coolgray-200 no-animation h-7 btn join-item btn-xs bg-coolgray-200 "><svg
-                            xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 icon" viewBox="0 0 24 24"
-                            stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
-                            stroke-linejoin="round">
-                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                            <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
-                            <path
-                                d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
-                        </svg></span>
-                @else
-                    <span x-on:click="changePasswordFieldType('{{ $id }}')" x-cloak
-                        class="text-opacity-25 border-l-0 rounded-r bg-coolgray-200/50 hover:bg-coolgray-200/50 no-animation h-7 btn join-item btn-xs"><svg
-                            xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 icon" viewBox="0 0 24 24"
-                            stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
-                            stroke-linejoin="round">
+                        @class([
+                            'border-l-0 border-none rounded-r no-animation h-7 btn join-item btn-xs',
+                            'bg-coolgray-200/50 hover:bg-coolgray-200/50 text-opacity-25' =>
+                                $disabled || $readonly,
+                            'bg-coolgray-200 hover:bg-coolgray-200' => !$disabled || !$readonly,
+                        ])><svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 icon"
+                            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
+                            stroke-linecap="round" stroke-linejoin="round">
                             <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                             <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                             <path
@@ -71,19 +36,15 @@
                         </svg>
                     </span>
                 @endif
-            @endif
+            </div>
+        @else
+            <input id={{ $id }} name={{ $name }} wire:model.defer={{ $id }}
+                wire:dirty.class="input-warning" @readonly($readonly) @disabled($disabled || $errors->isNotEmpty())
+                @isset($value) value={{ $value }} @endisset
+                @isset($placeholder) placeholder={{ $placeholder }} @endisset>
+        @endif
+        @if (!$label && $helper)
+            <x-helper :helper="$helper" />
+        @endif
     </div>
-@else
-    <input type={{ $type }}
-        @if ($id) name={{ $id }} wire:model.defer={{ $id }} @endisset
-        @if ($disabled !== null) disabled @endif
-        @if ($required !== null) required @endif @if ($readonly !== null) readonly @endif
-        @if (!$noDirty && $id) wire:dirty.class="input-warning" @endif {{ $attributes }} />
-@endif
-
-@error($id)
-    <label class="label">
-        <span class="text-red-500 label-text-alt">{{ $message }}</span>
-    </label>
-@enderror
 </div>
diff --git a/resources/views/components/helper.blade.php b/resources/views/components/helper.blade.php
index a074aca2c..35d22c2f3 100644
--- a/resources/views/components/helper.blade.php
+++ b/resources/views/components/helper.blade.php
@@ -1,6 +1,3 @@
-@props([
-    'helper' => $attributes->has('helper'),
-])
 <div class="group">
     <div class="cursor-pointer text-warning">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 stroke-current">
@@ -8,7 +5,7 @@
                 d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
         </svg>
     </div>
-    <div class="absolute hidden text-xs group-hover:block border-coolgray-400 bg-coolgray-500">
+    <div class="absolute hidden text-xs rounded group-hover:block border-coolgray-400 bg-coolgray-500">
         <div class="p-4 card-body">
             {!! $helper !!}
         </div>
diff --git a/resources/views/components/layout-simple.blade.php b/resources/views/components/layout-simple.blade.php
index 4218ffdd0..54945a375 100644
--- a/resources/views/components/layout-simple.blade.php
+++ b/resources/views/components/layout-simple.blade.php
@@ -26,6 +26,17 @@
         {{ $slot }}
     </main>
     <x-version class="fixed left-2 bottom-1" />
+    <script>
+        function changePasswordFieldType(id) {
+            console.log(id)
+            const input = document.getElementById(id);
+            if (input.type === 'password') {
+                input.type = 'text';
+            } else {
+                input.type = 'password';
+            }
+        }
+    </script>
 </body>
 
 </html>
diff --git a/resources/views/components/layout.blade.php b/resources/views/components/layout.blade.php
index e8da7e150..fade33a76 100644
--- a/resources/views/components/layout.blade.php
+++ b/resources/views/components/layout.blade.php
@@ -26,18 +26,16 @@
 
 <body>
     @livewireScripts
-    <x-toaster-hub />
     @auth
+        <x-toaster-hub />
         <x-navbar />
-    @endauth
-    <div class="fixed top-3 left-4" id="vue">
-        <magic-bar></magic-bar>
-    </div>
-    <main>
-        {{ $slot }}
-    </main>
-    <x-version class="fixed left-2 bottom-1" />
-    @auth
+        <div class="fixed top-3 left-4" id="vue">
+            <magic-bar></magic-bar>
+        </div>
+        <main class="main">
+            {{ $slot }}
+        </main>
+        <x-version class="fixed left-2 bottom-1" />
         <script>
             let checkHealthInterval = null;
             let checkIfIamDeadInterval = null;
@@ -100,16 +98,9 @@
             })
         </script>
     @endauth
-    <script>
-        function changePasswordFieldType(id) {
-            const input = document.getElementById(id);
-            if (input.type === 'password') {
-                input.type = 'text';
-            } else {
-                input.type = 'password';
-            }
-        }
-    </script>
+    @guest
+        {{ $slot }}
+    @endguest
 </body>
 
 </html>
diff --git a/resources/views/livewire/private-key/change.blade.php b/resources/views/livewire/private-key/change.blade.php
index 4ad5f408c..4f80b986f 100644
--- a/resources/views/livewire/private-key/change.blade.php
+++ b/resources/views/livewire/private-key/change.blade.php
@@ -10,7 +10,7 @@
                 Delete
             </x-forms.button>
         </div>
-        <div class="pt-2 pb-8 text-sm">Private Key used for SSH connection</div>
+        <div class="pb-8 text-sm">Private Key used for SSH connection</div>
         <x-forms.input id="private_key.name" label="Name" required />
         <x-forms.input id="private_key.description" label="Description" />
         <div>
diff --git a/resources/views/livewire/project/application/environment-variable/show.blade.php b/resources/views/livewire/project/application/environment-variable/show.blade.php
index 00ddaf890..eda3afdeb 100644
--- a/resources/views/livewire/project/application/environment-variable/show.blade.php
+++ b/resources/views/livewire/project/application/environment-variable/show.blade.php
@@ -1,7 +1,7 @@
 <div x-data="{ deleteEnvironment: false }">
     <form wire:submit.prevent='submit' class="flex flex-col gap-2 xl:items-end xl:flex-row">
-        <x-forms.input label="Name" id="env.key" />
-        <x-forms.input label="Value" id="env.value" />
+        <x-forms.input id="env.key" label="Name" />
+        <x-forms.input id="env.value" label="Value" />
         <x-forms.checkbox disabled id="env.is_build_time" label="Build Variable?" />
         <div class="flex gap-2">
             <x-forms.button type="submit">
diff --git a/resources/views/livewire/project/application/general.blade.php b/resources/views/livewire/project/application/general.blade.php
index b96fcad1d..3ec626a88 100644
--- a/resources/views/livewire/project/application/general.blade.php
+++ b/resources/views/livewire/project/application/general.blade.php
@@ -9,8 +9,8 @@
         <div class="text-sm">General configuration for your application.</div>
         <div class="flex flex-col gap-2 py-4">
             <div class="flex flex-col items-end gap-2 xl:flex-row">
-                <x-forms.input class="w-full" id="application.name" label="Name" required />
-                <x-forms.input placeholder="https://coolify.io" class="w-full" id="application.fqdn" label="Domains"
+                <x-forms.input id="application.name" label="Name" required />
+                <x-forms.input placeholder="https://coolify.io" id="application.fqdn" label="Domains"
                     helper="You can specify one domain with path or more with comma.<br><span class='text-helper'>Example</span>- http://app.coolify.io, https://cloud.coolify.io/dashboard<br>- http://app.coolify.io/api/v3" />
 
             </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 154269aec..1d1568f6c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -42,7 +42,7 @@ module.exports = {
                     secondary: "#4338ca",
                     accent: "#4338ca",
                     neutral: "#1B1D1D",
-                    "base-100": "#212121",
+                    "base-100": "#181818",
                     info: "#2563EB",
                     success: "#16A34A",
                     warning: "#FCD34D",