diff --git a/_ts_packages/packages/cortex-ui/public/sprites/32px/blob-idle.png b/_ts_packages/packages/cortex-ui/public/sprites/32px/blob-idle.png
new file mode 100644
index 0000000..9903d66
Binary files /dev/null and b/_ts_packages/packages/cortex-ui/public/sprites/32px/blob-idle.png differ
diff --git a/_ts_packages/packages/cortex-ui/public/sprites/32px/cat-happy.png b/_ts_packages/packages/cortex-ui/public/sprites/32px/cat-happy.png
new file mode 100644
index 0000000..7197fd5
Binary files /dev/null and b/_ts_packages/packages/cortex-ui/public/sprites/32px/cat-happy.png differ
diff --git a/_ts_packages/packages/cortex-ui/public/sprites/32px/cat-idle.png b/_ts_packages/packages/cortex-ui/public/sprites/32px/cat-idle.png
new file mode 100644
index 0000000..c78a791
Binary files /dev/null and b/_ts_packages/packages/cortex-ui/public/sprites/32px/cat-idle.png differ
diff --git a/_ts_packages/packages/cortex-ui/public/sprites/32px/cat-sleep.png b/_ts_packages/packages/cortex-ui/public/sprites/32px/cat-sleep.png
new file mode 100644
index 0000000..568bab2
Binary files /dev/null and b/_ts_packages/packages/cortex-ui/public/sprites/32px/cat-sleep.png differ
diff --git a/_ts_packages/packages/cortex-ui/public/sprites/32px/cat-think.png b/_ts_packages/packages/cortex-ui/public/sprites/32px/cat-think.png
new file mode 100644
index 0000000..15e2d86
Binary files /dev/null and b/_ts_packages/packages/cortex-ui/public/sprites/32px/cat-think.png differ
diff --git a/_ts_packages/packages/cortex-ui/public/sprites/32px/dog-idle.png b/_ts_packages/packages/cortex-ui/public/sprites/32px/dog-idle.png
new file mode 100644
index 0000000..aa1c4ed
Binary files /dev/null and b/_ts_packages/packages/cortex-ui/public/sprites/32px/dog-idle.png differ
diff --git a/_ts_packages/packages/cortex-ui/public/sprites/32px/owl-idle.png b/_ts_packages/packages/cortex-ui/public/sprites/32px/owl-idle.png
new file mode 100644
index 0000000..00b5bbb
Binary files /dev/null and b/_ts_packages/packages/cortex-ui/public/sprites/32px/owl-idle.png differ
diff --git a/_ts_packages/packages/cortex-ui/src/routes/PetEditor.svelte b/_ts_packages/packages/cortex-ui/src/routes/PetEditor.svelte
index b903daa..8bd833e 100644
--- a/_ts_packages/packages/cortex-ui/src/routes/PetEditor.svelte
+++ b/_ts_packages/packages/cortex-ui/src/routes/PetEditor.svelte
@@ -14,6 +14,30 @@
   let manifest = $state<PetManifest | null>(null);
   let error = $state<string | null>(null);
   let loading = $state(true);
+  let mood = $state<'idle' | 'happy' | 'think' | 'sleep'>('idle');
+
+  const AVAILABLE = {
+    cat: ['idle', 'happy', 'think', 'sleep'] as const,
+    dog: ['idle'] as const,
+    owl: ['idle'] as const,
+    blob: ['idle'] as const,
+  };
+
+  // Pick species from pet name first letter, defaulting to cat (most states available)
+  function species_for(pet_name: string): 'cat' | 'dog' | 'owl' | 'blob' {
+    const first = pet_name.trim().toLowerCase().charAt(0);
+    if (first === 'd') return 'dog';
+    if (first === 'o') return 'owl';
+    if (first === 'b') return 'blob';
+    return 'cat';
+  }
+
+  function sprite_src(pet_name: string, m: typeof mood): string {
+    const sp = species_for(pet_name);
+    const states = AVAILABLE[sp] as readonly string[];
+    const state = states.includes(m) ? m : 'idle';
+    return `./sprites/32px/${sp}-${state}.png`;
+  }
 
   onMount(async () => {
     if (!user_id) {
@@ -34,6 +58,28 @@
 
 <h2>Pet: {user_id}</h2>
 
+{#if manifest}
+  <div class="pet-sprite-box">
+    <img
+      class="pet-sprite"
+      src={sprite_src(manifest.identity.pet_name, mood)}
+      alt="{manifest.identity.pet_name} ({mood})"
+      width="128"
+      height="128"
+    />
+    <div class="pet-sprite-name">{manifest.identity.pet_name}</div>
+    <div class="pet-sprite-moods">
+      {#each AVAILABLE[species_for(manifest.identity.pet_name)] as m}
+        <button
+          class="mood-btn"
+          class:active={mood === m}
+          onclick={() => (mood = m as typeof mood)}
+        >{m}</button>
+      {/each}
+    </div>
+  </div>
+{/if}
+
 {#if loading}
   <p class="muted">Loading manifest…</p>
 {:else if error}
diff --git a/_ts_packages/packages/cortex-ui/src/styles/app.css b/_ts_packages/packages/cortex-ui/src/styles/app.css
index 3b2e19a..db004cc 100644
--- a/_ts_packages/packages/cortex-ui/src/styles/app.css
+++ b/_ts_packages/packages/cortex-ui/src/styles/app.css
@@ -184,3 +184,49 @@ pre {
   overflow-x: auto;
   font-size: 13px;
 }
+
+.pet-sprite-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  margin: 16px 0 24px;
+  padding: 20px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+.pet-sprite {
+  image-rendering: pixelated;
+  image-rendering: -moz-crisp-edges;
+  -ms-interpolation-mode: nearest-neighbor;
+  width: 128px;
+  height: 128px;
+  display: block;
+}
+.pet-sprite-name {
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+.pet-sprite-moods {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.mood-btn {
+  padding: 4px 10px;
+  font-size: 12px;
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text);
+  border-radius: 4px;
+  cursor: pointer;
+}
+.mood-btn.active {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: white;
+}
+.mood-btn:hover:not(.active) {
+  border-color: var(--accent);
+}