diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5a1ce2f..2e876ea 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -4,8 +4,10 @@ import { motion } from "framer-motion";
 import { Calendar, Package, Sparkles } from "lucide-react";
 import { AuthResponse, clearToken, getAuthConfig, getMe, storeToken } from "./api/client";
 import AccountMenu from "./components/AccountMenu";
+import LanguageSwitcher from "./components/LanguageSwitcher";
 import { AboutModal, ChangePasswordModal, DeleteAccountModal, FeedbackModal, InviteHouseholdModal } from "./components/modals";
 import { useRecommendationsQuery } from "./hooks/queries";
+import { useI18n } from "./i18n";
 import { topRecommendation } from "./lib/recommendation";
 import DashboardPage from "./pages/Dashboard";
 import MealPlannerPage from "./pages/MealPlanner";
@@ -14,6 +16,7 @@ import { AuthUser } from "./types";
 
 export default function App() {
   const queryClient = useQueryClient();
+  const { t } = useI18n();
   const [authUser, setAuthUser] = useState<AuthUser | null>(null);
   const [authChecked, setAuthChecked] = useState(false);
   const [page, setPage] = useState<"home" | "planner">("home");
@@ -99,7 +102,7 @@ export default function App() {
   if (!authChecked) {
     return (
       <div className="flex min-h-screen items-center justify-center text-slate-500 dark:text-slate-400">
-        Loading...
+        {t("common.loading")}
       </div>
     );
   }
@@ -140,36 +143,39 @@ export default function App() {
           <div className="flex flex-wrap items-center justify-between gap-4">
             <div>
               <p className="text-sm uppercase tracking-[0.2em] text-brand-600 dark:text-brand-100">ONS Inventory</p>
-              <h1 className="mt-2 text-3xl font-semibold text-slate-900 dark:text-white">Welcome, {authUser.firstName}!</h1>
+              <h1 className="mt-2 text-3xl font-semibold text-slate-900 dark:text-white">{t("header.welcome", { name: authUser.firstName })}</h1>
               <p className="mt-2 text-slate-600 dark:text-slate-300">
-                Track pantry, fridge, and freezer stock and get recipe ideas before ingredients expire.
+                {t("header.tagline")}
               </p>
               {authUser.householdName && (
                 <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">{authUser.householdName}</p>
               )}
             </div>
             <div className="flex flex-col items-end gap-3">
-              <AccountMenu
-                dark={dark}
-                onToggleDark={() => setDark((d) => !d)}
-                onInvite={() => setShowInviteHousehold(true)}
-                onChangePassword={() => setShowChangePassword(true)}
-                onFeedback={() => setShowFeedback(true)}
-                onAbout={() => setShowAbout(true)}
-                onLogout={handleLogout}
-                onDeleteAccount={() => setShowDeleteAccount(true)}
-              />
+              <div className="flex items-center gap-2">
+                <LanguageSwitcher />
+                <AccountMenu
+                  dark={dark}
+                  onToggleDark={() => setDark((d) => !d)}
+                  onInvite={() => setShowInviteHousehold(true)}
+                  onChangePassword={() => setShowChangePassword(true)}
+                  onFeedback={() => setShowFeedback(true)}
+                  onAbout={() => setShowAbout(true)}
+                  onLogout={handleLogout}
+                  onDeleteAccount={() => setShowDeleteAccount(true)}
+                />
+              </div>
               <div className="rounded-xl bg-brand-100 dark:bg-brand-600/20 px-4 py-3 text-sm text-brand-800 dark:text-brand-50">
                 {topMatch ? (
                   <>
-                    <div className="font-medium">Top suggestion</div>
+                    <div className="font-medium">{t("header.topSuggestion")}</div>
                     <div className="mt-1 flex items-center gap-2">
                       <Sparkles className="h-4 w-4" />
                       {topMatch.recipe.name} ({topMatch.matchPercentage}%)
                     </div>
                   </>
                 ) : (
-                  <div className="font-medium">Add inventory to unlock recommendations</div>
+                  <div className="font-medium">{t("header.noSuggestion")}</div>
                 )}
               </div>
             </div>
@@ -185,7 +191,7 @@ export default function App() {
             }`}
           >
             <Package className="h-4 w-4" />
-            Inventory
+            {t("nav.inventory")}
           </button>
           <button
             type="button"
@@ -195,7 +201,7 @@ export default function App() {
             }`}
           >
             <Calendar className="h-4 w-4" />
-            Meal Planner
+            {t("nav.mealPlanner")}
           </button>
         </nav>
 
diff --git a/frontend/src/components/AccountMenu.tsx b/frontend/src/components/AccountMenu.tsx
index da26ce1..33f5209 100644
--- a/frontend/src/components/AccountMenu.tsx
+++ b/frontend/src/components/AccountMenu.tsx
@@ -1,10 +1,11 @@
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import { CircleUser, Info, KeyRound, LogOut, Menu, MessageSquare, Moon, Sun, Trash2, UserPlus, X } from "lucide-react";
+import { useI18n } from "../i18n";
 
-const itemClass =
+export const itemClass =
   "flex w-full items-center gap-2 px-4 py-2.5 text-left text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800";
 
-function Dropdown({
+export function Dropdown({
   label,
   icon,
   openIcon,
@@ -41,7 +42,7 @@ function Dropdown({
       <button
         type="button"
         onClick={() => setOpen((v) => !v)}
-        aria-label={open ? `Close ${label}` : `Open ${label}`}
+        aria-label={label}
         aria-expanded={open}
         className="inline-flex items-center rounded-lg border border-slate-300 dark:border-slate-700 p-2 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800"
       >
@@ -75,6 +76,7 @@ export default function AccountMenu({
   onLogout: () => void;
   onDeleteAccount: () => void;
 }) {
+  const { t } = useI18n();
   const select = (close: () => void, action: () => void) => () => {
     close();
     action();
@@ -82,12 +84,12 @@ export default function AccountMenu({
 
   return (
     <div className="flex items-center gap-2">
-      <Dropdown label="profile menu" icon={<CircleUser className="h-5 w-5" />}>
+      <Dropdown label={t("menu.profile")} icon={<CircleUser className="h-5 w-5" />}>
         {(close) => (
           <>
             <button type="button" onClick={select(close, onChangePassword)} className={itemClass}>
               <KeyRound className="h-3.5 w-3.5" />
-              Change password
+              {t("menu.changePassword")}
             </button>
             <div className="border-t border-slate-200 dark:border-slate-700" />
             <button
@@ -96,33 +98,33 @@ export default function AccountMenu({
               className="flex w-full items-center gap-2 px-4 py-2.5 text-left text-sm text-rose-600 dark:text-rose-300 hover:bg-rose-50 dark:hover:bg-rose-950/30"
             >
               <Trash2 className="h-3.5 w-3.5" />
-              Delete account
+              {t("menu.deleteAccount")}
             </button>
           </>
         )}
       </Dropdown>
-      <Dropdown label="menu" icon={<Menu className="h-5 w-5" />} openIcon={<X className="h-5 w-5" />}>
+      <Dropdown label={t("menu.menu")} icon={<Menu className="h-5 w-5" />} openIcon={<X className="h-5 w-5" />}>
         {(close) => (
           <>
             <button type="button" onClick={select(close, onToggleDark)} className={itemClass}>
               {dark ? <Sun className="h-3.5 w-3.5" /> : <Moon className="h-3.5 w-3.5" />}
-              {dark ? "Light mode" : "Dark mode"}
+              {dark ? t("menu.lightMode") : t("menu.darkMode")}
             </button>
             <button type="button" onClick={select(close, onInvite)} className={itemClass}>
               <UserPlus className="h-3.5 w-3.5" />
-              Invite to household
+              {t("menu.invite")}
             </button>
             <button type="button" onClick={select(close, onFeedback)} className={itemClass}>
               <MessageSquare className="h-3.5 w-3.5" />
-              Send feedback
+              {t("menu.feedback")}
             </button>
             <button type="button" onClick={select(close, onAbout)} className={itemClass}>
               <Info className="h-3.5 w-3.5" />
-              About
+              {t("menu.about")}
             </button>
             <button type="button" onClick={select(close, onLogout)} className={itemClass}>
               <LogOut className="h-3.5 w-3.5" />
-              Logout
+              {t("menu.logout")}
             </button>
           </>
         )}
diff --git a/frontend/src/components/InventorySection.tsx b/frontend/src/components/InventorySection.tsx
index 90e3fa9..99363aa 100644
--- a/frontend/src/components/InventorySection.tsx
+++ b/frontend/src/components/InventorySection.tsx
@@ -3,6 +3,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Pencil, Refrigerator, Trash2, Undo2, X } from "lucide-react";
 import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts";
 import { addInventoryItem, deleteInventoryItem, updateInventoryItem } from "../api/client";
+import { useI18n } from "../i18n";
 import { isExpiring } from "../lib/inventory";
 import { inputClass } from "../lib/ui";
 import { InventoryItem, Location } from "../types";
@@ -43,6 +44,7 @@ export default function InventorySection({
   expiryFilter: "expiring" | "expired" | null;
   onClearExpiryFilter: () => void;
 }) {
+  const { t } = useI18n();
   const queryClient = useQueryClient();
   const [formState, setFormState] = useState<ItemFormState>(initialForm);
   const [editingItemId, setEditingItemId] = useState<number | null>(null);
@@ -162,7 +164,7 @@ export default function InventorySection({
       <article className="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/80 p-6">
         <div className="flex flex-wrap items-center justify-between gap-3">
           <div className="flex items-center gap-3">
-            <h2 className="text-xl font-semibold">Inventory by location</h2>
+            <h2 className="text-xl font-semibold">{t("inventory.title")}</h2>
             {expiryFilter && !searchQuery && (
               <button
                 type="button"
@@ -173,14 +175,14 @@ export default function InventorySection({
                     : "bg-rose-500/20 text-rose-600 dark:text-rose-200 hover:bg-rose-500/30"
                 }`}
               >
-                {expiryFilter === "expiring" ? "Expiring soon" : "Already expired"}
+                {expiryFilter === "expiring" ? t("metrics.expiringSoon") : t("metrics.expired")}
                 <X className="h-3 w-3" />
               </button>
             )}
           </div>
           {!searchQuery && (
             <div className="flex flex-wrap gap-2">
-              {["All", ...locations.map((location) => location.name)].map((name) => (
+              {[{ name: "All", label: t("inventory.all") }, ...locations.map((location) => ({ name: location.name, label: location.name }))].map(({ name, label }) => (
                 <button
                   key={name}
                   type="button"
@@ -191,7 +193,7 @@ export default function InventorySection({
                       : "bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700"
                   }`}
                 >
-                  {name}
+                  {label}
                 </button>
               ))}
             </div>
@@ -200,7 +202,7 @@ export default function InventorySection({
 
         <div className="mt-4 space-y-3">
           {filteredInventory.length === 0 ? (
-            <p className="rounded-lg bg-slate-50 dark:bg-slate-800/70 p-4 text-slate-600 dark:text-slate-300">No items in this location yet.</p>
+            <p className="rounded-lg bg-slate-50 dark:bg-slate-800/70 p-4 text-slate-600 dark:text-slate-300">{t("inventory.empty")}</p>
           ) : (
             paginatedInventory.map((item) => (
               <div key={item.id} className="rounded-xl bg-slate-50 dark:bg-slate-800/70 p-4">
@@ -220,7 +222,7 @@ export default function InventorySection({
                           : "bg-emerald-500/20 text-emerald-700 dark:text-emerald-200"
                     }`}
                   >
-                    {item.expired ? "Expired" : isExpiring(item) ? "Expiring" : "Fresh"}
+                    {item.expired ? t("inventory.status.expired") : isExpiring(item) ? t("inventory.status.expiring") : t("inventory.status.fresh")}
                   </span>
                 </div>
                 <div className="mt-3 flex gap-2">
@@ -230,7 +232,7 @@ export default function InventorySection({
                     className="inline-flex items-center gap-1 rounded-md bg-slate-200 dark:bg-slate-700 px-2 py-1 text-xs text-slate-700 dark:text-slate-200 hover:bg-slate-300 dark:hover:bg-slate-600"
                   >
                     <Pencil className="h-3 w-3" />
-                    Edit
+                    {t("common.edit")}
                   </button>
                   <button
                     type="button"
@@ -238,7 +240,7 @@ export default function InventorySection({
                     className="inline-flex items-center gap-1 rounded-md bg-rose-500/20 px-2 py-1 text-xs text-rose-600 dark:text-rose-200 hover:bg-rose-500/30"
                   >
                     <Trash2 className="h-3 w-3" />
-                    Delete
+                    {t("common.delete")}
                   </button>
                 </div>
               </div>
@@ -249,7 +251,7 @@ export default function InventorySection({
         {filteredInventory.length > 0 && (
           <div className="mt-4 flex flex-wrap items-center justify-between gap-3 border-t border-slate-200 dark:border-slate-700 pt-4 text-sm text-slate-600 dark:text-slate-300">
             <div className="flex items-center gap-2">
-              <span>Items per page</span>
+              <span>{t("pagination.itemsPerPage")}</span>
               <select
                 value={pageSize}
                 onChange={(event) => setPageSize(Number(event.target.value))}
@@ -270,10 +272,10 @@ export default function InventorySection({
                 disabled={currentPage === 1}
                 className="rounded-md border border-slate-300 dark:border-slate-600 px-2 py-1 text-slate-700 dark:text-slate-200 disabled:opacity-40"
               >
-                Previous
+                {t("pagination.previous")}
               </button>
               <span>
-                Page {currentPage} / {totalPages}
+                {t("pagination.page", { current: currentPage, total: totalPages })}
               </span>
               <button
                 type="button"
@@ -281,7 +283,7 @@ export default function InventorySection({
                 disabled={currentPage === totalPages}
                 className="rounded-md border border-slate-300 dark:border-slate-600 px-2 py-1 text-slate-700 dark:text-slate-200 disabled:opacity-40"
               >
-                Next
+                {t("pagination.next")}
               </button>
             </div>
           </div>
@@ -292,7 +294,7 @@ export default function InventorySection({
         <div className="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/80 p-6">
           <h2 className="flex items-center gap-2 text-xl font-semibold">
             <Refrigerator className="h-5 w-5" />
-            {editingItemId !== null ? "Edit inventory item" : "Add inventory item"}
+            {editingItemId !== null ? t("inventory.editItem") : t("inventory.addItem")}
           </h2>
           <form className="mt-4 grid gap-3" onSubmit={handleSubmit}>
             <input
@@ -300,7 +302,7 @@ export default function InventorySection({
               value={formState.name}
               onChange={(event) => setFormState((prev) => ({ ...prev, name: event.target.value }))}
               className={inputClass}
-              placeholder="Item name"
+              placeholder={t("inventory.form.name")}
             />
             <div className="grid grid-cols-2 gap-3">
               <input
@@ -308,7 +310,7 @@ export default function InventorySection({
                 value={formState.category}
                 onChange={(event) => setFormState((prev) => ({ ...prev, category: event.target.value }))}
                 className={inputClass}
-                placeholder="Category"
+                placeholder={t("inventory.form.category")}
               />
               <select
                 value={formState.location}
@@ -333,14 +335,14 @@ export default function InventorySection({
                   setFormState((prev) => ({ ...prev, quantity: Number(event.target.value) }))
                 }
                 className={inputClass}
-                placeholder="Quantity"
+                placeholder={t("inventory.form.quantity")}
               />
               <input
                 required
                 value={formState.unit}
                 onChange={(event) => setFormState((prev) => ({ ...prev, unit: event.target.value }))}
                 className={inputClass}
-                placeholder="Unit"
+                placeholder={t("inventory.form.unit")}
               />
             </div>
             <input
@@ -353,7 +355,7 @@ export default function InventorySection({
               value={formState.notes}
               onChange={(event) => setFormState((prev) => ({ ...prev, notes: event.target.value }))}
               className={inputClass}
-              placeholder="Notes (optional)"
+              placeholder={t("inventory.form.notes")}
             />
             <button
               type="submit"
@@ -362,11 +364,11 @@ export default function InventorySection({
             >
               {editingItemId !== null
                 ? updateItemMutation.isPending
-                  ? "Saving..."
-                  : "Save changes"
+                  ? t("common.saving")
+                  : t("common.saveChanges")
                 : addItemMutation.isPending
-                  ? "Adding..."
-                  : "Add item"}
+                  ? t("common.adding")
+                  : t("inventory.form.add")}
             </button>
             {editingItemId !== null && (
               <button
@@ -375,26 +377,26 @@ export default function InventorySection({
                 className="inline-flex items-center justify-center gap-2 rounded-lg border border-slate-300 dark:border-slate-600 px-4 py-2 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800"
               >
                 <Undo2 className="h-4 w-4" />
-                Cancel edit
+                {t("common.cancelEdit")}
               </button>
             )}
             {addItemMutation.isError && (
-              <p className="text-sm text-rose-600 dark:text-rose-300">Could not add item. Check backend availability.</p>
+              <p className="text-sm text-rose-600 dark:text-rose-300">{t("inventory.error.add")}</p>
             )}
             {updateItemMutation.isError && (
-              <p className="text-sm text-rose-600 dark:text-rose-300">Could not update item. Try again.</p>
+              <p className="text-sm text-rose-600 dark:text-rose-300">{t("inventory.error.update")}</p>
             )}
             {deleteItemMutation.isError && (
-              <p className="text-sm text-rose-600 dark:text-rose-300">Could not delete item. Try again.</p>
+              <p className="text-sm text-rose-600 dark:text-rose-300">{t("inventory.error.delete")}</p>
             )}
           </form>
         </div>
 
         <div className="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/80 p-6">
-          <h2 className="text-xl font-semibold">Stock distribution</h2>
+          <h2 className="text-xl font-semibold">{t("inventory.chart.title")}</h2>
           <div className="mt-4 h-64">
             {locationDistribution.length === 0 ? (
-              <p className="text-slate-600 dark:text-slate-300">Add a few items to see the chart.</p>
+              <p className="text-slate-600 dark:text-slate-300">{t("inventory.chart.empty")}</p>
             ) : (
               <ResponsiveContainer width="100%" height="100%">
                 <PieChart>
diff --git a/frontend/src/components/LanguageSwitcher.tsx b/frontend/src/components/LanguageSwitcher.tsx
new file mode 100644
index 0000000..7ed97f0
--- /dev/null
+++ b/frontend/src/components/LanguageSwitcher.tsx
@@ -0,0 +1,32 @@
+import { Check } from "lucide-react";
+import { languages, useI18n } from "../i18n";
+import { Dropdown, itemClass } from "./AccountMenu";
+
+export default function LanguageSwitcher() {
+  const { lang, setLang, t } = useI18n();
+  const current = languages.find((language) => language.code === lang) ?? languages[0];
+
+  return (
+    <Dropdown label={t("menu.language")} icon={<span className="text-lg leading-none" aria-hidden>{current.flag}</span>}>
+      {(close) => (
+        <>
+          {languages.map((language) => (
+            <button
+              key={language.code}
+              type="button"
+              onClick={() => {
+                setLang(language.code);
+                close();
+              }}
+              className={itemClass}
+            >
+              <span className="text-base leading-none" aria-hidden>{language.flag}</span>
+              <span className="flex-1">{language.label}</span>
+              {language.code === lang && <Check className="h-3.5 w-3.5 text-brand-600 dark:text-brand-300" />}
+            </button>
+          ))}
+        </>
+      )}
+    </Dropdown>
+  );
+}
diff --git a/frontend/src/components/RecipeDetailModal.tsx b/frontend/src/components/RecipeDetailModal.tsx
index c6488f7..c099ea0 100644
--- a/frontend/src/components/RecipeDetailModal.tsx
+++ b/frontend/src/components/RecipeDetailModal.tsx
@@ -2,12 +2,14 @@ import { useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Undo2, UtensilsCrossed, X } from "lucide-react";
 import { checkRecipeAvailability, cookRecipe } from "../api/client";
+import { difficultyLabel, useI18n } from "../i18n";
 import { parseInstructionSteps } from "../lib/recipeText";
 import { CookResult, Recipe } from "../types";
 import { ModalShell } from "./modals";
 
 // Mount with key={recipe.id} so servings/skips/cook state reset per recipe.
 export default function RecipeDetailModal({ recipe, onClose }: { recipe: Recipe; onClose: () => void }) {
+  const { t } = useI18n();
   const queryClient = useQueryClient();
   const baseServings = recipe.servings ?? 1;
   const [servings, setServings] = useState(baseServings);
@@ -48,7 +50,7 @@ export default function RecipeDetailModal({ recipe, onClose }: { recipe: Recipe;
         <div>
           <h3 className="text-2xl font-semibold text-slate-900 dark:text-white">{recipe.name}</h3>
           <p className="mt-1 text-sm text-slate-600 dark:text-slate-300">
-            {recipe.cuisine || "Unknown cuisine"} · {recipe.difficulty || "unknown"}
+            {recipe.cuisine || t("recipes.unknownCuisine")} · {difficultyLabel(t, recipe.difficulty)}
           </p>
         </div>
         <button
@@ -56,12 +58,12 @@ export default function RecipeDetailModal({ recipe, onClose }: { recipe: Recipe;
           onClick={onClose}
           className="rounded-md border border-slate-300 dark:border-slate-600 px-3 py-1 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800"
         >
-          Close
+          {t("common.close")}
         </button>
       </div>
 
       <div className="mt-4 flex items-center gap-3">
-        <span className="text-sm text-slate-600 dark:text-slate-300">Servings:</span>
+        <span className="text-sm text-slate-600 dark:text-slate-300">{t("detail.servings")}</span>
         <div className="flex items-center gap-2">
           <button
             type="button"
@@ -81,13 +83,13 @@ export default function RecipeDetailModal({ recipe, onClose }: { recipe: Recipe;
           </button>
         </div>
         {servings !== baseServings && (
-          <span className="text-xs text-slate-500 dark:text-slate-500">(recipe is for {baseServings})</span>
+          <span className="text-xs text-slate-500 dark:text-slate-500">{t("detail.baseServings", { count: baseServings })}</span>
         )}
       </div>
 
       <div className="mt-5 grid gap-5 md:grid-cols-2">
         <div>
-          <h4 className="text-sm font-semibold uppercase tracking-wide text-brand-700 dark:text-brand-100">Ingredients</h4>
+          <h4 className="text-sm font-semibold uppercase tracking-wide text-brand-700 dark:text-brand-100">{t("detail.ingredients")}</h4>
           <ul className="mt-2 space-y-1 text-sm">
             {(recipe.ingredients ?? []).map((ingredient, index) => {
               const scaled = ingredient.quantity * scale;
@@ -110,7 +112,7 @@ export default function RecipeDetailModal({ recipe, onClose }: { recipe: Recipe;
                   <button
                     type="button"
                     onClick={toggle}
-                    title={skipped ? "Add back" : "Skip for this cook"}
+                    title={skipped ? t("detail.addBack") : t("detail.skip")}
                     className={`shrink-0 rounded p-0.5 transition ${
                       skipped
                         ? "text-slate-400 dark:text-slate-500 hover:text-slate-700 dark:hover:text-slate-200"
@@ -125,7 +127,7 @@ export default function RecipeDetailModal({ recipe, onClose }: { recipe: Recipe;
           </ul>
         </div>
         <div>
-          <h4 className="text-sm font-semibold uppercase tracking-wide text-brand-700 dark:text-brand-100">Step-by-step</h4>
+          <h4 className="text-sm font-semibold uppercase tracking-wide text-brand-700 dark:text-brand-100">{t("detail.steps")}</h4>
           <ol className="mt-2 list-decimal space-y-2 pl-5 text-sm text-slate-700 dark:text-slate-200">
             {parseInstructionSteps(recipe.instructions).map((step, index) => (
               <li key={`${index}-${step}`}>{step}</li>
@@ -139,7 +141,7 @@ export default function RecipeDetailModal({ recipe, onClose }: { recipe: Recipe;
           <div className="space-y-3 text-sm">
             {cookResult.consumed.length > 0 && (
               <div>
-                <p className="font-medium text-emerald-600 dark:text-emerald-300">Inventory updated:</p>
+                <p className="font-medium text-emerald-600 dark:text-emerald-300">{t("detail.inventoryUpdated")}</p>
                 <ul className="mt-1 space-y-1 text-slate-600 dark:text-slate-300">
                   {cookResult.consumed.map((line) => <li key={line}>· {line}</li>)}
                 </ul>
@@ -147,7 +149,7 @@ export default function RecipeDetailModal({ recipe, onClose }: { recipe: Recipe;
             )}
             {cookResult.unmatched.length > 0 && (
               <div>
-                <p className="font-medium text-amber-600 dark:text-amber-300">Not found in inventory:</p>
+                <p className="font-medium text-amber-600 dark:text-amber-300">{t("detail.notFoundInInventory")}</p>
                 <ul className="mt-1 space-y-1 text-slate-600 dark:text-slate-300">
                   {cookResult.unmatched.map((line) => <li key={line}>· {line}</li>)}
                 </ul>
@@ -163,25 +165,25 @@ export default function RecipeDetailModal({ recipe, onClose }: { recipe: Recipe;
               className="inline-flex items-center gap-2 rounded-lg bg-brand-600 px-4 py-2 font-medium text-white transition hover:bg-brand-500 disabled:cursor-not-allowed disabled:opacity-40"
             >
               <UtensilsCrossed className="h-4 w-4" />
-              {cookRecipeMutation.isPending ? "Updating inventory..." : "Cooked this!"}
+              {cookRecipeMutation.isPending ? t("detail.cooking") : t("detail.cooked")}
             </button>
             {(filteredInsufficient.length > 0 || filteredMissing.length > 0) && (
               <div className="space-y-1 text-sm">
                 {filteredInsufficient.map((line) => (
-                  <p key={line} className="text-amber-600 dark:text-amber-300">· Not enough: {line}</p>
+                  <p key={line} className="text-amber-600 dark:text-amber-300">· {t("recommendations.notEnough", { items: line })}</p>
                 ))}
                 {filteredMissing.map((line) => (
-                  <p key={line} className="text-rose-600 dark:text-rose-300">· Missing: {line}</p>
+                  <p key={line} className="text-rose-600 dark:text-rose-300">· {t("recommendations.missing", { items: line })}</p>
                 ))}
                 <p className="text-slate-500 dark:text-slate-400 text-xs pt-1">
-                  Click × next to an ingredient above to skip it for this cook.
+                  {t("detail.skipHint")}
                 </p>
               </div>
             )}
           </div>
         )}
         {cookRecipeMutation.isError && (
-          <p className="mt-2 text-sm text-rose-600 dark:text-rose-300">Could not update inventory. Try again.</p>
+          <p className="mt-2 text-sm text-rose-600 dark:text-rose-300">{t("detail.error.cook")}</p>
         )}
       </div>
     </ModalShell>
diff --git a/frontend/src/components/RecipesSection.tsx b/frontend/src/components/RecipesSection.tsx
index 258a472..1922a59 100644
--- a/frontend/src/components/RecipesSection.tsx
+++ b/frontend/src/components/RecipesSection.tsx
@@ -2,6 +2,7 @@ import { FormEvent, useMemo, useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Pencil, Trash2, Undo2 } from "lucide-react";
 import { addRecipe, deleteRecipe, updateRecipe } from "../api/client";
+import { difficultyLabel, useI18n } from "../i18n";
 import { parseIngredientLine } from "../lib/recipeText";
 import { inputClass } from "../lib/ui";
 import { Recipe, RecipeIngredient } from "../types";
@@ -31,6 +32,7 @@ export default function RecipesSection({
   searchQuery: string;
   onSelectRecipe: (recipe: Recipe) => void;
 }) {
+  const { t } = useI18n();
   const queryClient = useQueryClient();
   const [recipeForm, setRecipeForm] = useState<RecipeFormState>(initialRecipeForm);
   const [editingRecipeId, setEditingRecipeId] = useState<number | null>(null);
@@ -121,7 +123,7 @@ export default function RecipesSection({
     <section className="grid gap-6 lg:grid-cols-[1.1fr_1fr]">
       <article className="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/80 p-6">
         <h2 className="text-xl font-semibold">
-          {editingRecipeId !== null ? "Edit recipe" : "Add recipe"}
+          {editingRecipeId !== null ? t("recipes.editTitle") : t("recipes.addTitle")}
         </h2>
         <form className="mt-4 grid gap-3" onSubmit={handleSubmit}>
           <input
@@ -129,37 +131,37 @@ export default function RecipesSection({
             value={recipeForm.name}
             onChange={(event) => setRecipeForm((prev) => ({ ...prev, name: event.target.value }))}
             className={inputClass}
-            placeholder="Recipe name"
+            placeholder={t("recipes.form.name")}
           />
           <div className="grid grid-cols-2 gap-3">
             <input
               value={recipeForm.cuisine}
               onChange={(event) => setRecipeForm((prev) => ({ ...prev, cuisine: event.target.value }))}
               className={inputClass}
-              placeholder="Cuisine"
+              placeholder={t("recipes.form.cuisine")}
             />
             <select
               value={recipeForm.difficulty}
               onChange={(event) => setRecipeForm((prev) => ({ ...prev, difficulty: event.target.value }))}
               className={inputClass}
             >
-              <option value="easy">easy</option>
-              <option value="medium">medium</option>
-              <option value="hard">hard</option>
+              <option value="easy">{t("difficulty.easy")}</option>
+              <option value="medium">{t("difficulty.medium")}</option>
+              <option value="hard">{t("difficulty.hard")}</option>
             </select>
           </div>
           <textarea
             value={recipeForm.ingredients}
             onChange={(event) => setRecipeForm((prev) => ({ ...prev, ingredients: event.target.value }))}
             className={inputClass}
-            placeholder={"One ingredient per line:\n400 grams pasta\n3 cloves garlic\n100 ml olive oil"}
+            placeholder={t("recipes.form.ingredientsPlaceholder")}
             rows={5}
           />
           <textarea
             value={recipeForm.instructions}
             onChange={(event) => setRecipeForm((prev) => ({ ...prev, instructions: event.target.value }))}
             className={inputClass}
-            placeholder="Instructions"
+            placeholder={t("recipes.form.instructions")}
             rows={3}
           />
           <button
@@ -168,8 +170,8 @@ export default function RecipesSection({
             className="rounded-lg bg-brand-600 px-4 py-2 font-medium text-white transition hover:bg-brand-500 disabled:opacity-50"
           >
             {editingRecipeId !== null
-              ? updateRecipeMutation.isPending ? "Saving..." : "Save changes"
-              : addRecipeMutation.isPending ? "Adding..." : "Add recipe"}
+              ? updateRecipeMutation.isPending ? t("common.saving") : t("common.saveChanges")
+              : addRecipeMutation.isPending ? t("common.adding") : t("recipes.form.add")}
           </button>
           {editingRecipeId !== null && (
             <button
@@ -178,24 +180,24 @@ export default function RecipesSection({
               className="inline-flex items-center justify-center gap-2 rounded-lg border border-slate-300 dark:border-slate-600 px-4 py-2 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800"
             >
               <Undo2 className="h-4 w-4" />
-              Cancel edit
+              {t("common.cancelEdit")}
             </button>
           )}
           {addRecipeMutation.isError && (
-            <p className="text-sm text-rose-600 dark:text-rose-300">Could not add recipe. Please check your input.</p>
+            <p className="text-sm text-rose-600 dark:text-rose-300">{t("recipes.error.add")}</p>
           )}
           {updateRecipeMutation.isError && (
-            <p className="text-sm text-rose-600 dark:text-rose-300">Could not update recipe. Try again.</p>
+            <p className="text-sm text-rose-600 dark:text-rose-300">{t("recipes.error.update")}</p>
           )}
         </form>
       </article>
 
       <article className="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/80 p-6">
-        <h2 className="text-xl font-semibold">Recipe library</h2>
+        <h2 className="text-xl font-semibold">{t("recipes.library")}</h2>
         <div className="mt-4 space-y-3">
           {filteredRecipes.length === 0 ? (
             <p className="rounded-lg bg-slate-50 dark:bg-slate-800/70 p-4 text-slate-600 dark:text-slate-300">
-              {searchQuery ? `No recipes matching "${searchQuery}".` : "No recipes yet. Add your first one."}
+              {searchQuery ? t("recipes.noMatch", { query: searchQuery }) : t("recipes.empty")}
             </p>
           ) : (
             filteredRecipes.map((recipe) => (
@@ -211,7 +213,7 @@ export default function RecipesSection({
                   <div>
                     <p className="font-medium text-slate-900 dark:text-white">{recipe.name}</p>
                     <p className="text-sm text-slate-600 dark:text-slate-300">
-                      {recipe.cuisine || "Unknown cuisine"} · {recipe.difficulty || "unknown"}
+                      {recipe.cuisine || t("recipes.unknownCuisine")} · {difficultyLabel(t, recipe.difficulty)}
                     </p>
                   </div>
                   <div className="flex gap-2">
@@ -221,7 +223,7 @@ export default function RecipesSection({
                       className="inline-flex items-center gap-1 rounded-md bg-slate-200 dark:bg-slate-700 px-2 py-1 text-xs text-slate-700 dark:text-slate-200 hover:bg-slate-300 dark:hover:bg-slate-600"
                     >
                       <Pencil className="h-3 w-3" />
-                      Edit
+                      {t("common.edit")}
                     </button>
                     <button
                       type="button"
@@ -229,7 +231,7 @@ export default function RecipesSection({
                       className="inline-flex items-center gap-1 rounded-md bg-rose-500/20 px-2 py-1 text-xs text-rose-600 dark:text-rose-200 hover:bg-rose-500/30"
                     >
                       <Trash2 className="h-3 w-3" />
-                      Delete
+                      {t("common.delete")}
                     </button>
                   </div>
                 </div>
@@ -238,7 +240,7 @@ export default function RecipesSection({
           )}
         </div>
         {deleteRecipeMutation.isError && (
-          <p className="mt-3 text-sm text-rose-600 dark:text-rose-300">Could not delete recipe. Try again.</p>
+          <p className="mt-3 text-sm text-rose-600 dark:text-rose-300">{t("recipes.error.delete")}</p>
         )}
       </article>
     </section>
diff --git a/frontend/src/components/modals.tsx b/frontend/src/components/modals.tsx
index 9f31d2a..15c2b86 100644
--- a/frontend/src/components/modals.tsx
+++ b/frontend/src/components/modals.tsx
@@ -2,6 +2,7 @@ import { FormEvent, ReactNode, useEffect, useRef, useState } from "react";
 import { useMutation } from "@tanstack/react-query";
 import { Info, Mail, MessageSquare, Trash2 } from "lucide-react";
 import { changePassword, deleteAccount, inviteToHousehold, sendFeedback } from "../api/client";
+import { useI18n } from "../i18n";
 import { inputClass } from "../lib/ui";
 
 export function ModalShell({ children, wide = false }: { children: ReactNode; wide?: boolean }) {
@@ -19,6 +20,7 @@ export function ModalShell({ children, wide = false }: { children: ReactNode; wi
 }
 
 export function InviteHouseholdModal({ onClose }: { onClose: () => void }) {
+  const { t } = useI18n();
   const [email, setEmail] = useState("");
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -37,23 +39,23 @@ export function InviteHouseholdModal({ onClose }: { onClose: () => void }) {
     <ModalShell>
       <h3 className="flex items-center gap-2 text-lg font-semibold text-slate-900 dark:text-white">
         <Mail className="h-4 w-4" />
-        Invite to household
+        {t("menu.invite")}
       </h3>
       {inviteMutation.isSuccess ? (
         <div className="mt-4 space-y-4">
-          <p className="text-sm text-emerald-600 dark:text-emerald-300">Invite sent to {email}.</p>
+          <p className="text-sm text-emerald-600 dark:text-emerald-300">{t("invite.sent", { email })}</p>
           <button
             type="button"
             onClick={onClose}
             className="w-full rounded-lg bg-brand-600 px-4 py-2 font-medium text-white hover:bg-brand-500"
           >
-            Close
+            {t("common.close")}
           </button>
         </div>
       ) : (
         <form className="mt-4 grid gap-3" onSubmit={handleSubmit}>
           <p className="text-sm text-slate-600 dark:text-slate-300">
-            They'll get an email with a link to join your household and see the same inventory.
+            {t("invite.description")}
           </p>
           <input
             ref={inputRef}
@@ -64,7 +66,7 @@ export function InviteHouseholdModal({ onClose }: { onClose: () => void }) {
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             className={inputClass}
-            placeholder="Email address"
+            placeholder={t("form.email")}
           />
           {inviteMutation.isError && (
             <p className="text-sm text-rose-600 dark:text-rose-300">{inviteMutation.error.message}</p>
@@ -75,14 +77,14 @@ export function InviteHouseholdModal({ onClose }: { onClose: () => void }) {
               onClick={onClose}
               className="flex-1 rounded-lg border border-slate-300 dark:border-slate-600 px-4 py-2 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800"
             >
-              Cancel
+              {t("common.cancel")}
             </button>
             <button
               type="submit"
               disabled={inviteMutation.isPending}
               className="flex-1 rounded-lg bg-brand-600 px-4 py-2 font-medium text-white hover:bg-brand-500 disabled:opacity-50"
             >
-              {inviteMutation.isPending ? "Sending..." : "Send invite"}
+              {inviteMutation.isPending ? t("common.sending") : t("invite.send")}
             </button>
           </div>
         </form>
@@ -92,16 +94,17 @@ export function InviteHouseholdModal({ onClose }: { onClose: () => void }) {
 }
 
 export function AboutModal({ onClose }: { onClose: () => void }) {
+  const { t } = useI18n();
   return (
     <ModalShell>
       <h3 className="flex items-center gap-2 text-lg font-semibold text-slate-900 dark:text-white">
         <Info className="h-4 w-4" />
-        About
+        {t("menu.about")}
       </h3>
       <div className="mt-4 flex items-center justify-between rounded-xl border border-slate-200 dark:border-slate-700 px-4 py-3">
         <div>
           <p className="font-medium text-slate-900 dark:text-white">OnsInventory</p>
-          <p className="text-sm text-slate-500 dark:text-slate-400">Pantry, fridge &amp; freezer tracking</p>
+          <p className="text-sm text-slate-500 dark:text-slate-400">{t("about.subtitle")}</p>
         </div>
         <span className="rounded-lg bg-brand-100 dark:bg-brand-600/20 px-3 py-1 text-sm font-semibold text-brand-800 dark:text-brand-50">
           v{__APP_VERSION__}
@@ -112,13 +115,14 @@ export function AboutModal({ onClose }: { onClose: () => void }) {
         onClick={onClose}
         className="mt-4 w-full rounded-lg bg-brand-600 px-4 py-2 font-medium text-white hover:bg-brand-500"
       >
-        Close
+        {t("common.close")}
       </button>
     </ModalShell>
   );
 }
 
 export function FeedbackModal({ onClose }: { onClose: () => void }) {
+  const { t } = useI18n();
   const [message, setMessage] = useState("");
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
@@ -138,24 +142,23 @@ export function FeedbackModal({ onClose }: { onClose: () => void }) {
     <ModalShell>
       <h3 className="flex items-center gap-2 text-lg font-semibold text-slate-900 dark:text-white">
         <MessageSquare className="h-4 w-4" />
-        Send feedback
+        {t("menu.feedback")}
       </h3>
       {feedbackMutation.isSuccess ? (
         <div className="mt-4 space-y-4">
-          <p className="text-sm text-emerald-600 dark:text-emerald-300">Thanks! Your feedback has been sent.</p>
+          <p className="text-sm text-emerald-600 dark:text-emerald-300">{t("feedback.thanks")}</p>
           <button
             type="button"
             onClick={onClose}
             className="w-full rounded-lg bg-brand-600 px-4 py-2 font-medium text-white hover:bg-brand-500"
           >
-            Close
+            {t("common.close")}
           </button>
         </div>
       ) : (
         <form className="mt-4 grid gap-3" onSubmit={handleSubmit}>
           <p className="text-sm text-slate-600 dark:text-slate-300">
-            Tell us what's broken, missing, or could be better. Feedback is sent anonymously —
-            your name and email are not included.
+            {t("feedback.description")}
           </p>
           <textarea
             ref={inputRef}
@@ -164,7 +167,7 @@ export function FeedbackModal({ onClose }: { onClose: () => void }) {
             value={message}
             onChange={(e) => setMessage(e.target.value)}
             className={`${inputClass} resize-y`}
-            placeholder="Your feedback..."
+            placeholder={t("feedback.placeholder")}
           />
           {feedbackMutation.isError && (
             <p className="text-sm text-rose-600 dark:text-rose-300">{feedbackMutation.error.message}</p>
@@ -175,14 +178,14 @@ export function FeedbackModal({ onClose }: { onClose: () => void }) {
               onClick={onClose}
               className="flex-1 rounded-lg border border-slate-300 dark:border-slate-600 px-4 py-2 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800"
             >
-              Cancel
+              {t("common.cancel")}
             </button>
             <button
               type="submit"
               disabled={feedbackMutation.isPending || !message.trim()}
               className="flex-1 rounded-lg bg-brand-600 px-4 py-2 font-medium text-white hover:bg-brand-500 disabled:opacity-50"
             >
-              {feedbackMutation.isPending ? "Sending..." : "Send feedback"}
+              {feedbackMutation.isPending ? t("common.sending") : t("menu.feedback")}
             </button>
           </div>
         </form>
@@ -192,6 +195,7 @@ export function FeedbackModal({ onClose }: { onClose: () => void }) {
 }
 
 export function DeleteAccountModal({ onClose, onDeleted }: { onClose: () => void; onDeleted: () => void }) {
+  const { t } = useI18n();
   const [password, setPassword] = useState("");
   const [confirmText, setConfirmText] = useState("");
   const inputRef = useRef<HTMLInputElement>(null);
@@ -214,11 +218,10 @@ export function DeleteAccountModal({ onClose, onDeleted }: { onClose: () => void
     <ModalShell>
       <h3 className="flex items-center gap-2 text-lg font-semibold text-rose-600 dark:text-rose-300">
         <Trash2 className="h-4 w-4" />
-        Delete account
+        {t("menu.deleteAccount")}
       </h3>
       <p className="mt-3 text-sm text-slate-600 dark:text-slate-300">
-        This permanently deletes your account. If you're the only member of your household,
-        its inventory, recipes, and locations are permanently deleted too — this cannot be undone.
+        {t("deleteAccount.warning")}
       </p>
       <form className="mt-4 grid gap-3" onSubmit={handleSubmit}>
         <input
@@ -228,11 +231,13 @@ export function DeleteAccountModal({ onClose, onDeleted }: { onClose: () => void
           value={password}
           onChange={(e) => setPassword(e.target.value)}
           className={inputClass}
-          placeholder="Current password"
+          placeholder={t("form.currentPassword")}
         />
         <div>
           <label className="text-sm text-slate-600 dark:text-slate-300">
-            Type <span className="font-semibold">DELETE</span> to confirm
+            {t("deleteAccount.typeToConfirm").split("DELETE")[0]}
+            <span className="font-semibold">DELETE</span>
+            {t("deleteAccount.typeToConfirm").split("DELETE")[1]}
           </label>
           <input
             required
@@ -251,14 +256,14 @@ export function DeleteAccountModal({ onClose, onDeleted }: { onClose: () => void
             onClick={onClose}
             className="flex-1 rounded-lg border border-slate-300 dark:border-slate-600 px-4 py-2 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800"
           >
-            Cancel
+            {t("common.cancel")}
           </button>
           <button
             type="submit"
             disabled={deleteAccountMutation.isPending || !canSubmit}
             className="flex-1 rounded-lg bg-rose-600 px-4 py-2 font-medium text-white hover:bg-rose-500 disabled:opacity-50"
           >
-            {deleteAccountMutation.isPending ? "Deleting..." : "Delete my account"}
+            {deleteAccountMutation.isPending ? t("deleteAccount.deleting") : t("deleteAccount.confirm")}
           </button>
         </div>
       </form>
@@ -267,6 +272,7 @@ export function DeleteAccountModal({ onClose, onDeleted }: { onClose: () => void
 }
 
 export function ChangePasswordModal({ onClose }: { onClose: () => void }) {
+  const { t } = useI18n();
   const [current, setCurrent] = useState("");
   const [next, setNext] = useState("");
   const [confirm, setConfirm] = useState("");
@@ -287,16 +293,16 @@ export function ChangePasswordModal({ onClose }: { onClose: () => void }) {
 
   return (
     <ModalShell>
-      <h3 className="text-lg font-semibold text-slate-900 dark:text-white">Change password</h3>
+      <h3 className="text-lg font-semibold text-slate-900 dark:text-white">{t("menu.changePassword")}</h3>
       {changePasswordMutation.isSuccess ? (
         <div className="mt-4 space-y-4">
-          <p className="text-sm text-emerald-600 dark:text-emerald-300">Password changed successfully.</p>
+          <p className="text-sm text-emerald-600 dark:text-emerald-300">{t("changePassword.success")}</p>
           <button
             type="button"
             onClick={onClose}
             className="w-full rounded-lg bg-brand-600 px-4 py-2 font-medium text-white hover:bg-brand-500"
           >
-            Close
+            {t("common.close")}
           </button>
         </div>
       ) : (
@@ -308,7 +314,7 @@ export function ChangePasswordModal({ onClose }: { onClose: () => void }) {
             value={current}
             onChange={(e) => setCurrent(e.target.value)}
             className={inputClass}
-            placeholder="Current password"
+            placeholder={t("form.currentPassword")}
           />
           <input
             required
@@ -316,7 +322,7 @@ export function ChangePasswordModal({ onClose }: { onClose: () => void }) {
             value={next}
             onChange={(e) => setNext(e.target.value)}
             className={inputClass}
-            placeholder="New password"
+            placeholder={t("form.newPassword")}
           />
           <input
             required
@@ -324,11 +330,11 @@ export function ChangePasswordModal({ onClose }: { onClose: () => void }) {
             value={confirm}
             onChange={(e) => setConfirm(e.target.value)}
             className={`${inputClass} ${mismatch ? "border-rose-500 bg-rose-50 dark:bg-rose-950/30" : ""}`}
-            placeholder="Confirm new password"
+            placeholder={t("form.confirmNewPassword")}
           />
-          {mismatch && <p className="text-sm text-rose-600 dark:text-rose-300">Passwords do not match.</p>}
+          {mismatch && <p className="text-sm text-rose-600 dark:text-rose-300">{t("form.passwordMismatch")}</p>}
           {changePasswordMutation.isError && (
-            <p className="text-sm text-rose-600 dark:text-rose-300">Current password is incorrect.</p>
+            <p className="text-sm text-rose-600 dark:text-rose-300">{t("changePassword.wrongCurrent")}</p>
           )}
           <div className="flex gap-3">
             <button
@@ -336,14 +342,14 @@ export function ChangePasswordModal({ onClose }: { onClose: () => void }) {
               onClick={onClose}
               className="flex-1 rounded-lg border border-slate-300 dark:border-slate-600 px-4 py-2 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800"
             >
-              Cancel
+              {t("common.cancel")}
             </button>
             <button
               type="submit"
               disabled={changePasswordMutation.isPending || mismatch}
               className="flex-1 rounded-lg bg-brand-600 px-4 py-2 font-medium text-white hover:bg-brand-500 disabled:opacity-50"
             >
-              {changePasswordMutation.isPending ? "Saving..." : "Save"}
+              {changePasswordMutation.isPending ? t("common.saving") : t("common.save")}
             </button>
           </div>
         </form>
diff --git a/frontend/src/i18n/en.ts b/frontend/src/i18n/en.ts
new file mode 100644
index 0000000..eb9cd0f
--- /dev/null
+++ b/frontend/src/i18n/en.ts
@@ -0,0 +1,182 @@
+export const en = {
+  "common.loading": "Loading...",
+  "common.close": "Close",
+  "common.cancel": "Cancel",
+  "common.save": "Save",
+  "common.saving": "Saving...",
+  "common.sending": "Sending...",
+  "common.adding": "Adding...",
+  "common.saveChanges": "Save changes",
+  "common.cancelEdit": "Cancel edit",
+  "common.edit": "Edit",
+  "common.delete": "Delete",
+
+  "header.welcome": "Welcome, {name}!",
+  "header.tagline": "Track pantry, fridge, and freezer stock and get recipe ideas before ingredients expire.",
+  "header.topSuggestion": "Top suggestion",
+  "header.noSuggestion": "Add inventory to unlock recommendations",
+
+  "nav.inventory": "Inventory",
+  "nav.mealPlanner": "Meal Planner",
+
+  "menu.profile": "profile menu",
+  "menu.menu": "menu",
+  "menu.language": "language",
+  "menu.changePassword": "Change password",
+  "menu.deleteAccount": "Delete account",
+  "menu.lightMode": "Light mode",
+  "menu.darkMode": "Dark mode",
+  "menu.invite": "Invite to household",
+  "menu.feedback": "Send feedback",
+  "menu.about": "About",
+  "menu.logout": "Logout",
+
+  "search.placeholder": "Search inventory and recipes...",
+  "dashboard.loading": "Loading your kitchen dashboard...",
+  "metrics.itemsInStock": "Items in stock",
+  "metrics.recipes": "Recipes",
+  "metrics.expiringSoon": "Expiring soon",
+  "metrics.expired": "Already expired",
+
+  "recommendations.title": "Recipe recommendations",
+  "recommendations.match": "Match: {percentage}% ({matched}/{total})",
+  "recommendations.useSoon": "Use soon: {items}",
+  "recommendations.notEnough": "Not enough: {items}",
+  "recommendations.missing": "Missing: {items}",
+  "recommendations.cookNow": "Cook now",
+  "recommendations.almostThere": "Almost there",
+  "recommendations.needGroceries": "Need groceries",
+
+  "inventory.title": "Inventory by location",
+  "inventory.all": "All",
+  "inventory.empty": "No items in this location yet.",
+  "inventory.status.expired": "Expired",
+  "inventory.status.expiring": "Expiring",
+  "inventory.status.fresh": "Fresh",
+  "inventory.editItem": "Edit inventory item",
+  "inventory.addItem": "Add inventory item",
+  "inventory.form.name": "Item name",
+  "inventory.form.category": "Category",
+  "inventory.form.quantity": "Quantity",
+  "inventory.form.unit": "Unit",
+  "inventory.form.notes": "Notes (optional)",
+  "inventory.form.add": "Add item",
+  "inventory.error.add": "Could not add item. Check backend availability.",
+  "inventory.error.update": "Could not update item. Try again.",
+  "inventory.error.delete": "Could not delete item. Try again.",
+  "inventory.chart.title": "Stock distribution",
+  "inventory.chart.empty": "Add a few items to see the chart.",
+
+  "pagination.itemsPerPage": "Items per page",
+  "pagination.previous": "Previous",
+  "pagination.next": "Next",
+  "pagination.page": "Page {current} / {total}",
+
+  "recipes.editTitle": "Edit recipe",
+  "recipes.addTitle": "Add recipe",
+  "recipes.form.name": "Recipe name",
+  "recipes.form.cuisine": "Cuisine",
+  "recipes.form.ingredientsPlaceholder": "One ingredient per line:\n400 grams pasta\n3 cloves garlic\n100 ml olive oil",
+  "recipes.form.instructions": "Instructions",
+  "recipes.form.add": "Add recipe",
+  "recipes.error.add": "Could not add recipe. Please check your input.",
+  "recipes.error.update": "Could not update recipe. Try again.",
+  "recipes.error.delete": "Could not delete recipe. Try again.",
+  "recipes.library": "Recipe library",
+  "recipes.noMatch": 'No recipes matching "{query}".',
+  "recipes.empty": "No recipes yet. Add your first one.",
+  "recipes.unknownCuisine": "Unknown cuisine",
+
+  "difficulty.easy": "easy",
+  "difficulty.medium": "medium",
+  "difficulty.hard": "hard",
+  "difficulty.unknown": "unknown",
+
+  "detail.servings": "Servings:",
+  "detail.baseServings": "(recipe is for {count})",
+  "detail.ingredients": "Ingredients",
+  "detail.steps": "Step-by-step",
+  "detail.addBack": "Add back",
+  "detail.skip": "Skip for this cook",
+  "detail.inventoryUpdated": "Inventory updated:",
+  "detail.notFoundInInventory": "Not found in inventory:",
+  "detail.cooking": "Updating inventory...",
+  "detail.cooked": "Cooked this!",
+  "detail.skipHint": "Click × next to an ingredient above to skip it for this cook.",
+  "detail.error.cook": "Could not update inventory. Try again.",
+
+  "invite.sent": "Invite sent to {email}.",
+  "invite.description": "They'll get an email with a link to join your household and see the same inventory.",
+  "invite.send": "Send invite",
+
+  "about.subtitle": "Pantry, fridge & freezer tracking",
+
+  "feedback.thanks": "Thanks! Your feedback has been sent.",
+  "feedback.description": "Tell us what's broken, missing, or could be better. Feedback is sent anonymously — your name and email are not included.",
+  "feedback.placeholder": "Your feedback...",
+
+  "deleteAccount.warning": "This permanently deletes your account. If you're the only member of your household, its inventory, recipes, and locations are permanently deleted too — this cannot be undone.",
+  "deleteAccount.typeToConfirm": "Type DELETE to confirm",
+  "deleteAccount.deleting": "Deleting...",
+  "deleteAccount.confirm": "Delete my account",
+
+  "form.email": "Email address",
+  "form.currentPassword": "Current password",
+  "form.newPassword": "New password",
+  "form.confirmNewPassword": "Confirm new password",
+  "form.passwordMismatch": "Passwords do not match.",
+
+  "changePassword.success": "Password changed successfully.",
+  "changePassword.wrongCurrent": "Current password is incorrect.",
+
+  "auth.signIn": "Sign in",
+  "auth.username": "Username",
+  "auth.password": "Password",
+  "auth.loginError": "Incorrect username or password.",
+  "auth.signingIn": "Signing in...",
+  "auth.forgotPassword": "Forgot password?",
+  "auth.createAccount": "Create an account",
+  "auth.inviteInvalid": "This invite link is invalid or has expired. You can still create your own household below.",
+  "auth.joiningHousehold": 'You\'re joining "{household}".',
+  "auth.newHousehold": "A new household will be created for you — you can invite others to it afterward.",
+  "auth.firstName": "First name",
+  "auth.lastName": "Last name",
+  "auth.passwordMin": "Password (min. 8 characters)",
+  "auth.confirmPassword": "Confirm password",
+  "auth.creatingAccount": "Creating account...",
+  "auth.createAccountButton": "Create account",
+  "auth.backToSignIn": "Back to sign in",
+  "auth.resetTitle": "Reset your password",
+  "auth.resetSent": "If an account exists for that email, we've sent a link to reset your password.",
+  "auth.resetDescription": "Enter your email and we'll send you a link to reset your password.",
+  "auth.sendResetLink": "Send reset link",
+  "auth.chooseNewPassword": "Choose a new password",
+  "auth.resetMissingToken": "This reset link is missing its token.",
+  "auth.resetSuccess": "Password updated. You can now sign in with your new password.",
+  "auth.newPasswordMin": "New password (min. 8 characters)",
+  "auth.saveNewPassword": "Save new password",
+
+  "planner.title": "Meal plan",
+  "planner.today": "Today",
+  "planner.todayTag": "today",
+  "planner.grocery": "Grocery list",
+  "planner.dropHere": "Drop here",
+  "planner.nothingPlanned": "Nothing planned",
+  "planner.dropRecipe": "Drop recipe",
+  "planner.remove": "Remove {name}",
+  "planner.fewerServings": "Fewer servings",
+  "planner.moreServings": "More servings",
+  "planner.recipes": "Recipes",
+  "planner.tapHint": "Tap a recipe to plan it",
+  "planner.dragHint": "Drag a recipe onto a day, or tap one to pick a day",
+  "planner.searchRecipes": "Search recipes...",
+  "planner.noRecipes": "No recipes yet. Add some on the Inventory page first.",
+  "planner.noSearchMatch": "No recipes match your search.",
+  "planner.wellStocked": "You're well stocked — nothing to buy!",
+  "planner.removeFromList": "Remove from list",
+  "planner.copied": "Copied!",
+  "planner.copy": "Copy",
+  "planner.planMeal": "Plan meal",
+  "planner.meal": "meal",
+  "planner.meals": "meals"
+} as const;
diff --git a/frontend/src/i18n/es.ts b/frontend/src/i18n/es.ts
new file mode 100644
index 0000000..1f1de19
--- /dev/null
+++ b/frontend/src/i18n/es.ts
@@ -0,0 +1,185 @@
+import { en } from "./en";
+
+// Spanish (Colombia): informal "tú", Colombian vocabulary (nevera, mercado, vencerse).
+export const es: Record<keyof typeof en, string> = {
+  "common.loading": "Cargando...",
+  "common.close": "Cerrar",
+  "common.cancel": "Cancelar",
+  "common.save": "Guardar",
+  "common.saving": "Guardando...",
+  "common.sending": "Enviando...",
+  "common.adding": "Agregando...",
+  "common.saveChanges": "Guardar cambios",
+  "common.cancelEdit": "Cancelar edición",
+  "common.edit": "Editar",
+  "common.delete": "Eliminar",
+
+  "header.welcome": "¡Hola, {name}!",
+  "header.tagline": "Lleva el control de tu despensa, nevera y congelador y recibe ideas de recetas antes de que los ingredientes se venzan.",
+  "header.topSuggestion": "Mejor sugerencia",
+  "header.noSuggestion": "Agrega inventario para recibir recomendaciones",
+
+  "nav.inventory": "Inventario",
+  "nav.mealPlanner": "Planificador de comidas",
+
+  "menu.profile": "menú de perfil",
+  "menu.menu": "menú",
+  "menu.language": "idioma",
+  "menu.changePassword": "Cambiar contraseña",
+  "menu.deleteAccount": "Eliminar cuenta",
+  "menu.lightMode": "Modo claro",
+  "menu.darkMode": "Modo oscuro",
+  "menu.invite": "Invitar al hogar",
+  "menu.feedback": "Enviar comentarios",
+  "menu.about": "Acerca de",
+  "menu.logout": "Cerrar sesión",
+
+  "search.placeholder": "Buscar en inventario y recetas...",
+  "dashboard.loading": "Cargando el panel de tu cocina...",
+  "metrics.itemsInStock": "Artículos en inventario",
+  "metrics.recipes": "Recetas",
+  "metrics.expiringSoon": "Por vencer",
+  "metrics.expired": "Ya vencidos",
+
+  "recommendations.title": "Recomendaciones de recetas",
+  "recommendations.match": "Coincidencia: {percentage}% ({matched}/{total})",
+  "recommendations.useSoon": "Usar pronto: {items}",
+  "recommendations.notEnough": "No alcanza: {items}",
+  "recommendations.missing": "Falta: {items}",
+  "recommendations.cookNow": "Cocina ya",
+  "recommendations.almostThere": "Casi listo",
+  "recommendations.needGroceries": "Falta mercado",
+
+  "inventory.title": "Inventario por ubicación",
+  "inventory.all": "Todo",
+  "inventory.empty": "Aún no hay artículos en esta ubicación.",
+  "inventory.status.expired": "Vencido",
+  "inventory.status.expiring": "Por vencer",
+  "inventory.status.fresh": "Fresco",
+  "inventory.editItem": "Editar artículo",
+  "inventory.addItem": "Agregar artículo",
+  "inventory.form.name": "Nombre del artículo",
+  "inventory.form.category": "Categoría",
+  "inventory.form.quantity": "Cantidad",
+  "inventory.form.unit": "Unidad",
+  "inventory.form.notes": "Notas (opcional)",
+  "inventory.form.add": "Agregar artículo",
+  "inventory.error.add": "No se pudo agregar el artículo. Verifica que el backend esté disponible.",
+  "inventory.error.update": "No se pudo actualizar el artículo. Intenta de nuevo.",
+  "inventory.error.delete": "No se pudo eliminar el artículo. Intenta de nuevo.",
+  "inventory.chart.title": "Distribución del inventario",
+  "inventory.chart.empty": "Agrega algunos artículos para ver la gráfica.",
+
+  "pagination.itemsPerPage": "Artículos por página",
+  "pagination.previous": "Anterior",
+  "pagination.next": "Siguiente",
+  "pagination.page": "Página {current} / {total}",
+
+  "recipes.editTitle": "Editar receta",
+  "recipes.addTitle": "Agregar receta",
+  "recipes.form.name": "Nombre de la receta",
+  "recipes.form.cuisine": "Cocina",
+  "recipes.form.ingredientsPlaceholder": "Un ingrediente por línea:\n400 gramos de pasta\n3 dientes de ajo\n100 ml de aceite de oliva",
+  "recipes.form.instructions": "Instrucciones",
+  "recipes.form.add": "Agregar receta",
+  "recipes.error.add": "No se pudo agregar la receta. Revisa los datos.",
+  "recipes.error.update": "No se pudo actualizar la receta. Intenta de nuevo.",
+  "recipes.error.delete": "No se pudo eliminar la receta. Intenta de nuevo.",
+  "recipes.library": "Recetario",
+  "recipes.noMatch": 'No hay recetas que coincidan con "{query}".',
+  "recipes.empty": "Aún no hay recetas. Agrega la primera.",
+  "recipes.unknownCuisine": "Cocina desconocida",
+
+  "difficulty.easy": "fácil",
+  "difficulty.medium": "media",
+  "difficulty.hard": "difícil",
+  "difficulty.unknown": "desconocida",
+
+  "detail.servings": "Porciones:",
+  "detail.baseServings": "(la receta es para {count})",
+  "detail.ingredients": "Ingredientes",
+  "detail.steps": "Paso a paso",
+  "detail.addBack": "Volver a incluir",
+  "detail.skip": "Omitir por esta vez",
+  "detail.inventoryUpdated": "Inventario actualizado:",
+  "detail.notFoundInInventory": "No se encontró en el inventario:",
+  "detail.cooking": "Actualizando inventario...",
+  "detail.cooked": "¡Ya lo cociné!",
+  "detail.skipHint": "Haz clic en la × junto a un ingrediente arriba para omitirlo por esta vez.",
+  "detail.error.cook": "No se pudo actualizar el inventario. Intenta de nuevo.",
+
+  "invite.sent": "Invitación enviada a {email}.",
+  "invite.description": "Recibirá un correo con un enlace para unirse a tu hogar y ver el mismo inventario.",
+  "invite.send": "Enviar invitación",
+
+  "about.subtitle": "Control de despensa, nevera y congelador",
+
+  "feedback.thanks": "¡Gracias! Tus comentarios fueron enviados.",
+  "feedback.description": "Cuéntanos qué está dañado, qué falta o qué podría mejorar. Los comentarios se envían de forma anónima: no se incluyen tu nombre ni tu correo.",
+  "feedback.placeholder": "Tus comentarios...",
+
+  "deleteAccount.warning": "Esto elimina tu cuenta de forma permanente. Si eres el único miembro de tu hogar, su inventario, recetas y ubicaciones también se eliminan permanentemente; esto no se puede deshacer.",
+  "deleteAccount.typeToConfirm": "Escribe DELETE para confirmar",
+  "deleteAccount.deleting": "Eliminando...",
+  "deleteAccount.confirm": "Eliminar mi cuenta",
+
+  "form.email": "Correo electrónico",
+  "form.currentPassword": "Contraseña actual",
+  "form.newPassword": "Nueva contraseña",
+  "form.confirmNewPassword": "Confirmar nueva contraseña",
+  "form.passwordMismatch": "Las contraseñas no coinciden.",
+
+  "changePassword.success": "Contraseña cambiada con éxito.",
+  "changePassword.wrongCurrent": "La contraseña actual es incorrecta.",
+
+  "auth.signIn": "Iniciar sesión",
+  "auth.username": "Usuario",
+  "auth.password": "Contraseña",
+  "auth.loginError": "Usuario o contraseña incorrectos.",
+  "auth.signingIn": "Iniciando sesión...",
+  "auth.forgotPassword": "¿Olvidaste tu contraseña?",
+  "auth.createAccount": "Crear una cuenta",
+  "auth.inviteInvalid": "Este enlace de invitación no es válido o ya venció. Aun así puedes crear tu propio hogar abajo.",
+  "auth.joiningHousehold": 'Te estás uniendo a "{household}".',
+  "auth.newHousehold": "Se creará un nuevo hogar para ti; después podrás invitar a otras personas.",
+  "auth.firstName": "Nombre",
+  "auth.lastName": "Apellido",
+  "auth.passwordMin": "Contraseña (mín. 8 caracteres)",
+  "auth.confirmPassword": "Confirmar contraseña",
+  "auth.creatingAccount": "Creando cuenta...",
+  "auth.createAccountButton": "Crear cuenta",
+  "auth.backToSignIn": "Volver a iniciar sesión",
+  "auth.resetTitle": "Restablecer tu contraseña",
+  "auth.resetSent": "Si existe una cuenta con ese correo, te enviamos un enlace para restablecer tu contraseña.",
+  "auth.resetDescription": "Ingresa tu correo y te enviaremos un enlace para restablecer tu contraseña.",
+  "auth.sendResetLink": "Enviar enlace",
+  "auth.chooseNewPassword": "Elige una nueva contraseña",
+  "auth.resetMissingToken": "A este enlace de restablecimiento le falta el token.",
+  "auth.resetSuccess": "Contraseña actualizada. Ya puedes iniciar sesión con tu nueva contraseña.",
+  "auth.newPasswordMin": "Nueva contraseña (mín. 8 caracteres)",
+  "auth.saveNewPassword": "Guardar nueva contraseña",
+
+  "planner.title": "Plan de comidas",
+  "planner.today": "Hoy",
+  "planner.todayTag": "hoy",
+  "planner.grocery": "Lista de mercado",
+  "planner.dropHere": "Suelta aquí",
+  "planner.nothingPlanned": "Nada planeado",
+  "planner.dropRecipe": "Arrastra una receta",
+  "planner.remove": "Quitar {name}",
+  "planner.fewerServings": "Menos porciones",
+  "planner.moreServings": "Más porciones",
+  "planner.recipes": "Recetas",
+  "planner.tapHint": "Toca una receta para planearla",
+  "planner.dragHint": "Arrastra una receta a un día, o tócala para elegir un día",
+  "planner.searchRecipes": "Buscar recetas...",
+  "planner.noRecipes": "Aún no hay recetas. Primero agrega algunas en la página de inventario.",
+  "planner.noSearchMatch": "No hay recetas que coincidan con tu búsqueda.",
+  "planner.wellStocked": "¡Estás bien surtido — no hay nada que comprar!",
+  "planner.removeFromList": "Quitar de la lista",
+  "planner.copied": "¡Copiado!",
+  "planner.copy": "Copiar",
+  "planner.planMeal": "Planear comida",
+  "planner.meal": "comida",
+  "planner.meals": "comidas"
+};
diff --git a/frontend/src/i18n/index.tsx b/frontend/src/i18n/index.tsx
new file mode 100644
index 0000000..1b231a0
--- /dev/null
+++ b/frontend/src/i18n/index.tsx
@@ -0,0 +1,88 @@
+/* eslint-disable react-refresh/only-export-components -- context module: provider + hook/helpers belong together */
+import { ReactNode, createContext, useContext, useEffect, useMemo, useState } from "react";
+import { en } from "./en";
+import { es } from "./es";
+import { nl } from "./nl";
+
+export type Lang = "en" | "nl" | "es";
+export type TranslationKey = keyof typeof en;
+export type Translator = (key: TranslationKey, params?: Record<string, string | number>) => string;
+
+const dictionaries: Record<Lang, Record<TranslationKey, string>> = { en, nl, es };
+
+// Intl locales per language; Spanish is Colombian Spanish.
+const intlLocales: Record<Lang, string> = { en: "en-GB", nl: "nl-NL", es: "es-CO" };
+
+export const languages: { code: Lang; flag: string; label: string }[] = [
+  { code: "en", flag: "🇬🇧", label: "English" },
+  { code: "nl", flag: "🇳🇱", label: "Nederlands" },
+  { code: "es", flag: "🇨🇴", label: "Español" }
+];
+
+const STORAGE_KEY = "lang";
+
+function detectLang(): Lang {
+  const stored = localStorage.getItem(STORAGE_KEY);
+  if (stored === "en" || stored === "nl" || stored === "es") return stored;
+  const nav = navigator.language.toLowerCase();
+  if (nav.startsWith("nl")) return "nl";
+  if (nav.startsWith("es")) return "es";
+  return "en";
+}
+
+type I18nContextValue = {
+  lang: Lang;
+  locale: string;
+  setLang: (lang: Lang) => void;
+  t: Translator;
+};
+
+const I18nContext = createContext<I18nContextValue | null>(null);
+
+export function I18nProvider({ children }: { children: ReactNode }) {
+  const [lang, setLang] = useState<Lang>(detectLang);
+
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEY, lang);
+    document.documentElement.lang = lang;
+  }, [lang]);
+
+  const value = useMemo<I18nContextValue>(() => {
+    const dict = dictionaries[lang];
+    const t: Translator = (key, params) => {
+      let text = dict[key] ?? en[key];
+      if (params) {
+        for (const [name, param] of Object.entries(params)) {
+          text = text.split(`{${name}}`).join(String(param));
+        }
+      }
+      return text;
+    };
+    return { lang, locale: intlLocales[lang], setLang, t };
+  }, [lang]);
+
+  return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>;
+}
+
+export function useI18n(): I18nContextValue {
+  const context = useContext(I18nContext);
+  if (!context) throw new Error("useI18n must be used within an I18nProvider");
+  return context;
+}
+
+// Intl abbreviations for nl/es end in a period ("jan.", "ene.") - strip it to match the compact UI.
+export function shortWeekday(date: Date, locale: string): string {
+  return new Intl.DateTimeFormat(locale, { weekday: "short" }).format(date).replace(/\.$/, "");
+}
+
+export function shortMonth(date: Date, locale: string): string {
+  return new Intl.DateTimeFormat(locale, { month: "short" }).format(date).replace(/\.$/, "");
+}
+
+// Difficulty values are stored in English ("easy"/"medium"/"hard"); translate known ones for display.
+export function difficultyLabel(t: Translator, difficulty?: string | null): string {
+  if (difficulty === "easy" || difficulty === "medium" || difficulty === "hard") {
+    return t(`difficulty.${difficulty}`);
+  }
+  return difficulty || t("difficulty.unknown");
+}
diff --git a/frontend/src/i18n/nl.ts b/frontend/src/i18n/nl.ts
new file mode 100644
index 0000000..a594e29
--- /dev/null
+++ b/frontend/src/i18n/nl.ts
@@ -0,0 +1,184 @@
+import { en } from "./en";
+
+export const nl: Record<keyof typeof en, string> = {
+  "common.loading": "Laden...",
+  "common.close": "Sluiten",
+  "common.cancel": "Annuleren",
+  "common.save": "Opslaan",
+  "common.saving": "Opslaan...",
+  "common.sending": "Versturen...",
+  "common.adding": "Toevoegen...",
+  "common.saveChanges": "Wijzigingen opslaan",
+  "common.cancelEdit": "Bewerken annuleren",
+  "common.edit": "Bewerken",
+  "common.delete": "Verwijderen",
+
+  "header.welcome": "Welkom, {name}!",
+  "header.tagline": "Houd je voorraad in voorraadkast, koelkast en vriezer bij en krijg receptideeën voordat ingrediënten over de datum gaan.",
+  "header.topSuggestion": "Topsuggestie",
+  "header.noSuggestion": "Voeg voorraad toe om aanbevelingen te krijgen",
+
+  "nav.inventory": "Voorraad",
+  "nav.mealPlanner": "Maaltijdplanner",
+
+  "menu.profile": "profielmenu",
+  "menu.menu": "menu",
+  "menu.language": "taal",
+  "menu.changePassword": "Wachtwoord wijzigen",
+  "menu.deleteAccount": "Account verwijderen",
+  "menu.lightMode": "Lichte modus",
+  "menu.darkMode": "Donkere modus",
+  "menu.invite": "Uitnodigen voor huishouden",
+  "menu.feedback": "Feedback sturen",
+  "menu.about": "Over",
+  "menu.logout": "Uitloggen",
+
+  "search.placeholder": "Zoek in voorraad en recepten...",
+  "dashboard.loading": "Je keukendashboard wordt geladen...",
+  "metrics.itemsInStock": "Artikelen op voorraad",
+  "metrics.recipes": "Recepten",
+  "metrics.expiringSoon": "Verloopt binnenkort",
+  "metrics.expired": "Al verlopen",
+
+  "recommendations.title": "Receptaanbevelingen",
+  "recommendations.match": "Match: {percentage}% ({matched}/{total})",
+  "recommendations.useSoon": "Gebruik snel: {items}",
+  "recommendations.notEnough": "Niet genoeg: {items}",
+  "recommendations.missing": "Ontbreekt: {items}",
+  "recommendations.cookNow": "Kook nu",
+  "recommendations.almostThere": "Bijna compleet",
+  "recommendations.needGroceries": "Boodschappen nodig",
+
+  "inventory.title": "Voorraad per locatie",
+  "inventory.all": "Alles",
+  "inventory.empty": "Nog geen artikelen op deze locatie.",
+  "inventory.status.expired": "Verlopen",
+  "inventory.status.expiring": "Verloopt bijna",
+  "inventory.status.fresh": "Vers",
+  "inventory.editItem": "Artikel bewerken",
+  "inventory.addItem": "Artikel toevoegen",
+  "inventory.form.name": "Artikelnaam",
+  "inventory.form.category": "Categorie",
+  "inventory.form.quantity": "Aantal",
+  "inventory.form.unit": "Eenheid",
+  "inventory.form.notes": "Notities (optioneel)",
+  "inventory.form.add": "Artikel toevoegen",
+  "inventory.error.add": "Kon artikel niet toevoegen. Controleer of de backend bereikbaar is.",
+  "inventory.error.update": "Kon artikel niet bijwerken. Probeer opnieuw.",
+  "inventory.error.delete": "Kon artikel niet verwijderen. Probeer opnieuw.",
+  "inventory.chart.title": "Voorraadverdeling",
+  "inventory.chart.empty": "Voeg een paar artikelen toe om de grafiek te zien.",
+
+  "pagination.itemsPerPage": "Artikelen per pagina",
+  "pagination.previous": "Vorige",
+  "pagination.next": "Volgende",
+  "pagination.page": "Pagina {current} / {total}",
+
+  "recipes.editTitle": "Recept bewerken",
+  "recipes.addTitle": "Recept toevoegen",
+  "recipes.form.name": "Receptnaam",
+  "recipes.form.cuisine": "Keuken",
+  "recipes.form.ingredientsPlaceholder": "Eén ingrediënt per regel:\n400 gram pasta\n3 tenen knoflook\n100 ml olijfolie",
+  "recipes.form.instructions": "Bereidingswijze",
+  "recipes.form.add": "Recept toevoegen",
+  "recipes.error.add": "Kon recept niet toevoegen. Controleer je invoer.",
+  "recipes.error.update": "Kon recept niet bijwerken. Probeer opnieuw.",
+  "recipes.error.delete": "Kon recept niet verwijderen. Probeer opnieuw.",
+  "recipes.library": "Receptenbibliotheek",
+  "recipes.noMatch": 'Geen recepten gevonden voor "{query}".',
+  "recipes.empty": "Nog geen recepten. Voeg je eerste toe.",
+  "recipes.unknownCuisine": "Onbekende keuken",
+
+  "difficulty.easy": "makkelijk",
+  "difficulty.medium": "gemiddeld",
+  "difficulty.hard": "moeilijk",
+  "difficulty.unknown": "onbekend",
+
+  "detail.servings": "Porties:",
+  "detail.baseServings": "(recept is voor {count})",
+  "detail.ingredients": "Ingrediënten",
+  "detail.steps": "Stap voor stap",
+  "detail.addBack": "Terugzetten",
+  "detail.skip": "Deze keer overslaan",
+  "detail.inventoryUpdated": "Voorraad bijgewerkt:",
+  "detail.notFoundInInventory": "Niet gevonden in voorraad:",
+  "detail.cooking": "Voorraad bijwerken...",
+  "detail.cooked": "Dit gekookt!",
+  "detail.skipHint": "Klik op × naast een ingrediënt hierboven om het deze keer over te slaan.",
+  "detail.error.cook": "Kon voorraad niet bijwerken. Probeer opnieuw.",
+
+  "invite.sent": "Uitnodiging verstuurd naar {email}.",
+  "invite.description": "Diegene krijgt een e-mail met een link om zich bij je huishouden aan te sluiten en dezelfde voorraad te zien.",
+  "invite.send": "Uitnodiging versturen",
+
+  "about.subtitle": "Voorraadkast-, koelkast- en vriezerbeheer",
+
+  "feedback.thanks": "Bedankt! Je feedback is verstuurd.",
+  "feedback.description": "Vertel ons wat kapot is, ontbreekt of beter kan. Feedback wordt anoniem verstuurd — je naam en e-mailadres worden niet meegestuurd.",
+  "feedback.placeholder": "Jouw feedback...",
+
+  "deleteAccount.warning": "Dit verwijdert je account permanent. Als je het enige lid van je huishouden bent, worden ook de voorraad, recepten en locaties permanent verwijderd — dit kan niet ongedaan worden gemaakt.",
+  "deleteAccount.typeToConfirm": "Typ DELETE om te bevestigen",
+  "deleteAccount.deleting": "Verwijderen...",
+  "deleteAccount.confirm": "Verwijder mijn account",
+
+  "form.email": "E-mailadres",
+  "form.currentPassword": "Huidig wachtwoord",
+  "form.newPassword": "Nieuw wachtwoord",
+  "form.confirmNewPassword": "Bevestig nieuw wachtwoord",
+  "form.passwordMismatch": "Wachtwoorden komen niet overeen.",
+
+  "changePassword.success": "Wachtwoord succesvol gewijzigd.",
+  "changePassword.wrongCurrent": "Huidig wachtwoord is onjuist.",
+
+  "auth.signIn": "Inloggen",
+  "auth.username": "Gebruikersnaam",
+  "auth.password": "Wachtwoord",
+  "auth.loginError": "Onjuiste gebruikersnaam of wachtwoord.",
+  "auth.signingIn": "Inloggen...",
+  "auth.forgotPassword": "Wachtwoord vergeten?",
+  "auth.createAccount": "Account aanmaken",
+  "auth.inviteInvalid": "Deze uitnodigingslink is ongeldig of verlopen. Je kunt hieronder alsnog je eigen huishouden aanmaken.",
+  "auth.joiningHousehold": 'Je sluit je aan bij "{household}".',
+  "auth.newHousehold": "Er wordt een nieuw huishouden voor je aangemaakt — daarna kun je anderen uitnodigen.",
+  "auth.firstName": "Voornaam",
+  "auth.lastName": "Achternaam",
+  "auth.passwordMin": "Wachtwoord (min. 8 tekens)",
+  "auth.confirmPassword": "Bevestig wachtwoord",
+  "auth.creatingAccount": "Account aanmaken...",
+  "auth.createAccountButton": "Account aanmaken",
+  "auth.backToSignIn": "Terug naar inloggen",
+  "auth.resetTitle": "Wachtwoord opnieuw instellen",
+  "auth.resetSent": "Als er een account bestaat voor dat e-mailadres, hebben we een link gestuurd om je wachtwoord opnieuw in te stellen.",
+  "auth.resetDescription": "Vul je e-mailadres in en we sturen je een link om je wachtwoord opnieuw in te stellen.",
+  "auth.sendResetLink": "Verstuur herstellink",
+  "auth.chooseNewPassword": "Kies een nieuw wachtwoord",
+  "auth.resetMissingToken": "Deze herstellink mist zijn token.",
+  "auth.resetSuccess": "Wachtwoord bijgewerkt. Je kunt nu inloggen met je nieuwe wachtwoord.",
+  "auth.newPasswordMin": "Nieuw wachtwoord (min. 8 tekens)",
+  "auth.saveNewPassword": "Nieuw wachtwoord opslaan",
+
+  "planner.title": "Maaltijdplan",
+  "planner.today": "Vandaag",
+  "planner.todayTag": "vandaag",
+  "planner.grocery": "Boodschappenlijst",
+  "planner.dropHere": "Laat hier los",
+  "planner.nothingPlanned": "Niets gepland",
+  "planner.dropRecipe": "Sleep een recept",
+  "planner.remove": "Verwijder {name}",
+  "planner.fewerServings": "Minder porties",
+  "planner.moreServings": "Meer porties",
+  "planner.recipes": "Recepten",
+  "planner.tapHint": "Tik op een recept om het te plannen",
+  "planner.dragHint": "Sleep een recept naar een dag, of tik erop om een dag te kiezen",
+  "planner.searchRecipes": "Zoek recepten...",
+  "planner.noRecipes": "Nog geen recepten. Voeg ze eerst toe op de voorraadpagina.",
+  "planner.noSearchMatch": "Geen recepten gevonden voor je zoekopdracht.",
+  "planner.wellStocked": "Je bent goed bevoorraad — niets te kopen!",
+  "planner.removeFromList": "Verwijder van lijst",
+  "planner.copied": "Gekopieerd!",
+  "planner.copy": "Kopiëren",
+  "planner.planMeal": "Maaltijd plannen",
+  "planner.meal": "maaltijd",
+  "planner.meals": "maaltijden"
+};
diff --git a/frontend/src/lib/recommendation.test.ts b/frontend/src/lib/recommendation.test.ts
index e88c65d..b135136 100644
--- a/frontend/src/lib/recommendation.test.ts
+++ b/frontend/src/lib/recommendation.test.ts
@@ -1,11 +1,11 @@
 import { describe, expect, it } from "vitest";
-import { recommendationLabel, topRecommendation } from "./recommendation";
+import { recommendationLabelKey, topRecommendation } from "./recommendation";
 
 describe("recommendation helpers", () => {
-  it("returns useful labels by match percentage", () => {
-    expect(recommendationLabel(95)).toBe("Cook now");
-    expect(recommendationLabel(70)).toBe("Almost there");
-    expect(recommendationLabel(20)).toBe("Need groceries");
+  it("returns useful label keys by match percentage", () => {
+    expect(recommendationLabelKey(95)).toBe("recommendations.cookNow");
+    expect(recommendationLabelKey(70)).toBe("recommendations.almostThere");
+    expect(recommendationLabelKey(20)).toBe("recommendations.needGroceries");
   });
 
   it("returns top recommendation by percentage", () => {
diff --git a/frontend/src/lib/recommendation.ts b/frontend/src/lib/recommendation.ts
index 98c165c..3b1ea2f 100644
--- a/frontend/src/lib/recommendation.ts
+++ b/frontend/src/lib/recommendation.ts
@@ -1,13 +1,14 @@
+import type { TranslationKey } from "../i18n";
 import { RecipeRecommendation } from "../types";
 
-export function recommendationLabel(matchPercentage: number): string {
+export function recommendationLabelKey(matchPercentage: number): TranslationKey {
   if (matchPercentage >= 90) {
-    return "Cook now";
+    return "recommendations.cookNow";
   }
   if (matchPercentage >= 60) {
-    return "Almost there";
+    return "recommendations.almostThere";
   }
-  return "Need groceries";
+  return "recommendations.needGroceries";
 }
 
 export function topRecommendation(
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 31b7285..4fae42e 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import App from "./App";
+import { I18nProvider } from "./i18n";
 import "./index.css";
 
 const queryClient = new QueryClient();
@@ -9,7 +10,9 @@ const queryClient = new QueryClient();
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
-      <App />
+      <I18nProvider>
+        <App />
+      </I18nProvider>
     </QueryClientProvider>
   </React.StrictMode>
 );
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index e72169c..5d7ab93 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -6,11 +6,13 @@ import MetricCard from "../components/MetricCard";
 import RecipeDetailModal from "../components/RecipeDetailModal";
 import RecipesSection from "../components/RecipesSection";
 import { useInventoryQuery, useLocationsQuery, useRecipesQuery, useRecommendationsQuery } from "../hooks/queries";
+import { useI18n } from "../i18n";
 import { isExpiring } from "../lib/inventory";
-import { recommendationLabel } from "../lib/recommendation";
+import { recommendationLabelKey } from "../lib/recommendation";
 import { Recipe } from "../types";
 
 export default function DashboardPage() {
+  const { t } = useI18n();
   const [searchQuery, setSearchQuery] = useState("");
   const [expiryFilter, setExpiryFilter] = useState<"expiring" | "expired" | null>(null);
   const [selectedRecipe, setSelectedRecipe] = useState<Recipe | null>(null);
@@ -42,7 +44,7 @@ export default function DashboardPage() {
           onChange={(e) => setSearchQuery(e.target.value)}
           onKeyDown={(e) => e.key === "Escape" && setSearchQuery("")}
           className="w-full rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/80 py-3 pl-11 pr-10 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 dark:placeholder:text-slate-500 focus:border-brand-600 focus:outline-none"
-          placeholder="Search inventory and recipes..."
+          placeholder={t("search.placeholder")}
         />
         {searchQuery && (
           <button
@@ -57,23 +59,23 @@ export default function DashboardPage() {
 
       {isLoading ? (
         <section className="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/80 p-6">
-          Loading your kitchen dashboard...
+          {t("dashboard.loading")}
         </section>
       ) : (
         <>
           <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-            <MetricCard icon={<Package className="h-5 w-5" />} label="Items in stock" value={inventory.length} />
-            <MetricCard icon={<ChefHat className="h-5 w-5" />} label="Recipes" value={recipes.length} />
+            <MetricCard icon={<Package className="h-5 w-5" />} label={t("metrics.itemsInStock")} value={inventory.length} />
+            <MetricCard icon={<ChefHat className="h-5 w-5" />} label={t("metrics.recipes")} value={recipes.length} />
             <MetricCard
               icon={<AlertTriangle className="h-5 w-5" />}
-              label="Expiring soon"
+              label={t("metrics.expiringSoon")}
               value={expiringCount}
               onClick={() => setExpiryFilter((f) => f === "expiring" ? null : "expiring")}
               active={expiryFilter === "expiring"}
             />
             <MetricCard
               icon={<Flame className="h-5 w-5" />}
-              label="Already expired"
+              label={t("metrics.expired")}
               value={expiredCount}
               onClick={() => setExpiryFilter((f) => f === "expired" ? null : "expired")}
               active={expiryFilter === "expired"}
@@ -89,7 +91,7 @@ export default function DashboardPage() {
           />
 
           <section className="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/80 p-6">
-            <h2 className="text-xl font-semibold">Recipe recommendations</h2>
+            <h2 className="text-xl font-semibold">{t("recommendations.title")}</h2>
             <div className="mt-4 grid gap-3 md:grid-cols-2 xl:grid-cols-3">
               {recommendations.map((recommendation) => (
                 <motion.div
@@ -109,26 +111,29 @@ export default function DashboardPage() {
                   <div className="flex items-center justify-between gap-2">
                     <p className="font-semibold text-slate-900 dark:text-white">{recommendation.recipe.name}</p>
                     <span className="rounded-full bg-brand-100 dark:bg-brand-600/25 px-2 py-1 text-xs text-brand-700 dark:text-brand-100">
-                      {recommendationLabel(recommendation.matchPercentage)}
+                      {t(recommendationLabelKey(recommendation.matchPercentage))}
                     </span>
                   </div>
                   <p className="mt-2 text-sm text-slate-600 dark:text-slate-300">
-                    Match: {recommendation.matchPercentage}% ({recommendation.matchedIngredients}/
-                    {recommendation.totalIngredients})
+                    {t("recommendations.match", {
+                      percentage: recommendation.matchPercentage,
+                      matched: recommendation.matchedIngredients,
+                      total: recommendation.totalIngredients
+                    })}
                   </p>
                   {recommendation.expiringIngredientsUsed.length > 0 && (
                     <p className="mt-2 text-xs text-amber-600 dark:text-amber-200">
-                      Use soon: {recommendation.expiringIngredientsUsed.join(", ")}
+                      {t("recommendations.useSoon", { items: recommendation.expiringIngredientsUsed.join(", ") })}
                     </p>
                   )}
                   {recommendation.insufficientIngredients?.length > 0 && (
                     <p className="mt-2 text-xs text-amber-600 dark:text-amber-300">
-                      Not enough: {recommendation.insufficientIngredients.join(", ")}
+                      {t("recommendations.notEnough", { items: recommendation.insufficientIngredients.join(", ") })}
                     </p>
                   )}
                   {recommendation.missingIngredients.length > 0 && (
                     <p className="mt-2 text-xs text-slate-500 dark:text-slate-400">
-                      Missing: {recommendation.missingIngredients.join(", ")}
+                      {t("recommendations.missing", { items: recommendation.missingIngredients.join(", ") })}
                     </p>
                   )}
                 </motion.div>
diff --git a/frontend/src/pages/MealPlanner.tsx b/frontend/src/pages/MealPlanner.tsx
index e9379f3..77f3f08 100644
--- a/frontend/src/pages/MealPlanner.tsx
+++ b/frontend/src/pages/MealPlanner.tsx
@@ -12,6 +12,7 @@ import {
 } from "@dnd-kit/core";
 import { ChevronLeft, ChevronRight, Check, Copy, GripVertical, Minus, Plus, Search, ShoppingCart, X } from "lucide-react";
 import { useInventoryQuery, useRecipesQuery } from "../hooks/queries";
+import { difficultyLabel, shortMonth, shortWeekday, useI18n, type Translator } from "../i18n";
 import { InventoryItem, Recipe } from "../types";
 
 // ─── Local types ────────────────────────────────────────────────────────────
@@ -27,8 +28,6 @@ type MealPlan = Record<string, PlannedMeal[]>; // key: YYYY-MM-DD
 
 // ─── Constants ───────────────────────────────────────────────────────────────
 
-const DAY_SHORT = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
-const MONTH_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 const STORAGE_KEY = "ons_meal_plan";
 
 // ─── Date helpers ────────────────────────────────────────────────────────────
@@ -54,11 +53,6 @@ function getWeekDays(offset: number): Date[] {
   });
 }
 
-function dayIndex(date: Date): number {
-  const dow = date.getDay();
-  return dow === 0 ? 6 : dow - 1; // 0 = Mon, 6 = Sun
-}
-
 // ─── Grocery helpers ─────────────────────────────────────────────────────────
 
 const HERB_SPICE_NAMES = new Set([
@@ -144,16 +138,17 @@ function buildGroceryList(
   return result.sort((a, b) => a.localeCompare(b));
 }
 
-function groceryText(items: string[], weekDays: Date[]): string {
+function groceryText(items: string[], weekDays: Date[], t: Translator, locale: string): string {
   const s = weekDays[0], e = weekDays[6];
-  const header = `Grocery list ${s.getDate()} ${MONTH_SHORT[s.getMonth()]} – ${e.getDate()} ${MONTH_SHORT[e.getMonth()]} ${e.getFullYear()}`;
-  if (items.length === 0) return `${header}\n\nYou're well stocked — nothing to buy!`;
+  const header = `${t("planner.grocery")} ${s.getDate()} ${shortMonth(s, locale)} – ${e.getDate()} ${shortMonth(e, locale)} ${e.getFullYear()}`;
+  if (items.length === 0) return `${header}\n\n${t("planner.wellStocked")}`;
   return `${header}\n\n${items.map((name) => `• ${name}`).join("\n")}`;
 }
 
 // ─── Draggable recipe card ────────────────────────────────────────────────────
 
 function DraggableRecipeCard({ recipe, onTap }: { recipe: Recipe; onTap: () => void }) {
+  const { t } = useI18n();
   const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
     id: `recipe-${recipe.id}`,
     data: { recipe },
@@ -176,7 +171,7 @@ function DraggableRecipeCard({ recipe, onTap }: { recipe: Recipe; onTap: () => v
           <p className="font-medium text-slate-900 dark:text-white text-sm leading-tight">{recipe.name}</p>
           {(recipe.cuisine || recipe.difficulty) && (
             <p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
-              {[recipe.cuisine, recipe.difficulty].filter(Boolean).join(" · ")}
+              {[recipe.cuisine, recipe.difficulty && difficultyLabel(t, recipe.difficulty)].filter(Boolean).join(" · ")}
             </p>
           )}
         </div>
@@ -208,6 +203,7 @@ function DroppableDayColumn({
   onRemoveMeal: (id: string) => void;
   onUpdateServings: (id: string, servings: number) => void;
 }) {
+  const { t, locale } = useI18n();
   const { setNodeRef, isOver } = useDroppable({ id: toDateKey(date) });
 
   return (
@@ -223,7 +219,7 @@ function DroppableDayColumn({
     >
       <div className={`shrink-0 px-2 py-2 border-b flex items-baseline gap-2 sm:block ${isToday ? "border-brand-400/30 dark:border-brand-600/30" : "border-slate-200 dark:border-slate-800"}`}>
         <p className="text-[10px] font-semibold uppercase tracking-widest text-slate-400 dark:text-slate-500">
-          {DAY_SHORT[dayIndex(date)]}
+          {shortWeekday(date, locale)}
         </p>
         <p className={`text-xl font-bold leading-none sm:mt-0.5 ${isToday ? "text-brand-600 dark:text-brand-400" : "text-slate-900 dark:text-white"}`}>
           {date.getDate()}
@@ -238,7 +234,7 @@ function DroppableDayColumn({
               <button
                 type="button"
                 onClick={() => onRemoveMeal(meal.id)}
-                aria-label={`Remove ${meal.recipeName}`}
+                aria-label={t("planner.remove", { name: meal.recipeName })}
                 className="shrink-0 rounded p-1 text-brand-500 dark:text-brand-300 sm:opacity-0 sm:group-hover:opacity-100 hover:bg-brand-200 dark:hover:bg-brand-500/30 transition"
               >
                 <X className="h-3 w-3" />
@@ -248,7 +244,7 @@ function DroppableDayColumn({
               <button
                 type="button"
                 onClick={() => onUpdateServings(meal.id, Math.max(1, meal.servings - 1))}
-                aria-label="Fewer servings"
+                aria-label={t("planner.fewerServings")}
                 className="rounded p-1 text-brand-600 dark:text-brand-300 hover:bg-brand-200 dark:hover:bg-brand-500/30 transition"
               >
                 <Minus className="h-3 w-3" />
@@ -259,7 +255,7 @@ function DroppableDayColumn({
               <button
                 type="button"
                 onClick={() => onUpdateServings(meal.id, meal.servings + 1)}
-                aria-label="More servings"
+                aria-label={t("planner.moreServings")}
                 className="rounded p-1 text-brand-600 dark:text-brand-300 hover:bg-brand-200 dark:hover:bg-brand-500/30 transition"
               >
                 <Plus className="h-3 w-3" />
@@ -269,13 +265,13 @@ function DroppableDayColumn({
         ))}
         {isOver && (
           <div className="rounded-lg border border-dashed border-brand-500/60 py-2 text-center text-[10px] text-brand-500 dark:text-brand-400">
-            Drop here
+            {t("planner.dropHere")}
           </div>
         )}
         {meals.length === 0 && !isOver && (
           <p className="text-[10px] text-slate-300 dark:text-slate-700 text-center pt-2 select-none">
-            <span className="sm:hidden">Nothing planned</span>
-            <span className="hidden sm:inline">Drop recipe</span>
+            <span className="sm:hidden">{t("planner.nothingPlanned")}</span>
+            <span className="hidden sm:inline">{t("planner.dropRecipe")}</span>
           </p>
         )}
       </div>
@@ -294,10 +290,11 @@ function GroceryModal({
   weekDays: Date[];
   onClose: () => void;
 }) {
+  const { t, locale } = useI18n();
   const [copied, setCopied] = useState(false);
   const [removed, setRemoved] = useState<Set<string>>(new Set());
   const visibleItems = items.filter((name) => !removed.has(name));
-  const text = groceryText(visibleItems, weekDays);
+  const text = groceryText(visibleItems, weekDays, t, locale);
 
   const removeItem = (name: string) => {
     setRemoved((prev) => new Set(prev).add(name));
@@ -324,9 +321,9 @@ function GroceryModal({
       <div className="w-full max-w-sm rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-6 flex flex-col max-h-[85vh]">
         <div className="flex items-start justify-between gap-4 shrink-0">
           <div>
-            <h3 className="text-xl font-semibold text-slate-900 dark:text-white">Grocery list</h3>
+            <h3 className="text-xl font-semibold text-slate-900 dark:text-white">{t("planner.grocery")}</h3>
             <p className="text-sm text-slate-500 dark:text-slate-400 mt-0.5">
-              {s.getDate()} {MONTH_SHORT[s.getMonth()]} – {e.getDate()} {MONTH_SHORT[e.getMonth()]} {e.getFullYear()}
+              {s.getDate()} {shortMonth(s, locale)} – {e.getDate()} {shortMonth(e, locale)} {e.getFullYear()}
             </p>
           </div>
           <button
@@ -334,13 +331,13 @@ function GroceryModal({
             onClick={onClose}
             className="rounded-md border border-slate-300 dark:border-slate-600 px-3 py-1 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800"
           >
-            Close
+            {t("common.close")}
           </button>
         </div>
 
         <div className="mt-4 flex-1 overflow-y-auto">
           {visibleItems.length === 0 ? (
-            <p className="text-sm text-emerald-600 dark:text-emerald-400">You're well stocked — nothing to buy!</p>
+            <p className="text-sm text-emerald-600 dark:text-emerald-400">{t("planner.wellStocked")}</p>
           ) : (
             <ul className="space-y-1.5">
               {visibleItems.map((name) => (
@@ -353,7 +350,7 @@ function GroceryModal({
                   <button
                     type="button"
                     onClick={() => removeItem(name)}
-                    title="Remove from list"
+                    title={t("planner.removeFromList")}
                     className="shrink-0 rounded p-1 text-slate-400 dark:text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 hover:text-slate-700 dark:hover:text-slate-200 transition"
                   >
                     <X className="h-3.5 w-3.5" />
@@ -382,7 +379,7 @@ function GroceryModal({
             className="inline-flex items-center justify-center gap-2 rounded-lg border border-slate-300 dark:border-slate-600 px-4 py-2 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition"
           >
             {copied ? <Check className="h-4 w-4 text-emerald-500" /> : <Copy className="h-4 w-4" />}
-            {copied ? "Copied!" : "Copy"}
+            {copied ? t("planner.copied") : t("planner.copy")}
           </button>
         </div>
       </div>
@@ -407,18 +404,19 @@ function DayPickerModal({
   onPick: (dateKey: string) => void;
   onClose: () => void;
 }) {
+  const { t, locale } = useI18n();
   return (
     <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-black/60 dark:bg-slate-950/80 p-4">
       <div className="w-full max-w-sm rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-5 max-h-[85vh] overflow-y-auto">
         <div className="flex items-start justify-between gap-4">
           <div className="min-w-0">
-            <h3 className="text-lg font-semibold text-slate-900 dark:text-white">Plan meal</h3>
+            <h3 className="text-lg font-semibold text-slate-900 dark:text-white">{t("planner.planMeal")}</h3>
             <p className="text-sm text-slate-500 dark:text-slate-400 mt-0.5 truncate">{recipe.name}</p>
           </div>
           <button
             type="button"
             onClick={onClose}
-            aria-label="Close"
+            aria-label={t("common.close")}
             className="shrink-0 rounded-md border border-slate-300 dark:border-slate-600 p-1.5 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800"
           >
             <X className="h-4 w-4" />
@@ -441,12 +439,12 @@ function DayPickerModal({
                 }`}
               >
                 <span className="font-medium">
-                  {DAY_SHORT[dayIndex(date)]} {date.getDate()} {MONTH_SHORT[date.getMonth()]}
-                  {isToday && <span className="ml-2 text-xs font-normal">today</span>}
+                  {shortWeekday(date, locale)} {date.getDate()} {shortMonth(date, locale)}
+                  {isToday && <span className="ml-2 text-xs font-normal">{t("planner.todayTag")}</span>}
                 </span>
                 {count > 0 && (
                   <span className="text-xs text-slate-500 dark:text-slate-400">
-                    {count} {count === 1 ? "meal" : "meals"}
+                    {count} {count === 1 ? t("planner.meal") : t("planner.meals")}
                   </span>
                 )}
               </button>
@@ -461,6 +459,7 @@ function DayPickerModal({
 // ─── Main page component ──────────────────────────────────────────────────────
 
 export default function MealPlannerPage() {
+  const { t, locale } = useI18n();
   const recipesQuery = useRecipesQuery();
   const inventoryQuery = useInventoryQuery();
   const recipes = useMemo(() => recipesQuery.data ?? [], [recipesQuery.data]);
@@ -561,8 +560,8 @@ export default function MealPlannerPage() {
   const weekLabel = (() => {
     const s = weekDays[0], e = weekDays[6];
     return s.getMonth() === e.getMonth()
-      ? `${MONTH_SHORT[s.getMonth()]} ${s.getDate()}–${e.getDate()}, ${s.getFullYear()}`
-      : `${MONTH_SHORT[s.getMonth()]} ${s.getDate()} – ${MONTH_SHORT[e.getMonth()]} ${e.getDate()}, ${e.getFullYear()}`;
+      ? `${shortMonth(s, locale)} ${s.getDate()}–${e.getDate()}, ${s.getFullYear()}`
+      : `${shortMonth(s, locale)} ${s.getDate()} – ${shortMonth(e, locale)} ${e.getDate()}, ${e.getFullYear()}`;
   })();
 
   return (
@@ -572,7 +571,7 @@ export default function MealPlannerPage() {
         {/* ── Calendar ── */}
         <article className="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/80 p-6">
           <div className="flex flex-wrap items-center gap-3 justify-between">
-            <h2 className="text-xl font-semibold">Meal plan</h2>
+            <h2 className="text-xl font-semibold">{t("planner.title")}</h2>
 
             <div className="flex items-center gap-1.5">
               <button
@@ -596,7 +595,7 @@ export default function MealPlannerPage() {
                   onClick={() => setWeekOffset(0)}
                   className="rounded-lg border border-slate-300 dark:border-slate-700 px-3 py-1.5 text-xs text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition"
                 >
-                  Today
+                  {t("planner.today")}
                 </button>
               )}
             </div>
@@ -607,7 +606,7 @@ export default function MealPlannerPage() {
               className="inline-flex items-center gap-2 rounded-lg bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-500 transition"
             >
               <ShoppingCart className="h-4 w-4" />
-              Grocery list
+              {t("planner.grocery")}
             </button>
           </div>
 
@@ -632,10 +631,10 @@ export default function MealPlannerPage() {
 
         {/* ── Recipe panel ── */}
         <article className="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/80 p-6">
-          <h2 className="text-xl font-semibold">Recipes</h2>
+          <h2 className="text-xl font-semibold">{t("planner.recipes")}</h2>
           <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">
-            <span className="sm:hidden">Tap a recipe to plan it</span>
-            <span className="hidden sm:inline">Drag a recipe onto a day, or tap one to pick a day</span>
+            <span className="sm:hidden">{t("planner.tapHint")}</span>
+            <span className="hidden sm:inline">{t("planner.dragHint")}</span>
           </p>
 
           <div className="relative mt-4">
@@ -644,7 +643,7 @@ export default function MealPlannerPage() {
               value={recipeSearch}
               onChange={(e) => setRecipeSearch(e.target.value)}
               className="w-full rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 py-2 pl-9 pr-8 text-base sm:text-sm text-slate-900 dark:text-slate-100 placeholder:text-slate-400 dark:placeholder:text-slate-500 focus:border-brand-600 focus:outline-none"
-              placeholder="Search recipes..."
+              placeholder={t("planner.searchRecipes")}
             />
             {recipeSearch && (
               <button
@@ -660,10 +659,10 @@ export default function MealPlannerPage() {
           <div className="mt-3 space-y-2 overflow-y-auto max-h-[60vh]">
             {recipes.length === 0 ? (
               <p className="text-sm text-slate-500 dark:text-slate-400 py-6 text-center">
-                No recipes yet. Add some on the Inventory page first.
+                {t("planner.noRecipes")}
               </p>
             ) : filteredRecipes.length === 0 ? (
-              <p className="text-sm text-slate-500 dark:text-slate-400 py-6 text-center">No recipes match your search.</p>
+              <p className="text-sm text-slate-500 dark:text-slate-400 py-6 text-center">{t("planner.noSearchMatch")}</p>
             ) : (
               filteredRecipes.map((recipe) => (
                 <DraggableRecipeCard key={recipe.id} recipe={recipe} onTap={() => handleRecipeTap(recipe)} />
diff --git a/frontend/src/pages/auth.tsx b/frontend/src/pages/auth.tsx
index b1a9f12..81ac8c6 100644
--- a/frontend/src/pages/auth.tsx
+++ b/frontend/src/pages/auth.tsx
@@ -8,13 +8,18 @@ import {
   register,
   resetPassword
 } from "../api/client";
+import LanguageSwitcher from "../components/LanguageSwitcher";
+import { useI18n } from "../i18n";
 import { inputClass } from "../lib/ui";
 
 function AuthShell({ title, children }: { title: string; children: ReactNode }) {
   return (
     <div className="flex min-h-screen items-center justify-center px-4">
       <div className="w-full max-w-sm rounded-2xl border border-slate-200 dark:border-slate-800 bg-white/90 dark:bg-slate-900/80 p-8 shadow-glow">
-        <p className="text-sm uppercase tracking-[0.2em] text-brand-600 dark:text-brand-100">ONS Inventory</p>
+        <div className="flex items-center justify-between gap-3">
+          <p className="text-sm uppercase tracking-[0.2em] text-brand-600 dark:text-brand-100">ONS Inventory</p>
+          <LanguageSwitcher />
+        </div>
         <h1 className="mt-2 text-2xl font-semibold text-slate-900 dark:text-white">{title}</h1>
         {children}
       </div>
@@ -31,6 +36,7 @@ export function LoginPage({
   onShowRegister: () => void;
   onShowForgotPassword: () => void;
 }) {
+  const { t } = useI18n();
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
 
@@ -45,7 +51,7 @@ export function LoginPage({
   };
 
   return (
-    <AuthShell title="Sign in">
+    <AuthShell title={t("auth.signIn")}>
       <form className="mt-6 grid gap-4" onSubmit={handleSubmit}>
         <input
           required
@@ -53,7 +59,7 @@ export function LoginPage({
           value={username}
           onChange={(e) => setUsername(e.target.value)}
           className={inputClass}
-          placeholder="Username"
+          placeholder={t("auth.username")}
         />
         <input
           required
@@ -61,25 +67,25 @@ export function LoginPage({
           value={password}
           onChange={(e) => setPassword(e.target.value)}
           className={inputClass}
-          placeholder="Password"
+          placeholder={t("auth.password")}
         />
         {loginMutation.isError && (
-          <p className="text-sm text-rose-600 dark:text-rose-300">Incorrect username or password.</p>
+          <p className="text-sm text-rose-600 dark:text-rose-300">{t("auth.loginError")}</p>
         )}
         <button
           type="submit"
           disabled={loginMutation.isPending}
           className="rounded-lg bg-brand-600 px-4 py-2 font-medium text-white transition hover:bg-brand-500 disabled:opacity-50"
         >
-          {loginMutation.isPending ? "Signing in..." : "Sign in"}
+          {loginMutation.isPending ? t("auth.signingIn") : t("auth.signIn")}
         </button>
       </form>
       <div className="mt-4 flex items-center justify-between text-sm">
         <button type="button" onClick={onShowForgotPassword} className="text-brand-600 dark:text-brand-100 hover:underline">
-          Forgot password?
+          {t("auth.forgotPassword")}
         </button>
         <button type="button" onClick={onShowRegister} className="text-brand-600 dark:text-brand-100 hover:underline">
-          Create an account
+          {t("auth.createAccount")}
         </button>
       </div>
     </AuthShell>
@@ -95,6 +101,7 @@ export function RegisterPage({
   onAuthenticated: (data: AuthResponse) => void;
   onBackToLogin: () => void;
 }) {
+  const { t } = useI18n();
   const [username, setUsername] = useState("");
   const [email, setEmail] = useState("");
   const [firstName, setFirstName] = useState("");
@@ -131,17 +138,17 @@ export function RegisterPage({
   };
 
   return (
-    <AuthShell title="Create an account">
+    <AuthShell title={t("auth.createAccount")}>
       {inviteToken && invitePreview && (
         <p className="mt-3 rounded-lg bg-brand-100 dark:bg-brand-600/20 px-3 py-2 text-sm text-brand-800 dark:text-brand-50">
           {invitePreview === "invalid"
-            ? "This invite link is invalid or has expired. You can still create your own household below."
-            : `You're joining "${invitePreview.householdName}".`}
+            ? t("auth.inviteInvalid")
+            : t("auth.joiningHousehold", { household: invitePreview.householdName })}
         </p>
       )}
       {!inviteToken && (
         <p className="mt-3 text-sm text-slate-600 dark:text-slate-300">
-          A new household will be created for you — you can invite others to it afterward.
+          {t("auth.newHousehold")}
         </p>
       )}
       <form className="mt-4 grid gap-3" onSubmit={handleSubmit}>
@@ -152,14 +159,14 @@ export function RegisterPage({
             value={firstName}
             onChange={(e) => setFirstName(e.target.value)}
             className={inputClass}
-            placeholder="First name"
+            placeholder={t("auth.firstName")}
           />
           <input
             required
             value={lastName}
             onChange={(e) => setLastName(e.target.value)}
             className={inputClass}
-            placeholder="Last name"
+            placeholder={t("auth.lastName")}
           />
         </div>
         <input
@@ -167,7 +174,7 @@ export function RegisterPage({
           value={username}
           onChange={(e) => setUsername(e.target.value)}
           className={inputClass}
-          placeholder="Username"
+          placeholder={t("auth.username")}
         />
         <input
           required
@@ -177,7 +184,7 @@ export function RegisterPage({
           value={email}
           onChange={(e) => setEmail(e.target.value)}
           className={inputClass}
-          placeholder="Email address"
+          placeholder={t("form.email")}
         />
         <input
           required
@@ -185,7 +192,7 @@ export function RegisterPage({
           value={password}
           onChange={(e) => setPassword(e.target.value)}
           className={inputClass}
-          placeholder="Password (min. 8 characters)"
+          placeholder={t("auth.passwordMin")}
         />
         <input
           required
@@ -193,9 +200,9 @@ export function RegisterPage({
           value={confirmPassword}
           onChange={(e) => setConfirmPassword(e.target.value)}
           className={`${inputClass} ${mismatch ? "border-rose-500 bg-rose-50 dark:bg-rose-950/30" : ""}`}
-          placeholder="Confirm password"
+          placeholder={t("auth.confirmPassword")}
         />
-        {mismatch && <p className="text-sm text-rose-600 dark:text-rose-300">Passwords do not match.</p>}
+        {mismatch && <p className="text-sm text-rose-600 dark:text-rose-300">{t("form.passwordMismatch")}</p>}
         {registerMutation.isError && (
           <p className="text-sm text-rose-600 dark:text-rose-300">{registerMutation.error.message}</p>
         )}
@@ -204,17 +211,18 @@ export function RegisterPage({
           disabled={registerMutation.isPending || mismatch}
           className="rounded-lg bg-brand-600 px-4 py-2 font-medium text-white transition hover:bg-brand-500 disabled:opacity-50"
         >
-          {registerMutation.isPending ? "Creating account..." : "Create account"}
+          {registerMutation.isPending ? t("auth.creatingAccount") : t("auth.createAccountButton")}
         </button>
       </form>
       <button type="button" onClick={onBackToLogin} className="mt-4 text-sm text-brand-600 dark:text-brand-100 hover:underline">
-        Back to sign in
+        {t("auth.backToSignIn")}
       </button>
     </AuthShell>
   );
 }
 
 export function ForgotPasswordPage({ onBackToLogin }: { onBackToLogin: () => void }) {
+  const { t } = useI18n();
   const [email, setEmail] = useState("");
 
   const forgotPasswordMutation = useMutation({
@@ -227,15 +235,15 @@ export function ForgotPasswordPage({ onBackToLogin }: { onBackToLogin: () => voi
   };
 
   return (
-    <AuthShell title="Reset your password">
+    <AuthShell title={t("auth.resetTitle")}>
       {forgotPasswordMutation.isSuccess ? (
         <p className="mt-4 text-sm text-slate-600 dark:text-slate-300">
-          If an account exists for that email, we've sent a link to reset your password.
+          {t("auth.resetSent")}
         </p>
       ) : (
         <form className="mt-4 grid gap-3" onSubmit={handleSubmit}>
           <p className="text-sm text-slate-600 dark:text-slate-300">
-            Enter your email and we'll send you a link to reset your password.
+            {t("auth.resetDescription")}
           </p>
           <input
             required
@@ -246,25 +254,26 @@ export function ForgotPasswordPage({ onBackToLogin }: { onBackToLogin: () => voi
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             className={inputClass}
-            placeholder="Email address"
+            placeholder={t("form.email")}
           />
           <button
             type="submit"
             disabled={forgotPasswordMutation.isPending}
             className="rounded-lg bg-brand-600 px-4 py-2 font-medium text-white transition hover:bg-brand-500 disabled:opacity-50"
           >
-            {forgotPasswordMutation.isPending ? "Sending..." : "Send reset link"}
+            {forgotPasswordMutation.isPending ? t("common.sending") : t("auth.sendResetLink")}
           </button>
         </form>
       )}
       <button type="button" onClick={onBackToLogin} className="mt-4 text-sm text-brand-600 dark:text-brand-100 hover:underline">
-        Back to sign in
+        {t("auth.backToSignIn")}
       </button>
     </AuthShell>
   );
 }
 
 export function ResetPasswordPage({ token, onBackToLogin }: { token: string | null; onBackToLogin: () => void }) {
+  const { t } = useI18n();
   const [newPassword, setNewPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
   const mismatch = confirmPassword.length > 0 && newPassword !== confirmPassword;
@@ -280,12 +289,12 @@ export function ResetPasswordPage({ token, onBackToLogin }: { token: string | nu
   };
 
   return (
-    <AuthShell title="Choose a new password">
+    <AuthShell title={t("auth.chooseNewPassword")}>
       {!token ? (
-        <p className="mt-4 text-sm text-rose-600 dark:text-rose-300">This reset link is missing its token.</p>
+        <p className="mt-4 text-sm text-rose-600 dark:text-rose-300">{t("auth.resetMissingToken")}</p>
       ) : resetPasswordMutation.isSuccess ? (
         <p className="mt-4 text-sm text-emerald-600 dark:text-emerald-300">
-          Password updated. You can now sign in with your new password.
+          {t("auth.resetSuccess")}
         </p>
       ) : (
         <form className="mt-4 grid gap-3" onSubmit={handleSubmit}>
@@ -296,7 +305,7 @@ export function ResetPasswordPage({ token, onBackToLogin }: { token: string | nu
             value={newPassword}
             onChange={(e) => setNewPassword(e.target.value)}
             className={inputClass}
-            placeholder="New password (min. 8 characters)"
+            placeholder={t("auth.newPasswordMin")}
           />
           <input
             required
@@ -304,9 +313,9 @@ export function ResetPasswordPage({ token, onBackToLogin }: { token: string | nu
             value={confirmPassword}
             onChange={(e) => setConfirmPassword(e.target.value)}
             className={`${inputClass} ${mismatch ? "border-rose-500 bg-rose-50 dark:bg-rose-950/30" : ""}`}
-            placeholder="Confirm new password"
+            placeholder={t("form.confirmNewPassword")}
           />
-          {mismatch && <p className="text-sm text-rose-600 dark:text-rose-300">Passwords do not match.</p>}
+          {mismatch && <p className="text-sm text-rose-600 dark:text-rose-300">{t("form.passwordMismatch")}</p>}
           {resetPasswordMutation.isError && (
             <p className="text-sm text-rose-600 dark:text-rose-300">{resetPasswordMutation.error.message}</p>
           )}
@@ -315,12 +324,12 @@ export function ResetPasswordPage({ token, onBackToLogin }: { token: string | nu
             disabled={resetPasswordMutation.isPending || mismatch}
             className="rounded-lg bg-brand-600 px-4 py-2 font-medium text-white transition hover:bg-brand-500 disabled:opacity-50"
           >
-            {resetPasswordMutation.isPending ? "Saving..." : "Save new password"}
+            {resetPasswordMutation.isPending ? t("common.saving") : t("auth.saveNewPassword")}
           </button>
         </form>
       )}
       <button type="button" onClick={onBackToLogin} className="mt-4 text-sm text-brand-600 dark:text-brand-100 hover:underline">
-        Back to sign in
+        {t("auth.backToSignIn")}
       </button>
     </AuthShell>
   );