diff --git a/src/components/ContactForm.scss b/src/components/ContactForm.scss
index a788be6..1709322 100644
--- a/src/components/ContactForm.scss
+++ b/src/components/ContactForm.scss
@@ -18,3 +18,39 @@
   margin: 0 !important;
   text-align: center;
 }
+
+.lds-ring {
+  display: inline-block;
+  // position: absolute;
+  width: 32px;
+  height: 32px;
+}
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  margin: 3px;
+  border: 3px solid #fff;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: #fff transparent transparent transparent;
+}
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/components/ContactForm.tsx b/src/components/ContactForm.tsx
index e98f497..ffbbded 100644
--- a/src/components/ContactForm.tsx
+++ b/src/components/ContactForm.tsx
@@ -1,18 +1,24 @@
 import type { Component } from 'solid-js';
+import { createSignal } from 'solid-js';
 import toast, { Toaster } from 'solid-toast';
 import { useForm } from '../utils/validation.jsx';
 import './ContactForm.scss';
 
 export const ContactForm: Component = () => {
+  const [loading, setLoading] = createSignal(false);
+
   function _successMessage() {
+    setLoading(false);
     toast.success("Thanks for contacting us! We'll be in touch shortly.");
   }
 
   function _errorMessage() {
+    setLoading(false);
     toast.error('Something went wrong :(. Please refresh and try again.');
   }
 
   const sendContactRequest = async function (form) {
+    setLoading(true);
     const formData = new FormData(form);
 
     return fetch('https://shipshape.io/', {
@@ -28,6 +34,31 @@ export const ContactForm: Component = () => {
     errorClass: 'error-input'
   });
 
+  const SubmitButton = () => (
+    <input
+      disabled={Object.keys(errors).length}
+      type="submit"
+      value="Send Message"
+      class="btn btn-red cursor-pointer inline-flex justify-center border border-transparent transition-colors font-medium rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
+    />
+  );
+
+  const LoadingButton = () => (
+    <button
+      type="button"
+      class="btn btn-red cursor-pointer flex relative justify-center border border-transparent transition-colors font-medium rounded-md disabled:cursor-not-allowed"
+      disabled
+    >
+      <div class="lds-ring">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+      <div>Loading...</div>
+    </button>
+  );
+
   const ErrorMessage = (props) => (
     <span class="error-message">{props.error}</span>
   );
@@ -140,13 +171,8 @@ export const ContactForm: Component = () => {
 
           {errors.description && <ErrorMessage error={errors.description} />}
         </div>
-
-        <input
-          disabled={Object.keys(errors).length}
-          type="submit"
-          value="Send Message"
-          class="btn btn-red cursor-pointer inline-flex justify-center border border-transparent transition-colors font-medium rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
-        />
+        {/* {loading() ? <LoadingButton /> : <SubmitButton />} */}
+        <LoadingButton />
       </form>
 
       <Toaster