diff --git a/crates/frontend/public/assets/js/bundle.mjs b/crates/frontend/public/assets/js/bundle.mjs
index e86a599f..a858faab 100644
--- a/crates/frontend/public/assets/js/bundle.mjs
+++ b/crates/frontend/public/assets/js/bundle.mjs
@@ -803,7 +803,7 @@ var CreateAddressbookForm = class CreateAddressbookForm extends i$2 {
         <h3>Create addressbook</h3>
         <form @submit=${this.submit} ${n(this.form)}>
           <label>
-            principal (for group addressbooks)
+            Principal (for group addressbooks)
             <select .value=${this.user} @change=${(e) => this.principal = e.target.value}>
               <option .value=${this.user}>${this.user}</option>
               ${window.rusticalUser.memberships.map((membership) => b`
@@ -813,12 +813,12 @@ var CreateAddressbookForm = class CreateAddressbookForm extends i$2 {
           </label>
           <br>
           <label>
-            id
+            ID
             <input type="text" .value=${this.addr_id} @change=${(e) => this.addr_id = e.target.value} />
           </label>
           <br>
           <label>
-            Displayname
+            Display name
             <input type="text" .value=${this.displayname} @change=${(e) => this.displayname = e.target.value} />
           </label>
           <br>
@@ -900,7 +900,7 @@ var CreateBirthdayCalendarForm = class CreateBirthdayCalendarForm extends i$2 {
         <h3>Create calendar</h3>
         <form @submit=${this.submit} ${n(this.form)}>
           <label>
-            Displayname
+            Display name
             <input type="text" .value=${this.displayname} required @change=${(e) => this.displayname = e.target.value} />
           </label>
           <br>
@@ -1019,7 +1019,7 @@ var CreateCalendarForm = class CreateCalendarForm extends i$2 {
         <h3>Create calendar</h3>
         <form @submit=${this.submit} ${n(this.form)}>
           <label>
-            principal (for group calendars)
+            Principal (for group calendars)
             <select required value=${this.user} @change=${(e) => this.principal = e.target.value}>
               <option value=${this.user}>${this.user}</option>
               ${window.rusticalUser.memberships.map((membership) => b`
@@ -1029,12 +1029,12 @@ var CreateCalendarForm = class CreateCalendarForm extends i$2 {
           </label>
           <br>
           <label>
-            id
+            ID
             <input type="text" required .value=${this.cal_id} @change=${(e) => this.cal_id = e.target.value} />
           </label>
           <br>
           <label>
-            Displayname
+            Display name
             <input type="text" required .value=${this.displayname} @change=${(e) => this.displayname = e.target.value} />
           </label>
           <br>
@@ -1219,7 +1219,7 @@ var EditAddressbookForm = class EditAddressbookForm extends i$2 {
         <h3>Edit addressbook</h3>
         <form @submit=${this.submit} ${n(this.form)}>
           <label>
-            Displayname
+            Display name
             <input type="text" .value=${this.displayname} @change=${(e) => this.displayname = e.target.value} />
           </label>
           <br>
@@ -1312,7 +1312,7 @@ var EditCalendarForm = class EditCalendarForm extends i$2 {
         <h3>Edit calendar</h3>
         <form @submit=${this.submit} ${n(this.form)}>
           <label>
-            Displayname
+            Display name
             <input type="text" required .value=${this.displayname} @change=${(e) => this.displayname = e.target.value} />
           </label>
           <br>
@@ -1442,7 +1442,7 @@ var ImportAddressbookForm = class ImportAddressbookForm extends i$2 {
         <h3>Import addressbook</h3>
         <form @submit=${this.submit} ${n(this.form)}>
           <label>
-            principal (for group addressbook)
+            Principal (for group addressbook)
             <select name="principal" required .value=${this.user} @change=${(e) => this.principal = e.target.value}>
               <option .value=${this.user}>${this.user}</option>
               ${window.rusticalUser.memberships.map((membership) => b`
@@ -1452,12 +1452,12 @@ var ImportAddressbookForm = class ImportAddressbookForm extends i$2 {
           </label>
           <br>
           <label>
-            id
+            ID
             <input type="text" required .value=${this.addressbook_id} @change=${(e) => this.addressbook_id = e.target.value} />
           </label>
           <br>
           <label>
-            file
+            File
             <input type="file" accept="text/vcard" required @change=${(e) => this.file = e.target.files[0]} />
           </label>
           <br>
@@ -1520,7 +1520,7 @@ var ImportCalendarForm = class ImportCalendarForm extends i$2 {
         <h3>Import calendar</h3>
         <form @submit=${this.submit} ${n(this.form)}>
           <label>
-            principal (for group calendars)
+            Principal (for group calendars)
             <select name="principal" required .value=${this.user} @change=${(e) => this.principal = e.target.value}>
               <option .value=${this.user}>${this.user}</option>
               ${window.rusticalUser.memberships.map((membership) => b`
@@ -1530,12 +1530,12 @@ var ImportCalendarForm = class ImportCalendarForm extends i$2 {
           </label>
           <br>
           <label>
-            id
+            ID
             <input type="text" required .value=${this.cal_id} @change=${(e) => this.cal_id = e.target.value} />
           </label>
           <br>
           <label>
-            file
+            File
             <input type="file" required accept="text/calendar" @change=${(e) => this.file = e.target.files[0]} />
           </label>
           <br>
diff --git a/crates/frontend/public/assets/style.css b/crates/frontend/public/assets/style.css
index 9d956c07..50774c85 100644
--- a/crates/frontend/public/assets/style.css
+++ b/crates/frontend/public/assets/style.css
@@ -1,422 +1,855 @@
 :root {
-  --background-color: #FFF;
-  --background-darker: #EEE;
-  --text-on-background-color: #111;
-  --primary-color: #2F2FE1;
-  --primary-color-dark: color-mix(in srgb, var(--primary-color), #000000 80%);
-  --text-on-primary-color: #FFF;
-  /* --color-red: #FE2060; */
-  /* --color-red: #EE1D59; */
-  --color-red: #E31B39;
-  --dilute-color: black;
-  --border-color: black;
+  --bg: #F5F7FA;
+  --bg-alt: #ECEEF2;
+  --surface: #FFFFFF;
+  --surface-alt: #F8F9FB;
+  --border: #E2E5EA;
+  --text: #111827;
+  --text-muted: #6B7280;
+  --primary: #2563EB;
+  --primary-hover: #1D4ED8;
+  --primary-text: #FFFFFF;
+  --danger: #DC2626;
+  --danger-hover: #B91C1C;
+  --shadow: rgba(0, 0, 0, 0.06);
+  --shadow-md: rgba(0, 0, 0, 0.10);
+  --radius-sm: 6px;
+  --radius: 10px;
+  --radius-lg: 14px;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background-color: #222;
-    --background-darker: #292929;
-    --text-on-background-color: #CACACA;
-    --primary-color: color-mix(in srgb, #2F2FE1, white 15%);
-    --primary-color-dark: color-mix(in srgb, var(--primary-color), #000000 80%);
-    --text-on-primary-color: #FFF;
-    /* --color-red: #FE2060; */
-    --color-red: #EE1D59;
-    --dilute-color: white;
-    --border-color: color-mix(in srgb, var(--background-color), var(--dilute-color) 15%);
+    --bg: #0F172A;
+    --bg-alt: #1E293B;
+    --surface: #1A2540;
+    --surface-alt: #1E2B47;
+    --border: #2D3A52;
+    --text: #E2E8F0;
+    --text-muted: #94A3B8;
+    --primary: #3B82F6;
+    --primary-hover: #2563EB;
+    --primary-text: #FFFFFF;
+    --danger: #EF4444;
+    --danger-hover: #DC2626;
+    --shadow: rgba(0, 0, 0, 0.25);
+    --shadow-md: rgba(0, 0, 0, 0.40);
   }
 }
 
-html,
-dialog {
-  background-color: var(--background-color);
-  color: var(--text-on-background-color);
+*, *::before, *::after {
+  box-sizing: border-box;
 }
 
-body {
-  /* position: relative; */
-  font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
-  margin: 0 auto;
-  max-width: 1200px;
-  min-height: 100%;
+html {
+  background: var(--bg);
+  color: var(--text);
 }
 
-* {
-  box-sizing: border-box;
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+  margin: 0;
+  min-height: 100vh;
+  line-height: 1.6;
+  font-size: 15px;
+  background: var(--bg);
 }
 
-#app {
-  padding: 12px;
+a {
+  color: var(--text);
+  text-decoration: none;
 }
 
-a {
-  color: var(--text-on-background-color);
+a:hover {
+  opacity: 0.8;
 }
 
-a,
-button {
+button, .button {
   cursor: pointer;
 }
 
+/* ── Header ────────────────────────────────── */
+
 header {
-  background: var(--background-darker);
-  min-height: 60px;
-  font-weight: bold;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
   display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
   align-items: center;
-  padding: 4px 12px;
-
-  border: 2px solid var(--border-color);
-  border-radius: 12px;
-  margin: 12px;
-  box-shadow: 4px 2px 12px -5px black;
-
-  display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding: 0 24px;
+  height: 58px;
+  position: sticky;
+  top: 0;
+  z-index: 100;
 
   a.logo {
-    font-size: 2em;
+    font-size: 1.25rem;
+    font-weight: 700;
+    letter-spacing: -0.03em;
+    color: var(--text);
     text-decoration: none;
+    flex-shrink: 0;
   }
 
   nav {
     display: flex;
+    align-items: center;
+    gap: 2px;
+    flex-wrap: wrap;
 
     a {
+      display: flex;
+      align-items: center;
+      gap: 6px;
       text-decoration: none;
-      margin: 4px 8px;
-      padding: 8px 12px;
-      border-radius: 12px;
-      background: color-mix(in srgb, var(--background-darker), var(--dilute-color) 2%);
+      padding: 7px 14px;
+      border-radius: var(--radius-sm);
+      font-size: 0.9rem;
+      font-weight: 500;
+      color: var(--text-muted);
+      transition: background 0.15s, color 0.15s;
 
       &:hover {
-        background: color-mix(in srgb, var(--background-darker), var(--dilute-color) 20%);
+        background: var(--bg-alt);
+        color: var(--text);
+        opacity: 1;
       }
 
       &.active {
-        background: color-mix(in srgb, var(--background-darker), var(--dilute-color) 15%);
+        background: color-mix(in srgb, var(--primary), transparent 88%);
+        color: var(--primary);
       }
 
       svg.icon {
-        width: 1.3em;
-        vertical-align: bottom;
-        margin-right: 6px;
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
       }
     }
   }
 
-
   .logout_form {
     display: contents;
   }
 }
 
-.login_window {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+/* ── Layout ────────────────────────────────── */
+
+#app {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 28px 20px 40px;
 }
 
-button,
-.button {
-  border: none;
-  background: var(--primary-color);
+/* ── Buttons ───────────────────────────────── */
+
+button, .button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid var(--border);
+  background: var(--surface);
   padding: 8px 16px;
-  border-radius: 8px;
-  color: var(--text-on-primary-color);
-  font-size: 0.9em;
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25;
+  transition: background 0.15s, border-color 0.15s, transform 0.1s;
+  white-space: nowrap;
 
   &:hover {
-    filter: brightness(90%);
+    background: var(--bg-alt);
+    border-color: color-mix(in srgb, var(--border), var(--text) 15%);
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
   }
 
-  &.delete,
-  &.cancel {
-    background: var(--color-red);
+  &.delete, &.cancel {
+    background: color-mix(in srgb, var(--danger), transparent 90%);
+    border-color: color-mix(in srgb, var(--danger), transparent 60%);
+    color: var(--danger);
+
+    &:hover {
+      background: var(--danger);
+      border-color: var(--danger);
+      color: #fff;
+    }
   }
 }
 
+/* ── Inputs ────────────────────────────────── */
+
 input[type="text"],
-input[type="password"] {
-  border: 1px solid black;
-  border-radius: 8px;
-  padding: 4px 8px;
+input[type="url"],
+input[type="password"],
+input[type="file"],
+select,
+textarea {
+  background: var(--surface-alt);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 8px 12px;
+  height: 38px;
+  color: var(--text);
+  font-family: inherit;
+  font-size: 0.9rem;
+  line-height: 1.4;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  outline: none;
+
+  &:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary), transparent 80%);
+  }
+}
+
+input[type="color"] {
+  appearance: none;
+  -webkit-appearance: none;
+  background: var(--surface-alt);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 3px;
+  width: 44px;
+  height: 38px;
+  cursor: pointer;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+
+  &::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+  &::-webkit-color-swatch {
+    border: none;
+    border-radius: 4px;
+  }
+
+  &::-moz-color-swatch {
+    border: none;
+    border-radius: 4px;
+  }
+
+  &:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary), transparent 80%);
+  }
+}
+
+textarea {
+  width: 100%;
+  height: auto;
+  min-height: 100px;
+  resize: vertical;
 }
 
+form input[type="text"],
+form input[type="url"],
+form input[type="password"],
+form input[type="file"],
+form select,
+form textarea {
+  width: 100%;
+}
 
-.font_bold {
-  font-weight: bold;
+/* ── Typography ────────────────────────────── */
+
+h1, h2, h3 {
+  letter-spacing: -0.025em;
+  font-weight: 700;
+  line-height: 1.25;
+  margin: 0 0 16px;
+  color: var(--text);
 }
 
+h1 { font-size: 1.6rem; }
+h2 { font-size: 1.2rem; }
+h3 { font-size: 1rem; }
+
+.font_bold { font-weight: 600; }
+
+/* ── Cards / Sections ──────────────────────── */
+
 section {
-  border: 1px solid var(--border-color);
-  border-radius: 12px;
-  box-shadow: 4px 2px 12px -8px black;
-  border-collapse: collapse;
-  padding: 8px 12px 12px;
-  margin: 18px 8px;
-  overflow: hidden;
-  max-width: 100%;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 20px 24px;
+  margin: 20px 0;
+  box-shadow: 0 1px 3px var(--shadow);
 }
 
+/* ── Tables ────────────────────────────────── */
+
 table {
-  border: 1px solid var(--border-color);
-  border-radius: 12px;
-  box-shadow: 4px 2px 12px -6px black;
-  border-collapse: collapse;
-  overflow-x: scroll;
   width: 100%;
+  border-collapse: collapse;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow: 0 1px 3px var(--shadow);
+  font-size: 0.9rem;
 
-  td,
-  th {
-    padding: 8px;
-    border: 1px solid var(--border-color);
-    width: max-content;
+  th, td {
+    padding: 11px 16px;
+    text-align: left;
+    border-bottom: 1px solid var(--border);
   }
 
   th {
-    height: 40px;
-  }
-
-  tr:hover {
-    background: color-mix(in srgb, var(--background-color), var(--dilute-color) 10%);
-  }
-
-  tr:first-child th {
-    border-top: 0;
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    background: var(--surface-alt);
   }
 
   tr:last-child td {
-    border-bottom: 0;
-  }
-
-  tr :first-child {
-    border-left: 0;
+    border-bottom: none;
   }
 
-  tr :last-child {
-    border-right: 0;
+  tr:hover td {
+    background: var(--bg-alt);
   }
 }
 
+/* ── Collection List ───────────────────────── */
+
 ul.collection-list {
-  padding-left: 0;
+  list-style: none;
+  padding: 0;
+  margin: 0 0 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 
   li.collection-list-item {
-    list-style: none;
-    display: block;
     position: relative;
-    background: color-mix(in srgb, var(--background-color), var(--dilute-color) 5%);
-    border: 2px solid var(--border-color);
-    border-radius: 12px;
-    margin: 12px 0;
-    box-shadow: 4px 2px 12px -6px black;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    box-shadow: 0 1px 3px var(--shadow);
     overflow: hidden;
+    transition: box-shadow 0.15s, border-color 0.15s;
 
-    a {
+    &:hover {
+      box-shadow: 0 4px 12px var(--shadow-md);
+      border-color: color-mix(in srgb, var(--border), var(--primary) 30%);
+    }
+
+    > a {
       position: absolute;
-      inset: 2px;
+      inset: 0;
+      z-index: 0;
     }
 
     .inner {
-      display: grid;
-      min-height: 80px;
-      height: fit-content;
-      grid-template-areas:
-        ".                color-chip"
-        "title            color-chip"
-        "description      color-chip"
-        "subscription-url color-chip"
-        "metadata         color-chip"
-        "actions          color-chip"
-        ".                color-chip";
-      grid-template-rows: 12px auto auto auto auto auto 12px;
-      grid-template-columns: auto 80px;
-      row-gap: 4px;
-      color: inherit;
-      text-decoration: none;
-      padding-left: 12px;
-
       position: relative;
       z-index: 1;
       pointer-events: none;
-
-      button {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-areas:
+        "title"
+        "description"
+        "sub-url"
+        "metadata"
+        "actions";
+      row-gap: 3px;
+      padding: 14px 52px 14px 16px;
+
+      button, a {
         pointer-events: all;
+        position: relative;
       }
 
       .title {
-        font-weight: bold;
         grid-area: title;
+        font-weight: 600;
+        font-size: 0.975rem;
         margin-right: 12px;
-        white-space: nowrap;
-      }
-
-      span {
-        margin: 8px initial;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 6px;
       }
 
       .description {
         grid-area: description;
-        white-space: nowrap;
-      }
-
-      .metadata {
-        grid-area: metadata;
-        white-space: nowrap;
+        color: var(--text-muted);
+        font-size: 0.875rem;
+        margin-right: 12px;
       }
 
       .subscription-url {
-        grid-area: subscription-url;
-        white-space: nowrap;
+        grid-area: sub-url;
+        font-size: 0.8rem;
+        color: var(--text-muted);
+        word-break: break-all;
+        margin-right: 12px;
       }
 
-      .color-chip {
-        background: var(--color);
-        grid-area: color-chip;
-        margin-left: 8px;
+      .metadata {
+        grid-area: metadata;
+        font-size: 0.8rem;
+        color: var(--text-muted);
+        margin-right: 12px;
       }
 
       .actions {
-        pointer-events: all;
         grid-area: actions;
-        width: fit-content;
+        pointer-events: all;
         display: flex;
         flex-wrap: wrap;
-        gap: 12px;
+        align-items: center;
+        gap: 6px;
+        margin-top: 10px;
+        margin-right: 12px;
       }
-    }
 
-    &:hover {
-      background: color-mix(in srgb, var(--background-color), var(--dilute-color) 10%);
+      .color-chip {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        right: 16px;
+        width: 22px;
+        height: 22px;
+        border-radius: 5px;
+        background: var(--color, transparent);
+        border: 1px solid color-mix(in srgb, var(--border), var(--color, transparent) 30%);
+      }
     }
   }
 }
 
-textarea {
-  width: 100%;
+/* ── Component Chips ───────────────────────── */
+
+.component-chips {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 4px;
+
+  span.chip {
+    background: color-mix(in srgb, var(--primary), transparent 88%);
+    color: var(--primary);
+    font-size: 0.72rem;
+    font-weight: 600;
+    padding: 2px 8px;
+    border-radius: 999px;
+    letter-spacing: 0.02em;
+  }
+}
+
+/* ── Tab Radio ─────────────────────────────── */
+
+.tab-radio {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  background: var(--bg-alt);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 3px;
+  gap: 2px;
+
+  label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 8px 12px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--text-muted);
+    position: relative;
+    transition: background 0.12s, color 0.12s;
+    margin-bottom: 0;
+
+    input {
+      appearance: none;
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+    }
+
+    svg { width: 18px; height: 18px; }
+  }
+
+  label:hover {
+    background: var(--surface);
+    color: var(--text);
+  }
+
+  label:has(input:focus-visible) {
+    outline: 2px solid var(--primary);
+    outline-offset: 1px;
+    input { outline: none; }
+  }
+
+  label:has(input:checked) {
+    background: var(--surface);
+    color: var(--text);
+    box-shadow: 0 1px 3px var(--shadow);
+  }
 }
 
+/* ── Dialog ────────────────────────────────── */
+
 dialog {
-  border: 1px solid var(--border-color);
-  border-radius: 16px;
-  padding: 32px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 28px 32px;
+  box-shadow: 0 20px 60px var(--shadow-md);
+  color: var(--text);
+  max-width: 480px;
+  width: 100%;
+  margin: auto;
+  max-height: 100dvh;
+  overflow-y: auto;
+
+  h3 {
+    margin-bottom: 20px;
+  }
 }
 
 dialog::backdrop {
-  background: color-mix(in srgb, var(--background-color), transparent 50%);
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(2px);
 }
 
-footer {
-  display: flex;
-  justify-content: center;
-  margin-top: 32px;
-  gap: 24px;
-  bottom: 20px;
+@media (max-width: 560px) {
+  dialog {
+    max-width: 100vw;
+    width: 100vw;
+    min-height: 100dvh;
+    margin: 0;
+    border-radius: 0;
+    border: none;
+    padding: 24px 20px;
+    box-shadow: none;
+  }
+
+  dialog::backdrop {
+    display: none;
+  }
 }
 
-input[type="text"],
-input[type="password"],
-input[type="color"],
-select {
-  background: color-mix(in srgb, var(--background-color), var(--dilute-color) 10%);
-  border: 2px solid var(--border-color);
-  padding: 6px 6px;
-  color: var(--text-on-background-color);
-  margin: 2px;
-  border-radius: 8px;
-
-  &:hover,
-  &:focus {
-    background: color-mix(in srgb, var(--background-color), var(--dilute-color) 20%);
+dialog form {
+  display: block;
+
+  br {
+    display: none;
+  }
+
+  label {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    margin-bottom: 14px;
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: var(--text-muted);
+
+    input[type="text"],
+    input[type="url"],
+    select,
+    textarea {
+      color: var(--text);
+      font-size: 0.9rem;
+    }
+  }
+
+  label:has(input[type="checkbox"]) {
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+    color: var(--text);
+    font-size: 0.9rem;
+    font-weight: 400;
+    cursor: pointer;
+
+    input[type="checkbox"] {
+      width: 16px;
+      height: 16px;
+      flex-shrink: 0;
+      order: -1;
+      accent-color: var(--primary);
+      cursor: pointer;
+    }
+  }
+
+  label:has(input[type="color"]) {
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+    color: var(--text);
+    font-size: 0.9rem;
+    font-weight: 400;
+  }
+
+  label:not(:has(input, select, textarea)) {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    margin-bottom: 8px;
+    margin-top: 6px;
+  }
+
+  .tab-radio,
+  > div {
+    margin-bottom: 14px;
+  }
+
+  > button {
+    margin-top: 20px;
+    margin-right: 8px;
+    margin-bottom: 0;
+  }
+
+  > button ~ button {
+    margin-top: 20px;
   }
 }
 
-form {
+/* ── Login ─────────────────────────────────── */
+
+.login_window {
+  max-width: 380px;
+  margin: 60px auto 40px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 36px 32px;
+  box-shadow: 0 4px 24px var(--shadow);
+
+  h1 {
+    margin-bottom: 20px;
+  }
 
-  input[type="text"],
-  input[type="url"],
-  input[type="password"],
-  input[type="color"],
-  input[type="file"],
-  textarea,
-  select {
+  form {
     width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin-top: 4px;
+  }
+
+  button[type="submit"] {
+    width: 100%;
+    justify-content: center;
+    margin-top: 4px;
+    padding: 10px 16px;
+    background: var(--primary);
+    border-color: var(--primary);
+    color: var(--primary-text);
+    font-weight: 600;
+
+    &:hover {
+      background: var(--primary-hover);
+      border-color: var(--primary-hover);
+    }
+  }
+
+  label {
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: var(--text-muted);
+    margin-bottom: 2px;
+    display: block;
   }
 }
 
-svg.icon {
-  stroke-width: 2px;
-  color: var(--text-on-background-color);
-  stroke: var(--text-on-background-color);
+/* ── Primary button contexts ───────────────── */
+
+dialog form button[type="submit"]:not(.cancel),
+.generate-form button[type="submit"]:first-of-type,
+create-calendar-form > button,
+create-addressbook-form > button {
+  background: var(--primary);
+  border-color: var(--primary);
+  color: var(--primary-text);
+  font-weight: 600;
+
+  &:hover {
+    background: var(--primary-hover);
+    border-color: var(--primary-hover);
+  }
 }
 
-.component-chips {
-  display: inline;
+/* ── Generate form (app tokens) ────────────── */
 
-  span.chip {
-    margin: 0 2px;
-    background: var(--primary-color);
-    color: var(--text-on-primary-color);
-    font-size: .8em;
-    padding: 3px 8px;
-    border-radius: 12px;
+.generate-form {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 14px;
+  flex-wrap: wrap;
+
+  input[type="text"] {
+    flex: 1;
+    min-width: 160px;
+  }
+
+  .generate-actions {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
   }
 }
 
-.tab-radio {
+/* ── Section action rows ────────────────────── */
+
+.section-actions {
   display: flex;
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: 1fr;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 4px;
+}
 
-  background: color-mix(in srgb, var(--background-color), var(--dilute-color) 10%);
-  border: 2px solid var(--border-color);
-  border-radius: 8px;
-  color: var(--text-on-background-color);
-  margin: 2px;
+/* ── Token result ───────────────────────────── */
 
-  label {
-    padding: 10px;
-    background: color-mix(in srgb, var(--background-color), var(--dilute-color) 10%);
-    border-radius: 12px;
-    cursor: pointer;
-    position: relative;
+.token-result {
+  margin-top: 14px;
+  padding: 16px 18px;
+  background: color-mix(in srgb, #F59E0B, transparent 88%);
+  border: 1px solid color-mix(in srgb, #F59E0B, transparent 55%);
+  border-radius: var(--radius);
+
+  .token-result-warning {
+    margin: 0 0 12px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: color-mix(in srgb, #92400E, var(--text) 30%);
+  }
+
+  .token-result-row {
     display: flex;
     align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    margin-bottom: 12px;
+  }
 
-    svg {
-      margin-right: 4px;
+  .token-value {
+    flex: 1;
+    min-width: 0;
+    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
+    font-size: 0.825rem;
+    word-break: break-all;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 9px 12px;
+    display: block;
+    line-height: 1.5;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .token-result {
+    background: color-mix(in srgb, #F59E0B, transparent 92%);
+    border-color: color-mix(in srgb, #F59E0B, transparent 65%);
+
+    .token-result-warning {
+      color: color-mix(in srgb, #FCD34D, var(--text) 20%);
     }
+  }
+}
 
-    input {
-      appearance: none;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      inset: 0;
-      pointer-events: none;
+/* ── Pre / Code ────────────────────────────── */
+
+pre {
+  background: var(--surface-alt);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: auto;
+  padding: 14px 16px;
+  font-size: 0.83rem;
+  line-height: 1.55;
+}
+
+/* ── SVG Icons ─────────────────────────────── */
+
+svg.icon {
+  stroke-width: 2px;
+  color: currentColor;
+  stroke: currentColor;
+}
+
+/* ── Footer ────────────────────────────────── */
+
+footer {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 20px;
+  padding: 0 20px 32px;
+  max-width: 1000px;
+  margin: 8px auto 0;
+  color: var(--text-muted);
+  font-size: 0.82rem;
+
+  a {
+    color: var(--text-muted);
+    &:hover { color: var(--text); opacity: 1; }
+  }
+}
+
+/* ── Responsive ────────────────────────────── */
+
+@media (max-width: 680px) {
+  header {
+    padding: 0 16px;
+    height: auto;
+    min-height: 52px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+
+    a.logo {
+      font-size: 1.1rem;
+    }
+
+    nav a {
+      padding: 6px 10px;
+      font-size: 0.82rem;
     }
   }
 
-  label:hover {
-    background: color-mix(in srgb, var(--background-color), var(--dilute-color) 15%);
+  #app {
+    padding: 20px 14px 32px;
   }
 
-  label:has(input:focus-visible) {
-    outline: medium auto currentColor;
-    outline: medium auto invert;
-    outline: 5px auto -webkit-focus-ring-color;
+  section {
+    padding: 16px;
+  }
 
-    input {
-      outline: none;
+  ul.collection-list li.collection-list-item .inner {
+    padding-right: 16px;
+
+    .color-chip {
+      display: none;
     }
   }
 
-  label:has(input:checked) {
-    background: color-mix(in srgb, var(--background-color), var(--dilute-color) 20%);
+  table {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+
+  .login_window {
+    margin: 24px 16px;
+    padding: 24px 20px;
   }
 }
diff --git a/crates/frontend/public/templates/components/sections/addressbooks_section.html b/crates/frontend/public/templates/components/sections/addressbooks_section.html
index e836abb9..5891a283 100644
--- a/crates/frontend/public/templates/components/sections/addressbooks_section.html
+++ b/crates/frontend/public/templates/components/sections/addressbooks_section.html
@@ -1,4 +1,4 @@
-<h2>{{user.id }}'s Addressbooks</h2>
+<h2>{{user.id }}'s addressbooks</h2>
 <ul class="collection-list">
   {% for (meta, birthday_cal, addressbook) in addressbooks %}
   <li class="collection-list-item">
@@ -42,7 +42,7 @@ <h2>{{user.id }}'s Addressbooks</h2>
   {% endfor %}
 </ul>
 {%if !deleted_addressbooks.is_empty() %}
-<h3>Deleted Addressbooks</h3>
+<h3>Deleted addressbooks</h3>
 <ul class="collection-list">
   {% for (meta, birthday_cal, addressbook) in deleted_addressbooks %}
   <li class="collection-list-item">
@@ -71,6 +71,8 @@ <h3>Deleted Addressbooks</h3>
 </ul>
 {% endif %}
 
-<create-addressbook-form user="{{ user.id }}"></create-addressbook-form>
-<import-addressbook-form user="{{ user.id }}"></import-addressbook-form>
+<div class="section-actions">
+  <create-addressbook-form user="{{ user.id }}"></create-addressbook-form>
+  <import-addressbook-form user="{{ user.id }}"></import-addressbook-form>
+</div>
 
diff --git a/crates/frontend/public/templates/components/sections/calendars_section.html b/crates/frontend/public/templates/components/sections/calendars_section.html
index 4adb0362..20545139 100644
--- a/crates/frontend/public/templates/components/sections/calendars_section.html
+++ b/crates/frontend/public/templates/components/sections/calendars_section.html
@@ -1,4 +1,4 @@
-<h2>{{ user.id }}'s Calendars</h2>
+<h2>{{ user.id }}'s calendars</h2>
 <ul class="collection-list">
   {% for (meta, calendar) in calendars %}
   {% let color = calendar.meta.color.to_owned().unwrap_or("transparent".to_owned()) %}
@@ -46,7 +46,7 @@ <h2>{{ user.id }}'s Calendars</h2>
   {% endfor %}
 </ul>
 {%if !deleted_calendars.is_empty() %}
-<h3>Deleted Calendars</h3>
+<h3>Deleted calendars</h3>
 <ul class="collection-list">
   {% for (meta, calendar) in deleted_calendars %}
   {% let color = calendar.meta.color.to_owned().unwrap_or("transparent".to_owned()) %}
@@ -81,5 +81,7 @@ <h3>Deleted Calendars</h3>
   {% endfor %}
 </ul>
 {% endif %}
-<create-calendar-form user="{{ user.id }}"></create-calendar-form>
-<import-calendar-form user="{{ user.id }}"></import-calendar-form>
+<div class="section-actions">
+  <create-calendar-form user="{{ user.id }}"></create-calendar-form>
+  <import-calendar-form user="{{ user.id }}"></import-calendar-form>
+</div>
diff --git a/crates/frontend/public/templates/components/sections/profile_section.html b/crates/frontend/public/templates/components/sections/profile_section.html
index b75dcf28..5f2bfad1 100644
--- a/crates/frontend/public/templates/components/sections/profile_section.html
+++ b/crates/frontend/public/templates/components/sections/profile_section.html
@@ -32,25 +32,59 @@ <h3>App tokens</h3>
     </td>
   </tr>
   {% endfor %}
-  <tr class="generate">
-    <td>
-      <form action="/frontend/user/{{ user.id }}/app_token" method="POST" id="form_generate_app_token">
-        <label class="font_bold" for="generate_app_token_name">App name</label>
-        <input type="text" name="name" id="generate_app_token_name" required />
-      </form>
-    </td>
-    <td></td>
-    <td>
-      <button type="submit" form="form_generate_app_token">Generate</button>
-      {% if is_apple %}
-      <button type="submit" form="form_generate_app_token" name="apple" value="true">Apple Configuration Profile
-        (contains token)</button>
-      {% endif %}
-    </td>
-  </tr>
 </table>
+
+<form action="/frontend/user/{{ user.id }}/app_token" method="POST" id="form_generate_app_token" class="generate-form">
+  <input type="text" name="name" id="generate_app_token_name" placeholder="App name" required />
+  <div class="generate-actions">
+    <button type="submit">Generate</button>
+    {% if is_apple %}
+    <button type="submit" name="apple" value="true">Apple Configuration Profile (contains token)</button>
+    {% endif %}
+  </div>
+</form>
+
+<div id="token-result" class="token-result" hidden>
+  <p class="token-result-warning">This token will only be shown once. Copy it now and keep it secret.</p>
+  <div class="token-result-row">
+    <code id="token-value" class="token-value"></code>
+    <button type="button" id="token-copy-btn">Copy</button>
+  </div>
+  <button type="button" id="token-done-btn">Done</button>
+</div>
+
+<script>
+  document.getElementById('form_generate_app_token').addEventListener('submit', async function(e) {
+    if (e.submitter && e.submitter.name === 'apple') return;
+    e.preventDefault();
+    const data = new URLSearchParams(new FormData(this));
+    const res = await fetch(this.action, {
+      method: 'POST',
+      body: data,
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
+    });
+    if (!res.ok) {
+      alert('Error: ' + await res.text());
+      return;
+    }
+    const token = await res.text();
+    document.getElementById('token-value').textContent = token;
+    const result = document.getElementById('token-result');
+    result.hidden = false;
+    result.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    this.reset();
+  });
+
+  document.getElementById('token-copy-btn').addEventListener('click', function() {
+    navigator.clipboard.writeText(document.getElementById('token-value').textContent).then(() => {
+      this.textContent = 'Copied!';
+      setTimeout(() => this.textContent = 'Copy', 2000);
+    });
+  });
+
+  document.getElementById('token-done-btn').addEventListener('click', () => window.location.reload());
+</script>
+
 {% if let Some(hostname) = davx5_hostname %}
-<a
-  href="intent://{{ hostname | urlencode }}#Intent;action=android.intent.action.VIEW;component=at.bitfire.davdroid.ui.setup.LoginActivity;scheme=davx5;package=at.bitfire.davdroid;S.loginFlow=1;end">Configure
-  in DAVx5</a>
+<a href="intent://{{ hostname | urlencode }}#Intent;action=android.intent.action.VIEW;component=at.bitfire.davdroid.ui.setup.LoginActivity;scheme=davx5;package=at.bitfire.davdroid;S.loginFlow=1;end">Configure in DAVx5</a>
 {% endif %}
diff --git a/crates/frontend/public/templates/layouts/default.html b/crates/frontend/public/templates/layouts/default.html
index 329b116e..48fe0fbd 100644
--- a/crates/frontend/public/templates/layouts/default.html
+++ b/crates/frontend/public/templates/layouts/default.html
@@ -4,6 +4,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="color-scheme" content="light dark">
   <title>{% block title %}RustiCal{% endblock %}</title>
   <link rel="stylesheet" href="/frontend/assets/style.css" />
   {% block imports %}{% endblock %}
@@ -28,5 +29,10 @@
       <a href="{{ env!("CARGO_PKG_REPOSITORY") }}" target="_blank">RustiCal {{ env!("CARGO_PKG_VERSION") }}</a>
       <a href="/frontend/assets/licenses.html" target="_blank">Open Source Licenses</a>
   </footer>
+  <script>
+    document.addEventListener('click', (e) => {
+      if (e.target.tagName === 'DIALOG') e.target.close();
+    });
+  </script>
 </body>
 </html>
diff --git a/crates/frontend/public/templates/pages/login.html b/crates/frontend/public/templates/pages/login.html
index 5c40e218..0743c4ba 100644
--- a/crates/frontend/public/templates/pages/login.html
+++ b/crates/frontend/public/templates/pages/login.html
@@ -10,12 +10,14 @@ <h1>Login</h1>
 
   {% if allow_password_login %}
   <form action="login" method="post" id="form_login">
-    <label for="username">Username</label>
-    <input type="text" id="username" name="username" placeholder="username">
-    <br>
-    <label for="password">Password</label>
-    <input type="password" id="password" name="password" placeholder="password">
-    <br>
+    <div>
+      <label for="username">Username</label>
+      <input type="text" id="username" name="username" placeholder="username" autocomplete="username">
+    </div>
+    <div>
+      <label for="password">Password</label>
+      <input type="password" id="password" name="password" placeholder="password" autocomplete="current-password">
+    </div>
     {% if let Some(redirect_uri) = redirect_uri %}
     <input type="hidden" name="redirect_uri" value="{{ redirect_uri }}">
     {% endif %}