refactor(ui): apply design system components across all pages

Replace raw <input>/<button>/<select> elements with Button, Card, Input,
Select, Modal, Badge, and ConfirmDialog from @/components/ui in all
non-admin and admin pages. Removes ~550 lines of inline Tailwind utility
classes from form elements while keeping all business logic intact.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/admin-login/page.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
+import { Button, Input } from "@/components/ui";
 
 export default function AdminLoginPage() {
   const router = useRouter();
@@ -34,16 +35,13 @@ export default function AdminLoginPage() {
       const data = await res.json();
 
       if (res.ok && data.success) {
-        // Verify session server-side before redirect
         const sessionRes = await fetch("/api/admin/auth");
         const sessionData = await sessionRes.json();
-        if (sessionData.authenticated) {
+        if (sessionData.authenticated) router.push("/admin");
-          router.push("/admin");
-        }
       } else {
         setError(data.error || "Invalid credentials");
       }
-    } catch (err) {
+    } catch {
       setError("Login failed");
     } finally {
       setLoading(false);
@@ -56,39 +54,30 @@ export default function AdminLoginPage() {
         <h1 className="text-2xl font-bold text-center mb-6 text-white">Admin Login</h1>
 
         <form onSubmit={handleLogin} className="space-y-4">
-          <div>
+          <Input
-            <label className="block text-sm font-medium mb-1 text-gray-300">Username</label>
+            label="Username"
-            <input
+            type="text"
-              type="text"
+            value={username}
-              value={username}
+            onChange={(e) => setUsername(e.target.value)}
-              onChange={(e) => setUsername(e.target.value)}
+            required
-              className="w-full p-3 bg-gray-700 border border-gray-600 rounded-xl text-white"
+            className="bg-gray-700 border-gray-600 text-white"
-              required
+          />
-            />
-          </div>
 
-          <div>
+          <Input
-            <label className="block text-sm font-medium mb-1 text-gray-300">Password</label>
+            label="Password"
-            <input
+            type="password"
-              type="password"
+            value={password}
-              value={password}
+            onChange={(e) => setPassword(e.target.value)}
-              onChange={(e) => setPassword(e.target.value)}
+            required
-              className="w-full p-3 bg-gray-700 border border-gray-600 rounded-xl text-white"
+            error={error || undefined}
-              required
+            className="bg-gray-700 border-gray-600 text-white"
-            />
+          />
-          </div>
 
-          {error && <p className="text-red-400 text-sm">{error}</p>}
+          <Button type="submit" fullWidth size="lg" loading={loading}>
-
+            Login
-          <button
+          </Button>
-            type="submit"
-            disabled={loading}
-            className="w-full py-3 bg-rose-500 text-white rounded-xl font-medium disabled:opacity-50"
-          >
-            {loading ? "..." : "Login"}
-          </button>
         </form>
       </div>
     </div>
   );
-}
+}

src/app/admin/children/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { Button, Input } from "@/components/ui";
 
 interface Child {
   id: string;
@@ -59,17 +60,14 @@ export default function AdminChildren() {
           <h1 className="text-2xl font-bold">Children</h1>
           <p className="text-gray-400">{children.length} total children</p>
         </div>
-        <button onClick={exportCSV} className="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 rounded-lg">
+        <Button variant="secondary" onClick={exportCSV}>Export CSV</Button>
-          Export CSV
-        </button>
       </div>
 
-      <input
+      <Input
         type="text"
         placeholder="Search children..."
         value={search}
         onChange={(e) => setSearch(e.target.value)}
-        className="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white"
       />
 
       <div className="bg-gray-800 rounded-xl overflow-hidden">

src/app/admin/families/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { Button, Input, Select, Badge } from "@/components/ui";
 
 interface Member {
   id: string;
@@ -135,39 +136,28 @@ export default function AdminFamilies() {
           <p className="text-gray-400">{families.length} total families</p>
         </div>
         <div className="flex gap-2">
-          <button
+          <Button onClick={handleCreateFamily}>+ New Family</Button>
-            onClick={handleCreateFamily}
+          <Button variant="secondary" onClick={exportCSV}>Export CSV</Button>
-            className="px-4 py-2 bg-rose-500 hover:bg-rose-600 rounded-lg"
-          >
-            + New Family
-          </button>
-          <button
-            onClick={exportCSV}
-            className="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 rounded-lg"
-          >
-            Export CSV
-          </button>
         </div>
       </div>
 
       {/* Filters */}
       <div className="flex gap-4">
-        <input
+        <Input
           type="text"
           placeholder="Search families..."
           value={search}
           onChange={(e) => setSearch(e.target.value)}
-          className="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white"
+          className="flex-1"
         />
-        <select
+        <Select
           value={tierFilter}
           onChange={(e) => setTierFilter(e.target.value)}
-          className="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white"
         >
           <option value="all">All Tiers</option>
           <option value="free">Free</option>
           <option value="pro">Pro</option>
-        </select>
+        </Select>
       </div>
 
       {/* Table */}
@@ -192,19 +182,12 @@ export default function AdminFamilies() {
                     <div className="text-xs text-gray-500">{family.id}</div>
                   </td>
                   <td className="px-4 py-3">
-                    <span className={`px-2 py-1 rounded text-xs ${
+                    <Badge variant={family.tier === "pro" ? "rose" : "default"}>{family.tier}</Badge>
-                      family.tier === "pro" ? "bg-emerald-900 text-emerald-400" : "bg-gray-600"
-                    }`}>
-                      {family.tier}
-                    </span>
                   </td>
                   <td className="px-4 py-3">
-                    <button
+                    <Button variant="ghost" size="sm" onClick={() => setShowMembers(showMembers === family.id ? null : family.id)}>
-                      onClick={() => setShowMembers(showMembers === family.id ? null : family.id)}
-                      className="text-rose-400 underline"
-                    >
                       {family.userCount} users
-                    </button>
+                    </Button>
                   </td>
                   <td className="px-4 py-3">{family.childCount}</td>
                   <td className="px-4 py-3 text-sm text-gray-400">
@@ -219,25 +202,24 @@ export default function AdminFamilies() {
                     <td colSpan={6} className="bg-gray-800 p-4">
                       <div className="space-y-2">
                         <div className="flex gap-2 items-center">
-                          <input
+                          <Input
                             type="email"
                             placeholder="New member email"
                             onChange={(e) => setAddMember({familyId: family.id, email: e.target.value, role: "caregiver", name: ""})}
-                            className="flex-1 bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white"
+                            className="flex-1"
                           />
-                          <select
+                          <Select
                             onChange={(e) => setAddMember(addMember ? {...addMember, role: e.target.value} : null)}
-                            className="bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white"
                           >
                             <option value="caregiver">Caregiver</option>
                             <option value="owner">Owner</option>
-                          </select>
+                          </Select>
-                          <button onClick={handleAddMember} className="px-3 py-2 bg-rose-500 rounded text-white">Add</button>
+                          <Button size="sm" onClick={handleAddMember}>Add</Button>
                         </div>
                         {(family.members || []).map((m) => (
                           <div key={m.id} className="flex justify-between items-center bg-gray-700 p-2 rounded">
                             <span>{m.email} ({m.role})</span>
-                            <button onClick={() => handleRemoveMember(m.id)} className="text-red-400 text-sm">Remove</button>
+                            <Button variant="danger" size="sm" onClick={() => handleRemoveMember(m.id)}>Remove</Button>
                           </div>
                         ))}
                       </div>
@@ -254,4 +236,4 @@ export default function AdminFamilies() {
       </div>
     </div>
   );
-}
+}

src/app/admin/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { Select } from "@/components/ui";
 
 interface Stats {
   overview: {
@@ -59,15 +60,11 @@ export default function AdminDashboard() {
           <h1 className="text-2xl font-bold">Dashboard</h1>
           <p className="text-gray-400">Platform overview and analytics</p>
         </div>
-        <select
+        <Select value={period} onChange={(e) => setPeriod(e.target.value)}>
-          value={period}
-          onChange={(e) => setPeriod(e.target.value)}
-          className="bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white"
-        >
           <option value="7">Last 7 days</option>
           <option value="30">Last 30 days</option>
           <option value="90">Last 90 days</option>
-        </select>
+        </Select>
       </div>
 
       {/* Overview Cards */}

src/app/admin/settings/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { Button, Input } from "@/components/ui";
 
 interface Settings {
   proPrice: number;
@@ -40,12 +41,12 @@ export default function AdminSettings() {
             <label className="block text-sm text-gray-400 mb-1">Pro Monthly Price</label>
             <div className="flex items-center gap-2">
               <span className="text-gray-400">$</span>
-              <input
+              <Input
                 type="number"
                 step="0.01"
                 value={settings.proPrice}
                 onChange={(e) => setSettings({ ...settings, proPrice: Number(e.target.value) })}
-                className="flex-1 bg-gray-700 border border-gray-600 rounded-lg px-3 py-2"
+                className="flex-1"
               />
             </div>
           </div>
@@ -58,20 +59,18 @@ export default function AdminSettings() {
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <div>
             <label className="block text-sm text-gray-400 mb-1">Max Children</label>
-            <input
+            <Input
               type="number"
               value={settings.freeMaxChildren}
               onChange={(e) => setSettings({ ...settings, freeMaxChildren: Number(e.target.value) })}
-              className="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2"
             />
           </div>
           <div>
             <label className="block text-sm text-gray-400 mb-1">Max Family Members</label>
-            <input
+            <Input
               type="number"
               value={settings.freeMaxMembers}
               onChange={(e) => setSettings({ ...settings, freeMaxMembers: Number(e.target.value) })}
-              className="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2"
             />
           </div>
         </div>
@@ -83,32 +82,27 @@ export default function AdminSettings() {
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <div>
             <label className="block text-sm text-gray-400 mb-1">Model</label>
-            <input
+            <Input
               type="text"
               value={settings.aiModel}
               onChange={(e) => setSettings({ ...settings, aiModel: e.target.value })}
-              className="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2"
             />
           </div>
           <div>
             <label className="block text-sm text-gray-400 mb-1">Base URL</label>
-            <input
+            <Input
               type="text"
               value={settings.aiBaseUrl}
               onChange={(e) => setSettings({ ...settings, aiBaseUrl: e.target.value })}
-              className="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2"
             />
           </div>
         </div>
       </div>
 
       {/* Save */}
-      <button
+      <Button fullWidth size="lg" onClick={handleSave}>
-        onClick={handleSave}
-        className="w-full py-3 bg-rose-500 hover:bg-rose-600 rounded-xl font-medium"
-      >
         {saved ? "Saved!" : "Save Settings"}
-      </button>
+      </Button>
     </div>
   );
-}
+}

src/app/admin/support/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { Button, Badge } from "@/components/ui";
 
 interface Ticket {
   id: string;
@@ -18,7 +19,6 @@ export default function AdminSupport() {
   const [loading, setLoading] = useState(true);
   const [statusFilter, setStatusFilter] = useState("all");
   const [selectedTicket, setSelectedTicket] = useState<Ticket | null>(null);
-  const [replyMessage, setReplyMessage] = useState("");
 
   useEffect(() => {
     fetchTickets();
@@ -49,6 +49,12 @@ export default function AdminSupport() {
     }
   };
 
+  const priorityVariant = (p: string): "rose" | "warning" | "default" =>
+    p === "urgent" ? "rose" : p === "high" ? "warning" : "default";
+
+  const statusVariant = (s: string): "rose" | "warning" | "default" =>
+    s === "open" ? "rose" : s === "in_progress" ? "warning" : "default";
+
   if (loading) {
     return <div className="p-6 text-white">Loading...</div>;
   }
@@ -65,15 +71,14 @@ export default function AdminSupport() {
       {/* Filters */}
       <div className="flex gap-2">
         {["all", "open", "in_progress", "resolved", "closed"].map((status) => (
-          <button
+          <Button
             key={status}
+            size="sm"
+            variant={statusFilter === status ? "primary" : "secondary"}
             onClick={() => setStatusFilter(status)}
-            className={`px-3 py-1.5 rounded-lg text-sm ${
-              statusFilter === status ? "bg-rose-500" : "bg-gray-800"
-            }`}
           >
             {status.replace("_", " ")}
-          </button>
+          </Button>
         ))}
       </div>
 
@@ -89,20 +94,8 @@ export default function AdminSupport() {
               }`}
             >
               <div className="flex justify-between items-start mb-2">
-                <span className={`text-xs px-2 py-0.5 rounded ${
+                <Badge variant={priorityVariant(ticket.priority)}>{ticket.priority}</Badge>
-                  ticket.priority === "urgent" ? "bg-red-900 text-red-400" :
+                <Badge variant={statusVariant(ticket.status)}>{ticket.status.replace("_", " ")}</Badge>
-                  ticket.priority === "high" ? "bg-orange-900 text-orange-400" :
-                  "bg-gray-700"
-                }`}>
-                  {ticket.priority}
-                </span>
-                <span className={`text-xs px-2 py-0.5 rounded ${
-                  ticket.status === "open" ? "bg-emerald-900 text-emerald-400" :
-                  ticket.status === "in_progress" ? "bg-amber-900 text-amber-400" :
-                  "bg-gray-700"
-                }`}>
-                  {ticket.status.replace("_", " ")}
-                </span>
               </div>
               <div className="font-medium">{ticket.subject}</div>
               <div className="text-sm text-gray-400">{ticket.email}</div>
@@ -132,28 +125,19 @@ export default function AdminSupport() {
               </div>
               <div className="flex gap-2">
                 {selectedTicket.status === "open" && (
-                  <button
+                  <Button size="sm" variant="secondary" onClick={() => updateStatus(selectedTicket.id, "in_progress")}>
-                    onClick={() => updateStatus(selectedTicket.id, "in_progress")}
-                    className="px-3 py-1.5 bg-amber-600 rounded-lg text-sm"
-                  >
                     Start
-                  </button>
+                  </Button>
                 )}
                 {selectedTicket.status === "in_progress" && (
-                  <button
+                  <Button size="sm" onClick={() => updateStatus(selectedTicket.id, "resolved")}>
-                    onClick={() => updateStatus(selectedTicket.id, "resolved")}
-                    className="px-3 py-1.5 bg-emerald-600 rounded-lg text-sm"
-                  >
                     Resolve
-                  </button>
+                  </Button>
                 )}
                 {selectedTicket.status === "resolved" && (
-                  <button
+                  <Button size="sm" variant="secondary" onClick={() => updateStatus(selectedTicket.id, "closed")}>
-                    onClick={() => updateStatus(selectedTicket.id, "closed")}
-                    className="px-3 py-1.5 bg-gray-600 rounded-lg text-sm"
-                  >
                     Close
-                  </button>
+                  </Button>
                 )}
               </div>
             </div>
@@ -166,4 +150,4 @@ export default function AdminSupport() {
       </div>
     </div>
   );
-}
+}

src/app/admin/users/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { Button, Input, Select, Modal } from "@/components/ui";
 
 interface User {
   id: string;
@@ -25,6 +26,7 @@ export default function AdminUsers() {
   const [search, setSearch] = useState("");
   const [showAdd, setShowAdd] = useState(false);
   const [showPassword, setShowPassword] = useState<string | null>(null);
+  const [passwordValue, setPasswordValue] = useState("");
   const [newUser, setNewUser] = useState({ email: "", name: "", familyId: "", role: "caregiver" });
 
   useEffect(() => {
@@ -98,6 +100,7 @@ export default function AdminUsers() {
       if (res.ok) {
         fetchUsers();
         setShowPassword(null);
+        setPasswordValue("");
       }
     } catch (err) {
       console.error("Failed to set password:", err);
@@ -132,47 +135,45 @@ export default function AdminUsers() {
           <h1 className="text-2xl font-bold">Users</h1>
           <p className="text-gray-400">{users.length} total users</p>
         </div>
-        <button onClick={() => setShowAdd(!showAdd)} className="px-4 py-2 bg-rose-500 hover:bg-rose-600 rounded-lg">
+        <div className="flex gap-2">
-          + Add User
+          <Button variant="secondary" onClick={exportCSV}>Export CSV</Button>
-        </button>
+          <Button onClick={() => setShowAdd(!showAdd)}>+ Add User</Button>
+        </div>
       </div>
 
       {showAdd && (
         <div className="bg-gray-800 p-4 rounded-lg flex gap-2 flex-wrap">
-          <input
+          <Input
             type="email"
             placeholder="Email"
             value={newUser.email}
             onChange={(e) => setNewUser({ ...newUser, email: e.target.value })}
-            className="flex-1 bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white min-w-[200px]"
+            className="flex-1 min-w-[200px]"
           />
-          <input
+          <Input
             type="text"
             placeholder="Name (optional)"
             value={newUser.name}
             onChange={(e) => setNewUser({ ...newUser, name: e.target.value })}
-            className="bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white"
           />
-          <select
+          <Select
             value={newUser.familyId}
             onChange={(e) => setNewUser({ ...newUser, familyId: e.target.value })}
-            className="bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white"
           >
             <option value="">Select Family</option>
             {families.map((f) => (
               <option key={f.id} value={f.id}>{f.name}</option>
             ))}
-          </select>
+          </Select>
-          <button onClick={handleAddUser} className="px-4 py-2 bg-rose-500 rounded text-white">Create</button>
+          <Button onClick={handleAddUser}>Create</Button>
         </div>
       )}
 
-      <input
+      <Input
         type="text"
         placeholder="Search users..."
         value={search}
         onChange={(e) => setSearch(e.target.value)}
-        className="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white"
       />
 
       <div className="bg-gray-800 rounded-xl overflow-hidden">
@@ -195,32 +196,20 @@ export default function AdminUsers() {
                 </td>
                 <td className="px-4 py-3">{user.familyName || "-"}</td>
                 <td className="px-4 py-3">
-                  {user.hasPassword ? (
+                  <button
-                    <button
+                    onClick={() => setShowPassword(user.id)}
-                      onClick={() => setShowPassword(user.id)}
+                    className={`text-sm hover:underline ${user.hasPassword ? "text-emerald-400" : "text-amber-400"}`}
-                      className="text-emerald-400 text-sm hover:underline"
+                  >
-                    >
+                    {user.hasPassword ? "✓ Set" : "Not set"}
-                      ✓ Set
+                  </button>
-                    </button>
-                  ) : (
-                    <button
-                      onClick={() => setShowPassword(user.id)}
-                      className="text-amber-400 text-sm hover:underline"
-                    >
-                      Not set
-                    </button>
-                  )}
                 </td>
                 <td className="px-4 py-3 text-sm text-gray-400">
                   {user.createdAt?.slice(0, 10)}
                 </td>
                 <td className="px-4 py-3">
-                  <button
+                  <Button variant="danger" size="sm" onClick={() => handleRemoveUser(user.id, user.memberId)}>
-                    onClick={() => handleRemoveUser(user.id, user.memberId)}
-                    className="text-red-400 text-sm hover:underline"
-                  >
                     Delete
-                  </button>
+                  </Button>
                 </td>
               </tr>
             ))}
@@ -231,37 +220,35 @@ export default function AdminUsers() {
         )}
       </div>
 
-      {/* Password Modal */}
+      <Modal
-      {showPassword && (
+        open={!!showPassword}
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+        onClose={() => { setShowPassword(null); setPasswordValue(""); }}
-          <div className="bg-gray-800 p-6 rounded-xl w-80">
+        title="Set Password"
-            <h3 className="text-lg font-semibold mb-4">Set Password</h3>
+      >
-            <input
+        <div className="space-y-4">
-              type="password"
+          <Input
-              placeholder="Enter password"
+            type="password"
-              id="passwordInput"
+            placeholder="Enter password"
-              className="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white mb-4"
+            value={passwordValue}
-            />
+            onChange={(e) => setPasswordValue(e.target.value)}
-            <div className="flex gap-2">
+          />
-              <button
+          <div className="flex gap-2">
-                onClick={() => {
+            <Button
-                  const pwd = (document.getElementById("passwordInput") as HTMLInputElement).value;
+              fullWidth
-                  handleSetPassword(showPassword, pwd);
+              onClick={() => showPassword && handleSetPassword(showPassword, passwordValue)}
-                }}
+            >
-                className="flex-1 px-4 py-2 bg-rose-500 rounded text-white"
+              Set
-              >
+            </Button>
-                Set
+            <Button
-              </button>
+              variant="secondary"
-              <button
+              fullWidth
-                onClick={() => setShowPassword(null)}
+              onClick={() => { setShowPassword(null); setPasswordValue(""); }}
-                className="px-4 py-2 bg-gray-600 rounded text-white"
+            >
-              >
+              Cancel
-                Cancel
+            </Button>
-              </button>
-            </div>
           </div>
         </div>
-      )}
+      </Modal>
     </div>
   );
-}
+}

src/app/ai/page.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from "react";
 import { useFamily } from "../FamilyProvider";
+import { Button, Input, ConfirmDialog } from "@/components/ui";
 
 interface AIChat {
   id: string;
@@ -182,7 +183,7 @@ export default function AIChatPage() {
               <a href="/menu" className="text-rose-500 dark:text-rose-400">←</a>
               <h1 className="font-bold dark:text-white">Chats</h1>
             </div>
-            <button onClick={createNewSession} className="w-8 h-8 flex items-center justify-center bg-rose-400 text-white rounded-full text-lg leading-none">+</button>
+            <Button size="sm" onClick={createNewSession} className="w-8 h-8 !p-0 rounded-full">+</Button>
           </div>
           <div className="flex-1 overflow-y-auto p-2 space-y-1">
             {sessions.length === 0 ? (
@@ -237,9 +238,7 @@ export default function AIChatPage() {
               <div className="text-4xl">🤱</div>
               <p className="text-gray-500 dark:text-gray-400 font-medium">Ask anything about your baby</p>
               <p className="text-sm text-gray-400 dark:text-gray-500">Tap ☰ to see past chats, or just type below to start</p>
-              <button onClick={createNewSession} className="mt-2 px-5 py-2 bg-rose-400 text-white rounded-full text-sm">
+              <Button onClick={createNewSession} className="mt-2 rounded-full">New Chat</Button>
-                New Chat
-              </button>
             </div>
           ) : currentSession.messages.length === 0 ? (
             <div className="h-full flex flex-col items-center justify-center text-center gap-2">
@@ -278,38 +277,30 @@ export default function AIChatPage() {
         {/* Input */}
         <div className="p-4 border-t bg-white dark:bg-gray-800 flex-shrink-0">
           <div className="flex gap-2">
-            <input
+            <Input
               value={input}
               onChange={e => setInput(e.target.value)}
               onKeyDown={e => e.key === "Enter" && !e.shiftKey && handleSend()}
               placeholder="Ask about your baby..."
-              className="flex-1 p-3 border dark:border-gray-600 rounded-xl dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 text-sm focus:outline-none focus:ring-2 focus:ring-rose-300"
               disabled={loading}
+              className="flex-1"
             />
-            <button
+            <Button onClick={handleSend} disabled={loading || !input.trim()} loading={loading}>
-              onClick={handleSend}
+              Send
-              disabled={loading || !input.trim()}
+            </Button>
-              className={`px-4 py-2 text-white rounded-xl text-sm font-medium transition-colors ${loading || !input.trim() ? "bg-gray-200 dark:bg-gray-600 text-gray-400 cursor-not-allowed" : "bg-rose-400 hover:bg-rose-500"}`}
-            >
-              {loading ? "..." : "Send"}
-            </button>
           </div>
         </div>
       </div>
 
-      {/* Delete confirm modal */}
+      <ConfirmDialog
-      {deleteConfirm && (
+        open={!!deleteConfirm}
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+        onClose={() => setDeleteConfirm(null)}
-          <div className="bg-white dark:bg-gray-800 p-6 rounded-2xl w-72 shadow-xl">
+        onConfirm={() => deleteConfirm && deleteSession(deleteConfirm)}
-            <p className="mb-4 dark:text-white font-medium">Delete this conversation?</p>
+        title="Delete this conversation?"
-            <p className="text-sm text-gray-500 dark:text-gray-400 mb-5">This can't be undone.</p>
+        description="This can't be undone."
-            <div className="flex gap-2">
+        confirmLabel="Delete"
-              <button onClick={() => deleteSession(deleteConfirm)} className="flex-1 py-2 bg-red-500 text-white rounded-xl text-sm">Delete</button>
+        variant="danger"
-              <button onClick={() => setDeleteConfirm(null)} className="flex-1 py-2 bg-gray-100 dark:bg-gray-700 dark:text-white rounded-xl text-sm">Cancel</button>
+      />
-            </div>
-          </div>
-        </div>
-      )}
     </div>
   );
 }

src/app/growth/page.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect, useRef } from "react";
 import { useFamily } from "../FamilyProvider";
+import { Button, Card, Input, ConfirmDialog } from "@/components/ui";
 import { WHO_BOY_WEIGHT, WHO_GIRL_WEIGHT, getAgeInMonthsFromBirth, getPercentile, type GrowthStandard } from "@/lib/growth-standards";
 import {
   Chart as ChartJS,
@@ -83,6 +84,7 @@ export default function GrowthPage() {
   const [chartMetric, setChartMetric] = useState<"weight" | "height" | "head">("weight");
   const [saving, setSaving] = useState(false);
   const [saveError, setSaveError] = useState<string | null>(null);
+  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
   const [showWhoStandards, setShowWhoStandards] = useState(true);
   const [showChart, setShowChart] = useState(true);
   const [showHistory, setShowHistory] = useState(true);
@@ -186,8 +188,8 @@ export default function GrowthPage() {
   };
 
   const handleDelete = async (id: string) => {
-    if (!confirm("Delete this record?")) return;
     await fetch(`/api/growth?id=${id}`, { method: "DELETE" });
+    setConfirmDeleteId(null);
     fetchGrowthData();
   };
 
@@ -375,55 +377,33 @@ export default function GrowthPage() {
           <h1 className="text-xl font-bold">Growth 📈</h1>
         </div>
         <div className="flex gap-2">
-          <button onClick={exportCSV} className="p-2 text-sm bg-gray-200 dark:bg-gray-700 rounded-lg" title="Export CSV">
+          <Button variant="secondary" size="sm" onClick={exportCSV} title="Export CSV">📥</Button>
-            📥
+          <Button variant="secondary" size="sm" onClick={() => setShowGoals(!showGoals)} title="Set goals">🎯</Button>
-          </button>
+          <Button variant="primary" size="sm" onClick={() => { setShowAdd(!showAdd); setEditingId(null); setWeight(""); setHeight(""); setHeadCircumference(""); setMeasuredAt(new Date().toISOString().split("T")[0]); }}>
-          <button onClick={() => setShowGoals(!showGoals)} className="p-2 text-sm bg-gray-200 dark:bg-gray-700 rounded-lg" title="Set goals">
-            🎯
-          </button>
-          <button onClick={() => { setShowAdd(!showAdd); setEditingId(null); setWeight(""); setHeight(""); setHeadCircumference(""); setMeasuredAt(new Date().toISOString().split("T")[0]); }} className="p-2 bg-rose-400 text-white rounded-lg">
             + Add
-          </button>
+          </Button>
         </div>
       </div>
 
       {/* Goals Card */}
       {showGoals && (
-        <div className="mx-4 mb-4 p-4 bg-white dark:bg-gray-800 rounded-xl">
+        <Card className="mx-4 mb-4">
           <h3 className="font-semibold mb-3">Set Growth Goals</h3>
           <div className="space-y-3">
-            <div>
+            <Input label="Target Weight (kg)" type="number" step="0.1" placeholder="e.g., 10"
-              <label className="text-sm text-gray-500">Target Weight (kg)</label>
+              value={goal.weightKg || ""}
-              <input
+              onChange={e => setGoal({ ...goal, weightKg: parseFloat(e.target.value) || undefined })}
-                type="number"
+            />
-                step="0.1"
+            <Input label="Target Height (cm)" type="number" step="0.1" placeholder="e.g., 80"
-                placeholder="e.g., 10"
+              value={goal.heightCm || ""}
-                value={goal.weightKg || ""}
+              onChange={e => setGoal({ ...goal, heightCm: parseFloat(e.target.value) || undefined })}
-                onChange={e => setGoal({ ...goal, weightKg: parseFloat(e.target.value) || undefined })}
+            />
-                className="w-full p-2 border rounded-lg dark:bg-gray-700"
-              />
-            </div>
-            <div>
-              <label className="text-sm text-gray-500">Target Height (cm)</label>
-              <input
-                type="number"
-                step="0.1"
-                placeholder="e.g., 80"
-                value={goal.heightCm || ""}
-                onChange={e => setGoal({ ...goal, heightCm: parseFloat(e.target.value) || undefined })}
-                className="w-full p-2 border rounded-lg dark:bg-gray-700"
-              />
-            </div>
             <div className="flex gap-2">
-              <button onClick={saveGoal} className="flex-1 p-2 bg-rose-400 text-white rounded-lg">
+              <Button fullWidth onClick={saveGoal}>Save Goal</Button>
-                Save Goal
+              <Button variant="secondary" fullWidth onClick={() => setShowGoals(false)}>Cancel</Button>
-              </button>
-              <button onClick={() => setShowGoals(false)} className="flex-1 p-2 bg-gray-200 dark:bg-gray-700 rounded-lg">
-                Cancel
-              </button>
             </div>
           </div>
-        </div>
+        </Card>
       )}
 
       {/* Latest Reading Card */}
@@ -621,54 +601,20 @@ export default function GrowthPage() {
           {saveError && (
             <div className="p-2 bg-red-100 dark:bg-red-900 text-red-600 rounded-lg text-sm">{saveError}</div>
           )}
-          <input
+          <Input type="date" value={measuredAt} onChange={e => setMeasuredAt(e.target.value)} />
-            type="date"
+          <Input type="number" step="0.01" placeholder="Weight (kg)" value={weight} onChange={e => setWeight(e.target.value)} />
-            value={measuredAt}
+          <Input type="number" step="0.1" placeholder="Height (cm)" value={height} onChange={e => setHeight(e.target.value)} />
-            onChange={e => setMeasuredAt(e.target.value)}
+          <Input type="number" step="0.1" placeholder="Head circumference (cm)" value={headCircumference} onChange={e => setHeadCircumference(e.target.value)} />
-            className="w-full p-3 border rounded-xl dark:bg-gray-700"
-          />
-          <input
-            type="number"
-            step="0.01"
-            placeholder="Weight (kg)"
-            value={weight}
-            onChange={e => setWeight(e.target.value)}
-            className="w-full p-3 border rounded-xl dark:bg-gray-700"
-          />
-          <input
-            type="number"
-            step="0.1"
-            placeholder="Height (cm)"
-            value={height}
-            onChange={e => setHeight(e.target.value)}
-            className="w-full p-3 border rounded-xl dark:bg-gray-700"
-          />
-          <input
-            type="number"
-            step="0.1"
-            placeholder="Head circumference (cm)"
-            value={headCircumference}
-            onChange={e => setHeadCircumference(e.target.value)}
-            className="w-full p-3 border rounded-xl dark:bg-gray-700"
-          />
           <div className="flex gap-2">
             {editingId ? (
               <>
-                <button onClick={() => handleEdit(editingId)} disabled={saving} className="flex-1 p-3 bg-rose-400 text-white rounded-xl disabled:opacity-50">
+                <Button fullWidth loading={saving} onClick={() => handleEdit(editingId)}>Update</Button>
-                  {saving ? "Saving..." : "Update"}
+                <Button variant="secondary" fullWidth onClick={resetForm}>Cancel</Button>
-                </button>
-                <button onClick={resetForm} className="flex-1 p-3 bg-gray-200 dark:bg-gray-700 rounded-xl">
-                  Cancel
-                </button>
               </>
             ) : (
               <>
-                <button onClick={() => handleAdd()} disabled={saving} className="flex-1 p-3 bg-rose-400 text-white rounded-xl disabled:opacity-50">
+                <Button fullWidth loading={saving} onClick={() => handleAdd()}>Save</Button>
-                  {saving ? "Saving..." : "Save"}
+                <Button variant="secondary" fullWidth onClick={() => { setShowAdd(false); setWeight(""); setHeight(""); setHeadCircumference(""); }}>Cancel</Button>
-                </button>
-                <button onClick={() => { setShowAdd(false); setWeight(""); setHeight(""); setHeadCircumference(""); }} className="flex-1 p-3 bg-gray-200 dark:bg-gray-700 rounded-xl">
-                  Cancel
-                </button>
               </>
             )}
           </div>
@@ -681,16 +627,16 @@ export default function GrowthPage() {
           <p>Loading...</p>
         </div>
       ) : growthData.length === 0 ? (
-        <div className="mx-4 p-8 bg-white dark:bg-gray-800 rounded-xl text-center">
+        <Card className="mx-4">
-          <div className="text-4xl mb-4">📏</div>
+          <div className="text-center py-4">
-          <h3 className="text-lg font-semibold mb-2">Track {child?.name}'s Growth</h3>
+            <div className="text-4xl mb-4">📏</div>
-          <p className="text-gray-500 mb-4">
+            <h3 className="text-lg font-semibold mb-2">Track {child?.name}&apos;s Growth</h3>
-            Start logging weight, height, and head measurements to see how {child?.name} is growing compared to WHO standards.
+            <p className="text-gray-500 mb-4 text-sm">
-          </p>
+              Start logging weight, height, and head measurements to see how {child?.name} is growing compared to WHO standards.
-          <button onClick={() => setShowAdd(true)} className="p-3 bg-rose-400 text-white rounded-xl">
+            </p>
-            Add First Measurement
+            <Button onClick={() => setShowAdd(true)}>Add First Measurement</Button>
-          </button>
+          </div>
-        </div>
+        </Card>
       ) : (
         /* History List - Collapsible */
         <div className="mx-4 mb-4 bg-white dark:bg-gray-800 rounded-xl overflow-hidden">
@@ -730,7 +676,7 @@ export default function GrowthPage() {
                       ✏️
                     </button>
                     <button
-                      onClick={() => handleDelete(record.id)}
+                      onClick={() => setConfirmDeleteId(record.id)}
                       className="p-2 text-sm text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900 rounded-lg transition-colors"
                       title="Delete"
                     >
@@ -743,6 +689,16 @@ export default function GrowthPage() {
           )}
         </div>
       )}
+
+      <ConfirmDialog
+        open={!!confirmDeleteId}
+        onClose={() => setConfirmDeleteId(null)}
+        onConfirm={() => confirmDeleteId && handleDelete(confirmDeleteId)}
+        title="Delete this record?"
+        description="This measurement will be permanently removed."
+        confirmLabel="Delete"
+        variant="danger"
+      />
     </div>
   );
 }

src/app/login/page.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
+import { Button, Input, Card } from "@/components/ui";
 
 export default function LoginPage() {
   const router = useRouter();
@@ -32,7 +33,6 @@ export default function LoginPage() {
         return;
       }
 
-      // Redirect based on response
       if (data.isNewUser) {
         router.push("/onboarding");
       } else if (data.familyId) {
@@ -40,7 +40,7 @@ export default function LoginPage() {
       } else {
         router.push("/onboarding");
       }
-    } catch (err) {
+    } catch {
       setError("Something went wrong");
     } finally {
       setLoading(false);
@@ -49,46 +49,33 @@ export default function LoginPage() {
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-rose-50 to-amber-50 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center p-4">
-      <div className="bg-white dark:bg-gray-800 p-8 rounded-2xl shadow-lg max-w-md w-full">
+      <Card className="max-w-md w-full" padding="lg">
         <h1 className="text-2xl font-bold text-center mb-6 dark:text-white">
           {mode === "login" ? "Welcome Back" : "Create Account"}
         </h1>
 
         <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
+          <Input
-            <label className="block text-sm font-medium mb-1 dark:text-gray-200">Email</label>
+            label="Email"
-            <input
+            type="email"
-              type="email"
+            value={email}
-              value={email}
+            onChange={(e) => setEmail(e.target.value)}
-              onChange={(e) => setEmail(e.target.value)}
+            required
-              className="w-full p-3 border rounded-xl dark:bg-gray-700 dark:text-white"
+          />
-              required
-            />
-          </div>
 
-          <div>
+          <Input
-            <label className="block text-sm font-medium mb-1 dark:text-gray-200">Password</label>
+            label="Password"
-            <input
+            type="password"
-              type="password"
+            value={password}
-              value={password}
+            onChange={(e) => setPassword(e.target.value)}
-              onChange={(e) => setPassword(e.target.value)}
+            required
-              className="w-full p-3 border rounded-xl dark:bg-gray-700 dark:text-white"
+            minLength={4}
-              required
+            error={error || undefined}
-              minLength={4}
+          />
-            />
-          </div>
 
-          {error && (
+          <Button type="submit" fullWidth size="lg" loading={loading}>
-            <p className="text-red-500 text-sm">{error}</p>
+            {mode === "login" ? "Sign In" : "Sign Up"}
-          )}
+          </Button>
-
-          <button
-            type="submit"
-            disabled={loading}
-            className="w-full py-3 bg-rose-400 text-white rounded-xl font-medium disabled:opacity-50"
-          >
-            {loading ? "..." : mode === "login" ? "Sign In" : "Sign Up"}
-          </button>
         </form>
 
         <p className="text-center mt-4 text-sm text-gray-500 dark:text-gray-400">
@@ -101,7 +88,7 @@ export default function LoginPage() {
             {mode === "login" ? "Sign Up" : "Sign In"}
           </button>
         </p>
-      </div>
+      </Card>
     </div>
   );
-}
+}

src/app/medical/page.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from "react";
 import { useFamily } from "../FamilyProvider";
+import { Button, Card, Modal, Input, Select, Textarea, Badge } from "@/components/ui";
 
 interface Medicine {
   id: string;
@@ -992,83 +993,38 @@ const SUPPLEMENTS = [
       </div>
 
       {/* Log Dose Modal */}
-      {logDoseMedId && (
+      <Modal open={!!logDoseMedId} onClose={() => setLogDoseMedId(null)} title="Log Dose" maxWidth="sm">
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+        <div className="space-y-3">
-          <div className="bg-white dark:bg-gray-800 rounded-2xl p-6 w-full max-w-sm space-y-3 shadow-xl">
+          <Input placeholder="Amount given (e.g. 5ml)" value={doseAmount} onChange={e => setDoseAmount(e.target.value)} />
-            <h3 className="font-semibold dark:text-white">Log Dose</h3>
+          <Input type="datetime-local" value={doseTime} onChange={e => setDoseTime(e.target.value)} />
-            <input
+          <Input placeholder="Notes (optional)" value={doseNotes} onChange={e => setDoseNotes(e.target.value)} />
-              type="text"
+          <div className="flex gap-2">
-              value={doseAmount}
+            <Button fullWidth loading={doseLoading} onClick={submitDose}>Save Dose</Button>
-              onChange={e => setDoseAmount(e.target.value)}
+            <Button variant="secondary" fullWidth onClick={() => setLogDoseMedId(null)}>Cancel</Button>
-              placeholder="Amount given (e.g. 5ml)"
-              className="w-full p-2 border dark:border-gray-600 rounded-lg text-sm dark:bg-gray-700 dark:text-white"
-            />
-            <input
-              type="datetime-local"
-              value={doseTime}
-              onChange={e => setDoseTime(e.target.value)}
-              className="w-full p-2 border dark:border-gray-600 rounded-lg text-sm dark:bg-gray-700 dark:text-white"
-            />
-            <input
-              type="text"
-              value={doseNotes}
-              onChange={e => setDoseNotes(e.target.value)}
-              placeholder="Notes (optional)"
-              className="w-full p-2 border dark:border-gray-600 rounded-lg text-sm dark:bg-gray-700 dark:text-white"
-            />
-            <div className="flex gap-2">
-              <button onClick={submitDose} disabled={doseLoading} className="flex-1 py-2 bg-rose-400 text-white rounded-xl text-sm disabled:opacity-50">
-                {doseLoading ? "Saving…" : "Save Dose"}
-              </button>
-              <button onClick={() => setLogDoseMedId(null)} className="flex-1 py-2 bg-gray-100 dark:bg-gray-700 dark:text-white rounded-xl text-sm">
-                Cancel
-              </button>
-            </div>
           </div>
         </div>
-      )}
+      </Modal>
 
       {/* Correction Modal */}
-      {correctDose && (
+      <Modal open={!!correctDose} onClose={() => setCorrectDose(null)} title="Edit Dose (Correction)" maxWidth="sm">
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+        <div className="space-y-3">
-          <div className="bg-white dark:bg-gray-800 rounded-2xl p-6 w-full max-w-sm space-y-3 shadow-xl">
+          <p className="text-xs text-gray-400">Original is kept. A correction record is added.</p>
-            <h3 className="font-semibold dark:text-white">Edit Dose (Correction)</h3>
+          {correctDose && (
-            <p className="text-xs text-gray-400 dark:text-gray-500">Original is kept. A correction record is added.</p>
             <div className="text-xs bg-gray-50 dark:bg-gray-700 rounded-lg p-2 text-gray-500 dark:text-gray-400">
               Original: {correctDose.dose.amount_given || "—"} · {new Date(correctDose.dose.administered_at).toLocaleString()}
             </div>
-            <input
+          )}
-              type="text"
+          <Input placeholder="Corrected amount" value={correctAmount} onChange={e => setCorrectAmount(e.target.value)} />
-              value={correctAmount}
+          <Input placeholder="Corrected notes" value={correctNotes} onChange={e => setCorrectNotes(e.target.value)} />
-              onChange={e => setCorrectAmount(e.target.value)}
+          <Input placeholder="Reason for correction (optional)" value={correctReason} onChange={e => setCorrectReason(e.target.value)} />
-              placeholder="Corrected amount"
+          <div className="flex gap-2">
-              className="w-full p-2 border dark:border-gray-600 rounded-lg text-sm dark:bg-gray-700 dark:text-white"
+            <Button fullWidth loading={correctLoading} onClick={submitCorrection} className="bg-amber-500 hover:bg-amber-600">
-            />
+              Save Correction
-            <input
+            </Button>
-              type="text"
+            <Button variant="secondary" fullWidth onClick={() => setCorrectDose(null)}>Cancel</Button>
-              value={correctNotes}
-              onChange={e => setCorrectNotes(e.target.value)}
-              placeholder="Corrected notes"
-              className="w-full p-2 border dark:border-gray-600 rounded-lg text-sm dark:bg-gray-700 dark:text-white"
-            />
-            <input
-              type="text"
-              value={correctReason}
-              onChange={e => setCorrectReason(e.target.value)}
-              placeholder="Reason for correction (optional)"
-              className="w-full p-2 border dark:border-gray-600 rounded-lg text-sm dark:bg-gray-700 dark:text-white"
-            />
-            <div className="flex gap-2">
-              <button onClick={submitCorrection} disabled={correctLoading} className="flex-1 py-2 bg-amber-500 text-white rounded-xl text-sm disabled:opacity-50">
-                {correctLoading ? "Saving…" : "Save Correction"}
-              </button>
-              <button onClick={() => setCorrectDose(null)} className="flex-1 py-2 bg-gray-100 dark:bg-gray-700 dark:text-white rounded-xl text-sm">
-                Cancel
-              </button>
-            </div>
           </div>
         </div>
-      )}
+      </Modal>
     </div>
   );
 }

src/app/onboarding/page.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
+import { Button, Card, Input, Select } from "@/components/ui";
 
 const IAP_SCHEDULE = [
   { name: "BCG",                  weeks: 0,   milestone: "At Birth" },
@@ -155,38 +156,20 @@ export default function OnboardingPage() {
           </div>
         )}
 
-        <div className="bg-white rounded-3xl shadow-lg p-6 space-y-4">
+        <Card className="space-y-4" padding="lg">
           {/* Step 1 — Family info */}
           {step === 1 && (
             <>
               <h2 className="font-semibold text-gray-800">Your family</h2>
-              <label className="block">
+              <Input label="Family Name" type="text" value={form.familyName}
-                <span className="text-sm font-medium">Family Name</span>
+                onChange={(e) => setForm({ ...form, familyName: e.target.value })}
-                <input
+                placeholder="The Gupta Family" />
-                  type="text"
+              <Input label="Your Name" type="text" value={form.memberName}
-                  value={form.familyName}
+                onChange={(e) => setForm({ ...form, memberName: e.target.value })}
-                  onChange={(e) => setForm({ ...form, familyName: e.target.value })}
+                placeholder="Mama" />
-                  placeholder="The Gupta Family"
+              <Button fullWidth size="lg" onClick={() => setStep(2)} disabled={!form.familyName || !form.memberName}>
-                  className="w-full p-3 border rounded-xl mt-1"
-                />
-              </label>
-              <label className="block">
-                <span className="text-sm font-medium">Your Name</span>
-                <input
-                  type="text"
-                  value={form.memberName}
-                  onChange={(e) => setForm({ ...form, memberName: e.target.value })}
-                  placeholder="Mama"
-                  className="w-full p-3 border rounded-xl mt-1"
-                />
-              </label>
-              <button
-                onClick={() => setStep(2)}
-                disabled={!form.familyName || !form.memberName}
-                className="w-full p-3 bg-rose-400 text-white rounded-xl font-medium disabled:opacity-50"
-              >
                 Next →
-              </button>
+              </Button>
             </>
           )}
 
@@ -194,49 +177,35 @@ export default function OnboardingPage() {
           {step === 2 && (
             <>
               <h2 className="font-semibold text-gray-800">Your baby</h2>
-              <label className="block">
+              <Input label="Baby's Name" type="text" value={form.childName}
-                <span className="text-sm font-medium">Baby's Name</span>
+                onChange={(e) => setForm({ ...form, childName: e.target.value })}
-                <input
+                placeholder="Tia" />
-                  type="text"
+              <Input label="Birth Date" type="date" value={form.birthDate}
-                  value={form.childName}
+                onChange={(e) => setForm({ ...form, birthDate: e.target.value })} />
-                  onChange={(e) => setForm({ ...form, childName: e.target.value })}
+              <div>
-                  placeholder="Tia"
+                <span className="text-sm font-medium text-gray-700">Sex</span>
-                  className="w-full p-3 border rounded-xl mt-1"
-                />
-              </label>
-              <label className="block">
-                <span className="text-sm font-medium">Birth Date</span>
-                <input
-                  type="date"
-                  value={form.birthDate}
-                  onChange={(e) => setForm({ ...form, birthDate: e.target.value })}
-                  className="w-full p-3 border rounded-xl mt-1"
-                />
-              </label>
-              <label className="block">
-                <span className="text-sm font-medium">Sex</span>
                 <div className="flex gap-2 mt-1">
                   {(["male", "female", "other"] as const).map((s) => (
-                    <button
+                    <Button
                       key={s}
                       type="button"
+                      fullWidth
+                      variant={form.sex === s ? "primary" : "secondary"}
                       onClick={() => setForm({ ...form, sex: s })}
-                      className={`flex-1 p-3 rounded-xl border capitalize ${form.sex === s ? "bg-rose-400 text-white border-rose-400" : "bg-white"}`}
+                      className="capitalize"
                     >
                       {s}
-                    </button>
+                    </Button>
                   ))}
                 </div>
-              </label>
+              </div>
               <div className="flex gap-2">
-                <button type="button" onClick={() => setStep(1)} className="flex-1 p-3 border rounded-xl font-medium">Back</button>
+                <Button variant="secondary" fullWidth onClick={() => setStep(1)}>Back</Button>
-                <button
+                <Button fullWidth loading={loading}
-                  onClick={handleSubmit}
+                  disabled={!form.childName || !form.birthDate || !form.sex}
-                  disabled={!form.childName || !form.birthDate || !form.sex || loading}
+                  onClick={handleSubmit}>
-                  className="flex-1 p-3 bg-rose-400 text-white rounded-xl font-medium disabled:opacity-50"
+                  Next →
-                >
+                </Button>
-                  {loading ? "Creating..." : "Next →"}
-                </button>
               </div>
             </>
           )}
@@ -285,11 +254,8 @@ export default function OnboardingPage() {
                                 </button>
                               </div>
                               {s.given && (
-                                <input
+                                <Input type="date" value={s.date} className="mt-2"
-                                  type="date"
-                                  value={s.date}
                                   onChange={e => setVaccStates(prev => ({ ...prev, [v.name]: { ...s, date: e.target.value } }))}
-                                  className="mt-2 w-full p-1.5 border rounded-lg text-sm"
                                 />
                               )}
                             </div>
@@ -302,23 +268,12 @@ export default function OnboardingPage() {
               )}
 
               <div className="flex gap-2 pt-2">
-                <button
+                <Button variant="ghost" fullWidth onClick={() => router.push("/")}>Skip for now</Button>
-                  onClick={() => router.push("/")}
+                <Button fullWidth loading={saving} onClick={handleVaccSave}>Save & Go Home</Button>
-                  className="flex-1 p-3 border rounded-xl text-sm text-gray-500"
-                >
-                  Skip for now
-                </button>
-                <button
-                  onClick={handleVaccSave}
-                  disabled={saving}
-                  className="flex-1 p-3 bg-rose-400 text-white rounded-xl font-medium disabled:opacity-50"
-                >
-                  {saving ? "Saving..." : "Save & Go Home"}
-                </button>
               </div>
             </>
           )}
-        </div>
+        </Card>
       </div>
     </div>
   );

src/app/page.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { useTheme } from "./ThemeProvider";
 import { useFamily } from "./FamilyProvider";
 import { useStageCheck, type BabyStage } from "@/hooks/useStageCheck";
+import { Button, Modal, Select, Input } from "@/components/ui";
 
 const OFFLINE_QUEUE_KEY = "tia_offline_queue";
 
@@ -109,17 +110,41 @@ function LogModal({ type, childId, onClose }: { type: "feed" | "diaper" | "sleep
     setLoading(false);
   };
 
+  const title = type === "feed" ? "Log Feed" : type === "diaper" ? "Log Diaper" : "Log Sleep";
   return (
-    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+    <Modal open={!!type} onClose={onClose} title={title} maxWidth="sm">
-      <div className="bg-white dark:bg-gray-800 rounded-2xl p-6 w-full max-w-sm mx-4">
+      <div className="space-y-3">
-        <h2 className="text-xl font-bold mb-4">{type === "feed" && "Log Feed"}{type === "diaper" && "Log Diaper"}{type === "sleep" && "Log Sleep"}</h2>
+        {type === "feed" && (
-        {type === "feed" && (<><select value={subType} onChange={e => setSubType(e.target.value)} className="w-full p-3 border dark:border-gray-600 rounded-xl mb-3 bg-white dark:bg-gray-700 dark:text-white"><option value="breast_milk">Breast Milk</option><option value="formula">Formula</option><option value="solid">Solid Food</option><option value="water">Water</option></select><input type="number" placeholder="Amount (ml)" value={amountMl} onChange={e => setAmountMl(e.target.value)} className="w-full p-3 border dark:border-gray-600 rounded-xl mb-3 bg-white dark:bg-gray-700 dark:text-white dark:placeholder-gray-400" /></>)}
+          <>
-        {type === "diaper" && (<select value={subType} onChange={e => setSubType(e.target.value)} className="w-full p-3 border dark:border-gray-600 rounded-xl mb-3 bg-white dark:bg-gray-700 dark:text-white"><option value="wet">Wet</option><option value="dirty">Dirty</option><option value="both">Both</option></select>)}
+            <Select value={subType} onChange={e => setSubType(e.target.value)}>
-        {type === "sleep" && (<select value={subType} onChange={e => setSubType(e.target.value)} className="w-full p-3 border dark:border-gray-600 rounded-xl mb-3 bg-white dark:bg-gray-700 dark:text-white"><option value="nap">Nap</option><option value="night">Night Sleep</option></select>)}
+              <option value="breast_milk">Breast Milk</option>
-        <input type="text" placeholder="Notes (optional)" value={notes} onChange={e => setNotes(e.target.value)} className="w-full p-3 border dark:border-gray-600 rounded-xl mb-4 bg-white dark:bg-gray-700 dark:text-white dark:placeholder-gray-400" />
+              <option value="formula">Formula</option>
-        <div className="flex gap-3"><button onClick={onClose} className="flex-1 p-3 border dark:border-gray-600 rounded-xl dark:text-white">Cancel</button><button onClick={handleSubmit} disabled={loading} className="flex-1 p-3 bg-rose-400 text-white rounded-xl">{loading ? "Saving..." : "Save"}</button></div>
+              <option value="solid">Solid Food</option>
+              <option value="water">Water</option>
+            </Select>
+            <Input type="number" placeholder="Amount (ml)" value={amountMl} onChange={e => setAmountMl(e.target.value)} />
+          </>
+        )}
+        {type === "diaper" && (
+          <Select value={subType} onChange={e => setSubType(e.target.value)}>
+            <option value="wet">Wet</option>
+            <option value="dirty">Dirty</option>
+            <option value="both">Both</option>
+          </Select>
+        )}
+        {type === "sleep" && (
+          <Select value={subType} onChange={e => setSubType(e.target.value)}>
+            <option value="nap">Nap</option>
+            <option value="night">Night Sleep</option>
+          </Select>
+        )}
+        <Input placeholder="Notes (optional)" value={notes} onChange={e => setNotes(e.target.value)} />
+        <div className="flex gap-3 pt-1">
+          <Button variant="secondary" fullWidth onClick={onClose}>Cancel</Button>
+          <Button variant="primary" fullWidth loading={loading} onClick={handleSubmit}>Save</Button>
+        </div>
       </div>
-    </div>
+    </Modal>
   );
 }
 

src/app/settings/page.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useTheme } from "../ThemeProvider";
 import { useFamily } from "../FamilyProvider";
+import { Button, Card, Input, Select, Badge } from "@/components/ui";
 
 interface Member {
   id: string;
@@ -180,7 +181,7 @@ export default function SettingsPage() {
                   </div>
                 </div>
                 {tier === "free" && (
-                  <button className="text-sm px-3 py-1 bg-rose-400 text-white rounded-full">Upgrade</button>
+                  <Button size="sm">Upgrade</Button>
                 )}
               </div>
 
@@ -195,9 +196,7 @@ export default function SettingsPage() {
                           <div className="font-medium text-sm">{member.name || member.email}</div>
                           <div className="text-xs text-gray-400">{member.email}</div>
                         </div>
-                        <span className={`text-xs px-2 py-1 rounded ${member.role === "admin" ? "bg-rose-100 text-rose-600" : "bg-gray-100 dark:bg-gray-600"}`}>
+                        <Badge variant={member.role === "admin" ? "rose" : "default"}>{member.role}</Badge>
-                          {member.role}
-                        </span>
                       </div>
                     ))}
                   </div>
@@ -256,28 +255,14 @@ export default function SettingsPage() {
               {/* Add invite form */}
               {canInvite && (
                 <div className="space-y-2">
-                  <input
+                  <Input type="email" value={inviteEmail} onChange={(e) => setInviteEmail(e.target.value)} placeholder="Email address" />
-                    type="email"
+                  <Select value={inviteRole} onChange={(e) => setInviteRole(e.target.value)}>
-                    value={inviteEmail}
-                    onChange={(e) => setInviteEmail(e.target.value)}
-                    placeholder="Email address"
-                    className="w-full p-2 border rounded-lg text-sm"
-                  />
-                  <select
-                    value={inviteRole}
-                    onChange={(e) => setInviteRole(e.target.value)}
-                    className="w-full p-2 border rounded-lg text-sm"
-                  >
                     <option value="caregiver">Caregiver</option>
                     <option value="viewer">Viewer (read-only)</option>
-                  </select>
+                  </Select>
-                  <button
+                  <Button fullWidth loading={inviteLoading} disabled={!inviteEmail} onClick={sendInvite}>
-                    onClick={sendInvite}
+                    Send Invite
-                    disabled={inviteLoading || !inviteEmail}
+                  </Button>
-                    className="w-full p-2 bg-rose-400 text-white rounded-lg text-sm disabled:opacity-50"
-                  >
-                    {inviteLoading ? "Sending..." : "Send Invite"}
-                  </button>
                 </div>
               )}
             </div>
@@ -301,15 +286,13 @@ export default function SettingsPage() {
             <div className="px-4 pb-4">
               <div className="grid grid-cols-2 gap-2">
                 {themeOptions.map((opt) => (
-                  <button
+                  <Button
                     key={opt.value}
                     onClick={() => setMode(opt.value)}
-                    className={`p-3 rounded-lg text-sm ${
+                    variant={mode === opt.value ? "primary" : "secondary"}
-                      mode === opt.value ? "bg-rose-400 text-white" : "bg-gray-100 dark:bg-gray-700"
-                    }`}
                   >
                     {opt.label}
-                  </button>
+                  </Button>
                 ))}
               </div>
             </div>
@@ -324,20 +307,8 @@ export default function SettingsPage() {
           </div>
           <p className="text-xs text-gray-400 dark:text-gray-500">Shown on the emergency guide and in AI medical redirects.</p>
           <div className="flex gap-2">
-            <input
+            <Input type="tel" value={pedPhone} onChange={e => setPedPhone(e.target.value)} placeholder="+91 98765 43210" className="flex-1" />
-              type="tel"
+            <Button size="sm" loading={pedSaving} onClick={savePedPhone}>Save</Button>
-              value={pedPhone}
-              onChange={e => setPedPhone(e.target.value)}
-              placeholder="+91 98765 43210"
-              className="flex-1 p-2 border dark:border-gray-600 rounded-lg text-sm dark:bg-gray-700 dark:text-white"
-            />
-            <button
-              onClick={savePedPhone}
-              disabled={pedSaving}
-              className="px-4 py-2 bg-rose-400 text-white rounded-lg text-sm disabled:opacity-50"
-            >
-              {pedSaving ? "..." : "Save"}
-            </button>
           </div>
           <Link href="/medical/emergency" className="text-xs text-rose-500 dark:text-rose-400">
             View Emergency Guide →