diff --git a/.gitignore b/.gitignore
index 3d70248ba2..fac0d22bad 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,7 @@ node_modules
 .env.development.local
 .env.test.local
 .env.production.local
+backend/.env
 
 build
 
diff --git a/backend/middlewares/auth.js b/backend/middlewares/auth.js
new file mode 100644
index 0000000000..9617a9aa4b
--- /dev/null
+++ b/backend/middlewares/auth.js
@@ -0,0 +1,13 @@
+import jwt from "jsonwebtoken";
+
+export default function auth(req, res, next) {
+  const h = req.headers.authorization || "";
+  const token = h.startsWith("Bearer ") ? h.slice(7) : null;
+  if (!token) return res.status(401).json({ error: "No token" });
+  try {
+    req.user = jwt.verify(token, process.env.JWT_SECRET); // { id, iat, exp }
+    next();
+  } catch {
+    res.status(401).json({ error: "Invalid token" });
+  }
+}
diff --git a/backend/models/Item.js b/backend/models/Item.js
new file mode 100644
index 0000000000..ff8ac58a1e
--- /dev/null
+++ b/backend/models/Item.js
@@ -0,0 +1,16 @@
+import mongoose from "mongoose";
+
+const itemSchema = new mongoose.Schema(
+  {
+    userId: { type: mongoose.Schema.Types.ObjectId, ref: "User", required: true, index: true },
+    childId: { type: mongoose.Schema.Types.ObjectId, ref: "Kid", required: true },
+    type: { type: String, enum: ["jacket", "pants", "boots", "hat", "top", "gloves", "other"], default: "other" },
+    size: { type: String, required: true },
+    season: { type: String, enum: ["winter", "spring", "summer", "autumn", "all"], default: "all" },
+    status: { type: String, enum: ["current", "needed", "stored", "to-sell"], default: "current" },
+    notes: String
+  },
+  { timestamps: true }
+);
+
+export default mongoose.model("Item", itemSchema);
diff --git a/backend/models/Kid.js b/backend/models/Kid.js
new file mode 100644
index 0000000000..5673267cb4
--- /dev/null
+++ b/backend/models/Kid.js
@@ -0,0 +1,16 @@
+import mongoose from "mongoose";
+
+const kidSchema = new mongoose.Schema({
+  name: { type: String, required: true },
+  birthdate: { type: Date, required: true },
+
+  // optional: male/female/other
+  sex: { type: String, enum: ["boy", "girl", "other"], default: "other" },
+
+  // optional: current height in cm
+  height: { type: Number, min: 40, max: 200 },
+
+  owner: { type: mongoose.Schema.Types.ObjectId, ref: "User", required: true },
+}, { timestamps: true });
+
+export default mongoose.model("Kid", kidSchema);
diff --git a/backend/models/User.js b/backend/models/User.js
new file mode 100644
index 0000000000..9a9d02ea1e
--- /dev/null
+++ b/backend/models/User.js
@@ -0,0 +1,11 @@
+import mongoose from "mongoose";
+
+const userSchema = new mongoose.Schema(
+  {
+    email: { type: String, required: true, unique: true, trim: true },
+    passwordHash: { type: String, required: true }
+  },
+  { timestamps: true }
+);
+
+export default mongoose.model("User", userSchema);
diff --git a/backend/package.json b/backend/package.json
index 08f29f2448..bc3b46497e 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -12,9 +12,19 @@
     "@babel/core": "^7.17.9",
     "@babel/node": "^7.16.8",
     "@babel/preset-env": "^7.16.11",
+    "bcrypt": "^6.0.0",
     "cors": "^2.8.5",
-    "express": "^4.17.3",
-    "mongoose": "^8.4.0",
-    "nodemon": "^3.0.1"
+    "dotenv": "^17.2.1",
+    "express": "^4.21.2",
+    "jsonwebtoken": "^9.0.2",
+    "mongodb": "^6.18.0",
+    "mongoose": "^8.17.2",
+    "morgan": "^1.10.1",
+    "react-hook-form": "^7.62.0",
+    "react-router-dom": "^7.8.1",
+    "zustand": "^5.0.8"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.10"
   }
-}
\ No newline at end of file
+}
diff --git a/backend/routes/auth.js b/backend/routes/auth.js
new file mode 100644
index 0000000000..ce92892b4d
--- /dev/null
+++ b/backend/routes/auth.js
@@ -0,0 +1,57 @@
+import express from "express";
+import bcrypt from "bcrypt";
+import jwt from "jsonwebtoken";
+import mongoose from "mongoose";
+import User from "../models/User.js";
+
+const router = express.Router();
+const sign = (id) => jwt.sign({ id }, process.env.JWT_SECRET, { expiresIn: "7d" });
+
+// POST /auth/register
+router.post("/register", async (req, res) => {
+  try {
+    const { email, password } = req.body;
+
+    // basic validation
+    if (!email || !password) return res.status(400).json({ error: "Email and password required" });
+    if (password.length < 6) return res.status(400).json({ error: "Password must be ≥ 6 chars" });
+
+    // unique email
+    const exists = await User.findOne({ email: email.toLowerCase().trim() });
+    if (exists) return res.status(409).json({ error: "Email already registered" });
+
+    // hash & save
+    const passwordHash = await bcrypt.hash(password, 10);
+    const user = await User.create({ email: email.toLowerCase().trim(), passwordHash });
+
+    // return a token immediately (so the FE can log in)
+    return res.status(201).json({ token: sign(user._id) });
+  } catch (e) {
+    // handle duplicate key race condition
+    if (e.code === 11000) return res.status(409).json({ error: "Email already registered" });
+    console.error(e);
+    return res.status(500).json({ error: "Register failed" });
+  }
+});
+
+// POST /auth/login
+router.post("/login", async (req, res) => {
+  try {
+    const { email, password } = req.body;
+    if (!email || !password) return res.status(400).json({ error: "Email and password required" });
+
+    const user = await User.findOne({ email: email.toLowerCase().trim() });
+    if (!user) return res.status(401).json({ error: "Invalid credentials" });
+
+    const ok = await bcrypt.compare(password, user.passwordHash);
+    if (!ok) return res.status(401).json({ error: "Invalid credentials" });
+
+    return res.json({ token: sign(user._id) });
+  } catch (e) {
+    console.error(e);
+    return res.status(500).json({ error: "Login failed" });
+  }
+});
+
+
+export default router;
diff --git a/backend/routes/items.js b/backend/routes/items.js
new file mode 100644
index 0000000000..19b566f4e0
--- /dev/null
+++ b/backend/routes/items.js
@@ -0,0 +1,38 @@
+import express from "express";
+import Item from "../models/Item.js";
+import auth from "../middlewares/auth.js";
+
+const router = express.Router();
+
+// list items for user
+router.get("/", auth, async (req, res) => {
+  const items = await Item.find({ userId: req.user.id }).lean();
+  res.json(items);
+});
+
+// create
+router.post("/", auth, async (req, res) => {
+  const { childId, type, size, season, status, notes } = req.body;
+  const item = await Item.create({ userId: req.user.id, childId, type, size, season, status, notes });
+  res.status(201).json(item);
+});
+
+// update
+router.patch("/:id", auth, async (req, res) => {
+  const item = await Item.findOneAndUpdate(
+    { _id: req.params.id, userId: req.user.id },
+    req.body,
+    { new: true }
+  );
+  if (!item) return res.status(404).json({ error: "Not found" });
+  res.json(item);
+});
+
+// delete
+router.delete("/:id", auth, async (req, res) => {
+  const ok = await Item.deleteOne({ _id: req.params.id, userId: req.user.id });
+  if (!ok.deletedCount) return res.status(404).json({ error: "Not found" });
+  res.json({ ok: true });
+});
+
+export default router;
diff --git a/backend/routes/kids.js b/backend/routes/kids.js
new file mode 100644
index 0000000000..e17b42ed1f
--- /dev/null
+++ b/backend/routes/kids.js
@@ -0,0 +1,28 @@
+import express from "express";
+import auth from "../middlewares/auth.js";
+import Kid from "../models/Kid.js";
+
+const router = express.Router();
+
+router.get("/", auth, async (req, res) => {
+  try {
+    const kids = await Kid.find({ owner: req.user.id }).lean();
+    res.json(kids);
+  } catch (e) {
+    console.error(e);
+    res.status(500).json({ error: "Failed to fetch kids" });
+  }
+});
+
+router.post("/", auth, async (req, res) => {
+  try {
+    const { name, birthdate } = req.body;
+    const kid = await Kid.create({ name, birthdate, owner: req.user.id });
+    res.status(201).json(kid);
+  } catch (e) {
+    console.error(e);
+    res.status(500).json({ error: "Failed to create kid" });
+  }
+});
+
+export default router;
diff --git a/backend/server.js b/backend/server.js
index 070c875189..3299dc87c4 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -1,22 +1,62 @@
+import dotenv from "dotenv";
 import express from "express";
 import cors from "cors";
 import mongoose from "mongoose";
+import morgan from "morgan";
+import authRouter from "./routes/auth.js";
+import "./models/User.js";
+import kidsRouter from "./routes/kids.js";
+import itemsRouter from "./routes/items.js";
+import auth from "./middlewares/auth.js";
 
-const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/final-project";
-mongoose.connect(mongoUrl);
-mongoose.Promise = Promise;
 
-const port = process.env.PORT || 8080;
+
+dotenv.config(); // 1) Load backend/.env
+
 const app = express();
+const PORT = process.env.PORT || 8081;
+const MONGO_URL = process.env.MONGO_URL || "mongodb://localhost/final-project";
+//local dev site and hosted frontend
+const allowed = [process.env.FRONTEND_URL, "http://localhost:5173"].filter(Boolean);
+app.use(cors({ origin: allowed }));
 
-app.use(cors());
+// 2) Middleware
+//app.use(cors());
 app.use(express.json());
+app.use(morgan("dev")); // handy request logs during dev
+
+app.use("/auth", authRouter);
+
+app.use("/kids", kidsRouter);
+
+app.use("/items", itemsRouter);
+
 
-app.get("/", (req, res) => {
+
+// 3) Mongo connect (with clear logs)
+mongoose
+  .connect(MONGO_URL)
+  .then(() => console.log("✅ MongoDB connected"))
+  .catch((err) => console.error("❌ MongoDB connection error:", err.message));
+
+// Helper: human-readable DB status
+const dbStatus = () => {
+  const states = ["disconnected", "connected", "connecting", "disconnecting"];
+  return states[mongoose.connection.readyState] || "unknown";
+};
+
+// 4) Routes
+app.get("/", (_req, res) => {
   res.send("Hello Technigo!");
 });
 
-// Start the server
-app.listen(port, () => {
-  console.log(`Server running on http://localhost:${port}`);
+app.get("/health", (_req, res) => {
+  res.json({ ok: true, db: dbStatus() });
+});
+
+app.get("/me", auth, (req, res) => res.json({ userId: req.user.id }));
+
+// 5) Start the server
+app.listen(PORT, () => {
+  console.log(`🚀 Server running on http://localhost:${PORT}`);
 });
diff --git a/frontend/index.html b/frontend/index.html
index 664410b5b9..b36bf89b95 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,13 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Technigo React Vite Boiler Plate</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="description"
+    content="LitenLeap keeps you ahead of kids' clothing needs with size prediction and seasonal planning." />
+  <title>LitenLeap</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
index 7b2747e949..332716fb06 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,7 +11,11 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.62.0",
+    "react-router-dom": "^7.8.1",
+    "recharts": "^3.1.2",
+    "zustand": "^5.0.8"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
diff --git a/frontend/public/_redirects b/frontend/public/_redirects
new file mode 100644
index 0000000000..78f7f20677
--- /dev/null
+++ b/frontend/public/_redirects
@@ -0,0 +1 @@
+/*  /index.html  200
\ No newline at end of file
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 0a24275e6e..b9195b94ed 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,8 +1,34 @@
-export const App = () => {
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+import { useAuth } from "./store/auth";
+import Login from "./pages/Login";
+import Register from "./pages/Register";
+import Dashboard from "./pages/Dashboard";
+import Kids from "./pages/Kids";
+import Items from "./pages/Items";
+import Nav from "./components/Nav";
 
+
+const Protected = ({ children }) => {
+  const token = useAuth((s) => s.token);
+  return token ? children : <Navigate to="/login" replace />;
+};
+
+const App = () => {
   return (
-    <>
-      <h1>Welcome to Final Project!</h1>
-    </>
+    <BrowserRouter>
+      <Nav />   {/* 👈 always visible */}
+      <Routes>
+        <Route path="/login" element={<Login />} />
+        <Route path="/register" element={<Register />} />
+        <Route path="/" element={<Protected><Dashboard /></Protected>} />
+        <Route path="*" element={<Navigate to="/" />} />
+        <Route path="/kids" element={<Protected><Kids /></Protected>} />
+        <Route path="/items" element={<Protected><Items /></Protected>} />
+        <Route path="*" element={<Navigate to="/" />} />
+
+      </Routes>
+    </BrowserRouter>
   );
 };
+
+export default App;
diff --git a/frontend/src/components/Nav.jsx b/frontend/src/components/Nav.jsx
new file mode 100644
index 0000000000..5d5a32bfdf
--- /dev/null
+++ b/frontend/src/components/Nav.jsx
@@ -0,0 +1,32 @@
+import { Link, useLocation } from "react-router-dom";
+
+const Nav = () => {
+  const { pathname } = useLocation();
+  const A = ({ to, children }) => (
+    <Link
+      to={to}
+      style={{
+        padding: "8px 12px",
+        borderRadius: 8,
+        textDecoration: "none",
+        background: pathname === to ? "#eee" : "transparent"
+      }
+      }
+    >
+      {children}
+    </Link>
+  );
+
+  return (
+    <nav style={{
+      position: "sticky", top: 0, background: "white",
+      display: "flex", gap: 8, padding: 8, borderBottom: "1px solid #eee"
+    }}>
+      <A to="/" > Dashboard </A>
+      < A to="/kids" > Kids </A>
+      < A to="/items" > Items </A>
+    </nav>
+  );
+};
+
+export default Nav;
diff --git a/frontend/src/hooks/useLocalStorage.js b/frontend/src/hooks/useLocalStorage.js
new file mode 100644
index 0000000000..91d195cbfd
--- /dev/null
+++ b/frontend/src/hooks/useLocalStorage.js
@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+
+const useLocalStorage = (key, initial) => {
+  const [value, setValue] = useState(() => {
+    try {
+      const raw = localStorage.getItem(key);
+      return raw ? JSON.parse(raw) : initial;
+    } catch {
+      return initial;
+    }
+  });
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(key, JSON.stringify(value));
+    } catch { }
+  }, [key, value]);
+
+  return [value, setValue];
+};
+
+export default useLocalStorage;
diff --git a/frontend/src/index.css b/frontend/src/index.css
index e69de29bb2..cd0262287a 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -0,0 +1,92 @@
+/* Base */
+:root {
+  --gap: 12px;
+  --radius: 10px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+}
+
+body {
+  margin: 0;
+  background: #fafafa;
+  color: #111;
+}
+
+main {
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 16px;
+}
+
+/* Forms */
+form {
+  display: grid;
+  gap: var(--gap);
+}
+
+label {
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+
+input,
+select,
+button {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid #ddd;
+  border-radius: var(--radius);
+  font-size: 1rem;
+  background: #fff;
+}
+
+button {
+  border: none;
+  background: #111;
+  color: #fff;
+  cursor: pointer;
+}
+
+button:hover {
+  opacity: 0.95;
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Cards */
+.card {
+  background: #fff;
+  border: 1px solid #eee;
+  border-radius: var(--radius);
+  padding: 12px;
+}
+
+/* Mobile first spacing */
+section {
+  margin-top: 16px;
+}
+
+/* Focus visible for keyboard a11y */
+:focus-visible {
+  outline: 2px solid #3b82f6;
+  /* accessible blue */
+  outline-offset: 2px;
+}
+
+/* Responsive helper */
+@media (min-width: 768px) {
+  .row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--gap);
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/lib/api.js b/frontend/src/lib/api.js
new file mode 100644
index 0000000000..c3a720a56a
--- /dev/null
+++ b/frontend/src/lib/api.js
@@ -0,0 +1,12 @@
+const API_URL = import.meta.env.VITE_API_URL || "http://localhost:8081";
+
+export async function api(path, options = {}) {
+  const token = localStorage.getItem("token");
+  const headers = new Headers(options.headers || {});
+  headers.set("Content-Type", "application/json");
+  if (token) headers.set("Authorization", `Bearer ${token}`);
+
+  const res = await fetch(`${API_URL}${path}`, { ...options, headers });
+  if (!res.ok) throw new Error(await res.text());
+  return res.json();
+}
diff --git a/frontend/src/lib/growth.js b/frontend/src/lib/growth.js
new file mode 100644
index 0000000000..adc04278ee
--- /dev/null
+++ b/frontend/src/lib/growth.js
@@ -0,0 +1,62 @@
+// --- Simple growth model for 0–5y ---
+// 1) Estimate height from age (months) using WHO-ish median checkpoints + linear interpolation
+// 2) Map height -> EU clothing size (nearest standard step)
+// 3) If a measured height exists now, calibrate the whole curve by that delta
+
+export const monthsSince = (dateStr) => {
+  const d = new Date(dateStr);
+  return Math.max(
+    0,
+    Math.floor((Date.now() - d.getTime()) / (1000 * 60 * 60 * 24 * 30.44))
+  );
+};
+
+// Median checkpoints (unisex-ish) for height in cm
+const PTS = [
+  { m: 0, h: 50 }, { m: 3, h: 61 }, { m: 6, h: 67 }, { m: 9, h: 72 },
+  { m: 12, h: 76 }, { m: 18, h: 82 }, { m: 24, h: 88 }, { m: 36, h: 96 },
+  { m: 48, h: 103 }, { m: 60, h: 110 }
+];
+
+export const heightAtMonths = (m) => {
+  if (m <= PTS[0].m) return PTS[0].h;
+  if (m >= PTS[PTS.length - 1].m) return PTS[PTS.length - 1].h;
+  for (let i = 0; i < PTS.length - 1; i++) {
+    const a = PTS[i], b = PTS[i + 1];
+    if (m >= a.m && m <= b.m) {
+      const t = (m - a.m) / (b.m - a.m);
+      return a.h + t * (b.h - a.h);
+    }
+  }
+  return 104;
+};
+
+export const heightToSize = (h) => {
+  if (!h) return null;
+  const steps = [50, 56, 62, 68, 74, 80, 86, 92, 98, 104, 110, 116, 122, 128, 134, 140, 146, 152, 158];
+  let best = steps[0];
+  for (const s of steps) if (Math.abs(s - h) < Math.abs(best - h)) best = s;
+  return best;
+};
+
+// Build next-12-months series; if currentHeight is provided, calibrate curve by its delta.
+export const predictionSeries = ({ birthdate, currentHeight }) => {
+  const start = new Date();
+  const nowM = monthsSince(birthdate);
+  const estNow = heightAtMonths(nowM);
+  const delta = (typeof currentHeight === "number" && currentHeight > 0) ? (currentHeight - estNow) : 0;
+
+  const data = [];
+  for (let m = 0; m <= 12; m++) {
+    const d = new Date(start.getFullYear(), start.getMonth() + m, 1);
+    const ageM = nowM + m;
+    const h = heightAtMonths(ageM) + delta;
+    const size = heightToSize(h);
+    data.push({
+      label: d.toLocaleString("default", { month: "short" }),
+      size,
+      height: Math.round(h)
+    });
+  }
+  return data;
+};
\ No newline at end of file
diff --git a/frontend/src/lib/predict.js b/frontend/src/lib/predict.js
new file mode 100644
index 0000000000..bf3c8ad810
--- /dev/null
+++ b/frontend/src/lib/predict.js
@@ -0,0 +1,19 @@
+// naive demo: if age < 3 → +1 size every 8 months; else +1 every 12 months
+export const predictSizes = ({ currentSize, birthdate }) => {
+  const start = new Date();
+  const points = [];
+  let size = parseInt(String(currentSize), 10) || 100;
+
+  for (let m = 0; m <= 12; m++) {
+    const date = new Date(start.getFullYear(), start.getMonth() + m, 1);
+    const ageYears = (date - new Date(birthdate)) / (365.25 * 24 * 60 * 60 * 1000);
+    const bumpEvery = ageYears < 3 ? 8 : 12;
+    if (m !== 0 && m % bumpEvery === 0) size += 1;
+
+    points.push({
+      label: date.toLocaleString("default", { month: "short" }),
+      size
+    });
+  }
+  return points;
+};
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 51294f3998..f18b0f0d14 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { App } from "./App.jsx";
+import App from "./App";
 import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
new file mode 100644
index 0000000000..900f18a709
--- /dev/null
+++ b/frontend/src/pages/Dashboard.jsx
@@ -0,0 +1,219 @@
+import { useEffect, useMemo, useState } from "react";
+import { api } from "../lib/api";
+import useLocalStorage from "../hooks/useLocalStorage";
+import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";
+import { useAuth } from "../store/auth";
+import { predictionSeries, heightToSize, monthsSince } from "../lib/growth";
+
+// helpers (top of file)
+const seasonOrder = ["winter", "spring", "summer", "autumn", "all"];
+const nextSeason = (now = new Date()) => {
+  const m = now.getMonth();
+  if (m === 11 || m <= 1) return "spring"; // Dec–Feb -> spring next
+  if (m >= 2 && m <= 4) return "summer";   // Mar–May -> summer
+  if (m >= 5 && m <= 7) return "autumn";   // Jun–Aug -> autumn
+  return "winter";                          // Sep–Nov -> winter
+};
+const needByDate = (season, now = new Date()) => {
+  const targetMonth = { winter: 10, spring: 2, summer: 5, autumn: 8 }[season]; // Nov/Mar/Jun/Sep 1st
+  if (targetMonth == null) return null;
+  const y = now.getMonth() <= targetMonth ? now.getFullYear() : now.getFullYear() + 1;
+  return new Date(y, targetMonth, 1);
+};
+
+// WHO-ish median height checkpoints (unisex-ish, good enough for MVP)
+const AGE_HEIGHT_POINTS = [
+  { m: 0, h: 50 },
+  { m: 3, h: 61 },
+  { m: 6, h: 67 },
+  { m: 9, h: 72 },
+  { m: 12, h: 76 },
+  { m: 18, h: 82 },
+  { m: 24, h: 88 },
+  { m: 36, h: 96 },
+  { m: 48, h: 103 },
+  { m: 60, h: 110 }
+];
+
+// linear interpolation between points
+const estimateHeightFromAgeMonths = (months) => {
+  const pts = AGE_HEIGHT_POINTS;
+  if (months <= pts[0].m) return pts[0].h;
+  if (months >= pts[pts.length - 1].m) return pts[pts.length - 1].h;
+  for (let i = 0; i < pts.length - 1; i++) {
+    const a = pts[i], b = pts[i + 1];
+    if (months >= a.m && months <= b.m) {
+      const t = (months - a.m) / (b.m - a.m);
+      return a.h + t * (b.h - a.h);
+    }
+  }
+  return 104; // fallback
+};
+
+
+const Dashboard = () => {
+  const logout = useAuth((s) => s.logout);
+  const [kids, setKids] = useState([]);
+  const [items, setItems] = useState([]);
+  const [kidId, setKidId] = useLocalStorage("kidId", "");
+
+  useEffect(() => { api("/kids").then(setKids).catch(console.error); }, []);
+  useEffect(() => { api("/items").then(setItems).catch(console.error); }, []);
+
+  const kid = useMemo(() => {
+    if (!kids.length) return null;
+    const k = kids.find((x) => x._id === kidId) || kids[0];
+    if (!kidId && k) setKidId(k._id);
+    return k;
+  }, [kids, kidId, setKidId]);
+
+  // 🔹 use kid.height if available → convert to clothing size; fallback to 104
+  const baseSize = useMemo(() => {
+    // 1) prefer explicit height
+    const fromHeight = heightToSize(kid?.height);
+    if (fromHeight) return fromHeight;
+
+    // 2) otherwise estimate from age → height → size
+    if (kid?.birthdate) {
+      const m = monthsSince(kid.birthdate);
+      const estH = estimateHeightFromAgeMonths(m);
+      const fromAge = heightToSize(estH);
+      if (fromAge) return fromAge;
+    }
+
+    // 3) fallback
+    return 104;
+  }, [kid?.height, kid?.birthdate]);
+
+
+  const chartData = useMemo(() => {
+    if (!kid) return [];
+    const currentHeight = kid.height ? Number(kid.height) : undefined;
+    return predictionSeries({ birthdate: kid.birthdate, currentHeight });
+  }, [kid]);
+
+  // (optional) nicer footnote explaining source of base size:
+  const baseNote = kid?.height
+    ? `from measured ${kid.height} cm`
+    : `estimated from age ${monthsSince(kid?.birthdate)} mo ≈ ${chartData[0]?.height} cm`;
+
+  const upcoming = useMemo(() => {
+    if (!kid) return [];
+    return items
+      .filter((i) => i.status === "needed" && i.childId === kid._id)
+      .slice(0, 6);
+  }, [items, kid]);
+
+  // Needed items list (from real data)
+  const buyNext = useMemo(() => {
+    if (!kid) return [];
+    return items
+      .filter(i => i.status === "needed" && i.childId === kid._id)
+      .map(i => ({ ...i, needBy: needByDate(i.season) }))
+      .sort((a, b) => (a.needBy?.getTime() || Infinity) - (b.needBy?.getTime() || Infinity))
+      .slice(0, 5); // keep it short on dashboard
+  }, [items, kid]);
+
+  // Super-simple predictions: suggest core pieces for NEXT season, +1 size
+  const preds = useMemo(() => {
+    if (!kid) return [];
+    const ns = nextSeason();
+    const sz = (parseInt(baseSize, 10) || 104) + 1; // naive bump for next season
+    // pick 2–3 common seasonals; adjust per season if you want
+    const core = ns === "winter" ? ["jacket", "boots"] :
+      ns === "summer" ? ["hat", "top"] :
+        ns === "spring" ? ["jacket", "pants"] : ["jacket", "pants"];
+    return core.map(type => ({ type, size: sz, season: ns, needBy: needByDate(ns) }));
+  }, [kid, baseSize]);
+
+  return (
+    <main className="p-4 max-w-sm mx-auto">
+      <header style={{ display: "flex", gap: 8, alignItems: "center" }}>
+        <h1 style={{ margin: 0 }}>Dashboard</h1>
+        <div style={{ marginLeft: "auto" }}>
+          <button onClick={logout}>Logout</button>
+        </div>
+      </header>
+
+      <section style={{ marginTop: 12 }}>
+        <label style={{ display: "block", marginBottom: 4 }}>Kid</label>
+        <select
+          aria-label="Select kid"
+          value={kid?._id || ""}
+          onChange={(e) => setKidId(e.target.value)}
+          style={{ width: "100%" }}
+        >
+          {kids.map((k) => (
+            <option key={k._id} value={k._id}>{k.name}</option>
+          ))}
+        </select>
+      </section>
+
+      <section style={{ marginTop: 16 }}>
+        <h2 style={{ margin: 0, marginBottom: 8 }}>Size prediction (next 12 months)</h2>
+        <div style={{ width: "100%", height: 200, border: "1px solid #eee", borderRadius: 8, padding: 8 }}>
+          {chartData.length ? (
+            <ResponsiveContainer>
+              <LineChart data={chartData}>
+                <XAxis dataKey="label" />
+                <YAxis allowDecimals={false} />
+                <Tooltip />
+                <Line type="monotone" dataKey="size" dot strokeWidth={2} />
+              </LineChart>
+            </ResponsiveContainer>
+          ) : (
+            <p>No data yet</p>
+          )}
+        </div>
+        <p style={{ fontSize: 12, marginTop: 6 }}>
+          Base size: <b>{baseSize}</b>{kid?.height ? ` (from ${kid.height} cm height)` : " (default)"}.
+          Prediction uses a simple rule: &lt;3y ≈ +1 size every 8 months, otherwise +1/year.
+        </p>
+      </section>
+
+      <section style={{ marginTop: 16 }}>
+        <h2 style={{ margin: 0, marginBottom: 8 }}>Buy next</h2>
+        <div className="card" aria-live="polite">
+          {buyNext.length ? (
+            <ul style={{ margin: 0, paddingLeft: 18 }}>
+              {buyNext.map(n => (
+                <li key={n._id} style={{ display: "flex", gap: 8, alignItems: "center" }}>
+                  <span style={{ flex: 1 }}>{n.type} · size {n.size} · <b>{n.season}</b></span>
+                  <small>{n.needBy ? `need by ${n.needBy.toLocaleDateString()}` : ""}</small>
+                  <button
+                    type="button"
+                    onClick={async () => {
+                      const updated = await api(`/items/${n._id}`, { method: "PATCH", body: JSON.stringify({ status: "current" }) });
+                      // optimistic update
+                      setItems(prev => prev.map(x => x._id === n._id ? updated : x));
+                    }}
+                    style={{ width: "auto", padding: "6px 10px" }}
+                  >
+                    Mark bought
+                  </button>
+                </li>
+              ))}
+            </ul>
+          ) : <p style={{ margin: 0 }}>Nothing urgent 🎉</p>}
+        </div>
+      </section>
+
+      <section style={{ marginTop: 12 }}>
+        <h2 style={{ margin: 0, marginBottom: 8 }}>Predicted next season</h2>
+        <div className="card">
+          <ul style={{ margin: 0, paddingLeft: 18 }}>
+            {preds.map((p, i) => (
+              <li key={i}>
+                {p.type} · size {p.size} · <b>{p.season}</b> {p.needBy ? `· by ${p.needBy.toLocaleDateString()}` : ""}
+              </li>
+            ))}
+          </ul>
+          <small style={{ color: "#555" }}>Tip: predictions are rough; adjust after measuring next month.</small>
+        </div>
+      </section>
+
+    </main>
+  );
+};
+
+export default Dashboard;
diff --git a/frontend/src/pages/Items.jsx b/frontend/src/pages/Items.jsx
new file mode 100644
index 0000000000..8650e56bf2
--- /dev/null
+++ b/frontend/src/pages/Items.jsx
@@ -0,0 +1,219 @@
+// src/pages/Items.jsx
+import { useEffect, useMemo, useState } from "react";
+import { api } from "../lib/api";
+
+const Items = () => {
+  // data
+  const [kids, setKids] = useState([]);
+  const [items, setItems] = useState([]);
+
+  // filters
+  const [childId, setChildId] = useState(localStorage.getItem("kidId") || "");
+  const [status, setStatus] = useState("needed");
+
+  // form
+  const [form, setForm] = useState({
+    type: "jacket",
+    size: "",
+    season: "winter",
+    status: "needed",
+    notes: "",
+  });
+
+  // load
+  useEffect(() => {
+    api("/kids").then((ks) => {
+      setKids(ks);
+      // default kid if none selected yet
+      if (!childId && ks.length) {
+        setChildId(ks[0]._id);
+        localStorage.setItem("kidId", ks[0]._id);
+      }
+    }).catch(console.error);
+
+    api("/items").then(setItems).catch(console.error);
+  }, []); // eslint-disable-line
+
+  // persist selected kid
+  useEffect(() => {
+    if (childId) localStorage.setItem("kidId", childId);
+  }, [childId]);
+
+  const filtered = useMemo(() => {
+    return items.filter((i) =>
+      (childId ? i.childId === childId : true) &&
+      (status ? i.status === status : true)
+    );
+  }, [items, childId, status]);
+
+  const addItem = async (e) => {
+    e.preventDefault();
+    if (!childId) return;
+
+    const body = { ...form, childId };
+    const created = await api("/items", {
+      method: "POST",
+      body: JSON.stringify(body),
+    });
+
+    setItems((prev) => [...prev, created]);
+    setForm({ type: "jacket", size: "", season: "winter", status: "needed", notes: "" });
+  };
+
+  const removeItem = async (id) => {
+    await api(`/items/${id}`, { method: "DELETE" });
+    setItems((prev) => prev.filter((i) => i._id !== id));
+  };
+
+  return (
+    <main>
+      <h1>Items</h1>
+
+      {/* Filters */}
+      <section className="row" aria-label="Filters">
+        <div>
+          <label htmlFor="filter-kid">Kid</label>
+          <select
+            id="filter-kid"
+            value={childId}
+            onChange={(e) => setChildId(e.target.value)}
+          >
+            <option value="">All</option>
+            {kids.map((k) => (
+              <option key={k._id} value={k._id}>
+                {k.name}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div>
+          <label htmlFor="filter-status">Status</label>
+          <select
+            id="filter-status"
+            value={status}
+            onChange={(e) => setStatus(e.target.value)}
+          >
+            <option value="">All</option>
+            <option value="needed">Needed</option>
+            <option value="current">Current</option>
+            <option value="stored">Stored</option>
+            <option value="to-sell">To sell</option>
+          </select>
+        </div>
+      </section>
+
+      {/* List */}
+      <section style={{ marginTop: 12 }}>
+        <div className="card" aria-live="polite">
+          {filtered.length === 0 ? (
+            <p style={{ margin: 0 }}>No items match the current filters.</p>
+          ) : (
+            <ul style={{ margin: 0, paddingLeft: 18 }}>
+              {filtered.map((i) => (
+                <li key={i._id} style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
+                  <span style={{ flex: 1 }}>
+                    {i.type} • size {i.size} • {i.season} • {i.status}
+                  </span>
+                  <button
+                    type="button"
+                    onClick={() => removeItem(i._id)}
+                    aria-label={`Delete ${i.type} size ${i.size}`}
+                    title="Delete"
+                    style={{ width: "auto", padding: "6px 10px", background: "#e11d48" }}
+                  >
+                    Delete
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </section>
+
+      {/* Add form */}
+      <section style={{ marginTop: 12 }}>
+        <form onSubmit={addItem} aria-label="Add item form" className="card">
+          <h2 style={{ marginTop: 0 }}>Add item</h2>
+
+          <div className="row">
+            <div>
+              <label htmlFor="item-type">Type</label>
+              <select
+                id="item-type"
+                value={form.type}
+                onChange={(e) => setForm({ ...form, type: e.target.value })}
+              >
+                <option>jacket</option>
+                <option>pants</option>
+                <option>boots</option>
+                <option>hat</option>
+                <option>top</option>
+                <option>gloves</option>
+                <option>other</option>
+              </select>
+            </div>
+
+            <div>
+              <label htmlFor="item-size">Size</label>
+              <input
+                id="item-size"
+                placeholder="e.g., 110"
+                value={form.size}
+                onChange={(e) => setForm({ ...form, size: e.target.value })}
+                required
+              />
+            </div>
+          </div>
+
+          <div className="row">
+            <div>
+              <label htmlFor="item-season">Season</label>
+              <select
+                id="item-season"
+                value={form.season}
+                onChange={(e) => setForm({ ...form, season: e.target.value })}
+              >
+                <option>winter</option>
+                <option>spring</option>
+                <option>summer</option>
+                <option>autumn</option>
+                <option>all</option>
+              </select>
+            </div>
+
+            <div>
+              <label htmlFor="item-status">Status</label>
+              <select
+                id="item-status"
+                value={form.status}
+                onChange={(e) => setForm({ ...form, status: e.target.value })}
+              >
+                <option>needed</option>
+                <option>current</option>
+                <option>stored</option>
+                <option>to-sell</option>
+              </select>
+            </div>
+          </div>
+
+          <div>
+            <label htmlFor="item-notes">Notes</label>
+            <input
+              id="item-notes"
+              placeholder="notes (optional)"
+              value={form.notes}
+              onChange={(e) => setForm({ ...form, notes: e.target.value })}
+            />
+          </div>
+
+          <button type="submit" disabled={!childId}>
+            Add (select kid)
+          </button>
+        </form>
+      </section>
+    </main>
+  );
+};
+
+export default Items;
\ No newline at end of file
diff --git a/frontend/src/pages/Kids.jsx b/frontend/src/pages/Kids.jsx
new file mode 100644
index 0000000000..f055f30f02
--- /dev/null
+++ b/frontend/src/pages/Kids.jsx
@@ -0,0 +1,58 @@
+import { useState, useEffect } from "react";
+import { api } from "../lib/api";
+
+
+const Kids = () => {
+  const [kids, setKids] = useState([]);
+  const [name, setName] = useState("");
+  const [birthdate, setBirthdate] = useState("");
+  const [height, setHeight] = useState("");
+
+  useEffect(() => {
+    api("/kids").then(setKids).catch(console.error);
+    console.log("VITE_API_URL", import.meta.env.VITE_API_URL);
+  }, []);
+
+  const addKid = async (e) => {
+    e.preventDefault();
+    const kid = await api("/kids", {
+      method: "POST",
+      body: JSON.stringify({ name, birthdate, height })
+    });
+    setKids([...kids, kid]);
+    setName(""); setBirthdate("");
+  };
+
+  return (
+    <main className="p-4 max-w-sm mx-auto">
+      <h1>Kids</h1>
+      <form onSubmit={addKid} aria-label="Add kid form">
+        <div>
+          <label htmlFor="kid-name">Name</label>
+          <input id="kid-name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Name" required />
+        </div>
+
+        <div className="row">
+          <div>
+            <label htmlFor="kid-birthdate">Birthdate</label>
+            <input id="kid-birthdate" type="date" value={birthdate} onChange={(e) => setBirthdate(e.target.value)} required />
+          </div>
+          <div>
+            <label htmlFor="kid-height">Height (cm)</label>
+            <input id="kid-height" type="number" value={height} onChange={(e) => setHeight(e.target.value)} placeholder="e.g., 98" min="40" max="200" />
+          </div>
+        </div>
+
+        <button type="submit">Add Kid</button>
+      </form>
+
+      <ul>
+        {kids.map(k => (
+          <li key={k._id}>{k.name} (🎂 {new Date(k.birthdate).toLocaleDateString()})</li>
+        ))}
+      </ul>
+    </main>
+  );
+};
+
+export default Kids;
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
new file mode 100644
index 0000000000..38500ecec1
--- /dev/null
+++ b/frontend/src/pages/Login.jsx
@@ -0,0 +1,36 @@
+import { useForm } from "react-hook-form";
+import { useAuth } from "../store/auth";
+import { api } from "../lib/api";
+import { Link, useNavigate } from "react-router-dom";
+
+const Login = () => {
+  const { register, handleSubmit } = useForm();
+  const setToken = useAuth((s) => s.setToken);
+  const nav = useNavigate();
+
+  const onSubmit = async (data) => {
+    const res = await api("/auth/login", { method: "POST", body: JSON.stringify(data) });
+    setToken(res.token);
+    nav("/");
+  };
+
+  return (
+    // ...
+    <main>
+      <h1>Login</h1>
+      <form onSubmit={handleSubmit(onSubmit)} aria-label="Login form">
+        <div>
+          <label htmlFor="login-email">Email</label>
+          <input id="login-email" {...register("email", { required: true })} type="email" autoComplete="email" />
+        </div>
+        <div>
+          <label htmlFor="login-password">Password</label>
+          <input id="login-password" {...register("password", { required: true, minLength: 6 })} type="password" autoComplete="current-password" />
+        </div>
+        <button type="submit">Sign in</button>
+      </form>
+    </main>
+  );
+};
+
+export default Login;
diff --git a/frontend/src/pages/Register.jsx b/frontend/src/pages/Register.jsx
new file mode 100644
index 0000000000..457bf78b4a
--- /dev/null
+++ b/frontend/src/pages/Register.jsx
@@ -0,0 +1,32 @@
+import { useForm } from "react-hook-form";
+import { useAuth } from "../store/auth";
+import { api } from "../lib/api";
+import { Link, useNavigate } from "react-router-dom";
+
+const Register = () => {
+  const { register, handleSubmit } = useForm();
+  const setToken = useAuth((s) => s.setToken);
+  const nav = useNavigate();
+
+  const onSubmit = async (data) => {
+    const res = await api("/auth/register", { method: "POST", body: JSON.stringify(data) });
+    setToken(res.token);
+    nav("/");
+  };
+
+  return (
+    <main className="p-4 max-w-sm mx-auto">
+      <h1>Create account</h1>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <label>Email</label>
+        <input {...register("email", { required: true })} type="email" />
+        <label>Password</label>
+        <input {...register("password", { required: true, minLength: 6 })} type="password" />
+        <button type="submit">Sign up</button>
+      </form>
+      <p className="mt-2">Already have an account? <Link to="/login">Login</Link></p>
+    </main>
+  );
+};
+
+export default Register;
diff --git a/frontend/src/store/auth.js b/frontend/src/store/auth.js
new file mode 100644
index 0000000000..bacd51c2a2
--- /dev/null
+++ b/frontend/src/store/auth.js
@@ -0,0 +1,14 @@
+import { create } from "zustand";
+
+export const useAuth = create((set) => ({
+  token: localStorage.getItem("token"),
+  setToken: (t) => {
+    if (t) localStorage.setItem("token", t);
+    else localStorage.removeItem("token");
+    set({ token: t });
+  },
+  logout: () => {
+    localStorage.removeItem("token");
+    set({ token: null });
+  },
+}));