diff --git a/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.tsx b/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.tsx
index a01be889d..2d156dffe 100644
--- a/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.tsx
@@ -30,7 +30,6 @@ import {
 
 import { compose } from '@/utils';
 import { DRAWERS } from '@/constants/drawers';
-import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Estimate read-only details actions bar of the drawer.
@@ -44,6 +43,7 @@ function EstimateDetailActionsBar({
 
   // #withDrawerActions
   closeDrawer,
+  openDrawer
 }) {
   // Estimate details drawer context.
   const { estimateId, estimate } = useEstimateDetailDrawerContext();
@@ -80,7 +80,7 @@ function EstimateDetailActionsBar({
   };
   // Handles the estimate mail dialog.
   const handleMailEstimate = () => {
-    openDialog(DialogsName.EstimateMail, { estimateId });
+    openDrawer(DRAWERS.ESTIMATE_SEND_MAIL, { estimateId });
   };
 
   return (
diff --git a/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.tsx b/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.tsx
index cad001a72..8f54f6098 100644
--- a/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.tsx
@@ -28,7 +28,6 @@ import {
 
 import { compose } from '@/utils';
 import { DRAWERS } from '@/constants/drawers';
-import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Payment receive actions bar.
@@ -39,6 +38,7 @@ function PaymentsReceivedActionsBar({
 
   // #withDrawerActions
   closeDrawer,
+  openDrawer,
 
   // #withDialogActions
   openDialog,
@@ -69,8 +69,11 @@ function PaymentsReceivedActionsBar({
     openDialog('payment-pdf-preview', { paymentReceiveId });
   };
 
+  // Handle mail action.
   const handleMailPaymentReceive = () => {
-    openDialog(DialogsName.PaymentMail, { paymentReceiveId });
+    openDrawer(DRAWERS.PAYMENT_RECEIVED_SEND_MAIL, {
+      paymentReceivedId: paymentReceiveId,
+    });
   };
 
   return (
diff --git a/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.tsx b/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.tsx
index 9ca00216a..85336c469 100644
--- a/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.tsx
+++ b/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.tsx
@@ -24,7 +24,6 @@ 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.
@@ -39,6 +38,7 @@ function ReceiptDetailActionBar({
 
   // #withDrawerActions
   closeDrawer,
+  openDrawer
 }) {
   const history = useHistory();
   const { receiptId } = useReceiptDetailDrawerContext();
@@ -61,8 +61,9 @@ function ReceiptDetailActionBar({
   const handleNotifyViaSMS = () => {
     openDialog('notify-receipt-via-sms', { receiptId });
   };
+  // Handle receipt mail action.
   const handleReceiptMail = () => {
-    openDialog(DialogsName.ReceiptMail, { receiptId });
+    openDrawer(DRAWERS.RECEIPT_SEND_MAIL, { receiptId });
   };
 
   return (
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendMail.schema.ts b/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendMail.schema.ts
index 02134112c..acb02f429 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendMail.schema.ts
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendMail.schema.ts
@@ -1,3 +1,11 @@
 import * as Yup from 'yup';
 
-export const EstimateSendMailSchema = Yup.object().shape({});
+export const EstimateSendMailSchema = Yup.object().shape({
+  subject: Yup.string().required('Subject is required'),
+  message: Yup.string().required('Message is required'),
+  to: Yup.array()
+    .of(Yup.string().email('Invalid email address'))
+    .required('To address is required'),
+  cc: Yup.array().of(Yup.string().email('Invalid email address')),
+  bcc: Yup.array().of(Yup.string().email('Invalid email address')),
+});
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendMailPdfPreview.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendMailPdfPreview.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx
index 36ac3bd56..7a6096691 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx
@@ -13,7 +13,7 @@ export function InvoiceSendMailFields() {
   const argsOptions = useSendInvoiceFormatArgsOptions();
 
   return (
-    <Stack>
+    <Stack flex={1}>
       <Stack spacing={0} overflow="auto" flex="1" p={'30px'}>
         <SendMailViewToAddressField
           toMultiSelectProps={{ items }}