diff --git a/frontend/src/components/RulesList.tsx b/frontend/src/components/RulesList.tsx
index 011045b..fa675fb 100644
--- a/frontend/src/components/RulesList.tsx
+++ b/frontend/src/components/RulesList.tsx
@@ -200,7 +200,13 @@ const RulesList: Component = () => {
               <Show when={!rules.loading} fallback={
                 <tr><td colspan="4" class="text-center py-4">Loading...</td></tr>
               }>
-                <For each={rules()}>
+                <For each={rules()} fallback={
+                  <tr>
+                    <td colspan="4" class="text-center py-8 text-gray-500">
+                      No rules configured yet. Click "+ New Rule" to create one.
+                    </td>
+                  </tr>
+                }>
                   {(rule) => (
                     <tr>
                       <td class="px-6 py-4 text-sm font-medium text-gray-900">
@@ -208,8 +214,8 @@ const RulesList: Component = () => {
                       </td>
                       <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                         <span class={`px-2 py-1 rounded-full text-xs ${rule.action === 'replace' ? 'bg-purple-100 text-purple-800' :
-                            rule.action === 'modify' ? 'bg-blue-100 text-blue-800' :
-                              'bg-gray-100 text-gray-800'
+                          rule.action === 'modify' ? 'bg-blue-100 text-blue-800' :
+                            'bg-gray-100 text-gray-800'
                           }`}>
                           {rule.action}
                         </span>
@@ -218,8 +224,8 @@ const RulesList: Component = () => {
                         <button
                           onClick={() => toggleRule(rule)}
                           class={`px-3 py-1 rounded-md text-sm font-medium ${rule.is_enabled
-                              ? 'bg-green-100 text-green-800'
-                              : 'bg-gray-100 text-gray-800'
+                            ? 'bg-green-100 text-green-800'
+                            : 'bg-gray-100 text-gray-800'
                             }`}>
                           {rule.is_enabled ? '✓ Enabled' : '✗ Disabled'}
                         </button>