diff --git a/client/src/pages/BreedingCalendar.jsx b/client/src/pages/BreedingCalendar.jsx
new file mode 100644
index 0000000..17c08bb
--- /dev/null
+++ b/client/src/pages/BreedingCalendar.jsx
@@ -0,0 +1,67 @@
+import { useEffect, useState } from 'react'
+import { Heart } from 'lucide-react'
+import axios from 'axios'
+
+function BreedingCalendar() {
+  const [heatCycles, setHeatCycles] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    fetchHeatCycles()
+  }, [])
+
+  const fetchHeatCycles = async () => {
+    try {
+      const res = await axios.get('/api/breeding/heat-cycles/active')
+      setHeatCycles(res.data)
+      setLoading(false)
+    } catch (error) {
+      console.error('Error fetching heat cycles:', error)
+      setLoading(false)
+    }
+  }
+
+  if (loading) {
+    return <div className="container loading">Loading breeding calendar...</div>
+  }
+
+  return (
+    <div className="container">
+      <h1 style={{ marginBottom: '2rem' }}>Breeding Calendar</h1>
+
+      <div className="card" style={{ marginBottom: '2rem' }}>
+        <h2>Active Heat Cycles</h2>
+        {heatCycles.length === 0 ? (
+          <div style={{ textAlign: 'center', padding: '2rem' }}>
+            <Heart size={48} style={{ color: 'var(--text-secondary)', margin: '0 auto 1rem' }} />
+            <p style={{ color: 'var(--text-secondary)' }}>No active heat cycles</p>
+          </div>
+        ) : (
+          <div style={{ display: 'grid', gap: '1rem', marginTop: '1rem' }}>
+            {heatCycles.map(cycle => (
+              <div key={cycle.id} className="card" style={{ background: 'var(--bg-secondary)' }}>
+                <h3>{cycle.dog_name}</h3>
+                <p style={{ color: 'var(--text-secondary)' }}>
+                  Started: {new Date(cycle.start_date).toLocaleDateString()}
+                </p>
+                {cycle.registration_number && (
+                  <p style={{ fontSize: '0.875rem', color: 'var(--text-secondary)' }}>
+                    Reg: {cycle.registration_number}
+                  </p>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className="card">
+        <h2>Whelping Calculator</h2>
+        <p style={{ color: 'var(--text-secondary)', marginTop: '0.5rem' }}>Calculate expected whelping dates based on breeding dates</p>
+        <p style={{ marginTop: '1rem', fontSize: '0.875rem' }}>Feature coming soon...</p>
+      </div>
+    </div>
+  )
+}
+
+export default BreedingCalendar
\ No newline at end of file