diff --git a/app/templates/admin/api_tokens.html b/app/templates/admin/api_tokens.html
index c14baf3..b0e7b22 100644
--- a/app/templates/admin/api_tokens.html
+++ b/app/templates/admin/api_tokens.html
@@ -36,7 +36,7 @@
     </div>
 
     <!-- Tokens List -->
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
+    <div class="bg-card-light dark:bg-card-dark rounded-lg shadow overflow-hidden">
         <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
             <thead class="bg-gray-50 dark:bg-gray-700">
                 <tr>
@@ -49,7 +49,7 @@
                     <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Actions</th>
                 </tr>
             </thead>
-            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+            <tbody class="bg-card-light dark:bg-card-dark divide-y divide-gray-200 dark:divide-gray-700">
                 {% for token in tokens %}
                 <tr>
                     <td class="px-6 py-4 whitespace-nowrap">
@@ -124,7 +124,7 @@
 
 <!-- Create Token Modal -->
 <div id="createTokenModal" class="fixed inset-0 bg-gray-500 bg-opacity-75 hidden z-50 flex items-center justify-center">
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full mx-4">
+    <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-xl max-w-2xl w-full mx-4">
         <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
             <h3 class="text-lg font-medium text-gray-900 dark:text-white">{{ _('Create API Token') }}</h3>
         </div>
@@ -304,7 +304,7 @@
 
 <!-- Token Display Modal -->
 <div id="tokenDisplayModal" class="fixed inset-0 bg-gray-500 bg-opacity-75 hidden z-50 flex items-center justify-center">
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full mx-4">
+    <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-xl max-w-2xl w-full mx-4">
         <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
             <h3 class="text-lg font-medium text-gray-900 dark:text-white">API Token Created</h3>
         </div>
diff --git a/app/templates/admin/backups.html b/app/templates/admin/backups.html
index d99061d..841e99e 100644
--- a/app/templates/admin/backups.html
+++ b/app/templates/admin/backups.html
@@ -20,7 +20,7 @@
     <!-- Action Cards -->
     <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
         <!-- Create Backup -->
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+        <div class="bg-card-light dark:bg-card-dark rounded-lg shadow p-6">
             <div class="flex items-center mb-4">
                 <div class="p-3 bg-blue-100 dark:bg-blue-900 rounded-full">
                     <i class="fas fa-download text-blue-600 dark:text-blue-400 text-xl"></i>
@@ -39,7 +39,7 @@
         </div>
 
         <!-- Restore Backup -->
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+        <div class="bg-card-light dark:bg-card-dark rounded-lg shadow p-6">
             <div class="flex items-center mb-4">
                 <div class="p-3 bg-green-100 dark:bg-green-900 rounded-full">
                     <i class="fas fa-upload text-green-600 dark:text-green-400 text-xl"></i>
@@ -56,7 +56,7 @@
     </div>
 
     <!-- Existing Backups -->
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow">
+    <div class="bg-card-light dark:bg-card-dark rounded-lg shadow">
         <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
             <h2 class="text-xl font-semibold text-gray-900 dark:text-white">{{ _('Existing Backups') }}</h2>
             <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Backups stored on the server</p>
@@ -73,7 +73,7 @@
                         <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Actions</th>
                     </tr>
                 </thead>
-                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                <tbody class="bg-card-light dark:bg-card-dark divide-y divide-gray-200 dark:divide-gray-700">
                     {% for backup in backups %}
                     <tr>
                         <td class="px-6 py-4 whitespace-nowrap">
@@ -135,7 +135,7 @@
 
 <!-- Restore Confirmation Modal -->
 <div id="restoreModal" class="fixed inset-0 bg-gray-500 bg-opacity-75 hidden z-50 flex items-center justify-center">
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full mx-4">
+    <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-xl max-w-md w-full mx-4">
         <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
             <h3 class="text-lg font-medium text-red-600 dark:text-red-400">
                 <i class="fas fa-exclamation-triangle mr-2"></i>Confirm Restore
@@ -173,7 +173,7 @@
 
 <!-- Delete Confirmation Modal -->
 <div id="deleteModal" class="fixed inset-0 bg-gray-500 bg-opacity-75 hidden z-50 flex items-center justify-center">
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full mx-4">
+    <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-xl max-w-md w-full mx-4">
         <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
             <h3 class="text-lg font-medium text-gray-900 dark:text-white">{{ _('Confirm Deletion') }}</h3>
         </div>
diff --git a/app/templates/admin/email_templates/create.html b/app/templates/admin/email_templates/create.html
index 31da05c..fd7ed04 100644
--- a/app/templates/admin/email_templates/create.html
+++ b/app/templates/admin/email_templates/create.html
@@ -22,13 +22,13 @@
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div class="md:col-span-2">
                 <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Template Name *</label>
-                <input type="text" id="name" name="name" required value="{{ name or '' }}" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
+                <input type="text" id="name" name="name" required value="{{ name or '' }}" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100">
                 <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">A unique name to identify this template</p>
             </div>
             
             <div class="md:col-span-2">
                 <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Description</label>
-                <input type="text" id="description" name="description" value="{{ description or '' }}" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
+                <input type="text" id="description" name="description" value="{{ description or '' }}" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100">
                 <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Optional description of this template</p>
             </div>
             
@@ -67,7 +67,7 @@
                     <div class="bg-gray-100 dark:bg-gray-700 px-4 py-2 border-b border-gray-300 dark:border-gray-600 flex items-center justify-between">
                         <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Editor</span>
                         <div class="flex gap-2">
-                            <button type="button" id="viewModeBtn" class="px-2 py-1 text-xs bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600">
+                            <button type="button" id="viewModeBtn" class="px-2 py-1 text-xs bg-card-light dark:bg-card-dark text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600">
                                 <i class="fas fa-code mr-1"></i>Code
                             </button>
                             <button type="button" id="updatePreviewBtn" class="px-2 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600">
@@ -87,7 +87,7 @@
                             <i class="fas fa-refresh mr-1"></i>Refresh
                         </button>
                     </div>
-                    <div id="email_preview" class="p-4 bg-white dark:bg-gray-800 overflow-auto" style="min-height: 500px; max-height: 500px;">
+                    <div id="email_preview" class="p-4 bg-card-light dark:bg-card-dark overflow-auto" style="min-height: 500px; max-height: 500px;">
                         <div class="text-gray-500 dark:text-gray-400 text-center py-8">
                             <i class="fas fa-eye-slash text-4xl mb-2"></i>
                             <p>Preview will appear here</p>
@@ -109,7 +109,7 @@
                     <i class="fas fa-refresh mr-1"></i>Apply CSS
                 </button>
             </div>
-            <textarea id="css" name="css" rows="10" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-mono text-sm">{{ css or '' }}</textarea>
+            <textarea id="css" name="css" rows="10" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100 font-mono text-sm">{{ css or '' }}</textarea>
             <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">CSS styles for the email template. Will be automatically wrapped in &lt;style&gt; tags.</p>
         </div>
         
@@ -122,7 +122,7 @@
 
 <!-- Variable Reference Modal -->
 <div id="variablesModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
-    <div class="relative top-20 mx-auto p-5 border w-11/12 max-w-2xl shadow-lg rounded-md bg-white dark:bg-gray-800">
+    <div class="relative top-20 mx-auto p-5 border w-11/12 max-w-2xl shadow-lg rounded-md bg-card-light dark:bg-card-dark">
         <div class="flex justify-between items-center mb-4">
             <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ _('Available Variables') }}</h3>
             <button id="closeVariablesModalBtn" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
diff --git a/app/templates/admin/email_templates/edit.html b/app/templates/admin/email_templates/edit.html
index 5b956b3..3bfd8bf 100644
--- a/app/templates/admin/email_templates/edit.html
+++ b/app/templates/admin/email_templates/edit.html
@@ -22,12 +22,12 @@
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div class="md:col-span-2">
                 <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Template Name *</label>
-                <input type="text" id="name" name="name" required value="{{ template.name }}" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
+                <input type="text" id="name" name="name" required value="{{ template.name }}" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100">
             </div>
             
             <div class="md:col-span-2">
                 <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Description</label>
-                <input type="text" id="description" name="description" value="{{ template.description or '' }}" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
+                <input type="text" id="description" name="description" value="{{ template.description or '' }}" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100">
             </div>
             
             <div class="md:col-span-2">
@@ -65,7 +65,7 @@
                     <div class="bg-gray-100 dark:bg-gray-700 px-4 py-2 border-b border-gray-300 dark:border-gray-600 flex items-center justify-between">
                         <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Editor</span>
                         <div class="flex gap-2">
-                            <button type="button" id="viewModeBtn" class="px-2 py-1 text-xs bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600">
+                            <button type="button" id="viewModeBtn" class="px-2 py-1 text-xs bg-card-light dark:bg-card-dark text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600">
                                 <i class="fas fa-code mr-1"></i>Code
                             </button>
                             <button type="button" id="updatePreviewBtn" class="px-2 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600">
@@ -85,7 +85,7 @@
                             <i class="fas fa-refresh mr-1"></i>Refresh
                         </button>
                     </div>
-                    <div id="email_preview" class="p-4 bg-white dark:bg-gray-800 overflow-auto" style="min-height: 500px; max-height: 500px;">
+                    <div id="email_preview" class="p-4 bg-card-light dark:bg-card-dark overflow-auto" style="min-height: 500px; max-height: 500px;">
                         <div class="text-gray-500 dark:text-gray-400 text-center py-8">
                             <i class="fas fa-eye-slash text-4xl mb-2"></i>
                             <p>Preview will appear here</p>
@@ -107,7 +107,7 @@
                     <i class="fas fa-refresh mr-1"></i>Apply CSS
                 </button>
             </div>
-            <textarea id="css" name="css" rows="10" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-mono text-sm">{{ template.css or '' }}</textarea>
+            <textarea id="css" name="css" rows="10" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100 font-mono text-sm">{{ template.css or '' }}</textarea>
             <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">CSS styles for the email template. Will be automatically wrapped in &lt;style&gt; tags.</p>
         </div>
         
@@ -120,7 +120,7 @@
 
 <!-- Variable Reference Modal -->
 <div id="variablesModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
-    <div class="relative top-20 mx-auto p-5 border w-11/12 max-w-2xl shadow-lg rounded-md bg-white dark:bg-gray-800">
+    <div class="relative top-20 mx-auto p-5 border w-11/12 max-w-2xl shadow-lg rounded-md bg-card-light dark:bg-card-dark">
         <div class="flex justify-between items-center mb-4">
             <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ _('Available Variables') }}</h3>
             <button id="closeVariablesModalBtn" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
diff --git a/app/templates/admin/email_templates/list.html b/app/templates/admin/email_templates/list.html
index 7be590d..ca9626b 100644
--- a/app/templates/admin/email_templates/list.html
+++ b/app/templates/admin/email_templates/list.html
@@ -70,7 +70,7 @@
 
 <!-- Delete Modal -->
 <div id="deleteTemplateModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
-    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
+    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-card-light dark:bg-card-dark">
         <div class="mt-3 text-center">
             <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">{{ _('Delete Email Template') }}</h3>
             <div class="mt-2 px-7 py-3">
diff --git a/app/templates/admin/restore.html b/app/templates/admin/restore.html
index 0942523..43be7a9 100644
--- a/app/templates/admin/restore.html
+++ b/app/templates/admin/restore.html
@@ -42,7 +42,7 @@
 
     <!-- Progress Display (if restore is running) -->
     {% if progress %}
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow mb-6 p-6">
+    <div class="bg-card-light dark:bg-card-dark rounded-lg shadow mb-6 p-6">
         <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
             <i class="fas fa-sync-alt {% if progress.status == 'running' %}fa-spin{% endif %} mr-2"></i>
             Restore Progress
@@ -115,7 +115,7 @@
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <!-- Upload Backup Form -->
         <div class="lg:col-span-2">
-            <div class="bg-white dark:bg-gray-800 rounded-lg shadow">
+            <div class="bg-card-light dark:bg-card-dark rounded-lg shadow">
                 <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                     <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
                         <i class="fas fa-upload mr-2"></i>Upload Backup File
@@ -177,7 +177,7 @@
         <!-- Safety Information Sidebar -->
         <div class="lg:col-span-1">
             <!-- Pre-Restore Checklist -->
-            <div class="bg-white dark:bg-gray-800 rounded-lg shadow mb-6">
+            <div class="bg-card-light dark:bg-card-dark rounded-lg shadow mb-6">
                 <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                     <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                         <i class="fas fa-tasks mr-2"></i>Pre-Restore Checklist
@@ -210,7 +210,7 @@
             </div>
 
             <!-- What Gets Restored -->
-            <div class="bg-white dark:bg-gray-800 rounded-lg shadow mb-6">
+            <div class="bg-card-light dark:bg-card-dark rounded-lg shadow mb-6">
                 <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                     <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                         <i class="fas fa-database mr-2"></i>What Gets Restored
diff --git a/app/templates/admin/settings.html b/app/templates/admin/settings.html
index 9259bf3..5600909 100644
--- a/app/templates/admin/settings.html
+++ b/app/templates/admin/settings.html
@@ -283,7 +283,7 @@
             <div class="space-y-3">
                 <div>
                     <input type="file" name="logo" id="logoFileInput" accept="image/png,image/jpeg,image/jpg,image/gif,image/svg+xml,image/webp" required
-                           class="block w-full text-sm text-gray-900 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500"
+                           class="block w-full text-sm text-gray-900 dark:text-gray-300 bg-card-light dark:bg-card-dark border border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500"
                            onchange="previewLogoBeforeUpload(this)">
                 </div>
                 
diff --git a/app/templates/base.html b/app/templates/base.html
index 36156c7..bfac677 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -1030,25 +1030,6 @@
             <main id="mainContentAnchor" class="flex-1 p-6">
                 {% block content %}{% endblock %}
             </main>
-            
-            <!-- Footer -->
-            <footer class="bg-card-light dark:bg-card-dark border-t border-border-light dark:border-border-dark py-4 px-6 mt-auto">
-                <div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-text-muted-light dark:text-text-muted-dark">
-                    <div class="flex items-center gap-4 flex-wrap justify-center md:justify-start">
-                        <span>&copy; <span id="currentYear"></span> TimeTracker</span>
-                        <a href="{{ url_for('main.about') }}" class="hover:text-text-light dark:hover:text-text-dark">{{ _('About') }}</a>
-                        <a href="{{ url_for('main.help') }}" class="hover:text-text-light dark:hover:text-text-dark">{{ _('Help') }}</a>
-                        <a href="{{ url_for('main.donate') }}" class="text-amber-600 dark:text-amber-400 hover:text-amber-700 dark:hover:text-amber-300 font-medium">
-                            <i class="fas fa-heart mr-1"></i>{{ _('Support') }}
-                        </a>
-                    </div>
-                    <div class="flex items-center gap-2">
-                        <a href="{{ url_for('main.donate') }}" class="px-3 py-1.5 bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-white text-sm font-medium rounded-lg transition-all shadow-md hover:shadow-lg">
-                            <i class="fas fa-mug-saucer mr-1"></i>{{ _('Donate') }}
-                        </a>
-                    </div>
-                </div>
-            </footer>
         </div>
 
         <!-- Mobile Bottom Navigation -->
@@ -1973,10 +1954,6 @@
     </script>
     {% endif %}
     
-    <!-- Set current year in footer -->
-    <script>
-        document.getElementById('currentYear').textContent = new Date().getFullYear();
-    </script>
     
     <!-- Global donation tracking function -->
     <script>
diff --git a/app/templates/calendar/view.html b/app/templates/calendar/view.html
index 1718675..147a153 100644
--- a/app/templates/calendar/view.html
+++ b/app/templates/calendar/view.html
@@ -121,7 +121,6 @@
             </div>
         </div>
     </div>
-</div>
 
 <!-- Pass data to JavaScript -->
 <script>
diff --git a/app/templates/components/activity_feed_widget.html b/app/templates/components/activity_feed_widget.html
index c2b04d9..64c9acd 100644
--- a/app/templates/components/activity_feed_widget.html
+++ b/app/templates/components/activity_feed_widget.html
@@ -12,7 +12,7 @@
                     <i class="fas fa-filter"></i>
                     <span id="filter-indicator" class="hidden absolute -top-1 -right-1 w-2 h-2 bg-primary rounded-full"></span>
                 </button>
-                <div id="filter-dropdown" class="hidden absolute right-0 mt-2 w-56 bg-white dark:bg-gray-800 rounded-lg shadow-lg z-10 border border-gray-200 dark:border-gray-700 max-h-96 overflow-y-auto">
+                <div id="filter-dropdown" class="hidden absolute right-0 mt-2 w-56 bg-card-light dark:bg-card-dark rounded-lg shadow-lg z-10 border border-gray-200 dark:border-gray-700 max-h-96 overflow-y-auto">
                     <div class="p-2">
                         <button id="filter-all" onclick="filterActivities('all'); closeFilterDropdown();" class="w-full text-left px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 rounded font-medium flex items-center justify-between">
                             <span><i class="fas fa-list text-gray-500 w-4"></i> {{ _('All Activities') }}</span>
diff --git a/app/templates/components/keyboard_shortcuts_help.html b/app/templates/components/keyboard_shortcuts_help.html
index 4cc1a8b..1a69ff6 100644
--- a/app/templates/components/keyboard_shortcuts_help.html
+++ b/app/templates/components/keyboard_shortcuts_help.html
@@ -7,9 +7,9 @@
         <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" onclick="closeKeyboardShortcutsModal()"></div>
         
         <!-- Modal Content -->
-        <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
+        <div class="relative bg-card-light dark:bg-card-dark rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
             <!-- Header -->
-            <div class="sticky top-0 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-6 py-4 flex justify-between items-center">
+            <div class="sticky top-0 bg-card-light dark:bg-card-dark border-b border-gray-200 dark:border-gray-700 px-6 py-4 flex justify-between items-center">
                 <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
                     <i class="fas fa-keyboard mr-2 text-blue-600"></i>
                     Keyboard Shortcuts
@@ -31,25 +31,25 @@
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                         <div class="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-900 rounded">
                             <span class="text-gray-700 dark:text-gray-300">Command Palette</span>
-                            <kbd class="px-3 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
+                            <kbd class="px-3 py-1 bg-card-light dark:bg-card-dark border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
                                 <span class="platform-key">Ctrl</span> K
                             </kbd>
                         </div>
                         <div class="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-900 rounded">
                             <span class="text-gray-700 dark:text-gray-300">Toggle Theme</span>
-                            <kbd class="px-3 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
+                            <kbd class="px-3 py-1 bg-card-light dark:bg-card-dark border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
                                 <span class="platform-key">Ctrl</span> Shift L
                             </kbd>
                         </div>
                         <div class="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-900 rounded">
                             <span class="text-gray-700 dark:text-gray-300">Search</span>
-                            <kbd class="px-3 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
+                            <kbd class="px-3 py-1 bg-card-light dark:bg-card-dark border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
                                 <span class="platform-key">Ctrl</span> /
                             </kbd>
                         </div>
                         <div class="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-900 rounded">
                             <span class="text-gray-700 dark:text-gray-300">Show This Help</span>
-                            <kbd class="px-3 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
+                            <kbd class="px-3 py-1 bg-card-light dark:bg-card-dark border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
                                 Shift ?
                             </kbd>
                         </div>
@@ -65,25 +65,25 @@
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                         <div class="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-900 rounded">
                             <span class="text-gray-700 dark:text-gray-300">Go to Dashboard</span>
-                            <kbd class="px-3 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
+                            <kbd class="px-3 py-1 bg-card-light dark:bg-card-dark border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
                                 g d
                             </kbd>
                         </div>
                         <div class="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-900 rounded">
                             <span class="text-gray-700 dark:text-gray-300">Go to Projects</span>
-                            <kbd class="px-3 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
+                            <kbd class="px-3 py-1 bg-card-light dark:bg-card-dark border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
                                 g p
                             </kbd>
                         </div>
                         <div class="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-900 rounded">
                             <span class="text-gray-700 dark:text-gray-300">Go to Reports</span>
-                            <kbd class="px-3 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
+                            <kbd class="px-3 py-1 bg-card-light dark:bg-card-dark border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
                                 g r
                             </kbd>
                         </div>
                         <div class="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-900 rounded">
                             <span class="text-gray-700 dark:text-gray-300">Go to Tasks</span>
-                            <kbd class="px-3 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
+                            <kbd class="px-3 py-1 bg-card-light dark:bg-card-dark border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
                                 g t
                             </kbd>
                         </div>
@@ -99,13 +99,13 @@
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                         <div class="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-900 rounded">
                             <span class="text-gray-700 dark:text-gray-300">Start/Stop Timer</span>
-                            <kbd class="px-3 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
+                            <kbd class="px-3 py-1 bg-card-light dark:bg-card-dark border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
                                 t
                             </kbd>
                         </div>
                         <div class="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-900 rounded">
                             <span class="text-gray-700 dark:text-gray-300">Log Manual Time</span>
-                            <kbd class="px-3 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
+                            <kbd class="px-3 py-1 bg-card-light dark:bg-card-dark border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
                                 <span class="platform-key">Ctrl</span> M
                             </kbd>
                         </div>
@@ -121,25 +121,25 @@
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                         <div class="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-900 rounded">
                             <span class="text-gray-700 dark:text-gray-300">Create New Project</span>
-                            <kbd class="px-3 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
+                            <kbd class="px-3 py-1 bg-card-light dark:bg-card-dark border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
                                 c p
                             </kbd>
                         </div>
                         <div class="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-900 rounded">
                             <span class="text-gray-700 dark:text-gray-300">Create New Task</span>
-                            <kbd class="px-3 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
+                            <kbd class="px-3 py-1 bg-card-light dark:bg-card-dark border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
                                 c t
                             </kbd>
                         </div>
                         <div class="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-900 rounded">
                             <span class="text-gray-700 dark:text-gray-300">Create New Client</span>
-                            <kbd class="px-3 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
+                            <kbd class="px-3 py-1 bg-card-light dark:bg-card-dark border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
                                 c c
                             </kbd>
                         </div>
                         <div class="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-900 rounded">
                             <span class="text-gray-700 dark:text-gray-300">Create New Invoice</span>
-                            <kbd class="px-3 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
+                            <kbd class="px-3 py-1 bg-card-light dark:bg-card-dark border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
                                 c i
                             </kbd>
                         </div>
@@ -181,19 +181,19 @@
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                         <div class="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-900 rounded">
                             <span class="text-gray-700 dark:text-gray-300">Select All</span>
-                            <kbd class="px-3 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
+                            <kbd class="px-3 py-1 bg-card-light dark:bg-card-dark border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
                                 <span class="platform-key">Ctrl</span> A
                             </kbd>
                         </div>
                         <div class="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-900 rounded">
                             <span class="text-gray-700 dark:text-gray-300">Delete Selected</span>
-                            <kbd class="px-3 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
+                            <kbd class="px-3 py-1 bg-card-light dark:bg-card-dark border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
                                 Delete
                             </kbd>
                         </div>
                         <div class="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-900 rounded">
                             <span class="text-gray-700 dark:text-gray-300">Right-Click Menu</span>
-                            <kbd class="px-3 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
+                            <kbd class="px-3 py-1 bg-card-light dark:bg-card-dark border border-gray-300 dark:border-gray-600 rounded text-sm font-mono">
                                 Right Click
                             </kbd>
                         </div>
@@ -206,10 +206,10 @@
                         <i class="fas fa-lightbulb mr-2"></i>Pro Tips
                     </h4>
                     <ul class="space-y-1 text-sm text-blue-800 dark:text-blue-300">
-                        <li>• Press <kbd class="px-2 py-0.5 bg-white dark:bg-gray-800 rounded text-xs">Ctrl K</kbd> to open the command palette and search for any action</li>
-                        <li>• Use sequence shortcuts like <kbd class="px-2 py-0.5 bg-white dark:bg-gray-800 rounded text-xs">g d</kbd> for quick navigation (type 'g' then 'd')</li>
-                        <li>• Most forms can be submitted with <kbd class="px-2 py-0.5 bg-white dark:bg-gray-800 rounded text-xs">Ctrl Enter</kbd></li>
-                        <li>• Press <kbd class="px-2 py-0.5 bg-white dark:bg-gray-800 rounded text-xs">Esc</kbd> to close any modal or dropdown</li>
+                        <li>• Press <kbd class="px-2 py-0.5 bg-card-light dark:bg-card-dark rounded text-xs">Ctrl K</kbd> to open the command palette and search for any action</li>
+                        <li>• Use sequence shortcuts like <kbd class="px-2 py-0.5 bg-card-light dark:bg-card-dark rounded text-xs">g d</kbd> for quick navigation (type 'g' then 'd')</li>
+                        <li>• Most forms can be submitted with <kbd class="px-2 py-0.5 bg-card-light dark:bg-card-dark rounded text-xs">Ctrl Enter</kbd></li>
+                        <li>• Press <kbd class="px-2 py-0.5 bg-card-light dark:bg-card-dark rounded text-xs">Esc</kbd> to close any modal or dropdown</li>
                         <li>• Right-click on any list item to see context menu options</li>
                         <li>• Look for the help indicator in the bottom-right corner</li>
                     </ul>
@@ -220,7 +220,7 @@
             <div class="sticky bottom-0 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 px-6 py-4">
                 <button onclick="closeKeyboardShortcutsModal()" 
                         class="w-full btn btn-primary">
-                    Close <kbd class="ml-2 px-2 py-0.5 bg-white dark:bg-gray-800 rounded text-xs">Esc</kbd>
+                    Close <kbd class="ml-2 px-2 py-0.5 bg-card-light dark:bg-card-dark rounded text-xs">Esc</kbd>
                 </button>
             </div>
         </div>
diff --git a/app/templates/components/save_filter_widget.html b/app/templates/components/save_filter_widget.html
index 81aa208..114a0f1 100644
--- a/app/templates/components/save_filter_widget.html
+++ b/app/templates/components/save_filter_widget.html
@@ -11,7 +11,7 @@
 
 <!-- Save Filter Modal -->
 <div id="saveFilterModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
-    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
+    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-card-light dark:bg-card-dark">
         <div class="mt-3">
             <!-- Header -->
             <div class="flex justify-between items-center mb-4">
@@ -68,7 +68,7 @@
     </button>
     
     <div id="savedFiltersDropdown" 
-         class="hidden absolute right-0 mt-2 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-10">
+         class="hidden absolute right-0 mt-2 w-64 bg-card-light dark:bg-card-dark rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-10">
         <div class="p-2 max-h-96 overflow-y-auto">
             <div id="savedFiltersList" class="space-y-1">
                 <!-- Filters will be loaded here -->
diff --git a/app/templates/deals/pipeline.html b/app/templates/deals/pipeline.html
index b619cbc..a674e24 100644
--- a/app/templates/deals/pipeline.html
+++ b/app/templates/deals/pipeline.html
@@ -30,7 +30,7 @@
                 </h3>
                 <div class="space-y-3">
                     {% for deal in deals_by_stage[stage] %}
-                    <div class="bg-white dark:bg-gray-800 p-3 rounded border border-border-light dark:border-border-dark hover:shadow-md transition cursor-pointer"
+                    <div class="bg-card-light dark:bg-card-dark p-3 rounded border border-border-light dark:border-border-dark hover:shadow-md transition cursor-pointer"
                          onclick="window.location.href='{{ url_for('deals.view_deal', deal_id=deal.id) }}'">
                         <h4 class="font-medium text-sm mb-1">{{ deal.name }}</h4>
                         {% if deal.client %}
diff --git a/app/templates/expenses/view.html b/app/templates/expenses/view.html
index 58e1df1..04b5f13 100644
--- a/app/templates/expenses/view.html
+++ b/app/templates/expenses/view.html
@@ -342,7 +342,7 @@
 
 <!-- Rejection Modal -->
 <div id="rejectModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
-    <div class="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4">
+    <div class="bg-card-light dark:bg-card-dark rounded-lg p-6 max-w-md w-full mx-4">
         <h3 class="text-lg font-semibold mb-4">{{ _('Reject Expense') }}</h3>
         <form method="POST" action="{{ url_for('expenses.reject_expense', expense_id=expense.id) }}">
             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
diff --git a/app/templates/import_export/index.html b/app/templates/import_export/index.html
index 46bc15b..d67e423 100644
--- a/app/templates/import_export/index.html
+++ b/app/templates/import_export/index.html
@@ -19,7 +19,7 @@
 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <!-- Import Section -->
         <div class="space-y-6">
-            <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
+            <div class="bg-card-light dark:bg-card-dark shadow rounded-lg p-6">
                 <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
                     <i class="fas fa-file-import mr-2"></i>{{ _('Import Data') }}
                 </h2>
@@ -120,7 +120,7 @@
             </div>
 
             <!-- Import History -->
-            <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
+            <div class="bg-card-light dark:bg-card-dark shadow rounded-lg p-6">
                 <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
                     <i class="fas fa-history mr-2"></i>{{ _('Import History') }}
                 </h2>
@@ -132,7 +132,7 @@
 
         <!-- Export Section -->
         <div class="space-y-6">
-            <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
+            <div class="bg-card-light dark:bg-card-dark shadow rounded-lg p-6">
                 <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
                     <i class="fas fa-file-export mr-2"></i>{{ _('Export Data') }}
                 </h2>
@@ -194,7 +194,7 @@
             </div>
 
             <!-- Export History -->
-            <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
+            <div class="bg-card-light dark:bg-card-dark shadow rounded-lg p-6">
                 <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
                     <i class="fas fa-history mr-2"></i>{{ _('Export History') }}
                 </h2>
@@ -208,7 +208,7 @@
 
 <!-- Toggl Import Modal -->
 <div id="toggl-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-    <div class="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4">
+    <div class="bg-card-light dark:bg-card-dark rounded-lg p-6 max-w-md w-full mx-4">
         <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">{{ _('Import from Toggl Track') }}</h3>
         
         <form id="toggl-form" onsubmit="submitTogglImport(event)" class="space-y-4">
@@ -246,7 +246,7 @@
 
 <!-- Harvest Import Modal -->
 <div id="harvest-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-    <div class="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4">
+    <div class="bg-card-light dark:bg-card-dark rounded-lg p-6 max-w-md w-full mx-4">
         <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">{{ _('Import from Harvest') }}</h3>
         
         <form id="harvest-form" onsubmit="submitHarvestImport(event)" class="space-y-4">
diff --git a/app/templates/invoices/edit.html b/app/templates/invoices/edit.html
index d552a35..ede75a3 100644
--- a/app/templates/invoices/edit.html
+++ b/app/templates/invoices/edit.html
@@ -645,7 +645,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
 <!-- Send Email Modal -->
 <div id="sendEmailModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
-  <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
+  <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-card-light dark:bg-card-dark">
     <div class="mt-3">
       <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">Send Invoice via Email</h3>
       <form id="sendEmailForm" onsubmit="sendInvoiceEmail(event)">
diff --git a/app/templates/invoices/view.html b/app/templates/invoices/view.html
index 85c5307..f80b603 100644
--- a/app/templates/invoices/view.html
+++ b/app/templates/invoices/view.html
@@ -430,7 +430,7 @@
 
 <!-- Send Email Modal -->
 <div id="sendEmailModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
-  <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
+  <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-card-light dark:bg-card-dark">
     <div class="mt-3">
       <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">{{ _('Send Invoice via Email') }}</h3>
       <form id="sendEmailForm" onsubmit="sendInvoiceEmail(event)">
diff --git a/app/templates/kiosk/dashboard.html b/app/templates/kiosk/dashboard.html
index 28fac05..17e54d8 100644
--- a/app/templates/kiosk/dashboard.html
+++ b/app/templates/kiosk/dashboard.html
@@ -4,7 +4,7 @@
 <div class="max-w-7xl mx-auto space-y-6">
     <!-- Keyboard Shortcuts Help Modal -->
     <div id="keyboard-help" class="hidden fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
-        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl p-6 max-w-md w-full border border-gray-200 dark:border-gray-700 animate-in fade-in zoom-in duration-200">
+        <div class="bg-card-light dark:bg-card-dark rounded-2xl shadow-2xl p-6 max-w-md w-full border border-gray-200 dark:border-gray-700 animate-in fade-in zoom-in duration-200">
             <div class="flex justify-between items-center mb-6">
                 <h3 class="text-xl font-bold text-gray-900 dark:text-white">Keyboard Shortcuts</h3>
                 <button onclick="document.getElementById('keyboard-help').classList.add('hidden')" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 dark:focus:ring-offset-gray-800 rounded-lg p-1 min-w-[48px] min-h-[48px] flex items-center justify-center" aria-label="{{ _('Close keyboard shortcuts') }}">
@@ -33,7 +33,7 @@
     </div>
 
     <!-- Barcode Scanner Section -->
-    <section class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-6 sm:p-8 kiosk-card-elevated" id="barcode-scanner-section">
+    <section class="bg-card-light dark:bg-card-dark rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-6 sm:p-8 kiosk-card-elevated" id="barcode-scanner-section">
         <div class="max-w-3xl mx-auto">
             <div class="text-center mb-6">
                 <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 mb-4">
@@ -72,7 +72,7 @@
             
             <!-- Loading Skeleton for Item Display -->
             <div id="item-loading-skeleton" class="hidden mt-6">
-                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-6 sm:p-8 animate-pulse">
+                <div class="bg-card-light dark:bg-card-dark rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-6 sm:p-8 animate-pulse">
                     <div class="h-8 bg-gray-200 dark:bg-gray-700 rounded w-3/4 mb-4"></div>
                     <div class="h-6 bg-gray-200 dark:bg-gray-700 rounded w-1/2 mb-6"></div>
                     <div class="grid grid-cols-2 gap-4">
@@ -98,7 +98,7 @@
     </section>
 
     <!-- Item Display Section -->
-    <section class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-6 sm:p-8 kiosk-card-elevated" id="item-section" style="display: none;">
+    <section class="bg-card-light dark:bg-card-dark rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-6 sm:p-8 kiosk-card-elevated" id="item-section" style="display: none;">
         <div class="flex items-start justify-between mb-6 pb-6 border-b border-gray-200 dark:border-gray-700">
             <div class="flex-1">
                 <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-2" id="item-name"></h2>
@@ -140,7 +140,7 @@
     </section>
 
     <!-- Operations Section -->
-    <section class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-6 sm:p-8 kiosk-card-elevated" id="operations-section" style="display: none;">
+    <section class="bg-card-light dark:bg-card-dark rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-6 sm:p-8 kiosk-card-elevated" id="operations-section" style="display: none;">
         <!-- Note: Tabs are handled by main navigation, no duplicate tabs here -->
 
         <!-- Adjust Tab -->
@@ -361,7 +361,7 @@
 
     <!-- Recent Items -->
     {% if recent_items %}
-    <section class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-6 sm:p-8 kiosk-card">
+    <section class="bg-card-light dark:bg-card-dark rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-6 sm:p-8 kiosk-card">
         <div class="flex items-center gap-3 mb-6">
             <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
                 <i class="fas fa-history text-primary"></i>
diff --git a/app/templates/kiosk/login.html b/app/templates/kiosk/login.html
index 49ae78f..c7402ce 100644
--- a/app/templates/kiosk/login.html
+++ b/app/templates/kiosk/login.html
@@ -28,7 +28,7 @@
 <body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white min-h-screen">
     <div class="min-h-screen flex items-center justify-center px-4 py-12">
         <div class="w-full max-w-6xl">
-            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+            <div class="bg-card-light dark:bg-card-dark rounded-2xl shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden">
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-0">
                     <!-- Left side: Logo and branding -->
                     <div class="hidden md:flex items-center justify-center p-12 bg-gradient-to-br from-primary/10 via-primary/5 to-transparent dark:from-primary/20 dark:via-primary/10">
diff --git a/app/templates/main/help.html b/app/templates/main/help.html
index 4ac248d..8f06607 100644
--- a/app/templates/main/help.html
+++ b/app/templates/main/help.html
@@ -517,17 +517,17 @@
                     <div>
                         <h5 class="font-semibold mb-2">{{ _('Opening the Command Palette') }}</h5>
                         <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
-                            <li><kbd class="px-2 py-1 bg-white dark:bg-gray-800 border rounded">?</kbd> {{ _('Press the question mark key') }}</li>
-                            <li><kbd class="px-2 py-1 bg-white dark:bg-gray-800 border rounded">Ctrl+K</kbd> / <kbd class="px-2 py-1 bg-white dark:bg-gray-800 border rounded">Cmd+K</kbd> {{ _('Quick search') }}</li>
+                            <li><kbd class="px-2 py-1 bg-card-light dark:bg-card-dark border rounded">?</kbd> {{ _('Press the question mark key') }}</li>
+                            <li><kbd class="px-2 py-1 bg-card-light dark:bg-card-dark border rounded">Ctrl+K</kbd> / <kbd class="px-2 py-1 bg-card-light dark:bg-card-dark border rounded">Cmd+K</kbd> {{ _('Quick search') }}</li>
                                         </ul>
                                     </div>
                     <div>
                         <h5 class="font-semibold mb-2">{{ _('Quick Actions') }}</h5>
                         <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
-                            <li><kbd class="px-2 py-1 bg-white dark:bg-gray-800 border rounded">g d</kbd> {{ _('Go to Dashboard') }}</li>
-                            <li><kbd class="px-2 py-1 bg-white dark:bg-gray-800 border rounded">g p</kbd> {{ _('Go to Projects') }}</li>
-                            <li><kbd class="px-2 py-1 bg-white dark:bg-gray-800 border rounded">g t</kbd> {{ _('Go to Tasks') }}</li>
-                            <li><kbd class="px-2 py-1 bg-white dark:bg-gray-800 border rounded">n e</kbd> {{ _('New Time Entry') }}</li>
+                            <li><kbd class="px-2 py-1 bg-card-light dark:bg-card-dark border rounded">g d</kbd> {{ _('Go to Dashboard') }}</li>
+                            <li><kbd class="px-2 py-1 bg-card-light dark:bg-card-dark border rounded">g p</kbd> {{ _('Go to Projects') }}</li>
+                            <li><kbd class="px-2 py-1 bg-card-light dark:bg-card-dark border rounded">g t</kbd> {{ _('Go to Tasks') }}</li>
+                            <li><kbd class="px-2 py-1 bg-card-light dark:bg-card-dark border rounded">n e</kbd> {{ _('New Time Entry') }}</li>
                         </ul>
                     </div>
                                 </div>
diff --git a/app/templates/quotes/view.html b/app/templates/quotes/view.html
index 0dbd0d2..a4d3734 100644
--- a/app/templates/quotes/view.html
+++ b/app/templates/quotes/view.html
@@ -501,7 +501,7 @@ function hideRejectApprovalModal() {
 
 <!-- Approve Modal -->
 <div id="approve-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-    <div class="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4">
+    <div class="bg-card-light dark:bg-card-dark rounded-lg p-6 max-w-md w-full mx-4">
         <h3 class="text-lg font-semibold mb-4">{{ _('Approve Quote') }}</h3>
         <form method="POST" action="{{ url_for('quotes.approve_quote', quote_id=quote.id) }}">
             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
@@ -519,7 +519,7 @@ function hideRejectApprovalModal() {
 
 <!-- Reject Approval Modal -->
 <div id="reject-approval-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-    <div class="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4">
+    <div class="bg-card-light dark:bg-card-dark rounded-lg p-6 max-w-md w-full mx-4">
         <h3 class="text-lg font-semibold mb-4">{{ _('Reject Quote Approval') }}</h3>
         <form method="POST" action="{{ url_for('quotes.reject_approval', quote_id=quote.id) }}">
             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
@@ -537,7 +537,7 @@ function hideRejectApprovalModal() {
 
 <!-- Delete Confirmation Modal -->
 <div id="confirmDeleteQuote-{{ quote.id }}" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-    <div class="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4">
+    <div class="bg-card-light dark:bg-card-dark rounded-lg p-6 max-w-md w-full mx-4">
         <h3 class="text-lg font-semibold mb-4">{{ _('Delete Quote') }}</h3>
         <p class="mb-4 text-gray-600 dark:text-gray-400">{{ _('Are you sure you want to delete this quote? This action cannot be undone.') }}</p>
         <div class="flex gap-2">
diff --git a/app/templates/recurring_invoices/create.html b/app/templates/recurring_invoices/create.html
index e4709e8..279fd5d 100644
--- a/app/templates/recurring_invoices/create.html
+++ b/app/templates/recurring_invoices/create.html
@@ -20,12 +20,12 @@
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div>
                 <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Template Name *</label>
-                <input type="text" id="name" name="name" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
+                <input type="text" id="name" name="name" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100">
             </div>
             
             <div>
                 <label for="project_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Project *</label>
-                <select id="project_id" name="project_id" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
+                <select id="project_id" name="project_id" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100">
                     <option value="">Select Project</option>
                     {% for project in projects %}
                     <option value="{{ project.id }}" data-client-id="{{ project.client_id if project.client_id else '' }}" data-client-name="{{ project.client_obj.name if project.client_obj else '' }}" data-client-email="{{ project.client_obj.email if project.client_obj else '' }}" data-client-address="{{ project.client_obj.address if project.client_obj else '' }}">{{ project.name }}</option>
@@ -35,7 +35,7 @@
             
             <div>
                 <label for="client_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Client *</label>
-                <select id="client_id" name="client_id" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
+                <select id="client_id" name="client_id" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100">
                     <option value="">Select Client</option>
                     {% for client in clients %}
                     <option value="{{ client.id }}">{{ client.name }}</option>
@@ -45,7 +45,7 @@
             
             <div>
                 <label for="frequency" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Frequency *</label>
-                <select id="frequency" name="frequency" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
+                <select id="frequency" name="frequency" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100">
                     <option value="daily">Daily</option>
                     <option value="weekly">Weekly</option>
                     <option value="monthly" selected>Monthly</option>
@@ -55,54 +55,54 @@
             
             <div>
                 <label for="interval" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Interval</label>
-                <input type="number" id="interval" name="interval" value="1" min="1" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
+                <input type="number" id="interval" name="interval" value="1" min="1" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100">
                 <p class="text-xs text-gray-500 mt-1">Every N periods (e.g., every 2 weeks)</p>
             </div>
             
             <div>
                 <label for="next_run_date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Next Run Date *</label>
-                <input type="date" id="next_run_date" name="next_run_date" value="{{ default_next_run_date }}" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
+                <input type="date" id="next_run_date" name="next_run_date" value="{{ default_next_run_date }}" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100">
             </div>
             
             <div>
                 <label for="end_date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">End Date (Optional)</label>
-                <input type="date" id="end_date" name="end_date" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
+                <input type="date" id="end_date" name="end_date" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100">
             </div>
             
             <div>
                 <label for="due_date_days" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Due Date (Days from Issue)</label>
-                <input type="number" id="due_date_days" name="due_date_days" value="30" min="1" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
+                <input type="number" id="due_date_days" name="due_date_days" value="30" min="1" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100">
             </div>
             
             <div>
                 <label for="tax_rate" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Tax Rate (%)</label>
-                <input type="number" id="tax_rate" name="tax_rate" value="0" step="0.01" min="0" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
+                <input type="number" id="tax_rate" name="tax_rate" value="0" step="0.01" min="0" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100">
             </div>
         </div>
         
         <div>
             <label for="client_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Client Name</label>
-            <input type="text" id="client_name" name="client_name" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
+            <input type="text" id="client_name" name="client_name" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100">
         </div>
         
         <div>
             <label for="client_email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Client Email</label>
-            <input type="email" id="client_email" name="client_email" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
+            <input type="email" id="client_email" name="client_email" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100">
         </div>
         
         <div>
             <label for="client_address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Client Address</label>
-            <textarea id="client_address" name="client_address" rows="3" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"></textarea>
+            <textarea id="client_address" name="client_address" rows="3" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100"></textarea>
         </div>
         
         <div>
             <label for="notes" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Notes</label>
-            <textarea id="notes" name="notes" rows="3" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"></textarea>
+            <textarea id="notes" name="notes" rows="3" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100"></textarea>
         </div>
         
         <div>
             <label for="terms" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Terms</label>
-            <textarea id="terms" name="terms" rows="3" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"></textarea>
+            <textarea id="terms" name="terms" rows="3" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100"></textarea>
         </div>
         
         <div class="flex items-center space-x-4">
diff --git a/app/templates/recurring_invoices/edit.html b/app/templates/recurring_invoices/edit.html
index ccdc86e..ec1d0b1 100644
--- a/app/templates/recurring_invoices/edit.html
+++ b/app/templates/recurring_invoices/edit.html
@@ -21,12 +21,12 @@
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div>
                 <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Template Name *</label>
-                <input type="text" id="name" name="name" value="{{ recurring.name }}" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
+                <input type="text" id="name" name="name" value="{{ recurring.name }}" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100">
             </div>
             
             <div>
                 <label for="frequency" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Frequency *</label>
-                <select id="frequency" name="frequency" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
+                <select id="frequency" name="frequency" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100">
                     <option value="daily" {% if recurring.frequency == 'daily' %}selected{% endif %}>Daily</option>
                     <option value="weekly" {% if recurring.frequency == 'weekly' %}selected{% endif %}>Weekly</option>
                     <option value="monthly" {% if recurring.frequency == 'monthly' %}selected{% endif %}>Monthly</option>
@@ -36,53 +36,53 @@
             
             <div>
                 <label for="interval" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Interval</label>
-                <input type="number" id="interval" name="interval" value="{{ recurring.interval }}" min="1" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
+                <input type="number" id="interval" name="interval" value="{{ recurring.interval }}" min="1" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100">
             </div>
             
             <div>
                 <label for="next_run_date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Next Run Date *</label>
-                <input type="date" id="next_run_date" name="next_run_date" value="{{ recurring.next_run_date.strftime('%Y-%m-%d') if recurring.next_run_date else '' }}" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
+                <input type="date" id="next_run_date" name="next_run_date" value="{{ recurring.next_run_date.strftime('%Y-%m-%d') if recurring.next_run_date else '' }}" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100">
             </div>
             
             <div>
                 <label for="end_date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">End Date (Optional)</label>
-                <input type="date" id="end_date" name="end_date" value="{{ recurring.end_date.strftime('%Y-%m-%d') if recurring.end_date else '' }}" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
+                <input type="date" id="end_date" name="end_date" value="{{ recurring.end_date.strftime('%Y-%m-%d') if recurring.end_date else '' }}" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100">
             </div>
             
             <div>
                 <label for="due_date_days" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Due Date (Days from Issue)</label>
-                <input type="number" id="due_date_days" name="due_date_days" value="{{ recurring.due_date_days }}" min="1" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
+                <input type="number" id="due_date_days" name="due_date_days" value="{{ recurring.due_date_days }}" min="1" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100">
             </div>
             
             <div>
                 <label for="tax_rate" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Tax Rate (%)</label>
-                <input type="number" id="tax_rate" name="tax_rate" value="{{ recurring.tax_rate }}" step="0.01" min="0" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
+                <input type="number" id="tax_rate" name="tax_rate" value="{{ recurring.tax_rate }}" step="0.01" min="0" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100">
             </div>
         </div>
         
         <div>
             <label for="client_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Client Name</label>
-            <input type="text" id="client_name" name="client_name" value="{{ recurring.client_name }}" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
+            <input type="text" id="client_name" name="client_name" value="{{ recurring.client_name }}" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100">
         </div>
         
         <div>
             <label for="client_email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Client Email</label>
-            <input type="email" id="client_email" name="client_email" value="{{ recurring.client_email or '' }}" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
+            <input type="email" id="client_email" name="client_email" value="{{ recurring.client_email or '' }}" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100">
         </div>
         
         <div>
             <label for="client_address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Client Address</label>
-            <textarea id="client_address" name="client_address" rows="3" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">{{ recurring.client_address or '' }}</textarea>
+            <textarea id="client_address" name="client_address" rows="3" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100">{{ recurring.client_address or '' }}</textarea>
         </div>
         
         <div>
             <label for="notes" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Notes</label>
-            <textarea id="notes" name="notes" rows="3" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">{{ recurring.notes or '' }}</textarea>
+            <textarea id="notes" name="notes" rows="3" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100">{{ recurring.notes or '' }}</textarea>
         </div>
         
         <div>
             <label for="terms" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Terms</label>
-            <textarea id="terms" name="terms" rows="3" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">{{ recurring.terms or '' }}</textarea>
+            <textarea id="terms" name="terms" rows="3" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-card-light dark:bg-card-dark text-gray-900 dark:text-gray-100">{{ recurring.terms or '' }}</textarea>
         </div>
         
         <div class="flex items-center space-x-4">
diff --git a/app/templates/saved_filters/list.html b/app/templates/saved_filters/list.html
index 7ee5850..3977a49 100644
--- a/app/templates/saved_filters/list.html
+++ b/app/templates/saved_filters/list.html
@@ -19,7 +19,7 @@
     {% if filters %}
     <!-- Grouped Filters -->
     {% for scope, scope_filters in grouped_filters.items() %}
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-6">
+    <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6 mb-6">
         <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4 capitalize">
             <i class="fas fa-filter mr-2 text-blue-600"></i>
             {{ scope }} Filters
diff --git a/app/templates/settings/keyboard_shortcuts.html b/app/templates/settings/keyboard_shortcuts.html
index d814eed..f9216a7 100644
--- a/app/templates/settings/keyboard_shortcuts.html
+++ b/app/templates/settings/keyboard_shortcuts.html
@@ -202,15 +202,15 @@
             <ul class="space-y-2 text-sm text-text-light dark:text-text-dark">
                 <li class="flex items-start gap-2">
                     <i class="fas fa-check-circle text-green-600 dark:text-green-400 mt-0.5"></i>
-                    <span>Press <kbd class="px-2 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-xs">Shift</kbd> + <kbd class="px-2 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-xs">?</kbd> to view all keyboard shortcuts</span>
+                    <span>Press <kbd class="px-2 py-1 bg-card-light dark:bg-card-dark border border-gray-300 dark:border-gray-600 rounded text-xs">Shift</kbd> + <kbd class="px-2 py-1 bg-card-light dark:bg-card-dark border border-gray-300 dark:border-gray-600 rounded text-xs">?</kbd> to view all keyboard shortcuts</span>
                 </li>
                 <li class="flex items-start gap-2">
                     <i class="fas fa-check-circle text-green-600 dark:text-green-400 mt-0.5"></i>
-                    <span>Use <kbd class="px-2 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-xs">Ctrl</kbd> + <kbd class="px-2 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-xs">K</kbd> to open the command palette</span>
+                    <span>Use <kbd class="px-2 py-1 bg-card-light dark:bg-card-dark border border-gray-300 dark:border-gray-600 rounded text-xs">Ctrl</kbd> + <kbd class="px-2 py-1 bg-card-light dark:bg-card-dark border border-gray-300 dark:border-gray-600 rounded text-xs">K</kbd> to open the command palette</span>
                 </li>
                 <li class="flex items-start gap-2">
                     <i class="fas fa-check-circle text-green-600 dark:text-green-400 mt-0.5"></i>
-                    <span>Navigate quickly with sequences like <kbd class="px-2 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-xs">g</kbd> <kbd class="px-2 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-xs">d</kbd> for dashboard</span>
+                    <span>Navigate quickly with sequences like <kbd class="px-2 py-1 bg-card-light dark:bg-card-dark border border-gray-300 dark:border-gray-600 rounded text-xs">g</kbd> <kbd class="px-2 py-1 bg-card-light dark:bg-card-dark border border-gray-300 dark:border-gray-600 rounded text-xs">d</kbd> for dashboard</span>
                 </li>
                 <li class="flex items-start gap-2">
                     <i class="fas fa-check-circle text-green-600 dark:text-green-400 mt-0.5"></i>
diff --git a/app/templates/time_entry_templates/create.html b/app/templates/time_entry_templates/create.html
index a909033..8e4bc31 100644
--- a/app/templates/time_entry_templates/create.html
+++ b/app/templates/time_entry_templates/create.html
@@ -15,7 +15,7 @@
     </div>
 
     <!-- Form -->
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+    <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6">
         <form method="POST" action="{{ url_for('time_entry_templates.create_template') }}">
             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
             
diff --git a/app/templates/time_entry_templates/edit.html b/app/templates/time_entry_templates/edit.html
index 28c3fe0..943c0bd 100644
--- a/app/templates/time_entry_templates/edit.html
+++ b/app/templates/time_entry_templates/edit.html
@@ -15,7 +15,7 @@
     </div>
 
     <!-- Form -->
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+    <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6">
         <form method="POST" action="{{ url_for('time_entry_templates.edit_template', template_id=template.id) }}">
             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
             
diff --git a/app/templates/time_entry_templates/list.html b/app/templates/time_entry_templates/list.html
index edad7da..f7869d2 100644
--- a/app/templates/time_entry_templates/list.html
+++ b/app/templates/time_entry_templates/list.html
@@ -20,7 +20,7 @@
     <!-- Templates Grid -->
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         {% for template in templates %}
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 hover:shadow-lg transition">
+        <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6 hover:shadow-lg transition">
             <!-- Template Header -->
             <div class="flex justify-between items-start mb-4">
                 <div class="flex-1">
diff --git a/app/templates/user/profile.html b/app/templates/user/profile.html
index b1936b6..b415d62 100644
--- a/app/templates/user/profile.html
+++ b/app/templates/user/profile.html
@@ -4,7 +4,7 @@
 {% block content %}
 <div class="container mx-auto px-4 py-8 max-w-6xl">
     <!-- Header -->
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-6">
+    <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6 mb-6">
         <div class="flex items-center justify-between">
             <div class="flex items-center space-x-4">
                 <!-- Avatar -->
@@ -36,7 +36,7 @@
 
     <!-- Stats -->
     <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+        <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6">
             <div class="flex items-center">
                 <div class="p-3 rounded-full bg-blue-100 dark:bg-blue-900">
                     <i class="fas fa-clock text-2xl text-blue-600 dark:text-blue-400"></i>
@@ -48,7 +48,7 @@
             </div>
         </div>
         
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+        <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6">
             <div class="flex items-center">
                 <div class="p-3 rounded-full bg-green-100 dark:bg-green-900">
                     <i class="fas fa-play-circle text-2xl text-green-600 dark:text-green-400"></i>
@@ -66,7 +66,7 @@
             </div>
         </div>
         
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+        <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6">
             <div class="flex items-center">
                 <div class="p-3 rounded-full bg-purple-100 dark:bg-purple-900">
                     <i class="fas fa-calendar-check text-2xl text-purple-600 dark:text-purple-400"></i>
@@ -84,7 +84,7 @@
     <!-- Recent Activity -->
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <!-- Recent Time Entries -->
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+        <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6">
             <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
                 <i class="fas fa-history mr-2"></i>{{ _('Recent Time Entries') }}
             </h2>
@@ -126,7 +126,7 @@
         </div>
 
         <!-- Recent Activities -->
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+        <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6">
             <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
                 <i class="fas fa-stream mr-2"></i>{{ _('Recent Activity') }}
             </h2>
diff --git a/app/templates/user/settings.html b/app/templates/user/settings.html
index 0c23777..cee5b73 100644
--- a/app/templates/user/settings.html
+++ b/app/templates/user/settings.html
@@ -12,7 +12,7 @@
         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
         
         <!-- Profile Information -->
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+        <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6">
             <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
                 <i class="fas fa-user mr-2"></i>{{ _('Profile Information') }}
             </h2>
@@ -48,7 +48,7 @@
         </div>
 
         <!-- Notification Preferences -->
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+        <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6">
             <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
                 <i class="fas fa-bell mr-2"></i>{{ _('Notification Preferences') }}
             </h2>
@@ -105,7 +105,7 @@
         </div>
 
         <!-- Display Preferences -->
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+        <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6">
             <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
                 <i class="fas fa-palette mr-2"></i>{{ _('Display Preferences') }}
             </h2>
@@ -139,7 +139,7 @@
         </div>
 
         <!-- Time Rounding Preferences -->
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+        <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6">
             <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
                 <i class="fas fa-clock mr-2"></i>{{ _('Time Rounding Preferences') }}
             </h2>
@@ -201,7 +201,7 @@
         </div>
 
         <!-- Overtime Settings -->
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+        <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6">
             <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
                 <i class="fas fa-business-time mr-2"></i>{{ _('Overtime Settings') }}
             </h2>
@@ -238,7 +238,7 @@
         </div>
 
         <!-- Regional Settings -->
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+        <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6">
             <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
                 <i class="fas fa-globe mr-2"></i>{{ _('Regional Settings') }}
             </h2>
diff --git a/app/templates/weekly_goals/create.html b/app/templates/weekly_goals/create.html
index e1fcdeb..f094266 100644
--- a/app/templates/weekly_goals/create.html
+++ b/app/templates/weekly_goals/create.html
@@ -16,7 +16,7 @@
     </div>
 
     <!-- Form -->
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+    <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6">
         <form method="POST" action="{{ url_for('weekly_goals.create') }}" novalidate data-validate-form>
             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
             
diff --git a/app/templates/weekly_goals/edit.html b/app/templates/weekly_goals/edit.html
index 38cb4e4..0776d32 100644
--- a/app/templates/weekly_goals/edit.html
+++ b/app/templates/weekly_goals/edit.html
@@ -16,7 +16,7 @@
     </div>
 
     <!-- Form -->
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+    <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6">
         <form method="POST" action="{{ url_for('weekly_goals.edit', goal_id=goal.id) }}">
             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
             
diff --git a/app/templates/weekly_goals/index.html b/app/templates/weekly_goals/index.html
index fb9fa0a..d5ae18d 100644
--- a/app/templates/weekly_goals/index.html
+++ b/app/templates/weekly_goals/index.html
@@ -18,7 +18,7 @@
 
     <!-- Statistics -->
     <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+        <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6">
             <div class="flex items-center">
                 <div class="flex-shrink-0">
                     <i class="fas fa-trophy text-3xl text-yellow-500"></i>
@@ -30,7 +30,7 @@
             </div>
         </div>
 
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+        <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6">
             <div class="flex items-center">
                 <div class="flex-shrink-0">
                     <i class="fas fa-check-circle text-3xl text-green-500"></i>
@@ -42,7 +42,7 @@
             </div>
         </div>
 
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+        <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6">
             <div class="flex items-center">
                 <div class="flex-shrink-0">
                     <i class="fas fa-times-circle text-3xl text-red-500"></i>
@@ -54,7 +54,7 @@
             </div>
         </div>
 
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+        <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6">
             <div class="flex items-center">
                 <div class="flex-shrink-0">
                     <i class="fas fa-percentage text-3xl text-blue-500"></i>
@@ -152,7 +152,7 @@
 
     <!-- Past Goals -->
     {% if goals %}
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+    <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6">
         <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
             <i class="fas fa-history mr-2 text-gray-600"></i>
             {{ _('Goal History') }}
diff --git a/app/templates/weekly_goals/view.html b/app/templates/weekly_goals/view.html
index 58a825d..9aecf41 100644
--- a/app/templates/weekly_goals/view.html
+++ b/app/templates/weekly_goals/view.html
@@ -29,7 +29,7 @@
 
     <!-- Goal Overview -->
     <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+        <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6">
             <div class="flex items-center justify-between mb-2">
                 <h3 class="text-sm font-medium text-gray-600 dark:text-gray-400">{{ _('Target Hours') }}</h3>
                 <i class="fas fa-bullseye text-2xl text-blue-500"></i>
@@ -37,7 +37,7 @@
             <p class="text-3xl font-bold text-gray-900 dark:text-white">{{ goal.target_hours }}h</p>
         </div>
 
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+        <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6">
             <div class="flex items-center justify-between mb-2">
                 <h3 class="text-sm font-medium text-gray-600 dark:text-gray-400">{{ _('Actual Hours') }}</h3>
                 <i class="fas fa-clock text-2xl text-green-500 dark:text-green-400"></i>
@@ -45,7 +45,7 @@
             <p class="text-3xl font-bold text-gray-900 dark:text-white">{{ goal.actual_hours }}h</p>
         </div>
 
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+        <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6">
             <div class="flex items-center justify-between mb-2">
                 <h3 class="text-sm font-medium text-gray-600 dark:text-gray-400">{{ _('Status') }}</h3>
                 {% if goal.status == 'completed' %}
@@ -71,7 +71,7 @@
     </div>
 
     <!-- Progress Card -->
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-6">
+    <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6 mb-6">
         <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
             <i class="fas fa-chart-line mr-2"></i>
             {{ _('Progress') }}
@@ -113,7 +113,7 @@
     </div>
 
     <!-- Daily Breakdown -->
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-6">
+    <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6 mb-6">
         <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
             <i class="fas fa-calendar-alt mr-2"></i>
             {{ _('Daily Breakdown') }}
@@ -145,7 +145,7 @@
 
     <!-- Notes -->
     {% if goal.notes %}
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-6">
+    <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6 mb-6">
         <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
             <i class="fas fa-sticky-note mr-2"></i>
             {{ _('Notes') }}
@@ -156,7 +156,7 @@
 
     <!-- Time Entries -->
     {% if time_entries %}
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+    <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-md p-6">
         <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
             <i class="fas fa-list mr-2"></i>
             {{ _('Time Entries This Week') }} ({{ time_entries|length }})