diff --git a/resources/views/components/danger-button.blade.php b/resources/views/components/danger-button.blade.php
index 25cf3b87..a73584fe 100644
--- a/resources/views/components/danger-button.blade.php
+++ b/resources/views/components/danger-button.blade.php
@@ -3,46 +3,90 @@
     'iconOnly' => false,
     'loadingText' => 'Loading...',
     'action' => '',
+    'dropdown' => false,
 ])
 
-<button
-    {{
-        $attributes->merge([
-            'type' => 'button',
-            'class' =>
-                'inline-flex items-center relative overflow-hidden ' .
-                ($iconOnly ? 'p-2.5' : 'px-5 py-2.5') .
-                ' bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700 ' .
-                'border border-gray-300 dark:border-gray-600 ' .
-                'rounded-[0.7rem] ' .
-                'font-medium text-sm text-red-600 dark:text-red-400 ' .
-                'focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400 ' .
-                'focus:ring-offset-2 dark:focus:ring-offset-gray-900 ' .
-                'disabled:opacity-50 disabled:cursor-not-allowed ' .
-                'transition-all duration-300 ease-in-out ' .
-                'shadow-sm hover:shadow-md ' .
-                'group ' .
-                ($centered ? 'justify-center w-full' : ''),
-            'wire:loading.attr' => 'disabled',
-            'wire:loading.class' => 'opacity-50 cursor-not-allowed',
-            'wire:target' => $action,
-        ])
-    }}
->
-    <span class="relative z-10 transition-colors duration-300 ease-in-out group-hover:text-white">
-        @if ($action)
-            <div wire:loading wire:target="{{ $action }}" class="flex items-center">
-                <x-spinner class="mr-2 h-4 w-4 text-red-500 group-hover:text-white dark:text-red-400" />
-                <span>{{ __($loadingText) }}</span>
-            </div>
-            <div wire:loading.remove wire:target="{{ $action }}">
+<div class="relative inline-block text-left" x-data="{ open: false }">
+    <button
+        {{
+            $attributes->merge([
+                'type' => 'button',
+                'class' =>
+                    'inline-flex items-center relative overflow-hidden ' .
+                    ($iconOnly ? 'p-2.5' : 'px-5 py-2.5') .
+                    ' bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700 ' .
+                    'border border-gray-300 dark:border-gray-600 ' .
+                    'rounded-[0.7rem] ' .
+                    'font-medium text-sm text-red-600 dark:text-red-400 ' .
+                    'focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400 ' .
+                    'focus:ring-offset-2 dark:focus:ring-offset-gray-900 ' .
+                    'disabled:opacity-50 disabled:cursor-not-allowed ' .
+                    'transition-all duration-300 ease-in-out ' .
+                    'shadow-sm hover:shadow-md ' .
+                    'group ' .
+                    ($centered ? 'justify-center w-full' : ''),
+                'wire:loading.attr' => 'disabled',
+                'wire:loading.class' => 'opacity-50 cursor-not-allowed',
+                'wire:target' => $action,
+                '@click' => $dropdown ? 'open = !open' : '',
+            ])
+        }}
+    >
+        <span
+            class="relative z-10 flex items-center transition-colors duration-300 ease-in-out group-hover:text-white group-active:text-white"
+        >
+            @if ($action)
+                <div wire:loading wire:target="{{ $action }}" class="flex items-center">
+                    <x-spinner class="mr-2 h-4 w-4 text-red-500 group-hover:text-white dark:text-red-400" />
+                    <span>{{ __($loadingText) }}</span>
+                </div>
+                <div wire:loading.remove wire:target="{{ $action }}">
+                    {{ $slot }}
+                </div>
+            @else
                 {{ $slot }}
+            @endif
+
+            @if ($dropdown)
+                <svg
+                    class="ml-2 h-5 w-5 text-red-600 group-hover:text-white group-active:text-white dark:text-red-400"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                >
+                    <path
+                        fill-rule="evenodd"
+                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                        clip-rule="evenodd"
+                    />
+                </svg>
+            @endif
+        </span>
+        <span
+            class="absolute inset-0 origin-left scale-x-0 transform bg-gradient-to-r from-red-600 to-red-500 transition-transform duration-300 ease-out group-hover:scale-x-100 group-active:scale-x-100 dark:from-red-700 dark:to-red-600"
+        ></span>
+    </button>
+
+    @if ($dropdown)
+        <div
+            x-show="open"
+            @click.away="open = false"
+            x-transition:enter="transition duration-100 ease-out"
+            x-transition:enter-start="scale-95 transform opacity-0"
+            x-transition:enter-end="scale-100 transform opacity-100"
+            x-transition:leave="transition duration-75 ease-in"
+            x-transition:leave-start="scale-100 transform opacity-100"
+            x-transition:leave-end="scale-95 transform opacity-0"
+            class="absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-[0.70rem] bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800"
+            role="menu"
+            aria-orientation="vertical"
+            aria-labelledby="menu-button"
+            tabindex="-1"
+        >
+            <div class="py-1" role="none">
+                {{ $dropdownContent }}
             </div>
-        @else
-            {{ $slot }}
-        @endif
-    </span>
-    <span
-        class="absolute inset-0 origin-left scale-x-0 transform bg-gradient-to-r from-red-600 to-red-500 transition-transform duration-300 ease-out group-hover:scale-x-100 dark:from-red-700 dark:to-red-600"
-    ></span>
-</button>
+        </div>
+    @endif
+</div>
diff --git a/resources/views/components/dropdown-button-item.blade.php b/resources/views/components/dropdown-button-item.blade.php
new file mode 100644
index 00000000..ce075c28
--- /dev/null
+++ b/resources/views/components/dropdown-button-item.blade.php
@@ -0,0 +1,14 @@
+@props(['href' => '#'])
+
+<a
+    href="{{ $href }}"
+    {{
+        $attributes->merge([
+            'class' => 'block w-full px-4 py-2 text-left text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-150 ease-in-out first:rounded-t-[0.60rem] last:rounded-b-[0.60rem]',
+            'role' => 'menuitem',
+            'tabindex' => '-1',
+        ])
+    }}
+>
+    {{ $slot }}
+</a>
diff --git a/resources/views/components/primary-button.blade.php b/resources/views/components/primary-button.blade.php
index 439c5104..f321f9f1 100644
--- a/resources/views/components/primary-button.blade.php
+++ b/resources/views/components/primary-button.blade.php
@@ -6,25 +6,74 @@
     'loadingText' => 'Saving...',
     'action' => '',
     'noLivewire' => false,
+    'dropdown' => false,
 ])
 
-<button
-    {{
-        $attributes->merge([
-            'type' => 'submit',
-            'class' => 'inline-flex items-center ' . ($iconOnly ? 'px-3.5 py-2' : ($fat ? 'px-8 py-4 text-lg' : 'px-7 py-2.5')) . ' bg-primary-900 dark:bg-white dark:hover:bg-gray-200 dark:text-gray-900 border border-transparent rounded-[0.70rem] font-semibold text-sm text-white hover:bg-primary-950 focus:bg-primary-950 dark:focus:bg-white active:bg-primary-950 dark:active:bg-white focus:outline-none focus:ring-2 focus:ring-primary-950 focus:ring-offset-2 transition ease-in-out duration-150' . ($centered ? ' justify-center w-full' : ''),
-        ])
-    }}
->
-    @if (! $noLivewire)
-        <div wire:loading wire:target="{{ $action }}">
-            <x-spinner class="mr-2 inline h-4 w-4 text-white dark:text-gray-900" />
-            {{ __($loadingText) }}
-        </div>
-        <div wire:loading.remove wire:target="{{ $action }}">
+<div class="relative inline-block text-left" x-data="{ open: false }">
+    <button
+        {{
+            $attributes->merge([
+                'type' => 'submit',
+                'class' =>
+                    'inline-flex items-center ' .
+                    ($iconOnly ? 'px-3.5 py-2' : ($fat ? 'px-8 py-4 text-lg' : 'px-7 py-2.5')) .
+                    ' bg-primary-900 dark:bg-white dark:hover:bg-gray-200 dark:text-gray-900 border border-transparent ' .
+                    'rounded-[0.70rem] font-semibold text-sm text-white hover:bg-primary-950 focus:bg-primary-950 ' .
+                    'dark:focus:bg-white active:bg-primary-950 dark:active:bg-white focus:outline-none focus:ring-2 ' .
+                    'focus:ring-primary-950 focus:ring-offset-2 transition ease-in-out duration-150' .
+                    ($centered ? ' justify-center w-full' : ''),
+                '@click' => $dropdown ? 'open = !open' : '',
+            ])
+        }}
+    >
+        @if (! $noLivewire)
+            <div wire:loading wire:target="{{ $action }}">
+                <x-spinner class="mr-2 inline h-4 w-4 text-white dark:text-gray-900" />
+                {{ __($loadingText) }}
+            </div>
+            <div wire:loading.remove wire:target="{{ $action }}">
+                {{ $slot }}
+            </div>
+        @else
             {{ $slot }}
+        @endif
+
+        @if ($dropdown)
+            <svg
+                class="-mr-1 ml-2 h-5 w-5"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+            >
+                <path
+                    fill-rule="evenodd"
+                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                    clip-rule="evenodd"
+                />
+            </svg>
+        @endif
+    </button>
+
+    @if ($dropdown)
+        <div
+            x-show="open"
+            @click.away="open = false"
+            x-transition:enter="transition duration-100 ease-out"
+            x-transition:enter-start="scale-95 transform opacity-0"
+            x-transition:enter-end="scale-100 transform opacity-100"
+            x-transition:leave="transition duration-75 ease-in"
+            x-transition:leave-start="scale-100 transform opacity-100"
+            x-transition:leave-end="scale-95 transform opacity-0"
+            class="absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-[0.70rem] bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800"
+            role="menu"
+            aria-orientation="vertical"
+            aria-labelledby="menu-button"
+            tabindex="-1"
+        >
+            <div class="py-1" role="none">
+                {{ $dropdownContent }}
+            </div>
         </div>
-    @else
-        {{ $slot }}
     @endif
-</button>
+</div>
diff --git a/resources/views/components/secondary-button.blade.php b/resources/views/components/secondary-button.blade.php
index 2a9d1cae..2ab24942 100644
--- a/resources/views/components/secondary-button.blade.php
+++ b/resources/views/components/secondary-button.blade.php
@@ -3,42 +3,84 @@
     'iconOnly' => false,
     'loadingText' => 'Loading...',
     'action' => '',
+    'dropdown' => false,
 ])
 
-<button
-    {{
-        $attributes->merge([
-            'type' => 'button',
-            'class' =>
-                'inline-flex items-center ' .
-                ($iconOnly ? 'p-2.5' : 'px-5 py-2.5') .
-                ' bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700 ' .
-                'border border-gray-300 dark:border-gray-600 ' .
-                'rounded-[0.7rem] ' .
-                'font-medium text-sm text-gray-700 dark:text-gray-200 ' .
-                'hover:from-gray-100 hover:to-gray-200 dark:hover:from-gray-700 dark:hover:to-gray-600 ' .
-                'focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 ' .
-                'focus:ring-offset-2 dark:focus:ring-offset-gray-900 ' .
-                'active:from-gray-200 active:to-gray-300 dark:active:from-gray-600 dark:active:to-gray-500 ' .
-                'disabled:opacity-50 disabled:cursor-not-allowed ' .
-                'transition-all duration-200 ease-in-out ' .
-                'shadow-sm hover:shadow-md ' .
-                ($centered ? 'justify-center w-full' : ''),
-            'wire:loading.attr' => 'disabled',
-            'wire:loading.class' => 'opacity-50 cursor-not-allowed',
-            'wire:target' => $action,
-        ])
-    }}
->
-    @if ($action)
-        <div wire:loading wire:target="{{ $action }}" class="flex items-center">
-            <x-spinner class="mr-2 h-4 w-4 text-primary-500 dark:text-primary-400" />
-            <span>{{ __($loadingText) }}</span>
-        </div>
-        <div wire:loading.remove wire:target="{{ $action }}">
+<div class="relative inline-block text-left" x-data="{ open: false }">
+    <button
+        {{
+            $attributes->merge([
+                'type' => 'button',
+                'class' =>
+                    'inline-flex items-center ' .
+                    ($iconOnly ? 'p-2.5' : 'px-5 py-2.5') .
+                    ' bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700 ' .
+                    'border border-gray-300 dark:border-gray-600 ' .
+                    'rounded-[0.7rem] ' .
+                    'font-medium text-sm text-gray-700 dark:text-gray-200 ' .
+                    'hover:from-gray-100 hover:to-gray-200 dark:hover:from-gray-700 dark:hover:to-gray-600 ' .
+                    'focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 ' .
+                    'focus:ring-offset-2 dark:focus:ring-offset-gray-900 ' .
+                    'active:from-gray-200 active:to-gray-300 dark:active:from-gray-600 dark:active:to-gray-500 ' .
+                    'disabled:opacity-50 disabled:cursor-not-allowed ' .
+                    'transition-all duration-200 ease-in-out ' .
+                    'shadow-sm hover:shadow-md ' .
+                    ($centered ? 'justify-center w-full' : ''),
+                'wire:loading.attr' => 'disabled',
+                'wire:loading.class' => 'opacity-50 cursor-not-allowed',
+                'wire:target' => $action,
+                '@click' => $dropdown ? 'open = !open' : '',
+            ])
+        }}
+    >
+        @if ($action)
+            <div wire:loading wire:target="{{ $action }}" class="flex items-center">
+                <x-spinner class="mr-2 h-4 w-4 text-primary-500 dark:text-primary-400" />
+                <span>{{ __($loadingText) }}</span>
+            </div>
+            <div wire:loading.remove wire:target="{{ $action }}">
+                {{ $slot }}
+            </div>
+        @else
             {{ $slot }}
+        @endif
+
+        @if ($dropdown)
+            <svg
+                class="-mr-1 ml-2 h-5 w-5"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+            >
+                <path
+                    fill-rule="evenodd"
+                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                    clip-rule="evenodd"
+                />
+            </svg>
+        @endif
+    </button>
+
+    @if ($dropdown)
+        <div
+            x-show="open"
+            @click.away="open = false"
+            x-transition:enter="transition duration-100 ease-out"
+            x-transition:enter-start="scale-95 transform opacity-0"
+            x-transition:enter-end="scale-100 transform opacity-100"
+            x-transition:leave="transition duration-75 ease-in"
+            x-transition:leave-start="scale-100 transform opacity-100"
+            x-transition:leave-end="scale-95 transform opacity-0"
+            class="absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-[0.70rem] bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800"
+            role="menu"
+            aria-orientation="vertical"
+            aria-labelledby="menu-button"
+            tabindex="-1"
+        >
+            <div class="py-1" role="none">
+                {{ $dropdownContent }}
+            </div>
         </div>
-    @else
-        {{ $slot }}
     @endif
-</button>
+</div>