diff --git a/admin/templates/states_panel.html b/admin/templates/states_panel.html
index 2bb7e9f..c546f6e 100644
--- a/admin/templates/states_panel.html
+++ b/admin/templates/states_panel.html
@@ -26,10 +26,9 @@
                 <strong>  {{ state_definition.state }}</strong>  <br>
               </div>
             </div>
-            <form method="post" action="#">
-              {% csrf_token %}
-              <button type="submit" class="btn btn-danger btn-sm">{% trans "Delete" %}</button>
-            </form>
+            <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteStateModal{{ state_definition.id }}">
+              {% trans "Delete" %}
+            </button>
           </li>
         {% endfor %}
       </ul>
@@ -41,6 +40,7 @@
   </div>
 </div>
 
+<!-- add state definition Modal -->
 <div class="modal fade" id="addStateModal" tabindex="-1" aria-labelledby="addStateModalLabel" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
@@ -68,25 +68,36 @@
   </div>
 </div>
 
-<script>
-  $(function() {
-    $("#sortable").sortable({
-      update: function(event, ui) {
-        var order = $(this).sortable('toArray', { attribute: 'data-id' });
-        $.ajax({
-          url: "  ",
-          method: "POST",
-          data: {
-            order: order,
-            csrfmiddlewaretoken: '{{ csrf_token }}'
-          },
-          success: function(response) {
-            location.reload();
-          }
-        });
-      }
-    });
-    $("#sortable").disableSelection();
-  });
-</script> 
+<!-- delete state definition Modal -->
+{% if state_definitions %}
+{% 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-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>
+      </div>
+      <div class="modal-body">
+        <p>{% trans "Are you sure you want to delete this state definition?" %}</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>
+        </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>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+{% endfor %}
+{% endif %}
+
 {% endblock %}