diff --git a/app/Helpers/FilterCategories.php b/app/Helpers/FilterCategories.php
new file mode 100644
index 0000000..5aafad4
--- /dev/null
+++ b/app/Helpers/FilterCategories.php
@@ -0,0 +1,102 @@
+<?php
+
+namespace App\Helpers;
+
+use Illuminate\Support\Str;
+use Illuminate\Support\Facades\Cache;
+use Conner\Tagging\Model\Tag;
+
+class FilterCategories
+{
+    public static function getFilterCategories()
+    {
+        $taglist = cache()->remember(
+            'searchtags',
+            300,
+            fn () => Tag::where('count', '>', 0)
+                ->orderBy('slug')
+                ->get(),
+        );
+
+        $appearances = [
+            'Loli',
+            'Shota',
+            'Milf',
+            'Futanari',
+            'Big Boobs',
+            'Small Boobs',
+            'Dark Skin',
+            'Cosplay',
+            'Elf',
+            'Maid',
+            'Nekomimi',
+            'Nurse',
+            'School Girl',
+            'Succubus',
+            'Teacher',
+            'Trap',
+            'Pregnant',
+            'Glasses',
+            'Swim Suit',
+            'Ugly Bastard',
+            'Monster',
+        ];
+
+        $types = [
+            '3D',
+            '4K',
+            '48Fps',
+            '4K 48Fps',
+            'Censored',
+            'Uncensored',
+            'Comedy',
+            'Fantasy',
+            'Horror',
+            'Vanilla',
+            'Ntr',
+            'Pov',
+            'Filmed',
+            'X-Ray',
+        ];
+
+        $actions = [
+            'Anal',
+            'Bdsm',
+            'Facial',
+            'Blow Job',
+            'Boob Job',
+            'Foot Job',
+            'Hand Job',
+            'Rimjob',
+            'Inflation',
+            'Masturbation',
+            'Public Sex',
+            'Rape',
+            'Reverse Rape',
+            'Threesome',
+            'Orgy',
+            'Gangbang',
+        ];
+
+        $excluded = [...$appearances, ...$types, ...$actions];
+
+        $categories = [
+            'Genres' => $taglist
+                ->reject(fn ($tag) => in_array($tag->name, $excluded))
+                ->pluck('name')
+                ->toArray(),
+
+            'Actions' => $actions,
+
+            'Appearance' => collect($appearances)
+                ->reject(function ($tag) {
+                    return auth()->guest() && in_array($tag, ['Loli', 'Shota']);
+                })
+                ->toArray(),
+
+            'Types' => $types,
+        ];
+
+        return $categories;
+    }
+}
diff --git a/resources/views/modals/filter-blacklist.blade.php b/resources/views/modals/filter-blacklist.blade.php
index bfb8a9f..8b73b5e 100644
--- a/resources/views/modals/filter-blacklist.blade.php
+++ b/resources/views/modals/filter-blacklist.blade.php
@@ -1,165 +1,107 @@
-<!--Verically centered modal-->
-<div data-te-modal-init
-    class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
-    id="modalBlacklist" tabindex="-1" aria-labelledby="modalBlacklist" aria-modal="true" role="dialog">
-    <div data-te-modal-dialog-ref
-        class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[70%]  2xl:min-[576px]:max-w-[60%]">
+<div
+    data-te-modal-init
+    id="modalBlacklist"
+    tabindex="-1"
+    aria-labelledby="modalBlacklistLabel"
+    aria-modal="true"
+    role="dialog"
+    class="fixed inset-0 z-[1055] hidden overflow-y-auto bg-black/60 backdrop-blur-sm"
+>
+    <div
+        data-te-modal-dialog-ref
+        class="flex min-h-screen items-center justify-center p-4"
+    >
         <div
-            class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800">
-            <x-modal-header :title="__('Blacklist')" />
+            class="relative w-full max-w-6xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900"
+        >
+            <!-- Header -->
+            <div class="sticky top-0 z-10 flex items-center justify-between border-b border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
+                <div>
+                    <h2
+                        id="modalGenresLabel"
+                        class="text-xl font-semibold text-neutral-900 dark:text-white"
+                    >
+                        Genres & Filters
+                    </h2>
 
-            <!--Modal body-->
-            <div class="relative p-4">
-                @php
-                    $taglist = \cache()->remember(
-                        'searchtags',
-                        300,
-                        fn() => Conner\Tagging\Model\Tag::where('count', '>', 0)->orderBy('slug', 'ASC')->get(),
-                    );
-                    $appearances = [
-                        'Loli',
-                        'Shota',
-                        'Milf',
-                        'Futanari',
-                        'Big Boobs',
-                        'Small Boobs',
-                        'Dark Skin',
-                        'Cosplay',
-                        'Elf',
-                        'Maid',
-                        'Nekomimi',
-                        'Nurse',
-                        'School Girl',
-                        'Succubus',
-                        'Teacher',
-                        'Trap',
-                        'Pregnant',
-                        'Glasses',
-                        'Swim Suit',
-                        'Ugly Bastard',
-                        'Monster',
-                    ];
-                    $types = [
-                        '3D',
-                        '4K',
-                        '48Fps',
-                        '4K 48Fps',
-                        'Censored',
-                        'Uncensored',
-                        'Comedy',
-                        'Fantasy',
-                        'Horror',
-                        'Vanilla',
-                        'Ntr',
-                        'Pov',
-                        'Filmed',
-                        'X-Ray',
-                    ];
-                    $actions = [
-                        'Anal',
-                        'Bdsm',
-                        'Facial',
-                        'Blow Job',
-                        'Boob Job',
-                        'Foot Job',
-                        'Hand Job',
-                        'Rimjob',
-                        'Inflation',
-                        'Masturbation',
-                        'Public Sex',
-                        'Rape',
-                        'Reverse Rape',
-                        'Threesome',
-                        'Orgy',
-                        'Gangbang',
-                    ];
-                @endphp
+                    <p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
+                        Select tags to blacklist from your content.
+                    </p>
+                </div>
 
-                <ul class="list-none text-justify" style="overflow: hidden;">
-                    @foreach ($taglist as $tag)
-                        @if (in_array($tag->name, $types) || in_array($tag->name, $appearances) || in_array($tag->name, $actions))
-                            @continue
-                        @endif
-                        <li class="inline-block m-1">
-                            <input class="m-5 hidden peer" wire:model="blacklist" type="checkbox"
-                                id="blacklist-{{ $tag->slug }}" name="blacklist[]" value="{{ $tag->slug }}">
-                            <label
-                                class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
-                                for="blacklist-{{ $tag->slug }}">{{ $tag->name }}</label>
-                        </li>
-                    @endforeach
-                </ul>
-
-                <br>
-                <!-- Actions -->
-                <p class="font-medium leading-normal text-neutral-800 dark:text-white">
-                    Action
-                </p>
-                <ul class="list-none text-justify" style="overflow: hidden;">
-                    @foreach ($actions as $tag)
-                        <li class="inline-block m-1">
-                            @php $slug = Illuminate\Support\Str::slug($tag); @endphp
-                            <input class="m-5 hidden peer" wire:model="blacklist" type="checkbox"
-                                id="blacklist-{{ $slug }}" name="blacklist[]" value="{{ $slug }}">
-                            <label
-                                class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
-                                for="blacklist-{{ $slug }}">{{ $tag }}</label>
-                        </li>
-                    @endforeach
-                </ul>
-
-                <br>
-                <!-- Character Appearance -->
-                <p class="font-medium leading-normal text-neutral-800 dark:text-white">
-                    Appearance
-                </p>
-                <ul class="list-none text-justify" style="overflow: hidden;">
-                    @foreach ($appearances as $tag)
-                        @guest
-                            @php if ($tag === "Loli" || $tag === "Shota") continue; @endphp
-                        @endguest
-                        <li class="inline-block m-1">
-                            @php $slug = Illuminate\Support\Str::slug($tag); @endphp
-                            <input class="m-5 hidden peer" wire:model="blacklist" type="checkbox"
-                                id="blacklist-{{ $slug }}" name="blacklist[]" value="{{ $slug }}">
-                            <label
-                                class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
-                                for="blacklist-{{ $slug }}">{{ $tag }}</label>
-                        </li>
-                    @endforeach
-                </ul>
-
-                <br>
-
-                <!-- Video Types -->
-                <p class="font-medium leading-normal text-neutral-800 dark:text-white">
-                    Type
-                </p>
-                <ul class="list-none text-justify" style="overflow: hidden;">
-                    @foreach ($types as $tag)
-                        <li class="inline-block m-1">
-                            @php $slug = Illuminate\Support\Str::slug($tag); @endphp
-                            <input class="m-5 hidden peer" wire:model="blacklist" type="checkbox"
-                                id="blacklist-{{ $slug }}" name="blacklist[]" value="{{ $slug }}">
-                            <label
-                                class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
-                                for="blacklist-{{ $slug }}">{{ $tag }}</label>
-                        </li>
-                    @endforeach
-                </ul>
-            </div>
-
-            <!--Modal footer-->
-            <div class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md p-4">
-                <button data-te-modal-dismiss wire:click="revertFilters" type="button"
-                    class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200">
-                    Close
-                </button>
-                <button data-te-modal-dismiss wire:click="applyFilters" type="button"
-                    class="ml-1 inline-block rounded bg-rose-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600">
-                    Apply
+                <button
+                    type="button"
+                    data-te-modal-dismiss
+                    wire:click="revertFilters"
+                    class="rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-100 hover:text-black dark:hover:bg-neutral-800 dark:hover:text-white"
+                >
+                    ✕
                 </button>
             </div>
+
+            <!-- Body -->
+            <form class="max-h-[75vh] overflow-y-auto">
+                <div class="space-y-8 p-6">
+                    @foreach (\App\Helpers\FilterCategories::getFilterCategories() as $section => $items)
+                        <section>
+                            <div class="mb-4 flex items-center justify-between">
+                                <h3 class="text-lg font-semibold text-neutral-800 dark:text-white">
+                                    {{ $section }}
+                                </h3>
+
+                                <div class="h-px flex-1 bg-neutral-200 ml-4 dark:bg-neutral-700"></div>
+                            </div>
+
+                            <div class="flex flex-wrap gap-3">
+                                @foreach ($items as $tag)
+                                    @php
+                                        $slug = Str::slug($tag);
+                                    @endphp
+
+                                    <div>
+                                        <input
+                                            wire:model="blacklist"
+                                            type="checkbox"
+                                            id="blacklist-{{ $slug }}"
+                                            name="blacklist[]"
+                                            value="{{ $slug }}"
+                                            class="peer hidden"
+                                        >
+
+                                        <label
+                                            for="blacklist-{{ $slug }}"
+                                            class="inline-flex cursor-pointer items-center rounded-full border border-neutral-300 bg-neutral-100 px-4 py-2 text-sm font-medium text-neutral-700 transition-all duration-200 hover:border-rose-400 hover:bg-rose-50 hover:text-rose-600 peer-checked:border-rose-600 peer-checked:bg-rose-600 peer-checked:text-white dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:border-rose-500 dark:hover:bg-neutral-700"
+                                        >
+                                            {{ $tag }}
+                                        </label>
+                                    </div>
+                                @endforeach
+                            </div>
+                        </section>
+                    @endforeach
+                </div>
+
+                <!-- Footer -->
+                <div class="sticky bottom-0 flex items-center justify-end gap-3 border-t border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
+                    <button
+                        type="button"
+                        data-te-modal-dismiss
+                        wire:click="revertFilters"
+                        class="rounded-xl border border-neutral-300 px-5 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-800"
+                    >
+                        Cancel
+                    </button>
+
+                    <button
+                        type="button"
+                        data-te-modal-dismiss
+                        wire:click="applyFilters"
+                        class="rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
+                    >
+                        Apply Filters
+                    </button>
+                </div>
+            </form>
         </div>
     </div>
 </div>
diff --git a/resources/views/modals/filter-genres.blade.php b/resources/views/modals/filter-genres.blade.php
index 132d6a9..e59138b 100644
--- a/resources/views/modals/filter-genres.blade.php
+++ b/resources/views/modals/filter-genres.blade.php
@@ -1,166 +1,102 @@
-<!--Verically centered modal-->
-<div data-te-modal-init
-    class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
-    id="modalGenres" tabindex="-1" aria-labelledby="modalGenres" aria-modal="true" role="dialog">
-    <div data-te-modal-dialog-ref
-        class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[70%]  2xl:min-[576px]:max-w-[60%]">
-        <div
-            class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800">
-            <x-modal-header :title="__('Genres')" />
-            <form>
-                <!--Modal body-->
-                <div class="relative p-4">
-                    @php
-                        $taglist = cache()->remember(
-                            'searchtags',
-                            300,
-                            fn() => Conner\Tagging\Model\Tag::where('count', '>', 0)->orderBy('slug', 'ASC')->get(),
-                        );
-                        $appearances = [
-                            'Loli',
-                            'Shota',
-                            'Milf',
-                            'Futanari',
-                            'Big Boobs',
-                            'Small Boobs',
-                            'Dark Skin',
-                            'Cosplay',
-                            'Elf',
-                            'Maid',
-                            'Nekomimi',
-                            'Nurse',
-                            'School Girl',
-                            'Succubus',
-                            'Teacher',
-                            'Trap',
-                            'Pregnant',
-                            'Glasses',
-                            'Swim Suit',
-                            'Ugly Bastard',
-                            'Monster',
-                        ];
-                        $types = [
-                            '3D',
-                            '4K',
-                            '48Fps',
-                            '4K 48Fps',
-                            'Censored',
-                            'Uncensored',
-                            'Comedy',
-                            'Fantasy',
-                            'Horror',
-                            'Vanilla',
-                            'Ntr',
-                            'Pov',
-                            'Filmed',
-                            'X-Ray',
-                        ];
-                        $actions = [
-                            'Anal',
-                            'Bdsm',
-                            'Facial',
-                            'Blow Job',
-                            'Boob Job',
-                            'Foot Job',
-                            'Hand Job',
-                            'Rimjob',
-                            'Inflation',
-                            'Masturbation',
-                            'Public Sex',
-                            'Rape',
-                            'Reverse Rape',
-                            'Threesome',
-                            'Orgy',
-                            'Gangbang',
-                        ];
-                    @endphp
+<div
+    data-te-modal-init
+    id="modalGenres"
+    tabindex="-1"
+    aria-labelledby="modalGenresLabel"
+    aria-modal="true"
+    role="dialog"
+    class="fixed inset-0 z-[1055] hidden overflow-y-auto bg-black/60 backdrop-blur-sm"
+>
+    <div data-te-modal-dialog-ref class="flex min-h-screen items-center justify-center p-4">
+        <div class="relative w-full max-w-6xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900">
+            <!-- Header -->
+            <div class="sticky top-0 z-10 flex items-center justify-between border-b border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
+                <div>
+                    <h2
+                        id="modalGenresLabel"
+                        class="text-xl font-semibold text-neutral-900 dark:text-white"
+                    >
+                        Genres & Filters
+                    </h2>
 
-                    <ul class="list-none text-justify" style="overflow: hidden;">
-                        @foreach ($taglist as $tag)
-                            @if (in_array($tag->name, $types) || in_array($tag->name, $appearances) || in_array($tag->name, $actions))
-                                @continue
-                            @endif
-                            <li class="inline-block m-1">
-                                <input class="m-5 hidden peer" wire:model="tags" type="checkbox"
-                                    id="tags-{{ $tag->slug }}" name="tags[]" value="{{ $tag->slug }}">
-                                <label
-                                    class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
-                                    for="tags-{{ $tag->slug }}">{{ $tag->name }}</label>
-                            </li>
-                        @endforeach
-                    </ul>
-
-                    <br>
-                    <!-- Actions -->
-                    <p class="font-medium leading-normal text-neutral-800 dark:text-white">
-                        Action
+                    <p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
+                        Select tags to filter your content.
                     </p>
-                    <ul class="list-none text-justify" style="overflow: hidden;">
-                        @foreach ($actions as $tag)
-                            <li class="inline-block m-1">
-                                @php $slug = Illuminate\Support\Str::slug($tag); @endphp
-                                <input class="m-5 hidden peer" wire:model="tags" type="checkbox"
-                                    id="tags-{{ $slug }}" name="tags[]" value="{{ $slug }}">
-                                <label
-                                    class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
-                                    for="tags-{{ $slug }}">{{ $tag }}</label>
-                            </li>
-                        @endforeach
-                    </ul>
-
-                    <br>
-                    <!-- Character Appearance -->
-                    <p class="font-medium leading-normal text-neutral-800 dark:text-white">
-                        Appearance
-                    </p>
-                    <ul class="list-none text-justify" style="overflow: hidden;">
-                        @foreach ($appearances as $tag)
-                            @guest
-                                @php if ($tag === "Loli" || $tag === "Shota") continue; @endphp
-                            @endguest
-                            <li class="inline-block m-1">
-                                @php $slug = Illuminate\Support\Str::slug($tag); @endphp
-                                <input class="m-5 hidden peer" wire:model="tags" type="checkbox"
-                                    id="tags-{{ $slug }}" name="tags[]" value="{{ $slug }}">
-                                <label
-                                    class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
-                                    for="tags-{{ $slug }}">{{ $tag }}</label>
-                            </li>
-                        @endforeach
-                    </ul>
-
-                    <br>
-
-                    <!-- Video Types -->
-                    <p class="font-medium leading-normal text-neutral-800 dark:text-white">
-                        Type
-                    </p>
-                    <ul class="list-none text-justify" style="overflow: hidden;">
-                        @foreach ($types as $tag)
-                            <li class="inline-block m-1">
-                                @php $slug = Illuminate\Support\Str::slug($tag); @endphp
-                                <input class="m-5 hidden peer" wire:model="tags" type="checkbox"
-                                    id="tags-{{ $slug }}" name="tags[]" value="{{ $slug }}">
-                                <label
-                                    class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
-                                    for="tags-{{ $slug }}">{{ $tag }}</label>
-                            </li>
-                        @endforeach
-                    </ul>
                 </div>
 
-                <!--Modal footer-->
-                <div class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md p-4">
-                    <button data-te-modal-dismiss wire:click="revertFilters" type="button"
-                        class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200">
-                        Close
+                <button
+                    type="button"
+                    data-te-modal-dismiss
+                    wire:click="revertFilters"
+                    class="rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-100 hover:text-black dark:hover:bg-neutral-800 dark:hover:text-white"
+                >
+                    ✕
+                </button>
+            </div>
+
+            <!-- Body -->
+            <form class="max-h-[75vh] overflow-y-auto">
+                <div class="space-y-8 p-6">
+                    @foreach (\App\Helpers\FilterCategories::getFilterCategories() as $section => $items)
+                        <section>
+                            <div class="mb-4 flex items-center justify-between">
+                                <h3 class="text-lg font-semibold text-neutral-800 dark:text-white">
+                                    {{ $section }}
+                                </h3>
+
+                                <div class="h-px flex-1 bg-neutral-200 ml-4 dark:bg-neutral-700"></div>
+                            </div>
+
+                            <div class="flex flex-wrap gap-3">
+                                @foreach ($items as $tag)
+                                    @php
+                                        $slug = Str::slug($tag);
+                                    @endphp
+
+                                    <div>
+                                        <input
+                                            wire:model="tags"
+                                            type="checkbox"
+                                            id="tags-{{ $slug }}"
+                                            name="tags[]"
+                                            value="{{ $slug }}"
+                                            class="peer hidden"
+                                        >
+
+                                        <label
+                                            for="tags-{{ $slug }}"
+                                            class="inline-flex cursor-pointer items-center rounded-full border border-neutral-300 bg-neutral-100 px-4 py-2 text-sm font-medium text-neutral-700 transition-all duration-200 hover:border-rose-400 hover:bg-rose-50 hover:text-rose-600 peer-checked:border-rose-600 peer-checked:bg-rose-600 peer-checked:text-white dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:border-rose-500 dark:hover:bg-neutral-700"
+                                        >
+                                            {{ $tag }}
+                                        </label>
+                                    </div>
+                                @endforeach
+                            </div>
+                        </section>
+                    @endforeach
+                </div>
+
+                <!-- Footer -->
+                <div class="sticky bottom-0 flex items-center justify-end gap-3 border-t border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
+                    <button
+                        type="button"
+                        data-te-modal-dismiss
+                        wire:click="revertFilters"
+                        class="rounded-xl border border-neutral-300 px-5 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-800"
+                    >
+                        Cancel
                     </button>
-                    <button data-te-modal-dismiss wire:click="applyFilters" type="button"
-                        class="ml-1 inline-block rounded bg-rose-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600">
-                        Apply
+
+                    <button
+                        type="button"
+                        data-te-modal-dismiss
+                        wire:click="applyFilters"
+                        class="rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
+                    >
+                        Apply Filters
                     </button>
                 </div>
             </form>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/resources/views/modals/filter-studios.blade.php b/resources/views/modals/filter-studios.blade.php
index efe2d25..6cb4646 100644
--- a/resources/views/modals/filter-studios.blade.php
+++ b/resources/views/modals/filter-studios.blade.php
@@ -1,40 +1,86 @@
-<!--Verically centered modal-->
-<div data-te-modal-init
-    class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
-    id="modalStudios" tabindex="-1" aria-labelledby="modalStudios" aria-modal="true" role="dialog">
-    <div data-te-modal-dialog-ref
-        class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[70%]  2xl:min-[576px]:max-w-[60%]">
-        <div
-            class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800">
-            <x-modal-header :title="__('Studios')" />
+<div
+    data-te-modal-init
+    id="modalStudios"
+    tabindex="-1"
+    aria-labelledby="modalStudios"
+    aria-modal="true"
+    role="dialog"
+    class="fixed inset-0 z-[1055] hidden overflow-y-auto bg-black/60 backdrop-blur-sm"
+>
+    <div data-te-modal-dialog-ref class="flex min-h-screen items-center justify-center p-4">
+        <div class="relative w-full max-w-6xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900">
+            <!-- Header -->
+            <div class="sticky top-0 z-10 flex items-center justify-between border-b border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
+                <div>
+                    <h2
+                        id="modalGenresLabel"
+                        class="text-xl font-semibold text-neutral-900 dark:text-white"
+                    >
+                        Studios
+                    </h2>
 
-            <!--Modal body-->
-            <div class="relative p-4">
-                <ul class="list-none text-justify" style="overflow: hidden;">
+                    <p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
+                        Select studios to filter your content.
+                    </p>
+                </div>
+
+                <button
+                    type="button"
+                    data-te-modal-dismiss
+                    wire:click="revertFilters"
+                    class="rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-100 hover:text-black dark:hover:bg-neutral-800 dark:hover:text-white"
+                >
+                    ✕
+                </button>
+            </div>
+
+            <!-- Body -->
+            <form class="max-h-[75vh] overflow-y-auto">
+                <div class="space-y-8 p-6">
                     @php $studios = \cache()->remember('searchstudios', 300, fn () => App\Models\Studios::orderBy('name', 'ASC')->get()); @endphp
-                    @foreach ($studios as $studio)
-                        <li class="inline-block m-1">
-                            <input class="m-5 hidden peer" wire:model="studios" type="checkbox"
-                                id="studio-{{ $studio->slug }}" name="studios[]" value="{{ $studio->slug }}">
+                    <div class="flex flex-wrap gap-3">
+                        @foreach ($studios as $studio)
+                        <div>
+                            <input 
+                                wire:model="studios"
+                                type="checkbox" 
+                                id="studio-{{ $studio->slug }}" 
+                                name="studios[]" 
+                                value="{{ $studio->slug }}" 
+                                class="m-5 hidden peer"
+                            >
                             <label
-                                class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
-                                for="studio-{{ $studio->slug }}">{{ $studio->name }}</label>
-                        </li>
-                    @endforeach
-                </ul>
-            </div>
+                                for="studio-{{  $studio->slug }}"
+                                class="inline-flex cursor-pointer items-center rounded-full border border-neutral-300 bg-neutral-100 px-4 py-2 text-sm font-medium text-neutral-700 transition-all duration-200 hover:border-rose-400 hover:bg-rose-50 hover:text-rose-600 peer-checked:border-rose-600 peer-checked:bg-rose-600 peer-checked:text-white dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:border-rose-500 dark:hover:bg-neutral-700"
+                            >
+                                {{ $studio->name }}
+                            </label>
+                        </div>
+                        @endforeach
+                    </div>
+                </div>
 
-            <!--Modal footer-->
-            <div class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md p-4">
-                <button data-te-modal-dismiss wire:click="revertFilters" type="button"
-                    class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200">
-                    Close
-                </button>
-                <button data-te-modal-dismiss wire:click="applyFilters" type="button"
-                    class="ml-1 inline-block rounded bg-rose-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600">
-                    Apply
-                </button>
-            </div>
+                <!-- Footer -->
+                <div class="sticky bottom-0 flex items-center justify-end gap-3 border-t border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
+                    <button
+                        type="button"
+                        data-te-modal-dismiss
+                        wire:click="revertFilters"
+                        class="rounded-xl border border-neutral-300 px-5 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-800"
+                    >
+                        Cancel
+                    </button>
+
+                    <button
+                        type="button"
+                        data-te-modal-dismiss
+                        wire:click="applyFilters"
+                        class="rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
+                    >
+                        Apply Filters
+                    </button>
+                </div>
+            </form>
         </div>
     </div>
 </div>