diff --git a/assets/contact/contact.css b/assets/contact/contact.css
index 2718ec9..7a3c2c7 100644
--- a/assets/contact/contact.css
+++ b/assets/contact/contact.css
@@ -134,6 +134,16 @@ textarea {
     color: #4a90e2;
 }
 
+#error {
+    color: #e74c3c;
+    font-size: 21px;
+}
+
+#success {
+    color: #4a90e2;
+    font-size: 21px;
+}
+
 /* Footer Css*/
 
 footer {
@@ -168,4 +178,4 @@ footer {
     footer {
         font-size: 0.9em;
     }
-}
+}
\ No newline at end of file
diff --git a/assets/contact/contact.html b/assets/contact/contact.html
index 79d14f0..d177af0 100644
--- a/assets/contact/contact.html
+++ b/assets/contact/contact.html
@@ -94,6 +94,7 @@ <h1>CONTACT US</h1>
         <i class="fas fa-chevron-up"></i>
     </a>
 
+    <script src="contact.js"></script>
     <script src="../../script.js"></script>
 </body>
 
diff --git a/assets/contact/contact.js b/assets/contact/contact.js
new file mode 100644
index 0000000..85659df
--- /dev/null
+++ b/assets/contact/contact.js
@@ -0,0 +1,24 @@
+const submitAjaxForm = event => {
+    event.preventDefault()
+
+    let form = event.target
+    const formData = new FormData(form)
+
+    fetch("/", {
+        method: "POST",
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        body: new URLSearchParams(formData).toString()
+    })
+        .then(response => {
+            if (!response.ok) {
+                form.innerHTML = `<h1 id='error'>Oops! We encountered an error. <br>Please try again later.</h1>`
+            } else {
+                form.innerHTML = `<h1 id='success'>Thanks for reaching out! <br>I will get back to you shortly.</h1>`
+            }
+        })
+        .catch(error => {
+            form.innerHTML = `<h1 id='error'>Oops! We encountered an error. <br>Please try again later.</h1>`
+        })
+}
+
+document.querySelector("form").addEventListener("submit", submitAjaxForm);
\ No newline at end of file