diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index d033505..a377b68 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -3609,11 +3609,11 @@ header.fix_style.white_header {
   display: flex;
   flex-direction: column;
   align-content: center;
-  justify-content: center;
+  justify-items: center;
   gap: 10px;
 }
 
-.contact_body {
+/* .contact_body {
   display: flex;
   flex-direction: column;
   align-content: center;
@@ -3622,24 +3622,25 @@ header.fix_style.white_header {
   font-size: 20px;
   font-weight: 800;
   text-align: center;
-}
+} */
 
 /* Animations */
-.animate.pop {
+.animate-image {
   animation-name: animate-pop;
-  animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48);
-  animation-duration: 0.5s;
+  animation-timing-function: linear;
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
 }
 
 @keyframes animate-pop {
   0% {
     opacity: 0;
-    transform: scale(0.5, 0.5);
+    transform: scale(0.5);
   }
 
   100% {
     opacity: 1;
-    transform: scale(1, 1);
+    transform: scale(1);
   }
 }
 
diff --git a/src/assets/images/confirmed-letter.jpg b/src/assets/images/confirmed-letter.jpg
new file mode 100644
index 0000000..df754dc
Binary files /dev/null and b/src/assets/images/confirmed-letter.jpg differ
diff --git a/src/component/Contact/Main.js b/src/component/Contact/Main.js
index 967856d..c7b7d2c 100644
--- a/src/component/Contact/Main.js
+++ b/src/component/Contact/Main.js
@@ -6,7 +6,7 @@ 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 SuccessImg from "../../assets/images/experts_01.png"
+import SuccessImg from "../../assets/images/confirmed-letter.jpg"
 
 import SiteService from "../../vendors/service/siteService";
 
@@ -51,10 +51,11 @@ const FormInput = (props) => {
 
 const Main = ({ brdcum }) => {
   let response = document.getElementById("contact_loader");
-  let contact_body = document.getElementById("contact_body");
   let errText = document.getElementById("errText");
   let navigate = useNavigate();
 
+  let [showSuccessfulImage, setShowSuccessfulImage] = useState(false) // Handles when sucess image is shown
+
   // Form Validation
   const [values, setValues] = useState({
     name: "",
@@ -100,10 +101,8 @@ const Main = ({ brdcum }) => {
         }else {
           response.innerHTML = `<p> SEND MESSAGE </p>`;
 
-          contact_body.innerHTML = `<div class='contact_body animate pop'>
-      <div><img src=${SuccessImg} /></div>
-      <p>We have received your message and will follow up promptly.</p>
-      </div>`;
+          setShowSuccessfulImage(true) // sets show success image to true
+
           setTimeout(() => {
             navigate("/");
           }, 10000);
@@ -177,107 +176,114 @@ const Main = ({ brdcum }) => {
         id="contact">
         <div className="container">
           <div className="contact_inner">
-            <div
-              className="contact_form"
-              id="contact_body">
-              <div className="section_title">
-                <h2>
-                  <span>Leave a</span> message
-                </h2>
-                <p>Fill up form below, our team will get back soon</p>
-              </div>
-
-              {/* Contact Form */}
-              <form onSubmit={handleSubmit}>
-                <FormInput
-                  name="name"
-                  type="text"
-                  placeholder="Name"
-                  errorMessage="Please enter your first and last name. (e.g: Mark John)"
-                  required={true}
-                  maxLenght={35}
-                  value={values.name}
-                  onChange={onChange}
-                  pattern="^\w+( \w+)$"
-                />
-
-                <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"
-                    name="country"
-                    value={values.country}
-                    onChange={onChange}
-                    required>
-                    <option value={""}>
-                      Country
-                    </option>
-                    {countries.length > 0 &&
-                      countries.map((country, index) => (
-                        <option
-                          key={index}
-                          value={country[0]}>
-                          {country[1]}
-                        </option>
-                      ))}
-                  </select>
+            <div className="contact_form" id="contact_body">
+              {showSuccessfulImage ? (
+                <>
+                  <div><img className="img-fluid animate-image" src={SuccessImg} alt='success image' /></div>
+                  <p>We have received your message and will follow up promptly.</p>
+                </>
+              ) : (
+                <>
+                <div className="section_title">
+                  <h2>
+                    <span>Leave a</span> message
+                  </h2>
+                  <p>Fill up form below, our team will get back soon</p>
                 </div>
 
-                <FormInput
-                  name="phone"
-                  type="number"
-                  placeholder="Phone"
-                  errorMessage="It should be a valid phone number!"
-                  maxLenght={15}
-                  value={values.phone}
-                  onChange={onChange}
-                  pattern="^[0-9]{15}$"
-                />
-
-                <div className="form-group">
-                  <textarea
-                    name="message"
-                    className="form-control"
-                    placeholder="Your message"
-                    value={values.message}
+                {/* Contact Form */}
+                <form onSubmit={handleSubmit}>
+                  <FormInput
+                    name="name"
+                    type="text"
+                    placeholder="Name"
+                    errorMessage="Please enter your first and last name. (e.g: Mark John)"
+                    required={true}
+                    maxLenght={35}
+                    value={values.name}
                     onChange={onChange}
-                    maxLength={300}
-                    pattern="^[A-Za-z0-9]{5, 300}$"
+                    pattern="^\w+( \w+)$"
                   />
-                </div>
-                <div className="form-group term_check">
-                  <input
-                    type="checkbox"
-                    id="term"
+
+                  <FormInput
+                    name="email"
+                    type="email"
+                    placeholder="Email"
+                    errorMessage="It should be a valid email address!"
+                    required={true}
+                    maxLenght={35}
+                    value={values.email}
                     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 contact_btn"
-                    aria-label="submit form"
-                    id="contact_loader">
-                    <p> SEND MESSAGE </p>
-                  </button>
-                </div>
-              </form>
-              {/* Error Tag */}
-              <p id="errText"></p>
+
+                  <div className="form-group">
+                    <select
+                      className="form-control"
+                      name="country"
+                      value={values.country}
+                      onChange={onChange}
+                      required>
+                      <option value={""}>
+                        Country
+                      </option>
+                      {countries.length > 0 &&
+                        countries.map((country, index) => (
+                          <option
+                            key={index}
+                            value={country[0]}>
+                            {country[1]}
+                          </option>
+                        ))}
+                    </select>
+                  </div>
+
+                  <FormInput
+                    name="phone"
+                    type="number"
+                    placeholder="Phone"
+                    errorMessage="It should be a valid phone number!"
+                    maxLenght={15}
+                    value={values.phone}
+                    onChange={onChange}
+                    pattern="^[0-9]{15}$"
+                  />
+
+                  <div className="form-group">
+                    <textarea
+                      name="message"
+                      className="form-control"
+                      placeholder="Your message"
+                      value={values.message}
+                      onChange={onChange}
+                      maxLength={300}
+                      pattern="^[A-Za-z0-9]{5, 300}$"
+                    />
+                  </div>
+                  <div className="form-group term_check">
+                    <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 contact_btn"
+                      aria-label="submit form"
+                      id="contact_loader">
+                      <p> SEND MESSAGE </p>
+                    </button>
+                  </div>
+                </form>
+                {/* Error Tag */}
+                <p id="errText"></p>
+                </>
+              )}
             </div>
 
             {/* Contact Info */}