diff --git a/app/views/rules/_form.html.erb b/app/views/rules/_form.html.erb
index 30f170c0..99768cf3 100644
--- a/app/views/rules/_form.html.erb
+++ b/app/views/rules/_form.html.erb
@@ -1,6 +1,6 @@
 <%# locals: (rule:) %>
 
-<%= styled_form_with model: rule, class: "space-y-4 w-[550px]",
+<%= styled_form_with model: rule, class: "space-y-6 w-[550px]",
                      data: { controller: "rules", rule_registry_value: rule.registry.to_json } do |f| %>
 
   <%= f.hidden_field :resource_type, value: rule.resource_type %>
@@ -10,17 +10,20 @@
   <% end %>
 
   <section class="space-y-4">
-    <h3 class="text-sm font-medium text-primary flex items-center gap-1">
-      <%= lucide_icon("tag", class: "w-4 h-4") %>
-      Rule name (optional)
-    </h3>
-    <div class="flex items-center gap-2">
+    <div class="flex items-center gap-1 text-secondary">
+      <%= lucide_icon "tag", class: "w-4 h-4 shrink-0" %>
+      <h3 class="text-sm font-medium text-primary">Rule name (optional)</h3>
+    </div>
+    <div class="ml-6">
       <%= f.text_field :name, placeholder: "Enter a name for this rule", class: "form-field__input" %>
     </div>
   </section>
 
   <section class="space-y-4">
-    <h3 class="text-sm font-medium text-primary">If <%= rule.resource_type %></h3>
+    <div class="flex items-center gap-1 text-secondary">
+      <%= lucide_icon "help-circle", class: "w-4 h-4 shrink-0" %>
+      <h3 class="text-sm font-medium text-primary font-mono">IF</h3>
+    </div>
 
     <%# Condition template, used by Stimulus controller to add new conditions dynamically %>
     <template data-rules-target="conditionGroupTemplate">
@@ -36,31 +39,36 @@
       <% end %>
     </template>
 
-    <ul data-rules-target="conditionsList" class="space-y-3 mb-4">
-      <%= f.fields_for :conditions do |cf| %>
-        <% if cf.object.compound? %>
-          <%= render "rule/conditions/condition_group", form: cf %>
-        <% else %>
-          <%= render "rule/conditions/condition", form: cf %>
+    <div class="ml-6 space-y-4">
+      <ul data-rules-target="conditionsList" class="space-y-3">
+        <%= f.fields_for :conditions do |cf| %>
+          <% if cf.object.compound? %>
+            <%= render "rule/conditions/condition_group", form: cf %>
+          <% else %>
+            <%= render "rule/conditions/condition", form: cf %>
+          <% end %>
         <% end %>
-      <% end %>
-    </ul>
+      </ul>
 
-    <div class="flex items-center gap-2">
-      <button type="button" data-action="rules#addCondition" class="btn btn--ghost">
-        <%= icon("plus") %>
-        <span>Add condition</span>
-      </button>
+      <div class="flex items-center gap-2">
+        <button type="button" data-action="rules#addCondition" class="btn btn--ghost">
+          <%= icon("plus") %>
+          <span>Add condition</span>
+        </button>
 
-      <button type="button" data-action="rules#addConditionGroup" class="btn btn--ghost">
-        <%= icon("boxes") %>
-        <span>Add condition group</span>
-      </button>
+        <button type="button" data-action="rules#addConditionGroup" class="btn btn--ghost">
+          <%= icon("boxes") %>
+          <span>Add condition group</span>
+        </button>
+      </div>
     </div>
   </section>
 
   <section class="space-y-4">
-    <h3 class="text-sm font-medium text-primary">Then</h3>
+    <div class="flex items-center gap-1 text-secondary">
+      <%= lucide_icon "arrow-right", class: "w-4 h-4 shrink-0" %>
+      <h3 class="text-sm font-medium text-primary font-mono">THEN</h3>
+    </div>
 
     <%# Action template, used by Stimulus controller to add new actions dynamically %>
     <template data-rules-target="actionTemplate">
@@ -69,28 +77,30 @@
       <% end %>
     </template>
 
-    <ul data-rules-target="actionsList" class="space-y-3">
-      <%= f.fields_for :actions do |af| %>
-        <%= render "rule/actions/action", form: af %>
-      <% end %>
-    </ul>
+    <div class="ml-6 space-y-4">
+      <ul data-rules-target="actionsList" class="space-y-3">
+        <%= f.fields_for :actions do |af| %>
+          <%= render "rule/actions/action", form: af %>
+        <% end %>
+      </ul>
 
-    <button
-        type="button"
-        data-action="rules#addAction"
-        class="btn btn--ghost">
-      <%= icon("plus") %>
-      <span>Add action</span>
-    </button>
+      <button type="button" data-action="rules#addAction" class="btn btn--ghost">
+        <%= icon("plus") %>
+        <span>Add action</span>
+      </button>
+    </div>
   </section>
 
   <section class="space-y-4">
-    <h3 class="text-sm font-medium text-primary">Apply this</h3>
+    <div class="flex items-center gap-1 text-secondary">
+      <%= lucide_icon "calendar", class: "w-4 h-4 shrink-0" %>
+      <h3 class="text-sm font-medium text-primary font-mono">FOR</h3>
+    </div>
 
-    <div class="space-y-2">
+    <div class="ml-6 space-y-3">
       <div class="flex items-center gap-2">
         <%= f.radio_button :effective_date_enabled, false, checked: rule.effective_date.nil?, data: { action: "rules#clearEffectiveDate" } %>
-        <%= f.label :effective_date_enabled_false, "To all past and future #{rule.resource_type}s", class: "text-sm text-primary" %>
+        <%= f.label :effective_date_enabled_false, "All past and future #{rule.resource_type}s", class: "text-sm text-primary" %>
       </div>
 
       <div class="flex items-center gap-2">
diff --git a/app/views/rules/_rule.html.erb b/app/views/rules/_rule.html.erb
index a86b8c54..abee6b2c 100644
--- a/app/views/rules/_rule.html.erb
+++ b/app/views/rules/_rule.html.erb
@@ -5,43 +5,62 @@
     <% if rule.name.present? %>
       <h3 class="font-medium text-lg text-primary"><%= rule.name %></h3>
     <% end %>
-    <% if rule.conditions.any? %>
-      <p class="flex items-center flex-wrap gap-1.5">
-        <span class="px-2 py-1 border border-alpha-black-200 rounded-full">
-          <% if rule.conditions.first.compound? %>
-            If <%= rule.conditions.first.sub_conditions.first.filter.label %> <%= rule.conditions.first.sub_conditions.first.operator %> <%= rule.conditions.first.sub_conditions.first.value_display %>
-          <% else %>
-            If <%= rule.conditions.first.filter.label %> <%= rule.conditions.first.operator %> <%= rule.conditions.first.value_display %>
-          <% end %>
-        </span>
 
-        <% if rule.conditions.count > 1 %>
-          and <%= rule.conditions.count - 1 %> more <%= rule.conditions.count - 1 == 1 ? "condition" : "conditions" %>
-        <% end %>
-      </p>
+    <% if rule.conditions.any? %>
+      <div class="flex items-center gap-2 mt-1">
+        <div class="flex items-center gap-1 text-secondary w-16 shrink-0">
+          <%= lucide_icon "help-circle", class: "w-4 h-4 shrink-0" %>
+          <span class="font-mono text-xs">IF</span>
+        </div>
+        <p class="flex items-center flex-wrap gap-1.5 m-0">
+          <span class="px-2 py-1 border border-secondary rounded-full">
+            <% if rule.conditions.first.compound? %>
+              <%= rule.conditions.first.sub_conditions.first.filter.label %> <%= rule.conditions.first.sub_conditions.first.operator %> <%= rule.conditions.first.sub_conditions.first.value_display %>
+            <% else %>
+              <%= rule.conditions.first.filter.label %> <%= rule.conditions.first.operator %> <%= rule.conditions.first.value_display %>
+            <% end %>
+          </span>
+          <% if rule.conditions.count > 1 %>
+            and <%= rule.conditions.count - 1 %> more <%= rule.conditions.count - 1 == 1 ? "condition" : "conditions" %>
+          <% end %>
+        </p>
+      </div>
     <% end %>
 
-    <p class="flex items-center flex-wrap gap-1.5">
-      <span class="px-2 py-1 border border-alpha-black-200 rounded-full">
-        <% if rule.actions.first.value && rule.actions.first.options %>
-          <%= rule.actions.first.executor.label %> to <%= rule.actions.first.value_display %>
-        <% else %>
-          <%= rule.actions.first.executor.label %>
+    <div class="flex items-center gap-2 mt-1">
+      <div class="flex items-center gap-1 text-secondary w-16 shrink-0">
+        <%= lucide_icon "arrow-right", class: "w-4 h-4 shrink-0" %>
+        <span class="font-mono text-xs">THEN</span>
+      </div>
+      <p class="flex items-center flex-wrap gap-1.5 m-0">
+        <span class="px-2 py-1 border border-secondary rounded-full">
+          <% if rule.actions.first.value && rule.actions.first.options %>
+            <%= rule.actions.first.executor.label %> to <%= rule.actions.first.value_display %>
+          <% else %>
+            <%= rule.actions.first.executor.label %>
+          <% end %>
+        </span>
+        <% if rule.actions.count > 1 %>
+          and <%= rule.actions.count - 1 %> more <%= rule.actions.count - 1 == 1 ? "action" : "actions" %>
         <% end %>
-      </span>
+      </p>
+    </div>
 
-      <% if rule.actions.count > 1 %>
-        and <%= rule.actions.count - 1 %> more <%= rule.actions.count - 1 == 1 ? "action" : "actions" %>
-      <% end %>
-    </p>
-
-    <p class="flex items-center flex-wrap gap-1.5">
-      <% if rule.effective_date.nil? %>
-        To all past and future <%= rule.resource_type.pluralize %>
-      <% else %>
-        To all <%= rule.resource_type.pluralize %> on or after <%= rule.effective_date %>
-      <% end %>
-    </p>
+    <div class="flex items-center gap-2 mt-1">
+      <div class="flex items-center gap-1 text-secondary w-16 shrink-0">
+        <%= lucide_icon "calendar", class: "w-4 h-4 shrink-0" %>
+        <span class="font-mono text-xs">FOR</span>
+      </div>
+      <p class="flex items-center flex-wrap gap-1.5 m-0">
+        <span class="px-2 py-1 border border-secondary rounded-full">
+          <% if rule.effective_date.nil? %>
+            All past and future <%= rule.resource_type.pluralize %>
+          <% else %>
+            <%= rule.resource_type.pluralize %> on or after <%= rule.effective_date.strftime('%b %-d, %Y') %>
+          <% end %>
+        </span>
+      </p>
+    </div>
   </div>
 
   <div class="flex items-center gap-4">