diff --git a/desk/src/components/CommentBox.vue b/desk/src/components/CommentBox.vue
index 9837be3f4..ab4e4c556 100644
--- a/desk/src/components/CommentBox.vue
+++ b/desk/src/components/CommentBox.vue
@@ -58,28 +58,14 @@ import { useAuthStore } from "@/stores/auth";
 
 const authStore = useAuthStore();
 const props = defineProps({
-  name: {
-    type: String,
-    required: true,
-  },
-  creation: {
-    type: String,
-    required: true,
-  },
-  content: {
-    type: String,
-    required: true,
-  },
-  commenter: {
-    type: String,
-    required: true,
-  },
-  commentedBy: {
-    type: String,
+  activity: {
+    type: Object,
     required: true,
   },
 });
 
+const { name, creation, content, commenter, commentedBy } = props.activity;
+
 const emit = defineEmits(["update"]);
 const showDialog = ref(false);
 
@@ -87,7 +73,7 @@ const deleteComment = createResource({
   url: "frappe.client.delete",
   makeParams: () => ({
     doctype: "HD Ticket Comment",
-    name: props.name,
+    name: name,
   }),
   onSuccess() {
     emit("update");
diff --git a/desk/src/components/CommunicationArea.vue b/desk/src/components/CommunicationArea.vue
index c2bb85dc5..5930a5469 100644
--- a/desk/src/components/CommunicationArea.vue
+++ b/desk/src/components/CommunicationArea.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col comm-area">
-    <div class="flex justify-between gap-3 border-t px-10 py-2.5">
+    <div class="flex justify-between gap-3 border-t px-4 lg:px-10 py-2.5">
       <div class="flex gap-1.5">
         <Button
           ref="sendEmailRef"
@@ -135,6 +135,8 @@ const props = defineProps({
 defineExpose({
   replyToEmail,
   toggleEmailBox,
+  toggleCommentBox,
+  editor: emailEditorRef,
 });
 </script>
 
diff --git a/desk/src/components/EmailBox.vue b/desk/src/components/EmailArea.vue
similarity index 62%
rename from desk/src/components/EmailBox.vue
rename to desk/src/components/EmailArea.vue
index 0c7fa7410..e55cc7d73 100644
--- a/desk/src/components/EmailBox.vue
+++ b/desk/src/components/EmailArea.vue
@@ -34,7 +34,7 @@
           @click="
             emit('reply', {
               content: content,
-              to: sender.name,
+              to: to ?? sender.name,
             })
           "
         >
@@ -56,9 +56,9 @@
         </Button>
       </div>
     </div>
-    <div class="text-sm leading-5 text-gray-600">
+    <!-- <div class="text-sm leading-5 text-gray-600">
       {{ subject }}
-    </div>
+    </div> -->
     <div class="mb-3 text-sm leading-5 text-gray-600">
       <span v-if="to" class="text-2xs mr-1 font-bold text-gray-500">TO:</span>
       <span v-if="to"> {{ to }} </span>
@@ -71,10 +71,11 @@
       </span>
       <span v-if="bcc">{{ bcc }}</span>
     </div>
-    <div
+    <!-- <div
       class="email-content prose-f max-h-[500px] overflow-y-auto"
       v-html="content"
-    />
+    /> -->
+    <EmailContent :content="content" :emailBox="emailBox" />
     <div class="flex flex-wrap gap-2">
       <AttachmentItem
         v-for="a in attachments"
@@ -89,35 +90,74 @@
 <script setup lang="ts">
 import { UserAvatar, AttachmentItem } from "@/components";
 import { dateFormat, timeAgo, dateTooltipFormat } from "@/utils";
-import { ReplyIcon, ReplyAllIcon } from "./icons/";
+import { ReplyIcon, ReplyAllIcon } from "./icons";
 import { useScreenSize } from "@/composables/screen";
+import { inject } from "vue";
 
 const props = defineProps({
-  sender: {
+  activity: {
     type: Object,
     required: true,
   },
-  to: { type: String, default: null },
-  cc: { type: String, default: null },
-  bcc: { type: String, default: null },
-  creation: { type: String, required: true },
-  subject: {
-    type: String,
-    required: true,
-  },
-  attachments: {
-    type: Array,
-    default: () => [],
-  },
-  content: {
-    type: String,
-    required: true,
-  },
 });
 
+const { sender, to, cc, bcc, creation, subject, attachments, content } =
+  props.activity;
+
 const emit = defineEmits(["reply"]);
 
+let emailBox = inject("communicationArea");
 const { isMobileView } = useScreenSize();
+
+// TODO: Implement reply functionality using this way instead of emit drillup
+// function reply(email, reply_all = false) {
+//   emailBox.toggleEmailBox();
+//   let editor = emailBox.editor;
+//   let message = email.content;
+//   let recipients = sender.name;
+//   editor.toEmails = [email.sender];
+//   editor.cc = editor.bcc = false;
+//   editor.ccEmails = [];
+//   editor.bccEmails = [];
+//   console.log(recipients);
+
+//   if (!email.subject.startsWith("Re:")) {
+//     editor.subject = `Re: ${email.subject}`;
+//   } else {
+//     editor.subject = email.subject;
+//   }
+
+//   if (reply_all) {
+//     let cc = email.cc?.split(",").map((r) => r.trim());
+//     let bcc = email.bcc?.split(",").map((r) => r.trim());
+
+//     if (cc?.length) {
+//       recipients = recipients.filter((r) => !cc?.includes(r));
+//       cc.push(...recipients);
+//     } else {
+//       cc = recipients;
+//     }
+
+//     editor.cc = cc ? true : false;
+//     editor.bcc = bcc ? true : false;
+
+//     editor.ccEmails = cc;
+//     editor.bccEmails = bcc;
+//   }
+
+//   let repliedMessage = `<blockquote>${message}</blockquote>`;
+
+//   editor.editor
+//     .chain()
+//     .clearContent()
+//     .insertContent("<p>.</p>")
+//     .updateAttributes("paragraph", { class: "reply-to-content" })
+//     .insertContent(repliedMessage)
+//     .focus("all")
+//     .insertContentAt(0, { type: "paragraph" })
+//     .focus("start")
+//     .run();
+// }
 </script>
 
 <style>
diff --git a/desk/src/components/EmailContent.vue b/desk/src/components/EmailContent.vue
new file mode 100644
index 000000000..52f662cbf
--- /dev/null
+++ b/desk/src/components/EmailContent.vue
@@ -0,0 +1,246 @@
+<template>
+  <iframe
+    ref="iframeRef"
+    :srcdoc="htmlContent"
+    class="prose-f block h-10 max-h-[500px] w-full"
+  />
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+
+const props = defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+});
+
+const files = import.meta.globEager("/src/index.css", { query: "?inline" });
+const css = files["/src/index.css"].default;
+
+const iframeRef = ref(null);
+const _content = ref(props.content);
+
+const parser = new DOMParser();
+const doc = parser.parseFromString(_content.value, "text/html");
+
+const gmailReplyToContent = doc.querySelectorAll("div.gmail_quote");
+const outlookReplyToContent = doc.querySelectorAll("div#appendonsend");
+const replyToContent = doc.querySelectorAll("p.reply-to-content");
+
+if (gmailReplyToContent.length) {
+  _content.value = parseReplyToContent(doc, "div.gmail_quote", true);
+} else if (outlookReplyToContent.length) {
+  _content.value = parseReplyToContent(doc, "div#appendonsend");
+} else if (replyToContent.length) {
+  _content.value = parseReplyToContent(doc, "p.reply-to-content");
+}
+
+function parseReplyToContent(doc, selector, forGmail = false) {
+  function handleAllInstances(doc) {
+    const replyToContentElements = doc.querySelectorAll(selector);
+    if (replyToContentElements.length === 0) return;
+    const replyToContentElement = replyToContentElements[0];
+    replaceReplyToContent(replyToContentElement, forGmail);
+    handleAllInstances(doc);
+  }
+
+  handleAllInstances(doc);
+
+  return doc.body.innerHTML;
+}
+
+function replaceReplyToContent(replyToContentElement, forGmail) {
+  if (!replyToContentElement) return;
+  let randomId = Math.random().toString(36).substring(2, 7);
+  const wrapper = doc.createElement("div");
+  wrapper.classList.add("replied-content");
+
+  const collapseLabel = doc.createElement("label");
+  collapseLabel.classList.add("collapse");
+  collapseLabel.setAttribute("for", randomId);
+  collapseLabel.innerHTML = "...";
+  wrapper.appendChild(collapseLabel);
+
+  const collapseInput = doc.createElement("input");
+  collapseInput.setAttribute("id", randomId);
+  collapseInput.setAttribute("class", "replyCollapser");
+  collapseInput.setAttribute("type", "checkbox");
+  wrapper.appendChild(collapseInput);
+
+  if (forGmail) {
+    const prevSibling = replyToContentElement.previousElementSibling;
+    if (prevSibling && prevSibling.tagName === "BR") {
+      prevSibling.remove();
+    }
+    let cloned = replyToContentElement.cloneNode(true);
+    cloned.classList.remove("gmail_quote");
+    wrapper.appendChild(cloned);
+  } else {
+    const allSiblings = Array.from(
+      replyToContentElement.parentElement.children
+    );
+    const replyToContentIndex = allSiblings.indexOf(replyToContentElement);
+    const followingSiblings = allSiblings.slice(replyToContentIndex + 1);
+
+    if (followingSiblings.length === 0) return;
+
+    let clonedFollowingSiblings = followingSiblings.map((sibling) =>
+      sibling.cloneNode(true)
+    );
+
+    const div = doc.createElement("div");
+    div.append(...clonedFollowingSiblings);
+
+    wrapper.append(div);
+
+    // Remove all siblings after the reply-to-content element
+    for (let i = replyToContentIndex + 1; i < allSiblings.length; i++) {
+      replyToContentElement.parentElement.removeChild(allSiblings[i]);
+    }
+  }
+
+  replyToContentElement.parentElement.replaceChild(
+    wrapper,
+    replyToContentElement
+  );
+}
+
+const htmlContent = `
+  <!DOCTYPE html>
+  <html>
+  <head>
+	<style>
+	  ${css}
+  
+	  .replied-content .collapse {
+		margin: 10px 0 10px 0;
+		visibility: visible;
+		cursor: pointer;
+		display: flex;
+		font-size: larger;
+		font-weight: 700;
+		height: 12px;
+		line-height: 0.1;
+		background: #e8eaed;
+		width: 23px;
+		justify-content: center;
+		border-radius: 5px;
+	  }
+  
+	  .replied-content .collapse:hover {
+		background: #dadce0;
+	  }
+  
+	  .replied-content .collapse + input {
+		display: none;
+	  }
+	  .replied-content .collapse + input + div {
+		display: none;
+	  }
+	  .replied-content .collapse + input:checked + div {
+		display: block;
+	  }
+  
+	  .email-content {
+		  word-break: break-word;
+	  }
+	  .email-content
+		  :is(:where(table):not(:where([class~='not-prose'], [class~='not-prose']
+			  *))) {
+	  table-layout: auto;
+	  }
+  
+	  .email-content
+		  :where(table):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+	  width: unset;
+	  table-layout: auto;
+	  text-align: unset;
+	  margin-top: unset;
+	  margin-bottom: unset;
+	  font-size: unset;
+	  line-height: unset;
+	  }
+  
+	  /* tr */
+  
+	  .email-content
+		  :where(tbody tr):not(:where([class~='not-prose'], [class~='not-prose']
+			  *)) {
+	  border-bottom-width: 0;
+	  border-bottom-color: transparent;
+	  }
+  
+	  /* td */
+  
+	  .email-content
+		  :is(:where(td):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
+	  position: unset;
+	  border-width: 0;
+	  border-color: transparent;
+	  padding: 0;
+	  }
+  
+	  .email-content
+		  :where(tbody td):not(:where([class~='not-prose'], [class~='not-prose']
+			  *)) {
+	  vertical-align: revert;
+	  }
+  
+	  /* image */
+	  .email-content
+		  :is(:where(img):not(:where([class~='not-prose'], [class~='not-prose']
+			  *))) {
+	  border-width: 0;
+	  }
+  
+	  .email-content
+		  :where(img):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+	  margin: 0;
+	  }
+  
+	  /* before & after */
+  
+	  .email-content
+		  :where(blockquote
+		  p:first-of-type):not(:where([class~='not-prose'], [class~='not-prose']
+			  *))::before {
+	  content: none;
+	  }
+  
+	  .email-content
+		  :where(blockquote
+		  p:last-of-type):not(:where([class~='not-prose'], [class~='not-prose']
+			  *))::after {
+	  content: none;
+	  }
+	</style>
+  </head>
+  <body>
+	  <div ref="emailContentRef" class="email-content prose-f">${_content.value}</div>
+  </body>
+  </html>
+  `;
+
+watch(iframeRef, (iframe) => {
+  if (iframe) {
+    iframe.onload = () => {
+      const emailContent =
+        iframe.contentWindow.document.querySelector(".email-content");
+      let parent = emailContent.closest("html");
+
+      iframe.style.height = parent.offsetHeight + 1 + "px";
+
+      let replyCollapsers = emailContent.querySelectorAll(".replyCollapser");
+      if (replyCollapsers.length) {
+        replyCollapsers.forEach((replyCollapser) => {
+          replyCollapser.addEventListener("change", () => {
+            iframe.style.height = parent.offsetHeight + 1 + "px";
+          });
+        });
+      }
+    };
+  }
+});
+</script>
diff --git a/desk/src/components/EmailEditor.vue b/desk/src/components/EmailEditor.vue
index 87decbef2..f1c9f4378 100644
--- a/desk/src/components/EmailEditor.vue
+++ b/desk/src/components/EmailEditor.vue
@@ -78,11 +78,7 @@
       </div>
       <div class="flex justify-between gap-2 overflow-hidden px-10 py-2.5">
         <div class="flex items-center overflow-x-auto">
-          <TextEditorFixedMenu
-            class="-ml-1"
-            :buttons="textEditorMenuButtons"
-            v-if="!isMobileView"
-          />
+          <TextEditorFixedMenu class="-ml-1" :buttons="textEditorMenuButtons" />
           <div class="flex gap-1">
             <FileUploader
               :upload-args="{
@@ -167,12 +163,10 @@ import {
   CannedResponseSelectorModal,
 } from "@/components";
 import { AttachmentIcon, EmailIcon } from "@/components/icons";
-import { useScreenSize } from "@/composables/screen";
 
 const editorRef = ref(null);
 const showCannedResponseSelectorModal = ref(false);
 const loading = ref(false);
-const { isMobileView } = useScreenSize();
 
 const props = defineProps({
   placeholder: {
@@ -330,7 +324,12 @@ const textEditorMenuButtons = [
   ],
 ];
 
+const editor = computed(() => {
+  return editorRef.value.editor;
+});
+
 defineExpose({
   addToReply,
+  editor,
 });
 </script>
diff --git a/desk/src/components/HistoryBox.vue b/desk/src/components/HistoryBox.vue
index 38cc101c2..38efd1e6d 100644
--- a/desk/src/components/HistoryBox.vue
+++ b/desk/src/components/HistoryBox.vue
@@ -12,7 +12,7 @@
       </div>
     </Tooltip>
   </div>
-  <div v-if="show_others">
+  <div v-if="show_others && content !== 'created this ticket'">
     <div
       v-for="relatedActivity in relatedActivities"
       :key="relatedActivity.creation"
@@ -32,7 +32,7 @@
     </div>
   </div>
   <Button
-    v-if="relatedActivities.length"
+    v-if="relatedActivities.length && content !== 'created this ticket'"
     :label="
       show_others ? 'Hide' : `${relatedActivities.length} other activities`
     "
@@ -54,23 +54,13 @@ import { ref } from "vue";
 import { dateFormat, timeAgo, dateTooltipFormat } from "@/utils";
 
 const props = defineProps({
-  user: {
-    type: String,
+  activity: {
+    type: Object,
     required: true,
   },
-  content: {
-    type: String,
-    required: true,
-  },
-  creation: {
-    type: String,
-    required: true,
-  },
-  relatedActivities: {
-    type: Array,
-    default: () => [],
-  },
 });
 
+const { user, content, creation, relatedActivities } = props.activity;
+
 let show_others = ref(false);
 </script>
diff --git a/desk/src/components/icons/ActivityIcon.vue b/desk/src/components/icons/ActivityIcon.vue
index 994075478..930d55068 100644
--- a/desk/src/components/icons/ActivityIcon.vue
+++ b/desk/src/components/icons/ActivityIcon.vue
@@ -1,38 +1,16 @@
 <template>
   <svg
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path
-      d="M2.5 6C2.5 4.61929 3.61929 3.5 5 3.5H15C16.3807 3.5 17.5 4.61929 17.5 6V12C17.5 15.0376 15.0376 17.5 12 17.5H5C3.61929 17.5 2.5 16.3807 2.5 15V6Z"
-      stroke="currentColor"
-    />
-    <path
-      d="M6 2.5V3.5"
-      stroke="currentColor"
-      stroke-miterlimit="10"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-    <path
-      d="M14 2.5V3"
-      stroke="currentColor"
-      stroke-miterlimit="10"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
-      d="M10.75 7.5C10.75 7.91421 10.4142 8.25 10 8.25C9.58579 8.25 9.25 7.91421 9.25 7.5C9.25 7.08579 9.58579 6.75 10 6.75C10.4142 6.75 10.75 7.08579 10.75 7.5ZM10.75 10.5C10.75 10.9142 10.4142 11.25 10 11.25C9.58579 11.25 9.25 10.9142 9.25 10.5C9.25 10.0858 9.58579 9.75 10 9.75C10.4142 9.75 10.75 10.0858 10.75 10.5ZM10 14.25C10.4142 14.25 10.75 13.9142 10.75 13.5C10.75 13.0858 10.4142 12.75 10 12.75C9.58579 12.75 9.25 13.0858 9.25 13.5C9.25 13.9142 9.58579 14.25 10 14.25ZM7.25 13.5C7.25 13.9142 6.91421 14.25 6.5 14.25C6.08579 14.25 5.75 13.9142 5.75 13.5C5.75 13.0858 6.08579 12.75 6.5 12.75C6.91421 12.75 7.25 13.0858 7.25 13.5ZM6.5 11.25C6.91421 11.25 7.25 10.9142 7.25 10.5C7.25 10.0858 6.91421 9.75 6.5 9.75C6.08579 9.75 5.75 10.0858 5.75 10.5C5.75 10.9142 6.08579 11.25 6.5 11.25ZM14.25 10.5C14.25 10.9142 13.9142 11.25 13.5 11.25C13.0858 11.25 12.75 10.9142 12.75 10.5C12.75 10.0858 13.0858 9.75 13.5 9.75C13.9142 9.75 14.25 10.0858 14.25 10.5ZM13.5 8.25C13.9142 8.25 14.25 7.91421 14.25 7.5C14.25 7.08579 13.9142 6.75 13.5 6.75C13.0858 6.75 12.75 7.08579 12.75 7.5C12.75 7.91421 13.0858 8.25 13.5 8.25Z"
+      d="M6.29021 2.64272C6.68375 0.785763 9.33429 0.785757 9.72783 2.64272L10.3657 5.65238L13.3753 6.29021C15.2323 6.68375 15.2323 9.33429 13.3753 9.72783L10.3657 10.3657L9.72783 13.3753C9.33429 15.2323 6.68375 15.2323 6.29021 13.3753L5.65238 10.3657L2.64272 9.72783C0.785763 9.33429 0.785757 6.68375 2.64272 6.29021L5.65238 5.65238L6.29021 2.64272ZM8.74956 2.85004C8.58 2.04999 7.43804 2.04998 7.26848 2.85004L6.56324 6.17777L6.49584 6.49583L6.17777 6.56324L2.85004 7.26848C2.04999 7.43804 2.04998 8.58 2.85004 8.74956L6.17777 9.4548L6.49584 9.5222L6.56324 9.84027L7.26848 13.168C7.43804 13.9681 8.58 13.9681 8.74956 13.168L9.4548 9.84027L9.5222 9.5222L9.84027 9.4548L13.168 8.74956C13.9681 8.58 13.9681 7.43804 13.168 7.26848L9.84027 6.56324L9.5222 6.49583L9.4548 6.17777L8.74956 2.85004Z"
       fill="currentColor"
     />
-    <path
-      d="M17.0077 11.6994L17.5 11.2071V11.5V12C17.5 15.0241 15.0594 17.4781 12.0404 17.4999L12.7878 16.5656C13.2586 15.9772 13.4651 15.2203 13.3586 14.4743C13.2098 13.4332 14.0203 12.5 15.0739 12.5C15.7985 12.5 16.4949 12.2122 17.0077 11.6994Z"
-      stroke="currentColor"
-    />
   </svg>
 </template>
diff --git a/desk/src/components/icons/DetailsIcon.vue b/desk/src/components/icons/DetailsIcon.vue
new file mode 100644
index 000000000..afc0cb0a8
--- /dev/null
+++ b/desk/src/components/icons/DetailsIcon.vue
@@ -0,0 +1,20 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="lucide lucide-list-collapse"
+  >
+    <path d="m3 10 2.5-2.5L3 5" />
+    <path d="m3 19 2.5-2.5L3 14" />
+    <path d="M10 6h11" />
+    <path d="M10 12h11" />
+    <path d="M10 18h11" />
+  </svg>
+</template>
diff --git a/desk/src/components/icons/index.ts b/desk/src/components/icons/index.ts
index 1025fd457..7b667ff03 100644
--- a/desk/src/components/icons/index.ts
+++ b/desk/src/components/icons/index.ts
@@ -11,3 +11,4 @@ export { default as AttachmentIcon } from "./AttachmentIcon.vue";
 export { default as ReplyIcon } from "./ReplyIcon.vue";
 export { default as ReplyAllIcon } from "./ReplyAllIcon.vue";
 export { default as RefreshIcon } from "./RefreshIcon.vue";
+export { default as DetailsIcon } from "./DetailsIcon.vue";
diff --git a/desk/src/components/index.ts b/desk/src/components/index.ts
index e7844f0f9..b6b1201dc 100644
--- a/desk/src/components/index.ts
+++ b/desk/src/components/index.ts
@@ -21,7 +21,7 @@ export { default as EmailEditor } from "./EmailEditor.vue";
 export { default as CommentTextEditor } from "./CommentTextEditor.vue";
 export { default as MultiSelectInput } from "./MultiSelectInput.vue";
 export { default as CommunicationArea } from "./CommunicationArea.vue";
-export { default as EmailBox } from "./EmailBox.vue";
+export { default as EmailArea } from "./EmailArea.vue";
 export { default as CommentBox } from "./CommentBox.vue";
 export { default as HistoryBox } from "./HistoryBox.vue";
 export { default as AssignmentModal } from "./AssignmentModal.vue";
diff --git a/desk/src/components/ticket/ActivityHeader.vue b/desk/src/components/ticket/ActivityHeader.vue
new file mode 100644
index 000000000..2c1cf167a
--- /dev/null
+++ b/desk/src/components/ticket/ActivityHeader.vue
@@ -0,0 +1,80 @@
+<template>
+  <div
+    class="md:mx-10 md:my-8 flex items-center justify-between text-lg font-medium mx-5 mb-4 mt-8"
+  >
+    <div class="flex h-8 items-center text-xl font-semibold text-gray-800">
+      {{ title }}
+    </div>
+    <Button
+      v-if="title == 'Emails'"
+      variant="solid"
+      @click="communicationAreaRef.toggleEmailBox()"
+    >
+      <template #prefix>
+        <FeatherIcon name="plus" class="h-4 w-4" />
+      </template>
+      <span>{{ "New Email" }}</span>
+    </Button>
+    <Button
+      v-else-if="title == 'Comments'"
+      variant="solid"
+      @click="communicationAreaRef.toggleCommentBox()"
+    >
+      <template #prefix>
+        <FeatherIcon name="plus" class="h-4 w-4" />
+      </template>
+      <span>{{ "New Comment" }}</span>
+    </Button>
+    <Dropdown v-else :options="defaultActions" @click.stop>
+      <template v-slot="{ open }">
+        <Button variant="solid" class="flex items-center gap-1">
+          <template #prefix>
+            <FeatherIcon name="plus" class="h-4 w-4" />
+          </template>
+          <span>{{ "New" }}</span>
+          <template #suffix>
+            <FeatherIcon
+              :name="open ? 'chevron-up' : 'chevron-down'"
+              class="h-4 w-4"
+            />
+          </template>
+        </Button>
+      </template>
+    </Dropdown>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { h } from "vue";
+import { computed } from "vue";
+import { EmailIcon, CommentIcon } from "@/components/icons";
+import { Dropdown } from "frappe-ui";
+import { inject } from "vue";
+import { Ref } from "vue";
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+});
+
+const communicationAreaRef: Ref = inject("communicationArea");
+
+const defaultActions = computed(() => {
+  let actions = [
+    {
+      icon: h(EmailIcon, { class: "h-4 w-4" }),
+      label: "New Email",
+      onClick: () => communicationAreaRef.value.toggleEmailBox(),
+    },
+    {
+      icon: h(CommentIcon, { class: "h-4 w-4" }),
+      label: "New Comment",
+      onClick: () => communicationAreaRef.value.toggleCommentBox(),
+    },
+  ];
+  return actions;
+});
+</script>
+
+<style scoped></style>
diff --git a/desk/src/components/ticket/TicketAgentActivities.vue b/desk/src/components/ticket/TicketAgentActivities.vue
index 4bec5fd18..a0e31d508 100644
--- a/desk/src/components/ticket/TicketAgentActivities.vue
+++ b/desk/src/components/ticket/TicketAgentActivities.vue
@@ -1,59 +1,121 @@
 <template>
-  <div class="h-screen overflow-y-auto py-3.5 comm-area">
-    <div v-for="(activity, i) in activities" :key="activity.key">
-      <div class="flex gap-4 px-3 lg:px-6 w-full">
+  <div class="flex-1 flex flex-col">
+    <ActivityHeader :title="title" />
+    <div v-if="activities.length">
+      <div v-for="(activity, i) in activities" :key="activity.key">
+        <!-- single activity -->
         <div
-          class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-gray-200"
-          :class="[i != activities.length - 1 ? 'after:h-full' : 'after:h-4']"
+          class="w-full activity px-3 sm:px-10 grid grid-cols-[30px_minmax(auto,_1fr)] gap-2 sm:gap-4"
         >
           <div
-            class="z-10 flex h-7 w-7 items-center justify-center rounded-full bg-gray-100"
-            :class="[
-              activity.type === 'history' ? 'bg-white' : 'bg-gray-100',
-              activity.type === 'comment' ? 'mt-0.5' : '',
-              activity.type === 'email' ? 'mt-2' : '',
-            ]"
+            class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-gray-200"
+            :class="[i != activities.length - 1 ? 'after:h-full' : 'after:h-4']"
           >
-            <component
-              :is="getActivityIcon(activity.type)"
+            <div
+              class="z-10 flex h-7 w-7 items-center justify-center rounded-full bg-gray-100"
               :class="[
-                activity.type == 'history' ? 'text-gray-600' : 'text-gray-800',
+                activity.type === 'history' ? 'bg-white' : 'bg-gray-100',
+                activity.type === 'comment' ? 'mt-0.5' : '',
+                activity.type === 'email' ? 'mt-2' : '',
               ]"
+            >
+              <component
+                :is="getActivityIcon(activity.type)"
+                :class="[
+                  activity.type == 'history'
+                    ? 'text-gray-600'
+                    : 'text-gray-800',
+                ]"
+              />
+            </div>
+          </div>
+          <div class="mb-4 w-full">
+            <EmailArea
+              v-if="activity.type === 'email'"
+              :activity="activity"
+              class="py-2 px-3"
+              @reply="(e) => emit('email:reply', e)"
+            />
+            <CommentBox
+              v-else-if="activity.type === 'comment'"
+              :activity="activity"
+              @update="() => emit('update')"
             />
+            <HistoryBox v-else :activity="activity" />
           </div>
         </div>
-        <div class="mb-4 w-full">
-          <EmailBox
-            v-if="activity.type === 'email'"
-            v-bind="activity"
-            @reply="(e) => emit('email:reply', e)"
-          />
-          <CommentBox
-            v-else-if="activity.type === 'comment'"
-            v-bind="activity"
-            @update="() => emit('update')"
-          />
-          <HistoryBox v-else v-bind="activity" />
-        </div>
       </div>
     </div>
+    <div
+      v-else
+      class="h-full flex flex-col items-center justify-center gap-3 text-xl font-medium text-gray-500"
+    >
+      <component :is="emptyTextIcon" class="h-10 w-10" />
+      <span>{{ emptyText }}</span>
+      <Button
+        v-if="title == 'Emails'"
+        label="New Email"
+        @click="communicationAreaRef.toggleEmailBox()"
+      />
+      <Button
+        v-else-if="title == 'Comments'"
+        label="New Comment"
+        @click="communicationAreaRef.toggleCommentBox()"
+      />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useElementVisibility } from "@vueuse/core";
-import { DotIcon, EmailAtIcon, CommentIcon } from "@/components/icons";
-import { EmailBox, CommentBox, HistoryBox } from "@/components";
+import {
+  DotIcon,
+  EmailAtIcon,
+  CommentIcon,
+  EmailIcon,
+  ActivityIcon,
+} from "@/components/icons";
+import { EmailArea, CommentBox, HistoryBox } from "@/components";
+import { Ref } from "vue";
+import { inject } from "vue";
+import { computed } from "vue";
+import { h } from "vue";
 
-defineProps({
+const props = defineProps({
   activities: {
     type: Array,
     required: true,
   },
+  title: {
+    type: String,
+    required: true,
+  },
 });
 
 const emit = defineEmits(["email:reply", "update"]);
 
+const communicationAreaRef: Ref = inject("communicationArea");
+
+const emptyText = computed(() => {
+  let text = "No Activities";
+  if (props.title == "Emails") {
+    text = "No Email Communications";
+  } else if (props.title == "Comments") {
+    text = "No Comments";
+    return text;
+  }
+});
+
+const emptyTextIcon = computed(() => {
+  let icon = ActivityIcon;
+  if (props.title == "Emails") {
+    icon = EmailIcon;
+  } else if (props.title == "Comments") {
+    icon = CommentIcon;
+  }
+  return h(icon, { class: "text-gray-500" });
+});
+
 function getActivityIcon(type) {
   if (type === "email") return EmailAtIcon;
   else if (type === "comment") return CommentIcon;
diff --git a/desk/src/components/ticket/TicketAgentContact.vue b/desk/src/components/ticket/TicketAgentContact.vue
index ecf08169b..674b88a97 100644
--- a/desk/src/components/ticket/TicketAgentContact.vue
+++ b/desk/src/components/ticket/TicketAgentContact.vue
@@ -1,11 +1,6 @@
 <template>
   <div class="flex items-center justify-start gap-5 border-b p-5">
-    <Avatar
-      size="3xl"
-      class="h-[88px] w-[88px]"
-      :image="contact.image"
-      :label="contact.name"
-    />
+    <Avatar size="3xl" :image="contact.image" :label="contact.name" />
     <div class="flex flex-col gap-2.5">
       <Tooltip :text="contact.name">
         <div class="w-[242px] truncate text-2xl font-medium">
diff --git a/desk/src/components/ticket/TicketAgentSidebar.vue b/desk/src/components/ticket/TicketAgentSidebar.vue
index 4f4aac4bf..74180c18d 100644
--- a/desk/src/components/ticket/TicketAgentSidebar.vue
+++ b/desk/src/components/ticket/TicketAgentSidebar.vue
@@ -9,29 +9,13 @@
       :contact="ticket.contact"
       @email:open="(e) => emit('email:open', e)"
     />
-    <div
+    <!-- feedback component -->
+    <TicketFeedback
       v-if="ticket.feedback_rating"
       class="border-b px-6 py-3 text-base text-gray-600"
-    >
-      <div class="flex">
-        <div class="min-w-[106px] pb-1.5">Rating</div>
-        <div class="px-1.5">
-          <StarRating :rating="ticket.feedback_rating" />
-        </div>
-      </div>
-      <div class="flex">
-        <div class="w-[106px] pb-1.5">Feedback</div>
-        <div class="px-1.5 text-gray-800">
-          {{ ticket.feedback_text }}
-        </div>
-      </div>
-      <div v-if="ticket.feedback_extra" class="flex">
-        <div class="min-w-[106px] pb-1.5">Comment</div>
-        <div class="px-1.5 text-gray-800">
-          {{ ticket.feedback_extra }}
-        </div>
-      </div>
-    </div>
+      :ticket="ticket"
+    />
+    <!-- ticket details -->
     <TicketAgentDetails
       :agreement-status="ticket.agreement_status"
       :first-responded-on="ticket.first_responded_on"
@@ -41,6 +25,7 @@
       :ticket-created-on="ticket.creation"
       :source="ticket.via_customer_portal ? 'Portal' : 'Mail'"
     />
+    <!-- fields -->
     <TicketAgentFields :ticket="ticket" @update="update" />
   </div>
 </template>
diff --git a/desk/src/components/ticket/TicketFeedback.vue b/desk/src/components/ticket/TicketFeedback.vue
new file mode 100644
index 000000000..e8afc746b
--- /dev/null
+++ b/desk/src/components/ticket/TicketFeedback.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <div class="flex">
+      <div class="min-w-[106px] pb-1.5">Rating</div>
+      <div class="px-1.5">
+        <StarRating :rating="ticket.feedback_rating" />
+      </div>
+    </div>
+    <div class="flex">
+      <div class="w-[106px] pb-1.5">Feedback</div>
+      <div class="px-1.5 text-gray-800">
+        {{ ticket.feedback_text }}
+      </div>
+    </div>
+    <div v-if="ticket.feedback_extra" class="flex">
+      <div class="min-w-[106px] pb-1.5">Comment</div>
+      <div class="px-1.5 text-gray-800">
+        {{ ticket.feedback_extra }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import StarRating from "../StarRating.vue";
+
+defineProps({
+  ticket: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<style scoped></style>
diff --git a/desk/src/pages/MobileTicketAgent.vue b/desk/src/pages/MobileTicketAgent.vue
index e1c8486e6..763ac489f 100644
--- a/desk/src/pages/MobileTicketAgent.vue
+++ b/desk/src/pages/MobileTicketAgent.vue
@@ -56,43 +56,75 @@
         />
       </div>
     </header>
-    <div v-if="ticket.data" class="flex h-screen overflow-hidden">
-      <div class="flex flex-1 flex-col">
-        <div class="flex items-center justify-between border-b py-1 pr-2.5">
-          <span class="pl-6 text-lg font-semibold">Activity</span>
-          <Switch
-            v-model="showFullActivity"
-            size="sm"
-            label="Show all activity"
+    <div v-if="ticket.data" class="flex flex-1 overflow-x-hidden">
+      <div class="flex flex-1 flex-col overflow-x-hidden">
+        <div class="flex-1 flex flex-col">
+          <Tabs v-model="tabIndex" v-slot="{ tab }" :tabs="tabs" class="h-full">
+            <div v-if="tab.name === 'details'">
+              <!-- ticket contact info -->
+              <TicketAgentContact
+                :contact="ticket.data.contact"
+                @email:open="communicationAreaRef.toggleEmailBox()"
+              />
+              <!-- feedback component -->
+              <TicketFeedback
+                v-if="ticket.data.feedback_rating"
+                class="border-b px-6 py-3 text-base text-gray-600"
+                :ticket="ticket.data"
+              />
+              <!-- SLA Section -->
+              <h3 class="px-6 pt-3 font-semibold text-base">SLA</h3>
+              <TicketAgentDetails
+                :agreement-status="ticket.data.agreement_status"
+                :first-responded-on="ticket.data.first_responded_on"
+                :response-by="ticket.data.response_by"
+                :resolution-date="ticket.data.resolution_date"
+                :resolution-by="ticket.data.resolution_by"
+                :ticket-created-on="ticket.data.creation"
+                :source="ticket.data.via_customer_portal ? 'Portal' : 'Mail'"
+              />
+              <!-- Ticket Fields -->
+              <h3 class="px-6 pt-3 font-semibold text-base">Details</h3>
+              <TicketAgentFields
+                :ticket="ticket.data"
+                @update="({ field, value }) => updateTicket(field, value)"
+                class="!border-0"
+              />
+            </div>
+            <!-- Rest Activities -->
+            <TicketAgentActivities
+              v-else
+              ref="ticketAgentActivitiesRef"
+              :activities="filterActivities(tab.name)"
+              :title="tab.label"
+              @update="
+                () => {
+                  ticket.reload();
+                }
+              "
+              @email:reply="
+                (e) => {
+                  communicationAreaRef.replyToEmail(e);
+                }
+              "
+            />
+          </Tabs>
+          <CommunicationArea
+            class="sticky bottom-0 z-50 bg-white"
+            ref="communicationAreaRef"
+            v-model="ticket.data"
+            :to-emails="[ticket.data.raised_by]"
+            :cc-emails="[]"
+            :bcc-emails="[]"
+            @update="
+              () => {
+                ticket.reload();
+                tabIndex !== 0 &&
+                  ticketAgentActivitiesRef.scrollToLatestActivity();
+              }
+            "
           />
         </div>
-        <TicketAgentActivities
-          ref="ticketAgentActivitiesRef"
-          :activities="activities"
-          @update="
-            () => {
-              ticket.reload();
-            }
-          "
-          @email:reply="
-            (e) => {
-              communicationAreaRef.replyToEmail(e);
-            }
-          "
-        />
-        <CommunicationArea
-          ref="communicationAreaRef"
-          v-model="ticket.data"
-          :to-emails="[ticket.data.raised_by]"
-          :cc-emails="[]"
-          :bcc-emails="[]"
-          @update="
-            () => {
-              ticket.reload();
-              ticketAgentActivitiesRef.scrollToLatestActivity();
-            }
-          "
-        />
       </div>
     </div>
     <AssignmentModal
@@ -142,12 +174,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, h, watch, onMounted, onUnmounted } from "vue";
+import { computed, ref, h, watch, onMounted, onUnmounted, provide } from "vue";
 import { useStorage } from "@vueuse/core";
 import {
   Breadcrumbs,
   Dropdown,
-  Switch,
+  Tabs,
   createResource,
   Dialog,
   FormControl,
@@ -158,10 +190,15 @@ import {
   MultipleAvatar,
   AssignmentModal,
   CommunicationArea,
-  PageTitle,
 } from "@/components";
 import { TicketAgentActivities } from "@/components/ticket";
-import { IndicatorIcon } from "@/components/icons";
+import {
+  ActivityIcon,
+  CommentIcon,
+  EmailIcon,
+  IndicatorIcon,
+  DetailsIcon,
+} from "@/components/icons";
 
 import { useTicketStatusStore } from "@/stores/ticketStatus";
 import { useUserStore } from "@/stores/user";
@@ -170,6 +207,9 @@ import { createToast, setupCustomActions } from "@/utils";
 const ticketStatusStore = useTicketStatusStore();
 const { getUser } = useUserStore();
 import { useScreenSize } from "@/composables/screen";
+import { TabObject, TicketTab } from "@/types";
+import TicketAgentDetails from "@/components/ticket/TicketAgentDetails.vue";
+import TicketAgentFields from "@/components/ticket/TicketAgentFields.vue";
 const ticketAgentActivitiesRef = ref(null);
 const communicationAreaRef = ref(null);
 const subjectInput = ref(null);
@@ -182,6 +222,8 @@ const props = defineProps({
   },
 });
 
+provide("communicationArea", communicationAreaRef);
+
 let storage = useStorage("ticket_agent", {
   showAllActivity: true,
 });
@@ -246,6 +288,31 @@ const dropdownOptions = computed(() =>
   }))
 );
 
+const tabIndex = ref(0);
+const tabs: TabObject[] = [
+  {
+    name: "details",
+    label: "Details",
+    icon: DetailsIcon,
+    condition: () => isMobileView.value,
+  },
+  {
+    name: "activity",
+    label: "Activity",
+    icon: ActivityIcon,
+  },
+  {
+    name: "email",
+    label: "Emails",
+    icon: EmailIcon,
+  },
+  {
+    name: "comment",
+    label: "Comments",
+    icon: CommentIcon,
+  },
+];
+
 const activities = computed(() => {
   const emailProps = ticket.data.communications.map((email) => {
     return {
@@ -322,6 +389,13 @@ const activities = computed(() => {
   return data;
 });
 
+function filterActivities(eventType: TicketTab) {
+  if (eventType === "activity") {
+    return activities.value;
+  }
+  return activities.value.filter((activity) => activity.type === eventType);
+}
+
 function updateTicket(fieldname: string, value: string) {
   isLoading.value = true;
   createResource({
diff --git a/desk/src/pages/TicketAgent.vue b/desk/src/pages/TicketAgent.vue
index f1005b7ac..a40d9b1a0 100644
--- a/desk/src/pages/TicketAgent.vue
+++ b/desk/src/pages/TicketAgent.vue
@@ -44,33 +44,31 @@
       </template>
     </LayoutHeader>
     <div v-if="ticket.data" class="flex h-screen overflow-hidden">
-      <div class="flex flex-1 flex-col w-[calc(100%-382px)]">
-        <div class="flex items-center justify-between border-b py-1 pr-2.5">
-          <span class="pl-6 text-lg font-semibold">Activity</span>
-          <Switch
-            v-model="showFullActivity"
-            size="sm"
-            label="Show all activity"
-          />
+      <div class="flex flex-1 flex-col">
+        <!-- ticket activities -->
+        <div class="overflow-y-auto flex-1">
+          <Tabs v-model="tabIndex" v-slot="{ tab }" :tabs="tabs" class="h-full">
+            <TicketAgentActivities
+              ref="ticketAgentActivitiesRef"
+              :activities="filterActivities(tab.name)"
+              :title="tab.label"
+              @update="
+                () => {
+                  ticket.reload();
+                }
+              "
+              @email:reply="
+                (e) => {
+                  communicationAreaRef.replyToEmail(e);
+                }
+              "
+            />
+          </Tabs>
         </div>
-        <TicketAgentActivities
-          ref="ticketAgentActivitiesRef"
-          :activities="activities"
-          @update="
-            () => {
-              ticket.reload();
-            }
-          "
-          @email:reply="
-            (e) => {
-              communicationAreaRef.replyToEmail(e);
-            }
-          "
-        />
         <CommunicationArea
           ref="communicationAreaRef"
           v-model="ticket.data"
-          :to-emails="[ticket.data.raised_by]"
+          :to-emails="[ticket.data?.raised_by]"
           :cc-emails="[]"
           :bcc-emails="[]"
           @update="
@@ -134,15 +132,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, h, watch, onMounted, onUnmounted } from "vue";
+import { computed, ref, h, watch, onMounted, onUnmounted, provide } from "vue";
 import { useStorage } from "@vueuse/core";
 import {
   Breadcrumbs,
   Dropdown,
-  Switch,
   createResource,
   Dialog,
   FormControl,
+  Tabs,
 } from "frappe-ui";
 
 import {
@@ -152,11 +150,16 @@ import {
   CommunicationArea,
 } from "@/components";
 import { TicketAgentActivities, TicketAgentSidebar } from "@/components/ticket";
-import { IndicatorIcon } from "@/components/icons";
-
+import {
+  IndicatorIcon,
+  CommentIcon,
+  ActivityIcon,
+  EmailIcon,
+} from "@/components/icons";
 import { useTicketStatusStore } from "@/stores/ticketStatus";
 import { useUserStore } from "@/stores/user";
 import { createToast, setupCustomActions } from "@/utils";
+import { TabObject, TicketTab } from "@/types";
 
 const ticketStatusStore = useTicketStatusStore();
 const { getUser } = useUserStore();
@@ -172,6 +175,8 @@ const props = defineProps({
   },
 });
 
+provide("communicationArea", communicationAreaRef);
+
 let storage = useStorage("ticket_agent", {
   showAllActivity: true,
 });
@@ -234,19 +239,38 @@ const dropdownOptions = computed(() =>
   }))
 );
 
+const tabIndex = ref(0);
+const tabs: TabObject[] = [
+  {
+    name: "activity",
+    label: "Activity",
+    icon: ActivityIcon,
+  },
+  {
+    name: "email",
+    label: "Emails",
+    icon: EmailIcon,
+  },
+  {
+    name: "comment",
+    label: "Comments",
+    icon: CommentIcon,
+  },
+];
+
 const activities = computed(() => {
   const emailProps = ticket.data.communications.map((email) => {
     return {
-      type: "email",
-      key: email.creation,
+      subject: email.subject,
+      content: email.content,
       sender: { name: email.user.email, full_name: email.user.name },
       to: email.recipients,
+      type: "email",
+      key: email.creation,
       cc: email.cc,
       bcc: email.bcc,
       creation: email.creation,
-      subject: email.subject,
       attachments: email.attachments,
-      content: email.content,
     };
   });
 
@@ -306,10 +330,16 @@ const activities = computed(() => {
     }
     i++;
   }
-
   return data;
 });
 
+function filterActivities(eventType: TicketTab) {
+  if (eventType === "activity") {
+    return activities.value;
+  }
+  return activities.value.filter((activity) => activity.type === eventType);
+}
+
 function updateTicket(fieldname: string, value: string) {
   isLoading.value = true;
   createResource({
diff --git a/desk/src/types.ts b/desk/src/types.ts
index b1523330d..2fa61e131 100644
--- a/desk/src/types.ts
+++ b/desk/src/types.ts
@@ -1,3 +1,5 @@
+import { Component } from "vue";
+
 export interface Resource<A = unknown> {
   auto: boolean;
   loading: boolean;
@@ -193,3 +195,12 @@ export interface EmailAccount {
   default_outgoing?: boolean;
   default_incoming?: boolean;
 }
+
+export type TicketTab = "activity" | "email" | "comment" | "details";
+
+export interface TabObject {
+  name: TicketTab;
+  label: string;
+  icon: Component;
+  condition?: () => boolean;
+}
diff --git a/frappe-ui b/frappe-ui
index 00b92d88d..a51471841 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit 00b92d88ddf4de385c9547a97f7191536411e76a
+Subproject commit a5147184122d7d8fd2d71af7caef2395708758f5
diff --git a/helpdesk/helpdesk/doctype/hd_ticket/api.py b/helpdesk/helpdesk/doctype/hd_ticket/api.py
index c689dc8c7..342918495 100644
--- a/helpdesk/helpdesk/doctype/hd_ticket/api.py
+++ b/helpdesk/helpdesk/doctype/hd_ticket/api.py
@@ -109,6 +109,7 @@ def get_communications(ticket: str):
             QBCommunication.name,
             QBCommunication.sender,
             QBCommunication.recipients,
+            QBCommunication.subject,
         )
         .where(QBCommunication.reference_doctype == "HD Ticket")
         .where(QBCommunication.reference_name == ticket)