diff --git a/inventory/routes/index.py b/inventory/routes/index.py
index 6fb5cb8..eff0caf 100644
--- a/inventory/routes/index.py
+++ b/inventory/routes/index.py
@@ -11,30 +11,30 @@ from ..utils.load import eager_load_worklog_relationships, eager_load_inventory_
 def generate_solvable_matrix(level, seed_clicks=None):
     size = level + 3
     matrix = [[True for _ in range(size)] for _ in range(size)]
+    presses = []
 
-    def toggle(x, y):
-        directions = [(0, 0), (-1, 0), (1, 0), (0, -1), (0, 1)]  # self, N, S, W, E
-        for dx, dy in directions:
+    def press(x, y):
+        # record the press (once)
+        presses.append((x, y))
+        # apply its effect
+        for dx, dy in [(0,0),(-1,0),(1,0),(0,-1),(0,1)]:
             nx, ny = x + dx, y + dy
             if 0 <= nx < size and 0 <= ny < size:
                 matrix[nx][ny] = not matrix[nx][ny]
 
-    # Pick a number of random "clicks"
     num_clicks = seed_clicks if seed_clicks is not None else random.randint(size, size * 2)
-
     for _ in range(num_clicks):
         x = random.randint(0, size - 1)
         y = random.randint(0, size - 1)
-        toggle(x, y)
-
-    return matrix
+        press(x, y)
 
+    return matrix, presses  # return the PRESS LIST as the “solution”
 
 @main.route("/12648243")
 def coffee():
     level = request.args.get('level', 0, int)
-    matrix = generate_solvable_matrix(level)
-    return render_template("coffee.html", matrix=matrix, level=level)
+    matrix, clicked = generate_solvable_matrix(level)
+    return render_template("coffee.html", matrix=matrix, level=level, clicked=clicked)
 
 @main.route("/")
 def index():
diff --git a/inventory/templates/coffee.html b/inventory/templates/coffee.html
index 079ce5a..bb0684d 100644
--- a/inventory/templates/coffee.html
+++ b/inventory/templates/coffee.html
@@ -11,7 +11,7 @@
         {% for x in range(level + 3) %}
             <div class="row" style="min-height: {{ 80 / (level + 3) }}vh;">
                 {% for y in range(level + 3) %}
-                <div class="col m-2 p-0 align-items-center d-flex justify-content-center border border-black rounded light shadow" id="light-{{ x }}-{{ y }}">
+                <div class="col m-2 p-0 align-items-center d-flex justify-content-center border border-{% if (x, y) in clicked and false %}danger border-2{% else %}black{% endif %} rounded light shadow" id="light-{{ x }}-{{ y }}">
                     <div class="form-check">
                         <input type="checkbox" class="form-check-input d-none" id="checkbox-{{ x }}-{{ y }}"{% if matrix[x][y] %} checked{% endif %}>
                     </div>
@@ -24,8 +24,21 @@
 
 {% block script %}
     const gridSize = {{ level + 3 }};
+    var clickOrder = {};
+    var clickCounter = 0;
 
-    updateLights();
+    updateLights(); // fine, whatever that does
+
+    {{ clicked | tojson }}.forEach(([x, y]) => {
+      clickCounter++;
+      const key = `${x}-${y}`;
+      (clickOrder[key] ??= []).push(clickCounter); // initialize if missing, then push
+    });
+
+    Object.entries(clickOrder).forEach(([key, value]) => {
+        const light = document.querySelector(`#light-${key}`);
+        // light.innerHTML += value;
+    });
 
     function updateLights() {
         document.querySelectorAll('.light').forEach(light => {