diff --git a/.gitignore b/.gitignore
index 42b4b8c2..94378352 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,8 +17,7 @@ logs
 .fleet
 .idea
 /public/assets/*
-# tailwind config is used just for vs code extension intelisense
-tailwind.config.js
+types/contracts
 
 # Local env files
 .env
diff --git a/app.vue b/app.vue
index d99f5694..589bd56b 100644
--- a/app.vue
+++ b/app.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { RouteLocationNormalized, NavigationGuardNext } from 'vue-router'
+import { isAddress } from 'web3-utils'
 
 import { fetchProfile } from '@/utils/fetchProfile'
-import { PROVIDERS, STORAGE_KEY } from '@/types/enums'
 import { assertString } from '@/utils/validators'
 
 if (typeof window !== 'undefined') {
-  // @ts-ignore
   import('@lukso/web-components')
 }
 
@@ -119,12 +118,43 @@ onMounted(async () => {
   checkConnectionExpiry()
   await setupConnectedProfile()
   await routerBackProfileLoad()
+
+  try {
+    const profileAddress = useRouter().currentRoute.value.params?.profileAddress
+
+    if (!profileAddress) {
+      return
+    }
+
+    if (isAddress(profileAddress)) {
+      await setupViewedProfile(profileAddress)
+      await setupViewedAssets(profileAddress)
+    } else {
+      navigateTo(notFoundRoute())
+    }
+  } catch (error) {
+    console.error(error)
+  }
+
+  setStatus('isProfileLoaded', true)
 })
 
 onUnmounted(() => {
   const provider = INJECTED_PROVIDER
   removeProviderEvents(provider)
 })
+
+useHead({
+  bodyAttrs: {
+    class: computed(() => {
+      if (appStore.modal?.isOpen) {
+        return 'overflow-hidden'
+      }
+
+      return ''
+    }),
+  },
+})
 </script>
 
 <template>
diff --git a/components/AppModal.vue b/components/AppModal.vue
index 72fff6e9..6c957285 100644
--- a/components/AppModal.vue
+++ b/components/AppModal.vue
@@ -7,7 +7,7 @@ const loadModalTemplate = () => {
     const templateName = appStore.modal?.template
       ? appStore.modal.template
       : MODAL_DEFAULT_TEMPLATE
-    return import(`./AppModalTemplate${templateName}.vue`)
+    return import(`./ModalTemplate${templateName}.vue`)
   })
 }
 
diff --git a/components/AppNavbar.vue b/components/AppNavbar.vue
index 1eff92dc..03e3e359 100644
--- a/components/AppNavbar.vue
+++ b/components/AppNavbar.vue
@@ -2,7 +2,7 @@
 const { profile: connectedProfile, status } = useConnectedProfileStore()
 const { connect, disconnect, isUniversalProfileExtension } =
   useBrowserExtension()
-const { reloadProfile } = useViewedProfileStore()
+const { profile: viewedProfile, reloadProfile } = useViewedProfileStore()
 
 const handleNavigateProfile = async () => {
   try {
@@ -11,7 +11,8 @@ const handleNavigateProfile = async () => {
       reloadProfile(connectedProfile)
       navigateTo(profileRoute(connectedProfile.address))
     } else {
-      navigateTo(homeRoute())
+      assertAddress(viewedProfile.address, 'profile')
+      navigateTo(profileRoute(viewedProfile.address))
     }
   } catch (error) {
     console.error(error)
@@ -61,8 +62,9 @@ const browserSupportExtension = extensionStore.url !== ''
     icon="wallet-outline"
     has-menu
     @on-brand-click="handleNavigationDiscovery"
+    @on-icon-click="handleNavigateProfile"
   >
-    <div class="w-full flex items-center justify-end" slot="desktop">
+    <div class="flex items-center justify-end" slot="desktop">
       <lukso-button
         variant="text"
         custom-class="text-purple-51 hover:text-purple-41 uppercase text-12 nav-apax-12-medium-uppercase font-apax font-500"
diff --git a/components/AssetBalance.vue b/components/AssetBalance.vue
new file mode 100644
index 00000000..43443966
--- /dev/null
+++ b/components/AssetBalance.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+type Props = {
+  balance: string
+  symbol?: string
+  decimals?: number
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="heading-inter-14-bold pb-2">
+    {{ $formatMessage('asset_balance_title') }}
+  </div>
+  <div
+    class="bg-neutral-100 border border-neutral-90 py-3 px-4 rounded-12 mb-8"
+  >
+    <div class="flex items-center justify-between paragraph-inter-14-regular">
+      {{ $formatNumber(fromWeiWithDecimals(balance, decimals)) }}
+      <div
+        class="paragraph-inter-12-regular text-neutral-60 border-l border-l-neutral-90 pl-3 ml-3"
+      >
+        {{ symbol }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/components/AssetCreator.vue b/components/AssetCreator.vue
new file mode 100644
index 00000000..55d7dd1d
--- /dev/null
+++ b/components/AssetCreator.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { Asset } from '@/types/assets'
+
+type Props = {
+  asset: Asset
+}
+
+const props = defineProps<Props>()
+
+const handleOpenCreator = (event: Event) => {
+  try {
+    event.stopPropagation()
+    assertAddress(props.asset.creatorAddress)
+    navigateTo(profileRoute(props.asset.creatorAddress))
+  } catch (error) {
+    console.error(error)
+  }
+}
+</script>
+
+<template>
+  <div
+    v-if="asset.creatorAddress"
+    class="cursor-pointer shadow-neutral-drop-shadow p-2 pr-6 rounded-4 inline-flex bg-neutral-100 transition hover:scale-105"
+    @click="handleOpenCreator"
+  >
+    <lukso-profile
+      size="x-small"
+      :profile-url="asset.creatorProfileImage"
+    ></lukso-profile>
+    <div class="pl-1">
+      <div class="text-neutral-60 paragraph-inter-10-semi-bold">
+        {{ $formatMessage('asset_created_by') }}
+      </div>
+      <lukso-username
+        :name="asset.creatorName"
+        :address="asset.creatorAddress"
+        size="x-small"
+        class="flex"
+        name-color="neutral-20"
+      ></lukso-username>
+    </div>
+  </div>
+</template>
diff --git a/components/AssetImages.vue b/components/AssetImages.vue
index 23ec8e23..1256118a 100644
--- a/components/AssetImages.vue
+++ b/components/AssetImages.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import { ImageMetadata } from '@lukso/lsp-factory.js'
-
 type Props = {
-  images: ImageMetadata[][]
+  images: string[]
 }
 
 defineProps<Props>()
@@ -19,7 +17,7 @@ defineProps<Props>()
         :key="index"
         class="w-14 h-14 rounded-8 bg-cover bg-position-center bg-neutral-90"
         :style="{
-          backgroundImage: `url(${formatUrl(image[0]?.url)})`,
+          backgroundImage: `url(${image})`,
         }"
       ></div>
     </div>
diff --git a/components/AssetListItem.vue b/components/AssetListItem.vue
new file mode 100644
index 00000000..dbbb13c4
--- /dev/null
+++ b/components/AssetListItem.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+type Props = {
+  icon?: string
+  name?: string
+  symbol?: string
+  address?: Address
+  hasIdenticon?: boolean
+  hasSquareIcon?: boolean
+  isSelected?: boolean
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div
+    class="grid grid-cols-[max-content,auto] p-2 rounded-12 cursor-pointer hover:bg-neutral-95"
+    :class="{
+      'bg-neutral-95': isSelected,
+    }"
+  >
+    <div class="pr-4 flex items-center">
+      <div
+        class="shadow-neutral-above-shadow-1xl"
+        :class="{
+          'rounded-full': !hasSquareIcon,
+          'rounded-4': hasSquareIcon,
+        }"
+      >
+        <lukso-profile
+          size="small"
+          :profile-url="icon"
+          :profile-address="address"
+          :has-identicon="hasIdenticon ? true : undefined"
+          :is-square="hasSquareIcon ? true : undefined"
+        ></lukso-profile>
+      </div>
+    </div>
+    <div class="grid grid-cols-[auto,max-content] items-center">
+      <div class="flex flex-col text-left">
+        <div class="paragraph-inter-14-semi-bold">
+          {{ name }}
+        </div>
+        <div class="paragraph-inter-12-semi-bold text-neutral-60">
+          {{ symbol }}
+        </div>
+      </div>
+      <lukso-icon
+        v-if="isSelected"
+        name="complete-filled"
+        color="green-54"
+        secondary-color="neutral-100"
+      ></lukso-icon>
+    </div>
+  </div>
+</template>
diff --git a/components/AssetOwnInfo.vue b/components/AssetOwnInfo.vue
index 54ec47f0..af4de007 100644
--- a/components/AssetOwnInfo.vue
+++ b/components/AssetOwnInfo.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { fromWei } from 'web3-utils'
-
 type Props = {
   profile: Profile
   amount?: string
   symbol?: string
+  decimals?: number
 }
 
 defineProps<Props>()
@@ -25,7 +24,9 @@ defineProps<Props>()
         </div>
         <div class="paragraph-inter-12-semi-bold">
           <span v-if="amount">{{
-            $formatNumber(fromWei(amount, 'ether'))
+            $formatNumber(fromWeiWithDecimals(amount, decimals), {
+              maximumFractionDigits: decimals,
+            })
           }}</span>
           <span v-else>0</span>
           <span class="text-neutral-60 ml-1">{{ symbol }}</span>
diff --git a/components/AssetSupply.vue b/components/AssetSupply.vue
index 96c781c8..769402f7 100644
--- a/components/AssetSupply.vue
+++ b/components/AssetSupply.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 type Props = {
-  supply: string
-  symbol: string
+  tokenSupply: string
+  symbol?: string
+  decimals?: number
 }
 
 defineProps<Props>()
@@ -15,7 +16,7 @@ defineProps<Props>()
     class="bg-neutral-100 border border-neutral-90 py-3 px-4 rounded-12 mb-8"
   >
     <div class="flex items-center justify-between paragraph-inter-14-regular">
-      {{ $formatNumber(supply, { maximumFractionDigits: 20 }) }}
+      {{ $formatNumber(fromWeiWithDecimals(tokenSupply, decimals)) }}
       <div
         class="paragraph-inter-12-regular text-neutral-60 border-l border-l-neutral-90 pl-3 ml-3"
       >
diff --git a/components/AppModalTemplateDefault.vue b/components/ModalTemplateDefault.vue
similarity index 100%
rename from components/AppModalTemplateDefault.vue
rename to components/ModalTemplateDefault.vue
diff --git a/components/ModalTemplateSelectAssets.vue b/components/ModalTemplateSelectAssets.vue
new file mode 100644
index 00000000..ce8c9a7a
--- /dev/null
+++ b/components/ModalTemplateSelectAssets.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { Asset } from '@/types/assets'
+
+const { currentNetwork } = useAppStore()
+const { ownedAssets } = storeToRefs(useViewedProfileStore())
+const { profile: connectedProfile } = useConnectedProfileStore()
+const { asset: selectedAsset } = storeToRefs(useSendStore())
+
+type Props = {
+  closeModal: () => void
+}
+
+const props = defineProps<Props>()
+
+const handleSelectLyx = () => {
+  assertAddress(connectedProfile.address, 'profile')
+  navigateTo(sendRoute(connectedProfile.address))
+  props.closeModal()
+}
+
+const handleSelectAsset = (asset: Asset) => {
+  assertAddress(connectedProfile.address, 'profile')
+  navigateTo({
+    path: sendRoute(connectedProfile.address),
+    query: {
+      asset: asset.address,
+    },
+  })
+  props.closeModal()
+}
+</script>
+
+<template>
+  <div class="bg-neutral-98 text-center p-6 rounded-12 flex flex-col">
+    <div
+      class="heading-inter-21-semi-bold flex items-center justify-between pb-6"
+    >
+      {{ $formatMessage('modal_select_assets_title') }}
+      <lukso-icon
+        name="close-lg"
+        class="cursor-pointer"
+        @click="closeModal"
+      ></lukso-icon>
+    </div>
+    <ul class="space-y-2 max-h-72 overflow-y-auto -mr-4">
+      <li class="mr-4">
+        <AssetListItem
+          :icon="ASSET_LYX_ICON_URL"
+          :name="currentNetwork.token.name"
+          :symbol="currentNetwork.token.symbol"
+          :is-selected="selectedAsset?.isNativeToken"
+          @click="handleSelectLyx"
+        />
+      </li>
+      <li v-for="asset in ownedAssets" :key="asset.address" class="mr-4">
+        <AssetListItem
+          :icon="getAssetThumb(asset)"
+          :name="asset.name"
+          :symbol="asset.symbol"
+          :address="asset.address"
+          :has-identicon="true"
+          :has-square-icon="isLsp8(asset)"
+          :is-selected="
+            selectedAsset?.address === asset.address &&
+            selectedAsset?.tokenId === asset.tokenId
+          "
+          @click="handleSelectAsset(asset)"
+        />
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/components/NftList.vue b/components/NftList.vue
index 4f6ec655..58afb44a 100644
--- a/components/NftList.vue
+++ b/components/NftList.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
-
 const { nfts, assetFilter } = storeToRefs(useViewedProfileStore())
 </script>
 
diff --git a/components/NftListCard.vue b/components/NftListCard.vue
index 582b2fec..2ce9abd0 100644
--- a/components/NftListCard.vue
+++ b/components/NftListCard.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { Nft } from '@/types/assets'
+import { Asset } from '@/types/assets'
 
 type Props = {
-  asset: Nft
+  asset: Asset
   hasAddress?: boolean
 }
 
@@ -14,27 +14,24 @@ const { profile: viewedProfile } = useViewedProfileStore()
 const handleShowAsset = () => {
   try {
     assertAddress(viewedProfile.address, 'profile')
-    assertAddress(props.asset.data.collectionAddress)
-    assertString(props.asset.data.tokenId)
+    assertAddress(props.asset.address)
+    assertString(props.asset.tokenId)
     navigateTo(
-      nftRoute(
-        viewedProfile.address,
-        props.asset.data.collectionAddress,
-        props.asset.data.tokenId
-      )
+      nftRoute(viewedProfile.address, props.asset.address, props.asset.tokenId)
     )
   } catch (error) {
     console.error(error)
   }
 }
 
-const handleSendAsset = () => {
+const handleSendAsset = (event: Event) => {
   try {
+    event.stopPropagation()
     assertAddress(connectedProfile.address, 'profile')
     navigateTo({
       path: sendRoute(connectedProfile.address),
       query: {
-        nft: props.asset.address,
+        asset: props.asset.address,
       },
     })
   } catch (error) {
@@ -48,41 +45,19 @@ const handleSendAsset = () => {
     ><div slot="content">
       <div
         class="min-h-[260px] bg-neutral-90 w-100 rounded-t-12 bg-center bg-cover"
-        :style="`background-image: url(${asset.data.image});`"
+        :style="`background-image: url(${getAssetThumb(asset)});`"
       ></div>
-      <div class="p-4">
-        <div
-          v-if="asset.data.creatorAddress"
-          class="shadow-neutral-drop-shadow p-2 pr-6 rounded-4 inline-flex -top-6 relative bg-neutral-100"
-        >
-          <lukso-profile
-            size="x-small"
-            :profile-url="asset.data.creatorProfileImage"
-          ></lukso-profile>
-          <div class="pl-1">
-            <div class="text-neutral-60 paragraph-inter-10-semi-bold">
-              {{ $formatMessage('asset_created_by') }}
-            </div>
-            <lukso-username
-              :name="asset.data.creatorName"
-              :address="asset.data.creatorAddress"
-              size="x-small"
-              class="flex"
-              name-color="neutral-20"
-            ></lukso-username>
-          </div>
-        </div>
+      <div class="p-4 pt-8 relative">
+        <AssetCreator :asset="asset" class="absolute -top-5" />
         <div>
           <div class="paragraph-inter-14-semi-bold">
-            {{ asset.data.collectionName }}
+            {{ asset.name }}
           </div>
           <div class="paragraph-inter-12-semi-bold pb-2">
-            1
-            <span class="text-neutral-60">{{
-              asset.data.collectionSymbol
-            }}</span>
+            {{ asset.amount }}
+            <span class="text-neutral-60">{{ asset.symbol }}</span>
           </div>
-          <div class="flex justify-end w-full hidden">
+          <div class="flex justify-end w-full">
             <lukso-button
               v-if="
                 status.isConnected &&
@@ -91,6 +66,7 @@ const handleSendAsset = () => {
               size="small"
               variant="secondary"
               @click="handleSendAsset"
+              class="transition-opacity hover:opacity-70"
               >{{ $formatMessage('button_send') }}</lukso-button
             >
           </div>
diff --git a/components/SendCard.vue b/components/SendCard.vue
index 132d1ab3..35b44f2b 100644
--- a/components/SendCard.vue
+++ b/components/SendCard.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
-
 const { isDraft, isPending, isSuccess } = storeToRefs(useSendStore())
 </script>
 
diff --git a/components/SendCardAmount.vue b/components/SendCardAmount.vue
index eeb0c0ea..556fba53 100644
--- a/components/SendCardAmount.vue
+++ b/components/SendCardAmount.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { fromWei } from 'web3-utils'
 import BigNumber from 'bignumber.js'
-import { storeToRefs } from 'pinia'
 
 const { asset, receiverError, amount } = storeToRefs(useSendStore())
 
@@ -12,7 +10,9 @@ const handleKeyDown = (customEvent: CustomEvent) => {
   const key = event.key
   const allowedKeys = ['Backspace', 'ArrowLeft', 'ArrowRight', 'Tab']
   const realValueBN = new BigNumber(`${input.value}${key}`)
-  const assetBalanceBN = new BigNumber(`${fromWei(asset.value?.amount || '0')}`)
+  const assetBalanceBN = new BigNumber(
+    `${fromWeiWithDecimals(asset.value?.amount || '0', asset.value?.decimals)}`
+  )
   const maxDecimalPlaces = 6
 
   // check for allowed keys or if user press CMD+A
@@ -30,7 +30,18 @@ const handleKeyDown = (customEvent: CustomEvent) => {
 
   // when value is more then balance we set to max value
   if (realValueBN.gt(assetBalanceBN)) {
-    input.value = fromWei(asset.value?.amount?.toString() || '0')
+    amount.value = fromWeiWithDecimals(
+      asset.value?.amount?.toString() || '0',
+      asset.value?.decimals
+    )
+    event.preventDefault()
+  }
+
+  // when asset use 0 decimals we should only allow integers
+  if (
+    asset.value?.decimals === 0 &&
+    (key === '.' || (key === '0' && input.value === ''))
+  ) {
     event.preventDefault()
   }
 
@@ -50,10 +61,11 @@ const handleKeyUp = (event: CustomEvent) => {
   amount.value = input.value
 }
 
-const handleUnitClick = (event: CustomEvent) => {
-  const input = event.detail.input
-  const total = fromWei(asset.value?.amount?.toString() || '0')
-  input.value = total
+const handleUnitClick = () => {
+  const total = fromWeiWithDecimals(
+    asset.value?.amount?.toString() || '0',
+    asset.value?.decimals
+  )
   amount.value = total
 }
 </script>
@@ -64,12 +76,18 @@ const handleUnitClick = (event: CustomEvent) => {
     :value="amount"
     :unit="
       $formatMessage('profile_balance_of', {
-        balance: $formatNumber(fromWei(asset?.amount || '0', 'ether')),
+        balance: $formatNumber(
+          fromWeiWithDecimals(asset?.amount || '0', asset?.decimals) || '',
+          {
+            maximumFractionDigits: asset?.decimals,
+          }
+        ),
         symbol: asset?.symbol || '',
       })
     "
     borderless
     is-full-width
+    autofocus
     @on-key-down="handleKeyDown"
     @on-key-up="handleKeyUp"
     @on-unit-click="handleUnitClick"
diff --git a/components/SendCardDraft.vue b/components/SendCardDraft.vue
index f71b4a6f..525eb27b 100644
--- a/components/SendCardDraft.vue
+++ b/components/SendCardDraft.vue
@@ -1,14 +1,19 @@
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
-
-const { profile: connectedProfile } = useConnectedProfileStore()
+const { profile: connectedProfile, status } = useConnectedProfileStore()
 const { asset, receiver, receiverError, amount, onSend } = storeToRefs(
   useSendStore()
 )
+const { showModal } = useModal()
 
 const handleSend = () => {
   onSend.value && onSend.value()
 }
+
+const handleSelectAssets = () => {
+  showModal({
+    template: 'SelectAssets',
+  })
+}
 </script>
 
 <template>
@@ -19,30 +24,50 @@ const handleSend = () => {
     :profile-address="connectedProfile.address"
     is-full-width
   >
-    <div slot="content" class="p-6 pt-0">
+    <div slot="content" class="p-6 pt-0 relative">
       <div
-        class="border border-neutral-90 rounded-12 flex justify-center items-center"
+        class="grid grid-rows-1 grid-cols-[max-content,auto] transition relative z-[1]"
+        :class="{
+          'opacity-0 invisible': !status.isProfileLoaded,
+          'opacity-100 visible': status.isProfileLoaded,
+        }"
       >
-        <div class="p-4">
+        <div
+          class="p-4 border border-neutral-90 border-r-0 rounded-[12px_0_0_12px] flex justify-center items-center"
+        >
           <div class="shadow-neutral-above-shadow-1xl rounded-full">
             <lukso-profile
               size="small"
-              :profile-url="asset?.icon"
+              :profile-url="getAssetThumb(asset)"
+              :profile-address="asset?.address"
+              :has-identicon="isLyx(asset) ? undefined : true"
+              :is-square="isNft(asset) ? true : undefined"
             ></lukso-profile>
           </div>
         </div>
         <div class="flex flex-col w-full">
           <div
-            class="border-b border-b-neutral-90 border-l border-l-neutral-90 paragraph-inter-14-semi-bold px-4 py-3 flex justify-between items-center"
+            class="border border-neutral-90 rounded-[0_12px_0_0] cursor-pointer paragraph-inter-14-semi-bold px-4 py-3 flex justify-between items-center transition hover:border-neutral-35"
+            @click="handleSelectAssets"
           >
             {{ asset?.name }}
-            <lukso-icon name="arrow-down-lg" class="hidden"></lukso-icon>
+            <lukso-icon name="arrow-down-lg"></lukso-icon>
           </div>
-          <div class="border-l border-l-neutral-90">
+          <div class="border border-neutral-90 border-t-0 rounded-[0_0_12px_0]">
             <SendCardAmount />
           </div>
         </div>
       </div>
+      <div
+        class="gap-2 grid grid-rows-2 absolute top-0 left-0 right-0 bottom-0 m-6 mt-0 transition"
+        :class="{
+          'opacity-0': status.isProfileLoaded,
+          'opacity-100 animate-pulse': !status.isProfileLoaded,
+        }"
+      >
+        <div class="bg-neutral-95 rounded-12"></div>
+        <div class="bg-neutral-95 rounded-12"></div>
+      </div>
     </div>
     <div slot="bottom" class="p-6 flex flex-col items-center">
       <AppAvatar
diff --git a/components/SendCardHeader.vue b/components/SendCardHeader.vue
index aa7fb0a3..b8f20a25 100644
--- a/components/SendCardHeader.vue
+++ b/components/SendCardHeader.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
-
 const { profile: connectedProfile } = useConnectedProfileStore()
 const { receiver } = storeToRefs(useSendStore())
 </script>
diff --git a/components/SendCardPending.vue b/components/SendCardPending.vue
index b1fab5dc..6c93d173 100644
--- a/components/SendCardPending.vue
+++ b/components/SendCardPending.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
-
 const { amount, asset } = storeToRefs(useSendStore())
 </script>
 
diff --git a/components/SendCardProfileSearch.vue b/components/SendCardProfileSearch.vue
index ecd66c92..b3fcdc42 100644
--- a/components/SendCardProfileSearch.vue
+++ b/components/SendCardProfileSearch.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { isAddress } from 'web3-utils'
 import { SearchProfileResult } from '@lukso/web-components/dist/components/lukso-search'
-import { storeToRefs } from 'pinia'
 
 import { IndexedProfile } from '@/types/profile'
 
@@ -10,7 +9,7 @@ const SEARCH_COMPONENT_TAG_NAME = 'LUKSO-SEARCH'
 const { search } = useAlgoliaSearch<IndexedProfile>(INDEX_NAME)
 const { receiver, receiverError } = storeToRefs(useSendStore())
 const isSearchingReceiver = ref<boolean>(false)
-const searchTerm = ref<Address | undefined>(receiver.value?.address)
+const searchTerm = ref<string | Address | undefined>(receiver.value?.address)
 const hasNoResults = ref<boolean>(false)
 const results = ref<SearchProfileResult[]>()
 const selectedResultNumber = ref<number>()
diff --git a/components/TokenList.vue b/components/TokenList.vue
index efa19592..5cf4e999 100644
--- a/components/TokenList.vue
+++ b/components/TokenList.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
-
 import { AssetFilter } from '@/types/assets'
 
 const { tokens, assetFilter } = storeToRefs(useViewedProfileStore())
diff --git a/components/TokenListCard.vue b/components/TokenListCard.vue
index edbc2489..e9587f81 100644
--- a/components/TokenListCard.vue
+++ b/components/TokenListCard.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import { fromWei } from 'web3-utils'
-
-import { Token, StandardsAbbreviations } from '@/types/assets'
+import { Asset, StandardsAbbreviations } from '@/types/assets'
 
 type Props = {
-  asset: Token
+  asset: Asset
   hasAddress?: boolean
 }
 
@@ -12,6 +10,10 @@ const props = defineProps<Props>()
 
 const { profile: connectedProfile, status } = useConnectedProfileStore()
 const { profile: viewedProfile } = useViewedProfileStore()
+const contentRef = ref()
+const logoRef = ref()
+const symbolRef = ref()
+const balanceWidthPx = ref(0)
 
 const handleShowAsset = () => {
   try {
@@ -23,19 +25,33 @@ const handleShowAsset = () => {
   }
 }
 
-const handleSendAsset = () => {
+const handleSendAsset = (event: Event) => {
   try {
+    event.stopPropagation()
     assertAddress(connectedProfile.address, 'profile')
     navigateTo({
       path: sendRoute(connectedProfile.address),
       query: {
-        token: props.asset.address,
+        asset: props.asset.address,
       },
     })
   } catch (error) {
     console.error(error)
   }
 }
+
+onMounted(async () => {
+  const resizeObserver = new ResizeObserver(() => {
+    const GAP = 24
+
+    balanceWidthPx.value =
+      contentRef.value?.clientWidth -
+      logoRef.value?.clientWidth -
+      symbolRef.value?.clientWidth -
+      GAP
+  })
+  resizeObserver.observe(contentRef.value)
+})
 </script>
 
 <template>
@@ -49,34 +65,46 @@ const handleSendAsset = () => {
           >{{ StandardsAbbreviations[asset.standard] }}</lukso-tag
         >
       </div>
-      <div class="flex gap-6">
-        <div class="pl-4 flex flex-col items-center">
+      <div ref="contentRef" class="flex gap-6">
+        <div ref="logoRef" class="pl-2 flex flex-col items-center">
           <lukso-profile
             size="medium"
             :profile-address="asset.address"
-            :profile-url="'icon' in asset.data ? asset.data.icon : undefined"
+            :profile-url="asset.icon"
             :has-identicon="hasAddress ? 'true' : undefined"
           ></lukso-profile>
           <div
             v-if="hasAddress"
             class="paragraph-ptmono-10-bold text-neutral-60 pt-2"
           >
-            #{{ asset.address.slice(2, 8) }}
+            #{{ asset.address?.slice(2, 8) }}
           </div>
         </div>
         <div class="flex flex-col w-full">
-          <div class="heading-inter-14-bold pb-1">{{ asset.data.name }}</div>
+          <div class="heading-inter-14-bold pb-1">{{ asset.name }}</div>
           <div class="heading-inter-21-semi-bold flex items-center pb-1">
-            <span v-if="asset.data.amount">{{
-              $formatNumber(fromWei(asset.data.amount, 'ether'))
-            }}</span>
+            <span
+              v-if="asset.amount"
+              class="truncate"
+              :style="{
+                'max-width': `${balanceWidthPx}px`,
+              }"
+              :title="
+                $formatNumber(fromWeiWithDecimals(asset.amount, asset.decimals))
+              "
+              >{{
+                $formatNumber(fromWeiWithDecimals(asset.amount, asset.decimals))
+              }}</span
+            >
             <span v-else>0</span>
-            <span class="paragraph-inter-14-semi-bold text-neutral-60 ml-2">{{
-              asset.data.symbol
-            }}</span>
+            <span
+              ref="symbolRef"
+              class="paragraph-inter-14-semi-bold text-neutral-60 pl-2"
+              >{{ asset.symbol }}</span
+            >
           </div>
           <div class="paragraph-inter-12-regular hidden">$ 123.24</div>
-          <div class="flex justify-end w-full hidden">
+          <div class="flex justify-end w-full">
             <lukso-button
               v-if="
                 status.isConnected &&
@@ -85,7 +113,7 @@ const handleSendAsset = () => {
               size="small"
               variant="secondary"
               @click="handleSendAsset"
-              class="mt-4"
+              class="mt-4 transition-opacity hover:opacity-70"
               >{{ $formatMessage('button_send') }}</lukso-button
             >
           </div>
diff --git a/components/TokenListLyxCard.vue b/components/TokenListLyxCard.vue
index d52443cd..6502af3e 100644
--- a/components/TokenListLyxCard.vue
+++ b/components/TokenListLyxCard.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import { fromWei } from 'web3-utils'
-
 const { profile: connectedProfile, status } = useConnectedProfileStore()
 const { profile: viewedProfile } = useViewedProfileStore()
 const appStore = useAppStore()
+const contentRef = ref()
+const logoRef = ref()
+const symbolRef = ref()
+const balanceWidthPx = ref(0)
 
 const handleSendAsset = (event: Event) => {
   try {
-    event.preventDefault()
+    event.stopPropagation()
     assertAddress(connectedProfile.address, 'profile')
     navigateTo(sendRoute(connectedProfile.address))
   } catch (error) {
@@ -23,6 +25,19 @@ const handleShowLyxDetails = () => {
     console.error(error)
   }
 }
+
+onMounted(async () => {
+  const resizeObserver = new ResizeObserver(() => {
+    const GAP = 24
+
+    balanceWidthPx.value =
+      contentRef.value?.clientWidth -
+      logoRef.value?.clientWidth -
+      symbolRef.value?.clientWidth -
+      GAP
+  })
+  resizeObserver.observe(contentRef.value)
+})
 </script>
 
 <template>
@@ -32,8 +47,8 @@ const handleShowLyxDetails = () => {
     is-full-width
     @click="handleShowLyxDetails"
     ><div slot="content" class="p-4 pt-11 flex flex-col justify-center">
-      <div class="flex gap-6">
-        <div class="flex flex-col items-center">
+      <div ref="contentRef" class="flex gap-6">
+        <div ref="logoRef" class="pl-2 flex flex-col items-center">
           <div class="border border-neutral-90 rounded-full p-0.5">
             <lukso-profile
               size="medium"
@@ -44,13 +59,29 @@ const handleShowLyxDetails = () => {
         <div class="flex flex-col w-full">
           <div class="heading-inter-14-bold pb-1">LUKSO</div>
           <div class="heading-inter-21-semi-bold flex items-center pb-1">
-            <span v-if="viewedProfile.balance">{{
-              $formatNumber(fromWei(viewedProfile.balance, 'ether'))
-            }}</span>
+            <span
+              v-if="viewedProfile.balance"
+              class="truncate"
+              :style="{
+                'max-width': `${balanceWidthPx}px`,
+              }"
+              :title="
+                $formatNumber(
+                  fromWeiWithDecimals(viewedProfile.balance, ASSET_LYX_DECIMALS)
+                )
+              "
+              >{{
+                $formatNumber(
+                  fromWeiWithDecimals(viewedProfile.balance, ASSET_LYX_DECIMALS)
+                )
+              }}</span
+            >
             <span v-else>0</span>
-            <span class="paragraph-inter-14-semi-bold text-neutral-60 ml-2">{{
-              appStore.currentNetwork.token.symbol
-            }}</span>
+            <span
+              ref="symbolRef"
+              class="paragraph-inter-14-semi-bold text-neutral-60 pl-2"
+              >{{ appStore.currentNetwork.token.symbol }}</span
+            >
           </div>
           <div class="paragraph-inter-12-regular pb-4 hidden">$ 123.24</div>
         </div>
diff --git a/composables/useBrowserExtension.ts b/composables/useBrowserExtension.ts
index 2b4a3fd4..adbd3dfa 100644
--- a/composables/useBrowserExtension.ts
+++ b/composables/useBrowserExtension.ts
@@ -1,5 +1,3 @@
-import { PROVIDERS, STORAGE_KEY } from '@/types/enums'
-
 const openStoreLink = () => {
   const storeLink = browserInfo().storeLink
 
@@ -116,6 +114,11 @@ const disconnect = () => {
 const handleAccountsChanged = async (accounts: string[]) => {
   const { status } = useConnectedProfileStore()
 
+  // handle account change only for connected users
+  if (!status.isConnected) {
+    return
+  }
+
   if (accounts.length) {
     const address = accounts[0]
     assertAddress(address, 'profile')
diff --git a/composables/useErc725.ts b/composables/useErc725.ts
index 12c0195b..9756881b 100644
--- a/composables/useErc725.ts
+++ b/composables/useErc725.ts
@@ -1,16 +1,14 @@
 import { ERC725, ERC725JSONSchema } from '@erc725/erc725.js'
-import LSP3UniversalProfileMetadata from '@erc725/erc725.js/schemas/LSP3UniversalProfileMetadata.json'
-import LSP4DigitalAsset from '@erc725/erc725.js/schemas/LSP4DigitalAsset.json'
+import LSP3ProfileMetadata from '@erc725/erc725.js/schemas/LSP3ProfileMetadata.json'
 import { LSP3Profile } from '@lukso/lsp-factory.js'
 import Web3 from 'web3'
 import { LSP4DigitalAssetJSON } from '@lukso/lsp-factory.js/build/main/src/lib/interfaces/lsp4-digital-asset'
-import { URLDataWithHash } from '@erc725/erc725.js/build/main/src/types'
 import { ERC725YDataKeys } from '@lukso/lsp-smart-contracts'
 
-import { SupportedAssets, TokenIdType } from '@/types/assets'
-import { getImageUrlBySize } from '@/utils/getProfileImages'
+import { LSP0ERC725Account } from '@/types/contracts/LSP0ERC725Account'
+import { Lsp8TokenIdType } from '@/types/assets'
 import LSP8IdentifiableDigitalAsset from '@/shared/schemas/LSP8IdentifiableDigitalAsset.json'
-import { PROVIDERS } from '@/types/enums'
+import { Creator, Profile } from '@/types/profile'
 
 export interface LSP3ProfileJSON {
   LSP3Profile: LSP3Profile
@@ -30,18 +28,16 @@ const getInstance = (address: string, schema: ERC725JSONSchema[]) => {
 const fetchProfile = async (profileAddress: Address): Promise<Profile> => {
   const erc725 = getInstance(
     profileAddress,
-    LSP3UniversalProfileMetadata as ERC725JSONSchema[]
+    LSP3ProfileMetadata as ERC725JSONSchema[]
   )
   const fetchedProfile = await erc725.fetchData('LSP3Profile')
   const lsp3Profile = validateLsp3Metadata(fetchedProfile)
-
-  // we get only optimal profile images that will be later used in UI
-  const optimalProfileImage = lsp3Profile.profileImage
-    ? getImageUrlBySize(lsp3Profile.profileImage, 200, 200)
-    : ''
-  const optimalBackgroundImage = lsp3Profile.backgroundImage
-    ? getImageUrlBySize(lsp3Profile.backgroundImage, 800, 400)
-    : ''
+  const profileImageUrl =
+    lsp3Profile.profileImage &&
+    (await getAndConvertImage(lsp3Profile.profileImage, 200))
+  const backgroundImageUrl =
+    lsp3Profile.backgroundImage &&
+    (await getAndConvertImage(lsp3Profile.backgroundImage, 800))
 
   const { getBalance } = useWeb3(PROVIDERS.RPC)
   const balance = await getBalance(profileAddress)
@@ -49,8 +45,8 @@ const fetchProfile = async (profileAddress: Address): Promise<Profile> => {
   return {
     ...lsp3Profile,
     address: profileAddress,
-    profileImageUrl: optimalProfileImage || '',
-    backgroundImageUrl: optimalBackgroundImage || '',
+    profileImageUrl,
+    backgroundImageUrl,
     balance,
   }
 }
@@ -58,95 +54,36 @@ const fetchProfile = async (profileAddress: Address): Promise<Profile> => {
 const fetchAssets = async (profileAddress: Address, schema: string) => {
   const erc725 = getInstance(
     profileAddress,
-    LSP3UniversalProfileMetadata as ERC725JSONSchema[]
+    LSP3ProfileMetadata as ERC725JSONSchema[]
   )
   const result = await erc725.fetchData(schema)
   const assetAddresses = result.value as Address[]
   const { profile } = useViewedProfileStore()
 
-  const assets = Promise.all(
+  const assets = await Promise.all(
     assetAddresses.map(async address => {
       const standard = await detectStandard(address)
-      let data
 
       switch (standard) {
         case 'LSP8IdentifiableDigitalAsset': {
           assertAddress(profile.address)
-          data = await fetchLSP8Assets(address, profile.address)
-
-          const assets =
-            data?.map(asset => ({
-              address,
-              standard,
-              data: asset,
-            })) || []
-
-          return assets
+          return await fetchLsp8Assets(address, profile.address)
         }
         case 'LSP7DigitalAsset': {
           assertAddress(profile.address)
-          data = await fetchLSP7Assets(address, profile.address)
+          return await fetchLsp7Assets(address, profile.address)
         }
+
         default:
-          return [
-            {
-              address,
-              standard,
-              data,
-            },
-          ]
+          return []
       }
     })
   )
 
-  return (await assets).flat() as SupportedAssets[]
-}
-
-const fetchLSP4Metadata = async (
-  assetAddress: Address
-): Promise<[string, string, LSP4DigitalAssetJSON]> => {
-  const erc725 = getInstance(
-    assetAddress,
-    LSP4DigitalAsset as ERC725JSONSchema[]
-  )
-
-  try {
-    const lsp4DigitalAsset = await erc725.fetchData([
-      'LSP4TokenName',
-      'LSP4TokenSymbol',
-      'LSP4Metadata',
-    ])
-    const LSP4TokenName =
-      typeof lsp4DigitalAsset[0]?.value === 'string'
-        ? lsp4DigitalAsset[0]?.value
-        : ''
-    const LSP4TokenSymbol =
-      typeof lsp4DigitalAsset[1]?.value == 'string'
-        ? lsp4DigitalAsset[1]?.value
-        : ''
-    const LSP4Metadata = validateLSP4MetaData(
-      lsp4DigitalAsset[2].value as URLDataWithHash
-    )
-    return [LSP4TokenName, LSP4TokenSymbol, LSP4Metadata]
-  } catch (error) {
-    console.error(error)
-    return [
-      '',
-      '',
-      {
-        LSP4Metadata: {
-          description: '',
-          links: [],
-          images: [[]],
-          icon: [],
-          assets: [],
-        },
-      },
-    ]
-  }
+  return assets.flat()
 }
 
-const fetchLSP8Metadata = async (
+const fetchLsp8Metadata = async (
   tokenId: string,
   assetAddress: Address
 ): Promise<LSP4DigitalAssetJSON> => {
@@ -174,15 +111,15 @@ const fetchLSP8Metadata = async (
 
     // fetch LSP8MetadataJSON depending on tokenIdType
     switch (tokenIdType) {
-      case TokenIdType.address:
+      case Lsp8TokenIdType.address:
         return lsp8MetadataGetter(
           'address',
           // ethers.utils.hexDataSlice(tokenId.toString(), 12)
           tokenId.toString()
         )
-      case TokenIdType.number:
+      case Lsp8TokenIdType.number:
         return lsp8MetadataGetter('uint256', parseInt(tokenId).toString())
-      case TokenIdType.bytes32:
+      case Lsp8TokenIdType.bytes32:
         return lsp8MetadataGetter('bytes32', tokenId.toString())
       default:
         return {
@@ -215,52 +152,37 @@ const fetchLSP4Creator = async (
   const { contract } = useWeb3(PROVIDERS.RPC)
 
   try {
-    const creator = (await contract(getDataABI, assetAddress)
-      .methods['getData(bytes32)'](ERC725YDataKeys.LSP4['LSP4Creators[]'].index)
-
-      .call()) as Address
+    const creator = await contract<LSP0ERC725Account>(getDataABI, assetAddress)
+      .methods.getData(ERC725YDataKeys.LSP4['LSP4Creators[]'].index)
+      .call()
     assertAddress(creator)
     const erc725 = getInstance(
       creator,
-      LSP3UniversalProfileMetadata as ERC725JSONSchema[]
+      LSP3ProfileMetadata as ERC725JSONSchema[]
     )
     const fetchedProfile = await erc725.fetchData('LSP3Profile')
     const lsp3Profile = validateLsp3Metadata(fetchedProfile)
+    const profileImageUrl =
+      lsp3Profile.profileImage &&
+      (await getAndConvertImage(lsp3Profile.profileImage, 200))
 
-    // we get only optimal profile images that will be later used in UI
-    const optimalProfileImage = lsp3Profile.profileImage
-      ? getImageUrlBySize(lsp3Profile.profileImage, 200, 200)
-      : ''
     return {
       address: creator,
       name: lsp3Profile.name,
-      profileImageUrl: optimalProfileImage,
+      profileImageUrl,
     }
   } catch (error) {
     console.error(error)
   }
 }
 
-const supportInterface = async (
-  address: Address,
-  interfaceId: string
-): Promise<boolean> => {
-  const { currentNetwork } = useAppStore()
-
-  return ERC725.supportsInterface(interfaceId, {
-    address,
-    rpcUrl: currentNetwork.rpcHttp,
-  })
-}
-
 const useErc725 = () => {
   return {
+    getInstance,
     fetchProfile,
     fetchAssets,
-    fetchLSP4Metadata,
-    fetchLSP8Metadata,
+    fetchLsp8Metadata,
     fetchLSP4Creator,
-    supportInterface,
   }
 }
 
diff --git a/composables/useIntl.ts b/composables/useIntl.ts
index 1946280f..b0bced13 100644
--- a/composables/useIntl.ts
+++ b/composables/useIntl.ts
@@ -12,7 +12,7 @@ const messages = defaultMessages as unknown as Record<string, string>
 
 // For more options check https://github.com/formatjs/formatjs/blob/main/packages/ecma402-abstract/types/number.ts#L38-L45
 const formatNumberDefaultOptions = {
-  maximumFractionDigits: 6,
+  maximumFractionDigits: 18,
 }
 
 export const defaultConfig: IntlConfig = {
diff --git a/composables/useModal.ts b/composables/useModal.ts
index cbf6eedf..ed860716 100644
--- a/composables/useModal.ts
+++ b/composables/useModal.ts
@@ -1,3 +1,5 @@
+import { Modal } from '@/types/modal'
+
 const showModal = (data: Modal | string) => {
   const appStore = useAppStore()
 
diff --git a/composables/useProfileBase.ts b/composables/useProfileBase.ts
index a92bc01f..3d12e9f4 100644
--- a/composables/useProfileBase.ts
+++ b/composables/useProfileBase.ts
@@ -1,3 +1,7 @@
+import { toChecksumAddress } from 'web3-utils'
+
+import { Profile } from '@/types/profile'
+
 /**
  * Set of methods shared across profile stores
  *
@@ -7,6 +11,11 @@
 export const useProfileBase = (profile: Profile) => {
   return {
     setProfile(newProfile: Profile) {
+      assertAddress(newProfile.address, 'profile')
+      // we need to make conversion since ext uses checksum addresses
+      const checksumAddress = toChecksumAddress(newProfile.address)
+      assertAddress(checksumAddress, 'profile')
+      newProfile.address = checksumAddress
       Object.assign(profile, newProfile)
     },
 
@@ -16,8 +25,6 @@ export const useProfileBase = (profile: Profile) => {
 
     reloadProfile(newProfile: Profile) {
       this.clearProfile()
-      assertAddress(newProfile.address, 'profile')
-      profile.address = newProfile.address
       this.setProfile(newProfile)
     },
   }
diff --git a/composables/useWeb3.ts b/composables/useWeb3.ts
index 113f0c3d..73b03d7d 100644
--- a/composables/useWeb3.ts
+++ b/composables/useWeb3.ts
@@ -18,13 +18,13 @@ export default function useWeb3(providerName: string) {
 
   return {
     getWeb3,
-    contract: (
+    contract: <T>(
       jsonInterface: AbiItem[],
       address?: string,
       options?: ContractOptions
     ) => {
       const web3 = getWeb3()
-      return new web3.eth.Contract(jsonInterface, address, options)
+      return new web3.eth.Contract(jsonInterface, address, options) as T
     },
     requestAccounts: async (): Promise<Address[]> => {
       const addresses = await getWeb3().eth.requestAccounts()
diff --git a/layouts/default.vue b/layouts/default.vue
index 974565b5..9cc7ff97 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,22 +1,3 @@
-<script setup lang="ts">
-import { isAddress } from 'web3-utils'
-
-onMounted(async () => {
-  try {
-    const profileAddress = useRouter().currentRoute.value.params?.profileAddress
-
-    if (!isAddress(profileAddress)) {
-      navigateTo(notFoundRoute())
-    }
-
-    await setupViewedProfile(profileAddress)
-    await setupViewedAssets(profileAddress)
-  } catch (error) {
-    console.error(error)
-  }
-})
-</script>
-
 <template>
   <div class="min-h-screen grid grid-rows-[max-content,auto,max-content]">
     <AppNavbar />
diff --git a/nuxt.config.ts b/nuxt.config.ts
index e6ef06e9..679a9bbe 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -36,7 +36,7 @@ export default defineNuxtConfig({
   },
   tailwindcss: {
     config: {
-      presets: [require('@lukso/web-components/tailwind.config')],
+      presets: [require('./tailwind.config')],
       content: [], // it already merges with nuxt default config https://tailwindcss.nuxt.dev/tailwind/config#merging-strategy
     },
     cssPath: '~/assets/styles/main.scss',
@@ -103,6 +103,12 @@ export default defineNuxtConfig({
   },
   imports: {
     dirs: ['stores/**', 'shared/**'],
+    presets: [
+      {
+        from: 'pinia',
+        imports: ['storeToRefs'],
+      },
+    ],
   },
   runtimeConfig: {
     public: {},
diff --git a/package.json b/package.json
index 79d8ea5b..824fcd2a 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "postinstall": "nuxt prepare",
+    "postinstall": "npm-run-all nuxt:prepare typechain",
     "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:*:fix\"",
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:{eslint,css,fmt,types}\"",
     "lint:eslint": "eslint --ext '.js,.vue,.ts' .",
@@ -23,15 +23,17 @@
     "test": "npx playwright test",
     "test:ui": "npx playwright test --ui",
     "test:debug": "npx playwright test --debug",
-    "pages:build": "cross-env NODE_ENV=production NITRO_PRESET=cloudflare_pages nuxt build --standalone"
+    "pages:build": "cross-env NODE_ENV=production NITRO_PRESET=cloudflare_pages nuxt build --standalone",
+    "nuxt:prepare": "nuxt prepare",
+    "typechain": "typechain --target web3-v1 --out-dir types/contracts/ './node_modules/@lukso/lsp-smart-contracts/artifacts/*.json'"
   },
   "devDependencies": {
-    "@erc725/erc725.js": "0.18.0",
+    "@erc725/erc725.js": "0.19.0",
     "@esbuild-plugins/node-globals-polyfill": "0.2.3",
     "@formatjs/intl": "^2.9.0",
     "@lukso/lsp-factory.js": "3.1.1",
     "@lukso/lsp-smart-contracts": "0.11.1",
-    "@lukso/web-components": "1.46.0",
+    "@lukso/web-components": "1.47.1",
     "@nuxt/devtools": "^0.7.4",
     "@nuxtjs/algolia": "^1.9.0",
     "@nuxtjs/device": "^3.1.0",
@@ -39,6 +41,7 @@
     "@nuxtjs/tailwindcss": "^6.8.0",
     "@pinia/nuxt": "^0.4.11",
     "@playwright/test": "1.36.2",
+    "@typechain/web3-v1": "^6.0.7",
     "@types/fs-extra": "11.0.1",
     "@types/node": "^20.4.7",
     "@types/randombytes": "2.0.0",
@@ -75,6 +78,7 @@
     "stylelint-config-standard-scss": "10.0.0",
     "stylelint-prettier": "4.0.2",
     "stylelint-scss": "5.0.1",
+    "typechain": "^8.3.2",
     "typescript": "5.1.6",
     "util": "0.12.5",
     "web3": "~1.10.0",
diff --git a/pages/[profileAddress]/index.vue b/pages/[profileAddress]/index.vue
index d878e39c..2358038b 100644
--- a/pages/[profileAddress]/index.vue
+++ b/pages/[profileAddress]/index.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
-
 import { AssetFilter } from '@/types/assets'
-import { REFERRERS } from '@/types/enums'
 
 const { status } = useViewedProfileStore()
 
@@ -55,7 +52,7 @@ const showProfileDetails = computed(
 <template>
   <div class="relative">
     <div
-      class="max-w-[835px] py-20 px-4 mx-auto relative transition-opacity duration-300"
+      class="max-w-content py-20 px-4 mx-auto relative transition-opacity duration-300"
       :class="{
         'opacity-0': status.isAssetLoading || status.isProfileLoading,
         'opacity-100': !status.isAssetLoading && !status.isProfileLoading,
diff --git a/pages/[profileAddress]/lyx-details.vue b/pages/[profileAddress]/lyx-details.vue
index 3cba1c61..9e04a063 100644
--- a/pages/[profileAddress]/lyx-details.vue
+++ b/pages/[profileAddress]/lyx-details.vue
@@ -31,7 +31,7 @@ const handleSendLyx = () => {
         'opacity-0': profileStatus.isAssetLoading,
         'opacity-100': !profileStatus.isAssetLoading,
       }"
-      class="max-w-[835px] py-20 px-4 mx-auto relative grid grid-cols-[1fr,2fr] gap-12 transition-opacity duration-300"
+      class="max-w-content py-20 px-4 mx-auto relative grid grid-cols-[1fr,2fr] gap-12 transition-opacity duration-300"
     >
       <div>
         <lukso-card is-full-width size="small">
@@ -56,6 +56,7 @@ const handleSendLyx = () => {
             :profile="connectedProfile"
             :amount="viewedProfile.balance"
             :symbol="currentNetwork.token.symbol"
+            :decimals="ASSET_LYX_DECIMALS"
           />
 
           <lukso-button is-full-width class="mt-4" @click="handleSendLyx">{{
@@ -69,9 +70,15 @@ const handleSendLyx = () => {
         <div class="heading-apax-24-medium pb-8">
           {{ $formatMessage('lyx_details_title') }}
         </div>
+        <AssetBalance
+          :balance="viewedProfile.balance"
+          :symbol="currentNetwork.token.symbol"
+          :decimals="ASSET_LYX_DECIMALS"
+        />
         <AssetSupply
-          :supply="currentNetwork.token.supply.toString()"
+          :token-supply="currentNetwork.token.supply.toString()"
           :symbol="currentNetwork.token.symbol"
+          :decimals="ASSET_LYX_DECIMALS"
         />
         <AssetLinks :links="links" />
         <AssetDescription
diff --git a/pages/[profileAddress]/nft/[nftAddress]/tokenId/[tokenId].vue b/pages/[profileAddress]/nft/[nftAddress]/tokenId/[tokenId].vue
index 89e95ecf..24779f6e 100644
--- a/pages/[profileAddress]/nft/[nftAddress]/tokenId/[tokenId].vue
+++ b/pages/[profileAddress]/nft/[nftAddress]/tokenId/[tokenId].vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { toWei } from 'web3-utils'
-
-import { Nft } from '@/types/assets'
+import { Asset } from '@/types/assets'
 
 const nftAddress = useRouter().currentRoute.value.params?.nftAddress
 const tokenId = useRouter().currentRoute.value.params?.tokenId
@@ -13,11 +11,27 @@ const {
 } = useViewedProfileStore()
 const { status: connectionStatus, profile: connectedProfile } =
   useConnectedProfileStore()
-const nft = ref<Nft>()
+const nft = ref<Asset>()
 
 watchEffect(() => {
   nft.value = getNft(nftAddress, tokenId)
 })
+
+const handleSendAsset = (event: Event) => {
+  try {
+    event.stopPropagation()
+    assertAddress(connectedProfile.address, 'profile')
+    assertAddress(nft.value?.address, 'nft')
+    navigateTo({
+      path: sendRoute(connectedProfile.address),
+      query: {
+        asset: nft.value.address,
+      },
+    })
+  } catch (error) {
+    console.error(error)
+  }
+}
 </script>
 
 <template>
@@ -27,40 +41,20 @@ watchEffect(() => {
         'opacity-0': profileStatus.isAssetLoading,
         'opacity-100': !profileStatus.isAssetLoading,
       }"
-      class="max-w-[835px] py-20 px-4 mx-auto relative grid grid-cols-[1fr,2fr] gap-12 transition-opacity duration-300"
+      class="max-w-content py-20 px-4 mx-auto relative grid grid-cols-[1fr,2fr] gap-12 transition-opacity duration-300"
     >
       <div>
         <lukso-card size="small" is-full-width
           ><div slot="content">
             <div
               class="min-h-[260px] bg-neutral-90 w-100 rounded-t-12 bg-center bg-cover"
-              :style="`background-image: url(${nft?.data.image});`"
+              :style="`background-image: url(${getAssetThumb(nft)});`"
             ></div>
             <div class="p-4 pt-8 relative">
-              <div
-                v-if="nft?.data.creatorAddress"
-                class="shadow-neutral-drop-shadow p-2 pr-6 rounded-4 inline-flex -top-6 absolute bg-neutral-100"
-              >
-                <lukso-profile
-                  size="x-small"
-                  :profile-url="nft.data.creatorProfileImage"
-                ></lukso-profile>
-                <div class="pl-1">
-                  <div class="text-neutral-60 paragraph-inter-10-semi-bold">
-                    {{ $formatMessage('asset_created_by') }}
-                  </div>
-                  <lukso-username
-                    :name="nft.data.creatorName"
-                    :address="nft.data.creatorAddress"
-                    size="x-small"
-                    class="flex"
-                    name-color="neutral-20"
-                  ></lukso-username>
-                </div>
-              </div>
+              <AssetCreator v-if="nft" :asset="nft" class="absolute -top-5" />
               <div>
                 <div class="paragraph-inter-14-semi-bold">
-                  {{ nft?.data.collectionName }}
+                  {{ nft?.name }}
                 </div>
               </div>
             </div>
@@ -74,43 +68,36 @@ watchEffect(() => {
         >
           <AssetOwnInfo
             :profile="connectedProfile"
-            :amount="toWei('1')"
-            :symbol="nft?.data.collectionSymbol"
+            :amount="nft?.amount"
+            :symbol="nft?.symbol"
+            :decimals="0"
           />
 
-          <lukso-button is-full-width class="mt-4 hidden">{{
+          <lukso-button is-full-width class="mt-4" @click="handleSendAsset">{{
             $formatMessage('token_details_send', {
-              token: nft?.data.collectionSymbol || '',
+              token: nft?.symbol || '',
             })
           }}</lukso-button>
         </div>
       </div>
       <div>
         <div class="heading-apax-24-medium pb-8">
-          {{ nft?.data.collectionName }}
+          {{ nft?.name }}
         </div>
         <AssetAddress v-if="nft?.address" :address="nft.address" />
-        <AssetTokenId v-if="nft?.data.tokenId" :token-id="nft.data.tokenId" />
+        <AssetTokenId v-if="nft?.tokenId" :token-id="nft.tokenId" />
         <AssetSupply
-          :supply="nft?.data.tokenSupply || '1'"
-          :symbol="nft?.data.collectionSymbol || ''"
-        />
-        <AssetLinks
-          v-if="nft?.data && 'collectionLinks' in nft?.data"
-          :links="nft.data.collectionLinks"
+          v-if="nft?.tokenSupply"
+          :token-supply="nft?.tokenSupply"
+          :symbol="nft?.symbol"
+          :decimals="nft.decimals"
         />
+        <AssetLinks v-if="nft?.links" :links="nft.links" />
         <AssetDescription
-          v-if="nft?.data && 'description' in nft.data && nft.data.description"
-          :description="nft.data.description"
-        />
-        <AssetImages
-          v-if="
-            nft?.data &&
-            'collectionImages' in nft.data &&
-            nft.data.collectionImages
-          "
-          :images="nft.data.collectionImages"
+          v-if="nft?.description"
+          :description="nft.description"
         />
+        <AssetImages v-if="nft?.images" :images="nft.images" />
         <AssetStandardInfo
           v-if="nft?.standard"
           :standard="nft.standard"
diff --git a/pages/[profileAddress]/send.vue b/pages/[profileAddress]/send.vue
index ef634fd3..1a979faf 100644
--- a/pages/[profileAddress]/send.vue
+++ b/pages/[profileAddress]/send.vue
@@ -1,43 +1,75 @@
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
-import { toWei } from 'web3-utils'
+import { AbiItem, toWei } from 'web3-utils'
 import { TransactionConfig } from 'web3-core'
+import LSP7Mintable from '@lukso/lsp-smart-contracts/artifacts/LSP7Mintable.json'
+import LSP8Mintable from '@lukso/lsp-smart-contracts/artifacts/LSP8Mintable.json'
 
-import { PROVIDERS } from '@/types/enums'
+import {
+  LSP7DigitalAsset,
+  LSP8IdentifiableDigitalAsset,
+} from '@/types/contracts'
 
 const { profile: connectedProfile, status } = useConnectedProfileStore()
-const { profile: viewedProfile } = useViewedProfileStore()
+const {
+  profile: viewedProfile,
+  setBalance,
+  removeNft,
+} = useViewedProfileStore()
+const { ownedAssets } = storeToRefs(useViewedProfileStore())
 const { currentNetwork } = useAppStore()
 const { asset, onSend, amount, receiver } = storeToRefs(useSendStore())
 const { setStatus, clearSend } = useSendStore()
 const { showModal } = useModal()
 const { formatMessage } = useIntl()
-const { sendTransaction, getBalance } = useWeb3(PROVIDERS.INJECTED)
+const { sendTransaction, getBalance, contract } = useWeb3(PROVIDERS.INJECTED)
 
 onMounted(() => {
   setStatus('draft')
-  clearSend()
 
-  asset.value = {
-    name: 'LUKSO',
-    symbol: currentNetwork.token.symbol,
-    icon: ASSET_LYX_ICON_URL,
+  onSend.value = handleSend
+
+  // for nft's we prefill amount
+  if (isNft(asset.value)) {
+    amount.value = '1'
   }
+})
 
-  onSend.value = handleSend
+onUnmounted(() => {
+  setStatus('draft')
+  clearSend()
 })
 
 watchEffect(() => {
-  if (!asset.value) {
+  // until everything is loaded we skip this effect
+  if (!status.isProfileLoaded) {
     return
   }
 
+  try {
+    amount.value = undefined
+    const assetAddress = useRouter().currentRoute.value.query.asset
+    assertAddress(assetAddress, 'asset')
+    asset.value = ownedAssets.value?.find(
+      asset => asset.address === assetAddress
+    )
+    assertAddress(asset.value?.address, 'asset')
+  } catch (error) {
+    // fallback to native token
+    asset.value = {
+      name: currentNetwork.token.name,
+      symbol: currentNetwork.token.symbol,
+      icon: ASSET_LYX_ICON_URL,
+      isNativeToken: true,
+    }
+  }
+
   // since balance is not avail in onMounted hook
   asset.value = {
     ...asset.value,
-    amount: connectedProfile.balance,
+    amount: isLyx(asset.value) ? connectedProfile.balance : asset.value.amount,
   }
 
+  // when logout
   if (!status.isConnected) {
     navigateTo(homeRoute())
   }
@@ -47,16 +79,69 @@ const handleSend = async () => {
   try {
     setStatus('pending')
 
-    let transaction = {
-      from: connectedProfile.address,
-      to: receiver.value?.address as unknown as string,
-      value: toWei(amount.value || '0'),
-      gas: DEFAULT_GAS,
-      gasPrice: DEFAULT_GAS_PRICE,
-    } as TransactionConfig
+    // native token transfer
+    if (isLyx(asset.value)) {
+      const transaction = {
+        from: connectedProfile.address,
+        to: receiver.value?.address as unknown as string,
+        value: toWei(amount.value || '0'),
+      } as TransactionConfig
+
+      await sendTransaction(transaction)
+      await updateLyxBalance()
+    } else {
+      // custom token transfer
+      switch (asset.value?.standard) {
+        case 'LSP7DigitalAsset':
+          const tokenContract = contract<LSP7DigitalAsset>(
+            LSP7Mintable.abi as AbiItem[],
+            asset.value?.address
+          )
+
+          assertAddress(connectedProfile.address)
+          assertAddress(receiver.value?.address)
+          await tokenContract.methods
+            .transfer(
+              connectedProfile.address,
+              receiver.value?.address,
+              toWei(amount.value || '0'),
+              false,
+              '0x'
+            )
+            .send({ from: connectedProfile.address })
+          const balance = (await tokenContract.methods
+            .balanceOf(connectedProfile.address)
+            .call()) as string
+          assertAddress(asset.value?.address, 'asset')
+          setBalance(asset.value.address, balance)
+          break
+        case 'LSP8IdentifiableDigitalAsset':
+          const nftContract = contract<LSP8IdentifiableDigitalAsset>(
+            LSP8Mintable.abi as AbiItem[],
+            asset.value?.address
+          )
+
+          assertAddress(connectedProfile.address)
+          assertAddress(receiver.value?.address)
+          assertString(asset.value.tokenId)
+          await nftContract.methods
+            .transfer(
+              connectedProfile.address,
+              receiver.value?.address,
+              asset.value.tokenId,
+              false,
+              '0x'
+            )
+            .send({ from: connectedProfile.address })
+          assertNotUndefined(asset.value.address, 'asset')
+          removeNft(asset.value.address, asset.value.tokenId)
+          break
+        default:
+          console.error('Unknown token type')
+          break
+      }
+    }
 
-    await sendTransaction(transaction)
-    await updateBalance()
     setStatus('success')
   } catch (error: any) {
     console.error(error)
@@ -71,9 +156,9 @@ const handleSend = async () => {
             message: formatMessage('send_error_rejected_request'),
           })
         default:
-          return showModal({
+          showModal({
             title: formatMessage('send_error_title'),
-            message: error.message,
+            message: formatMessage('send_error_message'),
           })
       }
     }
@@ -86,7 +171,7 @@ const handleSend = async () => {
   }
 }
 
-const updateBalance = async () => {
+const updateLyxBalance = async () => {
   assertString(connectedProfile.address)
   connectedProfile.balance = await getBalance(connectedProfile.address)
 
diff --git a/pages/[profileAddress]/token/[tokenAddress].vue b/pages/[profileAddress]/token/[tokenAddress].vue
index 0f03d778..4252e9fe 100644
--- a/pages/[profileAddress]/token/[tokenAddress].vue
+++ b/pages/[profileAddress]/token/[tokenAddress].vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { fromWei } from 'web3-utils'
-
-import { Token } from '@/types/assets'
+import { Asset } from '@/types/assets'
 
 const tokenAddress = useRouter().currentRoute.value.params?.tokenAddress
 const {
@@ -11,15 +9,27 @@ const {
 } = useViewedProfileStore()
 const { status: connectionStatus, profile: connectedProfile } =
   useConnectedProfileStore()
-const token = ref<Token>()
+const token = ref<Asset>()
 
 watchEffect(() => {
   token.value = getToken(tokenAddress)
 })
 
-const tokenSupply = computed(() => {
-  return fromWei(token.value?.data.tokenSupply || '0', 'ether')
-})
+const handleSendAsset = (event: Event) => {
+  try {
+    event.stopPropagation()
+    assertAddress(connectedProfile.address, 'profile')
+    assertAddress(token.value?.address, 'token')
+    navigateTo({
+      path: sendRoute(connectedProfile.address),
+      query: {
+        asset: token.value.address,
+      },
+    })
+  } catch (error) {
+    console.error(error)
+  }
+}
 </script>
 
 <template>
@@ -29,7 +39,7 @@ const tokenSupply = computed(() => {
         'opacity-0': profileStatus.isAssetLoading,
         'opacity-100': !profileStatus.isAssetLoading,
       }"
-      class="max-w-[835px] py-20 px-4 mx-auto relative grid grid-cols-[1fr,2fr] gap-12 transition-opacity duration-300"
+      class="max-w-content py-20 px-4 mx-auto relative grid grid-cols-[1fr,2fr] gap-12 transition-opacity duration-300"
     >
       <div>
         <lukso-card is-full-width size="small">
@@ -40,7 +50,7 @@ const tokenSupply = computed(() => {
             <lukso-profile
               v-if="token"
               size="large"
-              :profile-url="'icon' in token.data ? token.data.icon : undefined"
+              :profile-url="token.icon"
               class="shadow-neutral-above-shadow-1xl rounded-full"
             ></lukso-profile>
           </div>
@@ -53,37 +63,42 @@ const tokenSupply = computed(() => {
         >
           <AssetOwnInfo
             :profile="connectedProfile"
-            :amount="token?.data.amount"
-            :symbol="token?.data.symbol"
+            :amount="token?.amount"
+            :symbol="token?.symbol"
+            :decimals="token?.decimals"
           />
 
-          <lukso-button is-full-width class="mt-4 hidden">{{
+          <lukso-button is-full-width class="mt-4" @click="handleSendAsset">{{
             $formatMessage('token_details_send', {
-              token: token?.data.symbol || '',
+              token: token?.symbol || '',
             })
           }}</lukso-button>
         </div>
       </div>
       <div>
-        <div class="heading-apax-24-medium pb-8">{{ token?.data.name }}</div>
+        <div class="heading-apax-24-medium pb-8">{{ token?.name }}</div>
         <AssetAddress v-if="token?.address" :address="token.address" />
-        <AssetSupply :supply="tokenSupply" :symbol="token?.data.symbol || ''" />
+        <AssetBalance
+          v-if="token?.amount"
+          :balance="token.amount"
+          :symbol="token?.symbol"
+          :decimals="token?.decimals"
+        />
+        <AssetSupply
+          v-if="token?.tokenSupply"
+          :token-supply="token?.tokenSupply"
+          :symbol="token?.symbol"
+          :decimals="token?.decimals"
+        />
         <AssetLinks
-          v-if="
-            token?.data && 'links' in token?.data && token.data.links.length > 0
-          "
-          :links="token.data.links"
+          v-if="token?.links && token.links.length > 0"
+          :links="token.links"
         />
         <AssetDescription
-          v-if="
-            token?.data && 'description' in token.data && token.data.description
-          "
-          :description="token.data.description"
-        />
-        <AssetImages
-          v-if="token?.data && 'images' in token.data && token.data.images"
-          :images="token.data.images"
+          v-if="token?.description"
+          :description="token.description"
         />
+        <AssetImages v-if="token?.images" :images="token.images" />
         <AssetStandardInfo
           v-if="token?.standard"
           :standard="token.standard"
diff --git a/plugins/1.isBrave.ts b/plugins/1.isBrave.ts
index c6ec268b..354df8ac 100644
--- a/plugins/1.isBrave.ts
+++ b/plugins/1.isBrave.ts
@@ -1,3 +1,5 @@
+import { DeviceExtended, NavigatorExtended } from '@/types/device'
+
 /**
  * Detects if the browser is Brave
  *
diff --git a/plugins/2.isOpera.ts b/plugins/2.isOpera.ts
index e6fde744..185b4144 100644
--- a/plugins/2.isOpera.ts
+++ b/plugins/2.isOpera.ts
@@ -1,3 +1,5 @@
+import { DeviceExtended } from '@/types/device'
+
 type OperaWindow = Window & {
   opera?: { addons?: unknown }
   opr?: { addons?: unknown }
diff --git a/shared/config.ts b/shared/config.ts
index 153029fb..83fbe8da 100644
--- a/shared/config.ts
+++ b/shared/config.ts
@@ -1,3 +1,5 @@
+import { NetworkInfo } from '@/types/network'
+
 // id of the network to use by default
 export const DEFAULT_NETWORK_ID = 'testnet'
 
@@ -11,6 +13,7 @@ export const NETWORKS: NetworkInfo[] = [
     token: {
       symbol: 'LYXt',
       supply: 42_000_000,
+      name: 'LUKSO',
     },
   },
   {
@@ -21,6 +24,7 @@ export const NETWORKS: NetworkInfo[] = [
     token: {
       symbol: 'LYX',
       supply: 42_000_000,
+      name: 'LUKSO',
     },
   },
 ]
@@ -32,7 +36,7 @@ export const MODAL_DEFAULT_TEMPLATE = 'Default'
 export const INJECTED_PROVIDER = window?.lukso
 
 // connection expiry time
-export const CONNECTION_EXPIRY_TIME_MS = 1000 * 60 * 30 // 30 minutes
+export const CONNECTION_EXPIRY_TIME_MS = 1000 * 60 * 60 * 2 // 2 hours
 
 // interval to check if the user is still connected
 export const CONNECTION_EXPIRY_CHECK_INTERVAL_MS = 1000 * 10 // 10 seconds
@@ -43,6 +47,9 @@ export const ASSET_ICON_PLACEHOLDER_URL = '/images/token-default.svg'
 // lyx token icon
 export const ASSET_LYX_ICON_URL = '/images/lyx-token.svg'
 
+// number of decimal places for LYX token
+export const ASSET_LYX_DECIMALS = '18'
+
 // url of the ipfs gateway
 export const IPFS_URL = 'https://2eff.lukso.dev/ipfs/'
 
@@ -61,10 +68,6 @@ export const EXTENSION_STORE_LINKS = {
   firefox: '',
 }
 
-// transaction default gas values
-export const DEFAULT_GAS = 5_000_000
-export const DEFAULT_GAS_PRICE = '10000000000'
-
 // indexer params
 export const INDEX_NAME = 'prod_testnet_universal_profiles'
 
diff --git a/types/enums.ts b/shared/enums.ts
similarity index 100%
rename from types/enums.ts
rename to shared/enums.ts
diff --git a/stores/app.ts b/stores/app.ts
index 71690bf7..ea087de6 100644
--- a/stores/app.ts
+++ b/stores/app.ts
@@ -1,3 +1,6 @@
+import { Modal } from '@/types/modal'
+import { NetworkInfo, NetworkId } from '@/types/network'
+
 /**
  * Connection store
  * Keeps the information about connected profile and it's status
diff --git a/stores/profileConnected.ts b/stores/profileConnected.ts
index cbd540cb..5da89ab7 100644
--- a/stores/profileConnected.ts
+++ b/stores/profileConnected.ts
@@ -1,3 +1,5 @@
+import { Profile } from '@/types/profile'
+
 /**
  * Connected profile store
  *
@@ -9,6 +11,7 @@ export const useConnectedProfileStore = defineStore('profileConnected', () => {
   const status = reactive({
     isConnected: false,
     isProfileLoading: false,
+    isProfileLoaded: false,
     isConnecting: false,
   })
 
diff --git a/stores/profileViewed.ts b/stores/profileViewed.ts
index f572259c..912da991 100644
--- a/stores/profileViewed.ts
+++ b/stores/profileViewed.ts
@@ -1,12 +1,11 @@
 import {
+  Asset,
   AssetFilter,
   InterfaceId,
-  Nft,
-  SupportedAssets,
-  Token,
   nftStandards,
   tokenStandards,
 } from '@/types/assets'
+import { Profile } from '@/types/profile'
 
 /**
  * Viewed profile store
@@ -18,14 +17,14 @@ export const useViewedProfileStore = defineStore('profileViewed', () => {
   const profile = reactive<Profile>({} as Profile)
   const status = reactive({ isProfileLoading: true, isAssetLoading: true })
   const assetFilter = ref<AssetFilter>(AssetFilter.owned)
-  const ownedAssets = ref<SupportedAssets[]>()
-  const createdAssets = ref<SupportedAssets[]>()
+  const ownedAssets = ref<Asset[]>()
+  const createdAssets = ref<Asset[]>()
 
   // --- getters
 
   const tokens = computed(() => {
     return (assetFilter: AssetFilter) => {
-      let assets: SupportedAssets[] = []
+      let assets: Asset[] = []
 
       switch (assetFilter) {
         case AssetFilter.owned:
@@ -39,16 +38,16 @@ export const useViewedProfileStore = defineStore('profileViewed', () => {
       }
 
       return (
-        (assets?.filter(asset =>
+        assets?.filter(asset =>
           tokenStandards.includes(asset.standard as InterfaceId)
-        ) as Token[]) || []
+        ) || []
       )
     }
   })
 
   const nfts = computed(() => {
     return (assetFilter: AssetFilter) => {
-      let assets: SupportedAssets[] = []
+      let assets: Asset[] = []
 
       switch (assetFilter) {
         case AssetFilter.owned:
@@ -62,9 +61,9 @@ export const useViewedProfileStore = defineStore('profileViewed', () => {
       }
 
       return (
-        (assets?.filter(nft =>
+        assets?.filter(nft =>
           nftStandards.includes(nft.standard as InterfaceId)
-        ) as Nft[]) || []
+        ) || []
       )
     }
   })
@@ -73,7 +72,7 @@ export const useViewedProfileStore = defineStore('profileViewed', () => {
     return (tokenAddress: Address) => {
       const assets = ownedAssets.value?.concat(createdAssets.value || [])
 
-      return assets?.find(asset => asset.address === tokenAddress) as Token
+      return assets?.find(asset => asset.address === tokenAddress)
     }
   })
 
@@ -82,21 +81,18 @@ export const useViewedProfileStore = defineStore('profileViewed', () => {
       const assets = ownedAssets.value?.concat(createdAssets.value || [])
 
       return assets?.find(
-        asset =>
-          asset.address === nftAddress &&
-          'tokenId' in asset.data &&
-          asset.data.tokenId === tokenId
-      ) as Nft
+        asset => asset.address === nftAddress && asset.tokenId === tokenId
+      )
     }
   })
 
   // --- actions
 
-  const setOwnedAssets = (assets: SupportedAssets[]) => {
+  const setOwnedAssets = (assets: Asset[]) => {
     ownedAssets.value = assets
   }
 
-  const setCreatedAssets = (assets: SupportedAssets[]) => {
+  const setCreatedAssets = (assets: Asset[]) => {
     createdAssets.value = assets
   }
 
@@ -104,6 +100,26 @@ export const useViewedProfileStore = defineStore('profileViewed', () => {
     status[statusName] = newStatus
   }
 
+  const setBalance = (assetAddress: Address, balance: string) => {
+    const ownedAssetsUpdated = ownedAssets.value?.map(asset => {
+      if (asset.address === assetAddress) {
+        asset.amount = balance
+      }
+
+      return asset
+    })
+
+    ownedAssetsUpdated && setOwnedAssets(ownedAssetsUpdated)
+  }
+
+  const removeNft = (assetAddress: Address, tokenId: string) => {
+    const ownedAssetsUpdated = ownedAssets.value?.filter(
+      asset => asset.tokenId !== tokenId && asset.address !== assetAddress
+    )
+
+    ownedAssetsUpdated && setOwnedAssets(ownedAssetsUpdated)
+  }
+
   return {
     ...useProfileBase(profile),
     profile,
@@ -118,5 +134,7 @@ export const useViewedProfileStore = defineStore('profileViewed', () => {
     setCreatedAssets,
     getToken,
     getNft,
+    setBalance,
+    removeNft,
   }
 })
diff --git a/stores/send.ts b/stores/send.ts
index d927b983..707d26d9 100644
--- a/stores/send.ts
+++ b/stores/send.ts
@@ -1,9 +1,10 @@
-import { SendAsset } from '@/types/assets'
+import { Asset } from '@/types/assets'
+import { Receiver } from '@/types/profile'
 
 type SendStatus = 'draft' | 'pending' | 'success'
 
 export const useSendStore = defineStore('send', () => {
-  const asset = ref<SendAsset>()
+  const asset = ref<Asset>()
   const receiver = ref<Receiver>()
   const receiverError = ref<string>()
   const amount = ref<string>()
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 00000000..73a95f50
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  presets: [require('@lukso/web-components/tailwind.config')],
+  theme: {
+    extend: {
+      maxWidth: {
+        content: '880px',
+      },
+    },
+  },
+  plugins: [],
+}
diff --git a/tests/e2e/index.spec.ts-snapshots/landing-no-extension-chrome.png b/tests/e2e/index.spec.ts-snapshots/landing-no-extension-chrome.png
index faa3b665..c1b29ee7 100644
Binary files a/tests/e2e/index.spec.ts-snapshots/landing-no-extension-chrome.png and b/tests/e2e/index.spec.ts-snapshots/landing-no-extension-chrome.png differ
diff --git a/translations/en_US.json b/translations/en_US.json
index ef75e999..adbf64ec 100644
--- a/translations/en_US.json
+++ b/translations/en_US.json
@@ -30,6 +30,7 @@
   "asset_standard_info_LSP8_details": "Info about the standard goes here....",
   "web3_connect_error_rejected_request": "You rejected the request",
   "modal_default_title": "Something went wrong...",
+  "modal_select_assets_title": "Select a token to send",
   "footer_need_help_text": "NEED HELP?",
   "landing_hero_description_not_connected": "Connect to <span class=\"paragraph-inter-16-semi-bold\">view</span> and send assets from your <span class=\"paragraph-inter-16-semi-bold\">Universal Profile</span>.",
   "lyx_details_title": "LUKSO",
@@ -56,6 +57,7 @@
   "header_disconnect": "Disconnect",
   "tokens_title": "Tokens",
   "footer_faq_text": "FAQs",
+  "asset_balance_title": "Token Balance",
   "asset_created_by": "Created by",
   "collectibles_title": "Collectibles",
   "modal_default_confirm": "Ok",
diff --git a/tsconfig.json b/tsconfig.json
index 2e85f557..a037b3ba 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,6 +9,7 @@
     },
     "types": [
       "node",
+      "@nuxtjs/device"
     ],
   }
 }
diff --git a/types/assets.ts b/types/assets.ts
index 383d46fc..3efc6eee 100644
--- a/types/assets.ts
+++ b/types/assets.ts
@@ -1,11 +1,9 @@
-import { ImageMetadata, LinkMetadata } from '@lukso/lsp-factory.js'
+import { LinkMetadata } from '@lukso/lsp-factory.js'
 import { INTERFACE_IDS } from '@lukso/lsp-smart-contracts'
 
 export type InterfaceId = keyof typeof INTERFACE_IDS
-export type SupportedStandards = keyof AssetApi
-export type SupportedAssets = Asset<SupportedStandards>
 
-export const tokenStandards: InterfaceId[] = ['LSP7DigitalAsset', 'ERC20']
+export const tokenStandards: InterfaceId[] = ['LSP7DigitalAsset']
 export const nftStandards: InterfaceId[] = ['LSP8IdentifiableDigitalAsset']
 
 export const StandardsAbbreviations: { [K in InterfaceId]?: string } = {
@@ -14,89 +12,40 @@ export const StandardsAbbreviations: { [K in InterfaceId]?: string } = {
   LSP8IdentifiableDigitalAsset: 'LSP8',
 }
 
-export interface Asset<T extends keyof AssetApi> {
-  address: Address
-  standard?: InterfaceId
-  data: AssetApi[T]
-}
-
-export interface TokenApi {
-  LSP7DigitalAsset: LSP7Asset
-  ERC20: ERC20Asset
-}
-
-export type SupportedTokens = keyof TokenApi
-export type SupportedNfts = keyof NftApi
-export type Token = Asset<Partial<SupportedTokens>>
-export type Nft = Asset<Partial<SupportedNfts>>
-
-export interface NativeToken {
-  name: string
-  symbol: string
-  icon: string
-  amount: string
-}
-
-export interface NftApi {
-  LSP8IdentifiableDigitalAsset: LSP8Asset
-}
-
-export type AssetApi = TokenApi & NftApi
-
-export interface LSP7Asset {
-  name: string
-  symbol: string
-  amount: string
-  icon: string
-  address: string
-  links: LinkMetadata[]
-  description: string
-  images: ImageMetadata[][]
-  tokenSupply: string
-  decimals: string
-}
-
-export interface ERC20Asset {
-  name: string
-  symbol: string
-  amount: string
-  address: string
-  tokenSupply: string
-  decimals: string
-}
-
-export interface LSP8Asset {
-  image: string
-  icon: string
-  tokenId: string
-  description: string
-  tokenSupply: string
-  collectionName: string
-  collectionDescription: string
-  collectionImages: ImageMetadata[][]
-  collectionIcon: string
-  collectionAddress: string
-  collectionSymbol: string
-  collectionLinks: LinkMetadata[]
-  creatorName?: string
-  creatorAddress?: Address
-  creatorProfileImage?: string
-}
-
 export enum AssetFilter {
   owned = 'owned',
   created = 'created',
 }
 
-export enum TokenIdType {
+export enum Lsp8TokenIdType {
   address = '1',
   number = '2',
   bytes32 = '3',
 }
 
-export type SendAsset = {
+export type Base64EncodedImage = `data:image/jpeg;base64${string}`
+
+export type Asset = {
+  // generic (ERC20)
+  address?: Address
   name?: string
-  amount?: string
   symbol?: string
-  icon?: string
+  amount?: string
+  decimals?: number
+  tokenSupply?: string
+
+  // LSP7/LSP8
+  icon?: string | Base64EncodedImage
+  standard?: InterfaceId
+  description?: string
+  images?: Base64EncodedImage[]
+  links?: LinkMetadata[]
+  creatorName?: string
+  creatorAddress?: Address
+  creatorProfileImage?: Base64EncodedImage
+  tokenId?: string
+
+  // custom
+  isNativeToken?: boolean
+  metadata?: any
 }
diff --git a/types/device.ts b/types/device.ts
new file mode 100644
index 00000000..fa98d329
--- /dev/null
+++ b/types/device.ts
@@ -0,0 +1,22 @@
+import { Device } from 'node_modules/@nuxtjs/device/dist/runtime/types'
+
+export type NavigatorExtended = Navigator & {
+  brave?: { isBrave: () => Promise<boolean> }
+}
+
+export type BrowserName =
+  | 'chrome'
+  | 'safari'
+  | 'firefox'
+  | 'edge'
+  | 'opera'
+  | 'brave'
+
+export type DeviceExtended = Device & { isBrave: boolean; isOpera: boolean }
+
+export type BrowserInfo = {
+  id: BrowserName
+  name: string
+  icon: string
+  storeLink: string
+}
diff --git a/types/global.d.ts b/types/global.d.ts
index d6383830..9827c765 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -1,69 +1,12 @@
-import { LSP3Profile } from '@lukso/lsp-factory.js'
-
 declare global {
   type Address = `0x${string}`
 
-  type Profile = LSP3Profile & {
-    backgroundImageUrl?: string
-    profileImageUrl?: string
-    address?: Address
-    balance: string
-  }
-
-  type Receiver = Partial<Profile> & { isEoa?: boolean }
-
-  type Creator = Partial<Pick<Profile, 'address' | 'profileImageUrl' | 'name'>>
-
-  type NetworkId = string
-  type ChainIdHex = `0x${string}`
-
-  interface NetworkInfo {
-    id: NetworkId
-    name: string
-    rpcHttp: string
-    chainId: ChainIdHex
-    storeUrls?: { [key in BrowserName]: string }
-    token: {
-      symbol: string
-      supply: number
-    }
-  }
+  type Base64EncodedImage = `data:image/jpeg;base64${string}`
 
   interface Window {
     lukso: any
     ethereum: any
   }
-
-  interface Modal {
-    title?: string
-    message?: string
-    isOpen?: boolean
-    confirmButtonText?: string
-    icon?: string
-    template?: string
-    onConfirm?: () => void
-  }
-
-  type NavigatorExtended = Navigator & {
-    brave?: { isBrave: () => Promise<boolean> }
-  }
-
-  type BrowserName =
-    | 'chrome'
-    | 'safari'
-    | 'firefox'
-    | 'edge'
-    | 'opera'
-    | 'brave'
-
-  type DeviceExtended = Device & { isBrave: boolean; isOpera: boolean }
-
-  type BrowserInfo = {
-    id: BrowserName
-    name: string
-    icon: string
-    storeLink: string
-  }
 }
 
 export {}
diff --git a/types/modal.ts b/types/modal.ts
new file mode 100644
index 00000000..579b8c84
--- /dev/null
+++ b/types/modal.ts
@@ -0,0 +1,9 @@
+export interface Modal {
+  title?: string
+  message?: string
+  isOpen?: boolean
+  confirmButtonText?: string
+  icon?: string
+  template?: string
+  onConfirm?: () => void
+}
diff --git a/types/network.ts b/types/network.ts
new file mode 100644
index 00000000..6225ce37
--- /dev/null
+++ b/types/network.ts
@@ -0,0 +1,17 @@
+import { BrowserName } from './device'
+
+export type NetworkId = string
+export type ChainIdHex = `0x${string}`
+
+export interface NetworkInfo {
+  id: NetworkId
+  name: string
+  rpcHttp: string
+  chainId: ChainIdHex
+  storeUrls?: { [key in BrowserName]: string }
+  token: {
+    symbol: string
+    supply: number
+    name: string
+  }
+}
diff --git a/types/profile.ts b/types/profile.ts
index b152f09a..cd7bea9c 100644
--- a/types/profile.ts
+++ b/types/profile.ts
@@ -1,5 +1,18 @@
 import { LSP3Profile } from '@lukso/lsp-factory.js'
 
+export interface Profile extends LSP3Profile {
+  backgroundImageUrl?: Base64EncodedImage
+  profileImageUrl?: Base64EncodedImage
+  address?: Address
+  balance: string
+}
+
+export type Receiver = Partial<Profile> & { isEoa?: boolean }
+
+export type Creator = Partial<
+  Pick<Profile, 'address' | 'profileImageUrl' | 'name'>
+>
+
 export interface IndexedProfile {
   address: Address
   profileURL?: string
diff --git a/utils/assetChecks.ts b/utils/assetChecks.ts
new file mode 100644
index 00000000..c9a085bf
--- /dev/null
+++ b/utils/assetChecks.ts
@@ -0,0 +1,14 @@
+import { Asset, nftStandards, tokenStandards } from '@/types/assets'
+
+export const isLyx = (asset?: Asset) => asset?.isNativeToken
+
+export const isNft = (asset?: Asset) =>
+  asset?.standard && nftStandards.includes(asset.standard)
+
+export const isToken = (asset?: Asset) =>
+  asset?.standard && tokenStandards.includes(asset.standard)
+
+export const isLsp7 = (asset?: Asset) => asset?.standard === 'LSP7DigitalAsset'
+
+export const isLsp8 = (asset?: Asset) =>
+  asset?.standard === 'LSP8IdentifiableDigitalAsset'
diff --git a/utils/browserInfo.ts b/utils/browserInfo.ts
index 66c90b00..e2dd5c16 100644
--- a/utils/browserInfo.ts
+++ b/utils/browserInfo.ts
@@ -1,3 +1,5 @@
+import { BrowserInfo, DeviceExtended } from '@/types/device'
+
 const detectBrowser = (): BrowserInfo | undefined => {
   const { isChrome, isBrave, isFirefox, isSafari, isEdge, isOpera } =
     useDevice() as DeviceExtended
diff --git a/utils/detectStandard.ts b/utils/detectStandard.ts
index 03088cdf..cfc8c709 100644
--- a/utils/detectStandard.ts
+++ b/utils/detectStandard.ts
@@ -5,8 +5,6 @@ import { InterfaceId } from '@/types/assets'
 export const detectStandard = async (
   contractAddress: Address
 ): Promise<InterfaceId | undefined> => {
-  const { supportInterface } = useErc725()
-
   // LSP0
   if (
     await supportInterface(contractAddress, INTERFACE_IDS.LSP0ERC725Account)
diff --git a/utils/fetchLSP7Assets.ts b/utils/fetchLSP7Assets.ts
index 33ec27f1..b9115a84 100644
--- a/utils/fetchLSP7Assets.ts
+++ b/utils/fetchLSP7Assets.ts
@@ -1,58 +1,48 @@
 import LSP7DigitalAsset from '@lukso/lsp-smart-contracts/artifacts/LSP7DigitalAsset.json'
-import { LSP4DigitalAssetJSON } from '@lukso/lsp-factory.js/build/main/src/lib/interfaces/lsp4-digital-asset'
 
-import { PROVIDERS } from '@/types/enums'
-import { LSP7Asset } from '@/types/assets'
+import { Asset } from '@/types/assets'
+import { LSP7DigitalAsset as LSP7DigitalAssetInterface } from '@/types/contracts'
 
-const fetchLSP7Assets = async (
-  assetAddress: Address,
+export const fetchLsp7Assets = async (
+  address: Address,
   profileAddress: Address
-): Promise<LSP7Asset | undefined> => {
-  const { fetchLSP4Metadata } = useErc725()
-  const lsp4Metadata = await fetchLSP4Metadata(assetAddress)
+): Promise<Asset> => {
+  const [name, symbol, metadata] = await fetchLsp4Metadata(address)
 
   const { contract } = useWeb3(PROVIDERS.RPC)
-  const lsp7Contract = contract(LSP7DigitalAsset.abi as any, assetAddress)
+  const lsp7Contract = contract<LSP7DigitalAssetInterface>(
+    LSP7DigitalAsset.abi as any,
+    address
+  )
 
-  const tokenBalance = await lsp7Contract.methods
-    .balanceOf(profileAddress)
-    .call()
+  const balance = await lsp7Contract.methods.balanceOf(profileAddress).call()
   const tokenSupply = await lsp7Contract.methods.totalSupply().call()
-  const decimals = await lsp7Contract.methods.decimals().call()
+  const decimals = Number(await lsp7Contract.methods.decimals().call())
+  const icon =
+    (await getAndConvertImage(metadata.LSP4Metadata.icon, 200)) ||
+    ASSET_ICON_PLACEHOLDER_URL
+  const { links, description } = metadata.LSP4Metadata
+  const images: Base64EncodedImage[] = []
 
-  const lsp7Object = createLSP7Object(
-    lsp4Metadata,
-    tokenBalance,
-    assetAddress,
-    tokenSupply,
-    decimals
-  )
-  return lsp7Object
-}
+  for await (const image of metadata.LSP4Metadata.images) {
+    const convertedImage = await getAndConvertImage(image, 400)
+    if (convertedImage) {
+      images.push(convertedImage)
+    }
+  }
 
-const createLSP7Object = (
-  lsp4DigitalAssetJSON: [string, string, LSP4DigitalAssetJSON],
-  tokenBalance: number,
-  assetAddress: Address,
-  tokenSupply: string,
-  decimals: string
-): LSP7Asset => {
-  const [name, symbol, lsp4MetadataJSON] = lsp4DigitalAssetJSON
-  const lsp7AssetObject = {
+  return {
+    address,
     name,
     symbol,
-    amount: tokenBalance.toString(),
-    icon: lsp4MetadataJSON.LSP4Metadata.icon[0]?.url
-      ? lsp4MetadataJSON.LSP4Metadata.icon[0]?.url
-      : ASSET_ICON_PLACEHOLDER_URL,
-    address: assetAddress,
-    links: lsp4MetadataJSON.LSP4Metadata.links,
-    description: lsp4MetadataJSON.LSP4Metadata.description,
-    images: lsp4MetadataJSON.LSP4Metadata.images,
+    amount: balance,
+    decimals: decimals,
     tokenSupply,
-    decimals,
+    icon,
+    links,
+    description,
+    images,
+    metadata: metadata.LSP4Metadata,
+    standard: 'LSP7DigitalAsset',
   }
-  return lsp7AssetObject
 }
-
-export default fetchLSP7Assets
diff --git a/utils/fetchLSP8Assets.ts b/utils/fetchLSP8Assets.ts
index e56244bc..059345e5 100644
--- a/utils/fetchLSP8Assets.ts
+++ b/utils/fetchLSP8Assets.ts
@@ -1,98 +1,79 @@
-import { LSP4DigitalAssetJSON } from '@lukso/lsp-factory.js/build/main/src/lib/interfaces/lsp4-digital-asset'
 import LSP8IdentifiableDigitalAsset from '@lukso/lsp-smart-contracts/artifacts/LSP8IdentifiableDigitalAsset.json'
 
-import { LSP8Asset } from '@/types/assets'
-import { PROVIDERS } from '@/types/enums'
+import { Asset } from '@/types/assets'
+import { LSP8IdentifiableDigitalAsset as LSP8IdentifiableDigitalAssetInterface } from '@/types/contracts/LSP8IdentifiableDigitalAsset'
 
-export const fetchLSP8Assets = async (
-  assetAddress: Address,
+export const fetchLsp8Assets = async (
+  address: Address,
   profileAddress: Address
 ) => {
   const { contract } = useWeb3(PROVIDERS.RPC)
 
-  const lsp8Contract = contract(
+  const lsp8Contract = contract<LSP8IdentifiableDigitalAssetInterface>(
     LSP8IdentifiableDigitalAsset.abi as any,
-    assetAddress
+    address
   )
   const tokenSupply = await lsp8Contract.methods.totalSupply().call()
 
   // profile can have few ids of same LSP8 asset
-  const tokensIds = (await lsp8Contract.methods
-    .tokenIdsOf(profileAddress)
-    .call()) as string[]
+  const tokensIds = await lsp8Contract.methods.tokenIdsOf(profileAddress).call()
 
   if (!tokensIds.length) {
-    return
+    return []
   }
 
-  const { fetchLSP4Metadata, fetchLSP8Metadata, fetchLSP4Creator } = useErc725()
-  const [collectionName, collectionSymbol, collectionLSP4Metadata] =
-    await fetchLSP4Metadata(assetAddress)
+  const { fetchLsp8Metadata, fetchLSP4Creator } = useErc725() // TODO move to utils
+  // nft metadata is the same for all tokens of same asset
+  const [name, symbol, nftMetadata] = await fetchLsp4Metadata(address)
 
-  const newLSP8Assets: LSP8Asset[] = []
-
-  await Promise.all(
+  const assets = await Promise.all(
     tokensIds.map(async tokenId => {
-      const nftMetadata = await fetchLSP8Metadata(tokenId, assetAddress)
-      const creatorMetadata = await fetchLSP4Creator(assetAddress)
+      const collectionMetadata = (await fetchLsp8Metadata(tokenId, address))
+        .LSP4Metadata
+      const {
+        description,
+        images: metadataImages,
+        icon: metadataIcon,
+        links,
+      } = collectionMetadata
+      const creatorMetadata = await fetchLSP4Creator(address)
+      const {
+        name: creatorName,
+        address: creatorAddress,
+        profileImageUrl: creatorProfileImage,
+      } = creatorMetadata || {}
+      const icon = await getAndConvertImage(metadataIcon, 200)
+      const images: Base64EncodedImage[] = []
 
-      const lsp8AssetObject: LSP8Asset = createLSP8Object(
-        assetAddress,
-        tokenId,
+      for await (const image of metadataImages) {
+        const convertedImage = await getAndConvertImage(image, 400)
+        if (convertedImage) {
+          images.push(convertedImage)
+        }
+      }
+
+      return {
+        address,
+        name,
+        symbol,
+        amount: '1', // NFT is always 1
+        decimals: 0, // NFT decimals are always 0
         tokenSupply,
-        collectionName,
-        collectionSymbol,
-        nftMetadata,
-        collectionLSP4Metadata,
-        creatorMetadata
-      )
-      newLSP8Assets.push(lsp8AssetObject)
+        icon,
+        links,
+        description,
+        images,
+        creatorName,
+        creatorAddress,
+        creatorProfileImage,
+        metadata: {
+          nft: nftMetadata.LSP4Metadata,
+          collection: collectionMetadata,
+        },
+        standard: 'LSP8IdentifiableDigitalAsset',
+        tokenId,
+      } as Asset
     })
   )
-  return newLSP8Assets
-}
-
-const createLSP8Object = (
-  assetAddress: Address,
-  tokenId: string,
-  tokenSupply: string,
-  collectionName: string,
-  collectionSymbol: string,
-  nftMetadata: LSP4DigitalAssetJSON,
-  collectionMetadata: LSP4DigitalAssetJSON,
-  creatorMetadata?: Creator
-): LSP8Asset => {
-  const { description, images, icon } = nftMetadata.LSP4Metadata
-  const {
-    description: collectionDescription,
-    images: collectionImages,
-    icon: collectionIcon,
-    links: collectionLinks,
-  } = collectionMetadata.LSP4Metadata
-  const {
-    name: creatorName,
-    address: creatorAddress,
-    profileImageUrl: creatorProfileImage,
-  } = creatorMetadata || {}
-
-  const lsp8AssetObject = {
-    tokenId,
-    description,
-    image: images[0][0]?.url ? formatUrl(images[0][0].url) : '',
-    icon: icon[0]?.url ? formatUrl(icon[0].url) : '',
-    collectionName,
-    collectionSymbol,
-    collectionAddress: assetAddress,
-    collectionDescription,
-    collectionImages,
-    collectionLinks,
-    collectionIcon: formatUrl(collectionIcon[0]?.url)
-      ? collectionIcon[0]?.url
-      : '',
-    creatorName,
-    creatorAddress,
-    creatorProfileImage,
-    tokenSupply,
-  }
-  return lsp8AssetObject as LSP8Asset
+  return assets
 }
diff --git a/utils/fetchLsp4Metadata.ts b/utils/fetchLsp4Metadata.ts
new file mode 100644
index 00000000..4abc7701
--- /dev/null
+++ b/utils/fetchLsp4Metadata.ts
@@ -0,0 +1,51 @@
+import { ERC725JSONSchema } from '@erc725/erc725.js'
+import { LSP4DigitalAssetJSON } from '@lukso/lsp-factory.js/build/main/src/lib/interfaces/lsp4-digital-asset'
+import LSP4DigitalAsset from '@erc725/erc725.js/schemas/LSP4DigitalAsset.json'
+import { URLDataWithHash } from '@erc725/erc725.js/build/main/src/types'
+
+export const fetchLsp4Metadata = async (
+  assetAddress: Address
+): Promise<[string, string, LSP4DigitalAssetJSON]> => {
+  const { getInstance } = useErc725()
+
+  const erc725 = getInstance(
+    assetAddress,
+    LSP4DigitalAsset as ERC725JSONSchema[]
+  )
+
+  try {
+    const lsp4DigitalAsset = await erc725.fetchData([
+      'LSP4TokenName',
+      'LSP4TokenSymbol',
+      'LSP4Metadata',
+    ])
+
+    const name =
+      typeof lsp4DigitalAsset[0]?.value === 'string'
+        ? lsp4DigitalAsset[0]?.value
+        : ''
+    const symbol =
+      typeof lsp4DigitalAsset[1]?.value == 'string'
+        ? lsp4DigitalAsset[1]?.value
+        : ''
+    const metadata = validateLSP4MetaData(
+      lsp4DigitalAsset[2].value as URLDataWithHash
+    )
+    return [name, symbol, metadata]
+  } catch (error) {
+    console.error(error)
+    return [
+      '',
+      '',
+      {
+        LSP4Metadata: {
+          description: '',
+          links: [],
+          images: [[]],
+          icon: [],
+          assets: [],
+        },
+      },
+    ]
+  }
+}
diff --git a/utils/fetchProfile.ts b/utils/fetchProfile.ts
index 412fc93f..99321fb1 100644
--- a/utils/fetchProfile.ts
+++ b/utils/fetchProfile.ts
@@ -1,10 +1,9 @@
 import { INTERFACE_IDS, SupportedStandards } from '@lukso/lsp-smart-contracts'
 
-import { PROVIDERS } from '@/types/enums'
+import { LSP0ERC725Account } from '@/types/contracts/LSP0ERC725Account'
 
 export const fetchProfile = async (profileAddress: Address) => {
   const { contract, isEoA } = useWeb3(PROVIDERS.RPC)
-  const { supportInterface } = useErc725()
 
   // EoA check
   if (await isEoA(profileAddress)) {
@@ -19,8 +18,11 @@ export const fetchProfile = async (profileAddress: Address) => {
   }
 
   // standard check
-  const supportedStandard = await contract(getDataABI, profileAddress)
-    .methods['getData(bytes32)'](SupportedStandards.LSP3Profile.key)
+  const supportedStandard = await contract<LSP0ERC725Account>(
+    getDataABI,
+    profileAddress
+  )
+    .methods.getData(SupportedStandards.LSP3Profile.key)
     .call()
   if (supportedStandard !== SupportedStandards.LSP3Profile.value) {
     throw new Error(
diff --git a/utils/formatUrl.ts b/utils/formatUrl.ts
index 3ac6e189..c70130ef 100644
--- a/utils/formatUrl.ts
+++ b/utils/formatUrl.ts
@@ -6,10 +6,12 @@
  * @returns {string} The formatted URL.
  */
 export function formatUrl(url: string): string {
-  // IPFS
-  if (url && url.includes('ipfs://')) {
-    return url.replace('ipfs://', IPFS_URL)
+  if (!url) {
+    return ''
   }
 
-  return url
+  const encodedUrl = encodeURI(url.replace(/(^\w+:|^)\/\//, ''))
+  const formattedUrl = `${IPFS_URL}${encodedUrl}`
+
+  return formattedUrl
 }
diff --git a/utils/fromWeiWithDecimals.ts b/utils/fromWeiWithDecimals.ts
new file mode 100644
index 00000000..21bb7cea
--- /dev/null
+++ b/utils/fromWeiWithDecimals.ts
@@ -0,0 +1,41 @@
+import { fromWei } from 'web3-utils'
+
+type Unit =
+  | 'noether'
+  | 'wei'
+  | 'ether'
+  | 'kwei'
+  | 'gwei'
+  | 'mwei'
+  | 'microether'
+  | 'milliether'
+  | 'kether'
+  | 'mether'
+  | 'gether'
+  | 'tether'
+
+type Units = {
+  [key: number]: Unit
+}
+
+const DEFAULT_UNIT: Unit = 'ether'
+
+export const fromWeiWithDecimals = (amount: string, decimals = 18) => {
+  const units: Units = {
+    0: 'wei',
+    3: 'kwei',
+    6: 'mwei',
+    9: 'gwei',
+    12: 'microether',
+    15: 'milliether',
+    18: 'ether',
+    21: 'kether',
+    24: 'mether',
+    27: 'gether',
+    30: 'tether',
+  }
+
+  const unit: Unit = units[decimals] || DEFAULT_UNIT
+
+  return fromWei(amount, unit)
+}
diff --git a/utils/getProfileImages.ts b/utils/getImages.ts
similarity index 50%
rename from utils/getProfileImages.ts
rename to utils/getImages.ts
index a4177577..1b03c9f8 100644
--- a/utils/getProfileImages.ts
+++ b/utils/getImages.ts
@@ -1,5 +1,6 @@
 import { ImageMetadata } from '@lukso/lsp-factory.js'
 
+import { Asset } from '@/types/assets'
 import { formatUrl } from '@/utils/formatUrl'
 
 const convertBlobToBase64 = (blob: Blob) =>
@@ -12,7 +13,7 @@ const convertBlobToBase64 = (blob: Blob) =>
     reader.readAsDataURL(blob)
   })
 
-export const fetchBlobAndConvertToBase64 = async (
+const fetchBlobAndConvertToBase64 = async (
   request: Request
 ): Promise<unknown> => {
   return fetch(request)
@@ -20,11 +21,9 @@ export const fetchBlobAndConvertToBase64 = async (
     .then(convertBlobToBase64)
 }
 
-export const fetchAndConvertImage = async (
-  imageUrl: string
-): Promise<string> => {
-  const request = new Request(formatUrl(imageUrl))
-  return (await fetchBlobAndConvertToBase64(request)) as string
+export const fetchAndConvertImage = async (imageUrl: string) => {
+  const request = new Request(imageUrl)
+  return (await fetchBlobAndConvertToBase64(request)) as Base64EncodedImage
 }
 
 /**
@@ -36,15 +35,50 @@ export const fetchAndConvertImage = async (
  * @param {number} maxHeight - max height
  * @returns url of the image
  */
-export const getImageUrlBySize = (
+export const getImageBySize = (
   images: ImageMetadata[],
-  minWidth: number,
   maxHeight: number
 ): string | undefined => {
   for (const image of images) {
-    if (image.width >= minWidth && image.height <= maxHeight) {
+    if (image.height <= maxHeight) {
       return formatUrl(image.url)
     }
   }
   return images.length > 0 ? formatUrl(images[0].url) : undefined
 }
+
+/**
+ * Return asset thumb image for given sizes.
+ * It first look into icon and if not found take first image from collection
+ *
+ * @param asset
+ * @param minWidth
+ * @param minHeight
+ * @returns
+ */
+export const getAssetThumb = (asset?: Asset) => {
+  if (!asset) {
+    return ''
+  }
+
+  if (asset.icon) {
+    return asset.icon
+  }
+
+  if (asset.images && asset.images.length > 0) {
+    return asset.images[0]
+  }
+
+  return ''
+}
+
+export const getAndConvertImage = async (
+  image: ImageMetadata[],
+  maxHeight: number
+) => {
+  const optimalIcon = getImageBySize(image, maxHeight)
+
+  if (optimalIcon) {
+    return await fetchAndConvertImage(optimalIcon)
+  }
+}
diff --git a/utils/setupViewedProfile.ts b/utils/setupViewedProfile.ts
index 7c2afbee..00b077b8 100644
--- a/utils/setupViewedProfile.ts
+++ b/utils/setupViewedProfile.ts
@@ -1,15 +1,10 @@
 import { SetupViewedProfileError } from '@/shared/errors'
 
 export const setupViewedProfile = async (profileAddress: Address) => {
-  const {
-    setStatus,
-    profile: viewedProfile,
-    setProfile,
-  } = useViewedProfileStore()
+  const { setStatus, setProfile } = useViewedProfileStore()
 
   try {
     setStatus('isProfileLoading', true)
-    viewedProfile.address = profileAddress
     const profile = await fetchProfile(profileAddress)
     setProfile(profile)
   } catch (error) {
diff --git a/utils/checkInterface.ts b/utils/supportInterface.ts
similarity index 75%
rename from utils/checkInterface.ts
rename to utils/supportInterface.ts
index dd97ba50..a4b092eb 100644
--- a/utils/checkInterface.ts
+++ b/utils/supportInterface.ts
@@ -1,4 +1,4 @@
-import { PROVIDERS } from '@/types/enums'
+import { LSP0ERC725Account } from '@/types/contracts'
 
 /**
  * Checks if a smart contract supports a given interface.
@@ -8,14 +8,17 @@ import { PROVIDERS } from '@/types/enums'
  * @param string interfaceId - an interfaceId to check
  * @returns true/false whether the transaction supports the interface or not
  */
-export const checkInterface = async (
+export const supportInterface = async (
   address: Address,
   interfaceId: string
 ): Promise<boolean> => {
   const { contract } = useWeb3(PROVIDERS.RPC)
 
   try {
-    const eip165Contract = contract(eip165ABI as any, address)
+    const eip165Contract = contract<LSP0ERC725Account>(
+      eip165ABI as any,
+      address
+    )
     return await eip165Contract.methods.supportsInterface(interfaceId).call()
   } catch (error: unknown) {
     console.error(error)
diff --git a/yarn.lock b/yarn.lock
index 24b3efab..77e6d0ca 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -869,7 +869,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@erc725/erc725.js@npm:0.18.0, @erc725/erc725.js@npm:^0.18.0":
+"@erc725/erc725.js@npm:0.19.0":
+  version: 0.19.0
+  resolution: "@erc725/erc725.js@npm:0.19.0"
+  dependencies:
+    ethereumjs-util: ^7.1.5
+    web3-eth-abi: ^1.10.0
+    web3-providers-http: ^1.10.0
+    web3-utils: ^1.10.0
+  checksum: c0eb34ffac80bd98825b3ab79fe1278fbc240cd3cd91fec02be37f3020926b71100ddd8c1ef954f901084352741633d0c718f6796fa9a1728e9ff9cbe818d941
+  languageName: node
+  linkType: hard
+
+"@erc725/erc725.js@npm:^0.18.0":
   version: 0.18.0
   resolution: "@erc725/erc725.js@npm:0.18.0"
   dependencies:
@@ -2028,12 +2040,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lukso/web-components@npm:1.46.0":
-  version: 1.46.0
-  resolution: "@lukso/web-components@npm:1.46.0"
+"@lukso/web-components@npm:1.47.1":
+  version: 1.47.1
+  resolution: "@lukso/web-components@npm:1.47.1"
   dependencies:
     ethereum-blockies-base64: ^1.0.2
-  checksum: e8489e7cbaf66215fde29fb0fcbb6a41544b19dfde39b7867893491477c7c566d05e5b387bd4bc7da28bdc7ab0b399645d637f242568ce3da51f01e1d22b6b2d
+  checksum: a23aaa4c9848c28b5dff7d2e20c13ebd21772616e3c52742151c2d0e07a18698f50d20bfb6d271173e419cc7be9d7fc6adbb502a13d01ba1ace4fbfaaf33fff5
   languageName: node
   linkType: hard
 
@@ -3056,6 +3068,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typechain/web3-v1@npm:^6.0.7":
+  version: 6.0.7
+  resolution: "@typechain/web3-v1@npm:6.0.7"
+  dependencies:
+    lodash: ^4.17.15
+    ts-essentials: ^7.0.1
+  peerDependencies:
+    typechain: ^8.3.2
+    web3: ^1
+    web3-core: ^1
+    web3-eth-contract: ^1
+  checksum: c500da9e5eb483640a745e7b9db640491fa405952735dad1f7a93fdf8384e2d739846ee8477b137307abb5dc8aaa9efbeab58c8fc7efdd3ad4a9f6397aa04961
+  languageName: node
+  linkType: hard
+
 "@types/bn.js@npm:*, @types/bn.js@npm:^5.1.0, @types/bn.js@npm:^5.1.1":
   version: 5.1.1
   resolution: "@types/bn.js@npm:5.1.1"
@@ -3246,6 +3273,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/prettier@npm:^2.1.1":
+  version: 2.7.3
+  resolution: "@types/prettier@npm:2.7.3"
+  checksum: 705384209cea6d1433ff6c187c80dcc0b95d99d5c5ce21a46a9a58060c527973506822e428789d842761e0280d25e3359300f017fbe77b9755bc772ab3dc2f83
+  languageName: node
+  linkType: hard
+
 "@types/qs@npm:^6.5.3":
   version: 6.9.8
   resolution: "@types/qs@npm:6.9.8"
@@ -4121,6 +4155,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"array-back@npm:^3.0.1, array-back@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "array-back@npm:3.1.0"
+  checksum: 7205004fcd0f9edd926db921af901b083094608d5b265738d0290092f9822f73accb468e677db74c7c94ef432d39e5ed75a7b1786701e182efb25bbba9734209
+  languageName: node
+  linkType: hard
+
+"array-back@npm:^4.0.1, array-back@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "array-back@npm:4.0.2"
+  checksum: f30603270771eeb54e5aad5f54604c62b3577a18b6db212a7272b2b6c32049121b49431f656654790ed1469411e45f387e7627c0de8fd0515995cc40df9b9294
+  languageName: node
+  linkType: hard
+
 "array-buffer-byte-length@npm:^1.0.0":
   version: 1.0.0
   resolution: "array-buffer-byte-length@npm:1.0.0"
@@ -5133,7 +5181,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:^4.0.0, chalk@npm:^4.1.1, chalk@npm:^4.1.2":
+"chalk@npm:^4.0.0, chalk@npm:^4.1.0, chalk@npm:^4.1.1, chalk@npm:^4.1.2":
   version: 4.1.2
   resolution: "chalk@npm:4.1.2"
   dependencies:
@@ -5425,6 +5473,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"command-line-args@npm:^5.1.1":
+  version: 5.2.1
+  resolution: "command-line-args@npm:5.2.1"
+  dependencies:
+    array-back: ^3.1.0
+    find-replace: ^3.0.0
+    lodash.camelcase: ^4.3.0
+    typical: ^4.0.0
+  checksum: e759519087be3cf2e86af8b9a97d3058b4910cd11ee852495be881a067b72891f6a32718fb685ee6d41531ab76b2b7bfb6602f79f882cd4b7587ff1e827982c7
+  languageName: node
+  linkType: hard
+
+"command-line-usage@npm:^6.1.0":
+  version: 6.1.3
+  resolution: "command-line-usage@npm:6.1.3"
+  dependencies:
+    array-back: ^4.0.2
+    chalk: ^2.4.2
+    table-layout: ^1.0.2
+    typical: ^5.2.0
+  checksum: 8261d4e5536eb0bcddee0ec5e89c05bb2abd18e5760785c8078ede5020bc1c612cbe28eb6586f5ed4a3660689748e5aaad4a72f21566f4ef39393694e2fa1a0b
+  languageName: node
+  linkType: hard
+
 "commander@npm:^10.0.0":
   version: 10.0.1
   resolution: "commander@npm:10.0.1"
@@ -6097,6 +6169,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"deep-extend@npm:~0.6.0":
+  version: 0.6.0
+  resolution: "deep-extend@npm:0.6.0"
+  checksum: 7be7e5a8d468d6b10e6a67c3de828f55001b6eb515d014f7aeb9066ce36bd5717161eb47d6a0f7bed8a9083935b465bc163ee2581c8b128d29bf61092fdf57a7
+  languageName: node
+  linkType: hard
+
 "deep-is@npm:^0.1.3":
   version: 0.1.4
   resolution: "deep-is@npm:0.1.4"
@@ -7974,6 +8053,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"find-replace@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "find-replace@npm:3.0.0"
+  dependencies:
+    array-back: ^3.0.1
+  checksum: 6b04bcfd79027f5b84aa1dfe100e3295da989bdac4b4de6b277f4d063e78f5c9e92ebc8a1fec6dd3b448c924ba404ee051cc759e14a3ee3e825fa1361025df08
+  languageName: node
+  linkType: hard
+
 "find-up@npm:^5.0.0":
   version: 5.0.0
   resolution: "find-up@npm:5.0.0"
@@ -8144,6 +8232,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fs-extra@npm:^7.0.0":
+  version: 7.0.1
+  resolution: "fs-extra@npm:7.0.1"
+  dependencies:
+    graceful-fs: ^4.1.2
+    jsonfile: ^4.0.0
+    universalify: ^0.1.0
+  checksum: 141b9dccb23b66a66cefdd81f4cda959ff89282b1d721b98cea19ba08db3dcbe6f862f28841f3cf24bb299e0b7e6c42303908f65093cb7e201708e86ea5a8dcf
+  languageName: node
+  linkType: hard
+
 "fs-extra@npm:^9.0.1":
   version: 9.1.0
   resolution: "fs-extra@npm:9.1.0"
@@ -8444,6 +8543,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"glob@npm:7.1.7":
+  version: 7.1.7
+  resolution: "glob@npm:7.1.7"
+  dependencies:
+    fs.realpath: ^1.0.0
+    inflight: ^1.0.4
+    inherits: 2
+    minimatch: ^3.0.4
+    once: ^1.3.0
+    path-is-absolute: ^1.0.0
+  checksum: b61f48973bbdcf5159997b0874a2165db572b368b931135832599875919c237fc05c12984e38fe828e69aa8a921eb0e8a4997266211c517c9cfaae8a93988bb8
+  languageName: node
+  linkType: hard
+
 "glob@npm:^10.2.2":
   version: 10.3.3
   resolution: "glob@npm:10.3.3"
@@ -10611,6 +10724,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.camelcase@npm:^4.3.0":
+  version: 4.3.0
+  resolution: "lodash.camelcase@npm:4.3.0"
+  checksum: cb9227612f71b83e42de93eccf1232feeb25e705bdb19ba26c04f91e885bfd3dd5c517c4a97137658190581d3493ea3973072ca010aab7e301046d90740393d1
+  languageName: node
+  linkType: hard
+
 "lodash.debounce@npm:^4.0.8":
   version: 4.0.8
   resolution: "lodash.debounce@npm:4.0.8"
@@ -10695,7 +10815,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash@npm:^4.17.14, lodash@npm:^4.17.21":
+"lodash@npm:^4.17.14, lodash@npm:^4.17.15, lodash@npm:^4.17.21":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
   checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7
@@ -11366,7 +11486,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mkdirp@npm:^1.0.3":
+"mkdirp@npm:^1.0.3, mkdirp@npm:^1.0.4":
   version: 1.0.4
   resolution: "mkdirp@npm:1.0.4"
   bin:
@@ -13401,6 +13521,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prettier@npm:^2.3.1":
+  version: 2.8.8
+  resolution: "prettier@npm:2.8.8"
+  bin:
+    prettier: bin-prettier.js
+  checksum: b49e409431bf129dd89238d64299ba80717b57ff5a6d1c1a8b1a28b590d998a34e083fa13573bc732bb8d2305becb4c9a4407f8486c81fa7d55100eb08263cf8
+  languageName: node
+  linkType: hard
+
 "pretty-bytes@npm:^6.1.0":
   version: 6.1.1
   resolution: "pretty-bytes@npm:6.1.1"
@@ -13848,6 +13977,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"reduce-flatten@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "reduce-flatten@npm:2.0.0"
+  checksum: 64393ef99a16b20692acfd60982d7fdbd7ff8d9f8f185c6023466444c6dd2abb929d67717a83cec7f7f8fb5f46a25d515b3b2bf2238fdbfcdbfd01d2a9e73cb8
+  languageName: node
+  linkType: hard
+
 "regenerator-runtime@npm:^0.13.11":
   version: 0.13.11
   resolution: "regenerator-runtime@npm:0.13.11"
@@ -14921,6 +15057,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"string-format@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "string-format@npm:2.0.0"
+  checksum: dada2ef95f6d36c66562c673d95315f80457fa7dce2f3609a2e75d1190b98c88319028cf0a5b6c043d01c18d581b2641579f79480584ba030d6ac6fceb30bc55
+  languageName: node
+  linkType: hard
+
 "string-width-cjs@npm:string-width@^4.2.0, string-width@npm:^1.0.2 || 2 || 3 || 4, string-width@npm:^4.1.0, string-width@npm:^4.2.0, string-width@npm:^4.2.3":
   version: 4.2.3
   resolution: "string-width@npm:4.2.3"
@@ -15408,6 +15551,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"table-layout@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "table-layout@npm:1.0.2"
+  dependencies:
+    array-back: ^4.0.1
+    deep-extend: ~0.6.0
+    typical: ^5.2.0
+    wordwrapjs: ^4.0.0
+  checksum: 8f41b5671f101a5195747ec1727b1d35ea2cd5bf85addda11cc2f4b36892db9696ce3c2c7334b5b8a122505b34d19135fede50e25678df71b0439e0704fd953f
+  languageName: node
+  linkType: hard
+
 "table@npm:^6.8.1":
   version: 6.8.1
   resolution: "table@npm:6.8.1"
@@ -15693,6 +15848,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ts-command-line-args@npm:^2.2.0":
+  version: 2.5.1
+  resolution: "ts-command-line-args@npm:2.5.1"
+  dependencies:
+    chalk: ^4.1.0
+    command-line-args: ^5.1.1
+    command-line-usage: ^6.1.0
+    string-format: ^2.0.0
+  bin:
+    write-markdown: dist/write-markdown.js
+  checksum: 7c0a7582e94f1d2160e3dd379851ec4f1758bc673ccd71bae07f839f83051b6b83e0ae14325c2d04ea728e5bde7b7eacfd2ab060b8fd4b8ab29e0bbf77f6c51e
+  languageName: node
+  linkType: hard
+
+"ts-essentials@npm:^7.0.1":
+  version: 7.0.3
+  resolution: "ts-essentials@npm:7.0.3"
+  peerDependencies:
+    typescript: ">=3.7.0"
+  checksum: 74d75868acf7f8b95e447d8b3b7442ca21738c6894e576df9917a352423fde5eb43c5651da5f78997da6061458160ae1f6b279150b42f47ccc58b73e55acaa2f
+  languageName: node
+  linkType: hard
+
 "ts-interface-checker@npm:^0.1.9":
   version: 0.1.13
   resolution: "ts-interface-checker@npm:0.1.13"
@@ -15863,6 +16041,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typechain@npm:^8.3.2":
+  version: 8.3.2
+  resolution: "typechain@npm:8.3.2"
+  dependencies:
+    "@types/prettier": ^2.1.1
+    debug: ^4.3.1
+    fs-extra: ^7.0.0
+    glob: 7.1.7
+    js-sha3: ^0.8.0
+    lodash: ^4.17.15
+    mkdirp: ^1.0.4
+    prettier: ^2.3.1
+    ts-command-line-args: ^2.2.0
+    ts-essentials: ^7.0.1
+  peerDependencies:
+    typescript: ">=4.3.0"
+  bin:
+    typechain: dist/cli/cli.js
+  checksum: 146a1896fa93403404be78757790b0f95b5457efebcca16b61622e09c374d555ef4f837c1c4eedf77e03abc50276d96a2f33064ec09bb802f62d8cc2b13fce70
+  languageName: node
+  linkType: hard
+
 "typed-array-buffer@npm:^1.0.0":
   version: 1.0.0
   resolution: "typed-array-buffer@npm:1.0.0"
@@ -15939,6 +16139,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typical@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "typical@npm:4.0.0"
+  checksum: a242081956825328f535e6195a924240b34daf6e7fdb573a1809a42b9f37fb8114fa99c7ab89a695e0cdb419d4149d067f6723e4b95855ffd39c6c4ca378efb3
+  languageName: node
+  linkType: hard
+
+"typical@npm:^5.2.0":
+  version: 5.2.0
+  resolution: "typical@npm:5.2.0"
+  checksum: ccaeb151a9a556291b495571ca44c4660f736fb49c29314bbf773c90fad92e9485d3cc2b074c933866c1595abbbc962f2b8bfc6e0f52a8c6b0cdd205442036ac
+  languageName: node
+  linkType: hard
+
 "ufo@npm:^1.1.1, ufo@npm:^1.1.2":
   version: 1.1.2
   resolution: "ufo@npm:1.1.2"
@@ -16800,12 +17014,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "wallet.universalprofile.cloud@workspace:."
   dependencies:
-    "@erc725/erc725.js": 0.18.0
+    "@erc725/erc725.js": 0.19.0
     "@esbuild-plugins/node-globals-polyfill": 0.2.3
     "@formatjs/intl": ^2.9.0
     "@lukso/lsp-factory.js": 3.1.1
     "@lukso/lsp-smart-contracts": 0.11.1
-    "@lukso/web-components": 1.46.0
+    "@lukso/web-components": 1.47.1
     "@nuxt/devtools": ^0.7.4
     "@nuxtjs/algolia": ^1.9.0
     "@nuxtjs/device": ^3.1.0
@@ -16813,6 +17027,7 @@ __metadata:
     "@nuxtjs/tailwindcss": ^6.8.0
     "@pinia/nuxt": ^0.4.11
     "@playwright/test": 1.36.2
+    "@typechain/web3-v1": ^6.0.7
     "@types/fs-extra": 11.0.1
     "@types/node": ^20.4.7
     "@types/randombytes": 2.0.0
@@ -16849,6 +17064,7 @@ __metadata:
     stylelint-config-standard-scss: 10.0.0
     stylelint-prettier: 4.0.2
     stylelint-scss: 5.0.1
+    typechain: ^8.3.2
     typescript: 5.1.6
     util: 0.12.5
     web3: ~1.10.0
@@ -17352,6 +17568,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"wordwrapjs@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "wordwrapjs@npm:4.0.1"
+  dependencies:
+    reduce-flatten: ^2.0.0
+    typical: ^5.2.0
+  checksum: 3d927f3c95d0ad990968da54c0ad8cde2801d8e91006cd7474c26e6b742cc8557250ce495c9732b2f9db1f903601cb74ec282e0f122ee0d02d7abe81e150eea8
+  languageName: node
+  linkType: hard
+
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0, wrap-ansi@npm:^7.0.0":
   version: 7.0.0
   resolution: "wrap-ansi@npm:7.0.0"