diff --git a/client/src/App.jsx b/client/src/App.jsx
new file mode 100644
index 0000000..ce9458a
--- /dev/null
+++ b/client/src/App.jsx
@@ -0,0 +1,57 @@
+import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
+import { Dog, Home, Users, Activity, Heart, BookOpen } from 'lucide-react'
+import Dashboard from './pages/Dashboard'
+import DogList from './pages/DogList'
+import DogDetail from './pages/DogDetail'
+import PedigreeView from './pages/PedigreeView'
+import LitterList from './pages/LitterList'
+import BreedingCalendar from './pages/BreedingCalendar'
+import './App.css'
+
+function App() {
+  return (
+    <Router>
+      <div className="app">
+        <nav className="navbar">
+          <div className="container">
+            <div className="nav-brand">
+              <Dog size={32} />
+              <span className="brand-text">BREEDR</span>
+            </div>
+            <div className="nav-links">
+              <Link to="/" className="nav-link">
+                <Home size={20} />
+                <span>Dashboard</span>
+              </Link>
+              <Link to="/dogs" className="nav-link">
+                <Users size={20} />
+                <span>Dogs</span>
+              </Link>
+              <Link to="/litters" className="nav-link">
+                <Activity size={20} />
+                <span>Litters</span>
+              </Link>
+              <Link to="/breeding" className="nav-link">
+                <Heart size={20} />
+                <span>Breeding</span>
+              </Link>
+            </div>
+          </div>
+        </nav>
+
+        <main className="main-content">
+          <Routes>
+            <Route path="/" element={<Dashboard />} />
+            <Route path="/dogs" element={<DogList />} />
+            <Route path="/dogs/:id" element={<DogDetail />} />
+            <Route path="/pedigree/:id" element={<PedigreeView />} />
+            <Route path="/litters" element={<LitterList />} />
+            <Route path="/breeding" element={<BreedingCalendar />} />
+          </Routes>
+        </main>
+      </div>
+    </Router>
+  )
+}
+
+export default App
\ No newline at end of file