diff --git a/components/buy/Buy.vue b/components/buy/Buy.vue
index 21b848ffd6..4dd6712a0a 100644
--- a/components/buy/Buy.vue
+++ b/components/buy/Buy.vue
@@ -1,6 +1,12 @@
 <template>
   <div>
-    <Loader v-if="!usingAutoTeleport" v-model="isLoading" :status="status" />
+    <SigningModal
+      v-if="!usingAutoTeleport"
+      :title="$t('buyModal.buyingNft', itemCount)"
+      :is-loading="isLoading"
+      :status="status"
+      @try-again="handleBuy" />
+
     <ConfirmPurchaseModal
       :loading="!hasSyncedPrices"
       :action="autoteleportAction"
@@ -15,7 +21,6 @@ import { useShoppingCartStore } from '@/stores/shoppingCart'
 import { usePreferencesStore } from '@/stores/preferences'
 import { useFiatStore } from '@/stores/fiat'
 
-import Loader from '@/components/shared/Loader.vue'
 import ConfirmPurchaseModal from '@/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue'
 import { Actions, TokenToBuy } from '@/composables/transaction/types'
 import { ShoppingCartItem } from '@/components/common/shoppingCart/types'
@@ -41,6 +46,7 @@ const nftSubscription = reactive<{
 const hasSyncedPrices = ref(false)
 const usingAutoTeleport = ref(false)
 const buyAction = ref<Actions>(emptyObject<Actions>())
+const itemCount = ref(1)
 
 const autoteleportAction = computed<AutoTeleportAction>(() => ({
   action: buyAction.value,
@@ -91,6 +97,7 @@ const handleConfirm = async ({
   autoteleport,
 }: AutoTeleportActionButtonConfirmEvent) => {
   usingAutoTeleport.value = autoteleport
+  itemCount.value = isShoppingCartMode.value ? items.value.length : 1
 
   if (!isShoppingCartMode.value) {
     shoppingCartStore.removeItemToBuy()
diff --git a/components/collection/HeroButtonDeleteCollection.vue b/components/collection/HeroButtonDeleteCollection.vue
index f691a8d9ad..12658734a7 100644
--- a/components/collection/HeroButtonDeleteCollection.vue
+++ b/components/collection/HeroButtonDeleteCollection.vue
@@ -1,4 +1,10 @@
 <template>
+  <SigningModal
+    :title="$t('confirmDeleteCollection.deletingCollection')"
+    :is-loading="isLoading"
+    :status="status"
+    @try-again="deleteCollection" />
+
   <NeoDropdownItem @click="confirmDeleteModalActive = true">
     {{ $i18n.t('moreActions.deleteCollection') }}
   </NeoDropdownItem>
@@ -14,15 +20,22 @@ import { NeoDropdownItem } from '@kodadot1/brick'
 import ConfirmDeleteCollectionModal from './ConfirmDeleteCollectionModal.vue'
 
 const route = useRoute()
-const { $i18n, $updateLoader } = useNuxtApp()
-const { transaction } = useTransaction()
+const { $i18n } = useNuxtApp()
+const {
+  transaction,
+  status,
+  blockNumber,
+  isLoading: isTransactionLoading,
+} = useTransaction()
 const { urlPrefix } = usePrefix()
 const { accountId } = useAuth()
 
 const confirmDeleteModalActive = ref(false)
+const isLoading = ref(false)
+const unsubscribeSubscription = ref(() => {})
 
 const deleteCollection = async () => {
-  $updateLoader(true)
+  isLoading.value = true
   const id = route.params.id.toString()
 
   await transaction({
@@ -31,7 +44,8 @@ const deleteCollection = async () => {
     collectionId: id,
   })
 
-  useSubscriptionGraphql({
+  unsubscribeSubscription.value()
+  unsubscribeSubscription.value = useSubscriptionGraphql({
     query: `
       collectionEntity: collectionEntityById(id: "${id}") {
         id
@@ -40,10 +54,13 @@ const deleteCollection = async () => {
     `,
     onChange: ({ data }) => {
       if (data.collectionEntity.burned) {
-        $updateLoader(false)
+        isLoading.value = false
         navigateTo(`/${urlPrefix.value}/u/${accountId.value}?tab=collections`)
       }
     },
+    onError: () => {
+      isLoading.value = false
+    },
   })
 }
 
@@ -51,4 +68,10 @@ const closeAndDelete = () => {
   confirmDeleteModalActive.value = false
   deleteCollection()
 }
+
+watch([isTransactionLoading, blockNumber], ([loading, block]) => {
+  if (!loading && !block) {
+    isLoading.value = false
+  }
+})
 </script>
diff --git a/components/collection/HeroButtonDeleteNfts.vue b/components/collection/HeroButtonDeleteNfts.vue
index 254860f5af..adfdb88968 100644
--- a/components/collection/HeroButtonDeleteNfts.vue
+++ b/components/collection/HeroButtonDeleteNfts.vue
@@ -1,4 +1,10 @@
 <template>
+  <SigningModal
+    :title="$t('moreActions.deletingNfts')"
+    :is-loading="isLoading"
+    :status="status"
+    @try-again="deleteNfts" />
+
   <NeoDropdownItem @click="deleteNfts()">
     {{ $i18n.t('moreActions.deleteNfts') }}
   </NeoDropdownItem>
@@ -8,20 +14,28 @@
 import { NFTs } from '@/composables/transaction/types'
 import { NeoDropdownItem } from '@kodadot1/brick'
 
-const route = useRoute()
-const { $i18n, $updateLoader } = useNuxtApp()
-const { transaction, status } = useTransaction()
-const { urlPrefix } = usePrefix()
-const { accountId } = useAuth()
-
-const id = route.params.id.toString()
-
 type NftIds = {
   nfts?: {
     id: string
   }[]
 }
 
+const route = useRoute()
+const { $i18n } = useNuxtApp()
+const { urlPrefix } = usePrefix()
+const { accountId } = useAuth()
+
+const {
+  transaction,
+  status,
+  isLoading: isTransactionLoading,
+  blockNumber,
+} = useTransaction()
+
+const id = route.params.id.toString()
+const isLoading = ref(false)
+const unsubscribeSubscription = ref(() => {})
+
 const { data } = useGraphql({
   queryName: 'nftIdListByCollection',
   variables: {
@@ -31,18 +45,20 @@ const { data } = useGraphql({
 })
 
 const deleteNfts = async () => {
-  $updateLoader(true)
   const nfts = (data.value as NftIds).nfts
   const ids = nfts?.map((nft) => nft.id)
 
   if (ids?.length) {
+    isLoading.value = true
+
     await transaction({
       interaction: NFTs.BURN_MULTIPLE,
       nftIds: ids,
       urlPrefix: urlPrefix.value,
     })
 
-    useSubscriptionGraphql({
+    unsubscribeSubscription.value()
+    unsubscribeSubscription.value = useSubscriptionGraphql({
       query: `
       nftEntities(where: {collection: {id_eq: "${id}"}, burned_eq: false}) {
         id
@@ -54,10 +70,16 @@ const deleteNfts = async () => {
           data.nftEntities.length === 0 ||
           status.value === TransactionStatus.Finalized
         ) {
-          $updateLoader(false)
+          isLoading.value = false
         }
       },
     })
   }
 }
+
+watch([isTransactionLoading, blockNumber], ([loading, block]) => {
+  if (!loading && !block) {
+    isLoading.value = false
+  }
+})
 </script>
diff --git a/components/collection/drop/HolderOfGenerative.vue b/components/collection/drop/HolderOfGenerative.vue
index d0f0cb9230..2faa18399e 100644
--- a/components/collection/drop/HolderOfGenerative.vue
+++ b/components/collection/drop/HolderOfGenerative.vue
@@ -1,5 +1,9 @@
 <template>
-  <Loader v-model="isLoading" :status="status" />
+  <SigningModal
+    :title="$t('mint.nft.minting')"
+    :is-loading="isLoading"
+    :status="status"
+    @try-again="mintNft" />
 
   <CollectionDropGenerativeLayout
     :collection-id="collectionId"
@@ -36,7 +40,6 @@ import { useDropMinimumFunds, useDropStatus } from '@/components/drops/useDrops'
 import { fetchNft } from '@/components/items/ItemsGrid/useNftActions'
 import holderOfCollectionById from '@/queries/subsquid/general/holderOfCollectionById.graphql'
 import unlockableCollectionById from '@/queries/subsquid/general/unlockableCollectionById.graphql'
-import Loader from '@/components/shared/Loader.vue'
 import useGenerativeDropMint, {
   type UnlockableCollectionById,
 } from '@/composables/drop/useGenerativeDropMint'
@@ -196,10 +199,10 @@ const mintButtonLabel = computed(() => {
         : $i18n.t('mint.unlockable.notEligibility')
       : $i18n.t('mint.unlockable.checkEligibility')
 })
-const mintButtonDisabled = computed(
+const mintButtonDisabled = computed<boolean>(
   () =>
     !mintCountAvailable.value ||
-    disabledByBackend.value ||
+    Boolean(disabledByBackend.value) ||
     (isLogIn.value &&
       Boolean(
         !selectedImage.value ||
@@ -250,6 +253,7 @@ const mintNft = async () => {
     showNotification(`[MINT::ERR] ${e}`, notificationTypes.warn)
     $consola.error(e)
     isTransactionLoading.value = false
+    isLoading.value = false
   }
 }
 
diff --git a/components/collection/drop/modal/DropConfirmModal.vue b/components/collection/drop/modal/DropConfirmModal.vue
index 8f7dc4f2d0..5e269668aa 100644
--- a/components/collection/drop/modal/DropConfirmModal.vue
+++ b/components/collection/drop/modal/DropConfirmModal.vue
@@ -22,14 +22,14 @@
         @resend="handleConfirmationEmailResend"
         @check="handleEmailSubscriptionCheck" />
 
-      <WaitingDrop
+      <SigningModalBody
         v-else-if="isClaimingDropStep"
         :title="$t('drops.preparingYourNft')"
         :subtitle="est">
         <p class="py-5 capitalize">
           {{ $t('drops.stayTuned') }}
         </p>
-      </WaitingDrop>
+      </SigningModalBody>
 
       <SuccessfulDrop
         v-else-if="isSuccessfulDropStep"
@@ -44,7 +44,6 @@ import { NeoModal } from '@kodadot1/brick'
 import ModalBody from '@/components/shared/modals/ModalBody.vue'
 import EmailSignup from './newsletter/EmailSignup.vue'
 import ConfirmEmail from './newsletter/ConfirmEmail.vue'
-import WaitingDrop from './shared/WaitingDrop.vue'
 import SuccessfulDrop from './shared/SuccessfulDrop.vue'
 import type { DropMintedNft } from '@/composables/drop/useGenerativeDropMint'
 import {
diff --git a/components/collection/drop/modal/PaidMint.vue b/components/collection/drop/modal/PaidMint.vue
index bb9f120fb6..f551c48872 100644
--- a/components/collection/drop/modal/PaidMint.vue
+++ b/components/collection/drop/modal/PaidMint.vue
@@ -22,17 +22,10 @@
         @confirm="handleConfirm"
         @close="handleModalClose" />
 
-      <WaitingDrop
+      <SigningModalBody
         v-else-if="isSigningStep"
         :title="$t('autoTeleport.steps.paid_drop.title')"
-        :subtitle="transactionStatus">
-        <div class="py-5 flex items-start">
-          <NeoIcon icon="lightbulb" size="small" class="mr-2 is-block" />
-          <p
-            v-dompurify-html="$t('autoTeleport.tip')"
-            class="text-xs capitalize" />
-        </div>
-      </WaitingDrop>
+        :subtitle="transactionStatus" />
 
       <SuccessfulDrop
         v-else-if="isSuccessfulDropStep"
@@ -44,13 +37,12 @@
 </template>
 
 <script setup lang="ts">
-import { NeoIcon, NeoModal } from '@kodadot1/brick'
+import { NeoModal } from '@kodadot1/brick'
 import ModalBody from '@/components/shared/modals/ModalBody.vue'
 import { AutoTeleportActionButtonConfirmEvent } from '@/components/common/autoTeleport/AutoTeleportActionButton.vue'
 import type { ToMintNft } from '../PaidGenerative.vue'
 import type { AutoTeleportAction } from '@/composables/autoTeleport/types'
 import MintOverview from './paid/MintOverview.vue'
-import WaitingDrop from './shared/WaitingDrop.vue'
 import SuccessfulDrop from './shared/SuccessfulDrop.vue'
 import type { DropMintedNft } from '@/composables/drop/useGenerativeDropMint'
 import { usePreloadMintedNftCover } from './utils'
diff --git a/components/collection/drop/modal/shared/WaitingDrop.vue b/components/collection/drop/modal/shared/WaitingDrop.vue
deleted file mode 100644
index 562b24721a..0000000000
--- a/components/collection/drop/modal/shared/WaitingDrop.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div>
-    <ModalIdentityItem />
-  </div>
-
-  <slot />
-
-  <div class="min-height">
-    <SkeletonLoader :title="title" :subtitle="subtitle" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import ModalIdentityItem from '@/components/shared/ModalIdentityItem.vue'
-import SkeletonLoader from '@/components/shared/SkeletonLoader.vue'
-
-defineProps<{
-  title: string
-  subtitle: string
-}>()
-</script>
-
-<style lang="scss" scoped>
-.min-height {
-  height: 200px;
-}
-</style>
diff --git a/components/common/itemTransfer/ItemTransferModal.vue b/components/common/itemTransfer/ItemTransferModal.vue
index 924d87698e..2743de8c17 100644
--- a/components/common/itemTransfer/ItemTransferModal.vue
+++ b/components/common/itemTransfer/ItemTransferModal.vue
@@ -1,6 +1,11 @@
 <template>
   <div>
-    <Loader v-model="isLoading" :status="status" />
+    <SigningModal
+      :title="$t('transaction.transferingNft')"
+      :is-loading="isLoading"
+      :status="status"
+      @try-again="transfer" />
+
     <NeoModal :value="isModalActive" scroll="clip" @close="onClose">
       <div class="modal-width">
         <header
diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index 2155fb655d..05bb56cf07 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -1,6 +1,12 @@
 <template>
   <div>
-    <Loader v-if="!autoTeleport" v-model="isLoading" :status="status" />
+    <SigningModal
+      v-if="!autoTeleport"
+      :title="$t('listingCart.listingNft', itemCount)"
+      :is-loading="isLoading"
+      :status="status"
+      @try-again="submitListing" />
+
     <NeoModal
       :value="preferencesStore.listingCartModalOpen"
       scroll="clip"
@@ -96,6 +102,8 @@ const fixedPrice = ref()
 const floorPricePercentAdjustment = ref()
 const autoTeleport = ref(false)
 const autoteleportButton = ref()
+const itemCount = ref(listingCartStore.count)
+const items = ref<ListCartItem[]>([])
 
 const loadingAutoTeleport = computed(() => !autoteleportButton.value?.isReady)
 
@@ -201,12 +209,18 @@ const getAction = (items: ListCartItem[]): Actions => {
   }
 }
 
+const submitListing = () => {
+  return transaction(getAction(items.value || []))
+}
+
 async function confirm({ autoteleport }: AutoTeleportActionButtonConfirmEvent) {
   try {
     autoTeleport.value = autoteleport
+    itemCount.value = listingCartStore.count
+    items.value = [...listingCartStore.itemsInChain]
 
     if (!autoteleport) {
-      await transaction(getAction(listingCartStore.itemsInChain))
+      await submitListing()
     }
 
     listingCartStore.clearListedItems()
diff --git a/components/create/CreateCollection.vue b/components/create/CreateCollection.vue
index fa025dbc72..b27fffc5d2 100644
--- a/components/create/CreateCollection.vue
+++ b/components/create/CreateCollection.vue
@@ -1,6 +1,12 @@
 <template>
   <div class="is-centered" :class="{ columns: classColumn }">
-    <Loader v-if="!autoTeleport" v-model="isLoading" :status="status" />
+    <SigningModal
+      v-if="!autoTeleport"
+      :title="$t('mint.collection.minting')"
+      :is-loading="isLoading"
+      :status="status"
+      @try-again="createCollection" />
+
     <MintConfirmModal
       v-model="confirmModal"
       :auto-teleport-actions="actions"
diff --git a/components/create/CreateNft.vue b/components/create/CreateNft.vue
index 6e6fb36064..10622385d1 100644
--- a/components/create/CreateNft.vue
+++ b/components/create/CreateNft.vue
@@ -1,6 +1,12 @@
 <template>
   <div class="is-centered columns">
-    <Loader v-if="!autoTeleport" v-model="isLoading" :status="status" />
+    <SigningModal
+      v-if="!autoTeleport"
+      :is-loading="isLoading"
+      :title="$t('mint.nft.minting')"
+      :status="status"
+      @try-again="createNft" />
+
     <MintConfirmModal
       v-model="modalShowStatus"
       :auto-teleport-actions="autoTeleportActions"
diff --git a/components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue b/components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue
index a45b80d6e8..19b938ffaa 100644
--- a/components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue
+++ b/components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue
@@ -1,6 +1,11 @@
 <template>
   <div>
-    <Loader v-model="isLoading" :status="status" />
+    <SigningModal
+      :title="$t('mint.nft.burning')"
+      :is-loading="isLoading"
+      :status="status"
+      @try-again="burn" />
+
     <NeoDropdown position="bottom-left" :mobile-modal="false">
       <template #trigger="{ active }">
         <NeoButton
@@ -32,7 +37,6 @@ import { NeoButton, NeoDropdown, NeoDropdownItem } from '@kodadot1/brick'
 import { Interaction } from '@kodadot1/minimark/v1'
 import { downloadImage } from '@/utils/download'
 import { toOriginalContentUrl } from '@/utils/ipfs'
-import Loader from '@/components/shared/Loader.vue'
 import { isMobileDevice } from '@/utils/extension'
 
 const { $i18n, $consola } = useNuxtApp()
diff --git a/components/shared/SigningModal/SigningModal.vue b/components/shared/SigningModal/SigningModal.vue
new file mode 100644
index 0000000000..ec482055fb
--- /dev/null
+++ b/components/shared/SigningModal/SigningModal.vue
@@ -0,0 +1,79 @@
+<template>
+  <NeoModal
+    :value="isModalActive"
+    :can-cancel="['outside', 'escape']"
+    scroll="clip"
+    @close="onClose">
+    <ModalBody :title="$t('drops.signTransaction')" @close="onClose">
+      <SigningModalBody
+        :title="title"
+        :subtitle="subtitle"
+        :failed="isCancelled"
+        :show-subtitle-dots="isLoading"
+        @try-again="() => $emit('tryAgain')" />
+    </ModalBody>
+  </NeoModal>
+</template>
+<script setup lang="ts">
+import { NeoModal } from '@kodadot1/brick'
+import ModalBody from '@/components/shared/modals/ModalBody.vue'
+import { TransactionStatus } from '@/composables/useTransactionStatus'
+
+defineEmits(['tryAgain'])
+const props = defineProps<{
+  isLoading: boolean
+  status: TransactionStatus
+  title: string
+}>()
+
+const { $i18n } = useNuxtApp()
+
+const isModalActive = ref(false)
+const isCancelled = ref(false)
+
+const statusTransalationsKeys: Partial<Record<TransactionStatus, string>> = {
+  [TransactionStatus.Finalized]: 'transactionSteps.completed',
+  [TransactionStatus.IPFS]: 'transactionSteps.uploading',
+}
+
+const isLoading = computed(() =>
+  [
+    TransactionStatus.Block,
+    TransactionStatus.Casting,
+    TransactionStatus.Sign,
+    TransactionStatus.Broadcast,
+  ].includes(props.status),
+)
+
+const subtitle = computed(() =>
+  isLoading.value
+    ? $i18n.t('transactionSteps.loading')
+    : $i18n.t(
+        statusTransalationsKeys[props.status] || 'transactionSteps.waiting',
+      ),
+)
+
+const onClose = () => {
+  isModalActive.value = false
+}
+
+watch(
+  [() => props.status, () => props.isLoading],
+  ([status, loading], [prevStatus, wasLoading]) => {
+    if (loading) {
+      isModalActive.value = true
+    }
+
+    if (status === TransactionStatus.Finalized) {
+      isModalActive.value = false
+      return
+    }
+
+    isCancelled.value =
+      !loading &&
+      wasLoading &&
+      prevStatus === TransactionStatus.Unknown &&
+      status === TransactionStatus.Unknown
+  },
+)
+</script>
diff --git a/components/shared/SigningModal/SigningModalBody.vue b/components/shared/SigningModal/SigningModalBody.vue
new file mode 100644
index 0000000000..8efd96e249
--- /dev/null
+++ b/components/shared/SigningModal/SigningModalBody.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <ModalIdentityItem />
+  </div>
+
+  <slot>
+    <div class="py-5 flex items-start">
+      <NeoIcon icon="lightbulb" size="small" class="mr-2 !block" />
+      <p v-dompurify-html="$t('autoTeleport.tip')" class="text-xs capitalize" />
+    </div>
+  </slot>
+
+  <div class="h-[200px]">
+    <SkeletonLoader
+      :title="title"
+      :subtitle="subtitle"
+      :with-dots="showSubtitleDots"
+      solid>
+      <template v-if="failed">
+        <NeoIcon class="text-k-red mr-6" icon="xmark" size="large" />
+
+        <div>
+          <p class="capitalize font-bold text-base">
+            {{ title }}
+          </p>
+          <div class="flex items-center">
+            <p class="capitalize text-base text-k-grey">
+              {{ $t('transactionSteps.error') }}
+            </p>
+
+            <NeoButton
+              class="ml-4"
+              variant="pill"
+              size="small"
+              @click="() => $emit('tryAgain')">
+              {{ $t('helper.tryAgain') }}
+            </NeoButton>
+          </div>
+        </div>
+      </template>
+    </SkeletonLoader>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NeoButton, NeoIcon } from '@kodadot1/brick'
+
+defineEmits(['tryAgain'])
+withDefaults(
+  defineProps<{
+    title: string
+    subtitle: string
+    showSubtitleDots?: boolean
+    failed?: boolean
+  }>(),
+  {
+    showSubtitleDots: false,
+    failed: false,
+  },
+)
+</script>
diff --git a/components/shared/SkeletonLoader.vue b/components/shared/SkeletonLoader.vue
index 91175e4cca..927add585c 100644
--- a/components/shared/SkeletonLoader.vue
+++ b/components/shared/SkeletonLoader.vue
@@ -1,6 +1,12 @@
 <template>
   <div class="h-full relative">
+    <div
+      v-if="solid"
+      class="relative w-full h-full rounded-[1.25rem] bg-k-grey-light" />
+
     <NeoSkeleton
+      v-else
+      id="skeleton-backdrop"
       class="z-[2]"
       rounded
       border-radius="20px"
@@ -10,21 +16,23 @@
 
     <div
       class="flex justify-center w-full absolute -translate-x-2/4 -translate-y-2/4 z-[3] left-2/4 top-2/4">
-      <NeoIcon
-        icon="spinner-third"
-        class="spinner text-k-grey mr-6"
-        size="large"
-        spin />
+      <slot>
+        <NeoIcon
+          icon="spinner-third"
+          class="spinner text-k-grey mr-6"
+          size="large"
+          spin />
 
-      <div>
-        <p class="capitalize font-bold is-size-6">
-          {{ title || $t('general.doingSomeMagic') }}
-        </p>
-        <p class="capitalize is-size-6 text-k-grey">
-          {{ subtitle || $t('general.pleaseWait') }}
-          <span v-if="!subtitle" class="dots" />
-        </p>
-      </div>
+        <div :class="{ 'w-52': fixedWidth }">
+          <p class="capitalize font-bold text-base">
+            {{ title || $t('general.doingSomeMagic') }}
+          </p>
+          <p class="capitalize text-base text-k-grey">
+            {{ subtitle || $t('general.pleaseWait') }}
+            <span v-if="showDots" class="dots" />
+          </p>
+        </div>
+      </slot>
     </div>
   </div>
 </template>
@@ -32,11 +40,23 @@
 <script setup lang="ts">
 import { NeoIcon, NeoSkeleton } from '@kodadot1/brick'
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     title?: string
     subtitle?: string
+    withDots?: boolean
+    solid?: boolean
   }>(),
-  {},
+  {
+    withDots: false,
+    solid: false,
+  },
 )
+
+const showDots = computed(() => props.withDots || !props.subtitle)
+const fixedWidth = computed(() => {
+  const title = props.title || ''
+  const subtitle = props.subtitle || ''
+  return subtitle.length > title.length && showDots.value
+})
 </script>
diff --git a/components/shared/modals/ModalBody.vue b/components/shared/modals/ModalBody.vue
index 364c463c35..0237f04040 100644
--- a/components/shared/modals/ModalBody.vue
+++ b/components/shared/modals/ModalBody.vue
@@ -53,7 +53,6 @@
 
 <script setup lang="ts">
 import { NeoButton, NeoSkeleton } from '@kodadot1/brick'
-import SkeletonLoader from '@/components/shared/SkeletonLoader.vue'
 
 const emits = defineEmits(['close'])
 withDefaults(
@@ -107,14 +106,12 @@ $b-padding: 1.25rem;
 
 .modal-skeleton {
   position: unset !important;
-  .skeleton {
-    &-backdrop {
-      top: $t-padding;
-      left: $x-padding;
-      width: calc(100% - $x-padding * 2);
-      height: calc(100% - ($t-padding + $b-padding));
-      max-height: v-bind(modalMaxHeight) !important;
-    }
+  #skeleton-backdrop {
+    top: $t-padding;
+    left: $x-padding;
+    width: calc(100% - $x-padding * 2);
+    height: calc(100% - ($t-padding + $b-padding));
+    max-height: v-bind(modalMaxHeight) !important;
   }
 }
 
diff --git a/components/teleport/Teleport.vue b/components/teleport/Teleport.vue
index b125d3df0e..82365676d7 100644
--- a/components/teleport/Teleport.vue
+++ b/components/teleport/Teleport.vue
@@ -2,7 +2,12 @@
   <form
     class="mx-auto teleport-container"
     @submit.prevent="checkEDBeforeTeleport">
-    <Loader v-model="isLoading" :status="status" />
+    <SigningModal
+      :title="$t('teleport.bridging', [amountAfterFees.displayValue, currency])"
+      :is-loading="isLoading"
+      :status="status"
+      @try-again="teleport" />
+
     <h1 class="is-size-3 font-bold">
       {{ $t('teleport.page') }}
     </h1>
@@ -160,7 +165,6 @@ import {
   prefixToChainMap,
 } from '@/utils/teleport'
 import formatBalance from '@/utils/format/balance'
-import Loader from '@/components/shared/Loader.vue'
 import shortAddress from '@/utils/shortAddress'
 import { chainIcons, getChainName } from '@/utils/chain'
 import NetworkDropdown from './NetworkDropdown.vue'
diff --git a/locales/en.json b/locales/en.json
index 4e83f46d2f..32b596ce79 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -523,7 +523,8 @@
         "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. "
-      }
+      },
+      "minting": "Minting Collection"
     },
     "nft": {
       "art": {
@@ -596,7 +597,9 @@
         "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"
-      }
+      },
+      "minting": "Minting NFT",
+      "burning": "Burning NFT"
     },
     "unlockable": {
       "phaseIntroduction": "We will have a 60-minute window every phase, each featuring only 10 exclusive items.",
@@ -1074,7 +1077,8 @@
     "why": "Why?",
     "existentialDepositTooltip": "Amounts Below {0} + Fees Risk Being Lost. Enter The Minimum To Proceed.",
     "whatIsExistentialDeposit": "What is Existential Deposit?",
-    "checkboxLabel": "I understand this action will lead to an irreversible loss of funds."
+    "checkboxLabel": "I understand this action will lead to an irreversible loss of funds.",
+    "bridging": "Bridging {0} {1}"
   },
   "preferences": {
     "basic": "basic user interface",
@@ -1196,6 +1200,7 @@
     "reportCollection": "Report Collection",
     "deleteCollection": "Delete Collection",
     "deleteNfts": "Delete NFTs",
+    "deletingNfts": "Deleting NFTs",
     "customize": "Customize"
   },
   "collectionCard": {
@@ -1252,6 +1257,7 @@
     "transfer": "Transfer",
     "transferTo": "Transfer to",
     "transferNft": "Transfer NFT",
+    "transferingNft": "Transfering NFT",
     "inputAddressFirst": "Input address first",
     "addressIncorrect": "Address Incorrect",
     "wrongAddressCannotRecoveredWarning": "Items sent to the wrong address cannot be recovered.",
@@ -1493,7 +1499,8 @@
     "chooseAPrice": "Choose a price",
     "floorPrice": "Floor Price",
     "inputPriceFirst": "Input Price First",
-    "setAllTo": "Set All To"
+    "setAllTo": "Set All To",
+    "listingNft": "Listing NFT | Listing NFTs"
   },
   "migrate": {
     "cta": "Migrate Now",
@@ -1675,10 +1682,12 @@
   },
   "confirmDeleteCollection": {
     "deleteCollection": "Delete Collection?",
+    "deletingCollection": "Deleting Collection",
     "content": "This will permanently remove your collection and NFTs. Your deposit will be refunded."
   },
   "buyModal": {
     "nftPriceUpdated": "NFT {0} price updated",
-    "nftNotListedAnymore": "NFT {0} is not listed anymore"
+    "nftNotListedAnymore": "NFT {0} is not listed anymore",
+    "buyingNft": "Buying NFT | Buying NFTs"
   }
 }