diff --git a/app/web/static/app.js b/app/web/static/app.js
index 0ee0719..a3a448f 100644
--- a/app/web/static/app.js
+++ b/app/web/static/app.js
@@ -37,3 +37,21 @@ function startSyncCountdown(el) {
 document.addEventListener("DOMContentLoaded", () => {
     document.querySelectorAll("time.next-sync[data-utc]").forEach(startSyncCountdown);
 });
+
+document.body.addEventListener("htmx:oobAfterSwap", (event) => {
+    if (event.detail.target.id !== "toast-container") {
+        return;
+    }
+    // event.detail.target is the *old* element htmx just swapped out (an
+    // outerHTML oob-swap detaches it), so look the live one up by id
+    // rather than trusting that reference.
+    const container = document.getElementById("toast-container");
+    const toast = container ? container.querySelector(".toast") : null;
+    if (!toast) {
+        return;
+    }
+    setTimeout(() => {
+        toast.classList.add("toast-leaving");
+        setTimeout(() => toast.remove(), 300);
+    }, 4000);
+});
diff --git a/app/web/templates/fragments/toast.html b/app/web/templates/fragments/toast.html
index dbe130c..7cf76d2 100644
--- a/app/web/templates/fragments/toast.html
+++ b/app/web/templates/fragments/toast.html
@@ -1,3 +1,3 @@
-<div id="toast-container" hx-swap-oob="true">
+<div id="toast-container" class="toast-container" hx-swap-oob="true">
     <div class="toast toast-{{ level }}">{{ message }}</div>
 </div>