diff --git a/be/app/api/v1/endpoints/chores.py b/be/app/api/v1/endpoints/chores.py
index 01a15d7..be38736 100644
--- a/be/app/api/v1/endpoints/chores.py
+++ b/be/app/api/v1/endpoints/chores.py
@@ -231,7 +231,7 @@ async def update_group_chore(
         raise HTTPException(status_code=status.HTTP_400_BAD_REQUEST, detail=f"Chore's group_id if provided must match path group_id ({group_id}).")
 
     # Ensure chore_in has the correct type for the CRUD operation
-    chore_payload = chore_in.model_copy(update={"type": ChoreTypeEnum.group, "group_id": group_id} if chore_in.type is None else chore_in)
+    chore_payload = chore_in.model_copy(update={"type": ChoreTypeEnum.group, "group_id": group_id} if chore_in.type is None else {"group_id": group_id})
 
     try:
         updated_chore = await crud_chore.update_chore(db=db, chore_id=chore_id, chore_in=chore_payload, user_id=current_user.id, group_id=group_id)
diff --git a/be/app/api/v1/endpoints/invites.py b/be/app/api/v1/endpoints/invites.py
index 51d0bcf..b1be222 100644
--- a/be/app/api/v1/endpoints/invites.py
+++ b/be/app/api/v1/endpoints/invites.py
@@ -8,6 +8,7 @@ from app.auth import current_active_user
 from app.models import User as UserModel, UserRoleEnum
 from app.schemas.invite import InviteAccept
 from app.schemas.message import Message
+from app.schemas.group import GroupPublic
 from app.crud import invite as crud_invite
 from app.crud import group as crud_group
 from app.core.exceptions import (
@@ -16,7 +17,8 @@ from app.core.exceptions import (
     InviteAlreadyUsedError,
     InviteCreationError,
     GroupNotFoundError,
-    GroupMembershipError
+    GroupMembershipError,
+    GroupOperationError
 )
 
 logger = logging.getLogger(__name__)
@@ -24,7 +26,7 @@ router = APIRouter()
 
 @router.post(
     "/accept", # Route relative to prefix "/invites"
-    response_model=Message,
+    response_model=GroupPublic,
     summary="Accept Group Invite",
     tags=["Invites"]
 )
@@ -34,28 +36,19 @@ async def accept_invite(
     current_user: UserModel = Depends(current_active_user),
 ):
     """Accepts a group invite using the provided invite code."""
-    logger.info(f"User {current_user.email} attempting to accept invite code: {invite_in.invite_code}")
+    logger.info(f"User {current_user.email} attempting to accept invite code: {invite_in.code}")
     
-    # Get the invite
-    invite = await crud_invite.get_invite_by_code(db, invite_code=invite_in.invite_code)
+    # Get the invite - this function should only return valid, active invites
+    invite = await crud_invite.get_active_invite_by_code(db, code=invite_in.code)
     if not invite:
-        logger.warning(f"Invalid invite code attempted by user {current_user.email}: {invite_in.invite_code}")
-        raise InviteNotFoundError(invite_in.invite_code)
-
-    # Check if invite is expired
-    if invite.is_expired():
-        logger.warning(f"Expired invite code attempted by user {current_user.email}: {invite_in.invite_code}")
-        raise InviteExpiredError(invite_in.invite_code)
-
-    # Check if invite has already been used
-    if invite.used_at:
-        logger.warning(f"Already used invite code attempted by user {current_user.email}: {invite_in.invite_code}")
-        raise InviteAlreadyUsedError(invite_in.invite_code)
+        logger.warning(f"Invalid or inactive invite code attempted by user {current_user.email}: {invite_in.code}")
+        # We can use a more generic error or a specific one. InviteNotFound is reasonable.
+        raise InviteNotFoundError(invite_in.code)
 
     # Check if group still exists
     group = await crud_group.get_group_by_id(db, group_id=invite.group_id)
     if not group:
-        logger.error(f"Group {invite.group_id} not found for invite {invite_in.invite_code}")
+        logger.error(f"Group {invite.group_id} not found for invite {invite_in.code}")
         raise GroupNotFoundError(invite.group_id)
 
     # Check if user is already a member
@@ -64,11 +57,23 @@ async def accept_invite(
         logger.warning(f"User {current_user.email} already a member of group {invite.group_id}")
         raise GroupMembershipError(invite.group_id, "join (already a member)")
 
-    # Add user to group and mark invite as used
-    success = await crud_invite.accept_invite(db, invite=invite, user_id=current_user.id)
-    if not success:
-        logger.error(f"Failed to accept invite {invite_in.invite_code} for user {current_user.email}")
-        raise InviteCreationError(invite.group_id)
+    # Add user to the group
+    added_to_group = await crud_group.add_user_to_group(db, group_id=invite.group_id, user_id=current_user.id)
+    if not added_to_group:
+        logger.error(f"Failed to add user {current_user.email} to group {invite.group_id} during invite acceptance.")
+        # This could be a race condition or other issue, treat as an operational error.
+        raise GroupOperationError("Failed to add user to group.")
 
-    logger.info(f"User {current_user.email} successfully joined group {invite.group_id} via invite {invite_in.invite_code}")
-    return Message(detail="Successfully joined the group")
\ No newline at end of file
+    # Deactivate the invite so it cannot be used again
+    await crud_invite.deactivate_invite(db, invite=invite)
+    
+    logger.info(f"User {current_user.email} successfully joined group {invite.group_id} via invite {invite_in.code}")
+    
+    # Re-fetch the group to get the updated member list
+    updated_group = await crud_group.get_group_by_id(db, group_id=invite.group_id)
+    if not updated_group:
+        # This should ideally not happen as we found it before
+        logger.error(f"Could not re-fetch group {invite.group_id} after user {current_user.email} joined.")
+        raise GroupNotFoundError(invite.group_id)
+        
+    return updated_group
\ No newline at end of file
diff --git a/fe/.prettierrc.json b/fe/.prettierrc.json
index 29a2402..18b1821 100644
--- a/fe/.prettierrc.json
+++ b/fe/.prettierrc.json
@@ -2,5 +2,5 @@
   "$schema": "https://json.schemastore.org/prettierrc",
   "semi": false,
   "singleQuote": true,
-  "printWidth": 100
-}
+  "printWidth": 150
+}
\ No newline at end of file
diff --git a/fe/src/assets/valerie-ui.scss b/fe/src/assets/valerie-ui.scss
index b13bafd..f3d916b 100644
--- a/fe/src/assets/valerie-ui.scss
+++ b/fe/src/assets/valerie-ui.scss
@@ -944,7 +944,7 @@ select.form-input {
   max-width: 550px;
   box-shadow: var(--shadow-lg);
   position: relative;
-  /* overflow: hidden; */
+  overflow-y: scroll;
   /* Can cause tooltip clipping */
   transform: scale(0.95) translateY(-20px);
   transition: transform var(--transition-speed) var(--transition-ease-out);
diff --git a/fe/src/config/api-config.ts b/fe/src/config/api-config.ts
index 6556789..8d49ce1 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 = {
@@ -32,6 +32,8 @@ export const API_ENDPOINTS = {
   LISTS: {
     BASE: '/lists',
     BY_ID: (id: string) => `/lists/${id}`,
+    STATUS: (id: string) => `/lists/${id}/status`,
+    STATUSES: '/lists/statuses',
     ITEMS: (listId: string) => `/lists/${listId}/items`,
     ITEM: (listId: string, itemId: string) => `/lists/${listId}/items/${itemId}`,
     EXPENSES: (listId: string) => `/lists/${listId}/expenses`,
@@ -66,7 +68,7 @@ export const API_ENDPOINTS = {
   INVITES: {
     BASE: '/invites',
     BY_ID: (id: string) => `/invites/${id}`,
-    ACCEPT: (id: string) => `/invites/accept/${id}`,
+    ACCEPT: '/invites/accept',
     DECLINE: (id: string) => `/invites/decline/${id}`,
     REVOKE: (id: string) => `/invites/revoke/${id}`,
     LIST: '/invites',
diff --git a/fe/src/i18n/en.json b/fe/src/i18n/en.json
index 7136cb2..62afc82 100644
--- a/fe/src/i18n/en.json
+++ b/fe/src/i18n/en.json
@@ -90,95 +90,17 @@
   },
   "choresPage": {
     "title": "Chores",
-    "tabs": {
-      "overdue": "Overdue",
-      "today": "Today",
-      "upcoming": "Upcoming",
-      "allPending": "All Pending",
-      "completed": "Completed"
-    },
-    "viewToggle": {
-      "calendarLabel": "Calendar View",
-      "calendarText": "Calendar",
-      "listLabel": "List View",
-      "listText": "List"
-    },
-    "newChoreButtonLabel": "New Chore",
-    "newChoreButtonText": "New Chore",
-    "loadingState": {
-      "loadingChores": "Loading chores..."
-    },
-    "calendar": {
-      "prevMonthLabel": "Previous month",
-      "nextMonthLabel": "Next month",
-      "weekdays": {
-        "sun": "Sun",
-        "mon": "Mon",
-        "tue": "Tue",
-        "wed": "Wed",
-        "thu": "Thu",
-        "fri": "Fri",
-        "sat": "Sat"
-      },
-      "addChoreToDayLabel": "Add chore to this day",
-      "emptyState": "No chores to display for this period."
-    },
-    "listView": {
-      "choreTypePersonal": "Personal",
-      "choreTypeGroupFallback": "Group",
-      "completedDatePrefix": "Completed:",
-      "actions": {
-        "doneTitle": "Mark as Done",
-        "doneText": "Done",
-        "undoTitle": "Mark as Not Done",
-        "undoText": "Undo",
-        "editTitle": "Edit",
-        "editLabel": "Edit chore",
-        "editText": "Edit",
-        "deleteTitle": "Delete",
-        "deleteLabel": "Delete chore",
-        "deleteText": "Delete"
-      },
-      "emptyState": {
-        "message": "No chores in this view. Well done!",
-        "viewAllButton": "View All Pending"
-      }
-    },
-    "choreModal": {
-      "editTitle": "Edit Chore",
-      "newTitle": "New Chore",
-      "closeButtonLabel": "Close modal",
-      "nameLabel": "Name",
-      "namePlaceholder": "Enter chore name",
-      "typeLabel": "Type",
-      "typePersonal": "Personal",
-      "typeGroup": "Group",
-      "groupLabel": "Group",
-      "groupSelectDefault": "Select a group",
-      "descriptionLabel": "Description",
-      "descriptionPlaceholder": "Add a description (optional)",
-      "frequencyLabel": "Frequency",
-      "intervalLabel": "Interval (days)",
-      "intervalPlaceholder": "e.g. 3",
-      "dueDateLabel": "Due Date",
-      "quickDueDateToday": "Today",
-      "quickDueDateTomorrow": "Tomorrow",
-      "quickDueDateNextWeek": "Next Week",
-      "cancelButton": "Cancel",
-      "saveButton": "Save"
-    },
-    "deleteDialog": {
-      "title": "Delete Chore",
-      "confirmationText": "Are you sure you want to delete this chore? This action cannot be undone.",
-      "deleteButton": "Delete"
-    },
-    "shortcutsModal": {
-      "title": "Keyboard Shortcuts",
-      "descNewChore": "New Chore",
-      "descToggleView": "Toggle View (List/Calendar)",
-      "descToggleShortcuts": "Show/Hide Shortcuts",
-      "descCloseModal": "Close any open Modal/Dialog"
+    "addChore": "+",
+    "edit": "Edit",
+    "delete": "Delete",
+    "empty": {
+      "title": "No Chores Yet",
+      "message": "Get started by adding your first chore!",
+      "addFirstChore": "Add First Chore"
     },
+    "today": "Today",
+    "completedToday": "Completed today",
+    "completedOn": "Completed on {date}",
     "frequencyOptions": {
       "oneTime": "One Time",
       "daily": "Daily",
@@ -186,34 +108,44 @@
       "monthly": "Monthly",
       "custom": "Custom"
     },
-    "formatters": {
-      "noDueDate": "No due date",
-      "dueToday": "Due Today",
-      "dueTomorrow": "Due Tomorrow",
-      "overdueFull": "Overdue: {date}",
-      "dueFull": "Due {date}",
-      "invalidDate": "Invalid Date"
+    "frequency": {
+      "customInterval": "Every {n} day | Every {n} days"
+    },
+    "form": {
+      "name": "Name",
+      "description": "Description",
+      "dueDate": "Due Date",
+      "frequency": "Frequency",
+      "interval": "Interval (days)",
+      "type": "Type",
+      "personal": "Personal",
+      "group": "Group",
+      "assignGroup": "Assign to Group",
+      "cancel": "Cancel",
+      "save": "Save Changes",
+      "create": "Create",
+      "editChore": "Edit Chore",
+      "createChore": "Create Chore"
+    },
+    "deleteConfirm": {
+      "title": "Confirm Deletion",
+      "message": "Really want to delete? This action cannot be undone.",
+      "cancel": "Cancel",
+      "delete": "Delete"
     },
     "notifications": {
-      "loadFailed": "Failed to load chores",
-      "updateSuccess": "Chore '{name}' updated successfully",
-      "createSuccess": "Chore '{name}' created successfully",
-      "updateFailed": "Failed to update chore",
-      "createFailed": "Failed to create chore",
-      "deleteSuccess": "Chore '{name}' deleted successfully",
-      "deleteFailed": "Failed to delete chore",
-      "markedDone": "{name} marked as done.",
-      "markedNotDone": "{name} marked as not done.",
-      "statusUpdateFailed": "Failed to update chore status."
-    },
-    "validation": {
-      "nameRequired": "Chore name is required.",
-      "groupRequired": "Please select a group for group chores.",
-      "intervalRequired": "Custom interval must be at least 1 day.",
-      "dueDateRequired": "Due date is required.",
-      "invalidDueDate": "Invalid due date format."
-    },
-    "unsavedChangesConfirmation": "You have unsaved changes in the chore form. Are you sure you want to leave?"
+      "loadFailed": "Failed to load chores.",
+      "loadGroupsFailed": "Failed to load groups.",
+      "updateSuccess": "Chore updated successfully!",
+      "createSuccess": "Chore created successfully!",
+      "saveFailed": "Failed to save the chore.",
+      "deleteSuccess": "Chore deleted successfully.",
+      "deleteFailed": "Failed to delete chore.",
+      "completed": "Chore marked as complete!",
+      "uncompleted": "Chore marked as incomplete.",
+      "updateFailed": "Failed to update chore status.",
+      "createAssignmentFailed": "Failed to create assignment for chore."
+    }
   },
   "errorNotFoundPage": {
     "errorCode": "404",
diff --git a/fe/src/pages/ChoresPage.vue b/fe/src/pages/ChoresPage.vue
index bbb01ea..b4104b8 100644
--- a/fe/src/pages/ChoresPage.vue
+++ b/fe/src/pages/ChoresPage.vue
@@ -1,353 +1,10 @@
-<template>
-  <main class="neo-container page-padding">
-    <div class="neo-list-header">
-      <div class="header-left">
-        <h1 class="neo-title">{{ t('choresPage.title') }}</h1>
-        <div class="view-tabs" role="tablist">
-          <button class="neo-tab-btn" :class="{ active: activeView === 'overdue' }" @click="activeView = 'overdue'"
-            :disabled="isLoading" role="tab" :aria-selected="activeView === 'overdue'">
-            <span class="material-icons">warning</span>
-            {{ t('choresPage.tabs.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" role="tab" :aria-selected="activeView === 'today'">
-            <span class="material-icons">today</span>
-            {{ t('choresPage.tabs.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" role="tab" :aria-selected="activeView === 'upcoming'">
-            <span class="material-icons">upcoming</span>
-            {{ t('choresPage.tabs.upcoming') }}
-          </button>
-          <button class="neo-tab-btn" :class="{ active: activeView === 'all' }" @click="activeView = 'all'"
-            :disabled="isLoading" role="tab" :aria-selected="activeView === 'all'">
-            <span class="material-icons">list</span>
-            {{ t('choresPage.tabs.allPending') }}
-          </button>
-          <button class="neo-tab-btn" :class="{ active: activeView === 'completed' }" @click="activeView = 'completed'"
-            :disabled="isLoading" role="tab" :aria-selected="activeView === 'completed'">
-            <span class="material-icons">check_circle</span>
-            {{ t('choresPage.tabs.completed') }}
-          </button>
-        </div>
-      </div>
-      <div class="header-right">
-        <div class="neo-view-toggle">
-          <button class="neo-toggle-btn" :class="{ active: viewMode === 'calendar' }" @click="viewMode = 'calendar'"
-            :disabled="isLoading" :aria-pressed="viewMode === 'calendar'"
-            :aria-label="t('choresPage.viewToggle.calendarLabel')">
-            <span class="material-icons">calendar_month</span>
-            <span class="btn-text hide-text-on-mobile">{{ t('choresPage.viewToggle.calendarText') }}</span>
-          </button>
-          <button class="neo-toggle-btn" :class="{ active: viewMode === 'list' }" @click="viewMode = 'list'"
-            :disabled="isLoading" :aria-pressed="viewMode === 'list'"
-            :aria-label="t('choresPage.viewToggle.listLabel')">
-            <span class="material-icons">view_list</span>
-            <span class="btn-text hide-text-on-mobile">{{ t('choresPage.viewToggle.listText') }}</span>
-          </button>
-        </div>
-        <button class="neo-action-button" @click="openCreateChoreModal(null)" :disabled="isLoading"
-          :aria-label="t('choresPage.newChoreButtonLabel')">
-          <span class="material-icons">add</span>
-          <span class="btn-text hide-text-on-mobile-sm">{{ t('choresPage.newChoreButtonText') }}</span>
-        </button>
-      </div>
-    </div>
-
-    <!-- Loading State -->
-    <div v-if="isLoading" class="neo-loading-state">
-      <div class="loading-spinner"></div>
-      <p>{{ t('choresPage.loadingState.loadingChores') }}</p>
-    </div>
-
-    <!-- Calendar View -->
-    <div v-else-if="viewMode === 'calendar'" class="calendar-view">
-      <div class="calendar-header">
-        <button class="btn btn-icon" @click="previousMonth" :aria-label="t('choresPage.calendar.prevMonthLabel')">
-          <span class="material-icons">chevron_left</span>
-        </button>
-        <h2>{{ currentMonthYear }}</h2>
-        <button class="btn btn-icon" @click="nextMonth" :aria-label="t('choresPage.calendar.nextMonthLabel')">
-          <span class="material-icons">chevron_right</span>
-        </button>
-      </div>
-      <div v-if="calendarDays.length > 0">
-        <div class="calendar-grid">
-          <div class="calendar-weekdays">
-            <div v-for="dayNameKey in weekDayKeys" :key="dayNameKey" class="weekday">{{ t(dayNameKey) }}</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="t('choresPage.calendar.addChoreToDayLabel')">
-                  <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>{{ t('choresPage.calendar.emptyState') }}</p>
-      </div>
-    </div>
-
-    <!-- List View -->
-    <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 }">
-          <div class="chore-status" :class="getStatusClass(chore)"></div>
-          <div class="chore-content">
-            <div class="chore-main-info">
-              <div class="chore-header">
-                <h3>{{ chore.name }}</h3>
-                <div class="chore-tags">
-                  <span class="chore-type-tag" :class="chore.type">
-                    {{ chore.type === 'personal' ? t('choresPage.listView.choreTypePersonal') :
-                      getGroupName(chore.group_id) || t('choresPage.listView.choreTypeGroupFallback') }}
-                  </span>
-                  <span v-if="!chore.is_completed" class="chore-frequency-tag" :class="chore.frequency">
-                    {{ formatFrequency(chore.frequency) }}
-                  </span>
-                </div>
-              </div>
-              <div class="chore-meta">
-                <div v-if="!chore.is_completed" class="chore-due-date" :class="getDueDateClass(chore)">
-                  <span class="material-icons">schedule</span>
-                  {{ formatDueDate(chore.next_due_date) }}
-                </div>
-                <div v-else class="chore-completed-date">
-                  <span class="material-icons">check_circle_outline</span>
-                  {{ t('choresPage.listView.completedDatePrefix') }} {{ formatDate(chore.completed_at ||
-                    chore.next_due_date) }}
-                </div>
-                <div v-if="chore.description" class="chore-description">
-                  {{ chore.description }}
-                </div>
-              </div>
-            </div>
-            <div class="chore-card-actions">
-              <button v-if="!chore.is_completed" class="btn btn-success btn-sm btn-complete"
-                @click="toggleChoreCompletion(chore)" :title="t('choresPage.listView.actions.doneTitle')">
-                <span class="material-icons">check_circle</span> {{ t('choresPage.listView.actions.doneText') }}
-              </button>
-              <button v-else class="btn btn-warning btn-sm btn-undo" @click="toggleChoreCompletion(chore)"
-                :title="t('choresPage.listView.actions.undoTitle')">
-                <span class="material-icons">undo</span> {{ t('choresPage.listView.actions.undoText') }}
-              </button>
-              <button class="btn btn-icon" @click="openEditChoreModal(chore)"
-                :title="t('choresPage.listView.actions.editTitle')"
-                :aria-label="t('choresPage.listView.actions.editLabel')">
-                <span class="material-icons">edit</span>
-                <span class="btn-text hide-text-on-mobile">{{ t('choresPage.listView.actions.editText') }}</span>
-              </button>
-              <button class="btn btn-icon btn-danger-icon" @click="confirmDeleteChore(chore)"
-                :title="t('choresPage.listView.actions.deleteTitle')"
-                :aria-label="t('choresPage.listView.actions.deleteLabel')">
-                <span class="material-icons">delete</span>
-                <span class="btn-text hide-text-on-mobile">{{ t('choresPage.listView.actions.deleteText') }}</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>{{ t('choresPage.listView.emptyState.message') }}</p>
-        <button v-if="activeView !== 'all'" class="btn btn-sm btn-outline" @click="activeView = 'all'">{{
-          t('choresPage.listView.emptyState.viewAllButton') }}</button>
-      </div>
-    </div>
-
-    <!-- Create/Edit Chore Modal -->
-    <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 :id="isEditing ? 'editChoreModalTitle' : 'newChoreModalTitle'">{{ isEditing ?
-            t('choresPage.choreModal.editTitle') : t('choresPage.choreModal.newTitle')
-            }}</h3>
-          <button class="btn btn-icon" @click="showChoreModal = false"
-            :aria-label="t('choresPage.choreModal.closeButtonLabel')">
-            <span class="material-icons">close</span>
-          </button>
-        </div>
-        <form @submit.prevent="onSubmit" class="modal-form">
-          <div class="form-group">
-            <label for="name">{{ t('choresPage.choreModal.nameLabel') }}</label>
-            <input id="name" v-model="choreForm.name" type="text" class="form-input"
-              :placeholder="t('choresPage.choreModal.namePlaceholder')" required />
-          </div>
-
-          <div class="form-group">
-            <label>{{ t('choresPage.choreModal.typeLabel') }}</label>
-            <div class="type-selector">
-              <button type="button" class="type-btn" :class="{ active: choreForm.type === 'personal' }"
-                @click="choreForm.type = 'personal'; choreForm.group_id = undefined"
-                :aria-pressed="choreForm.type === 'personal' ? 'true' : 'false'">
-                <span class="material-icons">person</span>
-                {{ t('choresPage.choreModal.typePersonal') }}
-              </button>
-              <button type="button" class="type-btn" :class="{ active: choreForm.type === 'group' }"
-                @click="choreForm.type = 'group'" :aria-pressed="choreForm.type === 'group' ? 'true' : 'false'">
-                <span class="material-icons">group</span>
-                {{ t('choresPage.choreModal.typeGroup') }}
-              </button>
-            </div>
-          </div>
-
-          <div v-if="choreForm.type === 'group'" class="form-group">
-            <label for="group">{{ t('choresPage.choreModal.groupLabel') }}</label>
-            <select id="group" v-model="choreForm.group_id" class="form-input" required>
-              <option :value="undefined" disabled>{{ t('choresPage.choreModal.groupSelectDefault') }}</option>
-              <option v-for="group in groups" :key="group.id" :value="group.id">
-                {{ group.name }}
-              </option>
-            </select>
-          </div>
-
-          <div class="form-group">
-            <label for="description">{{ t('choresPage.choreModal.descriptionLabel') }}</label>
-            <textarea id="description" v-model="choreForm.description" class="form-input" rows="3"
-              :placeholder="t('choresPage.choreModal.descriptionPlaceholder')"></textarea>
-          </div>
-
-          <div class="form-row">
-            <div class="form-group">
-              <label for="frequency">{{ t('choresPage.choreModal.frequencyLabel') }}</label>
-              <select id="frequency" v-model="choreForm.frequency" class="form-input" required>
-                <option v-for="option in frequencyOptions" :key="option.value" :value="option.value">
-                  {{ option.label }}
-                </option>
-              </select>
-            </div>
-
-            <div v-if="choreForm.frequency === 'custom'" class="form-group">
-              <label for="interval">{{ t('choresPage.choreModal.intervalLabel') }}</label>
-              <input id="interval" v-model.number="choreForm.custom_interval_days" type="number" class="form-input"
-                min="1" :placeholder="t('choresPage.choreModal.intervalPlaceholder')" required />
-            </div>
-          </div>
-
-          <div class="form-group">
-            <label for="dueDate">{{ t('choresPage.choreModal.dueDateLabel') }}</label>
-            <div class="quick-due-dates">
-              <button type="button" class="btn btn-sm btn-outline" @click="setQuickDueDate('today')">{{
-                t('choresPage.choreModal.quickDueDateToday') }}</button>
-              <button type="button" class="btn btn-sm btn-outline" @click="setQuickDueDate('tomorrow')">{{
-                t('choresPage.choreModal.quickDueDateTomorrow') }}</button>
-              <button type="button" class="btn btn-sm btn-outline" @click="setQuickDueDate('next_week')">{{
-                t('choresPage.choreModal.quickDueDateNextWeek') }}</button>
-            </div>
-            <input id="dueDate" v-model="choreForm.next_due_date" type="date" class="form-input" required />
-          </div>
-
-          <div class="modal-footer">
-            <button type="button" class="btn btn-neutral" @click="showChoreModal = false">{{
-              t('choresPage.choreModal.cancelButton') }}</button>
-            <button type="submit" class="btn btn-primary">{{ t('choresPage.choreModal.saveButton') }}</button>
-          </div>
-        </form>
-      </div>
-    </div>
-
-    <!-- Delete Confirmation Dialog -->
-    <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 id="deleteDialogTitle">{{ t('choresPage.deleteDialog.title') }}</h3>
-          <button class="btn btn-icon" @click="showDeleteDialog = false"
-            :aria-label="t('choresPage.choreModal.closeButtonLabel')">
-            <span class="material-icons">close</span>
-          </button>
-        </div>
-        <div class="modal-body">
-          <p>{{ t('choresPage.deleteDialog.confirmationText') }}</p>
-        </div>
-        <div class="modal-footer">
-          <button class="btn btn-neutral" @click="showDeleteDialog = false">{{ t('choresPage.choreModal.cancelButton')
-            }}</button>
-          <button class="btn btn-danger" @click="deleteChore">{{ t('choresPage.deleteDialog.deleteButton') }}</button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Keyboard Shortcuts Modal -->
-    <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 id="shortcutsModalTitle">{{ t('choresPage.shortcutsModal.title') }}</h3>
-          <button class="btn btn-icon" @click="showShortcutsModal = false"
-            :aria-label="t('choresPage.choreModal.closeButtonLabel')">
-            <span class="material-icons">close</span>
-          </button>
-        </div>
-        <div class="modal-body">
-          <div class="shortcuts-list">
-            <div class="shortcut-item">
-              <div class="shortcut-keys">
-                <kbd>Ctrl/Cmd</kbd> + <kbd>N</kbd>
-              </div>
-              <div class="shortcut-description">{{ t('choresPage.shortcutsModal.descNewChore') }}</div>
-            </div>
-            <div class="shortcut-item">
-              <div class="shortcut-keys">
-                <kbd>Ctrl/Cmd</kbd> + <kbd>/</kbd>
-              </div>
-              <div class="shortcut-description">{{ t('choresPage.shortcutsModal.descToggleView') }}</div>
-            </div>
-            <div class="shortcut-item">
-              <div class="shortcut-keys">
-                <kbd>Ctrl/Cmd</kbd> + <kbd>?</kbd>
-              </div>
-              <div class="shortcut-description">{{ t('choresPage.shortcutsModal.descToggleShortcuts') }}</div>
-            </div>
-            <div class="shortcut-item">
-              <div class="shortcut-keys">
-                <kbd>Esc</kbd>
-              </div>
-              <div class="shortcut-description">{{ t('choresPage.shortcutsModal.descCloseModal') }}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </main>
-</template>
-
 <script setup lang="ts">
-import { ref, onMounted, computed, onUnmounted, watch, onBeforeUnmount } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { format, startOfDay, addDays, addWeeks, isBefore, isEqual, startOfMonth, endOfMonth, eachDayOfInterval, isSameMonth, isToday as isTodayDate } from 'date-fns'
+import { format, startOfDay, isEqual, isToday as isTodayDate } from 'date-fns'
 import { choreService } from '../services/choreService'
 import { useNotificationStore } from '../stores/notifications'
-import type { Chore, ChoreCreate, ChoreUpdate, ChoreFrequency } from '../types/chore'
-import { useRoute } from 'vue-router'
+import type { Chore, ChoreCreate, ChoreUpdate, ChoreFrequency, ChoreAssignmentUpdate } from '../types/chore'
 import { groupService } from '../services/groupService'
 import { useStorage } from '@vueuse/core'
 
@@ -355,17 +12,23 @@ const { t } = useI18n()
 
 // Types
 interface ChoreWithCompletion extends Chore {
+  current_assignment_id: number | null;
   is_completed: boolean;
   completed_at: string | null;
+  updating: boolean;
 }
 
-interface ChoreCreateWithCompletion extends Omit<ChoreCreate, 'created_by_id' | 'created_at' | 'updated_at'> {
-  is_completed: boolean;
-  completed_at: string | null;
+interface ChoreFormData {
+  name: string;
+  description: string;
+  frequency: ChoreFrequency;
+  custom_interval_days: number | undefined;
+  next_due_date: string;
+  type: 'personal' | 'group';
+  group_id: number | undefined;
 }
 
 const notificationStore = useNotificationStore()
-const route = useRoute()
 
 // State
 const chores = ref<ChoreWithCompletion[]>([])
@@ -374,20 +37,12 @@ const showChoreModal = ref(false)
 const showDeleteDialog = ref(false)
 const isEditing = ref(false)
 const selectedChore = ref<ChoreWithCompletion | null>(null)
-const showShortcutsModal = ref(false)
 
 const cachedChores = useStorage<ChoreWithCompletion[]>('cached-chores-v2', [])
 const cachedTimestamp = useStorage<number>('cached-chores-timestamp-v2', 0)
 const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
 
-const loadCachedData = () => {
-  const now = Date.now();
-  if (cachedChores.value && cachedChores.value.length > 0 && (now - cachedTimestamp.value) < CACHE_DURATION) {
-    chores.value = cachedChores.value;
-  }
-};
-
-const choreForm = ref<ChoreCreateWithCompletion>({
+const initialChoreFormState: ChoreFormData = {
   name: '',
   description: '',
   frequency: 'daily',
@@ -395,14 +50,56 @@ const choreForm = ref<ChoreCreateWithCompletion>({
   next_due_date: format(new Date(), 'yyyy-MM-dd'),
   type: 'personal',
   group_id: undefined,
-  is_completed: false,
-  completed_at: null,
-})
+}
 
-const getGroupName = (groupId?: number | null): string | undefined => {
-  if (!groupId) return undefined;
-  return groups.value.find(g => g.id === groupId)?.name;
-};
+const choreForm = ref({ ...initialChoreFormState })
+const isLoading = ref(true)
+
+const loadChores = async () => {
+  const now = Date.now();
+  if (cachedChores.value && cachedChores.value.length > 0 && (now - cachedTimestamp.value) < CACHE_DURATION) {
+    chores.value = cachedChores.value;
+    isLoading.value = false;
+  } else {
+    isLoading.value = true;
+  }
+
+  try {
+    const fetchedChores = await choreService.getAllChores()
+    const mappedChores = fetchedChores.map(c => {
+      const currentAssignment = c.assignments && c.assignments.length > 0 ? c.assignments[0] : null;
+      return {
+        ...c,
+        current_assignment_id: currentAssignment?.id ?? null,
+        is_completed: currentAssignment?.is_complete ?? c.is_completed ?? false,
+        completed_at: currentAssignment?.completed_at ?? c.completed_at ?? null,
+        updating: false,
+      }
+    });
+    chores.value = mappedChores;
+    cachedChores.value = mappedChores;
+    cachedTimestamp.value = Date.now()
+  } catch (error) {
+    console.error('Failed to load all chores:', error)
+    notificationStore.addNotification({ message: t('choresPage.notifications.loadFailed', 'Failed to load chores.'), type: 'error' })
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const loadGroups = async () => {
+  try {
+    groups.value = await groupService.getUserGroups();
+  } catch (error) {
+    console.error("Failed to load groups", error);
+    notificationStore.addNotification({ message: t('choresPage.notifications.loadGroupsFailed', 'Failed to load groups.'), type: 'error' });
+  }
+}
+
+onMounted(() => {
+  loadChores()
+  loadGroups()
+})
 
 const frequencyOptions = computed(() => [
   { label: t('choresPage.frequencyOptions.oneTime'), value: 'one_time' as ChoreFrequency },
@@ -412,114 +109,86 @@ const frequencyOptions = computed(() => [
   { label: t('choresPage.frequencyOptions.custom'), value: 'custom' as ChoreFrequency }
 ]);
 
-const isLoading = ref(true)
-
-const loadChores = async () => {
-  // If we have any cached data (even stale), show it first.
-  if (cachedChores.value && cachedChores.value.length > 0) {
-    chores.value = cachedChores.value;
-    isLoading.value = false;
-  } else {
-    // Only show loading spinner if there is no cached data at all.
-    isLoading.value = true;
-  }
-
-  try {
-    const fetchedChores = await choreService.getAllChores()
-    const mappedChores = fetchedChores.map(c => ({
-      ...c,
-      is_completed: c.is_completed || false,
-      completed_at: c.completed_at || null,
-    }));
-    chores.value = mappedChores;
-    cachedChores.value = mappedChores;
-    cachedTimestamp.value = Date.now()
-  } catch (error) {
-    console.error('Failed to load all chores:', error)
-    notificationStore.addNotification({ message: t('choresPage.notifications.loadFailed'), type: 'error' })
-    // Keep stale data on fetch error
-  } finally {
-    if (isLoading.value) {
-      isLoading.value = false
+const getChoreSubtext = (chore: ChoreWithCompletion): string => {
+  if (chore.is_completed && chore.completed_at) {
+    const completedDate = new Date(chore.completed_at);
+    if (isTodayDate(completedDate)) {
+      return t('choresPage.completedToday');
     }
+    return t('choresPage.completedOn', { date: format(completedDate, 'd MMM') });
   }
-}
 
-const viewMode = ref<'calendar' | 'list'>('calendar')
-const currentDate = ref(new Date())
+  const parts: string[] = [];
 
-const weekDayKeys = ['choresPage.calendar.weekdays.sun', 'choresPage.calendar.weekdays.mon', 'choresPage.calendar.weekdays.tue', 'choresPage.calendar.weekdays.wed', 'choresPage.calendar.weekdays.thu', 'choresPage.calendar.weekdays.fri', 'choresPage.calendar.weekdays.sat']
-// For smaller screens, you might use: const weekDayKeys = ['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)
-
-  const firstDayOfMonth = start.getDay()
-  const startDate = addDays(start, -firstDayOfMonth)
-
-  const lastDayOfMonth = end.getDay()
-  const endDate = addDays(end, 6 - lastDayOfMonth)
-
-  const days = eachDayOfInterval({ start: startDate, end: endDate })
-
-  return days.map(date => {
-    const dayChores = filteredChores.value.filter(chore => {
-      // For completed chores, use completion date for calendar placement, consistent with list view.
-      // For pending chores (all other views), use the due date.
-      const dateString = activeView.value === 'completed'
-        ? chore.completed_at || chore.next_due_date
-        : chore.next_due_date;
-
-      if (!dateString) return false;
-
-      try {
-        const choreDate = startOfDay(new Date(dateString.replace(/-/g, '/'))); // More robust date parsing
-        return isEqual(choreDate, startOfDay(date))
-      } catch (e) {
-        console.warn("Invalid date for chore:", chore.name, dateString);
-        return false;
+  if (chore.frequency && chore.frequency !== 'one_time') {
+    const freqOption = frequencyOptions.value.find(f => f.value === chore.frequency);
+    if (freqOption) {
+      if (chore.frequency === 'custom' && chore.custom_interval_days) {
+        parts.push(t('choresPage.frequency.customInterval', { n: chore.custom_interval_days }));
+      } else {
+        parts.push(freqOption.label);
       }
-    })
-
-    return {
-      date,
-      isCurrentMonth: isSameMonth(date, currentDate.value),
-      isToday: isTodayDate(date),
-      isOtherMonth: !isSameMonth(date, currentDate.value),
-      chores: dayChores
     }
-  })
+  }
+
+  if (chore.type === 'group' && chore.group_id) {
+    const group = groups.value.find(g => g.id === chore.group_id);
+    if (group) {
+      parts.push(group.name);
+    }
+  }
+
+  return parts.join(' · ');
+};
+
+const groupedChores = computed(() => {
+  if (!chores.value) return []
+
+  const choresByDate = chores.value.reduce((acc, chore) => {
+    const dueDate = format(startOfDay(new Date(chore.next_due_date)), 'yyyy-MM-dd')
+    if (!acc[dueDate]) {
+      acc[dueDate] = []
+    }
+    acc[dueDate].push(chore)
+    return acc
+  }, {} as Record<string, ChoreWithCompletion[]>)
+
+  return Object.keys(choresByDate)
+    .sort((a, b) => new Date(a).getTime() - new Date(b).getTime())
+    .map(dateStr => {
+      // Create a new Date object and ensure it's interpreted as local time, not UTC
+      const dateParts = dateStr.split('-').map(Number);
+      const date = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
+      return {
+        date,
+        chores: choresByDate[dateStr]
+          .sort((a, b) => a.name.localeCompare(b.name))
+          .map(chore => ({
+            ...chore,
+            subtext: getChoreSubtext(chore)
+          }))
+      }
+    });
 })
 
-const previousMonth = () => {
-  currentDate.value = addDays(startOfMonth(currentDate.value), -1)
+const formatDateHeader = (date: Date) => {
+  const today = startOfDay(new Date())
+  const itemDate = startOfDay(date)
+
+  if (isEqual(itemDate, today)) {
+    return `${t('choresPage.today', 'Today')}, ${format(itemDate, 'eee, d MMM')}`
+  }
+  return format(itemDate, 'eee, d MMM')
 }
 
-const nextMonth = () => {
-  currentDate.value = addDays(endOfMonth(currentDate.value), 1)
-}
-
-const openCreateChoreModal = (groupId: number | null, date?: Date) => {
+const resetChoreForm = () => {
+  choreForm.value = { ...initialChoreFormState, next_due_date: format(new Date(), 'yyyy-MM-dd') };
   isEditing.value = false
   selectedChore.value = null
-  choreForm.value = {
-    name: '',
-    description: '',
-    frequency: 'daily',
-    custom_interval_days: undefined,
-    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,
-    completed_at: null,
-  }
+}
+
+const openCreateChoreModal = () => {
+  resetChoreForm()
   showChoreModal.value = true
 }
 
@@ -530,1967 +199,484 @@ const openEditChoreModal = (chore: ChoreWithCompletion) => {
     name: chore.name,
     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.replace(/-/g, '/')), 'yyyy-MM-dd') : format(new Date(), 'yyyy-MM-dd'),
+    custom_interval_days: chore.custom_interval_days ?? undefined,
+    next_due_date: chore.next_due_date,
     type: chore.type,
-    group_id: chore.group_id,
-    is_completed: chore.is_completed,
-    completed_at: chore.completed_at,
+    group_id: chore.group_id ?? undefined,
   }
   showChoreModal.value = true
 }
 
-const onSubmit = async () => {
-  if (!validateForm()) return
-
-  isLoading.value = true;
+const handleFormSubmit = async () => {
   try {
-    const choreDataSubmit: Partial<ChoreCreateWithCompletion> = { ...choreForm.value }
-
-    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 = ''
-
+    let createdChore;
     if (isEditing.value && selectedChore.value) {
-      await choreService.updateChore(selectedChore.value.id, choreDataSubmit as ChoreUpdate)
-      notificationMessage = t('choresPage.notifications.updateSuccess', { name: choreForm.value.name })
+      const updateData: ChoreUpdate = { ...choreForm.value };
+      createdChore = await choreService.updateChore(selectedChore.value.id, updateData);
+      notificationStore.addNotification({ message: t('choresPage.notifications.updateSuccess', 'Chore updated successfully!'), type: 'success' });
     } else {
-      await choreService.createChore(choreDataSubmit as ChoreCreate)
-      notificationMessage = t('choresPage.notifications.createSuccess', { name: choreForm.value.name })
-    }
+      const createData = { ...choreForm.value };
+      createdChore = await choreService.createChore(createData as ChoreCreate);
 
-    notificationStore.addNotification({ message: notificationMessage, type: 'success' })
-    showChoreModal.value = false
-    hasUnsavedChanges.value = false;
-    await loadChores()
+      // Create an assignment for the new chore
+      if (createdChore) {
+        try {
+          await choreService.createAssignment({
+            chore_id: createdChore.id,
+            assigned_to_user_id: createdChore.created_by_id,
+            due_date: createdChore.next_due_date
+          });
+        } catch (assignmentError) {
+          console.error('Failed to create assignment for new chore:', assignmentError);
+          // Continue anyway since the chore was created
+        }
+      }
+
+      notificationStore.addNotification({ message: t('choresPage.notifications.createSuccess', 'Chore created successfully!'), type: 'success' });
+    }
+    showChoreModal.value = false;
+    await loadChores();
   } catch (error) {
-    console.error('Failed to save chore:', error)
-    notificationStore.addNotification({ message: t(isEditing.value ? 'choresPage.notifications.updateFailed' : 'choresPage.notifications.createFailed'), type: 'error' })
-  } finally {
-    isLoading.value = false;
+    console.error('Failed to save chore:', error);
+    notificationStore.addNotification({ message: t('choresPage.notifications.saveFailed', 'Failed to save the chore.'), type: 'error' });
   }
 }
 
-const confirmDeleteChore = (chore: ChoreWithCompletion) => {
+const confirmDelete = (chore: ChoreWithCompletion) => {
   selectedChore.value = chore
   showDeleteDialog.value = true
 }
 
 const deleteChore = async () => {
-  if (!selectedChore.value) return;
-  isLoading.value = true;
+  if (!selectedChore.value) return
   try {
-    await choreService.deleteChore(
-      selectedChore.value.id,
-      selectedChore.value.type,
-      selectedChore.value.group_id ?? undefined
-    );
-    showDeleteDialog.value = false;
-    notificationStore.addNotification({ message: t('choresPage.notifications.deleteSuccess', { name: selectedChore.value.name }), type: 'success' })
+    await choreService.deleteChore(selectedChore.value.id, selectedChore.value.type, selectedChore.value.group_id ?? undefined)
+    notificationStore.addNotification({ message: t('choresPage.notifications.deleteSuccess', 'Chore deleted successfully.'), type: 'success' })
+    showDeleteDialog.value = false
     await loadChores()
   } catch (error) {
-    console.error('Failed to delete chore:', error);
-    notificationStore.addNotification({ message: t('choresPage.notifications.deleteFailed'), type: 'error' })
-  } finally {
-    isLoading.value = false;
-    selectedChore.value = null;
+    console.error('Failed to delete chore:', error)
+    notificationStore.addNotification({ message: t('choresPage.notifications.deleteFailed', 'Failed to delete chore.'), type: 'error' })
   }
 }
 
-const formatDate = (dateString: string | null): string => {
-  if (!dateString) return 'N/A';
-  try {
-    return format(new Date(dateString.replace(/-/g, '/')), 'MMM d, yyyy');
-  } catch (e) {
-    return 'Invalid Date';
-  }
-}
-
-const formatFrequency = (frequency?: ChoreFrequency) => {
-  if (!frequency) return '';
-  const option = frequencyOptions.value.find(opt => opt.value === frequency)
-  return option ? option.label : frequency.charAt(0).toUpperCase() + frequency.slice(1);
-}
-
-const loadGroups = async () => {
-  try {
-    groups.value = await groupService.getUserGroups();
-  } catch (error) {
-    console.error('Failed to load groups:', error);
-    // notificationStore.addNotification({ message: 'Failed to load groups', type: 'error' }); // Optional: can be noisy
-  }
-};
-
-const activeView = ref('today')
-const today = computed(() => startOfDay(new Date()));
-
-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: 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':
-      result = pendingChores.filter(chore => isOverdue(chore));
-      break;
-    case 'today':
-      result = pendingChores.filter(chore => {
-        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; }
+const toggleCompletion = async (chore: ChoreWithCompletion) => {
+  if (chore.current_assignment_id === null) {
+    // If no assignment exists, create one
+    try {
+      const assignment = await choreService.createAssignment({
+        chore_id: chore.id,
+        assigned_to_user_id: chore.created_by_id,
+        due_date: chore.next_due_date
       });
-      break;
-    case 'upcoming':
-      result = pendingChores.filter(chore => {
-        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; }
+      chore.current_assignment_id = assignment.id;
+    } catch (error) {
+      console.error('Failed to create assignment:', error);
+      notificationStore.addNotification({
+        message: t('choresPage.notifications.createAssignmentFailed', 'Failed to create assignment for chore.'),
+        type: 'error'
       });
-      break;
-    case 'completed':
-      result = completedChoresList;
-      break;
-    default: // 'all' (all pending)
-      result = pendingChores;
-  }
-  return result;
-});
-
-const counts = computed(() => {
-  const pending = chores.value.filter(c => !c.is_completed);
-  return {
-    overdue: pending.filter(chore => isOverdue(chore)).length,
-    today: pending.filter(chore => {
-      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: ChoreWithCompletion) => {
-  if (chore.is_completed) return 'completed';
-  if (isOverdue(chore)) return 'overdue';
-  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: ChoreWithCompletion) => {
-  if (chore.is_completed) return '';
-  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 | null) => {
-  if (!dateString) return t('choresPage.formatters.noDueDate');
-  try {
-    const dueDate = startOfDay(new Date(dateString.replace(/-/g, '/')));
-    if (isEqual(dueDate, today.value)) return t('choresPage.formatters.dueToday');
-
-    const tomorrow = addDays(today.value, 1);
-    if (isEqual(dueDate, tomorrow)) return t('choresPage.formatters.dueTomorrow');
-
-    if (isBefore(dueDate, today.value)) return t('choresPage.formatters.overdueFull', { date: formatDate(dateString) });
-
-    return t('choresPage.formatters.dueFull', { date: formatDate(dateString) });
-  } catch {
-    return t('choresPage.formatters.invalidDate')
-  }
-}
-
-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.splice(index, 1, { ...choreToToggle });
-  }
-  cachedChores.value = [...chores.value];
-
-  try {
-    await choreService.updateChore(choreToToggle.id, {
-      is_completed: choreToToggle.is_completed,
-      completed_at: choreToToggle.completed_at,
-    } as ChoreUpdate);
-
-    notificationStore.addNotification({
-      message: t(choreToToggle.is_completed ? 'choresPage.notifications.markedDone' : 'choresPage.notifications.markedNotDone', { name: choreToToggle.name }),
-      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 = originalStatus;
-    choreToToggle.completed_at = originalCompletedAt;
-    if (index !== -1) chores.value.splice(index, 1, { ...choreToToggle });
-    cachedChores.value = [...chores.value];
-
-    notificationStore.addNotification({ message: t('choresPage.notifications.statusUpdateFailed'), type: 'error' });
-  }
-};
-
-
-const setQuickDueDate = (when: 'today' | 'tomorrow' | 'next_week') => {
-  let date = startOfDay(new Date());
-  if (when === 'tomorrow') date = addDays(date, 1);
-  if (when === 'next_week') date = addWeeks(date, 1);
-  choreForm.value.next_due_date = format(date, 'yyyy-MM-dd');
-};
-
-const handleKeyPress = (event: KeyboardEvent) => {
-  const target = event.target as HTMLElement;
-  if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT') {
-    return;
-  }
-
-  if ((event.ctrlKey || event.metaKey) && event.key === 'n') {
-    event.preventDefault();
-    if (!showChoreModal.value) openCreateChoreModal(null);
-  }
-  if ((event.ctrlKey || event.metaKey) && event.key === '/') {
-    event.preventDefault();
-    viewMode.value = viewMode.value === 'calendar' ? 'list' : 'calendar';
-  }
-  if ((event.ctrlKey || event.metaKey) && (event.key === '?' || event.key === '-')) { // Often ? is Shift + /
-    event.preventDefault();
-    showShortcutsModal.value = !showShortcutsModal.value;
-  }
-  if (event.key === 'Escape') {
-    if (showChoreModal.value) showChoreModal.value = false;
-    else if (showDeleteDialog.value) showDeleteDialog.value = false;
-    else if (showShortcutsModal.value) showShortcutsModal.value = false;
-  }
-};
-
-onMounted(() => {
-  window.addEventListener('keydown', handleKeyPress)
-  Promise.all([loadChores(), loadGroups()]);
-})
-
-onUnmounted(() => {
-  window.removeEventListener('keydown', handleKeyPress)
-})
-
-const validateForm = () => {
-  if (!choreForm.value.name.trim()) {
-    notificationStore.addNotification({ message: t('choresPage.validation.nameRequired'), type: 'error' }); return false;
-  }
-  if (choreForm.value.type === 'group' && !choreForm.value.group_id) {
-    notificationStore.addNotification({ message: t('choresPage.validation.groupRequired'), type: 'error' }); return false;
-  }
-  if (choreForm.value.frequency === 'custom' && (!choreForm.value.custom_interval_days || choreForm.value.custom_interval_days < 1)) {
-    notificationStore.addNotification({ message: t('choresPage.validation.intervalRequired'), type: 'error' }); return false;
-  }
-  if (!choreForm.value.next_due_date) {
-    notificationStore.addNotification({ message: t('choresPage.validation.dueDateRequired'), type: 'error' }); return false;
-  }
-  try {
-    new Date(choreForm.value.next_due_date.replace(/-/g, '/')); // check if valid date
-  } catch {
-    notificationStore.addNotification({ message: t('choresPage.validation.invalidDueDate'), type: 'error' }); return false;
-  }
-  return true;
-}
-
-// 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(() => {
-    // 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) {
-    //   // onSubmit() // This is risky; onSubmit usually makes an API call
-    // }
-  }, 3000) // Auto-save after 3 seconds of inactivity
-}
-
-watch(choreForm, () => {
-  if (isEditing.value) {
-    hasUnsavedChanges.value = true; // Mark changes for onBeforeUnload prompt
-    // autoSaveForm() // Trigger auto-save logic if re-enabled
-  }
-}, { deep: true })
-*/
-
-const hasUnsavedChanges = ref(false)
-
-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 && showChoreModal.value) { // Only prompt if modal is open with changes
-    const confirmLeave = window.confirm(t('choresPage.unsavedChangesConfirmation'))
-    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.
+      return;
     }
   }
-})
 
+  const originalCompleted = chore.is_completed;
+  chore.updating = true;
+  const newCompletedStatus = !chore.is_completed;
+  chore.is_completed = newCompletedStatus;
+
+  try {
+    if (newCompletedStatus) {
+      await choreService.completeAssignment(chore.current_assignment_id);
+    } else {
+      const assignmentUpdate: ChoreAssignmentUpdate = { is_complete: false };
+      await choreService.updateAssignment(chore.current_assignment_id, assignmentUpdate);
+    }
+
+    notificationStore.addNotification({
+      message: newCompletedStatus ? t('choresPage.notifications.completed', 'Chore marked as complete!') : t('choresPage.notifications.uncompleted', 'Chore marked as incomplete.'),
+      type: 'success'
+    });
+    await loadChores();
+  } catch (error) {
+    console.error('Failed to update chore completion status:', error);
+    notificationStore.addNotification({ message: t('choresPage.notifications.updateFailed', 'Failed to update chore status.'), type: 'error' });
+    chore.is_completed = originalCompleted;
+  } finally {
+    chore.updating = false;
+  }
+};
 </script>
 
-<style>
-/* Modal styles - (global, as before) */
-.modal-backdrop {
-  position: fixed;
+<template>
+  <div class="container">
+    <header class="flex justify-between items-center">
+      <h1 style="margin-block-start: 0;">{{ t('choresPage.title') }}</h1>
+      <button class="btn btn-primary" @click="openCreateChoreModal">
+        {{ t('choresPage.addChore', '+') }}
+      </button>
+    </header>
+
+    <div v-if="isLoading" class="flex justify-center mt-4">
+      <div class="spinner-dots">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+    </div>
+
+    <div v-else-if="groupedChores.length === 0" class="empty-state-card">
+      <h3>{{ t('choresPage.empty.title', 'No Chores Yet') }}</h3>
+      <p>{{ t('choresPage.empty.message', 'Get started by adding your first chore!') }}</p>
+      <button class="btn btn-primary" @click="openCreateChoreModal">
+        {{ t('choresPage.addFirstChore', 'Add First Chore') }}
+      </button>
+    </div>
+
+    <div v-else class="schedule-list">
+      <div v-for="group in groupedChores" :key="group.date.toISOString()" class="schedule-group">
+        <h2 class="date-header">{{ formatDateHeader(group.date) }}</h2>
+        <div class="neo-item-list-container">
+          <ul class="neo-item-list">
+            <li v-for="chore in group.chores" :key="chore.id" class="neo-list-item">
+              <div class="neo-item-content">
+                <label class="neo-checkbox-label">
+                  <input type="checkbox" :checked="chore.is_completed" @change="toggleCompletion(chore)">
+                  <div class="checkbox-content">
+                    <span class="checkbox-text-span"
+                      :class="{ 'neo-completed-static': chore.is_completed && !chore.updating }">
+                      {{ chore.name }}
+                    </span>
+                    <span v-if="chore.subtext" class="item-time">{{ chore.subtext }}</span>
+                  </div>
+                </label>
+                <div class="neo-item-actions">
+                  <button class="btn btn-sm btn-neutral" @click="openEditChoreModal(chore)">
+                    {{ t('choresPage.edit', 'Edit') }}
+                  </button>
+                  <button class="btn btn-sm btn-danger" @click="confirmDelete(chore)">
+                    {{ t('choresPage.delete', 'Delete') }}
+                  </button>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <!-- Chore Form Modal -->
+    <div v-if="showChoreModal" class="modal-backdrop open" @click.self="showChoreModal = false">
+      <div class="modal-container">
+        <form @submit.prevent="handleFormSubmit">
+          <div class="modal-header">
+            <h3>{{ isEditing ? t('choresPage.editChore', 'Edit Chore') : t('choresPage.createChore', 'Create Chore') }}
+            </h3>
+            <button type="button" @click="showChoreModal = false" class="close-button">
+              &times;
+            </button>
+          </div>
+          <div class="modal-body">
+            <div class="form-group">
+              <label class="form-label" for="chore-name">{{ t('choresPage.form.name', 'Name') }}</label>
+              <input id="chore-name" type="text" v-model="choreForm.name" class="form-input" required>
+            </div>
+            <div class="form-group">
+              <label class="form-label" for="chore-desc">{{ t('choresPage.form.description', 'Description') }}</label>
+              <textarea id="chore-desc" v-model="choreForm.description" class="form-input"></textarea>
+            </div>
+            <div class="form-group">
+              <label class="form-label" for="chore-date">{{ t('choresPage.form.dueDate', 'Due Date') }}</label>
+              <input id="chore-date" type="date" v-model="choreForm.next_due_date" class="form-input" required>
+            </div>
+            <div class="form-group">
+              <label class="form-label">{{ t('choresPage.form.frequency', 'Frequency') }}</label>
+              <div class="radio-group">
+                <label v-for="option in frequencyOptions" :key="option.value" class="radio-label">
+                  <input type="radio" v-model="choreForm.frequency" :value="option.value">
+                  <span class="checkmark radio-mark"></span>
+                  <span>{{ option.label }}</span>
+                </label>
+              </div>
+            </div>
+            <div v-if="choreForm.frequency === 'custom'" class="form-group">
+              <label class="form-label" for="chore-interval">{{ t('choresPage.form.interval', 'Interval (days)')
+                }}</label>
+              <input id="chore-interval" type="number" v-model.number="choreForm.custom_interval_days"
+                class="form-input" placeholder="e.g., 10" min="1">
+            </div>
+            <div class="form-group">
+              <label class="form-label">{{ t('choresPage.form.type', 'Type') }}</label>
+              <div class="radio-group">
+                <label class="radio-label">
+                  <input type="radio" v-model="choreForm.type" value="personal">
+                  <span class="checkmark radio-mark"></span>
+                  <span>{{ t('choresPage.form.personal', 'Personal') }}</span>
+                </label>
+                <label class="radio-label">
+                  <input type="radio" v-model="choreForm.type" value="group">
+                  <span class="checkmark radio-mark"></span>
+                  <span>{{ t('choresPage.form.group', 'Group') }}</span>
+                </label>
+              </div>
+            </div>
+            <div v-if="choreForm.type === 'group'" class="form-group">
+              <label class="form-label" for="chore-group">{{ t('choresPage.form.assignGroup', 'Assign to Group')
+                }}</label>
+              <select id="chore-group" v-model="choreForm.group_id" class="form-input">
+                <option v-for="group in groups" :key="group.id" :value="group.id">{{ group.name }}</option>
+              </select>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-neutral" @click="showChoreModal = false">{{
+              t('choresPage.form.cancel', 'Cancel')
+              }}</button>
+            <button type="submit" class="btn btn-primary">{{ isEditing ? t('choresPage.form.save', 'Save Changes') :
+              t('choresPage.form.create', 'Create') }}</button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- Delete Confirmation Dialog -->
+    <div v-if="showDeleteDialog" class="modal-backdrop open" @click.self="showDeleteDialog = false">
+      <div class="modal-container confirm-modal">
+        <div class="modal-header">
+          <h3>{{ t('choresPage.deleteConfirm.title', 'Confirm Deletion') }}</h3>
+          <button type="button" @click="showDeleteDialog = false" class="close-button">
+            &times;
+          </button>
+        </div>
+        <div class="modal-body">
+          <p>{{ t('choresPage.deleteConfirm.message', 'Really want to delete? This action cannot be undone.') }}</p>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-neutral" @click="showDeleteDialog = false">{{
+            t('choresPage.deleteConfirm.cancel', 'Cancel') }}</button>
+          <button type="button" class="btn btn-danger" @click="deleteChore">{{
+            t('choresPage.deleteConfirm.delete', 'Delete')
+            }}</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.schedule-group {
+  margin-bottom: 2rem;
+  position: relative;
+}
+
+.date-header {
+  font-size: clamp(1rem, 4vw, 1.2rem);
+  font-weight: bold;
+  color: var(--dark);
+  text-transform: none;
+  letter-spacing: normal;
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid var(--dark);
+  position: sticky;
   top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.6);
-  /* Slightly darker backdrop */
+  background-color: var(--light);
+  z-index: 10;
+
+  &::after {
+    display: none; // Hides the default h-tag underline from valerie-ui
+  }
+}
+
+.item-time {
+  font-size: 0.9rem;
+  color: var(--dark);
+  opacity: 0.7;
+  margin-left: 1rem;
+}
+
+.neo-item-list-container {
+  border: 3px solid #111;
+  border-radius: 18px;
+  background: var(--light);
+  box-shadow: 6px 6px 0 #111;
+  overflow: hidden;
+}
+
+/* Neo-style list items from ListDetailPage */
+.neo-item-list {
+  list-style: none;
+  padding: 0.5rem 1rem;
+  margin: 0;
+}
+
+.neo-list-item {
   display: flex;
   align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  padding: 1rem;
-  /* Add padding for small screens so modal doesn't touch edges */
+  padding: 0.75rem 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  position: relative;
+  transition: background-color 0.2s ease;
 }
 
-.modal-container {
-  background: white;
-  border-radius: 12px;
-  border: 3px solid #111;
-  box-shadow: 6px 6px 0 #111;
-  width: 100%;
-  /* Let padding on backdrop control spacing */
-  max-width: 600px;
-  max-height: 90vh;
-  overflow-y: auto;
-  display: flex;
-  /* Added for flex column layout */
-  flex-direction: column;
-  /* Added */
+.neo-list-item:hover {
+  background-color: #f8f8f8;
 }
 
-.modal-header {
-  padding: 1rem 1.5rem;
-  border-bottom: 2px solid #111;
+.neo-list-item:last-child {
+  border-bottom: none;
+}
+
+.neo-item-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  flex-shrink: 0;
-  /* Prevent shrinking */
+  width: 100%;
+  gap: 0.5rem;
 }
 
-.modal-header h3 {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 700;
-}
-
-.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 {
-  padding: 1rem 1.5rem;
-  border-top: 2px solid #111;
+.neo-item-actions {
   display: flex;
-  justify-content: flex-end;
-  gap: 1rem;
-  flex-shrink: 0;
-  /* Prevent shrinking */
+  gap: 0.25rem;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  margin-left: auto;
+
+  .btn {
+    margin-left: 0.25rem;
+  }
 }
 
-/* Form styles (global, as before) */
-.modal-form {
-  /* padding: 1.5rem; No longer needed if modal-body has padding */
+.neo-list-item:hover .neo-item-actions {
+  opacity: 1;
 }
 
-.form-group {
-  margin-bottom: 1.5rem;
-}
-
-.form-row {
-  display: flex;
-  flex-wrap: wrap;
-  /* Allow wrapping on small screens */
-  gap: 1rem;
-  margin-bottom: 1.5rem;
-}
-
-.form-row .form-group {
-  flex: 1 1 200px;
-  /* Allow items to grow and shrink, base size 200px */
+/* Custom Checkbox Styles from ListDetailPage */
+.neo-checkbox-label {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: 0.8em;
+  cursor: pointer;
+  position: relative;
+  width: 100%;
+  font-weight: 500;
+  color: #414856;
+  transition: color 0.3s ease;
   margin-bottom: 0;
 }
 
-.form-group label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-weight: 600;
-  color: #333;
-}
-
-.form-input {
-  width: 100%;
-  padding: 0.75rem;
-  border: 2px solid #111;
-  border-radius: 8px;
-  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.2);
-  /* Softer focus */
-}
-
-.form-input::placeholder {
-  color: #999;
-}
-
-/* Type selector styles */
-.type-selector {
-  display: flex;
-  gap: 1rem;
-  margin-bottom: 1rem;
-  /* Was form-group, consistent */
-}
-
-.type-btn {
-  flex: 1;
-  padding: 0.75rem;
-  border: 2px solid #111;
-  border-radius: 8px;
-  background: white;
-  font-weight: 600;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  transition: all 0.2s ease;
-  min-width: 120px;
-  /* Ensure buttons don't get too small */
-}
-
-.type-btn:hover {
-  background: #f8f9fa;
-}
-
-.type-btn.active {
-  background: #111;
-  color: white;
-}
-
-/* Quick due dates styles */
-.quick-due-dates {
-  display: flex;
-  flex-wrap: wrap;
-  /* Allow wrapping */
-  gap: 0.5rem;
-  margin-bottom: 0.75rem;
-  /* Increased margin */
-}
-
-.btn-outline {
-  padding: 0.5rem 1rem;
-  border: 2px solid #111;
-  border-radius: 6px;
-  background: white;
-  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 (global, as before) */
-.btn {
-  padding: 0.75rem 1.5rem;
-  border-radius: 8px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  border: 2px solid transparent;
-  /* Base border */
-}
-
-.btn-primary {
-  background: #111;
-  color: white;
-  border-color: #111;
-}
-
-.btn-primary:hover {
-  background: #333;
-  border-color: #333;
-}
-
-.btn-neutral {
-  background: white;
-  color: #333;
-  border-color: #111;
-}
-
-.btn-neutral:hover {
-  background: #f8f9fa;
-}
-
-.btn-icon {
-  padding: 0.5rem;
-  border: none;
-  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 */
-}
-
-.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: #1e1e1e;
-    /* Slightly different dark */
-    border-color: #f0f0f0;
-    /* Lighter border for dark */
-    box-shadow: 6px 6px 0 #f0f0f0;
-  }
-
-  .modal-header,
-  .modal-footer {
-    border-color: #444;
-    /* Darker separator */
-  }
-
-  .modal-header h3 {
-    color: #f0f0f0;
-  }
-
-  .form-group label {
-    color: #ccc;
-    /* Lighter label */
-  }
-
-  .form-input {
-    background: #2a2a2a;
-    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: #777;
-  }
-
-  .type-btn {
-    background: #2a2a2a;
-    border-color: #555;
-    color: #ccc;
-  }
-
-  .type-btn:hover {
-    background: #333;
-  }
-
-  .type-btn.active {
-    background: #f0f0f0;
-    color: #111;
-    border-color: #f0f0f0;
-  }
-
-  .btn-outline {
-    background: #2a2a2a;
-    border-color: #555;
-    color: #ccc;
-  }
-
-  .btn-outline:hover {
-    background: #333;
-  }
-
-  .btn-neutral {
-    background: #2a2a2a;
-    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: #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>
-/* 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;
-  margin: 0 auto;
-}
-
-.page-padding {
-  /* This class seems redundant if neo-container is always used */
-  /* padding: 1rem; max-width: 1200px; margin: 0 auto; */
-}
-
-/* Header styles */
-.neo-list-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  /* 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: rgb(255, 248, 240);
-  border-radius: 18px;
-  border: 3px solid #111;
-  box-shadow: 6px 6px 0 #111;
-}
-
-.header-left {
-  flex: 1;
-  min-width: 280px;
-  /* Ensure it has some minimum width before wrapping */
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  flex-shrink: 0;
-}
-
-.neo-title {
-  font-size: 2.5rem;
-  font-weight: 900;
-  margin: 0 0 1rem 0;
-  line-height: 1.2;
-  color: #111;
-}
-
-/* Tab styles */
-.view-tabs {
-  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 {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.6rem 1rem;
-  border: 2px solid #111;
-  background: #f5f5f5;
-  color: #333;
-  font-weight: 600;
-  font-size: 0.9rem;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  box-shadow: 2px 2px 0 #111;
-}
-
-.neo-tab-btn .material-icons {
-  font-size: 1.1rem;
-}
-
-.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: rgb(255, 248, 240);
-  box-shadow: 3px 3px 0 #111;
-  /* Ensure active shadow is consistent */
-}
-
-.neo-tab-count {
-  background: rgba(255, 255, 255, 0.2);
-  color: rgb(255, 248, 240);
-  /* 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 {
-  background: #e0e0e0;
-  color: #333;
-}
-
-/* View toggle styles */
-.neo-view-toggle {
-  display: flex;
-  gap: 0.25rem;
-  /* Reduced gap for tighter packing */
-  background: #f5f5f5;
-  padding: 0.25rem;
-  border-radius: 8px;
-  border: 2px solid #111;
-}
-
-.neo-toggle-btn {
-  border: none;
-  background: transparent;
-  color: #333;
-  padding: 0.5rem 0.75rem;
-  /* Adjusted padding */
-  font-weight: 600;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.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: rgb(255, 248, 240);
-}
-
-/* Action button styles */
-.neo-action-button {
-  background: rgb(255, 178, 107);
-  border: 3px solid #111;
-  padding: 0.6rem 1rem;
-  font-weight: 700;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  box-shadow: 3px 3px 0 #111;
-  transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
-}
-
-.neo-action-button .material-icons {
-  font-size: 1.2rem;
-}
-
-
-.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;
-  margin: 2rem 0;
-  border: 3px solid #111;
-  border-radius: 18px;
-  background: rgb(255, 248, 240);
-  box-shadow: 6px 6px 0 #111;
-}
-
-.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: 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: 2rem;
-    /* Slightly smaller title on mobile */
-  }
-
-  .view-tabs {
-    /* 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: block; height: 5px; } */
-  /* .view-tabs::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px;} */
-
-
-  .neo-tab-btn {
-    font-size: 0.85rem;
-    /* Slightly smaller tab text */
-    padding: 0.5rem 0.75rem;
-  }
-
-  .neo-view-toggle {
-    /* 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-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 (as before) */
-@media (prefers-color-scheme: dark) {
-  .neo-list-header {
-    background: #1a1a1a;
-    border-color: #fff;
-    box-shadow: 6px 6px 0 #fff;
-  }
-
-  .neo-title {
-    color: #fff;
-  }
-
-  .neo-tab-btn {
-    background: #2a2a2a;
-    border-color: #fff;
-    color: #fff;
-    box-shadow: 2px 2px 0 #fff;
-  }
-
-  .neo-tab-btn:hover:not(:disabled) {
-    box-shadow: 3px 3px 0 #fff;
-  }
-
-  .neo-tab-btn.active {
-    background: #fff;
-    color: #111;
-  }
-
-  .neo-tab-btn:not(.active) .neo-tab-count {
-    background: #333;
-    color: #fff;
-  }
-
-  .neo-view-toggle {
-    background: #2a2a2a;
-    border-color: #fff;
-  }
-
-  .neo-toggle-btn {
-    color: #fff;
-  }
-
-  .neo-toggle-btn:hover:not(.active):not(:disabled) {
-    background: #333;
-  }
-
-  .neo-toggle-btn.active {
-    background: #fff;
-    color: #111;
-  }
-
-  .neo-action-button {
-    background: #1a1a1a;
-    border-color: #fff;
-    color: #fff;
-    box-shadow: 3px 3px 0 #fff;
-  }
-
-  .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: rgb(255, 248, 240);
-  }
-}
-
-/* Calendar View Styles */
-.calendar-view {
-  background: rgb(255, 248, 240);
-  border-radius: 18px;
-  border: 3px solid #111;
-  box-shadow: 6px 6px 0 #111;
-  padding: 1.5rem;
-  margin-bottom: 2rem;
-}
-
-.calendar-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1.5rem;
-}
-
-.calendar-header h2 {
-  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;
-  gap: 0.5rem;
-}
-
-.calendar-weekdays {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 0.25rem;
-  /* Smaller gap for weekdays */
-  margin-bottom: 0.5rem;
-}
-
-.weekday {
-  text-align: center;
-  font-weight: 600;
-  color: #666;
-  padding: 0.5rem 0.25rem;
-  font-size: 0.85rem;
-}
-
-.calendar-days {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 0.5rem;
-}
-
-.calendar-day {
-  /* 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.25rem;
-  /* Reduced gap inside day cell */
-  transition: all 0.2s ease;
+.neo-checkbox-label input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
   position: relative;
-  /* For positioning add button */
-  overflow: hidden;
-  /* Prevent content overflow */
-}
-
-.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.6;
-  background: #eee;
-}
-
-.calendar-day.today {
-  background: #fff0b3;
-  border-color: #ffc107;
-}
-
-/* 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;
-}
-
-.day-number {
-  font-weight: 600;
-  font-size: 1rem;
-}
-
-.add-chore-indicator {
-  /* visibility: hidden; Replaced with subtle always visible */
-  opacity: 0.6;
-  padding: 0.1rem;
+  height: 20px;
+  width: 20px;
+  outline: none;
+  border: 2px solid #b8c1d1;
+  margin: 0;
+  cursor: pointer;
   background: transparent;
-  border: none;
-  color: #007bff;
-  cursor: pointer;
-  border-radius: 50%;
-  transition: all 0.2s ease;
-  line-height: 1;
+  border-radius: 6px;
+  display: grid;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.add-chore-indicator .material-icons {
-  font-size: 1.3rem;
+.neo-checkbox-label input[type="checkbox"]:hover {
+  border-color: var(--secondary);
+  transform: scale(1.05);
 }
 
-.calendar-day:hover .add-chore-indicator,
-.calendar-day:focus-within .add-chore-indicator,
-/* Show on focus as well */
-.add-chore-indicator:focus {
+.neo-checkbox-label input[type="checkbox"]::before,
+.neo-checkbox-label input[type="checkbox"]::after {
+  content: none;
+}
+
+.neo-checkbox-label input[type="checkbox"]::after {
+  content: "";
+  position: absolute;
+  opacity: 0;
+  left: 5px;
+  top: 1px;
+  width: 6px;
+  height: 12px;
+  border: solid var(--primary);
+  border-width: 0 3px 3px 0;
+  transform: rotate(45deg) scale(0);
+  transition: all 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
+  transition-property: transform, opacity;
+}
+
+.neo-checkbox-label input[type="checkbox"]:checked {
+  border-color: var(--primary);
+}
+
+.neo-checkbox-label input[type="checkbox"]:checked::after {
   opacity: 1;
-  color: #0056b3;
-  transform: scale(1.1);
+  transform: rotate(45deg) scale(1);
 }
 
-.add-chore-indicator:hover {
-  color: #f57c00;
-  /* Distinct hover for the button itself */
-}
-
-
-.day-chores {
-  flex: 1;
-  overflow-y: auto;
-  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 {
+.checkbox-content {
   display: flex;
   align-items: center;
-  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;
+  gap: 0.5rem;
+  width: 100%;
 }
 
-.calendar-chore-item:hover {
-  background: #f0f8ff;
-  transform: translateX(2px);
-}
-
-.calendar-chore-item.is-completed {
-  opacity: 0.6;
-  text-decoration: line-through;
-}
-
-.calendar-chore-item .chore-name {
+.checkbox-text-span {
+  position: relative;
+  transition: color 0.4s ease, opacity 0.4s ease;
+  width: fit-content;
+  font-weight: 500;
+  color: var(--dark);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  flex-grow: 1;
 }
 
-
-.chore-status {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
+/* Animated strikethrough line */
+.checkbox-text-span::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: -0.1em;
+  right: -0.1em;
+  height: 2px;
+  background: var(--dark);
+  transform: scaleX(0);
+  transform-origin: right;
+  transition: transform 0.4s cubic-bezier(0.77, 0, .18, 1);
 }
 
-.chore-status.overdue {
-  background: #dc3545;
+.neo-checkbox-label input[type="checkbox"]:checked~.checkbox-content .checkbox-text-span {
+  color: var(--dark);
+  opacity: 0.6;
 }
 
-.chore-status.today {
-  background: #007bff;
+.neo-checkbox-label input[type="checkbox"]:checked~.checkbox-content .checkbox-text-span::before {
+  transform: scaleX(1);
+  transform-origin: left;
+  transition: transform 0.4s cubic-bezier(0.77, 0, .18, 1) 0.1s;
 }
 
-.chore-status.upcoming {
-  background: #28a745;
+.neo-completed-static {
+  color: var(--dark);
+  opacity: 0.6;
+  position: relative;
 }
 
-.chore-status.completed {
-  background: #6c757d;
+.neo-completed-static::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: -0.1em;
+  right: -0.1em;
+  height: 2px;
+  background: var(--dark);
+  transform: scaleX(1);
+  transform-origin: left;
 }
-
-@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: 1rem;
-  /* Increased gap */
-  margin-bottom: 2rem;
-  width: 100%;
-}
-
-.chore-card {
-  background: white;
-  border-radius: 12px;
-  border: 2px solid #111;
-  box-shadow: 3px 3px 0 #111;
-  padding: 1.25rem 1.5rem;
-  /* Slightly more padding */
-  display: flex;
-  gap: 1rem;
-  transition: all 0.2s ease;
-  align-items: flex-start;
-  /* Align status dot with top of content */
-}
-
-.chore-card:hover {
-  transform: translateY(-1px);
-  box-shadow: 4px 4px 0 #111;
-}
-
-.chore-card.is-overdue {
-  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;
-  flex-direction: column;
-  /* Stack main info and actions vertically */
-  gap: 0.75rem;
-}
-
-.chore-main-info {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  /* Header and meta stacked */
-  gap: 0.5rem;
-}
-
-.chore-header {
-  display: flex;
-  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.2rem;
-  /* Slightly larger chore name */
-  font-weight: 600;
-  /* 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: 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.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;
-  flex-direction: column;
-  /* Stack meta items */
-  gap: 0.5rem;
-  font-size: 0.9rem;
-  /* Slightly larger meta text */
-  color: #555;
-}
-
-.chore-meta>div {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-}
-
-/* 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-text {
-  color: #007bff;
-  font-weight: 500;
-}
-
-.chore-description {
-  font-size: 0.9rem;
-  color: #666;
-  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;
-  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 {
-    background: #1a1a1a;
-    border-color: #fff;
-    box-shadow: 3px 3px 0 #fff;
-  }
-
-  .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: #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;
-  }
-}
-
-/* Responsive Styles for List View */
-@media (max-width: 768px) {
-  .chores-grid {
-    padding: 0;
-    gap: 0.75rem;
-  }
-
-  .chore-card {
-    padding: 1rem;
-  }
-
-  .chore-header h3 {
-    font-size: 1.1rem;
-  }
-
-  .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.25rem;
-  }
-
-  .chore-header h3 {
-    font-size: 1rem;
-  }
-}
-
-
-/* Transition Animations (as before) */
-.chore-list-enter-active,
-.chore-list-leave-active {
-  transition: all 0.3s ease;
-}
-
-.chore-list-enter-from,
-.chore-list-leave-to {
-  opacity: 0;
-  transform: translateY(20px) scale(0.95);
-  /* Slightly different animation */
-}
-
-.chore-list-move {
-  transition: transform 0.3s ease;
-}
-
-/* Keyboard Shortcuts Modal Styles (as before) */
-.shortcuts-modal {
-  max-width: 500px;
-}
-
-.shortcuts-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.shortcut-item {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  /* Reduced gap */
-  padding: 0.75rem;
-  background: #f5f5f5;
-  border-radius: 8px;
-  border: 2px solid #111;
-}
-
-.shortcut-keys {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-  min-width: 110px;
-  /* Adjusted min-width */
-}
-
-.shortcut-description {
-  font-weight: 500;
-  color: #333;
-  font-size: 0.9rem;
-}
-
-kbd {
-  background: white;
-  border: 2px solid #111;
-  border-radius: 4px;
-  padding: 0.2rem 0.5rem;
-  font-family: monospace;
-  font-size: 0.9rem;
-  box-shadow: 1px 1px 0 #111;
-  /* Softer shadow for kbd */
-  color: #111;
-}
-
-/* Dark Mode Support for Shortcuts Modal (as before) */
-@media (prefers-color-scheme: dark) {
-  .shortcut-item {
-    background: #2a2a2a;
-    border-color: #fff;
-  }
-
-  .shortcut-description {
-    color: #fff;
-  }
-
-  kbd {
-    background: #1a1a1a;
-    border-color: #fff;
-    box-shadow: 1px 1px 0 #fff;
-    color: #fff;
-  }
-}
-
-/* Remove old keyboard shortcuts help styles (as before) */
-.keyboard-shortcuts-help,
-.shortcuts-tooltip {
-  display: none;
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/fe/src/pages/GroupsPage.vue b/fe/src/pages/GroupsPage.vue
index 8578b7a..d08674d 100644
--- a/fe/src/pages/GroupsPage.vue
+++ b/fe/src/pages/GroupsPage.vue
@@ -85,7 +85,7 @@
           <div class="modal-body">
             <div class="form-group">
               <label for="newGroupNameInput" class="form-label">{{ t('groupsPage.createDialog.groupNameLabel')
-                }}</label>
+              }}</label>
               <input type="text" id="newGroupNameInput" v-model="newGroupName" class="form-input" required
                 ref="newGroupNameInputRef" />
               <p v-if="createGroupFormError" class="form-error-text">{{ createGroupFormError }}</p>
@@ -106,7 +106,7 @@
           <div class="modal-body">
             <div class="form-group">
               <label for="joinInviteCodeInput" class="form-label">{{ t('groupsPage.joinGroup.inputLabel', 'Invite Code')
-                }}</label>
+              }}</label>
               <input type="text" id="joinInviteCodeInput" v-model="inviteCodeToJoin" class="form-input"
                 :placeholder="t('groupsPage.joinGroup.inputPlaceholder')" required ref="joinInviteCodeInputRef" />
               <p v-if="joinGroupFormError" class="form-error-text">{{ joinGroupFormError }}</p>
@@ -302,7 +302,9 @@ const handleJoinGroup = async () => {
   joinGroupFormError.value = null;
   joiningGroup.value = true;
   try {
-    const response = await apiClient.post(API_ENDPOINTS.INVITES.ACCEPT(inviteCodeToJoin.value));
+    const response = await apiClient.post(API_ENDPOINTS.INVITES.ACCEPT, {
+      code: inviteCodeToJoin.value.trim()
+    });
     const joinedGroup = response.data as Group; // Adjust based on actual API response for joined group
     if (joinedGroup && joinedGroup.id && joinedGroup.name) {
       // Check if group already in list to prevent duplicates if API returns the group info
diff --git a/fe/src/types/chore.ts b/fe/src/types/chore.ts
index af1c3f7..d2e3fcc 100644
--- a/fe/src/types/chore.ts
+++ b/fe/src/types/chore.ts
@@ -34,7 +34,7 @@ export interface ChoreUpdate extends Partial<ChoreCreate> { }
 export interface ChoreAssignment {
   id: number
   chore_id: number
-  assigned_to_id: number
+  assigned_to_user_id: number
   assigned_by_id: number
   due_date: string
   is_complete: boolean
@@ -47,7 +47,7 @@ export interface ChoreAssignment {
 
 export interface ChoreAssignmentCreate {
   chore_id: number
-  assigned_to_id: number
+  assigned_to_user_id: number
   due_date: string
 }
 
diff --git a/fe/vite.config.ts b/fe/vite.config.ts
index 3d02c4f..a0f3080 100644
--- a/fe/vite.config.ts
+++ b/fe/vite.config.ts
@@ -20,7 +20,7 @@ const pwaOptions: Partial<VitePWAOptions> = {
     name: 'mitlist',
     short_name: 'mitlist',
     description: 'mitlist pwa',
-    theme_color: '#ff7b54',
+    theme_color: '#fff8f0',
     background_color: '#f3f3f3',
     display: 'standalone',
     orientation: 'portrait',