diff --git a/inventory/routes/index.py b/inventory/routes/index.py
index 4e77693..e7d6a3e 100644
--- a/inventory/routes/index.py
+++ b/inventory/routes/index.py
@@ -1,4 +1,4 @@
-from flask import render_template
+from flask import render_template, request
 import pandas as pd
 import random
 
@@ -10,8 +10,9 @@ from ..utils.load import eager_load_worklog_relationships, eager_load_inventory_
 
 @main.route("/12648243")
 def coffee():
-    matrix = [[random.choice([True, False]) for _ in range(24)] for _ in range(24)]
-    return render_template("coffee.html", matrix=matrix)
+    level = request.args.get('level', 0, int)
+    matrix = [[random.choice([True, False]) for _ in range(level + 3)] for _ in range(level + 3)]
+    return render_template("coffee.html", matrix=matrix, level=level)
 
 @main.route("/")
 def index():
diff --git a/inventory/templates/coffee.html b/inventory/templates/coffee.html
index 574e124..68e908d 100644
--- a/inventory/templates/coffee.html
+++ b/inventory/templates/coffee.html
@@ -2,10 +2,10 @@
 
 {% block content %}
     <div class="container">
-        {% for x in range(24) %}
-            <div class="row">
-                {% for y in range(24) %}
-                <div class="col p-0">
+        {% for x in range(level + 3) %}
+            <div class="row" style="min-height: {{ 100 / (level + 3) }}vh;">
+                {% for y in range(level + 3) %}
+                <div class="col p-0 align-items-center d-flex justify-content-center">
                     <div class="form-check">
                         <input type="checkbox" class="form-check-input" id="checkbox-{{ x }}-{{ y }}"{% if matrix[x][y] %} checked{% endif %}>
                     </div>
@@ -17,6 +17,8 @@
 {% endblock %}
 
 {% block script %}
+    const gridSize = {{ level + 3 }};
+
     document.querySelectorAll('.form-check-input').forEach(checkbox => {
         checkbox.addEventListener('change', function() {
             const [x, y] = this.id.split('-').slice(1).map(Number);
@@ -26,11 +28,18 @@
             ];
 
             neighbors.forEach(([nx, ny]) => {
-                if (nx < 0 || nx >= 24 || ny < 0 || ny >= 24) return; // Skip out of bounds
+                if (nx < 0 || nx >= gridSize || ny < 0 || ny >= gridSize) return; // Skip out of bounds
 
                 const neighborCheckbox = document.querySelector(`#checkbox-${nx}-${ny}`);
                 neighborCheckbox.checked = !neighborCheckbox.checked;
             });
+
+            // Check if all checkboxes are checked
+            const allChecked = Array.from(document.querySelectorAll('.form-check-input')).every(cb => cb.checked);
+            if (allChecked && !window.__alreadyNavigated) {
+                window.__alreadyNavigated = true;
+                location.href = "{{ url_for('main.coffee', level=level + 1) }}";
+            }
         });
     });
 {% endblock %}
\ No newline at end of file