diff --git a/crates/frontend/js-components/lib/create-addressbook-form.ts b/crates/frontend/js-components/lib/create-addressbook-form.ts
index 951d2fe..8c99f84 100644
--- a/crates/frontend/js-components/lib/create-addressbook-form.ts
+++ b/crates/frontend/js-components/lib/create-addressbook-form.ts
@@ -19,6 +19,8 @@ export class CreateAddressbookForm extends LitElement {
   @property()
   user: String = ''
   @property()
+  principal: String = ''
+  @property()
   addr_id: String = ''
   @property()
   displayname: String = ''
@@ -34,6 +36,11 @@ export class CreateAddressbookForm extends LitElement {
       <dialog ${ref(this.dialog)}>
         <h3>Create addressbook</h3>
         <form @submit=${this.submit} ${ref(this.form)}>
+          <label>
+            principal (for group addressbooks)
+            <input type="text" name="principal" value=${this.user} @change=${e => this.principal = e.target.value} />
+          </label>
+          <br>
           <label>
             id
             <input type="text" name="id" @change=${e => this.addr_id = e.target.value} />
@@ -68,7 +75,7 @@ export class CreateAddressbookForm extends LitElement {
       return
     }
     // TODO: Escape user input: There's not really a security risk here but would be nicer
-    await this.client.createDirectory(`/principal/${this.user}/${this.addr_id}`, {
+    await this.client.createDirectory(`/principal/${this.principal || this.user}/${this.addr_id}`, {
       data: `
       <mkcol xmlns="DAV:" xmlns:CARD="urn:ietf:params:xml:ns:carddav">
         <set>
diff --git a/crates/frontend/js-components/lib/create-calendar-form.ts b/crates/frontend/js-components/lib/create-calendar-form.ts
index 3a7556d..65edaf8 100644
--- a/crates/frontend/js-components/lib/create-calendar-form.ts
+++ b/crates/frontend/js-components/lib/create-calendar-form.ts
@@ -18,6 +18,8 @@ export class CreateCalendarForm extends LitElement {
   @property()
   user: String = ''
   @property()
+  principal: String = ''
+  @property()
   cal_id: String = ''
   @property()
   displayname: String = ''
@@ -40,6 +42,11 @@ export class CreateCalendarForm extends LitElement {
       <dialog ${ref(this.dialog)}>
         <h3>Create calendar</h3>
         <form @submit=${this.submit} ${ref(this.form)}>
+          <label>
+            principal (for group calendar)
+            <input type="text" name="principal" value=${this.user} @change=${e => this.principal = e.target.value} />
+          </label>
+          <br>
           <label>
             id
             <input type="text" name="id" @change=${e => this.cal_id = e.target.value} />
@@ -94,7 +101,7 @@ export class CreateCalendarForm extends LitElement {
       alert("No calendar components selected")
       return
     }
-    await this.client.createDirectory(`/principal/${this.user}/${this.cal_id}`, {
+    await this.client.createDirectory(`/principal/${this.principal || this.user}/${this.cal_id}`, {
       data: `
       <mkcol xmlns="DAV:" xmlns:CAL="urn:ietf:params:xml:ns:caldav" xmlns:CS="http://calendarserver.org/ns/" xmlns:ICAL="http://apple.com/ns/ical/">
         <set>
diff --git a/crates/frontend/public/assets/js/create-addressbook-form.mjs b/crates/frontend/public/assets/js/create-addressbook-form.mjs
index f95786d..5fbc49d 100644
--- a/crates/frontend/public/assets/js/create-addressbook-form.mjs
+++ b/crates/frontend/public/assets/js/create-addressbook-form.mjs
@@ -17,6 +17,7 @@ let CreateAddressbookForm = class extends i {
     super();
     this.client = an("/carddav");
     this.user = "";
+    this.principal = "";
     this.addr_id = "";
     this.displayname = "";
     this.description = "";
@@ -32,6 +33,11 @@ let CreateAddressbookForm = class extends i {
       <dialog ${n(this.dialog)}>
         <h3>Create addressbook</h3>
         <form @submit=${this.submit} ${n(this.form)}>
+          <label>
+            principal (for group addressbooks)
+            <input type="text" name="principal" value=${this.user} @change=${(e2) => this.principal = e2.target.value} />
+          </label>
+          <br>
           <label>
             id
             <input type="text" name="id" @change=${(e2) => this.addr_id = e2.target.value} />
@@ -68,7 +74,7 @@ let CreateAddressbookForm = class extends i {
       alert("Empty displayname");
       return;
     }
-    await this.client.createDirectory(`/principal/${this.user}/${this.addr_id}`, {
+    await this.client.createDirectory(`/principal/${this.principal || this.user}/${this.addr_id}`, {
       data: `
       <mkcol xmlns="DAV:" xmlns:CARD="urn:ietf:params:xml:ns:carddav">
         <set>
@@ -87,6 +93,9 @@ let CreateAddressbookForm = class extends i {
 __decorateClass([
   n$1()
 ], CreateAddressbookForm.prototype, "user", 2);
+__decorateClass([
+  n$1()
+], CreateAddressbookForm.prototype, "principal", 2);
 __decorateClass([
   n$1()
 ], CreateAddressbookForm.prototype, "addr_id", 2);
diff --git a/crates/frontend/public/assets/js/create-calendar-form.mjs b/crates/frontend/public/assets/js/create-calendar-form.mjs
index 6666289..aeab6d3 100644
--- a/crates/frontend/public/assets/js/create-calendar-form.mjs
+++ b/crates/frontend/public/assets/js/create-calendar-form.mjs
@@ -17,6 +17,7 @@ let CreateCalendarForm = class extends i {
     super();
     this.client = an("/caldav");
     this.user = "";
+    this.principal = "";
     this.cal_id = "";
     this.displayname = "";
     this.description = "";
@@ -35,6 +36,11 @@ let CreateCalendarForm = class extends i {
       <dialog ${n(this.dialog)}>
         <h3>Create calendar</h3>
         <form @submit=${this.submit} ${n(this.form)}>
+          <label>
+            principal (for group calendar)
+            <input type="text" name="principal" value=${this.user} @change=${(e2) => this.principal = e2.target.value} />
+          </label>
+          <br>
           <label>
             id
             <input type="text" name="id" @change=${(e2) => this.cal_id = e2.target.value} />
@@ -92,7 +98,7 @@ let CreateCalendarForm = class extends i {
       alert("No calendar components selected");
       return;
     }
-    await this.client.createDirectory(`/principal/${this.user}/${this.cal_id}`, {
+    await this.client.createDirectory(`/principal/${this.principal || this.user}/${this.cal_id}`, {
       data: `
       <mkcol xmlns="DAV:" xmlns:CAL="urn:ietf:params:xml:ns:caldav" xmlns:CS="http://calendarserver.org/ns/" xmlns:ICAL="http://apple.com/ns/ical/">
         <set>
@@ -116,6 +122,9 @@ let CreateCalendarForm = class extends i {
 __decorateClass([
   n$1()
 ], CreateCalendarForm.prototype, "user", 2);
+__decorateClass([
+  n$1()
+], CreateCalendarForm.prototype, "principal", 2);
 __decorateClass([
   n$1()
 ], CreateCalendarForm.prototype, "cal_id", 2);