diff --git a/packages/webapp/src/components/DialogsContainer.tsx b/packages/webapp/src/components/DialogsContainer.tsx
index 2ee579980..b301e0492 100644
--- a/packages/webapp/src/components/DialogsContainer.tsx
+++ b/packages/webapp/src/components/DialogsContainer.tsx
@@ -47,6 +47,10 @@ import ProjectInvoicingFormDialog from '@/containers/Projects/containers/Project
 import ProjectBillableEntriesFormDialog from '@/containers/Projects/containers/ProjectBillableEntriesFormDialog';
 import TaxRateFormDialog from '@/containers/TaxRates/dialogs/TaxRateFormDialog/TaxRateFormDialog';
 import { DialogsName } from '@/constants/dialogs';
+import InvoiceMailDialog from '@/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialog';
+import EstimateMailDialog from '@/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialog';
+import ReceiptMailDialog from '@/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialog';
+import PaymentMailDialog from '@/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialog';
 
 /**
  * Dialogs container.
@@ -137,6 +141,10 @@ export default function DialogsContainer() {
         dialogName={DialogsName.ProjectBillableEntriesForm}
       />
       <TaxRateFormDialog dialogName={DialogsName.TaxRateForm} />
+      <InvoiceMailDialog dialogName={DialogsName.InvoiceMail} />
+      <EstimateMailDialog dialogName={DialogsName.EstimateMail} />
+      <ReceiptMailDialog dialogName={DialogsName.ReceiptMail} />
+      <PaymentMailDialog dialogName={DialogsName.PaymentMail} />
     </div>
   );
 }
diff --git a/packages/webapp/src/constants/dialogs.ts b/packages/webapp/src/constants/dialogs.ts
index 115c25af2..5378efb24 100644
--- a/packages/webapp/src/constants/dialogs.ts
+++ b/packages/webapp/src/constants/dialogs.ts
@@ -48,4 +48,8 @@ export enum DialogsName {
   ProjectBillableEntriesForm = 'project-billable-entries',
   InvoiceNumberSettings = 'InvoiceNumberSettings',
   TaxRateForm = 'tax-rate-form',
+  InvoiceMail = 'invoice-mail',
+  EstimateMail = 'estimate-mail',
+  ReceiptMail = 'receipt-mail',
+  PaymentMail = 'payment-mail',
 }
diff --git a/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.tsx b/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.tsx
index 6f1ca3e91..65821afd8 100644
--- a/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.tsx
@@ -26,6 +26,7 @@ import {
 
 import { compose } from '@/utils';
 import { DRAWERS } from '@/constants/drawers';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Estimate read-only details actions bar of the drawer.
@@ -65,6 +66,10 @@ function EstimateDetailActionsBar({
   const handleNotifyViaSMS = () => {
     openDialog('notify-estimate-via-sms', { estimateId });
   };
+  // Handles the estimate mail dialog.
+  const handleMailEstimate = () => {
+    openDialog(DialogsName.EstimateMail, { estimateId });
+  };
 
   return (
     <DrawerActionsBar>
@@ -86,6 +91,15 @@ function EstimateDetailActionsBar({
             onClick={handlePrintEstimate}
           />
         </Can>
+
+        <Can I={SaleEstimateAction.View} a={AbilitySubject.Estimate}>
+          <Button
+            className={Classes.MINIMAL}
+            text={'Mail'}
+            onClick={handleMailEstimate}
+          />
+          <NavbarDivider />
+        </Can>
         <Can I={SaleEstimateAction.Delete} a={AbilitySubject.Estimate}>
           <Button
             className={Classes.MINIMAL}
diff --git a/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.tsx b/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.tsx
index 425664b10..36ca2bcd1 100644
--- a/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.tsx
@@ -31,6 +31,7 @@ import {
 import { compose } from '@/utils';
 import { BadDebtMenuItem } from './utils';
 import { DRAWERS } from '@/constants/drawers';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Invoice details action bar.
@@ -93,6 +94,10 @@ function InvoiceDetailActionsBar({
     openAlert('cancel-bad-debt', { invoiceId });
   };
 
+  const handleMailInvoice = () => {
+    openDialog(DialogsName.InvoiceMail, { invoiceId });
+  };
+
   return (
     <DrawerActionsBar>
       <NavbarGroup>
@@ -116,6 +121,13 @@ function InvoiceDetailActionsBar({
           </If>
           <NavbarDivider />
         </Can>
+        <Can I={SaleInvoiceAction.View} a={AbilitySubject.Invoice}>
+          <Button
+            text={'Mail'}
+            onClick={handleMailInvoice}
+            className={Classes.MINIMAL}
+          />
+        </Can>
         <Can I={SaleInvoiceAction.View} a={AbilitySubject.Invoice}>
           <Button
             className={Classes.MINIMAL}
diff --git a/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.tsx b/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.tsx
index 6ca7a4d50..9438444bc 100644
--- a/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.tsx
@@ -28,6 +28,7 @@ import {
 
 import { compose } from '@/utils';
 import { DRAWERS } from '@/constants/drawers';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Payment receive actions bar.
@@ -68,6 +69,10 @@ function PaymentReceiveActionsBar({
     openDialog('payment-pdf-preview', { paymentReceiveId });
   };
 
+  const handleMailPaymentReceive = () => {
+    openDialog(DialogsName.PaymentMail, { paymentReceiveId });
+  };
+
   return (
     <DrawerActionsBar>
       <NavbarGroup>
@@ -88,6 +93,13 @@ function PaymentReceiveActionsBar({
             onClick={handlePrintPaymentReceive}
           />
         </Can>
+        <Can I={PaymentReceiveAction.View} a={AbilitySubject.PaymentReceive}>
+          <Button
+            className={Classes.MINIMAL}
+            text={'Mail'}
+            onClick={handleMailPaymentReceive}
+          />
+        </Can>
         <Can I={PaymentReceiveAction.Delete} a={AbilitySubject.PaymentReceive}>
           <Button
             className={Classes.MINIMAL}
diff --git a/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.tsx b/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.tsx
index b3e43b6ed..b6367565c 100644
--- a/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.tsx
+++ b/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.tsx
@@ -24,6 +24,7 @@ import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
 import { SaleReceiptAction, AbilitySubject } from '@/constants/abilityOption';
 import { safeCallback, compose } from '@/utils';
 import { DRAWERS } from '@/constants/drawers';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Receipt details actions bar.
@@ -60,6 +61,9 @@ function ReceiptDetailActionBar({
   const handleNotifyViaSMS = () => {
     openDialog('notify-receipt-via-sms', { receiptId });
   };
+  const handleReceiptMail = () => {
+    openDialog(DialogsName.ReceiptMail, { receiptId });
+  }
 
   return (
     <DrawerActionsBar>
@@ -81,6 +85,13 @@ function ReceiptDetailActionBar({
             onClick={safeCallback(onPrintReceipt)}
           />
         </Can>
+        <Can I={SaleReceiptAction.View} a={AbilitySubject.Receipt}>
+          <Button
+            className={Classes.MINIMAL}
+            text={'Mail'}
+            onClick={handleReceiptMail}
+          />
+        </Can>
         <Can I={SaleReceiptAction.Delete} a={AbilitySubject.Receipt}>
           <Button
             className={Classes.MINIMAL}
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialog.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialog.tsx
new file mode 100644
index 000000000..06432de17
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialog.tsx
@@ -0,0 +1,36 @@
+// @ts-nocheck
+import React from 'react';
+import { Dialog, DialogSuspense } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { compose } from '@/utils';
+
+const EstimateMailDialogContent = React.lazy(
+  () => import('./EstimateMailDialogContent'),
+);
+
+/**
+ * Invoice mail dialog.
+ */
+function EstimateMailDialog({
+  dialogName,
+  payload: { estimateId = null },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={'Estiomate Mail'}
+      isOpen={isOpen}
+      canEscapeJeyClose={true}
+      autoFocus={true}
+    >
+      <DialogSuspense>
+        <EstimateMailDialogContent
+          dialogName={dialogName}
+          estimateId={estimateId}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+export default compose(withDialogRedux())(EstimateMailDialog);
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogBoot.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogBoot.tsx
new file mode 100644
index 000000000..d47fb3c99
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogBoot.tsx
@@ -0,0 +1,43 @@
+// @ts-nocheck
+import React, { createContext } from 'react';
+import { useSaleEstimateDefaultOptions } from '@/hooks/query';
+import { DialogContent } from '@/components';
+
+interface EstimateMailDialogBootValues {
+  estimateId: number;
+  mailOptions: any;
+}
+
+const EstimateMailDialagBoot = createContext<EstimateMailDialogBootValues>();
+
+interface EstimateMailDialogBootProps {
+  estimateId: number;
+  children: React.ReactNode;
+}
+
+/**
+ * Estimate mail dialog boot provider.
+ */
+function EstimateMailDialogBoot({
+  estimateId,
+  ...props
+}: EstimateMailDialogBootProps) {
+  const { data: mailOptions, isLoading: isMailOptionsLoading } =
+    useSaleEstimateDefaultOptions(estimateId);
+
+  const provider = {
+    mailOptions,
+    isMailOptionsLoading,
+  };
+
+  return (
+    <DialogContent isLoading={isMailOptionsLoading}>
+      <EstimateMailDialagBoot.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useEstimateMailDialogBoot = () =>
+  React.useContext<EstimateMailDialogBootValues>(EstimateMailDialagBoot);
+
+export { EstimateMailDialogBoot, useEstimateMailDialogBoot };
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogContent.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogContent.tsx
new file mode 100644
index 000000000..3cef9151b
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogContent.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { EstimateMailDialogBoot } from './EstimateMailDialogBoot';
+import { EstimateMailDialogForm } from './EstimateMailDialogForm';
+
+interface EstimateMailDialogContentProps {
+  dialogName: string;
+  estimateId: number;
+}
+export default function EstimateMailDialogContent({
+  dialogName,
+  estimateId,
+}: EstimateMailDialogContentProps) {
+  return (
+    <EstimateMailDialogBoot estimateId={estimateId}>
+      <EstimateMailDialogForm /> 
+    </EstimateMailDialogBoot>
+  )
+}
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogForm.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogForm.tsx
new file mode 100644
index 000000000..1e8f01801
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogForm.tsx
@@ -0,0 +1,31 @@
+import { Formik } from 'formik';
+import { useEstimateMailDialogBoot } from './EstimateMailDialogBoot';
+import { transformToForm } from '@/utils';
+import { SendMailNotificationForm } from '@/containers/SendMailNotification';
+import { castArray } from 'lodash';
+
+const initialFormValues = {
+  from: [],
+  to: [],
+  subject: '',
+  message: '',
+};
+
+export function EstimateMailDialogForm() {
+  const { mailOptions } = useEstimateMailDialogBoot();
+
+  const initialValues = {
+    ...initialFormValues,
+    ...transformToForm(mailOptions, initialFormValues),
+    from: mailOptions.from ? castArray(mailOptions.from) : [],
+    to: mailOptions.to ? castArray(mailOptions.to) : [],
+  };
+
+  const handleSubmit = () => {};
+
+  return (
+    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+      <SendMailNotificationForm />
+    </Formik>
+  );
+}
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/index.ts b/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/index.ts
new file mode 100644
index 000000000..bebbc8bef
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/index.ts
@@ -0,0 +1 @@
+export * from './EstimateMailDialog';
\ No newline at end of file
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialog.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialog.tsx
new file mode 100644
index 000000000..dab608e3f
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialog.tsx
@@ -0,0 +1,36 @@
+// @ts-nocheck
+import React from 'react';
+import { Dialog, DialogSuspense } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { compose } from '@/utils';
+
+const InvoiceMailDialogContent = React.lazy(
+  () => import('./InvoiceMailDialogContent'),
+);
+
+/**
+ * Invoice mail dialog.
+ */
+function InvoiceMailDialog({
+  dialogName,
+  payload: { invoiceId = null },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={'Invoice Mail'}
+      isOpen={isOpen}
+      canEscapeJeyClose={true}
+      autoFocus={true}
+    >
+      <DialogSuspense>
+        <InvoiceMailDialogContent
+          dialogName={dialogName}
+          invoiceId={invoiceId}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+export default compose(withDialogRedux())(InvoiceMailDialog);
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogBoot.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogBoot.tsx
new file mode 100644
index 000000000..474019b33
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogBoot.tsx
@@ -0,0 +1,43 @@
+// @ts-nocheck
+import React, { createContext } from 'react';
+import { useSaleInvoiceDefaultOptions } from '@/hooks/query';
+import { DialogContent } from '@/components';
+
+interface InvoiceMailDialogBootValues {
+  invoiceId: number;
+  mailOptions: any;
+}
+
+const InvoiceMailDialagBoot = createContext<InvoiceMailDialogBootValues>();
+
+interface InvoiceMailDialogBootProps {
+  invoiceId: number;
+  children: React.ReactNode;
+}
+
+/**
+ * Invoice mail dialog boot provider.
+ */
+function InvoiceMailDialogBoot({
+  invoiceId,
+  ...props
+}: InvoiceMailDialogBootProps) {
+  const { data: mailOptions, isLoading: isMailOptionsLoading } =
+    useSaleInvoiceDefaultOptions(invoiceId);
+
+  const provider = {
+    mailOptions,
+    isMailOptionsLoading,
+  };
+
+  return (
+    <DialogContent isLoading={isMailOptionsLoading}>
+      <InvoiceMailDialagBoot.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useInvoiceMailDialogBoot = () =>
+  React.useContext<InvoiceMailDialogBootValues>(InvoiceMailDialagBoot);
+
+export { InvoiceMailDialogBoot, useInvoiceMailDialogBoot };
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogContent.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogContent.tsx
new file mode 100644
index 000000000..37f3f091f
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogContent.tsx
@@ -0,0 +1,17 @@
+import { InvoiceMailDialogBoot } from './InvoiceMailDialogBoot';
+import { InvoiceMailDialogForm } from './InvoiceMailDialogForm';
+
+interface InvoiceMailDialogContentProps {
+  dialogName: string;
+  invoiceId: number;
+}
+export default function InvoiceMailDialogContent({
+  dialogName,
+  invoiceId,
+}: InvoiceMailDialogContentProps) {
+  return (
+    <InvoiceMailDialogBoot invoiceId={invoiceId}>
+      <InvoiceMailDialogForm />
+    </InvoiceMailDialogBoot>
+  );
+}
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogForm.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogForm.tsx
new file mode 100644
index 000000000..113b15dce
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogForm.tsx
@@ -0,0 +1,29 @@
+import { Formik } from 'formik';
+import { castArray } from 'lodash';
+import { SendMailNotificationForm } from '@/containers/SendMailNotification';
+import { useInvoiceMailDialogBoot } from './InvoiceMailDialogBoot';
+import { transformToForm } from '@/utils';
+
+const initialFormValues = {
+  from: [],
+  to: [],
+  subject: '',
+  message: '',
+};
+export function InvoiceMailDialogForm() {
+  const { mailOptions } = useInvoiceMailDialogBoot();
+
+  const initialValues = {
+    ...initialFormValues,
+    ...transformToForm(mailOptions, initialFormValues),
+    from: mailOptions.from ? castArray(mailOptions.from) : [],
+    to: mailOptions.to ? castArray(mailOptions.to) : [],
+  };
+  const handleSubmit = () => {};
+
+  return (
+    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+      <SendMailNotificationForm />
+    </Formik>
+  );
+}
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/index.ts b/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/index.ts
new file mode 100644
index 000000000..b64dcaaf3
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/index.ts
@@ -0,0 +1 @@
+export * from './InvoiceMailDialog';
\ No newline at end of file
diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialog.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialog.tsx
new file mode 100644
index 000000000..7e4e3e6ac
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialog.tsx
@@ -0,0 +1,36 @@
+// @ts-nocheck
+import React from 'react';
+import { Dialog, DialogSuspense } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { compose } from '@/utils';
+
+const PaymentMailDialogContent = React.lazy(
+  () => import('./PaymentMailDialogContent'),
+);
+
+/**
+ * Payment mail dialog.
+ */
+function PaymentMailDialog({
+  dialogName,
+  payload: { paymentReceiveId = null },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={'Payment Mail'}
+      isOpen={isOpen}
+      canEscapeJeyClose={true}
+      autoFocus={true}
+    >
+      <DialogSuspense>
+        <PaymentMailDialogContent
+          dialogName={dialogName}
+          paymentReceiveId={paymentReceiveId}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+export default compose(withDialogRedux())(PaymentMailDialog);
diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialogBoot.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialogBoot.tsx
new file mode 100644
index 000000000..c70a28896
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialogBoot.tsx
@@ -0,0 +1,44 @@
+// @ts-nocheck
+import React, { createContext } from 'react';
+import { usePaymentReceiveDefaultOptions } from '@/hooks/query';
+import { DialogContent } from '@/components';
+
+interface PaymentMailDialogBootValues {
+  paymentReceiveId: number;
+  mailOptions: any;
+}
+
+const PaymentMailDialogBootContext =
+  createContext<PaymentMailDialogBootValues>();
+
+interface PaymentMailDialogBootProps {
+  paymentReceiveId: number;
+  children: React.ReactNode;
+}
+
+/**
+ * Payment mail dialog boot provider.
+ */
+function PaymentMailDialogBoot({
+  paymentReceiveId,
+  ...props
+}: PaymentMailDialogBootProps) {
+  const { data: mailOptions, isLoading: isMailOptionsLoading } =
+    usePaymentReceiveDefaultOptions(paymentReceiveId);
+
+  const provider = {
+    mailOptions,
+    isMailOptionsLoading,
+  };
+
+  return (
+    <DialogContent isLoading={isMailOptionsLoading}>
+      <PaymentMailDialogBootContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const usePaymentMailDialogBoot = () =>
+  React.useContext<PaymentMailDialogBootValues>(PaymentMailDialogBootContext);
+
+export { PaymentMailDialogBoot, usePaymentMailDialogBoot };
diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialogContent.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialogContent.tsx
new file mode 100644
index 000000000..12fa57e05
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialogContent.tsx
@@ -0,0 +1,17 @@
+import { PaymentMailDialogBoot } from './PaymentMailDialogBoot';
+import { PaymentMailDialogForm } from './PaymentMailDialogForm';
+
+interface PaymentMailDialogContentProps {
+  dialogName: string;
+  paymentReceiveId: number;
+}
+export default function PaymentMailDialogContent({
+  dialogName,
+  paymentReceiveId,
+}: PaymentMailDialogContentProps) {
+  return (
+    <PaymentMailDialogBoot paymentReceiveId={paymentReceiveId}>
+      <PaymentMailDialogForm />
+    </PaymentMailDialogBoot>
+  );
+}
diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialogForm.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialogForm.tsx
new file mode 100644
index 000000000..01f1a95ab
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialogForm.tsx
@@ -0,0 +1,29 @@
+import { Formik } from 'formik';
+import { castArray } from 'lodash';
+import { SendMailNotificationForm } from '@/containers/SendMailNotification';
+import { usePaymentMailDialogBoot } from './PaymentMailDialogBoot';
+import { transformToForm } from '@/utils';
+
+const initialFormValues = {
+  from: [],
+  to: [],
+  subject: '',
+  message: '',
+};
+export function PaymentMailDialogForm() {
+  const { mailOptions } = usePaymentMailDialogBoot();
+
+  const initialValues = {
+    ...initialFormValues,
+    ...transformToForm(mailOptions, initialFormValues),
+    from: mailOptions.from ? castArray(mailOptions.from) : [],
+    to: mailOptions.to ? castArray(mailOptions.to) : [],
+  };
+  const handleSubmit = () => {};
+
+  return (
+    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+      <SendMailNotificationForm />
+    </Formik>
+  );
+}
diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/index.ts b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/index.ts
new file mode 100644
index 000000000..5a2fbde70
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/index.ts
@@ -0,0 +1 @@
+export * from './PaymentMailDialog';
\ No newline at end of file
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialog.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialog.tsx
new file mode 100644
index 000000000..f78f42773
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialog.tsx
@@ -0,0 +1,36 @@
+// @ts-nocheck
+import React from 'react';
+import { Dialog, DialogSuspense } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { compose } from '@/utils';
+
+const ReceiptMailDialogContent = React.lazy(
+  () => import('./ReceiptMailDialogContent'),
+);
+
+/**
+ * Invoice mail dialog.
+ */
+function ReceiptMailDialog({
+  dialogName,
+  payload: { receiptId = null },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={'Receipt Mail'}
+      isOpen={isOpen}
+      canEscapeJeyClose={true}
+      autoFocus={true}
+    >
+      <DialogSuspense>
+        <ReceiptMailDialogContent
+          dialogName={dialogName}
+          receiptId={receiptId}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+export default compose(withDialogRedux())(ReceiptMailDialog);
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialogBoot.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialogBoot.tsx
new file mode 100644
index 000000000..93522e03c
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialogBoot.tsx
@@ -0,0 +1,44 @@
+// @ts-nocheck
+import React, { createContext } from 'react';
+import { useSaleReceiptDefaultOptions } from '@/hooks/query';
+import { DialogContent } from '@/components';
+
+interface ReceiptMailDialogBootValues {
+  receiptId: number;
+  mailOptions: any;
+}
+
+const ReceiptMailDialogBootContext =
+  createContext<ReceiptMailDialogBootValues>();
+
+interface ReceiptMailDialogBootProps {
+  receiptId: number;
+  children: React.ReactNode;
+}
+
+/**
+ * Receipt mail dialog boot provider.
+ */
+function ReceiptMailDialogBoot({
+  receiptId,
+  ...props
+}: ReceiptMailDialogBootProps) {
+  const { data: mailOptions, isLoading: isMailOptionsLoading } =
+    useSaleReceiptDefaultOptions(receiptId);
+
+  const provider = {
+    mailOptions,
+    isMailOptionsLoading,
+  };
+
+  return (
+    <DialogContent isLoading={isMailOptionsLoading}>
+      <ReceiptMailDialogBootContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useReceiptMailDialogBoot = () =>
+  React.useContext<ReceiptMailDialogBootValues>(ReceiptMailDialogBootContext);
+
+export { ReceiptMailDialogBoot, useReceiptMailDialogBoot };
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialogContent.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialogContent.tsx
new file mode 100644
index 000000000..955620f86
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialogContent.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { ReceiptMailDialogBoot } from './ReceiptMailDialogBoot';
+import { ReceiptMailDialogForm } from './ReceiptMailDialogForm';
+
+interface ReceiptMailDialogContentProps {
+  dialogName: string
+  receiptId: number;
+}
+export default function ReceiptMailDialogContent({
+  dialogName,
+  receiptId,
+}: ReceiptMailDialogContentProps) {
+  return (
+    <ReceiptMailDialogBoot receiptId={receiptId}>
+      <ReceiptMailDialogForm />
+    </ReceiptMailDialogBoot>
+  );
+}
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialogForm.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialogForm.tsx
new file mode 100644
index 000000000..eb4488244
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialogForm.tsx
@@ -0,0 +1,29 @@
+import { Formik } from 'formik';
+import { castArray } from 'lodash';
+import { SendMailNotificationForm } from '@/containers/SendMailNotification';
+import { useReceiptMailDialogBoot } from './ReceiptMailDialogBoot';
+import { transformToForm } from '@/utils';
+
+const initialFormValues = {
+  from: [],
+  to: [],
+  subject: '',
+  message: '',
+};
+export function ReceiptMailDialogForm() {
+  const { mailOptions } = useReceiptMailDialogBoot();
+
+  const initialValues = {
+    ...initialFormValues,
+    ...transformToForm(mailOptions, initialFormValues),
+    from: mailOptions.from ? castArray(mailOptions.from) : [],
+    to: mailOptions.to ? castArray(mailOptions.to) : [],
+  };
+  const handleSubmit = () => {};
+
+  return (
+    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+      <SendMailNotificationForm />
+    </Formik>
+  );
+}
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/index.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/index.tsx
new file mode 100644
index 000000000..575fb462b
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/index.tsx
@@ -0,0 +1 @@
+export * from './ReceiptMailDialog';
\ No newline at end of file
diff --git a/packages/webapp/src/containers/SendMailNotification/SendMailNotificationForm.tsx b/packages/webapp/src/containers/SendMailNotification/SendMailNotificationForm.tsx
new file mode 100644
index 000000000..00d4b0faf
--- /dev/null
+++ b/packages/webapp/src/containers/SendMailNotification/SendMailNotificationForm.tsx
@@ -0,0 +1,36 @@
+// @ts-nocheck
+import { Form } from 'formik';
+import { FFormGroup, FInputGroup, FMultiSelect } from '@/components';
+
+export function SendMailNotificationForm() {
+  return (
+    <Form>
+      <FFormGroup label={'From'} name={'from'} inline={true} fastField={true}>
+        <FMultiSelect
+          items={[]}
+          name={'from'}
+          placeholder=""
+          popoverProps={{ minimal: true }}
+        />
+      </FFormGroup>
+
+      <FFormGroup label={'To'} name={'to'} inline={true} fastField={true}>
+        <FMultiSelect
+          items={[]}
+          name={'to'}
+          placeholder=""
+          popoverProps={{ minimal: true }}
+        />
+      </FFormGroup>
+
+      <FFormGroup
+        label={'Subject'}
+        name={'subject'}
+        inline={true}
+        fastField={true}
+      >
+        <FInputGroup name={'subject'} />
+      </FFormGroup>
+    </Form>
+  );
+}
diff --git a/packages/webapp/src/containers/SendMailNotification/index.ts b/packages/webapp/src/containers/SendMailNotification/index.ts
new file mode 100644
index 000000000..6e5788dcc
--- /dev/null
+++ b/packages/webapp/src/containers/SendMailNotification/index.ts
@@ -0,0 +1 @@
+export * from './SendMailNotificationForm';
\ No newline at end of file
diff --git a/packages/webapp/src/hooks/query/estimates.tsx b/packages/webapp/src/hooks/query/estimates.tsx
index 8bb3c2731..9ab867857 100644
--- a/packages/webapp/src/hooks/query/estimates.tsx
+++ b/packages/webapp/src/hooks/query/estimates.tsx
@@ -239,3 +239,33 @@ export function useEstimateSMSDetail(estimateId, props, requestProps) {
     },
   );
 }
+
+export function useSendSaleEstimateMail(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) => apiRequest.post(`sales/estimates/${id}/mail`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+export function useSaleEstimateDefaultOptions(estimateId, props) {
+  return useRequestQuery(
+    [t.SALE_ESTIMATE_MAIL_OPTIONS, estimateId],
+    {
+      method: 'get',
+      url: `sales/estimates/${estimateId}/mail`,
+    },
+    {
+      select: (res) => res.data.data,
+      ...props,
+    },
+  );
+}
diff --git a/packages/webapp/src/hooks/query/invoices.tsx b/packages/webapp/src/hooks/query/invoices.tsx
index 13009042c..2adbf87e0 100644
--- a/packages/webapp/src/hooks/query/invoices.tsx
+++ b/packages/webapp/src/hooks/query/invoices.tsx
@@ -306,3 +306,34 @@ export function useInvoicePaymentTransactions(invoiceId, props) {
     },
   );
 }
+
+export function useSendSaleInvoiceMail(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) => apiRequest.post(`sales/invoices/${id}/mail`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+export function useSaleInvoiceDefaultOptions(invoiceId, props) {
+  return useRequestQuery(
+    [t.SALE_INVOICE_DEFAULT_OPTIONS, invoiceId],
+    {
+      method: 'get',
+      url: `sales/invoices/${invoiceId}/mail`,
+    },
+    {
+      select: (res) => res.data.data,
+      ...props,
+    },
+  );
+}
+
diff --git a/packages/webapp/src/hooks/query/paymentReceives.tsx b/packages/webapp/src/hooks/query/paymentReceives.tsx
index 49d53ad67..376993e19 100644
--- a/packages/webapp/src/hooks/query/paymentReceives.tsx
+++ b/packages/webapp/src/hooks/query/paymentReceives.tsx
@@ -234,3 +234,34 @@ export function usePaymentReceiveSMSDetail(
 export function usePdfPaymentReceive(paymentReceiveId) {
   return useRequestPdf(`sales/payment_receives/${paymentReceiveId}`);
 }
+
+export function useSendPaymentReceiveMail(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) =>
+      apiRequest.post(`sales/payment_receives/${id}/mail`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+export function usePaymentReceiveDefaultOptions(paymentReceiveId, props) {
+  return useRequestQuery(
+    [t.PAYMENT_RECEIVE_MAIL_OPTIONS, paymentReceiveId],
+    {
+      method: 'get',
+      url: `sales/payment_receives/${paymentReceiveId}/mail`,
+    },
+    {
+      select: (res) => res.data.data,
+      ...props,
+    },
+  );
+}
diff --git a/packages/webapp/src/hooks/query/receipts.tsx b/packages/webapp/src/hooks/query/receipts.tsx
index 907cfc8af..60b309589 100644
--- a/packages/webapp/src/hooks/query/receipts.tsx
+++ b/packages/webapp/src/hooks/query/receipts.tsx
@@ -207,3 +207,36 @@ export function useReceiptSMSDetail(receiptId, props, requestProps) {
     },
   );
 }
+
+/**
+ *
+ */
+export function useSendSaleReceiptMail(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (id, values) => apiRequest.post(`sales/receipts/${id}/mail`, values),
+    {
+      onSuccess: () => {
+        // Invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+export function useSaleReceiptDefaultOptions(invoiceId, props) {
+  return useRequestQuery(
+    [t.SALE_RECEIPT_MAIL_OPTIONS, invoiceId],
+    {
+      method: 'get',
+      url: `sales/receipts/${invoiceId}/mail`,
+    },
+    {
+      select: (res) => res.data.data,
+      ...props,
+    },
+  );
+}
diff --git a/packages/webapp/src/hooks/query/types.tsx b/packages/webapp/src/hooks/query/types.tsx
index c0173cab7..0a10b1e63 100644
--- a/packages/webapp/src/hooks/query/types.tsx
+++ b/packages/webapp/src/hooks/query/types.tsx
@@ -69,6 +69,7 @@ const SALE_ESTIMATES = {
   SALE_ESTIMATE: 'SALE_ESTIMATE',
   SALE_ESTIMATE_SMS_DETAIL: 'SALE_ESTIMATE_SMS_DETAIL',
   NOTIFY_SALE_ESTIMATE_BY_SMS: 'NOTIFY_SALE_ESTIMATE_BY_SMS',
+  SALE_ESTIMATE_MAIL_OPTIONS: 'SALE_ESTIMATE_MAIL_OPTIONS',
 };
 
 const SALE_RECEIPTS = {
@@ -76,6 +77,7 @@ const SALE_RECEIPTS = {
   SALE_RECEIPT: 'SALE_RECEIPT',
   SALE_RECEIPT_SMS_DETAIL: 'SALE_RECEIPT_SMS_DETAIL',
   NOTIFY_SALE_RECEIPT_BY_SMS: 'NOTIFY_SALE_RECEIPT_BY_SMS',
+  SALE_RECEIPT_MAIL_OPTIONS: 'SALE_RECEIPT_MAIL_OPTIONS'
 };
 
 const INVENTORY_ADJUSTMENTS = {
@@ -101,6 +103,7 @@ const PAYMENT_RECEIVES = {
   PAYMENT_RECEIVE_EDIT_PAGE: 'PAYMENT_RECEIVE_EDIT_PAGE',
   PAYMENT_RECEIVE_SMS_DETAIL: 'PAYMENT_RECEIVE_SMS_DETAIL',
   NOTIFY_PAYMENT_RECEIVE_BY_SMS: 'NOTIFY_PAYMENT_RECEIVE_BY_SMS',
+  PAYMENT_RECEIVE_MAIL_OPTIONS: 'PAYMENT_RECEIVE_MAIL_OPTIONS',
 };
 
 const SALE_INVOICES = {
@@ -112,6 +115,7 @@ const SALE_INVOICES = {
   BAD_DEBT: 'BAD_DEBT',
   CANCEL_BAD_DEBT: 'CANCEL_BAD_DEBT',
   SALE_INVOICE_PAYMENT_TRANSACTIONS: 'SALE_INVOICE_PAYMENT_TRANSACTIONS',
+  SALE_INVOICE_DEFAULT_OPTIONS: 'SALE_INVOICE_DEFAULT_OPTIONS'
 };
 
 const USERS = {