diff --git a/apps/machine/src/views/IdleView.vue b/apps/machine/src/views/IdleView.vue
index cbed320..cad3758 100644
--- a/apps/machine/src/views/IdleView.vue
+++ b/apps/machine/src/views/IdleView.vue
@@ -181,6 +181,19 @@ function handleCashOut() {
          re-lock the moment they're done rather than waiting out the idle timeout
          (which would leave the card usable by the next person meanwhile). -->
     <div class="absolute top-4 left-4 lg:top-8 lg:left-8 flex items-center gap-2 lg:gap-3">
+      <!-- End session first (leftmost): a solid `destructive` swatch so the exit
+           reads as red in every theme (--destructive is theme-scoped). Shown
+           only while the access gate is engaged. -->
+      <Button
+        v-if="atmStore.accessControl.enabled"
+        variant="destructive"
+        size="icon"
+        class="h-14 w-14 lg:h-20 lg:w-20 rounded-full text-2xl lg:text-4xl font-bold"
+        aria-label="End session"
+        @click="atmStore.endSession()"
+      >
+        ✕
+      </Button>
       <Button
         variant="outline"
         size="icon"
@@ -190,16 +203,6 @@ function handleCashOut() {
       >
         ?
       </Button>
-      <Button
-        v-if="atmStore.accessControl.enabled"
-        variant="outline"
-        size="icon"
-        class="h-14 w-14 lg:h-20 lg:w-20 rounded-full border-2 border-destructive/50 text-2xl lg:text-4xl font-bold text-destructive"
-        aria-label="End session"
-        @click="atmStore.endSession()"
-      >
-        ✕
-      </Button>
     </div>
 
     <!-- Debug toggle (only visible when debug bar is hidden, never in production) -->