diff --git a/frontend/src/components/Settings/EmailAccountCard.vue b/frontend/src/components/Settings/EmailAccountCard.vue
new file mode 100644
index 00000000..88d6bc97
--- /dev/null
+++ b/frontend/src/components/Settings/EmailAccountCard.vue
@@ -0,0 +1,50 @@
+<template>
+  <div
+    class="flex items-center justify-between p-1 py-3 border-b border-gray-200 dark:border-gray-700 cursor-pointer"
+  >
+    <!-- avatar and name -->
+    <div class="flex items-center justify-between gap-2">
+      <EmailProviderIcon :logo="emailIcon[emailAccount.service]" />
+      <div>
+        <p class="text-sm font-semibold text-ink-gray-9">
+          {{ emailAccount.email_account_name }}
+        </p>
+        <div class="text-sm text-gray-500">{{ emailAccount.email_id }}</div>
+      </div>
+    </div>
+    <div>
+      <Badge variant="subtle" :label="badgeTitleColor" :theme="gray" />
+    </div>
+    <!-- email id -->
+  </div>
+</template>
+
+<script setup>
+import { emailIcon } from './emailConfig'
+import EmailProviderIcon from './EmailProviderIcon.vue'
+import { computed } from 'vue'
+
+const props = defineProps({
+  emailAccount: {
+    type: Object,
+    required: true,
+  },
+})
+
+const badgeTitleColor = computed(() => {
+  if (
+    props.emailAccount.default_incoming &&
+    props.emailAccount.default_outgoing
+  ) {
+    return 'Default Sending and Inbox'
+  } else if (props.emailAccount.default_incoming) {
+    return 'Default Inbox'
+  } else if (props.emailAccount.default_outgoing) {
+    return 'Default Sending'
+  } else {
+    return 'Inbox'
+  }
+})
+</script>
+
+<style scoped></style>
diff --git a/frontend/src/components/Settings/EmailAccountList.vue b/frontend/src/components/Settings/EmailAccountList.vue
new file mode 100644
index 00000000..a841ebe2
--- /dev/null
+++ b/frontend/src/components/Settings/EmailAccountList.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <!-- header -->
+    <div class="flex items-center justify-between text-ink-gray-9">
+      <h2 class="flex gap-2 text-xl font-semibold leading-none h-5">
+        Email Accounts
+      </h2>
+      <Button
+        label="Add Account"
+        theme="gray"
+        variant="solid"
+        @click="emit('update:step', 'email-add')"
+        class="mr-8"
+      >
+        <template #prefix>
+          <LucidePlus class="w-4 h-4" />
+        </template>
+      </Button>
+    </div>
+    <!-- list accounts -->
+    <div
+      v-if="!emailAccounts.loading && Boolean(emailAccounts.data?.length)"
+      class="mt-4"
+    >
+      <div v-for="emailAccount in emailAccounts.data" :key="emailAccount.name">
+        <EmailAccountCard
+          :emailAccount="emailAccount"
+          @click="emit('update:step', 'email-edit', emailAccount)"
+        />
+      </div>
+    </div>
+    <!-- fallback if no email accounts -->
+    <div v-else class="flex items-center justify-center h-64 text-gray-500">
+      Please add an email account to continue.
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { createListResource } from 'frappe-ui'
+import EmailAccountCard from './EmailAccountCard.vue'
+
+const emit = defineEmits(['update:step'])
+
+const emailAccounts = createListResource({
+  doctype: 'Email Account',
+  cache: true,
+  fields: ['*'],
+  filters: {
+    email_id: ['Not Like', '%example%'],
+  },
+  pageLength: 10,
+  auto: true,
+  onSuccess: (accounts) => {
+    // convert 0 to false to handle boolean fields
+    accounts.forEach((account) => {
+      account.enable_incoming = Boolean(account.enable_incoming)
+      account.enable_outgoing = Boolean(account.enable_outgoing)
+      account.default_incoming = Boolean(account.default_incoming)
+      account.default_outgoing = Boolean(account.default_outgoing)
+    })
+  },
+})
+</script>
diff --git a/frontend/src/components/Settings/EmailAdd.vue b/frontend/src/components/Settings/EmailAdd.vue
new file mode 100644
index 00000000..07ab5f14
--- /dev/null
+++ b/frontend/src/components/Settings/EmailAdd.vue
@@ -0,0 +1,161 @@
+<template>
+  <div class="flex flex-col h-full gap-4">
+    <!-- title and desc -->
+    <div role="heading" aria-level="1" class="flex flex-col gap-1">
+      <h2 class="text-xl font-semibold text-ink-gray-9">Setup Email</h2>
+      <p class="text-sm text-gray-600">
+        Choose the email service provider you want to configure.
+      </p>
+    </div>
+    <!-- email service provider selection -->
+    <div class="flex flex-wrap items-center">
+      <div
+        v-for="s in services"
+        :key="s.name"
+        class="flex flex-col items-center gap-1 mt-4 w-[70px]"
+        @click="handleSelect(s)"
+      >
+        <EmailProviderIcon
+          :service-name="s.name"
+          :logo="s.icon"
+          :selected="selectedService?.name === s?.name"
+        />
+      </div>
+    </div>
+    <div v-if="selectedService" class="flex flex-col gap-4">
+      <!-- email service provider info -->
+      <div
+        class="flex items-center gap-2 p-2 rounded-md ring-1 ring-gray-400 dark:ring-gray-700 text-gray-700 dark:text-gray-500"
+      >
+        <CircleAlert class="w-5 h-6 w-min-5 w-max-5 min-h-5 max-w-5" />
+        <div class="text-xs text-wrap">
+          {{ selectedService.info }}
+          <a :href="selectedService.link" target="_blank" class="underline"
+            >here</a
+          >.
+        </div>
+      </div>
+      <!-- service provider fields -->
+      <div class="flex flex-col gap-4">
+        <div class="grid grid-cols-1 gap-4">
+          <div
+            v-for="field in fields"
+            :key="field.name"
+            class="flex flex-col gap-1"
+          >
+            <FormControl
+              v-model="state[field.name]"
+              :label="field.label"
+              :name="field.name"
+              :type="field.type"
+              :placeholder="field.placeholder"
+            />
+          </div>
+        </div>
+        <div class="grid grid-cols-2 gap-4">
+          <div
+            v-for="field in incomingOutgoingFields"
+            :key="field.name"
+            class="flex flex-col gap-1"
+          >
+            <FormControl
+              v-model="state[field.name]"
+              :label="field.label"
+              :name="field.name"
+              :type="field.type"
+            />
+            <p class="text-gray-500 text-p-sm">{{ field.description }}</p>
+          </div>
+        </div>
+        <ErrorMessage v-if="error" class="ml-1" :message="error" />
+      </div>
+    </div>
+    <!-- action button -->
+    <div v-if="selectedService" class="flex justify-between mt-auto">
+      <Button
+        label="Back"
+        theme="gray"
+        variant="outline"
+        :disabled="addEmailRes.loading"
+        @click="emit('update:step', 'email-list')"
+      />
+      <Button
+        label="Create"
+        variant="solid"
+        :loading="addEmailRes.loading"
+        @click="createEmailAccount"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, reactive, ref } from 'vue'
+import { createResource } from 'frappe-ui'
+import CircleAlert from '~icons/lucide/circle-alert'
+import { createToast } from '@/utils'
+import {
+  customProviderFields,
+  popularProviderFields,
+  services,
+  validateInputs,
+  incomingOutgoingFields,
+} from './emailConfig'
+import EmailProviderIcon from './EmailProviderIcon.vue'
+
+const emit = defineEmits()
+
+const state = reactive({
+  service: '',
+  email_account_name: '',
+  email_id: '',
+  password: '',
+  api_key: '',
+  api_secret: '',
+  frappe_mail_site: '',
+  enable_incoming: false,
+  enable_outgoing: false,
+  default_incoming: false,
+  default_outgoing: false,
+})
+
+const selectedService = ref(null)
+const fields = computed(() =>
+  selectedService.value.custom ? customProviderFields : popularProviderFields,
+)
+
+function handleSelect(service) {
+  selectedService.value = service
+  state.service = service.name
+}
+
+const addEmailRes = createResource({
+  url: 'crm.api.settings.create_email_account',
+  makeParams: (val) => {
+    return {
+      ...val,
+    }
+  },
+  onSuccess: () => {
+    createToast({
+      title: 'Email account created successfully',
+      icon: 'check',
+      iconClasses: 'text-green-600',
+    })
+    emit('update:step', 'email-list')
+  },
+  onError: () => {
+    error.value = 'Failed to create email account, Invalid credentials'
+  },
+})
+
+const error = ref()
+function createEmailAccount() {
+  error.value = validateInputs(state, selectedService.value.custom)
+  if (error.value) return
+
+  addEmailRes.submit({ data: state })
+}
+</script>
+
+<style scoped></style>
diff --git a/frontend/src/components/Settings/EmailEdit.vue b/frontend/src/components/Settings/EmailEdit.vue
new file mode 100644
index 00000000..e39b5f66
--- /dev/null
+++ b/frontend/src/components/Settings/EmailEdit.vue
@@ -0,0 +1,220 @@
+<template>
+  <div class="flex flex-col h-full gap-4">
+    <!-- title and desc -->
+    <div role="heading" aria-level="1" class="flex justify-between gap-1">
+      <h2 class="text-xl font-semibold text-ink-gray-9">Edit Email</h2>
+    </div>
+    <div class="w-fit">
+      <EmailProviderIcon
+        :logo="emailIcon[accountData.service]"
+        :service-name="accountData.service"
+      />
+    </div>
+    <!-- banner for setting up email account -->
+    <div
+      class="flex items-center gap-2 p-2 rounded-md ring-1 ring-gray-400 dark:ring-gray-700"
+    >
+      <CircleAlert
+        class="size-6 text-gray-500 w-min-5 w-max-5 min-h-5 max-w-5"
+      />
+      <div class="text-xs text-gray-700 dark:text-gray-500 text-wrap">
+        {{ info.description }}
+        <a :href="info.link" target="_blank" class="underline">here</a>
+        .
+      </div>
+    </div>
+    <!-- fields -->
+    <div class="flex flex-col gap-4">
+      <div class="grid grid-cols-1 gap-4">
+        <div
+          v-for="field in fields"
+          :key="field.name"
+          class="flex flex-col gap-1"
+        >
+          <FormControl
+            v-model="state[field.name]"
+            :label="field.label"
+            :name="field.name"
+            :type="field.type"
+            :placeholder="field.placeholder"
+          />
+        </div>
+      </div>
+      <div class="grid grid-cols-2 gap-4">
+        <div
+          v-for="field in incomingOutgoingFields"
+          :key="field.name"
+          class="flex flex-col gap-1"
+        >
+          <FormControl
+            v-model="state[field.name]"
+            :label="field.label"
+            :name="field.name"
+            :type="field.type"
+          />
+          <p class="text-gray-500 text-p-sm">{{ field.description }}</p>
+        </div>
+      </div>
+      <ErrorMessage v-if="error" class="ml-1" :message="error" />
+    </div>
+    <!-- action buttons -->
+    <div class="flex justify-between mt-auto">
+      <Button
+        label="Back"
+        theme="gray"
+        variant="outline"
+        :disabled="loading"
+        @click="emit('update:step', 'email-list')"
+      />
+      <Button
+        label="Update Account"
+        variant="solid"
+        @click="updateAccount"
+        :loading="loading"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, reactive, ref } from 'vue'
+import { call } from 'frappe-ui'
+import EmailProviderIcon from './EmailProviderIcon.vue'
+import {
+  emailIcon,
+  services,
+  popularProviderFields,
+  customProviderFields,
+  validateInputs,
+  incomingOutgoingFields,
+} from './emailConfig'
+import { createToast } from '@/utils'
+import CircleAlert from '~icons/lucide/circle-alert'
+
+const props = defineProps({
+  accountData: null,
+})
+
+const emit = defineEmits()
+
+const state = reactive({
+  email_account_name: props.accountData.email_account_name || '',
+  service: props.accountData.service || '',
+  email_id: props.accountData.email_id || '',
+  api_key: props.accountData?.api_key || null,
+  api_secret: props.accountData?.api_secret || null,
+  password: props.accountData?.password || null,
+  frappe_mail_site: props.accountData?.frappe_mail_site || '',
+  enable_incoming: props.accountData.enable_incoming || false,
+  enable_outgoing: props.accountData.enable_outgoing || false,
+  default_outgoing: props.accountData.default_outgoing || false,
+  default_incoming: props.accountData.default_incoming || false,
+})
+
+const info = {
+  description: 'To know more about setting up email accounts, click',
+  link: 'https://docs.erpnext.com/docs/user/manual/en/email-account',
+}
+
+const isCustomService = computed(() => {
+  return services.find((s) => s.name === props.accountData.service).custom
+})
+
+const fields = computed(() => {
+  if (isCustomService.value) {
+    return customProviderFields
+  }
+  return popularProviderFields
+})
+
+const error = ref()
+const loading = ref(false)
+async function updateAccount() {
+  error.value = validateInputs(state, isCustomService.value)
+  if (error.value) return
+  const old = { ...props.accountData }
+  const updatedEmailAccount = { ...state }
+
+  const nameChanged =
+    old.email_account_name !== updatedEmailAccount.email_account_name
+  delete old.email_account_name
+  delete updatedEmailAccount.email_account_name
+
+  const otherFieldsChanged = isDirty.value
+  const values = updatedEmailAccount
+
+  if (!nameChanged && !otherFieldsChanged) {
+    createToast({
+      title: 'No changes made',
+      icon: 'info',
+      iconClasses: 'text-blue-600',
+    })
+    return
+  }
+
+  if (nameChanged) {
+    try {
+      loading.value = true
+      await callRenameDoc()
+      succesHandler()
+    } catch (err) {
+      errorHandler()
+    }
+  }
+  if (otherFieldsChanged) {
+    try {
+      loading.value = true
+      await callSetValue(values)
+      succesHandler()
+    } catch (err) {
+      errorHandler()
+    }
+  }
+}
+
+const isDirty = computed(() => {
+  return (
+    state.email_id !== props.accountData.email_id ||
+    state.api_key !== props.accountData.api_key ||
+    state.api_secret !== props.accountData.api_secret ||
+    state.password !== props.accountData.password ||
+    state.enable_incoming !== props.accountData.enable_incoming ||
+    state.enable_outgoing !== props.accountData.enable_outgoing ||
+    state.default_outgoing !== props.accountData.default_outgoing ||
+    state.default_incoming !== props.accountData.default_incoming ||
+    state.frappe_mail_site !== props.accountData.frappe_mail_site
+  )
+})
+
+async function callRenameDoc() {
+  const d = await call('frappe.client.rename_doc', {
+    doctype: 'Email Account',
+    old_name: props.accountData.email_account_name,
+    new_name: state.email_account_name,
+  })
+  return d
+}
+
+async function callSetValue(values) {
+  const d = await call('frappe.client.set_value', {
+    doctype: 'Email Account',
+    name: state.email_account_name,
+    fieldname: values,
+  })
+  return d.name
+}
+
+function succesHandler() {
+  emit('update:step', 'email-list')
+  createToast({
+    title: 'Email account updated successfully',
+    icon: 'check',
+    iconClasses: 'text-green-600',
+  })
+}
+
+function errorHandler() {
+  loading.value = false
+  error.value = 'Failed to update email account, Invalid credentials'
+}
+</script>
diff --git a/frontend/src/components/Settings/EmailProviderIcon.vue b/frontend/src/components/Settings/EmailProviderIcon.vue
new file mode 100644
index 00000000..3d902bf9
--- /dev/null
+++ b/frontend/src/components/Settings/EmailProviderIcon.vue
@@ -0,0 +1,33 @@
+<template>
+  <div
+    class="flex items-center justify-center w-8 h-8 bg-gray-100 cursor-pointer rounded-xl hover:bg-gray-200"
+    :class="{ 'ring-2 ring-gray-500 dark:ring-gray-100': selected }"
+  >
+    <img :src="logo" class="w-4 h-4" />
+  </div>
+  <p
+    v-if="serviceName"
+    class="text-xs text-center text-gray-700 dark:text-gray-500 mt-2"
+  >
+    {{ serviceName }}
+  </p>
+</template>
+
+<script setup>
+defineProps({
+  logo: {
+    type: String,
+    required: true,
+  },
+  serviceName: {
+    type: String,
+    default: '',
+  },
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>
+
+<style scoped></style>