diff --git a/.env b/.env
index 7cf7357..117a1ad 100644
--- a/.env
+++ b/.env
@@ -8,6 +8,7 @@ REACT_APP_IOS_URL="https://play.google.com/store/apps/details?id=com.mermsemr.my
 REACT_APP_FACEBOOK="https://www.facebook.com/profile.php?id=100066498622246"
 REACT_APP_TWITTER="https://twitter.com/fluxtra"
 
-REACT_APP_APPSITE="https://myfitapp.mermsemr.com"
+REACT_APP_APPSITE=" https://myfitapp.mermsemr.com"
 
 REACT_APP_AUX_ENDPOINT = "https://devapi.mermsemr.com/en/desktop/api/v2/myfit"
+REACT_APP_FORM_TIMEOUT = 10000
\ No newline at end of file
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 6025ce5..5000a57 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -3521,6 +3521,90 @@ header.fix_style.white_header {
   margin-bottom: 20px;
 }
 
+.contact_page_section .contact_inner .contact_form form .form-group textarea {
+  resize: none;
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group .contact_btn{
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group .contact_btn p{
+  margin: 0 !important;
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group .contact_btn > span{
+  width: 24px;
+  height: 24px;
+}
+
+#contact_body{
+  min-height: 48rem;
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.contact_body{
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  justify-content: center;
+  gap: 10px;
+  font-size: 20px;
+  font-weight: 800;
+  text-align: center;
+}
+
+/* Animations */
+.animate.pop {
+  animation-name: animate-pop;
+  animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48);
+  animation-duration: 0.5s;
+}
+
+@keyframes animate-pop {
+  0% {
+    opacity: 0;
+    transform: scale(0.5, 0.5);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1, 1);
+  }
+}
+
+/* For the err msg */
+#errText{
+  text-align: center;
+  color: tomato;
+  font-weight: 600;
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group span{
+  font-size: 12px;
+  color: tomato;
+  padding: 3px;
+  display: none;
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group input:valid[focused="true"]{
+  border: 1px solid var(--dark-purple);
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group input:invalid[focused="true"]{
+  border: 1px solid tomato;
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group input:invalid[focused="true"] ~ span{
+  display: block;
+}
+
 .contact_page_section
   .contact_inner
   .contact_form
@@ -4585,6 +4669,55 @@ header.fix_style.white_header {
   padding: 20px 0 0 0;
 }
 
+/* Loader */
+
+.loader{
+  border-radius: 100%;
+  position: relative;
+}
+
+.loader-sm{
+  width: 24px;
+  height: 24px;
+}
+
+/* LOADER 1 */
+
+#loader-1:before, #loader-1:after{
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  border: 3.5px solid transparent;
+  border-top-color: var(--body-text-purple);
+}
+
+#loader-1:before{
+  z-index: 100;
+  animation: spin 1.5s infinite;
+}
+
+#loader-1:after{
+  border: 3.5px solid #ccc;
+}
+
+@keyframes spin{
+  0%{
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100%{
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
 @media screen and (max-width: 992px) {
   .navbar-expand-lg .navbar-nav .has_dropdown .drp_btn {
     position: absolute !important;
diff --git a/src/component/Contact/Main.js b/src/component/Contact/Main.js
index 7b65228..d4d1a7e 100644
--- a/src/component/Contact/Main.js
+++ b/src/component/Contact/Main.js
@@ -1,24 +1,128 @@
+/** @format */
+
 import React, { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import Bredcrumb from "../Bredcrumb/Main";
 import BGImg from "../../assets/images/bread_crumb_bg.png";
 import BGImg1 from "../../assets/images/bread_crumb_bg_one.png";
 import BGImg2 from "../../assets/images/bread_crumb_bg_two.png";
+import axios from "axios";
 
 import SiteService from "../../vendors/service/siteService";
 
+// Form Inputs
+const FormInput = (props) => {
+  let {
+    name,
+    type,
+    placeholder,
+    required,
+    maxLenght,
+    errorMessage,
+    value,
+    onChange,
+    pattern,
+  } = props;
+
+  const [focused, setFocused] = useState(false);
+  const handleFocus = () => {
+    return setFocused(true);
+  };
+
+  return (
+    <div className="form-group">
+      <input
+        name={name}
+        type={type}
+        placeholder={placeholder}
+        className="form-control"
+        maxLength={maxLenght}
+        required={required}
+        value={value}
+        onChange={onChange}
+        onBlur={handleFocus}
+        pattern={pattern}
+        focused={focused.toString()}
+      />
+      <span>{errorMessage}</span>
+    </div>
+  );
+};
+
 const Main = ({ brdcum }) => {
-  let [countries, setCountries] = useState([]) // initial state for country dropdown
-  let countryClass = new SiteService() // instantiating the class
-  
+  let response = document.getElementById("contact_loader");
+  let contact_body = document.getElementById("contact_body");
+  let errText = document.getElementById("errText");
+  let navigate = useNavigate();
+
+  // Form Validation
+  const [values, setValues] = useState({
+    name: "",
+    email: "",
+    phone: "",
+    message: "",
+    country: "",
+  }); //initial state values
+  const [countries, setCountries] = useState([]); // initial state for country dropdown
+  const [myData, setMyData] = useState(null);
+  // Gave a generic name for multiple calls
+  const API_CALL = new SiteService(); // instantiating the class
+  // API CALL
   const allCountry = () => {
-    return countryClass.countryData();
-  }
+    return API_CALL.countryData();
+  };
+  const contactForm = async (value) => {
+    return await API_CALL.contactData(value);
+  };
+
+  const onChange = (e) => {
+    setValues((prev) => ({ ...prev, [e.target.name]: e.target.value }));
+  };
+  console.log(values);
+
+  // Submitting form
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    response.innerHTML = `<div
+    class="loader loader-sm"
+    id="loader-1" style='margin-right: 20px'></div>`;
+
+    contactForm(values)
+      .then((contact) => {
+        setMyData(contact);
+
+        // Checking for errors
+        if (contact?.data?.status < 1 || contact?.data?.message_id == "")
+          return (errText.textContent =
+            "unable to send your message, please try able");
+        else {
+          response.innerHTML = `<p> SEND MESSAGE </p>`;
+
+          contact_body.innerHTML = `<div class='contact_body animate pop'>
+      <div><img /></div>
+      <p>We have received your message and will follow up promptly.</p>
+      </div>`;
+          setTimeout(() => {
+            navigate("/");
+          }, 10000);
+
+          setValues((prev) => ({ ...prev, [e.target.name]: "" }));
+        }
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  };
 
   //CALLS THE API AFTER COMPONENT LOADS
-  useEffect(()=>{
-    allCountry().then((data)=> setCountries(Object.values(data.data)))
-  },[])
+  useEffect(() => {
+    allCountry().then((data) => setCountries(Object.values(data.data)));
+  }, []);
+
+  useEffect(() => {
+    console.log(myData);
+  }, [myData]);
 
   return (
     <>
@@ -71,107 +175,175 @@ const Main = ({ brdcum }) => {
         />
       )}
 
-      <section className="contact_page_section" id="contact">
+      <section
+        className="contact_page_section"
+        id="contact">
         <div className="container">
           <div className="contact_inner">
-            <div className="contact_form">
+            <div
+              className="contact_form"
+              id="contact_body">
               <div className="section_title">
                 <h2>
-                  Leave a <span>message</span>
+                  <span>Leave a</span> message
                 </h2>
                 <p>Fill up form below, our team will get back soon</p>
               </div>
-              <form action="">
-                <div className="form-group">
-                  <input
-                    type="text"
-                    placeholder="Name"
-                    className="form-control"
-                  />
-                </div>
-                <div className="form-group">
-                  <input
-                    type="email"
-                    placeholder="Email"
-                    className="form-control"
-                  />
-                </div>
+
+              {/* Contact Form */}
+              <form onSubmit={handleSubmit}>
+                <FormInput
+                  name="name"
+                  type="text"
+                  placeholder="Name"
+                  errorMessage="Please enter your name"
+                  required={true}
+                  maxLenght={35}
+                  value={values.name}
+                  onChange={onChange}
+                  pattern="^[A-Za-z]{1,35}$"
+                />
+
+                <FormInput
+                  name="email"
+                  type="email"
+                  placeholder="Email"
+                  errorMessage="It should be a valid email address!"
+                  required={true}
+                  maxLenght={35}
+                  value={values.email}
+                  onChange={onChange}
+                />
 
                 <div className="form-group">
-                  <select className="form-control">
-                    <option value="">Country</option>
-                    {countries.length > 0 && countries.map((country, index) => <option key={index} value={country}>{country}</option>)}
+                  <select
+                    className="form-control"
+                    name="country"
+                    value={values.country}
+                    onChange={onChange}
+                    required>
+                    <option
+                      value={""}
+                      onCha>
+                      Country
+                    </option>
+                    {countries.length > 0 &&
+                      countries.map((country, index) => (
+                        <option
+                          key={index}
+                          value={country}>
+                          {country}
+                        </option>
+                      ))}
                   </select>
                 </div>
-                <div className="form-group">
-                  <input
-                    type="text"
-                    placeholder="Phone"
-                    className="form-control"
-                  />
-                </div>
+
+                <FormInput
+                  name="phone"
+                  type="text"
+                  placeholder="Phone"
+                  errorMessage="It should be a valid phone number!"
+                  maxLenght={15}
+                  value={values.phone}
+                  onChange={onChange}
+                />
 
                 <div className="form-group">
                   <textarea
+                    name="msg"
                     className="form-control"
                     placeholder="Your message"
-                  ></textarea>
+                    value={values.msg}
+                    onChange={onChange}
+                    maxLength={350}
+                  />
                 </div>
                 <div className="form-group term_check">
-                  <input type="checkbox" id="term" />
+                  <input
+                    type="checkbox"
+                    id="term"
+                    onChange={onChange}
+                    required
+                  />
                   <label htmlFor="term">
                     I agree to the terms and conditions
                   </label>
                 </div>
                 <div className="form-group mb-0">
-                  <button type="submit" className="btn puprple_btn">
-                    SEND MESSAGE
+                  <button
+                    type="submit"
+                    className="btn puprple_btn contact_btn"
+                    aria-label="submit form"
+                    id="contact_loader">
+                    <p> SEND MESSAGE </p>
                   </button>
                 </div>
               </form>
+              {/* Error Tag */}
+              <p id="errText" />
             </div>
+
+            {/* Contact Info */}
             <div className="contact_info">
               <div className="icon">
-                <img src="assets/images/contact_message_icon.png" alt="image" />
+                <img
+                  src="assets/images/contact_message_icon.png"
+                  alt="image"
+                />
               </div>
               <div className="section_title">
                 <h2>
-                  Have any <span>question?</span>
+                  <span> Have any </span>question?
                 </h2>
                 <p>
                   If you have any question about our product, service, payment
                   or company, Visit our <Link to="/faq">FAQs page.</Link>
                 </p>
               </div>
-              <Link to="/faq" className="btn puprple_btn">
+              <Link
+                to="/faq"
+                className="btn puprple_btn">
                 READ FAQ
               </Link>
               <ul className="contact_info_list">
                 <li>
                   <div className="img">
-                    <img src="assets/images/mail_icon.png" alt="image" />
+                    <img
+                      src="assets/images/mail_icon.png"
+                      alt="image"
+                    />
                   </div>
                   <div className="text">
                     <span>Email Us</span>
-                    <Link to="#">example@gmail.com</Link>
+                    <a href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}>
+                      {process.env.REACT_APP_SUPPORT_EMAIL}
+                    </a>
                   </div>
                 </li>
                 <li>
                   <div className="img">
-                    <img src="assets/images/call_icon.png" alt="image" />
+                    <img
+                      src="assets/images/call_icon.png"
+                      alt="image"
+                    />
                   </div>
                   <div className="text">
                     <span>Call Us</span>
-                    <Link to="#">+1 (888) 553-46-11</Link>
+                    <a href={`tel: ${process.env.REACT_APP_US_PHONE}`}>
+                      {process.env.REACT_APP_US_PHONE}
+                    </a>
                   </div>
                 </li>
                 <li>
                   <div className="img">
-                    <img src="assets/images/location_icon.png" alt="image" />
+                    <img
+                      src="assets/images/location_icon.png"
+                      alt="image"
+                    />
                   </div>
                   <div className="text">
                     <span>Visit Us</span>
-                    <p>5687, Business Avenue, New York, USA 5687</p>
+                    <p>{process.env.REACT_APP_US_ADDRESS}</p>
                   </div>
                 </li>
               </ul>
@@ -180,7 +352,7 @@ const Main = ({ brdcum }) => {
         </div>
       </section>
       <section className="row_am map_section">
-        <div className="container"></div>
+        <div className="container" />
       </section>
     </>
   );
diff --git a/src/vendors/service/siteService.js b/src/vendors/service/siteService.js
index 438f3f4..9312a14 100644
--- a/src/vendors/service/siteService.js
+++ b/src/vendors/service/siteService.js
@@ -5,14 +5,21 @@ class SiteService {
   constructor() {
     console.log("Er are here anyway");
   }
+  // Blog Data {Get}
   blogData() {
     return this.getAuxEnd("blogdata", null);
   }
 
+  // Country Data {GET}
   countryData() {
     return this.getAuxEnd("/country", null);
   }
 
+  // Contact Data{POST}
+  contactData() {
+    return this.postAuxEnd("/contact", null)
+  }
+
   faqData() {
     return this.getAuxEnd("/faq", null);
   }
@@ -51,7 +58,7 @@ class SiteService {
 
   postAuxEnd(uri, reqData) {
     const endPoint = process.env.REACT_APP_AUX_ENDPOINT + uri;
-    Axios.post(endPoint)
+    return Axios.post(endPoint, reqData)
       .then((response) => {
         console.log(response);
         // res = response;