From a619d44eca67ab90d5c39724e0cc7b8e6189a8cb Mon Sep 17 00:00:00 2001
From: Aditya Gupta <mail@adityagupta.dev>
Date: Sat, 6 Jun 2026 10:51:13 +0530
Subject: [PATCH] refactor: everything

---
 src/App.jsx                    | 388 ++-------------------------------
 src/components/BeanDetail.jsx  |  33 +++
 src/components/BeanForm.jsx    |  59 +++++
 src/components/BottomNav.jsx   |  42 ++++
 src/components/BrewCard.jsx    |  36 +++
 src/components/BrewForm.jsx    |  90 ++++++++
 src/components/CreateModal.jsx |  32 +++
 src/constants.js               |   8 +
 src/{ => pages}/Login.jsx      |   6 +-
 src/pages/ProfilePage.jsx      |  73 +++++++
 src/{ => pages}/Register.jsx   |   6 +-
 11 files changed, 394 insertions(+), 379 deletions(-)
 create mode 100644 src/components/BeanDetail.jsx
 create mode 100644 src/components/BeanForm.jsx
 create mode 100644 src/components/BottomNav.jsx
 create mode 100644 src/components/BrewCard.jsx
 create mode 100644 src/components/BrewForm.jsx
 create mode 100644 src/components/CreateModal.jsx
 create mode 100644 src/constants.js
 rename src/{ => pages}/Login.jsx (88%)
 create mode 100644 src/pages/ProfilePage.jsx
 rename src/{ => pages}/Register.jsx (92%)

diff --git a/src/App.jsx b/src/App.jsx
index 28a162e..d48c629 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,7 +1,22 @@
 import { useState, useEffect, useCallback, useContext, useRef } from "react";
 import { AuthContext } from "./AuthContext";
-import Login from "./Login";
-import Register from "./Register";
+
+// Import pages/views
+import Login from "./pages/Login";
+import Register from "./pages/Register";
+import ProfilePage from "./pages/ProfilePage";
+
+// Import refactored components
+import CreateModal from "./components/CreateModal";
+import BeanForm from "./components/BeanForm";
+import BrewForm from "./components/BrewForm";
+import BeanDetail from "./components/BeanDetail";
+import BrewCard from "./components/BrewCard";
+import BottomNav from "./components/BottomNav";
+
+
+// Import constants
+import { METHODS, METHOD_LABELS, METHOD_ICONS, METHOD_COLORS } from "./constants";
 
 // ─── Storage helpers ───
 const STORAGE_KEY = "coffee-logbook-data";
@@ -37,375 +52,6 @@ async function saveData(data) {
 
 const uid = () => Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
 
-const ROAST_TYPES = ["Light", "Light-Medium", "Medium", "Medium-Dark", "Dark"];
-const METHODS = ["pourover", "espresso", "coldbrew"];
-const METHOD_LABELS = { pourover: "Pour Over", espresso: "Espresso", coldbrew: "Cold Brew" };
-const METHOD_ICONS = { pourover: "☕", espresso: "⚡", coldbrew: "❄️" };
-const METHOD_COLORS = { pourover: "#8B6914", espresso: "#5C3317", coldbrew: "#2F4F6F" };
-
-const inputCls = "w-full px-3.5 py-3 border border-[#E8DFD3] rounded-lg bg-white text-sm text-[#2C1810] transition-colors outline-none focus:border-[#8B6914]";
-const labelCls = "block text-[10px] font-semibold uppercase tracking-wider text-[#6B5744] mb-1.5";
-
-// ─── Create Modal ───
-function CreateModal({ onClose, onAddBean, onAddBrew }) {
-  return (
-    <div className="fixed inset-0 bg-[rgba(44,24,16,0.5)] z-[100] flex items-end justify-center animate-fade-in" onClick={onClose}>
-      <div className="bg-[#FAF6F1] rounded-t-[28px] w-full max-w-[480px] px-5 pb-10 animate-slide-up" onClick={e => e.stopPropagation()}>
-        <div className="w-9 h-1 bg-[#E8DFD3] rounded mx-auto mt-3 mb-6" />
-        <div className="font-serif text-xl font-semibold text-[#2C1810] mb-6">What would you like to add?</div>
-        <div className="flex flex-col gap-3">
-          <button
-            className="flex items-center gap-4 px-5 py-4 bg-white border border-[#E8DFD3] rounded-2xl text-left cursor-pointer hover:shadow-[0_4px_16px_rgba(44,24,16,0.08)] transition-all active:scale-[0.98]"
-            onClick={() => { onClose(); onAddBrew(); }}>
-            <div className="w-12 h-12 rounded-xl bg-[#FAF6F1] flex items-center justify-center text-2xl flex-shrink-0">☕</div>
-            <div>
-              <div className="font-semibold text-[#2C1810] text-sm">Log a Brew</div>
-              <div className="text-xs text-[#9C8B7A] mt-0.5">Record a brewing session with recipe details</div>
-            </div>
-          </button>
-          <button
-            className="flex items-center gap-4 px-5 py-4 bg-white border border-[#E8DFD3] rounded-2xl text-left cursor-pointer hover:shadow-[0_4px_16px_rgba(44,24,16,0.08)] transition-all active:scale-[0.98]"
-            onClick={() => { onClose(); onAddBean(); }}>
-            <div className="w-12 h-12 rounded-xl bg-[#FAF6F1] flex items-center justify-center text-2xl flex-shrink-0">🫘</div>
-            <div>
-              <div className="font-semibold text-[#2C1810] text-sm">Add Bean</div>
-              <div className="text-xs text-[#9C8B7A] mt-0.5">Add a new coffee bean to your library</div>
-            </div>
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ─── Bean Form ───
-function BeanForm({ onSave, onClose, initial }) {
-  const [form, setForm] = useState(initial || { name: "", roastery: "", roastDate: "", roastType: "", image: "", tastingNotes: "" });
-  const set = (k, v) => setForm(p => ({ ...p, [k]: v }));
-  const canSave = form.name.trim().length > 0;
-
-  const handleImage = (e) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-    if (file.size > 2 * 1024 * 1024) { alert("Image must be under 2 MB"); return; }
-    const reader = new FileReader();
-    reader.onload = () => set("image", reader.result);
-    reader.readAsDataURL(file);
-  };
-
-  return (
-    <div className="fixed inset-0 bg-[rgba(44,24,16,0.4)] z-[100] flex items-end justify-center animate-fade-in" onClick={onClose}>
-      <div className="bg-[#FAF6F1] rounded-t-[24px] w-full max-w-[480px] max-h-[88vh] overflow-y-auto animate-slide-up px-5 pb-8" onClick={e => e.stopPropagation()}>
-        <div className="w-9 h-1 bg-[#E8DFD3] rounded mx-auto my-3" />
-        <div className="font-serif text-xl font-semibold text-[#2C1810] mb-5">{initial ? "Edit Bean" : "Add Bean"}</div>
-        <div className="mb-4"><label className={labelCls}>Bean Name *</label>
-          <input className={inputCls} placeholder="e.g. Ethiopia Yirgacheffe" value={form.name} onChange={e => set("name", e.target.value)} /></div>
-        <div className="mb-4"><label className={labelCls}>Roastery</label>
-          <input className={inputCls} placeholder="e.g. Blue Tokai" value={form.roastery} onChange={e => set("roastery", e.target.value)} /></div>
-        <div className="flex gap-2.5 mb-4">
-          <div className="flex-1"><label className={labelCls}>Roast Date</label>
-            <input className={inputCls} type="date" value={form.roastDate} onChange={e => set("roastDate", e.target.value)} /></div>
-          <div className="flex-1"><label className={labelCls}>Roast Type</label>
-            <select className={inputCls} value={form.roastType} onChange={e => set("roastType", e.target.value)}>
-              <option value="">Select…</option>
-              {ROAST_TYPES.map(r => <option key={r} value={r}>{r}</option>)}
-            </select></div>
-        </div>
-        <div className="mb-4">
-          <label className={labelCls}>Bean Photo</label>
-          <div className={`relative border-2 rounded-lg text-center cursor-pointer transition-all overflow-hidden ${form.image ? "border-[#E8DFD3] p-0" : "border-dashed border-[#E8DFD3] p-5 hover:border-[#8B6914]"}`}>
-            {form.image ? (
-              <><img src={form.image} alt="Bean" className="w-full h-40 object-cover rounded-lg block" />
-                <button className="absolute top-2 right-2 w-7 h-7 rounded-full bg-[rgba(44,24,16,0.7)] text-white border-none text-sm cursor-pointer flex items-center justify-center"
-                  onClick={(e) => { e.stopPropagation(); set("image", ""); }} type="button">×</button></>
-            ) : (<><div className="text-3xl mb-1.5 opacity-40">📷</div><div className="text-xs text-[#9C8B7A]">Tap to upload a photo</div></>)}
-            <input type="file" accept="image/*" onChange={handleImage} className="absolute inset-0 opacity-0 cursor-pointer" />
-          </div>
-          <div className="text-[11px] text-[#9C8B7A] mt-1">Max 2 MB · JPG, PNG, or WebP</div>
-        </div>
-        <div className="mb-4"><label className={labelCls}>Tasting Notes</label>
-          <textarea className={`${inputCls} resize-y min-h-[80px]`} placeholder="e.g. Citrus, dark chocolate, floral…" value={form.tastingNotes || ""} onChange={e => set("tastingNotes", e.target.value)} />
-          <div className="text-[11px] text-[#9C8B7A] mt-1">Flavour profile from the bag or your own impressions</div></div>
-        <button className="w-full py-3.5 border-none rounded-xl bg-[#2C1810] text-[#FAF6F1] text-sm font-semibold cursor-pointer mt-2"
-          style={{ opacity: canSave ? 1 : 0.4, cursor: canSave ? "pointer" : "not-allowed" }} disabled={!canSave}
-          onClick={() => { if (canSave) onSave(form); }}>
-          {initial ? "Save Changes" : "Add to Library"}
-        </button>
-      </div>
-    </div>
-  );
-}
-
-// ─── Brew Form ───
-function BrewForm({ beans, onSave, onClose }) {
-  const [method, setMethod] = useState("pourover");
-  const [form, setForm] = useState({ beanId: beans[0]?.id || "" });
-  const set = (k, v) => setForm(p => ({ ...p, [k]: v }));
-
-  if (beans.length === 0) {
-    return (
-      <div className="fixed inset-0 bg-[rgba(44,24,16,0.4)] z-[100] flex items-end justify-center animate-fade-in" onClick={onClose}>
-        <div className="bg-[#FAF6F1] rounded-t-[24px] w-full max-w-[480px] max-h-[88vh] overflow-y-auto animate-slide-up px-5 pb-8" onClick={e => e.stopPropagation()}>
-          <div className="w-9 h-1 bg-[#E8DFD3] rounded mx-auto my-3" />
-          <div className="font-serif text-xl font-semibold text-[#2C1810] mb-5">Log a Brew</div>
-          <div className="text-center py-12 text-[#9C8B7A]">
-            <div className="text-4xl mb-3 opacity-50">🫘</div>
-            <h3 className="text-base mb-1.5 text-[#6B5744]">No beans yet</h3>
-            <p className="text-[13px] leading-relaxed">Add a bean to your library first.</p>
-          </div>
-          <button className="w-full py-3.5 border border-[#E8DFD3] rounded-xl text-sm font-semibold text-[#6B5744] bg-transparent cursor-pointer" onClick={onClose}>Close</button>
-        </div>
-      </div>
-    );
-  }
-
-  const fields = {
-    pourover: [
-      { key: "grindSize", label: "Grind Size", placeholder: "e.g. 18 clicks", hint: "Relative to your grinder" },
-      { key: "waterTemp", label: "Water Temp", placeholder: "e.g. 93°C" },
-      { key: "beanWeight", label: "Bean Weight", placeholder: "e.g. 15g" },
-      { key: "brewRatio", label: "Brew Ratio", placeholder: "e.g. 1:16" },
-      { key: "brewTime", label: "Brew Time", placeholder: "e.g. 3:30" },
-      { key: "numPours", label: "# of Pours", placeholder: "e.g. 4", type: "number" },
-    ],
-    espresso: [
-      { key: "grindSize", label: "Grind Size", placeholder: "e.g. 8" },
-      { key: "dose", label: "Dose", placeholder: "e.g. 18g" },
-      { key: "yield", label: "Yield", placeholder: "e.g. 36g" },
-      { key: "brewTime", label: "Brew Time", placeholder: "e.g. 28s" },
-    ],
-    coldbrew: [
-      { key: "grindSize", label: "Grind Size", placeholder: "e.g. coarse" },
-      { key: "beanWeight", label: "Bean Weight", placeholder: "e.g. 100g" },
-      { key: "waterVolume", label: "Water Volume", placeholder: "e.g. 700ml" },
-      { key: "steepTime", label: "Steep Time", placeholder: "e.g. 18 hours" },
-    ],
-  };
-
-  return (
-    <div className="fixed inset-0 bg-[rgba(44,24,16,0.4)] z-[100] flex items-end justify-center animate-fade-in" onClick={onClose}>
-      <div className="bg-[#FAF6F1] rounded-t-[24px] w-full max-w-[480px] max-h-[88vh] overflow-y-auto animate-slide-up px-5 pb-8" onClick={e => e.stopPropagation()}>
-        <div className="w-9 h-1 bg-[#E8DFD3] rounded mx-auto my-3" />
-        <div className="font-serif text-xl font-semibold text-[#2C1810] mb-5">Log a Brew</div>
-        <div className="flex gap-1.5 mb-5">
-          {METHODS.map(m => (
-            <button key={m}
-              className={`flex-1 py-3 px-2 border-2 bg-white rounded-xl cursor-pointer text-center text-xs font-semibold transition-all ${method === m ? "border-current" : "border-[#E8DFD3] text-[#9C8B7A]"}`}
-              style={{ color: method === m ? METHOD_COLORS[m] : undefined }}
-              onClick={() => setMethod(m)}>
-              <div className="text-xl mb-1">{METHOD_ICONS[m]}</div>{METHOD_LABELS[m]}
-            </button>
-          ))}
-        </div>
-        <div className="mb-4"><label className={labelCls}>Bean *</label>
-          <select className={inputCls} value={form.beanId} onChange={e => set("beanId", e.target.value)}>
-            {beans.map(b => <option key={b.id} value={b.id}>{b.name}{b.roastery ? ` — ${b.roastery}` : ""}</option>)}
-          </select></div>
-        <div className="flex flex-wrap gap-2.5 mb-4">
-          {fields[method].map(f => (
-            <div key={f.key} className="flex-1 min-w-[45%]">
-              <label className={labelCls}>{f.label}</label>
-              <input className={inputCls} type={f.type || "text"} placeholder={f.placeholder}
-                value={form[f.key] || ""} onChange={e => set(f.key, e.target.value)} />
-              {f.hint && <div className="text-[11px] text-[#9C8B7A] mt-1">{f.hint}</div>}
-            </div>
-          ))}
-        </div>
-        <div className="mb-4"><label className={labelCls}>{method === "pourover" ? "Recipe Details" : "Notes"}</label>
-          <textarea className={`${inputCls} resize-y min-h-[80px]`}
-            placeholder="Describe your recipe, technique, or anything notable…"
-            value={form.recipeDetails || ""} onChange={e => set("recipeDetails", e.target.value)} /></div>
-        <div className="mb-4"><label className={labelCls}>Taste Notes</label>
-          <input className={inputCls} placeholder="e.g. citrus, chocolate, floral"
-            value={form.tasteNotes || ""} onChange={e => set("tasteNotes", e.target.value)} /></div>
-        <button className="w-full py-3.5 border-none rounded-xl bg-[#2C1810] text-[#FAF6F1] text-sm font-semibold cursor-pointer hover:opacity-90 mt-2"
-          onClick={() => onSave({ ...form, method })}>Save Brew Log</button>
-      </div>
-    </div>
-  );
-}
-
-// ─── Bean Detail ───
-function BeanDetail({ bean, logs, onBack, onEdit, onDelete }) {
-  const beanLogs = logs.filter(l => l.beanId === bean.id).sort((a, b) => b.createdAt - a.createdAt);
-  const roastTagCls = bean.roastType?.toLowerCase().includes("dark") ? "bg-[#E0D0BD] text-[#4A3520]"
-    : bean.roastType?.toLowerCase().includes("medium") ? "bg-[#F0E0C8] text-[#6B4E2A]"
-    : "bg-[#FFF3D6] text-[#8B6914]";
-  return (
-    <div>
-      <button className="flex items-center gap-1.5 border-none bg-transparent text-[13px] text-[#6B5744] cursor-pointer p-0 mb-4" onClick={onBack}>← Back</button>
-      {bean.image && <img src={bean.image} alt={bean.name} className="w-full h-44 object-cover rounded-2xl mb-4" />}
-      <h2 className="font-serif text-[22px] font-semibold text-[#2C1810] mb-1">{bean.name}</h2>
-      {bean.roastery && <div className="text-[#6B5744] text-sm mb-2">{bean.roastery}</div>}
-      {bean.tastingNotes && <div className="text-[13px] text-[#6B5744] italic mt-1.5 leading-snug mb-2.5">👅 {bean.tastingNotes}</div>}
-      <div className="flex gap-2 mt-2.5 flex-wrap">
-        {bean.roastType && <span className={`text-[11px] px-2.5 py-1 rounded-full font-medium ${roastTagCls}`}>{bean.roastType}</span>}
-        {bean.roastDate && <span className="text-[11px] px-2.5 py-1 rounded-full bg-[#F3EDE4] text-[#6B5744] font-medium">Roasted {bean.roastDate}</span>}
-        <span className="text-[11px] px-2.5 py-1 rounded-full bg-[#F3EDE4] text-[#6B5744] font-medium">{beanLogs.length} brew{beanLogs.length !== 1 ? "s" : ""}</span>
-      </div>
-      <div className="flex gap-2 mt-4">
-        <button className="flex-1 py-2.5 border border-[#E8DFD3] rounded-xl text-sm font-semibold text-[#6B5744] bg-transparent cursor-pointer hover:bg-[#F3EDE4] transition-colors" onClick={onEdit}>Edit</button>
-        <button className="flex-1 py-2.5 border border-[#B44040] rounded-xl text-xs font-semibold text-[#B44040] bg-transparent cursor-pointer" onClick={onDelete}>Delete</button>
-      </div>
-      <div className="mt-5">
-        <div className="text-[13px] font-semibold text-[#6B5744] uppercase tracking-widest mb-3">Brew History</div>
-        {beanLogs.length === 0 ? (
-          <div className="text-center py-6 text-[#9C8B7A]"><p className="text-[13px]">No brews logged with this bean yet.</p></div>
-        ) : beanLogs.map(log => <BrewCard key={log.id} log={log} beanName={bean.name} />)}
-      </div>
-    </div>
-  );
-}
-
-// ─── Brew Card ───
-function BrewCard({ log, beanName }) {
-  const color = METHOD_COLORS[log.method];
-  const allFields = Object.entries(log)
-    .filter(([k]) => !["id", "beanId", "method", "createdAt", "recipeDetails", "tasteNotes", "updatedAt", "isDeleted"].includes(k))
-    .filter(([, v]) => v !== "" && v != null);
-  const fieldLabels = { grindSize: "Grind", waterTemp: "Temp", beanWeight: "Weight", brewRatio: "Ratio", brewTime: "Time", numPours: "Pours", dose: "Dose", yield: "Yield", waterVolume: "Water", steepTime: "Steep" };
-  return (
-    <div className="relative mb-3">
-      <div className="brew-method-bar" style={{ background: color }} />
-      <div className="bg-white rounded-xl shadow-[0_1px_3px_rgba(44,24,16,0.06),0_4px_12px_rgba(44,24,16,0.04)] p-[18px] pl-6 border border-[#E8DFD3]">
-        <div className="flex justify-between items-start">
-          <div>
-            <div className="text-[11px] text-[#9C8B7A] tracking-wide">{new Date(log.createdAt).toLocaleDateString("en-IN", { day: "numeric", month: "short", year: "numeric" })}</div>
-            {beanName && <div className="text-sm font-semibold text-[#2C1810] mt-0.5">{beanName}</div>}
-          </div>
-          <div className="text-[11px] font-semibold uppercase tracking-widest" style={{ color }}>{METHOD_ICONS[log.method]} {METHOD_LABELS[log.method]}</div>
-        </div>
-        {allFields.length > 0 && (
-          <div className="flex flex-wrap gap-3 mt-2.5">
-            {allFields.map(([k, v]) => (
-              <div key={k} className="text-xs">
-                <div className="text-[#9C8B7A] text-[10px] uppercase tracking-wide">{fieldLabels[k] || k}</div>
-                <div className="font-semibold mt-0.5">{v}</div>
-              </div>
-            ))}
-          </div>
-        )}
-        {log.recipeDetails && <div className="text-[13px] text-[#6B5744] mt-2.5 italic leading-relaxed">📝 {log.recipeDetails}</div>}
-        {log.tasteNotes && <div className="text-[13px] text-[#6B5744] mt-1.5 italic leading-relaxed">👅 {log.tasteNotes}</div>}
-      </div>
-    </div>
-  );
-}
-
-// ─── Profile Page ───
-function ProfilePage({ user, isOnline, syncing, showSyncedStatus }) {
-  const { logout } = useContext(AuthContext);
-  return (
-    <div>
-      {/* Avatar & Name */}
-      <div className="flex flex-col items-center pt-6 pb-8">
-        <div className="w-20 h-20 rounded-full bg-[#2C1810] flex items-center justify-center text-3xl text-[#FAF6F1] font-serif font-bold mb-3">
-          {user?.username?.[0]?.toUpperCase() || "☕"}
-        </div>
-        <div className="font-serif text-xl font-semibold text-[#2C1810]">{user?.username}</div>
-        <div className="text-sm text-[#9C8B7A] mt-0.5">{user?.email}</div>
-        {showSyncedStatus && (
-          <div className={`flex items-center gap-1.5 text-[11px] font-medium px-3 py-1.5 rounded-full mt-3 transition-all ${isOnline ? "text-[#4A7C59] bg-[rgba(74,124,89,0.1)]" : "text-[#B44040] bg-[rgba(180,64,64,0.1)]"}`}>
-            <span className={`text-[10px] ${syncing ? "animate-sync-pulse" : ""}`}>●</span>
-            <span>{isOnline ? (syncing ? "Syncing…" : "All data synced") : "Offline — saved locally"}</span>
-          </div>
-        )}
-      </div>
-
-      {/* Account section */}
-      <div className="mb-6">
-        <div className="text-[11px] font-semibold uppercase tracking-widest text-[#9C8B7A] mb-2 px-1">Account</div>
-        <div className="bg-white rounded-2xl border border-[#E8DFD3] overflow-hidden">
-          <div className="flex items-center gap-3 px-4 py-3.5 border-b border-[#F3EDE4]">
-            <span className="text-lg">👤</span>
-            <div>
-              <div className="text-xs text-[#9C8B7A]">Username</div>
-              <div className="text-sm font-medium text-[#2C1810]">{user?.username}</div>
-            </div>
-          </div>
-          <div className="flex items-center gap-3 px-4 py-3.5">
-            <span className="text-lg">✉️</span>
-            <div>
-              <div className="text-xs text-[#9C8B7A]">Email</div>
-              <div className="text-sm font-medium text-[#2C1810]">{user?.email}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* App info */}
-      <div className="mb-6">
-        <div className="text-[11px] font-semibold uppercase tracking-widest text-[#9C8B7A] mb-2 px-1">App</div>
-        <div className="bg-white rounded-2xl border border-[#E8DFD3] overflow-hidden">
-          <div className="flex items-center justify-between px-4 py-3.5 border-b border-[#F3EDE4]">
-            <div className="flex items-center gap-3">
-              <span className="text-lg">☕</span>
-              <div className="text-sm font-medium text-[#2C1810]">Brew Journal</div>
-            </div>
-            <div className="text-xs text-[#9C8B7A] font-mono">{__APP_VERSION__}</div>
-          </div>
-          <div className="flex items-center gap-3 px-4 py-3.5">
-            <span className="text-lg">🗄️</span>
-            <div>
-              <div className="text-xs text-[#9C8B7A]">Storage</div>
-              <div className="text-sm font-medium text-[#2C1810]">Local + PostgreSQL</div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Sign out */}
-      <button
-        onClick={() => logout()}
-        className="w-full py-3.5 border border-[#B44040] rounded-2xl text-sm font-semibold text-[#B44040] bg-transparent cursor-pointer hover:bg-[rgba(180,64,64,0.05)] transition-colors">
-        Sign Out
-      </button>
-    </div>
-  );
-}
-
-// ─── Bottom Nav ───
-function BottomNav({ view, setView, setSelectedBean, onCreatePress }) {
-  const items = [
-    { id: "dashboard", label: "Home", icon: "🏠" },
-    { id: "beans", label: "Recipes", icon: "🫘" },
-    { id: "create", label: "Create", icon: "＋", isAction: true },
-    { id: "brews", label: "Logs", icon: "📋" },
-    { id: "profile", label: "Profile", icon: "👤" },
-  ];
-
-  return (
-    <div className="fixed bottom-4 left-1/2 -translate-x-1/2 w-[calc(100%-32px)] max-w-[448px] z-[60]">
-      <div className="bg-white/90 backdrop-blur-md border border-[#E8DFD3] rounded-[28px] shadow-[0_8px_32px_rgba(44,24,16,0.12),0_2px_8px_rgba(44,24,16,0.08)] flex items-center px-2 py-2">
-        {items.map(item => {
-          const isActive = view === item.id;
-          if (item.isAction) {
-            return (
-              <button
-                key={item.id}
-                onClick={onCreatePress}
-                className="flex-1 flex flex-col items-center justify-center mx-1">
-                <div className="w-12 h-12 rounded-full bg-[#2C1810] flex items-center justify-center text-[#FAF6F1] text-2xl font-light shadow-[0_4px_12px_rgba(44,24,16,0.25)] transition-transform active:scale-90 hover:scale-105">
-                  ＋
-                </div>
-              </button>
-            );
-          }
-          return (
-            <button
-              key={item.id}
-              onClick={() => { setView(item.id); setSelectedBean(null); }}
-              className={`flex-1 flex flex-col items-center gap-0.5 py-1.5 rounded-[20px] cursor-pointer border-none transition-all ${isActive ? "bg-[#FAF6F1]" : "bg-transparent"}`}>
-              <span className={`text-xl transition-transform ${isActive ? "scale-110" : "scale-100 opacity-50"}`}>{item.icon}</span>
-              <span className={`text-[10px] font-semibold tracking-wide transition-colors ${isActive ? "text-[#2C1810]" : "text-[#9C8B7A]"}`}>{item.label}</span>
-            </button>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
 // ─── Main App ───
 export default function CoffeeLogbook() {
   const { token, user, loading, logout } = useContext(AuthContext);
diff --git a/src/components/BeanDetail.jsx b/src/components/BeanDetail.jsx
new file mode 100644
index 0000000..9a7134b
--- /dev/null
+++ b/src/components/BeanDetail.jsx
@@ -0,0 +1,33 @@
+import React from "react";
+import BrewCard from "./BrewCard";
+
+export default function BeanDetail({ bean, logs, onBack, onEdit, onDelete }) {
+  const beanLogs = logs.filter(l => l.beanId === bean.id).sort((a, b) => b.createdAt - a.createdAt);
+  const roastTagCls = bean.roastType?.toLowerCase().includes("dark") ? "bg-[#E0D0BD] text-[#4A3520]"
+    : bean.roastType?.toLowerCase().includes("medium") ? "bg-[#F0E0C8] text-[#6B4E2A]"
+    : "bg-[#FFF3D6] text-[#8B6914]";
+  return (
+    <div>
+      <button className="flex items-center gap-1.5 border-none bg-transparent text-[13px] text-[#6B5744] cursor-pointer p-0 mb-4" onClick={onBack}>← Back</button>
+      {bean.image && <img src={bean.image} alt={bean.name} className="w-full h-44 object-cover rounded-2xl mb-4" />}
+      <h2 className="font-serif text-[22px] font-semibold text-[#2C1810] mb-1">{bean.name}</h2>
+      {bean.roastery && <div className="text-[#6B5744] text-sm mb-2">{bean.roastery}</div>}
+      {bean.tastingNotes && <div className="text-[13px] text-[#6B5744] italic mt-1.5 leading-snug mb-2.5">👅 {bean.tastingNotes}</div>}
+      <div className="flex gap-2 mt-2.5 flex-wrap">
+        {bean.roastType && <span className={`text-[11px] px-2.5 py-1 rounded-full font-medium ${roastTagCls}`}>{bean.roastType}</span>}
+        {bean.roastDate && <span className="text-[11px] px-2.5 py-1 rounded-full bg-[#F3EDE4] text-[#6B5744] font-medium">Roasted {bean.roastDate}</span>}
+        <span className="text-[11px] px-2.5 py-1 rounded-full bg-[#F3EDE4] text-[#6B5744] font-medium">{beanLogs.length} brew{beanLogs.length !== 1 ? "s" : ""}</span>
+      </div>
+      <div className="flex gap-2 mt-4">
+        <button className="flex-1 py-2.5 border border-[#E8DFD3] rounded-xl text-sm font-semibold text-[#6B5744] bg-transparent cursor-pointer hover:bg-[#F3EDE4] transition-colors" onClick={onEdit}>Edit</button>
+        <button className="flex-1 py-2.5 border border-[#B44040] rounded-xl text-xs font-semibold text-[#B44040] bg-transparent cursor-pointer" onClick={onDelete}>Delete</button>
+      </div>
+      <div className="mt-5">
+        <div className="text-[13px] font-semibold text-[#6B5744] uppercase tracking-widest mb-3">Brew History</div>
+        {beanLogs.length === 0 ? (
+          <div className="text-center py-6 text-[#9C8B7A]"><p className="text-[13px]">No brews logged with this bean yet.</p></div>
+        ) : beanLogs.map(log => <BrewCard key={log.id} log={log} beanName={bean.name} />)}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/BeanForm.jsx b/src/components/BeanForm.jsx
new file mode 100644
index 0000000..220f07d
--- /dev/null
+++ b/src/components/BeanForm.jsx
@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+import { ROAST_TYPES, inputCls, labelCls } from "../constants";
+
+export default function BeanForm({ onSave, onClose, initial }) {
+  const [form, setForm] = useState(initial || { name: "", roastery: "", roastDate: "", roastType: "", image: "", tastingNotes: "" });
+  const set = (k, v) => setForm(p => ({ ...p, [k]: v }));
+  const canSave = form.name.trim().length > 0;
+
+  const handleImage = (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    if (file.size > 2 * 1024 * 1024) { alert("Image must be under 2 MB"); return; }
+    const reader = new FileReader();
+    reader.onload = () => set("image", reader.result);
+    reader.readAsDataURL(file);
+  };
+
+  return (
+    <div className="fixed inset-0 bg-[rgba(44,24,16,0.4)] z-[100] flex items-end justify-center animate-fade-in" onClick={onClose}>
+      <div className="bg-[#FAF6F1] rounded-t-[24px] w-full max-w-[480px] max-h-[88vh] overflow-y-auto animate-slide-up px-5 pb-8" onClick={e => e.stopPropagation()}>
+        <div className="w-9 h-1 bg-[#E8DFD3] rounded mx-auto my-3" />
+        <div className="font-serif text-xl font-semibold text-[#2C1810] mb-5">{initial ? "Edit Bean" : "Add Bean"}</div>
+        <div className="mb-4"><label className={labelCls}>Bean Name *</label>
+          <input className={inputCls} placeholder="e.g. Ethiopia Yirgacheffe" value={form.name} onChange={e => set("name", e.target.value)} /></div>
+        <div className="mb-4"><label className={labelCls}>Roastery</label>
+          <input className={inputCls} placeholder="e.g. Blue Tokai" value={form.roastery} onChange={e => set("roastery", e.target.value)} /></div>
+        <div className="flex gap-2.5 mb-4">
+          <div className="flex-1"><label className={labelCls}>Roast Date</label>
+            <input className={inputCls} type="date" value={form.roastDate} onChange={e => set("roastDate", e.target.value)} /></div>
+          <div className="flex-1"><label className={labelCls}>Roast Type</label>
+            <select className={inputCls} value={form.roastType} onChange={e => set("roastType", e.target.value)}>
+              <option value="">Select…</option>
+              {ROAST_TYPES.map(r => <option key={r} value={r}>{r}</option>)}
+            </select></div>
+        </div>
+        <div className="mb-4">
+          <label className={labelCls}>Bean Photo</label>
+          <div className={`relative border-2 rounded-lg text-center cursor-pointer transition-all overflow-hidden ${form.image ? "border-[#E8DFD3] p-0" : "border-dashed border-[#E8DFD3] p-5 hover:border-[#8B6914]"}`}>
+            {form.image ? (
+              <><img src={form.image} alt="Bean" className="w-full h-40 object-cover rounded-lg block" />
+                <button className="absolute top-2 right-2 w-7 h-7 rounded-full bg-[rgba(44,24,16,0.7)] text-white border-none text-sm cursor-pointer flex items-center justify-center"
+                  onClick={(e) => { e.stopPropagation(); set("image", ""); }} type="button">×</button></>
+            ) : (<><div className="text-3xl mb-1.5 opacity-40">📷</div><div className="text-xs text-[#9C8B7A]">Tap to upload a photo</div></>)}
+            <input type="file" accept="image/*" onChange={handleImage} className="absolute inset-0 opacity-0 cursor-pointer" />
+          </div>
+          <div className="text-[11px] text-[#9C8B7A] mt-1">Max 2 MB · JPG, PNG, or WebP</div>
+        </div>
+        <div className="mb-4"><label className={labelCls}>Tasting Notes</label>
+          <textarea className={`${inputCls} resize-y min-h-[80px]`} placeholder="e.g. Citrus, dark chocolate, floral…" value={form.tastingNotes || ""} onChange={e => set("tastingNotes", e.target.value)} />
+          <div className="text-[11px] text-[#9C8B7A] mt-1">Flavour profile from the bag or your own impressions</div></div>
+        <button className="w-full py-3.5 border-none rounded-xl bg-[#2C1810] text-[#FAF6F1] text-sm font-semibold cursor-pointer mt-2"
+          style={{ opacity: canSave ? 1 : 0.4, cursor: canSave ? "pointer" : "not-allowed" }} disabled={!canSave}
+          onClick={() => { if (canSave) onSave(form); }}>
+          {initial ? "Save Changes" : "Add to Library"}
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/BottomNav.jsx b/src/components/BottomNav.jsx
new file mode 100644
index 0000000..2d0f273
--- /dev/null
+++ b/src/components/BottomNav.jsx
@@ -0,0 +1,42 @@
+import React from "react";
+
+export default function BottomNav({ view, setView, setSelectedBean, onCreatePress }) {
+  const items = [
+    { id: "dashboard", label: "Home", icon: "🏠" },
+    { id: "beans", label: "Recipes", icon: "🫘" },
+    { id: "create", label: "Create", icon: "＋", isAction: true },
+    { id: "brews", label: "Logs", icon: "📋" },
+    { id: "profile", label: "Profile", icon: "👤" },
+  ];
+
+  return (
+    <div className="fixed bottom-4 left-1/2 -translate-x-1/2 w-[calc(100%-32px)] max-w-[448px] z-[60]">
+      <div className="bg-white/90 backdrop-blur-md border border-[#E8DFD3] rounded-[28px] shadow-[0_8px_32px_rgba(44,24,16,0.12),0_2px_8px_rgba(44,24,16,0.08)] flex items-center px-2 py-2">
+        {items.map(item => {
+          const isActive = view === item.id;
+          if (item.isAction) {
+            return (
+              <button
+                key={item.id}
+                onClick={onCreatePress}
+                className="flex-1 flex flex-col items-center justify-center mx-1">
+                <div className="w-12 h-12 rounded-full bg-[#2C1810] flex items-center justify-center text-[#FAF6F1] text-2xl font-light shadow-[0_4px_12px_rgba(44,24,16,0.25)] transition-transform active:scale-90 hover:scale-105">
+                  ＋
+                </div>
+              </button>
+            );
+          }
+          return (
+            <button
+              key={item.id}
+              onClick={() => { setView(item.id); setSelectedBean(null); }}
+              className={`flex-1 flex flex-col items-center gap-0.5 py-1.5 rounded-[20px] cursor-pointer border-none transition-all ${isActive ? "bg-[#FAF6F1]" : "bg-transparent"}`}>
+              <span className={`text-xl transition-transform ${isActive ? "scale-110" : "scale-100 opacity-50"}`}>{item.icon}</span>
+              <span className={`text-[10px] font-semibold tracking-wide transition-colors ${isActive ? "text-[#2C1810]" : "text-[#9C8B7A]"}`}>{item.label}</span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/BrewCard.jsx b/src/components/BrewCard.jsx
new file mode 100644
index 0000000..2869ad2
--- /dev/null
+++ b/src/components/BrewCard.jsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { METHOD_COLORS, METHOD_ICONS, METHOD_LABELS } from "../constants";
+
+export default function BrewCard({ log, beanName }) {
+  const color = METHOD_COLORS[log.method];
+  const allFields = Object.entries(log)
+    .filter(([k]) => !["id", "beanId", "method", "createdAt", "recipeDetails", "tasteNotes", "updatedAt", "isDeleted"].includes(k))
+    .filter(([, v]) => v !== "" && v != null);
+  const fieldLabels = { grindSize: "Grind", waterTemp: "Temp", beanWeight: "Weight", brewRatio: "Ratio", brewTime: "Time", numPours: "Pours", dose: "Dose", yield: "Yield", waterVolume: "Water", steepTime: "Steep" };
+  return (
+    <div className="relative mb-3">
+      <div className="brew-method-bar" style={{ background: color }} />
+      <div className="bg-white rounded-xl shadow-[0_1px_3px_rgba(44,24,16,0.06),0_4px_12px_rgba(44,24,16,0.04)] p-[18px] pl-6 border border-[#E8DFD3]">
+        <div className="flex justify-between items-start">
+          <div>
+            <div className="text-[11px] text-[#9C8B7A] tracking-wide">{new Date(log.createdAt).toLocaleDateString("en-IN", { day: "numeric", month: "short", year: "numeric" })}</div>
+            {beanName && <div className="text-sm font-semibold text-[#2C1810] mt-0.5">{beanName}</div>}
+          </div>
+          <div className="text-[11px] font-semibold uppercase tracking-widest" style={{ color }}>{METHOD_ICONS[log.method]} {METHOD_LABELS[log.method]}</div>
+        </div>
+        {allFields.length > 0 && (
+          <div className="flex flex-wrap gap-3 mt-2.5">
+            {allFields.map(([k, v]) => (
+              <div key={k} className="text-xs">
+                <div className="text-[#9C8B7A] text-[10px] uppercase tracking-wide">{fieldLabels[k] || k}</div>
+                <div className="font-semibold mt-0.5">{v}</div>
+              </div>
+            ))}
+          </div>
+        )}
+        {log.recipeDetails && <div className="text-[13px] text-[#6B5744] mt-2.5 italic leading-relaxed">📝 {log.recipeDetails}</div>}
+        {log.tasteNotes && <div className="text-[13px] text-[#6B5744] mt-1.5 italic leading-relaxed">👅 {log.tasteNotes}</div>}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/BrewForm.jsx b/src/components/BrewForm.jsx
new file mode 100644
index 0000000..3606879
--- /dev/null
+++ b/src/components/BrewForm.jsx
@@ -0,0 +1,90 @@
+import React, { useState } from "react";
+import { METHODS, METHOD_LABELS, METHOD_ICONS, METHOD_COLORS, inputCls, labelCls } from "../constants";
+
+export default function BrewForm({ beans, onSave, onClose }) {
+  const [method, setMethod] = useState("pourover");
+  const [form, setForm] = useState({ beanId: beans[0]?.id || "" });
+  const set = (k, v) => setForm(p => ({ ...p, [k]: v }));
+
+  if (beans.length === 0) {
+    return (
+      <div className="fixed inset-0 bg-[rgba(44,24,16,0.4)] z-[100] flex items-end justify-center animate-fade-in" onClick={onClose}>
+        <div className="bg-[#FAF6F1] rounded-t-[24px] w-full max-w-[480px] max-h-[88vh] overflow-y-auto animate-slide-up px-5 pb-8" onClick={e => e.stopPropagation()}>
+          <div className="w-9 h-1 bg-[#E8DFD3] rounded mx-auto my-3" />
+          <div className="font-serif text-xl font-semibold text-[#2C1810] mb-5">Log a Brew</div>
+          <div className="text-center py-12 text-[#9C8B7A]">
+            <div className="text-4xl mb-3 opacity-50">🫘</div>
+            <h3 className="text-base mb-1.5 text-[#6B5744]">No beans yet</h3>
+            <p className="text-[13px] leading-relaxed">Add a bean to your library first.</p>
+          </div>
+          <button className="w-full py-3.5 border border-[#E8DFD3] rounded-xl text-sm font-semibold text-[#6B5744] bg-transparent cursor-pointer" onClick={onClose}>Close</button>
+        </div>
+      </div>
+    );
+  }
+
+  const fields = {
+    pourover: [
+      { key: "grindSize", label: "Grind Size", placeholder: "e.g. 18 clicks", hint: "Relative to your grinder" },
+      { key: "waterTemp", label: "Water Temp", placeholder: "e.g. 93°C" },
+      { key: "beanWeight", label: "Bean Weight", placeholder: "e.g. 15g" },
+      { key: "brewRatio", label: "Brew Ratio", placeholder: "e.g. 1:16" },
+      { key: "brewTime", label: "Brew Time", placeholder: "e.g. 3:30" },
+      { key: "numPours", label: "# of Pours", placeholder: "e.g. 4", type: "number" },
+    ],
+    espresso: [
+      { key: "grindSize", label: "Grind Size", placeholder: "e.g. 8" },
+      { key: "dose", label: "Dose", placeholder: "e.g. 18g" },
+      { key: "yield", label: "Yield", placeholder: "e.g. 36g" },
+      { key: "brewTime", label: "Brew Time", placeholder: "e.g. 28s" },
+    ],
+    coldbrew: [
+      { key: "grindSize", label: "Grind Size", placeholder: "e.g. coarse" },
+      { key: "beanWeight", label: "Bean Weight", placeholder: "e.g. 100g" },
+      { key: "waterVolume", label: "Water Volume", placeholder: "e.g. 700ml" },
+      { key: "steepTime", label: "Steep Time", placeholder: "e.g. 18 hours" },
+    ],
+  };
+
+  return (
+    <div className="fixed inset-0 bg-[rgba(44,24,16,0.4)] z-[100] flex items-end justify-center animate-fade-in" onClick={onClose}>
+      <div className="bg-[#FAF6F1] rounded-t-[24px] w-full max-w-[480px] max-h-[88vh] overflow-y-auto animate-slide-up px-5 pb-8" onClick={e => e.stopPropagation()}>
+        <div className="w-9 h-1 bg-[#E8DFD3] rounded mx-auto my-3" />
+        <div className="font-serif text-xl font-semibold text-[#2C1810] mb-5">Log a Brew</div>
+        <div className="flex gap-1.5 mb-5">
+          {METHODS.map(m => (
+            <button key={m}
+              className={`flex-1 py-3 px-2 border-2 bg-white rounded-xl cursor-pointer text-center text-xs font-semibold transition-all ${method === m ? "border-current" : "border-[#E8DFD3] text-[#9C8B7A]"}`}
+              style={{ color: method === m ? METHOD_COLORS[m] : undefined }}
+              onClick={() => setMethod(m)}>
+              <div className="text-xl mb-1">{METHOD_ICONS[m]}</div>{METHOD_LABELS[m]}
+            </button>
+          ))}
+        </div>
+        <div className="mb-4"><label className={labelCls}>Bean *</label>
+          <select className={inputCls} value={form.beanId} onChange={e => set("beanId", e.target.value)}>
+            {beans.map(b => <option key={b.id} value={b.id}>{b.name}{b.roastery ? ` — ${b.roastery}` : ""}</option>)}
+          </select></div>
+        <div className="flex flex-wrap gap-2.5 mb-4">
+          {fields[method].map(f => (
+            <div key={f.key} className="flex-1 min-w-[45%]">
+              <label className={labelCls}>{f.label}</label>
+              <input className={inputCls} type={f.type || "text"} placeholder={f.placeholder}
+                value={form[f.key] || ""} onChange={e => set(f.key, e.target.value)} />
+              {f.hint && <div className="text-[11px] text-[#9C8B7A] mt-1">{f.hint}</div>}
+            </div>
+          ))}
+        </div>
+        <div className="mb-4"><label className={labelCls}>{method === "pourover" ? "Recipe Details" : "Notes"}</label>
+          <textarea className={`${inputCls} resize-y min-h-[80px]`}
+            placeholder="Describe your recipe, technique, or anything notable…"
+            value={form.recipeDetails || ""} onChange={e => set("recipeDetails", e.target.value)} /></div>
+        <div className="mb-4"><label className={labelCls}>Taste Notes</label>
+          <input className={inputCls} placeholder="e.g. citrus, chocolate, floral"
+            value={form.tasteNotes || ""} onChange={e => set("tasteNotes", e.target.value)} /></div>
+        <button className="w-full py-3.5 border-none rounded-xl bg-[#2C1810] text-[#FAF6F1] text-sm font-semibold cursor-pointer hover:opacity-90 mt-2"
+          onClick={() => onSave({ ...form, method })}>Save Brew Log</button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/CreateModal.jsx b/src/components/CreateModal.jsx
new file mode 100644
index 0000000..337b610
--- /dev/null
+++ b/src/components/CreateModal.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+export default function CreateModal({ onClose, onAddBean, onAddBrew }) {
+  return (
+    <div className="fixed inset-0 bg-[rgba(44,24,16,0.5)] z-[100] flex items-end justify-center animate-fade-in" onClick={onClose}>
+      <div className="bg-[#FAF6F1] rounded-t-[28px] w-full max-w-[480px] px-5 pb-10 animate-slide-up" onClick={e => e.stopPropagation()}>
+        <div className="w-9 h-1 bg-[#E8DFD3] rounded mx-auto mt-3 mb-6" />
+        <div className="font-serif text-xl font-semibold text-[#2C1810] mb-6">What would you like to add?</div>
+        <div className="flex flex-col gap-3">
+          <button
+            className="flex items-center gap-4 px-5 py-4 bg-white border border-[#E8DFD3] rounded-2xl text-left cursor-pointer hover:shadow-[0_4px_16px_rgba(44,24,16,0.08)] transition-all active:scale-[0.98]"
+            onClick={() => { onClose(); onAddBrew(); }}>
+            <div className="w-12 h-12 rounded-xl bg-[#FAF6F1] flex items-center justify-center text-2xl flex-shrink-0">☕</div>
+            <div>
+              <div className="font-semibold text-[#2C1810] text-sm">Log a Brew</div>
+              <div className="text-xs text-[#9C8B7A] mt-0.5">Record a brewing session with recipe details</div>
+            </div>
+          </button>
+          <button
+            className="flex items-center gap-4 px-5 py-4 bg-white border border-[#E8DFD3] rounded-2xl text-left cursor-pointer hover:shadow-[0_4px_16px_rgba(44,24,16,0.08)] transition-all active:scale-[0.98]"
+            onClick={() => { onClose(); onAddBean(); }}>
+            <div className="w-12 h-12 rounded-xl bg-[#FAF6F1] flex items-center justify-center text-2xl flex-shrink-0">🫘</div>
+            <div>
+              <div className="font-semibold text-[#2C1810] text-sm">Add Bean</div>
+              <div className="text-xs text-[#9C8B7A] mt-0.5">Add a new coffee bean to your library</div>
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/constants.js b/src/constants.js
new file mode 100644
index 0000000..2af906c
--- /dev/null
+++ b/src/constants.js
@@ -0,0 +1,8 @@
+export const ROAST_TYPES = ["Light", "Light-Medium", "Medium", "Medium-Dark", "Dark"];
+export const METHODS = ["pourover", "espresso", "coldbrew"];
+export const METHOD_LABELS = { pourover: "Pour Over", espresso: "Espresso", coldbrew: "Cold Brew" };
+export const METHOD_ICONS = { pourover: "☕", espresso: "⚡", coldbrew: "❄️" };
+export const METHOD_COLORS = { pourover: "#8B6914", espresso: "#5C3317", coldbrew: "#2F4F6F" };
+
+export const inputCls = "w-full px-3.5 py-3 border border-[#E8DFD3] rounded-lg bg-white text-sm text-[#2C1810] transition-colors outline-none focus:border-[#8B6914]";
+export const labelCls = "block text-[10px] font-semibold uppercase tracking-wider text-[#6B5744] mb-1.5";
diff --git a/src/Login.jsx b/src/pages/Login.jsx
similarity index 88%
rename from src/Login.jsx
rename to src/pages/Login.jsx
index d718a03..fed1e2c 100644
--- a/src/Login.jsx
+++ b/src/pages/Login.jsx
@@ -1,8 +1,6 @@
 import { useState, useContext } from 'react';
-import { AuthContext } from './AuthContext';
-
-const inputCls = "w-full px-3.5 py-3 border border-[#E8DFD3] rounded-lg bg-white font-sans text-sm text-[#2C1810] transition-colors outline-none focus:border-[#8B6914]";
-const labelCls = "block text-[10px] font-semibold uppercase tracking-wider text-[#6B5744] mb-1.5";
+import { AuthContext } from '../AuthContext';
+import { inputCls, labelCls } from '../constants';
 
 export default function Login({ onLoginSuccess }) {
   const [formData, setFormData] = useState({ email: '', password: '' });
diff --git a/src/pages/ProfilePage.jsx b/src/pages/ProfilePage.jsx
new file mode 100644
index 0000000..b10f983
--- /dev/null
+++ b/src/pages/ProfilePage.jsx
@@ -0,0 +1,73 @@
+import React, { useContext } from "react";
+import { AuthContext } from "../AuthContext";
+
+export default function ProfilePage({ user, isOnline, syncing, showSyncedStatus }) {
+  const { logout } = useContext(AuthContext);
+  return (
+    <div>
+      {/* Avatar & Name */}
+      <div className="flex flex-col items-center pt-6 pb-8">
+        <div className="w-20 h-20 rounded-full bg-[#2C1810] flex items-center justify-center text-3xl text-[#FAF6F1] font-serif font-bold mb-3">
+          {user?.username?.[0]?.toUpperCase() || "☕"}
+        </div>
+        <div className="font-serif text-xl font-semibold text-[#2C1810]">{user?.username}</div>
+        <div className="text-sm text-[#9C8B7A] mt-0.5">{user?.email}</div>
+        {showSyncedStatus && (
+          <div className={`flex items-center gap-1.5 text-[11px] font-medium px-3 py-1.5 rounded-full mt-3 transition-all ${isOnline ? "text-[#4A7C59] bg-[rgba(74,124,89,0.1)]" : "text-[#B44040] bg-[rgba(180,64,64,0.1)]"}`}>
+            <span className={`text-[10px] ${syncing ? "animate-sync-pulse" : ""}`}>●</span>
+            <span>{isOnline ? (syncing ? "Syncing…" : "All data synced") : "Offline — saved locally"}</span>
+          </div>
+        )}
+      </div>
+
+      {/* Account section */}
+      <div className="mb-6">
+        <div className="text-[11px] font-semibold uppercase tracking-widest text-[#9C8B7A] mb-2 px-1">Account</div>
+        <div className="bg-white rounded-2xl border border-[#E8DFD3] overflow-hidden">
+          <div className="flex items-center gap-3 px-4 py-3.5 border-b border-[#F3EDE4]">
+            <span className="text-lg">👤</span>
+            <div>
+              <div className="text-xs text-[#9C8B7A]">Username</div>
+              <div className="text-sm font-medium text-[#2C1810]">{user?.username}</div>
+            </div>
+          </div>
+          <div className="flex items-center gap-3 px-4 py-3.5">
+            <span className="text-lg">✉️</span>
+            <div>
+              <div className="text-xs text-[#9C8B7A]">Email</div>
+              <div className="text-sm font-medium text-[#2C1810]">{user?.email}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* App info */}
+      <div className="mb-6">
+        <div className="text-[11px] font-semibold uppercase tracking-widest text-[#9C8B7A] mb-2 px-1">App</div>
+        <div className="bg-white rounded-2xl border border-[#E8DFD3] overflow-hidden">
+          <div className="flex items-center justify-between px-4 py-3.5 border-b border-[#F3EDE4]">
+            <div className="flex items-center gap-3">
+              <span className="text-lg">☕</span>
+              <div className="text-sm font-medium text-[#2C1810]">Brew Journal</div>
+            </div>
+            <div className="text-xs text-[#9C8B7A] font-mono">{__APP_VERSION__}</div>
+          </div>
+          <div className="flex items-center gap-3 px-4 py-3.5">
+            <span className="text-lg">🗄️</span>
+            <div>
+              <div className="text-xs text-[#9C8B7A]">Storage</div>
+              <div className="text-sm font-medium text-[#2C1810]">Local + PostgreSQL</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Sign out */}
+      <button
+        onClick={() => logout()}
+        className="w-full py-3.5 border border-[#B44040] rounded-2xl text-sm font-semibold text-[#B44040] bg-transparent cursor-pointer hover:bg-[rgba(180,64,64,0.05)] transition-colors">
+        Sign Out
+      </button>
+    </div>
+  );
+}
diff --git a/src/Register.jsx b/src/pages/Register.jsx
similarity index 92%
rename from src/Register.jsx
rename to src/pages/Register.jsx
index f8a6cf1..5ffda2a 100644
--- a/src/Register.jsx
+++ b/src/pages/Register.jsx
@@ -1,8 +1,6 @@
 import { useState, useContext } from 'react';
-import { AuthContext } from './AuthContext';
-
-const inputCls = "w-full px-3.5 py-3 border border-[#E8DFD3] rounded-lg bg-white font-sans text-sm text-[#2C1810] transition-colors outline-none focus:border-[#8B6914]";
-const labelCls = "block text-[10px] font-semibold uppercase tracking-wider text-[#6B5744] mb-1.5";
+import { AuthContext } from '../AuthContext';
+import { inputCls, labelCls } from '../constants';
 
 export default function Register({ onRegisterSuccess }) {
   const [formData, setFormData] = useState({ username: '', email: '', password: '', confirmPassword: '' });