diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
new file mode 100644
index 0000000..d6e618b
--- /dev/null
+++ b/src/app/contact/page.tsx
@@ -0,0 +1,256 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+import { Phone, Mail, MapPin, Heart } from "lucide-react";
+
+export default function ContactPage() {
+  const [formData, setFormData] = useState({
+    name: "",    email: "",    message: ""});
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Handle form submission
+    console.log("Form submitted:", formData);
+    // Reset form
+    setFormData({ name: "", email: "", message: "" });
+  };
+
+  const handlePhoneCall = () => {
+    window.location.href = "tel:+1-385-555-0123";
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="mediumSmall"
+      sizing="mediumLargeSizeMediumTitles"
+      background="grid"
+      cardStyle="solid"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      {/* Navbar */}
+      <div id="nav" data-section="nav" className="sticky top-0 z-50">
+        <NavbarStyleCentered
+          brandName="Provo River Inn"
+          navItems={[
+            { name: "Home", id: "home" },
+            { name: "Rooms", id: "rooms" },
+            { name: "Amenities", id: "amenities" },
+            { name: "Gallery", id: "gallery" },
+            { name: "Location", id: "location" },
+            { name: "Reviews", id: "reviews" },
+            { name: "Contact", id: "contact" },
+          ]}
+          button={{
+            text: "Book Your Stay",            href: "/book"}}
+        />
+      </div>
+
+      {/* Hero Section */}
+      <div id="hero-contact" data-section="hero-contact">
+        <HeroLogoBillboardSplit
+          logoText="Get in Touch"
+          description="Have questions about your stay? Our friendly team is here to help. Reach out directly by phone or use our contact form below."
+          background={{ variant: "animated-grid" }}
+          buttons={[
+            {
+              text: "Call Now",              onClick: handlePhoneCall,
+            },
+          ]}
+          buttonAnimation="opacity"
+          layoutOrder="default"
+          imageSrc="http://img.b2bpic.net/free-photo/young-female-receptionist-hotel-smiling-camera_1157-37453.jpg?_wi=1"
+          imageAlt="Friendly staff at Provo River Inn"
+          mediaAnimation="blur-reveal"
+          frameStyle="card"
+        />
+      </div>
+
+      {/* Contact Form Section */}
+      <div id="contact-form-section" data-section="contact-form-section" className="py-20 px-4">
+        <div className="max-w-4xl mx-auto">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+            {/* Contact Information */}
+            <div className="space-y-8">
+              <div>
+                <h2 className="text-3xl font-bold mb-8">Contact Information</h2>
+              </div>
+
+              {/* Phone */}
+              <div className="flex items-start space-x-4">
+                <div className="flex-shrink-0">
+                  <Phone className="w-6 h-6 text-blue-500 mt-1" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold mb-1">Phone</h3>
+                  <p className="text-gray-600 mb-3">Call us directly for immediate assistance</p>
+                  <button
+                    onClick={handlePhoneCall}
+                    className="inline-flex items-center px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors font-semibold"
+                  >
+                    <Phone className="w-4 h-4 mr-2" />
+                    +1 (385) 555-0123
+                  </button>
+                </div>
+              </div>
+
+              {/* Email */}
+              <div className="flex items-start space-x-4">
+                <div className="flex-shrink-0">
+                  <Mail className="w-6 h-6 text-green-500 mt-1" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold mb-1">Email</h3>
+                  <p className="text-gray-600 mb-2">Send us a message anytime</p>
+                  <a
+                    href="mailto:hello@provoriverkinn.com"
+                    className="text-green-500 hover:text-green-600 font-semibold"
+                  >
+                    hello@provoriverkinn.com
+                  </a>
+                </div>
+              </div>
+
+              {/* Address */}
+              <div className="flex items-start space-x-4">
+                <div className="flex-shrink-0">
+                  <MapPin className="w-6 h-6 text-red-500 mt-1" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold mb-1">Address</h3>
+                  <p className="text-gray-600">
+                    123 River Road<br />
+                    Provo, UT 84604<br />
+                    United States
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Contact Form */}
+            <div className="bg-white rounded-lg p-8 shadow-lg">
+              <h3 className="text-2xl font-bold mb-6">Send us a Message</h3>
+              <form onSubmit={handleSubmit} className="space-y-6">
+                <div>
+                  <label htmlFor="name" className="block text-sm font-semibold mb-2">
+                    Name
+                  </label>
+                  <input
+                    type="text"
+                    id="name"
+                    name="name"
+                    value={formData.name}
+                    onChange={handleInputChange}
+                    required
+                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    placeholder="Your name"
+                  />
+                </div>
+
+                <div>
+                  <label htmlFor="email" className="block text-sm font-semibold mb-2">
+                    Email
+                  </label>
+                  <input
+                    type="email"
+                    id="email"
+                    name="email"
+                    value={formData.email}
+                    onChange={handleInputChange}
+                    required
+                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    placeholder="your.email@example.com"
+                  />
+                </div>
+
+                <div>
+                  <label htmlFor="message" className="block text-sm font-semibold mb-2">
+                    Message
+                  </label>
+                  <textarea
+                    id="message"
+                    name="message"
+                    value={formData.message}
+                    onChange={handleInputChange}
+                    required
+                    rows={5}
+                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    placeholder="Your message..."
+                  />
+                </div>
+
+                <button
+                  type="submit"
+                  className="w-full px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors font-semibold"
+                >
+                  Send Message
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div id="footer-main" data-section="footer-main">
+        <FooterLogoEmphasis
+          logoText="Provo River Inn"
+          columns={[
+            {
+              items: [
+                {
+                  label: "Home",                  href: "/"},
+                {
+                  label: "Rooms",                  href: "/rooms"},
+                {
+                  label: "Amenities",                  href: "/amenities"},
+                {
+                  label: "Gallery",                  href: "/gallery"},
+              ],
+            },
+            {
+              items: [
+                {
+                  label: "Location",                  href: "/location"},
+                {
+                  label: "Reviews",                  href: "/reviews"},
+                {
+                  label: "Book Now",                  href: "/book"},
+                {
+                  label: "Contact Us",                  href: "/contact"},
+              ],
+            },
+            {
+              items: [
+                {
+                  label: "Privacy Policy",                  href: "#"},
+                {
+                  label: "Terms & Conditions",                  href: "#"},
+                {
+                  label: "Cancellation Policy",                  href: "#"},
+                {
+                  label: "FAQ",                  href: "#"},
+              ],
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file