diff --git a/react-app/src/components/invoices/InvoiceTable.tsx b/react-app/src/components/invoices/InvoiceTable.tsx
index b618aa0..664d6a4 100644
--- a/react-app/src/components/invoices/InvoiceTable.tsx
+++ b/react-app/src/components/invoices/InvoiceTable.tsx
@@ -12,9 +12,11 @@ import {
 
 type InvoiceTableProps = {
     invoices: Invoice[]
+    onDeleteInvoice?: (id: number) => void
+    onEditInvoice?: (invoice: Invoice) => void
 }
 
-function InvoiceTable({ invoices }: InvoiceTableProps) {
+function InvoiceTable({ invoices, onDeleteInvoice, onEditInvoice }: InvoiceTableProps) {
     return (
         <Table data-testid="invoice-table">
             <TableHeader>
@@ -24,6 +26,7 @@ function InvoiceTable({ invoices }: InvoiceTableProps) {
                     <TableHead className="hidden md:table-cell">Status</TableHead>
                     <TableHead className="hidden lg:table-cell">Due Date</TableHead>
                     <TableHead className="text-right">Amount</TableHead>
+                    <TableHead className="text-right">Actions</TableHead>
                 </TableRow>
             </TableHeader>
             <TableBody>
@@ -44,6 +47,24 @@ function InvoiceTable({ invoices }: InvoiceTableProps) {
                         <TableCell className="text-right font-heading font-medium text-primary">
                             {formatCurrency(invoice.amount)}
                         </TableCell>
+                        <TableCell className="text-right">
+                            <div className="flex justify-end gap-2">
+                                <button
+                                    className="rounded-sm border border-border px-2.5 py-1 text-xs font-semibold text-secondary transition-colors hover:border-primary hover:text-primary"
+                                    type="button"
+                                    onClick={() => onEditInvoice?.(invoice)}
+                                >
+                                    Edit
+                                </button>
+                                <button
+                                    className="rounded-sm border border-danger-text/30 px-2.5 py-1 text-xs font-semibold text-danger-text transition-colors hover:bg-danger-text hover:text-white"
+                                    type="button"
+                                    onClick={() => onDeleteInvoice?.(invoice.id)}
+                                >
+                                    Delete
+                                </button>
+                            </div>
+                        </TableCell>
                     </TableRow>
                 ))}
             </TableBody>
diff --git a/react-app/src/hooks/useInvoices.ts b/react-app/src/hooks/useInvoices.ts
index 5747580..4a0f8c4 100644
--- a/react-app/src/hooks/useInvoices.ts
+++ b/react-app/src/hooks/useInvoices.ts
@@ -1,33 +1,94 @@
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { mockInvoices } from '../data/invoices'
-import { fetchInvoices } from '../services/invoices'
-import type { Invoice } from '../types/invoice'
+import {
+    createInvoice,
+    deleteInvoice,
+    fetchInvoices,
+    updateInvoice,
+} from '../services/invoices'
+import type { CreateInvoiceInput, Invoice, UpdateInvoiceInput } from '../types/invoice'
 
 export function useInvoices() {
     const [invoices, setInvoices] = useState<Invoice[]>(mockInvoices)
     const [isLoading, setIsLoading] = useState(true)
     const [error, setError] = useState<string | null>(null)
+    const [mutationError, setMutationError] = useState<string | null>(null)
+
+    const loadInvoices = useCallback(async () => {
+        setIsLoading(true)
+        try {
+            const data = await fetchInvoices()
+            setInvoices(data)
+            setError(null)
+        } catch {
+            setError('Unable to load invoice data.')
+        } finally {
+            setIsLoading(false)
+        }
+    }, [])
 
     useEffect(() => {
-        let isMounted = true
-
-        const load = async () => {
-            try {
-                const data = await fetchInvoices()
-                if (isMounted) setInvoices(data)
-            } catch {
-                if (isMounted) setError('Unable to load invoice data.')
-            } finally {
-                if (isMounted) setIsLoading(false)
-            }
+        loadInvoices()
+    }, [loadInvoices])
+
+    const addInvoice = async (invoice: CreateInvoiceInput) => {
+        const optimisticInvoice = {
+            ...invoice,
+            id: Math.max(...invoices.map((current) => current.id), 0) + 1,
+        }
+
+        setInvoices((current) => [...current, optimisticInvoice])
+        setMutationError(null)
+
+        try {
+            const savedInvoice = await createInvoice(invoice)
+            setInvoices((current) =>
+                current.map((existing) =>
+                    existing.id === optimisticInvoice.id ? savedInvoice : existing,
+                ),
+            )
+        } catch {
+            setMutationError('API unavailable. Invoice was added locally for this session.')
+        }
+    }
+
+    const editInvoice = async (id: number, invoice: UpdateInvoiceInput) => {
+        setInvoices((current) =>
+            current.map((existing) =>
+                existing.id === id ? { ...existing, ...invoice } : existing,
+            ),
+        )
+        setMutationError(null)
+
+        try {
+            const savedInvoice = await updateInvoice(id, invoice)
+            setInvoices((current) =>
+                current.map((existing) => (existing.id === id ? savedInvoice : existing)),
+            )
+        } catch {
+            setMutationError('API unavailable. Invoice changes were kept locally for this session.')
         }
+    }
 
-        load()
+    const removeInvoice = async (id: number) => {
+        setInvoices((current) => current.filter((invoice) => invoice.id !== id))
+        setMutationError(null)
 
-        return () => {
-            isMounted = false
+        try {
+            await deleteInvoice(id)
+        } catch {
+            setMutationError('API unavailable. Invoice was deleted locally for this session.')
         }
-    }, []) // fetchInvoices is a stable module-level import; effect runs once on mount
+    }
 
-    return { invoices, isLoading, error }
+    return {
+        invoices,
+        isLoading,
+        error,
+        mutationError,
+        refreshInvoices: loadInvoices,
+        addInvoice,
+        editInvoice,
+        removeInvoice,
+    }
 }
diff --git a/react-app/src/pages/Invoices.tsx b/react-app/src/pages/Invoices.tsx
index 8ec484c..c2eea65 100644
--- a/react-app/src/pages/Invoices.tsx
+++ b/react-app/src/pages/Invoices.tsx
@@ -1,19 +1,62 @@
 import { MagnifyingGlass } from '@phosphor-icons/react'
+import type { FormEvent } from 'react'
+import { useState } from 'react'
 import InvoiceTable from '../components/invoices/InvoiceTable'
 import PageHeader from '../components/PageHeader'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../components/ui/card'
 import { useInvoices } from '../hooks/useInvoices'
 import { useInvoiceFilters } from '../hooks/useInvoiceFilters'
-import type { Invoice } from '../types/invoice'
+import type { CreateInvoiceInput, Invoice, InvoiceStatus } from '../types/invoice'
+
+type InvoiceFormState = {
+    amount: string
+    client: string
+    dueDate: string
+    status: InvoiceStatus
+}
 
 type InvoicesContentProps = {
     error: string | null
     isLoading: boolean
     invoices: Invoice[]
     filteredInvoices: Invoice[]
+    onDeleteInvoice: (id: number) => void
+    onEditInvoice: (invoice: Invoice) => void
 }
 
-function InvoicesContent({ error, isLoading, invoices, filteredInvoices }: InvoicesContentProps) {
+const emptyForm: InvoiceFormState = {
+    amount: '',
+    client: '',
+    dueDate: '',
+    status: 'pending',
+}
+
+function toFormState(invoice: Invoice): InvoiceFormState {
+    return {
+        amount: String(invoice.amount),
+        client: invoice.client,
+        dueDate: invoice.dueDate,
+        status: invoice.status,
+    }
+}
+
+function toInvoiceInput(form: InvoiceFormState): CreateInvoiceInput {
+    return {
+        amount: Number(form.amount),
+        client: form.client.trim(),
+        dueDate: form.dueDate,
+        status: form.status,
+    }
+}
+
+function InvoicesContent({
+    error,
+    isLoading,
+    invoices,
+    filteredInvoices,
+    onDeleteInvoice,
+    onEditInvoice,
+}: InvoicesContentProps) {
     if (error && invoices.length === 0) {
         return <p className="text-sm text-danger-text">{error}</p>
     }
@@ -23,20 +66,164 @@ function InvoicesContent({ error, isLoading, invoices, filteredInvoices }: Invoi
     if (filteredInvoices.length === 0) {
         return <p className="text-sm text-muted">No invoices match your filters.</p>
     }
-    return <InvoiceTable invoices={filteredInvoices} />
+    return (
+        <InvoiceTable
+            invoices={filteredInvoices}
+            onDeleteInvoice={onDeleteInvoice}
+            onEditInvoice={onEditInvoice}
+        />
+    )
 }
 
 function Invoices() {
-    const { invoices, isLoading, error } = useInvoices()
+    const { invoices, isLoading, error, mutationError, addInvoice, editInvoice, removeInvoice } =
+        useInvoices()
     const { searchValue, setSearchValue, statusFilter, setStatusFilter, filteredInvoices } =
         useInvoiceFilters(invoices)
+    const [form, setForm] = useState<InvoiceFormState>(emptyForm)
+    const [editingInvoice, setEditingInvoice] = useState<Invoice | null>(null)
 
     const paidCount = invoices.filter((inv) => inv.status === 'paid').length
     const overdueCount = invoices.filter((inv) => inv.status === 'overdue').length
 
+    const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+        event.preventDefault()
+        const invoiceInput = toInvoiceInput(form)
+
+        if (editingInvoice) {
+            await editInvoice(editingInvoice.id, invoiceInput)
+            setEditingInvoice(null)
+        } else {
+            await addInvoice(invoiceInput)
+        }
+
+        setForm(emptyForm)
+    }
+
+    const handleDelete = (id: number) => {
+        if (editingInvoice?.id === id) {
+            setEditingInvoice(null)
+            setForm(emptyForm)
+        }
+        removeInvoice(id)
+    }
+
+    const handleEdit = (invoice: Invoice) => {
+        setEditingInvoice(invoice)
+        setForm(toFormState(invoice))
+    }
+
+    const handleCancelEdit = () => {
+        setEditingInvoice(null)
+        setForm(emptyForm)
+    }
+
     return (
         <section className="space-y-10" data-testid="invoices-page">
             <PageHeader title="Invoices" subtitle="Invoice list and status tracking." />
+            <Card>
+                <CardHeader>
+                    <CardTitle>{editingInvoice ? `Edit invoice #${editingInvoice.id}` : 'Add invoice'}</CardTitle>
+                    <CardDescription>
+                        Enter client, amount, status, and due date for invoice tracking.
+                    </CardDescription>
+                </CardHeader>
+                <CardContent>
+                    <form className="grid gap-4 md:grid-cols-2 xl:grid-cols-5" onSubmit={handleSubmit}>
+                        <div className="space-y-1.5 xl:col-span-2">
+                            <label className="block text-xs font-semibold uppercase tracking-[0.1em] text-muted">
+                                Client
+                            </label>
+                            <input
+                                required
+                                className="w-full rounded-sm border border-border bg-surface px-3 py-2 text-sm text-primary placeholder:text-muted focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary transition-colors"
+                                data-testid="invoice-client-input"
+                                type="text"
+                                value={form.client}
+                                onChange={(event) =>
+                                    setForm((current) => ({ ...current, client: event.target.value }))
+                                }
+                                placeholder="Client name"
+                            />
+                        </div>
+                        <div className="space-y-1.5">
+                            <label className="block text-xs font-semibold uppercase tracking-[0.1em] text-muted">
+                                Amount
+                            </label>
+                            <input
+                                required
+                                min="0.01"
+                                step="0.01"
+                                className="w-full rounded-sm border border-border bg-surface px-3 py-2 text-sm text-primary placeholder:text-muted focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary transition-colors"
+                                data-testid="invoice-amount-input"
+                                type="number"
+                                value={form.amount}
+                                onChange={(event) =>
+                                    setForm((current) => ({ ...current, amount: event.target.value }))
+                                }
+                                placeholder="0.00"
+                            />
+                        </div>
+                        <div className="space-y-1.5">
+                            <label className="block text-xs font-semibold uppercase tracking-[0.1em] text-muted">
+                                Due date
+                            </label>
+                            <input
+                                required
+                                className="w-full rounded-sm border border-border bg-surface px-3 py-2 text-sm text-primary focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary transition-colors"
+                                data-testid="invoice-due-date-input"
+                                type="date"
+                                value={form.dueDate}
+                                onChange={(event) =>
+                                    setForm((current) => ({ ...current, dueDate: event.target.value }))
+                                }
+                            />
+                        </div>
+                        <div className="space-y-1.5">
+                            <label className="block text-xs font-semibold uppercase tracking-[0.1em] text-muted">
+                                Status
+                            </label>
+                            <select
+                                className="w-full rounded-sm border border-border bg-surface px-3 py-2 text-sm text-primary focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary transition-colors"
+                                data-testid="invoice-form-status"
+                                value={form.status}
+                                onChange={(event) =>
+                                    setForm((current) => ({
+                                        ...current,
+                                        status: event.target.value as InvoiceStatus,
+                                    }))
+                                }
+                            >
+                                <option value="paid">Paid</option>
+                                <option value="pending">Pending</option>
+                                <option value="overdue">Overdue</option>
+                            </select>
+                        </div>
+                        <div className="flex flex-wrap items-end gap-2 md:col-span-2 xl:col-span-5">
+                            <button
+                                className="rounded-sm bg-primary px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-accent"
+                                type="submit"
+                            >
+                                {editingInvoice ? 'Save invoice' : 'Add invoice'}
+                            </button>
+                            {editingInvoice ? (
+                                <button
+                                    className="rounded-sm border border-border px-4 py-2 text-sm font-semibold text-secondary transition-colors hover:border-primary hover:text-primary"
+                                    type="button"
+                                    onClick={handleCancelEdit}
+                                >
+                                    Cancel
+                                </button>
+                            ) : null}
+                            {mutationError ? (
+                                <p className="text-sm text-muted" role="status">
+                                    {mutationError}
+                                </p>
+                            ) : null}
+                        </div>
+                    </form>
+                </CardContent>
+            </Card>
             <Card>
                 <CardHeader>
                     <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
@@ -96,6 +283,8 @@ function Invoices() {
                         isLoading={isLoading}
                         invoices={invoices}
                         filteredInvoices={filteredInvoices}
+                        onDeleteInvoice={handleDelete}
+                        onEditInvoice={handleEdit}
                     />
                 </CardContent>
             </Card>
diff --git a/react-app/src/services/invoices.ts b/react-app/src/services/invoices.ts
index 7df3553..15329ae 100644
--- a/react-app/src/services/invoices.ts
+++ b/react-app/src/services/invoices.ts
@@ -1,5 +1,5 @@
 import apiClient from './http'
-import type { Invoice } from '../types/invoice'
+import type { CreateInvoiceInput, Invoice, UpdateInvoiceInput } from '../types/invoice'
 
 export const fetchInvoices = async (): Promise<Invoice[]> => {
     const response = await apiClient.get<Invoice[]>('/invoices')
@@ -10,3 +10,20 @@ export const fetchInvoiceById = async (id: number): Promise<Invoice> => {
     const response = await apiClient.get<Invoice>(`/invoices/${id}`)
     return response.data
 }
+
+export const createInvoice = async (invoice: CreateInvoiceInput): Promise<Invoice> => {
+    const response = await apiClient.post<Invoice>('/invoices', invoice)
+    return response.data
+}
+
+export const updateInvoice = async (
+    id: number,
+    invoice: UpdateInvoiceInput,
+): Promise<Invoice> => {
+    const response = await apiClient.put<Invoice>(`/invoices/${id}`, invoice)
+    return response.data
+}
+
+export const deleteInvoice = async (id: number): Promise<void> => {
+    await apiClient.delete(`/invoices/${id}`)
+}
diff --git a/react-app/src/types/invoice.ts b/react-app/src/types/invoice.ts
index bd98d5e..1e84508 100644
--- a/react-app/src/types/invoice.ts
+++ b/react-app/src/types/invoice.ts
@@ -7,3 +7,7 @@ export type Invoice = {
     status: InvoiceStatus
     dueDate: string
 }
+
+export type CreateInvoiceInput = Omit<Invoice, 'id'>
+
+export type UpdateInvoiceInput = Partial<CreateInvoiceInput>