diff --git a/resources/css/style.css b/resources/css/style.css
index 1912d5cd..cfee0b21 100644
--- a/resources/css/style.css
+++ b/resources/css/style.css
@@ -168,3 +168,15 @@ table thead {
 .pg-filter-container {
     @apply py-3;
 }
+
+.pg-enabled-filters-base {
+    @apply flex items-center gap-2 mt-2 md:mt-0 flex-wrap
+}
+
+.pg-enabled-filters-span-clear-all {
+    @apply outline-none inline-flex justify-center items-center group rounded gap-x-1 text-xs font-semibold px-2.5 py-0.5 text-pg-primary-100 bg-pg-primary-500 dark:bg-pg-primary-700
+}
+
+.pg-enabled-filters-span {
+    @apply outline-none inline-flex justify-center items-center group rounded gap-x-1 text-xs font-semibold px-2.5 py-0.5 text-pg-primary-600 dark:text-pg-primary-200 bg-pg-primary-100 dark:bg-pg-primary-600
+}
diff --git a/resources/views/components/frameworks/tailwind/header/enabled-filters.blade.php b/resources/views/components/frameworks/tailwind/header/enabled-filters.blade.php
index df6044f9..ecfe2b03 100644
--- a/resources/views/components/frameworks/tailwind/header/enabled-filters.blade.php
+++ b/resources/views/components/frameworks/tailwind/header/enabled-filters.blade.php
@@ -1,9 +1,7 @@
 @if (count($enabledFilters))
-    <div class="flex items-center gap-2 mt-2 md:mt-0 flex-wrap">
+    <div class="pg-enabled-filters-base">
         @if (count($enabledFilters) > 1)
-            <span
-                class="outline-none inline-flex justify-center items-center group rounded gap-x-1 text-xs font-semibold px-2.5 py-0.5 text-pg-primary-100 bg-pg-primary-500 dark:bg-pg-primary-700"
-            >
+            <span class="pg-enabled-filters-clear-all">
                 {{ trans('livewire-powergrid::datatable.buttons.clear_all_filters') }}
                 <div class="relative flex items-center w-2 h-2">
                     <button
@@ -19,7 +17,7 @@ class="outline-none inline-flex justify-center items-center group rounded gap-x-
             @isset($filter['label'])
                 <span
                     wire:key="enabled-filters-{{ $field }}"
-                    class="outline-none inline-flex justify-center items-center group rounded gap-x-1 text-xs font-semibold px-2.5 py-0.5 text-pg-primary-600 dark:text-pg-primary-200 bg-pg-primary-100 dark:bg-pg-primary-600"
+                    class="pg-enabled-filters-span"
                 >
                     {{ $filter['label'] }}
                     <div class="relative flex items-center w-2 h-2">
diff --git a/resources/views/components/frameworks/tailwind/header/filters.blade.php b/resources/views/components/frameworks/tailwind/header/filters.blade.php
index 41c102a1..ec02ebb0 100644
--- a/resources/views/components/frameworks/tailwind/header/filters.blade.php
+++ b/resources/views/components/frameworks/tailwind/header/filters.blade.php
@@ -1,5 +1,6 @@
 <div
-    wire:key="toggle-filters-{{ $tableName }}')"
+    wire:key="toggle-filters-{{ $tableName }}"
+    id="toggle-filters"
     class="flex mr-2 mt-2 sm:mt-0 gap-3"
 >
     <button