diff --git a/src/pages/nearle/dispatch/Dispatch.css b/src/pages/nearle/dispatch/Dispatch.css
index 00c8c6f..3bd66fb 100644
--- a/src/pages/nearle/dispatch/Dispatch.css
+++ b/src/pages/nearle/dispatch/Dispatch.css
@@ -5966,6 +5966,47 @@
   letter-spacing: 0.04em;
 }
 
+/* Rider/customer/delivery-id stack on the left, Step badge pinned to the
+   right so operators can read the sequence position without opening the
+   Details section. */
+.dispatch-container .dispatch-popup .pu-header-main {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.dispatch-container .dispatch-popup .pu-header-left {
+  min-width: 0;
+  flex: 1;
+}
+
+.dispatch-container .dispatch-popup .pu-header-step {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 4px 10px;
+  border-radius: 10px;
+  background: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.dispatch-container .dispatch-popup .pu-header-step-label {
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #7b1fa2;
+}
+
+.dispatch-container .dispatch-popup .pu-header-step-value {
+  font-size: 15px;
+  font-weight: 800;
+  color: #7b1fa2;
+  white-space: nowrap;
+}
+
 /* --- Body sections ---
    No scroll: the popup expands to fit its content. Width is the dimension
    we constrain (via leaflet's maxWidth prop) so the body grows downward as
diff --git a/src/pages/nearle/dispatch/Dispatch.js b/src/pages/nearle/dispatch/Dispatch.js
index 82531c9..677de91 100644
--- a/src/pages/nearle/dispatch/Dispatch.js
+++ b/src/pages/nearle/dispatch/Dispatch.js
@@ -2644,17 +2644,29 @@ const Dispatch = ({
               </span>
             )}
           </div>
-          <div className="pu-rider">
-            <MdTwoWheeler /> <span>{o.rider_name || o.ridername || 'Unassigned'}</span>
-          </div>
-          {(o.deliverycustomer || o.customername) && (
-            <div className="pu-customer" title={o.deliverycustomer || o.customername}>
-              <MdPerson /> <span>{o.deliverycustomer || o.customername}</span>
+          <div className="pu-header-main">
+            <div className="pu-header-left">
+              <div className="pu-rider">
+                <MdTwoWheeler /> <span>{o.rider_name || o.ridername || 'Unassigned'}</span>
+              </div>
+              {(o.deliverycustomer || o.customername) && (
+                <div className="pu-customer" title={o.deliverycustomer || o.customername}>
+                  <MdPerson /> <span>{o.deliverycustomer || o.customername}</span>
+                </div>
+              )}
+              {o.deliveryid != null && (
+                <div className="pu-delivery-id">Delivery #{o.deliveryid}</div>
+              )}
             </div>
-          )}
-          {o.deliveryid != null && (
-            <div className="pu-delivery-id">Delivery #{o.deliveryid}</div>
-          )}
+            {o.step != null && (
+              <div className="pu-header-step">
+                <span className="pu-header-step-label">Step</span>
+                <span className="pu-header-step-value">
+                  {o.trip_number != null && o.trip_number > 1 ? `T${o.trip_number}·` : ''}{o.step}
+                </span>
+              </div>
+            )}
+          </div>
         </div>
 
         <div className="pu-body">
@@ -2726,17 +2738,6 @@ const Dispatch = ({
                   </div>
                 </div>
               )}
-              {o.step != null && (
-                <div className="pu-detail">
-                  <div className="pu-detail-icon"><MdMyLocation /></div>
-                  <div className="pu-detail-body">
-                    <div className="pu-detail-label">Step</div>
-                    <div className="pu-detail-value">
-                      {o.trip_number != null && o.trip_number > 1 ? `Trip ${o.trip_number} · ` : ''}#{o.step}
-                    </div>
-                  </div>
-                </div>
-              )}
             </div>
 
             {(o.actualkms != null || o.riderkms != null || estMeters !== null) && (