diff --git a/src/app/milestones/page.tsx b/src/app/milestones/page.tsx
index 2b35038..031120a 100644
--- a/src/app/milestones/page.tsx
+++ b/src/app/milestones/page.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState, useMemo } from "react";
 import { useFamily } from "@/app/FamilyProvider";
 import { useStageCheck } from "@/hooks/useStageCheck";
 import { MILESTONES, type MilestoneDef } from "@/lib/milestones";
+import { Button, Input } from "@/components/ui";
 
 type Category = "all" | "social" | "motor" | "language" | "cognitive";
 type Filter = "all" | "achieved" | "upcoming";
@@ -29,7 +30,6 @@ export default function MilestonesPage() {
   const [filter, setFilter] = useState<Filter>("all");
   const [category, setCategory] = useState<Category>("all");
 
-  // date picker state per milestone key
   const [pendingKey, setPendingKey] = useState<string | null>(null);
   const [pendingDate, setPendingDate] = useState<string>(
     new Date().toISOString().slice(0, 10)
@@ -46,7 +46,6 @@ export default function MilestonesPage() {
 
   async function toggleMilestone(m: MilestoneWithStatus) {
     if (m.achieved) {
-      // un-mark
       await fetch(`/api/milestones/${m.key}?childId=${child!.id}`, { method: "DELETE" });
       setItems(prev => prev.map(x => x.key === m.key ? { ...x, achieved: false, achievedAt: null } : x));
       if (pendingKey === m.key) setPendingKey(null);
@@ -84,76 +83,83 @@ export default function MilestonesPage() {
   }, [items, stage]);
 
   if (!child) return (
-    <div className="flex items-center justify-center min-h-screen">
+    <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 className="text-gray-500">Select a child to view milestones.</p>
     </div>
   );
 
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 pb-20">
-      <div className="max-w-2xl mx-auto px-4 py-6">
-        {/* Header */}
-        <div className="flex items-center justify-between mb-4">
+    <div className="min-h-screen bg-gradient-to-br from-rose-50 to-amber-50 dark:from-gray-900 dark:to-gray-800 pb-20">
+      {/* Header */}
+      <div className="p-4 flex justify-between items-center">
+        <div className="flex items-center gap-4">
+          <a href="/menu" className="p-2">←</a>
           <div>
-            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Milestones</h1>
-            <p className="text-sm text-gray-500">{child.name}</p>
-          </div>
-          {stage && (
-            <span className="text-sm font-medium px-3 py-1 rounded-full bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300">
-              {stage.emoji} {stage.label}
-            </span>
-          )}
-        </div>
-
-        {/* Progress bar */}
-        <div className="bg-white dark:bg-gray-800 rounded-2xl p-4 mb-4 shadow-sm">
-          <div className="flex items-center justify-between text-sm mb-2">
-            <span className="font-medium text-gray-700 dark:text-gray-300">{achievedCount} of {items.length} milestones</span>
-            <span className="text-gray-400">{Math.round(achievedCount / Math.max(items.length, 1) * 100)}%</span>
-          </div>
-          <div className="h-2 bg-gray-100 dark:bg-gray-700 rounded-full overflow-hidden">
-            <div
-              className="h-full bg-gradient-to-r from-pink-400 to-purple-400 rounded-full transition-all duration-500"
-              style={{ width: `${achievedCount / Math.max(items.length, 1) * 100}%` }}
-            />
+            <h1 className="text-xl font-bold">Milestones 🌱</h1>
+            <p className="text-xs text-gray-500 dark:text-gray-400">{child.name}</p>
           </div>
         </div>
+        {stage && (
+          <span className="text-xs font-medium px-3 py-1.5 rounded-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 shadow-sm">
+            {stage.emoji} {stage.label}
+          </span>
+        )}
+      </div>
 
-        {/* Filter tabs */}
-        <div className="flex gap-2 mb-3 overflow-x-auto pb-1 scrollbar-hide">
-          {(["all", "achieved", "upcoming"] as Filter[]).map(f => (
-            <button
-              key={f}
-              onClick={() => setFilter(f)}
-              className={`px-4 py-1.5 rounded-full text-sm font-medium whitespace-nowrap transition-colors ${
-                filter === f
-                  ? "bg-purple-500 text-white"
-                  : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 border dark:border-gray-700"
-              }`}
-            >
-              {f.charAt(0).toUpperCase() + f.slice(1)}
-            </button>
-          ))}
+      {/* Progress bar */}
+      <div className="mx-4 mb-4 p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm">
+        <div className="flex items-center justify-between text-sm mb-2">
+          <span className="font-medium text-gray-700 dark:text-gray-300">
+            {achievedCount} of {items.length} milestones
+          </span>
+          <span className="text-gray-400">
+            {Math.round(achievedCount / Math.max(items.length, 1) * 100)}%
+          </span>
         </div>
-
-        {/* Category chips */}
-        <div className="flex gap-2 mb-5 overflow-x-auto pb-1 scrollbar-hide">
-          {(["all", "social", "motor", "language", "cognitive"] as Category[]).map(c => (
-            <button
-              key={c}
-              onClick={() => setCategory(c)}
-              className={`px-3 py-1 rounded-full text-xs font-medium whitespace-nowrap transition-colors ${
-                category === c
-                  ? "bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900"
-                  : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 border dark:border-gray-700"
-              }`}
-            >
-              {c.charAt(0).toUpperCase() + c.slice(1)}
-            </button>
-          ))}
+        <div className="h-2 bg-gray-100 dark:bg-gray-700 rounded-full overflow-hidden">
+          <div
+            className="h-full bg-gradient-to-r from-rose-400 to-pink-400 rounded-full transition-all duration-500"
+            style={{ width: `${achievedCount / Math.max(items.length, 1) * 100}%` }}
+          />
         </div>
+      </div>
 
-        {/* Milestone grid */}
+      {/* Filter tabs */}
+      <div className="px-4 mb-3 flex gap-2 overflow-x-auto">
+        {(["all", "achieved", "upcoming"] as Filter[]).map(f => (
+          <button
+            key={f}
+            onClick={() => setFilter(f)}
+            className={`px-4 py-2 rounded-full text-sm whitespace-nowrap transition-colors ${
+              filter === f
+                ? "bg-rose-400 text-white"
+                : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400"
+            }`}
+          >
+            {f.charAt(0).toUpperCase() + f.slice(1)}
+          </button>
+        ))}
+      </div>
+
+      {/* Category chips */}
+      <div className="px-4 mb-4 flex gap-2 overflow-x-auto">
+        {(["all", "social", "motor", "language", "cognitive"] as Category[]).map(c => (
+          <button
+            key={c}
+            onClick={() => setCategory(c)}
+            className={`px-3 py-1.5 rounded-full text-xs font-medium whitespace-nowrap transition-colors ${
+              category === c
+                ? "bg-rose-400 text-white"
+                : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400"
+            }`}
+          >
+            {c.charAt(0).toUpperCase() + c.slice(1)}
+          </button>
+        ))}
+      </div>
+
+      {/* Milestone grid */}
+      <div className="px-4">
         {loading ? (
           <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
             {Array.from({ length: 6 }).map((_, i) => (
@@ -161,7 +167,10 @@ export default function MilestonesPage() {
             ))}
           </div>
         ) : filtered.length === 0 ? (
-          <p className="text-center text-gray-400 py-12">No milestones match this filter.</p>
+          <div className="text-center py-20 text-gray-400">
+            <div className="text-5xl mb-3">🌱</div>
+            <p>No milestones match this filter.</p>
+          </div>
         ) : (
           <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
             {filtered.map(m => (
@@ -195,28 +204,22 @@ export default function MilestonesPage() {
 
                 {/* Inline date picker */}
                 {pendingKey === m.key && (
-                  <div className="mt-2 bg-white dark:bg-gray-800 rounded-xl p-3 shadow-md border dark:border-gray-700">
-                    <p className="text-xs text-gray-600 dark:text-gray-400 mb-2">When did this happen?</p>
-                    <input
+                  <div className="mt-2 bg-white dark:bg-gray-800 rounded-xl p-3 shadow-md border border-gray-100 dark:border-gray-700">
+                    <p className="text-xs text-gray-500 dark:text-gray-400 mb-2">When did this happen?</p>
+                    <Input
                       type="date"
                       value={pendingDate}
                       max={new Date().toISOString().slice(0, 10)}
                       onChange={e => setPendingDate(e.target.value)}
-                      className="w-full text-sm border dark:border-gray-600 rounded-lg px-2 py-1.5 dark:bg-gray-700 dark:text-white mb-2"
+                      className="mb-2"
                     />
                     <div className="flex gap-2">
-                      <button
-                        onClick={() => confirmAchieved(m.key)}
-                        className="flex-1 bg-green-500 text-white rounded-lg py-1.5 text-xs font-medium"
-                      >
+                      <Button size="sm" fullWidth onClick={() => confirmAchieved(m.key)}>
                         Mark achieved
-                      </button>
-                      <button
-                        onClick={() => setPendingKey(null)}
-                        className="flex-1 border dark:border-gray-600 rounded-lg py-1.5 text-xs text-gray-600 dark:text-gray-400"
-                      >
+                      </Button>
+                      <Button size="sm" variant="secondary" fullWidth onClick={() => setPendingKey(null)}>
                         Cancel
-                      </button>
+                      </Button>
                     </div>
                   </div>
                 )}