diff --git a/app/contact/page.tsx b/app/contact/page.tsx
new file mode 100644
index 0000000..6cd54a0
--- /dev/null
+++ b/app/contact/page.tsx
@@ -0,0 +1,79 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { Footer } from "@/components/footer";
+import { KleapForm } from "@/components/kleap-form";
+
+const contactFields = [
+  { name: "name", label: "Name", type: "text", required: true },
+  { name: "email", label: "Email", type: "email", required: true },
+  { name: "subject", label: "Subject", type: "text", required: true },
+  { name: "message", label: "Message", type: "textarea", required: true },
+];
+
+export default function ContactPage() {
+  return (
+    <main className="min-h-screen pt-32">
+      <Container className="pb-24">
+        <div className="text-center mb-16">
+          <Heading>Get in Touch</Heading>
+          <Subheading className="mt-4">We're here to help with any questions or custom requests.</Subheading>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
+          <div>
+            <div className="bg-white p-8 rounded-3xl shadow-sm border">
+              <KleapForm formId="contact" title="Send us a message" fields={contactFields} />
+            </div>
+          </div>
+
+          <div className="space-y-12">
+            <div>
+              <h3 className="text-2xl font-bold mb-6">Contact Information</h3>
+              <div className="space-y-6">
+                <div className="flex items-start gap-4">
+                  <div className="w-12 h-12 rounded-full bg-neutral-100 flex items-center justify-center flex-shrink-0">
+                    {/* Icon */}
+                  </div>
+                  <div>
+                    <p className="font-bold">Our Location</p>
+                    <p className="text-neutral-600">123 Fashion Street, Style City, SC 12345</p>
+                  </div>
+                </div>
+                <div className="flex items-start gap-4">
+                  <div className="w-12 h-12 rounded-full bg-neutral-100 flex items-center justify-center flex-shrink-0">
+                    {/* Icon */}
+                  </div>
+                  <div>
+                    <p className="font-bold">Phone & WhatsApp</p>
+                    <p className="text-neutral-600">+1 (555) 123-4567</p>
+                  </div>
+                </div>
+                <div className="flex items-start gap-4">
+                  <div className="w-12 h-12 rounded-full bg-neutral-100 flex items-center justify-center flex-shrink-0">
+                    {/* Icon */}
+                  </div>
+                  <div>
+                    <p className="font-bold">Email Address</p>
+                    <p className="text-neutral-600">hello@solevibe.com</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-neutral-900 text-white p-8 rounded-3xl">
+              <h3 className="text-xl font-bold mb-4">Business Hours</h3>
+              <ul className="space-y-2 text-neutral-400">
+                <li className="flex justify-between"><span>Monday - Friday</span> <span>9:00 AM - 7:00 PM</span></li>
+                <li className="flex justify-between"><span>Saturday</span> <span>10:00 AM - 5:00 PM</span></li>
+                <li className="flex justify-between"><span>Sunday</span> <span>Closed</span></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </Container>
+      <Footer />
+    </main>
+  );
+}