diff --git a/artifacts/ehsan-poc/src/pages/donate.tsx b/artifacts/ehsan-poc/src/pages/donate.tsx
index f63d550..b35a9fe 100644
--- a/artifacts/ehsan-poc/src/pages/donate.tsx
+++ b/artifacts/ehsan-poc/src/pages/donate.tsx
@@ -150,28 +150,28 @@ export default function Donate() {
   };
 
   const StepIndicator = () => (
-    <div className="flex items-start justify-center mb-10 w-full max-w-xs mx-auto">
+    <div className="flex items-start justify-center mb-10 w-full max-w-[12rem] mx-auto">
       {/* Step 1 - Details */}
       <div className="flex flex-col items-center gap-1.5 shrink-0">
         <div className={`w-9 h-9 rounded-full flex items-center justify-center text-sm font-bold border-2 ${
-          step >= 1 ? "bg-primary text-primary-foreground border-primary" : "bg-background text-muted-foreground border-border"
+          step >= 1 ? "bg-[#176B43] text-white border-[#176B43]" : "bg-background text-muted-foreground border-border"
         }`}>
           {step > 1 ? <Check className="w-4 h-4" /> : "1"}
         </div>
-        <span className={`text-xs font-medium ${step >= 1 ? "text-primary" : "text-muted-foreground"}`}>
+        <span className={`text-xs font-medium ${step >= 1 ? "text-[#176B43]" : "text-muted-foreground"}`}>
           {t.donate.stepDetails}
         </span>
       </div>
       {/* Connector - continuous line aligned to circle centers */}
-      <div className={`flex-1 h-0.5 mt-[17px] ${step >= 2 ? "bg-primary" : "bg-border"}`} />
+      <div className={`flex-1 h-0.5 mt-[17px] ${step >= 2 ? "bg-[#176B43]" : "bg-border"}`} />
       {/* Step 2 - Payment */}
       <div className="flex flex-col items-center gap-1.5 shrink-0">
         <div className={`w-9 h-9 rounded-full flex items-center justify-center text-sm font-bold border-2 ${
-          step >= 2 ? "bg-primary text-primary-foreground border-primary" : "bg-background text-muted-foreground border-border"
+          step >= 2 ? "bg-[#176B43] text-white border-[#176B43]" : "bg-background text-muted-foreground border-border"
         }`}>
           2
         </div>
-        <span className={`text-xs font-medium ${step >= 2 ? "text-primary" : "text-muted-foreground"}`}>
+        <span className={`text-xs font-medium ${step >= 2 ? "text-[#176B43]" : "text-muted-foreground"}`}>
           {t.donate.stepPayment}
         </span>
       </div>