diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 6ea9be7f..a4248693 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -5,7 +5,7 @@
 @tailwind utilities;
 
 @layer base {
-        :root {
+                            :root {
     /* Base colors from DESIGN.md - AUTO-GENERATED from colors.mjs */
 
     /* Base colors from DESIGN.md */
@@ -89,6 +89,16 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
   * {
     @apply border-border;
     border-radius: 0 !important;
@@ -110,6 +120,21 @@
     font-style: normal !important;
   }
 
+  /* Checkbox styling - proper, usable checkboxes */
+  input[type="checkbox"] {
+    @apply w-5 h-5 cursor-pointer accent-primary border-2 border-outline;
+    border-radius: 3px;
+    appearance: auto;
+  }
+
+  input[type="checkbox"]:hover {
+    @apply border-primary;
+  }
+
+  input[type="checkbox"]:focus {
+    @apply ring-2 ring-primary outline-none;
+  }
+
   h1 {
     @apply text-5xl tracking-tighter;
     letter-spacing: -0.02em;