diff --git a/dashboard/public/js/index.js b/dashboard/public/js/index.js
index 87261f476..b11d3caa6 100644
--- a/dashboard/public/js/index.js
+++ b/dashboard/public/js/index.js
@@ -86,11 +86,11 @@ app.config(['$routeProvider', function ($routeProvider) {
         // 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
+        // controller: 'EmailsQueueController',
+        // templateUrl: 'views/emails-queue.html?' + window.VITE_CACHE_ID
     }).when('/email/:domain/:view?', {
-        controller: 'EmailController',
-        templateUrl: 'views/email.html?' + window.VITE_CACHE_ID
+        // controller: 'EmailController',
+        // templateUrl: 'views/email.html?' + window.VITE_CACHE_ID
     }).when('/notifications', {
         controller: 'NotificationsController',
         templateUrl: 'views/notifications.html?' + window.VITE_CACHE_ID
diff --git a/dashboard/src/Index.vue b/dashboard/src/Index.vue
index 70ade6198..87d118e74 100644
--- a/dashboard/src/Index.vue
+++ b/dashboard/src/Index.vue
@@ -8,7 +8,8 @@ import AppstoreView from './views/AppstoreView.vue';
 import BackupsView from './views/BackupsView.vue';
 import BrandingView from './views/BrandingView.vue';
 import DomainsView from './views/DomainsView.vue';
-import EmailsView from './views/EmailsView.vue';
+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 NetworkView from './views/NetworkView.vue';
@@ -28,7 +29,8 @@ const VIEWS = {
   BACKUPS: 'backups',
   BRANDING: 'branding',
   DOMAINS: 'domains',
-  EMAILS: 'email',
+  EMAIL: 'email',
+  EMAIL_DOMAIN: 'email-domain',
   EMAILS_EVENTLOG: 'emails-eventlog',
   EVENTLOG: 'eventlog',
   NETWORK: 'network',
@@ -59,10 +61,12 @@ function onHashChange() {
     view.value = VIEWS.BRANDING;
   } else if (v === VIEWS.DOMAINS) {
     view.value = VIEWS.DOMAINS;
-  } else if (v === VIEWS.EMAILS) {
-    view.value = VIEWS.EMAILS;
+  } else if (v === VIEWS.EMAIL) {
+    view.value = VIEWS.EMAIL;
   } else if (v === VIEWS.EMAILS_EVENTLOG) {
     view.value = VIEWS.EMAILS_EVENTLOG;
+  } else if (v.indexOf(VIEWS.EMAIL) === 0) {
+    view.value = VIEWS.EMAIL_DOMAIN;
   } else if (v === VIEWS.EVENTLOG) {
     view.value = VIEWS.EVENTLOG;
   } else if (v === VIEWS.NETWORK) {
@@ -113,7 +117,8 @@ onMounted(async () => {
     <BackupsView v-else-if="view === VIEWS.BACKUPS" />
     <BrandingView v-else-if="view === VIEWS.BRANDING" />
     <DomainsView v-else-if="view === VIEWS.DOMAINS" />
-    <EmailsView v-else-if="view === VIEWS.EMAILS" />
+    <EmailView v-else-if="view === VIEWS.EMAIL" />
+    <EmailDomainView v-else-if="view === VIEWS.EMAIL_DOMAIN" />
     <EmailsEventlogView v-else-if="view === VIEWS.EMAILS_EVENTLOG" />
     <EventlogView v-else-if="view === VIEWS.EVENTLOG" />
     <NetworkView v-else-if="view === VIEWS.NETWORK" />
diff --git a/dashboard/src/models/DomainsModel.js b/dashboard/src/models/DomainsModel.js
index 70b84e8a9..c7c38ee83 100644
--- a/dashboard/src/models/DomainsModel.js
+++ b/dashboard/src/models/DomainsModel.js
@@ -17,6 +17,17 @@ function create() {
       if (error || result.status !== 200) return [error || result];
       return [null, result.body.domains];
     },
+    async get(domain) {
+      let error, result;
+      try {
+        result = await fetcher.get(`${API_ORIGIN}/api/v1/domains/${domain}`, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 200) return [error || result];
+      return [null, result.body];
+    },
     async add(domain, zoneName, provider, config, fallbackCertificate, tlsConfig) {
       const data = { domain, provider, config, tlsConfig };
       if (zoneName) data.zoneName = zoneName;
diff --git a/dashboard/src/models/MailModel.js b/dashboard/src/models/MailModel.js
index 9248a318d..c8acc250a 100644
--- a/dashboard/src/models/MailModel.js
+++ b/dashboard/src/models/MailModel.js
@@ -39,6 +39,17 @@ function create() {
       if (result.status !== 200) return [result];
       return [null, result.body.count];
     },
+    async setEnabled(domain, enabled) {
+      let result;
+      try {
+        result = await fetcher.post(`${API_ORIGIN}/api/v1/mail/${domain}/enable`, { enabled }, { access_token: accessToken });
+      } catch (e) {
+        return [e];
+      }
+
+      if (result.status !== 202) return [result];
+      return [null];
+    },
     async usage(domain) {
       let result;
       try {
diff --git a/dashboard/src/views/EmailDomainView.vue b/dashboard/src/views/EmailDomainView.vue
new file mode 100644
index 000000000..af237e1a4
--- /dev/null
+++ b/dashboard/src/views/EmailDomainView.vue
@@ -0,0 +1,142 @@
+<script setup>
+
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
+import { ref, onMounted, useTemplateRef } from 'vue';
+import { Button, TableView, Checkbox, InputDialog, Dialog, FormGroup, TextInput, InputGroup, Switch, ButtonGroup, SingleSelect } from 'pankow';
+import Section from '../components/Section.vue';
+import SettingsItem from '../components/SettingsItem.vue';
+import DomainsModel from '../models/DomainsModel.js';
+import MailModel from '../models/MailModel.js';
+import ProfileModel from '../models/ProfileModel.js';
+import TasksModel from '../models/TasksModel.js';
+
+const domainsModel = DomainsModel.create();
+const mailModel = MailModel.create();
+const profileModel = ProfileModel.create();
+const tasksModel = TasksModel.create();
+
+const inputDialog = useTemplateRef('inputDialog');
+const enableIncomingDialog = useTemplateRef('enableIncomingDialog');
+
+const domain = ref('');
+const domainProvider = ref('');
+const mailConfig = ref({});
+const refreshBusy = ref(false);
+const incomingEnabled = ref(false);
+const enableIncomeBusy = ref(false);
+const enableIncomingSetupDns = ref(false);
+
+async function onAskIncomingToggle(value) {
+  if (value) {
+    enableIncomeBusy.value = false;
+    return enableIncomingDialog.value.open();
+  }
+
+  const yes = await inputDialog.value.confirm({
+    title: t('email.disableEmailDialog.title', { domain: domain.value }),
+    message: t('email.disableEmailDialog.description', { domain: domain.value }),
+    modal: true,
+    confirmStyle: 'danger',
+    confirmLabel: t('email.disableEmailDialog.disableAction'),
+    rejectLabel: t('main.dialog.cancel'),
+    rejectStyle: 'secondary',
+  });
+
+  // reset switch
+  if (!yes) return incomingEnabled.value = true;
+
+  const [error] = await mailModel.setEnabled(domain.value, false);
+  if (error) return console.error(error);
+
+  // TODO this has to be done in the backend here! reconfigureEmailApps();
+
+  refreshBusy.value = true;
+  setTimeout(refreshMailConfig, 2000);
+}
+
+async function onEnableIncoming() {
+  enableIncomeBusy.value = true;
+
+  const [error] = await mailModel.setEnabled(domain.value, true);
+  if (error) return console.error(error);
+
+  // TODO this has to be done in the backend here! reconfigureEmailApps();
+
+  if (enableIncomingSetupDns.value) {
+    const [error] = await domainsModel.setDnsRecords({ domain: domain.value, type: 'mail' });
+    if (error) console.error(error);
+  }
+
+  setTimeout(async () => {
+    await refreshMailConfig();
+    enableIncomingDialog.value.close();
+    enableIncomeBusy.value = false;
+  }, 2000);
+}
+
+async function refreshMailConfig() {
+
+  const [error, result] = await mailModel.config(domain.value);
+  if (error) return console.error(error);
+
+  mailConfig.value = result;
+  incomingEnabled.value = result.enabled;
+  domainProvider.value = '';
+
+  refreshBusy.value = false;
+}
+
+onMounted(async () => {
+  domain.value = window.location.hash.slice('#/email/'.length);
+  if (!domain.value) return;
+
+  const [error, result] = await domainsModel.get(domain.value);
+  if (error) return console.error(error);
+
+  domainProvider.value = result.provider;
+
+  await refreshMailConfig();
+});
+
+</script>
+
+<template>
+  <div>
+    <InputDialog ref="inputDialog"/>
+    <Dialog ref="enableIncomingDialog"
+      :title="$t('email.enableEmailDialog.title', { domain: domain })"
+      :confirm-label="$t('email.enableEmailDialog.enableAction')"
+      :confirm-busy="enableIncomeBusy"
+      :reject-label="enableIncomeBusy ? '' : $t('main.dialog.cancel')"
+       reject-style="secondary"
+      @confirm="onEnableIncoming()"
+    >
+      <div>
+        <p v-html="$t('email.enableEmailDialog.description', { domain: domain, requiredPortsDocsLink: 'https://docs.cloudron.io/email/#required-ports' })"></p>
+        <!-- TODO <p class="text-danger" v-if="adminDomain.provider === 'cloudflare'" v-html="$t('email.enableEmailDialog.cloudflareInfo', { adminDomain: config.adminDomain, mailFqdn: config.mailFqdn })"></p> -->
+        <div v-if="domainProvider === 'noop' || domainProvider === 'manual'" v-html="$t('email.enableEmailDialog.noProviderInfo')"></div>
+        <div v-else>
+          <Checkbox v-model="enableIncomingSetupDns" :label="$t('email.enableEmailDialog.setupDnsCheckbox')"/>
+          <div v-html="$t('email.enableEmailDialog.setupDnsInfo', { importEmailDocsLink: 'https://docs.cloudron.io/guides/import-email' })"></div>
+        </div>
+      </div>
+    </Dialog>
+
+    <Section :title="$t('email.config.title', { domain: domain })">
+
+    </Section>
+
+    <Section :title="$t('emails.settings.title')">
+      <SettingsItem>
+        <FormGroup>
+          <label>{{ $t('email.incoming.title') }}</label>
+          <div>{{ $t(mailConfig.enabled ? 'email.incoming.enabled' : 'email.incoming.disabled') }}</div>
+        </FormGroup>
+        <Switch v-model="incomingEnabled" :disabled="refreshBusy" @change="onAskIncomingToggle"/>
+      </SettingsItem>
+    </Section>
+  </div>
+</template>
diff --git a/dashboard/src/views/EmailsView.vue b/dashboard/src/views/EmailView.vue
similarity index 99%
rename from dashboard/src/views/EmailsView.vue
rename to dashboard/src/views/EmailView.vue
index 4c92cf50c..56eb2fe0b 100644
--- a/dashboard/src/views/EmailsView.vue
+++ b/dashboard/src/views/EmailView.vue
@@ -377,7 +377,6 @@ onMounted(async () => {
     <h1 class="section-header">
       {{ $t('emails.title') }}
       <div style="display: flex; gap: 4px; flex-wrap: wrap; margin-top: 10px;">
-        <Button href="#/emails-queue">{{ $t('emails.action.queue') }}</Button>
         <Button href="#/emails-eventlog">{{ $t('eventlog.title') }}</Button>
       </div>
     </h1>
diff --git a/dashboard/src/views/EmailsEventlogView.vue b/dashboard/src/views/EmailsEventlogView.vue
index c7b0c047c..283d7c535 100644
--- a/dashboard/src/views/EmailsEventlogView.vue
+++ b/dashboard/src/views/EmailsEventlogView.vue
@@ -83,7 +83,6 @@ onMounted(async () => {
     <h1 class="section-header">
       {{ $t('emails.eventlog.title') }}
       <div style="display: flex; gap: 4px; flex-wrap: wrap; margin-top: 10px;">
-        <Button href="#/emails-queue">{{ $t('emails.action.queue') }}</Button>
         <Button href="/logs.html?id=mail" target="_blank">{{ $t('main.action.logs') }}</Button>
       </div>
     </h1>
@@ -95,9 +94,9 @@ onMounted(async () => {
       <Dropdown v-model="perPage" :options="perPageOptions" option-key="value" option-label="name"/>
 
       <ButtonGroup>
-        <Button tool @click="onPrevPage()" :disabled="busy || page <= 1" icon="fa-solid fa-angle-double-left" v-tooltip="$t('main.pagination.prev')" />
-        <Button tool @click="onRefresh()" :loading="refreshBusy" icon="fa-solid fa-sync-alt" />
-        <Button tool @click="onNextPage()" :disabled="busy || perPage > eventlogs.length" icon="fa-solid fa-angle-double-right" v-tooltip="$t('main.pagination.next')" />
+        <Button tool secondary @click="onPrevPage()" :disabled="busy || page <= 1" icon="fa-solid fa-angle-double-left" v-tooltip="$t('main.pagination.prev')" />
+        <Button tool secondary @click="onRefresh()" :loading="refreshBusy" icon="fa-solid fa-sync-alt" />
+        <Button tool secondary @click="onNextPage()" :disabled="busy || perPage > eventlogs.length" icon="fa-solid fa-angle-double-right" v-tooltip="$t('main.pagination.next')" />
       </ButtonGroup>
     </div>
 
diff --git a/dashboard/src/views/EventlogView.vue b/dashboard/src/views/EventlogView.vue
index a139b09cf..94874f648 100644
--- a/dashboard/src/views/EventlogView.vue
+++ b/dashboard/src/views/EventlogView.vue
@@ -163,9 +163,9 @@ onMounted(async () => {
       <Dropdown v-model="perPage" :options="perPageOptions" option-key="value" option-label="name"/>
 
       <ButtonGroup>
-        <Button tool @click="onPrevPage()" :disabled="busy || page <= 1" icon="fa-solid fa-angle-double-left" v-tooltip="$t('main.pagination.prev')" />
-        <Button tool @click="onRefresh()" :loading="refreshBusy" icon="fa-solid fa-sync-alt" />
-        <Button tool @click="onNextPage()" :disabled="busy || perPage > eventlogs.length" icon="fa-solid fa-angle-double-right" v-tooltip="$t('main.pagination.next')" />
+        <Button tool secondary @click="onPrevPage()" :disabled="busy || page <= 1" icon="fa-solid fa-angle-double-left" v-tooltip="$t('main.pagination.prev')" />
+        <Button tool secondary @click="onRefresh()" :loading="refreshBusy" icon="fa-solid fa-sync-alt" />
+        <Button tool secondary @click="onNextPage()" :disabled="busy || perPage > eventlogs.length" icon="fa-solid fa-angle-double-right" v-tooltip="$t('main.pagination.next')" />
       </ButtonGroup>
     </div>