diff --git a/app/components/Navbar.vue b/app/components/Navbar.vue
index ab9dca8f..9d4403de 100644
--- a/app/components/Navbar.vue
+++ b/app/components/Navbar.vue
@@ -64,7 +64,7 @@ function handleCreateNft() {
 
 function handleMassMint() {
   isCreateModalOpen.value = false
-  router.push('/massmint/onboarding')
+  router.push('/massmint')
 }
 
 function handleAirdrop() {
diff --git a/app/components/common/Stepper.vue b/app/components/common/Stepper.vue
new file mode 100644
index 00000000..4879cf9d
--- /dev/null
+++ b/app/components/common/Stepper.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+export interface StepConfig {
+  label: string
+  icon?: string
+}
+
+const props = defineProps<{
+  steps: StepConfig[]
+  currentStep: number
+  completedSteps: number[]
+  maxStepReached?: number
+}>()
+
+const emit = defineEmits<{
+  stepClick: [step: number]
+}>()
+
+function isCompleted(index: number) {
+  return props.completedSteps.includes(index)
+}
+
+function isCurrent(index: number) {
+  return props.currentStep === index
+}
+
+function isReachable(index: number) {
+  return !isCurrent(index) && !isCompleted(index) && props.maxStepReached !== undefined && index <= props.maxStepReached
+}
+
+function isClickable(index: number) {
+  return isCompleted(index) || isReachable(index)
+}
+
+function handleClick(index: number) {
+  if (isClickable(index)) {
+    emit('stepClick', index)
+  }
+}
+</script>
+
+<template>
+  <div class="flex items-center justify-center gap-2">
+    <template v-for="(step, index) in steps" :key="index">
+      <button
+        type="button"
+        :aria-label="step.label || `Step ${index + 1}`"
+        :aria-current="isCurrent(index) ? 'step' : undefined"
+        :aria-disabled="!isClickable(index) && !isCurrent(index)"
+        class="flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium transition-all duration-200"
+        :class="{
+          'bg-primary text-white': isCurrent(index),
+          'bg-primary/10 text-primary cursor-pointer hover:bg-primary/20': isCompleted(index) && !isCurrent(index),
+          'bg-muted text-foreground cursor-pointer hover:bg-muted/80': isReachable(index),
+          'bg-muted text-muted-foreground': !isCurrent(index) && !isCompleted(index) && !isReachable(index),
+          'cursor-default': !isClickable(index) && !isCurrent(index),
+        }"
+        :disabled="!isClickable(index) && !isCurrent(index)"
+        @click="handleClick(index)"
+      >
+        <UIcon
+          v-if="isCompleted(index) && !isCurrent(index)"
+          name="i-heroicons-check-20-solid"
+          class="w-4 h-4"
+        />
+        <UIcon
+          v-else-if="step.icon"
+          :name="step.icon"
+          class="w-4 h-4"
+        />
+        <span v-else class="w-5 h-5 rounded-full border-2 flex items-center justify-center text-xs" :class="isCurrent(index) ? 'border-white' : 'border-current'">
+          {{ index + 1 }}
+        </span>
+        <span class="hidden sm:inline">{{ step.label }}</span>
+      </button>
+
+      <div
+        v-if="index < steps.length - 1"
+        class="h-px flex-1 max-w-8 transition-colors duration-200"
+        :class="isCompleted(index) ? 'bg-primary' : 'bg-border'"
+      />
+    </template>
+  </div>
+</template>
diff --git a/app/components/massmint/MassMint.vue b/app/components/massmint/MassMint.vue
index 7c58f7fd..2955aea2 100644
--- a/app/components/massmint/MassMint.vue
+++ b/app/components/massmint/MassMint.vue
@@ -1,19 +1,18 @@
 <script setup lang="ts">
-import type { NFT, NFTToMint } from './types'
+import type { StepConfig } from '~/components/common/Stepper.vue'
+import type { NFT, NFTToMint } from '~/components/massmint/types'
+import type { TemplateFormat } from '~/components/massmint/utils'
 import { LazyReviewMassMintModal } from '#components'
 import { useQuery } from '@tanstack/vue-query'
+import CommonStepper from '~/components/common/Stepper.vue'
+import EditPanel from '~/components/massmint/EditPanel.vue'
+import MassMintUploadStep from '~/components/massmint/MassMintUploadStep.vue'
+import OverviewTable from '~/components/massmint/OverviewTable.vue'
+import UploadDescription from '~/components/massmint/upload/UploadDescription.vue'
+import { convertNftsToMap, generateTemplateContent } from '~/components/massmint/utils'
 import { blockchains } from '~/composables/create/useCollectionForm'
 import { useMassMint } from '~/composables/massmint/useMassMint'
 import { useMassMintForm } from '~/composables/massmint/useMassMintForm'
-import EditPanel from './EditPanel.vue'
-import OverviewTable from './OverviewTable.vue'
-import UploadCompressedMedia from './upload/UploadCompressedMedia.vue'
-import UploadDescription from './upload/UploadDescription.vue'
-
-// Props and emits
-const emit = defineEmits<{
-  backToOnboarding: []
-}>()
 
 // State
 const NFTS = ref<{ [nftId: string]: NFT }>({})
@@ -57,6 +56,9 @@ const { data: balanceData } = useQuery({
 const hasEnoughBalance = computed(() => (Number(balanceData?.value?.balance || 0) - existentialDeposit.value) > total.value)
 const numOfValidNFTs = computed(() => (Object.values(NFTS.value) as NFT[]).length)
 
+const numMissingNames = computed(() => {
+  return (Object.values(NFTS.value) as NFT[]).filter(nft => !nft.name || nft.name.trim() === '').length
+})
 const numMissingDescriptions = computed(() => {
   return (Object.values(NFTS.value) as NFT[]).filter(nft => !nft.description || nft.description.trim() === '').length
 })
@@ -65,15 +67,148 @@ const numMissingPrices = computed(() => {
   return (Object.values(NFTS.value) as NFT[]).filter(nft => nft.price === undefined || nft.price === 0).length
 })
 
-// Helper function
-function convertNftsToMap(nfts: any[]) {
-  return nfts.map((file, i) => ({ ...file, id: i + 1 }))
-    .reduce((acc, nft) => ({ ...acc, [nft.id]: nft }), {})
+const transactionFee = computed(() => itemDeposit.value * numOfValidNFTs.value)
+
+const itemDepositTotal = computed(() => itemDeposit.value * numOfValidNFTs.value)
+const metadataDepositTotal = computed(() => metadataDeposit.value * numOfValidNFTs.value)
+const totalAttribute = computed(() => (Object.values(NFTS.value) as NFT[]).reduce(
+  (sum, nft) => sum + (nft.attributes?.length || 0),
+  0,
+))
+const attributeDepositTotal = computed(() => totalAttribute.value * attributeDeposit.value)
+
+const estimatedCostOpen = ref(true)
+const steps = [
+  { id: 1, title: 'Collection', description: 'Choose chain and collection' },
+  { id: 2, title: 'Upload', description: 'Upload media files' },
+  { id: 3, title: 'Metadata', description: 'Prepare and upload metadata file' },
+  { id: 4, title: 'Review', description: 'Check items and estimated cost' },
+  { id: 5, title: 'Mint', description: 'Submit your mass mint transaction' },
+] as const
+
+const stepConfig: StepConfig[] = [
+  { label: 'Collection', icon: 'i-heroicons-folder' },
+  { label: 'Upload', icon: 'i-heroicons-arrow-up-tray' },
+  { label: 'Metadata', icon: 'i-heroicons-document-text' },
+  { label: 'Review', icon: 'i-heroicons-clipboard-document-list' },
+  { label: 'Mint', icon: 'i-heroicons-sparkles' },
+]
+
+const currentStep = ref<number>(1)
+
+const stepperCompletedSteps = computed(() =>
+  Array.from({ length: Math.max(0, currentStep.value - 1) }, (_, i) => i),
+)
+
+const stepperMaxStepReached = computed(() => {
+  let max = 0
+  for (let i = 0; i < steps.length; i++) {
+    if (canNavigateTo(i + 1))
+      max = i
+  }
+  return max
+})
+
+const canGoToUploadStep = computed(() => !!selectedCollection.value)
+const canGoToMetadataStep = computed(
+  () => !!selectedCollection.value && mediaLoaded.value,
+)
+const canGoToReviewStep = computed(
+  () => mediaLoaded.value && numOfValidNFTs.value > 0 && numMissingNames.value === 0,
+)
+const canGoToMintStep = computed(
+  () => canGoToReviewStep.value && hasEnoughBalance.value,
+)
+
+function canNavigateTo(stepId: number) {
+  if (stepId <= currentStep.value) {
+    return true
+  }
+
+  if (stepId === 2) {
+    return canGoToUploadStep.value
+  }
+
+  if (stepId === 3) {
+    return canGoToMetadataStep.value
+  }
+
+  if (stepId === 4) {
+    return canGoToReviewStep.value
+  }
+
+  if (stepId === 5) {
+    return canGoToMintStep.value
+  }
+
+  return false
+}
+
+function goToStep(stepId: number) {
+  if (stepId < 1 || stepId > steps.length) {
+    return
+  }
+
+  if (!canNavigateTo(stepId)) {
+    return
+  }
+
+  currentStep.value = stepId
+}
+
+function goNextStep() {
+  goToStep(currentStep.value + 1)
+}
+
+function goPreviousStep() {
+  goToStep(currentStep.value - 1)
+}
+
+function onStepperStepClick(stepIndex: number) {
+  goToStep(stepIndex + 1)
+}
+
+function downloadMetadataTemplate(format: TemplateFormat) {
+  const nfts = Object.values(NFTS.value) as NFT[]
+
+  if (!nfts.length) {
+    warningMessage('Upload art files first to generate a metadata template.')
+    return
+  }
+
+  const content = generateTemplateContent(format, nfts)
+  const mimeTypes: Record<TemplateFormat, string> = {
+    json: 'application/json;charset=utf-8',
+    csv: 'text/csv;charset=utf-8',
+    txt: 'text/plain;charset=utf-8',
+  }
+  const extensions: Record<TemplateFormat, string> = {
+    json: 'json',
+    csv: 'csv',
+    txt: 'txt',
+  }
+  const blob = new Blob([content], { type: mimeTypes[format] })
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+
+  link.href = url
+  link.download = `massmint-template.${extensions[format]}`
+
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+
+  URL.revokeObjectURL(url)
 }
 
-// Methods
-function onMediaZipLoaded(data: { validFiles: any[], areAllFilesValid: boolean }) {
-  NFTS.value = convertNftsToMap(data.validFiles)
+const templateDownloadItems = [
+  { label: 'Download as JSON', icon: 'i-heroicons-document-text', onSelect: () => downloadMetadataTemplate('json') },
+  { label: 'Download as CSV', icon: 'i-heroicons-table-cells', onSelect: () => downloadMetadataTemplate('csv') },
+  { label: 'Download as TXT', icon: 'i-heroicons-document', onSelect: () => downloadMetadataTemplate('txt') },
+]
+
+function onMediaZipLoaded(data: { validFiles: NFT[] }) {
+  NFTS.value = convertNftsToMap(data.validFiles) as { [nftId: string]: NFT }
   mediaLoaded.value = true
 }
 
@@ -100,14 +235,7 @@ function onDescriptionLoaded(entries: Record<string, any>) {
     }
   })
 
-  // sort the NFTS by sortedIndex
-  const sortedNfts = (Object.values(NFTS.value) as NFT[]).sort((a: NFT, b: NFT) => (a.sortedIndex || 0) - (b.sortedIndex || 0))
-
-  NFTS.value = convertNftsToMap(sortedNfts as any[])
-}
-
-function toOnboarding() {
-  emit('backToOnboarding')
+  NFTS.value = convertNftsToMap(Object.values(NFTS.value) as NFT[]) as { [nftId: string]: NFT }
 }
 
 function openReviewModal() {
@@ -196,29 +324,60 @@ function deleteNFT(nft?: NFT) {
     .map((nft: NFT, i: number) => ({ ...nft, id: i + 1 }))
     .reduce((acc: { [id: string]: NFT }, nft: NFT) => ({ ...acc, [nft.id]: nft }), {})
 }
+
+// Shared description: applies only to items without an individual description
+const sharedDescription = ref('')
+
+function applySharedDescriptionToAll() {
+  const text = sharedDescription.value?.trim()
+  if (!text) {
+    warningMessage('Enter a shared description first.')
+    return
+  }
+
+  const nfts = Object.values(NFTS.value) as NFT[]
+  if (nfts.length === 0) {
+    return
+  }
+
+  const nftsToUpdate = nfts.filter(nft => !nft.description || !nft.description.trim())
+  if (nftsToUpdate.length === 0) {
+    warningMessage('All items already have a description.')
+    return
+  }
+
+  const next: { [id: string]: NFT } = { ...NFTS.value }
+  nftsToUpdate.forEach((nft) => {
+    next[nft.id] = { ...nft, description: text }
+  })
+  NFTS.value = next
+  successMessage(`Applied shared description to ${nftsToUpdate.length} item(s).`)
+}
 </script>
 
 <template>
   <div class="space-y-8">
-    <!-- Header Section -->
-    <div class="flex">
-      <UButton
-        class="max-lg:mb-8"
-        variant="outline"
-        icon="i-heroicons-arrow-left"
-        @click="toOnboarding"
-      >
-        Back To Onboarding
-      </UButton>
-    </div>
-
-    <!-- Main Content Section -->
-    <section class="border border-border rounded-lg shadow-sm">
+    <!-- Stepper -->
+    <section class="border border-border rounded-lg shadow-sm p-4">
+      <CommonStepper
+        :steps="stepConfig"
+        :current-step="currentStep - 1"
+        :completed-steps="stepperCompletedSteps"
+        :max-step-reached="stepperMaxStepReached"
+        @step-click="onStepperStepClick"
+      />
+    </section>
+
+    <!-- Step 1: Collection -->
+    <section
+      v-if="currentStep === 1"
+      class="border border-border rounded-lg shadow-sm"
+    >
       <div class="space-y-4 p-6">
         <p class="mb-4 text-lg font-medium">
-          Choose a collection to which you want to mint
+          Choose a chain and collection, then continue to upload your art files.
         </p>
-        <div class="flex gap-4 items-center">
+        <div class="flex flex-col gap-4 md:flex-row md:items-center">
           <UFormField
             name="blockchain"
             label="Blockchain"
@@ -226,11 +385,12 @@ function deleteNFT(nft?: NFT) {
             help="Choose the blockchain network of the collection"
           >
             <USelectMenu
-              v-model="state.blockchain"
+              :model-value="state.blockchain"
               :items="blockchains"
               value-key="value"
               placeholder="Select a blockchain"
               class="w-full"
+              @update:model-value="value => state.blockchain = value as typeof state.blockchain"
             />
           </UFormField>
 
@@ -241,8 +401,8 @@ function deleteNFT(nft?: NFT) {
             help="Select the collection to mass mint"
           >
             <USelectMenu
-              :key="collections.map((collection: { value: string }) => collection.value).join(',')"
-              v-model="state.collection"
+              :key="collections.map((c: { value: string }) => c.value).join(',')"
+              :model-value="state.collection"
               :items="collections"
               value-key="value"
               placeholder="Select a collection"
@@ -250,22 +410,91 @@ function deleteNFT(nft?: NFT) {
               :disabled="collectionsLoading"
               :loading="collectionsLoading"
               class="w-full"
+              @update:model-value="value => state.collection = (value || '') as typeof state.collection"
             />
           </UFormField>
         </div>
+
+        <div
+          v-if="!collectionsLoading && state.blockchain && collections.length === 0"
+          class="rounded-lg border border-border bg-muted/30 p-4"
+        >
+          <p class="mb-3 text-sm text-muted-foreground">
+            No collections found on this chain. Create one first, then return here to mass mint.
+          </p>
+          <UButton
+            to="/create/collection"
+            size="sm"
+          >
+            Create collection
+          </UButton>
+        </div>
+      </div>
+
+      <div class="flex items-center justify-between border-t border-border px-6 py-4">
+        <span class="text-sm text-muted-foreground">
+          Step 1 of 5 · Select a chain and collection to continue.
+        </span>
+        <UButton
+          size="sm"
+          :disabled="!canGoToUploadStep"
+          @click="goNextStep"
+        >
+          Next: Upload
+        </UButton>
+      </div>
+    </section>
+
+    <!-- Step 2: Upload media -->
+    <MassMintUploadStep
+      v-else-if="currentStep === 2"
+      :selected-collection="state.collection || undefined"
+      :nfts="NFTS"
+      :media-loaded="mediaLoaded"
+      :can-go-to-metadata-step="canGoToMetadataStep"
+      @media-zip-loaded="onMediaZipLoaded"
+      @media-zip-reordered="onMediaZipLoaded"
+      @delete-nft="deleteNFT"
+      @next="goNextStep"
+    />
+
+    <!-- Step 3: Metadata -->
+    <section
+      v-else-if="currentStep === 3"
+      class="border border-border rounded-lg shadow-sm"
+    >
+      <div class="space-y-4 p-6">
+        <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+          <div>
+            <p class="mb-1 text-lg font-semibold">
+              Metadata
+            </p>
+            <p class="text-sm text-muted-foreground">
+              Download an auto-generated template, edit it, then upload it here. The preview table below updates from the metadata file.
+            </p>
+          </div>
+          <UDropdownMenu
+            :items="templateDownloadItems"
+            :content="{ align: 'end', side: 'bottom', sideOffset: 8 }"
+          >
+            <UButton
+              variant="ghost"
+              size="sm"
+              icon="i-heroicons-arrow-down-tray"
+              trailing-icon="i-heroicons-chevron-down-20-solid"
+              :disabled="!mediaLoaded"
+            >
+              Download template
+            </UButton>
+          </UDropdownMenu>
+        </div>
       </div>
-      <UploadCompressedMedia
-        :disabled="!selectedCollection"
-        @zip-loaded="onMediaZipLoaded"
-      />
 
-      <!-- Upload Description File Section -->
       <UploadDescription
         :disabled="!mediaLoaded"
         @file-loaded="onDescriptionLoaded"
       />
 
-      <!-- Overview Table Section -->
       <OverviewTable
         :disabled="!mediaLoaded"
         :nfts="NFTS"
@@ -273,48 +502,277 @@ function deleteNFT(nft?: NFT) {
         @open-side-bar-with="openSideBarWith"
         @delete="deleteNFT"
       />
+
+      <!-- Shared description: applies to items without an individual description -->
+      <div class="border-t border-border px-6 py-4 space-y-3">
+        <p class="text-sm font-semibold">
+          Shared Description
+        </p>
+        <div class="relative">
+          <UTextarea
+            v-model="sharedDescription"
+            :rows="4"
+            autoresize
+            placeholder="Applies to all items without an individual description"
+            class="w-full min-h-[100px]"
+            :disabled="!mediaLoaded"
+          />
+        </div>
+        <UButton
+          variant="outline"
+          size="sm"
+          icon="i-heroicons-check"
+          :disabled="!mediaLoaded || !sharedDescription?.trim() || numOfValidNFTs === 0"
+          @click="applySharedDescriptionToAll"
+        >
+          Apply to All
+        </UButton>
+      </div>
+
       <EditPanel
         :open="isEditPanelOpen"
         :nft="selectedNft"
         @close="closeEditPanel"
         @save="saveEditedNft"
       />
-    </section>
 
-    <!-- Action Button -->
-    <div class="flex justify-center w-full pb-8">
-      <div class="flex flex-col items-center flex-1 max-w-md gap-4">
+      <div class="flex items-center justify-between border-t border-border px-6 py-4">
         <UButton
-          class="w-full"
-          size="lg"
-          :disabled="!mediaLoaded || !hasEnoughBalance || isMinting"
-          :loading="isMinting"
-          @click="openReviewModal"
+          variant="ghost"
+          size="sm"
+          @click="goPreviousStep"
         >
-          <span class="text-xl">
-            <template v-if="isMinting">
-              {{ progress.message }}
-            </template>
-            <template v-else>
-              {{ hasEnoughBalance ? 'Mint NFTs' : 'Not Enough Funds' }}
+          Back
+        </UButton>
+        <div class="flex items-center gap-3">
+          <span class="text-xs text-muted-foreground">
+            {{ numOfValidNFTs }} items loaded
+          </span>
+          <UButton
+            size="sm"
+            :disabled="!canGoToReviewStep"
+            @click="goNextStep"
+          >
+            Next: Review
+          </UButton>
+        </div>
+      </div>
+    </section>
+
+    <!-- Step 4: Review -->
+    <section
+      v-else-if="currentStep === 4"
+      class="border border-border rounded-lg shadow-sm"
+    >
+      <div class="space-y-6 p-6">
+        <div class="space-y-2">
+          <p class="text-lg font-semibold">
+            Review your batch
+          </p>
+          <p class="text-sm text-muted-foreground">
+            Check that all items have the correct names, descriptions, prices, and properties before minting.
+          </p>
+        </div>
+
+        <div class="grid gap-4 md:grid-cols-3">
+          <div class="rounded-lg border border-border bg-muted/30 p-4">
+            <div class="text-xs font-medium text-muted-foreground">
+              Items
+            </div>
+            <div class="mt-2 text-2xl font-semibold">
+              {{ numOfValidNFTs }}
+            </div>
+          </div>
+          <div class="rounded-lg border border-border bg-muted/30 p-4">
+            <div class="text-xs font-medium text-muted-foreground">
+              Missing descriptions
+            </div>
+            <div class="mt-2 text-2xl font-semibold">
+              {{ numMissingDescriptions }}
+            </div>
+          </div>
+          <div class="rounded-lg border border-border bg-muted/30 p-4">
+            <div class="text-xs font-medium text-muted-foreground">
+              Missing prices
+            </div>
+            <div class="mt-2 text-2xl font-semibold">
+              {{ numMissingPrices }}
+            </div>
+          </div>
+        </div>
+
+        <div class="flex flex-wrap items-center justify-between gap-3">
+          <div class="text-xs text-muted-foreground">
+            You can still edit individual items from the overview table in the previous step.
+          </div>
+          <UButton
+            variant="outline"
+            size="sm"
+            @click="openReviewModal"
+          >
+            Open detailed review
+          </UButton>
+        </div>
+        <div class="rounded-lg border border-border bg-muted/30">
+          <button
+            type="button"
+            class="flex w-full items-center justify-between gap-3 p-4 text-left transition-colors hover:bg-muted/50"
+            @click="estimatedCostOpen = !estimatedCostOpen"
+          >
+            <div class="flex items-center gap-2">
+              <UIcon
+                name="i-heroicons-chevron-down"
+                class="size-5 shrink-0 text-muted-foreground transition-transform"
+                :class="{ '-rotate-90': !estimatedCostOpen }"
+              />
+              <span class="text-sm font-medium">
+                Estimated Cost · {{ numOfValidNFTs }} items
+              </span>
+            </div>
+            <div class="flex items-center gap-3">
+              <Money :value="total" inline :chain="state.blockchain" />
               <span
-                v-if="numOfValidNFTs && hasEnoughBalance"
-                class="font-bold"
+                class="text-xs font-medium"
+                :class="hasEnoughBalance ? 'text-emerald-500' : 'text-amber-500'"
               >
-                ({{ numOfValidNFTs }})
+                {{ hasEnoughBalance ? 'Sufficient balance' : 'Not enough balance' }}
               </span>
-            </template>
-          </span>
+            </div>
+          </button>
+          <div
+            v-show="estimatedCostOpen"
+            class="border-t border-border px-4 pb-4 pt-1"
+          >
+            <div class="space-y-2 pt-2">
+              <div class="flex items-center justify-between gap-4 text-sm">
+                <div class="flex flex-col">
+                  <span class="font-medium">Item Deposit</span>
+                  <span class="text-xs text-muted-foreground">
+                    <Money :value="itemDeposit" inline :chain="state.blockchain" hide-unit /> × {{ numOfValidNFTs }}
+                  </span>
+                </div>
+                <Money :value="itemDepositTotal" inline :chain="state.blockchain" />
+              </div>
+              <div class="flex items-center justify-between gap-4 text-sm">
+                <div class="flex flex-col">
+                  <span class="font-medium">Metadata Deposit</span>
+                  <span class="text-xs text-muted-foreground">
+                    <Money :value="metadataDeposit" inline :chain="state.blockchain" hide-unit /> × {{ numOfValidNFTs }}
+                  </span>
+                </div>
+                <Money :value="metadataDepositTotal" inline :chain="state.blockchain" />
+              </div>
+              <div
+                v-if="attributeDepositTotal > 0"
+                class="flex items-center justify-between gap-4 text-sm"
+              >
+                <div class="flex flex-col">
+                  <span class="font-medium">Attribute Deposit</span>
+                  <span class="text-xs text-muted-foreground">
+                    <Money :value="attributeDeposit" inline :chain="state.blockchain" hide-unit /> × {{ totalAttribute }}
+                  </span>
+                </div>
+                <Money :value="attributeDepositTotal" inline :chain="state.blockchain" />
+              </div>
+              <div class="flex items-center justify-between gap-4 text-sm">
+                <span class="font-medium">Estimated Transaction Fee</span>
+                <Money :value="transactionFee" inline :chain="state.blockchain" />
+              </div>
+              <div class="flex items-center justify-between gap-4 border-t border-border pt-2 text-sm">
+                <span class="font-semibold">Total Deposit</span>
+                <Money :value="total" inline :chain="state.blockchain" class="font-semibold" />
+              </div>
+            </div>
+            <p class="mt-3 text-xs text-muted-foreground">
+              Deposits are refundable when items are burned. Network fees are charged separately per transaction.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex items-center justify-between border-t border-border px-6 py-4">
+        <UButton
+          variant="ghost"
+          size="sm"
+          @click="goPreviousStep"
+        >
+          Back
         </UButton>
+        <UButton
+          size="sm"
+          :disabled="!canGoToMintStep"
+          @click="goNextStep"
+        >
+          Next: Mint
+        </UButton>
+      </div>
+    </section>
 
-        <div v-if="mediaLoaded" class="flex gap-2 w-full justify-between">
-          <span class="text-gray-600 dark:text-gray-400">
-            Est. Cost:
-          </span>
+    <!-- Step 5: Mint -->
+    <section
+      v-else-if="currentStep === 5"
+      class="border border-border rounded-lg shadow-sm"
+    >
+      <div class="space-y-6 p-6">
+        <div class="space-y-2">
+          <p class="text-lg font-semibold">
+            Mint your NFTs
+          </p>
+          <p class="text-sm text-muted-foreground">
+            When you are ready, start the mass mint flow. You will be guided through a detailed review and transaction signing.
+          </p>
+        </div>
 
-          <Money :value="total" inline :chain="state.blockchain" />
+        <div class="flex flex-col items-center gap-4">
+          <UButton
+            class="w-full max-w-md"
+            size="lg"
+            :disabled="!mediaLoaded || !hasEnoughBalance || isMinting"
+            :loading="isMinting"
+            @click="openReviewModal"
+          >
+            <span class="text-xl">
+              <template v-if="isMinting">
+                {{ progress.message }}
+              </template>
+              <template v-else>
+                {{ hasEnoughBalance ? 'Mint NFTs' : 'Not Enough Funds' }}
+                <span
+                  v-if="numOfValidNFTs && hasEnoughBalance"
+                  class="font-bold"
+                >
+                  ({{ numOfValidNFTs }})
+                </span>
+              </template>
+            </span>
+          </UButton>
+
+          <div v-if="mediaLoaded" class="flex w-full max-w-md flex-col gap-2">
+            <div class="flex items-center justify-between text-sm">
+              <span class="text-gray-600 dark:text-gray-400">
+                Est. Cost
+              </span>
+              <Money :value="total" inline :chain="state.blockchain" />
+            </div>
+            <p class="text-xs text-muted-foreground">
+              You will confirm this transaction in your wallet. Deposits are returned when items are removed from the chain.
+            </p>
+          </div>
         </div>
       </div>
-    </div>
+
+      <div class="flex items-center justify-between border-t border-border px-6 py-4">
+        <UButton
+          variant="ghost"
+          size="sm"
+          @click="goPreviousStep"
+        >
+          Back
+        </UButton>
+        <span class="text-xs text-muted-foreground">
+          Step 5 of 5
+        </span>
+      </div>
+    </section>
   </div>
 </template>
diff --git a/app/components/massmint/MassMintUploadStep.vue b/app/components/massmint/MassMintUploadStep.vue
new file mode 100644
index 00000000..5aa0818d
--- /dev/null
+++ b/app/components/massmint/MassMintUploadStep.vue
@@ -0,0 +1,289 @@
+<script setup lang="ts">
+import type { NFT, NFTS } from './types'
+import UploadCompressedMedia from './upload/UploadCompressedMedia.vue'
+
+const props = defineProps<{
+  selectedCollection?: string
+  nfts: NFTS
+  mediaLoaded: boolean
+  canGoToMetadataStep: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'mediaZipReordered', payload: { validFiles: NFT[] }): void
+  (e: 'mediaZipLoaded', payload: { validFiles: NFT[] }): void
+  (e: 'deleteNft', nft: NFT): void
+  (e: 'next'): void
+}>()
+
+const mediaFiles = computed<NFT[]>(() =>
+  Object.values(props.nfts as Record<string, NFT>),
+)
+
+const draggingMediaIndex = ref<number | null>(null)
+const fileViewMode = ref<'grid' | 'list'>('grid')
+
+function onMediaDragStart(index: number) {
+  draggingMediaIndex.value = index
+}
+
+function onMediaDragEnd() {
+  draggingMediaIndex.value = null
+}
+
+function onMediaDragOver(event: DragEvent) {
+  event.preventDefault()
+}
+
+function onMediaDrop(targetIndex: number) {
+  if (draggingMediaIndex.value === null || draggingMediaIndex.value === targetIndex) {
+    return
+  }
+
+  const items = [...mediaFiles.value]
+  const [moved] = items.splice(draggingMediaIndex.value, 1)
+
+  if (!moved) {
+    draggingMediaIndex.value = null
+    return
+  }
+
+  items.splice(targetIndex, 0, moved)
+
+  const reordered = items.map((nft, index) => ({ ...nft, id: index + 1 }))
+
+  const reorderedMap = reordered.reduce<NFTS>(
+    (acc, nft) => {
+      acc[nft.id] = nft
+      return acc
+    },
+    {},
+  )
+
+  emit('mediaZipReordered', { validFiles: Object.values(reorderedMap) })
+
+  draggingMediaIndex.value = null
+}
+
+function setFileViewMode(mode: 'grid' | 'list') {
+  fileViewMode.value = mode
+}
+
+function formatFileSize(file: File) {
+  if (!file?.size) {
+    return ''
+  }
+
+  const megabytes = file.size / (1024 * 1024)
+  return `${megabytes.toFixed(1)} MB`
+}
+
+function onNext() {
+  if (!props.canGoToMetadataStep) {
+    return
+  }
+
+  emit('next')
+}
+</script>
+
+<template>
+  <section class="border border-border rounded-lg shadow-sm">
+    <div class="space-y-4 p-6">
+      <p class="mb-4 text-lg font-medium">
+        Upload your art files. Drag and drop a ZIP or select files.
+      </p>
+
+      <UploadCompressedMedia
+        :disabled="!selectedCollection"
+        @zip-loaded="payload => emit('mediaZipLoaded', payload)"
+      />
+
+      <div
+        v-if="mediaLoaded && mediaFiles.length"
+        class="border-t border-border px-6 py-4"
+      >
+        <div class="mb-3 flex items-center justify-between gap-3">
+          <div>
+            <p class="text-sm font-medium">
+              Uploaded files
+            </p>
+            <p class="text-xs text-muted-foreground">
+              Drag and drop to change the order of your files.
+            </p>
+          </div>
+
+          <div class="flex items-center gap-1 rounded-md border border-border bg-muted/40 p-1">
+            <button
+              type="button"
+              aria-label="Grid view"
+              :aria-pressed="fileViewMode === 'grid'"
+              class="inline-flex h-8 w-8 items-center justify-center rounded-md text-xs"
+              :class="fileViewMode === 'grid' ? 'bg-background shadow-sm' : 'text-muted-foreground'"
+              @click="setFileViewMode('grid')"
+            >
+              <UIcon
+                name="i-heroicons-squares-2x2"
+                class="h-4 w-4"
+              />
+            </button>
+            <button
+              type="button"
+              aria-label="List view"
+              :aria-pressed="fileViewMode === 'list'"
+              class="inline-flex h-8 w-8 items-center justify-center rounded-md text-xs"
+              :class="fileViewMode === 'list' ? 'bg-background shadow-sm' : 'text-muted-foreground'"
+              @click="setFileViewMode('list')"
+            >
+              <UIcon
+                name="i-heroicons-list-bullet"
+                class="h-4 w-4"
+              />
+            </button>
+          </div>
+        </div>
+
+        <div v-if="fileViewMode === 'list'" class="max-h-64 overflow-y-auto">
+          <ul class="space-y-2">
+            <li
+              v-for="(nft, index) in mediaFiles"
+              :key="nft.id"
+              class="flex items-center justify-between rounded-md border border-border bg-muted/40 px-3 py-2 text-sm"
+              draggable="true"
+              @dragstart="onMediaDragStart(index)"
+              @dragover="onMediaDragOver"
+              @drop="onMediaDrop(index)"
+              @dragend="onMediaDragEnd"
+            >
+              <div class="flex items-center gap-3">
+                <UIcon
+                  name="i-heroicons-bars-3"
+                  class="h-4 w-4 text-muted-foreground"
+                />
+                <span class="w-6 font-mono text-xs text-muted-foreground">
+                  {{ index + 1 }}
+                </span>
+                <div class="flex items-center gap-3">
+                  <div class="h-5 w-5 shrink-0 overflow-hidden rounded bg-muted">
+                    <img
+                      v-if="nft.imageUrl"
+                      :src="nft.imageUrl"
+                      :alt="nft.name || nft.file?.name || `NFT ${nft.id}`"
+                      loading="lazy"
+                      decoding="async"
+                      class="h-full w-full object-cover"
+                    >
+                    <div
+                      v-else
+                      class="flex h-full w-full items-center justify-center"
+                    >
+                      <UIcon
+                        name="i-heroicons-photo"
+                        class="h-3 w-3 text-muted-foreground"
+                      />
+                    </div>
+                  </div>
+                  <div class="flex flex-col">
+                    <span class="max-w-[220px] truncate md:max-w-[360px]">
+                      {{ nft.file?.name || `File #${nft.id}` }}
+                    </span>
+                    <span class="text-xs text-muted-foreground">
+                      File · {{ formatFileSize(nft.file) }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              <button
+                type="button"
+                aria-label="Delete file"
+                class="inline-flex h-7 w-7 items-center justify-center rounded-md text-xs text-muted-foreground hover:text-destructive"
+                @click="emit('deleteNft', nft)"
+              >
+                <UIcon
+                  name="i-heroicons-trash"
+                  class="h-4 w-4"
+                />
+              </button>
+            </li>
+          </ul>
+        </div>
+
+        <div
+          v-else
+          class="max-h-64 overflow-y-auto"
+        >
+          <div class="grid grid-cols-5 gap-2 md:grid-cols-8">
+            <div
+              v-for="(nft, index) in mediaFiles"
+              :key="nft.id"
+              class="flex cursor-grab flex-col rounded border border-border bg-muted/40 p-1.5 text-[10px]"
+              draggable="true"
+              @dragstart="onMediaDragStart(index)"
+              @dragover="onMediaDragOver"
+              @drop="onMediaDrop(index)"
+              @dragend="onMediaDragEnd"
+            >
+              <div class="relative mb-1 w-full overflow-hidden rounded bg-muted" style="aspect-ratio: 1 / 1;">
+                <img
+                  v-if="nft.imageUrl"
+                  :src="nft.imageUrl"
+                  :alt="nft.name || nft.file?.name || `NFT ${nft.id}`"
+                  loading="lazy"
+                  decoding="async"
+                  class="h-full w-full object-cover"
+                >
+                <div
+                  v-else
+                  class="flex h-full w-full items-center justify-center"
+                >
+                  <UIcon
+                    name="i-heroicons-photo"
+                    class="h-3 w-3 text-muted-foreground"
+                  />
+                </div>
+                <div class="absolute left-0.5 top-0.5 rounded-full bg-background/80 px-1 py-0.5 text-[9px] font-medium text-foreground">
+                  #{{ index + 1 }}
+                </div>
+              </div>
+              <div class="flex flex-1 flex-col justify-between gap-0.5">
+                <span class="line-clamp-2 text-[10px] font-medium">
+                  {{ nft.file?.name || `File #${nft.id}` }}
+                </span>
+                <div class="flex items-center justify-between text-[9px] text-muted-foreground">
+                  <span class="truncate">
+                    {{ formatFileSize(nft.file) }}
+                  </span>
+                  <button
+                    type="button"
+                    aria-label="Delete file"
+                    class="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded hover:text-destructive"
+                    @click="emit('deleteNft', nft)"
+                  >
+                    <UIcon
+                      name="i-heroicons-trash"
+                      class="h-2.5 w-2.5"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between border-t border-border px-6 py-4">
+      <span class="text-sm text-muted-foreground">
+        Step 2 of 5 · Upload media files to continue.
+      </span>
+      <UButton
+        size="sm"
+        :disabled="!canGoToMetadataStep"
+        @click="onNext"
+      >
+        Next: Metadata
+      </UButton>
+    </div>
+  </section>
+</template>
diff --git a/app/components/massmint/OnBoardingCard.vue b/app/components/massmint/OnBoardingCard.vue
deleted file mode 100644
index a16418f5..00000000
--- a/app/components/massmint/OnBoardingCard.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  title: string
-  count?: string
-  content?: string
-  active?: boolean
-}>()
-</script>
-
-<template>
-  <UCard
-    class="w-full h-[540px] transition-opacity overflow-y-auto duration-300"
-    :class="{ 'opacity-50': !active }"
-  >
-    <template #header>
-      <div class="flex justify-between items-center">
-        <h2 class="text-xl font-bold capitalize">
-          {{ title }}
-        </h2>
-        <UBadge
-          :label="count"
-          size="lg"
-          color="neutral"
-          variant="soft"
-        />
-      </div>
-    </template>
-
-    <div class="space-y-4">
-      <slot>
-        <div v-if="content" class="w-full">
-          <MarkdownPreview :source="content" />
-        </div>
-      </slot>
-    </div>
-  </UCard>
-</template>
diff --git a/app/components/massmint/Onboarding.vue b/app/components/massmint/Onboarding.vue
deleted file mode 100644
index d203dbde..00000000
--- a/app/components/massmint/Onboarding.vue
+++ /dev/null
@@ -1,196 +0,0 @@
-<script lang="ts" setup>
-import { useSwipe } from '@vueuse/core'
-import { descriptionTabs } from './descriptionTabs'
-import OnBoardingCard from './OnBoardingCard.vue'
-
-const router = useRouter()
-const { $i18n } = useNuxtApp()
-
-const numOfCards = 3
-const currentSlide = ref(0)
-const swipeThreshold = 40
-const carouselRef = ref<HTMLElement | null>(null)
-
-const activeDescriptionTab = ref('JSON')
-
-useSwipe(carouselRef, {
-  threshold: swipeThreshold,
-  onSwipeEnd: (_, direction) => {
-    if (direction === 'left') {
-      nextSlide()
-    }
-    else if (direction === 'right') {
-      prevSlide()
-    }
-  },
-})
-
-const cards = computed(() => {
-  return Array.from({ length: numOfCards }, (_, i) => ({
-    title: $i18n.t(`massmint.onboarding.cards.${i}.title`),
-    content: $i18n.t(`massmint.onboarding.cards.${i}.content`),
-  }))
-})
-
-function nextSlide() {
-  if (currentSlide.value < numOfCards - 1) {
-    currentSlide.value++
-  }
-}
-
-function prevSlide() {
-  if (currentSlide.value > 0) {
-    currentSlide.value--
-  }
-}
-
-function toMassMint() {
-  router
-    .replace({
-      path: `/massmint`,
-    })
-    .catch(console.warn)
-}
-
-const btn = computed(() =>
-  currentSlide.value === 2
-    ? {
-        label: $i18n.t('massmint.onboarding.done'),
-        variant: 'primary' as const,
-        onClick: toMassMint,
-      }
-    : {
-        label: $i18n.t('massmint.onboarding.next'),
-        variant: 'primary' as const,
-        onClick: nextSlide,
-      },
-)
-
-const carouselStyle = computed(() => {
-  const translateX = currentSlide.value * 100
-  return {
-    transform: `translateX(-${translateX}%)`,
-    transition: 'transform 0.5s ease-in-out',
-  }
-})
-
-function downloadTemplate() {
-  downloadFile(`/massmint/template.${activeDescriptionTab.value.toLowerCase()}`, 'template')
-}
-</script>
-
-<template>
-  <div class="space-y-8">
-    <!-- Header -->
-    <div class="flex items-center justify-between px-8">
-      <h1 class="text-3xl md:text-4xl font-bold text-center flex-1">
-        {{ $t('massmint.onboarding.pageTitle') }}
-      </h1>
-      <UButton
-        :label="$t('massmint.onboarding.skip')"
-        icon="i-heroicons-arrow-right"
-        variant="outline"
-        @click="toMassMint"
-      />
-    </div>
-
-    <!-- Carousel Container -->
-    <div class="relative max-w-4xl mx-auto">
-      <div
-        ref="carouselRef"
-        class="flex"
-        :style="carouselStyle"
-      >
-        <div
-          v-for="(card, index) in cards"
-          :key="index"
-          class="w-full flex-shrink-0 px-4"
-        >
-          <OnBoardingCard
-            :title="card.title"
-            :count="`${index + 1}/${cards.length}`"
-            :content="card.content"
-            :active="index === currentSlide"
-          >
-            <div v-if="index === 1" class="space-y-4">
-              <div>
-                <h3 class="text-base font-bold mb-3">
-                  {{ $t('massmint.onboarding.cards.1.subtitle') }}:
-                </h3>
-                <p class="text-base mb-5">
-                  {{ $t('massmint.onboarding.cards.1.instructions') }}
-                </p>
-              </div>
-
-              <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4">
-                <h4 class="text-base font-bold">
-                  {{ $t('massmint.onboarding.cards.1.codeStructure') }}:
-                </h4>
-                <div class="flex gap-3">
-                  <UButton
-                    v-for="tab in descriptionTabs"
-                    :key="tab.label"
-                    :label="tab.label"
-                    :variant="activeDescriptionTab === tab.label ? 'solid' : 'outline'"
-                    size="sm"
-                    @click="activeDescriptionTab = tab.label"
-                  />
-                </div>
-              </div>
-
-              <div class="h-48 w-full overflow-auto bg-accent p-4 rounded-xs">
-                <MarkdownPreview
-                  :source="descriptionTabs[activeDescriptionTab as keyof typeof descriptionTabs].fileStructureDescription"
-                  class="w-full "
-                />
-              </div>
-
-              <div class="flex justify-end">
-                <UButton
-                  variant="ghost"
-                  color="primary"
-                  size="sm"
-                  @click="downloadTemplate"
-                >
-                  {{ $t('massmint.onboarding.downloadTemplate') }}
-                  <UIcon name="i-heroicons-arrow-up-right" />
-                </UButton>
-              </div>
-            </div>
-          </OnBoardingCard>
-        </div>
-      </div>
-
-      <!-- Navigation Arrows -->
-      <UButton
-        v-if="currentSlide > 0"
-        class="absolute left-1 top-1/2 -translate-y-1/2 z-10 aspect-square"
-        size="sm"
-        variant="outline"
-        icon="i-heroicons-chevron-left"
-        @click="prevSlide"
-      />
-
-      <UButton
-        v-if="currentSlide < numOfCards - 1"
-        class="absolute right-1 top-1/2 -translate-y-1/2 z-10 aspect-square"
-        size="sm"
-        variant="outline"
-        icon="i-heroicons-chevron-right"
-        @click="nextSlide"
-      />
-    </div>
-
-    <!-- Action Button -->
-    <div class="flex justify-center">
-      <UButton
-        :label="btn.label"
-        variant="solid"
-        color="primary"
-        size="lg"
-        class="min-w-72"
-        @click="btn.onClick"
-      />
-    </div>
-  </div>
-</template>
diff --git a/app/components/massmint/index.ts b/app/components/massmint/index.ts
index 95e77f66..4af68fd6 100644
--- a/app/components/massmint/index.ts
+++ b/app/components/massmint/index.ts
@@ -1,6 +1,4 @@
 export { default as MassMint } from './MassMint.vue'
-export { default as OnBoarding } from './Onboarding.vue'
-export { default as OnBoardingCard } from './OnBoardingCard.vue'
 export { default as OverviewTable } from './OverviewTable.vue'
 export * from './types'
 export { default as UploadPictures } from './upload/UploadCompressedMedia.vue'
diff --git a/app/components/massmint/upload/UploadCompressedMedia.vue b/app/components/massmint/upload/UploadCompressedMedia.vue
index b7b51141..77174c20 100644
--- a/app/components/massmint/upload/UploadCompressedMedia.vue
+++ b/app/components/massmint/upload/UploadCompressedMedia.vue
@@ -6,7 +6,7 @@ interface Props {
 }
 
 interface Emits {
-  (e: 'zipLoaded', data: { validFiles: any[], areAllFilesValid: boolean }): void
+  (e: 'zipLoaded', data: { validFiles: any[] }): void
 }
 
 withDefaults(defineProps<Props>(), {
@@ -43,7 +43,6 @@ async function onFileSelected(file?: File) {
       const zipFilePath = URL.createObjectURL(blob)
 
       const {
-        allValid,
         loading: loadingZip,
         validFiles,
         warnings,
@@ -64,7 +63,6 @@ async function onFileSelected(file?: File) {
           showCheckmark.value = true
           emit('zipLoaded', {
             validFiles: validFiles.value,
-            areAllFilesValid: allValid.value,
           })
 
           URL.revokeObjectURL(zipFilePath)
@@ -80,7 +78,6 @@ async function onFileSelected(file?: File) {
     console.error('Invalid file type.')
     emit('zipLoaded', {
       validFiles: [],
-      areAllFilesValid: false,
     })
   }
 }
diff --git a/app/components/massmint/utils.ts b/app/components/massmint/utils.ts
new file mode 100644
index 00000000..33612c67
--- /dev/null
+++ b/app/components/massmint/utils.ts
@@ -0,0 +1,64 @@
+import type { NFT } from './types'
+
+export type TemplateFormat = 'json' | 'csv' | 'txt'
+
+export const attributesExample = [
+  { value: 'white', trait_type: 'color' },
+  { value: 'happy', trait_type: 'expression' },
+] as const
+
+/**
+ * Generate metadata template content for the given format and NFTs.
+ */
+export function generateTemplateContent(format: TemplateFormat, nfts: NFT[]): string {
+  if (format === 'json') {
+    const items = nfts.map((nft, index) => ({
+      file: nft.file?.name || '',
+      ...(index === 0
+        ? { name: 'Art #1', price: 1, description: 'Description for the Art #1', attributes: [...attributesExample] }
+        : { name: '', description: '', price: '', attributes: [] }
+      ),
+    }))
+    return JSON.stringify(items, null, 2)
+  }
+
+  if (format === 'csv') {
+    const header = 'file,name,description,attributes,price'
+    const attributesCsvExample = 'color:white;expression:happy'
+    const rows = nfts.map((nft, index) => {
+      const file = nft.file?.name || ''
+      if (index === 0) {
+        return `${file},Art #1,Description for the Art #1,${attributesCsvExample},1`
+      }
+      return `${file},,,,`
+    })
+    return [header, ...rows].join('\n')
+  }
+
+  // txt
+  const attributesTxtExample = '[{"value": "white","trait_type": "color"},{"value": "happy","trait_type": "expression"}]'
+  const blocks = nfts.map((nft, index) => {
+    const fileName = nft.file?.name || ''
+    const isFirst = index === 0
+    return [
+      `file: ${fileName}`,
+      isFirst ? 'name: Art #1' : 'name: ',
+      isFirst ? 'description: Description for the Art #1' : 'description: ',
+      isFirst ? `attributes: ${attributesTxtExample}` : 'attributes: ',
+      isFirst ? 'price: 1' : 'price: ',
+      '',
+    ].join('\n')
+  })
+  return blocks.join('\n')
+}
+
+export function convertNftsToMap<T extends object>(
+  items: T[],
+): Record<string, T & { id: number }> {
+  return items
+    .map((item, i) => ({ ...item, id: i + 1 } as T & { id: number }))
+    .reduce((acc, nft) => {
+      acc[nft.id] = nft
+      return acc
+    }, {} as Record<string, T & { id: number }>)
+}
diff --git a/app/composables/massmint/parsers/parseTxt.ts b/app/composables/massmint/parsers/parseTxt.ts
index 9758720b..7fd9604b 100644
--- a/app/composables/massmint/parsers/parseTxt.ts
+++ b/app/composables/massmint/parsers/parseTxt.ts
@@ -70,8 +70,14 @@ function updateEntry(entry: Record<string, unknown>, line: string) {
     entry.price = price
     entry.currency = currency
   }
-  else if (fieldName === 'attributes') {
-    entry.attributes = JSON.parse(fieldValue)
+  else if (fieldName === 'attributes' && fieldValue) {
+    try {
+      entry.attributes = JSON.parse(fieldValue)
+    }
+    catch {
+      console.error('Invalid attributes JSON in TXT metadata block')
+      entry.attributes = {}
+    }
   }
   else {
     entry[fieldName] = fieldValue
diff --git a/app/i18n/locales/en.json b/app/i18n/locales/en.json
index e39a0cd7..225d1037 100644
--- a/app/i18n/locales/en.json
+++ b/app/i18n/locales/en.json
@@ -401,30 +401,6 @@
     "variationLoadingTimeMeans3": "Takes too long to render, no clear way to fix that, the artist needs to find a way to cut down time."
   },
   "massmint": {
-    "onboarding": {
-      "pageTitle": "Mass Mint Onboarding",
-      "skip": "Skip",
-      "next": "Next",
-      "done": "Done",
-      "downloadTemplate": "Download file template",
-      "cards": {
-        "0": {
-          "title": "Prepare All Your Files",
-          "content": "Start your mass minting by compressing all your art files into a .ZIP for upload. Aside from your artwork, each NFT requires a name, description, and price.\n\nTo streamline the process, prepare these details in advance in a separate file. This avoids manually entering information for each NFT. Further guidance on formatting this file will follow in the next step."
-        },
-        "1": {
-          "title": "How To Name Your NFTs",
-          "content": "",
-          "subtitle": "Instructions",
-          "instructions": "Please ensure that the file field corresponds to the image file name (e.g., set \"file\": img1.jpg in the file field if the image has a file name of \"img1.jpg\"). Note that the order of items in the description file determines the order during mass minting.",
-          "codeStructure": "Code Structure"
-        },
-        "2": {
-          "title": "You Need To Have A Collection",
-          "content": "In order to use the Mass Mint feature you need to have an **NFT collection created** to which you will mint all of your NFTs. If you do not have a collection created yet, you can create one in Mass Mint.\n\nDon't have a collection? [Create One](/create/collection)"
-        }
-      }
-    }
   },
   "trades": {
     "anyNftFrom": "Any NFT From",
diff --git a/app/pages/massmint/index.vue b/app/pages/massmint/index.vue
index 4f4bc4f8..fa4f0b15 100644
--- a/app/pages/massmint/index.vue
+++ b/app/pages/massmint/index.vue
@@ -3,18 +3,12 @@ import { MassMint } from '~/components/massmint'
 
 definePageMeta({
   title: 'Mass Mint',
-  layout: 'default',
+  layout: 'no-footer',
 })
-
-const router = useRouter()
-
-function handleBackToOnboarding() {
-  router.push('/massmint/onboarding')
-}
 </script>
 
 <template>
   <UContainer>
-    <MassMint @back-to-onboarding="handleBackToOnboarding" />
+    <MassMint />
   </UContainer>
 </template>
diff --git a/app/pages/massmint/onboarding.vue b/app/pages/massmint/onboarding.vue
deleted file mode 100644
index 601def8e..00000000
--- a/app/pages/massmint/onboarding.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import MassMintOnboarding from '@/components/massmint/Onboarding.vue'
-</script>
-
-<template>
-  <UContainer class="py-8 min-h-screen bg-background">
-    <MassMintOnboarding />
-  </UContainer>
-</template>