diff --git a/css/index.css b/css/index.css
index 1f8d2f3..4f3ac06 100644
--- a/css/index.css
+++ b/css/index.css
@@ -312,6 +312,14 @@ header {
   background: #6366f1;
 }
 
+.main-button:hover {
+  color: #fff; /* Keep the text white */
+  background: #4f46e5; /* A slightly darker shade for the hover state */
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Add a soft shadow effect */
+  transform: scale(1.05); /* Slightly enlarges the button on hover */
+  transition: all 0.3s ease; /* Smooth transition for hover effects */
+}
+
 a:hover{
   color: #5e5b59;
 }
diff --git a/templates/partials/quote.html b/templates/partials/quote.html
index ae2bada..793dc48 100644
--- a/templates/partials/quote.html
+++ b/templates/partials/quote.html
@@ -19,7 +19,7 @@
             </div>
         </figcaption>
         <div class="mt-12 flex items-center justify-center gap-x-6">
-            <a href="/contact" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Contact Us</a>
+            <a href="/contact" class="rounded-md main-button px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm ">Contact Us</a>
             
           </div>
     </figure>