diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 4e44c3b..489bd1e 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -5,6 +5,7 @@ import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout
 import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import FooterBase from '@/components/sections/footer/FooterBase';
+import Link from "next/link";
 
 export default function AboutPage() {
   const navItems = [
@@ -57,7 +58,7 @@ export default function AboutPage() {
       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="about-us" data-section="about-us">
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">
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 420e8b4..bae9377 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -6,6 +6,7 @@ import FooterBase from "@/components/sections/footer/FooterBase";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import { useBlogPosts } from "@/hooks/useBlogPosts";
+import Link from "next/link";
 
 export default function BlogPage() {
     const { posts, isLoading } = useBlogPosts();
@@ -34,7 +35,7 @@ export default function BlogPage() {
                             { name: "Donate", id: "/donate" },
                             { name: "Shop", id: "/shop" },
                             { name: "Blog", id: "/blog" }
-                        ]}
+                        ].map(item => ({...item, id: item.id.startsWith('/') ? item.id : `#${item.id}`}))}
                         button={{ text: "Donate", href: "/donate" }}
                         brandName="Hope Haven"
                         className="py-4"
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index a14bbb8..5f7ea94 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -5,6 +5,7 @@ import ContactText from '@/components/sections/contact/ContactText';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import FooterBase from '@/components/sections/footer/FooterBase';
+import Link from "next/link";
 
 export default function ContactPage() {
   const navItems = [
@@ -57,7 +58,7 @@ export default function ContactPage() {
       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="get-involved" data-section="get-involved">
@@ -74,7 +75,7 @@ export default function ContactPage() {
 
       <div id="happy-stories" data-section="happy-stories">
         <TestimonialCardFifteen
-          testimonial="\"The Hope Haven team made volunteering such a rewarding experience. Knowing I'm directly contributing to animals' well-being is incredibly fulfilling.\""
+          testimonial="The Hope Haven team made volunteering such a rewarding experience. Knowing I'm directly contributing to animals' well-being is incredibly fulfilling."
           rating={5}
           author="Michael Chen, Volunteer"
           avatars={[
diff --git a/src/app/donate/page.tsx b/src/app/donate/page.tsx
index f1d7f66..cc094da 100644
--- a/src/app/donate/page.tsx
+++ b/src/app/donate/page.tsx
@@ -5,6 +5,7 @@ import ContactText from '@/components/sections/contact/ContactText';
 import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 import FooterBase from '@/components/sections/footer/FooterBase';
+import Link from "next/link";
 
 export default function DonatePage() {
   const navItems = [
@@ -57,7 +58,7 @@ export default function DonatePage() {
       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="get-involved" data-section="get-involved">
@@ -93,7 +94,7 @@ export default function DonatePage() {
 
       <div id="happy-stories" data-section="happy-stories">
         <TestimonialCardFifteen
-          testimonial="\"My donation to Hope Haven helped cover medical costs for a dog that was hit by a car. Knowing I made a direct impact on saving a life is incredibly rewarding.\""
+          testimonial="My donation to Hope Haven helped cover medical costs for a dog that was hit by a car. Knowing I made a direct impact on saving a life is incredibly rewarding."
           rating={5}
           author="Emily Rodriguez, Donor"
           avatars={[
diff --git a/src/app/page.tsx b/src/app/page.tsx
index c71f058..c7efdb7 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,6 +10,7 @@ import TestimonialCardFifteen from '@/components/sections/testimonial/Testimonia
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterBase from '@/components/sections/footer/FooterBase';
+import Link from "next/link";
 
 export default function HomePage() {
   const navItems = [
@@ -62,7 +63,7 @@ export default function HomePage() {
       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="hero" data-section="hero">
@@ -150,7 +151,7 @@ export default function HomePage() {
 
       <div id="happy-stories" data-section="happy-stories">
         <TestimonialCardFifteen
-          testimonial="\"Adopting from Hope Haven was the best decision we ever made. Our new dog, Charlie, has brought so much joy into our lives. The staff was incredibly helpful and supportive throughout the whole process.\""
+          testimonial="Adopting from Hope Haven was the best decision we ever made. Our new dog, Charlie, has brought so much joy into our lives. The staff was incredibly helpful and supportive throughout the whole process."
           rating={5}
           author="Sarah Johnson, Proud Pet Parent"
           avatars={[
diff --git a/src/app/shop/[id]/page.tsx b/src/app/shop/[id]/page.tsx
index 8251649..66d1c7e 100644
--- a/src/app/shop/[id]/page.tsx
+++ b/src/app/shop/[id]/page.tsx
@@ -13,6 +13,7 @@ import { useCheckout } from "@/hooks/useCheckout";
 // New imports for Navbar and Footer
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import FooterBase from '@/components/sections/footer/FooterBase';
+import Link from "next/link";
 
 interface ProductPageProps {
     params: Promise<{ id: string }>;
@@ -91,7 +92,7 @@ export default function ProductPage({ params }: ProductPageProps) {
             { name: "Shop", id: "/shop" },
             { name: "Donate", id: "/donate" },
             { name: "Blog", id: "/blog" }
-        ],
+        ].map(item => ({...item, id: item.id.startsWith('/') ? item.id : `#${item.id}`})),
         brandName: "Hope Haven",        className: "py-4",        button: { text: "Cart", onClick: () => setCartOpen(true) }
     };
 
@@ -109,7 +110,7 @@ export default function ProductPage({ params }: ProductPageProps) {
         return (
             <ThemeProvider {...themeProps}>
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarStyleCentered {...navbarProps} />
                     </div>
                     <div id="loading-state" data-section="loading-state">
@@ -129,7 +130,7 @@ export default function ProductPage({ params }: ProductPageProps) {
         return (
             <ThemeProvider {...themeProps}>
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarStyleCentered {...navbarProps} />
                     </div>
                     <div id="not-found-state" data-section="not-found-state">
@@ -156,7 +157,7 @@ export default function ProductPage({ params }: ProductPageProps) {
     return (
         <ThemeProvider {...themeProps}>
             <ReactLenis root>
-                <div id="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                     <NavbarStyleCentered {...navbarProps} />
                 </div>
                 <div id="product-detail-card" data-section="product-detail-card">
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index 1cfe05b..cd2c3af 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -8,6 +8,7 @@ import { useProductCatalog } from "@/hooks/useProductCatalog";
 // New imports for Navbar and Footer
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import FooterBase from '@/components/sections/footer/FooterBase';
+import Link from "next/link";
 
 export default function ShopPage() {
     const {
@@ -41,7 +42,7 @@ export default function ShopPage() {
             { name: "Shop", id: "/shop" },
             { name: "Donate", id: "/donate" },
             { name: "Blog", id: "/blog" }
-        ],
+        ].map(item => ({...item, id: item.id.startsWith('/') ? item.id : `#${item.id}`})),
         brandName: "Hope Haven",        className: "py-4",        button: { text: "Cart", onClick: () => console.log("cart") }
     };
 
@@ -59,7 +60,7 @@ export default function ShopPage() {
         return (
             <ThemeProvider {...themeProps}>
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarStyleCentered {...navbarProps} />
                     </div>
                     <div id="loading-state" data-section="loading-state">
@@ -78,7 +79,7 @@ export default function ShopPage() {
     return (
         <ThemeProvider {...themeProps}>
             <ReactLenis root>
-                <div id="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                     <NavbarStyleCentered {...navbarProps} />
                 </div>
                 <div id="product-catalog" data-section="product-catalog">