diff --git a/GiftedDialog-Decomposition-Plan.md b/GiftedDialog-Decomposition-Plan.md
index ceb115db..2ebb842c 100644
--- a/GiftedDialog-Decomposition-Plan.md
+++ b/GiftedDialog-Decomposition-Plan.md
@@ -103,30 +103,36 @@ These components handle layout and entity organization:
 - **Props**: `entityType`, `routeName`, `queryParams`
 - **Emits**: None (uses router-link)
 
-### Phase 3: Extract Step Components (FUTURE)
+### Phase 3: Extract Step Components (✅ COMPLETED)
 
 These components handle major UI sections:
 
-#### 7. EntitySelectionStep.vue (PLANNED)
+#### 8. EntitySelectionStep.vue ✅
 - **Purpose**: Complete step 1 entity selection interface
 - **Features**:
-  - Dynamic step type handling (giver/recipient)
-  - Entity type switching (people/projects)
-  - Conflict detection integration
+  - Dynamic step labeling based on context
+  - EntityGrid integration for unified entity display
+  - Conflict detection and prevention
+  - Special entity handling (You, Unnamed)
+  - Show All navigation with context preservation
   - Cancel functionality
-- **Props**: `stepType`, `entityType`, `entities`, `conflicts`, `context`
+  - Event delegation for entity selection
+- **Props**: `stepType`, `giverEntityType`, `recipientEntityType`, `showProjects`, `isFromProjectView`, `projects`, `allContacts`, `activeDid`, `allMyDids`, `conflictChecker`, `fromProjectId`, `toProjectId`, `giver`, `receiver`
 - **Emits**: `entity-selected`, `cancel`
 
-#### 8. GiftDetailsStep.vue (PLANNED)
-- **Purpose**: Complete step 2 gift details form
+#### 9. GiftDetailsStep.vue ✅
+- **Purpose**: Complete step 2 gift details form interface
 - **Features**:
-  - Entity summary display
-  - Gift description input
-  - Amount input with controls
-  - Form validation
-  - Submit functionality
-- **Props**: `giver`, `receiver`, `context`, `initialValues`
-- **Emits**: `submit`, `back`, `entity-edit-requested`
+  - Entity summary display with edit capability
+  - Gift description input with placeholder support
+  - Amount input with increment/decrement controls
+  - Unit code selection (HUR, USD, BTC, etc.)
+  - Photo & more options navigation
+  - Conflict detection and warning display
+  - Form validation and submission
+  - Cancel functionality
+- **Props**: `giver`, `receiver`, `giverEntityType`, `recipientEntityType`, `description`, `amount`, `unitCode`, `prompt`, `isFromProjectView`, `hasConflict`, `offerId`, `fromProjectId`, `toProjectId`
+- **Emits**: `update:description`, `update:amount`, `update:unitCode`, `edit-entity`, `explain-data`, `submit`, `cancel`
 
 ### Phase 4: Refactor Main Component (FINAL)
 
@@ -154,12 +160,17 @@ These components handle major UI sections:
 6. **SpecialEntityCard.vue** - Special entities (You, Unnamed) with conflict handling
 7. **ShowAllCard.vue** - Show All navigation with router integration
 
+**Phase 3: Step Components**
+8. **EntitySelectionStep.vue** - Complete step 1 entity selection interface
+9. **GiftDetailsStep.vue** - Complete step 2 gift details form interface
+
 ### 🔄 Next Steps
 
-1. **Update GiftedDialog.vue** - Integrate Phase 1 & 2 components incrementally
+1. **Update GiftedDialog.vue** - Integrate all Phase 1-3 components
 2. **Test integration** - Ensure functionality remains intact
 3. **Create unit tests** - For all new components
 4. **Performance validation** - Ensure no regression
+5. **Phase 4 planning** - Refactor main component to orchestration only
 
 ### 📋 Future Phases
 
@@ -303,6 +314,64 @@ These components handle major UI sections:
 </template>
 ```
 
+### Using EntitySelectionStep in GiftedDialog
+
+```vue
+<template>
+  <div v-show="currentStep === 1">
+    <EntitySelectionStep
+      :step-type="stepType"
+      :giver-entity-type="giverEntityType"
+      :recipient-entity-type="recipientEntityType"
+      :show-projects="showProjects"
+      :is-from-project-view="isFromProjectView"
+      :projects="projects"
+      :all-contacts="allContacts"
+      :active-did="activeDid"
+      :all-my-dids="allMyDids"
+      :conflict-checker="wouldCreateConflict"
+      :from-project-id="fromProjectId"
+      :to-project-id="toProjectId"
+      :giver="giver"
+      :receiver="receiver"
+      @entity-selected="handleEntitySelected"
+      @cancel="cancel"
+    />
+  </div>
+</template>
+```
+
+### Using GiftDetailsStep in GiftedDialog
+
+```vue
+<template>
+  <div v-show="currentStep === 2">
+    <GiftDetailsStep
+      :giver="giver"
+      :receiver="receiver"
+      :giver-entity-type="giverEntityType"
+      :recipient-entity-type="recipientEntityType"
+      :description="description"
+      :amount="parseFloat(amountInput)"
+      :unit-code="unitCode"
+      :prompt="prompt"
+      :is-from-project-view="isFromProjectView"
+      :has-conflict="hasPersonConflict"
+      :offer-id="offerId"
+      :from-project-id="fromProjectId"
+      :to-project-id="toProjectId"
+      @update:description="description = $event"
+      @update:amount="amountInput = $event.toString()"
+      @update:unit-code="unitCode = $event"
+      @edit-entity="handleEditEntity"
+      @explain-data="explainData"
+      @submit="handleSubmit"
+      @cancel="cancel"
+    />
+  </div>
+</template>
+```
+
 ## Migration Strategy
 
 ### Backward Compatibility
@@ -342,4 +411,4 @@ The completed Phase 1 components (PersonCard, ProjectCard, EntitySummaryButton,
 
 **Author**: Matthew Raymer  
 **Last Updated**: 2025-01-28  
-**Status**: Phase 1 & 2 Complete, Integration Phase Next 
\ No newline at end of file
+**Status**: Phase 1, 2 & 3 Complete, Integration Phase Ready 
\ No newline at end of file
diff --git a/src/components/EntitySelectionStep.vue b/src/components/EntitySelectionStep.vue
new file mode 100644
index 00000000..54c57219
--- /dev/null
+++ b/src/components/EntitySelectionStep.vue
@@ -0,0 +1,235 @@
+/**
+ * EntitySelectionStep.vue - Entity selection step component
+ * 
+ * Extracted from GiftedDialog.vue to handle the complete step 1 
+ * entity selection interface with dynamic labeling and grid display.
+ * 
+ * @author Matthew Raymer
+ */
+<template>
+  <div id="sectionGiftedGiver">
+    <label class="block font-bold mb-4">
+      {{ stepLabel }}
+    </label>
+
+    <EntityGrid
+      :entity-type="shouldShowProjects ? 'projects' : 'people'"
+      :entities="shouldShowProjects ? projects : allContacts"
+      :max-items="10"
+      :active-did="activeDid"
+      :all-my-dids="allMyDids"
+      :all-contacts="allContacts"
+      :conflict-checker="conflictChecker"
+      :show-you-entity="shouldShowYouEntity"
+      :you-selectable="youSelectable"
+      :show-all-route="showAllRoute"
+      :show-all-query-params="showAllQueryParams"
+      @entity-selected="handleEntitySelected"
+    />
+
+    <button
+      class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-lg"
+      @click="handleCancel"
+    >
+      Cancel
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-facing-decorator";
+import EntityGrid from "./EntityGrid.vue";
+import { Contact } from "@/interfaces/contact";
+import { PlanData } from "@/interfaces/plan-data";
+
+/**
+ * Entity selection event data structure
+ */
+interface EntitySelectionEvent {
+  type: "person" | "project" | "special";
+  entityType?: string;
+  data: any;
+}
+
+/**
+ * EntitySelectionStep - Complete step 1 entity selection interface
+ * 
+ * Features:
+ * - Dynamic step labeling based on context
+ * - EntityGrid integration for unified entity display
+ * - Conflict detection and prevention
+ * - Special entity handling (You, Unnamed)
+ * - Show All navigation with context preservation
+ * - Cancel functionality
+ * - Event delegation for entity selection
+ */
+@Component({
+  components: {
+    EntityGrid,
+  },
+})
+export default class EntitySelectionStep extends Vue {
+  /** Type of step: 'giver' or 'recipient' */
+  @Prop({ required: true })
+  stepType!: "giver" | "recipient";
+
+  /** Type of giver entity: 'person' or 'project' */
+  @Prop({ required: true })
+  giverEntityType!: "person" | "project";
+
+  /** Type of recipient entity: 'person' or 'project' */
+  @Prop({ required: true })
+  recipientEntityType!: "person" | "project";
+
+  /** Whether to show projects instead of people */
+  @Prop({ default: false })
+  showProjects!: boolean;
+
+  /** Whether this is from a project view */
+  @Prop({ default: false })
+  isFromProjectView!: boolean;
+
+  /** Array of available projects */
+  @Prop({ required: true })
+  projects!: PlanData[];
+
+  /** Array of available contacts */
+  @Prop({ required: true })
+  allContacts!: Contact[];
+
+  /** Active user's DID */
+  @Prop({ required: true })
+  activeDid!: string;
+
+  /** All user's DIDs */
+  @Prop({ required: true })
+  allMyDids!: string[];
+
+  /** Function to check if a DID would create a conflict */
+  @Prop({ required: true })
+  conflictChecker!: (did: string) => boolean;
+
+  /** Project ID for context (giver) */
+  @Prop({ default: "" })
+  fromProjectId!: string;
+
+  /** Project ID for context (recipient) */
+  @Prop({ default: "" })
+  toProjectId!: string;
+
+  /** Current giver entity for context */
+  @Prop()
+  giver?: any;
+
+  /** Current receiver entity for context */
+  @Prop()
+  receiver?: any;
+
+  /**
+   * Computed step label based on context
+   */
+  get stepLabel(): string {
+    if (this.stepType === "recipient") {
+      return "Choose who received the gift:";
+    } else if (this.showProjects) {
+      return "Choose a project benefitted from:";
+    } else {
+      return "Choose a person received from:";
+    }
+  }
+
+  /**
+   * Whether to show projects in the grid
+   */
+  get shouldShowProjects(): boolean {
+    return (
+      (this.stepType === "giver" && this.giverEntityType === "project") ||
+      (this.stepType === "recipient" && this.recipientEntityType === "project")
+    );
+  }
+
+  /**
+   * Whether to show the "You" entity
+   */
+  get shouldShowYouEntity(): boolean {
+    return (
+      this.stepType === "recipient" ||
+      (this.stepType === "giver" && this.isFromProjectView)
+    );
+  }
+
+  /**
+   * Whether the "You" entity is selectable
+   */
+  get youSelectable(): boolean {
+    return !this.conflictChecker(this.activeDid);
+  }
+
+  /**
+   * Route name for "Show All" navigation
+   */
+  get showAllRoute(): string {
+    if (this.shouldShowProjects) {
+      return "discover";
+    } else if (this.allContacts.length > 0) {
+      return "contact-gift";
+    }
+    return "";
+  }
+
+  /**
+   * Query parameters for "Show All" navigation
+   */
+  get showAllQueryParams(): Record<string, any> {
+    if (this.shouldShowProjects) {
+      return {};
+    }
+
+    return {
+      stepType: this.stepType,
+      giverEntityType: this.giverEntityType,
+      recipientEntityType: this.recipientEntityType,
+      ...(this.stepType === "giver"
+        ? {
+            recipientProjectId: this.toProjectId,
+            recipientProjectName: this.receiver?.name,
+            recipientProjectImage: this.receiver?.image,
+            recipientProjectHandleId: this.receiver?.handleId,
+            recipientDid: this.receiver?.did,
+          }
+        : {
+            giverProjectId: this.fromProjectId,
+            giverProjectName: this.giver?.name,
+            giverProjectImage: this.giver?.image,
+            giverProjectHandleId: this.giver?.handleId,
+            giverDid: this.giver?.did,
+          }),
+      fromProjectId: this.fromProjectId,
+      toProjectId: this.toProjectId,
+      showProjects: this.showProjects.toString(),
+      isFromProjectView: this.isFromProjectView.toString(),
+    };
+  }
+
+  /**
+   * Handle entity selection from EntityGrid
+   */
+  handleEntitySelected(event: EntitySelectionEvent): void {
+    this.$emit("entity-selected", {
+      stepType: this.stepType,
+      ...event,
+    });
+  }
+
+  /**
+   * Handle cancel button click
+   */
+  handleCancel(): void {
+    this.$emit("cancel");
+  }
+}
+</script>
+
+<style scoped>
+/* Component-specific styles if needed */
+</style> 
\ No newline at end of file
diff --git a/src/components/GiftDetailsStep.vue b/src/components/GiftDetailsStep.vue
new file mode 100644
index 00000000..b6ab6330
--- /dev/null
+++ b/src/components/GiftDetailsStep.vue
@@ -0,0 +1,371 @@
+/**
+ * GiftDetailsStep.vue - Gift details step component
+ * 
+ * Extracted from GiftedDialog.vue to handle the complete step 2 
+ * gift details form interface with entity summaries and validation.
+ * 
+ * @author Matthew Raymer
+ */
+<template>
+  <div id="sectionGiftedGift">
+    <!-- Entity Summary Buttons -->
+    <div class="grid grid-cols-2 gap-2 mb-4">
+      <!-- Giver Button -->
+      <EntitySummaryButton
+        :entity="giver"
+        :entity-type="giverEntityType"
+        :label="giverLabel"
+        :editable="canEditGiver"
+        @edit-requested="handleEditGiver"
+      />
+
+      <!-- Recipient Button -->
+      <EntitySummaryButton
+        :entity="receiver"
+        :entity-type="recipientEntityType"
+        :label="recipientLabel"
+        :editable="canEditRecipient"
+        @edit-requested="handleEditRecipient"
+      />
+    </div>
+
+    <!-- Gift Description Input -->
+    <input
+      v-model="localDescription"
+      type="text"
+      class="block w-full rounded border border-slate-400 px-3 py-2 mb-4 placeholder:italic"
+      :placeholder="prompt || 'What was given?'"
+      @input="handleDescriptionChange"
+    />
+
+    <!-- Amount Input and Unit Selection -->
+    <div class="flex mb-4">
+      <AmountInput
+        :value="localAmount"
+        :min="0"
+        input-id="inputGivenAmount"
+        @update:value="handleAmountChange"
+      />
+
+      <select
+        v-model="localUnitCode"
+        class="flex-1 rounded border border-slate-400 ms-2 px-3 py-2"
+        @change="handleUnitCodeChange"
+      >
+        <option value="HUR">Hours</option>
+        <option value="USD">US $</option>
+        <option value="BTC">BTC</option>
+        <option value="BX">BX</option>
+        <option value="ETH">ETH</option>
+      </select>
+    </div>
+
+    <!-- Photo & More Options Link -->
+    <router-link
+      :to="photoOptionsRoute"
+      class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-lg mb-4"
+    >
+      Photo &amp; more options&hellip;
+    </router-link>
+
+    <!-- Sign & Send Info -->
+    <p class="text-center text-sm mb-4">
+      <b class="font-medium">Sign &amp; Send</b> to publish to the world
+      <font-awesome
+        icon="circle-info"
+        class="fa-fw text-blue-500 text-base cursor-pointer"
+        @click="handleExplainData"
+      />
+    </p>
+
+    <!-- Conflict Warning -->
+    <div 
+      v-if="hasConflict" 
+      class="mb-4 p-3 bg-red-50 border border-red-200 rounded-md"
+    >
+      <p class="text-red-700 text-sm text-center">
+        <font-awesome icon="exclamation-triangle" class="fa-fw mr-1" />
+        Cannot record: Same person selected as both giver and recipient
+      </p>
+    </div>
+
+    <!-- Action Buttons -->
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+      <button
+        :disabled="hasConflict"
+        :class="submitButtonClasses"
+        @click="handleSubmit"
+      >
+        Sign &amp; Send
+      </button>
+      <button
+        class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-lg"
+        @click="handleCancel"
+      >
+        Cancel
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-facing-decorator";
+import EntitySummaryButton from "./EntitySummaryButton.vue";
+import AmountInput from "./AmountInput.vue";
+import { RouteLocationRaw } from "vue-router";
+
+/**
+ * Entity data interface for giver/receiver
+ */
+interface EntityData {
+  did?: string;
+  handleId?: string;
+  name?: string;
+  image?: string;
+}
+
+/**
+ * GiftDetailsStep - Complete step 2 gift details form interface
+ * 
+ * Features:
+ * - Entity summary display with edit capability
+ * - Gift description input with placeholder support
+ * - Amount input with increment/decrement controls
+ * - Unit code selection (HUR, USD, BTC, etc.)
+ * - Photo & more options navigation
+ * - Conflict detection and warning display
+ * - Form validation and submission
+ * - Cancel functionality
+ */
+@Component({
+  components: {
+    EntitySummaryButton,
+    AmountInput,
+  },
+})
+export default class GiftDetailsStep extends Vue {
+  /** Giver entity data */
+  @Prop({ required: true })
+  giver!: EntityData | null;
+
+  /** Receiver entity data */
+  @Prop({ required: true })
+  receiver!: EntityData | null;
+
+  /** Type of giver entity: 'person' or 'project' */
+  @Prop({ required: true })
+  giverEntityType!: "person" | "project";
+
+  /** Type of recipient entity: 'person' or 'project' */
+  @Prop({ required: true })
+  recipientEntityType!: "person" | "project";
+
+  /** Gift description */
+  @Prop({ default: "" })
+  description!: string;
+
+  /** Gift amount */
+  @Prop({ default: 0 })
+  amount!: number;
+
+  /** Unit code (HUR, USD, etc.) */
+  @Prop({ default: "HUR" })
+  unitCode!: string;
+
+  /** Input placeholder text */
+  @Prop({ default: "" })
+  prompt!: string;
+
+  /** Whether this is from a project view */
+  @Prop({ default: false })
+  isFromProjectView!: boolean;
+
+  /** Whether there's a conflict between giver and receiver */
+  @Prop({ default: false })
+  hasConflict!: boolean;
+
+  /** Offer ID for context */
+  @Prop({ default: "" })
+  offerId!: string;
+
+  /** Project ID for context (giver) */
+  @Prop({ default: "" })
+  fromProjectId!: string;
+
+  /** Project ID for context (recipient) */
+  @Prop({ default: "" })
+  toProjectId!: string;
+
+  /** Local reactive copies of props for v-model */
+  private localDescription: string = "";
+  private localAmount: number = 0;
+  private localUnitCode: string = "HUR";
+
+  /**
+   * Initialize local values from props
+   */
+  mounted(): void {
+    this.localDescription = this.description;
+    this.localAmount = this.amount;
+    this.localUnitCode = this.unitCode;
+  }
+
+  /**
+   * Watch for external prop changes
+   */
+  @Watch("description")
+  onDescriptionChange(newValue: string): void {
+    this.localDescription = newValue;
+  }
+
+  @Watch("amount")
+  onAmountChange(newValue: number): void {
+    this.localAmount = newValue;
+  }
+
+  @Watch("unitCode")
+  onUnitCodeChange(newValue: string): void {
+    this.localUnitCode = newValue;
+  }
+
+  /**
+   * Computed label for giver entity
+   */
+  get giverLabel(): string {
+    return this.giverEntityType === "project" 
+      ? "Benefited from:" 
+      : "Received from:";
+  }
+
+  /**
+   * Computed label for recipient entity
+   */
+  get recipientLabel(): string {
+    return this.recipientEntityType === "project"
+      ? "Given to project:"
+      : "Given to:";
+  }
+
+  /**
+   * Whether the giver can be edited
+   */
+  get canEditGiver(): boolean {
+    return !(this.isFromProjectView && this.giverEntityType === "project");
+  }
+
+  /**
+   * Whether the recipient can be edited
+   */
+  get canEditRecipient(): boolean {
+    return this.recipientEntityType === "person";
+  }
+
+  /**
+   * Computed CSS classes for submit button
+   */
+  get submitButtonClasses(): string {
+    if (this.hasConflict) {
+      return "block w-full text-center text-md uppercase font-bold bg-gradient-to-b from-slate-300 to-slate-500 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-slate-400 px-1.5 py-2 rounded-lg cursor-not-allowed";
+    }
+    return "block w-full text-center text-md uppercase font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-lg";
+  }
+
+  /**
+   * Computed route for photo & more options
+   */
+  get photoOptionsRoute(): RouteLocationRaw {
+    return {
+      name: "gifted-details",
+      query: {
+        amountInput: this.localAmount.toString(),
+        description: this.localDescription,
+        giverDid: this.giverEntityType === "person" ? this.giver?.did : undefined,
+        giverName: this.giver?.name,
+        offerId: this.offerId,
+        fulfillsProjectId: this.giverEntityType === "person" && this.recipientEntityType === "project"
+          ? this.toProjectId
+          : undefined,
+        providerProjectId: this.giverEntityType === "project" && this.recipientEntityType === "person"
+          ? this.giver?.handleId
+          : this.fromProjectId,
+        recipientDid: this.receiver?.did,
+        recipientName: this.receiver?.name,
+        unitCode: this.localUnitCode,
+      },
+    };
+  }
+
+  /**
+   * Handle description input changes
+   */
+  handleDescriptionChange(): void {
+    this.$emit("update:description", this.localDescription);
+  }
+
+  /**
+   * Handle amount input changes
+   */
+  handleAmountChange(newAmount: number): void {
+    this.localAmount = newAmount;
+    this.$emit("update:amount", newAmount);
+  }
+
+  /**
+   * Handle unit code selection changes
+   */
+  handleUnitCodeChange(): void {
+    this.$emit("update:unitCode", this.localUnitCode);
+  }
+
+  /**
+   * Handle giver edit request
+   */
+  handleEditGiver(): void {
+    this.$emit("edit-entity", {
+      entityType: "giver",
+      currentEntity: this.giver,
+    });
+  }
+
+  /**
+   * Handle recipient edit request
+   */
+  handleEditRecipient(): void {
+    this.$emit("edit-entity", {
+      entityType: "recipient",
+      currentEntity: this.receiver,
+    });
+  }
+
+  /**
+   * Handle explain data info click
+   */
+  handleExplainData(): void {
+    this.$emit("explain-data");
+  }
+
+  /**
+   * Handle form submission
+   */
+  handleSubmit(): void {
+    if (!this.hasConflict) {
+      this.$emit("submit", {
+        description: this.localDescription,
+        amount: this.localAmount,
+        unitCode: this.localUnitCode,
+      });
+    }
+  }
+
+  /**
+   * Handle cancel button click
+   */
+  handleCancel(): void {
+    this.$emit("cancel");
+  }
+}
+</script>
+
+<style scoped>
+/* Component-specific styles if needed */
+</style> 
\ No newline at end of file