diff --git a/components/PropertyContactForm.jsx b/components/PropertyContactForm.jsx
index d8de8f7..6537bcf 100644
--- a/components/PropertyContactForm.jsx
+++ b/components/PropertyContactForm.jsx
@@ -1,23 +1,10 @@
 'use client';
 import { useEffect } from 'react';
-import { useFormState, useFormStatus } from 'react-dom';
+import { useFormState } from 'react-dom';
 import { useSession } from 'next-auth/react';
 import { toast } from 'react-toastify';
 import addMessage from '@/app/actions/addMessage';
-import { FaPaperPlane } from 'react-icons/fa';
-
-const SubmitMessageButton = () => {
-  const status = useFormStatus();
-  return (
-    <button
-      className='bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline flex items-center justify-center'
-      type='submit'
-    >
-      <FaPaperPlane className='mr-2' />{' '}
-      {status.pending ? 'Sending...' : 'Send Message'}
-    </button>
-  );
-};
+import SubmitMessageButton from './SubmitMessageButton';
 
 const PropertyContactForm = ({ property }) => {
   const { data: session } = useSession();
diff --git a/components/SubmitMessageButton.jsx b/components/SubmitMessageButton.jsx
new file mode 100644
index 0000000..7cf77bc
--- /dev/null
+++ b/components/SubmitMessageButton.jsx
@@ -0,0 +1,16 @@
+import { useFormStatus } from 'react-dom';
+import { FaPaperPlane } from 'react-icons/fa';
+
+const SubmitMessageButton = () => {
+  const { pending } = useFormStatus();
+  return (
+    <button
+      className='bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline flex items-center justify-center'
+      type='submit'
+      disabled={pending}
+    >
+      <FaPaperPlane className='mr-2' />{' '}
+      {pending ? 'Sending...' : 'Send Message'}
+    </button>
+  );
+};