diff --git a/fe/package-lock.json b/fe/package-lock.json
index 1266026..a49cb17 100644
--- a/fe/package-lock.json
+++ b/fe/package-lock.json
@@ -15,6 +15,7 @@
         "@vueuse/core": "^13.1.0",
         "axios": "^1.9.0",
         "date-fns": "^4.1.0",
+        "motion": "^12.15.0",
         "pinia": "^3.0.2",
         "vue": "^3.5.13",
         "vue-i18n": "^12.0.0-alpha.2",
@@ -4420,21 +4421,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/aria-query": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
-      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/@types/date-fns": {
-      "version": "2.5.3",
-      "resolved": "https://registry.npmjs.org/@types/date-fns/-/date-fns-2.5.3.tgz",
-      "integrity": "sha512-4KVPD3g5RjSgZtdOjvI/TDFkLNUHhdoWxmierdQbDeEg17Rov0hbBYtIzNaQA67ORpteOhvR9YEMTb6xeDCang==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/estree": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
@@ -7685,6 +7671,33 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.15.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.15.0.tgz",
+      "integrity": "sha512-XKg/LnKExdLGugZrDILV7jZjI599785lDIJZLxMiiIFidCsy0a4R2ZEf+Izm67zyOuJgQYTHOmodi7igQsw3vg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.15.0",
+        "motion-utils": "^12.12.1",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fresh": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
@@ -9439,6 +9452,47 @@
         "ufo": "^1.5.4"
       }
     },
+    "node_modules/motion": {
+      "version": "12.15.0",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.15.0.tgz",
+      "integrity": "sha512-HLouXyIb1uQFiZgJTYGrtEzbatPc6vK+HP+Qt6afLQjaudiGiLLVsoy71CwzD/Stlh06FUd5OpyiXqn6XvqjqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^12.15.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "12.15.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.15.0.tgz",
+      "integrity": "sha512-D2ldJgor+2vdcrDtKJw48k3OddXiZN1dDLLWrS8kiHzQdYVruh0IoTwbJBslrnTXIPgFED7PBN2Zbwl7rNqnhA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.12.1"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.12.1",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.12.1.tgz",
+      "integrity": "sha512-f9qiqUHm7hWSLlNW8gS9pisnsN7CRFRD58vNjptKdsqFLpkVnX00TNeD6Q0d27V9KzT7ySFyK1TZ/DShfVOv6w==",
+      "license": "MIT"
+    },
     "node_modules/mrmime": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
@@ -10524,7 +10578,7 @@
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -10534,7 +10588,7 @@
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
       "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "scheduler": "^0.26.0"
@@ -11005,7 +11059,7 @@
       "version": "0.26.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
       "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/semver": {
@@ -12057,7 +12111,6 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "dev": true,
       "license": "0BSD"
     },
     "node_modules/type-check": {
@@ -13874,4 +13927,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/fe/package.json b/fe/package.json
index 47522ad..6f3f247 100644
--- a/fe/package.json
+++ b/fe/package.json
@@ -26,6 +26,7 @@
     "@vueuse/core": "^13.1.0",
     "axios": "^1.9.0",
     "date-fns": "^4.1.0",
+    "motion": "^12.15.0",
     "pinia": "^3.0.2",
     "vue": "^3.5.13",
     "vue-i18n": "^12.0.0-alpha.2",
diff --git a/fe/src/config/api-config.ts b/fe/src/config/api-config.ts
index 052aade..19a3f4f 100644
--- a/fe/src/config/api-config.ts
+++ b/fe/src/config/api-config.ts
@@ -2,7 +2,7 @@
 export const API_VERSION = 'v1'
 
 // API Base URL
-export const API_BASE_URL = (window as any).ENV?.VITE_API_URL || 'https://mitlistbe.mohamad.dev'
+export const API_BASE_URL = (window as any).ENV?.VITE_API_URL || 'http://localhost:8000'
 
 // API Endpoints
 export const API_ENDPOINTS = {
diff --git a/fe/src/pages/ChoresPage.vue b/fe/src/pages/ChoresPage.vue
index c4603db..8019483 100644
--- a/fe/src/pages/ChoresPage.vue
+++ b/fe/src/pages/ChoresPage.vue
@@ -3,31 +3,31 @@
     <div class="neo-list-header">
       <div class="header-left">
         <h1 class="neo-title">Chores</h1>
-        <div class="view-tabs">
+        <div class="view-tabs" role="tablist">
           <button class="neo-tab-btn" :class="{ active: activeView === 'overdue' }" @click="activeView = 'overdue'"
-            :disabled="isLoading">
+            :disabled="isLoading" role="tab" :aria-selected="activeView === 'overdue'">
             <span class="material-icons">warning</span>
             Overdue
             <span v-if="counts.overdue > 0" class="neo-tab-count">{{ counts.overdue }}</span>
           </button>
           <button class="neo-tab-btn" :class="{ active: activeView === 'today' }" @click="activeView = 'today'"
-            :disabled="isLoading">
+            :disabled="isLoading" role="tab" :aria-selected="activeView === 'today'">
             <span class="material-icons">today</span>
             Today
             <span v-if="counts.today > 0" class="neo-tab-count">{{ counts.today }}</span>
           </button>
           <button class="neo-tab-btn" :class="{ active: activeView === 'upcoming' }" @click="activeView = 'upcoming'"
-            :disabled="isLoading">
+            :disabled="isLoading" role="tab" :aria-selected="activeView === 'upcoming'">
             <span class="material-icons">upcoming</span>
             Upcoming
           </button>
           <button class="neo-tab-btn" :class="{ active: activeView === 'all' }" @click="activeView = 'all'"
-            :disabled="isLoading">
+            :disabled="isLoading" role="tab" :aria-selected="activeView === 'all'">
             <span class="material-icons">list</span>
             All Pending
           </button>
           <button class="neo-tab-btn" :class="{ active: activeView === 'completed' }" @click="activeView = 'completed'"
-            :disabled="isLoading">
+            :disabled="isLoading" role="tab" :aria-selected="activeView === 'completed'">
             <span class="material-icons">check_circle</span>
             Completed
           </button>
@@ -36,19 +36,20 @@
       <div class="header-right">
         <div class="neo-view-toggle">
           <button class="neo-toggle-btn" :class="{ active: viewMode === 'calendar' }" @click="viewMode = 'calendar'"
-            :disabled="isLoading">
+            :disabled="isLoading" :aria-pressed="viewMode === 'calendar'" aria-label="Calendar View">
             <span class="material-icons">calendar_month</span>
-            Calendar
+            <span class="btn-text hide-text-on-mobile">Calendar</span>
           </button>
           <button class="neo-toggle-btn" :class="{ active: viewMode === 'list' }" @click="viewMode = 'list'"
-            :disabled="isLoading">
+            :disabled="isLoading" :aria-pressed="viewMode === 'list'" aria-label="List View">
             <span class="material-icons">view_list</span>
-            List
+            <span class="btn-text hide-text-on-mobile">List</span>
           </button>
         </div>
-        <button class="neo-action-button" @click="openCreateChoreModal(null)" :disabled="isLoading">
+        <button class="neo-action-button" @click="openCreateChoreModal(null)" :disabled="isLoading"
+          aria-label="New Chore">
           <span class="material-icons">add</span>
-          New Chore
+          <span class="btn-text hide-text-on-mobile-sm">New Chore</span>
         </button>
       </div>
     </div>
@@ -62,43 +63,56 @@
     <!-- Calendar View -->
     <div v-else-if="viewMode === 'calendar'" class="calendar-view">
       <div class="calendar-header">
-        <button class="btn btn-icon" @click="previousMonth">
+        <button class="btn btn-icon" @click="previousMonth" aria-label="Previous month">
           <span class="material-icons">chevron_left</span>
         </button>
         <h2>{{ currentMonthYear }}</h2>
-        <button class="btn btn-icon" @click="nextMonth">
+        <button class="btn btn-icon" @click="nextMonth" aria-label="Next month">
           <span class="material-icons">chevron_right</span>
         </button>
       </div>
-      <div class="calendar-grid">
-        <div class="calendar-weekdays">
-          <div v-for="day in weekDays" :key="day" class="weekday">{{ day }}</div>
-        </div>
-        <div class="calendar-days">
-          <div v-for="(day, index) in calendarDays" :key="index" class="calendar-day" :class="{
-            'other-month': !day.isCurrentMonth,
-            'today': day.isToday,
-            'has-chores': day.chores.length > 0
-          }">
-            <div class="day-header">
-              <span class="day-number">{{ day.date.getDate() }}</span>
-              <div v-if="!day.isOtherMonth" class="add-chore-indicator"
-                @click.stop="openCreateChoreModal(null, day.date)">+</div>
-            </div>
-            <div class="day-chores">
-              <div v-for="chore in day.chores" :key="chore.id" class="calendar-chore-item"
-                :class="{ 'is-completed': chore.is_completed }" @click="openEditChoreModal(chore)">
-                <div class="chore-status" :class="getStatusClass(chore)"></div>
-                <span class="chore-name">{{ chore.name }}</span>
+      <div v-if="calendarDays.length > 0">
+        <div class="calendar-grid">
+          <div class="calendar-weekdays">
+            <div v-for="day in weekDays" :key="day" class="weekday">{{ day }}</div>
+          </div>
+          <div class="calendar-days">
+            <div v-for="(day, index) in calendarDays" :key="index" class="calendar-day" :class="{
+              'other-month': !day.isCurrentMonth,
+              'today': day.isToday,
+              'has-chores': day.chores.length > 0
+            }" tabindex="0" @keydown.enter="openCreateChoreModal(null, day.date)"
+              @keydown.space="openCreateChoreModal(null, day.date)">
+              <div class="day-header">
+                <span class="day-number">{{ day.date.getDate() }}</span>
+                <button v-if="!day.isOtherMonth" class="add-chore-indicator"
+                  @click.stop="openCreateChoreModal(null, day.date)" aria-label="Add chore to this day">
+                  <span class="material-icons">add_circle_outline</span>
+                </button>
+              </div>
+              <div class="day-chores">
+                <div v-for="chore in day.chores" :key="chore.id" class="calendar-chore-item"
+                  :class="{ 'is-completed': chore.is_completed }" @click="openEditChoreModal(chore)" tabindex="0"
+                  @keydown.enter="openEditChoreModal(chore)" @keydown.space="openEditChoreModal(chore)">
+                  <div class="chore-status" :class="getStatusClass(chore)"></div>
+                  <span class="chore-name">{{ chore.name }}</span>
+                </div>
+                <div v-if="day.chores.length === 0 && day.isCurrentMonth" class="no-chores-in-day">
+                  <!-- Optionally, a subtle indicator for no chores -->
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
+      <div v-else class="empty-state">
+        <span class="material-icons empty-icon">calendar_today</span>
+        <p>No chores to display for this period.</p>
+      </div>
     </div>
 
     <!-- List View -->
-    <div v-else class="chores-grid">
+    <div v-else class="chores-list-container">
       <transition-group name="chore-list" tag="div" class="chores-grid">
         <div v-for="chore in filteredChores" :key="chore.id" class="chore-card"
           :class="{ 'is-overdue': !chore.is_completed && isOverdue(chore), 'is-completed': chore.is_completed }">
@@ -139,24 +153,35 @@
                 title="Mark as Not Done">
                 <span class="material-icons">undo</span> Undo
               </button>
-              <button class="btn btn-icon" @click="openEditChoreModal(chore)" title="Edit">
+              <button class="btn btn-icon" @click="openEditChoreModal(chore)" title="Edit" aria-label="Edit chore">
                 <span class="material-icons">edit</span>
+                <span class="btn-text hide-text-on-mobile">Edit</span>
               </button>
-              <button class="btn btn-icon btn-danger-icon" @click="confirmDeleteChore(chore)" title="Delete">
+              <button class="btn btn-icon btn-danger-icon" @click="confirmDeleteChore(chore)" title="Delete"
+                aria-label="Delete chore">
                 <span class="material-icons">delete</span>
+                <span class="btn-text hide-text-on-mobile">Delete</span>
               </button>
             </div>
           </div>
         </div>
       </transition-group>
+      <div v-if="!isLoading && filteredChores.length === 0" class="empty-state">
+        <span class="material-icons empty-icon"> Rtask_alt</span>
+        <p>No chores in this view. Well done!</p>
+        <button v-if="activeView !== 'all'" class="btn btn-sm btn-outline" @click="activeView = 'all'">View All
+          Pending</button>
+      </div>
     </div>
 
     <!-- Create/Edit Chore Modal -->
-    <div v-if="showChoreModal" class="modal-backdrop open" @click.self="showChoreModal = false">
+    <div v-if="showChoreModal" class="modal-backdrop open" @click.self="showChoreModal = false" role="dialog"
+      aria-modal="true" :aria-labelledby="isEditing ? 'editChoreModalTitle' : 'newChoreModalTitle'">
       <div class="modal-container">
         <div class="modal-header">
-          <h3>{{ isEditing ? 'Edit Chore' : 'New Chore' }}</h3>
-          <button class="btn btn-icon" @click="showChoreModal = false">
+          <h3 :id="isEditing ? 'editChoreModalTitle' : 'newChoreModalTitle'">{{ isEditing ? 'Edit Chore' : 'New Chore'
+          }}</h3>
+          <button class="btn btn-icon" @click="showChoreModal = false" aria-label="Close modal">
             <span class="material-icons">close</span>
           </button>
         </div>
@@ -171,12 +196,13 @@
             <label>Type</label>
             <div class="type-selector">
               <button type="button" class="type-btn" :class="{ active: choreForm.type === 'personal' }"
-                @click="choreForm.type = 'personal'; choreForm.group_id = undefined">
+                @click="choreForm.type = 'personal'; choreForm.group_id = undefined"
+                :aria-pressed="choreForm.type === 'personal' ? 'true' : 'false'">
                 <span class="material-icons">person</span>
                 Personal
               </button>
               <button type="button" class="type-btn" :class="{ active: choreForm.type === 'group' }"
-                @click="choreForm.type = 'group'">
+                @click="choreForm.type = 'group'" :aria-pressed="choreForm.type === 'group' ? 'true' : 'false'">
                 <span class="material-icons">group</span>
                 Group
               </button>
@@ -212,7 +238,7 @@
             <div v-if="choreForm.frequency === 'custom'" class="form-group">
               <label for="interval">Interval (days)</label>
               <input id="interval" v-model.number="choreForm.custom_interval_days" type="number" class="form-input"
-                min="1" required />
+                min="1" placeholder="e.g. 3" required />
             </div>
           </div>
 
@@ -237,11 +263,12 @@
     </div>
 
     <!-- Delete Confirmation Dialog -->
-    <div v-if="showDeleteDialog" class="modal-backdrop open" @click.self="showDeleteDialog = false">
+    <div v-if="showDeleteDialog" class="modal-backdrop open" @click.self="showDeleteDialog = false" role="dialog"
+      aria-modal="true" aria-labelledby="deleteDialogTitle">
       <div class="modal-container delete-confirm">
         <div class="modal-header">
-          <h3>Delete Chore</h3>
-          <button class="btn btn-icon" @click="showDeleteDialog = false">
+          <h3 id="deleteDialogTitle">Delete Chore</h3>
+          <button class="btn btn-icon" @click="showDeleteDialog = false" aria-label="Close modal">
             <span class="material-icons">close</span>
           </button>
         </div>
@@ -256,11 +283,12 @@
     </div>
 
     <!-- Keyboard Shortcuts Modal -->
-    <div v-if="showShortcutsModal" class="modal-backdrop open" @click.self="showShortcutsModal = false">
+    <div v-if="showShortcutsModal" class="modal-backdrop open" @click.self="showShortcutsModal = false" role="dialog"
+      aria-modal="true" aria-labelledby="shortcutsModalTitle">
       <div class="modal-container shortcuts-modal">
         <div class="modal-header">
-          <h3>Keyboard Shortcuts</h3>
-          <button class="btn btn-icon" @click="showShortcutsModal = false">
+          <h3 id="shortcutsModalTitle">Keyboard Shortcuts</h3>
+          <button class="btn btn-icon" @click="showShortcutsModal = false" aria-label="Close modal">
             <span class="material-icons">close</span>
           </button>
         </div>
@@ -300,52 +328,48 @@
 <script setup lang="ts">
 import { ref, onMounted, computed, onUnmounted, watch, onBeforeUnmount } from 'vue'
 import { format, startOfDay, addDays, addWeeks, isBefore, isEqual, startOfMonth, endOfMonth, eachDayOfInterval, isSameMonth, isToday as isTodayDate } from 'date-fns'
-import { choreService } from '../services/choreService' // Assuming choreService exists
+import { choreService } from '../services/choreService'
 import { useNotificationStore } from '../stores/notifications'
-import type { Chore as OriginalChore, ChoreCreate as OriginalChoreCreate, ChoreUpdate, ChoreFrequency } from '../types/chore' // Assuming these types exist
+import type { Chore, ChoreCreate, ChoreUpdate, ChoreFrequency } from '../types/chore'
 import { useRoute } from 'vue-router'
-import { groupService } from '../services/groupService' // Assuming groupService exists
+import { groupService } from '../services/groupService'
 import { useStorage } from '@vueuse/core'
 
-// Extend Chore type to include completion status
-interface Chore extends OriginalChore {
-  is_completed: boolean;
-  completed_at: string | null; // ISO string date when completed
-}
-interface ChoreCreate extends OriginalChoreCreate {
+// Types
+interface ChoreWithCompletion extends Chore {
   is_completed: boolean;
   completed_at: string | null;
 }
 
+interface ChoreCreateWithCompletion extends Omit<ChoreCreate, 'created_by_id' | 'created_at' | 'updated_at'> {
+  is_completed: boolean;
+  completed_at: string | null;
+}
 
 const notificationStore = useNotificationStore()
 const route = useRoute()
 
 // State
-const chores = ref<Chore[]>([])
+const chores = ref<ChoreWithCompletion[]>([])
 const groups = ref<{ id: number, name: string }[]>([])
 const showChoreModal = ref(false)
 const showDeleteDialog = ref(false)
 const isEditing = ref(false)
-const selectedChore = ref<Chore | null>(null)
+const selectedChore = ref<ChoreWithCompletion | null>(null)
 const showShortcutsModal = ref(false)
 
-const cachedChores = useStorage<Chore[]>('cached-chores-v2', []) // Changed key to avoid conflicts with old cache
+const cachedChores = useStorage<ChoreWithCompletion[]>('cached-chores-v2', [])
 const cachedTimestamp = useStorage<number>('cached-chores-timestamp-v2', 0)
-const CACHE_DURATION = 5 * 60 * 1000;
+const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
 
 const loadCachedData = () => {
   const now = Date.now();
-  if (cachedChores.value.length > 0 && (now - cachedTimestamp.value) < CACHE_DURATION) {
-    chores.value = cachedChores.value.map(c => ({ // Ensure cached items have new properties
-      ...c,
-      is_completed: c.is_completed || false,
-      completed_at: c.completed_at || null
-    }));
+  if (cachedChores.value && cachedChores.value.length > 0 && (now - cachedTimestamp.value) < CACHE_DURATION) {
+    chores.value = cachedChores.value;
   }
 };
 
-const choreForm = ref<ChoreCreate>({
+const choreForm = ref<ChoreCreateWithCompletion>({
   name: '',
   description: '',
   frequency: 'daily',
@@ -362,66 +386,71 @@ const getGroupName = (groupId?: number | null): string | undefined => {
   return groups.value.find(g => g.id === groupId)?.name;
 };
 
-const frequencyOptions = [
-  { label: 'One Time', value: 'one_time' as ChoreFrequency },
-  { label: 'Daily', value: 'daily' as ChoreFrequency },
-  { label: 'Weekly', value: 'weekly' as ChoreFrequency },
-  { label: 'Monthly', value: 'monthly' as ChoreFrequency },
-  { label: 'Custom', value: 'custom' as ChoreFrequency }
-]
+const frequencyOptions: { label: string; value: ChoreFrequency }[] = [
+  { label: 'One Time', value: 'one_time' },
+  { label: 'Daily', value: 'daily' },
+  { label: 'Weekly', value: 'weekly' },
+  { label: 'Monthly', value: 'monthly' },
+  { label: 'Custom', value: 'custom' }
+];
 
-// Add loading state
 const isLoading = ref(true)
 
 const loadChores = async () => {
   isLoading.value = true
   try {
-    const fetchedChores = await choreService.getAllChores() as OriginalChore[]
+    const fetchedChores = await choreService.getAllChores()
     chores.value = fetchedChores.map(c => ({
       ...c,
-      is_completed: (c as Chore).is_completed || false,
-      completed_at: (c as Chore).completed_at || null,
+      is_completed: c.is_completed || false,
+      completed_at: c.completed_at || null,
     }))
     cachedChores.value = chores.value
     cachedTimestamp.value = Date.now()
   } catch (error) {
     console.error('Failed to load all chores:', error)
     notificationStore.addNotification({ message: 'Failed to load chores', type: 'error' })
-    if (cachedChores.value.length === 0) chores.value = []
+    if (!cachedChores.value || cachedChores.value.length === 0) chores.value = []
   } finally {
     isLoading.value = false
   }
 }
 
-// Calendar state
 const viewMode = ref<'calendar' | 'list'>('calendar')
 const currentDate = ref(new Date())
 
 const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+// For smaller screens, you might use: const weekDays = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+
 
 const currentMonthYear = computed(() => {
   return format(currentDate.value, 'MMMM yyyy')
 })
 
 const calendarDays = computed(() => {
+  if (isLoading.value) return []; // Don't compute if chores are not loaded
   const start = startOfMonth(currentDate.value)
   const end = endOfMonth(currentDate.value)
 
-  // Get the first day of the month and adjust to start from Sunday
-  const firstDay = start.getDay()
-  const startDate = addDays(start, -firstDay)
+  const firstDayOfMonth = start.getDay()
+  const startDate = addDays(start, -firstDayOfMonth)
 
-  // Get the last day of the month and adjust to end on Saturday
-  const lastDay = end.getDay()
-  const endDate = addDays(end, 6 - lastDay)
+  const lastDayOfMonth = end.getDay()
+  const endDate = addDays(end, 6 - lastDayOfMonth)
 
   const days = eachDayOfInterval({ start: startDate, end: endDate })
 
   return days.map(date => {
     const dayChores = chores.value.filter(chore => {
-      if (chore.is_completed) return false
-      const choreDate = startOfDay(new Date(chore.next_due_date))
-      return isEqual(choreDate, startOfDay(date))
+      if (chore.is_completed && activeView.value !== 'completed') return false; // Don't show completed in calendar unless completed view is active (edge case)
+      if (!chore.next_due_date) return false;
+      try {
+        const choreDate = startOfDay(new Date(chore.next_due_date.replace(/-/g, '/'))); // More robust date parsing
+        return isEqual(choreDate, startOfDay(date))
+      } catch (e) {
+        console.warn("Invalid date for chore:", chore.name, chore.next_due_date);
+        return false;
+      }
     })
 
     return {
@@ -443,14 +472,14 @@ const nextMonth = () => {
 }
 
 const openCreateChoreModal = (groupId: number | null, date?: Date) => {
-  console.log('Opening create modal', { groupId, date }) // Debug log
   isEditing.value = false
+  selectedChore.value = null
   choreForm.value = {
     name: '',
     description: '',
     frequency: 'daily',
     custom_interval_days: undefined,
-    next_due_date: date ? format(date, 'yyyy-MM-dd') : format(new Date(), 'yyyy-MM-dd'),
+    next_due_date: date ? format(startOfDay(date), 'yyyy-MM-dd') : format(new Date(), 'yyyy-MM-dd'),
     type: groupId ? 'group' : 'personal',
     group_id: groupId ?? undefined,
     is_completed: false,
@@ -459,16 +488,15 @@ const openCreateChoreModal = (groupId: number | null, date?: Date) => {
   showChoreModal.value = true
 }
 
-const openEditChoreModal = (chore: Chore) => {
-  console.log('Opening edit modal', chore) // Debug log
+const openEditChoreModal = (chore: ChoreWithCompletion) => {
   isEditing.value = true
   selectedChore.value = chore
   choreForm.value = {
     name: chore.name,
-    description: chore.description,
+    description: chore.description || '',
     frequency: chore.frequency,
     custom_interval_days: chore.custom_interval_days,
-    next_due_date: chore.next_due_date ? format(new Date(chore.next_due_date), 'yyyy-MM-dd') : format(new Date(), 'yyyy-MM-dd'),
+    next_due_date: chore.next_due_date ? format(new Date(chore.next_due_date.replace(/-/g, '/')), 'yyyy-MM-dd') : format(new Date(), 'yyyy-MM-dd'),
     type: chore.type,
     group_id: chore.group_id,
     is_completed: chore.is_completed,
@@ -480,63 +508,78 @@ const openEditChoreModal = (chore: Chore) => {
 const onSubmit = async () => {
   if (!validateForm()) return
 
+  isLoading.value = true;
   try {
-    const choreData: ChoreCreate | ChoreUpdate = { ...choreForm.value }
+    const choreDataSubmit: Partial<ChoreCreateWithCompletion> = { ...choreForm.value }
 
-    if (choreData.frequency !== 'custom') {
-      choreData.custom_interval_days = undefined
+    if (choreDataSubmit.frequency !== 'custom') {
+      choreDataSubmit.custom_interval_days = undefined
+    }
+    if (choreDataSubmit.next_due_date) {
+      choreDataSubmit.next_due_date = format(new Date(choreDataSubmit.next_due_date.replace(/-/g, '/')), 'yyyy-MM-dd');
     }
 
     let notificationMessage = ''
 
     if (isEditing.value && selectedChore.value) {
-      await choreService.updateChore(selectedChore.value.id, choreData as ChoreUpdate)
-      notificationMessage = `Chore updated successfully`
+      await choreService.updateChore(selectedChore.value.id, choreDataSubmit as ChoreUpdate)
+      notificationMessage = `Chore '${choreForm.value.name}' updated successfully`
     } else {
-      await choreService.createChore(choreData as ChoreCreate)
-      notificationMessage = `Chore created successfully`
+      await choreService.createChore(choreDataSubmit as ChoreCreate)
+      notificationMessage = `Chore '${choreForm.value.name}' created successfully`
     }
 
     notificationStore.addNotification({ message: notificationMessage, type: 'success' })
     showChoreModal.value = false
-    loadChores()
+    hasUnsavedChanges.value = false;
+    await loadChores()
   } catch (error) {
     console.error('Failed to save chore:', error)
     notificationStore.addNotification({ message: `Failed to ${isEditing.value ? 'update' : 'create'} chore`, type: 'error' })
+  } finally {
+    isLoading.value = false;
   }
 }
 
-const confirmDeleteChore = (chore: Chore) => {
+const confirmDeleteChore = (chore: ChoreWithCompletion) => {
   selectedChore.value = chore
   showDeleteDialog.value = true
 }
 
 const deleteChore = async () => {
   if (!selectedChore.value) return;
+  isLoading.value = true;
   try {
-    await choreService.deleteChore(selectedChore.value.id, selectedChore.value.type, selectedChore.value.group_id);
+    await choreService.deleteChore(
+      selectedChore.value.id,
+      selectedChore.value.type,
+      selectedChore.value.group_id ?? undefined
+    );
     showDeleteDialog.value = false;
-    notificationStore.addNotification({ message: `Chore deleted successfully`, type: 'success' })
-    loadChores()
+    notificationStore.addNotification({ message: `Chore '${selectedChore.value.name}' deleted successfully`, type: 'success' })
+    await loadChores()
   } catch (error) {
     console.error('Failed to delete chore:', error);
     notificationStore.addNotification({ message: 'Failed to delete chore', type: 'error' })
+  } finally {
+    isLoading.value = false;
+    selectedChore.value = null;
   }
 }
 
 const formatDate = (dateString: string | null): string => {
   if (!dateString) return 'N/A';
   try {
-    // Handle 'yyyy-MM-dd' or full ISO string
-    return format(new Date(dateString.replace(/-/g, '/')), 'MMM d, yyyy'); // Replace for cross-browser date parsing
+    return format(new Date(dateString.replace(/-/g, '/')), 'MMM d, yyyy');
   } catch (e) {
     return 'Invalid Date';
   }
 }
 
-const formatFrequency = (frequency: ChoreFrequency) => {
+const formatFrequency = (frequency?: ChoreFrequency) => {
+  if (!frequency) return '';
   const option = frequencyOptions.find(opt => opt.value === frequency)
-  return option ? option.label : frequency
+  return option ? option.label : frequency.charAt(0).toUpperCase() + frequency.slice(1);
 }
 
 const loadGroups = async () => {
@@ -544,26 +587,36 @@ const loadGroups = async () => {
     groups.value = await groupService.getUserGroups();
   } catch (error) {
     console.error('Failed to load groups:', error);
-    notificationStore.addNotification({ message: 'Failed to load groups', type: 'error' });
+    // notificationStore.addNotification({ message: 'Failed to load groups', type: 'error' }); // Optional: can be noisy
   }
 };
 
-const activeView = ref('today') // Default to 'today' or 'overdue' might be better
-
+const activeView = ref('today')
 const today = computed(() => startOfDay(new Date()));
 
-const isOverdue = (chore: Chore) => {
-  if (chore.is_completed) return false;
-  const dueDate = startOfDay(new Date(chore.next_due_date.replace(/-/g, '/')));
-  return isBefore(dueDate, today.value);
+const isOverdue = (chore: ChoreWithCompletion) => {
+  if (chore.is_completed || !chore.next_due_date) return false;
+  try {
+    const dueDate = startOfDay(new Date(chore.next_due_date.replace(/-/g, '/')));
+    return isBefore(dueDate, today.value);
+  } catch { return false; }
 };
 
 const filteredChores = computed(() => {
-  let result: Chore[];
-  const pendingChores = chores.value.filter(c => !c.is_completed)
-    .sort((a, b) => new Date(a.next_due_date).getTime() - new Date(b.next_due_date).getTime());
-  const completedChoresList = chores.value.filter(c => c.is_completed)
-    .sort((a, b) => new Date(b.completed_at || 0).getTime() - new Date(a.completed_at || 0).getTime());
+  let result: ChoreWithCompletion[];
+  const pendingChores = chores.value
+    .filter(c => !c.is_completed)
+    .sort((a, b) => {
+      try { return new Date(a.next_due_date.replace(/-/g, '/')).getTime() - new Date(b.next_due_date.replace(/-/g, '/')).getTime(); }
+      catch { return 0; }
+    });
+  const completedChoresList = chores.value
+    .filter(c => c.is_completed)
+    .sort((a, b) => {
+      try { return new Date(b.completed_at || 0).getTime() - new Date(a.completed_at || 0).getTime(); }
+      catch { return 0; }
+    });
+
 
   switch (activeView.value) {
     case 'overdue':
@@ -571,14 +624,20 @@ const filteredChores = computed(() => {
       break;
     case 'today':
       result = pendingChores.filter(chore => {
-        const dueDate = startOfDay(new Date(chore.next_due_date.replace(/-/g, '/')));
-        return isEqual(dueDate, today.value);
+        if (!chore.next_due_date) return false;
+        try {
+          const dueDate = startOfDay(new Date(chore.next_due_date.replace(/-/g, '/')));
+          return isEqual(dueDate, today.value);
+        } catch { return false; }
       });
       break;
     case 'upcoming':
       result = pendingChores.filter(chore => {
-        const dueDate = startOfDay(new Date(chore.next_due_date.replace(/-/g, '/')));
-        return isBefore(today.value, dueDate);
+        if (!chore.next_due_date) return false;
+        try {
+          const dueDate = startOfDay(new Date(chore.next_due_date.replace(/-/g, '/')));
+          return isBefore(today.value, dueDate);
+        } catch { return false; }
       });
       break;
     case 'completed':
@@ -595,73 +654,88 @@ const counts = computed(() => {
   return {
     overdue: pending.filter(chore => isOverdue(chore)).length,
     today: pending.filter(chore => {
-      const dueDate = startOfDay(new Date(chore.next_due_date.replace(/-/g, '/')));
-      return isEqual(dueDate, today.value);
+      if (!chore.next_due_date) return false;
+      try {
+        const dueDate = startOfDay(new Date(chore.next_due_date.replace(/-/g, '/')));
+        return isEqual(dueDate, today.value);
+      } catch { return false; }
     }).length,
   };
 });
 
-const getStatusClass = (chore: Chore) => {
+const getStatusClass = (chore: ChoreWithCompletion) => {
   if (chore.is_completed) return 'completed';
   if (isOverdue(chore)) return 'overdue';
-  const dueDate = startOfDay(new Date(chore.next_due_date.replace(/-/g, '/')));
-  if (isEqual(dueDate, today.value)) return 'today';
+  if (!chore.next_due_date) return 'upcoming'; // Default if no due date
+  try {
+    const dueDate = startOfDay(new Date(chore.next_due_date.replace(/-/g, '/')));
+    if (isEqual(dueDate, today.value)) return 'today';
+  } catch { /* fall through */ }
   return 'upcoming';
 }
 
-const getDueDateClass = (chore: Chore) => {
+const getDueDateClass = (chore: ChoreWithCompletion) => {
   if (chore.is_completed) return '';
-  if (isOverdue(chore)) return 'overdue';
-  const dueDate = startOfDay(new Date(chore.next_due_date.replace(/-/g, '/')));
-  if (isEqual(dueDate, today.value)) return 'today';
-  return 'upcoming';
+  if (isOverdue(chore)) return 'overdue-text'; // Use a different class for text color if needed
+  if (!chore.next_due_date) return '';
+  try {
+    const dueDate = startOfDay(new Date(chore.next_due_date.replace(/-/g, '/')));
+    if (isEqual(dueDate, today.value)) return 'today-text';
+  } catch { /* fall through */ }
+  return 'upcoming-text';
 }
 
-const formatDueDate = (dateString: string) => {
-  const dueDate = startOfDay(new Date(dateString.replace(/-/g, '/')));
-  if (isEqual(dueDate, today.value)) return 'Due Today';
+const formatDueDate = (dateString: string | null) => {
+  if (!dateString) return 'No due date';
+  try {
+    const dueDate = startOfDay(new Date(dateString.replace(/-/g, '/')));
+    if (isEqual(dueDate, today.value)) return 'Due Today';
 
-  const tomorrow = addDays(today.value, 1);
-  if (isEqual(dueDate, tomorrow)) return 'Due Tomorrow';
+    const tomorrow = addDays(today.value, 1);
+    if (isEqual(dueDate, tomorrow)) return 'Due Tomorrow';
 
-  if (isBefore(dueDate, today.value)) return `Overdue: ${formatDate(dateString)}`;
+    if (isBefore(dueDate, today.value)) return `Overdue: ${formatDate(dateString)}`;
 
-  return `Due ${formatDate(dateString)}`;
-}
-
-const toggleChoreCompletion = async (choreToToggle: Chore) => {
-  choreToToggle.is_completed = !choreToToggle.is_completed;
-  if (choreToToggle.is_completed) {
-    choreToToggle.completed_at = new Date().toISOString();
-    // For recurring chores, choreService.completeChore would ideally update next_due_date.
-    // For this example, we'll just toggle the status.
-    // await choreService.completeChore(choreToToggle.id, choreToToggle.type, choreToToggle.group_id); // Placeholder
-    notificationStore.addNotification({ message: `${choreToToggle.name} marked as done.`, type: 'success' });
-
-  } else {
-    choreToToggle.completed_at = null;
-    // If un-completing, you might need a service call to revert next_due_date if it was advanced.
-    // await choreService.undoCompleteChore(choreToToggle.id, choreToToggle.type, choreToToggle.group_id); // Placeholder
-    notificationStore.addNotification({ message: `${choreToToggle.name} marked as not done.`, type: 'info' });
+    return `Due ${formatDate(dateString)}`;
+  } catch {
+    return 'Invalid date'
   }
-  // Optimistically update local state, then persist
+}
+
+const toggleChoreCompletion = async (choreToToggle: ChoreWithCompletion) => {
+  const originalStatus = choreToToggle.is_completed;
+  const originalCompletedAt = choreToToggle.completed_at;
+
+  choreToToggle.is_completed = !choreToToggle.is_completed;
+  choreToToggle.completed_at = choreToToggle.is_completed ? new Date().toISOString() : null;
+
+  // Optimistic update locally
   const index = chores.value.findIndex(c => c.id === choreToToggle.id);
   if (index !== -1) {
-    chores.value[index] = { ...choreToToggle }; // Ensure reactivity
+    chores.value.splice(index, 1, { ...choreToToggle });
   }
-  // Persist the change (if your service expects the whole object)
+  cachedChores.value = [...chores.value];
+
   try {
-    await choreService.updateChore(choreToToggle.id, choreToToggle as ChoreUpdate); // This service might need adjustment
-    // No need to call loadChores() if updateChore returns the updated chore or if optimistic update is enough
+    await choreService.updateChore(choreToToggle.id, {
+      is_completed: choreToToggle.is_completed,
+      completed_at: choreToToggle.completed_at,
+    } as ChoreUpdate);
+
+    notificationStore.addNotification({
+      message: `${choreToToggle.name} marked as ${choreToToggle.is_completed ? 'done' : 'not done'}.`,
+      type: choreToToggle.is_completed ? 'success' : 'info'
+    });
   } catch (error) {
     console.error("Failed to update chore completion status:", error);
     // Revert optimistic update on error
-    choreToToggle.is_completed = !choreToToggle.is_completed;
-    choreToToggle.completed_at = choreToToggle.is_completed ? new Date().toISOString() : null;
-    if (index !== -1) chores.value[index] = { ...choreToToggle };
+    choreToToggle.is_completed = originalStatus;
+    choreToToggle.completed_at = originalCompletedAt;
+    if (index !== -1) chores.value.splice(index, 1, { ...choreToToggle });
+    cachedChores.value = [...chores.value];
+
     notificationStore.addNotification({ message: 'Failed to update chore status.', type: 'error' });
   }
-  cachedChores.value = [...chores.value]; // Update cache after toggle
 };
 
 
@@ -672,142 +746,137 @@ const setQuickDueDate = (when: 'today' | 'tomorrow' | 'next_week') => {
   choreForm.value.next_due_date = format(date, 'yyyy-MM-dd');
 };
 
-// Modify handleKeyPress to include shortcuts modal toggle
 const handleKeyPress = (event: KeyboardEvent) => {
-  // Only handle shortcuts when not in an input field
-  if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
-    return
+  const target = event.target as HTMLElement;
+  if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT') {
+    return;
   }
 
-  // Ctrl/Cmd + N for new chore
   if ((event.ctrlKey || event.metaKey) && event.key === 'n') {
-    event.preventDefault()
-    openCreateChoreModal(null)
+    event.preventDefault();
+    if (!showChoreModal.value) openCreateChoreModal(null);
   }
-
-  // Ctrl/Cmd + / to toggle view mode
   if ((event.ctrlKey || event.metaKey) && event.key === '/') {
-    event.preventDefault()
-    viewMode.value = viewMode.value === 'calendar' ? 'list' : 'calendar'
+    event.preventDefault();
+    viewMode.value = viewMode.value === 'calendar' ? 'list' : 'calendar';
   }
-
-  // Ctrl/Cmd + ? to toggle shortcuts modal
-  if ((event.ctrlKey || event.metaKey) && event.key === '?') {
-    event.preventDefault()
-    showShortcutsModal.value = !showShortcutsModal.value
+  if ((event.ctrlKey || event.metaKey) && (event.key === '?' || event.key === '-')) { // Often ? is Shift + /
+    event.preventDefault();
+    showShortcutsModal.value = !showShortcutsModal.value;
   }
-
-  // Escape to close modals
   if (event.key === 'Escape') {
-    if (showChoreModal.value) {
-      showChoreModal.value = false
-    }
-    if (showDeleteDialog.value) {
-      showDeleteDialog.value = false
-    }
-    if (showShortcutsModal.value) {
-      showShortcutsModal.value = false
-    }
+    if (showChoreModal.value) showChoreModal.value = false;
+    else if (showDeleteDialog.value) showDeleteDialog.value = false;
+    else if (showShortcutsModal.value) showShortcutsModal.value = false;
   }
-}
+};
 
-// Add keyboard event listeners
 onMounted(() => {
   window.addEventListener('keydown', handleKeyPress)
-  loadCachedData()
-  loadChores()
-  loadGroups()
+  loadCachedData() // Load from cache first for perceived speed
+  Promise.all([loadChores(), loadGroups()]); // Then fetch fresh data
 })
 
 onUnmounted(() => {
   window.removeEventListener('keydown', handleKeyPress)
 })
 
-// Improve form validation
 const validateForm = () => {
   if (!choreForm.value.name.trim()) {
-    notificationStore.addNotification({ message: 'Please enter a chore name', type: 'error' })
-    return false
+    notificationStore.addNotification({ message: 'Chore name is required.', type: 'error' }); return false;
   }
-
   if (choreForm.value.type === 'group' && !choreForm.value.group_id) {
-    notificationStore.addNotification({ message: 'Please select a group', type: 'error' })
-    return false
+    notificationStore.addNotification({ message: 'Please select a group for group chores.', type: 'error' }); return false;
   }
-
   if (choreForm.value.frequency === 'custom' && (!choreForm.value.custom_interval_days || choreForm.value.custom_interval_days < 1)) {
-    notificationStore.addNotification({ message: 'Please enter a valid interval', type: 'error' })
-    return false
+    notificationStore.addNotification({ message: 'Custom interval must be at least 1 day.', type: 'error' }); return false;
   }
-
-  return true
+  if (!choreForm.value.next_due_date) {
+    notificationStore.addNotification({ message: 'Due date is required.', type: 'error' }); return false;
+  }
+  try {
+    new Date(choreForm.value.next_due_date.replace(/-/g, '/')); // check if valid date
+  } catch {
+    notificationStore.addNotification({ message: 'Invalid due date format.', type: 'error' }); return false;
+  }
+  return true;
 }
 
-// Add auto-save functionality for form
+// Auto-save functionality (commented out as the previous implementation was risky)
+// A more robust auto-save would save to localStorage/drafts, not directly submit.
+/*
 let autoSaveTimeout: number | null = null
-
 const autoSaveForm = () => {
   if (autoSaveTimeout) {
     clearTimeout(autoSaveTimeout)
   }
   autoSaveTimeout = window.setTimeout(() => {
-    if (isEditing.value && selectedChore.value) {
-      onSubmit()
-    }
-  }, 2000) // Auto-save after 2 seconds of inactivity
+    // This logic should be revised. Auto-submitting a form is usually not desired.
+    // Consider saving to a local draft instead.
+    // if (isEditing.value && selectedChore.value) {
+    //   console.log("Attempting auto-save (currently disabled logic)");
+    //   // onSubmit() // This is risky; onSubmit usually makes an API call
+    // }
+  }, 3000) // Auto-save after 3 seconds of inactivity
 }
 
-// Modify choreForm to trigger auto-save
 watch(choreForm, () => {
   if (isEditing.value) {
-    autoSaveForm()
+    hasUnsavedChanges.value = true; // Mark changes for onBeforeUnload prompt
+    // autoSaveForm() // Trigger auto-save logic if re-enabled
   }
 }, { deep: true })
+*/
 
-// Add confirmation before leaving with unsaved changes
 const hasUnsavedChanges = ref(false)
 
-watch(choreForm, () => {
-  hasUnsavedChanges.value = true
-}, { deep: true })
+watch(choreForm, (newValue, oldValue) => {
+  // Set hasUnsavedChanges only if the modal is open and it's not the initial population
+  if (showChoreModal.value && oldValue.name !== '') { // Basic check to avoid triggering on modal open
+    hasUnsavedChanges.value = true;
+  }
+}, { deep: true });
+
+watch(showChoreModal, (isOpen) => {
+  if (!isOpen) {
+    hasUnsavedChanges.value = false; // Reset when modal is closed
+  } else {
+    // When modal opens for a new chore, or for editing,
+    // we don't consider it "unsaved" until the user makes a change.
+    // The watch on choreForm handles detecting actual changes.
+    // Resetting here might be too early if form is pre-filled.
+  }
+});
+
 
 onBeforeUnmount(() => {
-  if (hasUnsavedChanges.value) {
-    const confirm = window.confirm('You have unsaved changes. Are you sure you want to leave?')
-    if (!confirm) {
-      // Prevent navigation
-      return false
+  if (hasUnsavedChanges.value && showChoreModal.value) { // Only prompt if modal is open with changes
+    const confirmLeave = window.confirm('You have unsaved changes in the chore form. Are you sure you want to leave?')
+    if (!confirmLeave) {
+      return false // This typically doesn't prevent component unmount in Vue 3 composition API directly
+      // but is a common pattern. For SPA, router guards are better.
     }
   }
 })
 
-// Watch for modal state changes
-watch(showChoreModal, (newVal) => {
-  console.log('Chore modal visibility changed:', newVal)
-})
-
-watch(showDeleteDialog, (newVal) => {
-  console.log('Delete dialog visibility changed:', newVal)
-})
-
-watch(showShortcutsModal, (newVal) => {
-  console.log('Shortcuts modal visibility changed:', newVal)
-})
 </script>
 
 <style>
-/* Modal styles - not scoped to allow for fixed positioning */
+/* Modal styles - (global, as before) */
 .modal-backdrop {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.6);
+  /* Slightly darker backdrop */
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
+  padding: 1rem;
+  /* Add padding for small screens so modal doesn't touch edges */
 }
 
 .modal-container {
@@ -815,11 +884,15 @@ watch(showShortcutsModal, (newVal) => {
   border-radius: 12px;
   border: 3px solid #111;
   box-shadow: 6px 6px 0 #111;
-  width: 90%;
+  width: 100%;
+  /* Let padding on backdrop control spacing */
   max-width: 600px;
   max-height: 90vh;
   overflow-y: auto;
-  position: relative;
+  display: flex;
+  /* Added for flex column layout */
+  flex-direction: column;
+  /* Added */
 }
 
 .modal-header {
@@ -828,6 +901,8 @@ watch(showShortcutsModal, (newVal) => {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-shrink: 0;
+  /* Prevent shrinking */
 }
 
 .modal-header h3 {
@@ -838,6 +913,10 @@ watch(showShortcutsModal, (newVal) => {
 
 .modal-body {
   padding: 1.5rem;
+  overflow-y: auto;
+  /* Allow body to scroll if content overflows */
+  flex-grow: 1;
+  /* Allow body to take available space */
 }
 
 .modal-footer {
@@ -846,11 +925,13 @@ watch(showShortcutsModal, (newVal) => {
   display: flex;
   justify-content: flex-end;
   gap: 1rem;
+  flex-shrink: 0;
+  /* Prevent shrinking */
 }
 
-/* Form styles */
+/* Form styles (global, as before) */
 .modal-form {
-  padding: 1.5rem;
+  /* padding: 1.5rem; No longer needed if modal-body has padding */
 }
 
 .form-group {
@@ -859,12 +940,15 @@ watch(showShortcutsModal, (newVal) => {
 
 .form-row {
   display: flex;
+  flex-wrap: wrap;
+  /* Allow wrapping on small screens */
   gap: 1rem;
   margin-bottom: 1.5rem;
 }
 
 .form-row .form-group {
-  flex: 1;
+  flex: 1 1 200px;
+  /* Allow items to grow and shrink, base size 200px */
   margin-bottom: 0;
 }
 
@@ -883,12 +967,15 @@ watch(showShortcutsModal, (newVal) => {
   font-size: 1rem;
   transition: all 0.2s ease;
   background: white;
+  box-sizing: border-box;
+  /* Ensure padding and border are inside width */
 }
 
 .form-input:focus {
   outline: none;
   border-color: #007bff;
-  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
+  /* Softer focus */
 }
 
 .form-input::placeholder {
@@ -900,6 +987,7 @@ watch(showShortcutsModal, (newVal) => {
   display: flex;
   gap: 1rem;
   margin-bottom: 1rem;
+  /* Was form-group, consistent */
 }
 
 .type-btn {
@@ -915,6 +1003,8 @@ watch(showShortcutsModal, (newVal) => {
   justify-content: center;
   gap: 0.5rem;
   transition: all 0.2s ease;
+  min-width: 120px;
+  /* Ensure buttons don't get too small */
 }
 
 .type-btn:hover {
@@ -929,8 +1019,11 @@ watch(showShortcutsModal, (newVal) => {
 /* Quick due dates styles */
 .quick-due-dates {
   display: flex;
+  flex-wrap: wrap;
+  /* Allow wrapping */
   gap: 0.5rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.75rem;
+  /* Increased margin */
 }
 
 .btn-outline {
@@ -941,13 +1034,15 @@ watch(showShortcutsModal, (newVal) => {
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
+  font-size: 0.9rem;
+  /* Slightly smaller for tertiary actions */
 }
 
 .btn-outline:hover {
   background: #f8f9fa;
 }
 
-/* Button styles */
+/* Button styles (global, as before) */
 .btn {
   padding: 0.75rem 1.5rem;
   border-radius: 8px;
@@ -958,22 +1053,25 @@ watch(showShortcutsModal, (newVal) => {
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
+  border: 2px solid transparent;
+  /* Base border */
 }
 
 .btn-primary {
   background: #111;
   color: white;
-  border: 2px solid #111;
+  border-color: #111;
 }
 
 .btn-primary:hover {
   background: #333;
+  border-color: #333;
 }
 
 .btn-neutral {
   background: white;
   color: #333;
-  border: 2px solid #111;
+  border-color: #111;
 }
 
 .btn-neutral:hover {
@@ -986,44 +1084,92 @@ watch(showShortcutsModal, (newVal) => {
   background: transparent;
   color: #666;
   cursor: pointer;
+  border-radius: 50%;
+  /* Make icon buttons round for better touch target */
   transition: all 0.2s ease;
+  line-height: 1;
+  /* Ensure icon is centered */
+}
+
+.btn-icon .material-icons {
+  font-size: 1.5rem;
+  /* Slightly larger icons */
 }
 
 .btn-icon:hover {
   color: #333;
+  background-color: rgba(0, 0, 0, 0.05);
+  /* Subtle hover background */
 }
 
-/* Dark mode support for modals and forms */
+.btn-danger {
+  background-color: #dc3545;
+  color: white;
+  border-color: #dc3545;
+}
+
+.btn-danger:hover {
+  background-color: #c82333;
+  border-color: #bd2130;
+}
+
+.btn-danger-icon {
+  /* For icon buttons that are dangerous */
+  color: #dc3545;
+}
+
+.btn-danger-icon:hover {
+  color: #c82333;
+  background-color: rgba(220, 53, 69, 0.1);
+}
+
+
+/* Dark mode support for modals and forms (as before, with minor tweaks if needed) */
 @media (prefers-color-scheme: dark) {
   .modal-container {
-    background: #1a1a1a;
-    border-color: #fff;
-    box-shadow: 6px 6px 0 #fff;
+    background: #1e1e1e;
+    /* Slightly different dark */
+    border-color: #f0f0f0;
+    /* Lighter border for dark */
+    box-shadow: 6px 6px 0 #f0f0f0;
   }
 
   .modal-header,
   .modal-footer {
-    border-color: #fff;
+    border-color: #444;
+    /* Darker separator */
+  }
+
+  .modal-header h3 {
+    color: #f0f0f0;
   }
 
   .form-group label {
-    color: #fff;
+    color: #ccc;
+    /* Lighter label */
   }
 
   .form-input {
     background: #2a2a2a;
-    border-color: #fff;
-    color: #fff;
+    border-color: #555;
+    /* Mid-tone border */
+    color: #f0f0f0;
+  }
+
+  .form-input:focus {
+    border-color: #0095ff;
+    /* Brighter focus for dark */
+    box-shadow: 0 0 0 3px rgba(0, 149, 255, 0.25);
   }
 
   .form-input::placeholder {
-    color: #666;
+    color: #777;
   }
 
   .type-btn {
     background: #2a2a2a;
-    border-color: #fff;
-    color: #fff;
+    border-color: #555;
+    color: #ccc;
   }
 
   .type-btn:hover {
@@ -1031,14 +1177,15 @@ watch(showShortcutsModal, (newVal) => {
   }
 
   .type-btn.active {
-    background: #fff;
+    background: #f0f0f0;
     color: #111;
+    border-color: #f0f0f0;
   }
 
   .btn-outline {
     background: #2a2a2a;
-    border-color: #fff;
-    color: #fff;
+    border-color: #555;
+    color: #ccc;
   }
 
   .btn-outline:hover {
@@ -1047,26 +1194,84 @@ watch(showShortcutsModal, (newVal) => {
 
   .btn-neutral {
     background: #2a2a2a;
-    color: #fff;
-    border-color: #fff;
+    color: #ccc;
+    border-color: #555;
   }
 
   .btn-neutral:hover {
     background: #333;
   }
 
+  .btn-primary {
+    /* Ensure primary button is distinct in dark mode */
+    background: #007bff;
+    color: white;
+    border-color: #007bff;
+  }
+
+  .btn-primary:hover {
+    background: #0056b3;
+    border-color: #0056b3;
+  }
+
   .btn-icon {
     color: #999;
   }
 
   .btn-icon:hover {
-    color: #fff;
+    color: #f0f0f0;
+    background-color: rgba(255, 255, 255, 0.08);
+  }
+
+  .btn-danger {
+    background-color: #d9534f;
+    border-color: #d9534f;
+  }
+
+  .btn-danger:hover {
+    background-color: #c9302c;
+    border-color: #c9302c;
+  }
+
+  .btn-danger-icon {
+    color: #d9534f;
+  }
+
+  .btn-danger-icon:hover {
+    color: #c9302c;
+    background-color: rgba(217, 83, 79, 0.1);
   }
 }
 </style>
 
 <style scoped>
-/* Base container styles */
+/* Utility classes */
+.hide-text-on-mobile {
+  display: inline;
+}
+
+.hide-text-on-mobile-sm {
+  display: inline;
+}
+
+@media (max-width: 480px) {
+
+  /* Stricter breakpoint for hiding text */
+  .hide-text-on-mobile {
+    display: none;
+  }
+}
+
+@media (max-width: 380px) {
+
+  /* Even Stricter breakpoint for New Chore */
+  .hide-text-on-mobile-sm {
+    display: none;
+  }
+}
+
+
+/* Base container styles (as before) */
 .neo-container {
   padding: 1rem;
   max-width: 1200px;
@@ -1074,9 +1279,8 @@ watch(showShortcutsModal, (newVal) => {
 }
 
 .page-padding {
-  padding: 1rem;
-  max-width: 1200px;
-  margin: 0 auto;
+  /* This class seems redundant if neo-container is always used */
+  /* padding: 1rem; max-width: 1200px; margin: 0 auto; */
 }
 
 /* Header styles */
@@ -1084,7 +1288,11 @@ watch(showShortcutsModal, (newVal) => {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  gap: 2rem;
+  /* Align items to the start of the cross axis */
+  flex-wrap: wrap;
+  /* Allow wrapping for very narrow screens if necessary */
+  gap: 1.5rem;
+  /* Adjusted gap */
   margin-bottom: 2rem;
   padding: 1.5rem;
   background: white;
@@ -1095,7 +1303,8 @@ watch(showShortcutsModal, (newVal) => {
 
 .header-left {
   flex: 1;
-  min-width: 0;
+  min-width: 280px;
+  /* Ensure it has some minimum width before wrapping */
 }
 
 .header-right {
@@ -1118,7 +1327,16 @@ watch(showShortcutsModal, (newVal) => {
   display: flex;
   gap: 0.5rem;
   flex-wrap: wrap;
+  /* Allow tabs to wrap if they don't fit */
+  /* Removed overflow-x: auto; flex-wrap is usually preferred if space allows items to stack */
+  /* If horizontal scrolling is desired over wrapping:
+  overflow-x: auto;
+  white-space: nowrap;
+  padding-bottom: 8px; // for scrollbar visibility
+  flex-wrap: nowrap;
+  */
   margin-bottom: 0.5rem;
+  /* if wrapped, needs some margin */
 }
 
 .neo-tab-btn {
@@ -1141,26 +1359,36 @@ watch(showShortcutsModal, (newVal) => {
   font-size: 1.1rem;
 }
 
-.neo-tab-btn:hover {
+.neo-tab-btn:hover:not(:disabled) {
   transform: translateY(-1px);
   box-shadow: 3px 3px 0 #111;
 }
 
+.neo-tab-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 .neo-tab-btn.active {
   background: #111;
   color: white;
   box-shadow: 3px 3px 0 #111;
+  /* Ensure active shadow is consistent */
 }
 
 .neo-tab-count {
   background: rgba(255, 255, 255, 0.2);
   color: white;
+  /* Assuming active tab has dark background */
   padding: 0.1em 0.5em;
   border-radius: 1rem;
   font-size: 0.8rem;
   font-weight: 600;
   min-width: 1.5rem;
+  /* Ensure it's circular even for 1 digit */
   text-align: center;
+  line-height: normal;
+  /* Adjust if text is not centered vertically */
 }
 
 .neo-tab-btn:not(.active) .neo-tab-count {
@@ -1171,7 +1399,8 @@ watch(showShortcutsModal, (newVal) => {
 /* View toggle styles */
 .neo-view-toggle {
   display: flex;
-  gap: 0.5rem;
+  gap: 0.25rem;
+  /* Reduced gap for tighter packing */
   background: #f5f5f5;
   padding: 0.25rem;
   border-radius: 8px;
@@ -1182,7 +1411,8 @@ watch(showShortcutsModal, (newVal) => {
   border: none;
   background: transparent;
   color: #333;
-  padding: 0.5rem 1rem;
+  padding: 0.5rem 0.75rem;
+  /* Adjusted padding */
   font-weight: 600;
   border-radius: 6px;
   cursor: pointer;
@@ -1192,10 +1422,20 @@ watch(showShortcutsModal, (newVal) => {
   gap: 0.5rem;
 }
 
-.neo-toggle-btn:hover {
+.neo-toggle-btn .material-icons {
+  font-size: 1.2rem;
+}
+
+
+.neo-toggle-btn:hover:not(.active):not(:disabled) {
   background: #e9ecef;
 }
 
+.neo-toggle-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 .neo-toggle-btn.active {
   background: #111;
   color: white;
@@ -1216,21 +1456,29 @@ watch(showShortcutsModal, (newVal) => {
   transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
 }
 
-.neo-action-button:hover {
-  transform: translateY(-2px);
-  box-shadow: 3px 5px 0 #111;
-}
-
-.neo-action-button:active {
-  transform: translateY(0);
-  box-shadow: 2px 2px 0 #111;
-}
-
 .neo-action-button .material-icons {
   font-size: 1.2rem;
 }
 
-/* Loading state styles */
+
+.neo-action-button:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 3px 5px 0 #111;
+}
+
+.neo-action-button:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: 2px 2px 0 #111;
+}
+
+.neo-action-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: 3px 3px 0 #111;
+}
+
+/* Loading state styles (as before) */
 .neo-loading-state {
   text-align: center;
   padding: 3rem 1rem;
@@ -1241,52 +1489,113 @@ watch(showShortcutsModal, (newVal) => {
   box-shadow: 6px 6px 0 #111;
 }
 
-/* Responsive styles */
+.loading-spinner {
+  /* Basic spinner */
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #111;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+  margin: 0 auto 1rem;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Empty State Styles */
+.empty-state {
+  text-align: center;
+  padding: 2rem 1rem;
+  margin: 2rem auto;
+  /* Centered if inside a flex/grid container */
+  border: 2px dashed #ccc;
+  border-radius: 12px;
+  background: #f9f9f9;
+  color: #555;
+  max-width: 500px;
+}
+
+.empty-state .empty-icon {
+  font-size: 3rem;
+  margin-bottom: 0.5rem;
+  color: #aaa;
+}
+
+.empty-state p {
+  font-size: 1.1rem;
+  margin-bottom: 1rem;
+}
+
+
+/* Responsive styles for header */
 @media (max-width: 768px) {
   .neo-list-header {
     flex-direction: column;
-    gap: 1rem;
+    gap: 1.5rem;
+    /* Consistent gap */
     padding: 1rem;
   }
 
+  .header-left {
+    width: 100%;
+    /* Take full width when stacked */
+  }
+
   .header-right {
     width: 100%;
     justify-content: space-between;
+    /* Spread items */
   }
 
   .neo-title {
-    font-size: 1.8rem;
+    font-size: 2rem;
+    /* Slightly smaller title on mobile */
   }
 
   .view-tabs {
-    overflow-x: auto;
-    padding-bottom: 0.5rem;
-    margin: 0 -0.5rem;
-    padding: 0 0.5rem;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
+    /* If choosing scroll over wrap for tabs: */
+    /* overflow-x: auto; white-space: nowrap; padding-bottom: 8px; flex-wrap: nowrap; */
+    /* -webkit-overflow-scrolling: touch; scrollbar-width: thin; */
   }
 
-  .view-tabs::-webkit-scrollbar {
-    display: none;
-  }
+  /* .view-tabs::-webkit-scrollbar { display: block; height: 5px; } */
+  /* .view-tabs::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px;} */
+
 
   .neo-tab-btn {
-    white-space: nowrap;
+    font-size: 0.85rem;
+    /* Slightly smaller tab text */
+    padding: 0.5rem 0.75rem;
   }
 
   .neo-view-toggle {
-    flex: 1;
-    justify-content: center;
+    /* flex: 1; Ensure it can take space if New Chore btn shrinks more */
   }
 
+  .neo-toggle-btn {
+    padding: 0.5rem 0.6rem;
+  }
+
+  /* More compact toggle buttons */
+
+
   .neo-action-button {
-    flex: 1;
-    justify-content: center;
+    /* flex-grow: 1; /* Allows it to grow if space available */
+    /* justify-content: center; /* Center content if text is hidden */
+    padding: 0.6rem 0.8rem;
+    /* More compact */
   }
 }
 
-/* Dark mode support */
+/* Dark mode support (as before) */
 @media (prefers-color-scheme: dark) {
   .neo-list-header {
     background: #1a1a1a;
@@ -1305,7 +1614,7 @@ watch(showShortcutsModal, (newVal) => {
     box-shadow: 2px 2px 0 #fff;
   }
 
-  .neo-tab-btn:hover {
+  .neo-tab-btn:hover:not(:disabled) {
     box-shadow: 3px 3px 0 #fff;
   }
 
@@ -1328,7 +1637,7 @@ watch(showShortcutsModal, (newVal) => {
     color: #fff;
   }
 
-  .neo-toggle-btn:hover {
+  .neo-toggle-btn:hover:not(.active):not(:disabled) {
     background: #333;
   }
 
@@ -1338,14 +1647,29 @@ watch(showShortcutsModal, (newVal) => {
   }
 
   .neo-action-button {
-    background: #2a2a2a;
+    background: #1a1a1a;
     border-color: #fff;
     color: #fff;
     box-shadow: 3px 3px 0 #fff;
   }
 
-  .neo-action-button:hover {
+  .neo-action-button:hover:not(:disabled) {
     box-shadow: 3px 5px 0 #fff;
+    background: #2c2c2c;
+  }
+
+  .empty-state {
+    background: #222;
+    border-color: #444;
+    color: #aaa;
+  }
+
+  .empty-state .empty-icon {
+    color: #555;
+  }
+
+  .loading-spinner {
+    border-top-color: #fff;
   }
 }
 
@@ -1370,8 +1694,15 @@ watch(showShortcutsModal, (newVal) => {
   font-size: 1.5rem;
   font-weight: 700;
   margin: 0;
+  text-align: center;
+  flex-grow: 1;
 }
 
+.calendar-header .btn-icon {
+  flex-shrink: 0;
+}
+
+
 .calendar-grid {
   display: flex;
   flex-direction: column;
@@ -1381,7 +1712,8 @@ watch(showShortcutsModal, (newVal) => {
 .calendar-weekdays {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  gap: 0.5rem;
+  gap: 0.25rem;
+  /* Smaller gap for weekdays */
   margin-bottom: 0.5rem;
 }
 
@@ -1389,7 +1721,8 @@ watch(showShortcutsModal, (newVal) => {
   text-align: center;
   font-weight: 600;
   color: #666;
-  padding: 0.5rem;
+  padding: 0.5rem 0.25rem;
+  font-size: 0.85rem;
 }
 
 .calendar-days {
@@ -1399,99 +1732,96 @@ watch(showShortcutsModal, (newVal) => {
 }
 
 .calendar-day {
-  aspect-ratio: 1;
+  /* aspect-ratio: 1; /* Can make cells too large or small. Consider min-height. */
+  min-height: 100px;
+  /* Ensure a minimum height for usability */
   border: 2px solid #111;
   border-radius: 12px;
   padding: 0.5rem;
   background: #f5f5f5;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.25rem;
+  /* Reduced gap inside day cell */
   transition: all 0.2s ease;
+  position: relative;
+  /* For positioning add button */
+  overflow: hidden;
+  /* Prevent content overflow */
 }
 
-.calendar-day:hover {
+.calendar-day:focus-within {
+  /* Highlight when day or its content is focused */
+  border-color: #007bff;
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, .25), 3px 3px 0 #111;
+}
+
+
+.calendar-day:hover:not(:focus-within) {
   transform: translateY(-2px);
   box-shadow: 3px 3px 0 #111;
 }
 
 .calendar-day.other-month {
-  opacity: 0.5;
+  opacity: 0.6;
   background: #eee;
 }
 
 .calendar-day.today {
-  background: #fff;
-  border-color: #007bff;
+  background: #fff0b3;
+  border-color: #ffc107;
 }
 
-.calendar-day.has-chores {
-  background: #fff;
+/* Highlight today */
+.calendar-day.has-chores:not(.today) {
+  background: #e9f5ff;
 }
 
+/* Subtle bg for days with chores */
+
+
 .day-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  position: relative;
 }
 
 .day-number {
   font-weight: 600;
-  font-size: 1.1rem;
+  font-size: 1rem;
 }
 
 .add-chore-indicator {
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--primary);
-  font-size: 1.2rem;
-  font-weight: 300;
-  opacity: 0;
-  transition: all 0.2s ease;
+  /* visibility: hidden; Replaced with subtle always visible */
+  opacity: 0.6;
+  padding: 0.1rem;
+  background: transparent;
+  border: none;
+  color: #007bff;
   cursor: pointer;
+  border-radius: 50%;
+  transition: all 0.2s ease;
+  line-height: 1;
 }
 
-.calendar-day:hover .add-chore-indicator {
-  opacity: 0.7;
+.add-chore-indicator .material-icons {
+  font-size: 1.3rem;
+}
+
+.calendar-day:hover .add-chore-indicator,
+.calendar-day:focus-within .add-chore-indicator,
+/* Show on focus as well */
+.add-chore-indicator:focus {
+  opacity: 1;
+  color: #0056b3;
+  transform: scale(1.1);
 }
 
 .add-chore-indicator:hover {
   color: #f57c00;
-  opacity: 1;
-  transform: translateY(-50%) scale(1.1);
+  /* Distinct hover for the button itself */
 }
 
-.btn-sm {
-  padding: 0.2rem;
-  min-width: 28px;
-  height: 28px;
-  background: transparent;
-  border: 1px solid #ddd;
-  color: #666;
-  transition: all 0.2s ease;
-}
-
-.btn-sm:hover {
-  background: #f8f9fa;
-  border-color: #ccc;
-  color: #333;
-}
-
-.btn-sm .material-icons {
-  font-size: 1.1rem;
-}
-
-.calendar-day:hover .btn-sm {
-  border-color: #ccc;
-}
 
 .day-chores {
   flex: 1;
@@ -1499,22 +1829,39 @@ watch(showShortcutsModal, (newVal) => {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
+  scrollbar-width: thin;
+  /* For Firefox */
 }
 
+.day-chores::-webkit-scrollbar {
+  width: 5px;
+}
+
+.day-chores::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 3px;
+}
+
+
 .calendar-chore-item {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.25rem 0.5rem;
+  gap: 0.3rem;
+  /* Smaller gap */
+  padding: 0.2rem 0.4rem;
+  /* Compact padding */
   background: white;
   border: 1px solid #ddd;
   border-radius: 6px;
   cursor: pointer;
   transition: all 0.2s ease;
+  font-size: 0.8rem;
+  /* Smaller font for chore items */
+  line-height: 1.3;
 }
 
 .calendar-chore-item:hover {
-  background: #f8f9fa;
+  background: #f0f8ff;
   transform: translateX(2px);
 }
 
@@ -1523,10 +1870,19 @@ watch(showShortcutsModal, (newVal) => {
   text-decoration: line-through;
 }
 
+.calendar-chore-item .chore-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-grow: 1;
+}
+
+
 .chore-status {
   width: 8px;
   height: 8px;
   border-radius: 50%;
+  flex-shrink: 0;
 }
 
 .chore-status.overdue {
@@ -1545,11 +1901,161 @@ watch(showShortcutsModal, (newVal) => {
   background: #6c757d;
 }
 
+@media (max-width: 768px) {
+  .calendar-view {
+    padding: 1rem;
+  }
+
+  .calendar-header h2 {
+    font-size: 1.25rem;
+  }
+
+  .calendar-days {
+    gap: 0.25rem;
+  }
+
+  .calendar-day {
+    min-height: 80px;
+    padding: 0.3rem;
+  }
+
+  .day-number {
+    font-size: 0.9rem;
+  }
+
+  .add-chore-indicator .material-icons {
+    font-size: 1.1rem;
+  }
+
+  .calendar-chore-item {
+    font-size: 0.75rem;
+    padding: 0.15rem 0.3rem;
+  }
+
+  .weekday {
+    font-size: 0.75rem;
+    padding: 0.3rem 0.1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .weekday {
+    font-size: 0.6rem;
+    /* Abbreviate to S, M, T... if needed */
+  }
+
+  .calendar-day {
+    min-height: 70px;
+  }
+
+  .day-chores {
+    gap: 0.15rem;
+  }
+}
+
+/* Dark Mode Calendar */
+@media (prefers-color-scheme: dark) {
+  .calendar-view {
+    background: #1a1a1a;
+    border-color: #fff;
+    box-shadow: 6px 6px 0 #fff;
+  }
+
+  .calendar-header h2 {
+    color: #fff;
+  }
+
+  .weekday {
+    color: #aaa;
+  }
+
+  .calendar-day {
+    background: #2a2a2a;
+    border-color: #555;
+  }
+
+  .calendar-day:hover:not(:focus-within) {
+    box-shadow: 3px 3px 0 #fff;
+  }
+
+  .calendar-day.other-month {
+    background: #222;
+    opacity: 0.5;
+  }
+
+  .calendar-day.today {
+    background: #4a3a00;
+    border-color: #ffc107;
+  }
+
+  .calendar-day.has-chores:not(.today) {
+    background: #1c2a3e;
+  }
+
+  .day-number {
+    color: #f0f0f0;
+  }
+
+  .add-chore-indicator {
+    color: #0095ff;
+  }
+
+  .add-chore-indicator:hover,
+  .calendar-day:hover .add-chore-indicator,
+  .add-chore-indicator:focus {
+    color: #66c0ff;
+  }
+
+  .calendar-chore-item {
+    background: #333;
+    border-color: #444;
+    color: #ccc;
+  }
+
+  .calendar-chore-item:hover {
+    background: #3a4a5a;
+  }
+
+  .calendar-chore-item.is-completed {
+    opacity: 0.5;
+  }
+
+  .chore-status.overdue {
+    background: #d9534f;
+  }
+
+  .chore-status.today {
+    background: #0095ff;
+  }
+
+  .chore-status.upcoming {
+    background: #5cb85c;
+  }
+
+  .chore-status.completed {
+    background: #777;
+  }
+
+  .day-chores::-webkit-scrollbar-thumb {
+    background: #555;
+  }
+
+  .calendar-day:focus-within {
+    border-color: #0095ff;
+    box-shadow: 0 0 0 2px rgba(0, 149, 255, .25), 3px 3px 0 #fff;
+  }
+}
+
+
 /* List View Styles */
+.chores-list-container {}
+
+/* Wrapper for list and empty state */
 .chores-grid {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 1rem;
+  /* Increased gap */
   margin-bottom: 2rem;
   width: 100%;
 }
@@ -1559,11 +2065,13 @@ watch(showShortcutsModal, (newVal) => {
   border-radius: 12px;
   border: 2px solid #111;
   box-shadow: 3px 3px 0 #111;
-  padding: 1rem 1.5rem;
+  padding: 1.25rem 1.5rem;
+  /* Slightly more padding */
   display: flex;
   gap: 1rem;
   transition: all 0.2s ease;
-  align-items: center;
+  align-items: flex-start;
+  /* Align status dot with top of content */
 }
 
 .chore-card:hover {
@@ -1572,117 +2080,181 @@ watch(showShortcutsModal, (newVal) => {
 }
 
 .chore-card.is-overdue {
-  border-color: #dc3545;
+  border-left: 5px solid #dc3545;
+  /* Use left border for overdue emphasis */
+  /* border-color: #dc3545; // This changes all borders */
 }
 
 .chore-card.is-completed {
   opacity: 0.7;
+  background: #f9f9f9;
+  /* Slightly different bg for completed */
 }
 
+.chore-card.is-completed .chore-header h3 {
+  text-decoration: line-through;
+  color: #555;
+}
+
+.chore-status {
+  margin-top: 0.25rem;
+  /* Align with first line of text */
+}
+
+
 .chore-content {
   flex: 1;
   min-width: 0;
   display: flex;
-  align-items: center;
-  gap: 1.5rem;
+  flex-direction: column;
+  /* Stack main info and actions vertically */
+  gap: 0.75rem;
 }
 
 .chore-main-info {
   flex: 1;
   min-width: 0;
   display: flex;
-  align-items: center;
-  gap: 1.5rem;
+  flex-direction: column;
+  /* Header and meta stacked */
+  gap: 0.5rem;
 }
 
 .chore-header {
-  flex: 1;
-  min-width: 0;
   display: flex;
-  align-items: center;
+  justify-content: space-between;
+  /* Push tags to the right */
+  align-items: flex-start;
+  /* Align items at the start */
   gap: 1rem;
+  width: 100%;
 }
 
 .chore-header h3 {
   margin: 0;
-  font-size: 1.1rem;
+  font-size: 1.2rem;
+  /* Slightly larger chore name */
   font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  /* white-space: nowrap; // Removed to allow wrapping */
+  /* overflow: hidden; text-overflow: ellipsis; // Removed */
+  word-break: break-word;
+  /* Allow long names to wrap */
+  flex-grow: 1;
 }
 
 .chore-tags {
   display: flex;
   gap: 0.5rem;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
+  /* Allow tags to wrap */
+  flex-shrink: 0;
+  /* Prevent tags from shrinking too much */
+  margin-top: 2px;
+  /* Align better with h3 */
 }
 
 .chore-type-tag,
 .chore-frequency-tag {
   padding: 0.2rem 0.6rem;
   border-radius: 1rem;
-  font-size: 0.8rem;
+  font-size: 0.75rem;
+  /* Smaller tags */
   font-weight: 600;
   white-space: nowrap;
+  border: 1px solid transparent;
+  /* For consistency */
 }
 
 .chore-type-tag.personal {
   background: #e3f2fd;
   color: #1976d2;
+  border-color: #b3e5fc;
 }
 
 .chore-type-tag.group {
   background: #f3e5f5;
   color: #7b1fa2;
+  border-color: #e1bee7;
 }
 
 .chore-frequency-tag {
   background: #e8f5e9;
   color: #2e7d32;
+  border-color: #c8e6c9;
 }
 
+
 .chore-meta {
   display: flex;
-  align-items: center;
-  gap: 1.5rem;
-  min-width: max-content;
+  flex-direction: column;
+  /* Stack meta items */
+  gap: 0.5rem;
+  font-size: 0.9rem;
+  /* Slightly larger meta text */
+  color: #555;
 }
 
-.chore-due-date,
-.chore-completed-date {
+.chore-meta>div {
   display: flex;
   align-items: center;
   gap: 0.4rem;
-  font-size: 0.85rem;
-  white-space: nowrap;
 }
 
-.chore-due-date.overdue {
+/* For icon and text alignment */
+.chore-meta .material-icons {
+  font-size: 1.1rem;
+  color: #777;
+}
+
+
+.chore-due-date.overdue-text,
+.chore-due-date .overdue {
+  /* For overdue text specifically */
   color: #dc3545;
+  font-weight: 500;
 }
 
-.chore-due-date.today {
+.chore-due-date.today-text {
   color: #007bff;
+  font-weight: 500;
 }
 
 .chore-description {
-  font-size: 0.85rem;
+  font-size: 0.9rem;
   color: #666;
-  margin-left: 1rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 200px;
+  line-height: 1.4;
+  /* white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; // Removed for better readability, allow wrapping */
 }
 
 .chore-card-actions {
   display: flex;
+  flex-wrap: wrap;
+  /* Allow actions to wrap */
   gap: 0.5rem;
-  margin-left: auto;
-  flex-shrink: 0;
+  align-items: center;
+  /* Align items vertically */
+  /* margin-left: auto; // No longer needed with flex-column parent */
+  align-self: flex-end;
+  /* Align actions to the right */
 }
 
+.chore-card-actions .btn {
+  font-size: 0.85rem;
+  padding: 0.4rem 0.8rem;
+}
+
+.chore-card-actions .btn-icon .material-icons {
+  font-size: 1.2rem;
+}
+
+/* Ensure icon size is consistent */
+.chore-card-actions .btn-icon .btn-text {
+  font-size: 0.85rem;
+}
+
+/* Match text size if shown */
+
+
 /* Dark Mode Support for List View */
 @media (prefers-color-scheme: dark) {
   .chore-card {
@@ -1693,10 +2265,58 @@ watch(showShortcutsModal, (newVal) => {
 
   .chore-card:hover {
     box-shadow: 4px 4px 0 #fff;
+    background: #202020;
+  }
+
+  .chore-card.is-completed {
+    background: #222;
+    opacity: 0.6;
+  }
+
+  .chore-card.is-completed .chore-header h3 {
+    color: #888;
+  }
+
+  .chore-header h3 {
+    color: #f0f0f0;
+  }
+
+  .chore-meta {
+    color: #aaa;
+  }
+
+  .chore-meta .material-icons {
+    color: #888;
   }
 
   .chore-description {
-    color: #999;
+    color: #bbb;
+  }
+
+  .chore-type-tag.personal {
+    background: #1c2a3e;
+    color: #82cfff;
+    border-color: #2a587f;
+  }
+
+  .chore-type-tag.group {
+    background: #301c30;
+    color: #e1a9f0;
+    border-color: #5c2a5c;
+  }
+
+  .chore-frequency-tag {
+    background: #1c301d;
+    color: #9fec9f;
+    border-color: #2a5c2b;
+  }
+
+  .chore-due-date.overdue-text {
+    color: #ff8a80;
+  }
+
+  .chore-due-date.today-text {
+    color: #80d8ff;
   }
 }
 
@@ -1704,49 +2324,55 @@ watch(showShortcutsModal, (newVal) => {
 @media (max-width: 768px) {
   .chores-grid {
     padding: 0;
+    gap: 0.75rem;
   }
 
   .chore-card {
-    padding: 0.75rem 1rem;
+    padding: 1rem;
   }
 
-  .chore-content {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.75rem;
+  .chore-header h3 {
+    font-size: 1.1rem;
   }
 
-  .chore-main-info {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.75rem;
-    width: 100%;
+  .chore-tags {
+    justify-content: flex-start;
+  }
+
+  /* Align tags to start on mobile */
+  .chore-card-actions {
+    align-self: stretch;
+    justify-content: flex-end;
+  }
+
+  /* Full width for actions row, content to right */
+}
+
+@media (max-width: 480px) {
+
+  /* On very small screens, hide text for Edit/Delete buttons in list view */
+  .chore-card-actions .btn-icon .hide-text-on-mobile {
+    display: none;
+  }
+
+  .chore-card-actions .btn-icon {
+    /* Ensure padding is just for icon */
+    padding: 0.5rem;
   }
 
   .chore-header {
     flex-direction: column;
     align-items: flex-start;
-    gap: 0.5rem;
-    width: 100%;
+    gap: 0.25rem;
   }
 
-  .chore-meta {
-    width: 100%;
-    justify-content: space-between;
-  }
-
-  .chore-description {
-    max-width: none;
-    margin-left: 0;
-  }
-
-  .chore-card-actions {
-    width: 100%;
-    justify-content: flex-end;
+  .chore-header h3 {
+    font-size: 1rem;
   }
 }
 
-/* Transition Animations */
+
+/* Transition Animations (as before) */
 .chore-list-enter-active,
 .chore-list-leave-active {
   transition: all 0.3s ease;
@@ -1755,14 +2381,15 @@ watch(showShortcutsModal, (newVal) => {
 .chore-list-enter-from,
 .chore-list-leave-to {
   opacity: 0;
-  transform: translateY(30px);
+  transform: translateY(20px) scale(0.95);
+  /* Slightly different animation */
 }
 
 .chore-list-move {
   transition: transform 0.3s ease;
 }
 
-/* Keyboard Shortcuts Modal Styles */
+/* Keyboard Shortcuts Modal Styles (as before) */
 .shortcuts-modal {
   max-width: 500px;
 }
@@ -1776,7 +2403,8 @@ watch(showShortcutsModal, (newVal) => {
 .shortcut-item {
   display: flex;
   align-items: center;
-  gap: 1.5rem;
+  gap: 1rem;
+  /* Reduced gap */
   padding: 0.75rem;
   background: #f5f5f5;
   border-radius: 8px;
@@ -1787,12 +2415,14 @@ watch(showShortcutsModal, (newVal) => {
   display: flex;
   gap: 0.5rem;
   align-items: center;
-  min-width: 120px;
+  min-width: 110px;
+  /* Adjusted min-width */
 }
 
 .shortcut-description {
   font-weight: 500;
   color: #333;
+  font-size: 0.9rem;
 }
 
 kbd {
@@ -1802,10 +2432,12 @@ kbd {
   padding: 0.2rem 0.5rem;
   font-family: monospace;
   font-size: 0.9rem;
-  box-shadow: 2px 2px 0 #111;
+  box-shadow: 1px 1px 0 #111;
+  /* Softer shadow for kbd */
+  color: #111;
 }
 
-/* Dark Mode Support for Shortcuts Modal */
+/* Dark Mode Support for Shortcuts Modal (as before) */
 @media (prefers-color-scheme: dark) {
   .shortcut-item {
     background: #2a2a2a;
@@ -1819,11 +2451,12 @@ kbd {
   kbd {
     background: #1a1a1a;
     border-color: #fff;
-    box-shadow: 2px 2px 0 #fff;
+    box-shadow: 1px 1px 0 #fff;
+    color: #fff;
   }
 }
 
-/* Remove old keyboard shortcuts help styles */
+/* Remove old keyboard shortcuts help styles (as before) */
 .keyboard-shortcuts-help,
 .shortcuts-tooltip {
   display: none;
diff --git a/fe/src/pages/ListDetailPage.vue b/fe/src/pages/ListDetailPage.vue
index 1ddac86..0f2d1d4 100644
--- a/fe/src/pages/ListDetailPage.vue
+++ b/fe/src/pages/ListDetailPage.vue
@@ -30,39 +30,35 @@
       </VCard>
       <VCard v-else-if="!itemsAreLoading && list.items.length === 0" variant="empty-state" empty-icon="clipboard"
         empty-title="No Items Yet!" empty-message="Add some items using the form below." class="mt-4" />
-      <VCard v-else class="mt-4">
-        <VList class="item-list-tight">
-          <VListItem v-for="item in list.items" :key="item.id" class="item-with-actions"
+      <div v-else class="neo-item-list-container mt-4">
+        <ul class="neo-item-list">
+          <li v-for="item in list.items" :key="item.id" class="neo-list-item"
             :class="{ 'bg-gray-100 opacity-70': item.is_complete }">
-            <template #default>
-              <div class="flex items-center flex-grow gap-2">
-                <VCheckbox :model-value="item.is_complete" @update:modelValue="confirmUpdateItem(item, $event)"
-                  :disabled="item.updating" :aria-label="item.name" />
-                <div class="flex-grow">
-                  <span class="item-name" :class="{ 'line-through': item.is_complete }">{{ item.name }}</span>
-                  <span v-if="item.quantity" class="text-sm text-gray-500 ml-1">× {{ item.quantity }}</span>
-                  <div v-if="item.is_complete" class="mt-1">
-                    <VInput type="number" :model-value="item.priceInput || ''"
-                      @update:modelValue="item.priceInput = $event" placeholder="Price" size="sm" class="w-24"
-                      step="0.01" @blur="updateItemPrice(item)"
-                      @keydown.enter.prevent="($event.target as HTMLInputElement).blur()" />
-                  </div>
-                </div>
-              </div>
-              <div class="flex items-center gap-1 ml-2">
-                <VButton :icon-only="true" size="sm" variant="neutral" @click.stop="editItem(item)"
-                  aria-label="Edit item">
+            <div class="neo-item-content">
+              <label class="neo-checkbox-label" @click.stop>
+                <input type="checkbox" :checked="item.is_complete"
+                  @change="(e) => confirmUpdateItem(item, (e.target as HTMLInputElement)?.checked ?? false)" />
+                <span class="item-name" :class="{ 'line-through': item.is_complete }">{{ item.name }}</span>
+                <span v-if="item.quantity" class="text-sm text-gray-500 ml-1">× {{ item.quantity }}</span>
+              </label>
+              <div class="neo-item-actions">
+                <button class="neo-icon-button neo-edit-button" @click.stop="editItem(item)" aria-label="Edit item">
                   <VIcon name="edit" />
-                </VButton>
-                <VButton :icon-only="true" size="sm" variant="neutral" color="danger"
-                  @click.stop="confirmDeleteItem(item)" :disabled="item.deleting" aria-label="Delete item">
+                </button>
+                <button class="neo-icon-button neo-delete-button" @click.stop="confirmDeleteItem(item)"
+                  :disabled="item.deleting" aria-label="Delete item">
                   <VIcon name="trash" />
-                </VButton>
+                </button>
               </div>
-            </template>
-          </VListItem>
-        </VList>
-      </VCard>
+            </div>
+            <div v-if="item.is_complete" class="neo-price-input">
+              <VInput type="number" :model-value="item.priceInput || ''" @update:modelValue="item.priceInput = $event"
+                placeholder="Price" size="sm" class="w-24" step="0.01" @blur="updateItemPrice(item)"
+                @keydown.enter.prevent="($event.target as HTMLInputElement).blur()" />
+            </div>
+          </li>
+        </ul>
+      </div>
 
       <!-- Add New Item Form -->
       <form @submit.prevent="onAddItem" class="add-item-form mt-4 p-4 border rounded-lg shadow flex items-center gap-2">
@@ -1295,18 +1291,21 @@ const handleExpenseCreated = (expense: any) => {
   overflow: hidden;
 }
 
+.neo-item-list-container {
+  border: 3px solid #111;
+  border-radius: 18px;
+  background: var(--light);
+  box-shadow: 6px 6px 0 #111;
+  overflow: hidden;
+}
+
 .neo-item-list {
   list-style: none;
   padding: 0;
-  margin: 0 0 2rem 0;
-  break-inside: avoid;
-  width: 100%;
-  background: var(--light);
-  display: flex;
-  flex-direction: column;
+  margin: 0;
 }
 
-.neo-item {
+.neo-list-item {
   padding: 1.2rem;
   margin-bottom: 0;
   border-bottom: 1px solid #eee;
@@ -1314,21 +1313,19 @@ const handleExpenseCreated = (expense: any) => {
   transition: background-color 0.1s ease-in-out;
 }
 
-.neo-item:last-child {
+.neo-list-item:last-child {
   border-bottom: none;
 }
 
-.neo-item:hover {
+.neo-list-item:hover {
   background-color: #f9f9f9;
 }
 
-.neo-item-complete {
-  background: #f9f9f9;
-}
-
 .neo-item-content {
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
 }
 
 .neo-checkbox-label {
@@ -1336,6 +1333,7 @@ const handleExpenseCreated = (expense: any) => {
   align-items: center;
   gap: 0.7em;
   cursor: pointer;
+  flex-grow: 1;
 }
 
 .neo-checkbox-label input[type="checkbox"] {
@@ -1346,35 +1344,11 @@ const handleExpenseCreated = (expense: any) => {
   border-radius: 4px;
 }
 
-.neo-item-details {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-}
-
 .item-name {
-  /* Added for VListItem content */
   font-size: 1.1rem;
   font-weight: 700;
 }
 
-.neo-item-complete .item-name {
-  /* Adjusted for VListItem */
-  text-decoration: line-through;
-  /* opacity: 0.6; Combined with bg-gray-100 opacity-70 on VListItem */
-}
-
-
-.neo-item-quantity {
-  font-size: 0.9rem;
-  color: #555;
-  margin-top: 0.2rem;
-}
-
-.neo-price-input {
-  margin-top: 0.5rem;
-}
-
 .neo-item-actions {
   display: flex;
   gap: 0.5rem;
@@ -1389,6 +1363,13 @@ const handleExpenseCreated = (expense: any) => {
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: transform 0.1s ease-out, opacity 0.1s ease-out;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.neo-icon-button:active {
+  transform: scale(0.98);
+  opacity: 0.9;
 }
 
 .neo-edit-button {
@@ -1400,308 +1381,35 @@ const handleExpenseCreated = (expense: any) => {
 }
 
 .neo-delete-button {
-  background: none;
-  border: none;
-  cursor: pointer;
   color: #e74c3c;
-  padding: 0.5rem;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: 0;
 }
 
 .neo-delete-button:hover {
   background: #fee;
 }
 
-.neo-actions {
-  display: flex;
-  gap: 1rem;
-  margin-bottom: 2rem;
-}
-
-.neo-action-button {
-  /* General button, mostly replaced by VButton */
-  background: #111;
-  color: white;
-  border: none;
-  border-radius: 8px;
-  padding: 0.6rem 1rem;
-  font-weight: 700;
-  cursor: pointer;
-}
-
-.neo-action-button:hover {
-  transform: translateY(-2px);
-  box-shadow: 3px 5px 0 #111;
-}
-
-.neo-action-button .icon {
-  width: 1.2rem;
-  height: 1.2rem;
-}
-
-.neo-disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.add-item-form {
-  /* Added for new form styling */
-  /* display: flex; (already on class) */
-  /* gap: 0.5rem; (already on class) */
-  /* margin-top: 1rem; (original was 2rem, now mt-4) */
-  /* padding: 1rem; (original was 1rem) */
-  /* border: 3px solid #111; (original was 3px) */
-  /* border-radius: 12px; (original was 12px) */
-  /* background: #f9f9f9; (original was #f9f9f9) */
-  /* box-shadow: 4px 4px 0 #111; (original was 4px) */
-}
-
-
-.neo-new-item-form {
-  /* Kept for reference, but form tag itself is now styled */
-  width: 100%;
-  gap: 10px;
-}
-
-.neo-text-input {
-  /* Not directly used by VInput, but kept for reference */
-  flex-grow: 1;
-  border: 2px solid #111;
-  border-radius: 8px;
-  padding: 0.8rem;
-  font-size: 1.1rem;
-  font-weight: 500;
-}
-
-.neo-new-item-input {
-  /* Not directly used by VInput, but kept for reference */
-  background: transparent;
-  border: none;
-  outline: none;
-  all: unset;
-  width: 100%;
-  font-size: 1.1rem;
-  font-weight: 500;
-  color: #444;
-  flex-grow: 1;
-}
-
-.neo-new-item-input::placeholder {
-  /* VInput handles its own placeholder styling */
-  color: #999;
-  font-weight: 500;
-}
-
-.neo-quantity-input {
-  /* Not directly used by VInput, but kept for reference */
-  width: 80px;
-  /* This specific width is now on VFormField for quantity */
-  border: 2px solid #111;
-  border-radius: 8px;
-  padding: 0.4rem;
-  font-size: 1rem;
-  font-weight: 500;
-}
-
-.neo-number-input {
-  /* For price input, now VInput with class="w-24" */
-  border: 2px solid #111;
-  border-radius: 6px;
-  padding: 0.5rem;
-  font-size: 1rem;
-  width: 100px;
-}
-
-.neo-add-button {
-  /* Replaced by VButton */
-  background: #111;
-  color: white;
-  border: none;
-  border-radius: 8px;
-  padding: 0 1rem;
-  font-weight: 700;
-  cursor: pointer;
-  min-width: 60px;
-  height: 2rem;
-}
-
-.neo-button {
-  /* General button, mostly replaced by VButton */
-  background: #111;
-  color: white;
-  border: none;
-  border-radius: 8px;
-  padding: 0.8rem 1.5rem;
-  font-weight: 700;
-  margin-top: 1rem;
-  cursor: pointer;
-}
-
-.new-item-input {
-  /* Styling for the old li wrapper of add item form, can be removed */
+.neo-price-input {
   margin-top: 0.5rem;
-  padding: 0.5rem;
-}
-
-/* Responsive adjustments */
-@media (max-width: 900px) {
-  .neo-container {
-    padding: 0.8rem;
-  }
-
-  .neo-title {
-    font-size: 1.8rem;
-  }
-
-  /* .neo-item { // VListItem might have its own padding
-    padding: 1rem;
-  } */
+  padding-left: 2.2em;
 }
 
 @media (max-width: 600px) {
-  .neo-container {
-    padding: 0.5rem;
-  }
-
-  .neo-list-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.8rem;
-  }
-
-  .neo-title {
-    font-size: 1.5rem;
-    margin-bottom: 0.5rem;
-  }
-
-  .neo-header-actions {
-    flex-wrap: wrap;
-    gap: 0.5rem;
-  }
-
-  .neo-action-button {
-    /* VButton has its own sizing */
-    padding: 0.8rem;
-    font-size: 0.9rem;
-  }
-
-  .neo-description {
-    font-size: 1rem;
-    margin-bottom: 1.5rem;
-  }
-
-  /* .neo-item { // VListItem
+  .neo-list-item {
     padding: 1rem;
-  } */
-
-  .item-name {
-    /* Adjusted for VListItem */
-    font-size: 1rem;
   }
 
-  .neo-item-quantity {
-    font-size: 0.85rem;
-  }
-
-  /* .neo-checkbox-label input[type="checkbox"] { // VCheckbox has its own styling
+  .neo-checkbox-label input[type="checkbox"] {
     width: 1.4em;
     height: 1.4em;
-  } */
+  }
+
+  .item-name {
+    font-size: 1rem;
+  }
 
   .neo-icon-button {
-    /* VButton icon-only replaces this */
     padding: 0.6rem;
   }
-
-  .add-item-form {
-    /* Adjusted form class */
-    flex-wrap: wrap;
-    gap: 0.5rem;
-  }
-
-  /* VInput placeholder styling is internal to VInput */
-  /* .neo-new-item-input {
-    width: 100%;
-    font-size: 1rem;
-  } */
-
-  /* VInput type number styling is internal or via props */
-  /* .neo-quantity-input {
-    width: 80px;
-    font-size: 0.9rem;
-  } */
-
-  /* VButton styling replaces this */
-  /* .neo-add-button {
-    width: 100%;
-    margin-top: 0.5rem;
-    padding: 0.8rem;
-  } */
-
-  /* Optimize modals for mobile */
-  .modal-container {
-    /* VModal has its own responsive sizing via props/CSS */
-    width: 95%;
-    max-height: 85vh;
-    margin: 1rem;
-  }
-
-  .modal-header {
-    /* VModal slot */
-    padding: 1rem;
-  }
-
-  .modal-body {
-    /* VModal slot */
-    padding: 1rem;
-  }
-
-  .modal-footer {
-    /* VModal slot */
-    padding: 1rem;
-  }
-
-  /* Improve touch targets - general principle, components should handle this */
-  /* button,
-  input[type="checkbox"],
-  .neo-checkbox-label {
-    min-height: 44px;
-  } */
-
-  /* Optimize loading states for mobile */
-  .neo-loading-state {
-    /* VSpinner used instead */
-    padding: 2rem 1rem;
-  }
-
-  .spinner-dots span {
-    /* VSpinner has its own dot styling */
-    width: 10px;
-    height: 10px;
-  }
-
-  /* Improve scrolling performance */
-  .item-list-tight {
-    /* Assuming VList with this class */
-    -webkit-overflow-scrolling: touch;
-  }
-
-  /* Optimize expense cards for mobile */
-  .neo-expense-card {
-    padding: 0.8rem;
-  }
-
-  .neo-expense-header {
-    font-size: 1.1rem;
-  }
-
-  .neo-split-item {
-    padding: 0.8rem 0;
-  }
 }
 
 /* Add smooth transitions for all interactive elements - VComponents have their own */
diff --git a/fe/src/pages/ListsPage.vue b/fe/src/pages/ListsPage.vue
index e325e10..8821d0b 100644
--- a/fe/src/pages/ListsPage.vue
+++ b/fe/src/pages/ListsPage.vue
@@ -8,11 +8,8 @@
       </template>
     </VAlert>
 
-    <VCard v-else-if="lists.length === 0"
-           variant="empty-state"
-           empty-icon="clipboard"
-           :empty-title="noListsMessage"
-    >
+    <VCard v-else-if="lists.length === 0 && !loading" variant="empty-state" empty-icon="clipboard"
+      :empty-title="noListsMessage">
       <template #default>
         <p v-if="!currentGroupId">Create a personal list or join a group to see shared lists.</p>
         <p v-else>This group doesn't have any lists yet.</p>
@@ -24,6 +21,10 @@
       </template>
     </VCard>
 
+    <div v-else-if="loading && lists.length === 0" class="loading-placeholder">
+      Loading lists...
+    </div>
+
     <div v-else>
       <div class="neo-lists-grid">
         <div v-for="list in lists" :key="list.id" class="neo-list-card"
@@ -33,22 +34,27 @@
           <div class="neo-list-header">{{ list.name }}</div>
           <div class="neo-list-desc">{{ list.description || 'No description' }}</div>
           <ul class="neo-item-list">
-            <li v-for="item in list.items" :key="item.id" class="neo-list-item">
+            <li v-for="item in list.items" :key="item.id || item.tempId" class="neo-list-item" :data-item-id="item.id"
+              :data-item-temp-id="item.tempId" :class="{ 'is-updating': item.updating }">
               <label class="neo-checkbox-label" @click.stop>
-                <input type="checkbox" :checked="item.is_complete" @change="toggleItem(list, item)" />
-                <span :class="{ 'neo-completed': item.is_complete }">{{ item.name }}</span>
+                <input type="checkbox" :checked="item.is_complete" @change="toggleItem(list, item)"
+                  :disabled="item.id === undefined && item.tempId !== undefined" />
+                <span class="checkbox-text-span"
+                  :class="{ 'neo-completed-static': item.is_complete && !item.updating }">{{
+                    item.name }}</span>
               </label>
             </li>
-            <li class="neo-list-item new-item-input">
+            <li class="neo-list-item new-item-input-container">
               <label class="neo-checkbox-label">
                 <input type="checkbox" disabled />
-                <input type="text" class="neo-new-item-input" placeholder="Add new item..."
-                  @keyup.enter="addNewItem(list, $event)" @blur="addNewItem(list, $event)" @click.stop />
+                <input type="text" class="neo-new-item-input" placeholder="Add new item..." ref="newItemInputRefs"
+                  :data-list-id="list.id" @keyup.enter="addNewItem(list, $event)"
+                  @blur="handleNewItemBlur(list, $event)" @click.stop />
               </label>
             </li>
           </ul>
         </div>
-        <div class="neo-create-list-card" @click="showCreateModal = true">
+        <div class="neo-create-list-card" @click="showCreateModal = true" ref="createListCardRef">
           + Create a new list
         </div>
       </div>
@@ -59,15 +65,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed, watch, onUnmounted } from 'vue';
+import { ref, onMounted, computed, watch, onUnmounted, nextTick } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { apiClient, API_ENDPOINTS } from '@/config/api';
-import CreateListModal from '@/components/CreateListModal.vue';
+import { apiClient, API_ENDPOINTS } from '@/config/api'; // Adjust path as needed
+import CreateListModal from '@/components/CreateListModal.vue'; // Adjust path as needed
 import { useStorage } from '@vueuse/core';
-import VAlert from '@/components/valerie/VAlert.vue';
-import VCard from '@/components/valerie/VCard.vue';
-import VButton from '@/components/valerie/VButton.vue';
-// VSpinner might not be needed here unless other parts use it directly
+import VAlert from '@/components/valerie/VAlert.vue';   // Adjust path as needed
+import VCard from '@/components/valerie/VCard.vue';     // Adjust path as needed
+import VButton from '@/components/valerie/VButton.vue';   // Adjust path as needed
+import { animate } from 'motion';
 
 interface List {
   id: number;
@@ -88,29 +94,32 @@ interface Group {
 }
 
 interface Item {
-  id: number;
+  id: number | string;
+  tempId?: string;
   name: string;
   quantity?: string | number;
   is_complete: boolean;
   price?: number | null;
   version: number;
   updating?: boolean;
+  created_at?: string;
   updated_at: string;
 }
 
 const props = defineProps<{
-  groupId?: number | string; // Prop for when ListsPage is embedded (e.g. in GroupDetailPage)
+  groupId?: number | string;
 }>();
 
 const route = useRoute();
 const router = useRouter();
 
-const loading = ref(false);
+const loading = ref(true);
 const error = ref<string | null>(null);
 const lists = ref<(List & { items: Item[] })[]>([]);
 const allFetchedGroups = ref<Group[]>([]);
 const currentViewedGroup = ref<Group | null>(null);
 const showCreateModal = ref(false);
+const newItemInputRefs = ref<HTMLInputElement[]>([]);
 
 const currentGroupId = computed<number | null>(() => {
   const idFromProp = props.groupId;
@@ -129,19 +138,17 @@ const fetchCurrentViewGroupName = async () => {
     currentViewedGroup.value = null;
     return;
   }
-  // Try to find in already fetched groups first
   const found = allFetchedGroups.value.find(g => g.id === currentGroupId.value);
   if (found) {
     currentViewedGroup.value = found;
     return;
   }
-  // If not found, fetch it specifically (might happen if navigating directly)
   try {
     const response = await apiClient.get(API_ENDPOINTS.GROUPS.BY_ID(String(currentGroupId.value)));
     currentViewedGroup.value = response.data as Group;
   } catch (err) {
     console.error(`Failed to fetch group name for ID ${currentGroupId.value}:`, err);
-    currentViewedGroup.value = null; // Set to null if fetch fails
+    currentViewedGroup.value = null;
   }
 };
 
@@ -171,45 +178,46 @@ const fetchAllAccessibleGroups = async () => {
   }
 };
 
-// Cache lists in localStorage
 const cachedLists = useStorage<(List & { items: Item[] })[]>('cached-lists', []);
 const cachedTimestamp = useStorage<number>('cached-lists-timestamp', 0);
-const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes in milliseconds
+const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
 
 const loadCachedData = () => {
   const now = Date.now();
   if (cachedLists.value.length > 0 && (now - cachedTimestamp.value) < CACHE_DURATION) {
-    lists.value = cachedLists.value;
+    lists.value = JSON.parse(JSON.stringify(cachedLists.value));
+    loading.value = false;
   }
 };
 
 const fetchLists = async () => {
+  loading.value = true;
+  error.value = null;
   try {
     const endpoint = currentGroupId.value
       ? API_ENDPOINTS.GROUPS.LISTS(String(currentGroupId.value))
       : API_ENDPOINTS.LISTS.BASE;
     const response = await apiClient.get(endpoint);
     lists.value = response.data as (List & { items: Item[] })[];
-
-    // Update cache
-    cachedLists.value = response.data;
+    cachedLists.value = JSON.parse(JSON.stringify(response.data));
     cachedTimestamp.value = Date.now();
   } catch (err: unknown) {
     error.value = err instanceof Error ? err.message : 'Failed to fetch lists.';
     console.error(error.value, err);
-    // If we have cached data, keep showing it even if refresh failed
-    if (cachedLists.value.length === 0) {
-      lists.value = [];
-    }
+    if (cachedLists.value.length === 0) lists.value = [];
+  } finally {
+    loading.value = false;
   }
 };
 
 const fetchListsAndGroups = async () => {
+  loading.value = true;
   await Promise.all([
     fetchLists(),
     fetchAllAccessibleGroups()
   ]);
   await fetchCurrentViewGroupName();
+  loading.value = false;
 };
 
 const availableGroupsForModal = computed(() => {
@@ -225,16 +233,20 @@ const getGroupName = (groupId?: number | null): string | undefined => {
 }
 
 const onListCreated = (newList: List & { items: Item[] }) => {
-  lists.value = [...lists.value, newList];
-  // Update cache
-  cachedLists.value = lists.value;
+  lists.value.push(newList);
+  cachedLists.value = JSON.parse(JSON.stringify(lists.value));
   cachedTimestamp.value = Date.now();
+  // Consider animating new list card in if desired
 };
 
-const toggleItem = async (list: (List & { items: Item[] }), item: Item) => {
-  const original = item.is_complete;
+const toggleItem = async (list: List, item: Item) => {
+  if (typeof item.id === 'string' && item.id.startsWith('temp-')) {
+    return;
+  }
+  const originalIsComplete = item.is_complete;
   item.is_complete = !item.is_complete;
   item.updating = true;
+
   try {
     await apiClient.put(
       API_ENDPOINTS.LISTS.ITEM(String(list.id), String(item.id)),
@@ -248,34 +260,86 @@ const toggleItem = async (list: (List & { items: Item[] }), item: Item) => {
     );
     item.version++;
   } catch (err) {
-    item.is_complete = original;
+    item.is_complete = originalIsComplete;
     console.error('Failed to update item:', err);
+    const itemElement = document.querySelector(`.neo-list-item[data-item-id="${item.id}"]`);
+    if (itemElement) {
+      itemElement.classList.add('error-flash');
+      setTimeout(() => itemElement.classList.remove('error-flash'), 800);
+    }
   } finally {
     item.updating = false;
   }
 };
 
-const addNewItem = async (list: (List & { items: Item[] }), event: Event) => {
-  const input = event.target as HTMLInputElement;
-  const itemName = input.value.trim();
+const addNewItem = async (list: List, event: Event) => {
+  const inputElement = event.target as HTMLInputElement;
+  const itemName = inputElement.value.trim();
 
   if (!itemName) {
-    input.value = '';
+    if (event.type === 'blur') inputElement.value = '';
     return;
   }
 
+  const localTempId = `temp-${Date.now()}`;
+  const newItem: Item = {
+    id: localTempId,
+    tempId: localTempId,
+    name: itemName,
+    is_complete: false,
+    version: 0,
+    updating: true,
+    created_at: new Date().toISOString(),
+    updated_at: new Date().toISOString(),
+  };
+
+  list.items.push(newItem);
+  const originalInputValue = inputElement.value;
+  inputElement.value = '';
+  inputElement.disabled = true;
+
+  await nextTick();
+
+  const newItemLiElement = document.querySelector(`.neo-list-item[data-item-temp-id="${localTempId}"]`);
+  if (newItemLiElement) {
+    newItemLiElement.classList.add('item-appear');
+  }
+
   try {
     const response = await apiClient.post(API_ENDPOINTS.LISTS.ITEMS(String(list.id)), {
       name: itemName,
       is_complete: false,
-      quantity: null,
-      price: null
     });
+    const addedItemFromServer = response.data as Item;
 
-    list.items.push(response.data as Item);
-    input.value = '';
+    const itemIndex = list.items.findIndex(i => i.tempId === localTempId);
+    if (itemIndex !== -1) {
+      list.items.splice(itemIndex, 1, {
+        ...newItem,
+        ...addedItemFromServer,
+        updating: false,
+        tempId: undefined
+      });
+    }
+    if (event.type === 'keyup' && (event as KeyboardEvent).key === 'Enter') {
+      inputElement.disabled = false;
+      inputElement.focus();
+    } else {
+      inputElement.disabled = false;
+    }
   } catch (err) {
     console.error('Failed to add new item:', err);
+    list.items = list.items.filter(i => i.tempId !== localTempId);
+    inputElement.value = originalInputValue;
+    inputElement.disabled = false;
+    animate(inputElement, { borderColor: ['red', '#ccc'] }, { duration: 0.5 });
+  }
+};
+
+const handleNewItemBlur = (list: List, event: Event) => {
+  const inputElement = event.target as HTMLInputElement;
+  if (inputElement.value.trim()) {
+    addNewItem(list, event);
   }
 };
 
@@ -290,10 +354,9 @@ const navigateToList = (listId: number) => {
     };
     sessionStorage.setItem('listDetailShell', JSON.stringify(listShell));
   }
-  router.push({ name: 'ListDetail', params: { id: listId } });
+  router.push({ name: 'ListDetail', params: { id: listId } }); // Ensure 'ListDetail' route exists
 };
 
-// Add pre-fetching functionality using Intersection Observer
 const prefetchListDetails = async (listId: number) => {
   try {
     const response = await apiClient.get(API_ENDPOINTS.LISTS.BY_ID(String(listId)));
@@ -304,9 +367,11 @@ const prefetchListDetails = async (listId: number) => {
   }
 };
 
-// Setup Intersection Observer for pre-fetching
+let intersectionObserver: IntersectionObserver | null = null;
 const setupIntersectionObserver = () => {
-  const observer = new IntersectionObserver((entries) => {
+  if (intersectionObserver) intersectionObserver.disconnect();
+
+  intersectionObserver = new IntersectionObserver((entries) => {
     entries.forEach(entry => {
       if (entry.isIntersecting) {
         const listId = entry.target.getAttribute('data-list-id');
@@ -319,54 +384,71 @@ const setupIntersectionObserver = () => {
       }
     });
   }, {
-    rootMargin: '50px 0px', // Start loading when card is 50px from viewport
-    threshold: 0.1 // Trigger when at least 10% of the card is visible
+    rootMargin: '100px 0px',
+    threshold: 0.01
   });
 
-  // Observe all list cards
-  document.querySelectorAll('.neo-list-card').forEach(card => {
-    observer.observe(card);
+  nextTick(() => {
+    document.querySelectorAll('.neo-list-card[data-list-id]').forEach(card => {
+      intersectionObserver!.observe(card);
+    });
   });
-
-  return observer;
 };
 
-// Touch feedback state
 const touchActiveListId = ref<number | null>(null);
-
-const handleTouchStart = (listId: number) => {
-  touchActiveListId.value = listId;
-};
-
-const handleTouchEnd = () => {
-  touchActiveListId.value = null;
-};
+const handleTouchStart = (listId: number) => { touchActiveListId.value = listId; };
+const handleTouchEnd = () => { touchActiveListId.value = null; };
 
 onMounted(() => {
-  // Load cached data immediately
   loadCachedData();
-
-  // Then fetch fresh data in background
   fetchListsAndGroups().then(() => {
-    // Setup intersection observer after lists are loaded
-    const observer = setupIntersectionObserver();
-
-    // Cleanup observer on component unmount
-    onUnmounted(() => {
-      observer.disconnect();
-    });
+    if (lists.value.length > 0) {
+      setupIntersectionObserver();
+    }
   });
 });
 
-// Watch for changes in groupId
 watch(currentGroupId, () => {
   loadCachedData();
-  fetchListsAndGroups();
+  fetchListsAndGroups().then(() => {
+    if (lists.value.length > 0) {
+      setupIntersectionObserver();
+    }
+  });
+});
+
+watch(() => lists.value.length, (newLength, oldLength) => {
+  if (newLength > 0 && oldLength === 0 && !loading.value) {
+    setupIntersectionObserver();
+  }
+  if (newLength > 0) {
+    nextTick(() => {
+      document.querySelectorAll('.neo-list-card[data-list-id]').forEach(card => {
+        if (intersectionObserver) {
+          intersectionObserver.observe(card);
+        }
+      });
+    });
+  }
+});
+
+onUnmounted(() => {
+  if (intersectionObserver) {
+    intersectionObserver.disconnect();
+  }
 });
 
 </script>
 
 <style scoped>
+/* Ensure --light is defined in your global styles or here, e.g., :root { --light: #fff; } */
+.loading-placeholder {
+  text-align: center;
+  padding: 2rem;
+  font-size: 1.2rem;
+  color: #555;
+}
+
 .page-padding {
   padding: 1rem;
   max-width: 1200px;
@@ -377,54 +459,56 @@ watch(currentGroupId, () => {
   margin-bottom: 1.5rem;
 }
 
-/* Masonry grid for cards */
 .neo-lists-grid {
   columns: 3 500px;
   column-gap: 2rem;
   margin-bottom: 2rem;
 }
 
-/* Card styles */
 .neo-list-card,
 .neo-create-list-card {
   break-inside: avoid;
   border-radius: 18px;
-  box-shadow: 6px 6px 0 #111;
+  box-shadow: 6px 6px 0 var(--dark);
   width: 100%;
   margin: 0 0 2rem 0;
   background: var(--light);
   display: flex;
   flex-direction: column;
-  /* padding: 2rem 2rem 1.5rem 2rem;
-  padding: 2rem 2rem 1.5rem 2rem; */
-  /* padding-inline: ; */
+  border: 3px solid var(--dark);
+  padding: 1.5rem;
   cursor: pointer;
-  /* transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out; */
-  border: 3px solid #111;
-  padding-inline: 1rem;
+  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .neo-list-card:hover {
-  /* transform: translateY(-3px); */
-  box-shadow: 6px 9px 0 #111;
-  /* padding: 2rem 2rem 1.5rem 2rem; */
-  border: 3px solid #111;
+  transform: translateY(-4px);
+  box-shadow: 6px 10px 0 var(--dark);
+  /* border-color: var(--secondary); */
+}
+
+.neo-list-card.touch-active {
+  transform: scale(0.97);
+  box-shadow: 3px 3px 0 var(--dark);
+  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
 }
 
 .neo-list-header {
-  padding-block-start: 1rem;
   font-weight: 900;
   font-size: 1.25rem;
   margin-bottom: 0.5rem;
   letter-spacing: 0.5px;
-  text-transform: none;
+  color: var(--dark);
 }
 
 .neo-list-desc {
   font-size: 1rem;
-  color: #444;
+  color: var(--dark);
+  opacity: 0.7;
   margin-bottom: 1.2rem;
   font-weight: 500;
+  line-height: 1.4;
 }
 
 .neo-item-list {
@@ -434,57 +518,204 @@ watch(currentGroupId, () => {
 }
 
 .neo-list-item {
-  margin-bottom: 1.1rem;
-  font-size: 1.1rem;
-  font-weight: 700;
+  margin-bottom: 0.8rem;
+  font-size: 1.05rem;
+  font-weight: 600;
   display: flex;
   align-items: center;
+  position: relative;
+}
+
+.neo-list-item.is-updating .checkbox-text-span {
+  opacity: 0.6;
 }
 
 .neo-checkbox-label {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto 1fr;
   align-items: center;
-  gap: 0.7em;
+  gap: 0.8em;
   cursor: pointer;
+  position: relative;
+  width: fit-content;
+  font-weight: 500;
+  color: #414856;
+  transition: color 0.3s ease;
 }
 
 .neo-checkbox-label input[type="checkbox"] {
-  width: 1.2em;
-  height: 1.2em;
-  accent-color: #111;
-  border: 2px solid #111;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  position: relative;
+  height: 18px;
+  width: 18px;
+  outline: none;
+  border: 2px solid var(--dark);
+  margin: 0;
+  cursor: pointer;
+  background: var(--light);
   border-radius: 4px;
-  margin-right: 0.5em;
+  display: grid;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.neo-completed {
-  text-decoration: line-through;
-  opacity: 0.5;
+.neo-checkbox-label input[type="checkbox"]:hover {
+  border-color: var(--secondary);
+  background: var(--light);
+  transform: scale(1.05);
+}
+
+.neo-checkbox-label input[type="checkbox"]::before,
+.neo-checkbox-label input[type="checkbox"]::after {
+  content: "";
+  position: absolute;
+  height: 2px;
+  background: var(--primary);
+  border-radius: 2px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.neo-checkbox-label input[type="checkbox"]::before {
+  width: 0px;
+  right: 55%;
+  transform-origin: right bottom;
+}
+
+.neo-checkbox-label input[type="checkbox"]::after {
+  width: 0px;
+  left: 45%;
+  transform-origin: left bottom;
+}
+
+.neo-checkbox-label input[type="checkbox"]:checked {
+  border-color: var(--primary);
+  background: var(--light);
+  transform: scale(1.05);
+}
+
+.neo-checkbox-label input[type="checkbox"]:checked::before {
+  opacity: 1;
+  animation: check-01 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.neo-checkbox-label input[type="checkbox"]:checked::after {
+  opacity: 1;
+  animation: check-02 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.checkbox-text-span {
+  position: relative;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.checkbox-text-span::before,
+.checkbox-text-span::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.checkbox-text-span::before {
+  height: 2px;
+  width: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: var(--secondary);
+  border-radius: 2px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.checkbox-text-span::after {
+  content: '';
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  top: 50%;
+  left: 130%;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  background: var(--accent);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.neo-checkbox-label input[type="checkbox"]:checked+.checkbox-text-span {
+  color: var(--dark);
+  opacity: 0.7;
+  text-decoration: line-through var(--dark);
+  transform: translateX(4px);
+}
+
+.neo-checkbox-label input[type="checkbox"]:checked+.checkbox-text-span::after {
+  animation: firework 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.15s;
+}
+
+.neo-completed-static {
+  color: var(--dark);
+  opacity: 0.7;
+  text-decoration: line-through var(--dark);
+}
+
+.new-item-input-container .neo-checkbox-label {
+  width: 100%;
+}
+
+.neo-new-item-input {
+  all: unset;
+  width: 100%;
+  font-size: 1.05rem;
+  font-weight: 500;
+  color: #444;
+  padding: 0.2rem 0;
+  border-bottom: 1px dashed #ccc;
+  transition: border-color 0.2s ease;
+}
+
+.neo-new-item-input:focus {
+  border-bottom-color: var(--secondary);
+}
+
+.neo-new-item-input::placeholder {
+  color: #999;
+  font-weight: 400;
+}
+
+.neo-new-item-input:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  background-color: transparent;
 }
 
 .neo-create-list-card {
-  border: 3px dashed #111;
+  border: 3px dashed var(--dark);
   background: var(--light);
   padding: 2.5rem 0;
   text-align: center;
   font-weight: 900;
   font-size: 1.1rem;
-  color: #222;
+  color: var(--dark);
   cursor: pointer;
-  margin-top: 0;
-  transition: background 0.1s;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 120px;
   margin-bottom: 2.5rem;
+  transition: all 0.15s ease-out;
 }
 
 .neo-create-list-card:hover {
-  background: #f0f0f0;
+  background: var(--light);
+  transform: translateY(-3px) scale(1.01);
+  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.05);
+  /* border-color: var(--secondary); */
+  color: var(--primary);
 }
 
-/* Responsive adjustments */
 @media (max-width: 900px) {
   .neo-lists-grid {
     columns: 2 260px;
@@ -513,7 +744,6 @@ watch(currentGroupId, () => {
     margin-bottom: 1rem;
     padding: 1rem;
     font-size: 1rem;
-    /* Optimize touch target size */
     min-height: 80px;
   }
 
@@ -527,52 +757,131 @@ watch(currentGroupId, () => {
     margin-bottom: 0.8rem;
   }
 
-  /* Touch feedback */
-  .neo-list-card.touch-active {
-    transform: scale(0.98);
-    transition: transform 0.1s ease-out;
-  }
-
-  /* Optimize checkbox size for touch */
   .neo-checkbox-label input[type="checkbox"] {
     width: 1.4em;
     height: 1.4em;
   }
 
-  /* Optimize item spacing for touch */
   .neo-list-item {
-    padding: 0.8rem 0;
-    margin-bottom: 0.5rem;
+    /* padding: 0.8rem 0; */
+    /* Removed as margin-bottom is used */
+    margin-bottom: 0.7rem;
+    /* Adjusted for mobile */
   }
 }
 
-.neo-new-item-input {
-  outline: none;
-  border: none;
-  margin-top: 0.5rem;
-  padding: 0.5rem;
-  background-color: var(--light) !important;
+@keyframes check-01 {
+  0% {
+    width: 4px;
+    top: auto;
+    transform: rotate(0);
+  }
+
+  50% {
+    width: 0px;
+    top: auto;
+    transform: rotate(0);
+  }
+
+  51% {
+    width: 0px;
+    top: 8px;
+    transform: rotate(45deg);
+  }
+
+  100% {
+    width: 6px;
+    top: 8px;
+    transform: rotate(45deg);
+  }
 }
 
-.neo-new-item-input input[type="text"] {
-  border: none;
-  outline: none;
-  all: unset;
-  width: 100%;
-  font-size: 1.1rem;
-  font-weight: 700;
-  color: #444;
+@keyframes check-02 {
+  0% {
+    width: 4px;
+    top: auto;
+    transform: rotate(0);
+  }
+
+  50% {
+    width: 0px;
+    top: auto;
+    transform: rotate(0);
+  }
+
+  51% {
+    width: 0px;
+    top: 8px;
+    transform: rotate(-45deg);
+  }
+
+  100% {
+    width: 11px;
+    top: 8px;
+    transform: rotate(-45deg);
+  }
 }
 
-.neo-new-item-input input[type="text"]::placeholder {
-  color: #999;
-  font-weight: 500;
+@keyframes firework {
+  0% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(0.5);
+    box-shadow:
+      0 0 0 0 var(--accent),
+      0 0 0 0 var(--accent),
+      0 0 0 0 var(--accent),
+      0 0 0 0 var(--accent),
+      0 0 0 0 var(--accent),
+      0 0 0 0 var(--accent);
+  }
+
+  50% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(1.2);
+    box-shadow:
+      0 -15px 0 0 var(--accent),
+      14px -8px 0 0 var(--accent),
+      14px 8px 0 0 var(--accent),
+      0 15px 0 0 var(--accent),
+      -14px 8px 0 0 var(--accent),
+      -14px -8px 0 0 var(--accent);
+  }
 }
 
-/* Add smooth transitions for all interactive elements */
-.neo-list-card {
-  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
-  -webkit-tap-highlight-color: transparent;
-  /* Remove tap highlight on iOS */
+@keyframes error-flash {
+  0% {
+    background-color: var(--danger);
+    opacity: 0.2;
+  }
+
+  100% {
+    background-color: transparent;
+    opacity: 0;
+  }
+}
+
+@keyframes item-appear {
+  0% {
+    opacity: 0;
+    transform: translateY(-15px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.error-flash {
+  animation: error-flash 0.8s ease-out forwards;
+}
+
+.item-appear {
+  animation: item-appear 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
 }
 </style>
\ No newline at end of file
diff --git a/fe/src/types/chore.ts b/fe/src/types/chore.ts
index 5ed06ce..af1c3f7 100644
--- a/fe/src/types/chore.ts
+++ b/fe/src/types/chore.ts
@@ -5,12 +5,12 @@ export type ChoreType = 'personal' | 'group'
 
 export interface Chore {
   id: number
-  group_id?: number
+  group_id?: number | null
   name: string
-  description?: string
+  description?: string | null
   created_by_id: number
   frequency: ChoreFrequency
-  custom_interval_days?: number
+  custom_interval_days?: number | null
   next_due_date: string
   last_completed_at?: string
   created_at: string
@@ -22,36 +22,23 @@ export interface Chore {
     email: string
   }
   assignments?: ChoreAssignment[]
+  is_completed: boolean
+  completed_at: string | null
 }
 
-export interface ChoreCreate {
-  name: string
-  description?: string
-  frequency: ChoreFrequency
-  custom_interval_days?: number
-  next_due_date: string
-  type: ChoreType
-  group_id?: number
-}
+export interface ChoreCreate extends Omit<Chore, 'id'> { }
 
-export interface ChoreUpdate {
-  name?: string
-  description?: string
-  frequency?: ChoreFrequency
-  custom_interval_days?: number
-  next_due_date?: string
-  type?: ChoreType
-  group_id?: number
-}
+export interface ChoreUpdate extends Partial<ChoreCreate> { }
 
 // Chore Assignment Types
 export interface ChoreAssignment {
   id: number
   chore_id: number
-  assigned_to_user_id: number
+  assigned_to_id: number
+  assigned_by_id: number
   due_date: string
   is_complete: boolean
-  completed_at?: string
+  completed_at: string | null
   created_at: string
   updated_at: string
   chore?: Chore
@@ -60,11 +47,11 @@ export interface ChoreAssignment {
 
 export interface ChoreAssignmentCreate {
   chore_id: number
-  assigned_to_user_id: number
+  assigned_to_id: number
   due_date: string
 }
 
 export interface ChoreAssignmentUpdate {
-  is_complete?: boolean
   due_date?: string
+  is_complete?: boolean
 }