diff --git a/src/components/validation-rule-modal/validation-rule-modal.html b/src/components/validation-rule-modal/validation-rule-modal.html
new file mode 100644
index 0000000..7566980
--- /dev/null
+++ b/src/components/validation-rule-modal/validation-rule-modal.html
@@ -0,0 +1,42 @@
+<div id="validation-rule-modal" style="
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0,0,0,0.5);
+  display: none;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+">
+  <div style="
+    background: white;
+    padding: 2rem;
+    border-radius: 0.5rem;
+    width: 400px;
+    max-width: 90%;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+  ">
+    <h2 style="font-size: 1.2rem; font-weight: bold; margin-bottom: 1rem;">
+      Add Validation Rule
+    </h2>
+
+    <label style="display: block; margin-bottom: 0.5rem;">
+      Quorum:
+      <input id="vr-quorum" type="number" style="width: 100%; padding: 0.5rem; margin-top: 0.25rem;" />
+    </label>
+
+    <label style="display: block; margin-bottom: 0.5rem;">
+      Min Sig Member:
+      <input id="vr-minsig" type="number" style="width: 100%; padding: 0.5rem; margin-top: 0.25rem;" />
+    </label>
+
+    <label style="display: block; margin-bottom: 1rem;">
+      Fields (comma-separated):
+      <input id="vr-fields" type="text" placeholder="e.g. field1, field2" style="width: 100%; padding: 0.5rem; margin-top: 0.25rem;" />
+    </label>
+
+    <div style="display: flex; justify-content: flex-end; gap: 1rem;">
+      <button id="vr-cancel" style="padding: 0.5rem 1rem;">Cancel</button>
+      <button id="vr-submit" style="padding: 0.5rem 1rem; background-color: #4f46e5; color: white; border: none; border-radius: 0.375rem;">Add</button>
+    </div>
+  </div>
+</div>
diff --git a/src/components/validation-rule-modal/validation-rule-modal.ts b/src/components/validation-rule-modal/validation-rule-modal.ts
new file mode 100644
index 0000000..121d954
--- /dev/null
+++ b/src/components/validation-rule-modal/validation-rule-modal.ts
@@ -0,0 +1,61 @@
+export interface ValidationRule {
+  quorum: number;
+  fields: string[];
+  min_sig_member: number;
+}
+
+/**
+ * Loads and injects the modal HTML into the document if not already loaded.
+ */
+export async function loadValidationRuleModal(templatePath: string = '/src/components/validation-rule-modal/validation-rule-modal.html') {
+  if (document.getElementById('validation-rule-modal')) return;
+
+  const res = await fetch(templatePath);
+  const html = await res.text();
+
+  const tempDiv = document.createElement('div');
+  tempDiv.innerHTML = html;
+
+  const modal = tempDiv.querySelector('#validation-rule-modal');
+  if (!modal) {
+    throw new Error('Modal HTML missing #validation-rule-modal');
+  }
+
+  document.body.appendChild(modal);
+}
+
+/**
+ * Opens the modal and lets the user input a ValidationRule.
+ * Calls the callback with the constructed rule on submit.
+ */
+export function showValidationRuleModal(onSubmit: (rule: ValidationRule) => void) {
+  const modal = document.getElementById('validation-rule-modal')!;
+  const quorumInput = document.getElementById('vr-quorum') as HTMLInputElement;
+  const minsigInput = document.getElementById('vr-minsig') as HTMLInputElement;
+  const fieldsInput = document.getElementById('vr-fields') as HTMLInputElement;
+
+  const cancelBtn = document.getElementById('vr-cancel')!;
+  const submitBtn = document.getElementById('vr-submit')!;
+
+  // Reset values
+  quorumInput.value = '';
+  minsigInput.value = '';
+  fieldsInput.value = '';
+
+  modal.style.display = 'flex';
+
+  cancelBtn.onclick = () => {
+    modal.style.display = 'none';
+  };
+
+  submitBtn.onclick = () => {
+    const rule: ValidationRule = {
+      quorum: parseInt(quorumInput.value),
+      min_sig_member: parseInt(minsigInput.value),
+      fields: fieldsInput.value.split(',').map(f => f.trim()).filter(Boolean),
+    };
+
+    modal.style.display = 'none';
+    onSubmit(rule);
+  };
+}