diff --git a/.env b/.env
index 7cf7357..fae5d1c 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"
+# Changed href to this url
+REACT_APP_APPSITE=" http://www.dev.floatev.chiefsoft.us"
 
 REACT_APP_AUX_ENDPOINT = "https://devapi.mermsemr.com/en/desktop/api/v2/myfit"
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index bab1b11..9c06d9e 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -3521,6 +3521,10 @@ header.fix_style.white_header {
   margin-bottom: 20px;
 }
 
+.contact_page_section .contact_inner .contact_form form .form-group textarea {
+  resize: none;
+}
+
 /* For the err msg */
 .contact_page_section .contact_inner .contact_form form .form-group span{
   font-size: 12px;
@@ -3529,20 +3533,18 @@ header.fix_style.white_header {
   display: none;
 }
 
-.contact_page_section .contact_inner .contact_form form .form-group input:invalid ~ span{
+.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;
 }
 
-/* 
-input:invalid[focused="true"]{
-    border: 1px solid red;
-}
-
-input:invalid[focused="true"] ~ span{
-    display: block;
-}
-*/
-
 .contact_page_section
   .contact_inner
   .contact_form
diff --git a/src/component/Contact/Main.js b/src/component/Contact/Main.js
index 1ea58d3..eb4d922 100644
--- a/src/component/Contact/Main.js
+++ b/src/component/Contact/Main.js
@@ -1,9 +1,12 @@
+/** @format */
+
 import React, { useEffect, useState } from "react";
 import { Link } 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";
 
@@ -18,8 +21,14 @@ const FormInput = (props) => {
     errorMessage,
     value,
     onChange,
+    pattern,
   } = props;
-  
+
+  const [focused, setFocused] = useState(false);
+  const handleFocus = () => {
+    return setFocused(true);
+  };
+
   return (
     <div className="form-group">
       <input
@@ -31,6 +40,9 @@ const FormInput = (props) => {
         required={required}
         value={value}
         onChange={onChange}
+        onBlur={handleFocus}
+        pattern={pattern}
+        focused={focused.toString()}
       />
       <span>{errorMessage}</span>
     </div>
@@ -44,7 +56,8 @@ const Main = ({ brdcum }) => {
     email: "",
     phone: "",
     msg: "",
-    country: ''
+    country: "",
+    checkBox: false
   }); //initial state values
   const [countries, setCountries] = useState([]); // initial state for country dropdown
 
@@ -58,14 +71,16 @@ const Main = ({ brdcum }) => {
   const contactForm = () => {
     return API_CALL.contactData();
   };
+  
+  const onChange = (e) => {
+    setValues((prev) => ({ ...prev, [e.target.name]: e.target.value }));
+  };
+  console.log(values)
 
   // Submitting form
   const handleSubmit = (e) => {
     e.preventDefault();
-  };
 
-  const onChange = (e) => {
-    setValues({ ...values, [e.target.name]: e.target.value });
   };
 
   //CALLS THE API AFTER COMPONENT LOADS
@@ -125,7 +140,9 @@ 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">
@@ -147,13 +164,14 @@ const Main = ({ brdcum }) => {
                   maxLenght={35}
                   value={values.name}
                   onChange={onChange}
+                  pattern="^[A-Za-z]{1,35}$"
                 />
 
                 <FormInput
                   name="email"
                   type="email"
                   placeholder="Email"
-                  errorMessag="It should be a valid email address!"
+                  errorMessage="It should be a valid email address!"
                   required={true}
                   maxLenght={35}
                   value={values.email}
@@ -161,11 +179,18 @@ const Main = ({ brdcum }) => {
                 />
 
                 <div className="form-group">
-                  <select className="form-control">
-                    <option value={values.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}>
+                        <option
+                          key={index}
+                          value={country}>
                           {country}
                         </option>
                       ))}
@@ -189,16 +214,25 @@ const Main = ({ brdcum }) => {
                     placeholder="Your message"
                     value={values.msg}
                     onChange={onChange}
-                  ></textarea>
+                    maxLength={350}
+                  />
                 </div>
                 <div className="form-group term_check">
-                  <input type="checkbox" id="term" />
+                  <input
+                    type="checkbox"
+                    id="term"
+                    value={values.checkBox}
+                    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">
+                  <button
+                    type="submit"
+                    className="btn puprple_btn" aria-label="submit form">
                     SEND MESSAGE
                   </button>
                 </div>
@@ -208,7 +242,10 @@ const Main = ({ brdcum }) => {
             {/* 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>
@@ -219,13 +256,18 @@ const Main = ({ brdcum }) => {
                   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>
@@ -236,7 +278,10 @@ const Main = ({ brdcum }) => {
                 </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>
@@ -247,7 +292,10 @@ const Main = ({ brdcum }) => {
                 </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>
@@ -266,4 +314,4 @@ const Main = ({ brdcum }) => {
   );
 };
 
-export default Main;
\ No newline at end of file
+export default Main;