diff --git a/app/components/sn_filterable/filter_category_component.html.erb b/app/components/sn_filterable/filter_category_component.html.erb
index 472a80f..d58283d 100644
--- a/app/components/sn_filterable/filter_category_component.html.erb
+++ b/app/components/sn_filterable/filter_category_component.html.erb
@@ -6,7 +6,8 @@
     <div class="my-2 flex items-center">
       <% if @filter[:multi] %>
         <%= content_tag :input, "",
-                        class: "focus:ring-purple-400 cursor-pointer h-5 w-5 text-purple-500 bg-purple-100 border-0 rounded",
+                        class: "focus:ring-vio
+                          -400 cursor-pointer h-5 w-5 text-violet-500 bg-violet-100 border-0 rounded",
                         type: "checkbox",
                         name: "filter[#{@filter[:filter_name]}][]",
                         value: sub_filter[:value],
@@ -17,7 +18,7 @@
         %>
       <% else %>
         <%= content_tag :input, "",
-                        class: "focus:ring-purple-400 cursor-pointer h-5 w-5 text-purple-500 bg-purple-100 border-0",
+                        class: "focus:ring-violet-400 cursor-pointer h-5 w-5 text-violet-500 bg-violet-100 border-0",
                         type: "radio",
                         name: "filter[#{@filter[:filter_name]}]",
                         value: sub_filter[:value],
diff --git a/app/components/sn_filterable/main_component.html.erb b/app/components/sn_filterable/main_component.html.erb
index ad35cae..e2a15d0 100644
--- a/app/components/sn_filterable/main_component.html.erb
+++ b/app/components/sn_filterable/main_component.html.erb
@@ -51,7 +51,7 @@
                         <% selected_explcitly = value == @filtered.queries["per"].to_i %>
                         <% selected_by_default = @filtered.queries["per"].blank? && value == @filtered.items.default_per_page %>
                         <%= content_tag :input, "",
-                                        class: "focus:ring-purple-400 cursor-pointer h-5 w-5 text-purple-500 bg-purple-100 border-0",
+                                        class: "focus:ring-violet-400 cursor-pointer h-5 w-5 text-violet-500 bg-violet-100 border-0",
                                         type: "radio",
                                         id: "per-#{value}",
                                         "x-data": { iteracted: selected_explcitly }.to_json,