Stable version with additional styling

app/(app)/avatar/page.tsx

@@ -7,7 +7,7 @@ export default function AvatarPage() {
   return (
     <AppShell
       title="Your Habit Pet"
-      description="Customize your pet, complete AI-personalized daily tasks, and track their mood from your wellness check-in."
+      description="Watch your pet roam, breathe, and react to how you care for them."
     >
       <Suspense fallback={<p className="text-sm text-muted-foreground">Loading...</p>}>
         <AvatarPageContent />

app/(app)/customize/page.tsx

@@ -0,0 +1,18 @@
+import { Suspense } from "react";
+
+import { CustomizePageContent } from "@/components/avatar/customize-page-content";
+import { AppShell } from "@/components/layout/app-shell";
+
+export default function CustomizePage() {
+  return (
+    <AppShell
+      wide
+      title="Customize your pet"
+      description="Change your pet's name, styles, colors, and room."
+    >
+      <Suspense fallback={<p className="text-xs text-muted-foreground">Loading...</p>}>
+        <CustomizePageContent />
+      </Suspense>
+    </AppShell>
+  );
+}

app/(app)/habits/page.tsx

@@ -5,9 +5,9 @@ export default function HabitsPage() {
   return (
     <AppShell
       title="Habits"
-      description="Add custom habits and see how your daily tasks are chosen."
+      description="Complete today's tasks and manage your habit list."
     >
-      <HabitTracker mode="manage" />
+      <HabitTracker mode="all" />
     </AppShell>
   );
 }

app/(app)/layout.tsx

@@ -10,11 +10,11 @@ export default function AppLayout({
   children: React.ReactNode;
 }) {
   return (
-    <Suspense fallback={<div className="min-h-svh bg-background" />}>
+    <Suspense fallback={<div className="bg-background pb-nav" />}>
       <AppAuthGate>
         <DailyReminderProvider />
         <InAppReminderBanner />
-        {children}
+        <div className="pb-nav">{children}</div>
       </AppAuthGate>
     </Suspense>
   );