diff --git a/app/javascript/dashboard/components-next/message/EmailMessages.story.vue b/app/javascript/dashboard/components-next/message/EmailMessages.story.vue
new file mode 100644
index 000000000..511ef5dad
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/EmailMessages.story.vue
@@ -0,0 +1,17 @@
+<script setup>
+import Message from './Message.vue';
+
+import simpleEmail from './fixtures/simpleEmail.js';
+
+const messages = simpleEmail;
+</script>
+
+<template>
+  <Story title="Components/Messages/Email" :layout="{ type: 'single' }">
+    <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+      <template v-for="message in messages" :key="message.id">
+        <Message :current-user-id="1" is-email-inbox v-bind="message" />
+      </template>
+    </div>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/Message.vue b/app/javascript/dashboard/components-next/message/Message.vue
index 4b8c5138d..376e280f9 100644
--- a/app/javascript/dashboard/components-next/message/Message.vue
+++ b/app/javascript/dashboard/components-next/message/Message.vue
@@ -18,6 +18,7 @@ import ImageBubble from './bubbles/Image.vue';
 import FileBubble from './bubbles/File.vue';
 import AudioBubble from './bubbles/Audio.vue';
 import AttachmentsBubble from './bubbles/Attachments.vue';
+import EmailBubble from './bubbles/Email.vue';
 
 import MessageError from './MessageError.vue';
 import MessageMeta from './MessageMeta.vue';
@@ -127,6 +128,10 @@ const props = defineProps({
     type: Object,
     default: null,
   },
+  isEmailInbox: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 /**
@@ -136,6 +141,12 @@ const props = defineProps({
 const variant = computed(() => {
   if (props.private) return MESSAGE_VARIANTS.PRIVATE;
   if (props.status === MESSAGE_STATUS.FAILED) return MESSAGE_VARIANTS.ERROR;
+  if (props.isEmailInbox) {
+    const emailInboxTypes = [MESSAGE_TYPES.INCOMING, MESSAGE_TYPES.OUTGOING];
+    if (emailInboxTypes.includes(props.messageType)) {
+      return MESSAGE_VARIANTS.EMAIL;
+    }
+  }
 
   const variants = {
     [MESSAGE_TYPES.INCOMING]: MESSAGE_VARIANTS.USER,
@@ -152,6 +163,7 @@ const isMyMessage = computed(() => {
   const senderType = props.senderType ?? props.sender?.type;
 
   if (!senderType || !senderId) return false;
+
   return (
     senderType.toLowerCase() === SENDER_TYPES.USER.toLowerCase() &&
     props.currentUserId === senderId
@@ -220,6 +232,11 @@ const shouldShowAvatar = computed(() => {
 });
 
 const componentToRender = computed(() => {
+  if (props.isEmailInbox && !props.private) {
+    const emailInboxTypes = [MESSAGE_TYPES.INCOMING, MESSAGE_TYPES.OUTGOING];
+    if (emailInboxTypes.includes(props.messageType)) return EmailBubble;
+  }
+
   if (props.attachments.length === 1 && !props.content) {
     const fileType = props.attachments[0].fileType;
     if (fileType === ATTACHMENT_TYPES.IMAGE) return ImageBubble;
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Email.vue b/app/javascript/dashboard/components-next/message/bubbles/Email.vue
new file mode 100644
index 000000000..d588c6d75
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Email.vue
@@ -0,0 +1,16 @@
+<script setup>
+import BaseBubble from 'next/message/bubbles/Base.vue';
+
+defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <BaseBubble class="w-full">
+    <div class="p-4 prose prose-sm max-w-none" v-html="content" />
+  </BaseBubble>
+</template>