diff --git a/components/MainNav.vue b/components/MainNav.vue
index 69c45b0..4639d9e 100644
--- a/components/MainNav.vue
+++ b/components/MainNav.vue
@@ -305,9 +305,8 @@ const links = computed(() => {
           icon: "i-heroicons-key"
         },*/{
           label: "E-Mail Konten",
-          to: "/settings/emailAccounts",
-          icon: "i-heroicons-envelope",
-          disabled: true
+          to: "/settings/emailaccounts",
+          icon: "i-heroicons-envelope"
         },{
           label: "Bankkonten",
           to: "/settings/banking",
diff --git a/pages/settings/emailaccounts/[mode]/[[id]].vue b/pages/settings/emailaccounts/[mode]/[[id]].vue
new file mode 100644
index 0000000..de51c82
--- /dev/null
+++ b/pages/settings/emailaccounts/[mode]/[[id]].vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+
+const route = useRoute()
+const mode = route.params.mode
+
+const itemInfo = ref({})
+
+const setup = async () => {
+  if(mode === "create") {
+
+  } else {
+    itemInfo.value = await useNuxtApp().$api(`/api/email/accounts/${route.params.id}`)
+  }
+}
+setup()
+
+const createAccount = async () => {
+  const res = await useNuxtApp().$api(`/api/email/accounts`, {
+    method: "POST",
+    body: itemInfo.value,
+  })
+
+  if(res.success) {
+    navigateTo("/settings/emailaccounts")
+  }
+}
+
+const saveAccount = async () => {
+  const res = await useNuxtApp().$api(`/api/email/accounts/${route.params.id}`, {
+    method: "POST",
+    body: itemInfo.value,
+  })
+
+  if(res.success) {
+    navigateTo("/settings/emailaccounts")
+  }
+
+}
+
+</script>
+
+<template>
+  <UDashboardNavbar :title="`E-Mail Konto ${mode === 'create' ? 'erstellen' : 'bearbeiten'}`">
+    <template #right>
+      <UButton
+        v-if="mode === 'create'"
+        @click="createAccount"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+        v-if="mode === 'edit'"
+        @click="saveAccount"
+      >
+        Speichern
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+  <UForm class="w-2/3 mx-auto mt-5">
+    <UFormGroup
+      label="E-Mail Adresse"
+    >
+      <UInput
+        v-model="itemInfo.email"
+      />
+    </UFormGroup>
+
+    <UFormGroup
+        label="Passwort"
+    >
+      <UInput
+          type="password"
+          v-model="itemInfo.password"
+          placeholder="********"
+      />
+    </UFormGroup>
+
+    <UDivider> IMAP </UDivider>
+
+    <UFormGroup
+        label="IMAP Host"
+    >
+      <UInput
+          v-model="itemInfo.imap_host"
+      />
+    </UFormGroup>
+
+    <UFormGroup
+        label="IMAP Port"
+    >
+      <UInput
+          type="number"
+          v-model="itemInfo.imap_port"
+      />
+    </UFormGroup>
+
+    <UFormGroup
+        label="IMAP SSL"
+    >
+      <UToggle
+          v-model="itemInfo.imap_ssl"
+      />
+    </UFormGroup>
+
+    <UDivider> SMTP </UDivider>
+
+    <UFormGroup
+        label="SMTP Host"
+    >
+      <UInput
+          v-model="itemInfo.smtp_host"
+      />
+    </UFormGroup>
+
+    <UFormGroup
+        label="SMTP Port"
+    >
+      <UInput
+          type="number"
+          v-model="itemInfo.smtp_port"
+      />
+    </UFormGroup>
+
+    <UFormGroup
+        label="SMTP SSL"
+    >
+      <UToggle
+          v-model="itemInfo.smtp_ssl"
+      />
+    </UFormGroup>
+
+  </UForm>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/pages/settings/emailAccounts.vue b/pages/settings/emailaccounts/index.vue
similarity index 69%
rename from pages/settings/emailAccounts.vue
rename to pages/settings/emailaccounts/index.vue
index 1d68a7d..98db27a 100644
--- a/pages/settings/emailAccounts.vue
+++ b/pages/settings/emailaccounts/index.vue
@@ -9,28 +9,13 @@ 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","*")
+  items.value = await useNuxtApp().$api("/api/email/accounts")
 }
 
 const createAccount = async () => {
   showEmailAddressModal.value = false
-
-  const {data,error} = await supabase.functions.invoke('emailengine_authenticate',{
-    body: {
-      emailAddress: createEMailAddress.value,
-      accountType: createEMailType.value,
-      profile: profileStore.activeProfile.id
-    }
-  })
-
-  console.log(error)
-  console.log(data)
-
-  window.open(data.url, '_blank').focus();
 }
 
 setupPage()
@@ -38,16 +23,8 @@ setupPage()
 
 const templateColumns = [
   {
-    key: "emailAddress",
-    label: "Adresse:"
-  },
-  {
-    key: "profiles",
-    label: "Bneutzer"
-  },
-  {
-    key: "mailboxes",
-    label: "Ordner"
+    key: "email",
+    label: "E-Mail Adresse:"
   },
 ]
 const selectedColumns = ref(templateColumns)
@@ -98,7 +75,7 @@ const columns = computed(() => templateColumns.filter((column) => selectedColumn
       <template #right>
         <UTooltip title="In der Beta nicht verfügbar">
           <UButton
-              @click="showEmailAddressModal = true"
+              @click="navigateTo('/settings/emailaccounts/create')"
           >
             + E-Mail Konto
           </UButton>
@@ -110,15 +87,10 @@ const columns = computed(() => templateColumns.filter((column) => selectedColumn
     :rows="items"
     :columns="columns"
     class="w-full"
+    @select="(i) => navigateTo(`/settings/emailaccounts/edit/${i.id}`)"
     :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
     :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine E-Mail Konten anzuzeigen' }"
   >
-    <template #profiles-data="{row}">
-      {{row.profiles}}
-    </template>
-    <template #mailboxes-data="{row}">
-      {{row.mailboxes}}
-    </template>
   </UTable>
 </template>