diff --git a/dashboard/index.html b/dashboard/index.html
index 85a4a3145..8316698cd 100644
--- a/dashboard/index.html
+++ b/dashboard/index.html
@@ -149,6 +149,7 @@
           <a class="nav-sidebar-item" ng-class="{ active: isActive('/branding')}" ng-show="user.isAtLeastAdmin" href="#/branding" ng-click="closeNavbar()"><i class="fa fa-passport fa-fw"></i> {{ 'branding.title' | tr }}</a>
           <a class="nav-sidebar-item" ng-class="{ active: isActive('/domains')}" ng-show="user.isAtLeastAdmin" href="#/domains" ng-click="closeNavbar()"><i class="fa fa-globe fa-fw"></i> {{ 'domains.title' | tr }}</a>
           <a class="nav-sidebar-item" ng-class="{ active: isActive('/email')}" ng-show="user.isAtLeastMailManager" href="#/email" ng-click="closeNavbar()"><i class="fa fa-envelope fa-fw"></i> {{ 'emails.title' | tr }}</a>
+          <a class="nav-sidebar-item" ng-class="{ active: isActive('/emails-mailboxes')}" ng-show="user.isAtLeastMailManager" href="#/emails-mailboxes" ng-click="closeNavbar()"><i class="fa fa-inbox fa-fw"></i> {{ 'email.incoming.mailboxes.title' | tr }}</a>
           <a class="nav-sidebar-item" ng-class="{ active: isActive('/eventlog')}" ng-show="user.isAtLeastAdmin" href="#/eventlog" ng-click="closeNavbar()"><i class="fa fa-list-alt fa-fw"></i> {{ 'eventlog.title' | tr }}</a>
           <a class="nav-sidebar-item" ng-class="{ active: isActive('/network')}" ng-show="user.isAtLeastAdmin" href="#/network" ng-click="closeNavbar()"><i class="fas fa-network-wired fa-fw"></i> {{ 'network.title' | tr }}</a>
           <a class="nav-sidebar-item" ng-class="{ active: isActive('/services')}" ng-show="user.isAtLeastAdmin" href="#/services" ng-click="closeNavbar()"><i class="fa fa-cogs fa-fw"></i> {{ 'services.title' | tr }}</a>
diff --git a/dashboard/public/js/index.js b/dashboard/public/js/index.js
index b11d3caa6..00122fb17 100644
--- a/dashboard/public/js/index.js
+++ b/dashboard/public/js/index.js
@@ -85,6 +85,9 @@ app.config(['$routeProvider', function ($routeProvider) {
     }).when('/emails-eventlog', {
         // controller: 'EmailsEventlogController',
         // templateUrl: 'views/emails-eventlog.html?' + window.VITE_CACHE_ID
+    }).when('/emails-mailboxes', {
+        // controller: 'EmailsEventlogController',
+        // templateUrl: 'views/emails-eventlog.html?' + window.VITE_CACHE_ID
     }).when('/emails-queue', {
         // controller: 'EmailsQueueController',
         // templateUrl: 'views/emails-queue.html?' + window.VITE_CACHE_ID
diff --git a/dashboard/src/Index.vue b/dashboard/src/Index.vue
index 87d118e74..49fee5fb7 100644
--- a/dashboard/src/Index.vue
+++ b/dashboard/src/Index.vue
@@ -12,6 +12,7 @@ import EmailView from './views/EmailView.vue';
 import EmailDomainView from './views/EmailDomainView.vue';
 import EmailsEventlogView from './views/EmailsEventlogView.vue';
 import EventlogView from './views/EventlogView.vue';
+import MailboxesView from './views/MailboxesView.vue';
 import NetworkView from './views/NetworkView.vue';
 import ProfileView from './views/ProfileView.vue';
 import ServicesView from './views/ServicesView.vue';
@@ -32,6 +33,7 @@ const VIEWS = {
   EMAIL: 'email',
   EMAIL_DOMAIN: 'email-domain',
   EMAILS_EVENTLOG: 'emails-eventlog',
+  EMAILS_MAILBOXES: 'emails-mailboxes',
   EVENTLOG: 'eventlog',
   NETWORK: 'network',
   PROFILE: 'profile',
@@ -65,6 +67,8 @@ function onHashChange() {
     view.value = VIEWS.EMAIL;
   } else if (v === VIEWS.EMAILS_EVENTLOG) {
     view.value = VIEWS.EMAILS_EVENTLOG;
+  } else if (v === VIEWS.EMAILS_MAILBOXES) {
+    view.value = VIEWS.EMAILS_MAILBOXES;
   } else if (v.indexOf(VIEWS.EMAIL) === 0) {
     view.value = VIEWS.EMAIL_DOMAIN;
   } else if (v === VIEWS.EVENTLOG) {
@@ -121,6 +125,7 @@ onMounted(async () => {
     <EmailDomainView v-else-if="view === VIEWS.EMAIL_DOMAIN" />
     <EmailsEventlogView v-else-if="view === VIEWS.EMAILS_EVENTLOG" />
     <EventlogView v-else-if="view === VIEWS.EVENTLOG" />
+    <MailboxesView v-else-if="view === VIEWS.EMAILS_MAILBOXES" />
     <NetworkView v-else-if="view === VIEWS.NETWORK" />
     <ProfileView v-else-if="view === VIEWS.PROFILE" />
     <ServicesView v-else-if="view === VIEWS.SERVICES" />
diff --git a/dashboard/src/views/MailboxesView.vue b/dashboard/src/views/MailboxesView.vue
new file mode 100644
index 000000000..8a5d5474f
--- /dev/null
+++ b/dashboard/src/views/MailboxesView.vue
@@ -0,0 +1,102 @@
+<script setup>
+
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
+import { ref, onMounted } from 'vue';
+import { Button, TableView } from 'pankow';
+import { eachLimit } from 'async';
+import Section from '../components/Section.vue';
+import DomainsModel from '../models/DomainsModel.js';
+import MailModel from '../models/MailModel.js';
+
+const domainsModel = DomainsModel.create();
+const mailModel = MailModel.create();
+
+const columns = {
+  fullName: { label: t('email.incoming.mailboxes.name'), sort: true },
+  ownerId: { 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: {}
+};
+
+const busy = ref(true);
+const mailboxes = ref([]);
+const domains = 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;
+// }
+
+async function refreshForDomain(domain) {
+  let [error, result] = await mailModel.usage(domain);
+  if (error) return console.error(error);
+
+  const usage = result;
+
+  console.log(usage);
+
+  [error, result] = await mailModel.listMailboxes(domain);
+  if (error) throw error;
+
+  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
+  });
+
+  mailboxes.value = mailboxes.value.concat(result);
+}
+
+async function refresh() {
+  busy.value = true;
+
+  try {
+    await eachLimit(domains.value.map(d => d.domain), 10, refreshForDomain);
+  } catch (error) {
+    return console.error(error);
+  }
+
+  busy.value = false;
+}
+
+onMounted(async () => {
+  const [error, result] = await domainsModel.list();
+  if (error) return console.error(error);
+
+  domains.value = result;
+
+  await refresh();
+});
+
+</script>
+
+<template>
+  <div>
+    <Section :title="$t('email.incoming.mailboxes.title')">
+      <template #header-buttons>
+        <Button>{{ $t('email.incoming.mailboxes.addAction') }}</Button>
+      </template>
+
+      <TableView :columns="columns" :model="mailboxes" :busy="busy">
+        <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>
+        </template>
+      </TableView>
+    </Section>
+  </div>
+</template>