diff --git a/resources/js/components/ui/Listing/Filters.vue b/resources/js/components/ui/Listing/Filters.vue
index 79d342a19a..354bb83597 100644
--- a/resources/js/components/ui/Listing/Filters.vue
+++ b/resources/js/components/ui/Listing/Filters.vue
@@ -39,6 +39,18 @@ function removeFieldFilter(filterHandle, fieldHandle) {
     setFilter(filterHandle, fields);
 }
 
+function getFieldFilterBadgeLabel(handle, badge) {
+    if (handle === 'date') {
+        return [badge.field, badge.translatedOperator].filter(Boolean).join(' ');
+    }
+
+    return badge;
+}
+
+function getClearFilterLabel(label) {
+    return `${__('Clear')} ${label}`;
+}
+
 function isActive(handle) {
     return activeFilters.value.hasOwnProperty(handle);
 }
@@ -171,39 +183,57 @@ function handleStackClosed() {
             </div>
         </Stack>
 
-        <Button
+        <div
             v-for="({ filter, handle, badge }, index) in fieldFilterBadges"
             :key="`${filter}-${handle}`"
-            variant="filled"
-            :icon-append="reorderable ? null : 'x'"
-            :disabled="reorderable"
-            class="last:me-12"
-            @click="removeFieldFilter(filter, handle)"
+            class="relative inline-flex h-10 shrink-0 items-center whitespace-nowrap rounded-lg bg-gray-950/5 ps-4 pe-2 text-sm font-medium text-gray-900 last:me-12 gap-1 dark:bg-white/4 dark:text-gray-200 [&_svg]:shrink-0 [&_svg]:text-gray-925 [&_svg]:opacity-60 dark:[&_svg]:text-white"
         >
-            <template v-if="handle == 'date'">
-                {{ badge.field }}
-                {{ badge.translatedOperator }}
-                <template v-if="badge.operator === 'between'">
-                    <date-time :of="badge.value.start" options="date" />
-                    {{ __('and') }}
-                    <date-time :of="badge.value.end" options="date" />
+            <div class="flex items-center gap-1.5 whitespace-nowrap">
+                <template v-if="handle == 'date'">
+                    {{ badge.field }}
+                    {{ badge.translatedOperator }}
+                    <template v-if="badge.operator === 'between'">
+                        <date-time :of="badge.value.start" options="date" />
+                        {{ __('and') }}
+                        <date-time :of="badge.value.end" options="date" />
+                    </template>
+                    <date-time v-else :of="badge.value" options="date" />
                 </template>
-                <date-time v-else :of="badge.value" options="date" />
-            </template>
-
-            <template v-else>
-                {{ badge }}
-            </template>
-        </Button>
-        <Button
+
+                <template v-else>
+                    {{ badge }}
+                </template>
+            </div>
+
+            <Button
+                v-if="!reorderable"
+                variant="ghost"
+                size="xs"
+                icon="x"
+                iconOnly
+                inset
+                class="opacity-100 [&_svg]:size-4"
+                :aria-label="getClearFilterLabel(getFieldFilterBadgeLabel(handle, badge))"
+                @click="removeFieldFilter(filter, handle)"
+            />
+        </div>
+        <div
             v-for="(badge, handle, index) in standardBadges"
             :key="handle"
-            variant="filled"
-            :icon-append="reorderable ? null : 'x'"
-            :text="badge"
-            :disabled="reorderable"
-            class="last:me-12"
-            @click="setFilter(handle, null)"
-        />
+            class="relative inline-flex h-10 shrink-0 items-center whitespace-nowrap rounded-lg bg-gray-950/5 ps-4 pe-2 text-sm font-medium text-gray-900 last:me-12 gap-1 dark:bg-white/4 dark:text-gray-200 [&_svg]:shrink-0 [&_svg]:text-gray-925 [&_svg]:opacity-60 dark:[&_svg]:text-white"
+        >
+            <span class="whitespace-nowrap">{{ badge }}</span>
+            <Button
+                v-if="!reorderable"
+                variant="ghost"
+                size="xs"
+                icon="x"
+                iconOnly
+                inset
+                class="opacity-100 [&_svg]:size-4"
+                :aria-label="getClearFilterLabel(badge)"
+                @click="setFilter(handle, null)"
+            />
+        </div>
     </div>
 </template>