diff --git a/components/MainNav.vue b/components/MainNav.vue
index f3b5acb..0773306 100644
--- a/components/MainNav.vue
+++ b/components/MainNav.vue
@@ -220,6 +220,10 @@ const links = computed(() => {
           label: "Mitarbeiter",
           to: "/profiles",
           icon: "i-heroicons-clipboard-document-list"
+        },{
+          label: "E-Mail Accounts",
+          to: "/settings/emailAccounts",
+          icon: "i-heroicons-clipboard-document-list"
         },{
           label: "Bankkonten",
           to: "/settings/banking",
diff --git a/pages/settings/emailAccounts.vue b/pages/settings/emailAccounts.vue
new file mode 100644
index 0000000..4891f33
--- /dev/null
+++ b/pages/settings/emailAccounts.vue
@@ -0,0 +1,123 @@
+<script setup>
+import axios from "axios"
+const supabase = useSupabaseClient()
+const dataStore = useDataStore()
+
+const createEMailAddress = ref("")
+const createEMailType = ref("imap")
+const showEmailAddressModal = ref(false)
+
+const items = ref([])
+const profiles = ref([])
+
+const setupPage = async () => {
+  items.value = await useSupabaseSelect("emailAccounts","*")
+  profiles.value = await useSupabaseSelect("profiles","*")
+}
+
+const createAccount = async () => {
+  showEmailAddressModal.value = false
+
+  const {data,error} = await supabase.functions.invoke('emailengine_authenticate',{
+    body: {
+      emailAddress: createEMailAddress.value,
+      accountType: createEMailType.value,
+      profile: dataStore.activeProfile.id
+    }
+  })
+
+  console.log(error)
+  console.log(data)
+
+  window.open(data.url, '_blank').focus();
+}
+
+setupPage()
+
+
+const templateColumns = [
+  {
+    key: "emailAddress",
+    label: "Adresse:"
+  },
+  {
+    key: "profiles",
+    label: "Bneutzer"
+  },
+  {
+    key: "mailboxes",
+    label: "Ordner"
+  },
+]
+const selectedColumns = ref(templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
+
+
+
+</script>
+
+<template>
+  <UModal
+    v-model="showEmailAddressModal"
+  >
+    <UCard>
+      <template #header>
+        E-Mail Adresse
+      </template>
+<!--      <UFormGroup
+        label="E-Mail Adresse:"
+      >
+
+      </UFormGroup>-->
+
+      <UInput
+          v-model="createEMailAddress"
+      />
+<!--      <UFormGroup
+        label="Account Typ:"
+      >
+        <USelectMenu
+          :options="[{key: 'imap',label:'IMAP'}]"
+          option-attribute="label"
+          value-attribute="key"
+          v-model="createEMailType"
+        />
+      </UFormGroup>-->
+      <template #footer>
+        <UButton
+            @click="createAccount"
+        >
+          Erstellen
+        </UButton>
+      </template>
+    </UCard>
+
+  </UModal>
+  <UDashboardNavbar title="E-Mail Accounts">
+      <template #right>
+        <UButton
+          @click="showEmailAddressModal = true"
+        >
+          + Account
+        </UButton>
+      </template>
+  </UDashboardNavbar>
+  <UTable
+    :rows="items"
+    :columns="columns"
+    class="w-full"
+    :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+    :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Projekte anzuzeigen' }"
+  >
+    <template #profiles-data="{row}">
+      {{row.profiles.map(i => profiles.find(x => x.id === i).fullName).join(", ")}}
+    </template>
+    <template #mailboxes-data="{row}">
+      {{row.mailboxes.map(i => i.name).join(", ")}}
+    </template>
+  </UTable>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file