diff --git a/helpdesk/methods.py b/helpdesk/methods.py
index e2ac89c9e..438c3d154 100644
--- a/helpdesk/methods.py
+++ b/helpdesk/methods.py
@@ -1,9 +1,7 @@
-
-
 from helpdesk.models import DepartmentManager
 
 
-def is_department_manager(request,ticket):
+def is_department_manager(request, ticket):
     """
     Method used to find the user is a department manger of given ticket
     """
@@ -16,6 +14,5 @@ def is_department_manager(request,ticket):
     else:
         return False
     return DepartmentManager.objects.filter(
-        manager = user_emp,
-        department = department
+        manager=user_emp, department=department
     ).exists()
diff --git a/helpdesk/templates/helpdesk/ticket/ticket_claim_requests.html b/helpdesk/templates/helpdesk/ticket/ticket_claim_requests.html
index 6a8044352..53a678f2a 100644
--- a/helpdesk/templates/helpdesk/ticket/ticket_claim_requests.html
+++ b/helpdesk/templates/helpdesk/ticket/ticket_claim_requests.html
@@ -33,7 +33,7 @@
                             >
                                 {% trans "Action" %}
                             </div>
-                        
+
                         </div>
                     </div>
                     <div class="oh-sticky-table__tbody">
@@ -81,26 +81,26 @@
                                         </button>
                                     {% endif %}
                                     {% if not req.is_rejected %}
-                                        <button 
-                                            class="oh-btn oh-btn--danger w-100" 
+                                        <button
+                                            class="oh-btn oh-btn--danger w-100"
                                             titile = "{% trans 'Reject' %}"
                                             data-toggle="oh-modal-toggle"
                                             data-target="#objectDetailsModal"
                                             hx-get="{% url 'approve-claim-request' req.id %}?approve=False"
                                             hx-target="#objectDetailsModalTarget"
                                         >
-                                            <ion-icon name="close-outline"></ion-icon> 
+                                            <ion-icon name="close-outline"></ion-icon>
                                         </button>
                                     {% else %}
-                                        <button 
-                                            class="oh-btn oh-btn--danger w-100" 
+                                        <button
+                                            class="oh-btn oh-btn--danger w-100"
                                             titile = "{% trans 'Reject' %}"
                                             disabled
                                             >
-                                            <ion-icon name="close-outline"></ion-icon> 
+                                            <ion-icon name="close-outline"></ion-icon>
                                         </button>
                                     {% endif %}
-                                    
+
                                 </div>
                             </div>
                         </div>
@@ -132,4 +132,4 @@
             </div>
         </div>
     {% endif %}
-</div>
\ No newline at end of file
+</div>
diff --git a/helpdesk/templates/helpdesk/ticket/ticket_detail.html b/helpdesk/templates/helpdesk/ticket/ticket_detail.html
index f5157538a..15bc8a36c 100644
--- a/helpdesk/templates/helpdesk/ticket/ticket_detail.html
+++ b/helpdesk/templates/helpdesk/ticket/ticket_detail.html
@@ -339,15 +339,33 @@
               <div class="oh-helpdesk__chatbox">
                 <form name="comment-form" action="{% url 'comment-create' ticket.id %}" method="POST" enctype="multipart/form-data" class="oh-chat oh-chat__input-wrapper">
                   {% csrf_token %}
-                  <input name= "file" multiple="True" type="file" id="fileUpload" class="d-none" />
+                  <input name="file" multiple="True" type="file" id="fileUpload" class="d-none" />
                   <label
                     aria-role="button"
                     for="fileUpload"
-                    aria-label="Send Message"
-                    class="oh-btn oh-btn--chat oh-btn--chat-attachments"></label>
+                    aria-label="Attach Files"
+                    class="oh-btn oh-btn--chat oh-btn--chat-attachments"
+                  >
+                    <!-- The file count badge -->
+                    <span id="fileCount" style="
+                      position: absolute;
+                      top: -6px;   /* Adjust the top position */
+                      right: -6px; /* Adjust the right position */
+                      background-color: red;
+                      color: white;
+                      font-size: 12px;
+                      border-radius: 50%;
+                      padding: 2px 6px;
+                      min-width: 16px;
+                      text-align: center;
+                      display: none; /* Initially hidden */
+                    ">
+                    </span>
+                  </label>
+
                   <textarea
                     name="comment"
-                    class="oh-helpdesk__chat-input oh-chat__main-input"
+                    class="oh-helpdesk__chat-input oh-chat__main-input ps-5"
                     placeholder="Type something..."
                   ></textarea>
                   <button
@@ -529,28 +547,45 @@
                         {% for attachment in attachments %}
                           {% with extension=attachment.file.name|lower|slice:"-4:" %}
                             <a
-                              class ="me-2"
-                              data-toggle="oh-modal-toggle"
-                              data-target ="#viewFileModal"
-                              hx-target="#viewFile"
-                              hx-get="{% url 'view-ticket-document' attachment.id %}"
+                                class="me-2 position-relative d-inline-block"
+                                data-toggle="oh-modal-toggle"
+                                data-target="#viewFileModal"
+                                hx-target="#viewFile"
+                                hx-get="{% url 'view-ticket-document' attachment.id %}"
                             >
-                              <div class="oh-helpdesk__icon">
-                                <span class="oh-file-icon
-                                  {% if extension == '.pdf' %} oh-file-icon--pdf
-                                  {% elif extension in '.jpg .jpeg .png .gif .svg' %} oh-file-icon--image
-                                  {% elif extension in '.mp3 .wav .ogg' %} oh-file-icon--audio
-                                  {% elif extension in '.doc .docx' %} oh-file-icon--word
-                                  {% elif extension in '.xls .xlsx' %} oh-file-icon--excel
-                                  {% elif extension in '.ppt .pptx' %} oh-file-icon--powerpoint
-                                  {% elif extension in '.html' %} oh-file-icon--html
-                                  {% else %} oh-file-icon--default
-                                  {% endif %}"
-                                  title = "{{ attachment }}"
+                                <!-- File icon -->
+                                <div class="oh-helpdesk__icon">
+                                    <span class="oh-file-icon
+                                        {% if extension == '.pdf' %} oh-file-icon--pdf
+                                        {% elif extension in '.jpg .jpeg .png .gif .svg' %} oh-file-icon--image
+                                        {% elif extension in '.mp3 .wav .ogg' %} oh-file-icon--audio
+                                        {% elif extension in '.doc .docx' %} oh-file-icon--word
+                                        {% elif extension in '.xls .xlsx' %} oh-file-icon--excel
+                                        {% elif extension in '.ppt .pptx' %} oh-file-icon--powerpoint
+                                        {% elif extension in '.html' %} oh-file-icon--html
+                                        {% else %} oh-file-icon--default
+                                        {% endif %}"
+                                        title="{{ attachment }}"
+                                    >
+                                    </span>
+                                </div>
+
+                                <!-- Cross mark for delete action (absolute positioned) -->
+                                <span
+                                    class="position-absolute"
+                                    style="top: -6px; right: 0px; color: red; font-size: 16px; cursor: pointer;"
+                                    title="Delete attachment"
+                                    hx-delete="{% url 'delete-ticket-document' attachment.id %}"
+                                    hx-confirm="Are you sure you want to delete this file?"
+                                    hx-swap="none"
+                                    hx-trigger="click"
+                                    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+                                    onclick="deleteFile(event);"
                                 >
+                                    &times;
                                 </span>
-                              </div>
                             </a>
+
                           {% endwith %}
                         {% endfor %}
 
@@ -627,6 +662,25 @@
 	</div>
 </div>
 
+    <script>
+      function deleteFile(event) {
+          event.stopPropagation(); // Prevent the event from bubbling up
+          // No additional code is needed here, HTMX will handle the request automatically
+      }
+
+      document.getElementById('fileUpload').addEventListener('change', function() {
+        const fileCount = this.files.length;
+        const countSpan = document.getElementById('fileCount');
+
+        if (fileCount > 0) {
+          countSpan.textContent = fileCount;
+          countSpan.style.display = 'inline-block'; // Show the badge
+        } else {
+          countSpan.style.display = 'none'; // Hide if no files are selected
+        }
+      });
+    </script>
+
     <script>
       // Function to send rating via AJAX
       function sendRating(ratingValue) {
diff --git a/helpdesk/templatetags/helpdeskfilters.py b/helpdesk/templatetags/helpdeskfilters.py
index 025b49dbe..cabdad4b0 100644
--- a/helpdesk/templatetags/helpdeskfilters.py
+++ b/helpdesk/templatetags/helpdeskfilters.py
@@ -1,19 +1,18 @@
 from django import template
 from django.template.defaultfilters import register
 
-from helpdesk.models import ClaimRequest,DepartmentManager
+from helpdesk.models import ClaimRequest, DepartmentManager
 
 register = template.Library()
 
+
 @register.filter(name="calim_request_exists")
-def calim_request_exists(ticket,employee):
-    return ClaimRequest.objects.filter(
-        ticket_id = ticket,
-        employee_id = employee
-    ).exists()
+def calim_request_exists(ticket, employee):
+    return ClaimRequest.objects.filter(ticket_id=ticket, employee_id=employee).exists()
+
 
 @register.filter(name="is_department_manager")
-def is_department_manager(employee,ticket):
+def is_department_manager(employee, ticket):
     """
     Check requested user is a department manger or not
     """
@@ -25,6 +24,5 @@ def is_department_manager(employee,ticket):
     else:
         return False
     return DepartmentManager.objects.filter(
-        manager = employee,
-        department = department
-    ).exists()
\ No newline at end of file
+        manager=employee, department=department
+    ).exists()
diff --git a/helpdesk/urls.py b/helpdesk/urls.py
index 7b9dee805..1cf859b5b 100644
--- a/helpdesk/urls.py
+++ b/helpdesk/urls.py
@@ -148,4 +148,9 @@ urlpatterns = [
         views.get_department_employees,
         name="get-department-employee",
     ),
+    path(
+        "delete-ticket-document/<int:doc_id>",
+        views.delete_ticket_document,
+        name="delete-ticket-document",
+    ),
 ]
diff --git a/helpdesk/views.py b/helpdesk/views.py
index 3554b879d..f3986a3d8 100644
--- a/helpdesk/views.py
+++ b/helpdesk/views.py
@@ -1165,6 +1165,22 @@ def view_ticket_document(request, doc_id):
     return render(request, "helpdesk/ticket/ticket_document.html", context)
 
 
+@login_required
+@hx_request_required
+def delete_ticket_document(request, doc_id):
+    """
+    This function used to delete the uploaded document in the modal.
+    Parameters:
+
+    request (HttpRequest): The HTTP request object.
+    id (int): The id of the document.
+
+    """
+    Attachment.objects.get(id=doc_id).delete()
+    messages.success(request, _("Document has been deleted."))
+    return HttpResponse("<script>window.location.reload()</script>")
+
+
 @login_required
 def comment_create(request, ticket_id):
     """ "