diff --git a/assets/styles/global.scss b/assets/styles/global.scss
index d4fbfd55d2..6546080638 100644
--- a/assets/styles/global.scss
+++ b/assets/styles/global.scss
@@ -373,6 +373,12 @@ a.has-text-grey {
   }
 }
 
+.has-text-k-grey {
+  @include ktheme() {
+    color: theme('k-grey');
+  }
+}
+
 .has-text-color {
   @include ktheme() {
     color: theme('text-color') !important;
@@ -441,6 +447,10 @@ a.has-text-grey {
   }
 }
 
+
+.is-cursor-pointer {
+  cursor: pointer !important;
+}
 //hover
 
 .is-hoverable-item {
diff --git a/components/base/SubmitButton.vue b/components/base/SubmitButton.vue
index 9c27ef0b44..947b4a709d 100644
--- a/components/base/SubmitButton.vue
+++ b/components/base/SubmitButton.vue
@@ -1,6 +1,7 @@
 <template>
   <NeoField>
     <NeoButton
+      :class="customClass"
       :size="size"
       :type="type"
       :icon-left="icon"
@@ -27,6 +28,7 @@ export interface Props {
   loading?: boolean
   type?: string
   size?: 'small' | 'medium' | 'large'
+  customClass?: string
 }
 
 withDefaults(defineProps<Props>(), {
@@ -35,5 +37,6 @@ withDefaults(defineProps<Props>(), {
   type: 'is-primary',
   icon: 'paper-plane',
   size: 'medium',
+  customClass: '',
 })
 </script>
diff --git a/components/bsx/Create/CreateToken.vue b/components/bsx/Create/CreateToken.vue
deleted file mode 100644
index cd7883772c..0000000000
--- a/components/bsx/Create/CreateToken.vue
+++ /dev/null
@@ -1,322 +0,0 @@
-<template>
-  <div>
-    <Loader
-      v-model="isTransactionLoading"
-      :status="transactionStatus"
-      can-cancel />
-    <BaseTokenForm
-      ref="baseTokenForm"
-      v-model="base"
-      :show-explainer-text="showExplainerText"
-      :collections="collections"
-      :has-edition="false">
-      <template #main>
-        <BasicSwitch key="nsfw" v-model="nsfw" label="mint.nfsw" />
-        <BasicSwitch key="listed" v-model="listed" label="mint.listForSale" />
-        <TokenBalanceInput
-          v-if="listed"
-          ref="balanceInput"
-          key="token-price"
-          v-model="price"
-          :token-id="tokenId"
-          :prefix="urlPrefix"
-          class="mb-3" />
-
-        <div v-show="base.selectedCollection" key="attributes">
-          <CustomAttributeInput
-            v-model="attributes"
-            :max="10"
-            class="mb-3"
-            visible="collapse.collection.attributes.show"
-            hidden="collapse.collection.attributes.hide" />
-        </div>
-
-        <BasicSwitch
-          key="hasRoyalty"
-          v-model="hasRoyalty"
-          label="mint.listWithRoyalty" />
-        <RoyaltyForm v-if="hasRoyalty" key="royalty" v-model="royalty" />
-      </template>
-      <template #footer>
-        <NeoField key="advanced">
-          <CollapseWrapper
-            v-if="base.copies > 1"
-            visible="mint.expert.show"
-            hidden="mint.expert.hide"
-            class="mt-3">
-            <BasicSwitch
-              v-model="postfix"
-              class="mt-3"
-              label="mint.expert.postfix" />
-          </CollapseWrapper>
-        </NeoField>
-        <NeoField key="deposit">
-          <p class="has-text-weight-medium is-size-6 has-text-info">
-            {{ $t('mint.deposit') }}:
-            <Money :value="deposit" :token-id="tokenId" inline />
-          </p>
-        </NeoField>
-        <NeoField key="balance">
-          <AccountBalance />
-        </NeoField>
-        <NeoField key="token">
-          <MultiPaymentFeeButton :account-id="accountId" :prefix="urlPrefix" />
-        </NeoField>
-        <NeoField
-          key="submit"
-          variant="danger"
-          :message="balanceNotEnoughMessage">
-          <SubmitButton
-            expanded
-            label="mint.submit"
-            :loading="isTransactionLoading"
-            @click="submit()" />
-        </NeoField>
-      </template>
-    </BaseTokenForm>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { notificationTypes, showNotification } from '@/utils/notification'
-import shouldUpdate from '@/utils/shouldUpdate'
-import { Interaction } from '@kodadot1/minimark/v1'
-import { Attribute } from '@kodadot1/minimark/common'
-import { onApiConnect } from '@kodadot1/sub-api'
-import { BaseTokenType } from '@/components/base/types'
-import {
-  getInstanceDeposit,
-  getMetadataDeposit,
-} from '@/components/unique/apiConstants'
-import { createTokenId } from '@/components/unique/utils'
-import { DETAIL_TIMEOUT } from '@/utils/constants'
-import resolveQueryPath from '@/utils/queryPathResolver'
-import { unwrapSafe } from '@/utils/uniquery'
-import { Royalty } from '@/utils/royalty'
-import { fetchCollectionMetadata } from '@/utils/ipfs'
-import { CollectionMetadata } from '@/components/rmrk/types'
-import { Token, getBalance, getDeposit, getFeesToken } from './utils'
-import { MintedCollection } from '@/composables/transaction/types'
-import { NeoField } from '@kodadot1/brick'
-import type TokenBalanceInputComponent from '@/components/bsx/input/TokenBalanceInput.vue'
-import type BaseTokenFormComponent from '@/components/base/BaseTokenForm.vue'
-
-import CustomAttributeInput from '@/components/rmrk/Create/CustomAttributeInput.vue'
-import CollapseWrapper from '@/components/shared/collapse/CollapseWrapper.vue'
-import Loader from '@/components/shared/Loader.vue'
-import BasicSwitch from '@/components/shared/form/BasicSwitch.vue'
-import RoyaltyForm from '@/components/bsx/Create/RoyaltyForm.vue'
-import Money from '@/components/bsx/format/TokenMoney.vue'
-import SubmitButton from '@/components/base/SubmitButton.vue'
-import AccountBalance from '@/components/shared/AccountBalance.vue'
-import MultiPaymentFeeButton from '@/components/bsx/specific/MultiPaymentFeeButton.vue'
-import TokenBalanceInput from '@/components/bsx/input/TokenBalanceInput.vue'
-
-withDefaults(
-  defineProps<{
-    showExplainerText?: boolean
-  }>(),
-  {
-    showExplainerText: false,
-  },
-)
-
-const { $i18n, $consola } = useNuxtApp()
-const router = useRouter()
-const { apiUrl } = useApi()
-const { client, urlPrefix, tokenId } = usePrefix()
-const { accountId } = useAuth()
-const {
-  status: transactionStatus,
-  isLoading: isTransactionLoading,
-  stopLoader: stopTransactionLoader,
-} = useTransactionStatus()
-
-onApiConnect(apiUrl.value, (api) => {
-  const instanceDeposit = getInstanceDeposit(api)
-  const metadataDeposit = getMetadataDeposit(api)
-  deposit.value = (instanceDeposit + metadataDeposit).toString()
-})
-
-const base = ref<BaseTokenType>({
-  name: '',
-  file: null,
-  description: '',
-  selectedCollection: null,
-  copies: 1,
-  secondFile: null,
-})
-const collections = ref<MintedCollection[]>([])
-const postfix = ref(true)
-const deposit = ref('0')
-const attributes = ref<Attribute[]>([])
-const nsfw = ref(false)
-const price = ref('0')
-const listed = ref(false)
-const hasRoyalty = ref(true)
-const feesToken = ref<Token>('BSX')
-const royalty = ref<Royalty>({
-  amount: 0.15,
-  address: accountId.value,
-})
-const balanceNotEnough = ref(false)
-
-const balanceInput = ref<typeof TokenBalanceInputComponent | null>(null)
-const baseTokenForm = ref<typeof BaseTokenFormComponent | null>(null)
-
-watch(price, (value) => {
-  price.value = value
-  balanceInput.value?.checkValidity()
-})
-
-const balanceOfToken = computed(() => getBalance(feesToken.value))
-const depositOfToken = computed(() =>
-  getDeposit(feesToken.value, parseFloat(deposit.value)),
-)
-const balanceNotEnoughMessage = computed(() => {
-  if (balanceNotEnough.value) {
-    return $i18n.t('tooltip.notEnoughBalance')
-  }
-  return ''
-})
-
-const loadCollectionMeta = async () => {
-  const metadata = collections.value.map(({ metadata }) => metadata)
-
-  metadata.forEach(async (m, i) => {
-    try {
-      const meta = await fetchCollectionMetadata(collections[i])
-      Object.keys(meta).forEach((key) => {
-        collections.value[i][key] = meta[key]
-      })
-    } catch (e) {
-      $consola.warn('[ERR] unable to get metadata')
-    }
-  })
-}
-
-const fetchCollections = async () => {
-  const query = await resolveQueryPath(urlPrefix.value, 'collectionForMint')
-  const { data: newCollections } = await useAsyncQuery({
-    query: query.default,
-    variables: {
-      account: accountId.value,
-    },
-    clientId: client.value,
-  })
-  const { collectionEntities } = newCollections.value
-
-  const initialMeta: Partial<CollectionMetadata> = {
-    description: undefined,
-    attributes: undefined,
-    image: undefined,
-    image_data: undefined,
-    external_url: undefined,
-  }
-
-  collections.value = unwrapSafe(collectionEntities)?.map((ce: any) => ({
-    ...initialMeta, // set initial meta to get reactivity
-    ...ce,
-    alreadyMinted: ce.nfts?.length,
-    lastIndexUsed: Number(ce.nfts?.at(0)?.index || 0),
-    totalCount: ce.nfts?.filter((nft) => !nft.burned).length,
-  }))
-
-  loadCollectionMeta()
-}
-
-const checkValidity = () => {
-  const balanceInputValid = !listed.value || balanceInput.value?.checkValidity()
-  const baseTokenFormValid = baseTokenForm.value?.checkValidity()
-  return balanceInputValid && baseTokenFormValid
-}
-
-const navigateToDetail = (collection: string, id: string): void => {
-  showNotification(
-    `You will go to the detail in ${DETAIL_TIMEOUT / 1000} seconds`,
-  )
-  const go = () =>
-    router.push({
-      path: `/${urlPrefix.value}/gallery/${createTokenId(collection, id)}`,
-      query: { congratsNft: base.value.name },
-    })
-  setTimeout(go, DETAIL_TIMEOUT)
-}
-
-const submit = async (retryCount = 0): Promise<void> => {
-  if (!base.value.selectedCollection) {
-    throw ReferenceError('[MINT] Unable to mint without collection')
-  }
-  // check fields
-  if (!checkValidity()) {
-    return
-  }
-  // check balance
-  if (!!deposit.value && balanceOfToken.value < depositOfToken.value) {
-    balanceNotEnough.value = true
-    return
-  }
-
-  isTransactionLoading.value = true
-  transactionStatus.value = 'loader.ipfs'
-  const {
-    alreadyMinted,
-    id: collectionId,
-    lastIndexUsed,
-  } = base.value.selectedCollection
-  const nextId = Math.max(lastIndexUsed + 1, alreadyMinted + 1)
-
-  const { transaction, status, isLoading, blockNumber } = useTransaction()
-  watch([isLoading, status], () => {
-    isTransactionLoading.value = isLoading.value
-    if (Boolean(status.value)) {
-      transactionStatus.value = status.value
-    }
-  })
-  watch(blockNumber, (block) => {
-    if (block) {
-      navigateToDetail(collectionId, String(nextId))
-    }
-  })
-
-  try {
-    transaction({
-      interaction: Interaction.MINTNFT,
-      urlPrefix: usePrefix().urlPrefix.value,
-      token: {
-        ...base.value,
-        nsfw: nsfw.value,
-        price: price.value,
-        postfix: postfix.value,
-        tags: attributes.value,
-        royalty: royalty.value,
-        hasRoyalty: hasRoyalty.value,
-      },
-    })
-  } catch (e) {
-    if (e instanceof Error) {
-      stopTransactionLoader()
-
-      if (retryCount < 3) {
-        // retry
-        showNotification('Retrying to complete minting process.')
-        submit(retryCount + 1)
-      } else {
-        // finally fail
-        showNotification(e.toString(), notificationTypes.warn)
-      }
-    }
-  }
-}
-
-watch(
-  accountId,
-  async (value, oldVal) => {
-    if (shouldUpdate(value, oldVal)) {
-      await fetchCollections()
-      feesToken.value = await getFeesToken()
-    }
-  },
-  { immediate: true },
-)
-</script>
diff --git a/components/create/Confirm/ConfirmMintItem.vue b/components/create/Confirm/ConfirmMintItem.vue
new file mode 100644
index 0000000000..f7eb25b8e7
--- /dev/null
+++ b/components/create/Confirm/ConfirmMintItem.vue
@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <div class="is-flex is-justify-content-space-between">
+      <div class="is-flex pr-2">
+        <div>
+          <BasicImage
+            :src="avatar"
+            :alt="nft.name"
+            class="border image is-48x48" />
+        </div>
+        <div
+          class="is-flex is-flex-direction-column is-justify-content-space-between ml-4 limit-width">
+          <div class="has-text-color line-height-1 no-wrap is-clipped ellipsis">
+            {{ nft.name }}
+          </div>
+          <div class="line-height-1 no-wrap has-text-grey is-clipped ellipsis">
+            {{ label }}:
+          </div>
+        </div>
+      </div>
+      <div
+        class="is-flex is-align-items-end no-wrap has-text-grey line-height-1">
+        <template v-if="isNFT">
+          <template v-if="showPrice">
+            <CommonTokenMoney :value="price" />
+          </template>
+          <template v-else> Not Listed </template>
+        </template>
+        <template v-else>
+          {{ blockchain.text }}
+        </template>
+      </div>
+    </div>
+    <div v-if="isNFT" class="is-flex mt-4 is-align-items-center">
+      <div class="has-text-grey mr-2">
+        {{ $t('mint.nft.modal.intoCollection') }}
+      </div>
+      <NeoIcon icon="arrow-right-long" class="has-text-k-grey mr-4" />
+      <div>{{ nft.selectedCollection?.name }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BasicImage from '@/components/shared/view/BasicImage.vue'
+import { ExtendedInformation } from './MintConfirmModal.vue'
+import { NeoIcon } from '@kodadot1/brick'
+import { CreateComponent } from '@/composables/useCreate'
+import CommonTokenMoney from '@/components/shared/CommonTokenMoney.vue'
+
+const { $i18n } = useNuxtApp()
+
+const props = defineProps<{ nft: ExtendedInformation }>()
+const avatar = ref<string>()
+
+const isNFT = computed(() => props.nft.mintType === CreateComponent.NFT)
+const label = computed(() =>
+  isNFT.value
+    ? $i18n.t('mint.nft.modal.price')
+    : $i18n.t('mint.nft.modal.network'),
+)
+const price = computed(() => props.nft.price)
+const showPrice = computed(() => props.nft.listForSale)
+const blockchain = computed(() => props.nft.blockchain)
+
+watchEffect(() => {
+  const file = props.nft.file
+  if (file) {
+    const reader = new FileReader()
+    avatar.value = URL.createObjectURL(file)
+    reader.readAsText(file)
+  }
+})
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/styles/abstracts/variables';
+
+.limit-width {
+  max-width: 170px;
+}
+
+.ellipsis {
+  text-overflow: ellipsis;
+}
+
+.line-height-1 {
+  line-height: 1;
+}
+</style>
diff --git a/components/create/Confirm/MintConfirmModal.vue b/components/create/Confirm/MintConfirmModal.vue
new file mode 100644
index 0000000000..7c202aed00
--- /dev/null
+++ b/components/create/Confirm/MintConfirmModal.vue
@@ -0,0 +1,273 @@
+<template>
+  <NeoModal
+    :value="modelValue"
+    :can-cancel="['outside', 'escape']"
+    scroll="clip"
+    class="top"
+    max-height="calc(100vh - 180px)"
+    @close="onClose">
+    <div class="modal-width">
+      <header
+        class="modal-card-head is-flex is-justify-content-space-between is-align-items-center border-bottom">
+        <span class="modal-card-title is-size-6 has-text-weight-bold">
+          {{ $t('mint.nft.modal.action') }}
+        </span>
+        <NeoButton
+          class="py-1 px-2"
+          variant="text"
+          no-shadow
+          icon="xmark"
+          size="medium"
+          @click="onClose" />
+      </header>
+      <div v-if="isLogIn" class="px-6 pt-4">
+        <div
+          class="rounded border shade-border-color is-flex is-justify-content-start is-flex-grow-1 pl-3">
+          <IdentityItem
+            :label="$t('confirmPurchase.connectedWith')"
+            hide-identity-popover
+            disable-identity-link
+            :prefix="urlPrefix"
+            :account="accountId"
+            class="identity-name-font-weight-regular"
+            data-testid="item-creator" />
+        </div>
+      </div>
+      <div class="px-6 mt-4 has-text-weight-bold">
+        {{ title }}
+      </div>
+      <div class="py-4">
+        <ConfirmMintItem :nft="extendedInformation" class="px-6" />
+      </div>
+      <div class="px-6">
+        <PriceItem :nft="extendedInformation" />
+      </div>
+      <div class="py-5">
+        <div class="is-flex is-justify-content-space-between px-6">
+          <NeoButton
+            :label="btnLabel"
+            variant="k-accent"
+            no-shadow
+            :disabled="disabled"
+            class="is-flex is-flex-grow-1 btn-height"
+            @click="confirm" />
+        </div>
+        <div v-if="disabled" class="is-flex mt-2 is-justify-content-center">
+          <a class="mr-1 has-text-k-blue" @click="openRampModal"
+            >+ {{ $t('mint.nft.modal.addFunds') }}</a
+          >
+          {{ $t('mint.nft.modal.conjunction') }}
+          <a v-safe-href="teleportLink" class="ml-1 has-text-k-blue">{{
+            $t('mint.nft.modal.teleport')
+          }}</a>
+        </div>
+      </div>
+      <OnRampModal v-model="rampActive" @close="closeRampModal" />
+    </div>
+  </NeoModal>
+</template>
+
+<script setup lang="ts">
+import { NeoButton, NeoModal } from '@kodadot1/brick'
+import type { ChainProperties, Option } from '@kodadot1/static'
+import { BaseMintedCollection } from '@/components/base/types'
+import IdentityItem from '@/components/identity/IdentityItem.vue'
+import OnRampModal from '@/components/shared/OnRampModal.vue'
+import { CreateComponent } from '@/composables/useCreate'
+import { useFiatStore } from '@/stores/fiat'
+import { usePreferencesStore } from '@/stores/preferences'
+import { availablePrefixes } from '@/utils/chain'
+import { getTransitionFee } from '@/utils/transactionExecutor'
+import formatBalance, { calculateBalanceUsdValue } from '@/utils/format/balance'
+import { BASE_FEE } from '@/utils/support'
+import ConfirmMintItem from './ConfirmMintItem.vue'
+import PriceItem from './PriceItem.vue'
+
+export type NftInformation = {
+  file: Blob | null
+  selectedCollection?: BaseMintedCollection
+  name: string
+  listForSale?: boolean
+  price?: string
+  mintType: CreateComponent
+  paidToken: ChainProperties
+}
+
+export type ExtendedInformation = NftInformation & {
+  blockchain: Option
+  networkFee: number
+  existentialDeposit: number
+  kodadotFee: number
+  kodadotUSDFee: number
+  carbonlessFee: number
+  carbonlessUSDFee: number
+  totalFee: number
+  totalUSDFee: number
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    nftInformation: NftInformation
+  }>(),
+  {
+    modelValue: false,
+  },
+)
+
+const { isLogIn, accountId } = useAuth()
+const { urlPrefix } = usePrefix()
+const { $i18n } = useNuxtApp()
+const fiatStore = useFiatStore()
+const preferencesStore = usePreferencesStore()
+
+const {
+  balance,
+  metadataDeposit,
+  collectionDeposit,
+  existentialDeposit,
+  itemDeposit,
+} = useDeposit(urlPrefix)
+
+const emit = defineEmits(['confirm', 'update:modelValue'])
+
+const rampActive = ref(false)
+const networkFee = ref(0)
+
+const isNFT = computed(
+  () => props.nftInformation.mintType === CreateComponent.NFT,
+)
+const blockchain = computed(() =>
+  availablePrefixes().find((prefix) => prefix.value === urlPrefix.value),
+)
+const chainSymbol = computed(() => props.nftInformation.paidToken?.tokenSymbol)
+const decimals = computed(() => props.nftInformation.paidToken?.tokenDecimals)
+const tokenPrice = computed(() =>
+  Number(fiatStore.getCurrentTokenValue(chainSymbol.value) ?? 0),
+)
+const kodadotFee = computed(
+  () =>
+    ((preferencesStore.hasSupport ? BASE_FEE : 0) / tokenPrice.value) *
+    Math.pow(10, decimals.value),
+)
+const carbonlessFee = computed(
+  () =>
+    ((preferencesStore.hasCarbonOffset && isNFT.value ? BASE_FEE * 2 : 0) /
+      tokenPrice.value) *
+    Math.pow(10, decimals.value),
+)
+const totalFee = computed(() => {
+  return (
+    deposit.value + carbonlessFee.value + kodadotFee.value + networkFee.value
+  )
+})
+const deposit = computed(
+  () =>
+    metadataDeposit.value +
+    existentialDeposit.value +
+    (isNFT.value ? itemDeposit.value : collectionDeposit.value),
+)
+const totalUSDFee = computed(() =>
+  calculateBalanceUsdValue(totalFee.value * tokenPrice.value, decimals.value),
+)
+const title = computed(() =>
+  isNFT.value
+    ? $i18n.t('mint.nft.modal.title')
+    : $i18n.t('mint.collection.modal.title'),
+)
+const balanceIsEnough = computed(
+  () =>
+    parseFloat(formatBalance(totalFee.value, decimals.value, '')) <
+    parseFloat(balance.value),
+)
+const btnLabel = computed(() => {
+  if (!isLogIn.value) {
+    return $i18n.t('mint.nft.modal.login')
+  }
+  if (!balanceIsEnough.value) {
+    return $i18n.t('mint.nft.modal.notEnoughFund', [
+      chainSymbol.value,
+      blockchain.value?.text,
+    ])
+  }
+  return $i18n.t('mint.nft.modal.process')
+})
+const disabled = computed(() => !(balanceIsEnough.value && isLogIn.value))
+const teleportLink = computed(() => `/${urlPrefix.value}/teleport`)
+const extendedInformation = computed(() => ({
+  ...props.nftInformation,
+  networkFee: networkFee.value,
+  existentialDeposit: deposit.value,
+  kodadotFee: kodadotFee.value,
+  kodadotUSDFee: BASE_FEE,
+  carbonlessFee: carbonlessFee.value,
+  carbonlessUSDFee: BASE_FEE * 2,
+  totalFee: totalFee.value,
+  totalUSDFee: totalUSDFee.value,
+  blockchain: blockchain.value,
+}))
+
+const openRampModal = () => {
+  rampActive.value = true
+}
+
+const closeRampModal = () => {
+  rampActive.value = false
+}
+
+const onClose = () => {
+  emit('update:modelValue', false)
+}
+
+const confirm = () => {
+  emit('confirm')
+}
+
+const calculateNetworkFee = async () => {
+  networkFee.value = 0
+  const fee = await getTransitionFee(accountId.value, [''], decimals.value)
+  networkFee.value = Number(fee)
+}
+
+watch(
+  () => chainSymbol.value,
+  () => {
+    calculateNetworkFee()
+  },
+  {
+    immediate: true,
+  },
+)
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/abstracts/variables';
+
+.top {
+  z-index: 1000;
+}
+.shade-border-color {
+  @include ktheme() {
+    border-color: theme('k-shade');
+  }
+}
+
+.rounded {
+  border-radius: 10rem;
+}
+
+.modal-width {
+  width: 25rem;
+}
+.btn-height {
+  height: 3.5rem;
+}
+:deep(.identity-name-font-weight-regular) {
+  .identity-name {
+    font-weight: unset !important;
+  }
+}
+:deep(.o-modal__content) {
+  width: unset;
+}
+</style>
diff --git a/components/create/Confirm/PriceItem.vue b/components/create/Confirm/PriceItem.vue
new file mode 100644
index 0000000000..74ff573030
--- /dev/null
+++ b/components/create/Confirm/PriceItem.vue
@@ -0,0 +1,175 @@
+<template>
+  <div>
+    <div class="border-top pt-4 card-border-color is-size-7">
+      <template v-if="hasMultipleFees">
+        <div
+          class="has-text-grey mb-4 is-flex is-align-items-center is-cursor-pointer"
+          @click="toggle">
+          <div class="mr-1">Fee Breakdown</div>
+          <NeoIcon
+            class="transition"
+            :class="[rotate && 'overturn']"
+            icon="chevron-down" />
+        </div>
+      </template>
+    </div>
+    <div v-if="rotate" class="is-size-7">
+      <div
+        v-if="networkFee"
+        class="is-flex mb-2 is-align-items-center is-justify-content-space-between">
+        <div>{{ $t('mint.nft.modal.networkFee') }}</div>
+        <Money :value="networkFee" :unit-symbol="chainSymbol" inline />
+      </div>
+      <div
+        v-if="existentialDeposit"
+        class="has-text-grey is-flex mb-2 is-align-items-center is-justify-content-space-between">
+        <div>
+          {{ depositText }}
+          <NeoTooltip
+            position="top"
+            class="is-cursor-pointer"
+            multiline-width="14rem"
+            multiline
+            :label="depositTooltip">
+            <NeoIcon icon="circle-question" />
+          </NeoTooltip>
+        </div>
+        <Money :value="existentialDeposit" :unit-symbol="chainSymbol" inline />
+      </div>
+      <div
+        v-if="kodadotFee"
+        class="is-flex mb-2 has-text-grey is-align-items-center is-justify-content-space-between">
+        <div>
+          {{ $t('mint.nft.modal.kodadotFee') }}
+          <NeoTooltip
+            class="is-cursor-pointer"
+            position="top"
+            multiline-width="14rem"
+            :label="$t('mint.nft.modal.kodadotTooltip')"
+            multiline>
+            <NeoIcon icon="circle-question" />
+          </NeoTooltip>
+        </div>
+        <div>
+          {{ nft.kodadotUSDFee }} USD ~
+          <Money :value="kodadotFee" :unit-symbol="chainSymbol" inline />
+        </div>
+      </div>
+      <div
+        v-if="carbonlessFee"
+        class="is-flex mb-2 is-align-items-center is-justify-content-space-between">
+        <div class="is-flex k-green is-align-items-center">
+          {{ $t('mint.nft.modal.carbonless') }}
+          <svg
+            class="ml-2"
+            xmlns="http://www.w3.org/2000/svg"
+            width="14"
+            height="14"
+            viewBox="0 0 14 14"
+            fill="none">
+            <path
+              d="M10.4339 3.47798C4.17357 4.86917 2.71282 9.16099 1.26598 12.7572L2.58066 13.2163L3.24147 11.6164C3.57536 11.7347 3.92316 11.8251 4.17357 11.8251C11.8251 11.8251 13.9119 0 13.9119 0C13.2163 1.39119 8.34714 1.56509 4.86917 2.26068C1.39119 2.95628 0 5.91256 0 7.30375C0 8.69494 1.21729 9.91223 1.21729 9.91223C3.47798 3.47798 10.4339 3.47798 10.4339 3.47798Z"
+              fill="#04AF00" />
+          </svg>
+        </div>
+        <div class="has-text-k-grey">
+          {{ nft.carbonlessUSDFee }} USD ~
+          <Money :value="carbonlessFee" :unit-symbol="chainSymbol" inline />
+        </div>
+      </div>
+    </div>
+    <div
+      class="mt-4 pt-4 pb-5 border-top card-border-color is-flex is-justify-content-space-between">
+      <div class="">{{ $t('mint.nft.modal.totalFee') }}:</div>
+      <div class="is-flex is-align-items-end">
+        <div class="has-text-k-grey is-size-7 mr-2">
+          $ {{ nft.totalUSDFee }}
+        </div>
+        <Money :value="nft.totalFee" :unit-symbol="chainSymbol" inline />
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ExtendedInformation } from './MintConfirmModal.vue'
+import { NeoIcon, NeoTooltip } from '@kodadot1/brick'
+import Money from '@/components/shared/format/Money.vue'
+import formatBalance, {
+  checkInvalidBalanceFilter,
+  roundTo,
+} from '@/utils/format/balance'
+
+const { $i18n } = useNuxtApp()
+
+const props = defineProps<{ nft: ExtendedInformation }>()
+
+const rotate = ref(false)
+const isNFT = computed(() => props.nft.mintType === CreateComponent.NFT)
+const existentialDeposit = computed(() => props.nft.existentialDeposit)
+const depositText = computed(() =>
+  isNFT.value
+    ? $i18n.t('mint.nft.modal.existentialDeposit')
+    : $i18n.t('mint.collection.modal.existentialDeposit'),
+)
+const depositTooltip = computed(() =>
+  isNFT.value
+    ? $i18n.t('mint.nft.modal.depositTooltip', [
+        format(existentialDeposit.value),
+        chainSymbol.value,
+      ])
+    : $i18n.t('mint.collection.modal.depositTooltip', [
+        format(existentialDeposit.value),
+        chainSymbol.value,
+      ]),
+)
+const networkFee = computed(() => props.nft.networkFee)
+const kodadotFee = computed(() => props.nft.kodadotFee)
+const carbonlessFee = computed(() => props.nft.carbonlessFee)
+const chainSymbol = computed(() => props.nft.paidToken.tokenSymbol)
+const tokenDecimals = computed(() => props.nft.paidToken.tokenDecimals)
+
+const hasMultipleFees = computed(
+  () =>
+    [
+      networkFee.value,
+      existentialDeposit.value,
+      kodadotFee.value,
+      carbonlessFee.value,
+    ].filter((e) => !!e).length > 0,
+)
+
+const format = (value: number) => {
+  return roundTo(
+    formatBalance(checkInvalidBalanceFilter(value), tokenDecimals.value, ''),
+    4,
+  )
+}
+
+watch(
+  hasMultipleFees,
+  () => {
+    rotate.value = !hasMultipleFees.value
+  },
+  { immediate: true },
+)
+
+const toggle = () => {
+  rotate.value = !rotate.value
+}
+</script>
+<style lang="scss" scoped>
+@import '@/assets/styles/abstracts/variables';
+.k-green {
+  @include ktheme {
+    color: theme('k-green');
+    background: none;
+  }
+}
+
+.transition {
+  transition: transform 0.3s;
+}
+.overturn {
+  transform: rotate(-180deg);
+}
+</style>
diff --git a/components/create/CreateCollection.vue b/components/create/CreateCollection.vue
index e662839dcb..e0bc7150c8 100644
--- a/components/create/CreateCollection.vue
+++ b/components/create/CreateCollection.vue
@@ -1,10 +1,14 @@
 <template>
   <div class="is-centered" :class="{ columns: classColumn }">
     <Loader v-model="isLoading" :status="status" />
+    <MintConfirmModal
+      v-model="modalShowStatus"
+      :nft-information="collectionInformation"
+      @confirm="createCollection" />
     <form
       class="is-half"
       :class="{ column: classColumn }"
-      @submit.prevent="createCollection">
+      @submit.prevent="showConfirm">
       <h1 class="title is-size-3 mb-7">
         {{ $t('mint.collection.create') }}
       </h1>
@@ -124,39 +128,33 @@
       <hr class="my-6" />
 
       <!-- create collection button -->
-      <NeoField>
-        <div>
-          <NeoButton
-            expanded
-            :label="submitButtonLabel"
-            native-type="submit"
-            size="medium"
-            class="is-size-6"
-            data-testid="collection-create"
-            :loading="isLoading"
-            :disabled="!canDeposit" />
-
-          <div class="p-4 is-flex">
-            <NeoIcon icon="circle-info" size="medium" class="mr-4" />
-            <p class="is-size-7">
-              <span
-                v-dompurify-html="
-                  $t('mint.requiredDeposit', [
-                    `${totalCollectionDeposit} ${chainSymbol}`,
-                    'collection',
-                  ])
-                " />
-              <a
-                href="https://hello.kodadot.xyz/multi-chain/fees"
-                target="_blank"
-                class="has-text-link"
-                rel="nofollow noopener noreferrer">
-                {{ $t('helper.learnMore') }}
-              </a>
-            </p>
-          </div>
-        </div>
-      </NeoField>
+      <NeoButton
+        class="is-size-6"
+        expanded
+        :label="$t('mint.collection.submit')"
+        native-type="submit"
+        size="medium"
+        data-testid="collection-create"
+        :loading="isLoading" />
+      <div class="p-4 is-flex">
+        <NeoIcon icon="circle-info" size="medium" class="mr-4" />
+        <p class="is-size-7">
+          <span
+            v-dompurify-html="
+              $t('mint.requiredDeposit', [
+                `${totalCollectionDeposit} ${chainSymbol}`,
+                'collection',
+              ])
+            " />
+          <a
+            href="https://hello.kodadot.xyz/multi-chain/fees"
+            target="_blank"
+            class="has-text-link"
+            rel="nofollow noopener noreferrer">
+            {{ $t('helper.learnMore') }}
+          </a>
+        </p>
+      </div>
     </form>
   </div>
 </template>
@@ -183,6 +181,7 @@ import { availablePrefixes } from '@/utils/chain'
 import { Interaction } from '@kodadot1/minimark/v1'
 import { notificationTypes, showNotification } from '@/utils/notification'
 import { makeSymbol } from '@kodadot1/minimark/shared'
+import MintConfirmModal from '@/components/create/Confirm/MintConfirmModal.vue'
 
 // props
 withDefaults(
@@ -198,6 +197,7 @@ withDefaults(
 const { transaction, status, isLoading } = useTransaction()
 const { urlPrefix, setUrlPrefix } = usePrefix()
 const { $consola } = useNuxtApp()
+const { isLogIn } = useAuth()
 
 // form state
 const logo = ref<File | null>(null)
@@ -206,27 +206,19 @@ const description = ref('')
 const unlimited = ref(true)
 const max = ref(1)
 const symbol = ref('')
-const { isLogIn } = useAuth()
+const modalShowStatus = ref(false)
+
 const menus = availablePrefixes()
-const { $i18n } = useNuxtApp()
 
 const chainByPrefix = menus.find((menu) => menu.value === urlPrefix.value)
 const selectBlockchain = ref(chainByPrefix?.value || menus[0].value)
 
-const submitButtonLabel = computed(() => {
-  return !isLogIn.value
-    ? $i18n.t('mint.nft.connect')
-    : canDeposit.value
-    ? $i18n.t('mint.collection.create')
-    : $i18n.t('confirmPurchase.notEnoughFuns')
-})
-
 const currentChain = computed(() => {
   return selectBlockchain.value as Prefix
 })
 
 const { isAssetHub, isBasilisk, isRemark } = useIsChain(currentChain)
-const { balance, totalCollectionDeposit, chainSymbol } =
+const { balance, totalCollectionDeposit, chainSymbol, chain } =
   useDeposit(currentChain)
 
 // balance state
@@ -237,8 +229,19 @@ const canDeposit = computed(() => {
   )
 })
 
+const collectionInformation = computed(() => ({
+  file: logo.value,
+  name: name.value,
+  paidToken: chain.value,
+  mintType: CreateComponent.Collection,
+}))
+
 watchEffect(() => setUrlPrefix(currentChain.value as Prefix))
 
+const showConfirm = () => {
+  modalShowStatus.value = true
+}
+
 const createCollection = async () => {
   let collection: BaseCollectionType = {
     file: logo.value,
@@ -269,6 +272,7 @@ const createCollection = async () => {
       notificationTypes.info,
     )
     isLoading.value = true
+    modalShowStatus.value = false
 
     await transaction(
       {
diff --git a/components/create/CreateNft.vue b/components/create/CreateNft.vue
index c099de070f..daa27b1734 100644
--- a/components/create/CreateNft.vue
+++ b/components/create/CreateNft.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="is-centered columns">
     <Loader v-model="isLoading" :status="status" />
-    <form class="is-half column" @submit.prevent="createNft">
+    <MintConfirmModal
+      v-model="modalShowStatus"
+      :nft-information="nftInformation"
+      @confirm="createNft" />
+    <form class="is-half column" @submit.prevent="toggleConfirm">
       <CreateNftPreview
         :name="form.name"
         :collection="selectedCollection?.name"
@@ -167,38 +171,32 @@
       <hr class="my-6" />
 
       <!-- create nft button -->
-      <NeoField>
-        <div>
-          <NeoButton
-            expanded
-            :label="submitButtonLabel"
-            native-type="submit"
-            size="medium"
-            class="is-size-6"
-            :loading="isLoading"
-            :disabled="!canDeposit" />
-
-          <div class="p-4 is-flex">
-            <NeoIcon icon="circle-info" size="medium" class="mr-4" />
-            <p class="is-size-7">
-              <span
-                v-dompurify-html="
-                  $t('mint.requiredDeposit', [
-                    `${totalItemDeposit} ${chainSymbol}`,
-                    'NFT',
-                  ])
-                " />
-              <a
-                href="https://hello.kodadot.xyz/multi-chain/fees"
-                target="_blank"
-                class="has-text-link"
-                rel="nofollow noopener noreferrer">
-                {{ $t('helper.learnMore') }}
-              </a>
-            </p>
-          </div>
-        </div>
-      </NeoField>
+      <NeoButton
+        expanded
+        :label="$t('mint.nft.create')"
+        class="is-size-6"
+        native-type="submit"
+        size="medium"
+        :loading="isLoading" />
+      <div class="p-4 is-flex">
+        <NeoIcon icon="circle-info" size="medium" class="mr-4" />
+        <p class="is-size-7">
+          <span
+            v-dompurify-html="
+              $t('mint.requiredDeposit', [
+                `${totalItemDeposit} ${chainSymbol}`,
+                'NFT',
+              ])
+            " />
+          <a
+            href="https://hello.kodadot.xyz/multi-chain/fees"
+            target="_blank"
+            class="has-text-link"
+            rel="nofollow noopener noreferrer">
+            {{ $t('helper.learnMore') }}
+          </a>
+        </p>
+      </div>
     </form>
   </div>
 </template>
@@ -220,6 +218,7 @@ import BasicSwitch from '@/components/shared/form/BasicSwitch.vue'
 import CustomAttributeInput from '@/components/rmrk/Create/CustomAttributeInput.vue'
 import RoyaltyForm from '@/components/bsx/Create/RoyaltyForm.vue'
 import CreateNftPreview from './CreateNftPreview.vue'
+import MintConfirmModal from '@/components/create/Confirm/MintConfirmModal.vue'
 import resolveQueryPath from '@/utils/queryPathResolver'
 import { availablePrefixes } from '@/utils/chain'
 import { notificationTypes, showNotification } from '@/utils/notification'
@@ -254,24 +253,26 @@ const form = reactive({
     address: accountId.value,
   },
 })
-const { isLogIn } = useAuth()
-const { $i18n } = useNuxtApp()
+
 // select collections
 const selectedCollection = ref()
 
-const depositLabel = computed(() =>
-  canDeposit.value
-    ? $i18n.t('mint.nft.create')
-    : $i18n.t('confirmPurchase.notEnoughFuns'),
-)
-const submitButtonLabel = computed(() => {
-  return !isLogIn.value ? $i18n.t('mint.nft.connect') : depositLabel.value
-})
-
 const onCollectionSelected = (collection) => {
   selectedCollection.value = collection
 }
 
+const modalShowStatus = ref(false)
+
+const nftInformation = computed(() => ({
+  file: form.file,
+  name: form.name,
+  selectedCollection: selectedCollection.value,
+  price: balanceFrom(form.salePrice, decimals.value),
+  listForSale: form.sale,
+  paidToken: chain.value,
+  mintType: CreateComponent.NFT,
+}))
+
 const imagePreview = computed(() => {
   if (form.file) {
     return URL?.createObjectURL(form.file)
@@ -299,13 +300,8 @@ watch(currentChain, () => {
 })
 
 // deposit stuff
-const { balance, totalItemDeposit, chainSymbol } = useDeposit(currentChain)
-const canDeposit = computed(() => {
-  return (
-    isLogIn.value &&
-    parseFloat(balance.value) >= parseFloat(totalItemDeposit.value)
-  )
-})
+const { balance, totalItemDeposit, chainSymbol, chain } =
+  useDeposit(currentChain)
 
 // create nft
 const transactionStatus = ref<
@@ -314,8 +310,13 @@ const transactionStatus = ref<
 const createdItems = ref()
 const mintedBlockNumber = ref()
 
+const toggleConfirm = () => {
+  modalShowStatus.value = !modalShowStatus.value
+}
+
 const createNft = async () => {
   try {
+    toggleConfirm()
     const minted = (await transaction(
       {
         interaction: Interaction.MINTNFT,
diff --git a/components/rmrk/Create/CreateToken.vue b/components/rmrk/Create/CreateToken.vue
deleted file mode 100644
index 2aae737af2..0000000000
--- a/components/rmrk/Create/CreateToken.vue
+++ /dev/null
@@ -1,380 +0,0 @@
-<template>
-  <div>
-    <Loader v-model="isLoading" :status="status" />
-    <BaseTokenForm
-      ref="baseTokenForm"
-      v-model="base"
-      :collections="collections"
-      :show-explainer-text="showExplainerText">
-      <template #main>
-        <BasicSwitch key="nsfw" v-model="nsfw" label="mint.nfsw" />
-        <BasicSwitch key="listed" v-model="listed" label="mint.listForSale" />
-
-        <BalanceInput
-          v-if="listed"
-          ref="balanceInput"
-          key="price"
-          label="Price"
-          expanded
-          required
-          :has-to-larger-than-zero="listed"
-          :step="0.1"
-          class="mb-3"
-          @input="updatePrice" />
-
-        <div v-show="base.selectedCollection" key="attributes">
-          <CustomAttributeInput
-            v-model="tags"
-            :max="10"
-            class="mb-3"
-            visible="collapse.collection.attributes.show"
-            hidden="collapse.collection.attributes.hide" />
-        </div>
-
-        <NeoMessage
-          v-if="hasPrice"
-          key="message"
-          type="is-primary"
-          has-icon
-          icon="exclamation-triangle">
-          {{ $t('warning.newTransactionWhilePriceSet') }}
-        </NeoMessage>
-
-        <template v-if="version === '2.0.0'">
-          <BasicSwitch
-            key="hasRoyalty"
-            v-model="hasRoyalty"
-            label="mint.listWithRoyalty" />
-          <RoyaltyForm v-if="hasRoyalty" key="royalty" v-model="royalty" />
-        </template>
-      </template>
-      <template #footer>
-        <NeoField key="advanced">
-          <CollapseWrapper
-            v-if="base.copies > 1"
-            visible="mint.expert.show"
-            hidden="mint.expert.hide"
-            class="mt-3">
-            <BasicSwitch
-              v-model="postfix"
-              class="mt-3"
-              label="mint.expert.postfix" />
-          </CollapseWrapper>
-        </NeoField>
-        <NeoField
-          v-if="isLogIn"
-          key="submit"
-          variant="danger"
-          :message="balanceNotEnoughMessage">
-          <SubmitButton
-            expanded
-            label="mint.submit"
-            :loading="isLoading"
-            @click="submit()" />
-        </NeoField>
-      </template>
-    </BaseTokenForm>
-  </div>
-</template>
-
-<script setup lang="ts">
-import collectionForMint from '@/queries/subsquid/rmrk/collectionForMint.graphql'
-import { DETAIL_TIMEOUT } from '@/utils/constants'
-import {
-  notificationTypes,
-  showNotification,
-  warningMessage,
-} from '@/utils/notification'
-import shouldUpdate from '@/utils/shouldUpdate'
-import { CreatedNFT, Interaction } from '@kodadot1/minimark/v1'
-import { CreatedNFT as CreatedNFTV2 } from '@kodadot1/minimark/v2'
-import { Attribute } from '@kodadot1/minimark/common'
-import { formatBalance } from '@polkadot/util'
-import { unwrapSafe } from '@/utils/uniquery'
-import { toNFTId } from '../service/scheme'
-import { Ref as RefType } from 'vue'
-import { Royalty } from '@/utils/royalty'
-import { NeoField, NeoMessage } from '@kodadot1/brick'
-import CustomAttributeInput from '@/components/rmrk/Create/CustomAttributeInput.vue'
-import CollapseWrapper from '@/components/shared/collapse/CollapseWrapper.vue'
-import Loader from '@/components/shared/Loader.vue'
-import BalanceInput from '@/components/shared/BalanceInput.vue'
-import BaseTokenForm from '@/components/base/BaseTokenForm.vue'
-import BasicSwitch from '@/components/shared/form/BasicSwitch.vue'
-import SubmitButton from '@/components/base/SubmitButton.vue'
-import RoyaltyForm from '@/components/bsx/Create/RoyaltyForm.vue'
-
-import type { BaseTokenType } from '@/components/base/types'
-import type {
-  MintedCollectionKusama,
-  TokenToList,
-} from '@/composables/transaction/types'
-
-const { isLoading, status } = useMetaTransaction()
-const { $i18n } = useNuxtApp()
-const { accountId, isLogIn, balance } = useAuth()
-const { client } = usePrefix()
-const { urlPrefix } = usePrefix()
-const { unit, decimals } = useChain()
-const router = useRouter()
-
-const base = ref({
-  name: '',
-  file: null,
-  description: '',
-  selectedCollection: null,
-  copies: 1,
-  secondFile: null,
-} as BaseTokenType<MintedCollectionKusama>)
-
-const collections = ref([] as MintedCollectionKusama[])
-const tags = ref([] as Attribute[])
-const price = ref(0 as string | number)
-const nsfw = ref(false)
-const listed = ref(true)
-const postfix = ref(true)
-const balanceNotEnough = ref(false)
-
-const hasRoyalty = ref(true)
-const royalty = ref({
-  amount: 0.15,
-  address: '',
-} as Royalty)
-
-const balanceInput = ref()
-const baseTokenForm = ref()
-
-defineProps({
-  showExplainerText: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const version = computed(() => {
-  return useRmrkVersion().version.value
-})
-
-const hasPrice = computed(() => {
-  return Number(price.value)
-})
-
-const balanceNotEnoughMessage = computed(() => {
-  return balanceNotEnough.value ? $i18n.t('tooltip.notEnoughBalance') : ''
-})
-
-const updatePrice = (value: string) => {
-  price.value = value
-}
-
-const fetchCollections = async () => {
-  const { data: _collections } = await useAsyncQuery({
-    query: collectionForMint,
-    variables: {
-      account: accountId.value,
-    },
-    clientId: client.value,
-  })
-  const { collectionEntities } = _collections.value
-
-  collections.value = unwrapSafe(collectionEntities)
-    ?.map((ce: any) => ({
-      ...ce,
-      alreadyMinted: ce.nfts?.length,
-      lastIndexUsed: Number(ce.nfts?.at(0)?.index || 0),
-      totalCount: ce.nfts?.filter((nft) => !nft.burned).length,
-    }))
-    .filter(
-      (ce: MintedCollectionKusama) =>
-        (ce.max || Infinity) - ce.alreadyMinted > 0,
-    )
-}
-
-const checkValidity = () => {
-  const balanceInputValid = !listed.value || balanceInput.value.checkValidity()
-  const baseTokenFormValid = baseTokenForm.value.checkValidity()
-  return balanceInputValid && baseTokenFormValid
-}
-
-const submit = async () => {
-  if (!base.value.selectedCollection) {
-    throw ReferenceError('[MINT] Unable to mint without collection')
-  }
-
-  if (!checkValidity()) {
-    return
-  }
-
-  if (parseFloat(balance.value) === 0) {
-    balanceNotEnough.value = true
-    return
-  }
-
-  isLoading.value = true
-  status.value = 'loader.ipfs'
-  const {
-    transaction,
-    status: transactionStatus,
-    isLoading: transactionIsLoading,
-    blockNumber,
-  } = useTransaction()
-
-  watch([transactionIsLoading, transactionStatus], () => {
-    isLoading.value = transactionIsLoading.value
-    if (transactionStatus.value) {
-      status.value = transactionStatus.value
-    }
-  })
-
-  try {
-    const { createdNFTs } = (await transaction({
-      interaction: Interaction.MINTNFT,
-      urlPrefix: urlPrefix.value,
-      token: {
-        ...base.value,
-        copies: Number(base.value.copies),
-        tags: tags.value,
-        nsfw: nsfw.value,
-        postfix: postfix.value,
-        price: price.toString(),
-        royalty: royalty.value,
-        hasRoyalty: hasRoyalty.value,
-      },
-    })) as {
-      createdNFTs: RefType<CreatedNFT[]>
-    }
-
-    watch([blockNumber, createdNFTs], () => {
-      if (blockNumber.value && createdNFTs.value) {
-        const isJustNftMint = !listed.value
-        if (isJustNftMint) {
-          setTimeout(
-            () =>
-              handleCreatedNftsRedirect(
-                createdNFTs.value,
-                blockNumber.value as string,
-              ),
-            300,
-          )
-        } else if (hasPrice.value) {
-          setTimeout(
-            () => listForSale(createdNFTs.value, blockNumber.value as string),
-            300,
-          )
-        }
-      }
-    })
-  } catch (e) {
-    if (e instanceof Error) {
-      warningMessage(e)
-    }
-  }
-}
-
-const listForSale = async (
-  createdNFT: CreatedNFT[] | CreatedNFTV2[],
-  originalBlockNumber: string,
-) => {
-  try {
-    const {
-      transaction,
-      status: transactionStatus,
-      isLoading: transactionIsLoading,
-      blockNumber,
-    } = useTransaction()
-
-    watch([transactionIsLoading, transactionStatus], () => {
-      isLoading.value = transactionIsLoading.value
-      if (transactionStatus.value) {
-        status.value = transactionStatus.value
-      }
-    })
-
-    const balance = formatBalance(price.value, {
-      decimals: decimals.value,
-      withUnit: unit.value,
-    })
-
-    if (!createdNFT) {
-      showNotification('Can not list empty NFTs', notificationTypes.warn)
-      return
-    }
-
-    showNotification(`[💰] Listing NFT to sale for ${balance}`)
-    const list: TokenToList[] = createdNFT.map((nft) => ({
-      price: price.value.toString(),
-      nftId: toNFTId(nft, originalBlockNumber),
-    }))
-
-    isLoading.value = true
-    transaction({
-      interaction: Interaction.LIST,
-      urlPrefix: urlPrefix.value,
-      token: list,
-
-      successMessage: (blockNumber) =>
-        `[💰] Listed ${base.value.name} for ${balance} in block ${blockNumber}`,
-    })
-
-    watch([transactionIsLoading, blockNumber], () => {
-      if (!transactionIsLoading.value && blockNumber.value) {
-        handleCreatedNftsRedirect(createdNFT, originalBlockNumber)
-      }
-    })
-  } catch (e) {
-    showNotification((e as Error).message, notificationTypes.warn)
-  }
-}
-
-const handleCreatedNftsRedirect = (
-  createdNFT: CreatedNFT[] | CreatedNFTV2[],
-  originalBlockNumber: string,
-) => {
-  const nfts = createdNFT.map((nft) => toNFTId(nft, originalBlockNumber))
-
-  const isSingle = nfts.length === 1
-
-  navigateToDetail({
-    pageId: isSingle ? nfts[0] : (base.value.selectedCollection?.id as string),
-    nftName: base.value.name,
-    toCollectionPage: !isSingle,
-  })
-}
-
-const navigateToDetail = ({
-  pageId,
-  nftName,
-  toCollectionPage,
-}: {
-  pageId: string
-  nftName: string
-  toCollectionPage: boolean
-}) => {
-  showNotification(
-    `You will go to the detail in ${DETAIL_TIMEOUT / 1000} seconds`,
-  )
-  const subPath = toCollectionPage ? 'collection' : 'gallery'
-  const go = () => {
-    const navigateTo = {
-      path: `/${urlPrefix.value}/${subPath}/${pageId}`,
-    }
-    if (!toCollectionPage) {
-      navigateTo.query = { congratsNft: nftName }
-    }
-    return router.push(navigateTo)
-  }
-  setTimeout(go, DETAIL_TIMEOUT)
-}
-
-watch(
-  accountId,
-  (value, oldVal) => {
-    if (shouldUpdate(value, oldVal)) {
-      fetchCollections()
-    }
-  },
-  {
-    immediate: true,
-  },
-)
-</script>
diff --git a/components/shared/OnRampModal.vue b/components/shared/OnRampModal.vue
index 9644c2df14..127e7b1d84 100644
--- a/components/shared/OnRampModal.vue
+++ b/components/shared/OnRampModal.vue
@@ -78,13 +78,13 @@ enum Provider {
 
 const emit = defineEmits(['close'])
 const props = defineProps<{
-  value: boolean
+  modelValue: boolean
 }>()
 
 const { accountId } = useAuth()
 const { $i18n } = useNuxtApp()
 
-const isModalActive = useVModel(props, 'value')
+const isModalActive = useVModel(props, 'modelValue')
 const agreeTos = ref<boolean>(false)
 
 const { init: initTransak } = useTransak()
@@ -135,6 +135,7 @@ const onSelect = (provider: Provider) => {
       break
     case Provider.RAMP:
       rampInit()
+      break
     default:
       break
   }
diff --git a/components/stmn/Create/CreateToken.vue b/components/stmn/Create/CreateToken.vue
deleted file mode 100644
index 5e381ea0bf..0000000000
--- a/components/stmn/Create/CreateToken.vue
+++ /dev/null
@@ -1,228 +0,0 @@
-<template>
-  <div>
-    <Loader v-model="isLoading" :status="status" />
-    <BaseTokenForm
-      ref="baseTokenForm"
-      v-model="base"
-      :collections="collections"
-      :show-explainer-text="showExplainerText">
-      <template #main>
-        <BasicSwitch key="nsfw" v-model="nsfw" label="mint.nfsw" />
-        <BasicSwitch key="listed" v-model="listed" label="mint.listForSale" />
-
-        <BalanceInput
-          v-if="listed"
-          ref="balanceInput"
-          key="price"
-          label="Price"
-          expanded
-          required
-          :has-to-larger-than-zero="listed"
-          :step="0.1"
-          class="mb-3"
-          @input="updatePrice" />
-
-        <div v-show="base.selectedCollection" key="attributes">
-          <CustomAttributeInput
-            v-model="tags"
-            :max="10"
-            class="mb-3"
-            visible="collapse.collection.attributes.show"
-            hidden="collapse.collection.attributes.hide" />
-        </div>
-      </template>
-      <template #footer>
-        <NeoField key="advanced">
-          <CollapseWrapper
-            v-if="base.copies > 1"
-            visible="mint.expert.show"
-            hidden="mint.expert.hide"
-            class="mt-3">
-            <BasicSwitch
-              v-model="postfix"
-              class="mt-3"
-              label="mint.expert.postfix" />
-          </CollapseWrapper>
-        </NeoField>
-        <NeoField
-          v-if="isLogIn"
-          key="submit"
-          variant="danger"
-          :message="balanceNotEnoughMessage">
-          <SubmitButton
-            expanded
-            label="mint.submit"
-            :loading="isLoading"
-            @click="submit()" />
-        </NeoField>
-      </template>
-    </BaseTokenForm>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { Interaction } from '@kodadot1/minimark/v1'
-import { showNotification, warningMessage } from '@/utils/notification'
-import { NeoField } from '@kodadot1/brick'
-import { unwrapSafe } from '@/utils/uniquery'
-import { DETAIL_TIMEOUT } from '@/utils/constants'
-import { BaseMintedCollection, BaseTokenType } from '@/components/base/types'
-import { Max } from '@/composables/transaction/types'
-import { Attribute } from '@kodadot1/minimark/common'
-import BasicSwitch from '@/components/shared/form/BasicSwitch.vue'
-import CustomAttributeInput from '@/components/rmrk/Create/CustomAttributeInput.vue'
-import CollapseWrapper from '@/components/shared/collapse/CollapseWrapper.vue'
-import SubmitButton from '@/components/base/SubmitButton.vue'
-
-const { isLoading, status } = useLoader()
-const { $i18n } = useNuxtApp()
-const router = useRouter()
-const { urlPrefix } = usePrefix()
-const { balance, isLogIn, accountId } = useAuth()
-
-withDefaults(
-  defineProps<{
-    showExplainerText?: boolean
-  }>(),
-  {
-    showExplainerText: false,
-  },
-)
-
-const base = ref<BaseTokenType>({
-  name: '',
-  file: null,
-  description: '',
-  selectedCollection: null,
-  copies: 1,
-  secondFile: null,
-})
-
-const collections = ref<(BaseMintedCollection & Max)[]>([])
-const tags = ref<Attribute[]>([])
-const price = ref(0)
-const nsfw = ref(false)
-const listed = ref(true)
-const postfix = ref(true)
-const balanceNotEnough = ref(false)
-
-//TODO: implement royalty in mintTokenStatemine
-
-// const hasRoyalty = ref(true)
-// const royalty = ref({ amount: 0.15, address: '' })
-
-const balanceInput = ref()
-const baseTokenForm = ref()
-
-const updatePrice = (value) => {
-  price.value = value
-}
-
-const balanceNotEnoughMessage = computed(() => {
-  return balanceNotEnough.value ? $i18n.t('tooltip.notEnoughBalance') : ''
-})
-
-const { data: collectionsData, refetch: refetchCollections } = useGraphql({
-  queryName: 'collectionForMint',
-  variables: { account: accountId.value },
-})
-
-watch(collectionsData, (newData) => {
-  if (newData) {
-    collections.value = unwrapSafe(newData.collectionEntities)
-      ?.map((ce) => ({
-        ...ce,
-        alreadyMinted: ce.nfts?.length,
-        lastIndexUsed: Math.max(...ce.nfts.map((nft) => nft.index)),
-        totalCount: ce.nfts?.filter((nft) => !nft.burned).length,
-      }))
-      .filter((ce) => (ce.max || Infinity) - ce.alreadyMinted > 0)
-  }
-})
-
-watch(accountId, (newValue, oldValue) => {
-  if (newValue !== oldValue) {
-    refetchCollections({ account: newValue })
-  }
-})
-
-const checkValidity = () => {
-  const balanceInputValid = !listed.value || balanceInput.value.checkValidity()
-  const baseTokenFormValid = baseTokenForm.value.checkValidity()
-  const validCopies = base.value.copies > 0
-  return balanceInputValid && baseTokenFormValid && validCopies
-}
-
-const submit = () => {
-  if (!base.value.selectedCollection) {
-    throw ReferenceError('[MINT] Unable to mint without collection')
-  }
-  if (!base.value.selectedCollection || !checkValidity()) {
-    return
-  }
-
-  if (parseFloat(balance.value) === 0) {
-    balanceNotEnough.value = true
-    return
-  }
-
-  isLoading.value = true
-  status.value = 'loader.ipfs'
-
-  const {
-    transaction,
-    status: transStatus,
-    isLoading: transLoading,
-    blockNumber,
-  } = useTransaction()
-
-  watch([transLoading, transStatus], () => {
-    isLoading.value = transLoading.value
-    status.value = transStatus.value
-  })
-
-  watch(blockNumber, (block) => {
-    if (block) {
-      navigateToDetail()
-    }
-  })
-
-  try {
-    transaction({
-      interaction: Interaction.MINTNFT,
-      urlPrefix: urlPrefix.value,
-      token: {
-        ...base.value,
-        copies: Number(base.value.copies),
-        tags: tags.value,
-        nsfw: nsfw.value,
-        postfix: postfix.value,
-        price: price.value.toString(),
-        // royalty: royalty.value,
-        // hasRoyalty: hasRoyalty.value,
-      },
-    })
-  } catch (e) {
-    warningMessage(e)
-  }
-}
-
-const navigateToDetail = () => {
-  showNotification(
-    `You will go to the detail in ${DETAIL_TIMEOUT / 1000} seconds`,
-  )
-
-  const selectedCollection = base.value
-    .selectedCollection as BaseMintedCollection
-
-  const nftIndex = Math.max(selectedCollection.lastIndexUsed, 0) + 1
-  const nftId = `${selectedCollection.id}-${nftIndex}`
-  const go = () => {
-    router.push({
-      path: `/${urlPrefix.value}/gallery/${nftId}`,
-      query: { congratsNft: base.value.name },
-    })
-  }
-  setTimeout(go, DETAIL_TIMEOUT)
-}
-</script>
diff --git a/composables/useDeposit.ts b/composables/useDeposit.ts
index 6c64810e89..6ddd8da70e 100644
--- a/composables/useDeposit.ts
+++ b/composables/useDeposit.ts
@@ -9,6 +9,7 @@ import {
   getKusamaAssetId,
 } from '@/utils/api/bsx/query'
 import format from '@/utils/format/balance'
+import { chainPropListOf } from '@/utils/config/chain.config'
 
 export default function (prefix: ComputedRef<Prefix>) {
   const { apiInstanceByPrefix } = useApi()
@@ -27,6 +28,10 @@ export default function (prefix: ComputedRef<Prefix>) {
 
   const chainSymbol = ref('')
 
+  const chain = computed(() =>
+    chainPropListOf(chainSymbol.value.toLowerCase() as Prefix),
+  )
+
   watchEffect(async () => {
     if (prefix.value) {
       const api = await apiInstanceByPrefix(prefix.value)
@@ -113,5 +118,6 @@ export default function (prefix: ComputedRef<Prefix>) {
     totalCollectionDeposit,
     totalItemDeposit,
     chainSymbol,
+    chain,
   }
 }
diff --git a/libs/ui/src/components/NeoModal/NeoModal.scss b/libs/ui/src/components/NeoModal/NeoModal.scss
index f4b93f5f95..b30afb3607 100644
--- a/libs/ui/src/components/NeoModal/NeoModal.scss
+++ b/libs/ui/src/components/NeoModal/NeoModal.scss
@@ -11,6 +11,7 @@ $modal-content-border-radius: 0;
 
 
 .neo-modal {
+  
   .o-modal__content {
     width: auto !important;
     max-height: var(--max-height);
@@ -29,6 +30,10 @@ $modal-content-border-radius: 0;
     background-color: rgba(0, 0, 0, 0.17);
   }
 
+  .modal-card-head {
+    background: unset;
+  }
+
   .card {
     border-radius: 0;
   }
diff --git a/libs/ui/src/components/NeoModalHead/NeoModalHead.vue b/libs/ui/src/components/NeoModalHead/NeoModalHead.vue
index 5d5677860a..aea4f72e70 100644
--- a/libs/ui/src/components/NeoModalHead/NeoModalHead.vue
+++ b/libs/ui/src/components/NeoModalHead/NeoModalHead.vue
@@ -33,6 +33,6 @@ const isMobile = ref(window.innerWidth < 1024)
 const emit = defineEmits(['close'])
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import './NeoModalHead.scss';
 </style>
diff --git a/locales/en.json b/locales/en.json
index 4c3287d6cc..7fe36ff32b 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -500,7 +500,13 @@
         "message": "Name of your collection. It will be visible in the gallery"
       },
       "create": "Create New Collection",
-      "drop": "Drop collection logo here or click to upload or simple paste the image from the clipboard. We support various media types (PNG, JPEG, GIF, SVG)"
+      "drop": "Drop collection logo here or click to upload or simple paste the image from the clipboard. We support various media types (PNG, JPEG, GIF, SVG)",
+      "submit": "Create Collection",
+      "modal": {
+        "title": "Mint Collection",
+        "existentialDeposit": "Collection Existential Deposit",
+        "depositTooltip": "A deposit of {0} {1} is required to create a collection. Please note, this initial deposit is refundable. "
+      }
     },
     "nft": {
       "art": {
@@ -552,7 +558,27 @@
       "creativeDrop": "Drop your NFT here, click to upload or paste the image from the clipboard. AI model limits our support for Creative Minting to only JPEG, PNG, GIF or BMP image files. The file size must be less than 4MB, and the image's dimensions must be greater than 50x50 pixels. Realistic photographs will achieve the best results.",
       "cover": "Your NFT requires a poster/cover to be seen in gallery. Please upload image (jpg/ png/ gif)",
       "creativeFailDesc": "Generating the title and description failed. Please check whether the uploaded file fits the limits of Creative Minting: JPEG, PNG, GIF or BMP with a size less than 4MB and dimensions greater than 50x50 pixels.",
-      "drop": "Drop your NFT here or click to upload or simply paste image from clipboard. We support various media types (BMP, GIF, JPEG, PNG, SVG, TIFF, WEBP, MP4, OGV, QUICKTIME, WEBM, GLB, FLAC, MP3, JSON)"
+      "drop": "Drop your NFT here or click to upload or simply paste image from clipboard. We support various media types (BMP, GIF, JPEG, PNG, SVG, TIFF, WEBP, MP4, OGV, QUICKTIME, WEBM, GLB, FLAC, MP3, JSON)",
+      "modal": {
+        "action": "Confirm Mint",
+        "title": "Mint NFT",
+        "addFunds": "Add Funds",
+        "teleport": "Teleport",
+        "login": "Continue To Signing",
+        "process": "Continue with Minting",
+        "notEnoughFund": "Not Enough {0} on {1}",
+        "conjunction": "Or Use",
+        "price": "Price",
+        "network": "Network",
+        "intoCollection": "Into Collection",
+        "networkFee": "Network Fee",
+        "existentialDeposit": "NFT Existential Deposit",
+        "depositTooltip": "A deposit of {0} {1} is required to create an item. Please note, this initial deposit is refundable. ",
+        "kodadotFee": "KodaDot Fee",
+        "kodadotTooltip": "By keeping this option active, you're contributing to initial costs borne by Kodadot for storing your JPEGs on your behalf. You may change this preference anytime in the settings. ",
+        "carbonless": "Carbonless",
+        "totalFee": "Fees Total"
+      }
     },
     "unlockable": {
       "phaseIntroduction": "We will have a 60-minute window every phase, each featuring only 10 exclusive items.",
@@ -965,7 +991,7 @@
     "setOn": "Create On-Chain identity on {0}",
     "click": "Click to create identity",
     "clear": "Clear (burn)",
-    "existing" : "Existing Onchain Identity",
+    "existing": "Existing Onchain Identity",
     "establishedIdentity": "It appears you already established an onchain identity. Update it as needed (no new deposit needed) or delete to reclaim your deposit.",
     "handleRequired": "Your handle is required",
     "deposit": "Deposit",
diff --git a/pages/qrCode.vue b/pages/qrCode.vue
index 88b6a65eb4..4a4fa220c2 100644
--- a/pages/qrCode.vue
+++ b/pages/qrCode.vue
@@ -13,6 +13,18 @@
 <script lang="ts">
 export default {
   name: 'QrCodePage',
+  setup() {
+    useHead({
+      title: 'Connect with KodaDot: Quick-Access QR Codes',
+      meta: [
+        {
+          name: 'description',
+          content:
+            'Scan to connect with KodaDot instantly! From Discord to Instagram, get quick access to our community and projects through these QR codes.',
+        },
+      ],
+    })
+  },
   data() {
     const qrCodeList = [
       {
@@ -40,17 +52,5 @@ export default {
       qrCodeList,
     }
   },
-  setup() {
-    useHead({
-      title: 'Connect with KodaDot: Quick-Access QR Codes',
-      meta: [
-        {
-          name: 'description',
-          content:
-            'Scan to connect with KodaDot instantly! From Discord to Instagram, get quick access to our community and projects through these QR codes.',
-        },
-      ],
-    })
-  },
 }
 </script>
diff --git a/utils/support.ts b/utils/support.ts
index 5e173eceff..85024a62f4 100644
--- a/utils/support.ts
+++ b/utils/support.ts
@@ -10,7 +10,7 @@ const BACKUP_PUBKEY =
   '0x9866ec0c1204773a4b95a1b374d838b5820f704a65deeaafb97f4ab96c351158' // payout bot
 export const KODADOT_DAO = 'CykZSc3szpVd95PmmJ45wE4ez7Vj3xkhRFS9H4U1WdrkaFY'
 const OFFSET_DAO = 'J9PSLHKjtJ9eEAX4xmCe8xNipRxNiYJTbnyfKXXRkhMmuq8'
-const BASE_FEE = 0.5 // 50 cents
+export const BASE_FEE = 0.5 // 50 cents
 const PERCENT = 0.03 // percent / 100
 
 export const round = (num: number): number =>
diff --git a/utils/transactionExecutor.ts b/utils/transactionExecutor.ts
index 99e23795dc..8c491baae8 100644
--- a/utils/transactionExecutor.ts
+++ b/utils/transactionExecutor.ts
@@ -6,6 +6,7 @@ import { getAddress } from '@/utils/extension'
 import { toDefaultAddress } from '@/utils/account'
 import { DispatchError, Hash } from '@polkadot/types/interfaces'
 import { KODADOT_DAO } from '@/utils/support'
+import { calculateBalance } from './format/balance'
 
 export type ExecResult = UnsubscribeFn | string
 export type Extrinsic = SubmittableExtrinsic<'promise'>
@@ -106,4 +107,55 @@ export const estimate = async (
   return info.partialFee.toString()
 }
 
+export const getTransitionFee = async (
+  accountId: string,
+  targetAddresses: Array<string>,
+  decimal: number,
+) => {
+  const { cb, arg } = await getTransferParams(
+    targetAddresses.map(
+      () =>
+        ({
+          address: toDefaultAddress(KODADOT_DAO),
+          usd: 1,
+          token: 1,
+        }) as TargetAddress,
+    ),
+    decimal,
+  )
+  return estimate(accountId, cb, arg)
+}
+export type TargetAddress = {
+  address: string
+  usd?: number | string
+  token?: number | string
+  isInvalid?: boolean
+}
+const getTransferParams = async (
+  addresses: TargetAddress[],
+  decimals: number,
+) => {
+  const { apiInstance } = useApi()
+
+  const api = await apiInstance.value
+  const isSingle = addresses.length === 1
+  const firstAddress = addresses[0]
+  const cb = isSingle ? api.tx.balances.transfer : api.tx.utility.batch
+  const arg = isSingle
+    ? [
+        firstAddress.address,
+        String(calculateBalance(firstAddress.token as number, decimals)),
+      ]
+    : [
+        addresses.map((target) => {
+          const amountToTransfer = String(
+            calculateBalance(target.token as number, decimals),
+          )
+
+          return api.tx.balances.transfer(target.address, amountToTransfer)
+        }),
+      ]
+  return { cb, arg }
+}
+
 export default exec