diff --git a/dashboard/package-lock.json b/dashboard/package-lock.json
index 43fcf8859..5b5912a19 100644
--- a/dashboard/package-lock.json
+++ b/dashboard/package-lock.json
@@ -25,7 +25,7 @@
         "jquery": "^3.7.1",
         "marked": "^15.0.7",
         "moment": "^2.30.1",
-        "pankow": "^2.9.7",
+        "pankow": "^2.10.0",
         "pankow-viewers": "^1.0.11",
         "sass": "^1.85.1",
         "vite": "^6.2.2",
@@ -2339,9 +2339,9 @@
       }
     },
     "node_modules/pankow": {
-      "version": "2.9.7",
-      "resolved": "https://registry.npmjs.org/pankow/-/pankow-2.9.7.tgz",
-      "integrity": "sha512-IZ/WkZ/2Z4CVjPM7fDx+9AdjdR8rQqsBGQD9SUJg5OnqPSkznmE+J6AevqKwvgG+e4KXOyJqeIivLdapK4FU1w==",
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/pankow/-/pankow-2.10.0.tgz",
+      "integrity": "sha512-qpDVvHgpJYfYPOyPhPL317r6sgMYm+WJHUk5R9g3iy7oqFBu6d+mS3MXgzbAXuGBUAsie+ZTiyoMi2u1OgXy4Q==",
       "license": "ISC",
       "dependencies": {
         "@fontsource/inter": "^5.2.5",
@@ -4135,9 +4135,9 @@
       }
     },
     "pankow": {
-      "version": "2.9.7",
-      "resolved": "https://registry.npmjs.org/pankow/-/pankow-2.9.7.tgz",
-      "integrity": "sha512-IZ/WkZ/2Z4CVjPM7fDx+9AdjdR8rQqsBGQD9SUJg5OnqPSkznmE+J6AevqKwvgG+e4KXOyJqeIivLdapK4FU1w==",
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/pankow/-/pankow-2.10.0.tgz",
+      "integrity": "sha512-qpDVvHgpJYfYPOyPhPL317r6sgMYm+WJHUk5R9g3iy7oqFBu6d+mS3MXgzbAXuGBUAsie+ZTiyoMi2u1OgXy4Q==",
       "requires": {
         "@fontsource/inter": "^5.2.5",
         "@fortawesome/fontawesome-free": "^6.7.2",
diff --git a/dashboard/package.json b/dashboard/package.json
index d1c102682..af92c427f 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -26,7 +26,7 @@
     "jquery": "^3.7.1",
     "marked": "^15.0.7",
     "moment": "^2.30.1",
-    "pankow": "^2.9.7",
+    "pankow": "^2.10.0",
     "pankow-viewers": "^1.0.11",
     "sass": "^1.85.1",
     "vite": "^6.2.2",
diff --git a/dashboard/src/components/MailboxDialog.vue b/dashboard/src/components/MailboxDialog.vue
new file mode 100644
index 000000000..0da39bda2
--- /dev/null
+++ b/dashboard/src/components/MailboxDialog.vue
@@ -0,0 +1,172 @@
+<script setup>
+
+import { ref, useTemplateRef } from 'vue';
+import { Dialog, Button, TextInput, FormGroup, Checkbox, InputGroup, SingleSelect } from 'pankow';
+import { prettyDecimalSize } from 'pankow/utils';
+import MailboxesModel from '../models/MailboxesModel.js';
+
+const emit = defineEmits([ 'success' ]);
+const props = defineProps([ 'users', 'groups', 'domains' ]);
+
+const mailboxesModel = MailboxesModel.create();
+
+const dialog = useTemplateRef('dialog');
+const busy = ref(false);
+const formError = ref('');
+const name = ref('');
+const domain = ref('');
+const mailbox = ref(null);
+const aliases = ref([]);
+const ownerId = ref('');
+const usersAndGroups = ref([]);
+const storageQuotaEnabled = ref(false);
+const storageQuotaTicks = [ 500*1000*1000, 5*1000*1000*1000, 15*1000*1000*1000, 50*1000*1000*1000, 100*1000*1000*1000 ];
+const storageQuota = ref(0);
+const active = ref(false);
+const enablePop3 = ref(false);
+
+function onAddAlias() {
+  aliases.value.push({
+    name: '',
+    domain: props.domains[0].domain,
+  });
+}
+
+async function onRemoveAlias(index) {
+  aliases.value.splice(index, 1);
+}
+
+async function onSubmit() {
+  busy.value = true;
+  formError.value = '';
+
+  const data = {
+    ownerId: ownerId.value,
+    ownerType: ownerId.value.indexOf('gid-') === 0 ? 'group' : 'user',
+    active: active.value,
+    enablePop3: enablePop3.value,
+    storageQuota: storageQuotaEnabled.value ? parseInt(storageQuota.value) : 0,
+    messagesQuota: 0
+  };
+
+  if (mailbox.value) {
+    let [error] = await mailboxesModel.update(domain.value, name.value, data);
+    if (error) {
+      busy.value = false;
+      formError.value = error.body ? error.body.message : 'Internal error';
+      return console.error(error);
+    }
+
+    [error] = await mailboxesModel.setAliases(domain.value, name.value, aliases.value);
+    if (error) {
+      busy.value = false;
+      formError.value = error.body ? error.body.message : 'Internal error';
+      return console.error(error);
+    }
+  } else {
+    const [error] = await mailboxesModel.add(domain.value, name.value, data);
+    if (error) {
+      busy.value = false;
+      formError.value = error.body ? error.body.message : 'Internal error';
+      return console.error(error);
+    }
+  }
+
+  emit('success');
+  dialog.value.close();
+  busy.value = false;
+}
+
+defineExpose({
+  async open(m = null) {
+    busy.value = false;
+    formError.value = '';
+    mailbox.value = m;
+
+    name.value = m ? m.name : '';
+    domain.value = m ? m.domain : '';
+    ownerId.value = m ? m.ownerId : '';
+    aliases.value = m ? JSON.parse(JSON.stringify(m.aliases)) : [];
+    active.value = m ? m.active : true;
+    enablePop3.value = m ? m.enablePop3 : false;
+
+    usersAndGroups.value = props.users.concat(props.groups);
+
+    // unify on .name for multiselect
+    usersAndGroups.value.forEach(u => {
+      u.name = u.name || u.username;
+    });
+
+    dialog.value.open();
+  }
+});
+
+</script>
+
+<template>
+  <Dialog ref="dialog"
+    :title="mailbox ? $t('email.editMailboxDialog.title', { name: mailbox.name, domain: mailbox.domain }) : $t('email.addMailboxDialog.title')"
+    :confirm-label="$t(mailbox ? 'main.dialog.save' : 'email.incoming.mailboxes.addAction')"
+    :confirm-busy="busy"
+    :confirm-active="!busy && name !== '' && domain !== ''"
+     reject-style="secondary"
+    :reject-label="busy ? null : $t('main.dialog.cancel')"
+    @confirm="onSubmit()"
+  >
+    <div>
+      <div class="has-error" v-if="formError">{{ formError }}</div>
+
+      <form @submit.prevent="onSubmit()" novalidate autocomplete="off">
+         <fieldset :disabled="busy">
+          <input type="submit" style="display: none;" :disabled="!name || !domain"/>
+
+          <FormGroup v-if="!mailbox">
+            <label for="nameInput">{{ $t('email.addMailboxDialog.name') }}</label>
+            <InputGroup>
+              <TextInput id="nameInput" style="flex-grow: 1;" v-model="name"/>
+              <SingleSelect v-model="domain" :options="domains" option-key="domain" option-label="domain" />
+            </InputGroup>
+          </FormGroup>
+
+          <FormGroup>
+            <label>{{ $t('email.editMailboxDialog.owner') }}</label>
+            <SingleSelect v-model="ownerId" :options="usersAndGroups" option-key="id" option-label="name"/>
+          </FormGroup>
+
+          <Checkbox v-model="active" :label="$t('email.updateMailboxDialog.activeCheckbox')"/><br/>
+
+          <Checkbox v-model="enablePop3" :label="$t('email.updateMailboxDialog.enablePop3')"/><br/>
+
+          <FormGroup>
+            <div>
+              <Checkbox v-model="storageQuotaEnabled" :label="$t('email.editMailboxDialog.enableStorageQuota')"/>
+              <b v-if="storageQuotaEnabled">: {{ prettyDecimalSize(storageQuota) }}</b>
+            </div>
+            <input type="range" id="storageQuota" :disabled="!storageQuotaEnabled" v-model="storageQuota" step="500000000" :min="storageQuotaTicks[0]" :max="storageQuotaTicks[storageQuotaTicks.length-1]" list="storageQuotaTicks" />
+            <datalist id="storageQuotaTicks">
+              <option v-for="quota in storageQuotaTicks" :value="quota" :key="quota"></option>
+            </datalist>
+          </FormGroup>
+
+          <!-- we only show this on edit for now as it is a separate REST call which may fail after the mailbox was added -->
+          <FormGroup v-if="mailbox">
+            <label>{{ $t('email.editMailboxDialog.aliases') }}</label>
+            <div v-for="(alias, index) in aliases" :key="alias" style="margin-bottom: 10px;">
+              <InputGroup>
+                <TextInput style="flex-grow: 1;" v-model="alias.name"/>
+                <SingleSelect v-model="alias.domain" :options="domains" option-key="domain" option-label="domain" />
+                <Button tool danger icon="fa-solid fa-trash-alt" @click="onRemoveAlias(index)"/>
+              </InputGroup>
+            </div>
+            <div v-if="aliases.length === 0">
+              {{ $t('email.editMailboxDialog.noAliases') }} <span class="actionable" @click="onAddAlias($event)">{{ $t('email.editMailboxDialog.addAliasAction') }}</span>
+            </div>
+            <div v-else>
+              <div class="actionable" @click="onAddAlias($event)">{{ $t('email.editMailboxDialog.addAnotherAliasAction') }}</div>
+            </div>
+          </FormGroup>
+        </fieldset>
+      </form>
+    </div>
+  </Dialog>
+</template>
\ No newline at end of file
diff --git a/dashboard/src/models/AppPasswordsModel.js b/dashboard/src/models/AppPasswordsModel.js
index ecadf1585..ac07a3c30 100644
--- a/dashboard/src/models/AppPasswordsModel.js
+++ b/dashboard/src/models/AppPasswordsModel.js
@@ -32,7 +32,7 @@ function create() {
     async remove(id) {
       let error, result;
       try {
-        result = await fetcher.del(`${API_ORIGIN}/api/v1/app_passwords/${id}`, { access_token: accessToken });
+        result = await fetcher.del(`${API_ORIGIN}/api/v1/app_passwords/${id}`, null, { access_token: accessToken });
       } catch (e) {
         error = e;
       }
diff --git a/dashboard/src/models/ApplinksModel.js b/dashboard/src/models/ApplinksModel.js
index 7d19f820b..35eb0d66f 100644
--- a/dashboard/src/models/ApplinksModel.js
+++ b/dashboard/src/models/ApplinksModel.js
@@ -47,7 +47,7 @@ function create() {
     async remove(id) {
       let result;
       try {
-        result = await fetcher.del(`${API_ORIGIN}/api/v1/applinks/${id}`, { access_token: accessToken });
+        result = await fetcher.del(`${API_ORIGIN}/api/v1/applinks/${id}`, null, { access_token: accessToken });
       } catch (e) {
         return [e];
       }
diff --git a/dashboard/src/models/ArchivesModel.js b/dashboard/src/models/ArchivesModel.js
index 96f90b2c0..75f84a911 100644
--- a/dashboard/src/models/ArchivesModel.js
+++ b/dashboard/src/models/ArchivesModel.js
@@ -26,7 +26,7 @@ function create() {
     async remove(id) {
       let error, result;
       try {
-        result = await fetcher.del(`${API_ORIGIN}/api/v1/archives/${id}`, { access_token: accessToken });
+        result = await fetcher.del(`${API_ORIGIN}/api/v1/archives/${id}`, null, { access_token: accessToken });
       } catch (e) {
         error = e;
       }
diff --git a/dashboard/src/models/DirectoryModel.js b/dashboard/src/models/DirectoryModel.js
index 602cae4a3..bfee08f76 100644
--- a/dashboard/src/models/DirectoryModel.js
+++ b/dashboard/src/models/DirectoryModel.js
@@ -114,7 +114,7 @@ export function createDirectoryModel(origin, accessToken, api) {
       await fetcher.post(`${origin}/api/v1/${api}/files/${folderPath}`, {}, { directory: true, access_token: accessToken });
     },
     async remove(filePath) {
-      await fetcher.del(`${origin}/api/v1/${api}/files/${filePath}`, { access_token: accessToken });
+      await fetcher.del(`${origin}/api/v1/${api}/files/${filePath}`, null, { access_token: accessToken });
     },
     async rename(fromFilePath, toFilePath, overwrite = false) {
       return await fetcher.put(`${origin}/api/v1/${api}/files/${fromFilePath}`, { action: 'rename', newFilePath: sanitize(toFilePath), overwrite }, { access_token: accessToken });
diff --git a/dashboard/src/models/DomainsModel.js b/dashboard/src/models/DomainsModel.js
index c7c38ee83..5bec29737 100644
--- a/dashboard/src/models/DomainsModel.js
+++ b/dashboard/src/models/DomainsModel.js
@@ -67,7 +67,7 @@ function create() {
     async remove(domain) {
       let error, result;
       try {
-        result = await fetcher.del(`${API_ORIGIN}/api/v1/domains/${domain}`, { access_token: accessToken });
+        result = await fetcher.del(`${API_ORIGIN}/api/v1/domains/${domain}`, null, { access_token: accessToken });
       } catch (e) {
         error = e;
       }
diff --git a/dashboard/src/models/GroupsModel.js b/dashboard/src/models/GroupsModel.js
index 599350ca8..848d1da86 100644
--- a/dashboard/src/models/GroupsModel.js
+++ b/dashboard/src/models/GroupsModel.js
@@ -82,7 +82,7 @@ function create() {
     async remove(id) {
       let result;
       try {
-        result = await fetcher.del(`${API_ORIGIN}/api/v1/groups/${id}`, { access_token: accessToken });
+        result = await fetcher.del(`${API_ORIGIN}/api/v1/groups/${id}`, null, { access_token: accessToken });
       } catch (e) {
         return [e];
       }
diff --git a/dashboard/src/models/MailboxesModel.js b/dashboard/src/models/MailboxesModel.js
index 2d1ff1db4..29e336e1c 100644
--- a/dashboard/src/models/MailboxesModel.js
+++ b/dashboard/src/models/MailboxesModel.js
@@ -17,6 +17,80 @@ function create() {
       if (result.status !== 200) return [result];
       return [null, result.body.mailboxes];
     },
+    async get(domain, name) {
+      let result;
+      try {
+        result = await fetcher.get(`${API_ORIGIN}/api/v1/mail/${domain}/mailboxes/${name}`, { access_token: accessToken });
+      } catch (e) {
+        return [e];
+      }
+
+      if (result.status !== 200) return [result];
+      return [null, result.body.mailbox];
+    },
+    async add(domain, name, options) {
+      const data = {
+        name: name,
+        ownerId: options.ownerId,
+        ownerType: options.ownerType,
+        active: !!options.active,
+        enablePop3: !!options.enablePop3,
+        storageQuota: options.storageQuota ||0,
+        messagesQuota: options.messagesQuota || 0,
+      };
+
+      let result;
+      try {
+        result = await fetcher.post(`${API_ORIGIN}/api/v1/mail/${domain}/mailboxes`, data, { access_token: accessToken });
+      } catch (e) {
+        return [e];
+      }
+
+      if (result.status !== 201) return [result];
+      return [null];
+    },
+    async update(domain, name, options) {
+      const data = {
+        ownerId: options.ownerId,
+        ownerType: options.ownerType,
+        active: !!options.active,
+        enablePop3: !!options.enablePop3,
+        storageQuota: options.storageQuota ||0,
+        messagesQuota: options.messagesQuota || 0,
+      };
+
+      let result;
+      try {
+        result = await fetcher.post(`${API_ORIGIN}/api/v1/mail/${domain}/mailboxes/${name}`, data, { access_token: accessToken });
+      } catch (e) {
+        return [e];
+      }
+
+      if (result.status !== 204) return [result];
+      return [null];
+    },
+    async remove(domain, name, deleteMails = false) {
+      let result;
+      try {
+        result = await fetcher.del(`${API_ORIGIN}/api/v1/mail/${domain}/mailboxes/${name}`, { deleteMails }, { access_token: accessToken });
+      } catch (e) {
+        return [e];
+      }
+
+      if (result.status !== 201) return [result];
+      return [null];
+    },
+    async setAliases(domain, name, aliases) {
+      let result;
+      try {
+        result = await fetcher.put(`${API_ORIGIN}/api/v1/mail/${domain}/mailboxes/${name}/aliases`, { aliases }, { access_token: accessToken });
+      } catch (e) {
+        return [e];
+      }
+
+      if (result.status !== 202) return [result];
+      return [null];
+    },
   };
 }
 
diff --git a/dashboard/src/models/ProfileModel.js b/dashboard/src/models/ProfileModel.js
index 8dc2d7a62..4391d58a5 100644
--- a/dashboard/src/models/ProfileModel.js
+++ b/dashboard/src/models/ProfileModel.js
@@ -9,7 +9,7 @@ function create() {
     name: 'ProfileModel',
     async logout() {
       // destroy oidc session in the spirit of true SSO
-      await fetcher.del(`${API_ORIGIN}/api/v1/oidc/sessions`, { access_token: accessToken });
+      await fetcher.del(`${API_ORIGIN}/api/v1/oidc/sessions`, null, { access_token: accessToken });
 
       localStorage.removeItem('token');
 
diff --git a/dashboard/src/models/TokensModel.js b/dashboard/src/models/TokensModel.js
index 891f6eaa8..8adc90b13 100644
--- a/dashboard/src/models/TokensModel.js
+++ b/dashboard/src/models/TokensModel.js
@@ -32,7 +32,7 @@ function create() {
     async remove(id) {
       let error, result;
       try {
-        result = await fetcher.del(`${API_ORIGIN}/api/v1/tokens/${id}`, { access_token: accessToken });
+        result = await fetcher.del(`${API_ORIGIN}/api/v1/tokens/${id}`, null, { access_token: accessToken });
       } catch (e) {
         error = e;
       }
diff --git a/dashboard/src/models/UserDirectoryModel.js b/dashboard/src/models/UserDirectoryModel.js
index f11b1023d..5dfaadbdf 100644
--- a/dashboard/src/models/UserDirectoryModel.js
+++ b/dashboard/src/models/UserDirectoryModel.js
@@ -125,7 +125,7 @@ function create() {
     async removeOpenIdClient(id) {
       let error, result;
       try {
-        result = await fetcher.del(`${API_ORIGIN}/api/v1/oidc/clients/${id}`, { access_token: accessToken });
+        result = await fetcher.del(`${API_ORIGIN}/api/v1/oidc/clients/${id}`, null, { access_token: accessToken });
       } catch (e) {
         error = e;
       }
diff --git a/dashboard/src/models/UsersModel.js b/dashboard/src/models/UsersModel.js
index 95db0bc8c..9bd413050 100644
--- a/dashboard/src/models/UsersModel.js
+++ b/dashboard/src/models/UsersModel.js
@@ -68,7 +68,7 @@ function create() {
     async remove(id) {
       let result;
       try {
-        result = await fetcher.del(`${API_ORIGIN}/api/v1/users/${id}`, { access_token: accessToken });
+        result = await fetcher.del(`${API_ORIGIN}/api/v1/users/${id}`, null, { access_token: accessToken });
       } catch (e) {
         return [e];
       }
diff --git a/dashboard/src/models/VolumesModel.js b/dashboard/src/models/VolumesModel.js
index ed475f1ef..bf0722422 100644
--- a/dashboard/src/models/VolumesModel.js
+++ b/dashboard/src/models/VolumesModel.js
@@ -66,7 +66,7 @@ function create() {
     async remove(id) {
       let error, result;
       try {
-        result = await fetcher.del(`${API_ORIGIN}/api/v1/volumes/${id}`, { access_token: accessToken });
+        result = await fetcher.del(`${API_ORIGIN}/api/v1/volumes/${id}`, null, { access_token: accessToken });
       } catch (e) {
         error = e;
       }
diff --git a/dashboard/src/style.css b/dashboard/src/style.css
index e20b4b89f..718b1c38b 100644
--- a/dashboard/src/style.css
+++ b/dashboard/src/style.css
@@ -199,3 +199,7 @@ h1.section-header {
 .actionable:hover {
   color: var(--pankow-color-primary-hover);
 }
+
+fieldset > * {
+  margin: 6px 0;
+}
\ No newline at end of file
diff --git a/dashboard/src/views/MailboxesView.vue b/dashboard/src/views/MailboxesView.vue
index 8a5d5474f..83526f773 100644
--- a/dashboard/src/views/MailboxesView.vue
+++ b/dashboard/src/views/MailboxesView.vue
@@ -4,19 +4,27 @@ import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 const t = i18n.t;
 
-import { ref, onMounted } from 'vue';
-import { Button, TableView } from 'pankow';
+import { ref, onMounted, useTemplateRef } from 'vue';
+import { Button, TableView, Dialog, Checkbox } from 'pankow';
+import { prettyDecimalSize } from 'pankow/utils';
 import { eachLimit } from 'async';
 import Section from '../components/Section.vue';
+import MailboxDialog from '../components/MailboxDialog.vue';
 import DomainsModel from '../models/DomainsModel.js';
 import MailModel from '../models/MailModel.js';
+import GroupsModel from '../models/GroupsModel.js';
+import UsersModel from '../models/UsersModel.js';
+import MailboxesModel from '../models/MailboxesModel.js';
 
 const domainsModel = DomainsModel.create();
 const mailModel = MailModel.create();
+const groupsModel = GroupsModel.create();
+const mailboxesModel = MailboxesModel.create();
+const usersModel = UsersModel.create();
 
 const columns = {
   fullName: { label: t('email.incoming.mailboxes.name'), sort: true },
-  ownerId: { label: t('email.incoming.mailboxes.owner'), sort: true },
+  ownerDisplayName: { label: t('email.incoming.mailboxes.owner'), sort: true },
   aliases: { label: t('email.incoming.mailboxes.aliases'), sort: true },
   usage: { label: t('email.incoming.mailboxes.usage'), sort: true },
   actions: {}
@@ -25,55 +33,103 @@ const columns = {
 const busy = ref(true);
 const mailboxes = ref([]);
 const domains = ref([]);
+const users = ref([]);
+const groups = ref([]);
 
 function renderAliases(aliases) {
   return aliases.map(a => `${a.name}@${a.domain}`).join(', ');
 }
 
-// function updateMailUsage(mailboxName, quotaLimit) {
-//     if (!$scope.mailUsage) $scope.mailUsage = {};
-//     if (!$scope.mailUsage[mailboxName]) $scope.mailUsage[mailboxName] = {};
-//     $scope.mailUsage[mailboxName].quotaLimit = quotaLimit;
-// }
+const mailboxDialog = useTemplateRef('mailboxDialog');
 
-async function refreshForDomain(domain) {
-  let [error, result] = await mailModel.usage(domain);
-  if (error) return console.error(error);
+async function onAddOrEdit(mailbox = null) {
+  mailboxDialog.value.open(mailbox);
+}
 
-  const usage = result;
+const removeDialog = useTemplateRef('removeDialog');
+const removeBusy = ref(false);
+const removeError = ref('');
+const removePurge = ref(false);
+const removeMailbox = ref({});
 
-  console.log(usage);
+function onRemove(mailbox) {
+  removeBusy.value = false;
+  removePurge.value = false;
+  removeError.value = '';
+  removeMailbox.value = mailbox;
 
-  [error, result] = await mailModel.listMailboxes(domain);
-  if (error) throw error;
+  removeDialog.value.open();
+}
 
-  result.forEach((m) => {
-    m.fullName = m.name + '@' + m.domain; // to make it simple for the ui
-    // m.owner = $scope.owners.find(function (o) { return o.id === m.ownerId; }); // owner may not exist
-    // m.ownerDisplayName = m.owner ? m.owner.display : ''; // this meta property is set when we get the user list
-  });
+async function onSubmitRemove() {
+  removeBusy.value = true;
+  removeError.value = '';
 
-  mailboxes.value = mailboxes.value.concat(result);
+  const [error] = await mailboxesModel.remove(removeMailbox.value.domain, removeMailbox.value.name, removePurge.value);
+  if (error) {
+    removeBusy.value = false;
+    removeError.value = error.body ? error.body.message : 'Internal error';
+    return console.error(error);
+  }
+
+  await refresh();
+  removeDialog.value.close();
+
+  removeBusy.value = false;
 }
 
 async function refresh() {
   busy.value = true;
 
+  let tmp = [];
+  async function refreshForDomain(domain) {
+    let [error, result] = await mailModel.usage(domain);
+    if (error) return console.error(error);
+
+    const usage = result;
+
+    [error, result] = await mailModel.listMailboxes(domain);
+    if (error) throw error;
+
+    result.forEach((m) => {
+      m.fullName = m.name + '@' + m.domain;
+
+      m.owner = users.value.find(u => u.id === m.ownerId) || null;
+      if (!m.owner) m.owner = groups.value.find(g => g.id === m.ownerId) || null;
+
+      m.ownerDisplayName = m.owner ? (m.owner.username || m.owner.name) : '';
+      m.usage = usage[m.fullName] || null;
+    });
+
+    tmp = tmp.concat(result);
+  }
+
   try {
     await eachLimit(domains.value.map(d => d.domain), 10, refreshForDomain);
   } catch (error) {
     return console.error(error);
   }
 
+  mailboxes.value = tmp;
   busy.value = false;
 }
 
 onMounted(async () => {
-  const [error, result] = await domainsModel.list();
+  let [error, result] = await domainsModel.list();
   if (error) return console.error(error);
 
   domains.value = result;
 
+  [error, result] = await usersModel.list();
+  if (error) return console.error(error);
+
+  users.value = result;
+
+  [error, result] = await groupsModel.list();
+  if (error) return console.error(error);
+
+  groups.value = result;
+
   await refresh();
 });
 
@@ -81,20 +137,42 @@ onMounted(async () => {
 
 <template>
   <div>
+    <Dialog ref="removeDialog"
+      :title="$t('email.deleteMailboxDialog.title', { name: removeMailbox.name, domain: removeMailbox.domain })"
+      :confirm-label="$t('email.deleteMailboxDialog.deleteAction')"
+      :confirm-busy="removeBusy"
+      :confirm-active="!removeBusy"
+       confirm-style="danger"
+      :reject-label="removeBusy ? '' : $t('main.dialog.cancel')"
+       reject-style="secondary"
+      @confirm="onSubmitRemove()"
+    >
+      <div>
+        <div class="text-danger" v-if="removeError">{{ removeError }}</div>
+        <div v-html="$t('email.deleteMailboxDialog.description')"></div>
+        <br/>
+        <Checkbox v-model="removePurge" :label="$t('email.deleteMailboxDialog.purgeMailboxCheckbox')" />
+      </div>
+    </Dialog>
+
+    <MailboxDialog ref="mailboxDialog" :users="users" :groups="groups" :domains="domains" @success="refresh()"/>
+
     <Section :title="$t('email.incoming.mailboxes.title')">
       <template #header-buttons>
-        <Button>{{ $t('email.incoming.mailboxes.addAction') }}</Button>
+        <Button @click="onAddOrEdit()">{{ $t('email.incoming.mailboxes.addAction') }}</Button>
       </template>
 
-      <TableView :columns="columns" :model="mailboxes" :busy="busy">
+      <TableView :columns="columns" :model="mailboxes" :busy="busy" @row-click="onAddOrEdit">
         <template #aliases="mailbox">{{ renderAliases(mailbox.aliases) }}</template>
         <template #usage="mailbox">
-          <span v-if="mailUsage !== null">
-            <!-- {{ mailUsage[mailbox.fullName].quotaValue | prettyDecimalSize }} <span ng-show="mailUsage[mailbox.fullName].quotaLimit">/ {{ mailUsage[mailbox.fullName].quotaLimit | prettyDecimalSize }}</span> -->
-          </span>
-          <span ng-show="mailUsage === null">
-            <!-- {{ 'main.loadingPlaceholder' | tr }} ... -->
-          </span>
+          <span v-if="mailbox.usage">{{ prettyDecimalSize(mailbox.usage.quotaValue)  }} <span ng-show="mailUsage[mailbox.fullName].quotaLimit">/ {{ prettyDecimalSize(mailbox.usage.quotaLimit) }}</span></span>
+          <span v-else>{{ $t('main.loadingPlaceholder') }} ...</span>
+        </template>
+        <template #actions="mailbox">
+          <div class="table-actions">
+            <Button tool secondary small icon="fa fa-pencil-alt" @click.stop="onAddOrEdit(mailboxe)"></Button>
+            <Button tool danger small icon="fa-solid fa-trash-alt" @click.stop="onRemove(mailbox)"></Button>
+          </div>
         </template>
       </TableView>
     </Section>