diff --git a/.gitignore b/.gitignore
index c54784db..7ddda1d0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,6 @@ app/graphql/*.d.ts
 
 # Descriptors
 app/descriptors
+
+# Playwright MCP
+.playwright-mcp/
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 99246819..15d35082 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -21,6 +21,7 @@
 @theme {
   --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
   --font-serif: 'Roboto Serif', serif;
+  --font-mono: 'Geist Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
 }
 
 @theme static {
diff --git a/app/components/Navbar.vue b/app/components/Navbar.vue
index ab9dca8f..24f46c7f 100644
--- a/app/components/Navbar.vue
+++ b/app/components/Navbar.vue
@@ -43,6 +43,12 @@ const navItems = computed<NavigationMenuItem[][]>(() => [
       label: 'Create',
       onSelect: () => isCreateModalOpen.value = true,
     },
+    ...(accountId.value
+      ? [{
+          label: 'Studio',
+          to: `/${routePrefix.value}/studio`,
+        }]
+      : []),
   ],
 ].map(item => item.map(i => ({
   ...i,
diff --git a/app/components/bulkOperations/BulkStepper.vue b/app/components/bulkOperations/BulkStepper.vue
new file mode 100644
index 00000000..97c92a9c
--- /dev/null
+++ b/app/components/bulkOperations/BulkStepper.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { StepConfig } from '~/types/bulkOperations'
+
+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 gap-2">
+    <template v-for="(step, index) in steps" :key="index">
+      <button
+        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/bulkOperations/BulkWizardFooter.vue b/app/components/bulkOperations/BulkWizardFooter.vue
new file mode 100644
index 00000000..da452705
--- /dev/null
+++ b/app/components/bulkOperations/BulkWizardFooter.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  backDisabled?: boolean
+  continueDisabled?: boolean
+  continueLabel?: string
+  loading?: boolean
+  showBack?: boolean
+}>(), {
+  continueLabel: 'Continue',
+  showBack: true,
+})
+
+const emit = defineEmits<{
+  back: []
+  continue: []
+}>()
+
+const isMac = computed(() => {
+  if (import.meta.server)
+    return false
+  return navigator.platform.toUpperCase().includes('MAC')
+})
+
+const shortcutHint = computed(() => isMac.value ? '⌘+Enter' : 'Ctrl+Enter')
+</script>
+
+<template>
+  <div class="shrink-0 flex items-center justify-between px-6 py-4 border-t border-border bg-background shadow-[0_-2px_10px_rgba(0,0,0,0.05)]">
+    <div>
+      <UButton
+        v-if="showBack"
+        variant="ghost"
+        icon="i-heroicons-arrow-left"
+        :disabled="backDisabled"
+        @click="emit('back')"
+      >
+        Back
+      </UButton>
+    </div>
+
+    <div class="flex items-center gap-3">
+      <slot name="cost-estimate" />
+
+      <UButton
+        color="primary"
+        :loading="loading"
+        :disabled="continueDisabled || loading"
+        @click="emit('continue')"
+      >
+        {{ continueLabel }}
+        <template #trailing>
+          <kbd class="hidden sm:inline text-xs opacity-60 ml-1">{{ shortcutHint }}</kbd>
+        </template>
+      </UButton>
+    </div>
+  </div>
+</template>
diff --git a/app/components/bulkOperations/BulkWizardLayout.vue b/app/components/bulkOperations/BulkWizardLayout.vue
new file mode 100644
index 00000000..5e897879
--- /dev/null
+++ b/app/components/bulkOperations/BulkWizardLayout.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { StepConfig } from '~/types/bulkOperations'
+
+const props = withDefaults(defineProps<{
+  title: string
+  steps: StepConfig[]
+  currentStep: number
+  completedSteps: number[]
+  maxStepReached?: number
+  canProceed?: boolean
+  continueLabel?: string
+  loading?: boolean
+  backLink?: string
+  showFooter?: boolean
+  compact?: boolean
+}>(), {
+  canProceed: false,
+  continueLabel: 'Continue',
+  showFooter: true,
+})
+
+const emit = defineEmits<{
+  back: []
+  continue: []
+  stepClick: [step: number]
+}>()
+
+const router = useRouter()
+
+function handleBackLink() {
+  if (props.backLink) {
+    router.push(props.backLink)
+  }
+  else {
+    router.back()
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-col h-full">
+    <div class="flex items-center gap-4 px-6 py-4 border-b border-border bg-background shrink-0">
+      <template v-if="!compact">
+        <UButton
+          variant="ghost"
+          icon="i-heroicons-arrow-left"
+          size="sm"
+          @click="handleBackLink"
+        />
+
+        <h1 class="text-lg font-semibold shrink-0">
+          {{ title }}
+        </h1>
+      </template>
+
+      <BulkStepper
+        :steps="steps"
+        :current-step="currentStep"
+        :completed-steps="completedSteps"
+        :max-step-reached="maxStepReached"
+        class="flex-1 justify-center"
+        @step-click="emit('stepClick', $event)"
+      />
+    </div>
+
+    <div class="flex-1 overflow-y-auto">
+      <slot />
+    </div>
+
+    <BulkWizardFooter
+      v-if="showFooter"
+      :back-disabled="currentStep === 0"
+      :continue-disabled="!canProceed"
+      :continue-label="continueLabel"
+      :loading="loading"
+      :show-back="currentStep > 0"
+      @back="emit('back')"
+      @continue="emit('continue')"
+    >
+      <template #cost-estimate>
+        <slot name="cost-estimate" />
+      </template>
+    </BulkWizardFooter>
+  </div>
+</template>
diff --git a/app/components/collection/CollectionDisplay.vue b/app/components/collection/CollectionDisplay.vue
new file mode 100644
index 00000000..7e8e305f
--- /dev/null
+++ b/app/components/collection/CollectionDisplay.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type { AssetHubChain } from '~/plugins/sdk.client'
+
+const props = defineProps<{
+  name: string
+  description: string
+  image: string
+  banner: string
+  owner: string
+  supply: string
+  claimed: string
+  floor: number | null
+  chain: AssetHubChain
+  collectionId: string
+  readOnly?: boolean
+}>()
+
+const bannerUrl = computed(() => {
+  return props.banner ? toOriginalContentUrl(sanitizeIpfsUrl(props.banner)) : ''
+})
+
+</script>
+
+<template>
+  <div>
+    <!-- Banner Section -->
+    <div class="relative w-full min-h-[340px] flex flex-col justify-end rounded-xl overflow-hidden">
+      <div
+        class="absolute inset-0 w-full h-full bg-muted"
+        :style="bannerUrl ? {
+          backgroundImage: `url('${bannerUrl}')`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+        } : {}"
+      />
+
+      <div class="relative flex items-center px-8 py-8 z-10">
+        <div class="flex flex-col items-center">
+          <div class="w-36 h-36 rounded-xl overflow-hidden bg-linear-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 border-4 border-white dark:border-gray-900 shadow-xl">
+            <img
+              v-if="image"
+              :src="sanitizeIpfsUrl(image)"
+              :alt="name"
+              class="w-full h-full object-cover"
+            >
+            <div v-else class="w-full h-full flex items-center justify-center">
+              <UIcon name="i-heroicons-photo" class="w-12 h-12 text-gray-400" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="w-full">
+      <div class="flex justify-between flex-col md:flex-row gap-12">
+        <div class="flex flex-col flex-1">
+          <div class="my-4">
+            <div class="text-2xl font-bold mb-2">
+              {{ name }}
+            </div>
+            <div v-if="owner" class="flex items-center gap-1 text-muted-foreground">
+              <UserInfo :avatar-size="26" :address="owner" class="min-w-0" />
+            </div>
+          </div>
+          <MarkdownPreview v-if="description" :source="description" />
+        </div>
+
+        <!-- Quick Stats -->
+        <div class="pt-4 w-auto md:w-60 space-y-3">
+          <div class="flex justify-between items-center">
+            <span class="text-sm text-gray-500 dark:text-gray-400">Minted</span>
+            <span class="font-medium font-mono text-gray-900 dark:text-white">{{ claimed || 0 }} / {{ Number(supply) >= Number.MAX_SAFE_INTEGER ? '∞' : (supply || 0) }}</span>
+          </div>
+
+          <div class="flex justify-between items-center">
+            <span class="text-sm text-gray-500 dark:text-gray-400">Floor Price</span>
+            <span class="font-medium text-gray-900 dark:text-white">
+              <Money v-if="floor" inline :value="floor" />
+              <span v-else class="text-gray-400 dark:text-gray-500">--</span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- NFT grid omitted: no items to display in read-only preview -->
+  </div>
+</template>
diff --git a/app/components/collection/admin/AdminItemDetail.vue b/app/components/collection/admin/AdminItemDetail.vue
new file mode 100644
index 00000000..e5dca31d
--- /dev/null
+++ b/app/components/collection/admin/AdminItemDetail.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { warningMessage } from '~/utils/notification'
+
+const emit = defineEmits<{
+  back: []
+}>()
+
+const localDescription = ref('')
+const localTraits = ref<Array<{ trait_type: string, value: string }>>([])
+
+function handleSave() {
+  warningMessage('Coming soon — on-chain item editing will be wired in a future update.')
+}
+
+function addTrait() {
+  localTraits.value.push({ trait_type: '', value: '' })
+}
+
+function removeTrait(index: number) {
+  localTraits.value.splice(index, 1)
+}
+</script>
+
+<template>
+  <div class="p-4 space-y-4">
+    <button
+      class="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+      @click="emit('back')"
+    >
+      <UIcon name="i-heroicons-arrow-left" class="w-4 h-4" />
+      Back to collection
+    </button>
+
+    <div class="space-y-4">
+      <div>
+        <label class="text-xs font-medium text-muted-foreground block mb-1">Name</label>
+        <UInput
+          model-value="Item name"
+          disabled
+          size="sm"
+        />
+        <p class="text-xs text-muted-foreground mt-1">
+          Names are set during minting and are final
+        </p>
+      </div>
+
+      <div>
+        <label class="text-xs font-medium text-muted-foreground block mb-1">Description</label>
+        <UTextarea
+          v-model="localDescription"
+          placeholder="Add a description..."
+          size="sm"
+          :rows="3"
+        />
+      </div>
+
+      <div>
+        <div class="flex items-center justify-between mb-2">
+          <label class="text-xs font-medium text-muted-foreground">Properties</label>
+          <UButton
+            variant="ghost"
+            size="xs"
+            icon="i-heroicons-plus"
+            @click="addTrait"
+          />
+        </div>
+
+        <div v-if="localTraits.length > 0" class="space-y-2">
+          <div
+            v-for="(trait, index) in localTraits"
+            :key="index"
+            class="flex items-center gap-2"
+          >
+            <UInput
+              v-model="trait.trait_type"
+              placeholder="Trait"
+              size="sm"
+              class="flex-1"
+            />
+            <UInput
+              v-model="trait.value"
+              placeholder="Value"
+              size="sm"
+              class="flex-1"
+            />
+            <UButton
+              variant="ghost"
+              icon="i-heroicons-x-mark"
+              size="xs"
+              @click="removeTrait(index)"
+            />
+          </div>
+        </div>
+
+        <p v-else class="text-xs text-muted-foreground">
+          No properties set
+        </p>
+      </div>
+
+      <UButton
+        size="sm"
+        class="w-full"
+        @click="handleSave"
+      >
+        Save Changes
+      </UButton>
+
+      <USeparator />
+
+      <UButton
+        size="sm"
+        color="error"
+        variant="outline"
+        class="w-full"
+        icon="i-heroicons-trash"
+        @click="warningMessage('Item deletion coming soon')"
+      >
+        Delete Item
+      </UButton>
+    </div>
+  </div>
+</template>
diff --git a/app/components/collection/admin/AdminSelectionBar.vue b/app/components/collection/admin/AdminSelectionBar.vue
new file mode 100644
index 00000000..7d9bed1e
--- /dev/null
+++ b/app/components/collection/admin/AdminSelectionBar.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import type { AssetHubChain } from '~/plugins/sdk.client'
+
+const props = defineProps<{
+  selectedCount: number
+  collectionId: string
+  chain: AssetHubChain
+}>()
+
+const emit = defineEmits<{
+  selectAll: []
+  clearSelection: []
+  toggleSelection: []
+}>()
+
+const router = useRouter()
+
+function handleAirdrop() {
+  router.push(`/${props.chain}/studio/${props.collectionId}/airdrop`)
+}
+
+function handleList() {
+  router.push(`/${props.chain}/studio/${props.collectionId}/list`)
+}
+
+function handleTransfer() {
+  router.push(`/${props.chain}/studio/${props.collectionId}/transfer`)
+}
+</script>
+
+<template>
+  <div class="p-4 space-y-4">
+    <div class="flex items-center justify-between">
+      <span class="text-sm font-medium">
+        {{ selectedCount }} item{{ selectedCount !== 1 ? 's' : '' }} selected
+      </span>
+      <UButton
+        variant="ghost"
+        size="xs"
+        icon="i-heroicons-x-mark"
+        @click="emit('toggleSelection')"
+      />
+    </div>
+
+    <div class="flex gap-2">
+      <UButton
+        size="sm"
+        variant="outline"
+        @click="emit('selectAll')"
+      >
+        Select All
+      </UButton>
+      <UButton
+        size="sm"
+        variant="ghost"
+        @click="emit('clearSelection')"
+      >
+        Clear
+      </UButton>
+    </div>
+
+    <USeparator />
+
+    <div class="space-y-1">
+      <p class="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2">
+        Actions
+      </p>
+
+      <UButton
+        class="w-full justify-start"
+        variant="ghost"
+        icon="i-heroicons-paper-airplane"
+        :disabled="selectedCount === 0"
+        @click="handleAirdrop"
+      >
+        Airdrop
+      </UButton>
+
+      <UButton
+        class="w-full justify-start"
+        variant="ghost"
+        icon="i-heroicons-tag"
+        :disabled="selectedCount === 0"
+        @click="handleList"
+      >
+        List
+      </UButton>
+
+      <UButton
+        class="w-full justify-start"
+        variant="ghost"
+        icon="i-heroicons-arrow-right-circle"
+        :disabled="selectedCount === 0"
+        @click="handleTransfer"
+      >
+        Transfer
+      </UButton>
+    </div>
+  </div>
+</template>
diff --git a/app/components/collection/admin/AdminSidebar.vue b/app/components/collection/admin/AdminSidebar.vue
new file mode 100644
index 00000000..d8b197c3
--- /dev/null
+++ b/app/components/collection/admin/AdminSidebar.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import type { AssetHubChain } from '~/plugins/sdk.client'
+import type { OnchainCollection } from '~/services/oda'
+import { useWindowSize } from '@vueuse/core'
+
+const props = defineProps<{
+  collectionId: string
+  chain: AssetHubChain
+  collectionData?: OnchainCollection | null
+  isOwner: boolean
+  sidebarView: 'default' | 'selection' | 'itemDetail'
+  selectedCount: number
+}>()
+
+const emit = defineEmits<{
+  toggleSelection: []
+  selectAll: []
+  clearSelection: []
+  closeItemDetail: []
+}>()
+
+const isOpen = defineModel<boolean>('open', { default: false })
+
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 1024)
+
+// CollapsibleSidebar uses isCollapsed (true = hidden), we use isOpen (true = visible)
+const isCollapsed = computed({
+  get: () => !isOpen.value,
+  set: (val: boolean) => { isOpen.value = !val },
+})
+
+const collectionName = computed(() => props.collectionData?.metadata?.name)
+const collectionImage = computed(() => props.collectionData?.metadata?.image)
+const collectionBanner = computed(() => props.collectionData?.metadata?.banner)
+const collectionDescription = computed(() => props.collectionData?.metadata?.description)
+const itemCount = computed(() => props.collectionData?.claimed || props.collectionData?.supply || '0')
+const ownerAddress = computed(() => props.collectionData?.owner)
+</script>
+
+<template>
+  <ClientOnly>
+    <!-- Mobile: Slideover -->
+    <template v-if="isMobile">
+      <USlideover v-model:open="isOpen" side="left">
+        <template #header>
+          <AdminSidebarIdentity
+            :name="collectionName"
+            :image="collectionImage"
+            :item-count="itemCount"
+            :chain="chain"
+            class="flex-1"
+            @close="isOpen = false"
+          />
+        </template>
+
+        <template #body>
+          <template v-if="sidebarView === 'selection'">
+            <AdminSelectionBar
+              :selected-count="selectedCount"
+              :collection-id="collectionId"
+              :chain="chain"
+              @select-all="emit('selectAll')"
+              @clear-selection="emit('clearSelection')"
+              @toggle-selection="emit('toggleSelection')"
+            />
+          </template>
+
+          <template v-else-if="sidebarView === 'itemDetail'">
+            <AdminItemDetail
+              @back="emit('closeItemDetail')"
+            />
+          </template>
+
+          <template v-else>
+            <AdminSidebarDetails
+              :name="collectionName"
+              :description="collectionDescription"
+              :image="collectionImage"
+              :banner="collectionBanner"
+            />
+            <AdminSidebarEarnings :owner-address="ownerAddress" />
+            <AdminSidebarTeam :owner-address="ownerAddress" />
+            <AdminSidebarVisibility />
+            <AdminSidebarActions
+              :collection-id="collectionId"
+              :collection-name="collectionName"
+              :chain="chain"
+              @toggle-selection="emit('toggleSelection')"
+            />
+          </template>
+        </template>
+      </USlideover>
+    </template>
+
+    <!-- Desktop: CollapsibleSidebar -->
+    <template v-else>
+      <CollapsibleSidebar
+        v-model="isCollapsed"
+        expanded-width="320px"
+        sticky
+      >
+        <AdminSidebarIdentity
+          :name="collectionName"
+          :image="collectionImage"
+          :item-count="itemCount"
+          :chain="chain"
+          @close="isOpen = false"
+        />
+
+        <div class="overflow-y-auto max-h-[calc(100vh-260px)]">
+          <template v-if="sidebarView === 'selection'">
+            <AdminSelectionBar
+              :selected-count="selectedCount"
+              :collection-id="collectionId"
+              :chain="chain"
+              @select-all="emit('selectAll')"
+              @clear-selection="emit('clearSelection')"
+              @toggle-selection="emit('toggleSelection')"
+            />
+          </template>
+
+          <template v-else-if="sidebarView === 'itemDetail'">
+            <AdminItemDetail
+              @back="emit('closeItemDetail')"
+            />
+          </template>
+
+          <template v-else>
+            <AdminSidebarDetails
+              :name="collectionName"
+              :description="collectionDescription"
+              :image="collectionImage"
+              :banner="collectionBanner"
+            />
+            <AdminSidebarEarnings :owner-address="ownerAddress" />
+            <AdminSidebarTeam :owner-address="ownerAddress" />
+            <AdminSidebarVisibility />
+            <AdminSidebarActions
+              :collection-id="collectionId"
+              :collection-name="collectionName"
+              :chain="chain"
+              @toggle-selection="emit('toggleSelection')"
+            />
+          </template>
+        </div>
+      </CollapsibleSidebar>
+    </template>
+  </ClientOnly>
+</template>
diff --git a/app/components/collection/admin/AdminSidebarActions.vue b/app/components/collection/admin/AdminSidebarActions.vue
new file mode 100644
index 00000000..2b4b7dcf
--- /dev/null
+++ b/app/components/collection/admin/AdminSidebarActions.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { AssetHubChain } from '~/plugins/sdk.client'
+import { warningMessage } from '~/utils/notification'
+
+const props = defineProps<{
+  collectionId: string
+  collectionName?: string
+  chain: AssetHubChain
+}>()
+
+const emit = defineEmits<{
+  toggleSelection: []
+}>()
+
+const route = useRoute()
+const router = useRouter()
+
+const isMock = computed(() => route.query.mock === 'true')
+
+function handleMassMint() {
+  const mockQuery = isMock.value ? '?mock=true' : ''
+  const url = `/${props.chain}/studio/${props.collectionId}/massmint${mockQuery}`
+  router.push(url)
+}
+
+function handleSelectItems() {
+  emit('toggleSelection')
+}
+
+function handleDestroyCollection() {
+  warningMessage('Coming soon — collection deletion will be available in a future update.')
+}
+</script>
+
+<template>
+  <div class="p-4 space-y-2">
+    <UButton
+      class="w-full"
+      icon="i-heroicons-squares-plus"
+      @click="handleMassMint"
+    >
+      Mass Mint
+    </UButton>
+
+    <UButton
+      class="w-full"
+      variant="outline"
+      icon="i-heroicons-cursor-arrow-ripple"
+      @click="handleSelectItems"
+    >
+      Select Items
+    </UButton>
+
+    <USeparator class="my-3!" />
+
+    <UButton
+      class="w-full"
+      color="error"
+      variant="outline"
+      icon="i-heroicons-trash"
+      @click="handleDestroyCollection"
+    >
+      Delete Collection
+    </UButton>
+  </div>
+</template>
diff --git a/app/components/collection/admin/AdminSidebarDetails.vue b/app/components/collection/admin/AdminSidebarDetails.vue
new file mode 100644
index 00000000..c52a6399
--- /dev/null
+++ b/app/components/collection/admin/AdminSidebarDetails.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { sanitizeIpfsUrl } from '~/utils/ipfs'
+import { warningMessage } from '~/utils/notification'
+
+const props = defineProps<{
+  name?: string
+  description?: string
+  image?: string
+  banner?: string
+}>()
+
+const localDescription = ref('')
+localDescription.value = props.description ?? ''
+
+watch(() => props.description, (newVal) => {
+  localDescription.value = newVal ?? ''
+})
+
+const isExpanded = ref(false)
+
+function handleSave() {
+  warningMessage('Coming soon — on-chain transactions will be wired in a future update.')
+}
+</script>
+
+<template>
+  <div class="border-b border-border">
+    <button
+      class="flex items-center justify-between w-full px-4 py-3 text-sm font-medium hover:bg-muted/50 transition-colors"
+      @click="isExpanded = !isExpanded"
+    >
+      <span>Details</span>
+      <UIcon
+        :name="isExpanded ? 'i-heroicons-chevron-up' : 'i-heroicons-chevron-down'"
+        class="w-4 h-4"
+      />
+    </button>
+
+    <div v-if="isExpanded" class="px-4 pb-4 space-y-4">
+      <div>
+        <label class="text-xs font-medium text-muted-foreground block mb-1">Name</label>
+        <UInput
+          :model-value="props.name || ''"
+          disabled
+          size="sm"
+        />
+        <p class="text-xs text-muted-foreground mt-1">
+          Cannot be changed after creation
+        </p>
+      </div>
+
+      <div>
+        <label class="text-xs font-medium text-muted-foreground block mb-1">Description</label>
+        <UTextarea
+          v-model="localDescription"
+          :placeholder="props.description || 'Add a description...'"
+          size="sm"
+          :rows="3"
+        />
+      </div>
+
+      <div>
+        <label class="text-xs font-medium text-muted-foreground block mb-1">Logo</label>
+        <div class="w-16 h-16 rounded-lg border-2 border-dashed border-border flex items-center justify-center cursor-pointer hover:border-primary transition-colors">
+          <img
+            v-if="props.image"
+            :src="sanitizeIpfsUrl(props.image)"
+            alt="Logo"
+            class="w-full h-full object-cover rounded-lg"
+          >
+          <UIcon v-else name="i-heroicons-camera" class="w-6 h-6 text-muted-foreground" />
+        </div>
+      </div>
+
+      <div>
+        <label class="text-xs font-medium text-muted-foreground block mb-1">Banner</label>
+        <div class="w-full h-20 rounded-lg border-2 border-dashed border-border flex items-center justify-center cursor-pointer hover:border-primary transition-colors">
+          <img
+            v-if="props.banner"
+            :src="sanitizeIpfsUrl(props.banner)"
+            alt="Banner"
+            class="w-full h-full object-cover rounded-lg"
+          >
+          <UIcon v-else name="i-heroicons-photo" class="w-6 h-6 text-muted-foreground" />
+        </div>
+      </div>
+
+      <UButton
+        size="sm"
+        class="w-full"
+        @click="handleSave"
+      >
+        Save Changes
+      </UButton>
+    </div>
+  </div>
+</template>
diff --git a/app/components/collection/admin/AdminSidebarEarnings.vue b/app/components/collection/admin/AdminSidebarEarnings.vue
new file mode 100644
index 00000000..a47845c6
--- /dev/null
+++ b/app/components/collection/admin/AdminSidebarEarnings.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+defineProps<{
+  royaltyPercentage?: number
+  ownerAddress?: string
+}>()
+
+const isExpanded = ref(false)
+</script>
+
+<template>
+  <div class="border-b border-border">
+    <button
+      class="flex items-center justify-between w-full px-4 py-3 text-sm font-medium hover:bg-muted/50 transition-colors"
+      @click="isExpanded = !isExpanded"
+    >
+      <span>Earnings</span>
+      <UIcon
+        :name="isExpanded ? 'i-heroicons-chevron-up' : 'i-heroicons-chevron-down'"
+        class="w-4 h-4"
+      />
+    </button>
+
+    <div v-if="isExpanded" class="px-4 pb-4 space-y-3">
+      <div class="flex items-center justify-between text-sm">
+        <span class="text-muted-foreground">Royalty</span>
+        <span class="font-medium">{{ royaltyPercentage ?? 0 }}%</span>
+      </div>
+
+      <div v-if="ownerAddress">
+        <label class="text-xs text-muted-foreground block mb-1">Recipient</label>
+        <div class="flex items-center gap-2">
+          <UserInfo :address="ownerAddress" :avatar-size="20" class="text-xs" />
+        </div>
+      </div>
+
+      <p v-if="!ownerAddress" class="text-xs text-muted-foreground">
+        No royalty configured
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/app/components/collection/admin/AdminSidebarIdentity.vue b/app/components/collection/admin/AdminSidebarIdentity.vue
new file mode 100644
index 00000000..31dc5324
--- /dev/null
+++ b/app/components/collection/admin/AdminSidebarIdentity.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+defineProps<{
+  name?: string
+  image?: string
+  itemCount?: number | string
+  chain: string
+}>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+</script>
+
+<template>
+  <div class="flex items-center gap-3 p-4 border-b border-border">
+    <div class="w-12 h-12 rounded-lg overflow-hidden bg-muted shrink-0">
+      <img
+        v-if="image"
+        :src="sanitizeIpfsUrl(image)"
+        :alt="name || 'Collection'"
+        class="w-full h-full object-cover"
+      >
+      <div v-else class="w-full h-full flex items-center justify-center">
+        <UIcon name="i-heroicons-photo" class="w-6 h-6 text-muted-foreground" />
+      </div>
+    </div>
+
+    <div class="flex-1 min-w-0">
+      <h3 class="font-semibold text-sm truncate">
+        {{ name || 'Untitled Collection' }}
+      </h3>
+      <div class="flex items-center gap-2 text-xs text-muted-foreground">
+        <span><span class="font-mono">{{ itemCount ?? 0 }}</span> items</span>
+        <UBadge :label="chain" size="xs" variant="subtle" class="font-mono" />
+      </div>
+    </div>
+
+    <UButton
+      variant="ghost"
+      icon="i-heroicons-x-mark"
+      size="xs"
+      @click="emit('close')"
+    />
+  </div>
+</template>
diff --git a/app/components/collection/admin/AdminSidebarTeam.vue b/app/components/collection/admin/AdminSidebarTeam.vue
new file mode 100644
index 00000000..0e6548c8
--- /dev/null
+++ b/app/components/collection/admin/AdminSidebarTeam.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { warningMessage } from '~/utils/notification'
+
+defineProps<{
+  ownerAddress?: string
+}>()
+
+const isExpanded = ref(false)
+</script>
+
+<template>
+  <div class="border-b border-border">
+    <button
+      class="flex items-center justify-between w-full px-4 py-3 text-sm font-medium hover:bg-muted/50 transition-colors"
+      @click="isExpanded = !isExpanded"
+    >
+      <span>Team</span>
+      <UIcon
+        :name="isExpanded ? 'i-heroicons-chevron-up' : 'i-heroicons-chevron-down'"
+        class="w-4 h-4"
+      />
+    </button>
+
+    <div v-if="isExpanded" class="px-4 pb-4 space-y-3">
+      <div v-if="ownerAddress" class="flex items-center gap-2">
+        <UserInfo :address="ownerAddress" :avatar-size="24" />
+        <UBadge label="OWNER" size="xs" color="primary" variant="subtle" />
+      </div>
+
+      <UButton
+        variant="outline"
+        size="sm"
+        class="w-full"
+        icon="i-heroicons-user-plus"
+        @click="warningMessage('Team invitations coming soon')"
+      >
+        Invite
+      </UButton>
+    </div>
+  </div>
+</template>
diff --git a/app/components/collection/admin/AdminSidebarVisibility.vue b/app/components/collection/admin/AdminSidebarVisibility.vue
new file mode 100644
index 00000000..cf2d41ae
--- /dev/null
+++ b/app/components/collection/admin/AdminSidebarVisibility.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { warningMessage } from '~/utils/notification'
+
+const isExpanded = ref(false)
+const isPublished = ref(true)
+const isNsfw = ref(false)
+
+function handleToggle() {
+  warningMessage('Coming soon — visibility settings will be wired in a future update.')
+}
+</script>
+
+<template>
+  <div class="border-b border-border">
+    <button
+      class="flex items-center justify-between w-full px-4 py-3 text-sm font-medium hover:bg-muted/50 transition-colors"
+      @click="isExpanded = !isExpanded"
+    >
+      <span>Visibility</span>
+      <UIcon
+        :name="isExpanded ? 'i-heroicons-chevron-up' : 'i-heroicons-chevron-down'"
+        class="w-4 h-4"
+      />
+    </button>
+
+    <div v-if="isExpanded" class="px-4 pb-4 space-y-3">
+      <div class="flex items-center justify-between">
+        <span class="text-sm">Published</span>
+        <USwitch v-model="isPublished" size="sm" disabled @update:model-value="handleToggle" />
+      </div>
+
+      <div class="flex items-center justify-between">
+        <span class="text-sm">NSFW</span>
+        <USwitch v-model="isNsfw" size="sm" disabled @update:model-value="handleToggle" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/components/collection/admin/FloatingManageButton.vue b/app/components/collection/admin/FloatingManageButton.vue
new file mode 100644
index 00000000..d7f2e211
--- /dev/null
+++ b/app/components/collection/admin/FloatingManageButton.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+defineEmits<{
+  click: []
+}>()
+</script>
+
+<template>
+  <Transition
+    enter-active-class="transition-all duration-300 ease-out"
+    enter-from-class="-translate-y-2 opacity-0"
+    enter-to-class="translate-y-0 opacity-100"
+    leave-active-class="transition-all duration-200 ease-in"
+    leave-from-class="translate-y-0 opacity-100"
+    leave-to-class="-translate-y-2 opacity-0"
+  >
+    <button
+      v-show="true"
+      class="absolute top-4 right-4 z-40 flex items-center gap-2 bg-black/70 backdrop-blur-sm text-white px-3.5 py-2 rounded-lg shadow-lg hover:bg-black/90 transition-colors"
+      @click="$emit('click')"
+    >
+      <UIcon name="i-heroicons-cog-6-tooth" class="w-4 h-4" />
+      <span class="text-sm font-medium">Manage</span>
+    </button>
+  </Transition>
+</template>
diff --git a/app/components/common/card/TokenCard.client.vue b/app/components/common/card/TokenCard.client.vue
index 0650ccc1..ef0e9334 100644
--- a/app/components/common/card/TokenCard.client.vue
+++ b/app/components/common/card/TokenCard.client.vue
@@ -11,6 +11,14 @@ const props = defineProps<{
   price?: string | null
   currentOwner?: string | null
   hideHoverAction?: boolean
+  selectionMode?: boolean
+  isSelected?: boolean
+  studioMode?: boolean
+}>()
+
+const emit = defineEmits<{
+  select: [tokenId: number, collectionId: number]
+  itemClick: [tokenId: number, collectionId: number]
 }>()
 
 const {
@@ -93,9 +101,11 @@ watchEffect(() => {
   <div
     class="relative border rounded-xl overflow-hidden hover:shadow-lg transition-shadow hover-card-effect group"
     :class="{
-      'border-blue-500! dark:border-blue-400!': isItemInCart || isAtomicSwapItemSelected,
-      'border-gray-300 dark:border-neutral-700': !isItemInCart && !isAtomicSwapItemSelected,
+      'border-blue-500! dark:border-blue-400!': isItemInCart || isAtomicSwapItemSelected || isSelected,
+      'border-gray-300 dark:border-neutral-700': !isItemInCart && !isAtomicSwapItemSelected && !isSelected,
+      'cursor-pointer': selectionMode,
     }"
+    @click="selectionMode ? emit('select', tokenId, collectionId) : (studioMode ? emit('itemClick', tokenId, collectionId) : undefined)"
   >
     <!-- Error State -->
     <template v-if="error">
@@ -111,7 +121,16 @@ watchEffect(() => {
 
     <!-- Loaded State -->
     <template v-else>
-      <NuxtLink :to="`/${chain}/gallery/${collectionId}-${tokenId}`" class="block">
+      <!-- Selection checkbox overlay -->
+      <div
+        v-if="selectionMode"
+        class="absolute top-2 left-2 z-20"
+        @click.stop="emit('select', tokenId, collectionId)"
+      >
+        <UCheckbox :model-value="!!isSelected" />
+      </div>
+
+      <component :is="selectionMode || studioMode ? 'div' : 'NuxtLink'" :to="selectionMode || studioMode ? undefined : `/${chain}/gallery/${collectionId}-${tokenId}`" class="block" :class="{ 'pointer-events-none': selectionMode }">
         <!-- NFT Media -->
         <div class="aspect-square bg-gray-200 dark:bg-neutral-800 overflow-hidden relative group/media">
           <video
@@ -279,7 +298,7 @@ watchEffect(() => {
             </div>
           </div>
         </div>
-      </NuxtLink>
+      </component>
     </template>
   </div>
 </template>
diff --git a/app/components/create/modal/SuccessCollection.vue b/app/components/create/modal/SuccessCollection.vue
index cafcaed1..28851376 100644
--- a/app/components/create/modal/SuccessCollection.vue
+++ b/app/components/create/modal/SuccessCollection.vue
@@ -31,7 +31,7 @@ const modalData = computed(() => {
             window.open(getSubscanNftUrl(collectionId, props.result.prefix), '_blank')
           }
           else {
-            router.push(`/${props.result?.prefix}/collection/${collectionId}`)
+            router.push(`/${props.result?.prefix}/studio/${collectionId}`)
           }
         },
       },
diff --git a/app/components/dashboard/DashboardCollectionCard.vue b/app/components/dashboard/DashboardCollectionCard.vue
new file mode 100644
index 00000000..bbcdc5d5
--- /dev/null
+++ b/app/components/dashboard/DashboardCollectionCard.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import type { DashboardCollection } from '~/composables/dashboard/useCreatorDashboard'
+import { sanitizeIpfsUrl } from '~/utils/ipfs'
+
+const props = defineProps<{
+  collection: DashboardCollection
+}>()
+
+const route = useRoute()
+const router = useRouter()
+const isMock = computed(() => route.query.mock === 'true')
+
+const bannerUrl = computed(() => {
+  const img = props.collection.metadata?.banner || props.collection.metadata?.image
+  return img ? sanitizeIpfsUrl(img) : ''
+})
+
+const logoUrl = computed(() => {
+  const img = props.collection.metadata?.image
+  return img ? sanitizeIpfsUrl(img) : ''
+})
+
+function handleView() {
+  router.push({
+    path: `/${props.collection.chain}/collection/${props.collection.id}`,
+    query: isMock.value ? { mock: 'true' } : {},
+  })
+}
+
+function handleManage() {
+  const mockQuery = isMock.value ? '?mock=true' : ''
+  router.push(`/${props.collection.chain}/studio/${props.collection.id}${mockQuery}`)
+}
+</script>
+
+<template>
+  <div class="border border-border rounded-xl overflow-hidden hover:shadow-lg transition-shadow group">
+    <!-- Banner -->
+    <div class="relative h-32 bg-muted overflow-hidden">
+      <img
+        v-if="bannerUrl"
+        :src="bannerUrl"
+        :alt="collection.metadata?.name"
+        class="w-full h-full object-cover"
+      >
+      <div v-else class="w-full h-full bg-linear-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-700" />
+
+      <!-- Logo overlay -->
+      <div class="absolute -bottom-6 left-4">
+        <div class="w-12 h-12 rounded-lg overflow-hidden border-2 border-background bg-muted shadow">
+          <img
+            v-if="logoUrl"
+            :src="logoUrl"
+            :alt="collection.metadata?.name"
+            class="w-full h-full object-cover"
+          >
+          <div v-else class="w-full h-full flex items-center justify-center">
+            <UIcon name="i-heroicons-photo" class="w-5 h-5 text-muted-foreground" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="pt-8 p-4 space-y-3">
+      <h3 class="font-semibold text-sm truncate">
+        {{ collection.metadata?.name || `Collection #${collection.id}` }}
+      </h3>
+
+      <div class="flex items-center gap-4 text-xs text-muted-foreground">
+        <span>{{ collection.claimed || 0 }} items</span>
+        <span v-if="collection.floor">
+          Floor: <Money inline :value="collection.floor" />
+        </span>
+      </div>
+
+      <div class="flex gap-2">
+        <UButton
+          size="sm"
+          variant="outline"
+          class="flex-1"
+          @click="handleView"
+        >
+          View
+        </UButton>
+        <UButton
+          size="sm"
+          class="flex-1"
+          @click="handleManage"
+        >
+          Manage
+        </UButton>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/components/explore/NftsGrid.vue b/app/components/explore/NftsGrid.vue
index 721ccba3..1a622b41 100644
--- a/app/components/explore/NftsGrid.vue
+++ b/app/components/explore/NftsGrid.vue
@@ -8,6 +8,9 @@ interface Props {
   gridClass?: string
   prefix?: AssetHubChain
   hideHoverAction?: boolean
+  selectionMode?: boolean
+  selectedIds?: Set<string>
+  studioMode?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -17,7 +20,11 @@ const props = withDefaults(defineProps<Props>(), {
   noItemsFoundMessage: 'Try adjusting your search or filters to see more results.',
 })
 
-const emit = defineEmits(['totalCountChange'])
+const emit = defineEmits<{
+  totalCountChange: [count: number]
+  select: [tokenId: number, collectionId: number]
+  itemClick: [tokenId: number, collectionId: number]
+}>()
 
 // Use the NFTs infinite query composable
 const {
@@ -60,6 +67,11 @@ watch(totalCount, (newCount) => {
         :price="nft.price"
         :current-owner="nft.currentOwner"
         :hide-hover-action="hideHoverAction"
+        :selection-mode="selectionMode"
+        :is-selected="selectedIds?.has(`${nft.collectionId}-${nft.tokenId}`)"
+        :studio-mode="studioMode"
+        @select="emit('select', $event, nft.collectionId)"
+        @item-click="(tokenId, colId) => emit('itemClick', tokenId, colId)"
       />
 
       <slot name="additional-item" />
diff --git a/app/components/massmint/types.ts b/app/components/massmint/types.ts
index c7c4ffea..e7c35c5a 100644
--- a/app/components/massmint/types.ts
+++ b/app/components/massmint/types.ts
@@ -33,3 +33,15 @@ export interface NFTToMint {
 }
 
 export interface NFTS { [id: string]: NFT }
+
+export interface MassMintFile {
+  id: string
+  file: File
+  thumbnailUrl: string
+  order: number
+  uploadStatus: 'local' | 'uploading' | 'uploaded' | 'error'
+  name?: string
+  description?: string
+  price?: number
+  attributes?: Array<{ trait_type: string, value: string }>
+}
diff --git a/app/components/massmint/wizard/FilePreviewModal.vue b/app/components/massmint/wizard/FilePreviewModal.vue
new file mode 100644
index 00000000..83e3c8c8
--- /dev/null
+++ b/app/components/massmint/wizard/FilePreviewModal.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import type { MassMintFile } from '~/components/massmint/types'
+
+const props = defineProps<{
+  file: MassMintFile | null
+  files: MassMintFile[]
+}>()
+
+const emit = defineEmits<{
+  'close': []
+  'update:file': [file: MassMintFile | null]
+}>()
+
+function navigatePreview(direction: 1 | -1) {
+  if (!props.file)
+    return
+  const currentIndex = props.files.findIndex(f => f.id === props.file!.id)
+  const nextIndex = currentIndex + direction
+  if (nextIndex >= 0 && nextIndex < props.files.length) {
+    emit('update:file', props.files[nextIndex]!)
+  }
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-opacity duration-200"
+      leave-active-class="transition-opacity duration-200"
+      enter-from-class="opacity-0"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="file"
+        class="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-sm"
+        @click.self="emit('close')"
+      >
+        <!-- Close -->
+        <button
+          class="absolute top-4 right-4 w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 text-white flex items-center justify-center transition-colors"
+          @click="emit('close')"
+        >
+          <UIcon name="i-heroicons-x-mark" class="w-6 h-6" />
+        </button>
+
+        <!-- Nav: Previous -->
+        <button
+          v-if="file.order > 0"
+          class="absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 text-white flex items-center justify-center transition-colors"
+          @click="navigatePreview(-1)"
+        >
+          <UIcon name="i-heroicons-chevron-left" class="w-6 h-6" />
+        </button>
+
+        <!-- Nav: Next -->
+        <button
+          v-if="file.order < files.length - 1"
+          class="absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 text-white flex items-center justify-center transition-colors"
+          @click="navigatePreview(1)"
+        >
+          <UIcon name="i-heroicons-chevron-right" class="w-6 h-6" />
+        </button>
+
+        <!-- Content -->
+        <div class="flex flex-col items-center gap-4 max-w-[80vw] max-h-[80vh]">
+          <img
+            v-if="file.file.type?.startsWith('image/')"
+            :src="file.thumbnailUrl"
+            :alt="file.file.name"
+            class="max-w-full max-h-[70vh] object-contain rounded-lg shadow-2xl"
+          >
+          <div
+            v-else
+            class="w-64 h-64 bg-white/10 rounded-lg flex items-center justify-center"
+          >
+            <UIcon
+              :name="file.file.type?.startsWith('video/') ? 'i-heroicons-film' : file.file.type?.startsWith('audio/') ? 'i-heroicons-musical-note' : 'i-heroicons-document'"
+              class="w-16 h-16 text-white/60"
+            />
+          </div>
+
+          <!-- Info bar -->
+          <div class="text-center text-white space-y-1">
+            <p v-if="file.name" class="font-medium text-sm">
+              {{ file.name }}
+            </p>
+            <p class="font-mono text-sm" :class="file.name ? 'text-white/60' : ''">
+              {{ file.file.name }}
+            </p>
+            <p class="text-xs text-white/60 font-mono">
+              {{ formatFileSize(file.file.size) }} · {{ getFileTypeLabel(file.file.type || '') }} · #{{ file.order + 1 }} of {{ files.length }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
diff --git a/app/components/massmint/wizard/MassMintItemPanel.vue b/app/components/massmint/wizard/MassMintItemPanel.vue
new file mode 100644
index 00000000..133628ce
--- /dev/null
+++ b/app/components/massmint/wizard/MassMintItemPanel.vue
@@ -0,0 +1,305 @@
+<script setup lang="ts">
+import type { MassMintFile } from '~/components/massmint/types'
+
+const props = defineProps<{
+  file: MassMintFile | null
+}>()
+
+const emit = defineEmits<{
+  close: []
+  save: [data: { name: string, description: string, attributes: Array<{ trait_type: string, value: string }> }]
+}>()
+
+// Local form state — populated from file, committed on Save
+const editName = ref('')
+const editDescription = ref('')
+const editAttributes = ref<Array<{ trait_type: string, value: string }>>([])
+
+// Snapshot of original values to track dirty state
+const originalName = ref('')
+const originalDescription = ref('')
+const originalAttributes = ref('')
+
+function populateFrom(file: MassMintFile) {
+  editName.value = file.name ?? ''
+  editDescription.value = file.description ?? ''
+  editAttributes.value = file.attributes?.map(a => ({ ...a })) ?? []
+  snapshotOriginals()
+}
+
+function snapshotOriginals() {
+  originalName.value = editName.value
+  originalDescription.value = editDescription.value
+  originalAttributes.value = JSON.stringify(editAttributes.value)
+}
+
+const isDirty = computed(() => {
+  return editName.value !== originalName.value
+    || editDescription.value !== originalDescription.value
+    || JSON.stringify(editAttributes.value) !== originalAttributes.value
+})
+
+// Populate when file changes
+watch(() => props.file, (file) => {
+  if (file) {
+    populateFrom(file)
+  }
+}, { immediate: true })
+
+function addTrait() {
+  editAttributes.value.push({ trait_type: '', value: '' })
+}
+
+function removeTrait(index: number) {
+  editAttributes.value.splice(index, 1)
+}
+
+function handleSave() {
+  emit('save', {
+    name: editName.value,
+    description: editDescription.value,
+    attributes: editAttributes.value.filter(a => a.trait_type.trim() || a.value.trim()),
+  })
+  snapshotOriginals()
+}
+
+// Unsaved changes confirmation
+const showDiscardConfirm = ref(false)
+let pendingAction: (() => void) | null = null
+
+function guardedClose() {
+  if (isDirty.value) {
+    pendingAction = () => emit('close')
+    nextTick(() => {
+      showDiscardConfirm.value = true
+    })
+  }
+  else {
+    emit('close')
+  }
+}
+
+function confirmDiscard() {
+  showDiscardConfirm.value = false
+  pendingAction?.()
+  pendingAction = null
+}
+
+function cancelDiscard() {
+  showDiscardConfirm.value = false
+  pendingAction = null
+}
+
+/**
+ * Called by parent before switching to a different file.
+ * Returns true if switch is allowed, false if blocked (shows discard dialog).
+ */
+function canSwitchFile(onConfirm: () => void): boolean {
+  if (isDirty.value) {
+    pendingAction = onConfirm
+    showDiscardConfirm.value = true
+    return false
+  }
+  return true
+}
+
+defineExpose({ canSwitchFile })
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape' && props.file) {
+    e.stopImmediatePropagation()
+    e.preventDefault()
+    guardedClose()
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeydown, true)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeydown, true)
+})
+
+const nameError = computed(() => !editName.value.trim())
+const descriptionHint = computed(() => !editDescription.value.trim())
+</script>
+
+<template>
+  <Teleport to="body">
+    <!-- Overlay -->
+    <Transition
+      enter-active-class="transition-opacity duration-200"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition-opacity duration-200"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="file"
+        class="fixed inset-0 bg-black/50"
+        style="z-index: 100"
+        @click="guardedClose"
+      />
+    </Transition>
+
+    <!-- Panel -->
+    <Transition
+      enter-active-class="transition-transform duration-300 ease-out"
+      enter-from-class="translate-x-full"
+      enter-to-class="translate-x-0"
+      leave-active-class="transition-transform duration-200 ease-in"
+      leave-from-class="translate-x-0"
+      leave-to-class="translate-x-full"
+    >
+      <aside
+        v-if="file"
+        class="fixed right-0 top-0 h-screen w-[340px] bg-background border-l border-border shadow-2xl overflow-y-auto"
+        style="z-index: 101"
+        @click.stop
+      >
+        <!-- Header — height matches top bar (px-5 py-3.5 with h-8 content) -->
+        <div class="flex items-center justify-between px-4 py-3.5 border-b border-border min-h-[60px]">
+          <h3 class="font-semibold text-sm truncate">
+            {{ file.file.name }}
+          </h3>
+          <UButton
+            variant="ghost"
+            size="sm"
+            icon="i-heroicons-x-mark"
+            @click="guardedClose"
+          />
+        </div>
+
+        <!-- Thumbnail -->
+        <div class="aspect-square bg-muted">
+          <img
+            v-if="file.file.type?.startsWith('image/')"
+            :src="file.thumbnailUrl"
+            :alt="file.file.name"
+            class="w-full h-full object-cover"
+          >
+          <div v-else class="w-full h-full flex items-center justify-center">
+            <UIcon name="i-heroicons-document" class="w-16 h-16 text-muted-foreground" />
+          </div>
+        </div>
+
+        <!-- Content -->
+        <div class="p-4 space-y-5">
+          <!-- Name -->
+          <div>
+            <label class="text-xs font-medium text-muted-foreground mb-1 block">
+              Name <span class="text-red-500">*</span>
+            </label>
+            <UInput
+              v-model="editName"
+              placeholder="NFT name"
+              :class="nameError ? 'ring-1 ring-red-500' : ''"
+            />
+            <p v-if="nameError" class="text-xs text-red-500 mt-1">
+              Name is required
+            </p>
+          </div>
+
+          <!-- Description -->
+          <div>
+            <label class="text-xs font-medium text-muted-foreground mb-1 block">Description</label>
+            <UTextarea
+              v-model="editDescription"
+              placeholder="Add a description..."
+              :rows="3"
+            />
+            <p v-if="descriptionHint" class="text-xs text-amber-500 mt-1">
+              No description — optional but recommended
+            </p>
+          </div>
+
+          <!-- Properties / Traits -->
+          <div>
+            <div class="flex items-center justify-between mb-2">
+              <label class="text-xs font-medium text-muted-foreground">Properties</label>
+              <UButton
+                variant="ghost"
+                size="xs"
+                icon="i-heroicons-plus"
+                @click="addTrait"
+              >
+                Add
+              </UButton>
+            </div>
+            <div class="space-y-2">
+              <div v-if="editAttributes.length > 0" class="flex items-center gap-2 px-1">
+                <span class="flex-1 text-xs text-muted-foreground">Trait</span>
+                <span class="flex-1 text-xs text-muted-foreground">Value</span>
+                <span class="w-7" />
+              </div>
+              <div
+                v-for="(attr, i) in editAttributes"
+                :key="i"
+                class="flex items-center gap-2"
+              >
+                <UInput
+                  v-model="attr.trait_type"
+                  placeholder="Trait"
+                  size="sm"
+                  class="flex-1"
+                />
+                <UInput
+                  v-model="attr.value"
+                  placeholder="Value"
+                  size="sm"
+                  class="flex-1"
+                />
+                <UButton
+                  variant="ghost"
+                  size="xs"
+                  icon="i-heroicons-trash"
+                  class="text-muted-foreground"
+                  @click="removeTrait(i)"
+                />
+              </div>
+              <p v-if="editAttributes.length === 0" class="text-xs text-muted-foreground">
+                No properties yet.
+              </p>
+            </div>
+          </div>
+
+          <!-- Divider + Save -->
+          <div class="pt-4 border-t border-border">
+            <UButton
+              class="w-full"
+              :disabled="nameError"
+              icon="i-heroicons-check-circle"
+              @click="handleSave"
+            >
+              Save
+            </UButton>
+          </div>
+        </div>
+      </aside>
+    </Transition>
+  </Teleport>
+
+  <!-- Discard confirmation -->
+  <UModal v-model:open="showDiscardConfirm">
+    <template #content>
+      <div class="p-6 space-y-4">
+        <h3 class="text-lg font-semibold">
+          Unsaved changes
+        </h3>
+        <p class="text-muted-foreground">
+          You have unsaved changes. Discard them?
+        </p>
+        <div class="flex justify-end gap-3">
+          <UButton variant="outline" @click="cancelDiscard">
+            Go Back
+          </UButton>
+          <UButton color="error" @click="confirmDiscard">
+            Discard
+          </UButton>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>
diff --git a/app/components/massmint/wizard/MassMintWizard.vue b/app/components/massmint/wizard/MassMintWizard.vue
new file mode 100644
index 00000000..2029eb5c
--- /dev/null
+++ b/app/components/massmint/wizard/MassMintWizard.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import type { AssetHubChain } from '~/plugins/sdk.client'
+import type { StepConfig } from '~/types/bulkOperations'
+import { useBulkOperationWizard } from '~/composables/bulkOperations/useBulkOperationWizard'
+import { useMassMintWizard } from '~/composables/massmint/useMassMintWizard'
+import { BulkOperationType, MassMintStep } from '~/types/bulkOperations'
+
+const props = defineProps<{
+  collectionId: string
+  chain: AssetHubChain
+  collectionName: string
+  existingItemCount: number
+  returnRoute?: string
+  compact?: boolean
+}>()
+
+const route = useRoute()
+const store = useBulkOperationsStore()
+const wizard = useMassMintWizard()
+
+const isMock = computed(() => route.query.mock === 'true')
+
+const steps: StepConfig[] = [
+  { label: 'Upload', icon: 'i-heroicons-arrow-up-tray' },
+  { label: 'Metadata', icon: 'i-heroicons-document-text' },
+  { label: 'Review', icon: 'i-heroicons-eye' },
+  { label: 'Mint', icon: 'i-heroicons-sparkles' },
+]
+
+const { completedSteps, handleNext, handleBack } = useBulkOperationWizard({
+  steps,
+  onComplete: () => {},
+})
+
+onMounted(() => {
+  store.initOperation(BulkOperationType.MASS_MINT, props.collectionId, props.chain)
+})
+
+onUnmounted(() => {
+  if (store.currentStep !== MassMintStep.MINT) {
+    store.reset()
+  }
+})
+
+const canProceed = computed(() => {
+  switch (store.currentStep) {
+    case MassMintStep.UPLOAD:
+      return wizard.canProceedFromUpload.value
+    case MassMintStep.METADATA:
+      return isMock.value || wizard.canProceedFromMetadata.value
+    case MassMintStep.REVIEW:
+      return true
+    default:
+      return false
+  }
+})
+
+const continueLabel = computed(() => {
+  if (store.currentStep === MassMintStep.REVIEW)
+    return 'Proceed to Mint'
+  if (store.currentStep === MassMintStep.MINT)
+    return 'Mint Now'
+  return 'Continue'
+})
+
+const showFooter = computed(() => store.currentStep !== MassMintStep.MINT)
+
+function handleStepClick(step: number) {
+  store.goToStep(step)
+}
+
+function handleContinue() {
+  if (store.currentStep === MassMintStep.METADATA) {
+    wizard.applySharedDescription()
+  }
+  handleNext()
+}
+
+const backLink = computed(() => props.returnRoute || `/${props.chain}/collection/${props.collectionId}?admin=true`)
+</script>
+
+<template>
+  <BulkWizardLayout
+    :title="`Mass Mint — ${collectionName}`"
+    :steps="steps"
+    :current-step="store.currentStep"
+    :completed-steps="completedSteps"
+    :max-step-reached="store.maxStepReached"
+    :can-proceed="canProceed"
+    :continue-label="continueLabel"
+    :show-footer="showFooter"
+    :back-link="backLink"
+    :compact="compact"
+    @back="handleBack"
+    @continue="handleContinue"
+    @step-click="handleStepClick"
+  >
+    <UploadStep
+      v-if="store.currentStep === MassMintStep.UPLOAD"
+      :wizard="wizard"
+    />
+
+    <MetadataStep
+      v-else-if="store.currentStep === MassMintStep.METADATA"
+      :wizard="wizard"
+      :existing-item-count="existingItemCount"
+    />
+
+    <ReviewStep
+      v-else-if="store.currentStep === MassMintStep.REVIEW"
+      :wizard="wizard"
+      :collection-id="collectionId"
+      :chain="chain"
+    />
+
+    <MintStep
+      v-else-if="store.currentStep === MassMintStep.MINT"
+      :wizard="wizard"
+      :collection-id="collectionId"
+      :collection-name="collectionName"
+      :chain="chain"
+      :return-route="returnRoute"
+    />
+  </BulkWizardLayout>
+</template>
diff --git a/app/components/massmint/wizard/MetadataPreviewTable.vue b/app/components/massmint/wizard/MetadataPreviewTable.vue
new file mode 100644
index 00000000..e9302886
--- /dev/null
+++ b/app/components/massmint/wizard/MetadataPreviewTable.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import type { MassMintFile } from '~/components/massmint/types'
+
+const props = defineProps<{
+  files: MassMintFile[]
+}>()
+
+const emit = defineEmits<{
+  fileClick: [file: MassMintFile]
+}>()
+
+const readyCount = computed(() => props.files.filter(f => f.name?.trim() && f.description?.trim()).length)
+const warningCount = computed(() => props.files.filter(f => f.name?.trim() && !f.description?.trim()).length)
+const errorCount = computed(() => props.files.filter(f => !f.name?.trim()).length)
+</script>
+
+<template>
+  <div class="space-y-3">
+    <div class="flex items-center gap-4 text-sm font-mono">
+      <span class="text-green-600">{{ readyCount }} ready</span>
+      <span v-if="warningCount > 0" class="text-amber-500">{{ warningCount }} warning{{ warningCount !== 1 ? 's' : '' }}</span>
+      <span v-if="errorCount > 0" class="text-red-500">{{ errorCount }} error{{ errorCount !== 1 ? 's' : '' }}</span>
+    </div>
+
+    <div class="border border-border rounded-lg overflow-hidden">
+      <table class="w-full text-sm">
+        <thead class="bg-muted">
+          <tr>
+            <th class="text-left px-3 py-2 font-medium w-12" />
+            <th class="text-left px-3 py-2 font-medium">
+              Filename
+            </th>
+            <th class="text-left px-3 py-2 font-medium">
+              Name
+            </th>
+            <th class="text-left px-3 py-2 font-medium">
+              Description
+            </th>
+            <th class="text-left px-3 py-2 font-medium w-16">
+              Status
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="file in files"
+            :key="file.id"
+            class="border-t border-border hover:bg-muted/30 cursor-pointer transition-colors"
+            @click="emit('fileClick', file)"
+          >
+            <td class="px-3 py-2">
+              <div class="w-8 h-8 rounded overflow-hidden bg-muted">
+                <img
+                  v-if="file.file.type?.startsWith('image/')"
+                  :src="file.thumbnailUrl"
+                  :alt="file.file.name"
+                  class="w-full h-full object-cover"
+                >
+                <div v-else class="w-full h-full flex items-center justify-center">
+                  <UIcon name="i-heroicons-document" class="w-4 h-4 text-muted-foreground" />
+                </div>
+              </div>
+            </td>
+            <td class="px-3 py-2 truncate max-w-[120px] font-mono text-xs">
+              {{ file.file.name }}
+            </td>
+            <td class="px-3 py-2 truncate max-w-[150px]">
+              {{ file.name || '—' }}
+            </td>
+            <td class="px-3 py-2 truncate max-w-[200px] text-muted-foreground">
+              {{ file.description || '—' }}
+            </td>
+            <td class="px-3 py-2">
+              <UTooltip
+                v-if="!file.name?.trim()"
+                text="Missing name — required to mint"
+                :delay-duration="100"
+                :ui="{ content: 'bg-red-500 text-white' }"
+              >
+                <UIcon
+                  name="i-heroicons-x-circle"
+                  class="w-5 h-5 text-red-500 hover:scale-110 transition-transform cursor-help"
+                />
+              </UTooltip>
+              <UTooltip
+                v-else-if="!file.description?.trim()"
+                text="No description — can still mint"
+                :delay-duration="100"
+                :ui="{ content: 'bg-amber-500 text-white' }"
+              >
+                <UIcon
+                  name="i-heroicons-exclamation-triangle"
+                  class="w-5 h-5 text-amber-500 hover:scale-110 transition-transform cursor-help"
+                />
+              </UTooltip>
+              <UTooltip
+                v-else
+                text="Ready to mint"
+                :delay-duration="100"
+                :ui="{ content: 'bg-green-600 text-white' }"
+              >
+                <UIcon
+                  name="i-heroicons-check-circle"
+                  class="w-5 h-5 text-green-500 hover:scale-110 transition-transform cursor-help"
+                />
+              </UTooltip>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
diff --git a/app/components/massmint/wizard/steps/MetadataStep.vue b/app/components/massmint/wizard/steps/MetadataStep.vue
new file mode 100644
index 00000000..336439f1
--- /dev/null
+++ b/app/components/massmint/wizard/steps/MetadataStep.vue
@@ -0,0 +1,592 @@
+<script setup lang="ts">
+import type { MassMintFile } from '~/components/massmint/types'
+import type { useMassMintWizard } from '~/composables/massmint/useMassMintWizard'
+import Papa from 'papaparse'
+import MassMintItemPanel from '~/components/massmint/wizard/MassMintItemPanel.vue'
+import { useTemplateGenerator } from '~/composables/massmint/useTemplateGenerator'
+import { MetadataPath } from '~/types/bulkOperations'
+
+const props = defineProps<{
+  wizard: ReturnType<typeof useMassMintWizard>
+  existingItemCount: number
+}>()
+
+const { downloadCsvTemplate } = useTemplateGenerator()
+
+// Local reference to wizard to avoid prop mutation linting errors
+// (we're mutating .value of refs within wizard, which is acceptable in Vue)
+const wizard = props.wizard
+
+const templateFileInput = ref<HTMLInputElement>()
+const editingFile = ref<MassMintFile | null>(null)
+const itemPanelRef = ref<InstanceType<typeof MassMintItemPanel> | null>(null)
+
+function openFilePanel(file: MassMintFile) {
+  if (editingFile.value && editingFile.value.id !== file.id) {
+    const allowed = itemPanelRef.value?.canSwitchFile(() => {
+      editingFile.value = file
+    })
+    if (!allowed)
+      return
+  }
+  editingFile.value = file
+}
+
+function handlePanelSave(data: { name: string, description: string, attributes: Array<{ trait_type: string, value: string }> }) {
+  if (!editingFile.value)
+    return
+  editingFile.value.name = data.name
+  editingFile.value.description = data.description
+  editingFile.value.attributes = data.attributes.length > 0 ? data.attributes : undefined
+}
+
+function closeFilePanel() {
+  editingFile.value = null
+}
+
+const sharedDescriptionApplied = ref(false)
+const sharedDescriptionAppliedCount = ref(0)
+const lastAppliedDescription = ref('')
+
+function handleApplySharedDescription() {
+  const desc = wizard.sharedDescription.value.trim()
+  if (!desc)
+    return
+
+  let count = 0
+  wizard.uploadedFiles.value.forEach((file) => {
+    const current = file.description?.trim() ?? ''
+    if (!current || current === lastAppliedDescription.value) {
+      file.description = desc
+      count++
+    }
+  })
+
+  lastAppliedDescription.value = desc
+  sharedDescriptionAppliedCount.value = count
+  sharedDescriptionApplied.value = true
+}
+
+watch(() => wizard.sharedDescription.value, () => {
+  sharedDescriptionApplied.value = false
+})
+
+function handleDownloadTemplate() {
+  downloadCsvTemplate(wizard.uploadedFiles.value)
+  wizard.templateDownloaded.value = true
+}
+
+function handleTemplateUpload(e: Event) {
+  const input = e.target as HTMLInputElement
+  const file = input.files?.[0]
+  if (!file)
+    return
+
+  wizard.templateFileName.value = file.name
+  wizard.templateFileSize.value = file.size
+
+  const reader = new FileReader()
+  reader.onload = (event) => {
+    const content = event.target?.result as string
+    const success = parseTemplateFile(file.name, content)
+    if (success) {
+      wizard.templateUploaded.value = true
+    }
+    else {
+      wizard.templateFileName.value = ''
+      wizard.templateFileSize.value = 0
+    }
+  }
+  reader.readAsText(file)
+  input.value = ''
+}
+
+function handleRemoveTemplate() {
+  wizard.templateUploaded.value = false
+  wizard.templateFileName.value = ''
+  wizard.templateFileSize.value = 0
+  // Clear descriptions that were set from the template
+  wizard.uploadedFiles.value.forEach((file) => {
+    file.description = undefined
+  })
+}
+
+function parseTemplateFile(fileName: string, content: string): boolean {
+  const ext = fileName.split('.').pop()?.toLowerCase()
+
+  if (ext === 'csv') {
+    return parseCsvContent(content)
+  }
+  else if (ext === 'json') {
+    return parseJsonContent(content)
+  }
+  else if (ext === 'txt') {
+    parseTxtContent(content)
+    return true
+  }
+  else {
+    errorMessage('Unsupported template format. Use CSV, JSON, or TXT.')
+    return false
+  }
+}
+
+function parseCsvContent(content: string): boolean {
+  const parseResult = Papa.parse<string[]>(content, {
+    header: false,
+    skipEmptyLines: true,
+    transformHeader: header => header.trim().toLowerCase(),
+  })
+
+  if (parseResult.errors.length > 0) {
+    errorMessage(`CSV parsing error: ${parseResult.errors[0]?.message || 'Invalid CSV format'}`)
+    return false
+  }
+
+  const rows = parseResult.data
+  if (rows.length < 2) {
+    errorMessage('CSV file is empty — no data rows found')
+    return false
+  }
+
+  const header = rows[0]!.map(h => h.trim().toLowerCase())
+  const nameIdx = header.indexOf('name')
+  const descIdx = header.indexOf('description')
+  const priceIdx = header.indexOf('price')
+  const filenameIdx = header.indexOf('filename')
+
+  for (let i = 1; i < rows.length; i++) {
+    const cols = rows[i]!
+    const filename = filenameIdx >= 0 && filenameIdx < cols.length ? cols[filenameIdx]?.trim() : undefined
+    const name = nameIdx >= 0 && nameIdx < cols.length ? cols[nameIdx]?.trim() : undefined
+    const description = descIdx >= 0 && descIdx < cols.length ? cols[descIdx]?.trim() : undefined
+    const price = priceIdx >= 0 && priceIdx < cols.length ? cols[priceIdx]?.trim() : undefined
+
+    // Remove formula injection protection prefix if present (added during export)
+    const cleanName = name && /^'[=+\-@]/.test(name) ? name.slice(1) : name
+    const cleanDescription = description && /^'[=+\-@]/.test(description) ? description.slice(1) : description
+
+    const file = filename
+      ? wizard.uploadedFiles.value.find(f => f.file.name === filename)
+      : wizard.uploadedFiles.value[i - 1]
+
+    if (file) {
+      if (cleanName)
+        file.name = cleanName
+      if (cleanDescription)
+        file.description = cleanDescription
+      if (price !== undefined && price !== '' && Number(price) >= 0)
+        file.price = Number(price)
+    }
+  }
+  return true
+}
+
+function parseJsonContent(content: string): boolean {
+  try {
+    const data = JSON.parse(content)
+    const entries = Array.isArray(data) ? data : Object.values(data)
+
+    entries.forEach((entry: any, index: number) => {
+      const file = wizard.uploadedFiles.value[index]
+      if (file && entry) {
+        if (entry.name)
+          file.name = entry.name
+        if (entry.description)
+          file.description = entry.description
+        if (entry.price !== undefined && entry.price !== '' && Number(entry.price) >= 0)
+          file.price = Number(entry.price)
+      }
+    })
+    return true
+  }
+  catch {
+    errorMessage('Invalid JSON format')
+    return false
+  }
+}
+
+function parseTxtContent(content: string) {
+  const lines = content.trim().split('\n').filter(l => l.trim())
+
+  lines.forEach((line, index) => {
+    const file = wizard.uploadedFiles.value[index]
+    if (file) {
+      const parts = line.split('::').map(p => p.trim())
+      if (parts[0])
+        file.name = parts[0]
+      if (parts[1])
+        file.description = parts[1]
+    }
+  })
+}
+
+const startingNumberHint = computed(() => {
+  if (props.existingItemCount > 0) {
+    return `Collection has ${props.existingItemCount} items. Numbering starts at #${props.existingItemCount + 1}`
+  }
+  return ''
+})
+
+watch(() => wizard.metadataPath.value, (path) => {
+  if (path === MetadataPath.UNIFORM) {
+    wizard.applyUniformNames()
+  }
+})
+
+watch([() => wizard.uniformName.value, () => wizard.startingNumber.value], () => {
+  if (wizard.metadataPath.value === MetadataPath.UNIFORM) {
+    wizard.applyUniformNames()
+  }
+})
+</script>
+
+<template>
+  <div class="max-w-4xl mx-auto p-6 space-y-6">
+    <!-- Heading -->
+    <div>
+      <h2 class="text-lg font-semibold">
+        Set Metadata for Your NFTs
+      </h2>
+      <p class="text-sm text-muted-foreground mt-1">
+        Every NFT needs a name. Choose how you'd like to assign names and descriptions to your items.
+      </p>
+    </div>
+
+    <!-- Path selection -->
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <button
+        class="p-4 border rounded-xl text-left transition-all"
+        :class="wizard.metadataPath.value === MetadataPath.TEMPLATE
+          ? 'border-primary bg-primary/5 ring-1 ring-primary/20'
+          : 'border-border hover:border-primary/50'"
+        @click="wizard.metadataPath.value = MetadataPath.TEMPLATE"
+      >
+        <div class="flex items-center gap-2 mb-1">
+          <UIcon name="i-heroicons-table-cells" class="w-5 h-5 text-primary" />
+          <h3 class="font-semibold">
+            Template File
+          </h3>
+        </div>
+        <p class="text-sm text-muted-foreground">
+          Unique name & description per item via CSV spreadsheet
+        </p>
+      </button>
+
+      <button
+        class="p-4 border rounded-xl text-left transition-all"
+        :class="wizard.metadataPath.value === MetadataPath.UNIFORM
+          ? 'border-primary bg-primary/5 ring-1 ring-primary/20'
+          : 'border-border hover:border-primary/50'"
+        @click="wizard.metadataPath.value = MetadataPath.UNIFORM"
+      >
+        <div class="flex items-center gap-2 mb-1">
+          <UIcon name="i-heroicons-hashtag" class="w-5 h-5 text-primary" />
+          <h3 class="font-semibold">
+            Uniform Name + Number
+          </h3>
+        </div>
+        <p class="text-sm text-muted-foreground">
+          Sequential numbering, e.g. "Cosmic Explorer #1", "#2"...
+        </p>
+      </button>
+    </div>
+
+    <!-- Template path -->
+    <div v-if="wizard.metadataPath.value === MetadataPath.TEMPLATE" class="space-y-5">
+      <!-- Collapsible explainer -->
+      <details class="group border border-border rounded-lg">
+        <summary class="flex items-center gap-2 px-4 py-2.5 cursor-pointer text-sm font-medium select-none">
+          <UIcon name="i-heroicons-chevron-right" class="w-4 h-4 text-muted-foreground transition-transform group-open:rotate-90" />
+          <UIcon name="i-heroicons-information-circle" class="w-4 h-4 text-primary" />
+          How the CSV template works
+        </summary>
+        <div class="px-4 pb-4 text-sm text-muted-foreground space-y-2">
+          <div class="overflow-x-auto">
+            <table class="text-xs border-collapse w-full">
+              <thead>
+                <tr class="border-b border-border">
+                  <th class="text-left py-1.5 pr-4 font-semibold text-foreground">
+                    Column
+                  </th>
+                  <th class="text-left py-1.5 pr-4 font-semibold text-foreground">
+                    Required
+                  </th>
+                  <th class="text-left py-1.5 font-semibold text-foreground">
+                    Description
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr class="border-b border-border/50">
+                  <td class="py-1.5 pr-4 font-mono">
+                    filename
+                  </td>
+                  <td class="py-1.5 pr-4 text-muted-foreground">
+                    Auto-filled
+                  </td>
+                  <td class="py-1.5">
+                    Matches each row to the uploaded file. Don't change this.
+                  </td>
+                </tr>
+                <tr class="border-b border-border/50">
+                  <td class="py-1.5 pr-4 font-mono">
+                    name
+                  </td>
+                  <td class="py-1.5 pr-4 text-red-500">
+                    Required
+                  </td>
+                  <td class="py-1.5">
+                    Display name of the NFT.
+                  </td>
+                </tr>
+                <tr class="border-b border-border/50">
+                  <td class="py-1.5 pr-4 font-mono">
+                    description
+                  </td>
+                  <td class="py-1.5 pr-4 text-muted-foreground">
+                    Optional
+                  </td>
+                  <td class="py-1.5">
+                    Short description of the item.
+                  </td>
+                </tr>
+                <tr>
+                  <td class="py-1.5 pr-4 font-mono">
+                    price
+                  </td>
+                  <td class="py-1.5 pr-4 text-muted-foreground">
+                    Optional
+                  </td>
+                  <td class="py-1.5">
+                    List price in DOT. Empty = no listing.
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <p>
+            Open in Google Sheets, Excel, or any text editor. Also accepts JSON and TXT formats.
+          </p>
+        </div>
+      </details>
+
+      <!-- Step 1: Download -->
+      <div class="flex items-start gap-3">
+        <div
+          class="flex items-center justify-center w-7 h-7 rounded-full shrink-0 text-xs font-bold transition-colors"
+          :class="wizard.templateDownloaded.value
+            ? 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400'
+            : 'bg-primary/10 text-primary'"
+        >
+          <UIcon v-if="wizard.templateDownloaded.value" name="i-heroicons-check" class="w-3.5 h-3.5" />
+          <span v-else>1</span>
+        </div>
+        <div class="flex-1">
+          <h4 class="font-medium text-sm mb-2">
+            Download template
+          </h4>
+
+          <!-- Downloaded state -->
+          <div v-if="wizard.templateDownloaded.value" class="flex items-center gap-3">
+            <div class="flex items-center gap-1.5 text-sm text-green-600 dark:text-green-400">
+              <UIcon name="i-heroicons-check-circle" class="w-4 h-4" />
+              <span class="font-mono text-xs">template.csv</span>
+            </div>
+            <UButton
+              variant="link"
+              size="xs"
+              icon="i-heroicons-arrow-down-tray"
+              @click="handleDownloadTemplate"
+            >
+              Download again
+            </UButton>
+          </div>
+
+          <!-- Default state -->
+          <UButton
+            v-else
+            variant="outline"
+            size="sm"
+            icon="i-heroicons-arrow-down-tray"
+            @click="handleDownloadTemplate"
+          >
+            Download CSV
+          </UButton>
+        </div>
+      </div>
+
+      <!-- Step 2: Upload -->
+      <div class="flex items-start gap-3">
+        <div
+          class="flex items-center justify-center w-7 h-7 rounded-full shrink-0 text-xs font-bold transition-colors"
+          :class="wizard.templateUploaded.value
+            ? 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400'
+            : 'bg-primary/10 text-primary'"
+        >
+          <UIcon v-if="wizard.templateUploaded.value" name="i-heroicons-check" class="w-3.5 h-3.5" />
+          <span v-else>2</span>
+        </div>
+        <div class="flex-1">
+          <h4 class="font-medium text-sm mb-2">
+            Upload filled template
+            <span class="text-xs text-muted-foreground font-normal ml-1">CSV, JSON, or TXT</span>
+          </h4>
+
+          <input
+            ref="templateFileInput"
+            type="file"
+            accept=".csv,.json,.txt"
+            class="hidden"
+            @change="handleTemplateUpload"
+          >
+
+          <!-- Uploaded state: file card -->
+          <div v-if="wizard.templateUploaded.value">
+            <div class="flex items-center gap-3 p-2.5 border border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/20 rounded-lg">
+              <UIcon name="i-heroicons-document-check" class="w-5 h-5 text-green-600 dark:text-green-400 shrink-0" />
+              <div class="flex-1 min-w-0">
+                <p class="text-sm font-medium truncate font-mono">
+                  {{ wizard.templateFileName.value }}
+                </p>
+                <p class="text-xs text-muted-foreground font-mono">
+                  {{ formatFileSize(wizard.templateFileSize.value) }}
+                </p>
+              </div>
+              <div class="flex items-center gap-1">
+                <UButton
+                  variant="ghost"
+                  size="xs"
+                  icon="i-heroicons-arrow-path"
+                  @click="templateFileInput?.click()"
+                >
+                  Replace
+                </UButton>
+                <UButton
+                  variant="ghost"
+                  size="xs"
+                  color="error"
+                  icon="i-heroicons-x-mark"
+                  @click="handleRemoveTemplate"
+                />
+              </div>
+            </div>
+          </div>
+
+          <!-- Default state -->
+          <UButton
+            v-else
+            variant="outline"
+            size="sm"
+            icon="i-heroicons-arrow-up-tray"
+            @click="templateFileInput?.click()"
+          >
+            Upload Template
+          </UButton>
+        </div>
+      </div>
+
+      <MetadataPreviewTable
+        :files="wizard.uploadedFiles.value"
+        @file-click="openFilePanel($event)"
+      />
+    </div>
+
+    <!-- Uniform path -->
+    <div v-else class="space-y-5">
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <div>
+          <label class="text-sm font-medium block mb-1">Base Name</label>
+          <UInput
+            v-model="wizard.uniformName.value"
+            placeholder="e.g., Cosmic Explorer"
+            size="lg"
+          />
+        </div>
+        <div>
+          <label class="text-sm font-medium block mb-1">Starting Number</label>
+          <UInput
+            v-model.number="wizard.startingNumber.value"
+            type="number"
+            :min="1"
+            size="lg"
+          />
+          <p v-if="startingNumberHint" class="text-xs text-amber-600 dark:text-amber-400 mt-1">
+            {{ startingNumberHint }}
+          </p>
+        </div>
+      </div>
+
+      <!-- Preview grid -->
+      <div v-if="wizard.uniformName.value" class="space-y-2">
+        <p class="text-sm font-medium">
+          Preview
+        </p>
+        <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-3">
+          <div
+            v-for="file in wizard.uploadedFiles.value.slice(0, 12)"
+            :key="file.id"
+            class="aspect-square rounded-lg overflow-hidden border border-border relative cursor-pointer hover:ring-2 hover:ring-primary/50 transition-all"
+            @click="openFilePanel(file)"
+          >
+            <img
+              v-if="file.file.type?.startsWith('image/')"
+              :src="file.thumbnailUrl"
+              :alt="file.name"
+              class="w-full h-full object-cover"
+            >
+            <div v-else class="w-full h-full flex items-center justify-center bg-muted">
+              <UIcon name="i-heroicons-document" class="w-6 h-6 text-muted-foreground" />
+            </div>
+            <div class="absolute bottom-0 left-0 right-0 bg-black/70 px-2 py-1">
+              <p class="text-white text-[10px] truncate">
+                {{ file.name }}
+              </p>
+            </div>
+          </div>
+        </div>
+        <p v-if="wizard.uploadedFiles.value.length > 12" class="text-xs text-muted-foreground">
+          ...and {{ wizard.uploadedFiles.value.length - 12 }} more
+        </p>
+      </div>
+
+      <MetadataPreviewTable
+        :files="wizard.uploadedFiles.value"
+        @file-click="openFilePanel($event)"
+      />
+    </div>
+
+    <!-- Shared description -->
+    <div class="space-y-2">
+      <label class="text-sm font-medium block">Shared Description</label>
+      <UTextarea
+        v-model="wizard.sharedDescription.value"
+        placeholder="Applies to all items without an individual description"
+        :rows="2"
+        class="w-full"
+      />
+
+      <div class="flex items-center gap-3">
+        <UButton
+          size="sm"
+          :disabled="!wizard.sharedDescription.value.trim() || sharedDescriptionApplied"
+          icon="i-heroicons-check"
+          @click="handleApplySharedDescription"
+        >
+          Apply to All
+        </UButton>
+
+        <div v-if="sharedDescriptionApplied" class="flex items-center gap-1.5 text-sm text-green-600 dark:text-green-400">
+          <UIcon name="i-heroicons-check-circle" class="w-4 h-4" />
+          <span>Applied to {{ sharedDescriptionAppliedCount }} item{{ sharedDescriptionAppliedCount !== 1 ? 's' : '' }}</span>
+        </div>
+      </div>
+    </div>
+
+    <MassMintItemPanel
+      ref="itemPanelRef"
+      :file="editingFile"
+      @save="handlePanelSave"
+      @close="closeFilePanel"
+    />
+  </div>
+</template>
diff --git a/app/components/massmint/wizard/steps/MintStep.vue b/app/components/massmint/wizard/steps/MintStep.vue
new file mode 100644
index 00000000..35fe5949
--- /dev/null
+++ b/app/components/massmint/wizard/steps/MintStep.vue
@@ -0,0 +1,295 @@
+<script setup lang="ts">
+import type { NFTToMint } from '~/components/massmint/types'
+import type { useMassMintWizard } from '~/composables/massmint/useMassMintWizard'
+import type { AssetHubChain } from '~/plugins/sdk.client'
+import { useMassMint } from '~/composables/massmint/useMassMint'
+import { MintingState } from '~/types/bulkOperations'
+
+const props = defineProps<{
+  wizard: ReturnType<typeof useMassMintWizard>
+  collectionId: string
+  collectionName: string
+  chain: AssetHubChain
+  returnRoute?: string
+}>()
+
+const router = useRouter()
+const store = useBulkOperationsStore()
+
+const mintingState = ref<MintingState>(MintingState.PRE_SIGN)
+const errorMsg = ref('')
+
+const { massMint, progress, isLoading: _isLoading } = useMassMint()
+
+const totalFiles = computed(() => props.wizard.uploadedFiles.value.length)
+
+const progressPercent = computed(() => {
+  if (!progress.value.total)
+    return 0
+  return Math.round((progress.value.current / progress.value.total) * 100)
+})
+
+const stageLabel = computed(() => {
+  switch (progress.value.stage) {
+    case 'preparing': return 'Preparing'
+    case 'uploading': return 'Uploading'
+    case 'minting': return 'Signing'
+    case 'complete': return 'Complete'
+    case 'error': return 'Error'
+    default: return ''
+  }
+})
+
+watch(progress, (p) => {
+  if (p.stage === 'uploading' || p.stage === 'preparing') {
+    mintingState.value = MintingState.PROCESSING
+  }
+  else if (p.stage === 'minting') {
+    mintingState.value = MintingState.SIGNING
+  }
+  else if (p.stage === 'complete') {
+    mintingState.value = MintingState.SUCCESS
+  }
+  else if (p.stage === 'error') {
+    mintingState.value = MintingState.ERROR
+    errorMsg.value = p.message
+  }
+})
+
+async function handleMint() {
+  mintingState.value = MintingState.PROCESSING
+
+  const nfts: NFTToMint[] = props.wizard.uploadedFiles.value.map(f => ({
+    name: f.name || f.file.name,
+    file: f.file,
+    description: f.description,
+    price: f.price,
+    attributes: f.attributes,
+  }))
+
+  try {
+    await massMint({
+      nfts,
+      collectionId: props.collectionId,
+      collectionName: props.collectionName,
+      blockchain: props.chain,
+    })
+  }
+  catch (err: any) {
+    mintingState.value = MintingState.ERROR
+    errorMsg.value = err.message || 'An unexpected error occurred'
+  }
+}
+
+function handleViewCollection() {
+  store.reset()
+  router.push(props.returnRoute || `/${props.chain}/collection/${props.collectionId}?admin=true`)
+}
+
+function handleMintMore() {
+  props.wizard.clearFiles()
+  store.goToStep(0)
+  mintingState.value = MintingState.PRE_SIGN
+}
+
+function handleRetry() {
+  mintingState.value = MintingState.PRE_SIGN
+}
+
+function handleGoBack() {
+  store.prevStep()
+}
+</script>
+
+<template>
+  <div class="flex items-center justify-center min-h-[400px] p-6">
+    <div class="w-full max-w-md">
+      <!-- PRE_SIGN -->
+      <div v-if="mintingState === MintingState.PRE_SIGN" class="rounded-2xl border border-border bg-background p-8 text-center space-y-5 shadow-sm">
+        <div class="w-12 h-12 mx-auto rounded-xl border border-border bg-muted/50 flex items-center justify-center">
+          <UIcon name="i-heroicons-sparkles" class="w-6 h-6 text-foreground" />
+        </div>
+
+        <div class="space-y-2">
+          <h2 class="text-xl font-semibold">
+            Ready to mint
+          </h2>
+          <p class="text-sm text-muted-foreground leading-relaxed">
+            {{ totalFiles }} item{{ totalFiles !== 1 ? 's' : '' }} will be uploaded and minted into
+            <span class="font-medium text-foreground">{{ collectionName }}</span>.
+            This may take a few minutes.
+          </p>
+        </div>
+
+        <div class="border border-border rounded-xl divide-y divide-border text-sm">
+          <div class="flex items-center justify-between px-4 py-3">
+            <span class="text-muted-foreground">Items</span>
+            <span class="font-medium font-mono">{{ totalFiles }}</span>
+          </div>
+          <div class="flex items-center justify-between px-4 py-3">
+            <span class="text-muted-foreground">Collection</span>
+            <span class="font-medium">{{ collectionName }}</span>
+          </div>
+          <div class="flex items-center justify-between px-4 py-3">
+            <span class="text-muted-foreground">Network</span>
+            <span class="font-medium uppercase">{{ chain }}</span>
+          </div>
+        </div>
+
+        <UButton
+          size="lg"
+          color="primary"
+          class="w-full"
+          @click="handleMint"
+        >
+          Mint Now
+        </UButton>
+      </div>
+
+      <!-- PROCESSING (uploading / preparing) -->
+      <div v-else-if="mintingState === MintingState.PROCESSING" class="rounded-2xl border border-border bg-background p-8 text-center space-y-5 shadow-sm">
+        <div class="w-12 h-12 mx-auto rounded-xl border border-border bg-muted/50 flex items-center justify-center">
+          <UIcon name="i-heroicons-arrow-up-tray" class="w-6 h-6 text-foreground" />
+        </div>
+
+        <div class="space-y-2">
+          <h2 class="text-xl font-semibold">
+            Creating items
+          </h2>
+          <p class="text-sm text-muted-foreground leading-relaxed">
+            Your items are being uploaded to a decentralized server. This may take a few minutes.
+          </p>
+        </div>
+
+        <div class="inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-3 py-1.5">
+          <div class="w-3.5 h-3.5 rounded-full border-2 border-primary border-t-transparent animate-spin" />
+          <span class="text-xs font-semibold uppercase tracking-wide text-primary">{{ stageLabel }}</span>
+        </div>
+
+        <div class="space-y-2">
+          <div class="w-full bg-muted rounded-full h-2 overflow-hidden">
+            <div
+              class="h-full bg-primary rounded-full transition-all duration-700 ease-out"
+              :style="{ width: `${progressPercent}%` }"
+            />
+          </div>
+          <div class="flex items-center justify-between text-xs text-muted-foreground">
+            <span>{{ progress.current }} of {{ progress.total }} items</span>
+            <span class="font-mono">{{ progressPercent }}%</span>
+          </div>
+        </div>
+
+        <p class="text-xs text-muted-foreground/60">
+          Don't close this tab while minting is in progress.
+        </p>
+      </div>
+
+      <!-- SIGNING (wallet confirmation) -->
+      <div v-else-if="mintingState === MintingState.SIGNING" class="rounded-2xl border border-border bg-background p-8 text-center space-y-5 shadow-sm">
+        <div class="w-12 h-12 mx-auto rounded-xl border border-border bg-muted/50 flex items-center justify-center">
+          <UIcon name="i-heroicons-pencil-square" class="w-6 h-6 text-foreground" />
+        </div>
+
+        <div class="space-y-2">
+          <h2 class="text-xl font-semibold">
+            Confirm in wallet
+          </h2>
+          <p class="text-sm text-muted-foreground leading-relaxed">
+            Please approve the transaction in your wallet extension to complete the minting process.
+          </p>
+        </div>
+
+        <div class="inline-flex items-center gap-2 rounded-full border border-amber-500/20 bg-amber-500/5 px-3 py-1.5">
+          <div class="w-3.5 h-3.5 rounded-full border-2 border-amber-500 border-t-transparent animate-spin" />
+          <span class="text-xs font-semibold uppercase tracking-wide text-amber-600 dark:text-amber-400">Awaiting signature</span>
+        </div>
+
+        <p class="text-xs text-muted-foreground/60">
+          Don't close this tab while minting is in progress.
+        </p>
+      </div>
+
+      <!-- SUCCESS -->
+      <div v-else-if="mintingState === MintingState.SUCCESS" class="rounded-2xl border border-border bg-background p-8 text-center space-y-5 shadow-sm">
+        <div class="w-12 h-12 mx-auto rounded-xl border border-green-500/20 bg-green-500/10 flex items-center justify-center">
+          <UIcon name="i-heroicons-check" class="w-6 h-6 text-green-600 dark:text-green-400" />
+        </div>
+
+        <div class="space-y-2">
+          <h2 class="text-xl font-semibold">
+            Minted successfully
+          </h2>
+          <p class="text-sm text-muted-foreground leading-relaxed">
+            {{ totalFiles }} item{{ totalFiles !== 1 ? 's' : '' }} {{ totalFiles !== 1 ? 'have' : 'has' }} been minted into
+            <span class="font-medium text-foreground">{{ collectionName }}</span>.
+          </p>
+        </div>
+
+        <div class="inline-flex items-center gap-2 rounded-full border border-green-500/20 bg-green-500/5 px-3 py-1.5">
+          <UIcon name="i-heroicons-check-circle-solid" class="w-3.5 h-3.5 text-green-600 dark:text-green-400" />
+          <span class="text-xs font-semibold uppercase tracking-wide text-green-600 dark:text-green-400">Complete</span>
+        </div>
+
+        <div class="flex flex-col gap-2">
+          <UButton
+            size="lg"
+            color="primary"
+            class="w-full"
+            @click="handleViewCollection"
+          >
+            View Collection
+          </UButton>
+          <UButton
+            size="lg"
+            variant="outline"
+            class="w-full"
+            @click="handleMintMore"
+          >
+            Mint More
+          </UButton>
+        </div>
+      </div>
+
+      <!-- ERROR -->
+      <div v-else-if="mintingState === MintingState.ERROR" class="rounded-2xl border border-border bg-background p-8 text-center space-y-5 shadow-sm">
+        <div class="w-12 h-12 mx-auto rounded-xl border border-red-500/20 bg-red-500/10 flex items-center justify-center">
+          <UIcon name="i-heroicons-x-mark" class="w-6 h-6 text-red-600 dark:text-red-400" />
+        </div>
+
+        <div class="space-y-2">
+          <h2 class="text-xl font-semibold">
+            Minting failed
+          </h2>
+          <p class="text-sm text-muted-foreground leading-relaxed">
+            Something went wrong while minting your items. You can retry or go back to review.
+          </p>
+        </div>
+
+        <div class="rounded-lg bg-red-500/5 border border-red-500/20 px-4 py-3">
+          <p class="text-xs text-red-600 dark:text-red-400 font-mono break-all">
+            {{ errorMsg }}
+          </p>
+        </div>
+
+        <div class="flex flex-col gap-2">
+          <UButton
+            size="lg"
+            color="primary"
+            class="w-full"
+            @click="handleRetry"
+          >
+            Retry
+          </UButton>
+          <UButton
+            size="lg"
+            variant="outline"
+            class="w-full"
+            @click="handleGoBack"
+          >
+            Back to Review
+          </UButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/components/massmint/wizard/steps/ReviewStep.vue b/app/components/massmint/wizard/steps/ReviewStep.vue
new file mode 100644
index 00000000..bb605dd3
--- /dev/null
+++ b/app/components/massmint/wizard/steps/ReviewStep.vue
@@ -0,0 +1,202 @@
+<script setup lang="ts">
+import type { MassMintFile } from '~/components/massmint/types'
+import type { useMassMintWizard } from '~/composables/massmint/useMassMintWizard'
+import type { AssetHubChain } from '~/plugins/sdk.client'
+
+const props = defineProps<{
+  wizard: ReturnType<typeof useMassMintWizard>
+  collectionId: string
+  chain: AssetHubChain
+}>()
+
+const previewFile = ref<MassMintFile | null>(null)
+const showCostDetails = ref(false)
+
+const { currentChain, chainSymbol } = useChain()
+const {
+  itemDeposit,
+  metadataDeposit,
+  attributeDeposit,
+  loading: depositLoading,
+} = useDeposit(computed(() => currentChain.value))
+
+const readyCount = computed(() =>
+  props.wizard.uploadedFiles.value.filter(f => f.name?.trim() && f.description?.trim()).length,
+)
+
+const warningCount = computed(() =>
+  props.wizard.uploadedFiles.value.filter(f => f.name?.trim() && !f.description?.trim()).length,
+)
+
+const errorCount = computed(() =>
+  props.wizard.uploadedFiles.value.filter(f => !f.name?.trim()).length,
+)
+
+const totalFiles = computed(() => props.wizard.uploadedFiles.value.length)
+const totalAttributes = computed(() =>
+  props.wizard.uploadedFiles.value.reduce((sum, f) => sum + (f.attributes?.length ?? 0), 0),
+)
+
+// Per-item cost components
+const formatDot = (raw: number) => (raw / 1e10).toFixed(4)
+
+const perItemDeposit = computed(() => itemDeposit.value)
+const perItemMetadata = computed(() => metadataDeposit.value)
+const perItemAttribute = computed(() => attributeDeposit.value)
+
+const totalItemDeposits = computed(() => perItemDeposit.value * totalFiles.value)
+const totalMetadataDeposits = computed(() => perItemMetadata.value * totalFiles.value)
+const totalAttributeDeposits = computed(() => perItemAttribute.value * totalAttributes.value)
+
+const estimatedTotal = computed(() => {
+  if (depositLoading.value)
+    return null
+  return totalItemDeposits.value + totalMetadataDeposits.value + totalAttributeDeposits.value
+})
+</script>
+
+<template>
+  <div class="max-w-4xl mx-auto p-6 space-y-6">
+    <!-- Validation summary - compact inline -->
+    <div class="flex items-center gap-6 text-sm">
+      <div class="flex items-center gap-1.5">
+        <UIcon name="i-heroicons-check-circle" class="w-5 h-5 text-green-500" />
+        <span class="font-mono font-bold">{{ readyCount }}</span>
+        <span class="text-muted-foreground">ready</span>
+      </div>
+      <div v-if="warningCount > 0" class="flex items-center gap-1.5">
+        <UIcon name="i-heroicons-exclamation-triangle" class="w-5 h-5 text-amber-500" />
+        <span class="font-mono font-bold">{{ warningCount }}</span>
+        <span class="text-muted-foreground">no description</span>
+      </div>
+      <div v-if="errorCount > 0" class="flex items-center gap-1.5">
+        <UIcon name="i-heroicons-x-circle" class="w-5 h-5 text-red-500" />
+        <span class="font-mono font-bold">{{ errorCount }}</span>
+        <span class="text-muted-foreground">missing name</span>
+      </div>
+    </div>
+
+    <!-- Visual grid preview -->
+    <div class="space-y-3">
+      <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-3">
+        <div
+          v-for="file in wizard.uploadedFiles.value"
+          :key="file.id"
+          class="relative aspect-square rounded-lg overflow-hidden border border-border cursor-pointer hover:ring-2 hover:ring-primary/50 transition-all"
+          @click="previewFile = file"
+        >
+          <img
+            v-if="file.file.type?.startsWith('image/')"
+            :src="file.thumbnailUrl"
+            :alt="file.name"
+            class="w-full h-full object-cover"
+          >
+          <div v-else class="w-full h-full flex items-center justify-center bg-muted">
+            <UIcon name="i-heroicons-document" class="w-6 h-6 text-muted-foreground" />
+          </div>
+
+          <!-- Status badge -->
+          <div
+            v-if="!file.name?.trim()"
+            class="absolute top-1 right-1"
+          >
+            <UIcon name="i-heroicons-x-circle" class="w-4 h-4 text-red-500" />
+          </div>
+          <div
+            v-else-if="!file.description?.trim()"
+            class="absolute top-1 right-1"
+          >
+            <UIcon name="i-heroicons-exclamation-triangle" class="w-4 h-4 text-amber-500" />
+          </div>
+
+          <div class="absolute bottom-0 left-0 right-0 bg-black/70 px-1.5 py-0.5">
+            <p class="text-white text-[10px] truncate">
+              {{ file.name || 'Missing name' }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Cost estimate -->
+    <div class="border border-border rounded-lg overflow-hidden">
+      <!-- Summary row -->
+      <button
+        class="w-full flex items-center justify-between px-4 py-3 text-sm hover:bg-muted/30 transition-colors"
+        @click="showCostDetails = !showCostDetails"
+      >
+        <div class="flex items-center gap-2">
+          <UIcon
+            name="i-heroicons-chevron-right"
+            class="w-4 h-4 text-muted-foreground transition-transform"
+            :class="showCostDetails ? 'rotate-90' : ''"
+          />
+          <span class="font-medium">Estimated Cost</span>
+          <span class="text-muted-foreground">&middot; {{ totalFiles }} items</span>
+        </div>
+        <span v-if="depositLoading">
+          <USkeleton class="h-4 w-28 rounded" />
+        </span>
+        <span v-else class="font-semibold font-mono">
+          ~{{ formatDot(estimatedTotal ?? 0) }} {{ chainSymbol }}
+        </span>
+      </button>
+
+      <!-- Collapsible details -->
+      <div v-if="showCostDetails && !depositLoading" class="border-t border-border bg-muted/20 px-4 py-3 space-y-3">
+        <!-- Per-item breakdown -->
+        <div class="space-y-1.5">
+          <div class="flex items-center justify-between text-sm">
+            <div class="flex items-center gap-2">
+              <span class="text-muted-foreground">Item Deposit</span>
+              <span class="text-xs text-muted-foreground/60">{{ formatDot(perItemDeposit) }} &times; {{ totalFiles }}</span>
+            </div>
+            <span class="font-mono text-sm">{{ formatDot(totalItemDeposits) }} {{ chainSymbol }}</span>
+          </div>
+
+          <div class="flex items-center justify-between text-sm">
+            <div class="flex items-center gap-2">
+              <span class="text-muted-foreground">Metadata Deposit</span>
+              <span class="text-xs text-muted-foreground/60">{{ formatDot(perItemMetadata) }} &times; {{ totalFiles }}</span>
+            </div>
+            <span class="font-mono text-sm">{{ formatDot(totalMetadataDeposits) }} {{ chainSymbol }}</span>
+          </div>
+
+          <div v-if="totalAttributes > 0" class="flex items-center justify-between text-sm">
+            <div class="flex items-center gap-2">
+              <span class="text-muted-foreground">Attribute Deposit</span>
+              <span class="text-xs text-muted-foreground/60">{{ formatDot(perItemAttribute) }} &times; {{ totalAttributes }} traits</span>
+            </div>
+            <span class="font-mono text-sm">{{ formatDot(totalAttributeDeposits) }} {{ chainSymbol }}</span>
+          </div>
+        </div>
+
+        <USeparator />
+
+        <!-- Total -->
+        <div class="flex items-center justify-between text-sm">
+          <span class="font-medium">Total Deposit</span>
+          <span class="font-semibold font-mono">~{{ formatDot(estimatedTotal ?? 0) }} {{ chainSymbol }}</span>
+        </div>
+
+        <p class="text-xs text-muted-foreground">
+          Deposits are refundable when items are burned. Network fees (~0.001 {{ chainSymbol }}) are charged separately per transaction.
+        </p>
+      </div>
+    </div>
+
+    <div v-if="errorCount > 0" class="flex items-center gap-2 border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20 rounded-lg px-4 py-3">
+      <UIcon name="i-heroicons-x-circle" class="w-4 h-4 text-red-500 shrink-0" />
+      <p class="text-sm text-red-600 dark:text-red-400">
+        {{ errorCount }} item{{ errorCount !== 1 ? 's' : '' }} missing name — go back to Metadata to fix
+      </p>
+    </div>
+
+    <FilePreviewModal
+      :file="previewFile"
+      :files="wizard.uploadedFiles.value"
+      @close="previewFile = null"
+      @update:file="previewFile = $event"
+    />
+  </div>
+</template>
diff --git a/app/components/massmint/wizard/steps/UploadStep.vue b/app/components/massmint/wizard/steps/UploadStep.vue
new file mode 100644
index 00000000..4a0f711f
--- /dev/null
+++ b/app/components/massmint/wizard/steps/UploadStep.vue
@@ -0,0 +1,296 @@
+<script setup lang="ts">
+import type { MassMintFile } from '~/components/massmint/types'
+import type { useMassMintWizard } from '~/composables/massmint/useMassMintWizard'
+import draggable from 'vuedraggable'
+
+const props = defineProps<{
+  wizard: ReturnType<typeof useMassMintWizard>
+}>()
+
+const wizard = props.wizard
+
+const isDragOver = ref(false)
+const fileInputRef = ref<HTMLInputElement>()
+const viewMode = ref<'grid' | 'table'>('grid')
+const previewFile = ref<MassMintFile | null>(null)
+
+const acceptedExtensions = '.bmp,.gif,.jpg,.jpeg,.png,.svg,.webp,.mp4,.ogv,.mov,.webm,.glb,.gltf,.flac,.mp3,.avif,.zip'
+
+function handleDragOver(e: DragEvent) {
+  e.preventDefault()
+  isDragOver.value = true
+}
+
+function handleDragLeave() {
+  isDragOver.value = false
+}
+
+function handleDrop(e: DragEvent) {
+  e.preventDefault()
+  isDragOver.value = false
+
+  const files = Array.from(e.dataTransfer?.files || [])
+  processFiles(files)
+}
+
+function handleFileInput(e: Event) {
+  const input = e.target as HTMLInputElement
+  const files = Array.from(input.files || [])
+  processFiles(files)
+  input.value = ''
+}
+
+async function processFiles(files: File[]) {
+  const zipFiles = files.filter(f => f.name.toLowerCase().endsWith('.zip'))
+  const regularFiles = files.filter(f => !f.name.toLowerCase().endsWith('.zip'))
+
+  if (regularFiles.length > 0) {
+    props.wizard.addFiles(regularFiles)
+  }
+
+  for (const zip of zipFiles) {
+    try {
+      const { unzip } = await import('unzipit')
+      const url = URL.createObjectURL(zip)
+      const { entries } = await unzip(url)
+      URL.revokeObjectURL(url)
+
+      const extractedFiles: File[] = []
+      for (const [name, entry] of Object.entries(entries)) {
+        if (entry.isDirectory || name.startsWith('__MACOSX'))
+          continue
+        const blob = await entry.blob()
+        extractedFiles.push(new File([blob], name.split('/').pop() || name, { type: blob.type }))
+      }
+
+      props.wizard.addFiles(extractedFiles)
+    }
+    catch {
+      errorMessage('Failed to extract ZIP file')
+    }
+  }
+}
+
+function openFileDialog() {
+  fileInputRef.value?.click()
+}
+
+function handleRemove(id: string) {
+  props.wizard.removeFile(id)
+}
+
+function handleDragEnd() {
+  props.wizard.uploadedFiles.value.forEach((f, i) => {
+    f.order = i
+  })
+}
+
+function openPreview(file: MassMintFile) {
+  previewFile.value = file
+}
+</script>
+
+<template>
+  <div class="max-w-4xl mx-auto p-6 space-y-6">
+    <!-- Drop zone -->
+    <div
+      class="relative border-2 border-dashed rounded-xl p-12 text-center transition-all duration-200 cursor-pointer"
+      :class="{
+        'border-primary bg-primary/5': isDragOver,
+        'border-border hover:border-primary/50': !isDragOver,
+      }"
+      @click="openFileDialog"
+      @dragover="handleDragOver"
+      @dragleave="handleDragLeave"
+      @drop="handleDrop"
+    >
+      <input
+        ref="fileInputRef"
+        type="file"
+        :accept="acceptedExtensions"
+        multiple
+        class="hidden"
+        @change="handleFileInput"
+      >
+
+      <div class="space-y-4">
+        <UIcon name="i-heroicons-arrow-up-tray" class="w-12 h-12 mx-auto text-muted-foreground" />
+        <div>
+          <p class="text-lg font-medium">
+            Drag & drop files here
+          </p>
+          <p class="text-sm text-muted-foreground mt-1">
+            or
+            <span class="text-primary underline">browse files</span>
+          </p>
+        </div>
+        <p class="text-xs text-muted-foreground font-mono">
+          Images, videos, audio, 3D models, or ZIP archives. Up to 200 files per batch.
+        </p>
+      </div>
+    </div>
+
+    <!-- File list -->
+    <div v-if="wizard.fileCount.value > 0" class="space-y-3">
+      <div class="flex items-center justify-between">
+        <p class="text-sm font-medium">
+          <span class="font-mono">{{ wizard.fileCount.value }}</span> file{{ wizard.fileCount.value !== 1 ? 's' : '' }} uploaded
+          <span v-if="viewMode === 'grid'" class="text-muted-foreground font-normal">— Drag to reorder</span>
+        </p>
+        <div class="flex items-center gap-2">
+          <!-- View toggle -->
+          <div class="flex items-center border border-border rounded-lg overflow-hidden">
+            <button
+              class="p-1.5 transition-colors"
+              :class="viewMode === 'grid' ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:text-foreground'"
+              @click="viewMode = 'grid'"
+            >
+              <UIcon name="i-heroicons-squares-2x2" class="w-4 h-4" />
+            </button>
+            <button
+              class="p-1.5 transition-colors"
+              :class="viewMode === 'table' ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:text-foreground'"
+              @click="viewMode = 'table'"
+            >
+              <UIcon name="i-heroicons-list-bullet" class="w-4 h-4" />
+            </button>
+          </div>
+          <UButton
+            variant="ghost"
+            size="sm"
+            color="error"
+            @click="wizard.clearFiles()"
+          >
+            Clear all
+          </UButton>
+        </div>
+      </div>
+
+      <!-- Grid view -->
+      <draggable
+        v-if="viewMode === 'grid'"
+        v-model="wizard.uploadedFiles.value"
+        item-key="id"
+        class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-3"
+        ghost-class="opacity-30"
+        @end="handleDragEnd"
+      >
+        <template #item="{ element }">
+          <div
+            class="relative group aspect-square rounded-lg overflow-hidden border border-border bg-muted cursor-grab active:cursor-grabbing"
+            @click.stop="openPreview(element)"
+          >
+            <img
+              v-if="element.file.type?.startsWith('image/')"
+              :src="element.thumbnailUrl"
+              :alt="element.file.name"
+              class="w-full h-full object-cover"
+            >
+            <div v-else class="w-full h-full flex items-center justify-center">
+              <UIcon
+                :name="element.file.type?.startsWith('video/') ? 'i-heroicons-film' : element.file.type?.startsWith('audio/') ? 'i-heroicons-musical-note' : 'i-heroicons-document'"
+                class="w-8 h-8 text-muted-foreground"
+              />
+            </div>
+
+            <!-- Filename tooltip -->
+            <div class="absolute bottom-0 left-0 right-0 bg-black/60 px-1.5 py-0.5">
+              <p class="text-white text-[10px] truncate font-mono">
+                {{ element.file.name }}
+              </p>
+            </div>
+
+            <!-- Remove button -->
+            <button
+              class="absolute top-1 right-1 w-5 h-5 rounded-full bg-black/60 text-white flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
+              @click.stop="handleRemove(element.id)"
+            >
+              <UIcon name="i-heroicons-x-mark" class="w-3 h-3" />
+            </button>
+
+            <!-- Order number -->
+            <div class="absolute top-1 left-1 w-5 h-5 rounded-full bg-black/60 text-white text-[10px] flex items-center justify-center font-mono">
+              {{ element.order + 1 }}
+            </div>
+          </div>
+        </template>
+      </draggable>
+
+      <!-- Table view -->
+      <div v-else class="border border-border rounded-lg overflow-hidden">
+        <table class="w-full text-sm">
+          <thead>
+            <tr class="bg-muted/50 border-b border-border">
+              <th class="text-left py-2 px-3 font-medium text-muted-foreground w-8">
+                #
+              </th>
+              <th class="text-left py-2 px-3 font-medium text-muted-foreground w-12" />
+              <th class="text-left py-2 px-3 font-medium text-muted-foreground">
+                Filename
+              </th>
+              <th class="text-left py-2 px-3 font-medium text-muted-foreground">
+                Type
+              </th>
+              <th class="text-left py-2 px-3 font-medium text-muted-foreground">
+                Size
+              </th>
+              <th class="text-right py-2 px-3 font-medium text-muted-foreground w-12" />
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="element in wizard.uploadedFiles.value"
+              :key="element.id"
+              class="border-b border-border/50 last:border-0 hover:bg-muted/30 cursor-pointer transition-colors"
+              @click="openPreview(element)"
+            >
+              <td class="py-2 px-3 font-mono text-xs text-muted-foreground">
+                {{ element.order + 1 }}
+              </td>
+              <td class="py-2 px-3">
+                <div class="w-8 h-8 rounded overflow-hidden bg-muted shrink-0">
+                  <img
+                    v-if="element.file.type?.startsWith('image/')"
+                    :src="element.thumbnailUrl"
+                    :alt="element.file.name"
+                    class="w-full h-full object-cover"
+                  >
+                  <div v-else class="w-full h-full flex items-center justify-center">
+                    <UIcon
+                      :name="element.file.type?.startsWith('video/') ? 'i-heroicons-film' : element.file.type?.startsWith('audio/') ? 'i-heroicons-musical-note' : 'i-heroicons-document'"
+                      class="w-4 h-4 text-muted-foreground"
+                    />
+                  </div>
+                </div>
+              </td>
+              <td class="py-2 px-3 font-mono text-xs truncate max-w-[200px]">
+                {{ element.file.name }}
+              </td>
+              <td class="py-2 px-3 text-xs text-muted-foreground">
+                {{ getFileTypeLabel(element.file.type || '') }}
+              </td>
+              <td class="py-2 px-3 font-mono text-xs text-muted-foreground">
+                {{ formatFileSize(element.file.size) }}
+              </td>
+              <td class="py-2 px-3 text-right">
+                <button
+                  class="text-muted-foreground hover:text-red-500 transition-colors"
+                  @click.stop="handleRemove(element.id)"
+                >
+                  <UIcon name="i-heroicons-trash" class="w-4 h-4" />
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <FilePreviewModal
+      :file="previewFile"
+      :files="wizard.uploadedFiles.value"
+      @close="previewFile = null"
+      @update:file="previewFile = $event"
+    />
+  </div>
+</template>
diff --git a/app/components/studio/ItemSlideOver.vue b/app/components/studio/ItemSlideOver.vue
new file mode 100644
index 00000000..0b2b0f23
--- /dev/null
+++ b/app/components/studio/ItemSlideOver.vue
@@ -0,0 +1,262 @@
+<script setup lang="ts">
+import type { AssetHubChain } from '~/plugins/sdk.client'
+
+const props = defineProps<{
+  itemId: string | null
+  chain: AssetHubChain
+  collectionId: string
+}>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+// Parse tokenId and collectionId from the composite itemId (format: "collectionId-tokenId")
+const parsedIds = computed(() => {
+  if (!props.itemId)
+    return null
+  const parts = props.itemId.split('-')
+  return {
+    collectionId: Number(parts[0]),
+    tokenId: Number(parts[1]),
+  }
+})
+
+// Mock item data based on tokenId
+const mockNames = [
+  'Nebula Drift',
+  'Solar Whisper',
+  'Quantum Bloom',
+  'Astral Echo',
+  'Cosmic Seed',
+  'Void Walker',
+  'Star Forge',
+  'Lunar Tide',
+  'Photon Veil',
+  'Dark Matter',
+  'Celestial Shard',
+  'Plasma Wave',
+]
+
+const itemData = computed(() => {
+  if (!parsedIds.value)
+    return null
+  const idx = parsedIds.value.tokenId - 1
+  return {
+    name: `${mockNames[idx] || 'Untitled'} #${parsedIds.value.tokenId}`,
+    description: 'A unique piece from the Cosmic Explorers collection.',
+    properties: [
+      { key: 'Background', value: 'Deep Space' },
+      { key: 'Pattern', value: 'Nebula' },
+    ],
+    isListed: idx % 3 === 0,
+    isVisible: true,
+  }
+})
+
+const editableDescription = ref('')
+const editableProperties = ref<{ key: string, value: string }[]>([])
+const isVisible = ref(true)
+
+watch(() => props.itemId, () => {
+  if (itemData.value) {
+    editableDescription.value = itemData.value.description
+    editableProperties.value = [...itemData.value.properties]
+    isVisible.value = itemData.value.isVisible
+  }
+}, { immediate: true })
+
+function addTrait() {
+  editableProperties.value.push({ key: '', value: '' })
+}
+
+function removeTrait(index: number) {
+  editableProperties.value.splice(index, 1)
+}
+
+function handleClose() {
+  emit('close')
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') {
+    emit('close')
+  }
+}
+
+const galleryLink = computed(() => {
+  if (!parsedIds.value)
+    return ''
+  return `/${props.chain}/gallery/${parsedIds.value.collectionId}-${parsedIds.value.tokenId}`
+})
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeydown)
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <!-- Overlay -->
+    <Transition
+      enter-active-class="transition-opacity duration-200"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition-opacity duration-200"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="itemId"
+        class="fixed inset-0 bg-black/50 z-[100]"
+        @click="handleClose"
+      />
+    </Transition>
+
+    <!-- Panel -->
+    <Transition
+      enter-active-class="transition-transform duration-300 ease-out"
+      enter-from-class="translate-x-full"
+      enter-to-class="translate-x-0"
+      leave-active-class="transition-transform duration-200 ease-in"
+      leave-from-class="translate-x-0"
+      leave-to-class="translate-x-full"
+    >
+      <aside
+        v-if="itemId && itemData"
+        class="fixed right-0 top-0 h-screen w-[340px] bg-background border-l border-border shadow-2xl overflow-y-auto z-[101]"
+        @click.stop
+      >
+        <!-- Header -->
+        <div class="flex items-center justify-between p-4 border-b border-border">
+          <h3 class="font-semibold text-sm truncate">
+            {{ itemData.name }}
+          </h3>
+          <div class="flex items-center gap-1">
+            <UButton
+              variant="ghost"
+              size="xs"
+              icon="i-heroicons-arrow-top-right-on-square"
+              :to="galleryLink"
+              target="_blank"
+            />
+            <UButton
+              variant="ghost"
+              size="xs"
+              icon="i-heroicons-x-mark"
+              @click="handleClose"
+            />
+          </div>
+        </div>
+
+        <!-- Thumbnail -->
+        <div class="aspect-square bg-muted">
+          <div class="w-full h-full flex items-center justify-center">
+            <UIcon name="i-heroicons-photo" class="w-16 h-16 text-muted-foreground" />
+          </div>
+        </div>
+
+        <!-- Content -->
+        <div class="p-4 space-y-6">
+          <!-- Description -->
+          <div>
+            <label class="text-xs font-medium text-muted-foreground mb-1 block">Description</label>
+            <UTextarea
+              v-model="editableDescription"
+              placeholder="Add a description..."
+              :rows="3"
+            />
+          </div>
+
+          <!-- Properties / Traits -->
+          <div>
+            <div class="flex items-center justify-between mb-2">
+              <label class="text-xs font-medium text-muted-foreground">Properties</label>
+              <UButton
+                variant="ghost"
+                size="xs"
+                icon="i-heroicons-plus"
+                @click="addTrait"
+              >
+                Add
+              </UButton>
+            </div>
+            <div class="space-y-2">
+              <div v-if="editableProperties.length > 0" class="flex items-center gap-2 px-1">
+                <span class="flex-1 text-xs text-muted-foreground">Trait</span>
+                <span class="flex-1 text-xs text-muted-foreground">Value</span>
+                <span class="w-7" />
+              </div>
+              <div
+                v-for="(prop, i) in editableProperties"
+                :key="i"
+                class="flex items-center gap-2"
+              >
+                <UInput
+                  v-model="prop.key"
+                  placeholder="Trait"
+                  size="sm"
+                  class="flex-1"
+                />
+                <UInput
+                  v-model="prop.value"
+                  placeholder="Value"
+                  size="sm"
+                  class="flex-1"
+                />
+                <UButton
+                  variant="ghost"
+                  size="xs"
+                  icon="i-heroicons-trash"
+                  class="text-muted-foreground"
+                  @click="removeTrait(i)"
+                />
+              </div>
+              <p v-if="editableProperties.length === 0" class="text-xs text-muted-foreground">
+                No properties yet.
+              </p>
+            </div>
+          </div>
+
+          <!-- Visibility -->
+          <div class="flex items-center justify-between">
+            <div>
+              <label class="text-sm font-medium block">Visibility</label>
+              <p class="text-xs text-muted-foreground">
+                {{ isVisible ? 'Visible to everyone' : 'Hidden from public view' }}
+              </p>
+            </div>
+            <USwitch v-model="isVisible" />
+          </div>
+
+          <!-- Status -->
+          <div class="flex items-center justify-between">
+            <span class="text-sm font-medium">Status</span>
+            <UBadge
+              :label="itemData.isListed ? 'Listed' : 'Unlisted'"
+              :color="itemData.isListed ? 'success' : 'neutral'"
+              variant="subtle"
+              size="sm"
+            />
+          </div>
+
+          <!-- Delete Item -->
+          <div class="pt-4 border-t border-border">
+            <UButton
+              variant="outline"
+              color="error"
+              class="w-full"
+              icon="i-heroicons-trash"
+            >
+              Delete Item
+            </UButton>
+          </div>
+        </div>
+      </aside>
+    </Transition>
+  </Teleport>
+</template>
diff --git a/app/components/studio/StudioActionBar.vue b/app/components/studio/StudioActionBar.vue
new file mode 100644
index 00000000..0554ea02
--- /dev/null
+++ b/app/components/studio/StudioActionBar.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+defineProps<{
+  selectedCount: number
+}>()
+
+const emit = defineEmits<{
+  clear: []
+  airdrop: []
+  list: []
+  transfer: []
+}>()
+</script>
+
+<template>
+  <Transition
+    enter-active-class="transition-all duration-300 ease-out"
+    enter-from-class="translate-y-full opacity-0"
+    enter-to-class="translate-y-0 opacity-100"
+    leave-active-class="transition-all duration-200 ease-in"
+    leave-from-class="translate-y-0 opacity-100"
+    leave-to-class="translate-y-full opacity-0"
+  >
+    <div
+      v-if="selectedCount > 0"
+      class="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 bg-background border border-border rounded-2xl shadow-2xl px-6 py-3 flex items-center gap-4"
+    >
+      <span class="text-sm font-medium whitespace-nowrap">
+        {{ selectedCount }} selected
+      </span>
+
+      <USeparator orientation="vertical" class="h-6" />
+
+      <!-- Transactional actions -->
+      <div class="flex items-center gap-2">
+        <UButton
+          size="sm"
+          variant="outline"
+          icon="i-heroicons-paper-airplane"
+          @click="emit('airdrop')"
+        >
+          Airdrop
+        </UButton>
+        <UButton
+          size="sm"
+          variant="outline"
+          icon="i-heroicons-tag"
+          @click="emit('list')"
+        >
+          List
+        </UButton>
+        <UButton
+          size="sm"
+          variant="outline"
+          icon="i-heroicons-arrow-right-circle"
+          @click="emit('transfer')"
+        >
+          Transfer
+        </UButton>
+      </div>
+
+      <USeparator orientation="vertical" class="h-6" />
+
+      <UButton
+        size="sm"
+        variant="ghost"
+        icon="i-heroicons-x-mark"
+        @click="emit('clear')"
+      >
+        Clear
+      </UButton>
+    </div>
+  </Transition>
+</template>
diff --git a/app/components/studio/StudioEmptyState.vue b/app/components/studio/StudioEmptyState.vue
new file mode 100644
index 00000000..6a9fdb6f
--- /dev/null
+++ b/app/components/studio/StudioEmptyState.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineProps<{
+  massMintLink: string
+}>()
+</script>
+
+<template>
+  <div class="text-center py-20">
+    <UIcon name="i-heroicons-rectangle-stack" class="w-16 h-16 mx-auto text-muted-foreground mb-4" />
+    <h2 class="text-xl font-semibold mb-2">
+      Your collection is empty
+    </h2>
+    <p class="text-muted-foreground mb-6">
+      Start by minting your first NFTs into this collection.
+    </p>
+    <UButton
+      size="lg"
+      icon="i-heroicons-sparkles"
+      :to="massMintLink"
+    >
+      Mass Mint
+    </UButton>
+  </div>
+</template>
diff --git a/app/components/studio/StudioKeyboardOverlay.vue b/app/components/studio/StudioKeyboardOverlay.vue
new file mode 100644
index 00000000..0a50c88d
--- /dev/null
+++ b/app/components/studio/StudioKeyboardOverlay.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+defineProps<{
+  open: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const isMac = ref(true)
+
+onMounted(() => {
+  isMac.value = navigator.platform.toUpperCase().includes('MAC')
+})
+
+const mod = computed(() => isMac.value ? '⌘' : 'Ctrl')
+
+const shortcuts = computed(() => [
+  { keys: `${mod.value}+S`, label: 'Save changes' },
+  { keys: `${mod.value}+A`, label: 'Select all items' },
+  { keys: `${mod.value}+Enter`, label: 'Proceed / Continue' },
+  { keys: 'Escape', label: 'Close panel / Go back' },
+  { keys: '?', label: 'Show this overlay' },
+])
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-opacity duration-200"
+      enter-from-class="opacity-0"
+      leave-active-class="transition-opacity duration-150"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="open"
+        class="fixed inset-0 z-[100] bg-black/60 flex items-center justify-center"
+        @click="emit('close')"
+      >
+        <div
+          class="bg-background rounded-2xl shadow-2xl border border-border w-[380px] max-w-[90vw]"
+          @click.stop
+        >
+          <div class="flex items-center justify-between p-4 border-b border-border">
+            <h3 class="font-semibold text-sm">
+              Keyboard Shortcuts
+            </h3>
+            <UButton
+              variant="ghost"
+              size="xs"
+              icon="i-heroicons-x-mark"
+              @click="emit('close')"
+            />
+          </div>
+
+          <div class="p-4 space-y-3">
+            <div
+              v-for="shortcut in shortcuts"
+              :key="shortcut.keys"
+              class="flex items-center justify-between"
+            >
+              <span class="text-sm text-muted-foreground">{{ shortcut.label }}</span>
+              <kbd class="px-2 py-1 bg-muted rounded text-xs font-mono font-medium">
+                {{ shortcut.keys }}
+              </kbd>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
diff --git a/app/components/studio/StudioSidebar.vue b/app/components/studio/StudioSidebar.vue
new file mode 100644
index 00000000..32decb44
--- /dev/null
+++ b/app/components/studio/StudioSidebar.vue
@@ -0,0 +1,207 @@
+<script setup lang="ts">
+import type { StudioCollectionData } from '~/composables/studio/useStudioCollection'
+
+defineProps<{
+  collection: StudioCollectionData
+}>()
+
+const route = useRoute()
+const router = useRouter()
+const store = useBulkOperationsStore()
+
+const isCollapsed = ref(false)
+const showNavWarning = ref(false)
+let pendingNavTarget: string | null = null
+
+const queryString = computed(() => {
+  const q = new URLSearchParams(route.query as Record<string, string>).toString()
+  return q ? `?${q}` : ''
+})
+
+const navLinks = computed(() => [
+  {
+    label: 'Preview',
+    icon: 'i-heroicons-eye',
+    to: `/${route.params.chain}/studio/${route.params.collection_id}/preview${queryString.value}`,
+  },
+  {
+    label: 'Details',
+    icon: 'i-heroicons-cog-6-tooth',
+    to: `/${route.params.chain}/studio/${route.params.collection_id}/details${queryString.value}`,
+  },
+  {
+    label: 'Items',
+    icon: 'i-heroicons-squares-2x2',
+    to: `/${route.params.chain}/studio/${route.params.collection_id}${queryString.value}`,
+  },
+])
+
+const massMintLink = computed(() =>
+  `/${route.params.chain}/studio/${route.params.collection_id}/massmint${queryString.value}`,
+)
+
+const viewCollectionLink = computed(() =>
+  `/${route.params.chain}/collection/${route.params.collection_id}${queryString.value}`,
+)
+
+function isActive(to: string) {
+  const path = to.split('?')[0]!
+  const studioBase = `/${route.params.chain}/studio/${route.params.collection_id}`
+  // For Items (index), exact match only
+  if (path === studioBase) {
+    return route.path === path
+  }
+  return route.path.startsWith(path)
+}
+
+function handleNavClick(to: string) {
+  if (store.isActive) {
+    pendingNavTarget = to
+    showNavWarning.value = true
+    return
+  }
+  router.push(to)
+}
+
+function confirmNavWarning() {
+  showNavWarning.value = false
+  store.reset()
+  if (pendingNavTarget) {
+    router.push(pendingNavTarget)
+    pendingNavTarget = null
+  }
+}
+
+function cancelNavWarning() {
+  showNavWarning.value = false
+  pendingNavTarget = null
+}
+
+function handleDeleteCollection() {
+  // placeholder
+}
+
+// Responsive collapse
+function updateCollapsed() {
+  isCollapsed.value = window.innerWidth < 1024
+}
+
+onMounted(() => {
+  updateCollapsed()
+  window.addEventListener('resize', updateCollapsed)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateCollapsed)
+})
+</script>
+
+<template>
+  <aside
+    class="h-full sticky top-0 flex flex-col border-r border-border bg-muted/30 shrink-0 transition-[width] duration-200"
+    :class="isCollapsed ? 'w-16' : 'w-56'"
+  >
+    <!-- Collection Identity -->
+    <div class="p-3 border-b border-border">
+      <div class="flex items-center gap-3" :class="{ 'justify-center': isCollapsed }">
+        <div class="w-10 h-10 rounded-lg overflow-hidden bg-muted shrink-0">
+          <img
+            v-if="collection.image"
+            :src="sanitizeIpfsUrl(collection.image)"
+            :alt="collection.name"
+            class="w-full h-full object-cover"
+          >
+          <div v-else class="w-full h-full flex items-center justify-center">
+            <UIcon name="i-heroicons-photo" class="w-5 h-5 text-muted-foreground" />
+          </div>
+        </div>
+        <div v-if="!isCollapsed" class="flex-1 min-w-0">
+          <h3 class="font-semibold text-sm truncate">
+            {{ collection.name }}
+          </h3>
+          <div class="flex items-center gap-2 text-xs text-muted-foreground">
+            <span class="font-mono">{{ collection.claimed }} items</span>
+            <UBadge :label="collection.chain" size="xs" variant="subtle" class="font-mono" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Nav Links -->
+    <nav class="flex-1 p-2 space-y-1">
+      <button
+        v-for="link in navLinks"
+        :key="link.to"
+        class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors"
+        :class="[
+          isActive(link.to)
+            ? 'bg-primary/10 text-primary'
+            : 'text-muted-foreground hover:bg-muted hover:text-foreground',
+          isCollapsed ? 'justify-center' : '',
+        ]"
+        @click="handleNavClick(link.to)"
+      >
+        <UIcon :name="link.icon" class="w-5 h-5 shrink-0" />
+        <span v-if="!isCollapsed">{{ link.label }}</span>
+      </button>
+
+      <!-- Mass Mint Button -->
+      <div class="pt-2">
+        <UButton
+          icon="i-heroicons-sparkles"
+          color="primary"
+          :class="isCollapsed ? 'w-full justify-center' : 'w-full'"
+          @click="handleNavClick(massMintLink)"
+        >
+          <span v-if="!isCollapsed">Mass Mint</span>
+        </UButton>
+      </div>
+    </nav>
+
+    <!-- Bottom Actions -->
+    <div class="p-2 border-t border-border space-y-1">
+      <!-- View Collection -->
+      <a
+        :href="viewCollectionLink"
+        target="_blank"
+        class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+        :class="isCollapsed ? 'justify-center' : ''"
+      >
+        <UIcon name="i-heroicons-arrow-top-right-on-square" class="w-5 h-5 shrink-0" />
+        <span v-if="!isCollapsed">View Collection</span>
+      </a>
+
+      <!-- Delete Collection -->
+      <button
+        class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-red-500 hover:bg-red-500/10 transition-colors"
+        :class="isCollapsed ? 'justify-center' : ''"
+        @click="handleDeleteCollection"
+      >
+        <UIcon name="i-heroicons-trash" class="w-5 h-5 shrink-0" />
+        <span v-if="!isCollapsed">Delete Collection</span>
+      </button>
+    </div>
+  </aside>
+
+  <!-- Nav Warning Dialog -->
+  <UModal v-model:open="showNavWarning">
+    <template #content>
+      <div class="p-6 space-y-4">
+        <h3 class="text-lg font-semibold">
+          Leave current operation?
+        </h3>
+        <p class="text-muted-foreground">
+          You have an active operation in progress. Leaving will discard your progress.
+        </p>
+        <div class="flex justify-end gap-3">
+          <UButton variant="outline" @click="cancelNavWarning">
+            Stay
+          </UButton>
+          <UButton color="error" @click="confirmNavWarning">
+            Leave
+          </UButton>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>
diff --git a/app/composables/bulkOperations/useBulkOperationWizard.ts b/app/composables/bulkOperations/useBulkOperationWizard.ts
new file mode 100644
index 00000000..8fd717f7
--- /dev/null
+++ b/app/composables/bulkOperations/useBulkOperationWizard.ts
@@ -0,0 +1,71 @@
+import type { StepConfig } from '~/types/bulkOperations'
+
+interface WizardOptions {
+  steps: StepConfig[]
+  onComplete?: () => void
+}
+
+export function useBulkOperationWizard(options: WizardOptions) {
+  const store = useBulkOperationsStore()
+
+  const completedSteps = computed(() => {
+    const completed: number[] = []
+    for (let i = 0; i < store.currentStep; i++) {
+      completed.push(i)
+    }
+    return completed
+  })
+
+  const isFirstStep = computed(() => store.currentStep === 0)
+  const isLastStep = computed(() => store.currentStep === options.steps.length - 1)
+
+  function handleNext() {
+    if (isLastStep.value && options.onComplete) {
+      options.onComplete()
+    }
+    else {
+      store.nextStep()
+    }
+  }
+
+  function handleBack() {
+    store.prevStep()
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    const target = event.target as HTMLElement
+    const isEditableTarget = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT' || target.isContentEditable
+
+    if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+      if (isEditableTarget)
+        return
+      event.preventDefault()
+      if (store.canProceed) {
+        handleNext()
+      }
+    }
+    if (event.key === 'Escape') {
+      if (isEditableTarget)
+        return
+      event.preventDefault()
+      handleBack()
+    }
+  }
+
+  onMounted(() => {
+    window.addEventListener('keydown', handleKeydown)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('keydown', handleKeydown)
+  })
+
+  return {
+    store,
+    completedSteps,
+    isFirstStep,
+    isLastStep,
+    handleNext,
+    handleBack,
+  }
+}
diff --git a/app/composables/collection/useAdminSidebar.ts b/app/composables/collection/useAdminSidebar.ts
new file mode 100644
index 00000000..23551e3f
--- /dev/null
+++ b/app/composables/collection/useAdminSidebar.ts
@@ -0,0 +1,75 @@
+export function useAdminSidebar() {
+  const route = useRoute()
+
+  const isOpen = ref(route.query.admin === 'true')
+  const selectionMode = ref(false)
+  const selectedItemIds = ref<Set<string>>(new Set())
+  const selectedItemForDetail = ref<string | null>(null)
+
+  const sidebarView = computed<'default' | 'selection' | 'itemDetail'>(() => {
+    if (selectedItemForDetail.value)
+      return 'itemDetail'
+    if (selectionMode.value)
+      return 'selection'
+    return 'default'
+  })
+
+  const selectedCount = computed(() => selectedItemIds.value.size)
+
+  function toggleSelection(id: string) {
+    const newSet = new Set(selectedItemIds.value)
+    if (newSet.has(id)) {
+      newSet.delete(id)
+    }
+    else {
+      newSet.add(id)
+    }
+    selectedItemIds.value = newSet
+  }
+
+  function selectAll(ids: string[]) {
+    selectedItemIds.value = new Set(ids)
+  }
+
+  function clearSelection() {
+    selectedItemIds.value = new Set()
+  }
+
+  function closeItemDetail() {
+    selectedItemForDetail.value = null
+  }
+
+  function toggleSelectionMode() {
+    selectionMode.value = !selectionMode.value
+    if (!selectionMode.value) {
+      clearSelection()
+    }
+  }
+
+  function closeSidebar() {
+    isOpen.value = false
+    selectionMode.value = false
+    clearSelection()
+    closeItemDetail()
+  }
+
+  function openSidebar() {
+    isOpen.value = true
+  }
+
+  return {
+    isOpen,
+    selectionMode,
+    selectedItemIds,
+    selectedItemForDetail,
+    sidebarView,
+    selectedCount,
+    toggleSelection,
+    selectAll,
+    clearSelection,
+    closeItemDetail,
+    toggleSelectionMode,
+    closeSidebar,
+    openSidebar,
+  }
+}
diff --git a/app/composables/dashboard/useCreatorDashboard.ts b/app/composables/dashboard/useCreatorDashboard.ts
new file mode 100644
index 00000000..4f9ffdee
--- /dev/null
+++ b/app/composables/dashboard/useCreatorDashboard.ts
@@ -0,0 +1,97 @@
+import type { AssetHubChain } from '~/plugins/sdk.client'
+import type { OnchainCollection } from '~/services/oda'
+import { fetchOdaCollection } from '~/services/oda'
+import { isAssetHubChain } from '~/utils/chain'
+
+export interface DashboardCollection {
+  id: string
+  chain: AssetHubChain
+  metadata?: OnchainCollection['metadata']
+  supply?: string
+  claimed?: string
+  floor: number | null
+}
+
+export function useCreatorDashboard() {
+  const { accountId } = useAuth()
+  const { currentChain } = useChain()
+
+  const collections = ref<DashboardCollection[]>([])
+  const loading = ref(false)
+
+  const { data: collectionIds, isLoading: idsLoading } = useOwnedCollections(
+    computed(() => accountId.value || ''),
+  )
+
+  let requestId = 0
+
+  watch([collectionIds, currentChain], async ([ids, chain], _prev, onInvalidate) => {
+    if (!ids || ids.length === 0) {
+      collections.value = []
+      loading.value = false
+      return
+    }
+
+    const currentRequestId = ++requestId
+    let isCancelled = false
+
+    onInvalidate(() => {
+      isCancelled = true
+    })
+
+    loading.value = true
+
+    try {
+      // Only fetch for AssetHub chains (ahp, ahk, ahpas)
+      if (!isAssetHubChain(chain)) {
+        collections.value = []
+        loading.value = false
+        return
+      }
+
+      const results = await Promise.allSettled(
+        ids.map(id => fetchOdaCollection(chain, id)),
+      )
+
+      if (isCancelled || requestId !== currentRequestId) {
+        return
+      }
+
+      collections.value = results
+        .map((result, index) => {
+          if (result.status === 'fulfilled' && result.value) {
+            return {
+              id: ids[index]!,
+              chain,
+              metadata: result.value.metadata,
+              supply: result.value.supply,
+              claimed: result.value.claimed,
+              floor: result.value.floor ?? null,
+            } as DashboardCollection
+          }
+          return null
+        })
+        .filter((c): c is DashboardCollection => c !== null)
+    }
+    catch {
+      if (isCancelled || requestId !== currentRequestId) {
+        return
+      }
+      collections.value = []
+    }
+    finally {
+      if (!isCancelled && requestId === currentRequestId) {
+        loading.value = false
+      }
+    }
+  }, { immediate: true })
+
+  const isLoading = computed(() => idsLoading.value || loading.value)
+  const hasCollections = computed(() => collections.value.length > 0)
+
+  return {
+    collections,
+    isLoading,
+    hasCollections,
+  }
+}
diff --git a/app/composables/massmint/useMassMint.ts b/app/composables/massmint/useMassMint.ts
index 48099733..d54c3902 100644
--- a/app/composables/massmint/useMassMint.ts
+++ b/app/composables/massmint/useMassMint.ts
@@ -38,7 +38,7 @@ export function useMassMint() {
     return progress.value.total > 0 && progress.value.stage !== 'complete' && progress.value.stage !== 'error'
   })
 
-  async function prepareNftMetadata(nfts: NFTToMint[]) {
+  async function prepareNftMetadata(nfts: NFTToMint[], onFileProgress?: (index: number, total: number) => void) {
     error.value = null
     progress.value = {
       total: nfts.length,
@@ -69,6 +69,7 @@ export function useMassMint() {
         })
 
       progress.value.current = index + 1
+      onFileProgress?.(index + 1, nfts.length)
 
       return {
         metadataUri: `ipfs://${metadataCid}`,
diff --git a/app/composables/massmint/useMassMintForm.ts b/app/composables/massmint/useMassMintForm.ts
index f255660e..b66be05d 100644
--- a/app/composables/massmint/useMassMintForm.ts
+++ b/app/composables/massmint/useMassMintForm.ts
@@ -2,26 +2,29 @@ import type { AssetHubChain } from '~/plugins/sdk.client'
 
 import { useNftPallets } from '~/composables/onchain/useNftPallets'
 
-export function useMassMintForm() {
+export function useMassMintForm(options?: { collectionId?: string, chain?: AssetHubChain }) {
   const { userCollection } = useNftPallets()
 
   // Wallet connection check
   const { getConnectedSubAccount } = storeToRefs(useWalletStore())
   const isWalletConnected = computed(() => Boolean(getConnectedSubAccount.value?.address))
 
-  // Form state
+  // Form state — pre-fill from route context if provided
   const state = reactive({
-    collection: '',
-    blockchain: 'ahp' as AssetHubChain, // Default to Asset Hub Polkadot
+    collection: options?.collectionId ?? '',
+    blockchain: options?.chain ?? ('ahp' as AssetHubChain),
   })
 
+  // If collection context is provided, skip fetching
+  const hasCollectionContext = Boolean(options?.collectionId && options?.chain)
+
   // Fetch user collections dynamically
   const collections = ref<Array<{ label: string, value: string, name: string, description: string, image: string }>>([])
   const collectionsLoading = ref(false)
 
   // Fetch collections and user balance on component mount
   watchEffect(async () => {
-    if (!isWalletConnected.value)
+    if (hasCollectionContext || !isWalletConnected.value)
       return
 
     collectionsLoading.value = true
diff --git a/app/composables/massmint/useMassMintWizard.ts b/app/composables/massmint/useMassMintWizard.ts
new file mode 100644
index 00000000..f814da1a
--- /dev/null
+++ b/app/composables/massmint/useMassMintWizard.ts
@@ -0,0 +1,139 @@
+import type { MassMintFile } from '~/components/massmint/types'
+import { validFormats } from '~/composables/massmint/useZipValidator'
+import { MetadataPath } from '~/types/bulkOperations'
+
+const MAX_FILES = 200
+const MAX_FILE_SIZE_MB = 512
+
+export function useMassMintWizard() {
+  const uploadedFiles = ref<MassMintFile[]>([])
+  const metadataPath = ref<MetadataPath>(MetadataPath.TEMPLATE)
+  const uniformName = ref('')
+  const startingNumber = ref(1)
+  const sharedDescription = ref('')
+  const templateUploaded = ref(false)
+  const templateDownloaded = ref(false)
+  const templateFileName = ref('')
+  const templateFileSize = ref(0)
+
+  const fileCount = computed(() => uploadedFiles.value.length)
+
+  const canProceedFromUpload = computed(() => uploadedFiles.value.length > 0)
+
+  const canProceedFromMetadata = computed(() => {
+    if (metadataPath.value === MetadataPath.UNIFORM) {
+      return uniformName.value.trim().length > 0
+    }
+    return templateUploaded.value && uploadedFiles.value.every(f => f.name && f.name.trim().length > 0)
+  })
+
+  function generateFileId(): string {
+    return Math.random().toString(36).slice(2, 10)
+  }
+
+  function isValidFormat(fileName: string): boolean {
+    const ext = fileName.split('.').pop()?.toLowerCase() ?? ''
+    return validFormats.includes(ext)
+  }
+
+  function addFiles(files: File[]) {
+    const remaining = MAX_FILES - uploadedFiles.value.length
+    const filesToAdd = files.slice(0, remaining)
+
+    for (const file of filesToAdd) {
+      if (!isValidFormat(file.name)) {
+        warningMessage(`Skipped ${file.name} — unsupported format`)
+        continue
+      }
+
+      const sizeMb = file.size / (1024 * 1024)
+      if (sizeMb > MAX_FILE_SIZE_MB) {
+        warningMessage(`Skipped ${file.name} — exceeds ${MAX_FILE_SIZE_MB}MB limit`)
+        continue
+      }
+
+      const thumbnailUrl = URL.createObjectURL(file)
+      uploadedFiles.value.push({
+        id: generateFileId(),
+        file,
+        thumbnailUrl,
+        order: uploadedFiles.value.length,
+        uploadStatus: 'local',
+        name: file.name.replace(/\.[^.]+$/, ''),
+      })
+    }
+
+    if (files.length > remaining) {
+      warningMessage(`Only ${remaining} more files can be added (max ${MAX_FILES})`)
+    }
+  }
+
+  function removeFile(id: string) {
+    const index = uploadedFiles.value.findIndex(f => f.id === id)
+    if (index !== -1) {
+      const file = uploadedFiles.value[index]!
+      URL.revokeObjectURL(file.thumbnailUrl)
+      uploadedFiles.value.splice(index, 1)
+      // Re-order remaining files
+      uploadedFiles.value.forEach((f, i) => {
+        f.order = i
+      })
+    }
+  }
+
+  function reorderFiles(oldIndex: number, newIndex: number) {
+    const item = uploadedFiles.value.splice(oldIndex, 1)[0]!
+    uploadedFiles.value.splice(newIndex, 0, item)
+    uploadedFiles.value.forEach((f, i) => {
+      f.order = i
+    })
+  }
+
+  function clearFiles() {
+    uploadedFiles.value.forEach(f => URL.revokeObjectURL(f.thumbnailUrl))
+    uploadedFiles.value = []
+  }
+
+  function applyUniformNames() {
+    uploadedFiles.value.forEach((file, index) => {
+      file.name = `${uniformName.value} #${startingNumber.value + index}`
+      if (sharedDescription.value) {
+        file.description = sharedDescription.value
+      }
+    })
+  }
+
+  function applySharedDescription() {
+    const trimmed = sharedDescription.value.trim()
+    uploadedFiles.value.forEach((file) => {
+      if (trimmed && !file.description?.trim()) {
+        file.description = trimmed
+      }
+    })
+  }
+
+  onUnmounted(() => {
+    uploadedFiles.value.forEach(f => URL.revokeObjectURL(f.thumbnailUrl))
+  })
+
+  return {
+    uploadedFiles,
+    metadataPath,
+    uniformName,
+    startingNumber,
+    sharedDescription,
+    templateUploaded,
+    templateDownloaded,
+    templateFileName,
+    templateFileSize,
+    fileCount,
+    canProceedFromUpload,
+    canProceedFromMetadata,
+    addFiles,
+    removeFile,
+    reorderFiles,
+    clearFiles,
+    applyUniformNames,
+    applySharedDescription,
+  }
+}
diff --git a/app/composables/massmint/useTemplateGenerator.ts b/app/composables/massmint/useTemplateGenerator.ts
new file mode 100644
index 00000000..b51a2919
--- /dev/null
+++ b/app/composables/massmint/useTemplateGenerator.ts
@@ -0,0 +1,67 @@
+import type { MassMintFile } from '~/components/massmint/types'
+
+export function useTemplateGenerator() {
+  /**
+   * Escapes a CSV field value according to RFC 4180 and prevents CSV injection
+   * - Doubles internal quotes
+   * - Wraps result in quotes
+   * - Prevents formula injection by prefixing dangerous characters with single quote
+   */
+  function escapeCsvField(value: string): string {
+    if (!value)
+      return '""'
+
+    let escaped = value
+    // Prevent CSV formula injection by prefixing values starting with =, +, -, or @
+    if (/^[=+\-@]/.test(escaped)) {
+      escaped = `'${escaped}`
+    }
+    // Escape double quotes by doubling them
+    escaped = escaped.replace(/"/g, '""')
+    // Always wrap in quotes
+    return `"${escaped}"`
+  }
+
+  function generateCsvTemplate(files: MassMintFile[]): string {
+    const header = 'filename,name,description,price'
+    const rows = files.map(f =>
+      [
+        escapeCsvField(f.file.name),
+        escapeCsvField(f.name || ''),
+        escapeCsvField(f.description || ''),
+        escapeCsvField(''),
+      ].join(','),
+    )
+    return [header, ...rows].join('\n')
+  }
+
+  function downloadCsvTemplate(files: MassMintFile[], collectionName?: string) {
+    const csv = generateCsvTemplate(files)
+    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
+    const url = URL.createObjectURL(blob)
+
+    // Sanitize filename: remove invalid filesystem characters
+    let sanitizedName = collectionName || ''
+    // biome-ignore lint/suspicious/noControlCharactersInRegex: need to strip control chars from filenames
+    // eslint-disable-next-line no-control-regex
+    sanitizedName = sanitizedName.replace(/[/\\?%*:|"<>\x00-\x1F]/g, '')
+    if (!sanitizedName.trim()) {
+      sanitizedName = 'massmint'
+    }
+
+    const link = document.createElement('a')
+    link.href = url
+    link.download = `${sanitizedName}_massmint_template.csv`
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+
+    // Defer URL revocation to ensure download completes
+    setTimeout(() => URL.revokeObjectURL(url), 500)
+  }
+
+  return {
+    generateCsvTemplate,
+    downloadCsvTemplate,
+  }
+}
diff --git a/app/composables/studio/useItemSlideOver.ts b/app/composables/studio/useItemSlideOver.ts
new file mode 100644
index 00000000..ff5fda48
--- /dev/null
+++ b/app/composables/studio/useItemSlideOver.ts
@@ -0,0 +1,20 @@
+export function useItemSlideOver() {
+  const currentItemId = ref<string | null>(null)
+
+  const isOpen = computed(() => currentItemId.value !== null)
+
+  function openItem(id: string) {
+    currentItemId.value = id
+  }
+
+  function closeItem() {
+    currentItemId.value = null
+  }
+
+  return {
+    currentItemId,
+    isOpen,
+    openItem,
+    closeItem,
+  }
+}
diff --git a/app/composables/studio/useStudioCollection.ts b/app/composables/studio/useStudioCollection.ts
new file mode 100644
index 00000000..219c836d
--- /dev/null
+++ b/app/composables/studio/useStudioCollection.ts
@@ -0,0 +1,29 @@
+import type { ComputedRef, InjectionKey } from 'vue'
+import type { SupportedChain } from '~/plugins/sdk.client'
+
+export interface StudioCollectionData {
+  id: string
+  chain: SupportedChain
+  name: string
+  description: string
+  image: string
+  banner: string
+  owner: string
+  supply: string
+  claimed: string
+  floor: number | null
+}
+
+const STUDIO_COLLECTION_KEY: InjectionKey<ComputedRef<StudioCollectionData>> = Symbol('studio-collection')
+
+export function provideStudioCollection(data: ComputedRef<StudioCollectionData>) {
+  provide(STUDIO_COLLECTION_KEY, data)
+}
+
+export function useStudioCollection(): ComputedRef<StudioCollectionData> {
+  const data = inject(STUDIO_COLLECTION_KEY)
+  if (!data) {
+    throw new Error('useStudioCollection must be used within a studio page')
+  }
+  return data
+}
diff --git a/app/composables/studio/useStudioDetails.ts b/app/composables/studio/useStudioDetails.ts
new file mode 100644
index 00000000..14002f4d
--- /dev/null
+++ b/app/composables/studio/useStudioDetails.ts
@@ -0,0 +1,50 @@
+export function useStudioDetails(collection: ComputedRef<{ name: string, description: string, image: string, banner: string, owner: string }>) {
+  const description = ref(collection.value.description)
+  const logoFile = ref<File | null>(null)
+  const bannerFile = ref<File | null>(null)
+  const royaltyPercentage = ref(5)
+  const royaltyRecipient = ref(collection.value.owner)
+  const isPublished = ref(true)
+
+  // Team mock data
+  const collaborators = ref([
+    { address: collection.value.owner, role: 'Owner' },
+  ])
+  const inviteAddress = ref('')
+
+  const isDirty = computed(() => {
+    return description.value !== collection.value.description
+      || logoFile.value !== null
+      || bannerFile.value !== null
+  })
+
+  function save() {
+    // Placeholder — would trigger wallet signature for on-chain data
+  }
+
+  function addCollaborator() {
+    if (inviteAddress.value.trim()) {
+      collaborators.value.push({ address: inviteAddress.value.trim(), role: 'Collaborator' })
+      inviteAddress.value = ''
+    }
+  }
+
+  function removeCollaborator(index: number) {
+    collaborators.value.splice(index, 1)
+  }
+
+  return {
+    description,
+    logoFile,
+    bannerFile,
+    royaltyPercentage,
+    royaltyRecipient,
+    isPublished,
+    collaborators,
+    inviteAddress,
+    isDirty,
+    save,
+    addCollaborator,
+    removeCollaborator,
+  }
+}
diff --git a/app/composables/studio/useStudioItems.ts b/app/composables/studio/useStudioItems.ts
new file mode 100644
index 00000000..7558fa42
--- /dev/null
+++ b/app/composables/studio/useStudioItems.ts
@@ -0,0 +1,46 @@
+export function useStudioItems() {
+  const selectionMode = ref(false)
+  const selectedItemIds = ref<Set<string>>(new Set())
+  const searchQuery = ref('')
+  const sortBy = ref('newest')
+
+  const selectedCount = computed(() => selectedItemIds.value.size)
+
+  function toggleSelection(id: string) {
+    const newSet = new Set(selectedItemIds.value)
+    if (newSet.has(id)) {
+      newSet.delete(id)
+    }
+    else {
+      newSet.add(id)
+    }
+    selectedItemIds.value = newSet
+  }
+
+  function selectAll(ids: string[]) {
+    selectedItemIds.value = new Set(ids)
+  }
+
+  function clearSelection() {
+    selectedItemIds.value = new Set()
+  }
+
+  function toggleSelectionMode() {
+    selectionMode.value = !selectionMode.value
+    if (!selectionMode.value) {
+      clearSelection()
+    }
+  }
+
+  return {
+    selectionMode,
+    selectedItemIds,
+    selectedCount,
+    searchQuery,
+    sortBy,
+    toggleSelection,
+    selectAll,
+    clearSelection,
+    toggleSelectionMode,
+  }
+}
diff --git a/app/composables/studio/useStudioKeyboard.ts b/app/composables/studio/useStudioKeyboard.ts
new file mode 100644
index 00000000..27cf8133
--- /dev/null
+++ b/app/composables/studio/useStudioKeyboard.ts
@@ -0,0 +1,60 @@
+export function useStudioKeyboard(options?: {
+  onSave?: () => void
+  onSelectAll?: () => void
+  onEscape?: () => void
+}) {
+  const showOverlay = ref(false)
+
+  function handleKeydown(e: KeyboardEvent) {
+    const isMeta = e.metaKey || e.ctrlKey
+
+    // ? → show shortcut overlay
+    if (e.key === '?' && !isMeta) {
+      const tag = (e.target as HTMLElement)?.tagName
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || (e.target as HTMLElement)?.isContentEditable)
+        return
+      e.preventDefault()
+      showOverlay.value = !showOverlay.value
+      return
+    }
+
+    // Escape → close overlay or delegate
+    if (e.key === 'Escape') {
+      if (showOverlay.value) {
+        showOverlay.value = false
+        return
+      }
+      options?.onEscape?.()
+      return
+    }
+
+    // Cmd+S → save
+    if (isMeta && e.key === 's') {
+      e.preventDefault()
+      options?.onSave?.()
+      return
+    }
+
+    // Cmd+A → select all
+    if (isMeta && e.key === 'a') {
+      // Only intercept if not in an input/textarea
+      const tag = (e.target as HTMLElement)?.tagName
+      if (tag === 'INPUT' || tag === 'TEXTAREA')
+        return
+      e.preventDefault()
+      options?.onSelectAll?.()
+    }
+  }
+
+  onMounted(() => {
+    window.addEventListener('keydown', handleKeydown)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('keydown', handleKeydown)
+  })
+
+  return {
+    showOverlay,
+  }
+}
diff --git a/app/composables/studio/useStudioNavGuard.ts b/app/composables/studio/useStudioNavGuard.ts
new file mode 100644
index 00000000..7cbc75ca
--- /dev/null
+++ b/app/composables/studio/useStudioNavGuard.ts
@@ -0,0 +1,38 @@
+export function useStudioNavGuard() {
+  const store = useBulkOperationsStore()
+  const router = useRouter()
+  const showWarning = ref(false)
+  let pendingRoute: string | null = null
+
+  onBeforeRouteLeave((to, _from, next) => {
+    if (store.isActive) {
+      showWarning.value = true
+      pendingRoute = to.fullPath
+      next(false)
+    }
+    else {
+      next()
+    }
+  })
+
+  function confirmLeave() {
+    showWarning.value = false
+    store.reset()
+    if (pendingRoute) {
+      const route = pendingRoute
+      pendingRoute = null
+      router.push(route)
+    }
+  }
+
+  function cancelLeave() {
+    showWarning.value = false
+    pendingRoute = null
+  }
+
+  return {
+    showWarning,
+    confirmLeave,
+    cancelLeave,
+  }
+}
diff --git a/app/composables/useOwnedCollections.ts b/app/composables/useOwnedCollections.ts
index 522b8036..7e5f63f7 100644
--- a/app/composables/useOwnedCollections.ts
+++ b/app/composables/useOwnedCollections.ts
@@ -6,7 +6,7 @@ export function useOwnedCollections(address: MaybeRef<string>) {
   const { currentChain } = useChain()
 
   return useQuery({
-    queryKey: ['ownedCollections', address],
+    queryKey: ['ownedCollections', address, currentChain],
     queryFn: async () => {
       const { data } = await $apolloClient.query({
         query: collectionIdList,
diff --git a/app/layouts/no-footer.vue b/app/layouts/no-footer.vue
index f2aab3a1..5fa8e221 100644
--- a/app/layouts/no-footer.vue
+++ b/app/layouts/no-footer.vue
@@ -16,7 +16,7 @@ useHead({
   <div class="min-h-full flex flex-col overflow-hidden">
     <Navbar />
 
-    <main class="grow">
+    <main class="grow overflow-hidden">
       <slot />
     </main>
   </div>
diff --git a/app/layouts/studio.vue b/app/layouts/studio.vue
new file mode 100644
index 00000000..002fcc58
--- /dev/null
+++ b/app/layouts/studio.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="min-h-screen w-full bg-background flex">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.page-enter-active,
+.page-leave-active {
+  transition: opacity 150ms ease;
+}
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/app/pages/[chain]/collection/[collection_id].vue b/app/pages/[chain]/collection/[collection_id].vue
index c3afd221..d0b3e4a4 100644
--- a/app/pages/[chain]/collection/[collection_id].vue
+++ b/app/pages/[chain]/collection/[collection_id].vue
@@ -1,298 +1,14 @@
 <script setup lang="ts">
-import type { SelectedTrait } from '@/components/trait/types'
-import type { AssetHubChain } from '~/plugins/sdk.client'
-import { CHAINS } from '@kodadot1/static'
-import { TradeTypes } from '@/components/trade/types'
-import { useSortOptions } from '~/composables/useSortOptions'
-import { fetchOdaCollection } from '~/services/oda'
-import { getSubscanAccountUrl } from '~/utils/format/address'
-
-const route = useRoute()
-const router = useRouter()
-const { chain: chainPrefix, collection_id } = route.params
-const { isCurrentAccount, isLogIn } = useAuth()
-
-const tabsItems = ref([
-  {
-    label: 'Items',
-    name: 'Items',
-    slot: 'items',
-    value: 'items',
-  },
-  {
-    label: 'Offers',
-    name: 'Offers',
-    slot: 'offers',
-    value: 'offers',
-  },
-  {
-    label: 'Swaps',
-    name: 'Swaps',
-    slot: 'swaps',
-    value: 'swaps',
-  },
-  {
-    label: 'Traits',
-    name: 'Traits',
-    slot: 'traits',
-    value: 'traits',
-  },
-])
-
-const activeTab = computed({
-  get() {
-    return (route.query.tab as string) || 'items'
-  },
-  set(tab) {
-    router.replace({
-      query: { ...route.query, tab },
-    })
-  },
-})
-
-const chain = computed(() => chainPrefix as AssetHubChain)
-const { data } = await useLazyAsyncData(
-  `collection:${chain.value}:${collection_id}`,
-  async () => {
-    const [collection, drops] = await Promise.all([
-      fetchOdaCollection(chain.value, collection_id?.toString() ?? ''),
-      $fetch('/api/genart/list', { query: { collection: collection_id?.toString() ?? '' } }),
-    ])
-
-    return { collection, drops }
-  },
-)
-
-const collectionName = computed(() => data.value?.collection?.metadata?.name)
-const bannerUrl = computed(() => toOriginalContentUrl(sanitizeIpfsUrl(data.value?.collection?.metadata?.banner || data.value?.collection?.metadata?.image)))
-
-const { selectedSort, createQueryVariables } = useSortOptions()
-
-const filteredNftIds = ref<string[]>([])
-const selectedTraits = ref<SelectedTrait[]>([])
-
-const gridKey = computed(() => {
-  const serializedQuery = serializeQueryForKey(route.query, NFT_GRID_NON_FETCH_QUERY_KEYS)
-
-  return [
-    selectedSort.value,
-    filteredNftIds.value.join(','),
-    serializedQuery,
-  ].join('::')
-})
-
-const queryVariables = computed(() => {
-  const baseVariables = createQueryVariables([collection_id?.toString() ?? ''])
-
-  const searchFilters: Record<string, any>[] = []
-
-  if (selectedTraits.value.length > 0) {
-    searchFilters.push({ id_in: filteredNftIds.value })
-  }
-
-  const nftFilters = buildNftSearchFilters({ query: route.query })
-  searchFilters.push(...nftFilters)
-
-  if (searchFilters.length > 0) {
-    return {
-      ...baseVariables,
-      search: searchFilters,
-    }
-  }
-
-  return baseVariables
-})
-
-const isOwner = computed(() => {
-  const owner = data.value?.drops?.data[0]?.creator || data.value?.collection?.owner
-  return isLogIn.value && owner && isCurrentAccount(owner)
-})
-
-const overlay = useOverlay()
-const destroyCollectionModal = overlay.create(defineAsyncComponent(() => import('@/components/DestroyCollectionModal.vue')))
-
-function handleDestroyCollection() {
-  destroyCollectionModal.open({
-    collectionId: collection_id?.toString() ?? '',
-    collectionName: collectionName.value,
-    chain: chain.value,
-  })
-}
-
-function handleNftIdsUpdate(nftIds: string[]) {
-  filteredNftIds.value = nftIds
-}
-
-function handleSelectedTraitsUpdate(traits: SelectedTrait[]) {
-  selectedTraits.value = traits
-}
+import { isSupportedChain } from '~/utils/chain'
 
 definePageMeta({
   validate: async (route) => {
     const { chain } = route.params
-    return typeof chain === 'string' && chain in CHAINS
+    return typeof chain === 'string' && isSupportedChain(chain)
   },
 })
-
-useSeoMeta({
-  title: () => collectionName.value,
-  description: () => data.value?.collection?.metadata?.description?.slice(0, 150),
-})
-
-defineOgImageComponent('Frame', {
-  title: collectionName.value,
-  image: sanitizeIpfsUrl(data.value?.collection?.metadata?.image),
-  items: data.value?.collection?.supply,
-  claimed: data.value?.collection?.claimed,
-  network: chain.value,
-})
 </script>
 
 <template>
-  <UContainer class="px-4 md:px-6 pb-6">
-    <div>
-      <!-- Banner Section -->
-      <div class="relative w-full min-h-[340px] flex flex-col justify-end rounded-xl overflow-hidden">
-        <div
-          class="absolute inset-0 w-full h-full bg-muted"
-          :style="bannerUrl ? {
-            backgroundImage: `url('${bannerUrl}')`,
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
-          } : {}"
-        />
-
-        <div class="relative flex items-center px-8 py-8 z-10">
-          <div class="flex flex-col items-center">
-            <div class="w-36 h-36 rounded-xl overflow-hidden bg-linear-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 border-4 border-white dark:border-gray-900 shadow-xl">
-              <img
-                v-if="data?.collection?.metadata?.image"
-                :src="sanitizeIpfsUrl(data.collection.metadata.image)"
-                :alt="data.collection.metadata.name || 'Collection'"
-                class="w-full h-full object-cover"
-              >
-              <div
-                v-else
-                class="w-full h-full flex items-center justify-center"
-              >
-                <UIcon name="i-heroicons-photo" class="w-12 h-12 text-gray-400" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="w-full">
-        <div class="flex justify-between flex-col md:flex-row gap-12">
-          <div class="flex flex-col flex-1">
-            <div class="my-4">
-              <div class="flex items-center justify-between mb-2">
-                <div class="text-2xl font-bold">
-                  {{ data?.collection?.metadata?.name || `Collection #${collection_id}` }}
-                </div>
-                <UButton
-                  v-if="isOwner"
-                  color="error"
-                  variant="outline"
-                  icon="i-heroicons-trash"
-                  @click="handleDestroyCollection"
-                >
-                  Delete Collection
-                </UButton>
-              </div>
-              <div v-if="data?.drops?.data[0]?.creator || data?.collection?.owner" class="flex items-center gap-1 text-muted-foreground">
-                <UserInfo :avatar-size="26" :address="data?.drops?.data[0]?.creator || data?.collection?.owner" class="min-w-0" />
-                <UButton
-                  :to="getSubscanAccountUrl((data?.drops?.data[0]?.creator || data?.collection?.owner) ?? '', chain)"
-                  target="_blank"
-                  variant="outline"
-                >
-                  Subscan
-                </UButton>
-                <UButton
-                  v-if="data?.drops?.data[0]?.alias"
-                  :to="`/${chain}/drops/${data.drops.data[0].alias}`"
-                  icon="i-heroicons-sparkles"
-                  variant="outline"
-                >
-                  View Drop: {{ data?.collection?.metadata?.name }}
-                </UButton>
-              </div>
-            </div>
-
-            <!-- Description -->
-            <MarkdownPreview
-              v-if="data?.collection?.metadata?.description"
-              :source="data.collection.metadata.description"
-            />
-          </div>
-
-          <!-- Quick Stats -->
-          <div class="pt-4 w-auto md:w-60 space-y-3">
-            <div class="flex justify-between items-center">
-              <span class="text-sm text-gray-500 dark:text-gray-400">Minted</span>
-              <span class="font-medium text-gray-900 dark:text-white">{{ data?.collection?.claimed || 0 }} / {{ unlimited(data?.collection?.supply) ? '∞' : data?.collection?.supply || 0 }}</span>
-            </div>
-
-            <div class="flex justify-between items-center">
-              <span class="text-sm text-gray-500 dark:text-gray-400">Floor Price</span>
-              <span class="font-medium text-gray-900 dark:text-white">
-                <Money v-if="data?.collection?.floor" inline :value="data?.collection?.floor" />
-                <span v-else class="text-gray-400 dark:text-gray-500">–</span>
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <USeparator class="my-12" />
-
-      <UTabs v-model="activeTab" color="neutral" :items="tabsItems" class="w-full" :ui="{ root: 'gap-4' }">
-        <template #items>
-          <!-- Items Section -->
-          <ExploreFilters
-            class="mt-2"
-            :collection-id="collection_id?.toString() ?? ''"
-            @update:nft-ids="handleNftIdsUpdate"
-            @update:selected-traits="handleSelectedTraitsUpdate"
-          >
-            <div class="space-y-6">
-              <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
-                <div class="w-full md:w-auto flex items-center justify-start">
-                  <ExploreFilterToggleButton />
-                </div>
-
-                <div class="w-full md:w-auto flex items-center gap-2 md:ml-auto">
-                  <ArtViewFilter />
-                  <SortOptions
-                    v-model="selectedSort"
-                    class="w-full md:w-48"
-                  />
-                </div>
-              </div>
-
-              <!-- Items Grid -->
-              <LazyNftsGrid
-                :key="gridKey"
-                :variables="queryVariables"
-                grid-class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4 md:gap-6"
-                no-items-found-message="This collection doesn't have any items yet."
-                :prefix="chain"
-              />
-            </div>
-          </ExploreFilters>
-        </template>
-        <template #offers>
-          <CollectionTrades :trade-type="TradeTypes.Offer" />
-        </template>
-        <template #swaps>
-          <CollectionTrades :trade-type="TradeTypes.Swap" />
-        </template>
-        <template #traits>
-          <TraitOverview :collection-id="collection_id?.toString() ?? ''" :collection-name="collectionName" />
-        </template>
-      </UTabs>
-    </div>
-    <ScrollToTop />
-  </UContainer>
+  <NuxtPage />
 </template>
diff --git a/app/pages/[chain]/collection/[collection_id]/index.vue b/app/pages/[chain]/collection/[collection_id]/index.vue
new file mode 100644
index 00000000..9f3b8cad
--- /dev/null
+++ b/app/pages/[chain]/collection/[collection_id]/index.vue
@@ -0,0 +1,331 @@
+<script setup lang="ts">
+import type { SelectedTrait } from '@/components/trait/types'
+import type { AssetHubChain } from '~/plugins/sdk.client'
+import { TradeTypes } from '@/components/trade/types'
+import { useAdminSidebar } from '~/composables/collection/useAdminSidebar'
+import { useSortOptions } from '~/composables/useSortOptions'
+import { fetchOdaCollection } from '~/services/oda'
+import { getSubscanAccountUrl } from '~/utils/format/address'
+
+const route = useRoute()
+const router = useRouter()
+const { chain: chainPrefix, collection_id } = route.params
+const { isCurrentAccount, isLogIn } = useAuth()
+
+onMounted(() => {
+  if (route.query.admin === 'true') {
+    setPageLayout('no-footer')
+  }
+})
+
+const {
+  isOpen: sidebarOpen,
+  selectionMode,
+  selectedItemIds,
+  sidebarView,
+  selectedCount,
+  toggleSelection,
+  selectAll,
+  clearSelection,
+  toggleSelectionMode,
+  closeItemDetail,
+  closeSidebar: _closeSidebar,
+  openSidebar: _openSidebar,
+} = useAdminSidebar()
+
+const tabsItems = ref([
+  {
+    label: 'Items',
+    name: 'Items',
+    slot: 'items',
+    value: 'items',
+  },
+  {
+    label: 'Offers',
+    name: 'Offers',
+    slot: 'offers',
+    value: 'offers',
+  },
+  {
+    label: 'Swaps',
+    name: 'Swaps',
+    slot: 'swaps',
+    value: 'swaps',
+  },
+  {
+    label: 'Traits',
+    name: 'Traits',
+    slot: 'traits',
+    value: 'traits',
+  },
+])
+
+const activeTab = computed({
+  get() {
+    return (route.query.tab as string) || 'items'
+  },
+  set(tab) {
+    router.replace({
+      query: { ...route.query, tab },
+    })
+  },
+})
+
+const chain = computed(() => chainPrefix as AssetHubChain)
+const { data } = await useLazyAsyncData(
+  `collection:${chain.value}:${collection_id}`,
+  async () => {
+    const [collection, drops] = await Promise.all([
+      fetchOdaCollection(chain.value, collection_id?.toString() ?? ''),
+      $fetch('/api/genart/list', { query: { collection: collection_id?.toString() ?? '' } }),
+    ])
+
+    return { collection, drops }
+  },
+)
+
+const { selectedSort, createQueryVariables } = useSortOptions()
+
+const filteredNftIds = ref<string[]>([])
+const selectedTraits = ref<SelectedTrait[]>([])
+
+const gridKey = computed(() => {
+  const serializedQuery = serializeQueryForKey(route.query, NFT_GRID_NON_FETCH_QUERY_KEYS)
+
+  return [
+    selectedSort.value,
+    filteredNftIds.value.join(','),
+    serializedQuery,
+  ].join('::')
+})
+
+const queryVariables = computed(() => {
+  const baseVariables = createQueryVariables([collection_id?.toString() ?? ''])
+
+  const searchFilters: Record<string, any>[] = []
+
+  if (selectedTraits.value.length > 0) {
+    searchFilters.push({ id_in: filteredNftIds.value })
+  }
+
+  const nftFilters = buildNftSearchFilters({ query: route.query })
+  searchFilters.push(...nftFilters)
+
+  if (searchFilters.length > 0) {
+    return {
+      ...baseVariables,
+      search: searchFilters,
+    }
+  }
+
+  return baseVariables
+})
+
+const isMock = computed(() => route.query.mock === 'true')
+
+const collectionData = computed(() => data.value?.collection)
+
+const collectionName = computed(() => collectionData.value?.metadata?.name)
+const bannerUrl = computed(() => toOriginalContentUrl(sanitizeIpfsUrl(collectionData.value?.metadata?.banner || collectionData.value?.metadata?.image)))
+
+const isOwner = computed(() => {
+  const owner = data.value?.drops?.data[0]?.creator || data.value?.collection?.owner
+  return isLogIn.value && owner && isCurrentAccount(owner)
+})
+
+function handleNftIdsUpdate(nftIds: string[]) {
+  filteredNftIds.value = nftIds
+}
+
+function handleSelectedTraitsUpdate(traits: SelectedTrait[]) {
+  selectedTraits.value = traits
+}
+
+function navigateToPage(path: string) {
+  const mockQuery = isMock.value ? '?mock=true' : ''
+  router.push(`${path}${mockQuery}`)
+}
+
+useSeoMeta({
+  title: () => collectionName.value,
+  description: () => collectionData.value?.metadata?.description?.slice(0, 150),
+})
+
+defineOgImageComponent('Frame', {
+  title: collectionName.value,
+  image: sanitizeIpfsUrl(collectionData.value?.metadata?.image),
+  items: collectionData.value?.supply,
+  claimed: collectionData.value?.claimed,
+  network: chain.value,
+})
+</script>
+
+<template>
+  <UContainer class="px-4 md:px-6 pb-6">
+    <!-- Mock mode indicator -->
+    <div v-if="isMock" class="bg-amber-500/10 border border-amber-500/30 rounded-lg px-4 py-2 mb-4 flex items-center gap-2 text-sm text-amber-700 dark:text-amber-400">
+      <UIcon name="i-heroicons-beaker" class="w-4 h-4 shrink-0" />
+      <span>Mock mode — viewing with sample data. Admin sidebar and all features are enabled without a wallet.</span>
+    </div>
+
+    <div class="flex" :class="{ 'gap-6': sidebarOpen && isOwner }">
+      <AdminSidebar
+        v-if="isOwner"
+        v-model:open="sidebarOpen"
+        :collection-id="collection_id?.toString() ?? ''"
+        :chain="chain"
+        :collection-data="collectionData"
+        :is-owner="!!isOwner"
+        :sidebar-view="sidebarView"
+        :selected-count="selectedCount"
+        @toggle-selection="toggleSelectionMode"
+        @select-all="selectAll([])"
+        @clear-selection="clearSelection"
+        @close-item-detail="closeItemDetail"
+      />
+
+      <div class="flex-1 min-w-0">
+        <!-- Banner Section -->
+        <div class="relative w-full min-h-[340px] flex flex-col justify-end rounded-xl overflow-hidden">
+          <FloatingManageButton
+            v-if="isOwner && !sidebarOpen"
+            @click="navigateToPage(`/${chainPrefix}/studio/${collection_id}`)"
+          />
+          <div
+            class="absolute inset-0 w-full h-full bg-muted"
+            :style="bannerUrl ? {
+              backgroundImage: `url('${bannerUrl}')`,
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+            } : {}"
+          />
+
+          <div class="relative flex items-center px-8 py-8 z-10">
+            <div class="flex flex-col items-center">
+              <div class="w-36 h-36 rounded-xl overflow-hidden bg-linear-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 border-4 border-white dark:border-gray-900 shadow-xl">
+                <img
+                  v-if="collectionData?.metadata?.image"
+                  :src="sanitizeIpfsUrl(collectionData.metadata.image)"
+                  :alt="collectionData.metadata.name || 'Collection'"
+                  class="w-full h-full object-cover"
+                >
+                <div
+                  v-else
+                  class="w-full h-full flex items-center justify-center"
+                >
+                  <UIcon name="i-heroicons-photo" class="w-12 h-12 text-gray-400" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="w-full">
+          <div class="flex justify-between flex-col md:flex-row gap-12">
+            <div class="flex flex-col flex-1">
+              <div class="my-4">
+                <div class="flex items-center justify-between mb-2">
+                  <div class="text-2xl font-bold">
+                    {{ collectionData?.metadata?.name || `Collection #${collection_id}` }}
+                  </div>
+                </div>
+                <div v-if="data?.drops?.data[0]?.creator || collectionData?.owner" class="flex items-center gap-1 text-muted-foreground">
+                  <UserInfo :avatar-size="26" :address="data?.drops?.data[0]?.creator || collectionData?.owner" class="min-w-0" />
+                  <UButton
+                    :to="getSubscanAccountUrl((data?.drops?.data[0]?.creator || collectionData?.owner) ?? '', chain)"
+                    target="_blank"
+                    variant="outline"
+                  >
+                    Subscan
+                  </UButton>
+                  <UButton
+                    v-if="data?.drops?.data[0]?.alias"
+                    :to="`/${chain}/drops/${data.drops.data[0].alias}`"
+                    icon="i-heroicons-sparkles"
+                    variant="outline"
+                  >
+                    View Drop: {{ collectionData?.metadata?.name }}
+                  </UButton>
+                </div>
+              </div>
+
+              <!-- Description -->
+              <MarkdownPreview
+                v-if="collectionData?.metadata?.description"
+                :source="collectionData.metadata.description"
+              />
+            </div>
+
+            <!-- Quick Stats -->
+            <div class="pt-4 w-auto md:w-60 space-y-3">
+              <div class="flex justify-between items-center">
+                <span class="text-sm text-gray-500 dark:text-gray-400">Minted</span>
+                <span class="font-medium font-mono text-gray-900 dark:text-white">{{ collectionData?.claimed || 0 }} / {{ unlimited(collectionData?.supply) ? '∞' : collectionData?.supply || 0 }}</span>
+              </div>
+
+              <div class="flex justify-between items-center">
+                <span class="text-sm text-gray-500 dark:text-gray-400">Floor Price</span>
+                <span class="font-medium text-gray-900 dark:text-white">
+                  <Money v-if="collectionData?.floor" inline :value="collectionData?.floor" />
+                  <span v-else class="text-gray-400 dark:text-gray-500">–</span>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <USeparator class="my-12" />
+
+        <UTabs v-model="activeTab" color="neutral" :items="tabsItems" class="w-full" :ui="{ root: 'gap-4' }">
+          <template #items>
+            <!-- Items Section -->
+            <ExploreFilters
+              class="mt-2"
+              :collection-id="collection_id?.toString() ?? ''"
+              @update:nft-ids="handleNftIdsUpdate"
+              @update:selected-traits="handleSelectedTraitsUpdate"
+            >
+              <div class="space-y-6">
+                <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+                  <div class="w-full md:w-auto flex items-center justify-start">
+                    <ExploreFilterToggleButton />
+                  </div>
+
+                  <div class="w-full md:w-auto flex items-center gap-2 md:ml-auto">
+                    <ArtViewFilter />
+                    <SortOptions
+                      v-model="selectedSort"
+                      class="w-full md:w-48"
+                    />
+                  </div>
+                </div>
+
+                <!-- Real Items Grid -->
+                <LazyNftsGrid
+                  :key="gridKey"
+                  :variables="queryVariables"
+                  grid-class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4 md:gap-6"
+                  no-items-found-message="This collection doesn't have any items yet."
+                  :prefix="chain"
+                  :selection-mode="selectionMode"
+                  :selected-ids="selectedItemIds"
+                  @select="(tokenId: number, collectionId: number) => toggleSelection(`${collectionId}-${tokenId}`)"
+                />
+              </div>
+            </ExploreFilters>
+          </template>
+          <template #offers>
+            <CollectionTrades :trade-type="TradeTypes.Offer" />
+          </template>
+          <template #swaps>
+            <CollectionTrades :trade-type="TradeTypes.Swap" />
+          </template>
+          <template #traits>
+            <TraitOverview :collection-id="collection_id?.toString() ?? ''" :collection-name="collectionName" />
+          </template>
+        </UTabs>
+      </div>
+    </div>
+    <ScrollToTop />
+  </UContainer>
+</template>
diff --git a/app/pages/[chain]/studio/[collection_id].vue b/app/pages/[chain]/studio/[collection_id].vue
new file mode 100644
index 00000000..39503ed2
--- /dev/null
+++ b/app/pages/[chain]/studio/[collection_id].vue
@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import type { StudioCollectionData } from '~/composables/studio/useStudioCollection'
+import type { AssetHubChain } from '~/plugins/sdk.client'
+import { CHAINS } from '@kodadot1/static'
+import { provideStudioCollection } from '~/composables/studio/useStudioCollection'
+import { useStudioKeyboard } from '~/composables/studio/useStudioKeyboard'
+import { fetchOdaCollection } from '~/services/oda'
+
+definePageMeta({
+  layout: 'studio',
+  validate: async (route) => {
+    const { chain } = route.params
+    return typeof chain === 'string' && chain in CHAINS
+  },
+})
+
+const route = useRoute()
+const { chain: chainPrefix, collection_id } = route.params
+
+const chain = computed(() => chainPrefix as AssetHubChain)
+const collectionId = computed(() => collection_id?.toString() ?? '')
+const isMock = computed(() => route.query.mock === 'true')
+
+const { data } = await useLazyAsyncData(
+  `studio:${chain.value}:${collectionId.value}`,
+  () => fetchOdaCollection(chain.value, collectionId.value),
+)
+
+const mockCollectionData: Omit<StudioCollectionData, 'id' | 'chain'> = {
+  name: 'Cosmic Explorers',
+  description: 'A generative art collection exploring the boundaries of digital space. Each piece is a unique composition of cosmic patterns and ethereal forms.',
+  image: '',
+  banner: '',
+  owner: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
+  supply: '200',
+  claimed: '47',
+  floor: 1500000000,
+}
+
+const collectionData = computed<StudioCollectionData>(() => {
+  const fetched = data.value
+  if (isMock.value && !fetched?.metadata?.name) {
+    return {
+      id: collectionId.value,
+      chain: chain.value,
+      ...mockCollectionData,
+    }
+  }
+  return {
+    id: collectionId.value,
+    chain: chain.value,
+    name: fetched?.metadata?.name || `Collection #${collectionId.value}`,
+    description: fetched?.metadata?.description || '',
+    image: fetched?.metadata?.image || '',
+    banner: fetched?.metadata?.banner || fetched?.metadata?.image || '',
+    owner: fetched?.owner || '',
+    supply: fetched?.supply || '0',
+    claimed: fetched?.claimed || '0',
+    floor: fetched?.floor ?? null,
+  }
+})
+
+provideStudioCollection(collectionData)
+
+const { showOverlay } = useStudioKeyboard()
+
+const queryString = computed(() => {
+  const q = new URLSearchParams(route.query as Record<string, string>).toString()
+  return q ? `?${q}` : ''
+})
+
+const dashboardLink = computed(() =>
+  `/${chainPrefix}/studio${queryString.value}`,
+)
+
+const studioRoot = computed(() =>
+  `/${chainPrefix}/studio/${collection_id}${queryString.value}`,
+)
+
+const viewCollectionLink = computed(() =>
+  `/${chainPrefix}/collection/${collection_id}${queryString.value}`,
+)
+
+// Breadcrumb: detect current sub-page from route
+const subPageLabel = computed(() => {
+  const path = route.path
+  const base = `/${chainPrefix}/studio/${collection_id}`
+  const suffix = path.slice(base.length).replace(/^\//, '')
+  const labels: Record<string, string> = {
+    preview: 'Preview',
+    details: 'Details',
+    massmint: 'Mass Mint',
+    list: 'List',
+    transfer: 'Transfer',
+    airdrop: 'Airdrop',
+  }
+  return labels[suffix] || ''
+})
+
+const isOnSubPage = computed(() => !!subPageLabel.value)
+
+// Back button: one level up
+const backTarget = computed(() =>
+  isOnSubPage.value ? studioRoot.value : dashboardLink.value,
+)
+
+useSeoMeta({
+  title: () => `Studio — ${collectionData.value.name}`,
+})
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="flex flex-col h-screen w-full">
+      <!-- Top Bar -->
+      <header class="shrink-0 flex items-center justify-between px-5 py-3.5 border-b border-border bg-background">
+        <div class="flex items-center gap-3 min-w-0">
+          <NuxtLink
+            :to="backTarget"
+            class="flex items-center justify-center w-8 h-8 rounded-lg bg-muted/60 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+          >
+            <UIcon name="i-heroicons-chevron-left" class="w-5 h-5" />
+          </NuxtLink>
+          <nav class="flex items-center gap-1.5 text-sm min-w-0">
+            <NuxtLink :to="dashboardLink" class="text-muted-foreground hover:text-foreground transition-colors">
+              collections
+            </NuxtLink>
+            <span class="text-muted-foreground">/</span>
+            <NuxtLink
+              v-if="isOnSubPage"
+              :to="studioRoot"
+              class="text-muted-foreground hover:text-foreground transition-colors truncate"
+            >
+              {{ collectionData.name }}
+            </NuxtLink>
+            <span v-else class="font-semibold truncate">{{ collectionData.name }}</span>
+            <template v-if="isOnSubPage">
+              <span class="text-muted-foreground">/</span>
+              <span class="font-semibold truncate">{{ subPageLabel }}</span>
+            </template>
+          </nav>
+        </div>
+        <NuxtLink
+          :to="viewCollectionLink"
+          class="flex items-center justify-center px-3.5 py-1.5 rounded-lg bg-muted/60 text-sm text-muted-foreground hover:bg-muted hover:text-foreground transition-colors shrink-0"
+        >
+          Close
+        </NuxtLink>
+      </header>
+
+      <!-- Sidebar + Content -->
+      <div class="flex flex-1 min-h-0">
+        <StudioSidebar
+          :collection="collectionData"
+        />
+        <main class="flex-1 min-w-0 overflow-y-auto">
+          <NuxtPage />
+        </main>
+      </div>
+    </div>
+
+    <StudioKeyboardOverlay
+      :open="showOverlay"
+      @close="showOverlay = false"
+    />
+  </div>
+</template>
diff --git a/app/pages/[chain]/studio/[collection_id]/airdrop.client.vue b/app/pages/[chain]/studio/[collection_id]/airdrop.client.vue
new file mode 100644
index 00000000..5ef0560d
--- /dev/null
+++ b/app/pages/[chain]/studio/[collection_id]/airdrop.client.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { useStudioCollection } from '~/composables/studio/useStudioCollection'
+
+const route = useRoute()
+const collection = useStudioCollection()
+
+const backLink = computed(() =>
+  `/${route.params.chain}/studio/${route.params.collection_id}`,
+)
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center h-full py-24 px-6 text-center">
+    <div class="border border-dashed border-border rounded-xl p-10 max-w-md space-y-4">
+      <UIcon name="i-heroicons-paper-airplane" class="w-12 h-12 mx-auto text-muted-foreground" />
+      <h2 class="text-lg font-semibold">
+        Bulk Airdrop
+      </h2>
+      <p class="text-sm text-muted-foreground">
+        This feature is a work in progress. Bulk airdrop for <span class="font-medium text-foreground">{{ collection.name }}</span> will be available soon.
+      </p>
+      <UButton
+        variant="outline"
+        :to="backLink"
+      >
+        Back to Items
+      </UButton>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/[chain]/studio/[collection_id]/details.vue b/app/pages/[chain]/studio/[collection_id]/details.vue
new file mode 100644
index 00000000..ddc4efd7
--- /dev/null
+++ b/app/pages/[chain]/studio/[collection_id]/details.vue
@@ -0,0 +1,274 @@
+<script setup lang="ts">
+import { useStudioCollection } from '~/composables/studio/useStudioCollection'
+import { useStudioDetails } from '~/composables/studio/useStudioDetails'
+
+const collection = useStudioCollection()
+
+const {
+  description,
+  royaltyPercentage,
+  royaltyRecipient,
+  isPublished,
+  collaborators,
+  inviteAddress,
+  isDirty,
+  save,
+  addCollaborator,
+  removeCollaborator,
+} = useStudioDetails(collection)
+
+const router = useRouter()
+const showLeaveWarning = ref(false)
+let pendingRoute: string | null = null
+const allowLeave = ref(false)
+
+onBeforeRouteLeave((to, _from, next) => {
+  if (allowLeave.value) {
+    allowLeave.value = false
+    next()
+    return
+  }
+
+  if (isDirty.value) {
+    showLeaveWarning.value = true
+    pendingRoute = to.fullPath
+    next(false)
+  }
+  else {
+    next()
+  }
+})
+
+function confirmLeave() {
+  showLeaveWarning.value = false
+  if (pendingRoute) {
+    const route = pendingRoute
+    pendingRoute = null
+    allowLeave.value = true
+    router.push(route)
+  }
+}
+
+function cancelLeave() {
+  showLeaveWarning.value = false
+  pendingRoute = null
+}
+
+const descriptionLength = computed(() => description.value.length)
+</script>
+
+<template>
+  <div class="p-6 max-w-3xl">
+    <div class="flex items-center justify-between mb-8">
+      <h1 class="text-xl font-bold">
+        Collection Details
+      </h1>
+      <UButton
+        v-if="isDirty"
+        icon="i-heroicons-check"
+        @click="save"
+      >
+        Save Changes
+      </UButton>
+    </div>
+
+    <div class="space-y-10">
+      <!-- Section 1: Collection Info -->
+      <section class="space-y-6">
+        <h2 class="text-lg font-semibold border-b border-border pb-2">
+          Collection Info
+        </h2>
+
+        <!-- Name (read-only) -->
+        <div>
+          <label class="text-sm font-medium block mb-1">Name</label>
+          <UInput
+            :model-value="collection.name"
+            disabled
+            size="lg"
+            class="w-full"
+          />
+          <p class="text-xs text-muted-foreground mt-1">
+            Collection name is set at creation and cannot be changed.
+          </p>
+        </div>
+
+        <!-- Description -->
+        <div>
+          <div class="flex items-center justify-between mb-1">
+            <label class="text-sm font-medium">Description</label>
+            <span class="text-xs text-muted-foreground">{{ descriptionLength }} / 500</span>
+          </div>
+          <UTextarea
+            v-model="description"
+            placeholder="Describe your collection..."
+            :rows="4"
+            :maxlength="500"
+            class="w-full"
+          />
+          <p class="text-xs text-muted-foreground mt-1 flex items-center gap-1">
+            <UIcon name="i-simple-icons-markdown" class="w-4 h-4" />
+            Supports markdown formatting.
+          </p>
+        </div>
+
+        <!-- Logo Upload -->
+        <div>
+          <label class="text-sm font-medium block mb-2">Logo</label>
+          <div class="flex items-center gap-4">
+            <div class="w-20 h-20 rounded-xl overflow-hidden bg-muted border border-border flex items-center justify-center">
+              <img
+                v-if="collection.image"
+                :src="sanitizeIpfsUrl(collection.image)"
+                :alt="collection.name"
+                class="w-full h-full object-cover"
+              >
+              <UIcon v-else name="i-heroicons-photo" class="w-8 h-8 text-muted-foreground" />
+            </div>
+            <UButton variant="outline" size="sm" icon="i-heroicons-arrow-up-tray">
+              Upload Logo
+            </UButton>
+          </div>
+        </div>
+
+        <!-- Banner Upload -->
+        <div>
+          <label class="text-sm font-medium block mb-2">Banner</label>
+          <div class="w-full h-32 rounded-xl overflow-hidden bg-muted border border-border flex items-center justify-center">
+            <img
+              v-if="collection.banner"
+              :src="sanitizeIpfsUrl(collection.banner)"
+              :alt="collection.name"
+              class="w-full h-full object-cover"
+            >
+            <div v-else class="text-center">
+              <UIcon name="i-heroicons-photo" class="w-8 h-8 text-muted-foreground mx-auto mb-1" />
+              <UButton variant="outline" size="xs" icon="i-heroicons-arrow-up-tray">
+                Upload Banner
+              </UButton>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Section 2: Creator Earnings -->
+      <section class="space-y-6">
+        <h2 class="text-lg font-semibold border-b border-border pb-2">
+          Creator Earnings
+        </h2>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label class="text-sm font-medium block mb-1">Royalty %</label>
+            <UInput
+              v-model.number="royaltyPercentage"
+              type="number"
+              :min="0"
+              :max="100"
+              step="0.5"
+            />
+          </div>
+          <div>
+            <label class="text-sm font-medium block mb-1">Recipient Wallet</label>
+            <UInput
+              v-model="royaltyRecipient"
+              placeholder="Wallet address..."
+              class="font-mono text-xs"
+            />
+          </div>
+        </div>
+      </section>
+
+      <!-- Section 3: Team -->
+      <section class="space-y-6">
+        <h2 class="text-lg font-semibold border-b border-border pb-2">
+          Team
+        </h2>
+
+        <div class="space-y-3">
+          <div
+            v-for="(collab, i) in collaborators"
+            :key="i"
+            class="flex items-center justify-between border border-border rounded-lg px-4 py-3"
+          >
+            <div class="flex items-center gap-3 min-w-0">
+              <div class="w-8 h-8 rounded-full bg-muted flex items-center justify-center shrink-0">
+                <UIcon name="i-heroicons-user" class="w-4 h-4 text-muted-foreground" />
+              </div>
+              <span class="font-mono text-xs truncate">{{ collab.address }}</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <UBadge :label="collab.role" variant="subtle" size="sm" />
+              <UButton
+                v-if="collab.role !== 'Owner'"
+                variant="ghost"
+                size="xs"
+                icon="i-heroicons-x-mark"
+                @click="removeCollaborator(i)"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="flex gap-2">
+          <UInput
+            v-model="inviteAddress"
+            placeholder="Enter wallet address to invite..."
+            class="flex-1 font-mono text-xs"
+          />
+          <UButton
+            variant="outline"
+            icon="i-heroicons-plus"
+            @click="addCollaborator"
+          >
+            Invite
+          </UButton>
+        </div>
+      </section>
+
+      <!-- Section 4: Visibility -->
+      <section class="space-y-6">
+        <h2 class="text-lg font-semibold border-b border-border pb-2">
+          Visibility
+        </h2>
+
+        <div class="flex items-center justify-between border border-border rounded-lg px-4 py-4">
+          <div>
+            <p class="font-medium text-sm">
+              {{ isPublished ? 'Published' : 'Hidden' }}
+            </p>
+            <p class="text-xs text-muted-foreground">
+              {{ isPublished
+                ? 'Your collection is visible to everyone.'
+                : 'Your collection is hidden from public view.'
+              }}
+            </p>
+          </div>
+          <USwitch v-model="isPublished" />
+        </div>
+      </section>
+    </div>
+
+    <!-- Unsaved Changes Warning -->
+    <UModal v-model:open="showLeaveWarning">
+      <template #content>
+        <div class="p-6 space-y-4">
+          <h3 class="text-lg font-semibold">
+            Unsaved Changes
+          </h3>
+          <p class="text-muted-foreground">
+            You have unsaved changes. Are you sure you want to leave?
+          </p>
+          <div class="flex justify-end gap-3">
+            <UButton variant="outline" @click="cancelLeave">
+              Stay
+            </UButton>
+            <UButton color="error" @click="confirmLeave">
+              Leave
+            </UButton>
+          </div>
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>
diff --git a/app/pages/[chain]/studio/[collection_id]/index.vue b/app/pages/[chain]/studio/[collection_id]/index.vue
new file mode 100644
index 00000000..7dcd2a31
--- /dev/null
+++ b/app/pages/[chain]/studio/[collection_id]/index.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import type { AssetHubChain } from '~/plugins/sdk.client'
+import { useItemSlideOver } from '~/composables/studio/useItemSlideOver'
+import { useStudioCollection } from '~/composables/studio/useStudioCollection'
+import { useStudioItems } from '~/composables/studio/useStudioItems'
+
+const route = useRoute()
+const router = useRouter()
+const collection = useStudioCollection()
+
+const isMock = computed(() => route.query.mock === 'true')
+const chain = computed(() => route.params.chain as AssetHubChain)
+const collectionId = computed(() => route.params.collection_id?.toString() ?? '')
+
+const {
+  selectionMode,
+  selectedItemIds,
+  selectedCount,
+  searchQuery,
+  toggleSelection,
+  selectAll,
+  clearSelection,
+  toggleSelectionMode,
+} = useStudioItems()
+
+const { currentItemId, openItem, closeItem } = useItemSlideOver()
+
+const mockNfts = computed(() => {
+  if (!isMock.value)
+    return []
+  const names = [
+    'Nebula Drift',
+    'Solar Whisper',
+    'Quantum Bloom',
+    'Astral Echo',
+    'Cosmic Seed',
+    'Void Walker',
+    'Star Forge',
+    'Lunar Tide',
+    'Photon Veil',
+    'Dark Matter',
+    'Celestial Shard',
+    'Plasma Wave',
+  ]
+  return names.map((name, i) => ({
+    tokenId: i + 1,
+    collectionId: Number(collectionId.value),
+    chain: chain.value,
+    name: `${name} #${i + 1}`,
+    price: i % 3 === 0 ? String((1.5 + i * 0.25) * 1e10) : null,
+    currentOwner: collection.value.owner,
+  }))
+})
+
+const filteredMockNfts = computed(() => {
+  if (!searchQuery.value)
+    return mockNfts.value
+  const q = searchQuery.value.toLowerCase()
+  return mockNfts.value.filter(n => n.name.toLowerCase().includes(q))
+})
+
+const hasItems = computed(() => isMock.value ? mockNfts.value.length > 0 : true)
+
+const queryString = computed(() => {
+  const q = new URLSearchParams(route.query as Record<string, string>).toString()
+  return q ? `?${q}` : ''
+})
+
+const massMintLink = computed(() =>
+  `/${route.params.chain}/studio/${route.params.collection_id}/massmint${queryString.value}`,
+)
+
+function handleSelectAll() {
+  const ids = mockNfts.value.map(n => `${n.collectionId}-${n.tokenId}`)
+  selectAll(ids)
+}
+
+function handleItemClick(tokenId: number, colId: number) {
+  if (selectionMode.value) {
+    toggleSelection(`${colId}-${tokenId}`)
+  }
+  else {
+    openItem(`${colId}-${tokenId}`)
+  }
+}
+
+function navigateToBulkOp(op: string) {
+  router.push(`/${route.params.chain}/studio/${route.params.collection_id}/${op}${queryString.value}`)
+}
+</script>
+
+<template>
+  <div class="p-6">
+    <!-- Header -->
+    <div class="flex items-center justify-between mb-6">
+      <div>
+        <h1 class="text-xl font-bold">
+          Items
+        </h1>
+        <p class="text-sm text-muted-foreground">
+          {{ collection.claimed }} items in collection
+        </p>
+      </div>
+    </div>
+
+    <!-- Empty State -->
+    <StudioEmptyState
+      v-if="!hasItems"
+      :mass-mint-link="massMintLink"
+    />
+
+    <!-- Items Content -->
+    <template v-else>
+      <!-- Toolbar -->
+      <div class="flex flex-col md:flex-row md:items-center gap-4 mb-6">
+        <div class="flex-1">
+          <UInput
+            v-model="searchQuery"
+            icon="i-heroicons-magnifying-glass"
+            placeholder="Search items..."
+            class="w-full md:max-w-xs"
+          />
+        </div>
+        <div class="flex items-center gap-2">
+          <UButton
+            :variant="selectionMode ? 'solid' : 'outline'"
+            size="sm"
+            :icon="selectionMode ? 'i-heroicons-check-circle' : 'i-heroicons-cursor-arrow-ripple'"
+            @click="toggleSelectionMode"
+          >
+            {{ selectionMode ? 'Done' : 'Select' }}
+          </UButton>
+          <UButton
+            v-if="selectionMode"
+            variant="outline"
+            size="sm"
+            @click="handleSelectAll"
+          >
+            Select All
+          </UButton>
+        </div>
+      </div>
+
+      <!-- Mock Items Grid -->
+      <div
+        v-if="isMock"
+        class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4 md:gap-6"
+      >
+        <TokenCard
+          v-for="nft in filteredMockNfts"
+          :key="`mock-${nft.tokenId}`"
+          :token-id="nft.tokenId"
+          :collection-id="nft.collectionId"
+          :chain="nft.chain"
+          :name="nft.name"
+          :price="nft.price"
+          :current-owner="nft.currentOwner"
+          :selection-mode="selectionMode"
+          :is-selected="selectedItemIds.has(`${nft.collectionId}-${nft.tokenId}`)"
+          :hide-hover-action="true"
+          :studio-mode="true"
+          @select="handleItemClick"
+          @item-click="handleItemClick"
+        />
+      </div>
+
+      <!-- Real Items Grid -->
+      <div v-else class="text-center py-12 text-muted-foreground">
+        <p>Connect your wallet to view real collection items.</p>
+      </div>
+    </template>
+
+    <!-- Action Bar -->
+    <StudioActionBar
+      :selected-count="selectedCount"
+      @clear="clearSelection"
+      @airdrop="navigateToBulkOp('airdrop')"
+      @list="navigateToBulkOp('list')"
+      @transfer="navigateToBulkOp('transfer')"
+    />
+
+    <!-- Item Slide-Over -->
+    <ItemSlideOver
+      :item-id="currentItemId"
+      :chain="chain"
+      :collection-id="collectionId"
+      @close="closeItem"
+    />
+  </div>
+</template>
diff --git a/app/pages/[chain]/studio/[collection_id]/list.client.vue b/app/pages/[chain]/studio/[collection_id]/list.client.vue
new file mode 100644
index 00000000..4df4878e
--- /dev/null
+++ b/app/pages/[chain]/studio/[collection_id]/list.client.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { useStudioCollection } from '~/composables/studio/useStudioCollection'
+
+const route = useRoute()
+const collection = useStudioCollection()
+
+const backLink = computed(() =>
+  `/${route.params.chain}/studio/${route.params.collection_id}`,
+)
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center h-full py-24 px-6 text-center">
+    <div class="border border-dashed border-border rounded-xl p-10 max-w-md space-y-4">
+      <UIcon name="i-heroicons-tag" class="w-12 h-12 mx-auto text-muted-foreground" />
+      <h2 class="text-lg font-semibold">
+        Bulk Listing
+      </h2>
+      <p class="text-sm text-muted-foreground">
+        This feature is a work in progress. Bulk listing for <span class="font-medium text-foreground">{{ collection.name }}</span> will be available soon.
+      </p>
+      <UButton
+        variant="outline"
+        :to="backLink"
+      >
+        Back to Items
+      </UButton>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/[chain]/studio/[collection_id]/massmint.client.vue b/app/pages/[chain]/studio/[collection_id]/massmint.client.vue
new file mode 100644
index 00000000..048b2a52
--- /dev/null
+++ b/app/pages/[chain]/studio/[collection_id]/massmint.client.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { useStudioCollection } from '~/composables/studio/useStudioCollection'
+import { useStudioNavGuard } from '~/composables/studio/useStudioNavGuard'
+
+const route = useRoute()
+const collection = useStudioCollection()
+
+const returnRoute = computed(() =>
+  `/${route.params.chain}/studio/${route.params.collection_id}`,
+)
+
+const { showWarning, confirmLeave, cancelLeave } = useStudioNavGuard()
+</script>
+
+<template>
+  <div class="h-full">
+    <MassMintWizard
+      :collection-id="collection.id"
+      :chain="collection.chain"
+      :collection-name="collection.name"
+      :existing-item-count="Number(collection.claimed || 0)"
+      :return-route="returnRoute"
+      compact
+    />
+
+    <!-- Navigation Warning Dialog -->
+    <UModal v-model:open="showWarning">
+      <template #content>
+        <div class="p-6 space-y-4">
+          <h3 class="text-lg font-semibold">
+            Leave Mass Mint?
+          </h3>
+          <p class="text-muted-foreground">
+            You have an active minting session. Leaving will discard your progress.
+          </p>
+          <div class="flex justify-end gap-3">
+            <UButton variant="outline" @click="cancelLeave">
+              Stay
+            </UButton>
+            <UButton color="error" @click="confirmLeave">
+              Leave
+            </UButton>
+          </div>
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>
diff --git a/app/pages/[chain]/studio/[collection_id]/preview.vue b/app/pages/[chain]/studio/[collection_id]/preview.vue
new file mode 100644
index 00000000..02c48913
--- /dev/null
+++ b/app/pages/[chain]/studio/[collection_id]/preview.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { useStudioCollection } from '~/composables/studio/useStudioCollection'
+
+const collection = useStudioCollection()
+</script>
+
+<template>
+  <div class="p-6">
+    <div class="mb-6">
+      <h1 class="text-xl font-bold mb-1">
+        Preview
+      </h1>
+      <p class="text-sm text-muted-foreground">
+        This is how visitors see your collection.
+      </p>
+    </div>
+
+    <CollectionDisplay
+      :name="collection.name"
+      :description="collection.description"
+      :image="collection.image"
+      :banner="collection.banner"
+      :owner="collection.owner"
+      :supply="collection.supply"
+      :claimed="collection.claimed"
+      :floor="collection.floor"
+      :chain="collection.chain"
+      :collection-id="collection.id"
+      :read-only="true"
+    />
+  </div>
+</template>
diff --git a/app/pages/[chain]/studio/[collection_id]/transfer.client.vue b/app/pages/[chain]/studio/[collection_id]/transfer.client.vue
new file mode 100644
index 00000000..f76dd667
--- /dev/null
+++ b/app/pages/[chain]/studio/[collection_id]/transfer.client.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { useStudioCollection } from '~/composables/studio/useStudioCollection'
+
+const route = useRoute()
+const collection = useStudioCollection()
+
+const backLink = computed(() =>
+  `/${route.params.chain}/studio/${route.params.collection_id}`,
+)
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center h-full py-24 px-6 text-center">
+    <div class="border border-dashed border-border rounded-xl p-10 max-w-md space-y-4">
+      <UIcon name="i-heroicons-arrow-right-circle" class="w-12 h-12 mx-auto text-muted-foreground" />
+      <h2 class="text-lg font-semibold">
+        Bulk Transfer
+      </h2>
+      <p class="text-sm text-muted-foreground">
+        This feature is a work in progress. Bulk transfer for <span class="font-medium text-foreground">{{ collection.name }}</span> will be available soon.
+      </p>
+      <UButton
+        variant="outline"
+        :to="backLink"
+      >
+        Back to Items
+      </UButton>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/[chain]/studio/index.client.vue b/app/pages/[chain]/studio/index.client.vue
new file mode 100644
index 00000000..1c2610ed
--- /dev/null
+++ b/app/pages/[chain]/studio/index.client.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { CHAINS } from '@kodadot1/static'
+import { useCreatorDashboard } from '~/composables/dashboard/useCreatorDashboard'
+
+definePageMeta({
+  layout: 'no-footer',
+  validate: async (route) => {
+    const { chain } = route.params
+    return typeof chain === 'string' && chain in CHAINS
+  },
+})
+
+const { isLogIn } = useAuth()
+const route = useRoute()
+const router = useRouter()
+
+const isMock = computed(() => route.query.mock === 'true')
+const { collections, isLoading, hasCollections } = useCreatorDashboard()
+
+watch(isLogIn, (loggedIn) => {
+  if (!loggedIn && !isMock.value) {
+    router.push('/')
+  }
+}, { immediate: true })
+
+useSeoMeta({
+  title: 'My Collections — Studio',
+})
+</script>
+
+<template>
+  <UContainer class="px-4 md:px-6 py-8">
+    <!-- Mock mode indicator -->
+    <div v-if="isMock" class="bg-amber-500/10 border border-amber-500/30 rounded-lg px-4 py-2 mb-4 flex items-center gap-2 text-sm text-amber-700 dark:text-amber-400">
+      <UIcon name="i-heroicons-beaker" class="w-4 h-4 shrink-0" />
+      <span>Mock mode — showing sample collections without a connected wallet.</span>
+    </div>
+
+    <div class="flex items-center justify-between mb-8">
+      <h1 class="text-2xl font-bold">
+        My Collections
+      </h1>
+      <UButton
+        icon="i-heroicons-plus"
+        to="/create/collection"
+      >
+        Create Collection
+      </UButton>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="isLoading" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+      <div
+        v-for="i in 4"
+        :key="i"
+        class="border border-border rounded-xl overflow-hidden"
+      >
+        <USkeleton class="h-32 w-full" />
+        <div class="p-4 space-y-3">
+          <USkeleton class="h-4 w-3/4 rounded" />
+          <USkeleton class="h-3 w-1/2 rounded" />
+          <div class="flex gap-2">
+            <USkeleton class="h-8 flex-1 rounded" />
+            <USkeleton class="h-8 flex-1 rounded" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Collections grid -->
+    <div v-else-if="hasCollections" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+      <DashboardCollectionCard
+        v-for="collection in collections"
+        :key="collection.id"
+        :collection="collection"
+      />
+    </div>
+
+    <!-- Empty state -->
+    <div v-else class="text-center py-20">
+      <UIcon name="i-heroicons-rectangle-stack" class="w-16 h-16 mx-auto text-muted-foreground mb-4" />
+      <h2 class="text-xl font-semibold mb-2">
+        You don't have any collections yet
+      </h2>
+      <p class="text-muted-foreground mb-6">
+        Create your first collection to start minting NFTs.
+      </p>
+      <UButton
+        size="lg"
+        icon="i-heroicons-plus"
+        to="/create/collection"
+      >
+        Create your first collection
+      </UButton>
+    </div>
+  </UContainer>
+</template>
diff --git a/app/stores/bulkOperations.ts b/app/stores/bulkOperations.ts
new file mode 100644
index 00000000..799f1ccc
--- /dev/null
+++ b/app/stores/bulkOperations.ts
@@ -0,0 +1,119 @@
+import type { AssetHubChain } from '~/plugins/sdk.client'
+import type { BulkOperationItem } from '~/types/bulkOperations'
+import { defineStore } from 'pinia'
+import { BulkOperationType, MassMintStep } from '~/types/bulkOperations'
+
+export const useBulkOperationsStore = defineStore('bulkOperations', () => {
+  const operationType = ref<BulkOperationType>(BulkOperationType.MASS_MINT)
+  const currentStep = ref(0)
+  const maxStepReached = ref(0)
+  const collectionId = ref('')
+  const chain = ref<AssetHubChain>('ahp')
+  const isActive = ref(false)
+
+  const {
+    items,
+    count,
+    itemsInChain,
+    getItem,
+    setItem,
+    removeItem,
+    clear: clearItems,
+    updateItem,
+  } = useCart<BulkOperationItem & { chain: AssetHubChain }>({
+    chain: computed(() => chain.value),
+  })
+
+  const totalSteps = computed(() => {
+    if (operationType.value === BulkOperationType.MASS_MINT) {
+      return 4
+    }
+    return 3
+  })
+
+  const canProceed = computed(() => {
+    if (operationType.value === BulkOperationType.MASS_MINT) {
+      switch (currentStep.value) {
+        case MassMintStep.UPLOAD:
+          return count.value > 0
+        case MassMintStep.METADATA:
+          return true
+        case MassMintStep.REVIEW:
+          return true
+        case MassMintStep.MINT:
+          return false
+        default:
+          return false
+      }
+    }
+    return true
+  })
+
+  const progressPercentage = computed(() => {
+    return Math.round((currentStep.value / (totalSteps.value - 1)) * 100)
+  })
+
+  function initOperation(type: BulkOperationType, colId: string, ch: AssetHubChain) {
+    operationType.value = type
+    collectionId.value = colId
+    chain.value = ch
+    currentStep.value = 0
+    maxStepReached.value = 0
+    isActive.value = true
+  }
+
+  function nextStep() {
+    if (currentStep.value < totalSteps.value - 1) {
+      currentStep.value++
+      if (currentStep.value > maxStepReached.value) {
+        maxStepReached.value = currentStep.value
+      }
+    }
+  }
+
+  function prevStep() {
+    if (currentStep.value > 0) {
+      currentStep.value--
+    }
+  }
+
+  function goToStep(step: number) {
+    if (step >= 0 && step < totalSteps.value && step <= maxStepReached.value) {
+      currentStep.value = step
+    }
+  }
+
+  function reset() {
+    operationType.value = BulkOperationType.MASS_MINT
+    currentStep.value = 0
+    maxStepReached.value = 0
+    collectionId.value = ''
+    chain.value = 'ahp'
+    isActive.value = false
+    clearItems()
+  }
+
+  return {
+    operationType,
+    currentStep,
+    maxStepReached,
+    collectionId,
+    chain,
+    isActive,
+    items,
+    count,
+    itemsInChain,
+    totalSteps,
+    canProceed,
+    progressPercentage,
+    getItem,
+    setItem,
+    removeItem,
+    updateItem,
+    initOperation,
+    nextStep,
+    prevStep,
+    goToStep,
+    reset,
+  }
+}, { persist: true })
diff --git a/app/types/bulkOperations.ts b/app/types/bulkOperations.ts
new file mode 100644
index 00000000..1b06d2b1
--- /dev/null
+++ b/app/types/bulkOperations.ts
@@ -0,0 +1,42 @@
+export enum BulkOperationType {
+  MASS_MINT = 'MASS_MINT',
+  AIRDROP = 'AIRDROP',
+  LIST = 'LIST',
+  DELIST = 'DELIST',
+  TRANSFER = 'TRANSFER',
+  EDIT = 'EDIT',
+}
+
+export enum MassMintStep {
+  UPLOAD = 0,
+  METADATA = 1,
+  REVIEW = 2,
+  MINT = 3,
+}
+
+export enum MintingState {
+  PRE_SIGN = 'PRE_SIGN',
+  SIGNING = 'SIGNING',
+  PROCESSING = 'PROCESSING',
+  SUCCESS = 'SUCCESS',
+  ERROR = 'ERROR',
+}
+
+export enum MetadataPath {
+  TEMPLATE = 'TEMPLATE',
+  UNIFORM = 'UNIFORM',
+}
+
+export interface BulkOperationItem {
+  id: string
+  chain: string
+  tokenId?: number
+  collectionId?: string
+  name?: string
+  image?: string
+}
+
+export interface StepConfig {
+  label: string
+  icon?: string
+}
diff --git a/app/utils/fileFormatting.ts b/app/utils/fileFormatting.ts
new file mode 100644
index 00000000..ca3b13c0
--- /dev/null
+++ b/app/utils/fileFormatting.ts
@@ -0,0 +1,19 @@
+export function formatFileSize(bytes: number): string {
+  if (bytes < 1024)
+    return `${bytes} B`
+  if (bytes < 1024 * 1024)
+    return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+export function getFileTypeLabel(type: string): string {
+  if (type.startsWith('image/'))
+    return type.replace('image/', '').toUpperCase()
+  if (type.startsWith('video/'))
+    return 'Video'
+  if (type.startsWith('audio/'))
+    return 'Audio'
+  if (type.includes('gltf') || type.includes('glb'))
+    return '3D Model'
+  return 'File'
+}
diff --git a/package.json b/package.json
index 94c156d1..b4677e60 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,8 @@
     "valibot": "^1.1.0",
     "vue": "^3.5.22",
     "vue-chartjs": "^5.3.3",
-    "vue-dompurify-html": "^5.3.0"
+    "vue-dompurify-html": "^5.3.0",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^6.1.0",
@@ -68,10 +69,12 @@
     "@polkadot/apps-config": "^0.169.1",
     "@types/lodash": "^4.17.20",
     "@types/markdown-it": "^14.1.2",
+    "@types/papaparse": "^5.5.2",
     "@types/prismjs": "^1.26.5",
     "baseline-browser-mapping": "^2.9.19",
     "eslint": "^9.38.0",
     "husky": "^9.1.7",
+    "papaparse": "^5.5.3",
     "pino-pretty": "^13.1.1",
     "typescript": "^5.8.3",
     "vue-tsc": "^3.2.3"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 35b364bd..032f291e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -37,7 +37,7 @@ importers:
         version: 2.1.0(magicast@0.5.0)(vite@7.1.12(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.8.3))
       '@nuxt/ui':
         specifier: ^4.1.0
-        version: 4.1.0(@babel/parser@7.29.0)(@emotion/is-prop-valid@1.2.2)(@netlify/blobs@9.1.2)(axios@1.13.1)(change-case@5.4.4)(db0@0.3.4)(embla-carousel@8.6.0)(idb-keyval@6.2.2)(ioredis@5.8.2)(jwt-decode@4.0.0)(magicast@0.5.0)(qrcode@1.5.3)(react-dom@19.1.1(react@18.3.1))(react@18.3.1)(superstruct@2.0.2)(typescript@5.8.3)(valibot@1.1.0(typescript@5.8.3))(vite@7.1.12(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))(vue-router@4.6.3(vue@3.5.22(typescript@5.8.3)))(vue@3.5.22(typescript@5.8.3))(zod@4.1.12)
+        version: 4.1.0(@babel/parser@7.29.0)(@emotion/is-prop-valid@1.2.2)(@netlify/blobs@9.1.2)(axios@1.13.1)(change-case@5.4.4)(db0@0.3.4)(embla-carousel@8.6.0)(idb-keyval@6.2.2)(ioredis@5.8.2)(jwt-decode@4.0.0)(magicast@0.5.0)(qrcode@1.5.3)(react-dom@19.1.1(react@18.3.1))(react@18.3.1)(sortablejs@1.14.0)(superstruct@2.0.2)(typescript@5.8.3)(valibot@1.1.0(typescript@5.8.3))(vite@7.1.12(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))(vue-router@4.6.3(vue@3.5.22(typescript@5.8.3)))(vue@3.5.22(typescript@5.8.3))(zod@4.1.12)
       '@nuxtjs/i18n':
         specifier: ^10.1.2
         version: 10.1.2(@netlify/blobs@9.1.2)(@vue/compiler-dom@3.5.22)(db0@0.3.4)(eslint@9.38.0(jiti@2.6.1))(idb-keyval@6.2.2)(ioredis@5.8.2)(magicast@0.5.0)(rollup@4.52.5)(vue@3.5.22(typescript@5.8.3))
@@ -131,6 +131,9 @@ importers:
       vue-dompurify-html:
         specifier: ^5.3.0
         version: 5.3.0(vue@3.5.22(typescript@5.8.3))
+      vuedraggable:
+        specifier: ^4.1.0
+        version: 4.1.0(vue@3.5.22(typescript@5.8.3))
     devDependencies:
       '@antfu/eslint-config':
         specifier: ^6.1.0
@@ -150,6 +153,9 @@ importers:
       '@types/markdown-it':
         specifier: ^14.1.2
         version: 14.1.2
+      '@types/papaparse':
+        specifier: ^5.5.2
+        version: 5.5.2
       '@types/prismjs':
         specifier: ^1.26.5
         version: 1.26.5
@@ -162,6 +168,9 @@ importers:
       husky:
         specifier: ^9.1.7
         version: 9.1.7
+      papaparse:
+        specifier: ^5.5.3
+        version: 5.5.3
       pino-pretty:
         specifier: ^13.1.1
         version: 13.1.1
@@ -4477,6 +4486,9 @@ packages:
   '@types/normalize-package-data@2.4.4':
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
 
+  '@types/papaparse@5.5.2':
+    resolution: {integrity: sha512-gFnFp/JMzLHCwRf7tQHrNnfhN4eYBVYYI897CGX4MY1tzY9l2aLkVyx2IlKZ/SAqDbB3I1AOZW5gTMGGsqWliA==}
+
   '@types/parse-path@7.1.0':
     resolution: {integrity: sha512-EULJ8LApcVEPbrfND0cRQqutIOdiIgJ1Mgrhpy755r14xMohPTEpkV/k28SJvuOs9bHRFW8x+KeDAEPiGQPB9Q==}
     deprecated: This is a stub types definition. parse-path provides its own type definitions, so you do not need this installed.
@@ -8356,6 +8368,9 @@ packages:
   pako@2.1.0:
     resolution: {integrity: sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==}
 
+  papaparse@5.5.3:
+    resolution: {integrity: sha512-5QvjGxYVjxO59MGU2lHVYpRWBBtKHnlIAcSe1uNFCkkptUh63NFRj0FJQm7nR67puEruUci/ZkjmEFrjCAyP4A==}
+
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -9183,6 +9198,9 @@ packages:
     resolution: {integrity: sha512-aSbHV0DaBcr7u0PVHXzM6NbZNAtrr9sF6+Qfs9UUVG7Ll3jQ6hHi8F/xqIIcn2rvIVbr0v/2zyjSdwSV47AgLQ==}
     engines: {node: '>=12'}
 
+  sortablejs@1.14.0:
+    resolution: {integrity: sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==}
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -10272,6 +10290,11 @@ packages:
       typescript:
         optional: true
 
+  vuedraggable@4.1.0:
+    resolution: {integrity: sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==}
+    peerDependencies:
+      vue: ^3.0.1
+
   wagmi@3.4.2:
     resolution: {integrity: sha512-ZPZUquVh75NCHvb0qI+SBegUzcFHGIGtIKCL6gtHLcYHMcEMllqZGXtkIpc98IUq5Vq7Qey4FSG4ohTtMfQ/Yw==}
     peerDependencies:
@@ -12620,7 +12643,7 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
-  '@nuxt/ui@4.1.0(@babel/parser@7.29.0)(@emotion/is-prop-valid@1.2.2)(@netlify/blobs@9.1.2)(axios@1.13.1)(change-case@5.4.4)(db0@0.3.4)(embla-carousel@8.6.0)(idb-keyval@6.2.2)(ioredis@5.8.2)(jwt-decode@4.0.0)(magicast@0.5.0)(qrcode@1.5.3)(react-dom@19.1.1(react@18.3.1))(react@18.3.1)(superstruct@2.0.2)(typescript@5.8.3)(valibot@1.1.0(typescript@5.8.3))(vite@7.1.12(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))(vue-router@4.6.3(vue@3.5.22(typescript@5.8.3)))(vue@3.5.22(typescript@5.8.3))(zod@4.1.12)':
+  '@nuxt/ui@4.1.0(@babel/parser@7.29.0)(@emotion/is-prop-valid@1.2.2)(@netlify/blobs@9.1.2)(axios@1.13.1)(change-case@5.4.4)(db0@0.3.4)(embla-carousel@8.6.0)(idb-keyval@6.2.2)(ioredis@5.8.2)(jwt-decode@4.0.0)(magicast@0.5.0)(qrcode@1.5.3)(react-dom@19.1.1(react@18.3.1))(react@18.3.1)(sortablejs@1.14.0)(superstruct@2.0.2)(typescript@5.8.3)(valibot@1.1.0(typescript@5.8.3))(vite@7.1.12(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))(vue-router@4.6.3(vue@3.5.22(typescript@5.8.3)))(vue@3.5.22(typescript@5.8.3))(zod@4.1.12)':
     dependencies:
       '@ai-sdk/vue': 2.0.81(vue@3.5.22(typescript@5.8.3))(zod@4.1.12)
       '@iconify/vue': 5.0.0(vue@3.5.22(typescript@5.8.3))
@@ -12638,7 +12661,7 @@ snapshots:
       '@tanstack/vue-virtual': 3.13.12(vue@3.5.22(typescript@5.8.3))
       '@unhead/vue': 2.0.19(vue@3.5.22(typescript@5.8.3))
       '@vueuse/core': 13.9.0(vue@3.5.22(typescript@5.8.3))
-      '@vueuse/integrations': 13.9.0(axios@1.13.1)(change-case@5.4.4)(fuse.js@7.1.0)(idb-keyval@6.2.2)(jwt-decode@4.0.0)(qrcode@1.5.3)(vue@3.5.22(typescript@5.8.3))
+      '@vueuse/integrations': 13.9.0(axios@1.13.1)(change-case@5.4.4)(fuse.js@7.1.0)(idb-keyval@6.2.2)(jwt-decode@4.0.0)(qrcode@1.5.3)(sortablejs@1.14.0)(vue@3.5.22(typescript@5.8.3))
       colortranslator: 5.0.0
       consola: 3.4.2
       defu: 6.1.4
@@ -17241,6 +17264,10 @@ snapshots:
 
   '@types/normalize-package-data@2.4.4': {}
 
+  '@types/papaparse@5.5.2':
+    dependencies:
+      '@types/node': 25.0.10
+
   '@types/parse-path@7.1.0':
     dependencies:
       parse-path: 7.1.0
@@ -17981,7 +18008,7 @@ snapshots:
       '@vueuse/shared': 14.2.0(vue@3.5.22(typescript@5.8.3))
       vue: 3.5.22(typescript@5.8.3)
 
-  '@vueuse/integrations@13.9.0(axios@1.13.1)(change-case@5.4.4)(fuse.js@7.1.0)(idb-keyval@6.2.2)(jwt-decode@4.0.0)(qrcode@1.5.3)(vue@3.5.22(typescript@5.8.3))':
+  '@vueuse/integrations@13.9.0(axios@1.13.1)(change-case@5.4.4)(fuse.js@7.1.0)(idb-keyval@6.2.2)(jwt-decode@4.0.0)(qrcode@1.5.3)(sortablejs@1.14.0)(vue@3.5.22(typescript@5.8.3))':
     dependencies:
       '@vueuse/core': 13.9.0(vue@3.5.22(typescript@5.8.3))
       '@vueuse/shared': 13.9.0(vue@3.5.22(typescript@5.8.3))
@@ -17993,6 +18020,7 @@ snapshots:
       idb-keyval: 6.2.2
       jwt-decode: 4.0.0
       qrcode: 1.5.3
+      sortablejs: 1.14.0
 
   '@vueuse/metadata@10.11.1': {}
 
@@ -22514,6 +22542,8 @@ snapshots:
 
   pako@2.1.0: {}
 
+  papaparse@5.5.3: {}
+
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -23431,6 +23461,8 @@ snapshots:
     dependencies:
       is-plain-obj: 4.1.0
 
+  sortablejs@1.14.0: {}
+
   source-map-js@1.2.1: {}
 
   source-map-support@0.5.21:
@@ -24561,6 +24593,11 @@ snapshots:
     optionalDependencies:
       typescript: 5.8.3
 
+  vuedraggable@4.1.0(vue@3.5.22(typescript@5.8.3)):
+    dependencies:
+      sortablejs: 1.14.0
+      vue: 3.5.22(typescript@5.8.3)
+
   wagmi@3.4.2(@safe-global/safe-apps-provider@0.18.6(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.1.12))(@safe-global/safe-apps-sdk@9.1.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.1.12))(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@18.3.1))(@types/react@19.2.2)(ox@0.11.3(typescript@5.8.3)(zod@4.1.12))(react@18.3.1)(typescript@5.8.3)(viem@2.45.2(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.1.12)):
     dependencies:
       '@tanstack/react-query': 5.90.20(react@18.3.1)