diff --git a/artifacts/ehsan-poc/src/pages/donate.tsx b/artifacts/ehsan-poc/src/pages/donate.tsx
index a89c09b..f63d550 100644
--- a/artifacts/ehsan-poc/src/pages/donate.tsx
+++ b/artifacts/ehsan-poc/src/pages/donate.tsx
@@ -150,9 +150,9 @@ export default function Donate() {
   };
 
   const StepIndicator = () => (
-    <div className="flex items-center justify-center gap-4 mb-10">
+    <div className="flex items-start justify-center mb-10 w-full max-w-xs mx-auto">
       {/* Step 1 - Details */}
-      <div className="flex flex-col items-center gap-1.5">
+      <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"
         }`}>
@@ -162,9 +162,10 @@ export default function Donate() {
           {t.donate.stepDetails}
         </span>
       </div>
-      <div className={`h-0.5 w-16 rounded ${step >= 2 ? "bg-primary" : "bg-border"}`} />
+      {/* Connector - continuous line aligned to circle centers */}
+      <div className={`flex-1 h-0.5 mt-[17px] ${step >= 2 ? "bg-primary" : "bg-border"}`} />
       {/* Step 2 - Payment */}
-      <div className="flex flex-col items-center gap-1.5">
+      <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"
         }`}>
@@ -219,7 +220,6 @@ export default function Donate() {
 
   return (
     <div className="container mx-auto px-4 py-12 max-w-5xl">
-      <h1 className="text-3xl font-bold text-foreground mb-8 text-center">{t.donate.title}</h1>
       <StepIndicator />
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">