diff --git a/public/js/hosting-app.js b/public/js/hosting-app.js
index 80e4fbb..8a76a1b 100644
--- a/public/js/hosting-app.js
+++ b/public/js/hosting-app.js
@@ -171,11 +171,14 @@
       h += '<div class="hosting-msg ok">Zahlung erfolgreich — Ihre Instanz wird bereitgestellt.</div>';
 
     if (subscription) {
+      const pastDue = subscription.status === "past_due";
+      if (pastDue) h += '<div class="hosting-msg err">Letzte Zahlung fehlgeschlagen — bitte Zahlungsmittel im Abo-Portal aktualisieren.</div>';
       h += '<div class="hosting-row"><span class="muted">Abo</span><b>' +
         esc(subscription.plan) + " · " + esc(subscription.status) + "</b></div>";
       if (subscription.current_period_end)
         h += '<div class="hosting-row"><span class="muted">Nächste Verlängerung</span><span>' +
           esc(new Date(subscription.current_period_end).toLocaleDateString("de-CH")) + "</span></div>";
+      h += '<div style="margin-top:14px"><button class="hosting-btn hosting-btn-dark" id="managePlan" style="width:auto;padding:9px 18px">Abo verwalten</button></div>';
     }
 
     if (instances && instances.length) {
@@ -235,6 +238,12 @@
       );
       const add = root.querySelector("#addInstance");
       if (add) add.onclick = () => alert("Weitere Instanzen kommen bald. Kontaktieren Sie uns für ein Mehrfach-Abo.");
+      const manage = root.querySelector("#managePlan");
+      if (manage) manage.onclick = async () => {
+        manage.disabled = true;
+        try { const { url } = await api("POST", "/billing/portal"); go(url); }
+        catch (err) { alert(err.message); manage.disabled = false; }
+      };
     }
     if (acctTab === "profile") {
       root.querySelector("#saveProfile").onclick = async (e) => {
diff --git a/static/js/hosting-app.js b/static/js/hosting-app.js
index 80e4fbb..8a76a1b 100644
--- a/static/js/hosting-app.js
+++ b/static/js/hosting-app.js
@@ -171,11 +171,14 @@
       h += '<div class="hosting-msg ok">Zahlung erfolgreich — Ihre Instanz wird bereitgestellt.</div>';
 
     if (subscription) {
+      const pastDue = subscription.status === "past_due";
+      if (pastDue) h += '<div class="hosting-msg err">Letzte Zahlung fehlgeschlagen — bitte Zahlungsmittel im Abo-Portal aktualisieren.</div>';
       h += '<div class="hosting-row"><span class="muted">Abo</span><b>' +
         esc(subscription.plan) + " · " + esc(subscription.status) + "</b></div>";
       if (subscription.current_period_end)
         h += '<div class="hosting-row"><span class="muted">Nächste Verlängerung</span><span>' +
           esc(new Date(subscription.current_period_end).toLocaleDateString("de-CH")) + "</span></div>";
+      h += '<div style="margin-top:14px"><button class="hosting-btn hosting-btn-dark" id="managePlan" style="width:auto;padding:9px 18px">Abo verwalten</button></div>';
     }
 
     if (instances && instances.length) {
@@ -235,6 +238,12 @@
       );
       const add = root.querySelector("#addInstance");
       if (add) add.onclick = () => alert("Weitere Instanzen kommen bald. Kontaktieren Sie uns für ein Mehrfach-Abo.");
+      const manage = root.querySelector("#managePlan");
+      if (manage) manage.onclick = async () => {
+        manage.disabled = true;
+        try { const { url } = await api("POST", "/billing/portal"); go(url); }
+        catch (err) { alert(err.message); manage.disabled = false; }
+      };
     }
     if (acctTab === "profile") {
       root.querySelector("#saveProfile").onclick = async (e) => {