diff --git a/.beans/nuzlocke-tracker-rkyc--shiny-clause-dupes-clause-multi-encounter-per-rout.md b/.beans/nuzlocke-tracker-rkyc--shiny-clause-dupes-clause-multi-encounter-per-rout.md
index a1f6a20..93d888d 100644
--- a/.beans/nuzlocke-tracker-rkyc--shiny-clause-dupes-clause-multi-encounter-per-rout.md
+++ b/.beans/nuzlocke-tracker-rkyc--shiny-clause-dupes-clause-multi-encounter-per-rout.md
@@ -1,11 +1,11 @@
 ---
 # nuzlocke-tracker-rkyc
 title: Dupes Clause & Shiny Clause enforcement
-status: todo
+status: completed
 type: feature
 priority: low
 created_at: 2026-02-05T12:25:19Z
-updated_at: 2026-02-07T19:52:42Z
+updated_at: 2026-02-07T20:11:59Z
 ---
 
 Implement active enforcement for Dupes Clause and Shiny Clause in the encounter flow.
diff --git a/frontend/public/types/bug.png b/frontend/public/types/bug.png
new file mode 100644
index 0000000..b883c67
Binary files /dev/null and b/frontend/public/types/bug.png differ
diff --git a/frontend/public/types/dark.png b/frontend/public/types/dark.png
new file mode 100644
index 0000000..cd811ea
Binary files /dev/null and b/frontend/public/types/dark.png differ
diff --git a/frontend/public/types/dragon.png b/frontend/public/types/dragon.png
new file mode 100644
index 0000000..82f6ae5
Binary files /dev/null and b/frontend/public/types/dragon.png differ
diff --git a/frontend/public/types/electric.png b/frontend/public/types/electric.png
new file mode 100644
index 0000000..2bc9f0f
Binary files /dev/null and b/frontend/public/types/electric.png differ
diff --git a/frontend/public/types/fairy.png b/frontend/public/types/fairy.png
new file mode 100644
index 0000000..c17f15d
Binary files /dev/null and b/frontend/public/types/fairy.png differ
diff --git a/frontend/public/types/fighting.png b/frontend/public/types/fighting.png
new file mode 100644
index 0000000..ce061d1
Binary files /dev/null and b/frontend/public/types/fighting.png differ
diff --git a/frontend/public/types/fire.png b/frontend/public/types/fire.png
new file mode 100644
index 0000000..4871842
Binary files /dev/null and b/frontend/public/types/fire.png differ
diff --git a/frontend/public/types/flying.png b/frontend/public/types/flying.png
new file mode 100644
index 0000000..818991d
Binary files /dev/null and b/frontend/public/types/flying.png differ
diff --git a/frontend/public/types/ghost.png b/frontend/public/types/ghost.png
new file mode 100644
index 0000000..c444b30
Binary files /dev/null and b/frontend/public/types/ghost.png differ
diff --git a/frontend/public/types/grass.png b/frontend/public/types/grass.png
new file mode 100644
index 0000000..7da5130
Binary files /dev/null and b/frontend/public/types/grass.png differ
diff --git a/frontend/public/types/ground.png b/frontend/public/types/ground.png
new file mode 100644
index 0000000..fcab493
Binary files /dev/null and b/frontend/public/types/ground.png differ
diff --git a/frontend/public/types/ice.png b/frontend/public/types/ice.png
new file mode 100644
index 0000000..cd7efb4
Binary files /dev/null and b/frontend/public/types/ice.png differ
diff --git a/frontend/public/types/normal.png b/frontend/public/types/normal.png
new file mode 100644
index 0000000..9395c88
Binary files /dev/null and b/frontend/public/types/normal.png differ
diff --git a/frontend/public/types/poison.png b/frontend/public/types/poison.png
new file mode 100644
index 0000000..651d3b5
Binary files /dev/null and b/frontend/public/types/poison.png differ
diff --git a/frontend/public/types/psychic.png b/frontend/public/types/psychic.png
new file mode 100644
index 0000000..f86d8b2
Binary files /dev/null and b/frontend/public/types/psychic.png differ
diff --git a/frontend/public/types/rock.png b/frontend/public/types/rock.png
new file mode 100644
index 0000000..60271dd
Binary files /dev/null and b/frontend/public/types/rock.png differ
diff --git a/frontend/public/types/steel.png b/frontend/public/types/steel.png
new file mode 100644
index 0000000..fd3dacf
Binary files /dev/null and b/frontend/public/types/steel.png differ
diff --git a/frontend/public/types/water.png b/frontend/public/types/water.png
new file mode 100644
index 0000000..80031d0
Binary files /dev/null and b/frontend/public/types/water.png differ
diff --git a/frontend/src/components/PokemonCard.tsx b/frontend/src/components/PokemonCard.tsx
index 2171db4..cc628f6 100644
--- a/frontend/src/components/PokemonCard.tsx
+++ b/frontend/src/components/PokemonCard.tsx
@@ -1,4 +1,5 @@
 import type { EncounterDetail } from '../types'
+import { TypeBadge } from './TypeBadge'
 
 interface PokemonCardProps {
   encounter: EncounterDetail
@@ -6,27 +7,6 @@ interface PokemonCardProps {
   onClick?: () => void
 }
 
-const typeColors: Record<string, string> = {
-  normal: 'bg-gray-400',
-  fire: 'bg-red-500',
-  water: 'bg-blue-500',
-  electric: 'bg-yellow-400',
-  grass: 'bg-green-500',
-  ice: 'bg-cyan-300',
-  fighting: 'bg-red-700',
-  poison: 'bg-purple-500',
-  ground: 'bg-amber-600',
-  flying: 'bg-indigo-300',
-  psychic: 'bg-pink-500',
-  bug: 'bg-lime-500',
-  rock: 'bg-amber-700',
-  ghost: 'bg-purple-700',
-  dragon: 'bg-indigo-600',
-  dark: 'bg-gray-700',
-  steel: 'bg-gray-400',
-  fairy: 'bg-pink-300',
-}
-
 export function PokemonCard({ encounter, showFaintLevel, onClick }: PokemonCardProps) {
   const { pokemon, currentPokemon, route, nickname, catchLevel, faintLevel, deathCause } = encounter
   const isDead = faintLevel !== null
@@ -68,12 +48,7 @@ export function PokemonCard({ encounter, showFaintLevel, onClick }: PokemonCardP
 
       <div className="flex gap-1 mt-1">
         {displayPokemon.types.map((type) => (
-          <span
-            key={type}
-            className={`px-1.5 py-0.5 rounded text-[10px] font-medium text-white ${typeColors[type] ?? 'bg-gray-500'}`}
-          >
-            {type}
-          </span>
+          <TypeBadge key={type} type={type} />
         ))}
       </div>
 
diff --git a/frontend/src/components/StatusChangeModal.tsx b/frontend/src/components/StatusChangeModal.tsx
index 2f53b6f..4360b6f 100644
--- a/frontend/src/components/StatusChangeModal.tsx
+++ b/frontend/src/components/StatusChangeModal.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import type { EncounterDetail, UpdateEncounterInput } from '../types'
 import { useEvolutions } from '../hooks/useEncounters'
+import { TypeBadge } from './TypeBadge'
 
 interface StatusChangeModalProps {
   encounter: EncounterDetail
@@ -13,27 +14,6 @@ interface StatusChangeModalProps {
   region?: string
 }
 
-const typeColors: Record<string, string> = {
-  normal: 'bg-gray-400',
-  fire: 'bg-red-500',
-  water: 'bg-blue-500',
-  electric: 'bg-yellow-400',
-  grass: 'bg-green-500',
-  ice: 'bg-cyan-300',
-  fighting: 'bg-red-700',
-  poison: 'bg-purple-500',
-  ground: 'bg-amber-600',
-  flying: 'bg-indigo-300',
-  psychic: 'bg-pink-500',
-  bug: 'bg-lime-500',
-  rock: 'bg-amber-700',
-  ghost: 'bg-purple-700',
-  dragon: 'bg-indigo-600',
-  dark: 'bg-gray-700',
-  steel: 'bg-gray-400',
-  fairy: 'bg-pink-300',
-}
-
 function formatEvolutionMethod(evo: { trigger: string; minLevel: number | null; item: string | null; heldItem: string | null; condition: string | null }): string {
   const parts: string[] = []
   if (evo.trigger === 'level-up' && evo.minLevel) {
@@ -149,12 +129,7 @@ export function StatusChangeModal({
               )}
               <div className="flex gap-1 mt-1">
                 {displayPokemon.types.map((type) => (
-                  <span
-                    key={type}
-                    className={`px-1.5 py-0.5 rounded text-[10px] font-medium text-white ${typeColors[type] ?? 'bg-gray-500'}`}
-                  >
-                    {type}
-                  </span>
+                  <TypeBadge key={type} type={type} />
                 ))}
               </div>
               <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
diff --git a/frontend/src/components/TypeBadge.tsx b/frontend/src/components/TypeBadge.tsx
new file mode 100644
index 0000000..ec69e67
--- /dev/null
+++ b/frontend/src/components/TypeBadge.tsx
@@ -0,0 +1,15 @@
+interface TypeBadgeProps {
+  type: string
+  size?: 'sm' | 'md'
+}
+
+export function TypeBadge({ type, size = 'sm' }: TypeBadgeProps) {
+  const height = size === 'md' ? 'h-5' : 'h-4'
+  return (
+    <img
+      src={`/types/${type}.png`}
+      alt={type}
+      className={`${height} w-auto`}
+    />
+  )
+}
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index ff72528..056c4af 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -13,3 +13,4 @@ export { RuleToggle } from './RuleToggle'
 export { RulesConfiguration } from './RulesConfiguration'
 export { StatCard } from './StatCard'
 export { StepIndicator } from './StepIndicator'
+export { TypeBadge } from './TypeBadge'