diff --git a/app/Http/Livewire/DonorForm.php b/app/Http/Livewire/DonorForm.php
new file mode 100644
index 0000000..7cb50f0
--- /dev/null
+++ b/app/Http/Livewire/DonorForm.php
@@ -0,0 +1,79 @@
+<?php
+
+namespace App\Http\Livewire;
+
+use Filament\Forms;
+use Filament\Forms\Concerns\InteractsWithForms;
+use Filament\Forms\Contracts\HasForms;
+use Filament\Notifications\Notification;
+use Livewire\Component;
+
+class DonorForm extends Component implements HasForms
+{
+    use InteractsWithForms;
+
+    public array $donation = [
+        'name' => '',
+        'email' => '',
+        'full_address' => '',
+        'job_title' => 'Developer/QA/PM',
+        'social_type' => '',
+        'social_url' => 'https://twitter.com/danielhe4rt'
+    ];
+
+    public function render()
+    {
+        return view('livewire.donor-form');
+    }
+
+    public function mount()
+    {
+        $this->form->fill($this->donation);
+    }
+
+    protected function getFormSchema(): array
+    {
+        return [
+            Forms\Components\TextInput::make('name')
+                ->label('Nome e Sobrenome')
+                ->string()
+                ->required(),
+            Forms\Components\TextInput::make('email')
+                ->label('Seu Email')
+                ->email()
+                ->required(),
+            Forms\Components\TextInput::make('full_address')
+                ->label('Local de Doação')
+                ->placeholder('Cachoeira Paulista - SP / BR')
+                ->required(),
+            Forms\Components\TextInput::make('job_title')
+                ->label('Cargo/Titulo')
+                ->placeholder('Desenvolvedor / Estudante')
+                ->required(),
+            Forms\Components\Select::make('social_type')
+                ->options([
+                    'twitter' => 'Twitter',
+                    'instagram' => 'Instagram',
+                    'github' => 'Github',
+                    'none' => 'Não uso rede social'
+                ]),
+            Forms\Components\TextInput::make('social_url')
+                ->placeholder('https://twitter.com/danielhe4rt')
+                ->url(),
+        ];
+    }
+
+    public function submit(): void
+    {
+        Notification::make()
+            ->title('Obrigado pela doação!')
+            ->body('Iremos revisar sua submissão e em breve estará em nosso site!')
+            ->success()
+            ->send();
+    }
+
+    public function getFormStatePath(): string
+    {
+        return 'donation';
+    }
+}
diff --git a/package-lock.json b/package-lock.json
index aa56f7a..4d4c79e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,9 @@
     "requires": true,
     "packages": {
         "": {
+            "dependencies": {
+                "@awcodes/alpine-floating-ui": "^3.5.0"
+            },
             "devDependencies": {
                 "@tailwindcss/forms": "^0.5.3",
                 "@tailwindcss/typography": "^0.5.9",
@@ -27,6 +30,11 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/@awcodes/alpine-floating-ui": {
+            "version": "3.5.0",
+            "resolved": "https://registry.npmjs.org/@awcodes/alpine-floating-ui/-/alpine-floating-ui-3.5.0.tgz",
+            "integrity": "sha512-T6nRG5KwLzVq5ysgd3GmtP6QQY/7UvpJXpAKfRu4sFFTByu6y67ao2J3BtXGDynNSEzHse56IBC12uhuSpW19Q=="
+        },
         "node_modules/@esbuild/android-arm": {
             "version": "0.17.19",
             "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.19.tgz",
diff --git a/package.json b/package.json
index 67d04d0..727a16d 100644
--- a/package.json
+++ b/package.json
@@ -14,5 +14,8 @@
         "postcss": "^8.4.24",
         "tailwindcss": "^3.3.2",
         "vite": "^4.0.0"
+    },
+    "dependencies": {
+        "@awcodes/alpine-floating-ui": "^3.5.0"
     }
 }
diff --git a/resources/css/app.css b/resources/css/app.css
index 5fdcc74..8e3744a 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -3,3 +3,24 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+
+
+
+.filament-forms-text-input-component {
+    @apply  w-full p-2.5 !important;
+}
+
+.filament-forms-input {
+    @apply w-full px-5 py-4 text-gray-500 text-base bg-transparent border border-gray-800 outline-none focus:ring-4 focus:ring-indigo-500 placeholder-gray-500 resize-none rounded !important;
+}
+
+.filament-forms-component-container {
+    @apply w-full;
+}
+
+.filament-forms-input > select{
+    @apply w-full px-5 py-4 text-gray-500 text-base bg-transparent border border-gray-800 outline-none focus:ring-4 focus:ring-indigo-500 placeholder-gray-500 resize-none rounded !important;
+
+
+}
diff --git a/resources/js/app.js b/resources/js/app.js
index 88d5f3a..11d41c9 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,8 +1,8 @@
 import Alpine from 'alpinejs'
-import FormsAlpinePlugin from '../../vendor/filament/forms/dist/module.esm'
+import AlpineFloatingUI from '@awcodes/alpine-floating-ui'
 import NotificationsAlpinePlugin from '../../vendor/filament/notifications/dist/module.esm'
 
-Alpine.plugin(FormsAlpinePlugin)
+Alpine.plugin(AlpineFloatingUI)
 Alpine.plugin(NotificationsAlpinePlugin)
 
 window.Alpine = Alpine
diff --git a/resources/views/livewire/donor-form.blade.php b/resources/views/livewire/donor-form.blade.php
new file mode 100644
index 0000000..27e1af8
--- /dev/null
+++ b/resources/views/livewire/donor-form.blade.php
@@ -0,0 +1,14 @@
+<div class="w-full">
+    <form class="h-auto" wire:submit.prevent="submit">
+        {{ $this->form }}
+
+        <button
+            class="p-1 w-full font-heading font-semibold text-xs text-gray-900 uppercase tracking-px overflow-hidden rounded-md">
+            <div class="relative p-5 px-11 bg-gradient-green overflow-hidden rounded-md">
+                <div
+                    class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-white transition ease-in-out duration-500"></div>
+                <p class="relative z-10">Send message</p>
+            </div>
+        </button>
+    </form>
+</div>
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
index 7fc92ea..85d28f6 100644
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -9,6 +9,9 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap">
     <link rel="icon" type="image/png" sizes="32x32" href="shuffle-for-tailwind.png">
     @vite(['resources/css/app.css', 'resources/js/app.js'])
+    @livewireScripts
+    @livewireStyles
+    @livewire('notifications')
 </head>
 <body class="antialiased bg-body text-body font-body">
 <div>
@@ -696,46 +699,15 @@ class="h-full p-0.5 bg-gradient-cyan transform hover:-translate-y-3 rounded-10 t
     <section class="pt-24 pb-32 bg-black overflow-hidden">
         <div class="container mx-auto px-4">
             <div class="max-w-lg mx-auto text-center mb-14">
-                <h2 class="mb-5 font-heading font-semibold text-6xl sm:text-7xl text-white">Participe Agora!
-                </h2>
+                <h2 class="mb-5 font-heading font-semibold text-6xl sm:text-7xl text-white">Participe Agora!</h2>
                 <p class="text-gray-400 text-lg">Preencha o formulário com informações de onde você doará sangue e deixe
                     seu contato.
                 </p>
             </div>
+
             <div class="flex flex-wrap max-w-xl mx-auto -m-2.5">
-                <div class="w-full p-2.5">
-                    <input
-                        class="w-full px-5 py-4 text-gray-500 text-base bg-transparent border border-gray-800 outline-none focus:ring-4 focus:ring-indigo-500 placeholder-gray-500 rounded"
-                        type="text" placeholder="Your full name">
-                </div>
-                <div class="w-full p-2.5">
-                    <input
-                        class="w-full px-5 py-4 text-gray-500 text-base bg-transparent border border-gray-800 outline-none focus:ring-4 focus:ring-indigo-500 placeholder-gray-500 rounded"
-                        type="text" placeholder="Your email address">
-                </div>
-                <div class="w-full p-2.5"><textarea
-                        class="w-full h-40 px-5 py-4 text-gray-500 text-base bg-transparent border border-gray-800 outline-none focus:ring-4 focus:ring-indigo-500 placeholder-gray-500 resize-none rounded"
-                        type="text" placeholder="Write message"></textarea></div>
-                <div class="w-full p-2.5">
-                    <div class="group relative">
-                        <div
-                            class="absolute top-0 left-0 w-full h-full bg-gradient-green opacity-0 group-hover:opacity-50 rounded-lg transition ease-out duration-300"></div>
-                        <button
-                            class="p-1 w-full font-heading font-semibold text-xs text-gray-900 uppercase tracking-px overflow-hidden rounded-md">
-                            <div class="relative p-5 px-11 bg-gradient-green overflow-hidden rounded-md">
-                                <div
-                                    class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-white transition ease-in-out duration-500"></div>
-                                <p class="relative z-10">Send message</p>
-                            </div>
-                        </button>
-                    </div>
-                </div>
-                <div class="w-full p-2.5">
-                    <p class="text-sm text-gray-500 text-center">
-                        <span>By clicking the send button, you agree with our</span>
-                        <a class="pb-1 hover:text-gray-400 border-b border-gray-500" href="#">Terms &amp; Conditions</a>
-                    </p>
-                </div>
+                <livewire:donor-form />
+
             </div>
         </div>
     </section>
diff --git a/vite.config.js b/vite.config.js
index ccad365..c8d1933 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,11 +5,7 @@ export default defineConfig({
     plugins: [
         laravel({
             input: ['resources/css/app.css', 'resources/js/app.js'],
-            refresh: [
-                ...refreshPaths,
-                'app/Http/Livewire/**',
-                'app/Forms/Components/**',
-            ],
+            refresh: [...refreshPaths, 'app/Http/Livewire/**'],
         }),
     ],
 })