diff --git a/crm/api/settings.py b/crm/api/settings.py
new file mode 100644
index 00000000..b4756371
--- /dev/null
+++ b/crm/api/settings.py
@@ -0,0 +1,99 @@
+import frappe
+
+
+@frappe.whitelist()
+def create_email_account(data):
+	service = data.get("service")
+	service_config = email_service_config.get(service)
+	if not service_config:
+		return "Service not supported"
+
+	try:
+		email_doc = frappe.get_doc(
+			{
+				"doctype": "Email Account",
+				"email_id": data.get("email_id"),
+				"email_account_name": data.get("email_account_name"),
+				"service": service,
+				"enable_incoming": data.get("enable_incoming"),
+				"enable_outgoing": data.get("enable_outgoing"),
+				"default_incoming": data.get("default_incoming"),
+				"default_outgoing": data.get("default_outgoing"),
+				"email_sync_option": "ALL",
+				"initial_sync_count": 100,
+				"create_contact": 1,
+				"track_email_status": 1,
+				"use_tls": 1,
+				"use_imap": 1,
+				"smtp_port": 587,
+				**service_config,
+			}
+		)
+		if service == "Frappe Mail":
+			email_doc.api_key = data.get("api_key")
+			email_doc.api_secret = data.get("api_secret")
+			email_doc.frappe_mail_site = data.get("frappe_mail_site")
+			email_doc.append_to = "CRM Lead"
+		else:
+			email_doc.append("imap_folder", {"append_to": "CRM Lead", "folder_name": "INBOX"})
+			email_doc.password = data.get("password")
+			# validate whether the credentials are correct
+			email_doc.get_incoming_server()
+
+		# if correct credentials, save the email account
+		email_doc.save()
+	except Exception as e:
+		frappe.throw(str(e))
+
+
+email_service_config = {
+	"Frappe Mail": {
+		"domain": None,
+		"password": None,
+		"awaiting_password": 0,
+		"ascii_encode_password": 0,
+		"login_id_is_different": 0,
+		"login_id": None,
+		"use_imap": 0,
+		"use_ssl": 0,
+		"validate_ssl_certificate": 0,
+		"use_starttls": 0,
+		"email_server": None,
+		"incoming_port": 0,
+		"always_use_account_email_id_as_sender": 1,
+		"use_tls": 0,
+		"use_ssl_for_outgoing": 0,
+		"smtp_server": None,
+		"smtp_port": None,
+		"no_smtp_authentication": 0,
+	},
+	"GMail": {
+		"email_server": "imap.gmail.com",
+		"use_ssl": 1,
+		"smtp_server": "smtp.gmail.com",
+	},
+	"Outlook": {
+		"email_server": "imap-mail.outlook.com",
+		"use_ssl": 1,
+		"smtp_server": "smtp-mail.outlook.com",
+	},
+	"Sendgrid": {
+		"smtp_server": "smtp.sendgrid.net",
+		"smtp_port": 587,
+	},
+	"SparkPost": {
+		"smtp_server": "smtp.sparkpostmail.com",
+	},
+	"Yahoo": {
+		"email_server": "imap.mail.yahoo.com",
+		"use_ssl": 1,
+		"smtp_server": "smtp.mail.yahoo.com",
+		"smtp_port": 587,
+	},
+	"Yandex": {
+		"email_server": "imap.yandex.com",
+		"use_ssl": 1,
+		"smtp_server": "smtp.yandex.com",
+		"smtp_port": 587,
+	},
+}
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 0e776395..82afdb19 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -78,11 +78,17 @@ declare module 'vue' {
     EditIcon: typeof import('./src/components/Icons/EditIcon.vue')['default']
     EditValueModal: typeof import('./src/components/Modals/EditValueModal.vue')['default']
     Email2Icon: typeof import('./src/components/Icons/Email2Icon.vue')['default']
+    EmailAccountCard: typeof import('./src/components/Settings/EmailAccountCard.vue')['default']
+    EmailAccountList: typeof import('./src/components/Settings/EmailAccountList.vue')['default']
+    EmailAdd: typeof import('./src/components/Settings/EmailAdd.vue')['default']
     EmailArea: typeof import('./src/components/Activities/EmailArea.vue')['default']
     EmailAtIcon: typeof import('./src/components/Icons/EmailAtIcon.vue')['default']
+    EmailConfig: typeof import('./src/components/Settings/EmailConfig.vue')['default']
     EmailContent: typeof import('./src/components/Activities/EmailContent.vue')['default']
+    EmailEdit: typeof import('./src/components/Settings/EmailEdit.vue')['default']
     EmailEditor: typeof import('./src/components/EmailEditor.vue')['default']
     EmailIcon: typeof import('./src/components/Icons/EmailIcon.vue')['default']
+    EmailProviderIcon: typeof import('./src/components/Settings/EmailProviderIcon.vue')['default']
     EmailTemplateModal: typeof import('./src/components/Modals/EmailTemplateModal.vue')['default']
     EmailTemplateSelectorModal: typeof import('./src/components/Modals/EmailTemplateSelectorModal.vue')['default']
     EmailTemplatesListView: typeof import('./src/components/ListViews/EmailTemplatesListView.vue')['default']
diff --git a/frontend/public/images/frappe-mail.svg b/frontend/public/images/frappe-mail.svg
new file mode 100644
index 00000000..822f56e1
--- /dev/null
+++ b/frontend/public/images/frappe-mail.svg
@@ -0,0 +1,4 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5714 44L31.4286 44C38.3716 44 44 38.3716 44 31.4286L44 12.5714C44 5.62842 38.3716 0 31.4286 0L12.5714 0C5.62842 0 0 5.62842 0 12.5714L0 31.4286C0 38.3716 5.62842 44 12.5714 44Z" fill="#0466DC"/>
+<path d="M9.42859 12.5715V14.8972L12.5714 17.4587L18.5743 22.3458C19.5329 23.1315 20.7586 23.5715 22 23.5715C23.2414 23.5715 24.4672 23.1315 25.4257 22.3458L31.4286 17.443V28.2701H12.5714V21.5287L9.42859 18.9672V27.4844C9.42859 29.653 11.1886 31.413 13.3572 31.413H30.6429C32.8115 31.413 34.5715 29.653 34.5715 27.4844V12.5715H9.42859ZM23.4457 19.9101C22.6286 20.5701 21.3714 20.5701 20.57 19.9101L15.4157 15.7144H28.6L23.4457 19.9101Z" fill="white"/>
+</svg>
diff --git a/frontend/public/images/gmail.png b/frontend/public/images/gmail.png
new file mode 100644
index 00000000..22e45fb5
Binary files /dev/null and b/frontend/public/images/gmail.png differ
diff --git a/frontend/public/images/outlook.png b/frontend/public/images/outlook.png
new file mode 100644
index 00000000..ded0d6b3
Binary files /dev/null and b/frontend/public/images/outlook.png differ
diff --git a/frontend/public/images/sendgrid.png b/frontend/public/images/sendgrid.png
new file mode 100644
index 00000000..eb1b82b4
Binary files /dev/null and b/frontend/public/images/sendgrid.png differ
diff --git a/frontend/public/images/sparkpost.webp b/frontend/public/images/sparkpost.webp
new file mode 100644
index 00000000..be586c3f
Binary files /dev/null and b/frontend/public/images/sparkpost.webp differ
diff --git a/frontend/public/images/yahoo.png b/frontend/public/images/yahoo.png
new file mode 100644
index 00000000..24357ecd
Binary files /dev/null and b/frontend/public/images/yahoo.png differ
diff --git a/frontend/public/images/yandex.png b/frontend/public/images/yandex.png
new file mode 100644
index 00000000..eb900a7a
Binary files /dev/null and b/frontend/public/images/yandex.png differ
diff --git a/frontend/src/components/Settings/EmailAccountCard.vue b/frontend/src/components/Settings/EmailAccountCard.vue
new file mode 100644
index 00000000..09fa11c2
--- /dev/null
+++ b/frontend/src/components/Settings/EmailAccountCard.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="flex items-center justify-between p-1 border-b border-gray-200 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-gray-700">
+          {{ emailAccount.email_account_name }}
+        </p>
+        <div class="text-sm text-gray-500">{{ emailAccount.email_id }}</div>
+      </div>
+    </div>
+    <div>
+      <Badge variant="subtle" :label="badgeTitleColor[0]" :theme="badgeTitleColor[1]" />
+    </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
+  ) {
+    const color =
+      props.emailAccount.enable_incoming && props.emailAccount.enable_outgoing
+        ? "blue"
+        : "gray";
+    return ["Default Sending and Inbox", color];
+  } else if (props.emailAccount.default_incoming) {
+    const color = props.emailAccount.enable_incoming ? "blue" : "gray";
+    return ["Default Inbox", color];
+  } else if (props.emailAccount.default_outgoing) {
+    const color = props.emailAccount.enable_outgoing ? "blue" : "gray";
+    return ["Default Sending", color];
+  } else {
+    const color = props.emailAccount.enable_incoming ? "blue" : "gray";
+    return ["Inbox", color];
+  }
+});
+</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..786a9e09
--- /dev/null
+++ b/frontend/src/components/Settings/EmailAccountList.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <!-- header -->
+    <div class="flex items-center justify-between">
+      <h1 class="text-xl font-semibold">Email Accounts</h1>
+      <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..bc5e21af
--- /dev/null
+++ b/frontend/src/components/Settings/EmailAdd.vue
@@ -0,0 +1,122 @@
+<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">
+      <h5 class="text-xl font-semibold">Setup Email</h5>
+      <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 gap-4">
+      <div v-for="s in services" :key="s.name" class="flex flex-col items-center gap-1 mt-4 min-w-3"
+        @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-200">
+        <CircleAlert class="w-5 h-6 text-blue-500 w-min-5 w-max-5 min-h-5 max-w-5" />
+        <div class="text-xs text-gray-700 text-wrap">
+          {{ selectedService.info }}
+          <a :href="selectedService.link" target="_blank" class="text-blue-500 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/EmailConfig.vue b/frontend/src/components/Settings/EmailConfig.vue
new file mode 100644
index 00000000..3d02cacf
--- /dev/null
+++ b/frontend/src/components/Settings/EmailConfig.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="flex-1 p-8">
+    <div v-if="step === 'email-add'" class="h-full">
+      <EmailAdd @update:step="updateStep" />
+    </div>
+    <div v-else-if="step === 'email-list'" class="h-full">
+      <EmailAccountList @update:step="updateStep" />
+    </div>
+    <div v-else-if="step === 'email-edit'" class="h-full">
+      <EmailEdit :account-data="accountData" @update:step="updateStep" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import EmailAdd from "./EmailAdd.vue";
+import EmailAccountList from "./EmailAccountList.vue";
+import EmailEdit from "./EmailEdit.vue";
+
+const step = ref("email-list");
+const accountData = ref(null);
+function updateStep(newStep, data) {
+  step.value = newStep;
+  accountData.value = data;
+}
+</script>
diff --git a/frontend/src/components/Settings/EmailEdit.vue b/frontend/src/components/Settings/EmailEdit.vue
new file mode 100644
index 00000000..73b29e1b
--- /dev/null
+++ b/frontend/src/components/Settings/EmailEdit.vue
@@ -0,0 +1,186 @@
+<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">
+      <h5 class="text-lg font-semibold">Edit Email</h5>
+    </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-200">
+      <CircleAlert class="w-5 h-6 text-blue-500 w-min-5 w-max-5 min-h-5 max-w-5" />
+      <div class="text-xs text-gray-700 text-wrap">
+        {{ info.description }}
+        <a :href="info.link" target="_blank" class="text-blue-500 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..a5078320
--- /dev/null
+++ b/frontend/src/components/Settings/EmailProviderIcon.vue
@@ -0,0 +1,29 @@
+<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-blue-500': selected }">
+    <img :src="logo" class="w-4 h-4" />
+  </div>
+  <p v-if="serviceName" class="text-xs text-center text-gray-700">
+    {{ serviceName }}
+  </p>
+</template>
+
+<script setup>
+
+defineProps({
+  logo: {
+    type: String,
+    required: true
+  },
+  serviceName: {
+    type: String,
+    default: ''
+  },
+  selected: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<style scoped></style>
diff --git a/frontend/src/components/Settings/Settings.vue b/frontend/src/components/Settings/Settings.vue
index 5eb093cc..e0215463 100644
--- a/frontend/src/components/Settings/Settings.vue
+++ b/frontend/src/components/Settings/Settings.vue
@@ -6,8 +6,8 @@
   >
     <template #body>
       <div class="flex h-[calc(100vh_-_8rem)]">
-        <div class="flex w-52 shrink-0 flex-col bg-surface-gray-2 p-2">
-          <h1 class="mb-3 px-2 pt-2 text-lg font-semibold text-ink-gray-9">
+        <div class="flex flex-col p-2 w-52 shrink-0 bg-surface-gray-2">
+          <h1 class="px-2 pt-2 mb-3 text-lg font-semibold text-ink-gray-9">
             {{ __('Settings') }}
           </h1>
           <div v-for="tab in tabs">
@@ -34,7 +34,7 @@
           </div>
         </div>
         <div
-          class="flex relative flex-1 flex-col overflow-y-auto bg-surface-modal"
+          class="relative flex flex-col flex-1 overflow-y-auto bg-surface-modal"
         >
           <Button
             class="absolute right-5 top-5"
@@ -53,12 +53,14 @@ import WhatsAppIcon from '@/components/Icons/WhatsAppIcon.vue'
 import ERPNextIcon from '@/components/Icons/ERPNextIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import InviteIcon from '@/components/Icons/InviteIcon.vue'
+import Email2Icon from '@/components/Icons/Email2Icon.vue'
 import GeneralSettings from '@/components/Settings/GeneralSettings.vue'
 import InviteMemberPage from '@/components/Settings/InviteMemberPage.vue'
 import ProfileSettings from '@/components/Settings/ProfileSettings.vue'
 import WhatsAppSettings from '@/components/Settings/WhatsAppSettings.vue'
 import ERPNextSettings from '@/components/Settings/ERPNextSettings.vue'
 import TelephonySettings from '@/components/Settings/TelephonySettings.vue'
+import EmailConfig from '@/components/Settings/EmailConfig.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
 import { usersStore } from '@/stores/users'
 import {
@@ -101,6 +103,12 @@ const tabs = computed(() => {
           component: markRaw(InviteMemberPage),
           condition: () => isManager(),
         },
+        {
+          label: __('Email Accounts'),
+          icon: Email2Icon,
+          component: markRaw(EmailConfig),
+          condition: () => isManager(),
+        },
       ],
     },
     {
diff --git a/frontend/src/components/Settings/emailConfig.ts b/frontend/src/components/Settings/emailConfig.ts
new file mode 100644
index 00000000..c078ee13
--- /dev/null
+++ b/frontend/src/components/Settings/emailConfig.ts
@@ -0,0 +1,179 @@
+import { validateEmail } from '../../utils'
+
+const LogoGmail = '/images/gmail.png'
+const LogoOutlook = '/images/outlook.png'
+const LogoSendgrid = '/images/sendgrid.png'
+const LogoSparkpost = '/images/sparkpost.webp'
+const LogoYahoo = '/images/yahoo.png'
+const LogoYandex = '/images/yandex.png'
+const LogoFrappeMail = '/images/frappe-mail.svg'
+
+const fixedFields = [
+  {
+    label: 'Account Name',
+    name: 'email_account_name',
+    type: 'text',
+    placeholder: 'Support / Sales',
+  },
+  {
+    label: 'Email ID',
+    name: 'email_id',
+    type: 'email',
+    placeholder: 'johndoe@example.com',
+  },
+]
+
+export const incomingOutgoingFields = [
+  {
+    label: 'Enable Incoming',
+    name: 'enable_incoming',
+    type: 'checkbox',
+    description:
+      'If enabled, tickets can be created from the incoming emails on this account.',
+  },
+  {
+    label: 'Enable Outgoing',
+    name: 'enable_outgoing',
+    type: 'checkbox',
+    description: 'If enabled, outgoing emails can be sent from this account.',
+  },
+  {
+    label: 'Default Incoming',
+    name: 'default_incoming',
+    type: 'checkbox',
+    description:
+      'If enabled, all replies to your company (eg: replies@yourcomany.com) will come to this account. Note: Only one account can be default incoming.',
+  },
+  {
+    label: 'Default Outgoing',
+    name: 'default_outgoing',
+    type: 'checkbox',
+    description:
+      'If enabled, all outgoing emails will be sent from this account. Note: Only one account can be default outgoing.',
+  },
+]
+
+export const popularProviderFields = [
+  ...fixedFields,
+  {
+    label: 'Password',
+    name: 'password',
+    type: 'password',
+    placeholder: '********',
+  },
+]
+
+export const customProviderFields = [
+  ...fixedFields,
+  {
+    label: 'Frappe Mail Site',
+    name: 'frappe_mail_site',
+    type: 'text',
+    placeholder: 'https://frappemail.com',
+  },
+  {
+    label: 'API Key',
+    name: 'api_key',
+    type: 'text',
+    placeholder: '********',
+  },
+  {
+    label: 'API Secret',
+    name: 'api_secret',
+    type: 'password',
+    placeholder: '********',
+  },
+]
+
+export const services = [
+  {
+    name: 'GMail',
+    icon: LogoGmail,
+    info: `Setting up GMail requires you to enable two factor authentication
+		  and app specific passwords. Read more`,
+    link: 'https://support.google.com/accounts/answer/185833',
+    custom: false,
+  },
+  {
+    name: 'Outlook',
+    icon: LogoOutlook,
+    info: `Setting up Outlook requires you to enable two factor authentication
+		  and app specific passwords. Read more`,
+    link: 'https://support.microsoft.com/en-us/account-billing/how-to-get-and-use-app-passwords-5896ed9b-4263-e681-128a-a6f2979a7944',
+    custom: false,
+  },
+  {
+    name: 'Sendgrid',
+    icon: LogoSendgrid,
+    info: `Setting up Sendgrid requires you to enable two factor authentication
+		  and app specific passwords. Read more `,
+    link: 'https://sendgrid.com/docs/ui/account-and-settings/two-factor-authentication/',
+    custom: false,
+  },
+  {
+    name: 'SparkPost',
+    icon: LogoSparkpost,
+    info: `Setting up SparkPost requires you to enable two factor authentication
+		  and app specific passwords. Read more `,
+    link: 'https://support.sparkpost.com/docs/my-account-and-profile/enabling-two-factor-authentication',
+    custom: false,
+  },
+  {
+    name: 'Yahoo',
+    icon: LogoYahoo,
+    info: `Setting up Yahoo requires you to enable two factor authentication
+		  and app specific passwords. Read more `,
+    link: 'https://help.yahoo.com/kb/SLN15241.html',
+    custom: false,
+  },
+  {
+    name: 'Yandex',
+    icon: LogoYandex,
+    info: `Setting up Yandex requires you to enable two factor authentication
+		  and app specific passwords. Read more `,
+    link: 'https://yandex.com/support/id/authorization/app-passwords.html',
+    custom: false,
+  },
+  {
+    name: 'Frappe Mail',
+    icon: LogoFrappeMail,
+    info: `Setting up Frappe Mail requires you to have an API key and API Secret of your email account. Read more `,
+    link: 'https://github.com/frappe/mail',
+    custom: true,
+  },
+]
+
+export const emailIcon = {
+  GMail: LogoGmail,
+  Outlook: LogoOutlook,
+  Sendgrid: LogoSendgrid,
+  SparkPost: LogoSparkpost,
+  Yahoo: LogoYahoo,
+  Yandex: LogoYandex,
+  'Frappe Mail': LogoFrappeMail,
+}
+
+export function validateInputs(state, isCustom) {
+  if (!state.email_account_name) {
+    return 'Account name is required'
+  }
+  if (!state.email_id) {
+    return 'Email ID is required'
+  }
+  const validEmail = validateEmail(state.email_id)
+  if (!validEmail) {
+    return 'Invalid email ID'
+  }
+  if (!isCustom && !state.password) {
+    return 'Password is required'
+  }
+  if (isCustom) {
+    if (!state.api_key) {
+      return 'API Key is required'
+    }
+    if (!state.api_secret) {
+      return
+    }
+  }
+  return ''
+}
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
new file mode 100644
index 00000000..be1f6525
--- /dev/null
+++ b/frontend/src/types.ts
@@ -0,0 +1,13 @@
+export interface EmailAccount {
+  email_account_name: string
+  email_id: string
+  service: string
+  api_key?: string
+  api_secret?: string
+  password?: string
+  frappe_mail_site?: string
+  enable_outgoing?: boolean
+  enable_incoming?: boolean
+  default_outgoing?: boolean
+  default_incoming?: boolean
+}