diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index accfdeb..76f5309 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: "Contact", id: "/contact" }
                         ]}
                         button={{ text: "Shop Now", href: "/shop" }}
                         className="py-4 px-6 md:px-8"
@@ -64,21 +65,20 @@ export default function BlogPage() {
                                 {
                                     title: "Shop",                                    items: [
                                         { label: "Bouquets", href: "/shop" },
-                                        { label: "Events", href: "/#contact" },
-                                        { label: "Custom Orders", href: "/#contact" },
+                                        { 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" },
+                                        { label: "Testimonials", href: "/#testimonials" },                                        { label: "Blog", href: "/blog" },
                                     ],
                                 },
                                 {
                                     title: "Support",                                    items: [
-                                        { label: "FAQ", href: "/#contact" },
-                                        { label: "Contact", href: "/#contact" },
+                                        { label: "FAQ", href: "/contact" },
+                                        { label: "Contact", href: "/contact" },
                                     ],
                                 },
                             ]}
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
new file mode 100644
index 0000000..50592e4
--- /dev/null
+++ b/src/app/contact/page.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+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 FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Mail } from 'lucide-react';
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="compact"
+      sizing="largeSmallSizeLargeTitles"
+      background="blurBottom"
+      cardStyle="glass-depth"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            brandName="Balka Flowers"
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Blog", id: "/blog" },
+              { name: "Contact", id: "/contact" }
+            ]}
+            button={{ text: "Shop Now", href: "/shop" }}
+            className="py-4 px-6 md:px-8"
+            navItemClassName="text-foreground hover:text-primary-cta transition-colors"
+            buttonClassName="px-5 py-2"
+            buttonTextClassName="font-semibold"
+          />
+        </div>
+
+        <div id="contact-main" data-section="contact-main">
+          <ContactCenter
+            tag="Get in Touch"
+            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" }}
+            useInvertedBackground={false}
+            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"
+            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>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="Balka Flowers"
+            columns={[
+              { 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" }] },
+            ]}
+            copyrightText="© 2024 Balka Flowers. All rights reserved."
+            className="py-16 md:py-24"
+            cardClassName="bg-card rounded-soft shadow-lg"
+            logoTextClassName="text-foreground text-4xl font-bold"
+            columnTitleClassName="text-foreground text-xl font-semibold"
+            columnItemClassName="text-foreground/70 hover:text-primary-cta transition-colors"
+            copyrightTextClassName="text-foreground/50 text-sm"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8bc508b..cea5fab 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: "Contact", id: "/contact" }
           ]}
           button={{ text: "Shop Now", href: "/shop" }}
           className="py-4 px-6 md:px-8"
@@ -48,7 +49,7 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           buttons={[
             { text: "Explore Collections", href: "#products" },
-            { text: "Contact Us", href: "#contact" },
+            { text: "Contact Us", href: "/contact" },
           ]}
           buttonAnimation="slide-up"
           mediaItems={[
@@ -78,7 +79,7 @@ export default function LandingPage() {
             "At Balka, we believe in the power of flowers to transform spaces and convey emotions. Our studio is dedicated to sourcing the freshest blooms and creating bespoke arrangements that tell your unique story. From elegant bouquets to grand event decor, every creation is a testament to our artistry and attention to detail.",            "We are a team of passionate florists committed to sustainable practices and unparalleled customer service. With years of experience, we've cultivated a reputation for excellence, ensuring every order from Balka Flowers brings joy and beauty to your life." ]}
           useInvertedBackground={false}
           showBorder={true}
-          buttons={[{ text: "Learn More About Us", href: "#contact" }]}
+          buttons={[{ text: "Learn More About Us", href: "/contact" }]}
           buttonAnimation="slide-up"
           className="py-16 md:py-24"
           containerClassName="max-w-screen-xl mx-auto px-6 md:px-8"
@@ -183,9 +184,9 @@ 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: "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" }] },
+            { title: "Shop", items: [{ label: "Bouquets", href: "#products" }, { 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" }] },
           ]}
           copyrightText="© 2024 Balka Flowers. All rights reserved."
           className="py-16 md:py-24"
diff --git a/src/app/shop/[id]/page.tsx b/src/app/shop/[id]/page.tsx
index df7f25c..9b65ffb 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" }]}
+                           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" }]}
+                           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" }]}
+                        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"
@@ -215,9 +215,9 @@ function ProductPageContent({ params }: ProductPageProps) {
                     <FooterBaseCard 
                         logoText="Balka Flowers"
                         columns={[
-                            { title: "Shop", items: [{ label: "Bouquets", href: "/shop" }, { 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" }] }
+                            { title: "Support", items: [{ label: "FAQ", href: "/contact" }, { label: "Contact", href: "/contact" }] }
                         ]}
                         copyrightText="© 2024 Balka Flowers. All rights reserved."
                         className="py-16 md:py-24"
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index 06f9d67..79b23ba 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" }]}
+                            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" }]}
+                        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"
@@ -130,9 +130,9 @@ function ShopPageContent() {
                     <FooterBaseCard 
                         logoText="Balka Flowers"
                         columns={[
-                            { title: "Shop", items: [{ label: "Bouquets", href: "/shop" }, { 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" }] }
+                            { title: "Support", items: [{ label: "FAQ", href: "/contact" }, { label: "Contact", href: "/contact" }] }
                         ]}
                         copyrightText="© 2024 Balka Flowers. All rights reserved."
                         className="py-16 md:py-24"