diff --git a/src/app/(landing-routes)/contact-us/page.tsx b/src/app/(landing-routes)/contact-us/page.tsx
index 7ca45b82a..1cc7ac903 100644
--- a/src/app/(landing-routes)/contact-us/page.tsx
+++ b/src/app/(landing-routes)/contact-us/page.tsx
@@ -26,11 +26,16 @@ const Contact = () => {
               </h3>
               <div className="grid gap-5 lg:gap-3">
                 {contactInfo.map((info) => (
-                  <div key={info.alt} className="flex items-center gap-4">
-                    <div className="rounded-sm bg-neutral-dark-1 p-2.5">
+                  <div
+                    key={info.alt}
+                    className="group flex items-center gap-4 transition-all duration-300 hover:bg-stroke-colors-stroke"
+                  >
+                    <div className="rounded-sm bg-neutral-dark-1 p-2.5 duration-300 group-hover:bg-primary">
                       <info.Icon color="white" size={24} />
                     </div>
-                    <p className="text-lg leading-5">{info.text}</p>
+                    <p className="text-lg leading-5 transition-all duration-300 group-hover:font-medium">
+                      {info.text}
+                    </p>
                   </div>
                 ))}
               </div>
diff --git a/src/components/common/contact-us-form/index.tsx b/src/components/common/contact-us-form/index.tsx
index 456dba77e..7609b15a6 100644
--- a/src/components/common/contact-us-form/index.tsx
+++ b/src/components/common/contact-us-form/index.tsx
@@ -223,7 +223,7 @@ const ContactForm: React.FC = () => {
             variant="primary"
             size="lg"
             isLoading={loading}
-            className="w-full px-4 py-7 hover:bg-destructive"
+            className="w-full px-4 py-7 transition-all hover:-translate-y-2 hover:bg-destructive"
           >
             <Mail />
             Send
diff --git a/src/components/layouts/footer/index.tsx b/src/components/layouts/footer/index.tsx
index 57614c79c..b5de8c731 100644
--- a/src/components/layouts/footer/index.tsx
+++ b/src/components/layouts/footer/index.tsx
@@ -188,13 +188,13 @@ const Footer = () => {
                   </div>
                   <CustomButton
                     variant="primary"
-                    className="h-full"
+                    className="h-full transition-all hover:-translate-y-2"
                     onClick={handleSubmit}
                   >
                     {loading ? (
                       <LoadingSpinner className="size-4 animate-spin sm:size-5" />
                     ) : (
-                      "Subscibe"
+                      "Subscribe"
                     )}
                   </CustomButton>
                 </div>
@@ -249,13 +249,13 @@ const Footer = () => {
                   />
                   <CustomButton
                     variant="primary"
-                    className="h-full hover:bg-destructive"
+                    className="h-full transition-all hover:-translate-y-1 hover:bg-destructive"
                     onClick={handleSubmit}
                   >
                     {loading ? (
                       <LoadingSpinner className="size-4 animate-spin sm:size-5" />
                     ) : (
-                      "Subscibe"
+                      "Subscribe"
                     )}
                   </CustomButton>
                 </div>