diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 76f5309..675b8a4 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -30,6 +30,7 @@ export default function BlogPage() {
                         navItems={[
                             { name: "Home", id: "/" },
                             { name: "Blog", id: "/blog" },
+                            { name: "Shop", id: "/shop" },
                             { name: "Contact", id: "/contact" }
                         ]}
                         button={{ text: "Shop Now", href: "/shop" }}
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 50592e4..4935065 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -3,9 +3,8 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import ContactCenter from '@/components/sections/contact/ContactCenter';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import { Mail } from 'lucide-react';
 
 export default function ContactPage() {
   return (
@@ -28,6 +27,7 @@ export default function ContactPage() {
             navItems={[
               { name: "Home", id: "/" },
               { name: "Blog", id: "/blog" },
+              { name: "Shop", id: "/shop" },
               { name: "Contact", id: "/contact" }
             ]}
             button={{ text: "Shop Now", href: "/shop" }}
@@ -39,29 +39,28 @@ export default function ContactPage() {
         </div>
 
         <div id="contact-main" data-section="contact-main">
-          <ContactCenter
-            tag="Get in Touch"
+          <ContactSplitForm
             title="We'd love to hear from you."
             description="Whether you have a custom order request, an event inquiry, or just want to say hello, our team is ready to assist you."
-            tagIcon={Mail}
-            inputPlaceholder="Your email address"
-            buttonText="Send Message"
-            termsText="By sending a message you're confirming that you agree with our Privacy Policy."
-            onSubmit={(email) => console.log("Contact form submitted with email:", email)}
-            background={{ variant: "plain" }}
+            inputs={[
+              { name: 'name', type: 'text', placeholder: 'Name', required: true },
+              { name: 'email', type: 'email', placeholder: 'Email', required: true },
+            ]}
+            textarea={{ name: 'message', placeholder: 'Type your message...', rows: 5, required: true }}
             useInvertedBackground={false}
+            imageSrc="https://img.b2bpic.net/free-photo/caucasian-florist-woman-inside-flower-shop_53876-26300.jpg"
+            mediaAnimation="slide-up"
+            mediaPosition="right"
+            buttonText="Send Message"
+            onSubmit={(data) => console.log("Contact form submitted with data:", data)}
+            ariaLabel="Contact section"
             className="py-16 md:py-24"
-            containerClassName="max-w-screen-md mx-auto px-6 md:px-8"
-            contentClassName="bg-card rounded-soft shadow-lg p-8"
-            tagClassName="text-primary-cta text-sm font-semibold uppercase tracking-wider"
+            containerClassName="max-w-screen-xl mx-auto px-6 md:px-8"
+            formCardClassName="bg-card rounded-soft shadow-lg p-8"
             titleClassName="text-foreground text-4xl md:text-5xl font-bold mb-4"
             descriptionClassName="text-foreground/80 text-lg md:text-xl mb-8"
-            formWrapperClassName="mt-8"
-            formClassName="flex flex-col gap-4"
-            inputClassName="bg-background-accent/30 border border-border-color focus:border-primary-cta focus:ring-1 focus:ring-primary-cta transition-colors duration-200 rounded-md p-3"
             buttonClassName="primary-button px-6 py-3"
             buttonTextClassName="font-semibold"
-            termsClassName="text-foreground/60 text-sm mt-4"
           />
         </div>
 
diff --git a/src/app/page.tsx b/src/app/page.tsx
index cea5fab..a7a37e6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -30,6 +30,7 @@ export default function LandingPage() {
           navItems={[
             { name: "Home", id: "/" },
             { name: "Blog", id: "/blog" },
+            { name: "Shop", id: "/shop" },
             { name: "Contact", id: "/contact" }
           ]}
           button={{ text: "Shop Now", href: "/shop" }}
@@ -184,7 +185,7 @@ export default function LandingPage() {
         <FooterBaseCard
           logoText="Balka Flowers"
           columns={[
-            { title: "Shop", items: [{ label: "Bouquets", href: "#products" }, { label: "Events", href: "/contact" }, { label: "Custom Orders", href: "/contact" }] },
+            { title: "Shop", items: [{ label: "Bouquets", href: "/shop" }, { label: "Events", href: "/contact" }, { label: "Custom Orders", href: "/contact" }] },
             { title: "Company", items: [{ label: "About Us", href: "/#about" }, { label: "Testimonials", href: "/#testimonials" }, { label: "Blog", href: "/blog" }] },
             { title: "Support", items: [{ label: "FAQ", href: "/contact" }, { label: "Contact", href: "/contact" }] },
           ]}
diff --git a/src/app/shop/[id]/page.tsx b/src/app/shop/[id]/page.tsx
index 9b65ffb..985f8c5 100644
--- a/src/app/shop/[id]/page.tsx
+++ b/src/app/shop/[id]/page.tsx
@@ -92,7 +92,7 @@ function ProductPageContent({ params }: ProductPageProps) {
                     <div id="navbar" data-section="navbar">
                         <NavbarLayoutFloatingInline
                            brandName="Balka Flowers"
-                           navItems={[{ name: "Home", id: "/" }, { name: "Blog", id: "/blog" }, { name: "Shop", id: "/shop" }, { name: "Contact", id: "/contact" }]} 
+                           navItems={[{ name: "Home", id: "/" }, { name: "Blog", id: "/blog" }, { name: "Shop", id: "/shop" }, { name: "Contact", id: "/contact" }]}} 
                            className="py-4 px-6 md:px-8"
                            navItemClassName="text-foreground hover:text-primary-cta transition-colors"
                            buttonClassName="px-5 py-2"
@@ -126,7 +126,7 @@ function ProductPageContent({ params }: ProductPageProps) {
                     <div id="navbar" data-section="navbar">
                         <NavbarLayoutFloatingInline
                            brandName="Balka Flowers"
-                           navItems={[{ name: "Home", id: "/" }, { name: "Blog", id: "/blog" }, { name: "Shop", id: "/shop" }, { name: "Contact", id: "/contact" }]} 
+                           navItems={[{ name: "Home", id: "/" }, { name: "Blog", id: "/blog" }, { name: "Shop", id: "/shop" }, { name: "Contact", id: "/contact" }]}} 
                            className="py-4 px-6 md:px-8"
                            navItemClassName="text-foreground hover:text-primary-cta transition-colors"
                            buttonClassName="px-5 py-2"
@@ -167,7 +167,7 @@ function ProductPageContent({ params }: ProductPageProps) {
                 <div id="navbar" data-section="navbar">
                     <NavbarLayoutFloatingInline
                         brandName="Balka Flowers"
-                        navItems={[{ name: "Home", id: "/" }, { name: "Blog", id: "/blog" }, { name: "Shop", id: "/shop" }, { name: "Contact", id: "/contact" }]} 
+                        navItems={[{ name: "Home", id: "/" }, { name: "Blog", id: "/blog" }, { name: "Shop", id: "/shop" }, { name: "Contact", id: "/contact" }]}} 
                         className="py-4 px-6 md:px-8"
                         navItemClassName="text-foreground hover:text-primary-cta transition-colors"
                         buttonClassName="px-5 py-2"
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index 79b23ba..7bd7800 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -59,7 +59,7 @@ function ShopPageContent() {
                     <div id="navbar" data-section="navbar">
                         <NavbarLayoutFloatingInline
                             brandName="Balka Flowers"
-                            navItems={[{ name: "Home", id: "/" }, { name: "Blog", id: "/blog" }, { name: "Shop", id: "/shop" }, { name: "Contact", id: "/contact" }]} 
+                            navItems={[{ name: "Home", id: "/" }, { name: "Blog", id: "/blog" }, { name: "Shop", id: "/shop" }, { name: "Contact", id: "/contact" }]}} 
                             className="py-4 px-6 md:px-8"
                             navItemClassName="text-foreground hover:text-primary-cta transition-colors"
                             buttonClassName="px-5 py-2"
@@ -92,7 +92,7 @@ function ShopPageContent() {
                 <div id="navbar" data-section="navbar">
                     <NavbarLayoutFloatingInline
                         brandName="Balka Flowers"
-                        navItems={[{ name: "Home", id: "/" }, { name: "Blog", id: "/blog" }, { name: "Shop", id: "/shop" }, { name: "Contact", id: "/contact" }]} 
+                        navItems={[{ name: "Home", id: "/" }, { name: "Blog", id: "/blog" }, { name: "Shop", id: "/shop" }, { name: "Contact", id: "/contact" }]}} 
                         className="py-4 px-6 md:px-8"
                         navItemClassName="text-foreground hover:text-primary-cta transition-colors"
                         buttonClassName="px-5 py-2"