diff --git a/backend/src/db.ts b/backend/src/db.ts
new file mode 100644
index 0000000..d103ac5
--- /dev/null
+++ b/backend/src/db.ts
@@ -0,0 +1,30 @@
+import Database from "better-sqlite3";
+import path from "path";
+
+const dbPath = path.join(__dirname, "..", "teamexpense.db");
+const db = new Database(dbPath);
+
+db.pragma("journal_mode = WAL");
+
+db.exec(`
+  CREATE TABLE IF NOT EXISTS users (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    email TEXT UNIQUE NOT NULL,
+    password TEXT NOT NULL,
+    name TEXT NOT NULL,
+    role TEXT NOT NULL DEFAULT 'member'
+  );
+
+  CREATE TABLE IF NOT EXISTS expenses (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    user_id INTEGER NOT NULL,
+    amount REAL NOT NULL,
+    description TEXT NOT NULL,
+    category TEXT NOT NULL,
+    status TEXT NOT NULL DEFAULT 'pending',
+    created_at TEXT NOT NULL DEFAULT (datetime('now')),
+    FOREIGN KEY (user_id) REFERENCES users(id)
+  );
+`);
+
+export default db;
diff --git a/backend/src/index.ts b/backend/src/index.ts
new file mode 100644
index 0000000..a183c70
--- /dev/null
+++ b/backend/src/index.ts
@@ -0,0 +1,30 @@
+import express from "express";
+import cors from "cors";
+import authRoutes from "./routes/auth";
+import expenseRoutes from "./routes/expenses";
+import reportRoutes from "./routes/reports";
+
+const app = express();
+const PORT = process.env.PORT || 3001;
+
+// BUG: Wildcard CORS — allows any origin to make authenticated requests
+app.use(cors());
+app.use(express.json());
+
+app.use("/api/auth", authRoutes);
+app.use("/api/expenses", expenseRoutes);
+app.use("/api/reports", reportRoutes);
+
+// BUG: No rate limiting on any endpoints — susceptible to brute-force attacks
+
+// BUG: Global error handler leaks stack traces to the client in production
+app.use((err: any, _req: express.Request, res: express.Response, _next: express.NextFunction) => {
+  console.error(err);
+  res.status(500).json({ error: err.message, stack: err.stack });
+});
+
+app.listen(PORT, () => {
+  console.log(`Server running on port ${PORT}`);
+});
+
+export default app;
diff --git a/backend/src/middleware/auth.ts b/backend/src/middleware/auth.ts
new file mode 100644
index 0000000..1a93055
--- /dev/null
+++ b/backend/src/middleware/auth.ts
@@ -0,0 +1,36 @@
+import { Request, Response, NextFunction } from "express";
+import jwt from "jsonwebtoken";
+
+const JWT_SECRET = "supersecretkey123"; // BUG: Hardcoded JWT secret — should use environment variable
+
+export interface AuthRequest extends Request {
+  user?: { id: number; email: string; role: string };
+}
+
+export function authenticate(req: AuthRequest, res: Response, next: NextFunction) {
+  const header = req.headers.authorization;
+  if (!header) {
+    return res.status(401).json({ error: "No token provided" });
+  }
+
+  // BUG: Does not validate "Bearer " prefix — any string with a valid JWT payload passes
+  const token = header.replace("Bearer ", "");
+
+  try {
+    const payload = jwt.verify(token, JWT_SECRET) as any;
+    req.user = payload;
+    next();
+  } catch {
+    return res.status(401).json({ error: "Invalid token" });
+  }
+}
+
+export function requireAdmin(req: AuthRequest, res: Response, next: NextFunction) {
+  // BUG: Checks role from the JWT payload which the user controls — should verify role from DB
+  if (req.user?.role !== "admin") {
+    return res.status(403).json({ error: "Admin access required" });
+  }
+  next();
+}
+
+export { JWT_SECRET };
diff --git a/backend/src/routes/auth.ts b/backend/src/routes/auth.ts
new file mode 100644
index 0000000..b3cda04
--- /dev/null
+++ b/backend/src/routes/auth.ts
@@ -0,0 +1,74 @@
+import { Router, Request, Response } from "express";
+import bcrypt from "bcryptjs";
+import jwt from "jsonwebtoken";
+import db from "../db";
+import { JWT_SECRET } from "../middleware/auth";
+import { isValidEmail } from "../utils/validate";
+
+const router = Router();
+
+// POST /api/auth/register
+router.post("/register", async (req: Request, res: Response) => {
+  const { email, password, name } = req.body;
+
+  if (!email || !password || !name) {
+    return res.status(400).json({ error: "All fields are required" });
+  }
+
+  if (!isValidEmail(email)) {
+    return res.status(400).json({ error: "Invalid email" });
+  }
+
+  // BUG: No minimum password length or complexity check
+  const hashed = await bcrypt.hash(password, 10);
+
+  try {
+    const stmt = db.prepare("INSERT INTO users (email, password, name) VALUES (?, ?, ?)");
+    const result = stmt.run(email, hashed, name);
+
+    const token = jwt.sign(
+      { id: result.lastInsertRowid, email, role: "member" },
+      JWT_SECRET
+      // BUG: No token expiration — JWTs are valid forever
+    );
+
+    return res.status(201).json({ token, user: { id: result.lastInsertRowid, email, name, role: "member" } });
+  } catch (err: any) {
+    if (err.code === "SQLITE_CONSTRAINT_UNIQUE") {
+      return res.status(409).json({ error: "Email already registered" });
+    }
+    return res.status(500).json({ error: "Registration failed" });
+  }
+});
+
+// POST /api/auth/login
+router.post("/login", async (req: Request, res: Response) => {
+  const { email, password } = req.body;
+
+  if (!email || !password) {
+    return res.status(400).json({ error: "Email and password required" });
+  }
+
+  // BUG: SQL injection — user input interpolated directly into query
+  const user = db.prepare(`SELECT * FROM users WHERE email = '${email}'`).get() as any;
+
+  if (!user) {
+    // BUG: Leaks whether an email exists — allows user enumeration
+    return res.status(401).json({ error: "No account found with that email" });
+  }
+
+  const valid = await bcrypt.compare(password, user.password);
+  if (!valid) {
+    return res.status(401).json({ error: "Incorrect password" });
+  }
+
+  const token = jwt.sign(
+    { id: user.id, email: user.email, role: user.role },
+    JWT_SECRET
+    // BUG: No token expiration here either
+  );
+
+  return res.json({ token, user: { id: user.id, email: user.email, name: user.name, role: user.role } });
+});
+
+export default router;
diff --git a/backend/src/routes/expenses.ts b/backend/src/routes/expenses.ts
new file mode 100644
index 0000000..05e9561
--- /dev/null
+++ b/backend/src/routes/expenses.ts
@@ -0,0 +1,107 @@
+import { Router, Response } from "express";
+import db from "../db";
+import { authenticate, AuthRequest } from "../middleware/auth";
+import { isPositiveNumber, isValidCategory } from "../utils/validate";
+
+const router = Router();
+router.use(authenticate);
+
+const BUDGET_LIMIT = 5000;
+
+// POST /api/expenses
+router.post("/", (req: AuthRequest, res: Response) => {
+  const { amount, description, category } = req.body;
+  const userId = req.user!.id;
+
+  if (!isPositiveNumber(amount)) {
+    return res.status(400).json({ error: "Amount must be a positive number" });
+  }
+
+  if (!description || typeof description !== "string") {
+    return res.status(400).json({ error: "Description is required" });
+  }
+
+  if (!isValidCategory(category)) {
+    return res.status(400).json({ error: "Invalid category" });
+  }
+
+  // BUG: Race condition — checking total and inserting are not in a transaction,
+  // so concurrent requests can exceed the budget limit
+  const row = db.prepare(
+    "SELECT COALESCE(SUM(amount), 0) as total FROM expenses WHERE user_id = ?"
+  ).get(userId) as any;
+
+  // BUG: Off-by-one — uses > instead of >= so a user can hit exactly $5000.01 over limit
+  if (row.total + amount > BUDGET_LIMIT) {
+    return res.status(400).json({
+      error: `Budget limit of $${BUDGET_LIMIT} exceeded. Current total: $${row.total}`,
+    });
+  }
+
+  const stmt = db.prepare(
+    "INSERT INTO expenses (user_id, amount, description, category) VALUES (?, ?, ?, ?)"
+  );
+  const result = stmt.run(userId, amount, description, category);
+
+  return res.status(201).json({ id: result.lastInsertRowid, amount, description, category, status: "pending" });
+});
+
+// GET /api/expenses
+router.get("/", (req: AuthRequest, res: Response) => {
+  const userId = req.user!.id;
+  const page = parseInt(req.query.page as string) || 1;
+  const limit = parseInt(req.query.limit as string) || 20;
+  // BUG: No upper bound on limit — a client can request limit=999999 and dump the entire table
+  const offset = (page - 1) * limit;
+
+  // BUG: SQL injection — category filter is interpolated directly into the query string
+  const category = req.query.category as string;
+  let query = `SELECT * FROM expenses WHERE user_id = ?`;
+  if (category) {
+    query += ` AND category = '${category}'`;
+  }
+  query += ` ORDER BY created_at DESC LIMIT ${limit} OFFSET ${offset}`;
+
+  const expenses = db.prepare(query).all(userId);
+  return res.json({ expenses, page, limit });
+});
+
+// PATCH /api/expenses/:id/status
+router.patch("/:id/status", (req: AuthRequest, res: Response) => {
+  const { status } = req.body;
+  const expenseId = req.params.id;
+
+  if (!["approved", "rejected"].includes(status)) {
+    return res.status(400).json({ error: "Status must be 'approved' or 'rejected'" });
+  }
+
+  // BUG: No admin check — any authenticated user can approve/reject any expense
+  const expense = db.prepare("SELECT * FROM expenses WHERE id = ?").get(expenseId) as any;
+
+  if (!expense) {
+    return res.status(404).json({ error: "Expense not found" });
+  }
+
+  // BUG: Users can approve their own expenses — no self-approval guard
+  db.prepare("UPDATE expenses SET status = ? WHERE id = ?").run(status, expenseId);
+  return res.json({ ...expense, status });
+});
+
+// DELETE /api/expenses/:id
+router.delete("/:id", (req: AuthRequest, res: Response) => {
+  const expenseId = req.params.id;
+  const userId = req.user!.id;
+
+  const expense = db.prepare("SELECT * FROM expenses WHERE id = ?").get(expenseId) as any;
+
+  if (!expense) {
+    return res.status(404).json({ error: "Expense not found" });
+  }
+
+  // BUG: IDOR — only checks if expense exists, not if it belongs to the requesting user
+  // Any authenticated user can delete any other user's expense
+  db.prepare("DELETE FROM expenses WHERE id = ?").run(expenseId);
+  return res.json({ message: "Expense deleted" });
+});
+
+export default router;
diff --git a/backend/src/routes/reports.ts b/backend/src/routes/reports.ts
new file mode 100644
index 0000000..61e207a
--- /dev/null
+++ b/backend/src/routes/reports.ts
@@ -0,0 +1,58 @@
+import { Router, Response } from "express";
+import db from "../db";
+import { authenticate, requireAdmin, AuthRequest } from "../middleware/auth";
+
+const router = Router();
+router.use(authenticate);
+
+// GET /api/reports/my-summary
+router.get("/my-summary", (req: AuthRequest, res: Response) => {
+  const userId = req.user!.id;
+
+  const rows = db.prepare(`
+    SELECT category, COUNT(*) as count, SUM(amount) as total
+    FROM expenses
+    WHERE user_id = ?
+    GROUP BY category
+  `).all(userId);
+
+  return res.json({ summary: rows });
+});
+
+// GET /api/reports/team-summary
+router.get("/team-summary", requireAdmin, (req: AuthRequest, res: Response) => {
+  const rows = db.prepare(`
+    SELECT u.name, u.email, COUNT(e.id) as count, SUM(e.amount) as total
+    FROM users u
+    LEFT JOIN expenses e ON u.id = e.user_id
+    GROUP BY u.id
+  `).all();
+
+  return res.json({ summary: rows });
+});
+
+// GET /api/reports/export
+router.get("/export", requireAdmin, (req: AuthRequest, res: Response) => {
+  // BUG: No pagination or streaming — loads ALL expenses into memory at once
+  // Will cause OOM on large datasets
+  const expenses = db.prepare(`
+    SELECT e.*, u.name as user_name, u.email as user_email
+    FROM expenses e
+    JOIN users u ON e.user_id = u.id
+    ORDER BY e.created_at DESC
+  `).all();
+
+  // BUG: No Content-Disposition header — browser won't prompt download
+  res.setHeader("Content-Type", "text/csv");
+
+  // BUG: CSV injection — user-controlled fields (description, name) are not escaped.
+  // A description like '=CMD("calc")' will execute in Excel when opened.
+  let csv = "ID,User,Email,Amount,Description,Category,Status,Date\n";
+  for (const e of expenses as any[]) {
+    csv += `${e.id},${e.user_name},${e.user_email},${e.amount},${e.description},${e.category},${e.status},${e.created_at}\n`;
+  }
+
+  return res.send(csv);
+});
+
+export default router;
diff --git a/backend/src/utils/validate.ts b/backend/src/utils/validate.ts
new file mode 100644
index 0000000..20b5d40
--- /dev/null
+++ b/backend/src/utils/validate.ts
@@ -0,0 +1,15 @@
+export function isValidEmail(email: string): boolean {
+  // BUG: Overly permissive regex — accepts strings like "a@b" without a TLD
+  return /^[^\s@]+@[^\s@]+$/.test(email);
+}
+
+export function isPositiveNumber(value: unknown): value is number {
+  return typeof value === "number" && value > 0;
+}
+
+const VALID_CATEGORIES = ["travel", "meals", "supplies", "software", "other"];
+
+export function isValidCategory(category: string): boolean {
+  // BUG: Case-sensitive comparison — "Travel" or "MEALS" will be rejected
+  return VALID_CATEGORIES.includes(category);
+}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
new file mode 100644
index 0000000..e88ce34
--- /dev/null
+++ b/frontend/src/App.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+import Login from "./pages/Login";
+import Dashboard from "./pages/Dashboard";
+import ExpenseForm from "./pages/ExpenseForm";
+import ExpenseList from "./pages/ExpenseList";
+import Reports from "./pages/Reports";
+
+function PrivateRoute({ children }: { children: React.ReactNode }) {
+  // BUG: Only checks if token exists, not if it's valid or expired
+  // An expired or tampered token will pass this check
+  const token = localStorage.getItem("token");
+  return token ? <>{children}</> : <Navigate to="/login" />;
+}
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/login" element={<Login />} />
+        <Route path="/dashboard" element={<PrivateRoute><Dashboard /></PrivateRoute>} />
+        <Route path="/expenses/new" element={<PrivateRoute><ExpenseForm /></PrivateRoute>} />
+        <Route path="/expenses" element={<PrivateRoute><ExpenseList /></PrivateRoute>} />
+        <Route path="/reports" element={<PrivateRoute><Reports /></PrivateRoute>} />
+        <Route path="*" element={<Navigate to="/dashboard" />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts
new file mode 100644
index 0000000..584fafe
--- /dev/null
+++ b/frontend/src/api/client.ts
@@ -0,0 +1,19 @@
+import axios from "axios";
+
+const client = axios.create({
+  baseURL: "http://localhost:3001/api",
+});
+
+client.interceptors.request.use((config) => {
+  // BUG: Reads token from localStorage which is vulnerable to XSS attacks
+  // Should use httpOnly cookies instead
+  const token = localStorage.getItem("token");
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+// BUG: No response interceptor to handle 401s — if the token expires,
+// the user sees raw errors instead of being redirected to login
+export default client;
diff --git a/frontend/src/components/ExpenseCard.tsx b/frontend/src/components/ExpenseCard.tsx
new file mode 100644
index 0000000..4202cf1
--- /dev/null
+++ b/frontend/src/components/ExpenseCard.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import StatusBadge from "./StatusBadge";
+
+interface Props {
+  expense: {
+    id: number;
+    amount: number;
+    description: string;
+    category: string;
+    status: string;
+    created_at: string;
+  };
+  onDelete: (id: number) => void;
+}
+
+export default function ExpenseCard({ expense, onDelete }: Props) {
+  return (
+    // BUG (a11y): Card is not an <article> or list item — no semantic structure
+    <div style={{ border: "1px solid #ddd", borderRadius: 8, padding: 16, marginBottom: 12 }}>
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+        {/* BUG (a11y): Amount displayed with color alone to indicate high values — no text/icon alternative */}
+        <div style={{ fontSize: 20, fontWeight: "bold", color: expense.amount > 500 ? "red" : "green" }}>
+          ${expense.amount.toFixed(2)}
+        </div>
+        <StatusBadge status={expense.status} />
+      </div>
+
+      {/* BUG: Renders description as raw HTML via dangerouslySetInnerHTML — XSS vulnerability
+         If a user submits '<img src=x onerror=alert(1)>' as a description, it executes */}
+      <div
+        style={{ margin: "8px 0", color: "#555" }}
+        dangerouslySetInnerHTML={{ __html: expense.description }}
+      />
+
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 14, color: "#888" }}>
+        <span>{expense.category}</span>
+        <span>{expense.created_at}</span>
+      </div>
+
+      {/* BUG (a11y): Delete button has no aria-label — screen reader just says "X" with no context */}
+      <button
+        onClick={() => onDelete(expense.id)}
+        style={{ marginTop: 8, color: "red", background: "none", border: "none", cursor: "pointer" }}
+      >
+        X
+      </button>
+    </div>
+  );
+}
diff --git a/frontend/src/components/StatusBadge.tsx b/frontend/src/components/StatusBadge.tsx
new file mode 100644
index 0000000..5fcb772
--- /dev/null
+++ b/frontend/src/components/StatusBadge.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+interface Props {
+  status: string;
+}
+
+// BUG (a11y): Status conveyed by color alone — no icon or text pattern for colorblind users
+const STATUS_COLORS: Record<string, string> = {
+  pending: "#f0ad4e",
+  approved: "#5cb85c",
+  rejected: "#d9534f",
+};
+
+export default function StatusBadge({ status }: Props) {
+  return (
+    // BUG (a11y): No role="status" or aria-label — screen readers get no context
+    <span
+      style={{
+        padding: "4px 12px",
+        borderRadius: 12,
+        backgroundColor: STATUS_COLORS[status] || "#ccc",
+        color: "#fff",
+        fontSize: 12,
+        fontWeight: "bold",
+        textTransform: "uppercase",
+      }}
+    >
+      {status}
+    </span>
+  );
+}
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
new file mode 100644
index 0000000..35ed570
--- /dev/null
+++ b/frontend/src/pages/Dashboard.tsx
@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import client from "../api/client";
+
+export default function Dashboard() {
+  const [summary, setSummary] = useState<any[]>([]);
+
+  useEffect(() => {
+    // BUG: No cleanup/abort — if the component unmounts before the request completes,
+    // this will attempt to setState on an unmounted component (memory leak)
+    client.get("/reports/my-summary").then((res) => {
+      setSummary(res.data.summary);
+    });
+  }, []);
+
+  const total = summary.reduce((sum, row) => sum + row.total, 0);
+
+  return (
+    // BUG (a11y): No <main> landmark wrapping page content
+    <div style={{ maxWidth: 800, margin: "40px auto", padding: 20 }}>
+      <div style={{ fontSize: 28, fontWeight: "bold" }}>Dashboard</div>
+
+      <div style={{ margin: "20px 0", padding: 16, backgroundColor: "#f5f5f5", borderRadius: 8 }}>
+        {/* BUG (a11y): Important status info not in a landmark or live region */}
+        <div style={{ fontSize: 18 }}>Total Spending: ${total.toFixed(2)}</div>
+        <div>Budget Remaining: ${(5000 - total).toFixed(2)}</div>
+      </div>
+
+      {/* BUG (a11y): Navigation links styled as plain text — no visual focus indicator */}
+      <div style={{ display: "flex", gap: 16, marginTop: 20 }}>
+        <Link to="/expenses/new" style={{ textDecoration: "none", color: "#007bff" }}>New Expense</Link>
+        <Link to="/expenses" style={{ textDecoration: "none", color: "#007bff" }}>View All</Link>
+        <Link to="/reports" style={{ textDecoration: "none", color: "#007bff" }}>Reports</Link>
+      </div>
+
+      {summary.length > 0 && (
+        // BUG (a11y): Table has no <caption> or aria-label describing its purpose
+        <table style={{ width: "100%", marginTop: 20, borderCollapse: "collapse" }}>
+          <thead>
+            <tr>
+              {/* BUG (a11y): Uses <td> instead of <th> for header cells — no scope attribute */}
+              <td style={{ borderBottom: "2px solid #ddd", padding: 8 }}>Category</td>
+              <td style={{ borderBottom: "2px solid #ddd", padding: 8 }}>Count</td>
+              <td style={{ borderBottom: "2px solid #ddd", padding: 8 }}>Total</td>
+            </tr>
+          </thead>
+          <tbody>
+            {summary.map((row: any) => (
+              // BUG: Using array index as key implicitly — category could be a better key
+              <tr key={row.category}>
+                <td style={{ padding: 8, borderBottom: "1px solid #eee" }}>{row.category}</td>
+                <td style={{ padding: 8, borderBottom: "1px solid #eee" }}>{row.count}</td>
+                <td style={{ padding: 8, borderBottom: "1px solid #eee" }}>${row.total.toFixed(2)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/pages/ExpenseForm.tsx b/frontend/src/pages/ExpenseForm.tsx
new file mode 100644
index 0000000..f3f622a
--- /dev/null
+++ b/frontend/src/pages/ExpenseForm.tsx
@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import client from "../api/client";
+
+const CATEGORIES = ["travel", "meals", "supplies", "software", "other"];
+
+export default function ExpenseForm() {
+  const [amount, setAmount] = useState("");
+  const [description, setDescription] = useState("");
+  const [category, setCategory] = useState(CATEGORIES[0]);
+  const [error, setError] = useState("");
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    // BUG: parseFloat("12.34abc") returns 12.34 — no strict numeric validation
+    const parsed = parseFloat(amount);
+    if (isNaN(parsed) || parsed <= 0) {
+      setError("Enter a valid positive amount");
+      return;
+    }
+
+    // BUG: No client-side XSS sanitization on description — stored XSS if server also lacks sanitization
+    try {
+      await client.post("/expenses", { amount: parsed, description, category });
+      navigate("/expenses");
+    } catch (err: any) {
+      setError(err.response?.data?.error || "Failed to create expense");
+    }
+  };
+
+  return (
+    // BUG (a11y): No <main> landmark, no page heading
+    <div style={{ maxWidth: 500, margin: "40px auto", padding: 20 }}>
+      <div style={{ fontSize: 24, fontWeight: "bold", marginBottom: 20 }}>New Expense</div>
+
+      {error && <div style={{ color: "red", marginBottom: 10 }}>{error}</div>}
+
+      <form onSubmit={handleSubmit}>
+        {/* BUG (a11y): No <label> elements — inputs only have placeholder text */}
+        <input
+          type="text"
+          placeholder="Amount"
+          value={amount}
+          onChange={(e) => setAmount(e.target.value)}
+          style={{ display: "block", width: "100%", marginBottom: 10, padding: 8 }}
+        />
+        <input
+          type="text"
+          placeholder="Description"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          style={{ display: "block", width: "100%", marginBottom: 10, padding: 8 }}
+        />
+        {/* BUG (a11y): <select> has no associated label */}
+        <select
+          value={category}
+          onChange={(e) => setCategory(e.target.value)}
+          style={{ display: "block", width: "100%", marginBottom: 10, padding: 8 }}
+        >
+          {CATEGORIES.map((c) => (
+            <option key={c} value={c}>{c}</option>
+          ))}
+        </select>
+        <button type="submit" style={{ width: "100%", padding: 10 }}>
+          Submit Expense
+        </button>
+      </form>
+    </div>
+  );
+}
diff --git a/frontend/src/pages/ExpenseList.tsx b/frontend/src/pages/ExpenseList.tsx
new file mode 100644
index 0000000..defed48
--- /dev/null
+++ b/frontend/src/pages/ExpenseList.tsx
@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from "react";
+import client from "../api/client";
+import ExpenseCard from "../components/ExpenseCard";
+
+interface Expense {
+  id: number;
+  amount: number;
+  description: string;
+  category: string;
+  status: string;
+  created_at: string;
+}
+
+export default function ExpenseList() {
+  const [expenses, setExpenses] = useState<Expense[]>([]);
+  const [page, setPage] = useState(1);
+  const [search, setSearch] = useState("");
+
+  useEffect(() => {
+    // BUG: Fetches on every keystroke in search — no debounce, hammers the API
+    client.get("/expenses", { params: { page, category: search || undefined } }).then((res) => {
+      setExpenses(res.data.expenses);
+    });
+  }, [page, search]);
+
+  const handleDelete = async (id: number) => {
+    // BUG: No confirmation dialog before delete — one click permanently removes data
+    await client.delete(`/expenses/${id}`);
+    setExpenses(expenses.filter((e) => e.id !== id));
+  };
+
+  return (
+    // BUG (a11y): No <main> landmark
+    <div style={{ maxWidth: 800, margin: "40px auto", padding: 20 }}>
+      <div style={{ fontSize: 24, fontWeight: "bold", marginBottom: 20 }}>Expenses</div>
+
+      {/* BUG (a11y): Search input has no label or aria-label */}
+      <input
+        type="text"
+        placeholder="Filter by category..."
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        style={{ width: "100%", padding: 8, marginBottom: 20 }}
+      />
+
+      {expenses.length === 0 ? (
+        <div>No expenses found.</div>
+      ) : (
+        // BUG (a11y): List of expenses not wrapped in a <ul>/<ol> — screen readers can't navigate as a list
+        <div>
+          {expenses.map((expense) => (
+            <ExpenseCard key={expense.id} expense={expense} onDelete={handleDelete} />
+          ))}
+        </div>
+      )}
+
+      {/* BUG (a11y): Pagination buttons have no aria-label describing their action */}
+      <div style={{ display: "flex", justifyContent: "center", gap: 10, marginTop: 20 }}>
+        <button onClick={() => setPage(Math.max(1, page - 1))} disabled={page === 1}>
+          Previous
+        </button>
+        <span>Page {page}</span>
+        <button onClick={() => setPage(page + 1)}>
+          Next
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
new file mode 100644
index 0000000..b6d90cd
--- /dev/null
+++ b/frontend/src/pages/Login.tsx
@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import client from "../api/client";
+
+export default function Login() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      const { data } = await client.post("/auth/login", { email, password });
+      localStorage.setItem("token", data.token);
+      navigate("/dashboard");
+    } catch (err: any) {
+      // BUG: Displays raw server error message to user — may leak internal details
+      setError(err.response?.data?.error || "Login failed");
+    }
+  };
+
+  return (
+    // BUG (a11y): No <main> landmark, no <h1> heading, no skip-navigation link
+    <div style={{ maxWidth: 400, margin: "80px auto", padding: 20 }}>
+      <div style={{ fontSize: 24, fontWeight: "bold", marginBottom: 20 }}>Team Expense Login</div>
+
+      {/* BUG (a11y): Error message has no role="alert" or aria-live — screen readers won't announce it */}
+      {error && <div style={{ color: "red", marginBottom: 10 }}>{error}</div>}
+
+      <form onSubmit={handleSubmit}>
+        {/* BUG (a11y): Inputs have no associated <label> elements — only placeholder text */}
+        <input
+          type="email"
+          placeholder="Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          style={{ display: "block", width: "100%", marginBottom: 10, padding: 8 }}
+        />
+        <input
+          type="password"
+          placeholder="Password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          style={{ display: "block", width: "100%", marginBottom: 10, padding: 8 }}
+        />
+        {/* BUG (a11y): Button has insufficient color contrast — light gray on white */}
+        <button
+          type="submit"
+          style={{ width: "100%", padding: 10, backgroundColor: "#ccc", color: "#fff", border: "none", cursor: "pointer" }}
+        >
+          Log In
+        </button>
+      </form>
+    </div>
+  );
+}
diff --git a/frontend/src/pages/Reports.tsx b/frontend/src/pages/Reports.tsx
new file mode 100644
index 0000000..707ebf5
--- /dev/null
+++ b/frontend/src/pages/Reports.tsx
@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from "react";
+import client from "../api/client";
+
+export default function Reports() {
+  const [mySummary, setMySummary] = useState<any[]>([]);
+  const [teamSummary, setTeamSummary] = useState<any[]>([]);
+
+  useEffect(() => {
+    // BUG: Both requests fire even if user is not admin — team-summary will 403
+    // and the error is silently swallowed
+    client.get("/reports/my-summary").then((res) => setMySummary(res.data.summary));
+    client.get("/reports/team-summary").then((res) => setTeamSummary(res.data.summary)).catch(() => {});
+  }, []);
+
+  return (
+    <div style={{ maxWidth: 800, margin: "40px auto", padding: 20 }}>
+      <div style={{ fontSize: 24, fontWeight: "bold", marginBottom: 20 }}>Reports</div>
+
+      {/* BUG (a11y): Section has no heading hierarchy — goes from page title to table directly */}
+      <div style={{ marginBottom: 30 }}>
+        <div style={{ fontSize: 18, fontWeight: "bold", marginBottom: 10 }}>My Spending</div>
+        <table style={{ width: "100%", borderCollapse: "collapse" }}>
+          <thead>
+            <tr>
+              <td style={{ padding: 8, borderBottom: "2px solid #ddd" }}>Category</td>
+              <td style={{ padding: 8, borderBottom: "2px solid #ddd" }}>Total</td>
+            </tr>
+          </thead>
+          <tbody>
+            {mySummary.map((row: any) => (
+              <tr key={row.category}>
+                <td style={{ padding: 8 }}>{row.category}</td>
+                <td style={{ padding: 8 }}>${row.total?.toFixed(2)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {teamSummary.length > 0 && (
+        <div>
+          <div style={{ fontSize: 18, fontWeight: "bold", marginBottom: 10 }}>Team Spending</div>
+          {/* BUG (a11y): Table has no caption and uses <td> for headers */}
+          <table style={{ width: "100%", borderCollapse: "collapse" }}>
+            <thead>
+              <tr>
+                <td style={{ padding: 8, borderBottom: "2px solid #ddd" }}>Name</td>
+                <td style={{ padding: 8, borderBottom: "2px solid #ddd" }}>Expenses</td>
+                <td style={{ padding: 8, borderBottom: "2px solid #ddd" }}>Total</td>
+              </tr>
+            </thead>
+            <tbody>
+              {teamSummary.map((row: any) => (
+                <tr key={row.email}>
+                  <td style={{ padding: 8 }}>{row.name}</td>
+                  <td style={{ padding: 8 }}>{row.count}</td>
+                  {/* BUG: row.total can be null (user with no expenses) — toFixed() will throw */}
+                  <td style={{ padding: 8 }}>${row.total.toFixed(2)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}