diff --git a/crates/frontend/js-components/lib/create-addressbook-form.ts b/crates/frontend/js-components/lib/create-addressbook-form.ts
index 3396320..158898a 100644
--- a/crates/frontend/js-components/lib/create-addressbook-form.ts
+++ b/crates/frontend/js-components/lib/create-addressbook-form.ts
@@ -19,7 +19,7 @@ export class CreateAddressbookForm extends LitElement {
   @property()
   principal: string = ''
   @property()
-  addr_id: string = ''
+  addr_id: string = self.crypto.randomUUID()
   @property()
   displayname: string = ''
   @property()
@@ -46,7 +46,7 @@ export class CreateAddressbookForm extends LitElement {
           <br>
           <label>
             id
-            <input type="text" name="id" @change=${e => this.addr_id = e.target.value} />
+            <input type="text" name="id" value=${this.addr_id} @change=${e => this.addr_id = e.target.value} />
           </label>
           <br>
           <label>
diff --git a/crates/frontend/js-components/lib/create-calendar-form.ts b/crates/frontend/js-components/lib/create-calendar-form.ts
index bd3852f..516987e 100644
--- a/crates/frontend/js-components/lib/create-calendar-form.ts
+++ b/crates/frontend/js-components/lib/create-calendar-form.ts
@@ -18,7 +18,7 @@ export class CreateCalendarForm extends LitElement {
   @property()
   principal: string = ''
   @property()
-  cal_id: string = ''
+  cal_id: string = self.crypto.randomUUID()
   @property()
   displayname: string = ''
   @property()
@@ -37,7 +37,6 @@ export class CreateCalendarForm extends LitElement {
   dialog: Ref<HTMLDialogElement> = createRef()
   form: Ref<HTMLFormElement> = createRef()
 
-
   override render() {
     return html`
       <button @click=${() => this.dialog.value.showModal()}>Create calendar</button>
@@ -56,7 +55,7 @@ export class CreateCalendarForm extends LitElement {
           <br>
           <label>
             id
-            <input type="text" name="id" @change=${e => this.cal_id = e.target.value} />
+            <input type="text" name="id" value=${this.cal_id} @change=${e => this.cal_id = e.target.value} />
           </label>
           <br>
           <label>
diff --git a/crates/frontend/public/assets/js/create-addressbook-form.mjs b/crates/frontend/public/assets/js/create-addressbook-form.mjs
index cfb9eb5..5a83e38 100644
--- a/crates/frontend/public/assets/js/create-addressbook-form.mjs
+++ b/crates/frontend/public/assets/js/create-addressbook-form.mjs
@@ -16,7 +16,7 @@ let CreateAddressbookForm = class extends i {
     super();
     this.user = "";
     this.principal = "";
-    this.addr_id = "";
+    this.addr_id = self.crypto.randomUUID();
     this.displayname = "";
     this.description = "";
     this.dialog = e();
@@ -43,7 +43,7 @@ let CreateAddressbookForm = class extends i {
           <br>
           <label>
             id
-            <input type="text" name="id" @change=${(e2) => this.addr_id = e2.target.value} />
+            <input type="text" name="id" value=${this.addr_id} @change=${(e2) => this.addr_id = e2.target.value} />
           </label>
           <br>
           <label>
diff --git a/crates/frontend/public/assets/js/create-calendar-form.mjs b/crates/frontend/public/assets/js/create-calendar-form.mjs
index 84885d6..38771fd 100644
--- a/crates/frontend/public/assets/js/create-calendar-form.mjs
+++ b/crates/frontend/public/assets/js/create-calendar-form.mjs
@@ -16,7 +16,7 @@ let CreateCalendarForm = class extends i {
     super();
     this.user = "";
     this.principal = "";
-    this.cal_id = "";
+    this.cal_id = self.crypto.randomUUID();
     this.displayname = "";
     this.description = "";
     this.timezone_id = "";
@@ -48,7 +48,7 @@ let CreateCalendarForm = class extends i {
           <br>
           <label>
             id
-            <input type="text" name="id" @change=${(e2) => this.cal_id = e2.target.value} />
+            <input type="text" name="id" value=${this.cal_id} @change=${(e2) => this.cal_id = e2.target.value} />
           </label>
           <br>
           <label>