diff --git a/inventory/templates/coffee.html b/inventory/templates/coffee.html
index f02c178..fc2041a 100644
--- a/inventory/templates/coffee.html
+++ b/inventory/templates/coffee.html
@@ -7,7 +7,7 @@
 {% endblock %}
 
 {% block content %}
-    <div class="container">
+    <div class="container border border-black rounded bg-success-subtle">
         {% for x in range(level + 3) %}
             <div class="row" style="min-height: {{ 80 / (level + 3) }}vh;">
                 {% for y in range(level + 3) %}
@@ -34,8 +34,10 @@
 
             if(checkbox.checked) {
                 light.classList.add('bg-danger-subtle');
+                light.classList.remove('bg-light-subtle');
             } else {
                 light.classList.remove('bg-danger-subtle');
+                light.classList.add('bg-light-subtle');
             }
         });
     }
@@ -69,9 +71,13 @@
 
             // Check if all checkboxes are checked
             const allChecked = Array.from(document.querySelectorAll('.form-check-input')).every(cb => cb.checked);
+            const allUnchecked = 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) }}";
+            } else if (allUnchecked && !window.__alreadyNavigated) {
+                window.__alreadyNavigated = true;
+                location.href = "{{ url_for('main.coffee', level=level - 1) }}";
             }
         });
     });
diff --git a/inventory/templates/inventory.html b/inventory/templates/inventory.html
index 680c9c2..fd32978 100644
--- a/inventory/templates/inventory.html
+++ b/inventory/templates/inventory.html
@@ -129,7 +129,7 @@
     <input type="hidden" id="inventoryId" value="{{ item.id }}">
     <div class="container">
         <div class="row">
-            <div class="col-8">
+            <div class="col">
                 <div class="row align-items-center">
                     <div class="col">
                         <label for="timestamp" class="form-label">Date Entered</label>
@@ -228,7 +228,7 @@
                 </div>
             </div>
             {% if item.image or item.condition not in ["Removed", "Disposed"] %}
-            <div class="col">
+            <div class="col-4">
                 {{ images.render_image(item.id, item.image, enabled = item.condition not in ["Removed", "Disposed"]) }}
             </div>
             {% endif %}