diff --git a/crates/frontend/js-components/lib/delete-button.ts b/crates/frontend/js-components/lib/delete-button.ts
new file mode 100644
index 0000000..2a55496
--- /dev/null
+++ b/crates/frontend/js-components/lib/delete-button.ts
@@ -0,0 +1,44 @@
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { createClient } from "webdav";
+
+@customElement("delete-button")
+export class DeleteButton extends LitElement {
+  constructor() {
+    super()
+  }
+
+  @property({ type: Boolean })
+  trash: boolean = false
+  @property()
+  href: string
+
+  protected createRenderRoot() {
+    return this
+  }
+
+  protected render() {
+    let text = this.trash ? 'Move to trash' : 'Delete'
+    return html`<button class="delete" @click=${e => this._onClick(e)}>${text}</button>`
+  }
+
+  async _onClick(event: Event) {
+    event.preventDefault()
+    if (!this.trash && !confirm('Do you want to delete this collection permanently?')) {
+      return
+    }
+
+    let response = await fetch(this.href, {
+      method: 'DELETE',
+      headers: {
+        'X-No-Trashbin': this.trash ? '0' : '1'
+      }
+    })
+    if (response.status < 200 || response.status >= 300) {
+      alert('An error occured, look into the console')
+      console.error(response)
+      return
+    }
+    window.location.reload()
+  }
+}
diff --git a/crates/frontend/js-components/vite.config.ts b/crates/frontend/js-components/vite.config.ts
index 2e3220b..47c8eb0 100644
--- a/crates/frontend/js-components/vite.config.ts
+++ b/crates/frontend/js-components/vite.config.ts
@@ -15,6 +15,7 @@ export default defineConfig({
       input: [
         "lib/create-calendar-form.ts",
         "lib/create-addressbook-form.ts",
+        "lib/delete-button.ts",
       ],
       output: {
         dir: "../public/assets/js/",
diff --git a/crates/frontend/public/assets/js/create-addressbook-form.mjs b/crates/frontend/public/assets/js/create-addressbook-form.mjs
index e9abc69..9e70d46 100644
--- a/crates/frontend/public/assets/js/create-addressbook-form.mjs
+++ b/crates/frontend/public/assets/js/create-addressbook-form.mjs
@@ -1,10 +1,11 @@
 import { i as c, x as u } from "./lit-CWlWuEHk.mjs";
-import { e as d, n as m, a as o, t as h } from "./ref-DuYNkSJ_.mjs";
+import { n as o, t as h } from "./property-DYFkTqgI.mjs";
+import { e as d, n as m } from "./ref-nf9JiOyl.mjs";
 import { a as b } from "./webdav-Bz4I5vNH.mjs";
-var y = Object.defineProperty, f = Object.getOwnPropertyDescriptor, a = (t, s, l, r) => {
-  for (var e = r > 1 ? void 0 : r ? f(s, l) : s, n = t.length - 1, p; n >= 0; n--)
-    (p = t[n]) && (e = (r ? p(s, l, e) : p(e)) || e);
-  return r && e && y(s, l, e), e;
+var y = Object.defineProperty, f = Object.getOwnPropertyDescriptor, r = (t, a, n, s) => {
+  for (var e = s > 1 ? void 0 : s ? f(a, n) : a, l = t.length - 1, p; l >= 0; l--)
+    (p = t[l]) && (e = (s ? p(a, n, e) : p(e)) || e);
+  return s && e && y(a, n, e), e;
 };
 let i = class extends c {
   constructor() {
@@ -65,19 +66,19 @@ let i = class extends c {
     }), window.location.reload(), null;
   }
 };
-a([
+r([
   o()
 ], i.prototype, "user", 2);
-a([
+r([
   o()
 ], i.prototype, "id", 2);
-a([
+r([
   o()
 ], i.prototype, "displayname", 2);
-a([
+r([
   o()
 ], i.prototype, "description", 2);
-i = a([
+i = r([
   h("create-addressbook-form")
 ], i);
 export {
diff --git a/crates/frontend/public/assets/js/create-calendar-form.mjs b/crates/frontend/public/assets/js/create-calendar-form.mjs
index e804565..ca9d6e0 100644
--- a/crates/frontend/public/assets/js/create-calendar-form.mjs
+++ b/crates/frontend/public/assets/js/create-calendar-form.mjs
@@ -1,14 +1,15 @@
 import { i as u, x as c } from "./lit-CWlWuEHk.mjs";
-import { e as d, n as m, a as o, t as h } from "./ref-DuYNkSJ_.mjs";
+import { n as o, t as h } from "./property-DYFkTqgI.mjs";
+import { e as m, n as d } from "./ref-nf9JiOyl.mjs";
 import { a as b } from "./webdav-Bz4I5vNH.mjs";
-var y = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, a = (t, e, l, s) => {
-  for (var i = s > 1 ? void 0 : s ? $(e, l) : e, n = t.length - 1, p; n >= 0; n--)
-    (p = t[n]) && (i = (s ? p(e, l, i) : p(i)) || i);
-  return s && i && y(e, l, i), i;
+var y = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, a = (t, e, n, s) => {
+  for (var i = s > 1 ? void 0 : s ? $(e, n) : e, l = t.length - 1, p; l >= 0; l--)
+    (p = t[l]) && (i = (s ? p(e, n, i) : p(i)) || i);
+  return s && i && y(e, n, i), i;
 };
 let r = class extends u {
   constructor() {
-    super(), this.client = b("/caldav"), this.user = "", this.id = "", this.displayname = "", this.description = "", this.color = "", this.subscriptionUrl = "", this.components = /* @__PURE__ */ new Set(), this.dialog = d(), this.form = d();
+    super(), this.client = b("/caldav"), this.user = "", this.id = "", this.displayname = "", this.description = "", this.color = "", this.subscriptionUrl = "", this.components = /* @__PURE__ */ new Set(), this.dialog = m(), this.form = m();
   }
   createRenderRoot() {
     return this;
@@ -16,9 +17,9 @@ let r = class extends u {
   render() {
     return c`
       <button @click=${() => this.dialog.value.showModal()}>Create calendar</button>
-      <dialog ${m(this.dialog)}>
+      <dialog ${d(this.dialog)}>
         <h3>Create calendar</h3>
-        <form @submit=${this.submit} ${m(this.form)}>
+        <form @submit=${this.submit} ${d(this.form)}>
           <label>
             id
             <input type="text" name="id" @change=${(t) => this.id = t.target.value} />
diff --git a/crates/frontend/public/assets/js/delete-button.mjs b/crates/frontend/public/assets/js/delete-button.mjs
new file mode 100644
index 0000000..a041cd4
--- /dev/null
+++ b/crates/frontend/public/assets/js/delete-button.mjs
@@ -0,0 +1,46 @@
+import { i as c, x as p } from "./lit-CWlWuEHk.mjs";
+import { n as h, t as u } from "./property-DYFkTqgI.mjs";
+var f = Object.defineProperty, d = Object.getOwnPropertyDescriptor, i = (r, t, n, o) => {
+  for (var e = o > 1 ? void 0 : o ? d(t, n) : t, l = r.length - 1, a; l >= 0; l--)
+    (a = r[l]) && (e = (o ? a(t, n, e) : a(e)) || e);
+  return o && e && f(t, n, e), e;
+};
+let s = class extends c {
+  constructor() {
+    super(), this.trash = !1;
+  }
+  createRenderRoot() {
+    return this;
+  }
+  render() {
+    let r = this.trash ? "Move to trash" : "Delete";
+    return p`<button class="delete" @click=${(t) => this._onClick(t)}>${r}</button>`;
+  }
+  async _onClick(r) {
+    if (r.preventDefault(), !this.trash && !confirm("Do you want to delete this collection permanently?"))
+      return;
+    let t = await fetch(this.href, {
+      method: "DELETE",
+      headers: {
+        "X-No-Trashbin": this.trash ? "0" : "1"
+      }
+    });
+    if (t.status < 200 || t.status >= 300) {
+      alert("An error occured, look into the console"), console.error(t);
+      return;
+    }
+    window.location.reload();
+  }
+};
+i([
+  h({ type: Boolean })
+], s.prototype, "trash", 2);
+i([
+  h()
+], s.prototype, "href", 2);
+s = i([
+  u("delete-button")
+], s);
+export {
+  s as DeleteButton
+};
diff --git a/crates/frontend/public/assets/js/property-DYFkTqgI.mjs b/crates/frontend/public/assets/js/property-DYFkTqgI.mjs
new file mode 100644
index 0000000..cfd4965
--- /dev/null
+++ b/crates/frontend/public/assets/js/property-DYFkTqgI.mjs
@@ -0,0 +1,47 @@
+import { f as d, u as l } from "./lit-CWlWuEHk.mjs";
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const f = (t) => (r, e) => {
+  e !== void 0 ? e.addInitializer(() => {
+    customElements.define(t, r);
+  }) : customElements.define(t, r);
+};
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const p = { attribute: !0, type: String, converter: l, reflect: !1, hasChanged: d }, u = (t = p, r, e) => {
+  const { kind: i, metadata: a } = e;
+  let n = globalThis.litPropertyMetadata.get(a);
+  if (n === void 0 && globalThis.litPropertyMetadata.set(a, n = /* @__PURE__ */ new Map()), i === "setter" && ((t = Object.create(t)).wrapped = !0), n.set(e.name, t), i === "accessor") {
+    const { name: o } = e;
+    return { set(s) {
+      const c = r.get.call(this);
+      r.set.call(this, s), this.requestUpdate(o, c, t);
+    }, init(s) {
+      return s !== void 0 && this.C(o, void 0, t, s), s;
+    } };
+  }
+  if (i === "setter") {
+    const { name: o } = e;
+    return function(s) {
+      const c = this[o];
+      r.call(this, s), this.requestUpdate(o, c, t);
+    };
+  }
+  throw Error("Unsupported decorator location: " + i);
+};
+function m(t) {
+  return (r, e) => typeof e == "object" ? u(t, r, e) : ((i, a, n) => {
+    const o = a.hasOwnProperty(n);
+    return a.constructor.createProperty(n, i), o ? Object.getOwnPropertyDescriptor(a, n) : void 0;
+  })(t, r, e);
+}
+export {
+  m as n,
+  f as t
+};
diff --git a/crates/frontend/public/assets/js/ref-DuYNkSJ_.mjs b/crates/frontend/public/assets/js/ref-DuYNkSJ_.mjs
deleted file mode 100644
index 19d3e1f..0000000
--- a/crates/frontend/public/assets/js/ref-DuYNkSJ_.mjs
+++ /dev/null
@@ -1,172 +0,0 @@
-import { f, u as _, E as $ } from "./lit-CWlWuEHk.mjs";
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const T = (t) => (e, s) => {
-  s !== void 0 ? s.addInitializer(() => {
-    customElements.define(t, e);
-  }) : customElements.define(t, e);
-};
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const A = { attribute: !0, type: String, converter: _, reflect: !1, hasChanged: f }, p = (t = A, e, s) => {
-  const { kind: i, metadata: n } = s;
-  let r = globalThis.litPropertyMetadata.get(n);
-  if (r === void 0 && globalThis.litPropertyMetadata.set(n, r = /* @__PURE__ */ new Map()), i === "setter" && ((t = Object.create(t)).wrapped = !0), r.set(s.name, t), i === "accessor") {
-    const { name: o } = s;
-    return { set(h) {
-      const l = e.get.call(this);
-      e.set.call(this, h), this.requestUpdate(o, l, t);
-    }, init(h) {
-      return h !== void 0 && this.C(o, void 0, t, h), h;
-    } };
-  }
-  if (i === "setter") {
-    const { name: o } = s;
-    return function(h) {
-      const l = this[o];
-      e.call(this, h), this.requestUpdate(o, l, t);
-    };
-  }
-  throw Error("Unsupported decorator location: " + i);
-};
-function O(t) {
-  return (e, s) => typeof s == "object" ? p(t, e, s) : ((i, n, r) => {
-    const o = n.hasOwnProperty(r);
-    return n.constructor.createProperty(r, i), o ? Object.getOwnPropertyDescriptor(n, r) : void 0;
-  })(t, e, s);
-}
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const v = (t) => t.strings === void 0;
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const g = { CHILD: 2 }, C = (t) => (...e) => ({ _$litDirective$: t, values: e });
-class m {
-  constructor(e) {
-  }
-  get _$AU() {
-    return this._$AM._$AU;
-  }
-  _$AT(e, s, i) {
-    this._$Ct = e, this._$AM = s, this._$Ci = i;
-  }
-  _$AS(e, s) {
-    return this.update(e, s);
-  }
-  update(e, s) {
-    return this.render(...s);
-  }
-}
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const c = (t, e) => {
-  var i;
-  const s = t._$AN;
-  if (s === void 0) return !1;
-  for (const n of s) (i = n._$AO) == null || i.call(n, e, !1), c(n, e);
-  return !0;
-}, a = (t) => {
-  let e, s;
-  do {
-    if ((e = t._$AM) === void 0) break;
-    s = e._$AN, s.delete(t), t = e;
-  } while ((s == null ? void 0 : s.size) === 0);
-}, u = (t) => {
-  for (let e; e = t._$AM; t = e) {
-    let s = e._$AN;
-    if (s === void 0) e._$AN = s = /* @__PURE__ */ new Set();
-    else if (s.has(t)) break;
-    s.add(t), M(e);
-  }
-};
-function y(t) {
-  this._$AN !== void 0 ? (a(this), this._$AM = t, u(this)) : this._$AM = t;
-}
-function G(t, e = !1, s = 0) {
-  const i = this._$AH, n = this._$AN;
-  if (n !== void 0 && n.size !== 0) if (e) if (Array.isArray(i)) for (let r = s; r < i.length; r++) c(i[r], !1), a(i[r]);
-  else i != null && (c(i, !1), a(i));
-  else c(this, t);
-}
-const M = (t) => {
-  t.type == g.CHILD && (t._$AP ?? (t._$AP = G), t._$AQ ?? (t._$AQ = y));
-};
-class b extends m {
-  constructor() {
-    super(...arguments), this._$AN = void 0;
-  }
-  _$AT(e, s, i) {
-    super._$AT(e, s, i), u(this), this.isConnected = e._$AU;
-  }
-  _$AO(e, s = !0) {
-    var i, n;
-    e !== this.isConnected && (this.isConnected = e, e ? (i = this.reconnected) == null || i.call(this) : (n = this.disconnected) == null || n.call(this)), s && (c(this, e), a(this));
-  }
-  setValue(e) {
-    if (v(this._$Ct)) this._$Ct._$AI(e, this);
-    else {
-      const s = [...this._$Ct._$AH];
-      s[this._$Ci] = e, this._$Ct._$AI(s, this, 0);
-    }
-  }
-  disconnected() {
-  }
-  reconnected() {
-  }
-}
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const P = () => new w();
-class w {
-}
-const d = /* @__PURE__ */ new WeakMap(), U = C(class extends b {
-  render(t) {
-    return $;
-  }
-  update(t, [e]) {
-    var i;
-    const s = e !== this.G;
-    return s && this.G !== void 0 && this.rt(void 0), (s || this.lt !== this.ct) && (this.G = e, this.ht = (i = t.options) == null ? void 0 : i.host, this.rt(this.ct = t.element)), $;
-  }
-  rt(t) {
-    if (this.isConnected || (t = void 0), typeof this.G == "function") {
-      const e = this.ht ?? globalThis;
-      let s = d.get(e);
-      s === void 0 && (s = /* @__PURE__ */ new WeakMap(), d.set(e, s)), s.get(this.G) !== void 0 && this.G.call(this.ht, void 0), s.set(this.G, t), t !== void 0 && this.G.call(this.ht, t);
-    } else this.G.value = t;
-  }
-  get lt() {
-    var t, e;
-    return typeof this.G == "function" ? (t = d.get(this.ht ?? globalThis)) == null ? void 0 : t.get(this.G) : (e = this.G) == null ? void 0 : e.value;
-  }
-  disconnected() {
-    this.lt === this.ct && this.rt(void 0);
-  }
-  reconnected() {
-    this.rt(this.ct);
-  }
-});
-export {
-  O as a,
-  P as e,
-  U as n,
-  T as t
-};
diff --git a/crates/frontend/public/assets/js/ref-nf9JiOyl.mjs b/crates/frontend/public/assets/js/ref-nf9JiOyl.mjs
new file mode 100644
index 0000000..4d1a74c
--- /dev/null
+++ b/crates/frontend/public/assets/js/ref-nf9JiOyl.mjs
@@ -0,0 +1,128 @@
+import { E as $ } from "./lit-CWlWuEHk.mjs";
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const d = (t) => t.strings === void 0;
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const _ = { CHILD: 2 }, a = (t) => (...s) => ({ _$litDirective$: t, values: s });
+class A {
+  constructor(s) {
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AT(s, e, i) {
+    this._$Ct = s, this._$AM = e, this._$Ci = i;
+  }
+  _$AS(s, e) {
+    return this.update(s, e);
+  }
+  update(s, e) {
+    return this.render(...e);
+  }
+}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const n = (t, s) => {
+  var i;
+  const e = t._$AN;
+  if (e === void 0) return !1;
+  for (const h of e) (i = h._$AO) == null || i.call(h, s, !1), n(h, s);
+  return !0;
+}, r = (t) => {
+  let s, e;
+  do {
+    if ((s = t._$AM) === void 0) break;
+    e = s._$AN, e.delete(t), t = s;
+  } while ((e == null ? void 0 : e.size) === 0);
+}, l = (t) => {
+  for (let s; s = t._$AM; t = s) {
+    let e = s._$AN;
+    if (e === void 0) s._$AN = e = /* @__PURE__ */ new Set();
+    else if (e.has(t)) break;
+    e.add(t), v(s);
+  }
+};
+function f(t) {
+  this._$AN !== void 0 ? (r(this), this._$AM = t, l(this)) : this._$AM = t;
+}
+function u(t, s = !1, e = 0) {
+  const i = this._$AH, h = this._$AN;
+  if (h !== void 0 && h.size !== 0) if (s) if (Array.isArray(i)) for (let o = e; o < i.length; o++) n(i[o], !1), r(i[o]);
+  else i != null && (n(i, !1), r(i));
+  else n(this, t);
+}
+const v = (t) => {
+  t.type == _.CHILD && (t._$AP ?? (t._$AP = u), t._$AQ ?? (t._$AQ = f));
+};
+class p extends A {
+  constructor() {
+    super(...arguments), this._$AN = void 0;
+  }
+  _$AT(s, e, i) {
+    super._$AT(s, e, i), l(this), this.isConnected = s._$AU;
+  }
+  _$AO(s, e = !0) {
+    var i, h;
+    s !== this.isConnected && (this.isConnected = s, s ? (i = this.reconnected) == null || i.call(this) : (h = this.disconnected) == null || h.call(this)), e && (n(this, s), r(this));
+  }
+  setValue(s) {
+    if (d(this._$Ct)) this._$Ct._$AI(s, this);
+    else {
+      const e = [...this._$Ct._$AH];
+      e[this._$Ci] = s, this._$Ct._$AI(e, this, 0);
+    }
+  }
+  disconnected() {
+  }
+  reconnected() {
+  }
+}
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const g = () => new C();
+class C {
+}
+const c = /* @__PURE__ */ new WeakMap(), M = a(class extends p {
+  render(t) {
+    return $;
+  }
+  update(t, [s]) {
+    var i;
+    const e = s !== this.G;
+    return e && this.G !== void 0 && this.rt(void 0), (e || this.lt !== this.ct) && (this.G = s, this.ht = (i = t.options) == null ? void 0 : i.host, this.rt(this.ct = t.element)), $;
+  }
+  rt(t) {
+    if (this.isConnected || (t = void 0), typeof this.G == "function") {
+      const s = this.ht ?? globalThis;
+      let e = c.get(s);
+      e === void 0 && (e = /* @__PURE__ */ new WeakMap(), c.set(s, e)), e.get(this.G) !== void 0 && this.G.call(this.ht, void 0), e.set(this.G, t), t !== void 0 && this.G.call(this.ht, t);
+    } else this.G.value = t;
+  }
+  get lt() {
+    var t, s;
+    return typeof this.G == "function" ? (t = c.get(this.ht ?? globalThis)) == null ? void 0 : t.get(this.G) : (s = this.G) == null ? void 0 : s.value;
+  }
+  disconnected() {
+    this.lt === this.ct && this.rt(void 0);
+  }
+  reconnected() {
+    this.rt(this.ct);
+  }
+});
+export {
+  g as e,
+  M as n
+};
diff --git a/crates/frontend/public/assets/style.css b/crates/frontend/public/assets/style.css
index 4d7a918..3d65158 100644
--- a/crates/frontend/public/assets/style.css
+++ b/crates/frontend/public/assets/style.css
@@ -160,12 +160,12 @@ table {
         display: grid;
         min-height: 80px;
         grid-template-areas:
-          ".                .     color-chip"
-          "title            comps color-chip"
-          "description      .     color-chip"
-          "subscription-url .     color-chip"
-          "actions          .     color-chip"
-          ".                .     color-chip";
+          ".                .                 color-chip"
+          "title            comps             color-chip"
+          "description      description       color-chip"
+          "subscription-url subscription-url  color-chip"
+          "actions          actions           color-chip"
+          ".                .                 color-chip";
         grid-template-rows: 12px auto auto auto auto 12px;
         grid-template-columns: min-content auto 80px;
         color: inherit;
@@ -220,6 +220,8 @@ table {
         .actions {
           grid-area: actions;
           width: fit-content;
+          display: flex;
+          gap: 12px;
         }
 
         &:hover {
diff --git a/crates/frontend/public/templates/pages/addressbook.html b/crates/frontend/public/templates/pages/addressbook.html
index 3b0d2a2..95f3ee3 100644
--- a/crates/frontend/public/templates/pages/addressbook.html
+++ b/crates/frontend/public/templates/pages/addressbook.html
@@ -10,12 +10,4 @@
 
 <pre>{{ addressbook|json }}</pre>
 
-<h2>Delete</h2>
-
-<section>
-  <form method="POST" action="/frontend/user/{{addressbook.principal}}/addressbook/{{addressbook.id}}/delete">
-    <button type="submit">Move to trash</button>
-  </form>
-</section>
-
 {% endblock %}
diff --git a/crates/frontend/public/templates/pages/calendar.html b/crates/frontend/public/templates/pages/calendar.html
index 09b287f..80fc9ae 100644
--- a/crates/frontend/public/templates/pages/calendar.html
+++ b/crates/frontend/public/templates/pages/calendar.html
@@ -31,12 +31,4 @@
 
 <pre>{{ calendar|json }}</pre>
 
-<h2>Delete</h2>
-
-<section>
-  <form method="POST" action="/frontend/user/{{calendar.principal}}/calendar/{{calendar.id}}/delete">
-    <button type="submit">Move to trash</button>
-  </form>
-</section>
-
 {%endblock %}
diff --git a/crates/frontend/public/templates/pages/user.html b/crates/frontend/public/templates/pages/user.html
index eca05bf..f357ba7 100644
--- a/crates/frontend/public/templates/pages/user.html
+++ b/crates/frontend/public/templates/pages/user.html
@@ -3,6 +3,7 @@
 {% block imports %}
 <script type="module" src="/frontend/assets/js/create-calendar-form.mjs" async></script>
 <script type="module" src="/frontend/assets/js/create-addressbook-form.mjs" async></script>
+<script type="module" src="/frontend/assets/js/delete-button.mjs" async></script>
 {% endblock %}
 
 {% block content %}
@@ -86,6 +87,7 @@
         <form action="/caldav/principal/{{ calendar.principal }}/{{ calendar.id }}" target="_blank" method="GET">
           <button type="submit">Download</button>
         </form>
+        <delete-button trash href="/caldav/principal/{{ calendar.principal }}/{{ calendar.id }}"></delete-button>
       </div>
       <div class="color-chip"></div>
     </a>
@@ -114,6 +116,7 @@
         <form action="/frontend/user/{{ calendar.principal }}/calendar/{{ calendar.id}}/restore" method="POST" class="restore-form">
           <button type="submit">Restore</button>
         </form>
+        <delete-button href="/caldav/principal/{{ calendar.principal }}/{{ calendar.id }}"></delete-button>
       </div>
       <div class="color-chip"></div>
     </a>
@@ -139,6 +142,7 @@
         <form action="/carddav/principal/{{ addressbook.principal }}/{{ addressbook.id }}" target="_blank" method="GET">
           <button type="submit">Download</button>
         </form>
+        <delete-button trash href="/carddav/principal/{{ addressbook.principal }}/{{ addressbook.id }}"></delete-button>
       </div>
     </a>
   </li>
@@ -160,6 +164,7 @@
         <form action="/frontend/user/{{ addressbook.principal }}/addressbook/{{ addressbook.id}}/restore" method="POST" class="restore-form">
           <button type="submit">Restore</button>
         </form>
+        <delete-button href="/carddav/principal/{{ addressbook.principal }}/{{ addressbook.id }}"></delete-button>
       </div>
     </a>
   </li>
diff --git a/crates/frontend/src/lib.rs b/crates/frontend/src/lib.rs
index 7f5ed30..8929bb4 100644
--- a/crates/frontend/src/lib.rs
+++ b/crates/frontend/src/lib.rs
@@ -26,9 +26,9 @@ pub use config::FrontendConfig;
 use oidc_user_store::OidcUserStore;
 
 use crate::routes::{
-    addressbook::{route_addressbook, route_addressbook_restore, route_delete_addressbook},
+    addressbook::{route_addressbook, route_addressbook_restore},
     app_token::{route_delete_app_token, route_post_app_token},
-    calendar::{route_calendar, route_calendar_restore, route_delete_calendar},
+    calendar::{route_calendar, route_calendar_restore},
     login::{route_get_login, route_post_login, route_post_logout},
     user::{route_get_home, route_root, route_user_named},
 };
@@ -60,10 +60,6 @@ pub fn frontend_router<AP: AuthenticationProvider, CS: CalendarStore, AS: Addres
             "/user/{user}/calendar/{calendar}",
             get(route_calendar::<CS>),
         )
-        .route(
-            "/user/{user}/calendar/{calendar}/delete",
-            post(route_delete_calendar::<CS>),
-        )
         .route(
             "/user/{user}/calendar/{calendar}/restore",
             post(route_calendar_restore::<CS>),
@@ -73,10 +69,6 @@ pub fn frontend_router<AP: AuthenticationProvider, CS: CalendarStore, AS: Addres
             "/user/{user}/addressbook/{addressbook}",
             get(route_addressbook::<AS>),
         )
-        .route(
-            "/user/{user}/addressbook/{addressbook}/delete",
-            post(route_delete_addressbook::<AS>),
-        )
         .route(
             "/user/{user}/addressbook/{addressbook}/restore",
             post(route_addressbook_restore::<AS>),
diff --git a/crates/frontend/src/routes/addressbook.rs b/crates/frontend/src/routes/addressbook.rs
index cf01891..4652896 100644
--- a/crates/frontend/src/routes/addressbook.rs
+++ b/crates/frontend/src/routes/addressbook.rs
@@ -47,19 +47,3 @@ pub async fn route_addressbook_restore<AS: AddressbookStore>(
         None => (StatusCode::CREATED, "Restored").into_response(),
     })
 }
-
-pub async fn route_delete_addressbook<AS: AddressbookStore>(
-    Path((owner, addressbook_id)): Path<(String, String)>,
-    Extension(store): Extension<Arc<AS>>,
-    user: Principal,
-) -> Result<Response, rustical_store::Error> {
-    if !user.is_principal(&owner) {
-        return Ok(StatusCode::UNAUTHORIZED.into_response());
-    }
-
-    store
-        .delete_addressbook(&owner, &addressbook_id, true)
-        .await?;
-
-    Ok(Redirect::to(&format!("/frontend/user/{}", user.id)).into_response())
-}
diff --git a/crates/frontend/src/routes/calendar.rs b/crates/frontend/src/routes/calendar.rs
index bb5f899..505c107 100644
--- a/crates/frontend/src/routes/calendar.rs
+++ b/crates/frontend/src/routes/calendar.rs
@@ -47,17 +47,3 @@ pub async fn route_calendar_restore<CS: CalendarStore>(
         None => (StatusCode::CREATED, "Restored").into_response(),
     })
 }
-
-pub async fn route_delete_calendar<C: CalendarStore>(
-    Path((owner, cal_id)): Path<(String, String)>,
-    Extension(store): Extension<Arc<C>>,
-    user: Principal,
-) -> Result<Response, rustical_store::Error> {
-    if !user.is_principal(&owner) {
-        return Ok(StatusCode::UNAUTHORIZED.into_response());
-    }
-
-    store.delete_calendar(&owner, &cal_id, true).await?;
-
-    Ok(Redirect::to(&format!("/frontend/user/{}", user.id)).into_response())
-}