setting up test functionality

components/avatar/avatar-status-card.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+import { PixelAvatar } from "@/components/avatar/pixel-avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+} from "@/components/ui/card";
+import {
+  defaultAvatarCondition,
+  WELLNESS_SCALE_MAX,
+  type AvatarCondition,
+} from "@/lib/avatar-state";
+import {
+  getAvatarConditionForToday,
+  hasCompletedDailyQuizToday,
+} from "@/lib/daily-quiz-storage";
+import { routes } from "@/lib/routes";
+
+export function AvatarStatusCard() {
+  const [condition, setCondition] = useState<AvatarCondition>(
+    defaultAvatarCondition,
+  );
+  const [hasCheckedInToday, setHasCheckedInToday] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    const checkedIn = hasCompletedDailyQuizToday();
+    setHasCheckedInToday(checkedIn);
+    setCondition(getAvatarConditionForToday() ?? defaultAvatarCondition);
+    setIsReady(true);
+  }, []);
+
+  if (!isReady) {
+    return (
+      <Card>
+        <CardContent className="pt-6">
+          <p className="text-center text-sm text-muted-foreground">
+            Loading your pet...
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardContent className="flex flex-col items-center gap-4 pt-6">
+        <PixelAvatar mood={condition.mood} />
+        <div className="flex flex-wrap justify-center gap-2">
+          <Badge variant="secondary">
+            Energy {condition.energy}/{WELLNESS_SCALE_MAX}
+          </Badge>
+          <Badge variant="secondary">
+            Health {condition.health}/{WELLNESS_SCALE_MAX}
+          </Badge>
+          <Badge variant={hasCheckedInToday ? "default" : "outline"}>
+            {hasCheckedInToday ? "Checked in today" : "Quiz pending"}
+          </Badge>
+        </div>
+        <p className="text-center text-sm text-muted-foreground">
+          {hasCheckedInToday
+            ? "Your pet is reacting to today's wellness check-in and journal."
+            : "Complete today's quiz to update your pet's mood, energy, and health."}
+        </p>
+        {!hasCheckedInToday ? (
+          <Button asChild className="w-full">
+            <Link href={routes.dailyQuiz}>Take today&apos;s quiz</Link>
+          </Button>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}

components/avatar/pixel-avatar.tsx

@@ -1,6 +1,5 @@
 import { cn } from "@/lib/utils";
-
-type AvatarMood = "happy" | "neutral" | "tired";
+import type { AvatarMood } from "@/lib/avatar-state";
 
 const moodStyles: Record<AvatarMood, string> = {
   happy: "bg-emerald-400 shadow-[0_0_0_4px_rgba(16,185,129,0.25)]",

components/daily-quiz/daily-quiz-form.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { PixelAvatar } from "@/components/avatar/pixel-avatar";
+import { WellnessSlider } from "@/components/daily-quiz/wellness-slider";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import {
+  defaultDailyQuizAnswers,
+  WELLNESS_SCALE_MAX,
+  type DailyQuizAnswers,
+  type DailyQuizSubmission,
+} from "@/lib/avatar-state";
+import {
+  getDailyQuizSubmission,
+  getTodayDateKey,
+  saveDailyQuizSubmission,
+} from "@/lib/daily-quiz-storage";
+
+export function DailyQuizForm() {
+  const [answers, setAnswers] = useState<DailyQuizAnswers>(
+    defaultDailyQuizAnswers,
+  );
+  const [submission, setSubmission] = useState<DailyQuizSubmission | null>(
+    null,
+  );
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    const existingSubmission = getDailyQuizSubmission();
+
+    if (existingSubmission?.date === getTodayDateKey()) {
+      setSubmission(existingSubmission);
+      setAnswers(existingSubmission.answers);
+    }
+
+    setIsReady(true);
+  }, []);
+
+  const isCompleted = submission !== null;
+  const canSubmit = !isCompleted;
+
+  const updateAnswer = <K extends keyof DailyQuizAnswers>(
+    key: K,
+    value: DailyQuizAnswers[K],
+  ) => {
+    setAnswers((current) => ({
+      ...current,
+      [key]: value,
+    }));
+  };
+
+  const handleSubmit = () => {
+    if (!canSubmit) {
+      return;
+    }
+
+    const savedSubmission = saveDailyQuizSubmission(answers);
+    setSubmission(savedSubmission);
+  };
+
+  if (!isReady) {
+    return (
+      <p className="text-sm text-muted-foreground">Loading today&apos;s quiz...</p>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex items-center justify-between">
+        <Badge>Today&apos;s check-in</Badge>
+        <Badge variant={isCompleted ? "default" : "outline"}>
+          {isCompleted ? "Completed" : "Not completed"}
+        </Badge>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Wellness</CardTitle>
+          <CardDescription>
+            Sliders from 1 to 5 for how you&apos;re doing today.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-5">
+          <WellnessSlider
+            id="feeling"
+            label="How are you feeling today?"
+            value={answers.feeling}
+            disabled={isCompleted}
+            onChange={(value) => updateAnswer("feeling", value)}
+          />
+          <WellnessSlider
+            id="stress"
+            label="How stressed are you today?"
+            value={answers.stress}
+            disabled={isCompleted}
+            onChange={(value) => updateAnswer("stress", value)}
+          />
+          <WellnessSlider
+            id="energy"
+            label="How much energy do you have?"
+            value={answers.energy}
+            disabled={isCompleted}
+            onChange={(value) => updateAnswer("energy", value)}
+          />
+          <WellnessSlider
+            id="sleep-length"
+            label="How long did you sleep?"
+            value={answers.sleepLength}
+            disabled={isCompleted}
+            onChange={(value) => updateAnswer("sleepLength", value)}
+          />
+          <WellnessSlider
+            id="sleep-quality"
+            label="How good was your sleep?"
+            value={answers.sleepQuality}
+            disabled={isCompleted}
+            onChange={(value) => updateAnswer("sleepQuality", value)}
+          />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Daily journal</CardTitle>
+          <CardDescription>Write about your day.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <Label htmlFor="journal" className="sr-only">
+            Daily journal
+          </Label>
+          <textarea
+            id="journal"
+            value={answers.journal}
+            disabled={isCompleted}
+            onChange={(event) => updateAnswer("journal", event.target.value)}
+            className="min-h-32 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60"
+            placeholder="Write about your day."
+          />
+        </CardContent>
+      </Card>
+
+      {isCompleted && submission ? (
+        <Card>
+          <CardContent className="flex flex-col items-center gap-4 pt-6">
+            <PixelAvatar mood={submission.condition.mood} size="md" />
+            <div className="grid w-full grid-cols-3 gap-2 text-center text-sm">
+              <div className="rounded-lg border px-3 py-2">
+                <p className="text-muted-foreground">Mood</p>
+                <p className="font-medium capitalize">
+                  {submission.condition.mood}
+                </p>
+              </div>
+              <div className="rounded-lg border px-3 py-2">
+                <p className="text-muted-foreground">Energy</p>
+                <p className="font-medium">
+                  {submission.condition.energy}/{WELLNESS_SCALE_MAX}
+                </p>
+              </div>
+              <div className="rounded-lg border px-3 py-2">
+                <p className="text-muted-foreground">Health</p>
+                <p className="font-medium">
+                  {submission.condition.health}/{WELLNESS_SCALE_MAX}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      ) : (
+        <Button className="w-full" disabled={!canSubmit} onClick={handleSubmit}>
+          Complete daily quiz
+        </Button>
+      )}
+    </div>
+  );
+}

components/daily-quiz/daily-quiz-link-button.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { hasCompletedDailyQuizToday } from "@/lib/daily-quiz-storage";
+import { routes } from "@/lib/routes";
+
+export function DailyQuizLinkButton() {
+  const [isCompleted, setIsCompleted] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    setIsCompleted(hasCompletedDailyQuizToday());
+    setIsReady(true);
+  }, []);
+
+  if (!isReady || isCompleted) {
+    return (
+      <Button className="w-full" variant="outline" disabled>
+        Open daily quiz
+      </Button>
+    );
+  }
+
+  return (
+    <Button asChild className="w-full" variant="outline">
+      <Link href={routes.dailyQuiz}>Open daily quiz</Link>
+    </Button>
+  );
+}

components/daily-quiz/wellness-slider.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { Label } from "@/components/ui/label";
+
+type WellnessSliderProps = {
+  id: string;
+  label: string;
+  value: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  unit?: string;
+  formatValue?: (value: number) => string;
+  disabled?: boolean;
+  onChange: (value: number) => void;
+};
+
+export function WellnessSlider({
+  id,
+  label,
+  value,
+  min = 1,
+  max = 5,
+  step = 1,
+  unit,
+  formatValue,
+  disabled = false,
+  onChange,
+}: WellnessSliderProps) {
+  const displayValue = formatValue ? formatValue(value) : `${value}${unit ?? ""}`;
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between text-sm">
+        <Label htmlFor={id}>{label}</Label>
+        <span className="text-muted-foreground">{displayValue}</span>
+      </div>
+      <input
+        id={id}
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        disabled={disabled}
+        onChange={(event) => onChange(Number(event.target.value))}
+        className="w-full accent-primary disabled:opacity-60"
+      />
+    </div>
+  );
+}

components/habits/habit-tracker.tsx

@@ -0,0 +1,272 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { HABIT_PET_DATA_UPDATED_EVENT } from "@/lib/app-events";
+import {
+  getDailyTasks,
+  type DailyTask,
+} from "@/lib/daily-tasks";
+import {
+  addHabit,
+  getCustomHabits,
+  isHabitCompletedToday,
+  removeHabit,
+  toggleHabitCompletion,
+  type Habit,
+} from "@/lib/habits-storage";
+import { getProfilePreferences } from "@/lib/profile-preferences-storage";
+import { hasCompletedDailyQuizToday } from "@/lib/daily-quiz-storage";
+
+type HabitTrackerProps = {
+  mode?: "daily" | "manage";
+};
+
+const reasonLabels = {
+  custom: "Custom",
+  focus: "Your focus",
+  quiz: "Today's quiz",
+} as const;
+
+function DailyTaskList({
+  tasks,
+  onToggle,
+}: {
+  tasks: DailyTask[];
+  onToggle: (habitId: string) => void;
+}) {
+  if (tasks.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        No daily tasks yet. Set focus topics in Profile or complete the daily
+        quiz to personalize your list.
+      </p>
+    );
+  }
+
+  const sortedTasks = [...tasks].sort((a, b) => {
+    const aCompleted = isHabitCompletedToday(a);
+    const bCompleted = isHabitCompletedToday(b);
+
+    if (aCompleted === bCompleted) {
+      return 0;
+    }
+
+    return aCompleted ? 1 : -1;
+  });
+
+  return (
+    <>
+      {sortedTasks.map((habit) => {
+        const isCompleted = isHabitCompletedToday(habit);
+
+        return (
+          <div
+            key={habit.id}
+            className={`flex items-start justify-between gap-3 rounded-lg border p-3 ${
+              isCompleted ? "bg-muted/40 opacity-80" : ""
+            }`}
+          >
+            <div className="flex min-w-0 items-start gap-3">
+              <Checkbox
+                id={habit.id}
+                checked={isCompleted}
+                onCheckedChange={() => onToggle(habit.id)}
+                className="mt-0.5"
+              />
+              <div className="flex min-w-0 flex-col gap-2">
+                <Label htmlFor={habit.id} className="leading-snug">
+                  {habit.label}
+                </Label>
+                <Badge
+                  variant="outline"
+                  className="w-fit px-2.5 py-0.5 text-[11px] font-normal"
+                >
+                  {reasonLabels[habit.reason]}
+                </Badge>
+              </div>
+            </div>
+            <Badge variant="secondary" className="shrink-0">
+              {habit.streak} day streak
+            </Badge>
+          </div>
+        );
+      })}
+    </>
+  );
+}
+
+function CustomHabitList({
+  habits,
+  onRemove,
+}: {
+  habits: Habit[];
+  onRemove: (habitId: string) => void;
+}) {
+  if (habits.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        No custom habits yet. Add one below to include it in your daily tasks.
+      </p>
+    );
+  }
+
+  return (
+    <>
+      {habits.map((habit) => (
+        <div
+          key={habit.id}
+          className="flex items-center justify-between rounded-lg border p-3"
+        >
+          <span className="text-sm">{habit.label}</span>
+          <div className="flex items-center gap-2">
+            <Badge variant="secondary">{habit.streak} day streak</Badge>
+            <Button
+              type="button"
+              size="sm"
+              variant="ghost"
+              onClick={() => onRemove(habit.id)}
+            >
+              Remove
+            </Button>
+          </div>
+        </div>
+      ))}
+    </>
+  );
+}
+
+export function HabitTracker({ mode = "daily" }: HabitTrackerProps) {
+  const [dailyTasks, setDailyTasks] = useState<DailyTask[]>([]);
+  const [customHabits, setCustomHabits] = useState<Habit[]>([]);
+  const [newHabitLabel, setNewHabitLabel] = useState("");
+  const [focusTopics, setFocusTopics] = useState<string[]>([]);
+  const [quizCompletedToday, setQuizCompletedToday] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+
+  const refresh = useCallback(() => {
+    setDailyTasks(getDailyTasks());
+    setCustomHabits(getCustomHabits());
+    setFocusTopics(getProfilePreferences().focusTopics);
+    setQuizCompletedToday(hasCompletedDailyQuizToday());
+    setIsReady(true);
+  }, []);
+
+  useEffect(() => {
+    refresh();
+
+    window.addEventListener(HABIT_PET_DATA_UPDATED_EVENT, refresh);
+    return () => {
+      window.removeEventListener(HABIT_PET_DATA_UPDATED_EVENT, refresh);
+    };
+  }, [refresh]);
+
+  const handleToggle = (habitId: string) => {
+    toggleHabitCompletion(habitId);
+  };
+
+  const handleAddHabit = () => {
+    addHabit(newHabitLabel);
+    setNewHabitLabel("");
+  };
+
+  const handleRemoveHabit = (habitId: string) => {
+    removeHabit(habitId);
+  };
+
+  if (!isReady) {
+    return (
+      <Card>
+        <CardContent className="pt-6">
+          <p className="text-sm text-muted-foreground">Loading habits...</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (mode === "manage") {
+    return (
+      <div className="flex flex-col gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Custom habits</CardTitle>
+            <CardDescription>
+              Add your own habits. Custom habits always appear in your daily
+              task list.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <CustomHabitList habits={customHabits} onRemove={handleRemoveHabit} />
+            <div className="flex gap-2">
+              <Input
+                value={newHabitLabel}
+                placeholder="Add a custom habit"
+                onChange={(event) => setNewHabitLabel(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") {
+                    event.preventDefault();
+                    handleAddHabit();
+                  }
+                }}
+              />
+              <Button type="button" onClick={handleAddHabit}>
+                Add
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">How daily tasks are picked</CardTitle>
+            <CardDescription>
+              Your tasks combine focus preferences, custom habits, and today&apos;s
+              quiz.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3 text-sm text-muted-foreground">
+            <p>
+              Focus topics:{" "}
+              {focusTopics.length > 0 ? focusTopics.join(", ") : "None selected"}
+            </p>
+            <p>
+              Daily quiz today:{" "}
+              {quizCompletedToday ? "Completed" : "Not completed yet"}
+            </p>
+            <p>
+              Suggested habits can appear when your quiz shows low energy, high
+              stress, or poor sleep.
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-base">Today&apos;s tasks</CardTitle>
+        <CardDescription>
+          Personalized from your focus topics
+          {quizCompletedToday ? ", today's quiz," : ""} and custom habits.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <DailyTaskList tasks={dailyTasks} onToggle={handleToggle} />
+      </CardContent>
+    </Card>
+  );
+}

components/layout/app-auth-gate.tsx

@@ -1,10 +1,7 @@
-import { requireOnboardingComplete } from "@/lib/auth-helpers";
-
 type AppAuthGateProps = {
   children: React.ReactNode;
 };
-
 export async function AppAuthGate({ children }: AppAuthGateProps) {
-  await requireOnboardingComplete();
+  // Temporary: allow guest access while testing app pages from the bottom nav.
   return children;
 }

components/layout/app-nav.tsx

@@ -2,25 +2,53 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { Home, ShoppingBag, Sparkles, UserRound } from "lucide-react";
+import {
+  Home,
+  ListPlus,
+  ShoppingBag,
+  Sparkles,
+  UserRound,
+} from "lucide-react";
 
 import { cn } from "@/lib/utils";
-import { appNavItems, routes } from "@/lib/routes";
+import { appNavItems, routes, type NavItem } from "@/lib/routes";
+
+const gridColsClass = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+  5: "grid-cols-5",
+} as const;
 
 const navIcons = {
   [routes.avatar]: Home,
+  [routes.habits]: ListPlus,
   [routes.dailyQuiz]: Sparkles,
   [routes.shop]: ShoppingBag,
   [routes.profile]: UserRound,
 } as const;
 
-export function AppNav() {
+type AppNavProps = {
+  items?: readonly NavItem[];
+};
+
+export function AppNav({ items = appNavItems }: AppNavProps) {
   const pathname = usePathname();
+  const columnCount = Math.min(
+    items.length,
+    5,
+  ) as keyof typeof gridColsClass;
 
   return (
     <nav className="fixed inset-x-0 bottom-0 z-50 border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80">
-      <div className="mx-auto grid max-w-lg grid-cols-4 gap-1 px-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-2">
-        {appNavItems.map((item) => {
+      <div
+        className={cn(
+          "mx-auto grid max-w-lg gap-1 px-1 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-2",
+          gridColsClass[columnCount],
+        )}
+      >
+        {items.map((item) => {
           const Icon = navIcons[item.href];
           const isActive =
             pathname === item.href ||
@@ -31,7 +59,7 @@ export function AppNav() {
               key={item.href}
               href={item.href}
               className={cn(
-                "flex flex-col items-center gap-1 rounded-lg px-2 py-2 text-[11px] font-medium transition-colors",
+                "flex flex-col items-center gap-1 rounded-lg px-1 py-2 text-[9px] font-medium leading-tight transition-colors",
                 isActive
                   ? "bg-primary text-primary-foreground"
                   : "text-muted-foreground hover:bg-muted hover:text-foreground",

components/layout/app-shell.tsx

@@ -1,5 +1,3 @@
-import { AppNav } from "@/components/layout/app-nav";
-
 type AppShellProps = {
   children: React.ReactNode;
   title?: string;
@@ -8,7 +6,7 @@ type AppShellProps = {
 
 export function AppShell({ children, title, description }: AppShellProps) {
   return (
-    <div className="min-h-svh bg-background pb-24">
+    <div className="min-h-svh bg-background">
       {(title || description) && (
         <header className="border-b border-border/60 bg-card/40">
           <div className="mx-auto max-w-lg px-5 py-5">
@@ -22,7 +20,6 @@ export function AppShell({ children, title, description }: AppShellProps) {
         </header>
       )}
       <main className="mx-auto max-w-lg px-5 py-6">{children}</main>
-      <AppNav />
     </div>
   );
 }

components/layout/global-bottom-nav.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { AppNav } from "@/components/layout/app-nav";
+
+export function GlobalBottomNav() {
+  return <AppNav />;
+}

components/profile/profile-preferences-form.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { LogoutButton } from "@/components/logout-button";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  avatarVibeOptions,
+  defaultProfilePreferences,
+  focusTopicOptions,
+  getProfilePreferences,
+  saveProfilePreferences,
+  type ProfilePreferences,
+} from "@/lib/profile-preferences-storage";
+
+type ProfilePreferencesFormProps = {
+  email?: string | null;
+};
+
+export function ProfilePreferencesForm({ email }: ProfilePreferencesFormProps) {
+  const [preferences, setPreferences] = useState<ProfilePreferences>(
+    defaultProfilePreferences,
+  );
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    setPreferences(getProfilePreferences());
+    setIsReady(true);
+  }, []);
+
+  const updatePreferences = (updates: Partial<ProfilePreferences>) => {
+    const nextPreferences = { ...preferences, ...updates };
+    setPreferences(nextPreferences);
+    saveProfilePreferences(nextPreferences);
+  };
+
+  const toggleFocusTopic = (topic: string) => {
+    const focusTopics = preferences.focusTopics.includes(topic)
+      ? preferences.focusTopics.filter((item) => item !== topic)
+      : [...preferences.focusTopics, topic];
+
+    updatePreferences({ focusTopics });
+  };
+
+  if (!isReady) {
+    return (
+      <p className="text-sm text-muted-foreground">Loading profile...</p>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Profile information</CardTitle>
+          <CardDescription>Your account details.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input id="email" value={email ?? "Guest user"} readOnly />
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Focus topic preferences</CardTitle>
+          <CardDescription>
+            Choose the areas you want your pet and daily tasks to focus on.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {focusTopicOptions.map((topic) => (
+            <div key={topic} className="flex items-center gap-3 rounded-lg border p-3">
+              <Checkbox
+                id={`focus-${topic}`}
+                checked={preferences.focusTopics.includes(topic)}
+                onCheckedChange={() => toggleFocusTopic(topic)}
+              />
+              <Label htmlFor={`focus-${topic}`}>{topic}</Label>
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Avatar preferences</CardTitle>
+          <CardDescription>Personalize your pet&apos;s vibe.</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-wrap gap-2">
+          {avatarVibeOptions.map((vibe) => (
+            <Button
+              key={vibe}
+              type="button"
+              size="sm"
+              variant={preferences.avatarVibe === vibe ? "default" : "outline"}
+              onClick={() => updatePreferences({ avatarVibe: vibe })}
+            >
+              {vibe}
+            </Button>
+          ))}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Notification preferences</CardTitle>
+          <CardDescription>
+            Control reminders for your daily quiz and habits.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between rounded-lg border px-3 py-2">
+            <Label htmlFor="daily-reminder">Daily reminder</Label>
+            <Checkbox
+              id="daily-reminder"
+              checked={preferences.dailyReminderEnabled}
+              onCheckedChange={(checked) =>
+                updatePreferences({ dailyReminderEnabled: checked === true })
+              }
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="reminder-time">Daily reminder time</Label>
+            <Input
+              id="reminder-time"
+              type="time"
+              value={preferences.dailyReminderTime}
+              disabled={!preferences.dailyReminderEnabled}
+              onChange={(event) =>
+                updatePreferences({ dailyReminderTime: event.target.value })
+              }
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Account settings</CardTitle>
+          <CardDescription>Session and onboarding status.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between rounded-lg border px-3 py-2">
+            <span className="text-sm">Onboarding</span>
+            <Badge variant="secondary">Complete</Badge>
+          </div>
+          <LogoutButton />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}