diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
new file mode 100644
index 0000000..bfc0850
--- /dev/null
+++ b/src/app/about/page.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import MediaAbout from "@/components/sections/about/MediaAbout";
+import FooterCard from "@/components/sections/footer/FooterCard";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { History } from "lucide-react";
+
+export default function AboutPage() {
+    const navItems = [
+        { name: "Home", id: "/" },
+        { name: "About", id: "/about" },
+        { name: "Contact", id: "/contact" },
+    ];
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="glass-elevated"
+            primaryButtonStyle="shadow"
+            secondaryButtonStyle="solid"
+            headingFontWeight="medium"
+        >
+            <ReactLenis root>
+                <NavbarLayoutFloatingInline
+                    navItems={navItems}
+                    brandName="St. Jerome"
+                    button={{ text: "Get Involved", href: "/contact" }}
+                />
+                <main className="pt-32">
+                    <MediaAbout
+                        title="Our History & Mission"
+                        description="Founded with a vision of community and spiritual growth, St. Jerome has been a pillar of the neighborhood for decades. We are dedicated to nurturing faith through tradition, sacraments, and active engagement with our local mission."
+                        tag="Faith in Action"
+                        tagIcon={History}
+                        imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CPYUJPeaDgYc4FSlAZFCKnMOqE/uploaded-1776289077687-hlsfoa09.jpg"
+                        imageAlt="Church History"
+                    />
+                </main>
+                <FooterCard
+                    logoText="St. Jerome"
+                    copyrightText="© 2025 St. Jerome Roman Catholic Church"
+                />
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}
\ No newline at end of file
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index b45d194..2261cd0 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,15 +1,16 @@
 "use client";
 
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
-import FooterBase from "@/components/sections/footer/FooterBase";
-import ReactLenis from "lenis/react";
+import FooterCard from "@/components/sections/footer/FooterCard";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { MapPin } from "lucide-react";
 
 export default function ContactPage() {
     const navItems = [
         { name: "Home", id: "/" },
-        { name: "Giving", id: "/giving" },
+        { name: "About", id: "/about" },
         { name: "Contact", id: "/contact" },
     ];
 
@@ -27,18 +28,24 @@ export default function ContactPage() {
             headingFontWeight="medium"
         >
             <ReactLenis root>
-                <NavbarLayoutFloatingInline navItems={navItems} button={{ text: "Book", href: "/contact" }} />
-                <ContactCTA
-                    tag="Contact Us"
-                    title="Get in touch with us"
-                    description="We are here to answer your questions and provide support."
-                    buttons={[{ text: "Contact", href: "/contact" }]}
-                    background={{ variant: "plain" }}
-                    useInvertedBackground={false}
+                <NavbarLayoutFloatingInline
+                    navItems={navItems}
+                    brandName="St. Jerome"
+                    button={{ text: "Get Involved", href: "/contact" }}
                 />
-                <FooterBase
-                    logoText="Coach"
-                    columns={[{ title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Giving", href: "/giving" }, { label: "Contact", href: "/contact" }] }]}
+                <main className="pt-32">
+                    <ContactCTA
+                        title="Contact Information"
+                        description="We are located in the heart of our community. Feel free to visit, reach out via phone, or send us a message through our parish office. We look forward to welcoming you."
+                        tag="Visit Us"
+                        tagIcon={MapPin}
+                        buttons={[{ text: "Call Parish Office", href: "tel:+1234567890" }]}
+                        background={{ variant: "radial-gradient" }}
+                    />
+                </main>
+                <FooterCard
+                    logoText="St. Jerome"
+                    copyrightText="© 2025 St. Jerome Roman Catholic Church"
                 />
             </ReactLenis>
         </ThemeProvider>
diff --git a/src/app/mass-schedule/page.tsx b/src/app/mass-schedule/page.tsx
new file mode 100644
index 0000000..d5857e5
--- /dev/null
+++ b/src/app/mass-schedule/page.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+
+export default function MassSchedulePage() {
+    const navItems = [
+        { name: "Home", id: "/" },
+        { name: "Mass Schedule", id: "/mass-schedule" },
+        { name: "Sacraments", id: "/sacraments" },
+        { name: "Staff", id: "/staff" },
+        { name: "Giving", id: "/giving" },
+        { name: "Contact", id: "/contact" },
+    ];
+
+    return (
+        <ThemeProvider>
+            <ReactLenis root>
+                <NavbarLayoutFloatingInline navItems={navItems} brandName="Coach" button={{ text: "Book a Call", href: "/contact" }} />
+                <main className="pt-32 min-h-screen px-4">
+                    <h1 className="text-4xl font-bold text-center mb-8">Mass Schedule</h1>
+                </main>
+                <FooterBase logoText="Coach" columns={[{ title: "Navigation", items: navItems.map(i => ({ label: i.name, href: i.id })) }]} />
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7fbf967..c2b4e0d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,13 +2,14 @@
 
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import FooterBase from "@/components/sections/footer/FooterBase";
+import FooterMedia from "@/components/sections/footer/FooterMedia";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
 
-export default function BusinessCoachTemplatePage() {
+export default function SaintJeromePage() {
     const navItems = [
         { name: "Home", id: "/" },
-        { name: "About", id: "about" },
+        { name: "About", id: "/about" },
         { name: "Giving", id: "/giving" },
         { name: "Contact", id: "/contact" },
     ];
@@ -29,18 +30,29 @@ export default function BusinessCoachTemplatePage() {
             <ReactLenis root>
                 <NavbarLayoutFloatingInline
                     navItems={navItems}
-                    brandName="Coach"
-                    button={{ text: "Book a Call", href: "/contact" }}
+                    brandName="Saint Jerome"
+                    button={{ text: "Giving", href: "/giving" }}
+                    logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CPYUJPeaDgYc4FSlAZFCKnMOqE/uploaded-1776289077688-pmeewk62.jpg"
                 />
-                <main className="pt-32">
-                    <h1 className="text-center text-4xl">Welcome to Coach</h1>
+                <main>
+                    <HeroBillboardCarousel 
+                        title="Welcome to Saint Jerome Parish"
+                        description="A community of faith, service, and devotion."
+                        background={{ variant: "sparkles-gradient" }}
+                        mediaItems={[
+                            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CPYUJPeaDgYc4FSlAZFCKnMOqE/uploaded-1776289077687-hlsfoa09.jpg" },
+                            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CPYUJPeaDgYc4FSlAZFCKnMOqE/uploaded-1776289077687-ufy51wxw.jpg" }
+                        ]}
+                    />
                 </main>
-                <FooterBase
-                    logoText="Coach"
+                <FooterMedia
+                    logoText="Saint Jerome Parish"
+                    imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CPYUJPeaDgYc4FSlAZFCKnMOqE/uploaded-1776289077688-pmeewk62.jpg"
                     columns={[
                         {
-                            title: "Navigation",                            items: [
+                            title: "Menu",                            items: [
                                 { label: "Home", href: "/" },
+                                { label: "About", href: "/about" },
                                 { label: "Giving", href: "/giving" },
                                 { label: "Contact", href: "/contact" },
                             ],
diff --git a/src/app/sacraments/page.tsx b/src/app/sacraments/page.tsx
index f1de22e..1789da4 100644
--- a/src/app/sacraments/page.tsx
+++ b/src/app/sacraments/page.tsx
@@ -2,25 +2,27 @@
 
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import FooterBase from "@/components/sections/footer/FooterBase";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 
 export default function SacramentsPage() {
     const navItems = [
         { name: "Home", id: "/" },
-        { name: "Mass Times", id: "/mass-times" },
+        { name: "Mass Schedule", id: "/mass-schedule" },
         { name: "Sacraments", id: "/sacraments" },
+        { name: "Staff", id: "/staff" },
+        { name: "Giving", id: "/giving" },
+        { name: "Contact", id: "/contact" },
     ];
 
     return (
-        <ThemeProvider defaultButtonVariant="icon-arrow" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="none" cardStyle="glass-elevated" primaryButtonStyle="shadow" secondaryButtonStyle="solid" headingFontWeight="medium">
+        <ThemeProvider>
             <ReactLenis root>
-                <NavbarLayoutFloatingInline navItems={navItems} button={{ text: "Contact", href: "/contact" }} />
-                <div className="pt-32 pb-20 px-6 max-w-4xl mx-auto">
-                    <h1 className="text-4xl font-bold mb-8">Sacraments</h1>
-                    <p>The seven sacraments are the life of our Church.</p>
-                </div>
-                <FooterBase logoText="Coach" columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} />
+                <NavbarLayoutFloatingInline navItems={navItems} brandName="Coach" button={{ text: "Book a Call", href: "/contact" }} />
+                <main className="pt-32 min-h-screen px-4">
+                    <h1 className="text-4xl font-bold text-center mb-8">Sacraments</h1>
+                </main>
+                <FooterBase logoText="Coach" columns={[{ title: "Navigation", items: navItems.map(i => ({ label: i.name, href: i.id })) }]} />
             </ReactLenis>
         </ThemeProvider>
     );
diff --git a/src/app/staff/page.tsx b/src/app/staff/page.tsx
new file mode 100644
index 0000000..58a67bf
--- /dev/null
+++ b/src/app/staff/page.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+
+export default function StaffPage() {
+    const navItems = [
+        { name: "Home", id: "/" },
+        { name: "Mass Schedule", id: "/mass-schedule" },
+        { name: "Sacraments", id: "/sacraments" },
+        { name: "Staff", id: "/staff" },
+        { name: "Giving", id: "/giving" },
+        { name: "Contact", id: "/contact" },
+    ];
+
+    return (
+        <ThemeProvider>
+            <ReactLenis root>
+                <NavbarLayoutFloatingInline navItems={navItems} brandName="Coach" button={{ text: "Book a Call", href: "/contact" }} />
+                <main className="pt-32 min-h-screen px-4">
+                    <h1 className="text-4xl font-bold text-center mb-8">Our Staff</h1>
+                </main>
+                <FooterBase logoText="Coach" columns={[{ title: "Navigation", items: navItems.map(i => ({ label: i.name, href: i.id })) }]} />
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}
\ No newline at end of file