diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
new file mode 100644
index 0000000..21a0ade
--- /dev/null
+++ b/src/app/about/page.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import React from 'react';
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+
+export default function AboutPage() {
+  const commonNavItems = [
+    { name: 'Home', id: '/' },
+    { name: 'Adopt', id: '#adopt' },
+    { name: 'About', id: '/about' },
+    { name: 'Volunteer', id: '#team' },
+    { name: 'Blog', id: '/blog' },
+    { name: 'Shop', id: '/shop' },
+    { name: 'Contact', id: '#contact' },
+  ];
+
+  const commonFooterColumns = [
+    { title: 'Quick Links', items: [{ label: 'Adopt', href: '#adopt' }, { label: 'Volunteer', href: '#team' }, { label: 'About Us', href: '/about' }, { label: 'FAQ', href: '#faq' }, { label: 'Blog', href: '/blog' }, { label: 'Shop', href: '/shop' }] },
+    { title: 'Get Involved', items: [{ label: 'Donate', href: '#donate' }, { label: 'Foster', href: '#foster' }, { label: 'Events', href: '#events' }] },
+    { title: 'Contact', items: [{ label: 'Email Us', href: 'mailto:info@pethaven.org' }, { label: 'Call Us', href: 'tel:+1234567890' }, { label: 'Location', href: '#location' }] },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="small"
+      sizing="mediumLargeSizeLargeTitles"
+      background="grid"
+      cardStyle="glass-depth"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={commonNavItems}
+            brandName="Pet Haven"
+            button={{ text: 'Donate', href: '#donate' }}
+            className="py-4 px-6 md:px-8 lg:px-12"
+            buttonClassName="px-5 py-2"
+            buttonTextClassName="text-lg font-semibold"
+          />
+        </div>
+
+        <main>
+          <div id="about-us-hero" data-section="about-us-hero">
+            <MediaSplitTabsAbout
+              title="About Pet Haven: Our Story & Values"
+              description="Dedicated to giving every animal a second chance, Pet Haven has been a beacon of hope for abandoned and neglected pets for over a decade. Discover our journey, our team, and what drives us."
+              tabs={[
+                { id: 'mission', label: 'Our Mission', description: 'At Pet Haven, our core mission is to rescue, rehabilitate, and rehome every animal in need. We provide comprehensive care, medical attention, and a loving temporary home for countless dogs, cats, and small animals. Our commitment extends to promoting responsible pet ownership and advocating for animal welfare in the community.' },
+                { id: 'vision', label: 'Our Vision', description: 'We envision a world where every companion animal lives a life free from neglect and cruelty, in a safe and loving home. Pet Haven strives to be a leading voice in animal advocacy, working towards a future where euthanasia of healthy, adoptable animals is a thing of the past, and every pet finds its perfect match.' },
+                { id: 'values', label: 'Our Values', description: 'Compassion, integrity, and dedication are the pillars of Pet Haven. We believe in treating every animal with kindness and respect, operating with transparency, and fostering a strong, supportive community of volunteers and adopters. Our work is driven by a deep love for animals and an unwavering commitment to their well-being.' },
+              ]}
+              imageSrc="https://img.b2bpic.net/free-photo/group-dogs-walking-park_23-2150339906.jpg"
+              imageAlt="A group of happy dogs walking in a park"
+              mediaAnimation="slide-up"
+              imagePosition="right"
+              useInvertedBackground={false}
+              className="py-16 md:py-24 lg:py-32"
+            />
+          </div>
+        </main>
+
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={commonFooterColumns}
+            bottomLeftText="© 2024 Pet Haven. All rights reserved."
+            bottomRightText="A home for every paw."
+            className="py-12 md:py-16 lg:py-20"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 8ac9a41..c92cb08 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -16,6 +16,22 @@ import FooterSimple from '@/components/sections/footer/FooterSimple';
 export default function BlogPage() {
     const { posts, isLoading } = useBlogPosts();
 
+    const commonNavItems = [
+        { name: 'Home', id: '/' },
+        { name: 'Adopt', id: '#adopt' },
+        { name: 'About', id: '/about' },
+        { name: 'Volunteer', id: '#team' },
+        { name: 'Blog', id: '/blog' },
+        { name: 'Shop', id: '/shop' },
+        { name: 'Contact', id: '#contact' },
+    ];
+
+    const commonFooterColumns = [
+        { title: 'Quick Links', items: [{ label: 'Adopt', href: '#adopt' }, { label: 'Volunteer', href: '#team' }, { label: 'About Us', href: '/about' }, { label: 'FAQ', href: '#faq' }, { label: 'Blog', href: '/blog' }, { label: 'Shop', href: '/shop' }] },
+        { title: 'Get Involved', items: [{ label: 'Donate', href: '#donate' }, { label: 'Foster', href: '#foster' }, { label: 'Events', href: '#events' }] },
+        { title: 'Contact', items: [{ label: 'Email Us', href: 'mailto:info@pethaven.org' }, { label: 'Call Us', href: 'tel:+1234567890' }, { label: 'Location', href: '#location' }] },
+    ];
+
     return (
         <ThemeProvider
             defaultButtonVariant="text-stagger"
@@ -31,13 +47,7 @@ export default function BlogPage() {
         >
             <ReactLenis root>
                 <NavbarLayoutFloatingInline
-                    navItems={[
-                        { name: "Home", id: "/" },
-                        { name: "Adopt", id: "adopt" },
-                        { name: "About", id: "about" },
-                        { name: "Volunteer", id: "volunteer" },
-                        { name: "Contact", id: "contact" },
-                    ]}
+                    navItems={commonNavItems}
                     brandName="Pet Haven"
                     button={{ text: "Donate", href: "#donate" }}
                     className="py-4 px-6 md:px-8 lg:px-12"
@@ -64,30 +74,7 @@ export default function BlogPage() {
                 </main>
 
                 <FooterSimple
-                    columns={[
-                        {
-                            title: "Quick Links",                            items: [
-                                { label: "Adopt", href: "#adopt" },
-                                { label: "Volunteer", href: "#volunteer" },
-                                { label: "About Us", href: "#about" },
-                                { label: "FAQ", href: "#faq" },
-                            ],
-                        },
-                        {
-                            title: "Get Involved",                            items: [
-                                { label: "Donate", href: "#donate" },
-                                { label: "Foster", href: "#foster" },
-                                { label: "Events", href: "#events" },
-                            ],
-                        },
-                        {
-                            title: "Contact",                            items: [
-                                { label: "Email Us", href: "mailto:info@pethaven.org" },
-                                { label: "Call Us", href: "tel:+1234567890" },
-                                { label: "Location", href: "#location" },
-                            ],
-                        },
-                    ]}
+                    columns={commonFooterColumns}
                     bottomLeftText="© 2024 Pet Haven. All rights reserved."
                     bottomRightText="A home for every paw."
                     className="py-12 md:py-16 lg:py-20"
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 58414e5..150a339 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -15,6 +15,22 @@ import FooterSimple from '@/components/sections/footer/FooterSimple';
 import { Cat, Dog, Heart, HeartHandshake, Home, PawPrint, Rabbit, Users } from 'lucide-react';
 
 export default function LandingPage() {
+  const commonNavItems = [
+    { name: 'Home', id: '/' },
+    { name: 'Adopt', id: '#adopt' },
+    { name: 'About', id: '/about' },
+    { name: 'Volunteer', id: '#team' },
+    { name: 'Blog', id: '/blog' },
+    { name: 'Shop', id: '/shop' },
+    { name: 'Contact', id: '#contact' },
+  ];
+
+  const commonFooterColumns = [
+    { title: 'Quick Links', items: [{ label: 'Adopt', href: '#adopt' }, { label: 'Volunteer', href: '#team' }, { label: 'About Us', href: '/about' }, { label: 'FAQ', href: '#faq' }, { label: 'Blog', href: '/blog' }, { label: 'Shop', href: '/shop' }] },
+    { title: 'Get Involved', items: [{ label: 'Donate', href: '#donate' }, { label: 'Foster', href: '#foster' }, { label: 'Events', href: '#events' }] },
+    { title: 'Contact', items: [{ label: 'Email Us', href: 'mailto:info@pethaven.org' }, { label: 'Call Us', href: 'tel:+1234567890' }, { label: 'Location', href: '#location' }] },
+  ];
+
   return (
     <ThemeProvider
       defaultButtonVariant="text-stagger"
@@ -30,7 +46,7 @@ export default function LandingPage() {
     >
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingInline
-          navItems={[{ name: 'Adopt', id: 'adopt' }, { name: 'About', id: 'about' }, { name: 'Volunteer', id: 'volunteer' }, { name: 'Contact', id: 'contact' }]}
+          navItems={commonNavItems}
           brandName="Pet Haven"
           button={{ text: 'Donate', href: '#donate' }}
           className="py-4 px-6 md:px-8 lg:px-12"
@@ -46,7 +62,7 @@ export default function LandingPage() {
           background={{ variant: 'radial-gradient' }}
           tag="Adopt, Don't Shop"
           tagIcon={PawPrint}
-          buttons={[{ text: 'View Adoptable Pets', href: '#adopt' }, { text: 'Learn More', href: '#about' }]}
+          buttons={[{ text: 'View Adoptable Pets', href: '#adopt' }, { text: 'Learn More', href: '/about' }]} 
           dashboard={{
             title: 'Meet Our Latest Arrivals',
             logoIcon: HeartHandshake,
@@ -201,11 +217,7 @@ export default function LandingPage() {
 
       <div id="footer" data-section="footer">
         <FooterSimple
-          columns={[
-            { title: 'Quick Links', items: [{ label: 'Adopt', href: '#adopt' }, { label: 'Volunteer', href: '#volunteer' }, { label: 'About Us', href: '#about' }, { label: 'FAQ', href: '#faq' }] },
-            { title: 'Get Involved', items: [{ label: 'Donate', href: '#donate' }, { label: 'Foster', href: '#foster' }, { label: 'Events', href: '#events' }] },
-            { title: 'Contact', items: [{ label: 'Email Us', href: 'mailto:info@pethaven.org' }, { label: 'Call Us', href: 'tel:+1234567890' }, { label: 'Location', href: '#location' }] },
-          ]}
+          columns={commonFooterColumns}
           bottomLeftText="© 2024 Pet Haven. All rights reserved."
           bottomRightText="A home for every paw."
           className="py-12 md:py-16 lg:py-20"
diff --git a/src/app/shop/[id]/page.tsx b/src/app/shop/[id]/page.tsx
index 024b8c6..6682be6 100644
--- a/src/app/shop/[id]/page.tsx
+++ b/src/app/shop/[id]/page.tsx
@@ -66,6 +66,22 @@ export default function ProductPage({ params }: ProductPageProps) {
         await checkout(getCheckoutItems(), { successUrl: currentUrl.toString() });
     }, [cartItems, checkout, getCheckoutItems]);
 
+    const commonNavItems = [
+        { name: 'Home', id: '/' },
+        { name: 'Adopt', id: '#adopt' },
+        { name: 'About', id: '/about' },
+        { name: 'Volunteer', id: '#team' },
+        { name: 'Blog', id: '/blog' },
+        { name: 'Shop', id: '/shop' },
+        { name: 'Contact', id: '#contact' },
+    ];
+
+    const commonFooterColumns = [
+        { title: 'Quick Links', items: [{ label: 'Adopt', href: '#adopt' }, { label: 'Volunteer', href: '#team' }, { label: 'About Us', href: '/about' }, { label: 'FAQ', href: '#faq' }, { label: 'Blog', href: '/blog' }, { label: 'Shop', href: '/shop' }] },
+        { title: 'Get Involved', items: [{ label: 'Donate', href: '#donate' }, { label: 'Foster', href: '#foster' }, { label: 'Events', href: '#events' }] },
+        { title: 'Contact', items: [{ label: 'Email Us', href: 'mailto:info@pethaven.org' }, { label: 'Call Us', href: 'tel:+1234567890' }, { label: 'Location', href: '#location' }] },
+    ];
+
     if (isLoading) {
         return (
             <ThemeProvider
@@ -83,12 +99,7 @@ export default function ProductPage({ params }: ProductPageProps) {
                 <ReactLenis root>
                     <div id="navbar" data-section="navbar">
                     <NavbarLayoutFloatingInline
-                        navItems={[
-                            { name: "Home", id: "/" },
-                            { name: "About", id: "/about" },
-                            { name: "Contact", id: "/contact" },
-                            { name: "Shop", id: "/shop" }
-                        ]}
+                        navItems={commonNavItems}
                         brandName="Pet Haven"
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         className="py-4 px-6 md:px-8 lg:px-12"
@@ -101,11 +112,7 @@ export default function ProductPage({ params }: ProductPageProps) {
                     </main>
                      <div id="footer" data-section="footer">
                         <FooterSimple
-                            columns={[
-                                { title: "Quick Links", items: [{ label: "Adopt", href: "#adopt" }, { label: "Volunteer", href: "#volunteer" }, { label: "About Us", href: "#about" }, { label: "FAQ", href: "#faq" }] },
-                                { title: "Get Involved", items: [{ label: "Donate", href: "#donate" }, { label: "Foster", href: "#foster" }, { label: "Events", href: "#events" }] },
-                                { title: "Contact", items: [{ label: "Email Us", href: "mailto:info@pethaven.org" }, { label: "Call Us", href: "tel:+1234567890" }, { label: "Location", href: "#location" }] }
-                            ]}
+                            columns={commonFooterColumns}
                             bottomLeftText="© 2024 Pet Haven. All rights reserved."
                             bottomRightText="A home for every paw."
                             className="py-12 md:py-16 lg:py-20"
@@ -133,12 +140,7 @@ export default function ProductPage({ params }: ProductPageProps) {
                 <ReactLenis root>
                     <div id="navbar" data-section="navbar">
                         <NavbarLayoutFloatingInline
-                             navItems={[
-                                { name: "Home", id: "/" },
-                                { name: "About", id: "/about" },
-                                { name: "Contact", id: "/contact" },
-                                { name: "Shop", id: "/shop" }
-                            ]}
+                             navItems={commonNavItems}
                             brandName="Pet Haven"
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                             className="py-4 px-6 md:px-8 lg:px-12"
@@ -159,11 +161,7 @@ export default function ProductPage({ params }: ProductPageProps) {
                     </main>
                      <div id="footer" data-section="footer">
                         <FooterSimple
-                            columns={[
-                                { title: "Quick Links", items: [{ label: "Adopt", href: "#adopt" }, { label: "Volunteer", href: "#volunteer" }, { label: "About Us", href: "#about" }, { label: "FAQ", href: "#faq" }] },
-                                { title: "Get Involved", items: [{ label: "Donate", href: "#donate" }, { label: "Foster", href: "#foster" }, { label: "Events", href: "#events" }] },
-                                { title: "Contact", items: [{ label: "Email Us", href: "mailto:info@pethaven.org" }, { label: "Call Us", href: "tel:+1234567890" }, { label: "Location", href: "#location" }] }
-                            ]}
+                            columns={commonFooterColumns}
                             bottomLeftText="© 2024 Pet Haven. All rights reserved."
                             bottomRightText="A home for every paw."
                             className="py-12 md:py-16 lg:py-20"
@@ -190,12 +188,7 @@ export default function ProductPage({ params }: ProductPageProps) {
             <ReactLenis root>
                 <div id="navbar" data-section="navbar">
                 <NavbarLayoutFloatingInline
-                     navItems={[
-                        { name: "Home", id: "/" },
-                        { name: "About", id: "/about" },
-                        { name: "Contact", id: "/contact" },
-                        { name: "Shop", id: "/shop" }
-                    ]}
+                     navItems={commonNavItems}
                     brandName="Pet Haven"
                     button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                     className="py-4 px-6 md:px-8 lg:px-12"
@@ -241,11 +234,7 @@ export default function ProductPage({ params }: ProductPageProps) {
                 </div>
                 <div id="footer" data-section="footer">
                     <FooterSimple
-                        columns={[
-                            { title: "Quick Links", items: [{ label: "Adopt", href: "#adopt" }, { label: "Volunteer", href: "#volunteer" }, { label: "About Us", href: "#about" }, { label: "FAQ", href: "#faq" }] },
-                            { title: "Get Involved", items: [{ label: "Donate", href: "#donate" }, { label: "Foster", href: "#foster" }, { label: "Events", href: "#events" }] },
-                            { title: "Contact", items: [{ label: "Email Us", href: "mailto:info@pethaven.org" }, { label: "Call Us", href: "tel:+1234567890" }, { label: "Location", href: "#location" }] }
-                        ]}
+                        columns={commonFooterColumns}
                         bottomLeftText="© 2024 Pet Haven. All rights reserved."
                         bottomRightText="A home for every paw."
                         className="py-12 md:py-16 lg:py-20"
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index 2485fbb..01a8fcf 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -16,6 +16,22 @@ export default function ShopPage() {
         filters,
     } = useProductCatalog({ basePath: "/shop" });
 
+    const commonNavItems = [
+        { name: 'Home', id: '/' },
+        { name: 'Adopt', id: '#adopt' },
+        { name: 'About', id: '/about' },
+        { name: 'Volunteer', id: '#team' },
+        { name: 'Blog', id: '/blog' },
+        { name: 'Shop', id: '/shop' },
+        { name: 'Contact', id: '#contact' },
+    ];
+
+    const commonFooterColumns = [
+        { title: 'Quick Links', items: [{ label: 'Adopt', href: '#adopt' }, { label: 'Volunteer', href: '#team' }, { label: 'About Us', href: '/about' }, { label: 'FAQ', href: '#faq' }, { label: 'Blog', href: '/blog' }, { label: 'Shop', href: '/shop' }] },
+        { title: 'Get Involved', items: [{ label: 'Donate', href: '#donate' }, { label: 'Foster', href: '#foster' }, { label: 'Events', href: '#events' }] },
+        { title: 'Contact', items: [{ label: 'Email Us', href: 'mailto:info@pethaven.org' }, { label: 'Call Us', href: 'tel:+1234567890' }, { label: 'Location', href: '#location' }] },
+    ];
+
     if (isLoading) {
         return (
             <ThemeProvider
@@ -33,12 +49,7 @@ export default function ShopPage() {
                 <ReactLenis root>
                     <div id="navbar" data-section="navbar">
                     <NavbarLayoutFloatingInline
-                        navItems={[
-                            { name: "Home", id: "/" },
-                            { name: "About", id: "/about" },
-                            { name: "Contact", id: "/contact" },
-                            { name: "Shop", id: "/shop" }
-                        ]}
+                        navItems={commonNavItems}
                         brandName="Pet Haven"
                         button={{ text: "Cart", onClick: () => console.log("Cart clicked") }}
                         className="py-4 px-6 md:px-8 lg:px-12"
@@ -51,11 +62,7 @@ export default function ShopPage() {
                     </main>
                     <div id="footer" data-section="footer">
                         <FooterSimple
-                            columns={[
-                                { title: "Quick Links", items: [{ label: "Adopt", href: "#adopt" }, { label: "Volunteer", href: "#volunteer" }, { label: "About Us", href: "#about" }, { label: "FAQ", href: "#faq" }] },
-                                { title: "Get Involved", items: [{ label: "Donate", href: "#donate" }, { label: "Foster", href: "#foster" }, { label: "Events", href: "#events" }] },
-                                { title: "Contact", items: [{ label: "Email Us", href: "mailto:info@pethaven.org" }, { label: "Call Us", href: "tel:+1234567890" }, { label: "Location", href: "#location" }] }
-                            ]}
+                            columns={commonFooterColumns}
                             bottomLeftText="© 2024 Pet Haven. All rights reserved."
                             bottomRightText="A home for every paw."
                             className="py-12 md:py-16 lg:py-20"
@@ -82,12 +89,7 @@ export default function ShopPage() {
             <ReactLenis root>
                 <div id="navbar" data-section="navbar">
                 <NavbarLayoutFloatingInline
-                    navItems={[
-                        { name: "Home", id: "/" },
-                        { name: "About", id: "/about" },
-                        { name: "Contact", id: "/contact" },
-                        { name: "Shop", id: "/shop" }
-                    ]}
+                    navItems={commonNavItems}
                     brandName="Pet Haven"
                     button={{ text: "Cart", onClick: () => console.log("Cart clicked") }}
                     className="py-4 px-6 md:px-8 lg:px-12"
@@ -108,11 +110,7 @@ export default function ShopPage() {
                 </div>
                 <div id="footer" data-section="footer">
                     <FooterSimple
-                        columns={[
-                            { title: "Quick Links", items: [{ label: "Adopt", href: "#adopt" }, { label: "Volunteer", href: "#volunteer" }, { label: "About Us", href: "#about" }, { label: "FAQ", href: "#faq" }] },
-                            { title: "Get Involved", items: [{ label: "Donate", href: "#donate" }, { label: "Foster", href: "#foster" }, { label: "Events", href: "#events" }] },
-                            { title: "Contact", items: [{ label: "Email Us", href: "mailto:info@pethaven.org" }, { label: "Call Us", href: "tel:+1234567890" }, { label: "Location", href: "#location" }] }
-                        ]}
+                        columns={commonFooterColumns}
                         bottomLeftText="© 2024 Pet Haven. All rights reserved."
                         bottomRightText="A home for every paw."
                         className="py-12 md:py-16 lg:py-20"