diff --git a/client/src/App.jsx b/client/src/App.jsx
index bddf6bc..729ff39 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,5 +1,5 @@
-import { BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom'
-import { Home, Users, Activity, Heart, FlaskConical } from 'lucide-react'
+import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom'
+import { Home, Users, Activity, Heart, FlaskConical, Settings } from 'lucide-react'
import Dashboard from './pages/Dashboard'
import DogList from './pages/DogList'
import DogDetail from './pages/DogDetail'
@@ -8,60 +8,69 @@ import LitterList from './pages/LitterList'
import LitterDetail from './pages/LitterDetail'
import BreedingCalendar from './pages/BreedingCalendar'
import PairingSimulator from './pages/PairingSimulator'
+import SettingsPage from './pages/SettingsPage'
+import { useSettings } from './hooks/useSettings'
import './App.css'
+function NavLink({ to, icon: Icon, label }) {
+ const location = useLocation()
+ const isActive = location.pathname === to
+ return (
+
+