diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 489bd1e..678c210 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -58,7 +58,7 @@ export default function AboutPage() {
       headingFontWeight={"light"}
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered navItems={navItems.map(item => ({...item, id: item.id.startsWith('/') ? item.id : `#${item.id}`}))} button={navButton} brandName="Hope Haven" className="py-4" />
+        <NavbarStyleCentered navItems={navItems} button={navButton} brandName="Hope Haven" className="py-4" />
       </div>
 
       <div id="about-us" data-section="about-us">
@@ -92,7 +92,7 @@ export default function AboutPage() {
           textboxLayout="default"
           useInvertedBackground={false}
           tag="Making a Difference"
-          titleClassName="font-light"
+          textBoxTitleClassName="font-light"
           textBoxDescriptionClassName="font-light"
           metricTitleClassName="font-light"
         />
@@ -110,7 +110,7 @@ export default function AboutPage() {
           textboxLayout="default"
           useInvertedBackground={false}
           tag="Partnerships"
-          titleClassName="font-light"
+          textBoxTitleClassName="font-light"
           textBoxDescriptionClassName="font-light"
           logoTextClassName="font-light"
         />
@@ -120,7 +120,6 @@ export default function AboutPage() {
         columns={footerColumns}
         logoText="Hope Haven"
         copyrightText="© 2024 Hope Haven Animal Shelter. All rights reserved."
-        useInvertedBackground={false}
       />
     </ThemeProvider>
   );
diff --git a/src/app/adopt/page.tsx b/src/app/adopt/page.tsx
index 2a3b26a..9cc0a60 100644
--- a/src/app/adopt/page.tsx
+++ b/src/app/adopt/page.tsx
@@ -3,7 +3,7 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
-import { Home, HeartHandshake, Stethoscope, Family } from "lucide-react";
+import { Home, HeartHandshake, Stethoscope, Users } from "lucide-react";
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterBase from '@/components/sections/footer/FooterBase';
 import Link from "next/link";
@@ -59,7 +59,7 @@ export default function AdoptPage() {
       headingFontWeight={"light"}
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered navItems={navItems.map(item => ({...item, id: item.id.startsWith('/') ? item.id : `#${item.id}`}))} button={navButton} brandName="Hope Haven" className="py-4" />
+        <NavbarStyleCentered navItems={navItems} button={navButton} brandName="Hope Haven" className="py-4" />
       </div>
 
       <div id="adoptable-pets" data-section="adoptable-pets">
@@ -77,7 +77,7 @@ export default function AdoptPage() {
           textboxLayout="default"
           useInvertedBackground={false}
           tag="Adopt Now"
-          titleClassName="font-light"
+          textBoxTitleClassName="font-light"
           textBoxDescriptionClassName="font-light"
           cardBrandClassName="font-light"
           cardNameClassName="font-light"
@@ -93,13 +93,13 @@ export default function AdoptPage() {
             { icon: Home, title: "A Loving Home Awaits", description: "Provide a deserving animal with a warm, safe, and permanent home. You change a life forever." },
             { icon: HeartHandshake, title: "Comprehensive Support", description: "We offer post-adoption resources, training tips, and a community network to ensure a smooth transition for you and your new pet." },
             { icon: Stethoscope, title: "Healthy & Happy Pets", description: "All our animals receive thorough veterinary check-ups, vaccinations, and spay/neuter services before adoption." },
-            { icon: Family, title: "Matching Perfect Pairs", description: "Our experienced team helps you find the ideal companion whose personality and needs align with your lifestyle." }
+            { icon: Users, title: "Matching Perfect Pairs", description: "Our experienced team helps you find the ideal companion whose personality and needs align with your lifestyle." }
           ]}
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
           tag="Our Promise"
-          titleClassName="font-light"
+          textBoxTitleClassName="font-light"
           textBoxDescriptionClassName="font-light"
           cardTitleClassName="font-light"
         />
@@ -110,7 +110,7 @@ export default function AdoptPage() {
           text="Ready to open your home? Start your adoption journey with Hope Haven today."
           animationType="background-highlight"
           buttons={[{ text: "View All Pets", href: "/adopt" }, { text: "Contact Us", href: "/contact" }]}
-          background={{ variant: "aurora" }}
+          background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={false}
           ariaLabel="Call to action for adoption"
           textClassName="font-light"
@@ -121,7 +121,6 @@ export default function AdoptPage() {
         columns={footerColumns}
         logoText="Hope Haven"
         copyrightText="© 2024 Hope Haven Animal Shelter. All rights reserved."
-        useInvertedBackground={false}
       />
     </ThemeProvider>
   );
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index bae9377..4901c09 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -11,6 +11,40 @@ import Link from "next/link";
 export default function BlogPage() {
     const { posts, isLoading } = useBlogPosts();
 
+    const navItems = [
+        { name: "Home", id: "/" },
+        { name: "Adopt", id: "/adopt" },
+        { name: "About", id: "/about" },
+        { name: "Contact", id: "/contact" },
+        { name: "Donate", id: "/donate" },
+        { name: "Shop", id: "/shop" },
+        { name: "Blog", id: "/blog" }
+    ];
+
+    const footerColumns = [
+        {
+            title: "About Us",            items: [
+                { label: "Our Mission", href: "/about" },
+                { label: "Meet the Team", href: "/about#team" },
+                { label: "Impact Report", href: "/about#impact" }
+            ]
+        },
+        {
+            title: "Get Involved",            items: [
+                { label: "Adopt a Pet", href: "/adopt" },
+                { label: "Volunteer", href: "/contact" },
+                { label: "Foster a Pet", href: "/contact" }
+            ]
+        },
+        {
+            title: "Resources",            items: [
+                { label: "FAQs", href: "/faq" },
+                { label: "Pet Care Tips", href: "/blog" },
+                { label: "Contact Us", href: "/contact" }
+            ]
+        }
+    ];
+
     return (
         <ThemeProvider
             defaultButtonVariant="hover-bubble"
@@ -27,15 +61,7 @@ export default function BlogPage() {
             <ReactLenis root>
                 <div id="nav" data-section="nav">
                     <NavbarStyleCentered
-                        navItems={[
-                            { name: "Home", id: "/" },
-                            { name: "Adopt", id: "/adopt" },
-                            { name: "About", id: "/about" },
-                            { name: "Contact", id: "/contact" },
-                            { name: "Donate", id: "/donate" },
-                            { name: "Shop", id: "/shop" },
-                            { name: "Blog", id: "/blog" }
-                        ].map(item => ({...item, id: item.id.startsWith('/') ? item.id : `#${item.id}`}))}
+                        navItems={navItems}
                         button={{ text: "Donate", href: "/donate" }}
                         brandName="Hope Haven"
                         className="py-4"
@@ -63,32 +89,9 @@ export default function BlogPage() {
 
                 <div id="footer" data-section="footer">
                     <FooterBase
-                        columns={[
-                            {
-                                title: "About Us",                                items: [
-                                    { label: "Our Mission", href: "/about" },
-                                    { label: "Meet the Team", href: "/about#team" },
-                                    { label: "Impact Report", href: "/about#impact" }
-                                ]
-                            },
-                            {
-                                title: "Get Involved",                                items: [
-                                    { label: "Adopt a Pet", href: "/adopt" },
-                                    { label: "Volunteer", href: "/contact" },
-                                    { label: "Foster a Pet", href: "/contact" }
-                                ]
-                            },
-                            {
-                                title: "Resources",                                items: [
-                                    { label: "FAQs", href: "/faq" },
-                                    { label: "Pet Care Tips", href: "/blog" },
-                                    { label: "Contact Us", href: "/contact" }
-                                ]
-                            }
-                        ]}
+                        columns={footerColumns}
                         logoText="Hope Haven"
                         copyrightText="© 2024 Hope Haven Animal Shelter. All rights reserved."
-                        useInvertedBackground={false}
                     />
                 </div>
             </ReactLenis>
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 5f7ea94..6df2bb8 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -58,7 +58,7 @@ export default function ContactPage() {
       headingFontWeight={"light"}
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered navItems={navItems.map(item => ({...item, id: item.id.startsWith('/') ? item.id : `#${item.id}`}))} button={navButton} brandName="Hope Haven" className="py-4" />
+        <NavbarStyleCentered navItems={navItems} button={navButton} brandName="Hope Haven" className="py-4" />
       </div>
 
       <div id="get-involved" data-section="get-involved">
@@ -66,7 +66,7 @@ export default function ContactPage() {
           text="Have questions or want to get involved? Reach out to us – we're here to help!"
           animationType="background-highlight"
           buttons={[{ text: "Send a Message", href: "#" }, { text: "Call Us", href: "#" }]}
-          background={{ variant: "aurora" }}
+          background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={false}
           ariaLabel="Contact us section"
           textClassName="font-light"
@@ -88,7 +88,6 @@ export default function ContactPage() {
           avatarsAnimation="slide-up"
           useInvertedBackground={false}
           testimonialClassName="font-light"
-          authorClassName="font-light"
         />
       </div>
 
@@ -105,7 +104,7 @@ export default function ContactPage() {
           textboxLayout="default"
           useInvertedBackground={false}
           tag="Making a Difference"
-          titleClassName="font-light"
+          textBoxTitleClassName="font-light"
           textBoxDescriptionClassName="font-light"
           metricTitleClassName="font-light"
         />
@@ -115,7 +114,6 @@ export default function ContactPage() {
         columns={footerColumns}
         logoText="Hope Haven"
         copyrightText="© 2024 Hope Haven Animal Shelter. All rights reserved."
-        useInvertedBackground={false}
       />
     </ThemeProvider>
   );
diff --git a/src/app/donate/page.tsx b/src/app/donate/page.tsx
index cc094da..af78f37 100644
--- a/src/app/donate/page.tsx
+++ b/src/app/donate/page.tsx
@@ -58,7 +58,7 @@ export default function DonatePage() {
       headingFontWeight={"light"}
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered navItems={navItems.map(item => ({...item, id: item.id.startsWith('/') ? item.id : `#${item.id}`}))} button={navButton} brandName="Hope Haven" className="py-4" />
+        <NavbarStyleCentered navItems={navItems} button={navButton} brandName="Hope Haven" className="py-4" />
       </div>
 
       <div id="get-involved" data-section="get-involved">
@@ -66,7 +66,7 @@ export default function DonatePage() {
           text="Your generosity changes lives. Every donation brings us closer to a world where every animal has a home."
           animationType="background-highlight"
           buttons={[{ text: "Donate Now", href: "#" }, { text: "Learn More", href: "/about" }]}
-          background={{ variant: "aurora" }}
+          background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={false}
           ariaLabel="Call to action for donations"
           textClassName="font-light"
@@ -86,7 +86,7 @@ export default function DonatePage() {
           textboxLayout="default"
           useInvertedBackground={false}
           tag="Making a Difference"
-          titleClassName="font-light"
+          textBoxTitleClassName="font-light"
           textBoxDescriptionClassName="font-light"
           metricTitleClassName="font-light"
         />
@@ -107,7 +107,6 @@ export default function DonatePage() {
           avatarsAnimation="slide-up"
           useInvertedBackground={false}
           testimonialClassName="font-light"
-          authorClassName="font-light"
         />
       </div>
 
@@ -115,7 +114,6 @@ export default function DonatePage() {
         columns={footerColumns}
         logoText="Hope Haven"
         copyrightText="© 2024 Hope Haven Animal Shelter. All rights reserved."
-        useInvertedBackground={false}
       />
     </ThemeProvider>
   );
diff --git a/src/app/page.tsx b/src/app/page.tsx
index c7efdb7..cf9bab6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,7 +3,7 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
 import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
-import { Home, HeartHandshake, Stethoscope, Family } from "lucide-react";
+import { Home, HeartHandshake, Stethoscope, Users } from "lucide-react";
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
@@ -63,14 +63,14 @@ export default function HomePage() {
       headingFontWeight={"light"}
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered navItems={navItems.map(item => ({...item, id: item.id.startsWith('/') ? item.id : `#${item.id}`}))} button={navButton} brandName="Hope Haven" className="py-4" />
+        <NavbarStyleCentered navItems={navItems} button={navButton} brandName="Hope Haven" className="py-4" />
       </div>
 
       <div id="hero" data-section="hero">
         <HeroBillboardCarousel
           title="Give a Loving Home to a Deserving Pet"
           description="Every animal deserves a second chance. Discover your new best friend and join our mission to rescue, rehabilitate, and rehome pets in need."
-          background={{ variant: "aurora" }}
+          background={{ variant: "sparkles-gradient" }}
           tag="Hope Haven Shelter"
           buttons={[{ text: "Adopt a Pet", href: "/adopt" }, { text: "Get Involved", href: "/about" }]}
           mediaItems={[
@@ -95,13 +95,13 @@ export default function HomePage() {
             { icon: Home, title: "A Loving Home Awaits", description: "Provide a deserving animal with a warm, safe, and permanent home. You change a life forever." },
             { icon: HeartHandshake, title: "Comprehensive Support", description: "We offer post-adoption resources, training tips, and a community network to ensure a smooth transition for you and your new pet." },
             { icon: Stethoscope, title: "Healthy & Happy Pets", description: "All our animals receive thorough veterinary check-ups, vaccinations, and spay/neuter services before adoption." },
-            { icon: Family, title: "Matching Perfect Pairs", description: "Our experienced team helps you find the ideal companion whose personality and needs align with your lifestyle." }
+            { icon: Users, title: "Matching Perfect Pairs", description: "Our experienced team helps you find the ideal companion whose personality and needs align with your lifestyle." }
           ]}
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
           tag="Our Promise"
-          titleClassName="font-light"
+          textBoxTitleClassName="font-light"
           textBoxDescriptionClassName="font-light"
           cardTitleClassName="font-light"
         />
@@ -122,7 +122,7 @@ export default function HomePage() {
           textboxLayout="default"
           useInvertedBackground={false}
           tag="Adopt Now"
-          titleClassName="font-light"
+          textBoxTitleClassName="font-light"
           textBoxDescriptionClassName="font-light"
           cardBrandClassName="font-light"
           cardNameClassName="font-light"
@@ -143,7 +143,7 @@ export default function HomePage() {
           textboxLayout="default"
           useInvertedBackground={false}
           tag="Making a Difference"
-          titleClassName="font-light"
+          textBoxTitleClassName="font-light"
           textBoxDescriptionClassName="font-light"
           metricTitleClassName="font-light"
         />
@@ -164,7 +164,6 @@ export default function HomePage() {
           avatarsAnimation="slide-up"
           useInvertedBackground={false}
           testimonialClassName="font-light"
-          authorClassName="font-light"
         />
       </div>
 
@@ -180,7 +179,7 @@ export default function HomePage() {
           textboxLayout="default"
           useInvertedBackground={false}
           tag="Partnerships"
-          titleClassName="font-light"
+          textBoxTitleClassName="font-light"
           textBoxDescriptionClassName="font-light"
           logoTextClassName="font-light"
         />
@@ -191,7 +190,7 @@ export default function HomePage() {
           text="Ready to make a difference? Join our cause and help us create brighter futures for animals in need."
           animationType="background-highlight"
           buttons={[{ text: "Donate Today", href: "/donate" }, { text: "Volunteer", href: "/contact" }]}
-          background={{ variant: "aurora" }}
+          background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={false}
           ariaLabel="Call to action for donations and volunteering"
           textClassName="font-light"
@@ -202,7 +201,6 @@ export default function HomePage() {
         columns={footerColumns}
         logoText="Hope Haven"
         copyrightText="© 2024 Hope Haven Animal Shelter. All rights reserved."
-        useInvertedBackground={false}
       />
     </ThemeProvider>
   );
diff --git a/src/app/shop/[id]/page.tsx b/src/app/shop/[id]/page.tsx
index 66d1c7e..45ee457 100644
--- a/src/app/shop/[id]/page.tsx
+++ b/src/app/shop/[id]/page.tsx
@@ -92,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) }
     };
 
@@ -103,7 +103,7 @@ export default function ProductPage({ params }: ProductPageProps) {
             { title: "Get Involved", items: [{ label: "Adopt a Pet", href: "/adopt" }, { label: "Volunteer", href: "/contact" }, { label: "Foster a Pet", href: "/contact" }] },
             { title: "Resources", items: [{ label: "FAQs", href: "/faq" }, { label: "Pet Care Tips", href: "/blog" }, { label: "Contact Us", href: "/contact" }] }
         ],
-        logoText: "Hope Haven",        copyrightText: "© 2024 Hope Haven Animal Shelter. All rights reserved.",        useInvertedBackground: false
+        logoText: "Hope Haven",        copyrightText: "© 2024 Hope Haven Animal Shelter. All rights reserved."
     };
 
     if (isLoading) {
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index cd2c3af..7707e69 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -42,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") }
     };
 
@@ -53,7 +53,7 @@ export default function ShopPage() {
             { title: "Get Involved", items: [{ label: "Adopt a Pet", href: "/adopt" }, { label: "Volunteer", href: "/contact" }, { label: "Foster a Pet", href: "/contact" }] },
             { title: "Resources", items: [{ label: "FAQs", href: "/faq" }, { label: "Pet Care Tips", href: "/blog" }, { label: "Contact Us", href: "/contact" }] }
         ],
-        logoText: "Hope Haven",        copyrightText: "© 2024 Hope Haven Animal Shelter. All rights reserved.",        useInvertedBackground: false
+        logoText: "Hope Haven",        copyrightText: "© 2024 Hope Haven Animal Shelter. All rights reserved."
     };
 
     if (isLoading) {