diff --git a/frontend/src/components/Activities/Activities.vue b/frontend/src/components/Activities/Activities.vue
index a9e7d41a..45518202 100644
--- a/frontend/src/components/Activities/Activities.vue
+++ b/frontend/src/components/Activities/Activities.vue
@@ -169,7 +169,7 @@
               <CommentIcon class="text-gray-800" />
             </div>
           </div>
-          <CommentContent class="mb-4" :activity="comment" />
+          <CommentArea class="mb-4" :activity="comment" />
         </div>
       </div>
     </div>
@@ -291,7 +291,7 @@
               />
             </div>
           </div>
-          <CallContent class="mb-4" :activity="call" />
+          <CallArea class="mb-4" :activity="call" />
         </div>
       </div>
     </div>
@@ -357,99 +357,14 @@
         </div>
       </div>
       <div v-if="activity.activity_type == 'communication'" class="pb-5 mt-px">
-        <div
-          class="cursor-pointer rounded-md shadow bg-white px-3 py-1.5 text-base leading-6 transition-all duration-300 ease-in-out"
-        >
-          <div class="-mb-0.5 flex items-center justify-between gap-2">
-            <div class="flex items-center gap-2">
-              <span>{{ activity.data.sender_full_name }}</span>
-              <span class="text-sm text-gray-600">
-                {{ '<' + activity.data.sender + '>' }}
-              </span>
-              <Badge
-                v-if="activity.communication_type == 'Automated Message'"
-                :label="__('Notification')"
-                variant="subtle"
-                theme="green"
-              />
-            </div>
-            <div class="flex items-center gap-2">
-              <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
-                <div class="text-sm text-gray-600">
-                  {{ __(timeAgo(activity.creation)) }}
-                </div>
-              </Tooltip>
-              <div class="flex gap-0.5">
-                <Tooltip :text="__('Reply')">
-                  <div>
-                    <Button
-                      variant="ghost"
-                      class="text-gray-700"
-                      @click="reply(activity.data)"
-                    >
-                      <template #icon>
-                        <ReplyIcon />
-                      </template>
-                    </Button>
-                  </div>
-                </Tooltip>
-                <Tooltip :text="__('Reply All')">
-                  <div>
-                    <Button
-                      variant="ghost"
-                      class="text-gray-700"
-                      @click="reply(activity.data, true)"
-                    >
-                      <template #icon>
-                        <ReplyAllIcon />
-                      </template>
-                    </Button>
-                  </div>
-                </Tooltip>
-              </div>
-            </div>
-          </div>
-          <div class="flex flex-col gap-1 text-base text-gray-800">
-            <div>
-              <span class="mr-1 text-gray-600"> {{ __('To') }}: </span>
-              <span>{{ activity.data.recipients }}</span>
-              <span v-if="activity.data.cc">, </span>
-              <span v-if="activity.data.cc" class="mr-1 text-gray-600">
-                {{ __('CC') }}:
-              </span>
-              <span v-if="activity.data.cc">{{ activity.data.cc }}</span>
-              <span v-if="activity.data.bcc">, </span>
-              <span v-if="activity.data.bcc" class="mr-1 text-gray-600">
-                {{ __('BCC') }}:
-              </span>
-              <span v-if="activity.data.bcc">{{ activity.data.bcc }}</span>
-            </div>
-            <div>
-              <span class="mr-1 text-gray-600"> {{ __('Subject') }}: </span>
-              <span>{{ activity.data.subject }}</span>
-            </div>
-          </div>
-          <div class="border-0 border-t my-3.5 border-gray-200" />
-          <EmailContent :content="activity.data.content" />
-          <div
-            v-if="activity.data?.attachments?.length"
-            class="flex flex-wrap gap-2"
-          >
-            <AttachmentItem
-              v-for="a in activity.data.attachments"
-              :key="a.file_url"
-              :label="a.file_name"
-              :url="a.file_url"
-            />
-          </div>
-        </div>
+        <EmailArea :activity="activity" />
       </div>
       <div
         class="mb-4"
         :id="activity.name"
         v-else-if="activity.activity_type == 'comment'"
       >
-        <CommentContent :activity="activity" />
+        <CommentArea :activity="activity" />
       </div>
       <div
         v-else-if="
@@ -458,7 +373,7 @@
         "
         class="mb-4"
       >
-        <CallContent :activity="activity" />
+        <CallArea :activity="activity" />
       </div>
       <div v-else class="mb-4 flex flex-col gap-2 py-1.5">
         <div class="flex items-center justify-stretch gap-2 text-base">
@@ -680,9 +595,9 @@
   />
 </template>
 <script setup>
-import EmailContent from '@/components/Activities/EmailContent.vue'
-import CommentContent from '@/components/Activities/CommentContent.vue'
-import CallContent from '@/components/Activities/CallContent.vue'
+import EmailArea from '@/components/Activities/EmailArea.vue'
+import CommentArea from '@/components/Activities/CommentArea.vue'
+import CallArea from '@/components/Activities/CallArea.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
 import Email2Icon from '@/components/Icons/Email2Icon.vue'
@@ -705,9 +620,6 @@ import MissedCallIcon from '@/components/Icons/MissedCallIcon.vue'
 import DeclinedCallIcon from '@/components/Icons/DeclinedCallIcon.vue'
 import InboundCallIcon from '@/components/Icons/InboundCallIcon.vue'
 import OutboundCallIcon from '@/components/Icons/OutboundCallIcon.vue'
-import ReplyIcon from '@/components/Icons/ReplyIcon.vue'
-import ReplyAllIcon from '@/components/Icons/ReplyAllIcon.vue'
-import AttachmentItem from '@/components/AttachmentItem.vue'
 import FadedScrollableDiv from '@/components/FadedScrollableDiv.vue'
 import CommunicationArea from '@/components/CommunicationArea.vue'
 import NoteModal from '@/components/Modals/NoteModal.vue'
@@ -730,7 +642,6 @@ import {
   Tooltip,
   Dropdown,
   TextEditor,
-  Badge,
   createResource,
   call,
 } from 'frappe-ui'
diff --git a/frontend/src/components/Activities/CallContent.vue b/frontend/src/components/Activities/CallArea.vue
similarity index 100%
rename from frontend/src/components/Activities/CallContent.vue
rename to frontend/src/components/Activities/CallArea.vue
diff --git a/frontend/src/components/Activities/CommentContent.vue b/frontend/src/components/Activities/CommentArea.vue
similarity index 100%
rename from frontend/src/components/Activities/CommentContent.vue
rename to frontend/src/components/Activities/CommentArea.vue
diff --git a/frontend/src/components/Activities/EmailArea.vue b/frontend/src/components/Activities/EmailArea.vue
new file mode 100644
index 00000000..ed9cef0a
--- /dev/null
+++ b/frontend/src/components/Activities/EmailArea.vue
@@ -0,0 +1,97 @@
+<template>
+  <div
+    class="cursor-pointer rounded-md shadow bg-white px-3 py-1.5 text-base leading-6 transition-all duration-300 ease-in-out"
+  >
+    <div class="-mb-0.5 flex items-center justify-between gap-2">
+      <div class="flex items-center gap-2">
+        <span>{{ activity.data.sender_full_name }}</span>
+        <span class="text-sm text-gray-600">
+          {{ '<' + activity.data.sender + '>' }}
+        </span>
+        <Badge
+          v-if="activity.communication_type == 'Automated Message'"
+          :label="__('Notification')"
+          variant="subtle"
+          theme="green"
+        />
+      </div>
+      <div class="flex items-center gap-2">
+        <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
+          <div class="text-sm text-gray-600">
+            {{ __(timeAgo(activity.creation)) }}
+          </div>
+        </Tooltip>
+        <div class="flex gap-0.5">
+          <Tooltip :text="__('Reply')">
+            <div>
+              <Button
+                variant="ghost"
+                class="text-gray-700"
+                @click="reply(activity.data)"
+              >
+                <template #icon>
+                  <ReplyIcon />
+                </template>
+              </Button>
+            </div>
+          </Tooltip>
+          <Tooltip :text="__('Reply All')">
+            <div>
+              <Button
+                variant="ghost"
+                class="text-gray-700"
+                @click="reply(activity.data, true)"
+              >
+                <template #icon>
+                  <ReplyAllIcon />
+                </template>
+              </Button>
+            </div>
+          </Tooltip>
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col gap-1 text-base text-gray-800">
+      <div>
+        <span class="mr-1 text-gray-600"> {{ __('To') }}: </span>
+        <span>{{ activity.data.recipients }}</span>
+        <span v-if="activity.data.cc">, </span>
+        <span v-if="activity.data.cc" class="mr-1 text-gray-600">
+          {{ __('CC') }}:
+        </span>
+        <span v-if="activity.data.cc">{{ activity.data.cc }}</span>
+        <span v-if="activity.data.bcc">, </span>
+        <span v-if="activity.data.bcc" class="mr-1 text-gray-600">
+          {{ __('BCC') }}:
+        </span>
+        <span v-if="activity.data.bcc">{{ activity.data.bcc }}</span>
+      </div>
+      <div>
+        <span class="mr-1 text-gray-600"> {{ __('Subject') }}: </span>
+        <span>{{ activity.data.subject }}</span>
+      </div>
+    </div>
+    <div class="border-0 border-t my-3.5 border-gray-200" />
+    <EmailContent :content="activity.data.content" />
+    <div v-if="activity.data?.attachments?.length" class="flex flex-wrap gap-2">
+      <AttachmentItem
+        v-for="a in activity.data.attachments"
+        :key="a.file_url"
+        :label="a.file_name"
+        :url="a.file_url"
+      />
+    </div>
+  </div>
+</template>
+<script setup>
+import ReplyIcon from '@/components/Icons/ReplyIcon.vue'
+import ReplyAllIcon from '@/components/Icons/ReplyAllIcon.vue'
+import AttachmentItem from '@/components/AttachmentItem.vue'
+import EmailContent from '@/components/Activities/EmailContent.vue'
+import { Badge, Tooltip } from 'frappe-ui'
+import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
+
+const props = defineProps({
+  activity: Object,
+})
+</script>