diff --git a/app/contact/layout.tsx b/app/contact/layout.tsx
new file mode 100644
index 0000000..1877209
--- /dev/null
+++ b/app/contact/layout.tsx
@@ -0,0 +1,13 @@
+export const metadata = {
+  title: "Contact Us | AB Group LLC",
+  description:
+    "Get in touch with AB Group LLC for QuickBooks consulting, training, and support. Call us or fill out our contact form for a free consultation.",
+};
+
+export default function ContactLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return children;
+}
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
new file mode 100644
index 0000000..be83671
--- /dev/null
+++ b/app/contact/page.tsx
@@ -0,0 +1,388 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Phone,
+  Mail,
+  MapPin,
+  Clock,
+  Facebook,
+  Twitter,
+  Linkedin,
+  Send,
+  CheckCircle,
+} from "lucide-react";
+
+const contactInfo = [
+  {
+    icon: Phone,
+    label: "Phone",
+    values: ["(866) 218-3322", "(305) 387-8582"],
+    href: "tel:3053878582",
+  },
+  {
+    icon: Mail,
+    label: "Email",
+    values: ["info@ab-groupllc.com"],
+    href: "mailto:info@ab-groupllc.com",
+  },
+  {
+    icon: Phone,
+    label: "Fax",
+    values: ["(866) 705-8254"],
+  },
+  {
+    icon: MapPin,
+    label: "Location",
+    values: ["Florida, United States"],
+  },
+  {
+    icon: Clock,
+    label: "Hours",
+    values: ["Monday - Friday", "By Appointment Only"],
+  },
+];
+
+const socialLinks = [
+  {
+    name: "Facebook",
+    href: "https://www.facebook.com/quickbooks.easybutton",
+    icon: Facebook,
+  },
+  {
+    name: "X",
+    href: "https://x.com/Nicky_QB_Expert/",
+    icon: Twitter,
+  },
+  {
+    name: "LinkedIn",
+    href: "https://www.linkedin.com/in/nicollealcazar/",
+    icon: Linkedin,
+  },
+];
+
+export default function ContactPage() {
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    phone: "",
+    company: "",
+    preferredContact: "email",
+    message: "",
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+
+    // Simulate form submission
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
+    setIsSubmitting(false);
+    setIsSubmitted(true);
+  };
+
+  const handleChange = (
+    e: React.ChangeEvent<
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >
+  ) => {
+    setFormData((prev) => ({
+      ...prev,
+      [e.target.name]: e.target.value,
+    }));
+  };
+
+  return (
+    <>
+      {/* Hero Section */}
+      <section className="bg-zinc-900 text-white">
+        <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8 lg:py-24">
+          <div className="max-w-3xl">
+            <p className="text-red-500 font-semibold mb-4">Contact Us</p>
+            <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
+              Let&apos;s <span className="text-red-500">Talk</span> About Your
+              Business
+            </h1>
+            <p className="mt-6 text-lg text-zinc-300">
+              Ready to get started? Have questions? We&apos;re here to help.
+              Reach out for a free consultation and needs analysis.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Contact Content */}
+      <section className="bg-white py-16 md:py-24">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16">
+            {/* Contact Form */}
+            <div>
+              <h2 className="text-2xl font-semibold text-zinc-900">
+                Send Us a Message
+              </h2>
+              <p className="mt-2 text-zinc-600">
+                Fill out the form below and we&apos;ll get back to you as soon
+                as possible.
+              </p>
+
+              {isSubmitted ? (
+                <div className="mt-8 bg-green-50 border border-green-200 rounded-xl p-8 text-center">
+                  <CheckCircle className="h-12 w-12 text-green-600 mx-auto mb-4" />
+                  <h3 className="text-xl font-semibold text-zinc-900">
+                    Message Sent!
+                  </h3>
+                  <p className="mt-2 text-zinc-600">
+                    Thank you for contacting us. We&apos;ll be in touch shortly.
+                  </p>
+                  <button
+                    onClick={() => {
+                      setIsSubmitted(false);
+                      setFormData({
+                        name: "",
+                        email: "",
+                        phone: "",
+                        company: "",
+                        preferredContact: "email",
+                        message: "",
+                      });
+                    }}
+                    className="mt-4 text-red-600 font-medium hover:text-red-700"
+                  >
+                    Send another message
+                  </button>
+                </div>
+              ) : (
+                <form onSubmit={handleSubmit} className="mt-8 space-y-6">
+                  <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
+                    <div>
+                      <label
+                        htmlFor="name"
+                        className="block text-sm font-medium text-zinc-700"
+                      >
+                        Full Name *
+                      </label>
+                      <input
+                        type="text"
+                        id="name"
+                        name="name"
+                        required
+                        value={formData.name}
+                        onChange={handleChange}
+                        className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all"
+                        placeholder="John Smith"
+                      />
+                    </div>
+                    <div>
+                      <label
+                        htmlFor="email"
+                        className="block text-sm font-medium text-zinc-700"
+                      >
+                        Email Address *
+                      </label>
+                      <input
+                        type="email"
+                        id="email"
+                        name="email"
+                        required
+                        value={formData.email}
+                        onChange={handleChange}
+                        className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all"
+                        placeholder="john@company.com"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
+                    <div>
+                      <label
+                        htmlFor="phone"
+                        className="block text-sm font-medium text-zinc-700"
+                      >
+                        Phone Number
+                      </label>
+                      <input
+                        type="tel"
+                        id="phone"
+                        name="phone"
+                        value={formData.phone}
+                        onChange={handleChange}
+                        className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all"
+                        placeholder="(555) 123-4567"
+                      />
+                    </div>
+                    <div>
+                      <label
+                        htmlFor="company"
+                        className="block text-sm font-medium text-zinc-700"
+                      >
+                        Company Name
+                      </label>
+                      <input
+                        type="text"
+                        id="company"
+                        name="company"
+                        value={formData.company}
+                        onChange={handleChange}
+                        className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all"
+                        placeholder="Your Company LLC"
+                      />
+                    </div>
+                  </div>
+
+                  <div>
+                    <label
+                      htmlFor="preferredContact"
+                      className="block text-sm font-medium text-zinc-700"
+                    >
+                      Preferred Contact Method
+                    </label>
+                    <select
+                      id="preferredContact"
+                      name="preferredContact"
+                      value={formData.preferredContact}
+                      onChange={handleChange}
+                      className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all bg-white"
+                    >
+                      <option value="email">Email</option>
+                      <option value="phone">Phone</option>
+                      <option value="either">Either</option>
+                    </select>
+                  </div>
+
+                  <div>
+                    <label
+                      htmlFor="message"
+                      className="block text-sm font-medium text-zinc-700"
+                    >
+                      Message *
+                    </label>
+                    <textarea
+                      id="message"
+                      name="message"
+                      required
+                      rows={5}
+                      value={formData.message}
+                      onChange={handleChange}
+                      className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all resize-none"
+                      placeholder="Tell us about your business needs..."
+                    />
+                  </div>
+
+                  <button
+                    type="submit"
+                    disabled={isSubmitting}
+                    className="w-full inline-flex items-center justify-center px-6 py-3 bg-red-600 text-white font-medium rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    {isSubmitting ? (
+                      "Sending..."
+                    ) : (
+                      <>
+                        Send Message
+                        <Send className="ml-2 h-5 w-5" />
+                      </>
+                    )}
+                  </button>
+                </form>
+              )}
+            </div>
+
+            {/* Contact Info */}
+            <div>
+              <h2 className="text-2xl font-semibold text-zinc-900">
+                Contact Information
+              </h2>
+              <p className="mt-2 text-zinc-600">
+                Prefer to reach out directly? Here&apos;s how you can contact
+                us.
+              </p>
+
+              <div className="mt-8 space-y-6">
+                {contactInfo.map((item) => (
+                  <div key={item.label} className="flex items-start gap-4">
+                    <div className="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                      <item.icon className="h-6 w-6 text-red-600" />
+                    </div>
+                    <div>
+                      <p className="font-medium text-zinc-900">{item.label}</p>
+                      {item.values.map((value, idx) =>
+                        item.href && idx === 0 ? (
+                          <a
+                            key={value}
+                            href={item.href}
+                            className="block text-zinc-600 hover:text-red-600 transition-colors"
+                          >
+                            {value}
+                          </a>
+                        ) : (
+                          <p key={value} className="text-zinc-600">
+                            {value}
+                          </p>
+                        )
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              {/* Social Links */}
+              <div className="mt-12">
+                <h3 className="text-lg font-semibold text-zinc-900">
+                  Follow Us
+                </h3>
+                <div className="mt-4 flex gap-4">
+                  {socialLinks.map((social) => (
+                    <a
+                      key={social.name}
+                      href={social.href}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="w-12 h-12 bg-zinc-100 rounded-lg flex items-center justify-center text-zinc-600 hover:bg-red-100 hover:text-red-600 transition-colors"
+                    >
+                      <span className="sr-only">{social.name}</span>
+                      <social.icon className="h-5 w-5" />
+                    </a>
+                  ))}
+                </div>
+              </div>
+
+              {/* Se Habla Espanol */}
+              <div className="mt-12 bg-red-50 rounded-xl p-6">
+                <p className="text-xl font-semibold text-red-600">
+                  Se Habla Espanol
+                </p>
+                <p className="mt-2 text-zinc-600">
+                  We proudly serve our Spanish-speaking clients in their
+                  preferred language.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Banner */}
+      <section className="bg-zinc-900 py-12 md:py-16">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="text-center">
+            <h2 className="text-2xl font-semibold text-white sm:text-3xl">
+              Got QuickBooks? We&apos;ve Got Answers.
+            </h2>
+            <p className="mt-2 text-zinc-400">
+              Call us now for immediate assistance.
+            </p>
+            <a
+              href="tel:3053878582"
+              className="mt-6 inline-flex items-center justify-center px-8 py-4 bg-red-600 text-white text-lg font-medium rounded-lg hover:bg-red-700 transition-colors"
+            >
+              <Phone className="mr-2 h-6 w-6" />
+              (305) 387-8582
+            </a>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}