How can I use Laravel/filament components properly? I created a new custom blade page and its not using the right theme

I tried almost everything and tables are right models are right but when I create a custom blade page I get this view. I just wanted a create a page like using customer table and mails table so I can send a bulk mails to customers.

(https://i.sstatic.net/jNDSGYFd.png)

I want a view almost like this. filament makes the automated page for me but I can’t continue with other one.
(https://i.sstatic.net/Kn3c19yG.png)

Here is a send-mail.blade.php

<x-filament::page>
    <div class="px-4 py-6 bg-white shadow sm:rounded-lg">
        <h1 class="text-xl font-semibold text-gray-800">Send Mail</h1>
        <form wire:submit.prevent="sendMail" class="mt-6 space-y-6">
            
            <!-- Mail Template Selection -->
            <div class="grid grid-cols-1 gap-6">
                <div class="col-span-1">
                    <label for="selectedTemplate" class="block text-sm font-medium text-gray-700">Select Mail Template</label>
                    <select wire:model="selectedTemplate" id="selectedTemplate" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                        <option value="">Select a Template</option>
                        @foreach(\App\Models\Mail::all() as $mail)
                            <option value="{{ $mail->id }}">{{ $mail->m_sablon_ismi }}</option>
                        @endforeach
                    </select>
                    @error('selectedTemplate') <span class="text-red-600">{{ $message }}</span> @enderror
                </div>
            </div>
            
            <!-- Customers Table -->
            <div class="grid grid-cols-1 gap-6">
                <div class="col-span-1">
                    <label class="block text-sm font-medium text-gray-700">Select Customers</label>
                    <div class="overflow-hidden border border-gray-200 rounded-lg shadow-md">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col" class="px-4 py-2 text-left text-sm font-semibold text-gray-700">
                                        <input type="checkbox" wire:model="selectAll" class="rounded">
                                    </th>
                                    <th scope="col" class="px-4 py-2 text-left text-sm font-semibold text-gray-700">Firma Adı</th>
                                    <th scope="col" class="px-4 py-2 text-left text-sm font-semibold text-gray-700">Yetkili Kişi</th>
                                    <th scope="col" class="px-4 py-2 text-left text-sm font-semibold text-gray-700">E-posta</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @foreach(\App\Models\Customer::all() as $customer)
                                    <tr>
                                        <td class="px-4 py-2 whitespace-nowrap">
                                            <input type="checkbox" wire:model="selectedCustomers" value="{{ $customer->id }}" class="rounded">
                                        </td>
                                        <td class="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">{{ $customer->f_ad }}</td>
                                        <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">{{ $customer->f_yetkili }}</td>
                                        <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">{{ $customer->f_eposta }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @error('selectedCustomers') <span class="text-red-600">{{ $message }}</span> @enderror
                </div>
            </div>

            <!-- Custom Message -->
            <div class="grid grid-cols-1 gap-6">
                <div class="col-span-1">
                    <label for="customMessage" class="block text-sm font-medium text-gray-700">Custom Message</label>
                    <textarea wire:model="customMessage" id="customMessage" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"></textarea>
                    @error('customMessage') <span class="text-red-600">{{ $message }}</span> @enderror
                </div>
            </div>

            <!-- Submit Button -->
            <div class="text-right">
                <button type="submit" class="px-4 py-2 font-bold text-white bg-indigo-600 rounded hover:bg-indigo-700">
                    Send Mail
                </button>
            </div>

        </form>
    </div>
</x-filament::page>

I want to make a proper web application for sending mails, managing customers, certificates or maybe more. its not looking right or seems right. So can you guys help me about that?