diff --git a/src/app/page.tsx b/src/app/page.tsx
index f9ac018..e70f85d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,8 +11,18 @@ import ContactCenter from "@/components/sections/contact/ContactCenter";
 import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
 import FooterBase from "@/components/sections/footer/FooterBase";
 import { Building, Zap, Droplet, Wind, Home, Mail, CheckCircle } from "lucide-react";
+import { useState } from "react";
 
 export default function LandingPage() {
+  const [showPhoneNumber, setShowPhoneNumber] = useState(false);
+
+  const handleCallNowClick = () => {
+    setShowPhoneNumber(true);
+    setTimeout(() => {
+      window.location.href = "tel:+971557213898";
+    }, 500);
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-bubble"
@@ -36,7 +46,10 @@ export default function LandingPage() {
             { name: "Reviews", id: "testimonials" },
             { name: "Contact", id: "contact" }
           ]}
-          button={{ text: "Call Now", href: "tel:+971557213898" }}
+          button={{
+            text: showPhoneNumber ? "+971557213898" : "Call Now",            onClick: handleCallNowClick,
+            href: undefined
+          }}
         />
       </div>
 
@@ -50,7 +63,9 @@ export default function LandingPage() {
           showBlur={true}
           showDimOverlay={false}
           buttons={[
-            { text: "Call Now", href: "tel:+971557213898" },
+            {
+              text: showPhoneNumber ? "+971557213898" : "Call Now",              onClick: handleCallNowClick
+            },
             { text: "WhatsApp", href: "https://wa.me/971557213898" }
           ]}
         />
@@ -230,4 +245,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}