diff --git a/packages/webapp/src/components/DialogsContainer.tsx b/packages/webapp/src/components/DialogsContainer.tsx
index 8871f8adb..5fcd3f07c 100644
--- a/packages/webapp/src/components/DialogsContainer.tsx
+++ b/packages/webapp/src/components/DialogsContainer.tsx
@@ -11,7 +11,6 @@ import QuickPaymentMadeFormDialog from '@/containers/Dialogs/QuickPaymentMadeFor
 import AllocateLandedCostDialog from '@/containers/Dialogs/AllocateLandedCostDialog';
 import InvoicePdfPreviewDialog from '@/containers/Dialogs/InvoicePdfPreviewDialog';
 import EstimatePdfPreviewDialog from '@/containers/Dialogs/EstimatePdfPreviewDialog';
-import ReceiptPdfPreviewDialog from '@/containers/Dialogs/ReceiptPdfPreviewDialog';
 import MoneyInDialog from '@/containers/CashFlow/MoneyInDialog';
 import MoneyOutDialog from '@/containers/CashFlow/MoneyOutDialog';
 import BadDebtDialog from '@/containers/Dialogs/BadDebtDialog';
@@ -45,7 +44,6 @@ import ProjectBillableEntriesFormDialog from '@/containers/Projects/containers/P
 import TaxRateFormDialog from '@/containers/TaxRates/dialogs/TaxRateFormDialog/TaxRateFormDialog';
 import { DialogsName } from '@/constants/dialogs';
 import InvoiceExchangeRateChangeDialog from '@/containers/Sales/Invoices/InvoiceForm/Dialogs/InvoiceExchangeRateChangeDialog';
-import ReceiptMailDialog from '@/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialog';
 import PaymentMailDialog from '@/containers/Sales/PaymentsReceived/PaymentMailDialog/PaymentMailDialog';
 import { ExportDialog } from '@/containers/Dialogs/ExportDialog';
 import { RuleFormDialog } from '@/containers/Banking/Rules/RuleFormDialog/RuleFormDialog';
@@ -80,7 +78,6 @@ export default function DialogsContainer() {
       />
       <InvoicePdfPreviewDialog dialogName={DialogsName.InvoicePdfForm} />
       <EstimatePdfPreviewDialog dialogName={DialogsName.EstimatePdfForm} />
-      <ReceiptPdfPreviewDialog dialogName={DialogsName.ReceiptPdfForm} />
       <MoneyInDialog dialogName={DialogsName.MoneyInForm} />
       <MoneyOutDialog dialogName={DialogsName.MoneyOutForm} />
 
@@ -142,7 +139,6 @@ export default function DialogsContainer() {
       <InvoiceExchangeRateChangeDialog
         dialogName={DialogsName.InvoiceExchangeRateChangeNotice}
       />
-      <ReceiptMailDialog dialogName={DialogsName.ReceiptMail} />
       <PaymentMailDialog dialogName={DialogsName.PaymentMail} />
       <ExportDialog dialogName={DialogsName.Export} />
       <RuleFormDialog dialogName={DialogsName.BankRuleForm} />
diff --git a/packages/webapp/src/components/DrawersContainer.tsx b/packages/webapp/src/components/DrawersContainer.tsx
index 9d21008d1..b9cb48428 100644
--- a/packages/webapp/src/components/DrawersContainer.tsx
+++ b/packages/webapp/src/components/DrawersContainer.tsx
@@ -33,6 +33,7 @@ import { BrandingTemplatesDrawer } from '@/containers/BrandingTemplates/Branding
 import { DRAWERS } from '@/constants/drawers';
 import { InvoiceSendMailDrawer } from '@/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailDrawer';
 import { EstimateSendMailDrawer } from '@/containers/Sales/Estimates/EstimateSendMailDrawer';
+import { ReceiptSendMailDrawer } from '@/containers/Sales/Receipts/ReceiptSendMailDrawer';
 
 /**
  * Drawers container of the dashboard.
@@ -83,6 +84,7 @@ export default function DrawersContainer() {
       <BrandingTemplatesDrawer name={DRAWERS.BRANDING_TEMPLATES} />
       <InvoiceSendMailDrawer name={DRAWERS.INVOICE_SEND_MAIL} />
       <EstimateSendMailDrawer name={DRAWERS.ESTIMATE_SEND_MAIL} />
+      <ReceiptSendMailDrawer name={DRAWERS.RECEIPT_SEND_MAIL} />
     </div>
   );
 }
diff --git a/packages/webapp/src/constants/drawers.ts b/packages/webapp/src/constants/drawers.ts
index a461c7e83..9afb191b2 100644
--- a/packages/webapp/src/constants/drawers.ts
+++ b/packages/webapp/src/constants/drawers.ts
@@ -36,4 +36,5 @@ export enum DRAWERS {
   STRIPE_PAYMENT_INTEGRATION_EDIT = 'STRIPE_PAYMENT_INTEGRATION_EDIT',
   INVOICE_SEND_MAIL = 'INVOICE_SEND_MAIL',
   ESTIMATE_SEND_MAIL = 'ESTIMATE_SEND_MAIL',
+  RECEIPT_SEND_MAIL = 'RECEIPT_SEND_MAIL',
 }
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendMailPreview.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendMailPreview.tsx
index 16fd43626..642cba320 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendMailPreview.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendMailPreview.tsx
@@ -1,7 +1,27 @@
-
+import { Suspense } from 'react';
+import { SendMailViewPreviewTabs } from '../SendMailViewDrawer/SendMailViewPreviewTabs';
+import { Tab } from '@blueprintjs/core';
+import { EstimateSendPdfPreviewConnected } from './EstimateSendPdfPreviewConnected';
 
 export function EstimateSendMailPreviewTabs() {
   return (
-    <h1>asdfsdf</h1>
-  )
-}
\ No newline at end of file
+    <SendMailViewPreviewTabs>
+      <Tab
+        id={'payment-page'}
+        title={'Payment page'}
+        panel={
+          <Suspense>{/* <InvoiceMailReceiptPreviewConnected /> */}</Suspense>
+        }
+      />
+      <Tab
+        id="pdf-document"
+        title={'PDF document'}
+        panel={
+          <Suspense>
+            <EstimateSendPdfPreviewConnected />
+          </Suspense>
+        }
+      />
+    </SendMailViewPreviewTabs>
+  );
+}
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendMailPreviewHeader.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendMailPreviewHeader.tsx
new file mode 100644
index 000000000..182094bcd
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendMailPreviewHeader.tsx
@@ -0,0 +1,13 @@
+import { SendViewPreviewHeader } from '../SendMailViewDrawer/SendMailViewPreviewHeader';
+
+export function EstimateSendMailPreviewHeader() {
+  return (
+    <SendViewPreviewHeader
+      companyName="A"
+      customerName="A"
+      subject={'adsfsdf'}
+      from={['a.bouhuolia@gmail.com']}
+      to={['a.bouhuolia@gmail.com']}
+    />
+  );
+}
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendPdfPreviewConnected.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendPdfPreviewConnected.tsx
new file mode 100644
index 000000000..d62b1abc3
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendPdfPreviewConnected.tsx
@@ -0,0 +1,31 @@
+import { Spinner } from '@blueprintjs/core';
+import { Stack } from '@/components';
+import { useGetSaleEstimateHtml } from '@/hooks/query';
+import { EstimateSendMailPreviewHeader } from './EstimateSendMailPreviewHeader';
+import { SendMailViewPreviewPdfIframe } from '../SendMailViewDrawer/SendMailViewPreviewPdfIframe';
+import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
+
+export function EstimateSendPdfPreviewConnected() {
+  return (
+    <Stack>
+      <EstimateSendMailPreviewHeader />
+
+      <Stack px={4} py={6}>
+        <EstimateSendPdfPreviewIframe />
+      </Stack>
+    </Stack>
+  );
+}
+
+function EstimateSendPdfPreviewIframe() {
+  const { payload } = useDrawerContext();
+  const { data, isLoading } = useGetSaleEstimateHtml(payload?.estimateId);
+
+  if (isLoading && data) {
+    return <Spinner size={20} />;
+  }
+
+  const iframeSrcDoc = data?.htmlContent;
+
+  return <SendMailViewPreviewPdfIframe srcDoc={iframeSrcDoc} />;
+}
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailBoot.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailBoot.tsx
index 25fef6d71..72873d57e 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailBoot.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailBoot.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React, { createContext, useContext } from 'react';
 import { Spinner } from '@blueprintjs/core';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailContent.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailContent.tsx
index 8e8dd7f79..11b3285d9 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailContent.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailContent.tsx
@@ -7,13 +7,13 @@ import { ReceiptSendMailForm } from './ReceiptSendMailForm';
 import { ReceiptSendMailFormFields } from './ReceiptSendMailFormFields';
 import { ReceiptSendMailPreviewTabs } from './ReceiptSendMailPreviewTabs';
 
-export function InvoiceSendMailContent() {
+export function ReceiptSendMailContent() {
   return (
     <Stack className={Classes.DRAWER_BODY}>
       <ReceiptSendMailBoot>
         <ReceiptSendMailForm>
           <SendMailViewLayout
-            header={<SendMailViewHeader label={'Send Invoice Mail'} />}
+            header={<SendMailViewHeader label={'Send Receipt Mail'} />}
             fields={<ReceiptSendMailFormFields />}
             preview={<ReceiptSendMailPreviewTabs />}
           />
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailForm.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailForm.tsx
index 999a9c69b..f2935f542 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailForm.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailForm.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { Form, Formik, FormikHelpers } from 'formik';
 import { css } from '@emotion/css';
 import { Intent } from '@blueprintjs/core';
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailPreviewTabs.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailPreviewTabs.tsx
index e4f0f8c2e..bd43988cc 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailPreviewTabs.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailPreviewTabs.tsx
@@ -1,6 +1,3 @@
-
-
 export function ReceiptSendMailPreviewTabs() {
-
   return null;
-}
\ 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 7aea63c03..abbabc8fa 100644
--- a/packages/webapp/src/hooks/query/estimates.tsx
+++ b/packages/webapp/src/hooks/query/estimates.tsx
@@ -258,10 +258,10 @@ export function useSendSaleEstimateMail(props = {}) {
 }
 
 /**
- * 
- * @param {number} estimateId 
- * @param props 
- * @returns 
+ *
+ * @param {number} estimateId
+ * @param props
+ * @returns
  */
 export function useSaleEstimateMailState(estimateId: number, props?= {}) {
   const apiRequest = useApiRequest();
@@ -290,3 +290,31 @@ export function useGetSaleEstimatesState(
     { ...options },
   );
 }
+
+interface GetEstimateHtmlResponse {
+  htmlContent: string;
+}
+/**
+ * Retrieves the sale estimate html content.
+ * @param {number} invoiceId
+ * @param {UseQueryOptions<GetEstimateHtmlResponse>} options
+ * @returns {UseQueryResult<GetEstimateHtmlResponse>}
+ */
+export const useGetSaleEstimateHtml = (
+  estimateId: number,
+  options?: UseQueryOptions<GetEstimateHtmlResponse>,
+): UseQueryResult<GetEstimateHtmlResponse> => {
+  const apiRequest = useApiRequest();
+
+  return useQuery<GetEstimateHtmlResponse>(
+    ['SALE_ESTIMATE_HTML', estimateId],
+    () =>
+      apiRequest
+        .get(`sales/estimates/${estimateId}`, {
+          headers: {
+            Accept: 'application/json+html',
+          },
+        })
+        .then((res) => transformToCamelCase(res.data)),
+  );
+};