diff --git a/src/app/adopt/page.tsx b/src/app/adopt/page.tsx
index 35710a3..2a3b26a 100644
--- a/src/app/adopt/page.tsx
+++ b/src/app/adopt/page.tsx
@@ -6,6 +6,7 @@ import FeatureHoverPattern from '@/components/sections/feature/featureHoverPatte
 import { Home, HeartHandshake, Stethoscope, Family } from "lucide-react";
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterBase from '@/components/sections/footer/FooterBase';
+import Link from "next/link";
 
 export default function AdoptPage() {
   const navItems = [
@@ -58,7 +59,7 @@ export default function AdoptPage() {
       headingFontWeight={"light"}
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered navItems={navItems} button={navButton} brandName="Hope Haven" className="py-4" />
+        <NavbarStyleCentered navItems={navItems.map(item => ({...item, id: item.id.startsWith('/') ? item.id : `#${item.id}`}))} button={navButton} brandName="Hope Haven" className="py-4" />
       </div>
 
       <div id="adoptable-pets" data-section="adoptable-pets">