diff --git a/assets/contact/contact.css b/assets/contact/contact.css
index 099616103..52ace9086 100644
--- a/assets/contact/contact.css
+++ b/assets/contact/contact.css
@@ -103,6 +103,13 @@ button:hover {
     background: #ff6984;
 }
 
+button:disabled{
+    cursor: not-allowed;
+    pointer-events: none;
+    transition: none;
+
+}
+
 /*----------------------------------------------- Updated Footer Styling ---------------------------------------*/
 .footer-basic {
     padding: 40px 0;
diff --git a/assets/contact/contact.html b/assets/contact/contact.html
index 037811a61..6d1670352 100644
--- a/assets/contact/contact.html
+++ b/assets/contact/contact.html
@@ -74,7 +74,7 @@ <h2>Contact Us</h2>
                 <label for="message">Your Message:</label>
                 <textarea id="message" name="message" rows="5" placeholder="Enter Your Message" required></textarea>
 
-                <button type="submit">Send Message</button>
+                <button type="submit" id="button" disabled>Send Message</button>
             </form>
         </section>
     </div>
diff --git a/assets/contact/contact.js b/assets/contact/contact.js
index 9c27f371e..ca4dfcf21 100644
--- a/assets/contact/contact.js
+++ b/assets/contact/contact.js
@@ -9,6 +9,17 @@ function validateName(inputId) {
     }
 }
 
+const message=document.querySelector("#message");
+const btn=document.querySelector("#button");
+message.addEventListener("input",validate);
+function validate(){
+    if (message.value===""){
+        btn.setAttribute("disabled","disabled");
+    } else {
+      btn.removeAttribute("disabled");  
+    }
+}
+
 const ham = document.querySelector(".hamburger");
 const navMe = document.querySelector(".nav-menu");