diff --git a/app/javascript/dashboard/components-next/message/bubbles/Email/EmailMeta.vue b/app/javascript/dashboard/components-next/message/bubbles/Email/EmailMeta.vue
new file mode 100644
index 000000000..9532a3a50
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Email/EmailMeta.vue
@@ -0,0 +1,92 @@
+<script setup>
+import { computed } from 'vue';
+import { MESSAGE_STATUS } from '../../constants';
+
+const props = defineProps({
+  contentAttributes: {
+    type: Object,
+    default: () => ({}),
+  },
+  status: {
+    type: String,
+    required: true,
+    validator: value => Object.values(MESSAGE_STATUS).includes(value),
+  },
+});
+
+const hasError = computed(() => {
+  return props.status === MESSAGE_STATUS.FAILED;
+});
+
+const fromEmail = computed(() => {
+  return props.contentAttributes?.email?.from ?? [];
+});
+
+const toEmail = computed(() => {
+  return props.contentAttributes?.email?.to ?? [];
+});
+
+const ccEmail = computed(() => {
+  return (
+    props.contentAttributes?.ccEmail ?? props.contentAttributes?.email?.cc ?? []
+  );
+});
+
+const senderName = computed(() => {
+  return props.sender.name ?? '';
+});
+
+const bccEmail = computed(() => {
+  return (
+    props.contentAttributes?.bccEmail ??
+    props.contentAttributes?.email?.bcc ??
+    []
+  );
+});
+
+const subject = computed(() => {
+  return props.contentAttributes?.email?.subject ?? '';
+});
+
+const showMeta = computed(() => {
+  return (
+    fromEmail.value[0] ||
+    toEmail.value.length ||
+    ccEmail.value.length ||
+    bccEmail.value.length ||
+    subject.value
+  );
+});
+</script>
+
+<template>
+  <section
+    v-show="showMeta"
+    class="p-4 space-y-1 pr-9 border-b border-n-strong"
+    :class="hasError ? 'text-n-ruby-11' : 'text-n-slate-11'"
+  >
+    <template v-if="showMeta">
+      <div v-if="fromEmail[0]">
+        <span :class="hasError ? 'text-n-ruby-11' : 'text-n-slate-12'">
+          {{ senderName }}
+        </span>
+        &lt;{{ fromEmail[0] }}&gt;
+      </div>
+      <div v-if="toEmail.length">
+        {{ $t('EMAIL_HEADER.TO') }}: {{ toEmail.join(', ') }}
+      </div>
+      <div v-if="ccEmail.length">
+        {{ $t('EMAIL_HEADER.CC') }}:
+        {{ ccEmail }}
+      </div>
+      <div v-if="bccEmail.length">
+        {{ $t('EMAIL_HEADER.BCC') }}:
+        {{ bccEmail }}
+      </div>
+      <div v-if="subject">
+        {{ $t('EMAIL_HEADER.SUBJECT') }}:
+        {{ subject }}
+      </div>
+    </template>
+  </section>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Email.vue b/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
similarity index 56%
rename from app/javascript/dashboard/components-next/message/bubbles/Email.vue
rename to app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
index 4016b2f52..dbb6a0a71 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Email.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
@@ -1,11 +1,13 @@
 <script setup>
 import { computed, useTemplateRef, ref, watch } from 'vue';
 import { Letter } from 'vue-letter';
+
 import Icon from 'next/icon/Icon.vue';
 import BaseBubble from 'next/message/bubbles/Base.vue';
 import AttachmentChips from 'next/message/chips/AttachmentChips.vue';
 
-import { MESSAGE_STATUS } from '../constants';
+import EmailMeta from './EmailMeta.vue';
+import { MESSAGE_STATUS } from '../../constants';
 
 const props = defineProps({
   content: {
@@ -45,10 +47,6 @@ watch(
   { immediate: true }
 );
 
-const hasError = computed(() => {
-  return props.status === MESSAGE_STATUS.FAILED;
-});
-
 const contentToShow = computed(() => {
   return props.contentAttributes?.email?.htmlContent?.full ?? props.content;
 });
@@ -58,77 +56,11 @@ const textToShow = computed(() => {
     props.contentAttributes?.email?.textContent?.full ?? props.content;
   return text.replace(/\n/g, '<br>');
 });
-
-const fromEmail = computed(() => {
-  return props.contentAttributes?.email?.from ?? [];
-});
-
-const toEmail = computed(() => {
-  return props.contentAttributes?.email?.to ?? [];
-});
-
-const ccEmail = computed(() => {
-  return (
-    props.contentAttributes?.ccEmail ?? props.contentAttributes?.email?.cc ?? []
-  );
-});
-
-const senderName = computed(() => {
-  return props.sender.name ?? '';
-});
-
-const bccEmail = computed(() => {
-  return (
-    props.contentAttributes?.bccEmail ??
-    props.contentAttributes?.email?.bcc ??
-    []
-  );
-});
-
-const subject = computed(() => {
-  return props.contentAttributes?.email?.subject ?? '';
-});
-
-const showMeta = computed(() => {
-  return (
-    fromEmail.value[0] ||
-    toEmail.value.length ||
-    ccEmail.value.length ||
-    bccEmail.value.length ||
-    subject.value
-  );
-});
 </script>
 
 <template>
   <BaseBubble class="w-full overflow-hidden">
-    <section
-      v-if="showMeta"
-      class="p-4 space-y-1 pr-9 border-b border-n-strong"
-      :class="hasError ? 'text-n-ruby-11' : 'text-n-slate-11'"
-    >
-      <div v-if="fromEmail[0]">
-        <span :class="hasError ? 'text-n-ruby-11' : 'text-n-slate-12'">
-          {{ senderName }}
-        </span>
-        &lt;{{ fromEmail[0] }}&gt;
-      </div>
-      <div v-if="toEmail.length">
-        {{ $t('EMAIL_HEADER.TO') }}: {{ toEmail.join(', ') }}
-      </div>
-      <div v-if="ccEmail.length">
-        {{ $t('EMAIL_HEADER.CC') }}:
-        {{ ccEmail }}
-      </div>
-      <div v-if="bccEmail.length">
-        {{ $t('EMAIL_HEADER.BCC') }}:
-        {{ bccEmail }}
-      </div>
-      <div v-if="subject">
-        {{ $t('EMAIL_HEADER.SUBJECT') }}:
-        {{ subject }}
-      </div>
-    </section>
+    <EmailMeta :status :sender :content-attributes />
     <section
       ref="contentContainer"
       class="p-4"