diff --git a/artifacts/dental-app/src/components/Hero.tsx b/artifacts/dental-app/src/components/Hero.tsx
index 799616e..50c8e33 100644
--- a/artifacts/dental-app/src/components/Hero.tsx
+++ b/artifacts/dental-app/src/components/Hero.tsx
@@ -98,13 +98,13 @@ export function Hero() {
                 </div>
               </div>
             </div>
-            <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">
+            <div className="bg-primary rounded-xl shadow-sm p-5 h-full flex flex-col justify-center gap-4">
+              <p className="text-sm text-white/90 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"
+                className="self-start px-4 py-2 rounded-full bg-white text-primary text-sm font-semibold hover:opacity-90 transition-opacity"
               >
                 Call John
               </button>