diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 74d41cc..d4b8591 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -3,6 +3,7 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import { useBlogPosts } from "@/hooks/useBlogPosts";
 
 export default function BlogPage() {
@@ -21,21 +22,18 @@ export default function BlogPage() {
             secondaryButtonStyle="solid"
             headingFontWeight="medium"
         >
-            <NavbarStyleFullscreen
-                navItems={[
-                    { name: "Home", id: "/" },
-                    { name: "Hero", id: "hero-section" },
-                    { name: "About", id: "about-section" },
-                    { name: "Feature", id: "features-section" },
-                    { name: "Product", id: "product-section" },
-                    { name: "Testimonial", id: "testimonial-section" },
-                    { name: "Contact", id: "contact-section" },
-                ]}
-                brandName="Bakterial"
-                bottomLeftText="Global Community"
-                bottomRightText="hello@example.com"
-                topBarClassName=""
-            />
+            <div id="nav" data-section="nav">
+                <NavbarStyleFullscreen
+                    navItems={[
+                        { name: "Home", id: "/" },
+                        { name: "Blog", id: "/blog" }
+                    ]}
+                    brandName="Bakterial"
+                    bottomLeftText="Global Community"
+                    bottomRightText="hello@example.com"
+                    topBarClassName=""
+                />
+            </div>
 
             <main>
                 {isLoading ? (
@@ -56,6 +54,18 @@ export default function BlogPage() {
                 )}
             </main>
 
+            <div id="footer-section" data-section="footer-section">
+                <FooterBaseCard 
+                    logoText="Bakterial"
+                    columns={[
+                        { title: 'Explore', items: [{ label: 'Our Coffee', href: '/#product-section' }, { label: 'About Us', href: '/#about-section' }, { label: 'Features', href: '/#features-section' }, { label: 'Testimonials', href: '/#testimonial-section' }] },
+                        { title: 'Support', items: [{ label: 'Contact Us', href: '/#contact-section' }, { label: 'FAQs', href: '/#contact-section' }, { label: 'Location', href: '/#contact-section' }] },
+                        { title: 'Connect', items: [{ label: 'Instagram', href: '#' }, { label: 'Facebook', href: '#' }, { label: 'Twitter', href: '#' }] }
+                    ]}
+                    copyrightText="© 2025 Bakterial Coffee Co. | All rights reserved."
+                    ariaLabel="Site footer"
+                />
+            </div>
         </ThemeProvider>
     );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9295769..7b0d622 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -27,7 +27,7 @@ export default function LandingPage() {
     >
       <div id="nav" data-section="nav">
         <NavbarStyleFullscreen 
-          navItems={[{'name': 'Hero', 'id': 'hero-section'}, {'name': 'About', 'id': 'about-section'}, {'name': 'Feature', 'id': 'features-section'}, {'name': 'Product', 'id': 'product-section'}, {'name': 'Testimonial', 'id': 'testimonial-section'}, {'name': 'Contact', 'id': 'contact-section'}]}
+          navItems={[{name: 'Hero', id: 'hero-section'}, {name: 'About', id: 'about-section'}, {name: 'Feature', id: 'features-section'}, {name: 'Product', id: 'product-section'}, {name: 'Testimonial', id: 'testimonial-section'}, {name: 'Contact', id: 'contact-section'}]}
           brandName="Bakterial"
           bottomLeftText="Global Community"
           bottomRightText="hello@example.com"
@@ -42,14 +42,14 @@ export default function LandingPage() {
           tag="Premium Roasts"
           tagIcon={Sparkles}
           tagAnimation="slide-up"
-          buttons={[{'text': 'Explore Our Menu', 'href': '#product-section'}, {'text': 'Visit Us', 'href': '#contact-section'}]}
+          buttons={[{text: 'Explore Our Menu', href: '#product-section'}, {text: 'Visit Us', href: '#contact-section'}]}
           buttonAnimation="slide-up"
           mediaItems={[
-            { imageSrc: 'https://img.b2bpic.net/free-photo/confident-young-indian-man-black-shirt-standing-cafe_627829-5462.jpg?_wi=1', imageAlt: 'Artisan coffee being poured into a ceramic cup' },
-            { imageSrc: 'https://img.b2bpic.net/free-photo/confident-young-indian-man-black-shirt-standing-cafe_627829-5462.jpg?_wi=2', imageAlt: 'A delicious cup of artisan coffee' },
-            { imageSrc: 'https://img.b2bpic.net/free-photo/confident-young-indian-man-black-shirt-standing-cafe_627829-5462.jpg?_wi=3', imageAlt: 'The art of coffee making' },
-            { imageSrc: 'https://img.b2bpic.net/free-photo/confident-young-indian-man-black-shirt-standing-cafe_627829-5462.jpg?_wi=4', imageAlt: 'Premium roasted coffee' },
-            { imageSrc: 'https://img.b2bpic.net/free-photo/confident-young-indian-man-black-shirt-standing-cafe_627829-5462.jpg?_wi=5', imageAlt: 'A warm and inviting coffee shop scene' }
+            { imageSrc: 'https://img.b2bpic.net/free-photo/confident-young-indian-man-black-shirt-standing-cafe_627829-5462.jpg', imageAlt: 'Artisan coffee being poured into a ceramic cup' },
+            { imageSrc: 'https://img.b2bpic.net/free-photo/confident-young-indian-man-black-shirt-standing-cafe_627829-5462.jpg', imageAlt: 'A delicious cup of artisan coffee' },
+            { imageSrc: 'https://img.b2bpic.net/free-photo/confident-young-indian-man-black-shirt-standing-cafe_627829-5462.jpg', imageAlt: 'The art of coffee making' },
+            { imageSrc: 'https://img.b2bpic.net/free-photo/confident-young-indian-man-black-shirt-standing-cafe_627829-5462.jpg', imageAlt: 'Premium roasted coffee' },
+            { imageSrc: 'https://img.b2bpic.net/free-photo/confident-young-indian-man-black-shirt-standing-cafe_627829-5462.jpg', imageAlt: 'A warm and inviting coffee shop scene' }
           ]}
           ariaLabel="Hero section showcasing Bakterial's premium coffee experience"
           className="bg-warmgray-50"
@@ -67,7 +67,7 @@ export default function LandingPage() {
       <div id="about-section" data-section="about-section">
         <InlineImageSplitTextAbout 
           heading={[{ type: 'text', content: 'Our Story' }, { type: 'image', src: 'https://img.b2bpic.net/free-photo/cup-coffee-with-coffee-grinder-sunny-day_1112-444.jpg', alt: 'Freshly roasted coffee beans' }, { type: 'text', content: 'Bakterial was born from a passion for exceptional coffee and a desire to create a welcoming space where every cup tells a story. We source our beans directly from sustainable farms, ensuring each brew is crafted with care and precision.' }]}
-          buttons={[{'text': 'Discover Our Process', 'href': '#features-section', 'props': {'variant': 'primary'}}, {'text': 'Visit Us', 'href': '#contact-section', 'props': {'variant': 'secondary'}}]}
+          buttons={[{text: 'Discover Our Process', href: '#features-section'}, {text: 'Visit Us', href: '#contact-section'}]}
           buttonAnimation="slide-up"
           useInvertedBackground={true}
         />
@@ -85,7 +85,7 @@ export default function LandingPage() {
           tag="Premium Coffee Experience"
           tagIcon={Sparkles}
           tagAnimation="slide-up"
-          buttons={[{'text': 'Explore Our Menu', 'href': '#product-section'}]}
+          buttons={[{text: 'Explore Our Menu', href: '#product-section'}]}
           buttonAnimation="slide-up"
           animationType="slide-up"
           textboxLayout="default"
@@ -108,7 +108,7 @@ export default function LandingPage() {
           tag="Best Sellers"
           tagIcon={Star}
           tagAnimation="slide-up"
-          buttons={[{'text': 'View Full Menu', 'href': '#features-section'}]}
+          buttons={[{text: 'View Full Menu', href: '#features-section'}]}
           buttonAnimation="opacity"
           textboxLayout="inline-image"
           useInvertedBackground={true}
diff --git a/src/app/shop/[id]/page.tsx b/src/app/shop/[id]/page.tsx
index ef6bc97..c20e77b 100644
--- a/src/app/shop/[id]/page.tsx
+++ b/src/app/shop/[id]/page.tsx
@@ -7,6 +7,7 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard";
 import ProductCart from "@/components/ecommerce/cart/ProductCart";
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import { useProductDetail } from "@/hooks/useProductDetail";
 import { useCart } from "@/hooks/useCart";
 import { useCheckout } from "@/hooks/useCheckout";
@@ -23,6 +24,15 @@ export default function ProductPage({ params }: ProductPageProps) {
     );
 }
 
+const footerProps = {
+    logoText: "Bakterial",    columns: [
+        { title: 'Explore', items: [{ label: 'Our Coffee', href: '/#product-section' }, { label: 'About Us', href: '/#about-section' }, { label: 'Features', href: '/#features-section' }, { label: 'Testimonials', href: '/#testimonial-section' }] },
+        { title: 'Support', items: [{ label: 'Contact Us', href: '/#contact-section' }, { label: 'FAQs', href: '/#contact-section' }, { label: 'Location', href: '/#contact-section' }] },
+        { title: 'Connect', items: [{ label: 'Instagram', href: '#' }, { label: 'Facebook', href: '#' }, { label: 'Twitter', href: '#' }] }
+    ],
+    copyrightText: "© 2025 Bakterial Coffee Co. | All rights reserved.",    ariaLabel: "Site footer"
+};
+
 function ProductPageContent({ params }: ProductPageProps) {
     const { id } = use(params);
     const router = useRouter();
@@ -74,8 +84,11 @@ function ProductPageContent({ params }: ProductPageProps) {
     }, [cartItems, checkout, getCheckoutItems]);
     
     const navbarProps = {
-        navItems: [{ "name": "Home", "id": "/" }, { "name": "Shop", "id": "/shop" }],
-        brandName: "Bakterial",        bottomLeftText: "Global Community",        bottomRightText: "hello@example.com",        topBarClassName: ""
+        navItems: [{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }],
+        brandName: "Bakterial",        
+        bottomLeftText: "Global Community",        
+        bottomRightText: "hello@example.com",        
+        topBarClassName: ""
     };
 
     if (isLoading) {
@@ -93,7 +106,7 @@ function ProductPageContent({ params }: ProductPageProps) {
                 headingFontWeight="medium"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarStyleFullscreen
                             {...navbarProps}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
@@ -102,6 +115,9 @@ function ProductPageContent({ params }: ProductPageProps) {
                     <main className="min-h-screen flex items-center justify-center pt-20">
                         <p className="text-foreground">Loading product...</p>
                     </main>
+                    <div id="footer-section" data-section="footer-section">
+                        <FooterBaseCard {...footerProps} />
+                    </div>
                 </ReactLenis>
             </ThemeProvider>
         );
@@ -122,7 +138,7 @@ function ProductPageContent({ params }: ProductPageProps) {
                 headingFontWeight="medium"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarStyleFullscreen
                             {...navbarProps}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
@@ -139,6 +155,9 @@ function ProductPageContent({ params }: ProductPageProps) {
                             </button>
                         </div>
                     </main>
+                    <div id="footer-section" data-section="footer-section">
+                        <FooterBaseCard {...footerProps} />
+                    </div>
                 </ReactLenis>
             </ThemeProvider>
         );
@@ -158,7 +177,7 @@ function ProductPageContent({ params }: ProductPageProps) {
             headingFontWeight="medium"
         >
             <ReactLenis root>
-                <div id="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                     <NavbarStyleFullscreen
                         {...navbarProps}
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
@@ -200,6 +219,9 @@ function ProductPageContent({ params }: ProductPageProps) {
                         ]}
                     />
                 </div>
+                <div id="footer-section" data-section="footer-section">
+                    <FooterBaseCard {...footerProps} />
+                </div>
             </ReactLenis>
         </ThemeProvider>
     );
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index 4396a97..9dee46f 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -6,10 +6,20 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
 import ProductCart from "@/components/ecommerce/cart/ProductCart";
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import { useProductCatalog } from "@/hooks/useProductCatalog";
 import { useCart } from "@/hooks/useCart";
 import { useCheckout } from "@/hooks/useCheckout";
 
+const footerProps = {
+    logoText: "Bakterial",    columns: [
+        { title: 'Explore', items: [{ label: 'Our Coffee', href: '/#product-section' }, { label: 'About Us', href: '/#about-section' }, { label: 'Features', href: '/#features-section' }, { label: 'Testimonials', href: '/#testimonial-section' }] },
+        { title: 'Support', items: [{ label: 'Contact Us', href: '/#contact-section' }, { label: 'FAQs', href: '/#contact-section' }, { label: 'Location', href: '/#contact-section' }] },
+        { title: 'Connect', items: [{ label: 'Instagram', href: '#' }, { label: 'Facebook', href: '#' }, { label: 'Twitter', href: '#' }] }
+    ],
+    copyrightText: "© 2025 Bakterial Coffee Co. | All rights reserved.",    ariaLabel: "Site footer"
+};
+
 function ShopPageContent() {
     const {
         products,
@@ -41,8 +51,11 @@ function ShopPageContent() {
     }, [cartItems, checkout, getCheckoutItems]);
 
     const navbarProps = {
-        navItems: [{ "name": "Home", "id": "/" }, { "name": "Shop", "id": "/shop" }],
-        brandName: "Bakterial",        bottomLeftText: "Global Community",        bottomRightText: "hello@example.com",        topBarClassName: ""
+        navItems: [{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }],
+        brandName: "Bakterial",        
+        bottomLeftText: "Global Community",        
+        bottomRightText: "hello@example.com",        
+        topBarClassName: ""
     };
 
     if (isLoading) {
@@ -60,7 +73,7 @@ function ShopPageContent() {
                 headingFontWeight="medium"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarStyleFullscreen
                             {...navbarProps}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
@@ -84,6 +97,9 @@ function ShopPageContent() {
                             ]}
                         />
                     </div>
+                    <div id="footer-section" data-section="footer-section">
+                        <FooterBaseCard {...footerProps} />
+                    </div>
                 </ReactLenis>
             </ThemeProvider>
         );
@@ -103,7 +119,7 @@ function ShopPageContent() {
             headingFontWeight="medium"
         >
             <ReactLenis root>
-                <div id="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                     <NavbarStyleFullscreen
                         {...navbarProps}
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
@@ -135,6 +151,9 @@ function ShopPageContent() {
                         ]}
                     />
                 </div>
+                <div id="footer-section" data-section="footer-section">
+                    <FooterBaseCard {...footerProps} />
+                </div>
             </ReactLenis>
         </ThemeProvider>
     );