diff --git a/docs-assets/app/resources/views/livewire/actions.blade.php b/docs-assets/app/resources/views/livewire/actions.blade.php
index f286823d9d..4dd2eeef33 100644
--- a/docs-assets/app/resources/views/livewire/actions.blade.php
+++ b/docs-assets/app/resources/views/livewire/actions.blade.php
@@ -5,136 +5,146 @@
 @endphp
 
 <div class="min-h-screen">
-    @if (! count($this->mountedActions))
-        <div id="buttonAction" class="p-16 flex items-center justify-center max-w-xl">
-            {{ $this->buttonAction }}
-        </div>
+    <div id="buttonAction" class="p-16 flex items-center justify-center max-w-xl">
+        {{ $this->buttonAction }}
+    </div>
 
-        <div id="linkAction" class="p-16 flex items-center justify-center max-w-xl">
-            {{ $this->linkAction }}
-        </div>
+    <div id="linkAction" class="p-16 flex items-center justify-center max-w-xl">
+        {{ $this->linkAction }}
+    </div>
 
-        <div id="iconButtonAction" class="p-16 flex items-center justify-center max-w-xl">
-            {{ $this->iconButtonAction }}
-        </div>
+    <div id="iconButtonAction" class="p-16 flex items-center justify-center max-w-xl">
+        {{ $this->iconButtonAction }}
+    </div>
 
-        <div id="badgeAction" class="p-16 flex items-center justify-center max-w-xl">
-            {{ $this->badgeAction }}
-        </div>
+    <div id="badgeAction" class="p-16 flex items-center justify-center max-w-xl">
+        {{ $this->badgeAction }}
+    </div>
 
-        <div id="dangerAction" class="p-16 flex items-center justify-center max-w-xl">
-            {{ $this->dangerAction }}
-        </div>
+    <div id="dangerAction" class="p-16 flex items-center justify-center max-w-xl">
+        {{ $this->dangerAction }}
+    </div>
 
-        <div id="largeAction" class="p-16 flex items-center justify-center max-w-xl">
-            {{ $this->largeAction }}
-        </div>
+    <div id="largeAction" class="p-16 flex items-center justify-center max-w-xl">
+        {{ $this->largeAction }}
+    </div>
 
-        <div id="iconAction" class="p-16 flex items-center justify-center max-w-xl">
-            {{ $this->iconAction }}
-        </div>
+    <div id="iconAction" class="p-16 flex items-center justify-center max-w-xl">
+        {{ $this->iconAction }}
+    </div>
 
-        <div id="iconAfterAction" class="p-16 flex items-center justify-center max-w-xl">
-            {{ $this->iconAfterAction }}
-        </div>
+    <div id="iconAfterAction" class="p-16 flex items-center justify-center max-w-xl">
+        {{ $this->iconAfterAction }}
+    </div>
 
-        <div id="badgedAction" class="p-16 flex items-center justify-center max-w-xl">
-            {{ $this->badgedAction }}
-        </div>
+    <div id="badgedAction" class="p-16 flex items-center justify-center max-w-xl">
+        {{ $this->badgedAction }}
+    </div>
 
-        <div id="successBadgedAction" class="p-16 flex items-center justify-center max-w-xl">
-            {{ $this->successBadgedAction }}
-        </div>
+    <div id="successBadgedAction" class="p-16 flex items-center justify-center max-w-xl">
+        {{ $this->successBadgedAction }}
+    </div>
 
-        <div id="outlinedAction" class="p-16 flex items-center justify-center max-w-xl">
-            {{ $this->outlinedAction }}
-        </div>
+    <div id="outlinedAction" class="p-16 flex items-center justify-center max-w-xl">
+        {{ $this->outlinedAction }}
+    </div>
 
-        <div id="confirmationModalAction" class="p-16 flex items-center justify-center max-w-xl">
-            {{ $this->confirmationModalAction }}
-        </div>
+    <div id="confirmationModalAction" class="p-16 flex items-center justify-center max-w-xl">
+        {{ $this->confirmationModalAction }}
+    </div>
 
-        <div id="confirmationModalCustomTextAction" class="p-16 flex items-center justify-center max-w-xl">
-            {{ $this->confirmationModalCustomTextAction }}
-        </div>
+    <div id="confirmationModalCustomTextAction" class="p-16 flex items-center justify-center max-w-xl">
+        {{ $this->confirmationModalCustomTextAction }}
+    </div>
 
-        <div id="modalIconAction" class="p-16 flex items-center justify-center max-w-xl">
-            {{ $this->modalIconAction }}
-        </div>
+    <div id="modalIconAction" class="p-16 flex items-center justify-center max-w-xl">
+        {{ $this->modalIconAction }}
+    </div>
 
-        <div id="modalFormAction" class="p-16 flex items-center justify-center max-w-xl">
-            {{ $this->modalFormAction }}
-        </div>
+    <div id="modalFormAction" class="p-16 flex items-center justify-center max-w-xl">
+        {{ $this->modalFormAction }}
+    </div>
 
-        <div id="wizardAction" class="p-16 flex items-center justify-center max-w-xl">
-            {{ $this->wizardAction }}
-        </div>
+    <div id="wizardAction" class="p-16 flex items-center justify-center max-w-xl">
+        {{ $this->wizardAction }}
+    </div>
 
-        <div id="slideOverAction" class="p-16 flex items-center justify-center max-w-xl">
-            {{ $this->slideOverAction }}
-        </div>
+    <div id="slideOverAction" class="p-16 flex items-center justify-center max-w-xl">
+        {{ $this->slideOverAction }}
+    </div>
 
-        <div id="actionGroup" class="pr-40 pt-8 pb-40 flex items-center justify-center max-w-xl">
-            <x-filament-actions::group :actions="[
+    <div id="actionGroup" class="pr-40 pt-8 pb-40 flex items-center justify-center max-w-xl">
+        <x-filament-actions::group :actions="[
+            Action::make('view'),
+            Action::make('edit'),
+            Action::make('delete'),
+        ]"/>
+    </div>
+
+    <div id="customizedActionGroup" class="pr-24 pt-8 pb-40 flex items-center justify-center max-w-xl">
+        <x-filament-actions::group
+            :actions="[
                 Action::make('view'),
                 Action::make('edit'),
                 Action::make('delete'),
-            ]"/>
-        </div>
+            ]"
+            label="More actions"
+            :icon="Heroicon::EllipsisVertical"
+            size="sm"
+            color="primary"
+            button
+        />
+    </div>
 
-        <div id="customizedActionGroup" class="pr-24 pt-8 pb-40 flex items-center justify-center max-w-xl">
-            <x-filament-actions::group
-                :actions="[
+    <div id="actionButtonGroup" class="p-16 flex items-center justify-center max-w-xl">
+        {{ ActionGroup::make([
+            Action::make('edit')
+                ->color('gray')
+                ->icon(Heroicon::PencilSquare)
+                ->hiddenLabel(),
+            Action::make('delete')
+                ->color('gray')
+                ->icon(Heroicon::Trash)
+                ->hiddenLabel(),
+        ])->buttonGroup() }}
+    </div>
+
+    <div id="actionGroupPlacement" class="pr-40 pb-8 pt-40 flex items-center justify-center max-w-xl">
+        <x-filament-actions::group
+            :actions="[
+                Action::make('view'),
+                Action::make('edit'),
+                Action::make('delete'),
+            ]"
+            dropdown-placement="top-start"
+        />
+    </div>
+
+    <div id="nestedActionGroups" class="pr-40 pt-8 pb-40 flex items-center justify-center max-w-xl">
+        <x-filament-actions::group
+            :actions="[
+                ActionGroup::make([
                     Action::make('view'),
                     Action::make('edit'),
-                    Action::make('delete'),
-                ]"
-                label="More actions"
-                :icon="Heroicon::EllipsisVertical"
-                size="sm"
-                color="primary"
-                button
-            />
-        </div>
-
-        <div id="actionButtonGroup" class="p-16 flex items-center justify-center max-w-xl">
-            {{ ActionGroup::make([
-                Action::make('edit')
-                    ->color('gray')
-                    ->icon(Heroicon::PencilSquare)
-                    ->hiddenLabel(),
-                Action::make('delete')
-                    ->color('gray')
-                    ->icon(Heroicon::Trash)
-                    ->hiddenLabel(),
-            ])->buttonGroup() }}
-        </div>
-
-        <div id="actionGroupPlacement" class="pr-40 pb-8 pt-40 flex items-center justify-center max-w-xl">
-            <x-filament-actions::group
-                :actions="[
-                    Action::make('view'),
-                    Action::make('edit'),
-                    Action::make('delete'),
-                ]"
-                dropdown-placement="top-start"
-            />
-        </div>
-
-        <div id="nestedActionGroups" class="pr-40 pt-8 pb-40 flex items-center justify-center max-w-xl">
-            <x-filament-actions::group
-                :actions="[
-                    ActionGroup::make([
-                        Action::make('view'),
-                        Action::make('edit'),
-                    ])->dropdown(false),
-                    Action::make('delete'),
-                ]"
-            />
-        </div>
-    @endif
+                ])->dropdown(false),
+                Action::make('delete'),
+            ]"
+        />
+    </div>
 
     <div id="modal">
         <x-filament-actions::modals/>
     </div>
+
+    <style>
+        .fi-modal-close-overlay {
+            background-color: rgb(129, 129, 129);
+        }
+
+        @media (prefers-color-scheme: dark) {
+            .fi-modal-close-overlay {
+                background-color: rgb(9, 9, 11);
+            }
+        }
+    </style>
 </div>
diff --git a/docs-assets/screenshots/images/dark/actions/modal/confirmation-custom-text.jpg b/docs-assets/screenshots/images/dark/actions/modal/confirmation-custom-text.jpg
index 503b70fa2b..f28c76d5f4 100644
Binary files a/docs-assets/screenshots/images/dark/actions/modal/confirmation-custom-text.jpg and b/docs-assets/screenshots/images/dark/actions/modal/confirmation-custom-text.jpg differ
diff --git a/docs-assets/screenshots/images/dark/actions/modal/confirmation.jpg b/docs-assets/screenshots/images/dark/actions/modal/confirmation.jpg
index 760cbdff82..350e50b446 100644
Binary files a/docs-assets/screenshots/images/dark/actions/modal/confirmation.jpg and b/docs-assets/screenshots/images/dark/actions/modal/confirmation.jpg differ
diff --git a/docs-assets/screenshots/images/dark/actions/modal/form.jpg b/docs-assets/screenshots/images/dark/actions/modal/form.jpg
index ce312af04a..edc4f8c2d0 100644
Binary files a/docs-assets/screenshots/images/dark/actions/modal/form.jpg and b/docs-assets/screenshots/images/dark/actions/modal/form.jpg differ
diff --git a/docs-assets/screenshots/images/dark/actions/modal/icon.jpg b/docs-assets/screenshots/images/dark/actions/modal/icon.jpg
index 09c106372c..203e2aab92 100644
Binary files a/docs-assets/screenshots/images/dark/actions/modal/icon.jpg and b/docs-assets/screenshots/images/dark/actions/modal/icon.jpg differ
diff --git a/docs-assets/screenshots/images/dark/actions/modal/slide-over.jpg b/docs-assets/screenshots/images/dark/actions/modal/slide-over.jpg
index 2356624cbe..d3c54dbcd7 100644
Binary files a/docs-assets/screenshots/images/dark/actions/modal/slide-over.jpg and b/docs-assets/screenshots/images/dark/actions/modal/slide-over.jpg differ
diff --git a/docs-assets/screenshots/images/dark/actions/modal/wizard.jpg b/docs-assets/screenshots/images/dark/actions/modal/wizard.jpg
index 7b2de27066..7da24872e2 100644
Binary files a/docs-assets/screenshots/images/dark/actions/modal/wizard.jpg and b/docs-assets/screenshots/images/dark/actions/modal/wizard.jpg differ
diff --git a/docs-assets/screenshots/images/light/actions/modal/confirmation-custom-text.jpg b/docs-assets/screenshots/images/light/actions/modal/confirmation-custom-text.jpg
index dbfe518d50..239fa6ab37 100644
Binary files a/docs-assets/screenshots/images/light/actions/modal/confirmation-custom-text.jpg and b/docs-assets/screenshots/images/light/actions/modal/confirmation-custom-text.jpg differ
diff --git a/docs-assets/screenshots/images/light/actions/modal/confirmation.jpg b/docs-assets/screenshots/images/light/actions/modal/confirmation.jpg
index 3c6d0218e6..52225a8910 100644
Binary files a/docs-assets/screenshots/images/light/actions/modal/confirmation.jpg and b/docs-assets/screenshots/images/light/actions/modal/confirmation.jpg differ
diff --git a/docs-assets/screenshots/images/light/actions/modal/form.jpg b/docs-assets/screenshots/images/light/actions/modal/form.jpg
index 0e2578693e..f280465150 100644
Binary files a/docs-assets/screenshots/images/light/actions/modal/form.jpg and b/docs-assets/screenshots/images/light/actions/modal/form.jpg differ
diff --git a/docs-assets/screenshots/images/light/actions/modal/icon.jpg b/docs-assets/screenshots/images/light/actions/modal/icon.jpg
index 2ca779bfe1..d883370a9e 100644
Binary files a/docs-assets/screenshots/images/light/actions/modal/icon.jpg and b/docs-assets/screenshots/images/light/actions/modal/icon.jpg differ
diff --git a/docs-assets/screenshots/images/light/actions/modal/slide-over.jpg b/docs-assets/screenshots/images/light/actions/modal/slide-over.jpg
index 6e11273618..f09cbbb31e 100644
Binary files a/docs-assets/screenshots/images/light/actions/modal/slide-over.jpg and b/docs-assets/screenshots/images/light/actions/modal/slide-over.jpg differ
diff --git a/docs-assets/screenshots/images/light/actions/modal/wizard.jpg b/docs-assets/screenshots/images/light/actions/modal/wizard.jpg
index 517d6abd70..7580fbf71a 100644
Binary files a/docs-assets/screenshots/images/light/actions/modal/wizard.jpg and b/docs-assets/screenshots/images/light/actions/modal/wizard.jpg differ
diff --git a/docs-assets/screenshots/images/light/actions/trigger-button/badged.jpg b/docs-assets/screenshots/images/light/actions/trigger-button/badged.jpg
index bea8d43eb8..4f2b965ed3 100644
Binary files a/docs-assets/screenshots/images/light/actions/trigger-button/badged.jpg and b/docs-assets/screenshots/images/light/actions/trigger-button/badged.jpg differ
diff --git a/docs-assets/screenshots/images/light/actions/trigger-button/icon-after.jpg b/docs-assets/screenshots/images/light/actions/trigger-button/icon-after.jpg
index 08b57beafc..45d4d2f776 100644
Binary files a/docs-assets/screenshots/images/light/actions/trigger-button/icon-after.jpg and b/docs-assets/screenshots/images/light/actions/trigger-button/icon-after.jpg differ
diff --git a/docs-assets/screenshots/images/light/actions/trigger-button/icon.jpg b/docs-assets/screenshots/images/light/actions/trigger-button/icon.jpg
index 63b353639d..7cbe2b548b 100644
Binary files a/docs-assets/screenshots/images/light/actions/trigger-button/icon.jpg and b/docs-assets/screenshots/images/light/actions/trigger-button/icon.jpg differ
diff --git a/docs-assets/screenshots/images/light/actions/trigger-button/large.jpg b/docs-assets/screenshots/images/light/actions/trigger-button/large.jpg
index ec69c199a7..fde8235608 100644
Binary files a/docs-assets/screenshots/images/light/actions/trigger-button/large.jpg and b/docs-assets/screenshots/images/light/actions/trigger-button/large.jpg differ
diff --git a/docs-assets/screenshots/images/light/actions/trigger-button/outlined.jpg b/docs-assets/screenshots/images/light/actions/trigger-button/outlined.jpg
index 2a2153f2b9..0ec498f0a2 100644
Binary files a/docs-assets/screenshots/images/light/actions/trigger-button/outlined.jpg and b/docs-assets/screenshots/images/light/actions/trigger-button/outlined.jpg differ
diff --git a/docs-assets/screenshots/images/light/actions/trigger-button/success-badged.jpg b/docs-assets/screenshots/images/light/actions/trigger-button/success-badged.jpg
index 392356a554..e915299e0f 100644
Binary files a/docs-assets/screenshots/images/light/actions/trigger-button/success-badged.jpg and b/docs-assets/screenshots/images/light/actions/trigger-button/success-badged.jpg differ