diff --git a/inventory/templates/coffee.html b/inventory/templates/coffee.html
index f3b5ab2..f02c178 100644
--- a/inventory/templates/coffee.html
+++ b/inventory/templates/coffee.html
@@ -1,19 +1,19 @@
 {% extends 'layout.html' %}
 
 {% block style %}
-.clicked {
-    outline: 2px solid red;
+.light {
+    transition: background-color .25s;
 }
 {% endblock %}
 
 {% block content %}
     <div class="container">
         {% for x in range(level + 3) %}
-            <div class="row" style="min-height: {{ 100 / (level + 3) }}vh;">
+            <div class="row" style="min-height: {{ 80 / (level + 3) }}vh;">
                 {% for y in range(level + 3) %}
-                <div class="col p-0 align-items-center d-flex justify-content-center">
+                <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="form-check">
-                        <input type="checkbox" class="form-check-input" id="checkbox-{{ x }}-{{ y }}"{% if matrix[x][y] %} checked{% endif %}>
+                        <input type="checkbox" class="form-check-input d-none" id="checkbox-{{ x }}-{{ y }}"{% if matrix[x][y] %} checked{% endif %}>
                     </div>
                 </div>
                 {% endfor %}
@@ -25,9 +25,33 @@
 {% block script %}
     const gridSize = {{ level + 3 }};
 
+    updateLights();
+
+    function updateLights() {
+        document.querySelectorAll('.light').forEach(light => {
+            const [x, y] = light.id.split('-').slice(1).map(Number);
+            const checkbox = document.querySelector(`#checkbox-${x}-${y}`);
+
+            if(checkbox.checked) {
+                light.classList.add('bg-danger-subtle');
+            } else {
+                light.classList.remove('bg-danger-subtle');
+            }
+        });
+    }
+
+    document.querySelectorAll('.light').forEach(light => {
+        light.addEventListener('click', function() {
+            const [x, y] = this.id.split('-').slice(1).map(Number);
+            const checkbox = document.querySelector(`#checkbox-${x}-${y}`);
+
+            checkbox.click();
+            updateLights();
+        });
+    });
+
     document.querySelectorAll('.form-check-input').forEach(checkbox => {
         checkbox.addEventListener('change', function() {
-            checkbox.classList.toggle('clicked');
             const [x, y] = this.id.split('-').slice(1).map(Number);
             const neighbors = [
                 [x - 1, y],