diff --git a/app/View/Ui/Action.php b/app/View/Ui/Action.php
index 1e10fff6..da13fcdb 100644
--- a/app/View/Ui/Action.php
+++ b/app/View/Ui/Action.php
@@ -19,9 +19,7 @@ class Action extends Component
     public function render()
     {
         return <<<'HTML'
-            <a x-tooltip.raw="{{$slot}}" href="#" {{ $attributes }} class="inline-flex
-                w-6 h-5 flex items-center justify-center rounded {{ $allColors($variant) }}
-            ">
+            <a x-tooltip.raw="{{$slot}}" href="#" {{ $attributes->merge(['class' => 'inline-flex w-6 h-5 flex items-center justify-center rounded '.$allColors($variant)]) }}>
                 <x-ui::sprite class="w-3 h-3 flex-none" :src="$icon"></x-ui::sprite>
             </a>
         HTML;
diff --git a/app/View/Ui/Badge.php b/app/View/Ui/Badge.php
index 5fa599b5..57c92178 100644
--- a/app/View/Ui/Badge.php
+++ b/app/View/Ui/Badge.php
@@ -19,7 +19,7 @@ class Badge extends Component
     public function render()
     {
         return <<<'HTML'
-            <button type="button" href="#" {{ $attributes }} class="h-6 px-3 space-x-2 items-center rounded-full {{ $allColors($variant) }} hidden lg:flex">
+            <button type="button" href="#" {{ $attributes->merge(['class' => 'h-6 px-3 space-x-2 items-center rounded-full hidden lg:flex '.$allColors($variant)]) }}>
                 <x-ui::sprite class="w-3 h-3 flex-none" :src="$icon"></x-ui::sprite>
                 <span class="text-sm">
                     {{$slot}}
diff --git a/app/View/Ui/BooleanDisplay.php b/app/View/Ui/BooleanDisplay.php
index 47043109..120c47f1 100644
--- a/app/View/Ui/BooleanDisplay.php
+++ b/app/View/Ui/BooleanDisplay.php
@@ -24,7 +24,7 @@ class BooleanDisplay extends Component
     public function render()
     {
         return <<<'HTML'
-            <div x-tooltip.raw="{{$hint}}" class="flex space-x-2 items-center group @if($dark) dark @endif">
+            <div x-tooltip.raw="{{$hint}}" {{ $attributes->merge(['class' => 'flex space-x-2 items-center group '.($dark ? 'dark' : '')]) }}">
                 <div class="border-2 rounded-full w-5 h-5 flex items-center justify-center
                     @if ($value) border-green-700 group-[.dark]:border-green-500
                     @else border-red-700 group-[.dark]:border-red-500
diff --git a/app/View/Ui/Button.php b/app/View/Ui/Button.php
index e1f1129e..37e41f9c 100644
--- a/app/View/Ui/Button.php
+++ b/app/View/Ui/Button.php
@@ -14,7 +14,7 @@ class Button extends Component
     public function render()
     {
         return <<<'HTML'
-            <button type="{{$type}}" class="px-3 py-2 uppercase no-underline text-sm items-center justify-center bg-primary-700 rounded text-primary-300">
+            <button type="{{$type}}" {{ $attributes->merge(['class' => 'px-3 py-2 uppercase no-underline text-sm items-center justify-center bg-primary-700 rounded text-primary-300']) }}>
                 {{$slot}}
             </button>
         HTML;
diff --git a/app/View/Ui/Menulist.php b/app/View/Ui/Menulist.php
index ca01b6e8..6e529870 100644
--- a/app/View/Ui/Menulist.php
+++ b/app/View/Ui/Menulist.php
@@ -19,7 +19,7 @@ class Menulist extends Component
     public function render()
     {
         return <<<'HTML'
-            <div class="p-6 bg-gray-700 border-r border-gray-600 flex-none w-maxc flex flex-col justify-between">
+            <div {{$attributes->merge(['class' => 'p-6 bg-gray-700 border-r border-gray-600 flex-none w-maxc flex flex-col justify-between']) }}">
                 <div class="grid gap-1">
                     @foreach($entries as $entry)
                     <a href="{{$entry['url']}}" class="rounded py-1 px-3 text-gray-400 duration-200 hover:bg-gray-600 {{$activeClass($entry)}}" @if($entry['is_active']) data-active @endif>