diff --git a/admin/templates/states_panel.html b/admin/templates/states_panel.html
index 09d6a64..78a78e4 100644
--- a/admin/templates/states_panel.html
+++ b/admin/templates/states_panel.html
@@ -87,32 +87,40 @@
 <!-- delete state definition Modal -->
 {% for state_definition in state_definitions %}
 <div class="modal fade" id="deleteStateModal{{ state_definition.id }}" tabindex="-1" aria-labelledby="deleteStateModalLabel{{ state_definition.id }}" aria-hidden="true">
-  <div class="modal-dialog">
+  <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="deleteStateModalLabel{{ state_definition.id }}">{% trans "Delete State Definition" %}</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <h5 class="modal-title fw-bold" id="deleteStateModalLabel{{ state_definition.id }}">
+          {% trans "Delete State Definition" %}
+        </h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
       </div>
       <div class="modal-body">
-        <strong class="mb-2">{% trans "Are you sure you want to delete this state definition?" %}</strong>
-        <p>{% trans "Any change in order will not be saved" %}</p>
-        <div class="d-flex align-items-center mt-3">
-              <span class="me-4 display-7">{{ state_definition.order }}</span>
-              <div>
-                <strong>  {{ state_definition.state }}</strong>  <br>
-              </div>
+        <p class="text-danger fw-semibold h6">{% trans "Are you sure you want to delete this state definition?" %}</p>
+        <p class="text-muted">{% trans "This action cannot be undone and any changes in order will not be saved." %}</p>
+
+        <div class="d-flex align-items-center border rounded p-3 mt-3">
+          <span class="badge bg-secondary me-3 display-6">{{ state_definition.order }}</span>
+          <div>
+            <p class="mb-0 fw-bold">{{ state_definition.state }}</p>
+          </div>
         </div>
-     </div>
+      </div>
       <div class="modal-footer">
         <form method="post" action="{% url 'admin:delete_state_definition' state_definition.order %}">
-          {% csrf_token %}  
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Close" %}</button>
-          <button type="submit" class="btn btn-danger">{% trans "Delete" %}</button>
+          {% csrf_token %}
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+            {% trans "Cancel" %}
+          </button>
+          <button type="submit" class="btn btn-danger">
+            {% trans "Delete" %}
+          </button>
         </form>
       </div>
     </div>
   </div>
 </div>
+
 {% endfor %}