diff --git a/employee/cbv/disciplinary_actions.py b/employee/cbv/disciplinary_actions.py
index 5cc124548..f80f615e5 100644
--- a/employee/cbv/disciplinary_actions.py
+++ b/employee/cbv/disciplinary_actions.py
@@ -267,6 +267,10 @@ class DisciplinaryActionsDetailView(HorillaDetailedView):
             (_("Description"), "description"),
         ]
 
+    cols = {
+        "description": 12,
+    }
+
     action_method = "detail_actions"
 
     model = DisciplinaryAction
@@ -276,3 +280,9 @@ class DisciplinaryActionsDetailView(HorillaDetailedView):
         "subtitle": "",
         "avatar": "get_avatar",
     }
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        instance = context["object"]
+        instance.ordered_ids = context["instance_ids"]
+        return context
diff --git a/employee/templates/cbv/disciplinary_actions/detail_action.html b/employee/templates/cbv/disciplinary_actions/detail_action.html
index 7dc8b4143..6a219a3db 100644
--- a/employee/templates/cbv/disciplinary_actions/detail_action.html
+++ b/employee/templates/cbv/disciplinary_actions/detail_action.html
@@ -1,23 +1,44 @@
-{% load basefilters %}{% load i18n %}
-      {% if perms.payroll.change_disciplinaryaction or perms.payroll.delete_disciplinaryaction %}
+{% load basefilters i18n %}
 
-                    <div class="oh-btn-group"  style="width: 100%;">
-                      {% if perms.payroll.change_disciplinaryaction %}
-                        <a hx-get="{% url 'update-actions' instance.id %}" hx-target='#genericModalBody' data-toggle='oh-modal-toggle' data-target="#genericModal" class="oh-btn oh-btn--info w-50" title="{% trans 'Edit' %}">
-                        <ion-icon name="create-outline" role="img"
-                        class="md hydrated" aria-label="create outline"></ion-icon></a>
-                      {% endif %}
-                      {% if perms.payroll.delete_disciplinaryaction %}
-                        <form hx-confirm="{% trans "Are you sure you want to delete this disciplinary action?" %}" hx-post="{% url 'delete-actions' instance.id %}?instances_ids={{ request.GET.instance_ids }}" hx-target="#genericModalBody" class="w-50">
-                          {% csrf_token %}
-                          <button type='submit' class="oh-btn oh-btn--secondary w-100" title="{% trans 'Remove' %}"><ion-icon name="trash-outline"></ion-icon></button>
-                        </form>
-                      {% endif %}
-                    </div>
+{% if perms.employee.change_disciplinaryaction or perms.employee.delete_disciplinaryaction %}
 
-                {% endif %}
-  {% if request.GET.deleted %}
-  <script>
-  $(".reload-record").click()
-  </script>
-  {% endif %}
+	<div class="oh-btn-group w-100">
+		{% if perms.employee.change_disciplinaryaction %}
+			<a
+			hx-get="{% url 'update-actions' instance.id %}"
+			hx-target="#genericModalBody"
+			data-toggle="oh-modal-toggle"
+			data-target="#genericModal"
+			class="oh-btn oh-btn--info w-50"
+			title="{% trans 'Edit' %}"
+			>
+			<ion-icon
+				name="create-outline"
+				role="img"
+				class="md hydrated"
+				aria-label="create outline"
+			></ion-icon>
+			{% trans "Edit" %}
+			</a>
+		{% endif %}
+
+		{% if perms.employee.delete_disciplinaryaction %}
+			<a
+				class="oh-btn oh-btn--secondary w-50"
+				hx-confirm="{% trans 'Are you sure you want to delete this disciplinary action?' %}"
+				hx-post="{% url 'delete-actions' instance.id %}?instances_ids={{ instance.ordered_ids }}"
+				hx-target="#genericModalBody"
+			>
+				<ion-icon name="trash-outline"></ion-icon>
+				{% trans "Delete" %}
+			</a>
+		{% endif %}
+	</div>
+
+{% endif %}
+
+{% if request.GET.deleted %}
+<script>
+	$(".reload-record").click();
+</script>
+{% endif %}
diff --git a/employee/templates/cbv/disciplinary_actions/employee_col.html b/employee/templates/cbv/disciplinary_actions/employee_col.html
index 21258fe34..82d4c5376 100644
--- a/employee/templates/cbv/disciplinary_actions/employee_col.html
+++ b/employee/templates/cbv/disciplinary_actions/employee_col.html
@@ -1,40 +1,66 @@
-{% load i18n %} {% load basefilters %}
-    <div class="oh-permission-table--toggle" data-toggle-count onclick="event.stopPropagation()">
-      <div class="d-flex align-items-center">
+{% load i18n basefilters %}
 
-        <button class="oh-permission-table__collapse me-2">
-          <span  title="{% trans "Reveal" %}" class="reveal-span"><ion-icon class="oh-permission-table__collapse-down" name="chevron-down-outline"></ion-icon></span>
-          <span  title="{% trans "Collapse" %}" class="collapse-span"><ion-icon class="oh-permission-table__collapse-up" name="chevron-up-outline"></ion-icon></span>
-        </button>
-        <span class="count-span" style="font-style:italic;color:hsl(0deg,0%,37%);">{{instance.employee_id.all|length}}
-          {% if instance.employee_id.all|length > 1 %}
-            {% trans "Employees" %}
-          {% else %}
-            {% trans "Employee" %}
-          {% endif %}
-        </span>
-      </div>
-      {% for emp in instance.employee_id.all %}
-        <span class="oh-user-panel oh-collapse-panel" data-type="user">
-          <div class="oh-profile oh-profile--md">
-            <div class="oh-profile__avatar mr-1">
-              <img
-              src="https://ui-avatars.com/api/?name={{emp.get_full_name}}&background=random"
-              class="oh-profile__image"
-              alt="Baby C."
-              />
-            </div>
-            <span class="oh-profile__name oh-text--dark" title="{{emp}}"
-            >{{emp.get_full_name}}</span>
-          </div>
-          {% if perms.payroll.change_disciplinaryaction or perms.payroll.delete_disciplinaryaction %}
-          <a title="{% trans "Remove" %}" hx-post="{% url 'remove-employee-disciplinary-action' instance.id emp.id %}" hx-target="#listContainer" class="oh-user-panel__remove"
-            hx-confirm="{% trans 'Are you sure want to remove this employee from this action?' %}">
-            <ion-icon name="close-outline"></ion-icon>
-          </a>
-          {% else %}
-          <a class="oh-user-panel__remove"> </a>
-          {% endif%}
-        </span>
-      {% endfor %}
-    </div>
+<div
+	class="oh-permission-table--toggle"
+	data-toggle-count
+	onclick="event.stopPropagation()"
+>
+	<div class="d-flex align-items-center">
+		<button class="oh-permission-table__collapse me-2">
+			<span title="{% trans 'Reveal' %}" class="reveal-span"
+				><ion-icon
+					class="oh-permission-table__collapse-down"
+					name="chevron-down-outline"
+				></ion-icon
+			></span>
+			<span title="{% trans 'Collapse' %}" class="collapse-span"
+				><ion-icon
+					class="oh-permission-table__collapse-up"
+					name="chevron-up-outline"
+				></ion-icon
+			></span>
+		</button>
+		<span
+			class="count-span"
+			style="font-style: italic; color: hsl(0deg, 0%, 37%)"
+		>
+			{{ instance.employee_id.all|length }}
+			{% if instance.employee_id.all|length == 1 %}
+				{% trans "Employee" %}
+			{% else %}
+				{% trans "Employees" %}
+			{% endif %}
+		</span>
+		<div class="oh-collapse-panel">
+			{% for emp in instance.employee_id.all %}
+			<span class="oh-user-panel" data-type="user">
+				<div class="oh-profile oh-profile--md">
+					<div class="oh-profile__avatar mr-1">
+						<img
+							src="https://ui-avatars.com/api/?name={{emp.get_full_name}}&background=random"
+							class="oh-profile__image"
+							alt="Baby C."
+						/>
+					</div>
+					<span class="oh-profile__name oh-text--dark" title="{{emp}}"
+						>{{emp.get_full_name}}</span
+					>
+				</div>
+				{% if perms.payroll.change_disciplinaryaction or perms.payroll.delete_disciplinaryaction %}
+					<a
+						title="{% trans 'Remove' %}"
+						hx-post="{% url 'remove-employee-disciplinary-action' instance.id emp.id %}"
+						hx-target="#listContainer"
+						class="oh-user-panel__remove"
+						hx-confirm="{% trans 'Are you sure want to remove this employee from this action?' %}"
+					>
+						<ion-icon name="close-outline"></ion-icon>
+					</a>
+				{% else %}
+					<a class="oh-user-panel__remove"> </a>
+				{% endif%}
+			</span>
+			{% endfor %}
+		</div>
+	</div>
+</div>