diff --git a/fe/src/i18n/de.json b/fe/src/i18n/de.json
index 838bc94..ab6a3ff 100644
--- a/fe/src/i18n/de.json
+++ b/fe/src/i18n/de.json
@@ -270,5 +270,292 @@
       "removeMemberSuccess": "DE: Member removed successfully",
       "removeMemberFailed": "DE: Failed to remove member"
     }
+  },
+  "accountPage": {
+    "title": "Account Settings",
+    "loadingProfile": "Loading profile...",
+    "retryButton": "Retry",
+    "profileSection": {
+      "header": "Profile Information",
+      "nameLabel": "Name",
+      "emailLabel": "Email",
+      "saveButton": "Save Changes"
+    },
+    "passwordSection": {
+      "header": "Change Password",
+      "currentPasswordLabel": "Current Password",
+      "newPasswordLabel": "New Password",
+      "changeButton": "Change Password"
+    },
+    "notificationsSection": {
+      "header": "Notification Preferences",
+      "emailNotificationsLabel": "Email Notifications",
+      "emailNotificationsDescription": "Receive email notifications for important updates",
+      "listUpdatesLabel": "List Updates",
+      "listUpdatesDescription": "Get notified when lists are updated",
+      "groupActivitiesLabel": "Group Activities",
+      "groupActivitiesDescription": "Receive notifications for group activities"
+    },
+    "notifications": {
+      "profileLoadFailed": "Failed to load profile",
+      "profileUpdateSuccess": "Profile updated successfully",
+      "profileUpdateFailed": "Failed to update profile",
+      "passwordFieldsRequired": "Please fill in both current and new password fields.",
+      "passwordTooShort": "New password must be at least 8 characters long.",
+      "passwordChangeSuccess": "Password changed successfully",
+      "passwordChangeFailed": "Failed to change password",
+      "preferencesUpdateSuccess": "Preferences updated successfully",
+      "preferencesUpdateFailed": "Failed to update preferences"
+    },
+    "saving": "Saving..."
+  },
+  "signupPage": {
+    "header": "Sign Up",
+    "fullNameLabel": "Full Name",
+    "emailLabel": "Email",
+    "passwordLabel": "Password",
+    "confirmPasswordLabel": "Confirm Password",
+    "togglePasswordVisibility": "Toggle password visibility",
+    "submitButton": "Sign Up",
+    "loginLink": "Already have an account? Login",
+    "validation": {
+      "nameRequired": "Name is required",
+      "emailRequired": "Email is required",
+      "emailInvalid": "Invalid email format",
+      "passwordRequired": "Password is required",
+      "passwordLength": "Password must be at least 8 characters",
+      "confirmPasswordRequired": "Please confirm your password",
+      "passwordsNoMatch": "Passwords do not match"
+    },
+    "notifications": {
+      "signupFailed": "Signup failed. Please try again.",
+      "signupSuccess": "Account created successfully. Please login."
+    }
+  },
+  "listDetailPage": {
+    "loading": {
+      "list": "Loading list...",
+      "items": "Loading items...",
+      "ocrProcessing": "Processing image...",
+      "addingOcrItems": "Adding OCR items...",
+      "costSummary": "Loading summary...",
+      "expenses": "Loading expenses...",
+      "settlement": "Processing settlement..."
+    },
+    "errors": {
+      "fetchFailed": "Failed to load list details.",
+      "genericLoadFailure": "Group not found or an error occurred.",
+      "ocrNoItems": "No items extracted from the image.",
+      "ocrFailed": "Failed to process image.",
+      "addItemFailed": "Failed to add item.",
+      "updateItemFailed": "Failed to update item.",
+      "updateItemPriceFailed": "Failed to update item price.",
+      "deleteItemFailed": "Failed to delete item.",
+      "addOcrItemsFailed": "Failed to add OCR items.",
+      "fetchItemsFailed": "Failed to load items: {errorMessage}",
+      "loadCostSummaryFailed": "Failed to load cost summary."
+    },
+    "retryButton": "Retry",
+    "buttons": {
+      "addViaOcr": "Add via OCR",
+      "addItem": "Add",
+      "addItems": "Add Items",
+      "cancel": "Cancel",
+      "confirm": "Confirm",
+      "saveChanges": "Save Changes",
+      "close": "Close",
+      "costSummary": "Cost Summary"
+    },
+    "badges": {
+      "groupList": "Group List",
+      "personalList": "Personal List"
+    },
+    "items": {
+      "emptyState": {
+        "title": "No Items Yet!",
+        "message": "Add some items using the form below."
+      },
+      "addItemForm": {
+        "placeholder": "Add a new item",
+        "quantityPlaceholder": "Qty",
+        "itemNameSrLabel": "New item name",
+        "quantitySrLabel": "Quantity"
+      },
+      "pricePlaceholder": "Price",
+      "editItemAriaLabel": "Edit item",
+      "deleteItemAriaLabel": "Delete item"
+    },
+    "modals": {
+      "ocr": {
+        "title": "Add Items via OCR",
+        "uploadLabel": "Upload Image"
+      },
+      "confirmation": {
+        "title": "Confirmation"
+      },
+      "editItem": {
+        "title": "Edit Item",
+        "nameLabel": "Item Name",
+        "quantityLabel": "Quantity"
+      },
+      "costSummary": {
+        "title": "List Cost Summary",
+        "totalCostLabel": "Total List Cost:",
+        "equalShareLabel": "Equal Share Per User:",
+        "participantsLabel": "Participating Users:",
+        "userBalancesHeader": "User Balances",
+        "tableHeaders": {
+          "user": "User",
+          "itemsAddedValue": "Items Added Value",
+          "amountDue": "Amount Due",
+          "balance": "Balance"
+        },
+        "emptyState": "No cost summary available."
+      },
+      "settleShare": {
+        "title": "Settle Share",
+        "settleAmountFor": "Settle amount for {userName}:",
+        "amountLabel": "Amount",
+        "errors": {
+            "enterAmount": "Please enter an amount.",
+            "positiveAmount": "Please enter a positive amount.",
+            "exceedsRemaining": "Amount cannot exceed remaining: {amount}.",
+            "noSplitSelected": "Error: No split selected."
+        }
+      }
+    },
+    "confirmations": {
+      "updateMessage": "Mark '{itemName}' as {status}?",
+      "statusComplete": "complete",
+      "statusIncomplete": "incomplete",
+      "deleteMessage": "Delete '{itemName}'? This cannot be undone."
+    },
+    "notifications": {
+      "itemAddedSuccess": "Item added successfully.",
+      "itemsAddedSuccessOcr": "{count} item(s) added successfully from OCR.",
+      "itemUpdatedSuccess": "Item updated successfully.",
+      "itemDeleteSuccess": "Item deleted successfully.",
+      "enterItemName": "Please enter an item name.",
+      "costSummaryLoadFailed": "Failed to load cost summary.",
+      "cannotSettleOthersShares": "You can only settle your own shares.",
+      "settlementDataMissing": "Cannot process settlement: missing data.",
+      "settleShareSuccess": "Share settled successfully!",
+      "settleShareFailed": "Failed to settle share."
+    },
+    "expensesSection": {
+      "title": "Expenses",
+      "addExpenseButton": "Add Expense",
+      "loading": "Loading expenses...",
+      "emptyState": "No expenses recorded for this list yet.",
+      "paidBy": "Paid by:",
+      "onDate": "on",
+      "owes": "owes",
+      "paidAmount": "Paid:",
+      "activityLabel": "Activity:",
+      "byUser": "by",
+      "settleShareButton": "Settle My Share",
+      "retryButton": "Retry"
+    },
+    "status": {
+      "settled": "Settled",
+      "partiallySettled": "Partially Settled",
+      "unsettled": "Unsettled",
+      "paid": "Paid",
+      "partiallyPaid": "Partially Paid",
+      "unpaid": "Unpaid",
+      "unknown": "Unknown Status"
+    }
+  },
+  "myChoresPage": {
+    "title": "My Assigned Chores",
+    "showCompletedToggle": "Show Completed",
+    "timelineHeaders": {
+      "overdue": "Overdue",
+      "today": "Due Today",
+      "thisWeek": "This Week",
+      "later": "Later",
+      "completed": "Completed"
+    },
+    "choreCard": {
+      "personal": "Personal",
+      "group": "Group",
+      "duePrefix": "Due",
+      "completedPrefix": "Completed",
+      "dueToday": "Due Today",
+      "markCompleteButton": "Mark Complete"
+    },
+    "frequencies": {
+      "one_time": "One Time",
+      "daily": "Daily",
+      "weekly": "Weekly",
+      "monthly": "Monthly",
+      "custom": "Custom",
+      "unknown": "Unknown Frequency"
+    },
+    "dates": {
+      "invalidDate": "Invalid Date",
+      "unknownDate": "Unknown Date"
+    },
+    "emptyState": {
+      "title": "No Assignments Yet!",
+      "noAssignmentsPending": "You have no pending chore assignments.",
+      "noAssignmentsAll": "You have no chore assignments (completed or pending).",
+      "viewAllChoresButton": "View All Chores"
+    },
+    "notifications": {
+      "loadFailed": "Failed to load assignments",
+      "markedComplete": "Marked \"{choreName}\" as complete!",
+      "markCompleteFailed": "Failed to mark assignment as complete"
+    }
+  },
+  "personalChoresPage": {
+    "title": "Personal Chores",
+    "newChoreButton": "New Chore",
+    "editButton": "Edit",
+    "deleteButton": "Delete",
+    "cancelButton": "Cancel",
+    "saveButton": "Save",
+    "modals": {
+      "editChoreTitle": "Edit Chore",
+      "newChoreTitle": "New Chore",
+      "deleteChoreTitle": "Delete Chore"
+    },
+    "form": {
+      "nameLabel": "Name",
+      "descriptionLabel": "Description",
+      "frequencyLabel": "Frequency",
+      "intervalLabel": "Interval (days)",
+      "dueDateLabel": "Next Due Date"
+    },
+    "deleteDialog": {
+      "confirmationText": "Are you sure you want to delete this chore?"
+    },
+    "frequencies": {
+      "one_time": "One Time",
+      "daily": "Daily",
+      "weekly": "Weekly",
+      "monthly": "Monthly",
+      "custom": "Custom",
+      "unknown": "Unknown Frequency"
+    },
+    "dates": {
+      "invalidDate": "Invalid Date",
+      "duePrefix": "Due"
+    },
+    "notifications": {
+      "loadFailed": "Failed to load personal chores",
+      "updateSuccess": "Personal chore updated successfully",
+      "createSuccess": "Personal chore created successfully",
+      "saveFailed": "Failed to save personal chore",
+      "deleteSuccess": "Personal chore deleted successfully",
+      "deleteFailed": "Failed to delete personal chore"
+    }
+  },
+  "indexPage": {
+    "welcomeMessage": "Welcome to Valerie UI App",
+    "mainPageInfo": "This is the main index page.",
+    "sampleTodosHeader": "Sample Todos (from IndexPage data)",
+    "totalCountLabel": "Total count from meta:",
+    "noTodos": "No todos to display."
   }
 }
diff --git a/fe/src/i18n/en.json b/fe/src/i18n/en.json
index 133984c..8e85b52 100644
--- a/fe/src/i18n/en.json
+++ b/fe/src/i18n/en.json
@@ -270,5 +270,292 @@
       "removeMemberSuccess": "Member removed successfully",
       "removeMemberFailed": "Failed to remove member"
     }
+  },
+  "accountPage": {
+    "title": "Account Settings",
+    "loadingProfile": "Loading profile...",
+    "retryButton": "Retry",
+    "profileSection": {
+      "header": "Profile Information",
+      "nameLabel": "Name",
+      "emailLabel": "Email",
+      "saveButton": "Save Changes"
+    },
+    "passwordSection": {
+      "header": "Change Password",
+      "currentPasswordLabel": "Current Password",
+      "newPasswordLabel": "New Password",
+      "changeButton": "Change Password"
+    },
+    "notificationsSection": {
+      "header": "Notification Preferences",
+      "emailNotificationsLabel": "Email Notifications",
+      "emailNotificationsDescription": "Receive email notifications for important updates",
+      "listUpdatesLabel": "List Updates",
+      "listUpdatesDescription": "Get notified when lists are updated",
+      "groupActivitiesLabel": "Group Activities",
+      "groupActivitiesDescription": "Receive notifications for group activities"
+    },
+    "notifications": {
+      "profileLoadFailed": "Failed to load profile",
+      "profileUpdateSuccess": "Profile updated successfully",
+      "profileUpdateFailed": "Failed to update profile",
+      "passwordFieldsRequired": "Please fill in both current and new password fields.",
+      "passwordTooShort": "New password must be at least 8 characters long.",
+      "passwordChangeSuccess": "Password changed successfully",
+      "passwordChangeFailed": "Failed to change password",
+      "preferencesUpdateSuccess": "Preferences updated successfully",
+      "preferencesUpdateFailed": "Failed to update preferences"
+    },
+    "saving": "Saving..."
+  },
+  "signupPage": {
+    "header": "Sign Up",
+    "fullNameLabel": "Full Name",
+    "emailLabel": "Email",
+    "passwordLabel": "Password",
+    "confirmPasswordLabel": "Confirm Password",
+    "togglePasswordVisibility": "Toggle password visibility",
+    "submitButton": "Sign Up",
+    "loginLink": "Already have an account? Login",
+    "validation": {
+      "nameRequired": "Name is required",
+      "emailRequired": "Email is required",
+      "emailInvalid": "Invalid email format",
+      "passwordRequired": "Password is required",
+      "passwordLength": "Password must be at least 8 characters",
+      "confirmPasswordRequired": "Please confirm your password",
+      "passwordsNoMatch": "Passwords do not match"
+    },
+    "notifications": {
+      "signupFailed": "Signup failed. Please try again.",
+      "signupSuccess": "Account created successfully. Please login."
+    }
+  },
+  "listDetailPage": {
+    "loading": {
+      "list": "Loading list...",
+      "items": "Loading items...",
+      "ocrProcessing": "Processing image...",
+      "addingOcrItems": "Adding OCR items...",
+      "costSummary": "Loading summary...",
+      "expenses": "Loading expenses...",
+      "settlement": "Processing settlement..."
+    },
+    "errors": {
+      "fetchFailed": "Failed to load list details.",
+      "genericLoadFailure": "Group not found or an error occurred.",
+      "ocrNoItems": "No items extracted from the image.",
+      "ocrFailed": "Failed to process image.",
+      "addItemFailed": "Failed to add item.",
+      "updateItemFailed": "Failed to update item.",
+      "updateItemPriceFailed": "Failed to update item price.",
+      "deleteItemFailed": "Failed to delete item.",
+      "addOcrItemsFailed": "Failed to add OCR items.",
+      "fetchItemsFailed": "Failed to load items: {errorMessage}",
+      "loadCostSummaryFailed": "Failed to load cost summary."
+    },
+    "retryButton": "Retry",
+    "buttons": {
+      "addViaOcr": "Add via OCR",
+      "addItem": "Add",
+      "addItems": "Add Items",
+      "cancel": "Cancel",
+      "confirm": "Confirm",
+      "saveChanges": "Save Changes",
+      "close": "Close",
+      "costSummary": "Cost Summary"
+    },
+    "badges": {
+      "groupList": "Group List",
+      "personalList": "Personal List"
+    },
+    "items": {
+      "emptyState": {
+        "title": "No Items Yet!",
+        "message": "Add some items using the form below."
+      },
+      "addItemForm": {
+        "placeholder": "Add a new item",
+        "quantityPlaceholder": "Qty",
+        "itemNameSrLabel": "New item name",
+        "quantitySrLabel": "Quantity"
+      },
+      "pricePlaceholder": "Price",
+      "editItemAriaLabel": "Edit item",
+      "deleteItemAriaLabel": "Delete item"
+    },
+    "modals": {
+      "ocr": {
+        "title": "Add Items via OCR",
+        "uploadLabel": "Upload Image"
+      },
+      "confirmation": {
+        "title": "Confirmation"
+      },
+      "editItem": {
+        "title": "Edit Item",
+        "nameLabel": "Item Name",
+        "quantityLabel": "Quantity"
+      },
+      "costSummary": {
+        "title": "List Cost Summary",
+        "totalCostLabel": "Total List Cost:",
+        "equalShareLabel": "Equal Share Per User:",
+        "participantsLabel": "Participating Users:",
+        "userBalancesHeader": "User Balances",
+        "tableHeaders": {
+          "user": "User",
+          "itemsAddedValue": "Items Added Value",
+          "amountDue": "Amount Due",
+          "balance": "Balance"
+        },
+        "emptyState": "No cost summary available."
+      },
+      "settleShare": {
+        "title": "Settle Share",
+        "settleAmountFor": "Settle amount for {userName}:",
+        "amountLabel": "Amount",
+        "errors": {
+            "enterAmount": "Please enter an amount.",
+            "positiveAmount": "Please enter a positive amount.",
+            "exceedsRemaining": "Amount cannot exceed remaining: {amount}.",
+            "noSplitSelected": "Error: No split selected."
+        }
+      }
+    },
+    "confirmations": {
+      "updateMessage": "Mark '{itemName}' as {status}?",
+      "statusComplete": "complete",
+      "statusIncomplete": "incomplete",
+      "deleteMessage": "Delete '{itemName}'? This cannot be undone."
+    },
+    "notifications": {
+      "itemAddedSuccess": "Item added successfully.",
+      "itemsAddedSuccessOcr": "{count} item(s) added successfully from OCR.",
+      "itemUpdatedSuccess": "Item updated successfully.",
+      "itemDeleteSuccess": "Item deleted successfully.",
+      "enterItemName": "Please enter an item name.",
+      "costSummaryLoadFailed": "Failed to load cost summary.",
+      "cannotSettleOthersShares": "You can only settle your own shares.",
+      "settlementDataMissing": "Cannot process settlement: missing data.",
+      "settleShareSuccess": "Share settled successfully!",
+      "settleShareFailed": "Failed to settle share."
+    },
+    "expensesSection": {
+      "title": "Expenses",
+      "addExpenseButton": "Add Expense",
+      "loading": "Loading expenses...",
+      "emptyState": "No expenses recorded for this list yet.",
+      "paidBy": "Paid by:",
+      "onDate": "on",
+      "owes": "owes",
+      "paidAmount": "Paid:",
+      "activityLabel": "Activity:",
+      "byUser": "by",
+      "settleShareButton": "Settle My Share",
+      "retryButton": "Retry"
+    },
+    "status": {
+      "settled": "Settled",
+      "partiallySettled": "Partially Settled",
+      "unsettled": "Unsettled",
+      "paid": "Paid",
+      "partiallyPaid": "Partially Paid",
+      "unpaid": "Unpaid",
+      "unknown": "Unknown Status"
+    }
+  },
+  "myChoresPage": {
+    "title": "My Assigned Chores",
+    "showCompletedToggle": "Show Completed",
+    "timelineHeaders": {
+      "overdue": "Overdue",
+      "today": "Due Today",
+      "thisWeek": "This Week",
+      "later": "Later",
+      "completed": "Completed"
+    },
+    "choreCard": {
+      "personal": "Personal",
+      "group": "Group",
+      "duePrefix": "Due",
+      "completedPrefix": "Completed",
+      "dueToday": "Due Today",
+      "markCompleteButton": "Mark Complete"
+    },
+    "frequencies": {
+      "one_time": "One Time",
+      "daily": "Daily",
+      "weekly": "Weekly",
+      "monthly": "Monthly",
+      "custom": "Custom",
+      "unknown": "Unknown Frequency"
+    },
+    "dates": {
+      "invalidDate": "Invalid Date",
+      "unknownDate": "Unknown Date"
+    },
+    "emptyState": {
+      "title": "No Assignments Yet!",
+      "noAssignmentsPending": "You have no pending chore assignments.",
+      "noAssignmentsAll": "You have no chore assignments (completed or pending).",
+      "viewAllChoresButton": "View All Chores"
+    },
+    "notifications": {
+      "loadFailed": "Failed to load assignments",
+      "markedComplete": "Marked \"{choreName}\" as complete!",
+      "markCompleteFailed": "Failed to mark assignment as complete"
+    }
+  },
+  "personalChoresPage": {
+    "title": "Personal Chores",
+    "newChoreButton": "New Chore",
+    "editButton": "Edit",
+    "deleteButton": "Delete",
+    "cancelButton": "Cancel",
+    "saveButton": "Save",
+    "modals": {
+      "editChoreTitle": "Edit Chore",
+      "newChoreTitle": "New Chore",
+      "deleteChoreTitle": "Delete Chore"
+    },
+    "form": {
+      "nameLabel": "Name",
+      "descriptionLabel": "Description",
+      "frequencyLabel": "Frequency",
+      "intervalLabel": "Interval (days)",
+      "dueDateLabel": "Next Due Date"
+    },
+    "deleteDialog": {
+      "confirmationText": "Are you sure you want to delete this chore?"
+    },
+    "frequencies": {
+      "one_time": "One Time",
+      "daily": "Daily",
+      "weekly": "Weekly",
+      "monthly": "Monthly",
+      "custom": "Custom",
+      "unknown": "Unknown Frequency"
+    },
+    "dates": {
+      "invalidDate": "Invalid Date",
+      "duePrefix": "Due"
+    },
+    "notifications": {
+      "loadFailed": "Failed to load personal chores",
+      "updateSuccess": "Personal chore updated successfully",
+      "createSuccess": "Personal chore created successfully",
+      "saveFailed": "Failed to save personal chore",
+      "deleteSuccess": "Personal chore deleted successfully",
+      "deleteFailed": "Failed to delete personal chore"
+    }
+  },
+  "indexPage": {
+    "welcomeMessage": "Welcome to Valerie UI App",
+    "mainPageInfo": "This is the main index page.",
+    "sampleTodosHeader": "Sample Todos (from IndexPage data)",
+    "totalCountLabel": "Total count from meta:",
+    "noTodos": "No todos to display."
   }
 }
diff --git a/fe/src/i18n/es.json b/fe/src/i18n/es.json
index b57d2e5..665870e 100644
--- a/fe/src/i18n/es.json
+++ b/fe/src/i18n/es.json
@@ -270,5 +270,292 @@
       "removeMemberSuccess": "ES: Member removed successfully",
       "removeMemberFailed": "ES: Failed to remove member"
     }
+  },
+  "accountPage": {
+    "title": "Account Settings",
+    "loadingProfile": "Loading profile...",
+    "retryButton": "Retry",
+    "profileSection": {
+      "header": "Profile Information",
+      "nameLabel": "Name",
+      "emailLabel": "Email",
+      "saveButton": "Save Changes"
+    },
+    "passwordSection": {
+      "header": "Change Password",
+      "currentPasswordLabel": "Current Password",
+      "newPasswordLabel": "New Password",
+      "changeButton": "Change Password"
+    },
+    "notificationsSection": {
+      "header": "Notification Preferences",
+      "emailNotificationsLabel": "Email Notifications",
+      "emailNotificationsDescription": "Receive email notifications for important updates",
+      "listUpdatesLabel": "List Updates",
+      "listUpdatesDescription": "Get notified when lists are updated",
+      "groupActivitiesLabel": "Group Activities",
+      "groupActivitiesDescription": "Receive notifications for group activities"
+    },
+    "notifications": {
+      "profileLoadFailed": "Failed to load profile",
+      "profileUpdateSuccess": "Profile updated successfully",
+      "profileUpdateFailed": "Failed to update profile",
+      "passwordFieldsRequired": "Please fill in both current and new password fields.",
+      "passwordTooShort": "New password must be at least 8 characters long.",
+      "passwordChangeSuccess": "Password changed successfully",
+      "passwordChangeFailed": "Failed to change password",
+      "preferencesUpdateSuccess": "Preferences updated successfully",
+      "preferencesUpdateFailed": "Failed to update preferences"
+    },
+    "saving": "Saving..."
+  },
+  "signupPage": {
+    "header": "Sign Up",
+    "fullNameLabel": "Full Name",
+    "emailLabel": "Email",
+    "passwordLabel": "Password",
+    "confirmPasswordLabel": "Confirm Password",
+    "togglePasswordVisibility": "Toggle password visibility",
+    "submitButton": "Sign Up",
+    "loginLink": "Already have an account? Login",
+    "validation": {
+      "nameRequired": "Name is required",
+      "emailRequired": "Email is required",
+      "emailInvalid": "Invalid email format",
+      "passwordRequired": "Password is required",
+      "passwordLength": "Password must be at least 8 characters",
+      "confirmPasswordRequired": "Please confirm your password",
+      "passwordsNoMatch": "Passwords do not match"
+    },
+    "notifications": {
+      "signupFailed": "Signup failed. Please try again.",
+      "signupSuccess": "Account created successfully. Please login."
+    }
+  },
+  "listDetailPage": {
+    "loading": {
+      "list": "Loading list...",
+      "items": "Loading items...",
+      "ocrProcessing": "Processing image...",
+      "addingOcrItems": "Adding OCR items...",
+      "costSummary": "Loading summary...",
+      "expenses": "Loading expenses...",
+      "settlement": "Processing settlement..."
+    },
+    "errors": {
+      "fetchFailed": "Failed to load list details.",
+      "genericLoadFailure": "Group not found or an error occurred.",
+      "ocrNoItems": "No items extracted from the image.",
+      "ocrFailed": "Failed to process image.",
+      "addItemFailed": "Failed to add item.",
+      "updateItemFailed": "Failed to update item.",
+      "updateItemPriceFailed": "Failed to update item price.",
+      "deleteItemFailed": "Failed to delete item.",
+      "addOcrItemsFailed": "Failed to add OCR items.",
+      "fetchItemsFailed": "Failed to load items: {errorMessage}",
+      "loadCostSummaryFailed": "Failed to load cost summary."
+    },
+    "retryButton": "Retry",
+    "buttons": {
+      "addViaOcr": "Add via OCR",
+      "addItem": "Add",
+      "addItems": "Add Items",
+      "cancel": "Cancel",
+      "confirm": "Confirm",
+      "saveChanges": "Save Changes",
+      "close": "Close",
+      "costSummary": "Cost Summary"
+    },
+    "badges": {
+      "groupList": "Group List",
+      "personalList": "Personal List"
+    },
+    "items": {
+      "emptyState": {
+        "title": "No Items Yet!",
+        "message": "Add some items using the form below."
+      },
+      "addItemForm": {
+        "placeholder": "Add a new item",
+        "quantityPlaceholder": "Qty",
+        "itemNameSrLabel": "New item name",
+        "quantitySrLabel": "Quantity"
+      },
+      "pricePlaceholder": "Price",
+      "editItemAriaLabel": "Edit item",
+      "deleteItemAriaLabel": "Delete item"
+    },
+    "modals": {
+      "ocr": {
+        "title": "Add Items via OCR",
+        "uploadLabel": "Upload Image"
+      },
+      "confirmation": {
+        "title": "Confirmation"
+      },
+      "editItem": {
+        "title": "Edit Item",
+        "nameLabel": "Item Name",
+        "quantityLabel": "Quantity"
+      },
+      "costSummary": {
+        "title": "List Cost Summary",
+        "totalCostLabel": "Total List Cost:",
+        "equalShareLabel": "Equal Share Per User:",
+        "participantsLabel": "Participating Users:",
+        "userBalancesHeader": "User Balances",
+        "tableHeaders": {
+          "user": "User",
+          "itemsAddedValue": "Items Added Value",
+          "amountDue": "Amount Due",
+          "balance": "Balance"
+        },
+        "emptyState": "No cost summary available."
+      },
+      "settleShare": {
+        "title": "Settle Share",
+        "settleAmountFor": "Settle amount for {userName}:",
+        "amountLabel": "Amount",
+        "errors": {
+            "enterAmount": "Please enter an amount.",
+            "positiveAmount": "Please enter a positive amount.",
+            "exceedsRemaining": "Amount cannot exceed remaining: {amount}.",
+            "noSplitSelected": "Error: No split selected."
+        }
+      }
+    },
+    "confirmations": {
+      "updateMessage": "Mark '{itemName}' as {status}?",
+      "statusComplete": "complete",
+      "statusIncomplete": "incomplete",
+      "deleteMessage": "Delete '{itemName}'? This cannot be undone."
+    },
+    "notifications": {
+      "itemAddedSuccess": "Item added successfully.",
+      "itemsAddedSuccessOcr": "{count} item(s) added successfully from OCR.",
+      "itemUpdatedSuccess": "Item updated successfully.",
+      "itemDeleteSuccess": "Item deleted successfully.",
+      "enterItemName": "Please enter an item name.",
+      "costSummaryLoadFailed": "Failed to load cost summary.",
+      "cannotSettleOthersShares": "You can only settle your own shares.",
+      "settlementDataMissing": "Cannot process settlement: missing data.",
+      "settleShareSuccess": "Share settled successfully!",
+      "settleShareFailed": "Failed to settle share."
+    },
+    "expensesSection": {
+      "title": "Expenses",
+      "addExpenseButton": "Add Expense",
+      "loading": "Loading expenses...",
+      "emptyState": "No expenses recorded for this list yet.",
+      "paidBy": "Paid by:",
+      "onDate": "on",
+      "owes": "owes",
+      "paidAmount": "Paid:",
+      "activityLabel": "Activity:",
+      "byUser": "by",
+      "settleShareButton": "Settle My Share",
+      "retryButton": "Retry"
+    },
+    "status": {
+      "settled": "Settled",
+      "partiallySettled": "Partially Settled",
+      "unsettled": "Unsettled",
+      "paid": "Paid",
+      "partiallyPaid": "Partially Paid",
+      "unpaid": "Unpaid",
+      "unknown": "Unknown Status"
+    }
+  },
+  "myChoresPage": {
+    "title": "My Assigned Chores",
+    "showCompletedToggle": "Show Completed",
+    "timelineHeaders": {
+      "overdue": "Overdue",
+      "today": "Due Today",
+      "thisWeek": "This Week",
+      "later": "Later",
+      "completed": "Completed"
+    },
+    "choreCard": {
+      "personal": "Personal",
+      "group": "Group",
+      "duePrefix": "Due",
+      "completedPrefix": "Completed",
+      "dueToday": "Due Today",
+      "markCompleteButton": "Mark Complete"
+    },
+    "frequencies": {
+      "one_time": "One Time",
+      "daily": "Daily",
+      "weekly": "Weekly",
+      "monthly": "Monthly",
+      "custom": "Custom",
+      "unknown": "Unknown Frequency"
+    },
+    "dates": {
+      "invalidDate": "Invalid Date",
+      "unknownDate": "Unknown Date"
+    },
+    "emptyState": {
+      "title": "No Assignments Yet!",
+      "noAssignmentsPending": "You have no pending chore assignments.",
+      "noAssignmentsAll": "You have no chore assignments (completed or pending).",
+      "viewAllChoresButton": "View All Chores"
+    },
+    "notifications": {
+      "loadFailed": "Failed to load assignments",
+      "markedComplete": "Marked \"{choreName}\" as complete!",
+      "markCompleteFailed": "Failed to mark assignment as complete"
+    }
+  },
+  "personalChoresPage": {
+    "title": "Personal Chores",
+    "newChoreButton": "New Chore",
+    "editButton": "Edit",
+    "deleteButton": "Delete",
+    "cancelButton": "Cancel",
+    "saveButton": "Save",
+    "modals": {
+      "editChoreTitle": "Edit Chore",
+      "newChoreTitle": "New Chore",
+      "deleteChoreTitle": "Delete Chore"
+    },
+    "form": {
+      "nameLabel": "Name",
+      "descriptionLabel": "Description",
+      "frequencyLabel": "Frequency",
+      "intervalLabel": "Interval (days)",
+      "dueDateLabel": "Next Due Date"
+    },
+    "deleteDialog": {
+      "confirmationText": "Are you sure you want to delete this chore?"
+    },
+    "frequencies": {
+      "one_time": "One Time",
+      "daily": "Daily",
+      "weekly": "Weekly",
+      "monthly": "Monthly",
+      "custom": "Custom",
+      "unknown": "Unknown Frequency"
+    },
+    "dates": {
+      "invalidDate": "Invalid Date",
+      "duePrefix": "Due"
+    },
+    "notifications": {
+      "loadFailed": "Failed to load personal chores",
+      "updateSuccess": "Personal chore updated successfully",
+      "createSuccess": "Personal chore created successfully",
+      "saveFailed": "Failed to save personal chore",
+      "deleteSuccess": "Personal chore deleted successfully",
+      "deleteFailed": "Failed to delete personal chore"
+    }
+  },
+  "indexPage": {
+    "welcomeMessage": "Welcome to Valerie UI App",
+    "mainPageInfo": "This is the main index page.",
+    "sampleTodosHeader": "Sample Todos (from IndexPage data)",
+    "totalCountLabel": "Total count from meta:",
+    "noTodos": "No todos to display."
   }
 }
diff --git a/fe/src/i18n/fr.json b/fe/src/i18n/fr.json
index 0251c52..cf8c4fc 100644
--- a/fe/src/i18n/fr.json
+++ b/fe/src/i18n/fr.json
@@ -270,5 +270,292 @@
       "removeMemberSuccess": "FR: Member removed successfully",
       "removeMemberFailed": "FR: Failed to remove member"
     }
+  },
+  "accountPage": {
+    "title": "Account Settings",
+    "loadingProfile": "Loading profile...",
+    "retryButton": "Retry",
+    "profileSection": {
+      "header": "Profile Information",
+      "nameLabel": "Name",
+      "emailLabel": "Email",
+      "saveButton": "Save Changes"
+    },
+    "passwordSection": {
+      "header": "Change Password",
+      "currentPasswordLabel": "Current Password",
+      "newPasswordLabel": "New Password",
+      "changeButton": "Change Password"
+    },
+    "notificationsSection": {
+      "header": "Notification Preferences",
+      "emailNotificationsLabel": "Email Notifications",
+      "emailNotificationsDescription": "Receive email notifications for important updates",
+      "listUpdatesLabel": "List Updates",
+      "listUpdatesDescription": "Get notified when lists are updated",
+      "groupActivitiesLabel": "Group Activities",
+      "groupActivitiesDescription": "Receive notifications for group activities"
+    },
+    "notifications": {
+      "profileLoadFailed": "Failed to load profile",
+      "profileUpdateSuccess": "Profile updated successfully",
+      "profileUpdateFailed": "Failed to update profile",
+      "passwordFieldsRequired": "Please fill in both current and new password fields.",
+      "passwordTooShort": "New password must be at least 8 characters long.",
+      "passwordChangeSuccess": "Password changed successfully",
+      "passwordChangeFailed": "Failed to change password",
+      "preferencesUpdateSuccess": "Preferences updated successfully",
+      "preferencesUpdateFailed": "Failed to update preferences"
+    },
+    "saving": "Saving..."
+  },
+  "signupPage": {
+    "header": "Sign Up",
+    "fullNameLabel": "Full Name",
+    "emailLabel": "Email",
+    "passwordLabel": "Password",
+    "confirmPasswordLabel": "Confirm Password",
+    "togglePasswordVisibility": "Toggle password visibility",
+    "submitButton": "Sign Up",
+    "loginLink": "Already have an account? Login",
+    "validation": {
+      "nameRequired": "Name is required",
+      "emailRequired": "Email is required",
+      "emailInvalid": "Invalid email format",
+      "passwordRequired": "Password is required",
+      "passwordLength": "Password must be at least 8 characters",
+      "confirmPasswordRequired": "Please confirm your password",
+      "passwordsNoMatch": "Passwords do not match"
+    },
+    "notifications": {
+      "signupFailed": "Signup failed. Please try again.",
+      "signupSuccess": "Account created successfully. Please login."
+    }
+  },
+  "listDetailPage": {
+    "loading": {
+      "list": "Loading list...",
+      "items": "Loading items...",
+      "ocrProcessing": "Processing image...",
+      "addingOcrItems": "Adding OCR items...",
+      "costSummary": "Loading summary...",
+      "expenses": "Loading expenses...",
+      "settlement": "Processing settlement..."
+    },
+    "errors": {
+      "fetchFailed": "Failed to load list details.",
+      "genericLoadFailure": "Group not found or an error occurred.",
+      "ocrNoItems": "No items extracted from the image.",
+      "ocrFailed": "Failed to process image.",
+      "addItemFailed": "Failed to add item.",
+      "updateItemFailed": "Failed to update item.",
+      "updateItemPriceFailed": "Failed to update item price.",
+      "deleteItemFailed": "Failed to delete item.",
+      "addOcrItemsFailed": "Failed to add OCR items.",
+      "fetchItemsFailed": "Failed to load items: {errorMessage}",
+      "loadCostSummaryFailed": "Failed to load cost summary."
+    },
+    "retryButton": "Retry",
+    "buttons": {
+      "addViaOcr": "Add via OCR",
+      "addItem": "Add",
+      "addItems": "Add Items",
+      "cancel": "Cancel",
+      "confirm": "Confirm",
+      "saveChanges": "Save Changes",
+      "close": "Close",
+      "costSummary": "Cost Summary"
+    },
+    "badges": {
+      "groupList": "Group List",
+      "personalList": "Personal List"
+    },
+    "items": {
+      "emptyState": {
+        "title": "No Items Yet!",
+        "message": "Add some items using the form below."
+      },
+      "addItemForm": {
+        "placeholder": "Add a new item",
+        "quantityPlaceholder": "Qty",
+        "itemNameSrLabel": "New item name",
+        "quantitySrLabel": "Quantity"
+      },
+      "pricePlaceholder": "Price",
+      "editItemAriaLabel": "Edit item",
+      "deleteItemAriaLabel": "Delete item"
+    },
+    "modals": {
+      "ocr": {
+        "title": "Add Items via OCR",
+        "uploadLabel": "Upload Image"
+      },
+      "confirmation": {
+        "title": "Confirmation"
+      },
+      "editItem": {
+        "title": "Edit Item",
+        "nameLabel": "Item Name",
+        "quantityLabel": "Quantity"
+      },
+      "costSummary": {
+        "title": "List Cost Summary",
+        "totalCostLabel": "Total List Cost:",
+        "equalShareLabel": "Equal Share Per User:",
+        "participantsLabel": "Participating Users:",
+        "userBalancesHeader": "User Balances",
+        "tableHeaders": {
+          "user": "User",
+          "itemsAddedValue": "Items Added Value",
+          "amountDue": "Amount Due",
+          "balance": "Balance"
+        },
+        "emptyState": "No cost summary available."
+      },
+      "settleShare": {
+        "title": "Settle Share",
+        "settleAmountFor": "Settle amount for {userName}:",
+        "amountLabel": "Amount",
+        "errors": {
+            "enterAmount": "Please enter an amount.",
+            "positiveAmount": "Please enter a positive amount.",
+            "exceedsRemaining": "Amount cannot exceed remaining: {amount}.",
+            "noSplitSelected": "Error: No split selected."
+        }
+      }
+    },
+    "confirmations": {
+      "updateMessage": "Mark '{itemName}' as {status}?",
+      "statusComplete": "complete",
+      "statusIncomplete": "incomplete",
+      "deleteMessage": "Delete '{itemName}'? This cannot be undone."
+    },
+    "notifications": {
+      "itemAddedSuccess": "Item added successfully.",
+      "itemsAddedSuccessOcr": "{count} item(s) added successfully from OCR.",
+      "itemUpdatedSuccess": "Item updated successfully.",
+      "itemDeleteSuccess": "Item deleted successfully.",
+      "enterItemName": "Please enter an item name.",
+      "costSummaryLoadFailed": "Failed to load cost summary.",
+      "cannotSettleOthersShares": "You can only settle your own shares.",
+      "settlementDataMissing": "Cannot process settlement: missing data.",
+      "settleShareSuccess": "Share settled successfully!",
+      "settleShareFailed": "Failed to settle share."
+    },
+    "expensesSection": {
+      "title": "Expenses",
+      "addExpenseButton": "Add Expense",
+      "loading": "Loading expenses...",
+      "emptyState": "No expenses recorded for this list yet.",
+      "paidBy": "Paid by:",
+      "onDate": "on",
+      "owes": "owes",
+      "paidAmount": "Paid:",
+      "activityLabel": "Activity:",
+      "byUser": "by",
+      "settleShareButton": "Settle My Share",
+      "retryButton": "Retry"
+    },
+    "status": {
+      "settled": "Settled",
+      "partiallySettled": "Partially Settled",
+      "unsettled": "Unsettled",
+      "paid": "Paid",
+      "partiallyPaid": "Partially Paid",
+      "unpaid": "Unpaid",
+      "unknown": "Unknown Status"
+    }
+  },
+  "myChoresPage": {
+    "title": "My Assigned Chores",
+    "showCompletedToggle": "Show Completed",
+    "timelineHeaders": {
+      "overdue": "Overdue",
+      "today": "Due Today",
+      "thisWeek": "This Week",
+      "later": "Later",
+      "completed": "Completed"
+    },
+    "choreCard": {
+      "personal": "Personal",
+      "group": "Group",
+      "duePrefix": "Due",
+      "completedPrefix": "Completed",
+      "dueToday": "Due Today",
+      "markCompleteButton": "Mark Complete"
+    },
+    "frequencies": {
+      "one_time": "One Time",
+      "daily": "Daily",
+      "weekly": "Weekly",
+      "monthly": "Monthly",
+      "custom": "Custom",
+      "unknown": "Unknown Frequency"
+    },
+    "dates": {
+      "invalidDate": "Invalid Date",
+      "unknownDate": "Unknown Date"
+    },
+    "emptyState": {
+      "title": "No Assignments Yet!",
+      "noAssignmentsPending": "You have no pending chore assignments.",
+      "noAssignmentsAll": "You have no chore assignments (completed or pending).",
+      "viewAllChoresButton": "View All Chores"
+    },
+    "notifications": {
+      "loadFailed": "Failed to load assignments",
+      "markedComplete": "Marked \"{choreName}\" as complete!",
+      "markCompleteFailed": "Failed to mark assignment as complete"
+    }
+  },
+  "personalChoresPage": {
+    "title": "Personal Chores",
+    "newChoreButton": "New Chore",
+    "editButton": "Edit",
+    "deleteButton": "Delete",
+    "cancelButton": "Cancel",
+    "saveButton": "Save",
+    "modals": {
+      "editChoreTitle": "Edit Chore",
+      "newChoreTitle": "New Chore",
+      "deleteChoreTitle": "Delete Chore"
+    },
+    "form": {
+      "nameLabel": "Name",
+      "descriptionLabel": "Description",
+      "frequencyLabel": "Frequency",
+      "intervalLabel": "Interval (days)",
+      "dueDateLabel": "Next Due Date"
+    },
+    "deleteDialog": {
+      "confirmationText": "Are you sure you want to delete this chore?"
+    },
+    "frequencies": {
+      "one_time": "One Time",
+      "daily": "Daily",
+      "weekly": "Weekly",
+      "monthly": "Monthly",
+      "custom": "Custom",
+      "unknown": "Unknown Frequency"
+    },
+    "dates": {
+      "invalidDate": "Invalid Date",
+      "duePrefix": "Due"
+    },
+    "notifications": {
+      "loadFailed": "Failed to load personal chores",
+      "updateSuccess": "Personal chore updated successfully",
+      "createSuccess": "Personal chore created successfully",
+      "saveFailed": "Failed to save personal chore",
+      "deleteSuccess": "Personal chore deleted successfully",
+      "deleteFailed": "Failed to delete personal chore"
+    }
+  },
+  "indexPage": {
+    "welcomeMessage": "Welcome to Valerie UI App",
+    "mainPageInfo": "This is the main index page.",
+    "sampleTodosHeader": "Sample Todos (from IndexPage data)",
+    "totalCountLabel": "Total count from meta:",
+    "noTodos": "No todos to display."
   }
 }
diff --git a/fe/src/pages/AccountPage.vue b/fe/src/pages/AccountPage.vue
index dff3ff0..101f600 100644
--- a/fe/src/pages/AccountPage.vue
+++ b/fe/src/pages/AccountPage.vue
@@ -1,32 +1,32 @@
 <template>
   <main class="container page-padding">
-    <VHeading level="1" text="Account Settings" class="mb-3" />
+    <VHeading level="1" :text="$t('accountPage.title')" class="mb-3" />
 
     <div v-if="loading" class="text-center">
-      <VSpinner label="Loading profile..." />
+      <VSpinner :label="$t('accountPage.loadingProfile')" />
     </div>
 
     <VAlert v-else-if="error" type="error" :message="error" class="mb-3">
       <template #actions>
-        <VButton variant="danger" size="sm" @click="fetchProfile">Retry</VButton>
+        <VButton variant="danger" size="sm" @click="fetchProfile">{{ $t('accountPage.retryButton') }}</VButton>
       </template>
     </VAlert>
 
     <form v-else @submit.prevent="onSubmitProfile">
       <!-- Profile Section -->
       <VCard class="mb-3">
-        <template #header><VHeading level="3">Profile Information</VHeading></template>
+        <template #header><VHeading level="3">{{ $t('accountPage.profileSection.header') }}</VHeading></template>
         <div class="flex flex-wrap" style="gap: 1rem;">
-          <VFormField label="Name" class="flex-grow">
+          <VFormField :label="$t('accountPage.profileSection.nameLabel')" class="flex-grow">
             <VInput id="profileName" v-model="profile.name" required />
           </VFormField>
-          <VFormField label="Email" class="flex-grow">
+          <VFormField :label="$t('accountPage.profileSection.emailLabel')" class="flex-grow">
             <VInput type="email" id="profileEmail" v-model="profile.email" required readonly />
           </VFormField>
         </div>
         <template #footer>
           <VButton type="submit" variant="primary" :disabled="saving">
-            <VSpinner v-if="saving" size="sm" /> Save Changes
+            <VSpinner v-if="saving" size="sm" /> {{ $t('accountPage.profileSection.saveButton') }}
           </VButton>
         </template>
       </VCard>
@@ -35,18 +35,18 @@
     <!-- Password Section -->
     <form @submit.prevent="onChangePassword">
       <VCard class="mb-3">
-        <template #header><VHeading level="3">Change Password</VHeading></template>
+        <template #header><VHeading level="3">{{ $t('accountPage.passwordSection.header') }}</VHeading></template>
         <div class="flex flex-wrap" style="gap: 1rem;">
-          <VFormField label="Current Password" class="flex-grow">
+          <VFormField :label="$t('accountPage.passwordSection.currentPasswordLabel')" class="flex-grow">
             <VInput type="password" id="currentPassword" v-model="password.current" required />
           </VFormField>
-          <VFormField label="New Password" class="flex-grow">
+          <VFormField :label="$t('accountPage.passwordSection.newPasswordLabel')" class="flex-grow">
             <VInput type="password" id="newPassword" v-model="password.newPassword" required />
           </VFormField>
         </div>
         <template #footer>
           <VButton type="submit" variant="primary" :disabled="changingPassword">
-            <VSpinner v-if="changingPassword" size="sm" /> Change Password
+            <VSpinner v-if="changingPassword" size="sm" /> {{ $t('accountPage.passwordSection.changeButton') }}
           </VButton>
         </template>
       </VCard>
@@ -54,28 +54,28 @@
 
     <!-- Notifications Section -->
     <VCard>
-      <template #header><VHeading level="3">Notification Preferences</VHeading></template>
+      <template #header><VHeading level="3">{{ $t('accountPage.notificationsSection.header') }}</VHeading></template>
       <VList class="preference-list">
         <VListItem class="preference-item">
           <div class="preference-label">
-            <span>Email Notifications</span>
-            <small>Receive email notifications for important updates</small>
+            <span>{{ $t('accountPage.notificationsSection.emailNotificationsLabel') }}</span>
+            <small>{{ $t('accountPage.notificationsSection.emailNotificationsDescription') }}</small>
           </div>
-          <VToggleSwitch v-model="preferences.emailNotifications" @change="onPreferenceChange" label="Email Notifications" id="emailNotificationsToggle" />
+          <VToggleSwitch v-model="preferences.emailNotifications" @change="onPreferenceChange" :label="$t('accountPage.notificationsSection.emailNotificationsLabel')" id="emailNotificationsToggle" />
         </VListItem>
         <VListItem class="preference-item">
           <div class="preference-label">
-            <span>List Updates</span>
-            <small>Get notified when lists are updated</small>
+            <span>{{ $t('accountPage.notificationsSection.listUpdatesLabel') }}</span>
+            <small>{{ $t('accountPage.notificationsSection.listUpdatesDescription') }}</small>
           </div>
-          <VToggleSwitch v-model="preferences.listUpdates" @change="onPreferenceChange" label="List Updates" id="listUpdatesToggle"/>
+          <VToggleSwitch v-model="preferences.listUpdates" @change="onPreferenceChange" :label="$t('accountPage.notificationsSection.listUpdatesLabel')" id="listUpdatesToggle"/>
         </VListItem>
         <VListItem class="preference-item">
           <div class="preference-label">
-            <span>Group Activities</span>
-            <small>Receive notifications for group activities</small>
+            <span>{{ $t('accountPage.notificationsSection.groupActivitiesLabel') }}</span>
+            <small>{{ $t('accountPage.notificationsSection.groupActivitiesDescription') }}</small>
           </div>
-          <VToggleSwitch v-model="preferences.groupActivities" @change="onPreferenceChange" label="Group Activities" id="groupActivitiesToggle"/>
+          <VToggleSwitch v-model="preferences.groupActivities" @change="onPreferenceChange" :label="$t('accountPage.notificationsSection.groupActivitiesLabel')" id="groupActivitiesToggle"/>
         </VListItem>
       </VList>
     </VCard>
@@ -84,6 +84,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { apiClient, API_ENDPOINTS } from '@/config/api'; // Assuming path
 import { useNotificationStore } from '@/stores/notifications';
 import VHeading from '@/components/valerie/VHeading.vue';
@@ -97,6 +98,8 @@ import VToggleSwitch from '@/components/valerie/VToggleSwitch.vue';
 import VList from '@/components/valerie/VList.vue';
 import VListItem from '@/components/valerie/VListItem.vue';
 
+const { t } = useI18n();
+
 interface Profile {
   name: string;
   email: string;
@@ -136,10 +139,11 @@ const fetchProfile = async () => {
     // Assume preferences are also fetched or part of profile
     // preferences.value = response.data.preferences || preferences.value;
   } catch (err: unknown) {
-    const message = err instanceof Error ? err.message : 'Failed to load profile';
-    error.value = message;
+    const apiMessage = err instanceof Error ? err.message : t('accountPage.notifications.profileLoadFailed');
+    error.value = apiMessage; // Show translated or API error message in the VAlert
     console.error('Failed to fetch profile:', err);
-    notificationStore.addNotification({ message, type: 'error' });
+    // For the notification pop-up, always use the translated generic message
+    notificationStore.addNotification({ message: t('accountPage.notifications.profileLoadFailed'), type: 'error' });
   } finally {
     loading.value = false;
   }
@@ -149,11 +153,11 @@ const onSubmitProfile = async () => {
   saving.value = true;
   try {
     await apiClient.put(API_ENDPOINTS.USERS.UPDATE_PROFILE, profile.value);
-    notificationStore.addNotification({ message: 'Profile updated successfully', type: 'success' });
+    notificationStore.addNotification({ message: t('accountPage.notifications.profileUpdateSuccess'), type: 'success' });
   } catch (err: unknown) {
-    const message = err instanceof Error ? err.message : 'Failed to update profile';
+    const message = err instanceof Error ? err.message : t('accountPage.notifications.profileUpdateFailed');
     console.error('Failed to update profile:', err);
-    notificationStore.addNotification({ message, type: 'error' });
+    notificationStore.addNotification({ message: t('accountPage.notifications.profileUpdateFailed'), type: 'error' });
   } finally {
     saving.value = false;
   }
@@ -161,11 +165,11 @@ const onSubmitProfile = async () => {
 
 const onChangePassword = async () => {
   if (!password.value.current || !password.value.newPassword) {
-    notificationStore.addNotification({ message: 'Please fill in both current and new password fields.', type: 'warning' });
+    notificationStore.addNotification({ message: t('accountPage.notifications.passwordFieldsRequired'), type: 'warning' });
     return;
   }
   if (password.value.newPassword.length < 8) {
-    notificationStore.addNotification({ message: 'New password must be at least 8 characters long.', type: 'warning' });
+    notificationStore.addNotification({ message: t('accountPage.notifications.passwordTooShort'), type: 'warning' });
     return;
   }
 
@@ -177,11 +181,11 @@ const onChangePassword = async () => {
       new: password.value.newPassword
     });
     password.value = { current: '', newPassword: '' };
-    notificationStore.addNotification({ message: 'Password changed successfully', type: 'success' });
+    notificationStore.addNotification({ message: t('accountPage.notifications.passwordChangeSuccess'), type: 'success' });
   } catch (err: unknown) {
-    const message = err instanceof Error ? err.message : 'Failed to change password';
+    const message = err instanceof Error ? err.message : t('accountPage.notifications.passwordChangeFailed');
     console.error('Failed to change password:', err);
-    notificationStore.addNotification({ message, type: 'error' });
+    notificationStore.addNotification({ message: t('accountPage.notifications.passwordChangeFailed'), type: 'error' });
   } finally {
     changingPassword.value = false;
   }
@@ -192,11 +196,11 @@ const onPreferenceChange = async () => {
   // Consider debouncing or providing a "Save Preferences" button if API calls are expensive.
   try {
     await apiClient.put(API_ENDPOINTS.USERS.PREFERENCES, preferences.value);
-    notificationStore.addNotification({ message: 'Preferences updated successfully', type: 'success' });
+    notificationStore.addNotification({ message: t('accountPage.notifications.preferencesUpdateSuccess'), type: 'success' });
   } catch (err: unknown) {
-    const message = err instanceof Error ? err.message : 'Failed to update preferences';
+    const message = err instanceof Error ? err.message : t('accountPage.notifications.preferencesUpdateFailed');
     console.error('Failed to update preferences:', err);
-    notificationStore.addNotification({ message, type: 'error' });
+    notificationStore.addNotification({ message: t('accountPage.notifications.preferencesUpdateFailed'), type: 'error' });
     // Optionally revert the toggle if the API call fails
     // await fetchProfile(); // Or manage state more granularly
   }
diff --git a/fe/src/pages/IndexPage.vue b/fe/src/pages/IndexPage.vue
index 28f50be..71a2754 100644
--- a/fe/src/pages/IndexPage.vue
+++ b/fe/src/pages/IndexPage.vue
@@ -1,12 +1,12 @@
 <template>
   <main class="container page-padding text-center">
-    <h1>Welcome to Valerie UI App</h1>
-    <p class="mb-3">This is the main index page.</p>
+    <h1>{{ $t('indexPage.welcomeMessage') }}</h1>
+    <p class="mb-3">{{ $t('indexPage.mainPageInfo') }}</p>
 
     <!-- The ExampleComponent is not provided, so this section is a placeholder -->
     <div v-if="todos.length" class="card">
       <div class="card-header">
-        <h3>Sample Todos (from IndexPage data)</h3>
+        <h3>{{ $t('indexPage.sampleTodosHeader') }}</h3>
       </div>
       <div class="card-body">
         <ul class="item-list">
@@ -16,18 +16,21 @@
             </div>
           </li>
         </ul>
-        <p class="mt-2">Total count from meta: {{ meta.totalCount }}</p>
+        <p class="mt-2">{{ $t('indexPage.totalCountLabel') }} {{ meta.totalCount }}</p>
       </div>
     </div>
-    <p v-else>No todos to display.</p>
+    <p v-else>{{ $t('indexPage.noTodos') }}</p>
   </main>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import type { Todo, Meta } from '@/components/models'; // Adjusted path if models.ts is in the same directory
 // import ExampleComponent from 'components/ExampleComponent.vue'; // This component is not provided for conversion
 
+const { t } = useI18n(); // Added for consistency, though not strictly needed if only $t in template
+
 const todos = ref<Todo[]>([
   { id: 1, content: 'ct1' },
   { id: 2, content: 'ct2' },
diff --git a/fe/src/pages/ListDetailPage.vue b/fe/src/pages/ListDetailPage.vue
index 0f2d1d4..c55df68 100644
--- a/fe/src/pages/ListDetailPage.vue
+++ b/fe/src/pages/ListDetailPage.vue
@@ -1,12 +1,12 @@
 <template>
   <main class="neo-container page-padding">
     <div v-if="pageInitialLoad && !list && !error" class="text-center py-10">
-      <VSpinner label="Loading list..." size="lg" />
+      <VSpinner :label="$t('listDetailPage.loading.list')" size="lg" />
     </div>
 
     <VAlert v-else-if="error && !list" type="error" :message="error" class="mb-4">
       <template #actions>
-        <VButton @click="fetchListDetails">Retry</VButton>
+        <VButton @click="fetchListDetails">{{ $t('listDetailPage.retryButton') }}</VButton>
       </template>
     </VAlert>
 
@@ -15,10 +15,10 @@
       <div class="neo-list-header">
         <VHeading :level="1" :text="list.name" class="mb-3 neo-title" />
         <div class="neo-header-actions">
-          <VButton @click="showCostSummaryDialog = true" :disabled="!isOnline" icon-left="clipboard">Cost Summary
+          <VButton @click="showCostSummaryDialog = true" :disabled="!isOnline" icon-left="clipboard">{{ $t('listDetailPage.buttons.costSummary') }}
           </VButton>
-          <VButton @click="openOcrDialog" :disabled="!isOnline" icon-left="plus">Add via OCR</VButton>
-          <VBadge :text="list.group_id ? 'Group List' : 'Personal List'" :variant="list.group_id ? 'accent' : 'settled'"
+          <VButton @click="openOcrDialog" :disabled="!isOnline" icon-left="plus">{{ $t('listDetailPage.buttons.addViaOcr') }}</VButton>
+          <VBadge :text="list.group_id ? $t('listDetailPage.badges.groupList') : $t('listDetailPage.badges.personalList')" :variant="list.group_id ? 'accent' : 'settled'"
             class="neo-status" />
         </div>
       </div>
@@ -26,10 +26,10 @@
 
       <!-- Items List Section -->
       <VCard v-if="itemsAreLoading" class="py-10 text-center mt-4">
-        <VSpinner label="Loading items..." size="lg" />
+        <VSpinner :label="$t('listDetailPage.loading.items')" size="lg" />
       </VCard>
       <VCard v-else-if="!itemsAreLoading && list.items.length === 0" variant="empty-state" empty-icon="clipboard"
-        empty-title="No Items Yet!" empty-message="Add some items using the form below." class="mt-4" />
+        :empty-title="$t('listDetailPage.items.emptyState.title')" :empty-message="$t('listDetailPage.items.emptyState.message')" class="mt-4" />
       <div v-else class="neo-item-list-container mt-4">
         <ul class="neo-item-list">
           <li v-for="item in list.items" :key="item.id" class="neo-list-item"
@@ -42,18 +42,18 @@
                 <span v-if="item.quantity" class="text-sm text-gray-500 ml-1">× {{ item.quantity }}</span>
               </label>
               <div class="neo-item-actions">
-                <button class="neo-icon-button neo-edit-button" @click.stop="editItem(item)" aria-label="Edit item">
+                <button class="neo-icon-button neo-edit-button" @click.stop="editItem(item)" :aria-label="$t('listDetailPage.items.editItemAriaLabel')">
                   <VIcon name="edit" />
                 </button>
                 <button class="neo-icon-button neo-delete-button" @click.stop="confirmDeleteItem(item)"
-                  :disabled="item.deleting" aria-label="Delete item">
+                  :disabled="item.deleting" :aria-label="$t('listDetailPage.items.deleteItemAriaLabel')">
                   <VIcon name="trash" />
                 </button>
               </div>
             </div>
             <div v-if="item.is_complete" class="neo-price-input">
               <VInput type="number" :model-value="item.priceInput || ''" @update:modelValue="item.priceInput = $event"
-                placeholder="Price" size="sm" class="w-24" step="0.01" @blur="updateItemPrice(item)"
+                :placeholder="$t('listDetailPage.items.pricePlaceholder')" size="sm" class="w-24" step="0.01" @blur="updateItemPrice(item)"
                 @keydown.enter.prevent="($event.target as HTMLInputElement).blur()" />
             </div>
           </li>
@@ -63,16 +63,16 @@
       <!-- Add New Item Form -->
       <form @submit.prevent="onAddItem" class="add-item-form mt-4 p-4 border rounded-lg shadow flex items-center gap-2">
         <VIcon name="plus-circle" class="text-gray-400 shrink-0" />
-        <VFormField class="flex-grow" label="New item name" :label-sr-only="true">
-          <VInput v-model="newItem.name" placeholder="Add a new item" required ref="itemNameInputRef" />
+        <VFormField class="flex-grow" :label="$t('listDetailPage.items.addItemForm.itemNameSrLabel')" :label-sr-only="true">
+          <VInput v-model="newItem.name" :placeholder="$t('listDetailPage.items.addItemForm.placeholder')" required ref="itemNameInputRef" />
         </VFormField>
-        <VFormField label="Quantity" :label-sr-only="true" class="w-24 shrink-0">
+        <VFormField :label="$t('listDetailPage.items.addItemForm.quantitySrLabel')" :label-sr-only="true" class="w-24 shrink-0">
           <VInput type="number" :model-value="newItem.quantity || ''" @update:modelValue="newItem.quantity = $event"
-            placeholder="Qty" min="1" />
+            :placeholder="$t('listDetailPage.items.addItemForm.quantityPlaceholder')" min="1" />
         </VFormField>
         <VButton type="submit" :disabled="addingItem" class="shrink-0">
           <VSpinner v-if="addingItem" size="sm" />
-          <span v-else>Add</span>
+          <span v-else>{{ $t('listDetailPage.buttons.addItem') }}</span>
         </VButton>
       </form>
     </template>
@@ -80,24 +80,24 @@
     <!-- Expenses Section (Original Content - Part 3 will refactor this) -->
     <section v-if="list && !itemsAreLoading" class="neo-expenses-section">
       <div class="neo-expenses-header">
-        <h2 class="neo-expenses-title">Expenses</h2>
+        <h2 class="neo-expenses-title">{{ $t('listDetailPage.expensesSection.title') }}</h2>
         <button class="neo-action-button" @click="showCreateExpenseForm = true">
           <svg class="icon">
             <use xlink:href="#icon-plus" />
           </svg>
-          Add Expense
+          {{ $t('listDetailPage.expensesSection.addExpenseButton') }}
         </button>
       </div>
       <div v-if="listDetailStore.isLoading && expenses.length === 0" class="neo-loading-state">
         <div class="spinner-dots" role="status"><span /><span /><span /></div>
-        <p>Loading expenses...</p>
+        <p>{{ $t('listDetailPage.expensesSection.loading') }}</p>
       </div>
       <div v-else-if="listDetailStore.error" class="neo-error-state">
-        <p>{{ listDetailStore.error }}</p>
-        <button class="neo-button" @click="listDetailStore.fetchListWithExpenses(String(list?.id))">Retry</button>
+        <p>{{ listDetailStore.error }}</p> <!-- Assuming listDetailStore.error is a backend message or already translated if generic -->
+        <button class="neo-button" @click="listDetailStore.fetchListWithExpenses(String(list?.id))">{{ $t('listDetailPage.expensesSection.retryButton') }}</button>
       </div>
       <div v-else-if="!expenses || expenses.length === 0" class="neo-empty-state">
-        <p>No expenses recorded for this list yet.</p>
+        <p>{{ $t('listDetailPage.expensesSection.emptyState') }}</p>
       </div>
       <div v-else>
         <div v-for="expense in expenses" :key="expense.id" class="neo-expense-card">
@@ -108,34 +108,34 @@
             </span>
           </div>
           <div class="neo-expense-details">
-            Paid by: <strong>{{ expense.paid_by_user?.name || expense.paid_by_user?.email || `User ID:
+            {{ $t('listDetailPage.expensesSection.paidBy') }} <strong>{{ expense.paid_by_user?.name || expense.paid_by_user?.email || `User ID:
               ${expense.paid_by_user_id}` }}</strong>
-            on {{ new Date(expense.expense_date).toLocaleDateString() }}
+            {{ $t('listDetailPage.expensesSection.onDate') }} {{ new Date(expense.expense_date).toLocaleDateString() }}
           </div>
 
           <div class="neo-splits-list">
             <div v-for="split in expense.splits" :key="split.id" class="neo-split-item">
               <div class="neo-split-details">
-                <strong>{{ split.user?.name || split.user?.email || `User ID: ${split.user_id}` }}</strong> owes {{
+                <strong>{{ split.user?.name || split.user?.email || `User ID: ${split.user_id}` }}</strong> {{ $t('listDetailPage.expensesSection.owes') }} {{
                   formatCurrency(split.owed_amount) }}
                 <span class="neo-expense-status" :class="getStatusClass(split.status)">
                   {{ getSplitStatusText(split.status) }}
                 </span>
               </div>
               <div class="neo-split-details">
-                Paid: {{ getPaidAmountForSplitDisplay(split) }}
-                <span v-if="split.paid_at"> on {{ new Date(split.paid_at).toLocaleDateString() }}</span>
+                {{ $t('listDetailPage.expensesSection.paidAmount') }} {{ getPaidAmountForSplitDisplay(split) }}
+                <span v-if="split.paid_at"> {{ $t('listDetailPage.expensesSection.onDate') }} {{ new Date(split.paid_at).toLocaleDateString() }}</span>
               </div>
               <button v-if="split.user_id === authStore.user?.id && split.status !== ExpenseSplitStatusEnum.PAID"
                 class="neo-button neo-button-primary" @click="openSettleShareModal(expense, split)"
                 :disabled="isSettlementLoading">
-                Settle My Share
+                {{ $t('listDetailPage.expensesSection.settleShareButton') }}
               </button>
               <ul v-if="split.settlement_activities && split.settlement_activities.length > 0"
                 class="neo-settlement-activities">
                 <li v-for="activity in split.settlement_activities" :key="activity.id">
-                  Activity: {{ formatCurrency(activity.amount_paid) }} by {{ activity.payer?.name || `User
-                  ${activity.paid_by_user_id}` }} on {{ new Date(activity.paid_at).toLocaleDateString() }}
+                  {{ $t('listDetailPage.expensesSection.activityLabel') }} {{ formatCurrency(activity.amount_paid) }} {{ $t('listDetailPage.expensesSection.byUser') }} {{ activity.payer?.name || `User
+                  ${activity.paid_by_user_id}` }} {{ $t('listDetailPage.expensesSection.onDate') }} {{ new Date(activity.paid_at).toLocaleDateString() }}
                 </li>
               </ul>
             </div>
@@ -149,10 +149,10 @@
       @close="showCreateExpenseForm = false" @created="handleExpenseCreated" />
 
     <!-- OCR Dialog -->
-    <VModal v-model="showOcrDialogState" title="Add Items via OCR" @update:modelValue="!$event && closeOcrDialog()">
+    <VModal v-model="showOcrDialogState" :title="$t('listDetailPage.modals.ocr.title')" @update:modelValue="!$event && closeOcrDialog()">
       <template #default>
         <div v-if="ocrLoading" class="text-center">
-          <VSpinner label="Processing image..." />
+          <VSpinner :label="$t('listDetailPage.loading.ocrProcessing')" />
         </div>
         <VList v-else-if="ocrItems.length > 0">
           <VListItem v-for="(ocrItem, index) in ocrItems" :key="index">
@@ -163,22 +163,22 @@
             </div>
           </VListItem>
         </VList>
-        <VFormField v-else label="Upload Image" :error-message="ocrError || undefined">
+        <VFormField v-else :label="$t('listDetailPage.modals.ocr.uploadLabel')" :error-message="ocrError || undefined">
           <VInput type="file" id="ocrFile" accept="image/*" @change="handleOcrFileUpload" ref="ocrFileInputRef"
             :model-value="''" />
         </VFormField>
       </template>
       <template #footer>
-        <VButton variant="neutral" @click="closeOcrDialog">Cancel</VButton>
+        <VButton variant="neutral" @click="closeOcrDialog">{{ $t('listDetailPage.buttons.cancel') }}</VButton>
         <VButton v-if="ocrItems.length > 0" type="button" variant="primary" @click="addOcrItems"
           :disabled="addingOcrItems">
-          <VSpinner v-if="addingOcrItems" size="sm" /> Add Items
+          <VSpinner v-if="addingOcrItems" size="sm" :label="$t('listDetailPage.loading.addingOcrItems')" /> {{ $t('listDetailPage.buttons.addItems') }}
         </VButton>
       </template>
     </VModal>
 
     <!-- Confirmation Dialog -->
-    <VModal v-model="showConfirmDialogState" title="Confirmation" @update:modelValue="!$event && cancelConfirmation()"
+    <VModal v-model="showConfirmDialogState" :title="$t('listDetailPage.modals.confirmation.title')" @update:modelValue="!$event && cancelConfirmation()"
       size="sm">
       <template #default>
         <div class="text-center">
@@ -187,34 +187,34 @@
         </div>
       </template>
       <template #footer>
-        <VButton variant="neutral" @click="cancelConfirmation">Cancel</VButton>
-        <VButton variant="primary" @click="handleConfirmedAction">Confirm</VButton>
+        <VButton variant="neutral" @click="cancelConfirmation">{{ $t('listDetailPage.buttons.cancel') }}</VButton>
+        <VButton variant="primary" @click="handleConfirmedAction">{{ $t('listDetailPage.buttons.confirm') }}</VButton>
       </template>
     </VModal>
 
     <!-- Cost Summary Dialog -->
-    <VModal v-model="showCostSummaryDialog" title="List Cost Summary" @update:modelValue="showCostSummaryDialog = false"
+    <VModal v-model="showCostSummaryDialog" :title="$t('listDetailPage.modals.costSummary.title')" @update:modelValue="showCostSummaryDialog = false"
       size="lg">
       <template #default>
         <div v-if="costSummaryLoading" class="text-center">
-          <VSpinner label="Loading summary..." />
+          <VSpinner :label="$t('listDetailPage.loading.costSummary')" />
         </div>
         <VAlert v-else-if="costSummaryError" type="error" :message="costSummaryError" />
         <div v-else-if="listCostSummary">
           <div class="mb-3 cost-overview">
-            <p><strong>Total List Cost:</strong> {{ formatCurrency(listCostSummary.total_list_cost) }}</p>
-            <p><strong>Equal Share Per User:</strong> {{ formatCurrency(listCostSummary.equal_share_per_user) }}</p>
-            <p><strong>Participating Users:</strong> {{ listCostSummary.num_participating_users }}</p>
+            <p><strong>{{ $t('listDetailPage.costSummaryModal.totalCostLabel') }}</strong> {{ formatCurrency(listCostSummary.total_list_cost) }}</p>
+            <p><strong>{{ $t('listDetailPage.costSummaryModal.equalShareLabel') }}</strong> {{ formatCurrency(listCostSummary.equal_share_per_user) }}</p>
+            <p><strong>{{ $t('listDetailPage.costSummaryModal.participantsLabel') }}</strong> {{ listCostSummary.num_participating_users }}</p>
           </div>
-          <h4>User Balances</h4>
+          <h4>{{ $t('listDetailPage.costSummaryModal.userBalancesHeader') }}</h4>
           <div class="table-container mt-2">
             <table class="table">
               <thead>
                 <tr>
-                  <th>User</th>
-                  <th class="text-right">Items Added Value</th>
-                  <th class="text-right">Amount Due</th>
-                  <th class="text-right">Balance</th>
+                  <th>{{ $t('listDetailPage.costSummaryModal.tableHeaders.user') }}</th>
+                  <th class="text-right">{{ $t('listDetailPage.costSummaryModal.tableHeaders.itemsAddedValue') }}</th>
+                  <th class="text-right">{{ $t('listDetailPage.costSummaryModal.tableHeaders.amountDue') }}</th>
+                  <th class="text-right">{{ $t('listDetailPage.costSummaryModal.tableHeaders.balance') }}</th>
                 </tr>
               </thead>
               <tbody>
@@ -231,60 +231,60 @@
             </table>
           </div>
         </div>
-        <p v-else>No cost summary available.</p>
+        <p v-else>{{ $t('listDetailPage.costSummaryModal.emptyState') }}</p>
       </template>
       <template #footer>
-        <VButton variant="primary" @click="showCostSummaryDialog = false">Close</VButton>
+        <VButton variant="primary" @click="showCostSummaryDialog = false">{{ $t('listDetailPage.buttons.close') }}</VButton>
       </template>
     </VModal>
 
     <!-- Settle Share Modal -->
-    <VModal v-model="showSettleModal" title="Settle Share" @update:modelValue="!$event && closeSettleShareModal()"
+    <VModal v-model="showSettleModal" :title="$t('listDetailPage.settleShareModal.title')" @update:modelValue="!$event && closeSettleShareModal()"
       size="md">
       <template #default>
         <div v-if="isSettlementLoading" class="text-center">
-          <VSpinner label="Processing settlement..." />
+          <VSpinner :label="$t('listDetailPage.loading.settlement')" />
         </div>
         <VAlert v-else-if="settleAmountError" type="error" :message="settleAmountError" />
         <div v-else>
-          <p>Settle amount for {{ selectedSplitForSettlement?.user?.name || selectedSplitForSettlement?.user?.email ||
-            `User ID: ${selectedSplitForSettlement?.user_id}` }}:</p>
-          <VFormField label="Amount" :error-message="settleAmountError || undefined">
+          <p>{{ $t('listDetailPage.settleShareModal.settleAmountFor', { userName: selectedSplitForSettlement?.user?.name || selectedSplitForSettlement?.user?.email || `User ID: ${selectedSplitForSettlement?.user_id}` }) }}</p>
+          <VFormField :label="$t('listDetailPage.settleShareModal.amountLabel')" :error-message="settleAmountError || undefined">
             <VInput type="number" v-model="settleAmount" id="settleAmount" required />
           </VFormField>
         </div>
       </template>
       <template #footer>
-        <VButton variant="neutral" @click="closeSettleShareModal">Cancel</VButton>
-        <VButton variant="primary" @click="handleConfirmSettle">Confirm</VButton>
+        <VButton variant="neutral" @click="closeSettleShareModal">{{ $t('listDetailPage.settleShareModal.cancelButton') }}</VButton>
+        <VButton variant="primary" @click="handleConfirmSettle">{{ $t('listDetailPage.settleShareModal.confirmButton') }}</VButton>
       </template>
     </VModal>
 
     <!-- Edit Item Dialog -->
-    <VModal v-model="showEditDialog" title="Edit Item" @update:modelValue="!$event && closeEditDialog()">
+    <VModal v-model="showEditDialog" :title="$t('listDetailPage.modals.editItem.title')" @update:modelValue="!$event && closeEditDialog()">
       <template #default>
-        <VFormField v-if="editingItem" label="Item Name" class="mb-4">
+        <VFormField v-if="editingItem" :label="$t('listDetailPage.modals.editItem.nameLabel')" class="mb-4">
           <VInput type="text" id="editItemName" v-model="editingItem.name" required />
         </VFormField>
-        <VFormField v-if="editingItem" label="Quantity">
+        <VFormField v-if="editingItem" :label="$t('listDetailPage.modals.editItem.quantityLabel')">
           <VInput type="number" id="editItemQuantity" :model-value="editingItem.quantity || ''"
             @update:modelValue="editingItem.quantity = $event" min="1" />
         </VFormField>
       </template>
       <template #footer>
-        <VButton variant="neutral" @click="closeEditDialog">Cancel</VButton>
-        <VButton variant="primary" @click="handleConfirmEdit" :disabled="!editingItem?.name.trim()">Save Changes
+        <VButton variant="neutral" @click="closeEditDialog">{{ $t('listDetailPage.buttons.cancel') }}</VButton>
+        <VButton variant="primary" @click="handleConfirmEdit" :disabled="!editingItem?.name.trim()">{{ $t('listDetailPage.buttons.saveChanges') }}
         </VButton>
       </template>
     </VModal>
 
-    <VAlert v-if="!list && !pageInitialLoad" type="info" message="Group not found or an error occurred." />
+    <VAlert v-if="!list && !pageInitialLoad" type="info" :message="$t('listDetailPage.errors.genericLoadFailure')" />
   </main>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, watch, nextTick, computed } from 'vue';
 import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 import { apiClient, API_ENDPOINTS } from '@/config/api'; // Keep for item management
 import { useEventListener, useFileDialog, useNetwork } from '@vueuse/core'; // onClickOutside removed
 import { useNotificationStore } from '@/stores/notifications';
@@ -313,6 +313,7 @@ import VListItem from '@/components/valerie/VListItem.vue';
 import VCheckbox from '@/components/valerie/VCheckbox.vue';
 // VTextarea and VSelect are not used in this part of the refactor for ListDetailPage
 
+const { t } = useI18n();
 
 // UI-specific properties that we add to items
 interface ItemWithUI extends Item {
@@ -433,31 +434,23 @@ const processListItems = (items: Item[]): ItemWithUI[] => {
 };
 
 const fetchListDetails = async () => {
-  // If pageInitialLoad is still true here, it means no shell was loaded.
-  // The main spinner might be showing. We're about to fetch details, so turn off main spinner.
   if (pageInitialLoad.value) {
     pageInitialLoad.value = false;
   }
   itemsAreLoading.value = true;
-
-  // Check for pre-fetched full data first
   const routeId = String(route.params.id);
   const cachedFullData = sessionStorage.getItem(`listDetailFull_${routeId}`);
 
   try {
     let response;
     if (cachedFullData) {
-      // Use cached data
       response = { data: JSON.parse(cachedFullData) };
-      // Clear the cache after using it
       sessionStorage.removeItem(`listDetailFull_${routeId}`);
     } else {
-      // Fetch fresh data
       response = await apiClient.get(API_ENDPOINTS.LISTS.BY_ID(routeId));
     }
 
     const rawList = response.data as ListWithExpenses;
-    // Map API response to local List type
     const localList: List = {
       id: rawList.id,
       name: rawList.name,
@@ -477,17 +470,15 @@ const fetchListDetails = async () => {
       await fetchListCostSummary();
     }
   } catch (err: unknown) {
-    const errorMessage = (err instanceof Error ? err.message : String(err)) || 'Failed to load list details.';
-    if (!list.value) { // If there was no shell AND this fetch failed
-      error.value = errorMessage; // This error is for the whole page
+    const apiErrorMessage = err instanceof Error ? err.message : String(err);
+    const fallbackErrorMessage = t('listDetailPage.errors.fetchFailed');
+    if (!list.value) {
+      error.value = apiErrorMessage || fallbackErrorMessage;
     } else {
-      // We have a shell, but items failed to load.
-      // Show a notification for item loading failure. list.items will remain as per shell (empty).
-      notificationStore.addNotification({ message: `Failed to load items: ${errorMessage}`, type: 'error' });
+      notificationStore.addNotification({ message: t('listDetailPage.errors.fetchItemsFailed', { errorMessage: apiErrorMessage }), type: 'error' });
     }
   } finally {
     itemsAreLoading.value = false;
-    // If list is still null and no error was set (e.g. silent failure), ensure pageInitialLoad is false.
     if (!list.value && !error.value) {
       pageInitialLoad.value = false;
     }
@@ -532,7 +523,7 @@ const isItemPendingSync = (item: Item) => {
 
 const onAddItem = async () => {
   if (!list.value || !newItem.value.name.trim()) {
-    notificationStore.addNotification({ message: 'Please enter an item name.', type: 'warning' });
+    notificationStore.addNotification({ message: t('listDetailPage.notifications.enterItemName'), type: 'warning' });
     if (itemNameInputRef.value?.$el) {
       (itemNameInputRef.value.$el as HTMLElement).focus();
     }
@@ -541,7 +532,7 @@ const onAddItem = async () => {
   addingItem.value = true;
 
   if (!isOnline.value) {
-    const offlinePayload: any = {
+    const offlinePayload: any = { // Define explicit type later if needed
       name: newItem.value.name
     };
     if (typeof newItem.value.quantity !== 'undefined') {
@@ -555,12 +546,12 @@ const onAddItem = async () => {
       }
     });
     const optimisticItem: ItemWithUI = {
-      id: Date.now(),
+      id: Date.now(), // Temporary ID for offline
       name: newItem.value.name,
       quantity: typeof newItem.value.quantity === 'string' ? Number(newItem.value.quantity) : (newItem.value.quantity || null),
       is_complete: false,
       price: null,
-      version: 1,
+      version: 1, // Assuming initial version
       updated_at: new Date().toISOString(),
       created_at: new Date().toISOString(),
       list_id: list.value.id,
@@ -575,6 +566,7 @@ const onAddItem = async () => {
       (itemNameInputRef.value.$el as HTMLElement).focus();
     }
     addingItem.value = false;
+    notificationStore.addNotification({ message: t('listDetailPage.notifications.itemAddedSuccess'), type: 'success' }); // Optimistic UI
     return;
   }
 
@@ -592,8 +584,9 @@ const onAddItem = async () => {
     if (itemNameInputRef.value?.$el) {
       (itemNameInputRef.value.$el as HTMLElement).focus();
     }
+    notificationStore.addNotification({ message: t('listDetailPage.notifications.itemAddedSuccess'), type: 'success' });
   } catch (err) {
-    notificationStore.addNotification({ message: (err instanceof Error ? err.message : String(err)) || 'Failed to add item.', type: 'error' });
+    notificationStore.addNotification({ message: (err instanceof Error ? err.message : String(err)) || t('listDetailPage.errors.addItemFailed'), type: 'error' });
   } finally {
     addingItem.value = false;
   }
@@ -618,6 +611,7 @@ const updateItem = async (item: ItemWithUI, newCompleteStatus: boolean) => {
       }
     });
     item.updating = false;
+    notificationStore.addNotification({ message: t('listDetailPage.notifications.itemUpdatedSuccess'), type: 'success' }); // Optimistic UI
     return;
   }
 
@@ -627,9 +621,10 @@ const updateItem = async (item: ItemWithUI, newCompleteStatus: boolean) => {
       { completed: newCompleteStatus, version: item.version }
     );
     item.version++;
+    notificationStore.addNotification({ message: t('listDetailPage.notifications.itemUpdatedSuccess'), type: 'success' });
   } catch (err) {
-    item.is_complete = originalCompleteStatus;
-    notificationStore.addNotification({ message: (err instanceof Error ? err.message : String(err)) || 'Failed to update item.', type: 'error' });
+    item.is_complete = originalCompleteStatus; // Revert optimistic update
+    notificationStore.addNotification({ message: (err instanceof Error ? err.message : String(err)) || t('listDetailPage.errors.updateItemFailed'), type: 'error' });
   } finally {
     item.updating = false;
   }
@@ -638,11 +633,12 @@ const updateItem = async (item: ItemWithUI, newCompleteStatus: boolean) => {
 const updateItemPrice = async (item: ItemWithUI) => {
   if (!list.value || !item.is_complete) return;
   const newPrice = item.priceInput !== undefined && String(item.priceInput).trim() !== '' ? parseFloat(String(item.priceInput)) : null;
-  if (item.price === newPrice?.toString()) return;
+  if (item.price === newPrice?.toString()) return; // No change
   item.updating = true;
   const originalPrice = item.price;
   const originalPriceInput = item.priceInput;
-  item.price = newPrice?.toString() || null;
+  item.price = newPrice?.toString() || null; // Optimistic update
+
   if (!isOnline.value) {
     offlineStore.addAction({
       type: 'update_list_item',
@@ -650,13 +646,14 @@ const updateItemPrice = async (item: ItemWithUI) => {
         listId: String(list.value.id),
         itemId: String(item.id),
         data: {
-          price: newPrice ?? null,
-          completed: item.is_complete
+          price: newPrice ?? null, // Ensure null is sent if cleared
+          completed: item.is_complete // Keep completion status
         },
         version: item.version
       }
     });
     item.updating = false;
+    notificationStore.addNotification({ message: t('listDetailPage.notifications.itemUpdatedSuccess'), type: 'success' }); // Optimistic UI
     return;
   }
 
@@ -666,10 +663,11 @@ const updateItemPrice = async (item: ItemWithUI) => {
       { price: newPrice?.toString(), completed: item.is_complete, version: item.version }
     );
     item.version++;
+    notificationStore.addNotification({ message: t('listDetailPage.notifications.itemUpdatedSuccess'), type: 'success' });
   } catch (err) {
-    item.price = originalPrice;
+    item.price = originalPrice; // Revert optimistic update
     item.priceInput = originalPriceInput;
-    notificationStore.addNotification({ message: (err instanceof Error ? err.message : String(err)) || 'Failed to update item price.', type: 'error' });
+    notificationStore.addNotification({ message: (err instanceof Error ? err.message : String(err)) || t('listDetailPage.errors.updateItemPriceFailed'), type: 'error' });
   } finally {
     item.updating = false;
   }
@@ -678,6 +676,7 @@ const updateItemPrice = async (item: ItemWithUI) => {
 const deleteItem = async (item: ItemWithUI) => {
   if (!list.value) return;
   item.deleting = true;
+  const originalItems = [...list.value.items]; // For potential revert
 
   if (!isOnline.value) {
     offlineStore.addAction({
@@ -687,29 +686,35 @@ const deleteItem = async (item: ItemWithUI) => {
         itemId: String(item.id)
       }
     });
-    list.value.items = list.value.items.filter(i => i.id !== item.id);
+    list.value.items = list.value.items.filter(i => i.id !== item.id); // Optimistic UI
     item.deleting = false;
+    notificationStore.addNotification({ message: t('listDetailPage.notifications.itemDeleteSuccess'), type: 'success' });
     return;
   }
 
   try {
     await apiClient.delete(API_ENDPOINTS.LISTS.ITEM(String(list.value.id), String(item.id)));
     list.value.items = list.value.items.filter(i => i.id !== item.id);
+    notificationStore.addNotification({ message: t('listDetailPage.notifications.itemDeleteSuccess'), type: 'success' });
   } catch (err) {
-    notificationStore.addNotification({ message: (err instanceof Error ? err.message : String(err)) || 'Failed to delete item.', type: 'error' });
+    list.value.items = originalItems; // Revert optimistic UI
+    notificationStore.addNotification({ message: (err instanceof Error ? err.message : String(err)) || t('listDetailPage.errors.deleteItemFailed'), type: 'error' });
   } finally {
     item.deleting = false;
   }
 };
 
 const confirmUpdateItem = (item: ItemWithUI, newCompleteStatus: boolean) => {
-  confirmDialogMessage.value = `Mark "${item.name}" as ${newCompleteStatus ? 'complete' : 'incomplete'}?`;
+  confirmDialogMessage.value = t('listDetailPage.confirmations.updateMessage', {
+    itemName: item.name,
+    status: newCompleteStatus ? t('listDetailPage.confirmations.statusComplete') : t('listDetailPage.confirmations.statusIncomplete')
+  });
   pendingAction.value = () => updateItem(item, newCompleteStatus);
   showConfirmDialogState.value = true;
 };
 
 const confirmDeleteItem = (item: ItemWithUI) => {
-  confirmDialogMessage.value = `Delete "${item.name}"? This cannot be undone.`;
+  confirmDialogMessage.value = t('listDetailPage.confirmations.deleteMessage', { itemName: item.name });
   pendingAction.value = () => deleteItem(item);
   showConfirmDialogState.value = true;
 };
@@ -723,20 +728,19 @@ const handleConfirmedAction = async () => {
 const cancelConfirmation = () => {
   showConfirmDialogState.value = false;
   pendingAction.value = null;
+  confirmDialogMessage.value = ''; // Clear message
 };
 
 const openOcrDialog = () => {
   ocrItems.value = [];
   ocrError.value = null;
-  resetOcrFileDialog();
+  resetOcrFileDialog(); // From useFileDialog
   showOcrDialogState.value = true;
   nextTick(() => {
-    // For VInput type file, direct .value = '' might not work or be needed.
-    // VInput should handle its own reset if necessary, or this ref might target the native input inside.
-    if (ocrFileInputRef.value && ocrFileInputRef.value.$el) { // Assuming VInput exposes $el
+    if (ocrFileInputRef.value && ocrFileInputRef.value.$el) {
       const inputElement = ocrFileInputRef.value.$el.querySelector('input[type="file"]') || ocrFileInputRef.value.$el;
       if (inputElement) (inputElement as HTMLInputElement).value = '';
-    } else if (ocrFileInputRef.value) { // Fallback if ref is native input
+    } else if (ocrFileInputRef.value) { // Native input
       (ocrFileInputRef.value as any).value = '';
     }
   });
@@ -774,17 +778,18 @@ const handleOcrUpload = async (file: File) => {
     });
     ocrItems.value = response.data.extracted_items.map((nameStr: string) => ({ name: nameStr.trim() })).filter((item: { name: string }) => item.name);
     if (ocrItems.value.length === 0) {
-      ocrError.value = "No items extracted from the image.";
+      ocrError.value = t('listDetailPage.errors.ocrNoItems');
     }
   } catch (err) {
-    ocrError.value = (err instanceof Error ? err.message : String(err)) || 'Failed to process image.';
+    ocrError.value = (err instanceof Error ? err.message : String(err)) || t('listDetailPage.errors.ocrFailed');
   } finally {
     ocrLoading.value = false;
+    // Reset file input
     if (ocrFileInputRef.value && ocrFileInputRef.value.$el) {
       const inputElement = ocrFileInputRef.value.$el.querySelector('input[type="file"]') || ocrFileInputRef.value.$el;
       if (inputElement) (inputElement as HTMLInputElement).value = '';
-    } else if (ocrFileInputRef.value) {
-      (ocrFileInputRef.value as any).value = '';
+    } else if (ocrFileInputRef.value) { // Native input
+       (ocrFileInputRef.value as any).value = '';
     }
   }
 };
@@ -798,16 +803,18 @@ const addOcrItems = async () => {
       if (!item.name.trim()) continue;
       const response = await apiClient.post(
         API_ENDPOINTS.LISTS.ITEMS(String(list.value.id)),
-        { name: item.name, quantity: "1" } // Assuming default quantity 1 for OCR items
+        { name: item.name, quantity: "1" } // Default quantity 1
       );
       const addedItem = response.data as Item;
       list.value.items.push(processListItems([addedItem])[0]);
       successCount++;
     }
-    if (successCount > 0) notificationStore.addNotification({ message: `${successCount} item(s) added successfully from OCR.`, type: 'success' });
+    if (successCount > 0) {
+      notificationStore.addNotification({ message: t('listDetailPage.notifications.itemsAddedSuccessOcr', { count: successCount }), type: 'success' });
+    }
     closeOcrDialog();
   } catch (err) {
-    notificationStore.addNotification({ message: (err instanceof Error ? err.message : String(err)) || 'Failed to add OCR items.', type: 'error' });
+    notificationStore.addNotification({ message: (err instanceof Error ? err.message : String(err)) || t('listDetailPage.errors.addOcrItemsFailed'), type: 'error' });
   } finally {
     addingOcrItems.value = false;
   }
@@ -821,7 +828,7 @@ const fetchListCostSummary = async () => {
     const response = await apiClient.get(API_ENDPOINTS.COSTS.LIST_SUMMARY(list.value.id));
     listCostSummary.value = response.data;
   } catch (err) {
-    costSummaryError.value = (err instanceof Error ? err.message : String(err)) || 'Failed to load cost summary.';
+    costSummaryError.value = (err instanceof Error ? err.message : String(err)) || t('listDetailPage.errors.loadCostSummaryFailed');
     listCostSummary.value = null;
   } finally {
     costSummaryLoading.value = false;
@@ -844,19 +851,19 @@ const getPaidAmountForSplitDisplay = (split: ExpenseSplit): string => {
 
 const getSplitStatusText = (status: ExpenseSplitStatusEnum): string => {
   switch (status) {
-    case ExpenseSplitStatusEnum.PAID: return 'Paid';
-    case ExpenseSplitStatusEnum.PARTIALLY_PAID: return 'Partially Paid';
-    case ExpenseSplitStatusEnum.UNPAID: return 'Unpaid';
-    default: return status;
+    case ExpenseSplitStatusEnum.PAID: return t('listDetailPage.status.paid');
+    case ExpenseSplitStatusEnum.PARTIALLY_PAID: return t('listDetailPage.status.partiallyPaid');
+    case ExpenseSplitStatusEnum.UNPAID: return t('listDetailPage.status.unpaid');
+    default: return t('listDetailPage.status.unknown');
   }
 };
 
 const getOverallExpenseStatusText = (status: ExpenseOverallStatusEnum): string => {
   switch (status) {
-    case ExpenseOverallStatusEnum.PAID: return 'Settled';
-    case ExpenseOverallStatusEnum.PARTIALLY_PAID: return 'Partially Settled';
-    case ExpenseOverallStatusEnum.UNPAID: return 'Unsettled';
-    default: return status;
+    case ExpenseOverallStatusEnum.PAID: return t('listDetailPage.status.settled');
+    case ExpenseOverallStatusEnum.PARTIALLY_PAID: return t('listDetailPage.status.partiallySettled');
+    case ExpenseOverallStatusEnum.UNPAID: return t('listDetailPage.status.unsettled');
+    default: return t('listDetailPage.status.unknown');
   }
 };
 
@@ -872,76 +879,74 @@ useEventListener(window, 'keydown', (event: KeyboardEvent) => {
   if (event.key === 'n' && !event.ctrlKey && !event.metaKey && !event.altKey) {
     const activeElement = document.activeElement;
     if (activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA')) {
-      return;
+      return; // Don't interfere with typing
     }
-    if (showOcrDialogState.value || showCostSummaryDialog.value || showConfirmDialogState.value) {
+    // Check if any modal is open, if so, don't trigger
+    if (showOcrDialogState.value || showCostSummaryDialog.value || showConfirmDialogState.value || showEditDialog.value || showSettleModal.value || showCreateExpenseForm.value) {
       return;
     }
     event.preventDefault();
-    if (itemNameInputRef.value?.$el) {
+    if (itemNameInputRef.value?.$el) { // Focus the add item input
       (itemNameInputRef.value.$el as HTMLElement).focus();
     }
   }
 });
 
 let touchStartX = 0;
-const SWIPE_THRESHOLD = 50;
+const SWIPE_THRESHOLD = 50; // Pixels
 
 const handleTouchStart = (event: TouchEvent) => {
   touchStartX = event.changedTouches[0].clientX;
 };
 
-const handleTouchMove = () => {
+const handleTouchMove = (event: TouchEvent, item: ItemWithUI) => {
+  // This function might be used for swipe-to-reveal actions in the future
+  // For now, it's a placeholder or can be removed if not used.
 };
 
-const handleTouchEnd = () => {
+const handleTouchEnd = (event: TouchEvent, item: ItemWithUI) => {
+  // This function might be used for swipe-to-reveal actions in the future
+  // For now, it's a placeholder or can be removed if not used.
 };
 
 
 onMounted(() => {
   pageInitialLoad.value = true;
   itemsAreLoading.value = false;
-  error.value = null; // Clear stale errors on mount
+  error.value = null;
 
   if (!route.params.id) {
-    error.value = 'No list ID provided';
-    pageInitialLoad.value = false; // Stop initial load phase, show error
-    listDetailStore.setError('No list ID provided for expenses.'); // Set error in expense store
+    error.value = t('listDetailPage.errors.fetchFailed'); // Generic error if no ID
+    pageInitialLoad.value = false;
+    listDetailStore.setError(t('listDetailPage.errors.fetchFailed'));
     return;
   }
 
-  // Attempt to load shell data from sessionStorage
   const listShellJSON = sessionStorage.getItem('listDetailShell');
   const routeId = String(route.params.id);
 
   if (listShellJSON) {
     const shellData = JSON.parse(listShellJSON);
-    // Ensure the shell data is for the current list
     if (shellData.id === parseInt(routeId, 10)) {
       list.value = {
         id: shellData.id,
         name: shellData.name,
         description: shellData.description,
-        is_complete: false, // Assume not complete until full data loaded
-        items: [], // Start with no items, they will be fetched by fetchListDetails
-        version: 0, // Placeholder, will be updated
-        updated_at: new Date().toISOString(), // Placeholder
+        is_complete: false,
+        items: [],
+        version: 0,
+        updated_at: new Date().toISOString(),
         group_id: shellData.group_id,
       };
-      pageInitialLoad.value = false; // Shell loaded, main page spinner can go
-      // Optionally, clear the sessionStorage item after use
-      // sessionStorage.removeItem('listDetailShell');
+      pageInitialLoad.value = false;
     } else {
-      // Shell data is for a different list, clear it
       sessionStorage.removeItem('listDetailShell');
-      // pageInitialLoad remains true, will be set to false by fetchListDetails
     }
   }
 
-  fetchListDetails().then(() => { // Fetches items
+  fetchListDetails().then(() => {
     startPolling();
   });
-  // Fetch expenses using the store when component is mounted
   const routeParamsId = route.params.id;
   listDetailStore.fetchListWithExpenses(String(routeParamsId));
 });
@@ -951,7 +956,7 @@ onUnmounted(() => {
 });
 
 const editItem = (item: Item) => {
-  editingItem.value = { ...item };
+  editingItem.value = { ...item }; // Clone item for editing
   showEditDialog.value = true;
 };
 
@@ -963,25 +968,22 @@ const closeEditDialog = () => {
 const handleConfirmEdit = async () => {
   if (!editingItem.value || !list.value) return;
 
-  const item = editingItem.value;
-  const originalItem = list.value.items.find(i => i.id === item.id);
-  if (!originalItem) return;
+  const itemToUpdate = editingItem.value; // Already a clone
 
   try {
     const response = await apiClient.put(
-      API_ENDPOINTS.LISTS.ITEM(String(list.value.id), String(item.id)),
+      API_ENDPOINTS.LISTS.ITEM(String(list.value.id), String(itemToUpdate.id)),
       {
-        name: item.name,
-        quantity: item.quantity?.toString(),
-        version: item.version
+        name: itemToUpdate.name,
+        quantity: itemToUpdate.quantity?.toString(), // Ensure quantity is string or null
+        version: itemToUpdate.version
       }
     );
 
-    // Update the item in the list
-    const updatedItem = response.data as Item;
-    const index = list.value.items.findIndex(i => i.id === item.id);
+    const updatedItemFromApi = response.data as Item;
+    const index = list.value.items.findIndex(i => i.id === updatedItemFromApi.id);
     if (index !== -1) {
-      list.value.items[index] = processListItems([updatedItem])[0];
+      list.value.items[index] = processListItems([updatedItemFromApi])[0];
     }
 
     notificationStore.addNotification({
@@ -991,7 +993,7 @@ const handleConfirmEdit = async () => {
     closeEditDialog();
   } catch (err) {
     notificationStore.addNotification({
-      message: (err instanceof Error ? err.message : String(err)) || 'Failed to update item',
+      message: (err instanceof Error ? err.message : String(err)) || t('listDetailPage.errors.updateItemFailed'),
       type: 'error'
     });
   }
@@ -999,7 +1001,7 @@ const handleConfirmEdit = async () => {
 
 const openSettleShareModal = (expense: Expense, split: ExpenseSplit) => {
   if (split.user_id !== authStore.user?.id) {
-    notificationStore.addNotification({ message: "You can only settle your own shares.", type: 'warning' });
+    notificationStore.addNotification({ message: t('listDetailPage.notifications.cannotSettleOthersShares'), type: 'warning' });
     return;
   }
   selectedSplitForSettlement.value = split;
@@ -1023,24 +1025,24 @@ const closeSettleShareModal = () => {
 const validateSettleAmount = (): boolean => {
   settleAmountError.value = null;
   if (!settleAmount.value.trim()) {
-    settleAmountError.value = 'Please enter an amount.';
+    settleAmountError.value = t('listDetailPage.settleShareModal.errors.enterAmount');
     return false;
   }
   const amount = new Decimal(settleAmount.value);
   if (amount.isNaN() || amount.isNegative() || amount.isZero()) {
-    settleAmountError.value = 'Please enter a positive amount.';
+    settleAmountError.value = t('listDetailPage.settleShareModal.errors.positiveAmount');
     return false;
   }
   if (selectedSplitForSettlement.value) {
     const alreadyPaid = new Decimal(listDetailStore.getPaidAmountForSplit(selectedSplitForSettlement.value.id));
     const owed = new Decimal(selectedSplitForSettlement.value.owed_amount);
     const remaining = owed.minus(alreadyPaid);
-    if (amount.greaterThan(remaining.plus(new Decimal('0.001')))) { // Epsilon for float issues
-      settleAmountError.value = `Amount cannot exceed remaining: ${formatCurrency(remaining.toFixed(2))}.`;
+    if (amount.greaterThan(remaining.plus(new Decimal('0.001')))) {
+      settleAmountError.value = t('listDetailPage.settleShareModal.errors.exceedsRemaining', { amount: formatCurrency(remaining.toFixed(2)) });
       return false;
     }
   } else {
-    settleAmountError.value = 'Error: No split selected.'; // Should not happen
+    settleAmountError.value = t('listDetailPage.settleShareModal.errors.noSplitSelected');
     return false;
   }
   return true;
@@ -1050,13 +1052,13 @@ const currentListIdForRefetch = computed(() => listDetailStore.currentList?.id |
 
 const handleConfirmSettle = async () => {
   if (!selectedSplitForSettlement.value || !authStore.user?.id || !currentListIdForRefetch.value) {
-    notificationStore.addNotification({ message: 'Cannot process settlement: missing data.', type: 'error' });
+    notificationStore.addNotification({ message: t('listDetailPage.notifications.settlementDataMissing'), type: 'error' });
     return;
   }
-  // Use settleAmount.value which is the confirmed amount (remaining amount for MVP)
+
   const activityData: SettlementActivityCreate = {
     expense_split_id: selectedSplitForSettlement.value.id,
-    paid_by_user_id: Number(authStore.user.id), // Convert to number
+    paid_by_user_id: Number(authStore.user.id),
     amount_paid: new Decimal(settleAmount.value).toString(),
     paid_at: new Date().toISOString(),
   };
@@ -1068,15 +1070,14 @@ const handleConfirmSettle = async () => {
   });
 
   if (success) {
-    notificationStore.addNotification({ message: 'Share settled successfully!', type: 'success' });
+    notificationStore.addNotification({ message: t('listDetailPage.notifications.settleShareSuccess'), type: 'success' });
     closeSettleShareModal();
   } else {
-    notificationStore.addNotification({ message: listDetailStore.error || 'Failed to settle share.', type: 'error' });
+    notificationStore.addNotification({ message: listDetailStore.error || t('listDetailPage.notifications.settleShareFailed'), type: 'error' });
   }
 };
 
 const handleExpenseCreated = (expense: any) => {
-  // Refresh the expenses list
   if (list.value?.id) {
     listDetailStore.fetchListWithExpenses(String(list.value.id));
   }
diff --git a/fe/src/pages/MyChoresPage.vue b/fe/src/pages/MyChoresPage.vue
index f93e453..eb6207c 100644
--- a/fe/src/pages/MyChoresPage.vue
+++ b/fe/src/pages/MyChoresPage.vue
@@ -1,12 +1,12 @@
 <template>
     <main class="container page-padding">
         <div class="page-header">
-            <h1 class="mb-3">My Assigned Chores</h1>
+            <h1 class="mb-3">{{ $t('myChoresPage.title') }}</h1>
             <div class="header-controls">
                 <label class="toggle-switch">
                     <input type="checkbox" v-model="showCompleted" @change="loadAssignments">
                     <span class="toggle-slider"></span>
-                    Show Completed
+                    {{ $t('myChoresPage.showCompletedToggle') }}
                 </label>
             </div>
         </div>
@@ -17,7 +17,7 @@
             <div v-if="assignmentsByTimeline.overdue.length > 0" class="timeline-section overdue">
                 <div class="timeline-header">
                     <div class="timeline-dot overdue"></div>
-                    <h2 class="timeline-title">Overdue</h2>
+                    <h2 class="timeline-title">{{ $t('myChoresPage.timelineHeaders.overdue') }}</h2>
                     <span class="timeline-count">{{ assignmentsByTimeline.overdue.length }}</span>
                 </div>
                 <div class="timeline-items">
@@ -29,7 +29,7 @@
                                 <h3>{{ assignment.chore?.name }}</h3>
                                 <div class="assignment-tags">
                                     <span class="chore-type-tag" :class="assignment.chore?.type">
-                                        {{ assignment.chore?.type === 'personal' ? 'Personal' : 'Group' }}
+                                        {{ assignment.chore?.type === 'personal' ? $t('myChoresPage.choreCard.personal') : $t('myChoresPage.choreCard.group') }}
                                     </span>
                                     <span class="chore-frequency-tag" :class="assignment.chore?.frequency">
                                         {{ formatFrequency(assignment.chore?.frequency) }}
@@ -39,7 +39,7 @@
                             <div class="assignment-meta">
                                 <div class="assignment-due-date overdue">
                                     <span class="material-icons">schedule</span>
-                                    Due {{ formatDate(assignment.due_date) }}
+                                    {{ $t('myChoresPage.choreCard.duePrefix') }} {{ formatDate(assignment.due_date) }}
                                 </div>
                                 <div v-if="assignment.chore?.description" class="assignment-description">
                                     {{ assignment.chore.description }}
@@ -49,7 +49,7 @@
                                 <button class="btn btn-success btn-sm" @click="completeAssignment(assignment)"
                                     :disabled="isCompleting">
                                     <span class="material-icons">check_circle</span>
-                                    Mark Complete
+                                    {{ $t('myChoresPage.choreCard.markCompleteButton') }}
                                 </button>
                             </div>
                         </div>
@@ -61,7 +61,7 @@
             <div v-if="assignmentsByTimeline.today.length > 0" class="timeline-section today">
                 <div class="timeline-header">
                     <div class="timeline-dot today"></div>
-                    <h2 class="timeline-title">Due Today</h2>
+                    <h2 class="timeline-title">{{ $t('myChoresPage.timelineHeaders.today') }}</h2>
                     <span class="timeline-count">{{ assignmentsByTimeline.today.length }}</span>
                 </div>
                 <div class="timeline-items">
@@ -73,7 +73,7 @@
                                 <h3>{{ assignment.chore?.name }}</h3>
                                 <div class="assignment-tags">
                                     <span class="chore-type-tag" :class="assignment.chore?.type">
-                                        {{ assignment.chore?.type === 'personal' ? 'Personal' : 'Group' }}
+                                        {{ assignment.chore?.type === 'personal' ? $t('myChoresPage.choreCard.personal') : $t('myChoresPage.choreCard.group') }}
                                     </span>
                                     <span class="chore-frequency-tag" :class="assignment.chore?.frequency">
                                         {{ formatFrequency(assignment.chore?.frequency) }}
@@ -83,7 +83,7 @@
                             <div class="assignment-meta">
                                 <div class="assignment-due-date today">
                                     <span class="material-icons">today</span>
-                                    Due Today
+                                    {{ $t('myChoresPage.choreCard.dueToday') }}
                                 </div>
                                 <div v-if="assignment.chore?.description" class="assignment-description">
                                     {{ assignment.chore.description }}
@@ -93,7 +93,7 @@
                                 <button class="btn btn-success btn-sm" @click="completeAssignment(assignment)"
                                     :disabled="isCompleting">
                                     <span class="material-icons">check_circle</span>
-                                    Mark Complete
+                                    {{ $t('myChoresPage.choreCard.markCompleteButton') }}
                                 </button>
                             </div>
                         </div>
@@ -105,7 +105,7 @@
             <div v-if="assignmentsByTimeline.thisWeek.length > 0" class="timeline-section this-week">
                 <div class="timeline-header">
                     <div class="timeline-dot this-week"></div>
-                    <h2 class="timeline-title">This Week</h2>
+                    <h2 class="timeline-title">{{ $t('myChoresPage.timelineHeaders.thisWeek') }}</h2>
                     <span class="timeline-count">{{ assignmentsByTimeline.thisWeek.length }}</span>
                 </div>
                 <div class="timeline-items">
@@ -117,7 +117,7 @@
                                 <h3>{{ assignment.chore?.name }}</h3>
                                 <div class="assignment-tags">
                                     <span class="chore-type-tag" :class="assignment.chore?.type">
-                                        {{ assignment.chore?.type === 'personal' ? 'Personal' : 'Group' }}
+                                        {{ assignment.chore?.type === 'personal' ? $t('myChoresPage.choreCard.personal') : $t('myChoresPage.choreCard.group') }}
                                     </span>
                                     <span class="chore-frequency-tag" :class="assignment.chore?.frequency">
                                         {{ formatFrequency(assignment.chore?.frequency) }}
@@ -127,7 +127,7 @@
                             <div class="assignment-meta">
                                 <div class="assignment-due-date this-week">
                                     <span class="material-icons">date_range</span>
-                                    Due {{ formatDate(assignment.due_date) }}
+                                    {{ $t('myChoresPage.choreCard.duePrefix') }} {{ formatDate(assignment.due_date) }}
                                 </div>
                                 <div v-if="assignment.chore?.description" class="assignment-description">
                                     {{ assignment.chore.description }}
@@ -137,7 +137,7 @@
                                 <button class="btn btn-success btn-sm" @click="completeAssignment(assignment)"
                                     :disabled="isCompleting">
                                     <span class="material-icons">check_circle</span>
-                                    Mark Complete
+                                    {{ $t('myChoresPage.choreCard.markCompleteButton') }}
                                 </button>
                             </div>
                         </div>
@@ -149,7 +149,7 @@
             <div v-if="assignmentsByTimeline.later.length > 0" class="timeline-section later">
                 <div class="timeline-header">
                     <div class="timeline-dot later"></div>
-                    <h2 class="timeline-title">Later</h2>
+                    <h2 class="timeline-title">{{ $t('myChoresPage.timelineHeaders.later') }}</h2>
                     <span class="timeline-count">{{ assignmentsByTimeline.later.length }}</span>
                 </div>
                 <div class="timeline-items">
@@ -161,7 +161,7 @@
                                 <h3>{{ assignment.chore?.name }}</h3>
                                 <div class="assignment-tags">
                                     <span class="chore-type-tag" :class="assignment.chore?.type">
-                                        {{ assignment.chore?.type === 'personal' ? 'Personal' : 'Group' }}
+                                        {{ assignment.chore?.type === 'personal' ? $t('myChoresPage.choreCard.personal') : $t('myChoresPage.choreCard.group') }}
                                     </span>
                                     <span class="chore-frequency-tag" :class="assignment.chore?.frequency">
                                         {{ formatFrequency(assignment.chore?.frequency) }}
@@ -171,7 +171,7 @@
                             <div class="assignment-meta">
                                 <div class="assignment-due-date later">
                                     <span class="material-icons">schedule</span>
-                                    Due {{ formatDate(assignment.due_date) }}
+                                    {{ $t('myChoresPage.choreCard.duePrefix') }} {{ formatDate(assignment.due_date) }}
                                 </div>
                                 <div v-if="assignment.chore?.description" class="assignment-description">
                                     {{ assignment.chore.description }}
@@ -181,7 +181,7 @@
                                 <button class="btn btn-success btn-sm" @click="completeAssignment(assignment)"
                                     :disabled="isCompleting">
                                     <span class="material-icons">check_circle</span>
-                                    Mark Complete
+                                    {{ $t('myChoresPage.choreCard.markCompleteButton') }}
                                 </button>
                             </div>
                         </div>
@@ -193,7 +193,7 @@
             <div v-if="showCompleted && assignmentsByTimeline.completed.length > 0" class="timeline-section completed">
                 <div class="timeline-header">
                     <div class="timeline-dot completed"></div>
-                    <h2 class="timeline-title">Completed</h2>
+                    <h2 class="timeline-title">{{ $t('myChoresPage.timelineHeaders.completed') }}</h2>
                     <span class="timeline-count">{{ assignmentsByTimeline.completed.length }}</span>
                 </div>
                 <div class="timeline-items">
@@ -205,7 +205,7 @@
                                 <h3>{{ assignment.chore?.name }}</h3>
                                 <div class="assignment-tags">
                                     <span class="chore-type-tag" :class="assignment.chore?.type">
-                                        {{ assignment.chore?.type === 'personal' ? 'Personal' : 'Group' }}
+                                        {{ assignment.chore?.type === 'personal' ? $t('myChoresPage.choreCard.personal') : $t('myChoresPage.choreCard.group') }}
                                     </span>
                                     <span class="chore-frequency-tag" :class="assignment.chore?.frequency">
                                         {{ formatFrequency(assignment.chore?.frequency) }}
@@ -215,7 +215,7 @@
                             <div class="assignment-meta">
                                 <div class="assignment-due-date completed">
                                     <span class="material-icons">check_circle</span>
-                                    Completed {{ formatDate(assignment.completed_at || assignment.updated_at) }}
+                                    {{ $t('myChoresPage.choreCard.completedPrefix') }} {{ formatDate(assignment.completed_at || assignment.updated_at) }}
                                 </div>
                                 <div v-if="assignment.chore?.description" class="assignment-description">
                                     {{ assignment.chore.description }}
@@ -231,14 +231,14 @@
             <svg class="icon icon-lg" aria-hidden="true">
                 <use xlink:href="#icon-clipboard" />
             </svg>
-            <h3>No Assignments Yet!</h3>
-            <p v-if="showCompleted">You have no chore assignments (completed or pending).</p>
-            <p v-else>You have no pending chore assignments.</p>
+            <h3>{{ $t('myChoresPage.emptyState.title') }}</h3>
+            <p v-if="showCompleted">{{ $t('myChoresPage.emptyState.noAssignmentsAll') }}</p>
+            <p v-else>{{ $t('myChoresPage.emptyState.noAssignmentsPending') }}</p>
             <router-link to="/chores" class="btn btn-primary mt-2">
                 <svg class="icon" aria-hidden="true">
                     <use xlink:href="#icon-eye" />
                 </svg>
-                View All Chores
+                {{ $t('myChoresPage.emptyState.viewAllChoresButton') }}
             </router-link>
         </div>
     </main>
@@ -246,11 +246,13 @@
 
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { format } from 'date-fns'
 import { choreService } from '../services/choreService'
 import { useNotificationStore } from '../stores/notifications'
 import type { ChoreAssignment, ChoreFrequency } from '../types/chore'
 
+const { t } = useI18n()
 const notificationStore = useNotificationStore()
 
 // State
@@ -310,13 +312,14 @@ const assignmentsByTimeline = computed(() => {
     return timeline
 })
 
-const frequencyOptions = [
-    { label: 'One Time', value: 'one_time' as ChoreFrequency },
-    { label: 'Daily', value: 'daily' as ChoreFrequency },
-    { label: 'Weekly', value: 'weekly' as ChoreFrequency },
-    { label: 'Monthly', value: 'monthly' as ChoreFrequency },
-    { label: 'Custom', value: 'custom' as ChoreFrequency }
-]
+// frequencyOptions is not directly used for display labels anymore, but can be kept for logic if needed elsewhere.
+// const frequencyOptions = [
+//     { label: 'One Time', value: 'one_time' as ChoreFrequency },
+//     { label: 'Daily', value: 'daily' as ChoreFrequency },
+//     { label: 'Weekly', value: 'weekly' as ChoreFrequency },
+//     { label: 'Monthly', value: 'monthly' as ChoreFrequency },
+//     { label: 'Custom', value: 'custom' as ChoreFrequency }
+// ]
 
 // Methods
 const loadAssignments = async () => {
@@ -325,7 +328,7 @@ const loadAssignments = async () => {
     } catch (error) {
         console.error('Failed to load assignments:', error)
         notificationStore.addNotification({
-            message: 'Failed to load assignments',
+            message: t('myChoresPage.notifications.loadFailed'),
             type: 'error'
         })
     }
@@ -338,7 +341,7 @@ const completeAssignment = async (assignment: ChoreAssignment) => {
     try {
         await choreService.completeAssignment(assignment.id)
         notificationStore.addNotification({
-            message: `Marked "${assignment.chore?.name}" as complete!`,
+            message: t('myChoresPage.notifications.markedComplete', { choreName: assignment.chore?.name || '' }),
             type: 'success'
         })
         // Reload assignments to show updated state
@@ -346,7 +349,7 @@ const completeAssignment = async (assignment: ChoreAssignment) => {
     } catch (error) {
         console.error('Failed to complete assignment:', error)
         notificationStore.addNotification({
-            message: 'Failed to mark assignment as complete',
+            message: t('myChoresPage.notifications.markCompleteFailed'),
             type: 'error'
         })
     } finally {
@@ -355,23 +358,34 @@ const completeAssignment = async (assignment: ChoreAssignment) => {
 }
 
 const formatDate = (date: string | undefined) => {
-    if (!date) return 'Unknown'
+    if (!date) return t('myChoresPage.dates.unknownDate');
 
-    if (date.includes('T')) {
-        return format(new Date(date), 'MMM d, yyyy')
-    } else {
-        const parts = date.split('-')
-        if (parts.length === 3) {
-            return format(new Date(Number(parts[0]), Number(parts[1]) - 1, Number(parts[2])), 'MMM d, yyyy')
+    // Attempt to parse and format; date-fns handles various ISO and other formats.
+    try {
+        const parsedDate = new Date(date);
+        // Check if parsedDate is valid
+        if (isNaN(parsedDate.getTime())) {
+            // Handle cases like "YYYY-MM-DD" which might be parsed as UTC midnight
+            // and then potentially displayed incorrectly depending on timezone.
+            // If the input is just a date string without time, ensure it's treated as local.
+            if (/^\d{4}-\d{2}-\d{2}$/.test(date)) {
+                 const [year, month, day] = date.split('-').map(Number);
+                 return format(new Date(year, month - 1, day), 'MMM d, yyyy');
+            }
+            return t('myChoresPage.dates.invalidDate');
         }
+        return format(parsedDate, 'MMM d, yyyy');
+    } catch (e) {
+        // Catch any error during parsing (though Date constructor is quite forgiving)
+        return t('myChoresPage.dates.invalidDate');
     }
-    return 'Invalid Date'
 }
 
 const formatFrequency = (frequency: ChoreFrequency | undefined) => {
-    if (!frequency) return 'Unknown'
-    const option = frequencyOptions.find(opt => opt.value === frequency)
-    return option ? option.label : frequency
+    if (!frequency) return t('myChoresPage.frequencies.unknown');
+    // Assuming keys like myChoresPage.frequencies.one_time, myChoresPage.frequencies.daily
+    // The ChoreFrequency enum values ('one_time', 'daily', etc.) match the last part of the key.
+    return t(`myChoresPage.frequencies.${frequency}`);
 }
 
 // Lifecycle
diff --git a/fe/src/pages/PersonalChoresPage.vue b/fe/src/pages/PersonalChoresPage.vue
index cf9c16f..75c405c 100644
--- a/fe/src/pages/PersonalChoresPage.vue
+++ b/fe/src/pages/PersonalChoresPage.vue
@@ -1,10 +1,10 @@
 <template>
   <main class="container page-padding">
     <div class="row q-mb-md items-center justify-between">
-      <h1 class="mb-3">Personal Chores</h1>
+      <h1 class="mb-3">{{ $t('personalChoresPage.title') }}</h1>
       <button class="btn btn-primary" @click="openCreateChoreModal">
         <span class="material-icons">add</span>
-        New Chore
+        {{ $t('personalChoresPage.newChoreButton') }}
       </button>
     </div>
 
@@ -22,7 +22,7 @@
         <div class="neo-card-body">
           <div class="neo-chore-info">
             <div class="neo-chore-due">
-              Due: {{ formatDate(chore.next_due_date) }}
+              {{ $t('personalChoresPage.dates.duePrefix') }}: {{ formatDate(chore.next_due_date) }}
             </div>
             <div v-if="chore.description" class="neo-chore-description">
               {{ chore.description }}
@@ -31,11 +31,11 @@
           <div class="neo-card-actions">
             <button class="btn btn-primary btn-sm" @click="openEditChoreModal(chore)">
               <span class="material-icons">edit</span>
-              Edit
+              {{ $t('personalChoresPage.editButton') }}
             </button>
             <button class="btn btn-danger btn-sm" @click="confirmDeleteChore(chore)">
               <span class="material-icons">delete</span>
-              Delete
+              {{ $t('personalChoresPage.deleteButton') }}
             </button>
           </div>
         </div>
@@ -46,7 +46,7 @@
     <div v-if="showChoreModal" class="neo-modal">
       <div class="neo-modal-content">
         <div class="neo-modal-header">
-          <h3>{{ isEditing ? 'Edit Chore' : 'New Chore' }}</h3>
+          <h3>{{ isEditing ? $t('personalChoresPage.modals.editChoreTitle') : $t('personalChoresPage.modals.newChoreTitle') }}</h3>
           <button class="btn btn-neutral btn-icon-only" @click="showChoreModal = false">
             <span class="material-icons">close</span>
           </button>
@@ -54,7 +54,7 @@
         <div class="neo-modal-body">
           <form @submit.prevent="onSubmit" class="neo-form">
             <div class="neo-form-group">
-              <label for="name">Name</label>
+              <label for="name">{{ $t('personalChoresPage.form.nameLabel') }}</label>
               <input
                 id="name"
                 v-model="choreForm.name"
@@ -65,7 +65,7 @@
             </div>
 
             <div class="neo-form-group">
-              <label for="description">Description</label>
+              <label for="description">{{ $t('personalChoresPage.form.descriptionLabel') }}</label>
               <textarea
                 id="description"
                 v-model="choreForm.description"
@@ -75,7 +75,7 @@
             </div>
 
             <div class="neo-form-group">
-              <label for="frequency">Frequency</label>
+              <label for="frequency">{{ $t('personalChoresPage.form.frequencyLabel') }}</label>
               <select
                 id="frequency"
                 v-model="choreForm.frequency"
@@ -89,7 +89,7 @@
             </div>
 
             <div v-if="choreForm.frequency === 'custom'" class="neo-form-group">
-              <label for="interval">Interval (days)</label>
+              <label for="interval">{{ $t('personalChoresPage.form.intervalLabel') }}</label>
               <input
                 id="interval"
                 v-model.number="choreForm.custom_interval_days"
@@ -101,7 +101,7 @@
             </div>
 
             <div class="neo-form-group">
-              <label for="dueDate">Next Due Date</label>
+              <label for="dueDate">{{ $t('personalChoresPage.form.dueDateLabel') }}</label>
               <input
                 id="dueDate"
                 v-model="choreForm.next_due_date"
@@ -113,8 +113,8 @@
           </form>
         </div>
         <div class="neo-modal-footer">
-          <button class="btn btn-neutral" @click="showChoreModal = false">Cancel</button>
-          <button class="btn btn-primary" @click="onSubmit">Save</button>
+          <button class="btn btn-neutral" @click="showChoreModal = false">{{ $t('personalChoresPage.cancelButton') }}</button>
+          <button class="btn btn-primary" @click="onSubmit">{{ $t('personalChoresPage.saveButton') }}</button>
         </div>
       </div>
     </div>
@@ -123,17 +123,17 @@
     <div v-if="showDeleteDialog" class="neo-modal">
       <div class="neo-modal-content">
         <div class="neo-modal-header">
-          <h3>Delete Chore</h3>
+          <h3>{{ $t('personalChoresPage.modals.deleteChoreTitle') }}</h3>
           <button class="btn btn-neutral btn-icon-only" @click="showDeleteDialog = false">
             <span class="material-icons">close</span>
           </button>
         </div>
         <div class="neo-modal-body">
-          <p>Are you sure you want to delete this chore?</p>
+          <p>{{ $t('personalChoresPage.deleteDialog.confirmationText') }}</p>
         </div>
         <div class="neo-modal-footer">
-          <button class="btn btn-neutral" @click="showDeleteDialog = false">Cancel</button>
-          <button class="btn btn-danger" @click="deleteChore">Delete</button>
+          <button class="btn btn-neutral" @click="showDeleteDialog = false">{{ $t('personalChoresPage.cancelButton') }}</button>
+          <button class="btn btn-danger" @click="deleteChore">{{ $t('personalChoresPage.deleteButton') }}</button>
         </div>
       </div>
     </div>
@@ -141,12 +141,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { format } from 'date-fns'
 import { choreService } from '../services/choreService'
 import { useNotificationStore } from '../stores/notifications'
 import type { Chore, ChoreCreate, ChoreUpdate, ChoreFrequency } from '../types/chore'
 
+const { t } = useI18n()
 const notificationStore = useNotificationStore()
 
 // State
@@ -165,13 +167,13 @@ const choreForm = ref<ChoreCreate>({
   type: 'personal'
 })
 
-const frequencyOptions = [
-  { label: 'One Time', value: 'one_time' as ChoreFrequency },
-  { label: 'Daily', value: 'daily' as ChoreFrequency },
-  { label: 'Weekly', value: 'weekly' as ChoreFrequency },
-  { label: 'Monthly', value: 'monthly' as ChoreFrequency },
-  { label: 'Custom', value: 'custom' as ChoreFrequency }
-]
+const frequencyOptions = computed(() => [
+  { label: t('personalChoresPage.frequencies.one_time'), value: 'one_time' as ChoreFrequency },
+  { label: t('personalChoresPage.frequencies.daily'), value: 'daily' as ChoreFrequency },
+  { label: t('personalChoresPage.frequencies.weekly'), value: 'weekly' as ChoreFrequency },
+  { label: t('personalChoresPage.frequencies.monthly'), value: 'monthly' as ChoreFrequency },
+  { label: t('personalChoresPage.frequencies.custom'), value: 'custom' as ChoreFrequency }
+])
 
 // Methods
 const loadChores = async () => {
@@ -180,7 +182,7 @@ const loadChores = async () => {
   } catch (error) {
     console.error('Failed to load personal chores:', error)
     notificationStore.addNotification({
-      message: 'Failed to load personal chores',
+      message: t('personalChoresPage.notifications.loadFailed'),
       type: 'error'
     })
   }
@@ -216,13 +218,13 @@ const onSubmit = async () => {
     if (isEditing.value && selectedChore.value) {
       await choreService.updatePersonalChore(selectedChore.value.id, payload as ChoreUpdate)
       notificationStore.addNotification({
-        message: 'Personal chore updated successfully',
+        message: t('personalChoresPage.notifications.updateSuccess'),
         type: 'success'
       })
     } else {
       await choreService.createPersonalChore(payload as ChoreCreate)
       notificationStore.addNotification({
-        message: 'Personal chore created successfully',
+        message: t('personalChoresPage.notifications.createSuccess'),
         type: 'success'
       })
     }
@@ -231,7 +233,7 @@ const onSubmit = async () => {
   } catch (error) {
     console.error('Failed to save personal chore:', error)
     notificationStore.addNotification({
-      message: `Failed to ${isEditing.value ? 'update' : 'create'} personal chore`,
+      message: t('personalChoresPage.notifications.saveFailed'), // Generic message
       type: 'error'
     })
   }
@@ -249,34 +251,43 @@ const deleteChore = async () => {
     await choreService.deletePersonalChore(selectedChore.value.id)
     showDeleteDialog.value = false
     notificationStore.addNotification({
-      message: 'Personal chore deleted successfully',
+      message: t('personalChoresPage.notifications.deleteSuccess'),
       type: 'success'
     })
     loadChores()
   } catch (error) {
     console.error('Failed to delete personal chore:', error)
     notificationStore.addNotification({
-      message: 'Failed to delete personal chore',
+      message: t('personalChoresPage.notifications.deleteFailed'),
       type: 'error'
     })
   }
 }
 
-const formatDate = (date: string) => {
-  if (date && date.includes('T')) {
-    return format(new Date(date), 'MMM d, yyyy');
-  } else if (date) {
-    const parts = date.split('-');
-    if (parts.length === 3) {
-        return format(new Date(Number(parts[0]), Number(parts[1]) - 1, Number(parts[2])), 'MMM d, yyyy');
+const formatDate = (date: string | undefined) => {
+    if (!date) return ''; // Or perhaps a specific 'Unknown Date' string if desired: t('personalChoresPage.dates.unknownDate')
+    try {
+        // Handles both 'YYYY-MM-DD' and full ISO with 'T'
+        const parsedDate = new Date(date);
+        if (isNaN(parsedDate.getTime())) {
+             // Explicitly handle 'YYYY-MM-DD' if new Date() struggles with it directly as local time
+            if (/^\d{4}-\d{2}-\d{2}$/.test(date)) {
+                 const [year, month, day] = date.split('-').map(Number);
+                 return format(new Date(year, month - 1, day), 'MMM d, yyyy');
+            }
+            return t('personalChoresPage.dates.invalidDate');
+        }
+        return format(parsedDate, 'MMM d, yyyy');
+    } catch (e) {
+        return t('personalChoresPage.dates.invalidDate');
     }
-  }
-  return 'Invalid Date';
 }
 
-const formatFrequency = (frequency: ChoreFrequency) => {
-  const option = frequencyOptions.find(opt => opt.value === frequency)
-  return option ? option.label : frequency
+const formatFrequency = (frequency: ChoreFrequency | undefined) => {
+  if (!frequency) return t('personalChoresPage.frequencies.unknown');
+  // Use the value from frequencyOptions which is now translated
+  const option = frequencyOptions.value.find(opt => opt.value === frequency);
+  return option ? option.label : t(`personalChoresPage.frequencies.${frequency}`); // Fallback if somehow not in options
 }
 
 // Lifecycle
diff --git a/fe/src/pages/SignupPage.vue b/fe/src/pages/SignupPage.vue
index 0094c5c..e8a6e83 100644
--- a/fe/src/pages/SignupPage.vue
+++ b/fe/src/pages/SignupPage.vue
@@ -2,29 +2,29 @@
   <main class="flex items-center justify-center page-container">
     <div class="card signup-card">
       <div class="card-header">
-        <h3>Sign Up</h3>
+        <h3>{{ $t('signupPage.header') }}</h3>
       </div>
       <div class="card-body">
         <form @submit.prevent="onSubmit" class="form-layout">
           <div class="form-group mb-2">
-            <label for="name" class="form-label">Full Name</label>
+            <label for="name" class="form-label">{{ $t('signupPage.fullNameLabel') }}</label>
             <input type="text" id="name" v-model="name" class="form-input" required autocomplete="name" />
             <p v-if="formErrors.name" class="form-error-text">{{ formErrors.name }}</p>
           </div>
 
           <div class="form-group mb-2">
-            <label for="email" class="form-label">Email</label>
+            <label for="email" class="form-label">{{ $t('signupPage.emailLabel') }}</label>
             <input type="email" id="email" v-model="email" class="form-input" required autocomplete="email" />
             <p v-if="formErrors.email" class="form-error-text">{{ formErrors.email }}</p>
           </div>
 
           <div class="form-group mb-2">
-            <label for="password" class="form-label">Password</label>
+            <label for="password" class="form-label">{{ $t('signupPage.passwordLabel') }}</label>
             <div class="input-with-icon-append">
               <input :type="isPwdVisible ? 'text' : 'password'" id="password" v-model="password" class="form-input"
                 required autocomplete="new-password" />
               <button type="button" @click="isPwdVisible = !isPwdVisible" class="icon-append-btn"
-                aria-label="Toggle password visibility">
+                :aria-label="$t('signupPage.togglePasswordVisibility')">
                 <svg class="icon icon-sm">
                   <use :xlink:href="isPwdVisible ? '#icon-settings' : '#icon-settings'"></use>
                 </svg> <!-- Placeholder for visibility icons -->
@@ -34,7 +34,7 @@
           </div>
 
           <div class="form-group mb-3">
-            <label for="confirmPassword" class="form-label">Confirm Password</label>
+            <label for="confirmPassword" class="form-label">{{ $t('signupPage.confirmPasswordLabel') }}</label>
             <input :type="isPwdVisible ? 'text' : 'password'" id="confirmPassword" v-model="confirmPassword"
               class="form-input" required autocomplete="new-password" />
             <p v-if="formErrors.confirmPassword" class="form-error-text">{{ formErrors.confirmPassword }}</p>
@@ -44,11 +44,11 @@
 
           <button type="submit" class="btn btn-primary w-full mt-2" :disabled="loading">
             <span v-if="loading" class="spinner-dots-sm" role="status"><span /><span /><span /></span>
-            Sign Up
+            {{ $t('signupPage.submitButton') }}
           </button>
 
           <div class="text-center mt-2">
-            <router-link to="auth/login" class="link-styled">Already have an account? Login</router-link>
+            <router-link to="auth/login" class="link-styled">{{ $t('signupPage.loginLink') }}</router-link>
           </div>
         </form>
       </div>
@@ -59,9 +59,11 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 import { useAuthStore } from '@/stores/auth'; // Assuming path is correct
 import { useNotificationStore } from '@/stores/notifications';
 
+const { t } = useI18n();
 const router = useRouter();
 const authStore = useAuthStore();
 const notificationStore = useNotificationStore();
@@ -82,22 +84,22 @@ const isValidEmail = (val: string): boolean => {
 const validateForm = (): boolean => {
   formErrors.value = {};
   if (!name.value.trim()) {
-    formErrors.value.name = 'Name is required';
+    formErrors.value.name = t('signupPage.validation.nameRequired');
   }
   if (!email.value.trim()) {
-    formErrors.value.email = 'Email is required';
+    formErrors.value.email = t('signupPage.validation.emailRequired');
   } else if (!isValidEmail(email.value)) {
-    formErrors.value.email = 'Invalid email format';
+    formErrors.value.email = t('signupPage.validation.emailInvalid');
   }
   if (!password.value) {
-    formErrors.value.password = 'Password is required';
+    formErrors.value.password = t('signupPage.validation.passwordRequired');
   } else if (password.value.length < 8) {
-    formErrors.value.password = 'Password must be at least 8 characters';
+    formErrors.value.password = t('signupPage.validation.passwordLength');
   }
   if (!confirmPassword.value) {
-    formErrors.value.confirmPassword = 'Please confirm your password';
+    formErrors.value.confirmPassword = t('signupPage.validation.confirmPasswordRequired');
   } else if (password.value !== confirmPassword.value) {
-    formErrors.value.confirmPassword = 'Passwords do not match';
+    formErrors.value.confirmPassword = t('signupPage.validation.passwordsNoMatch');
   }
   return Object.keys(formErrors.value).length === 0;
 };
@@ -114,13 +116,17 @@ const onSubmit = async () => {
       email: email.value,
       password: password.value,
     });
-    notificationStore.addNotification({ message: 'Account created successfully. Please login.', type: 'success' });
+    notificationStore.addNotification({ message: t('signupPage.notifications.signupSuccess'), type: 'success' });
     router.push('auth/login');
   } catch (error: unknown) {
-    const message = error instanceof Error ? error.message : 'Signup failed. Please try again.';
-    formErrors.value.general = message;
-    console.error(message, error);
-    notificationStore.addNotification({ message, type: 'error' });
+    // Prefer API error message if available, otherwise use generic translated message for the form
+    const errorMessageForForm = error instanceof Error ? error.message : t('signupPage.notifications.signupFailed');
+    formErrors.value.general = errorMessageForForm;
+
+    // For the notification pop-up, always use the generic translated message if API message is not specific enough or not an Error
+    const notificationMessage = error instanceof Error && error.message ? error.message : t('signupPage.notifications.signupFailed');
+    console.error("Signup error:", error); // Keep detailed log for developers
+    notificationStore.addNotification({ message: notificationMessage, type: 'error' });
   } finally {
     loading.value = false;
   }