diff --git a/islands/dialogs/AddPaymentMethodDialog.tsx b/islands/dialogs/AddPaymentMethodDialog.tsx
new file mode 100644
index 0000000..e2234ca
--- /dev/null
+++ b/islands/dialogs/AddPaymentMethodDialog.tsx
@@ -0,0 +1,321 @@
+import { useEffect, useRef, useState } from "preact/hooks";
+import {
+  encryptDataWithStoredPassword,
+  getEncryptionPassword,
+} from "../../helpers.ts";
+
+interface AddPaymentMethodDialogProps {
+  onClose: () => void;
+  userId?: string;
+}
+
+type FieldErrorState = {
+  bank_name: boolean;
+  account_type: boolean;
+  routing_number: boolean;
+  account_number: boolean;
+};
+
+export default function AddPaymentMethodDialog(
+  { onClose, userId }: AddPaymentMethodDialogProps,
+) {
+  const formRef = useRef<HTMLFormElement>(null);
+  const firstInputRef = useRef<HTMLInputElement>(null);
+  const [loading, setLoading] = useState(false);
+  const [fieldErrors, setFieldErrors] = useState<FieldErrorState>({
+    bank_name: false,
+    account_type: false,
+    routing_number: false,
+    account_number: false,
+  });
+
+  useEffect(() => {
+    // Focus first input when dialog opens
+    setTimeout(() => {
+      firstInputRef.current?.focus();
+    }, 100);
+  }, []);
+
+  const clearFieldError = (field: keyof FieldErrorState) => {
+    setFieldErrors((prev) => ({ ...prev, [field]: false }));
+  };
+
+  const getInputErrorClass = (hasError: boolean) => {
+    return hasError ? "border-red-500 focus:border-red-500" : "";
+  };
+
+  const addNewPaymentMethod = async () => {
+    if (!formRef.current) return;
+
+    // Collect form data
+    const formData = new FormData(formRef.current);
+    const bankName = formData.get("bank_name")?.toString().trim() || "";
+    const accountType = formData.get("account_type")?.toString() || "";
+    const routingNumber = formData.get("routing_number")?.toString().trim() || "";
+    const accountNumber = formData.get("account_number")?.toString().trim() || "";
+    const isDefault = formData.get("is_default") === "true";
+    const sender = typeof location !== "undefined" ? location.pathname : "/";
+
+    const validation = {
+      bank_name: !bankName,
+      account_type: !accountType,
+      routing_number: !routingNumber || routingNumber.length !== 9,
+      account_number: !accountNumber || accountNumber.length < 4,
+    };
+    setFieldErrors(validation);
+
+    if (validation.bank_name || validation.account_type ||
+        validation.routing_number || validation.account_number) {
+      return;
+    }
+
+    setLoading(true);
+    localStorage.setItem("lock-route", "/tenant/payment-methods?modal=off");
+
+    // Build submission data
+    const submitData = new FormData();
+    submitData.set("sender", sender);
+    submitData.set("bank_name", bankName);
+    submitData.set("account_type", accountType);
+    submitData.set("is_default", isDefault ? "true" : "false");
+
+    // Encrypt sensitive fields if password is available
+    const encryptionPassword = userId ? getEncryptionPassword(userId) : null;
+
+    if (encryptionPassword && (routingNumber || accountNumber)) {
+      try {
+        // Encrypt routing number
+        const encryptedRoutingNumber = await encryptDataWithStoredPassword(
+          userId!,
+          routingNumber,
+        );
+
+        // Encrypt account number
+        const encryptedAccountNumber = await encryptDataWithStoredPassword(
+          userId!,
+          accountNumber,
+        );
+
+        if (encryptedRoutingNumber && encryptedAccountNumber) {
+          submitData.set("routing_number_encrypted", encryptedRoutingNumber);
+          submitData.set("account_number_encrypted", encryptedAccountNumber);
+          // Send empty plaintext when encrypted
+          submitData.set("routing_number", "");
+          submitData.set("account_number", "");
+        } else {
+          throw new Error("Encryption returned empty result");
+        }
+      } catch (error) {
+        console.error("Encryption failed:", error);
+        alert("Failed to encrypt payment method data. Please try again.");
+        setLoading(false);
+        return;
+      }
+    } else {
+      // No encryption available, send plaintext (not recommended for production)
+      console.warn("No encryption password available, sending plaintext");
+      submitData.set("routing_number", routingNumber);
+      submitData.set("account_number", accountNumber);
+    }
+
+    // Submit the form
+    try {
+      const response = await fetch("/api/create/payment_method", {
+        method: "POST",
+        body: submitData,
+      });
+
+      const data = await response.json();
+
+      if (data.success) {
+        // Redirect to payment methods page
+        globalThis.location.href = "/tenant/payment-methods";
+      } else {
+        console.error("Failed to add payment method:", data.error);
+        alert(data.error || "Failed to add payment method. Please try again.");
+        setLoading(false);
+      }
+    } catch (error) {
+      console.error("Error adding payment method:", error);
+      alert("Failed to add payment method. Please try again.");
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div class="bg-white rounded-lg shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto">
+        <div class="p-6">
+          <h2 class="text-xl font-semibold text-gray-900 mb-4">
+            Add Payment Method
+          </h2>
+
+          <form ref={formRef}>
+            <div class="flex flex-col gap-1 my-4">
+              <label
+                for="bank_name"
+                class="text-sm font-medium text-gray-700"
+              >
+                Bank Name
+              </label>
+              <input
+                ref={firstInputRef}
+                class={`w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                  getInputErrorClass(fieldErrors.bank_name)
+                }`}
+                name="bank_name"
+                placeholder="e.g., Chase Bank"
+                type="text"
+                required
+                onInput={() => clearFieldError("bank_name")}
+              />
+              <div
+                class={`text-red-500 text-xs min-h-4 ${
+                  fieldErrors.bank_name ? "visible" : "invisible"
+                }`}
+                aria-live="polite"
+              >
+                Bank name is required.
+              </div>
+            </div>
+
+            <div class="flex flex-col gap-1 my-4">
+              <label
+                for="account_type"
+                class="text-sm font-medium text-gray-700"
+              >
+                Account Type
+              </label>
+              <select
+                class={`w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                  getInputErrorClass(fieldErrors.account_type)
+                }`}
+                name="account_type"
+                required
+                onInput={() => clearFieldError("account_type")}
+              >
+                <option value="">Select account type</option>
+                <option value="checking">Checking</option>
+                <option value="savings">Savings</option>
+              </select>
+              <div
+                class={`text-red-500 text-xs min-h-4 ${
+                  fieldErrors.account_type ? "visible" : "invisible"
+                }`}
+                aria-live="polite"
+              >
+                Account type is required.
+              </div>
+            </div>
+
+            <div class="flex flex-col gap-1 my-4">
+              <label
+                for="routing_number"
+                class="text-sm font-medium text-gray-700"
+              >
+                Routing Number
+              </label>
+              <input
+                class={`w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                  getInputErrorClass(fieldErrors.routing_number)
+                }`}
+                name="routing_number"
+                placeholder="9-digit routing number"
+                type="text"
+                inputMode="numeric"
+                pattern="[0-9]{9}"
+                maxLength={9}
+                required
+                onInput={() => clearFieldError("routing_number")}
+              />
+              <div
+                class={`text-red-500 text-xs min-h-4 ${
+                  fieldErrors.routing_number ? "visible" : "invisible"
+                }`}
+                aria-live="polite"
+              >
+                Routing number must be 9 digits.
+              </div>
+            </div>
+
+            <div class="flex flex-col gap-1 my-4">
+              <label
+                for="account_number"
+                class="text-sm font-medium text-gray-700"
+              >
+                Account Number
+              </label>
+              <input
+                class={`w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                  getInputErrorClass(fieldErrors.account_number)
+                }`}
+                name="account_number"
+                placeholder="Account number"
+                type="text"
+                inputMode="numeric"
+                pattern="[0-9]+"
+                minLength={4}
+                required
+                onInput={() => clearFieldError("account_number")}
+              />
+              <div
+                class={`text-red-500 text-xs min-h-4 ${
+                  fieldErrors.account_number ? "visible" : "invisible"
+                }`}
+                aria-live="polite"
+              >
+                Account number is required (min 4 digits).
+              </div>
+            </div>
+
+            <div class="flex items-center gap-2 my-4">
+              <input
+                id="is_default"
+                name="is_default"
+                type="checkbox"
+                value="true"
+                class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+              />
+              <label
+                for="is_default"
+                class="text-sm text-gray-700"
+              >
+                Set as default payment method
+              </label>
+            </div>
+          </form>
+
+          <div class="flex justify-end gap-2 mt-6">
+            <button
+              type="button"
+              class={`px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 ${
+                loading ? "opacity-70" : ""
+              }`}
+              onClick={() => {
+                localStorage.setItem(
+                  "lock-route",
+                  "/tenant/payment-methods?modal=off",
+                );
+                setLoading(true);
+                onClose();
+              }}
+              disabled={loading}
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              class={`px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 ${
+                loading ? "opacity-70" : ""
+              }`}
+              disabled={loading}
+              onClick={addNewPaymentMethod}
+            >
+              {loading ? "Adding..." : "Add Payment Method"}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}