diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index 12cdbbe6a9..da6fea48d6 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -2,7 +2,7 @@
   <div v-if="visible" class="dialog-overlay">
     <div class="dialog">
       <!-- Step 1: Giver -->
-      <div v-show="currentStep === 1" id="sectionGiftedGiver">
+      <div v-show="firstStep" id="sectionGiftedGiver">
         <label class="block font-bold mb-4">
           {{
             stepType === "recipient"
@@ -219,7 +219,7 @@
       </div>
 
       <!-- Step 2: Gift -->
-      <div v-show="currentStep === 2" id="sectionGiftedGift">
+      <div v-show="!firstStep" id="sectionGiftedGift">
         <div class="grid grid-cols-2 gap-2 mb-4">
           <!-- Giver Button -->
           <button
@@ -558,13 +558,13 @@ export default class GiftedDialog extends Vue {
   callbackOnSuccess?: (amount: number) => void = () => {};
   customTitle?: string;
   description = "";
+  firstStep = true;
   giver?: libsUtil.GiverReceiverInputInfo; // undefined means no identified giver agent
   offerId = "";
   prompt = "";
   receiver?: libsUtil.GiverReceiverInputInfo;
   unitCode = "HUR";
   visible = false;
-  currentStep = 1;
 
   libsUtil = libsUtil;
 
@@ -657,7 +657,7 @@ export default class GiftedDialog extends Vue {
     this.amountInput = "0";
     this.callbackOnSuccess = callbackOnSuccess;
     this.offerId = offerId || "";
-    this.currentStep = giver ? 2 : 1;
+    this.firstStep = !giver;
     this.stepType = "giver";
 
     // Update entity types based on current props
@@ -751,7 +751,7 @@ export default class GiftedDialog extends Vue {
     this.amountInput = "0";
     this.prompt = "";
     this.unitCode = "HUR";
-    this.currentStep = 1;
+    this.firstStep = true;
   }
 
   async confirm() {
@@ -959,12 +959,12 @@ export default class GiftedDialog extends Vue {
         name: "",
       };
     }
-    this.currentStep = 2;
+    this.firstStep = false;
   }
 
   goBackToStep1(step: string) {
     this.stepType = step;
-    this.currentStep = 1;
+    this.firstStep = true;
   }
 
   async loadProjects() {
@@ -1007,7 +1007,7 @@ export default class GiftedDialog extends Vue {
       did: this.activeDid,
       name: "You",
     };
-    this.currentStep = 2;
+    this.firstStep = false;
   }
 
   selectRecipient(contact?: Contact) {
@@ -1022,7 +1022,7 @@ export default class GiftedDialog extends Vue {
         name: "",
       };
     }
-    this.currentStep = 2;
+    this.firstStep = false;
   }
 
   selectRecipientProject(project: PlanData) {
@@ -1032,7 +1032,7 @@ export default class GiftedDialog extends Vue {
       image: project.image,
       handleId: project.handleId,
     };
-    this.currentStep = 2;
+    this.firstStep = false;
   }
 
   // Computed property for the query parameters