diff --git a/app/views/rules/_rule.html.erb b/app/views/rules/_rule.html.erb
index 9307eb80..3526911d 100644
--- a/app/views/rules/_rule.html.erb
+++ b/app/views/rules/_rule.html.erb
@@ -1,5 +1,6 @@
 <%# locals: (rule:) %>
-<div class="flex justify-between items-center p-4 <%= rule.active? ? 'text-primary' : 'text-secondary' %>">
+<div id="<%= dom_id(rule) %>" 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"><%= rule.name %></h3>
diff --git a/app/views/rules/index.html.erb b/app/views/rules/index.html.erb
index d549e0f8..b0e1d940 100644
--- a/app/views/rules/index.html.erb
+++ b/app/views/rules/index.html.erb
@@ -59,12 +59,7 @@
       </div>
       <div class="p-1">
         <div class="flex flex-col bg-container rounded-xl shadow-border-xs first_child:rounded-t-xl last_child:rounded-b-xl">
-          <% @rules.each_with_index do |rule, idx| %>
-            <%= render "rule", rule: rule%>
-            <% unless idx == @rules.size - 1 %>
-              <div class="h-px bg-divider ml-4 mr-6"></div>
-            <% end %>
-          <% end %>
+          <%= render partial: @rules, spacer_template: "shared/ruler" %>
         </div>
       </div>
     </div>