diff --git a/.node-version b/.node-version
new file mode 100644
index 00000000..7950a445
--- /dev/null
+++ b/.node-version
@@ -0,0 +1 @@
+v18.17.0
diff --git a/README.md b/README.md
index 531e9eab..caeefc79 100644
--- a/README.md
+++ b/README.md
@@ -6,11 +6,11 @@ Wallet that will let you see the Tokens ([LSP7](https://docs.lukso.tech/standard
 
 ## 🚀 Deployments
 
-### Preview:
+### Preview
 
 When you create a PR, a preview URL will be appended to the PR discussion.
 
-### Staging:
+### Staging
 
 Branch: `develop`
 
@@ -78,3 +78,8 @@ yarn unlink ../tools-web-components/package
 ```
 
 > Make sure you remove link before pushing, otherwise it won't build in Cloudflare.
+
+### Releasing
+
+We use [Release Please](https://github.com/googleapis/release-please) to automate release process. Just merge your feature PR into `develop` branch and new release PR with changelog will be created. You can stack multiple PRs into release.
+Once you are ready to release just merge release PR into `main` branch.
diff --git a/app.vue b/app.vue
index edbb6695..17dfdc02 100644
--- a/app.vue
+++ b/app.vue
@@ -3,10 +3,6 @@ import { RouteLocationNormalized, NavigationGuardNext } from 'vue-router'
 
 import { fetchProfile } from '@/utils/fetchProfile'
 import { PROVIDERS, STORAGE_KEY } from '@/types/enums'
-import {
-  CONNECTION_EXPIRY_CHECK_INTERVAL_MS,
-  INJECTED_PROVIDER,
-} from '@/shared/config'
 import { assertString } from '@/utils/validators'
 
 if (typeof window !== 'undefined') {
@@ -17,9 +13,11 @@ if (typeof window !== 'undefined') {
 const web3Store = useWeb3Store()
 const appStore = useAppStore()
 const { providerEvents, disconnect } = useBrowserExtension()
-const { reloadProfile } = useProfileStore()
-const { setConnectedAddress, setConnectedProfile, setStatus } =
-  useConnectionStore()
+const {
+  setProfile: setConnectedProfile,
+  setStatus,
+  profile: connectedProfile,
+} = useConnectedProfileStore()
 const router = useRouter()
 
 const setupTranslations = () => {
@@ -53,7 +51,7 @@ const setupConnectedProfile = async () => {
       setStatus('isConnected', true)
       setStatus('isProfileLoading', true)
       const profile = await fetchProfile(connectedAddress)
-      setConnectedAddress(connectedAddress)
+      connectedProfile.address = connectedAddress
       setConnectedProfile(profile)
     }
   } catch (error) {
@@ -82,8 +80,8 @@ const routerBackProfileLoad = async () => {
         assertAddress(toProfileAddress, 'profile')
 
         if (toProfileAddress !== fromProfileAddress) {
-          const profile = await fetchProfile(toProfileAddress)
-          reloadProfile(profile)
+          await setupViewedProfile(toProfileAddress)
+          await setupViewedAssets(toProfileAddress)
         }
       } catch (error) {
         console.error(error)
@@ -125,6 +123,6 @@ onMounted(async () => {
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
-    <Modal />
+    <AppModal />
   </div>
 </template>
diff --git a/components/connect-or-install-button.vue b/components/AppButtonConnectOrInstall.vue
similarity index 96%
rename from components/connect-or-install-button.vue
rename to components/AppButtonConnectOrInstall.vue
index 58253d77..9d663a81 100644
--- a/components/connect-or-install-button.vue
+++ b/components/AppButtonConnectOrInstall.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const { connect, isUniversalProfileExtension } = useBrowserExtension()
-const { status } = useConnectionStore()
+const { status } = useConnectedProfileStore()
 
 const handleConnect = async () => {
   connect()
diff --git a/components/footer.vue b/components/AppFooter.vue
similarity index 100%
rename from components/footer.vue
rename to components/AppFooter.vue
diff --git a/components/modal.vue b/components/AppModal.vue
similarity index 87%
rename from components/modal.vue
rename to components/AppModal.vue
index 697506be..72fff6e9 100644
--- a/components/modal.vue
+++ b/components/AppModal.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { MODAL_DEFAULT_TEMPLATE } from '@/shared/config'
-
 const appStore = useAppStore()
 const modalTemplateComponent = shallowRef()
 
@@ -9,7 +7,7 @@ const loadModalTemplate = () => {
     const templateName = appStore.modal?.template
       ? appStore.modal.template
       : MODAL_DEFAULT_TEMPLATE
-    return import(`./modal-templates/${templateName}.vue`)
+    return import(`./AppModalTemplate${templateName}.vue`)
   })
 }
 
diff --git a/components/modal-templates/default.vue b/components/AppModalTemplateDefault.vue
similarity index 100%
rename from components/modal-templates/default.vue
rename to components/AppModalTemplateDefault.vue
diff --git a/components/navbar.vue b/components/AppNavbar.vue
similarity index 94%
rename from components/navbar.vue
rename to components/AppNavbar.vue
index 7153f316..248ca906 100644
--- a/components/navbar.vue
+++ b/components/AppNavbar.vue
@@ -1,11 +1,8 @@
 <script setup lang="ts">
-import { homeRoute, profileRoute, sendRoute } from '@/shared/routes'
-import { IS_TESTNET } from '@/shared/config'
-
-const { profile: connectedProfile, status } = useConnectionStore()
+const { profile: connectedProfile, status } = useConnectedProfileStore()
 const { connect, disconnect, isUniversalProfileExtension } =
   useBrowserExtension()
-const { reloadProfile } = useProfileStore()
+const { reloadProfile } = useViewedProfileStore()
 
 const handleNavigateProfile = async () => {
   try {
@@ -78,7 +75,7 @@ const browserSupportExtension = extensionStore.url !== ''
       >
         {{ $formatMessage('header_my_profile') }}
       </lukso-button>
-      <ProfileDropdown v-if="status.isConnected" />
+      <AppNavbarProfileDropdown v-if="status.isConnected" />
       <lukso-button
         v-else-if="isUniversalProfileExtension()"
         variant="secondary"
diff --git a/components/profile-dropdown.vue b/components/AppNavbarProfileDropdown.vue
similarity index 97%
rename from components/profile-dropdown.vue
rename to components/AppNavbarProfileDropdown.vue
index bb91efa1..96fba725 100644
--- a/components/profile-dropdown.vue
+++ b/components/AppNavbarProfileDropdown.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { profile } = useConnectionStore()
+const { profile } = useConnectedProfileStore()
 const { disconnect } = useBrowserExtension()
 
 const DROPDOWN_TRIGGER_TAG_NAME = 'LUKSO-PROFILE'
diff --git a/components/asset-address.vue b/components/AssetAddress.vue
similarity index 100%
rename from components/asset-address.vue
rename to components/AssetAddress.vue
diff --git a/components/asset-description.vue b/components/AssetDescription.vue
similarity index 100%
rename from components/asset-description.vue
rename to components/AssetDescription.vue
diff --git a/components/asset-images.vue b/components/AssetImages.vue
similarity index 100%
rename from components/asset-images.vue
rename to components/AssetImages.vue
diff --git a/components/asset-links.vue b/components/AssetLinks.vue
similarity index 100%
rename from components/asset-links.vue
rename to components/AssetLinks.vue
diff --git a/components/asset-own-info.vue b/components/AssetOwnInfo.vue
similarity index 100%
rename from components/asset-own-info.vue
rename to components/AssetOwnInfo.vue
diff --git a/components/asset-standard-info.vue b/components/AssetStandardInfo.vue
similarity index 100%
rename from components/asset-standard-info.vue
rename to components/AssetStandardInfo.vue
diff --git a/components/asset-token-id.vue b/components/AssetTokenId.vue
similarity index 100%
rename from components/asset-token-id.vue
rename to components/AssetTokenId.vue
diff --git a/components/nft-list.vue b/components/NftList.vue
similarity index 84%
rename from components/nft-list.vue
rename to components/NftList.vue
index a3f38d19..4f6ec655 100644
--- a/components/nft-list.vue
+++ b/components/NftList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 
-const { nfts, assetFilter } = storeToRefs(useProfileStore())
+const { nfts, assetFilter } = storeToRefs(useViewedProfileStore())
 </script>
 
 <template>
@@ -10,7 +10,7 @@ const { nfts, assetFilter } = storeToRefs(useProfileStore())
       {{ $formatMessage('collectibles_title') }}
     </h3>
     <div class="grid gap-6 grid-col grid-cols-1 sm:grid-cols-2 md:grid-cols-3">
-      <NftCard
+      <NftListCard
         v-for="(asset, index) in nfts(assetFilter)"
         :key="index"
         :asset="asset"
diff --git a/components/nftCard.vue b/components/NftListCard.vue
similarity index 93%
rename from components/nftCard.vue
rename to components/NftListCard.vue
index 29466822..582b2fec 100644
--- a/components/nftCard.vue
+++ b/components/NftListCard.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { nftRoute, sendRoute } from '@/shared/routes'
 import { Nft } from '@/types/assets'
 
 type Props = {
@@ -9,8 +8,8 @@ type Props = {
 
 const props = defineProps<Props>()
 
-const { profile: connectedProfile, status } = useConnectionStore()
-const { profile: viewedProfile } = useProfileStore()
+const { profile: connectedProfile, status } = useConnectedProfileStore()
+const { profile: viewedProfile } = useViewedProfileStore()
 
 const handleShowAsset = () => {
   try {
diff --git a/components/profile-header.vue b/components/ProfileHeader.vue
similarity index 96%
rename from components/profile-header.vue
rename to components/ProfileHeader.vue
index 6eb1d2d5..2933f571 100644
--- a/components/profile-header.vue
+++ b/components/ProfileHeader.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 
-const { profile: connectedProfile } = useConnectionStore()
+const { profile: connectedProfile } = useConnectedProfileStore()
 const { receiver } = storeToRefs(useSendStore())
 </script>
 
diff --git a/components/send-card.vue b/components/SendCard.vue
similarity index 100%
rename from components/send-card.vue
rename to components/SendCard.vue
diff --git a/components/send-draft.vue b/components/SendDraft.vue
similarity index 95%
rename from components/send-draft.vue
rename to components/SendDraft.vue
index 4638fc98..457488f9 100644
--- a/components/send-draft.vue
+++ b/components/SendDraft.vue
@@ -3,7 +3,7 @@ import { fromWei, isAddress } from 'web3-utils'
 import { storeToRefs } from 'pinia'
 import BigNumber from 'bignumber.js'
 
-const { profile: connectedProfile } = useConnectionStore()
+const { profile: connectedProfile } = useConnectedProfileStore()
 const { asset, receiverAddress, receiver, receiverError, amount, onSend } =
   storeToRefs(useSendStore())
 const isReceiverLoading = ref<boolean>(false)
@@ -174,13 +174,15 @@ const handleSend = () => {
         class="w-full mt-4"
         :loading="isReceiverLoading"
         :disabled="
-          !receiverAddress || receiverError || !amount ? true : undefined
+          !receiverAddress || receiverError || !Number(amount)
+            ? true
+            : undefined
         "
         @click="handleSend"
         is-full-width
         >{{
           $formatMessage('send_button', {
-            amount: $formatNumber(amount || '0'),
+            amount: !!Number(amount) ? $formatNumber(amount || '') : '',
             symbol: asset?.symbol || '',
           })
         }}</lukso-button
diff --git a/components/send-pending.vue b/components/SendPending.vue
similarity index 96%
rename from components/send-pending.vue
rename to components/SendPending.vue
index 0fa0096d..ab50a642 100644
--- a/components/send-pending.vue
+++ b/components/SendPending.vue
@@ -7,7 +7,7 @@ const { amount, asset } = storeToRefs(useSendStore())
 <template>
   <lukso-card variant="with-header" is-full-width>
     <div slot="header" class="px-6 py-10 flex flex-col">
-      <ProfileHeader />
+      <SendProfileHeader />
     </div>
     <div slot="content" class="p-8 flex flex-col items-center">
       <div class="heading-inter-17-semi-bold">
diff --git a/components/send-success.vue b/components/SendSuccess.vue
similarity index 96%
rename from components/send-success.vue
rename to components/SendSuccess.vue
index f4a55ee8..ca21146a 100644
--- a/components/send-success.vue
+++ b/components/SendSuccess.vue
@@ -10,7 +10,7 @@ const handleSendMore = () => {
 <template>
   <lukso-card variant="with-header" is-full-width>
     <div slot="header" class="px-6 py-10 flex flex-col">
-      <ProfileHeader />
+      <SendProfileHeader />
     </div>
     <div slot="content" class="p-8 flex flex-col items-center">
       <div class="heading-inter-17-semi-bold">
diff --git a/components/tokens-list.vue b/components/TokenList.vue
similarity index 76%
rename from components/tokens-list.vue
rename to components/TokenList.vue
index 3de4e1ae..efa19592 100644
--- a/components/tokens-list.vue
+++ b/components/TokenList.vue
@@ -3,7 +3,7 @@ import { storeToRefs } from 'pinia'
 
 import { AssetFilter } from '@/types/assets'
 
-const { tokens, assetFilter } = storeToRefs(useProfileStore())
+const { tokens, assetFilter } = storeToRefs(useViewedProfileStore())
 </script>
 
 <template>
@@ -12,8 +12,8 @@ const { tokens, assetFilter } = storeToRefs(useProfileStore())
       {{ $formatMessage('tokens_title') }}
     </h3>
     <div class="grid gap-6 grid-col grid-cols-1 sm:grid-cols-2 md:grid-cols-3">
-      <LyxCard v-if="assetFilter === AssetFilter.owned" />
-      <TokenCard
+      <TokenListLyxCard v-if="assetFilter === AssetFilter.owned" />
+      <TokenListCard
         v-for="(asset, index) in tokens(assetFilter)"
         :key="index"
         :asset="asset"
diff --git a/components/token-card.vue b/components/TokenListCard.vue
similarity index 94%
rename from components/token-card.vue
rename to components/TokenListCard.vue
index 46e2ea02..fee1377e 100644
--- a/components/token-card.vue
+++ b/components/TokenListCard.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { fromWei } from 'web3-utils'
 
-import { sendRoute, tokenRoute } from '@/shared/routes'
 import { Token, StandardsAbbreviations } from '@/types/assets'
 
 type Props = {
@@ -12,8 +11,8 @@ type Props = {
 
 const props = defineProps<Props>()
 
-const { profile: connectedProfile, status } = useConnectionStore()
-const { profile: viewedProfile } = useProfileStore()
+const { profile: connectedProfile, status } = useConnectedProfileStore()
+const { profile: viewedProfile } = useViewedProfileStore()
 
 const handleShowAsset = () => {
   if (!props.isOpenable) {
diff --git a/components/lyx-card.vue b/components/TokenListLyxCard.vue
similarity index 63%
rename from components/lyx-card.vue
rename to components/TokenListLyxCard.vue
index aa039231..8517c840 100644
--- a/components/lyx-card.vue
+++ b/components/TokenListLyxCard.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
 import { fromWei } from 'web3-utils'
 
-import { sendRoute } from '@/shared/routes'
-
-const { profile: connectedProfile, status } = useConnectionStore()
-const { profile: viewedProfile } = useProfileStore()
+const { profile: connectedProfile, status } = useConnectedProfileStore()
+const { profile: viewedProfile } = useViewedProfileStore()
 const appStore = useAppStore()
 
 const handleSendAsset = () => {
@@ -19,9 +17,9 @@ const handleSendAsset = () => {
 
 <template>
   <lukso-card size="small" is-full-width
-    ><div slot="content" class="p-4">
-      <div class="flex gap-6 pt-4">
-        <div class="pl-4 flex flex-col items-center">
+    ><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 class="border border-neutral-90 rounded-full p-0.5">
             <lukso-profile
               size="medium"
@@ -41,20 +39,20 @@ const handleSendAsset = () => {
             }}</span>
           </div>
           <div class="paragraph-inter-12-regular pb-4 hidden">$ 123.24</div>
-          <div class="flex justify-end w-full pt-4">
-            <lukso-button
-              v-if="
-                status.isConnected &&
-                viewedProfile.address === connectedProfile.address
-              "
-              size="small"
-              variant="secondary"
-              @click="handleSendAsset"
-              >{{ $formatMessage('button_send') }}</lukso-button
-            >
-          </div>
         </div>
       </div>
+      <div class="flex justify-end w-full pt-4">
+        <lukso-button
+          v-if="
+            status.isConnected &&
+            viewedProfile.address === connectedProfile.address
+          "
+          size="small"
+          variant="secondary"
+          @click="handleSendAsset"
+          >{{ $formatMessage('button_send') }}</lukso-button
+        >
+      </div>
     </div>
   </lukso-card>
 </template>
diff --git a/components/profile.vue b/components/profile.vue
index 9ade07a1..a3b0e8a3 100644
--- a/components/profile.vue
+++ b/components/profile.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { profile } = useProfileStore()
+const { profile } = useViewedProfileStore()
 
 const handleCopyAddress = () => {
   try {
@@ -24,21 +24,23 @@ const handleCopyAddress = () => {
           :profile-url="profile.profileImageUrl"
           :profile-address="profile.address"
           class="mb-4"
+          has-identicon
         >
         </lukso-profile>
         <lukso-username
-          v-if="profile.name"
-          :name="profile.name"
+          :name="profile.name || $formatMessage('profile_default_name')"
           size="large"
           address-color="neutral-100"
-          name-color="neutral-100"
+          max-width="350"
+          :name-color="profile.backgroundImageUrl ? 'neutral-100' : ''"
         ></lukso-username>
         <lukso-username
           :address="profile.address"
-          :size="profile.name ? 'small' : 'large'"
+          size="small"
           slice-by="40"
-          address-color="neutral-100"
-          name-color="neutral-100"
+          :address-color="
+            profile.backgroundImageUrl ? 'neutral-100' : 'neutral-20'
+          "
           class="cursor-pointer"
           @click="handleCopyAddress"
         ></lukso-username>
diff --git a/composables/useBrowserExtension.ts b/composables/useBrowserExtension.ts
index e670277f..1a2b7078 100644
--- a/composables/useBrowserExtension.ts
+++ b/composables/useBrowserExtension.ts
@@ -1,7 +1,4 @@
 import { PROVIDERS, STORAGE_KEY } from '@/types/enums'
-import { profileRoute } from '@/shared/routes'
-import { INJECTED_PROVIDER, CONNECTION_EXPIRY_TIME_MS } from '@/shared/config'
-import { EoAError, InterfaceError } from '@/shared/errors'
 
 const openStoreLink = () => {
   const storeLink = browserInfo().storeLink
@@ -19,8 +16,9 @@ const setConnectionExpiry = () => {
 const connect = async () => {
   const { showModal } = useModal()
   const { formatMessage } = useIntl()
-  const { reloadProfile } = useProfileStore()
-  const { setStatus, reloadConnectedProfile } = useConnectionStore()
+  const { reloadProfile } = useViewedProfileStore()
+  const { setStatus, reloadProfile: reloadConnectedProfile } =
+    useConnectedProfileStore()
 
   // when no extension installed we show modal
   if (!INJECTED_PROVIDER) {
@@ -46,7 +44,7 @@ const connect = async () => {
     setItem(STORAGE_KEY.CONNECTED_ADDRESS, address)
     const profile = await fetchProfile(address)
     reloadProfile(profile)
-    reloadConnectedProfile(address, profile)
+    reloadConnectedProfile(profile)
     setStatus('isConnected', true)
     setConnectionExpiry()
     await navigateTo(profileRoute(address))
@@ -102,7 +100,7 @@ const connect = async () => {
 }
 
 const disconnect = () => {
-  const { setStatus } = useConnectionStore()
+  const { setStatus } = useConnectedProfileStore()
   const { removeItem } = useLocalStorage()
 
   setStatus('isConnected', false)
@@ -112,8 +110,9 @@ const disconnect = () => {
 
 const providerEvents = async (provider: any) => {
   const { disconnect } = useBrowserExtension()
-  const { reloadProfile } = useProfileStore()
-  const { status, reloadConnectedProfile } = useConnectionStore()
+  const { reloadProfile } = useViewedProfileStore()
+  const { status, reloadProfile: reloadConnectedProfile } =
+    useConnectedProfileStore()
 
   const handleAccountsChanged = async (accounts: string[]) => {
     if (accounts.length) {
@@ -128,7 +127,7 @@ const providerEvents = async (provider: any) => {
       await navigateTo(profileRoute(address))
       const profile = await fetchProfile(address)
       reloadProfile(profile)
-      reloadConnectedProfile(address, profile)
+      reloadConnectedProfile(profile)
     } else {
       // when user remove connection with dApp we disconnect
       disconnect()
diff --git a/composables/useErc725.ts b/composables/useErc725.ts
index 1baca685..bf2bd4a1 100644
--- a/composables/useErc725.ts
+++ b/composables/useErc725.ts
@@ -11,8 +11,6 @@ import { SupportedAssets, TokenIdType } from '@/types/assets'
 import { getImageUrlBySize } from '@/utils/getProfileImages'
 import LSP8IdentifiableDigitalAsset from '@/shared/schemas/LSP8IdentifiableDigitalAsset.json'
 import { PROVIDERS } from '@/types/enums'
-import { getDataABI } from '@/shared/abis/getDataABI'
-import { IPFS_URL } from '@/shared/config'
 
 export interface LSP3ProfileJSON {
   LSP3Profile: LSP3Profile
@@ -64,7 +62,7 @@ const fetchAssets = async (profileAddress: Address, schema: string) => {
   )
   const result = await erc725.fetchData(schema)
   const assetAddresses = result.value as Address[]
-  const { profile } = useProfileStore()
+  const { profile } = useViewedProfileStore()
 
   const assets = Promise.all(
     assetAddresses.map(async address => {
diff --git a/composables/useIntl.ts b/composables/useIntl.ts
index 1626606f..9cd64396 100644
--- a/composables/useIntl.ts
+++ b/composables/useIntl.ts
@@ -10,6 +10,11 @@ import defaultMessages from '@/translations/en_US.json'
 const intl = ref<IntlShape>()
 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,
+}
+
 export const defaultConfig: IntlConfig = {
   locale: 'en-US',
   messages,
@@ -54,7 +59,12 @@ const formatNumber = (
     return '0'
   }
 
-  return intl.value?.formatNumber(Number(value), options) || ''
+  const mergedOptions = {
+    ...formatNumberDefaultOptions,
+    ...options,
+  }
+
+  return intl.value?.formatNumber(Number(value), mergedOptions) || ''
 }
 
 /**
diff --git a/composables/useProfileBase.ts b/composables/useProfileBase.ts
new file mode 100644
index 00000000..a92bc01f
--- /dev/null
+++ b/composables/useProfileBase.ts
@@ -0,0 +1,24 @@
+/**
+ * Set of methods shared across profile stores
+ *
+ * @param profile - Profile object
+ * @returns - methods
+ */
+export const useProfileBase = (profile: Profile) => {
+  return {
+    setProfile(newProfile: Profile) {
+      Object.assign(profile, newProfile)
+    },
+
+    clearProfile() {
+      Object.assign(profile, {})
+    },
+
+    reloadProfile(newProfile: Profile) {
+      this.clearProfile()
+      assertAddress(newProfile.address, 'profile')
+      profile.address = newProfile.address
+      this.setProfile(newProfile)
+    },
+  }
+}
diff --git a/layouts/default.vue b/layouts/default.vue
index cc7ef4ca..36f1fb8a 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,52 +1,16 @@
 <script setup lang="ts">
-import { notFoundRoute } from '@/shared/routes'
-const { setStatus, setAddress, setProfile } = useProfileStore()
-
-const setupWalletProfile = async () => {
-  try {
-    const profileAddress = useRouter().currentRoute.value.params?.profileAddress
-
-    setStatus('isProfileLoading', true)
-    assertAddress(profileAddress, 'wallet')
-    setAddress(profileAddress)
-    const profile = await fetchProfile(profileAddress)
-    setProfile(profile)
-  } catch (error) {
-    console.error(error)
-    navigateTo(notFoundRoute())
-  } finally {
-    setStatus('isProfileLoading', false)
-  }
-}
-
-const setupWalletAssets = async () => {
-  try {
-    const { profile, setOwnedAssets, setStatus, setCreatedAssets } =
-      useProfileStore()
-    const { fetchAssets } = useErc725()
-
-    setStatus('isAssetLoading', true)
-    assertNotUndefined(profile.address)
-
-    setOwnedAssets(await fetchAssets(profile.address, 'LSP5ReceivedAssets[]'))
-    setCreatedAssets(await fetchAssets(profile.address, 'LSP12IssuedAssets[]'))
-  } catch (error) {
-    console.error(error)
-  } finally {
-    setStatus('isAssetLoading', false)
-  }
-}
-
 onMounted(async () => {
-  await setupWalletProfile()
-  await setupWalletAssets()
+  const profileAddress = useRouter().currentRoute.value.params?.profileAddress
+
+  await setupViewedProfile(profileAddress)
+  await setupViewedAssets(profileAddress)
 })
 </script>
 
 <template>
   <div class="min-h-screen grid grid-rows-[max-content,auto,max-content]">
-    <Navbar />
+    <AppNavbar />
     <slot />
-    <Footer />
+    <AppFooter />
   </div>
 </template>
diff --git a/layouts/landing.vue b/layouts/landing.vue
index 2685d9fb..9bd4ec09 100644
--- a/layouts/landing.vue
+++ b/layouts/landing.vue
@@ -2,8 +2,8 @@
   <div
     class="min-h-screen grid grid-rows-[max-content,auto,max-content] bg-gradient-to-b from-[rgba(144,155,209,0.10)] via-[rgba(223,184,226,0.10)] to-[rgba(250,224,227,0.10)]"
   >
-    <Navbar />
+    <AppNavbar />
     <slot />
-    <Footer />
+    <AppFooter />
   </div>
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 3a83970c..faf33116 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -101,7 +101,7 @@ export default defineNuxtConfig({
     },
   },
   imports: {
-    dirs: ['stores'],
+    dirs: ['stores/**', 'shared/**'],
   },
   runtimeConfig: {
     public: {},
diff --git a/package.json b/package.json
index 2bce7701..c3f056e0 100644
--- a/package.json
+++ b/package.json
@@ -29,9 +29,9 @@
     "@erc725/erc725.js": "0.18.0",
     "@esbuild-plugins/node-globals-polyfill": "0.2.3",
     "@formatjs/intl": "^2.9.0",
-    "@lukso/lsp-factory.js": "3.0.0",
-    "@lukso/lsp-smart-contracts": "^0.11.1",
-    "@lukso/web-components": "^1.33.1",
+    "@lukso/lsp-factory.js": "3.1.1",
+    "@lukso/lsp-smart-contracts": "0.11.1",
+    "@lukso/web-components": "1.34.1",
     "@nuxt/devtools": "^0.7.4",
     "@nuxtjs/device": "^3.1.0",
     "@nuxtjs/plausible": "^0.2.1",
diff --git a/pages/[...404].vue b/pages/404.vue
similarity index 96%
rename from pages/[...404].vue
rename to pages/404.vue
index 74ab851e..19417d56 100644
--- a/pages/[...404].vue
+++ b/pages/404.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { homeRoute } from '@/shared/routes'
-
 const { formatMessage } = useIntl()
 
 const handleVisitHomepage = () => {
diff --git a/pages/[profileAddress]/index.vue b/pages/[profileAddress]/index.vue
index d0be1080..285f4aa8 100644
--- a/pages/[profileAddress]/index.vue
+++ b/pages/[profileAddress]/index.vue
@@ -3,26 +3,48 @@ import { storeToRefs } from 'pinia'
 
 import { AssetFilter } from '@/types/assets'
 
-const { status } = useProfileStore()
+const { status } = useViewedProfileStore()
 
-const { assetFilter, tokens, nfts } = storeToRefs(useProfileStore())
+const { assetFilter, tokens, nfts } = storeToRefs(useViewedProfileStore())
 
-const tokensCount = computed(() => {
-  const count =
-    tokens.value(AssetFilter.owned)?.length +
-    nfts.value(AssetFilter.owned)?.length +
-    1 // we +1 for LYX token that we show even with 0 balance
+const ownedTokensCount = computed(
+  () => tokens.value(AssetFilter.owned)?.length + 1 // we +1 for LYX token that we show even with 0 balance
+)
 
-  return count
-})
+const ownedNftsCount = computed(() => nfts.value(AssetFilter.owned)?.length)
 
-const nftsCount = computed(() => {
-  const count =
-    tokens.value(AssetFilter.created)?.length +
-    nfts.value(AssetFilter.created)?.length
+const ownedAssetsCount = computed(
+  () => ownedTokensCount.value + ownedNftsCount.value
+)
 
-  return count
-})
+const createdTokensCount = computed(
+  () => tokens.value(AssetFilter.created)?.length
+)
+
+const createdNftsCount = computed(() => nfts.value(AssetFilter.created)?.length)
+
+const createdAssetsCount = computed(
+  () => createdTokensCount.value + createdNftsCount.value
+)
+
+const hasEmptyCreators = computed(
+  () =>
+    assetFilter.value === AssetFilter.created &&
+    !createdNftsCount.value &&
+    !createdTokensCount.value
+)
+
+const hasEmptyTokens = computed(
+  () =>
+    assetFilter.value === AssetFilter.owned ||
+    (assetFilter.value === AssetFilter.created && createdTokensCount.value)
+)
+
+const hasEmptyNfts = computed(
+  () =>
+    (assetFilter.value === AssetFilter.owned && ownedNftsCount.value) ||
+    (assetFilter.value === AssetFilter.created && createdNftsCount.value)
+)
 </script>
 
 <template>
@@ -42,7 +64,7 @@ const nftsCount = computed(() => {
               size="small"
               variant="secondary"
               :is-active="assetFilter === AssetFilter.owned ? true : undefined"
-              :count="tokensCount"
+              :count="ownedAssetsCount"
               @click="assetFilter = AssetFilter.owned"
               >{{ $formatMessage('asset_filter_owned_assets') }}</lukso-button
             >
@@ -52,13 +74,24 @@ const nftsCount = computed(() => {
               :is-active="
                 assetFilter === AssetFilter.created ? true : undefined
               "
-              :count="nftsCount"
+              :count="createdAssetsCount"
               @click="assetFilter = AssetFilter.created"
               >{{ $formatMessage('asset_filter_created_assets') }}</lukso-button
             >
           </div>
-          <TokensList />
-          <NftList />
+
+          <div v-if="hasEmptyCreators" class="pt-8">
+            <h3 class="heading-inter-17-semi-bold pb-2">
+              {{ $formatMessage('assets_empty_state_title') }}
+            </h3>
+            <lukso-sanitize
+              :html-content="$formatMessage('assets_empty_state_description')"
+            ></lukso-sanitize>
+          </div>
+          <div v-else>
+            <TokenList v-if="hasEmptyTokens" />
+            <NftList v-if="hasEmptyNfts" />
+          </div>
         </div>
       </div>
     </div>
diff --git a/pages/[profileAddress]/nft/[nftAddress]/tokenId/[tokenId].vue b/pages/[profileAddress]/nft/[nftAddress]/tokenId/[tokenId].vue
index cd42da13..5abfcbde 100644
--- a/pages/[profileAddress]/nft/[nftAddress]/tokenId/[tokenId].vue
+++ b/pages/[profileAddress]/nft/[nftAddress]/tokenId/[tokenId].vue
@@ -8,9 +8,9 @@ const {
   getNft,
   status: profileStatus,
   profile: viewedProfile,
-} = useProfileStore()
+} = useViewedProfileStore()
 const { status: connectionStatus, profile: connectedProfile } =
-  useConnectionStore()
+  useConnectedProfileStore()
 const nft = ref<Nft>()
 
 watchEffect(() => {
@@ -112,7 +112,11 @@ watchEffect(() => {
           "
           :images="nft.data.collectionImages"
         />
-        <AssetStandardInfo v-if="nft?.standard" :standard="nft.standard" />
+        <AssetStandardInfo
+          v-if="nft?.standard"
+          :standard="nft.standard"
+          class="hidden"
+        />
       </div>
     </div>
     <lukso-icon
diff --git a/pages/[profileAddress]/send.vue b/pages/[profileAddress]/send.vue
index b2b7f05b..eb1542c2 100644
--- a/pages/[profileAddress]/send.vue
+++ b/pages/[profileAddress]/send.vue
@@ -3,11 +3,9 @@ import { storeToRefs } from 'pinia'
 import { toWei } from 'web3-utils'
 import { TransactionConfig } from 'web3-core'
 
-import { homeRoute } from '@/shared/routes'
-import { DEFAULT_GAS, DEFAULT_GAS_PRICE } from '@/shared/config'
 import { PROVIDERS } from '@/types/enums'
 
-const { profile: connectedProfile, status, setBalance } = useConnectionStore()
+const { profile: connectedProfile, status } = useConnectedProfileStore()
 const { currentNetwork } = useAppStore()
 const { asset, onSend, receiverAddress, amount } = storeToRefs(useSendStore())
 const { setStatus, clearSend } = useSendStore()
@@ -58,7 +56,7 @@ const handleSend = async () => {
 
     await sendTransaction(transaction)
     assertString(connectedProfile.address)
-    setBalance(await getBalance(connectedProfile.address))
+    connectedProfile.balance = await getBalance(connectedProfile.address)
     setStatus('success')
   } catch (error: any) {
     console.error(error)
diff --git a/pages/[profileAddress]/token/[tokenAddress].vue b/pages/[profileAddress]/token/[tokenAddress].vue
index bb3d78e0..e0342759 100644
--- a/pages/[profileAddress]/token/[tokenAddress].vue
+++ b/pages/[profileAddress]/token/[tokenAddress].vue
@@ -6,9 +6,9 @@ const {
   getToken,
   status: profileStatus,
   profile: viewedProfile,
-} = useProfileStore()
+} = useViewedProfileStore()
 const { status: connectionStatus, profile: connectedProfile } =
-  useConnectionStore()
+  useConnectedProfileStore()
 const token = ref<Token>()
 
 watchEffect(() => {
@@ -77,7 +77,11 @@ watchEffect(() => {
           v-if="token?.data && 'images' in token.data && token.data.images"
           :images="token.data.images"
         />
-        <AssetStandardInfo v-if="token?.standard" :standard="token.standard" />
+        <AssetStandardInfo
+          v-if="token?.standard"
+          :standard="token.standard"
+          class="hidden"
+        />
       </div>
     </div>
     <lukso-icon
diff --git a/pages/index.vue b/pages/index.vue
index b1afcdee..f7589db6 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { EXTENSION_STORE_LINKS } from '@/shared/config'
-import { profileRoute } from '@/shared/routes'
-
 definePageMeta({
   layout: 'landing',
 })
@@ -10,7 +7,7 @@ const supportedBrowsers = Object.entries(EXTENSION_STORE_LINKS)
   .filter(entry => entry[1] !== '')
   .map(browser => browser[0])
 
-const { status, profile } = useConnectionStore()
+const { status, profile } = useConnectedProfileStore()
 const { isUniversalProfileExtension } = useBrowserExtension()
 
 watchEffect(() => {
@@ -66,7 +63,7 @@ watchEffect(() => {
                 "
               ></lukso-sanitize>
             </div>
-            <ConnectOrInstallButton />
+            <AppButtonConnectOrInstall />
           </div>
         </lukso-card>
         <div
diff --git a/plugins/1.is-brave.ts b/plugins/1.isBrave.ts
similarity index 100%
rename from plugins/1.is-brave.ts
rename to plugins/1.isBrave.ts
diff --git a/plugins/2.is-opera.ts b/plugins/2.isOpera.ts
similarity index 100%
rename from plugins/2.is-opera.ts
rename to plugins/2.isOpera.ts
diff --git a/plugins/index.d.ts b/plugins/index.d.ts
index b99b1e8a..e9db82c3 100644
--- a/plugins/index.d.ts
+++ b/plugins/index.d.ts
@@ -1,7 +1,9 @@
+import { FormatNumberOptions } from '@formatjs/intl'
+
 declare module '#app' {
   interface NuxtApp {
     $formatMessage(key: string, options?: Record<string, string>): string
-    $formatNumber(value: string | number): string
+    $formatNumber(value: string | number, options?: FormatNumberOptions): string
     $formatDate(date?: string | number | Date): string
     $formatTime(date?: string | number | Date): string
   }
@@ -10,7 +12,7 @@ declare module '#app' {
 declare module '@vue/runtime-core' {
   interface ComponentCustomProperties {
     $formatMessage(key: string, options?: Record<string, string>): string
-    $formatNumber(value: string | number): string
+    $formatNumber(value: string | number, options?: FormatNumberOptions): string
     $formatDate(date?: string | number | Date): string
     $formatTime(date?: string | number | Date): string
   }
diff --git a/plugins/intl.ts b/plugins/intl.ts
index 7bb6fc09..551878a5 100644
--- a/plugins/intl.ts
+++ b/plugins/intl.ts
@@ -1,3 +1,5 @@
+import { FormatNumberOptions } from '@formatjs/intl'
+
 /**
  * Expose intl based functions to the app so they can be used without importing
  *
@@ -10,9 +12,10 @@ export default defineNuxtPlugin(() => {
     provide: {
       formatMessage: (key: string, options?: Record<string, string>) =>
         formatMessage(key, options),
-      formatNumber: (value: string | number) => formatNumber(value),
-      formatDate: (date: string | number) => formatDate(date),
-      formatTime: (date: string | number) => formatTime(date),
+      formatNumber: (value: string | number, options?: FormatNumberOptions) =>
+        formatNumber(value, options),
+      formatDate: (date?: string | number | Date) => formatDate(date),
+      formatTime: (date?: string | number | Date) => formatTime(date),
     },
   }
 })
diff --git a/shared/config.ts b/shared/config.ts
index 4037c040..f1075429 100644
--- a/shared/config.ts
+++ b/shared/config.ts
@@ -20,7 +20,7 @@ export const NETWORKS: NetworkInfo[] = [
 ]
 
 // name of default modal component name
-export const MODAL_DEFAULT_TEMPLATE = 'default'
+export const MODAL_DEFAULT_TEMPLATE = 'Default'
 
 // global provider object injected by browser extension
 export const INJECTED_PROVIDER = window?.lukso
diff --git a/stores/app.ts b/stores/app.ts
index ebef150f..71690bf7 100644
--- a/stores/app.ts
+++ b/stores/app.ts
@@ -1,5 +1,3 @@
-import { DEFAULT_NETWORK_ID, NETWORKS } from '@/shared/config'
-
 /**
  * Connection store
  * Keeps the information about connected profile and it's status
diff --git a/stores/connection.ts b/stores/connection.ts
deleted file mode 100644
index 2be8aa19..00000000
--- a/stores/connection.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Connection store
- * Keeps the information about connected profile
- *
- */
-export const useConnectionStore = defineStore('connection', () => {
-  const profile = reactive<Profile>({} as Profile)
-  const status = reactive({
-    isConnected: false,
-    isProfileLoading: false,
-    isConnecting: false,
-  })
-
-  // --- actions
-
-  const setConnectedAddress = (newAddress: Address) => {
-    profile.address = newAddress
-  }
-
-  const setConnectedProfile = (newProfile: Profile) => {
-    Object.assign(profile, newProfile)
-  }
-
-  const clearConnectedProfile = () => {
-    Object.assign(profile, {})
-  }
-
-  const setStatus = (statusName: keyof typeof status, newStatus: boolean) => {
-    status[statusName] = newStatus
-  }
-
-  const reloadConnectedProfile = (address: Address, profile: Profile) => {
-    clearConnectedProfile()
-    setConnectedAddress(address)
-    setConnectedProfile(profile)
-  }
-
-  const setBalance = (balance: string) => {
-    profile.balance = balance
-  }
-
-  return {
-    setConnectedAddress,
-    profile,
-    setConnectedProfile,
-    status,
-    clearConnectedProfile,
-    reloadConnectedProfile,
-    setStatus,
-    setBalance,
-  }
-})
diff --git a/stores/profileConnected.ts b/stores/profileConnected.ts
new file mode 100644
index 00000000..cbd540cb
--- /dev/null
+++ b/stores/profileConnected.ts
@@ -0,0 +1,27 @@
+/**
+ * Connected profile store
+ *
+ * Keeps the information about connected profile
+ *
+ */
+export const useConnectedProfileStore = defineStore('profileConnected', () => {
+  const profile = reactive<Profile>({} as Profile)
+  const status = reactive({
+    isConnected: false,
+    isProfileLoading: false,
+    isConnecting: false,
+  })
+
+  // --- actions
+
+  const setStatus = (statusName: keyof typeof status, newStatus: boolean) => {
+    status[statusName] = newStatus
+  }
+
+  return {
+    ...useProfileBase(profile),
+    profile,
+    status,
+    setStatus,
+  }
+})
diff --git a/stores/profile.ts b/stores/profileViewed.ts
similarity index 81%
rename from stores/profile.ts
rename to stores/profileViewed.ts
index 59057d49..f572259c 100644
--- a/stores/profile.ts
+++ b/stores/profileViewed.ts
@@ -9,11 +9,12 @@ import {
 } from '@/types/assets'
 
 /**
- * Profile store
- * Keeps the information about viewed profile
+ * Viewed profile store
+ *
+ * Keeps the information about currently viewed profile
  *
  */
-export const useProfileStore = defineStore('profile', () => {
+export const useViewedProfileStore = defineStore('profileViewed', () => {
   const profile = reactive<Profile>({} as Profile)
   const status = reactive({ isProfileLoading: true, isAssetLoading: true })
   const assetFilter = ref<AssetFilter>(AssetFilter.owned)
@@ -99,43 +100,21 @@ export const useProfileStore = defineStore('profile', () => {
     createdAssets.value = assets
   }
 
-  const setAddress = (newAddress: Address) => {
-    profile.address = newAddress
-  }
-
-  const setProfile = (newProfile: Profile) => {
-    Object.assign(profile, newProfile)
-  }
-
   const setStatus = (statusName: keyof typeof status, newStatus: boolean) => {
     status[statusName] = newStatus
   }
 
-  const clearProfile = () => {
-    Object.assign(profile, {})
-  }
-
-  const reloadProfile = (profile: Profile) => {
-    clearProfile()
-    assertAddress(profile.address, 'profile')
-    setAddress(profile.address)
-    setProfile(profile)
-  }
-
   return {
-    setAddress,
+    ...useProfileBase(profile),
     profile,
-    setProfile,
     status,
-    clearProfile,
-    reloadProfile,
+    setStatus,
     ownedAssets,
     setOwnedAssets,
     tokens,
     assetFilter,
     createdAssets,
     nfts,
-    setStatus,
     setCreatedAssets,
     getToken,
     getNft,
diff --git a/tests/e2e/404.spec.ts b/tests/e2e/404.spec.ts
new file mode 100644
index 00000000..dcf8ba79
--- /dev/null
+++ b/tests/e2e/404.spec.ts
@@ -0,0 +1,14 @@
+import { expect } from '@playwright/test'
+import { test } from './helpers/fixtures'
+
+test('can access 404 page', async ({ page }) => {
+  await page.goto('/404')
+  await expect(page).toHaveURL('/404')
+  await expect(page).toHaveScreenshot('404.png')
+})
+
+test('whe page not found it redirect to 404 page', async ({ page }) => {
+  await page.goto('/1234')
+  await expect(page).toHaveURL('/404')
+  await expect(page).toHaveScreenshot('404.png')
+})
diff --git a/tests/e2e/404.spec.ts-snapshots/404-chrome.png b/tests/e2e/404.spec.ts-snapshots/404-chrome.png
new file mode 100644
index 00000000..2d7ff428
Binary files /dev/null and b/tests/e2e/404.spec.ts-snapshots/404-chrome.png differ
diff --git a/tests/e2e/helpers/fixtures.ts b/tests/e2e/helpers/fixtures.ts
new file mode 100644
index 00000000..6ee51df8
--- /dev/null
+++ b/tests/e2e/helpers/fixtures.ts
@@ -0,0 +1,24 @@
+import { TestInfo, test as base } from '@playwright/test'
+
+interface TestFixtures {}
+
+export const test = base.extend<TestFixtures>({
+  // overrides default page fixture
+  page: async ({ page }, use, testInfo: TestInfo) => {
+    const originalSnapshotPath = testInfo.snapshotPath
+
+    // fixes fail test issue with snapshot files that contain platform name (ie. OSX adds "darwin" while CI uses "linux")
+    testInfo.snapshotPath = snapshotName => {
+      const result = originalSnapshotPath
+        .apply(testInfo, [snapshotName])
+        .replace('.txt', '.json')
+        .replace('-chromium', '')
+        .replace('-linux', '')
+        .replace('-darwin', '')
+
+      return result
+    }
+
+    await use(page)
+  },
+})
diff --git a/tests/e2e/index.spec.ts b/tests/e2e/index.spec.ts
index f842f434..22040702 100644
--- a/tests/e2e/index.spec.ts
+++ b/tests/e2e/index.spec.ts
@@ -1,6 +1,8 @@
-import { expect, test } from '@playwright/test'
+import { expect } from '@playwright/test'
+import { test } from './helpers/fixtures'
 
-test('show modal with wallet options', async ({ page }) => {
+test('landing page when no browser extension', async ({ page }) => {
   await page.goto('/')
   await expect(page).toHaveURL('/')
+  await expect(page).toHaveScreenshot('landing-no-extension.png')
 })
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
new file mode 100644
index 00000000..ce876b5a
Binary files /dev/null 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 0623e2ad..03237432 100644
--- a/translations/en_US.json
+++ b/translations/en_US.json
@@ -7,6 +7,7 @@
   "token_details_contract_address": "Contract Address",
   "landing_hero_description_no_extension": "Looks like you don’t have the <span class=\"paragraph-inter-16-semi-bold\">Universal Profile browser extension</span> installed. You’ll need it before you can log in to our wallet service.",
   "send_pending_title": "Sending {amount} {symbol}",
+  "assets_empty_state_title": "You have no created assets",
   "web3_connect_no_extension": "You don't have the Universal Profile browser extension installed.",
   "header_install_extension": "Install Extension",
   "asset_standard_info_legacy_details": "Info about the standard goes here....",
@@ -23,7 +24,6 @@
   "token_details_token_id": "Token ID",
   "send_button": "Send {amount} {symbol}",
   "not_found_text": "We can’t seem to find the page you’re looking for!",
-  "app_meta_title": "LUKSO Universal Profile Wallet",
   "asset_filter_owned_assets": "Owned assets",
   "asset_standard_info_LSP8_details": "Info about the standard goes here....",
   "web3_connect_error_rejected_request": "You rejected the request",
@@ -41,11 +41,12 @@
   "header_my_profile": "My profile",
   "send_success_button": "Send another token",
   "send_success_title": "Sending complete!",
+  "profile_default_name": "anonymous account",
   "footer_terms_text": "Terms & Conditions",
+  "assets_empty_state_description": "To find out how to create your own assets such as Tokens and NFT’s on <span class=\"paragraph-inter-16-semi-bold\">LUKSO</span> head over to our <a href=\"https://docs.lukso.tech/guides/digital-assets/create-lsp7-digital-asset/\" target=\"_blank\" class=\"text-purple-51 hover:text-purple-41 underline paragraph-inter-16-semi-bold\">documentation</a>. ",
   "connect_or_install_button_coming_soon": "Coming soon...",
   "profile_balance_of": "of {balance} {symbol}",
   "send_error_message": "Looks like there was some kind of issue with your transaction. Please try again.",
-  "app_meta_description": "View all your assets in one place as well as send and receive tokens to other Universal Profile users.",
   "not_found_get_help": "Get some help",
   "header_disconnect": "Disconnect",
   "tokens_title": "Tokens",
@@ -55,7 +56,7 @@
   "modal_default_confirm": "Ok",
   "token_details_own": "You own this token",
   "footer_need_help_url": "mailto:support@lukso.network",
-  "web3_interface_error_message": "You try to connect to legacy profile that is no longer supported.",
+  "web3_interface_error_message": "You tried to connect with a legacy profile that is no longer supported.",
   "header_connect": "Connect",
   "web3_connect_error": "There was an error while connecting to the browser extension.",
   "footer_privacy_policy_text": "Privacy Policy",
diff --git a/utils/browser-info.ts b/utils/browserInfo.ts
similarity index 96%
rename from utils/browser-info.ts
rename to utils/browserInfo.ts
index 028ef617..66c90b00 100644
--- a/utils/browser-info.ts
+++ b/utils/browserInfo.ts
@@ -1,5 +1,3 @@
-import { EXTENSION_STORE_LINKS } from '@/shared/config'
-
 const detectBrowser = (): BrowserInfo | undefined => {
   const { isChrome, isBrave, isFirefox, isSafari, isEdge, isOpera } =
     useDevice() as DeviceExtended
diff --git a/utils/checkInterface.ts b/utils/checkInterface.ts
index 5ffafb1c..dd97ba50 100644
--- a/utils/checkInterface.ts
+++ b/utils/checkInterface.ts
@@ -1,4 +1,3 @@
-import { eip165ABI } from '@/shared/abis/eip165ABI'
 import { PROVIDERS } from '@/types/enums'
 
 /**
diff --git a/utils/detect-standard.ts b/utils/detectStandard.ts
similarity index 100%
rename from utils/detect-standard.ts
rename to utils/detectStandard.ts
diff --git a/utils/fetchLSP7Assets.ts b/utils/fetchLSP7Assets.ts
index f159f6b4..7bb77383 100644
--- a/utils/fetchLSP7Assets.ts
+++ b/utils/fetchLSP7Assets.ts
@@ -3,7 +3,6 @@ import { LSP4DigitalAssetJSON } from '@lukso/lsp-factory.js/build/main/src/lib/i
 
 import { PROVIDERS } from '@/types/enums'
 import { LSP7Asset } from '@/types/assets'
-import { ASSET_ICON_PLACEHOLDER_URL } from '@/shared/config'
 
 const fetchLSP7Assets = async (
   assetAddress: Address,
diff --git a/utils/fetchProfile.ts b/utils/fetchProfile.ts
index 2fdce322..4d22e599 100644
--- a/utils/fetchProfile.ts
+++ b/utils/fetchProfile.ts
@@ -1,8 +1,6 @@
 import { INTERFACE_IDS, SupportedStandards } from '@lukso/lsp-smart-contracts'
 
 import { PROVIDERS } from '@/types/enums'
-import { getDataABI } from '@/shared/abis/getDataABI'
-import { InterfaceError } from '@/shared/errors'
 
 export const fetchProfile = async (profileAddress: Address) => {
   const { contract, isEoA } = useWeb3(PROVIDERS.RPC)
diff --git a/utils/formatUrl.ts b/utils/formatUrl.ts
index d7051bdf..3ac6e189 100644
--- a/utils/formatUrl.ts
+++ b/utils/formatUrl.ts
@@ -1,5 +1,3 @@
-import { IPFS_URL } from '@/shared/config'
-
 /**
  * Replaces protocol in the given URL with their respective gateway URLs.
  * If the URL does not contain either protocol, returns the original URL.
diff --git a/utils/setupViewedAssets.ts b/utils/setupViewedAssets.ts
new file mode 100644
index 00000000..b522e3ed
--- /dev/null
+++ b/utils/setupViewedAssets.ts
@@ -0,0 +1,17 @@
+export const setupViewedAssets = async (profileAddress: Address) => {
+  const { setStatus } = useViewedProfileStore()
+
+  try {
+    const { setOwnedAssets, setStatus, setCreatedAssets } =
+      useViewedProfileStore()
+    const { fetchAssets } = useErc725()
+
+    setStatus('isAssetLoading', true)
+    setOwnedAssets(await fetchAssets(profileAddress, 'LSP5ReceivedAssets[]'))
+    setCreatedAssets(await fetchAssets(profileAddress, 'LSP12IssuedAssets[]'))
+  } catch (error) {
+    console.error(error)
+  } finally {
+    setStatus('isAssetLoading', false)
+  }
+}
diff --git a/utils/setupViewedProfile.ts b/utils/setupViewedProfile.ts
new file mode 100644
index 00000000..f8d0ed41
--- /dev/null
+++ b/utils/setupViewedProfile.ts
@@ -0,0 +1,19 @@
+export const setupViewedProfile = async (profileAddress: Address) => {
+  const {
+    setStatus,
+    profile: viewedProfile,
+    setProfile,
+  } = useViewedProfileStore()
+
+  try {
+    setStatus('isProfileLoading', true)
+    viewedProfile.address = profileAddress
+    const profile = await fetchProfile(profileAddress)
+    setProfile(profile)
+  } catch (error) {
+    console.error(error)
+    navigateTo(notFoundRoute())
+  } finally {
+    setStatus('isProfileLoading', false)
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 9c64d816..e18dc3d3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -506,17 +506,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@erc725/smart-contracts@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "@erc725/smart-contracts@npm:5.1.0"
-  dependencies:
-    "@openzeppelin/contracts": ^4.9.2
-    "@openzeppelin/contracts-upgradeable": ^4.9.2
-    solidity-bytes-utils: 0.8.0
-  checksum: 63748c8b6af72de0e87a7e015a2dae6926876705c3798f72da4b57d37e05d7eb67cd8ff527e3f5f1e85425035d5ca811577b11a1ec4a8030968bac206738dcee
-  languageName: node
-  linkType: hard
-
 "@erc725/smart-contracts@npm:^5.2.0":
   version: 5.2.0
   resolution: "@erc725/smart-contracts@npm:5.2.0"
@@ -1634,37 +1623,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lukso/lsp-factory.js@npm:3.0.0":
-  version: 3.0.0
-  resolution: "@lukso/lsp-factory.js@npm:3.0.0"
+"@lukso/lsp-factory.js@npm:3.1.1":
+  version: 3.1.1
+  resolution: "@lukso/lsp-factory.js@npm:3.1.1"
   dependencies:
     "@erc725/erc725.js": ^0.18.0
     "@ethersproject/abi": ^5.7.0
     "@ethersproject/experimental": ^5.7.0
-    "@lukso/lsp-smart-contracts": ^0.10.3
+    "@lukso/lsp-smart-contracts": ^0.11.1
     axios: ^0.23.0
     browser-image-compression: ^2.0.0
     ethers: ^5.7.0
     ipfs-http-client: 52.0.3
     ipfs-utils: 8.1.6
     rxjs: ^7.8.0
-  checksum: c1d93a38f0445438fc85629d70c7d5eb7e322ead34a50668b7a65c81ba5f8cf0cea8341f702b2e7539b64c6a1874f96bc50599f048ef6a01b2b1f5ccfd35f910
+  checksum: c39e57118350e45c351b9d1204941de36754422988c0f2ce38ab158fae6c272fbe5adef67d2454a6ef0808385c44c9eec16a5fad60a2f551bab9353a40b0a6f0
   languageName: node
   linkType: hard
 
-"@lukso/lsp-smart-contracts@npm:^0.10.3":
-  version: 0.10.3
-  resolution: "@lukso/lsp-smart-contracts@npm:0.10.3"
-  dependencies:
-    "@erc725/smart-contracts": ^5.1.0
-    "@openzeppelin/contracts": ^4.9.2
-    "@openzeppelin/contracts-upgradeable": ^4.9.2
-    solidity-bytes-utils: 0.8.0
-  checksum: d3ca0b776c79260d49fc9314131d8a5a871df26b84cf49e72e5765e80c84fb0410260669c7d5b0f84260219cb8782f8a5850c2c133db1dec89a47b8ef41af39a
-  languageName: node
-  linkType: hard
-
-"@lukso/lsp-smart-contracts@npm:^0.11.1":
+"@lukso/lsp-smart-contracts@npm:0.11.1, @lukso/lsp-smart-contracts@npm:^0.11.1":
   version: 0.11.1
   resolution: "@lukso/lsp-smart-contracts@npm:0.11.1"
   dependencies:
@@ -1676,12 +1653,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lukso/web-components@npm:^1.33.1":
-  version: 1.33.1
-  resolution: "@lukso/web-components@npm:1.33.1"
+"@lukso/web-components@npm:1.34.1":
+  version: 1.34.1
+  resolution: "@lukso/web-components@npm:1.34.1"
   dependencies:
     ethereum-blockies-base64: ^1.0.2
-  checksum: 10d551ca8fd37b67234a0e5bd1fef74240c44fb466364d8066bac225c634ab231a383e2d4a030bdf829c4ce3be613b300201f0eb30088df92ddbde26b29507f9
+  checksum: e233bd5eaec440f8d6a92eb402dfe3e264c474ed788b7d4dba9f4c9af9503fb8ba0ce4b240fb0caaa612fb1476238c26a58196e3518b1751f79ca14448b0e29a
   languageName: node
   linkType: hard
 
@@ -15967,9 +15944,9 @@ __metadata:
     "@erc725/erc725.js": 0.18.0
     "@esbuild-plugins/node-globals-polyfill": 0.2.3
     "@formatjs/intl": ^2.9.0
-    "@lukso/lsp-factory.js": 3.0.0
-    "@lukso/lsp-smart-contracts": ^0.11.1
-    "@lukso/web-components": ^1.33.1
+    "@lukso/lsp-factory.js": 3.1.1
+    "@lukso/lsp-smart-contracts": 0.11.1
+    "@lukso/web-components": 1.34.1
     "@nuxt/devtools": ^0.7.4
     "@nuxtjs/device": ^3.1.0
     "@nuxtjs/plausible": ^0.2.1