diff --git a/packages/backend/src/apps/postman/actions/send-transactional-email/get-data-out-metadata.ts b/packages/backend/src/apps/postman/actions/send-transactional-email/get-data-out-metadata.ts
index 27b4ff4aa..7d71dd0d0 100644
--- a/packages/backend/src/apps/postman/actions/send-transactional-email/get-data-out-metadata.ts
+++ b/packages/backend/src/apps/postman/actions/send-transactional-email/get-data-out-metadata.ts
@@ -16,7 +16,7 @@ async function getDataOutMetadata(
     body: {
       label: 'Body',
       order: 2,
-      type: 'html',
+      type: 'email',
       displayedValue: 'Preview body',
     },
     recipient: {
diff --git a/packages/frontend/src/components/EmailPreviewModal/index.tsx b/packages/frontend/src/components/EmailPreviewModal/index.tsx
index bec1e9305..e52fe525f 100644
--- a/packages/frontend/src/components/EmailPreviewModal/index.tsx
+++ b/packages/frontend/src/components/EmailPreviewModal/index.tsx
@@ -85,12 +85,14 @@ interface EmailPreviewModalProps {
   isOpen: boolean
   onClose: () => void
   html: string
+  title: string
 }
 
 export default function EmailPreviewModal({
   isOpen,
   onClose,
   html,
+  title,
 }: EmailPreviewModalProps) {
   const [selectedClientId, setSelectedClientId] = useState<string>(
     'outlook-windows-legacy',
@@ -117,7 +119,7 @@ export default function EmailPreviewModal({
       <ModalOverlay />
       <ModalContent maxH="85vh" overflow="hidden" borderRadius="lg">
         <ModalHeader borderBottom="1px solid" borderColor="base.divider.medium">
-          <Flex direction="column">Preview your email</Flex>
+          <Flex direction="column">{title}</Flex>
           <ModalCloseButton />
         </ModalHeader>
         <ModalBody p={4}>
diff --git a/packages/frontend/src/components/RichTextEditor/PreviewButton.tsx b/packages/frontend/src/components/RichTextEditor/PreviewButton.tsx
index 74c3d4d05..75e195d6d 100644
--- a/packages/frontend/src/components/RichTextEditor/PreviewButton.tsx
+++ b/packages/frontend/src/components/RichTextEditor/PreviewButton.tsx
@@ -38,7 +38,7 @@ function usePreviewer(previewType: TFieldPreviewType | undefined) {
     (props: PreviewerProps): ReactNode => {
       switch (previewType) {
         case 'email':
-          return <LazyEmailPreviewModal {...props} />
+          return <LazyEmailPreviewModal {...props} title="Preview your email" />
       }
       return null
     },
diff --git a/packages/frontend/src/components/VariablesList/VariableItemWithModal.tsx b/packages/frontend/src/components/VariablesList/VariableItemWithModal.tsx
index bb05b5b9c..cbb81dbb5 100644
--- a/packages/frontend/src/components/VariablesList/VariableItemWithModal.tsx
+++ b/packages/frontend/src/components/VariablesList/VariableItemWithModal.tsx
@@ -1,4 +1,4 @@
-import { useContext } from 'react'
+import { lazy, Suspense, useCallback, useContext, useTransition } from 'react'
 import { useDisclosure } from '@chakra-ui/react'
 
 import { EditorContext } from '@/contexts/Editor'
@@ -9,6 +9,8 @@ import HtmlVariableModal from './HtmlVariableModal'
 import TableVariableModal from './TableVariableModal'
 import { VariableItem } from '.'
 
+const LazyEmailPreviewModal = lazy(() => import('../EmailPreviewModal'))
+
 interface VariableItemWithModalProps {
   variable: Variable
   onClick?: (variable: Variable) => void
@@ -35,7 +37,16 @@ export default function VariableItemWithModal(
   const canOpenModal =
     // we do not want to show a table preview if there are no rows
     (variable.type === 'table' && variable.displayedValue !== '0 rows') ||
-    variable.type === 'html'
+    variable.type === 'html' ||
+    variable.type === 'email'
+
+  const preloadModal = useCallback(() => {
+    if (variable.type === 'email') {
+      import('../EmailPreviewModal')
+    }
+  }, [variable.type])
+
+  const [isPending, startTransition] = useTransition()
 
   const handleClick = () => {
     if (!onClick) {
@@ -87,6 +98,19 @@ export default function VariableItemWithModal(
             onClose={onModalClose}
           />
         )
+      case 'email':
+        return (
+          <Suspense fallback={null}>
+            {isModalOpen && (
+              <LazyEmailPreviewModal
+                isOpen={isModalOpen}
+                onClose={onModalClose}
+                html={(variable.value as string) ?? ''}
+                title="View email"
+              />
+            )}
+          </Suspense>
+        )
     }
   }
 
@@ -97,8 +121,14 @@ export default function VariableItemWithModal(
         <VariableItem
           key={`variable-${variable.name}`}
           variable={variable}
-          onClick={canOpenModal ? onModalOpen : undefined}
+          onClick={
+            canOpenModal
+              ? () => startTransition(() => onModalOpen())
+              : undefined
+          }
           withViewButton={canOpenModal}
+          onViewButtonPreload={preloadModal}
+          isViewButtonLoading={isPending}
         />
         {renderModal()}
       </>
diff --git a/packages/frontend/src/components/VariablesList/index.tsx b/packages/frontend/src/components/VariablesList/index.tsx
index 067f4c08c..1f18a8bba 100644
--- a/packages/frontend/src/components/VariablesList/index.tsx
+++ b/packages/frontend/src/components/VariablesList/index.tsx
@@ -22,7 +22,7 @@ import { POPOVER_MOTION_PROPS } from '@/theme/constants'
 
 import VariableItemWithModal from './VariableItemWithModal'
 
-const VARIABLES_WITH_MODALS = ['table', 'html']
+const VARIABLES_WITH_MODALS = ['table', 'html', 'email']
 const VARIABLE_ITEM_HEIGHT = 77
 const SUGGESTION_VARIABLE_ITEM_HEIGHT = 61
 
@@ -92,11 +92,15 @@ export function VariableItem({
   onClick,
   isLast,
   withViewButton,
+  onViewButtonPreload,
+  isViewButtonLoading,
 }: {
   variable: Variable
   onClick?: (variable: Variable) => void
   isLast?: boolean
   withViewButton?: boolean
+  onViewButtonPreload?: () => void
+  isViewButtonLoading?: boolean
 }): JSX.Element {
   const shouldShowBottomBorder = !withViewButton && (onClick || isLast)
 
@@ -172,7 +176,14 @@ export function VariableItem({
         </Flex>
 
         {onClick && withViewButton && (
-          <Button variant="clear" onClick={() => onClick(variable)}>
+          <Button
+            variant="clear"
+            onClick={() => onClick(variable)}
+            onMouseEnter={onViewButtonPreload}
+            onFocus={onViewButtonPreload}
+            onPointerDown={onViewButtonPreload}
+            isLoading={isViewButtonLoading}
+          >
             View
           </Button>
         )}
diff --git a/packages/frontend/src/helpers/variables.ts b/packages/frontend/src/helpers/variables.ts
index e14546047..0edf2575f 100644
--- a/packages/frontend/src/helpers/variables.ts
+++ b/packages/frontend/src/helpers/variables.ts
@@ -19,6 +19,7 @@ export const VISIBLE_VARIABLE_TYPES: TDataOutMetadatumType[] = [
   'approval',
   'ai_response',
   'html',
+  'email',
 ]
 
 export interface StepWithVariables {
diff --git a/packages/types/index.d.ts b/packages/types/index.d.ts
index 91f9b2047..92ca87657 100644
--- a/packages/types/index.d.ts
+++ b/packages/types/index.d.ts
@@ -63,6 +63,7 @@ export type TDataOutMetadatumType =
   | 'approval'
   | 'ai_response'
   | 'html'
+  | 'email'
 
 /**
  * This should only be defined on _leaf_ nodes (i.e. **primitive array