diff --git a/app/(pages)/_components/ContactForm/ContactForm.jsx b/app/(pages)/_components/ContactForm/ContactForm.jsx
new file mode 100644
index 0000000..f8fdf2e
--- /dev/null
+++ b/app/(pages)/_components/ContactForm/ContactForm.jsx
@@ -0,0 +1,182 @@
+"use client";
+
+import { useState } from "react";
+import styles from "./ContactForm.module.scss";
+
+export default function ContactForm() {
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [email, setEmail] = useState("");
+  const [subject, setSubject] = useState("");
+  const [message, setMessage] = useState("");
+
+  // Error handling
+  const [firstNameError, setFirstNameError] = useState("");
+  const [lastNameError, setLastNameError] = useState("");
+  const [emailError, setEmailError] = useState("");
+  const [subjectError, setSubjectError] = useState("");
+  const [messageError, setMessageError] = useState("");
+
+  // Prevent multiple submissions while loading
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e) => {
+    console.log("submit");
+    e.preventDefault(); // Prevent automatic page reload
+
+    // Prevent multiple submissions while loading
+    if (loading) return;
+
+    setLoading(true);
+
+    // Input Validation
+    let valid = true;
+
+    if (!firstName.trim()) {
+      setFirstNameError("Please provide a first name");
+      valid = false;
+    } else {
+      setFirstNameError("");
+    }
+
+    if (!lastName.trim()) {
+      setLastNameError("Please provide a last name");
+      valid = false;
+    } else {
+      setLastNameError("");
+    }
+
+    if (!email.trim()) {
+      setEmailError("Please provide an email");
+      valid = false;
+    } else if (!/\S+@\S+\.\S+/.test(email)) {
+      setEmailError("Please provide a valid email");
+      valid = false;
+    } else {
+      setEmailError("");
+    }
+
+    if (!subject.trim()) {
+      setSubjectError("Please provide a subject");
+      valid = false;
+    } else {
+      setSubjectError("");
+    }
+
+    if (!message.trim()) {
+      setMessageError("Please provide a message");
+      valid = false;
+    } else {
+      setMessageError("");
+    }
+
+    if (!valid) {
+      setLoading(false); // Reset loading state if validation fails
+      // return;
+    }
+
+    const contactData = {
+      firstName,
+      lastName,
+      email,
+      subject,
+      message,
+    };
+
+    // Send to API
+    try {
+      const res = await fetch("/api/sendEmail", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(contactData),
+      });
+
+      if (!res.ok) throw new Error("Failed to send email");
+
+      const data = await res.json();
+      alert(data.message || "Email sent successfully!");
+
+      // Reset form fields after successful submission
+      setFirstName("");
+      setLastName("");
+      setEmail("");
+      setSubject("");
+      setMessage("");
+    } catch (error) {
+      alert("Something went wrong. Try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <form className={styles.form} onSubmit={handleSubmit}>
+      <div className={styles.formField}>
+        <div className={styles.formInput}>
+          <label>First Name*</label>
+          <input
+            type="text"
+            className={`${styles.formInputText} ${firstNameError && styles.error}`}
+            value={firstName}
+            onChange={(e) => setFirstName(e.target.value)}
+          />
+          {firstNameError && (
+            <p className={styles.errorText}>{firstNameError}</p>
+          )}
+        </div>
+        <div className={styles.formInput}>
+          <label>Last Name*</label>
+          <input
+            type="text"
+            className={`${styles.formInputText} ${lastNameError && styles.error}`}
+            value={lastName}
+            onChange={(e) => setLastName(e.target.value)}
+          />
+          {lastNameError && <p className={styles.errorText}>{lastNameError}</p>}
+        </div>
+      </div>
+      <div className={styles.formField}>
+        <div className={styles.formInput}>
+          <label>Email*</label>
+          <input
+            type="text"
+            className={`${styles.formInputText} ${emailError && styles.error}`}
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+          {emailError && <p className={styles.errorText}>{emailError}</p>}
+        </div>
+        <div className={styles.formInput}>
+          <label>Subject*</label>
+          <input
+            type="text"
+            className={`${styles.formInputText} ${subjectError && styles.error}`}
+            value={subject}
+            onChange={(e) => setSubject(e.target.value)}
+          />
+          {subjectError && <p className={styles.errorText}>{subjectError}</p>}
+        </div>
+      </div>
+      <div className={styles.formMessage}>
+        <label>Message</label>
+        <textarea
+          type="text"
+          className={`${styles.message} ${messageError && styles.error}`}
+          placeholder="Type Message Here..."
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+        />
+        {messageError && <p className={styles.errorText}>{messageError}</p>}
+      </div>
+      <div className={styles.buttonArea}>
+        <button
+          type="submit"
+          disabled={loading}
+          className={`btn ${styles.sendButton}`}
+        >
+          Send
+        </button>
+      </div>
+    </form>
+  );
+}
diff --git a/app/(pages)/_components/ContactForm/ContactForm.module.scss b/app/(pages)/_components/ContactForm/ContactForm.module.scss
new file mode 100644
index 0000000..ebeffa0
--- /dev/null
+++ b/app/(pages)/_components/ContactForm/ContactForm.module.scss
@@ -0,0 +1,134 @@
+@use "@/app/(pages)/_globals/mixins.scss";
+
+.form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 72.22%;
+  color: var(--dark-grey);
+  z-index: 1;
+
+  @include mixins.phone {
+    width: 361px;
+  }
+}
+
+.formField {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+
+  @include mixins.phone {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    // gap: 30px;
+  }
+}
+
+.formInput {
+  width: 44.92%;
+  margin-bottom: 20px;
+  text-align: left;
+
+  @include mixins.phone {
+    width: 100%;
+    // margin: 0;
+  }
+}
+
+.formInput label {
+  display: block;
+  font-size: 1rem;
+  font-family: var(--font2);
+  font-weight: 400;
+  line-height: 150%;
+}
+
+.formInputText {
+  width: 100%;
+  padding: 12px;
+  border-radius: 10px;
+  border: 1px solid var(--dark-grey);
+  background-color: var(--white);
+  font-size: 1rem;
+  color: var(--dark-grey);
+  transition:
+    border 0.3s ease,
+    box-shadow 0.3s ease;
+}
+
+.formInputText.error {
+  border-color: red;
+}
+
+.formInputText:focus {
+  border-color: var(--light-blue);
+  box-shadow: var(--drop-shadow-small);
+  outline: none;
+}
+
+.formMessage {
+  width: 100%;
+  border-radius: var(--card-border-radius);
+}
+
+.formMessage label {
+  display: none;
+}
+
+.message {
+  @include mixins.fontStyle(1rem, 400, 150%, var(--font2));
+  border-radius: var(--card-border-radius);
+  border: solid 1px var(--dark-grey);
+  resize: none;
+  min-height: 112px;
+  width: 100%;
+  padding-top: 12px;
+  padding-left: 32px;
+  transition:
+    border 0.3s ease,
+    box-shadow 0.3s ease;
+}
+
+.message.error {
+  border-color: red;
+}
+
+.message:focus {
+  border-color: var(--light-blue);
+  box-shadow: var(--drop-shadow-small);
+  outline: none;
+}
+
+.buttonArea {
+  display: flex;
+  flex-direction: row-reverse;
+  width: 100%;
+  padding-top: 50px;
+
+  @include mixins.phone {
+    padding-top: 30px;
+  }
+}
+
+.sendButton {
+  outline: none !important;
+  border: none !important;
+  font-weight: var(--bold);
+  font-family: var(--font2);
+  width: 6rem;
+  font-size: 1rem;
+
+  @include mixins.phone {
+    width: 100%;
+  }
+}
+
+/* Error messages */
+.errorText {
+  color: red;
+  font-size: 0.9rem;
+  margin-bottom: 0.5rem;
+  text-align: left;
+}
diff --git a/app/(pages)/contact-us/page.jsx b/app/(pages)/contact-us/page.jsx
index 54fcc1a..dc6e4ec 100644
--- a/app/(pages)/contact-us/page.jsx
+++ b/app/(pages)/contact-us/page.jsx
@@ -1,82 +1,13 @@
 "use client";
-import { useState } from "react";
 import styles from "./page.module.scss";
 import contactData from "../_data/contact-us.json";
 import { FaInstagram } from "react-icons/fa";
 import Image from "next/image";
+import ContactForm from "../_components/ContactForm/ContactForm";
 
 export default function ContactUs() {
   const { heading1, heading2 } = contactData.questionsCard;
 
-  const [firstName, setFirstName] = useState("");
-  const [lastName, setLastName] = useState("");
-  const [email, setEmail] = useState("");
-  const [subject, setSubject] = useState("");
-  const [message, setMessage] = useState("");
-
-  // Error handling
-  const [firstNameError, setFirstNameError] = useState("");
-  const [lastNameError, setLastNameError] = useState("");
-  const [emailError, setEmailError] = useState("");
-  const [subjectError, setSubjectError] = useState("");
-
-  const handleSubmit = async (e) => {
-    e.preventDefault(); // Prevent automatic page reload
-
-    // Input Validation
-    let valid = true;
-
-    if (!firstName.trim()) {
-      setFirstNameError("First Name is required.");
-      valid = false;
-    } else {
-      setFirstNameError("");
-    }
-
-    if (!lastName.trim()) {
-      setLastNameError("Last Name is required.");
-      valid = false;
-    } else {
-      setLastNameError("");
-    }
-
-    if (!email.trim()) {
-      setEmailError("Email is required.");
-      valid = false;
-    } else if (!/\S+@\S+\.\S+/.test(email)) {
-      setEmailError("Invalid email format.");
-      valid = false;
-    } else {
-      setEmailError("");
-    }
-
-    if (!subject.trim()) {
-      setSubjectError("Subject is required.");
-      valid = false;
-    } else {
-      setSubjectError("");
-    }
-
-    const contactData = {
-      firstName,
-      lastName,
-      email,
-      subject,
-      message,
-    };
-
-    if (valid) {
-      // Send to API
-      const res = await fetch("/api/sendEmail", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(contactData),
-      });
-
-      const data = await res.json();
-      alert(data.message || "Something went wrong");
-    }
-  };
   return (
     <main className={styles.contactUs}>
       {/* MAP COMPONENT */}
@@ -84,18 +15,8 @@ export default function ContactUs() {
         <Image
           src="/Contact_Rainbow_Top.png"
           alt="Decorative Rainbow Top"
-          className={styles.rainbowTop}
-          width={1482}
-          height={1350}
-        />
-      </div>
-      <div className={styles.rainbowBottom}>
-        <Image
-          src="/Contact_Rainbow_Bottom.png"
-          alt="Decorative Rainbow Bottom"
-          className={styles.rainbowBottom}
-          width={1362}
-          height={1068}
+          fill="true"
+          style={{ objectFit: "contain" }}
         />
       </div>
       <h1>Contact Us</h1>
@@ -123,25 +44,17 @@ export default function ContactUs() {
       </section>
       {/* SOCIAL MEDIA COMPONENT */}
       <section className={styles.socialMedia}>
-        <h4>Visit our social media pages!</h4>
         <div className={styles.dotsContainer}>
           <div className={styles.dotsLeft}>
             <Image
-              src="/NEW_Contact_Middle_Left_Dots.png"
+              src="/images/NEW_Contact_Middle_Left_Dots.png"
               alt="Decorative Dots Left"
-              width={420}
-              height={412}
-            />
-          </div>
-          <div className={styles.dotsRight}>
-            <Image
-              src="/NEW_Contact_Middle_Left_Right.png"
-              alt="Decorative Dots Right"
-              width={432}
-              height={397}
+              fill="true"
+              style={{ objectFit: "contain" }}
             />
           </div>
         </div>
+        <h4>Visit our social media pages!</h4>
         <div className={styles.socialMediaIcons}>
           <a
             href="https://www.instagram.com/jvmclinic"
@@ -162,6 +75,16 @@ export default function ContactUs() {
             @jvmcstudents
           </a>
         </div>
+        <div className={styles.dotsContainer}>
+          <div className={styles.dotsRight}>
+            <Image
+              src="/images/NEW_Contact_Middle_Left_Right.png"
+              alt="Decorative Dots Right"
+              fill="true"
+              style={{ objectFit: "contain" }}
+            />
+          </div>
+        </div>
       </section>
       {/* QUESTIONS? COMPONENT */}
       <div className={styles.questionsCard}>
@@ -179,72 +102,18 @@ export default function ContactUs() {
           </b>
         </p>
       </div>
+
       {/* CONTACT FORM COMPONENT */}
-      <form className={styles.form} onSubmit={handleSubmit}>
-        <div className={styles.formField}>
-          <div className={styles.formInput}>
-            {firstNameError && (
-              <p className={styles.errorText}>{firstNameError}</p>
-            )}
-            <label>First Name*</label>
-            <input
-              type="text"
-              className={styles.formInputText}
-              value={firstName}
-              onChange={(e) => setFirstName(e.target.value)}
-            />
-          </div>
-          <div className={styles.formInput}>
-            {lastNameError && (
-              <p className={styles.errorText}>{lastNameError}</p>
-            )}
-            <label>Last Name*</label>
-            <input
-              type="text"
-              className={styles.formInputText}
-              value={lastName}
-              onChange={(e) => setLastName(e.target.value)}
-            />
-          </div>
-        </div>
-        <div className={styles.formField}>
-          <div className={styles.formInput}>
-            {emailError && <p className={styles.errorText}>{emailError}</p>}
-            <label>Email*</label>
-            <input
-              type="text"
-              className={styles.formInputText}
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-            />
-          </div>
-          <div className={styles.formInput}>
-            {subjectError && <p className={styles.errorText}>{subjectError}</p>}
-            <label>Subject*</label>
-            <input
-              type="text"
-              className={styles.formInputText}
-              value={subject}
-              onChange={(e) => setSubject(e.target.value)}
-            />
-          </div>
-        </div>
-        <div className={styles.formMessage}>
-          <label>Message</label>
-          <textarea
-            type="text"
-            className={styles.message}
-            placeholder="Type Message Here..."
-            value={message}
-            onChange={(e) => setMessage(e.target.value)}
-          />
-        </div>
-        <div className={styles.buttonArea}>
-          <button type="submit" className={`btn ${styles.sendButton}`}>
-            Send
-          </button>
-        </div>
-      </form>
+      <ContactForm />
+
+      <div className={styles.rainbowBottom}>
+        <Image
+          src="/Contact_Rainbow_Bottom.png"
+          alt="Decorative Rainbow Bottom"
+          fill="true"
+          style={{ objectFit: "contain" }}
+        />
+      </div>
     </main>
   );
 }
diff --git a/app/(pages)/contact-us/page.module.scss b/app/(pages)/contact-us/page.module.scss
index 7d58938..94783ec 100644
--- a/app/(pages)/contact-us/page.module.scss
+++ b/app/(pages)/contact-us/page.module.scss
@@ -5,12 +5,15 @@
   flex-direction: column;
   align-items: center;
   gap: 10px;
-  width: 1040px;
-  // height: 247px;
+  width: 72.22%;
   background-color: var(--card-background);
   border-radius: var(--card-border-radius);
   box-shadow: var(--drop-shadow);
   padding: 42px 40px;
+
+  @include mixins.phone {
+    width: 361px;
+  }
 }
 
 .questionsCard h3 {
@@ -25,130 +28,41 @@
   color: var(--teal);
 }
 
-// Contact form
-.form {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 72.22%;
-  color: var(--dark-grey);
-}
-
-.formField {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.formInput {
-  width: 44.92%;
-  margin-bottom: 20px;
-  text-align: left;
-}
-
-.formInput label {
-  display: block;
-  font-size: 1rem;
-  font-family: var(--font2);
-  font-weight: 400;
-  line-height: 150%;
-}
-
-.formInputText {
-  width: 100%;
-  padding: 12px;
-  border-radius: 10px;
-  border: 1px solid var(--dark-grey);
-  background-color: var(--white);
-  font-size: 1rem;
-  color: var(--dark-grey);
-  transition:
-    border 0.3s ease,
-    box-shadow 0.3s ease;
-}
-
-.formInputText:focus {
-  border-color: var(--light-blue);
-  box-shadow: var(--drop-shadow-small);
-  outline: none;
-}
-
-.formMessage {
-  width: 100%;
-  border-radius: var(--card-border-radius);
-}
-
-.formMessage label {
-  display: none;
-}
-
-.message {
-  @include mixins.fontStyle(1rem, 400, 150%, var(--font2));
-  border-radius: var(--card-border-radius);
-  border: solid 1px var(--dark-grey);
-  resize: none;
-  min-height: 112px;
-  width: 100%;
-  padding-top: 12px;
-  padding-left: 32px;
-  transition:
-    border 0.3s ease,
-    box-shadow 0.3s ease;
-}
-
-.message:focus {
-  border-color: var(--light-blue);
-  box-shadow: var(--drop-shadow-small);
-  outline: none;
-}
-
-.buttonArea {
-  display: flex;
-  flex-direction: row-reverse;
-  width: 100%;
-  padding-top: 50px;
-}
-
-.sendButton {
-  outline: none !important;
-  border: none !important;
-  font-weight: var(--bold);
-  font-family: var(--font2);
-  width: 6rem;
-  font-size: 1rem;
-}
-
-// .sendButton b {
-//     font-weight: var(--bold);
-//     font-family: var(--font2);
-// }
-
-/* Error messages */
-.errorText {
-  color: red;
-  font-size: 0.9rem;
-  margin-bottom: 0.5rem;
-}
-
 .rainbowTop {
   position: absolute;
   z-index: 0;
   pointer-events: none;
-  top: -340px;
-  left: 176px;
-  // rotate: 15deg;
-  // top: -600px;
-  // left: 500px
-  // width: 1482px;
-  // height: 1350px;
+  top: -810.41px;
+  // left: 364.59px;
+  left: 30%;
+  rotate: 12deg;
+  width: 1482px;
+  height: 1350px;
+
+  @include mixins.phone {
+    top: -100px;
+    left: -30%;
+    rotate: 0deg;
+    width: 1000px;
+    height: 560px;
+  }
 }
 
 .rainbowBottom {
   position: absolute;
   z-index: 0;
   pointer-events: none;
-  bottom: -280px;
-  left: -176px;
+  bottom: -550px;
+  left: -300px;
+  width: 1362px;
+  height: 1068px;
+
+  @include mixins.phone {
+    width: 1154.48px;
+    height: 1029.14px;
+    left: -200px;
+    bottom: -400px;
+  }
 }
 
 /* Contact Us Page */
@@ -172,54 +86,62 @@
 .container {
   display: flex;
   flex-direction: row;
-  // justify-content: space-between;
   align-items: center;
-  gap: 24px;
   width: 85%;
   max-width: 1040px;
-  // max-height: 500px;
-  // margin-bottom: 50px;
   box-shadow: var(--drop-shadow);
   border-radius: var(--card-border-radius);
+  background-color: var(--white);
+  z-index: 1;
+
+  @include mixins.phone {
+    flex-direction: column-reverse;
+    width: 361px;
+  }
 }
 .mapContainer {
-  // flex: 1;
-  // position: relative;
-  // overflow: hidden;
   min-width: 50%;
-  max-width: 55%;
 
   iframe {
     display: block;
     border: 0;
-    border-radius: var(--card-border-radius) 0 0 var(--card-border-radius);
+    border-radius: 12px 0px 0px 12px;
+  }
+
+  @include mixins.phone {
+    iframe {
+      border-radius: 0px 0px 12px 12px;
+      height: 350px;
+    }
+    width: 100%;
   }
-  
 }
 
 .boxCard {
   display: flex;
   flex-direction: column;
-  gap: 32px;
-  padding: 44px 51px;
+  gap: 30px;
+  z-index: 2;
+  padding: 40px;
+  width: 50%;
+
+  @include mixins.phone {
+    width: 100%;
+    padding: 30px;
+  }
 }
 
 .infoCard {
-  // flex: 1;
   background-color: var(--white);
-  // padding-bottom: 29px;
-  // margin-right: 22px;
   text-align: center;
-  // font-size: 36px;
+  font-size: 36px;
   color: var(--emerald);
 }
 
 .textInfo {
-  h4 { 
+  h4 {
     color: var(--dark-grey);
-  }; //since h4 is hardcoded to be emerald - we think we might to over write it or include another header section
-  // font-family: var(--font2);
-  // gap: 8px;
+  } //since h4 is hardcoded to be emerald - we think we might to over write it or include another header section
   display: flex;
   flex-direction: column;
 }
@@ -229,26 +151,44 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  // margin-top: 16px;
 }
 
 .dotsLeft {
   position: absolute;
   bottom: -460px;
   left: -464px;
+  width: 420px;
+  height: 412px;
+
+  @include mixins.phone {
+    position: relative;
+    bottom: 0px;
+    left: 0px;
+    width: 130.05px;
+    height: 127.58px;
+  }
 }
 
 .dotsRight {
   position: absolute;
   top: -350px;
   right: -472px;
+  width: 432px;
+  height: 397px;
+
+  @include mixins.phone {
+    position: relative;
+    top: 0px;
+    right: 0px;
+    width: 133.77px;
+    height: 122.93px;
+  }
 }
 
 .socialMedia {
   display: flex;
   flex-direction: column;
   gap: 16px;
-  text-align: center;
 }
 
 .socialMediaIcons {
@@ -260,10 +200,13 @@
   a {
     width: 260px;
   }
-  // width: 260px;
-  // padding: 0 36px;
-  // margin-top: 20px;
-  // z-index: 2;
+
+  @include mixins.phone {
+    gap: 12px;
+    a {
+      width: 180px;
+    }
+  }
 }
 
 .icon {
diff --git a/public/NEW_Contact_Middle_Left_Dots.png b/public/images/NEW_Contact_Middle_Left_Dots.png
similarity index 100%
rename from public/NEW_Contact_Middle_Left_Dots.png
rename to public/images/NEW_Contact_Middle_Left_Dots.png
diff --git a/public/NEW_Contact_Middle_Left_Right.png b/public/images/NEW_Contact_Middle_Left_Right.png
similarity index 100%
rename from public/NEW_Contact_Middle_Left_Right.png
rename to public/images/NEW_Contact_Middle_Left_Right.png