diff --git a/artifacts/dental-app/src/components/Hero.tsx b/artifacts/dental-app/src/components/Hero.tsx
index 78b481d..799616e 100644
--- a/artifacts/dental-app/src/components/Hero.tsx
+++ b/artifacts/dental-app/src/components/Hero.tsx
@@ -98,10 +98,16 @@ export function Hero() {
                 </div>
               </div>
             </div>
-            <div className="bg-white rounded-xl shadow-sm border border-border p-5 h-full flex items-center">
+            <div className="bg-white rounded-xl shadow-sm border border-border p-5 h-full flex flex-col justify-center gap-4">
               <p className="text-sm text-muted-foreground leading-relaxed">
                 We prefer John to come at 10am this Thursday because of a patient cancellation. Do you allow me to call John?
               </p>
+              <button
+                data-testid="button-call-john"
+                className="self-start px-4 py-2 rounded-full bg-primary text-accent text-sm font-semibold hover:opacity-90 transition-opacity"
+              >
+                Call John
+              </button>
             </div>
           </div>
         </motion.div>