diff --git a/desk/src/components/CommentBox.vue b/desk/src/components/CommentBox.vue
index 0864419b0..b3c59505e 100644
--- a/desk/src/components/CommentBox.vue
+++ b/desk/src/components/CommentBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-col text-base">
+  <div class="flex-col text-base flex-1" ref="commentBoxRef">
     <div class="mb-1 ml-0.5 flex items-center justify-between">
       <div class="text-gray-600 flex items-center gap-2">
         <Avatar
@@ -17,15 +17,26 @@
           </span>
         </p>
       </div>
-      <div class="flex items-center">
+      <div class="flex items-center gap-1">
         <Tooltip :text="dateFormat(creation, dateTooltipFormat)">
           <span class="pl-0.5 text-sm text-gray-600">
             {{ timeAgo(creation) }}
           </span>
         </Tooltip>
-        <div v-if="authStore.userId === commentedBy">
+        <div v-if="authStore.userId === commentedBy && !editable">
           <Dropdown
-            :options="[{ label: 'Delete', onClick: () => (showDialog = true) }]"
+            :options="[
+              {
+                label: 'Edit',
+                onClick: () => handleEditMode(),
+                icon: 'edit-2',
+              },
+              {
+                label: 'Delete',
+                onClick: () => (showDialog = true),
+                icon: 'trash-2',
+              },
+            ]"
           >
             <Button
               icon="more-horizontal"
@@ -36,10 +47,31 @@
         </div>
       </div>
     </div>
-    <div
-      class="prose-f grow cursor-pointer rounded bg-gray-50 px-4 py-3 text-base leading-6 transition-all duration-300 ease-in-out"
-      v-html="content"
-    />
+    <div class="rounded bg-gray-50 px-4 py-3">
+      <TextEditor
+        ref="editorRef"
+        :editor-class="'prose-f shrink  text-p-sm transition-all duration-300 ease-in-out block w-full content'"
+        :content="_content"
+        :editable="editable"
+        :bubble-menu="textEditorMenuButtons"
+        @change="(event:string) => {_content = event}"
+      >
+        <template #bottom v-if="editable">
+          <div class="flex flex-row-reverse gap-2">
+            <Button label="Save" @click="handleSaveComment" variant="solid" />
+            <Button label="Discard" @click="handleDiscard" />
+          </div>
+        </template>
+      </TextEditor>
+      <div class="flex flex-wrap gap-2" v-if="!editable">
+        <AttachmentItem
+          v-for="a in attachments"
+          :key="a.file_url"
+          :label="a.file_name"
+          :url="a.file_url"
+        />
+      </div>
+    </div>
   </div>
   <Dialog
     v-model="showDialog"
@@ -59,25 +91,57 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import { Dropdown, createResource, Dialog, Avatar } from "frappe-ui";
-import { dateFormat, timeAgo, dateTooltipFormat, createToast } from "@/utils";
+import { ref, PropType, onMounted } from "vue";
+import {
+  Dropdown,
+  createResource,
+  Dialog,
+  Avatar,
+  TextEditor,
+} from "frappe-ui";
+import {
+  dateFormat,
+  timeAgo,
+  dateTooltipFormat,
+  createToast,
+  textEditorMenuButtons,
+  isContentEmpty,
+} from "@/utils";
+import { AttachmentItem } from "@/components";
 import { useAuthStore } from "@/stores/auth";
 import { useUserStore } from "@/stores/user";
-
+import { CommentActivity } from "@/types";
+import { updateRes as updateComment } from "@/stores/knowledgeBase";
 const authStore = useAuthStore();
 const props = defineProps({
   activity: {
-    type: Object,
+    type: Object as PropType<CommentActivity>,
     required: true,
   },
 });
 const { getUser } = useUserStore();
 
-const { name, creation, content, commenter, commentedBy } = props.activity;
+const { name, creation, content, commenter, commentedBy, attachments } =
+  props.activity;
 
 const emit = defineEmits(["update"]);
 const showDialog = ref(false);
+const editable = ref(false);
+const _content = ref(content);
+
+// HTML refs
+const commentBoxRef = ref(null);
+const editorRef = ref(null);
+
+function handleEditMode() {
+  editable.value = true;
+  editorRef.value.editor.chain().focus("start");
+}
+
+function handleDiscard() {
+  _content.value = content;
+  editable.value = false;
+}
 
 const deleteComment = createResource({
   url: "frappe.client.delete",
@@ -94,4 +158,43 @@ const deleteComment = createResource({
     });
   },
 });
+
+function handleSaveComment() {
+  if (content === _content.value) {
+    editable.value = false;
+    return;
+  }
+  if (isContentEmpty(_content.value)) {
+    createToast({
+      title: "Comment cannot be empty",
+      icon: "x",
+      iconClasses: "text-red-600",
+    });
+    return;
+  }
+
+  updateComment.submit(
+    {
+      doctype: "HD Ticket Comment",
+      name: name,
+      fieldname: "content",
+      value: _content.value,
+    },
+    {
+      onSuccess: () => {
+        editable.value = false;
+        emit("update");
+        createToast({
+          title: "Comment updated",
+          icon: "check",
+          iconClasses: "text-green-500",
+        });
+      },
+    }
+  );
+}
+
+onMounted(() => {
+  commentBoxRef.value.style.width = "0px";
+});
 </script>
diff --git a/desk/src/components/CommentTextEditor.vue b/desk/src/components/CommentTextEditor.vue
index 57979441f..cf0f465c4 100644
--- a/desk/src/components/CommentTextEditor.vue
+++ b/desk/src/components/CommentTextEditor.vue
@@ -154,12 +154,16 @@ async function submitComment() {
       method: "new_comment",
       args: {
         content: newComment.value,
+        attachments: attachments.value,
       },
     }),
     onSuccess: () => {
       emit("submit");
       loading.value = false;
     },
+    onError: () => {
+      loading.value = false;
+    },
   });
 
   comment.submit();
diff --git a/desk/src/components/EmailArea.vue b/desk/src/components/EmailArea.vue
index b85ef17fc..77ddddf4c 100644
--- a/desk/src/components/EmailArea.vue
+++ b/desk/src/components/EmailArea.vue
@@ -71,11 +71,7 @@
       </span>
       <span v-if="bcc">{{ bcc }}</span>
     </div>
-    <!-- <div
-      class="email-content prose-f max-h-[500px] overflow-y-auto"
-      v-html="content"
-    /> -->
-    <EmailContent :content="content" :emailBox="emailBox" />
+    <EmailContent :content="content" />
     <div class="flex flex-wrap gap-2">
       <AttachmentItem
         v-for="a in attachments"
@@ -88,11 +84,10 @@
 </template>
 
 <script setup lang="ts">
-import { UserAvatar, AttachmentItem } from "@/components";
+import { AttachmentItem } from "@/components";
 import { dateFormat, timeAgo, dateTooltipFormat } from "@/utils";
 import { ReplyIcon, ReplyAllIcon } from "./icons";
 import { useScreenSize } from "@/composables/screen";
-import { inject } from "vue";
 
 const props = defineProps({
   activity: {
@@ -106,7 +101,6 @@ const { sender, to, cc, bcc, creation, subject, attachments, content } =
 
 const emit = defineEmits(["reply"]);
 
-let emailBox = inject("communicationArea");
 const { isMobileView } = useScreenSize();
 
 // TODO: Implement reply functionality using this way instead of emit drillup
diff --git a/desk/src/components/EmailEditor.vue b/desk/src/components/EmailEditor.vue
index a672eda80..0a240d4d4 100644
--- a/desk/src/components/EmailEditor.vue
+++ b/desk/src/components/EmailEditor.vue
@@ -165,7 +165,6 @@ import {
 } from "@/components";
 import { AttachmentIcon, EmailIcon } from "@/components/icons";
 import { PreserveVideoControls } from "@/tiptap-extensions";
-import { useError } from "@/composables/error";
 
 const editorRef = ref(null);
 const showCannedResponseSelectorModal = ref(false);
diff --git a/desk/src/components/HistoryBox.vue b/desk/src/components/HistoryBox.vue
index 38efd1e6d..8dfb6188c 100644
--- a/desk/src/components/HistoryBox.vue
+++ b/desk/src/components/HistoryBox.vue
@@ -1,52 +1,56 @@
 <template>
-  <div class="mt-1.5 flex justify-between text-base">
-    <div class="text-gray-600">
-      <span class="font-medium text-gray-800">
-        {{ user }}
-      </span>
-      <span> {{ content }}</span>
-    </div>
-    <Tooltip :text="dateFormat(creation, dateTooltipFormat)">
-      <div class="text-gray-600">
-        {{ timeAgo(creation) }}
-      </div>
-    </Tooltip>
-  </div>
-  <div v-if="show_others && content !== 'created this ticket'">
-    <div
-      v-for="relatedActivity in relatedActivities"
-      :key="relatedActivity.creation"
-      class="mt-2 flex justify-between text-base"
-    >
+  <div class="flex-1">
+    <div class="mt-1.5 flex justify-between text-base items-center">
       <div class="text-gray-600">
         <span class="font-medium text-gray-800">
-          {{ relatedActivity.user }}
+          {{ user }}
         </span>
-        <span> {{ relatedActivity.content }}</span>
+        <span> {{ content }}</span>
       </div>
-      <Tooltip :text="dateFormat(relatedActivity.creation, dateTooltipFormat)">
-        <div class="text-gray-600">
-          {{ timeAgo(relatedActivity.creation) }}
+      <Tooltip :text="dateFormat(creation, dateTooltipFormat)">
+        <div class="text-gray-600 text-sm">
+          {{ timeAgo(creation) }}
         </div>
       </Tooltip>
     </div>
+    <div v-if="show_others && content !== 'created this ticket'">
+      <div
+        v-for="relatedActivity in relatedActivities"
+        :key="relatedActivity.creation"
+        class="mt-2 flex justify-between text-base"
+      >
+        <div class="text-gray-600">
+          <span class="font-medium text-gray-800">
+            {{ relatedActivity.user }}
+          </span>
+          <span> {{ relatedActivity.content }}</span>
+        </div>
+        <Tooltip
+          :text="dateFormat(relatedActivity.creation, dateTooltipFormat)"
+        >
+          <div class="text-gray-600 text-sm">
+            {{ timeAgo(relatedActivity.creation) }}
+          </div>
+        </Tooltip>
+      </div>
+    </div>
+    <Button
+      v-if="relatedActivities.length && content !== 'created this ticket'"
+      :label="
+        show_others ? 'Hide' : `${relatedActivities.length} other activities`
+      "
+      variant="outline"
+      class="mt-2"
+      @click="show_others = !show_others"
+    >
+      <template #suffix>
+        <FeatherIcon
+          :name="show_others ? 'chevron-up' : 'chevron-down'"
+          class="h-4 text-gray-600"
+        />
+      </template>
+    </Button>
   </div>
-  <Button
-    v-if="relatedActivities.length && content !== 'created this ticket'"
-    :label="
-      show_others ? 'Hide' : `${relatedActivities.length} other activities`
-    "
-    variant="outline"
-    class="mt-2"
-    @click="show_others = !show_others"
-  >
-    <template #suffix>
-      <FeatherIcon
-        :name="show_others ? 'chevron-up' : 'chevron-down'"
-        class="h-4 text-gray-600"
-      />
-    </template>
-  </Button>
 </template>
 
 <script setup lang="ts">
diff --git a/desk/src/components/layouts/MobileSidebar.vue b/desk/src/components/layouts/MobileSidebar.vue
index 22ea9c528..66bd90d88 100644
--- a/desk/src/components/layouts/MobileSidebar.vue
+++ b/desk/src/components/layouts/MobileSidebar.vue
@@ -16,7 +16,7 @@
           <!-- user dropwdown -->
           <div><UserMenu class="p-2 mb-2" :options="profileSettings" /></div>
           <!-- notifications -->
-          <div class="overflow-y-auto px-2">
+          <div class="overflow-y-auto px-2" v-if="!isCustomerPortal">
             <div class="mb-3 flex flex-col">
               <SidebarLink
                 class="relative"
diff --git a/desk/src/components/layouts/Sidebar.vue b/desk/src/components/layouts/Sidebar.vue
index 974d17fb6..488bac971 100644
--- a/desk/src/components/layouts/Sidebar.vue
+++ b/desk/src/components/layouts/Sidebar.vue
@@ -39,7 +39,9 @@
         <template #right>
           <Badge
             v-if="isExpanded && notificationStore.unread"
-            :label="notificationStore.unread"
+            :label="
+              notificationStore.unread > 9 ? '9+' : notificationStore.unread
+            "
             theme="gray"
             variant="subtle"
           />
diff --git a/desk/src/components/ticket/TicketAgentActivities.vue b/desk/src/components/ticket/TicketAgentActivities.vue
index b12d1499f..6f225287f 100644
--- a/desk/src/components/ticket/TicketAgentActivities.vue
+++ b/desk/src/components/ticket/TicketAgentActivities.vue
@@ -36,7 +36,7 @@
               <DotIcon v-else class="text-gray-600" />
             </div>
           </div>
-          <div class="mb-4 w-full">
+          <div class="mb-4 flex flex-1">
             <EmailArea
               v-if="activity.type === 'email'"
               :activity="activity"
@@ -74,7 +74,7 @@
 </template>
 
 <script setup lang="ts">
-import { Ref, inject, h, computed, onMounted, watch } from "vue";
+import { Ref, inject, h, computed, onMounted, watch, PropType } from "vue";
 import { useElementVisibility } from "@vueuse/core";
 import {
   DotIcon,
@@ -86,10 +86,10 @@ import {
 import { EmailArea, CommentBox, HistoryBox } from "@/components";
 import { useUserStore } from "@/stores/user";
 import { Avatar } from "frappe-ui";
-
+import { TicketActivity } from "@/types";
 const props = defineProps({
   activities: {
-    type: Array,
+    type: Array as PropType<TicketActivity[]>,
     required: true,
   },
   title: {
diff --git a/desk/src/components/ticket/TicketAgentSidebar.vue b/desk/src/components/ticket/TicketAgentSidebar.vue
index bd23e3cac..e71c93bcf 100644
--- a/desk/src/components/ticket/TicketAgentSidebar.vue
+++ b/desk/src/components/ticket/TicketAgentSidebar.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex w-[382px] flex-col justify-between border-l">
-    <div class="h-10.5 flex items-center justify-between border-b px-5 py-2.5">
+    <div class="h-[2.83rem] flex items-center justify-between border-b px-5">
       <span
         class="cursor-copy text-lg font-semibold"
         @click="copyToClipboard(ticket.name, ticket.name)"
diff --git a/desk/src/pages/TicketAgent.vue b/desk/src/pages/TicketAgent.vue
index 93459b9de..4898c99ab 100644
--- a/desk/src/pages/TicketAgent.vue
+++ b/desk/src/pages/TicketAgent.vue
@@ -296,6 +296,7 @@ const activities = computed(() => {
       commenter: comment.user.name,
       creation: comment.creation,
       content: comment.content,
+      attachments: comment.attachments,
     };
   });
 
diff --git a/desk/src/pages/ticket/TicketCustomerTemplateFields.vue b/desk/src/pages/ticket/TicketCustomerTemplateFields.vue
index 094aefaed..fe8c50d8b 100644
--- a/desk/src/pages/ticket/TicketCustomerTemplateFields.vue
+++ b/desk/src/pages/ticket/TicketCustomerTemplateFields.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="grid grid-cols-1 gap-4 border-b px-5 py-2.5 sm:grid-cols-3">
+  <div class="grid grid-cols-1 gap-4 border-b px-5 py-2.5 sm:grid-cols-3">
     <div class="space-y-1.5">
       <span class="block text-sm text-gray-700"> Status </span>
       <span class="block break-words text-base font-medium text-gray-900">
@@ -40,7 +40,7 @@
         {{ ticket.data[field.fieldname] }}
       </span>
     </div>
-  </span>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/desk/src/types.ts b/desk/src/types.ts
index 735cc7a93..189d8404f 100644
--- a/desk/src/types.ts
+++ b/desk/src/types.ts
@@ -275,3 +275,43 @@ export interface Breadcrumb {
     params?: Record<string, string>;
   };
 }
+
+// Activity Types
+interface BaseActivity {
+  type: string;
+  key: string;
+  creation: string;
+  content: string;
+}
+
+interface HistoryActivity extends BaseActivity {
+  type: "history";
+  user: string;
+  relatedActivities: HistoryActivity[];
+}
+
+export interface EmailActivity extends BaseActivity {
+  type: "email";
+  attachments: FileAttachment;
+  bcc: string;
+  cc: string;
+  sender: { full_name: string; name: string };
+  subject: string;
+  to: string;
+}
+
+export interface CommentActivity extends BaseActivity {
+  type: "comment";
+  name: string;
+  commenter: string;
+  commentedBy: string;
+  attachments: FileAttachment[];
+}
+
+export type TicketActivity = HistoryActivity | EmailActivity | CommentActivity;
+
+interface FileAttachment {
+  name: string;
+  file_name: string;
+  file_url: string;
+}
diff --git a/desk/src/utils.ts b/desk/src/utils.ts
index 8d04b1a32..4fc8df2be 100644
--- a/desk/src/utils.ts
+++ b/desk/src/utils.ts
@@ -177,3 +177,9 @@ export const textEditorMenuButtons = [
     "DeleteTable",
   ],
 ];
+
+export function isContentEmpty(content: string) {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(content, "text/html");
+  return doc.body.textContent === "";
+}
diff --git a/helpdesk/api/doc.py b/helpdesk/api/doc.py
index 651d5aea0..8b4837d45 100644
--- a/helpdesk/api/doc.py
+++ b/helpdesk/api/doc.py
@@ -289,12 +289,13 @@ def get_options(fieldtype, options):
                     "type": field.get("type"),
                     "options": options,
                 }
-
     return {
         "data": data,
         "columns": columns,
         "fields": fields if doctype == "HD Ticket" else [],
-        "total_count": len(frappe.get_list(doctype, filters=filters)),
+        "total_count": frappe.get_list(
+            doctype, filters=filters, fields="count(*) as count"
+        )[0].count,
         "row_count": len(data),
         "group_by_field": group_by_field,
         "view_type": view_type,
diff --git a/helpdesk/helpdesk/doctype/hd_notification/utils.py b/helpdesk/helpdesk/doctype/hd_notification/utils.py
index 17f1e7159..55883a6c8 100644
--- a/helpdesk/helpdesk/doctype/hd_notification/utils.py
+++ b/helpdesk/helpdesk/doctype/hd_notification/utils.py
@@ -16,7 +16,7 @@ def clear(user: str = None, ticket: str | int = None, comment: str = None):
         filters["reference_ticket"] = ticket
     if comment:
         filters["reference_comment"] = comment
-    for n in frappe.get_all("HD Notification", filters=filters):
-        d = frappe.get_doc("HD Notification", n.name)
-        d.read = True
-        d.save()
+    for notification in frappe.get_all(
+        "HD Notification", filters=filters, pluck="name"
+    ):
+        frappe.db.set_value("HD Notification", notification, "read", 1)
diff --git a/helpdesk/helpdesk/doctype/hd_ticket/api.py b/helpdesk/helpdesk/doctype/hd_ticket/api.py
index e6a9bc846..eea57ed5d 100644
--- a/helpdesk/helpdesk/doctype/hd_ticket/api.py
+++ b/helpdesk/helpdesk/doctype/hd_ticket/api.py
@@ -143,6 +143,7 @@ def get_comments(ticket: str):
     )
     for c in comments:
         c.user = get_user_info_for_avatar(c.commented_by)
+        c.attachments = get_attachments("HD Ticket Comment", c.name)
     return comments
 
 
diff --git a/helpdesk/helpdesk/doctype/hd_ticket/hd_ticket.py b/helpdesk/helpdesk/doctype/hd_ticket/hd_ticket.py
index ed5a5b977..948111a96 100644
--- a/helpdesk/helpdesk/doctype/hd_ticket/hd_ticket.py
+++ b/helpdesk/helpdesk/doctype/hd_ticket/hd_ticket.py
@@ -458,7 +458,7 @@ def portal_uri(self):
         return f"{root_uri}/helpdesk/my-tickets/{self.name}"
 
     @frappe.whitelist()
-    def new_comment(self, content: str):
+    def new_comment(self, content: str, attachments: List[str] = []):
         if not is_agent():
             frappe.throw(
                 _("You are not permitted to add a comment"), frappe.PermissionError
@@ -469,6 +469,10 @@ def new_comment(self, content: str):
         c.is_pinned = False
         c.reference_ticket = self.name
         c.save()
+        for attachment in attachments:
+            self.attach_file_with_doc(
+                "HD Ticket Comment", c.name, attachment.get("file_url")
+            )
 
     @frappe.whitelist()
     def reply_via_agent(
@@ -531,7 +535,7 @@ def reply_via_agent(
             file_doc.attached_to_name = communication.name
             file_doc.attached_to_doctype = "Communication"
             file_doc.save(ignore_permissions=True)
-            self.attach_file_with_ticket(file_doc.file_url)
+            self.attach_file_with_doc("HD Ticket", self.name, file_doc.file_url)
 
             _attachments.append({"file_url": file_doc.file_url})
 
@@ -613,7 +617,7 @@ def create_communication_via_contact(self, message, attachments=[]):
             "File", filters={"attached_to_name": c.name}, pluck="file_url"
         )
         for url in file_urls:
-            self.attach_file_with_ticket(url)
+            self.attach_file_with_doc("HD Ticket", self.name, url)
 
     @frappe.whitelist()
     def mark_seen(self):
@@ -720,10 +724,10 @@ def on_communication_update(self, c):
         # Save the ticket, allowing for hooks to run.
         self.save()
 
-    def attach_file_with_ticket(self, file_url):
+    def attach_file_with_doc(self, doctype, docname, file_url):
         file_doc = frappe.new_doc("File")
-        file_doc.attached_to_name = self.name
-        file_doc.attached_to_doctype = "HD Ticket"
+        file_doc.attached_to_doctype = doctype
+        file_doc.attached_to_name = docname
         file_doc.file_url = file_url
         file_doc.save(ignore_permissions=True)