diff --git a/assets/styles/global.scss b/assets/styles/global.scss
index 7164593029..e2c59a82a0 100644
--- a/assets/styles/global.scss
+++ b/assets/styles/global.scss
@@ -446,6 +446,9 @@ a.has-text-grey {
     background-color: theme('k-redaccent');
   }
 }
+.k-grey-light {
+  background-color: var(--k-grey-light) !important;
+}
 .theme-background-color {
   @include ktheme() {
     background-color: theme('background-color');
@@ -587,3 +590,15 @@ a.has-text-grey {
 .has-text-inherit {
   color: inherit !important;
 }
+
+.cursor-default {
+  cursor: default;
+}
+
+.min-width-0 {
+  min-width: 0;
+}
+
+.pointer-events-none {
+  pointer-events: none !important;
+}
\ No newline at end of file
diff --git a/assets/styles/layouts/_main-navigation.scss b/assets/styles/layouts/_main-navigation.scss
index 412e4fcd62..39ef823017 100644
--- a/assets/styles/layouts/_main-navigation.scss
+++ b/assets/styles/layouts/_main-navigation.scss
@@ -185,6 +185,8 @@
           height: 40px;
         }
       }
+
+      max-width: 100% !important;
     }
   }
 
diff --git a/components/balance/MultipleBalances.vue b/components/balance/MultipleBalances.vue
index 29ecd57590..3928274867 100644
--- a/components/balance/MultipleBalances.vue
+++ b/components/balance/MultipleBalances.vue
@@ -18,15 +18,15 @@
       </div>
 
       <div
-        v-for="(chain, key) in multiBalances.chains"
+        v-for="(data, key) in multiBalancesChainsList"
         :key="key"
         class="is-size-6">
         <div
-          v-for="token in filterEmptyBalanceChains(chain)"
+          v-for="token in filterEmptyBalanceChains(data.chain)"
           :key="token.name"
           class="balance-row">
           <div class="is-capitalized is-flex-grow-3">
-            {{ key }}
+            {{ data.key }}
           </div>
           <div class="has-text-right is-flex-grow-1">
             {{ token.name.toUpperCase() }}
@@ -61,12 +61,32 @@
 import { formatNumber } from '@/utils/format/balance'
 
 import { NeoSkeleton } from '@kodadot1/brick'
-import { ChainToken, useIdentityStore } from '@/stores/identity'
+import { ChainToken, type ChainType, useIdentityStore } from '@/stores/identity'
 
+const displayChainOrder: ChainType[] = [
+  'polkadot',
+  'polkadotHub',
+  'kusama',
+  'kusamaHub',
+  'basilisk',
+]
 const identityStore = useIdentityStore()
 
 const { multiBalances } = useMultipleBalance(true)
 
+const multiBalancesChainsList = computed(() => {
+  return Object.keys(multiBalances.value.chains)
+    .sort(
+      (a, b) =>
+        displayChainOrder.indexOf(a as ChainType) -
+        displayChainOrder.indexOf(b as ChainType),
+    )
+    .map((key) => ({
+      key,
+      chain: multiBalances.value.chains[key],
+    }))
+})
+
 const isBalanceLoading = computed(
   () => identityStore.getStatusMultiBalances === 'loading',
 )
diff --git a/components/collection/drop/Generative.vue b/components/collection/drop/Generative.vue
index 032d891f2c..48ca7903ca 100644
--- a/components/collection/drop/Generative.vue
+++ b/components/collection/drop/Generative.vue
@@ -62,6 +62,7 @@
                     v-dompurify-html="
                       $t('mint.unlockable.minimumFundsDescription', [
                         `${minimumFunds} ${token}`,
+                        chainName,
                       ])
                     "
                     class="minimum-funds-description" />
@@ -192,6 +193,7 @@ const isImageFetching = ref(false)
 const isConfirmModalActive = ref(false)
 const isAddFundModalActive = ref(false)
 
+const chainName = computed(() => getChainName(props.drop.chain))
 const token = computed(() => prefixToToken[props.drop.chain])
 
 export type DropMintedNft = DoResult & {
diff --git a/components/collection/drop/HolderOfGenerative.vue b/components/collection/drop/HolderOfGenerative.vue
index ab65c5fb21..011bd94eda 100644
--- a/components/collection/drop/HolderOfGenerative.vue
+++ b/components/collection/drop/HolderOfGenerative.vue
@@ -69,6 +69,7 @@
                     v-dompurify-html="
                       $t('mint.unlockable.minimumFundsDescription', [
                         `${minimumFunds} ${token}`,
+                        chainName,
                       ])
                     "
                     class="minimum-funds-description" />
@@ -194,6 +195,7 @@ const {
   status,
 } = useMetaTransaction()
 
+const chainName = computed(() => getChainName(props.drop.chain))
 const token = computed(() => prefixToToken[props.drop.chain])
 
 const mintedNft = ref<DropMintedNft>()
diff --git a/components/common/autoTeleport/AutoTeleportActionButton.vue b/components/common/autoTeleport/AutoTeleportActionButton.vue
index 0b0558833f..87d5bdccc0 100644
--- a/components/common/autoTeleport/AutoTeleportActionButton.vue
+++ b/components/common/autoTeleport/AutoTeleportActionButton.vue
@@ -114,7 +114,7 @@ const amount = ref()
 
 const {
   isAvailable: isAutoTeleportAvailable,
-  hasBalances,
+  isReady,
   hasEnoughInCurrentChain,
   hasEnoughInRichestChain,
   optimalTransition,
@@ -163,12 +163,12 @@ const showAutoTeleport = computed(
   () =>
     !hasEnoughInCurrentChain.value &&
     isAutoTeleportAvailable.value &&
-    hasBalances.value &&
+    isReady.value &&
     !props.disabled,
 )
 
 const allowAutoTeleport = computed(
-  () => needsAutoTelport.value && canAutoTeleport.value && hasBalances.value,
+  () => needsAutoTelport.value && canAutoTeleport.value && isReady.value,
 )
 
 const hasNoFundsAtAll = computed(
@@ -188,7 +188,7 @@ const autoTeleportLabel = computed(() => {
     return props.label
   }
 
-  if (!hasBalances.value) {
+  if (!isReady.value) {
     return $i18n.t('autoTeleport.checking')
   }
 
@@ -291,7 +291,7 @@ watchSyncEffect(() => {
   }
 })
 
-defineExpose({ hasBalances, optimalTransition })
+defineExpose({ isReady, optimalTransition })
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue b/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue
index 9a32db1a54..18ce48c683 100644
--- a/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue
+++ b/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue
@@ -83,7 +83,7 @@ const { urlPrefix } = usePrefix()
 const autoteleport = ref()
 const actions = computed(() => [props.action])
 
-const loading = computed(() => !autoteleport.value?.hasBalances)
+const loading = computed(() => !autoteleport.value?.isReady)
 
 const mode = computed(() => prefrencesStore.getCompletePurchaseModal.mode)
 
diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index 0d0928bce6..5eca197b3b 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -52,6 +52,7 @@
             ref="autoteleportButton"
             :actions="actions"
             :disabled="Boolean(listingCartStore.incompleteListPrices)"
+            :fees="{ actionLazyFetch: true }"
             :label="confirmListingLabel"
             @confirm="confirm" />
         </div>
@@ -96,9 +97,7 @@ const floorPricePercentAdjustment = ref()
 const autoTeleport = ref(false)
 const autoteleportButton = ref()
 
-const loadingAutoTeleport = computed(
-  () => !autoteleportButton.value?.hasBalances,
-)
+const loadingAutoTeleport = computed(() => !autoteleportButton.value?.isReady)
 
 const teleportTransitionTxFees = computed(() =>
   format(
diff --git a/components/create/Confirm/MintConfirmModal.vue b/components/create/Confirm/MintConfirmModal.vue
index 7db432f4eb..55cd78c091 100644
--- a/components/create/Confirm/MintConfirmModal.vue
+++ b/components/create/Confirm/MintConfirmModal.vue
@@ -118,7 +118,7 @@ const emit = defineEmits(['confirm', 'update:modelValue'])
 const networkFee = ref(0)
 const autoteleport = ref()
 
-const loading = computed(() => !autoteleport.value?.hasBalances)
+const loading = computed(() => !autoteleport.value?.isReady)
 
 const isNFT = computed(
   () => props.nftInformation.mintType === CreateComponent.NFT,
diff --git a/components/explore/ActiveCount.vue b/components/explore/ActiveCount.vue
index d1950f830b..c477185b56 100644
--- a/components/explore/ActiveCount.vue
+++ b/components/explore/ActiveCount.vue
@@ -2,7 +2,7 @@
   <div
     v-if="count"
     class="count is-flex is-justify-content-center is-align-items-center"
-    :class="{ rounded: rounded }">
+    :class="[`count--${position}`, { rounded: rounded }]">
     {{ count }}
   </div>
 </template>
@@ -12,10 +12,12 @@ withDefaults(
   defineProps<{
     count?: number
     rounded?: boolean
+    position?: string
   }>(),
   {
     rounded: false,
     count: 0,
+    position: 'top-left' as 'top-left' | 'top-right',
   },
 )
 </script>
@@ -25,13 +27,21 @@ withDefaults(
 
 .count {
   position: absolute;
-  bottom: 1.5rem;
-  left: -0.75rem;
   height: 1.5rem;
   width: 1.5rem;
   line-height: 1.5rem;
   text-align: center;
 
+  &--top-left {
+    bottom: 1.5rem;
+    left: -0.75rem;
+  }
+
+  &--top-right {
+    bottom: 1.5rem;
+    right: -0.75rem;
+  }
+
   @include ktheme() {
     border: 1px solid theme('border-color');
     background: theme('k-primary');
diff --git a/components/explore/DesktopControls.vue b/components/explore/DesktopControls.vue
index 7b10333a35..562d43df39 100644
--- a/components/explore/DesktopControls.vue
+++ b/components/explore/DesktopControls.vue
@@ -9,7 +9,7 @@
       <ExploreSort />
       <ExploreOffer class="is-flex-grow-1" />
       <ChainDropdown v-if="!route.name?.includes('prefix-collection-id')" />
-      <ExploreGrid v-if="!isCollection" />
+      <GridLayoutControls v-if="!isCollection" />
     </div>
   </div>
 </template>
@@ -17,10 +17,10 @@
 <script setup lang="ts">
 import ExploreTabs from './ExploreTabs.vue'
 import ExploreSort from './ExploreSort.vue'
-import ExploreGrid from './ExploreGrid.vue'
 import ExploreOffer from './ExploreOffer.vue'
 import FilterMenuButton from './FilterMenuButton.vue'
 import ChainDropdown from '@/components/common/ChainDropdown.vue'
+import GridLayoutControls from '@/components/shared/GridLayoutControls.vue'
 
 const route = useRoute()
 
diff --git a/components/explore/ExploreGrid.vue b/components/explore/ExploreGrid.vue
deleted file mode 100644
index 5ac0e28b7d..0000000000
--- a/components/explore/ExploreGrid.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <NeoField addons-class="mb-0" class="mb-0">
-    <NeoButton
-      icon-left="grid-2"
-      :active="gridSize === 'large'"
-      @click="changeGridLayout(smallGridLayout, 'large')" />
-    <NeoButton
-      icon-left="grid"
-      :active="gridSize === 'medium'"
-      @click="changeGridLayout(smallGridLayout, 'medium')" />
-    <NeoButton
-      icon-left="grid-4"
-      :active="gridSize === 'small'"
-      @click="changeGridLayout(largeGridLayout, 'small')" />
-  </NeoField>
-</template>
-
-<script setup lang="ts">
-import { NeoButton, NeoField } from '@kodadot1/brick'
-import { usePreferencesStore } from '@/stores/preferences'
-
-const preferencesStore = usePreferencesStore()
-
-const gridSize = computed(() => preferencesStore.getGridSize)
-
-const smallGridLayout = ref('is-half-desktop is-half-tablet is-half-mobile')
-const largeGridLayout = ref(
-  'is-one-quarter-desktop is-one-third-tablet is-half-mobile',
-)
-
-const changeGridLayout = (layout: string, grid: string) => {
-  preferencesStore.setGalleryLayoutClass(layout)
-  preferencesStore.setGridSize(grid)
-}
-</script>
diff --git a/components/items/ItemsGrid/ItemsGrid.vue b/components/items/ItemsGrid/ItemsGrid.vue
index 7c5d44dea3..7d784bd45c 100644
--- a/components/items/ItemsGrid/ItemsGrid.vue
+++ b/components/items/ItemsGrid/ItemsGrid.vue
@@ -8,6 +8,7 @@
       v-if="total !== 0 && (!isLoading || !isFetchingData)"
       :id="scrollContainerId"
       v-slot="slotProps"
+      :grid-section="gridSection"
       :mobile-cols="2"
       class="my-5">
       <div
@@ -54,6 +55,7 @@
     <!-- skeleton on first load -->
     <DynamicGrid
       v-if="total === 0 && (isLoading || isFetchingData)"
+      :grid-section="gridSection"
       class="my-5"
       :mobile-cols="2">
       <NeoNftCardSkeleton
@@ -80,6 +82,7 @@ import isEqual from 'lodash/isEqual'
 import { useListingCartStore } from '@/stores/listingCart'
 import { getTokensNfts } from './useNftActions'
 import { NFT } from '@/components/rmrk/service/scheme'
+import { GridSection } from '@/stores/preferences'
 
 const { listingCartEnabled } = useListingCartConfig()
 const listingCartStore = useListingCartStore()
@@ -87,6 +90,8 @@ const route = useRoute()
 
 const props = defineProps<{
   search?: Record<string, string | number>
+  resetSearchQueryParams?: string[]
+  gridSection?: GridSection
 }>()
 
 const emit = defineEmits(['total', 'loading'])
@@ -103,6 +108,7 @@ const gotoPage = (page: number) => {
   endPage.value = page
   isFetchingData.value = false
   isLoading.value = true
+  total.value = 0
 
   clearFetchResults()
   fetchSearch({ page, search: parseSearch(props.search) })
@@ -132,16 +138,20 @@ const {
 
 const skeletonCount = first.value
 
-const resetPage = useDebounceFn(() => {
+const resetPage = () => {
+  isLoading.value = true
   gotoPage(1)
-}, 500)
+}
+
+const debouncedResetPage = useDebounceFn(resetPage, 500)
 
 const { items, fetchSearch, clearFetchResults, usingTokens } = useFetchSearch({
   first,
   total,
   isFetchingData,
   isLoading,
-  resetSearch: resetPage,
+  resetSearch: debouncedResetPage,
+  resetSearchQueryParams: props.resetSearchQueryParams,
 })
 
 watch(
@@ -181,8 +191,7 @@ watch(
       return
     }
     if (!isEqual(newSearch, oldSearch)) {
-      isLoading.value = true
-      gotoPage(1)
+      resetPage()
     }
   },
   { deep: true },
diff --git a/components/items/ItemsGrid/useItemsGrid.ts b/components/items/ItemsGrid/useItemsGrid.ts
index e009c9c243..a8f9d69cdd 100644
--- a/components/items/ItemsGrid/useItemsGrid.ts
+++ b/components/items/ItemsGrid/useItemsGrid.ts
@@ -11,18 +11,30 @@ import { nftToListingCartItem } from '@/components/common/shoppingCart/utils'
 import { useListingCartStore } from '@/stores/listingCart'
 import { NFT, TokenId } from '@/components/rmrk/service/scheme'
 
+const DEFAULT_RESET_SEARCH_QUERY_PARAMS = [
+  'sort',
+  'search',
+  'listed',
+  'min',
+  'max',
+  'owned',
+  'collections',
+]
+
 export function useFetchSearch({
   first,
   total,
   isFetchingData,
   resetSearch,
   isLoading,
+  resetSearchQueryParams = DEFAULT_RESET_SEARCH_QUERY_PARAMS,
 }: {
   first: Ref<number>
   total: Ref<number>
   isFetchingData: Ref<boolean>
   isLoading: Ref<boolean>
   resetSearch: () => void
+  resetSearchQueryParams?: string[]
 }) {
   const { client, urlPrefix } = usePrefix()
   const { isAssetHub } = useIsChain(urlPrefix)
@@ -173,25 +185,20 @@ export function useFetchSearch({
     fetchSearch({ search })
   }
 
-  watch(
-    [
-      () => route.query.sort,
-      () => route.query.search,
-      () => route.query.listed,
-      () => route.query.min,
-      () => route.query.max,
-      () => route.query.owned,
-      () => route.query.collections,
-    ],
-    (currentQuery, prevQuery) => {
-      if (isEqual(currentQuery, prevQuery)) {
-        return
-      }
-      loadedPages.value = []
-      resetSearch()
-    },
+  const resetSearchQueryParamsValues = computed(() =>
+    Object.fromEntries(
+      resetSearchQueryParams.map((key) => [key, route.query[key]]),
+    ),
   )
 
+  watch(resetSearchQueryParamsValues, (currentQuery, prevQuery) => {
+    if (isEqual(currentQuery, prevQuery)) {
+      return
+    }
+    loadedPages.value = []
+    resetSearch()
+  })
+
   return {
     items,
     fetchSearch,
diff --git a/components/landing/LandingPage.vue b/components/landing/LandingPage.vue
index fa7e2bafed..a8f0eb083d 100644
--- a/components/landing/LandingPage.vue
+++ b/components/landing/LandingPage.vue
@@ -25,7 +25,7 @@
       <!-- top collections -->
       <section v-if="showTopCollections" class="py-8 instance">
         <div class="container is-fluid">
-          <TopCollections class="my-5" />
+          <LandingTopCollections class="my-5" />
         </div>
       </section>
 
@@ -57,18 +57,11 @@
 <script lang="ts" setup>
 import type { Prefix } from '@kodadot1/static'
 import SearchLanding from './SearchLanding.vue'
-import TopCollections from './topCollections/TopCollections.vue'
 import CarouselTypeSpotlight from '@/components/carousel/CarouselTypeSpotlight.vue'
 import { usePreferencesStore } from '@/stores/preferences'
 
 const hiddenCarrouselPrefixes: Prefix[] = ['dot']
-const forbiddenPrefixesForTopCollections: Prefix[] = [
-  'ksm',
-  'ahk',
-  'ahp',
-  'dot',
-  // 'ahr',
-]
+const forbiddenPrefixesForTopCollections: Prefix[] = ['ksm', 'dot']
 
 const { urlPrefix } = usePrefix()
 const preferencesStore = usePreferencesStore()
diff --git a/components/landing/topCollections/TopCollectionsItem.vue b/components/landing/topCollections/TopCollectionsItem.vue
index ac58c2bfbc..55896bed16 100644
--- a/components/landing/topCollections/TopCollectionsItem.vue
+++ b/components/landing/topCollections/TopCollectionsItem.vue
@@ -18,10 +18,12 @@
           </div>
           <div class="is-flex is-justify-content-start">
             <div class="is-hidden-mobile">
-              <div v-if="collection.floorPrice" class="no-wrap">
+              <div
+                v-if="collection.floorPrice || collection.floor"
+                class="no-wrap">
                 {{ $t('general.floor') }}:
                 <CommonTokenMoney
-                  :value="collection.floorPrice"
+                  :value="collection.floorPrice || collection.floor"
                   inline
                   :round="2" />
               </div>
@@ -44,7 +46,11 @@
             <CommonTokenMoney :value="volume" inline :round="2" />
           </div>
           <div class="no-wrap is-hidden-mobile">
-            <BasicMoney :value="usdValue" inline :unit="'USD'" :round="0" />
+            <BasicMoney
+              :value="usdValue"
+              inline
+              hide-unit
+              :round="0" />&nbsp;USD
           </div>
 
           <div class="is-hidden-tablet is-size-7 no-wrap">
@@ -68,10 +74,8 @@
 
 <script lang="ts" setup>
 import { TimeRange } from '@/components/series/types'
-import { calculateUsdFromToken } from '@/utils/calculation'
 import { CollectionEntityWithVolumes } from './utils/types'
 import { getChainNameByPrefix } from '@/utils/chain'
-import { useFiatStore } from '@/stores/fiat'
 
 const BasicImage = defineAsyncComponent(
   () => import('@/components/shared/view/BasicImage.vue'),
@@ -87,7 +91,7 @@ const BasicMoney = defineAsyncComponent(
 
 const { urlPrefix } = usePrefix()
 const { placeholder } = useTheme()
-const fiatStore = useFiatStore()
+const { toUsdPrice } = useUsdValue()
 const props = defineProps<{
   collection: CollectionEntityWithVolumes
   index: number
@@ -144,9 +148,7 @@ const diffPercentString = computed(() => {
   return `${sign.value} ${Math.abs(Math.round(diffPercent.value))}%`
 })
 
-const usdValue = computed(() =>
-  calculateUsdFromToken(volume.value, fiatStore.getCurrentKSMValue as number),
-)
+const usdValue = computed(() => toUsdPrice(volume.value, chainName))
 
 const color = computed(() => {
   if (diffPercent.value) {
diff --git a/components/landing/topCollections/utils/useTopCollections.ts b/components/landing/topCollections/utils/useTopCollections.ts
index ed9b5e5c01..522c082a18 100644
--- a/components/landing/topCollections/utils/useTopCollections.ts
+++ b/components/landing/topCollections/utils/useTopCollections.ts
@@ -17,6 +17,7 @@ import {
   TopCollectionListResult,
 } from './types'
 import topCollectionList from '@/queries/subsquid/general/topCollectionList.graphql'
+import topCollectionsListAh from '@/queries/subsquid/general/topCollections.graphql'
 import collectionsSales from '@/queries/subsquid/general/collectionsSales.graphql'
 
 const proccessData = (
@@ -45,7 +46,8 @@ const proccessData = (
 }
 
 export const useTopCollections = (limit: number) => {
-  const { client } = usePrefix()
+  const { client, urlPrefix } = usePrefix()
+  const { isAssetHub } = useIsChain(urlPrefix)
   const topCollectionWithVolumeList = useState<CollectionEntityWithVolumes[]>(
     'topCollectionWithVolumeList',
     () => [],
@@ -53,9 +55,8 @@ export const useTopCollections = (limit: number) => {
   const error = ref(null)
   // const loading = ref(false)
   const collectionsSalesResults = ref<CollectionsSalesResult>()
-
   const { result: topCollections, loading } = useQuery(
-    topCollectionList,
+    isAssetHub.value ? topCollectionsListAh : topCollectionList,
     { orderBy: 'volume_DESC', limit },
     { clientId: client.value },
   )
diff --git a/components/profile/CollectionFilter.vue b/components/profile/CollectionFilter.vue
new file mode 100644
index 0000000000..1110e5b0c0
--- /dev/null
+++ b/components/profile/CollectionFilter.vue
@@ -0,0 +1,186 @@
+<template>
+  <NeoDropdown
+    v-model="checked"
+    :disabled="isDisabled"
+    :scrollable="collections.length > 4"
+    class="py-0"
+    :mobile-modal="true"
+    :close-on-click="false"
+    multiple>
+    <template #trigger="{ active }">
+      <NeoButton
+        :active="active"
+        no-shadow
+        rounded
+        label="Collections"
+        :icon="active ? 'chevron-up' : 'chevron-down'" />
+
+      <ActiveCount :count="checked.length" position="top-right" />
+    </template>
+
+    <div class="py-5 dropdown-width">
+      <NeoDropdownItem
+        v-for="collection in collections"
+        :key="collection.id"
+        class="is-flex no-border is-justify-content-center is-align-items-center"
+        aria-role="listitem"
+        :value="collection.id">
+        <NeoCheckbox
+          :model-value="isSelected(collection)"
+          class="pointer-events-none" />
+        <div
+          class="is-flex is-align-items-center filter-container is-flex-grow-1 min-width-0">
+          <img
+            :src="sanitizeIpfsUrl(collection.meta.image)"
+            class="image is-32x32 is-flex-shrink-0 border mr-2"
+            :alt="collection.name || collection.id" />
+          <div
+            class="is-flex is-flex-direction-column is-flex-grow-1 min-width-0">
+            <div class="is-ellipsis">
+              {{ collection.name || collection.id }}
+            </div>
+
+            <div
+              class="is-flex is-justify-content-space-between is-size-7 has-text-grey">
+              <div>{{ $t('search.owners') }}: {{ collection.owners }}</div>
+            </div>
+          </div>
+
+          <div class="rounded ml-5 px-3 k-grey-light">
+            {{ collection.owned }}
+          </div>
+        </div>
+      </NeoDropdownItem>
+    </div>
+  </NeoDropdown>
+</template>
+
+<script setup lang="ts">
+import {
+  NeoButton,
+  NeoCheckbox,
+  NeoDropdown,
+  NeoDropdownItem,
+} from '@kodadot1/brick'
+import collectionListWithSearch from '@/queries/subsquid/general/collectionListWithSearch.graphql'
+import ActiveCount from '../explore/ActiveCount.vue'
+import { CollectionEntityMinimal } from '@/components/collection/utils/types'
+import { getDenyList } from '@/utils/prefix'
+import isEqual from 'lodash/isEqual'
+
+type Collection = CollectionEntityMinimal & {
+  owners: number
+  owned: number
+}
+
+const props = defineProps<{
+  id: string
+  modelValue: string[]
+  search: Record<string, string | number>
+  tabKey: string
+}>()
+
+const isLoading = ref(false)
+const checked = useVModel(props, 'modelValue')
+
+const { urlPrefix, client } = usePrefix()
+
+const collections = ref<Collection[]>([])
+
+const isDisabled = computed(
+  () => collections.value.length === 0 || isLoading.value,
+)
+
+const nonCollectionSearchParams = computed(() => {
+  const search = { ...props.search }
+  delete search.collection
+  return search
+})
+
+const getProfileCollections = async () => {
+  const collectionSearch = {
+    nfts_some: nonCollectionSearchParams.value,
+  }
+
+  isLoading.value = true
+
+  const { data } = await useAsyncQuery({
+    query: collectionListWithSearch,
+    variables: {
+      search: [collectionSearch],
+      denyList: getDenyList(urlPrefix.value),
+      first: 100,
+      offset: 0,
+    },
+    clientId: client.value,
+    cache: true,
+  })
+
+  const collectionEntities = data.value?.collectionEntities || []
+
+  collections.value = formatCollections(collectionEntities)
+
+  syncCheckedCollections()
+
+  isLoading.value = false
+}
+
+const formatCollections = (collectionEntities) => {
+  return collectionEntities.map((collection) => {
+    const currentOwners = collection.nfts.map((nft) => nft.currentOwner)
+
+    return {
+      ...collection,
+      owners: new Set(currentOwners).size,
+      owned: currentOwners.filter(
+        (currentOwner: string) => props.id === currentOwner,
+      ).length,
+    }
+  })
+}
+
+const isSelected = (collection: Collection) => {
+  return checked.value.includes(collection.id)
+}
+
+const syncCheckedCollections = () => {
+  const filteredChecked = collections.value
+    .map((c) => c.id)
+    .filter((id) => checked.value.includes(id))
+
+  if (isEqual(checked.value, filteredChecked)) {
+    return
+  }
+
+  checked.value = filteredChecked
+}
+
+watch(
+  nonCollectionSearchParams,
+  async (search, prevSearch) => {
+    if (!isEqual(search, prevSearch)) {
+      await getProfileCollections()
+    }
+  },
+  { deep: true },
+)
+
+useLazyAsyncData('profileCollections', async () => {
+  await getProfileCollections()
+})
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/styles/abstracts/variables';
+
+.rounded {
+  border-radius: 1rem;
+}
+.dropdown-width {
+  width: 18.75rem;
+
+  @include mobile {
+    width: unset;
+  }
+}
+</style>
diff --git a/components/profile/ProfileDetail.vue b/components/profile/ProfileDetail.vue
index 4e6dee70d9..8b45056513 100644
--- a/components/profile/ProfileDetail.vue
+++ b/components/profile/ProfileDetail.vue
@@ -149,13 +149,25 @@
               :label="$t('activity.sold')"
               url-param="sold"
               class="ml-4" />
+
+            <CollectionFilter
+              :id="id.toString()"
+              v-model="collections"
+              :search="itemsGridSearch"
+              :tab-key="tabKey"
+              class="ml-4" />
           </div>
           <div class="is-hidden-mobile">
-            <ProfileGrid class="is-hidden-mobile" />
+            <GridLayoutControls
+              class="is-hidden-mobile"
+              :section="gridSection" />
           </div>
         </div>
         <hr class="my-0" />
-        <ItemsGrid :search="itemsGridSearch" />
+        <ItemsGrid
+          :search="itemsGridSearch"
+          :grid-section="gridSection"
+          :reset-search-query-params="['sort']" />
       </div>
 
       <CollectionGrid
@@ -174,7 +186,6 @@ import { NeoButton, NeoModal } from '@kodadot1/brick'
 import TabItem from '@/components/shared/TabItem.vue'
 import Identity from '@/components/identity/IdentityIndex.vue'
 import ItemsGrid from '@/components/items/ItemsGrid/ItemsGrid.vue'
-import ProfileGrid from './ProfileGrid.vue'
 import ProfileActivity from './ProfileActivitySummery.vue'
 import FilterButton from './FilterButton.vue'
 import ChainDropdown from '@/components/common/ChainDropdown.vue'
@@ -187,6 +198,8 @@ import { useListingCartStore } from '@/stores/listingCart'
 import resolveQueryPath from '@/utils/queryPathResolver'
 import { chainsWithMintInteraction } from '@/composables/collectionActivity/helpers'
 import { Interaction } from '@kodadot1/minimark/v1'
+import CollectionFilter from './CollectionFilter.vue'
+import GridLayoutControls from '@/components/shared/GridLayoutControls.vue'
 
 enum ProfileTab {
   OWNED = 'owned',
@@ -195,6 +208,7 @@ enum ProfileTab {
   ACTIVITY = 'activity',
 }
 
+const gridSection = GridSection.PROFILE_GALLERY
 const NuxtLink = resolveComponent('NuxtLink')
 
 const route = useRoute()
@@ -226,23 +240,37 @@ const legal = ref('')
 const riot = ref('')
 const isModalActive = ref(false)
 
+const tabKey = computed(() =>
+  activeTab.value === ProfileTab.OWNED ? 'currentOwner_eq' : 'issuer_eq',
+)
+
+const collections = ref(
+  route.query.collections?.toString().split(',').filter(Boolean) || [],
+)
+
 const itemsGridSearch = computed(() => {
-  const tabKey =
-    activeTab.value === ProfileTab.OWNED ? 'currentOwner_eq' : 'issuer_eq'
   const query: Record<string, unknown> = {
-    [tabKey]: id.value,
+    [tabKey.value]: id.value,
+    burned_eq: false,
   }
 
   if (listed.value) {
     query['price_gt'] = 0
   }
-  if (sold.value) {
+
+  if (addSold.value) {
     query['events_some'] = {
       interaction_eq: 'BUY',
       AND: { caller_not_eq: id.value },
     }
   }
 
+  if (collections.value?.length) {
+    query['collection'] = {
+      id_in: collections.value,
+    }
+  }
+
   return query
 })
 
@@ -258,6 +286,9 @@ const activeTab = computed({
 const listed = computed(() => route.query.buy_now === 'true')
 
 const sold = computed(() => route.query.sold === 'true')
+const addSold = computed(
+  () => activeTab.value === ProfileTab.CREATED && sold.value,
+)
 
 const isMyProfile = computed(() => id.value === accountId.value)
 const hasBlockExplorer = computed(() => hasExplorer(urlPrefix.value))
@@ -324,6 +355,12 @@ watch(itemsGridSearch, (searchTerm, prevSearchTerm) => {
     listingCartStore.clear()
   }
 })
+
+watch(collections, (value) => {
+  replaceUrl({
+    collections: value.length ? value.toString() : undefined,
+  })
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/profile/ProfileGrid.vue b/components/profile/ProfileGrid.vue
deleted file mode 100644
index e1cb147a95..0000000000
--- a/components/profile/ProfileGrid.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <NeoField addons-class="mb-0" class="mb-0">
-    <NeoButton
-      icon-left="grid-2"
-      no-shadow
-      :active="gridSize === 'large'"
-      @click="changeGridLayout(smallGridLayout, 'large')" />
-    <NeoButton
-      icon-left="grid"
-      no-shadow
-      class="no-border-left"
-      :active="gridSize === 'medium'"
-      @click="changeGridLayout(smallGridLayout, 'medium')" />
-  </NeoField>
-</template>
-
-<script setup lang="ts">
-import { NeoButton, NeoField } from '@kodadot1/brick'
-import { usePreferencesStore } from '@/stores/preferences'
-
-const preferencesStore = usePreferencesStore()
-
-const gridSize = computed(() => preferencesStore.getGridSize)
-
-const smallGridLayout = ref('is-half-desktop is-half-tablet is-half-mobile')
-
-const changeGridLayout = (layout: string, grid: string) => {
-  preferencesStore.setGalleryLayoutClass(layout)
-  preferencesStore.setGridSize(grid)
-}
-</script>
diff --git a/components/shared/DynamicGrid.vue b/components/shared/DynamicGrid.vue
index d86df2871c..435e5b5e9b 100644
--- a/components/shared/DynamicGrid.vue
+++ b/components/shared/DynamicGrid.vue
@@ -6,7 +6,12 @@
 
 <script setup lang="ts">
 import { useResizeObserver } from '@vueuse/core'
-import { usePreferencesStore } from '@/stores/preferences'
+import {
+  DEFAULT_GRID_SECTION,
+  GridSection,
+  type GridSize,
+  usePreferencesStore,
+} from '@/stores/preferences'
 
 const props = withDefaults(
   defineProps<{
@@ -15,8 +20,9 @@ const props = withDefaults(
       medium: number
       large: number
     }
-    gridSize?: 'small' | 'medium' | 'large'
+    gridSize?: GridSize
     mobileVariant?: boolean
+    gridSection?: GridSection
     mobileCols?: number
   }>(),
   {
@@ -26,6 +32,7 @@ const props = withDefaults(
       large: 16 * 20, // 20rem
     }),
     mobileVariant: true,
+    gridSection: DEFAULT_GRID_SECTION,
     mobileCols: 1,
   },
 )
@@ -36,7 +43,12 @@ const cols = ref(5)
 const containerWidth = ref(0)
 const container = ref<HTMLDivElement | null>(null)
 
-const grid = computed(() => props.gridSize || preferencesStore.getGridSize)
+const grid = computed(
+  () =>
+    props.gridSize ||
+    (props.gridSection &&
+      preferencesStore.getGridConfigBySection(props.gridSection)?.size),
+)
 const isMobileVariant = computed(
   () => props.mobileVariant && containerWidth.value <= 768,
 )
diff --git a/components/shared/GridLayoutControls.vue b/components/shared/GridLayoutControls.vue
new file mode 100644
index 0000000000..98f6a5e205
--- /dev/null
+++ b/components/shared/GridLayoutControls.vue
@@ -0,0 +1,69 @@
+<template>
+  <NeoField addons-class="mb-0" class="mb-0">
+    <template v-for="grid in grids">
+      <NeoButton
+        v-if="sizes.includes(grid.size)"
+        :key="grid.size"
+        :icon-left="grid.icon"
+        :active="gridSize === grid.size"
+        @click="changeGridLayout(grid.class, grid.size)" />
+    </template>
+  </NeoField>
+</template>
+
+<script setup lang="ts">
+import { NeoButton, NeoField } from '@kodadot1/brick'
+import {
+  DEFAULT_GRID_SECTION,
+  GridSection,
+  type GridSize,
+  largeGridLayout,
+  smallGridLayout,
+  usePreferencesStore,
+} from '@/stores/preferences'
+
+type Grid = { icon: string; size: GridSize; class: string }
+
+const props = withDefaults(
+  defineProps<{
+    sizes?: GridSize[]
+    section: GridSection
+  }>(),
+  {
+    sizes: () => ['small', 'large', 'medium'],
+    section: DEFAULT_GRID_SECTION,
+  },
+)
+
+const grids: Grid[] = [
+  {
+    icon: 'grid-2',
+    size: 'large',
+    class: smallGridLayout,
+  },
+  {
+    icon: 'grid',
+    size: 'medium',
+    class: smallGridLayout,
+  },
+  {
+    icon: 'grid-4',
+    size: 'small',
+    class: largeGridLayout,
+  },
+]
+
+const preferencesStore = usePreferencesStore()
+
+const gridSize = computed(
+  () => preferencesStore.getGridConfigBySection(props.section)?.size,
+)
+
+const changeGridLayout = (layoutClass: string, size: GridSize) => {
+  preferencesStore.setGridConfig({
+    section: props.section,
+    size: size,
+    class: layoutClass,
+  })
+}
+</script>
diff --git a/components/teleport/EDWarningModal.vue b/components/teleport/EDWarningModal.vue
new file mode 100644
index 0000000000..b979cb2ed4
--- /dev/null
+++ b/components/teleport/EDWarningModal.vue
@@ -0,0 +1,90 @@
+<template>
+  <NeoModal
+    :value="isModalActive"
+    scroll="clip"
+    :enable-mobile="false"
+    content-class="mx-4 "
+    :can-cancel="false">
+    <div class="px-6 py-5 width-350">
+      <div class="is-flex mb-4 is-align-items-center">
+        <NeoIcon
+          icon="triangle-exclamation"
+          pack="fasr"
+          class="mr-3"
+          size="medium" />
+        <span class="has-text-weight-bold">{{
+          $t('teleport.fundLossRisk')
+        }}</span>
+      </div>
+      <div
+        class="is-flex is-flex-direction-column px-4 bakground-warning-red border border-color-k-red">
+        <span class="my-3">
+          {{
+            $t('teleport.insufficientExistentialDeposit', [
+              existentialDeposit,
+              currency,
+            ])
+          }}
+          <b>{{ $t('teleport.lossOfFunds') }}</b>
+        </span>
+        <div class="is-flex py-4">
+          <NeoCheckbox
+            v-model="checked"
+            class="mr-3 is-size-7"
+            :label="$t('teleport.checkboxLabel')" />
+        </div>
+      </div>
+      <div
+        class="is-flex mt-5 is-align-items-center is-justify-content-space-between">
+        <NeoButton
+          variant="pill"
+          :disabled="!checked"
+          class="mr-4"
+          no-shadow
+          :label="$t('massmint.mobileDisclaimer.continueAnyway')"
+          @click="emit('continue')" />
+        <NeoButton
+          variant="pill"
+          :label="$t('autoTeleport.close')"
+          @click="emit('close')" />
+      </div>
+    </div>
+  </NeoModal>
+</template>
+
+<script setup lang="ts">
+import { NeoButton, NeoCheckbox, NeoIcon, NeoModal } from '@kodadot1/brick'
+
+const props = defineProps<{
+  modelValue: boolean
+  existentialDeposit: number
+  currency: Currency
+}>()
+
+const isModalActive = useVModel(props, 'modelValue')
+const checked = ref(false)
+watch(isModalActive, () => {
+  checked.value = false
+})
+
+const emit = defineEmits(['close', 'continue'])
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/abstracts/variables.scss';
+
+.width-350 {
+  max-width: 350px;
+}
+
+.bakground-warning-red {
+  @include ktheme() {
+    background-color: theme('k-redaccent2');
+  }
+}
+.border-color-k-red {
+  @include ktheme() {
+    border-color: theme('k-red') !important;
+  }
+}
+</style>
diff --git a/components/teleport/FundsAtRiskWarning.vue b/components/teleport/FundsAtRiskWarning.vue
new file mode 100644
index 0000000000..fc21a8a571
--- /dev/null
+++ b/components/teleport/FundsAtRiskWarning.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="has-text-danger is-flex is-align-items-center cursor-default">
+    <NeoIcon
+      icon="triangle-exclamation"
+      pack="fasr"
+      class="mr-3"
+      size="medium" />
+    <span>{{ $t('teleport.fundsAtRisk') }} -&nbsp;</span>
+    <NeoTooltip
+      multiline
+      :multiline-width="256"
+      :auto-close="['outside', 'inside']">
+      <u>{{ $t('teleport.why') }}</u>
+      <template #content>
+        <div class="has-text-left py-2 is-flex is-flex-direction-column">
+          <span class="mb-3">
+            {{
+              $t('teleport.existentialDepositTooltip', [
+                targetExistentialDepositAmount,
+              ])
+            }}
+          </span>
+          <a
+            v-safe-href="
+              'https://hello.kodadot.xyz/multi-chain/existential-deposit'
+            "
+            target="_blank"
+            class="has-text-k-blue">
+            {{ $t('teleport.whatIsExistentialDeposit') }}
+          </a>
+        </div>
+      </template>
+    </NeoTooltip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NeoIcon, NeoTooltip } from '@kodadot1/brick'
+defineProps<{
+  targetExistentialDepositAmount: number
+}>()
+</script>
diff --git a/components/teleport/Teleport.vue b/components/teleport/Teleport.vue
index 11054e7f3f..7cf5a7af65 100644
--- a/components/teleport/Teleport.vue
+++ b/components/teleport/Teleport.vue
@@ -1,5 +1,7 @@
 <template>
-  <form class="mx-auto teleport-container" @submit.prevent="teleport">
+  <form
+    class="mx-auto teleport-container"
+    @submit.prevent="checkEDBeforeTeleport">
     <Loader v-model="isLoading" :status="status" />
     <h1 class="is-size-3 has-text-weight-bold">
       {{ $t('teleport.page') }}
@@ -81,36 +83,26 @@
 
     <div
       v-if="myBalance !== undefined"
-      class="is-size-7 is-flex is-justify-content-end is-align-items-center">
-      <span class="is-flex is-align-items-center">
-        <span class="mr-2">{{ $t('general.balance') }}:</span
-        >{{ myBalanceWithoutDivision.toFixed(4) }}{{ currency }}
-      </span>
-      <NeoButton
-        no-shadow
-        rounded
-        size="small"
-        class="ml-2"
-        @click="handleMaxClick"
-        >{{ $t('teleport.max') }}</NeoButton
-      >
+      class="is-size-7 is-flex justify-content align-items flex-direction">
+      <TeleportFundsAtRiskWarning
+        v-if="insufficientExistentialDeposit"
+        :target-existential-deposit-amount="targetExistentialDepositAmount" />
+      <div class="is-flex">
+        <span class="is-flex is-align-items-center">
+          <span class="mr-2">{{ $t('general.balance') }}:</span
+          >{{ myBalanceWithoutDivision.toFixed(4) }}{{ currency }}
+        </span>
+        <NeoButton
+          no-shadow
+          rounded
+          size="small"
+          class="ml-2"
+          @click="handleMaxClick"
+          >{{ $t('teleport.max') }}</NeoButton
+        >
+      </div>
     </div>
 
-    <a
-      v-if="insufficientExistentialDeposit"
-      v-safe-href="
-        `https://support.polkadot.network/support/solutions/articles/65000168651-what-is-the-existential-deposit`
-      "
-      target="_blank"
-      class="has-text-danger">
-      {{
-        $t('teleport.insufficientExistentialDeposit', [
-          targetExistentialDepositAmount,
-          currency,
-        ])
-      }}
-    </a>
-
     <NeoButton
       :label="teleportLabel"
       size="large"
@@ -139,6 +131,17 @@
       {{ $t('teleport.ownerMessage') }}
     </div>
   </form>
+  <TeleportEdWarningModal
+    v-model="insufficientEDModalOpen"
+    :existential-deposit="targetExistentialDepositAmount"
+    :currency="currency"
+    @continue="
+      () => {
+        insufficientEDModalOpen = false
+        teleport()
+      }
+    "
+    @close="insufficientEDModalOpen = false" />
 </template>
 
 <script setup lang="ts">
@@ -155,9 +158,8 @@ import formatBalance from '@/utils/format/balance'
 import Loader from '@/components/shared/Loader.vue'
 import shortAddress from '@/utils/shortAddress'
 import { chainIcons, getChainName } from '@/utils/chain'
-import NeoInput from '~/libs/ui/src/components/NeoInput/NeoInput.vue'
 import NetworkDropdown from './NetworkDropdown.vue'
-import { NeoButton, NeoField } from '@kodadot1/brick'
+import { NeoButton, NeoField, NeoInput } from '@kodadot1/brick'
 import { blockExplorerOf } from '@/utils/config/chain.config'
 import { simpleDivision } from '@/utils/balance'
 import { useFiatStore } from '@/stores/fiat'
@@ -180,6 +182,7 @@ const toChain = ref(Chain.ASSETHUBPOLKADOT) //Selected destination parachain
 const amount = ref(0) //Required amount to be transfered is stored here
 const unsubscribeKusamaBalance = ref()
 const teleportFee = ref()
+const insufficientEDModalOpen = ref(false)
 
 const DOT_BUFFER_FEE = 100000000 // 0.01
 const KSM_BUFFER_FEE = 1000000000 // 0.001
@@ -222,7 +225,7 @@ const insufficientExistentialDeposit = computed(() => {
 
 const teleportLabel = computed(() => {
   if (insufficientBalance.value) {
-    return $i18n.t('teleport.insufficientBalance', [currency])
+    return $i18n.t('teleport.insufficientBalance', [currency.value])
   }
 
   if (insufficientAmountAfterFees.value && amount.value !== 0) {
@@ -403,6 +406,14 @@ const handleMaxClick = () => {
     Math.floor((myBalanceWithoutDivision.value || 0) * 10 ** 4) / 10 ** 4
 }
 
+const checkEDBeforeTeleport = () => {
+  if (insufficientExistentialDeposit.value) {
+    insufficientEDModalOpen.value = true
+  } else {
+    teleport()
+  }
+}
+
 const teleport = async () => {
   await sendXCM({
     amount: amountToTeleport.value,
@@ -437,6 +448,20 @@ onBeforeUnmount(() => {
 </script>
 <style lang="scss" scoped>
 @import '@/assets/styles/abstracts/variables';
+$xs-breakpoint: 400px;
+
+.flex-direction {
+  @include until($xs-breakpoint) {
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+}
+.align-items {
+  align-items: center;
+  @include until($xs-breakpoint) {
+    align-items: flex-start;
+  }
+}
 
 .teleport-container {
   @include tablet {
@@ -451,6 +476,13 @@ onBeforeUnmount(() => {
   }
 }
 
+.justify-content {
+  justify-content: space-between;
+  @include until($xs-breakpoint) {
+    justify-content: flex-end;
+  }
+}
+
 .is-absolute-right {
   position: absolute;
   right: 2rem;
diff --git a/composables/autoTeleport/types.ts b/composables/autoTeleport/types.ts
index 7d005d02b8..bda63654a9 100644
--- a/composables/autoTeleport/types.ts
+++ b/composables/autoTeleport/types.ts
@@ -46,4 +46,5 @@ export type AutoTeleportAction = {
 export type AutoTeleportFeeParams = {
   actions?: number
   actionAutoFees?: boolean
+  actionLazyFetch?: boolean
 }
diff --git a/composables/autoTeleport/useAutoTeleport.ts b/composables/autoTeleport/useAutoTeleport.ts
index 9aaa4a0ac6..3074e0fabb 100644
--- a/composables/autoTeleport/useAutoTeleport.ts
+++ b/composables/autoTeleport/useAutoTeleport.ts
@@ -26,7 +26,7 @@ export default function (
   const {
     hasEnoughInCurrentChain,
     hasEnoughInRichestChain,
-    hasBalances,
+    isReady,
     optimalTransition,
   } = useAutoTeleportTransition({
     actions,
@@ -83,7 +83,7 @@ export default function (
   return {
     hasEnoughInCurrentChain,
     hasEnoughInRichestChain,
-    hasBalances,
+    isReady,
     optimalTransition,
     transactions,
     isAvailable,
diff --git a/composables/autoTeleport/useAutoTeleportTransition.ts b/composables/autoTeleport/useAutoTeleportTransition.ts
index 5e56595341..2fe7a13b8d 100644
--- a/composables/autoTeleport/useAutoTeleportTransition.ts
+++ b/composables/autoTeleport/useAutoTeleportTransition.ts
@@ -24,12 +24,12 @@ export default function ({
 
   const {
     amountToTeleport,
-    hasBalances,
     hasEnoughInCurrentChain,
     hasEnoughInRichestChain,
     sourceChain,
     chainSymbol,
     txFees,
+    isReady,
   } = useAutoTeleportTransitionDetails(actions, neededAmount, fees)
 
   const { formatted: amountFormatted, usd: amountUsd } = useAmount(
@@ -48,7 +48,7 @@ export default function ({
 
     let source: TeleportChain | null = null
 
-    if (hasEnoughInRichestChain.value && sourceChain.value) {
+    if (hasEnoughInRichestChain.value && sourceChain.value && isReady.value) {
       source = {
         chain: sourceChain.value,
         prefix: chainToPrefixMap[sourceChain.value],
@@ -73,7 +73,7 @@ export default function ({
 
   return {
     isAvailable,
-    hasBalances,
+    isReady,
     hasEnoughInCurrentChain,
     hasEnoughInRichestChain,
     optimalTransition,
diff --git a/composables/autoTeleport/useAutoTeleportTransitionDetails.ts b/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
index b0a9f44dc9..80258161ec 100644
--- a/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
+++ b/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
@@ -13,10 +13,16 @@ import type { AutoTeleportAction, AutoTeleportFeeParams } from './types'
 const BUFFER_FEE_PERCENT = 0.2
 const BUFFER_AMOUNT_PERCENT = 0.02
 
+const DEFAULT_AUTO_TELEPORT_FEE_PARAMS = {
+  actionAutoFees: true,
+  actions: 0,
+  actionLazyFetch: false,
+}
+
 export default function (
   actions: ComputedRef<AutoTeleportAction[]>,
   neededAmount: ComputedRef<number>,
-  fees: AutoTeleportFeeParams = { actionAutoFees: true, actions: 0 },
+  feesParams: AutoTeleportFeeParams = DEFAULT_AUTO_TELEPORT_FEE_PARAMS,
 ) {
   const {
     chainBalances,
@@ -24,16 +30,17 @@ export default function (
     fetchChainsBalances,
     getAddressByChain,
   } = useTeleport()
+  const fees = { ...DEFAULT_AUTO_TELEPORT_FEE_PARAMS, ...feesParams }
+
   const { apiInstance, apiInstanceByPrefix } = useApi()
   const { balance } = useBalance()
 
-  const hasBalances = ref(false)
+  const fetched = ref({ teleportTxFee: false, actionTxFees: false })
   const teleportTxFee = ref(0)
   const actionTxFees = ref<number[]>([])
   const extraActionFees = computed(() =>
     fees.actions ? Math.ceil(fees.actions) : 0,
   )
-  const actionAutoFees = computed(() => fees.actionAutoFees || true)
 
   const chainSymbol = computed(
     () => currentChain.value && getChainCurrency(currentChain.value),
@@ -71,6 +78,16 @@ export default function (
       Number(transferableCurrentChainBalance.value),
   )
 
+  const needsSourceChainBalances = computed(
+    () => !hasEnoughInCurrentChain.value,
+  )
+
+  const actionAutoFees = computed(() =>
+    fees.actionAutoFees
+      ? fees.actionLazyFetch || needsSourceChainBalances.value
+      : false,
+  )
+
   const sourceChainsBalances = computed<{ [key: Chain]: string }>(() =>
     allowedSourceChains.value.reduce(
       (reducer, chainPrefix) => ({
@@ -81,6 +98,12 @@ export default function (
     ),
   )
 
+  const hasBalances = computed(
+    () =>
+      Boolean(currentChainBalance.value) &&
+      Object.values(sourceChainsBalances.value).every(Boolean),
+  )
+
   const richestChain = computed<Chain | undefined>(
     () => getMaxKeyByValue(sourceChainsBalances.value) as Chain | undefined,
   )
@@ -121,6 +144,39 @@ export default function (
     return sourceChainProperties?.tokenSymbol === chainSymbol.value
   })
 
+  const fetchTeleportFee = computed(
+    () =>
+      richestChain.value &&
+      !teleportTxFee.value &&
+      addTeleportFee.value &&
+      hasEnoughInRichestChain.value &&
+      amountToTeleport.value > 0,
+  )
+
+  const doesNotNeedsTeleport = computed<boolean>(() => {
+    const needsTeleport =
+      Boolean(currentChainBalance.value) && !hasEnoughInCurrentChain.value
+
+    if (!needsTeleport) {
+      return true
+    }
+
+    return Boolean(richestChain.value) && !hasEnoughInRichestChain.value
+  })
+
+  const hasFetchedDetails = computed(() => {
+    if (doesNotNeedsTeleport.value) {
+      return true
+    }
+
+    return [
+      fetched.value.teleportTxFee,
+      actionAutoFees.value || fetched.value.actionTxFees,
+    ].every(Boolean)
+  })
+
+  const isReady = computed(() => hasBalances.value && hasFetchedDetails.value)
+
   const getTeleportTransactionFee = async () => {
     return await getTransactionFee({
       amount: amountToTeleport.value,
@@ -132,15 +188,6 @@ export default function (
     })
   }
 
-  const fetchTeleportFee = computed(
-    () =>
-      richestChain.value &&
-      !teleportTxFee.value &&
-      addTeleportFee.value &&
-      hasEnoughInRichestChain.value &&
-      amountToTeleport.value > 0,
-  )
-
   const getTransitionBalances = () => {
     return fetchChainsBalances([
       ...allowedSourceChains.value,
@@ -150,8 +197,10 @@ export default function (
 
   watch(fetchTeleportFee, async () => {
     if (fetchTeleportFee.value) {
+      fetched.value.teleportTxFee = false
       const fee = await getTeleportTransactionFee()
       teleportTxFee.value = Number(fee) || 0
+      fetched.value.teleportTxFee = true
     }
   })
 
@@ -164,6 +213,7 @@ export default function (
     async () => {
       if (actionAutoFees.value) {
         try {
+          fetched.value.actionTxFees = false
           const feesPromisses = actions.value.map(
             async ({ action, prefix }) => {
               let api = await apiInstance.value
@@ -182,6 +232,8 @@ export default function (
           actionTxFees.value = fees.map(Number)
         } catch (error) {
           console.error(`[AUTOTELEPORT]: Failed getting action fee  ${error}`)
+        } finally {
+          fetched.value.actionTxFees = true
         }
       }
     },
@@ -189,11 +241,10 @@ export default function (
   )
 
   watch(
-    [allowedSourceChains, hasEnoughInCurrentChain],
+    [allowedSourceChains, needsSourceChainBalances],
     async () => {
-      if (allowedSourceChains.value.length && !hasEnoughInCurrentChain.value) {
+      if (allowedSourceChains.value.length && needsSourceChainBalances.value) {
         await getTransitionBalances()
-        hasBalances.value = true
       }
     },
     { immediate: true },
@@ -201,7 +252,7 @@ export default function (
 
   return {
     amountToTeleport,
-    hasBalances,
+    isReady,
     hasEnoughInCurrentChain,
     hasEnoughInRichestChain,
     sourceChain: richestChain,
diff --git a/composables/useChainRedirect.ts b/composables/useChainRedirect.ts
index 51d754163a..e850382524 100644
--- a/composables/useChainRedirect.ts
+++ b/composables/useChainRedirect.ts
@@ -53,6 +53,8 @@ function getRedirectPathForPrefix({
   if (routeName === 'prefix-u-id') {
     const accountId = getAddress(chain, route.params.id)
 
+    delete route.query.collections
+
     return {
       params: {
         prefix: chain,
diff --git a/libs/ui/src/scss/tailwind.scss b/libs/ui/src/scss/tailwind.scss
index b9cf65f7a2..4a480d674b 100644
--- a/libs/ui/src/scss/tailwind.scss
+++ b/libs/ui/src/scss/tailwind.scss
@@ -32,6 +32,7 @@
     --k-red-accent-2: #ffe6e6;
     --k-grey: #999999;
     --k-grey-fix: #999999;
+    --k-grey-light: #D9D9D9;
     --k-pink: #ffb6ef;
     --k-yellow: #feffb6;
     --k-blue-accent: #b6cbff;
@@ -78,6 +79,7 @@
     --k-red-accent-2: #390b0b;
     --k-grey: #cccccc;
     --k-grey-fix: #999999;
+    --k-grey-light: #454545;
     --k-pink: #7a2a68;
     --k-yellow: #363234;
     --k-blue-accent: #2e50a2;
diff --git a/locales/en.json b/locales/en.json
index bb31f07965..1bf898a613 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -604,7 +604,7 @@
       "onlyOneExample": "Example Of Drop",
       "mintThisNft": "Mint This NFT",
       "seeYourNft": "See Your NFT",
-      "minimumFundsDescription": "Holding a Minimum of <strong>{0}</strong> in Your Wallet is Required",
+      "minimumFundsDescription": "Holding a Minimum of <strong>{0} On {1}</strong> in Your Wallet is Required",
       "claimNftNow": "Claim NFT Now",
       "claimPaidNft": "Claim For {0}",
       "nftAlreadyMinted": "NFT Already Minted",
@@ -1088,7 +1088,15 @@
     "tweetDonation": "Tweet about your awesome donation",
     "donationSentTo": "Your donation will be sent to:",
     "ownerMessage": "(You Are Owner)",
-    "insufficientExistentialDeposit": "Sending less than the required Existential Deposit amount will result in fund loss, min value to send is [ {0} + fees ] {1}"
+    "insufficientExistentialDeposit": "Transferring Less Than {0} {1} (existential deposit) + Fees Will Lead To An Irreversible",
+    "fundsAtRisk": "Funds at risk",
+    "fundLossRisk": "Funds Loss Risk",
+    "lossOfFunds": "Loss Of Funds.",
+    "why": "Why?",
+    "existentialDepositTooltip": "Amounts Below {0} + Fees Risk Being Lost. Enter The Minimum To Proceed.",
+    "whatIsExistentialDeposit": "What is Existential Deposit?",
+    "checkboxLabel": "I understand this action will lead to an irreversible loss of funds."
+
   },
   "preferences": {
     "basic": "basic user interface",
diff --git a/plugins/clipboard.client.ts b/plugins/clipboard.client.ts
new file mode 100644
index 0000000000..5ec80deb48
--- /dev/null
+++ b/plugins/clipboard.client.ts
@@ -0,0 +1,23 @@
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.directive('clipboard', {
+    beforeMount(el, binding) {
+      el._clipboardValue = binding.value
+
+      const clickEventHandler = () => {
+        if (binding.arg === 'copy') {
+          copyToClipboard(el._clipboardValue, { toast: false })
+        }
+      }
+      el.addEventListener('click', clickEventHandler)
+      el._clickEventHandler = clickEventHandler
+    },
+    updated(el, binding) {
+      el._clipboardValue = binding.value
+    },
+    unmounted(el) {
+      if (el._clickEventHandler) {
+        el.removeEventListener('click', el._clickEventHandler)
+      }
+    },
+  })
+})
diff --git a/plugins/vueClipboard.ts b/plugins/vueClipboard.ts
deleted file mode 100644
index 21580470db..0000000000
--- a/plugins/vueClipboard.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-export default defineNuxtPlugin((nuxtApp) => {
-  const { text, copy, copied, isSupported } = useClipboard({ legacy: true })
-
-  nuxtApp.vueApp.directive('clipboard', {
-    beforeMount(el, { value, arg }) {
-      el.dataset._clipboard_value = value
-      useEventListener(el, 'click', () => {
-        switch (arg) {
-          case 'copy':
-            copy(el.dataset._clipboard_value)
-            break
-        }
-      })
-    },
-    updated(el, { value, arg }) {
-      switch (arg) {
-        case 'copy':
-          el.dataset._clipboard_value = value
-          break
-      }
-    },
-  })
-
-  return {
-    provide: {
-      clipboard: {
-        text,
-        copy,
-        copied,
-        isSupported,
-      },
-    },
-  }
-})
diff --git a/queries/fragments/collectionDetails.graphql b/queries/fragments/collectionDetails.graphql
index 86922f6da7..42568f0c0c 100644
--- a/queries/fragments/collectionDetails.graphql
+++ b/queries/fragments/collectionDetails.graphql
@@ -1,4 +1,7 @@
 fragment collectionDetails on CollectionEntity {
   name
+  meta {
+    image
+  }
   # max
 }
diff --git a/queries/subsquid/general/topCollections.graphql b/queries/subsquid/general/topCollections.graphql
new file mode 100644
index 0000000000..504ffc66cc
--- /dev/null
+++ b/queries/subsquid/general/topCollections.graphql
@@ -0,0 +1,17 @@
+query topCollections(
+	$limit: Int
+) {
+  collectionEntities(
+    orderBy: volume_DESC
+    limit: $limit
+    where: { volume_gt: "0" }
+  ) {
+    id
+    name
+    image
+    media
+    volume
+    floor
+    nftCount
+  }
+}
diff --git a/stores/preferences.ts b/stores/preferences.ts
index 2b19335aff..1c41e7386a 100644
--- a/stores/preferences.ts
+++ b/stores/preferences.ts
@@ -1,20 +1,44 @@
 import { defineStore } from 'pinia'
 
-type completePurchaseModalState = {
+type CompletePurchaseModalState = {
   isOpen: boolean
   mode: 'shopping-cart' | 'buy-now'
 }
 
+export enum GridSection {
+  EXPLORE_GALLERY = 'explore-gallery',
+  PROFILE_GALLERY = 'profile-gallery',
+}
+
+export const DEFAULT_GRID_SECTION = GridSection.EXPLORE_GALLERY
+export type GridSize = 'small' | 'medium' | 'large'
+type GridConfig = { section: GridSection; class: string; size: GridSize }
+
+export const smallGridLayout = 'is-half-desktop is-half-tablet is-half-mobile'
+export const largeGridLayout =
+  'is-one-quarter-desktop is-one-third-tablet is-half-mobile'
+
+const defaultGridConfigs: GridConfig[] = [
+  { section: DEFAULT_GRID_SECTION, class: smallGridLayout, size: 'small' },
+  {
+    section: GridSection.PROFILE_GALLERY,
+    class: largeGridLayout,
+    size: 'large',
+  },
+]
+
 interface State {
   sidebarFilterCollapseOpen: boolean
   mobileFilterCollapseOpen: boolean
   notificationBoxCollapseOpen: boolean
   shoppingCartCollapseOpen: boolean
   listingCartModalOpen: boolean
-  completePurchaseModal: completePurchaseModalState
+  completePurchaseModal: CompletePurchaseModalState
   triggerBuySuccess: boolean
+  // Layout
   layoutClass: string
-  galleryLayoutClass: string
+  gridConfigs: GridConfig[]
+  gridSize: GridSize
   advancedUI: boolean
   theatreView: string
   compactGalleryItem: boolean
@@ -28,7 +52,6 @@ interface State {
   replaceBuyNowWithYolo: boolean
   enableAllArtwork: boolean
   enableGyroEffect: boolean
-  gridSize: 'small' | 'medium' | 'large'
   firstTimeAutoTeleport: boolean
   subscribedToNewsletter: boolean
   // Minting
@@ -52,8 +75,7 @@ export const usePreferencesStore = defineStore('preferences', {
     },
     triggerBuySuccess: false,
     layoutClass: 'is-one-quarter-desktop is-one-third-tablet',
-    galleryLayoutClass:
-      'is-one-quarter-desktop is-one-third-tablet is-half-mobile',
+    gridConfigs: defaultGridConfigs,
     advancedUI: false,
     theatreView: 'default',
     compactGalleryItem: true,
@@ -83,7 +105,8 @@ export const usePreferencesStore = defineStore('preferences', {
     getCompletePurchaseModal: (state) => state.completePurchaseModal,
     getTriggerBuySuccess: (state) => state.triggerBuySuccess,
     getLayoutClass: (state) => state.layoutClass,
-    getGalleryLayoutClass: (state) => state.galleryLayoutClass,
+    getGridConfigBySection: (state) => (section: GridSection) =>
+      state.gridConfigs.find((grid) => grid.section === section),
     getTheatreView: (state) => state.theatreView,
     getCompactCollection: (state) => state.compactCollection,
     getShowPriceValue: (state) => state.showPriceGallery,
@@ -97,7 +120,6 @@ export const usePreferencesStore = defineStore('preferences', {
     getHasCarbonOffset: (state) => state.hasCarbonOffset,
     getLoadAllArtwork: (state) => state.enableAllArtwork,
     getEnableGyroEffect: (state) => state.enableGyroEffect,
-    getGridSize: (state) => state.gridSize,
     getVisitedOnboarding: (state) => state.visitedOnboarding,
     getFirstTimeAutoTeleport: (state) => state.firstTimeAutoTeleport,
     getSubscribedToNewsletter: (state) => state.subscribedToNewsletter,
@@ -116,7 +138,7 @@ export const usePreferencesStore = defineStore('preferences', {
     setShoppingCartCollapse(payload) {
       this.shoppingCartCollapseOpen = payload
     },
-    setCompletePurchaseModal(payload: completePurchaseModalState) {
+    setCompletePurchaseModal(payload: CompletePurchaseModalState) {
       this.completePurchaseModal = payload
     },
     setCompletePurchaseModalOpen(payload) {
@@ -128,15 +150,11 @@ export const usePreferencesStore = defineStore('preferences', {
     setLayoutClass(payload) {
       this.layoutClass = payload
     },
-    setGalleryLayoutClass(payload) {
-      this.galleryLayoutClass = payload
-    },
     setAdvancedUI(payload) {
       // if set to false reset state back to default
       if (!payload) {
         this.layoutClass = 'is-one-quarter-desktop is-one-third-tablet'
-        this.galleryLayoutClass =
-          'is-one-quarter-desktop is-one-third-tablet is-half-mobile'
+        this.gridConfigs = defaultGridConfigs
         this.theatreView = 'theatre'
         this.compactGalleryItem = true
         this.compactCollection = false
@@ -190,6 +208,13 @@ export const usePreferencesStore = defineStore('preferences', {
     setGridSize(payload) {
       this.gridSize = payload
     },
+    setGridConfig({ class: layoutClass, size, section }: GridConfig) {
+      const gridConfig = this.getGridConfigBySection(section)
+      if (gridConfig) {
+        gridConfig.size = size
+        gridConfig.class = layoutClass
+      }
+    },
     setVisitedOnboarding(payload: boolean) {
       this.visitedOnboarding = payload
     },
diff --git a/utils/copyToClipboard.ts b/utils/copyToClipboard.ts
new file mode 100644
index 0000000000..6341c78d54
--- /dev/null
+++ b/utils/copyToClipboard.ts
@@ -0,0 +1,29 @@
+export function copyToClipboard(
+  value: string,
+  options?: {
+    toast?: boolean
+    toastMessage?: string
+  },
+) {
+  const { copy } = useClipboard({ legacy: true })
+  const { toast } = useToast()
+
+  // Set default values for options
+  const { toast: shouldToast = true, toastMessage = 'Copied to clipboard' } =
+    options ?? {}
+
+  copy(value)
+  fallbackCopyToClipboard(value)
+  if (shouldToast) {
+    toast(toastMessage)
+  }
+}
+
+const fallbackCopyToClipboard = (value: string) => {
+  const element = document.createElement('textarea')
+  element.value = value
+  document.body.appendChild(element)
+  element.select()
+  document.execCommand('copy')
+  document.body.removeChild(element)
+}
diff --git a/utils/support.ts b/utils/support.ts
index 0238538894..953e95812b 100644
--- a/utils/support.ts
+++ b/utils/support.ts
@@ -50,9 +50,8 @@ export const feeTx = (api: ApiPromise, price: string): Extrinsic => {
   return asBalanceTransfer(api, resolveSupportAddress(api), price)
 }
 
-export const getPercentSupportFee = (price: number | string) => {
-  return Number(price) * SUPPORT_FEE_PERCENT
-}
+export const getPercentSupportFee = (price: number | string) =>
+  Math.round(Number(price) * SUPPORT_FEE_PERCENT)
 
 export const somePercentFromTX = (api: ApiPromise, price: number | string) => {
   const fee = getPercentSupportFee(price)
@@ -60,7 +59,7 @@ export const somePercentFromTX = (api: ApiPromise, price: number | string) => {
 }
 
 export const royaltyFee = (price: string | number, royaltyPercent: number) =>
-  Number(price) * (royaltyPercent / 100)
+  Math.round(Number(price) * (royaltyPercent / 100))
 
 export const payRoyaltyTx = (
   api: ApiPromise,
diff --git a/utils/teleport.ts b/utils/teleport.ts
index af0f58bde9..f047e9bb7a 100644
--- a/utils/teleport.ts
+++ b/utils/teleport.ts
@@ -248,7 +248,9 @@ export const getTransactionFee = async ({
   return info.partialFee.toString()
 }
 
-export const getChainCurrency = (chain: Chain) => {
+export type Currency = 'KSM' | 'DOT'
+
+export const getChainCurrency = (chain: Chain): Currency => {
   switch (chain) {
     case Chain.KUSAMA:
     case Chain.BASILISK: