diff --git a/dashboard/habits.html b/dashboard/habits.html
index 515c078..8e5929e 100644
--- a/dashboard/habits.html
+++ b/dashboard/habits.html
@@ -309,12 +309,12 @@
             background: var(--bg-surface);
             border: 1px solid var(--border);
             border-radius: var(--radius-lg);
-            border-left: 5px solid var(--accent);
-            padding: 10px 12px;
+            border-left: 4px solid var(--accent);
+            padding: var(--space-3);
             transition: all var(--transition-base);
             display: flex;
             flex-direction: column;
-            gap: 8px;
+            gap: var(--space-2);
             min-height: 90px;
             max-height: 110px;
         }
@@ -329,19 +329,19 @@
         .habit-card-row {
             display: flex;
             align-items: center;
-            gap: 10px;
+            gap: var(--space-2);
         }
         
         .habit-card-icon {
-            width: 26px;
-            height: 26px;
+            width: 18px;
+            height: 18px;
             color: var(--text-primary);
             flex-shrink: 0;
         }
         
         .habit-card-name {
             flex: 1;
-            font-size: 17px;
+            font-size: var(--text-sm);
             font-weight: 600;
             color: var(--text-primary);
             white-space: nowrap;
@@ -350,23 +350,22 @@
         }
         
         .habit-card-streak {
-            font-size: 15px;
+            font-size: var(--text-xs);
             color: var(--text-muted);
             white-space: nowrap;
             flex-shrink: 0;
-            font-weight: 500;
         }
         
         /* Compact check button */
         .habit-card-check-btn-compact {
-            width: 48px;
-            height: 48px;
+            width: 44px;
+            height: 44px;
             border: 2px solid var(--accent);
             background: transparent;
             color: var(--accent);
             border-radius: 50%;
-            font-size: 20px;
-            font-weight: 700;
+            font-size: var(--text-lg);
+            font-weight: 600;
             cursor: pointer;
             transition: all var(--transition-base);
             display: flex;
@@ -427,12 +426,12 @@
         .habit-card-progress-row {
             display: flex;
             align-items: center;
-            gap: 8px;
+            gap: var(--space-2);
         }
         
         .habit-card-progress-bar {
             flex: 1;
-            height: 8px;
+            height: 6px;
             background: var(--bg-muted);
             border-radius: var(--radius-sm);
             overflow: hidden;
@@ -445,20 +444,19 @@
         }
         
         .habit-card-progress-text {
-            font-size: 15px;
+            font-size: var(--text-xs);
             color: var(--text-muted);
             font-weight: 600;
-            min-width: 40px;
+            min-width: 32px;
             text-align: right;
             flex-shrink: 0;
         }
         
         /* Next date row */
         .habit-card-next-date {
-            font-size: 14px;
+            font-size: var(--text-xs);
             color: var(--text-muted);
             text-align: left;
-            font-weight: 500;
         }
         
         /* Keep priority indicator styles for future use */
@@ -488,7 +486,7 @@
             left: 0;
             right: 0;
             bottom: 0;
-            background: rgba(0, 0, 0, 0.75) !important;
+            background: rgba(0, 0, 0, 0.6);
             z-index: 1000;
             align-items: center;
             justify-content: center;