diff --git a/templates/users/user_detail.html b/templates/users/user_detail.html
index 0cf7b6b7..9962acd6 100644
--- a/templates/users/user_detail.html
+++ b/templates/users/user_detail.html
@@ -5,37 +5,6 @@
 {% block title %}{{ _("View Staff") }}{% endblock title %}
 
 {% block content %}
-    <!-- Delete Modal -->
-    <div class="modal fade" id="deleteModal"
-         data-bs-backdrop="static"
-         data-bs-keyboard="false"
-         tabindex="-1"
-         aria-labelledby="deleteModalLabel"
-         aria-hidden="true">
-        <div class="modal-dialog modal-sm ">
-            <div class="modal-content rounded">
-                <div class="modal-body d-flex justify-content-center">
-                    <h1 class="text-danger me-2"><i class="bi bi-exclamation-diamond-fill"></i></h1>
-                    <span class="text-danger">
-                        {% trans "Are you sure you want to delete this user?" %}
-                    </span>
-                </div>                
-                <div class="btn-group">
-                    <button type="button"
-                            class="btn btn-sm btn-secondary"
-                            data-bs-dismiss="modal">
-                        {% trans 'No' %}
-                    </button>
-                    <a type="button"
-                       class="btn btn-sm btn-danger"
-                       href="{% url 'user_delete' user_.id %}">
-                        {% trans 'Yes' %}
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-
 <div class="row my-5">
     <div class="card rounded ">
         <div class="card-header ">
@@ -79,22 +48,25 @@
             </table>
     </div>
         <div class="card-footer d-flex ">
-            <a class="btn btn-sm btn-primary me-1" href="{% url 'user_update' user_.id %}">
-                <i class="fa-solid fa-pen-to-square"></i>
+            <a class="btn btn-sm btn-phoenix-primary me-1" href="{% url 'user_update' user_.id %}">
                 {{ _("Edit") }}
+                <i class="fa-solid fa-pen-to-square"></i>
             </a>
-            <a class="btn btn-sm btn-danger me-1"
-               data-bs-toggle="modal"
-               data-bs-target="#deleteModal">
-               <i class="fa-solid fa-trash"></i>
+
+            <button class="btn btn-phoenix-danger btn-sm delete-btn me-1"
+                                    data-url="{% url 'user_delete' user_.id %}"
+                                    data-message="{{ _("Are you sure you want to delete this user?")}}"
+                                    data-bs-toggle="modal" data-bs-target="#deleteModal">
                 {{ _("Delete") }}
-            </a>
-            <a class="btn btn-sm btn-secondary"
+                                  <i class="fas fa-trash"></i>
+                              </button>
+            <a class="btn btn-sm btn-phoenix-secondary"
                href="{% url 'user_list' %}">
+                {{ _("Back to List") }}
                 <i class="fa-regular fa-circle-left"></i>
-                {% trans "Back to List" %}
             </a>
         </div>
     </div>
 </div>
+    {% include 'modal/delete_modal.html' %}
 {% endblock %}
diff --git a/templates/users/user_list.html b/templates/users/user_list.html
index 5011deb5..6a88f143 100644
--- a/templates/users/user_list.html
+++ b/templates/users/user_list.html
@@ -22,30 +22,30 @@
             <thead>
                 <tr>
                     <th>{% trans 'name'|capfirst %}</th>
-                    <th>{% trans 'arabic name'|capfirst %}</th>
                     <th>{% trans 'email'|capfirst %}</th>
                     <th>{% trans 'phone number'|capfirst %}</th>
                     <th>{% trans 'role'|capfirst %}</th>
-                    <th>{% trans 'groups'|capfirst %}</th>
                     <th>{% trans 'actions'|capfirst %}</th>
                 </tr>
             </thead>
             <tbody>
                 {% for user in users %}
                 <tr>
-                    <td>{{ user.name }}</td>
-                    <td>{{ user.arabic_name }}</td>
-                    <td>{{ user.email }}</td>
-                    <td>{{ user.phone_number }}</td>
-                    <td>
-                        <span class="badge badge-sm bg-primary"><i class="fa-solid fa-scroll"></i> {% trans user.staff_type|title %}</span>
+                    <td class="align-middle white-space-nowrap ps-0">
+                        <div>
+                            <a class="fs-8 fw-bold" href="{% url 'user_detail' user.pk%}">{{ user.arabic_name }}</a>
+                          <div class="d-flex align-items-center">
+                            <p class="mb-0 text-body-highlight fw-semibold fs-9 me-2">{{ user.name }}</p>
+                          </div>
+                    </div>
                     </td>
+                    <td class="align-middle white-space-nowrap align-items-center">{{ user.email }}</td>
+                    <td class="align-middle white-space-nowrap align-items-center justify-content-center">{{ user.phone_number }}</td>
                     <td>
-                        {% for group in user.groups.all %}
-                            <span class="badge badge-sm bg-info"><i class="fa-solid fa-user-group"></i> {{ group.name }}</span>
-                        {% endfor %}
+                        <span class="badge badge-sm bg-primary text-center"><i class="fa-solid fa-scroll"></i> {% trans user.staff_type|title %}</span>
                     </td>
-                    <td>
+
+                    <td class="align-middle white-space-nowrap">
                         <a class="btn btn-phoenix-success"
                            href="{% url 'user_detail' user.id %}">
                            <i class="fa-solid fa-eye"></i>