diff --git a/app/assets/tailwind/maybe-design-system/background-utils.css b/app/assets/tailwind/maybe-design-system/background-utils.css
index 1c7bc56a..fd5f673f 100644
--- a/app/assets/tailwind/maybe-design-system/background-utils.css
+++ b/app/assets/tailwind/maybe-design-system/background-utils.css
@@ -78,10 +78,18 @@
   }
 }
 
+@utility bg-divider {
+  @apply bg-alpha-black-100;
+
+  @variant theme-dark {
+    @apply bg-alpha-white-100;
+  }
+}
+
 @utility bg-overlay {
   background-color: --alpha(var(--color-gray-100) / 50%);
 
   @variant theme-dark {
     background-color: var(--color-alpha-black-900);
   }
-}
\ No newline at end of file
+}
diff --git a/app/views/rules/_rule.html.erb b/app/views/rules/_rule.html.erb
index e0c5fadb..9307eb80 100644
--- a/app/views/rules/_rule.html.erb
+++ b/app/views/rules/_rule.html.erb
@@ -1,8 +1,8 @@
 <%# locals: (rule:) %>
-<div class="flex justify-between items-center p-4 <%= 'text-secondary' unless rule.active? %>">
+<div class="flex justify-between items-center p-4 <%= rule.active? ? 'text-primary' : 'text-secondary' %>">
   <div class="text-sm space-y-1.5">
     <% if rule.name.present? %>
-      <h3 class="font-medium text-md text-primary"><%= rule.name %></h3>
+      <h3 class="font-medium text-md"><%= rule.name %></h3>
     <% end %>
     <% if rule.conditions.any? %>
       <div class="flex items-center gap-2 mt-1">
diff --git a/app/views/rules/index.html.erb b/app/views/rules/index.html.erb
index e3007ca2..d549e0f8 100644
--- a/app/views/rules/index.html.erb
+++ b/app/views/rules/index.html.erb
@@ -62,7 +62,7 @@
           <% @rules.each_with_index do |rule, idx| %>
             <%= render "rule", rule: rule%>
             <% unless idx == @rules.size - 1 %>
-              <div class="h-px bg-alpha-black-50 ml-4 mr-6"></div>
+              <div class="h-px bg-divider ml-4 mr-6"></div>
             <% end %>
           <% end %>
         </div>