diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
new file mode 100644
index 0000000..1095aa8
--- /dev/null
+++ b/src/app/contact/page.tsx
@@ -0,0 +1,138 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { Mail, MapPin, Phone, MessageCircle } from "lucide-react";
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="mediumLargeSizeMediumTitles"
+      background="noise"
+      cardStyle="inset"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="AirPods"
+          navItems={[
+            { name: "Products", id: "products" },
+            { name: "Features", id: "features" },
+            { name: "Why AirPods", id: "metrics" },
+            { name: "Support", id: "faq" },
+            { name: "About", id: "/about" },
+            { name: "Pricing", id: "/pricing" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          button={{ text: "Shop Now", href: "/" }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Get in Touch"
+          tagIcon={MessageCircle}
+          tagAnimation="slide-up"
+          title="We'd Love to Hear From You"
+          description="Have questions about AirPods or need support? Our team is here to help. Reach out to us and we'll get back to you as soon as possible."
+          background={{ variant: "animated-grid" }}
+          useInvertedBackground={false}
+          inputPlaceholder="Enter your email address"
+          buttonText="Subscribe"
+          onSubmit={(email) => console.log("Email submitted:", email)}
+        />
+      </div>
+
+      <div id="contact-info" data-section="contact-info">
+        <div className="py-20">
+          <div className="mx-auto max-w-7xl px-4">
+            <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+              <div className="flex flex-col items-start space-y-4">
+                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary-cta/10">
+                  <Mail className="h-6 w-6 text-primary-cta" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold">Email</h3>
+                  <p className="mt-1 text-foreground/75">support@airpods.com</p>
+                  <p className="text-sm text-foreground/60">We'll respond within 24 hours</p>
+                </div>
+              </div>
+
+              <div className="flex flex-col items-start space-y-4">
+                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary-cta/10">
+                  <Phone className="h-6 w-6 text-primary-cta" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold">Phone</h3>
+                  <p className="mt-1 text-foreground/75">1-800-MY-APPLE</p>
+                  <p className="text-sm text-foreground/60">Available Monday to Friday, 9am-6pm EST</p>
+                </div>
+              </div>
+
+              <div className="flex flex-col items-start space-y-4">
+                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary-cta/10">
+                  <MapPin className="h-6 w-6 text-primary-cta" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold">Visit Us</h3>
+                  <p className="mt-1 text-foreground/75">Apple Retail Stores</p>
+                  <p className="text-sm text-foreground/60">Find your nearest store worldwide</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: "Products",              items: [
+                { label: "AirPods Pro", href: "/" },
+                { label: "AirPods Max", href: "/" },
+                { label: "AirPods (2nd Gen)", href: "/" },
+                { label: "Compare Models", href: "#" },
+              ],
+            },
+            {
+              title: "Support",              items: [
+                { label: "FAQ", href: "/" },
+                { label: "Setup Guide", href: "#" },
+                { label: "Troubleshooting", href: "#" },
+                { label: "Contact Us", href: "/contact" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "/about" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "News", href: "#" },
+              ],
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Cookie Policy", href: "#" },
+                { label: "Warranty", href: "#" },
+              ],
+            },
+          ]}
+          bottomLeftText="© 2025 AirPods. All rights reserved."
+          bottomRightText="Powered by Premium Audio Technology"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}