diff --git a/client/src/pages/DogList.jsx b/client/src/pages/DogList.jsx
index d1e6aed..1815348 100644
--- a/client/src/pages/DogList.jsx
+++ b/client/src/pages/DogList.jsx
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'
 import { Dog, Plus, Search, Calendar, Hash, ArrowRight } from 'lucide-react'
 import axios from 'axios'
 import DogForm from '../components/DogForm'
+import { ChampionBadge, ChampionBloodlineBadge } from '../components/ChampionBadge'
 
 function DogList() {
   const [dogs, setDogs] = useState([])
@@ -12,13 +13,8 @@ function DogList() {
   const [loading, setLoading] = useState(true)
   const [showAddModal, setShowAddModal] = useState(false)
 
-  useEffect(() => {
-    fetchDogs()
-  }, [])
-
-  useEffect(() => {
-    filterDogs()
-  }, [dogs, search, sexFilter])
+  useEffect(() => { fetchDogs() }, [])
+  useEffect(() => { filterDogs() }, [dogs, search, sexFilter])
 
   const fetchDogs = async () => {
     try {
@@ -33,24 +29,19 @@ function DogList() {
 
   const filterDogs = () => {
     let filtered = dogs
-
     if (search) {
       filtered = filtered.filter(dog =>
         dog.name.toLowerCase().includes(search.toLowerCase()) ||
         (dog.registration_number && dog.registration_number.toLowerCase().includes(search.toLowerCase()))
       )
     }
-
     if (sexFilter !== 'all') {
       filtered = filtered.filter(dog => dog.sex === sexFilter)
     }
-
     setFilteredDogs(filtered)
   }
 
-  const handleSave = () => {
-    fetchDogs()
-  }
+  const handleSave = () => { fetchDogs() }
 
   const calculateAge = (birthDate) => {
     if (!birthDate) return null
@@ -58,17 +49,16 @@ function DogList() {
     const birth = new Date(birthDate)
     let years = today.getFullYear() - birth.getFullYear()
     let months = today.getMonth() - birth.getMonth()
-    
-    if (months < 0) {
-      years--
-      months += 12
-    }
-    
+    if (months < 0) { years--; months += 12 }
     if (years === 0) return `${months}mo`
     if (months === 0) return `${years}y`
     return `${years}y ${months}mo`
   }
 
+  // A dog has champion blood if sire or dam is a champion
+  const hasChampionBlood = (dog) =>
+    (dog.sire && dog.sire.is_champion) || (dog.dam && dog.dam.is_champion)
+
   if (loading) {
     return <div className="container loading">Loading dogs...</div>
   }
@@ -109,12 +99,9 @@ function DogList() {
             <option value="female">Females ♀</option>
           </select>
           {(search || sexFilter !== 'all') && (
-            <button 
-              className="btn btn-ghost" 
-              onClick={() => {
-                setSearch('')
-                setSexFilter('all')
-              }}
+            <button
+              className="btn btn-ghost"
+              onClick={() => { setSearch(''); setSexFilter('all') }}
               style={{ padding: '0.625rem 1rem', fontSize: '0.875rem' }}
             >
               Clear
@@ -131,8 +118,8 @@ function DogList() {
             {search || sexFilter !== 'all' ? 'No dogs found' : 'No dogs yet'}
           </h3>
           <p style={{ color: 'var(--text-secondary)', marginBottom: '2rem' }}>
-            {search || sexFilter !== 'all' 
-              ? 'Try adjusting your search or filters' 
+            {search || sexFilter !== 'all'
+              ? 'Try adjusting your search or filters'
               : 'Add your first dog to get started'}
           </p>
           {!search && sexFilter === 'all' && (
@@ -145,13 +132,13 @@ function DogList() {
       ) : (
         <div style={{ display: 'grid', gap: '1rem' }}>
           {filteredDogs.map(dog => (
-            <Link 
-              key={dog.id} 
-              to={`/dogs/${dog.id}`} 
-              className="card" 
-              style={{ 
+            <Link
+              key={dog.id}
+              to={`/dogs/${dog.id}`}
+              className="card"
+              style={{
                 padding: '1rem',
-                textDecoration: 'none', 
+                textDecoration: 'none',
                 display: 'flex',
                 gap: '1rem',
                 alignItems: 'center',
@@ -169,65 +156,60 @@ function DogList() {
                 e.currentTarget.style.boxShadow = 'var(--shadow-sm)'
               }}
             >
-              {/* Avatar Photo */}
-              <div style={{ 
-                width: '80px',
-                height: '80px',
-                flexShrink: 0,
+              {/* Avatar */}
+              <div style={{
+                width: '80px', height: '80px', flexShrink: 0,
                 borderRadius: 'var(--radius)',
                 background: 'var(--bg-primary)',
-                border: '2px solid var(--border)',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                overflow: 'hidden'
+                border: dog.is_champion
+                  ? '2px solid var(--champion-gold)'
+                  : hasChampionBlood(dog)
+                    ? '2px solid var(--bloodline-amber)'
+                    : '2px solid var(--border)',
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                overflow: 'hidden',
+                boxShadow: dog.is_champion
+                  ? '0 0 8px var(--champion-glow)'
+                  : hasChampionBlood(dog)
+                    ? '0 0 8px var(--bloodline-glow)'
+                    : 'none'
               }}>
                 {dog.photo_urls && dog.photo_urls.length > 0 ? (
-                  <img 
-                    src={dog.photo_urls[0]} 
-                    alt={dog.name} 
-                    style={{ 
-                      width: '100%', 
-                      height: '100%', 
-                      objectFit: 'cover'
-                    }} 
+                  <img
+                    src={dog.photo_urls[0]}
+                    alt={dog.name}
+                    style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                   />
                 ) : (
                   <Dog size={32} style={{ color: 'var(--text-muted)', opacity: 0.5 }} />
                 )}
               </div>
 
-              {/* Info Section */}
+              {/* Info */}
               <div style={{ flex: 1, minWidth: 0 }}>
-                <h3 style={{ 
-                  fontSize: '1.125rem', 
-                  marginBottom: '0.375rem',
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  whiteSpace: 'nowrap'
+                <h3 style={{
+                  fontSize: '1.125rem',
+                  marginBottom: '0.25rem',
+                  display: 'flex', alignItems: 'center', gap: '0.5rem',
+                  flexWrap: 'wrap'
                 }}>
-                  {dog.name}
-                  <span style={{ 
-                    marginLeft: '0.5rem', 
-                    fontSize: '1rem',
-                    color: dog.sex === 'male' ? 'var(--primary)' : '#ec4899'
-                  }}>
+                  <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                    {dog.name}
+                  </span>
+                  <span style={{ color: dog.sex === 'male' ? 'var(--primary)' : '#ec4899', fontSize: '1rem' }}>
                     {dog.sex === 'male' ? '♂' : '♀'}
                   </span>
+                  {dog.is_champion ? <ChampionBadge /> : hasChampionBlood(dog) ? <ChampionBloodlineBadge /> : null}
                 </h3>
-                
-                <div style={{ 
-                  display: 'flex',
-                  flexWrap: 'wrap',
-                  gap: '0.75rem',
-                  fontSize: '0.8125rem',
-                  color: 'var(--text-secondary)',
-                  marginBottom: '0.5rem'
+
+                <div style={{
+                  display: 'flex', flexWrap: 'wrap', gap: '0.75rem',
+                  fontSize: '0.8125rem', color: 'var(--text-secondary)', marginBottom: '0.5rem'
                 }}>
                   <span>{dog.breed}</span>
                   {dog.birth_date && (
                     <>
-                      <span>•</span>
+                      <span>·</span>
                       <span style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
                         <Calendar size={12} />
                         {calculateAge(dog.birth_date)}
@@ -236,23 +218,20 @@ function DogList() {
                   )}
                   {dog.color && (
                     <>
-                      <span>•</span>
+                      <span>·</span>
                       <span>{dog.color}</span>
                     </>
                   )}
                 </div>
 
                 {dog.registration_number && (
-                  <div style={{ 
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    gap: '0.25rem',
+                  <div style={{
+                    display: 'inline-flex', alignItems: 'center', gap: '0.25rem',
                     padding: '0.25rem 0.5rem',
                     background: 'var(--bg-primary)',
                     border: '1px solid var(--border)',
                     borderRadius: 'var(--radius-sm)',
-                    fontSize: '0.75rem',
-                    fontFamily: 'monospace',
+                    fontSize: '0.75rem', fontFamily: 'monospace',
                     color: 'var(--text-muted)'
                   }}>
                     <Hash size={10} />
@@ -261,11 +240,7 @@ function DogList() {
                 )}
               </div>
 
-              {/* Arrow Indicator */}
-              <div style={{ 
-                opacity: 0.5,
-                transition: 'var(--transition)'
-              }}>
+              <div style={{ opacity: 0.5, transition: 'var(--transition)' }}>
                 <ArrowRight size={20} color="var(--text-muted)" />
               </div>
             </Link>
@@ -283,4 +258,4 @@ function DogList() {
   )
 }
 
-export default DogList
\ No newline at end of file
+export default DogList