diff --git a/packages/server/src/services/MailNotification/ContactMailNotification.ts b/packages/server/src/services/MailNotification/ContactMailNotification.ts
index f5214794b..725e28821 100644
--- a/packages/server/src/services/MailNotification/ContactMailNotification.ts
+++ b/packages/server/src/services/MailNotification/ContactMailNotification.ts
@@ -79,7 +79,7 @@ export class ContactMailNotification {
       .withGraphFetched('metadata');
 
     return {
-      CompanyName: organization.metadata.name,
+      ['Company Name']: organization.metadata.name,
     };
   }
 }
diff --git a/packages/server/src/services/Sales/Invoices/SendInvoiceInvoiceMailCommon.ts b/packages/server/src/services/Sales/Invoices/SendInvoiceInvoiceMailCommon.ts
index 10ccedbbb..16ee5bd9f 100644
--- a/packages/server/src/services/Sales/Invoices/SendInvoiceInvoiceMailCommon.ts
+++ b/packages/server/src/services/Sales/Invoices/SendInvoiceInvoiceMailCommon.ts
@@ -106,18 +106,18 @@ export class SendSaleInvoiceMailCommon {
       tenantId,
       invoiceId
     );
-    const commonArgs =
-      await this.contactMailNotification.getCommonFormatArgs(tenantId);
-
+    const commonArgs = await this.contactMailNotification.getCommonFormatArgs(
+      tenantId
+    );
     return {
       ...commonArgs,
-      CustomerName: invoice.customer.displayName,
-      InvoiceNumber: invoice.invoiceNo,
-      InvoiceDueAmount: invoice.dueAmountFormatted,
-      InvoiceDueDate: invoice.dueDateFormatted,
-      InvoiceDate: invoice.invoiceDateFormatted,
-      InvoiceAmount: invoice.totalFormatted,
-      OverdueDays: invoice.overdueDays,
+      ['Customer Name']: invoice.customer.displayName,
+      ['Invoice Number']: invoice.invoiceNo,
+      ['Invoice DueAmount']: invoice.dueAmountFormatted,
+      ['Invoice DueDate']: invoice.dueDateFormatted,
+      ['Invoice Date']: invoice.invoiceDateFormatted,
+      ['Invoice Amount']: invoice.totalFormatted,
+      ['Overdue Days']: invoice.overdueDays,
     };
   };
 }
diff --git a/packages/server/src/services/Sales/Invoices/constants.ts b/packages/server/src/services/Sales/Invoices/constants.ts
index 4a67b6780..cff791b3c 100644
--- a/packages/server/src/services/Sales/Invoices/constants.ts
+++ b/packages/server/src/services/Sales/Invoices/constants.ts
@@ -1,19 +1,19 @@
 import config from '@/config';
 
 export const DEFAULT_INVOICE_MAIL_SUBJECT =
-  'Invoice {InvoiceNumber} from {CompanyName}';
+  'Invoice {Invoice Number} from {Company Name}';
 export const DEFAULT_INVOICE_MAIL_CONTENT = `
-<p>Dear {CustomerName}</p>
+<p>Dear {Customer Name}</p>
 <p>Thank you for your business, You can view or print your invoice from attachements.</p>
 <p>
-Invoice <strong>#{InvoiceNumber}</strong><br />
-Due Date : <strong>{InvoiceDueDate}</strong><br />
-Amount   : <strong>{InvoiceAmount}</strong></br />
+Invoice <strong>#{Invoice Number}</strong><br />
+Due Date : <strong>{Invoice Due Date}</strong><br />
+Amount   : <strong>{Invoice Amount}</strong></br />
 </p>
 
 <p>
 <i>Regards</i><br />
-<i>{CompanyName}</i>
+<i>{Company Name}</i>
 </p>
 `;
 
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx
index c6a761fbe..226b9c335 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx
@@ -17,7 +17,7 @@ import {
 } from '@/components';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
 import { useDrawerActions } from '@/hooks/state';
-import { useInvoiceMailItems } from './_hooks';
+import { useInvoiceMailItems, useSendInvoiceFormatArgsOptions } from './_hooks';
 
 // Create new account renderer.
 const createNewItemRenderer = (query, active, handleClick) => {
@@ -65,6 +65,7 @@ export function InvoiceSendMailFields() {
 
   const { values, setFieldValue } = useFormikContext();
   const items = useInvoiceMailItems();
+  const argsOptions = useSendInvoiceFormatArgsOptions();
 
   const handleClickCcBtn = (event) => {
     event.preventDefault();
@@ -124,7 +125,7 @@ export function InvoiceSendMailFields() {
     if (!textarea) return;
 
     const { selectionStart, selectionEnd, value: text } = textarea;
-    const insertText = item.value;
+    const insertText = `{${item.value}}`;
     const message =
       text.substring(0, selectionStart) +
       insertText +
@@ -224,7 +225,7 @@ export function InvoiceSendMailFields() {
               <FSelect
                 selectedItem={'customerName'}
                 name={'item'}
-                items={[{ value: 'CustomerName', text: 'Customer Name' }]}
+                items={argsOptions}
                 onItemChange={handleTextareaChange}
                 popoverProps={{
                   fill: false,
@@ -238,7 +239,7 @@ export function InvoiceSendMailFields() {
                       <Icon icon={'caret-down-16'} color={'#8F99A8'} />
                     }
                   >
-                    {text}
+                    Insert Variable
                   </Button>
                 )}
                 fill={false}
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/_hooks.ts b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/_hooks.ts
index 25a8752a4..2fdf50afe 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/_hooks.ts
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/_hooks.ts
@@ -1,8 +1,9 @@
 import { useFormikContext } from 'formik';
-import { camelCase, chain, defaultTo, mapKeys, upperFirst } from 'lodash';
+import { useMemo } from 'react';
+import { SelectOptionProps } from '@blueprintjs-formik/select';
+import { chain, defaultTo, mapKeys, snakeCase, startCase } from 'lodash';
 import { InvoiceSendMailFormValues } from './_types';
 import { useInvoiceSendMailBoot } from './InvoiceSendMailContentBoot';
-import { useMemo } from 'react';
 
 export const useInvoiceMailItems = () => {
   const { values } = useFormikContext<InvoiceSendMailFormValues>();
@@ -19,24 +20,33 @@ export const useInvoiceMailItems = () => {
     .value();
 };
 
-export const useSendInvoiceMailFormatArgs = () => {
+export const useSendInvoiceMailFormatArgs = (): Record<string, string> => {
   const { invoiceMailOptions } = useInvoiceSendMailBoot();
 
   return useMemo(() => {
     return mapKeys(invoiceMailOptions?.formatArgs, (_, key) =>
-      upperFirst(camelCase(key)),
+      startCase(snakeCase(key).replace('_', ' ')),
     );
   }, [invoiceMailOptions]);
 };
 
-export const useSendInvoiceMailSubject = () => {
+export const useSendInvoiceMailSubject = (): string => {
   const { values } = useFormikContext<InvoiceSendMailFormValues>();
   const formatArgs = useSendInvoiceMailFormatArgs();
 
   return formatSmsMessage(values?.subject, formatArgs);
 };
 
-export const useSendInvoiceMailMessage = () => {
+export const useSendInvoiceFormatArgsOptions = (): Array<SelectOptionProps> => {
+  const formatArgs = useSendInvoiceMailFormatArgs();
+
+  return Object.keys(formatArgs).map((key) => ({
+    value: key,
+    text: key,
+  }));
+};
+
+export const useSendInvoiceMailMessage = (): string => {
   const { values } = useFormikContext<InvoiceSendMailFormValues>();
   const formatArgs = useSendInvoiceMailFormatArgs();