diff --git a/device/templates/details.html b/device/templates/details.html
index c63497c..221c845 100644
--- a/device/templates/details.html
+++ b/device/templates/details.html
@@ -5,24 +5,28 @@
 
 <div class="row">
   <div class="col">
-    <h3>{{ object.shortid }}</h3>
+    <h3>{{ object.shortid }}
+    </h3>
   </div>
   <div class="col text-end">
     {% if state_definitions %}
       <div class="dropdown">
-        <button class="btn btn-green-admin dropdown-toggle" type="button" id="addStateDropdown" data-bs-toggle="dropdown" aria-expanded="false">
+          <button class="btn btn-green-admin dropdown-toggle" type="button" id="addStateDropdown" data-bs-toggle="dropdown" aria-expanded="false">
           {% trans "Action" %}
-        </button>
-        <ul class="dropdown-menu" aria-labelledby="addStateDropdown">
-          {% for state in state_definitions %}
-            <li>
-              <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#addStateModal{{ state.id }}">
-                {{ state.state }}
-              </a>
-            </li>
-          {% endfor %}
-        </ul>
-      </div>
+          </button>
+          <ul class="dropdown-menu" aria-labelledby="addStateDropdown">
+            {% for state in state_definitions %}
+              <li>
+                <a class="dropdown-item d-flex justify-content-between align-items-center" href="#" data-bs-toggle="modal" data-bs-target="#addStateModal{{ state.id }}">
+                  <span class="badge bg-secondary rounded-pill-sm">{{ forloop.counter }}
+                  </span>
+                  <span>{{ state.state }}
+                  </span>
+                </a>
+              </li>
+            {% endfor %}
+          </ul>
+        </div>
     {% else %}
       <button class="btn btn-green-admin" type="button" disabled>
         {% trans "Action" %}
@@ -94,15 +98,26 @@
           <h5 class="modal-title" id="addStateModalLabel{{ state.id }}">{% trans "Summary of changes" %}</h5>
           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
-        <div class="modal-body m-2">
-
+        <div class="modal-body m-1">
+        {% if device_states and device_states.0.state == state.state %}
+          <div class="alert alert-warning d-flex align-items-center">
+            <i class="bi bi-exclamation-triangle-fill me-2"></i>
+            <span>{% trans "The device is already in the selected state." %}</span>
+          </div>
+        {% endif %}
 
           <div class="mb-3">
             <div class="d-flex align-items-center">
               <i class="bi bi-arrow-right-circle text-danger me-2"></i>
 
               <span class="text-danger fw-bold me-2">{% trans "From:" %}</span>
-              <span class="text-danger fw-italic">state_placeholder</span>
+              <span class="text-danger fw-italic">
+                {% if device_states %}
+                  {{device_states.0.state}}
+                {% else %}
+                  {% trans 'None' %}
+                {% endif %}
+              </span>
             </div>
             <div class="d-flex align-items-center mt-2">
               <i class="bi bi-arrow-right-circle text-success me-2"></i>