diff --git a/README.md b/README.md
index 54836dd..4851a88 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-# Habit Pet
+# HaBit
 
-Calgary hackathon app for building habits while caring for a customizable pixel pet.
+Hackathon app for building habits while growing a customizable digital self (your **bit**).
 
 ## Stack
 
@@ -13,9 +13,9 @@ Calgary hackathon app for building habits while caring for a customizable pixel
 
 - **Auth** — email/password sign up and login
 - **Onboarding** — focus-topic quiz, then required avatar customization (DB-gated)
-- **Avatar** — layered sprite pet with per-layer styles and hex colors, naming, equipped shop items
+- **Avatar** — layered sprite bit with per-layer styles and hex colors, naming, equipped shop items
 - **Habits** — catalog + custom habits, streaks, coin rewards
-- **Daily quiz** — wellness sliders and journal that affect pet mood
+- **Daily quiz** — wellness sliders and journal that affect bit mood
 - **Shop** — buy and equip items from `shop_items` / `user_items` (hats, glasses, backgrounds)
 - **Profile** — focus topic, vibe, and reminder preferences
 
@@ -23,12 +23,12 @@ Calgary hackathon app for building habits while caring for a customizable pixel
 
 1. Sign up / sign in
 2. **Step 1:** onboarding quiz (focus topic only)
-3. **Step 2:** avatar customization (required confirm + pet name)
-4. Main app via bottom nav: Pet, Habits, Quiz, Shop, Profile
+3. **Step 2:** avatar customization (required confirm + bit name)
+4. Main app via bottom nav: Bit, Habits, Quiz, Shop, Profile
 
 Onboarding progress is stored in the database (`profiles.onboarding_quiz_complete`, `profiles.onboarding_complete`, `avatar_state.avatar_customized`) and mirrored in auth metadata for fast client checks.
 
-On the **Pet** tab, users rename their pet and switch between **Overview** and **Customize** sub-tabs.
+On the **Bit** tab, users view their digital self and open **Style** to customize name, look, and room.
 
 ## Local setup
 
@@ -69,7 +69,7 @@ Stored in `avatar_state`:
 
 | Column | Purpose |
 |--------|---------|
-| `avatar_name` | Pet display name |
+| `avatar_name` | Bit display name |
 | `skin_color` | Skin layer hex color |
 | `pants_style` / `pants_color` | Pants variant id + hex |
 | `shoe_style` / `shoe_color` | Shoes variant id + hex |
@@ -78,34 +78,3 @@ Stored in `avatar_state`:
 | `head_style` / `head_color` | Head variant id + hex |
 | `avatar_customized` | True after onboarding confirm |
 | `equipped_items` | Shop item ids currently equipped |
-
-Style columns are validated against allowed variant ids (`none`, `pants-1`, …). Shop accessories overlay equipped variants at render time without overwriting saved customization.
-
-Sprite assets are added manually under `public/character/{layer}/` (e.g. `public/character/head/head-1.png`). Paths must match the variant ids in `lib/character/presets.ts` and `supabase/seed.sql`.
-
-## Shop
-
-- Sells character layer styles from `public/character/` (`head-1`, `pants-2`, etc.)
-- Shop item `id` = variant id, `type` = layer id (`head`, `pants`, `shoes`, `torso`, `eyes`)
-- Purchases unlock styles in `user_items`; owned styles appear in Customize and can be equipped from the shop
-- Catalog seeded in `supabase/seed.sql`
-
-## Supabase
-
-- Migrations: `supabase/migrations/`
-- Seed: `supabase/seed.sql`
-- Config: `supabase/config.toml`
-
-Production deploys on push to `main` via `.github/workflows/deploy.yml` (lint, build, `supabase db push --include-seed`, Vercel).
-
-## Routes
-
-| Route | Access |
-|-------|--------|
-| `/` | Public |
-| `/auth/*` | Public |
-| `/onboarding/quiz` | Authenticated, quiz incomplete |
-| `/onboarding/customize` | Authenticated, quiz complete, avatar not confirmed |
-| `/avatar` | Authenticated, onboarding complete |
-| `/habits`, `/daily/quiz`, `/shop`, `/profile` | Authenticated app |
-| `/character-creator` | Redirects to `/avatar?tab=customize` |
diff --git a/app/(app)/avatar/page.tsx b/app/(app)/avatar/page.tsx
index 57ca086..247d916 100644
--- a/app/(app)/avatar/page.tsx
+++ b/app/(app)/avatar/page.tsx
@@ -6,8 +6,8 @@ import { AppShell } from "@/components/layout/app-shell";
 export default function AvatarPage() {
   return (
     <AppShell
-      title="Your Habit Pet"
-      description="Watch your pet roam, breathe, and react to how you care for them."
+      title="Your bit"
+      description="Watch your digital self roam, breathe, and react to how you care for yourself."
       fillViewport
       centered
     >
diff --git a/app/(app)/customize/page.tsx b/app/(app)/customize/page.tsx
index 4a7efa8..f9ba92c 100644
--- a/app/(app)/customize/page.tsx
+++ b/app/(app)/customize/page.tsx
@@ -7,8 +7,8 @@ export default function CustomizePage() {
   return (
     <AppShell
       wide
-      title="Customize your pet"
-      description="Change your pet's name, styles, colors, and room."
+      title="Customize your bit"
+      description="Change your bit's name, styles, colors, and room."
     >
       <Suspense fallback={<p className="text-xs text-muted-foreground">Loading...</p>}>
         <CustomizePageContent />
diff --git a/app/auth/error/page.tsx b/app/auth/error/page.tsx
index 18b8306..fd4ac3c 100644
--- a/app/auth/error/page.tsx
+++ b/app/auth/error/page.tsx
@@ -29,7 +29,7 @@ export default function Page({
   searchParams: Promise<{ error: string }>;
 }) {
   return (
-    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+    <div className="flex w-full flex-1 items-center justify-center p-6 md:p-10">
       <div className="w-full max-w-sm">
         <div className="flex flex-col gap-6">
           <Card>
diff --git a/app/auth/forgot-password/page.tsx b/app/auth/forgot-password/page.tsx
index 8dcfbb2..ce233a7 100644
--- a/app/auth/forgot-password/page.tsx
+++ b/app/auth/forgot-password/page.tsx
@@ -2,7 +2,7 @@ import { ForgotPasswordForm } from "@/components/forgot-password-form";
 
 export default function Page() {
   return (
-    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+    <div className="flex w-full flex-1 items-center justify-center p-6 md:p-10">
       <div className="w-full max-w-sm">
         <ForgotPasswordForm />
       </div>
diff --git a/app/auth/layout.tsx b/app/auth/layout.tsx
index 0120eac..7e53911 100644
--- a/app/auth/layout.tsx
+++ b/app/auth/layout.tsx
@@ -1,14 +1,7 @@
-import { AuthBottomNav } from "@/components/layout/auth-bottom-nav";
-
 export default function AuthLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  return (
-    <>
-      {children}
-      <AuthBottomNav />
-    </>
-  );
+  return <div className="flex min-h-0 flex-1 flex-col pb-nav">{children}</div>;
 }
diff --git a/app/auth/login/page.tsx b/app/auth/login/page.tsx
index 5efe679..f3dbc15 100644
--- a/app/auth/login/page.tsx
+++ b/app/auth/login/page.tsx
@@ -2,7 +2,7 @@ import { LoginForm } from "@/components/login-form";
 
 export default function Page() {
   return (
-    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+    <div className="flex w-full flex-1 items-center justify-center p-6 md:p-10">
       <div className="w-full max-w-sm">
         <LoginForm />
       </div>
diff --git a/app/auth/sign-up-success/page.tsx b/app/auth/sign-up-success/page.tsx
index 06bac40..de1807e 100644
--- a/app/auth/sign-up-success/page.tsx
+++ b/app/auth/sign-up-success/page.tsx
@@ -8,7 +8,7 @@ import {
 
 export default function Page() {
   return (
-    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+    <div className="flex w-full flex-1 items-center justify-center p-6 md:p-10">
       <div className="w-full max-w-sm">
         <div className="flex flex-col gap-6">
           <Card>
@@ -22,7 +22,7 @@ export default function Page() {
             </CardHeader>
             <CardContent>
               <p className="text-sm text-muted-foreground">
-                Your account is ready. You can sign in and start using Habit Pet.
+                Your account is ready. You can sign in and start using HaBit.
               </p>
             </CardContent>
           </Card>
diff --git a/app/auth/sign-up/page.tsx b/app/auth/sign-up/page.tsx
index d5dca78..c0eb93c 100644
--- a/app/auth/sign-up/page.tsx
+++ b/app/auth/sign-up/page.tsx
@@ -2,7 +2,7 @@ import { SignUpForm } from "@/components/sign-up-form";
 
 export default function Page() {
   return (
-    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+    <div className="flex w-full flex-1 items-center justify-center p-6 md:p-10">
       <div className="w-full max-w-sm">
         <SignUpForm />
       </div>
diff --git a/app/auth/update-password/page.tsx b/app/auth/update-password/page.tsx
index ff4d176..2b52abb 100644
--- a/app/auth/update-password/page.tsx
+++ b/app/auth/update-password/page.tsx
@@ -2,7 +2,7 @@ import { UpdatePasswordForm } from "@/components/update-password-form";
 
 export default function Page() {
   return (
-    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+    <div className="flex w-full flex-1 items-center justify-center p-6 md:p-10">
       <div className="w-full max-w-sm">
         <UpdatePasswordForm />
       </div>
diff --git a/app/globals.css b/app/globals.css
index d402579..5c15d0e 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -4,7 +4,7 @@
 
 @layer base {
   :root {
-    --app-topbar-height: 3.5rem;
+    --app-topbar-height: 3.25rem;
     --app-viewport-bottom-offset: 0px;
     --app-nav-offset: 6rem;
     --bottom-nav-height: 6rem;
@@ -117,7 +117,7 @@
     border: 3px solid hsl(var(--lcd-border));
   }
 
-  /* Matches pet-tab LCD: max-w-lg main minus px-5 and shell p-4 */
+  /* Matches bit-tab LCD: max-w-lg main minus px-5 and shell p-4 */
   .tamagotchi-lcd-pet-match {
     @apply aspect-[4/3] w-full shrink-0;
     max-width: calc(32rem - 2.5rem - 2rem);
@@ -127,6 +127,15 @@
   .tamagotchi-lcd-landing {
     @apply aspect-[4/3] w-full shrink-0;
     max-height: clamp(120px, 36vw, 240px);
+    container-type: inline-size;
+  }
+
+  .tamagotchi-lcd-landing .lcd-readable-name-landing {
+    max-width: 58%;
+    padding: 0.125rem 0.375rem;
+    font-size: clamp(0.4rem, 4.5cqi, 0.5625rem);
+    line-height: 1.2;
+    box-shadow: 1px 1px 0 0 hsl(280 45% 28%);
   }
 
   .tamagotchi-lcd-landing > div.absolute svg {
@@ -149,16 +158,6 @@
     aspect-ratio: auto;
   }
 
-  .customize-body {
-    min-height: 26rem;
-  }
-
-  @media (min-width: 1024px) {
-    .customize-body {
-      min-height: 30rem;
-    }
-  }
-
   .retro-btn {
     @apply inline-flex items-center justify-center border-2 border-border bg-primary text-primary-foreground;
     box-shadow: var(--retro-shadow-sm);
@@ -244,6 +243,31 @@
   .form-section-locked label {
     @apply text-muted-foreground;
   }
+
+  .lcd-readable-label {
+    @apply border-2 border-border bg-card px-2.5 py-1.5 text-center font-pixel text-[8px] leading-snug text-card-foreground sm:text-[9px];
+    box-shadow: var(--retro-shadow-sm);
+  }
+
+  .lcd-readable-name {
+    @apply border-2 border-border bg-card px-2 py-1 font-pixel leading-snug text-card-foreground;
+    box-shadow: var(--retro-shadow-sm);
+  }
+}
+
+@keyframes emotion-pop {
+  0% {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-emotion-pop {
+  animation: emotion-pop 0.2s steps(4) both;
 }
 
 @keyframes pet-breathe {
diff --git a/app/layout.tsx b/app/layout.tsx
index 99e3326..8ccb9dd 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,6 +3,7 @@ import { Press_Start_2P, Share_Tech_Mono } from "next/font/google";
 import { ThemeProvider } from "next-themes";
 
 import { GlobalBottomNav } from "@/components/layout/global-bottom-nav";
+import { SiteHeader } from "@/components/layout/site-header";
 import { ToastProvider } from "@/components/ui/toast-provider";
 import "./globals.css";
 
@@ -12,8 +13,8 @@ const defaultUrl = process.env.VERCEL_URL
 
 export const metadata: Metadata = {
   metadataBase: new URL(defaultUrl),
-  title: "Habit Pet",
-  description: "Build habits, care for your pixel pet, and track wellness every day.",
+  title: "HaBit",
+  description: "Build habits, grow your digital self, and track wellness every day.",
 };
 
 export const viewport: Viewport = {
@@ -52,7 +53,8 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           <ToastProvider>
-            {children}
+            <SiteHeader />
+            <div className="flex min-h-dvh flex-col pt-topbar">{children}</div>
             <GlobalBottomNav />
           </ToastProvider>
         </ThemeProvider>
diff --git a/app/page.tsx b/app/page.tsx
index 45e71b8..bc89ee8 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,7 +2,6 @@ import { Suspense } from "react";
 
 import { LandingPetPreview } from "@/components/landing/landing-pet-preview";
 import { LandingHeroActions } from "@/components/layout/landing-hero-actions";
-import { SiteFooter, SiteHeader } from "@/components/layout/site-header";
 import {
   Card,
   CardContent,
@@ -13,22 +12,17 @@ import {
 
 export default function Home() {
   return (
-    <main className="flex min-h-svh flex-col">
-      <SiteHeader />
-
+    <main className="flex flex-1 flex-col pb-nav">
       <div className="mx-auto flex w-full max-w-5xl flex-1 flex-col gap-12 px-5 py-12">
         <section className="grid gap-10 lg:grid-cols-[1.1fr_0.9fr] lg:items-center">
           <div className="space-y-6">
-            <p className="text-sm uppercase tracking-[0.25em] text-muted-foreground">
-              Calgary Hackathon MVP
-            </p>
             <h1 className="text-4xl font-semibold tracking-tight sm:text-5xl">
-              Build habits. Care for your pixel pet.
+              Build habits. Grow your digital self.
             </h1>
             <p className="max-w-xl text-base text-muted-foreground sm:text-lg">
-              HaBit turns daily check-ins, wellness sliders, and journaling
-              into a simple game. Keep streaks alive, take your once-per-day
-              quiz, and watch your pet change with you.
+              HaBit turns daily check-ins, wellness sliders, and journaling into
+              a simple game. Keep streaks alive, take your once-per-day quiz,
+              and watch your bit change with you.
             </p>
             <Suspense fallback={null}>
               <LandingHeroActions />
@@ -59,8 +53,8 @@ export default function Home() {
               description: "Sliders and a daily reflection box.",
             },
             {
-              title: "Pet that responds",
-              description: "Avatar mood changes from your input.",
+              title: "A bit that responds",
+              description: "Your digital self reflects your daily input.",
             },
           ].map((feature) => (
             <Card key={feature.title}>
@@ -72,8 +66,6 @@ export default function Home() {
           ))}
         </section>
       </div>
-
-      <SiteFooter />
     </main>
   );
 }
diff --git a/components/auth-button.tsx b/components/auth-button.tsx
index f55cc89..42efa25 100644
--- a/components/auth-button.tsx
+++ b/components/auth-button.tsx
@@ -11,18 +11,13 @@ export async function AuthButton() {
   const user = data?.claims;
 
   return user ? (
-    <div className="flex items-center gap-3">
-      <Button asChild size="sm" variant="outline">
-        <Link href={routes.avatar}>Open app</Link>
-      </Button>
-      <LogoutButton />
-    </div>
+    <LogoutButton />
   ) : (
     <div className="flex gap-2">
-      <Button asChild size="sm" variant={"outline"}>
+      <Button asChild size="sm" variant="outline">
         <Link href={routes.login}>Sign in</Link>
       </Button>
-      <Button asChild size="sm" variant={"default"}>
+      <Button asChild size="sm" variant="default">
         <Link href={routes.signUp}>Sign up</Link>
       </Button>
     </div>
diff --git a/components/avatar/avatar-customize-layout.tsx b/components/avatar/avatar-customize-layout.tsx
index fde45aa..c95b4df 100644
--- a/components/avatar/avatar-customize-layout.tsx
+++ b/components/avatar/avatar-customize-layout.tsx
@@ -1,5 +1,4 @@
 import { AppPageHeader } from "@/components/layout/app-page-header";
-import { AppTopBar } from "@/components/layout/app-top-bar";
 
 type AvatarCustomizeLayoutProps = {
   eyebrow?: string;
@@ -15,9 +14,7 @@ export function AvatarCustomizeLayout({
   children,
 }: AvatarCustomizeLayoutProps) {
   return (
-    <div className="relative min-h-dvh bg-background pt-topbar">
-      <AppTopBar />
-
+    <div className="relative min-h-dvh flex-1 bg-background">
       <main className="mx-auto max-w-lg px-4 py-6 lg:max-w-6xl lg:px-5">
         <AppPageHeader
           eyebrow={eyebrow}
diff --git a/components/avatar/avatar-page-content.tsx b/components/avatar/avatar-page-content.tsx
index be9bf63..8b60ce8 100644
--- a/components/avatar/avatar-page-content.tsx
+++ b/components/avatar/avatar-page-content.tsx
@@ -41,7 +41,7 @@ export function AvatarPageContent() {
 
   if (!customization) {
     return (
-      <p className="text-xs text-muted-foreground">Loading your pet...</p>
+      <p className="text-xs text-muted-foreground">Loading your bit...</p>
     );
   }
 
diff --git a/components/avatar/avatar-status-card.tsx b/components/avatar/avatar-status-card.tsx
index fc42088..1ef894e 100644
--- a/components/avatar/avatar-status-card.tsx
+++ b/components/avatar/avatar-status-card.tsx
@@ -61,7 +61,7 @@ export function AvatarStatusCard({ customization }: AvatarStatusCardProps) {
       <Card>
         <CardContent className="pt-6">
           <p className="text-center text-sm text-muted-foreground">
-            Loading your pet...
+            Loading your bit...
           </p>
         </CardContent>
       </Card>
@@ -100,11 +100,11 @@ export function AvatarStatusCard({ customization }: AvatarStatusCardProps) {
         <p className="text-center text-sm text-muted-foreground">
           {hasCheckedInToday
             ? completedTaskCount > 0
-              ? `Your pet reacts to today's quiz and ${completedTaskCount} completed task${completedTaskCount === 1 ? "" : "s"}. Meals, hydration, sleep, and relaxing habits boost health and mood.`
-              : "Your pet is reacting to today's wellness check-in. Complete habits to boost mood, energy, and health."
+              ? `Your bit reacts to today's quiz and ${completedTaskCount} completed task${completedTaskCount === 1 ? "" : "s"}. Meals, hydration, sleep, and relaxing habits boost health and mood.`
+              : "Your bit is reacting to today's wellness check-in. Complete habits to boost mood, energy, and health."
             : completedTaskCount > 0
-              ? "Complete today's quiz for a full wellness read, then keep completing habits to boost your pet."
-              : "Complete today's quiz to update your pet's mood, energy, and health."}
+              ? "Complete today's quiz for a full wellness read, then keep completing habits to boost your bit."
+              : "Complete today's quiz to update your bit's mood, energy, and health."}
         </p>
         {!hasCheckedInToday ? (
           <Button asChild className="w-full">
diff --git a/components/avatar/customize-page-content.tsx b/components/avatar/customize-page-content.tsx
index 1bf9815..bef8142 100644
--- a/components/avatar/customize-page-content.tsx
+++ b/components/avatar/customize-page-content.tsx
@@ -26,6 +26,7 @@ export function CustomizePageContent() {
   const [shopItems, setShopItems] = useState<ShopItemRecord[]>([]);
   const [coins, setCoins] = useState<number | null>(null);
   const [loadError, setLoadError] = useState<string | null>(null);
+  const [editorKey, setEditorKey] = useState(0);
 
   const loadCustomization = useCallback(async () => {
     try {
@@ -46,6 +47,7 @@ export function CustomizePageContent() {
       setEquippedItems(inventory.equippedItems);
       setShopItems(inventory.items);
       setCoins(inventory.coins);
+      setEditorKey((current) => current + 1);
     } catch (error) {
       setLoadError(
         error instanceof Error ? error.message : "Could not load your avatar.",
@@ -93,7 +95,7 @@ export function CustomizePageContent() {
 
   return (
     <CharacterCreator
-      key={`${customization.variants.head}-${customization.variants.torso}-${customization.colors.skin.l}-${customization.roomBackground}-${avatarName}-${ownedVariantIds.join(",")}`}
+      key={editorKey}
       initialCustomization={{
         ...customization,
         name: avatarName,
diff --git a/components/avatar/pixel-avatar.tsx b/components/avatar/pixel-avatar.tsx
index 66718c3..ef2ad45 100644
--- a/components/avatar/pixel-avatar.tsx
+++ b/components/avatar/pixel-avatar.tsx
@@ -29,7 +29,7 @@ export function PixelAvatar({
   return (
     <div
       className={cn("flex flex-col items-center gap-3", className)}
-      aria-label={`Pixel pet avatar, mood ${mood}`}
+      aria-label={`Bit avatar, mood ${mood}`}
     >
       <div
         className={cn(
diff --git a/components/character/character-creator.tsx b/components/character/character-creator.tsx
index c5da3a3..f0b51d0 100644
--- a/components/character/character-creator.tsx
+++ b/components/character/character-creator.tsx
@@ -14,7 +14,10 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useToast } from "@/components/ui/toast-provider";
-import type { AvatarCustomization } from "@/lib/avatar-customization-storage";
+import {
+  DEFAULT_AVATAR_NAME,
+  type AvatarCustomization,
+} from "@/lib/avatar-customization-storage";
 import { clampHsl } from "@/lib/character/color-utils";
 import {
   COLOR_PRESETS,
@@ -47,7 +50,7 @@ import {
 
 function SectionLabel({ children }: { children: React.ReactNode }) {
   return (
-    <h3 className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+    <h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
       {children}
     </h3>
   );
@@ -84,7 +87,7 @@ export function CharacterCreator({
 }: CharacterCreatorProps) {
   const { toast } = useToast();
   const [internalName, setInternalName] = useState(
-    initialCustomization?.name ?? "Pixel Me",
+    initialCustomization?.name ?? DEFAULT_AVATAR_NAME,
   );
   const name = controlledName ?? internalName;
 
@@ -355,12 +358,12 @@ export function CharacterCreator({
       <div className="tamagotchi-shell overflow-hidden p-3 sm:p-4">
       {showNameField ? (
         <div className="mb-4 grid max-w-md gap-2 border-b-2 border-border/60 pb-4">
-          <Label htmlFor="avatar-name">Pet name</Label>
+          <Label htmlFor="avatar-name">Bit name</Label>
           <Input
             id="avatar-name"
             value={name}
             maxLength={32}
-            placeholder="Name your pet"
+            placeholder="Name your bit"
             onChange={(event) => setName(event.target.value)}
           />
         </div>
@@ -368,8 +371,8 @@ export function CharacterCreator({
 
       <CharacterLayerTabs activeTabId={activeTabId} onTabChange={handleTabChange} />
 
-      <div className="customize-body mt-4 grid items-stretch gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.15fr)] lg:gap-5">
-        <div className="flex min-h-full min-w-0 flex-col">
+      <div className="customize-body mt-4 grid items-start gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.15fr)] lg:gap-5">
+        <div className="flex min-w-0 flex-col">
           <div className="tamagotchi-lcd tamagotchi-lcd-pet-match relative">
             <ParallaxRoomBackground roomId={displayCustomization.roomBackground} />
             <div className="relative z-10 flex h-full items-center justify-center">
@@ -386,7 +389,7 @@ export function CharacterCreator({
           </div>
         </div>
 
-        <div className="flex min-h-full min-w-0 flex-col gap-5 border-t-2 border-border/60 pt-4 lg:border-l-2 lg:border-t-0 lg:pl-5 lg:pt-0">
+        <div className="flex min-w-0 flex-col gap-5 border-t-2 border-border/60 pt-4 lg:border-l-2 lg:border-t-0 lg:pl-5 lg:pt-0">
           {showStyleSection ? (
             <section className="grid shrink-0 gap-3">
               <SectionLabel>Style</SectionLabel>
@@ -437,7 +440,7 @@ export function CharacterCreator({
           ) : null}
 
           {onSave ? (
-            <div className="mt-auto grid gap-2 pt-1">
+            <div className="grid gap-2 pt-2">
               <Button
                 id="avatar-customization-save"
                 type="button"
diff --git a/components/character/character-layer-tabs.tsx b/components/character/character-layer-tabs.tsx
index f6fb788..9c41ac8 100644
--- a/components/character/character-layer-tabs.tsx
+++ b/components/character/character-layer-tabs.tsx
@@ -19,7 +19,7 @@ export function CharacterLayerTabs({
     <div
       role="tablist"
       aria-label="Character customization"
-      className="grid grid-cols-7 gap-0.5 border-2 border-border bg-muted/30 p-0.5"
+      className="grid grid-cols-4 gap-1 border-2 border-border bg-muted/30 p-1 sm:grid-cols-7"
     >
       {CHARACTER_CUSTOMIZATION_TABS.map((tab) => (
         <button
@@ -29,7 +29,7 @@ export function CharacterLayerTabs({
           aria-selected={activeTabId === tab.id}
           onClick={() => onTabChange(tab.id)}
           className={cn(
-            "min-w-0 truncate border-2 px-0.5 py-1.5 text-[7px] font-medium uppercase leading-tight tracking-wide transition-colors sm:px-1 sm:text-[8px]",
+            "min-w-0 border-2 px-1 py-2 text-[10px] font-semibold uppercase leading-tight tracking-wide transition-colors sm:px-1.5 sm:text-xs",
             activeTabId === tab.id
               ? "border-secondary bg-background text-foreground shadow-[var(--retro-shadow-sm)]"
               : "border-transparent text-muted-foreground hover:border-border/60 hover:text-foreground",
diff --git a/components/daily-quiz/daily-quiz-form.tsx b/components/daily-quiz/daily-quiz-form.tsx
index 315e13d..dc7360a 100644
--- a/components/daily-quiz/daily-quiz-form.tsx
+++ b/components/daily-quiz/daily-quiz-form.tsx
@@ -161,12 +161,12 @@ export function DailyQuizForm() {
               </p>
               <p className="text-sm text-muted-foreground">
                 Your answers are saved below. Come back tomorrow for your next
-                check-in. How you did today affects your pet. Spend time with{" "}
+                check-in. How you did today affects your bit. Spend time with{" "}
                 <Link
                   href={routes.avatar}
                   className="font-medium text-primary underline-offset-2 hover:underline"
                 >
-                  your pet
+                  your bit
                 </Link>{" "}
                 whenever you want to see how they are doing.
               </p>
diff --git a/components/landing/landing-pet-preview.tsx b/components/landing/landing-pet-preview.tsx
index bf9613b..034d286 100644
--- a/components/landing/landing-pet-preview.tsx
+++ b/components/landing/landing-pet-preview.tsx
@@ -20,11 +20,9 @@ function LandingPetPreviewSkeleton() {
       aria-hidden="true"
       className="tamagotchi-shell w-full max-w-sm overflow-hidden p-3 sm:p-4"
     >
-      <div className="mb-3 space-y-2 border-b-2 border-border/60 pb-3">
-        <div className="h-4 w-24 animate-pulse rounded bg-muted" />
-        <div className="h-2 w-16 animate-pulse rounded bg-muted" />
+      <div className="tamagotchi-lcd tamagotchi-lcd-landing relative animate-pulse bg-muted/40">
+        <div className="absolute right-2 top-2 z-20 h-4 w-20 rounded bg-muted" />
       </div>
-      <div className="tamagotchi-lcd tamagotchi-lcd-landing animate-pulse bg-muted/40" />
     </div>
   );
 }
@@ -130,7 +128,7 @@ export function LandingPetPreview() {
     <PetHabitat
       customization={customization}
       className="w-full max-w-sm"
-      showStyleLink={false}
+      nameInLcd
       petScale={petScale}
       lcdClassName="tamagotchi-lcd-landing"
       lcdRef={lcdRef}
@@ -141,7 +139,7 @@ export function LandingPetPreview() {
     return (
       <Link
         href={routes.avatar}
-        aria-label="Go to your pet"
+        aria-label="Go to your bit"
         className={cn(
           "block w-full max-w-sm rounded-sm transition-transform",
           "hover:scale-[1.01] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
diff --git a/components/layout/app-nav.tsx b/components/layout/app-nav.tsx
index 7d717be..ad7b6e2 100644
--- a/components/layout/app-nav.tsx
+++ b/components/layout/app-nav.tsx
@@ -6,6 +6,7 @@ import { forwardRef } from "react";
 import {
   Home,
   ListPlus,
+  Palette,
   ShoppingBag,
   Sparkles,
   UserRound,
@@ -29,6 +30,7 @@ const gridColsClass = {
 
 const navIcons = {
   [routes.avatar]: Home,
+  [routes.customize]: Palette,
   [routes.habits]: ListPlus,
   [routes.dailyQuiz]: Sparkles,
   [routes.shop]: ShoppingBag,
diff --git a/components/layout/app-shell.tsx b/components/layout/app-shell.tsx
index cf5e4e1..6171691 100644
--- a/components/layout/app-shell.tsx
+++ b/components/layout/app-shell.tsx
@@ -1,5 +1,4 @@
 import { AppPageHeader } from "@/components/layout/app-page-header";
-import { AppTopBar } from "@/components/layout/app-top-bar";
 import { cn } from "@/lib/utils";
 
 type AppShellProps = {
@@ -27,8 +26,7 @@ export function AppShell({
   centered = false,
 }: AppShellProps) {
   return (
-    <div className="relative flex min-h-dvh flex-col bg-background pt-topbar">
-      <AppTopBar />
+    <div className="relative flex flex-1 flex-col bg-background">
       <main
         className={cn(
           "mx-auto flex w-full flex-1 flex-col px-4 py-6 lg:px-5",
diff --git a/components/layout/app-top-bar.tsx b/components/layout/app-top-bar.tsx
deleted file mode 100644
index ca76d96..0000000
--- a/components/layout/app-top-bar.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-"use client";
-
-import { usePathname } from "next/navigation";
-
-import { HabitBrand } from "@/components/layout/habit-brand";
-import { routes } from "@/lib/routes";
-import { cn } from "@/lib/utils";
-
-type AppTopBarProps = {
-  className?: string;
-};
-
-export function AppTopBar({ className }: AppTopBarProps) {
-  const pathname = usePathname();
-  const isHome =
-    pathname === routes.home || pathname === routes.avatar;
-
-  return (
-    <header
-      className={cn(
-        "app-top-bar fixed inset-x-0 top-0 z-40 border-b-2 border-border bg-background/95 shadow-[var(--retro-shadow-sm)] backdrop-blur supports-[backdrop-filter]:bg-background/90",
-        className,
-      )}
-      style={{
-        height: "var(--app-topbar-height)",
-        paddingTop: "env(safe-area-inset-top, 0px)",
-      }}
-    >
-      <div className="mx-auto flex h-full max-w-6xl items-center px-4">
-        <HabitBrand aria-current={isHome ? "page" : undefined} />
-      </div>
-    </header>
-  );
-}
diff --git a/components/layout/auth-bottom-nav.tsx b/components/layout/auth-bottom-nav.tsx
index 1969ef8..85a4630 100644
--- a/components/layout/auth-bottom-nav.tsx
+++ b/components/layout/auth-bottom-nav.tsx
@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { forwardRef } from "react";
 import { Home, LogIn, UserPlus } from "lucide-react";
 
 import { routes } from "@/lib/routes";
@@ -13,12 +14,26 @@ const authNavItems = [
   { href: routes.signUp, label: "Sign up", icon: UserPlus },
 ] as const;
 
-export function AuthBottomNav() {
+export const AuthBottomNav = forwardRef<HTMLElement>(function AuthBottomNav(
+  _props,
+  ref,
+) {
   const pathname = usePathname();
 
   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-3 gap-1 px-1 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-2">
+    <nav
+      ref={ref}
+      className="bottom-nav fixed inset-x-0 bottom-0 z-50 border-t-2 border-border bg-background shadow-[0_-4px_0_0_hsl(280_45%_28%/0.35)]"
+      style={{
+        bottom: "var(--app-viewport-bottom-offset, 0px)",
+        paddingBottom: "env(safe-area-inset-bottom, 0px)",
+      }}
+    >
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-x-0 top-0 h-px bg-secondary/40"
+      />
+      <div className="mx-auto grid max-w-lg grid-cols-3 gap-1 px-2 pb-2 pt-2">
         {authNavItems.map((item) => {
           const Icon = item.icon;
           const isActive = pathname === item.href;
@@ -28,18 +43,20 @@ export function AuthBottomNav() {
               key={item.href}
               href={item.href}
               className={cn(
-                "flex flex-col items-center gap-1 rounded-lg px-1 py-2 font-pixel text-[8px] font-normal leading-tight transition-colors",
+                "bottom-nav-item flex flex-col items-center justify-center gap-1.5 overflow-hidden border-2 px-1 py-2 font-pixel text-[8px] leading-none transition-colors duration-75",
                 isActive
-                  ? "bg-primary text-primary-foreground"
-                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                  ? "border-secondary bg-primary text-primary-foreground shadow-[var(--retro-shadow-sm)]"
+                  : "border-transparent text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground",
               )}
             >
-              <Icon className="h-4 w-4" />
-              <span>{item.label}</span>
+              <Icon className="bottom-nav-item-icon h-5 w-5 shrink-0" strokeWidth={2.5} />
+              <span className="bottom-nav-item-label max-w-full truncate uppercase tracking-wide">
+                {item.label}
+              </span>
             </Link>
           );
         })}
       </div>
     </nav>
   );
-}
+});
diff --git a/components/layout/global-bottom-nav.tsx b/components/layout/global-bottom-nav.tsx
index 05a005d..e30de81 100644
--- a/components/layout/global-bottom-nav.tsx
+++ b/components/layout/global-bottom-nav.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 
 import { AppNav } from "@/components/layout/app-nav";
 import { AppDataPrefetcher } from "@/components/layout/app-data-prefetcher";
+import { AuthBottomNav } from "@/components/layout/auth-bottom-nav";
 import {
   NavOffsetProvider,
   useNavOffsetRef,
@@ -12,14 +13,20 @@ import { HABIT_PET_DATA_UPDATED_EVENT } from "@/lib/app-events";
 import { getOnboardingStatusClient } from "@/lib/onboarding-status";
 import { createClient } from "@/lib/supabase/client";
 
+type NavKind = "none" | "auth" | "app";
+
 function MeasuredAppNav() {
   const navRef = useNavOffsetRef();
-
   return <AppNav ref={navRef} />;
 }
 
+function MeasuredAuthNav() {
+  const navRef = useNavOffsetRef();
+  return <AuthBottomNav ref={navRef} />;
+}
+
 export function GlobalBottomNav() {
-  const [showNav, setShowNav] = useState(false);
+  const [navKind, setNavKind] = useState<NavKind>("none");
 
   useEffect(() => {
     const supabase = createClient();
@@ -30,12 +37,12 @@ export function GlobalBottomNav() {
       } = await supabase.auth.getUser();
 
       if (!user) {
-        setShowNav(false);
+        setNavKind("auth");
         return;
       }
 
       const status = await getOnboardingStatusClient();
-      setShowNav(status?.appComplete === true);
+      setNavKind(status?.appComplete === true ? "app" : "none");
     }
 
     void syncNavState();
@@ -55,9 +62,10 @@ export function GlobalBottomNav() {
   }, []);
 
   return (
-    <NavOffsetProvider enabled={showNav}>
-      <AppDataPrefetcher enabled={showNav} />
-      {showNav ? <MeasuredAppNav /> : null}
+    <NavOffsetProvider enabled={navKind !== "none"}>
+      <AppDataPrefetcher enabled={navKind === "app"} />
+      {navKind === "app" ? <MeasuredAppNav /> : null}
+      {navKind === "auth" ? <MeasuredAuthNav /> : null}
     </NavOffsetProvider>
   );
 }
diff --git a/components/layout/habit-brand.tsx b/components/layout/habit-brand.tsx
index 6288bbf..b4840f8 100644
--- a/components/layout/habit-brand.tsx
+++ b/components/layout/habit-brand.tsx
@@ -3,20 +3,33 @@
 import Link from "next/link";
 import { useState } from "react";
 
+import { HABIT_LOGO_SRC } from "@/lib/brand";
 import { routes } from "@/lib/routes";
 import { cn } from "@/lib/utils";
 
-const HABIT_LOGO_SRC = "/habit-logo.png";
+const logoSizeClass = {
+  sm: "h-6 w-auto max-h-6",
+  md: "h-8 w-auto max-h-8",
+  /** Compact — leaves vertical padding inside the top bar */
+  nav: "h-7 w-auto max-h-7 sm:h-8 sm:max-h-8",
+  lg: "h-12 w-auto max-h-12 sm:h-14",
+  hero: "h-16 w-auto max-h-16 sm:h-20 md:h-24",
+} as const;
 
 type HabitBrandProps = {
   className?: string;
   href?: string;
+  size?: keyof typeof logoSizeClass;
+  /** Show retro frame around the logo (top bar / site header). */
+  framed?: boolean;
   "aria-current"?: "page" | undefined;
 };
 
 export function HabitBrand({
   className,
   href = routes.home,
+  size = "sm",
+  framed = true,
   "aria-current": ariaCurrent,
 }: HabitBrandProps) {
   const [useText, setUseText] = useState(false);
@@ -24,10 +37,13 @@ export function HabitBrand({
   return (
     <Link
       href={href}
-      aria-label="Go to home"
+      aria-label="HaBit home"
       aria-current={ariaCurrent}
       className={cn(
-        "group flex shrink-0 items-center justify-center border-2 border-border bg-card/80 px-3 py-1.5 shadow-[var(--retro-shadow-sm)] transition-transform hover:-translate-y-0.5 hover:border-primary/60",
+        "group inline-flex shrink-0 items-center justify-center transition-transform hover:-translate-y-0.5",
+        framed &&
+          "border-2 border-border bg-card/80 px-3 py-1.5 shadow-[var(--retro-shadow-sm)] hover:border-primary/60",
+        !framed && "rounded-sm hover:opacity-85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         className,
       )}
     >
@@ -35,14 +51,16 @@ export function HabitBrand({
         // eslint-disable-next-line @next/next/no-img-element
         <img
           src={HABIT_LOGO_SRC}
-          alt=""
-          className="size-6 image-pixelated"
+          alt="HaBit"
+          className={cn("image-pixelated object-contain", logoSizeClass[size])}
           onError={() => setUseText(true)}
         />
       ) : (
         <span
-          className="font-pixel select-none text-[10px] uppercase tracking-widest text-primary"
-          aria-hidden="true"
+          className={cn(
+            "font-pixel select-none uppercase tracking-widest text-primary",
+            size === "hero" ? "text-base sm:text-lg" : "text-[10px]",
+          )}
         >
           HaBit
         </span>
diff --git a/components/layout/header-coin-balance.tsx b/components/layout/header-coin-balance.tsx
new file mode 100644
index 0000000..069687d
--- /dev/null
+++ b/components/layout/header-coin-balance.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { Coins } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+
+import { HABIT_PET_DATA_UPDATED_EVENT } from "@/lib/app-events";
+import { getCoins } from "@/lib/avatar-progression-storage";
+import { createClient } from "@/lib/supabase/client";
+
+export function HeaderCoinBalance() {
+  const [coins, setCoins] = useState<number | null>(null);
+  const [isSignedIn, setIsSignedIn] = useState(false);
+
+  const refresh = useCallback(async () => {
+    const supabase = createClient();
+    const {
+      data: { user },
+    } = await supabase.auth.getUser();
+
+    if (!user) {
+      setIsSignedIn(false);
+      setCoins(null);
+      return;
+    }
+
+    setIsSignedIn(true);
+
+    try {
+      setCoins(await getCoins());
+    } catch {
+      setCoins(0);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refresh();
+
+    window.addEventListener(HABIT_PET_DATA_UPDATED_EVENT, refresh);
+    return () => {
+      window.removeEventListener(HABIT_PET_DATA_UPDATED_EVENT, refresh);
+    };
+  }, [refresh]);
+
+  if (!isSignedIn) {
+    return null;
+  }
+
+  return (
+    <div
+      className="inline-flex h-10 items-center justify-center gap-2 border-2 border-primary/35 bg-primary/10 px-4 font-pixel text-[10px] font-normal uppercase tracking-wide text-primary shadow-[var(--retro-shadow-sm)]"
+      aria-label={
+        coins === null ? "Loading point balance" : `${coins} points available`
+      }
+    >
+      <Coins aria-hidden="true" className="size-4 shrink-0" />
+      <span className="tabular-nums leading-none">
+        {coins === null ? "…" : coins}
+      </span>
+      <span className="leading-none text-primary/80">pts</span>
+    </div>
+  );
+}
diff --git a/components/layout/home-logo-link.tsx b/components/layout/home-logo-link.tsx
index 30720ea..40b6a78 100644
--- a/components/layout/home-logo-link.tsx
+++ b/components/layout/home-logo-link.tsx
@@ -1,45 +1 @@
-import Link from "next/link";
-
-import { routes } from "@/lib/routes";
-import { cn } from "@/lib/utils";
-
-type HomeLogoLinkProps = {
-  className?: string;
-  "aria-current"?: "page" | undefined;
-};
-
-export function HomeLogoLink({
-  className,
-  "aria-current": ariaCurrent,
-}: HomeLogoLinkProps) {
-  return (
-    <Link
-      href={routes.avatar}
-      aria-label="Go to home"
-      aria-current={ariaCurrent}
-      className={cn(
-        "group flex shrink-0 items-center justify-center border-2 border-border bg-card/80 p-2 shadow-[var(--retro-shadow-sm)] transition-transform hover:-translate-y-0.5 hover:border-primary/60",
-        className,
-      )}
-    >
-      <svg
-        viewBox="0 0 16 16"
-        aria-hidden="true"
-        className="size-8"
-        style={{ imageRendering: "pixelated" }}
-      >
-        <rect x="5" y="2" width="6" height="5" fill="#fdba74" stroke="#1e1b4b" strokeWidth="1" />
-        <rect x="4" y="3" width="1" height="1" fill="#1e1b4b" />
-        <rect x="11" y="3" width="1" height="1" fill="#1e1b4b" />
-        <rect x="6" y="5" width="1" height="1" fill="#1e1b4b" />
-        <rect x="9" y="5" width="1" height="1" fill="#1e1b4b" />
-        <rect x="7" y="6" width="2" height="1" fill="#f472b6" />
-        <rect x="4" y="7" width="8" height="5" fill="#6366f1" stroke="#1e1b4b" strokeWidth="1" />
-        <rect x="5" y="12" width="2" height="3" fill="#334155" />
-        <rect x="9" y="12" width="2" height="3" fill="#334155" />
-        <rect x="2" y="4" width="1" height="1" fill="#f472b6" className="opacity-0 group-hover:opacity-100" />
-        <rect x="13" y="4" width="1" height="1" fill="#f472b6" className="opacity-0 group-hover:opacity-100" />
-      </svg>
-    </Link>
-  );
-}
+export { HabitBrand as HomeLogoLink } from "@/components/layout/habit-brand";
diff --git a/components/layout/landing-hero-actions.tsx b/components/layout/landing-hero-actions.tsx
index 61bf497..fb28438 100644
--- a/components/layout/landing-hero-actions.tsx
+++ b/components/layout/landing-hero-actions.tsx
@@ -11,7 +11,7 @@ export async function LandingHeroActions() {
     return (
       <div className="flex flex-wrap gap-3">
         <Button asChild size="lg">
-          <Link href={routes.avatar}>Go to your pet</Link>
+          <Link href={routes.avatar}>Go to your bit</Link>
         </Button>
       </div>
     );
diff --git a/components/layout/site-header.tsx b/components/layout/site-header.tsx
index c16b979..35c282a 100644
--- a/components/layout/site-header.tsx
+++ b/components/layout/site-header.tsx
@@ -1,38 +1,38 @@
-import Link from "next/link";
 import { Suspense } from "react";
 
 import { AuthButton } from "@/components/auth-button";
 import { EnvVarWarning } from "@/components/env-var-warning";
-import { ThemeSwitcher } from "@/components/theme-switcher";
+import { HabitBrand } from "@/components/layout/habit-brand";
+import { HeaderCoinBalance } from "@/components/layout/header-coin-balance";
 import { routes } from "@/lib/routes";
 import { hasEnvVars } from "@/lib/utils";
 
 export function SiteHeader() {
   return (
-    <header className="w-full border-b border-b-foreground/10">
-      <div className="mx-auto flex h-16 w-full max-w-5xl items-center justify-between px-5 text-sm">
-        <Link href={routes.home} className="font-pixel text-xs tracking-tight">
-          HaBit
-        </Link>
-        {!hasEnvVars ? (
-          <EnvVarWarning />
-        ) : (
-          <Suspense>
-            <AuthButton />
-          </Suspense>
-        )}
+    <header
+      className="fixed inset-x-0 top-0 z-40 border-b border-border/50 bg-background"
+      style={{
+        height: "var(--app-topbar-height)",
+        paddingTop: "env(safe-area-inset-top, 0px)",
+      }}
+    >
+      <div className="mx-auto flex h-full w-full max-w-5xl items-center justify-between gap-4 px-5">
+        <HabitBrand href={routes.home} size="nav" framed={false} />
+        <div className="flex shrink-0 items-center gap-2 sm:gap-3">
+          {!hasEnvVars ? (
+            <EnvVarWarning />
+          ) : (
+            <>
+              <Suspense fallback={null}>
+                <HeaderCoinBalance />
+              </Suspense>
+              <Suspense fallback={null}>
+                <AuthButton />
+              </Suspense>
+            </>
+          )}
+        </div>
       </div>
     </header>
   );
 }
-
-export function SiteFooter() {
-  return (
-    <footer className="w-full border-t py-8 text-center text-xs text-muted-foreground">
-      <div className="mx-auto flex max-w-5xl flex-col items-center gap-4 px-5">
-        <p>Build habits. Care for your pet. Feel better every day.</p>
-        <ThemeSwitcher />
-      </div>
-    </footer>
-  );
-}
diff --git a/components/onboarding/onboarding-customize-form.tsx b/components/onboarding/onboarding-customize-form.tsx
index 1aa02a5..7adbae8 100644
--- a/components/onboarding/onboarding-customize-form.tsx
+++ b/components/onboarding/onboarding-customize-form.tsx
@@ -30,7 +30,7 @@ export function OnboardingCustomizeForm() {
         },
         { completeOnboarding: true },
       );
-      toast("Avatar confirmed. Welcome to Habit Pet!", "success");
+      toast("Avatar confirmed. Welcome to HaBit!", "success");
       router.push(routes.avatar);
       router.refresh();
     } catch (saveError) {
@@ -49,8 +49,8 @@ export function OnboardingCustomizeForm() {
   return (
     <AvatarCustomizeLayout
       eyebrow="Step 2 of 2"
-      title="Create your Habit Pet"
-      description="Customize your pet's look, give them a name, and confirm before entering the app."
+      title="Create your bit"
+      description="Customize your digital self, give them a name, and confirm before entering the app."
     >
       <CharacterCreator
         initialCustomization={defaultAvatarCustomization}
diff --git a/components/onboarding/onboarding-quiz-form.tsx b/components/onboarding/onboarding-quiz-form.tsx
index 3182601..4e5b8e4 100644
--- a/components/onboarding/onboarding-quiz-form.tsx
+++ b/components/onboarding/onboarding-quiz-form.tsx
@@ -54,10 +54,10 @@ export function OnboardingQuizForm() {
             Step 1 of 2
           </p>
           <h1 className="mt-2 text-2xl font-semibold tracking-tight">
-            Welcome to Habit Pet
+            Welcome to HaBit
           </h1>
           <p className="mt-2 text-sm text-muted-foreground">
-            Choose a focus area, then design your pet in the next step.
+            Choose a focus area, then design your bit in the next step.
           </p>
         </div>
 
diff --git a/components/pet/animated-pet-sprite.tsx b/components/pet/animated-pet-sprite.tsx
index 95da511..c31c551 100644
--- a/components/pet/animated-pet-sprite.tsx
+++ b/components/pet/animated-pet-sprite.tsx
@@ -3,7 +3,9 @@
 import { useEffect, useState } from "react";
 
 import { CharacterLayerPreview } from "@/components/character/character-layer-preview";
+import { PetEmotionBubble } from "@/components/pet/pet-emotion-bubble";
 import type { AvatarCustomization } from "@/lib/avatar-customization-storage";
+import type { AvatarMood } from "@/lib/avatar-state";
 import {
   PET_WANDER_BOUNDS,
   PET_WANDER_START,
@@ -14,6 +16,10 @@ type AnimatedPetSpriteProps = {
   customization: AvatarCustomization;
   className?: string;
   petScale?: number;
+  interactive?: boolean;
+  onInteract?: () => void;
+  emotionVisible?: boolean;
+  mood?: AvatarMood;
 };
 
 type WanderPosition = {
@@ -54,6 +60,10 @@ export function AnimatedPetSprite({
   customization,
   className,
   petScale = 7,
+  interactive = false,
+  onInteract,
+  emotionVisible = false,
+  mood = "neutral",
 }: AnimatedPetSpriteProps) {
   const [position, setPosition] = useState<WanderPosition>({
     x: PET_WANDER_START.x,
@@ -80,16 +90,45 @@ export function AnimatedPetSprite({
     };
   }, []);
 
+  const handleActivate = () => {
+    if (!interactive) {
+      return;
+    }
+
+    onInteract?.();
+  };
+
   return (
     <div
-      className={cn("pointer-events-none absolute z-10", className)}
+      className={cn(
+        "absolute z-10",
+        interactive
+          ? "pointer-events-auto cursor-pointer"
+          : "pointer-events-none",
+        className,
+      )}
       style={{
         left: `${position.x}%`,
         top: `${position.y}%`,
         transform: "translate(-50%, -100%)",
         transition: "left 1.8s steps(10), top 1.8s steps(10)",
       }}
+      role={interactive ? "button" : undefined}
+      tabIndex={interactive ? 0 : undefined}
+      aria-label={interactive ? "Check how your bit is feeling" : undefined}
+      onClick={(event) => {
+        event.stopPropagation();
+        handleActivate();
+      }}
+      onKeyDown={(event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          event.stopPropagation();
+          handleActivate();
+        }
+      }}
     >
+      <PetEmotionBubble mood={mood} visible={emotionVisible} />
       <div
         style={{
           transform: position.facing === "left" ? "scaleX(-1)" : undefined,
diff --git a/components/pet/pet-emotion-bubble.tsx b/components/pet/pet-emotion-bubble.tsx
new file mode 100644
index 0000000..9b16188
--- /dev/null
+++ b/components/pet/pet-emotion-bubble.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import type { AvatarMood } from "@/lib/avatar-state";
+import { getPetStatusImagePath } from "@/lib/pet-status";
+import { cn } from "@/lib/utils";
+
+type PetEmotionBubbleProps = {
+  mood: AvatarMood;
+  visible: boolean;
+  className?: string;
+};
+
+export function PetEmotionBubble({
+  mood,
+  visible,
+  className,
+}: PetEmotionBubbleProps) {
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        "pointer-events-none absolute bottom-full left-1/2 z-20 mb-1 w-[clamp(3.5rem,18vw,5.5rem)] -translate-x-1/2",
+        className,
+      )}
+      aria-hidden
+    >
+      <div className="animate-emotion-pop">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={getPetStatusImagePath(mood)}
+          alt=""
+          className="h-auto w-full object-contain image-pixelated"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/components/pet/pet-emotion-caption.tsx b/components/pet/pet-emotion-caption.tsx
new file mode 100644
index 0000000..58cec6d
--- /dev/null
+++ b/components/pet/pet-emotion-caption.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import type { AvatarMood } from "@/lib/avatar-state";
+import { getPetEmotionMessage } from "@/lib/pet-status";
+import { cn } from "@/lib/utils";
+
+type PetEmotionCaptionProps = {
+  mood: AvatarMood;
+  visible: boolean;
+  className?: string;
+};
+
+export function PetEmotionCaption({
+  mood,
+  visible,
+  className,
+}: PetEmotionCaptionProps) {
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        "pointer-events-none absolute inset-x-2 bottom-2 z-30 flex justify-center",
+        "animate-emotion-pop",
+        className,
+      )}
+      role="status"
+      aria-live="polite"
+    >
+      <p className="lcd-readable-label max-w-full">{getPetEmotionMessage(mood)}</p>
+    </div>
+  );
+}
diff --git a/components/pet/pet-habitat.tsx b/components/pet/pet-habitat.tsx
index d3a3809..b8ed7c4 100644
--- a/components/pet/pet-habitat.tsx
+++ b/components/pet/pet-habitat.tsx
@@ -1,17 +1,19 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 import { AnimatedPetSprite } from "@/components/pet/animated-pet-sprite";
+import { PetEmotionCaption } from "@/components/pet/pet-emotion-caption";
 import { ParallaxRoomBackground } from "@/components/pet/parallax-room-background";
-import { PetStyleLink } from "@/components/pet/pet-style-link";
 import { PixelGauge } from "@/components/pet/pixel-gauge";
 import type { AvatarCustomization } from "@/lib/avatar-customization-storage";
 import {
   defaultAvatarCondition,
   type AvatarCondition,
 } from "@/lib/avatar-state";
+import { HABIT_PET_DATA_UPDATED_EVENT } from "@/lib/app-events";
 import { getAvatarConditionForToday } from "@/lib/daily-quiz-storage";
+import { PET_EMOTION_DISPLAY_MS } from "@/lib/pet-status";
 import {
   normalizeRoomBackgroundId,
   type RoomBackgroundId,
@@ -22,23 +24,18 @@ type PetHabitatProps = {
   customization: AvatarCustomization;
   className?: string;
   fillViewport?: boolean;
-  showStyleLink?: boolean;
+  /** Bit name in the LCD top-right (landing preview). */
+  nameInLcd?: boolean;
   petScale?: number;
   lcdClassName?: string;
   lcdRef?: React.Ref<HTMLDivElement>;
 };
 
-const MOOD_LABELS = {
-  happy: "HAPPY",
-  neutral: "OKAY",
-  tired: "SLEEPY",
-} as const;
-
 export function PetHabitat({
   customization,
   className,
   fillViewport = false,
-  showStyleLink = true,
+  nameInLcd = false,
   petScale,
   lcdClassName: lcdClassNameOverride,
   lcdRef,
@@ -47,16 +44,51 @@ export function PetHabitat({
     defaultAvatarCondition,
   );
   const [isReady, setIsReady] = useState(false);
+  const [emotionVisible, setEmotionVisible] = useState(false);
+  const emotionTimeoutRef = useRef<number | null>(null);
   const roomId = normalizeRoomBackgroundId(customization.roomBackground);
+  const interactive = fillViewport;
+
+  const clearEmotionTimeout = useCallback(() => {
+    if (emotionTimeoutRef.current !== null) {
+      window.clearTimeout(emotionTimeoutRef.current);
+      emotionTimeoutRef.current = null;
+    }
+  }, []);
+
+  const showEmotionBriefly = useCallback(() => {
+    clearEmotionTimeout();
+    setEmotionVisible(true);
+    emotionTimeoutRef.current = window.setTimeout(() => {
+      setEmotionVisible(false);
+      emotionTimeoutRef.current = null;
+    }, PET_EMOTION_DISPLAY_MS);
+  }, [clearEmotionTimeout]);
+
+  const loadStatus = useCallback(async () => {
+    setCondition((await getAvatarConditionForToday()) ?? defaultAvatarCondition);
+    setIsReady(true);
+  }, []);
 
   useEffect(() => {
-    async function loadStatus() {
-      setCondition((await getAvatarConditionForToday()) ?? defaultAvatarCondition);
-      setIsReady(true);
-    }
-
     void loadStatus();
-  }, []);
+
+    return () => {
+      clearEmotionTimeout();
+    };
+  }, [loadStatus, clearEmotionTimeout]);
+
+  useEffect(() => {
+    const handleDataUpdated = () => {
+      void loadStatus();
+    };
+
+    window.addEventListener(HABIT_PET_DATA_UPDATED_EVENT, handleDataUpdated);
+
+    return () => {
+      window.removeEventListener(HABIT_PET_DATA_UPDATED_EVENT, handleDataUpdated);
+    };
+  }, [loadStatus]);
 
   const shellClassName = cn(
     "tamagotchi-shell overflow-hidden p-3 sm:p-4",
@@ -71,11 +103,15 @@ export function PetHabitat({
       : (lcdClassNameOverride ?? "tamagotchi-lcd-pet-match"),
   );
 
+  const gaugeOverlaySize = fillViewport ? "responsive" : "md";
+  const showNameAboveShell = !fillViewport && !nameInLcd;
+  const showNameInLcdOverlay = fillViewport || nameInLcd;
+
   if (!isReady) {
     return (
       <div className={shellClassName}>
         <p className="text-center text-[10px] text-muted-foreground">
-          Waking up pet...
+          Waking up your bit...
         </p>
       </div>
     );
@@ -83,24 +119,48 @@ export function PetHabitat({
 
   return (
     <div className={shellClassName}>
-      <div className="mb-3 shrink-0 border-b-2 border-border/60 pb-3">
-        <p className="text-sm text-foreground">{customization.name}</p>
-        <p className="mt-1 text-[9px] uppercase tracking-[0.25em] text-secondary">
-          {MOOD_LABELS[condition.mood]}
-        </p>
-      </div>
+      {showNameAboveShell ? (
+        <div className="mb-3 shrink-0 border-b-2 border-border/60 pb-3">
+          <p className="text-sm text-foreground">{customization.name}</p>
+        </div>
+      ) : null}
 
       <div ref={lcdRef} className={lcdClassName}>
         <ParallaxRoomBackground roomId={roomId as RoomBackgroundId} />
-        <AnimatedPetSprite customization={customization} petScale={petScale} />
-        <div className="pointer-events-none absolute left-2 top-2 z-20 grid gap-1.5">
-          <PixelGauge type="heart" value={condition.health} variant="overlay" />
-          <PixelGauge type="energy" value={condition.energy} variant="overlay" />
+        <AnimatedPetSprite
+          customization={customization}
+          petScale={petScale}
+          interactive={interactive}
+          emotionVisible={emotionVisible}
+          mood={condition.mood}
+          onInteract={showEmotionBriefly}
+        />
+        <PetEmotionCaption mood={condition.mood} visible={emotionVisible} />
+        <div className="pointer-events-none absolute left-2 top-2 z-20 grid gap-1 sm:gap-1.5">
+          <PixelGauge
+            type="heart"
+            value={condition.health}
+            variant="overlay"
+            overlaySize={gaugeOverlaySize}
+          />
+          <PixelGauge
+            type="energy"
+            value={condition.energy}
+            variant="overlay"
+            overlaySize={gaugeOverlaySize}
+          />
         </div>
-        {showStyleLink ? (
-          <div className="absolute right-2 top-2 z-20">
-            <PetStyleLink />
-          </div>
+        {showNameInLcdOverlay ? (
+          <p
+            className={cn(
+              "pointer-events-none absolute right-2 top-2 z-20 max-w-[52%] truncate text-right lcd-readable-name",
+              fillViewport
+                ? "text-sm sm:text-base md:text-lg"
+                : "lcd-readable-name-landing",
+            )}
+          >
+            {customization.name}
+          </p>
         ) : null}
         <div className="pointer-events-none absolute inset-x-0 bottom-0 z-[2] h-8 bg-gradient-to-t from-black/35 to-transparent" />
       </div>
diff --git a/components/pet/pet-style-link.tsx b/components/pet/pet-style-link.tsx
index 060a33f..f799973 100644
--- a/components/pet/pet-style-link.tsx
+++ b/components/pet/pet-style-link.tsx
@@ -12,7 +12,7 @@ export function PetStyleLink({ className }: PetStyleLinkProps) {
   return (
     <Link
       href={routes.customize}
-      aria-label="Customize pet style"
+      aria-label="Customize bit style"
       title="Style"
       className={cn(
         "flex shrink-0 items-center justify-center border-2 border-border bg-card/90 p-2 shadow-[var(--retro-shadow-sm)] transition-transform hover:-translate-y-0.5 hover:border-primary/60",
diff --git a/components/pet/pixel-gauge.tsx b/components/pet/pixel-gauge.tsx
index 91b3f0e..d0fe994 100644
--- a/components/pet/pixel-gauge.tsx
+++ b/components/pet/pixel-gauge.tsx
@@ -11,6 +11,8 @@ type PixelGaugeProps = {
   max?: number;
   className?: string;
   variant?: "default" | "overlay";
+  /** Overlay icon size. Use "responsive" on the bit tab LCD. */
+  overlaySize?: "md" | "lg" | "responsive";
 };
 
 export function PixelGauge({
@@ -19,6 +21,7 @@ export function PixelGauge({
   max = WELLNESS_SCALE_MAX,
   className,
   variant = "default",
+  overlaySize = "md",
 }: PixelGaugeProps) {
   const filled = Math.max(0, Math.min(max, Math.round(value)));
   const Icon = type === "heart" ? Heart : Zap;
@@ -29,6 +32,12 @@ export function PixelGauge({
       : "fill-amber-300 text-amber-300";
   const emptyClass = "text-muted-foreground/35";
   const isOverlay = variant === "overlay";
+  const overlayIconClass =
+    overlaySize === "responsive"
+      ? "h-[clamp(1.125rem,3.6vw,3rem)] w-[clamp(1.125rem,3.6vw,3rem)]"
+      : overlaySize === "lg"
+        ? "size-12"
+        : "size-6";
 
   return (
     <div
@@ -44,13 +53,22 @@ export function PixelGauge({
           {label}
         </span>
       ) : null}
-      <div className={cn("flex items-center", isOverlay ? "gap-1" : "gap-0.5")}>
+      <div
+        className={cn(
+          "flex items-center",
+          isOverlay
+            ? overlaySize === "responsive"
+              ? "gap-0.5 sm:gap-1"
+              : "gap-1"
+            : "gap-0.5",
+        )}
+      >
         {Array.from({ length: max }, (_, index) => (
           <Icon
             key={`${type}-${index}`}
             className={cn(
               "shrink-0 stroke-[2.5]",
-              isOverlay ? "size-6" : "size-4",
+              isOverlay ? overlayIconClass : "size-4",
               index < filled ? activeClass : emptyClass,
             )}
             aria-hidden
diff --git a/components/pet/room-background-picker.tsx b/components/pet/room-background-picker.tsx
index 5a9be92..7d390e7 100644
--- a/components/pet/room-background-picker.tsx
+++ b/components/pet/room-background-picker.tsx
@@ -32,7 +32,7 @@ export function RoomBackgroundPicker({
             Room background
           </h3>
           <p className="mt-1 text-[9px] text-muted-foreground">
-            Pick the scene behind your pet. Premium rooms unlock in the shop.
+            Pick the scene behind your bit. Premium rooms unlock in the shop.
           </p>
         </div>
       ) : (
diff --git a/components/profile/profile-preferences-form.tsx b/components/profile/profile-preferences-form.tsx
index 656234e..a175632 100644
--- a/components/profile/profile-preferences-form.tsx
+++ b/components/profile/profile-preferences-form.tsx
@@ -266,7 +266,7 @@ export function ProfilePreferencesForm({ email }: ProfilePreferencesFormProps) {
         <CardHeader>
           <CardTitle className="text-base">Focus topic preference</CardTitle>
           <CardDescription>
-            Choose the one area you want your pet and daily tasks to focus on.
+            Choose the one area you want your bit and daily tasks to focus on.
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-2">
@@ -288,7 +288,7 @@ export function ProfilePreferencesForm({ email }: ProfilePreferencesFormProps) {
       <Card>
         <CardHeader>
           <CardTitle className="text-base">Avatar preferences</CardTitle>
-          <CardDescription>Personalize your pet&apos;s vibe.</CardDescription>
+          <CardDescription>Personalize your bit&apos;s vibe.</CardDescription>
         </CardHeader>
         <CardContent className="flex flex-wrap gap-2">
           {avatarVibeOptions.map((vibe) => (
@@ -369,7 +369,7 @@ export function ProfilePreferencesForm({ email }: ProfilePreferencesFormProps) {
             />
           </div>
           <p className="text-xs text-muted-foreground">
-            In-app reminders appear inside Habit Pet while a tab is open.
+            In-app reminders appear inside HaBit while a tab is open.
             Browser (OS) reminders use the Web Notifications API and may appear
             in your system notification center. Reminders fire once per day at
             your chosen local time.
diff --git a/components/reminders/in-app-reminder-banner.tsx b/components/reminders/in-app-reminder-banner.tsx
index c01d4e9..37a0fd4 100644
--- a/components/reminders/in-app-reminder-banner.tsx
+++ b/components/reminders/in-app-reminder-banner.tsx
@@ -59,7 +59,7 @@ export function InAppReminderBanner() {
                 router.push(reminder.targetUrl);
               }}
             >
-              Open Pet tab
+              Open Bit tab
             </Button>
             <Button
               type="button"
diff --git a/components/shop/shop-content.tsx b/components/shop/shop-content.tsx
index 135f53a..863871f 100644
--- a/components/shop/shop-content.tsx
+++ b/components/shop/shop-content.tsx
@@ -1,9 +1,9 @@
 "use client";
 
+import { Coins } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 
 import { TintedSpriteIcon } from "@/components/character/tinted-sprite-icon";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { useToast } from "@/components/ui/toast-provider";
@@ -24,9 +24,47 @@ import {
   type ShopItemRecord,
   type ShopLayerId,
 } from "@/lib/shop-catalog";
+import { ShopItemPreviewModal } from "@/components/shop/shop-item-preview-modal";
 import { cn } from "@/lib/utils";
 
-import { ShopItemPreviewModal } from "@/components/shop/shop-item-preview-modal";
+function ShopItemPriceBadge({
+  price,
+  owned,
+  equipped,
+}: {
+  price: number;
+  owned: boolean;
+  equipped?: boolean;
+}) {
+  const boxClassName =
+    "inline-flex shrink-0 items-center justify-center gap-2.5 border-2 px-5 font-pixel text-[13px] font-normal uppercase tracking-wide leading-none shadow-[var(--retro-shadow-sm)] h-12";
+
+  if (owned) {
+    return (
+      <div
+        className={cn(
+          boxClassName,
+          "border-border/60 bg-muted/30 text-muted-foreground",
+        )}
+      >
+        {equipped ? "Equipped" : "Owned"}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        boxClassName,
+        "border-primary/35 bg-primary/10 text-primary",
+      )}
+    >
+      <Coins aria-hidden="true" className="size-5 shrink-0" />
+      <span className="tabular-nums">{price}</span>
+      <span className="text-primary/80">pts</span>
+    </div>
+  );
+}
 
 const SHOP_LAYER_ORDER: ShopLayerId[] = [
   "head",
@@ -94,13 +132,15 @@ function ShopItemCard({
             )}
           </div>
 
-          <div className="min-w-0 flex-1 space-y-1">
-            <div className="flex items-start justify-between gap-2">
-              <p className="min-w-0 flex-1 text-xs leading-snug">{item.name}</p>
-              <Badge className="shrink-0 px-1.5 py-0.5 text-[8px]">
-                {item.price} pts
-              </Badge>
-            </div>
+          <div className="flex min-w-0 flex-1 items-start justify-between gap-2">
+            <p className="min-w-0 pt-1 text-sm font-medium leading-snug">
+              {item.name}
+            </p>
+            <ShopItemPriceBadge
+              price={item.price}
+              owned={owned}
+              equipped={equipped}
+            />
           </div>
         </div>
 
@@ -287,15 +327,6 @@ export function ShopContent() {
         }}
       />
 
-      <div className="mb-5 flex items-center justify-between gap-3 border-2 border-border bg-muted/40 px-4 py-3 shadow-[var(--retro-shadow-sm)]">
-        <span className="text-[10px] uppercase tracking-wider text-muted-foreground">
-          Your balance
-        </span>
-        <Badge variant="secondary" className="shrink-0">
-          {coins === null ? "..." : `${coins} points`}
-        </Badge>
-      </div>
-
       {error ? <p className="mb-4 text-xs text-red-500">{error}</p> : null}
 
       {!error && coins !== null && items.length === 0 ? (
@@ -312,7 +343,7 @@ export function ShopContent() {
       <div className="grid gap-8">
         {roomItems.length > 0 ? (
           <section className="grid gap-3">
-            <h3 className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+            <h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
               Room backgrounds
             </h3>
             <div className={itemGridClassName}>
@@ -335,7 +366,7 @@ export function ShopContent() {
 
         {styleGroups.map((group) => (
           <section key={group.layerId} className="grid gap-3">
-            <h3 className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+            <h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
               {group.label}
             </h3>
             <div className={itemGridClassName}>
diff --git a/components/shop/shop-item-preview-modal.tsx b/components/shop/shop-item-preview-modal.tsx
index 7ad1248..6e10015 100644
--- a/components/shop/shop-item-preview-modal.tsx
+++ b/components/shop/shop-item-preview-modal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { X } from "lucide-react";
+import { Coins, X } from "lucide-react";
 import Link from "next/link";
 import { useEffect } from "react";
 
@@ -87,7 +87,7 @@ export function ShopItemPreviewModal({
               id="shop-preview-title"
               className="text-[10px] uppercase tracking-wider text-muted-foreground"
             >
-              Preview on your pet
+              Preview on your bit
             </p>
             <p className="mt-1 truncate text-sm">{item.name}</p>
           </div>
@@ -119,13 +119,16 @@ export function ShopItemPreviewModal({
             <div className="pointer-events-none absolute inset-x-0 bottom-0 z-[2] h-8 bg-gradient-to-t from-black/35 to-transparent" />
           </div>
           <p className="mt-3 text-center text-[10px] text-muted-foreground">
-            Preview only — nothing is purchased or equipped until you confirm.
+            This is a preview only. Nothing is purchased or equipped until you confirm.
           </p>
 
           <div className="mt-4 grid gap-2 border-t-2 border-border pt-4">
-            <div className="flex items-center justify-between gap-3 text-xs">
-              <span className="text-muted-foreground">Price</span>
-              <span>{item.price} points</span>
+            <div className="flex items-center justify-end gap-1.5 border-2 border-primary/30 bg-primary/5 px-3 py-2.5">
+              <Coins aria-hidden="true" className="size-4 text-primary" />
+              <span className="text-xl font-bold tabular-nums text-primary">
+                {item.price}
+              </span>
+              <span className="text-sm text-muted-foreground">points</span>
             </div>
 
             {owned ? (
diff --git a/lib/ai-prompt-security.ts b/lib/ai-prompt-security.ts
index 251990f..edee108 100644
--- a/lib/ai-prompt-security.ts
+++ b/lib/ai-prompt-security.ts
@@ -1,4 +1,4 @@
-export const AI_TASK_SYSTEM_PROMPT = `You are a supportive wellness coach for a habit-tracking pet app.
+export const AI_TASK_SYSTEM_PROMPT = `You are a supportive wellness coach for a habit-tracking app where users care for a digital self (their "bit").
 
 Your only allowed action is to suggest practical daily habit task labels based on trusted app context and untrusted user journal text.
 
diff --git a/lib/ai-task-context.ts b/lib/ai-task-context.ts
index 7a9fbeb..b77b215 100644
--- a/lib/ai-task-context.ts
+++ b/lib/ai-task-context.ts
@@ -60,7 +60,7 @@ export function formatAiTaskContextForPrompt(context: AiTaskContext) {
       `Daily reminder enabled: ${preferences.dailyReminderEnabled ? "yes" : "no"}`,
       `Daily reminder time: ${preferences.dailyReminderTime}`,
       `Primary focus: ${onboarding.focusTopic ?? "unknown"}`,
-      `Starter pet vibe: ${onboarding.avatarVibe ?? "unknown"}`,
+      `Starter bit vibe: ${onboarding.avatarVibe ?? "unknown"}`,
     ].join("\n"),
   );
 
diff --git a/lib/avatar-customization-storage.ts b/lib/avatar-customization-storage.ts
index 450a90a..0662620 100644
--- a/lib/avatar-customization-storage.ts
+++ b/lib/avatar-customization-storage.ts
@@ -51,7 +51,7 @@ type AvatarStateRow = {
   room_background: string | null;
 };
 
-export const DEFAULT_AVATAR_NAME = "Pixel Me";
+export const DEFAULT_AVATAR_NAME = "My Bit";
 const DEFAULT_HEX = DEFAULT_GRAY_COLOR.hex;
 const HEX_COLOR_PATTERN = /^#[0-9A-Fa-f]{6}$/;
 
diff --git a/lib/brand.ts b/lib/brand.ts
new file mode 100644
index 0000000..9805614
--- /dev/null
+++ b/lib/brand.ts
@@ -0,0 +1 @@
+export const HABIT_LOGO_SRC = "/habit-logo.png";
diff --git a/lib/daily-reminders.ts b/lib/daily-reminders.ts
index 8462a86..761a2d4 100644
--- a/lib/daily-reminders.ts
+++ b/lib/daily-reminders.ts
@@ -129,7 +129,7 @@ export function buildDailyReminderNotification(status: DailyReminderStatus) {
   if (!status.quizCompleted) {
     return {
       title: "Time for your daily check-in",
-      body: "Complete today's wellness quiz to keep your pet happy.",
+      body: "Complete today's wellness quiz to keep your bit in good spirits.",
       targetUrl,
     };
   }
@@ -174,7 +174,7 @@ export function showTestSystemDailyReminderNotification(
   }
 
   const { body, targetUrl } = buildDailyReminderNotification(status);
-  const notification = new Notification("Test: Habit Pet reminder", {
+  const notification = new Notification("Test: HaBit reminder", {
     body: `This is a browser test notification. ${body}`,
     tag: `habit-pet-daily-reminder-test-${Date.now()}`,
   });
diff --git a/lib/landing-random-pet.ts b/lib/landing-random-pet.ts
index 4be9491..76fff6f 100644
--- a/lib/landing-random-pet.ts
+++ b/lib/landing-random-pet.ts
@@ -1,43 +1,45 @@
-import {
-  DEFAULT_AVATAR_NAME,
-  type AvatarCustomization,
-} from "@/lib/avatar-customization-storage";
+import type { AvatarCustomization } from "@/lib/avatar-customization-storage";
 import {
   CHARACTER_LAYERS,
   COLOR_PRESETS,
   NONE_VARIANT_ID,
   type CharacterLayerId,
 } from "@/lib/character/presets";
-import { ROOM_BACKGROUNDS } from "@/lib/room-backgrounds";
+import { clampHsl } from "@/lib/character/color-utils";
+import {
+  ROOM_BACKGROUNDS,
+  type RoomBackgroundId,
+} from "@/lib/room-backgrounds";
 
 const GUEST_PET_STORAGE_KEY = "habit-pet-guest-landing-pet";
 
-const SKIN_TONE_IDS = [
-  "porcelain",
-  "fair",
-  "light",
-  "medium",
-  "tan",
-  "brown",
-  "dark",
-  "deep",
-  "onyx",
+export const GUEST_LANDING_BIT_NAMES = [
+  "Alex",
+  "Jordan",
+  "Sam",
+  "Taylor",
+  "Morgan",
 ] as const;
 
-const OUTFIT_COLOR_IDS = [
-  "red",
-  "orange",
-  "yellow",
-  "green",
-  "blue",
-  "indigo",
-  "black",
-  "white",
-] as const;
+const SKIN_COLOR_PRESETS = COLOR_PRESETS.filter((preset) =>
+  [
+    "porcelain",
+    "fair",
+    "light",
+    "medium",
+    "tan",
+    "brown",
+    "dark",
+    "deep",
+    "onyx",
+  ].includes(preset.id),
+);
 
-const EYE_COLOR_IDS = ["blue", "black", "green", "brown"] as const;
+const STYLE_COLOR_PRESETS = COLOR_PRESETS.filter(
+  (preset) => !SKIN_COLOR_PRESETS.some((skin) => skin.id === preset.id),
+);
 
-const HAIR_COLOR_IDS = ["brown", "black", "yellow", "red", "orange", "white"] as const;
+const ALL_ROOM_IDS = ROOM_BACKGROUNDS.map((room) => room.id);
 
 function pickRandom<T>(items: readonly T[]): T {
   return items[Math.floor(Math.random() * items.length)]!;
@@ -52,48 +54,61 @@ function presetHsl(id: string) {
   return { ...preset.hsl };
 }
 
-function pickRandomVariant(
-  layerId: Exclude<CharacterLayerId, "skin">,
-  allowNone = false,
-): string {
+function randomHsl(): { h: number; s: number; l: number } {
+  return clampHsl({
+    h: Math.floor(Math.random() * 360),
+    s: 35 + Math.floor(Math.random() * 50),
+    l: 28 + Math.floor(Math.random() * 45),
+  });
+}
+
+function pickRandomLayerColor(layerId: CharacterLayerId) {
+  if (layerId === "skin") {
+    return presetHsl(pickRandom(SKIN_COLOR_PRESETS).id);
+  }
+
+  if (Math.random() < 0.35) {
+    return randomHsl();
+  }
+
+  return presetHsl(pickRandom(STYLE_COLOR_PRESETS).id);
+}
+
+function pickRandomLayerVariant(layerId: CharacterLayerId): string {
   const layer = CHARACTER_LAYERS.find((entry) => entry.id === layerId);
   if (!layer) {
     throw new Error(`Missing character layer: ${layerId}`);
   }
 
-  const options = layer.variants
-    .map((variant) => variant.id)
-    .filter((id) => allowNone || id !== NONE_VARIANT_ID);
+  if (!layer.allowVariants) {
+    return layer.variants[0]?.id ?? NONE_VARIANT_ID;
+  }
 
-  return pickRandom(options);
+  return pickRandom(layer.variants.map((variant) => variant.id));
 }
 
 export function buildRandomLandingPetCustomization(): AvatarCustomization {
-  const freeRooms = ROOM_BACKGROUNDS.filter((room) => room.free).map(
-    (room) => room.id,
-  );
-
   return {
-    name: DEFAULT_AVATAR_NAME,
+    name: pickRandom(GUEST_LANDING_BIT_NAMES),
     colors: {
-      skin: presetHsl(pickRandom(SKIN_TONE_IDS)),
-      pants: presetHsl(pickRandom(OUTFIT_COLOR_IDS)),
-      shoes: presetHsl(pickRandom(OUTFIT_COLOR_IDS)),
-      torso: presetHsl(pickRandom(OUTFIT_COLOR_IDS)),
-      eyes: presetHsl(pickRandom(EYE_COLOR_IDS)),
-      head: presetHsl(pickRandom(HAIR_COLOR_IDS)),
+      skin: pickRandomLayerColor("skin"),
+      pants: pickRandomLayerColor("pants"),
+      shoes: pickRandomLayerColor("shoes"),
+      torso: pickRandomLayerColor("torso"),
+      eyes: pickRandomLayerColor("eyes"),
+      head: pickRandomLayerColor("head"),
     },
     variants: {
-      skin: "skin-1",
-      pants: pickRandomVariant("pants"),
-      shoes: pickRandomVariant("shoes"),
-      torso: pickRandomVariant("torso"),
-      eyes: pickRandomVariant("eyes"),
-      head: pickRandomVariant("head", Math.random() < 0.15),
+      skin: pickRandomLayerVariant("skin"),
+      pants: pickRandomLayerVariant("pants"),
+      shoes: pickRandomLayerVariant("shoes"),
+      torso: pickRandomLayerVariant("torso"),
+      eyes: pickRandomLayerVariant("eyes"),
+      head: pickRandomLayerVariant("head"),
     },
     customized: true,
     equippedItems: [],
-    roomBackground: pickRandom(freeRooms),
+    roomBackground: pickRandom(ALL_ROOM_IDS) as RoomBackgroundId,
   };
 }
 
@@ -105,7 +120,14 @@ export function getGuestLandingPetCustomization(): AvatarCustomization {
   try {
     const cached = sessionStorage.getItem(GUEST_PET_STORAGE_KEY);
     if (cached) {
-      return JSON.parse(cached) as AvatarCustomization;
+      const parsed = JSON.parse(cached) as AvatarCustomization;
+      if (
+        GUEST_LANDING_BIT_NAMES.includes(
+          parsed.name as (typeof GUEST_LANDING_BIT_NAMES)[number],
+        )
+      ) {
+        return parsed;
+      }
     }
 
     const next = buildRandomLandingPetCustomization();
diff --git a/lib/openrouter.ts b/lib/openrouter.ts
index b312155..c7e9cc0 100644
--- a/lib/openrouter.ts
+++ b/lib/openrouter.ts
@@ -46,7 +46,7 @@ export async function generateAiTaskLabels(
       Authorization: `Bearer ${apiKey}`,
       "Content-Type": "application/json",
       "HTTP-Referer": siteUrl,
-      "X-Title": "Habit Pet",
+      "X-Title": "HaBit",
     },
     body: JSON.stringify({
       model: DEFAULT_OPENROUTER_MODEL,
diff --git a/lib/pet-status.ts b/lib/pet-status.ts
new file mode 100644
index 0000000..0e19669
--- /dev/null
+++ b/lib/pet-status.ts
@@ -0,0 +1,26 @@
+import type { AvatarMood } from "@/lib/avatar-state";
+
+export const PET_EMOTION_DISPLAY_MS = 3200;
+
+export type PetStatusImageId = "status-1" | "status-2" | "status-3";
+
+export const PET_STATUS_BY_MOOD: Record<AvatarMood, PetStatusImageId> = {
+  happy: "status-1",
+  neutral: "status-2",
+  tired: "status-3",
+};
+
+export function getPetStatusImagePath(mood: AvatarMood): string {
+  return `/status/${PET_STATUS_BY_MOOD[mood]}.png`;
+}
+
+export function getPetEmotionMessage(mood: AvatarMood): string {
+  switch (mood) {
+    case "happy":
+      return "Your bit seems cheerful and in good spirits.";
+    case "tired":
+      return "Your bit seems worn out and could use some care.";
+    default:
+      return "Your bit seems steady and doing okay.";
+  }
+}
diff --git a/lib/reminder-delivery.ts b/lib/reminder-delivery.ts
index 77d903e..a808d34 100644
--- a/lib/reminder-delivery.ts
+++ b/lib/reminder-delivery.ts
@@ -3,7 +3,7 @@ export const reminderDeliveryOptions = [
     value: "in_app",
     label: "In-app",
     description:
-      "Show reminders inside Habit Pet when you have the site open in a tab.",
+      "Show reminders inside HaBit when you have the site open in a tab.",
   },
   {
     value: "system",
diff --git a/lib/routes.ts b/lib/routes.ts
index 3856cd7..01f5aa9 100644
--- a/lib/routes.ts
+++ b/lib/routes.ts
@@ -16,7 +16,8 @@ export const routes = {
 export type AppRoute = (typeof routes)[keyof typeof routes];
 
 export const appNavItems = [
-  { href: routes.avatar, label: "Pet", shortLabel: "Pet" },
+  { href: routes.avatar, label: "Bit", shortLabel: "Bit" },
+  { href: routes.customize, label: "Customize", shortLabel: "Style" },
   { href: routes.habits, label: "Habits", shortLabel: "Habits" },
   { href: routes.dailyQuiz, label: "Daily Quiz", shortLabel: "Quiz" },
   { href: routes.shop, label: "Shop", shortLabel: "Shop" },
diff --git a/public/habit-logo.png b/public/habit-logo.png
new file mode 100644
index 0000000..6f8d425
Binary files /dev/null and b/public/habit-logo.png differ
diff --git a/public/status/status-1.png b/public/status/status-1.png
new file mode 100644
index 0000000..db08c3e
Binary files /dev/null and b/public/status/status-1.png differ
diff --git a/public/status/status-2.png b/public/status/status-2.png
new file mode 100644
index 0000000..b2181bd
Binary files /dev/null and b/public/status/status-2.png differ
diff --git a/public/status/status-3.png b/public/status/status-3.png
new file mode 100644
index 0000000..0f4a2ce
Binary files /dev/null and b/public/status/status-3.png differ