diff --git a/admin/templates/states_panel.html b/admin/templates/states_panel.html
index 57f7f57..7c71083 100644
--- a/admin/templates/states_panel.html
+++ b/admin/templates/states_panel.html
@@ -21,8 +21,10 @@
     </caption>
   <thead class="table-light">
     <tr>
-      <th scope="col" width="5%" class="text-start">
+      <th scope="col" width="1%" class="text-start">
       </th>
+      <th scope="col" width="5%" class="text-center">
+      #</th>
       <th scope="col">{% trans "State Definition" %}
       </th>
       <th scope="col" width="15%" class="text-center">{% trans "Actions" %}
@@ -37,9 +39,11 @@
         class="align-items-center">
 
         <td class="">
-          <i class="fas fa-duotone fa-solid fa-grip px-1" aria-hidden="true">
-          </i>
-          <strong> {{ state_definition.order }} </strong>
+          <i class="bi bi-grip-vertical" aria-hidden="true">
+            </i>
+        </td>
+        <td class="text-center">
+          <strong>{{ state_definition.order }} </strong>
         </td>
         <td class="font-monospace">
           {{ state_definition.state }}
@@ -48,16 +52,22 @@
         <!-- action buttons -->
         <td>
           <div class="btn-group float-end">
-            <button type="button" class="btn btn-sm btn-info text-white" data-bs-toggle="modal" data-bs-target="#editStateModal{{ state_definition.id }}">
-              <i class="bi bi-pencil">
-              </i> {% trans 'Edit' %}
+            <!-- Edit Button -->
+            <button 
+              type="button    " 
+              class="btn btn-sm btn-outline-info d-flex align-items-center" 
+              data-bs-toggle="modal"  data-bs-target="#editStateModal{{ state_definition.id }}">
+              <i class="bi bi-pencil me-1"></i>
+              {% trans 'Edit' %}
             </button>
-            <button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#deleteStateModal{{ state_definition.id }}">
-              <i class="bi bi-trash">
-              </i>
+            <button 
+              type="button" class="btn btn-sm btn-outline-danger d-flex align-items-center" 
+              data-bs-toggle="modal" 
+              data-bs-target="#deleteStateModal{{ state_definition.id }}" >
+              <i class="bi bi-trash me-1"></i>
+              {% trans 'Delete' %}
             </button>
           </div>
-
         </td>
       </tr>
     {% endfor %}
diff --git a/device/templates/details.html b/device/templates/details.html
index 08d9506..51e0183 100644
--- a/device/templates/details.html
+++ b/device/templates/details.html
@@ -4,7 +4,7 @@
 {% block content %}
 
 <div class="position-fixed" style="bottom: 2rem; right: 2rem; z-index: 9999; display: flex; gap: 0.5rem;">
-  <button class="btn btn-outline-warning d-flex align-items-center shadow" type="button"
+  <button class="btn btn-warning d-flex align-items-center shadow" type="button"
           data-bs-toggle="offcanvas" data-bs-target="#notesOffcanvas" aria-controls="notesOffcanvas"
           data-bs-toggle="tooltip" data-bs-placement="left" title="{% trans 'View recent notes' %}">
     <i class="bi bi-journal-text me-1"></i>