diff --git a/packages/admin/resources/views/components/dropdown/index.blade.php b/packages/admin/resources/views/components/dropdown/index.blade.php
new file mode 100644
index 0000000000..f15143360a
--- /dev/null
+++ b/packages/admin/resources/views/components/dropdown/index.blade.php
@@ -0,0 +1,10 @@
+@captureSlots([
+    'trigger',
+])
+
+<x-filament-support::dropdown
+    :attributes="\Filament\Support\prepare_inherited_attributes($attributes)->merge($slots)"
+    :dark-mode="config('filament.dark_mode')"
+>
+    {{ $slot }}
+</x-filament-support::dropdown>
diff --git a/packages/admin/resources/views/components/layouts/app/topbar/user-menu.blade.php b/packages/admin/resources/views/components/layouts/app/topbar/user-menu.blade.php
index 7dbf666c77..ef38ff2e55 100644
--- a/packages/admin/resources/views/components/layouts/app/topbar/user-menu.blade.php
+++ b/packages/admin/resources/views/components/layouts/app/topbar/user-menu.blade.php
@@ -2,123 +2,104 @@
     $user = \Filament\Facades\Filament::auth()->user();
 @endphp
 
-<div
-    x-data="{
-        mode: null,
-
-        theme: null,
-
-        init: function () {
-            this.theme = localStorage.getItem('theme') || (this.isSystemDark() ? 'dark' : 'light')
-            this.mode = localStorage.getItem('theme') ? 'manual' : 'auto'
-
-            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
-                if (this.mode === 'manual') return
-
-                if (event.matches && (! document.documentElement.classList.contains('dark'))) {
-                    this.theme = 'dark'
-
-                    document.documentElement.classList.add('dark')
-                } else if ((! event.matches) && document.documentElement.classList.contains('dark')) {
-                    this.theme = 'light'
-
-                    document.documentElement.classList.remove('dark')
-                }
-            })
-
-            $watch('theme', () => {
-                if (this.mode === 'auto') return
-
-                localStorage.setItem('theme', this.theme)
-
-                if (this.theme === 'dark' && (! document.documentElement.classList.contains('dark'))) {
-                    document.documentElement.classList.add('dark')
-                } else if (this.theme === 'light' && document.documentElement.classList.contains('dark')) {
-                    document.documentElement.classList.remove('dark')
-                }
-
-                $dispatch('dark-mode-toggled', this.theme)
-            })
-        },
-
-        isSystemDark: function () {
-            return window.matchMedia('(prefers-color-scheme: dark)').matches
-        },
-    }"
-    {{ $attributes->class(['relative']) }}
->
-    <button
-        x-on:click="$refs.panel.toggle"
-        class="block flex-shrink-0"
-    >
+<x-filament::dropdown>
+    <x-slot name="trigger">
         <x-filament::user-avatar :user="$user" />
-    </button>
-
-    <div
-        x-ref="panel"
-        x-float.placement.bottom-end.offset="{ offset: 8 }"
-        x-transition:enter="transition"
-        x-transition:enter-start="-translate-y-1 opacity-0"
-        x-transition:enter-end="translate-y-0 opacity-100"
-        x-transition:leave="transition"
-        x-transition:leave-start="translate-y-0 opacity-100"
-        x-transition:leave-end="-translate-y-1 opacity-0"
-        x-cloak
-        class="absolute z-10 hidden shadow-xl rounded-xl w-52 top-full"
+    </x-slot>
+
+    <ul
+        class="py-1 space-y-1"
+        x-data="{
+            mode: null,
+
+            theme: null,
+
+            init: function () {
+                this.theme = localStorage.getItem('theme') || (this.isSystemDark() ? 'dark' : 'light')
+                this.mode = localStorage.getItem('theme') ? 'manual' : 'auto'
+
+                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
+                    if (this.mode === 'manual') return
+
+                    if (event.matches && (! document.documentElement.classList.contains('dark'))) {
+                        this.theme = 'dark'
+
+                        document.documentElement.classList.add('dark')
+                    } else if ((! event.matches) && document.documentElement.classList.contains('dark')) {
+                        this.theme = 'light'
+
+                        document.documentElement.classList.remove('dark')
+                    }
+                })
+
+                $watch('theme', () => {
+                    if (this.mode === 'auto') return
+
+                    localStorage.setItem('theme', this.theme)
+
+                    if (this.theme === 'dark' && (! document.documentElement.classList.contains('dark'))) {
+                        document.documentElement.classList.add('dark')
+                    } else if (this.theme === 'light' && document.documentElement.classList.contains('dark')) {
+                        document.documentElement.classList.remove('dark')
+                    }
+
+                    $dispatch('dark-mode-toggled', this.theme)
+                })
+            },
+
+            isSystemDark: function () {
+                return window.matchMedia('(prefers-color-scheme: dark)').matches
+            },
+        }"
     >
-        <ul @class([
-            'py-1 space-y-1 overflow-hidden bg-white shadow rounded-xl',
-            'dark:border-gray-600 dark:bg-gray-700' => config('filament.dark_mode'),
-        ])>
-            @php
-                $items = \Filament\Facades\Filament::getUserMenuItems();
-                $accountItem = $items['account'] ?? null;
-                $logoutItem = $items['logout'] ?? null;
-            @endphp
-
-            <x-filament::dropdown.item
-                :color="$accountItem?->getColor() ?? 'secondary'"
-                :icon="$accountItem?->getIcon() ?? 'heroicon-s-user-circle'"
-                :href="$accountItem?->getUrl()"
-                tag="a"
-            >
-                {{ $accountItem?->getLabel() ?? \Filament\Facades\Filament::getUserName($user) }}
-            </x-filament::dropdown.item>
-
-            <div>
-                @if (config('filament.dark_mode'))
-                    <x-filament::dropdown.item icon="heroicon-s-moon" x-show="theme === 'dark'" x-on:click="mode = 'manual'; theme = 'light'">
-                        {{ __('filament::layout.buttons.light_mode.label') }}
-                    </x-filament::dropdown.item>
-
-                    <x-filament::dropdown.item icon="heroicon-s-sun" x-show="theme === 'light'" x-on:click="mode = 'manual'; theme = 'dark'">
-                        {{ __('filament::layout.buttons.dark_mode.label') }}
-                    </x-filament::dropdown.item>
-                @endif
-            </div>
-
-            @foreach ($items as $key => $item)
-                @if ($key !== 'account' && $key !== 'logout')
-                    <x-filament::dropdown.item
-                        :color="$item->getColor() ?? 'secondary'"
-                        :icon="$item->getIcon()"
-                        :href="$item->getUrl()"
-                        tag="a"
-                    >
-                        {{ $item->getLabel() }}
-                    </x-filament::dropdown.item>
-                @endif
-            @endforeach
-
-            <x-filament::dropdown.item
-                :color="$logoutItem?->getColor() ?? 'secondary'"
-                :icon="$logoutItem?->getIcon() ?? 'heroicon-s-logout'"
-                :action="$logoutItem?->getUrl() ?? route('filament.auth.logout')"
-                method="post"
-                tag="form"
-            >
-                {{ $logoutItem?->getLabel() ?? __('filament::layout.buttons.logout.label') }}
-            </x-filament::dropdown.item>
-        </ul>
-    </div>
-</div>
+        @php
+            $items = \Filament\Facades\Filament::getUserMenuItems();
+            $accountItem = $items['account'] ?? null;
+            $logoutItem = $items['logout'] ?? null;
+        @endphp
+
+        <x-filament::dropdown.item
+            :color="$accountItem?->getColor() ?? 'secondary'"
+            :icon="$accountItem?->getIcon() ?? 'heroicon-s-user-circle'"
+            :href="$accountItem?->getUrl()"
+            tag="a"
+        >
+            {{ $accountItem?->getLabel() ?? \Filament\Facades\Filament::getUserName($user) }}
+        </x-filament::dropdown.item>
+
+        <div>
+            @if (config('filament.dark_mode'))
+                <x-filament::dropdown.item icon="heroicon-s-moon" x-show="theme === 'dark'" x-on:click="mode = 'manual'; theme = 'light'">
+                    {{ __('filament::layout.buttons.light_mode.label') }}
+                </x-filament::dropdown.item>
+
+                <x-filament::dropdown.item icon="heroicon-s-sun" x-show="theme === 'light'" x-on:click="mode = 'manual'; theme = 'dark'">
+                    {{ __('filament::layout.buttons.dark_mode.label') }}
+                </x-filament::dropdown.item>
+            @endif
+        </div>
+
+        @foreach ($items as $key => $item)
+            @if ($key !== 'account' && $key !== 'logout')
+                <x-filament::dropdown.item
+                    :color="$item->getColor() ?? 'secondary'"
+                    :icon="$item->getIcon()"
+                    :href="$item->getUrl()"
+                    tag="a"
+                >
+                    {{ $item->getLabel() }}
+                </x-filament::dropdown.item>
+            @endif
+        @endforeach
+
+        <x-filament::dropdown.item
+            :color="$logoutItem?->getColor() ?? 'secondary'"
+            :icon="$logoutItem?->getIcon() ?? 'heroicon-s-logout'"
+            :action="$logoutItem?->getUrl() ?? route('filament.auth.logout')"
+            method="post"
+            tag="form"
+        >
+            {{ $logoutItem?->getLabel() ?? __('filament::layout.buttons.logout.label') }}
+        </x-filament::dropdown.item>
+    </ul>
+</x-filament::dropdown>
diff --git a/packages/forms/resources/views/components/builder.blade.php b/packages/forms/resources/views/components/builder.blade.php
index 984b47492f..47d332a44b 100644
--- a/packages/forms/resources/views/components/builder.blade.php
+++ b/packages/forms/resources/views/components/builder.blade.php
@@ -187,13 +187,13 @@ class="space-y-12"
                                 x-transition
                                 class="absolute inset-x-0 bottom-0 z-10 flex items-center justify-center h-12 -mb-12"
                             >
-                                <div x-data class="relative flex justify-center">
-                                    <x-forms::icon-button
-                                        :label="$getCreateItemBetweenButtonLabel()"
-                                        icon="heroicon-o-plus"
-                                        x-on:click="$refs.panel.toggle"
-                                        type="button"
-                                    />
+                                <x-forms::dropdown>
+                                    <x-slot name="trigger">
+                                        <x-forms::icon-button
+                                            :label="$getCreateItemBetweenButtonLabel()"
+                                            icon="heroicon-o-plus"
+                                        />
+                                    </x-slot>
 
                                     <x-forms::builder.block-picker
                                         :blocks="$getBlocks()"
@@ -201,7 +201,7 @@ class="absolute inset-x-0 bottom-0 z-10 flex items-center justify-center h-12 -m
                                         :state-path="$getStatePath()"
                                         class="py-2"
                                     />
-                                </div>
+                                </x-forms::dropdown>
                             </div>
                         @endif
                     </li>
diff --git a/packages/forms/resources/views/components/builder/block-picker.blade.php b/packages/forms/resources/views/components/builder/block-picker.blade.php
index 75ff5c095d..961b15edf5 100644
--- a/packages/forms/resources/views/components/builder/block-picker.blade.php
+++ b/packages/forms/resources/views/components/builder/block-picker.blade.php
@@ -4,26 +4,13 @@
     'statePath',
 ])
 
-<div
-    x-ref="panel"
-    x-transition
-    x-cloak
-    x-float.placement.bottom.flip.offset="{ offset: 8 }"
-    {{ $attributes->class([
-        'absolute hidden z-20 w-52 filament-forms-builder-component-block-picker',
-    ]) }}
->
-    <ul @class([
-        'py-1 space-y-1 bg-white shadow rounded-xl shadow-xl ring-1 ring-gray-900/10 overflow-hidden rounded-xl',
-        'dark:bg-gray-700 dark:divide-gray-600 dark:ring-white/20' => config('forms.dark_mode'),
-    ])>
-        @foreach ($blocks as $block)
-            <x-forms::dropdown.item
-                :wire:click="'dispatchFormEvent(\'builder::createItem\', \'' . $statePath . '\', \'' . $block->getName() . '\'' . ($createAfterItem ? ', \'' . $createAfterItem . '\'' : '') . ')'"
-                :icon="$block->getIcon()"
-            >
-                {{ $block->getLabel() }}
-            </x-forms::dropdown.item>
-        @endforeach
-    </ul>
+<div {{ $attributes->class(['filament-forms-builder-component-block-picker']) }}>
+    @foreach ($blocks as $block)
+        <x-forms::dropdown.item
+            :wire:click="'dispatchFormEvent(\'builder::createItem\', \'' . $statePath . '\', \'' . $block->getName() . '\'' . ($createAfterItem ? ', \'' . $createAfterItem . '\'' : '') . ')'"
+            :icon="$block->getIcon()"
+        >
+            {{ $block->getLabel() }}
+        </x-forms::dropdown.item>
+    @endforeach
 </div>
diff --git a/packages/forms/resources/views/components/dropdown/index.blade.php b/packages/forms/resources/views/components/dropdown/index.blade.php
new file mode 100644
index 0000000000..afa391ef44
--- /dev/null
+++ b/packages/forms/resources/views/components/dropdown/index.blade.php
@@ -0,0 +1,10 @@
+@captureSlots([
+    'trigger',
+])
+
+<x-filament-support::dropdown
+    :attributes="\Filament\Support\prepare_inherited_attributes($attributes)->merge($slots)"
+    :dark-mode="config('forms.dark_mode')"
+>
+    {{ $slot }}
+</x-filament-support::dropdown>
diff --git a/packages/support/resources/views/components/actions/group.blade.php b/packages/support/resources/views/components/actions/group.blade.php
index 701f30a096..9631e704e0 100644
--- a/packages/support/resources/views/components/actions/group.blade.php
+++ b/packages/support/resources/views/components/actions/group.blade.php
@@ -7,39 +7,26 @@
     'tooltip' => null,
 ])
 
-<div x-data {{ $attributes->class(['relative']) }}>
-    <x-filament-support::icon-button
-        x-on:click="$refs.panel.toggle"
-        :color="$color"
-        :dark-mode="$darkMode"
-        :icon="$icon"
-        :tooltip="$tooltip"
-        class="-my-2"
-    >
-        <x-slot name="label">
-            {{ $label }}
-        </x-slot>
-    </x-filament-support::icon-button>
+<x-filament-support::dropdown
+    :dark-mode="$darkMode"
+    {{ $attributes }}
+>
+    <x-slot name="trigger">
+        <x-filament-support::icon-button
+            :color="$color"
+            :dark-mode="$darkMode"
+            :icon="$icon"
+            :tooltip="$tooltip"
+        >
+            <x-slot name="label">
+                {{ $label }}
+            </x-slot>
+        </x-filament-support::icon-button>
+    </x-slot>
 
-    <div
-        x-ref="panel"
-        x-transition
-        x-cloak
-        x-float.placement.bottom-end.flip.offset.shift.teleport="{ offset: 8 }"
-        @class([
-            'absolute hidden z-20 shadow-xl ring-1 ring-gray-900/10 overflow-hidden rounded-xl w-52 filament-action-group-dropdown',
-            'dark:ring-white/20' => $darkMode,
-        ])
-    >
-        <ul @class([
-            'py-1 space-y-1 bg-white shadow rounded-xl',
-            'dark:bg-gray-700 dark:divide-gray-600' => $darkMode,
-        ])>
-            @foreach ($actions as $action)
-                @if (! $action->isHidden())
-                    {{ $action }}
-                @endif
-            @endforeach
-        </ul>
-    </div>
-</div>
+    @foreach ($actions as $action)
+        @if (! $action->isHidden())
+            {{ $action }}
+        @endif
+    @endforeach
+</x-filament-support::dropdown>
diff --git a/packages/support/resources/views/components/dropdown/index.blade.php b/packages/support/resources/views/components/dropdown/index.blade.php
new file mode 100644
index 0000000000..9cebd76436
--- /dev/null
+++ b/packages/support/resources/views/components/dropdown/index.blade.php
@@ -0,0 +1,46 @@
+@props([
+    'darkMode' => false,
+    'placement' => 'bottom-end',
+    'teleport' => false,
+    'trigger' => null,
+    'width' => 'sm',
+])
+
+<div
+    x-data
+    {{ $attributes->class('filament-dropdown') }}
+>
+    <div
+        class="filament-dropdown-trigger"
+        x-on:click="$refs.panel.toggle"
+    >
+        {{ $trigger }}
+    </div>
+
+    <div
+        x-ref="panel"
+        x-cloak
+        x-transition:enter-start="opacity-0 scale-95"
+        x-transition:leave-end="opacity-0 scale-95"
+        x-float.placement.{{ $placement }}.flip.offset{{ $teleport ? '.teleport' : '' }}="{ offset: 8 }"
+        @class([
+            'filament-dropdown-panel absolute z-10 w-max overflow-hidden rounded-xl border border-gray-200 bg-white shadow-md transition',
+            'dark:border-gray-700 dark:bg-gray-800' => $darkMode,
+            match ($width) {
+                'xs' => 'max-w-xs',
+                'md' => 'max-w-md',
+                'lg' => 'max-w-lg',
+                'xl' => 'max-w-xl',
+                '2xl' => 'max-w-2xl',
+                '3xl' => 'max-w-3xl',
+                '4xl' => 'max-w-4xl',
+                '5xl' => 'max-w-5xl',
+                '6xl' => 'max-w-6xl',
+                '7xl' => 'max-w-7xl',
+                default => 'max-w-sm',
+            },
+        ])
+    >
+        {{ $slot }}
+    </div>
+</div>
diff --git a/packages/support/resources/views/components/dropdown/item.blade.php b/packages/support/resources/views/components/dropdown/item.blade.php
index 51cb2ba319..0e056ca053 100644
--- a/packages/support/resources/views/components/dropdown/item.blade.php
+++ b/packages/support/resources/views/components/dropdown/item.blade.php
@@ -41,7 +41,7 @@
     ]);
 @endphp
 
-<li {{ $attributes->only(['class']) }}>
+<div {{ $attributes->only(['class']) }}>
     @if ($tag === 'button')
         <button
             type="{{ $type }}"
@@ -101,4 +101,4 @@
             </button>
         </form>
     @endif
-</li>
+</div>
diff --git a/packages/tables/resources/views/components/bulk-actions/index.blade.php b/packages/tables/resources/views/components/bulk-actions/index.blade.php
index f671e8c696..1c4ff2eac3 100644
--- a/packages/tables/resources/views/components/bulk-actions/index.blade.php
+++ b/packages/tables/resources/views/components/bulk-actions/index.blade.php
@@ -2,31 +2,12 @@
     'actions',
 ])
 
-<div
-    x-data="{}"
-    x-cloak
-    {{ $attributes->class(['relative filament-tables-bulk-actions']) }}
->
-    <x-tables::bulk-actions.trigger />
+<x-tables::dropdown {{ $attributes->class(['filament-tables-bulk-actions']) }}>
+    <x-slot name="trigger">
+        <x-tables::bulk-actions.trigger />
+    </x-slot>
 
-    <div
-        x-ref="panel"
-        x-float.placement.bottom-start.flip.offset="{ offset: 8 }"
-        x-transition:enter="transition"
-        x-transition:enter-start="-translate-y-1 opacity-0"
-        x-transition:enter-end="translate-y-0 opacity-100"
-        x-transition:leave="transition"
-        x-transition:leave-start="translate-y-0 opacity-100"
-        x-transition:leave-end="-translate-y-1 opacity-0"
-        class="absolute z-10 hidden shadow-xl rounded-xl w-52"
-    >
-        <ul @class([
-            'py-1 space-y-1 overflow-hidden bg-white shadow rounded-xl',
-            'dark:border-gray-600 dark:bg-gray-700' => config('tables.dark_mode'),
-        ])>
-            @foreach ($actions as $action)
-                {{ $action }}
-            @endforeach
-        </ul>
-    </div>
-</div>
+    @foreach ($actions as $action)
+        {{ $action }}
+    @endforeach
+</x-tables::dropdown>
diff --git a/packages/tables/resources/views/components/bulk-actions/trigger.blade.php b/packages/tables/resources/views/components/bulk-actions/trigger.blade.php
index 61e26580a1..b53c55447e 100644
--- a/packages/tables/resources/views/components/bulk-actions/trigger.blade.php
+++ b/packages/tables/resources/views/components/bulk-actions/trigger.blade.php
@@ -1,6 +1,5 @@
 <x-tables::icon-button
     icon="heroicon-o-dots-vertical"
-    x-on:click="$refs.panel.toggle"
     :label="__('tables::table.buttons.open_actions.label')"
     {{ $attributes->class(['filament-tables-bulk-actions-trigger']) }}
 />
diff --git a/packages/tables/resources/views/components/dropdown/index.blade.php b/packages/tables/resources/views/components/dropdown/index.blade.php
new file mode 100644
index 0000000000..bb608dd75d
--- /dev/null
+++ b/packages/tables/resources/views/components/dropdown/index.blade.php
@@ -0,0 +1,10 @@
+@captureSlots([
+    'trigger',
+])
+
+<x-filament-support::dropdown
+    :attributes="\Filament\Support\prepare_inherited_attributes($attributes)->merge($slots)"
+    :dark-mode="config('tables.dark_mode')"
+>
+    {{ $slot }}
+</x-filament-support::dropdown>
diff --git a/packages/tables/resources/views/components/filters/popover.blade.php b/packages/tables/resources/views/components/filters/popover.blade.php
index 2522ba7d34..71ad3e55a2 100644
--- a/packages/tables/resources/views/components/filters/popover.blade.php
+++ b/packages/tables/resources/views/components/filters/popover.blade.php
@@ -3,54 +3,24 @@
     'width' => 'sm',
 ])
 
-<div
-    x-data="{}"
-    {{ $attributes->class(['relative inline-block filament-tables-filters']) }}
->
-    <x-tables::filters.trigger />
+<x-tables::dropdown {{ $attributes->class(['filament-tables-filters']) }}>
+    <x-slot name="trigger">
+        <x-tables::filters.trigger />
+    </x-slot>
 
     <div
-        x-ref="popoverPanel"
-        x-float.placement.bottom-end.offset="{ offset: 8 }"
+        class="px-6 py-4 space-y-6"
         wire:ignore.self
-        wire:key="{{ $this->id }}.table.filters.panel"
-        x-cloak
-        x-transition:enter="ease duration-300"
-        x-transition:enter-start="opacity-0 -translate-y-2"
-        x-transition:enter-end="opacity-100 translate-y-0"
-        x-transition:leave="ease duration-300"
-        x-transition:leave-start="opacity-100 translate-y-0"
-        x-transition:leave-end="opacity-0 translate-y-2"
-        @class([
-            'absolute hidden z-10 w-screen top-full transition',
-            match ($width) {
-                'xs' => 'max-w-xs',
-                'md' => 'max-w-md',
-                'lg' => 'max-w-lg',
-                'xl' => 'max-w-xl',
-                '2xl' => 'max-w-2xl',
-                '3xl' => 'max-w-3xl',
-                '4xl' => 'max-w-4xl',
-                '5xl' => 'max-w-5xl',
-                '6xl' => 'max-w-6xl',
-                '7xl' => 'max-w-7xl',
-                default => 'max-w-sm',
-            },
-        ])
+        wire:key="{{ $this->id }}.table.filters"
     >
-        <div @class([
-            'px-6 py-4 bg-white border border-gray-300 space-y-6 shadow-xl rounded-xl',
-            'dark:bg-gray-800 dark:border-gray-700' => config('tables.dark_mode'),
-        ]) wire:ignore.self>
-            <x-tables::icon-button
-                icon="heroicon-o-x"
-                x-on:click="$refs.popoverPanel.close"
-                :label=" __('tables::table.filters.buttons.close.label')"
-                color="secondary"
-                {{ $attributes->class(['absolute top-3 right-3 rtl:right-auto rtl:left-3']) }}
-            />
+        <x-tables::icon-button
+            icon="heroicon-o-x"
+            x-on:click="$refs.popoverPanel.close"
+            :label=" __('tables::table.filters.buttons.close.label')"
+            color="secondary"
+            class="absolute top-3 right-3 rtl:right-auto rtl:left-3"
+        />
 
-            <x-tables::filters :form="$form" />
-        </div>
+        <x-tables::filters :form="$form" />
     </div>
-</div>
+</x-tables::dropdown>
diff --git a/packages/tables/resources/views/components/filters/trigger.blade.php b/packages/tables/resources/views/components/filters/trigger.blade.php
index c10dc23fe7..a40d8b6547 100644
--- a/packages/tables/resources/views/components/filters/trigger.blade.php
+++ b/packages/tables/resources/views/components/filters/trigger.blade.php
@@ -1,6 +1,5 @@
 <x-tables::icon-button
     icon="heroicon-o-filter"
-    x-on:click="$refs.popoverPanel.toggle"
     :label="__('tables::table.buttons.filter.label')"
     {{ $attributes->class(['filament-tables-filters-trigger']) }}
 />
diff --git a/packages/tables/resources/views/components/toggleable/index.blade.php b/packages/tables/resources/views/components/toggleable/index.blade.php
index 52771f0ba4..6aec91e521 100644
--- a/packages/tables/resources/views/components/toggleable/index.blade.php
+++ b/packages/tables/resources/views/components/toggleable/index.blade.php
@@ -3,46 +3,16 @@
     'width' => 'sm',
 ])
 
-<div
-    x-data
-    {{ $attributes->class(['relative inline-block filament-tables-column-toggling']) }}
->
-    <x-tables::toggleable.trigger />
+<x-tables::dropdown {{ $attributes->class(['filament-tables-column-toggling']) }}>
+    <x-slot name="trigger">
+        <x-tables::toggleable.trigger />
+    </x-slot>
 
     <div
-        x-ref="toggleablePanel"
-        x-float.placement.bottom-end.offset="{ offset: 8 }"
+        class="px-6 py-4 space-y-6"
         wire:ignore.self
-        wire:key="{{ $this->id }}.table.toggle.panel"
-        x-cloak
-        x-transition:enter="ease duration-300"
-        x-transition:enter-start="opacity-0 -translate-y-2"
-        x-transition:enter-end="opacity-100 translate-y-0"
-        x-transition:leave="ease duration-300"
-        x-transition:leave-start="opacity-100 translate-y-0"
-        x-transition:leave-end="opacity-0 translate-y-2"
-        @class([
-            'absolute hidden z-10 w-screen top-full transition',
-            match ($width) {
-                'xs' => 'max-w-xs',
-                'md' => 'max-w-md',
-                'lg' => 'max-w-lg',
-                'xl' => 'max-w-xl',
-                '2xl' => 'max-w-2xl',
-                '3xl' => 'max-w-3xl',
-                '4xl' => 'max-w-4xl',
-                '5xl' => 'max-w-5xl',
-                '6xl' => 'max-w-6xl',
-                '7xl' => 'max-w-7xl',
-                default => 'max-w-sm',
-            },
-        ])
+        wire:key="{{ $this->id }}.table.toggle.form"
     >
-        <div @class([
-            'px-6 py-4 bg-white border border-gray-300 space-y-6 shadow-xl rounded-xl',
-            'dark:bg-gray-800 dark:border-gray-700' => config('tables.dark_mode'),
-        ])>
-            {{ $form }}
-        </div>
+        {{ $form }}
     </div>
-</div>
+</x-tables::dropdown>
diff --git a/packages/tables/resources/views/components/toggleable/trigger.blade.php b/packages/tables/resources/views/components/toggleable/trigger.blade.php
index 638b4a52a4..0e76914b8b 100644
--- a/packages/tables/resources/views/components/toggleable/trigger.blade.php
+++ b/packages/tables/resources/views/components/toggleable/trigger.blade.php
@@ -1,6 +1,5 @@
 <x-tables::icon-button
     icon="heroicon-o-view-boards"
-    x-on:click="$refs.toggleablePanel.toggle"
     :label="__('tables::table.buttons.toggle_columns.label')"
     {{ $attributes->class(['filament-tables-column-toggling-trigger']) }}
 />