diff --git a/web/VaultPanel.tsx b/web/VaultPanel.tsx
index 92e66e4..c295b16 100644
--- a/web/VaultPanel.tsx
+++ b/web/VaultPanel.tsx
@@ -108,7 +108,8 @@ export const VaultPanel = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const save = async () => {
+  const save = async (ev?: React.FormEvent) => {
+    ev?.preventDefault();
     setSaving(true);
     setError(null);
     try {
@@ -182,14 +183,11 @@ export const VaultPanel = () => {
           </div>
         </header>
 
-        <section className="flex flex-col gap-4 rounded-xl border border-border p-4">
+        <form onSubmit={save} className="flex flex-col gap-4 rounded-xl border border-border p-4">
           <Field label="Vaultwarden URL">
             <input
               value={url}
               onChange={(ev) => setUrl(ev.target.value)}
-              onKeyDown={(ev) => {
-                if (ev.key === 'Enter' && dirty && !saving) void save();
-              }}
               placeholder="https://vault.example.com"
               spellCheck={false}
               autoCapitalize="none"
@@ -206,8 +204,7 @@ export const VaultPanel = () => {
 
           <div className="flex items-center gap-2">
             <button
-              type="button"
-              onClick={() => void save()}
+              type="submit"
               disabled={!dirty || saving}
               className="rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40"
             >
@@ -233,7 +230,7 @@ export const VaultPanel = () => {
               </button>
             )}
           </div>
-        </section>
+        </form>
 
         {config?.configured && (
           <section className="flex flex-col gap-3 rounded-xl border border-border p-4">