diff --git a/admin/templates/states_panel.html b/admin/templates/states_panel.html
index c3ca7c8..1305e03 100644
--- a/admin/templates/states_panel.html
+++ b/admin/templates/states_panel.html
@@ -14,41 +14,69 @@
   </div>
 </div>
 
-<div class="row mt-5">
+<div class="row mt-4">
   <div class="col">
     {% if state_definitions %}
-      <table class="table table-hover table-border">
-        <caption>{% trans 'Move and drag state definitions to reorder' %}</caption>
-        <thead class="align-items-start">
-          <tr class="table-active">
-            <th scope="col" width="1%"></th>
-            <th scope="col" width="7%">#</th>
-            <th scope="col" >{% trans "State" %}</th>
-            <th scope="col" width="10%" ></th>
-          </tr>
-        </thead>
-        <tbody id="sortable_list">
-          {% for state_definition in state_definitions %}
-            <tr data-lookup="{{ state_definition.id }}" style="cursor: pointer;">
-              <td>
-                <i class="bi bi-grip-vertical text-muted me-3" aria-hidden="true"></i>
-              </td>
-              <td class="fw-bold">
-                {{ state_definition.order }}
-              </td>
-              <td>{{ state_definition.state }}</td>
-              <td class="text-end d-flex">
-                <button type="button" class="btn btn-primary btn-sm me-1" data-bs-toggle="modal" data-bs-target="#editStateModal{{ state_definition.id }}">
-                  <i class="bi bi-pencil"></i>
-                </button>
-                <button type="button" id="delete-btn" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteStateModal{{ state_definition.id }}">
-                <i class="bi bi-trash"></i>
-                </button>
-              </td>
-            </tr>
-          {% endfor %}
-        </tbody>
-      </table>
+  <table class="table table-hover table-bordered align-middle">
+    <caption class="text-muted small">
+      {% trans 'Move and drag state definitions to reorder' %}
+    </caption>
+  <thead class="table-light">
+    <tr>
+      <th scope="col" width="1%">
+      </th>
+      <th scope="col" width="7%" class="text-center">#
+      </th>
+      <th scope="col" class="">{% trans "State" %}
+      </th>
+      <th scope="col" width="15%" class="text-center">{% trans "Actions" %}
+      </th>
+    </tr>
+  </thead>
+  <tbody id="sortable_list">
+    {% for state_definition in state_definitions %}
+      <tr
+        data-lookup="{{ state_definition.id }}"
+        style="cursor: grab;"
+        class="align-items-center">
+
+        <td class="text-center">
+          <i class="bi bi-grip-vertical text-muted" aria-hidden="true">
+          </i>
+        </td>
+        <td class="fw-bold text-center">
+          {{ state_definition.order }}
+        </td>
+        <td>
+          {{ state_definition.state }}
+        </td>
+
+        <!-- action buttons -->
+        <td class="text-center">
+          <div class="d-flex justify-content-center gap-1">
+            <button
+              type="button"
+              class="btn btn-sm btn-info"
+              data-bs-toggle="modal"
+              data-bs-target="#editStateModal{{ state_definition.id }}">
+              <i class="bi bi-pencil">
+              </i>
+            </button>
+            <button
+              type="button"
+              id="delete-btn"
+              class="btn btn-sm btn-danger"
+              data-bs-toggle="modal"
+              data-bs-target="#deleteStateModal{{ state_definition.id }}">
+              <i class="bi bi-trash">
+              </i>
+            </button>
+          </div>
+        </td>
+      </tr>
+    {% endfor %}
+  </tbody>
+</table>
 
   <form id="orderingForm" method="post" action="{% url 'admin:update_state_order' %}">
         {% csrf_token %}