diff --git a/ui/src/components/collections/CollectionRulesTab.svelte b/ui/src/components/collections/CollectionRulesTab.svelte
index eb5f0a0d..928b6e2d 100644
--- a/ui/src/components/collections/CollectionRulesTab.svelte
+++ b/ui/src/components/collections/CollectionRulesTab.svelte
@@ -77,17 +77,22 @@
 
 <RuleField label="List/Search rule" formKey="listRule" {collection} bind:rule={collection.listRule} />
 
+<hr />
 <RuleField label="View rule" formKey="viewRule" {collection} bind:rule={collection.viewRule} />
 
 {#if !collection?.isView}
+    <hr />
     <RuleField label="Create rule" formKey="createRule" {collection} bind:rule={collection.createRule} />
 
+    <hr />
     <RuleField label="Update rule" formKey="updateRule" {collection} bind:rule={collection.updateRule} />
 
+    <hr />
     <RuleField label="Delete rule" formKey="deleteRule" {collection} bind:rule={collection.deleteRule} />
 {/if}
 
 {#if collection?.isAuth}
+    <hr />
     <RuleField
         label="Manage rule"
         formKey="options.manageRule"
diff --git a/ui/src/components/collections/RuleField.svelte b/ui/src/components/collections/RuleField.svelte
index 50f70949..1e5b3db5 100644
--- a/ui/src/components/collections/RuleField.svelte
+++ b/ui/src/components/collections/RuleField.svelte
@@ -117,4 +117,7 @@
         border-bottom-right-radius: 0;
         background: rgba(53, 71, 104, 0.09);
     }
+    :global(.rule-field .code-editor .cm-placeholder) {
+        font-family: var(--baseFontFamily);
+    }
 </style>