diff --git a/res/app/components/stf/screen/screen-directive.js b/res/app/components/stf/screen/screen-directive.js
index a1ec566f..d07d0c4c 100644
--- a/res/app/components/stf/screen/screen-directive.js
+++ b/res/app/components/stf/screen/screen-directive.js
@@ -336,9 +336,14 @@ module.exports = function DeviceScreenDirective($document, ScalingService,
       }
 
       function createSlots() {
+        // The reverse order is important because slots and fingers are in
+        // opposite sort order. Anyway don't change anything here unless
+        // you understand what it does and why.
         for (var i = 9; i >= 0; --i) {
+          var finger = createFinger(i)
+          element.append(finger)
           slots.push(i)
-          fingers.unshift(createFinger(i))
+          fingers.unshift(finger)
         }
       }